commit be4d43105e637f77503842d6294c9905303b4ad0
Author: Maxim Dolgolyov <maxim.dolgolyov@gmail.com>
Date:   Sun Apr 12 10:10:37 2026 +0300

    LearnSpace: full-stack educational whiteboard platform
    
    Node.js/Express backend + vanilla JS frontend.
    Features: real-time collaborative whiteboard (SSE), multi-page support,
    LaTeX formulas, shapes/connectors, coordinate systems, number lines,
    compass, zoom/pan, Catmull-Rom pencil smoothing, ruler/protractor with
    rotation & resize controls, minimap navigation overlay, auto-measurements,
    multi-page thumbnails sidebar, PNG export, page templates.
    Student/teacher workflows: classes, assignments, library, dashboard.
    Mobile responsive. SQLite (better-sqlite3).
    
    Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

diff --git a/.claude/rules/ast-index.md b/.claude/rules/ast-index.md
new file mode 100644
index 0000000..1e02547
--- /dev/null
+++ b/.claude/rules/ast-index.md
@@ -0,0 +1,45 @@
+# ast-index Rules
+
+## Mandatory Search Rules
+
+1. **ALWAYS use ast-index FIRST** for any code search task
+2. **NEVER duplicate results** — if ast-index found usages/implementations, that IS the complete answer
+3. **DO NOT run grep "for completeness"** after ast-index returns results
+4. **Use grep/Search ONLY when:**
+   - ast-index returns empty results
+   - Searching for regex patterns (ast-index uses literal match)
+   - Searching for string literals inside code (`"some text"`)
+   - Searching in comments content
+
+## Why ast-index
+
+ast-index is 17-69x faster than grep (1-10ms vs 200ms-3s) and returns structured, accurate results.
+
+## Command Reference
+
+| Task | Command | Time |
+|------|---------|------|
+| Universal search | `ast-index search "query"` | ~10ms |
+| Find class/component | `ast-index class "ComponentName"` | ~1ms |
+| Find symbol | `ast-index symbol "SymbolName"` | ~1ms |
+| Find usages | `ast-index usages "SymbolName"` | ~8ms |
+| Find implementations | `ast-index implementations "Interface"` | ~5ms |
+| Call hierarchy | `ast-index call-tree "function" --depth 3` | ~1s |
+| Find callers | `ast-index callers "functionName"` | ~1s |
+| Module deps | `ast-index deps "module-name"` | ~10ms |
+| File outline | `ast-index outline "File.tsx"` | ~1ms |
+
+## JavaScript-Specific Commands
+
+| Task | Command |
+|------|---------|
+| Find classes | `ast-index class "ClassName"` |
+| Find functions | `ast-index symbol "functionName"` |
+| Find Express routes | `ast-index search "router.get"` |
+| File structure | `ast-index outline "path/to/file.js"` |
+
+## Index Management
+
+- `ast-index rebuild` — Full reindex (run once after clone)
+- `ast-index update` — After git pull/merge
+- `ast-index stats` — Show index statistics
diff --git a/.claude/settings.json b/.claude/settings.json
new file mode 100644
index 0000000..ebe9fdd
--- /dev/null
+++ b/.claude/settings.json
@@ -0,0 +1,174 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(ast-index *)",
+      "Bash(node -e \"require\\(''./backend/src/controllers/sessionController.js''\\); console.log\\(''sessionController OK''\\)\")",
+      "Bash(node -e \"require\\(''./backend/src/controllers/courseController.js''\\); console.log\\(''courseController OK''\\)\")",
+      "Bash(node -e \"require\\(''''./backend/src/controllers/courseController.js''''\\); console.log\\(''''courseController OK''''\\)\")",
+      "Bash(node -e \"require\\(''''./backend/src/controllers/lessonController.js''''\\); console.log\\(''''lessonController OK''''\\)\")",
+      "Bash(node -e \"require\\(''''./backend/src/controllers/questionController.js''''\\); console.log\\(''''questionController OK''''\\)\")",
+      "Bash(node -e \"require\\(''''./backend/src/controllers/testController.js''''\\); console.log\\(''''testController OK''''\\)\")",
+      "Bash(node -e \":*)",
+      "Bash(grep -n \"case ''accordion''\" \"g:/Dev/Тесты/BQ-System/frontend/lesson-editor.html\")",
+      "Bash(grep -n \"case ''quote''\\\\|case ''checklist''\\\\|case ''button''\" \"g:/Dev/Тесты/BQ-System/frontend/lesson-editor.html\")",
+      "Bash(grep -n \"href=//theory\\\\|href=''''//theory''''\\\\|lesson-editor\\\\|editLesson\\\\|openEditor\" g:/Dev/Тесты/BQ-System/frontend/theory.html)",
+      "Bash(grep -v \"^.*://\\\\|//.*stat\")",
+      "Bash(ls \"g:/Dev/Тесты/BQ-System/frontend/\"*.html)",
+      "Bash(wc -l g:/Dev/Тесты/BQ-System/frontend/*.html)",
+      "Bash(grep -rn \"= ''//\\\\|= \"\"//\\\\|href=\"\"//\\\\|href=''//\\\\|href = ''//\\\\|href = \"\"//\\\\|\\\\.href = ''//\" \"g:/Dev/Тесты/BQ-System/frontend/\")",
+      "Bash(grep -v \"http\\\\|https\\\\|cdn\\\\|fonts\\\\|googleapis\\\\|jsdelivr\\\\|://\\\\|comment\\\\|//\")",
+      "Bash(grep -rn //course g:/Dev/Тесты/BQ-System/)",
+      "WebFetch(domain:hoster.by)",
+      "WebFetch(domain:www.websiteplanet.com)",
+      "WebFetch(domain:hostings.info)",
+      "Bash(head -10 grep -n \"^const stmts\\\\|^const _stmts\\\\|= db.prepare\\\\|db\\\\.prepare\" \"g:/Dev/Тесты/BQ-System/backend/src/controllers/assignmentController.js\")",
+      "Bash(node -e \"require\\(''./src/controllers/gamificationController''\\)\")",
+      "Bash(node -e \"require\\(''./src/controllers/classController''\\)\")",
+      "Bash(grep -rn \"BQ\\\\.notif\\\\.init\\\\|notif\\\\.init\" g:/Dev/Тесты/BQ-System/frontend/ --include=*.html)",
+      "Bash(grep -rn \"connectSSE\\\\|EventSource\" g:/Dev/Тесты/BQ-System/frontend/ --include=*.html)",
+      "Bash(grep -rn \"notif-item\\\\|notif-dot\\\\|notif-msg\\\\|notif-time\\\\|notif-empty\\\\|notif-read-all\" g:/Dev/Тесты/BQ-System/frontend/ --include=*.html)",
+      "Bash(grep -l 'href=\"\"/lab\"\"' frontend/*.html)",
+      "Bash(grep -rn \"notifications.js\" frontend/*.html)",
+      "Read(//g/Dev/Тесты/BQ-System/**)",
+      "Bash(python -c \":*)",
+      "WebFetch(domain:www.npmjs.com)",
+      "WebFetch(domain:medium.com)",
+      "WebFetch(domain:raw.githubusercontent.com)",
+      "WebFetch(domain:github.com)",
+      "WebFetch(domain:saturncloud.io)",
+      "WebFetch(domain:neilagrawal.com)",
+      "WebFetch(domain:mitchum.blog)",
+      "Bash(node src/db/seed-theory-2.js)",
+      "Bash(ls g:/Dev/Тесты/BQ-System/backend/src/db/seed*)",
+      "Bash(grep -r \"three\\\\|Three\\\\|babylon\\\\|Babylon\\\\|cesium\\\\|Cesium\\\\|webgl\\\\|WebGL\" g:/Dev/Тесты/BQ-System/frontend --include=*.html --include=*.js)",
+      "Bash(node src/db/seed-red-book.js)",
+      "Bash(grep -n \"requireAuth\\\\|optionalAuth\" \"g:/Dev/Тесты/BQ-System/backend/src/routes/\"*.js)",
+      "Bash(node -e \"require\\(''''./src/server.js''''\\)\")",
+      "Bash(node:*)",
+      "Bash(grep -v \"Use \\\\`node\")",
+      "Bash(node -e \"const db=require\\(''''./src/db/db''''\\); db.prepare\\(''''SELECT id,name_ru,category FROM rb_species WHERE id>=63 ORDER BY id''''\\).all\\(\\).forEach\\(r=>console.log\\(r.id,r.category,r.name_ru\\)\\); console.log\\(''''---''''\\); db.prepare\\(''''SELECT id,title,xp_reward FROM rb_quests ORDER BY id''''\\).all\\(\\).forEach\\(r=>console.log\\(r.id,r.xp_reward,r.title\\)\\); console.log\\(''''---''''\\); console.log\\(''''Видов:'''',db.prepare\\(''''SELECT COUNT\\(*\\) as n FROM rb_species''''\\).get\\(\\).n,''''Квестов:'''',db.prepare\\(''''SELECT COUNT\\(*\\) as n FROM rb_quests''''\\).get\\(\\).n,''''Связей:'''',db.prepare\\(''''SELECT COUNT\\(*\\) as n FROM rb_food_web''''\\).get\\(\\).n\\);\")",
+      "Bash(grep -n \"BQ.api.*features\\\\|/api/features\" frontend/*.html)",
+      "Bash(grep -l \"sb-link\\\\|sb-nav\" \"g:/Dev/Тесты/BQ-System/frontend/\"*.html)",
+      "Bash(python -c \"print\\(''hello''\\)\")",
+      "Bash(awk 'NR>=1180 && NR<=1200' backend/src/db/migrate.js)",
+      "Bash(awk 'NR>=1410 && NR<=1425' backend/src/db/migrate.js)",
+      "Bash(awk 'NR>=1465 && NR<=1490' backend/src/db/migrate.js)",
+      "Bash(node -e \"require\\(''''./backend/src/db/migrate''''\\)\")",
+      "Bash(ls g:/Dev/Тесты/BQ-System/frontend/biochem*.html)",
+      "Bash(grep -rn [😀-🙏🔬-🧪⚗️⚛️✓✗←→↑↓★☆✔✖👤🏫] g:/Dev/Тесты/BQ-System/frontend/ g:/Dev/Тесты/BQ-System/js/)",
+      "Bash(python /tmp/scan_emoji.py)",
+      "Bash(python scan_emoji.py)",
+      "Bash(python replace_emoji2.py)",
+      "Bash(find /g/Dev/Тесты/BQ-System/frontend -name \"*.html\" -exec head -5 {})",
+      "Bash(-print)",
+      "Bash(do echo:*)",
+      "Bash(head -15 grep -n \"bio-sidebar\\\\|bio-body\\\\|bio-panel\" \"g:/Dev/Тесты/BQ-System/frontend/biochem.html\")",
+      "Bash(head -3 grep -n \"</style>\" \"g:/Dev/Тесты/BQ-System/frontend/homework.html\")",
+      "Bash(head -3 grep -n \"</style>\" \"g:/Dev/Тесты/BQ-System/frontend/admin.html\")",
+      "Bash(head -3 grep -n \"</style>\" \"g:/Dev/Тесты/BQ-System/frontend/test-run.html\")",
+      "Bash(head -3 grep -n \"</style>\" \"g:/Dev/Тесты/BQ-System/frontend/flashcards.html\")",
+      "Bash(grep -l \"sb-foot\\\\|nav-user-chip\" \"g:/Dev/Тесты/BQ-System/frontend/\"*.html)",
+      "Bash(grep -l \"sb-foot\" \"g:/Dev/Тесты/BQ-System/frontend/\"*.html)",
+      "Bash(ls -la frontend/biochem*.html)",
+      "Bash(find g:/Dev/Тесты/BQ-System/js -name *.js)",
+      "Read(//.pp-hint/|/**)",
+      "Bash(grep -n \"id === ''waves''\" g:/Dev/Тесты/BQ-System/frontend/lab.html)",
+      "Bash(ls g:/Dev/Тесты/BQ-System/frontend/*.html)",
+      "Bash(grep -v \"//.*toast\")",
+      "Bash(do ast-index:*)",
+      "Bash(grep -v \"^$\")",
+      "Bash(echo \"FILE: $f\")",
+      "Bash(do python3 -c \":*)",
+      "Bash(ast-index search:*)",
+      "Bash(chmod +x \"g:/Dev/Тесты/BQ-System/backend/scripts/backup.sh\")",
+      "Read(//BQ/.initPage/**)",
+      "Read(//showBoardIfAllowed/**)",
+      "Bash(node -e \"require\\(''express-rate-limit''\\)\")",
+      "Bash(find g:DevТестыBQ-System -name *.sql -type f)",
+      "Read(//g/Dev/**)",
+      "Bash(ls g:/Dev/Тесты/BQ-System/.env*)",
+      "Bash(docker --version)",
+      "Bash(curl -s https://api.ipify.org)",
+      "Bash(curl -s --connect-timeout 5 http://45.132.194.53:3000/api/health)",
+      "Bash(curl -s --connect-timeout 8 http://45.132.194.53:3000/api/health)",
+      "Bash(grep -n \"title>\" /g/Dev/Тесты/BQ-System/frontend/*.html)",
+      "Bash(mv bioquantum.db learnspace.db)",
+      "Bash(mv bioquantum.db-shm learnspace.db-shm)",
+      "Bash(mv bioquantum.db-wal learnspace.db-wal)",
+      "Bash(taskkill //F //IM node.exe)",
+      "Bash(taskkill /F /PID 72676)",
+      "Bash(cmd /c \"taskkill /F /PID 72676\")",
+      "Bash(cmd /c \"taskkill /F /PID 72676 2>&1\")",
+      "Bash(powershell -Command \"Stop-Process -Id 72676 -Force\")",
+      "Bash(powershell -Command \"Stop-Process -Id \\(Get-NetTCPConnection -LocalPort 3000 -State Listen\\).OwningProcess -Force\")",
+      "Bash(findstr /n /i \"draw\" frontend/classroom.html)",
+      "Bash(findstr /i \"allow\\\\|perm\\\\|grant\\\\|toggle\\\\|_can\")",
+      "Bash(findstr /n \"canDraw\" frontend/classroom.html)",
+      "Bash(taskkill /F /PID 56144)",
+      "Bash(cmd /c \"taskkill /F /PID 56144\")",
+      "Bash(cmd /c \"taskkill /F /PID 56144 2>&1\")",
+      "Bash(powershell -Command \"Stop-Process -Id 56144 -Force\")",
+      "Bash(findstr \"LISTENING\")",
+      "Bash(curl -s -X POST http://localhost:3000/api/auth/login -H 'Content-Type: application/json' -d '{\"email\":\"123@123.by\",\"password\":\"123456\"}')",
+      "Bash(powershell -Command \"Get-Process -Id 13632 -ErrorAction SilentlyContinue | Select-Object Id, ProcessName, MainWindowTitle\")",
+      "Bash(powershell -Command \"\\(Get-Process -Id 13632\\).Path\")",
+      "Bash(powershell -Command ':*)",
+      "Bash(curl -s http://localhost:3000/api/auth/login -X POST -H 'Content-Type: application/json' -d '{\"email\":\"admin@bq.local\",\"password\":\"123456\"}')",
+      "Bash(powershell -Command \"Stop-Process -Id 13632 -Force -ErrorAction SilentlyContinue\" sleep 1 cd \"g:/Dev/Тесты/BQ-System\")",
+      "Bash(powershell -Command \"Stop-Process -Id 13632 -Force\")",
+      "Bash(powershell -Command \"Stop-Process -Id 11320 -Force\")",
+      "Bash(powershell -Command \"Stop-Process -Id 44452 -Force\")",
+      "Bash(grep -rn \"function esc\\(s\\)\" frontend/*.html)",
+      "Bash(grep -rln \"Аналитика\\\\|Банк вопросов\\\\|Live-квиз\" frontend/*.html)",
+      "Bash(powershell -Command \"Stop-Process -Id 62712 -Force\")",
+      "Bash(findstr /i classroom)",
+      "Bash(powershell -Command \"Stop-Process -Id 71864 -Force\")",
+      "Bash(grep -n \"addClient\\\\|notifications/stream\" backend/src/controllers/*.js)",
+      "Bash(tasklist /FI \"IMAGENAME eq node.exe\")",
+      "Bash(taskkill /F /PID 24032)",
+      "Bash(powershell -Command \"Stop-Process -Id 24032 -Force -ErrorAction SilentlyContinue; Write-Output 'done'\")",
+      "Bash(ls frontend/gradebook*)",
+      "Bash(awk -F: '{print $1}')",
+      "Bash(npm --prefix backend run dev)",
+      "Bash(taskkill /PID 78248 /F)",
+      "Bash(cmd /c \"taskkill /PID 78248 /F\")",
+      "Bash(cmd /c \"taskkill /F /PID 78248\")",
+      "Bash(cmd /c \"taskkill /F /PID 78248 2>&1\")",
+      "Bash(powershell -Command \"Stop-Process -Id 78248 -Force -ErrorAction SilentlyContinue; Start-Sleep -Seconds 1; Get-Process -Id 78248 -ErrorAction SilentlyContinue\")",
+      "Bash(powershell -Command \"Get-NetTCPConnection -LocalPort 3000 -State Listen | Select-Object -ExpandProperty OwningProcess\")",
+      "Bash(powershell -Command \"Stop-Process -Id 45184 -Force\")",
+      "Bash(powershell -Command \"Start-Sleep 2; \\(Get-NetTCPConnection -LocalPort 3000 -State Listen -ErrorAction SilentlyContinue\\).OwningProcess\")",
+      "Read(//c/Users/Home/AppData/Local/Temp/**)",
+      "Bash(curl -s -I \"http://localhost:3000/js/api.js\")",
+      "Bash(curl -s \"http://localhost:3000/js/api.js\")",
+      "Bash(powershell -Command \"Stop-Process -Id 83740 -Force\")",
+      "Bash(powershell -Command \"\\(Get-NetTCPConnection -LocalPort 3000 -State Listen\\).OwningProcess\")",
+      "Bash(powershell -Command \"Get-Process -Id 57008 | Select-Object -ExpandProperty MainWindowTitle; \\(Get-WmiObject Win32_Process -Filter 'ProcessId=57008'\\).CommandLine\")",
+      "Bash(powershell -Command \"Stop-Process -Id 57008 -Force\")",
+      "Bash(powershell -Command \"Stop-Process -Id 37516 -Force\")",
+      "Bash(powershell -Command \"Stop-Process -Id 2764 -Force\")",
+      "Bash(powershell -Command \"Stop-Process -Id 81936 -Force\")",
+      "Bash(powershell -Command \"Stop-Process -Id 40888 -Force\")",
+      "Bash(powershell -Command \"\\(Get-WmiObject Win32_Process -Filter 'ProcessId=69696'\\).CommandLine\")",
+      "Bash(curl -s \"http://localhost:3000/api/classroom/1/cursor\" -X POST -H \"Content-Type: application/json\" -d '{\"x\":0,\"y\":0}')",
+      "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\")"
+    ],
+    "additionalDirectories": [
+      "\\tmp"
+    ]
+  },
+  "enabledPlugins": {
+    "ast-index@ast-index": true
+  },
+  "extraKnownMarketplaces": {
+    "ast-index": {
+      "source": {
+        "source": "github",
+        "repo": "defendend/Claude-ast-index-search"
+      }
+    }
+  }
+}
diff --git a/.claude/settings.local.json b/.claude/settings.local.json
new file mode 100644
index 0000000..24f23df
--- /dev/null
+++ b/.claude/settings.local.json
@@ -0,0 +1,231 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(cat \"g:/Dev/Тесты/BQ-System/backend/src/db/\"*.js)",
+      "Bash(node -e \"const db = require\\(''./src/db/db''\\); const users = db.prepare\\(''SELECT id, email, name, role FROM users''\\).all\\(\\); console.log\\(JSON.stringify\\(users, null, 2\\)\\);\")",
+      "Bash(wc -l \"g:/Dev/Тесты/BQ-System/frontend/\"*.html \"g:/Dev/Тесты/BQ-System/js/\"*.js)",
+      "Bash(cat \"g:/Dev/Тесты/BQ-System/backend/src/db/migrations/\"*.sql)",
+      "Bash(node src/db/migrate.js)",
+      "Bash(node src/db/seed-math.js)",
+      "Bash(npm install multer --save)",
+      "Bash(node -e \":*)",
+      "Bash(node export-math.js)",
+      "Bash(rm export-math.js)",
+      "Bash(node -e \"require\\(''./src/db/migrate''\\)\")",
+      "Bash(node -e \"const db=require\\(''./src/db/db''\\); console.log\\(db.prepare\\(''PRAGMA table_info\\(tests\\)''\\).all\\(\\).map\\(c=>c.name\\).join\\('', ''\\)\\); console.log\\(db.prepare\\(''PRAGMA table_info\\(topics\\)''\\).all\\(\\).map\\(c=>c.name\\).join\\('', ''\\)\\);\")",
+      "Bash(node -e \"require\\(''./src/controllers/adminController''\\)\")",
+      "Bash(node -e \"require\\(''./backend/src/controllers/classController''\\)\")",
+      "Bash(true\" \"g:/Dev/Тесты/BQ-System \")",
+      "Bash(node -e \"try { require\\(''./backend/src/controllers/classController''\\); console.log\\(''OK''\\); } catch\\(e\\) { console.error\\(e.message\\); }\")",
+      "Bash(node -e \"const db=require\\(''./backend/src/db/db''\\);try{db.prepare\\(''SELECT id FROM assignments LIMIT 1''\\).all\\(\\);console.log\\(''OK''\\)}catch\\(e\\){console.error\\(e.message\\)}\")",
+      "Bash(curl -s http://localhost:3000/api/assignments/my -H \"Authorization: Bearer invalid_token\")",
+      "Bash(curl -s http://localhost:3000/api/health)",
+      "Bash(netstat -ano)",
+      "Bash(findstr \":3000\")",
+      "Bash(findstr LISTENING)",
+      "Bash(taskkill /PID 28096 /F)",
+      "Bash(node \"g:\\\\Dev\\\\Тесты\\\\BQ-System\\\\backend\\\\src\\\\server.js\")",
+      "Bash(cmd //c \"taskkill /PID 28096 /F\")",
+      "Bash(node -e \"require\\(''dotenv''\\).config\\({path:''./backend/.env''}\\); console.log\\(''JWT_SECRET:'', process.env.JWT_SECRET ? ''SET'' : ''MISSING''\\)\")",
+      "Bash(node -e \"require\\(''dotenv''\\).config\\(\\); console.log\\(''JWT_SECRET:'', process.env.JWT_SECRET ? ''SET \\(''+process.env.JWT_SECRET.slice\\(0,10\\)+''...\\)'' : ''MISSING''\\)\")",
+      "Bash(cmd //c \"taskkill /F /IM node.exe\")",
+      "Bash(wc -l \"g:/Dev/Тесты/BQ-System/frontend\"/*.html)",
+      "Bash(grep -n \"LIMIT 500\\\\|LIMIT 200\\\\|LIMIT 100\\\\|LIMIT 50\" \"g:/Dev/Тесты/BQ-System/backend/src/controllers/\"*.js)",
+      "Bash(node -e \"const db = require\\(''./src/db/db''\\); console.log\\(JSON.stringify\\(db.prepare\\(''SELECT id,email,name,role FROM users''\\).all\\(\\)\\)\\)\")",
+      "Bash(node seed.js)",
+      "Bash(taskkill /F /IM node.exe)",
+      "Bash(powershell -Command \"Get-Process node -ErrorAction SilentlyContinue | Stop-Process -Force; Write-Host ''done''\")",
+      "Bash(timeout /t 8 /nobreak)",
+      "Bash(timeout 5 node src/server.js)",
+      "Bash(node -e \"const fs=require\\(''fs''\\);const emoji=/[\\\\u{1F300}-\\\\u{1FFFF}\\\\u{2600}-\\\\u{27BF}]/u;const files=[''frontend/classes.html'',''frontend/admin.html'',''frontend/board.html'',''frontend/library.html'',''frontend/dashboard.html''];let found=false;files.forEach\\(f=>{const lines=fs.readFileSync\\(f,''utf8''\\).split\\(''\\\\n''\\);lines.forEach\\(\\(l,i\\)=>{if\\(emoji.test\\(l\\)\\){console.log\\(f+'':''+\\(i+1\\)+'': ''+l.trim\\(\\).slice\\(0,120\\)\\);found=true;}}\\);}\\);if\\(found===false\\)console.log\\(''No emojis found''\\);\")",
+      "Bash(grep -v \"//.*innerHTML\")",
+      "Bash(grep \"innerHTML\\\\|template\\\\|backtick\\\\|\\\\`\")",
+      "Bash(node -e \"console.log\\(require\\(''crypto''\\).randomBytes\\(32\\).toString\\(''hex''\\)\\)\")",
+      "Bash(node -e \"const db = require\\(''better-sqlite3''\\)\\(''g:/Dev/Тесты/BQ-System/backend/bioquantum.db''\\); const users = db.prepare\\(''SELECT id, email, name, role FROM users WHERE role = ?''\\).all\\(''admin''\\); console.log\\(JSON.stringify\\(users, null, 2\\)\\);\")",
+      "Bash(node -e \"const db = require\\(''better-sqlite3''\\)\\(''bioquantum.db''\\); const users = db.prepare\\(''SELECT id, email, name, role FROM users WHERE role = ?''\\).all\\(''admin''\\); console.log\\(JSON.stringify\\(users, null, 2\\)\\);\")",
+      "Bash(node -e \"const db = require\\(''./node_modules/better-sqlite3''\\)\\(''bioquantum.db''\\); const users = db.prepare\\(''SELECT id, email, name, role FROM users WHERE role = ?''\\).all\\(''admin''\\); console.log\\(JSON.stringify\\(users, null, 2\\)\\);\")",
+      "Bash(ls g:/Dev/Тесты/BQ-System/backend/node_modules/.bin/better*)",
+      "Bash(node -e \"const db = require\\(''''./src/db/db''''\\); const users = db.prepare\\(''''SELECT id, email, name, role FROM users''''\\).all\\(\\); console.log\\(JSON.stringify\\(users, null, 2\\)\\);\")",
+      "Bash(where ast-index:*)",
+      "Bash(ast-index --version)",
+      "Bash(ast-index rebuild:*)",
+      "Bash(ast-index stats:*)",
+      "Bash(ast-index outline:*)",
+      "Bash(ast-index search:*)",
+      "Bash(find g:/Dev/Тесты/BQ-System/backend -name *.db -o -name *.sqlite)",
+      "Bash(node src/db/seed-ct2021-v1.js)",
+      "Bash(pip list:*)",
+      "Bash(where pdftoppm:*)",
+      "Bash(where pdfimages:*)",
+      "Bash(where magick:*)",
+      "Bash(where gs:*)",
+      "Bash(pdftoppm --help)",
+      "Bash(python3 -c 'import fitz')",
+      "Bash(pip install:*)",
+      "Bash(python3 -c \"import fitz; print\\(''ok''\\)\")",
+      "Bash(python -c \"import fitz; print\\(''ok''\\)\")",
+      "Bash(where pip:*)",
+      "Bash(where pip3:*)",
+      "Bash(where python:*)",
+      "Bash(where python3:*)",
+      "Bash(where py:*)",
+      "Bash(python -c \"import sys; print\\(sys.version\\)\")",
+      "Bash(cmd /c \"python --version\")",
+      "Bash(cmd /c \"where python\")",
+      "Bash(where convert:*)",
+      "Bash(where pnmcut:*)",
+      "Bash(where ffmpeg:*)",
+      "Bash(scoop list:*)",
+      "Bash(cp /tmp/ct2021-06.png \"g:/Dev/Тесты/BQ-System/frontend/img/questions/page6.png\")",
+      "Bash(cp /tmp/ct2021-07.png \"g:/Dev/Тесты/BQ-System/frontend/img/questions/page7.png\")",
+      "Bash(cp /tmp/ct2021-08.png \"g:/Dev/Тесты/BQ-System/frontend/img/questions/page8.png\")",
+      "Bash(cp /tmp/ct2021-09.png \"g:/Dev/Тесты/BQ-System/frontend/img/questions/page9.png\")",
+      "Bash(node -e \"const s = require\\(''sharp''\\); console.log\\(''ok''\\)\")",
+      "Bash(node src/db/crop_images.js)",
+      "Bash(pdftoppm -png -r 50 -f 6 -l 6 \"g:/Dev/Тесты/BQ-System/ЦТ-ЦЭ/ЦТ 2021.pdf\" \"/tmp/small\")",
+      "Bash(cp /tmp/small-06.png \"g:/Dev/Тесты/BQ-System/frontend/img/questions/small6.png\")",
+      "Bash(pdftoppm -png -r 50 -f 7 -l 9 \"g:/Dev/Тесты/BQ-System/ЦТ-ЦЭ/ЦТ 2021.pdf\" \"/tmp/small\")",
+      "Bash(cp /tmp/small-07.png \"g:/Dev/Тесты/BQ-System/frontend/img/questions/small7.png\")",
+      "Bash(cp /tmp/small-08.png \"g:/Dev/Тесты/BQ-System/frontend/img/questions/small8.png\")",
+      "Bash(cp /tmp/small-09.png \"g:/Dev/Тесты/BQ-System/frontend/img/questions/small9.png\")",
+      "Bash(cp /tmp/pt-06.png \"g:/Dev/Тесты/BQ-System/frontend/img/questions/pt6.png\")",
+      "Bash(node -e \"const s=require\\(''sharp''\\); s\\(''../frontend/img/questions/pt6.png''\\).metadata\\(\\).then\\(m=>console.log\\(m.width, m.height\\)\\)\")",
+      "Bash(cp /tmp/pt-07.png \"g:/Dev/Тесты/BQ-System/frontend/img/questions/pt7.png\")",
+      "Bash(cp /tmp/pt-08.png \"g:/Dev/Тесты/BQ-System/frontend/img/questions/pt8.png\")",
+      "Bash(cp /tmp/pt-09.png \"g:/Dev/Тесты/BQ-System/frontend/img/questions/pt9.png\")",
+      "Bash(head -15 grep -n \"^class\\\\|fit\\(\\)\\\\|start\\(\\)\\\\|stop\\(\\)\\\\|reset\\(\\)\\\\|setT\" \"g:/Dev/Тесты/BQ-System/frontend/js/labs/states.js\")",
+      "Bash(npx ast-index:*)",
+      "Bash(npm info:*)",
+      "Bash(head -10 node -e \"require\\(''''acorn''''\\); console.log\\(''''acorn ok''''\\)\")",
+      "Bash(winget list:*)",
+      "Bash(ast-index install-claude-plugin:*)",
+      "Bash(npm list:*)",
+      "Read(//c/Users/Home/AppData/Roaming/npm/**)",
+      "Bash(grep -n \"sim-gas\\\\|sim-diff\\\\|soon.*Кинетика\\\\|reactions\\\\|chem-react\\\\|Химические\\\\|id: ''''gas''''\\\\|id: ''''diff''''\" frontend/lab.html)",
+      "Bash(grep -n \"id: ''reactions''\" frontend/lab.html)",
+      "Bash(awk 'NR>=1813 && NR<=1820' frontend/lab.html)",
+      "Bash(node --check \"g:/Dev/Тесты/BQ-System/frontend/js/labs/flask.js\")",
+      "Bash(xargs -I {} basename {})",
+      "Bash(find \"g:/Dev/Тесты/BQ-System/backend/src/db/migrations\" -name \"*.sql\" -exec wc -l {} +)",
+      "Bash(grep -n \"case ''callout''\\\\|case ''video''\\\\|case ''table''\\\\|case ''flashcard''\\\\|case ''sim''\\\\|toggleNotes\\\\|saveNote\\\\|notes-panel\" \"g:/Dev/Тесты/BQ-System/frontend/lesson.html\")",
+      "Bash(ast-index symbol:*)",
+      "WebSearch",
+      "Bash(ast-index version:*)",
+      "Bash(node --check \"g:/Dev/Тесты/BQ-System/frontend/js/labs/stereo.js\")",
+      "Bash(curl -s -o /dev/null -w \"%{http_code}\" http://localhost:3000/js/labs/stereo.js)",
+      "Bash(node -e \"global.THREE = {}; try { require\\(''g:/Dev/Тесты/BQ-System/frontend/js/labs/stereo.js''\\); console.log\\(''OK, StereoSim:'', typeof StereoSim\\); } catch\\(e\\) { console.log\\(''Error:'', e.message\\); }\")",
+      "Bash(xxd \"g:/Dev/Тесты/BQ-System/frontend/js/labs/stereo.js\")",
+      "Bash(curl -sL \"https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.min.js\")",
+      "Bash(curl -sL \"https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js\")",
+      "Bash(curl -sL \"https://cdn.jsdelivr.net/npm/three@0.149.0/build/three.min.js\")",
+      "Bash(node -c \"g:/Dev/Тесты/BQ-System/frontend/js/labs/stereo.js\")",
+      "Bash(node -c \"g:/Dev/Тесты/BQ-System/frontend/js/labs/triangle.js\")",
+      "Bash(node -c frontend/js/labs/forcesandbox.js)",
+      "Bash(grep -E \"\\\\.js$\")",
+      "Bash(ls -la /g/Dev/Тесты/BQ-System/frontend/*.html)",
+      "Bash(xargs grep:*)",
+      "Bash(grep -r \"xp\\\\|level\\\\|badge\\\\|achievement\\\\|streak\\\\|reward\\\\|points\\\\|gamif\" /g/Dev/Тесты/BQ-System/backend/src/ --include=*.js)",
+      "Bash(node -c backend/src/controllers/gamificationController.js)",
+      "Bash(node -c backend/src/controllers/classController.js)",
+      "Bash(node -c js/api.js)",
+      "Bash(node -c backend/src/controllers/sessionController.js)",
+      "Bash(node -c \"g:/Dev/Тесты/BQ-System/backend/src/controllers/sessionController.js\")",
+      "Bash(node -c \"g:/Dev/Тесты/BQ-System/backend/src/controllers/gamificationController.js\")",
+      "Bash(node -c \"g:/Dev/Тесты/BQ-System/backend/src/routes/gamification.js\")",
+      "Bash(node -c \"g:/Dev/Тесты/BQ-System/backend/src/db/migrate.js\")",
+      "Bash(node -c \"g:/Dev/Тесты/BQ-System/js/api.js\")",
+      "Bash(python3:*)",
+      "Bash(for f:*)",
+      "Bash(do echo:*)",
+      "Read(//g/Dev/Тесты/BQ-System/**)",
+      "Bash(done)",
+      "Bash(ls -lh /g/Dev/Тесты/BQ-System/frontend/*.html)",
+      "Bash(wc -l /g/Dev/Тесты/BQ-System/backend/src/controllers/*.js)",
+      "Bash(node -c backend/src/controllers/shopController.js)",
+      "Bash(node -c backend/src/controllers/templateController.js)",
+      "Bash(node -c backend/src/routes/shop.js)",
+      "Bash(node -c backend/src/routes/templates.js)",
+      "Bash(node -c backend/src/server.js)",
+      "Bash(node -c backend/src/controllers/lessonController.js)",
+      "Bash(node -c backend/src/db/migrate.js)",
+      "Bash(xargs basename:*)",
+      "Bash(node -c backend/src/controllers/permissionsController.js)",
+      "Bash(node -c backend/src/middleware/auth.js)",
+      "Bash(node -c backend/src/routes/gamification.js)",
+      "Bash(node -c backend/src/routes/courses.js)",
+      "Bash(wc -l frontend/*.html)",
+      "Bash(find backend/src/controllers -name \"*.js\" -exec wc -l {} +)",
+      "Bash(find . -name test* -o -name *test.js -o -name spec*)",
+      "Bash(grep \"Error\\\\|error\\\\|TODO\\\\|FIXME\" backend/src/controllers/*.js)",
+      "Bash(grep -i \"not implemented\\\\|unimplemented\\\\|coming soon\\\\|not yet\" backend/src/controllers/*.js frontend/*.html)",
+      "Bash(grep \"res.status\\(501\\\\|status: 501\\\\|res.json\\({.*disabled\\\\|res.json\\({.*not_implemented\" backend/src/controllers/*.js)",
+      "Bash(xargs wc:*)",
+      "Bash(grep -r \"editor\\\\|sandbox\\\\|molecule\" g:/Dev/Тесты/BQ-System/frontend/js/labs/*.js)",
+      "Bash(node -c frontend/js/labs/chemsandbox.js)",
+      "Bash(ls frontend/*.html)",
+      "Bash(node -e \"try { require\\(''./backend/src/middleware/validate''\\); console.log\\(''validate.js OK''\\); } catch\\(e\\) { console.error\\(e.message\\); }\")",
+      "Bash(node --test tests/auth.test.js)",
+      "Bash(node --test tests/shop.test.js)",
+      "Bash(node --test tests/sessions.test.js)",
+      "Bash(npm test:*)",
+      "Bash(find g:/Dev/Тесты/BQ-System/frontend/js/labs -type f -name *.js)",
+      "Bash(grep \"\\\\.js$\")",
+      "Bash(grep -r \"TODO\\\\|FIXME\\\\|скоро\\\\|coming soon\\\\|ТОТО\\\\|XXX\" g:/Dev/Тесты/BQ-System --include=*.js --include=*.html --include=*.css)",
+      "Bash(wc -l \"g:/Dev/Тесты/BQ-System/backend/tests\"/*.js)",
+      "Bash(grep -r \"скоро\\\\|coming soon\\\\|TODO\\\\|FIXME\" g:/Dev/Тесты/BQ-System --include=*.js --include=*.html --exclude-dir=node_modules)",
+      "Bash(find g:/Dev/Тесты/BQ-System -name *.json -path */data/*)",
+      "Bash(grep -E \"\\\\.\\(js|html\\)$\")",
+      "Bash(find /g/Dev/Тесты/BQ-System -name *.json -path */data/*)",
+      "Bash(node src/db/seed-theory.js)",
+      "Bash(timeout 5 node -e \"require\\(''./src/controllers/lessonController''\\);require\\(''./src/controllers/courseController''\\);console.log\\(''✓ Controllers OK''\\)\")",
+      "Bash(node -e \"require\\(''./src/controllers/bookmarkController''\\); require\\(''./src/routes/bookmarks''\\); console.log\\(''✓ Bookmarks OK''\\)\")",
+      "Bash(node -e \"require\\(''./src/controllers/searchController''\\); console.log\\(''✓ Search OK''\\)\")",
+      "Bash(node -e \"require\\(''./src/db/migrate''\\); require\\(''./src/controllers/sessionController''\\); console.log\\(''✓ OK''\\)\")",
+      "Bash(node --check \"g:/Dev/Тесты/BQ-System/frontend/js/labs/projectile.js\")",
+      "Bash(node --check \"g:/Dev/Тесты/BQ-System/frontend/js/labs/collision.js\")",
+      "Bash(node --check frontend/js/labs/gas.js)",
+      "Bash(node --check frontend/js/labs/brownian.js)",
+      "Bash(node --check frontend/js/labs/states.js)",
+      "Bash(node --check frontend/js/labs/diffusion.js)",
+      "Bash(node --check \"G:\\\\Dev\\\\Тесты\\\\BQ-System\\\\frontend\\\\js\\\\labs\\\\states.js\")",
+      "Bash(xargs ls:*)",
+      "Bash(find \"g:/Dev/Тесты/BQ-System\" -type f \\\\\\( -name \"*.js\" -o -name \"*.html\" -o -name \"*.css\" \\\\\\) -not -path \"*/node_modules/*\" -exec wc -l {} +)",
+      "Bash(head -10 grep -n \"info\\(\\)\\\\|_emitUpdate\\\\|onUpdate\" \"g:/Dev/Тесты/BQ-System/frontend/js/labs/photosynthesis.js\")",
+      "Bash(grep -n \"^  </div>$\\\\|^  </div>\" \"g:/Dev/Тесты/BQ-System/frontend/admin.html\")",
+      "Bash(grep -v \"<!-\\\\|//\")",
+      "Bash(grep -roh [a-z-]*.html g:/Dev/Тесты/BQ-System/js/)",
+      "Bash(grep -l \"@view-transition\\\\|view-transition\" g:/Dev/Тесты/BQ-System/frontend/*.html)",
+      "Bash(npm install:*)",
+      "Bash(grep -n \"SIMS\\\\|id: null\\\\|cat: ''''phys''''\" frontend/lab.html)",
+      "Bash(grep -n \"sim-chemsandbox\\\\|_openChemSandbox\\\\|chemSand\\\\|case ''''chemsandbox''''\" frontend/lab.html)",
+      "Bash(grep -n \"case ''''chemsandbox''''\\\\|case ''''crystal''''\\\\|_openChem\\\\|openSim\\\\b\" frontend/lab.html)",
+      "Bash(grep -n \"cat: ''''game\\\\|gp-section.*игр\\\\|CATS\\\\b\\\\|cats\\\\b\\\\|filterCat\\\\|cat === \" frontend/lab.html)",
+      "Bash(node -e \"require\\(''''./frontend/js/labs/angrybirds.js''''\\)\")",
+      "Bash(node -e \"require\\(''./frontend/js/labs/angrybirds.js''\\)\")",
+      "Bash(wc -l frontend/js/labs/*.js)",
+      "Bash(node -e \"require\\(''''./g:/Dev/Тесты/BQ-System/backend/src/server.js''''\\)\")",
+      "Bash(node -e \"const db=require\\(''./backend/src/db/db''\\); const cols=db.prepare\\(''PRAGMA table_info\\(questions\\)''\\).all\\(\\); console.log\\(cols.map\\(c=>c.name+'':''+c.type\\).join\\(''\\\\n''\\)\\)\")",
+      "Bash(node -e \"const db=require\\(''./backend/src/db/db''\\); console.log\\(''phys questions:'', db.prepare\\(\"\"SELECT COUNT\\(*\\) as n FROM questions q JOIN subjects s ON s.id=q.subject_id WHERE s.slug=''phys''\"\"\\).get\\(\\).n\\); console.log\\(''total questions:'', db.prepare\\(''SELECT COUNT\\(*\\) as n FROM questions''\\).get\\(\\).n\\);\")",
+      "Bash(node -e \"const db=require\\(''./backend/src/db/db''\\); const q=db.prepare\\(''SELECT s.slug, COUNT\\(*\\) as n FROM questions q JOIN subjects s ON s.id=q.subject_id GROUP BY s.slug''\\).all\\(\\); console.log\\(q\\);\")",
+      "Bash(node src/db/seed-phys.js)",
+      "Bash(node src/db/seed-chem.js)",
+      "Bash(node src/db/dedup-bio.js)",
+      "Bash(node -e \"const db=require\\(''./src/db/db''\\); console.log\\(db.prepare\\(\"\"SELECT sql FROM sqlite_master WHERE name=''bookmarks''\"\"\\).get\\(\\).sql\\)\")",
+      "Bash(find g:/Dev/Тесты/BQ-System -name *.bak -o -name *.old -o -name *.tmp -o -name *.orig)",
+      "Bash(head -20 echo --- find g:/Dev/Тесты/BQ-System -name test*.js -not -path */node_modules/*)",
+      "Bash(grep -rn \"href.*homework\\\\|href.*theory\\\\|href.*gradebook\" g:/Dev/Тесты/BQ-System/frontend/ --include=*.html)",
+      "Bash(wc -l /g/Dev/Тесты/BQ-System/frontend/*.html)",
+      "Bash(node -e \"const db=require\\(''./src/db/db''\\); const tables=db.prepare\\(\"\"SELECT name FROM sqlite_master WHERE type=''table'' ORDER BY name\"\"\\).all\\(\\); tables.forEach\\(t=>console.log\\(t.name\\)\\)\")",
+      "Bash(grep -o 'https://[^\"\"\"\"'''' ]*' /g/Dev/Тесты/BQ-System/frontend/*.html)",
+      "Bash(wc -l seed*.js pool.js crop_images.js dedup-bio.js)",
+      "Bash(grep -E \"$\\\\{.*name.*\\\\}\")",
+      "Bash(grep -n \"function esc\" frontend/*.html js/*.js)",
+      "Bash(node -e \"const src=require\\(''fs''\\).readFileSync\\(''frontend/lab.html'',''utf8''\\); [''gas'',''brownian'',''states'',''diffusion'',''reactions''].forEach\\(n=>{const idx=src.indexOf\\(''id=\"\"''+n+''-canvas\"\"''\\); const ctx=src.substring\\(Math.max\\(0,idx-200\\),idx\\); console.log\\(n+'': ''+\\(/proj-canvas-outer/.test\\(ctx\\)?''proj-canvas-outer'':''OTHER''\\)\\);}\\)\")",
+      "Bash(node -e \"const src=require\\(''fs''\\).readFileSync\\(''frontend/dashboard.html'',''utf8''\\); const lines=src.split\\(''\\\\n''\\); const g=[''esc'',''parseDate'',''fmtRelTime'',''safeHref'',''connectSSE'']; for\\(let i=0;i<lines.length;i++\\){for\\(const n of g\\){if\\(lines[i].includes\\(''const ''+n+'' ''\\)||lines[i].includes\\(''const ''+n+''=''\\)\\)console.log\\(\\(i+1\\)+'': ''+lines[i].trim\\(\\).substring\\(0,100\\)\\);}}\")",
+      "Bash(python \"C:\\\\Users\\\\Home\\\\.claude\\\\skills\\\\ui-ux-pro-max\\\\scripts\\\\search.py\" \"education platform login auth dark premium\" --design-system -p \"LearnSpace\" -f markdown)",
+      "Bash(python \"C:\\\\Users\\\\Home\\\\.claude\\\\skills\\\\ui-ux-pro-max\\\\scripts\\\\search.py\" \"premium dark SaaS auth fullscreen immersive\" --domain style -n 3)",
+      "Bash(grep -E \"\\\\.\\(js|json|html\\)$\")",
+      "Bash(grep -n \"EventSource\" /g/Dev/Тесты/BQ-System/frontend/*.html)"
+    ]
+  }
+}
diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..4b04495
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,14 @@
+node_modules
+.git
+.claude
+*.md
+!backend/README.md
+backend/tests
+backend/.env
+backend/bioquantum.db*
+backend/data
+backend/uploads
+__pycache__
+.DS_Store
+Thumbs.db
+*.log
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..490ac3d
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,29 @@
+# Dependencies
+node_modules/
+backend/node_modules/
+
+# Database files
+*.db
+*.db-shm
+*.db-wal
+data/
+
+# Environment / secrets
+.env
+.env.*
+!.env.example
+
+# Uploads
+backend/uploads/
+
+# Logs
+*.log
+server.log
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Build artifacts
+dist/
+build/
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..4e0d2fb
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,35 @@
+# BQ-System — правила для Claude
+
+## Поиск по коду
+
+**ВСЕГДА использовать `ast-index` ПЕРВЫМ** для любого поиска по коду.
+Grep/Read — только если ast-index вернул пустой результат.
+
+```bash
+# Найти класс/функцию/символ
+ast-index class "ClassName"
+ast-index symbol "functionName"
+
+# Найти использования
+ast-index usages "symbolName"
+
+# Поиск по содержимому файла
+ast-index search "keyword" --in-file "filename"
+
+# Структура файла
+ast-index outline "path/to/file.js"
+
+# Универсальный поиск
+ast-index search "query"
+```
+
+Grep использовать только для:
+- Поиска строковых литералов (`"some text"`)
+- Regex-паттернов
+- Если ast-index вернул пустой результат
+
+## Стек
+
+- Node.js/Express backend, SQLite (better-sqlite3, sync)
+- Frontend: vanilla JS, без бандлера
+- ast-index проиндексирован: `ast-index rebuild` при добавлении новых файлов
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..3752b6e
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,32 @@
+# ── Stage 1: install production deps ─────────────────────────────────────
+FROM node:22-alpine AS deps
+WORKDIR /app/backend
+COPY backend/package.json backend/package-lock.json ./
+RUN npm ci --omit=dev
+
+# ── Stage 2: runtime ─────────────────────────────────────────────────────
+FROM node:22-alpine
+LABEL maintainer="BQ-System"
+
+RUN apk add --no-cache sqlite tini
+
+WORKDIR /app
+COPY --from=deps /app/backend/node_modules ./backend/node_modules
+COPY backend/package.json ./backend/
+COPY backend/src           ./backend/src
+COPY backend/seed.js       ./backend/seed.js
+COPY frontend              ./frontend
+COPY js                    ./js
+
+# Ensure data & uploads dirs exist (volumes mount here)
+RUN mkdir -p /app/backend/data /app/backend/uploads /app/backups
+
+ENV NODE_ENV=production
+ENV PORT=3000
+EXPOSE 3000
+
+HEALTHCHECK --interval=30s --timeout=5s --start-period=10s --retries=3 \
+  CMD wget -qO- http://localhost:3000/api/health || exit 1
+
+ENTRYPOINT ["tini", "--"]
+CMD ["node", "backend/src/server.js"]
diff --git a/UX-REVIEW.md b/UX-REVIEW.md
new file mode 100644
index 0000000..69fbc40
--- /dev/null
+++ b/UX-REVIEW.md
@@ -0,0 +1,493 @@
+# LearnSpace — Полный UX-аудит фронтенда
+
+**Дата проверки:** 2026-03-16
+**Проверено файлов:** 40
+**Методология:** ручной просмотр каждого HTML-файла, оценка по 10 категориям
+
+---
+
+## Сводная таблица критических проблем
+
+| # | Файл | Проблема | Серьёзность |
+|---|------|----------|-------------|
+| 1 | board.html | Кнопка «Перейти» ведёт на `/dashboard`, а не запускает тест | HIGH |
+| 2 | login.html | После регистрации всегда редирект на `/dashboard` — учителя попадают не туда | HIGH |
+| 3 | homework.html | `catch {}` — пустой обработчик ошибок, студент не знает о сбое | HIGH |
+| 4 | test-result.html | Обе кнопки «К тестам» и «В кабинет» ведут на `/dashboard` — дублирование без смысла | HIGH |
+| 5 | live-quiz.html | Кнопка «Завершить сессию» без подтверждения — деструктивное действие | HIGH |
+| 6 | admin.html | Смена роли пользователя без подтверждения (inline select) | HIGH |
+| 7 | board.html | Ссылка `href="/red-book.html"` — с расширением `.html`, все остальные роуты без расширения | MEDIUM |
+| 8 | Все страницы | Analytics, Gradebook, Question Bank, Live Quiz, Lesson Editor — нет в сайдбаре | MEDIUM |
+| 9 | profile.html | `overflow: hidden` на `body` — может сломаться при виртуальной клавиатуре на мобиле | MEDIUM |
+| 10 | profile.html | Форма смены пароля без поля «текущий пароль» | MEDIUM |
+
+---
+
+## Детальный разбор по файлам
+
+---
+
+### login.html
+
+#### [HIGH] Flow: редирект после регистрации всегда на `/dashboard`
+Учителя и администраторы после создания аккаунта попадают на страницу студента. Им нужны `/classes` или `/admin`.
+**Фикс:** после успешной регистрации получать роль из ответа API и редиректить по роли: `student → /dashboard`, `teacher → /classes`, `admin → /admin`.
+
+#### [MEDIUM] Flow: нет выбора роли при регистрации
+Непонятно, как учитель или администратор создаёт аккаунт. Нет поля «роль» в форме регистрации.
+**Фикс:** добавить `<select>` с вариантами «Студент» / «Учитель». Роль «Администратор» создаётся только через admin-панель.
+
+#### [MEDIUM] Accessibility: нет ссылки «Забыли пароль?»
+Стандартный элемент auth-страниц полностью отсутствует.
+**Фикс:** добавить ссылку под полем пароля на форме входа.
+
+#### [LOW] Consistency: `showBtnSuccess` вставляет строку `'✓ Сохранено'` через конкатенацию текста
+Использование символа `✓` в коде (эмодзи-подобный символ) противоречит правилу проекта «только SVG-иконки».
+**Фикс:** заменить `'✓ '` на inline SVG с классом `.ic`.
+
+---
+
+### dashboard.html
+
+#### [MEDIUM] Loading: у виджетов есть скелетоны, но нет fallback при сетевой ошибке
+Если API возвращает 500 — скелетон не убирается и данные не появляются. Пользователь не понимает, что произошло.
+**Фикс:** в каждом `catch` блоке заменять скелетон на rich-empty с текстом ошибки и кнопкой «Повторить».
+
+#### [MEDIUM] Navigation: кнопки быстрых действий (`adm-actions`) видны для teacher/admin, но не имеют состояния загрузки
+После нажатия на «Создать тест» или «Добавить класс» кнопка не блокируется — возможно двойное нажатие.
+**Фикс:** `btn.disabled = true` сразу при клике.
+
+#### [LOW] Feedback: таймер дедлайна предупреждает только за 2 минуты (`secondsLeft <= 120`)
+Для длинных тестов (1 час+) единственное предупреждение придёт слишком поздно, если пользователь отвлёкся.
+**Фикс:** добавить промежуточное предупреждение при 25% оставшегося времени и за 5 минут.
+
+---
+
+### board.html
+
+#### [HIGH] Flow: кнопка «Перейти» на карточке задания ведёт на `/dashboard`, а не на тест
+```html
+<a href="/dashboard" class="btn-action">Перейти</a>
+```
+Студент не может начать задание прямо с борда — он попадает на главную страницу.
+**Фикс:** ссылка должна вести на `/test-run?session=...&assignment=...` (с нужными параметрами задания).
+
+#### [MEDIUM] Consistency: ссылка на Red Book в сайдбаре содержит `.html`-расширение
+```html
+<a href="/red-book.html" ...>
+```
+Все остальные ссылки: `/dashboard`, `/board`, `/classes` — без расширения.
+**Фикс:** добавить Express-роут `/red-book` → отдавать `red-book.html`, изменить ссылку на `/red-book`. Это же исправление нужно во **всех** файлах с сайдбаром.
+
+#### [MEDIUM] Navigation: студент без класса видит пустой бord без способа вступить по инвайт-коду
+Пустое состояние есть, но нет поля ввода инвайт-кода.
+**Фикс:** добавить в empty-state форму «Введи код класса» с полем и кнопкой.
+
+#### [MEDIUM] Feedback: бейдж «LIVE» рендерится всегда, независимо от статуса
+```html
+<span class="live-badge">LIVE</span>
+```
+JS должен скрывать/показывать его по реальному статусу сессии.
+**Фикс:** `liveBadge.style.display = session.is_live ? '' : 'none'`.
+
+#### [LOW] Data integrity: реакции сохраняются только в `localStorage`
+Данные `ls_reactions` пропадут на другом браузере/устройстве и не видны другим пользователям.
+**Фикс:** сохранять реакцию через POST `/api/posts/:id/react`, localStorage использовать только как оптимистичный кэш.
+
+---
+
+### classes.html
+
+#### [MEDIUM] Forms: кнопка «Создать класс» видна до выполнения JS role-check
+В HTML `btn-new-cl` отрисовывается сразу. Студент, быстро открыв страницу, видит её до скрытия.
+**Фикс:** добавить `style="display:none"` в HTML, показывать через JS только для teacher/admin.
+
+#### [MEDIUM] Navigation: ссылка на Gradebook скрыта в маленькой иконке в заголовке сайдбара
+Новый пользователь никогда не найдёт журнал оценок.
+**Фикс:** вынести «Журнал» как отдельный пункт сайдбара (или добавить явную кнопку в шапку детали класса).
+
+#### [MEDIUM] Confirmation: кнопка `btn-delete-class` — неясно, есть ли подтверждение
+В HTML диалог подтверждения не виден. Если он реализован только в JS-коде в виде `confirm()` браузера — это слабое решение.
+**Фикс:** использовать кастомный modal с явным текстом «Удалить класс X? Это действие необратимо», кнопками «Отмена» / «Удалить».
+
+#### [LOW] Accessibility: все элементы управления классами доступны только после выбора класса из списка
+Состояние «ничего не выбрано» показывает заглушку «Выберите класс» без инструкции о том, что нужно сделать слева.
+**Фикс:** добавить стрелку-подсказку или анимацию, указывающую на список классов.
+
+---
+
+### admin.html
+
+#### [HIGH] Confirmation: смена роли пользователя через inline `<select>` без подтверждения
+```html
+<select class="role-select">...</select>
+```
+Неосторожный клик меняет роль немедленно. Это деструктивное действие: учитель превращается в студента без возможности отмены.
+**Фикс:** при `change` события показывать confirmation modal «Изменить роль пользователя X с Y на Z?», только после подтверждения отправлять PATCH-запрос.
+
+#### [HIGH] Confirmation: кнопка `btn-del-q` (удалить вопрос) без видимого диалога подтверждения
+Удаление вопроса из банка — необратимое действие.
+**Фикс:** confirmation modal с предупреждением об необратимости.
+
+#### [MEDIUM] Error handling: нет отображения ошибок при провале admin-операций
+Если PATCH /api/users/:id/role вернул 500, пользователь не узнает об этом.
+**Фикс:** показывать toast/alert с текстом ошибки из ответа API.
+
+#### [LOW] UX: `max-height: 0` → `max-height: 4000px` в session drawer
+Анимация открытия непредсказуема по скорости — CSS считает переход от 0 до 4000px, хотя реальная высота 200px.
+**Фикс:** использовать JavaScript для установки точной `max-height: element.scrollHeight + 'px'`.
+
+---
+
+### test-run.html
+
+#### [MEDIUM] Feedback: кнопка «Завершить тест» доступна с первого вопроса без минимального порога
+Студент может нечаянно нажать и завершить тест, ответив на 0 вопросов.
+**Фикс:** показывать предупреждение в confirmation modal: «Ты ответил на X из Y вопросов. Уверен, что хочешь завершить?»
+
+#### [MEDIUM] Accessibility: `<img src="..." alt="">` — пустой атрибут alt у изображений в вопросах
+Студенты с нарушениями зрения не получат описание изображения.
+**Фикс:** заполнять `alt` из поля описания вопроса в БД (например, `alt="Изображение к вопросу: ..."`).
+
+#### [MEDIUM] Loading: нет серверного сохранения прогресса теста в процессе
+SessionStorage работает только в рамках одной вкладки. При сбое браузера прогресс теряется.
+**Фикс:** периодически (каждые 30 сек) отправлять автосохранение через PATCH `/api/sessions/:id/autosave` с текущими ответами.
+
+#### [LOW] Feedback: предупреждение таймера только за 120 секунд — мало для коротких тестов
+**Фикс:** добавить предупреждение при достижении 25% оставшегося времени (независимо от абсолютного значения).
+
+---
+
+### test-result.html
+
+#### [HIGH] Flow: обе кнопки «К тестам» и «В кабинет» ведут на `/dashboard`
+```html
+<a href="/dashboard" class="btn-primary">К тестам</a>
+<a href="/dashboard" class="btn-ghost">В кабинет</a>
+```
+Дублирование кнопок с одинаковым назначением сбивает с толку.
+**Фикс:** «К тестам» → `/board` (список заданий), «В кабинет» → `/dashboard`, добавить третью кнопку «Пройти ещё раз» → `/test-run?...` с теми же параметрами.
+
+#### [MEDIUM] Navigation: нет возврата к заданию на борде, если тест был из assignment
+Если студент пришёл с `/board?class=5`, после теста нет ссылки «Вернуться к классу».
+**Фикс:** передавать `returnUrl` параметром и использовать его в кнопке «Назад».
+
+---
+
+### homework.html
+
+#### [HIGH] Error handling: пустой `catch {}` при загрузке данных класса в `initStudent()`
+```js
+catch {}
+```
+Студент видит пустую форму без объяснения причины.
+**Фикс:** заменить на `catch(e) { showError('Не удалось загрузить задания. ' + e.message); }`.
+
+#### [HIGH] Forms: при нескольких классах у студента задание всегда подаётся в `classes[0].id`
+Студент в 2+ классах может случайно отправить работу не в тот класс.
+**Фикс:** добавить `<select>` для выбора класса, если `classes.length > 1`.
+
+#### [MEDIUM] Forms: нет клиентской валидации размера файла перед отправкой
+Подсказка «до 50 МБ» есть, но проверки нет — пользователь узнаёт об ошибке только после долгой загрузки.
+**Фикс:**
+```js
+if (file.size > 50 * 1024 * 1024) { showError('Файл слишком большой (максимум 50 МБ)'); return; }
+```
+
+#### [MEDIUM] Error handling: при ошибке загрузки списка работ нет кнопки «Повторить»
+Показывается текст «Ошибка загрузки», но нет способа повторить запрос.
+**Фикс:** добавить `<button onclick="loadHomeworks()">Повторить</button>` в блок с ошибкой.
+
+---
+
+### profile.html
+
+#### [MEDIUM] Mobile: `html, body { height: 100%; overflow: hidden; }` сломается при виртуальной клавиатуре
+На iOS при фокусе на input виртуальная клавиатура поднимает область просмотра, overflow hidden блокирует прокрутку к полю.
+**Фикс:** убрать `overflow: hidden` с `body`, использовать `height: 100dvh` на layout-контейнере или flex с `min-height: 100svh`.
+
+#### [MEDIUM] Security/Forms: форма смены пароля не требует ввода текущего пароля
+Любой получивший доступ к разблокированному устройству может сменить пароль.
+**Фикс:** добавить поле «Текущий пароль» (`type="password"`) перед полями нового пароля.
+
+#### [LOW] Feedback: `form-msg` появляется, но нет auto-hide через N секунд
+Сообщение «Сохранено» остаётся на экране indefinitely.
+**Фикс:** `setTimeout(() => formMsg.classList.remove('ok','err'), 4000)`.
+
+---
+
+### library.html
+
+#### [MEDIUM] Accessibility/Mobile: кнопки редактирования/удаления папок появляются только при hover
+```css
+.folder-card-acts { opacity: 0; }
+.folder-card:hover .folder-card-acts { opacity: 1; }
+```
+На touch-устройствах hover недоступен — кнопки принципиально не видны.
+**Фикс:** на мобиле заменить hover на long-press или показывать кнопки через иконку «⋮» (три точки) при тапе на карточку.
+
+#### [MEDIUM] Confirmation: `btn-del` (удалить файл/папку) без видимого confirmation modal в HTML
+**Фикс:** добавить modal «Удалить файл/папку X? Это действие необратимо».
+
+#### [LOW] Navigation: breadcrumb `.lib-bc` показывает путь, но нет клавиатурной поддержки
+Ссылки в breadcrumb должны быть `<a href="...">`, а не `<span onclick="...">`.
+**Фикс:** использовать семантические `<a>` элементы для каждого уровня пути.
+
+---
+
+### analytics.html
+
+#### [MEDIUM] Loading: нет состояния загрузки для диаграмм Chart.js
+Пока данные грузятся — область диаграммы пустая/белая без индикации.
+**Фикс:** показывать skeleton-placeholder над canvas до получения данных.
+
+#### [LOW] Navigation: кнопка «Назад» (`an-header-back`) ведёт `history.back()` — может вернуть в сломанное состояние
+**Фикс:** задать конкретный href (`/classes` или `/dashboard`) вместо `history.back()`.
+
+---
+
+### gradebook.html
+
+#### [MEDIUM] Accessibility: при большом числе студентов таблица горизонтально прокручивается, но нет подсказки
+Пользователь не знает, что таблица шире экрана.
+**Фикс:** добавить fade-gradient на правом краю таблицы, пока есть горизонтальный скролл.
+
+#### [LOW] Navigation: нет ссылки на профиль студента при клике на имя в таблице
+**Фикс:** сделать имена студентов в первом столбце кликабельными ссылками на `/profile?id=...`.
+
+---
+
+### question-bank.html
+
+#### [MEDIUM] Confirmation: удаление вопроса (если есть кнопка) без confirmation modal
+**Фикс:** modal с предупреждением «Вопрос может быть использован в активных тестах».
+
+#### [LOW] Forms: фильтры не сохраняются при переходе к редактированию и обратно
+Пользователь теряет выбранные фильтры при навигации.
+**Фикс:** хранить состояние фильтров в URL query params (`?subject=bio&type=mc`).
+
+---
+
+### live-quiz.html
+
+#### [HIGH] Confirmation: кнопка `btn-end` (завершить сессию) без подтверждения
+Нажатие заканчивает живую викторину для всех участников мгновенно.
+**Фикс:** modal «Завершить сессию? Все участники будут автоматически переведены на экран результатов».
+
+#### [MEDIUM] Feedback: нет отображения числа подключённых участников в реальном времени
+Учитель не видит, сколько студентов уже подключились перед стартом.
+**Фикс:** показывать счётчик «X участников подключились» с обновлением через polling/WebSocket.
+
+---
+
+### course.html
+
+#### [LOW] Navigation: кнопка «Записаться» / «Продолжить» не показывает состояние записи до загрузки
+Кнопка мерцает при загрузке (меняет текст после JS-инициализации).
+**Фикс:** рендерить кнопку в скрытом/skeleton-состоянии до получения данных о статусе записи.
+
+---
+
+### lesson.html
+
+#### [MEDIUM] Content: inline quiz не имеет кнопки «Попробовать снова»
+После неверного ответа опция подсвечивается красным, но повторить нельзя.
+**Фикс:** добавить кнопку «Ещё раз» после показа правильного ответа.
+
+#### [MEDIUM] Layout: `max-height: 600px` для accordion-блоков — длинный контент обрежется
+```css
+.accordion-body { max-height: 600px; overflow: hidden; }
+```
+**Фикс:** убрать `max-height`, использовать JS `element.style.maxHeight = element.scrollHeight + 'px'` для анимации.
+
+#### [LOW] Navigation: оглавление (TOC) скрыто при ширине < 1100px — нет альтернативного доступа
+На планшетах нет способа перейти к нужному разделу без ручной прокрутки.
+**Фикс:** добавить кнопку «Оглавление» в topbar, открывающую TOC как drawer/dropdown на мобиле.
+
+---
+
+### pet.html
+
+#### [LOW] Accessibility: интерактивная анимация дыхания без возможности приостановки
+Постоянно движущийся элемент может вызывать дискомфорт у пользователей с вестибулярными нарушениями.
+**Фикс:** соблюдать `prefers-reduced-motion`: `@media (prefers-reduced-motion: reduce) { .breath-anim { animation: none; } }`.
+
+---
+
+### red-book.html
+
+#### [MEDIUM] Consistency: доступ через `href="/red-book.html"` с расширением
+Все остальные страницы доступны без `.html`. Эта единственная исключение.
+**Фикс:** добавить роут `GET /red-book` → serve `red-book.html`. Исправить ссылку в сайдбарах всех страниц.
+
+#### [LOW] Navigation: пункты подменю Red Book (`red-book-biomes`, `red-book-ecosystem`, `red-book-games`) видны в сайдбаре только на страницах Red Book
+Пользователь не знает о подразделах, пока не зайдёт в Red Book.
+**Фикс:** допустимо (паттерн контекстного сайдбара), но нужен `<title>` в виде «Красная книга — Биомы» для ориентации (уже есть).
+
+---
+
+### theory.html
+
+#### [MEDIUM] Navigation/Roles: кнопка «Создать курс» (`btn-new-course`) видна в заголовке для всех
+Студент видит кнопку действия, недоступного ему по роли.
+**Фикс:** скрывать кнопку до JS role-check (`style="display:none"` в HTML, показывать только для teacher/admin).
+
+---
+
+### 404.html
+
+#### [LOW] Navigation: кнопка «Назад» использует `history.back()`
+Если 404 открыт по прямой ссылке или из внешнего источника — history.back() закроет вкладку или уведёт на внешний сайт.
+**Фикс:** добавить `if (history.length > 1) history.back(); else location.href = '/dashboard';`.
+
+---
+
+### 403.html
+
+#### [LOW] UX: три кнопки подряд — «На главную», «Назад», «Войти» — могут запутать незалогиненного пользователя
+Если пользователь не залогинен, «На главную» тоже приведёт к редиректу на login.
+**Фикс:** проверять авторизацию через `LS.isLoggedIn()` и показывать только релевантные кнопки: для залогиненных — «На главную» + «Назад», для незалогиненных — только «Войти».
+
+---
+
+### 500.html
+
+#### [LOW] Feedback: «Мы уже в курсе» — вводящий в заблуждение текст
+На статических страницах ошибок нет механизма автоматической отправки отчёта. Фраза ложная.
+**Фикс:** заменить на «Попробуй обновить страницу или вернись позже».
+
+---
+
+### biochem.html и семейство (biochem-library, biochem-pathways, biochem-reactions, biochem-properties)
+
+#### [MEDIUM] Mobile: `body { overflow: hidden; }` + canvas-интерфейс непригоден для мобиле
+Молекулярный конструктор и аналогичные страницы требуют мышь для взаимодействия с canvas.
+**Фикс:** добавить предупреждение «Для работы рекомендуется компьютер» при ширине < 768px, или реализовать touch-управление (pinch-to-zoom, tap-to-place).
+
+#### [MEDIUM] Navigation: нет кнопки «Сохранить молекулу» с очевидным расположением
+Действия в правой панели (`bp-btn`) мелкие и не имеют подписей при сжатии панели.
+**Фикс:** добавить явную primary-кнопку «Сохранить в библиотеку» в тулбар.
+
+#### [LOW] Accessibility: canvas-элементы недоступны для скринридеров
+`<canvas id="mol-canvas">` без `aria-label` и без fallback-контента.
+**Фикс:** `<canvas aria-label="Молекулярный конструктор" role="img">Интерактивный редактор молекул</canvas>`.
+
+---
+
+### lesson-editor.html
+
+#### [MEDIUM] Forms: нет автосохранения (видна статусная строка `.etb-status`, но нет таймера автосохранения)
+Потеря введённого контента при случайном закрытии вкладки.
+**Фикс:** `setInterval(() => saveDraft(), 30000)` + обработчик `beforeunload` при несохранённых изменениях.
+
+#### [MEDIUM] Navigation/Confirmation: кнопка «Назад» (`etb-back`) ведёт без проверки несохранённых изменений
+**Фикс:** перехватить клик, если `isDirty`, показать: «Есть несохранённые изменения. Уйти?».
+
+#### [LOW] Accessibility: редактор использует `contenteditable` (предположительно) без ARIA-ролей
+**Фикс:** `role="textbox" aria-multiline="true" aria-label="Содержимое урока"`.
+
+---
+
+### collection.html / collection-rb.html
+
+#### [LOW] Empty state: нет состояния пустой коллекции
+Если у пользователя нет элементов в коллекции, нет поясняющего empty-state.
+**Фикс:** добавить `.rich-empty` с иллюстрацией и текстом «Коллекция пуста — открывай карточки видов, чтобы пополнять её».
+
+---
+
+### red-book-biomes.html / red-book-ecosystem.html / red-book-games.html
+
+#### [LOW] Mobile: canvas-страницы с `height: 100vh; overflow: hidden` некорректно ведут себя на мобиле
+**Фикс:** использовать `height: 100dvh` для корректного учёта браузерной панели на мобиле.
+
+#### [LOW] Navigation: кнопка «Назад» присутствует в topbar как `eco-back` — хорошо, но нет breadcrumb
+Пользователь не видит, где он в иерархии Red Book.
+**Фикс:** добавить breadcrumb «Красная книга > Экосистемы».
+
+---
+
+## Кросс-страничные (системные) проблемы
+
+### [HIGH] Navigation: ссылка `/red-book.html` с расширением во всех сайдбарах
+Затрагивает: board.html, classes.html, homework.html, library.html, profile.html, dashboard.html и все остальные страницы с общим сайдбаром.
+**Фикс:** добавить роут в Express: `app.get('/red-book', (req,res) => res.sendFile('red-book.html', {root: 'frontend'}))`, изменить все ссылки.
+
+### [MEDIUM] Navigation: «скрытые» инструментальные страницы недостижимы из навигации
+Следующие страницы **не имеют ссылок в основном сайдбаре**:
+- `/analytics` — аналитика успеваемости
+- `/gradebook` — журнал оценок
+- `/question-bank` — банк вопросов
+- `/live-quiz` — живая викторина
+- `/lesson-editor` — редактор уроков
+- `/flashcards` — карточки SRS
+- `/crossword`, `/hangman` — игры
+- `/knowledge-map` — карта знаний
+- `/lab` — лаборатория симуляций
+- `/pet` — виртуальный питомец
+
+Пользователи находят их только если знают прямой URL.
+**Фикс:** сгруппировать в сайдбаре или добавить «хаб» страницу с плитками всех инструментов (например, `/tools`).
+
+### [MEDIUM] Consistency: CDN Lucide загружается с разных источников
+- Большинство файлов: `https://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js`
+- `biochem-pathways.html`, `biochem-reactions.html`: `https://unpkg.com/lucide@0.469.0/...`
+
+**Фикс:** унифицировать на один CDN (jsDelivr предпочтительнее по производительности).
+
+### [MEDIUM] Accessibility: нет `aria-current="page"` на активных пунктах сайдбара
+`.sb-link.active` ставится через JS, но без ARIA-атрибута скринридеры не объявляют текущую страницу.
+**Фикс:** при активации добавлять `link.setAttribute('aria-current', 'page')`.
+
+### [LOW] Mobile: `js/mobile.js` не подключён к инструментальным страницам
+Страницы analytics, gradebook, question-bank, live-quiz и др. не имеют моб-бара, их нельзя нормально открыть на мобиле.
+**Фикс:** добавить `<script src="/js/mobile.js"></script>` перед `</body>` во всех страницах с `.app-layout`.
+
+### [LOW] Consistency: страницы biochem-семейства используют `data-lucide` без вызова `lucide.createIcons()`
+Если JS lucide загружен defer, иконки не инициализируются до вызова функции.
+**Фикс:** убедиться, что `lucide.createIcons()` вызывается после загрузки DOM во всех таких страницах.
+
+### [LOW] Accessibility: большинство модальных окон (`confirm-overlay`, `modal`) не управляют фокусом
+При открытии modal фокус остаётся на кнопке открытия, а не перемещается внутрь. Нет `aria-modal="true"`, нет `role="dialog"`, нет `aria-labelledby`.
+**Фикс:** при открытии modal: `modal.setAttribute('aria-modal', 'true'); modal.setAttribute('role', 'dialog'); firstFocusable.focus();`. Trap focus внутри пока открыт.
+
+---
+
+## Статистика проблем
+
+| Серьёзность | Количество |
+|-------------|------------|
+| HIGH        | 10         |
+| MEDIUM      | 32         |
+| LOW         | 22         |
+| **Итого**   | **64**     |
+
+---
+
+## Приоритетный план исправлений
+
+### Спринт 1 (критические, 1–2 дня)
+1. `board.html`: исправить href кнопки «Перейти» → `/test-run?...`
+2. `login.html`: редирект после регистрации по роли
+3. `homework.html`: убрать пустой `catch {}`, добавить обработку ошибок
+4. `test-result.html`: разделить кнопки на разные destination
+5. `admin.html`: добавить confirmation modal на смену роли и удаление вопроса
+6. `live-quiz.html`: добавить confirmation на завершение сессии
+
+### Спринт 2 (важные, 3–5 дней)
+7. Express-роут `/red-book` + исправить ссылки во всех сайдбарах
+8. Добавить `/js/mobile.js` на все инструментальные страницы
+9. `profile.html`: поле «текущий пароль» + убрать `overflow:hidden` с body
+10. `homework.html`: select класса при нескольких классах + валидация размера файла
+11. `lesson-editor.html`: автосохранение + beforeunload guard
+12. Скрыть учительские кнопки (`btn-new-cl`, `btn-new-course`) до JS role-check
+
+### Спринт 3 (улучшения, 1–2 недели)
+13. Добавить `aria-current="page"` в сайдбаре
+14. ARIA-атрибуты на всех modal/dialog
+15. `prefers-reduced-motion` на анимации
+16. Хаб-страница `/tools` или группировка инструментов в сайдбаре
+17. Унификация CDN Lucide на jsDelivr
+18. Сохранение реакций на сервере (board.html)
+19. Автосохранение прогресса теста на сервере (test-run.html)
+20. Контекстные empty-state для всех ошибок загрузки с кнопкой «Повторить»
diff --git a/backend/.env.example b/backend/.env.example
new file mode 100644
index 0000000..a40555a
--- /dev/null
+++ b/backend/.env.example
@@ -0,0 +1,8 @@
+PORT=3000
+
+# JWT
+JWT_SECRET=change_this_to_a_long_random_string
+JWT_EXPIRES_IN=7d
+
+# CORS — адрес фронтенда
+CLIENT_ORIGIN=http://localhost:5500
diff --git a/backend/README.md b/backend/README.md
new file mode 100644
index 0000000..6e5736b
--- /dev/null
+++ b/backend/README.md
@@ -0,0 +1,90 @@
+# LearnSpace Backend — Фаза 1
+
+## Быстрый старт
+
+```bash
+cd backend
+npm install
+
+# 1. Скопировать и заполнить переменные окружения
+cp .env.example .env
+
+# 2. Создать базу данных в PostgreSQL
+createdb learnspace
+
+# 3. Применить миграции (создать таблицы)
+npm run migrate
+
+# 4. Загрузить тестовые вопросы
+npm run seed
+
+# 5. Запустить сервер
+npm run dev
+```
+
+## API
+
+### Auth
+| Метод | URL | Тело | Описание |
+|-------|-----|------|----------|
+| POST | `/api/auth/register` | `{ email, password, name }` | Регистрация |
+| POST | `/api/auth/login` | `{ email, password }` | Вход |
+| GET  | `/api/auth/me` | — | Текущий пользователь |
+
+### Предметы
+| Метод | URL | Описание |
+|-------|-----|----------|
+| GET | `/api/subjects` | Список предметов |
+| GET | `/api/subjects/:slug/topics` | Темы предмета |
+
+### Сессии тестирования
+| Метод | URL | Тело | Описание |
+|-------|-----|------|----------|
+| POST | `/api/sessions` | `{ subject_slug, mode, count, topic_id? }` | Начать тест |
+| POST | `/api/sessions/:id/answer` | `{ question_id, option_id, time_spent_sec? }` | Отправить ответ |
+| POST | `/api/sessions/:id/finish` | — | Завершить тест + разбор |
+| GET  | `/api/sessions/:id/result` | — | Результат завершённого теста |
+| GET  | `/api/sessions/history` | — | История тестов |
+
+Все `/api/sessions/*` требуют заголовок:
+```
+Authorization: Bearer <token>
+```
+
+## Добавление вопросов
+
+Создать JSON-файл в `data/` по образцу `questions-bio.json`:
+```json
+{
+  "subject": "chem",
+  "topics": [{ "name": "Органическая химия", "order": 1 }],
+  "questions": [
+    {
+      "topic": "Органическая химия",
+      "difficulty": 2,
+      "text": "Текст вопроса",
+      "options": ["А", "Б", "В", "Г"],
+      "answer": 0,
+      "explanation": "Объяснение правильного ответа"
+    }
+  ]
+}
+```
+Затем повторно запустить `npm run seed`.
+
+## Структура проекта
+```
+backend/
+├── data/                     ← JSON с вопросами
+├── src/
+│   ├── server.js             ← точка входа
+│   ├── middleware/auth.js    ← JWT верификация
+│   ├── db/
+│   │   ├── pool.js           ← соединение с PostgreSQL
+│   │   ├── migrate.js        ← запуск миграций
+│   │   ├── seed.js           ← загрузка вопросов
+│   │   └── migrations/       ← SQL-файлы схемы
+│   ├── routes/               ← маршруты
+│   └── controllers/          ← бизнес-логика
+└── .env.example
+```
diff --git a/backend/package-lock.json b/backend/package-lock.json
new file mode 100644
index 0000000..c6666b2
--- /dev/null
+++ b/backend/package-lock.json
@@ -0,0 +1,2043 @@
+{
+  "name": "learnspace-backend",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "learnspace-backend",
+      "version": "1.0.0",
+      "dependencies": {
+        "bcryptjs": "^2.4.3",
+        "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"
+      },
+      "devDependencies": {
+        "nodemon": "^3.1.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.8.1.tgz",
+      "integrity": "sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@img/colour": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz",
+      "integrity": "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz",
+      "integrity": "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz",
+      "integrity": "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz",
+      "integrity": "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz",
+      "integrity": "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz",
+      "integrity": "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz",
+      "integrity": "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz",
+      "integrity": "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-riscv64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz",
+      "integrity": "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz",
+      "integrity": "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz",
+      "integrity": "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz",
+      "integrity": "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz",
+      "integrity": "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz",
+      "integrity": "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz",
+      "integrity": "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-ppc64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz",
+      "integrity": "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-ppc64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-riscv64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz",
+      "integrity": "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-riscv64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz",
+      "integrity": "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz",
+      "integrity": "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz",
+      "integrity": "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz",
+      "integrity": "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz",
+      "integrity": "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.7.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz",
+      "integrity": "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz",
+      "integrity": "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz",
+      "integrity": "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/accepts": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/append-field": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/append-field/-/append-field-1.0.0.tgz",
+      "integrity": "sha512-klpgFSWLW1ZEs8svjfb7g4qWY0YS5imI82dTg+QahUvJ8YqAY0P10Uk8tTyh9ZGuYEZEMaeJYCF5BFuX552hsw==",
+      "license": "MIT"
+    },
+    "node_modules/array-flatten": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
+      "license": "MIT"
+    },
+    "node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/bcryptjs": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-2.4.3.tgz",
+      "integrity": "sha512-V/Hy/X9Vt7f3BbPJEi8BdVFMByHi+jNXrYkW3huaybV/kQ0KJg0Y6PkEMbn+zeT+i+SiKZ/HMqJGIIt4LZDqNQ==",
+      "license": "MIT"
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/body-parser": {
+      "version": "1.20.4",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.4.tgz",
+      "integrity": "sha512-ZTgYYLMOXY9qKU/57FAo8F+HA2dGX7bqGc71txDRC1rS4frdFI5R7NhluHxH6M0YItAP0sHB4uqAOcYKxO6uGA==",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "~3.1.2",
+        "content-type": "~1.0.5",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "~1.2.0",
+        "http-errors": "~2.0.1",
+        "iconv-lite": "~0.4.24",
+        "on-finished": "~2.4.1",
+        "qs": "~6.14.0",
+        "raw-body": "~2.5.3",
+        "type-is": "~1.6.18",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.4.tgz",
+      "integrity": "sha512-h+DEnpVvxmfVefa4jFbCf5HdH5YMDXRsmKflpf1pILZWRFlTbJpxeU55nJl4Smt5HQaGzg1o6RHFPJaOqnmBDg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^4.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/buffer-equal-constant-time": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
+      "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "license": "MIT"
+    },
+    "node_modules/busboy": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
+      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
+      "dependencies": {
+        "streamsearch": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=10.16.0"
+      }
+    },
+    "node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/compressible": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
+      "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": ">= 1.43.0 < 2"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/compression": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/compression/-/compression-1.8.1.tgz",
+      "integrity": "sha512-9mAqGPHLakhCLeNyxPkK4xVo746zQ/czLH1Ky+vkitMnWfWZps8r0qXuwhwizagCRttsL4lfG4pIOvaWLpAP0w==",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "3.1.2",
+        "compressible": "~2.0.18",
+        "debug": "2.6.9",
+        "negotiator": "~0.6.4",
+        "on-headers": "~1.1.0",
+        "safe-buffer": "5.2.1",
+        "vary": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/compression/node_modules/negotiator": {
+      "version": "0.6.4",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.4.tgz",
+      "integrity": "sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/concat-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz",
+      "integrity": "sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==",
+      "engines": [
+        "node >= 6.0"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.0.2",
+        "typedarray": "^0.0.6"
+      }
+    },
+    "node_modules/content-disposition": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
+      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "5.2.1"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/content-type": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie-signature": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.7.tgz",
+      "integrity": "sha512-NXdYc3dLr47pBkpUCHtKSwIOQXLVn8dZEuywboCOJY/osA0wFSLlSawr3KN8qXJEyX66FcONTH8EIlVuK0yyFA==",
+      "license": "MIT"
+    },
+    "node_modules/cors": {
+      "version": "2.8.6",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.6.tgz",
+      "integrity": "sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/destroy": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/dotenv": {
+      "version": "16.6.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz",
+      "integrity": "sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/ecdsa-sig-formatter": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
+      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+      "license": "MIT"
+    },
+    "node_modules/encodeurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+      "license": "MIT"
+    },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/express": {
+      "version": "4.22.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.22.1.tgz",
+      "integrity": "sha512-F2X8g9P1X7uCPZMA3MVf9wcTqlyNp7IhH5qPCI0izhaOIYXaW9L535tGA3qmjRzpH+bZczqq7hVKxTR4NWnu+g==",
+      "license": "MIT",
+      "dependencies": {
+        "accepts": "~1.3.8",
+        "array-flatten": "1.1.1",
+        "body-parser": "~1.20.3",
+        "content-disposition": "~0.5.4",
+        "content-type": "~1.0.4",
+        "cookie": "~0.7.1",
+        "cookie-signature": "~1.0.6",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "~1.3.1",
+        "fresh": "~0.5.2",
+        "http-errors": "~2.0.0",
+        "merge-descriptors": "1.0.3",
+        "methods": "~1.1.2",
+        "on-finished": "~2.4.1",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "~0.1.12",
+        "proxy-addr": "~2.0.7",
+        "qs": "~6.14.0",
+        "range-parser": "~1.2.1",
+        "safe-buffer": "5.2.1",
+        "send": "~0.19.0",
+        "serve-static": "~1.16.2",
+        "setprototypeof": "1.2.0",
+        "statuses": "~2.0.1",
+        "type-is": "~1.6.18",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/finalhandler": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.2.tgz",
+      "integrity": "sha512-aA4RyPcd3badbdABGDuTXCMTtOneUCAYH/gxoYRTZlIJdF0YPWuGqiAsIrhNnnqdXGswYk6dGujem4w80UJFhg==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "2.6.9",
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "on-finished": "~2.4.1",
+        "parseurl": "~1.3.3",
+        "statuses": "~2.0.2",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/http-errors": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
+      "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
+      "license": "MIT",
+      "dependencies": {
+        "depd": "~2.0.0",
+        "inherits": "~2.0.4",
+        "setprototypeof": "~1.2.0",
+        "statuses": "~2.0.2",
+        "toidentifier": "~1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/ignore-by-default": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
+      "integrity": "sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
+    "node_modules/ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/jsonwebtoken": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.3.tgz",
+      "integrity": "sha512-MT/xP0CrubFRNLNKvxJ2BYfy53Zkm++5bX9dtuPbqAeQpTVe0MQTFhao8+Cp//EmJp244xt6Drw/GVEGCUj40g==",
+      "license": "MIT",
+      "dependencies": {
+        "jws": "^4.0.1",
+        "lodash.includes": "^4.3.0",
+        "lodash.isboolean": "^3.0.3",
+        "lodash.isinteger": "^4.0.4",
+        "lodash.isnumber": "^3.0.3",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.isstring": "^4.0.1",
+        "lodash.once": "^4.0.0",
+        "ms": "^2.1.1",
+        "semver": "^7.5.4"
+      },
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      }
+    },
+    "node_modules/jsonwebtoken/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/jwa": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.1.tgz",
+      "integrity": "sha512-hRF04fqJIP8Abbkq5NKGN0Bbr3JxlQ+qhZufXVr0DvujKy93ZCbXZMHDL4EOtodSbCWxOqR8MS1tXA5hwqCXDg==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer-equal-constant-time": "^1.0.1",
+        "ecdsa-sig-formatter": "1.0.11",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/jws": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/jws/-/jws-4.0.1.tgz",
+      "integrity": "sha512-EKI/M/yqPncGUUh44xz0PxSidXFr/+r0pA70+gIYhjv+et7yxM+s29Y+VGDkovRofQem0fs7Uvf4+YmAdyRduA==",
+      "license": "MIT",
+      "dependencies": {
+        "jwa": "^2.0.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/lodash.includes": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
+      "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isboolean": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
+      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isinteger": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
+      "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isnumber": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
+      "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isstring": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
+      "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.once": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
+      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
+      "license": "MIT"
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/merge-descriptors": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
+      "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "license": "MIT",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "10.2.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.4.tgz",
+      "integrity": "sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "brace-expansion": "^5.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "license": "MIT"
+    },
+    "node_modules/multer": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/multer/-/multer-2.1.1.tgz",
+      "integrity": "sha512-mo+QTzKlx8R7E5ylSXxWzGoXoZbOsRMpyitcht8By2KHvMbf3tjwosZ/Mu/XYU6UuJ3VZnODIrak5ZrPiPyB6A==",
+      "license": "MIT",
+      "dependencies": {
+        "append-field": "^1.0.0",
+        "busboy": "^1.6.0",
+        "concat-stream": "^2.0.0",
+        "type-is": "^1.6.18"
+      },
+      "engines": {
+        "node": ">= 10.16.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/negotiator": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/nodemon": {
+      "version": "3.1.14",
+      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.14.tgz",
+      "integrity": "sha512-jakjZi93UtB3jHMWsXL68FXSAosbLfY0In5gtKq3niLSkrWznrVBzXFNOEMJUfc9+Ke7SHWoAZsiMkNP3vq6Jw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^3.5.2",
+        "debug": "^4",
+        "ignore-by-default": "^1.0.1",
+        "minimatch": "^10.2.1",
+        "pstree.remy": "^1.1.8",
+        "semver": "^7.5.3",
+        "simple-update-notifier": "^2.0.0",
+        "supports-color": "^5.5.0",
+        "touch": "^3.1.0",
+        "undefsafe": "^2.0.5"
+      },
+      "bin": {
+        "nodemon": "bin/nodemon.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/nodemon"
+      }
+    },
+    "node_modules/nodemon/node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/nodemon/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "license": "MIT",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/on-headers": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.1.0.tgz",
+      "integrity": "sha512-737ZY3yNnXy37FHkQxPzt4UZ2UWPWiCZWLvFZ4fu5cueciegX0zGPnrlY6bwRg4FdQOe9YU8MkmJwGhoMybl8A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/path-to-regexp": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
+      "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==",
+      "license": "MIT"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/proxy-addr": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+      "license": "MIT",
+      "dependencies": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/pstree.remy": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz",
+      "integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/qs": {
+      "version": "6.14.2",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.2.tgz",
+      "integrity": "sha512-V/yCWTTF7VJ9hIh18Ugr2zhJMP01MY7c5kh4J870L7imm6/DIzBsNLTXzMwUA3yZ5b/KBqLx8Kp3uRvd7xSe3Q==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/raw-body": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.3.tgz",
+      "integrity": "sha512-s4VSOf6yN0rvbRZGxs8Om5CWj6seneMwK3oDb4lWDH0UPhWcxwOWw5+qk24bxq87szX1ydrwylIOp2uG1ojUpA==",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "~3.1.2",
+        "http-errors": "~2.0.1",
+        "iconv-lite": "~0.4.24",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/send": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.19.2.tgz",
+      "integrity": "sha512-VMbMxbDeehAxpOtWJXlcUS5E8iXh6QmN+BkRX1GARS3wRaXEEgzCcB10gTQazO42tpNIya8xIyNx8fll1OFPrg==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "~0.5.2",
+        "http-errors": "~2.0.1",
+        "mime": "1.6.0",
+        "ms": "2.1.3",
+        "on-finished": "~2.4.1",
+        "range-parser": "~1.2.1",
+        "statuses": "~2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/send/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/serve-static": {
+      "version": "1.16.3",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.3.tgz",
+      "integrity": "sha512-x0RTqQel6g5SY7Lg6ZreMmsOzncHFU7nhnRWkKgWuMTu5NN0DR5oruckMqRvacAN9d5w6ARnRBXl9xhDCgfMeA==",
+      "license": "MIT",
+      "dependencies": {
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "~0.19.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+      "license": "ISC"
+    },
+    "node_modules/sharp": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz",
+      "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@img/colour": "^1.0.0",
+        "detect-libc": "^2.1.2",
+        "semver": "^7.7.3"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.34.5",
+        "@img/sharp-darwin-x64": "0.34.5",
+        "@img/sharp-libvips-darwin-arm64": "1.2.4",
+        "@img/sharp-libvips-darwin-x64": "1.2.4",
+        "@img/sharp-libvips-linux-arm": "1.2.4",
+        "@img/sharp-libvips-linux-arm64": "1.2.4",
+        "@img/sharp-libvips-linux-ppc64": "1.2.4",
+        "@img/sharp-libvips-linux-riscv64": "1.2.4",
+        "@img/sharp-libvips-linux-s390x": "1.2.4",
+        "@img/sharp-libvips-linux-x64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4",
+        "@img/sharp-linux-arm": "0.34.5",
+        "@img/sharp-linux-arm64": "0.34.5",
+        "@img/sharp-linux-ppc64": "0.34.5",
+        "@img/sharp-linux-riscv64": "0.34.5",
+        "@img/sharp-linux-s390x": "0.34.5",
+        "@img/sharp-linux-x64": "0.34.5",
+        "@img/sharp-linuxmusl-arm64": "0.34.5",
+        "@img/sharp-linuxmusl-x64": "0.34.5",
+        "@img/sharp-wasm32": "0.34.5",
+        "@img/sharp-win32-arm64": "0.34.5",
+        "@img/sharp-win32-ia32": "0.34.5",
+        "@img/sharp-win32-x64": "0.34.5"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/simple-update-notifier": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz",
+      "integrity": "sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.5.3"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/statuses": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
+      "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/streamsearch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
+      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/touch": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.1.tgz",
+      "integrity": "sha512-r0eojU4bI8MnHr8c5bNo7lJDdI2qXlWWJk6a9EAFG7vbhTjElYhBVS3/miuE0uOuoLdb8Mc/rVfsmm6eo5o9GA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "nodetouch": "bin/nodetouch.js"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD",
+      "optional": true
+    },
+    "node_modules/type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "license": "MIT",
+      "dependencies": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/typedarray": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
+      "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==",
+      "license": "MIT"
+    },
+    "node_modules/undefsafe": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
+      "integrity": "sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "license": "MIT"
+    },
+    "node_modules/utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    }
+  }
+}
diff --git a/backend/package.json b/backend/package.json
new file mode 100644
index 0000000..5bd74dc
--- /dev/null
+++ b/backend/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "learnspace-backend",
+  "version": "1.0.0",
+  "description": "LearnSpace backend",
+  "main": "src/server.js",
+  "scripts": {
+    "start": "node src/server.js",
+    "dev": "nodemon src/server.js",
+    "migrate": "node src/db/migrate.js",
+    "seed": "node src/db/seed.js",
+    "test": "node --test tests/*.test.js"
+  },
+  "dependencies": {
+    "bcryptjs": "^2.4.3",
+"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"
+  },
+  "devDependencies": {
+    "nodemon": "^3.1.0"
+  }
+}
diff --git a/backend/scripts/backup.sh b/backend/scripts/backup.sh
new file mode 100644
index 0000000..bdbbc82
--- /dev/null
+++ b/backend/scripts/backup.sh
@@ -0,0 +1,49 @@
+#!/bin/sh
+# ── LearnSpace SQLite backup ──────────────────────────────────────────────
+# Uses VACUUM INTO for a safe, consistent snapshot (no WAL/SHM issues).
+# Usage:
+#   ./backup.sh                     # default paths
+#   ./backup.sh /path/to/db /path/to/backups
+#   KEEP=14 ./backup.sh             # keep last 14 backups (default: 7)
+# ─────────────────────────────────────────────────────────────────────────
+
+set -e
+
+DB_PATH="${1:-${DB_PATH:-$(dirname "$0")/../data/learnspace.db}}"
+BACKUP_DIR="${2:-${BACKUP_DIR:-$(dirname "$0")/../../backups}}"
+KEEP="${KEEP:-7}"
+
+if [ ! -f "$DB_PATH" ]; then
+  echo "[backup] ERROR: database not found at $DB_PATH" >&2
+  exit 1
+fi
+
+mkdir -p "$BACKUP_DIR"
+
+TIMESTAMP=$(date +%Y%m%d_%H%M%S)
+BACKUP_FILE="$BACKUP_DIR/learnspace_${TIMESTAMP}.db"
+
+echo "[backup] Creating snapshot: $BACKUP_FILE"
+sqlite3 "$DB_PATH" "VACUUM INTO '$BACKUP_FILE';"
+
+# Verify backup is not empty
+SIZE=$(wc -c < "$BACKUP_FILE" | tr -d ' ')
+if [ "$SIZE" -lt 1024 ]; then
+  echo "[backup] ERROR: backup file is suspiciously small (${SIZE} bytes)" >&2
+  rm -f "$BACKUP_FILE"
+  exit 1
+fi
+
+echo "[backup] OK — $(echo "scale=1; $SIZE / 1048576" | bc 2>/dev/null || echo "$SIZE bytes")"
+
+# Rotate: keep only the last $KEEP backups
+COUNT=$(ls -1 "$BACKUP_DIR"/learnspace_*.db 2>/dev/null | wc -l)
+if [ "$COUNT" -gt "$KEEP" ]; then
+  REMOVE=$((COUNT - KEEP))
+  ls -1t "$BACKUP_DIR"/learnspace_*.db | tail -n "$REMOVE" | while read -r f; do
+    echo "[backup] Removing old: $(basename "$f")"
+    rm -f "$f"
+  done
+fi
+
+echo "[backup] Done. Backups retained: $KEEP"
diff --git a/backend/seed.js b/backend/seed.js
new file mode 100644
index 0000000..5a060a9
--- /dev/null
+++ b/backend/seed.js
@@ -0,0 +1,295 @@
+'use strict';
+const db     = require('./src/db/db');
+const bcrypt = require('bcryptjs');
+
+/* ─────────────────────────── helpers ────────────────────────────────── */
+function daysAgo(d, h = 0, m = 0) {
+  const dt = new Date();
+  dt.setDate(dt.getDate() - d);
+  dt.setHours(dt.getHours() - h, dt.getMinutes() - m, 0, 0);
+  return dt.toISOString().replace('T', ' ').slice(0, 19);
+}
+function pick(arr) { return arr[Math.floor(Math.random() * arr.length)]; }
+function shuffle(arr) {
+  const a = [...arr];
+  for (let i = a.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [a[i], a[j]] = [a[j], a[i]];
+  }
+  return a;
+}
+function rand(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
+
+/* ─────────────────────────── data ───────────────────────────────────── */
+const PASS = bcrypt.hashSync('pass1234', 10);
+
+const TEACHER = { name: 'Наталья Смирнова', email: 'teacher@school.by', role: 'teacher' };
+
+const STUDENTS = [
+  { name: 'Алексей Петров',      email: 'petrov@school.by',      skill: 0.85 },
+  { name: 'Мария Иванова',       email: 'ivanova@school.by',     skill: 0.78 },
+  { name: 'Дмитрий Соколов',     email: 'sokolov@school.by',     skill: 0.62 },
+  { name: 'Анна Козлова',        email: 'kozlova@school.by',     skill: 0.91 },
+  { name: 'Иван Новиков',        email: 'novikov@school.by',     skill: 0.55 },
+  { name: 'Екатерина Морозова',  email: 'morozova@school.by',    skill: 0.73 },
+  { name: 'Сергей Волков',       email: 'volkov@school.by',      skill: 0.40 },
+  { name: 'Ольга Лебедева',      email: 'lebedeva@school.by',    skill: 0.82 },
+  { name: 'Никита Зайцев',       email: 'zajcev@school.by',      skill: 0.48 },
+  { name: 'Виктория Семёнова',   email: 'semenova@school.by',    skill: 0.69 },
+  { name: 'Артём Павлов',        email: 'pavlov@school.by',      skill: 0.30, lazy: true },
+  { name: 'Елена Фёдорова',      email: 'fedorova@school.by',    skill: 0.95 },
+  { name: 'Максим Орлов',        email: 'orlov@school.by',       skill: 0.58 },
+  { name: 'Юлия Попова',         email: 'popova@school.by',      skill: 0.76, lazy: true },
+];
+
+/* ─────────────────────────── insert users ───────────────────────────── */
+const insertUser = db.prepare(
+  'INSERT OR IGNORE INTO users (email, password_hash, name, role) VALUES (?, ?, ?, ?)'
+);
+const getUser = db.prepare('SELECT id FROM users WHERE email = ?');
+
+insertUser.run(TEACHER.email, PASS, TEACHER.name, TEACHER.role);
+const teacherId = getUser.get(TEACHER.email).id;
+console.log(`✓ Teacher: ${TEACHER.name} (id=${teacherId})`);
+
+const studentIds = [];
+for (const s of STUDENTS) {
+  insertUser.run(s.email, PASS, s.name, 'student');
+  const id = getUser.get(s.email).id;
+  studentIds.push({ id, skill: s.skill, lazy: !!s.lazy, name: s.name });
+}
+console.log(`✓ ${STUDENTS.length} students inserted`);
+
+/* ─────────────────────────── classes ────────────────────────────────── */
+function genCode() {
+  return Math.random().toString(36).slice(2, 9).toUpperCase();
+}
+const insertClass = db.prepare(
+  'INSERT OR IGNORE INTO classes (name, description, teacher_id, invite_code) VALUES (?, ?, ?, ?)'
+);
+const getClassByName = db.prepare('SELECT id FROM classes WHERE name = ? AND teacher_id = ?');
+
+const classData = [
+  { name: '11А · Биология',    desc: 'Подготовка к ЦТ 2026 по биологии',    subject: 'bio',  subjectId: 1 },
+  { name: '10Б · Математика',  desc: 'Алгебра и начала анализа',             subject: 'math', subjectId: 3 },
+];
+const classes = [];
+for (const c of classData) {
+  insertClass.run(c.name, c.desc, teacherId, genCode());
+  const row = getClassByName.get(c.name, teacherId);
+  classes.push({ ...c, id: row.id });
+  console.log(`✓ Class: "${c.name}" (id=${row.id})`);
+}
+
+/* ─────────────────────────── enroll students ────────────────────────── */
+const insertMember = db.prepare(
+  'INSERT OR IGNORE INTO class_members (class_id, user_id, joined_at) VALUES (?, ?, ?)'
+);
+// Класс 1 (bio) — все студенты
+for (const s of studentIds) {
+  insertMember.run(classes[0].id, s.id, daysAgo(rand(20, 40)));
+}
+// Класс 2 (math) — первые 10 студентов
+for (const s of studentIds.slice(0, 10)) {
+  insertMember.run(classes[1].id, s.id, daysAgo(rand(15, 35)));
+}
+console.log('✓ Students enrolled in classes');
+
+/* ─────────────────────────── load questions ─────────────────────────── */
+const allQuestions = db.prepare(
+  'SELECT id, subject_id, type FROM questions WHERE type = ? OR type IS NULL'
+).all('single');
+
+const questionsBySubject = {};
+for (const q of allQuestions) {
+  if (!questionsBySubject[q.subject_id]) questionsBySubject[q.subject_id] = [];
+  questionsBySubject[q.subject_id].push(q);
+}
+
+// Load all options grouped by question
+const allOptions = db.prepare('SELECT id, question_id, is_correct FROM options').all();
+const optionsByQuestion = {};
+for (const o of allOptions) {
+  if (!optionsByQuestion[o.question_id]) optionsByQuestion[o.question_id] = [];
+  optionsByQuestion[o.question_id].push(o);
+}
+
+/* ─────────────────────────── simulate session ────────────────────────── */
+const insertSession   = db.prepare(
+  "INSERT INTO test_sessions (user_id, subject_id, mode, total, score, status, started_at, finished_at) VALUES (?, ?, ?, ?, ?, 'completed', ?, ?)"
+);
+const insertSQ        = db.prepare(
+  'INSERT OR IGNORE INTO session_questions (session_id, question_id, order_index) VALUES (?, ?, ?)'
+);
+const insertAnswer    = db.prepare(
+  'INSERT OR IGNORE INTO user_answers (session_id, question_id, chosen_option_id, is_correct, time_spent_sec, answered_at) VALUES (?, ?, ?, ?, ?, ?)'
+);
+const insertAssignSes = db.prepare(
+  'INSERT OR IGNORE INTO assignment_sessions (assignment_id, user_id, session_id) VALUES (?, ?, ?)'
+);
+
+function simulateSession(userId, subjectId, mode, count, skill, daysAgoN) {
+  const pool = shuffle(questionsBySubject[subjectId] || []).slice(0, count);
+  if (!pool.length) return null;
+  const startedAt  = daysAgo(daysAgoN, rand(0, 6));
+  const finishedAt = daysAgo(daysAgoN, rand(0, 5), rand(5, 40));
+
+  let score = 0;
+  const info = insertSession.run(userId, subjectId, mode, pool.length, 0, startedAt, finishedAt);
+  const sessionId = info.lastInsertRowid;
+
+  pool.forEach((q, idx) => {
+    insertSQ.run(sessionId, q.id, idx);
+    const opts = optionsByQuestion[q.id] || [];
+    if (!opts.length) return;
+    const correct = opts.find(o => o.is_correct);
+    const wrong   = opts.filter(o => !o.is_correct);
+    // skill = probability of answering correctly
+    const isCorrect = Math.random() < skill;
+    let chosen;
+    if (isCorrect && correct) {
+      chosen = correct;
+    } else {
+      chosen = wrong.length ? pick(wrong) : pick(opts);
+    }
+    const wasCorrect = chosen.is_correct ? 1 : 0;
+    if (wasCorrect) score++;
+    insertAnswer.run(sessionId, q.id, chosen.id, wasCorrect, rand(8, 95), finishedAt);
+  });
+
+  // Update score
+  db.prepare('UPDATE test_sessions SET score = ? WHERE id = ?').run(score, sessionId);
+  return sessionId;
+}
+
+/* ─────────────────────────── assignments ────────────────────────────── */
+const insertAssign = db.prepare(`
+  INSERT OR IGNORE INTO assignments (class_id, title, subject_slug, mode, count, deadline, created_by, created_at)
+  VALUES (?, ?, ?, 'exam', ?, ?, ?, ?)
+`);
+const getAssign = db.prepare('SELECT id FROM assignments WHERE class_id = ? AND title = ?');
+
+const assignmentDefs = [
+  // Bio class
+  {
+    classIdx: 0, title: 'Клетка и её строение',   subjectId: 1, count: 15,
+    createdAgo: 28, deadlineAgo: 21, studentSkipChance: 0.0
+  },
+  {
+    classIdx: 0, title: 'Генетика — базовый уровень', subjectId: 1, count: 20,
+    createdAgo: 18, deadlineAgo: 11, studentSkipChance: 0.05
+  },
+  {
+    classIdx: 0, title: 'Контрольная: Митоз и мейоз', subjectId: 1, count: 25,
+    createdAgo: 10, deadlineAgo: 5, studentSkipChance: 0.10
+  },
+  {
+    classIdx: 0, title: 'Фотосинтез и дыхание', subjectId: 1, count: 15,
+    createdAgo: 3, deadlineAgo: null, studentSkipChance: 0.20
+  },
+  // Math class
+  {
+    classIdx: 1, title: 'Квадратные уравнения',    subjectId: 3, count: 10,
+    createdAgo: 22, deadlineAgo: 16, studentSkipChance: 0.0
+  },
+  {
+    classIdx: 1, title: 'Тригонометрия — тест',    subjectId: 3, count: 15,
+    createdAgo: 12, deadlineAgo: 7,  studentSkipChance: 0.08
+  },
+  {
+    classIdx: 1, title: 'Логарифмы и степени',     subjectId: 3, count: 15,
+    createdAgo: 4,  deadlineAgo: null, studentSkipChance: 0.25
+  },
+];
+
+for (const a of assignmentDefs) {
+  const cls = classes[a.classIdx];
+  const deadline = a.deadlineAgo ? daysAgo(a.deadlineAgo) : null;
+  insertAssign.run(cls.id, a.title, cls.subject, a.count, deadline, teacherId, daysAgo(a.createdAgo));
+  const row = getAssign.get(cls.id, a.title);
+  if (!row) { console.warn(`  ! Could not get assignment id for "${a.title}"`); continue; }
+  const assignId = row.id;
+
+  // Determine enrolled students for this class
+  const enrolled = a.classIdx === 0 ? studentIds : studentIds.slice(0, 10);
+
+  let done = 0;
+  for (const s of enrolled) {
+    // Lazy students skip recent assignments
+    if (s.lazy && a.studentSkipChance > 0.15) continue;
+    // Random skip by skip chance
+    if (Math.random() < a.studentSkipChance) continue;
+
+    const sessionId = simulateSession(
+      s.id, a.subjectId, 'exam', a.count, s.skill,
+      rand(a.deadlineAgo ? a.deadlineAgo : 1, a.createdAgo)
+    );
+    if (sessionId) {
+      insertAssignSes.run(assignId, s.id, sessionId);
+      done++;
+    }
+  }
+  console.log(`✓ Assignment "${a.title}" — ${done}/${enrolled.length} completed`);
+}
+
+/* ─────────────────────────── free-form sessions ─────────────────────── */
+// Some students did extra practice on their own
+const practiceSubjects = [[1, 'bio'], [3, 'math']];
+for (const s of studentIds) {
+  if (s.lazy) continue;
+  const extraCount = rand(1, 4);
+  for (let i = 0; i < extraCount; i++) {
+    const [subId] = pick(practiceSubjects);
+    simulateSession(s.id, subId, 'practice', rand(10, 25), s.skill + 0.05, rand(1, 30));
+  }
+}
+console.log('✓ Extra practice sessions simulated');
+
+/* ─────────────────────────── announcements ──────────────────────────── */
+const insertAnn = db.prepare(
+  'INSERT INTO announcements (class_id, author_id, text, created_at) VALUES (?, ?, ?, ?)'
+);
+const annTexts = [
+  [0, '📅 Напоминаю: контрольная по митозу пройдёт в следующую пятницу. Повторите темы деления клетки.', 9],
+  [0, '✅ Результаты по теме «Клетка» проверены. Молодцы! Средний балл — 74%. Слабее всего — органоиды.', 20],
+  [0, '📚 Для подготовки к ЦТ рекомендую дополнительно пройти тест по фотосинтезу в системе.', 5],
+  [1, '🧮 Разбор ошибок по квадратным уравнениям будет в среду, 14:00, кабинет 204.', 11],
+  [1, '⚠️ Дедлайн по логарифмам — в пятницу. Кто не сдал тригонометрию — сдайте до конца недели.', 3],
+];
+for (const [classIdx, text, ago] of annTexts) {
+  insertAnn.run(classes[classIdx].id, teacherId, text, daysAgo(ago));
+}
+console.log('✓ Announcements created');
+
+/* ─────────────────────────── notifications ──────────────────────────── */
+const insertNotif = db.prepare(
+  'INSERT INTO notifications (user_id, type, message, link, is_read, created_at) VALUES (?, ?, ?, ?, ?, ?)'
+);
+// Teacher gets notifs about students completing assignments
+for (const s of studentIds.slice(0, 6)) {
+  insertNotif.run(teacherId, 'session',
+    `«${s.name}» сдал «Генетика — базовый уровень» — ${rand(55, 95)}%`,
+    '/classes.html', 1, daysAgo(rand(5, 15)));
+}
+// Students get assignment notifs
+for (const s of studentIds) {
+  insertNotif.run(s.id, 'assignment', '📋 Для вас задание: «Контрольная: Митоз и мейоз»', '/dashboard.html', 1, daysAgo(10));
+  insertNotif.run(s.id, 'assignment', '📋 Для вас задание: «Фотосинтез и дыхание»', '/dashboard.html', rand(0,1), daysAgo(3));
+}
+console.log('✓ Notifications created');
+
+/* ─────────────────────────── summary ────────────────────────────────── */
+const stats = {
+  users:    db.prepare('SELECT COUNT(*) as n FROM users').get().n,
+  sessions: db.prepare('SELECT COUNT(*) as n FROM test_sessions').get().n,
+  answers:  db.prepare('SELECT COUNT(*) as n FROM user_answers').get().n,
+  assigns:  db.prepare('SELECT COUNT(*) as n FROM assignments').get().n,
+};
+console.log('\n═══ Seed complete ═══');
+console.log(`  Users:        ${stats.users}`);
+console.log(`  Sessions:     ${stats.sessions}`);
+console.log(`  Answers:      ${stats.answers}`);
+console.log(`  Assignments:  ${stats.assigns}`);
+console.log('\n  Password for all accounts: pass1234');
+console.log(`  Teacher:  ${TEACHER.email}`);
+console.log(`  Students: ${STUDENTS[0].email} … ${STUDENTS[STUDENTS.length-1].email}`);
diff --git a/backend/src/config.js b/backend/src/config.js
new file mode 100644
index 0000000..ec40902
--- /dev/null
+++ b/backend/src/config.js
@@ -0,0 +1,65 @@
+'use strict';
+
+/* ── Environment configuration & startup validation ───────────────────────
+   Require this module BEFORE anything else that reads process.env.
+   Fails fast with a clear message if required vars are missing or weak.
+   ──────────────────────────────────────────────────────────────────────── */
+
+require('dotenv').config({ path: require('path').join(__dirname, '../.env') });
+
+const path   = require('path');
+const errors = [];
+
+function _require(key, { minLen, notValue } = {}) {
+  const val = process.env[key];
+  if (!val) { errors.push(`${key} is required`); return undefined; }
+  if (minLen   && val.length < minLen)  errors.push(`${key} must be at least ${minLen} chars (got ${val.length})`);
+  if (notValue && val === notValue)     errors.push(`${key} must not be the default placeholder value`);
+  return val;
+}
+
+function _optional(key, defaultVal = undefined) {
+  return process.env[key] || defaultVal;
+}
+
+/* ── Required vars ────────────────────────────────────────────────────── */
+const JWT_SECRET = _require('JWT_SECRET', {
+  minLen:   32,
+  notValue: 'change_this_to_a_long_random_string',
+});
+
+/* ── Optional vars with defaults ─────────────────────────────────────── */
+const NODE_ENV = _optional('NODE_ENV', 'development');
+if (!['development', 'production', 'test'].includes(NODE_ENV)) {
+  errors.push(`NODE_ENV must be development | production | test (got: "${NODE_ENV}")`);
+}
+
+const PORT_RAW = _optional('PORT', '3000');
+const PORT = Number(PORT_RAW);
+if (!Number.isInteger(PORT) || PORT < 1 || PORT > 65535) {
+  errors.push(`PORT must be an integer between 1 and 65535 (got: "${PORT_RAW}")`);
+}
+
+/* ── Fail fast ───────────────────────────────────────────────────────── */
+if (errors.length) {
+  process.stderr.write('\n[config] FATAL: invalid environment configuration:\n');
+  errors.forEach(e => process.stderr.write(`  ✗ ${e}\n`));
+  process.stderr.write('\nFix these issues in your .env file and restart.\n\n');
+  process.exit(1);
+}
+
+module.exports = Object.freeze({
+  /* env */
+  JWT_SECRET,
+  PORT,
+  NODE_ENV,
+  isProd:        NODE_ENV === 'production',
+  LOG_LEVEL:     _optional('LOG_LEVEL', NODE_ENV === 'production' ? 'info' : 'debug'),
+  CLIENT_ORIGIN: _optional('CLIENT_ORIGIN'),
+  /* paths */
+  DB_PATH:       _optional('DB_PATH',     path.join(__dirname, '../data/learnspace.db')),
+  UPLOADS_DIR:   _optional('UPLOADS_DIR', path.join(__dirname, '../uploads')),
+  /* constants */
+  BCRYPT_ROUNDS: 12,
+  MAX_FILE_SIZE: 50 * 1024 * 1024,
+});
diff --git a/backend/src/constants.js b/backend/src/constants.js
new file mode 100644
index 0000000..85ecb0d
--- /dev/null
+++ b/backend/src/constants.js
@@ -0,0 +1,40 @@
+/* ── LearnSpace shared constants ───────────────────────────────────────── */
+
+exports.SESSION_MODES = new Set(['exam', 'practice', 'repeat', 'ct', 'topic', 'random']);
+
+exports.SESSION_STATUS = {
+  IN_PROGRESS: 'in_progress',
+  COMPLETED:   'completed',
+  ABANDONED:   'abandoned',
+};
+
+exports.ROLES = {
+  ADMIN:   'admin',
+  TEACHER: 'teacher',
+  STUDENT: 'student',
+};
+
+exports.NOTIFICATION_TYPES = {
+  ASSIGNMENT:  'assignment',
+  SESSION:     'session',
+  ACHIEVEMENT: 'achievement',
+  SYSTEM:      'system',
+  JOIN:        'join',
+  SUBMISSION:  'submission',
+  CHALLENGE:   'challenge',
+  DAILY_GOAL:  'daily_goal',
+};
+
+exports.SUBJECTS = {
+  BIO:  'bio',
+  CHEM: 'chem',
+  MATH: 'math',
+  PHYS: 'phys',
+};
+
+// Combo bonus XP thresholds: [minCombo, bonusXP]
+exports.COMBO_BONUSES = [
+  [10, 75],
+  [5,  30],
+  [3,  15],
+];
diff --git a/backend/src/controllers/adminController.js b/backend/src/controllers/adminController.js
new file mode 100644
index 0000000..ac848d6
--- /dev/null
+++ b/backend/src/controllers/adminController.js
@@ -0,0 +1,548 @@
+const db = require('../db/db');
+const { stripTags } = require('../utils/sanitize');
+const { audit } = require('../utils/audit');
+
+/* ── Prepared statements ──────────────────────────────────────────────── */
+const stmts = {
+  totalUsers: db.prepare("SELECT COUNT(*) AS n FROM users WHERE role = 'student'"),
+  totalTests: db.prepare("SELECT COUNT(*) AS n FROM test_sessions WHERE status = 'completed'"),
+  avgScore:   db.prepare(
+    "SELECT ROUND(AVG(CAST(score AS REAL) / total * 100), 1) AS avg FROM test_sessions WHERE status = 'completed'"
+  ),
+  bySubject:  db.prepare(`
+    SELECT s.name, s.slug,
+           COUNT(ts.id)                                             AS tests,
+           ROUND(AVG(CAST(ts.score AS REAL) / ts.total * 100), 1)  AS avg_pct
+    FROM test_sessions ts
+    JOIN subjects s ON s.id = ts.subject_id
+    WHERE ts.status = 'completed'
+    GROUP BY s.id ORDER BY s.id
+  `),
+};
+
+/* ── GET /api/admin/stats ─────────────────────────────────────────────── */
+function getStats(_req, res) {
+  res.json({
+    totalUsers: stmts.totalUsers.get().n,
+    totalTests: stmts.totalTests.get().n,
+    avgScore:   stmts.avgScore.get().avg,
+    bySubject:  stmts.bySubject.all(),
+  });
+}
+
+/* ── GET /api/admin/users?page=1&limit=50&role=student&q=name ─────────── */
+function getUsers(req, res) {
+  const limit  = Math.min(200, Math.max(1, Number(req.query.limit) || 50));
+  const cursor = Number(req.query.cursor) || 0;
+  const role   = req.query.role;
+  const search = req.query.q?.trim();
+
+  let where = 'WHERE 1=1';
+  const args = [];
+  if (role)   { where += ' AND u.role = ?';                         args.push(role); }
+  if (search) { where += ' AND (u.name LIKE ? OR u.email LIKE ?)';  args.push(`%${search}%`, `%${search}%`); }
+
+  // Cursor-based pagination
+  if (cursor) {
+    const cursorWhere = where + ' AND u.id < ?';
+    const cursorArgs = [...args, cursor];
+    const users = db.prepare(`
+      SELECT u.id, u.name, u.email, u.role, u.created_at, u.last_login, u.is_banned,
+             COUNT(ts.id)                                              AS tests_count,
+             ROUND(AVG(CAST(ts.score AS REAL) / ts.total * 100), 1)   AS avg_pct
+      FROM users u
+      LEFT JOIN test_sessions ts ON ts.user_id = u.id AND ts.status = 'completed'
+      ${cursorWhere}
+      GROUP BY u.id
+      ORDER BY u.id DESC
+      LIMIT ?
+    `).all(...cursorArgs, limit);
+    const nextCursor = users.length === limit ? users[users.length - 1].id : null;
+    return res.json({ users, nextCursor, limit });
+  }
+
+  // Offset-based (legacy)
+  const page   = Math.max(1, Number(req.query.page) || 1);
+  const offset = (page - 1) * limit;
+  const { total } = db.prepare(`SELECT COUNT(*) AS total FROM users u ${where}`).get(...args);
+
+  const users = db.prepare(`
+    SELECT u.id, u.name, u.email, u.role, u.created_at, u.last_login, u.is_banned,
+           COUNT(ts.id)                                              AS tests_count,
+           ROUND(AVG(CAST(ts.score AS REAL) / ts.total * 100), 1)   AS avg_pct
+    FROM users u
+    LEFT JOIN test_sessions ts ON ts.user_id = u.id AND ts.status = 'completed'
+    ${where}
+    GROUP BY u.id
+    ORDER BY u.created_at DESC
+    LIMIT ? OFFSET ?
+  `).all(...args, limit, offset);
+
+  res.json({ users, total, page, limit });
+}
+
+/* ── PATCH /api/admin/users/:id/role ─────────────────────────────────── */
+function updateRole(req, res) {
+  const { role } = req.body;
+  const allowed = ['student', 'teacher', 'admin', 'free_student'];
+  if (!allowed.includes(role))
+    return res.status(400).json({ error: `role must be one of: ${allowed.join(', ')}` });
+
+  const user = db.prepare('SELECT id FROM users WHERE id = ?').get(req.params.id);
+  if (!user) return res.status(404).json({ error: 'User not found' });
+
+  if (Number(req.params.id) === req.user.id)
+    return res.status(400).json({ error: 'Cannot change your own role' });
+
+  const oldRole = db.prepare('SELECT role FROM users WHERE id = ?').get(req.params.id)?.role;
+  db.prepare('UPDATE users SET role = ?, token_version = token_version + 1 WHERE id = ?').run(role, req.params.id);
+  audit(req, 'user.role_change', `user:${req.params.id}`, `${oldRole} -> ${role}`);
+  res.json({ id: Number(req.params.id), role });
+}
+
+/* ── GET /api/admin/users/:id/sessions ───────────────────────────────── */
+function getUserSessions(req, res) {
+  const user = db.prepare('SELECT id, name, email, role, is_banned FROM users WHERE id = ?').get(req.params.id);
+  if (!user) return res.status(404).json({ error: 'User not found' });
+
+  const sessions = db.prepare(`
+    SELECT ts.id, ts.mode, ts.score, ts.total, ts.status,
+           ts.started_at, ts.finished_at,
+           s.name AS subject_name, s.slug AS subject_slug
+    FROM test_sessions ts
+    LEFT JOIN subjects s ON s.id = ts.subject_id
+    WHERE ts.user_id = ?
+    ORDER BY ts.started_at DESC
+    LIMIT 100
+  `).all(req.params.id);
+
+  res.json({ user, sessions });
+}
+
+/* ── GET /api/admin/sessions ─────────────────────────────────────────── */
+function getAllSessions(req, res) {
+  const { subject, user_id } = req.query;
+  const limit  = Math.min(500, Math.max(1, Number(req.query.limit) || 200));
+  const offset = Math.max(0, Number(req.query.offset) || 0);
+
+  const where = ['ts.status = \'completed\''];
+  const params = [];
+
+  if (subject)  { where.push('s.slug = ?');       params.push(subject); }
+  if (user_id)  { where.push('ts.user_id = ?');   params.push(Number(user_id)); }
+
+  params.push(limit, offset);
+
+  const sessions = db.prepare(`
+    SELECT ts.id, ts.mode, ts.score, ts.total, ts.status,
+           ts.started_at, ts.finished_at,
+           s.name AS subject_name, s.slug AS subject_slug,
+           u.id AS user_id, u.name AS user_name, u.email AS user_email,
+           ROUND(CAST(ts.score AS REAL) / ts.total * 100) AS percent,
+           CAST((julianday(ts.finished_at) - julianday(ts.started_at)) * 86400 AS INTEGER) AS duration_sec
+    FROM test_sessions ts
+    LEFT JOIN subjects s ON s.id = ts.subject_id
+    JOIN users u ON u.id = ts.user_id
+    WHERE ${where.join(' AND ')}
+    ORDER BY ts.started_at DESC
+    LIMIT ? OFFSET ?
+  `).all(...params);
+
+  res.json(sessions);
+}
+
+/* ── GET /api/admin/sessions/:id ─────────────────────────────────────── */
+function getSessionDetail(req, res) {
+  const session = db.prepare(`
+    SELECT ts.id, ts.mode, ts.score, ts.total, ts.status,
+           ts.started_at, ts.finished_at,
+           s.name AS subject_name, s.slug AS subject_slug,
+           u.id AS user_id, u.name AS user_name, u.email AS user_email,
+           CAST((julianday(ts.finished_at) - julianday(ts.started_at)) * 86400 AS INTEGER) AS duration_sec
+    FROM test_sessions ts
+    LEFT JOIN subjects s ON s.id = ts.subject_id
+    JOIN users u ON u.id = ts.user_id
+    WHERE ts.id = ?
+  `).get(req.params.id);
+
+  if (!session) return res.status(404).json({ error: 'Session not found' });
+
+  const questions = db.prepare(`
+    SELECT q.id, q.text, q.explanation, q.difficulty,
+           ua.chosen_option_id, ua.is_correct, ua.time_spent_sec,
+           sq.order_index
+    FROM session_questions sq
+    JOIN questions q ON q.id = sq.question_id
+    LEFT JOIN user_answers ua ON ua.session_id = sq.session_id AND ua.question_id = q.id
+    WHERE sq.session_id = ?
+    ORDER BY sq.order_index
+  `).all(req.params.id);
+
+  if (questions.length) {
+    const ids = questions.map(q => q.id);
+    const allOptions = db.prepare(
+      `SELECT id, question_id, text, is_correct FROM options WHERE question_id IN (${ids.map(() => '?').join(',')}) ORDER BY order_index`
+    ).all(...ids);
+
+    const byQ = {};
+    for (const o of allOptions) {
+      (byQ[o.question_id] ||= []).push(o);
+    }
+    session.questions = questions.map(q => ({ ...q, options: byQ[q.id] || [] }));
+  } else {
+    session.questions = [];
+  }
+
+  res.json(session);
+}
+
+/* ── DELETE /api/admin/users/:id/sessions ────────────────────────────── */
+function clearUserSessions(req, res, next) {
+  const uid = Number(req.params.id);
+  try {
+    const user = db.prepare('SELECT id FROM users WHERE id = ?').get(uid);
+    if (!user) return res.status(404).json({ error: 'User not found' });
+
+    const sessions = db.prepare('SELECT id FROM test_sessions WHERE user_id = ?').all(uid);
+    const n = sessions.length;
+
+    if (n > 0) {
+      const stmtNullAsgn  = db.prepare('UPDATE assignment_sessions SET session_id = NULL WHERE session_id = ?');
+      const stmtDelAns    = db.prepare('DELETE FROM user_answers      WHERE session_id = ?');
+      const stmtDelSQ     = db.prepare('DELETE FROM session_questions WHERE session_id = ?');
+      const stmtDelSess   = db.prepare('DELETE FROM test_sessions     WHERE id = ?');
+      db.transaction(() => {
+        for (const { id } of sessions) {
+          stmtNullAsgn.run(id);
+          stmtDelAns.run(id);
+          stmtDelSQ.run(id);
+          stmtDelSess.run(id);
+        }
+      })();
+    }
+
+    audit(req, 'user.clear_sessions', `user:${uid}`, `${n} sessions deleted`);
+    res.json({ ok: true, deleted: n });
+  } catch (err) {
+    next(err);
+  }
+}
+
+/* ── PATCH /api/admin/users/:id ──────────────────────────────────────── */
+const bcrypt = require('bcryptjs');
+const { BCRYPT_ROUNDS } = require('../config');
+
+async function updateUser(req, res, next) {
+  try {
+    const { name, email, password } = req.body;
+    const uid = Number(req.params.id);
+    const user = db.prepare('SELECT id FROM users WHERE id = ?').get(uid);
+    if (!user) return res.status(404).json({ error: 'User not found' });
+    if (uid === req.user.id)
+      return res.status(400).json({ error: 'Cannot edit your own data here' });
+    if (name !== undefined && !name?.trim())
+      return res.status(400).json({ error: 'Name cannot be empty' });
+    if (email !== undefined) {
+      if (!email?.trim() || !/\S+@\S+\.\S+/.test(email.trim()))
+        return res.status(400).json({ error: 'Invalid email format' });
+      const existing = db.prepare('SELECT id FROM users WHERE email = ? AND id != ?').get(email.trim().toLowerCase(), uid);
+      if (existing) return res.status(400).json({ error: 'Email already in use' });
+    }
+    if (password !== undefined && password.length < 6)
+      return res.status(400).json({ error: 'Password must be at least 6 characters' });
+
+    const fields = [];
+    const vals = [];
+    if (name     !== undefined) { fields.push('name = ?');          vals.push(stripTags(name.trim())); }
+    if (email    !== undefined) { fields.push('email = ?');         vals.push(email.trim().toLowerCase()); }
+    if (password !== undefined) {
+      const hash = await bcrypt.hash(password, BCRYPT_ROUNDS);
+      fields.push('password_hash = ?', 'token_version = token_version + 1');
+      vals.push(hash);
+    }
+    if (!fields.length) return res.status(400).json({ error: 'Nothing to update' });
+    vals.push(uid);
+    db.prepare(`UPDATE users SET ${fields.join(', ')} WHERE id = ?`).run(...vals);
+    const changed = [];
+    if (name !== undefined) changed.push('name');
+    if (email !== undefined) changed.push('email');
+    if (password !== undefined) changed.push('password');
+    audit(req, 'user.edit', `user:${uid}`, changed.join(', '));
+    res.json({ ok: true });
+  } catch (err) {
+    next(err);
+  }
+}
+
+/* ── PATCH /api/admin/users/:id/ban  { banned: true|false } ──────────── */
+function banUser(req, res) {
+  const uid = Number(req.params.id);
+  if (uid === req.user.id) return res.status(400).json({ error: 'Нельзя заблокировать себя' });
+  const target = db.prepare('SELECT id, role FROM users WHERE id = ?').get(uid);
+  if (!target) return res.status(404).json({ error: 'User not found' });
+  if (target.role === 'admin') return res.status(400).json({ error: 'Нельзя заблокировать администратора' });
+  const banned = req.body.banned ? 1 : 0;
+  db.prepare('UPDATE users SET is_banned = ?, token_version = token_version + 1 WHERE id = ?').run(banned, uid);
+  audit(req, banned ? 'user.ban' : 'user.unban', `user:${uid}`, target.role);
+  res.json({ ok: true, banned: !!banned });
+}
+
+/* ── DELETE /api/admin/users/:id ─────────────────────────────────────── */
+const _deleteUserTx = db.transaction((uid) => {
+  // Tables with REFERENCES users(id) WITHOUT ON DELETE CASCADE:
+  db.prepare('DELETE FROM questions WHERE created_by = ?').run(uid);
+  db.prepare('DELETE FROM assignments WHERE created_by = ?').run(uid);
+  // The rest cascades via ON DELETE CASCADE, but explicitly clean large tables:
+  db.prepare('DELETE FROM notifications WHERE user_id = ?').run(uid);
+  db.prepare('DELETE FROM test_sessions WHERE user_id = ?').run(uid);
+  db.prepare('DELETE FROM users WHERE id = ?').run(uid);
+});
+
+function deleteUser(req, res) {
+  const uid = Number(req.params.id);
+  if (uid === req.user.id) return res.status(400).json({ error: 'Нельзя удалить себя' });
+  const target = db.prepare('SELECT id, role FROM users WHERE id = ?').get(uid);
+  if (!target) return res.status(404).json({ error: 'User not found' });
+  if (target.role === 'admin') return res.status(400).json({ error: 'Нельзя удалить администратора' });
+  const uname = db.prepare('SELECT name, email FROM users WHERE id = ?').get(uid);
+  _deleteUserTx(uid);
+  audit(req, 'user.delete', `user:${uid}`, `${uname?.name} (${uname?.email})`);
+  res.json({ ok: true });
+}
+
+/* ── GET /api/admin/features ─────────────────────────────────────────── */
+function getFeatures(_req, res) {
+  const rows = db.prepare("SELECT key, value FROM app_settings WHERE key LIKE 'feature_%'").all();
+  const features = {};
+  for (const r of rows) {
+    const name = r.key.replace('feature_', '').replace('_enabled', '');
+    features[name] = r.value === '1';
+  }
+  res.json(features);
+}
+
+/* ── PATCH /api/admin/features ──────────────────────────────────────── */
+function updateFeatures(req, res) {
+  const allowed = ['crossword', 'hangman', 'pet', 'red_book', 'collection',
+                   'flashcards', 'knowledge_map', 'board', 'biochem', 'live_quiz'];
+  const updates = req.body;
+  const stmt = db.prepare("INSERT OR REPLACE INTO app_settings (key, value) VALUES (?, ?)");
+  const changed = [];
+  for (const [name, enabled] of Object.entries(updates)) {
+    if (!allowed.includes(name)) continue;
+    stmt.run(`feature_${name}_enabled`, enabled ? '1' : '0');
+    changed.push(`${name}=${enabled ? 'on' : 'off'}`);
+  }
+  if (changed.length) audit(req, 'features.update', null, changed.join(', '));
+  res.json({ ok: true });
+}
+
+/* ── GET /api/admin/free-student-features ────────────────────────────── */
+const FREE_STUDENT_MODULES = [
+  'gamification', 'hangman', 'crossword', 'pet', 'red_book', 'collection',
+  'lab', 'knowledge_map', 'flashcards', 'board', 'biochem', 'live_quiz',
+];
+function getFreeStudentFeatures(_req, res) {
+  const row = db.prepare("SELECT value FROM app_settings WHERE key = 'free_student_features'").get();
+  let features = {};
+  if (row?.value) {
+    try { features = JSON.parse(row.value); } catch {}
+  }
+  // Default: all enabled
+  const result = {};
+  for (const m of FREE_STUDENT_MODULES) {
+    result[m] = features[m] !== false;
+  }
+  res.json(result);
+}
+
+/* ── PATCH /api/admin/free-student-features ─────────────────────────── */
+function updateFreeStudentFeatures(req, res) {
+  const updates = req.body;
+  const row = db.prepare("SELECT value FROM app_settings WHERE key = 'free_student_features'").get();
+  let current = {};
+  if (row?.value) {
+    try { current = JSON.parse(row.value); } catch {}
+  }
+  for (const [key, val] of Object.entries(updates)) {
+    if (!FREE_STUDENT_MODULES.includes(key)) continue;
+    current[key] = Boolean(val);
+  }
+  db.prepare("INSERT OR REPLACE INTO app_settings (key, value) VALUES ('free_student_features', ?)").run(JSON.stringify(current));
+  res.json({ ok: true });
+}
+
+/* ── GET /api/admin/audit-log ───────────────────────────────────────── */
+function getAuditLog(req, res) {
+  const limit = Math.min(500, Math.max(1, Number(req.query.limit) || 100));
+  const rows = db.prepare(`
+    SELECT al.*, u.name AS admin_name, u.email AS admin_email
+    FROM admin_audit_log al
+    LEFT JOIN users u ON u.id = al.admin_id
+    ORDER BY al.created_at DESC LIMIT ?
+  `).all(limit);
+  res.json(rows);
+}
+
+/* ── DELETE /api/admin/audit-log ────────────────────────────────────── */
+function clearAuditLog(req, res) {
+  db.prepare('DELETE FROM admin_audit_log').run();
+  res.json({ ok: true });
+}
+
+/* ── GET /api/admin/error-log ──────────────────────────────────────── */
+function getErrorLog(req, res) {
+  const limit = Math.min(500, Math.max(1, Number(req.query.limit) || 100));
+  const rows = db.prepare(`
+    SELECT * FROM error_log ORDER BY created_at DESC LIMIT ?
+  `).all(limit);
+  res.json(rows);
+}
+
+/* ── DELETE /api/admin/error-log ───────────────────────────────────── */
+function clearErrorLog(req, res) {
+  db.prepare('DELETE FROM error_log').run();
+  res.json({ ok: true });
+}
+
+/* ── GET /api/admin/health ─────────────────────────────────────────── */
+const os = require('os');
+const path = require('path');
+const fs = require('fs');
+const { DB_PATH, UPLOADS_DIR } = require('../config');
+
+function getHealth(_req, res) {
+  const uptimeSec = process.uptime();
+  let dbSizeBytes = 0;
+  try { dbSizeBytes = fs.statSync(DB_PATH).size; } catch {}
+  let uploadsSizeBytes = 0;
+  try {
+    const files = fs.readdirSync(UPLOADS_DIR);
+    for (const f of files) {
+      try { uploadsSizeBytes += fs.statSync(path.join(UPLOADS_DIR, f)).size; } catch {}
+    }
+  } catch {}
+
+  const totalUsers   = db.prepare('SELECT COUNT(*) AS n FROM users').get().n;
+  const todaySessions = db.prepare("SELECT COUNT(*) AS n FROM test_sessions WHERE started_at >= date('now')").get().n;
+  const totalSessions = db.prepare('SELECT COUNT(*) AS n FROM test_sessions').get().n;
+  const totalQuestions = db.prepare('SELECT COUNT(*) AS n FROM questions').get().n;
+  const recentErrors  = db.prepare("SELECT COUNT(*) AS n FROM error_log WHERE created_at >= datetime('now', '-24 hours')").get().n;
+
+  res.json({
+    uptime: uptimeSec,
+    memory: {
+      rss: process.memoryUsage().rss,
+      heapUsed: process.memoryUsage().heapUsed,
+    },
+    db: {
+      sizeBytes: dbSizeBytes,
+      totalUsers,
+      totalSessions,
+      todaySessions,
+      totalQuestions,
+    },
+    uploads: {
+      sizeBytes: uploadsSizeBytes,
+    },
+    node: process.version,
+    platform: os.platform(),
+    cpus: os.cpus().length,
+    freeMem: os.freemem(),
+    totalMem: os.totalmem(),
+    recentErrors,
+  });
+}
+
+/* ── Topics CRUD ─────────────────────────────────────────────────────── */
+function getTopics(req, res) {
+  const { subject_id } = req.query;
+  let rows;
+  if (subject_id) {
+    rows = db.prepare(`
+      SELECT t.*, s.name AS subject_name, s.slug AS subject_slug,
+             (SELECT COUNT(*) FROM questions q WHERE q.topic_id = t.id) AS question_count
+      FROM topics t JOIN subjects s ON s.id = t.subject_id
+      WHERE t.subject_id = ? ORDER BY t.order_index, t.name
+    `).all(Number(subject_id));
+  } else {
+    rows = db.prepare(`
+      SELECT t.*, s.name AS subject_name, s.slug AS subject_slug,
+             (SELECT COUNT(*) FROM questions q WHERE q.topic_id = t.id) AS question_count
+      FROM topics t JOIN subjects s ON s.id = t.subject_id
+      ORDER BY s.name, t.order_index, t.name
+    `).all();
+  }
+  res.json(rows);
+}
+
+function createTopic(req, res) {
+  const { subject_id, name } = req.body;
+  if (!subject_id || !name?.trim())
+    return res.status(400).json({ error: 'subject_id and name required' });
+  const subj = db.prepare('SELECT id FROM subjects WHERE id = ?').get(Number(subject_id));
+  if (!subj) return res.status(404).json({ error: 'Subject not found' });
+  const maxOrder = db.prepare('SELECT MAX(order_index) AS m FROM topics WHERE subject_id = ?').get(Number(subject_id));
+  const order = (maxOrder?.m || 0) + 1;
+  const r = db.prepare('INSERT INTO topics (subject_id, name, order_index) VALUES (?, ?, ?)').run(Number(subject_id), stripTags(name.trim()), order);
+  audit(req, 'topic.create', `topic:${r.lastInsertRowid}`, name.trim());
+  res.status(201).json({ id: r.lastInsertRowid, name: name.trim(), order_index: order });
+}
+
+function updateTopic(req, res) {
+  const id = Number(req.params.id);
+  const topic = db.prepare('SELECT * FROM topics WHERE id = ?').get(id);
+  if (!topic) return res.status(404).json({ error: 'Topic not found' });
+  const { name, order_index } = req.body;
+  const newName = name !== undefined ? stripTags(name.trim()) : topic.name;
+  const newOrder = order_index !== undefined ? Number(order_index) : topic.order_index;
+  if (!newName) return res.status(400).json({ error: 'Name cannot be empty' });
+  db.prepare('UPDATE topics SET name = ?, order_index = ? WHERE id = ?').run(newName, newOrder, id);
+  audit(req, 'topic.update', `topic:${id}`, newName);
+  res.json({ ok: true });
+}
+
+function deleteTopic(req, res) {
+  const id = Number(req.params.id);
+  const topic = db.prepare('SELECT t.*, (SELECT COUNT(*) FROM questions q WHERE q.topic_id = t.id) AS qcount FROM topics t WHERE t.id = ?').get(id);
+  if (!topic) return res.status(404).json({ error: 'Topic not found' });
+  if (topic.qcount > 0)
+    return res.status(400).json({ error: `Cannot delete topic with ${topic.qcount} questions. Reassign questions first.` });
+  db.prepare('DELETE FROM topics WHERE id = ?').run(id);
+  audit(req, 'topic.delete', `topic:${id}`, topic.name);
+  res.json({ ok: true });
+}
+
+/* ── Broadcast notification ──────────────────────────────────────────── */
+const { pushNotif } = require('../utils/notifications');
+
+function broadcast(req, res) {
+  const { message, role, link } = req.body;
+  if (!message?.trim()) return res.status(400).json({ error: 'message required' });
+  const msg = stripTags(message.trim()).slice(0, 500);
+  const lnk = link?.trim() || null;
+
+  let users;
+  if (role && role !== 'all') {
+    users = db.prepare('SELECT id FROM users WHERE role = ? AND is_banned = 0').all(role);
+  } else {
+    users = db.prepare('SELECT id FROM users WHERE is_banned = 0').all();
+  }
+
+  const ins = db.prepare("INSERT INTO notifications (user_id, type, message, link) VALUES (?, 'broadcast', ?, ?)");
+  db.transaction(() => {
+    for (const u of users) ins.run(u.id, msg, lnk);
+  })();
+
+  audit(req, 'broadcast', role || 'all', `${users.length} users: ${msg.slice(0, 80)}`);
+  res.json({ ok: true, sent: users.length });
+}
+
+module.exports = {
+  getStats, getUsers, updateRole, getUserSessions, getAllSessions, getSessionDetail,
+  clearUserSessions, updateUser, banUser, deleteUser,
+  getFeatures, updateFeatures, getFreeStudentFeatures, updateFreeStudentFeatures,
+  getAuditLog, clearAuditLog, getErrorLog, clearErrorLog, getHealth,
+  getTopics, createTopic, updateTopic, deleteTopic,
+  broadcast,
+};
diff --git a/backend/src/controllers/analyticsController.js b/backend/src/controllers/analyticsController.js
new file mode 100644
index 0000000..5a1befe
--- /dev/null
+++ b/backend/src/controllers/analyticsController.js
@@ -0,0 +1,80 @@
+const db = require('../db/db');
+
+function teacherOverview(req, res) {
+  const user    = req.user;
+  const classId = req.query.classId ? Number(req.query.classId) : null;
+
+  const classes = user.role === 'admin'
+    ? db.prepare('SELECT id, name FROM classes ORDER BY name').all()
+    : db.prepare('SELECT id, name FROM classes WHERE teacher_id = ? ORDER BY name').all(user.id);
+
+  if (!classId) return res.json({ classes, data: null });
+
+  if (user.role !== 'admin') {
+    const cls = db.prepare('SELECT id FROM classes WHERE id = ? AND teacher_id = ?').get(classId, user.id);
+    if (!cls) return res.status(403).json({ error: 'Forbidden' });
+  }
+
+  const overview = db.prepare(`
+    SELECT
+      COUNT(DISTINCT cm.user_id) AS students,
+      COUNT(DISTINCT CASE WHEN ts.status='completed' THEN ts.id END) AS sessions,
+      ROUND(AVG(CASE WHEN ts.status='completed' AND ts.total>0
+                     THEN ts.score*100.0/ts.total END), 1) AS avgScore
+    FROM class_members cm
+    LEFT JOIN test_sessions ts ON ts.user_id = cm.user_id
+    WHERE cm.class_id = ?
+  `).get(classId);
+
+  const scoreByWeek = db.prepare(`
+    SELECT
+      strftime('%Y-W%W', ts.finished_at) AS week,
+      ROUND(AVG(ts.score*100.0/ts.total), 1) AS avg,
+      COUNT(*) AS sessions
+    FROM test_sessions ts
+    JOIN class_members cm ON cm.user_id = ts.user_id AND cm.class_id = ?
+    WHERE ts.status='completed' AND ts.total>0
+      AND ts.finished_at >= datetime('now','-56 days')
+    GROUP BY week ORDER BY week
+  `).all(classId);
+
+  const hardQuestions = db.prepare(`
+    SELECT q.id, q.text, q.difficulty,
+      COUNT(ua.id) AS attempts,
+      ROUND(SUM(CASE WHEN ua.is_correct=0 THEN 1.0 ELSE 0 END)*100/COUNT(ua.id),1) AS errorRate,
+      t.name AS topic
+    FROM user_answers ua
+    JOIN questions q       ON q.id  = ua.question_id
+    JOIN test_sessions ts  ON ts.id = ua.session_id
+    JOIN class_members cm  ON cm.user_id = ts.user_id AND cm.class_id = ?
+    LEFT JOIN topics t     ON t.id  = q.topic_id
+    WHERE ts.status='completed'
+    GROUP BY q.id HAVING attempts >= 3
+    ORDER BY errorRate DESC LIMIT 10
+  `).all(classId);
+
+  const heatmap = db.prepare(`
+    SELECT date(ts.started_at) AS day,
+      COUNT(DISTINCT ts.user_id) AS students,
+      COUNT(ts.id) AS sessions
+    FROM test_sessions ts
+    JOIN class_members cm ON cm.user_id = ts.user_id AND cm.class_id = ?
+    WHERE ts.started_at >= datetime('now','-90 days')
+    GROUP BY day ORDER BY day
+  `).all(classId);
+
+  const assignments = db.prepare(`
+    SELECT a.id, a.title, a.deadline,
+      COUNT(DISTINCT cm.user_id) AS total,
+      COUNT(DISTINCT CASE WHEN ass.session_id IS NOT NULL THEN ass.user_id END) AS done
+    FROM assignments a
+    JOIN class_members cm ON cm.class_id = a.class_id
+    LEFT JOIN assignment_sessions ass ON ass.assignment_id=a.id AND ass.user_id=cm.user_id
+    WHERE a.class_id = ?
+    GROUP BY a.id ORDER BY a.created_at DESC LIMIT 10
+  `).all(classId);
+
+  res.json({ classes, overview, scoreByWeek, hardQuestions, heatmap, assignments });
+}
+
+module.exports = { teacherOverview };
diff --git a/backend/src/controllers/assignmentController.js b/backend/src/controllers/assignmentController.js
new file mode 100644
index 0000000..c97e87d
--- /dev/null
+++ b/backend/src/controllers/assignmentController.js
@@ -0,0 +1,652 @@
+const db = require('../db/db');
+const { pushNotif } = require('../utils/notifications');
+const { stripTags } = require('../utils/sanitize');
+const { SESSION_MODES } = require('../constants');
+
+const VALID_ASSIGN_MODES = SESSION_MODES;
+
+/* ── Prepared statements (module-level to avoid re-parsing per request) ── */
+const stmts = {
+  getTestSubject:      db.prepare('SELECT subject_slug FROM tests WHERE id = ?'),
+  getFileSubject:      db.prepare('SELECT subject_slug FROM files WHERE id = ?'),
+  getClass:            db.prepare('SELECT id, teacher_id FROM classes WHERE id = ?'),
+  getClassMembers:     db.prepare('SELECT user_id FROM class_members WHERE class_id = ?'),
+  getSubjectBySlug:    db.prepare('SELECT id FROM subjects WHERE slug = ?'),
+  countCompletedSess:  db.prepare(`
+    SELECT COUNT(*) AS n FROM assignment_sessions ax
+    JOIN test_sessions tx ON tx.id = ax.session_id AND tx.status = 'completed'
+    WHERE ax.assignment_id = ? AND ax.user_id = ?
+  `),
+  getInProgressSess:   db.prepare(`
+    SELECT ax.session_id FROM assignment_sessions ax
+    JOIN test_sessions ts ON ts.id = ax.session_id AND ts.status = 'in_progress'
+    WHERE ax.assignment_id = ? AND ax.user_id = ?
+    ORDER BY ax.id DESC LIMIT 1
+  `),
+  insertSession:       db.prepare('INSERT INTO test_sessions (user_id, subject_id, mode, total) VALUES (?, ?, ?, ?)'),
+  insertSessionQ:      db.prepare('INSERT INTO session_questions (session_id, question_id, order_index) VALUES (?, ?, ?)'),
+  insertAssignSess:    db.prepare('INSERT INTO assignment_sessions (assignment_id, user_id, session_id, attempt_num) VALUES (?, ?, ?, ?)'),
+  notifyClassMembers:  db.prepare('SELECT user_id FROM class_members WHERE class_id = ? AND user_id != ?'),
+};
+
+/* ── POST /api/classes/:id/assignments ── create assignment ─────────────── */
+function createAssignment(req, res) {
+  const { title, topic_id, deadline, test_id, file_id, is_homework = 0 } = req.body;
+  const mode         = req.body.mode  || 'exam';
+  const count        = Number(req.body.count) || 25;
+  const max_attempts = Math.max(0, Math.min(10, Number(req.body.max_attempts) || 0));
+  let { subject_slug } = req.body;
+  if (!title?.trim()) return res.status(400).json({ error: 'title required' });
+  const cleanTitle = stripTags(title.trim());
+  if (!VALID_ASSIGN_MODES.has(mode)) return res.status(400).json({ error: 'mode must be exam, practice, repeat or ct' });
+  if (!Number.isInteger(count) || count < 1 || count > 200)
+    return res.status(400).json({ error: 'count must be an integer between 1 and 200' });
+  if (deadline && isNaN(Date.parse(deadline)))
+    return res.status(400).json({ error: 'deadline must be a valid date' });
+
+  if (test_id) {
+    const t = stmts.getTestSubject.get(test_id);
+    if (!t) return res.status(400).json({ error: 'Test not found' });
+    subject_slug = t.subject_slug;
+  }
+  if (file_id && !subject_slug) {
+    const f = stmts.getFileSubject.get(file_id);
+    if (f?.subject_slug) subject_slug = f.subject_slug;
+  }
+  // Upload-only homework doesn't require subject
+  if (!subject_slug && !is_homework) return res.status(400).json({ error: 'subject_slug required' });
+  if (!subject_slug) subject_slug = 'other';
+
+  const cls = stmts.getClass.get(req.params.id);
+  if (!cls) return res.status(404).json({ error: 'Class not found' });
+  if (req.user.role !== 'admin' && cls.teacher_id !== req.user.id)
+    return res.status(403).json({ error: 'Forbidden' });
+
+  const r = db.prepare(`
+    INSERT INTO assignments (class_id, title, subject_slug, mode, count, topic_id, deadline, created_by, test_id, file_id, is_homework, max_attempts)
+    VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+  `).run(cls.id, cleanTitle, subject_slug, mode, Number(count), topic_id || null, deadline || null, req.user.id, test_id || null, file_id || null, is_homework ? 1 : 0, max_attempts);
+
+  // Уведомления всем членам класса (batch via transaction)
+  const members = stmts.getClassMembers.all(cls.id);
+  const notifMsg = `Новое задание: «${cleanTitle}»`;
+  const insertNotif = db.transaction(() => {
+    members.forEach(m => pushNotif(m.user_id, 'assignment', notifMsg, '/dashboard'));
+  });
+  insertNotif();
+
+  res.status(201).json({ id: r.lastInsertRowid });
+}
+
+/* ── PUT /api/assignments/:id ── update ───────────────────────────────── */
+function updateAssignment(req, res) {
+  const a = db.prepare(`
+    SELECT a.id, COALESCE(c.teacher_id, a.created_by) AS teacher_id
+    FROM assignments a LEFT JOIN classes c ON c.id = a.class_id WHERE a.id = ?
+  `).get(req.params.id);
+  if (!a) return res.status(404).json({ error: 'Not found' });
+  if (req.user.role !== 'admin' && a.teacher_id !== req.user.id)
+    return res.status(403).json({ error: 'Forbidden' });
+
+  const { title, mode, count, deadline } = req.body;
+  let { subject_slug, test_id } = req.body;
+  if (!title?.trim()) return res.status(400).json({ error: 'title required' });
+
+  test_id = test_id ? Number(test_id) : null;
+
+  if (test_id) {
+    const t = db.prepare('SELECT subject_slug FROM tests WHERE id = ?').get(test_id);
+    if (!t) return res.status(400).json({ error: 'Test not found' });
+    subject_slug = t.subject_slug;
+  }
+  if (!subject_slug) return res.status(400).json({ error: 'subject_slug required' });
+
+  db.prepare(`
+    UPDATE assignments SET title = ?, subject_slug = ?, mode = ?, count = ?, deadline = ?, test_id = ? WHERE id = ?
+  `).run(stripTags(title.trim()), subject_slug, mode || 'exam', Number(count) || 25, deadline || null, test_id, req.params.id);
+
+  res.json({ ok: true });
+}
+
+/* ── DELETE /api/assignments/:id ──────────────────────────────────────── */
+function deleteAssignment(req, res) {
+  const a = db.prepare(`
+    SELECT a.id, COALESCE(c.teacher_id, a.created_by) AS teacher_id
+    FROM assignments a LEFT JOIN classes c ON c.id = a.class_id WHERE a.id = ?
+  `).get(req.params.id);
+  if (!a) return res.status(404).json({ error: 'Not found' });
+  if (req.user.role !== 'admin' && a.teacher_id !== req.user.id)
+    return res.status(403).json({ error: 'Forbidden' });
+  db.prepare('DELETE FROM assignments WHERE id = ?').run(req.params.id);
+  res.json({ ok: true });
+}
+
+/* ── GET /api/assignments/teacher ── teacher: own created assignments ──── */
+function teacherAssignments(req, res) {
+  const isAdmin = req.user.role === 'admin';
+
+  // Админ видит все задания без ограничений
+  if (isAdmin) {
+    const rows = db.prepare(`
+      SELECT a.id, a.title, a.subject_slug, a.mode, a.count, a.deadline, a.created_at,
+             a.test_id, t.title AS test_title,
+             a.file_id, f.title AS file_title,
+             a.user_id AS target_user_id, tu.name AS target_user_name,
+             COALESCE(c.name, 'Личное задание') AS class_name,
+             COALESCE(c.id, 0) AS class_id,
+             CASE WHEN a.user_id IS NOT NULL THEN 1 ELSE COUNT(DISTINCT cm.user_id) END AS total_members,
+             COUNT(DISTINCT CASE WHEN ts.status = 'completed' THEN ases.user_id END) AS completed_count
+      FROM assignments a
+      LEFT JOIN classes c  ON c.id = a.class_id AND a.class_id IS NOT NULL
+      LEFT JOIN users tu   ON tu.id = a.user_id
+      LEFT JOIN tests t    ON t.id = a.test_id
+      LEFT JOIN files f    ON f.id = a.file_id
+      LEFT JOIN class_members cm   ON cm.class_id = c.id
+      LEFT JOIN assignment_sessions ases ON ases.assignment_id = a.id
+      LEFT JOIN test_sessions ts   ON ts.id = ases.session_id
+      GROUP BY a.id
+      ORDER BY a.created_at DESC
+    `).all();
+    return res.json(rows);
+  }
+
+  // Учитель видит только свои задания:
+  // - классовые (любые свои)
+  // - личные — только для учеников из своих классов
+  const rows = db.prepare(`
+    SELECT a.id, a.title, a.subject_slug, a.mode, a.count, a.deadline, a.created_at,
+           a.test_id, t.title AS test_title,
+           a.file_id, f.title AS file_title,
+           a.user_id AS target_user_id, tu.name AS target_user_name,
+           COALESCE(c.name, 'Личное задание') AS class_name,
+           COALESCE(c.id, 0) AS class_id,
+           CASE WHEN a.user_id IS NOT NULL THEN 1 ELSE COUNT(DISTINCT cm.user_id) END AS total_members,
+           COUNT(DISTINCT CASE WHEN ts.status = 'completed' THEN ases.user_id END) AS completed_count
+    FROM assignments a
+    LEFT JOIN classes c  ON c.id = a.class_id AND a.class_id IS NOT NULL
+    LEFT JOIN users tu   ON tu.id = a.user_id
+    LEFT JOIN tests t    ON t.id = a.test_id
+    LEFT JOIN files f    ON f.id = a.file_id
+    LEFT JOIN class_members cm   ON cm.class_id = c.id
+    LEFT JOIN assignment_sessions ases ON ases.assignment_id = a.id
+    LEFT JOIN test_sessions ts   ON ts.id = ases.session_id
+    WHERE a.created_by = ?
+      AND (
+        a.class_id IS NOT NULL
+        OR (
+          a.user_id IS NOT NULL
+          AND EXISTS (
+            SELECT 1 FROM class_members cm2
+            JOIN classes c2 ON c2.id = cm2.class_id
+            WHERE cm2.user_id = a.user_id AND c2.teacher_id = ?
+          )
+        )
+      )
+    GROUP BY a.id
+    ORDER BY a.created_at DESC
+  `).all(req.user.id, req.user.id);
+  res.json(rows);
+}
+
+/* ── GET /api/assignments/my ── student: all pending/done assignments ──── */
+function myAssignments(req, res) {
+  const uid = req.user.id;
+  const rows = db.prepare(`
+    SELECT * FROM (
+      SELECT a.id, a.title, a.subject_slug, a.mode, a.count, a.deadline, a.created_at,
+             a.file_id, f.title AS file_title,
+             c.name AS class_name, c.id AS class_id, u.name AS teacher_name,
+             latest.session_id,
+             ts.score, ts.total, ts.status AS session_status,
+             ROUND(CAST(ts.score AS REAL) / ts.total * 100) AS percent,
+             CASE WHEN latest.session_id IS NULL THEN 0 ELSE 1 END AS done,
+             a.is_homework, a.max_attempts,
+             (SELECT COUNT(*) FROM assignment_sessions ax
+              JOIN test_sessions tx ON tx.id = ax.session_id AND tx.status = 'completed'
+              WHERE ax.assignment_id = a.id AND ax.user_id = cm.user_id) AS attempts_used
+      FROM class_members cm
+      JOIN classes c ON c.id = cm.class_id
+      JOIN users u ON u.id = c.teacher_id
+      JOIN assignments a ON a.class_id = c.id AND a.user_id IS NULL
+      LEFT JOIN files f ON f.id = a.file_id
+      LEFT JOIN assignment_sessions latest ON latest.assignment_id = a.id AND latest.user_id = cm.user_id
+        AND latest.id = (SELECT MAX(id) FROM assignment_sessions WHERE assignment_id = a.id AND user_id = cm.user_id)
+      LEFT JOIN test_sessions ts ON ts.id = latest.session_id
+      WHERE cm.user_id = ?
+      UNION ALL
+      SELECT a.id, a.title, a.subject_slug, a.mode, a.count, a.deadline, a.created_at,
+             a.file_id, f.title AS file_title,
+             'Личное задание' AS class_name, 0 AS class_id, u.name AS teacher_name,
+             latest.session_id,
+             ts.score, ts.total, ts.status AS session_status,
+             ROUND(CAST(ts.score AS REAL) / ts.total * 100) AS percent,
+             CASE WHEN latest.session_id IS NULL THEN 0 ELSE 1 END AS done,
+             a.is_homework, a.max_attempts,
+             (SELECT COUNT(*) FROM assignment_sessions ax
+              JOIN test_sessions tx ON tx.id = ax.session_id AND tx.status = 'completed'
+              WHERE ax.assignment_id = a.id AND ax.user_id = ?) AS attempts_used
+      FROM assignments a
+      JOIN users u ON u.id = a.created_by
+      LEFT JOIN files f ON f.id = a.file_id
+      LEFT JOIN assignment_sessions latest ON latest.assignment_id = a.id AND latest.user_id = ?
+        AND latest.id = (SELECT MAX(id) FROM assignment_sessions WHERE assignment_id = a.id AND user_id = ?)
+      LEFT JOIN test_sessions ts ON ts.id = latest.session_id
+      WHERE a.user_id = ?
+    ) ORDER BY done ASC, deadline ASC, created_at DESC
+  `).all(uid, uid, uid, uid, uid);
+  res.json(rows);
+}
+
+/* ── POST /api/assignments/:id/start ── student starts session ─────────── */
+function startAssignment(req, res) {
+  const uid = req.user.id;
+  const assignment = db.prepare(`
+    SELECT a.* FROM assignments a
+    WHERE a.id = ?
+      AND (
+        (a.class_id IS NOT NULL AND EXISTS (
+          SELECT 1 FROM class_members WHERE class_id = a.class_id AND user_id = ?
+        ))
+        OR a.user_id = ?
+      )
+  `).get(req.params.id, uid, uid);
+  if (!assignment) return res.status(404).json({ error: 'Assignment not found or not your class' });
+
+  // Deadline check: reject if deadline has already passed
+  if (assignment.deadline) {
+    const dl = new Date(assignment.deadline.includes('T') ? assignment.deadline : assignment.deadline.replace(' ', 'T') + 'Z');
+    if (dl < new Date()) return res.status(403).json({ error: 'Срок выполнения задания истёк' });
+  }
+
+  // File-only assignment: just return the download URL, no session needed
+  if (assignment.file_id && !assignment.test_id) {
+    return res.json({ is_file: true, file_id: assignment.file_id });
+  }
+
+  // assignment mode → session mode mapping
+  const SESSION_MODE = { exam: 'exam', practice: 'practice', repeat: 'practice', ct: 'exam' };
+  const sessionMode  = SESSION_MODE[assignment.mode] || 'exam';
+
+  // Count completed attempts for this student
+  const completedCount = stmts.countCompletedSess.get(req.params.id, uid).n;
+
+  // Check attempt limit
+  const maxAttempts = assignment.max_attempts || 0;
+  if (maxAttempts > 0 && completedCount >= maxAttempts) {
+    return res.status(403).json({
+      error: 'Исчерпан лимит попыток',
+      attempts_used: completedCount,
+      max_attempts: maxAttempts,
+    });
+  }
+
+  // Check for an existing in-progress session
+  const inProgress = stmts.getInProgressSess.get(req.params.id, uid);
+
+  if (inProgress?.session_id) {
+    return res.json({
+      session_id: inProgress.session_id,
+      already_started: true,
+      status: 'in_progress',
+      assignment_mode: assignment.mode,
+      attempts_used: completedCount,
+      max_attempts: maxAttempts,
+    });
+  }
+
+  const subject = stmts.getSubjectBySlug.get(assignment.subject_slug);
+  if (!subject) return res.status(400).json({ error: 'Invalid subject' });
+
+  let questionIds;
+
+  if (assignment.test_id) {
+    // Use exact questions from the pre-made test (in defined order)
+    questionIds = db.prepare(
+      'SELECT question_id FROM test_questions WHERE test_id = ? ORDER BY order_index'
+    ).all(assignment.test_id).map(r => r.question_id);
+  } else if (assignment.mode === 'ct') {
+    // CT mode: Part A (single/true_false) first, then Part B (multi/short_answer)
+    const baseWhere = `subject_id = ?${assignment.topic_id ? ' AND topic_id = ?' : ''}`;
+    const baseArgs  = assignment.topic_id ? [subject.id, assignment.topic_id] : [subject.id];
+    const half  = Math.ceil(assignment.count / 2);
+    const partA = db.prepare(`SELECT id FROM questions WHERE ${baseWhere} AND type IN ('single','true_false') ORDER BY RANDOM() LIMIT ?`)
+      .all(...baseArgs, half).map(q => q.id);
+    const partB = db.prepare(`SELECT id FROM questions WHERE ${baseWhere} AND type IN ('multi','short_answer') ORDER BY RANDOM() LIMIT ?`)
+      .all(...baseArgs, assignment.count - partA.length).map(q => q.id);
+    const got   = partA.length + partB.length;
+    const usedIds = [...partA, ...partB];
+    const extra = (got < assignment.count && usedIds.length > 0)
+      ? db.prepare(`SELECT id FROM questions WHERE ${baseWhere} AND id NOT IN (${usedIds.map(() => '?').join(',')}) ORDER BY RANDOM() LIMIT ?`)
+          .all(...baseArgs, ...usedIds, assignment.count - got).map(q => q.id)
+      : [];
+    questionIds = [...partA, ...partB, ...extra];
+  } else {
+    const baseWhere = `subject_id = ?${assignment.topic_id ? ' AND topic_id = ?' : ''}`;
+    const baseArgs  = assignment.topic_id ? [subject.id, assignment.topic_id] : [subject.id];
+    questionIds = db.prepare(`SELECT id FROM questions WHERE ${baseWhere} ORDER BY RANDOM() LIMIT ?`)
+      .all(...baseArgs, assignment.count).map(q => q.id);
+  }
+
+  if (!questionIds.length) return res.status(400).json({ error: 'No questions available' });
+
+  const session_id = db.transaction(() => {
+    const { lastInsertRowid: sid } = stmts.insertSession.run(uid, subject.id, sessionMode, questionIds.length);
+    questionIds.forEach((qid, i) => stmts.insertSessionQ.run(sid, qid, i));
+    stmts.insertAssignSess.run(req.params.id, uid, sid, completedCount + 1);
+    return sid;
+  })();
+
+  res.json({
+    session_id,
+    assignment_mode: assignment.mode,
+    attempt_num: completedCount + 1,
+    attempts_used: completedCount,
+    max_attempts: maxAttempts,
+  });
+}
+
+/* ── GET /api/assignments/:id/results ── teacher view ──────────────────── */
+function assignmentResults(req, res) {
+  const a = db.prepare(`
+    SELECT a.*, COALESCE(c.teacher_id, a.created_by) AS teacher_id, c.name AS class_name
+    FROM assignments a LEFT JOIN classes c ON c.id = a.class_id WHERE a.id = ?
+  `).get(req.params.id);
+  if (!a) return res.status(404).json({ error: 'Not found' });
+  if (req.user.role !== 'admin' && a.teacher_id !== req.user.id)
+    return res.status(403).json({ error: 'Forbidden' });
+
+  let results;
+  if (a.user_id) {
+    // Direct assignment: single student — pick best attempt
+    results = db.prepare(`
+      SELECT u.id, u.name, u.email,
+             best.session_id,
+             best.score, best.total, best.session_status, best.finished_at,
+             best.percent,
+             best.attempts_used
+      FROM users u
+      LEFT JOIN (
+        SELECT ases.user_id,
+               ases.session_id,
+               ts.score, ts.total, ts.status AS session_status, ts.finished_at,
+               ROUND(CAST(ts.score AS REAL) / ts.total * 100) AS percent,
+               COUNT(*) OVER (PARTITION BY ases.assignment_id, ases.user_id) AS attempts_used,
+               ROW_NUMBER() OVER (PARTITION BY ases.user_id ORDER BY ts.score DESC, ts.finished_at DESC) AS rn
+        FROM assignment_sessions ases
+        JOIN test_sessions ts ON ts.id = ases.session_id
+        WHERE ases.assignment_id = ?
+      ) best ON best.user_id = u.id AND best.rn = 1
+      WHERE u.id = ?
+    `).all(req.params.id, a.user_id);
+  } else {
+    results = db.prepare(`
+      SELECT u.id, u.name, u.email,
+             best.session_id,
+             best.score, best.total, best.session_status, best.finished_at,
+             best.percent,
+             best.attempts_used
+      FROM class_members cm
+      JOIN users u ON u.id = cm.user_id
+      LEFT JOIN (
+        SELECT ases.user_id,
+               ases.session_id,
+               ts.score, ts.total, ts.status AS session_status, ts.finished_at,
+               ROUND(CAST(ts.score AS REAL) / ts.total * 100) AS percent,
+               COUNT(*) OVER (PARTITION BY ases.assignment_id, ases.user_id) AS attempts_used,
+               ROW_NUMBER() OVER (PARTITION BY ases.user_id ORDER BY ts.score DESC, ts.finished_at DESC) AS rn
+        FROM assignment_sessions ases
+        JOIN test_sessions ts ON ts.id = ases.session_id
+        WHERE ases.assignment_id = ?
+      ) best ON best.user_id = cm.user_id AND best.rn = 1
+      WHERE cm.class_id = ?
+      ORDER BY
+        CASE WHEN best.percent IS NULL THEN 1 ELSE 0 END,
+        best.percent DESC, u.name
+    `).all(req.params.id, a.class_id);
+  }
+
+  res.json({ assignment: a, results });
+}
+
+/* ── GET /api/assignments/:id/question-stats ── per-question error rates ── */
+function assignmentQuestionStats(req, res) {
+  const a = db.prepare(`
+    SELECT a.id, COALESCE(c.teacher_id, a.created_by) AS teacher_id, a.class_id, a.user_id
+    FROM assignments a LEFT JOIN classes c ON c.id = a.class_id WHERE a.id = ?
+  `).get(req.params.id);
+  if (!a) return res.status(404).json({ error: 'Not found' });
+  if (req.user.role !== 'admin' && a.teacher_id !== req.user.id)
+    return res.status(403).json({ error: 'Forbidden' });
+
+  // All completed sessions for this assignment
+  const sessions = db.prepare(`
+    SELECT ases.session_id FROM assignment_sessions ases
+    JOIN test_sessions ts ON ts.id = ases.session_id
+    WHERE ases.assignment_id = ? AND ts.status = 'completed'
+  `).all(req.params.id);
+
+  if (!sessions.length) return res.json({ stats: [] });
+
+  const sessionIds = sessions.map(s => s.session_id);
+  const placeholders = sessionIds.map(() => '?').join(',');
+
+  const rows = db.prepare(`
+    SELECT q.id AS question_id,
+           q.text AS question_text,
+           q.type,
+           COUNT(ua.id)                                      AS total,
+           SUM(CASE WHEN ua.is_correct = 0 THEN 1 ELSE 0 END) AS wrong,
+           ROUND(
+             CAST(SUM(CASE WHEN ua.is_correct = 0 THEN 1 ELSE 0 END) AS REAL)
+             / COUNT(ua.id) * 100
+           , 0) AS error_pct
+    FROM user_answers ua
+    JOIN questions q ON q.id = ua.question_id
+    WHERE ua.session_id IN (${placeholders})
+    GROUP BY ua.question_id
+    ORDER BY error_pct DESC, wrong DESC
+  `).all(...sessionIds);
+
+  res.json({ stats: rows, session_count: sessionIds.length });
+}
+
+/* ── POST /api/assignments ── direct assignment to a single student ──────── */
+function createDirectAssignment(req, res) {
+  const { deadline, student_email, student_id, file_id, is_homework = 1 } = req.body;
+  const mode  = req.body.mode  || 'exam';
+  const count = Number(req.body.count) || 25;
+  let { title, subject_slug, test_id } = req.body;
+  if (!title?.trim()) return res.status(400).json({ error: 'title required' });
+  if (!VALID_ASSIGN_MODES.has(mode)) return res.status(400).json({ error: 'mode must be exam, practice, repeat or ct' });
+  if (!Number.isInteger(count) || count < 1 || count > 200)
+    return res.status(400).json({ error: 'count must be an integer between 1 and 200' });
+  if (deadline && isNaN(Date.parse(deadline)))
+    return res.status(400).json({ error: 'deadline must be a valid date' });
+
+  let student;
+  if (student_id) {
+    student = db.prepare("SELECT id, name FROM users WHERE id = ? AND role = 'student'").get(Number(student_id));
+    if (!student) return res.status(404).json({ error: 'Ученик не найден' });
+  } else {
+    if (!student_email?.trim()) return res.status(400).json({ error: 'student_email required' });
+    student = db.prepare("SELECT id, name FROM users WHERE email = ? AND role = 'student'")
+      .get(student_email.trim().toLowerCase());
+    if (!student) return res.status(404).json({ error: 'Ученик с таким email не найден' });
+  }
+
+  // Учитель может выдать личное задание только ученику из своего класса
+  if (req.user.role === 'teacher') {
+    const inClass = db.prepare(`
+      SELECT 1 FROM class_members cm
+      JOIN classes c ON c.id = cm.class_id
+      WHERE cm.user_id = ? AND c.teacher_id = ?
+    `).get(student.id, req.user.id);
+    if (!inClass) return res.status(403).json({ error: 'Ученик не входит ни в один из ваших классов' });
+  }
+
+  test_id = test_id ? Number(test_id) : null;
+  if (test_id) {
+    const t = db.prepare('SELECT subject_slug FROM tests WHERE id = ?').get(test_id);
+    if (!t) return res.status(400).json({ error: 'Test not found' });
+    subject_slug = t.subject_slug;
+  }
+  if (file_id && !subject_slug) {
+    const f = db.prepare('SELECT subject_slug FROM files WHERE id = ?').get(file_id);
+    if (f?.subject_slug) subject_slug = f.subject_slug;
+  }
+  if (!subject_slug && !is_homework) return res.status(400).json({ error: 'subject_slug required' });
+  if (!subject_slug) subject_slug = 'other';
+
+  const r = db.prepare(`
+    INSERT INTO assignments (user_id, title, subject_slug, mode, count, deadline, created_by, test_id, file_id, is_homework)
+    VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+  `).run(student.id, stripTags(title.trim()), subject_slug, mode, Number(count), deadline || null, req.user.id, test_id, file_id || null, is_homework ? 1 : 0);
+
+  // Уведомление ученику
+  pushNotif(student.id, 'assignment', `Для вас задание: «${title.trim()}»`, '/dashboard');
+
+  res.status(201).json({ id: r.lastInsertRowid });
+}
+
+/* ── GET /api/assignments/:id/sessions/:session_id/review ── teacher view ── */
+function assignmentSessionReview(req, res) {
+  const assignmentId = Number(req.params.id);
+  const sessionId    = Number(req.params.session_id);
+
+  // Verify assignment ownership
+  const a = db.prepare(`
+    SELECT a.id, COALESCE(c.teacher_id, a.created_by) AS teacher_id
+    FROM assignments a LEFT JOIN classes c ON c.id = a.class_id WHERE a.id = ?
+  `).get(assignmentId);
+  if (!a) return res.status(404).json({ error: 'Assignment not found' });
+  if (req.user.role !== 'admin' && a.teacher_id !== req.user.id)
+    return res.status(403).json({ error: 'Forbidden' });
+
+  // Verify session is linked to this assignment
+  const link = db.prepare(
+    'SELECT 1 FROM assignment_sessions WHERE assignment_id = ? AND session_id = ?'
+  ).get(assignmentId, sessionId);
+  if (!link) return res.status(404).json({ error: 'Session not linked to this assignment' });
+
+  const session = db.prepare('SELECT score, total, status FROM test_sessions WHERE id = ?').get(sessionId);
+  if (!session) return res.status(404).json({ error: 'Session not found' });
+
+  // Build per-question review — batched
+  const questionIds = db.prepare(
+    'SELECT question_id FROM session_questions WHERE session_id = ? ORDER BY order_index'
+  ).all(sessionId).map(r => r.question_id);
+
+  if (!questionIds.length) return res.json({ session_id: sessionId, score: session.score, total: session.total, review: [] });
+
+  const qPh = questionIds.map(() => '?').join(',');
+  const questions = db.prepare(`SELECT id, text, type, explanation, correct_text FROM questions WHERE id IN (${qPh})`).all(...questionIds);
+  const qMap = {};
+  for (const q of questions) qMap[q.id] = q;
+
+  const allOptions = db.prepare(`SELECT question_id, id, text, is_correct, match_pair FROM options WHERE question_id IN (${qPh}) ORDER BY order_index`).all(...questionIds);
+  const optMap = {};
+  for (const o of allOptions) { if (!optMap[o.question_id]) optMap[o.question_id] = []; optMap[o.question_id].push(o); }
+
+  const allAnswers = db.prepare(`SELECT question_id, chosen_option_id, answer_text, is_correct FROM user_answers WHERE session_id = ? AND question_id IN (${qPh})`).all(sessionId, ...questionIds);
+  const ansMap = {};
+  for (const a of allAnswers) ansMap[a.question_id] = a;
+
+  const review = questionIds.map(qid => {
+    const q = qMap[qid];
+    if (!q) return null;
+    q.options = optMap[qid] || [];
+    const ua = ansMap[qid];
+    q.chosen_option_id = ua?.chosen_option_id ?? null;
+    q.answer_text      = ua?.answer_text ?? null;
+    q.is_correct       = ua ? ua.is_correct === 1 : null;
+    return q;
+  }).filter(Boolean);
+
+  res.json({ session_id: sessionId, score: session.score, total: session.total, review });
+}
+
+/* ── GET /api/assignments/templates ── list my templates ───────────────── */
+function listTemplates(req, res) {
+  const rows = db.prepare(`
+    SELECT id, label, subject_slug, mode, count, topic_id, test_id, file_id, is_homework, created_at
+    FROM assignment_templates WHERE created_by = ? ORDER BY created_at DESC
+  `).all(req.user.id);
+  res.json(rows);
+}
+
+/* ── POST /api/assignments/templates ── save template ──────────────────── */
+function saveTemplate(req, res) {
+  const { label, subject_slug, mode = 'exam', count = 25, topic_id, test_id, file_id, is_homework = 0 } = req.body;
+  if (!label?.trim()) return res.status(400).json({ error: 'label required' });
+  if (!subject_slug)  return res.status(400).json({ error: 'subject_slug required' });
+  const r = db.prepare(`
+    INSERT INTO assignment_templates (created_by, label, subject_slug, mode, count, topic_id, test_id, file_id, is_homework)
+    VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)
+  `).run(req.user.id, label.trim(), subject_slug, mode, Number(count), topic_id || null, test_id || null, file_id || null, is_homework ? 1 : 0);
+  res.status(201).json({ id: r.lastInsertRowid });
+}
+
+/* ── DELETE /api/assignments/templates/:id ─────────────────────────────── */
+function deleteTemplate(req, res) {
+  db.prepare('DELETE FROM assignment_templates WHERE id = ? AND created_by = ?')
+    .run(req.params.id, req.user.id);
+  res.json({ ok: true });
+}
+
+/* ── POST /api/assignments/bulk ── assign to multiple classes at once ───── */
+function bulkCreateAssignment(req, res) {
+  const { class_ids, title, mode = 'exam', count = 25, topic_id, deadline, test_id, file_id, is_homework = 0 } = req.body;
+  let { subject_slug } = req.body;
+
+  if (!Array.isArray(class_ids) || !class_ids.length)
+    return res.status(400).json({ error: 'class_ids[] required' });
+  if (!title?.trim()) return res.status(400).json({ error: 'title required' });
+  if (!VALID_ASSIGN_MODES.has(mode)) return res.status(400).json({ error: 'invalid mode' });
+
+  if (test_id) {
+    const t = db.prepare('SELECT subject_slug FROM tests WHERE id = ?').get(test_id);
+    if (!t) return res.status(400).json({ error: 'Test not found' });
+    subject_slug = t.subject_slug;
+  }
+  if (!subject_slug && !is_homework) return res.status(400).json({ error: 'subject_slug required' });
+  if (!subject_slug) subject_slug = 'other';
+
+  const created = db.transaction(() => {
+    const ids = [];
+    for (const class_id of class_ids) {
+      const cls = db.prepare('SELECT id, teacher_id FROM classes WHERE id = ?').get(class_id);
+      if (!cls) continue;
+      if (req.user.role !== 'admin' && cls.teacher_id !== req.user.id) continue;
+
+      const r = db.prepare(`
+        INSERT INTO assignments (class_id, title, subject_slug, mode, count, topic_id, deadline, created_by, test_id, file_id, is_homework)
+        VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+      `).run(cls.id, stripTags(title.trim()), subject_slug, mode, Number(count), topic_id || null, deadline || null, req.user.id, test_id || null, file_id || null, is_homework ? 1 : 0);
+      ids.push(r.lastInsertRowid);
+
+      const members = db.prepare('SELECT user_id FROM class_members WHERE class_id = ?').all(cls.id);
+      members.forEach(m => pushNotif(m.user_id, 'assignment', `Новое задание: «${title.trim()}»`, '/dashboard'));
+    }
+    return ids;
+  })();
+
+  res.status(201).json({ created, count: created.length });
+}
+
+module.exports = {
+  VALID_ASSIGN_MODES,
+  createAssignment,
+  updateAssignment,
+  deleteAssignment,
+  teacherAssignments,
+  myAssignments,
+  startAssignment,
+  assignmentResults,
+  assignmentQuestionStats,
+  createDirectAssignment,
+  assignmentSessionReview,
+  listTemplates,
+  saveTemplate,
+  deleteTemplate,
+  bulkCreateAssignment,
+};
diff --git a/backend/src/controllers/authController.js b/backend/src/controllers/authController.js
new file mode 100644
index 0000000..47815e6
--- /dev/null
+++ b/backend/src/controllers/authController.js
@@ -0,0 +1,92 @@
+const bcrypt = require('bcryptjs');
+const jwt    = require('jsonwebtoken');
+const db     = require('../db/db');
+const { BCRYPT_ROUNDS } = require('../config');
+const { stripTags } = require('../utils/sanitize');
+
+function signToken(user) {
+  return jwt.sign(
+    { id: user.id, email: user.email, role: user.role, name: user.name, tv: user.token_version || 0 },
+    process.env.JWT_SECRET,
+    { algorithm: 'HS256', expiresIn: process.env.JWT_EXPIRES_IN || '7d' }
+  );
+}
+
+async function register(req, res, next) {
+  try {
+    const { password, name } = req.body;
+    const email = req.body.email?.trim().toLowerCase();
+
+    if (!email || !password || !name)
+      return res.status(400).json({ error: 'email, password and name are required' });
+    if (password.length < 6)
+      return res.status(400).json({ error: 'Password must be at least 6 characters' });
+
+    if (db.prepare('SELECT id FROM users WHERE email = ?').get(email))
+      return res.status(409).json({ error: 'Email already registered' });
+
+    const cleanName = stripTags(name.trim());
+    const hash = await bcrypt.hash(password, BCRYPT_ROUNDS);
+    const { lastInsertRowid } = db.prepare(
+      'INSERT INTO users (email, password_hash, name) VALUES (?, ?, ?)'
+    ).run(email, hash, cleanName);
+
+    const user  = db.prepare('SELECT id, email, name, role, token_version FROM users WHERE id = ?').get(lastInsertRowid);
+    const token = signToken(user);
+    res.status(201).json({ token, user });
+  } catch (err) { next(err); }
+}
+
+async function login(req, res, next) {
+  try {
+    const { password } = req.body;
+    const email = req.body.email?.trim().toLowerCase();
+    if (!email || !password)
+      return res.status(400).json({ error: 'email and password are required' });
+
+    const user = db.prepare(
+      'SELECT id, email, name, role, password_hash, token_version FROM users WHERE email = ?'
+    ).get(email);
+
+    if (!user || !(await bcrypt.compare(password, user.password_hash)))
+      return res.status(401).json({ error: 'Invalid credentials' });
+
+    db.prepare("UPDATE users SET last_login = datetime('now') WHERE id = ?").run(user.id);
+
+    const token = signToken(user);
+    res.json({ token, user: { id: user.id, email: user.email, name: user.name, role: user.role } });
+  } catch (err) { next(err); }
+}
+
+function me(req, res) {
+  const user = db.prepare(
+    'SELECT id, email, name, role, created_at, last_login FROM users WHERE id = ?'
+  ).get(req.user.id);
+  res.json(user);
+}
+
+async function updateProfile(req, res, next) {
+  try {
+    const { name, currentPassword, newPassword } = req.body;
+    const user = db.prepare('SELECT id, name, email, role, password_hash FROM users WHERE id = ?').get(req.user.id);
+
+    if (name?.trim() && name.trim() !== user.name) {
+      db.prepare('UPDATE users SET name = ? WHERE id = ?').run(stripTags(name.trim()), user.id);
+    }
+
+    if (newPassword) {
+      if (!currentPassword) return res.status(400).json({ error: 'Текущий пароль обязателен' });
+      const valid = await bcrypt.compare(currentPassword, user.password_hash);
+      if (!valid) return res.status(401).json({ error: 'Неверный текущий пароль' });
+      if (newPassword.length < 6) return res.status(400).json({ error: 'Пароль минимум 6 символов' });
+      const hash = await bcrypt.hash(newPassword, BCRYPT_ROUNDS);
+      db.prepare('UPDATE users SET password_hash = ?, token_version = token_version + 1 WHERE id = ?').run(hash, user.id);
+    }
+
+    const updated = db.prepare('SELECT id, email, name, role, created_at, token_version FROM users WHERE id = ?').get(user.id);
+    const token = signToken(updated);
+    res.json({ user: updated, token });
+  } catch (err) { next(err); }
+}
+
+module.exports = { register, login, me, updateProfile };
diff --git a/backend/src/controllers/biochemController.js b/backend/src/controllers/biochemController.js
new file mode 100644
index 0000000..3d79053
--- /dev/null
+++ b/backend/src/controllers/biochemController.js
@@ -0,0 +1,276 @@
+'use strict';
+const db = require('../db/db');
+const { awardXP } = require('./gamificationController');
+
+/* ── Helpers ─────────────────────────────────────────────────────────── */
+const MAX_V = { H:1, C:4, N:3, O:2, P:5, S:6, Cl:1, Na:1, Ca:2, K:1, Mg:2, Fe:3, Br:1, I:1, F:1 };
+
+function hillFormula(atoms) {
+  const cnt = {};
+  for (const a of atoms) cnt[a.s] = (cnt[a.s] || 0) + 1;
+  const parts = [];
+  if (cnt.C) { parts.push('C' + (cnt.C > 1 ? cnt.C : '')); delete cnt.C; }
+  if (cnt.H) { parts.push('H' + (cnt.H > 1 ? cnt.H : '')); delete cnt.H; }
+  for (const el of Object.keys(cnt).sort()) parts.push(el + (cnt[el] > 1 ? cnt[el] : ''));
+  return parts.join('');
+}
+
+function valencyIssues(atoms, bonds) {
+  const sums = {};
+  for (const b of bonds) {
+    sums[b.f] = (sums[b.f] || 0) + b.o;
+    sums[b.t] = (sums[b.t] || 0) + b.o;
+  }
+  return atoms
+    .filter(a => (sums[a.id] || 0) > (MAX_V[a.s] ?? 4))
+    .map(a => ({ id: a.id, symbol: a.s, used: sums[a.id] || 0, max: MAX_V[a.s] ?? 4 }));
+}
+
+/* ── Prepared statements ─────────────────────────────────────────────── */
+const stmts = {
+  getElements:    db.prepare('SELECT * FROM bio_elements ORDER BY radius ASC'),
+  getMolecules:   db.prepare("SELECT id,formula,name_ru,name_lat,category,difficulty,description,topic_tags,atoms_json,bonds_json FROM bio_molecules WHERE is_library=1 ORDER BY difficulty,name_ru"),
+  getMolCat:      db.prepare("SELECT id,formula,name_ru,name_lat,category,difficulty,description,topic_tags,atoms_json,bonds_json FROM bio_molecules WHERE is_library=1 AND category=? ORDER BY difficulty,name_ru"),
+  getMolSearch:   db.prepare("SELECT id,formula,name_ru,name_lat,category,difficulty,description,topic_tags,atoms_json,bonds_json FROM bio_molecules WHERE is_library=1 AND (name_ru LIKE ? OR formula LIKE ?) ORDER BY difficulty,name_ru"),
+  getMolById:     db.prepare('SELECT * FROM bio_molecules WHERE id=?'),
+  getMolByFormula:db.prepare('SELECT id,name_ru,name_lat,category,description,topic_tags FROM bio_molecules WHERE formula=? LIMIT 1'),
+  getReactions:   db.prepare('SELECT * FROM bio_reactions ORDER BY name_ru'),
+  getChallenges:  db.prepare('SELECT * FROM bio_challenges ORDER BY difficulty,order_n'),
+  getChallenge:   db.prepare('SELECT * FROM bio_challenges WHERE id=?'),
+  checkDone:      db.prepare('SELECT 1 FROM bio_user_challenges WHERE user_id=? AND challenge_id=?'),
+  markDone:       db.prepare('INSERT OR IGNORE INTO bio_user_challenges (user_id,challenge_id) VALUES (?,?)'),
+  getDoneIds:     db.prepare('SELECT challenge_id FROM bio_user_challenges WHERE user_id=?'),
+  getSaved:       db.prepare('SELECT bm.*, bmo.name_ru AS mol_name FROM bio_user_molecules bm LEFT JOIN bio_molecules bmo ON bmo.id=bm.molecule_id WHERE bm.user_id=? ORDER BY bm.created_at DESC'),
+  saveMol:        db.prepare('INSERT INTO bio_user_molecules (user_id,molecule_id,name,formula,atoms_json,bonds_json) VALUES (?,?,?,?,?,?)'),
+  deleteSaved:    db.prepare('DELETE FROM bio_user_molecules WHERE id=? AND user_id=?'),
+};
+
+/* ── GET /api/biochem/elements ───────────────────────────────────────── */
+function getElements(_req, res) {
+  res.json(stmts.getElements.all());
+}
+
+/* ── GET /api/biochem/molecules ──────────────────────────────────────── */
+function getMolecules(req, res) {
+  const { cat, q } = req.query;
+  let rows;
+  if (q) {
+    const like = `%${q}%`;
+    rows = stmts.getMolSearch.all(like, like);
+  } else if (cat) {
+    rows = stmts.getMolCat.all(cat);
+  } else {
+    rows = stmts.getMolecules.all();
+  }
+  rows = rows.map(r => ({
+    ...r,
+    topic_tags: tryParse(r.topic_tags, []),
+    atoms_json: tryParse(r.atoms_json, []),
+    bonds_json: tryParse(r.bonds_json, []),
+  }));
+  res.json(rows);
+}
+
+/* ── GET /api/biochem/molecules/:id ─────────────────────────────────── */
+function getMolecule(req, res) {
+  const mol = stmts.getMolById.get(req.params.id);
+  if (!mol) return res.status(404).json({ error: 'Not found' });
+  res.json({
+    ...mol,
+    atoms_json:  tryParse(mol.atoms_json, []),
+    bonds_json:  tryParse(mol.bonds_json, []),
+    topic_tags:  tryParse(mol.topic_tags, []),
+  });
+}
+
+/* ── POST /api/biochem/validate ─────────────────────────────────────── */
+function validate(req, res) {
+  const { atoms, bonds } = req.body;
+  if (!Array.isArray(atoms) || !Array.isArray(bonds))
+    return res.status(400).json({ error: 'atoms[] and bonds[] required' });
+  if (atoms.length === 0) return res.json({ valid: false, formula: '', issues: [] });
+
+  const formula = hillFormula(atoms);
+  const issues  = valencyIssues(atoms, bonds);
+  const valid   = issues.length === 0;
+
+  const known = valid ? stmts.getMolByFormula.get(formula) : null;
+  res.json({ valid, formula, issues, known: known || null });
+}
+
+/* ── GET /api/biochem/reactions ─────────────────────────────────────── */
+function getReactions(_req, res) {
+  const rows = stmts.getReactions.all().map(r => ({
+    ...r,
+    reactant_ids: tryParse(r.reactant_ids, []),
+    product_ids:  tryParse(r.product_ids, []),
+    topic_tags:   tryParse(r.topic_tags, []),
+  }));
+  res.json(rows);
+}
+
+/* ── GET /api/biochem/challenges ────────────────────────────────────── */
+function getChallenges(req, res) {
+  const challenges = stmts.getChallenges.all();
+  const doneSet = new Set(stmts.getDoneIds.all(req.user.id).map(r => r.challenge_id));
+  res.json(challenges.map(c => ({
+    ...c,
+    data_json: tryParse(c.data_json, null),
+    done: doneSet.has(c.id),
+  })));
+}
+
+/* ── POST /api/biochem/challenges/:id/solve ─────────────────────────── */
+function solveChallenge(req, res) {
+  const challenge = stmts.getChallenge.get(req.params.id);
+  if (!challenge) return res.status(404).json({ error: 'Challenge not found' });
+
+  if (stmts.checkDone.get(req.user.id, challenge.id))
+    return res.status(400).json({ error: 'already_completed' });
+
+  const type = challenge.type || 'build';
+
+  /* ── identify: shown structure → pick name ── */
+  if (type === 'identify') {
+    const { answer } = req.body;
+    if (typeof answer !== 'string' || !answer)
+      return res.status(400).json({ error: 'answer required' });
+    const mol = stmts.getMolByFormula.get(challenge.target_formula);
+    if (!mol || answer !== mol.name_ru)
+      return res.status(400).json({ error: 'wrong_answer' });
+    stmts.markDone.run(req.user.id, challenge.id);
+    awardXP(req.user.id, challenge.xp_reward, `biochem_challenge:${challenge.id}`);
+    return res.json({ ok: true, xp: challenge.xp_reward });
+  }
+
+  /* ── formula: shown name → pick formula ── */
+  if (type === 'formula') {
+    const { answer } = req.body;
+    if (typeof answer !== 'string' || !answer)
+      return res.status(400).json({ error: 'answer required' });
+    if (answer !== challenge.target_formula)
+      return res.status(400).json({ error: 'wrong_answer' });
+    stmts.markDone.run(req.user.id, challenge.id);
+    awardXP(req.user.id, challenge.xp_reward, `biochem_challenge:${challenge.id}`);
+    return res.json({ ok: true, xp: challenge.xp_reward });
+  }
+
+  /* ── classify: shown molecule → pick class ── */
+  if (type === 'classify') {
+    const { answer } = req.body;
+    if (typeof answer !== 'string' || !answer)
+      return res.status(400).json({ error: 'answer required' });
+    const data = tryParse(challenge.data_json, {});
+    if (answer !== data.answer)
+      return res.status(400).json({ error: 'wrong_answer' });
+    stmts.markDone.run(req.user.id, challenge.id);
+    awardXP(req.user.id, challenge.xp_reward, `biochem_challenge:${challenge.id}`);
+    return res.json({ ok: true, xp: challenge.xp_reward });
+  }
+
+  /* ── complete: shown partial reaction → pick missing component ── */
+  if (type === 'complete') {
+    const { answer } = req.body;
+    if (typeof answer !== 'string' || !answer)
+      return res.status(400).json({ error: 'answer required' });
+    const data = tryParse(challenge.data_json, {});
+    if (answer !== data.answer)
+      return res.status(400).json({ error: 'wrong_answer' });
+    stmts.markDone.run(req.user.id, challenge.id);
+    awardXP(req.user.id, challenge.xp_reward, `biochem_challenge:${challenge.id}`);
+    return res.json({ ok: true, xp: challenge.xp_reward });
+  }
+
+  /* ── balance: fill coefficients to balance equation ── */
+  if (type === 'balance') {
+    const { coefficients } = req.body;
+    const data = tryParse(challenge.data_json, {});
+    const expected = data.coefficients || [];
+    if (!Array.isArray(coefficients) ||
+        coefficients.length !== expected.length ||
+        !coefficients.every((c, i) => parseInt(c) === expected[i]))
+      return res.status(400).json({ error: 'wrong_answer' });
+    stmts.markDone.run(req.user.id, challenge.id);
+    awardXP(req.user.id, challenge.xp_reward, `biochem_challenge:${challenge.id}`);
+    return res.json({ ok: true, xp: challenge.xp_reward });
+  }
+
+  /* ── match: pair left items with right items ── */
+  if (type === 'match') {
+    const { pairs } = req.body;
+    const data = tryParse(challenge.data_json, {});
+    const answerMap = new Map((data.pairs || []).map(p => [p.left, p.right]));
+    if (!Array.isArray(pairs) ||
+        pairs.length !== answerMap.size ||
+        !pairs.every(p => answerMap.get(p.left) === p.right))
+      return res.status(400).json({ error: 'wrong_answer' });
+    stmts.markDone.run(req.user.id, challenge.id);
+    awardXP(req.user.id, challenge.xp_reward, `biochem_challenge:${challenge.id}`);
+    return res.json({ ok: true, xp: challenge.xp_reward });
+  }
+
+  /* ── build (default): draw the molecule ── */
+  const { atoms, bonds } = req.body;
+  if (!Array.isArray(atoms) || !Array.isArray(bonds))
+    return res.status(400).json({ error: 'atoms[] and bonds[] required' });
+
+  const formula = hillFormula(atoms);
+  if (formula !== challenge.target_formula)
+    return res.status(400).json({ error: 'wrong_formula', submitted: formula, expected: challenge.target_formula });
+
+  const issues = valencyIssues(atoms, bonds);
+  if (issues.length > 0)
+    return res.status(400).json({ error: 'valency_error', issues });
+
+  stmts.markDone.run(req.user.id, challenge.id);
+  awardXP(req.user.id, challenge.xp_reward, `biochem_challenge:${challenge.id}`);
+  res.json({ ok: true, xp: challenge.xp_reward });
+}
+
+/* ── GET /api/biochem/saved ─────────────────────────────────────────── */
+function getSaved(req, res) {
+  const rows = stmts.getSaved.all(req.user.id).map(r => ({
+    ...r,
+    atoms_json: tryParse(r.atoms_json, []),
+    bonds_json: tryParse(r.bonds_json, []),
+  }));
+  res.json(rows);
+}
+
+/* ── POST /api/biochem/saved ────────────────────────────────────────── */
+function saveMolecule(req, res) {
+  const { atoms, bonds, name } = req.body;
+  if (!Array.isArray(atoms) || !Array.isArray(bonds) || atoms.length === 0)
+    return res.status(400).json({ error: 'atoms[] and bonds[] required' });
+
+  const formula = hillFormula(atoms);
+  const known   = stmts.getMolByFormula.get(formula);
+  const id = stmts.saveMol.run(
+    req.user.id,
+    known?.id ?? null,
+    name?.trim() || null,
+    formula,
+    JSON.stringify(atoms),
+    JSON.stringify(bonds),
+  ).lastInsertRowid;
+  res.status(201).json({ id, formula, known: known || null });
+}
+
+/* ── DELETE /api/biochem/saved/:id ──────────────────────────────────── */
+function deleteSaved(req, res) {
+  const info = stmts.deleteSaved.run(req.params.id, req.user.id);
+  if (info.changes === 0) return res.status(404).json({ error: 'Not found' });
+  res.json({ ok: true });
+}
+
+/* ── util ────────────────────────────────────────────────────────────── */
+function tryParse(v, fallback) {
+  if (!v) return fallback;
+  try { return JSON.parse(v); } catch { return fallback; }
+}
+
+module.exports = {
+  getElements, getMolecules, getMolecule, validate,
+  getReactions, getChallenges, solveChallenge,
+  getSaved, saveMolecule, deleteSaved,
+};
diff --git a/backend/src/controllers/bookmarkController.js b/backend/src/controllers/bookmarkController.js
new file mode 100644
index 0000000..dc9afc0
--- /dev/null
+++ b/backend/src/controllers/bookmarkController.js
@@ -0,0 +1,103 @@
+const db = require('../db/db');
+
+const VALID_TYPES = ['lesson', 'course', 'file', 'question'];
+
+/* ── GET /api/bookmarks?type=lesson ── list user bookmarks ─────────── */
+function list(req, res) {
+  const uid = req.user.id;
+  const { type } = req.query;
+
+  let where = 'WHERE b.user_id = ?';
+  const args = [uid];
+  if (type && VALID_TYPES.includes(type)) {
+    where += ' AND b.entity_type = ?';
+    args.push(type);
+  }
+
+  const rows = db.prepare(`
+    SELECT b.id, b.entity_type, b.entity_id, b.created_at
+    FROM bookmarks b ${where}
+    ORDER BY b.created_at DESC
+  `).all(...args);
+
+  // Batch-fetch titles by type to avoid N+1
+  const byType = {};
+  for (const r of rows) (byType[r.entity_type] ||= []).push(r);
+
+  const titleMap = new Map();
+
+  if (byType.lesson?.length) {
+    const ids = byType.lesson.map(r => r.entity_id);
+    const ph = ids.map(() => '?').join(',');
+    for (const l of db.prepare(`SELECT l.id, l.title, c.title AS course_title, c.id AS course_id FROM lessons l JOIN courses c ON l.course_id = c.id WHERE l.id IN (${ph})`).all(...ids))
+      titleMap.set(`lesson:${l.id}`, { title: l.title, courseTitle: l.course_title, courseId: l.course_id });
+  }
+  if (byType.course?.length) {
+    const ids = byType.course.map(r => r.entity_id);
+    const ph = ids.map(() => '?').join(',');
+    for (const c of db.prepare(`SELECT id, title, subject_slug, cover_emoji FROM courses WHERE id IN (${ph})`).all(...ids))
+      titleMap.set(`course:${c.id}`, { title: c.title, subjectSlug: c.subject_slug, coverEmoji: c.cover_emoji });
+  }
+  if (byType.file?.length) {
+    const ids = byType.file.map(r => r.entity_id);
+    const ph = ids.map(() => '?').join(',');
+    for (const f of db.prepare(`SELECT id, title, original_name FROM files WHERE id IN (${ph})`).all(...ids))
+      titleMap.set(`file:${f.id}`, { title: f.title || f.original_name });
+  }
+  if (byType.question?.length) {
+    const ids = byType.question.map(r => r.entity_id);
+    const ph = ids.map(() => '?').join(',');
+    for (const q of db.prepare(`SELECT id, text FROM questions WHERE id IN (${ph})`).all(...ids))
+      titleMap.set(`question:${q.id}`, { title: q.text.slice(0, 100) });
+  }
+
+  const enriched = rows.map(r => {
+    const info = titleMap.get(`${r.entity_type}:${r.entity_id}`);
+    if (!info) return null;
+    const { title, ...extra } = info;
+    return { ...r, title, ...extra };
+  }).filter(Boolean);
+
+  res.json(enriched);
+}
+
+/* ── POST /api/bookmarks ── add bookmark ───────────────────────────── */
+function add(req, res) {
+  const { entityType, entityId } = req.body;
+  if (!entityType || !entityId) return res.status(400).json({ error: 'entityType and entityId required' });
+  if (!VALID_TYPES.includes(entityType)) return res.status(400).json({ error: 'Invalid entity type' });
+
+  try {
+    const r = db.prepare(
+      'INSERT INTO bookmarks (user_id, entity_type, entity_id) VALUES (?, ?, ?)'
+    ).run(req.user.id, entityType, entityId);
+    res.status(201).json({ id: Number(r.lastInsertRowid) });
+  } catch (e) {
+    if (e.message.includes('UNIQUE')) return res.status(409).json({ error: 'Already bookmarked' });
+    throw e;
+  }
+}
+
+/* ── DELETE /api/bookmarks/:id ── remove bookmark ──────────────────── */
+function remove(req, res) {
+  const bm = db.prepare('SELECT id FROM bookmarks WHERE id = ? AND user_id = ?').get(req.params.id, req.user.id);
+  if (!bm) return res.status(404).json({ error: 'Bookmark not found' });
+  db.prepare('DELETE FROM bookmarks WHERE id = ?').run(bm.id);
+  res.json({ ok: true });
+}
+
+/* ── DELETE /api/bookmarks/entity/:type/:entityId ── remove by entity ── */
+function removeByEntity(req, res) {
+  const { type, entityId } = req.params;
+  db.prepare('DELETE FROM bookmarks WHERE user_id = ? AND entity_type = ? AND entity_id = ?').run(req.user.id, type, entityId);
+  res.json({ ok: true });
+}
+
+/* ── GET /api/bookmarks/check/:type/:entityId ── check if bookmarked ── */
+function check(req, res) {
+  const { type, entityId } = req.params;
+  const row = db.prepare('SELECT id FROM bookmarks WHERE user_id = ? AND entity_type = ? AND entity_id = ?').get(req.user.id, type, entityId);
+  res.json({ bookmarked: !!row, id: row?.id || null });
+}
+
+module.exports = { list, add, remove, removeByEntity, check };
diff --git a/backend/src/controllers/classController.js b/backend/src/controllers/classController.js
new file mode 100644
index 0000000..14afcf3
--- /dev/null
+++ b/backend/src/controllers/classController.js
@@ -0,0 +1,559 @@
+const db     = require('../db/db');
+const crypto = require('crypto');
+const { onClassJoined } = require('./gamificationController');
+const { pushNotif } = require('../utils/notifications');
+const { stripTags } = require('../utils/sanitize');
+
+function genCode() {
+  return crypto.randomBytes(4).toString('hex').toUpperCase();
+}
+
+/* ── Prepared statements (module-level to avoid re-parsing per request) ── */
+const stmts = {
+  getClassOwner:      db.prepare('SELECT id, teacher_id FROM classes WHERE id = ?'),
+  getClassWithName:   db.prepare('SELECT id, name, teacher_id FROM classes WHERE id = ?'),
+  getClassByCode:     db.prepare('SELECT id, name FROM classes WHERE invite_code = ?'),
+  checkCodeExists:    db.prepare('SELECT id FROM classes WHERE invite_code = ?'),
+  getMemberCheck:     db.prepare('SELECT 1 FROM class_members WHERE class_id = ? AND user_id = ?'),
+  getClassMembers:    db.prepare('SELECT user_id FROM class_members WHERE class_id = ?'),
+  insertMember:       db.prepare('INSERT INTO class_members (class_id, user_id) VALUES (?, ?)'),
+  deleteMember:       db.prepare('DELETE FROM class_members WHERE class_id = ? AND user_id = ?'),
+  deleteClass:        db.prepare('DELETE FROM classes WHERE id = ?'),
+  updateClassCode:    db.prepare('UPDATE classes SET invite_code = ? WHERE id = ?'),
+  updateClassName:    db.prepare('UPDATE classes SET name = ? WHERE id = ?'),
+  updateClassDesc:    db.prepare('UPDATE classes SET description = ? WHERE id = ?'),
+  updateClassFeats:   db.prepare('UPDATE classes SET features = ? WHERE id = ?'),
+  getClassUpdated:    db.prepare('SELECT id, name, description, invite_code, features, cover_emoji FROM classes WHERE id = ?'),
+  getClassTeacherId:  db.prepare('SELECT teacher_id FROM classes WHERE id = ?'),
+  getStudentById:     db.prepare("SELECT id, name FROM users WHERE id = ? AND role = 'student'"),
+  getStudentByEmail:  db.prepare("SELECT id, name FROM users WHERE email = ? AND role = 'student'"),
+  insertAnnouncement: db.prepare('INSERT INTO announcements (class_id, author_id, text) VALUES (?, ?, ?)'),
+  deleteAnnouncement: db.prepare('DELETE FROM announcements WHERE id = ? AND class_id = ?'),
+};
+
+/* ── GET /api/classes ── teacher: own classes; admin: all ─────────────── */
+function listClasses(req, res) {
+  const { role, id: uid } = req.user;
+  const rows = role === 'admin'
+    ? db.prepare(`
+        SELECT c.id, c.name, c.description, c.invite_code, c.cover_emoji, c.created_at,
+               u.name AS teacher_name,
+               COUNT(DISTINCT cm.user_id) AS member_count,
+               COUNT(DISTINCT a.id)       AS assignment_count
+        FROM classes c
+        JOIN users u ON u.id = c.teacher_id
+        LEFT JOIN class_members cm ON cm.class_id = c.id
+        LEFT JOIN assignments a    ON a.class_id  = c.id
+        GROUP BY c.id ORDER BY c.created_at DESC
+        LIMIT 500
+      `).all()
+    : db.prepare(`
+        SELECT c.id, c.name, c.description, c.invite_code, c.cover_emoji, c.created_at,
+               COUNT(DISTINCT cm.user_id) AS member_count,
+               COUNT(DISTINCT a.id)       AS assignment_count
+        FROM classes c
+        LEFT JOIN class_members cm ON cm.class_id = c.id
+        LEFT JOIN assignments a    ON a.class_id  = c.id
+        WHERE c.teacher_id = ?
+        GROUP BY c.id ORDER BY c.created_at DESC
+      `).all(uid);
+  res.json(rows);
+}
+
+/* ── POST /api/classes ── create ───────────────────────────────────────── */
+function createClass(req, res) {
+  const { name, description, cover_emoji } = req.body;
+  if (!name?.trim()) return res.status(400).json({ error: 'name required' });
+  let invite_code, attempts = 0;
+  while (attempts++ < 10) {
+    invite_code = genCode();
+    if (!stmts.checkCodeExists.get(invite_code)) break;
+    invite_code = null;
+  }
+  if (!invite_code) return res.status(500).json({ error: 'Не удалось сгенерировать уникальный код — попробуйте ещё раз' });
+  const cleanName = stripTags(name.trim());
+  const cleanDesc = description ? stripTags(description.trim()) : null;
+  const emoji = cover_emoji ? stripTags(String(cover_emoji).trim()).slice(0, 50) : '';
+  const r = db.prepare(
+    'INSERT INTO classes (name, description, teacher_id, invite_code, cover_emoji) VALUES (?, ?, ?, ?, ?)'
+  ).run(cleanName, cleanDesc, req.user.id, invite_code, emoji);
+  res.status(201).json({ id: r.lastInsertRowid, name: cleanName, invite_code, cover_emoji: emoji });
+}
+
+/* ── GET /api/classes/:id ── detail (teacher/admin) ────────────────────── */
+function getClass(req, res) {
+  const cls = db.prepare(`
+    SELECT c.*, u.name AS teacher_name
+    FROM classes c JOIN users u ON u.id = c.teacher_id
+    WHERE c.id = ?
+  `).get(req.params.id);
+  if (!cls) return res.status(404).json({ error: 'Class not found' });
+  if (req.user.role !== 'admin' && cls.teacher_id !== req.user.id)
+    return res.status(403).json({ error: 'Forbidden' });
+
+  if (cls.features) {
+    try { cls.features = JSON.parse(cls.features); } catch { cls.features = null; }
+  }
+
+  const members = db.prepare(`
+    SELECT u.id, u.name, u.email, cm.joined_at
+    FROM class_members cm
+    JOIN users u ON u.id = cm.user_id
+    WHERE cm.class_id = ?
+    ORDER BY cm.joined_at DESC
+  `).all(req.params.id);
+
+  // Load per-member stats in one query instead of N+1 LEFT JOIN
+  if (members.length > 0) {
+    const uIds = members.map(m => m.id);
+    const ph   = uIds.map(() => '?').join(',');
+    const stats = db.prepare(`
+      SELECT user_id,
+             COUNT(*)                                                    AS tests_count,
+             ROUND(AVG(CAST(score AS REAL) / total * 100), 1)           AS avg_pct
+      FROM test_sessions
+      WHERE user_id IN (${ph}) AND status = 'completed'
+      GROUP BY user_id
+    `).all(...uIds);
+    const statsMap = {};
+    for (const s of stats) statsMap[s.user_id] = s;
+    for (const m of members) {
+      m.tests_count = statsMap[m.id]?.tests_count || 0;
+      m.avg_pct     = statsMap[m.id]?.avg_pct     || 0;
+    }
+  }
+
+  const assignments = db.prepare(`
+    SELECT a.id, a.title, a.subject_slug, a.mode, a.count, a.deadline, a.created_at,
+           a.file_id, f.title AS file_title, a.test_id, a.max_attempts,
+           (SELECT COUNT(*) FROM class_members WHERE class_id = a.class_id) AS total_members,
+           COUNT(DISTINCT CASE WHEN ts.status = 'completed' THEN ases.user_id END) AS completed_count
+    FROM assignments a
+    LEFT JOIN files f ON f.id = a.file_id
+    LEFT JOIN assignment_sessions ases ON ases.assignment_id = a.id
+    LEFT JOIN test_sessions ts ON ts.id = ases.session_id
+    WHERE a.class_id = ?
+    GROUP BY a.id ORDER BY a.created_at DESC
+  `).all(req.params.id);
+
+  res.json({ ...cls, members, assignments });
+}
+
+/* ── PATCH /api/classes/:id ── rename / update description ─────────────── */
+function updateClass(req, res) {
+  const cls = stmts.getClassOwner.get(req.params.id);
+  if (!cls) return res.status(404).json({ error: 'Not found' });
+  if (req.user.role !== 'admin' && cls.teacher_id !== req.user.id)
+    return res.status(403).json({ error: 'Forbidden' });
+  const { name, description, features, cover_emoji } = req.body;
+  if (name?.trim()) stmts.updateClassName.run(stripTags(name.trim()), cls.id);
+  if (description !== undefined) stmts.updateClassDesc.run(description?.trim() || null, cls.id);
+  if (cover_emoji !== undefined) {
+    const emoji = cover_emoji ? stripTags(String(cover_emoji).trim()).slice(0, 50) : '';
+    db.prepare('UPDATE classes SET cover_emoji = ? WHERE id = ?').run(emoji, cls.id);
+  }
+  if (features !== undefined) stmts.updateClassFeats.run(features !== null ? JSON.stringify(features) : null, cls.id);
+  const updated = stmts.getClassUpdated.get(cls.id);
+  if (updated.features) {
+    try { updated.features = JSON.parse(updated.features); } catch { updated.features = null; }
+  }
+  res.json(updated);
+}
+
+/* ── POST /api/classes/:id/new-code ── regenerate invite code ───────────── */
+function regenerateCode(req, res) {
+  const cls = stmts.getClassOwner.get(req.params.id);
+  if (!cls) return res.status(404).json({ error: 'Not found' });
+  if (req.user.role !== 'admin' && cls.teacher_id !== req.user.id)
+    return res.status(403).json({ error: 'Forbidden' });
+  let code, attempts = 0;
+  while (attempts++ < 10) {
+    code = genCode();
+    if (!stmts.checkCodeExists.get(code)) break;
+    code = null;
+  }
+  if (!code) return res.status(500).json({ error: 'Не удалось сгенерировать уникальный код — попробуйте ещё раз' });
+  stmts.updateClassCode.run(code, cls.id);
+  res.json({ invite_code: code });
+}
+
+/* ── GET /api/classes/:id/journal ── grade matrix for teacher ────────────── */
+function classJournal(req, res) {
+  const cls = stmts.getClassWithName.get(req.params.id);
+  if (!cls) return res.status(404).json({ error: 'Not found' });
+  if (req.user.role !== 'admin' && cls.teacher_id !== req.user.id)
+    return res.status(403).json({ error: 'Forbidden' });
+
+  const members = db.prepare(`
+    SELECT u.id, u.name, u.email FROM class_members cm
+    JOIN users u ON u.id = cm.user_id WHERE cm.class_id = ? ORDER BY u.name
+  `).all(req.params.id);
+
+  const assignments = db.prepare(`
+    SELECT id, title, subject_slug, deadline, is_homework, created_at
+    FROM assignments WHERE class_id = ? AND user_id IS NULL ORDER BY created_at ASC
+  `).all(req.params.id);
+
+  const results = db.prepare(`
+    SELECT ases.user_id, ases.assignment_id,
+           MAX(ts.score) AS score,
+           ts.total,
+           MAX(ROUND(CAST(ts.score AS REAL) / ts.total * 100)) AS percent,
+           MAX(ts.finished_at) AS finished_at
+    FROM assignment_sessions ases
+    JOIN test_sessions ts ON ts.id = ases.session_id AND ts.status = 'completed'
+    JOIN assignments a ON a.id = ases.assignment_id
+    WHERE a.class_id = ? AND a.user_id IS NULL
+    GROUP BY ases.user_id, ases.assignment_id
+  `).all(req.params.id);
+
+  // course progress per student
+  const courses = db.prepare(`
+    SELECT c.id, c.title, c.subject_slug,
+      (SELECT COUNT(*) FROM lessons l WHERE l.course_id = c.id AND l.is_published = 1) AS lesson_count
+    FROM class_courses cc
+    JOIN courses c ON cc.course_id = c.id
+    WHERE cc.class_id = ?
+    ORDER BY cc.assigned_at
+  `).all(req.params.id);
+
+  let courseProgress = [];
+  if (courses.length && members.length) {
+    const cIds = courses.map(c => c.id);
+    const mIds = members.map(m => m.id);
+    const cPh = cIds.map(() => '?').join(',');
+    const mPh = mIds.map(() => '?').join(',');
+    const rows = db.prepare(`
+      SELECT l.course_id, lp.user_id, COUNT(*) AS done_count
+      FROM lesson_progress lp
+      JOIN lessons l ON lp.lesson_id = l.id
+      WHERE l.course_id IN (${cPh}) AND lp.user_id IN (${mPh}) AND lp.completed = 1
+      GROUP BY l.course_id, lp.user_id
+    `).all(...cIds, ...mIds);
+    const doneMap = {};
+    for (const r of rows) doneMap[r.user_id + '_' + r.course_id] = r.done_count;
+    for (const c of courses) {
+      for (const m of members) {
+        const done = doneMap[m.id + '_' + c.id] || 0;
+        courseProgress.push({
+          userId: m.id, courseId: c.id,
+          doneCount: done, totalLessons: c.lesson_count,
+          percent: c.lesson_count > 0 ? Math.round(done / c.lesson_count * 100) : 0,
+        });
+      }
+    }
+  }
+
+  // averages per student — O(n) via Map instead of O(n*m) filter
+  const resultsByUser = new Map();
+  for (const r of results) {
+    if (!resultsByUser.has(r.user_id)) resultsByUser.set(r.user_id, []);
+    resultsByUser.get(r.user_id).push(r);
+  }
+  const studentStats = members.map(m => {
+    const studentResults = resultsByUser.get(m.id) || [];
+    const avgPct = studentResults.length > 0
+      ? Math.round(studentResults.reduce((s, r) => s + r.percent, 0) / studentResults.length)
+      : null;
+    return { userId: m.id, avgPct, completedCount: studentResults.length, totalAssignments: assignments.length };
+  });
+
+  res.json({ className: cls.name, members, assignments, results, courses, courseProgress, studentStats });
+}
+
+/* ── GET /api/classes/:id/journal/csv ── export gradebook as CSV ────────── */
+function classJournalCsv(req, res) {
+  const cls = stmts.getClassWithName.get(req.params.id);
+  if (!cls) return res.status(404).json({ error: 'Not found' });
+  if (req.user.role !== 'admin' && cls.teacher_id !== req.user.id)
+    return res.status(403).json({ error: 'Forbidden' });
+
+  const members = db.prepare(`
+    SELECT u.id, u.name, u.email FROM class_members cm
+    JOIN users u ON u.id = cm.user_id WHERE cm.class_id = ? ORDER BY u.name
+  `).all(req.params.id);
+
+  const assignments = db.prepare(`
+    SELECT id, title FROM assignments WHERE class_id = ? AND user_id IS NULL ORDER BY created_at ASC
+  `).all(req.params.id);
+
+  const results = db.prepare(`
+    SELECT ases.user_id, ases.assignment_id,
+           MAX(ROUND(CAST(ts.score AS REAL) / ts.total * 100)) AS percent
+    FROM assignment_sessions ases
+    JOIN test_sessions ts ON ts.id = ases.session_id AND ts.status = 'completed'
+    JOIN assignments a ON a.id = ases.assignment_id
+    WHERE a.class_id = ? AND a.user_id IS NULL
+    GROUP BY ases.user_id, ases.assignment_id
+  `).all(req.params.id);
+
+  // Build result map
+  const rmap = {};
+  results.forEach(r => { rmap[r.user_id + '_' + r.assignment_id] = r.percent; });
+
+  // CSV header
+  // Protect against CSV formula injection (=, +, @, - at start trigger Excel/Sheets formulas)
+  const csvEsc = s => {
+    const str = String(s || '');
+    const safe = /^[=+@\-]/.test(str) ? `'${str}` : str;
+    return '"' + safe.replace(/"/g, '""') + '"';
+  };
+  const header = ['Ученик', 'Email', ...assignments.map(a => a.title), 'Средний %'];
+  const rows = [header.map(csvEsc).join(',')];
+
+  members.forEach(m => {
+    const scores = assignments.map(a => {
+      const key = m.id + '_' + a.id;
+      return rmap[key] !== undefined ? rmap[key] : '';
+    });
+    const filled = scores.filter(s => s !== '');
+    const avg = filled.length > 0 ? Math.round(filled.reduce((s, v) => s + v, 0) / filled.length) : '';
+    rows.push([csvEsc(m.name), csvEsc(m.email), ...scores, avg].join(','));
+  });
+
+  const bom = '\uFEFF'; // UTF-8 BOM for Excel
+  res.setHeader('Content-Type', 'text/csv; charset=utf-8');
+  res.setHeader('Content-Disposition', `attachment; filename="gradebook-${cls.name.replace(/[^a-zA-Zа-яА-Я0-9]/g, '_')}.csv"`);
+  res.send(bom + rows.join('\n'));
+}
+
+/* ── DELETE /api/classes/:id ──────────────────────────────────────────── */
+function deleteClass(req, res) {
+  const cls = stmts.getClassOwner.get(req.params.id);
+  if (!cls) return res.status(404).json({ error: 'Not found' });
+  if (req.user.role !== 'admin' && cls.teacher_id !== req.user.id)
+    return res.status(403).json({ error: 'Forbidden' });
+  stmts.deleteClass.run(req.params.id);
+  res.json({ ok: true });
+}
+
+/* ── POST /api/classes/join ── student joins by invite code ────────────── */
+function joinClass(req, res) {
+  const { invite_code } = req.body;
+  const cls = stmts.getClassByCode.get(invite_code?.trim().toUpperCase());
+  if (!cls) return res.status(404).json({ error: 'Неверный код приглашения' });
+  try {
+    stmts.insertMember.run(cls.id, req.user.id);
+  } catch (e) {
+    if (e.message.includes('UNIQUE')) return res.status(409).json({ error: 'Вы уже в этом классе' });
+    throw e;
+  }
+  // Notify teacher about new student joining
+  try {
+    const teacher = stmts.getClassTeacherId.get(cls.id);
+    if (teacher) pushNotif(teacher.teacher_id, 'join', `«${req.user.name}» вступил в класс «${cls.name}»`, '/classes');
+  } catch {}
+  try { onClassJoined(req.user.id); } catch {}
+  res.json({ ok: true, class_name: cls.name });
+}
+
+/* ── GET /api/classes/students ── list students in teacher's classes ─ */
+function listStudents(req, res) {
+  if (req.user.role === 'admin') {
+    const rows = db.prepare(
+      "SELECT id, name, email FROM users WHERE role IN ('student','free_student') ORDER BY name"
+    ).all();
+    return res.json(rows);
+  }
+  // Teacher: only students in their classes
+  const rows = db.prepare(`
+    SELECT DISTINCT u.id, u.name, u.email FROM users u
+    JOIN class_members cm ON cm.user_id = u.id
+    JOIN classes c ON c.id = cm.class_id
+    WHERE c.teacher_id = ? AND u.role IN ('student','free_student')
+    ORDER BY u.name
+  `).all(req.user.id);
+  res.json(rows);
+}
+
+/* ── POST /api/classes/:id/members ── admin/teacher adds student by email or id ─ */
+function addMember(req, res) {
+  const cls = stmts.getClassOwner.get(req.params.id);
+  if (!cls) return res.status(404).json({ error: 'Class not found' });
+  if (req.user.role !== 'admin' && cls.teacher_id !== req.user.id)
+    return res.status(403).json({ error: 'Forbidden' });
+
+  const { email, user_id } = req.body;
+  let student;
+  if (user_id) {
+    student = stmts.getStudentById.get(Number(user_id));
+    if (!student) return res.status(404).json({ error: 'Ученик не найден' });
+  } else {
+    if (!email?.trim()) return res.status(400).json({ error: 'email required' });
+    student = stmts.getStudentByEmail.get(email.trim().toLowerCase());
+    if (!student) return res.status(404).json({ error: 'Ученик с таким email не найден' });
+  }
+
+  try {
+    stmts.insertMember.run(cls.id, student.id);
+  } catch (e) {
+    if (e.message.includes('UNIQUE')) return res.status(409).json({ error: 'Ученик уже в этом классе' });
+    throw e;
+  }
+  res.json({ ok: true, name: student.name });
+}
+
+/* ── DELETE /api/classes/:id/members/:uid ── kick ─────────────────────── */
+function kickMember(req, res) {
+  const cls = stmts.getClassOwner.get(req.params.id);
+  if (!cls) return res.status(404).json({ error: 'Not found' });
+  if (req.user.role !== 'admin' && cls.teacher_id !== req.user.id)
+    return res.status(403).json({ error: 'Forbidden' });
+  stmts.deleteMember.run(req.params.id, req.params.uid);
+  res.json({ ok: true });
+}
+
+/* ── GET /api/classes/my ── student's enrolled classes ─────────────────── */
+function myClasses(req, res) {
+  const classes = db.prepare(`
+    SELECT c.id, c.name, c.description, u.name AS teacher_name,
+           COUNT(DISTINCT a.id) AS assignment_count
+    FROM class_members cm
+    JOIN classes c ON c.id = cm.class_id
+    JOIN users u ON u.id = c.teacher_id
+    LEFT JOIN assignments a ON a.class_id = c.id
+    WHERE cm.user_id = ?
+    GROUP BY c.id ORDER BY cm.joined_at DESC
+  `).all(req.user.id);
+  res.json(classes);
+}
+
+/* ── GET /api/classes/:id/announcements ─────────────────────────────────── */
+function getAnnouncements(req, res) {
+  const announcements = db.prepare(`
+    SELECT a.id, a.text, a.created_at, u.name AS author_name
+    FROM announcements a
+    JOIN users u ON u.id = a.author_id
+    WHERE a.class_id = ?
+    ORDER BY a.created_at DESC LIMIT 50
+  `).all(req.params.id);
+  res.json(announcements);
+}
+
+/* ── POST /api/classes/:id/announcements ────────────────────────────────── */
+function createAnnouncement(req, res) {
+  const text = stripTags(req.body.text || '');
+  if (!text) return res.status(400).json({ error: 'text required' });
+  if (text.length > 4000) return res.status(400).json({ error: 'text too long (max 4000 chars)' });
+  const cls = stmts.getClassWithName.get(req.params.id);
+  if (!cls) return res.status(404).json({ error: 'Not found' });
+  if (req.user.role !== 'admin' && cls.teacher_id !== req.user.id)
+    return res.status(403).json({ error: 'Forbidden' });
+
+  const r = stmts.insertAnnouncement.run(req.params.id, req.user.id, text);
+
+  const members = stmts.getClassMembers.all(req.params.id);
+  const preview = text.slice(0, 80) + (text.length > 80 ? '…' : '');
+  const batchNotif = db.transaction(() => {
+    for (const m of members) {
+      pushNotif(m.user_id, 'announcement', `Объявление в «${cls.name}»: ${preview}`, '/classes');
+    }
+  });
+  batchNotif();
+  res.status(201).json({ id: r.lastInsertRowid });
+}
+
+/* ── GET /api/classes/:id/feed ── class board (students + teacher) ──────── */
+function classFeed(req, res) {
+  const { role, id: uid } = req.user;
+  const classId = req.params.id;
+
+  const cls = stmts.getClassWithName.get(classId);
+  if (!cls) return res.status(404).json({ error: 'Not found' });
+
+  const isTeacherOrAdmin = role === 'admin' || cls.teacher_id === uid;
+  if (!isTeacherOrAdmin) {
+    const member = stmts.getMemberCheck.get(classId, uid);
+    if (!member) return res.status(403).json({ error: 'Forbidden' });
+  }
+
+  const assignments = db.prepare(`
+    SELECT a.id, a.title, a.subject_slug, a.mode, a.deadline, a.created_at, a.is_homework,
+           a.max_attempts,
+           f.title AS file_title,
+           COUNT(DISTINCT cm.user_id) AS total_members,
+           COUNT(DISTINCT CASE WHEN ts.status = 'completed' THEN ases.user_id END) AS done_count
+    FROM assignments a
+    LEFT JOIN files f ON f.id = a.file_id
+    LEFT JOIN class_members cm ON cm.class_id = a.class_id
+    LEFT JOIN assignment_sessions ases ON ases.assignment_id = a.id
+    LEFT JOIN test_sessions ts ON ts.id = ases.session_id
+    WHERE a.class_id = ?
+    GROUP BY a.id
+    ORDER BY a.created_at DESC LIMIT 20
+  `).all(classId);
+
+  if (!isTeacherOrAdmin && assignments.length) {
+    const aIds = assignments.map(a => a.id);
+    const ph = aIds.map(() => '?').join(',');
+
+    // Latest session per assignment
+    const latest = db.prepare(`
+      SELECT ases.assignment_id, ts.score, ts.total, ts.status
+      FROM assignment_sessions ases
+      JOIN test_sessions ts ON ts.id = ases.session_id
+      WHERE ases.assignment_id IN (${ph}) AND ases.user_id = ?
+        AND ases.id = (SELECT MAX(a2.id) FROM assignment_sessions a2
+                       WHERE a2.assignment_id = ases.assignment_id AND a2.user_id = ases.user_id)
+    `).all(...aIds, uid);
+    const latestMap = {};
+    for (const r of latest) latestMap[r.assignment_id] = r;
+
+    // Completed attempts count per assignment
+    const attempts = db.prepare(`
+      SELECT ases.assignment_id, COUNT(*) AS n
+      FROM assignment_sessions ases
+      JOIN test_sessions ts ON ts.id = ases.session_id AND ts.status = 'completed'
+      WHERE ases.assignment_id IN (${ph}) AND ases.user_id = ?
+      GROUP BY ases.assignment_id
+    `).all(...aIds, uid);
+    const attemptsMap = {};
+    for (const r of attempts) attemptsMap[r.assignment_id] = r.n;
+
+    for (const a of assignments) {
+      const ses = latestMap[a.id];
+      a.my_status = ses ? ses.status : null;
+      a.my_score  = ses?.score ?? null;
+      a.my_total  = ses?.total ?? null;
+      a.attempts_used = attemptsMap[a.id] || 0;
+    }
+  }
+
+  const announcements = db.prepare(`
+    SELECT a.id, a.text, a.created_at, u.name AS author_name
+    FROM announcements a
+    JOIN users u ON u.id = a.author_id
+    WHERE a.class_id = ?
+    ORDER BY a.created_at DESC LIMIT 20
+  `).all(classId);
+
+  const activity = db.prepare(`
+    SELECT u.name AS student_name, a.title AS assignment_title,
+           ts.score, ts.total, ts.finished_at AS completed_at
+    FROM test_sessions ts
+    JOIN assignment_sessions ases ON ases.session_id = ts.id
+    JOIN assignments a ON a.id = ases.assignment_id
+    JOIN users u ON u.id = ts.user_id
+    WHERE a.class_id = ? AND ts.status = 'completed'
+    ORDER BY ts.finished_at DESC LIMIT 15
+  `).all(classId);
+
+  res.json({ class: cls, assignments, announcements, activity });
+}
+
+/* ── DELETE /api/classes/:id/announcements/:aid ─────────────────────────── */
+function deleteAnnouncement(req, res) {
+  const cls = stmts.getClassOwner.get(req.params.id);
+  if (!cls) return res.status(404).json({ error: 'Not found' });
+  if (req.user.role !== 'admin' && cls.teacher_id !== req.user.id)
+    return res.status(403).json({ error: 'Forbidden' });
+  stmts.deleteAnnouncement.run(req.params.aid, req.params.id);
+  res.json({ ok: true });
+}
+
+module.exports = {
+  listClasses, createClass, getClass, deleteClass,
+  joinClass, kickMember, addMember, myClasses, listStudents,
+  getAnnouncements, createAnnouncement, deleteAnnouncement, classFeed,
+  updateClass, regenerateCode, classJournal, classJournalCsv,
+};
diff --git a/backend/src/controllers/classroomController.js b/backend/src/controllers/classroomController.js
new file mode 100644
index 0000000..6ec38c2
--- /dev/null
+++ b/backend/src/controllers/classroomController.js
@@ -0,0 +1,998 @@
+const db   = require('../db/db');
+const path = require('path');
+const fs   = require('fs');
+const { emit, emitToClass, getOnlineUserIds } = require('../sse');
+
+/* ── chat attachment uploads dir ─────────────────────────────────────── */
+const CHAT_UPLOADS_DIR = path.join(__dirname, '../../uploads/chat');
+if (!fs.existsSync(CHAT_UPLOADS_DIR)) fs.mkdirSync(CHAT_UPLOADS_DIR, { recursive: true });
+
+/* ── Draw permissions persisted in DB ─────────────────────────────────── */
+function canDraw(sessionId, userId, session) {
+  if (session.teacher_id === userId) return true;
+  return !!db.prepare(
+    'SELECT 1 FROM classroom_draw_permissions WHERE session_id=? AND user_id=?'
+  ).get(sessionId, userId);
+}
+
+/* ── 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);
+  if (!session) return;
+
+  if (session.class_id) {
+    emitToClass(session.class_id, data);
+    emit(session.teacher_id, data); // teacher is not in class_members — emit separately
+  } else {
+    // personal session — emit to teacher + each invited user
+    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);
+  }
+}
+
+/* ── Helper: check if user has access to session ──────────────────────── */
+function hasAccess(session, userId, userRole) {
+  if (userRole === 'admin') return true;
+  if (session.teacher_id === userId) return true;
+
+  if (session.class_id) {
+    return !!db.prepare('SELECT 1 FROM class_members WHERE class_id=? AND user_id=?')
+      .get(session.class_id, userId);
+  } else {
+    return !!db.prepare('SELECT 1 FROM classroom_invites WHERE session_id=? AND user_id=?')
+      .get(session.id, userId);
+  }
+}
+
+/* POST /api/classroom — teacher creates session */
+function createSession(req, res) {
+  const { class_id, user_ids, title = '' } = req.body;
+  const teacher = req.user;
+
+  if (!class_id && (!user_ids || !user_ids.length)) {
+    return res.status(400).json({ error: 'Укажите class_id или user_ids' });
+  }
+
+  if (class_id) {
+    // verify teacher owns class
+    const cls = teacher.role === 'admin'
+      ? db.prepare('SELECT id, name FROM classes WHERE id=?').get(class_id)
+      : db.prepare('SELECT id, name FROM classes WHERE id=? AND teacher_id=?').get(class_id, teacher.id);
+    if (!cls) return res.status(403).json({ error: 'Нет доступа к классу' });
+
+    // end any active session for this class
+    db.prepare(`UPDATE classroom_sessions SET status='ended', ended_at=datetime('now')
+                WHERE class_id=? AND status='active'`).run(class_id);
+  }
+
+  const { lastInsertRowid } = db.prepare(
+    `INSERT INTO classroom_sessions (class_id, teacher_id, title) VALUES (?,?,?)`
+  ).run(class_id || null, teacher.id, title);
+
+  const sessionId = Number(lastInsertRowid);
+
+  // create first page
+  db.prepare('INSERT INTO classroom_pages (session_id, page_num) VALUES (?,1)').run(sessionId);
+
+  // for personal sessions — save invites
+  if (!class_id && user_ids) {
+    const ins = db.prepare('INSERT OR IGNORE INTO classroom_invites (session_id, user_id) VALUES (?,?)');
+    for (const uid of user_ids) ins.run(sessionId, uid);
+  }
+
+  const session = db.prepare('SELECT * FROM classroom_sessions WHERE id=?').get(sessionId);
+
+  emitToSession(sessionId, {
+    type: 'classroom_started',
+    sessionId,
+    title,
+    classId: class_id || null,
+    teacherName: teacher.name,
+  });
+
+  res.json(session);
+}
+
+/* GET /api/classroom/:id */
+function getSession(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 pageCount = db.prepare('SELECT COUNT(*) AS c FROM classroom_pages WHERE session_id=?')
+    .get(sessionId).c;
+
+  const attendance = db.prepare(`
+    SELECT a.user_id, u.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);
+
+  const drawAllowed = canDraw(sessionId, req.user.id, session);
+  res.json({ ...session, pageCount, attendance, canDraw: drawAllowed });
+}
+
+/* DELETE /api/classroom/:id */
+function endSession(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: 'Нет доступа' });
+
+  db.prepare(`UPDATE classroom_sessions SET status='ended', ended_at=datetime('now') WHERE id=?`)
+    .run(sessionId);
+
+  _raisedHands.delete(sessionId);
+  db.prepare('DELETE FROM classroom_draw_permissions WHERE session_id=?').run(sessionId);
+  emitToSession(sessionId, { type: 'classroom_ended', sessionId });
+  res.json({ ok: true });
+}
+
+/* GET /api/classroom/class/:classId/active */
+function getActiveSession(req, res) {
+  const classId = Number(req.params.classId);
+
+  if (req.user.role !== 'teacher' && req.user.role !== 'admin') {
+    const isMember = db.prepare('SELECT 1 FROM class_members WHERE class_id=? AND user_id=?')
+      .get(classId, req.user.id);
+    if (!isMember) return res.status(403).json({ error: 'Нет доступа' });
+  }
+
+  const session = db.prepare(
+    `SELECT * FROM classroom_sessions WHERE class_id=? AND status='active' ORDER BY id DESC LIMIT 1`
+  ).get(classId);
+
+  if (!session) return res.json({ active: false });
+  res.json({ active: true, session });
+}
+
+/* GET /api/classroom/my/active — personal sessions for current user */
+function getMyActive(req, res) {
+  const userId = req.user.id;
+
+  const sessions = db.prepare(`
+    SELECT s.* FROM classroom_sessions s
+    JOIN classroom_invites i ON i.session_id = s.id
+    WHERE i.user_id=? AND s.status='active'
+    ORDER BY s.id DESC
+  `).all(userId);
+
+  res.json({ sessions });
+}
+
+/* POST /api/classroom/:id/join */
+function joinSession(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 (!hasAccess(session, req.user.id, req.user.role))
+    return res.status(403).json({ error: 'Нет доступа' });
+
+  db.prepare(`
+    INSERT INTO classroom_attendance (session_id, user_id)
+    VALUES (?,?)
+    ON CONFLICT(session_id, user_id) DO UPDATE SET joined_at=datetime('now'), left_at=NULL
+  `).run(sessionId, req.user.id);
+
+  emitToSession(sessionId, {
+    type: 'classroom_user_joined',
+    sessionId,
+    userId: req.user.id,
+    userName: req.user.name,
+  });
+
+  // If this user already has draw permission (e.g. they rejoined after a page refresh), notify them
+  const drawAllowed = canDraw(sessionId, req.user.id, session) && session.teacher_id !== req.user.id;
+  if (drawAllowed) {
+    emit(req.user.id, { type: 'classroom_draw_permitted', sessionId });
+  }
+
+  res.json({ ok: true, canDraw: drawAllowed });
+}
+
+/* POST /api/classroom/:id/leave */
+function leaveSession(req, res) {
+  const sessionId = Number(req.params.id);
+  db.prepare(`UPDATE classroom_attendance SET left_at=datetime('now')
+              WHERE session_id=? AND user_id=? AND left_at IS NULL`)
+    .run(sessionId, req.user.id);
+
+  const session = db.prepare('SELECT * FROM classroom_sessions WHERE id=?').get(sessionId);
+  if (session) {
+    emitToSession(sessionId, {
+      type: 'classroom_user_left',
+      sessionId,
+      userId: req.user.id,
+    });
+  }
+
+  res.json({ ok: true });
+}
+
+/* POST /api/classroom/:id/chat */
+function sendChat(req, res) {
+  const sessionId = Number(req.params.id);
+  const { message = '', attachment_url, attachment_type } = req.body;
+  const text = message.trim().slice(0, 2000);
+  if (!text && !attachment_url) return res.status(400).json({ error: 'Пустое сообщение' });
+
+  const session = db.prepare(`SELECT * FROM classroom_sessions WHERE id=? AND status='active'`).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 { lastInsertRowid } = db.prepare(
+    'INSERT INTO classroom_chat (session_id, user_id, message, attachment_url, attachment_type) VALUES (?,?,?,?,?)'
+  ).run(sessionId, req.user.id, text, attachment_url || null, attachment_type || null);
+
+  const row = db.prepare('SELECT * FROM classroom_chat WHERE id=?').get(lastInsertRowid);
+
+  emitToSession(sessionId, {
+    type: 'classroom_chat',
+    sessionId,
+    id: row.id,
+    userId: req.user.id,
+    userName: req.user.name,
+    message: text,
+    createdAt: row.created_at,
+    attachmentUrl:  row.attachment_url  || null,
+    attachmentType: row.attachment_type || null,
+  });
+
+  res.json(row);
+}
+
+/* GET /api/classroom/:id/chat */
+function getChat(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 sinceId = Number(req.query.since_id) || 0;
+  const messages = sinceId
+    ? db.prepare(`
+        SELECT c.*, u.name AS user_name
+        FROM classroom_chat c
+        JOIN users u ON u.id = c.user_id
+        WHERE c.session_id=? AND c.id > ?
+        ORDER BY c.id ASC LIMIT 100
+      `).all(sessionId, sinceId)
+    : db.prepare(`
+        SELECT c.*, u.name AS user_name
+        FROM classroom_chat c
+        JOIN users u ON u.id = c.user_id
+        WHERE c.session_id=?
+        ORDER BY c.id DESC LIMIT 200
+      `).all(sessionId).reverse();
+
+  // Attach reactions to each message
+  if (messages.length > 0) {
+    const ids = messages.map(m => m.id);
+    const reactions = db.prepare(
+      `SELECT chat_id, reaction, COUNT(*) AS cnt,
+              GROUP_CONCAT(user_id) AS uids
+       FROM classroom_chat_reactions
+       WHERE chat_id IN (${ids.map(() => '?').join(',')})
+       GROUP BY chat_id, reaction`
+    ).all(...ids);
+    const rmap = {};
+    reactions.forEach(r => {
+      if (!rmap[r.chat_id]) rmap[r.chat_id] = {};
+      rmap[r.chat_id][r.reaction] = {
+        count: r.cnt,
+        mine: (r.uids || '').split(',').includes(String(req.user.id)),
+      };
+    });
+    messages.forEach(m => {
+      m.reactions = rmap[m.id] || {};
+    });
+  }
+
+  res.json({ messages });
+}
+
+/* GET /api/classroom/:id/participants — active participants (for all session members) */
+function getParticipants(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 participants = db.prepare(`
+    SELECT a.user_id, u.name, a.joined_at
+    FROM classroom_attendance a
+    JOIN users u ON u.id = a.user_id
+    WHERE a.session_id=? AND a.left_at IS NULL
+    ORDER BY a.joined_at
+  `).all(sessionId);
+
+  res.json({ participants });
+}
+
+/* GET /api/classroom/:id/attendance */
+function getAttendance(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 attendance = db.prepare(`
+    SELECT a.*, u.name AS user_name
+    FROM classroom_attendance a
+    JOIN users u ON u.id = a.user_id
+    WHERE a.session_id=? ORDER BY a.joined_at
+  `).all(sessionId);
+
+  res.json({ attendance });
+}
+
+/* POST /api/classroom/:id/signal — WebRTC signaling relay */
+function signal(req, res) {
+  const sessionId = Number(req.params.id);
+  const { target_user_id, payload } = req.body;
+  if (!target_user_id || !payload) return res.status(400).json({ error: 'target_user_id и payload обязательны' });
+
+  const session = db.prepare(`SELECT * FROM classroom_sessions WHERE id=? AND status='active'`).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: 'Нет доступа' });
+
+  emit(target_user_id, {
+    type: 'classroom_signal',
+    sessionId,
+    from: req.user.id,
+    payload,
+  });
+
+  res.json({ ok: true });
+}
+
+/* GET /api/classroom/my/session — active session for current user (teacher or student) */
+function getMySession(req, res) {
+  const userId = req.user.id;
+  const role   = req.user.role;
+
+  let session = null;
+
+  if (role === 'teacher' || role === 'admin') {
+    session = db.prepare(
+      `SELECT * FROM classroom_sessions WHERE teacher_id=? AND status='active' ORDER BY id DESC LIMIT 1`
+    ).get(userId);
+  } else {
+    // Class-based session: student is a member of a class that has an active session
+    session = db.prepare(`
+      SELECT cs.* FROM classroom_sessions cs
+      JOIN class_members cm ON cm.class_id = cs.class_id
+      WHERE cm.user_id=? AND cs.status='active'
+      ORDER BY cs.id DESC LIMIT 1
+    `).get(userId);
+
+    // Personal session: student was invited
+    if (!session) {
+      session = db.prepare(`
+        SELECT cs.* FROM classroom_sessions cs
+        JOIN classroom_invites ci ON ci.session_id = cs.id
+        WHERE ci.user_id=? AND cs.status='active'
+        ORDER BY cs.id DESC LIMIT 1
+      `).get(userId);
+    }
+  }
+
+  if (!session) return res.json({ session: null });
+
+  const pageCount = db.prepare('SELECT COUNT(*) AS c FROM classroom_pages WHERE session_id=?')
+    .get(session.id).c;
+
+  const attendance = db.prepare(`
+    SELECT a.user_id, u.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(session.id);
+
+  // Did this user join before (even if they later left)?
+  const wasJoined = attendance.some(a => a.user_id === userId);
+
+  res.json({ session: { ...session, pageCount, attendance }, wasJoined });
+}
+
+/* GET /api/classroom/online-students — list of students currently online (SSE connected) */
+function getOnlineStudents(req, res) {
+  const onlineIds = getOnlineUserIds();
+  if (!onlineIds.length) return res.json({ students: [] });
+
+  const placeholders = onlineIds.map(() => '?').join(',');
+  const students = db.prepare(
+    `SELECT id, name, email FROM users
+     WHERE id IN (${placeholders}) AND role IN ('student','free_student')
+     ORDER BY name`
+  ).all(...onlineIds);
+
+  res.json({ students });
+}
+
+/* ── In-memory raised hands: sessionId -> Set<userId> ─────────────────── */
+const _raisedHands = new Map();
+
+/* POST /api/classroom/:id/pages — add a page */
+function addPage(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 maxFromStrokes = db.prepare(
+    'SELECT COALESCE(MAX(page_num), 1) AS m FROM classroom_strokes WHERE session_id=?'
+  ).get(sessionId).m;
+  const maxFromPages = db.prepare(
+    'SELECT COALESCE(MAX(page_num), 1) AS m FROM classroom_pages WHERE session_id=?'
+  ).get(sessionId).m;
+  const newPage = Math.max(session.current_page, maxFromStrokes, maxFromPages) + 1;
+  const template = req.body?.template || 'blank';
+
+  db.prepare('INSERT OR IGNORE INTO classroom_pages (session_id, page_num, template) VALUES (?,?,?)').run(sessionId, newPage, template);
+  db.prepare('UPDATE classroom_sessions SET current_page=? WHERE id=?').run(newPage, sessionId);
+
+  emitToSession(sessionId, { type: 'classroom_page_added', sessionId, pageNum: newPage, template });
+  res.json({ pageNum: newPage, template });
+}
+
+/* PUT /api/classroom/:id/page — change current page */
+function changePage(req, res) {
+  const sessionId = Number(req.params.id);
+  const { page_num } = req.body;
+  if (!page_num) return res.status(400).json({ error: 'page_num required' });
+
+  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('UPDATE classroom_sessions SET current_page=? WHERE id=?').run(page_num, sessionId);
+  emitToSession(sessionId, { type: 'classroom_page_changed', sessionId, pageNum: Number(page_num) });
+  res.json({ pageNum: Number(page_num) });
+}
+
+/* PATCH /api/classroom/:id/page-template — update template for current page */
+function updatePageTemplate(req, res) {
+  const sessionId = Number(req.params.id);
+  const { template } = req.body;
+  if (!template) return res.status(400).json({ error: 'template required' });
+  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('UPDATE classroom_pages SET template=? WHERE session_id=? AND page_num=?')
+    .run(template, sessionId, session.current_page);
+  emitToSession(sessionId, { type: 'classroom_template_changed', sessionId, pageNum: session.current_page, template });
+  res.json({ ok: true, template });
+}
+
+/* POST /api/classroom/:id/hand — raise hand */
+function raiseHand(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 (!hasAccess(session, req.user.id, req.user.role))
+    return res.status(403).json({ error: 'Нет доступа' });
+
+  if (!_raisedHands.has(sessionId)) _raisedHands.set(sessionId, new Map());
+  _raisedHands.get(sessionId).set(req.user.id, req.user.name);
+
+  emitToSession(sessionId, {
+    type: 'classroom_hand_raised',
+    sessionId,
+    userId: req.user.id,
+    userName: req.user.name,
+  });
+  res.json({ ok: true });
+}
+
+/* DELETE /api/classroom/:id/hand — lower hand */
+function lowerHand(req, res) {
+  const sessionId = Number(req.params.id);
+  const session = db.prepare(`SELECT * FROM classroom_sessions WHERE id=?`).get(sessionId);
+  const map = _raisedHands.get(sessionId);
+  if (map) map.delete(req.user.id);
+
+  if (session) {
+    emitToSession(sessionId, { type: 'classroom_hand_lowered', sessionId, userId: req.user.id });
+  }
+  res.json({ ok: true });
+}
+
+/* GET /api/classroom/:id/hands — get current raised hands */
+function getHands(req, res) {
+  const sessionId = Number(req.params.id);
+  const map = _raisedHands.get(sessionId);
+  const hands = map ? [...map.entries()].map(([userId, userName]) => ({ userId, userName })) : [];
+  res.json({ hands });
+}
+
+/* POST /api/classroom/:id/strokes — teacher saves batch of strokes */
+function postStrokes(req, res) {
+  const sessionId = Number(req.params.id);
+  const { strokes, page_num = 1 } = req.body;
+  if (!Array.isArray(strokes) || !strokes.length)
+    return res.status(400).json({ error: 'strokes array required' });
+
+  const session = db.prepare(`SELECT * FROM classroom_sessions WHERE id=? AND status='active'`).get(sessionId);
+  if (!session) return res.status(404).json({ error: 'Сессия не активна' });
+  if (!canDraw(sessionId, req.user.id, session) && req.user.role !== 'admin')
+    return res.status(403).json({ error: 'Нет доступа' });
+
+  // Get current max seq for this session+page
+  const maxSeq = db.prepare(
+    'SELECT COALESCE(MAX(seq), 0) AS m FROM classroom_strokes WHERE session_id=? AND page_num=?'
+  ).get(sessionId, page_num).m;
+
+  const insert = db.prepare(
+    'INSERT INTO classroom_strokes (session_id, page_num, user_id, tool, data, seq) VALUES (?,?,?,?,?,?)'
+  );
+
+  const saved = [];
+  let seq = maxSeq;
+  const insertMany = db.transaction(() => {
+    for (const s of strokes) {
+      seq++;
+      const { lastInsertRowid } = insert.run(sessionId, page_num, req.user.id, s.tool || 'pencil', JSON.stringify(s.data), seq);
+      saved.push({ id: Number(lastInsertRowid), tool: s.tool || 'pencil', data: s.data, seq });
+    }
+  });
+  insertMany();
+
+  emitToSession(sessionId, {
+    type: 'classroom_strokes',
+    sessionId,
+    pageNum: page_num,
+    strokes: saved,
+    userId: req.user.id,
+  });
+
+  res.json({ strokes: saved });
+}
+
+/* GET /api/classroom/:id/strokes?page_num=1&since_seq=N — load strokes for a page */
+function getStrokes(req, res) {
+  const sessionId = Number(req.params.id);
+  const pageNum   = Number(req.query.page_num) || 1;
+  const sinceSeq  = req.query.since_seq !== undefined ? Number(req.query.since_seq) : -1;
+  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 rows = sinceSeq >= 0
+    ? db.prepare('SELECT id, tool, data, seq FROM classroom_strokes WHERE session_id=? AND page_num=? AND seq > ? ORDER BY seq').all(sessionId, pageNum, sinceSeq)
+    : db.prepare('SELECT id, tool, data, seq FROM classroom_strokes WHERE session_id=? AND page_num=? ORDER BY seq').all(sessionId, pageNum);
+
+  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 template = pageRow?.template || 'blank';
+
+  res.json({ strokes, template });
+}
+
+/* PATCH /api/classroom/:id/strokes/:strokeId — update image position/size */
+function updateStroke(req, res) {
+  const sessionId = Number(req.params.id);
+  const strokeId  = Number(req.params.strokeId);
+  const { data }  = req.body;
+  if (!data) return res.status(400).json({ error: 'data required' });
+
+  const session = db.prepare(`SELECT * FROM classroom_sessions WHERE id=? AND status='active'`).get(sessionId);
+  if (!session) return res.status(404).json({ error: 'Сессия не активна' });
+  if (!canDraw(sessionId, req.user.id, session) && req.user.role !== 'admin')
+    return res.status(403).json({ error: 'Нет доступа' });
+
+  const existing = db.prepare('SELECT id, page_num FROM classroom_strokes WHERE id=? AND session_id=?').get(strokeId, sessionId);
+  if (!existing) return res.status(404).json({ error: 'Штрих не найден' });
+
+  db.prepare('UPDATE classroom_strokes SET data=? WHERE id=?').run(JSON.stringify(data), strokeId);
+
+  emitToSession(sessionId, {
+    type: 'classroom_stroke_updated',
+    sessionId,
+    strokeId,
+    pageNum: existing.page_num,
+    data,
+  });
+  res.json({ ok: true });
+}
+
+/* DELETE /api/classroom/:id/strokes/:strokeId — undo a stroke */
+function deleteStroke(req, res) {
+  const sessionId = Number(req.params.id);
+  const strokeId  = Number(req.params.strokeId);
+  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 stroke = db.prepare('SELECT page_num FROM classroom_strokes WHERE id=? AND session_id=?').get(strokeId, sessionId);
+  if (!stroke) return res.status(404).json({ error: 'Штрих не найден' });
+
+  db.prepare('DELETE FROM classroom_strokes WHERE id=?').run(strokeId);
+
+  emitToSession(sessionId, {
+    type: 'classroom_stroke_deleted',
+    sessionId,
+    strokeId,
+    pageNum: stroke.page_num,
+  });
+
+  res.json({ ok: true });
+}
+
+/* POST /api/classroom/:id/clear-page — teacher clears all strokes on a page */
+function clearPage(req, res) {
+  const sessionId = Number(req.params.id);
+  const { page_num = 1 } = 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('DELETE FROM classroom_strokes WHERE session_id=? AND page_num=?').run(sessionId, page_num);
+  emitToSession(sessionId, { type: 'classroom_page_cleared', sessionId, pageNum: Number(page_num) });
+  res.json({ ok: true });
+}
+
+/* POST /api/classroom/:id/mute — teacher mutes a student */
+function mutePeer(req, res) {
+  const sessionId = Number(req.params.id);
+  const { user_id } = req.body;
+  if (!user_id) return res.status(400).json({ error: 'user_id required' });
+
+  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: 'Нет доступа' });
+
+  emit(user_id, { type: 'classroom_muted', sessionId, by: req.user.id });
+  res.json({ ok: true });
+}
+
+/* POST /api/classroom/:id/stroke-preview — broadcast live drawing state (not saved to DB) */
+function previewStroke(req, res) {
+  const sessionId = Number(req.params.id);
+  const { live_id, tool, data, page_num = 1, cancel } = req.body;
+  if (!live_id) return res.status(400).json({ error: 'live_id required' });
+
+  const session = db.prepare(`SELECT * FROM classroom_sessions WHERE id=? AND status='active'`).get(sessionId);
+  if (!session) return res.status(404).json({ error: 'Сессия не активна' });
+  if (!canDraw(sessionId, req.user.id, session) && req.user.role !== 'admin')
+    return res.status(403).json({ error: 'Нет доступа' });
+
+  const payload = {
+    type: 'classroom_stroke_preview',
+    sessionId,
+    pageNum: Number(page_num),
+    liveId: live_id,
+    tool,
+    data,
+    cancel: cancel || false,
+    userId: req.user.id,
+    userName: req.user.name || req.user.email,
+  };
+  emitToSession(sessionId, payload);
+  res.json({ ok: true });
+}
+
+/* POST /api/classroom/:id/chat/:msgId/pin — teacher pins a message */
+function pinMessage(req, res) {
+  const sessionId = Number(req.params.id);
+  const msgId     = Number(req.params.msgId);
+  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 msg = db.prepare('SELECT * FROM classroom_chat WHERE id=? AND session_id=?').get(msgId, sessionId);
+  if (!msg) return res.status(404).json({ error: 'Сообщение не найдено' });
+
+  // Toggle pin
+  const newPinned = msg.pinned ? 0 : 1;
+  db.prepare('UPDATE classroom_chat SET pinned=? WHERE id=?').run(newPinned, msgId);
+
+  emitToSession(sessionId, {
+    type: 'classroom_message_pinned',
+    sessionId, msgId, pinned: !!newPinned,
+    message: msg.message,
+  });
+  res.json({ ok: true, pinned: !!newPinned });
+}
+
+/* POST /api/classroom/:id/allow-draw/:userId — teacher grants draw permission */
+function allowDraw(req, res) {
+  const sessionId = Number(req.params.id);
+  const targetId  = Number(req.params.userId);
+  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_draw_permissions (session_id, user_id) VALUES (?,?)'
+  ).run(sessionId, targetId);
+
+  emit(targetId, { type: 'classroom_draw_permitted', sessionId });
+  res.json({ ok: true });
+}
+
+/* DELETE /api/classroom/:id/allow-draw/:userId — teacher revokes draw permission */
+function revokeDraw(req, res) {
+  const sessionId = Number(req.params.id);
+  const targetId  = Number(req.params.userId);
+  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(
+    'DELETE FROM classroom_draw_permissions WHERE session_id=? AND user_id=?'
+  ).run(sessionId, targetId);
+
+  emit(targetId, { type: 'classroom_draw_revoked', sessionId });
+  res.json({ ok: true });
+}
+
+/* POST /api/classroom/:id/cursor — teacher broadcasts cursor position */
+function broadcastCursor(req, res) {
+  const sessionId = Number(req.params.id);
+  const { x, y, page_num = 1 } = 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 (!hasAccess(session, req.user.id, req.user.role))
+    return res.status(403).json({ error: 'Нет доступа' });
+
+  emitToSession(sessionId, {
+    type: 'classroom_cursor', sessionId,
+    x, y, pageNum: Number(page_num),
+    userId: req.user.id,
+    userName: req.user.name || req.user.email,
+  });
+  res.json({ ok: true });
+}
+
+/* POST /api/classroom/:id/screen — teacher announces screen share start */
+function screenStart(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_screen_started', sessionId });
+  res.json({ ok: true });
+}
+
+/* DELETE /api/classroom/:id/screen — teacher announces screen share stop */
+function screenStop(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_screen_stopped', sessionId });
+  res.json({ ok: true });
+}
+
+/* ── Chat: upload image attachment ──────────────────────────────────────── */
+function uploadChatAttachment(req, res) {
+  if (!req.file) return res.status(400).json({ error: 'Файл не получен' });
+  const url  = `/uploads/chat/${req.file.filename}`;
+  const type = req.file.mimetype.startsWith('image/') ? 'image' : 'file';
+  res.json({ url, type, name: req.file.originalname });
+}
+
+/* ── Chat: toggle reaction ───────────────────────────────────────────────── */
+const ALLOWED_REACTIONS = ['like', 'heart', 'question', 'idea', 'wow'];
+function reactToMessage(req, res) {
+  const chatId   = Number(req.params.msgId);
+  const { reaction } = req.body;
+  if (!ALLOWED_REACTIONS.includes(reaction))
+    return res.status(400).json({ error: 'Неизвестная реакция' });
+
+  const msg = db.prepare('SELECT * FROM classroom_chat WHERE id=?').get(chatId);
+  if (!msg) return res.status(404).json({ error: 'Сообщение не найдено' });
+
+  const existing = db.prepare(
+    'SELECT id FROM classroom_chat_reactions WHERE chat_id=? AND user_id=? AND reaction=?'
+  ).get(chatId, req.user.id, reaction);
+
+  let added;
+  if (existing) {
+    db.prepare('DELETE FROM classroom_chat_reactions WHERE id=?').run(existing.id);
+    added = false;
+  } else {
+    db.prepare('INSERT INTO classroom_chat_reactions (chat_id, user_id, reaction) VALUES (?,?,?)')
+      .run(chatId, req.user.id, reaction);
+    added = true;
+  }
+
+  const counts = db.prepare(
+    `SELECT reaction, COUNT(*) AS cnt, GROUP_CONCAT(user_id) AS uids
+     FROM classroom_chat_reactions WHERE chat_id=? GROUP BY reaction`
+  ).all(chatId);
+  const reactionsMap = {};
+  counts.forEach(r => {
+    reactionsMap[r.reaction] = { count: r.cnt, uids: r.uids };
+  });
+
+  emitToSession(msg.session_id, {
+    type: 'classroom_reaction',
+    sessionId: msg.session_id,
+    chatId, reaction, userId: req.user.id, added,
+    reactions: reactionsMap,
+  });
+
+  res.json({ ok: true, added, reactions: reactionsMap });
+}
+
+/* ── Session notes (per user) ───────────────────────────────────────────── */
+function getNotes(req, res) {
+  const sessionId = Number(req.params.id);
+  const row = db.prepare(
+    'SELECT content FROM classroom_notes WHERE session_id=? AND user_id=?'
+  ).get(sessionId, req.user.id);
+  res.json({ content: row?.content || '' });
+}
+
+function saveNotes(req, res) {
+  const sessionId = Number(req.params.id);
+  const { content = '' } = req.body;
+  db.prepare(`
+    INSERT INTO classroom_notes (session_id, user_id, content, updated_at)
+    VALUES (?,?,?,datetime('now'))
+    ON CONFLICT(session_id, user_id)
+    DO UPDATE SET content=excluded.content, updated_at=excluded.updated_at
+  `).run(sessionId, req.user.id, content.slice(0, 50000));
+  res.json({ ok: true });
+}
+
+/* ── Lesson templates ───────────────────────────────────────────────────── */
+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'
+  ).all(req.user.id);
+  res.json({ templates });
+}
+
+function saveTemplate(req, res) {
+  const sessionId = Number(req.params.id);
+  const { title, description = '' } = req.body;
+  if (!title?.trim()) return res.status(400).json({ error: 'Укажите название шаблона' });
+
+  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 pages = db.prepare(
+    'SELECT * FROM classroom_pages WHERE session_id=? ORDER BY page_num'
+  ).all(sessionId);
+
+  const pagesData = pages.map(p => {
+    const strokes = db.prepare(
+      'SELECT tool, data FROM classroom_strokes WHERE session_id=? AND page_num=? ORDER BY seq'
+    ).all(sessionId, p.page_num);
+    return {
+      page_num: p.page_num,
+      template: p.template || 'blank',
+      strokes:  strokes.map(s => ({ tool: s.tool, data: JSON.parse(s.data) })),
+    };
+  });
+
+  const { lastInsertRowid } = db.prepare(
+    'INSERT INTO classroom_templates (teacher_id, title, description, pages_data) VALUES (?,?,?,?)'
+  ).run(req.user.id, title.trim(), description.slice(0, 500), JSON.stringify(pagesData));
+
+  res.json({ id: lastInsertRowid, ok: true });
+}
+
+function deleteTemplate(req, res) {
+  const id = Number(req.params.tid);
+  db.prepare('DELETE FROM classroom_templates WHERE id=? AND teacher_id=?').run(id, req.user.id);
+  res.json({ ok: true });
+}
+
+function loadTemplate(req, res) {
+  const sessionId  = Number(req.params.id);
+  const { template_id } = 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: 'Нет доступа' });
+
+  const tmpl = db.prepare('SELECT * FROM classroom_templates WHERE id=?').get(template_id);
+  if (!tmpl) return res.status(404).json({ error: 'Шаблон не найден' });
+
+  const pagesData = JSON.parse(tmpl.pages_data || '[]');
+
+  // Clear current session data
+  db.prepare('DELETE FROM classroom_strokes WHERE session_id=?').run(sessionId);
+  db.prepare('DELETE FROM classroom_pages WHERE session_id=?').run(sessionId);
+
+  // Restore from template
+  pagesData.forEach(p => {
+    db.prepare('INSERT OR IGNORE INTO classroom_pages (session_id, page_num, template) VALUES (?,?,?)')
+      .run(sessionId, p.page_num, p.template || 'blank');
+    (p.strokes || []).forEach(s => {
+      db.prepare('INSERT INTO classroom_strokes (session_id, page_num, tool, data) VALUES (?,?,?,?)')
+        .run(sessionId, p.page_num, s.tool, JSON.stringify(s.data));
+    });
+  });
+
+  // Broadcast: clients reload
+  emitToSession(sessionId, {
+    type: 'classroom_template_loaded',
+    sessionId,
+    pages: pagesData.length,
+  });
+
+  res.json({ ok: true, pages: pagesData.length });
+}
+
+module.exports = {
+  createSession,
+  getSession,
+  endSession,
+  getActiveSession,
+  getMyActive,
+  joinSession,
+  leaveSession,
+  sendChat,
+  getChat,
+  getAttendance,
+  getParticipants,
+  signal,
+  getOnlineStudents,
+  getMySession,
+  postStrokes,
+  getStrokes,
+  deleteStroke,
+  updateStroke,
+  addPage,
+  changePage,
+  updatePageTemplate,
+  raiseHand,
+  lowerHand,
+  getHands,
+  mutePeer,
+  screenStart,
+  screenStop,
+  clearPage,
+  previewStroke,
+  broadcastCursor,
+  pinMessage,
+  allowDraw,
+  revokeDraw,
+  uploadChatAttachment,
+  reactToMessage,
+  getNotes,
+  saveNotes,
+  getTemplates,
+  saveTemplate,
+  deleteTemplate,
+  loadTemplate,
+};
diff --git a/backend/src/controllers/collectionController.js b/backend/src/controllers/collectionController.js
new file mode 100644
index 0000000..4e96de2
--- /dev/null
+++ b/backend/src/controllers/collectionController.js
@@ -0,0 +1,69 @@
+'use strict';
+const db = require('../db/db');
+
+function _tier(total, correct) {
+  if (total === 0) return 'locked';
+  const pct = correct / total * 100;
+  if (total >= 10 && pct >= 90) return 'platinum';
+  if (total >= 5  && pct >= 80) return 'gold';
+  if (total >= 3  && pct >= 50) return 'silver';
+  if (correct >= 1)             return 'bronze';
+  return 'locked';
+}
+
+/* ── GET /api/collection ──────────────────────────────────────────────── */
+function getCollection(req, res) {
+  const rows = db.prepare(`
+    SELECT
+      t.id   AS topic_id,
+      t.name AS topic_name,
+      s.name AS subject_name,
+      s.slug AS subject_slug,
+      s.icon AS subject_icon,
+      COALESCE(agg.total_attempts, 0)  AS total_attempts,
+      COALESCE(agg.correct_count, 0)   AS correct_count,
+      agg.first_seen_at
+    FROM topics t
+    JOIN subjects s ON s.id = t.subject_id
+    LEFT JOIN (
+      SELECT q.topic_id,
+             COUNT(ua.id)                       AS total_attempts,
+             SUM(CASE WHEN ua.is_correct=1 THEN 1 ELSE 0 END) AS correct_count,
+             MIN(ua.answered_at)                AS first_seen_at
+      FROM user_answers ua
+      JOIN questions q ON q.id = ua.question_id
+      WHERE ua.session_id IN (
+        SELECT id FROM test_sessions WHERE user_id = ? AND status = 'completed'
+      )
+      GROUP BY q.topic_id
+    ) agg ON agg.topic_id = t.id
+    ORDER BY s.slug, t.order_index, t.name
+  `).all(req.user.id);
+
+  const cards = rows.map(r => ({
+    topicId:      r.topic_id,
+    topicName:    r.topic_name,
+    subjectName:  r.subject_name,
+    subjectSlug:  r.subject_slug,
+    subjectIcon:  r.subject_icon,
+    tier:         _tier(r.total_attempts, r.correct_count),
+    totalAttempts: r.total_attempts,
+    correctCount:  r.correct_count,
+    masteryPct:   r.total_attempts > 0 ? Math.round(r.correct_count / r.total_attempts * 100) : 0,
+    firstSeenAt:  r.first_seen_at || null,
+  }));
+
+  const unlocked = cards.filter(c => c.tier !== 'locked').length;
+
+  res.json({
+    totalTopics:    cards.length,
+    unlockedTopics: unlocked,
+    platinumCount:  cards.filter(c => c.tier === 'platinum').length,
+    goldCount:      cards.filter(c => c.tier === 'gold').length,
+    silverCount:    cards.filter(c => c.tier === 'silver').length,
+    bronzeCount:    cards.filter(c => c.tier === 'bronze').length,
+    cards,
+  });
+}
+
+module.exports = { getCollection };
diff --git a/backend/src/controllers/courseController.js b/backend/src/controllers/courseController.js
new file mode 100644
index 0000000..4284dab
--- /dev/null
+++ b/backend/src/controllers/courseController.js
@@ -0,0 +1,508 @@
+const db = require('../db/db');
+
+/* ── helpers ──────────────────────────────────────────────────────────── */
+
+// Reused SQL fragment: user's completed-lesson count for a course (param: user_id)
+const DONE_COUNT_SUBQ = `(SELECT COUNT(*) FROM lesson_progress lp
+  JOIN lessons l2 ON lp.lesson_id = l2.id
+  WHERE l2.course_id = c.id AND lp.user_id = ? AND lp.completed = 1) AS done_count`;
+
+function courseRow(row) {
+  return {
+    id:          row.id,
+    subjectSlug: row.subject_slug,
+    title:       row.title,
+    description: row.description || '',
+    coverEmoji:  row.cover_emoji,
+    orderIndex:  row.order_index,
+    isPublished: row.is_published === 1,
+    createdBy:   row.created_by,
+    createdAt:   row.created_at,
+    lessonCount: row.lesson_count ?? 0,
+    doneCount:   row.done_count   ?? 0,
+  };
+}
+
+function progressSubquery(role) {
+  return role === 'student' ? 'AND l.is_published = 1' : '';
+}
+
+/* ── GET /api/courses ─────────────────────────────────────────────────── */
+function list(req, res) {
+  const { subject } = req.query;
+  const role = req.user.role;
+  const uid  = req.user.id;
+
+  let where = role === 'student' ? 'WHERE c.is_published = 1' : 'WHERE 1=1';
+  const args = [];
+  if (subject) { where += ' AND c.subject_slug = ?'; args.push(subject); }
+
+  const rows = db.prepare(`
+    SELECT c.*,
+      (SELECT COUNT(*) FROM lessons l WHERE l.course_id = c.id ${progressSubquery(role)}) AS lesson_count,
+      ${DONE_COUNT_SUBQ}
+    FROM courses c ${where}
+    ORDER BY c.subject_slug, c.order_index, c.id
+  `).all(uid, ...args);
+
+  res.json(rows.map(courseRow));
+}
+
+/* ── GET /api/courses/search?q=… ─────────────────────────────────────── */
+function search(req, res) {
+  const q    = (req.query.q || '').trim();
+  const role = req.user.role;
+  const uid  = req.user.id;
+  if (!q) return res.json({ courses: [], lessons: [] });
+
+  const like = `%${q}%`;
+  const pubC = role === 'student' ? 'AND c.is_published = 1' : '';
+  const pubL = role === 'student' ? 'AND l.is_published = 1 AND c.is_published = 1' : '';
+
+  const courses = db.prepare(`
+    SELECT c.*,
+      (SELECT COUNT(*) FROM lessons l WHERE l.course_id = c.id ${progressSubquery(role)}) AS lesson_count,
+      ${DONE_COUNT_SUBQ}
+    FROM courses c WHERE (c.title LIKE ? OR c.description LIKE ?) ${pubC}
+    ORDER BY c.subject_slug, c.order_index LIMIT 20
+  `).all(uid, like, like).map(courseRow);
+
+  const lessons = db.prepare(`
+    SELECT l.id, l.title, l.course_id, c.title AS course_title, c.subject_slug,
+      lp.completed
+    FROM lessons l
+    JOIN courses c ON l.course_id = c.id
+    LEFT JOIN lesson_progress lp ON lp.lesson_id = l.id AND lp.user_id = ?
+    WHERE l.title LIKE ? ${pubL}
+    ORDER BY c.subject_slug, l.order_index LIMIT 30
+  `).all(uid, like);
+
+  res.json({ courses, lessons });
+}
+
+/* ── GET /api/courses/continue ───────────────────────────────────────── */
+// Returns the last-in-progress lesson across all courses
+function continueLesson(req, res) {
+  const uid  = req.user.id;
+  const role = req.user.role;
+  const pub  = role === 'student' ? 'AND l.is_published = 1 AND c.is_published = 1' : '';
+
+  // 1. last started but not finished lesson (progress row exists, completed=0)
+  let row = db.prepare(`
+    SELECT l.id, l.title, l.course_id, c.title AS course_title, c.subject_slug, c.cover_emoji
+    FROM lesson_progress lp
+    JOIN lessons l ON lp.lesson_id = l.id
+    JOIN courses c ON l.course_id = c.id
+    WHERE lp.user_id = ? AND lp.completed = 0 ${pub}
+    ORDER BY lp.updated_at DESC LIMIT 1
+  `).get(uid);
+
+  // 2. fallback: first unprogressed lesson in courses that have any progress
+  if (!row) {
+    row = db.prepare(`
+      SELECT l.id, l.title, l.course_id, c.title AS course_title, c.subject_slug, c.cover_emoji
+      FROM lessons l
+      JOIN courses c ON l.course_id = c.id
+      WHERE c.id IN (
+        SELECT DISTINCT l2.course_id FROM lesson_progress lp2
+        JOIN lessons l2 ON lp2.lesson_id = l2.id WHERE lp2.user_id = ?
+      )
+      AND l.id NOT IN (SELECT lesson_id FROM lesson_progress WHERE user_id = ?)
+      ${pub}
+      ORDER BY l.course_id, l.order_index LIMIT 1
+    `).get(uid, uid);
+  }
+
+  res.json(row ? {
+    lessonId:    row.id,
+    lessonTitle: row.title,
+    courseId:    row.course_id,
+    courseTitle: row.course_title,
+    subjectSlug: row.subject_slug,
+    coverEmoji:  row.cover_emoji,
+  } : null);
+}
+
+/* ── GET /api/courses/:id ─────────────────────────────────────────────── */
+function get(req, res) {
+  const role = req.user.role;
+  const uid  = req.user.id;
+
+  const row = db.prepare(`
+    SELECT c.*,
+      (SELECT COUNT(*) FROM lessons l WHERE l.course_id = c.id ${progressSubquery(role)}) AS lesson_count,
+      ${DONE_COUNT_SUBQ}
+    FROM courses c WHERE c.id = ?
+  `).get(uid, req.params.id);
+
+  if (!row) return res.status(404).json({ error: 'Course not found' });
+  if (role === 'student' && !row.is_published)
+    return res.status(403).json({ error: 'Course not published' });
+
+  // sections
+  const sections = db.prepare(
+    'SELECT * FROM course_sections WHERE course_id = ? ORDER BY order_index, id'
+  ).all(row.id);
+
+  // lessons grouped
+  const pubWhere = role === 'student' ? 'AND l.is_published = 1' : '';
+  const lessons = db.prepare(`
+    SELECT l.id, l.title, l.order_index, l.is_published, l.section_id, l.read_time,
+      lp.completed
+    FROM lessons l
+    LEFT JOIN lesson_progress lp ON lp.lesson_id = l.id AND lp.user_id = ?
+    WHERE l.course_id = ? ${pubWhere}
+    ORDER BY l.order_index, l.id
+  `).all(uid, row.id);
+
+  res.json({
+    ...courseRow(row),
+    sections: sections.map(s => ({ id: s.id, title: s.title, orderIndex: s.order_index })),
+    lessons:  lessons.map(l => ({
+      id:          l.id,
+      title:       l.title,
+      orderIndex:  l.order_index,
+      isPublished: l.is_published === 1,
+      sectionId:   l.section_id,
+      readTime:    l.read_time || 0,
+      completed:   l.completed === 1,
+    })),
+  });
+}
+
+/* ── GET /api/courses/:id/stats?classId=X ────────────────────────────── */
+function stats(req, res) {
+  const { classId } = req.query;
+  const course = db.prepare('SELECT id FROM courses WHERE id = ?').get(req.params.id);
+  if (!course) return res.status(404).json({ error: 'Course not found' });
+
+  // students in class (or all students who have progress)
+  let members;
+  if (classId) {
+    members = db.prepare(`
+      SELECT u.id FROM class_members cm JOIN users u ON cm.user_id = u.id
+      WHERE cm.class_id = ? AND u.role = 'student'
+    `).all(classId).map(r => r.id);
+  } else {
+    members = db.prepare(`
+      SELECT DISTINCT lp.user_id AS id FROM lesson_progress lp
+      JOIN lessons l ON lp.lesson_id = l.id WHERE l.course_id = ?
+    `).all(course.id).map(r => r.id);
+  }
+  const total = members.length || 1;
+
+  const lessons = db.prepare(`
+    SELECT l.id, l.title, l.order_index,
+      (SELECT COUNT(*) FROM lesson_progress lp
+        WHERE lp.lesson_id = l.id AND lp.completed = 1
+        AND lp.user_id IN (${members.map(() => '?').join(',') || 'NULL'})) AS done_count
+    FROM lessons l WHERE l.course_id = ? ORDER BY l.order_index, l.id
+  `).all(...members, course.id);
+
+  res.json({ total, lessons: lessons.map(l => ({
+    id: l.id, title: l.title,
+    doneCount: l.done_count,
+    pct: Math.round(l.done_count / total * 100),
+  }))});
+}
+
+/* ── GET /api/courses/:id/analytics?classId=X ───────────────────────── */
+function analytics(req, res) {
+  const { classId } = req.query;
+  const course = db.prepare('SELECT id, title FROM courses WHERE id = ?').get(req.params.id);
+  if (!course) return res.status(404).json({ error: 'Course not found' });
+
+  // all lessons in course
+  const lessons = db.prepare(
+    'SELECT id, title, order_index FROM lessons WHERE course_id = ? ORDER BY order_index, id'
+  ).all(course.id);
+  const lessonIds = lessons.map(l => l.id);
+  const totalLessons = lessonIds.length;
+
+  // students
+  let students;
+  if (classId) {
+    students = db.prepare(`
+      SELECT u.id, u.name, u.email FROM class_members cm
+      JOIN users u ON cm.user_id = u.id
+      WHERE cm.class_id = ? AND u.role = 'student'
+      ORDER BY u.name
+    `).all(classId);
+  } else {
+    students = db.prepare(`
+      SELECT DISTINCT u.id, u.name, u.email FROM lesson_progress lp
+      JOIN lessons l ON lp.lesson_id = l.id
+      JOIN users u ON lp.user_id = u.id
+      WHERE l.course_id = ?
+      ORDER BY u.name
+    `).all(course.id);
+  }
+
+  if (!students.length) {
+    return res.json({
+      totalStudents: 0, totalLessons, avgPct: 0,
+      lessons: lessons.map(l => ({ id: l.id, title: l.title, doneCount: 0, pct: 0 })),
+      students: [], stuckStudents: [],
+    });
+  }
+
+  // Batch-fetch ALL progress for ALL students in ONE query (eliminates N+1)
+  const studentIds = students.map(s => s.id);
+  const lpRows = lessonIds.length && studentIds.length
+    ? db.prepare(`
+        SELECT user_id, lesson_id, completed, updated_at FROM lesson_progress
+        WHERE user_id IN (${studentIds.map(() => '?').join(',')})
+          AND lesson_id IN (${lessonIds.map(() => '?').join(',')})
+      `).all(...studentIds, ...lessonIds)
+    : [];
+
+  // Index progress by [user_id][lesson_id]
+  const progressByUser = {};
+  for (const r of lpRows) {
+    if (!progressByUser[r.user_id]) progressByUser[r.user_id] = {};
+    progressByUser[r.user_id][r.lesson_id] = r;
+  }
+
+  // Per-lesson done count from the same data
+  const lessonDoneCount = {};
+  for (const lid of lessonIds) lessonDoneCount[lid] = 0;
+  for (const r of lpRows) {
+    if (r.completed === 1) lessonDoneCount[r.lesson_id] = (lessonDoneCount[r.lesson_id] || 0) + 1;
+  }
+
+  const studentData = students.map(s => {
+    const progressMap = progressByUser[s.id] || {};
+    const progress = Object.values(progressMap);
+    const doneCnt = progress.filter(p => p.completed === 1).length;
+    const pct = totalLessons > 0 ? Math.round(doneCnt / totalLessons * 100) : 0;
+
+    // find first incomplete lesson
+    let firstIncompleteIdx = -1;
+    for (let i = 0; i < lessons.length; i++) {
+      const p = progressMap[lessons[i].id];
+      if (!p || p.completed !== 1) { firstIncompleteIdx = i; break; }
+    }
+
+    // "stuck" = started course (done > 0), not finished, and last activity > 3 days ago
+    let stuck = false;
+    let stuckLesson = null;
+    let lastActivity = null;
+    if (doneCnt > 0 && doneCnt < totalLessons) {
+      const dates = progress.map(p => p.updated_at).filter(Boolean);
+      if (dates.length) {
+        lastActivity = dates.sort().pop();
+        const daysSince = (Date.now() - new Date(lastActivity.replace(' ', 'T') + 'Z').getTime()) / 86400000;
+        if (daysSince > 3) {
+          stuck = true;
+          stuckLesson = firstIncompleteIdx >= 0 ? lessons[firstIncompleteIdx] : null;
+        }
+      }
+    }
+
+    return {
+      id: s.id, name: s.name, email: s.email,
+      doneCount: doneCnt, pct, stuck,
+      stuckLessonId: stuckLesson?.id || null,
+      stuckLessonTitle: stuckLesson?.title || null,
+      lastActivity,
+    };
+  });
+
+  // Per-lesson stats from pre-computed counts (no extra queries)
+  const lessonStats = lessons.map(l => {
+    const doneCount = lessonDoneCount[l.id] || 0;
+    return {
+      id: l.id, title: l.title,
+      doneCount,
+      pct: students.length > 0 ? Math.round(doneCount / students.length * 100) : 0,
+    };
+  });
+
+  const avgPct = studentData.length > 0
+    ? Math.round(studentData.reduce((s, d) => s + d.pct, 0) / studentData.length)
+    : 0;
+
+  res.json({
+    totalStudents: students.length,
+    totalLessons,
+    avgPct,
+    lessons: lessonStats,
+    students: studentData,
+    stuckStudents: studentData.filter(s => s.stuck),
+  });
+}
+
+/* ── POST /api/courses ────────────────────────────────────────────────── */
+function create(req, res) {
+  const { subjectSlug, title, description, coverEmoji, orderIndex } = req.body;
+  if (!subjectSlug || !title)
+    return res.status(400).json({ error: 'subjectSlug and title required' });
+
+  const result = db.prepare(`
+    INSERT INTO courses (subject_slug, title, description, cover_emoji, order_index, created_by)
+    VALUES (?, ?, ?, ?, ?, ?)
+  `).run(subjectSlug, title.trim(), description || null, coverEmoji || '', orderIndex ?? 0, req.user.id);
+  res.status(201).json({ id: result.lastInsertRowid });
+}
+
+/* ── POST /api/courses/:id/duplicate ─────────────────────────────────── */
+function duplicate(req, res) {
+  const src = db.prepare('SELECT * FROM courses WHERE id = ?').get(req.params.id);
+  if (!src) return res.status(404).json({ error: 'Course not found' });
+
+  let newCourseId;
+  db.transaction(() => {
+    const cr = db.prepare(`
+      INSERT INTO courses (subject_slug, title, description, cover_emoji, order_index, is_published, created_by)
+      VALUES (?, ?, ?, ?, ?, 0, ?)
+    `).run(src.subject_slug, src.title + ' (копия)', src.description, src.cover_emoji, src.order_index, req.user.id);
+    newCourseId = cr.lastInsertRowid;
+
+    // duplicate sections
+    const secMap = {};
+    const sections = db.prepare('SELECT * FROM course_sections WHERE course_id = ? ORDER BY order_index').all(src.id);
+    for (const s of sections) {
+      const sr = db.prepare('INSERT INTO course_sections (course_id, title, order_index) VALUES (?, ?, ?)').run(newCourseId, s.title, s.order_index);
+      secMap[s.id] = sr.lastInsertRowid;
+    }
+
+    // duplicate lessons + blocks
+    const lessons = db.prepare('SELECT * FROM lessons WHERE course_id = ? ORDER BY order_index').all(src.id);
+    for (const l of lessons) {
+      const lr = db.prepare(`
+        INSERT INTO lessons (course_id, title, order_index, section_id, read_time)
+        VALUES (?, ?, ?, ?, ?)
+      `).run(newCourseId, l.title, l.order_index, l.section_id ? (secMap[l.section_id] || null) : null, l.read_time || 0);
+      const newLid = lr.lastInsertRowid;
+
+      const blocks = db.prepare('SELECT * FROM lesson_blocks WHERE lesson_id = ? ORDER BY order_index').all(l.id);
+      for (const b of blocks) {
+        db.prepare('INSERT INTO lesson_blocks (lesson_id, type, order_index, data) VALUES (?, ?, ?, ?)').run(newLid, b.type, b.order_index, b.data);
+      }
+    }
+  })();
+
+  res.status(201).json({ id: newCourseId });
+}
+
+/* ── PUT /api/courses/:id ─────────────────────────────────────────────── */
+function update(req, res) {
+  const row = db.prepare('SELECT * FROM courses WHERE id = ?').get(req.params.id);
+  if (!row) return res.status(404).json({ error: 'Course not found' });
+  const { title, description, coverEmoji, orderIndex, isPublished, subjectSlug } = req.body;
+
+  db.prepare(`
+    UPDATE courses SET title=?,description=?,cover_emoji=?,order_index=?,is_published=?,subject_slug=? WHERE id=?
+  `).run(
+    title       ?? row.title,
+    description !== undefined ? description : row.description,
+    coverEmoji  ?? row.cover_emoji,
+    orderIndex  ?? row.order_index,
+    isPublished !== undefined ? (isPublished ? 1 : 0) : row.is_published,
+    subjectSlug ?? row.subject_slug,
+    row.id
+  );
+  res.json({ ok: true });
+}
+
+/* ── DELETE /api/courses/:id ──────────────────────────────────────────── */
+function remove(req, res) {
+  const row = db.prepare('SELECT id FROM courses WHERE id = ?').get(req.params.id);
+  if (!row) return res.status(404).json({ error: 'Course not found' });
+  db.prepare('DELETE FROM courses WHERE id = ?').run(row.id);
+  res.json({ ok: true });
+}
+
+/* ── SECTIONS ─────────────────────────────────────────────────────────── */
+function listSections(req, res) {
+  const rows = db.prepare('SELECT * FROM course_sections WHERE course_id = ? ORDER BY order_index, id').all(req.params.id);
+  res.json(rows.map(s => ({ id: s.id, title: s.title, orderIndex: s.order_index })));
+}
+
+function createSection(req, res) {
+  const course = db.prepare('SELECT id FROM courses WHERE id = ?').get(req.params.id);
+  if (!course) return res.status(404).json({ error: 'Course not found' });
+  const { title, orderIndex } = req.body;
+  if (!title) return res.status(400).json({ error: 'title required' });
+  const r = db.prepare('INSERT INTO course_sections (course_id, title, order_index) VALUES (?, ?, ?)').run(course.id, title.trim(), orderIndex ?? 0);
+  res.status(201).json({ id: r.lastInsertRowid });
+}
+
+function updateSection(req, res) {
+  const s = db.prepare('SELECT * FROM course_sections WHERE id = ? AND course_id = ?').get(req.params.sid, req.params.id);
+  if (!s) return res.status(404).json({ error: 'Section not found' });
+  const { title, orderIndex } = req.body;
+  db.prepare('UPDATE course_sections SET title=?, order_index=? WHERE id=?').run(title ?? s.title, orderIndex ?? s.order_index, s.id);
+  res.json({ ok: true });
+}
+
+function deleteSection(req, res) {
+  const s = db.prepare('SELECT id FROM course_sections WHERE id = ? AND course_id = ?').get(req.params.sid, req.params.id);
+  if (!s) return res.status(404).json({ error: 'Section not found' });
+  // unlink lessons
+  db.prepare('UPDATE lessons SET section_id = NULL WHERE section_id = ?').run(s.id);
+  db.prepare('DELETE FROM course_sections WHERE id = ?').run(s.id);
+  res.json({ ok: true });
+}
+
+/* ── CLASS COURSES ────────────────────────────────────────────────────── */
+function listClassCourses(req, res) {
+  const uid  = req.user.id;
+  const role = req.user.role;
+  const pub  = role === 'student' ? 'AND c.is_published = 1' : '';
+  const rows = db.prepare(`
+    SELECT c.*,
+      (SELECT COUNT(*) FROM lessons l WHERE l.course_id = c.id ${progressSubquery(role)}) AS lesson_count,
+      ${DONE_COUNT_SUBQ},
+      cc.deadline
+    FROM class_courses cc
+    JOIN courses c ON cc.course_id = c.id
+    WHERE cc.class_id = ? ${pub}
+    ORDER BY cc.assigned_at
+  `).all(uid, req.params.classId);
+  res.json(rows.map(r => ({ ...courseRow(r), deadline: r.deadline })));
+}
+
+function assignCourseToClass(req, res) {
+  const { classId } = req.params;
+  const { courseId, deadline } = req.body;
+  if (!courseId) return res.status(400).json({ error: 'courseId required' });
+  try {
+    db.prepare(`
+      INSERT INTO class_courses (class_id, course_id, deadline, assigned_by)
+      VALUES (?, ?, ?, ?)
+      ON CONFLICT (class_id, course_id) DO UPDATE SET deadline=excluded.deadline
+    `).run(classId, courseId, deadline || null, req.user.id);
+    res.json({ ok: true });
+  } catch (e) { res.status(400).json({ error: e.message }); }
+}
+
+function unassignCourseFromClass(req, res) {
+  db.prepare('DELETE FROM class_courses WHERE class_id = ? AND course_id = ?').run(req.params.classId, req.params.courseId);
+  res.json({ ok: true });
+}
+
+/* ── PATCH /api/courses/:id/publish-all ──────────────────────────────── */
+function publishAll(req, res) {
+  const course = db.prepare('SELECT id, created_by FROM courses WHERE id = ?').get(req.params.id);
+  if (!course) return res.status(404).json({ error: 'Course not found' });
+  if (req.user.role !== 'admin' && course.created_by !== req.user.id)
+    return res.status(403).json({ error: 'Forbidden' });
+
+  const publish = req.body.publish !== false; // default: publish=true
+  const { changes } = db.prepare(
+    'UPDATE lessons SET is_published = ? WHERE course_id = ?'
+  ).run(publish ? 1 : 0, course.id);
+
+  // Also publish/unpublish the course itself
+  db.prepare('UPDATE courses SET is_published = ? WHERE id = ?').run(publish ? 1 : 0, course.id);
+
+  res.json({ ok: true, lessonsUpdated: changes });
+}
+
+module.exports = {
+  list, search, continueLesson, get, stats, analytics, create, duplicate, update, remove,
+  listSections, createSection, updateSection, deleteSection,
+  listClassCourses, assignCourseToClass, unassignCourseFromClass,
+  publishAll,
+};
diff --git a/backend/src/controllers/fileController.js b/backend/src/controllers/fileController.js
new file mode 100644
index 0000000..cb42c66
--- /dev/null
+++ b/backend/src/controllers/fileController.js
@@ -0,0 +1,346 @@
+const db   = require('../db/db');
+const path = require('path');
+const fs   = require('fs');
+const { UPLOADS_DIR } = require('../config');
+
+const { checkMagicBytes } = require('../utils/magic');
+
+/* ── GET /api/files?subject=bio&my=1 ─────────────────────────────────── */
+function listFiles(req, res) {
+  const { subject, my } = req.query;
+  const uid      = req.user.id;
+  const isTeacher = ['teacher', 'admin'].includes(req.user.role);
+
+  let sql, args;
+
+  const cols = `f.id, f.title, f.description, f.original_name, f.mimetype, f.size,
+             f.subject_slug, f.is_public, f.folder_id, f.created_at,
+             u.name AS uploader_name`;
+
+  if (isTeacher && my === '1') {
+    sql = `SELECT ${cols} FROM files f JOIN users u ON u.id = f.uploaded_by WHERE f.uploaded_by = ?`;
+    args = [uid];
+  } else if (isTeacher) {
+    sql = `SELECT ${cols} FROM files f JOIN users u ON u.id = f.uploaded_by WHERE (f.uploaded_by = ? OR f.is_public = 1)`;
+    args = [uid];
+  } else {
+    sql = `
+      SELECT DISTINCT ${cols}
+      FROM files f JOIN users u ON u.id = f.uploaded_by
+      WHERE (
+        f.is_public = 1
+        OR EXISTS (SELECT 1 FROM file_access fa WHERE fa.file_id = f.id AND fa.type = 'user' AND fa.target_id = ?)
+        OR EXISTS (SELECT 1 FROM file_access fa JOIN class_members cm ON cm.class_id = fa.target_id AND cm.user_id = ? WHERE fa.file_id = f.id AND fa.type = 'class')
+      )
+    `;
+    args = [uid, uid];
+  }
+
+  if (subject) { sql += ' AND f.subject_slug = ?'; args.push(subject); }
+  sql += ' ORDER BY f.created_at DESC LIMIT 200';
+
+  res.json(db.prepare(sql).all(...args));
+}
+
+/* ── GET /api/files/folders ──────────────────────────────────────────── */
+function listFolders(req, res) {
+  const uid = req.user.id;
+  const isTeacher = ['teacher', 'admin'].includes(req.user.role);
+
+  if (isTeacher) {
+    const rows = db.prepare(`
+      SELECT fo.id, fo.name, fo.created_by, fo.created_at,
+             (SELECT COUNT(*) FROM files f WHERE f.folder_id = fo.id) AS file_count,
+             (SELECT COUNT(*) FROM folder_access fa WHERE fa.folder_id = fo.id) AS access_count,
+             u.name AS creator_name
+      FROM folders fo JOIN users u ON u.id = fo.created_by
+      ORDER BY fo.name ASC
+    `).all();
+    return res.json(rows);
+  }
+
+  // Students: only folders with no restrictions, or where they have explicit access
+  const rows = db.prepare(`
+    SELECT fo.id, fo.name, fo.created_by, fo.created_at,
+           (SELECT COUNT(*) FROM files f WHERE f.folder_id = fo.id) AS file_count,
+           0 AS access_count,
+           u.name AS creator_name
+    FROM folders fo JOIN users u ON u.id = fo.created_by
+    WHERE (
+      NOT EXISTS (SELECT 1 FROM folder_access fa WHERE fa.folder_id = fo.id)
+      OR EXISTS (SELECT 1 FROM folder_access fa WHERE fa.folder_id = fo.id AND fa.type = 'user' AND fa.target_id = ?)
+      OR EXISTS (
+        SELECT 1 FROM folder_access fa
+        JOIN class_members cm ON cm.class_id = fa.target_id AND cm.user_id = ?
+        WHERE fa.folder_id = fo.id AND fa.type = 'class'
+      )
+    )
+    ORDER BY fo.name ASC
+  `).all(uid, uid);
+  res.json(rows);
+}
+
+/* ── POST /api/files/folders ─────────────────────────────────────────── */
+function createFolder(req, res) {
+  const { name } = req.body;
+  if (!name?.trim()) return res.status(400).json({ error: 'name required' });
+  const r = db.prepare('INSERT INTO folders (name, created_by) VALUES (?, ?)').run(name.trim(), req.user.id);
+  res.status(201).json({ id: r.lastInsertRowid, name: name.trim() });
+}
+
+/* ── PUT /api/files/folders/:id ──────────────────────────────────────── */
+function renameFolder(req, res) {
+  const fo = db.prepare('SELECT * FROM folders WHERE id = ?').get(req.params.id);
+  if (!fo) return res.status(404).json({ error: 'Folder not found' });
+  if (req.user.role !== 'admin' && fo.created_by !== req.user.id)
+    return res.status(403).json({ error: 'Forbidden' });
+  const { name } = req.body;
+  if (!name?.trim()) return res.status(400).json({ error: 'name required' });
+  db.prepare('UPDATE folders SET name = ? WHERE id = ?').run(name.trim(), fo.id);
+  res.json({ ok: true });
+}
+
+/* ── DELETE /api/files/folders/:id ──────────────────────────────────── */
+function deleteFolder(req, res) {
+  const fo = db.prepare('SELECT * FROM folders WHERE id = ?').get(req.params.id);
+  if (!fo) return res.status(404).json({ error: 'Folder not found' });
+  if (req.user.role !== 'admin' && fo.created_by !== req.user.id)
+    return res.status(403).json({ error: 'Forbidden' });
+  // Move files back to root before deleting
+  db.prepare('UPDATE files SET folder_id = NULL WHERE folder_id = ?').run(fo.id);
+  db.prepare('DELETE FROM folders WHERE id = ?').run(fo.id);
+  res.json({ ok: true });
+}
+
+/* ── PATCH /api/files/:id/move ───────────────────────────────────────── */
+function moveFile(req, res) {
+  const f = db.prepare('SELECT id, uploaded_by FROM files WHERE id = ?').get(req.params.id);
+  if (!f) return res.status(404).json({ error: 'File not found' });
+  if (req.user.role !== 'admin' && f.uploaded_by !== req.user.id)
+    return res.status(403).json({ error: 'Forbidden' });
+  const folderId = req.body.folder_id ? Number(req.body.folder_id) : null;
+  if (folderId !== null) {
+    const fo = db.prepare('SELECT id FROM folders WHERE id = ?').get(folderId);
+    if (!fo) return res.status(404).json({ error: 'Folder not found' });
+  }
+  db.prepare('UPDATE files SET folder_id = ? WHERE id = ?').run(folderId, f.id);
+  res.json({ ok: true });
+}
+
+/* ── POST /api/files ─────────────────────────────────────────────────── */
+function uploadFile(req, res) {
+  if (!req.file) return res.status(400).json({ error: 'No file uploaded' });
+  const { title, description, subject_slug, is_public, folder_id } = req.body;
+  if (!title?.trim()) return res.status(400).json({ error: 'title required' });
+
+  // Magic bytes verification — reject files whose content doesn't match declared MIME
+  const filePath = path.resolve(UPLOADS_DIR, req.file.filename);
+  if (!checkMagicBytes(filePath, req.file.mimetype)) {
+    try { fs.unlinkSync(filePath); } catch {}
+    return res.status(400).json({ error: 'Содержимое файла не соответствует его расширению' });
+  }
+
+  let r;
+  try {
+    r = db.prepare(`
+      INSERT INTO files (title, description, original_name, stored_name, mimetype, size, subject_slug, is_public, folder_id, uploaded_by)
+      VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+    `).run(
+      title.trim(),
+      description?.trim() || null,
+      req.file.originalname,
+      req.file.filename,
+      req.file.mimetype,
+      req.file.size,
+      subject_slug || null,
+      is_public === '0' ? 0 : 1,
+      folder_id ? Number(folder_id) : null,
+      req.user.id
+    );
+  } catch (err) {
+    // Clean up orphan file if DB insert failed
+    const fp = path.resolve(UPLOADS_DIR, req.file.filename);
+    if (fp.startsWith(UPLOADS_DIR + path.sep)) { try { fs.unlinkSync(fp); } catch {} }
+    throw err;
+  }
+
+  res.status(201).json({ id: r.lastInsertRowid });
+}
+
+/* ── GET /api/files/:id/download ─────────────────────────────────────── */
+function downloadFile(req, res) {
+  const f = db.prepare('SELECT * FROM files WHERE id = ?').get(req.params.id);
+  if (!f) return res.status(404).json({ error: 'File not found' });
+
+  const uid       = req.user.id;
+  const isTeacher = ['teacher', 'admin'].includes(req.user.role);
+
+  if (!f.is_public && !isTeacher && f.uploaded_by !== uid) {
+    const hasAccess = db.prepare(`
+      SELECT 1 FROM file_access fa
+      WHERE fa.file_id = ? AND (
+        (fa.type = 'user' AND fa.target_id = ?)
+        OR (fa.type = 'class' AND EXISTS (
+          SELECT 1 FROM class_members cm WHERE cm.class_id = fa.target_id AND cm.user_id = ?
+        ))
+      ) LIMIT 1
+    `).get(f.id, uid, uid);
+    if (!hasAccess) return res.status(403).json({ error: 'Access denied' });
+  }
+
+  const filePath = path.resolve(UPLOADS_DIR, f.stored_name);
+  if (!filePath.startsWith(UPLOADS_DIR + path.sep) && filePath !== UPLOADS_DIR)
+    return res.status(400).json({ error: 'Invalid file path' });
+  if (!fs.existsSync(filePath)) return res.status(404).json({ error: 'File missing from storage' });
+
+  const inlineSafe = /^(image\/(png|jpeg|gif|webp)|application\/pdf)$/.test(f.mimetype);
+  const disposition = inlineSafe ? 'inline' : 'attachment';
+  const encoded = encodeURIComponent(f.original_name);
+  res.setHeader('Content-Disposition', `${disposition}; filename="${encoded}"; filename*=UTF-8''${encoded}`);
+  res.setHeader('Content-Type', f.mimetype || 'application/octet-stream');
+  res.sendFile(filePath);
+}
+
+/* ── DELETE /api/files/:id ───────────────────────────────────────────── */
+function deleteFile(req, res) {
+  const f = db.prepare('SELECT * FROM files WHERE id = ?').get(req.params.id);
+  if (!f) return res.status(404).json({ error: 'File not found' });
+
+  const isAdmin = req.user.role === 'admin';
+  if (!isAdmin && f.uploaded_by !== req.user.id)
+    return res.status(403).json({ error: 'Forbidden' });
+
+  const filePath = path.resolve(UPLOADS_DIR, f.stored_name);
+  if (filePath.startsWith(UPLOADS_DIR + path.sep)) { try { fs.unlinkSync(filePath); } catch {} }
+
+  db.prepare('DELETE FROM files WHERE id = ?').run(req.params.id);
+  res.json({ ok: true });
+}
+
+/* ── GET /api/files/:id/access ───────────────────────────────────────── */
+function getFileAccess(req, res) {
+  const f = db.prepare('SELECT id, uploaded_by FROM files WHERE id = ?').get(req.params.id);
+  if (!f) return res.status(404).json({ error: 'File not found' });
+  const isAdmin = req.user.role === 'admin';
+  if (!isAdmin && f.uploaded_by !== req.user.id) return res.status(403).json({ error: 'Forbidden' });
+
+  const rows = db.prepare(`
+    SELECT fa.id, fa.type, fa.target_id,
+      CASE fa.type
+        WHEN 'class' THEN (SELECT name FROM classes WHERE id = fa.target_id)
+        WHEN 'user'  THEN (SELECT name || ' (' || email || ')' FROM users WHERE id = fa.target_id)
+      END AS target_name
+    FROM file_access fa WHERE fa.file_id = ?
+    ORDER BY fa.type, fa.id
+  `).all(req.params.id);
+
+  res.json(rows);
+}
+
+/* ── POST /api/files/:id/assign ──────────────────────────────────────── */
+function assignFile(req, res) {
+  const f = db.prepare('SELECT id, uploaded_by FROM files WHERE id = ?').get(req.params.id);
+  if (!f) return res.status(404).json({ error: 'File not found' });
+  const isAdmin = req.user.role === 'admin';
+  if (!isAdmin && f.uploaded_by !== req.user.id) return res.status(403).json({ error: 'Forbidden' });
+
+  const { type, target_id, email } = req.body;
+  if (!['class', 'user'].includes(type)) return res.status(400).json({ error: 'type must be class or user' });
+
+  let tid = Number(target_id);
+  if (type === 'user' && email) {
+    const u = db.prepare('SELECT id FROM users WHERE email = ?').get(email.trim().toLowerCase());
+    if (!u) return res.status(404).json({ error: 'Пользователь не найден' });
+    tid = u.id;
+  }
+  if (!tid) return res.status(400).json({ error: 'target_id required' });
+
+  try {
+    db.prepare('INSERT INTO file_access (file_id, type, target_id) VALUES (?, ?, ?)').run(f.id, type, tid);
+  } catch (e) {
+    if (e.message.includes('UNIQUE')) return res.status(409).json({ error: 'Уже назначен' });
+    throw e;
+  }
+  res.json({ ok: true });
+}
+
+/* ── DELETE /api/files/:id/assign/:type/:targetId ────────────────────── */
+function unassignFile(req, res) {
+  const f = db.prepare('SELECT id, uploaded_by FROM files WHERE id = ?').get(req.params.id);
+  if (!f) return res.status(404).json({ error: 'File not found' });
+  const isAdmin = req.user.role === 'admin';
+  if (!isAdmin && f.uploaded_by !== req.user.id) return res.status(403).json({ error: 'Forbidden' });
+
+  db.prepare('DELETE FROM file_access WHERE file_id = ? AND type = ? AND target_id = ?')
+    .run(f.id, req.params.type, Number(req.params.targetId));
+  res.json({ ok: true });
+}
+
+/* ── GET /api/files/folders/:id/access ───────────────────────────────── */
+function getFolderAccess(req, res) {
+  const fo = db.prepare('SELECT id, created_by FROM folders WHERE id = ?').get(req.params.id);
+  if (!fo) return res.status(404).json({ error: 'Folder not found' });
+
+  const rows = db.prepare(`
+    SELECT fa.id, fa.type, fa.target_id,
+      CASE fa.type
+        WHEN 'class' THEN (SELECT name FROM classes WHERE id = fa.target_id)
+        WHEN 'user'  THEN (SELECT name || ' (' || email || ')' FROM users WHERE id = fa.target_id)
+      END AS target_name
+    FROM folder_access fa WHERE fa.folder_id = ?
+    ORDER BY fa.type, fa.id
+  `).all(fo.id);
+  res.json(rows);
+}
+
+/* ── POST /api/files/folders/:id/assign ──────────────────────────────── */
+function assignFolder(req, res) {
+  const fo = db.prepare('SELECT id, created_by FROM folders WHERE id = ?').get(req.params.id);
+  if (!fo) return res.status(404).json({ error: 'Folder not found' });
+  if (req.user.role !== 'admin' && fo.created_by !== req.user.id)
+    return res.status(403).json({ error: 'Forbidden' });
+
+  const { type, target_id, email } = req.body;
+  if (!['class', 'user'].includes(type)) return res.status(400).json({ error: 'type must be class or user' });
+
+  let tid = Number(target_id);
+  if (type === 'user' && email) {
+    const u = db.prepare('SELECT id FROM users WHERE email = ?').get(email.trim().toLowerCase());
+    if (!u) return res.status(404).json({ error: 'Пользователь не найден' });
+    tid = u.id;
+  }
+  if (!tid) return res.status(400).json({ error: 'target_id required' });
+
+  try {
+    db.prepare('INSERT INTO folder_access (folder_id, type, target_id) VALUES (?, ?, ?)').run(fo.id, type, tid);
+  } catch (e) {
+    if (e.message.includes('UNIQUE')) return res.status(409).json({ error: 'Уже назначен' });
+    throw e;
+  }
+  res.json({ ok: true });
+}
+
+/* ── DELETE /api/files/folders/:id/assign/:type/:targetId ────────────── */
+function unassignFolder(req, res) {
+  const fo = db.prepare('SELECT id, created_by FROM folders WHERE id = ?').get(req.params.id);
+  if (!fo) return res.status(404).json({ error: 'Folder not found' });
+  if (req.user.role !== 'admin' && fo.created_by !== req.user.id)
+    return res.status(403).json({ error: 'Forbidden' });
+
+  db.prepare('DELETE FROM folder_access WHERE folder_id = ? AND type = ? AND target_id = ?')
+    .run(fo.id, req.params.type, Number(req.params.targetId));
+  res.json({ ok: true });
+}
+
+/* ── DELETE /api/files/folders/:id/access (clear all) ───────────────── */
+function clearFolderAccess(req, res) {
+  const fo = db.prepare('SELECT id, created_by FROM folders WHERE id = ?').get(req.params.id);
+  if (!fo) return res.status(404).json({ error: 'Folder not found' });
+  if (req.user.role !== 'admin' && fo.created_by !== req.user.id)
+    return res.status(403).json({ error: 'Forbidden' });
+
+  db.prepare('DELETE FROM folder_access WHERE folder_id = ?').run(fo.id);
+  res.json({ ok: true });
+}
+
+module.exports = { listFiles, uploadFile, downloadFile, deleteFile, getFileAccess, assignFile, unassignFile, listFolders, createFolder, renameFolder, deleteFolder, moveFile, getFolderAccess, assignFolder, unassignFolder, clearFolderAccess };
diff --git a/backend/src/controllers/flashcardController.js b/backend/src/controllers/flashcardController.js
new file mode 100644
index 0000000..c8cd8e1
--- /dev/null
+++ b/backend/src/controllers/flashcardController.js
@@ -0,0 +1,246 @@
+const db = require('../db/db');
+
+/* ── SM-2 algorithm ───────────────────────────────────────────────────────
+   quality: 0 = blackout, 1 = wrong, 2 = wrong but familiar,
+            3 = correct with difficulty, 4 = correct, 5 = perfect
+   ─────────────────────────────────────────────────────────────────────── */
+function sm2(easeFactor, intervalDays, repetitions, quality) {
+  let ef  = easeFactor;
+  let n   = repetitions;
+  let iv  = intervalDays;
+
+  if (quality < 3) {
+    n  = 0;
+    iv = 1;
+  } else {
+    if (n === 0)      iv = 1;
+    else if (n === 1) iv = 6;
+    else              iv = Math.round(iv * ef);
+    n++;
+  }
+  ef = Math.max(1.3, ef + 0.1 - (5 - quality) * (0.08 + (5 - quality) * 0.02));
+  const due = new Date(Date.now() + iv * 86400000).toISOString();
+  return { easeFactor: ef, intervalDays: iv, repetitions: n, dueAt: due };
+}
+
+/* ── GET /api/flashcards/decks ─────────────────────────────────────────── */
+function listDecks(req, res) {
+  const uid = req.user.id;
+  const decks = db.prepare(`
+    SELECT d.*,
+      (SELECT COUNT(*) FROM flashcard_cards c WHERE c.deck_id = d.id) AS card_count,
+      (SELECT COUNT(*) FROM flashcard_cards c
+       LEFT JOIN flashcard_reviews r ON r.card_id = c.id AND r.user_id = ?
+       WHERE c.deck_id = d.id AND (r.id IS NULL OR r.due_at <= datetime('now'))) AS due_count
+    FROM flashcard_decks d
+    WHERE d.user_id = ?
+    ORDER BY d.created_at DESC
+  `).all(uid, uid);
+  res.json({ decks });
+}
+
+/* ── POST /api/flashcards/decks ────────────────────────────────────────── */
+function createDeck(req, res) {
+  const uid  = req.user.id;
+  const { title, description = '', color = '#9B5DE5' } = req.body;
+  if (!title?.trim()) return res.status(400).json({ error: 'Title required' });
+  const r = db.prepare(
+    `INSERT INTO flashcard_decks (user_id, title, description, color) VALUES (?,?,?,?)`
+  ).run(uid, title.trim(), description, color);
+  res.json({ id: r.lastInsertRowid, title: title.trim(), description, color, card_count: 0, due_count: 0 });
+}
+
+/* ── PUT /api/flashcards/decks/:id ─────────────────────────────────────── */
+function updateDeck(req, res) {
+  const uid = req.user.id;
+  const { title, description, color } = req.body;
+  const deck = db.prepare(`SELECT * FROM flashcard_decks WHERE id = ? AND user_id = ?`)
+                  .get(req.params.id, uid);
+  if (!deck) return res.status(404).json({ error: 'Not found' });
+  db.prepare(`UPDATE flashcard_decks SET title=?, description=?, color=? WHERE id=?`)
+    .run(title ?? deck.title, description ?? deck.description, color ?? deck.color, deck.id);
+  res.json({ ok: true });
+}
+
+/* ── DELETE /api/flashcards/decks/:id ──────────────────────────────────── */
+function deleteDeck(req, res) {
+  const uid = req.user.id;
+  const deck = db.prepare(`SELECT id FROM flashcard_decks WHERE id = ? AND user_id = ?`)
+                  .get(req.params.id, uid);
+  if (!deck) return res.status(404).json({ error: 'Not found' });
+  db.prepare(`DELETE FROM flashcard_decks WHERE id = ?`).run(deck.id);
+  res.json({ ok: true });
+}
+
+/* ── GET /api/flashcards/decks/:id/cards ───────────────────────────────── */
+function getCards(req, res) {
+  const uid = req.user.id;
+  const deck = db.prepare(`SELECT id FROM flashcard_decks WHERE id = ? AND user_id = ?`)
+                  .get(req.params.id, uid);
+  if (!deck) return res.status(404).json({ error: 'Not found' });
+  const cards = db.prepare(`
+    SELECT c.*, r.ease_factor, r.interval_days, r.repetitions, r.due_at, r.last_reviewed
+    FROM flashcard_cards c
+    LEFT JOIN flashcard_reviews r ON r.card_id = c.id AND r.user_id = ?
+    WHERE c.deck_id = ?
+    ORDER BY c.order_idx, c.id
+  `).all(uid, deck.id);
+  res.json({ cards });
+}
+
+/* ── POST /api/flashcards/decks/:id/cards ──────────────────────────────── */
+function addCard(req, res) {
+  const uid = req.user.id;
+  const deck = db.prepare(`SELECT id FROM flashcard_decks WHERE id = ? AND user_id = ?`)
+                  .get(req.params.id, uid);
+  if (!deck) return res.status(404).json({ error: 'Not found' });
+  const { front = '', back = '' } = req.body;
+  const maxIdx = db.prepare(`SELECT MAX(order_idx) AS m FROM flashcard_cards WHERE deck_id = ?`)
+                    .get(deck.id)?.m ?? -1;
+  const r = db.prepare(`INSERT INTO flashcard_cards (deck_id, front, back, order_idx) VALUES (?,?,?,?)`)
+               .run(deck.id, front, back, maxIdx + 1);
+  res.json({ id: r.lastInsertRowid, deck_id: deck.id, front, back, order_idx: maxIdx + 1 });
+}
+
+/* ── POST /api/flashcards/decks/:id/cards/bulk ──────────────────────────── */
+function addCardsBulk(req, res) {
+  const uid = req.user.id;
+  const deck = db.prepare(`SELECT id FROM flashcard_decks WHERE id = ? AND user_id = ?`)
+                  .get(req.params.id, uid);
+  if (!deck) return res.status(404).json({ error: 'Not found' });
+  const { cards } = req.body;
+  if (!Array.isArray(cards) || !cards.length) return res.status(400).json({ error: 'cards[] required' });
+  const maxIdx = db.prepare(`SELECT MAX(order_idx) AS m FROM flashcard_cards WHERE deck_id = ?`)
+                    .get(deck.id)?.m ?? -1;
+  const stmt = db.prepare(`INSERT INTO flashcard_cards (deck_id, front, back, order_idx) VALUES (?,?,?,?)`);
+  const inserted = [];
+  const ins = db.transaction(() => {
+    cards.forEach((c, i) => {
+      const r = stmt.run(deck.id, c.front || '', c.back || '', maxIdx + 1 + i);
+      inserted.push({ id: r.lastInsertRowid, front: c.front, back: c.back });
+    });
+  });
+  ins();
+  res.json({ inserted });
+}
+
+/* ── PUT /api/flashcards/cards/:id ─────────────────────────────────────── */
+function updateCard(req, res) {
+  const uid  = req.user.id;
+  const card = db.prepare(`
+    SELECT c.* FROM flashcard_cards c
+    JOIN flashcard_decks d ON d.id = c.deck_id
+    WHERE c.id = ? AND d.user_id = ?
+  `).get(req.params.id, uid);
+  if (!card) return res.status(404).json({ error: 'Not found' });
+  const { front, back } = req.body;
+  db.prepare(`UPDATE flashcard_cards SET front=?, back=? WHERE id=?`)
+    .run(front ?? card.front, back ?? card.back, card.id);
+  res.json({ ok: true });
+}
+
+/* ── DELETE /api/flashcards/cards/:id ──────────────────────────────────── */
+function deleteCard(req, res) {
+  const uid  = req.user.id;
+  const card = db.prepare(`
+    SELECT c.id FROM flashcard_cards c
+    JOIN flashcard_decks d ON d.id = c.deck_id
+    WHERE c.id = ? AND d.user_id = ?
+  `).get(req.params.id, uid);
+  if (!card) return res.status(404).json({ error: 'Not found' });
+  db.prepare(`DELETE FROM flashcard_cards WHERE id = ?`).run(card.id);
+  res.json({ ok: true });
+}
+
+/* ── GET /api/flashcards/decks/:id/study ───────────────────────────────── */
+function getStudySession(req, res) {
+  const uid = req.user.id;
+  const deck = db.prepare(`SELECT id FROM flashcard_decks WHERE id = ? AND user_id = ?`)
+                  .get(req.params.id, uid);
+  if (!deck) return res.status(404).json({ error: 'Not found' });
+  // due cards first, then new cards (no review yet), limit 20
+  const cards = db.prepare(`
+    SELECT c.id, c.front, c.back,
+      COALESCE(r.ease_factor, 2.5) AS ease_factor,
+      COALESCE(r.interval_days, 1) AS interval_days,
+      COALESCE(r.repetitions, 0)   AS repetitions,
+      COALESCE(r.due_at, datetime('now')) AS due_at,
+      r.last_reviewed,
+      CASE WHEN r.id IS NULL THEN 0 ELSE 1 END AS seen
+    FROM flashcard_cards c
+    LEFT JOIN flashcard_reviews r ON r.card_id = c.id AND r.user_id = ?
+    WHERE c.deck_id = ?
+      AND (r.id IS NULL OR r.due_at <= datetime('now'))
+    ORDER BY seen ASC, r.due_at ASC
+    LIMIT 20
+  `).all(uid, deck.id);
+  const total_due = db.prepare(`
+    SELECT COUNT(*) AS n FROM flashcard_cards c
+    LEFT JOIN flashcard_reviews r ON r.card_id = c.id AND r.user_id = ?
+    WHERE c.deck_id = ? AND (r.id IS NULL OR r.due_at <= datetime('now'))
+  `).get(uid, deck.id).n;
+  res.json({ cards, total_due });
+}
+
+/* ── POST /api/flashcards/cards/:id/review ─────────────────────────────── */
+function submitReview(req, res) {
+  const uid     = req.user.id;
+  const { quality } = req.body;   // 0..5
+  if (quality === undefined || quality < 0 || quality > 5)
+    return res.status(400).json({ error: 'quality 0-5 required' });
+
+  const card = db.prepare(`
+    SELECT c.id FROM flashcard_cards c
+    JOIN flashcard_decks d ON d.id = c.deck_id
+    WHERE c.id = ? AND d.user_id = ?
+  `).get(req.params.id, uid);
+  if (!card) return res.status(404).json({ error: 'Not found' });
+
+  const existing = db.prepare(
+    `SELECT * FROM flashcard_reviews WHERE user_id = ? AND card_id = ?`
+  ).get(uid, card.id);
+
+  const prev = existing || { ease_factor: 2.5, interval_days: 1, repetitions: 0 };
+  const next = sm2(prev.ease_factor, prev.interval_days, prev.repetitions, quality);
+
+  if (existing) {
+    db.prepare(`
+      UPDATE flashcard_reviews
+      SET ease_factor=?, interval_days=?, repetitions=?, due_at=?, last_reviewed=datetime('now')
+      WHERE user_id=? AND card_id=?
+    `).run(next.easeFactor, next.intervalDays, next.repetitions, next.dueAt, uid, card.id);
+  } else {
+    db.prepare(`
+      INSERT INTO flashcard_reviews (user_id, card_id, ease_factor, interval_days, repetitions, due_at, last_reviewed)
+      VALUES (?,?,?,?,?,?,datetime('now'))
+    `).run(uid, card.id, next.easeFactor, next.intervalDays, next.repetitions, next.dueAt);
+  }
+  res.json({ ok: true, next_review: next.dueAt, interval_days: next.intervalDays });
+}
+
+/* ── GET /api/flashcards/stats ─────────────────────────────────────────── */
+function getStats(req, res) {
+  const uid = req.user.id;
+  const decks_count = db.prepare(`SELECT COUNT(*) AS n FROM flashcard_decks WHERE user_id=?`).get(uid).n;
+  const cards_count = db.prepare(`
+    SELECT COUNT(*) AS n FROM flashcard_cards c
+    JOIN flashcard_decks d ON d.id = c.deck_id WHERE d.user_id=?
+  `).get(uid).n;
+  const due_count = db.prepare(`
+    SELECT COUNT(*) AS n FROM flashcard_cards c
+    JOIN flashcard_decks d ON d.id = c.deck_id
+    LEFT JOIN flashcard_reviews r ON r.card_id = c.id AND r.user_id = ?
+    WHERE d.user_id = ? AND (r.id IS NULL OR r.due_at <= datetime('now'))
+  `).get(uid, uid).n;
+  const reviewed_today = db.prepare(`
+    SELECT COUNT(*) AS n FROM flashcard_reviews
+    WHERE user_id = ? AND date(last_reviewed) = date('now')
+  `).get(uid).n;
+  res.json({ decks_count, cards_count, due_count, reviewed_today });
+}
+
+module.exports = {
+  listDecks, createDeck, updateDeck, deleteDeck,
+  getCards, addCard, addCardsBulk, updateCard, deleteCard,
+  getStudySession, submitReview, getStats,
+};
diff --git a/backend/src/controllers/gamesController.js b/backend/src/controllers/gamesController.js
new file mode 100644
index 0000000..183a4e7
--- /dev/null
+++ b/backend/src/controllers/gamesController.js
@@ -0,0 +1,310 @@
+'use strict';
+const db = require('../db/db');
+const { awardXP } = require('./gamificationController');
+
+/* ── Crossword generator (improved) ──────────────────────────────────── */
+// Algorithm based on MichaelWehar/crossword-layout-generator scoring with additions:
+//  1. Enumerate candidates from already-placed words (only perpendicular directions)
+//  2. Weighted score: connections 70% + center 15% + orientation balance 10% + length 5%
+//  3. Two-pass: retry skipped words after full first pass
+//  4. Random pick from top-3 candidates per attempt for variety
+//  5. 120 attempts, keeping best result by placed-word count
+const CW_GRID      = 20;
+const CW_MAX_WORDS = 10;
+const CW_ATTEMPTS  = 120;
+
+function _shuffle(arr) {
+  const a = [...arr];
+  for (let i = a.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [a[i], a[j]] = [a[j], a[i]];
+  }
+  return a;
+}
+
+function _cwPlace(grid, word, row, col, dir) {
+  for (let i = 0; i < word.length; i++) {
+    if (dir === 'across') grid[row][col + i] = word[i];
+    else                  grid[row + i][col] = word[i];
+  }
+}
+
+// Returns number of valid intersections (≥0) if placement is valid, -1 if invalid
+function _cwCheck(grid, word, row, col, dir, N) {
+  if (row < 0 || col < 0) return -1;
+  const endR = dir === 'down'   ? row + word.length - 1 : row;
+  const endC = dir === 'across' ? col + word.length - 1 : col;
+  if (endR >= N || endC >= N) return -1;
+
+  // No letter immediately before/after word in its own direction
+  if (dir === 'across') {
+    if (col > 0      && grid[row][col - 1])      return -1;
+    if (endC < N - 1 && grid[row][endC + 1])     return -1;
+  } else {
+    if (row > 0      && grid[row - 1][col])      return -1;
+    if (endR < N - 1 && grid[endR + 1][col])     return -1;
+  }
+
+  let intersections = 0;
+  for (let i = 0; i < word.length; i++) {
+    const r = dir === 'across' ? row     : row + i;
+    const c = dir === 'across' ? col + i : col;
+    const ex = grid[r][c];
+    if (ex !== null) {
+      if (ex !== word[i]) return -1;   // letter conflict
+      intersections++;
+    } else {
+      // Empty cell — perpendicular neighbours must be empty
+      if (dir === 'across') {
+        if (r > 0     && grid[r - 1][c]) return -1;
+        if (r < N - 1 && grid[r + 1][c]) return -1;
+      } else {
+        if (c > 0     && grid[r][c - 1]) return -1;
+        if (c < N - 1 && grid[r][c + 1]) return -1;
+      }
+    }
+  }
+  return intersections;
+}
+
+// Find all valid placements by iterating over already-placed words.
+// Only tries the direction PERPENDICULAR to each placed word — guaranteed crossing.
+function _cwFindPlacements(grid, word, placed, N, center) {
+  const seen       = new Set();
+  const candidates = [];
+  const acrossCount = placed.filter(p => p.dir === 'across').length;
+  const downCount   = placed.length - acrossCount;
+
+  for (const pw of placed) {
+    const newDir = pw.dir === 'across' ? 'down' : 'across';
+    for (let wi = 0; wi < word.length; wi++) {
+      for (let pi = 0; pi < pw.word.length; pi++) {
+        if (word[wi] !== pw.word[pi]) continue;
+
+        // Intersection cell on the grid
+        const ir = pw.dir === 'across' ? pw.row       : pw.row + pi;
+        const ic = pw.dir === 'across' ? pw.col + pi  : pw.col;
+
+        // Start of new word so that letter wi lands at (ir, ic)
+        const r = newDir === 'across' ? ir       : ir - wi;
+        const c = newDir === 'across' ? ic - wi  : ic;
+
+        const key = `${r},${c},${newDir}`;
+        if (seen.has(key)) continue;
+        seen.add(key);
+
+        const intersections = _cwCheck(grid, word, r, c, newDir, N);
+        if (intersections < 1) continue;
+
+        // Weighted score (MichaelWehar 70/15/10/5 split)
+        const maxDist = center * Math.SQRT2;
+        const dist    = Math.hypot(r - center, c - center);
+        const conn    = intersections / (word.length / 2);
+        const cen     = 1 - dist / maxDist;
+        const oBal    = newDir === 'down'
+          ? (acrossCount >= downCount   ? 0.1 : 0)
+          : (downCount   >= acrossCount ? 0.1 : 0);
+        const len     = word.length / N;
+        const score   = conn * 0.7 + cen * 0.15 + oBal * 0.1 + len * 0.05;
+
+        candidates.push({ row: r, col: c, dir: newDir, intersections, score });
+      }
+    }
+  }
+  return candidates;
+}
+
+function _buildAttempt(words, N) {
+  const grid   = Array.from({ length: N }, () => Array(N).fill(null));
+  const placed = [];
+  const center = Math.floor(N / 2);
+
+  // First word: placed across at center
+  const first = words[0];
+  const r0 = center;
+  const c0 = Math.max(1, center - Math.floor(first.word.length / 2));
+  if (c0 + first.word.length > N - 1) return { placed, grid };
+  _cwPlace(grid, first.word, r0, c0, 'across');
+  placed.push({ ...first, row: r0, col: c0, dir: 'across' });
+
+  const skipped = [];
+  for (const pass of [words.slice(1), skipped]) {
+    for (const w of pass) {
+      if (placed.length >= CW_MAX_WORDS) break;
+      const cands = _cwFindPlacements(grid, w.word, placed, N, center);
+      if (!cands.length) {
+        if (pass !== skipped) skipped.push(w);
+        continue;
+      }
+      cands.sort((a, b) => b.score - a.score);
+      // Pick randomly from top 3 for variety across attempts
+      const pick = cands[Math.floor(Math.random() * Math.min(3, cands.length))];
+      _cwPlace(grid, w.word, pick.row, pick.col, pick.dir);
+      placed.push({ ...w, row: pick.row, col: pick.col, dir: pick.dir });
+    }
+  }
+
+  return { placed, grid };
+}
+
+function buildCrossword(wordList) {
+  const N = CW_GRID;
+  let best = null;
+
+  // Baseline: longest words first
+  const sorted  = [...wordList].sort((a, b) => b.word.length - a.word.length);
+  best = _buildAttempt(sorted, N);
+
+  for (let a = 1; a < CW_ATTEMPTS; a++) {
+    if (best.placed.length >= CW_MAX_WORDS) break;
+    const shuffled = _shuffle(wordList);
+    // Ensure a long word is near the front (better first placement)
+    shuffled.sort((x, y) => (y.word.length >= 6 ? 1 : 0) - (x.word.length >= 6 ? 1 : 0));
+    const attempt = _buildAttempt(shuffled, N);
+    if (attempt.placed.length > best.placed.length) best = attempt;
+  }
+
+  if (!best || best.placed.length < 3) return null;
+
+  // Compact: trim empty rows/cols
+  const { placed, grid } = best;
+  let minR = N, maxR = 0, minC = N, maxC = 0;
+  for (let r = 0; r < N; r++)
+    for (let c = 0; c < N; c++)
+      if (grid[r][c]) {
+        minR = Math.min(minR, r); maxR = Math.max(maxR, r);
+        minC = Math.min(minC, c); maxC = Math.max(maxC, c);
+      }
+
+  const trimmed = [];
+  for (let r = minR; r <= maxR; r++) trimmed.push(grid[r].slice(minC, maxC + 1));
+
+  const words = placed.map(p => ({
+    word: p.word, clue: p.clue,
+    subjectName: p.subjectName,
+    row: p.row - minR, col: p.col - minC, dir: p.dir,
+  }));
+
+  // Number words in reading order (top→bottom, left→right)
+  words.sort((a, b) => a.row !== b.row ? a.row - b.row : a.col - b.col);
+  const starts = new Map();
+  let num = 1;
+  for (const w of words) {
+    const key = `${w.row},${w.col}`;
+    if (!starts.has(key)) starts.set(key, num++);
+    w.num = starts.get(key);
+  }
+
+  return { grid: trimmed, words, across: words.filter(w => w.dir === 'across'), down: words.filter(w => w.dir === 'down') };
+}
+
+/* ── GET /api/games/hangman/word?subject_slug=bio ─────────────────────── */
+function hangmanWord(req, res) {
+  const { subject_slug } = req.query;
+
+  let row;
+  if (subject_slug) {
+    const subj = db.prepare('SELECT id FROM subjects WHERE slug = ?').get(subject_slug);
+    if (!subj) return res.status(404).json({ error: 'Subject not found' });
+    row = db.prepare(`
+      SELECT t.id, t.name, s.name AS subject_name, s.slug AS subject_slug
+      FROM topics t
+      JOIN subjects s ON s.id = t.subject_id
+      WHERE t.subject_id = ? AND length(t.name) >= 4
+      ORDER BY RANDOM() LIMIT 1
+    `).get(subj.id);
+  } else {
+    row = db.prepare(`
+      SELECT t.id, t.name, s.name AS subject_name, s.slug AS subject_slug
+      FROM topics t
+      JOIN subjects s ON s.id = t.subject_id
+      WHERE length(t.name) >= 4
+      ORDER BY RANDOM() LIMIT 1
+    `).get();
+  }
+
+  if (!row) return res.status(404).json({ error: 'No topics found' });
+
+  res.json({
+    topicId:     row.id,
+    word:        row.name.toUpperCase(),
+    hint:        row.subject_name,
+    subjectSlug: row.subject_slug,
+  });
+}
+
+/* ── POST /api/games/hangman/complete ─────────────────────────────────── */
+function hangmanComplete(req, res) {
+  const { won, errors } = req.body;
+  if (typeof won !== 'boolean') return res.status(400).json({ error: 'won required' });
+
+  let xpGain = 0;
+  if (won) {
+    // 15 XP perfect, -2 per error, min 5
+    xpGain = Math.max(5, 15 - (Number(errors) || 0) * 2);
+  }
+
+  if (xpGain > 0) {
+    try { awardXP(req.user.id, xpGain, 'hangman_win'); } catch (e) { console.error('[games] hangman XP:', e.message); }
+  }
+
+  res.json({ ok: true, xp: xpGain });
+}
+
+/* ── GET /api/games/crossword/generate?subject_slug= ──────────────────── */
+function crosswordGenerate(req, res) {
+  const { subject_slug } = req.query;
+
+  let rows;
+  const base = `
+    SELECT t.id, t.name, s.name AS subject_name,
+           (SELECT q.text FROM questions q WHERE q.topic_id = t.id ORDER BY RANDOM() LIMIT 1) AS clue
+    FROM topics t
+    JOIN subjects s ON s.id = t.subject_id
+    WHERE length(t.name) BETWEEN 4 AND 12
+      AND t.name NOT LIKE '% %'
+      AND t.name NOT GLOB '*[0-9]*'
+  `;
+
+  if (subject_slug) {
+    const subj = db.prepare('SELECT id FROM subjects WHERE slug = ?').get(subject_slug);
+    if (!subj) return res.status(404).json({ error: 'Subject not found' });
+    rows = db.prepare(base + ' AND t.subject_id = ? ORDER BY RANDOM() LIMIT 50').all(subj.id);
+  } else {
+    rows = db.prepare(base + ' ORDER BY RANDOM() LIMIT 50').all();
+  }
+
+  if (rows.length < 3) return res.status(404).json({ error: 'Not enough topics for a crossword' });
+
+  const wordList = rows
+    .filter(r => /^[А-яЁёA-Za-z]+$/.test(r.name))  // only letters, no numbers/symbols
+    .map(r => ({
+      word: r.name.toUpperCase(),
+      clue: r.clue || r.subject_name,
+      subjectName: r.subject_name,
+    }));
+
+  const crossword = buildCrossword(wordList);
+  if (!crossword) return res.status(404).json({ error: 'Could not build crossword' });
+
+  res.json(crossword);
+}
+
+/* ── POST /api/games/crossword/complete ───────────────────────────────── */
+function crosswordComplete(req, res) {
+  const { completed, hintsUsed } = req.body;
+  if (typeof completed !== 'boolean') return res.status(400).json({ error: 'completed required' });
+
+  let xpGain = 0;
+  if (completed) {
+    xpGain = Math.max(5, 20 - (Number(hintsUsed) || 0) * 3);
+  }
+
+  if (xpGain > 0) {
+    try { awardXP(req.user.id, xpGain, 'crossword_win'); } catch (e) { console.error('[games] crossword XP:', e.message); }
+  }
+
+  res.json({ ok: true, xp: xpGain });
+}
+
+module.exports = { hangmanWord, hangmanComplete, crosswordGenerate, crosswordComplete };
diff --git a/backend/src/controllers/gamificationController.js b/backend/src/controllers/gamificationController.js
new file mode 100644
index 0000000..c1d5f70
--- /dev/null
+++ b/backend/src/controllers/gamificationController.js
@@ -0,0 +1,854 @@
+const db = require('../db/db');
+const sse = require('../sse');
+const { pushParentNotif } = require('../utils/notifications');
+
+/* ═══════════════════════════════════════════════════════════════════════
+   Gamification — XP, Levels, Streaks, Achievements, Leaderboard, Goals
+   ═══════════════════════════════════════════════════════════════════════ */
+
+// ── XP thresholds: level = floor(sqrt(xp / 100)) + 1 ──
+function xpToLevel(xp)  { return Math.floor(Math.sqrt((xp || 0) / 100)) + 1; }
+function levelMinXp(lv)  { return (lv - 1) * (lv - 1) * 100; }
+function levelMaxXp(lv)  { return lv * lv * 100; }
+
+const RANKS = [
+  [1,  'Новичок'],
+  [5,  'Ученик'],
+  [10, 'Знаток'],
+  [15, 'Эксперт'],
+  [20, 'Мастер'],
+  [30, 'Гуру'],
+];
+function rankName(level) {
+  let name = 'Новичок';
+  for (const [min, r] of RANKS) if (level >= min) name = r;
+  return name;
+}
+
+/* ── Prepared statements (module-level to avoid re-parsing per request) ── */
+const stmts = {
+  // XP & coins (hot: called on every test finish)
+  insertXpLog:       db.prepare('INSERT INTO xp_log (user_id, amount, reason) VALUES (?, ?, ?)'),
+  incrXP:            db.prepare('UPDATE users SET xp = xp + ? WHERE id = ?'),
+  getXP:             db.prepare('SELECT xp FROM users WHERE id = ?'),
+  setLevel:          db.prepare('UPDATE users SET level = ? WHERE id = ?'),
+  incrCoins:         db.prepare('UPDATE users SET coins = coins + ? WHERE id = ?'),
+
+  // Streak
+  getStreak:         db.prepare('SELECT streak_current, streak_best, streak_date FROM users WHERE id = ?'),
+  setStreak:         db.prepare('UPDATE users SET streak_current = ?, streak_best = ?, streak_date = ? WHERE id = ?'),
+
+  // getXPInfo
+  getUserXPInfo:     db.prepare('SELECT xp, level, streak_current, streak_best, streak_date FROM users WHERE id = ?'),
+
+  countUserAssignments: db.prepare(`SELECT COUNT(*) as n FROM assignment_sessions ass JOIN test_sessions ts ON ts.id = ass.session_id WHERE ts.user_id = ? AND ts.status = 'completed'`),
+
+  // Achievements (hot: up to 22 checks per test finish)
+  getAchBySlug:      db.prepare('SELECT id, title, icon FROM achievements WHERE slug = ?'),
+  hasUserAch:        db.prepare('SELECT 1 FROM user_achievements WHERE user_id = ? AND achievement_id = ?'),
+  insertUserAch:     db.prepare('INSERT INTO user_achievements (user_id, achievement_id) VALUES (?, ?)'),
+  insertAchNotif:    db.prepare("INSERT INTO notifications (user_id, type, message, link) VALUES (?, 'achievement', ?, '/profile')"),
+  getUserForAch:     db.prepare(`
+    SELECT u.xp, u.level, u.streak_current, u.lab_experiments, u.lab_reactions,
+           (SELECT COUNT(*) FROM test_sessions WHERE user_id = u.id AND status = 'completed')                   AS test_count,
+           (SELECT COUNT(*) FROM test_sessions WHERE user_id = u.id AND status = 'completed' AND score = total) AS perfect_count,
+           (SELECT COUNT(*) FROM class_members  WHERE user_id = u.id)                                           AS class_count
+    FROM users u WHERE u.id = ?
+  `),
+  getLast5Tests:     db.prepare(`
+    SELECT score, total FROM test_sessions
+    WHERE user_id = ? AND status = 'completed'
+    ORDER BY finished_at DESC LIMIT 5
+  `),
+
+  // Lab
+  incrLabExp:        db.prepare('UPDATE users SET lab_experiments = lab_experiments + 1 WHERE id = ?'),
+  incrLabReact:      db.prepare('UPDATE users SET lab_reactions = lab_reactions + ? WHERE id = ?'),
+
+  // Daily goals
+  getDailyGoal:      db.prepare('SELECT * FROM daily_goals WHERE user_id = ? AND date = ?'),
+  getUserGoalTier:   db.prepare('SELECT goal_tier FROM users WHERE id = ?'),
+  insertDailyGoal:   db.prepare('INSERT INTO daily_goals (user_id, date, tests_target, tests_done, xp_target, xp_earned) VALUES (?, ?, ?, 0, ?, 0)'),
+  incrDailyGoal:     db.prepare('UPDATE daily_goals SET tests_done = tests_done + ?, xp_earned = xp_earned + ? WHERE user_id = ? AND date = ?'),
+  checkGoalBonus:    db.prepare("SELECT 1 FROM xp_log WHERE user_id = ? AND reason = 'daily_goal' AND date(created_at) = ?"),
+
+  // Challenges
+  getOpenChallenges: db.prepare('SELECT * FROM challenges WHERE user_id = ? AND week = ? AND completed = 0'),
+  incrChallenge:     db.prepare('UPDATE challenges SET progress = MIN(progress + ?, target) WHERE id = ?'),
+  getChallengeById:  db.prepare('SELECT * FROM challenges WHERE id = ?'),
+  completeChallenge: db.prepare('UPDATE challenges SET completed = 1 WHERE id = ?'),
+  getChallengesWeek: db.prepare('SELECT * FROM challenges WHERE user_id = ? AND week = ? ORDER BY completed, id'),
+  getChallengeOwned: db.prepare('SELECT * FROM challenges WHERE id = ? AND user_id = ?'),
+  markClaimed:       db.prepare('UPDATE challenges SET claimed = 1 WHERE id = ?'),
+
+  // API handlers (dashboard / profile load)
+  getUserPrefs:      db.prepare('SELECT goal_tier, avatar_frame FROM users WHERE id = ?'),
+  getUnlockedSlugs:  db.prepare('SELECT a.slug FROM user_achievements ua JOIN achievements a ON a.id = ua.achievement_id WHERE ua.user_id = ?'),
+  getUserFrame:      db.prepare('SELECT avatar_frame FROM users WHERE id = ?'),
+  checkFrameUnlock:  db.prepare('SELECT a.id FROM achievements a JOIN user_achievements ua ON ua.achievement_id = a.id WHERE a.slug = ? AND ua.user_id = ?'),
+  setUserFrame:      db.prepare('UPDATE users SET avatar_frame = ? WHERE id = ?'),
+  setUserGoalTier:   db.prepare('UPDATE users SET goal_tier = ? WHERE id = ?'),
+  getAllAchs:        db.prepare('SELECT id, slug, title, icon, category, description FROM achievements ORDER BY id'),
+  getUserAchs:       db.prepare('SELECT achievement_id, unlocked_at FROM user_achievements WHERE user_id = ?'),
+  xpHistory:         db.prepare('SELECT amount, reason, created_at FROM xp_log WHERE user_id = ? ORDER BY created_at DESC LIMIT ?'),
+
+  // Admin
+  checkUserById:     db.prepare('SELECT id FROM users WHERE id = ?'),
+  getUserGamInfo:    db.prepare('SELECT xp, level, coins FROM users WHERE id = ?'),
+  adminResetUser:    db.prepare("UPDATE users SET xp=0, level=1, coins=0, streak_current=0, streak_best=0, streak_date=NULL, avatar_frame='default' WHERE id=?"),
+  deleteXpLog:       db.prepare('DELETE FROM xp_log WHERE user_id=?'),
+  deleteUserAchs:    db.prepare('DELETE FROM user_achievements WHERE user_id=?'),
+  deleteDailyGoals:  db.prepare('DELETE FROM daily_goals WHERE user_id=?'),
+  deleteChallenges:  db.prepare('DELETE FROM challenges WHERE user_id=?'),
+  deleteUserPurch:   db.prepare('DELETE FROM user_purchases WHERE user_id=?'),
+  adminGetUserFull:  db.prepare('SELECT id, name, xp, level, coins, streak_current, streak_best, goal_tier, avatar_frame FROM users WHERE id=?'),
+  adminGetUserAchs:  db.prepare('SELECT a.slug, a.title, a.icon, ua.unlocked_at FROM user_achievements ua JOIN achievements a ON a.id=ua.achievement_id WHERE ua.user_id=?'),
+  adminGetUserPurch: db.prepare('SELECT si.name, si.type, up.purchased_at FROM user_purchases up JOIN shop_items si ON si.id=up.item_id WHERE up.user_id=?'),
+  adminGetUserXPH:   db.prepare('SELECT amount, reason, created_at FROM xp_log WHERE user_id=? ORDER BY created_at DESC LIMIT 30'),
+  adminTotalXP:      db.prepare('SELECT COALESCE(SUM(xp),0) as v FROM users'),
+  adminTotalCoins:   db.prepare('SELECT COALESCE(SUM(coins),0) as v FROM users'),
+  adminAvgLevel:     db.prepare("SELECT ROUND(AVG(level),1) as v FROM users WHERE role='student'"),
+  adminAchCount:     db.prepare('SELECT COUNT(*) as v FROM user_achievements'),
+  adminTopXP:        db.prepare("SELECT id, name, xp, level, coins FROM users WHERE role='student' ORDER BY xp DESC LIMIT 10"),
+  adminRecentXP:     db.prepare('SELECT xl.amount, xl.reason, xl.created_at, u.name FROM xp_log xl JOIN users u ON u.id=xl.user_id ORDER BY xl.created_at DESC LIMIT 20'),
+  adminTotalPurch:   db.prepare('SELECT COUNT(*) as v FROM user_purchases'),
+  adminRecentPurch:  db.prepare(`SELECT up.purchased_at, u.name AS user_name, si.name AS item_name, si.price, si.type
+    FROM user_purchases up JOIN users u ON u.id=up.user_id JOIN shop_items si ON si.id=up.item_id
+    ORDER BY up.purchased_at DESC LIMIT 20`),
+};
+
+/* ── Coins service ────────────────────────────────────────────────────── */
+
+function awardCoins(userId, amount, reason) {
+  if (!amount || amount <= 0) return;
+  stmts.incrCoins.run(amount, userId);
+}
+
+/* ── XP service ───────────────────────────────────────────────────────── */
+
+function awardXP(userId, amount, reason) {
+  if (!amount || amount <= 0) return;
+  stmts.insertXpLog.run(userId, amount, reason);
+  stmts.incrXP.run(amount, userId);
+  const user = stmts.getXP.get(userId);
+  if (user) {
+    const newLevel = xpToLevel(user.xp);
+    stmts.setLevel.run(newLevel, userId);
+  }
+  // Award coins proportionally: 1 coin per 10 XP
+  awardCoins(userId, Math.floor(amount / 10), reason);
+}
+
+function getXPInfo(userId) {
+  const user = stmts.getUserXPInfo.get(userId);
+  if (!user) return null;
+  // Always derive level from XP so stale DB level never causes wrong display
+  const level = xpToLevel(user.xp);
+  // Keep DB in sync (silently)
+  if (user.level !== level) stmts.setLevel.run(level, userId);
+  return {
+    xp:        user.xp || 0,
+    level,
+    rank:      rankName(level),
+    levelMin:  levelMinXp(level),
+    levelMax:  levelMaxXp(level),
+    streak:    user.streak_current || 0,
+    streakBest: user.streak_best || 0,
+  };
+}
+
+/* ── Streak service ───────────────────────────────────────────────────── */
+
+function updateStreak(userId) {
+  const user = stmts.getStreak.get(userId);
+  if (!user) return;
+  const today = new Date().toISOString().slice(0, 10); // YYYY-MM-DD
+  if (user.streak_date === today) return; // already counted today
+
+  const yesterday = new Date(Date.now() - 86400000).toISOString().slice(0, 10);
+  const oldStreak = user.streak_current || 0;
+  let newStreak;
+  if (user.streak_date === yesterday) {
+    newStreak = oldStreak + 1;
+  } else {
+    newStreak = 1;
+    // Notify parents about streak loss (only if was meaningful)
+    if (oldStreak >= 3) {
+      const u = db.prepare('SELECT name FROM users WHERE id = ?').get(userId);
+      pushParentNotif(userId, 'streak_lost', `${u?.name || 'Ученик'} потерял стрик (было ${oldStreak} дней)`);
+    }
+  }
+  const newBest = Math.max(newStreak, user.streak_best || 0);
+  stmts.setStreak.run(newStreak, newBest, today, userId);
+
+  // streak XP bonus (first activity of the day)
+  awardXP(userId, 30, 'daily_activity');
+
+  return newStreak;
+}
+
+/* ── Achievement definitions ──────────────────────────────────────────── */
+
+const ACHIEVEMENT_DEFS = [
+  // First steps
+  { slug: 'first_test',     title: 'Первый тест',         icon: 'target',     cat: 'start',   desc: 'Пройти свой первый тест' },
+  { slug: 'first_perfect',  title: 'Идеальный результат', icon: 'hundred',    cat: 'start',   desc: 'Получить 100% на тесте' },
+  { slug: 'first_class',    title: 'Вступил в класс',     icon: 'school',     cat: 'start',   desc: 'Присоединиться к классу' },
+  // Streaks
+  { slug: 'streak_3',       title: 'Три дня подряд',      icon: 'flame',      cat: 'streak',  desc: '3 дня активности подряд' },
+  { slug: 'streak_7',       title: 'Неделя подряд',       icon: 'flame',      cat: 'streak',  desc: '7 дней активности подряд' },
+  { slug: 'streak_30',      title: 'Месяц подряд',        icon: 'flame',      cat: 'streak',  desc: '30 дней активности подряд' },
+  // Volume
+  { slug: 'tests_10',       title: '10 тестов',            icon: 'file-text', cat: 'volume',  desc: 'Завершить 10 тестов' },
+  { slug: 'tests_50',       title: '50 тестов',            icon: 'books',     cat: 'volume',  desc: 'Завершить 50 тестов' },
+  { slug: 'tests_100',      title: '100 тестов',           icon: 'trophy',    cat: 'volume',  desc: 'Завершить 100 тестов' },
+  // Mastery
+  { slug: 'score_90',       title: 'Отличник',             icon: 'star',      cat: 'mastery', desc: '5 тестов подряд на 90%+' },
+  { slug: 'speed_demon',    title: 'Скорострел',           icon: 'zap',       cat: 'mastery', desc: 'Тест на 90%+ за <50% времени' },
+  // Levels
+  { slug: 'level_5',        title: 'Ученик',               icon: 'book-open', cat: 'level',   desc: 'Достичь 5 уровня' },
+  { slug: 'level_10',       title: 'Знаток',               icon: 'brain',     cat: 'level',   desc: 'Достичь 10 уровня' },
+  { slug: 'level_20',       title: 'Мастер',               icon: 'crown',     cat: 'level',   desc: 'Достичь 20 уровня' },
+  // XP milestones
+  { slug: 'xp_1000',        title: '1000 XP',              icon: 'diamond',   cat: 'xp',      desc: 'Набрать 1000 XP' },
+  { slug: 'xp_5000',        title: '5000 XP',              icon: 'diamond',   cat: 'xp',      desc: 'Набрать 5000 XP' },
+  { slug: 'xp_10000',       title: '10 000 XP',            icon: 'diamond',   cat: 'xp',      desc: 'Набрать 10 000 XP' },
+  // Lab / experiments
+  { slug: 'lab_first',       title: 'Первый опыт',          icon: 'flask-conical', cat: 'lab',     desc: 'Провести первый эксперимент в лаборатории' },
+  { slug: 'lab_5',           title: 'Юный химик',           icon: 'flask-conical', cat: 'lab',     desc: 'Провести 5 экспериментов' },
+  { slug: 'lab_20',          title: 'Лаборант',             icon: 'test-tubes',    cat: 'lab',     desc: 'Провести 20 экспериментов' },
+  { slug: 'lab_50',          title: 'Исследователь',        icon: 'microscope',    cat: 'lab',     desc: 'Провести 50 экспериментов' },
+  { slug: 'lab_reactions_10',title: '10 реакций',           icon: 'atom',          cat: 'lab',     desc: 'Обнаружить 10 различных реакций' },
+  { slug: 'lab_reactions_30',title: '30 реакций',           icon: 'atom',          cat: 'lab',     desc: 'Обнаружить 30 различных реакций' },
+  // Extra level milestones
+  { slug: 'level_3',         title: 'Начинающий',           icon: 'book-open',     cat: 'level',   desc: 'Достичь 3 уровня' },
+  // Red Book
+  { slug: 'rb_first',        title: 'Первый вид КК',        icon: 'leaf',          cat: 'redbook', desc: 'Открыть первый вид Красной книги' },
+  { slug: 'rb_10',           title: '10 видов КК',          icon: 'leaf',          cat: 'redbook', desc: 'Открыть 10 видов Красной книги' },
+  { slug: 'rb_25',           title: 'Четверть коллекции',   icon: 'trees',         cat: 'redbook', desc: 'Открыть 25 видов Красной книги' },
+  { slug: 'rb_50',           title: 'Половина коллекции',   icon: 'trees',         cat: 'redbook', desc: 'Открыть 50 видов Красной книги' },
+  { slug: 'rb_all_cr',       title: 'Защитник природы',     icon: 'shield-check',  cat: 'redbook', desc: 'Открыть все CR-виды Красной книги' },
+  { slug: 'rb_quest_first',  title: 'Первый квест КК',      icon: 'map',           cat: 'redbook', desc: 'Выполнить первый квест Красной книги' },
+  { slug: 'rb_quest_5',      title: 'Квестмастер КК',       icon: 'map-pin',       cat: 'redbook', desc: 'Выполнить 5 квестов Красной книги' },
+  { slug: 'rb_sighting',     title: 'Наблюдатель',          icon: 'eye',           cat: 'redbook', desc: 'Добавить первое наблюдение вида' },
+  // Theory / Library
+  { slug: 'theory_first',    title: 'Первый урок',          icon: 'book-open',     cat: 'theory',  desc: 'Прочитать первый урок' },
+  { slug: 'theory_10',       title: 'Читатель',             icon: 'library',       cat: 'theory',  desc: 'Прочитать 10 уроков' },
+  { slug: 'theory_course',   title: 'Завершил курс',        icon: 'graduation-cap',cat: 'theory',  desc: 'Пройти полный курс целиком' },
+  // Assignments
+  { slug: 'assign_first',    title: 'Первое задание',       icon: 'clipboard',     cat: 'assign',  desc: 'Сдать первое задание' },
+  { slug: 'assign_10',       title: '10 заданий',           icon: 'clipboard-check',cat: 'assign', desc: 'Сдать 10 заданий' },
+];
+
+// Avatar frames unlocked by achievements
+const AVATAR_FRAMES = [
+  { id: 'default',       name: 'Стандарт',      css: '',                                          unlock: null },
+  { id: 'fire',          name: 'Огненная',       css: 'box-shadow:0 0 0 3px #FF6B35,0 0 12px rgba(255,107,53,0.4)', unlock: 'streak_7' },
+  { id: 'diamond',       name: 'Бриллиант',      css: 'box-shadow:0 0 0 3px #06D6E0,0 0 12px rgba(6,214,224,0.4)', unlock: 'xp_5000' },
+  { id: 'gold',          name: 'Золотая',        css: 'box-shadow:0 0 0 3px #FFD700,0 0 12px rgba(255,215,0,0.4)', unlock: 'tests_100' },
+  { id: 'violet_glow',   name: 'Фиолет',        css: 'box-shadow:0 0 0 3px #9B5DE5,0 0 16px rgba(155,93,229,0.5)', unlock: 'level_10' },
+  { id: 'rainbow',       name: 'Радуга',         css: 'background:conic-gradient(#FF6B6B,#FFD93D,#6BCB77,#4D96FF,#9B5DE5,#FF6B6B);padding:3px', unlock: 'level_20' },
+  { id: 'crown',         name: 'Корона',         css: 'box-shadow:0 0 0 3px #FFD700,0 0 20px rgba(255,215,0,0.6)', unlock: 'xp_10000' },
+  { id: 'perfect',       name: 'Идеал',          css: 'box-shadow:0 0 0 3px #06D664,0 0 12px rgba(6,214,100,0.4)', unlock: 'first_perfect' },
+];
+
+function seedAchievements() {
+  const ins = db.prepare(`
+    INSERT OR IGNORE INTO achievements (slug, title, icon, category, description)
+    VALUES (?, ?, ?, ?, ?)
+  `);
+  const upd = db.prepare(`
+    UPDATE achievements SET icon = ?, category = ?, title = ?, description = ?
+    WHERE slug = ? AND (icon IS NULL OR icon = '' OR icon != ?)
+  `);
+  for (const a of ACHIEVEMENT_DEFS) {
+    ins.run(a.slug, a.title, a.icon, a.cat, a.desc);
+    upd.run(a.icon, a.cat, a.title, a.desc, a.slug, a.icon);
+  }
+}
+
+function unlockAchievement(userId, slug) {
+  const ach = stmts.getAchBySlug.get(slug);
+  if (!ach) return false;
+  const exists = stmts.hasUserAch.get(userId, ach.id);
+  if (exists) return false;
+  stmts.insertUserAch.run(userId, ach.id);
+  // Award bonus XP
+  awardXP(userId, 50, 'achievement:' + slug);
+  // Notify via SSE
+  pushAchievementNotif(userId, ach);
+  return true;
+}
+
+function pushAchievementNotif(userId, ach) {
+  try {
+    stmts.insertAchNotif.run(userId, `Достижение: ${ach.title}`);
+    sse.emit(userId, { type: 'achievement', message: `Достижение: ${ach.title}`, icon: ach.icon, title: ach.title });
+    // Award 50 coins per achievement
+    awardCoins(userId, 50, 'achievement:' + (ach.slug || ach.title));
+    // Notify parents
+    const u = db.prepare('SELECT name FROM users WHERE id = ?').get(userId);
+    pushParentNotif(userId, 'achievement', `${u?.name || 'Ученик'} получил достижение: ${ach.title}`);
+  } catch (e) { console.error('[achievement]', e.message); }
+}
+
+/* ── Achievement check engine ─────────────────────────────────────────── */
+
+function checkAchievements(userId) {
+  // Single query: user fields + session counts in one round-trip
+  const row = stmts.getUserForAch.get(userId);
+  if (!row) return;
+
+  const { test_count: testCount, perfect_count: perfectCount, class_count: classCount } = row;
+
+  // Tests
+  if (testCount >= 1)   unlockAchievement(userId, 'first_test');
+  if (testCount >= 10)  unlockAchievement(userId, 'tests_10');
+  if (testCount >= 50)  unlockAchievement(userId, 'tests_50');
+  if (testCount >= 100) unlockAchievement(userId, 'tests_100');
+
+  // Perfect score
+  if (perfectCount >= 1) unlockAchievement(userId, 'first_perfect');
+
+  // Streaks
+  const streak = row.streak_current || 0;
+  if (streak >= 3)  unlockAchievement(userId, 'streak_3');
+  if (streak >= 7)  unlockAchievement(userId, 'streak_7');
+  if (streak >= 30) unlockAchievement(userId, 'streak_30');
+
+  // Level (always derive from XP)
+  const level = xpToLevel(row.xp || 0);
+  if (level >= 3)  unlockAchievement(userId, 'level_3');
+  if (level >= 5)  unlockAchievement(userId, 'level_5');
+  if (level >= 10) unlockAchievement(userId, 'level_10');
+  if (level >= 20) unlockAchievement(userId, 'level_20');
+
+  // XP
+  const xp = row.xp || 0;
+  if (xp >= 1000)  unlockAchievement(userId, 'xp_1000');
+  if (xp >= 5000)  unlockAchievement(userId, 'xp_5000');
+  if (xp >= 10000) unlockAchievement(userId, 'xp_10000');
+
+  // Class membership
+  if (classCount >= 1) unlockAchievement(userId, 'first_class');
+
+  // 5 tests in a row with ≥90%
+  const last5 = stmts.getLast5Tests.all(userId);
+  if (last5.length >= 5 && last5.every(r => r.total > 0 && (r.score / r.total) >= 0.9)) {
+    unlockAchievement(userId, 'score_90');
+  }
+
+  // Lab
+  const labExp   = row.lab_experiments || 0;
+  const labReact = row.lab_reactions   || 0;
+  if (labExp >= 1)    unlockAchievement(userId, 'lab_first');
+  if (labExp >= 5)    unlockAchievement(userId, 'lab_5');
+  if (labExp >= 20)   unlockAchievement(userId, 'lab_20');
+  if (labExp >= 50)   unlockAchievement(userId, 'lab_50');
+  if (labReact >= 10) unlockAchievement(userId, 'lab_reactions_10');
+  if (labReact >= 30) unlockAchievement(userId, 'lab_reactions_30');
+
+  // Assignments (via assignment_sessions)
+  try {
+    const ac = stmts.countUserAssignments.get(userId);
+    const assignCount = ac?.n || 0;
+    if (assignCount >= 1)  unlockAchievement(userId, 'assign_first');
+    if (assignCount >= 10) unlockAchievement(userId, 'assign_10');
+  } catch (e) { console.error('[achievements] assignment check:', e.message); }
+}
+
+/* ── Hook: Red Book species collected / sighting added ─────────────────── */
+
+function checkRedBookAchievements(userId) {
+  try {
+    const collected = db.prepare('SELECT COUNT(*) as n FROM rb_user_collection WHERE user_id = ?').get(userId)?.n || 0;
+    if (collected >= 1)  unlockAchievement(userId, 'rb_first');
+    if (collected >= 10) unlockAchievement(userId, 'rb_10');
+    if (collected >= 25) unlockAchievement(userId, 'rb_25');
+    if (collected >= 50) unlockAchievement(userId, 'rb_50');
+
+    const crTotal     = db.prepare("SELECT COUNT(*) as n FROM rb_species WHERE category = 'CR'").get().n;
+    const crCollected = db.prepare(`
+      SELECT COUNT(*) as n FROM rb_user_collection uc
+      JOIN rb_species s ON s.id = uc.species_id
+      WHERE uc.user_id = ? AND s.category = 'CR'
+    `).get(userId)?.n || 0;
+    if (crTotal > 0 && crCollected >= crTotal) unlockAchievement(userId, 'rb_all_cr');
+
+    const quests = db.prepare("SELECT COUNT(*) as n FROM rb_user_quests WHERE user_id = ? AND status = 'completed'").get(userId)?.n || 0;
+    if (quests >= 1) unlockAchievement(userId, 'rb_quest_first');
+    if (quests >= 5) unlockAchievement(userId, 'rb_quest_5');
+
+    const sightings = db.prepare('SELECT COUNT(*) as n FROM rb_sightings WHERE user_id = ?').get(userId)?.n || 0;
+    if (sightings >= 1) unlockAchievement(userId, 'rb_sighting');
+
+    checkAchievements(userId); // also check level/xp milestones
+  } catch (e) { console.error('[checkRedBookAchievements]', e.message); }
+}
+
+/* ── Hook: called after lesson marked complete ──────────────────────────── */
+
+function onLessonComplete(userId, courseId) {
+  try {
+    awardXP(userId, 30, 'lesson_complete');
+    const done = db.prepare('SELECT COUNT(*) as n FROM lesson_progress WHERE user_id = ? AND completed = 1').get(userId)?.n || 0;
+    if (done >= 1)  unlockAchievement(userId, 'theory_first');
+    if (done >= 10) unlockAchievement(userId, 'theory_10');
+    if (courseId) {
+      const total = db.prepare('SELECT COUNT(*) as n FROM lessons WHERE course_id = ? AND is_published = 1').get(courseId)?.n || 0;
+      const courseDone = db.prepare(`
+        SELECT COUNT(*) as n FROM lesson_progress lp
+        JOIN lessons l ON lp.lesson_id = l.id
+        WHERE l.course_id = ? AND lp.user_id = ? AND lp.completed = 1
+      `).get(courseId, userId)?.n || 0;
+      if (total > 0 && courseDone >= total) unlockAchievement(userId, 'theory_course');
+    }
+    checkAchievements(userId);
+  } catch (e) { console.error('[onLessonComplete]', e.message); }
+}
+
+/* ── Hook: called after test finishes ─────────────────────────────────── */
+
+function onTestFinished(userId, score, total, timeSec, testTimeLimitSec) {
+  const pct = total > 0 ? score / total : 0;
+
+  // XP for correct answers
+  awardXP(userId, score * 10, 'correct_answers');
+
+  // XP for completing test
+  awardXP(userId, 50, 'test_complete');
+
+  // Bonus for ≥90%
+  if (pct >= 0.9) awardXP(userId, 100, 'test_90+');
+
+  // Bonus for 100%
+  if (pct >= 1.0) awardXP(userId, 200, 'test_perfect');
+
+  // Bonus for assignment on time (handled in sessionController after checking deadline)
+
+  // Ecstatic mood bonus: +10% of base XP when pet streak >= 7
+  try {
+    const streakRow = stmts.getStreak.get(userId);
+    if (streakRow && (streakRow.streak_current || 0) >= 7) {
+      const moodBonus = Math.round(score * 10 * 0.10);
+      if (moodBonus > 0) awardXP(userId, moodBonus, 'mood_ecstatic');
+    }
+  } catch (e) { console.error('[onTestFinished] mood bonus:', e.message); }
+
+  // Speed demon check
+  if (testTimeLimitSec && timeSec < testTimeLimitSec * 0.5 && pct >= 0.9) {
+    unlockAchievement(userId, 'speed_demon');
+  }
+
+  // Update streak
+  updateStreak(userId);
+
+  // Check all achievements
+  checkAchievements(userId);
+}
+
+/* ── Hook: called when student joins class ────────────────────────────── */
+
+function onClassJoined(userId) {
+  checkAchievements(userId);
+}
+
+/* ── Hook: called when student performs a lab experiment ───────────────── */
+
+function onLabExperiment(userId, reactionsDiscovered) {
+  // reactionsDiscovered — number of unique reactions found in this session
+  stmts.incrLabExp.run(userId);
+  if (reactionsDiscovered > 0) {
+    stmts.incrLabReact.run(reactionsDiscovered, userId);
+  }
+  awardXP(userId, 15, 'lab_experiment');
+  checkAchievements(userId);
+}
+
+/* ── Daily goals ──────────────────────────────────────────────────────── */
+
+const GOAL_TIERS = {
+  easy:   { tests: 2, xp: 100, bonus: 30, label: 'Лёгкая' },
+  medium: { tests: 3, xp: 200, bonus: 50, label: 'Средняя' },
+  hard:   { tests: 5, xp: 500, bonus: 100, label: 'Тяжёлая' },
+};
+
+function getDailyGoal(userId) {
+  const today = new Date().toISOString().slice(0, 10);
+  let goal = stmts.getDailyGoal.get(userId, today);
+  if (!goal) {
+    // Check user's preferred tier
+    const pref = stmts.getUserGoalTier.get(userId);
+    const tier = GOAL_TIERS[(pref && pref.goal_tier) || 'medium'] || GOAL_TIERS.medium;
+    stmts.insertDailyGoal.run(userId, today, tier.tests, tier.xp);
+    goal = stmts.getDailyGoal.get(userId, today);
+  }
+  return goal;
+}
+
+function updateDailyGoal(userId, addTests, addXp) {
+  const today = new Date().toISOString().slice(0, 10);
+  getDailyGoal(userId); // ensure exists
+  stmts.incrDailyGoal.run(addTests || 0, addXp || 0, userId, today);
+
+  // Check if goal completed
+  const goal = stmts.getDailyGoal.get(userId, today);
+  if (goal && goal.tests_done >= goal.tests_target && goal.xp_earned >= goal.xp_target) {
+    // Check if already awarded bonus today
+    const already = stmts.checkGoalBonus.get(userId, today);
+    if (!already) {
+      const pref = stmts.getUserGoalTier.get(userId);
+      const tier = GOAL_TIERS[(pref && pref.goal_tier) || 'medium'] || GOAL_TIERS.medium;
+      awardXP(userId, tier.bonus, 'daily_goal');
+      try {
+        sse.emit(userId, { type: 'daily_goal', message: `Дневная цель выполнена! +${tier.bonus} XP`, icon: 'target' });
+      } catch (e) { console.error('[daily_goal]', e.message); }
+    }
+  }
+}
+
+/* ── Personal Challenges ──────────────────────────────────────────────── */
+
+function _currentWeek() {
+  const d = new Date();
+  const day = d.getDay();
+  const mon = new Date(d);
+  mon.setDate(mon.getDate() - ((day + 6) % 7));
+  return mon.toISOString().slice(0, 10);
+}
+
+function ensureChallenges(userId) {
+  const week = _currentWeek();
+  const existing = db.prepare('SELECT COUNT(*) AS cnt FROM challenges WHERE user_id = ? AND week = ?').get(userId, week);
+  if (existing.cnt > 0) return;
+
+  // Auto-generate 3 challenges based on weak topics + general goals
+  const weakTopics = db.prepare(`
+    SELECT t.id AS topic_id, t.name, s.slug AS subject_slug, s.name AS subject_name,
+           COUNT(CASE WHEN ua.is_correct = 0 THEN 1 END) AS wrong,
+           COUNT(*) AS total
+    FROM user_answers ua
+    JOIN session_questions sq ON sq.session_id = ua.session_id AND sq.question_id = ua.question_id
+    JOIN questions q ON q.id = ua.question_id
+    JOIN topics t ON t.id = q.topic_id
+    JOIN subjects s ON s.id = t.subject_id
+    JOIN test_sessions ts ON ts.id = ua.session_id AND ts.user_id = ?
+    GROUP BY t.id
+    HAVING wrong > 0
+    ORDER BY CAST(wrong AS REAL) / total DESC
+    LIMIT 5
+  `).all(userId);
+
+  const challenges = [];
+
+  // Challenge 1: Weak topic practice (if available)
+  if (weakTopics.length > 0) {
+    const wt = weakTopics[0];
+    challenges.push({
+      title: `Подтяни «${wt.name}»`,
+      description: `Пройди 3 теста по теме «${wt.name}» (${wt.subject_name})`,
+      type: 'topic_tests',
+      target: 3,
+      xp_reward: 150,
+      subject_slug: wt.subject_slug,
+      topic_id: wt.topic_id,
+    });
+  }
+
+  // Challenge 2: Score challenge
+  challenges.push({
+    title: 'Набери 80%+',
+    description: 'Заверши 3 теста с результатом не ниже 80%',
+    type: 'high_score',
+    target: 3,
+    xp_reward: 120,
+    subject_slug: null,
+    topic_id: null,
+  });
+
+  // Challenge 3: Volume challenge
+  challenges.push({
+    title: 'Марафонец',
+    description: 'Пройди 5 тестов на этой неделе',
+    type: 'tests',
+    target: 5,
+    xp_reward: 100,
+    subject_slug: null,
+    topic_id: null,
+  });
+
+  // Challenge 4: Streak challenge (if no weak topics)
+  if (weakTopics.length < 2) {
+    challenges.push({
+      title: 'Без ошибок',
+      description: 'Набери 100% в любом тесте',
+      type: 'perfect',
+      target: 1,
+      xp_reward: 200,
+      subject_slug: null,
+      topic_id: null,
+    });
+  }
+
+  const ins = db.prepare(`
+    INSERT OR IGNORE INTO challenges (user_id, week, title, description, type, target, xp_reward, subject_slug, topic_id)
+    VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)
+  `);
+  for (const c of challenges) {
+    ins.run(userId, week, c.title, c.description, c.type, c.target, c.xp_reward, c.subject_slug, c.topic_id);
+  }
+}
+
+function updateChallenges(userId, score, total, subjectSlug, topicId) {
+  const week = _currentWeek();
+  const pct = total > 0 ? Math.round(score / total * 100) : 0;
+  const challenges = stmts.getOpenChallenges.all(userId, week);
+
+  for (const c of challenges) {
+    let inc = 0;
+    switch (c.type) {
+      case 'tests':
+        inc = 1;
+        break;
+      case 'topic_tests':
+        if (topicId && c.topic_id === topicId) inc = 1;
+        else if (subjectSlug && c.subject_slug === subjectSlug) inc = 1;
+        break;
+      case 'high_score':
+        if (pct >= 80) inc = 1;
+        break;
+      case 'perfect':
+        if (pct >= 100) inc = 1;
+        break;
+    }
+    if (inc > 0) {
+      stmts.incrChallenge.run(inc, c.id);
+      const updated = stmts.getChallengeById.get(c.id);
+      if (updated && updated.progress >= updated.target) {
+        stmts.completeChallenge.run(c.id);
+        try {
+          sse.emit(userId, { type: 'challenge', message: `Испытание «${c.title}» выполнено!`, icon: 'target' });
+        } catch (e) { console.error('[challenge]', e.message); }
+      }
+    }
+  }
+}
+
+function getChallenges(req, res) {
+  ensureChallenges(req.user.id);
+  const week = _currentWeek();
+  const rows = stmts.getChallengesWeek.all(req.user.id, week);
+  res.json(rows);
+}
+
+function claimChallenge(req, res) {
+  const id = Number(req.params.id);
+  const c = stmts.getChallengeOwned.get(id, req.user.id);
+  if (!c) return res.status(404).json({ error: 'Challenge not found' });
+  if (!c.completed) return res.status(400).json({ error: 'Challenge not completed yet' });
+  if (c.claimed) return res.status(400).json({ error: 'Already claimed' });
+
+  stmts.markClaimed.run(id);
+  awardXP(req.user.id, c.xp_reward, `Испытание: ${c.title}`);
+  // Bonus coins for challenges
+  awardCoins(req.user.id, Math.floor(c.xp_reward / 5), `Испытание: ${c.title}`);
+  res.json({ xp: c.xp_reward });
+}
+
+/* ═══════════════════════════════════════════════════════════════════════
+   API Handlers
+   ═══════════════════════════════════════════════════════════════════════ */
+
+/* GET /api/gamification/me — current user XP, level, streak, goals */
+function getMe(req, res) {
+  const info = getXPInfo(req.user.id);
+  if (!info) return res.status(404).json({ error: 'User not found' });
+  const goal = getDailyGoal(req.user.id);
+  const pref = stmts.getUserPrefs.get(req.user.id);
+  const tierKey = (pref && pref.goal_tier) || 'medium';
+  const frameId = (pref && pref.avatar_frame) || 'default';
+  const frame = AVATAR_FRAMES.find(f => f.id === frameId) || AVATAR_FRAMES[0];
+  res.json({ ...info, dailyGoal: goal, goalTier: tierKey, goalTiers: GOAL_TIERS, avatarFrame: frame });
+}
+
+/* GET /api/gamification/frames — available avatar frames */
+function getFrames(req, res) {
+  const unlocked = stmts.getUnlockedSlugs.all(req.user.id).map(r => r.slug);
+  const user = stmts.getUserFrame.get(req.user.id);
+  const selected = (user && user.avatar_frame) || 'default';
+  const frames = AVATAR_FRAMES.map(f => ({
+    ...f,
+    unlocked: !f.unlock || unlocked.includes(f.unlock),
+    selected: f.id === selected,
+  }));
+  res.json({ frames, selected });
+}
+
+/* POST /api/gamification/frame — set avatar frame */
+function setFrame(req, res) {
+  const { frame } = req.body;
+  const f = AVATAR_FRAMES.find(fr => fr.id === frame);
+  if (!f) return res.status(400).json({ error: 'Unknown frame' });
+  if (f.unlock) {
+    const ach = stmts.checkFrameUnlock.get(f.unlock, req.user.id);
+    if (!ach) return res.status(403).json({ error: 'Frame not unlocked' });
+  }
+  stmts.setUserFrame.run(frame, req.user.id);
+  res.json({ frame, css: f.css });
+}
+
+/* POST /api/gamification/goal-tier — set daily goal difficulty */
+function setGoalTier(req, res) {
+  const { tier } = req.body;
+  if (!GOAL_TIERS[tier]) return res.status(400).json({ error: 'Invalid tier. Use: easy, medium, hard' });
+  stmts.setUserGoalTier.run(tier, req.user.id);
+  res.json({ tier, ...GOAL_TIERS[tier] });
+}
+
+/* GET /api/gamification/achievements — all achievements + user unlocks */
+function getAchievements(req, res) {
+  const all = stmts.getAllAchs.all();
+  const unlocked = stmts.getUserAchs.all(req.user.id);
+  const unlockedMap = {};
+  for (const u of unlocked) unlockedMap[u.achievement_id] = u.unlocked_at;
+  const result = all.map(a => ({ ...a, unlocked: !!unlockedMap[a.id], unlocked_at: unlockedMap[a.id] || null }));
+  res.json(result);
+}
+
+/* GET /api/gamification/leaderboard?class_id=X&period=week|all */
+function getLeaderboard(req, res) {
+  const classId = req.query.class_id ? Number(req.query.class_id) : null;
+  const period = req.query.period || 'all';
+
+  let rows;
+  if (period === 'week') {
+    const weekAgo = new Date(Date.now() - 7 * 86400000).toISOString();
+    if (classId) {
+      rows = db.prepare(`
+        SELECT u.id, u.name, COALESCE(SUM(xl.amount), 0) AS week_xp, u.xp, u.level,
+               u.streak_current AS streak
+        FROM users u
+        JOIN class_members cm ON cm.user_id = u.id AND cm.class_id = ?
+        LEFT JOIN xp_log xl ON xl.user_id = u.id AND xl.created_at >= ?
+        WHERE u.role = 'student'
+        GROUP BY u.id
+        ORDER BY week_xp DESC
+        LIMIT 30
+      `).all(classId, weekAgo);
+    } else {
+      rows = db.prepare(`
+        SELECT u.id, u.name, COALESCE(SUM(xl.amount), 0) AS week_xp, u.xp, u.level,
+               u.streak_current AS streak
+        FROM users u
+        LEFT JOIN xp_log xl ON xl.user_id = u.id AND xl.created_at >= ?
+        WHERE u.role = 'student'
+        GROUP BY u.id
+        ORDER BY week_xp DESC
+        LIMIT 30
+      `).all(weekAgo);
+    }
+    rows.forEach((r, i) => { r.position = i + 1; r.sort_xp = r.week_xp; });
+  } else {
+    if (classId) {
+      rows = db.prepare(`
+        SELECT u.id, u.name, u.xp, u.level, u.streak_current AS streak
+        FROM users u
+        JOIN class_members cm ON cm.user_id = u.id AND cm.class_id = ?
+        WHERE u.role = 'student'
+        ORDER BY u.xp DESC
+        LIMIT 30
+      `).all(classId);
+    } else {
+      rows = db.prepare(`
+        SELECT u.id, u.name, u.xp, u.level, u.streak_current AS streak
+        FROM users u
+        WHERE u.role = 'student'
+        ORDER BY u.xp DESC
+        LIMIT 30
+      `).all();
+    }
+    rows.forEach((r, i) => { r.position = i + 1; r.sort_xp = r.xp; });
+  }
+
+  // add rank names
+  rows.forEach(r => { r.rank = rankName(r.level || 1); });
+
+  res.json({ rows, period, class_id: classId });
+}
+
+/* GET /api/gamification/xp-history — recent XP log */
+function getXPHistory(req, res) {
+  const limit = Math.min(50, Number(req.query.limit) || 20);
+  const rows = stmts.xpHistory.all(req.user.id, limit);
+  res.json(rows);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════
+   Admin — XP/coins management, stats, reset
+   ═══════════════════════════════════════════════════════════════════════ */
+
+/* POST /api/gamification/admin/award — award XP or coins to user */
+function adminAward(req, res) {
+  const { userId, xp, coins, reason } = req.body;
+  if (!userId) return res.status(400).json({ error: 'userId required' });
+  const user = stmts.checkUserById.get(userId);
+  if (!user) return res.status(404).json({ error: 'User not found' });
+  if (xp && xp > 0) awardXP(userId, xp, reason || 'Admin award');
+  if (coins && coins > 0) awardCoins(userId, coins, reason || 'Admin award');
+  const updated = stmts.getUserGamInfo.get(userId);
+  res.json({ ok: true, ...updated });
+}
+
+/* POST /api/gamification/admin/reset — reset user gamification */
+const _resetTx = db.transaction((userId) => {
+  stmts.adminResetUser.run(userId);
+  stmts.deleteXpLog.run(userId);
+  stmts.deleteUserAchs.run(userId);
+  stmts.deleteDailyGoals.run(userId);
+  stmts.deleteChallenges.run(userId);
+  stmts.deleteUserPurch.run(userId);
+});
+
+function adminReset(req, res) {
+  const { userId } = req.body;
+  if (!userId) return res.status(400).json({ error: 'userId required' });
+  _resetTx(userId);
+  res.json({ ok: true });
+}
+
+/* GET /api/gamification/admin/stats — global gamification stats */
+function adminGamStats(_req, res) {
+  const totalXP        = stmts.adminTotalXP.get().v;
+  const totalCoins     = stmts.adminTotalCoins.get().v;
+  const avgLevel       = stmts.adminAvgLevel.get().v;
+  const achievementCount = stmts.adminAchCount.get().v;
+  const topByXP        = stmts.adminTopXP.all();
+  const recentXP       = stmts.adminRecentXP.all();
+  const totalPurchases = stmts.adminTotalPurch.get().v;
+  const recentPurchases = stmts.adminRecentPurch.all();
+  res.json({ totalXP, totalCoins, avgLevel, achievementCount, totalPurchases, topByXP, recentXP, recentPurchases });
+}
+
+/* GET /api/gamification/admin/user/:id — user gamification details */
+function adminGetUser(req, res) {
+  const uid = Number(req.params.id);
+  const user = stmts.adminGetUserFull.get(uid);
+  if (!user) return res.status(404).json({ error: 'User not found' });
+  const achievements = stmts.adminGetUserAchs.all(uid);
+  const purchases    = stmts.adminGetUserPurch.all(uid);
+  const xpHistory    = stmts.adminGetUserXPH.all(uid);
+  res.json({ user, achievements, purchases, xpHistory });
+}
+
+module.exports = {
+  // API handlers
+  getMe, getAchievements, getLeaderboard, getXPHistory,
+  getChallenges, claimChallenge, setGoalTier,
+  getFrames, setFrame,
+  // Admin handlers
+  adminAward, adminReset, adminGamStats, adminGetUser,
+  // Service functions for other controllers
+  onTestFinished, onClassJoined, onLabExperiment, updateDailyGoal, updateChallenges,
+  onLessonComplete, checkRedBookAchievements,
+  awardXP, awardCoins, seedAchievements, checkAchievements,
+};
diff --git a/backend/src/controllers/knowledgeMapController.js b/backend/src/controllers/knowledgeMapController.js
new file mode 100644
index 0000000..26617b5
--- /dev/null
+++ b/backend/src/controllers/knowledgeMapController.js
@@ -0,0 +1,65 @@
+'use strict';
+const db = require('../db/db');
+
+/* ── GET /api/knowledge-map?subject_slug=bio ──────────────────────────── */
+function getMap(req, res) {
+  const { subject_slug } = req.query;
+  const uid = req.user.id;
+
+  let subjects;
+  if (subject_slug) {
+    subjects = db.prepare('SELECT id, slug, name, icon FROM subjects WHERE slug = ?').all(subject_slug);
+  } else {
+    subjects = db.prepare('SELECT id, slug, name, icon FROM subjects ORDER BY name').all();
+  }
+
+  const nodes = [];
+  const links = [];
+
+  for (const subj of subjects) {
+    nodes.push({
+      id:      `subj_${subj.id}`,
+      type:    'subject',
+      label:   subj.name,
+      icon:    subj.icon,
+      slug:    subj.slug,
+      mastery: null,
+    });
+
+    const topics = db.prepare(`
+      SELECT t.id, t.name,
+        COUNT(DISTINCT q.id) AS total_q,
+        COUNT(DISTINCT CASE WHEN ua.is_correct = 1 THEN ua.question_id END) AS correct_q
+      FROM topics t
+      LEFT JOIN questions q ON q.topic_id = t.id
+      LEFT JOIN user_answers ua ON ua.question_id = q.id
+        AND ua.session_id IN (
+          SELECT id FROM test_sessions WHERE user_id = ? AND status = 'completed'
+        )
+      WHERE t.subject_id = ?
+      GROUP BY t.id
+      ORDER BY t.order_index
+    `).all(uid, subj.id);
+
+    for (const topic of topics) {
+      const mastery = topic.total_q > 0
+        ? Math.round((topic.correct_q / topic.total_q) * 100)
+        : null;
+
+      nodes.push({
+        id:       `topic_${topic.id}`,
+        type:     'topic',
+        label:    topic.name,
+        mastery,
+        totalQ:   topic.total_q,
+        correctQ: topic.correct_q,
+      });
+
+      links.push({ source: `subj_${subj.id}`, target: `topic_${topic.id}` });
+    }
+  }
+
+  res.json({ nodes, links });
+}
+
+module.exports = { getMap };
diff --git a/backend/src/controllers/lessonController.js b/backend/src/controllers/lessonController.js
new file mode 100644
index 0000000..d9c5a63
--- /dev/null
+++ b/backend/src/controllers/lessonController.js
@@ -0,0 +1,296 @@
+const db = require('../db/db');
+const { onLessonComplete } = require('./gamificationController');
+
+/* ── helpers ──────────────────────────────────────────────────────────── */
+function parseBlock(b) {
+  let data = {};
+  try { data = JSON.parse(b.data); } catch {}
+  return { id: b.id, type: b.type, orderIndex: b.order_index, data };
+}
+
+// Estimate read time from blocks (words / 200 wpm)
+// Accepts blocks with data already parsed as objects (not JSON strings)
+function calcReadTime(blocks) {
+  let words = 0;
+  for (const b of blocks) {
+    const d = (typeof b.data === 'string') ? (() => { try { return JSON.parse(b.data); } catch { return {}; } })() : (b.data || {});
+    if (b.type === 'text')      words += (d.html || d.text || '').replace(/<[^>]+>/g, '').split(/\s+/).filter(Boolean).length;
+    if (b.type === 'heading')   words += (d.text || '').split(/\s+/).filter(Boolean).length;
+    if (b.type === 'quiz')      words += 8;
+    if (b.type === 'accordion') words += (d.content || '').split(/\s+/).filter(Boolean).length;
+    if (b.type === 'timeline' && Array.isArray(d.items))
+      for (const it of d.items) words += ((it.title||'') + ' ' + (it.text||'')).split(/\s+/).filter(Boolean).length;
+    if (b.type === 'geogebra' || b.type === 'diagram') words += 15;
+    if (b.type === 'audio')     words += 30;
+    if (b.type === 'video')     words += 30;
+    if (b.type === 'alert')     words += (d.text || '').split(/\s+/).filter(Boolean).length;
+    if (b.type === 'columns' && Array.isArray(d.cols))
+      for (const col of d.cols) words += (col.content || '').replace(/<[^>]+>/g, '').split(/\s+/).filter(Boolean).length;
+  }
+  return Math.max(1, Math.ceil(words / 200));
+}
+
+/* ── GET /api/lessons/:id ─────────────────────────────────────────────── */
+function get(req, res) {
+  const role = req.user.role;
+  const uid  = req.user.id;
+
+  const row = db.prepare(`
+    SELECT l.*, c.title AS course_title, c.is_published AS course_published
+    FROM lessons l JOIN courses c ON c.id = l.course_id
+    WHERE l.id = ?
+  `).get(req.params.id);
+  if (!row) return res.status(404).json({ error: 'Lesson not found' });
+  if (role === 'student' && !row.is_published)
+    return res.status(403).json({ error: 'Lesson not published' });
+  if (role === 'student' && !row.course_published)
+    return res.status(403).json({ error: 'Course not published' });
+  const lesson = row;
+  const course = { title: row.course_title };
+
+  const blocks = db.prepare(
+    'SELECT id, type, order_index, data FROM lesson_blocks WHERE lesson_id = ? ORDER BY order_index, id'
+  ).all(lesson.id).map(parseBlock);
+
+  const progress = db.prepare(
+    'SELECT completed FROM lesson_progress WHERE user_id = ? AND lesson_id = ?'
+  ).get(uid, lesson.id);
+
+  const note = db.prepare(
+    'SELECT text FROM lesson_notes WHERE user_id = ? AND lesson_id = ?'
+  ).get(uid, lesson.id);
+
+  // adjacent lessons
+  const pubWhere = role === 'student' ? 'AND is_published = 1' : '';
+  const siblings = db.prepare(`
+    SELECT id, title FROM lessons WHERE course_id = ? ${pubWhere} ORDER BY order_index, id
+  `).all(lesson.course_id);
+  const idx  = siblings.findIndex(s => s.id === lesson.id);
+  const prev = idx > 0 ? siblings[idx - 1] : null;
+  const next = idx >= 0 && idx < siblings.length - 1 ? siblings[idx + 1] : null;
+
+  res.json({
+    id:          lesson.id,
+    courseId:    lesson.course_id,
+    courseTitle: course.title,
+    title:       lesson.title,
+    orderIndex:  lesson.order_index,
+    isPublished: lesson.is_published === 1,
+    sectionId:   lesson.section_id,
+    readTime:    lesson.read_time || 0,
+    blocks,
+    completed:   progress?.completed === 1,
+    note:        note?.text || '',
+    prev:        prev ? { id: prev.id, title: prev.title } : null,
+    next:        next ? { id: next.id, title: next.title } : null,
+  });
+}
+
+/* ── POST /api/lessons ────────────────────────────────────────────────── */
+function create(req, res) {
+  const { courseId, title, orderIndex, sectionId } = req.body;
+  if (!courseId || !title)
+    return res.status(400).json({ error: 'courseId and title required' });
+  if (!db.prepare('SELECT id FROM courses WHERE id = ?').get(courseId))
+    return res.status(404).json({ error: 'Course not found' });
+
+  const r = db.prepare(
+    'INSERT INTO lessons (course_id, title, order_index, section_id) VALUES (?, ?, ?, ?)'
+  ).run(courseId, title.trim(), orderIndex ?? 0, sectionId || null);
+  res.status(201).json({ id: r.lastInsertRowid });
+}
+
+/* ── PUT /api/lessons/:id ─────────────────────────────────────────────── */
+function update(req, res) {
+  const lesson = db.prepare(`
+    SELECT l.*, c.created_by AS course_owner
+    FROM lessons l JOIN courses c ON c.id = l.course_id WHERE l.id = ?
+  `).get(req.params.id);
+  if (!lesson) return res.status(404).json({ error: 'Lesson not found' });
+  if (req.user.role !== 'admin' && lesson.course_owner !== req.user.id)
+    return res.status(403).json({ error: 'Forbidden' });
+  const { title, orderIndex, isPublished, sectionId } = req.body;
+  db.prepare(`
+    UPDATE lessons SET title=?, order_index=?, is_published=?, section_id=? WHERE id=?
+  `).run(
+    title       ?? lesson.title,
+    orderIndex  ?? lesson.order_index,
+    isPublished !== undefined ? (isPublished ? 1 : 0) : lesson.is_published,
+    sectionId   !== undefined ? (sectionId || null) : lesson.section_id,
+    lesson.id
+  );
+  res.json({ ok: true });
+}
+
+/* ── DELETE /api/lessons/:id ──────────────────────────────────────────── */
+function remove(req, res) {
+  const lesson = db.prepare(`
+    SELECT l.id, c.created_by AS course_owner
+    FROM lessons l JOIN courses c ON c.id = l.course_id WHERE l.id = ?
+  `).get(req.params.id);
+  if (!lesson) return res.status(404).json({ error: 'Lesson not found' });
+  if (req.user.role !== 'admin' && lesson.course_owner !== req.user.id)
+    return res.status(403).json({ error: 'Forbidden' });
+  db.prepare('DELETE FROM lessons WHERE id = ?').run(lesson.id);
+  res.json({ ok: true });
+}
+
+/* ── PUT /api/lessons/:id/blocks ──────────────────────────────────────── */
+function saveBlocks(req, res) {
+  const lesson = db.prepare(`
+    SELECT l.id, c.created_by AS course_owner
+    FROM lessons l JOIN courses c ON c.id = l.course_id
+    WHERE l.id = ?
+  `).get(req.params.id);
+  if (!lesson) return res.status(404).json({ error: 'Lesson not found' });
+  if (req.user.role !== 'admin' && lesson.course_owner !== req.user.id)
+    return res.status(403).json({ error: 'Forbidden' });
+
+  const blocks = req.body.blocks;
+  if (!Array.isArray(blocks))
+    return res.status(400).json({ error: 'blocks must be an array' });
+
+  const VALID_TYPES = ['heading','text','formula','image','quiz','sim','table','code','divider','callout','video','flashcard','matching','fill-blank','ordering','accordion','timeline','diagram','geogebra','audio','columns','alert'];
+
+  db.transaction(() => {
+    db.prepare('DELETE FROM lesson_blocks WHERE lesson_id = ?').run(lesson.id);
+    const ins = db.prepare(
+      'INSERT INTO lesson_blocks (lesson_id, type, order_index, data) VALUES (?, ?, ?, ?)'
+    );
+    blocks.forEach((b, i) => {
+      const type = VALID_TYPES.includes(b.type) ? b.type : 'text';
+      ins.run(lesson.id, type, b.orderIndex ?? i, JSON.stringify(b.data || {}));
+    });
+
+    // recalculate read time — pass already-parsed data objects, no double stringify/parse
+    const rt = calcReadTime(blocks);
+    db.prepare('UPDATE lessons SET read_time = ? WHERE id = ?').run(rt, lesson.id);
+  })();
+
+  res.json({ ok: true, count: blocks.length });
+}
+
+/* ── POST /api/lessons/:id/complete ──────────────────────────────────── */
+function markComplete(req, res) {
+  const lesson = db.prepare('SELECT * FROM lessons WHERE id = ?').get(req.params.id);
+  if (!lesson) return res.status(404).json({ error: 'Lesson not found' });
+
+  db.prepare(`
+    INSERT INTO lesson_progress (user_id, lesson_id, completed, updated_at)
+    VALUES (?, ?, 1, datetime('now'))
+    ON CONFLICT (user_id, lesson_id) DO UPDATE SET completed=1, updated_at=datetime('now')
+  `).run(req.user.id, lesson.id);
+
+  const total = db.prepare(
+    'SELECT COUNT(*) AS n FROM lessons WHERE course_id = ? AND is_published = 1'
+  ).get(lesson.course_id).n;
+  const done = db.prepare(`
+    SELECT COUNT(*) AS n FROM lesson_progress lp
+    JOIN lessons l ON lp.lesson_id = l.id
+    WHERE l.course_id = ? AND lp.user_id = ? AND lp.completed = 1
+  `).get(lesson.course_id, req.user.id).n;
+
+  try { onLessonComplete(req.user.id, lesson.course_id); } catch {}
+  res.json({ ok: true, courseComplete: done >= total && total > 0 });
+}
+
+/* ── PUT /api/lessons/:id/note ────────────────────────────────────────── */
+function saveNote(req, res) {
+  const lesson = db.prepare('SELECT id FROM lessons WHERE id = ?').get(req.params.id);
+  if (!lesson) return res.status(404).json({ error: 'Lesson not found' });
+  const text = (req.body.text || '').slice(0, 5000);
+  db.prepare(`
+    INSERT INTO lesson_notes (user_id, lesson_id, text, updated_at)
+    VALUES (?, ?, ?, datetime('now'))
+    ON CONFLICT (user_id, lesson_id) DO UPDATE SET text=excluded.text, updated_at=datetime('now')
+  `).run(req.user.id, lesson.id, text);
+  res.json({ ok: true });
+}
+
+/* ── GET /api/lessons/:id/comments ──────────────────────────────────── */
+function listComments(req, res) {
+  const lesson = db.prepare('SELECT id FROM lessons WHERE id = ?').get(req.params.id);
+  if (!lesson) return res.status(404).json({ error: 'Lesson not found' });
+
+  const rows = db.prepare(`
+    SELECT c.id, c.lesson_id, c.user_id, c.parent_id, c.text, c.created_at,
+      u.name AS user_name, u.role AS user_role
+    FROM lesson_comments c
+    JOIN users u ON c.user_id = u.id
+    WHERE c.lesson_id = ?
+    ORDER BY c.created_at ASC
+  `).all(lesson.id);
+
+  // build threaded structure: top-level + replies
+  const top = [];
+  const byId = {};
+  rows.forEach(r => {
+    const item = {
+      id: r.id, lessonId: r.lesson_id, userId: r.user_id,
+      parentId: r.parent_id, text: r.text, createdAt: r.created_at,
+      userName: r.user_name, userRole: r.user_role,
+      replies: [],
+    };
+    byId[r.id] = item;
+    if (!r.parent_id) {
+      top.push(item);
+    } else if (byId[r.parent_id]) {
+      byId[r.parent_id].replies.push(item);
+    } else {
+      top.push(item); // orphan → treat as top-level
+    }
+  });
+
+  res.json(top);
+}
+
+/* ── POST /api/lessons/:id/comments ────────────────────────────────── */
+function addComment(req, res) {
+  const lesson = db.prepare('SELECT id FROM lessons WHERE id = ?').get(req.params.id);
+  if (!lesson) return res.status(404).json({ error: 'Lesson not found' });
+
+  const text = (req.body.text || '').trim();
+  if (!text) return res.status(400).json({ error: 'text required' });
+  if (text.length > 2000) return res.status(400).json({ error: 'Comment too long (max 2000)' });
+
+  const parentId = req.body.parentId || null;
+  if (parentId) {
+    const parent = db.prepare('SELECT id FROM lesson_comments WHERE id = ? AND lesson_id = ?').get(parentId, lesson.id);
+    if (!parent) return res.status(400).json({ error: 'Parent comment not found' });
+  }
+
+  const r = db.prepare(
+    'INSERT INTO lesson_comments (lesson_id, user_id, parent_id, text) VALUES (?, ?, ?, ?)'
+  ).run(lesson.id, req.user.id, parentId, text);
+
+  // notify lesson author / teacher if comment is from student
+  try {
+    const course = db.prepare('SELECT created_by FROM courses WHERE id = (SELECT course_id FROM lessons WHERE id = ?)').get(lesson.id);
+    if (course && course.created_by !== req.user.id) {
+      const userName = db.prepare('SELECT name FROM users WHERE id = ?').get(req.user.id)?.name || 'Ученик';
+      const lessonTitle = db.prepare('SELECT title FROM lessons WHERE id = ?').get(lesson.id)?.title || 'Урок';
+      db.prepare(
+        'INSERT INTO notifications (user_id, type, message, link) VALUES (?, ?, ?, ?)'
+      ).run(course.created_by, 'comment', `${userName} оставил(а) комментарий к уроку «${lessonTitle}»`,
+        `/lesson?id=${lesson.id}#comments`);
+    }
+  } catch {}
+
+  res.status(201).json({ id: Number(r.lastInsertRowid) });
+}
+
+/* ── DELETE /api/lessons/:id/comments/:cid ─────────────────────────── */
+function deleteComment(req, res) {
+  const comment = db.prepare('SELECT * FROM lesson_comments WHERE id = ? AND lesson_id = ?').get(req.params.cid, req.params.id);
+  if (!comment) return res.status(404).json({ error: 'Comment not found' });
+
+  // only author or teacher/admin can delete
+  const isOwner = comment.user_id === req.user.id;
+  const isPrivileged = ['teacher', 'admin'].includes(req.user.role);
+  if (!isOwner && !isPrivileged) return res.status(403).json({ error: 'Forbidden' });
+
+  db.prepare('DELETE FROM lesson_comments WHERE id = ?').run(comment.id);
+  res.json({ ok: true });
+}
+
+module.exports = { get, create, update, remove, saveBlocks, markComplete, saveNote, listComments, addComment, deleteComment };
diff --git a/backend/src/controllers/liveController.js b/backend/src/controllers/liveController.js
new file mode 100644
index 0000000..3d24e7e
--- /dev/null
+++ b/backend/src/controllers/liveController.js
@@ -0,0 +1,197 @@
+const db  = require('../db/db');
+const { emit, emitToClass } = require('../sse');
+
+/* POST /api/live — teacher creates live session */
+function create(req, res) {
+  const { class_id } = req.body;
+  const teacher = req.user;
+  if (!class_id) return res.status(400).json({ error: 'class_id required' });
+
+  const cls = teacher.role === 'admin'
+    ? db.prepare('SELECT id, name FROM classes WHERE id=?').get(class_id)
+    : db.prepare('SELECT id, name FROM classes WHERE id=? AND teacher_id=?').get(class_id, teacher.id);
+  if (!cls) return res.status(403).json({ error: 'Forbidden' });
+
+  // End any active session for this class
+  db.prepare(`UPDATE live_sessions SET status='finished', ended_at=datetime('now')
+              WHERE class_id=? AND status IN ('waiting','active')`).run(class_id);
+
+  const { lastInsertRowid } = db.prepare(
+    `INSERT INTO live_sessions (class_id, teacher_id) VALUES (?,?)`
+  ).run(class_id, teacher.id);
+
+  emitToClass(class_id, { type: 'live_started', liveId: lastInsertRowid, className: cls.name });
+
+  res.json(db.prepare('SELECT * FROM live_sessions WHERE id=?').get(lastInsertRowid));
+}
+
+/* PUT /api/live/:id/question — teacher sets next question */
+function setQuestion(req, res) {
+  const liveId = Number(req.params.id);
+  const { question_id } = req.body;
+  const teacher = req.user;
+
+  const live = db.prepare('SELECT * FROM live_sessions WHERE id=?').get(liveId);
+  if (!live) return res.status(404).json({ error: 'Not found' });
+  if (live.teacher_id !== teacher.id && teacher.role !== 'admin')
+    return res.status(403).json({ error: 'Forbidden' });
+
+  db.prepare('DELETE FROM live_answers WHERE live_session_id=?').run(liveId);
+  db.prepare(`UPDATE live_sessions SET question_id=?, status='active', show_results=0 WHERE id=?`)
+    .run(question_id, liveId);
+
+  const q = db.prepare(
+    `SELECT q.id, q.text, q.type, q.difficulty, t.name AS topic
+     FROM questions q LEFT JOIN topics t ON t.id=q.topic_id WHERE q.id=?`
+  ).get(question_id);
+  const options = db.prepare(
+    'SELECT id, text, order_index FROM options WHERE question_id=? ORDER BY order_index'
+  ).all(question_id);
+
+  emitToClass(live.class_id, { type: 'live_question', liveId, question: { ...q, options } });
+  res.json({ ok: true, question: { ...q, options } });
+}
+
+/* POST /api/live/:id/answer — student submits answer */
+function answer(req, res) {
+  const liveId = Number(req.params.id);
+  const { option_id, answer_text } = req.body;
+  const userId = req.user.id;
+
+  const live = db.prepare(`SELECT * FROM live_sessions WHERE id=? AND status='active'`).get(liveId);
+  if (!live) return res.status(404).json({ error: 'Сессия не активна' });
+
+  // Verify caller is a member of the class hosting this live session
+  const isMember = db.prepare(
+    'SELECT 1 FROM class_members WHERE class_id = ? AND user_id = ?'
+  ).get(live.class_id, userId);
+  if (!isMember) return res.status(403).json({ error: 'Forbidden' });
+
+  const existing = db.prepare(
+    'SELECT id FROM live_answers WHERE live_session_id=? AND user_id=?'
+  ).get(liveId, userId);
+  if (existing) return res.status(409).json({ error: 'Уже отвечено' });
+
+  let is_correct = null;
+  if (option_id) {
+    const opt = db.prepare(
+      'SELECT is_correct FROM options WHERE id=? AND question_id=?'
+    ).get(option_id, live.question_id);
+    is_correct = opt ? opt.is_correct : 0;
+  }
+
+  db.prepare(
+    `INSERT INTO live_answers (live_session_id, user_id, option_id, answer_text, is_correct)
+     VALUES (?,?,?,?,?)`
+  ).run(liveId, userId, option_id || null, answer_text || null, is_correct);
+
+  const { c: count } = db.prepare(
+    'SELECT COUNT(*) AS c FROM live_answers WHERE live_session_id=?'
+  ).get(liveId);
+  emit(live.teacher_id, { type: 'live_answer_count', liveId, count });
+
+  res.json({ ok: true, is_correct });
+}
+
+/* GET /api/live/:id/results — teacher reveals & gets results */
+function results(req, res) {
+  const liveId  = Number(req.params.id);
+  const teacher = req.user;
+
+  const live = db.prepare('SELECT * FROM live_sessions WHERE id=?').get(liveId);
+  if (!live) return res.status(404).json({ error: 'Not found' });
+  if (live.teacher_id !== teacher.id && teacher.role !== 'admin')
+    return res.status(403).json({ error: 'Forbidden' });
+
+  const question = db.prepare(
+    'SELECT id, text, explanation FROM questions WHERE id=?'
+  ).get(live.question_id);
+
+  const options = db.prepare(`
+    SELECT o.id, o.text, o.is_correct,
+           COUNT(la.id) AS chosen_count
+    FROM options o
+    LEFT JOIN live_answers la ON la.option_id=o.id AND la.live_session_id=?
+    WHERE o.question_id=?
+    GROUP BY o.id ORDER BY o.order_index
+  `).all(liveId, live.question_id);
+
+  const stats = db.prepare(
+    `SELECT COUNT(*) AS total, SUM(is_correct) AS correct
+     FROM live_answers WHERE live_session_id=?`
+  ).get(liveId);
+
+  db.prepare('UPDATE live_sessions SET show_results=1 WHERE id=?').run(liveId);
+  emitToClass(live.class_id, { type: 'live_results', liveId, question, options, stats });
+
+  res.json({ question, options, stats });
+}
+
+/* DELETE /api/live/:id — teacher ends session */
+function end(req, res) {
+  const liveId  = Number(req.params.id);
+  const teacher = req.user;
+
+  const live = db.prepare('SELECT * FROM live_sessions WHERE id=?').get(liveId);
+  if (!live) return res.status(404).json({ error: 'Not found' });
+  if (live.teacher_id !== teacher.id && teacher.role !== 'admin')
+    return res.status(403).json({ error: 'Forbidden' });
+
+  db.prepare(`UPDATE live_sessions SET status='finished', ended_at=datetime('now') WHERE id=?`).run(liveId);
+  emitToClass(live.class_id, { type: 'live_ended', liveId });
+  res.json({ ok: true });
+}
+
+/* GET /api/live/class/:classId/active — student polls active session */
+function getActive(req, res) {
+  const classId = Number(req.params.classId);
+
+  // Only class members (or teachers/admins) may poll
+  if (!['teacher', 'admin'].includes(req.user.role)) {
+    const isMember = db.prepare(
+      'SELECT 1 FROM class_members WHERE class_id = ? AND user_id = ?'
+    ).get(classId, req.user.id);
+    if (!isMember) return res.status(403).json({ error: 'Forbidden' });
+  }
+
+  const live = db.prepare(`
+    SELECT * FROM live_sessions WHERE class_id=? AND status IN ('waiting','active')
+    ORDER BY id DESC LIMIT 1
+  `).get(classId);
+  if (!live) return res.json({ active: false });
+
+  let question = null, options = null, myAnswer = null;
+  if (live.question_id && live.status === 'active') {
+    question  = db.prepare('SELECT id, text, type FROM questions WHERE id=?').get(live.question_id);
+    options   = db.prepare(
+      'SELECT id, text, order_index FROM options WHERE question_id=? ORDER BY order_index'
+    ).all(live.question_id);
+    myAnswer  = db.prepare(
+      'SELECT option_id, is_correct FROM live_answers WHERE live_session_id=? AND user_id=?'
+    ).get(live.id, req.user.id);
+  }
+
+  res.json({ active: true, live, question, options, myAnswer, showResults: live.show_results });
+}
+
+/* GET /api/live/:id — get session info (teacher) */
+function getSession(req, res) {
+  const liveId  = Number(req.params.id);
+  const teacher = req.user;
+  const live    = db.prepare('SELECT * FROM live_sessions WHERE id=?').get(liveId);
+  if (!live) return res.status(404).json({ error: 'Not found' });
+  if (live.teacher_id !== teacher.id && teacher.role !== 'admin')
+    return res.status(403).json({ error: 'Forbidden' });
+
+  const answerCount = db.prepare(
+    'SELECT COUNT(*) AS c FROM live_answers WHERE live_session_id=?'
+  ).get(liveId).c;
+
+  const memberCount = db.prepare(
+    'SELECT COUNT(*) AS c FROM class_members WHERE class_id=?'
+  ).get(live.class_id).c;
+
+  res.json({ ...live, answerCount, memberCount });
+}
+
+module.exports = { create, setQuestion, answer, results, end, getActive, getSession };
diff --git a/backend/src/controllers/notificationController.js b/backend/src/controllers/notificationController.js
new file mode 100644
index 0000000..91e363e
--- /dev/null
+++ b/backend/src/controllers/notificationController.js
@@ -0,0 +1,66 @@
+const jwt = require('jsonwebtoken');
+const db  = require('../db/db');
+const { addClient, removeClient } = require('../sse');
+
+const _stmts = {
+  list:     db.prepare('SELECT id, type, message, link, is_read, created_at FROM notifications WHERE user_id = ? ORDER BY created_at DESC LIMIT 50'),
+  markOne:  db.prepare('UPDATE notifications SET is_read = 1 WHERE id = ? AND user_id = ?'),
+  markAll:  db.prepare('UPDATE notifications SET is_read = 1 WHERE user_id = ?'),
+  getUser:  db.prepare('SELECT id, token_version, is_banned FROM users WHERE id = ?'),
+};
+
+/* ── GET /api/notifications ─────────────────────────────────────────────── */
+function list(req, res) {
+  const rows = _stmts.list.all(req.user.id);
+  const unread = rows.filter(r => !r.is_read).length;
+  res.json({ notifications: rows, unread });
+}
+
+/* ── PATCH /api/notifications/:id/read ──────────────────────────────────── */
+function markRead(req, res) {
+  _stmts.markOne.run(req.params.id, req.user.id);
+  res.json({ ok: true });
+}
+
+/* ── POST /api/notifications/read-all ───────────────────────────────────── */
+function markAllRead(req, res) {
+  _stmts.markAll.run(req.user.id);
+  res.json({ ok: true });
+}
+
+/* ── GET /api/notifications/stream ── SSE (auth via ?token=JWT) ─────────── */
+function stream(req, res) {
+  const token = req.query.token;
+  if (!token) return res.status(401).end();
+
+  let userId;
+  try {
+    const payload = jwt.verify(token, process.env.JWT_SECRET, { algorithms: ['HS256'] });
+    const fresh   = _stmts.getUser.get(payload.id);
+    if (!fresh) return res.status(401).end();
+    if (fresh.is_banned) return res.status(403).end();
+    if (fresh.token_version != null && payload.tv !== fresh.token_version) return res.status(401).end();
+    userId = payload.id;
+  } catch {
+    return res.status(401).end();
+  }
+
+  res.setHeader('Content-Type', 'text/event-stream');
+  res.setHeader('Cache-Control', 'no-cache');
+  res.setHeader('Connection', 'keep-alive');
+  res.setHeader('X-Accel-Buffering', 'no');
+  res.setHeader('Referrer-Policy', 'no-referrer');
+  res.flushHeaders();
+
+  addClient(userId, res);
+  res.write(`data: ${JSON.stringify({ type: 'connected' })}\n\n`);
+
+  const hb = setInterval(() => { try { res.write(':hb\n\n'); } catch {} }, 25_000);
+
+  req.on('close', () => {
+    clearInterval(hb);
+    removeClient(userId, res);
+  });
+}
+
+module.exports = { list, markRead, markAllRead, stream };
diff --git a/backend/src/controllers/parentController.js b/backend/src/controllers/parentController.js
new file mode 100644
index 0000000..9ba26f0
--- /dev/null
+++ b/backend/src/controllers/parentController.js
@@ -0,0 +1,348 @@
+const crypto = require('crypto');
+const jwt    = require('jsonwebtoken');
+const db     = require('../db/db');
+const { JWT_SECRET } = require('../config');
+
+/* ── Prepared statements ────────────────────────────────────────────── */
+const stmts = {
+  linkByToken:  db.prepare('SELECT * FROM parent_links WHERE token = ?'),
+  linkById:     db.prepare('SELECT * FROM parent_links WHERE id = ?'),
+  linksByStudent: db.prepare('SELECT id, token, label, is_active, last_used, created_at, expires_at FROM parent_links WHERE student_id = ? ORDER BY created_at DESC'),
+  linkCount:    db.prepare('SELECT COUNT(*) AS cnt FROM parent_links WHERE student_id = ?'),
+  insertLink:   db.prepare('INSERT INTO parent_links (student_id, token, label) VALUES (?, ?, ?)'),
+  updateLink:   db.prepare('UPDATE parent_links SET label = ?, is_active = ? WHERE id = ?'),
+  deleteLink:   db.prepare('DELETE FROM parent_links WHERE id = ?'),
+  updateLastUsed: db.prepare("UPDATE parent_links SET last_used = datetime('now') WHERE id = ?"),
+
+  /* Mega CTE: student info + stats + heatmap + weekly + recent activity in ONE query */
+  dashboardMega: db.prepare(`
+    WITH base AS (
+      SELECT ts.id, ts.score, ts.total, ts.started_at, ts.finished_at,
+             s.slug AS subject_slug, s.name AS subject_name
+      FROM test_sessions ts
+      LEFT JOIN subjects s ON s.id = ts.subject_id
+      WHERE ts.user_id = @uid AND ts.status = 'completed'
+    ),
+    hm AS (
+      SELECT date(ts.started_at) AS day, COUNT(*) AS cnt
+      FROM test_sessions ts
+      WHERE ts.user_id = @uid AND ts.started_at >= date('now', '-90 days')
+      GROUP BY day ORDER BY day
+    ),
+    week_activity AS (
+      SELECT COUNT(*) AS cnt,
+             AVG(CASE WHEN total>0 THEN score*100.0/total END) AS avg_pct
+      FROM base WHERE started_at >= date('now', 'weekday 0', '-7 days')
+    )
+    SELECT
+      (SELECT json_object('name',u.name,'xp',u.xp,'level',u.level,
+              'streak_current',u.streak_current,'streak_best',u.streak_best,'coins',u.coins)
+       FROM users u WHERE u.id = @uid) AS student,
+      (SELECT COALESCE(json_group_array(json_object(
+         'week', week, 'sessions', sessions, 'avg_pct', avg_pct)), '[]')
+       FROM (SELECT strftime('%Y-%W', finished_at) AS week,
+                    COUNT(*) AS sessions,
+                    AVG(CASE WHEN total>0 THEN score*100.0/total END) AS avg_pct
+             FROM base WHERE finished_at >= date('now', '-56 days')
+             GROUP BY week ORDER BY week)) AS weekly,
+      (SELECT COALESCE(json_group_array(json_object('day', day, 'count', cnt)), '[]')
+       FROM hm) AS heatmap,
+      (SELECT COALESCE(json_group_array(json_object(
+         'slug', subject_slug, 'name', subject_name,
+         'sessions', sessions, 'avg_pct', avg_pct)), '[]')
+       FROM (SELECT subject_slug, subject_name, COUNT(*) AS sessions,
+                    AVG(CASE WHEN total>0 THEN score*100.0/total END) AS avg_pct
+             FROM base GROUP BY subject_slug ORDER BY sessions DESC)) AS bySubject,
+      (SELECT COALESCE(json_group_array(json_object(
+         'id', id, 'score', score, 'total', total,
+         'finished_at', finished_at, 'subject_slug', subject_slug)), '[]')
+       FROM (SELECT id, score, total, finished_at, subject_slug
+             FROM base ORDER BY finished_at ASC LIMIT 20)) AS trend,
+      (SELECT json_object(
+         'sessions', COUNT(*),
+         'correct',  COALESCE(SUM(score), 0),
+         'questions',COALESCE(SUM(total), 0),
+         'avg_pct',  COALESCE(AVG(CASE WHEN total>0 THEN score*100.0/total END), 0))
+       FROM base) AS totals,
+      (SELECT MAX(started_at) FROM test_sessions WHERE user_id = @uid) AS lastSessionDate,
+      (SELECT json_object('cnt', cnt, 'avg_pct', avg_pct) FROM week_activity) AS weekActivity
+  `),
+
+  weakTopics: db.prepare(`
+    SELECT t.name AS topic, s.name AS subject_name,
+           COUNT(ua.id) AS total,
+           SUM(CASE WHEN ua.is_correct = 0 THEN 1 ELSE 0 END) AS wrong,
+           ROUND(CAST(SUM(CASE WHEN ua.is_correct = 0 THEN 1 ELSE 0 END) AS REAL)
+                 / COUNT(ua.id) * 100, 0) AS error_pct
+    FROM user_answers ua
+    JOIN test_sessions ts ON ts.id = ua.session_id
+    JOIN questions q ON q.id = ua.question_id
+    JOIN topics t ON t.id = q.topic_id
+    JOIN subjects s ON s.id = q.subject_id
+    WHERE ts.user_id = ? AND ts.status = 'completed' AND q.topic_id IS NOT NULL
+    GROUP BY q.topic_id HAVING total >= 2
+    ORDER BY error_pct DESC, wrong DESC LIMIT 5
+  `),
+
+  courseProgress: db.prepare(`
+    SELECT c.id, c.title, c.cover_emoji, c.subject_slug,
+           COUNT(l.id) AS total_lessons, COUNT(lp.id) AS done_lessons
+    FROM courses c JOIN lessons l ON l.course_id = c.id AND l.is_published = 1
+    LEFT JOIN lesson_progress lp ON lp.lesson_id = l.id AND lp.user_id = @uid
+    WHERE c.is_published = 1 GROUP BY c.id HAVING done_lessons > 0
+    ORDER BY done_lessons * 1.0 / total_lessons DESC LIMIT 10
+  `),
+
+  upcomingDeadlines: db.prepare(`
+    SELECT a.id, a.title, a.deadline, a.subject_slug,
+           (SELECT COUNT(*) FROM assignment_sessions ases
+            JOIN test_sessions ts ON ts.id = ases.session_id
+            WHERE ases.assignment_id = a.id AND ts.user_id = ? AND ts.status = 'completed') AS done
+    FROM assignments a
+    JOIN class_members cm ON cm.class_id = a.class_id AND cm.user_id = ?
+    WHERE a.deadline IS NOT NULL AND a.deadline >= date('now', '-7 days')
+    ORDER BY a.deadline ASC LIMIT 5
+  `),
+
+  recentSubmissions: db.prepare(`
+    SELECT s.id, s.original_name, s.status, s.grade,
+           s.submitted_at, a.title AS assignment_title
+    FROM submissions s
+    LEFT JOIN assignments a ON a.id = s.assignment_id
+    WHERE s.student_id = ?
+    ORDER BY s.submitted_at DESC LIMIT 10
+  `),
+
+  notifications: db.prepare(`
+    SELECT id, type, message, is_read, created_at
+    FROM parent_notifications WHERE parent_link_id = ?
+    ORDER BY created_at DESC LIMIT 50
+  `),
+  markNotifRead: db.prepare('UPDATE parent_notifications SET is_read = 1 WHERE id = ? AND parent_link_id = ?'),
+  unreadCount:   db.prepare('SELECT COUNT(*) AS cnt FROM parent_notifications WHERE parent_link_id = ? AND is_read = 0'),
+
+  history: db.prepare(`
+    SELECT ts.id, ts.mode, ts.score, ts.total, ts.status,
+           ts.started_at, ts.finished_at,
+           s.slug AS subject_slug, s.name AS subject_name
+    FROM test_sessions ts
+    LEFT JOIN subjects s ON s.id = ts.subject_id
+    WHERE ts.user_id = ? AND ts.id < ?
+    ORDER BY ts.id DESC LIMIT ?
+  `),
+  historyFirst: db.prepare(`
+    SELECT ts.id, ts.mode, ts.score, ts.total, ts.status,
+           ts.started_at, ts.finished_at,
+           s.slug AS subject_slug, s.name AS subject_name
+    FROM test_sessions ts
+    LEFT JOIN subjects s ON s.id = ts.subject_id
+    WHERE ts.user_id = ?
+    ORDER BY ts.id DESC LIMIT ?
+  `),
+};
+
+/* ══════════════════════════════════════════════════════════════════════
+   STUDENT ENDPOINTS (regular authMiddleware)
+   ══════════════════════════════════════════════════════════════════════ */
+
+/* ── GET /api/parent/my-links ──────────────────────────────────────── */
+function getMyLinks(req, res) {
+  res.json(stmts.linksByStudent.all(req.user.id));
+}
+
+/* ── POST /api/parent/links ────────────────────────────────────────── */
+function createLink(req, res) {
+  const { cnt } = stmts.linkCount.get(req.user.id);
+  if (cnt >= 3) return res.status(400).json({ error: 'Maximum 3 parent links allowed' });
+
+  const label = (req.body.label || '').trim().slice(0, 50) || 'Родитель';
+  const token = crypto.randomBytes(24).toString('hex');
+
+  const r = stmts.insertLink.run(req.user.id, token, label);
+  res.status(201).json({
+    id: r.lastInsertRowid,
+    token,
+    label,
+    url: `${req.protocol}://${req.get('host')}/parent?t=${token}`,
+  });
+}
+
+/* ── PATCH /api/parent/links/:id ───────────────────────────────────── */
+function updateLink(req, res) {
+  const link = stmts.linkById.get(Number(req.params.id));
+  if (!link || link.student_id !== req.user.id)
+    return res.status(404).json({ error: 'Link not found' });
+
+  const label     = req.body.label !== undefined ? String(req.body.label).trim().slice(0, 50) : link.label;
+  const is_active = req.body.is_active !== undefined ? (req.body.is_active ? 1 : 0) : link.is_active;
+
+  stmts.updateLink.run(label, is_active, link.id);
+  res.json({ ok: true });
+}
+
+/* ── DELETE /api/parent/links/:id ──────────────────────────────────── */
+function deleteLink(req, res) {
+  const link = stmts.linkById.get(Number(req.params.id));
+  if (!link || link.student_id !== req.user.id)
+    return res.status(404).json({ error: 'Link not found' });
+
+  stmts.deleteLink.run(link.id);
+  res.json({ ok: true });
+}
+
+/* ══════════════════════════════════════════════════════════════════════
+   PARENT ENDPOINTS (parentAuth middleware)
+   ══════════════════════════════════════════════════════════════════════ */
+
+/* ── POST /api/parent/auth — exchange link token for parent JWT ────── */
+function exchangeToken(req, res) {
+  const { token } = req.body;
+  if (!token || typeof token !== 'string')
+    return res.status(400).json({ error: 'token required' });
+
+  const link = stmts.linkByToken.get(token);
+  if (!link || !link.is_active)
+    return res.status(404).json({ error: 'Link not found or deactivated' });
+  if (link.expires_at && new Date(link.expires_at) < new Date())
+    return res.status(410).json({ error: 'Link expired' });
+
+  // Update last_used (only here, not on every request)
+  try { stmts.updateLastUsed.run(link.id); } catch {}
+
+  const parentJwt = jwt.sign(
+    { type: 'parent', linkId: link.id, studentId: link.student_id },
+    JWT_SECRET,
+    { algorithm: 'HS256', expiresIn: '24h' }
+  );
+
+  // Inline student fetch (avoid importing studentBasic for this one-off)
+  const student = db.prepare('SELECT name, level, streak_current FROM users WHERE id = ?').get(link.student_id);
+
+  res.json({
+    jwt: parentJwt,
+    student: {
+      name: student?.name,
+      level: student?.level,
+      streak_current: student?.streak_current,
+    },
+  });
+}
+
+/* ── GET /api/parent/dashboard — aggregated overview ─────────────────
+   Optimized: 1 mega CTE + 3 focused queries = 4 total (was 9)
+   ──────────────────────────────────────────────────────────────────── */
+function getDashboard(req, res) {
+  const uid = req.parent.studentId;
+
+  // 1. Mega query: student + stats + heatmap + weekly + totals + recent activity
+  const row = stmts.dashboardMega.get({ uid });
+  const student = JSON.parse(row.student);
+  if (!student) return res.status(404).json({ error: 'Student not found' });
+
+  const weekly    = JSON.parse(row.weekly);
+  const heatmap   = JSON.parse(row.heatmap);
+  const bySubject = JSON.parse(row.bySubject);
+  const trend     = JSON.parse(row.trend); // Already ASC from SQL
+  const totals    = JSON.parse(row.totals);
+  const weekAct   = JSON.parse(row.weekActivity);
+
+  // 2. Weak topics (separate — heavy JOIN, can't merge into CTE)
+  const weakTopics = stmts.weakTopics.all(uid);
+
+  // 3. Deadlines + submissions (lightweight)
+  const deadlines   = stmts.upcomingDeadlines.all(uid, uid);
+  const submissions = stmts.recentSubmissions.all(uid);
+
+  // 4. Course progress + unread notifs
+  const courseProgress = stmts.courseProgress.all({ uid });
+  const { cnt: unreadNotifs } = stmts.unreadCount.get(req.parent.linkId);
+
+  // Alerts (computed in JS, zero DB cost)
+  const alerts = [];
+  if (row.lastSessionDate) {
+    const daysSince = Math.floor((Date.now() - new Date(row.lastSessionDate).getTime()) / 86400000);
+    if (daysSince >= 3) {
+      alerts.push({ type: 'low_activity', icon: 'alert-triangle',
+        message: `${student.name} не занимался ${daysSince} дней` });
+    }
+  }
+  for (const d of deadlines) {
+    if (d.done === 0 && new Date(d.deadline) < new Date()) {
+      alerts.push({ type: 'deadline_missed', icon: 'clock',
+        message: `Пропущен дедлайн: ${d.title}` });
+    }
+  }
+
+  res.json({
+    student,
+    totals: {
+      sessions:  totals.sessions  || 0,
+      correct:   totals.correct   || 0,
+      questions: totals.questions || 0,
+      avgPct:    Math.round(totals.avg_pct || 0),
+    },
+    recentActivity: {
+      lastSessionDate: row.lastSessionDate || null,
+      sessionsThisWeek: weekAct?.cnt || 0,
+      avgPctThisWeek: Math.round(weekAct?.avg_pct || 0),
+    },
+    weeklyStats: weekly.map(r => ({ week: r.week, sessions: r.sessions, avgPct: Math.round(r.avg_pct || 0) })),
+    heatmap: heatmap.map(r => ({ day: r.day, count: r.count })),
+    bySubject: bySubject.map(r => ({
+      slug: r.slug, name: r.name, sessions: r.sessions,
+      avgPct: Math.round(r.avg_pct || 0),
+    })),
+    trend: trend.map(r => ({
+      pct: r.total > 0 ? Math.round(r.score * 100 / r.total) : 0,
+      date: r.finished_at, subject: r.subject_slug,
+    })),
+    weakTopics: weakTopics.map(r => ({
+      topic: r.topic, subject: r.subject_name, errorPct: r.error_pct,
+    })),
+    deadlines: deadlines.map(d => ({
+      id: d.id, title: d.title, deadline: d.deadline,
+      subject: d.subject_slug, done: d.done > 0,
+    })),
+    submissions: submissions.map(s => ({
+      id: s.id, name: s.original_name, status: s.status,
+      grade: s.grade, date: s.submitted_at, assignment: s.assignment_title,
+    })),
+    courseProgress: courseProgress.map(r => ({
+      id: r.id, title: r.title, emoji: r.cover_emoji,
+      done: r.done_lessons, total: r.total_lessons,
+      pct: r.total_lessons > 0 ? Math.round(r.done_lessons * 100 / r.total_lessons) : 0,
+    })),
+    alerts,
+    unreadNotifs,
+  });
+}
+
+/* ── GET /api/parent/history ─────────────────────────────────────────── */
+function getHistory(req, res) {
+  const uid    = req.parent.studentId;
+  const limit  = Math.min(50, Math.max(1, Number(req.query.limit) || 20));
+  const cursor = Number(req.query.cursor) || 0;
+
+  const rows = cursor
+    ? stmts.history.all(uid, cursor, limit)
+    : stmts.historyFirst.all(uid, limit);
+
+  const nextCursor = rows.length === limit ? rows[rows.length - 1].id : null;
+  res.json({ rows, nextCursor });
+}
+
+/* ── GET /api/parent/notifications ───────────────────────────────────── */
+function getNotifications(req, res) {
+  res.json(stmts.notifications.all(req.parent.linkId));
+}
+
+/* ── PATCH /api/parent/notifications/:id/read ────────────────────────── */
+function markRead(req, res) {
+  stmts.markNotifRead.run(Number(req.params.id), req.parent.linkId);
+  res.json({ ok: true });
+}
+
+module.exports = {
+  getMyLinks, createLink, updateLink, deleteLink,
+  exchangeToken, getDashboard, getHistory, getNotifications, markRead,
+};
diff --git a/backend/src/controllers/permissionsController.js b/backend/src/controllers/permissionsController.js
new file mode 100644
index 0000000..68c8cf4
--- /dev/null
+++ b/backend/src/controllers/permissionsController.js
@@ -0,0 +1,301 @@
+const db = require('../db/db');
+
+/* ── All known permissions ─────────────────────────────────────────────── */
+const ALL_PERMISSIONS = [
+  /* ── Teacher ── */
+  {
+    key: 'questions.manage',
+    role: 'teacher',
+    label: 'Управление вопросами',
+    desc: 'Создавать, редактировать и копировать вопросы в банке',
+    default: 0,
+  },
+  {
+    key: 'questions.delete',
+    role: 'teacher',
+    label: 'Удалять вопросы',
+    desc: 'Удалять вопросы из банка (требует "Управление вопросами")',
+    default: 0,
+  },
+  {
+    key: 'students.invite',
+    role: 'teacher',
+    label: 'Регистрировать учеников',
+    desc: 'Создавать новые аккаунты учеников напрямую из панели',
+    default: 0,
+  },
+  {
+    key: 'sessions.reset',
+    role: 'teacher',
+    label: 'Сброс попыток',
+    desc: 'Сбрасывать прохождение теста ученика в своём классе',
+    default: 1,
+  },
+  {
+    key: 'results.export',
+    role: 'teacher',
+    label: 'Экспорт результатов',
+    desc: 'Выгружать результаты и оценки класса в CSV',
+    default: 1,
+  },
+  {
+    key: 'classes.manage',
+    role: 'teacher',
+    label: 'Управление классами',
+    desc: 'Создавать, редактировать и удалять свои классы',
+    default: 1,
+  },
+  {
+    key: 'library.upload',
+    role: 'teacher',
+    label: 'Загрузка файлов',
+    desc: 'Загружать файлы в библиотеку',
+    default: 1,
+  },
+  {
+    key: 'library.folders',
+    role: 'teacher',
+    label: 'Управление папками',
+    desc: 'Создавать папки и настраивать доступ к ним',
+    default: 1,
+  },
+  {
+    key: 'schedule.manage',
+    role: 'teacher',
+    label: 'Дедлайны заданий',
+    desc: 'Устанавливать дедлайны и временные окна для заданий',
+    default: 1,
+  },
+  {
+    key: 'announcements.send',
+    role: 'teacher',
+    label: 'Объявления',
+    desc: 'Публиковать объявления в своих классах',
+    default: 1,
+  },
+  {
+    key: 'templates.manage',
+    role: 'teacher',
+    label: 'Управление шаблонами',
+    desc: 'Создавать и использовать шаблоны курсов и уроков',
+    default: 1,
+  },
+  {
+    key: 'templates.public',
+    role: 'teacher',
+    label: 'Публикация шаблонов',
+    desc: 'Делать свои шаблоны публичными для всех учителей',
+    default: 0,
+  },
+  {
+    key: 'courses.manage',
+    role: 'teacher',
+    label: 'Управление курсами',
+    desc: 'Создавать и редактировать теоретические курсы и уроки',
+    default: 1,
+  },
+  {
+    key: 'courses.interactive',
+    role: 'teacher',
+    label: 'Интерактивные блоки',
+    desc: 'Добавлять интерактивные задания в уроки (сопоставление, пропуски, порядок)',
+    default: 1,
+  },
+  {
+    key: 'shop.manage',
+    role: 'teacher',
+    label: 'Управление магазином',
+    desc: 'Создавать и редактировать товары в магазине наград',
+    default: 0,
+  },
+  {
+    key: 'gamification.manage',
+    role: 'teacher',
+    label: 'Управление геймификацией',
+    desc: 'Начислять XP/монеты ученикам, управлять достижениями',
+    default: 0,
+  },
+  /* ── Student ── */
+  {
+    key: 'tests.free',
+    role: 'student',
+    label: 'Свободные тесты',
+    desc: 'Проходить тесты без задания (по предмету / случайно)',
+    default: 1,
+  },
+  {
+    key: 'board.post',
+    role: 'student',
+    label: 'Реакции на доске',
+    desc: 'Ставить реакции на задания на доске',
+    default: 1,
+  },
+  {
+    key: 'profile.edit',
+    role: 'student',
+    label: 'Редактирование профиля',
+    desc: 'Изменять своё имя и пароль',
+    default: 1,
+  },
+  {
+    key: 'shop.purchase',
+    role: 'student',
+    label: 'Покупки в магазине',
+    desc: 'Покупать предметы в магазине наград за монеты',
+    default: 1,
+  },
+  {
+    key: 'gamification.challenges',
+    role: 'student',
+    label: 'Испытания недели',
+    desc: 'Участвовать в еженедельных испытаниях и получать награды',
+    default: 1,
+  },
+  {
+    key: 'theory.access',
+    role: 'student',
+    label: 'Доступ к теории',
+    desc: 'Просматривать теоретические курсы и уроки',
+    default: 1,
+  },
+  {
+    key: 'simulations.access',
+    role: 'student',
+    label: 'Доступ к симуляциям',
+    desc: 'Открывать лабораторию с физическими, химическими и биологическими симуляциями',
+    default: 1,
+  },
+  {
+    key: 'simulations.quiz',
+    role: 'student',
+    label: 'Задания в симуляциях',
+    desc: 'Использовать режим "Задания" в симуляциях (квиз-режим)',
+    default: 1,
+  },
+];
+
+/* ── Seed defaults once per startup ───────────────────────────────────── */
+function seedDefaults() {
+  const upsert = db.prepare(
+    'INSERT OR IGNORE INTO role_permissions (role, permission, enabled) VALUES (?, ?, ?)'
+  );
+  const run = db.transaction(() => {
+    for (const p of ALL_PERMISSIONS) upsert.run(p.role, p.key, p.default);
+  });
+  run();
+}
+
+/* ── GET /api/permissions ─────────────────────────────────────────────── */
+function getPermissions(_req, res) {
+  seedDefaults();
+  const rows = db.prepare('SELECT role, permission, enabled FROM role_permissions').all();
+  const map = { teacher: {}, student: {} };
+  for (const r of rows) {
+    if (map[r.role]) map[r.role][r.permission] = r.enabled === 1;
+  }
+  res.json({ permissions: map, definitions: ALL_PERMISSIONS });
+}
+
+/* ── POST /api/permissions  { role, permission, enabled } ─────────────── */
+function setPermission(req, res) {
+  const { role, permission, enabled } = req.body;
+  if (!['teacher', 'student'].includes(role))
+    return res.status(400).json({ error: 'Invalid role' });
+  if (!ALL_PERMISSIONS.find(p => p.key === permission && p.role === role))
+    return res.status(400).json({ error: 'Unknown permission' });
+  db.prepare(
+    'INSERT OR REPLACE INTO role_permissions (role, permission, enabled) VALUES (?, ?, ?)'
+  ).run(role, permission, enabled ? 1 : 0);
+  res.json({ ok: true });
+}
+
+/* ── GET /api/permissions/me  (any authenticated user) ───────────────── */
+function getMyPermissions(req, res) {
+  const uid  = req.user.id;
+  const role = req.user.role;
+  if (role === 'admin') return res.json({ role, permissions: [] }); // admins bypass all
+
+  seedDefaults();
+  const roleRows = db.prepare(
+    'SELECT permission, enabled FROM role_permissions WHERE role = ?'
+  ).all(role);
+  const roleMap = {};
+  for (const r of roleRows) roleMap[r.permission] = r.enabled === 1;
+
+  const userRows = db.prepare(
+    'SELECT permission, enabled FROM user_permissions WHERE user_id = ?'
+  ).all(uid);
+  const userMap = {};
+  for (const r of userRows) userMap[r.permission] = r.enabled === 1;
+
+  const defs = ALL_PERMISSIONS.filter(p => p.role === role);
+  const result = defs.map(d => ({
+    key:       d.key,
+    effective: userMap[d.key] !== undefined ? userMap[d.key] : (roleMap[d.key] ?? !!d.default),
+  }));
+  res.json({ role, permissions: result });
+}
+
+/* ── GET /api/permissions/users/:id ──────────────────────────────────── */
+function getUserPermissions(req, res) {
+  const uid = Number(req.params.id);
+  const target = require('../db/db').prepare('SELECT id, role FROM users WHERE id = ?').get(uid);
+  if (!target) return res.status(404).json({ error: 'User not found' });
+
+  seedDefaults();
+  // role-level values
+  const roleRows = require('../db/db').prepare(
+    'SELECT permission, enabled FROM role_permissions WHERE role = ?'
+  ).all(target.role);
+  const roleMap = {};
+  for (const r of roleRows) roleMap[r.permission] = r.enabled === 1;
+
+  // user-level overrides
+  const userRows = require('../db/db').prepare(
+    'SELECT permission, enabled FROM user_permissions WHERE user_id = ?'
+  ).all(uid);
+  const userMap = {};
+  for (const r of userRows) userMap[r.permission] = r.enabled === 1;
+
+  const defs = ALL_PERMISSIONS.filter(p => p.role === target.role);
+  const result = defs.map(d => ({
+    key:      d.key,
+    label:    d.label,
+    desc:     d.desc,
+    roleVal:  roleMap[d.key] ?? d.default,  // effective role-level value
+    userVal:  userMap[d.key],                // undefined = no override
+    effective: userMap[d.key] !== undefined ? userMap[d.key] : (roleMap[d.key] ?? !!d.default),
+  }));
+
+  res.json({ role: target.role, permissions: result });
+}
+
+/* ── POST /api/permissions/users/:id  { permission, enabled } ─────────── */
+function setUserPermission(req, res) {
+  const uid = Number(req.params.id);
+  const { permission, enabled } = req.body;
+  const target = require('../db/db').prepare('SELECT role FROM users WHERE id = ?').get(uid);
+  if (!target) return res.status(404).json({ error: 'User not found' });
+  if (!ALL_PERMISSIONS.find(p => p.key === permission && p.role === target.role))
+    return res.status(400).json({ error: 'Unknown permission for this role' });
+  require('../db/db').prepare(
+    'INSERT OR REPLACE INTO user_permissions (user_id, permission, enabled) VALUES (?, ?, ?)'
+  ).run(uid, permission, enabled ? 1 : 0);
+  res.json({ ok: true });
+}
+
+/* ── DELETE /api/permissions/users/:id/reset  (single or all) ─────────── */
+function resetUserPermissions(req, res) {
+  const uid = Number(req.params.id);
+  const { permission } = req.body; // optional: reset one key
+  if (permission) {
+    require('../db/db').prepare(
+      'DELETE FROM user_permissions WHERE user_id = ? AND permission = ?'
+    ).run(uid, permission);
+  } else {
+    require('../db/db').prepare('DELETE FROM user_permissions WHERE user_id = ?').run(uid);
+  }
+  res.json({ ok: true });
+}
+
+module.exports = { getPermissions, setPermission, seedDefaults, ALL_PERMISSIONS, getMyPermissions, getUserPermissions, setUserPermission, resetUserPermissions };
diff --git a/backend/src/controllers/petController.js b/backend/src/controllers/petController.js
new file mode 100644
index 0000000..25d7fff
--- /dev/null
+++ b/backend/src/controllers/petController.js
@@ -0,0 +1,305 @@
+'use strict';
+const db = require('../db/db');
+const { awardCoins } = require('./gamificationController');
+
+// Incremental migrations
+try { db.exec("ALTER TABLE users ADD COLUMN pet_name TEXT"); } catch {}
+try { db.exec("ALTER TABLE users ADD COLUMN pet_color TEXT DEFAULT 'purple'"); } catch {}
+try { db.exec("ALTER TABLE users ADD COLUMN pet_last_petted TEXT"); } catch {}
+try { db.exec("ALTER TABLE users ADD COLUMN pet_petting_streak INT DEFAULT 0"); } catch {}
+try { db.exec("ALTER TABLE users ADD COLUMN pet_last_star TEXT"); } catch {}
+try { db.exec("ALTER TABLE users ADD COLUMN pet_bg TEXT DEFAULT 'default'"); } catch {}
+try { db.exec("ALTER TABLE users ADD COLUMN pet_bg_owned TEXT DEFAULT '[]'"); } catch {}
+try { db.exec("ALTER TABLE users ADD COLUMN pet_last_fed TEXT"); } catch {}
+
+const BG_SHOP = [
+  { id:'space',  name:'Космос',  price:50,  desc:'Звёздный простор' },
+  { id:'forest', name:'Лес',     price:50,  desc:'Таинственный лес' },
+  { id:'aqua',   name:'Океан',   price:75,  desc:'Морская глубина'  },
+  { id:'sunset', name:'Закат',   price:75,  desc:'Пурпурный закат'  },
+];
+
+function _parseOwned(raw) {
+  try { return JSON.parse(raw || '[]'); } catch { return []; }
+}
+
+function _petLevel(xp) {
+  if (xp >= 80000) return 8;
+  if (xp >= 40000) return 7;
+  if (xp >= 20000) return 6;
+  if (xp >= 10000) return 5;
+  if (xp >= 5000)  return 4;
+  if (xp >= 2000)  return 3;
+  if (xp >= 500)   return 2;
+  return 1;
+}
+
+function _mood(streak, daysSinceLogin) {
+  if (daysSinceLogin >= 14) return 'sleeping';
+  if (daysSinceLogin >= 7)  return 'hungry';
+  if (daysSinceLogin >= 3)  return 'sad';
+  if (streak >= 7)  return 'ecstatic';
+  if (streak >= 3)  return 'happy';
+  if (streak >= 1)  return 'neutral';
+  return 'sad';
+}
+
+function _accessories(user) {
+  const acc = [];
+  if (user.streak_best >= 7)   acc.push('hat');
+  if (user.level >= 5)         acc.push('glasses');
+  if (user.xp >= 5000)         acc.push('crown');
+  if (user.level >= 10)        acc.push('star');
+  return acc;
+}
+
+function _quests(userId, streakCurrent) {
+  const today = new Date().toISOString().slice(0, 10);
+  const xpToday = db.prepare(
+    "SELECT COALESCE(SUM(amount),0) AS total FROM xp_log WHERE user_id=? AND date(created_at)=date(?)"
+  ).get(userId, today)?.total || 0;
+  const testsToday = db.prepare(
+    "SELECT COUNT(*) AS cnt FROM test_sessions WHERE user_id=? AND status='completed' AND date(finished_at)=date(?)"
+  ).get(userId, today)?.cnt || 0;
+  return [
+    { id:'xp30',    icon:'⭐', label:'Набери 30 XP сегодня', done: xpToday >= 30,      progress: Math.min(xpToday, 30),   goal: 30 },
+    { id:'test1',   icon:'📝', label:'Пройди 1 тест',        done: testsToday >= 1,   progress: Math.min(testsToday, 1), goal: 1  },
+    { id:'streak2', icon:'🔥', label:'Серия 2+ дней',        done: streakCurrent >= 2 },
+  ];
+}
+
+function _moodForecast(daysSince) {
+  if (daysSince >= 7) return null; // already hungry/sleeping
+  if (daysSince >= 3) return { mood: 'hungry', inDays: Math.max(0, 7 - daysSince) };
+  const toSad = Math.max(0, 3 - daysSince);
+  if (toSad <= 2) return { mood: 'sad', inDays: toSad };
+  return null;
+}
+
+/* ── GET /api/pet ─────────────────────────────────────────────────────── */
+function getPet(req, res) {
+  const user = db.prepare(
+    `SELECT xp, level, streak_current, streak_best, streak_date, coins,
+            pet_name, last_login, pet_color, pet_last_petted, pet_petting_streak,
+            pet_bg, pet_bg_owned, pet_last_fed
+     FROM users WHERE id = ?`
+  ).get(req.user.id);
+
+  if (!user) return res.status(404).json({ error: 'User not found' });
+
+  const now = new Date();
+
+  const lastXpRow   = db.prepare("SELECT MAX(created_at) AS t FROM xp_log WHERE user_id = ?").get(req.user.id);
+  const lastSessRow = db.prepare("SELECT MAX(finished_at) AS t FROM test_sessions WHERE user_id = ? AND status = 'completed'").get(req.user.id);
+  const candidates  = [
+    user.last_login  ? new Date(user.last_login)  : null,
+    lastXpRow?.t     ? new Date(lastXpRow.t)       : null,
+    lastSessRow?.t   ? new Date(lastSessRow.t)     : null,
+  ].filter(Boolean);
+  const lastActive = candidates.length ? new Date(Math.max(...candidates.map(d => d.getTime()))) : now;
+  const daysSince  = Math.max(0, Math.floor((now - lastActive) / 86400000));
+
+  const since7   = new Date(now - 7 * 86400000).toISOString();
+  const recentXP = db.prepare(
+    'SELECT COALESCE(SUM(amount),0) AS total FROM xp_log WHERE user_id = ? AND created_at >= ?'
+  ).get(req.user.id, since7)?.total || 0;
+
+  const petLvl      = _petLevel(user.xp);
+  const mood        = _mood(user.streak_current, daysSince);
+  const accessories = _accessories(user);
+
+  const thresholds = [0, 500, 2000, 5000, 10000, 20000, 40000, 80000, Infinity];
+  const xpForNext  = thresholds[petLvl] ?? Infinity;
+  const xpForCurr  = thresholds[petLvl - 1] ?? 0;
+
+  const d0 = new Date(now); d0.setDate(d0.getDate() - 6);
+  const weekStart = d0.toISOString().slice(0, 10);
+  const weekRows = db.prepare(
+    "SELECT date(created_at) AS d, COALESCE(SUM(amount),0) AS xp FROM xp_log WHERE user_id = ? AND date(created_at) >= date(?) GROUP BY date(created_at)"
+  ).all(req.user.id, weekStart);
+  const weekMap = new Map(weekRows.map(r => [r.d, r.xp]));
+  const weeklyXP = [];
+  for (let i = 6; i >= 0; i--) {
+    const d = new Date(now); d.setDate(d.getDate() - i);
+    const dateStr = d.toISOString().slice(0, 10);
+    weeklyXP.push({ day: d.toLocaleDateString('ru', { weekday: 'short' }), xp: weekMap.get(dateStr) || 0 });
+  }
+
+  const SOURCE_LABELS = {
+    hangman_win: 'Виселица', crossword_win: 'Кроссворд',
+    test_answer: 'Тест', challenge: 'Задание',
+    lab_activity: 'Лаборатория', assignment: 'Домашнее задание',
+    pet_petting: 'Поглаживание', pet_feeding: 'Кормёжка питомца',
+    mood_ecstatic: 'Бонус настроения', correct_answers: 'Тест',
+    test_complete: 'Тест', 'test_90+': 'Тест 90%+', test_perfect: 'Тест 100%',
+  };
+  const rawActivity = db.prepare(
+    "SELECT amount, reason, created_at FROM xp_log WHERE user_id = ? ORDER BY created_at DESC LIMIT 6"
+  ).all(req.user.id);
+  const recentActivity = rawActivity.map(r => ({
+    xp: r.amount, label: SOURCE_LABELS[r.reason] || r.reason, at: r.created_at,
+  }));
+
+  const pettingCooldown = user.pet_last_petted
+    ? Math.max(0, 60 - Math.floor((now - new Date(user.pet_last_petted)) / 1000))
+    : 0;
+  const feedCooldown = user.pet_last_fed
+    ? Math.max(0, 1800 - Math.floor((now - new Date(user.pet_last_fed)) / 1000))
+    : 0;
+
+  res.json({
+    petName:        user.pet_name || 'Квантик',
+    petLevel:       petLvl,
+    petColor:       user.pet_color || 'purple',
+    mood,
+    daysSinceLogin: daysSince,
+    accessories,
+    xp:             user.xp,
+    level:          user.level,
+    streakCurrent:  user.streak_current,
+    streakBest:     user.streak_best,
+    coins:          user.coins,
+    pettingStreak:  user.pet_petting_streak || 0,
+    recentXP,
+    weeklyXP,
+    recentActivity,
+    xpForCurrLevel: xpForCurr,
+    xpForNextLevel: xpForNext === Infinity ? null : xpForNext,
+    quests:         _quests(req.user.id, user.streak_current),
+    moodForecast:   _moodForecast(daysSince),
+    pettingCooldown,
+    feedCooldown,
+    petBg:    user.pet_bg || 'default',
+    petBgOwned: _parseOwned(user.pet_bg_owned),
+  });
+}
+
+/* ── POST /api/pet/pet ────────────────────────────────────────────────── */
+function petAction(req, res) {
+  const user = db.prepare('SELECT pet_last_petted, pet_petting_streak FROM users WHERE id=?').get(req.user.id);
+  if (!user) return res.status(404).json({ error: 'not found' });
+
+  const now = new Date();
+  if (user.pet_last_petted) {
+    const diff = (now - new Date(user.pet_last_petted)) / 1000;
+    if (diff < 60) return res.status(429).json({ error: 'cooldown', remaining: Math.ceil(60 - diff) });
+  }
+
+  const today     = now.toISOString().slice(0, 10);
+  const yesterday = new Date(now - 86400000).toISOString().slice(0, 10);
+  let streak      = user.pet_petting_streak || 0;
+  if (user.pet_last_petted) {
+    const lastDate = user.pet_last_petted.slice(0, 10);
+    if (lastDate === today)          { /* same day, keep */ }
+    else if (lastDate === yesterday) streak++;
+    else                             streak = 1;
+  } else {
+    streak = 1;
+  }
+
+  try { awardCoins(req.user.id, 2, 'pet_petting'); } catch {}
+  db.prepare('UPDATE users SET pet_last_petted=?, pet_petting_streak=? WHERE id=?')
+    .run(now.toISOString(), streak, req.user.id);
+
+  res.json({ ok: true, coins: 2, pettingStreak: streak });
+}
+
+/* ── PATCH /api/pet/name ──────────────────────────────────────────────── */
+function renamePet(req, res) {
+  let { name } = req.body;
+  if (!name || typeof name !== 'string') return res.status(400).json({ error: 'name required' });
+  name = name.trim().slice(0, 24);
+  if (!name) return res.status(400).json({ error: 'name required' });
+  db.prepare('UPDATE users SET pet_name = ? WHERE id = ?').run(name, req.user.id);
+  res.json({ ok: true, name });
+}
+
+/* ── PATCH /api/pet/color ─────────────────────────────────────────────── */
+function updateColor(req, res) {
+  const { color } = req.body;
+  const VALID = ['purple', 'cyan', 'gold', 'red', 'green', 'blue'];
+  if (!VALID.includes(color)) return res.status(400).json({ error: 'invalid color' });
+  db.prepare('UPDATE users SET pet_color = ? WHERE id = ?').run(color, req.user.id);
+  res.json({ ok: true, color });
+}
+
+/* ── GET /api/pet/shop ────────────────────────────────────────────────── */
+function getShop(req, res) {
+  const user = db.prepare('SELECT coins, pet_bg, pet_bg_owned FROM users WHERE id=?').get(req.user.id);
+  if (!user) return res.status(404).json({ error: 'not found' });
+  const owned = _parseOwned(user.pet_bg_owned);
+  res.json({
+    coins:     user.coins || 0,
+    currentBg: user.pet_bg || 'default',
+    items:     BG_SHOP.map(item => ({ ...item, owned: owned.includes(item.id) })),
+  });
+}
+
+/* ── POST /api/pet/shop/buy ───────────────────────────────────────────── */
+function buyBg(req, res) {
+  const { id } = req.body;
+  const item = BG_SHOP.find(b => b.id === id);
+  if (!item) return res.status(400).json({ error: 'invalid item' });
+  const user = db.prepare('SELECT coins, pet_bg_owned FROM users WHERE id=?').get(req.user.id);
+  if (!user) return res.status(404).json({ error: 'not found' });
+  const owned = _parseOwned(user.pet_bg_owned);
+  if (!owned.includes(id)) {
+    if ((user.coins || 0) < item.price) return res.status(400).json({ error: 'insufficient_coins' });
+    db.prepare('UPDATE users SET coins=coins-?, pet_bg_owned=?, pet_bg=? WHERE id=?')
+      .run(item.price, JSON.stringify([...owned, id]), id, req.user.id);
+  } else {
+    db.prepare('UPDATE users SET pet_bg=? WHERE id=?').run(id, req.user.id);
+  }
+  const updated = db.prepare('SELECT coins FROM users WHERE id=?').get(req.user.id);
+  res.json({ ok: true, bg: id, coins: updated.coins });
+}
+
+/* ── PATCH /api/pet/bg ────────────────────────────────────────────────── */
+function setBg(req, res) {
+  const { id } = req.body;
+  if (id !== 'default') {
+    const owned = _parseOwned(db.prepare('SELECT pet_bg_owned FROM users WHERE id=?').get(req.user.id)?.pet_bg_owned);
+    if (!owned.includes(id)) return res.status(403).json({ error: 'not owned' });
+  }
+  db.prepare('UPDATE users SET pet_bg=? WHERE id=?').run(id, req.user.id);
+  res.json({ ok: true, bg: id });
+}
+
+/* ── POST /api/pet/star ───────────────────────────────────────────────── */
+function starCatch(req, res) {
+  const user = db.prepare('SELECT pet_last_star FROM users WHERE id=?').get(req.user.id);
+  if (!user) return res.status(404).json({ error: 'not found' });
+  const now = new Date();
+  if (user.pet_last_star) {
+    const diff = (now - new Date(user.pet_last_star)) / 1000;
+    if (diff < 3600) return res.status(429).json({ error: 'cooldown', remaining: Math.ceil(3600 - diff) });
+  }
+  try { awardCoins(req.user.id, 5, 'star_catch'); } catch {}
+  db.prepare('UPDATE users SET pet_last_star=? WHERE id=?').run(now.toISOString(), req.user.id);
+  res.json({ ok: true, coins: 5 });
+}
+
+/* ── POST /api/pet/feed ───────────────────────────────────────────────── */
+// Called when mini-game "feed pet" is correctly answered on frontend.
+// 30-minute cooldown; awards 15 XP + marks pet as fed.
+function feedPet(req, res) {
+  const user = db.prepare('SELECT pet_last_fed FROM users WHERE id=?').get(req.user.id);
+  if (!user) return res.status(404).json({ error: 'not found' });
+  const now = new Date();
+  const COOLDOWN_SEC = 1800; // 30 minutes
+  if (user.pet_last_fed) {
+    const diff = (now - new Date(user.pet_last_fed)) / 1000;
+    if (diff < COOLDOWN_SEC) {
+      return res.status(429).json({ error: 'cooldown', remaining: Math.ceil(COOLDOWN_SEC - diff) });
+    }
+  }
+  try {
+    const { awardXP } = require('./gamificationController');
+    awardXP(req.user.id, 15, 'pet_feeding');
+  } catch (e) { console.error('[feedPet] awardXP:', e.message); }
+  db.prepare('UPDATE users SET pet_last_fed=? WHERE id=?').run(now.toISOString(), req.user.id);
+  const updated = db.prepare('SELECT xp, coins FROM users WHERE id=?').get(req.user.id);
+  res.json({ ok: true, xpAwarded: 15, xp: updated.xp, coins: updated.coins });
+}
+
+module.exports = { getPet, renamePet, petAction, updateColor, starCatch, getShop, buyBg, setBg, feedPet };
diff --git a/backend/src/controllers/questionController.js b/backend/src/controllers/questionController.js
new file mode 100644
index 0000000..0b53427
--- /dev/null
+++ b/backend/src/controllers/questionController.js
@@ -0,0 +1,248 @@
+const db = require('../db/db');
+const { stripTags } = require('../utils/sanitize');
+
+/* helper: find or create topic by name within a subject */
+function resolveTopicId(subjectId, topicId, topicName) {
+  if (topicId) return Number(topicId);
+  if (!topicName?.trim()) return null;
+  const name = topicName.trim();
+  const existing = db.prepare('SELECT id FROM topics WHERE subject_id = ? AND LOWER(name) = LOWER(?)').get(subjectId, name);
+  if (existing) return existing.id;
+  return db.prepare('INSERT INTO topics (subject_id, name) VALUES (?, ?)').run(subjectId, name).lastInsertRowid;
+}
+
+/* ── GET /api/questions?subject=bio&topic_id=1&sort=diff_asc&page=1&limit=50 */
+function list(req, res) {
+  const { subject, topic_id, sort, source_type, q, difficulty, type } = req.query;
+  const limit  = Math.min(500, Math.max(1, Number(req.query.limit) || 100));
+  const page   = Math.max(1, Number(req.query.page) || 1);
+  const offset = (page - 1) * limit;
+
+  const subj = subject
+    ? db.prepare('SELECT id FROM subjects WHERE slug = ?').get(subject)
+    : null;
+  if (subject && !subj) return res.status(404).json({ error: 'Subject not found' });
+
+  const ORDER = {
+    date_desc:  'q.id DESC',
+    date_asc:   'q.id ASC',
+    diff_asc:   'q.difficulty ASC, q.id DESC',
+    diff_desc:  'q.difficulty DESC, q.id DESC',
+  };
+  const orderBy = ORDER[sort] || 'q.id DESC';
+
+  let where = 'WHERE 1=1';
+  const args = [];
+  if (subj)        { where += ' AND q.subject_id = ?';              args.push(subj.id); }
+  if (topic_id)    { where += ' AND q.topic_id = ?';                args.push(topic_id); }
+  if (source_type) { where += ' AND q.source_type = ?';             args.push(source_type); }
+  if (difficulty)  { where += ' AND q.difficulty = ?';              args.push(Number(difficulty)); }
+  if (type)        { where += ' AND q.type = ?';                    args.push(type); }
+  if (q?.trim())   { where += ' AND q.text LIKE ?';                 args.push(`%${q.trim()}%`); }
+
+  const { total } = db.prepare(`SELECT COUNT(*) AS total FROM questions q ${where}`).get(...args);
+
+  const sql = `
+    SELECT q.id, q.text, q.type, q.correct_text, q.difficulty, q.explanation, q.image,
+           q.year, q.source_type,
+           t.name AS topic, t.id AS topic_id,
+           s.name AS subject_name, s.slug AS subject_slug,
+           (SELECT json_group_array(json_object(
+             'id', o.id, 'text', o.text, 'is_correct', o.is_correct, 'order_index', o.order_index, 'match_pair', o.match_pair
+           ) ORDER BY o.order_index)
+            FROM options o WHERE o.question_id = q.id) AS options_json
+    FROM questions q
+    LEFT JOIN topics   t ON t.id = q.topic_id
+    LEFT JOIN subjects s ON s.id = q.subject_id
+    ${where}
+    ORDER BY ${orderBy} LIMIT ? OFFSET ?
+  `;
+
+  const rows = db.prepare(sql).all(...args, limit, offset).map(r => ({
+    ...r,
+    options: JSON.parse(r.options_json || '[]'),
+    options_json: undefined,
+  }));
+
+  res.json({ rows, total, page, limit });
+}
+
+/* ── POST /api/questions ─────────────────────────────────────────────── */
+function create(req, res) {
+  const { subject_slug, topic_id, topic_name, type = 'single', correct_text, difficulty = 1, explanation, options, image } = req.body;
+  const text = stripTags((req.body.text || '').trim());
+
+  if (!subject_slug || !text) return res.status(400).json({ error: 'subject_slug and text are required' });
+  if (text.length > 2000) return res.status(400).json({ error: 'text too long (max 2000 chars)' });
+  if (type !== 'short_answer' && !options?.length)
+    return res.status(400).json({ error: 'options required for this question type' });
+  if (type !== 'short_answer' && type !== 'matching' && !options.some(o => o.is_correct))
+    return res.status(400).json({ error: 'At least one option must be correct' });
+
+  const subj = db.prepare('SELECT id FROM subjects WHERE slug = ?').get(subject_slug);
+  if (!subj) return res.status(404).json({ error: 'Subject not found' });
+
+  const resolvedTopicId = resolveTopicId(subj.id, topic_id, topic_name);
+
+  try {
+    const qid = db.transaction(() => {
+      const { lastInsertRowid } = db.prepare(
+        'INSERT INTO questions (subject_id, topic_id, text, type, correct_text, difficulty, explanation, image) VALUES (?, ?, ?, ?, ?, ?, ?, ?)'
+      ).run(subj.id, resolvedTopicId, text, type, type === 'short_answer' ? (correct_text || null) : null, difficulty, explanation || null, image || null);
+
+      const insertOpt = db.prepare(
+        'INSERT INTO options (question_id, text, is_correct, order_index, match_pair) VALUES (?, ?, ?, ?, ?)'
+      );
+      options.forEach((o, i) => insertOpt.run(lastInsertRowid, o.text, type === 'matching' ? 0 : (o.is_correct ? 1 : 0), i, o.match_pair || null));
+      return lastInsertRowid;
+    })();
+    res.status(201).json({ id: qid });
+  } catch (err) {
+    console.error('[question create]', err.message);
+    res.status(500).json({ error: 'Ошибка создания вопроса' });
+  }
+}
+
+/* ── POST /api/questions/:id/duplicate ──────────────────────────────── */
+function duplicate(req, res) {
+  const q = db.prepare(`
+    SELECT q.*, s.slug AS subject_slug FROM questions q
+    LEFT JOIN subjects s ON s.id = q.subject_id
+    WHERE q.id = ?
+  `).get(req.params.id);
+  if (!q) return res.status(404).json({ error: 'Question not found' });
+
+  const opts = db.prepare('SELECT text, is_correct, order_index FROM options WHERE question_id = ? ORDER BY order_index').all(q.id);
+
+  try {
+    const newId = db.transaction(() => {
+      const { lastInsertRowid } = db.prepare(
+        'INSERT INTO questions (subject_id, topic_id, text, difficulty, explanation, type, correct_text, image) VALUES (?, ?, ?, ?, ?, ?, ?, ?)'
+      ).run(q.subject_id, q.topic_id, q.text + ' (копия)', q.difficulty, q.explanation, q.type, q.correct_text, q.image);
+
+      const ins = db.prepare('INSERT INTO options (question_id, text, is_correct, order_index) VALUES (?, ?, ?, ?)');
+      opts.forEach(o => ins.run(lastInsertRowid, o.text, o.is_correct, o.order_index));
+      return lastInsertRowid;
+    })();
+    res.status(201).json({ id: newId });
+  } catch (err) {
+    console.error('[question duplicate]', err.message);
+    res.status(500).json({ error: 'Ошибка дублирования вопроса' });
+  }
+}
+
+/* ── PUT /api/questions/:id ──────────────────────────────────────────── */
+function update(req, res) {
+  const { type, correct_text, difficulty, explanation, topic_id, topic_name, options, image } = req.body;
+  const text = req.body.text !== undefined ? stripTags(String(req.body.text).trim()) : undefined;
+  const qid = req.params.id;
+
+  if (text !== undefined && text.length > 2000)
+    return res.status(400).json({ error: 'text too long (max 2000 chars)' });
+
+  const q = db.prepare('SELECT id, subject_id, type AS oldType FROM questions WHERE id = ?').get(qid);
+  if (!q) return res.status(404).json({ error: 'Question not found' });
+
+  const resolvedTopicId = resolveTopicId(q.subject_id, topic_id, topic_name);
+  const qtype = type || q.oldType || 'single';
+
+  try {
+    db.transaction(() => {
+      db.prepare(
+        'UPDATE questions SET text = ?, type = ?, correct_text = ?, difficulty = ?, explanation = ?, topic_id = ?, image = ? WHERE id = ?'
+      ).run(text, qtype, qtype === 'short_answer' ? (correct_text || null) : null, difficulty, explanation || null, resolvedTopicId, image !== undefined ? (image || null) : db.prepare('SELECT image FROM questions WHERE id = ?').get(qid)?.image, qid);
+
+      if (options?.length) {
+        if (qtype !== 'matching' && !options.some(o => o.is_correct))
+          throw Object.assign(new Error('At least one option must be correct'), { status: 400 });
+
+        db.prepare('DELETE FROM options WHERE question_id = ?').run(qid);
+        const ins = db.prepare(
+          'INSERT INTO options (question_id, text, is_correct, order_index, match_pair) VALUES (?, ?, ?, ?, ?)'
+        );
+        options.forEach((o, i) => ins.run(qid, o.text, qtype === 'matching' ? 0 : (o.is_correct ? 1 : 0), i, o.match_pair || null));
+      }
+    })();
+    res.json({ id: Number(qid) });
+  } catch (err) {
+    res.status(err.status || 500).json({ error: err.message });
+  }
+}
+
+/* ── DELETE /api/questions/:id ───────────────────────────────────────── */
+function remove(req, res) {
+  const q = db.prepare('SELECT id FROM questions WHERE id = ?').get(req.params.id);
+  if (!q) return res.status(404).json({ error: 'Question not found' });
+  db.prepare('DELETE FROM questions WHERE id = ?').run(req.params.id);
+  res.json({ deleted: Number(req.params.id) });
+}
+
+/* ── POST /api/questions/import  (CSV upload) ────────────────────────── */
+/* CSV format (semicolon-separated, first row = header):
+   subject_slug;topic;text;difficulty;type;opt1;c1;opt2;c2;opt3;c3;opt4;c4;correct_text;explanation;year
+   - type: single | multi | true_false | short_answer
+   - c1-c4: 1 = correct, 0 = wrong (ignored for short_answer)
+   - correct_text: used only for short_answer type
+*/
+function importCSV(req, res) {
+  if (!req.file) return res.status(400).json({ error: 'CSV file required' });
+
+  const raw = req.file.buffer.toString('utf-8').replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+  const lines = raw.split('\n').map(l => l.trim()).filter(l => l.length);
+  if (lines.length < 2) return res.status(400).json({ error: 'CSV is empty or has only header' });
+
+  // skip header row
+  const dataLines = lines.slice(1);
+  const errors = [];
+  let imported = 0;
+
+  const insQ   = db.prepare('INSERT INTO questions (subject_id, topic_id, text, type, correct_text, difficulty, explanation, year) VALUES (?, ?, ?, ?, ?, ?, ?, ?)');
+  const insOpt = db.prepare('INSERT INTO options (question_id, text, is_correct, order_index) VALUES (?, ?, ?, ?)');
+
+  try {
+    db.transaction(() => {
+      for (let i = 0; i < dataLines.length; i++) {
+        const cols = dataLines[i].split(';');
+        const [subject_slug, topic, text, diffStr, type = 'single',
+               opt1 = '', c1 = '0', opt2 = '', c2 = '0',
+               opt3 = '', c3 = '0', opt4 = '', c4 = '0',
+               correct_text = '', explanation = '', yearStr = ''] = cols.map(c => c.trim());
+
+        if (!subject_slug || !text) { errors.push(`Строка ${i + 2}: пропущен subject_slug или text`); continue; }
+
+        const subj = db.prepare('SELECT id FROM subjects WHERE slug = ?').get(subject_slug);
+        if (!subj) { errors.push(`Строка ${i + 2}: неизвестный subject_slug «${subject_slug}»`); continue; }
+
+        const difficulty = Math.min(3, Math.max(1, Number(diffStr) || 1));
+        const year       = yearStr ? Number(yearStr) || null : null;
+        const qtype      = ['single', 'multi', 'true_false', 'short_answer'].includes(type) ? type : 'single';
+        const topicId    = resolveTopicId(subj.id, null, topic || null);
+
+        const isShort = qtype === 'short_answer';
+        const options = [
+          { text: opt1, is_correct: c1 === '1' },
+          { text: opt2, is_correct: c2 === '1' },
+          { text: opt3, is_correct: c3 === '1' },
+          { text: opt4, is_correct: c4 === '1' },
+        ].filter(o => o.text.length > 0);
+
+        if (!isShort && options.length < 2) { errors.push(`Строка ${i + 2}: нужно минимум 2 варианта ответа`); continue; }
+        if (!isShort && !options.some(o => o.is_correct)) { errors.push(`Строка ${i + 2}: нет правильного варианта (укажи 1 в столбце c1–c4)`); continue; }
+
+        const { lastInsertRowid: qid } = insQ.run(
+          subj.id, topicId, text, qtype,
+          isShort ? (correct_text || null) : null,
+          difficulty, explanation || null, year
+        );
+        if (!isShort) options.forEach((o, idx) => insOpt.run(qid, o.text, o.is_correct ? 1 : 0, idx));
+        imported++;
+      }
+    })();
+  } catch (e) {
+    return res.status(500).json({ error: e.message });
+  }
+
+  res.json({ imported, errors });
+}
+
+module.exports = { list, create, duplicate, update, remove, importCSV };
diff --git a/backend/src/controllers/redBookController.js b/backend/src/controllers/redBookController.js
new file mode 100644
index 0000000..20d104a
--- /dev/null
+++ b/backend/src/controllers/redBookController.js
@@ -0,0 +1,342 @@
+const db = require('../db/db');
+const { awardXP, checkRedBookAchievements } = require('./gamificationController');
+
+/* ── helpers ─────────────────────────────────────────────────────────── */
+const stmts = {
+  groups:      db.prepare('SELECT * FROM rb_groups ORDER BY name_ru'),
+  habitats:    db.prepare('SELECT * FROM rb_habitats ORDER BY name'),
+  speciesById: db.prepare(`
+    SELECT s.*, g.name_ru as group_name, g.icon as group_icon, g.color as group_color,
+           h.name as habitat_name, h.type as habitat_type
+    FROM rb_species s
+    JOIN rb_groups g ON g.id = s.group_id
+    LEFT JOIN rb_habitats h ON h.id = s.habitat_id
+    WHERE s.id = ?
+  `),
+  regionsBySpecies: db.prepare('SELECT region_code FROM rb_species_regions WHERE species_id = ?'),
+  popdata:     db.prepare('SELECT year, count_estimate, source FROM rb_population_data WHERE species_id = ? ORDER BY year'),
+  foodWebPrey: db.prepare(`
+    SELECT fw.strength, s.id, s.name_ru, s.name_lat, s.category,
+           g.icon as group_icon, g.color as group_color
+    FROM rb_food_web fw
+    JOIN rb_species s ON s.id = fw.prey_id
+    JOIN rb_groups g ON g.id = s.group_id
+    WHERE fw.predator_id = ?
+  `),
+  foodWebPredators: db.prepare(`
+    SELECT fw.strength, s.id, s.name_ru, s.name_lat, s.category,
+           g.icon as group_icon, g.color as group_color
+    FROM rb_food_web fw
+    JOIN rb_species s ON s.id = fw.predator_id
+    JOIN rb_groups g ON g.id = s.group_id
+    WHERE fw.prey_id = ?
+  `),
+  collection:  db.prepare('SELECT species_id, unlock_method, notes, unlocked_at FROM rb_user_collection WHERE user_id = ?'),
+  hasCollect:  db.prepare('SELECT 1 FROM rb_user_collection WHERE user_id = ? AND species_id = ?'),
+  addCollect:  db.prepare('INSERT OR IGNORE INTO rb_user_collection (user_id, species_id, unlock_method) VALUES (?,?,?)'),
+  quests:      db.prepare('SELECT * FROM rb_quests ORDER BY id'),
+  userQuests:  db.prepare('SELECT * FROM rb_user_quests WHERE user_id = ?'),
+  startQuest:  db.prepare('INSERT OR IGNORE INTO rb_user_quests (user_id, quest_id) VALUES (?,?)'),
+  questById:   db.prepare('SELECT * FROM rb_quests WHERE id = ?'),
+  userQuestRow:db.prepare('SELECT * FROM rb_user_quests WHERE user_id = ? AND quest_id = ?'),
+  completeQ:   db.prepare("UPDATE rb_user_quests SET status='completed', completed_at=datetime('now') WHERE user_id=? AND quest_id=?"),
+  sightings:   db.prepare(`
+    SELECT rs.*, u.name as user_name, s.name_ru as species_name
+    FROM rb_sightings rs
+    JOIN users u ON u.id = rs.user_id
+    JOIN rb_species s ON s.id = rs.species_id
+    ORDER BY rs.created_at DESC LIMIT 50
+  `),
+  addSighting: db.prepare('INSERT INTO rb_sightings (user_id, species_id, region_code, description) VALUES (?,?,?,?)'),
+  mapData:     db.prepare(`
+    SELECT r.region_code, COUNT(r.species_id) as total,
+           SUM(CASE WHEN s.category='CR' THEN 1 ELSE 0 END) as cr,
+           SUM(CASE WHEN s.category='EN' THEN 1 ELSE 0 END) as en,
+           SUM(CASE WHEN s.category='VU' THEN 1 ELSE 0 END) as vu
+    FROM rb_species_regions r
+    JOIN rb_species s ON s.id = r.species_id
+    GROUP BY r.region_code
+  `),
+};
+
+function buildSpeciesList(filter = {}) {
+  let sql = `
+    SELECT s.id, s.name_ru, s.name_be, s.name_lat, s.category, s.by_category,
+           s.photo_url, s.model_type, s.biomass_kg, s.interesting_fact,
+           g.name_ru as group_name, g.icon as group_icon, g.color as group_color,
+           h.name as habitat_name, h.type as habitat_type
+    FROM rb_species s
+    JOIN rb_groups g ON g.id = s.group_id
+    LEFT JOIN rb_habitats h ON h.id = s.habitat_id
+  `;
+  const cond = [], params = [];
+  if (filter.group_id) { cond.push('s.group_id = ?'); params.push(filter.group_id); }
+  if (filter.category) { cond.push('s.category = ?'); params.push(filter.category); }
+  if (filter.habitat_id) { cond.push('s.habitat_id = ?'); params.push(filter.habitat_id); }
+  if (filter.region) {
+    sql += ' JOIN rb_species_regions rr ON rr.species_id = s.id';
+    cond.push('rr.region_code = ?'); params.push(filter.region);
+  }
+  if (filter.q) {
+    cond.push('(s.name_ru LIKE ? OR s.name_lat LIKE ? OR s.name_be LIKE ?)');
+    const like = `%${filter.q}%`;
+    params.push(like, like, like);
+  }
+  if (cond.length) sql += ' WHERE ' + cond.join(' AND ');
+  sql += ' ORDER BY s.category, s.name_ru';
+  const limit = Math.min(parseInt(filter.limit) || 50, 100);
+  const offset = parseInt(filter.offset) || 0;
+  sql += ` LIMIT ${limit} OFFSET ${offset}`;
+  return db.prepare(sql).all(...params);
+}
+
+/* ── GET /api/red-book/groups ───────────────────────────────────────── */
+exports.getGroups = (req, res) => {
+  const groups = stmts.groups.all();
+  // attach count
+  const counts = db.prepare(`
+    SELECT group_id, COUNT(*) as n,
+           SUM(CASE WHEN category='CR' THEN 1 ELSE 0 END) as cr,
+           SUM(CASE WHEN category='EN' THEN 1 ELSE 0 END) as en
+    FROM rb_species GROUP BY group_id
+  `).all();
+  const countMap = {};
+  counts.forEach(c => countMap[c.group_id] = { n: c.n, cr: c.cr, en: c.en });
+  groups.forEach(g => Object.assign(g, countMap[g.id] || { n: 0, cr: 0, en: 0 }));
+  res.json(groups);
+};
+
+/* ── GET /api/red-book/habitats ─────────────────────────────────────── */
+exports.getHabitats = (req, res) => {
+  res.json(stmts.habitats.all());
+};
+
+/* ── GET /api/red-book/species ──────────────────────────────────────── */
+exports.getSpecies = (req, res) => {
+  const list = buildSpeciesList(req.query);
+  // total for pagination
+  const total = db.prepare('SELECT COUNT(*) as n FROM rb_species').get().n;
+  // user collection ids
+  let collected = new Set();
+  if (req.user) {
+    stmts.collection.all(req.user.id).forEach(r => collected.add(r.species_id));
+  }
+  list.forEach(s => {
+    try { s.threats = JSON.parse(s.threats || '[]'); } catch { s.threats = []; }
+    s.collected = collected.has(s.id);
+  });
+  res.json({ total, species: list });
+};
+
+/* ── GET /api/red-book/species/:id ─────────────────────────────────── */
+exports.getSpeciesById = (req, res) => {
+  const s = stmts.speciesById.get(req.params.id);
+  if (!s) return res.status(404).json({ error: 'Вид не найден' });
+  s.regions     = stmts.regionsBySpecies.all(s.id).map(r => r.region_code);
+  s.population_data = stmts.popdata.all(s.id);
+  s.prey        = stmts.foodWebPrey.all(s.id);
+  s.predators   = stmts.foodWebPredators.all(s.id);
+  try { s.threats = JSON.parse(s.threats || '[]'); } catch { s.threats = []; }
+  try { s.population_trend = JSON.parse(s.population_trend || '[]'); } catch { s.population_trend = []; }
+  if (req.user) {
+    s.collected = !!stmts.hasCollect.get(req.user.id, s.id);
+  }
+  res.json(s);
+};
+
+/* ── GET /api/red-book/map-data ─────────────────────────────────────── */
+exports.getMapData = (req, res) => {
+  res.json(stmts.mapData.all());
+};
+
+/* ── GET /api/red-book/food-web ─────────────────────────────────────── */
+exports.getFoodWeb = (req, res) => {
+  const ids = (req.query.species_ids || '').split(',').map(Number).filter(Boolean);
+  if (!ids.length) {
+    // return full web
+    const nodes = db.prepare(`
+      SELECT s.id, s.name_ru, s.name_lat, s.category, s.biomass_kg, s.description,
+             g.icon, g.color, g.id as group_id,
+             h.id as habitat_id, h.type as habitat_type, h.name as habitat_name
+      FROM rb_species s
+      JOIN rb_groups g ON g.id = s.group_id
+      LEFT JOIN rb_habitats h ON h.id = s.habitat_id
+    `).all();
+    const links = db.prepare('SELECT predator_id as source, prey_id as target, strength FROM rb_food_web').all();
+    return res.json({ nodes, links });
+  }
+  const ph = ids.map(() => '?').join(',');
+  const nodes = db.prepare(`
+    SELECT s.id, s.name_ru, s.name_lat, s.category, s.biomass_kg, s.description, g.icon, g.color
+    FROM rb_species s JOIN rb_groups g ON g.id = s.group_id
+    WHERE s.id IN (${ph})
+  `).all(...ids);
+  const links = db.prepare(`
+    SELECT predator_id as source, prey_id as target, strength FROM rb_food_web
+    WHERE predator_id IN (${ph}) OR prey_id IN (${ph})
+  `).all(...ids, ...ids);
+  res.json({ nodes, links });
+};
+
+/* ── GET /api/red-book/biome/:habitatId ─────────────────────────────── */
+exports.getBiomeSpecies = (req, res) => {
+  const list = db.prepare(`
+    SELECT s.id, s.name_ru, s.name_lat, s.category, s.photo_url, s.model_type,
+           s.biomass_kg, g.icon, g.color
+    FROM rb_species s JOIN rb_groups g ON g.id = s.group_id
+    WHERE s.habitat_id = ?
+    ORDER BY s.category, s.name_ru
+  `).all(req.params.habitatId);
+  res.json(list);
+};
+
+/* ── POST /api/red-book/species/:id/collect ─────────────────────────── */
+exports.collectSpecies = (req, res) => {
+  const userId = req.user.id;
+  const speciesId = parseInt(req.params.id);
+  const sp = stmts.speciesById.get(speciesId);
+  if (!sp) return res.status(404).json({ error: 'Вид не найден' });
+
+  const already = stmts.hasCollect.get(userId, speciesId);
+  if (already) return res.json({ already: true, message: 'Вид уже в коллекции' });
+
+  stmts.addCollect.run(userId, speciesId, req.body?.method || 'explore');
+
+  // Award XP (via gamification service — also updates level in DB)
+  const xpMap = { CR: 50, EN: 40, VU: 30, NT: 20, LC: 10 };
+  const xp = xpMap[sp.category] || 20;
+  try { awardXP(userId, xp, `Открыт вид: ${sp.name_ru}`); } catch {}
+
+  // Auto-complete any active quests that required this species
+  const completedQuests = [];
+  try {
+    const activeQuests = db.prepare(`
+      SELECT q.*, uq.quest_id FROM rb_user_quests uq
+      JOIN rb_quests q ON q.id = uq.quest_id
+      WHERE uq.user_id = ? AND uq.status = 'active'
+    `).all(userId);
+
+    // Get all collected species ids for this user
+    const collectedIds = new Set(
+      db.prepare('SELECT species_id FROM rb_user_collection WHERE user_id = ?').all(userId).map(r => r.species_id)
+    );
+
+    for (const quest of activeQuests) {
+      const requiredIds = JSON.parse(quest.species_ids || '[]');
+      if (requiredIds.every(id => collectedIds.has(id))) {
+        stmts.completeQ.run(userId, quest.id);
+        // Award quest XP via gamification service
+        try { awardXP(userId, quest.xp_reward, `Квест выполнен: ${quest.title}`); } catch {}
+        completedQuests.push({ id: quest.id, title: quest.title, xp_reward: quest.xp_reward });
+      }
+    }
+  } catch {}
+
+  // Check Red Book achievements (non-blocking)
+  try { checkRedBookAchievements(userId); } catch {}
+
+  res.json({ collected: true, xp_earned: xp, species: { id: sp.id, name_ru: sp.name_ru, category: sp.category }, completed_quests: completedQuests });
+};
+
+/* ── GET /api/red-book/collection ───────────────────────────────────── */
+exports.getCollection = (req, res) => {
+  const rows = stmts.collection.all(req.user.id);
+  const ids = rows.map(r => r.species_id);
+  if (!ids.length) return res.json({ total: 0, species: [] });
+  const ph = ids.map(() => '?').join(',');
+  const species = db.prepare(`
+    SELECT s.id, s.name_ru, s.name_lat, s.category, s.photo_url,
+           g.icon, g.color
+    FROM rb_species s JOIN rb_groups g ON g.id = s.group_id
+    WHERE s.id IN (${ph})
+  `).all(...ids);
+  const meta = {};
+  rows.forEach(r => meta[r.species_id] = { method: r.unlock_method, notes: r.notes, at: r.unlocked_at });
+  species.forEach(s => Object.assign(s, meta[s.id] || {}));
+  res.json({ total: species.length, species });
+};
+
+/* ── GET /api/red-book/quests ───────────────────────────────────────── */
+exports.getQuests = (req, res) => {
+  const quests = stmts.quests.all();
+  quests.forEach(q => q.species_ids = JSON.parse(q.species_ids || '[]'));
+  if (!req.user) return res.json(quests);
+  const userQ = {};
+  stmts.userQuests.all(req.user.id).forEach(uq => userQ[uq.quest_id] = uq);
+  quests.forEach(q => {
+    const uq = userQ[q.id];
+    q.user_status   = uq?.status || 'locked';
+    q.user_progress = uq ? JSON.parse(uq.progress || '{}') : {};
+  });
+  res.json(quests);
+};
+
+/* ── POST /api/red-book/quests/:id/start ────────────────────────────── */
+exports.startQuest = (req, res) => {
+  const q = stmts.questById.get(req.params.id);
+  if (!q) return res.status(404).json({ error: 'Квест не найден' });
+  stmts.startQuest.run(req.user.id, q.id);
+  res.json({ started: true });
+};
+
+/* ── GET /api/red-book/sightings ────────────────────────────────────── */
+exports.getSightings = (req, res) => {
+  const speciesId = req.query.species_id ? parseInt(req.query.species_id) : null;
+  let sql = `
+    SELECT rs.id, rs.species_id, rs.region_code, rs.description,
+           rs.confirmed_by_teacher, rs.created_at,
+           u.name as user_name,
+           s.name_ru as species_name,
+           g.icon as species_icon
+    FROM rb_sightings rs
+    JOIN users u ON u.id = rs.user_id
+    JOIN rb_species s ON s.id = rs.species_id
+    JOIN rb_groups g ON g.id = s.group_id
+  `;
+  const params = [];
+  if (speciesId) { sql += ' WHERE rs.species_id = ?'; params.push(speciesId); }
+  sql += ' ORDER BY rs.created_at DESC LIMIT 50';
+  res.json(db.prepare(sql).all(...params));
+};
+
+/* ── POST /api/red-book/sightings ───────────────────────────────────── */
+exports.addSighting = (req, res) => {
+  const { species_id, region_code, description } = req.body || {};
+  if (!species_id) return res.status(400).json({ error: 'species_id обязателен' });
+  const id = stmts.addSighting.run(req.user.id, species_id, region_code || '', description || '').lastInsertRowid;
+  try { checkRedBookAchievements(req.user.id); } catch {}
+  res.json({ id });
+};
+
+/* ── GET /api/red-book/stats ────────────────────────────────────────── */
+exports.getStats = (req, res) => {
+  const totals = db.prepare(`
+    SELECT COUNT(*) as total,
+           SUM(CASE WHEN category='CR' THEN 1 ELSE 0 END) as cr,
+           SUM(CASE WHEN category='EN' THEN 1 ELSE 0 END) as en,
+           SUM(CASE WHEN category='VU' THEN 1 ELSE 0 END) as vu,
+           SUM(CASE WHEN category='NT' THEN 1 ELSE 0 END) as nt,
+           SUM(CASE WHEN category='LC' THEN 1 ELSE 0 END) as lc
+    FROM rb_species
+  `).get();
+  let collected = 0;
+  if (req.user) {
+    collected = db.prepare('SELECT COUNT(*) as n FROM rb_user_collection WHERE user_id = ?').get(req.user.id).n;
+  }
+  res.json({ ...totals, collected });
+};
+
+/* ── GET /api/red-book/daily ────────────────────────────────────────── */
+exports.getDaily = (req, res) => {
+  // deterministic by day of year
+  const dayOfYear = Math.floor((Date.now() - new Date(new Date().getFullYear(), 0, 0)) / 86400000);
+  const total = db.prepare('SELECT COUNT(*) as n FROM rb_species').get().n;
+  const offset = dayOfYear % total;
+  const daily = db.prepare(`
+    SELECT s.id, s.name_ru, s.name_lat, s.category, s.interesting_fact,
+           s.description, s.photo_url, g.icon, g.color
+    FROM rb_species s JOIN rb_groups g ON g.id = s.group_id
+    ORDER BY s.id LIMIT 1 OFFSET ?
+  `).get(offset);
+  res.json(daily);
+};
diff --git a/backend/src/controllers/searchController.js b/backend/src/controllers/searchController.js
new file mode 100644
index 0000000..7cb4efe
--- /dev/null
+++ b/backend/src/controllers/searchController.js
@@ -0,0 +1,119 @@
+const db = require('../db/db');
+
+/* ── GET /api/search?q=...&type=...&limit=... ──────────────────────────── */
+function search(req, res) {
+  const q = (req.query.q || '').trim();
+  if (!q || q.length < 2) return res.json({ results: [], total: 0 });
+
+  const type  = req.query.type || 'all'; // all|lesson|course|file|question
+  const limit = Math.min(Number(req.query.limit) || 20, 50);
+  const uid   = req.user.id;
+  const role  = req.user.role;
+  const isTeacher = ['teacher', 'admin'].includes(role);
+  const pattern = `%${q}%`;
+
+  const results = [];
+
+  /* ── Lessons ── */
+  if (type === 'all' || type === 'lesson') {
+    const pubFilter = isTeacher ? '' : 'AND l.is_published = 1 AND c.is_published = 1';
+    const rows = db.prepare(`
+      SELECT l.id, l.title, l.order_index, c.title AS course_title,
+             c.id AS course_id, c.subject_slug, c.cover_emoji
+      FROM lessons l
+      JOIN courses c ON c.id = l.course_id
+      WHERE l.title LIKE ? ${pubFilter}
+      ORDER BY l.title LIMIT ?
+    `).all(pattern, limit);
+    for (const r of rows) {
+      results.push({
+        type: 'lesson',
+        id: r.id,
+        title: r.title,
+        subtitle: r.course_title,
+        extra: { courseId: r.course_id, subjectSlug: r.subject_slug, emoji: r.cover_emoji },
+        url: `/lesson?id=${r.id}`,
+      });
+    }
+  }
+
+  /* ── Courses ── */
+  if (type === 'all' || type === 'course') {
+    const pubFilter = isTeacher ? '' : 'AND c.is_published = 1';
+    const rows = db.prepare(`
+      SELECT c.id, c.title, c.description, c.subject_slug, c.cover_emoji
+      FROM courses c
+      WHERE (c.title LIKE ? OR c.description LIKE ?) ${pubFilter}
+      ORDER BY c.title LIMIT ?
+    `).all(pattern, pattern, limit);
+    for (const r of rows) {
+      results.push({
+        type: 'course',
+        id: r.id,
+        title: r.title,
+        subtitle: r.description ? r.description.slice(0, 80) : '',
+        extra: { subjectSlug: r.subject_slug, emoji: r.cover_emoji },
+        url: `/course?id=${r.id}`,
+      });
+    }
+  }
+
+  /* ── Files (access-controlled) ── */
+  if (type === 'all' || type === 'file') {
+    const accessFilter = isTeacher
+      ? '(f.uploaded_by = ? OR f.is_public = 1)'
+      : `(
+          f.is_public = 1
+          OR EXISTS (SELECT 1 FROM file_access fa WHERE fa.file_id = f.id AND fa.type = 'user' AND fa.target_id = ?)
+          OR EXISTS (SELECT 1 FROM file_access fa JOIN class_members cm ON cm.class_id = fa.target_id AND cm.user_id = ? WHERE fa.file_id = f.id AND fa.type = 'class')
+        )`;
+    const accessArgs = isTeacher ? [uid] : [uid, uid];
+
+    const rows = db.prepare(`
+      SELECT f.id, f.title, f.original_name, f.subject_slug, f.mimetype,
+             u.name AS owner_name
+      FROM files f
+      JOIN users u ON u.id = f.uploaded_by
+      WHERE (f.title LIKE ? OR f.original_name LIKE ?) AND ${accessFilter}
+      ORDER BY f.title LIMIT ?
+    `).all(pattern, pattern, ...accessArgs, limit);
+    for (const r of rows) {
+      results.push({
+        type: 'file',
+        id: r.id,
+        title: r.title || r.original_name,
+        subtitle: r.owner_name || '',
+        extra: { subjectSlug: r.subject_slug, mimetype: r.mimetype },
+        url: `/library`,
+      });
+    }
+  }
+
+  /* ── Questions ── */
+  if (type === 'all' || type === 'question') {
+    if (isTeacher) {
+      const rows = db.prepare(`
+        SELECT q.id, q.text, s.slug AS subject_slug, t.name AS topic_name
+        FROM questions q
+        LEFT JOIN topics t ON t.id = q.topic_id
+        LEFT JOIN subjects s ON s.id = q.subject_id
+        WHERE q.text LIKE ?
+        ORDER BY q.id DESC LIMIT ?
+      `).all(pattern, limit);
+      for (const r of rows) {
+        results.push({
+          type: 'question',
+          id: r.id,
+          title: r.text.length > 100 ? r.text.slice(0, 100) + '…' : r.text,
+          subtitle: r.topic_name || '',
+          extra: { subjectSlug: r.subject_slug },
+          url: `/theory`,
+        });
+      }
+    }
+  }
+
+  res.json({ results: results.slice(0, limit), total: results.length });
+}
+
+module.exports = { search };
diff --git a/backend/src/controllers/sessionController.js b/backend/src/controllers/sessionController.js
new file mode 100644
index 0000000..22d9532
--- /dev/null
+++ b/backend/src/controllers/sessionController.js
@@ -0,0 +1,606 @@
+const db = require('../db/db');
+const { pushNotif } = require('../utils/notifications');
+const { onTestFinished, updateDailyGoal, awardXP, updateChallenges } = require('./gamificationController');
+const { COMBO_BONUSES } = require('../constants');
+
+/* ── Prepared statements (avoid re-parsing on every request) ──────────── */
+const stmts = {
+  /* stats: 7 queries → 2 via CTE + json_group_array */
+  statsMega: db.prepare(`
+    WITH base AS (
+      SELECT ts.id, ts.score, ts.total, ts.started_at, ts.finished_at,
+             s.slug AS subject_slug, s.name AS subject_name
+      FROM test_sessions ts
+      LEFT JOIN subjects s ON s.id = ts.subject_id
+      WHERE ts.user_id = @uid AND ts.status = 'completed'
+    ),
+    hm AS (
+      SELECT date(ts.started_at) AS day, COUNT(*) AS cnt
+      FROM test_sessions ts
+      WHERE ts.user_id = @uid AND ts.started_at >= date('now', '-90 days')
+      GROUP BY day ORDER BY day
+    ),
+    sd AS (
+      SELECT DISTINCT date(ts.started_at) AS d
+      FROM test_sessions ts WHERE ts.user_id = @uid
+      ORDER BY d DESC LIMIT 90
+    )
+    SELECT
+      (SELECT COALESCE(json_group_array(json_object(
+         'week', week, 'sessions', sessions, 'avg_pct', avg_pct)), '[]')
+       FROM (SELECT strftime('%Y-%W', finished_at) AS week,
+                    COUNT(*) AS sessions,
+                    AVG(CASE WHEN total>0 THEN score*100.0/total END) AS avg_pct
+             FROM base WHERE finished_at >= date('now', '-84 days')
+             GROUP BY week ORDER BY week)) AS weekly,
+      (SELECT COALESCE(json_group_array(json_object('day', day, 'count', cnt)), '[]')
+       FROM hm) AS heatmap,
+      (SELECT COALESCE(json_group_array(json_object(
+         'slug', subject_slug, 'name', subject_name,
+         'sessions', sessions, 'avg_pct', avg_pct,
+         'total_correct', total_correct, 'total_questions', total_questions)), '[]')
+       FROM (SELECT subject_slug, subject_name, COUNT(*) AS sessions,
+                    AVG(CASE WHEN total>0 THEN score*100.0/total END) AS avg_pct,
+                    SUM(score) AS total_correct, SUM(total) AS total_questions
+             FROM base GROUP BY subject_slug ORDER BY sessions DESC)) AS bySubject,
+      (SELECT COALESCE(json_group_array(json_object(
+         'id', id, 'score', score, 'total', total,
+         'finished_at', finished_at, 'subject_slug', subject_slug)), '[]')
+       FROM (SELECT id, score, total, finished_at, subject_slug
+             FROM base ORDER BY finished_at DESC LIMIT 20)) AS trend,
+      (SELECT json_object(
+         'sessions', COUNT(*),
+         'correct',  COALESCE(SUM(score), 0),
+         'questions',COALESCE(SUM(total), 0),
+         'avg_pct',  COALESCE(AVG(CASE WHEN total>0 THEN score*100.0/total END), 0))
+       FROM base) AS totals,
+      (SELECT COALESCE(json_group_array(d), '[]') FROM sd) AS streakDays
+  `),
+  courseProgress: db.prepare(`
+    SELECT c.id, c.title, c.cover_emoji, c.subject_slug,
+           COUNT(l.id) AS total_lessons, COUNT(lp.id) AS done_lessons
+    FROM courses c JOIN lessons l ON l.course_id = c.id AND l.is_published = 1
+    LEFT JOIN lesson_progress lp ON lp.lesson_id = l.id AND lp.user_id = @uid
+    WHERE c.is_published = 1 GROUP BY c.id HAVING done_lessons > 0
+    ORDER BY done_lessons * 1.0 / total_lessons DESC`),
+  sessionCount: db.prepare('SELECT COUNT(*) AS total FROM test_sessions WHERE user_id = ?'),
+};
+
+function shuffle(arr) {
+  for (let i = arr.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [arr[i], arr[j]] = [arr[j], arr[i]];
+  }
+  return arr;
+}
+
+const VALID_MODES = new Set(['exam', 'practice']);
+
+/* ── POST /api/sessions ───────────────────────────────────────────────── */
+function start(req, res, next) {
+  const { subject_slug, topic_id, test_id } = req.body;
+  const mode  = req.body.mode  || 'exam';
+  const count = Number(req.body.count) || 25;
+
+  if (!subject_slug) return res.status(400).json({ error: 'subject_slug is required' });
+  if (!VALID_MODES.has(mode)) return res.status(400).json({ error: 'mode must be exam or practice' });
+  if (!Number.isInteger(count) || count < 1 || count > 200)
+    return res.status(400).json({ error: 'count must be an integer between 1 and 200' });
+
+  const subject = db.prepare('SELECT id FROM subjects WHERE slug = ?').get(subject_slug);
+  if (!subject) return res.status(404).json({ error: 'Subject not found' });
+
+  let ids;
+  let testTimeLimitSec = null;
+  if (test_id) {
+    const tRow = db.prepare('SELECT time_limit FROM tests WHERE id = ?').get(Number(test_id));
+    if (tRow?.time_limit) testTimeLimitSec = tRow.time_limit * 60;
+    const tq = db.prepare(
+      'SELECT question_id AS id FROM test_questions WHERE test_id = ? ORDER BY order_index'
+    ).all(Number(test_id));
+    if (!tq.length) return res.status(404).json({ error: 'Test has no questions' });
+    ids = shuffle(tq.map(r => r.id));
+  } else {
+    const rows = topic_id
+      ? db.prepare('SELECT id FROM questions WHERE subject_id = ? AND topic_id = ?').all(subject.id, Number(topic_id))
+      : db.prepare('SELECT id FROM questions WHERE subject_id = ?').all(subject.id);
+    if (!rows.length) return res.status(404).json({ error: 'No questions found' });
+    ids = shuffle(rows.map(r => r.id)).slice(0, count);
+  }
+
+  const total = ids.length;
+
+  const createSession = db.transaction(() => {
+    const { lastInsertRowid: session_id } = db.prepare(
+      'INSERT INTO test_sessions (user_id, subject_id, mode, total) VALUES (?, ?, ?, ?)'
+    ).run(req.user.id, subject.id, mode, total);
+
+    const insertSQ = db.prepare(
+      'INSERT INTO session_questions (session_id, question_id, order_index) VALUES (?, ?, ?)'
+    );
+    ids.forEach((qid, i) => insertSQ.run(session_id, qid, i));
+    return session_id;
+  });
+
+  try {
+    const session_id = createSession();
+    const questions  = loadQuestionsForSession(ids);
+    res.status(201).json({ session_id, total, mode, questions, time_limit_sec: testTimeLimitSec });
+  } catch (err) {
+    next(err);
+  }
+}
+
+/* ── POST /api/sessions/:id/answer ───────────────────────────────────── */
+function answer(req, res) {
+  const session_id = Number(req.params.id);
+  const { question_id, option_id, time_spent_sec, answer_text, chosen_options } = req.body;
+
+  const session = db.prepare(
+    'SELECT id, mode, status FROM test_sessions WHERE id = ? AND user_id = ?'
+  ).get(session_id, req.user.id);
+
+  if (!session) return res.status(404).json({ error: 'Session not found' });
+  if (session.status !== 'in_progress')
+    return res.status(400).json({ error: 'Session already finished' });
+
+  // Verify question belongs to this session — prevents answering questions from other sessions
+  const sq = db.prepare(
+    'SELECT 1 FROM session_questions WHERE session_id = ? AND question_id = ?'
+  ).get(session_id, question_id);
+  if (!sq) return res.status(400).json({ error: 'Question not in this session' });
+
+  const q = db.prepare('SELECT id, type, correct_text FROM questions WHERE id = ?').get(question_id);
+  if (!q) return res.status(400).json({ error: 'Invalid question' });
+
+  let isCorrect = 0;
+  let chosenOptionId = null;
+  let storedAnswerText = null;
+
+  if (q.type === 'short_answer') {
+    const userAns = String(answer_text || '').trim().toLowerCase().replace(/\s+/g, ' ');
+    const correct  = String(q.correct_text || '').trim().toLowerCase().replace(/\s+/g, ' ');
+    isCorrect = userAns === correct ? 1 : 0;
+    storedAnswerText = String(answer_text || '').trim();
+
+  } else if (q.type === 'multi') {
+    const selected  = Array.isArray(chosen_options) ? chosen_options.map(Number) : [];
+    const allOpts   = db.prepare('SELECT id, is_correct FROM options WHERE question_id = ?').all(question_id);
+    const correctIds = allOpts.filter(o => o.is_correct).map(o => o.id);
+    const wrongIds   = allOpts.filter(o => !o.is_correct).map(o => o.id);
+    isCorrect = (
+      correctIds.every(id => selected.includes(id)) &&
+      wrongIds.every(id => !selected.includes(id))
+    ) ? 1 : 0;
+    storedAnswerText = JSON.stringify(selected);
+
+  } else if (q.type === 'matching') {
+    const pairs = (() => { try { return JSON.parse(answer_text || '{}'); } catch (e) { console.error('[answer] matching parse error:', e.message); return {}; } })();
+    const allOpts = db.prepare('SELECT id, match_pair FROM options WHERE question_id = ?').all(question_id);
+    isCorrect = allOpts.length > 0 && allOpts.every(opt => pairs[String(opt.id)] === opt.match_pair) ? 1 : 0;
+    storedAnswerText = answer_text;
+
+  } else {
+    // single / true_false
+    const opt = db.prepare(
+      'SELECT id, is_correct FROM options WHERE id = ? AND question_id = ?'
+    ).get(option_id, question_id);
+    if (!opt) return res.status(400).json({ error: 'Invalid option' });
+    isCorrect = opt.is_correct;
+    chosenOptionId = opt.id;
+  }
+
+  db.prepare(`
+    INSERT INTO user_answers (session_id, question_id, chosen_option_id, answer_text, is_correct, time_spent_sec)
+    VALUES (?, ?, ?, ?, ?, ?)
+    ON CONFLICT(session_id, question_id)
+    DO UPDATE SET chosen_option_id = excluded.chosen_option_id,
+                  answer_text      = excluded.answer_text,
+                  is_correct       = excluded.is_correct,
+                  time_spent_sec   = excluded.time_spent_sec,
+                  answered_at      = datetime('now')
+  `).run(session_id, question_id, chosenOptionId, storedAnswerText, isCorrect, time_spent_sec ?? null);
+
+  const response = { is_correct: isCorrect === 1 };
+
+  if (session.mode === 'practice') {
+    if (q.type === 'short_answer') {
+      response.correct_text = q.correct_text;
+    } else {
+      response.correct_options = db.prepare(
+        'SELECT id, text FROM options WHERE question_id = ? AND is_correct = 1'
+      ).all(question_id);
+    }
+  }
+
+  res.json(response);
+}
+
+/* ── POST /api/sessions/:id/finish ───────────────────────────────────── */
+function finish(req, res) {
+  const session_id = Number(req.params.id);
+
+  const session = db.prepare(
+    'SELECT * FROM test_sessions WHERE id = ? AND user_id = ?'
+  ).get(session_id, req.user.id);
+
+  if (!session) return res.status(404).json({ error: 'Session not found' });
+
+  // Atomically mark as completed — guard against concurrent finish() calls
+  let score;
+  try {
+    score = db.transaction(() => {
+      const { score: s } = db.prepare(
+        'SELECT COUNT(*) AS score FROM user_answers WHERE session_id = ? AND is_correct = 1'
+      ).get(session_id);
+      const upd = db.prepare(
+        "UPDATE test_sessions SET status = 'completed', score = ?, finished_at = datetime('now') WHERE id = ? AND status = 'in_progress'"
+      ).run(s, session_id);
+      if (upd.changes === 0) throw Object.assign(new Error('already_finished'), { code: 'ALREADY_FINISHED' });
+      return s;
+    })();
+  } catch (e) {
+    if (e.code === 'ALREADY_FINISHED') return res.status(400).json({ error: 'Session already finished' });
+    throw e;
+  }
+
+  // Compute max combo (consecutive correct answers in order)
+  let maxCombo = 0;
+  try {
+    const ansRows = db.prepare(
+      'SELECT is_correct FROM user_answers WHERE session_id = ? ORDER BY rowid'
+    ).all(session_id);
+    let streak = 0;
+    for (const a of ansRows) {
+      streak = a.is_correct ? streak + 1 : 0;
+      if (streak > maxCombo) maxCombo = streak;
+    }
+  } catch (e) { console.error('[finish] combo calc:', e.message); }
+
+  // Gamification: award XP, update streak, check achievements
+  try {
+    const timeSec = Math.round((Date.now() - new Date(session.started_at).getTime()) / 1000);
+    // Check if linked to a test with time_limit
+    let testTimeLimitSec = null;
+    try {
+      const tl = db.prepare(`
+        SELECT t.time_limit FROM assignment_sessions ases
+        JOIN assignments a ON a.id = ases.assignment_id
+        JOIN tests t ON t.id = a.test_id
+        WHERE ases.session_id = ?
+      `).get(session_id);
+      if (tl?.time_limit) testTimeLimitSec = tl.time_limit * 60;
+    } catch (e) { console.error('[finish] time_limit fetch:', e.message); }
+    // Combo bonus XP (thresholds from constants)
+    let comboBonus = 0;
+    for (const [min, xp] of COMBO_BONUSES) {
+      if (maxCombo >= min) { comboBonus = xp; break; }
+    }
+    onTestFinished(req.user.id, score, session.total, timeSec, testTimeLimitSec);
+    if (comboBonus > 0) {
+      try { awardXP(req.user.id, comboBonus, `Комбо x${maxCombo}`); } catch (e) { console.error('[finish] comboBonus awardXP:', e.message); }
+    }
+    updateDailyGoal(req.user.id, 1, score * 10 + 50 + comboBonus);
+    // Update personal challenges
+    try {
+      const subj = db.prepare('SELECT s.slug FROM subjects s WHERE s.id = ?').get(session.subject_id);
+      const topicIds = db.prepare(`
+        SELECT DISTINCT q.topic_id FROM session_questions sq
+        JOIN questions q ON q.id = sq.question_id
+        WHERE sq.session_id = ? AND q.topic_id IS NOT NULL
+      `).all(session_id).map(r => r.topic_id);
+      const slug = subj ? subj.slug : null;
+      for (const tid of (topicIds.length ? topicIds : [null])) {
+        updateChallenges(req.user.id, score, session.total, slug, tid);
+      }
+    } catch (e) { console.error('[finish] updateChallenges:', e.message); }
+  } catch (e) { console.error('[finish] gamification:', e.message); }
+
+  // Notify teacher if session linked to a class assignment
+  try {
+    const link = db.prepare(`
+      SELECT a.title, COALESCE(c.teacher_id, a.created_by) AS teacher_id, u.name AS student_name
+      FROM assignment_sessions ass
+      JOIN assignments a ON a.id = ass.assignment_id
+      LEFT JOIN classes c ON c.id = a.class_id
+      JOIN users u ON u.id = ?
+      WHERE ass.session_id = ?
+    `).get(req.user.id, session_id);
+    if (link) {
+      const pct = Math.round((score / session.total) * 100);
+      pushNotif(link.teacher_id, 'session', `«${link.student_name}» сдал «${link.title}» — ${pct}%`, '/classes');
+    }
+  } catch (e) { console.error('[finish] pushNotif teacher:', e.message); }
+
+  res.json({
+    session_id,
+    score,
+    total:   session.total,
+    percent: session.total ? Math.round((score / session.total) * 100) : 0,
+    time_sec: Math.round((Date.now() - new Date(session.started_at)) / 1000),
+    maxCombo,
+    review:  buildReview(session_id),
+  });
+}
+
+/* ── GET /api/sessions/:id/result ────────────────────────────────────── */
+function result(req, res) {
+  const session_id = Number(req.params.id);
+
+  const session = db.prepare(
+    'SELECT * FROM test_sessions WHERE id = ? AND user_id = ?'
+  ).get(session_id, req.user.id);
+
+  if (!session) return res.status(404).json({ error: 'Session not found' });
+  if (session.status !== 'completed')
+    return res.status(400).json({ error: 'Session not finished yet' });
+
+  // Check if session is linked to an assignment using a test with show_answers setting
+  let show_answers = 1;
+  try {
+    const assnSess = db.prepare(`
+      SELECT t.show_answers FROM assignment_sessions ases
+      JOIN assignments a ON a.id = ases.assignment_id
+      JOIN tests t ON t.id = a.test_id
+      WHERE ases.session_id = ?
+    `).get(session_id);
+    if (assnSess) show_answers = assnSess.show_answers;
+  } catch {}
+
+  // Compute max combo for display
+  let maxCombo = 0;
+  try {
+    const ansRows = db.prepare(
+      'SELECT is_correct FROM user_answers WHERE session_id = ? ORDER BY rowid'
+    ).all(session_id);
+    let streak = 0;
+    for (const a of ansRows) {
+      streak = a.is_correct ? streak + 1 : 0;
+      if (streak > maxCombo) maxCombo = streak;
+    }
+  } catch {}
+
+  res.json({
+    session_id,
+    score:        session.score,
+    total:        session.total,
+    percent:      session.total ? Math.round((session.score / session.total) * 100) : 0,
+    show_answers,
+    maxCombo,
+    review:       buildReview(session_id),
+  });
+}
+
+/* ── GET /api/sessions/history ───────────────────────────────────────── */
+function history(req, res) {
+  const limit  = Math.min(100, Math.max(1, Number(req.query.limit) || 20));
+  const cursor = Number(req.query.cursor) || 0;
+
+  // Cursor-based: if cursor provided, use it; otherwise fall back to offset pagination
+  if (cursor) {
+    const rows = db.prepare(`
+      SELECT ts.id, ts.mode, ts.score, ts.total, ts.status,
+             ts.started_at, ts.finished_at,
+             s.slug AS subject_slug, s.name AS subject_name
+      FROM test_sessions ts
+      LEFT JOIN subjects s ON s.id = ts.subject_id
+      WHERE ts.user_id = ? AND ts.id < ?
+      ORDER BY ts.id DESC
+      LIMIT ?
+    `).all(req.user.id, cursor, limit);
+    const nextCursor = rows.length === limit ? rows[rows.length - 1].id : null;
+    return res.json({ rows, nextCursor, limit });
+  }
+
+  // Offset-based (legacy)
+  const page   = Math.max(1, Number(req.query.page) || 1);
+  const offset = (page - 1) * limit;
+  const { total } = db.prepare('SELECT COUNT(*) AS total FROM test_sessions WHERE user_id = ?').get(req.user.id);
+  const rows = db.prepare(`
+    SELECT ts.id, ts.mode, ts.score, ts.total, ts.status,
+           ts.started_at, ts.finished_at,
+           s.slug AS subject_slug, s.name AS subject_name
+    FROM test_sessions ts
+    LEFT JOIN subjects s ON s.id = ts.subject_id
+    WHERE ts.user_id = ?
+    ORDER BY ts.started_at DESC
+    LIMIT ? OFFSET ?
+  `).all(req.user.id, limit, offset);
+  res.json({ rows, total, page, limit });
+}
+
+/* ── helpers ─────────────────────────────────────────────────────────── */
+function _placeholders(n) { return Array(n).fill('?').join(','); }
+
+function loadQuestionsForSession(ids) {
+  if (!ids.length) return [];
+  const ph = _placeholders(ids.length);
+
+  const questions = db.prepare(
+    `SELECT id, text, type, difficulty FROM questions WHERE id IN (${ph})`
+  ).all(...ids);
+
+  const allOptions = db.prepare(
+    `SELECT question_id, id, text, match_pair FROM options WHERE question_id IN (${ph}) ORDER BY question_id, order_index`
+  ).all(...ids);
+
+  const optsByQ = {};
+  for (const o of allOptions) (optsByQ[o.question_id] ??= []).push(o);
+
+  // Restore caller-expected order
+  const qMap = {};
+  for (const q of questions) qMap[q.id] = q;
+
+  return ids.map(id => {
+    const q = qMap[id];
+    if (!q) return null;
+    q.options = q.type !== 'short_answer' ? (optsByQ[id] || []) : [];
+    return q;
+  }).filter(Boolean);
+}
+
+function buildReview(session_id) {
+  const sqRows = db.prepare(
+    'SELECT question_id FROM session_questions WHERE session_id = ? ORDER BY order_index'
+  ).all(session_id);
+  if (!sqRows.length) return [];
+
+  const ids = sqRows.map(r => r.question_id);
+  const ph  = _placeholders(ids.length);
+
+  const questions = db.prepare(
+    `SELECT id, text, type, explanation, correct_text FROM questions WHERE id IN (${ph})`
+  ).all(...ids);
+
+  const answers = db.prepare(
+    `SELECT question_id, chosen_option_id, answer_text, is_correct FROM user_answers WHERE session_id = ? AND question_id IN (${ph})`
+  ).all(session_id, ...ids);
+
+  const options = db.prepare(
+    `SELECT question_id, id, text, is_correct, match_pair FROM options WHERE question_id IN (${ph}) ORDER BY question_id, order_index`
+  ).all(...ids);
+
+  const ansMap = {};
+  for (const a of answers) ansMap[a.question_id] = a;
+
+  const optsByQ = {};
+  for (const o of options) (optsByQ[o.question_id] ??= []).push(o);
+
+  const qMap = {};
+  for (const q of questions) qMap[q.id] = q;
+
+  return ids.map(id => {
+    const q  = qMap[id];
+    const ua = ansMap[id];
+    return {
+      ...q,
+      options:           optsByQ[id] || [],
+      chosen_option_id:  ua?.chosen_option_id ?? null,
+      answer_text:       ua?.answer_text       ?? null,
+      is_correct:        ua ? ua.is_correct === 1 : null,
+    };
+  });
+}
+
+/* ── GET /api/sessions/weak-topics ───────────────────────────────────── */
+function weakTopics(req, res) {
+  const rows = db.prepare(`
+    SELECT t.id   AS topic_id,
+           t.name AS topic,
+           s.name AS subject_name,
+           s.slug AS subject_slug,
+           COUNT(ua.id)  AS total,
+           SUM(CASE WHEN ua.is_correct = 0 THEN 1 ELSE 0 END) AS wrong,
+           ROUND(
+             CAST(SUM(CASE WHEN ua.is_correct = 0 THEN 1 ELSE 0 END) AS REAL)
+             / COUNT(ua.id) * 100
+           , 0) AS error_pct
+    FROM user_answers ua
+    JOIN test_sessions ts ON ts.id = ua.session_id
+    JOIN questions     q  ON q.id  = ua.question_id
+    JOIN topics        t  ON t.id  = q.topic_id
+    JOIN subjects      s  ON s.id  = q.subject_id
+    WHERE ts.user_id = ? AND ts.status = 'completed' AND q.topic_id IS NOT NULL
+    GROUP BY q.topic_id
+    HAVING total >= 2
+    ORDER BY error_pct DESC, wrong DESC
+    LIMIT 8
+  `).all(req.user.id);
+
+  res.json(rows);
+}
+
+/* ── GET /api/sessions/:id/questions ── resume existing session ─────── */
+function getSessionQuestions(req, res) {
+  const session_id = Number(req.params.id);
+  const session = db.prepare(`
+    SELECT ts.id, ts.mode, ts.total, ts.status, ts.started_at, s.slug AS subject_slug
+    FROM test_sessions ts
+    LEFT JOIN subjects s ON s.id = ts.subject_id
+    WHERE ts.id = ? AND ts.user_id = ?
+  `).get(session_id, req.user.id);
+  if (!session) return res.status(404).json({ error: 'Session not found' });
+  if (session.status !== 'in_progress') return res.status(400).json({ error: 'Session already finished' });
+
+  const ids = db.prepare(
+    'SELECT question_id FROM session_questions WHERE session_id = ? ORDER BY order_index'
+  ).all(session_id).map(r => r.question_id);
+
+  // Resolve time limit from linked test (if any)
+  let time_limit_sec = null;
+  try {
+    const tl = db.prepare(`
+      SELECT t.time_limit FROM assignment_sessions ases
+      JOIN assignments a ON a.id = ases.assignment_id
+      JOIN tests t ON t.id = a.test_id
+      WHERE ases.session_id = ? AND t.time_limit IS NOT NULL
+    `).get(session_id);
+    if (tl?.time_limit) time_limit_sec = tl.time_limit * 60;
+  } catch {}
+
+  const questions = loadQuestionsForSession(ids);
+  res.json({
+    session_id,
+    total: session.total,
+    mode: session.mode,
+    subject_slug: session.subject_slug,
+    questions,
+    time_limit_sec,
+    started_at: session.started_at,
+  });
+}
+
+/* ── GET /api/sessions/stats ── student dashboard charts ────────────── */
+function stats(req, res) {
+  const uid = req.user.id;
+
+  // 2 queries instead of 7: mega-CTE returns all session data as JSON columns
+  const row = stmts.statsMega.get({ uid });
+  const weekly      = JSON.parse(row.weekly);
+  const heatmap     = JSON.parse(row.heatmap);
+  const bySubject   = JSON.parse(row.bySubject);
+  const trend       = JSON.parse(row.trend).reverse();
+  const totals      = JSON.parse(row.totals);
+  const dayKeys     = new Set(JSON.parse(row.streakDays));
+  const courseProgress = stmts.courseProgress.all({ uid });
+
+  // Streak calculation (JS side, uses pre-fetched day set)
+  let streak = 0;
+  const now = new Date();
+  for (let i = 0; i <= 90; i++) {
+    const d = new Date(now);
+    d.setDate(d.getDate() - i);
+    const key = d.toISOString().slice(0, 10);
+    if (dayKeys.has(key)) streak++;
+    else if (i > 0) break;
+  }
+
+  res.json({
+    weekly: weekly.map(r => ({ week: r.week, sessions: r.sessions, avgPct: Math.round(r.avg_pct || 0) })),
+    heatmap: heatmap.map(r => ({ day: r.day, count: r.count })),
+    bySubject: bySubject.map(r => ({
+      slug: r.slug, name: r.name, sessions: r.sessions,
+      avgPct: Math.round(r.avg_pct || 0),
+      correct: r.total_correct, questions: r.total_questions,
+    })),
+    trend: trend.map(r => ({
+      pct: r.total > 0 ? Math.round(r.score * 100 / r.total) : 0,
+      date: r.finished_at, subject: r.subject_slug,
+    })),
+    streak,
+    totals: {
+      sessions: totals.sessions || 0,
+      correct:  totals.correct  || 0,
+      questions:totals.questions|| 0,
+      avgPct:   Math.round(totals.avg_pct || 0),
+    },
+    courseProgress: courseProgress.map(r => ({
+      id: r.id, title: r.title, emoji: r.cover_emoji,
+      subjectSlug: r.subject_slug,
+      done: r.done_lessons, total: r.total_lessons,
+      pct: r.total_lessons > 0 ? Math.round(r.done_lessons * 100 / r.total_lessons) : 0,
+    })),
+  });
+}
+
+module.exports = { start, answer, finish, result, history, weakTopics, getSessionQuestions, stats };
diff --git a/backend/src/controllers/settingsController.js b/backend/src/controllers/settingsController.js
new file mode 100644
index 0000000..8257bd4
--- /dev/null
+++ b/backend/src/controllers/settingsController.js
@@ -0,0 +1,32 @@
+const db = require('../db/db');
+
+/* ── GET /api/settings/sims ─────────────────────────────────────────────── */
+function getSimSettings(req, res) {
+  const rows = db.prepare(`SELECT key, value FROM app_settings WHERE key IN ('sim_module_disabled','sim_disabled_ids')`).all();
+  const map = Object.fromEntries(rows.map(r => [r.key, r.value]));
+  res.json({
+    module_disabled: map['sim_module_disabled'] === '1',
+    disabled_ids: JSON.parse(map['sim_disabled_ids'] || '[]'),
+  });
+}
+
+/* ── PUT /api/settings/sims ─────────────────────────────────────────────── */
+function updateSimSettings(req, res) {
+  const { module_disabled, disabled_ids } = req.body;
+
+  if (module_disabled !== undefined) {
+    db.prepare(`INSERT INTO app_settings (key, value) VALUES ('sim_module_disabled', ?)
+                ON CONFLICT(key) DO UPDATE SET value = excluded.value`)
+      .run(module_disabled ? '1' : '0');
+  }
+
+  if (Array.isArray(disabled_ids)) {
+    db.prepare(`INSERT INTO app_settings (key, value) VALUES ('sim_disabled_ids', ?)
+                ON CONFLICT(key) DO UPDATE SET value = excluded.value`)
+      .run(JSON.stringify(disabled_ids));
+  }
+
+  res.json({ ok: true });
+}
+
+module.exports = { getSimSettings, updateSimSettings };
diff --git a/backend/src/controllers/shopController.js b/backend/src/controllers/shopController.js
new file mode 100644
index 0000000..6e639ec
--- /dev/null
+++ b/backend/src/controllers/shopController.js
@@ -0,0 +1,194 @@
+const db = require('../db/db');
+
+/* ═══════════════════════════════════════════════════════════════════════
+   Shop — Items, Purchases, Coins
+   ═══════════════════════════════════════════════════════════════════════ */
+
+/* GET /api/shop/items — list all active shop items + owned status */
+function getItems(req, res) {
+  const userId = req.user.id;
+  const items = db.prepare(`
+    SELECT si.*,
+           (SELECT 1 FROM user_purchases up WHERE up.item_id = si.id AND up.user_id = ?) AS owned
+    FROM shop_items si
+    WHERE si.is_active = 1
+    ORDER BY si.price
+  `).all(userId);
+
+  const user = db.prepare('SELECT coins FROM users WHERE id = ?').get(userId);
+  res.json({ items, coins: (user && user.coins) || 0 });
+}
+
+/* POST /api/shop/items/:id/purchase — buy an item (atomic transaction) */
+function purchaseItem(req, res) {
+  const userId = req.user.id;
+  const itemId = Number(req.params.id);
+
+  const item = db.prepare('SELECT * FROM shop_items WHERE id = ? AND is_active = 1').get(itemId);
+  if (!item) return res.status(404).json({ error: 'Предмет не найден' });
+
+  const alreadyOwned = db.prepare('SELECT 1 FROM user_purchases WHERE user_id = ? AND item_id = ?').get(userId, itemId);
+  if (alreadyOwned) return res.status(400).json({ error: 'Вы уже купили этот предмет' });
+
+  // Atomic: check balance + deduct + insert purchase in one transaction
+  const doPurchase = db.transaction(() => {
+    const user = db.prepare('SELECT coins FROM users WHERE id = ?').get(userId);
+    if (!user || (user.coins || 0) < item.price) return { err: 'Недостаточно монет' };
+
+    db.prepare('UPDATE users SET coins = coins - ? WHERE id = ?').run(item.price, userId);
+    db.prepare('INSERT INTO user_purchases (user_id, item_id) VALUES (?, ?)').run(userId, itemId);
+
+    const updated = db.prepare('SELECT coins FROM users WHERE id = ?').get(userId);
+    return { coins: (updated && updated.coins) || 0 };
+  });
+
+  const result = doPurchase();
+  if (result.err) return res.status(400).json({ error: result.err });
+  res.json({ ok: true, coins: result.coins, item });
+}
+
+/* GET /api/shop/purchases — list user's purchases with item details */
+function getPurchases(req, res) {
+  const rows = db.prepare(`
+    SELECT up.id AS purchase_id, up.purchased_at, si.*
+    FROM user_purchases up
+    JOIN shop_items si ON si.id = up.item_id
+    WHERE up.user_id = ?
+    ORDER BY up.purchased_at DESC
+  `).all(req.user.id);
+  res.json(rows);
+}
+
+/* GET /api/shop/coins — return user's coin balance */
+function getCoins(req, res) {
+  const user = db.prepare('SELECT coins FROM users WHERE id = ?').get(req.user.id);
+  res.json({ coins: (user && user.coins) || 0 });
+}
+
+/* GET /api/shop/my-active — return user's active cosmetics */
+function getMyActive(req, res) {
+  const u = db.prepare('SELECT avatar_frame, active_title, active_effect FROM users WHERE id = ?').get(req.user.id);
+  if (!u) return res.json({});
+  // Resolve full data for each active item
+  const result = { frame: null, title: null, effect: null };
+
+  // Frame from avatar_frame (gamification frames) — handled separately
+  // Shop frame override
+  if (u.avatar_frame && u.avatar_frame !== 'default') {
+    result.frame = { id: u.avatar_frame };
+  }
+
+  if (u.active_title) {
+    const item = db.prepare('SELECT data FROM shop_items WHERE id = ?').get(u.active_title);
+    if (item) try { result.title = JSON.parse(item.data); } catch {}
+  }
+  if (u.active_effect) {
+    const item = db.prepare('SELECT data FROM shop_items WHERE id = ?').get(u.active_effect);
+    if (item) try { result.effect = JSON.parse(item.data); } catch {}
+  }
+  res.json(result);
+}
+
+/* POST /api/shop/activate — activate a purchased item (or deactivate with itemId=null) */
+function activateItem(req, res) {
+  const userId = req.user.id;
+  const { itemId } = req.body;
+
+  // Deactivate: pass itemId = null and type
+  if (!itemId) {
+    const { type } = req.body;
+    if (type === 'title')  db.prepare('UPDATE users SET active_title = NULL WHERE id = ?').run(userId);
+    if (type === 'effect') db.prepare('UPDATE users SET active_effect = NULL WHERE id = ?').run(userId);
+    if (type === 'frame')  db.prepare("UPDATE users SET avatar_frame = 'default' WHERE id = ?").run(userId);
+    return res.json({ ok: true });
+  }
+
+  const item = db.prepare('SELECT * FROM shop_items WHERE id = ?').get(itemId);
+  if (!item) return res.status(404).json({ error: 'Предмет не найден' });
+
+  const owned = db.prepare('SELECT 1 FROM user_purchases WHERE user_id = ? AND item_id = ?').get(userId, itemId);
+  if (!owned) return res.status(403).json({ error: 'Предмет не куплен' });
+
+  let data;
+  try { data = JSON.parse(item.data); } catch { data = {}; }
+
+  if (item.type === 'frame')  db.prepare('UPDATE users SET avatar_frame = ? WHERE id = ?').run('shop_' + itemId, userId);
+  if (item.type === 'title')  db.prepare('UPDATE users SET active_title = ? WHERE id = ?').run(itemId, userId);
+  if (item.type === 'effect') db.prepare('UPDATE users SET active_effect = ? WHERE id = ?').run(itemId, userId);
+
+  res.json({ ok: true, type: item.type, data });
+}
+
+/* ═══════════════════════════════════════════════════════════════════════
+   Admin — CRUD shop items, award coins, stats
+   ═══════════════════════════════════════════════════════════════════════ */
+
+/* GET /api/shop/admin/items — all items (including inactive) */
+function adminGetItems(_req, res) {
+  const items = db.prepare(`
+    SELECT si.*,
+           (SELECT COUNT(*) FROM user_purchases up WHERE up.item_id = si.id) AS sold_count
+    FROM shop_items si ORDER BY si.id
+  `).all();
+  res.json(items);
+}
+
+/* POST /api/shop/admin/items — create item */
+function adminCreateItem(req, res) {
+  const { name, description, type, category, price, data, icon, is_active } = req.body;
+  if (!name || !type || price == null) return res.status(400).json({ error: 'name, type, price required' });
+  const r = db.prepare(
+    'INSERT INTO shop_items (name, description, type, category, price, data, icon, is_active) VALUES (?,?,?,?,?,?,?,?)'
+  ).run(name, description || '', type, category || 'cosmetic', price, data || '{}', icon || 'star', is_active ?? 1);
+  res.json({ ok: true, id: r.lastInsertRowid });
+}
+
+/* PUT /api/shop/admin/items/:id — update item */
+function adminUpdateItem(req, res) {
+  const id = Number(req.params.id);
+  const item = db.prepare('SELECT * FROM shop_items WHERE id = ?').get(id);
+  if (!item) return res.status(404).json({ error: 'Item not found' });
+  const { name, description, type, category, price, data, icon, is_active } = req.body;
+  db.prepare(`UPDATE shop_items SET
+    name=COALESCE(?,name), description=COALESCE(?,description), type=COALESCE(?,type),
+    category=COALESCE(?,category), price=COALESCE(?,price), data=COALESCE(?,data),
+    icon=COALESCE(?,icon), is_active=COALESCE(?,is_active) WHERE id=?`
+  ).run(name, description, type, category, price, data, icon, is_active, id);
+  res.json({ ok: true });
+}
+
+/* DELETE /api/shop/admin/items/:id — delete item */
+function adminDeleteItem(req, res) {
+  const id = Number(req.params.id);
+  db.prepare('DELETE FROM user_purchases WHERE item_id = ?').run(id);
+  db.prepare('DELETE FROM shop_items WHERE id = ?').run(id);
+  res.json({ ok: true });
+}
+
+/* POST /api/shop/admin/award-coins — award coins to user */
+function adminAwardCoins(req, res) {
+  const { userId, amount, reason } = req.body;
+  if (!userId || !amount || amount < 0) return res.status(400).json({ error: 'userId and positive amount required' });
+  db.prepare('UPDATE users SET coins = coins + ? WHERE id = ?').run(amount, userId);
+  const user = db.prepare('SELECT coins FROM users WHERE id = ?').get(userId);
+  res.json({ ok: true, coins: user?.coins || 0 });
+}
+
+/* GET /api/shop/admin/stats — shop stats */
+function adminShopStats(_req, res) {
+  const totalItems = db.prepare('SELECT COUNT(*) as c FROM shop_items').get().c;
+  const activeItems = db.prepare('SELECT COUNT(*) as c FROM shop_items WHERE is_active=1').get().c;
+  const totalPurchases = db.prepare('SELECT COUNT(*) as c FROM user_purchases').get().c;
+  const totalCoinsInCirculation = db.prepare('SELECT COALESCE(SUM(coins),0) as c FROM users').get().c;
+  const topItems = db.prepare(`
+    SELECT si.name, si.price, COUNT(up.id) as sold
+    FROM shop_items si LEFT JOIN user_purchases up ON up.item_id = si.id
+    GROUP BY si.id ORDER BY sold DESC LIMIT 5
+  `).all();
+  res.json({ totalItems, activeItems, totalPurchases, totalCoinsInCirculation, topItems });
+}
+
+module.exports = {
+  getItems, purchaseItem, getPurchases, getCoins, getMyActive, activateItem,
+  adminGetItems, adminCreateItem, adminUpdateItem, adminDeleteItem, adminAwardCoins, adminShopStats
+};
diff --git a/backend/src/controllers/submissionsController.js b/backend/src/controllers/submissionsController.js
new file mode 100644
index 0000000..a61a8ef
--- /dev/null
+++ b/backend/src/controllers/submissionsController.js
@@ -0,0 +1,318 @@
+const db   = require('../db/db');
+const path = require('path');
+const fs   = require('fs');
+const { pushNotif, pushParentNotif } = require('../utils/notifications');
+const { UPLOADS_DIR } = require('../config');
+const { checkMagicBytes } = require('../utils/magic');
+
+/* ── POST /api/submissions  (student) ─────────────────────────────────── */
+function submit(req, res) {
+  if (!req.file) return res.status(400).json({ error: 'No file uploaded' });
+  const { assignment_id, class_id, message } = req.body;
+  const student_id = req.user.id;
+
+  if (!class_id) return res.status(400).json({ error: 'class_id required' });
+
+  const member = db.prepare(
+    'SELECT 1 FROM class_members WHERE class_id = ? AND user_id = ?'
+  ).get(Number(class_id), student_id);
+  if (!member) return res.status(403).json({ error: 'Not a member of this class' });
+
+  if (assignment_id) {
+    const assign = db.prepare(
+      'SELECT id FROM assignments WHERE id = ? AND class_id = ?'
+    ).get(Number(assignment_id), Number(class_id));
+    if (!assign) return res.status(400).json({ error: 'Assignment not found in class' });
+  }
+
+  // Magic bytes verification — reject spoofed MIME types
+  const uploadedPath = path.resolve(UPLOADS_DIR, req.file.filename);
+  if (!checkMagicBytes(uploadedPath, req.file.mimetype)) {
+    try { fs.unlinkSync(uploadedPath); } catch {}
+    return res.status(400).json({ error: 'Содержимое файла не соответствует его расширению' });
+  }
+
+  let r;
+  try {
+    r = db.prepare(`
+      INSERT INTO submissions
+        (class_id, assignment_id, student_id, original_name, stored_name, mimetype, size, message)
+      VALUES (?, ?, ?, ?, ?, ?, ?, ?)
+    `).run(
+      Number(class_id),
+      assignment_id ? Number(assignment_id) : null,
+      student_id,
+      req.file.originalname,
+      req.file.filename,
+      req.file.mimetype,
+      req.file.size,
+      message?.trim() || null
+    );
+  } catch (err) {
+    const fp = path.resolve(UPLOADS_DIR, req.file.filename);
+    if (fp.startsWith(UPLOADS_DIR + path.sep)) { try { fs.unlinkSync(fp); } catch {} }
+    throw err;
+  }
+
+  // Notify teacher that a student submitted work
+  try {
+    const cls = db.prepare('SELECT teacher_id, name FROM classes WHERE id = ?').get(Number(class_id));
+    if (cls?.teacher_id) {
+      const assignTitle = assignment_id
+        ? db.prepare('SELECT title FROM assignments WHERE id = ?').get(Number(assignment_id))?.title
+        : null;
+      const studentName = req.user.name || req.user.email;
+      const msg = assignTitle
+        ? `«${studentName}» сдал работу по заданию «${assignTitle}»`
+        : `«${studentName}» прикрепил работу в классе «${cls.name}»`;
+      pushNotif(cls.teacher_id, 'submission', msg, '/classes');
+    }
+  } catch (e) { console.error('[submissions] notify teacher:', e.message); }
+
+  res.status(201).json({ id: r.lastInsertRowid });
+}
+
+/* ── GET /api/submissions/my  (student) ───────────────────────────────── */
+function getMySubmissions(req, res) {
+  const rows = db.prepare(`
+    SELECT s.id, s.class_id, s.assignment_id, s.original_name, s.size,
+           s.mimetype, s.message, s.status, s.teacher_note, s.grade, s.submitted_at,
+           a.title AS assignment_title
+    FROM submissions s
+    LEFT JOIN assignments a ON a.id = s.assignment_id
+    WHERE s.student_id = ?
+    ORDER BY s.submitted_at DESC
+  `).all(req.user.id);
+  res.json(rows);
+}
+
+/* ── GET /api/submissions?class_id=X  (teacher/admin) ─────────────────── */
+function getClassSubmissions(req, res) {
+  const { class_id } = req.query;
+  if (!class_id) return res.status(400).json({ error: 'class_id required' });
+
+  if (req.user.role === 'teacher') {
+    const cls = db.prepare('SELECT teacher_id FROM classes WHERE id = ?').get(Number(class_id));
+    if (!cls) return res.status(404).json({ error: 'Class not found' });
+    if (cls.teacher_id !== req.user.id)
+      return res.status(403).json({ error: 'Forbidden' });
+  }
+
+  const rows = db.prepare(`
+    SELECT s.id, s.class_id, s.assignment_id, s.original_name, s.size,
+           s.mimetype, s.message, s.status, s.teacher_note, s.grade, s.submitted_at,
+           u.name AS student_name, u.email AS student_email,
+           a.title AS assignment_title
+    FROM submissions s
+    JOIN  users u ON u.id = s.student_id
+    LEFT JOIN assignments a ON a.id = s.assignment_id
+    WHERE s.class_id = ?
+    ORDER BY s.submitted_at DESC
+  `).all(Number(class_id));
+
+  res.json(rows);
+}
+
+/* ── PATCH /api/submissions/:id  (teacher/admin) ──────────────────────── */
+function reviewSubmission(req, res) {
+  const sub = db.prepare(`
+    SELECT s.*, c.teacher_id FROM submissions s
+    JOIN classes c ON c.id = s.class_id WHERE s.id = ?
+  `).get(Number(req.params.id));
+  if (!sub) return res.status(404).json({ error: 'Submission not found' });
+
+  if (req.user.role === 'teacher' && sub.teacher_id !== req.user.id)
+    return res.status(403).json({ error: 'Forbidden' });
+
+  const VALID_STATUSES = ['new', 'reviewed', 'revision', 'resubmitted', 'accepted'];
+  const { status, teacher_note, grade } = req.body;
+  if (status && !VALID_STATUSES.includes(status))
+    return res.status(400).json({ error: 'Invalid status' });
+  if (grade !== undefined && grade !== null) {
+    const g = Number(grade);
+    if (!Number.isInteger(g) || g < 0 || g > 100)
+      return res.status(400).json({ error: 'Grade must be integer 0-100' });
+  }
+
+  const gradeVal = grade === undefined ? sub.grade :
+                   (grade === null || grade === '') ? null : Number(grade);
+  const noteVal  = teacher_note !== undefined ? (teacher_note?.trim() || null) : sub.teacher_note;
+  const statusVal = status || sub.status;
+  const reviewedAt = (status === 'reviewed' || status === 'accepted') ? new Date().toISOString() : sub.reviewed_at;
+
+  db.prepare(`
+    UPDATE submissions SET status=?, teacher_note=?, grade=?, reviewed_at=? WHERE id=?
+  `).run(statusVal, noteVal, gradeVal, reviewedAt, sub.id);
+
+  // Notify student
+  try {
+    const assignTitle = sub.assignment_id
+      ? db.prepare('SELECT title FROM assignments WHERE id = ?').get(sub.assignment_id)?.title
+      : null;
+    const isGraded = gradeVal !== undefined && gradeVal !== null;
+
+    if (status === 'revision') {
+      const msg = assignTitle
+        ? `Работа «${assignTitle}» отправлена на доработку.${noteVal ? ' Комментарий: ' + noteVal : ''}`
+        : `Ваша работа отправлена на доработку.`;
+      pushNotif(sub.student_id, 'revision', msg, '/homework');
+    } else if (status === 'accepted' || (status === 'reviewed' && sub.status !== 'reviewed')) {
+      const gradeText = isGraded ? ` Оценка: ${gradeVal}/100` : '';
+      const statusText = status === 'accepted' ? 'принята' : 'проверена';
+      const msg = assignTitle
+        ? `Ваша работа «${assignTitle}» ${statusText}.${gradeText}`
+        : `Ваша работа ${statusText}.${gradeText}`;
+      pushNotif(sub.student_id, 'grade', msg, '/homework');
+    } else if (isGraded && !status) {
+      const msg = assignTitle
+        ? `Оценка за «${assignTitle}»: ${gradeVal}/100`
+        : `Оценка за работу: ${gradeVal}/100`;
+      pushNotif(sub.student_id, 'grade', msg, '/homework');
+    }
+    // Notify parents
+    if (isGraded || status === 'accepted' || status === 'reviewed') {
+      const gradeText = isGraded ? ` Оценка: ${gradeVal}/100` : '';
+      const parentMsg = assignTitle
+        ? `Работа «${assignTitle}» проверена.${gradeText}`
+        : `Работа проверена.${gradeText}`;
+      pushParentNotif(sub.student_id, 'grade', parentMsg);
+    }
+  } catch (e) { console.error('[submissions] notify student grade:', e.message); }
+
+  res.json({ ok: true });
+}
+
+/* ── GET /api/submissions/:id/download ────────────────────────────────── */
+function downloadSubmission(req, res) {
+  const sub = db.prepare(`
+    SELECT s.*, c.teacher_id FROM submissions s
+    JOIN classes c ON c.id = s.class_id WHERE s.id = ?
+  `).get(Number(req.params.id));
+  if (!sub) return res.status(404).json({ error: 'Submission not found' });
+
+  const uid       = req.user.id;
+  const isTeacher = ['teacher', 'admin'].includes(req.user.role);
+
+  if (!isTeacher && sub.student_id !== uid) return res.status(403).json({ error: 'Forbidden' });
+  if (req.user.role === 'teacher' && sub.teacher_id !== uid) return res.status(403).json({ error: 'Forbidden' });
+
+  const filePath = path.resolve(UPLOADS_DIR, sub.stored_name);
+  if (!filePath.startsWith(UPLOADS_DIR + path.sep))
+    return res.status(400).json({ error: 'Invalid path' });
+  if (!fs.existsSync(filePath)) return res.status(404).json({ error: 'File missing' });
+
+  const encoded = encodeURIComponent(sub.original_name);
+  res.setHeader('Content-Disposition', `attachment; filename="${encoded}"; filename*=UTF-8''${encoded}`);
+  res.setHeader('Content-Type', sub.mimetype || 'application/octet-stream');
+  res.sendFile(filePath);
+}
+
+/* ── DELETE /api/submissions/:id ───────────────────────────────────────── */
+function deleteSubmission(req, res) {
+  const sub = db.prepare('SELECT s.*, c.teacher_id FROM submissions s JOIN classes c ON c.id = s.class_id WHERE s.id = ?')
+    .get(Number(req.params.id));
+  if (!sub) return res.status(404).json({ error: 'Submission not found' });
+
+  const isOwner   = sub.student_id === req.user.id;
+  const isAdmin   = req.user.role === 'admin';
+  const isTeacher = req.user.role === 'teacher' && sub.teacher_id === req.user.id;
+
+  if (!isOwner && !isAdmin && !isTeacher) return res.status(403).json({ error: 'Forbidden' });
+  // Students can't delete reviewed/accepted submissions; teachers/admin can
+  if (isOwner && !isAdmin && !isTeacher && ['reviewed', 'accepted'].includes(sub.status))
+    return res.status(400).json({ error: 'Cannot delete a reviewed submission' });
+
+  // Audit log — record who deleted what
+  const studentName = db.prepare('SELECT name FROM users WHERE id = ?').get(sub.student_id)?.name || '';
+  db.prepare(`
+    INSERT INTO submission_log (submission_id, class_id, assignment_id, student_id, student_name,
+      original_name, status, grade, teacher_note, submitted_at, action, deleted_by, deleted_by_role)
+    VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, 'deleted', ?, ?)
+  `).run(sub.id, sub.class_id, sub.assignment_id, sub.student_id, studentName,
+    sub.original_name, sub.status, sub.grade, sub.teacher_note, sub.submitted_at,
+    req.user.id, req.user.role);
+
+  const filePath = path.resolve(UPLOADS_DIR, sub.stored_name);
+  if (filePath.startsWith(UPLOADS_DIR + path.sep)) { try { fs.unlinkSync(filePath); } catch {} }
+  db.prepare('DELETE FROM submissions WHERE id = ?').run(sub.id);
+  res.json({ ok: true });
+}
+
+/* ── POST /api/submissions/:id/resubmit  (student — only if revision) ──── */
+function resubmit(req, res) {
+  if (!req.file) return res.status(400).json({ error: 'No file uploaded' });
+  const sub = db.prepare('SELECT * FROM submissions WHERE id = ?').get(Number(req.params.id));
+  if (!sub) return res.status(404).json({ error: 'Submission not found' });
+  if (sub.student_id !== req.user.id) return res.status(403).json({ error: 'Forbidden' });
+  if (sub.status !== 'revision') return res.status(400).json({ error: 'Resubmit only allowed for revision status' });
+
+  // Magic bytes verification on resubmit
+  const resubPath = path.resolve(UPLOADS_DIR, req.file.filename);
+  if (!checkMagicBytes(resubPath, req.file.mimetype)) {
+    try { fs.unlinkSync(resubPath); } catch {}
+    return res.status(400).json({ error: 'Содержимое файла не соответствует его расширению' });
+  }
+
+  // Delete old file
+  const oldPath = path.resolve(UPLOADS_DIR, sub.stored_name);
+  if (oldPath.startsWith(UPLOADS_DIR + path.sep)) { try { fs.unlinkSync(oldPath); } catch {} }
+
+  const message = req.body.message?.trim() || null;
+
+  try {
+    db.prepare(`
+      UPDATE submissions SET original_name=?, stored_name=?, mimetype=?, size=?, message=?,
+        status='resubmitted', submitted_at=datetime('now'), teacher_note=NULL
+      WHERE id=?
+    `).run(req.file.originalname, req.file.filename, req.file.mimetype, req.file.size, message, sub.id);
+  } catch (err) {
+    const fp = path.resolve(UPLOADS_DIR, req.file.filename);
+    if (fp.startsWith(UPLOADS_DIR + path.sep)) { try { fs.unlinkSync(fp); } catch {} }
+    throw err;
+  }
+
+  // Notify teacher
+  try {
+    const cls = db.prepare('SELECT teacher_id, name FROM classes WHERE id = ?').get(sub.class_id);
+    if (cls?.teacher_id) {
+      const assignTitle = sub.assignment_id
+        ? db.prepare('SELECT title FROM assignments WHERE id = ?').get(sub.assignment_id)?.title
+        : null;
+      const studentName = req.user.name || req.user.email;
+      const msg = assignTitle
+        ? `«${studentName}» повторно сдал работу «${assignTitle}»`
+        : `«${studentName}» повторно сдал работу`;
+      pushNotif(cls.teacher_id, 'submission', msg, '/homework');
+    }
+  } catch (e) { console.error('[submissions] notify teacher resubmit:', e.message); }
+
+  res.json({ ok: true });
+}
+
+/* ── GET /api/submissions/log?class_id=X  (admin only) ─────────────────── */
+function getSubmissionLog(req, res) {
+  const { class_id } = req.query;
+  let sql = `
+    SELECT sl.*, u.name AS deleted_by_name,
+           c.name AS class_name, a.title AS assignment_title
+    FROM submission_log sl
+    LEFT JOIN users u ON u.id = sl.deleted_by
+    LEFT JOIN classes c ON c.id = sl.class_id
+    LEFT JOIN assignments a ON a.id = sl.assignment_id
+  `;
+  const args = [];
+  if (class_id) {
+    sql += ' WHERE sl.class_id = ?';
+    args.push(Number(class_id));
+  }
+  sql += ' ORDER BY sl.deleted_at DESC LIMIT 200';
+  res.json(db.prepare(sql).all(...args));
+}
+
+/* ── DELETE /api/submissions/log  (admin only) ─────────────────────────── */
+function clearSubmissionLog(req, res) {
+  db.prepare('DELETE FROM submission_log').run();
+  res.json({ ok: true });
+}
+
+module.exports = { submit, getMySubmissions, getClassSubmissions, reviewSubmission, downloadSubmission, deleteSubmission, resubmit, getSubmissionLog, clearSubmissionLog };
diff --git a/backend/src/controllers/templateController.js b/backend/src/controllers/templateController.js
new file mode 100644
index 0000000..2a015f8
--- /dev/null
+++ b/backend/src/controllers/templateController.js
@@ -0,0 +1,317 @@
+const db = require('../db/db');
+
+/* ══════════════════════════════════════════════════════════════════════
+   COURSE TEMPLATES
+   ══════════════════════════════════════════════════════════════════════ */
+
+/* ── GET /api/templates/courses ──────────────────────────────────────── */
+function listCourseTemplates(req, res) {
+  const uid = req.user.id;
+  const { my, subject } = req.query;
+
+  let where;
+  const args = [];
+
+  if (my) {
+    where = 'WHERE ct.created_by = ?';
+    args.push(uid);
+  } else if (subject) {
+    where = 'WHERE (ct.is_public = 1 OR ct.created_by = ?) AND ct.subject_slug = ?';
+    args.push(uid, subject);
+  } else {
+    where = 'WHERE ct.is_public = 1 OR ct.created_by = ?';
+    args.push(uid);
+  }
+
+  const rows = db.prepare(`
+    SELECT ct.*, u.name AS creator_name
+    FROM course_templates ct
+    LEFT JOIN users u ON ct.created_by = u.id
+    ${where}
+    ORDER BY ct.created_at DESC
+  `).all(...args);
+
+  res.json(rows.map(r => ({
+    id:          r.id,
+    title:       r.title,
+    description: r.description || '',
+    category:    r.category,
+    subjectSlug: r.subject_slug,
+    structure:   safeJSON(r.structure, {}),
+    isPublic:    r.is_public === 1,
+    createdBy:   r.created_by,
+    creatorName: r.creator_name || '',
+    createdAt:   r.created_at,
+  })));
+}
+
+/* ── POST /api/templates/courses ─────────────────────────────────────── */
+function saveCourseTemplate(req, res) {
+  const uid = req.user.id;
+  const { title, description, category, subject_slug, courseId } = req.body;
+  if (!title) return res.status(400).json({ error: 'title required' });
+
+  let structure = {};
+
+  if (courseId) {
+    // Snapshot course structure
+    const course = db.prepare('SELECT * FROM courses WHERE id = ?').get(courseId);
+    if (!course) return res.status(404).json({ error: 'Course not found' });
+
+    const sections = db.prepare(
+      'SELECT * FROM course_sections WHERE course_id = ? ORDER BY order_index, id'
+    ).all(courseId);
+
+    const lessons = db.prepare(
+      'SELECT * FROM lessons WHERE course_id = ? ORDER BY order_index, id'
+    ).all(courseId);
+
+    const sectionArr = sections.map(s => {
+      const sectionLessons = lessons.filter(l => l.section_id === s.id);
+      return {
+        title: s.title,
+        lessons: sectionLessons.map(l => ({
+          title: l.title,
+          blocks: db.prepare(
+            'SELECT type, data FROM lesson_blocks WHERE lesson_id = ? ORDER BY order_index, id'
+          ).all(l.id).map(b => ({ type: b.type, data: safeJSON(b.data, {}) })),
+        })),
+      };
+    });
+
+    // Lessons without a section
+    const unsectioned = lessons.filter(l => !l.section_id);
+    if (unsectioned.length) {
+      sectionArr.unshift({
+        title: null,
+        lessons: unsectioned.map(l => ({
+          title: l.title,
+          blocks: db.prepare(
+            'SELECT type, data FROM lesson_blocks WHERE lesson_id = ? ORDER BY order_index, id'
+          ).all(l.id).map(b => ({ type: b.type, data: safeJSON(b.data, {}) })),
+        })),
+      });
+    }
+
+    structure = { sections: sectionArr };
+  }
+
+  const r = db.prepare(`
+    INSERT INTO course_templates (title, description, category, subject_slug, structure, is_public, created_by)
+    VALUES (?, ?, ?, ?, ?, 1, ?)
+  `).run(
+    title.trim(),
+    description || null,
+    category || 'general',
+    subject_slug || null,
+    JSON.stringify(structure),
+    uid
+  );
+
+  res.status(201).json({ id: r.lastInsertRowid });
+}
+
+/* ── POST /api/templates/courses/:id/create ──────────────────────────── */
+function createFromCourseTemplate(req, res) {
+  const tpl = db.prepare('SELECT * FROM course_templates WHERE id = ?').get(req.params.id);
+  if (!tpl) return res.status(404).json({ error: 'Template not found' });
+
+  const { title, subjectSlug } = req.body;
+  const structure = safeJSON(tpl.structure, {});
+  const sections  = structure.sections || [];
+
+  let newCourseId;
+  db.transaction(() => {
+    const cr = db.prepare(`
+      INSERT INTO courses (subject_slug, title, description, cover_emoji, order_index, is_published, created_by)
+      VALUES (?, ?, ?, '', 0, 0, ?)
+    `).run(
+      subjectSlug || tpl.subject_slug || 'other',
+      title || tpl.title,
+      tpl.description || null,
+      req.user.id
+    );
+    newCourseId = cr.lastInsertRowid;
+
+    let lessonOrder = 0;
+    for (const sec of sections) {
+      let sectionId = null;
+      if (sec.title) {
+        const sr = db.prepare(
+          'INSERT INTO course_sections (course_id, title, order_index) VALUES (?, ?, ?)'
+        ).run(newCourseId, sec.title, lessonOrder);
+        sectionId = sr.lastInsertRowid;
+      }
+
+      for (const lesson of (sec.lessons || [])) {
+        const lr = db.prepare(
+          'INSERT INTO lessons (course_id, title, order_index, section_id) VALUES (?, ?, ?, ?)'
+        ).run(newCourseId, lesson.title, lessonOrder++, sectionId);
+        const newLid = lr.lastInsertRowid;
+
+        (lesson.blocks || []).forEach((b, i) => {
+          db.prepare(
+            'INSERT INTO lesson_blocks (lesson_id, type, order_index, data) VALUES (?, ?, ?, ?)'
+          ).run(newLid, b.type, i, JSON.stringify(b.data || {}));
+        });
+      }
+    }
+  })();
+
+  res.status(201).json({ id: newCourseId });
+}
+
+/* ── DELETE /api/templates/courses/:id ────────────────────────────────── */
+function deleteCourseTemplate(req, res) {
+  const tpl = db.prepare('SELECT * FROM course_templates WHERE id = ?').get(req.params.id);
+  if (!tpl) return res.status(404).json({ error: 'Template not found' });
+  if (tpl.created_by !== req.user.id && req.user.role !== 'admin')
+    return res.status(403).json({ error: 'Forbidden' });
+
+  db.prepare('DELETE FROM course_templates WHERE id = ?').run(tpl.id);
+  res.json({ ok: true });
+}
+
+
+/* ══════════════════════════════════════════════════════════════════════
+   LESSON TEMPLATES
+   ══════════════════════════════════════════════════════════════════════ */
+
+/* ── GET /api/templates/lessons ──────────────────────────────────────── */
+function listLessonTemplates(req, res) {
+  const uid = req.user.id;
+  const { my, category } = req.query;
+
+  let where;
+  const args = [];
+
+  if (my) {
+    where = 'WHERE lt.created_by = ?';
+    args.push(uid);
+  } else if (category) {
+    where = 'WHERE (lt.is_public = 1 OR lt.created_by = ?) AND lt.category = ?';
+    args.push(uid, category);
+  } else {
+    where = 'WHERE lt.is_public = 1 OR lt.created_by = ?';
+    args.push(uid);
+  }
+
+  const rows = db.prepare(`
+    SELECT lt.*, u.name AS creator_name
+    FROM lesson_templates lt
+    LEFT JOIN users u ON lt.created_by = u.id
+    ${where}
+    ORDER BY lt.created_at DESC
+  `).all(...args);
+
+  res.json(rows.map(r => ({
+    id:          r.id,
+    title:       r.title,
+    category:    r.category,
+    subjectSlug: r.subject_slug,
+    blocks:      safeJSON(r.blocks, []),
+    isPublic:    r.is_public === 1,
+    createdBy:   r.created_by,
+    creatorName: r.creator_name || '',
+    createdAt:   r.created_at,
+  })));
+}
+
+/* ── POST /api/templates/lessons ─────────────────────────────────────── */
+function saveLessonTemplate(req, res) {
+  const uid = req.user.id;
+  const { title, category, subject_slug, lessonId } = req.body;
+  if (!title) return res.status(400).json({ error: 'title required' });
+
+  let blocksJSON = '[]';
+
+  if (lessonId) {
+    const lesson = db.prepare('SELECT id FROM lessons WHERE id = ?').get(lessonId);
+    if (!lesson) return res.status(404).json({ error: 'Lesson not found' });
+
+    const rawBlocks = db.prepare(
+      'SELECT type, data FROM lesson_blocks WHERE lesson_id = ? ORDER BY order_index, id'
+    ).all(lesson.id);
+
+    blocksJSON = JSON.stringify(rawBlocks.map(b => ({
+      type: b.type,
+      data: safeJSON(b.data, {}),
+    })));
+  }
+
+  const r = db.prepare(`
+    INSERT INTO lesson_templates (title, category, subject_slug, blocks, is_public, created_by)
+    VALUES (?, ?, ?, ?, 1, ?)
+  `).run(
+    title.trim(),
+    category || 'general',
+    subject_slug || null,
+    blocksJSON,
+    uid
+  );
+
+  res.status(201).json({ id: r.lastInsertRowid });
+}
+
+/* ── POST /api/templates/lessons/:id/create ──────────────────────────── */
+function createFromLessonTemplate(req, res) {
+  const tpl = db.prepare('SELECT * FROM lesson_templates WHERE id = ?').get(req.params.id);
+  if (!tpl) return res.status(404).json({ error: 'Template not found' });
+
+  const { courseId, sectionId, title } = req.body;
+  if (!courseId) return res.status(400).json({ error: 'courseId required' });
+
+  const course = db.prepare('SELECT id FROM courses WHERE id = ?').get(courseId);
+  if (!course) return res.status(404).json({ error: 'Course not found' });
+
+  const tplBlocks = safeJSON(tpl.blocks, []);
+
+  let newLessonId;
+  db.transaction(() => {
+    // Get max order_index
+    const maxOrd = db.prepare(
+      'SELECT MAX(order_index) AS mx FROM lessons WHERE course_id = ?'
+    ).get(courseId);
+
+    const lr = db.prepare(
+      'INSERT INTO lessons (course_id, title, order_index, section_id) VALUES (?, ?, ?, ?)'
+    ).run(courseId, title || tpl.title, (maxOrd?.mx ?? -1) + 1, sectionId || null);
+    newLessonId = lr.lastInsertRowid;
+
+    tplBlocks.forEach((b, i) => {
+      db.prepare(
+        'INSERT INTO lesson_blocks (lesson_id, type, order_index, data) VALUES (?, ?, ?, ?)'
+      ).run(newLessonId, b.type, i, JSON.stringify(b.data || {}));
+    });
+  })();
+
+  res.status(201).json({ id: newLessonId });
+}
+
+/* ── DELETE /api/templates/lessons/:id ────────────────────────────────── */
+function deleteLessonTemplate(req, res) {
+  const tpl = db.prepare('SELECT * FROM lesson_templates WHERE id = ?').get(req.params.id);
+  if (!tpl) return res.status(404).json({ error: 'Template not found' });
+  if (tpl.created_by !== req.user.id && req.user.role !== 'admin')
+    return res.status(403).json({ error: 'Forbidden' });
+
+  db.prepare('DELETE FROM lesson_templates WHERE id = ?').run(tpl.id);
+  res.json({ ok: true });
+}
+
+
+/* ── helpers ─────────────────────────────────────────────────────────── */
+function safeJSON(str, fallback) {
+  try { return JSON.parse(str); } catch { return fallback; }
+}
+
+module.exports = {
+  listCourseTemplates,
+  saveCourseTemplate,
+  createFromCourseTemplate,
+  deleteCourseTemplate,
+  listLessonTemplates,
+  saveLessonTemplate,
+  createFromLessonTemplate,
+  deleteLessonTemplate,
+};
diff --git a/backend/src/controllers/testController.js b/backend/src/controllers/testController.js
new file mode 100644
index 0000000..7e285a6
--- /dev/null
+++ b/backend/src/controllers/testController.js
@@ -0,0 +1,134 @@
+const db = require('../db/db');
+
+/* ── GET /api/tests ─────────────────────────────────────────────────────── */
+function list(req, res) {
+  const { subject } = req.query;
+  const { role, id: uid } = req.user;
+  const args = [];
+  let where = '1=1';
+  if (subject) { where += ' AND t.subject_slug = ?'; args.push(subject); }
+  if (role !== 'admin') { where += ' AND t.created_by = ?'; args.push(uid); }
+
+  const rows = db.prepare(`
+    SELECT t.id, t.title, t.subject_slug, t.description, t.created_at,
+           u.name AS creator_name,
+           COUNT(tq.question_id) AS question_count
+    FROM tests t
+    JOIN users u ON u.id = t.created_by
+    LEFT JOIN test_questions tq ON tq.test_id = t.id
+    WHERE ${where}
+    GROUP BY t.id ORDER BY t.created_at DESC
+  `).all(...args);
+  res.json(rows);
+}
+
+/* ── POST /api/tests ─────────────────────────────────────────────────────── */
+function create(req, res) {
+  const { title, subject_slug, description, show_answers = 1, time_limit } = req.body;
+  if (!title?.trim())  return res.status(400).json({ error: 'title required' });
+  if (!subject_slug)   return res.status(400).json({ error: 'subject_slug required' });
+  const tl = time_limit ? Math.max(1, Math.min(600, Number(time_limit))) : null;
+  const r = db.prepare(
+    'INSERT INTO tests (title, subject_slug, description, show_answers, time_limit, created_by) VALUES (?, ?, ?, ?, ?, ?)'
+  ).run(title.trim(), subject_slug, description?.trim() || null, show_answers ? 1 : 0, tl, req.user.id);
+  res.status(201).json({ id: r.lastInsertRowid });
+}
+
+/* ── GET /api/tests/:id ──────────────────────────────────────────────────── */
+function getOne(req, res) {
+  const t = db.prepare(`
+    SELECT t.*, u.name AS creator_name
+    FROM tests t JOIN users u ON u.id = t.created_by WHERE t.id = ?
+  `).get(req.params.id);
+  if (!t) return res.status(404).json({ error: 'Not found' });
+
+  const questions = db.prepare(`
+    SELECT q.id, q.text, q.type, q.difficulty, q.explanation,
+           tp.name AS topic, s.name AS subject_name,
+           (SELECT json_group_array(json_object('id',o.id,'text',o.text,'is_correct',o.is_correct,'order_index',o.order_index,'match_pair',o.match_pair) ORDER BY o.order_index)
+            FROM options o WHERE o.question_id = q.id) AS options_json,
+           tq.order_index
+    FROM test_questions tq
+    JOIN questions q ON q.id = tq.question_id
+    LEFT JOIN topics tp ON tp.id = q.topic_id
+    LEFT JOIN subjects s ON s.id = q.subject_id
+    WHERE tq.test_id = ? ORDER BY tq.order_index
+  `).all(req.params.id).map(r => ({
+    ...r,
+    options: JSON.parse(r.options_json || '[]'),
+    options_json: undefined,
+  }));
+
+  res.json({ ...t, questions });
+}
+
+/* ── PUT /api/tests/:id ──────────────────────────────────────────────────── */
+function update(req, res) {
+  const { title, subject_slug, description, show_answers, time_limit } = req.body;
+  const t  = req.resource; // ownership verified by requireOwnership middleware
+  const tl = time_limit !== undefined ? (time_limit ? Math.max(1, Math.min(600, Number(time_limit))) : null) : undefined;
+  db.prepare('UPDATE tests SET title = ?, subject_slug = ?, description = ?, show_answers = ?, time_limit = ? WHERE id = ?')
+    .run(title?.trim(), subject_slug, description?.trim() || null, show_answers === undefined ? 1 : (show_answers ? 1 : 0),
+      tl !== undefined ? tl : t.time_limit,
+      t.id);
+  res.json({ ok: true });
+}
+
+/* ── DELETE /api/tests/:id ───────────────────────────────────────────────── */
+function remove(req, res) {
+  db.prepare('DELETE FROM tests WHERE id = ?').run(req.resource.id);
+  res.json({ ok: true });
+}
+
+/* ── POST /api/tests/:id/questions ──────────────────────────────────────── */
+function addQuestions(req, res) {
+  const { question_ids } = req.body;
+  if (!Array.isArray(question_ids) || !question_ids.length)
+    return res.status(400).json({ error: 'question_ids[] required' });
+
+  const testId = req.resource.id; // ownership verified by requireOwnership middleware
+
+  const { mx } = db.prepare(
+    'SELECT COALESCE(MAX(order_index), -1) AS mx FROM test_questions WHERE test_id = ?'
+  ).get(testId);
+
+  let idx = mx + 1;
+  const ins = db.prepare(
+    'INSERT OR IGNORE INTO test_questions (test_id, question_id, order_index) VALUES (?, ?, ?)'
+  );
+  try {
+    db.transaction(() => { question_ids.forEach(qid => ins.run(testId, qid, idx++)); })();
+  } catch (e) {
+    return res.status(500).json({ error: e.message });
+  }
+  res.json({ ok: true });
+}
+
+/* ── DELETE /api/tests/:id/questions/:qid ───────────────────────────────── */
+function removeQuestion(req, res) {
+  db.prepare('DELETE FROM test_questions WHERE test_id = ? AND question_id = ?')
+    .run(req.resource.id, req.params.qid);
+  res.json({ ok: true });
+}
+
+/* ── PATCH /api/tests/:id/questions/reorder  { ids: [qid, qid, ...] } ──── */
+function reorderQuestions(req, res) {
+  const { ids } = req.body;
+  if (!Array.isArray(ids) || !ids.length)
+    return res.status(400).json({ error: 'ids[] required' });
+
+  const testId = req.resource.id;
+  const upd = db.prepare(
+    'UPDATE test_questions SET order_index = ? WHERE test_id = ? AND question_id = ?'
+  );
+  try {
+    db.transaction(() => {
+      ids.forEach((qid, i) => upd.run(i, testId, qid));
+    })();
+  } catch (e) {
+    return res.status(500).json({ error: e.message });
+  }
+  res.json({ ok: true });
+}
+
+module.exports = { list, create, getOne, update, remove, addQuestions, removeQuestion, reorderQuestions };
diff --git a/backend/src/db/db.js b/backend/src/db/db.js
new file mode 100644
index 0000000..953a7cb
--- /dev/null
+++ b/backend/src/db/db.js
@@ -0,0 +1,48 @@
+const { DatabaseSync } = require('node:sqlite');
+const path = require('path');
+
+const fs = require('fs');
+// Resolve DB_PATH: if absolute — use as-is; if relative — resolve from backend/ dir;
+// fallback to __dirname-relative default so CWD never matters.
+const _rawPath = process.env.DB_PATH;
+const _backendDir = path.join(__dirname, '../../');
+const dbPath = _rawPath
+  ? (path.isAbsolute(_rawPath) ? _rawPath : path.resolve(_backendDir, _rawPath))
+  : path.join(__dirname, '../../data/learnspace.db');
+const dbDir = path.dirname(dbPath);
+if (!fs.existsSync(dbDir)) fs.mkdirSync(dbDir, { recursive: true });
+
+// Auto-migrate from old location (backend/learnspace.db → backend/data/learnspace.db)
+const oldPath = path.join(__dirname, '../../learnspace.db');
+if (!fs.existsSync(dbPath) && fs.existsSync(oldPath)) {
+  fs.copyFileSync(oldPath, dbPath);
+  // Also copy WAL/SHM if present
+  if (fs.existsSync(oldPath + '-wal')) fs.copyFileSync(oldPath + '-wal', dbPath + '-wal');
+  if (fs.existsSync(oldPath + '-shm')) fs.copyFileSync(oldPath + '-shm', dbPath + '-shm');
+  console.log('[db] Migrated database from', oldPath, '→', dbPath);
+}
+
+const db = new DatabaseSync(dbPath);
+
+db.exec('PRAGMA journal_mode = WAL');
+db.exec('PRAGMA foreign_keys = ON');
+
+/**
+ * Run a synchronous function inside a BEGIN/COMMIT/ROLLBACK transaction.
+ * Returns the value returned by fn(), or rethrows on error.
+ */
+db.transaction = function transaction(fn) {
+  return (...args) => {
+    db.exec('BEGIN');
+    try {
+      const result = fn(...args);
+      db.exec('COMMIT');
+      return result;
+    } catch (err) {
+      db.exec('ROLLBACK');
+      throw err;
+    }
+  };
+};
+
+module.exports = db;
diff --git a/backend/src/db/migrate.js b/backend/src/db/migrate.js
new file mode 100644
index 0000000..e8a2c5d
--- /dev/null
+++ b/backend/src/db/migrate.js
@@ -0,0 +1,2864 @@
+const db = require('./db');
+
+db.exec(`
+  CREATE TABLE IF NOT EXISTS users (
+    id            INTEGER PRIMARY KEY AUTOINCREMENT,
+    email         TEXT UNIQUE NOT NULL,
+    password_hash TEXT NOT NULL,
+    name          TEXT NOT NULL,
+    role          TEXT NOT NULL DEFAULT 'student'
+                  CHECK (role IN ('student', 'teacher', 'admin', 'free_student')),
+    created_at    TEXT NOT NULL DEFAULT (datetime('now')),
+    last_login    TEXT
+  );
+
+  CREATE TABLE IF NOT EXISTS subjects (
+    id   INTEGER PRIMARY KEY AUTOINCREMENT,
+    slug TEXT UNIQUE NOT NULL,
+    name TEXT NOT NULL,
+    icon TEXT
+  );
+
+  INSERT OR IGNORE INTO subjects (slug, name, icon) VALUES
+    ('bio',  'Биология',   'dna'),
+    ('chem', 'Химия',      'atom'),
+    ('math', 'Математика', 'compass'),
+    ('phys', 'Физика',     'zap');
+
+  CREATE TABLE IF NOT EXISTS topics (
+    id          INTEGER PRIMARY KEY AUTOINCREMENT,
+    subject_id  INTEGER NOT NULL REFERENCES subjects(id) ON DELETE CASCADE,
+    name        TEXT NOT NULL,
+    order_index INTEGER NOT NULL DEFAULT 0
+  );
+
+  CREATE TABLE IF NOT EXISTS questions (
+    id          INTEGER PRIMARY KEY AUTOINCREMENT,
+    subject_id  INTEGER NOT NULL REFERENCES subjects(id) ON DELETE CASCADE,
+    topic_id    INTEGER REFERENCES topics(id) ON DELETE SET NULL,
+    text        TEXT NOT NULL,
+    difficulty  INTEGER NOT NULL DEFAULT 1 CHECK (difficulty BETWEEN 1 AND 3),
+    year        INTEGER,
+    explanation TEXT,
+    created_at  TEXT NOT NULL DEFAULT (datetime('now'))
+  );
+
+  CREATE TABLE IF NOT EXISTS options (
+    id          INTEGER PRIMARY KEY AUTOINCREMENT,
+    question_id INTEGER NOT NULL REFERENCES questions(id) ON DELETE CASCADE,
+    text        TEXT NOT NULL,
+    is_correct  INTEGER NOT NULL DEFAULT 0,
+    order_index INTEGER NOT NULL DEFAULT 0
+  );
+
+  CREATE TABLE IF NOT EXISTS test_sessions (
+    id           INTEGER PRIMARY KEY AUTOINCREMENT,
+    user_id      INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    subject_id   INTEGER REFERENCES subjects(id) ON DELETE SET NULL,
+    mode         TEXT NOT NULL DEFAULT 'exam'
+                 CHECK (mode IN ('exam', 'practice', 'topic', 'random')),
+    total        INTEGER NOT NULL,
+    score        INTEGER,
+    status       TEXT NOT NULL DEFAULT 'in_progress'
+                 CHECK (status IN ('in_progress', 'completed', 'abandoned')),
+    started_at   TEXT NOT NULL DEFAULT (datetime('now')),
+    finished_at  TEXT
+  );
+
+  CREATE TABLE IF NOT EXISTS session_questions (
+    id          INTEGER PRIMARY KEY AUTOINCREMENT,
+    session_id  INTEGER NOT NULL REFERENCES test_sessions(id) ON DELETE CASCADE,
+    question_id INTEGER NOT NULL REFERENCES questions(id),
+    order_index INTEGER NOT NULL
+  );
+
+  CREATE TABLE IF NOT EXISTS user_answers (
+    id               INTEGER PRIMARY KEY AUTOINCREMENT,
+    session_id       INTEGER NOT NULL REFERENCES test_sessions(id) ON DELETE CASCADE,
+    question_id      INTEGER NOT NULL REFERENCES questions(id),
+    chosen_option_id INTEGER REFERENCES options(id),
+    is_correct       INTEGER,
+    time_spent_sec   INTEGER,
+    answered_at      TEXT NOT NULL DEFAULT (datetime('now')),
+    UNIQUE (session_id, question_id)
+  );
+
+  CREATE INDEX IF NOT EXISTS idx_questions_subject ON questions(subject_id);
+  CREATE INDEX IF NOT EXISTS idx_questions_topic   ON questions(topic_id);
+  CREATE INDEX IF NOT EXISTS idx_sessions_user     ON test_sessions(user_id);
+  CREATE INDEX IF NOT EXISTS idx_answers_session   ON user_answers(session_id);
+
+  -- ── Классы ────────────────────────────────────────────────────────────
+  CREATE TABLE IF NOT EXISTS classes (
+    id          INTEGER PRIMARY KEY AUTOINCREMENT,
+    name        TEXT NOT NULL,
+    description TEXT,
+    teacher_id  INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    invite_code TEXT UNIQUE NOT NULL,
+    created_at  TEXT NOT NULL DEFAULT (datetime('now'))
+  );
+
+  CREATE TABLE IF NOT EXISTS class_members (
+    id        INTEGER PRIMARY KEY AUTOINCREMENT,
+    class_id  INTEGER NOT NULL REFERENCES classes(id) ON DELETE CASCADE,
+    user_id   INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    joined_at TEXT NOT NULL DEFAULT (datetime('now')),
+    UNIQUE (class_id, user_id)
+  );
+
+  -- ── Задания ───────────────────────────────────────────────────────────
+  CREATE TABLE IF NOT EXISTS assignments (
+    id           INTEGER PRIMARY KEY AUTOINCREMENT,
+    class_id     INTEGER NOT NULL REFERENCES classes(id) ON DELETE CASCADE,
+    title        TEXT NOT NULL,
+    subject_slug TEXT NOT NULL,
+    mode         TEXT NOT NULL DEFAULT 'exam',
+    count        INTEGER NOT NULL DEFAULT 25,
+    topic_id     INTEGER REFERENCES topics(id) ON DELETE SET NULL,
+    deadline     TEXT,
+    created_by   INTEGER NOT NULL REFERENCES users(id),
+    created_at   TEXT NOT NULL DEFAULT (datetime('now'))
+  );
+
+  CREATE TABLE IF NOT EXISTS assignment_sessions (
+    id            INTEGER PRIMARY KEY AUTOINCREMENT,
+    assignment_id INTEGER NOT NULL REFERENCES assignments(id) ON DELETE CASCADE,
+    user_id       INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    session_id    INTEGER REFERENCES test_sessions(id) ON DELETE SET NULL,
+    UNIQUE (assignment_id, user_id)
+  );
+
+  CREATE INDEX IF NOT EXISTS idx_class_members_class ON class_members(class_id);
+  CREATE INDEX IF NOT EXISTS idx_class_members_user  ON class_members(user_id);
+  CREATE INDEX IF NOT EXISTS idx_assignments_class   ON assignments(class_id);
+  CREATE INDEX IF NOT EXISTS idx_assign_sess_assign  ON assignment_sessions(assignment_id);
+`);
+
+console.log('✓ Migration complete. Database: learnspace.db');
+
+/* ── Incremental columns (safe to run multiple times) ─────────────────── */
+const incremental = [
+  "ALTER TABLE questions ADD COLUMN type TEXT NOT NULL DEFAULT 'single'",
+  "ALTER TABLE questions ADD COLUMN correct_text TEXT",
+  "ALTER TABLE user_answers ADD COLUMN answer_text TEXT",
+  `CREATE TABLE IF NOT EXISTS tests (
+    id           INTEGER PRIMARY KEY AUTOINCREMENT,
+    title        TEXT NOT NULL,
+    subject_slug TEXT NOT NULL,
+    description  TEXT,
+    created_by   INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    created_at   TEXT NOT NULL DEFAULT (datetime('now'))
+  )`,
+  `CREATE TABLE IF NOT EXISTS test_questions (
+    test_id      INTEGER NOT NULL REFERENCES tests(id) ON DELETE CASCADE,
+    question_id  INTEGER NOT NULL REFERENCES questions(id) ON DELETE CASCADE,
+    order_index  INTEGER NOT NULL DEFAULT 0,
+    PRIMARY KEY (test_id, question_id)
+  )`,
+  'ALTER TABLE assignments ADD COLUMN test_id INTEGER REFERENCES tests(id) ON DELETE SET NULL',
+  "ALTER TABLE tests ADD COLUMN show_answers INTEGER NOT NULL DEFAULT 1",
+  `CREATE TABLE IF NOT EXISTS files (
+    id            INTEGER PRIMARY KEY AUTOINCREMENT,
+    title         TEXT NOT NULL,
+    description   TEXT,
+    original_name TEXT NOT NULL,
+    stored_name   TEXT NOT NULL UNIQUE,
+    mimetype      TEXT,
+    size          INTEGER,
+    subject_slug  TEXT,
+    is_public     INTEGER NOT NULL DEFAULT 1,
+    uploaded_by   INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    created_at    TEXT NOT NULL DEFAULT (datetime('now'))
+  )`,
+  'CREATE INDEX IF NOT EXISTS idx_files_subject  ON files(subject_slug)',
+  'CREATE INDEX IF NOT EXISTS idx_files_uploader ON files(uploaded_by)',
+  `CREATE TABLE IF NOT EXISTS file_access (
+    id        INTEGER PRIMARY KEY AUTOINCREMENT,
+    file_id   INTEGER NOT NULL REFERENCES files(id) ON DELETE CASCADE,
+    type      TEXT NOT NULL CHECK (type IN ('class', 'user')),
+    target_id INTEGER NOT NULL,
+    UNIQUE (file_id, type, target_id)
+  )`,
+  'CREATE INDEX IF NOT EXISTS idx_file_access_file ON file_access(file_id)',
+  'ALTER TABLE assignments ADD COLUMN file_id INTEGER REFERENCES files(id) ON DELETE SET NULL',
+  'ALTER TABLE questions ADD COLUMN image TEXT',
+  'ALTER TABLE assignment_sessions ADD COLUMN first_seen_at TEXT',
+  "ALTER TABLE subjects ADD COLUMN default_mode    TEXT NOT NULL DEFAULT 'exam'",
+  "ALTER TABLE subjects ADD COLUMN default_count   INTEGER NOT NULL DEFAULT 25",
+  "ALTER TABLE subjects ADD COLUMN default_test_id INTEGER REFERENCES tests(id) ON DELETE SET NULL",
+  "ALTER TABLE tests ADD COLUMN time_limit INTEGER",
+  `CREATE TABLE IF NOT EXISTS announcements (
+    id         INTEGER PRIMARY KEY AUTOINCREMENT,
+    class_id   INTEGER NOT NULL REFERENCES classes(id) ON DELETE CASCADE,
+    author_id  INTEGER NOT NULL REFERENCES users(id)   ON DELETE CASCADE,
+    text       TEXT NOT NULL,
+    created_at TEXT NOT NULL DEFAULT (datetime('now'))
+  )`,
+  "CREATE INDEX IF NOT EXISTS idx_announcements_class ON announcements(class_id)",
+  `CREATE TABLE IF NOT EXISTS notifications (
+    id         INTEGER PRIMARY KEY AUTOINCREMENT,
+    user_id    INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    type       TEXT NOT NULL DEFAULT 'info',
+    message    TEXT NOT NULL,
+    link       TEXT,
+    is_read    INTEGER NOT NULL DEFAULT 0,
+    created_at TEXT NOT NULL DEFAULT (datetime('now'))
+  )`,
+  "CREATE INDEX IF NOT EXISTS idx_notifications_user ON notifications(user_id, is_read)",
+  "ALTER TABLE options ADD COLUMN match_pair TEXT",
+  "ALTER TABLE assignments ADD COLUMN is_homework INTEGER NOT NULL DEFAULT 0",
+  `CREATE TABLE IF NOT EXISTS assignment_templates (
+    id           INTEGER PRIMARY KEY AUTOINCREMENT,
+    created_by   INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    label        TEXT NOT NULL,
+    subject_slug TEXT NOT NULL,
+    mode         TEXT NOT NULL DEFAULT 'exam',
+    count        INTEGER NOT NULL DEFAULT 25,
+    topic_id     INTEGER REFERENCES topics(id) ON DELETE SET NULL,
+    test_id      INTEGER REFERENCES tests(id)  ON DELETE SET NULL,
+    file_id      INTEGER REFERENCES files(id)  ON DELETE SET NULL,
+    is_homework  INTEGER NOT NULL DEFAULT 0,
+    created_at   TEXT NOT NULL DEFAULT (datetime('now'))
+  )`,
+  "CREATE INDEX IF NOT EXISTS idx_tpl_creator ON assignment_templates(created_by)",
+  `CREATE TABLE IF NOT EXISTS folders (
+    id         INTEGER PRIMARY KEY AUTOINCREMENT,
+    name       TEXT NOT NULL,
+    created_by INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    created_at TEXT NOT NULL DEFAULT (datetime('now'))
+  )`,
+  "ALTER TABLE files ADD COLUMN folder_id INTEGER",
+  `CREATE TABLE IF NOT EXISTS folder_access (
+    id        INTEGER PRIMARY KEY AUTOINCREMENT,
+    folder_id INTEGER NOT NULL REFERENCES folders(id) ON DELETE CASCADE,
+    type      TEXT NOT NULL CHECK (type IN ('class', 'user')),
+    target_id INTEGER NOT NULL,
+    UNIQUE (folder_id, type, target_id)
+  )`,
+  'CREATE INDEX IF NOT EXISTS idx_folder_access_folder ON folder_access(folder_id)',
+  `CREATE TABLE IF NOT EXISTS role_permissions (
+    id         INTEGER PRIMARY KEY AUTOINCREMENT,
+    role       TEXT NOT NULL CHECK (role IN ('teacher', 'student', 'free_student')),
+    permission TEXT NOT NULL,
+    enabled    INTEGER NOT NULL DEFAULT 0,
+    UNIQUE (role, permission)
+  )`,
+  `CREATE TABLE IF NOT EXISTS user_permissions (
+    id         INTEGER PRIMARY KEY AUTOINCREMENT,
+    user_id    INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    permission TEXT NOT NULL,
+    enabled    INTEGER NOT NULL DEFAULT 0,
+    UNIQUE (user_id, permission)
+  )`,
+  'CREATE INDEX IF NOT EXISTS idx_user_permissions_user ON user_permissions(user_id)',
+  `CREATE TABLE IF NOT EXISTS submissions (
+    id            INTEGER PRIMARY KEY AUTOINCREMENT,
+    class_id      INTEGER NOT NULL REFERENCES classes(id) ON DELETE CASCADE,
+    assignment_id INTEGER REFERENCES assignments(id) ON DELETE SET NULL,
+    student_id    INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    original_name TEXT NOT NULL,
+    stored_name   TEXT NOT NULL UNIQUE,
+    mimetype      TEXT,
+    size          INTEGER,
+    message       TEXT,
+    status        TEXT NOT NULL DEFAULT 'new' CHECK (status IN ('new','reviewed')),
+    teacher_note  TEXT,
+    submitted_at  TEXT NOT NULL DEFAULT (datetime('now'))
+  )`,
+  'CREATE INDEX IF NOT EXISTS idx_submissions_class      ON submissions(class_id)',
+  'CREATE INDEX IF NOT EXISTS idx_submissions_student    ON submissions(student_id)',
+  'CREATE INDEX IF NOT EXISTS idx_submissions_assignment ON submissions(assignment_id)',
+  "ALTER TABLE questions ADD COLUMN source_type TEXT NOT NULL DEFAULT 'базовый'",
+  'CREATE INDEX IF NOT EXISTS idx_questions_source ON questions(source_type)',
+];
+for (const sql of incremental) {
+  try { db.exec(sql); }
+  catch (e) { if (!e.message.includes('duplicate column') && !e.message.includes('already exists')) console.warn('  incremental migration note:', e.message); }
+}
+
+/* ── Deduplicate topics (safe to run multiple times) ─────────────────── */
+try {
+  const dupes = db.prepare(
+    'SELECT id FROM topics WHERE id NOT IN (SELECT MIN(id) FROM topics GROUP BY subject_id, name)'
+  ).all();
+  if (dupes.length) {
+    const getDupesWithInfo = db.prepare(`
+      SELECT t.id, (SELECT MIN(id) FROM topics t2 WHERE t2.subject_id = t.subject_id AND t2.name = t.name) AS canonical_id
+      FROM topics t
+      WHERE t.id NOT IN (SELECT MIN(id) FROM topics GROUP BY subject_id, name)
+    `).all();
+    const updateQ = db.prepare('UPDATE questions SET topic_id = ? WHERE topic_id = ?');
+    db.exec('BEGIN');
+    for (const d of getDupesWithInfo) updateQ.run(d.canonical_id, d.id);
+    db.exec('COMMIT');
+    db.prepare('DELETE FROM topics WHERE id NOT IN (SELECT MIN(id) FROM topics GROUP BY subject_id, name)').run();
+    console.log(`✓ Deduplicated ${dupes.length} duplicate topics`);
+  }
+  db.exec('CREATE UNIQUE INDEX IF NOT EXISTS idx_topics_uniq ON topics(subject_id, name)');
+} catch (e) {
+  try { db.exec('ROLLBACK'); } catch {}
+  console.warn('Topics dedup skipped:', e.message);
+}
+
+/* ── Recreate assignments table: make class_id nullable, add user_id ────── */
+try {
+  const cols = db.prepare('PRAGMA table_info(assignments)').all();
+  const classIdCol = cols.find(c => c.name === 'class_id');
+  const hasUserId  = cols.some(c => c.name === 'user_id');
+  if (classIdCol && classIdCol.notnull === 1 && !hasUserId) {
+    const hasTid = cols.some(c => c.name === 'test_id');
+    db.exec('PRAGMA foreign_keys = OFF');
+    const hasFileId    = cols.some(c => c.name === 'file_id');
+    const hasHomework  = cols.some(c => c.name === 'is_homework');
+    const hasMaxAtt    = cols.some(c => c.name === 'max_attempts');
+    db.exec(`
+      CREATE TABLE assignments_v2 (
+        id           INTEGER PRIMARY KEY AUTOINCREMENT,
+        class_id     INTEGER REFERENCES classes(id) ON DELETE CASCADE,
+        user_id      INTEGER REFERENCES users(id)   ON DELETE CASCADE,
+        title        TEXT NOT NULL,
+        subject_slug TEXT NOT NULL,
+        mode         TEXT NOT NULL DEFAULT 'exam',
+        count        INTEGER NOT NULL DEFAULT 25,
+        topic_id     INTEGER REFERENCES topics(id) ON DELETE SET NULL,
+        deadline     TEXT,
+        created_by   INTEGER NOT NULL REFERENCES users(id),
+        test_id      INTEGER REFERENCES tests(id) ON DELETE SET NULL,
+        file_id      INTEGER REFERENCES files(id) ON DELETE SET NULL,
+        is_homework  INTEGER NOT NULL DEFAULT 0,
+        max_attempts INTEGER NOT NULL DEFAULT 0,
+        created_at   TEXT NOT NULL DEFAULT (datetime('now'))
+      )
+    `);
+    // Copy only columns that exist in the old table
+    const copyCols = ['id','class_id','title','subject_slug','mode','count','topic_id','deadline','created_by','created_at'];
+    if (hasTid)     copyCols.push('test_id');
+    if (hasFileId)  copyCols.push('file_id');
+    if (hasHomework) copyCols.push('is_homework');
+    if (hasMaxAtt)  copyCols.push('max_attempts');
+    const colList = copyCols.join(',');
+    db.exec(`INSERT INTO assignments_v2 (${colList}) SELECT ${colList} FROM assignments`);
+    db.exec('DROP TABLE assignments');
+    db.exec('ALTER TABLE assignments_v2 RENAME TO assignments');
+    db.exec('CREATE INDEX IF NOT EXISTS idx_assignments_class ON assignments(class_id)');
+    db.exec('CREATE INDEX IF NOT EXISTS idx_assignments_user  ON assignments(user_id)');
+    db.exec('PRAGMA foreign_keys = ON');
+    console.log('✓ assignments migrated: class_id now nullable, user_id added');
+  }
+} catch (e) {
+  try { db.exec('PRAGMA foreign_keys = ON'); } catch {}
+  console.warn('Assignment migration skipped:', e.message);
+}
+
+/* ── Theory / Lessons module ─────────────────────────────────────────── */
+const theoryMigrations = [
+  `CREATE TABLE IF NOT EXISTS courses (
+    id           INTEGER PRIMARY KEY AUTOINCREMENT,
+    subject_slug TEXT NOT NULL,
+    title        TEXT NOT NULL,
+    description  TEXT,
+    cover_emoji  TEXT NOT NULL DEFAULT '',
+    order_index  INTEGER NOT NULL DEFAULT 0,
+    is_published INTEGER NOT NULL DEFAULT 0,
+    created_by   INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    created_at   TEXT NOT NULL DEFAULT (datetime('now'))
+  )`,
+  'CREATE INDEX IF NOT EXISTS idx_courses_subject ON courses(subject_slug)',
+  'CREATE INDEX IF NOT EXISTS idx_courses_creator ON courses(created_by)',
+  `CREATE TABLE IF NOT EXISTS lessons (
+    id           INTEGER PRIMARY KEY AUTOINCREMENT,
+    course_id    INTEGER NOT NULL REFERENCES courses(id) ON DELETE CASCADE,
+    title        TEXT NOT NULL,
+    order_index  INTEGER NOT NULL DEFAULT 0,
+    is_published INTEGER NOT NULL DEFAULT 0,
+    created_at   TEXT NOT NULL DEFAULT (datetime('now'))
+  )`,
+  'CREATE INDEX IF NOT EXISTS idx_lessons_course ON lessons(course_id)',
+  `CREATE TABLE IF NOT EXISTS lesson_blocks (
+    id          INTEGER PRIMARY KEY AUTOINCREMENT,
+    lesson_id   INTEGER NOT NULL REFERENCES lessons(id) ON DELETE CASCADE,
+    type        TEXT NOT NULL DEFAULT 'text'
+                CHECK (type IN ('heading','text','formula','image','quiz','sim','table','code','divider')),
+    order_index INTEGER NOT NULL DEFAULT 0,
+    data        TEXT NOT NULL DEFAULT '{}'
+  )`,
+  'CREATE INDEX IF NOT EXISTS idx_blocks_lesson ON lesson_blocks(lesson_id)',
+  `CREATE TABLE IF NOT EXISTS lesson_progress (
+    id          INTEGER PRIMARY KEY AUTOINCREMENT,
+    user_id     INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    lesson_id   INTEGER NOT NULL REFERENCES lessons(id) ON DELETE CASCADE,
+    completed   INTEGER NOT NULL DEFAULT 0,
+    updated_at  TEXT NOT NULL DEFAULT (datetime('now')),
+    UNIQUE (user_id, lesson_id)
+  )`,
+  'CREATE INDEX IF NOT EXISTS idx_lprogress_user   ON lesson_progress(user_id)',
+  'CREATE INDEX IF NOT EXISTS idx_lprogress_lesson ON lesson_progress(lesson_id)',
+];
+for (const sql of theoryMigrations) {
+  try { db.exec(sql); }
+  catch (e) { if (!e.message.includes('duplicate column') && !e.message.includes('already exists')) console.warn('  theory migration note:', e.message); }
+}
+console.log('✓ Theory/Lessons tables ready');
+
+/* ── Theory v2: sections, notes, class_courses ───────────────────────── */
+const theoryV2 = [
+  `CREATE TABLE IF NOT EXISTS course_sections (
+    id          INTEGER PRIMARY KEY AUTOINCREMENT,
+    course_id   INTEGER NOT NULL REFERENCES courses(id) ON DELETE CASCADE,
+    title       TEXT NOT NULL,
+    order_index INTEGER NOT NULL DEFAULT 0
+  )`,
+  'CREATE INDEX IF NOT EXISTS idx_sections_course ON course_sections(course_id)',
+  "ALTER TABLE lessons ADD COLUMN section_id INTEGER REFERENCES course_sections(id) ON DELETE SET NULL",
+  "ALTER TABLE lessons ADD COLUMN read_time  INTEGER NOT NULL DEFAULT 0",
+  `CREATE TABLE IF NOT EXISTS lesson_notes (
+    user_id     INTEGER NOT NULL REFERENCES users(id)   ON DELETE CASCADE,
+    lesson_id   INTEGER NOT NULL REFERENCES lessons(id) ON DELETE CASCADE,
+    text        TEXT NOT NULL DEFAULT '',
+    updated_at  TEXT NOT NULL DEFAULT (datetime('now')),
+    PRIMARY KEY (user_id, lesson_id)
+  )`,
+  'CREATE INDEX IF NOT EXISTS idx_notes_user   ON lesson_notes(user_id)',
+  'CREATE INDEX IF NOT EXISTS idx_notes_lesson ON lesson_notes(lesson_id)',
+  `CREATE TABLE IF NOT EXISTS class_courses (
+    class_id    INTEGER NOT NULL REFERENCES classes(id)  ON DELETE CASCADE,
+    course_id   INTEGER NOT NULL REFERENCES courses(id)  ON DELETE CASCADE,
+    deadline    TEXT,
+    assigned_by INTEGER REFERENCES users(id) ON DELETE SET NULL,
+    assigned_at TEXT NOT NULL DEFAULT (datetime('now')),
+    PRIMARY KEY (class_id, course_id)
+  )`,
+  'CREATE INDEX IF NOT EXISTS idx_cc_class  ON class_courses(class_id)',
+  'CREATE INDEX IF NOT EXISTS idx_cc_course ON class_courses(course_id)',
+];
+for (const sql of theoryV2) {
+  try { db.exec(sql); }
+  catch (e) { if (!e.message.includes('duplicate column') && !e.message.includes('already exists')) console.warn('  theoryV2 migration note:', e.message); }
+}
+console.log('✓ Theory v2 tables ready');
+
+/* ── Grading: add grade column to submissions ────────────────────────── */
+try { db.exec('ALTER TABLE submissions ADD COLUMN grade INTEGER'); } catch {}
+console.log('✓ Grading column ready');
+
+/* ── lesson_blocks v2: extend type constraint (callout, video, flashcard) */
+try {
+  const tblDef = db.prepare("SELECT sql FROM sqlite_master WHERE type='table' AND name='lesson_blocks'").get();
+  if (tblDef && !tblDef.sql.includes('callout')) {
+    db.exec('PRAGMA foreign_keys = OFF');
+    db.exec(`CREATE TABLE lesson_blocks_v2 (
+      id          INTEGER PRIMARY KEY AUTOINCREMENT,
+      lesson_id   INTEGER NOT NULL REFERENCES lessons(id) ON DELETE CASCADE,
+      type        TEXT NOT NULL DEFAULT 'text'
+                  CHECK (type IN ('heading','text','formula','image','quiz','sim',
+                                  'table','code','divider','callout','video','flashcard')),
+      order_index INTEGER NOT NULL DEFAULT 0,
+      data        TEXT NOT NULL DEFAULT '{}'
+    )`);
+    db.exec('INSERT INTO lesson_blocks_v2 SELECT * FROM lesson_blocks');
+    db.exec('DROP TABLE lesson_blocks');
+    db.exec('ALTER TABLE lesson_blocks_v2 RENAME TO lesson_blocks');
+    db.exec('CREATE INDEX IF NOT EXISTS idx_blocks_lesson ON lesson_blocks(lesson_id)');
+    db.exec('PRAGMA foreign_keys = ON');
+    console.log('✓ lesson_blocks: extended type constraint (callout/video/flashcard)');
+  }
+} catch (e) {
+  try { db.exec('PRAGMA foreign_keys = ON'); } catch {}
+  console.warn('lesson_blocks migration skipped:', e.message);
+}
+
+/* ── Gamification: XP, Levels, Streaks, Achievements, Daily Goals ────── */
+const gamificationMigrations = [
+  "ALTER TABLE users ADD COLUMN xp INTEGER NOT NULL DEFAULT 0",
+  "ALTER TABLE users ADD COLUMN level INTEGER NOT NULL DEFAULT 1",
+  "ALTER TABLE users ADD COLUMN streak_current INTEGER NOT NULL DEFAULT 0",
+  "ALTER TABLE users ADD COLUMN streak_best INTEGER NOT NULL DEFAULT 0",
+  "ALTER TABLE users ADD COLUMN streak_date TEXT",
+  `CREATE TABLE IF NOT EXISTS xp_log (
+    id         INTEGER PRIMARY KEY AUTOINCREMENT,
+    user_id    INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    amount     INTEGER NOT NULL,
+    reason     TEXT NOT NULL,
+    created_at TEXT NOT NULL DEFAULT (datetime('now'))
+  )`,
+  'CREATE INDEX IF NOT EXISTS idx_xp_log_user ON xp_log(user_id)',
+  'CREATE INDEX IF NOT EXISTS idx_xp_log_date ON xp_log(created_at)',
+  `CREATE TABLE IF NOT EXISTS achievements (
+    id          INTEGER PRIMARY KEY AUTOINCREMENT,
+    slug        TEXT UNIQUE NOT NULL,
+    title       TEXT NOT NULL,
+    icon        TEXT NOT NULL DEFAULT 'trophy',
+    category    TEXT NOT NULL DEFAULT 'general',
+    description TEXT
+  )`,
+  `CREATE TABLE IF NOT EXISTS user_achievements (
+    id             INTEGER PRIMARY KEY AUTOINCREMENT,
+    user_id        INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    achievement_id INTEGER NOT NULL REFERENCES achievements(id) ON DELETE CASCADE,
+    unlocked_at    TEXT NOT NULL DEFAULT (datetime('now')),
+    UNIQUE (user_id, achievement_id)
+  )`,
+  'CREATE INDEX IF NOT EXISTS idx_user_achievements_user ON user_achievements(user_id)',
+  `CREATE TABLE IF NOT EXISTS daily_goals (
+    id           INTEGER PRIMARY KEY AUTOINCREMENT,
+    user_id      INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    date         TEXT NOT NULL,
+    tests_target INTEGER NOT NULL DEFAULT 3,
+    tests_done   INTEGER NOT NULL DEFAULT 0,
+    xp_target    INTEGER NOT NULL DEFAULT 200,
+    xp_earned    INTEGER NOT NULL DEFAULT 0,
+    UNIQUE (user_id, date)
+  )`,
+  'CREATE INDEX IF NOT EXISTS idx_daily_goals_user ON daily_goals(user_id, date)',
+  `CREATE TABLE IF NOT EXISTS challenges (
+    id          INTEGER PRIMARY KEY AUTOINCREMENT,
+    user_id     INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    week        TEXT NOT NULL,
+    title       TEXT NOT NULL,
+    description TEXT,
+    type        TEXT NOT NULL DEFAULT 'tests',
+    target      INTEGER NOT NULL DEFAULT 3,
+    progress    INTEGER NOT NULL DEFAULT 0,
+    xp_reward   INTEGER NOT NULL DEFAULT 100,
+    subject_slug TEXT,
+    topic_id    INTEGER,
+    completed   INTEGER NOT NULL DEFAULT 0,
+    claimed     INTEGER NOT NULL DEFAULT 0,
+    UNIQUE(user_id, week, title)
+  )`,
+  'CREATE INDEX IF NOT EXISTS idx_challenges_user_week ON challenges(user_id, week)',
+];
+for (const sql of gamificationMigrations) {
+  try { db.exec(sql); }
+  catch (e) { if (!e.message.includes('duplicate column') && !e.message.includes('already exists')) console.warn('  gamification migration note:', e.message); }
+}
+
+// Add goal_tier column to users if missing
+try { db.exec("ALTER TABLE users ADD COLUMN goal_tier TEXT DEFAULT 'medium'"); } catch {}
+// Add avatar_frame column to users if missing
+try { db.exec("ALTER TABLE users ADD COLUMN avatar_frame TEXT DEFAULT 'default'"); } catch {}
+
+// Seed achievements
+try {
+  const { seedAchievements } = require('../controllers/gamificationController');
+  seedAchievements();
+} catch (e) { console.warn('  seedAchievements note:', e.message); }
+console.log('✓ Gamification tables ready');
+
+/* ── lesson_blocks v3: add interactive types (matching, fill-blank, ordering) */
+try {
+  const tblDef = db.prepare("SELECT sql FROM sqlite_master WHERE type='table' AND name='lesson_blocks'").get();
+  if (tblDef && !tblDef.sql.includes('matching')) {
+    db.exec('PRAGMA foreign_keys = OFF');
+    db.exec(`CREATE TABLE lesson_blocks_v3 (
+      id          INTEGER PRIMARY KEY AUTOINCREMENT,
+      lesson_id   INTEGER NOT NULL REFERENCES lessons(id) ON DELETE CASCADE,
+      type        TEXT NOT NULL DEFAULT 'text'
+                  CHECK (type IN ('heading','text','formula','image','quiz','sim',
+                                  'table','code','divider','callout','video','flashcard',
+                                  'matching','fill-blank','ordering')),
+      order_index INTEGER NOT NULL DEFAULT 0,
+      data        TEXT NOT NULL DEFAULT '{}'
+    )`);
+    db.exec('INSERT INTO lesson_blocks_v3 SELECT * FROM lesson_blocks');
+    db.exec('DROP TABLE lesson_blocks');
+    db.exec('ALTER TABLE lesson_blocks_v3 RENAME TO lesson_blocks');
+    db.exec('CREATE INDEX IF NOT EXISTS idx_blocks_lesson ON lesson_blocks(lesson_id)');
+    db.exec('PRAGMA foreign_keys = ON');
+    console.log('✓ lesson_blocks v3: interactive types added');
+  }
+} catch (e) {
+  try { db.exec('PRAGMA foreign_keys = ON'); } catch {}
+  console.warn('lesson_blocks v3 migration skipped:', e.message);
+}
+
+/* ── lesson_blocks v4: full type set (accordion, timeline, diagram, alert, columns, geogebra, audio) */
+try {
+  const tblDef4 = db.prepare("SELECT sql FROM sqlite_master WHERE type='table' AND name='lesson_blocks'").get();
+  if (tblDef4 && !tblDef4.sql.includes('accordion')) {
+    db.exec('PRAGMA foreign_keys = OFF');
+    db.exec(`CREATE TABLE lesson_blocks_v4 (
+      id          INTEGER PRIMARY KEY AUTOINCREMENT,
+      lesson_id   INTEGER NOT NULL REFERENCES lessons(id) ON DELETE CASCADE,
+      type        TEXT NOT NULL DEFAULT 'text'
+                  CHECK (type IN ('heading','text','formula','image','quiz','sim',
+                                  'table','code','divider','callout','video','flashcard',
+                                  'matching','fill-blank','ordering',
+                                  'accordion','timeline','diagram','geogebra','audio','columns','alert')),
+      order_index INTEGER NOT NULL DEFAULT 0,
+      data        TEXT NOT NULL DEFAULT '{}'
+    )`);
+    db.exec('INSERT INTO lesson_blocks_v4 SELECT * FROM lesson_blocks');
+    db.exec('DROP TABLE lesson_blocks');
+    db.exec('ALTER TABLE lesson_blocks_v4 RENAME TO lesson_blocks');
+    db.exec('CREATE INDEX IF NOT EXISTS idx_blocks_lesson ON lesson_blocks(lesson_id)');
+    db.exec('PRAGMA foreign_keys = ON');
+    console.log('✓ lesson_blocks v4: rich content types added');
+  }
+} catch (e) {
+  try { db.exec('PRAGMA foreign_keys = ON'); } catch {}
+  console.warn('lesson_blocks v4 migration skipped:', e.message);
+}
+
+/* ── Templates: course & lesson templates ──────────────────────────── */
+const templateMigrations = [
+  `CREATE TABLE IF NOT EXISTS course_templates (
+    id          INTEGER PRIMARY KEY AUTOINCREMENT,
+    title       TEXT NOT NULL,
+    description TEXT,
+    category    TEXT NOT NULL DEFAULT 'general',
+    subject_slug TEXT,
+    structure   TEXT NOT NULL DEFAULT '{}',
+    is_public   INTEGER NOT NULL DEFAULT 0,
+    created_by  INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    created_at  TEXT NOT NULL DEFAULT (datetime('now'))
+  )`,
+  'CREATE INDEX IF NOT EXISTS idx_ctpl_creator ON course_templates(created_by)',
+  'CREATE INDEX IF NOT EXISTS idx_ctpl_public  ON course_templates(is_public)',
+  `CREATE TABLE IF NOT EXISTS lesson_templates (
+    id          INTEGER PRIMARY KEY AUTOINCREMENT,
+    title       TEXT NOT NULL,
+    category    TEXT NOT NULL DEFAULT 'general',
+    subject_slug TEXT,
+    blocks      TEXT NOT NULL DEFAULT '[]',
+    is_public   INTEGER NOT NULL DEFAULT 0,
+    created_by  INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    created_at  TEXT NOT NULL DEFAULT (datetime('now'))
+  )`,
+  'CREATE INDEX IF NOT EXISTS idx_ltpl_creator ON lesson_templates(created_by)',
+  'CREATE INDEX IF NOT EXISTS idx_ltpl_public  ON lesson_templates(is_public)',
+];
+for (const sql of templateMigrations) {
+  try { db.exec(sql); }
+  catch (e) { if (!e.message.includes('duplicate column') && !e.message.includes('already exists')) console.warn('  template migration note:', e.message); }
+}
+console.log('✓ Templates tables ready');
+
+/* ── Shop: coins, items, purchases ─────────────────────────────────── */
+try { db.exec("ALTER TABLE users ADD COLUMN coins INTEGER NOT NULL DEFAULT 0"); } catch {}
+const shopMigrations = [
+  `CREATE TABLE IF NOT EXISTS shop_items (
+    id          INTEGER PRIMARY KEY AUTOINCREMENT,
+    name        TEXT NOT NULL,
+    description TEXT,
+    type        TEXT NOT NULL DEFAULT 'frame'
+                CHECK (type IN ('frame','theme','title','effect')),
+    category    TEXT NOT NULL DEFAULT 'cosmetic',
+    price       INTEGER NOT NULL DEFAULT 100,
+    data        TEXT NOT NULL DEFAULT '{}',
+    icon        TEXT NOT NULL DEFAULT 'star',
+    is_active   INTEGER NOT NULL DEFAULT 1,
+    created_at  TEXT NOT NULL DEFAULT (datetime('now'))
+  )`,
+  `CREATE TABLE IF NOT EXISTS user_purchases (
+    id          INTEGER PRIMARY KEY AUTOINCREMENT,
+    user_id     INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    item_id     INTEGER NOT NULL REFERENCES shop_items(id) ON DELETE CASCADE,
+    purchased_at TEXT NOT NULL DEFAULT (datetime('now')),
+    UNIQUE(user_id, item_id)
+  )`,
+  'CREATE INDEX IF NOT EXISTS idx_purchases_user ON user_purchases(user_id)',
+];
+for (const sql of shopMigrations) {
+  try { db.exec(sql); }
+  catch (e) { if (!e.message.includes('duplicate column') && !e.message.includes('already exists')) console.warn('  shop migration note:', e.message); }
+}
+
+// Seed default shop items
+try {
+  const cnt = db.prepare('SELECT COUNT(*) as c FROM shop_items').get().c;
+  if (cnt === 0) {
+    const ins = db.prepare('INSERT INTO shop_items (name, description, type, category, price, data, icon) VALUES (?,?,?,?,?,?,?)');
+    const items = [
+      ['Неоновая рамка',    'Яркая неоновая рамка профиля',           'frame',  'cosmetic', 200, '{"css":"box-shadow:0 0 15px #0ff,inset 0 0 15px #0ff;border-color:#0ff"}', 'sparkles'],
+      ['Огненная рамка',    'Рамка с эффектом пламени',               'frame',  'cosmetic', 300, '{"css":"box-shadow:0 0 15px #f60,inset 0 0 10px #f60;border-color:#f60"}', 'flame'],
+      ['Радужная рамка',    'Переливающаяся радужная рамка',           'frame',  'cosmetic', 500, '{"css":"border-image:linear-gradient(135deg,#f06,#0cf,#0f6,#ff0,#f06) 1;box-shadow:0 0 12px rgba(255,0,100,.4)"}', 'star'],
+      ['Титул: Знаток',     'Отображается под именем в профиле',       'title',  'cosmetic', 150, '{"text":"Знаток","color":"#4CC9F0"}', 'crown'],
+      ['Титул: Гений',      'Отображается под именем в профиле',       'title',  'cosmetic', 400, '{"text":"Гений","color":"#FFD166"}', 'brain'],
+      ['Титул: Легенда',    'Отображается под именем в профиле',       'title',  'cosmetic', 800, '{"text":"Легенда","color":"#EF476F"}', 'trophy'],
+      ['Эффект: Искры',     'Частицы-искры вокруг аватара',            'effect', 'cosmetic', 350, '{"effect":"sparkle"}', 'sparkles'],
+      ['Эффект: Пульсация', 'Пульсирующее свечение аватара',           'effect', 'cosmetic', 200, '{"effect":"pulse"}', 'zap'],
+      ['Эффект: Снежинки',  'Снежинки вокруг аватара',                 'effect', 'cosmetic', 300, '{"effect":"snow"}', 'star'],
+    ];
+    for (const it of items) ins.run(...it);
+    console.log('✓ Shop items seeded');
+  }
+} catch (e) { console.warn('Shop seed skipped:', e.message); }
+// Active cosmetics columns
+try { db.exec("ALTER TABLE users ADD COLUMN active_title TEXT DEFAULT NULL"); } catch {}
+try { db.exec("ALTER TABLE users ADD COLUMN active_theme TEXT DEFAULT NULL"); } catch {}
+try { db.exec("ALTER TABLE users ADD COLUMN active_effect TEXT DEFAULT NULL"); } catch {}
+console.log('✓ Shop tables ready');
+
+/* ── Token version for JWT invalidation ── */
+try { db.exec("ALTER TABLE users ADD COLUMN token_version INTEGER NOT NULL DEFAULT 0"); } catch {}
+console.log('✓ Token version column ready');
+
+/* ── Lab experiments counter ── */
+try { db.exec("ALTER TABLE users ADD COLUMN lab_experiments INTEGER NOT NULL DEFAULT 0"); } catch {}
+try { db.exec("ALTER TABLE users ADD COLUMN lab_reactions INTEGER NOT NULL DEFAULT 0"); } catch {}
+console.log('✓ Lab tracking columns ready');
+
+/* ── Lesson comments ─────────────────────────────────────────────────── */
+const commentMigrations = [
+  `CREATE TABLE IF NOT EXISTS lesson_comments (
+    id         INTEGER PRIMARY KEY AUTOINCREMENT,
+    lesson_id  INTEGER NOT NULL REFERENCES lessons(id) ON DELETE CASCADE,
+    user_id    INTEGER NOT NULL REFERENCES users(id)   ON DELETE CASCADE,
+    parent_id  INTEGER REFERENCES lesson_comments(id)  ON DELETE CASCADE,
+    text       TEXT NOT NULL,
+    created_at TEXT NOT NULL DEFAULT (datetime('now'))
+  )`,
+  'CREATE INDEX IF NOT EXISTS idx_lcomments_lesson ON lesson_comments(lesson_id)',
+  'CREATE INDEX IF NOT EXISTS idx_lcomments_user   ON lesson_comments(user_id)',
+  'CREATE INDEX IF NOT EXISTS idx_lcomments_parent ON lesson_comments(parent_id)',
+];
+for (const sql of commentMigrations) {
+  try { db.exec(sql); }
+  catch (e) { if (!e.message.includes('duplicate column') && !e.message.includes('already exists')) console.warn('  comment migration note:', e.message); }
+}
+console.log('✓ Lesson comments table ready');
+
+/* ── Bookmarks ───────────────────────────────────────────────────────── */
+const bookmarkMigrations = [
+  `CREATE TABLE IF NOT EXISTS bookmarks (
+    id          INTEGER PRIMARY KEY AUTOINCREMENT,
+    user_id     INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    entity_type TEXT NOT NULL CHECK (entity_type IN ('lesson','course','file','question')),
+    entity_id   INTEGER NOT NULL,
+    created_at  TEXT NOT NULL DEFAULT (datetime('now')),
+    UNIQUE (user_id, entity_type, entity_id)
+  )`,
+  'CREATE INDEX IF NOT EXISTS idx_bookmarks_user ON bookmarks(user_id)',
+];
+for (const sql of bookmarkMigrations) {
+  try { db.exec(sql); }
+  catch (e) { if (!e.message.includes('duplicate column') && !e.message.includes('already exists')) console.warn('  bookmark migration note:', e.message); }
+}
+console.log('✓ Bookmarks table ready');
+
+/* ── Submissions v2: expand status CHECK + add reviewed_at ────────────── */
+try {
+  const tblDef = db.prepare("SELECT sql FROM sqlite_master WHERE type='table' AND name='submissions'").get();
+  if (tblDef && !tblDef.sql.includes('revision')) {
+    db.exec('PRAGMA foreign_keys = OFF');
+    db.exec(`CREATE TABLE submissions_v2 (
+      id            INTEGER PRIMARY KEY AUTOINCREMENT,
+      class_id      INTEGER NOT NULL REFERENCES classes(id) ON DELETE CASCADE,
+      assignment_id INTEGER REFERENCES assignments(id) ON DELETE SET NULL,
+      student_id    INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+      original_name TEXT NOT NULL,
+      stored_name   TEXT NOT NULL UNIQUE,
+      mimetype      TEXT,
+      size          INTEGER,
+      message       TEXT,
+      status        TEXT NOT NULL DEFAULT 'new' CHECK (status IN ('new','reviewed','revision','resubmitted','accepted')),
+      teacher_note  TEXT,
+      grade         INTEGER,
+      reviewed_at   TEXT,
+      submitted_at  TEXT NOT NULL DEFAULT (datetime('now'))
+    )`);
+    db.exec(`INSERT INTO submissions_v2 (id,class_id,assignment_id,student_id,original_name,stored_name,mimetype,size,message,status,teacher_note,grade,submitted_at)
+             SELECT id,class_id,assignment_id,student_id,original_name,stored_name,mimetype,size,message,status,teacher_note,grade,submitted_at FROM submissions`);
+    db.exec('DROP TABLE submissions');
+    db.exec('ALTER TABLE submissions_v2 RENAME TO submissions');
+    db.exec('CREATE INDEX IF NOT EXISTS idx_submissions_class      ON submissions(class_id)');
+    db.exec('CREATE INDEX IF NOT EXISTS idx_submissions_student    ON submissions(student_id)');
+    db.exec('CREATE INDEX IF NOT EXISTS idx_submissions_assignment ON submissions(assignment_id)');
+    db.exec('PRAGMA foreign_keys = ON');
+    console.log('✓ Submissions v2: expanded statuses + reviewed_at');
+  }
+} catch (e) {
+  try { db.exec('PRAGMA foreign_keys = ON'); } catch {}
+  console.warn('Submissions v2 migration skipped:', e.message);
+}
+
+/* ── Flashcards ─────────────────────────────────────────────────────────── */
+db.exec(`
+  CREATE TABLE IF NOT EXISTS flashcard_decks (
+    id          INTEGER PRIMARY KEY AUTOINCREMENT,
+    user_id     INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    title       TEXT NOT NULL,
+    description TEXT NOT NULL DEFAULT '',
+    color       TEXT NOT NULL DEFAULT '#9B5DE5',
+    created_at  TEXT NOT NULL DEFAULT (datetime('now'))
+  );
+  CREATE TABLE IF NOT EXISTS flashcard_cards (
+    id         INTEGER PRIMARY KEY AUTOINCREMENT,
+    deck_id    INTEGER NOT NULL REFERENCES flashcard_decks(id) ON DELETE CASCADE,
+    front      TEXT NOT NULL DEFAULT '',
+    back       TEXT NOT NULL DEFAULT '',
+    order_idx  INTEGER NOT NULL DEFAULT 0,
+    created_at TEXT NOT NULL DEFAULT (datetime('now'))
+  );
+  CREATE TABLE IF NOT EXISTS flashcard_reviews (
+    id            INTEGER PRIMARY KEY AUTOINCREMENT,
+    user_id       INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    card_id       INTEGER NOT NULL REFERENCES flashcard_cards(id) ON DELETE CASCADE,
+    ease_factor   REAL NOT NULL DEFAULT 2.5,
+    interval_days INTEGER NOT NULL DEFAULT 1,
+    repetitions   INTEGER NOT NULL DEFAULT 0,
+    due_at        TEXT NOT NULL DEFAULT (datetime('now')),
+    last_reviewed TEXT,
+    UNIQUE(user_id, card_id)
+  );
+`);
+
+/* ── Performance indexes ─────────────────────────────────────────────────── */
+try { db.exec('CREATE INDEX IF NOT EXISTS idx_answers_sq           ON user_answers(session_id, question_id)'); } catch {}
+try { db.exec('CREATE INDEX IF NOT EXISTS idx_sq_session           ON session_questions(session_id)'); } catch {}
+try { db.exec('CREATE INDEX IF NOT EXISTS idx_sessions_user_status ON test_sessions(user_id, status)'); } catch {}
+console.log('✓ Performance indexes ready');
+
+/* ── Test attempts: max_attempts on assignments ──────────────────────────── */
+try { db.exec('ALTER TABLE assignments ADD COLUMN max_attempts INTEGER NOT NULL DEFAULT 0'); } catch {}
+console.log('✓ max_attempts column ready');
+
+/* ── assignment_sessions v2: allow multiple attempts (remove UNIQUE) ──────── */
+try {
+  const cols = db.prepare('PRAGMA table_info(assignment_sessions)').all();
+  const hasAttemptNum = cols.some(c => c.name === 'attempt_num');
+  if (!hasAttemptNum) {
+    db.exec('PRAGMA foreign_keys = OFF');
+    db.exec(`
+      CREATE TABLE assignment_sessions_v2 (
+        id            INTEGER PRIMARY KEY AUTOINCREMENT,
+        assignment_id INTEGER NOT NULL REFERENCES assignments(id) ON DELETE CASCADE,
+        user_id       INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+        session_id    INTEGER REFERENCES test_sessions(id) ON DELETE SET NULL,
+        attempt_num   INTEGER NOT NULL DEFAULT 1,
+        first_seen_at TEXT
+      )
+    `);
+    db.exec(`INSERT INTO assignment_sessions_v2 (id, assignment_id, user_id, session_id, first_seen_at)
+             SELECT id, assignment_id, user_id, session_id, first_seen_at FROM assignment_sessions`);
+    db.exec('DROP TABLE assignment_sessions');
+    db.exec('ALTER TABLE assignment_sessions_v2 RENAME TO assignment_sessions');
+    db.exec('CREATE INDEX IF NOT EXISTS idx_assign_sess_assign ON assignment_sessions(assignment_id)');
+    db.exec('CREATE INDEX IF NOT EXISTS idx_assign_sess_user   ON assignment_sessions(user_id)');
+    db.exec('PRAGMA foreign_keys = ON');
+    console.log('✓ assignment_sessions v2: multiple attempts enabled');
+  }
+} catch (e) {
+  try { db.exec('PRAGMA foreign_keys = ON'); } catch {}
+  console.warn('assignment_sessions v2 migration skipped:', e.message);
+}
+
+/* ── App settings ────────────────────────────────────────────────────────── */
+db.exec(`
+  CREATE TABLE IF NOT EXISTS app_settings (
+    key   TEXT PRIMARY KEY,
+    value TEXT NOT NULL DEFAULT ''
+  );
+  INSERT OR IGNORE INTO app_settings (key, value) VALUES
+    ('sim_module_disabled', '0'),
+    ('sim_disabled_ids',    '[]'),
+    ('feature_crossword_enabled',     '1'),
+    ('feature_hangman_enabled',       '1'),
+    ('feature_pet_enabled',           '1'),
+    ('feature_red_book_enabled',      '1'),
+    ('feature_collection_enabled',    '1'),
+    ('feature_flashcards_enabled',    '1'),
+    ('feature_knowledge_map_enabled', '1'),
+    ('feature_board_enabled',         '1'),
+    ('feature_biochem_enabled',       '1'),
+    ('feature_live_quiz_enabled',     '1');
+`);
+
+/* ── Performance indexes ───────────────────────────────────────────────── */
+db.exec(`
+  CREATE INDEX IF NOT EXISTS idx_test_sessions_status     ON test_sessions(status);
+  CREATE INDEX IF NOT EXISTS idx_test_sessions_user_status ON test_sessions(user_id, status);
+  CREATE INDEX IF NOT EXISTS idx_assignments_deadline      ON assignments(deadline);
+  CREATE INDEX IF NOT EXISTS idx_xp_log_user_created       ON xp_log(user_id, created_at);
+`);
+console.log('✓ Performance indexes ready');
+
+/* ── User ban flag ─────────────────────────────────────────────────────── */
+try { db.exec("ALTER TABLE users ADD COLUMN is_banned INTEGER NOT NULL DEFAULT 0"); } catch {}
+console.log('✓ User ban column ready');
+
+/* ── Class cover icon ─────────────────────────────────────────────────── */
+try { db.exec("ALTER TABLE classes ADD COLUMN cover_emoji TEXT NOT NULL DEFAULT ''"); } catch {}
+console.log('✓ Class cover_emoji column ready');
+
+/* ── Live Quiz ──────────────────────────────────────────────────────────── */
+db.exec(`
+  CREATE TABLE IF NOT EXISTS live_sessions (
+    id          INTEGER PRIMARY KEY AUTOINCREMENT,
+    class_id    INTEGER NOT NULL REFERENCES classes(id)    ON DELETE CASCADE,
+    teacher_id  INTEGER NOT NULL REFERENCES users(id),
+    question_id INTEGER          REFERENCES questions(id),
+    status      TEXT    NOT NULL DEFAULT 'waiting',
+    show_results INTEGER NOT NULL DEFAULT 0,
+    created_at  TEXT    NOT NULL DEFAULT (datetime('now')),
+    ended_at    TEXT
+  );
+  CREATE TABLE IF NOT EXISTS live_answers (
+    id               INTEGER PRIMARY KEY AUTOINCREMENT,
+    live_session_id  INTEGER NOT NULL REFERENCES live_sessions(id) ON DELETE CASCADE,
+    user_id          INTEGER NOT NULL REFERENCES users(id),
+    option_id        INTEGER REFERENCES options(id),
+    answer_text      TEXT,
+    is_correct       INTEGER,
+    answered_at      TEXT NOT NULL DEFAULT (datetime('now')),
+    UNIQUE(live_session_id, user_id)
+  );
+  CREATE INDEX IF NOT EXISTS idx_live_sessions_class  ON live_sessions(class_id, status);
+  CREATE INDEX IF NOT EXISTS idx_live_answers_session ON live_answers(live_session_id);
+`);
+console.log('✓ Live quiz tables ready');
+
+/* ── Submission audit log ──────────────────────────────────────────────── */
+db.exec(`
+  CREATE TABLE IF NOT EXISTS submission_log (
+    id              INTEGER PRIMARY KEY AUTOINCREMENT,
+    submission_id   INTEGER NOT NULL,
+    class_id        INTEGER,
+    assignment_id   INTEGER,
+    student_id      INTEGER NOT NULL,
+    student_name    TEXT,
+    original_name   TEXT,
+    status          TEXT,
+    grade           INTEGER,
+    teacher_note    TEXT,
+    submitted_at    TEXT,
+    action          TEXT NOT NULL DEFAULT 'deleted',
+    deleted_by      INTEGER NOT NULL,
+    deleted_by_role TEXT,
+    deleted_at      TEXT NOT NULL DEFAULT (datetime('now'))
+  )
+`);
+console.log('✓ Submission audit log ready');
+
+/* ── Красная книга РБ ───────────────────────────────────────────────────── */
+db.exec(`
+  CREATE TABLE IF NOT EXISTS rb_groups (
+    id       INTEGER PRIMARY KEY AUTOINCREMENT,
+    name_ru  TEXT NOT NULL,
+    name_lat TEXT NOT NULL DEFAULT '',
+    icon     TEXT NOT NULL DEFAULT '🌿',
+    color    TEXT NOT NULL DEFAULT '#16a34a'
+  );
+
+  CREATE TABLE IF NOT EXISTS rb_habitats (
+    id          INTEGER PRIMARY KEY AUTOINCREMENT,
+    name        TEXT NOT NULL,
+    type        TEXT NOT NULL DEFAULT 'forest',
+    description TEXT NOT NULL DEFAULT '',
+    sound_file  TEXT NOT NULL DEFAULT ''
+  );
+
+  CREATE TABLE IF NOT EXISTS rb_species (
+    id                  INTEGER PRIMARY KEY AUTOINCREMENT,
+    group_id            INTEGER NOT NULL REFERENCES rb_groups(id),
+    habitat_id          INTEGER REFERENCES rb_habitats(id),
+    name_ru             TEXT NOT NULL,
+    name_be             TEXT NOT NULL DEFAULT '',
+    name_lat            TEXT NOT NULL DEFAULT '',
+    category            TEXT NOT NULL DEFAULT 'VU'
+                        CHECK (category IN ('CR','EN','VU','NT','LC')),
+    by_category         TEXT NOT NULL DEFAULT 'III',
+    description         TEXT NOT NULL DEFAULT '',
+    interesting_fact    TEXT NOT NULL DEFAULT '',
+    threats             TEXT NOT NULL DEFAULT '[]',
+    conservation        TEXT NOT NULL DEFAULT '',
+    where_to_see        TEXT NOT NULL DEFAULT '',
+    photo_url           TEXT NOT NULL DEFAULT '',
+    model_type          TEXT NOT NULL DEFAULT 'silhouette'
+                        CHECK (model_type IN ('procedural','silhouette','none')),
+    population_trend    TEXT NOT NULL DEFAULT '[]',
+    biomass_kg          REAL NOT NULL DEFAULT 0,
+    created_at          TEXT NOT NULL DEFAULT (datetime('now'))
+  );
+
+  CREATE TABLE IF NOT EXISTS rb_species_regions (
+    species_id  INTEGER NOT NULL REFERENCES rb_species(id) ON DELETE CASCADE,
+    region_code TEXT NOT NULL
+                CHECK (region_code IN ('brest','vitebsk','gomel','grodno','minsk','mogilev')),
+    PRIMARY KEY (species_id, region_code)
+  );
+
+  CREATE TABLE IF NOT EXISTS rb_food_web (
+    predator_id INTEGER NOT NULL REFERENCES rb_species(id) ON DELETE CASCADE,
+    prey_id     INTEGER NOT NULL REFERENCES rb_species(id) ON DELETE CASCADE,
+    strength    REAL    NOT NULL DEFAULT 0.5,
+    PRIMARY KEY (predator_id, prey_id)
+  );
+
+  CREATE TABLE IF NOT EXISTS rb_population_data (
+    id             INTEGER PRIMARY KEY AUTOINCREMENT,
+    species_id     INTEGER NOT NULL REFERENCES rb_species(id) ON DELETE CASCADE,
+    year           INTEGER NOT NULL,
+    count_estimate INTEGER NOT NULL DEFAULT 0,
+    source         TEXT    NOT NULL DEFAULT ''
+  );
+
+  CREATE TABLE IF NOT EXISTS rb_user_collection (
+    user_id       INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    species_id    INTEGER NOT NULL REFERENCES rb_species(id) ON DELETE CASCADE,
+    unlock_method TEXT    NOT NULL DEFAULT 'explore',
+    notes         TEXT    NOT NULL DEFAULT '',
+    unlocked_at   TEXT    NOT NULL DEFAULT (datetime('now')),
+    PRIMARY KEY (user_id, species_id)
+  );
+
+  CREATE TABLE IF NOT EXISTS rb_quests (
+    id          INTEGER PRIMARY KEY AUTOINCREMENT,
+    title       TEXT    NOT NULL,
+    description TEXT    NOT NULL DEFAULT '',
+    species_ids TEXT    NOT NULL DEFAULT '[]',
+    xp_reward   INTEGER NOT NULL DEFAULT 150,
+    badge_slug  TEXT    NOT NULL DEFAULT ''
+  );
+
+  CREATE TABLE IF NOT EXISTS rb_user_quests (
+    user_id      INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    quest_id     INTEGER NOT NULL REFERENCES rb_quests(id) ON DELETE CASCADE,
+    status       TEXT    NOT NULL DEFAULT 'active'
+                 CHECK (status IN ('active','completed')),
+    progress     TEXT    NOT NULL DEFAULT '{}',
+    completed_at TEXT,
+    PRIMARY KEY (user_id, quest_id)
+  );
+
+  CREATE TABLE IF NOT EXISTS rb_sightings (
+    id                  INTEGER PRIMARY KEY AUTOINCREMENT,
+    user_id             INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    species_id          INTEGER NOT NULL REFERENCES rb_species(id) ON DELETE CASCADE,
+    region_code         TEXT    NOT NULL DEFAULT '',
+    description         TEXT    NOT NULL DEFAULT '',
+    photo_url           TEXT    NOT NULL DEFAULT '',
+    confirmed_by_teacher INTEGER NOT NULL DEFAULT 0,
+    created_at          TEXT    NOT NULL DEFAULT (datetime('now'))
+  );
+
+  CREATE INDEX IF NOT EXISTS idx_rb_species_group    ON rb_species(group_id);
+  CREATE INDEX IF NOT EXISTS idx_rb_species_category ON rb_species(category);
+  CREATE INDEX IF NOT EXISTS idx_rb_collection_user  ON rb_user_collection(user_id);
+  CREATE INDEX IF NOT EXISTS idx_rb_sightings_user   ON rb_sightings(user_id);
+  CREATE INDEX IF NOT EXISTS idx_rb_popdata_species  ON rb_population_data(species_id);
+`);
+console.log('✓ Red Book tables ready');
+
+// Red Book: add season_active column if not exists
+try { db.exec("ALTER TABLE rb_species ADD COLUMN season_active TEXT NOT NULL DEFAULT ''"); } catch {}
+// Red Book: add name_be_short column if not exists
+try { db.exec("ALTER TABLE rb_species ADD COLUMN name_be_short TEXT NOT NULL DEFAULT ''"); } catch {}
+
+// Classes: per-class feature toggles (JSON)
+try { db.exec("ALTER TABLE classes ADD COLUMN features TEXT"); } catch {}
+console.log('✓ Classes features column ready');
+
+/* ── Biochemistry / Molecular Constructor ────────────────────────────────── */
+db.exec(`
+  CREATE TABLE IF NOT EXISTS bio_elements (
+    symbol       TEXT PRIMARY KEY,
+    name_ru      TEXT NOT NULL,
+    valency_max  INTEGER NOT NULL DEFAULT 1,
+    valency_opts TEXT NOT NULL DEFAULT '[1]',
+    color        TEXT NOT NULL DEFAULT '#888888',
+    radius       INTEGER NOT NULL DEFAULT 20,
+    mass         REAL NOT NULL DEFAULT 1.0
+  );
+  CREATE TABLE IF NOT EXISTS bio_molecules (
+    id          INTEGER PRIMARY KEY AUTOINCREMENT,
+    formula     TEXT NOT NULL,
+    name_ru     TEXT NOT NULL,
+    name_lat    TEXT NOT NULL DEFAULT '',
+    category    TEXT NOT NULL DEFAULT 'inorganic',
+    difficulty  INTEGER NOT NULL DEFAULT 1,
+    description TEXT NOT NULL DEFAULT '',
+    atoms_json  TEXT NOT NULL DEFAULT '[]',
+    bonds_json  TEXT NOT NULL DEFAULT '[]',
+    is_library  INTEGER NOT NULL DEFAULT 1,
+    topic_tags  TEXT NOT NULL DEFAULT '[]',
+    created_at  TEXT NOT NULL DEFAULT (datetime('now'))
+  );
+  CREATE TABLE IF NOT EXISTS bio_reactions (
+    id           INTEGER PRIMARY KEY AUTOINCREMENT,
+    equation     TEXT NOT NULL,
+    name_ru      TEXT NOT NULL,
+    type         TEXT NOT NULL DEFAULT 'synthesis',
+    description  TEXT NOT NULL DEFAULT '',
+    reactant_ids TEXT NOT NULL DEFAULT '[]',
+    product_ids  TEXT NOT NULL DEFAULT '[]',
+    conditions   TEXT DEFAULT NULL,
+    energy_kj    REAL DEFAULT NULL,
+    topic_tags   TEXT NOT NULL DEFAULT '[]'
+  );
+  CREATE TABLE IF NOT EXISTS bio_challenges (
+    id             INTEGER PRIMARY KEY AUTOINCREMENT,
+    title          TEXT NOT NULL,
+    description    TEXT NOT NULL DEFAULT '',
+    type           TEXT NOT NULL DEFAULT 'build',
+    target_formula TEXT NOT NULL DEFAULT '',
+    hint           TEXT DEFAULT NULL,
+    xp_reward      INTEGER NOT NULL DEFAULT 50,
+    difficulty     INTEGER NOT NULL DEFAULT 1,
+    topic_tag      TEXT DEFAULT NULL,
+    order_n        INTEGER NOT NULL DEFAULT 0
+  );
+  CREATE TABLE IF NOT EXISTS bio_user_molecules (
+    id          INTEGER PRIMARY KEY AUTOINCREMENT,
+    user_id     INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    molecule_id INTEGER REFERENCES bio_molecules(id),
+    name        TEXT DEFAULT NULL,
+    formula     TEXT NOT NULL,
+    atoms_json  TEXT NOT NULL,
+    bonds_json  TEXT NOT NULL,
+    created_at  TEXT NOT NULL DEFAULT (datetime('now'))
+  );
+  CREATE TABLE IF NOT EXISTS bio_user_challenges (
+    user_id      INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    challenge_id INTEGER NOT NULL REFERENCES bio_challenges(id) ON DELETE CASCADE,
+    completed_at TEXT NOT NULL DEFAULT (datetime('now')),
+    PRIMARY KEY (user_id, challenge_id)
+  );
+  CREATE INDEX IF NOT EXISTS idx_bio_mol_formula ON bio_molecules(formula);
+  CREATE INDEX IF NOT EXISTS idx_bio_mol_cat     ON bio_molecules(category);
+  CREATE INDEX IF NOT EXISTS idx_bio_user_mol    ON bio_user_molecules(user_id);
+  CREATE INDEX IF NOT EXISTS idx_bio_user_chal   ON bio_user_challenges(user_id);
+`);
+console.log('✓ Biochemistry tables ready');
+
+/* Seed elements */
+if (!db.prepare('SELECT 1 FROM bio_elements LIMIT 1').get()) {
+  const ins = db.prepare('INSERT INTO bio_elements (symbol,name_ru,valency_max,valency_opts,color,radius,mass) VALUES (?,?,?,?,?,?,?)');
+  [
+    ['H',  'Водород',  1, '[1]',      '#D4D4D4', 18, 1.008],
+    ['C',  'Углерод',  4, '[4]',      '#555555', 20, 12.011],
+    ['N',  'Азот',     3, '[3,5]',    '#4060FF', 20, 14.007],
+    ['O',  'Кислород', 2, '[2]',      '#FF2020', 20, 15.999],
+    ['P',  'Фосфор',   5, '[3,5]',    '#FF8000', 22, 30.974],
+    ['S',  'Сера',     6, '[2,4,6]',  '#C8B400', 22, 32.060],
+    ['Cl', 'Хлор',     1, '[1]',      '#00A860', 22, 35.450],
+    ['Na', 'Натрий',   1, '[1]',      '#8040C0', 22, 22.990],
+    ['Ca', 'Кальций',  2, '[2]',      '#707070', 22, 40.078],
+    ['Mg', 'Магний',   2, '[2]',      '#1E8A1E', 22, 24.305],
+    ['Fe', 'Железо',   3, '[2,3]',    '#B03010', 22, 55.845],
+  ].forEach(r => ins.run(...r));
+  console.log('✓ Bio elements seeded');
+}
+
+/* Seed molecules */
+if (!db.prepare('SELECT 1 FROM bio_molecules LIMIT 1').get()) {
+  const ins = db.prepare(`INSERT INTO bio_molecules
+    (formula,name_ru,name_lat,category,difficulty,description,atoms_json,bonds_json,topic_tags)
+    VALUES (?,?,?,?,?,?,?,?,?)`);
+  const M = (f,r,l,cat,d,desc,a,b,t) =>
+    ins.run(f,r,l,cat,d,desc,JSON.stringify(a),JSON.stringify(b),JSON.stringify(t));
+
+  // ── Неорганика ──
+  M('H2O','Вода','Water','inorganic',1,'Основа жизни. Полярная молекула с угловой геометрией (104.5°). Универсальный растворитель.',
+    [{id:1,s:'O',x:0,y:0},{id:2,s:'H',x:-52,y:40},{id:3,s:'H',x:52,y:40}],
+    [{f:2,t:1,o:1},{f:3,t:1,o:1}],['вода','полярность','растворитель']);
+
+  M('CO2','Углекислый газ','Carbon dioxide','inorganic',1,'Продукт клеточного дыхания. Субстрат фотосинтеза. Линейная молекула.',
+    [{id:1,s:'C',x:0,y:0},{id:2,s:'O',x:-65,y:0},{id:3,s:'O',x:65,y:0}],
+    [{f:2,t:1,o:2},{f:3,t:1,o:2}],['фотосинтез','дыхание']);
+
+  M('O2','Молекулярный кислород','Oxygen','inorganic',1,'Продукт фотосинтеза. Необходим для аэробного дыхания. Двойная связь O=O.',
+    [{id:1,s:'O',x:-30,y:0},{id:2,s:'O',x:30,y:0}],
+    [{f:1,t:2,o:2}],['дыхание','фотосинтез']);
+
+  M('N2','Молекулярный азот','Nitrogen','inorganic',1,'78% атмосферы. Тройная связь N≡N — очень прочная. Химически инертен.',
+    [{id:1,s:'N',x:-30,y:0},{id:2,s:'N',x:30,y:0}],
+    [{f:1,t:2,o:3}],['атмосфера','азот']);
+
+  M('H2','Молекулярный водород','Hydrogen','inorganic',1,'Самый лёгкий газ. Восстановитель. Перспективное топливо будущего.',
+    [{id:1,s:'H',x:-25,y:0},{id:2,s:'H',x:25,y:0}],
+    [{f:1,t:2,o:1}],['водород']);
+
+  M('NH3','Аммиак','Ammonia','inorganic',1,'Тригонально-пирамидальная молекула. Участвует в синтезе аминокислот. Основание.',
+    [{id:1,s:'N',x:0,y:-5},{id:2,s:'H',x:-52,y:42},{id:3,s:'H',x:52,y:42},{id:4,s:'H',x:0,y:-60}],
+    [{f:2,t:1,o:1},{f:3,t:1,o:1},{f:4,t:1,o:1}],['азот','аминокислоты']);
+
+  M('HCl','Соляная кислота','Hydrochloric acid','inorganic',1,'Компонент желудочного сока. Сильная одноосновная кислота.',
+    [{id:1,s:'H',x:-35,y:0},{id:2,s:'Cl',x:35,y:0}],
+    [{f:1,t:2,o:1}],['кислота','пищеварение']);
+
+  M('H2O2','Пероксид водорода','Hydrogen peroxide','inorganic',2,'Сильный окислитель. Используется для дезинфекции ран.',
+    [{id:1,s:'H',x:-70,y:0},{id:2,s:'O',x:-20,y:0},{id:3,s:'O',x:30,y:0},{id:4,s:'H',x:80,y:0}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:1},{f:3,t:4,o:1}],['перекись','дезинфекция']);
+
+  M('NaOH','Гидроксид натрия','Sodium hydroxide','inorganic',2,'Щёлочь. Мыльный раствор. Нейтрализует кислоты.',
+    [{id:1,s:'Na',x:-55,y:0},{id:2,s:'O',x:10,y:0},{id:3,s:'H',x:60,y:0}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:1}],['основание','щёлочь']);
+
+  M('CO','Угарный газ','Carbon monoxide','inorganic',2,'Тройная связь C≡O. Смертельно токсичен. Связывается с гемоглобином.',
+    [{id:1,s:'C',x:-25,y:0},{id:2,s:'O',x:35,y:0}],
+    [{f:1,t:2,o:3}],['токсин','гемоглобин']);
+
+  // ── Органика ──
+  M('CH4','Метан','Methane','organic',1,'Простейший алкан. Болотный газ. Тетраэдрическая геометрия.',
+    [{id:1,s:'C',x:0,y:0},{id:2,s:'H',x:0,y:-58},{id:3,s:'H',x:55,y:30},{id:4,s:'H',x:-55,y:30},{id:5,s:'H',x:0,y:58}],
+    [{f:2,t:1,o:1},{f:3,t:1,o:1},{f:4,t:1,o:1},{f:5,t:1,o:1}],['алканы','органика']);
+
+  M('C2H4','Этилен','Ethylene','organic',2,'Алкен. Двойная связь C=C. Фитогормон — ускоряет созревание плодов.',
+    [{id:1,s:'C',x:-35,y:0},{id:2,s:'C',x:35,y:0},{id:3,s:'H',x:-72,y:-44},{id:4,s:'H',x:-72,y:44},{id:5,s:'H',x:72,y:-44},{id:6,s:'H',x:72,y:44}],
+    [{f:1,t:2,o:2},{f:3,t:1,o:1},{f:4,t:1,o:1},{f:5,t:2,o:1},{f:6,t:2,o:1}],['алкены','фитогормоны']);
+
+  M('C2H2','Ацетилен','Acetylene','organic',2,'Алкин. Тройная связь C≡C. Линейная молекула. Используется в сварке.',
+    [{id:1,s:'C',x:-30,y:0},{id:2,s:'C',x:30,y:0},{id:3,s:'H',x:-80,y:0},{id:4,s:'H',x:80,y:0}],
+    [{f:3,t:1,o:1},{f:1,t:2,o:3},{f:2,t:4,o:1}],['алкины','органика']);
+
+  M('C2H5OH','Этанол','Ethanol','organic',2,'Одноатомный спирт. Продукт брожения глюкозы. Растворитель. Нейротоксин.',
+    [{id:1,s:'C',x:-65,y:0},{id:2,s:'C',x:0,y:0},{id:3,s:'O',x:60,y:0},{id:4,s:'H',x:-65,y:-50},{id:5,s:'H',x:-65,y:50},{id:6,s:'H',x:-115,y:0},{id:7,s:'H',x:0,y:-50},{id:8,s:'H',x:0,y:50},{id:9,s:'H',x:95,y:-28}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:1},{f:4,t:1,o:1},{f:5,t:1,o:1},{f:6,t:1,o:1},{f:7,t:2,o:1},{f:8,t:2,o:1},{f:9,t:3,o:1}],['спирты','брожение','органика']);
+
+  M('CH3COOH','Уксусная кислота','Acetic acid','organic',2,'Карбоновая кислота. Продукт окисления этанола. Компонент уксуса.',
+    [{id:1,s:'C',x:-55,y:0},{id:2,s:'C',x:10,y:0},{id:3,s:'O',x:65,y:-38},{id:4,s:'O',x:65,y:38},{id:5,s:'H',x:-55,y:-50},{id:6,s:'H',x:-55,y:50},{id:7,s:'H',x:-105,y:0},{id:8,s:'H',x:90,y:52}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:2},{f:2,t:4,o:1},{f:5,t:1,o:1},{f:6,t:1,o:1},{f:7,t:1,o:1},{f:8,t:4,o:1}],['карбоновые кислоты','органика']);
+
+  console.log('✓ Bio molecules seeded');
+}
+
+/* Additional molecules (safe for existing DBs — inserts only if name absent) */
+{
+  const addMol = db.prepare(`INSERT INTO bio_molecules
+    (formula,name_ru,name_lat,category,difficulty,description,atoms_json,bonds_json,topic_tags)
+    SELECT ?,?,?,?,?,?,?,?,? WHERE NOT EXISTS (SELECT 1 FROM bio_molecules WHERE name_ru=?)`);
+  const A = (f,r,l,cat,d,desc,a,b,t) =>
+    addMol.run(f,r,l,cat,d,desc,JSON.stringify(a),JSON.stringify(b),JSON.stringify(t),r);
+
+  A('C2H6','Этан','Ethane','organic',1,'Второй алкан. Одинарная C-C связь. Компонент природного газа.',
+    [{id:1,s:'C',x:-40,y:0},{id:2,s:'C',x:40,y:0},{id:3,s:'H',x:-40,y:-55},{id:4,s:'H',x:-40,y:55},{id:5,s:'H',x:-95,y:0},{id:6,s:'H',x:40,y:-55},{id:7,s:'H',x:40,y:55},{id:8,s:'H',x:95,y:0}],
+    [{f:1,t:2,o:1},{f:3,t:1,o:1},{f:4,t:1,o:1},{f:5,t:1,o:1},{f:6,t:2,o:1},{f:7,t:2,o:1},{f:8,t:2,o:1}],['алканы','органика']);
+
+  A('C3H8','Пропан','Propane','organic',2,'Третий алкан. Три атома углерода. Используется как топливо.',
+    [{id:1,s:'C',x:-80,y:0},{id:2,s:'C',x:0,y:0},{id:3,s:'C',x:80,y:0},{id:4,s:'H',x:-80,y:-52},{id:5,s:'H',x:-80,y:52},{id:6,s:'H',x:-130,y:0},{id:7,s:'H',x:0,y:-52},{id:8,s:'H',x:0,y:52},{id:9,s:'H',x:80,y:-52},{id:10,s:'H',x:80,y:52},{id:11,s:'H',x:130,y:0}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:1},{f:4,t:1,o:1},{f:5,t:1,o:1},{f:6,t:1,o:1},{f:7,t:2,o:1},{f:8,t:2,o:1},{f:9,t:3,o:1},{f:10,t:3,o:1},{f:11,t:3,o:1}],['алканы','органика']);
+
+  A('HCHO','Формальдегид','Formaldehyde','organic',2,'Простейший альдегид. Двойная C=O. Консервант (формалин). Токсичен.',
+    [{id:1,s:'C',x:0,y:0},{id:2,s:'H',x:-52,y:-38},{id:3,s:'H',x:-52,y:38},{id:4,s:'O',x:60,y:0}],
+    [{f:2,t:1,o:1},{f:3,t:1,o:1},{f:1,t:4,o:2}],['альдегиды','органика']);
+
+  A('C3H6O','Ацетон','Acetone','organic',2,'Простейший кетон. C=O в центре цепи. Растворитель.',
+    [{id:1,s:'C',x:-65,y:0},{id:2,s:'C',x:0,y:0},{id:3,s:'C',x:65,y:0},{id:4,s:'O',x:0,y:-55},{id:5,s:'H',x:-65,y:-50},{id:6,s:'H',x:-65,y:50},{id:7,s:'H',x:-115,y:0},{id:8,s:'H',x:65,y:-50},{id:9,s:'H',x:65,y:50},{id:10,s:'H',x:115,y:0}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:1},{f:2,t:4,o:2},{f:5,t:1,o:1},{f:6,t:1,o:1},{f:7,t:1,o:1},{f:8,t:3,o:1},{f:9,t:3,o:1},{f:10,t:3,o:1}],['кетоны','органика']);
+
+  A('HCOOH','Муравьиная кислота','Formic acid','organic',2,'Простейшая карбоновая кислота. В яде муравьёв.',
+    [{id:1,s:'H',x:-70,y:0},{id:2,s:'C',x:-10,y:0},{id:3,s:'O',x:45,y:-40},{id:4,s:'O',x:45,y:40},{id:5,s:'H',x:82,y:54}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:2},{f:2,t:4,o:1},{f:4,t:5,o:1}],['карбоновые кислоты','органика']);
+
+  A('C2H5NO2','Глицин','Glycine','aminoacid',3,'Простейшая аминокислота. NH₂-CH₂-COOH. Нейромедиатор.',
+    [{id:1,s:'N',x:-90,y:0},{id:2,s:'C',x:-25,y:0},{id:3,s:'C',x:40,y:0},{id:4,s:'O',x:95,y:-35},{id:5,s:'O',x:95,y:35},{id:6,s:'H',x:-90,y:-48},{id:7,s:'H',x:-90,y:48},{id:8,s:'H',x:-25,y:-50},{id:9,s:'H',x:-25,y:50},{id:10,s:'H',x:118,y:48}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:1},{f:3,t:4,o:2},{f:3,t:5,o:1},{f:6,t:1,o:1},{f:7,t:1,o:1},{f:8,t:2,o:1},{f:9,t:2,o:1},{f:10,t:5,o:1}],['аминокислоты','белки']);
+
+  A('NaCl','Хлорид натрия','Sodium chloride','inorganic',1,'Поваренная соль. Важнейший электролит крови.',
+    [{id:1,s:'Na',x:-35,y:0},{id:2,s:'Cl',x:35,y:0}],
+    [{f:1,t:2,o:1}],['соль','электролиты','кровь']);
+
+  A('H2SO4','Серная кислота','Sulfuric acid','inorganic',3,'Сильная двухосновная кислота. Дегидратирующий агент.',
+    [{id:1,s:'S',x:0,y:0},{id:2,s:'O',x:0,y:-58},{id:3,s:'O',x:0,y:58},{id:4,s:'O',x:-55,y:0},{id:5,s:'O',x:55,y:0},{id:6,s:'H',x:-92,y:0},{id:7,s:'H',x:92,y:0}],
+    [{f:1,t:2,o:2},{f:1,t:3,o:2},{f:1,t:4,o:1},{f:1,t:5,o:1},{f:4,t:6,o:1},{f:5,t:7,o:1}],['кислота','промышленность']);
+
+  A('HNO3','Азотная кислота','Nitric acid','inorganic',3,'Сильная кислота-окислитель. Синтез удобрений.',
+    [{id:1,s:'H',x:-90,y:30},{id:2,s:'O',x:-45,y:30},{id:3,s:'N',x:5,y:0},{id:4,s:'O',x:55,y:-35},{id:5,s:'O',x:55,y:35}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:1},{f:3,t:4,o:2},{f:3,t:5,o:1}],['кислота','азот']);
+
+  console.log('✓ Additional bio molecules checked/added');
+}
+
+/* ── Phase 6: 30+ more molecules ─────────────────────────────────────────── */
+{
+  const P6 = db.prepare(`INSERT INTO bio_molecules
+    (formula,name_ru,name_lat,category,difficulty,description,atoms_json,bonds_json,topic_tags,is_library)
+    SELECT ?,?,?,?,?,?,?,?,?,1 WHERE NOT EXISTS (SELECT 1 FROM bio_molecules WHERE name_ru=?)`);
+  const M = (f,r,l,cat,d,desc,a,b,t) =>
+    P6.run(f,r,l,cat,d,desc,JSON.stringify(a),JSON.stringify(b),JSON.stringify(t),r);
+
+  // ── Неорганика ──
+  M('H2S','Сероводород','Hydrogen sulfide','inorganic',1,
+    'Ядовитый газ с запахом тухлых яиц. Участвует в круговороте серы. Слабая кислота.',
+    [{id:1,s:'S',x:0,y:0},{id:2,s:'H',x:-48,y:36},{id:3,s:'H',x:48,y:36}],
+    [{f:2,t:1,o:1},{f:3,t:1,o:1}],['сера','кислота']);
+
+  M('SO2','Диоксид серы','Sulfur dioxide','inorganic',2,
+    'Бесцветный газ с резким запахом. Образуется при сжигании серосодержащего топлива. Кислотный оксид.',
+    [{id:1,s:'S',x:0,y:0},{id:2,s:'O',x:-65,y:-15},{id:3,s:'O',x:65,y:-15}],
+    [{f:2,t:1,o:2},{f:3,t:1,o:2}],['сера','кислотный оксид','атмосфера']);
+
+  M('SO3','Триоксид серы','Sulfur trioxide','inorganic',2,
+    'Реагирует с водой, образуя серную кислоту H₂SO₄. Тригональная плоская молекула.',
+    [{id:1,s:'S',x:0,y:0},{id:2,s:'O',x:-65,y:38},{id:3,s:'O',x:65,y:38},{id:4,s:'O',x:0,y:-65}],
+    [{f:2,t:1,o:2},{f:3,t:1,o:2},{f:4,t:1,o:2}],['сера','кислота']);
+
+  M('NO','Оксид азота (II)','Nitric oxide','inorganic',2,
+    'Нейромедиатор. Регулирует сосудистый тонус. Важная молекула-сигнал в организме.',
+    [{id:1,s:'N',x:-30,y:0},{id:2,s:'O',x:30,y:0}],
+    [{f:1,t:2,o:2}],['азот','нейромедиатор','сигнал']);
+
+  M('NO2','Диоксид азота','Nitrogen dioxide','inorganic',2,
+    'Бурый ядовитый газ. Компонент смога. Участвует в образовании кислотных дождей.',
+    [{id:1,s:'N',x:0,y:0},{id:2,s:'O',x:-60,y:-20},{id:3,s:'O',x:60,y:-20}],
+    [{f:2,t:1,o:2},{f:3,t:1,o:1}],['азот','смог','атмосфера']);
+
+  M('MgCl2','Хлорид магния','Magnesium chloride','inorganic',1,
+    'Ионное соединение. Содержится в морской воде. Применяется как противогололёдный реагент.',
+    [{id:1,s:'Cl',x:-80,y:0},{id:2,s:'Mg',x:0,y:0},{id:3,s:'Cl',x:80,y:0}],
+    [{f:1,t:2,o:1},{f:3,t:2,o:1}],['магний','ионная связь','соль']);
+
+  M('CaO','Оксид кальция','Calcium oxide','inorganic',1,
+    'Негашёная известь. Щелочной оксид. Реагирует с водой с выделением большого количества тепла.',
+    [{id:1,s:'Ca',x:-35,y:0},{id:2,s:'O',x:35,y:0}],
+    [{f:1,t:2,o:2}],['кальций','оксид','основной оксид']);
+
+  M('FeCl3','Хлорид железа (III)','Iron(III) chloride','inorganic',2,
+    'Качественный реагент на фенол. Катализатор хлорирования ароматических соединений.',
+    [{id:1,s:'Fe',x:0,y:0},{id:2,s:'Cl',x:-70,y:45},{id:3,s:'Cl',x:70,y:45},{id:4,s:'Cl',x:0,y:-75}],
+    [{f:1,t:2,o:1},{f:1,t:3,o:1},{f:1,t:4,o:1}],['железо','катализатор','галоген']);
+
+  M('H3PO4','Фосфорная кислота','Phosphoric acid','inorganic',3,
+    'Трёхосновная кислота. Применяется в производстве удобрений и пищевой промышленности (E338).',
+    [{id:1,s:'P',x:0,y:0},{id:2,s:'O',x:0,y:-65},{id:3,s:'O',x:-60,y:45},{id:4,s:'O',x:60,y:45},{id:5,s:'O',x:75,y:-45},
+     {id:6,s:'H',x:-95,y:70},{id:7,s:'H',x:95,y:70},{id:8,s:'H',x:110,y:-65}],
+    [{f:1,t:2,o:2},{f:1,t:3,o:1},{f:1,t:4,o:1},{f:1,t:5,o:1},
+     {f:6,t:3,o:1},{f:7,t:4,o:1},{f:8,t:5,o:1}],['фосфор','кислота','удобрения']);
+
+  // ── Органика ──
+  M('CH3OH','Метанол','Methanol','organic',2,
+    'Простейший спирт. Ядовит! Вызывает слепоту и смерть. Используется как топливо и растворитель.',
+    [{id:1,s:'C',x:-25,y:0},{id:2,s:'O',x:40,y:0},{id:3,s:'H',x:80,y:0},
+     {id:4,s:'H',x:-58,y:-35},{id:5,s:'H',x:-58,y:35},{id:6,s:'H',x:-58,y:0}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:1},{f:4,t:1,o:1},{f:5,t:1,o:1},{f:6,t:1,o:1}],
+    ['спирт','топливо','токсин']);
+
+  M('C3H7OH','Пропанол','Propanol','organic',2,
+    'Спирт с 3 углеродами. Растворитель. Компонент антисептических средств. CH₃CH₂CH₂OH.',
+    [{id:1,s:'C',x:-65,y:0},{id:2,s:'C',x:0,y:0},{id:3,s:'C',x:65,y:0},{id:4,s:'O',x:110,y:0},{id:5,s:'H',x:150,y:0},
+     {id:6,s:'H',x:-100,y:-35},{id:7,s:'H',x:-100,y:35},{id:8,s:'H',x:-100,y:0},
+     {id:9,s:'H',x:0,y:-45},{id:10,s:'H',x:0,y:45},
+     {id:11,s:'H',x:65,y:-45},{id:12,s:'H',x:65,y:45}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:1},{f:3,t:4,o:1},{f:4,t:5,o:1},
+     {f:6,t:1,o:1},{f:7,t:1,o:1},{f:8,t:1,o:1},
+     {f:9,t:2,o:1},{f:10,t:2,o:1},{f:11,t:3,o:1},{f:12,t:3,o:1}],
+    ['спирт','антисептик','растворитель']);
+
+  M('C2H4O','Ацетальдегид','Acetaldehyde','organic',2,
+    'Простейший альдегид. Промежуточный продукт окисления этанола. Образуется при брожении. CH₃CHO.',
+    [{id:1,s:'C',x:-35,y:0},{id:2,s:'C',x:35,y:0},{id:3,s:'O',x:80,y:-35},{id:4,s:'H',x:80,y:35},
+     {id:5,s:'H',x:-70,y:-38},{id:6,s:'H',x:-70,y:38},{id:7,s:'H',x:-70,y:0}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:2},{f:2,t:4,o:1},{f:5,t:1,o:1},{f:6,t:1,o:1},{f:7,t:1,o:1}],
+    ['альдегид','брожение','метаболизм']);
+
+  M('C6H6','Бензол','Benzene','organic',3,
+    'Ароматический углеводород с кольцом из 6 углеродов. Канцероген. Основа ароматической химии.',
+    [{id:1,s:'C',x:50,y:0},{id:2,s:'C',x:25,y:43},{id:3,s:'C',x:-25,y:43},
+     {id:4,s:'C',x:-50,y:0},{id:5,s:'C',x:-25,y:-43},{id:6,s:'C',x:25,y:-43},
+     {id:7,s:'H',x:90,y:0},{id:8,s:'H',x:45,y:78},{id:9,s:'H',x:-45,y:78},
+     {id:10,s:'H',x:-90,y:0},{id:11,s:'H',x:-45,y:-78},{id:12,s:'H',x:45,y:-78}],
+    [{f:1,t:2,o:2},{f:2,t:3,o:1},{f:3,t:4,o:2},{f:4,t:5,o:1},{f:5,t:6,o:2},{f:6,t:1,o:1},
+     {f:1,t:7,o:1},{f:2,t:8,o:1},{f:3,t:9,o:1},{f:4,t:10,o:1},{f:5,t:11,o:1},{f:6,t:12,o:1}],
+    ['ароматика','кольцо','канцероген']);
+
+  M('C3H6','Пропилен','Propylene','organic',2,
+    'Простейший алкен с двойной связью. CH₂=CH-CH₃. Сырьё для производства полипропилена.',
+    [{id:1,s:'C',x:-65,y:0},{id:2,s:'C',x:0,y:0},{id:3,s:'C',x:65,y:0},
+     {id:4,s:'H',x:-100,y:-35},{id:5,s:'H',x:-100,y:35},{id:6,s:'H',x:0,y:-50},
+     {id:7,s:'H',x:100,y:-35},{id:8,s:'H',x:100,y:5},{id:9,s:'H',x:100,y:45}],
+    [{f:1,t:2,o:2},{f:2,t:3,o:1},
+     {f:4,t:1,o:1},{f:5,t:1,o:1},{f:6,t:2,o:1},
+     {f:7,t:3,o:1},{f:8,t:3,o:1},{f:9,t:3,o:1}],
+    ['алкен','полимер','пластик']);
+
+  M('C4H10','Бутан','Butane','organic',2,
+    'Четырёхуглеродный алкан. Сжиженный газ в зажигалках и баллонах. CH₃CH₂CH₂CH₃.',
+    [{id:1,s:'C',x:-90,y:0},{id:2,s:'C',x:-30,y:0},{id:3,s:'C',x:30,y:0},{id:4,s:'C',x:90,y:0},
+     {id:5,s:'H',x:-125,y:-32},{id:6,s:'H',x:-125,y:32},{id:7,s:'H',x:-90,y:-45},
+     {id:8,s:'H',x:-30,y:-45},{id:9,s:'H',x:-30,y:45},
+     {id:10,s:'H',x:30,y:-45},{id:11,s:'H',x:30,y:45},
+     {id:12,s:'H',x:125,y:-32},{id:13,s:'H',x:125,y:32},{id:14,s:'H',x:90,y:-45}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:1},{f:3,t:4,o:1},
+     {f:5,t:1,o:1},{f:6,t:1,o:1},{f:7,t:1,o:1},
+     {f:8,t:2,o:1},{f:9,t:2,o:1},{f:10,t:3,o:1},{f:11,t:3,o:1},
+     {f:12,t:4,o:1},{f:13,t:4,o:1},{f:14,t:4,o:1}],
+    ['алкан','топливо','газ']);
+
+  M('CHCl3','Хлороформ','Chloroform','organic',2,
+    'Исторически использовался как анестетик. Гепатотоксичен. Растворитель. CHCl₃.',
+    [{id:1,s:'C',x:0,y:0},{id:2,s:'H',x:0,y:-65},
+     {id:3,s:'Cl',x:-60,y:45},{id:4,s:'Cl',x:60,y:45},{id:5,s:'Cl',x:0,y:65}],
+    [{f:1,t:2,o:1},{f:1,t:3,o:1},{f:1,t:4,o:1},{f:1,t:5,o:1}],
+    ['галоген','растворитель','анестетик']);
+
+  M('CCl4','Тетрахлорметан','Carbon tetrachloride','organic',2,
+    'Тетраэдрическая молекула. Применялся как огнетушитель. Токсичен. Разрушает озоновый слой.',
+    [{id:1,s:'C',x:0,y:0},{id:2,s:'Cl',x:0,y:-75},{id:3,s:'Cl',x:75,y:0},{id:4,s:'Cl',x:0,y:75},{id:5,s:'Cl',x:-75,y:0}],
+    [{f:1,t:2,o:1},{f:1,t:3,o:1},{f:1,t:4,o:1},{f:1,t:5,o:1}],
+    ['галоген','симметрия','растворитель']);
+
+  M('CH4N2O','Мочевина','Urea','organic',2,
+    'Конечный продукт азотистого обмена. Экскретируется почками. Используется как удобрение. O=C(NH₂)₂.',
+    [{id:1,s:'C',x:0,y:0},{id:2,s:'O',x:0,y:-65},{id:3,s:'N',x:-60,y:40},{id:4,s:'N',x:60,y:40},
+     {id:5,s:'H',x:-95,y:65},{id:6,s:'H',x:-30,y:75},{id:7,s:'H',x:30,y:75},{id:8,s:'H',x:95,y:65}],
+    [{f:1,t:2,o:2},{f:1,t:3,o:1},{f:1,t:4,o:1},
+     {f:5,t:3,o:1},{f:6,t:3,o:1},{f:7,t:4,o:1},{f:8,t:4,o:1}],
+    ['белок','обмен','удобрение','почки']);
+
+  M('C2H4O2','Метилформиат','Methyl formate','organic',2,
+    'Простейший сложный эфир. Применяется как фумигант и растворитель. HCOOCH₃.',
+    [{id:1,s:'C',x:-35,y:0},{id:2,s:'O',x:25,y:0},{id:3,s:'C',x:90,y:0},{id:4,s:'O',x:-35,y:-65},
+     {id:5,s:'H',x:-70,y:0},{id:6,s:'H',x:125,y:-35},{id:7,s:'H',x:125,y:35},{id:8,s:'H',x:125,y:0}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:1},{f:1,t:4,o:2},{f:5,t:1,o:1},
+     {f:6,t:3,o:1},{f:7,t:3,o:1},{f:8,t:3,o:1}],
+    ['эфир','растворитель']);
+
+  // ── Биомолекулы ──
+  M('C3H7NO2','Аланин','Alanine','biomolecule',3,
+    'Простейшая хиральная аминокислота. Входит в состав белков. Заменимая АК. CH₃-CH(NH₂)-COOH.',
+    [{id:1,s:'C',x:-65,y:0},{id:2,s:'C',x:0,y:0},{id:3,s:'C',x:65,y:0},
+     {id:4,s:'N',x:0,y:-65},{id:5,s:'O',x:100,y:-35},{id:6,s:'O',x:100,y:35},
+     {id:7,s:'H',x:-100,y:-35},{id:8,s:'H',x:-100,y:35},{id:9,s:'H',x:-100,y:0},
+     {id:10,s:'H',x:0,y:35},{id:11,s:'H',x:-30,y:-90},{id:12,s:'H',x:30,y:-90},{id:13,s:'H',x:135,y:35}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:1},{f:2,t:4,o:1},{f:3,t:5,o:2},{f:3,t:6,o:1},
+     {f:7,t:1,o:1},{f:8,t:1,o:1},{f:9,t:1,o:1},
+     {f:10,t:2,o:1},{f:11,t:4,o:1},{f:12,t:4,o:1},{f:13,t:6,o:1}],
+    ['аминокислота','белок','хиральность']);
+
+  M('C3H6O3','Молочная кислота','Lactic acid','biomolecule',2,
+    'Образуется при анаэробном гликолизе. Причина усталости мышц. CH₃-CH(OH)-COOH.',
+    [{id:1,s:'C',x:-65,y:0},{id:2,s:'C',x:0,y:0},{id:3,s:'C',x:65,y:0},
+     {id:4,s:'O',x:0,y:-65},{id:5,s:'O',x:100,y:-35},{id:6,s:'O',x:100,y:35},
+     {id:7,s:'H',x:-100,y:-35},{id:8,s:'H',x:-100,y:35},{id:9,s:'H',x:-100,y:0},
+     {id:10,s:'H',x:0,y:35},{id:11,s:'H',x:-30,y:-90},{id:12,s:'H',x:135,y:35}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:1},{f:2,t:4,o:1},{f:3,t:5,o:2},{f:3,t:6,o:1},
+     {f:7,t:1,o:1},{f:8,t:1,o:1},{f:9,t:1,o:1},
+     {f:10,t:2,o:1},{f:11,t:4,o:1},{f:12,t:6,o:1}],
+    ['гликолиз','мышцы','анаэробный']);
+
+  M('C3H4O3','Пировиноградная кислота','Pyruvic acid','biomolecule',3,
+    'Ключевой метаболит. Конечный продукт гликолиза. Точка ветвления: ЦТК, брожение, синтез АК. CH₃-CO-COOH.',
+    [{id:1,s:'C',x:-65,y:0},{id:2,s:'C',x:0,y:0},{id:3,s:'C',x:65,y:0},
+     {id:4,s:'O',x:0,y:-65},{id:5,s:'O',x:100,y:-35},{id:6,s:'O',x:100,y:35},
+     {id:7,s:'H',x:-100,y:-35},{id:8,s:'H',x:-100,y:35},{id:9,s:'H',x:-100,y:0},{id:10,s:'H',x:135,y:35}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:1},{f:2,t:4,o:2},{f:3,t:5,o:2},{f:3,t:6,o:1},
+     {f:7,t:1,o:1},{f:8,t:1,o:1},{f:9,t:1,o:1},{f:10,t:6,o:1}],
+    ['гликолиз','Кребс','метаболизм','ЦТК']);
+
+  M('C6H12O6','Глюкоза','Glucose','biomolecule',3,
+    'Основной источник энергии клетки. Субстрат гликолиза. Моносахарид. Образуется при фотосинтезе.',
+    [],[],['углевод','гликолиз','энергия','фотосинтез']);
+
+  M('C12H22O11','Сахароза','Sucrose','biomolecule',3,
+    'Дисахарид: глюкоза + фруктоза. Обычный столовый сахар. Гидролизуется на моносахариды.',
+    [],[],['углевод','дисахарид','сахар']);
+
+  M('C5H5N5','Аденин','Adenine','biomolecule',3,
+    'Пуриновое основание. Входит в состав ДНК, РНК и АТФ. Комплементарен тимину в ДНК.',
+    [],[],['нуклеотид','ДНК','АТФ','пурин']);
+
+  M('C5H6N2O2','Тимин','Thymine','biomolecule',3,
+    'Пиримидиновое основание. Только в ДНК (в РНК заменяется урацилом). Пара аденину.',
+    [],[],['нуклеотид','ДНК','пиримидин']);
+
+  M('C4H5N3O','Цитозин','Cytosine','biomolecule',3,
+    'Пиримидиновое основание. Входит в ДНК и РНК. Пара гуанину (три водородные связи).',
+    [],[],['нуклеотид','ДНК','РНК','пиримидин']);
+
+  M('C5H5N5O','Гуанин','Guanine','biomolecule',3,
+    'Пуриновое основание. Входит в ДНК и РНК. Пара цитозину. Наибольшее содержание в ДНК термофилов.',
+    [],[],['нуклеотид','ДНК','РНК','пурин']);
+
+  M('C4H4N2O2','Урацил','Uracil','biomolecule',3,
+    'Пиримидиновое основание. Только в РНК (вместо тимина). Пара аденину.',
+    [],[],['нуклеотид','РНК','пиримидин']);
+
+  M('C5H10O5','Рибоза','Ribose','biomolecule',3,
+    'Пентоза. Входит в состав РНК, АТФ, НАД⁺. Структурный компонент нуклеотидов.',
+    [],[],['углевод','РНК','нуклеотид','пентоза']);
+
+  M('C5H10O4','Дезоксирибоза','Deoxyribose','biomolecule',3,
+    'Пятиуглеродный сахар. Структурный компонент ДНК. Отличается от рибозы отсутствием одного OH.',
+    [],[],['углевод','ДНК','нуклеотид']);
+
+  M('C16H32O2','Пальмитиновая кислота','Palmitic acid','biomolecule',2,
+    'Насыщенная жирная кислота С16. Входит в состав клеточных мембран и пальмового масла.',
+    [],[],['жирная кислота','липид','мембрана','насыщенная']);
+
+  M('C18H34O2','Олеиновая кислота','Oleic acid','biomolecule',2,
+    'Мononенасыщенная ω-9 жирная кислота. Основной компонент оливкового масла. Двойная связь Δ9.',
+    [],[],['жирная кислота','ненасыщенная','оливковое масло','омега']);
+
+  M('C3H5NO2','Серин','Serine','biomolecule',3,
+    'Полярная аминокислота с гидроксильной группой. Входит в активный центр многих ферментов.',
+    [],[],['аминокислота','белок','фермент']);
+
+  M('C3H7NO3','Треонин','Threonine','biomolecule',3,
+    'Незаменимая полярная аминокислота. Содержит гидроксильную группу. Участвует в сигнальных каскадах.',
+    [],[],['аминокислота','незаменимая','белок']);
+
+  M('C10H17N3O6S','Глутатион','Glutathione','biomolecule',3,
+    'Трипептид (γ-Glu-Cys-Gly). Важнейший клеточный антиоксидант. Обезвреживает перекисные радикалы.',
+    [],[],['антиоксидант','пептид','цистеин']);
+
+  M('C21H30O5','Кортизол','Cortisol','biomolecule',3,
+    'Стероидный гормон стресса. Вырабатывается корой надпочечников. Регулирует обмен веществ.',
+    [],[],['гормон','стероид','стресс','надпочечники']);
+
+  M('C18H21NO3','Морфин','Morphine','biomolecule',3,
+    'Алкалоид мака. Сильное обезболивающее. Взаимодействует с опиоидными рецепторами.',
+    [],[],['алкалоид','нейромедиатор','рецептор']);
+
+  console.log('✓ Phase 6: Additional molecules seeded');
+}
+
+/* Seed challenges */
+if (!db.prepare('SELECT 1 FROM bio_challenges LIMIT 1').get()) {
+  const ins = db.prepare('INSERT INTO bio_challenges (title,description,type,target_formula,hint,xp_reward,difficulty,topic_tag,order_n) VALUES (?,?,?,?,?,?,?,?,?)');
+  [
+    ['Построй воду', 'Соедини 2 атома водорода с кислородом', 'build','H2O','O — в центре, два H по бокам',30,1,'вода',1],
+    ['Углекислый газ', 'Построй молекулу CO₂ — двойные связи!', 'build','CO2','C в центре, два O с двойными связями',40,1,'фотосинтез',2],
+    ['Кислород O₂', 'Две O соединены двойной связью', 'build','O2','Двойная связь: перетащи от атома до второго О',30,1,'дыхание',3],
+    ['Азот N₂', 'Тройная связь между двумя атомами N', 'build','N2','Тройная связь: кликни по линии 3 раза',50,2,'атмосфера',4],
+    ['Аммиак NH₃', 'Три водорода связаны с азотом', 'build','NH3','N в центре, три H вокруг',50,2,'азот',5],
+    ['Метан CH₄', 'Четыре водорода вокруг углерода', 'build','CH4','C имеет 4 свободные связи — к каждой прикрепи H',60,2,'алканы',6],
+    ['Этилен C₂H₄', 'Двойная связь C=C — признак алкенов', 'build','C2H4','Сначала соедини два C двойной связью, затем добавь H',80,3,'алкены',7],
+    ['Ацетилен C₂H₂', 'Тройная связь C≡C — самая прочная', 'build','C2H2','H-C≡C-H: два H по краям, тройная связь в центре',100,3,'алкины',8],
+  ].forEach(r => ins.run(...r));
+  console.log('✓ Bio challenges seeded');
+}
+
+/* Seed reactions */
+if (!db.prepare('SELECT 1 FROM bio_reactions LIMIT 1').get()) {
+  const ins = db.prepare('INSERT INTO bio_reactions (equation,name_ru,type,description,reactant_ids,product_ids,conditions,energy_kj,topic_tags) VALUES (?,?,?,?,?,?,?,?,?)');
+  const empty = '[]';
+  [
+    ['2H₂ + O₂ → 2H₂O','Синтез воды','synthesis','Экзотермическая реакция. Основа водородной энергетики. ΔH = –483 кДж/моль.',empty,empty,'поджигание',-483.6,'["водород","кислород","вода"]'],
+    ['CH₄ + 2O₂ → CO₂ + 2H₂O','Горение метана','combustion','Горение природного газа. Выделяет тепло. ΔH = –890 кДж/моль.',empty,empty,'t°',-890.0,'["метан","горение","углерод"]'],
+    ['N₂ + 3H₂ ⇌ 2NH₃','Синтез аммиака (Хабер)','synthesis','Промышленный синтез. Высокое давление и температура. Обратимая реакция.',empty,empty,'450°C, Fe-кат, 200 атм',-92.4,'["азот","аммиак","промышленность"]'],
+    ['6CO₂ + 6H₂O → C₆H₁₂O₆ + 6O₂','Фотосинтез','synthesis','Суммарное уравнение фотосинтеза. Световая + тёмная фазы.',empty,empty,'hν (свет)',2808,'["фотосинтез","глюкоза","хлоропласт"]'],
+    ['C₆H₁₂O₆ + 6O₂ → 6CO₂ + 6H₂O','Клеточное дыхание','decomposition','Полное окисление глюкозы. Выделяется 38 АТФ. ΔH = –2808 кДж/моль.',empty,empty,'ферменты',-2808,'["дыхание","АТФ","митохондрия"]'],
+  ].forEach(r => ins.run(...r));
+  console.log('✓ Bio reactions seeded');
+}
+
+/* Fix reaction molecule IDs (seeded with empty arrays) */
+{
+  const firstRxn = db.prepare("SELECT reactant_ids FROM bio_reactions WHERE name_ru='Синтез воды'").get();
+  if (firstRxn && firstRxn.reactant_ids === '[]') {
+    const mid = f => db.prepare('SELECT id FROM bio_molecules WHERE formula=? LIMIT 1').get(f)?.id;
+    const upd = db.prepare('UPDATE bio_reactions SET reactant_ids=?, product_ids=? WHERE name_ru=?');
+    const rxnIds = [
+      { name: 'Синтез воды',         r: [mid('H2'), mid('O2')],              p: [mid('H2O')]              },
+      { name: 'Горение метана',       r: [mid('CH4'), mid('O2')],             p: [mid('CO2'), mid('H2O')]  },
+      { name: 'Синтез аммиака (Хабер)', r: [mid('N2'), mid('H2')],           p: [mid('NH3')]              },
+      { name: 'Фотосинтез',           r: [mid('CO2'), mid('H2O')],            p: [mid('O2')]               },
+      { name: 'Клеточное дыхание',    r: [mid('O2')],                         p: [mid('CO2'), mid('H2O')]  },
+    ];
+    for (const u of rxnIds) {
+      const rIds = u.r.filter(Boolean), pIds = u.p.filter(Boolean);
+      if (rIds.length || pIds.length)
+        upd.run(JSON.stringify(rIds), JSON.stringify(pIds), u.name);
+    }
+    console.log('✓ Bio reaction molecule IDs fixed');
+  }
+}
+
+/* Add data_json column to bio_challenges (idempotent) */
+{
+  const chalCols = db.prepare('PRAGMA table_info(bio_challenges)').all().map(c => c.name);
+  if (!chalCols.includes('data_json')) {
+    db.exec('ALTER TABLE bio_challenges ADD COLUMN data_json TEXT DEFAULT NULL');
+    console.log('✓ bio_challenges.data_json column added');
+  }
+}
+
+/* Seed identify + formula challenges */
+{
+  const insChal = db.prepare(`
+    INSERT INTO bio_challenges (title,description,type,target_formula,hint,xp_reward,difficulty,topic_tag,order_n,data_json)
+    SELECT ?,?,?,?,?,?,?,?,?,? WHERE NOT EXISTS (SELECT 1 FROM bio_challenges WHERE title=?)`);
+
+  const mid = f => db.prepare('SELECT id FROM bio_molecules WHERE formula=? LIMIT 1').get(f)?.id;
+  const mname = f => db.prepare('SELECT name_ru FROM bio_molecules WHERE formula=? LIMIT 1').get(f)?.name_ru;
+
+  // identify: show molecule structure → pick correct name
+  [
+    { title:'Узнай молекулу: вода',         f:'H2O',  choices:['Вода','Аммиак','Метан','Углекислый газ'],  xp:30, d:1, t:'вода',     n:9  },
+    { title:'Узнай молекулу: CO₂',          f:'CO2',  choices:['Углекислый газ','Угарный газ','Кислород','Аммиак'], xp:30, d:1, t:'фотосинтез', n:10 },
+    { title:'Узнай молекулу: аммиак',       f:'NH3',  choices:['Аммиак','Азот','Вода','Метан'],           xp:40, d:2, t:'азот',     n:11 },
+    { title:'Узнай молекулу: метан',        f:'CH4',  choices:['Метан','Этан','Пропан','Этилен'],         xp:40, d:2, t:'алканы',   n:12 },
+    { title:'Узнай молекулу: этилен',       f:'C2H4', choices:['Этилен','Этан','Ацетилен','Метан'],       xp:60, d:3, t:'алкены',   n:13 },
+  ].forEach(c => {
+    const mol_id = mid(c.f);
+    insChal.run(c.title, 'Определи молекулу по её структурной формуле', 'identify', c.f, null, c.xp, c.d, c.t, c.n,
+      JSON.stringify({ mol_id, choices: c.choices }), c.title);
+  });
+
+  // formula: shown a molecule name → pick correct formula
+  [
+    { title:'Формула воды',      name:'воды',                   f:'H2O',  choices:['H2O','H2O2','HO','H3O'],   xp:25, d:1, t:'вода',   n:14 },
+    { title:'Формула аммиака',   name:'аммиака',                f:'NH3',  choices:['NH3','N2H4','NO2','HNO3'], xp:35, d:2, t:'азот',   n:15 },
+    { title:'Формула метана',    name:'метана (простейший алкан)', f:'CH4',choices:['CH4','C2H6','C2H4','CH3'],xp:35, d:2, t:'алканы', n:16 },
+    { title:'Формула кислорода', name:'молекулярного кислорода', f:'O2',  choices:['O2','O3','CO','CO2'],      xp:25, d:1, t:'дыхание',n:17 },
+  ].forEach(c => {
+    const mol_name = mname(c.f) || c.name;
+    insChal.run(c.title, `Выбери правильную химическую формулу: ${mol_name}`, 'formula', c.f, null, c.xp, c.d, c.t, c.n,
+      JSON.stringify({ choices: c.choices, mol_name }), c.title);
+  });
+
+  console.log('✓ Bio identify/formula challenges seeded');
+}
+
+/* ── ПЛАН ФАЗА 1: Расширение контента ─────────────────────────────────── */
+{
+  const am = db.prepare(`INSERT INTO bio_molecules (formula,name_ru,name_lat,category,difficulty,description,atoms_json,bonds_json,topic_tags,is_library)
+    SELECT ?,?,?,?,?,?,?,?,?,1 WHERE NOT EXISTS (SELECT 1 FROM bio_molecules WHERE name_ru=?)`);
+  const M = (f,r,l,cat,d,desc,a,b,t) => am.run(f,r,l,cat,d,desc,JSON.stringify(a),JSON.stringify(b),JSON.stringify(t),r);
+
+  // === INORGANIC MOLECULES ===
+  M('KOH','Гидроксид калия','Potassium hydroxide','inorganic',1,
+    'Сильное основание. Используется в промышленности и лабораторной практике.',
+    [{id:1,s:'K',x:-80,y:0},{id:2,s:'O',x:0,y:0},{id:3,s:'H',x:80,y:0}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:1}],['кислоты-основания']);
+
+  M('Ca(OH)2','Гидроксид кальция','Calcium hydroxide','inorganic',1,
+    'Гашёная известь. Применяется в строительстве и сельском хозяйстве.',
+    [{id:1,s:'Ca',x:0,y:0},{id:2,s:'O',x:-80,y:60},{id:3,s:'H',x:-80,y:140},{id:4,s:'O',x:80,y:60},{id:5,s:'H',x:80,y:140}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:1},{f:1,t:4,o:1},{f:4,t:5,o:1}],['кислоты-основания']);
+
+  M('Fe2O3','Оксид железа(III)','Iron(III) oxide','inorganic',2,
+    'Ржавчина. Красно-бурый порошок, встречается как минерал гематит.',
+    [{id:1,s:'Fe',x:-80,y:0},{id:2,s:'Fe',x:80,y:0},{id:3,s:'O',x:0,y:-80},{id:4,s:'O',x:-120,y:80},{id:5,s:'O',x:120,y:80}],
+    [{f:1,t:3,o:1},{f:2,t:3,o:1},{f:1,t:4,o:1},{f:2,t:5,o:1}],['металлы','оксиды']);
+
+  M('Al2O3','Оксид алюминия','Aluminium oxide','inorganic',2,
+    'Корунд, глинозём. Тугоплавкое вещество, основа алюминиевой промышленности.',
+    [{id:1,s:'Al',x:-80,y:0},{id:2,s:'Al',x:80,y:0},{id:3,s:'O',x:0,y:-80},{id:4,s:'O',x:-120,y:80},{id:5,s:'O',x:120,y:80}],
+    [{f:1,t:3,o:1},{f:2,t:3,o:1},{f:1,t:4,o:1},{f:2,t:5,o:1}],['металлы','оксиды']);
+
+  M('Na2CO3','Карбонат натрия','Sodium carbonate','inorganic',2,
+    'Сода кальцинированная. Применяется в стекольной и химической промышленности.',
+    [{id:1,s:'Na',x:-120,y:0},{id:2,s:'C',x:0,y:0},{id:3,s:'O',x:0,y:-85},{id:4,s:'O',x:-75,y:65},{id:5,s:'O',x:75,y:65},{id:6,s:'Na',x:120,y:0}],
+    [{f:2,t:3,o:2},{f:2,t:4,o:1},{f:2,t:5,o:1},{f:4,t:1,o:1},{f:5,t:6,o:1}],['соли']);
+
+  M('NaHCO3','Гидрокарбонат натрия','Sodium bicarbonate','inorganic',2,
+    'Питьевая сода. Разлагается при нагревании с выделением CO₂.',
+    [{id:1,s:'Na',x:-140,y:0},{id:2,s:'O',x:-50,y:0},{id:3,s:'H',x:-50,y:-80},{id:4,s:'C',x:40,y:0},{id:5,s:'O',x:40,y:-85},{id:6,s:'O',x:120,y:50}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:1},{f:2,t:4,o:1},{f:4,t:5,o:2},{f:4,t:6,o:1}],['соли']);
+
+  M('KMnO4','Перманганат калия','Potassium permanganate','inorganic',2,
+    'Марганцовка. Сильный окислитель. Применяется как антисептик.',
+    [{id:1,s:'K',x:-130,y:0},{id:2,s:'Mn',x:0,y:0},{id:3,s:'O',x:0,y:-90},{id:4,s:'O',x:90,y:0},{id:5,s:'O',x:0,y:90},{id:6,s:'O',x:-90,y:0}],
+    [{f:1,t:6,o:1},{f:2,t:3,o:2},{f:2,t:4,o:2},{f:2,t:5,o:2},{f:2,t:6,o:1}],['окислители']);
+
+  M('HF','Фторид водорода','Hydrogen fluoride','inorganic',1,
+    'Плавиковая кислота в растворе. Используется для травления стекла.',
+    [{id:1,s:'H',x:-40,y:0},{id:2,s:'F',x:40,y:0}],
+    [{f:1,t:2,o:1}],['галогены']);
+
+  M('Br2','Бром','Bromine','inorganic',1,
+    'Единственный жидкий неметалл при комнатной температуре. Сильный окислитель.',
+    [{id:1,s:'Br',x:-50,y:0},{id:2,s:'Br',x:50,y:0}],
+    [{f:1,t:2,o:1}],['галогены']);
+
+  M('AgCl','Хлорид серебра','Silver chloride','inorganic',1,
+    'Белый осадок, нерастворимый в воде. Качественная реакция на ионы Cl⁻.',
+    [{id:1,s:'Ag',x:-50,y:0},{id:2,s:'Cl',x:50,y:0}],
+    [{f:1,t:2,o:1}],['соли','осадки']);
+
+  M('NH4Cl','Хлорид аммония','Ammonium chloride','inorganic',2,
+    'Нашатырь. Применяется в медицине, пайке металлов, как удобрение.',
+    [{id:1,s:'N',x:0,y:0},{id:2,s:'H',x:-80,y:0},{id:3,s:'H',x:0,y:-80},{id:4,s:'H',x:80,y:0},{id:5,s:'H',x:0,y:80},{id:6,s:'Cl',x:100,y:100}],
+    [{f:1,t:2,o:1},{f:1,t:3,o:1},{f:1,t:4,o:1},{f:1,t:5,o:1}],['соли','азот']);
+
+  M('BaSO4','Сульфат бария','Barium sulfate','inorganic',2,
+    'Нерастворимый белый осадок. Используется в рентгенодиагностике.',
+    [{id:1,s:'S',x:0,y:0},{id:2,s:'O',x:0,y:-85},{id:3,s:'O',x:85,y:0},{id:4,s:'O',x:0,y:85},{id:5,s:'O',x:-85,y:0},{id:6,s:'Ba',x:150,y:0}],
+    [{f:1,t:2,o:2},{f:1,t:3,o:1},{f:1,t:4,o:1},{f:1,t:5,o:2},{f:3,t:6,o:1}],['соли','осадки']);
+
+  M('CuSO4','Сульфат меди(II)','Copper(II) sulfate','inorganic',2,
+    'Медный купорос в гидратированной форме. Фунгицид, применяется в химическом анализе.',
+    [{id:1,s:'S',x:0,y:0},{id:2,s:'O',x:0,y:-85},{id:3,s:'O',x:85,y:0},{id:4,s:'O',x:0,y:85},{id:5,s:'O',x:-85,y:0},{id:6,s:'Cu',x:150,y:0}],
+    [{f:1,t:2,o:2},{f:1,t:3,o:1},{f:1,t:4,o:1},{f:1,t:5,o:2},{f:3,t:6,o:1}],['соли','металлы']);
+
+  M('Na2SO4','Сульфат натрия','Sodium sulfate','inorganic',2,
+    'Глауберова соль в гидратированной форме. Применяется в стекольной промышленности.',
+    [{id:1,s:'S',x:0,y:0},{id:2,s:'O',x:0,y:-80},{id:3,s:'O',x:80,y:0},{id:4,s:'O',x:0,y:80},{id:5,s:'O',x:-80,y:0},{id:6,s:'Na',x:-160,y:0},{id:7,s:'Na',x:160,y:0}],
+    [{f:1,t:2,o:2},{f:1,t:3,o:1},{f:1,t:4,o:1},{f:1,t:5,o:2},{f:5,t:6,o:1},{f:3,t:7,o:1}],['соли']);
+
+  M('FeCl3','Хлорид железа(III)','Iron(III) chloride','inorganic',2,
+    'Применяется как коагулянт при очистке воды, как катализатор.',
+    [{id:1,s:'Fe',x:0,y:0},{id:2,s:'Cl',x:-90,y:0},{id:3,s:'Cl',x:45,y:-78},{id:4,s:'Cl',x:45,y:78}],
+    [{f:1,t:2,o:1},{f:1,t:3,o:1},{f:1,t:4,o:1}],['металлы','соли']);
+
+  M('H3PO4','Фосфорная кислота','Phosphoric acid','inorganic',2,
+    'Трёхосновная кислота. Применяется в пищевой промышленности (Е338), удобрениях.',
+    [{id:1,s:'P',x:0,y:0},{id:2,s:'O',x:0,y:-90},{id:3,s:'O',x:90,y:45},{id:4,s:'O',x:-90,y:45},{id:5,s:'O',x:0,y:90},{id:6,s:'H',x:90,y:120},{id:7,s:'H',x:-90,y:120},{id:8,s:'H',x:80,y:-90}],
+    [{f:1,t:2,o:2},{f:1,t:3,o:1},{f:1,t:4,o:1},{f:1,t:5,o:1},{f:3,t:6,o:1},{f:4,t:7,o:1},{f:2,t:8,o:1}],['кислоты']);
+
+  M('CaCO3','Карбонат кальция','Calcium carbonate','inorganic',1,
+    'Мел, известняк, мрамор. Основа раковин и костей многих организмов.',
+    [{id:1,s:'C',x:0,y:0},{id:2,s:'O',x:0,y:-80},{id:3,s:'O',x:70,y:55},{id:4,s:'O',x:-70,y:55},{id:5,s:'Ca',x:130,y:55}],
+    [{f:1,t:2,o:2},{f:1,t:3,o:1},{f:1,t:4,o:1},{f:3,t:5,o:1}],['соли']);
+
+  M('K2SO4','Сульфат калия','Potassium sulfate','inorganic',2,
+    'Калийное удобрение. Применяется в сельском хозяйстве.',
+    [{id:1,s:'S',x:0,y:0},{id:2,s:'O',x:0,y:-80},{id:3,s:'O',x:80,y:0},{id:4,s:'O',x:0,y:80},{id:5,s:'O',x:-80,y:0},{id:6,s:'K',x:-160,y:0},{id:7,s:'K',x:160,y:0}],
+    [{f:1,t:2,o:2},{f:1,t:3,o:1},{f:1,t:4,o:1},{f:1,t:5,o:2},{f:5,t:6,o:1},{f:3,t:7,o:1}],['соли','удобрения']);
+
+  M('HNO2','Азотистая кислота','Nitrous acid','inorganic',2,
+    'Неустойчивая слабая кислота. Реагент в реакциях диазотирования.',
+    [{id:1,s:'H',x:-80,y:0},{id:2,s:'O',x:0,y:0},{id:3,s:'N',x:80,y:0},{id:4,s:'O',x:160,y:0}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:1},{f:3,t:4,o:2}],['кислоты','азот']);
+
+  M('AlCl3','Хлорид алюминия','Aluminium chloride','inorganic',2,
+    'Катализатор реакций Фриделя-Крафтса. Применяется в органическом синтезе.',
+    [{id:1,s:'Al',x:0,y:0},{id:2,s:'Cl',x:-90,y:0},{id:3,s:'Cl',x:45,y:-78},{id:4,s:'Cl',x:45,y:78}],
+    [{f:1,t:2,o:1},{f:1,t:3,o:1},{f:1,t:4,o:1}],['металлы','соли']);
+
+  // === ORGANIC ===
+  M('C6H6','Бензол','Benzene','organic',2,
+    'Простейший арен. Ароматическое кольцо с делокализованными π-электронами.',
+    [{id:1,s:'C',x:80,y:0},{id:2,s:'C',x:40,y:-69},{id:3,s:'C',x:-40,y:-69},{id:4,s:'C',x:-80,y:0},{id:5,s:'C',x:-40,y:69},{id:6,s:'C',x:40,y:69}],
+    [{f:1,t:2,o:2},{f:2,t:3,o:1},{f:3,t:4,o:2},{f:4,t:5,o:1},{f:5,t:6,o:2},{f:6,t:1,o:1}],['арены','циклические']);
+
+  M('C7H8','Толуол','Toluene','organic',2,
+    'Бензол с метильной группой. Растворитель, сырьё для синтеза красителей.',
+    [{id:1,s:'C',x:80,y:0},{id:2,s:'C',x:40,y:-69},{id:3,s:'C',x:-40,y:-69},{id:4,s:'C',x:-80,y:0},{id:5,s:'C',x:-40,y:69},{id:6,s:'C',x:40,y:69},{id:7,s:'C',x:170,y:0}],
+    [{f:1,t:2,o:2},{f:2,t:3,o:1},{f:3,t:4,o:2},{f:4,t:5,o:1},{f:5,t:6,o:2},{f:6,t:1,o:1},{f:1,t:7,o:1}],['арены']);
+
+  M('C6H5OH','Фенол','Phenol','organic',2,
+    'Карболовая кислота. Применяется как антисептик и в производстве полимеров.',
+    [{id:1,s:'C',x:80,y:0},{id:2,s:'C',x:40,y:-69},{id:3,s:'C',x:-40,y:-69},{id:4,s:'C',x:-80,y:0},{id:5,s:'C',x:-40,y:69},{id:6,s:'C',x:40,y:69},{id:7,s:'O',x:170,y:0},{id:8,s:'H',x:240,y:0}],
+    [{f:1,t:2,o:2},{f:2,t:3,o:1},{f:3,t:4,o:2},{f:4,t:5,o:1},{f:5,t:6,o:2},{f:6,t:1,o:1},{f:1,t:7,o:1},{f:7,t:8,o:1}],['фенолы','арены']);
+
+  M('C6H5NH2','Анилин','Aniline','organic',2,
+    'Аминобензол. Исходное вещество для синтеза красителей и лекарств.',
+    [{id:1,s:'C',x:80,y:0},{id:2,s:'C',x:40,y:-69},{id:3,s:'C',x:-40,y:-69},{id:4,s:'C',x:-80,y:0},{id:5,s:'C',x:-40,y:69},{id:6,s:'C',x:40,y:69},{id:7,s:'N',x:170,y:0}],
+    [{f:1,t:2,o:2},{f:2,t:3,o:1},{f:3,t:4,o:2},{f:4,t:5,o:1},{f:5,t:6,o:2},{f:6,t:1,o:1},{f:1,t:7,o:1}],['амины','арены']);
+
+  M('C3H8O3','Глицерин','Glycerol','organic',2,
+    'Трёхатомный спирт. Компонент жиров, используется в косметике и фармацевтике.',
+    [{id:1,s:'C',x:-100,y:0},{id:2,s:'C',x:0,y:0},{id:3,s:'C',x:100,y:0},{id:4,s:'O',x:-100,y:80},{id:5,s:'O',x:0,y:80},{id:6,s:'O',x:100,y:80}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:1},{f:1,t:4,o:1},{f:2,t:5,o:1},{f:3,t:6,o:1}],['спирты','липиды']);
+
+  M('CH2O','Формальдегид','Formaldehyde','organic',1,
+    'Простейший альдегид. Консервант, используется в производстве пластмасс.',
+    [{id:1,s:'C',x:0,y:0},{id:2,s:'O',x:0,y:-80},{id:3,s:'H',x:-70,y:50},{id:4,s:'H',x:70,y:50}],
+    [{f:1,t:2,o:2},{f:1,t:3,o:1},{f:1,t:4,o:1}],['альдегиды']);
+
+  M('CH3CHO','Уксусный альдегид','Acetaldehyde','organic',1,
+    'Этаналь. Промежуточный продукт обмена веществ, образуется при окислении этанола.',
+    [{id:1,s:'C',x:-60,y:0},{id:2,s:'C',x:60,y:0},{id:3,s:'O',x:60,y:-85}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:2}],['альдегиды']);
+
+  M('C6H12O6','Глюкоза','Glucose','organic',3,
+    'Основной источник энергии клеток. Продукт фотосинтеза, субстрат гликолиза.',
+    [{id:1,s:'C',x:80,y:0},{id:2,s:'C',x:40,y:-69},{id:3,s:'C',x:-40,y:-69},{id:4,s:'C',x:-80,y:0},{id:5,s:'C',x:-40,y:69},{id:6,s:'O',x:40,y:69},{id:7,s:'O',x:155,y:0},{id:8,s:'O',x:40,y:-140},{id:9,s:'O',x:-40,y:-140},{id:10,s:'O',x:-155,y:0},{id:11,s:'C',x:-40,y:150},{id:12,s:'O',x:-40,y:230}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:1},{f:3,t:4,o:1},{f:4,t:5,o:1},{f:5,t:6,o:1},{f:6,t:1,o:1},{f:1,t:7,o:1},{f:2,t:8,o:1},{f:3,t:9,o:1},{f:4,t:10,o:1},{f:5,t:11,o:1},{f:11,t:12,o:1}],['углеводы','гликолиз']);
+
+  M('C3H6O3','Молочная кислота','Lactic acid','organic',2,
+    'Продукт анаэробного гликолиза. Накапливается в мышцах при физической нагрузке.',
+    [{id:1,s:'C',x:-80,y:0},{id:2,s:'O',x:-80,y:80},{id:3,s:'C',x:0,y:0},{id:4,s:'C',x:80,y:0},{id:5,s:'O',x:80,y:-80},{id:6,s:'O',x:160,y:0}],
+    [{f:3,t:1,o:1},{f:1,t:2,o:1},{f:3,t:4,o:1},{f:4,t:5,o:2},{f:4,t:6,o:1}],['обмен веществ','органические кислоты']);
+
+  M('C3H4O3','Пировиноградная кислота','Pyruvic acid','organic',2,
+    'Пируват — ключевой метаболит. Связывает гликолиз и цикл Кребса.',
+    [{id:1,s:'C',x:-80,y:0},{id:2,s:'O',x:-80,y:-80},{id:3,s:'C',x:0,y:0},{id:4,s:'C',x:80,y:0},{id:5,s:'O',x:80,y:-80},{id:6,s:'O',x:160,y:0}],
+    [{f:1,t:2,o:2},{f:1,t:3,o:1},{f:3,t:4,o:1},{f:4,t:5,o:2},{f:4,t:6,o:1}],['гликолиз','обмен веществ']);
+
+  // === AMINO ACIDS (all 20) ===
+  // Standard backbone: N(1,-120,0) Cα(2,0,0) C(3,90,-55) O(4,135,-130) O(5,190,-10)
+  // bonds: N-Cα(1-2,1), Cα-C(2-3,1), C=O(3-4,2), C-OH(3-5,1)
+  // Side chains from Cα downward
+
+  M('C3H7NO2','Аланин','Alanine','biomolecule',2,
+    'Заменимая аминокислота. Входит в состав большинства белков.',
+    [{id:1,s:'N',x:-120,y:0},{id:2,s:'C',x:0,y:0},{id:3,s:'C',x:90,y:-55},{id:4,s:'O',x:135,y:-130},{id:5,s:'O',x:190,y:-10},{id:6,s:'C',x:0,y:90}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:1},{f:3,t:4,o:2},{f:3,t:5,o:1},{f:2,t:6,o:1}],['аминокислоты']);
+
+  M('C5H11NO2','Валин','Valine','biomolecule',2,
+    'Незаменимая аминокислота. Необходима для синтеза белков мышечной ткани.',
+    [{id:1,s:'N',x:-120,y:0},{id:2,s:'C',x:0,y:0},{id:3,s:'C',x:90,y:-55},{id:4,s:'O',x:135,y:-130},{id:5,s:'O',x:190,y:-10},{id:6,s:'C',x:0,y:90},{id:7,s:'C',x:-60,y:165},{id:8,s:'C',x:60,y:165}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:1},{f:3,t:4,o:2},{f:3,t:5,o:1},{f:2,t:6,o:1},{f:6,t:7,o:1},{f:6,t:8,o:1}],['аминокислоты','незаменимые']);
+
+  M('C6H13NO2','Лейцин','Leucine','biomolecule',2,
+    'Незаменимая аминокислота. Стимулирует синтез белка, особенно важна для мышц.',
+    [{id:1,s:'N',x:-120,y:0},{id:2,s:'C',x:0,y:0},{id:3,s:'C',x:90,y:-55},{id:4,s:'O',x:135,y:-130},{id:5,s:'O',x:190,y:-10},{id:6,s:'C',x:0,y:90},{id:7,s:'C',x:0,y:170},{id:8,s:'C',x:-65,y:240},{id:9,s:'C',x:65,y:240}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:1},{f:3,t:4,o:2},{f:3,t:5,o:1},{f:2,t:6,o:1},{f:6,t:7,o:1},{f:7,t:8,o:1},{f:7,t:9,o:1}],['аминокислоты','незаменимые']);
+
+  M('C6H13NO2','Изолейцин','Isoleucine','biomolecule',3,
+    'Незаменимая аминокислота. Изомер лейцина, важен для синтеза гемоглобина.',
+    [{id:1,s:'N',x:-120,y:0},{id:2,s:'C',x:0,y:0},{id:3,s:'C',x:90,y:-55},{id:4,s:'O',x:135,y:-130},{id:5,s:'O',x:190,y:-10},{id:6,s:'C',x:0,y:90},{id:7,s:'C',x:-60,y:160},{id:8,s:'C',x:60,y:160},{id:9,s:'C',x:60,y:235}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:1},{f:3,t:4,o:2},{f:3,t:5,o:1},{f:2,t:6,o:1},{f:6,t:7,o:1},{f:6,t:8,o:1},{f:8,t:9,o:1}],['аминокислоты','незаменимые']);
+
+  M('C5H9NO2','Пролин','Proline','biomolecule',3,
+    'Иминокислота. Создаёт жёсткие изгибы в белковой цепи (в коллагене ≈12%).',
+    [{id:1,s:'N',x:-80,y:0},{id:2,s:'C',x:0,y:0},{id:3,s:'C',x:80,y:-55},{id:4,s:'O',x:120,y:-130},{id:5,s:'O',x:175,y:-10},{id:6,s:'C',x:-10,y:90},{id:7,s:'C',x:-90,y:140},{id:8,s:'C',x:-150,y:60}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:1},{f:3,t:4,o:2},{f:3,t:5,o:1},{f:2,t:6,o:1},{f:6,t:7,o:1},{f:7,t:8,o:1},{f:8,t:1,o:1}],['аминокислоты','иминокислоты']);
+
+  M('C3H7NO3','Серин','Serine','biomolecule',2,
+    'Заменимая аминокислота. Входит в активные центры многих ферментов.',
+    [{id:1,s:'N',x:-120,y:0},{id:2,s:'C',x:0,y:0},{id:3,s:'C',x:90,y:-55},{id:4,s:'O',x:135,y:-130},{id:5,s:'O',x:190,y:-10},{id:6,s:'C',x:0,y:90},{id:7,s:'O',x:0,y:170}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:1},{f:3,t:4,o:2},{f:3,t:5,o:1},{f:2,t:6,o:1},{f:6,t:7,o:1}],['аминокислоты']);
+
+  M('C4H9NO3','Треонин','Threonine','biomolecule',2,
+    'Незаменимая аминокислота. Участвует в синтезе иммуноглобулинов.',
+    [{id:1,s:'N',x:-120,y:0},{id:2,s:'C',x:0,y:0},{id:3,s:'C',x:90,y:-55},{id:4,s:'O',x:135,y:-130},{id:5,s:'O',x:190,y:-10},{id:6,s:'C',x:0,y:90},{id:7,s:'O',x:-65,y:160},{id:8,s:'C',x:65,y:160}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:1},{f:3,t:4,o:2},{f:3,t:5,o:1},{f:2,t:6,o:1},{f:6,t:7,o:1},{f:6,t:8,o:1}],['аминокислоты','незаменимые']);
+
+  M('C3H7NO2S','Цистеин','Cysteine','biomolecule',2,
+    'Серосодержащая аминокислота. Образует дисульфидные мостики, стабилизируя белки.',
+    [{id:1,s:'N',x:-120,y:0},{id:2,s:'C',x:0,y:0},{id:3,s:'C',x:90,y:-55},{id:4,s:'O',x:135,y:-130},{id:5,s:'O',x:190,y:-10},{id:6,s:'C',x:0,y:90},{id:7,s:'S',x:0,y:175}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:1},{f:3,t:4,o:2},{f:3,t:5,o:1},{f:2,t:6,o:1},{f:6,t:7,o:1}],['аминокислоты','серосодержащие']);
+
+  M('C5H11NO2S','Метионин','Methionine','biomolecule',2,
+    'Незаменимая серосодержащая аминокислота. Донор метильных групп (метилирование).',
+    [{id:1,s:'N',x:-120,y:0},{id:2,s:'C',x:0,y:0},{id:3,s:'C',x:90,y:-55},{id:4,s:'O',x:135,y:-130},{id:5,s:'O',x:190,y:-10},{id:6,s:'C',x:0,y:90},{id:7,s:'C',x:0,y:165},{id:8,s:'S',x:0,y:245},{id:9,s:'C',x:80,y:300}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:1},{f:3,t:4,o:2},{f:3,t:5,o:1},{f:2,t:6,o:1},{f:6,t:7,o:1},{f:7,t:8,o:1},{f:8,t:9,o:1}],['аминокислоты','незаменимые','серосодержащие']);
+
+  M('C4H7NO4','Аспарагиновая кислота','Aspartic acid','biomolecule',2,
+    'Кислая аминокислота. Участвует в цикле мочевины и синтезе пуринов.',
+    [{id:1,s:'N',x:-120,y:0},{id:2,s:'C',x:0,y:0},{id:3,s:'C',x:90,y:-55},{id:4,s:'O',x:135,y:-130},{id:5,s:'O',x:190,y:-10},{id:6,s:'C',x:0,y:90},{id:7,s:'C',x:0,y:170},{id:8,s:'O',x:-65,y:240},{id:9,s:'O',x:65,y:240}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:1},{f:3,t:4,o:2},{f:3,t:5,o:1},{f:2,t:6,o:1},{f:6,t:7,o:1},{f:7,t:8,o:2},{f:7,t:9,o:1}],['аминокислоты','кислые']);
+
+  M('C5H9NO4','Глутаминовая кислота','Glutamic acid','biomolecule',2,
+    'Кислая аминокислота, нейромедиатор. Предшественник ГАМК и глутамина.',
+    [{id:1,s:'N',x:-120,y:0},{id:2,s:'C',x:0,y:0},{id:3,s:'C',x:90,y:-55},{id:4,s:'O',x:135,y:-130},{id:5,s:'O',x:190,y:-10},{id:6,s:'C',x:0,y:90},{id:7,s:'C',x:0,y:165},{id:8,s:'C',x:0,y:240},{id:9,s:'O',x:-65,y:310},{id:10,s:'O',x:65,y:310}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:1},{f:3,t:4,o:2},{f:3,t:5,o:1},{f:2,t:6,o:1},{f:6,t:7,o:1},{f:7,t:8,o:1},{f:8,t:9,o:2},{f:8,t:10,o:1}],['аминокислоты','кислые','нейромедиаторы']);
+
+  M('C4H8N2O3','Аспарагин','Asparagine','biomolecule',2,
+    'Заменимая аминокислота. Амид аспарагиновой кислоты. Важен для нервной системы.',
+    [{id:1,s:'N',x:-120,y:0},{id:2,s:'C',x:0,y:0},{id:3,s:'C',x:90,y:-55},{id:4,s:'O',x:135,y:-130},{id:5,s:'O',x:190,y:-10},{id:6,s:'C',x:0,y:90},{id:7,s:'C',x:0,y:170},{id:8,s:'O',x:-70,y:240},{id:9,s:'N',x:70,y:240}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:1},{f:3,t:4,o:2},{f:3,t:5,o:1},{f:2,t:6,o:1},{f:6,t:7,o:1},{f:7,t:8,o:2},{f:7,t:9,o:1}],['аминокислоты']);
+
+  M('C5H10N2O3','Глутамин','Glutamine','biomolecule',2,
+    'Наиболее распространённая свободная аминокислота в крови. Транспортёр азота.',
+    [{id:1,s:'N',x:-120,y:0},{id:2,s:'C',x:0,y:0},{id:3,s:'C',x:90,y:-55},{id:4,s:'O',x:135,y:-130},{id:5,s:'O',x:190,y:-10},{id:6,s:'C',x:0,y:90},{id:7,s:'C',x:0,y:165},{id:8,s:'C',x:0,y:240},{id:9,s:'O',x:-70,y:310},{id:10,s:'N',x:70,y:310}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:1},{f:3,t:4,o:2},{f:3,t:5,o:1},{f:2,t:6,o:1},{f:6,t:7,o:1},{f:7,t:8,o:1},{f:8,t:9,o:2},{f:8,t:10,o:1}],['аминокислоты']);
+
+  M('C6H14N2O2','Лизин','Lysine','biomolecule',2,
+    'Незаменимая основная аминокислота. Необходима для роста и восстановления тканей.',
+    [{id:1,s:'N',x:-120,y:0},{id:2,s:'C',x:0,y:0},{id:3,s:'C',x:90,y:-55},{id:4,s:'O',x:135,y:-130},{id:5,s:'O',x:190,y:-10},{id:6,s:'C',x:0,y:90},{id:7,s:'C',x:0,y:165},{id:8,s:'C',x:0,y:240},{id:9,s:'C',x:0,y:315},{id:10,s:'N',x:0,y:390}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:1},{f:3,t:4,o:2},{f:3,t:5,o:1},{f:2,t:6,o:1},{f:6,t:7,o:1},{f:7,t:8,o:1},{f:8,t:9,o:1},{f:9,t:10,o:1}],['аминокислоты','основные','незаменимые']);
+
+  M('C6H14N4O2','Аргинин','Arginine','biomolecule',3,
+    'Условно незаменимая аминокислота. Предшественник оксида азота NO. Входит в цикл мочевины.',
+    [{id:1,s:'N',x:-120,y:0},{id:2,s:'C',x:0,y:0},{id:3,s:'C',x:90,y:-55},{id:4,s:'O',x:135,y:-130},{id:5,s:'O',x:190,y:-10},{id:6,s:'C',x:0,y:90},{id:7,s:'C',x:0,y:165},{id:8,s:'C',x:0,y:240},{id:9,s:'N',x:0,y:315},{id:10,s:'C',x:0,y:390},{id:11,s:'N',x:-65,y:460},{id:12,s:'N',x:65,y:460}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:1},{f:3,t:4,o:2},{f:3,t:5,o:1},{f:2,t:6,o:1},{f:6,t:7,o:1},{f:7,t:8,o:1},{f:8,t:9,o:1},{f:9,t:10,o:1},{f:10,t:11,o:2},{f:10,t:12,o:1}],['аминокислоты','основные','незаменимые']);
+
+  M('C6H9N3O2','Гистидин','Histidine','biomolecule',3,
+    'Незаменимая аминокислота с имидазольным кольцом. Предшественник гистамина.',
+    [{id:1,s:'N',x:-120,y:0},{id:2,s:'C',x:0,y:0},{id:3,s:'C',x:90,y:-55},{id:4,s:'O',x:135,y:-130},{id:5,s:'O',x:190,y:-10},{id:6,s:'C',x:0,y:90},{id:7,s:'C',x:0,y:165},{id:8,s:'C',x:50,y:230},{id:9,s:'N',x:90,y:310},{id:10,s:'C',x:0,y:360},{id:11,s:'N',x:-90,y:310},{id:12,s:'C',x:-50,y:230}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:1},{f:3,t:4,o:2},{f:3,t:5,o:1},{f:2,t:6,o:1},{f:6,t:7,o:1},{f:7,t:8,o:1},{f:7,t:12,o:1},{f:8,t:9,o:2},{f:9,t:10,o:1},{f:10,t:11,o:1},{f:11,t:12,o:2}],['аминокислоты','основные','незаменимые']);
+
+  M('C9H11NO2','Фенилаланин','Phenylalanine','biomolecule',3,
+    'Незаменимая ароматическая аминокислота. Предшественник тирозина, дофамина.',
+    [{id:1,s:'N',x:-120,y:0},{id:2,s:'C',x:0,y:0},{id:3,s:'C',x:90,y:-55},{id:4,s:'O',x:135,y:-130},{id:5,s:'O',x:190,y:-10},{id:6,s:'C',x:0,y:90},{id:7,s:'C',x:0,y:165},{id:8,s:'C',x:50,y:225},{id:9,s:'C',x:90,y:305},{id:10,s:'C',x:50,y:385},{id:11,s:'C',x:-50,y:385},{id:12,s:'C',x:-90,y:305},{id:13,s:'C',x:-50,y:225}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:1},{f:3,t:4,o:2},{f:3,t:5,o:1},{f:2,t:6,o:1},{f:6,t:7,o:1},{f:7,t:8,o:1},{f:7,t:13,o:1},{f:8,t:9,o:2},{f:9,t:10,o:1},{f:10,t:11,o:2},{f:11,t:12,o:1},{f:12,t:13,o:2}],['аминокислоты','ароматические','незаменимые']);
+
+  M('C9H11NO3','Тирозин','Tyrosine','biomolecule',3,
+    'Заменимая ароматическая аминокислота. Предшественник дофамина, адреналина, тироксина.',
+    [{id:1,s:'N',x:-120,y:0},{id:2,s:'C',x:0,y:0},{id:3,s:'C',x:90,y:-55},{id:4,s:'O',x:135,y:-130},{id:5,s:'O',x:190,y:-10},{id:6,s:'C',x:0,y:90},{id:7,s:'C',x:0,y:165},{id:8,s:'C',x:50,y:225},{id:9,s:'C',x:90,y:305},{id:10,s:'C',x:50,y:385},{id:11,s:'C',x:-50,y:385},{id:12,s:'C',x:-90,y:305},{id:13,s:'C',x:-50,y:225},{id:14,s:'O',x:130,y:385}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:1},{f:3,t:4,o:2},{f:3,t:5,o:1},{f:2,t:6,o:1},{f:6,t:7,o:1},{f:7,t:8,o:1},{f:7,t:13,o:1},{f:8,t:9,o:2},{f:9,t:10,o:1},{f:10,t:11,o:2},{f:11,t:12,o:1},{f:12,t:13,o:2},{f:10,t:14,o:1}],['аминокислоты','ароматические']);
+
+  M('C11H12N2O2','Триптофан','Tryptophan','biomolecule',3,
+    'Незаменимая аминокислота. Предшественник серотонина и мелатонина.',
+    [{id:1,s:'N',x:-120,y:0},{id:2,s:'C',x:0,y:0},{id:3,s:'C',x:90,y:-55},{id:4,s:'O',x:135,y:-130},{id:5,s:'O',x:190,y:-10},{id:6,s:'C',x:0,y:90},{id:7,s:'C',x:0,y:165},{id:8,s:'N',x:-50,y:235},{id:9,s:'C',x:50,y:235},{id:10,s:'C',x:70,y:315},{id:11,s:'C',x:0,y:375},{id:12,s:'C',x:-70,y:315}],
+    [{f:1,t:2,o:1},{f:2,t:3,o:1},{f:3,t:4,o:2},{f:3,t:5,o:1},{f:2,t:6,o:1},{f:6,t:7,o:1},{f:7,t:8,o:1},{f:7,t:9,o:2},{f:8,t:12,o:1},{f:9,t:10,o:1},{f:10,t:11,o:2},{f:11,t:12,o:1}],['аминокислоты','ароматические','незаменимые']);
+
+  // Additional biomolecules
+  M('C21H28N7O14P2','АТФ','ATP','biomolecule',3,
+    'Аденозинтрифосфат — универсальный носитель энергии в клетке. «Энергетическая валюта».',
+    [],[],['энергетический обмен','нуклеотиды']);
+
+  M('C10H14N5O7P','АМФ','AMP','biomolecule',3,
+    'Аденозинмонофосфат. Образуется при гидролизе АТФ или АДФ.',
+    [],[],['нуклеотиды','энергетический обмен']);
+
+  M('C10H15N5O10P2','АДФ','ADP','biomolecule',3,
+    'Аденозиндифосфат. Промежуточный продукт между АТФ и АМФ.',
+    [],[],['энергетический обмен','нуклеотиды']);
+
+  M('C5H5N5','Аденин','Adenine','biomolecule',3,
+    'Пуриновое азотистое основание. Входит в состав ДНК, РНК, АТФ.',
+    [],[],['нуклеотиды','ДНК','РНК']);
+
+  M('C4H5N3O','Цитозин','Cytosine','biomolecule',3,
+    'Пиримидиновое азотистое основание. Входит в состав ДНК и РНК.',
+    [],[],['нуклеотиды','ДНК','РНК']);
+
+  M('C5H5N5O','Гуанин','Guanine','biomolecule',3,
+    'Пуриновое азотистое основание. Входит в состав ДНК и РНК.',
+    [],[],['нуклеотиды','ДНК','РНК']);
+
+  M('C5H6N2O2','Тимин','Thymine','biomolecule',3,
+    'Пиримидиновое основание, входящее только в ДНК. Комплементарно аденину.',
+    [],[],['нуклеотиды','ДНК']);
+
+  M('C4H4N2O2','Урацил','Uracil','biomolecule',3,
+    'Пиримидиновое основание РНК. Заменяет тимин. Комплементарно аденину.',
+    [],[],['нуклеотиды','РНК']);
+
+  M('C16H32O2','Пальмитиновая кислота','Palmitic acid','biomolecule',2,
+    'Насыщенная жирная кислота C16. Основной компонент животных жиров и пальмового масла.',
+    [{id:1,s:'C',x:0,y:0},{id:2,s:'O',x:0,y:-80},{id:3,s:'O',x:80,y:0},{id:4,s:'C',x:-80,y:0},{id:5,s:'C',x:-160,y:0},{id:6,s:'C',x:-240,y:0}],
+    [{f:1,t:2,o:2},{f:1,t:3,o:1},{f:1,t:4,o:1},{f:4,t:5,o:1},{f:5,t:6,o:1}],['жирные кислоты','липиды']);
+
+  M('C18H34O2','Олеиновая кислота','Oleic acid','biomolecule',3,
+    'Ненасыщенная жирная кислота C18:1. Основной компонент оливкового масла.',
+    [{id:1,s:'C',x:0,y:0},{id:2,s:'O',x:0,y:-80},{id:3,s:'O',x:80,y:0},{id:4,s:'C',x:-80,y:0},{id:5,s:'C',x:-160,y:0},{id:6,s:'C',x:-225,y:-45},{id:7,s:'C',x:-290,y:0}],
+    [{f:1,t:2,o:2},{f:1,t:3,o:1},{f:1,t:4,o:1},{f:4,t:5,o:1},{f:5,t:6,o:2},{f:6,t:7,o:1}],['жирные кислоты','ненасыщенные','липиды']);
+
+  console.log('✓ Plan Phase 1: Extended molecules seeded');
+}
+
+/* ── Plan Phase 1: Extended reactions ── */
+{
+  const insR = db.prepare(`INSERT INTO bio_reactions (equation,name_ru,type,description,reactant_ids,product_ids,conditions,energy_kj,topic_tags)
+    SELECT ?,?,?,?,?,?,?,?,? WHERE NOT EXISTS (SELECT 1 FROM bio_reactions WHERE name_ru=?)`);
+  const mid = f => db.prepare('SELECT id FROM bio_molecules WHERE formula=? LIMIT 1').get(f)?.id;
+  const midN = n => db.prepare('SELECT id FROM bio_molecules WHERE name_ru=? LIMIT 1').get(n)?.id;
+  const R = (eq,name,type,desc,reacts,prods,cond,energy,tags) => {
+    const ri = JSON.stringify(reacts.map(f => mid(f) || midN(f)).filter(Boolean));
+    const pi = JSON.stringify(prods.map(f => mid(f) || midN(f)).filter(Boolean));
+    insR.run(eq,name,type,desc,ri,pi,cond,energy,JSON.stringify(tags),name);
+  };
+
+  R('2H2O → 2H2 + O2','Гидролиз воды','decomposition',
+    'Электролиз воды — разложение на водород и кислород',
+    ['H2O'],['H2','O2'],'электролиз, 1500°C',285.8,['вода']);
+
+  R('Ca + 2H2O → Ca(OH)2 + H2↑','Взаимодействие кальция с водой','exchange',
+    'Реакция кальция с водой с образованием гашёной извести',
+    ['H2O'],['Ca(OH)2','H2'],null,-635,['металлы']);
+
+  R('HCl + NaOH → NaCl + H2O','Нейтрализация HCl и NaOH','acid_base',
+    'Реакция нейтрализации сильной кислоты и сильного основания',
+    ['HCl','NaOH'],['NaCl','H2O'],null,-57.3,['кислоты-основания']);
+
+  R('C2H5OH + 3O2 → 2CO2 + 3H2O','Горение этанола','combustion',
+    'Горение этилового спирта с выделением углекислого газа и воды',
+    ['C2H5OH','O2'],['CO2','H2O'],null,-1366,['горение','спирты']);
+
+  R('C3H8 + 5O2 → 3CO2 + 4H2O','Горение пропана','combustion',
+    'Горение пропана — реакция сгорания в бытовых горелках',
+    ['C3H8','O2'],['CO2','H2O'],null,-2220,['горение','алканы']);
+
+  R('2C6H6 + 15O2 → 12CO2 + 6H2O','Горение бензола','combustion',
+    'Горение бензола с образованием углекислого газа и воды',
+    ['C6H6','O2'],['CO2','H2O'],null,-3267,['горение','арены']);
+
+  R('C12H22O11 + H2O → 2C6H12O6','Гидролиз сахарозы','hydrolysis',
+    'Инвертный сахар — расщепление сахарозы до глюкозы и фруктозы',
+    ['C12H22O11','H2O'],['C6H12O6'],'H⁺, фермент',16.5,['углеводы']);
+
+  R('C6H12O6 → 2C3H6O3','Гликолиз (суммарная реакция)','exchange',
+    'Анаэробное расщепление глюкозы до молочной кислоты',
+    ['C6H12O6'],['C3H6O3'],'ферменты',-219,['гликолиз','обмен веществ']);
+
+  R('АДФ + H3PO4 → АТФ + H2O','Синтез АТФ','synthesis',
+    'Фосфорилирование АДФ с образованием АТФ',
+    ['C10H15N5O10P2','H3PO4'],['C21H28N7O14P2','H2O'],'АТФ-синтаза',-30.5,['энергетический обмен']);
+
+  R('АТФ + H2O → АДФ + H3PO4','Гидролиз АТФ','hydrolysis',
+    'Высвобождение энергии из АТФ путём гидролиза',
+    ['C21H28N7O14P2','H2O'],['C10H15N5O10P2','H3PO4'],'АТФаза',-30.5,['энергетический обмен']);
+
+  R('C2H5OH → C2H4 + H2O','Дегидратация спирта','decomposition',
+    'Получение этилена из этанола путём отщепления воды',
+    ['C2H5OH'],['C2H4','H2O'],'H₂SO₄, 170°C',null,['спирты','алкены']);
+
+  R('3CO2 + 3H2O → C3H6O3 + 3O2','Восстановление CO2 (цикл Кальвина)','synthesis',
+    'Цикл Кальвина — темновая фаза фотосинтеза',
+    ['CO2','H2O'],['C3H6O3'],'свет, хлоропласты',480,['фотосинтез']);
+
+  R('2H2O2 → 2H2O + O2','Разложение пероксида водорода','decomposition',
+    'Каталитическое разложение пероксида водорода каталазой',
+    ['H2O2'],['H2O','O2'],'каталаза',-98,['дыхание']);
+
+  R('C3H4O3 → CH3CHO + CO2','Декарбоксилирование пировиноградной кислоты','decomposition',
+    'Пируват → ацетальдегид + CO₂. Первый шаг спиртового брожения.',
+    ['C3H4O3'],['CH3CHO','CO2'],'ПВК-декарбоксилаза',null,['гликолиз']);
+
+  R('C3H4O3 + H2O → C3H6O3','Образование молочной кислоты','synthesis',
+    'Молочнокислое брожение — восстановление пирувата до лактата',
+    ['C3H4O3','H2O'],['C3H6O3'],'лактатдегидрогеназа',null,['брожение','гликолиз']);
+
+  R('2SO2 + O2 → 2SO3','Окисление серы до SO3','redox',
+    'Контактный метод получения триоксида серы',
+    ['SO2','O2'],['SO3'],'V₂O₅, 450-500°C',-98,['неорганика']);
+
+  R('SO3 + H2O → H2SO4','Получение H2SO4','synthesis',
+    'Серная кислота из триоксида серы',
+    ['SO3','H2O'],['H2SO4'],null,-130,['неорганика']);
+
+  R('2H2O → H3O+ + OH-','Диссоциация воды','decomposition',
+    'Аутопротолиз воды — равновесная диссоциация',
+    ['H2O'],['H2O'],null,55.8,['вода','pH']);
+
+  R('(Крахмал) + H2O → C6H12O6','Гидролиз крахмала','hydrolysis',
+    'Расщепление полисахарида до глюкозы при пищеварении',
+    ['H2O'],['C6H12O6'],'амилаза',null,['углеводы','пищеварение']);
+
+  R('C6H12O6 + 6O2 → 6CO2 + 6H2O','Клеточное дыхание','redox',
+    'Полное окисление глюкозы в митохондриях с синтезом АТФ',
+    ['C6H12O6','O2'],['CO2','H2O'],'митохондрии',-2808,['дыхание','обмен веществ']);
+
+  R('2C2H5NO2 → C4H8N2O3 + H2O','Образование пептидной связи','synthesis',
+    'Конденсация двух молекул глицина с образованием дипептида и воды',
+    ['C2H5NO2'],['C4H8N2O3','H2O'],'рибосома',17,['белки','синтез белка']);
+
+  R('(Белок) + H2O → аминокислоты','Гидролиз белка','hydrolysis',
+    'Расщепление пептидных связей белка до аминокислот',
+    ['H2O'],['C2H5NO2'],'протеазы',null,['белки','пищеварение']);
+
+  R('C16H32O2 + 23O2 → 16CO2 + 16H2O','Β-окисление пальмитиновой кислоты','redox',
+    'Полное окисление пальмитиновой кислоты в митохондриях',
+    ['C16H32O2','O2'],['CO2','H2O'],'митохондрии, β-оксидаза',-9790,['липиды','энергетический обмен']);
+
+  console.log('✓ Plan Phase 1: Extended reactions seeded');
+}
+
+/* ── Plan Phase 1: Extended challenges ── */
+{
+  const insChal2 = db.prepare(`INSERT INTO bio_challenges (title,description,type,target_formula,hint,xp_reward,difficulty,topic_tag,order_n,data_json)
+    SELECT ?,?,?,?,?,?,?,?,?,? WHERE NOT EXISTS (SELECT 1 FROM bio_challenges WHERE title=?)`);
+  const mid2 = f => db.prepare('SELECT id FROM bio_molecules WHERE formula=? LIMIT 1').get(f)?.id;
+  const mname2 = f => db.prepare('SELECT name_ru FROM bio_molecules WHERE formula=? LIMIT 1').get(f)?.name_ru;
+
+  // BUILD challenges (10 new)
+  [
+    { title:'Построй: HF',               target:'HF',      hint:'Водород + Фтор',                                                xp:35, d:1, t:'галогены',         n:19 },
+    { title:'Построй: Br2',              target:'Br2',     hint:'Два атома брома',                                               xp:35, d:1, t:'галогены',         n:20 },
+    { title:'Построй: NaOH',             target:'NaOH',    hint:'Натрий-кислород-водород',                                       xp:40, d:1, t:'кислоты-основания',n:21 },
+    { title:'Построй: NH4+',             target:'NH4Cl',   hint:'Азот + 4 водорода (катион аммония)',                           xp:40, d:1, t:'азот',             n:22 },
+    { title:'Построй: бензол C6H6',      target:'C6H6',    hint:'Шесть углеродов в кольце с чередующимися двойными связями',    xp:80, d:3, t:'арены',            n:23 },
+    { title:'Построй: уксусный альдегид',target:'CH3CHO',  hint:'Этаналь: CH₃-CHO',                                             xp:50, d:2, t:'альдегиды',        n:24 },
+    { title:'Построй: глицерин',         target:'C3H8O3',  hint:'Трёхатомный спирт — C₃H₅(OH)₃',                               xp:60, d:2, t:'спирты',           n:25 },
+    { title:'Построй: формальдегид CH2O',target:'CH2O',    hint:'Простейший альдегид — метаналь',                               xp:35, d:1, t:'альдегиды',        n:26 },
+    { title:'Построй: CaCO3',            target:'CaCO3',   hint:'Кальций + карбонат-ион',                                       xp:45, d:2, t:'соли',             n:27 },
+    { title:'Построй: KOH',              target:'KOH',     hint:'Калий + гидроксил',                                            xp:35, d:1, t:'кислоты-основания',n:28 },
+  ].forEach(c => {
+    const mol_id = mid2(c.target);
+    insChal2.run(c.title, `Построй молекулу: ${mname2(c.target) || c.target}`, 'build', c.target, c.hint, c.xp, c.d, c.t, c.n,
+      JSON.stringify({ mol_id }), c.title);
+  });
+
+  // IDENTIFY challenges (15 new)
+  [
+    { title:'Определи: этанол',               f:'C2H5OH',    choices:['Этанол','Этаналь','Метанол','Пропанол'],                                            xp:40, d:2, t:'спирты',               n:29 },
+    { title:'Определи: этилен',               f:'C2H4',      choices:['Этилен','Этан','Ацетилен','Метан'],                                                xp:40, d:2, t:'алкены',               n:30 },
+    { title:'Определи: уксусная кислота',     f:'CH3COOH',   choices:['Уксусная кислота','Молочная кислота','Пировиноградная к-та','Щавелевая к-та'],      xp:50, d:2, t:'органические кислоты', n:31 },
+    { title:'Определи: серная кислота',       f:'H2SO4',     choices:['Серная кислота','Соляная кислота','Азотная кислота','Фосфорная кислота'],           xp:40, d:1, t:'кислоты',              n:32 },
+    { title:'Определи: NaOH',                 f:'NaOH',      choices:['Гидроксид натрия','Карбонат натрия','Хлорид натрия','Гидрокарбонат натрия'],        xp:30, d:1, t:'кислоты-основания',    n:33 },
+    { title:'Определи: глюкоза',              f:'C6H12O6',   choices:['Глюкоза','Фруктоза','Сахароза','Рибоза'],                                           xp:60, d:2, t:'углеводы',             n:34 },
+    { title:'Определи: молочная кислота',     f:'C3H6O3',    choices:['Молочная кислота','Уксусная кислота','Глицерин','Пировиноградная к-та'],            xp:55, d:2, t:'обмен веществ',        n:35 },
+    { title:'Определи: аланин',               f:'C3H7NO2',   choices:['Аланин','Глицин','Серин','Валин'],                                                  xp:50, d:2, t:'аминокислоты',         n:36 },
+    { title:'Определи: серин',                f:'C3H7NO3',   choices:['Серин','Аланин','Цистеин','Треонин'],                                                xp:60, d:3, t:'аминокислоты',         n:37 },
+    { title:'Определи: бензол',               f:'C6H6',      choices:['Бензол','Гексан','Циклогексан','Толуол'],                                            xp:60, d:2, t:'арены',                n:38 },
+    { title:'Определи: глицерин',             f:'C3H8O3',    choices:['Глицерин','Этанол','Пропанол','Сорбит'],                                             xp:55, d:2, t:'липиды',               n:39 },
+    { title:'Определи: азотная кислота',      f:'HNO3',      choices:['Азотная кислота','Азотистая кислота','Серная кислота','Соляная кислота'],           xp:35, d:1, t:'кислоты',              n:40 },
+    { title:'Определи: H2O2',                 f:'H2O2',      choices:['Пероксид водорода','Вода','Озон','Гидроксид'],                                       xp:35, d:1, t:'вода',                 n:41 },
+    { title:'Определи: пировиноградная к-та', f:'C3H4O3',    choices:['Пировиноградная кислота','Молочная кислота','Уксусная кислота','Янтарная кислота'], xp:65, d:3, t:'гликолиз',             n:42 },
+    { title:'Определи: пропан',               f:'C3H8',      choices:['Пропан','Этан','Метан','Бутан'],                                                     xp:35, d:1, t:'алканы',               n:43 },
+  ].forEach(c => {
+    const mol_id = mid2(c.f);
+    insChal2.run(c.title, `Определи молекулу по структурной формуле`, 'identify', c.f, null, c.xp, c.d, c.t, c.n,
+      JSON.stringify({ mol_id, choices: c.choices }), c.title);
+  });
+
+  // FORMULA challenges (15 new)
+  [
+    { title:'Формула бензола',                       mol_name:'бензола',                  f:'C6H6',     choices:['C6H6','C6H12','C6H5OH','C7H8'],           xp:55, d:2, t:'арены',               n:44 },
+    { title:'Формула серной кислоты',                mol_name:'серной кислоты',            f:'H2SO4',    choices:['H2SO4','H2SO3','H2S','HSO4'],              xp:35, d:1, t:'кислоты',             n:45 },
+    { title:'Формула этилена',                       mol_name:'этилена',                   f:'C2H4',     choices:['C2H4','C2H6','C2H2','CH4'],                xp:40, d:2, t:'алкены',              n:46 },
+    { title:'Формула этанола',                       mol_name:'этанола',                   f:'C2H5OH',   choices:['C2H5OH','CH3OH','C3H7OH','C2H4O'],         xp:40, d:2, t:'спирты',              n:47 },
+    { title:'Формула пероксида водорода',             mol_name:'пероксида водорода',        f:'H2O2',     choices:['H2O2','H2O','HO','HO2'],                   xp:35, d:1, t:'вода',                n:48 },
+    { title:'Формула уксусной кислоты',              mol_name:'уксусной кислоты',          f:'CH3COOH',  choices:['CH3COOH','C2H5OH','HCOOH','C3H6O2'],       xp:45, d:2, t:'органические кислоты',n:49 },
+    { title:'Формула глюкозы',                       mol_name:'глюкозы',                   f:'C6H12O6',  choices:['C6H12O6','C5H10O5','C12H22O11','C6H10O5'],xp:55, d:2, t:'углеводы',             n:50 },
+    { title:'Формула аланина',                       mol_name:'аланина',                   f:'C3H7NO2',  choices:['C3H7NO2','C2H5NO2','C4H9NO2','C3H7NO3'],  xp:50, d:2, t:'аминокислоты',        n:51 },
+    { title:'Формула азотной кислоты',               mol_name:'азотной кислоты',           f:'HNO3',     choices:['HNO3','HNO2','N2O','NO2'],                 xp:35, d:1, t:'кислоты',             n:52 },
+    { title:'Формула NH3: аммиак',                   mol_name:'аммиака',                   f:'NH3',      choices:['NH3','N2H4','NO','NO2'],                   xp:25, d:1, t:'азот',                n:53 },
+    { title:'Формула фосфорной кислоты',             mol_name:'фосфорной кислоты',         f:'H3PO4',    choices:['H3PO4','H2PO4','HPO3','H3PO3'],            xp:50, d:2, t:'кислоты',             n:54 },
+    { title:'Формула сероводорода',                  mol_name:'сероводорода',              f:'H2S',      choices:['H2S','HS','H2SO4','SO2'],                  xp:35, d:1, t:'неорганика',          n:55 },
+    { title:'Формула молочной кислоты',              mol_name:'молочной кислоты',          f:'C3H6O3',   choices:['C3H6O3','C3H4O3','C2H4O2','C4H8O4'],      xp:55, d:2, t:'обмен веществ',       n:56 },
+    { title:'Формула пропана',                       mol_name:'пропана',                   f:'C3H8',     choices:['C3H8','C3H6','C2H6','C4H10'],              xp:35, d:1, t:'алканы',              n:57 },
+    { title:'Формула пировиноградной кислоты',       mol_name:'пировиноградной кислоты',   f:'C3H4O3',   choices:['C3H4O3','C3H6O3','C2H4O2','C4H6O4'],      xp:65, d:3, t:'гликолиз',            n:58 },
+  ].forEach(c => {
+    const mol_name = mname2(c.f) || c.mol_name;
+    insChal2.run(c.title, `Выбери правильную химическую формулу: ${mol_name}`, 'formula', c.f, null, c.xp, c.d, c.t, c.n,
+      JSON.stringify({ choices: c.choices, mol_name }), c.title);
+  });
+
+  console.log('✓ Plan Phase 1: Extended challenges seeded');
+}
+
+/* ── users.role: expand CHECK to include 'free_student' ─────────────────── */
+try {
+  const uInfo = db.prepare("PRAGMA table_info(users)").all();
+  // Detect if CHECK already allows free_student by attempting a dry-run (rollback)
+  const needsMigration = (() => {
+    try {
+      db.exec('SAVEPOINT chk_role_test');
+      db.exec("INSERT INTO users (email,password_hash,name,role) VALUES ('__chk__@x','x','x','free_student')");
+      db.exec('ROLLBACK TO chk_role_test');
+      db.exec('RELEASE chk_role_test');
+      return false; // already works
+    } catch {
+      try { db.exec('ROLLBACK TO chk_role_test'); db.exec('RELEASE chk_role_test'); } catch {}
+      return true;
+    }
+  })();
+
+  if (needsMigration) {
+    db.exec('PRAGMA foreign_keys = OFF');
+    db.exec(`
+      CREATE TABLE users_v2 (
+        id              INTEGER PRIMARY KEY AUTOINCREMENT,
+        email           TEXT UNIQUE NOT NULL,
+        password_hash   TEXT NOT NULL,
+        name            TEXT NOT NULL,
+        role            TEXT NOT NULL DEFAULT 'student'
+                        CHECK (role IN ('student','teacher','admin','free_student')),
+        created_at      TEXT NOT NULL DEFAULT (datetime('now')),
+        last_login      TEXT,
+        xp              INTEGER NOT NULL DEFAULT 0,
+        level           INTEGER NOT NULL DEFAULT 1,
+        streak_current  INTEGER NOT NULL DEFAULT 0,
+        streak_best     INTEGER NOT NULL DEFAULT 0,
+        streak_date     TEXT,
+        goal_tier       TEXT DEFAULT 'medium',
+        avatar_frame    TEXT DEFAULT 'default',
+        coins           INTEGER NOT NULL DEFAULT 0,
+        active_title    TEXT DEFAULT NULL,
+        active_theme    TEXT DEFAULT NULL,
+        active_effect   TEXT DEFAULT NULL,
+        token_version   INTEGER NOT NULL DEFAULT 0,
+        lab_experiments INTEGER NOT NULL DEFAULT 0,
+        lab_reactions   INTEGER NOT NULL DEFAULT 0,
+        is_banned       INTEGER NOT NULL DEFAULT 0
+      )
+    `);
+    // Copy only columns that exist in old table
+    const oldCols = uInfo.map(c => c.name);
+    const newCols = [
+      'id','email','password_hash','name','role','created_at','last_login',
+      'xp','level','streak_current','streak_best','streak_date',
+      'goal_tier','avatar_frame','coins',
+      'active_title','active_theme','active_effect',
+      'token_version','lab_experiments','lab_reactions','is_banned',
+    ].filter(c => oldCols.includes(c));
+    db.exec(`INSERT INTO users_v2 (${newCols.join(',')}) SELECT ${newCols.join(',')} FROM users`);
+    db.exec('DROP TABLE users');
+    db.exec('ALTER TABLE users_v2 RENAME TO users');
+    db.exec('PRAGMA foreign_keys = ON');
+    console.log('✓ users.role CHECK updated to include free_student');
+  } else {
+    console.log('✓ users.role already supports free_student');
+  }
+} catch (e) {
+  try { db.exec('PRAGMA foreign_keys = ON'); } catch {}
+  console.warn('users.role migration skipped:', e.message);
+}
+
+/* ── Phase 8.1: Add Z-coordinates to key molecules for 3D mode ─────────── */
+{
+  const getByFormula = db.prepare(
+    "SELECT id, formula, atoms_json FROM bio_molecules WHERE formula = ? ORDER BY id LIMIT 1"
+  );
+  const updateAtoms = db.prepare("UPDATE bio_molecules SET atoms_json = ? WHERE id = ?");
+
+  function pj(s) { try { return JSON.parse(s); } catch { return []; } }
+
+  // H2O: O at z=0, H1 (left) at z=+30, H2 (right) at z=-30 — angular geometry
+  const h2o = getByFormula.get('H2O');
+  if (h2o) {
+    const a = pj(h2o.atoms_json);
+    if (!a.some(x => x.z !== undefined)) {
+      let hIdx = 0;
+      const updated = a.map(x =>
+        x.s === 'O' ? { ...x, z: 0 } :
+        x.s === 'H' ? { ...x, z: hIdx++ === 0 ? 30 : -30 } : x
+      );
+      updateAtoms.run(JSON.stringify(updated), h2o.id);
+    }
+  }
+
+  // NH3: N at z=+20 (apex, pyramidal), H atoms at z=-15 (base)
+  const nh3 = getByFormula.get('NH3');
+  if (nh3) {
+    const a = pj(nh3.atoms_json);
+    if (!a.some(x => x.z !== undefined)) {
+      const updated = a.map(x =>
+        x.s === 'N' ? { ...x, z: 20 } :
+        x.s === 'H' ? { ...x, z: -15 } : x
+      );
+      updateAtoms.run(JSON.stringify(updated), nh3.id);
+    }
+  }
+
+  // CH4: C at z=0, tetrahedral H — alternate +35/-35
+  // 2D layout: H1 top, H2 right, H3 left, H4 bottom → z: +35,-35,+35,-35
+  const ch4 = getByFormula.get('CH4');
+  if (ch4) {
+    const a = pj(ch4.atoms_json);
+    if (!a.some(x => x.z !== undefined)) {
+      let hIdx = 0;
+      const hZ = [35, -35, 35, -35];
+      const updated = a.map(x =>
+        x.s === 'C' ? { ...x, z: 0 } :
+        x.s === 'H' ? { ...x, z: hZ[hIdx++] ?? 0 } : x
+      );
+      updateAtoms.run(JSON.stringify(updated), ch4.id);
+    }
+  }
+
+  // C6H6 benzene: planar — all z=0 (explicit)
+  const c6h6 = getByFormula.get('C6H6');
+  if (c6h6) {
+    const a = pj(c6h6.atoms_json);
+    if (!a.some(x => x.z !== undefined)) {
+      updateAtoms.run(JSON.stringify(a.map(x => ({ ...x, z: 0 }))), c6h6.id);
+    }
+  }
+
+  // Amino acids: N (amino group) at z=+30, O atoms at z=-20, C/H at z=0
+  const aminoAcids = db.prepare(
+    "SELECT id, atoms_json FROM bio_molecules WHERE category = 'amino_acid'"
+  ).all();
+  for (const mol of aminoAcids) {
+    const a = pj(mol.atoms_json);
+    if (a.some(x => x.z !== undefined)) continue;
+    let nIdx = 0;
+    const updated = a.map(x =>
+      x.s === 'N' ? { ...x, z: nIdx++ === 0 ? 30 : 10 } :
+      x.s === 'O' ? { ...x, z: -20 } :
+      { ...x, z: 0 }
+    );
+    updateAtoms.run(JSON.stringify(updated), mol.id);
+  }
+
+  console.log('✓ Phase 8.1: Z-coordinates added to key molecules');
+}
+
+/* ── Phase 8.2: Add 2D atom coordinates to molecules with empty atoms_json ── */
+{
+  const getEmpty  = db.prepare("SELECT id, formula, name_ru FROM bio_molecules WHERE atoms_json='[]' OR atoms_json IS NULL");
+  const setAtoms  = db.prepare("UPDATE bio_molecules SET atoms_json=?, bonds_json=? WHERE id=?");
+
+  // Purine ring scaffold (hexagon fused with pentagon sharing C4-C5 edge)
+  // Hexagon center ~(0,0), R=56; pentagon below, all heavy-atom ring positions
+  const PURINE_RING = {
+    atoms: [
+      {id:1,s:'N',x:56,  y:0},    // N3
+      {id:2,s:'C',x:28,  y:50},   // C4 (junction)
+      {id:3,s:'C',x:-28, y:50},   // C5 (junction)
+      {id:4,s:'C',x:-56, y:0},    // C6
+      {id:5,s:'N',x:-28, y:-50},  // N1
+      {id:6,s:'C',x:28,  y:-50},  // C2
+      {id:7,s:'N',x:45,  y:103},  // N9
+      {id:8,s:'C',x:0,   y:136},  // C8
+      {id:9,s:'N',x:-45, y:103},  // N7
+    ],
+    bonds: [
+      {f:1,t:2,o:2},{f:2,t:3,o:1},{f:3,t:4,o:2},{f:4,t:5,o:1},{f:5,t:6,o:2},{f:6,t:1,o:1}, // 6-ring
+      {f:2,t:7,o:1},{f:7,t:8,o:2},{f:8,t:9,o:1},{f:9,t:3,o:2}, // 5-ring
+    ],
+  };
+
+  // Pyrimidine ring scaffold (6-membered flat-bottom hexagon, R=50)
+  const PYRIM_RING = {
+    atoms: [
+      {id:1,s:'C',x:0,   y:-50},  // C2 (top)
+      {id:2,s:'N',x:43,  y:-25},  // N3
+      {id:3,s:'C',x:43,  y:25},   // C4
+      {id:4,s:'C',x:0,   y:50},   // C5
+      {id:5,s:'C',x:-43, y:25},   // C6
+      {id:6,s:'N',x:-43, y:-25},  // N1
+    ],
+    bonds: [
+      {f:6,t:1,o:1},{f:1,t:2,o:1},{f:2,t:3,o:2},{f:3,t:4,o:1},{f:4,t:5,o:2},{f:5,t:6,o:1},
+    ],
+  };
+
+  const STRUCTURES = {
+    // ── Nucleobases ──────────────────────────────────────────────────
+    'Аденин': {
+      // Purine: C6 has -NH2
+      atoms: [
+        ...PURINE_RING.atoms,
+        {id:10,s:'N',x:-100,y:0}, // exo NH2
+      ],
+      bonds: [
+        ...PURINE_RING.bonds,
+        {f:4,t:10,o:1},
+      ],
+    },
+    'Гуанин': {
+      // Purine: C6 has =O (keto), C2 has -NH2, N1 has H
+      atoms: [
+        ...PURINE_RING.atoms,
+        {id:10,s:'O',x:-100,y:0},   // C6=O
+        {id:11,s:'N',x:28, y:-95},  // C2-NH2
+      ],
+      bonds: [
+        ...PURINE_RING.bonds,
+        {f:4,t:10,o:2},  // C6=O
+        {f:6,t:11,o:1},  // C2-NH2
+      ],
+    },
+    'Цитозин': {
+      // Pyrimidine: C2=O, C4-NH2
+      atoms: [
+        ...PYRIM_RING.atoms,
+        {id:7,s:'O',x:0,   y:-95}, // C2=O
+        {id:8,s:'N',x:88,  y:42},  // C4-NH2
+      ],
+      bonds: [
+        ...PYRIM_RING.bonds,
+        {f:1,t:7,o:2},
+        {f:3,t:8,o:1},
+      ],
+    },
+    'Тимин': {
+      // Pyrimidine: C2=O, C4=O, C5-CH3
+      atoms: [
+        ...PYRIM_RING.atoms,
+        {id:7,s:'O',x:0,   y:-95},  // C2=O
+        {id:8,s:'O',x:88,  y:42},   // C4=O
+        {id:9,s:'C',x:0,   y:95},   // C5-CH3
+      ],
+      bonds: [
+        ...PYRIM_RING.bonds,
+        {f:1,t:7,o:2},
+        {f:3,t:8,o:2},
+        {f:4,t:9,o:1},
+      ],
+    },
+    'Урацил': {
+      // Pyrimidine: C2=O, C4=O
+      atoms: [
+        ...PYRIM_RING.atoms,
+        {id:7,s:'O',x:0,  y:-95},
+        {id:8,s:'O',x:88, y:42},
+      ],
+      bonds: [
+        ...PYRIM_RING.bonds,
+        {f:1,t:7,o:2},
+        {f:3,t:8,o:2},
+      ],
+    },
+
+    // ── Sugars ───────────────────────────────────────────────────────
+    'Глюкоза': {
+      // Pyranose ring (Haworth): O at top, C1-C5 clockwise, C6 branch on C5
+      atoms: [
+        {id:1,s:'O',x:0,  y:-48},  // ring O
+        {id:2,s:'C',x:46, y:-24},  // C1 (anomeric)
+        {id:3,s:'C',x:46, y:24},   // C2
+        {id:4,s:'C',x:0,  y:48},   // C3
+        {id:5,s:'C',x:-46,y:24},   // C4
+        {id:6,s:'C',x:-46,y:-24},  // C5
+        {id:7,s:'C',x:-85,y:-52},  // C6 (CH2OH)
+        {id:8,s:'O',x:85, y:-48},  // C1-OH
+      ],
+      bonds: [
+        {f:1,t:2,o:1},{f:2,t:3,o:1},{f:3,t:4,o:1},{f:4,t:5,o:1},{f:5,t:6,o:1},{f:6,t:1,o:1},
+        {f:6,t:7,o:1},{f:2,t:8,o:1},
+      ],
+    },
+    'Рибоза': {
+      // Furanose ring: O at top, C1-C4 clockwise, C5 branch
+      atoms: [
+        {id:1,s:'O',x:0,  y:-42},  // ring O
+        {id:2,s:'C',x:40, y:-13},  // C1
+        {id:3,s:'C',x:25, y:35},   // C2
+        {id:4,s:'C',x:-25,y:35},   // C3
+        {id:5,s:'C',x:-40,y:-13},  // C4
+        {id:6,s:'C',x:-70,y:-48},  // C5 (CH2OH)
+        {id:7,s:'O',x:72, y:-42},  // C1-OH
+      ],
+      bonds: [
+        {f:1,t:2,o:1},{f:2,t:3,o:1},{f:3,t:4,o:1},{f:4,t:5,o:1},{f:5,t:1,o:1},
+        {f:5,t:6,o:1},{f:2,t:7,o:1},
+      ],
+    },
+    'Дезоксирибоза': {
+      // Same as ribose but C2 lacks OH
+      atoms: [
+        {id:1,s:'O',x:0,  y:-42},
+        {id:2,s:'C',x:40, y:-13},  // C1
+        {id:3,s:'C',x:25, y:35},   // C2 (no OH — deoxygenated)
+        {id:4,s:'C',x:-25,y:35},   // C3
+        {id:5,s:'C',x:-40,y:-13},  // C4
+        {id:6,s:'C',x:-70,y:-48},  // C5
+        {id:7,s:'O',x:72, y:-42},  // C1-OH
+      ],
+      bonds: [
+        {f:1,t:2,o:1},{f:2,t:3,o:1},{f:3,t:4,o:1},{f:4,t:5,o:1},{f:5,t:1,o:1},
+        {f:5,t:6,o:1},{f:2,t:7,o:1},
+      ],
+    },
+    'Сахароза': {
+      // Two linked rings (simplified): glucose + fructose, joined via O bridge
+      atoms: [
+        // Glucose ring (left)
+        {id:1, s:'O',x:-60, y:-42}, // ring O
+        {id:2, s:'C',x:-20, y:-62},
+        {id:3, s:'C',x:10,  y:-28},
+        {id:4, s:'C',x:-5,  y:18},
+        {id:5, s:'C',x:-55, y:20},
+        {id:6, s:'C',x:-80, y:-20},
+        // Bridge O
+        {id:7, s:'O',x:50, y:-28},  // glycosidic O
+        // Fructose ring (right, furanose)
+        {id:8, s:'O',x:82, y:20},   // ring O
+        {id:9, s:'C',x:115,y:-5},
+        {id:10,s:'C',x:115,y:40},
+        {id:11,s:'C',x:75, y:55},
+        {id:12,s:'C',x:55, y:20},
+      ],
+      bonds: [
+        {f:1,t:2,o:1},{f:2,t:3,o:1},{f:3,t:4,o:1},{f:4,t:5,o:1},{f:5,t:6,o:1},{f:6,t:1,o:1},
+        {f:3,t:7,o:1},
+        {f:7,t:12,o:1},
+        {f:8,t:9,o:1},{f:9,t:10,o:1},{f:10,t:11,o:1},{f:11,t:12,o:1},{f:12,t:8,o:1},
+      ],
+    },
+
+    // ── Lipids ───────────────────────────────────────────────────────
+    'Олеиновая кислота': {
+      // C18 chain with cis double bond at C9-C10; show carboxyl + kink + chain
+      atoms: [
+        {id:1,s:'O',x:-85,y:0},  {id:2,s:'C',x:-55,y:0},  {id:3,s:'O',x:-55,y:-42},
+        {id:4,s:'C',x:-20,y:20}, {id:5,s:'C',x:15, y:0},
+        {id:6,s:'C',x:50, y:20}, {id:7,s:'C',x:85, y:0},
+        // cis double bond kink
+        {id:8,s:'C',x:115,y:10}, {id:9,s:'C',x:150,y:-10},
+        {id:10,s:'C',x:180,y:10},{id:11,s:'C',x:210,y:-10},
+        {id:12,s:'C',x:240,y:10},
+      ],
+      bonds: [
+        {f:1,t:2,o:2},{f:2,t:3,o:1},          // COOH
+        {f:2,t:4,o:1},{f:4,t:5,o:1},{f:5,t:6,o:1},{f:6,t:7,o:1},
+        {f:7,t:8,o:1},{f:8,t:9,o:2},           // C=C double bond
+        {f:9,t:10,o:1},{f:10,t:11,o:1},{f:11,t:12,o:1},
+      ],
+    },
+    'Пальмитиновая кислота': {
+      // C16 saturated chain; show carboxyl + zigzag
+      atoms: [
+        {id:1,s:'O',x:-85,y:0},  {id:2,s:'C',x:-55,y:0},  {id:3,s:'O',x:-55,y:-42},
+        {id:4,s:'C',x:-20,y:20}, {id:5,s:'C',x:15, y:0},
+        {id:6,s:'C',x:50, y:20}, {id:7,s:'C',x:85, y:0},
+        {id:8,s:'C',x:120,y:20}, {id:9,s:'C',x:155,y:0},
+        {id:10,s:'C',x:190,y:20},{id:11,s:'C',x:225,y:0},
+      ],
+      bonds: [
+        {f:1,t:2,o:2},{f:2,t:3,o:1},
+        {f:2,t:4,o:1},{f:4,t:5,o:1},{f:5,t:6,o:1},{f:6,t:7,o:1},
+        {f:7,t:8,o:1},{f:8,t:9,o:1},{f:9,t:10,o:1},{f:10,t:11,o:1},
+      ],
+    },
+
+    // ── Nucleotides ──────────────────────────────────────────────────
+    'АТФ': {
+      // Adenine + ribose + triphosphate (simplified)
+      atoms: [
+        // Adenine ring (purine, scaled down a bit)
+        {id:1,s:'N',x:42, y:0},  {id:2,s:'C',x:21, y:37},  {id:3,s:'C',x:-21,y:37},
+        {id:4,s:'C',x:-42,y:0},  {id:5,s:'N',x:-21,y:-37}, {id:6,s:'C',x:21, y:-37},
+        {id:7,s:'N',x:34, y:77}, {id:8,s:'C',x:0,  y:100}, {id:9,s:'N',x:-34,y:77},
+        {id:10,s:'N',x:-75,y:0}, // NH2
+        // Ribose
+        {id:11,s:'O',x:21, y:140},
+        {id:12,s:'C',x:55, y:155},{id:13,s:'C',x:65,y:195},
+        {id:14,s:'C',x:25,y:215},{id:15,s:'C',x:-5,y:185},
+        // Triphosphate tail
+        {id:16,s:'O',x:-25,y:215},
+        {id:17,s:'P',x:-60,y:220},{id:18,s:'O',x:-75,y:180},{id:19,s:'O',x:-90,y:250},
+        {id:20,s:'P',x:-115,y:218},{id:21,s:'O',x:-115,y:175},
+        {id:22,s:'P',x:-155,y:218},{id:23,s:'O',x:-155,y:175},
+      ],
+      bonds: [
+        // purine 6-ring
+        {f:1,t:2,o:2},{f:2,t:3,o:1},{f:3,t:4,o:2},{f:4,t:5,o:1},{f:5,t:6,o:2},{f:6,t:1,o:1},
+        // purine 5-ring
+        {f:2,t:7,o:1},{f:7,t:8,o:2},{f:8,t:9,o:1},{f:9,t:3,o:2},
+        // NH2
+        {f:4,t:10,o:1},
+        // glycosidic bond N9-ribose
+        {f:8,t:11,o:1},
+        // ribose ring
+        {f:11,t:12,o:1},{f:12,t:13,o:1},{f:13,t:14,o:1},{f:14,t:15,o:1},{f:15,t:11,o:1},
+        // 5'-O to phosphate
+        {f:15,t:16,o:1},
+        // triphosphate chain
+        {f:16,t:17,o:1},{f:17,t:18,o:2},{f:17,t:19,o:1},
+        {f:19,t:20,o:1},{f:20,t:21,o:2},
+        {f:20,t:22,o:1},{f:22,t:23,o:2},
+      ],
+    },
+    'АДФ': {
+      // Adenine + ribose + diphosphate (ATP minus one P)
+      atoms: [
+        {id:1,s:'N',x:42, y:0},  {id:2,s:'C',x:21, y:37},  {id:3,s:'C',x:-21,y:37},
+        {id:4,s:'C',x:-42,y:0},  {id:5,s:'N',x:-21,y:-37}, {id:6,s:'C',x:21, y:-37},
+        {id:7,s:'N',x:34, y:77}, {id:8,s:'C',x:0,  y:100}, {id:9,s:'N',x:-34,y:77},
+        {id:10,s:'N',x:-75,y:0},
+        {id:11,s:'O',x:21, y:140},
+        {id:12,s:'C',x:55, y:155},{id:13,s:'C',x:65,y:195},
+        {id:14,s:'C',x:25,y:215},{id:15,s:'C',x:-5,y:185},
+        {id:16,s:'O',x:-25,y:215},
+        {id:17,s:'P',x:-60,y:220},{id:18,s:'O',x:-75,y:180},{id:19,s:'O',x:-90,y:250},
+        {id:20,s:'P',x:-115,y:218},{id:21,s:'O',x:-115,y:175},
+      ],
+      bonds: [
+        {f:1,t:2,o:2},{f:2,t:3,o:1},{f:3,t:4,o:2},{f:4,t:5,o:1},{f:5,t:6,o:2},{f:6,t:1,o:1},
+        {f:2,t:7,o:1},{f:7,t:8,o:2},{f:8,t:9,o:1},{f:9,t:3,o:2},
+        {f:4,t:10,o:1},
+        {f:8,t:11,o:1},
+        {f:11,t:12,o:1},{f:12,t:13,o:1},{f:13,t:14,o:1},{f:14,t:15,o:1},{f:15,t:11,o:1},
+        {f:15,t:16,o:1},
+        {f:16,t:17,o:1},{f:17,t:18,o:2},{f:17,t:19,o:1},
+        {f:19,t:20,o:1},{f:20,t:21,o:2},
+      ],
+    },
+    'АМФ': {
+      // Adenine + ribose + monophosphate
+      atoms: [
+        {id:1,s:'N',x:42, y:0},  {id:2,s:'C',x:21, y:37},  {id:3,s:'C',x:-21,y:37},
+        {id:4,s:'C',x:-42,y:0},  {id:5,s:'N',x:-21,y:-37}, {id:6,s:'C',x:21, y:-37},
+        {id:7,s:'N',x:34, y:77}, {id:8,s:'C',x:0,  y:100}, {id:9,s:'N',x:-34,y:77},
+        {id:10,s:'N',x:-75,y:0},
+        {id:11,s:'O',x:21, y:140},
+        {id:12,s:'C',x:55, y:155},{id:13,s:'C',x:65,y:195},
+        {id:14,s:'C',x:25,y:215},{id:15,s:'C',x:-5,y:185},
+        {id:16,s:'O',x:-25,y:215},
+        {id:17,s:'P',x:-60,y:220},{id:18,s:'O',x:-75,y:180},{id:19,s:'O',x:-90,y:250},
+      ],
+      bonds: [
+        {f:1,t:2,o:2},{f:2,t:3,o:1},{f:3,t:4,o:2},{f:4,t:5,o:1},{f:5,t:6,o:2},{f:6,t:1,o:1},
+        {f:2,t:7,o:1},{f:7,t:8,o:2},{f:8,t:9,o:1},{f:9,t:3,o:2},
+        {f:4,t:10,o:1},
+        {f:8,t:11,o:1},
+        {f:11,t:12,o:1},{f:12,t:13,o:1},{f:13,t:14,o:1},{f:14,t:15,o:1},{f:15,t:11,o:1},
+        {f:15,t:16,o:1},
+        {f:16,t:17,o:1},{f:17,t:18,o:2},{f:17,t:19,o:1},
+      ],
+    },
+
+    // ── Small amino acids ────────────────────────────────────────────
+    'Серин': {
+      // HO-CH2-CH(NH2)-COOH  →  serine
+      atoms: [
+        {id:1,s:'O',x:-55,y:0},  {id:2,s:'C',x:-25,y:0},  {id:3,s:'O',x:-25,y:-45}, // COOH
+        {id:4,s:'C',x:10, y:20}, // Cα (NH2)
+        {id:5,s:'N',x:10, y:65}, // NH2
+        {id:6,s:'C',x:45, y:0},  // Cβ (CH2OH)
+        {id:7,s:'O',x:80, y:20}, // OH
+      ],
+      bonds: [
+        {f:1,t:2,o:2},{f:2,t:3,o:1},{f:2,t:4,o:1},
+        {f:4,t:5,o:1},{f:4,t:6,o:1},{f:6,t:7,o:1},
+      ],
+    },
+    'Треонин': {
+      // CH3-CH(OH)-CH(NH2)-COOH
+      atoms: [
+        {id:1,s:'O',x:-55,y:0},  {id:2,s:'C',x:-25,y:0},  {id:3,s:'O',x:-25,y:-45},
+        {id:4,s:'C',x:10, y:20},
+        {id:5,s:'N',x:10, y:65},
+        {id:6,s:'C',x:45, y:0},
+        {id:7,s:'O',x:80, y:20},
+        {id:8,s:'C',x:45, y:-45}, // methyl
+      ],
+      bonds: [
+        {f:1,t:2,o:2},{f:2,t:3,o:1},{f:2,t:4,o:1},
+        {f:4,t:5,o:1},{f:4,t:6,o:1},{f:6,t:7,o:1},{f:6,t:8,o:1},
+      ],
+    },
+
+    // ── Other ────────────────────────────────────────────────────────
+    'Глутатион': {
+      // γ-Glu-Cys-Gly tripeptide (simplified backbone)
+      atoms: [
+        {id:1,s:'N',x:-90,y:0},{id:2,s:'C',x:-55,y:0},{id:3,s:'C',x:-30,y:-35},{id:4,s:'O',x:-30,y:-75},
+        {id:5,s:'C',x:-20,y:30},{id:6,s:'C',x:10, y:0},{id:7,s:'O',x:10, y:-45},
+        {id:8,s:'N',x:40, y:20},{id:9,s:'C',x:70, y:0},{id:10,s:'S',x:110,y:20},
+        {id:11,s:'C',x:70, y:-45},{id:12,s:'O',x:70,y:-90},
+      ],
+      bonds: [
+        {f:1,t:2,o:1},{f:2,t:3,o:1},{f:3,t:4,o:2},{f:2,t:5,o:1},{f:5,t:6,o:1},
+        {f:6,t:7,o:2},{f:6,t:8,o:1},{f:8,t:9,o:1},{f:9,t:10,o:1},{f:9,t:11,o:1},{f:11,t:12,o:2},
+      ],
+    },
+    'Кортизол': {
+      // Steroid (4 fused rings, simplified with 4-ring skeleton)
+      atoms: [
+        // Ring A (left 6-ring)
+        {id:1,s:'C',x:-80,y:10},{id:2,s:'C',x:-55,y:-30},{id:3,s:'C',x:-15,y:-30},
+        {id:4,s:'C',x:-5, y:10},{id:5,s:'C',x:-30,y:45}, {id:6,s:'C',x:-65,y:45},
+        // Ring B (middle 6-ring, shares C4-C5 with A)
+        {id:7,s:'C',x:35, y:-30},{id:8,s:'C',x:55, y:10},{id:9,s:'C',x:30, y:45},
+        // Ring C (right 6-ring, shares C8-C9 with B)
+        {id:10,s:'C',x:95, y:-30},{id:11,s:'C',x:105,y:10},{id:12,s:'C',x:80, y:45},
+        // Ring D (5-ring, right)
+        {id:13,s:'C',x:130,y:20},{id:14,s:'C',x:125,y:60},
+        // Functional groups
+        {id:15,s:'O',x:-15,y:-68},{id:16,s:'O',x:130,y:-15},
+      ],
+      bonds: [
+        // Ring A
+        {f:1,t:2,o:1},{f:2,t:3,o:2},{f:3,t:4,o:1},{f:4,t:5,o:1},{f:5,t:6,o:1},{f:6,t:1,o:1},
+        // Ring B (C4-C8, C5-C9)
+        {f:4,t:7,o:1},{f:7,t:10,o:1},{f:10,t:11,o:1},{f:11,t:8,o:1},{f:8,t:9,o:1},{f:9,t:5,o:1},
+        // Ring C (C8-C11, C9-C12)
+        {f:8,t:13,o:1},{f:13,t:14,o:1},{f:14,t:12,o:1},{f:12,t:9,o:1},
+        // Ring D
+        {f:11,t:13,o:1},
+        // C3=O and C11-OH
+        {f:3,t:15,o:2},{f:10,t:16,o:1},
+      ],
+    },
+    'Морфин': {
+      // Complex alkaloid (simplified pentacyclic skeleton)
+      atoms: [
+        {id:1,s:'C',x:-30,y:-55},{id:2,s:'C',x:15, y:-55},{id:3,s:'C',x:42, y:-15},
+        {id:4,s:'C',x:25, y:30}, {id:5,s:'C',x:-20,y:30}, {id:6,s:'C',x:-48,y:-10},
+        {id:7,s:'O',x:-85,y:-10},{id:8,s:'C',x:65, y:20},{id:9,s:'N',x:50, y:65},
+        {id:10,s:'C',x:-5, y:75},{id:11,s:'C',x:-42,y:55},{id:12,s:'O',x:95, y:0},
+        {id:13,s:'C',x:50, y:-45},
+      ],
+      bonds: [
+        {f:1,t:2,o:2},{f:2,t:3,o:1},{f:3,t:4,o:2},{f:4,t:5,o:1},{f:5,t:6,o:2},{f:6,t:1,o:1},
+        {f:6,t:7,o:1},{f:3,t:8,o:1},{f:8,t:9,o:1},{f:9,t:10,o:1},{f:10,t:11,o:1},{f:11,t:5,o:1},
+        {f:8,t:12,o:1},{f:2,t:13,o:1},{f:13,t:8,o:1},
+      ],
+    },
+  };
+
+  const emptyMols = getEmpty.all();
+  let fixed = 0;
+  for (const mol of emptyMols) {
+    const s = STRUCTURES[mol.name_ru];
+    if (!s) continue;
+    setAtoms.run(JSON.stringify(s.atoms), JSON.stringify(s.bonds), mol.id);
+    fixed++;
+  }
+  console.log(`✓ Phase 8.2: 2D structures added to ${fixed} molecules`);
+}
+
+/* ── Fix role_permissions CHECK to include free_student ────────────────── */
+try {
+  const rpNeedsFix = (() => {
+    try {
+      db.exec('SAVEPOINT chk_rp_test');
+      db.exec("INSERT INTO role_permissions (role,permission,enabled) VALUES ('free_student','test',0)");
+      db.exec('ROLLBACK TO chk_rp_test');
+      db.exec('RELEASE chk_rp_test');
+      return false;
+    } catch {
+      try { db.exec('ROLLBACK TO chk_rp_test'); db.exec('RELEASE chk_rp_test'); } catch {}
+      return true;
+    }
+  })();
+  if (rpNeedsFix) {
+    db.exec('PRAGMA foreign_keys = OFF');
+    db.exec(`CREATE TABLE role_permissions_v2 (
+      id         INTEGER PRIMARY KEY AUTOINCREMENT,
+      role       TEXT NOT NULL CHECK (role IN ('teacher', 'student', 'free_student')),
+      permission TEXT NOT NULL,
+      enabled    INTEGER NOT NULL DEFAULT 0,
+      UNIQUE (role, permission)
+    )`);
+    db.exec('INSERT INTO role_permissions_v2 (id,role,permission,enabled) SELECT id,role,permission,enabled FROM role_permissions');
+    db.exec('DROP TABLE role_permissions');
+    db.exec('ALTER TABLE role_permissions_v2 RENAME TO role_permissions');
+    db.exec('PRAGMA foreign_keys = ON');
+    console.log('✓ role_permissions CHECK updated to include free_student');
+  }
+} catch (e) {
+  try { db.exec('PRAGMA foreign_keys = ON'); } catch {}
+  console.warn('role_permissions migration skipped:', e.message);
+}
+
+/* ── Parent links (parent dashboard access) ────────────────────────────── */
+db.exec(`
+  CREATE TABLE IF NOT EXISTS parent_links (
+    id          INTEGER PRIMARY KEY AUTOINCREMENT,
+    student_id  INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    token       TEXT UNIQUE NOT NULL,
+    label       TEXT NOT NULL DEFAULT '',
+    is_active   INTEGER NOT NULL DEFAULT 1,
+    last_used   TEXT,
+    created_at  TEXT NOT NULL DEFAULT (datetime('now')),
+    expires_at  TEXT
+  )
+`);
+db.exec('CREATE INDEX IF NOT EXISTS idx_parent_links_student ON parent_links(student_id)');
+db.exec('CREATE INDEX IF NOT EXISTS idx_parent_links_token   ON parent_links(token)');
+
+db.exec(`
+  CREATE TABLE IF NOT EXISTS parent_notifications (
+    id             INTEGER PRIMARY KEY AUTOINCREMENT,
+    parent_link_id INTEGER NOT NULL REFERENCES parent_links(id) ON DELETE CASCADE,
+    type           TEXT NOT NULL DEFAULT 'info',
+    message        TEXT NOT NULL,
+    is_read        INTEGER NOT NULL DEFAULT 0,
+    created_at     TEXT NOT NULL DEFAULT (datetime('now'))
+  )
+`);
+db.exec('CREATE INDEX IF NOT EXISTS idx_parent_notif_link ON parent_notifications(parent_link_id, is_read)');
+/* Composite index for parent notification queries ordered by date */
+db.exec('CREATE INDEX IF NOT EXISTS idx_parent_notif_link_date ON parent_notifications(parent_link_id, created_at DESC)');
+/* Composite index for parent dashboard session queries */
+db.exec('CREATE INDEX IF NOT EXISTS idx_sessions_user_status_date ON test_sessions(user_id, status, started_at DESC)');
+
+/* ── Admin audit log ───────────────────────────────────────────────────── */
+db.exec(`
+  CREATE TABLE IF NOT EXISTS admin_audit_log (
+    id         INTEGER PRIMARY KEY AUTOINCREMENT,
+    admin_id   INTEGER NOT NULL REFERENCES users(id),
+    action     TEXT NOT NULL,
+    target     TEXT,
+    detail     TEXT,
+    ip         TEXT,
+    created_at TEXT NOT NULL DEFAULT (datetime('now'))
+  )
+`);
+db.exec('CREATE INDEX IF NOT EXISTS idx_audit_log_date ON admin_audit_log(created_at DESC)');
+db.exec('CREATE INDEX IF NOT EXISTS idx_audit_log_admin ON admin_audit_log(admin_id)');
+
+/* ── Error log ─────────────────────────────────────────────────────────── */
+db.exec(`
+  CREATE TABLE IF NOT EXISTS error_log (
+    id         INTEGER PRIMARY KEY AUTOINCREMENT,
+    level      TEXT NOT NULL DEFAULT 'error',
+    message    TEXT NOT NULL,
+    stack      TEXT,
+    route      TEXT,
+    method     TEXT,
+    user_id    INTEGER,
+    created_at TEXT NOT NULL DEFAULT (datetime('now'))
+  )
+`);
+db.exec('CREATE INDEX IF NOT EXISTS idx_error_log_date ON error_log(created_at DESC)');
+
+/* ── Online Classroom ───────────────────────────────────────────────────── */
+db.exec(`
+  CREATE TABLE IF NOT EXISTS classroom_sessions (
+    id           INTEGER PRIMARY KEY AUTOINCREMENT,
+    class_id     INTEGER REFERENCES classes(id) ON DELETE CASCADE,
+    teacher_id   INTEGER NOT NULL REFERENCES users(id),
+    title        TEXT NOT NULL DEFAULT '',
+    status       TEXT NOT NULL DEFAULT 'active',
+    current_page INTEGER NOT NULL DEFAULT 1,
+    created_at   TEXT NOT NULL DEFAULT (datetime('now')),
+    ended_at     TEXT
+  )
+`);
+db.exec('CREATE INDEX IF NOT EXISTS idx_cr_sessions_class ON classroom_sessions(class_id, status)');
+
+db.exec(`
+  CREATE TABLE IF NOT EXISTS classroom_invites (
+    id         INTEGER PRIMARY KEY AUTOINCREMENT,
+    session_id INTEGER NOT NULL REFERENCES classroom_sessions(id) ON DELETE CASCADE,
+    user_id    INTEGER NOT NULL REFERENCES users(id),
+    UNIQUE(session_id, user_id)
+  )
+`);
+
+db.exec(`
+  CREATE TABLE IF NOT EXISTS classroom_pages (
+    id         INTEGER PRIMARY KEY AUTOINCREMENT,
+    session_id INTEGER NOT NULL REFERENCES classroom_sessions(id) ON DELETE CASCADE,
+    page_num   INTEGER NOT NULL DEFAULT 1,
+    bg_color   TEXT NOT NULL DEFAULT '#ffffff',
+    template   TEXT NOT NULL DEFAULT 'blank',
+    UNIQUE(session_id, page_num)
+  )
+`);
+// Add template column to existing classroom_pages tables (idempotent)
+try { db.exec(`ALTER TABLE classroom_pages ADD COLUMN template TEXT NOT NULL DEFAULT 'blank'`); } catch (_) { /* already exists */ }
+
+db.exec(`
+  CREATE TABLE IF NOT EXISTS classroom_strokes (
+    id         INTEGER PRIMARY KEY AUTOINCREMENT,
+    session_id INTEGER NOT NULL REFERENCES classroom_sessions(id) ON DELETE CASCADE,
+    page_num   INTEGER NOT NULL DEFAULT 1,
+    user_id    INTEGER NOT NULL REFERENCES users(id),
+    tool       TEXT NOT NULL DEFAULT 'pencil',
+    data       TEXT NOT NULL,
+    seq        INTEGER NOT NULL,
+    created_at TEXT NOT NULL DEFAULT (datetime('now'))
+  )
+`);
+db.exec('CREATE INDEX IF NOT EXISTS idx_cr_strokes ON classroom_strokes(session_id, page_num, seq)');
+
+db.exec(`
+  CREATE TABLE IF NOT EXISTS classroom_chat (
+    id         INTEGER PRIMARY KEY AUTOINCREMENT,
+    session_id INTEGER NOT NULL REFERENCES classroom_sessions(id) ON DELETE CASCADE,
+    user_id    INTEGER NOT NULL REFERENCES users(id),
+    message    TEXT NOT NULL,
+    created_at TEXT NOT NULL DEFAULT (datetime('now'))
+  )
+`);
+db.exec('CREATE INDEX IF NOT EXISTS idx_cr_chat ON classroom_chat(session_id)');
+
+db.exec(`
+  CREATE TABLE IF NOT EXISTS classroom_attendance (
+    id         INTEGER PRIMARY KEY AUTOINCREMENT,
+    session_id INTEGER NOT NULL REFERENCES classroom_sessions(id) ON DELETE CASCADE,
+    user_id    INTEGER NOT NULL REFERENCES users(id),
+    joined_at  TEXT NOT NULL DEFAULT (datetime('now')),
+    left_at    TEXT,
+    UNIQUE(session_id, user_id)
+  )
+`);
+
+// Add pinned column to classroom_chat if not exists (safe ALTER TABLE)
+try { db.exec(`ALTER TABLE classroom_chat ADD COLUMN pinned INTEGER NOT NULL DEFAULT 0`); } catch {}
+try { db.exec(`ALTER TABLE classroom_chat ADD COLUMN attachment_url  TEXT`); } catch {}
+try { db.exec(`ALTER TABLE classroom_chat ADD COLUMN attachment_type TEXT`); } catch {}
+
+// Chat reactions
+db.exec(`
+  CREATE TABLE IF NOT EXISTS classroom_chat_reactions (
+    id         INTEGER PRIMARY KEY AUTOINCREMENT,
+    chat_id    INTEGER NOT NULL REFERENCES classroom_chat(id) ON DELETE CASCADE,
+    user_id    INTEGER NOT NULL REFERENCES users(id),
+    reaction   TEXT    NOT NULL,
+    created_at TEXT    NOT NULL DEFAULT (datetime('now')),
+    UNIQUE(chat_id, user_id, reaction)
+  )
+`);
+db.exec('CREATE INDEX IF NOT EXISTS idx_cr_reactions ON classroom_chat_reactions(chat_id)');
+
+// Per-user session notes
+db.exec(`
+  CREATE TABLE IF NOT EXISTS classroom_notes (
+    id         INTEGER PRIMARY KEY AUTOINCREMENT,
+    session_id INTEGER NOT NULL REFERENCES classroom_sessions(id) ON DELETE CASCADE,
+    user_id    INTEGER NOT NULL REFERENCES users(id),
+    content    TEXT    NOT NULL DEFAULT '',
+    updated_at TEXT    NOT NULL DEFAULT (datetime('now')),
+    UNIQUE(session_id, user_id)
+  )
+`);
+
+// Lesson templates (saved whiteboard state)
+db.exec(`
+  CREATE TABLE IF NOT EXISTS classroom_templates (
+    id          INTEGER PRIMARY KEY AUTOINCREMENT,
+    teacher_id  INTEGER NOT NULL REFERENCES users(id),
+    title       TEXT    NOT NULL,
+    description TEXT    DEFAULT '',
+    pages_data  TEXT    NOT NULL DEFAULT '[]',
+    created_at  TEXT    NOT NULL DEFAULT (datetime('now'))
+  )
+`);
+
+// Persistent draw permissions (survives server restart)
+db.exec(`
+  CREATE TABLE IF NOT EXISTS classroom_draw_permissions (
+    session_id INTEGER NOT NULL REFERENCES classroom_sessions(id) ON DELETE CASCADE,
+    user_id    INTEGER NOT NULL REFERENCES users(id),
+    PRIMARY KEY (session_id, user_id)
+  )
+`);
diff --git a/backend/src/db/migrations/001_init.sql b/backend/src/db/migrations/001_init.sql
new file mode 100644
index 0000000..482d09e
--- /dev/null
+++ b/backend/src/db/migrations/001_init.sql
@@ -0,0 +1,102 @@
+-- =============================================
+--  LearnSpace — Initial schema
+-- =============================================
+
+-- Расширения
+CREATE EXTENSION IF NOT EXISTS "pgcrypto";
+
+-- ── Пользователи ──────────────────────────────
+CREATE TABLE IF NOT EXISTS users (
+  id            SERIAL PRIMARY KEY,
+  email         VARCHAR(255) UNIQUE NOT NULL,
+  password_hash VARCHAR(255) NOT NULL,
+  name          VARCHAR(255) NOT NULL,
+  role          VARCHAR(20)  NOT NULL DEFAULT 'student'
+                CHECK (role IN ('student', 'teacher', 'admin')),
+  created_at    TIMESTAMPTZ  NOT NULL DEFAULT NOW(),
+  last_login    TIMESTAMPTZ
+);
+
+-- ── Предметы ──────────────────────────────────
+CREATE TABLE IF NOT EXISTS subjects (
+  id   SERIAL PRIMARY KEY,
+  slug VARCHAR(50) UNIQUE NOT NULL,
+  name VARCHAR(100) NOT NULL,
+  icon VARCHAR(10)
+);
+
+INSERT INTO subjects (slug, name, icon) VALUES
+  ('bio',  'Биология',   'dna'),
+  ('chem', 'Химия',      'atom'),
+  ('math', 'Математика', 'compass'),
+  ('phys', 'Физика',     'zap')
+ON CONFLICT DO NOTHING;
+
+-- ── Темы ──────────────────────────────────────
+CREATE TABLE IF NOT EXISTS topics (
+  id          SERIAL PRIMARY KEY,
+  subject_id  INT NOT NULL REFERENCES subjects(id) ON DELETE CASCADE,
+  name        VARCHAR(255) NOT NULL,
+  order_index INT NOT NULL DEFAULT 0
+);
+
+-- ── Банк вопросов ─────────────────────────────
+CREATE TABLE IF NOT EXISTS questions (
+  id          SERIAL PRIMARY KEY,
+  subject_id  INT  NOT NULL REFERENCES subjects(id) ON DELETE CASCADE,
+  topic_id    INT  REFERENCES topics(id) ON DELETE SET NULL,
+  text        TEXT NOT NULL,
+  difficulty  SMALLINT NOT NULL DEFAULT 1 CHECK (difficulty BETWEEN 1 AND 3),
+  year        SMALLINT,
+  explanation TEXT,
+  created_at  TIMESTAMPTZ NOT NULL DEFAULT NOW()
+);
+
+-- ── Варианты ответов ──────────────────────────
+CREATE TABLE IF NOT EXISTS options (
+  id          SERIAL PRIMARY KEY,
+  question_id INT  NOT NULL REFERENCES questions(id) ON DELETE CASCADE,
+  text        TEXT NOT NULL,
+  is_correct  BOOLEAN NOT NULL DEFAULT FALSE,
+  order_index SMALLINT NOT NULL DEFAULT 0
+);
+
+-- ── Сессии тестирования ───────────────────────
+CREATE TABLE IF NOT EXISTS test_sessions (
+  id           SERIAL PRIMARY KEY,
+  user_id      INT NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+  subject_id   INT REFERENCES subjects(id) ON DELETE SET NULL,
+  mode         VARCHAR(20) NOT NULL DEFAULT 'exam'
+               CHECK (mode IN ('exam', 'practice', 'topic', 'random')),
+  total        INT NOT NULL,
+  score        INT,
+  status       VARCHAR(20) NOT NULL DEFAULT 'in_progress'
+               CHECK (status IN ('in_progress', 'completed', 'abandoned')),
+  started_at   TIMESTAMPTZ NOT NULL DEFAULT NOW(),
+  finished_at  TIMESTAMPTZ
+);
+
+-- ── Вопросы сессии ────────────────────────────
+CREATE TABLE IF NOT EXISTS session_questions (
+  id          SERIAL PRIMARY KEY,
+  session_id  INT NOT NULL REFERENCES test_sessions(id) ON DELETE CASCADE,
+  question_id INT NOT NULL REFERENCES questions(id),
+  order_index INT NOT NULL
+);
+
+-- ── Ответы пользователя ───────────────────────
+CREATE TABLE IF NOT EXISTS user_answers (
+  id               SERIAL PRIMARY KEY,
+  session_id       INT NOT NULL REFERENCES test_sessions(id) ON DELETE CASCADE,
+  question_id      INT NOT NULL REFERENCES questions(id),
+  chosen_option_id INT REFERENCES options(id),
+  is_correct       BOOLEAN,
+  time_spent_sec   SMALLINT,
+  answered_at      TIMESTAMPTZ NOT NULL DEFAULT NOW()
+);
+
+-- ── Индексы ───────────────────────────────────
+CREATE INDEX IF NOT EXISTS idx_questions_subject ON questions(subject_id);
+CREATE INDEX IF NOT EXISTS idx_questions_topic   ON questions(topic_id);
+CREATE INDEX IF NOT EXISTS idx_sessions_user     ON test_sessions(user_id);
+CREATE INDEX IF NOT EXISTS idx_answers_session   ON user_answers(session_id);
diff --git a/backend/src/db/migrations/002_constraints.sql b/backend/src/db/migrations/002_constraints.sql
new file mode 100644
index 0000000..cb69e10
--- /dev/null
+++ b/backend/src/db/migrations/002_constraints.sql
@@ -0,0 +1,3 @@
+-- Уникальный индекс для upsert ответов
+CREATE UNIQUE INDEX IF NOT EXISTS idx_answers_session_question
+  ON user_answers (session_id, question_id);
diff --git a/backend/src/db/seed-chem.js b/backend/src/db/seed-chem.js
new file mode 100644
index 0000000..5da38c4
--- /dev/null
+++ b/backend/src/db/seed-chem.js
@@ -0,0 +1,1083 @@
+/**
+ * Seed: Химия — базовый уровень (~100 вопросов)
+ * Темы: основные понятия, периодический закон, строение атома, химическая связь,
+ *       классы веществ, реакции, моль и расчёты, растворы, ОВР, органика
+ * Run: node src/db/seed-chem.js  (из папки backend)
+ */
+'use strict';
+const db = require('./db');
+
+function getOrCreateTopic(subjectId, name) {
+  const existing = db.prepare(
+    'SELECT id FROM topics WHERE subject_id = ? AND LOWER(name) = LOWER(?)'
+  ).get(subjectId, name);
+  if (existing) return existing.id;
+  return db.prepare('INSERT INTO topics (subject_id, name) VALUES (?, ?)')
+    .run(subjectId, name).lastInsertRowid;
+}
+
+const chem = db.prepare("SELECT id FROM subjects WHERE slug = 'chem'").get();
+if (!chem) { console.error('Subject "chem" not found. Run migrate first.'); process.exit(1); }
+const SID = chem.id;
+
+const questions = [
+
+  /* ══════════════════════════════════════════════════════════════════════
+     ОСНОВНЫЕ ПОНЯТИЯ
+  ══════════════════════════════════════════════════════════════════════ */
+  {
+    topic: 'Основные понятия химии', difficulty: 1, type: 'single',
+    text: 'Наименьшая частица химического элемента, сохраняющая его химические свойства:',
+    options: [
+      { text: 'Атом',     correct: true  },
+      { text: 'Молекула', correct: false },
+      { text: 'Ион',      correct: false },
+      { text: 'Нейтрон',  correct: false },
+    ],
+    explanation: 'Атом — наименьшая частица химического элемента, обладающая его химическими свойствами. Молекула — наименьшая частица вещества.',
+  },
+  {
+    topic: 'Основные понятия химии', difficulty: 1, type: 'single',
+    text: 'Молярная масса серной кислоты \\(H_2SO_4\\):',
+    options: [
+      { text: '98 г/моль', correct: true  },
+      { text: '80 г/моль', correct: false },
+      { text: '64 г/моль', correct: false },
+      { text: '48 г/моль', correct: false },
+    ],
+    explanation: '\\(M(H_2SO_4) = 2\\cdot1 + 32 + 4\\cdot16 = 2+32+64 = 98\\,\\text{г/моль}\\).',
+  },
+  {
+    topic: 'Основные понятия химии', difficulty: 1, type: 'single',
+    text: 'Количество вещества 36 г воды \\(H_2O\\) (\\(M = 18\\) г/моль):',
+    options: [
+      { text: '2 моль',  correct: true  },
+      { text: '18 моль', correct: false },
+      { text: '0,5 моль', correct: false },
+      { text: '36 моль', correct: false },
+    ],
+    explanation: '\\(n = \\dfrac{m}{M} = \\dfrac{36}{18} = 2\\,\\text{моль}\\).',
+  },
+  {
+    topic: 'Основные понятия химии', difficulty: 1, type: 'single',
+    text: 'Масса 3 моль углекислого газа \\(CO_2\\) (\\(M = 44\\) г/моль):',
+    options: [
+      { text: '132 г', correct: true  },
+      { text: '44 г',  correct: false },
+      { text: '66 г',  correct: false },
+      { text: '88 г',  correct: false },
+    ],
+    explanation: '\\(m = nM = 3\\cdot44 = 132\\,\\text{г}\\).',
+  },
+  {
+    topic: 'Основные понятия химии', difficulty: 2, type: 'single',
+    text: 'Число молекул в 2 моль газа (\\(N_A = 6{,}02\\cdot10^{23}\\)):',
+    options: [
+      { text: '\\(1{,}204\\cdot10^{24}\\)', correct: true  },
+      { text: '\\(6{,}02\\cdot10^{23}\\)',  correct: false },
+      { text: '\\(3{,}01\\cdot10^{23}\\)',  correct: false },
+      { text: '\\(2{,}4\\cdot10^{22}\\)',   correct: false },
+    ],
+    explanation: '\\(N = n\\cdot N_A = 2\\cdot6{,}02\\cdot10^{23} = 1{,}204\\cdot10^{24}\\).',
+  },
+  {
+    topic: 'Основные понятия химии', difficulty: 2, type: 'single',
+    text: 'Молярный объём газа при нормальных условиях (н.у.):',
+    options: [
+      { text: '22,4 л/моль', correct: true  },
+      { text: '24,0 л/моль', correct: false },
+      { text: '11,2 л/моль', correct: false },
+      { text: '18,0 л/моль', correct: false },
+    ],
+    explanation: 'При нормальных условиях (0°C, 101 325 Па) молярный объём любого идеального газа равен 22,4 л/моль.',
+  },
+  {
+    topic: 'Основные понятия химии', difficulty: 2, type: 'single',
+    text: 'Объём 4 г кислорода \\(O_2\\) при нормальных условиях (\\(M = 32\\) г/моль, \\(V_m = 22{,}4\\) л/моль):',
+    options: [
+      { text: '2,8 л',  correct: true  },
+      { text: '22,4 л', correct: false },
+      { text: '11,2 л', correct: false },
+      { text: '44,8 л', correct: false },
+    ],
+    explanation: '\\(n = 4/32 = 0{,}125\\,\\text{моль}\\);  \\(V = 0{,}125\\cdot22{,}4 = 2{,}8\\,\\text{л}\\).',
+  },
+  {
+    topic: 'Основные понятия химии', difficulty: 2, type: 'single',
+    text: 'Массовая доля кислорода в воде \\(H_2O\\):',
+    options: [
+      { text: '88,9%', correct: true  },
+      { text: '11,1%', correct: false },
+      { text: '50%',   correct: false },
+      { text: '66,7%', correct: false },
+    ],
+    explanation: '\\(\\omega(O) = \\dfrac{16}{18}\\approx 0{,}889 = 88{,}9\\%\\).',
+  },
+  {
+    topic: 'Основные понятия химии', difficulty: 3, type: 'single',
+    text: 'Молярная масса газа, если 5,6 л (н.у.) этого газа имеют массу 11 г:',
+    options: [
+      { text: '44 г/моль', correct: true  },
+      { text: '22 г/моль', correct: false },
+      { text: '28 г/моль', correct: false },
+      { text: '32 г/моль', correct: false },
+    ],
+    explanation: '\\(n = 5{,}6/22{,}4 = 0{,}25\\,\\text{моль}\\);  \\(M = m/n = 11/0{,}25 = 44\\,\\text{г/моль}\\). Это \\(CO_2\\).',
+  },
+
+  /* ══════════════════════════════════════════════════════════════════════
+     ПЕРИОДИЧЕСКИЙ ЗАКОН. СТРОЕНИЕ АТОМА
+  ══════════════════════════════════════════════════════════════════════ */
+  {
+    topic: 'Периодический закон и строение атома', difficulty: 1, type: 'single',
+    text: 'Порядковый номер химического элемента в периодической таблице равен:',
+    options: [
+      { text: 'числу протонов в ядре атома',             correct: true  },
+      { text: 'числу нейтронов в ядре атома',            correct: false },
+      { text: 'числу электронов на внешнем уровне',       correct: false },
+      { text: 'атомной массе элемента',                   correct: false },
+    ],
+    explanation: 'Порядковый (атомный) номер = число протонов = число электронов (для нейтрального атома).',
+  },
+  {
+    topic: 'Периодический закон и строение атома', difficulty: 1, type: 'single',
+    text: 'Число нейтронов в ядре атома хлора \\(^{35}_{17}Cl\\):',
+    options: [
+      { text: '18', correct: true  },
+      { text: '17', correct: false },
+      { text: '35', correct: false },
+      { text: '52', correct: false },
+    ],
+    explanation: 'Число нейтронов \\(N = A - Z = 35 - 17 = 18\\).',
+  },
+  {
+    topic: 'Периодический закон и строение атома', difficulty: 1, type: 'single',
+    text: 'Электронная конфигурация атома натрия (\\(Z = 11\\)):',
+    options: [
+      { text: '\\(1s^2\\,2s^2\\,2p^6\\,3s^1\\)', correct: true  },
+      { text: '\\(1s^2\\,2s^2\\,2p^6\\,3s^2\\)', correct: false },
+      { text: '\\(1s^2\\,2s^2\\,2p^5\\,3s^2\\)', correct: false },
+      { text: '\\(1s^2\\,2s^2\\,2p^9\\)',          correct: false },
+    ],
+    explanation: 'Na (\\(Z=11\\)): 2 + 2 + 6 + 1 = 11 электронов. Конфигурация: \\(1s^2\\,2s^2\\,2p^6\\,3s^1\\).',
+  },
+  {
+    topic: 'Периодический закон и строение атома', difficulty: 1, type: 'single',
+    text: 'Число электронов во внешнем слое атома хлора (группа VIIA, период 3):',
+    options: [
+      { text: '7', correct: true  },
+      { text: '3', correct: false },
+      { text: '5', correct: false },
+      { text: '8', correct: false },
+    ],
+    explanation: 'Хлор находится в VII группе главной подгруппы → 7 электронов на внешнем уровне.',
+  },
+  {
+    topic: 'Периодический закон и строение атома', difficulty: 2, type: 'single',
+    text: 'При движении слева направо вдоль периода атомный радиус:',
+    options: [
+      { text: 'уменьшается',                      correct: true  },
+      { text: 'увеличивается',                     correct: false },
+      { text: 'сначала уменьшается, потом растёт', correct: false },
+      { text: 'не изменяется',                     correct: false },
+    ],
+    explanation: 'В периоде слева направо растёт заряд ядра при том же числе электронных слоёв → притяжение усиливается → радиус уменьшается.',
+  },
+  {
+    topic: 'Периодический закон и строение атома', difficulty: 2, type: 'single',
+    text: 'Какой из элементов обладает наибольшей электроотрицательностью?',
+    options: [
+      { text: 'Фтор (F)',    correct: true  },
+      { text: 'Кислород (O)', correct: false },
+      { text: 'Хлор (Cl)',   correct: false },
+      { text: 'Азот (N)',    correct: false },
+    ],
+    explanation: 'Фтор — самый электроотрицательный элемент (ЭО = 4,0 по шкале Полинга).',
+  },
+  {
+    topic: 'Периодический закон и строение атома', difficulty: 2, type: 'single',
+    text: 'Изотопы — это атомы одного элемента, различающиеся:',
+    options: [
+      { text: 'числом нейтронов',            correct: true  },
+      { text: 'числом протонов',             correct: false },
+      { text: 'числом электронов',           correct: false },
+      { text: 'числом электронных слоёв',    correct: false },
+    ],
+    explanation: 'Изотопы имеют одинаковое число протонов (один элемент), но разное число нейтронов → разные массовые числа.',
+  },
+  {
+    topic: 'Периодический закон и строение атома', difficulty: 3, type: 'single',
+    text: 'Какой элемент имеет электронную конфигурацию \\([Ne]\\,3s^2\\,3p^4\\)?',
+    options: [
+      { text: 'Сера (S)',      correct: true  },
+      { text: 'Кислород (O)', correct: false },
+      { text: 'Кремний (Si)',  correct: false },
+      { text: 'Хлор (Cl)',    correct: false },
+    ],
+    explanation: '\\([Ne] = 1s^2\\,2s^2\\,2p^6\\) (10 эл.) + \\(3s^2\\,3p^4\\) (6 эл.) = 16 эл. → \\(Z=16\\), это сера.',
+  },
+
+  /* ══════════════════════════════════════════════════════════════════════
+     ХИМИЧЕСКАЯ СВЯЗЬ
+  ══════════════════════════════════════════════════════════════════════ */
+  {
+    topic: 'Химическая связь', difficulty: 1, type: 'single',
+    text: 'Ковалентная полярная связь присутствует в молекуле:',
+    options: [
+      { text: '\\(HCl\\)',  correct: true  },
+      { text: '\\(Cl_2\\)', correct: false },
+      { text: '\\(NaCl\\)', correct: false },
+      { text: '\\(Na\\)',   correct: false },
+    ],
+    explanation: '\\(HCl\\): связь между атомами H и Cl разной электроотрицательности → ковалентная полярная. \\(Cl_2\\) — неполярная, \\(NaCl\\) — ионная.',
+  },
+  {
+    topic: 'Химическая связь', difficulty: 1, type: 'single',
+    text: 'Ионная связь образуется между:',
+    options: [
+      { text: 'металлом и неметаллом (типичными)',        correct: true  },
+      { text: 'двумя неметаллами',                        correct: false },
+      { text: 'двумя металлами',                          correct: false },
+      { text: 'атомами одного неметалла',                 correct: false },
+    ],
+    explanation: 'Ионная связь возникает при большой разнице ЭО, типично между щелочными металлами и галогенами/кислородом.',
+  },
+  {
+    topic: 'Химическая связь', difficulty: 2, type: 'single',
+    text: 'Тип химической связи в молекуле \\(H_2\\):',
+    options: [
+      { text: 'Ковалентная неполярная', correct: true  },
+      { text: 'Ковалентная полярная',  correct: false },
+      { text: 'Ионная',                correct: false },
+      { text: 'Металлическая',         correct: false },
+    ],
+    explanation: 'В \\(H_2\\) одинаковые атомы водорода → ЭО одинакова → ковалентная неполярная связь.',
+  },
+  {
+    topic: 'Химическая связь', difficulty: 2, type: 'single',
+    text: 'Какой тип гибридизации центрального атома в молекуле воды \\(H_2O\\)?',
+    options: [
+      { text: '\\(sp^3\\)',  correct: true  },
+      { text: '\\(sp\\)',    correct: false },
+      { text: '\\(sp^2\\)',  correct: false },
+      { text: '\\(sp^3d\\)', correct: false },
+    ],
+    explanation: 'Кислород в \\(H_2O\\): 2 связывающих пары + 2 одиночные → 4 электронные пары → \\(sp^3\\)-гибридизация. Угол ≈ 104,5°.',
+  },
+  {
+    topic: 'Химическая связь', difficulty: 2, type: 'single',
+    text: 'Водородная связь возникает между молекулами:',
+    options: [
+      { text: '\\(H_2O\\)', correct: true  },
+      { text: '\\(CH_4\\)', correct: false },
+      { text: '\\(Cl_2\\)', correct: false },
+      { text: '\\(CO_2\\)', correct: false },
+    ],
+    explanation: 'Водородная связь H···X (X = F, O, N) образуется в воде: O−H···O. \\(CH_4\\), \\(Cl_2\\), \\(CO_2\\) — только дисперсионные взаимодействия.',
+  },
+
+  /* ══════════════════════════════════════════════════════════════════════
+     КЛАССЫ НЕОРГАНИЧЕСКИХ ВЕЩЕСТВ
+  ══════════════════════════════════════════════════════════════════════ */
+  {
+    topic: 'Классы неорганических веществ', difficulty: 1, type: 'single',
+    text: 'Какое из веществ является кислотным оксидом?',
+    options: [
+      { text: '\\(SO_3\\)',  correct: true  },
+      { text: '\\(Na_2O\\)', correct: false },
+      { text: '\\(CaO\\)',   correct: false },
+      { text: '\\(NO\\)',    correct: false },
+    ],
+    explanation: '\\(SO_3\\) — кислотный оксид (соответствует серной кислоте \\(H_2SO_4\\)). \\(Na_2O\\) и \\(CaO\\) — основные оксиды. \\(NO\\) — несолеобразующий.',
+  },
+  {
+    topic: 'Классы неорганических веществ', difficulty: 1, type: 'single',
+    text: 'Амфотерный гидроксид образует элемент:',
+    options: [
+      { text: 'Алюминий (Al)', correct: true  },
+      { text: 'Натрий (Na)',   correct: false },
+      { text: 'Кальций (Ca)', correct: false },
+      { text: 'Хлор (Cl)',    correct: false },
+    ],
+    explanation: '\\(Al(OH)_3\\) — амфотерный гидроксид, реагирует и с кислотами, и с щелочами.',
+  },
+  {
+    topic: 'Классы неорганических веществ', difficulty: 1, type: 'single',
+    text: 'Реакция нейтрализации — это взаимодействие:',
+    options: [
+      { text: 'кислоты и основания',   correct: true  },
+      { text: 'кислоты и оксида',       correct: false },
+      { text: 'двух солей',             correct: false },
+      { text: 'основания и воды',       correct: false },
+    ],
+    explanation: '\\(HCl + NaOH \\to NaCl + H_2O\\) — типичный пример нейтрализации: кислота + основание → соль + вода.',
+  },
+  {
+    topic: 'Классы неорганических веществ', difficulty: 1, type: 'single',
+    text: 'Название соли \\(CaCO_3\\):',
+    options: [
+      { text: 'карбонат кальция', correct: true  },
+      { text: 'карбид кальция',   correct: false },
+      { text: 'хлорат кальция',   correct: false },
+      { text: 'оксид кальция',    correct: false },
+    ],
+    explanation: '\\(CaCO_3\\) — соль угольной кислоты \\(H_2CO_3\\) и кальция → карбонат кальция.',
+  },
+  {
+    topic: 'Классы неорганических веществ', difficulty: 2, type: 'single',
+    text: 'Какая из кислот является многоосновной?',
+    options: [
+      { text: '\\(H_3PO_4\\)', correct: true  },
+      { text: '\\(HNO_3\\)',   correct: false },
+      { text: '\\(HCl\\)',     correct: false },
+      { text: '\\(HF\\)',      correct: false },
+    ],
+    explanation: '\\(H_3PO_4\\) (ортофосфорная кислота) — трёхосновная. \\(HNO_3\\), \\(HCl\\), \\(HF\\) — одноосновные.',
+  },
+  {
+    topic: 'Классы неорганических веществ', difficulty: 2, type: 'single',
+    text: 'Продукты реакции оксида кальция с водой:',
+    options: [
+      { text: '\\(Ca(OH)_2\\)',        correct: true  },
+      { text: '\\(CaO_2 + H_2\\)',     correct: false },
+      { text: '\\(CaH_2 + O_2\\)',     correct: false },
+      { text: '\\(CaCO_3 + H_2O\\)',   correct: false },
+    ],
+    explanation: '\\(CaO + H_2O \\to Ca(OH)_2\\) — основный оксид реагирует с водой, образуя основание (гашёная известь).',
+  },
+  {
+    topic: 'Классы неорганических веществ', difficulty: 2, type: 'single',
+    text: 'Назовите продукты разложения карбоната кальция при нагревании:',
+    options: [
+      { text: '\\(CaO + CO_2\\)',       correct: true  },
+      { text: '\\(Ca + CO_2 + O_2\\)',  correct: false },
+      { text: '\\(Ca(OH)_2 + CO\\)',    correct: false },
+      { text: '\\(CaC_2 + O_2\\)',      correct: false },
+    ],
+    explanation: '\\(CaCO_3 \\xrightarrow{t°} CaO + CO_2\\uparrow\\) — обжиг известняка, производство извести.',
+  },
+  {
+    topic: 'Классы неорганических веществ', difficulty: 2, type: 'single',
+    text: 'Какая из следующих солей при растворении в воде создаёт кислую среду (pH < 7)?',
+    options: [
+      { text: '\\(NH_4Cl\\)',   correct: true  },
+      { text: '\\(Na_2CO_3\\)', correct: false },
+      { text: '\\(NaCl\\)',     correct: false },
+      { text: '\\(K_2SO_4\\)',  correct: false },
+    ],
+    explanation: '\\(NH_4Cl\\) — соль слабого основания и сильной кислоты → при гидролизе pH < 7 (кислая среда). \\(Na_2CO_3\\) — щелочная, \\(NaCl\\) — нейтральная.',
+  },
+  {
+    topic: 'Классы неорганических веществ', difficulty: 3, type: 'single',
+    text: 'С какими из следующих веществ реагирует гидроксид алюминия \\(Al(OH)_3\\)?',
+    options: [
+      { text: 'И с \\(HCl\\), и с \\(NaOH\\)',   correct: true  },
+      { text: 'Только с \\(HCl\\)',               correct: false },
+      { text: 'Только с \\(NaOH\\)',              correct: false },
+      { text: 'Ни с кем не реагирует',            correct: false },
+    ],
+    explanation: 'Амфотерный гидроксид: \\(Al(OH)_3 + 3HCl \\to AlCl_3 + 3H_2O\\); \\(Al(OH)_3 + NaOH \\to Na[Al(OH)_4]\\) (или \\(NaAlO_2 + 2H_2O\\)).',
+  },
+
+  /* ══════════════════════════════════════════════════════════════════════
+     ХИМИЧЕСКИЕ РЕАКЦИИ
+  ══════════════════════════════════════════════════════════════════════ */
+  {
+    topic: 'Химические реакции', difficulty: 1, type: 'single',
+    text: 'Реакция соединения — это реакция, при которой из нескольких веществ образуется:',
+    options: [
+      { text: 'одно новое вещество',      correct: true  },
+      { text: 'два новых вещества',        correct: false },
+      { text: 'три новых вещества',        correct: false },
+      { text: 'несколько простых веществ', correct: false },
+    ],
+    explanation: '\\(A + B \\to AB\\) — схема реакции соединения: два и более реагента → одно вещество.',
+  },
+  {
+    topic: 'Химические реакции', difficulty: 1, type: 'single',
+    text: 'Закон сохранения массы в химической реакции гласит:',
+    options: [
+      { text: 'масса продуктов равна массе реагентов',         correct: true  },
+      { text: 'масса продуктов всегда больше массы реагентов', correct: false },
+      { text: 'масса продуктов всегда меньше массы реагентов', correct: false },
+      { text: 'масса зависит от условий реакции',              correct: false },
+    ],
+    explanation: 'Закон Ломоносова–Лавуазье: масса веществ до реакции равна массе веществ после реакции.',
+  },
+  {
+    topic: 'Химические реакции', difficulty: 2, type: 'single',
+    text: 'Расставьте коэффициенты в реакции: \\(Fe + O_2 \\to Fe_2O_3\\). Коэффициент перед \\(Fe\\):',
+    options: [
+      { text: '4', correct: true  },
+      { text: '2', correct: false },
+      { text: '3', correct: false },
+      { text: '1', correct: false },
+    ],
+    explanation: '\\(4Fe + 3O_2 \\to 2Fe_2O_3\\). Перед \\(Fe\\) стоит коэффициент 4.',
+  },
+  {
+    topic: 'Химические реакции', difficulty: 2, type: 'single',
+    text: 'Тип реакции: \\(2HgO \\xrightarrow{t°} 2Hg + O_2\\)',
+    options: [
+      { text: 'Разложение',  correct: true  },
+      { text: 'Соединение',  correct: false },
+      { text: 'Замещение',   correct: false },
+      { text: 'Обмен',       correct: false },
+    ],
+    explanation: 'Одно вещество → несколько веществ. Это реакция разложения.',
+  },
+  {
+    topic: 'Химические реакции', difficulty: 2, type: 'single',
+    text: 'Масса железа (\\(M = 56\\) г/моль), образующегося в реакции \\(Fe_2O_3 + 3CO \\to 2Fe + 3CO_2\\) из 160 г оксида железа (\\(M(Fe_2O_3) = 160\\) г/моль):',
+    options: [
+      { text: '112 г', correct: true  },
+      { text: '56 г',  correct: false },
+      { text: '224 г', correct: false },
+      { text: '80 г',  correct: false },
+    ],
+    explanation: '\\(n(Fe_2O_3) = 160/160 = 1\\,\\text{моль}\\). По уравнению 1 моль \\(Fe_2O_3\\) даёт 2 моль \\(Fe\\). \\(m(Fe) = 2\\cdot56 = 112\\,\\text{г}\\).',
+  },
+  {
+    topic: 'Химические реакции', difficulty: 3, type: 'single',
+    text: 'Какой объём (н.у.) \\(H_2\\) выделится при растворении 24 г магния в соляной кислоте? (\\(M(Mg)=24\\) г/моль, \\(V_m=22{,}4\\) л/моль)',
+    options: [
+      { text: '22,4 л', correct: true  },
+      { text: '11,2 л', correct: false },
+      { text: '44,8 л', correct: false },
+      { text: '5,6 л',  correct: false },
+    ],
+    explanation: '\\(Mg + 2HCl \\to MgCl_2 + H_2\\uparrow\\). \\(n(Mg) = 24/24 = 1\\,\\text{моль}\\). По уравнению 1:1, значит \\(n(H_2) = 1\\,\\text{моль}\\). \\(V = 22{,}4\\,\\text{л}\\).',
+  },
+  {
+    topic: 'Химические реакции', difficulty: 3, type: 'single',
+    text: 'Выход продукта 80%. Масса \\(NaCl\\) из 117 г \\(NaCl\\) (чистый продукт = 117 г, \\(M=58{,}5\\) г/моль):',
+    options: [
+      { text: '93,6 г', correct: true  },
+      { text: '117 г',  correct: false },
+      { text: '140 г',  correct: false },
+      { text: '58,5 г', correct: false },
+    ],
+    explanation: 'Теоретически \\(m = 117\\,\\text{г}\\). С учётом выхода: \\(m_\\text{пр} = 117\\cdot0{,}8 = 93{,}6\\,\\text{г}\\).',
+  },
+
+  /* ══════════════════════════════════════════════════════════════════════
+     РАСТВОРЫ
+  ══════════════════════════════════════════════════════════════════════ */
+  {
+    topic: 'Растворы', difficulty: 1, type: 'single',
+    text: 'Массовая доля растворённого вещества (NaCl) в растворе, если 20 г NaCl растворили в 80 г воды:',
+    options: [
+      { text: '20%', correct: true  },
+      { text: '25%', correct: false },
+      { text: '80%', correct: false },
+      { text: '16%', correct: false },
+    ],
+    explanation: '\\(\\omega = \\dfrac{m_{\\text{в-ва}}}{m_{\\text{р-ра}}}\\cdot100\\% = \\dfrac{20}{20+80}\\cdot100\\% = 20\\%\\).',
+  },
+  {
+    topic: 'Растворы', difficulty: 2, type: 'single',
+    text: 'Масса воды, необходимая для приготовления 300 г 5%-го раствора соли:',
+    options: [
+      { text: '285 г', correct: true  },
+      { text: '15 г',  correct: false },
+      { text: '295 г', correct: false },
+      { text: '300 г', correct: false },
+    ],
+    explanation: '\\(m_{\\text{в-ва}} = 300\\cdot0{,}05 = 15\\,\\text{г}\\);  \\(m_{\\text{воды}} = 300 - 15 = 285\\,\\text{г}\\).',
+  },
+  {
+    topic: 'Растворы', difficulty: 2, type: 'single',
+    text: 'Молярная концентрация (моль/л) 2 моль \\(NaOH\\) в 500 мл раствора:',
+    options: [
+      { text: '4 моль/л', correct: true  },
+      { text: '2 моль/л', correct: false },
+      { text: '1 моль/л', correct: false },
+      { text: '0,5 моль/л', correct: false },
+    ],
+    explanation: '\\(c = \\dfrac{n}{V} = \\dfrac{2\\,\\text{моль}}{0{,}5\\,\\text{л}} = 4\\,\\text{моль/л}\\).',
+  },
+  {
+    topic: 'Растворы', difficulty: 2, type: 'single',
+    text: 'pH нейтрального раствора при 25°C:',
+    options: [
+      { text: '7',          correct: true  },
+      { text: 'менее 7',    correct: false },
+      { text: 'более 7',    correct: false },
+      { text: '0',          correct: false },
+    ],
+    explanation: 'При 25°C нейтральный раствор: \\([H^+] = [OH^-] = 10^{-7}\\) моль/л → \\(pH = 7\\).',
+  },
+  {
+    topic: 'Растворы', difficulty: 3, type: 'single',
+    text: 'Смешали 200 г 10%-го раствора NaCl и 300 г 20%-го раствора NaCl. Массовая доля в смеси:',
+    options: [
+      { text: '16%', correct: true  },
+      { text: '15%', correct: false },
+      { text: '17%', correct: false },
+      { text: '12%', correct: false },
+    ],
+    explanation: '\\(m_1 = 200\\cdot0{,}10 = 20\\,\\text{г}\\);  \\(m_2 = 300\\cdot0{,}20 = 60\\,\\text{г}\\);  \\(\\omega = (20+60)/(200+300) = 80/500 = 16\\%\\).',
+  },
+
+  /* ══════════════════════════════════════════════════════════════════════
+     ОКИСЛИТЕЛЬНО-ВОССТАНОВИТЕЛЬНЫЕ РЕАКЦИИ
+  ══════════════════════════════════════════════════════════════════════ */
+  {
+    topic: 'ОВР', difficulty: 1, type: 'single',
+    text: 'Какой процесс называется окислением?',
+    options: [
+      { text: 'Отдача электронов',             correct: true  },
+      { text: 'Принятие электронов',           correct: false },
+      { text: 'Присоединение кислорода только', correct: false },
+      { text: 'Повышение pH',                  correct: false },
+    ],
+    explanation: 'Окисление — процесс отдачи электронов: \\(A^0 - ne \\to A^{+n}\\) (степень окисления повышается).',
+  },
+  {
+    topic: 'ОВР', difficulty: 1, type: 'single',
+    text: 'В реакции \\(Cu + 2AgNO_3 \\to Cu(NO_3)_2 + 2Ag\\) медь является:',
+    options: [
+      { text: 'окислителем', correct: false },
+      { text: 'восстановителем', correct: true },
+      { text: 'и окислителем, и восстановителем', correct: false },
+      { text: 'не участвует в ОВР', correct: false },
+    ],
+    explanation: 'Cu: \\(0 \\to +2\\) — отдаёт электроны → окисляется → является восстановителем.',
+  },
+  {
+    topic: 'ОВР', difficulty: 2, type: 'single',
+    text: 'Степень окисления хлора в \\(HClO_4\\):',
+    options: [
+      { text: '+7', correct: true  },
+      { text: '+5', correct: false },
+      { text: '+3', correct: false },
+      { text: '+1', correct: false },
+    ],
+    explanation: '\\(H(+1) + Cl(x) + O_4(-8) = 0\\)  ⟹  \\(x = 7\\).',
+  },
+  {
+    topic: 'ОВР', difficulty: 2, type: 'single',
+    text: 'Степень окисления серы в \\(H_2SO_4\\):',
+    options: [
+      { text: '+6', correct: true  },
+      { text: '+4', correct: false },
+      { text: '-2', correct: false },
+      { text: '0',  correct: false },
+    ],
+    explanation: '\\(2(+1) + x + 4(-2) = 0\\)  ⟹  \\(x = +6\\).',
+  },
+  {
+    topic: 'ОВР', difficulty: 2, type: 'single',
+    text: 'Какое вещество является окислителем в реакции: \\(Zn + H_2SO_4(\\text{разб.}) \\to ZnSO_4 + H_2\\uparrow\\)?',
+    options: [
+      { text: '\\(H_2SO_4\\) (ион \\(H^+\\))', correct: true  },
+      { text: '\\(Zn\\)',                       correct: false },
+      { text: '\\(ZnSO_4\\)',                   correct: false },
+      { text: '\\(H_2\\)',                      correct: false },
+    ],
+    explanation: 'Ионы \\(H^+\\) принимают электроны: \\(2H^+ + 2e^- \\to H_2\\) — восстанавливаются → \\(H_2SO_4\\) (точнее \\(H^+\\)) — окислитель.',
+  },
+  {
+    topic: 'ОВР', difficulty: 3, type: 'single',
+    text: 'В реакции \\(MnO_4^- + Fe^{2+} + H^+ \\to Mn^{2+} + Fe^{3+} + H_2O\\) коэффициент при \\(Fe^{2+}\\):',
+    options: [
+      { text: '5', correct: true  },
+      { text: '2', correct: false },
+      { text: '3', correct: false },
+      { text: '1', correct: false },
+    ],
+    explanation: 'Mn: \\(+7 \\to +2\\) (принимает 5e). Fe: \\(+2 \\to +3\\) (отдаёт 1e). НОК(5,1)=5 → коэффициент 5 при \\(Fe^{2+}\\) и 1 при \\(MnO_4^-\\).',
+  },
+  {
+    topic: 'ОВР', difficulty: 3, type: 'single',
+    text: 'Укажите вещество, которое может быть одновременно и окислителем, и восстановителем:',
+    options: [
+      { text: '\\(H_2O_2\\)',  correct: true  },
+      { text: '\\(KMnO_4\\)', correct: false },
+      { text: '\\(F_2\\)',     correct: false },
+      { text: '\\(Na\\)',      correct: false },
+    ],
+    explanation: '\\(H_2O_2\\): степень окисления O = −1 (промежуточная). Может понижаться до −2 (окислитель) или повышаться до 0 (восстановитель).',
+  },
+
+  /* ══════════════════════════════════════════════════════════════════════
+     ЭЛЕКТРОЛИЗ
+  ══════════════════════════════════════════════════════════════════════ */
+  {
+    topic: 'Электролиз', difficulty: 1, type: 'single',
+    text: 'При электролизе расплава NaCl на катоде выделяется:',
+    options: [
+      { text: 'Натрий (Na)',    correct: true  },
+      { text: 'Хлор (\\(Cl_2\\))', correct: false },
+      { text: 'Водород (\\(H_2\\))', correct: false },
+      { text: 'Кислород (\\(O_2\\))', correct: false },
+    ],
+    explanation: 'На катоде происходит восстановление: \\(Na^+ + e^- \\to Na\\). На аноде — окисление хлорид-ионов: \\(2Cl^- - 2e^- \\to Cl_2\\).',
+  },
+  {
+    topic: 'Электролиз', difficulty: 2, type: 'single',
+    text: 'При электролизе водного раствора \\(CuSO_4\\) на катоде выделяется:',
+    options: [
+      { text: 'Медь (Cu)',                correct: true  },
+      { text: 'Водород (\\(H_2\\))',       correct: false },
+      { text: 'Кислород (\\(O_2\\))',      correct: false },
+      { text: 'Сульфат-ион (\\(SO_4^{2-}\\))', correct: false },
+    ],
+    explanation: 'В водном растворе \\(CuSO_4\\) ионы \\(Cu^{2+}\\) легче восстанавливаются, чем вода: \\(Cu^{2+} + 2e^- \\to Cu\\).',
+  },
+  {
+    topic: 'Электролиз', difficulty: 2, type: 'single',
+    text: 'Закон Фарадея для электролиза: масса выделившегося вещества пропорциональна:',
+    options: [
+      { text: 'заряду, прошедшему через электролит',   correct: true  },
+      { text: 'концентрации раствора',                  correct: false },
+      { text: 'температуре раствора',                   correct: false },
+      { text: 'напряжению на ячейке',                   correct: false },
+    ],
+    explanation: 'Первый закон Фарадея: \\(m = \\dfrac{M}{nF}\\cdot Q = \\dfrac{M}{nF}\\cdot It\\), где \\(Q = It\\) — заряд.',
+  },
+
+  /* ══════════════════════════════════════════════════════════════════════
+     ОРГАНИЧЕСКАЯ ХИМИЯ — УГЛЕВОДОРОДЫ
+  ══════════════════════════════════════════════════════════════════════ */
+  {
+    topic: 'Органическая химия', difficulty: 1, type: 'single',
+    text: 'Общая формула алканов:',
+    options: [
+      { text: '\\(C_nH_{2n+2}\\)', correct: true  },
+      { text: '\\(C_nH_{2n}\\)',   correct: false },
+      { text: '\\(C_nH_{2n-2}\\)', correct: false },
+      { text: '\\(C_nH_n\\)',      correct: false },
+    ],
+    explanation: 'Алканы — насыщенные углеводороды, общая формула \\(C_nH_{2n+2}\\). Например, метан \\(CH_4\\) (n=1), этан \\(C_2H_6\\) (n=2).',
+  },
+  {
+    topic: 'Органическая химия', difficulty: 1, type: 'single',
+    text: 'Название вещества \\(CH_3-CH_2-CH_3\\):',
+    options: [
+      { text: 'Пропан',  correct: true  },
+      { text: 'Этан',    correct: false },
+      { text: 'Бутан',   correct: false },
+      { text: 'Метан',   correct: false },
+    ],
+    explanation: 'Три атома углерода в цепи → пропан \\(C_3H_8\\).',
+  },
+  {
+    topic: 'Органическая химия', difficulty: 1, type: 'single',
+    text: 'Признак ненасыщенных углеводородов — наличие в молекуле:',
+    options: [
+      { text: 'кратной (двойной или тройной) связи C−C', correct: true  },
+      { text: 'только одинарных связей',                  correct: false },
+      { text: 'атомов кислорода',                          correct: false },
+      { text: 'только ароматических колец',               correct: false },
+    ],
+    explanation: 'Алкены (C=C), алкины (C≡C) и алкадиены — ненасыщенные. Алканы (только C−C) — насыщенные.',
+  },
+  {
+    topic: 'Органическая химия', difficulty: 2, type: 'single',
+    text: 'Тип реакции, характерный для алканов:',
+    options: [
+      { text: 'Замещение (радикальное)',  correct: true  },
+      { text: 'Присоединение',            correct: false },
+      { text: 'Полимеризация',            correct: false },
+      { text: 'Нейтрализация',            correct: false },
+    ],
+    explanation: 'Алканы химически инертны, в основном реакции замещения: \\(CH_4 + Cl_2 \\xrightarrow{h\\nu} CH_3Cl + HCl\\).',
+  },
+  {
+    topic: 'Органическая химия', difficulty: 2, type: 'single',
+    text: 'Реакция Марковникова относится к реакциям:',
+    options: [
+      { text: 'присоединения HX к несимметричным алкенам', correct: true  },
+      { text: 'замещения в аренах',                         correct: false },
+      { text: 'этерификации',                               correct: false },
+      { text: 'дегидрирования алканов',                     correct: false },
+    ],
+    explanation: 'Правило Марковникова: при присоединении HX к несимметричному алкену атом H присоединяется к более гидрогенизированному атому C (богатому H).',
+  },
+  {
+    topic: 'Органическая химия', difficulty: 2, type: 'single',
+    text: 'Молярная масса бензола \\(C_6H_6\\):',
+    options: [
+      { text: '78 г/моль', correct: true  },
+      { text: '72 г/моль', correct: false },
+      { text: '84 г/моль', correct: false },
+      { text: '68 г/моль', correct: false },
+    ],
+    explanation: '\\(M(C_6H_6) = 6\\cdot12 + 6\\cdot1 = 72 + 6 = 78\\,\\text{г/моль}\\).',
+  },
+  {
+    topic: 'Органическая химия', difficulty: 2, type: 'single',
+    text: 'Какой газ выделяется при крекинге нефти?',
+    options: [
+      { text: 'Этилен и другие алкены',  correct: true  },
+      { text: 'Только углекислый газ',   correct: false },
+      { text: 'Водород',                  correct: false },
+      { text: 'Метан исключительно',     correct: false },
+    ],
+    explanation: 'Крекинг — расщепление крупных молекул алканов → алканы меньшей молекулярной массы + алкены (этилен, пропилен и т.д.).',
+  },
+  {
+    topic: 'Органическая химия', difficulty: 3, type: 'single',
+    text: 'Объём кислорода (н.у.), необходимый для сжигания 1 моль ацетилена \\(C_2H_2\\): \\(2C_2H_2 + 5O_2 \\to 4CO_2 + 2H_2O\\)',
+    options: [
+      { text: '56 л',  correct: true  },
+      { text: '44,8 л', correct: false },
+      { text: '22,4 л', correct: false },
+      { text: '112 л',  correct: false },
+    ],
+    explanation: 'По уравнению: 2 моль \\(C_2H_2\\) → 5 моль \\(O_2\\). Значит 1 моль → 2,5 моль \\(O_2\\). \\(V = 2{,}5\\cdot22{,}4 = 56\\,\\text{л}\\).',
+  },
+
+  /* ══════════════════════════════════════════════════════════════════════
+     ОРГАНИЧЕСКАЯ ХИМИЯ — СПИРТЫ, КИСЛОТЫ, ЭФИРЫ
+  ══════════════════════════════════════════════════════════════════════ */
+  {
+    topic: 'Кислородсодержащие органические вещества', difficulty: 1, type: 'single',
+    text: 'Функциональная группа спиртов:',
+    options: [
+      { text: '−OH (гидроксильная)', correct: true  },
+      { text: '−COOH (карбоксильная)', correct: false },
+      { text: '−CHO (альдегидная)',    correct: false },
+      { text: '−NH₂ (аминогруппа)',    correct: false },
+    ],
+    explanation: 'Спирты содержат гидроксильную группу −OH. Например, этанол \\(C_2H_5OH\\).',
+  },
+  {
+    topic: 'Кислородсодержащие органические вещества', difficulty: 1, type: 'single',
+    text: 'Реакция образования сложного эфира из кислоты и спирта называется:',
+    options: [
+      { text: 'Этерификация',  correct: true  },
+      { text: 'Гидролиз',      correct: false },
+      { text: 'Нитрование',    correct: false },
+      { text: 'Полимеризация', correct: false },
+    ],
+    explanation: "\\(RCOOH + R'OH \\rightleftharpoons RCOOR' + H_2O\\) — реакция этерификации (обратимая).",
+  },
+  {
+    topic: 'Кислородсодержащие органические вещества', difficulty: 2, type: 'single',
+    text: 'Уксусная кислота \\(CH_3COOH\\) при реакции с содой \\(Na_2CO_3\\) выделяет:',
+    options: [
+      { text: '\\(CO_2\\)',       correct: true  },
+      { text: '\\(CH_4\\)',       correct: false },
+      { text: '\\(O_2\\)',        correct: false },
+      { text: '\\(H_2\\)',        correct: false },
+    ],
+    explanation: '\\(2CH_3COOH + Na_2CO_3 \\to 2CH_3COONa + H_2O + CO_2\\uparrow\\).',
+  },
+  {
+    topic: 'Кислородсодержащие органические вещества', difficulty: 2, type: 'single',
+    text: 'Глицерин — это:',
+    options: [
+      { text: 'трёхатомный спирт',  correct: true  },
+      { text: 'одноатомный спирт',  correct: false },
+      { text: 'двухатомный спирт',  correct: false },
+      { text: 'кетон',              correct: false },
+    ],
+    explanation: 'Глицерин \\(C_3H_5(OH)_3\\) содержит три гидроксильные группы → трёхатомный спирт.',
+  },
+  {
+    topic: 'Кислородсодержащие органические вещества', difficulty: 2, type: 'single',
+    text: 'Качественная реакция на альдегиды — реакция «серебряного зеркала» с:',
+    options: [
+      { text: 'аммиачным раствором \\(AgNO_3\\) (реактив Толленса)', correct: true  },
+      { text: 'реактивом Фелинга (ионы \\(Cu^{2+}\\))',              correct: false },
+      { text: 'бромной водой',                                         correct: false },
+      { text: 'хлоридом бария \\(BaCl_2\\)',                          correct: false },
+    ],
+    explanation: 'Реакция «серебряного зеркала»: \\(RCHO + [Ag(NH_3)_2]^+ \\to RCOO^- + Ag\\downarrow\\) — альдегид окисляется, серебро осаждается на стенках.',
+  },
+  {
+    topic: 'Кислородсодержащие органические вещества', difficulty: 3, type: 'single',
+    text: 'При полном гидролизе жира образуются:',
+    options: [
+      { text: 'глицерин и высшие карбоновые кислоты', correct: true  },
+      { text: 'глюкоза и фруктоза',                    correct: false },
+      { text: 'аминокислоты',                          correct: false },
+      { text: 'крахмал и вода',                        correct: false },
+    ],
+    explanation: 'Жиры — сложные эфиры глицерина и высших жирных кислот. Гидролиз: \\(\\text{жир} + 3H_2O \\to \\text{глицерин} + 3\\text{RCOOH}\\).',
+  },
+
+  /* ══════════════════════════════════════════════════════════════════════
+     БИОЛОГИЧЕСКИ ВАЖНЫЕ ВЕЩЕСТВА
+  ══════════════════════════════════════════════════════════════════════ */
+  {
+    topic: 'Биологически важные вещества', difficulty: 1, type: 'single',
+    text: 'Фотосинтез описывается уравнением:',
+    options: [
+      { text: '\\(6CO_2 + 6H_2O \\xrightarrow{h\\nu} C_6H_{12}O_6 + 6O_2\\)', correct: true  },
+      { text: '\\(C_6H_{12}O_6 + 6O_2 \\to 6CO_2 + 6H_2O + E\\)',             correct: false },
+      { text: '\\(6CO_2 + 6H_2O \\to 6CH_4 + 3O_3\\)',                         correct: false },
+      { text: '\\(CO_2 + 2H_2 \\to CH_3OH + O\\)',                              correct: false },
+    ],
+    explanation: 'Уравнение фотосинтеза: \\(6CO_2 + 6H_2O \\xrightarrow{h\\nu} C_6H_{12}O_6 + 6O_2\\). Глюкоза синтезируется за счёт энергии света.',
+  },
+  {
+    topic: 'Биологически важные вещества', difficulty: 1, type: 'single',
+    text: 'Глюкоза \\(C_6H_{12}O_6\\) относится к:',
+    options: [
+      { text: 'Моносахаридам',  correct: true  },
+      { text: 'Дисахаридам',    correct: false },
+      { text: 'Полисахаридам',  correct: false },
+      { text: 'Аминокислотам',  correct: false },
+    ],
+    explanation: 'Глюкоза — моносахарид (гексоза). Дисахариды: сахароза, мальтоза. Полисахариды: крахмал, целлюлоза.',
+  },
+  {
+    topic: 'Биологически важные вещества', difficulty: 2, type: 'single',
+    text: 'Аминокислоты — строительные блоки:',
+    options: [
+      { text: 'Белков',        correct: true  },
+      { text: 'Углеводов',     correct: false },
+      { text: 'Жиров',         correct: false },
+      { text: 'Нуклеиновых кислот', correct: false },
+    ],
+    explanation: 'Белки — полимеры аминокислот, соединённых пептидными связями −CO−NH−.',
+  },
+  {
+    topic: 'Биологически важные вещества', difficulty: 2, type: 'single',
+    text: 'Качественная реакция на белки — биуретовая реакция. Какой цвет она даёт?',
+    options: [
+      { text: 'Фиолетово-синий',  correct: true  },
+      { text: 'Жёлтый (нитрование)', correct: false },
+      { text: 'Красный',          correct: false },
+      { text: 'Бесцветный',       correct: false },
+    ],
+    explanation: 'Биуретовая реакция: пептидные связи + Cu²⁺ в щелочной среде → фиолетово-синий цвет. Ксантопротеиновая реакция (нитрование тирозина) — жёлтый.',
+  },
+
+  /* ══════════════════════════════════════════════════════════════════════
+     ТЕРМОХИМИЯ
+  ══════════════════════════════════════════════════════════════════════ */
+  {
+    topic: 'Термохимия', difficulty: 1, type: 'single',
+    text: 'Реакция, при которой выделяется теплота (\\(\\Delta H < 0\\)), называется:',
+    options: [
+      { text: 'Экзотермической',  correct: true  },
+      { text: 'Эндотермической',  correct: false },
+      { text: 'Нейтральной',      correct: false },
+      { text: 'Обратимой',        correct: false },
+    ],
+    explanation: '\\(\\Delta H < 0\\) (теплота выделяется) → экзотермическая. \\(\\Delta H > 0\\) (теплота поглощается) → эндотермическая.',
+  },
+  {
+    topic: 'Термохимия', difficulty: 2, type: 'single',
+    text: 'Тепловой эффект реакции горения метана: \\(CH_4 + 2O_2 \\to CO_2 + 2H_2O,\\; \\Delta H = -890\\,\\text{кДж/моль}\\). Теплота при сжигании 2 моль метана:',
+    options: [
+      { text: '1780 кДж', correct: true  },
+      { text: '890 кДж',  correct: false },
+      { text: '445 кДж',  correct: false },
+      { text: '3560 кДж', correct: false },
+    ],
+    explanation: '\\(Q = 2\\cdot890 = 1780\\,\\text{кДж}\\) (знак «+» означает выделение).',
+  },
+  {
+    topic: 'Термохимия', difficulty: 2, type: 'single',
+    text: 'Закон Гесса утверждает: тепловой эффект реакции:',
+    options: [
+      { text: 'не зависит от пути реакции, только от начального и конечного состояния', correct: true  },
+      { text: 'зависит от числа промежуточных стадий',                                    correct: false },
+      { text: 'определяется только температурой',                                         correct: false },
+      { text: 'равен нулю для всех обратимых реакций',                                    correct: false },
+    ],
+    explanation: 'Закон Гесса — фундамент термохимии: \\(\\Delta H\\) зависит только от начального и конечного состояния системы, независимо от пути превращения.',
+  },
+
+  /* ══════════════════════════════════════════════════════════════════════
+     СКОРОСТЬ РЕАКЦИИ И РАВНОВЕСИЕ
+  ══════════════════════════════════════════════════════════════════════ */
+  {
+    topic: 'Скорость реакции и химическое равновесие', difficulty: 1, type: 'single',
+    text: 'При повышении температуры на 10°C скорость большинства реакций:',
+    options: [
+      { text: 'увеличивается в 2–4 раза (правило Вант-Гоффа)', correct: true  },
+      { text: 'уменьшается вдвое',                              correct: false },
+      { text: 'не изменяется',                                  correct: false },
+      { text: 'уменьшается в 10 раз',                           correct: false },
+    ],
+    explanation: 'Правило Вант-Гоффа: при повышении температуры на 10°C скорость реакции возрастает в 2–4 раза (γ = 2÷4).',
+  },
+  {
+    topic: 'Скорость реакции и химическое равновесие', difficulty: 2, type: 'single',
+    text: 'Принцип Ле-Шателье: если равновесная система испытывает внешнее воздействие, равновесие:',
+    options: [
+      { text: 'смещается в сторону, ослабляющую это воздействие', correct: true  },
+      { text: 'смещается в сторону, усиливающую воздействие',     correct: false },
+      { text: 'всегда смещается вправо',                          correct: false },
+      { text: 'не изменяется',                                    correct: false },
+    ],
+    explanation: 'Принцип Ле-Шателье: система стремится к устранению внешнего воздействия.',
+  },
+  {
+    topic: 'Скорость реакции и химическое равновесие', difficulty: 2, type: 'single',
+    text: 'В реакции \\(N_2 + 3H_2 \\rightleftharpoons 2NH_3 + Q\\) при повышении давления равновесие сместится:',
+    options: [
+      { text: 'вправо (в сторону меньшего числа молей газа)', correct: true  },
+      { text: 'влево',                                          correct: false },
+      { text: 'не изменится',                                   correct: false },
+      { text: 'зависит от температуры, не от давления',        correct: false },
+    ],
+    explanation: 'Слева 4 моля газа, справа 2 моля. При повышении давления равновесие смещается в сторону меньшего объёма → вправо.',
+  },
+  {
+    topic: 'Скорость реакции и химическое равновесие', difficulty: 2, type: 'single',
+    text: 'Катализатор в реакции:',
+    options: [
+      { text: 'ускоряет реакцию, снижая энергию активации, не расходуясь', correct: true  },
+      { text: 'сдвигает равновесие вправо',                                  correct: false },
+      { text: 'увеличивает тепловой эффект реакции',                         correct: false },
+      { text: 'расходуется в ходе реакции',                                  correct: false },
+    ],
+    explanation: 'Катализатор снижает энергию активации → реакция идёт быстрее. Равновесие не смещается, катализатор не расходуется.',
+  },
+  {
+    topic: 'Скорость реакции и химическое равновесие', difficulty: 3, type: 'single',
+    text: 'Скорость реакции \\(2SO_2 + O_2 \\to 2SO_3\\) при увеличении концентрации \\(O_2\\) вдвое:',
+    options: [
+      { text: 'увеличится вдвое',    correct: true  },
+      { text: 'увеличится в 4 раза', correct: false },
+      { text: 'не изменится',        correct: false },
+      { text: 'уменьшится вдвое',   correct: false },
+    ],
+    explanation: 'Закон действующих масс: \\(v = k[SO_2]^2[O_2]\\). При \\([O_2] \\to 2[O_2]\\) скорость увеличится в 2 раза.',
+  },
+
+  /* ══════════════════════════════════════════════════════════════════════
+     МЕТАЛЛЫ И ИХ СОЕДИНЕНИЯ
+  ══════════════════════════════════════════════════════════════════════ */
+  {
+    topic: 'Металлы', difficulty: 1, type: 'single',
+    text: 'Самый активный металл (стоящий первым в ряду активности):',
+    options: [
+      { text: 'Литий (Li)',   correct: true  },
+      { text: 'Натрий (Na)', correct: false },
+      { text: 'Калий (K)',   correct: false },
+      { text: 'Цезий (Cs)',  correct: false },
+    ],
+    explanation: 'По электрохимической активности Li стоит первым (наиболее отрицательный стандартный потенциал −3,04 В), что связано с малым радиусом иона Li⁺.',
+  },
+  {
+    topic: 'Металлы', difficulty: 1, type: 'single',
+    text: 'Реакция натрия с водой даёт:',
+    options: [
+      { text: '\\(NaOH + H_2\\uparrow\\)',  correct: true  },
+      { text: '\\(Na_2O + H_2O\\)',         correct: false },
+      { text: '\\(NaH + OH^-\\)',           correct: false },
+      { text: '\\(NaCl + H_2O\\)',          correct: false },
+    ],
+    explanation: '\\(2Na + 2H_2O \\to 2NaOH + H_2\\uparrow\\) — бурная реакция с выделением водорода.',
+  },
+  {
+    topic: 'Металлы', difficulty: 2, type: 'single',
+    text: 'Для защиты железа от коррозии используют:',
+    options: [
+      { text: 'все перечисленные методы',       correct: true  },
+      { text: 'только цинкование',              correct: false },
+      { text: 'только лакокрасочные покрытия',  correct: false },
+      { text: 'только легирование',             correct: false },
+    ],
+    explanation: 'Цинкование (протекторная защита), лакокрасочные покрытия (изоляция от O₂ и H₂O), легирование (нержавеющая сталь) — все методы борьбы с коррозией.',
+  },
+  {
+    topic: 'Металлы', difficulty: 2, type: 'single',
+    text: 'Алюминий не взаимодействует с концентрированной азотной кислотой из-за:',
+    options: [
+      { text: 'пассивации (образования оксидной плёнки \\(Al_2O_3\\))', correct: true  },
+      { text: 'инертности алюминия',                                      correct: false },
+      { text: 'образования нерастворимой соли',                          correct: false },
+      { text: 'реакции с водой',                                          correct: false },
+    ],
+    explanation: 'Концентрированные \\(HNO_3\\) и \\(H_2SO_4\\) пассивируют Al (и Fe): на поверхности образуется плотная оксидная плёнка.',
+  },
+  {
+    topic: 'Металлы', difficulty: 3, type: 'single',
+    text: 'При прокаливании смеси оксида железа (\\(Fe_2O_3\\)) с алюминием происходит реакция (термит):',
+    options: [
+      { text: '\\(Fe_2O_3 + 2Al \\to Al_2O_3 + 2Fe\\)', correct: true  },
+      { text: '\\(Fe + Al_2O_3 \\to Fe_2O_3 + Al\\)',   correct: false },
+      { text: '\\(Fe_2O_3 + Al \\to FeO + AlO\\)',       correct: false },
+      { text: '\\(2Fe + 3Al \\to Fe_2Al_3\\)',           correct: false },
+    ],
+    explanation: 'Термитная реакция: алюминий (более активный металл) вытесняет железо из оксида. Выделяется огромное количество теплоты (≈ 850 кДж).',
+  },
+
+  /* ══════════════════════════════════════════════════════════════════════
+     НЕМЕТАЛЛЫ И ИХ СОЕДИНЕНИЯ
+  ══════════════════════════════════════════════════════════════════════ */
+  {
+    topic: 'Неметаллы', difficulty: 1, type: 'single',
+    text: 'Аллотропные модификации углерода:',
+    options: [
+      { text: 'Алмаз, графит, фуллерен', correct: true  },
+      { text: 'Уголь, сажа, нефть',       correct: false },
+      { text: 'Кокс, бензол, нафталин',   correct: false },
+      { text: 'Кварц, песок, стекло',     correct: false },
+    ],
+    explanation: 'Аллотропия — существование одного элемента в виде разных простых веществ. Для C: алмаз (сп³), графит (сп²), фуллерены (C₆₀ и др.).',
+  },
+  {
+    topic: 'Неметаллы', difficulty: 2, type: 'single',
+    text: 'Серная кислота является:',
+    options: [
+      { text: 'сильной двухосновной кислотой', correct: true  },
+      { text: 'слабой кислотой',               correct: false },
+      { text: 'одноосновной кислотой',         correct: false },
+      { text: 'нелетучей, но слабой',          correct: false },
+    ],
+    explanation: '\\(H_2SO_4\\) — сильная двухосновная кислота (полностью диссоциирует по первой ступени, частично по второй).',
+  },
+  {
+    topic: 'Неметаллы', difficulty: 2, type: 'single',
+    text: 'Какой газ образуется при добавлении кислоты к сульфиду натрия \\(Na_2S\\)?',
+    options: [
+      { text: '\\(H_2S\\) (сероводород)',         correct: true  },
+      { text: '\\(SO_2\\) (диоксид серы)',         correct: false },
+      { text: '\\(SO_3\\) (триоксид серы)',        correct: false },
+      { text: '\\(S\\) (сера, осадок)',            correct: false },
+    ],
+    explanation: '\\(Na_2S + H_2SO_4 \\to Na_2SO_4 + H_2S\\uparrow\\). Более сильная кислота вытесняет более слабую (\\(H_2S\\) — слабая).',
+  },
+  {
+    topic: 'Неметаллы', difficulty: 3, type: 'single',
+    text: 'В реакции: \\(Cl_2 + 2KBr \\to 2KCl + Br_2\\) хлор является:',
+    options: [
+      { text: 'окислителем (более активный галоген вытесняет менее активный)', correct: true  },
+      { text: 'восстановителем', correct: false },
+      { text: 'катализатором',   correct: false },
+      { text: 'ни тем, ни другим', correct: false },
+    ],
+    explanation: 'Cl₂ принимает электроны (Cl₂ + 2e⁻ → 2Cl⁻), Br⁻ их отдаёт. Cl₂ — сильнейший окислитель среди галогенов после F₂.',
+  },
+];
+
+/* ── insert ─────────────────────────────────────────────────────────── */
+const insertQ = db.prepare(
+  'INSERT INTO questions (subject_id, topic_id, text, difficulty, year, explanation, type, image, source_type) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)'
+);
+const insertO = db.prepare(
+  'INSERT INTO options (question_id, text, is_correct, order_index) VALUES (?, ?, ?, ?)'
+);
+
+let inserted = 0, skipped = 0;
+const checkQ = db.prepare('SELECT id FROM questions WHERE subject_id = ? AND text = ?');
+db.exec('BEGIN');
+try {
+  for (const q of questions) {
+    if (checkQ.get(SID, q.text)) { skipped++; continue; }
+    const topicId = getOrCreateTopic(SID, q.topic);
+    const { lastInsertRowid: qid } = insertQ.run(
+      SID, topicId, q.text, q.difficulty,
+      q.year || null, q.explanation || null, q.type || 'single', null, 'базовый'
+    );
+    q.options.forEach((o, i) => insertO.run(qid, o.text, o.correct ? 1 : 0, i));
+    inserted++;
+    process.stdout.write('.');
+  }
+  db.exec('COMMIT');
+  console.log(`\n✓ Вставлено ${inserted}, пропущено ${skipped} вопросов по химии.`);
+} catch (err) {
+  db.exec('ROLLBACK');
+  console.error('\nОшибка:', err.message);
+  process.exit(1);
+}
diff --git a/backend/src/db/seed-math.js b/backend/src/db/seed-math.js
new file mode 100644
index 0000000..a9a26eb
--- /dev/null
+++ b/backend/src/db/seed-math.js
@@ -0,0 +1,667 @@
+/**
+ * Seed: Математика — вопросы для тестов
+ *
+ * Источники:
+ *   — 21 вопрос ЦТ/ЦЭ (общие)
+ *   — 32 вопроса ЦТ 2021, Вариант 1 (A1–A18 + B1–B14)
+ *
+ * Запуск: node src/db/seed-math.js  (из папки backend/)
+ */
+const db = require('./db');
+
+/* ── helpers ─────────────────────────────────────────────────────────── */
+function getOrCreateTopic(subjectId, name) {
+  const ex = db.prepare('SELECT id FROM topics WHERE subject_id=? AND LOWER(name)=LOWER(?)').get(subjectId, name);
+  if (ex) return ex.id;
+  return db.prepare('INSERT INTO topics (subject_id, name) VALUES (?,?)').run(subjectId, name).lastInsertRowid;
+}
+
+/* ── subject ─────────────────────────────────────────────────────────── */
+const math = db.prepare("SELECT id FROM subjects WHERE slug='math'").get();
+if (!math) { console.error('Subject "math" not found. Run migrate first.'); process.exit(1); }
+const SID = math.id;
+
+/* ═══════════════════════════════════════════════════════════════════════
+   Вопросы
+   Поля: topic, difficulty, text, options[{text,correct}], explanation
+   Необязательные: year (число), type ('single'|'multiple')
+   ═══════════════════════════════════════════════════════════════════════ */
+const questions = [
+
+  /* ══════════════════════════════════════════════════════════════════════
+     РАЗДЕЛ 1 — Общие задания ЦТ/ЦЭ
+     ══════════════════════════════════════════════════════════════════════ */
+
+  {
+    topic: 'Арифметика и степени', difficulty: 1,
+    text: 'Вычислите: \\((-3)^2 - 2^3 + 1\\)',
+    options: [
+      { text: '\\(2\\)',   correct: true  },
+      { text: '\\(4\\)',   correct: false },
+      { text: '\\(0\\)',   correct: false },
+      { text: '\\(-2\\)',  correct: false },
+      { text: '\\(18\\)',  correct: false },
+    ],
+    explanation: '\\((-3)^2=9,\\;2^3=8.\\;9-8+1=2\\)',
+  },
+  {
+    topic: 'Словесные задачи', difficulty: 1,
+    text: 'Толя купил 3 альбома и 5 карандашей. Стоимость альбома — 1 р. 20 к., карандаша — 25 к. Сколько копеек осталось у Толи после покупки, если всего у него было 6 р.?',
+    options: [
+      { text: '115 к.', correct: true  },
+      { text: '145 к.', correct: false },
+      { text: '110 к.', correct: false },
+      { text: '125 к.', correct: false },
+      { text: '275 к.', correct: false },
+    ],
+    explanation: '3·120+5·25=360+125=485 к. Остаток: 600−485=115 к.',
+  },
+  {
+    topic: 'Теория чисел', difficulty: 1,
+    text: 'Укажите формулу для нахождения делимого \\(n\\), если делитель равен 15, неполное частное \\(k\\), остаток 7:',
+    options: [
+      { text: '\\(n=15k+7\\)',   correct: true  },
+      { text: '\\(n=15(k+7)\\)', correct: false },
+      { text: '\\(n=k+22\\)',    correct: false },
+      { text: '\\(n=7k+15\\)',   correct: false },
+    ],
+    explanation: 'По теореме о делении с остатком: \\(n=d\\cdot q+r=15k+7\\)',
+  },
+  {
+    topic: 'Тригонометрия', difficulty: 1,
+    text: 'Среди значений \\(-\\dfrac{\\pi}{6};\\;\\dfrac{\\pi}{4};\\;\\dfrac{\\pi}{3};\\;-\\dfrac{3\\pi}{2};\\;-6\\pi\\) укажите то, при котором \\(\\sin x=0\\):',
+    options: [
+      { text: '\\(-6\\pi\\)',             correct: true  },
+      { text: '\\(-\\dfrac{\\pi}{6}\\)',  correct: false },
+      { text: '\\(\\dfrac{\\pi}{4}\\)',   correct: false },
+      { text: '\\(-\\dfrac{3\\pi}{2}\\)', correct: false },
+    ],
+    explanation: '\\(\\sin(-6\\pi)=0\\), так как \\(-6\\pi\\) кратно \\(\\pi\\).',
+  },
+  {
+    topic: 'Квадратные уравнения', difficulty: 2,
+    text: 'Укажите квадратное уравнение, произведение действительных корней которого равно 5:',
+    options: [
+      { text: '\\(x^2-6x+5=0\\)', correct: true  },
+      { text: '\\(x^2-4x+5=0\\)', correct: false },
+      { text: '\\(x^2-5x+6=0\\)', correct: false },
+      { text: '\\(x^2+5x=0\\)',   correct: false },
+    ],
+    explanation: 'По формуле Виета произведение корней \\(=c/a\\). Для \\(x^2-6x+5=0\\): \\(5/1=5\\). Корни: \\(x=1,\\;x=5\\).',
+  },
+  {
+    topic: 'Тригонометрия', difficulty: 2,
+    text: 'Найдите значение выражения \\(\\dfrac{38}{\\pi}\\cdot\\arcsin(-1)-|-7|\\)',
+    options: [
+      { text: '\\(-26\\)', correct: true  },
+      { text: '\\(-16\\)', correct: false },
+      { text: '\\(-12\\)', correct: false },
+      { text: '\\(26\\)',  correct: false },
+    ],
+    explanation: '\\(\\arcsin(-1)=-\\dfrac{\\pi}{2}\\). Тогда: \\(\\dfrac{38}{\\pi}\\cdot(-\\dfrac{\\pi}{2})-7=-19-7=-26\\).',
+  },
+  {
+    topic: 'Квадратные уравнения', difficulty: 1,
+    text: 'Найдите нули функции \\(f(x)=x^2+4x-5\\):',
+    options: [
+      { text: '\\(x=-5\\) и \\(x=1\\)',  correct: true  },
+      { text: '\\(x=5\\) и \\(x=-1\\)',  correct: false },
+      { text: '\\(x=5\\) и \\(x=1\\)',   correct: false },
+      { text: '\\(x=-5\\) и \\(x=-1\\)', correct: false },
+    ],
+    explanation: 'Дискриминант: \\(16+20=36\\). \\(x_{1,2}=\\dfrac{-4\\pm6}{2}\\). \\(x_1=-5,\\;x_2=1\\).',
+  },
+  {
+    topic: 'Тригонометрия', difficulty: 2,
+    text: 'Найдите \\(\\operatorname{ctg}^2\\alpha\\), если \\(\\sin\\alpha=\\dfrac{1}{5}\\):',
+    options: [
+      { text: '\\(24\\)',             correct: true  },
+      { text: '\\(\\frac{1}{24}\\)', correct: false },
+      { text: '\\(4\\)',              correct: false },
+      { text: '\\(25\\)',             correct: false },
+    ],
+    explanation: '\\(\\cos^2\\alpha=1-\\tfrac{1}{25}=\\tfrac{24}{25}\\). \\(\\operatorname{ctg}^2\\alpha=\\dfrac{24/25}{1/25}=24\\).',
+  },
+  {
+    topic: 'Прогрессии', difficulty: 2,
+    text: 'Пятый член геометрической прогрессии равен 48, шестой — 96. Найдите первый член:',
+    options: [
+      { text: '\\(3\\)', correct: true  },
+      { text: '\\(1\\)', correct: false },
+      { text: '\\(2\\)', correct: false },
+      { text: '\\(4\\)', correct: false },
+    ],
+    explanation: '\\(q=96/48=2\\). \\(b_1=48/2^4=3\\).',
+  },
+  {
+    topic: 'Неравенства', difficulty: 2,
+    text: 'Сколько целых решений имеет неравенство \\(-3\\le2-\\dfrac{3x-2}{2}<27\\,\\)?',
+    options: [
+      { text: '\\(20\\)', correct: true  },
+      { text: '\\(18\\)', correct: false },
+      { text: '\\(19\\)', correct: false },
+      { text: '\\(21\\)', correct: false },
+    ],
+    explanation: 'Решение: \\(-15\\le x\\le4\\). Целые: от −15 до 4 → \\(4-(-15)+1=20\\) чисел.',
+  },
+  {
+    topic: 'Квадратные уравнения', difficulty: 1,
+    text: 'Функция \\(f(x)=x^2+4x-5\\). Найдите сумму нулей функции.',
+    options: [
+      { text: '\\(-4\\)', correct: true  },
+      { text: '\\(4\\)',  correct: false },
+      { text: '\\(-5\\)', correct: false },
+      { text: '\\(0\\)',  correct: false },
+    ],
+    explanation: 'По теореме Виета: \\(-b/a=-4\\).',
+  },
+  {
+    topic: 'Прогрессии', difficulty: 2,
+    text: 'Найдите сумму всех натуральных чисел, кратных 9, которые больше 141, но меньше 170.',
+    options: [
+      { text: '\\(459\\)', correct: true  },
+      { text: '\\(468\\)', correct: false },
+      { text: '\\(315\\)', correct: false },
+      { text: '\\(414\\)', correct: false },
+    ],
+    explanation: 'Числа: 144, 153, 162. Сумма: \\(144+153+162=459\\).',
+  },
+  {
+    topic: 'Геометрия', difficulty: 2,
+    text: 'Радиус описанной окружности прямоугольного треугольника \\(ABC\\) (\\(\\angle ABC=90°\\)) равен \\(18\\sqrt{2}\\). Найдите \\(90\\cdot\\cos\\angle ACB\\), если \\(BC=6\\sqrt{2}\\).',
+    options: [
+      { text: '\\(15\\)', correct: true  },
+      { text: '\\(30\\)', correct: false },
+      { text: '\\(45\\)', correct: false },
+      { text: '\\(60\\)', correct: false },
+    ],
+    explanation: '\\(AC=2R=36\\sqrt{2}\\). \\(\\cos\\angle ACB=\\dfrac{6\\sqrt{2}}{36\\sqrt{2}}=\\dfrac{1}{6}\\). Ответ: \\(15\\).',
+  },
+  {
+    topic: 'Словесные задачи', difficulty: 2,
+    text: 'Проездной на месяц стоит 39 р., разовый — 80 к. 75% потраченной Машей суммы равны стоимости проездного. Сколько поездок она совершила?',
+    options: [
+      { text: '65', correct: true  },
+      { text: '52', correct: false },
+      { text: '75', correct: false },
+      { text: '60', correct: false },
+    ],
+    explanation: '75% суммы=39 р. → сумма=52 р.=5200 к. Поездок: \\(5200/80=65\\).',
+  },
+  {
+    topic: 'Неравенства', difficulty: 2,
+    text: 'Найдите сумму наименьшего и наибольшего целых решений неравенства \\(-3\\le2-\\dfrac{3x-2}{2}<27\\).',
+    options: [
+      { text: '\\(-11\\)', correct: true  },
+      { text: '\\(-10\\)', correct: false },
+      { text: '\\(-12\\)', correct: false },
+      { text: '\\(-14\\)', correct: false },
+    ],
+    explanation: 'Целые решения: от −15 до 4. Сумма крайних: \\(-15+4=-11\\).',
+  },
+  {
+    topic: 'Функции', difficulty: 2,
+    text: 'Функция \\(y=f(x)\\) чётная. Точки \\(A(3;-\\tfrac{2}{3})\\) и \\(B(6;-\\tfrac{3}{4})\\) на графике. Найдите \\(6f(-3)+8f(-6)\\).',
+    options: [
+      { text: '\\(-10\\)', correct: true  },
+      { text: '\\(10\\)',  correct: false },
+      { text: '\\(-6\\)',  correct: false },
+      { text: '\\(-4\\)',  correct: false },
+    ],
+    explanation: '\\(f(-3)=f(3)=-\\tfrac{2}{3}\\), \\(f(-6)=-\\tfrac{3}{4}\\). \\(6\\cdot(-\\tfrac{2}{3})+8\\cdot(-\\tfrac{3}{4})=-4-6=-10\\).',
+  },
+  {
+    topic: 'Логарифмы', difficulty: 3,
+    text: 'Найдите произведение корней уравнения \\(\\log_2^2x-2\\log_2x=\\log_224-\\log_23\\), умноженное на 11.',
+    options: [
+      { text: '\\(44\\)', correct: true  },
+      { text: '\\(22\\)', correct: false },
+      { text: '\\(88\\)', correct: false },
+      { text: '\\(48\\)', correct: false },
+    ],
+    explanation: 'Пусть \\(t=\\log_2x\\): \\(t^2-2t=3\\Rightarrow t=3\\) или \\(t=-1\\). Корни: \\(x=8,\\;x=\\tfrac{1}{2}\\). Произведение \\(=4\\). \\(4\\times11=44\\).',
+  },
+  {
+    topic: 'Геометрия', difficulty: 3,
+    text: 'Плоскость, параллельная основанию треугольной пирамиды, делит высоту в отношении \\(5:3\\) от вершины. Найдите площадь сечения, если она меньше площади основания на 39.',
+    options: [
+      { text: '\\(25\\)', correct: true  },
+      { text: '\\(36\\)', correct: false },
+      { text: '\\(16\\)', correct: false },
+      { text: '\\(49\\)', correct: false },
+    ],
+    explanation: '\\(k=\\tfrac{5}{8}\\). \\(S_{\\text{осн}}-\\tfrac{25}{64}S_{\\text{осн}}=39\\Rightarrow S_{\\text{осн}}=64\\). \\(S_{\\text{сеч}}=25\\).',
+  },
+  {
+    topic: 'Показательные неравенства', difficulty: 3,
+    text: 'Найдите наименьшее целое решение неравенства \\(8^{2x-32}+10\\cdot4^{3x-49}>56\\).',
+    options: [
+      { text: '\\(17\\)', correct: true  },
+      { text: '\\(16\\)', correct: false },
+      { text: '\\(18\\)', correct: false },
+      { text: '\\(15\\)', correct: false },
+    ],
+    explanation: 'Пусть \\(t=2^{6x-98}\\): \\(4t+10t>56\\Rightarrow t>4\\Rightarrow x>16{,}\\overline{6}\\). Мин. целое: 17.',
+  },
+  {
+    topic: 'Логарифмы', difficulty: 3,
+    text: 'Найдите произведение наименьшего и наибольшего целых решений неравенства \\(\\log_3^2(x+12)-\\log_3(x+12)-6<0\\).',
+    options: [
+      { text: '\\(-154\\)', correct: true  },
+      { text: '\\(154\\)',  correct: false },
+      { text: '\\(-110\\)', correct: false },
+      { text: '\\(-180\\)', correct: false },
+    ],
+    explanation: 'Пусть \\(t=\\log_3(x+12)\\): \\(-2<t<3\\Rightarrow -11{,}88<x<15\\). Целые: от −11 до 14. \\(-11\\times14=-154\\).',
+  },
+  {
+    topic: 'Неравенства', difficulty: 2,
+    text: 'Решите неравенство \\(|2x-3|\\le7\\) и укажите число целых решений.',
+    options: [
+      { text: '\\(8\\)', correct: true  },
+      { text: '\\(7\\)', correct: false },
+      { text: '\\(9\\)', correct: false },
+      { text: '\\(6\\)', correct: false },
+    ],
+    explanation: '\\(-7\\le2x-3\\le7\\Rightarrow-2\\le x\\le5\\). Целые: \\(-2,-1,0,1,2,3,4,5\\) — 8 чисел.',
+  },
+
+  /* ══════════════════════════════════════════════════════════════════════
+     РАЗДЕЛ 2 — ЦТ 2021, Вариант 1
+     ══════════════════════════════════════════════════════════════════════ */
+
+  {
+    topic: 'Геометрия', difficulty: 1, year: 2021,
+    text: '[ЦТ 2021 · A1]\n\nТреугольник \\(ABC\\) — равнобедренный с основанием \\(AB\\). Угол при вершине \\(C = 56°\\). Найдите угол \\(BAC\\).',
+    options: [
+      { text: '62°', correct: true  },
+      { text: '68°', correct: false },
+      { text: '34°', correct: false },
+      { text: '64°', correct: false },
+      { text: '28°', correct: false },
+    ],
+    explanation: '\\(2\\cdot\\angle BAC=180°-56°=124°\\Rightarrow\\angle BAC=62°\\).',
+  },
+  {
+    topic: 'Арифметика и степени', difficulty: 1, year: 2021,
+    text: '[ЦТ 2021 · A2]\n\nСреди дробей \\(\\dfrac{13}{7};\\;\\dfrac{15}{7};\\;\\dfrac{30}{7};\\;\\dfrac{27}{7};\\;\\dfrac{18}{7}\\) укажите ту, которая равна \\(4\\dfrac{2}{7}\\).',
+    options: [
+      { text: '\\(\\dfrac{13}{7}\\)', correct: false },
+      { text: '\\(\\dfrac{15}{7}\\)', correct: false },
+      { text: '\\(\\dfrac{30}{7}\\)', correct: true  },
+      { text: '\\(\\dfrac{27}{7}\\)', correct: false },
+      { text: '\\(\\dfrac{18}{7}\\)', correct: false },
+    ],
+    explanation: '\\(4\\dfrac{2}{7}=\\dfrac{30}{7}\\).',
+  },
+  {
+    topic: 'Уравнения', difficulty: 1, year: 2021,
+    text: '[ЦТ 2021 · A3]\n\nУкажите пару, которая НЕ является решением \\(x+y=12\\): \\((3;9)\\), \\((-15;3)\\), \\((0;12)\\), \\((14;-2)\\), \\((6;6)\\).',
+    options: [
+      { text: '\\((3;9)\\)',    correct: false },
+      { text: '\\((-15;3)\\)', correct: true  },
+      { text: '\\((0;12)\\)',  correct: false },
+      { text: '\\((14;-2)\\)', correct: false },
+      { text: '\\((6;6)\\)',   correct: false },
+    ],
+    explanation: '\\(-15+3=-12\\neq12\\).',
+  },
+  {
+    topic: 'Неравенства', difficulty: 1, year: 2021,
+    text: '[ЦТ 2021 · A4]\n\nСреди чисел \\(-7;-11;11;-1;0\\) укажите то, которое не меньше \\(-9\\) и не больше \\(-2\\).',
+    options: [
+      { text: '\\(-7\\)',  correct: true  },
+      { text: '\\(-11\\)', correct: false },
+      { text: '\\(11\\)',  correct: false },
+      { text: '\\(-1\\)',  correct: false },
+      { text: '\\(0\\)',   correct: false },
+    ],
+    explanation: '\\(-9\\le-7\\le-2\\) — только \\(-7\\) подходит.',
+  },
+  {
+    topic: 'Словесные задачи', difficulty: 1, year: 2021,
+    text: '[ЦТ 2021 · A5]\n\nТочка \\(C\\) делит отрезок \\(AB\\) в отношении \\(5:3\\) от \\(A\\). Длина \\(AB=24\\). Найдите \\(CB\\).',
+    options: [
+      { text: '\\(14{,}4\\)', correct: false },
+      { text: '\\(9{,}6\\)',  correct: false },
+      { text: '\\(6\\)',      correct: false },
+      { text: '\\(9\\)',      correct: true  },
+      { text: '\\(15\\)',     correct: false },
+    ],
+    explanation: '\\(CB=\\dfrac{3}{8}\\cdot24=9\\).',
+  },
+  {
+    topic: 'Словесные задачи', difficulty: 2, year: 2021,
+    text: '[ЦТ 2021 · A6]\n\nВ магазин поступило 43 коробки по 110 пачек масла. Какое наименьшее количество пачек нужно продавать ежедневно, чтобы распродать за не более чем 60 дней?',
+    options: [
+      { text: '78', correct: false },
+      { text: '81', correct: false },
+      { text: '79', correct: true  },
+      { text: '83', correct: false },
+    ],
+    explanation: '\\(43\\times110=4730\\). \\(\\lceil4730/60\\rceil=79\\).',
+  },
+  {
+    topic: 'Функции', difficulty: 2, year: 2021,
+    text: '[ЦТ 2021 · A7]\n\nНайдите количество целых \\(x\\in[-6;6]\\), при которых \\(f(x)\\le-3\\) (по графику функции).',
+    options: [
+      { text: '7', correct: true  },
+      { text: '6', correct: false },
+      { text: '5', correct: false },
+      { text: '9', correct: false },
+    ],
+    explanation: 'По графику: 7 целых значений.',
+  },
+  {
+    topic: 'Функции', difficulty: 2, year: 2021,
+    text: '[ЦТ 2021 · A8]\n\nУпростите \\(|a-6|-|a|\\) при \\(\\dfrac{1}{6}<a<\\dfrac{3}{8}\\).',
+    options: [
+      { text: '\\(-6\\)',    correct: false },
+      { text: '\\(2a+6\\)',  correct: false },
+      { text: '\\(-2a-6\\)', correct: false },
+      { text: '\\(6-2a\\)',  correct: true  },
+    ],
+    explanation: '\\(|a-6|=6-a\\) и \\(|a|=a\\). Результат: \\(6-a-a=6-2a\\).',
+  },
+  {
+    topic: 'Логарифмы', difficulty: 2, year: 2021,
+    text: '[ЦТ 2021 · A9]\n\nЧему равно \\(\\log_798-\\log_78+\\log_7\\dfrac{4}{7}\\)?',
+    options: [
+      { text: '\\(1\\)',         correct: true  },
+      { text: '\\(2\\)',         correct: false },
+      { text: '\\(\\log_72\\)',  correct: false },
+      { text: '\\(0\\)',         correct: false },
+    ],
+    explanation: '\\(\\log_7\\dfrac{98\\cdot4}{8\\cdot7}=\\log_77=1\\).',
+  },
+  {
+    topic: 'Словесные задачи', difficulty: 1, year: 2021,
+    text: '[ЦТ 2021 · A10]\n\nВелосипедист в первый день проехал 52 км, во второй — на 15% меньше. Сколько км за два дня?',
+    options: [
+      { text: '102,4', correct: false },
+      { text: '96,2',  correct: true  },
+      { text: '89',    correct: false },
+      { text: '88,4',  correct: false },
+    ],
+    explanation: '\\(52\\times0{,}85=44{,}2\\). Итого: \\(52+44{,}2=96{,}2\\).',
+  },
+  {
+    topic: 'Уравнения', difficulty: 1, year: 2021,
+    text: '[ЦТ 2021 · A11]\n\nНайдите произведение координат точки пересечения прямых \\(6x-y=4\\) и \\(y-18=0\\).',
+    options: [
+      { text: '4',  correct: false },
+      { text: '18', correct: false },
+      { text: '72', correct: false },
+      { text: '66', correct: true  },
+    ],
+    explanation: '\\(y=18\\Rightarrow6x=22\\Rightarrow x=\\tfrac{11}{3}\\). Произведение: \\(\\tfrac{11}{3}\\cdot18=66\\).',
+  },
+  {
+    topic: 'Функции', difficulty: 2, year: 2021, type: 'multiple',
+    text: '[ЦТ 2021 · A12]\n\nУкажите номера чётных функций:\n1) \\(y=0{,}2x^2\\)\n2) \\(y=8^{\\tfrac{x^4-16}{2|x|}}\\)\n3) \\(y=-\\dfrac{3}{x}\\)\n4) \\(y=x^2-x+2\\)\n5) \\(y=\\sin2x\\)',
+    options: [
+      { text: '1', correct: true  },
+      { text: '2', correct: true  },
+      { text: '3', correct: false },
+      { text: '4', correct: false },
+      { text: '5', correct: false },
+    ],
+    explanation: '1) ✓ чётная. 2) ✓ показатель не меняется при \\(x\\to-x\\). 3) нечётная. 4) ни чётная ни нечётная. 5) нечётная.',
+  },
+  {
+    topic: 'Геометрия', difficulty: 2, year: 2021,
+    text: '[ЦТ 2021 · A13]\n\nПлощадь прямоугольного треугольника равна 2, радиус описанной окружности \\(R\\). Укажите верную формулу суммы катетов \\(a+b\\).\n1) \\(\\dfrac{R^2+4}{R}\\)\n2) \\(\\sqrt{R^2+2}\\)\n3) \\(2\\sqrt{R^2+4}\\)\n4) \\(\\dfrac{R^2+2}{R}\\)\n5) \\(2\\sqrt{R^2+2}\\)',
+    options: [
+      { text: '1', correct: false },
+      { text: '2', correct: false },
+      { text: '3', correct: false },
+      { text: '4', correct: false },
+      { text: '5', correct: true  },
+    ],
+    explanation: '\\(c=2R,\\;ab=4\\). \\((a+b)^2=4R^2+8\\Rightarrow a+b=2\\sqrt{R^2+2}\\).',
+  },
+  {
+    topic: 'Геометрия', difficulty: 3, year: 2021,
+    text: '[ЦТ 2021 · A14]\n\nПрямая треугольная призма \\(ABCA_1B_1C_1\\): \\(\\angle A=20°\\), \\(\\angle C=25°\\), радиус описанной окружности \\(\\sqrt{7}\\). Площадь грани \\(AA_1C_1C=2\\sqrt{35}\\). Найдите длину диагонали этой грани.',
+    options: [
+      { text: '\\(3\\sqrt{3}\\)', correct: false },
+      { text: '\\(2\\sqrt{5}\\)', correct: false },
+      { text: '\\(2\\sqrt{6}\\)', correct: true  },
+      { text: '\\(4\\sqrt{6}\\)', correct: false },
+    ],
+    explanation: '\\(\\angle B=135°\\). \\(AC=\\sqrt{14}\\). \\(AA_1=\\sqrt{10}\\). Диагональ: \\(\\sqrt{14+10}=2\\sqrt{6}\\).',
+  },
+  {
+    topic: 'Квадратные уравнения', difficulty: 2, year: 2021,
+    text: '[ЦТ 2021 · A15]\n\nПараболы \\(y=2x^2+bx+c\\) с нулями \\(x=3\\) и \\(x=4\\). Найдите \\(b+c\\).',
+    options: [
+      { text: '12', correct: false },
+      { text: '5',  correct: false },
+      { text: '10', correct: true  },
+      { text: '14', correct: false },
+    ],
+    explanation: '\\(b=-14,\\;c=24\\). \\(b+c=10\\).',
+  },
+  {
+    topic: 'Уравнения', difficulty: 2, year: 2021, type: 'multiple',
+    text: '[ЦТ 2021 · A16]\n\nУкажите номера равносильных уравнений:\n1) \\((x-6)(x+6)=0\\)\n2) \\(\\sqrt{x+10}=2\\)\n3) \\(x^2+36=0\\)\n4) \\(\\dfrac{x-x^2-5}{4}+\\dfrac{x^2-x-3}{3}=\\dfrac{1}{4}\\)\n5) \\(|x|-6=0\\)',
+    options: [
+      { text: '1', correct: true  },
+      { text: '2', correct: false },
+      { text: '3', correct: false },
+      { text: '4', correct: false },
+      { text: '5', correct: true  },
+    ],
+    explanation: 'Ур. 1 и 5 имеют одинаковые решения \\(x=\\pm6\\).',
+  },
+  {
+    topic: 'Геометрия', difficulty: 2, year: 2021,
+    text: '[ЦТ 2021 · A17]\n\nТочки \\(A\\) и \\(B\\) — соседние вершины квадрата; \\(\\Delta x=7\\), \\(\\Delta y=2\\). Найдите площадь квадрата \\(ABCD\\).',
+    options: [
+      { text: '37', correct: false },
+      { text: '14', correct: false },
+      { text: '50', correct: false },
+      { text: '53', correct: true  },
+    ],
+    explanation: '\\(AB^2=7^2+2^2=53\\). Площадь \\(=AB^2=53\\).',
+  },
+  {
+    topic: 'Геометрия', difficulty: 3, year: 2021,
+    text: '[ЦТ 2021 · A18]\n\nПравильная четырёхугольная пирамида \\(SABCD\\), все рёбра 48. \\(M\\) — середина \\(SD\\), \\(N\\in SC\\), \\(CN:NS=1:3\\). Плоскость через \\(M,N\\), параллельная \\(SA\\), пересекает основание по отрезку длиной…',
+    options: [
+      { text: '\\(16\\sqrt{13}\\)', correct: false },
+      { text: '\\(16\\sqrt{10}\\)', correct: true  },
+      { text: '\\(8\\sqrt{37}\\)',  correct: false },
+      { text: '\\(12\\sqrt{17}\\)', correct: false },
+    ],
+    explanation: 'Ответ: \\(16\\sqrt{10}\\).',
+  },
+  {
+    topic: 'Статистика и диаграммы', difficulty: 1, year: 2021,
+    text: '[ЦТ 2021 · B1]\n\nПо диаграмме посещений сайта (вт≈400, ср≈440, чт≈260, пт≈280, сб≈640, вс≈650) установите соответствие:\n\nА) В какой день было на 20 посещений больше предыдущего?\nБ) В какой день — на 35% меньше вторника?\nВ) В какой день — на 10% больше предыдущего?',
+    options: [
+      { text: 'А4Б3В2', correct: true  },
+      { text: 'А2Б3В4', correct: false },
+      { text: 'А4Б2В3', correct: false },
+      { text: 'А3Б4В2', correct: false },
+    ],
+    explanation: 'А) пятница(+20 от чт)→4; Б) 400×0,65=260=чт→3; В) 400×1,1=440=ср→2. Ответ: А4Б3В2.',
+  },
+  {
+    topic: 'Тригонометрия', difficulty: 3, year: 2021, type: 'multiple',
+    text: '[ЦТ 2021 · B2]\n\nВыберите три верных утверждения:\n1) если \\(\\cos(\\arccos a)=\\cos(\\arccos\\tfrac{1}{18})\\), то \\(a=\\tfrac{1}{18}\\)\n2) если \\(\\cos a=-\\cos\\tfrac{\\pi}{18}\\), то \\(\\arccos(\\cos a)=-\\tfrac{\\pi}{18}\\)\n3) если \\(\\sin a=\\sin\\tfrac{17\\pi}{18}\\), то \\(\\arcsin(\\sin a)=\\tfrac{17\\pi}{18}\\)\n4) если \\(\\arccos a=\\tfrac{\\pi}{18}\\), то \\(a=\\cos\\tfrac{\\pi}{18}\\)\n5) если \\(\\sin a=\\sin\\tfrac{\\pi}{18}\\), то \\(a=-\\tfrac{\\pi}{18}\\)\n6) если \\(a=\\tfrac{\\pi}{18}\\) и \\(\\sin a=\\sin\\tfrac{\\pi}{18}\\), то \\(\\arcsin(\\sin a)=\\tfrac{\\pi}{18}\\)',
+    options: [
+      { text: '1', correct: true  },
+      { text: '2', correct: false },
+      { text: '3', correct: false },
+      { text: '4', correct: true  },
+      { text: '5', correct: false },
+      { text: '6', correct: true  },
+    ],
+    explanation: '1) ✓, 4) ✓ по определению arccos, 6) ✓ т.к. \\(\\tfrac{\\pi}{18}\\in[-\\tfrac{\\pi}{2};\\tfrac{\\pi}{2}]\\).',
+  },
+  {
+    topic: 'Геометрия', difficulty: 3, year: 2021, type: 'multiple',
+    text: '[ЦТ 2021 · B3]\n\nПлоскости \\(\\alpha\\perp\\beta\\), пересекаются по \\(a\\), точка \\(A\\in\\beta\\). Выберите три верных утверждения:\n1) любая прямая через A, пересекающая α, пересекает a\n2) единственная прямая через A ⊥ α\n3) прямая через A ⊥ β тоже ⊥ α\n4) любая точка a ∈ α и β\n5) любая прямая в α ⊥ a тоже ⊥ β\n6) любая прямая ⊥ a принадлежит β',
+    options: [
+      { text: '1', correct: true  },
+      { text: '2', correct: false },
+      { text: '3', correct: false },
+      { text: '4', correct: true  },
+      { text: '5', correct: true  },
+      { text: '6', correct: false },
+    ],
+    explanation: '1) ✓, 4) ✓ — по определению линии пересечения, 5) ✓ — признак перпендикулярности плоскостей.',
+  },
+  {
+    topic: 'Словесные задачи', difficulty: 2, year: 2021,
+    text: '[ЦТ 2021 · B4]\n\nНа пастбище (квадрат) загон для скота занимает \\(\\tfrac{1}{32}\\) площади пастбища. Найдите площадь загона (в м²), если по рисунку ширина пастбища связана с размером загона.',
+    options: [
+      { text: '800',  correct: true  },
+      { text: '640',  correct: false },
+      { text: '900',  correct: false },
+      { text: '1000', correct: false },
+    ],
+    explanation: '\\(S_{\\text{паст}}=32\\cdot S_{\\text{загон}}\\). При \\(a^2=800\\): площадь загона = 800 м².',
+  },
+  {
+    topic: 'Арифметика и степени', difficulty: 2, year: 2021,
+    text: '[ЦТ 2021 · B5]\n\nНайдите \\(\\sqrt{8}\\cdot\\sqrt[3]{-7}\\cdot\\sqrt{32}\\cdot\\sqrt[3]{49}-7\\cdot\\dfrac{\\sqrt[3]{64}}{-2}\\).',
+    options: [
+      { text: '\\(-98\\)',  correct: true  },
+      { text: '\\(-126\\)', correct: false },
+      { text: '\\(-84\\)',  correct: false },
+      { text: '\\(-70\\)',  correct: false },
+    ],
+    explanation: '\\(\\sqrt{8}\\cdot\\sqrt{32}=16\\). \\(\\sqrt[3]{-7\\cdot49}=-7\\). Первое: \\(-112\\). Второе: \\(7\\cdot4/(-2)=-14\\). \\(-112-(-14)=-98\\).',
+  },
+  {
+    topic: 'Геометрия', difficulty: 2, year: 2021,
+    text: '[ЦТ 2021 · B6]\n\nПлощадь боковой поверхности цилиндра \\(=15\\pi\\), радиус на 3,5 больше высоты. Найдите \\(\\dfrac{6V}{\\pi}\\).',
+    options: [
+      { text: '225', correct: true  },
+      { text: '150', correct: false },
+      { text: '300', correct: false },
+      { text: '180', correct: false },
+    ],
+    explanation: '\\(rh=7{,}5,\\;r=h+3{,}5\\Rightarrow h=1{,}5,\\;r=5\\). \\(V=37{,}5\\pi\\). \\(6V/\\pi=225\\).',
+  },
+  {
+    topic: 'Тригонометрия', difficulty: 3, year: 2021,
+    text: '[ЦТ 2021 · B7]\n\nРешите \\(\\sqrt{3}\\cos\\!\\left(\\dfrac{5\\pi}{18}+\\pi x\\right)=-1{,}5\\). Найдите: 3 × наибольший корень на [3;9] × количество корней на [3;9].',
+    options: [
+      { text: '160', correct: true  },
+      { text: '120', correct: false },
+      { text: '200', correct: false },
+      { text: '90',  correct: false },
+    ],
+    explanation: 'На [3;9]: 6 корней, \\(x_{\\max}=\\tfrac{80}{9}\\). Ответ: \\(3\\cdot\\tfrac{80}{9}\\cdot6=160\\).',
+  },
+  {
+    topic: 'Логарифмы', difficulty: 3, year: 2021,
+    text: '[ЦТ 2021 · B8]\n\nНайдите сумму всех целых решений \\(\\log_{0{,}3}\\log_{4{,}7}(2^{x+9{,}1}-1)\\ge0\\).',
+    options: [
+      { text: '\\(-15\\)', correct: true  },
+      { text: '\\(-10\\)', correct: false },
+      { text: '\\(-21\\)', correct: false },
+      { text: '\\(-6\\)',  correct: false },
+    ],
+    explanation: 'Целые решения: \\(x=-8\\) и \\(x=-7\\). Сумма: \\(-15\\).',
+  },
+  {
+    topic: 'Геометрия', difficulty: 3, year: 2021,
+    text: '[ЦТ 2021 · B9]\n\n\\(AC\\) — общая гипотенуза прямоугольных треугольников \\(ABC\\) и \\(ADC\\), плоскости ⊥. \\(AB=9\\sqrt{3}\\), \\(BC=9\\sqrt{5}\\), \\(AD=DC\\). Найдите \\(BD^2\\).',
+    options: [
+      { text: '324', correct: true  },
+      { text: '256', correct: false },
+      { text: '400', correct: false },
+      { text: '289', correct: false },
+    ],
+    explanation: '\\(AC=18\\sqrt{2}\\), \\(AD=18\\). \\(BD^2=324\\).',
+  },
+  {
+    topic: 'Прогрессии', difficulty: 2, year: 2021,
+    text: '[ЦТ 2021 · B10]\n\n\\(a_n=2n^2-15n\\). Найдите наименьший член \\(a_m\\) и его номер \\(m\\). Запишите \\(m\\cdot a_m\\).',
+    options: [
+      { text: '\\(-112\\)', correct: true  },
+      { text: '\\(-98\\)',  correct: false },
+      { text: '\\(-128\\)', correct: false },
+      { text: '\\(-80\\)',  correct: false },
+    ],
+    explanation: '\\(a_4=-28\\) — минимум. \\(4\\times(-28)=-112\\).',
+  },
+  {
+    topic: 'Уравнения', difficulty: 3, year: 2021,
+    text: '[ЦТ 2021 · B11]\n\nНайдите \\(25\\cdot(x_1^2+x_2^2)\\), где \\(x_1,x_2\\) — корни уравнения \\(10\\sqrt{\\dfrac{x^2}{14+5x-x^2}}-2\\sqrt{\\dfrac{14+5x-x^2}{x^2}}=19\\).',
+    options: [
+      { text: '960',  correct: true  },
+      { text: '800',  correct: false },
+      { text: '1200', correct: false },
+      { text: '750',  correct: false },
+    ],
+    explanation: '\\(t=2\\Rightarrow5x^2-20x-56=0\\). \\(x_1^2+x_2^2=\\tfrac{192}{5}\\). \\(25\\cdot\\tfrac{192}{5}=960\\).',
+  },
+  {
+    topic: 'Геометрия', difficulty: 3, year: 2021,
+    text: '[ЦТ 2021 · B12]\n\nПрямая через вершину \\(K\\) треугольника \\(KMN\\) делит медиану \\(MA\\) в отношении \\(8:3\\) от \\(M\\) и пересекает \\(MN\\) в точке \\(B\\). \\(S_{KMB}=16\\). Найдите \\(S_{KMN}\\).',
+    options: [
+      { text: '28', correct: true  },
+      { text: '24', correct: false },
+      { text: '32', correct: false },
+      { text: '36', correct: false },
+    ],
+    explanation: '\\(MB:BN=8:3\\Rightarrow MN/MB=11/8\\). \\(S_{KMN}=28\\).',
+  },
+  {
+    topic: 'Теория чисел', difficulty: 3, year: 2021,
+    text: '[ЦТ 2021 · B13]\n\nПетя записал два различных натуральных числа, сложил, перемножил, вычел меньшее из большего, разделил большее на меньшее. Сумма четырёх результатов = 1521. Найдите сумму всех таких пар.',
+    options: [
+      { text: '460', correct: true  },
+      { text: '390', correct: false },
+      { text: '520', correct: false },
+      { text: '410', correct: false },
+    ],
+    explanation: 'Пары: (108,12) и (338,2). Суммы: 120+340=460.',
+  },
+  {
+    topic: 'Геометрия', difficulty: 3, year: 2021,
+    text: '[ЦТ 2021 · B14]\n\nПирамида \\(SABCD\\): \\(AO=9\\), \\(OC=16\\), \\(BO=OD=12\\), диагонали ⊥. Вершина \\(S\\) удалена на \\(\\tfrac{61}{7}\\) от каждой стороны основания. Через середину высоты параллельно основанию проведена плоскость. Найдите \\(10\\cdot V_{\\text{большей части}}\\).',
+    options: [
+      { text: '1375', correct: true  },
+      { text: '1250', correct: false },
+      { text: '1500', correct: false },
+      { text: '1100', correct: false },
+    ],
+    explanation: '\\(S_{ABCD}=300\\), \\(h=\\tfrac{11}{7}\\), \\(V=\\tfrac{1100}{7}\\). Большая часть: \\(\\tfrac{1925}{14}\\). \\(10V=1375\\).',
+  },
+];
+
+/* ── Вставка (идемпотентно — пропускать уже существующие) ─────────────── */
+let inserted = 0, skipped = 0;
+const checkQ  = db.prepare('SELECT id FROM questions WHERE subject_id=? AND text=?');
+const insertQ = db.prepare(
+  'INSERT INTO questions (subject_id, topic_id, text, difficulty, year, explanation, type) VALUES (?,?,?,?,?,?,?)'
+);
+const insertO = db.prepare(
+  'INSERT INTO options (question_id, text, is_correct, order_index) VALUES (?,?,?,?)'
+);
+
+db.exec('BEGIN');
+try {
+  for (const q of questions) {
+    if (checkQ.get(SID, q.text)) { skipped++; continue; }
+    const topicId = getOrCreateTopic(SID, q.topic);
+    const { lastInsertRowid: qid } = insertQ.run(
+      SID, topicId, q.text, q.difficulty,
+      q.year || null, q.explanation || null, q.type || 'single'
+    );
+    q.options.forEach((o, i) => insertO.run(qid, o.text, o.correct ? 1 : 0, i));
+    inserted++;
+  }
+  db.exec('COMMIT');
+  console.log(`✓ math: вставлено ${inserted}, пропущено ${skipped} (уже было).`);
+} catch (err) {
+  db.exec('ROLLBACK');
+  console.error('Ошибка:', err.message);
+  process.exit(1);
+}
diff --git a/backend/src/db/seed-phys.js b/backend/src/db/seed-phys.js
new file mode 100644
index 0000000..f21d2a0
--- /dev/null
+++ b/backend/src/db/seed-phys.js
@@ -0,0 +1,1175 @@
+/**
+ * Seed: Физика — базовый уровень (~97 вопросов)
+ * Темы: кинематика, динамика, законы сохранения, МФТ, термодинамика,
+ *       электростатика, постоянный ток, магнетизм, ЭМИ, оптика, квантовая физика
+ * Run: node src/db/seed-phys.js  (из папки backend)
+ */
+'use strict';
+const db = require('./db');
+
+function getOrCreateTopic(subjectId, name) {
+  const existing = db.prepare(
+    'SELECT id FROM topics WHERE subject_id = ? AND LOWER(name) = LOWER(?)'
+  ).get(subjectId, name);
+  if (existing) return existing.id;
+  return db.prepare('INSERT INTO topics (subject_id, name) VALUES (?, ?)')
+    .run(subjectId, name).lastInsertRowid;
+}
+
+const phys = db.prepare("SELECT id FROM subjects WHERE slug = 'phys'").get();
+if (!phys) { console.error('Subject "phys" not found. Run migrate first.'); process.exit(1); }
+const SID = phys.id;
+
+/* ═════════════════════════════════════════════════════════════════════════
+   Формат вопроса:
+   { topic, difficulty (1–3), type, text, options: [{text, correct}], explanation }
+   source_type = 'базовый' (добавляется автоматически)
+═════════════════════════════════════════════════════════════════════════ */
+const questions = [
+
+  /* ══════════════════════════════════════════════════════════════════════
+     КИНЕМАТИКА
+  ══════════════════════════════════════════════════════════════════════ */
+  {
+    topic: 'Кинематика', difficulty: 1, type: 'single',
+    text: 'Тело движется равномерно со скоростью 72 км/ч. Какой путь пройдёт тело за 5 минут?',
+    options: [
+      { text: '6000 м', correct: true  },
+      { text: '360 м',  correct: false },
+      { text: '600 м',  correct: false },
+      { text: '7200 м', correct: false },
+    ],
+    explanation: '\\(v = 72\\,\\text{км/ч} = 20\\,\\text{м/с}\\);  \\(t = 5\\cdot60 = 300\\,\\text{с}\\);  \\(s = vt = 20\\cdot300 = 6000\\,\\text{м}\\).',
+  },
+  {
+    topic: 'Кинематика', difficulty: 1, type: 'single',
+    text: 'Автомобиль равноускоренно разгоняется от 0 до 30 м/с за 10 с. Чему равно ускорение автомобиля?',
+    options: [
+      { text: '3 м/с²',   correct: true  },
+      { text: '0,3 м/с²', correct: false },
+      { text: '30 м/с²',  correct: false },
+      { text: '300 м/с²', correct: false },
+    ],
+    explanation: '\\(a = \\dfrac{v - v_0}{t} = \\dfrac{30 - 0}{10} = 3\\,\\text{м/с}^2\\).',
+  },
+  {
+    topic: 'Кинематика', difficulty: 1, type: 'single',
+    text: 'Тело свободно падает с высоты 80 м (\\(g = 10\\) м/с²). С какой скоростью оно ударится о землю?',
+    options: [
+      { text: '40 м/с', correct: true  },
+      { text: '20 м/с', correct: false },
+      { text: '80 м/с', correct: false },
+      { text: '4 м/с',  correct: false },
+    ],
+    explanation: '\\(v = \\sqrt{2gh} = \\sqrt{2\\cdot10\\cdot80} = \\sqrt{1600} = 40\\,\\text{м/с}\\).',
+  },
+  {
+    topic: 'Кинематика', difficulty: 1, type: 'single',
+    text: 'Тело брошено горизонтально со скоростью 10 м/с с высоты 45 м (\\(g = 10\\) м/с²). Время полёта равно:',
+    options: [
+      { text: '3 с',   correct: true  },
+      { text: '4,5 с', correct: false },
+      { text: '9 с',   correct: false },
+      { text: '1,5 с', correct: false },
+    ],
+    explanation: '\\(h = \\dfrac{gt^2}{2}\\)  ⟹  \\(t = \\sqrt{\\dfrac{2h}{g}} = \\sqrt{\\dfrac{90}{10}} = 3\\,\\text{с}\\).',
+  },
+  {
+    topic: 'Кинематика', difficulty: 1, type: 'single',
+    text: 'Тело движется по окружности радиусом 5 м с угловой скоростью 4 рад/с. Линейная скорость тела равна:',
+    options: [
+      { text: '20 м/с',   correct: true  },
+      { text: '0,8 м/с',  correct: false },
+      { text: '1,25 м/с', correct: false },
+      { text: '4 м/с',    correct: false },
+    ],
+    explanation: '\\(v = \\omega R = 4\\cdot5 = 20\\,\\text{м/с}\\).',
+  },
+  {
+    topic: 'Кинематика', difficulty: 2, type: 'single',
+    text: 'Тело начало движение из покоя с постоянным ускорением 2 м/с² и прошло путь 100 м. Скорость тела в конце пути:',
+    options: [
+      { text: '20 м/с',       correct: true  },
+      { text: '10 м/с',       correct: false },
+      { text: '\\(\\sqrt{200}\\) м/с', correct: false },
+      { text: '400 м/с',      correct: false },
+    ],
+    explanation: '\\(v^2 = 2as = 2\\cdot2\\cdot100 = 400\\)  ⟹  \\(v = 20\\,\\text{м/с}\\).',
+  },
+  {
+    topic: 'Кинематика', difficulty: 2, type: 'single',
+    text: 'Тело брошено вертикально вверх с начальной скоростью 30 м/с (\\(g = 10\\) м/с²). Максимальная высота подъёма:',
+    options: [
+      { text: '45 м', correct: true  },
+      { text: '30 м', correct: false },
+      { text: '90 м', correct: false },
+      { text: '15 м', correct: false },
+    ],
+    explanation: '\\(H = \\dfrac{v_0^2}{2g} = \\dfrac{900}{20} = 45\\,\\text{м}\\).',
+  },
+  {
+    topic: 'Кинематика', difficulty: 2, type: 'single',
+    text: 'Два поезда движутся навстречу: скорости 54 км/ч и 36 км/ч. Начальное расстояние 2700 м. Через сколько секунд они встретятся?',
+    options: [
+      { text: '108 с', correct: true  },
+      { text: '50 с',  correct: false },
+      { text: '75 с',  correct: false },
+      { text: '30 с',  correct: false },
+    ],
+    explanation: '\\(v_\\text{сближ} = 54+36 = 90\\,\\text{км/ч} = 25\\,\\text{м/с}\\);  \\(t = \\dfrac{2700}{25} = 108\\,\\text{с}\\).',
+  },
+  {
+    topic: 'Кинематика', difficulty: 2, type: 'single',
+    text: 'Тело движется по окружности радиусом 0,5 м со скоростью 3 м/с. Центростремительное ускорение:',
+    options: [
+      { text: '18 м/с²', correct: true  },
+      { text: '6 м/с²',  correct: false },
+      { text: '9 м/с²',  correct: false },
+      { text: '1,5 м/с²', correct: false },
+    ],
+    explanation: '\\(a_\\text{цс} = \\dfrac{v^2}{R} = \\dfrac{9}{0{,}5} = 18\\,\\text{м/с}^2\\).',
+  },
+  {
+    topic: 'Кинематика', difficulty: 3, type: 'single',
+    text: 'Тело движется из покоя с ускорением 4 м/с². Путь, пройденный за 4-ю секунду:',
+    options: [
+      { text: '14 м', correct: true  },
+      { text: '32 м', correct: false },
+      { text: '28 м', correct: false },
+      { text: '16 м', correct: false },
+    ],
+    explanation: 'Путь за \\(n\\)-ю секунду: \\(s_n = \\dfrac{a(2n-1)}{2} = \\dfrac{4\\cdot7}{2} = 14\\,\\text{м}\\).',
+  },
+
+  /* ══════════════════════════════════════════════════════════════════════
+     ДИНАМИКА
+  ══════════════════════════════════════════════════════════════════════ */
+  {
+    topic: 'Динамика', difficulty: 1, type: 'single',
+    text: 'На тело массой 5 кг действует сила 20 Н. Ускорение тела равно:',
+    options: [
+      { text: '4 м/с²',    correct: true  },
+      { text: '100 м/с²',  correct: false },
+      { text: '0,25 м/с²', correct: false },
+      { text: '25 м/с²',   correct: false },
+    ],
+    explanation: '\\(a = \\dfrac{F}{m} = \\dfrac{20}{5} = 4\\,\\text{м/с}^2\\).',
+  },
+  {
+    topic: 'Динамика', difficulty: 1, type: 'single',
+    text: 'Тело массой 200 г движется с ускорением 5 м/с². Результирующая сила:',
+    options: [
+      { text: '1 Н',    correct: true  },
+      { text: '0,04 Н', correct: false },
+      { text: '25 Н',   correct: false },
+      { text: '40 Н',   correct: false },
+    ],
+    explanation: '\\(F = ma = 0{,}2\\cdot5 = 1\\,\\text{Н}\\).',
+  },
+  {
+    topic: 'Динамика', difficulty: 1, type: 'single',
+    text: 'При увеличении расстояния между двумя телами в 3 раза сила взаимного тяготения:',
+    options: [
+      { text: 'уменьшится в 9 раз', correct: true  },
+      { text: 'уменьшится в 3 раза', correct: false },
+      { text: 'увеличится в 3 раза', correct: false },
+      { text: 'не изменится',        correct: false },
+    ],
+    explanation: 'По закону тяготения \\(F \\propto 1/r^2\\). При \\(r \\to 3r\\): \\(F \\to F/9\\).',
+  },
+  {
+    topic: 'Динамика', difficulty: 2, type: 'single',
+    text: 'Тело массой 3 кг на горизонтальной поверхности тянут горизонтальной силой 15 Н. Коэффициент трения \\(\\mu = 0{,}2\\), \\(g = 10\\) м/с². Ускорение тела:',
+    options: [
+      { text: '3 м/с²', correct: true  },
+      { text: '5 м/с²', correct: false },
+      { text: '2 м/с²', correct: false },
+      { text: '1 м/с²', correct: false },
+    ],
+    explanation: '\\(F_\\text{тр} = \\mu mg = 0{,}2\\cdot3\\cdot10 = 6\\,\\text{Н}\\);  \\(F_\\text{рез} = 15-6 = 9\\,\\text{Н}\\);  \\(a = 9/3 = 3\\,\\text{м/с}^2\\).',
+  },
+  {
+    topic: 'Динамика', difficulty: 2, type: 'single',
+    text: 'Тело движется по наклонной плоскости под углом \\(\\alpha = 30°\\) без трения (\\(g = 10\\) м/с²). Ускорение вдоль наклонной плоскости:',
+    options: [
+      { text: '5 м/с²',    correct: true  },
+      { text: '10 м/с²',   correct: false },
+      { text: '8,66 м/с²', correct: false },
+      { text: '2,5 м/с²',  correct: false },
+    ],
+    explanation: '\\(a = g\\sin\\alpha = 10\\cdot\\sin30° = 10\\cdot0{,}5 = 5\\,\\text{м/с}^2\\).',
+  },
+  {
+    topic: 'Динамика', difficulty: 2, type: 'single',
+    text: 'Тело массой 0,5 кг движется по окружности радиусом 2 м со скоростью 4 м/с. Центростремительная сила:',
+    options: [
+      { text: '4 Н', correct: true  },
+      { text: '1 Н', correct: false },
+      { text: '8 Н', correct: false },
+      { text: '2 Н', correct: false },
+    ],
+    explanation: '\\(F = \\dfrac{mv^2}{R} = \\dfrac{0{,}5\\cdot16}{2} = 4\\,\\text{Н}\\).',
+  },
+  {
+    topic: 'Динамика', difficulty: 2, type: 'single',
+    text: 'Автомобиль массой 1000 кг проезжает поворот радиусом 20 м. Максимальная скорость без бокового скольжения (\\(\\mu = 0{,}5\\), \\(g = 10\\) м/с²):',
+    options: [
+      { text: '10 м/с', correct: true  },
+      { text: '5 м/с',  correct: false },
+      { text: '20 м/с', correct: false },
+      { text: '14 м/с', correct: false },
+    ],
+    explanation: '\\(\\dfrac{mv^2}{R} = \\mu mg\\)  ⟹  \\(v = \\sqrt{\\mu gR} = \\sqrt{0{,}5\\cdot10\\cdot20} = \\sqrt{100} = 10\\,\\text{м/с}\\).',
+  },
+  {
+    topic: 'Динамика', difficulty: 3, type: 'single',
+    text: 'Тело массой 4 кг лежит на горизонтальной поверхности (\\(\\mu = 0{,}3\\), \\(g = 10\\) м/с²). Приложена горизонтальная сила \\(F = 24\\) Н. Путь за первые 3 с (начиная из покоя):',
+    options: [
+      { text: '13,5 м', correct: true  },
+      { text: '18 м',   correct: false },
+      { text: '9 м',    correct: false },
+      { text: '27 м',   correct: false },
+    ],
+    explanation: '\\(F_\\text{тр} = 0{,}3\\cdot4\\cdot10 = 12\\,\\text{Н}\\);  \\(a = (24-12)/4 = 3\\,\\text{м/с}^2\\);  \\(s = \\frac12 at^2 = \\frac12\\cdot3\\cdot9 = 13{,}5\\,\\text{м}\\).',
+  },
+  {
+    topic: 'Динамика', difficulty: 3, type: 'single',
+    text: 'Тело на наклонной плоскости с углом \\(\\alpha = 45°\\). При каком коэффициенте трения тело будет оставаться неподвижным?',
+    options: [
+      { text: '\\(\\mu \\geq \\tan 45° = 1\\)', correct: true  },
+      { text: '\\(\\mu \\geq 0{,}5\\)',         correct: false },
+      { text: '\\(\\mu \\geq \\cos 45°\\)',      correct: false },
+      { text: 'при любом \\(\\mu > 0\\)',        correct: false },
+    ],
+    explanation: 'Тело удерживается, если \\(F_\\text{тр} \\geq mg\\sin\\alpha\\), т.е. \\(\\mu mg\\cos\\alpha \\geq mg\\sin\\alpha\\)  ⟹  \\(\\mu \\geq \\tan\\alpha = \\tan45° = 1\\).',
+  },
+  {
+    topic: 'Динамика', difficulty: 2, type: 'single',
+    text: 'Ракета выбросила газы за 1 с общей массой 20 кг со скоростью 500 м/с. Тяга двигателя (реактивная сила):',
+    options: [
+      { text: '10 000 Н', correct: true  },
+      { text: '500 Н',    correct: false },
+      { text: '25 Н',     correct: false },
+      { text: '20 Н',     correct: false },
+    ],
+    explanation: 'По третьему закону Ньютона: \\(F = \\dfrac{\\Delta m}{\\Delta t}\\cdot v = 20\\cdot500 = 10\\,000\\,\\text{Н}\\).',
+  },
+
+  /* ══════════════════════════════════════════════════════════════════════
+     ЗАКОНЫ СОХРАНЕНИЯ
+  ══════════════════════════════════════════════════════════════════════ */
+  {
+    topic: 'Законы сохранения', difficulty: 1, type: 'single',
+    text: 'Тело массой 4 кг движется со скоростью 5 м/с. Импульс тела:',
+    options: [
+      { text: '20 кг·м/с',   correct: true  },
+      { text: '0,8 кг·м/с',  correct: false },
+      { text: '80 кг·м/с',   correct: false },
+      { text: '1,25 кг·м/с', correct: false },
+    ],
+    explanation: '\\(p = mv = 4\\cdot5 = 20\\,\\text{кг}\\cdot\\text{м/с}\\).',
+  },
+  {
+    topic: 'Законы сохранения', difficulty: 1, type: 'single',
+    text: 'Тело массой 2 кг поднято на высоту 10 м (\\(g = 10\\) м/с²). Потенциальная энергия тела:',
+    options: [
+      { text: '200 Дж',  correct: true  },
+      { text: '20 Дж',   correct: false },
+      { text: '2000 Дж', correct: false },
+      { text: '100 Дж',  correct: false },
+    ],
+    explanation: '\\(E_\\text{п} = mgh = 2\\cdot10\\cdot10 = 200\\,\\text{Дж}\\).',
+  },
+  {
+    topic: 'Законы сохранения', difficulty: 1, type: 'single',
+    text: 'Тело массой 2 кг движется со скоростью 10 м/с. Кинетическая энергия тела:',
+    options: [
+      { text: '100 Дж', correct: true  },
+      { text: '20 Дж',  correct: false },
+      { text: '200 Дж', correct: false },
+      { text: '10 Дж',  correct: false },
+    ],
+    explanation: '\\(E_\\text{к} = \\dfrac{mv^2}{2} = \\dfrac{2\\cdot100}{2} = 100\\,\\text{Дж}\\).',
+  },
+  {
+    topic: 'Законы сохранения', difficulty: 1, type: 'single',
+    text: 'Сила 40 Н перемещает тело на 5 м вдоль линии действия силы. Совершённая работа:',
+    options: [
+      { text: '200 Дж', correct: true  },
+      { text: '8 Дж',   correct: false },
+      { text: '45 Дж',  correct: false },
+      { text: '20 Дж',  correct: false },
+    ],
+    explanation: '\\(A = Fs = 40\\cdot5 = 200\\,\\text{Дж}\\).',
+  },
+  {
+    topic: 'Законы сохранения', difficulty: 2, type: 'single',
+    text: 'Тело скользит с горки высотой 5 м без трения (\\(g = 10\\) м/с²). Скорость у основания:',
+    options: [
+      { text: '10 м/с', correct: true  },
+      { text: '5 м/с',  correct: false },
+      { text: '50 м/с', correct: false },
+      { text: '1 м/с',  correct: false },
+    ],
+    explanation: '\\(mgh = \\dfrac{mv^2}{2}\\)  ⟹  \\(v = \\sqrt{2gh} = \\sqrt{100} = 10\\,\\text{м/с}\\).',
+  },
+  {
+    topic: 'Законы сохранения', difficulty: 2, type: 'single',
+    text: 'Машина совершила работу 600 Дж за 1 мин. Мощность машины:',
+    options: [
+      { text: '10 Вт',    correct: true  },
+      { text: '36 кВт',   correct: false },
+      { text: '0,167 Вт', correct: false },
+      { text: '100 Вт',   correct: false },
+    ],
+    explanation: '\\(P = \\dfrac{A}{t} = \\dfrac{600}{60} = 10\\,\\text{Вт}\\).',
+  },
+  {
+    topic: 'Законы сохранения', difficulty: 2, type: 'single',
+    text: 'Пуля массой 10 г летит со скоростью 500 м/с и застревает в неподвижном блоке массой 990 г. Скорость системы после удара:',
+    options: [
+      { text: '5 м/с',   correct: true  },
+      { text: '0,5 м/с', correct: false },
+      { text: '50 м/с',  correct: false },
+      { text: '50 км/ч', correct: false },
+    ],
+    explanation: '\\(p = 0{,}010\\cdot500 = 5\\,\\text{кг}\\cdot\\text{м/с}\\);  \\(M = 0{,}010+0{,}990 = 1\\,\\text{кг}\\);  \\(v_2 = p/M = 5\\,\\text{м/с}\\).',
+  },
+  {
+    topic: 'Законы сохранения', difficulty: 3, type: 'single',
+    text: 'Снаряд массой 6 кг, летевший горизонтально со скоростью 200 м/с, разрывается на два осколка. Первый осколок (2 кг) полетел со скоростью 100 м/с в том же направлении. Скорость второго осколка (4 кг):',
+    options: [
+      { text: '250 м/с', correct: true  },
+      { text: '350 м/с', correct: false },
+      { text: '300 м/с', correct: false },
+      { text: '200 м/с', correct: false },
+    ],
+    explanation: '\\(p = 6\\cdot200 = 1200\\,\\text{кг}\\cdot\\text{м/с}\\);  \\(p_1 = 2\\cdot100 = 200\\);  \\(p_2 = 1000\\);  \\(v_2 = 1000/4 = 250\\,\\text{м/с}\\).',
+  },
+
+  /* ══════════════════════════════════════════════════════════════════════
+     МОЛЕКУЛЯРНАЯ ФИЗИКА
+  ══════════════════════════════════════════════════════════════════════ */
+  {
+    topic: 'Молекулярная физика', difficulty: 1, type: 'single',
+    text: 'Абсолютная температура соответствует \\(t = 27°C\\):',
+    options: [
+      { text: '300 К', correct: true  },
+      { text: '246 К', correct: false },
+      { text: '27 К',  correct: false },
+      { text: '373 К', correct: false },
+    ],
+    explanation: '\\(T = t + 273 = 27 + 273 = 300\\,\\text{К}\\).',
+  },
+  {
+    topic: 'Молекулярная физика', difficulty: 1, type: 'single',
+    text: 'При изотермическом сжатии идеального газа объём уменьшился в 2 раза. Давление газа:',
+    options: [
+      { text: 'увеличилось в 2 раза', correct: true  },
+      { text: 'уменьшилось в 2 раза', correct: false },
+      { text: 'не изменилось',        correct: false },
+      { text: 'увеличилось в 4 раза', correct: false },
+    ],
+    explanation: '\\(pV = \\text{const}\\) при изотермическом процессе. Объём вдвое меньше ⟹ давление вдвое больше.',
+  },
+  {
+    topic: 'Молекулярная физика', difficulty: 1, type: 'single',
+    text: 'Молярная масса молекулярного кислорода \\(O_2\\):',
+    options: [
+      { text: '32 г/моль', correct: true  },
+      { text: '16 г/моль', correct: false },
+      { text: '8 г/моль',  correct: false },
+      { text: '64 г/моль', correct: false },
+    ],
+    explanation: 'Атомная масса кислорода \\(A_r(O) = 16\\). Молекула двухатомная: \\(M = 2\\cdot16 = 32\\,\\text{г/моль}\\).',
+  },
+  {
+    topic: 'Молекулярная физика', difficulty: 2, type: 'single',
+    text: 'Идеальный газ нагревают при постоянном давлении с \\(T_1 = 200\\) К до \\(T_2 = 600\\) К. Объём изменится:',
+    options: [
+      { text: 'увеличится в 3 раза', correct: true  },
+      { text: 'уменьшится в 3 раза', correct: false },
+      { text: 'увеличится в 9 раз',  correct: false },
+      { text: 'не изменится',        correct: false },
+    ],
+    explanation: 'Закон Гей-Люссака: \\(V \\propto T\\) при \\(p = \\text{const}\\).  \\(\\dfrac{V_2}{V_1} = \\dfrac{T_2}{T_1} = \\dfrac{600}{200} = 3\\).',
+  },
+  {
+    topic: 'Молекулярная физика', difficulty: 2, type: 'single',
+    text: 'Газ при 27°C имеет объём 4 л. При нагреве до 57°C при постоянном давлении объём стал:',
+    options: [
+      { text: '4,4 л', correct: true  },
+      { text: '8 л',   correct: false },
+      { text: '3,6 л', correct: false },
+      { text: '4 л',   correct: false },
+    ],
+    explanation: '\\(T_1 = 300\\,\\text{К},\\; T_2 = 330\\,\\text{К}\\).  \\(V_2 = V_1\\cdot\\dfrac{T_2}{T_1} = 4\\cdot\\dfrac{330}{300} = 4{,}4\\,\\text{л}\\).',
+  },
+  {
+    topic: 'Молекулярная физика', difficulty: 2, type: 'single',
+    text: 'Масса одной молекулы воды \\(H_2O\\) (\\(M = 18\\) г/моль, \\(N_A = 6{,}02\\cdot10^{23}\\)):',
+    options: [
+      { text: '\\(3\\cdot10^{-26}\\) кг',   correct: true  },
+      { text: '\\(18\\cdot10^{-23}\\) кг', correct: false },
+      { text: '\\(3\\cdot10^{-23}\\) кг',  correct: false },
+      { text: '\\(6\\cdot10^{-26}\\) кг',  correct: false },
+    ],
+    explanation: '\\(m = \\dfrac{M}{N_A} = \\dfrac{18\\cdot10^{-3}}{6{,}02\\cdot10^{23}} \\approx 3\\cdot10^{-26}\\,\\text{кг}\\).',
+  },
+  {
+    topic: 'Молекулярная физика', difficulty: 3, type: 'single',
+    text: 'Давление газа в цилиндре \\(1{,}5\\cdot10^5\\) Па, объём 3 л. После изотермического сжатия до 2 л давление стало:',
+    options: [
+      { text: '\\(2{,}25\\cdot10^5\\) Па', correct: true  },
+      { text: '\\(10^5\\) Па',              correct: false },
+      { text: '\\(3\\cdot10^5\\) Па',        correct: false },
+      { text: '\\(2\\cdot10^5\\) Па',        correct: false },
+    ],
+    explanation: '\\(p_1 V_1 = p_2 V_2\\)  ⟹  \\(p_2 = \\dfrac{p_1 V_1}{V_2} = \\dfrac{1{,}5\\cdot10^5\\cdot3}{2} = 2{,}25\\cdot10^5\\,\\text{Па}\\).',
+  },
+  {
+    topic: 'Молекулярная физика', difficulty: 2, type: 'single',
+    text: 'Газ нагревают при постоянном объёме с 27°C до 127°C. Давление изменится:',
+    options: [
+      { text: 'увеличится в \\(\\tfrac43\\) раза', correct: true  },
+      { text: 'увеличится вдвое',                  correct: false },
+      { text: 'уменьшится',                         correct: false },
+      { text: 'не изменится',                       correct: false },
+    ],
+    explanation: 'Закон Шарля: \\(p \\propto T\\) при \\(V = \\text{const}\\).  \\(T_1=300\\,\\text{К},\\; T_2=400\\,\\text{К}\\);  \\(\\dfrac{p_2}{p_1}=\\dfrac{400}{300}=\\dfrac{4}{3}\\).',
+  },
+
+  /* ══════════════════════════════════════════════════════════════════════
+     ТЕРМОДИНАМИКА
+  ══════════════════════════════════════════════════════════════════════ */
+  {
+    topic: 'Термодинамика', difficulty: 1, type: 'single',
+    text: 'Тепловая машина получила от нагревателя 5000 Дж и совершила работу 1500 Дж. КПД машины:',
+    options: [
+      { text: '30%', correct: true  },
+      { text: '70%', correct: false },
+      { text: '15%', correct: false },
+      { text: '3%',  correct: false },
+    ],
+    explanation: '\\(\\eta = \\dfrac{A}{Q_1} = \\dfrac{1500}{5000} = 0{,}30 = 30\\%\\).',
+  },
+  {
+    topic: 'Термодинамика', difficulty: 1, type: 'single',
+    text: 'Теплота при нагреве воды массой 500 г на 20°C (\\(c = 4200\\) Дж/(кг·К)):',
+    options: [
+      { text: '42 кДж',   correct: true  },
+      { text: '4200 Дж',  correct: false },
+      { text: '840 Дж',   correct: false },
+      { text: '420 кДж',  correct: false },
+    ],
+    explanation: '\\(Q = mc\\Delta T = 0{,}5\\cdot4200\\cdot20 = 42\\,000\\,\\text{Дж} = 42\\,\\text{кДж}\\).',
+  },
+  {
+    topic: 'Термодинамика', difficulty: 2, type: 'single',
+    text: 'Газу сообщено 800 Дж теплоты, он совершил работу 500 Дж. Изменение внутренней энергии:',
+    options: [
+      { text: '300 Дж',   correct: true  },
+      { text: '1300 Дж',  correct: false },
+      { text: '−300 Дж',  correct: false },
+      { text: '800 Дж',   correct: false },
+    ],
+    explanation: 'Первое начало термодинамики: \\(\\Delta U = Q - A = 800 - 500 = 300\\,\\text{Дж}\\).',
+  },
+  {
+    topic: 'Термодинамика', difficulty: 2, type: 'single',
+    text: 'КПД идеальной тепловой машины при \\(T_1 = 800\\) К и \\(T_2 = 200\\) К:',
+    options: [
+      { text: '75%', correct: true  },
+      { text: '25%', correct: false },
+      { text: '50%', correct: false },
+      { text: '80%', correct: false },
+    ],
+    explanation: '\\(\\eta_\\text{Карно} = 1 - \\dfrac{T_2}{T_1} = 1 - \\dfrac{200}{800} = 0{,}75 = 75\\%\\).',
+  },
+  {
+    topic: 'Термодинамика', difficulty: 2, type: 'single',
+    text: 'При изобарном нагреве газа температура выросла с 300 К до 400 К, объём был 6 л. Новый объём:',
+    options: [
+      { text: '8 л',   correct: true  },
+      { text: '4,5 л', correct: false },
+      { text: '4 л',   correct: false },
+      { text: '6 л',   correct: false },
+    ],
+    explanation: '\\(V_2 = V_1\\cdot\\dfrac{T_2}{T_1} = 6\\cdot\\dfrac{400}{300} = 8\\,\\text{л}\\).',
+  },
+  {
+    topic: 'Термодинамика', difficulty: 3, type: 'single',
+    text: 'Двигатель внутреннего сгорания сжигает 5 кг бензина (теплота сгорания \\(q = 46\\) МДж/кг) и совершает полезную работу 46 МДж. КПД двигателя:',
+    options: [
+      { text: '20%', correct: true  },
+      { text: '10%', correct: false },
+      { text: '46%', correct: false },
+      { text: '50%', correct: false },
+    ],
+    explanation: '\\(Q = mq = 5\\cdot46 = 230\\,\\text{МДж}\\);  \\(\\eta = \\dfrac{A}{Q} = \\dfrac{46}{230} = 0{,}2 = 20\\%\\).',
+  },
+
+  /* ══════════════════════════════════════════════════════════════════════
+     ЭЛЕКТРОСТАТИКА
+  ══════════════════════════════════════════════════════════════════════ */
+  {
+    topic: 'Электростатика', difficulty: 1, type: 'single',
+    text: 'Два точечных заряда \\(q_1 = q_2 = 2\\) мкКл расположены на расстоянии 0,3 м друг от друга (\\(k = 9\\cdot10^9\\) Н·м²/Кл²). Сила их взаимодействия:',
+    options: [
+      { text: '0,4 Н',  correct: true  },
+      { text: '4 Н',    correct: false },
+      { text: '0,04 Н', correct: false },
+      { text: '40 Н',   correct: false },
+    ],
+    explanation: '\\(F = k\\dfrac{q_1 q_2}{r^2} = 9\\cdot10^9\\cdot\\dfrac{4\\cdot10^{-12}}{0{,}09} = 0{,}4\\,\\text{Н}\\).',
+  },
+  {
+    topic: 'Электростатика', difficulty: 1, type: 'single',
+    text: 'Напряжённость поля точечного заряда \\(10\\) нКл на расстоянии 1 м (\\(k = 9\\cdot10^9\\)):',
+    options: [
+      { text: '90 В/м',  correct: true  },
+      { text: '9 В/м',   correct: false },
+      { text: '900 В/м', correct: false },
+      { text: '9 кВ/м',  correct: false },
+    ],
+    explanation: '\\(E = k\\dfrac{q}{r^2} = 9\\cdot10^9\\cdot\\dfrac{10\\cdot10^{-9}}{1} = 90\\,\\text{В/м}\\).',
+  },
+  {
+    topic: 'Электростатика', difficulty: 1, type: 'single',
+    text: 'Расстояние между пластинами конденсатора 5 мм, напряжение 100 В. Напряжённость поля между пластинами:',
+    options: [
+      { text: '20 кВ/м', correct: true  },
+      { text: '0,5 кВ/м', correct: false },
+      { text: '2 кВ/м',   correct: false },
+      { text: '200 кВ/м', correct: false },
+    ],
+    explanation: '\\(E = \\dfrac{U}{d} = \\dfrac{100}{5\\cdot10^{-3}} = 20\\,000\\,\\text{В/м} = 20\\,\\text{кВ/м}\\).',
+  },
+  {
+    topic: 'Электростатика', difficulty: 1, type: 'single',
+    text: 'Конденсатор ёмкостью 10 мкФ заряжен до 50 В. Заряд конденсатора:',
+    options: [
+      { text: '\\(5\\cdot10^{-4}\\) Кл', correct: true  },
+      { text: '5 Кл',                    correct: false },
+      { text: '\\(5\\cdot10^{-7}\\) Кл', correct: false },
+      { text: '200 мКл',                 correct: false },
+    ],
+    explanation: '\\(Q = CU = 10\\cdot10^{-6}\\cdot50 = 5\\cdot10^{-4}\\,\\text{Кл}\\).',
+  },
+  {
+    topic: 'Электростатика', difficulty: 2, type: 'single',
+    text: 'Работа по перемещению заряда \\(q = 3\\) Кл из точки с потенциалом 100 В в точку с потенциалом 40 В:',
+    options: [
+      { text: '180 Дж', correct: true  },
+      { text: '60 Дж',  correct: false },
+      { text: '300 Дж', correct: false },
+      { text: '420 Дж', correct: false },
+    ],
+    explanation: '\\(A = q(\\varphi_1 - \\varphi_2) = 3\\cdot(100-40) = 180\\,\\text{Дж}\\).',
+  },
+  {
+    topic: 'Электростатика', difficulty: 2, type: 'single',
+    text: 'Два конденсатора \\(C_1 = 4\\) мкФ и \\(C_2 = 12\\) мкФ включены последовательно. Эквивалентная ёмкость:',
+    options: [
+      { text: '3 мкФ',  correct: true  },
+      { text: '16 мкФ', correct: false },
+      { text: '48 мкФ', correct: false },
+      { text: '8 мкФ',  correct: false },
+    ],
+    explanation: '\\(\\dfrac{1}{C} = \\dfrac{1}{4} + \\dfrac{1}{12} = \\dfrac{4}{12}\\)  ⟹  \\(C = 3\\,\\text{мкФ}\\).',
+  },
+  {
+    topic: 'Электростатика', difficulty: 2, type: 'single',
+    text: 'Два конденсатора \\(C_1 = 4\\) мкФ и \\(C_2 = 6\\) мкФ включены параллельно. Эквивалентная ёмкость:',
+    options: [
+      { text: '10 мкФ',  correct: true  },
+      { text: '2,4 мкФ', correct: false },
+      { text: '24 мкФ',  correct: false },
+      { text: '5 мкФ',   correct: false },
+    ],
+    explanation: '\\(C = C_1 + C_2 = 4 + 6 = 10\\,\\text{мкФ}\\).',
+  },
+  {
+    topic: 'Электростатика', difficulty: 2, type: 'single',
+    text: 'Энергия, запасённая в конденсаторе \\(C = 5\\) мкФ при напряжении \\(U = 200\\) В:',
+    options: [
+      { text: '0,1 Дж',  correct: true  },
+      { text: '0,05 Дж', correct: false },
+      { text: '1 Дж',    correct: false },
+      { text: '0,2 Дж',  correct: false },
+    ],
+    explanation: '\\(W = \\dfrac{CU^2}{2} = \\dfrac{5\\cdot10^{-6}\\cdot40000}{2} = 0{,}1\\,\\text{Дж}\\).',
+  },
+  {
+    topic: 'Электростатика', difficulty: 3, type: 'single',
+    text: 'Заряженный конденсатор отключили от батареи, затем раздвинули пластины вдвое. Энергия конденсатора:',
+    options: [
+      { text: 'увеличилась в 2 раза', correct: true  },
+      { text: 'уменьшилась в 2 раза', correct: false },
+      { text: 'не изменилась',        correct: false },
+      { text: 'увеличилась в 4 раза', correct: false },
+    ],
+    explanation: 'Заряд \\(Q = \\text{const}\\). При \\(d \\to 2d\\): \\(C \\to C/2\\).  \\(W = Q^2/(2C)\\)  ⟹  \\(W \\to 2W\\).',
+  },
+  {
+    topic: 'Электростатика', difficulty: 3, type: 'single',
+    text: 'При уменьшении расстояния между зарядами в 4 раза сила их взаимодействия:',
+    options: [
+      { text: 'увеличится в 16 раз', correct: true  },
+      { text: 'увеличится в 4 раза', correct: false },
+      { text: 'уменьшится в 4 раза', correct: false },
+      { text: 'уменьшится в 16 раз', correct: false },
+    ],
+    explanation: '\\(F \\propto 1/r^2\\). При \\(r \\to r/4\\): \\(F \\to 16F\\).',
+  },
+
+  /* ══════════════════════════════════════════════════════════════════════
+     ПОСТОЯННЫЙ ТОК
+  ══════════════════════════════════════════════════════════════════════ */
+  {
+    topic: 'Постоянный ток', difficulty: 1, type: 'single',
+    text: 'Сопротивление резистора 8 Ом, напряжение на нём 24 В. Сила тока через резистор:',
+    options: [
+      { text: '3 А',    correct: true  },
+      { text: '192 А',  correct: false },
+      { text: '0,33 А', correct: false },
+      { text: '8 А',    correct: false },
+    ],
+    explanation: '\\(I = \\dfrac{U}{R} = \\dfrac{24}{8} = 3\\,\\text{А}\\).',
+  },
+  {
+    topic: 'Постоянный ток', difficulty: 1, type: 'single',
+    text: 'Три одинаковых резистора по \\(R = 6\\) Ом включены последовательно. Общее сопротивление:',
+    options: [
+      { text: '18 Ом', correct: true  },
+      { text: '2 Ом',  correct: false },
+      { text: '6 Ом',  correct: false },
+      { text: '9 Ом',  correct: false },
+    ],
+    explanation: '\\(R_\\Sigma = 3R = 3\\cdot6 = 18\\,\\text{Ом}\\).',
+  },
+  {
+    topic: 'Постоянный ток', difficulty: 1, type: 'single',
+    text: 'Три одинаковых резистора по \\(R = 9\\) Ом включены параллельно. Общее сопротивление:',
+    options: [
+      { text: '3 Ом',  correct: true  },
+      { text: '27 Ом', correct: false },
+      { text: '9 Ом',  correct: false },
+      { text: '1 Ом',  correct: false },
+    ],
+    explanation: 'Для \\(n\\) одинаковых резисторов параллельно: \\(R_\\Sigma = R/n = 9/3 = 3\\,\\text{Ом}\\).',
+  },
+  {
+    topic: 'Постоянный ток', difficulty: 1, type: 'single',
+    text: 'Источник с ЭДС = 12 В, внутреннее сопротивление \\(r = 2\\) Ом, внешнее \\(R = 4\\) Ом. Ток в цепи:',
+    options: [
+      { text: '2 А', correct: true  },
+      { text: '3 А', correct: false },
+      { text: '6 А', correct: false },
+      { text: '1 А', correct: false },
+    ],
+    explanation: '\\(I = \\dfrac{\\varepsilon}{R+r} = \\dfrac{12}{4+2} = 2\\,\\text{А}\\).',
+  },
+  {
+    topic: 'Постоянный ток', difficulty: 2, type: 'single',
+    text: 'Электрическая плитка мощностью 2 кВт работала 30 мин. Потреблённая энергия:',
+    options: [
+      { text: '1 кВт·ч',    correct: true  },
+      { text: '60 кВт·ч',   correct: false },
+      { text: '0,5 кВт·ч',  correct: false },
+      { text: '3,6 кДж',    correct: false },
+    ],
+    explanation: '\\(W = Pt = 2\\,\\text{кВт}\\cdot0{,}5\\,\\text{ч} = 1\\,\\text{кВт·ч}\\).',
+  },
+  {
+    topic: 'Постоянный ток', difficulty: 2, type: 'single',
+    text: 'Ток 4 А течёт через резистор 5 Ом в течение 5 минут. Выделенная теплота:',
+    options: [
+      { text: '24 кДж',  correct: true  },
+      { text: '2,4 кДж', correct: false },
+      { text: '240 кДж', correct: false },
+      { text: '6 кДж',   correct: false },
+    ],
+    explanation: '\\(Q = I^2 R t = 16\\cdot5\\cdot300 = 24\\,000\\,\\text{Дж} = 24\\,\\text{кДж}\\).',
+  },
+  {
+    topic: 'Постоянный ток', difficulty: 2, type: 'single',
+    text: 'Лампочка мощностью 100 Вт рассчитана на 220 В. Её сопротивление нити накала:',
+    options: [
+      { text: '484 Ом',   correct: true  },
+      { text: '22000 Ом', correct: false },
+      { text: '0,45 Ом',  correct: false },
+      { text: '22 Ом',    correct: false },
+    ],
+    explanation: '\\(R = \\dfrac{U^2}{P} = \\dfrac{220^2}{100} = \\dfrac{48400}{100} = 484\\,\\text{Ом}\\).',
+  },
+  {
+    topic: 'Постоянный ток', difficulty: 2, type: 'single',
+    text: 'Напряжение на зажимах источника 10 В при токе 2 А, ЭДС = 12 В. Внутреннее сопротивление источника:',
+    options: [
+      { text: '1 Ом',  correct: true  },
+      { text: '6 Ом',  correct: false },
+      { text: '5 Ом',  correct: false },
+      { text: '11 Ом', correct: false },
+    ],
+    explanation: '\\(r = \\dfrac{\\varepsilon - U}{I} = \\dfrac{12-10}{2} = 1\\,\\text{Ом}\\).',
+  },
+  {
+    topic: 'Постоянный ток', difficulty: 2, type: 'single',
+    text: 'КПД источника тока при \\(\\varepsilon = 15\\) В, \\(r = 1\\) Ом, \\(R = 4\\) Ом:',
+    options: [
+      { text: '80%', correct: true  },
+      { text: '20%', correct: false },
+      { text: '75%', correct: false },
+      { text: '60%', correct: false },
+    ],
+    explanation: '\\(\\eta = \\dfrac{R}{R+r} = \\dfrac{4}{5} = 80\\%\\).',
+  },
+  {
+    topic: 'Постоянный ток', difficulty: 3, type: 'single',
+    text: 'Два резистора \\(R_1 = 6\\) Ом и \\(R_2 = 3\\) Ом включены параллельно к источнику 12 В. Ток через \\(R_1\\):',
+    options: [
+      { text: '2 А', correct: true  },
+      { text: '4 А', correct: false },
+      { text: '6 А', correct: false },
+      { text: '1 А', correct: false },
+    ],
+    explanation: 'Напряжение на каждом резисторе 12 В (параллельное соединение).  \\(I_1 = U/R_1 = 12/6 = 2\\,\\text{А}\\).',
+  },
+
+  /* ══════════════════════════════════════════════════════════════════════
+     МАГНЕТИЗМ
+  ══════════════════════════════════════════════════════════════════════ */
+  {
+    topic: 'Магнетизм', difficulty: 1, type: 'single',
+    text: 'Сила Ампера, действующая на прямолинейный проводник длиной 0,5 м с током 4 А в поле \\(B = 0{,}3\\) Тл (проводник перпендикулярен полю):',
+    options: [
+      { text: '0,6 Н', correct: true  },
+      { text: '6 Н',   correct: false },
+      { text: '0,06 Н', correct: false },
+      { text: '6,7 Н', correct: false },
+    ],
+    explanation: '\\(F = BIl\\sin90° = 0{,}3\\cdot4\\cdot0{,}5 = 0{,}6\\,\\text{Н}\\).',
+  },
+  {
+    topic: 'Магнетизм', difficulty: 2, type: 'single',
+    text: 'Сила Лоренца на электрон (\\(q = 1{,}6\\cdot10^{-19}\\) Кл), движущийся в поле \\(B = 0{,}2\\) Тл со скоростью \\(5\\cdot10^6\\) м/с (перпендикулярно полю):',
+    options: [
+      { text: '\\(1{,}6\\cdot10^{-13}\\) Н', correct: true  },
+      { text: '\\(1{,}6\\cdot10^{-12}\\) Н', correct: false },
+      { text: '\\(1{,}6\\cdot10^{-14}\\) Н', correct: false },
+      { text: '\\(5\\cdot10^{-26}\\) Н',      correct: false },
+    ],
+    explanation: '\\(F = qvB = 1{,}6\\cdot10^{-19}\\cdot5\\cdot10^6\\cdot0{,}2 = 1{,}6\\cdot10^{-13}\\,\\text{Н}\\).',
+  },
+  {
+    topic: 'Магнетизм', difficulty: 2, type: 'single',
+    text: 'Если ток в проводнике увеличить в 2 раза и индукцию поля увеличить в 2 раза, сила Ампера:',
+    options: [
+      { text: 'увеличится в 4 раза', correct: true  },
+      { text: 'увеличится в 2 раза', correct: false },
+      { text: 'не изменится',        correct: false },
+      { text: 'уменьшится в 4 раза', correct: false },
+    ],
+    explanation: '\\(F = BIl\\)  ⟹  \\(F \\propto BI\\). При \\(B \\to 2B,\\; I \\to 2I\\): \\(F \\to 4F\\).',
+  },
+  {
+    topic: 'Магнетизм', difficulty: 2, type: 'single',
+    text: 'Магнитный поток через контур площадью 0,2 м² в однородном поле \\(B = 0{,}5\\) Тл при \\(\\theta = 0°\\) (нормаль вдоль поля):',
+    options: [
+      { text: '0,1 Вб',  correct: true  },
+      { text: '0,04 Вб', correct: false },
+      { text: '0,5 Вб',  correct: false },
+      { text: '0,25 Вб', correct: false },
+    ],
+    explanation: '\\(\\Phi = BS\\cos\\theta = 0{,}5\\cdot0{,}2\\cdot\\cos0° = 0{,}1\\,\\text{Вб}\\).',
+  },
+  {
+    topic: 'Магнетизм', difficulty: 2, type: 'single',
+    text: 'Правило «буравчика» (правой руки) применяется для нахождения:',
+    options: [
+      { text: 'направления вектора магнитной индукции прямолинейного тока',     correct: true  },
+      { text: 'направления силы Ампера',                                         correct: false },
+      { text: 'направления индукционного тока',                                  correct: false },
+      { text: 'направления силы Лоренца на положительный заряд',                correct: false },
+    ],
+    explanation: 'Правило буравчика: если вращать рукоятку буравчика в направлении тока в соленоиде, поступательное движение укажет направление \\(\\vec{B}\\). Для прямого тока: пальцы правой руки по \\(\\vec{B}\\), большой — ток.',
+  },
+  {
+    topic: 'Магнетизм', difficulty: 3, type: 'single',
+    text: 'Протон (\\(m = 1{,}67\\cdot10^{-27}\\) кг, \\(q = 1{,}6\\cdot10^{-19}\\) Кл) движется в поле \\(B = 0{,}1\\) Тл со скоростью \\(2\\cdot10^7\\) м/с. Радиус круговой траектории:',
+    options: [
+      { text: '≈ 2,1 м',  correct: true  },
+      { text: '≈ 0,21 м', correct: false },
+      { text: '≈ 21 м',   correct: false },
+      { text: '≈ 0,021 м', correct: false },
+    ],
+    explanation: '\\(r = \\dfrac{mv}{qB} = \\dfrac{1{,}67\\cdot10^{-27}\\cdot2\\cdot10^7}{1{,}6\\cdot10^{-19}\\cdot0{,}1} \\approx 2{,}09\\,\\text{м}\\).',
+  },
+  {
+    topic: 'Магнетизм', difficulty: 3, type: 'single',
+    text: 'При одновременном увеличении тока в проводнике в 3 раза и расстояния до него в 3 раза, индукция магнитного поля прямого тока:',
+    options: [
+      { text: 'не изменится',        correct: true  },
+      { text: 'увеличится в 3 раза', correct: false },
+      { text: 'уменьшится в 3 раза', correct: false },
+      { text: 'увеличится в 9 раз',  correct: false },
+    ],
+    explanation: '\\(B \\propto I/r\\). При \\(I \\to 3I,\\; r \\to 3r\\): \\(B \\to (3I)/(3r) = I/r = B\\).',
+  },
+
+  /* ══════════════════════════════════════════════════════════════════════
+     ЭЛЕКТРОМАГНИТНАЯ ИНДУКЦИЯ
+  ══════════════════════════════════════════════════════════════════════ */
+  {
+    topic: 'Электромагнитная индукция', difficulty: 1, type: 'single',
+    text: 'Магнитный поток через контур изменился с 0,6 Вб до 0,1 Вб за 0,1 с. ЭДС индукции:',
+    options: [
+      { text: '5 В',   correct: true  },
+      { text: '0,5 В', correct: false },
+      { text: '50 В',  correct: false },
+      { text: '7 В',   correct: false },
+    ],
+    explanation: '\\(\\varepsilon = \\left|\\dfrac{\\Delta\\Phi}{\\Delta t}\\right| = \\dfrac{0{,}5}{0{,}1} = 5\\,\\text{В}\\).',
+  },
+  {
+    topic: 'Электромагнитная индукция', difficulty: 1, type: 'single',
+    text: 'Трансформатор: первичная обмотка 1000 витков, вторичная 50 витков, \\(U_1 = 220\\) В. Напряжение на вторичной обмотке:',
+    options: [
+      { text: '11 В',   correct: true  },
+      { text: '4400 В', correct: false },
+      { text: '110 В',  correct: false },
+      { text: '55 В',   correct: false },
+    ],
+    explanation: '\\(\\dfrac{U_2}{U_1} = \\dfrac{n_2}{n_1}\\)  ⟹  \\(U_2 = 220\\cdot\\dfrac{50}{1000} = 11\\,\\text{В}\\).',
+  },
+  {
+    topic: 'Электромагнитная индукция', difficulty: 2, type: 'single',
+    text: 'ЭДС самоиндукции катушки с \\(L = 0{,}5\\) Гн при изменении тока от 0 до 4 А за 0,2 с:',
+    options: [
+      { text: '10 В',  correct: true  },
+      { text: '1 В',   correct: false },
+      { text: '40 В',  correct: false },
+      { text: '2,5 В', correct: false },
+    ],
+    explanation: '\\(\\varepsilon = L\\dfrac{\\Delta I}{\\Delta t} = 0{,}5\\cdot\\dfrac{4}{0{,}2} = 10\\,\\text{В}\\).',
+  },
+  {
+    topic: 'Электромагнитная индукция', difficulty: 2, type: 'single',
+    text: 'Частота переменного тока 50 Гц. Период:',
+    options: [
+      { text: '0,02 с', correct: true  },
+      { text: '50 с',   correct: false },
+      { text: '0,2 с',  correct: false },
+      { text: '0,002 с', correct: false },
+    ],
+    explanation: '\\(T = \\dfrac{1}{f} = \\dfrac{1}{50} = 0{,}02\\,\\text{с}\\).',
+  },
+  {
+    topic: 'Электромагнитная индукция', difficulty: 2, type: 'single',
+    text: 'Колебательный контур: \\(L = 0{,}1\\) Гн, \\(C = 10\\) мкФ. Период колебаний:',
+    options: [
+      { text: '≈ 6,3 мс',   correct: true  },
+      { text: '≈ 62,8 мс',  correct: false },
+      { text: '≈ 0,63 мс',  correct: false },
+      { text: '≈ 1 мс',     correct: false },
+    ],
+    explanation: '\\(T = 2\\pi\\sqrt{LC} = 2\\pi\\sqrt{0{,}1\\cdot10^{-5}} = 2\\pi\\cdot10^{-3} \\approx 6{,}28\\,\\text{мс}\\).',
+  },
+  {
+    topic: 'Электромагнитная индукция', difficulty: 3, type: 'single',
+    text: 'Трансформатор повышает напряжение с 220 В до 11 000 В. Первичная обмотка 400 витков, ток 50 А. Ток во вторичной обмотке (идеальный трансформатор):',
+    options: [
+      { text: '1 А',    correct: true  },
+      { text: '2500 А', correct: false },
+      { text: '0,1 А',  correct: false },
+      { text: '10 А',   correct: false },
+    ],
+    explanation: '\\(\\dfrac{U_2}{U_1} = \\dfrac{I_1}{I_2}\\)  ⟹  \\(I_2 = I_1\\cdot\\dfrac{U_1}{U_2} = 50\\cdot\\dfrac{220}{11000} = 1\\,\\text{А}\\).',
+  },
+  {
+    topic: 'Электромагнитная индукция', difficulty: 3, type: 'single',
+    text: 'Правило Ленца: индукционный ток в контуре всегда направлен так, что его магнитное поле:',
+    options: [
+      { text: 'препятствует изменению магнитного потока, его вызвавшего',          correct: true  },
+      { text: 'совпадает по направлению с изменением внешнего магнитного потока',  correct: false },
+      { text: 'перпендикулярно внешнему магнитному полю',                          correct: false },
+      { text: 'не зависит от скорости изменения магнитного потока',               correct: false },
+    ],
+    explanation: 'Правило Ленца — проявление закона сохранения энергии: индукционный ток создаёт поле, направленное против изменения потока, т.е. препятствует его изменению.',
+  },
+
+  /* ══════════════════════════════════════════════════════════════════════
+     ОПТИКА
+  ══════════════════════════════════════════════════════════════════════ */
+  {
+    topic: 'Оптика', difficulty: 1, type: 'single',
+    text: 'Луч света падает на плоское зеркало, образуя угол 35° с поверхностью зеркала. Угол отражения равен:',
+    options: [
+      { text: '55°', correct: true  },
+      { text: '35°', correct: false },
+      { text: '70°', correct: false },
+      { text: '90°', correct: false },
+    ],
+    explanation: 'Углы падения и отражения отсчитываются от нормали. Угол с поверхностью 35° → угол с нормалью 90° − 35° = 55°. По закону отражения угол отражения = 55°.',
+  },
+  {
+    topic: 'Оптика', difficulty: 1, type: 'single',
+    text: 'Линза с оптической силой 5 дптр. Фокусное расстояние:',
+    options: [
+      { text: '20 см', correct: true  },
+      { text: '5 см',  correct: false },
+      { text: '50 см', correct: false },
+      { text: '2 м',   correct: false },
+    ],
+    explanation: '\\(F = \\dfrac{1}{D} = \\dfrac{1}{5} = 0{,}2\\,\\text{м} = 20\\,\\text{см}\\).',
+  },
+  {
+    topic: 'Оптика', difficulty: 2, type: 'single',
+    text: 'Предмет на расстоянии 30 см от тонкой собирающей линзы с \\(F = 20\\) см. Расстояние до изображения:',
+    options: [
+      { text: '60 см', correct: true  },
+      { text: '12 см', correct: false },
+      { text: '30 см', correct: false },
+      { text: '50 см', correct: false },
+    ],
+    explanation: '\\(\\dfrac{1}{F} = \\dfrac{1}{d_0} + \\dfrac{1}{d_i}\\)  ⟹  \\(\\dfrac{1}{d_i} = \\dfrac{1}{20} - \\dfrac{1}{30} = \\dfrac{1}{60}\\)  ⟹  \\(d_i = 60\\,\\text{см}\\).',
+  },
+  {
+    topic: 'Оптика', difficulty: 2, type: 'single',
+    text: 'Две щели шириной \\(d = 1\\) мм, экран на расстоянии \\(L = 2\\) м, длина волны \\(\\lambda = 500\\) нм. Расстояние между соседними максимумами:',
+    options: [
+      { text: '1 мм',   correct: true  },
+      { text: '0,1 мм', correct: false },
+      { text: '5 мм',   correct: false },
+      { text: '0,5 мм', correct: false },
+    ],
+    explanation: '\\(\\Delta y = \\dfrac{\\lambda L}{d} = \\dfrac{500\\cdot10^{-9}\\cdot2}{10^{-3}} = 10^{-3}\\,\\text{м} = 1\\,\\text{мм}\\).',
+  },
+  {
+    topic: 'Оптика', difficulty: 2, type: 'single',
+    text: 'Показатель преломления стекла \\(n = 1{,}5\\). Критический угол полного внутреннего отражения:',
+    options: [
+      { text: '≈ 42°', correct: true  },
+      { text: '≈ 48°', correct: false },
+      { text: '≈ 30°', correct: false },
+      { text: '≈ 60°', correct: false },
+    ],
+    explanation: '\\(\\sin\\theta_\\text{кр} = \\dfrac{1}{n} = \\dfrac{1}{1{,}5} = 0{,}667\\)  ⟹  \\(\\theta_\\text{кр} \\approx 41{,}8° \\approx 42°\\).',
+  },
+  {
+    topic: 'Оптика', difficulty: 3, type: 'single',
+    text: 'Луч переходит из воздуха в стекло с \\(n = 1{,}73\\). Угол падения 60°. Угол преломления:',
+    options: [
+      { text: '30°', correct: true  },
+      { text: '60°', correct: false },
+      { text: '45°', correct: false },
+      { text: '20°', correct: false },
+    ],
+    explanation: '\\(\\sin\\beta = \\dfrac{\\sin\\alpha}{n} = \\dfrac{\\sin60°}{1{,}73} = \\dfrac{\\sqrt{3}/2}{\\sqrt{3}} = 0{,}5\\)  ⟹  \\(\\beta = 30°\\).',
+  },
+  {
+    topic: 'Оптика', difficulty: 2, type: 'single',
+    text: 'Скорость света в воде с \\(n = 1{,}33\\):',
+    options: [
+      { text: '≈ 2,26·10⁸ м/с', correct: true  },
+      { text: '≈ 4·10⁸ м/с',    correct: false },
+      { text: '≈ 1·10⁸ м/с',    correct: false },
+      { text: '3·10⁸ м/с',      correct: false },
+    ],
+    explanation: '\\(v = \\dfrac{c}{n} = \\dfrac{3\\cdot10^8}{1{,}33} \\approx 2{,}26\\cdot10^8\\,\\text{м/с}\\).',
+  },
+  {
+    topic: 'Оптика', difficulty: 1, type: 'single',
+    text: 'Какой цвет видимого спектра имеет наибольшую длину волны?',
+    options: [
+      { text: 'Красный',   correct: true  },
+      { text: 'Жёлтый',   correct: false },
+      { text: 'Зелёный',  correct: false },
+      { text: 'Фиолетовый', correct: false },
+    ],
+    explanation: 'Видимый спектр: красный (~700 нм) > оранжевый > жёлтый > зелёный > голубой > синий > фиолетовый (~400 нм). Красный — наибольшая длина волны.',
+  },
+
+  /* ══════════════════════════════════════════════════════════════════════
+     КВАНТОВАЯ ФИЗИКА И ЯДЕРНАЯ
+  ══════════════════════════════════════════════════════════════════════ */
+  {
+    topic: 'Квантовая и ядерная физика', difficulty: 1, type: 'single',
+    text: 'Энергия фотона при частоте \\(\\nu = 6\\cdot10^{14}\\) Гц (\\(h = 6{,}63\\cdot10^{-34}\\) Дж·с):',
+    options: [
+      { text: '≈ 4·10⁻¹⁹ Дж', correct: true  },
+      { text: '≈ 4·10⁻²⁰ Дж', correct: false },
+      { text: '≈ 4·10⁻¹⁸ Дж', correct: false },
+      { text: '≈ 10⁻³³ Дж',   correct: false },
+    ],
+    explanation: '\\(E = h\\nu = 6{,}63\\cdot10^{-34}\\cdot6\\cdot10^{14} \\approx 3{,}98\\cdot10^{-19}\\,\\text{Дж} \\approx 4\\cdot10^{-19}\\,\\text{Дж}\\).',
+  },
+  {
+    topic: 'Квантовая и ядерная физика', difficulty: 1, type: 'single',
+    text: 'Период полураспада изотопа 20 лет. Через 40 лет от начального количества \\(N_0\\) останется:',
+    options: [
+      { text: '\\(N_0/4 = 25\\%\\)',  correct: true  },
+      { text: '\\(N_0/2 = 50\\%\\)',  correct: false },
+      { text: '\\(N_0/8 = 12{,}5\\%\\)', correct: false },
+      { text: '0',                    correct: false },
+    ],
+    explanation: '\\(N = N_0\\left(\\tfrac12\\right)^{40/20} = N_0\\left(\\tfrac12\\right)^2 = \\dfrac{N_0}{4}\\).',
+  },
+  {
+    topic: 'Квантовая и ядерная физика', difficulty: 1, type: 'single',
+    text: 'При \\(\\alpha\\)-распаде ядра \\(^{238}_{92}U\\) образуется:',
+    options: [
+      { text: '\\(^{234}_{90}\\text{Th}\\)', correct: true  },
+      { text: '\\(^{234}_{91}\\text{Pa}\\)', correct: false },
+      { text: '\\(^{238}_{90}\\text{Th}\\)', correct: false },
+      { text: '\\(^{232}_{88}\\text{Ra}\\)', correct: false },
+    ],
+    explanation: 'При \\(\\alpha\\)-распаде: \\(Z \\to Z-2\\), \\(A \\to A-4\\).  \\(Z=92-2=90\\) (торий), \\(A=238-4=234\\).',
+  },
+  {
+    topic: 'Квантовая и ядерная физика', difficulty: 2, type: 'single',
+    text: 'Фотоэффект: металл облучают светом с частотой \\(\\nu = 7{,}5\\cdot10^{14}\\) Гц. Работа выхода \\(A = 3\\cdot10^{-19}\\) Дж (\\(h = 6\\cdot10^{-34}\\) Дж·с). Максимальная кинетическая энергия электрона:',
+    options: [
+      { text: '\\(1{,}5\\cdot10^{-19}\\) Дж', correct: true  },
+      { text: '\\(7{,}5\\cdot10^{-19}\\) Дж', correct: false },
+      { text: '\\(4{,}5\\cdot10^{-19}\\) Дж', correct: false },
+      { text: '\\(3\\cdot10^{-19}\\) Дж',      correct: false },
+    ],
+    explanation: '\\(E_k = h\\nu - A = 6\\cdot10^{-34}\\cdot7{,}5\\cdot10^{14} - 3\\cdot10^{-19} = 4{,}5\\cdot10^{-19} - 3\\cdot10^{-19} = 1{,}5\\cdot10^{-19}\\,\\text{Дж}\\).',
+  },
+  {
+    topic: 'Квантовая и ядерная физика', difficulty: 2, type: 'single',
+    text: 'Какое излучение обладает наибольшей проникающей способностью?',
+    options: [
+      { text: 'Гамма-излучение (\\(\\gamma\\))', correct: true  },
+      { text: 'Альфа-излучение (\\(\\alpha\\))', correct: false },
+      { text: 'Бета-излучение (\\(\\beta\\))',   correct: false },
+      { text: 'Ультрафиолетовое',               correct: false },
+    ],
+    explanation: '\\(\\gamma\\)-кванты — наиболее проникающее излучение, поглощаются только толстым слоем свинца или бетона. \\(\\alpha\\) — поглощается листом бумаги, \\(\\beta\\) — несколькими мм алюминия.',
+  },
+  {
+    topic: 'Квантовая и ядерная физика', difficulty: 2, type: 'single',
+    text: 'В ядерной реакции \\(^1_1H + ^7_3Li \\to 2\\,^4_2He\\):',
+    options: [
+      { text: 'выполняются законы сохранения массового числа и заряда', correct: true  },
+      { text: 'нарушается закон сохранения заряда',                    correct: false },
+      { text: 'нарушается закон сохранения массового числа',           correct: false },
+      { text: 'нарушаются оба закона сохранения',                      correct: false },
+    ],
+    explanation: '\\(A\\!:\\; 1+7=8=2\\cdot4\\)  ✓;  \\(Z\\!:\\; 1+3=4=2\\cdot2\\)  ✓. Оба закона выполняются.',
+  },
+  {
+    topic: 'Квантовая и ядерная физика', difficulty: 2, type: 'single',
+    text: 'Период полураспада радия 1600 лет. Через сколько лет активность препарата уменьшится в 4 раза?',
+    options: [
+      { text: '3200 лет', correct: true  },
+      { text: '400 лет',  correct: false },
+      { text: '800 лет',  correct: false },
+      { text: '6400 лет', correct: false },
+    ],
+    explanation: '\\(\\dfrac{N}{N_0} = \\left(\\tfrac12\\right)^{t/T} = \\dfrac{1}{4} = \\left(\\tfrac12\\right)^2\\)  ⟹  \\(t = 2T = 2\\cdot1600 = 3200\\,\\text{лет}\\).',
+  },
+  {
+    topic: 'Квантовая и ядерная физика', difficulty: 3, type: 'single',
+    text: 'Какое излучение НЕ отклоняется магнитным полем?',
+    options: [
+      { text: 'Гамма-излучение',            correct: true  },
+      { text: 'Альфа-излучение',            correct: false },
+      { text: 'Бета-излучение',             correct: false },
+      { text: 'Пучок протонов',             correct: false },
+    ],
+    explanation: '\\(\\gamma\\)-кванты — электромагнитные волны, не несут заряда, поэтому магнитным полем не отклоняются. \\(\\alpha\\) и \\(\\beta\\) — заряженные частицы, отклоняются.',
+  },
+
+  /* ══════════════════════════════════════════════════════════════════════
+     КОЛЕБАНИЯ И ВОЛНЫ
+  ══════════════════════════════════════════════════════════════════════ */
+  {
+    topic: 'Колебания и волны', difficulty: 1, type: 'single',
+    text: 'Маятник совершает 10 полных колебаний за 20 с. Частота колебаний:',
+    options: [
+      { text: '0,5 Гц', correct: true  },
+      { text: '2 Гц',   correct: false },
+      { text: '20 Гц',  correct: false },
+      { text: '0,2 Гц', correct: false },
+    ],
+    explanation: '\\(f = \\dfrac{N}{t} = \\dfrac{10}{20} = 0{,}5\\,\\text{Гц}\\).',
+  },
+  {
+    topic: 'Колебания и волны', difficulty: 1, type: 'single',
+    text: 'Скорость звука в воздухе 340 м/с. Длина волны при частоте 1700 Гц:',
+    options: [
+      { text: '0,2 м = 20 см', correct: true  },
+      { text: '0,02 м',        correct: false },
+      { text: '2 м',           correct: false },
+      { text: '0,578 м',       correct: false },
+    ],
+    explanation: '\\(\\lambda = \\dfrac{v}{f} = \\dfrac{340}{1700} = 0{,}2\\,\\text{м}\\).',
+  },
+  {
+    topic: 'Колебания и волны', difficulty: 2, type: 'single',
+    text: 'Математический маятник длиной \\(L = 1\\) м (\\(g = 10\\) м/с²). Период колебаний:',
+    options: [
+      { text: '≈ 2 с',   correct: true  },
+      { text: '≈ 1 с',   correct: false },
+      { text: '≈ 4 с',   correct: false },
+      { text: '≈ 0,5 с', correct: false },
+    ],
+    explanation: '\\(T = 2\\pi\\sqrt{\\dfrac{L}{g}} = 2\\pi\\sqrt{\\dfrac{1}{10}} = \\dfrac{2\\pi}{\\sqrt{10}} \\approx 1{,}99\\,\\text{с} \\approx 2\\,\\text{с}\\).',
+  },
+  {
+    topic: 'Колебания и волны', difficulty: 2, type: 'single',
+    text: 'Маятник с периодом 2 с. При уменьшении его длины в 4 раза период станет:',
+    options: [
+      { text: '1 с',   correct: true  },
+      { text: '0,5 с', correct: false },
+      { text: '4 с',   correct: false },
+      { text: '8 с',   correct: false },
+    ],
+    explanation: '\\(T \\propto \\sqrt{L}\\). При \\(L \\to L/4\\): \\(T \\to T/2 = 1\\,\\text{с}\\).',
+  },
+  {
+    topic: 'Колебания и волны', difficulty: 3, type: 'single',
+    text: 'Два маятника с периодами 2 с и 3 с начинают колебаться одновременно. Через сколько секунд они впервые окажутся в одинаковой фазе?',
+    options: [
+      { text: '6 с',  correct: true  },
+      { text: '3 с',  correct: false },
+      { text: '12 с', correct: false },
+      { text: '1 с',  correct: false },
+    ],
+    explanation: 'Нужно наименьшее общее кратное периодов: \\(\\text{НОК}(2,\\,3) = 6\\,\\text{с}\\).',
+  },
+];
+
+/* ── insert ─────────────────────────────────────────────────────────── */
+const insertQ = db.prepare(
+  'INSERT INTO questions (subject_id, topic_id, text, difficulty, year, explanation, type, image, source_type) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)'
+);
+const insertO = db.prepare(
+  'INSERT INTO options (question_id, text, is_correct, order_index) VALUES (?, ?, ?, ?)'
+);
+
+let inserted = 0, skipped = 0;
+const checkQ = db.prepare('SELECT id FROM questions WHERE subject_id = ? AND text = ?');
+db.exec('BEGIN');
+try {
+  for (const q of questions) {
+    if (checkQ.get(SID, q.text)) { skipped++; continue; }
+    const topicId = getOrCreateTopic(SID, q.topic);
+    const { lastInsertRowid: qid } = insertQ.run(
+      SID, topicId, q.text, q.difficulty,
+      q.year || null, q.explanation || null, q.type || 'single', null, 'базовый'
+    );
+    q.options.forEach((o, i) => insertO.run(qid, o.text, o.correct ? 1 : 0, i));
+    inserted++;
+    process.stdout.write('.');
+  }
+  db.exec('COMMIT');
+  console.log(`\n✓ Вставлено ${inserted}, пропущено ${skipped} вопросов по физике.`);
+} catch (err) {
+  db.exec('ROLLBACK');
+  console.error('\nОшибка:', err.message);
+  process.exit(1);
+}
diff --git a/backend/src/db/seed-red-book-extra.js b/backend/src/db/seed-red-book-extra.js
new file mode 100644
index 0000000..e2a5873
--- /dev/null
+++ b/backend/src/db/seed-red-book-extra.js
@@ -0,0 +1,405 @@
+/**
+ * seed-red-book-extra.js
+ * Добавляет дополнительные виды, сезонность и пищевые связи.
+ * Запуск: node src/db/seed-red-book-extra.js  (из папки backend/)
+ * Идемпотентен — не дублирует существующие виды.
+ */
+require('./migrate');
+const db = require('./db');
+
+/* ── helpers ── */
+const groupRow   = (name) => db.prepare("SELECT id FROM rb_groups WHERE name_ru = ?").get(name);
+const habitatRow = (type) => db.prepare("SELECT id FROM rb_habitats WHERE type = ?").get(type);
+
+const insSp = db.prepare(`
+  INSERT INTO rb_species
+    (group_id, habitat_id, name_ru, name_be, name_lat, category, by_category,
+     description, interesting_fact, threats, conservation, where_to_see,
+     photo_url, model_type, population_trend, biomass_kg, season_active)
+  VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)
+`);
+const insReg = db.prepare('INSERT OR IGNORE INTO rb_species_regions (species_id, region_code) VALUES (?,?)');
+const insWeb = db.prepare('INSERT OR IGNORE INTO rb_food_web (predator_id, prey_id, strength) VALUES (?,?,?)');
+
+function addSp(data) {
+  // Guard: skip if already exists by name_ru
+  const existing = db.prepare("SELECT id FROM rb_species WHERE name_ru = ?").get(data.name_ru);
+  if (existing) return existing.id;
+
+  const gid = groupRow(data.group)?.id;
+  const hid = habitatRow(data.habitat)?.id || null;
+  if (!gid) { console.warn(`Group not found: ${data.group}`); return null; }
+
+  const id = insSp.run(
+    gid, hid,
+    data.name_ru, data.name_be || '', data.name_lat || '',
+    data.category, data.by_category || 'III',
+    data.description || '', data.fact || '',
+    JSON.stringify(data.threats || []),
+    data.conservation || '', data.where_to_see || '',
+    data.photo || '', data.model || 'silhouette',
+    JSON.stringify(data.trend || []),
+    data.biomass || 0,
+    JSON.stringify(data.seasons || []),
+  ).lastInsertRowid;
+
+  (data.regions || []).forEach(r => insReg.run(id, r));
+  return id;
+}
+
+/* ── existing ids by name ── */
+function getId(name) {
+  const r = db.prepare("SELECT id FROM rb_species WHERE name_ru = ?").get(name);
+  return r?.id || null;
+}
+
+db.exec('BEGIN');
+
+/* ══════════════════════════════════════════════════════════════════════════
+   НОВЫЕ ВИДЫ — ПТИЦЫ
+   ══════════════════════════════════════════════════════════════════════════ */
+
+const pukhlyak = addSp({
+  group: 'Птицы', habitat: 'conifer',
+  name_ru: 'Пухляк (гаичка буроголовая)', name_be: 'Мухаловка шэрая', name_lat: 'Poecile montanus',
+  category: 'NT', by_category: 'IV',
+  description: 'Небольшая птица хвойных лесов, запасающая корм в тайниках на зиму. Способна запомнить сотни тайников одновременно. Активна круглый год, не покидает территорию даже в сильные морозы.',
+  fact: 'Пухляк запасает до 2000 семян за осень, запоминая каждое место с точностью до нескольких сантиметров.',
+  threats: ['Вырубка ельников', 'Конкуренция с синицами'],
+  conservation: 'Сохранение разновозрастных хвойных лесов.',
+  where_to_see: 'Беловежская пуща, Налибокская пуща, Нарочанский НП',
+  biomass: 0.012, seasons: ['10','11','12','1','2','3'],
+  regions: ['vitebsk','minsk','grodno'],
+});
+
+const lebed = addSp({
+  group: 'Птицы', habitat: 'river',
+  name_ru: 'Лебедь-шипун', name_be: 'Лебедзь-шыпун', name_lat: 'Cygnus olor',
+  category: 'NT', by_category: 'IV',
+  description: 'Один из крупнейших летающих птиц мира — масса до 14 кг. Агрессивно защищает гнездо от любых нарушителей. Пары создаются на много лет. В Беларуси гнездится на озёрах, прудах и медленных реках.',
+  fact: 'Лебедь-шипун — самая тяжёлая из всех летающих птиц. Чтобы взлететь, ему нужно пробежать по воде 40–50 м.',
+  threats: ['Рекреационная нагрузка', 'Свинцовое отравление', 'Беспокойство у гнёзд'],
+  conservation: 'Охранные зоны у гнёзд. Ограничение водно-моторного спорта.',
+  where_to_see: 'Браславские озёра, Нарочанский НП, Минское море',
+  biomass: 10.0, seasons: ['4','5','6','7','8'],
+  regions: ['vitebsk','minsk','brest','grodno'],
+});
+
+const klikun = addSp({
+  group: 'Птицы', habitat: 'river',
+  name_ru: 'Лебедь-кликун', name_be: 'Лебедзь-крыкун', name_lat: 'Cygnus cygnus',
+  category: 'VU', by_category: 'II',
+  description: 'Перелётный лебедь, зимующий в Беларуси. В отличие от шипуна держит шею прямо. Мощный трубный крик слышен далеко. Небольшая гнездовая популяция в Витебской области значительно выросла за последние 30 лет.',
+  fact: 'Лебедь-кликун мигрирует на высоте до 8000 м. Зафиксированы особи, долетавшие из Западной Сибири.',
+  threats: ['Беспокойство', 'Отравление свинцом', 'Недостаток спокойных зимовальных мест'],
+  conservation: 'Охранные зоны. Запрет охоты.',
+  where_to_see: 'Браславские озёра (зимовка), Витебская область (гнездование)',
+  biomass: 9.0, seasons: ['10','11','12','1','2','3'],
+  regions: ['vitebsk','minsk'],
+});
+
+const domovoy_sych = addSp({
+  group: 'Птицы', habitat: 'meadow',
+  name_ru: 'Сыч домовый', name_be: 'Хатні сычык', name_lat: 'Athene noctua',
+  category: 'EN', by_category: 'II',
+  description: 'Маленькая сова агроландшафтов, живущая в старых постройках, скалах и пнях. Активна в сумерках. В Беларуси редкость — известны единицы гнездовых пар. Численность катастрофически снизилась из-за химизации сельского хозяйства.',
+  fact: 'Домовый сыч ловит до 600 мышей и 2000 насекомых в год, являясь природным регулятором грызунов.',
+  threats: ['Применение пестицидов', 'Снижение числа старых построек', 'Кошки'],
+  conservation: 'Установка гнездовых ящиков. Ограничение пестицидов.',
+  where_to_see: 'Брестская область (единичные пары)',
+  biomass: 0.18, seasons: ['3','4','5','6','7','8','9'],
+  regions: ['brest','gomel'],
+});
+
+const velik_kulak = addSp({
+  group: 'Птицы', habitat: 'wetland',
+  name_ru: 'Большой кроншнеп', name_be: 'Вялікі кроншнеп', name_lat: 'Numenius arquata',
+  category: 'EN', by_category: 'II',
+  description: 'Крупнейший кулик Беларуси с изогнутым книзу клювом. Гнездится на влажных лугах и болотах. Очень пуглив — уже с 500 метров покидает гнездо при появлении людей. Численность неуклонно сокращается.',
+  fact: 'Большой кроншнеп может зондировать почву на глубину 15 см своим клювом, находя дождевых червей по осязанию.',
+  threats: ['Ранний сенокос', 'Осушение лугов', 'Хищничество лисиц'],
+  conservation: 'Отсрочка сенокоса. Сохранение пойменных лугов.',
+  where_to_see: 'Пойма Припяти, Нарочанский НП',
+  biomass: 0.7, seasons: ['4','5','6','7'],
+  regions: ['brest','gomel','minsk','vitebsk'],
+});
+
+/* ══════════════════════════════════════════════════════════════════════════
+   НОВЫЕ ВИДЫ — МЛЕКОПИТАЮЩИЕ
+   ══════════════════════════════════════════════════════════════════════════ */
+
+const zaets = addSp({
+  group: 'Млекопитающие', habitat: 'forest',
+  name_ru: 'Заяц-беляк', name_be: 'Заяц-белы', name_lat: 'Lepus timidus',
+  category: 'NT', by_category: 'IV',
+  description: 'Самый «белорусский» заяц — зимой его мех белеет, что обеспечивает маскировку на снегу. Предпочитает смешанные леса и опушки. Численность регулярно колеблется с периодом 10–11 лет в зависимости от популяции хищников.',
+  fact: 'Заяц-беляк может развивать скорость до 70 км/ч и прыгать на 4 м в длину, уходя от преследователей.',
+  threats: ['Волки', 'Лисы', 'Охота', 'Уменьшение подлеска'],
+  conservation: 'Регулирование охотничьей нагрузки.',
+  where_to_see: 'Все крупные леса Беларуси',
+  biomass: 3.5, seasons: ['11','12','1','2','3'],
+  regions: ['vitebsk','minsk','grodno','brest','gomel','mogilev'],
+});
+
+const lasitsa = addSp({
+  group: 'Млекопитающие', habitat: 'meadow',
+  name_ru: 'Ласка обыкновенная', name_be: 'Ласіца звычайная', name_lat: 'Mustela nivalis',
+  category: 'NT', by_category: 'IV',
+  description: 'Самый маленький хищник Беларуси весом 70–130 г. Способна следовать за мышами в их норы. Зимой меняет мех на белый. Настоящий «регулятор» популяций полёвок — за год уничтожает до 2000 грызунов.',
+  fact: 'Ласка может убивать добычу, в 5 раз тяжелее себя — кроликов и крыс.',
+  threats: ['Яды для грызунов', 'Уничтожение живых изгородей'],
+  conservation: 'Ограничение использования родентицидов.',
+  where_to_see: 'Луга и поля по всей Беларуси',
+  biomass: 0.1, seasons: ['1','2','3','4','5','6','7','8','9','10','11','12'],
+  regions: ['vitebsk','minsk','grodno','brest','gomel','mogilev'],
+});
+
+const night_bat = addSp({
+  group: 'Млекопитающие', habitat: 'forest',
+  name_ru: 'Широкоушка европейская', name_be: 'Шырокавухая кажан', name_lat: 'Barbastella barbastellus',
+  category: 'EN', by_category: 'II',
+  description: 'Редкая летучая мышь с характерными широкими ушами. Зимует в пещерах и подвалах. Охотится на ночных бабочек, улавливая их вибрации. Одна из наиболее уязвимых рукокрылых Европы.',
+  fact: 'Широкоушка способна поймать до 2000 насекомых за ночь. Её эхолокация настолько совершенна, что она не задевает паутину.',
+  threats: ['Утепление зданий', 'Химические обработки леса', 'Беспокойство в зимовочных убежищах'],
+  conservation: 'Охрана зимовочных убежищ. Вывешивание летних домиков.',
+  where_to_see: 'Беловежская пуща, старые здания Гродненской области',
+  biomass: 0.01, seasons: ['4','5','6','7','8','9'],
+  regions: ['grodno','brest','minsk'],
+});
+
+/* ══════════════════════════════════════════════════════════════════════════
+   НОВЫЕ ВИДЫ — РАСТЕНИЯ
+   ══════════════════════════════════════════════════════════════════════════ */
+
+const kupena = addSp({
+  group: 'Растения', habitat: 'forest',
+  name_ru: 'Купена многоцветковая', name_be: 'Купена шматкветкавая', name_lat: 'Polygonatum multiflorum',
+  category: 'NT', by_category: 'IV',
+  description: 'Изящное тенелюбивое растение тёмных лесов с белыми колокольчатыми цветами. Плоды — тёмно-синие ягоды — ядовиты для человека, но поедаются птицами. Медленно растёт: возраст крупных особей может достигать 50 лет.',
+  fact: 'Купена цветёт только один раз в жизни. Название происходит от «купель» — ранее растение применялось в народной медицине.',
+  threats: ['Сбор на букеты', 'Рекреационная нагрузка', 'Вырубка лесов'],
+  conservation: 'Запрет сбора. Включение в охраняемые участки.',
+  where_to_see: 'Беловежская пуща, дубравы Полесья',
+  biomass: 0.05, seasons: ['4','5','6'],
+  regions: ['grodno','brest','gomel','minsk'],
+});
+
+const kruzhevnitsa = addSp({
+  group: 'Растения', habitat: 'wetland',
+  name_ru: 'Альдрованда пузырчатая', name_be: 'Альдрованда бурбалкавая', name_lat: 'Aldrovanda vesiculosa',
+  category: 'CR', by_category: 'I',
+  description: 'Единственное в мире водное хищное растение, не имеющее корней. Ловит водных беспозвоночных ловушками, напоминающими венерину мухоловку. Популяции в Беларуси — единственные в центральной Европе. Крайне чувствительна к загрязнению воды.',
+  fact: 'Альдрованда — самое быстрое хищное растение в воде: захлопывает ловушку за 0.01 секунды.',
+  threats: ['Загрязнение воды', 'Эвтрофикация', 'Зарастание водоёмов'],
+  conservation: 'Охрана болотных водоёмов. Восстановление популяций.',
+  where_to_see: 'Ольманские болота, Брестская область',
+  biomass: 0.001, seasons: ['6','7','8'],
+  regions: ['brest'],
+});
+
+const korolev_papor = addSp({
+  group: 'Растения', habitat: 'forest',
+  name_ru: 'Папоротник-орляк', name_be: 'Арляк звычайны', name_lat: 'Pteridium aquilinum',
+  category: 'NT', by_category: 'IV',
+  description: 'Один из древнейших видов флоры Беларуси — существует без изменений 55 миллионов лет. Образует обширные куртины в сосновых лесах. Молодые побеги («скрипухи») ядовиты для скота, но съедобны для людей после варки.',
+  fact: 'Орляк — один из немногих папоротников, покрывающих более 1% суши Земли. Его корневища уходят на глубину 4 м.',
+  threats: ['Интенсивные рубки', 'Пожары', 'Иссушение лесов'],
+  conservation: 'Охрана старых лесов.',
+  where_to_see: 'Хвойные леса по всей Беларуси',
+  biomass: 0.3, seasons: ['5','6','7','8','9'],
+  regions: ['vitebsk','minsk','grodno','brest','gomel','mogilev'],
+});
+
+/* ══════════════════════════════════════════════════════════════════════════
+   НОВЫЕ ВИДЫ — НАСЕКОМЫЕ
+   ══════════════════════════════════════════════════════════════════════════ */
+
+const rosalia = addSp({
+  group: 'Насекомые', habitat: 'forest',
+  name_ru: 'Усач альпийский', name_be: 'Вусач альпійскі', name_lat: 'Rosalia alpina',
+  category: 'EN', by_category: 'II',
+  description: 'Один из красивейших жуков Европы — голубовато-серый с чёрными пятнами, с усами длиннее тела. Личинка живёт в мёртвой буковой древесине. В Беларуси встречается на границе ареала, в Беловежской пуще.',
+  fact: 'Усач альпийский — один из символов охраны природы Европы. Его изображение есть на почтовых марках многих стран.',
+  threats: ['Вырубка старых буков', 'Удаление мёртвой древесины'],
+  conservation: 'Сохранение старых буковых деревьев и валежника.',
+  where_to_see: 'Беловежская пуща',
+  biomass: 0.003, seasons: ['6','7','8'],
+  regions: ['brest'],
+});
+
+const pchela_plothnik = addSp({
+  group: 'Насекомые', habitat: 'forest',
+  name_ru: 'Пчела-плотник', name_be: 'Пчала-сталяр', name_lat: 'Xylocopa violacea',
+  category: 'VU', by_category: 'III',
+  description: 'Крупнейшая дикая пчела Беларуси — тело до 28 мм с фиолетово-синим блеском крыльев. Не живёт в ульях — самостоятельно прогрызает норы в сухой древесине. Важный опылитель с длинным хоботком для глубоких цветков.',
+  fact: 'Пчела-плотник способна прогрызть тоннель длиной 30 см в дубовом бревне.',
+  threats: ['Уборка старой и мёртвой древесины', 'Применение инсектицидов'],
+  conservation: 'Сохранение старых деревьев. Установка гнездовых брёвен.',
+  where_to_see: 'Беловежская пуща, старые сады Брестской области',
+  biomass: 0.001, seasons: ['4','5','6','7','8'],
+  regions: ['brest','grodno'],
+});
+
+const zelenyi_metallik = addSp({
+  group: 'Насекомые', habitat: 'meadow',
+  name_ru: 'Бронзовка гладкая', name_be: 'Бронзаўка гладкая', name_lat: 'Protaetia aeruginosa',
+  category: 'EN', by_category: 'II',
+  description: 'Жук с изумрудным металлическим блеском. Личинка развивается в дуплах старых дубов, питаясь перегноем. Взрослые особи питаются цветочным нектаром. Исчезает вместе с вековыми дубами.',
+  fact: 'Бронзовка — «инженер экосистем»: личинки рыхлят перегной в дуплах, создавая субстрат для редких растений и других насекомых.',
+  threats: ['Вырубка старых дубов', 'Исчезновение дупел', 'Применение инсектицидов'],
+  conservation: 'Сохранение старовозрастных дубрав.',
+  where_to_see: 'Беловежская пуща, дубравы Налибокской пущи',
+  biomass: 0.002, seasons: ['5','6','7'],
+  regions: ['brest','grodno','minsk'],
+});
+
+/* ══════════════════════════════════════════════════════════════════════════
+   НОВЫЕ ВИДЫ — РЫБЫ
+   ══════════════════════════════════════════════════════════════════════════ */
+
+const som = addSp({
+  group: 'Рыбы', habitat: 'river',
+  name_ru: 'Сом обыкновенный', name_be: 'Сом звычайны', name_lat: 'Silurus glanis',
+  category: 'NT', by_category: 'IV',
+  description: 'Крупнейшая пресноводная рыба Беларуси — достигает 3 м длины и 200 кг. Ведёт ночной образ жизни. Охотится в основном на рыбу, но не брезгует птицами и млекопитающими. В старых реках встречались особи возрастом 60–80 лет.',
+  fact: 'Сом может выползать на берег, чтобы охотиться на купающихся уток и голубей — этот феномен наблюдали на р. Биже в Испании.',
+  threats: ['Браконьерство', 'Ухудшение качества воды', 'Перекрытие миграционных путей'],
+  conservation: 'Ограничение промысла. Охрана нерестилищ.',
+  where_to_see: 'Припять, Нёман, Днепр, Западная Двина',
+  biomass: 30.0, seasons: ['5','6','7','8','9'],
+  regions: ['brest','gomel','grodno','minsk','vitebsk','mogilev'],
+});
+
+const taimen = addSp({
+  group: 'Рыбы', habitat: 'river',
+  name_ru: 'Хариус европейский', name_be: 'Харыус еўрапейскі', name_lat: 'Thymallus thymallus',
+  category: 'VU', by_category: 'III',
+  description: 'Стремительная рыба холодных чистых рек с высоким, похожим на парус, спинным плавником. Индикатор качества воды — исчезает при малейшем загрязнении. Питается насекомыми, упавшими на поверхность воды.',
+  fact: 'Хариус умеет «читать» поверхность воды: он точно определяет, куда упадёт насекомое, и занимает позицию заблаговременно.',
+  threats: ['Загрязнение рек', 'Чрезмерный вылов', 'Мелиорация'],
+  conservation: 'Охрана чистых рек. Запрет химических обработок водосборов.',
+  where_to_see: 'Западная Двина (верховья), Вилия, Нёман (верховья)',
+  biomass: 0.3, seasons: ['4','5','6'],
+  regions: ['vitebsk','grodno'],
+});
+
+/* ══════════════════════════════════════════════════════════════════════════
+   НОВЫЕ ВИДЫ — РЕПТИЛИИ И АМФИБИИ
+   ══════════════════════════════════════════════════════════════════════════ */
+
+const gadyuka = addSp({
+  group: 'Рептилии и амфибии', habitat: 'wetland',
+  name_ru: 'Гадюка обыкновенная', name_be: 'Гадзюка звычайная', name_lat: 'Vipera berus',
+  category: 'NT', by_category: 'IV',
+  description: 'Единственная ядовитая змея Беларуси. Укус редко опасен для взрослого здорового человека, но вызывает болезненный отёк. Питается грызунами, лягушками и ящерицами. Незаменима в экосистеме как регулятор численности грызунов.',
+  fact: 'Гадюка рожает живых детёнышей (до 12 штук), а не откладывает яйца. Молодые змеи с первого дня ядовиты.',
+  threats: ['Уничтожение людьми', 'Осушение болот', 'Автодороги'],
+  conservation: 'Просветительская работа. Охрана болотных участков.',
+  where_to_see: 'Болота и леса по всей Беларуси',
+  biomass: 0.15, seasons: ['4','5','6','7','8','9'],
+  regions: ['vitebsk','minsk','grodno','brest','gomel','mogilev'],
+});
+
+const listvy_trit = addSp({
+  group: 'Рептилии и амфибии', habitat: 'wetland',
+  name_ru: 'Гребенчатый тритон', name_be: 'Грабенчасты трытон', name_lat: 'Triturus cristatus',
+  category: 'NT', by_category: 'IV',
+  description: 'Крупнейший тритон Беларуси. В брачный период самец развивает зубчатый гребень вдоль всего тела. Обитает во влажных лесах и болотах. Выделяет ядовитые вещества через кожу для защиты от хищников.',
+  fact: 'Гребенчатый тритон может прожить 20–25 лет. В воде он дышит через кожу, не нуждаясь в воздухе часами.',
+  threats: ['Осушение водоёмов', 'Хищники', 'Загрязнение'],
+  conservation: 'Охрана болотных водоёмов. Создание пруд-убежищ.',
+  where_to_see: 'Пуща Налибокская, лесные водоёмы Витебской области',
+  biomass: 0.02, seasons: ['3','4','5','6'],
+  regions: ['vitebsk','minsk','grodno'],
+});
+
+/* ══════════════════════════════════════════════════════════════════════════
+   НОВЫЕ ВИДЫ — ГРИБЫ
+   ══════════════════════════════════════════════════════════════════════════ */
+
+const hleb_grib = addSp({
+  group: 'Грибы', habitat: 'forest',
+  name_ru: 'Ёж гриб (герций)', name_be: 'Гербій жаўтлявы', name_lat: 'Hericium erinaceus',
+  category: 'EN', by_category: 'II',
+  description: 'Необычный гриб с длинными белыми иглами, свисающими каскадом с дерева. Живёт на старых дубах и буках. Съедобен и ценится как деликатес. Исчезает вместе со старовозрастными широколиственными лесами.',
+  fact: 'Гриб-ёж содержит вещества, стимулирующие рост нейронов. Изучается как потенциальное средство при болезни Альцгеймера.',
+  threats: ['Вырубка старых деревьев', 'Сбор грибниками'],
+  conservation: 'Сохранение старых дубрав. Запрет сбора.',
+  where_to_see: 'Беловежская пуща',
+  biomass: 0.5, seasons: ['8','9','10'],
+  regions: ['brest'],
+});
+
+/* ══════════════════════════════════════════════════════════════════════════
+   ОБНОВИТЬ СЕЗОННОСТЬ СУЩЕСТВУЮЩИХ ВИДОВ
+   ══════════════════════════════════════════════════════════════════════════ */
+const seasonUpdate = db.prepare("UPDATE rb_species SET season_active = ? WHERE name_ru = ?");
+const seasonMap = [
+  ['Орлан-белохвост',        JSON.stringify(['1','2','3','4','5','6','7','8','9','10','11','12'])],
+  ['Чёрный аист',            JSON.stringify(['4','5','6','7','8','9'])],
+  ['Скопа',                  JSON.stringify(['4','5','6','7','8','9'])],
+  ['Коростель',              JSON.stringify(['5','6','7','8'])],
+  ['Серый журавль',          JSON.stringify(['3','4','5','6','7','8','9','10'])],
+  ['Филин',                  JSON.stringify(['1','2','3','4','5','6','7','8','9','10','11','12'])],
+  ['Зубр',                   JSON.stringify(['1','2','3','4','5','6','7','8','9','10','11','12'])],
+  ['Рысь',                   JSON.stringify(['1','2','3','4','5','6','7','8','9','10','11','12'])],
+  ['Бурый медведь',          JSON.stringify(['4','5','6','7','8','9','10'])],
+  ['Бобёр европейский',      JSON.stringify(['1','2','3','4','5','6','7','8','9','10','11','12'])],
+  ['Выдра речная',           JSON.stringify(['1','2','3','4','5','6','7','8','9','10','11','12'])],
+  ['Стерлядь',               JSON.stringify(['4','5','6','7','8','9'])],
+  ['Болотная черепаха',      JSON.stringify(['4','5','6','7','8','9'])],
+  ['Венерин башмачок',       JSON.stringify(['5','6'])],
+  ['Водяной орех',           JSON.stringify(['6','7','8','9'])],
+  ['Жук-олень',              JSON.stringify(['6','7','8'])],
+  ['Махаон',                 JSON.stringify(['5','6','7','8','9'])],
+  ['Богомол обыкновенный',   JSON.stringify(['7','8','9'])],
+  ['Трюфель белый',          JSON.stringify(['8','9','10','11'])],
+];
+seasonMap.forEach(([name, json]) => seasonUpdate.run(json, name));
+
+db.exec('COMMIT');
+console.log('✓ Дополнительные виды добавлены');
+console.log(`  Всего видов: ${db.prepare('SELECT COUNT(*) as n FROM rb_species').get().n}`);
+console.log(`  Пищевых связей: ${db.prepare('SELECT COUNT(*) as n FROM rb_food_web').get().n}`);
+
+/* ══════════════════════════════════════════════════════════════════════════
+   ПИЩЕВЫЕ СВЯЗИ ДЛЯ НОВЫХ ВИДОВ
+   ══════════════════════════════════════════════════════════════════════════ */
+db.exec('BEGIN');
+
+const newLinks = [
+  // Лебедь-шипун — водные растения
+  [lebed, getId('Водяной орех'), 0.4],
+  // Лебедь-кликун — водные растения
+  [klikun, getId('Водяной орех'), 0.4],
+  // Сом — рыба, лягушки
+  [som, getId('Стерлядь'), 0.3],
+  [som, getId('Хариус европейский'), 0.3],
+  // Гадюка — грызуны (опосредованно через тритона)
+  [gadyuka, getId('Тритон обыкновенный') || listvy_trit, 0.4],
+  // Гребенчатый тритон — насекомые
+  [listvy_trit, getId('Богомол обыкновенный'), 0.1],
+  // Выдра охотится на хариуса и сома
+  [getId('Выдра речная'), som, 0.2],
+  [getId('Выдра речная'), taimen, 0.3],
+  // Орлан на лебедей (редко)
+  [getId('Орлан-белохвост'), lebed, 0.1],
+  // Рысь — зайца
+  [getId('Рысь'), zaets, 0.4],
+  // Волк — зайца
+  [getId('Волк обыкновенный'), zaets, 0.3],
+  // Ласка — полёвки (через вид)
+  [lasitsa, getId('Коростель'), 0.1],
+  // Пухляк и семена
+  [getId('Воробьиный сыч'), pukhlyak, 0.2],
+  // Широкоушка — насекомые
+  [night_bat, getId('Махаон'), 0.2],
+  [night_bat, getId('Богомол обыкновенный'), 0.2],
+].filter(([p, q]) => p && q);
+
+newLinks.forEach(([p, q, s]) => {
+  try { insWeb.run(p, q, s); } catch {}
+});
+db.exec('COMMIT');
+console.log(`  Новых пищевых связей: ${newLinks.length}`);
+console.log('\n✅ seed-red-book-extra.js завершён!');
diff --git a/backend/src/db/seed-red-book-phase2.js b/backend/src/db/seed-red-book-phase2.js
new file mode 100644
index 0000000..4b43bce
--- /dev/null
+++ b/backend/src/db/seed-red-book-phase2.js
@@ -0,0 +1,493 @@
+/**
+ * seed-red-book-phase2.js
+ * +20 видов: мхи/лишайники, пресноводные, редкие насекомые, птицы болот, ночные хищники
+ * +10 квестов
+ * Запуск: node src/db/seed-red-book-phase2.js  (из папки backend/)
+ * Идемпотентен — не дублирует существующее.
+ */
+require('./migrate');
+const db = require('./db');
+
+/* ── helpers ── */
+const groupRow   = n  => db.prepare('SELECT id FROM rb_groups   WHERE name_ru = ?').get(n);
+const habitatRow = t  => db.prepare('SELECT id FROM rb_habitats WHERE type    = ?').get(t);
+const getId      = n  => db.prepare('SELECT id FROM rb_species  WHERE name_ru = ?').get(n)?.id || null;
+
+const insSp  = db.prepare(`
+  INSERT INTO rb_species
+    (group_id, habitat_id, name_ru, name_be, name_lat, category, by_category,
+     description, interesting_fact, threats, conservation, where_to_see,
+     photo_url, model_type, population_trend, biomass_kg, season_active)
+  VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)
+`);
+const insReg = db.prepare('INSERT OR IGNORE INTO rb_species_regions (species_id, region_code) VALUES (?,?)');
+const insWeb = db.prepare('INSERT OR IGNORE INTO rb_food_web (predator_id, prey_id, strength) VALUES (?,?,?)');
+
+function addSp(d) {
+  const existing = db.prepare('SELECT id FROM rb_species WHERE name_ru = ?').get(d.name_ru);
+  if (existing) return existing.id;
+  const gid = groupRow(d.group)?.id;
+  const hid = habitatRow(d.habitat)?.id || null;
+  if (!gid) { console.warn('Group not found:', d.group); return null; }
+  const id = insSp.run(
+    gid, hid,
+    d.name_ru, d.name_be || '', d.name_lat || '',
+    d.category, d.by_category || 'III',
+    d.description || '', d.fact || '',
+    JSON.stringify(d.threats || []),
+    d.conservation || '', d.where_to_see || '',
+    d.photo || '', d.model || 'silhouette',
+    JSON.stringify(d.trend || []),
+    d.biomass || 0,
+    JSON.stringify(d.seasons || []),
+  ).lastInsertRowid;
+  (d.regions || []).forEach(r => insReg.run(id, r));
+  return id;
+}
+
+/* ════════════════════════════════════════════════════════════════════════
+   БЛОК 1 — ВИДЫ
+   ════════════════════════════════════════════════════════════════════════ */
+db.exec('BEGIN');
+
+/* ── ПТИЦЫ (3) ─────────────────────────────────────────────────────── */
+
+const kamyshevka = addSp({
+  group: 'Птицы', habitat: 'wetland',
+  name_ru: 'Вертлявая камышевка', name_be: 'Вярцёжная чаротнiца', name_lat: 'Acrocephalus paludicola',
+  category: 'CR', by_category: 'I',
+  description: 'Одна из наиболее угрожаемых перелётных птиц Европы. Гнездится исключительно в низинных болотах с осоково-злаковой растительностью. Беларусь — мировой центр гнездования, здесь обитает до 80 % мировой популяции. Зимует в западной Африке.',
+  fact: 'Беларусь является главным «домом» вертлявой камышевки — здесь гнездится большинство всех особей планеты.',
+  threats: ['Осушение болот', 'Зарастание гнездовых угодий', 'Пожары в поймах', 'Потеря зимовок в Африке'],
+  conservation: 'Охрана низинных болот. Восстановление обводнённых пойм. Мониторинг популяции.',
+  where_to_see: 'Споровское болото (Брестская обл.), Ельня (Витебская обл.), Дикое болото',
+  biomass: 0.013, seasons: ['5','6','7','8'],
+  trend: [{year:1990,count_estimate:8000,source:'IUCN'},{year:2000,count_estimate:4500,source:'BirdLife'},{year:2010,count_estimate:2800,source:'BirdLife'},{year:2024,count_estimate:2100,source:'АПБ'}],
+  regions: ['vitebsk','grodno','brest','minsk'],
+});
+
+const dupen = addSp({
+  group: 'Птицы', habitat: 'wetland',
+  name_ru: 'Дупель', name_be: 'Дупель', name_lat: 'Gallinago media',
+  category: 'EN', by_category: 'II',
+  description: 'Скрытный кулик заливных лугов и болот. Самцы собираются на токах, где демонстрируют оперение и трясутся всем телом. После спаривания самка одна воспитывает птенцов. Ночной образ жизни затрудняет учёт.',
+  fact: 'Самцы дупеля токуют по ночам на «арене» — постоянном месте сбора, которое используется десятилетиями.',
+  threats: ['Осушение пойменных лугов', 'Раннее сенокошение', 'Браконьерство на пролёте'],
+  conservation: 'Запрет сенокошения до августа на ключевых участках. Сохранение влажных лугов.',
+  where_to_see: 'Ельня, Освейское озеро, пойма р. Припять',
+  biomass: 0.18, seasons: ['4','5','6','7','8','9'],
+  trend: [{year:1995,count_estimate:1200,source:'НООО БПО'},{year:2010,count_estimate:650,source:'НООО БПО'},{year:2024,count_estimate:400,source:'НООО БПО'}],
+  regions: ['vitebsk','minsk','grodno','brest'],
+});
+
+const kobchik = addSp({
+  group: 'Птицы', habitat: 'meadow',
+  name_ru: 'Кобчик', name_be: 'Кабчык', name_lat: 'Falco vespertinus',
+  category: 'VU', by_category: 'III',
+  description: 'Изящный сокол размером с галку. Самцы — шиферно-серые с рыжей «штанишками», самки рябые. Охотится на крупных насекомых — прямокрылых, стрекоз, жуков. Гнездится колониями в чужих гнёздах — грачей и сорок. Перелётный, зимует в Африке.',
+  fact: 'Кобчик охотится как ласточка — хватает насекомых прямо в воздухе на бреющем полёте над лугами.',
+  threats: ['Деградация пойменных лугов', 'Применение пестицидов (уменьшение насекомых)', 'Уничтожение колоний грачей'],
+  conservation: 'Сохранение лугов. Запрет уничтожения грачиных колоний.',
+  where_to_see: 'Припятский НП, луга Брестской и Гомельской областей',
+  biomass: 0.16, seasons: ['5','6','7','8','9'],
+  trend: [{year:1990,count_estimate:900,source:'БО'},{year:2005,count_estimate:550,source:'БО'},{year:2024,count_estimate:320,source:'АПБ'}],
+  regions: ['brest','gomel','minsk','vitebsk'],
+});
+
+/* ── МЛЕКОПИТАЮЩИЕ (2) ──────────────────────────────────────────────── */
+
+const vyhuhol = addSp({
+  group: 'Млекопитающие', habitat: 'river',
+  name_ru: 'Выхухоль русская', name_be: 'Расамаха расійская', name_lat: 'Desmana moschata',
+  category: 'CR', by_category: 'I',
+  description: 'Один из древнейших зверьков Земли — живой ископаемый. Обитает в старицах, заводях и медленных протоках рек Припятского бассейна. Почти слепа, ориентируется по обонянию и осязанию через вибриссы на хоботке. Выделяет мускусный секрет. Под угрозой исчезновения в Беларуси.',
+  fact: 'Выхухоль существует без изменений более 30 миллионов лет — её предки жили рядом с носорогами и мамонтами.',
+  threats: ['Загрязнение рек', 'Осушение пойм', 'Рыболовные сети', 'Хищники (норка американская)'],
+  conservation: 'Охрана пойменных угодий р. Припять. Борьба с инвазивной норкой американской. Заповедники.',
+  where_to_see: 'Пойма р. Припять (Гомельская и Брестская обл.), Припятский НП',
+  biomass: 0.42, seasons: ['1','2','3','4','5','6','7','8','9','10','11','12'],
+  trend: [{year:1990,count_estimate:1500,source:'НАН'},{year:2000,count_estimate:700,source:'НАН'},{year:2010,count_estimate:280,source:'НАН'},{year:2024,count_estimate:80,source:'IUCN'}],
+  regions: ['gomel','brest'],
+});
+
+const nochnitza = addSp({
+  group: 'Млекопитающие', habitat: 'river',
+  name_ru: 'Ночница прудовая', name_be: 'Начніца сажалкавая', name_lat: 'Myotis dasycneme',
+  category: 'EN', by_category: 'II',
+  description: 'Крупная летучая мышь, охотящаяся над открытой водой. Подхватывает насекомых с поверхности прудов и рек с помощью крыльев или хвостовой перепонки. Зимует в подземельях. Образует небольшие колонии в постройках. Чувствительна к беспокойству зимовок.',
+  fact: 'Ночница прудовая — настоящий рыбак: она «читает» рябь воды ушами, определяя местонахождение добычи под поверхностью.',
+  threats: ['Уничтожение зимовок', 'Загрязнение водоёмов', 'Ветроэнергетика', 'Применение пестицидов'],
+  conservation: 'Охрана зимовок (подземелья, форты). Мониторинг колоний. Сохранение прибрежных водоёмов.',
+  where_to_see: 'Гродненские подземелья, водохранилища Минской обл., Беловежская пуща',
+  biomass: 0.016, seasons: ['5','6','7','8','9'],
+  trend: [{year:2000,count_estimate:600,source:'Bat Conservation'},{year:2015,count_estimate:350,source:'БО'},{year:2024,count_estimate:220,source:'БО'}],
+  regions: ['minsk','grodno','brest','vitebsk'],
+});
+
+/* ── РАСТЕНИЯ (2) ───────────────────────────────────────────────────── */
+
+const yatrish = addSp({
+  group: 'Растения', habitat: 'meadow',
+  name_ru: 'Ятрышник шлемоносный', name_be: 'Ятрышнік шлемавідны', name_lat: 'Orchis militaris',
+  category: 'VU', by_category: 'III',
+  description: 'Редкая наземная орхидея с необычными лилово-розовыми соцветиями, лепестки которых складываются в форму человечка с «руками» и «ногами». Растёт на известняковых лугах и в светлых лесах. Требует симбиоза с почвенными грибами для прорастания семян.',
+  fact: 'Семена ятрышника невесомы — в 1 грамме до 50 000 штук. Но без почвенного гриба-симбионта ни одно не прорастёт.',
+  threats: ['Распашка и застройка лугов', 'Выпас скота', 'Сбор растений'],
+  conservation: 'Охрана мест обитания. Запрет сбора. Создание питомников.',
+  where_to_see: 'Мозырские гряды, Новогрудская возвышенность, меловые склоны р. Сож',
+  biomass: 0.04, seasons: ['5','6'],
+  trend: [{year:1990,count_estimate:3200,source:'НАН'},{year:2010,count_estimate:1800,source:'НАН'},{year:2024,count_estimate:950,source:'НАН'}],
+  regions: ['brest','grodno','minsk','gomel'],
+});
+
+const rosynka = addSp({
+  group: 'Растения', habitat: 'wetland',
+  name_ru: 'Росянка английская', name_be: 'Расіца англійская', name_lat: 'Drosera anglica',
+  category: 'EN', by_category: 'II',
+  description: 'Насекомоядное растение сфагновых болот. Длинные листья-ловушки с липкими железистыми ворсинками ловят и переваривают мух и комаров. Получает азот и фосфор из добычи, компенсируя бедность болотной почвы. Крупнейшая из белорусских росянок.',
+  fact: 'Росянка английская переваривает насекомых за 24–48 часов, выделяя ферменты, аналогичные желудочному соку животных.',
+  threats: ['Осушение верховых болот', 'Торфоразработка', 'Изменение гидрологии'],
+  conservation: 'Сохранение верховых сфагновых болот. Контроль торфоразработок.',
+  where_to_see: 'Ельня, Обстерно, Мох Великий (Витебская обл.)',
+  biomass: 0.008, seasons: ['6','7','8'],
+  trend: [{year:1990,count_estimate:18000,source:'НАН'},{year:2010,count_estimate:9000,source:'НАН'},{year:2024,count_estimate:5200,source:'НАН'}],
+  regions: ['vitebsk','grodno','minsk'],
+});
+
+/* ── НАСЕКОМЫЕ (4) ──────────────────────────────────────────────────── */
+
+const zhuk_olen = addSp({
+  group: 'Насекомые', habitat: 'forest',
+  name_ru: 'Жук-олень', name_be: 'Жук-алень', name_lat: 'Lucanus cervus',
+  category: 'EN', by_category: 'II',
+  description: 'Крупнейший жук Европы: самцы достигают 8 см. «Рога» — гипертрофированные верхние челюсти-мандибулы. Используются в турнирах за самку. Личинка живёт 5–8 лет в гнилой древесине дуба, питаясь разложившейся древесиной. Взрослый жук живёт всего 3–4 недели.',
+  fact: 'Самец жука-оленя в рыцарском поединке захватывает соперника рогами и сбрасывает с ветки — как настоящий турнир средневековых рыцарей.',
+  threats: ['Вырубка старых дубрав', 'Удаление пней и гниющей древесины', 'Уличное освещение (дезориентирует)'],
+  conservation: 'Сохранение старых дубрав и пней. Создание «мёртвой древесины» в парках.',
+  where_to_see: 'Беловежская пуща, Налибокская пуща, Гродненская пуща',
+  biomass: 0.006, seasons: ['6','7','8'],
+  trend: [{year:1990,count_estimate:12000,source:'НАН'},{year:2010,count_estimate:5500,source:'НАН'},{year:2024,count_estimate:2800,source:'НАН'}],
+  regions: ['brest','grodno','minsk'],
+});
+
+const dozorshik = addSp({
+  group: 'Насекомые', habitat: 'wetland',
+  name_ru: 'Дозорщик-повелитель', name_be: 'Дазорца-ўладар', name_lat: 'Anax imperator',
+  category: 'VU', by_category: 'III',
+  description: 'Крупнейшая стрекоза Беларуси с размахом крыльев до 10 см. Самцы патрулируют водоёмы, агрессивно охраняя территорию. Охотится на других стрекоз, бабочек и даже небольших рыб. Личинка — активный хищник, живущий в воде 2–3 года.',
+  fact: 'Дозорщик-повелитель преследует и ловит добычу с точностью до 97% — лучший результат среди всех хищников Земли.',
+  threats: ['Эвтрофикация водоёмов', 'Осушение болот', 'Применение пестицидов'],
+  conservation: 'Охрана водно-болотных угодий. Ограничение применения инсектицидов.',
+  where_to_see: 'Нарочанский НП, Споровское болото, пруды Брестской обл.',
+  biomass: 0.0009, seasons: ['6','7','8','9'],
+  trend: [{year:2000,count_estimate:5000,source:'ЭО'},{year:2015,count_estimate:2800,source:'ЭО'},{year:2024,count_estimate:1600,source:'ЭО'}],
+  regions: ['brest','gomel','grodno','minsk'],
+});
+
+const shmel = addSp({
+  group: 'Насекомые', habitat: 'meadow',
+  name_ru: 'Шмель моховой', name_be: 'Шмель імшысты', name_lat: 'Bombus muscorum',
+  category: 'EN', by_category: 'II',
+  description: 'Рыжевато-жёлтый шмель сырых лугов и болот. Один из немногих видов шмелей, гнездящихся на поверхности — в старых птичьих гнёздах или кустах мха. Важнейший опылитель растений заболоченных угодий. Страдает от потери местообитаний сильнее других шмелей.',
+  fact: 'Шмель моховой — «горячая машина»: перед полётом в холодный день он вибрирует мышцами, разогревая тело до +35°C при температуре воздуха около 0°C.',
+  threats: ['Интенсификация сельского хозяйства', 'Осушение лугов', 'Применение пестицидов', 'Болезни (Nosema)'],
+  conservation: 'Сохранение разнотравных сырых лугов. Запрет инсектицидов на природных территориях.',
+  where_to_see: 'Пойменные луга Полесья, заказник «Ельня», Витебские озёра',
+  biomass: 0.0004, seasons: ['4','5','6','7','8','9'],
+  trend: [{year:1990,count_estimate:50000,source:'ЭО'},{year:2010,count_estimate:18000,source:'ЭО'},{year:2024,count_estimate:7000,source:'ЭО'}],
+  regions: ['vitebsk','minsk','grodno','brest'],
+});
+
+const krasotEl = addSp({
+  group: 'Насекомые', habitat: 'forest',
+  name_ru: 'Красотел пахучий', name_be: 'Прыгажун духмяны', name_lat: 'Calosoma sycophanta',
+  category: 'VU', by_category: 'III',
+  description: 'Охотник за гусеницами: жук поднимается на деревья в погоне за добычей и может съесть до 400 гусениц за сезон. Окраска переливается всеми цветами радуги — синим, зелёным, золотистым. При угрозе выбрызгивает едкую жидкость с резким запахом.',
+  fact: 'Красотел пахучий — сознательный лесник: он специально охотится на видах-вредителях (шелкопряд, непарный шелкопряд), защищая лес от объедания.',
+  threats: ['Применение инсектицидов', 'Вырубка широколиственных лесов', 'Сбор коллекционерами'],
+  conservation: 'Отказ от химических методов борьбы с вредителями. Охрана широколиственных лесов.',
+  where_to_see: 'Беловежская пуща, Налибокская пуща, широколиственные леса Гродненщины',
+  biomass: 0.003, seasons: ['5','6','7','8'],
+  trend: [{year:1990,count_estimate:8000,source:'НАН'},{year:2010,count_estimate:3500,source:'НАН'},{year:2024,count_estimate:1800,source:'НАН'}],
+  regions: ['brest','grodno','minsk','vitebsk'],
+});
+
+/* ── РЫБЫ (3) ───────────────────────────────────────────────────────── */
+
+const forel = addSp({
+  group: 'Рыбы', habitat: 'river',
+  name_ru: 'Форель ручьевая', name_be: 'Стронга ручайная', name_lat: 'Salmo trutta fario',
+  category: 'VU', by_category: 'III',
+  description: 'Пёстрая хищная рыба холодных прозрачных ручьёв и малых рек. Индикатор чистоты воды: погибает при малейшем загрязнении. Требует хорошую аэрацию и чистый гравийный субстрат для нереста. В Беларуси — на южной границе ареала, обитает только в реках Нарочанского бассейна.',
+  fact: 'Форель настолько требовательна к кислороду, что может жить только там, где вода кристально чистая. Там, где есть форель — вода питьевого качества.',
+  threats: ['Загрязнение рек', 'Нагрев воды', 'Браконьерство', 'Мелиорация'],
+  conservation: 'Охрана малых рек. Контроль качества воды. Ограничение рыбалки. Искусственное разведение.',
+  where_to_see: 'Реки Нарочь, Страча, Сервечь (Минская обл.), р. Щара (Гродненская обл.)',
+  biomass: 0.35, seasons: ['1','2','3','4','5','6','7','8','9','10','11','12'],
+  trend: [{year:1990,count_estimate:4200,source:'ВТ'},{year:2005,count_estimate:2100,source:'ВТ'},{year:2024,count_estimate:900,source:'ВТ'}],
+  regions: ['vitebsk','grodno','minsk'],
+});
+
+const bystryanka = addSp({
+  group: 'Рыбы', habitat: 'river',
+  name_ru: 'Быстрянка обыкновенная', name_be: 'Быстранка звычайная', name_lat: 'Alburnoides bipunctatus',
+  category: 'EN', by_category: 'II',
+  description: 'Маленькая серебристая рыбка быстрых чистых рек с выраженным течением. Держится у поверхности стайками, питаясь насекомыми. Чувствительна к загрязнению воды. Один из исчезающих видов пресноводных рыб Беларуси, встречается единично в реках западной части страны.',
+  fact: 'Быстрянка — «наземная» рыба: до 80% её рациона составляют упавшие в воду насекомые — комары, мухи, падёнки.',
+  threats: ['Загрязнение рек', 'Зарегулирование стока', 'Конкуренция с инвазивными видами'],
+  conservation: 'Охрана малых рек с быстрым течением. Мониторинг популяции.',
+  where_to_see: 'Реки Зельвянка, Россь, Нёман (Гродненская обл.)',
+  biomass: 0.018, seasons: ['4','5','6','7','8','9','10'],
+  trend: [{year:1990,count_estimate:15000,source:'НАН'},{year:2010,count_estimate:5000,source:'НАН'},{year:2024,count_estimate:1200,source:'НАН'}],
+  regions: ['grodno','brest','minsk'],
+});
+
+const umbra = addSp({
+  group: 'Рыбы', habitat: 'wetland',
+  name_ru: 'Умбра европейская', name_be: 'Умбра еўрапейская', name_lat: 'Umbra krameri',
+  category: 'CR', by_category: 'I',
+  description: 'Реликтовая рыбка — живой свидетель ледникового периода. Обитает только в медленно текущих водотоках и болотных канавах Полесья. Может переносить высыхание, зарываясь в ил. Дышит атмосферным воздухом при нехватке кислорода. Крупнейшая популяция в Европе — в Припятском полесье.',
+  fact: 'Умбра — одна из немногих рыб, которая пережила все ледниковые периоды, прячась в рефугиях болот. Ей более 5 миллионов лет.',
+  threats: ['Осушение болот', 'Углубление канав', 'Загрязнение воды', 'Вселение хищных рыб'],
+  conservation: 'Охрана болотных водотоков Полесья. Мониторинг популяции. Разведение в неволе.',
+  where_to_see: 'Припятский НП, болота Столинского района (Брестская обл.), пойма Ствиги',
+  biomass: 0.025, seasons: ['1','2','3','4','5','6','7','8','9','10','11','12'],
+  trend: [{year:1990,count_estimate:3500,source:'НАН'},{year:2005,count_estimate:1200,source:'НАН'},{year:2024,count_estimate:300,source:'IUCN'}],
+  regions: ['brest','gomel'],
+});
+
+/* ── ГРИБЫ (2) ──────────────────────────────────────────────────────── */
+
+const felhodon = addSp({
+  group: 'Грибы', habitat: 'conifer',
+  name_ru: 'Феллодон слитый', name_be: 'Фелодон злiты', name_lat: 'Phellodon confluens',
+  category: 'EN', by_category: 'II',
+  description: 'Редкий коралловидный гриб хвойных и смешанных лесов. Несколько плодовых тел часто сливаются в одну неправильную форму, откуда и название. Серовато-белый, с тонкими иглами на нижней поверхности шляпки. Индикатор старых ненарушенных лесов. Занесён в Красные книги 12 стран.',
+  fact: 'Феллодон слитый растёт только в лесах, которым не менее 150 лет — он служит биологическим маркером древних экосистем.',
+  threats: ['Рубки главного пользования', 'Нарушение лесной подстилки', 'Рекреационная нагрузка'],
+  conservation: 'Сохранение старовозрастных лесов. Организация микозаповедников.',
+  where_to_see: 'Беловежская пуща, Налибокская пуща, хвойные леса Витебской обл.',
+  biomass: 0.06, seasons: ['8','9','10'],
+  trend: [{year:1990,count_estimate:200,source:'НАН'},{year:2010,count_estimate:85,source:'НАН'},{year:2024,count_estimate:40,source:'НАН'}],
+  regions: ['vitebsk','minsk','grodno','brest'],
+});
+
+const gidnellum = addSp({
+  group: 'Грибы', habitat: 'forest',
+  name_ru: 'Гиднеллум синеющий', name_be: 'Гiднелум сiнеючы', name_lat: 'Hydnellum caeruleum',
+  category: 'VU', by_category: 'III',
+  description: 'Необычный ежовый гриб с сине-фиолетовым или голубовато-серым молодым плодовым телом, темнеющим до тёмно-коричневого. Растёт в мшистых хвойных лесах, образуя микоризу с соснами и елями. Очень горький на вкус, несъедобен. Исчезает при нарушении лесной экосистемы.',
+  fact: 'Гиднеллум синеющий настолько редок, что находка даже одного плодового тела считается значимым событием для микологов всей Европы.',
+  threats: ['Лесозаготовки', 'Удаление мохового покрова', 'Загрязнение атмосферного воздуха'],
+  conservation: 'Выявление и охрана местонахождений. Сохранение мшистых ельников.',
+  where_to_see: 'Налибокская пуща, Борисовско-Березинский резерват',
+  biomass: 0.04, seasons: ['8','9','10'],
+  trend: [{year:2000,count_estimate:60,source:'НАН'},{year:2015,count_estimate:28,source:'НАН'},{year:2024,count_estimate:15,source:'НАН'}],
+  regions: ['vitebsk','minsk','grodno'],
+});
+
+/* ── МХИ И ЛИШАЙНИКИ (4) ────────────────────────────────────────────── */
+
+const buksbaumiya = addSp({
+  group: 'Мхи и лишайники', habitat: 'conifer',
+  name_ru: 'Буксбаумия безлистная', name_be: 'Буксбаумiя бязлістая', name_lat: 'Buxbaumia aphylla',
+  category: 'EN', by_category: 'II',
+  description: 'Один из самых необычных мхов: почти без листьев, с единственным крупным непропорциональным спорангием на тонкой ножке. Споровая коробочка напоминает панцирь черепахи. Растёт на гниющих пнях хвойных деревьев. Исчезает вместе с исчезновением гниющей древесины в заготовительных лесах.',
+  fact: 'Буксбаумия безлистная проводит почти всю жизнь как невидимая нить микоризы — листовая часть появляется лишь на несколько недель для спороношения.',
+  threats: ['Уборка гнилой древесины', 'Интенсивные рубки', 'Нарушение лесной подстилки'],
+  conservation: 'Сохранение пней и гниющей древесины в лесах. Организация «мёртвого дерева» в заказниках.',
+  where_to_see: 'Ельники Витебской и Минской обл., Беловежская пуща',
+  biomass: 0.001, seasons: ['9','10','11','3','4'],
+  trend: [{year:1990,count_estimate:800,source:'НАН'},{year:2010,count_estimate:320,source:'НАН'},{year:2024,count_estimate:150,source:'НАН'}],
+  regions: ['vitebsk','minsk','grodno','brest'],
+});
+
+const meesiya = addSp({
+  group: 'Мхи и лишайники', habitat: 'wetland',
+  name_ru: 'Меезия трёхгранная', name_be: 'Меезiя трохгранная', name_lat: 'Meesia triquetra',
+  category: 'VU', by_category: 'III',
+  description: 'Болотный мох с характерными трёхгранными листьями, образующий плотные дернины в основаниях сфагновых кочек. Вид-индикатор ненарушенных верховых болот, чувствителен к изменению гидрологического режима. В Беларуси находится на южной границе ареала и встречается крайне редко.',
+  fact: 'Меезия трёхгранная может фиксировать свидетельства климата за последние тысячи лет — учёные читают историю болота по слоям этого мха как по книге.',
+  threats: ['Осушение болот', 'Добыча торфа', 'Изменение уровня грунтовых вод'],
+  conservation: 'Охрана верховых болот. Поддержание высокого уровня воды в болотных комплексах.',
+  where_to_see: 'Ельня (Витебская обл.), Мох Великий, Освейское болото',
+  biomass: 0.002, seasons: ['1','2','3','4','5','6','7','8','9','10','11','12'],
+  trend: [{year:1990,count_estimate:500,source:'НАН'},{year:2010,count_estimate:200,source:'НАН'},{year:2024,count_estimate:90,source:'НАН'}],
+  regions: ['vitebsk','minsk'],
+});
+
+const usnea = addSp({
+  group: 'Мхи и лишайники', habitat: 'conifer',
+  name_ru: 'Уснея длиннейшая', name_be: 'Уснея найдаўжэйшая', name_lat: 'Usnea longissima',
+  category: 'CR', by_category: 'I',
+  description: 'Бородатый лишайник, свисающий с ветвей хвойных деревьев нитями длиной до 3 метров. Требует исключительно чистого воздуха и высокой влажности. Был широко распространён в старых лесах Беларуси, но исчез почти повсеместно из-за загрязнения воздуха и вырубок. Сегодня — в единичных местонахождениях.',
+  fact: 'Уснея длиннейшая растёт со скоростью 1–2 мм в год, а её трёхметровые нити означают столетие жизни. Найти её — значит найти вековой нетронутый лес.',
+  threats: ['Загрязнение воздуха', 'Вырубка старых хвойных лесов', 'Изменение климата'],
+  conservation: 'Строгая охрана мест произрастания. Мониторинг качества воздуха. Охрана старолесий.',
+  where_to_see: 'Налибокская пуща, отдельные участки Витебской обл.',
+  biomass: 0.012, seasons: ['1','2','3','4','5','6','7','8','9','10','11','12'],
+  trend: [{year:1990,count_estimate:120,source:'НАН'},{year:2005,count_estimate:35,source:'НАН'},{year:2024,count_estimate:8,source:'НАН'}],
+  regions: ['vitebsk','grodno'],
+});
+
+const peltigera = addSp({
+  group: 'Мхи и лишайники', habitat: 'forest',
+  name_ru: 'Пельтигера горизонтальная', name_be: 'Пельцiгера гарызантальная', name_lat: 'Peltigera horizontalis',
+  category: 'VU', by_category: 'III',
+  description: 'Крупный листоватый лишайник с горизонтально распластанным слоевищем, вырастающим до 20 см в диаметре. Серо-голубой сверху, с заметными нитями гиф и цианобактерий на нижней поверхности. Растёт на замшелых стволах и основаниях деревьев в старых широколиственных лесах. Фиксирует атмосферный азот.',
+  fact: 'Пельтигера — симбиоз гриба, водорослей и цианобактерий в одном организме. Она единственная из лишайников способна удобрять почву, фиксируя воздушный азот.',
+  threats: ['Вырубка широколиственных лесов', 'Рекреационное вытаптывание', 'Загрязнение воздуха'],
+  conservation: 'Сохранение старых широколиственных лесов. Ограничение рекреационной нагрузки.',
+  where_to_see: 'Беловежская пуща, Налибокская пуща, старые широколиственные леса Гродненщины',
+  biomass: 0.006, seasons: ['1','2','3','4','5','6','7','8','9','10','11','12'],
+  trend: [{year:1990,count_estimate:350,source:'НАН'},{year:2010,count_estimate:140,source:'НАН'},{year:2024,count_estimate:70,source:'НАН'}],
+  regions: ['vitebsk','minsk','grodno','brest'],
+});
+
+db.exec('COMMIT');
+console.log('✓ Виды добавлены');
+console.log(`  Всего видов: ${db.prepare('SELECT COUNT(*) as n FROM rb_species').get().n}`);
+
+/* ════════════════════════════════════════════════════════════════════════
+   БЛОК 2 — ПИЩЕВЫЕ СВЯЗИ
+   ════════════════════════════════════════════════════════════════════════ */
+db.exec('BEGIN');
+
+const links = [
+  // Орлан охотится на лебедей (более активно)
+  [getId('Орлан-белохвост'), getId('Лебедь-шипун'),          0.25],
+  [getId('Орлан-белохвост'), getId('Лебедь-кликун'),         0.20],
+  // Кобчик ест насекомых
+  [kobchik,                  getId('Аполлон'),                0.50],
+  [kobchik,                  getId('Богомол обыкновенный'),   0.30],
+  [kobchik,                  shmel,                           0.50],
+  [kobchik,                  dozorshik,                       0.40],
+  // Вертлявая камышевка ест насекомых болот
+  [kamyshevka,               shmel,                           0.20],
+  [kamyshevka,               dozorshik,                       0.15],
+  // Красотел ест бабочек/жуков
+  [krasotEl,                 getId('Аполлон'),                0.60],
+  [krasotEl,                 getId('Махаон'),                  0.50],
+  [krasotEl,                 zhuk_olen,                       0.30],
+  // Форель ест быстрянку и другую рыбу
+  [forel,                    bystryanka,                      0.80],
+  [forel,                    getId('Хариус европейский'),     0.40],
+  [forel,                    getId('Ручьевая минога'),        0.30],
+  // Умбра — мелкий хищник
+  [umbra,                    bystryanka,                      0.30],
+  // Крупные рыбы едят форель
+  [getId('Сом обыкновенный'), forel,                          0.40],
+  [getId('Выдра речная'),     forel,                          0.60],
+  [getId('Выдра речная'),     bystryanka,                     0.30],
+  // Норка и выдра охотятся на выхухоль
+  [getId('Европейская норка'), vyhuhol,                       0.60],
+  [getId('Выдра речная'),      vyhuhol,                       0.20],
+  // Ночница ест насекомых над водой
+  [nochnitza,                 shmel,                          0.30],
+  [nochnitza,                 dozorshik,                      0.40],
+  // Жук-олень поедает соки деревьев (связь через растения если есть)
+  // Дупель и камышевка — косвенные связи через экосистему
+].filter(([p, q]) => p && q);
+
+links.forEach(([p, q, s]) => {
+  try { insWeb.run(p, q, s); } catch {}
+});
+
+db.exec('COMMIT');
+console.log(`  Пищевых связей добавлено: ${links.length}`);
+console.log(`  Всего пищевых связей: ${db.prepare('SELECT COUNT(*) as n FROM rb_food_web').get().n}`);
+
+/* ════════════════════════════════════════════════════════════════════════
+   БЛОК 3 — КВЕСТЫ (10 новых)
+   ════════════════════════════════════════════════════════════════════════ */
+db.exec('BEGIN');
+
+function addQuest(title, description, speciesNames, xp, badge) {
+  const existing = db.prepare('SELECT id FROM rb_quests WHERE title = ?').get(title);
+  if (existing) { console.log(`  Квест уже существует: ${title}`); return; }
+  const ids = speciesNames.map(n => getId(n)).filter(Boolean);
+  if (ids.length < speciesNames.length) {
+    console.warn(`  Квест "${title}": не найдены виды!`, speciesNames.filter(n => !getId(n)));
+  }
+  db.prepare('INSERT INTO rb_quests (title, description, species_ids, xp_reward, badge_slug) VALUES (?,?,?,?,?)').run(
+    title, description, JSON.stringify(ids), xp, badge
+  );
+}
+
+addQuest(
+  'Птицы болот',
+  'Болота Беларуси — дом для редчайших птиц Европы. Найдите серого журавля, большого подорлика, большого кроншнепа, вертлявую камышевку и дупеля. Узнайте, почему без болот эти виды исчезнут с планеты.',
+  ['Серый журавль', 'Большой подорлик', 'Большой кроншнеп', 'Вертлявая камышевка', 'Дупель'],
+  220, 'quest_bog_birds'
+);
+
+addQuest(
+  'Ночные хищники',
+  'Пока мы спим, лес живёт своей жизнью. Исследуйте тайных обитателей ночи: воробьиного и домового сычей, широкоушку и прудовую ночницу. Узнайте, как эхолокация превращает темноту в охотничьи угодья.',
+  ['Воробьиный сыч', 'Сыч домовый', 'Широкоушка европейская', 'Ночница прудовая'],
+  180, 'quest_night_hunters'
+);
+
+addQuest(
+  'Диковинки Витебщины',
+  'Витебская область — северный форпост Беларуси со своими уникальными видами. Откройте краснозобую казарку, лобелию Дортмана, вертлявую камышевку, форель ручьевую и уснею длиннейшую — виды, которых больше нигде не встретить.',
+  ['Краснозобая казарка', 'Лобелия Дортмана', 'Вертлявая камышевка', 'Форель ручьевая', 'Уснея длиннейшая'],
+  230, 'quest_vitebsk'
+);
+
+addQuest(
+  'Царство грибов',
+  'Мир грибов гораздо больше того, что мы видим. Трюфель, решёточник, спарасис, ёж гриб, феллодон и гиднеллум — это не еда, это живая история леса. Найдите всех шестерых и узнайте, почему грибы — хранители экосистемы.',
+  ['Трюфель летний', 'Решёточник красный', 'Спарасис курчавый (грибная капуста)', 'Ёж гриб (герций)', 'Феллодон слитый', 'Гиднеллум синеющий'],
+  300, 'quest_fungi'
+);
+
+addQuest(
+  'Мир мхов и лишайников',
+  'Мхи и лишайники — первооткрыватели суши, они появились раньше динозавров. Найдите лобарию, кладонию, буксбаумию, меезию, уснею и пельтигеру — шесть хранителей нетронутых лесов и болот Беларуси.',
+  ['Лобария лёгочная', 'Кладония звёздчатая', 'Буксбаумия безлистная', 'Меезия трёхгранная', 'Уснея длиннейшая', 'Пельтигера горизонтальная'],
+  280, 'quest_mosses'
+);
+
+addQuest(
+  'Легенды Полесья',
+  'Полесье — болотный рай, один из последних в Европе. Его населяют легендарные жители: европейская норка, болотная черепаха, альдрованда, выхухоль русская и умбра европейская — реликты, пережившие ледниковые периоды.',
+  ['Европейская норка', 'Черепаха болотная', 'Альдрованда пузырчатая', 'Выхухоль русская', 'Умбра европейская'],
+  350, 'quest_polesye'
+);
+
+addQuest(
+  'Хранители леса',
+  'Лес держится на хищниках. Рысь, бурый медведь, жук-олень, усач альпийский и красотел пахучий — звенья одной цепи. Когда исчезает один хищник, лес начинает умирать. Узнайте, как они связаны между собой.',
+  ['Рысь евразийская', 'Бурый медведь', 'Жук-олень', 'Усач альпийский', 'Красотел пахучий'],
+  250, 'quest_forest_guard'
+);
+
+addQuest(
+  'Тайны реки',
+  'Белорусские реки скрывают живых ископаемых. Выдра, стерлядь, форель, быстрянка и умбра европейская — каждый вид-индикатор показывает, здорова ли река. Найдите их всех и прочтите историю наших вод.',
+  ['Речная выдра', 'Стерлядь', 'Форель ручьевая', 'Быстрянка обыкновенная', 'Умбра европейская'],
+  220, 'quest_river2'
+);
+
+addQuest(
+  'Летающие над водой',
+  'Вода с небесами — место встречи орлана-белохвоста, скопы, двух видов лебедей и дозорщика-повелителя. Все они связаны с водой и исчезнут вместе с ней. Откройте пятёрку хозяев белорусских озёр.',
+  ['Орлан-белохвост', 'Скопа', 'Лебедь-шипун', 'Лебедь-кликун', 'Дозорщик-повелитель'],
+  200, 'quest_water_fliers'
+);
+
+addQuest(
+  'Краса болот',
+  'Болотные растения — хищники, ловушки и редкие орхидеи. Пальчатокоренник, шейхцерия, альдрованда, вертлявая камышевка и росянка английская живут в мире, где каждая капля воды на счету. Исследуйте болото изнутри.',
+  ['Пальчатокоренник мясокрасный', 'Шейхцерия болотная', 'Альдрованда пузырчатая', 'Вертлявая камышевка', 'Росянка английская'],
+  230, 'quest_bog_beauty'
+);
+
+db.exec('COMMIT');
+console.log('✓ Квесты добавлены');
+console.log(`  Всего квестов: ${db.prepare('SELECT COUNT(*) as n FROM rb_quests').get().n}`);
+console.log('\n✅ seed-red-book-phase2.js завершён!');
+console.log(`   Видов: ${db.prepare('SELECT COUNT(*) as n FROM rb_species').get().n}`);
+console.log(`   Квестов: ${db.prepare('SELECT COUNT(*) as n FROM rb_quests').get().n}`);
+console.log(`   Пищевых связей: ${db.prepare('SELECT COUNT(*) as n FROM rb_food_web').get().n}`);
diff --git a/backend/src/db/seed-red-book.js b/backend/src/db/seed-red-book.js
new file mode 100644
index 0000000..fdf71dc
--- /dev/null
+++ b/backend/src/db/seed-red-book.js
@@ -0,0 +1,807 @@
+/**
+ * Seed: Красная книга Республики Беларусь
+ * 80 видов, 8 групп, пищевая сеть, популяционные тренды
+ * Запуск: node src/db/seed-red-book.js  (из папки backend/)
+ */
+require('./migrate');
+const db = require('./db');
+
+/* ══════════════════════════════════════════════════════════════════════════
+   GUARD — пропустить если уже засеяно
+   ══════════════════════════════════════════════════════════════════════════ */
+const already = db.prepare("SELECT COUNT(*) as n FROM rb_species").get();
+if (already.n > 0) {
+  console.log(`Красная книга: уже засеяно ${already.n} видов, пропускаем.`);
+  process.exit(0);
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   ГРУППЫ
+   ══════════════════════════════════════════════════════════════════════════ */
+const insGroup = db.prepare('INSERT INTO rb_groups (name_ru, name_lat, icon, color) VALUES (?,?,?,?)');
+const groups = {};
+[
+  ['Птицы',           'Aves',            '🦅', '#0369a1'],
+  ['Млекопитающие',   'Mammalia',        '🦌', '#92400e'],
+  ['Растения',        'Plantae',         '🌿', '#166534'],
+  ['Насекомые',       'Insecta',         '🦋', '#b45309'],
+  ['Рыбы',            'Pisces',          '🐟', '#0e7490'],
+  ['Рептилии и амфибии','Reptilia/Amphibia','🦎','#4d7c0f'],
+  ['Грибы',           'Fungi',           '🍄', '#7c3aed'],
+  ['Мхи и лишайники', 'Bryophyta',       '🌱', '#065f46'],
+].forEach(([name_ru, name_lat, icon, color]) => {
+  const id = insGroup.run(name_ru, name_lat, icon, color).lastInsertRowid;
+  groups[name_ru] = id;
+});
+console.log('✓ Группы');
+
+/* ══════════════════════════════════════════════════════════════════════════
+   БИОМЫ
+   ══════════════════════════════════════════════════════════════════════════ */
+const insHabitat = db.prepare('INSERT INTO rb_habitats (name, type, description, sound_file) VALUES (?,?,?,?)');
+const habitats = {};
+[
+  ['Широколиственный лес', 'forest',   'Дубравы и грабово-дубовые леса Полесья и центральной Беларуси', 'forest.mp3'],
+  ['Хвойный лес',          'conifer',  'Сосновые и еловые боры, тайга северной Беларуси',               'conifer.mp3'],
+  ['Болото',               'wetland',  'Верховые и низинные болота, крупнейшие в Европе',                'wetland.mp3'],
+  ['Река и озеро',         'river',    'Пресноводные водоёмы: Припять, Нёман, Западная Двина',          'river.mp3'],
+  ['Луг и поле',           'meadow',   'Заливные и суходольные луга, агроландшафты',                     'meadow.mp3'],
+].forEach(([name, type, description, sound_file]) => {
+  const id = insHabitat.run(name, type, description, sound_file).lastInsertRowid;
+  habitats[name] = id;
+});
+console.log('✓ Биомы');
+
+/* ══════════════════════════════════════════════════════════════════════════
+   ВИДЫ
+   ══════════════════════════════════════════════════════════════════════════ */
+const insSp = db.prepare(`
+  INSERT INTO rb_species
+    (group_id, habitat_id, name_ru, name_be, name_lat, category, by_category,
+     description, interesting_fact, threats, conservation, where_to_see,
+     photo_url, model_type, population_trend, biomass_kg)
+  VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)
+`);
+const insReg = db.prepare('INSERT OR IGNORE INTO rb_species_regions (species_id, region_code) VALUES (?,?)');
+const insPop = db.prepare('INSERT INTO rb_population_data (species_id, year, count_estimate, source) VALUES (?,?,?,?)');
+
+function sp(data) {
+  const id = insSp.run(
+    groups[data.group], habitats[data.habitat] || null,
+    data.name_ru, data.name_be || '', data.name_lat || '',
+    data.category, data.by_category || 'III',
+    data.description || '', data.fact || '',
+    JSON.stringify(data.threats || []),
+    data.conservation || '', data.where_to_see || '',
+    data.photo || '', data.model || 'silhouette',
+    JSON.stringify(data.trend || []),
+    data.biomass || 0
+  ).lastInsertRowid;
+  (data.regions || []).forEach(r => insReg.run(id, r));
+  (data.popdata || []).forEach(([year, count, src]) => insPop.run(id, year, count, src || 'КК РБ'));
+  return id;
+}
+
+const ids = {};
+
+db.exec('BEGIN');
+try { // species block
+
+/* ── ПТИЦЫ ─────────────────────────────────────────────────────────────── */
+
+ids.orlan = sp({
+  group: 'Птицы', habitat: 'Река и озеро',
+  name_ru: 'Орлан-белохвост', name_be: 'Арлан-белахвост', name_lat: 'Haliaeetus albicilla',
+  category: 'NT', by_category: 'III',
+  description: 'Крупнейший хищник среди белорусских орлиных. Размах крыльев достигает 240 см. Гнездится у крупных водоёмов, охотится на рыбу и уток. Пара занимает одно гнездо десятилетиями, достраивая его каждый год — масса гнезда может превышать тонну.',
+  fact: 'Орлан развивает скорость пикирования до 100 км/ч. Гнездо одной пары в Беловежской пуще весило 600 кг.',
+  threats: ['Беспокойство у гнёзд', 'Отравление свинцом из охотничьей дроби', 'Вырубка леса у водоёмов'],
+  conservation: 'Охраняется в заповедниках. Программа мониторинга гнёзд. Запрет охоты.',
+  where_to_see: 'НП «Припятский», НП «Браславские озёра», Беловежская пуща',
+  model: 'procedural', biomass: 5.5,
+  regions: ['brest','gomel','vitebsk','grodno','minsk','mogilev'],
+  popdata: [[1990,150,'КК РБ 1993'],[2000,200,'КК РБ 2004'],[2010,280,'КК РБ 2015'],[2024,350,'Мониторинг 2024']],
+  trend: [{year:1990,count:150},{year:2000,count:200},{year:2010,count:280},{year:2024,count:350}],
+});
+
+ids.chorny_aist = sp({
+  group: 'Птицы', habitat: 'Широколиственный лес',
+  name_ru: 'Чёрный аист', name_be: 'Чорны бусел', name_lat: 'Ciconia nigra',
+  category: 'NT', by_category: 'III',
+  description: 'В отличие от белого аиста, чёрный предпочитает глухие леса с ручьями и реками. Оперение с зелёным и пурпурным металлическим блеском. Зимует в Африке южнее Сахары. Чрезвычайно осторожен — при беспокойстве бросает гнездо.',
+  fact: 'Чёрный аист преодолевает до 10 000 км во время миграции. В Беларуси гнездится около 900 пар.',
+  threats: ['Вырубка старовозрастных лесов', 'Осушение болот', 'Беспокойство у гнёзд'],
+  conservation: 'Охраняемые зоны вокруг гнёзд радиусом 200 м. Сохранение старовозрастных деревьев.',
+  where_to_see: 'Беловежская пуща, НП «Припятский», ПЗ «Налибокский»',
+  model: 'procedural', biomass: 3.0,
+  regions: ['brest','gomel','grodno','minsk','vitebsk'],
+  popdata: [[1990,600,'КК РБ 1993'],[2005,800,'КК РБ 2004'],[2015,850,'КК РБ 2015'],[2024,920,'Мониторинг 2024']],
+  trend: [{year:1990,count:600},{year:2005,count:800},{year:2015,count:850},{year:2024,count:920}],
+});
+
+ids.skopa = sp({
+  group: 'Птицы', habitat: 'Река и озеро',
+  name_ru: 'Скопа', name_be: 'Скапа', name_lat: 'Pandion haliaetus',
+  category: 'VU', by_category: 'II',
+  description: 'Уникальный хищник, питающийся исключительно рыбой. Ныряет в воду на глубину до 1 м. Пальцы покрыты шипами для удержания скользкой добычи. Строит гнёзда на вершинах сухих деревьев или опорах ЛЭП.',
+  fact: 'Скопа — единственная хищная птица мира, охотящаяся только на рыбу и обитающая на всех континентах кроме Антарктиды.',
+  threats: ['Деградация рыбных ресурсов', 'Беспокойство у гнёзд', 'Гибель на ЛЭП'],
+  conservation: 'Установка искусственных гнездовых платформ. Охранные зоны у гнёзд.',
+  where_to_see: 'Браславские озёра, НП «Нарочанский», озёра Витебской области',
+  model: 'procedural', biomass: 1.8,
+  regions: ['vitebsk','minsk','grodno','brest'],
+  popdata: [[1990,50,'КК РБ 1993'],[2005,70,'КК РБ 2004'],[2015,90,'КК РБ 2015'],[2024,110,'Мониторинг 2024']],
+  trend: [{year:1990,count:50},{year:2005,count:70},{year:2015,count:90},{year:2024,count:110}],
+});
+
+ids.dergach = sp({
+  group: 'Птицы', habitat: 'Луг и поле',
+  name_ru: 'Коростель', name_be: 'Дзяргач', name_lat: 'Crex crex',
+  category: 'VU', by_category: 'III',
+  description: 'Скрытная птица влажных лугов. Слышать его легко — самец кричит «дёрг-дёрг» всю ночь, но увидеть почти невозможно. Прилетает поздно весной из Африки. Численность резко падает из-за раннего сенокоса.',
+  fact: 'Коростель бежит быстрее, чем летит. Его крик слышен за 1,5 км в тихую ночь.',
+  threats: ['Ранний механизированный сенокос', 'Осушение лугов', 'Хищники'],
+  conservation: 'Рекомендации по срокам сенокоса (после 1 августа). Сохранение пойменных лугов.',
+  where_to_see: 'Пойма Припяти, Нарочанский НП, луга Брестской области',
+  biomass: 0.15,
+  regions: ['brest','gomel','grodno','minsk','vitebsk','mogilev'],
+  popdata: [[1990,5000,'КК РБ 1993'],[2005,3500,'КК РБ 2004'],[2015,2800,'КК РБ 2015'],[2024,2200,'Мониторинг 2024']],
+  trend: [{year:1990,count:5000},{year:2005,count:3500},{year:2015,count:2800},{year:2024,count:2200}],
+});
+
+ids.zhuravl = sp({
+  group: 'Птицы', habitat: 'Болото',
+  name_ru: 'Серый журавль', name_be: 'Шэры жураўль', name_lat: 'Grus grus',
+  category: 'NT', by_category: 'IV',
+  description: 'Символ белорусских болот. Пары создаются на всю жизнь. Весной и осенью собирается на полях в стаи до нескольких тысяч птиц. Токование — один из самых красивых ритуалов среди птиц: прыжки, взмахи крыльями, трубный крик.',
+  fact: 'Журавль живёт до 25 лет в дикой природе. Беларусь — один из главных «журавлиных» регионов Европы с населением ~20 000 пар.',
+  threats: ['Осушение болот', 'Беспокойство в период гнездования'],
+  conservation: 'Сохранение болотных массивов. Охраняемые территории на токовищах.',
+  where_to_see: 'НП «Припятский», Ельня, Освейское болото',
+  model: 'procedural', biomass: 5.0,
+  regions: ['vitebsk','minsk','gomel','brest','grodno','mogilev'],
+  trend: [{year:1990,count:15000},{year:2010,count:18000},{year:2024,count:20000}],
+});
+
+ids.zmeeyed = sp({
+  group: 'Птицы', habitat: 'Широколиственный лес',
+  name_ru: 'Змееяд', name_be: 'Змеяед', name_lat: 'Circaetus gallicus',
+  category: 'EN', by_category: 'II',
+  description: 'Специализированный охотник на рептилий. Питается почти исключительно змеями, в том числе гадюками. Иммунитет к яду позволяет заглатывать змею живой. Редчайший в Беларуси — гнездятся единицы пар.',
+  fact: 'Змееяд способен заглотить гадюку длиной 1 м. В Беларуси гнездится не более 15–20 пар.',
+  threats: ['Вырубка старых лесов', 'Снижение численности рептилий', 'Беспокойство'],
+  conservation: 'Охрана известных гнёзд. Мониторинг численности.',
+  where_to_see: 'ПЗ «Полесский», Беловежская пуща',
+  biomass: 1.9,
+  regions: ['brest','gomel'],
+  popdata: [[2000,12,'КК РБ 2004'],[2015,15,'КК РБ 2015'],[2024,18,'Мониторинг 2024']],
+  trend: [{year:2000,count:12},{year:2015,count:15},{year:2024,count:18}],
+});
+
+ids.vorobiny_sych = sp({
+  group: 'Птицы', habitat: 'Хвойный лес',
+  name_ru: 'Воробьиный сыч', name_be: 'Верабіны сычык', name_lat: 'Glaucidium passerinum',
+  category: 'VU', by_category: 'III',
+  description: 'Самая маленькая сова Европы — размером с дрозда. Активна как днём, так и ночью. Делает запасы пищи в дуплах на зиму. Голос — монотонный свист, слышный далеко в лесу.',
+  fact: 'Несмотря на размер с воробья, воробьиный сыч охотится на добычу крупнее себя — полёвок и мелких птиц.',
+  threats: ['Вырубка старых ельников', 'Исчезновение дупел'],
+  conservation: 'Сохранение старовозрастных ельников. Вывешивание искусственных дупел.',
+  where_to_see: 'Налибокская пуща, Беловежская пуща, Ельнянский заказник',
+  biomass: 0.08,
+  regions: ['grodno','vitebsk','minsk'],
+});
+
+ids.krasnozobaya_kazarka = sp({
+  group: 'Птицы', habitat: 'Река и озеро',
+  name_ru: 'Краснозобая казарка', name_be: 'Чырванашыйная казарка', name_lat: 'Branta ruficollis',
+  category: 'EN', by_category: 'II',
+  description: 'Одна из самых красивых арктических гусей. В Беларуси встречается только во время миграций — зимует на Чёрном море. Численность катастрофически сокращается из-за охоты на зимовках.',
+  fact: 'Краснозобая казарка гнездится исключительно в тундре Западной Сибири. Беларусь — транзитный коридор миграции.',
+  threats: ['Охота на зимовках', 'Изменение климата', 'Беспокойство на миграционных стоянках'],
+  conservation: 'Запрет охоты. Охрана мест остановок на миграции.',
+  where_to_see: 'Полесские водохранилища, озёра Витебщины (пролёт)',
+  biomass: 1.5,
+  regions: ['gomel','brest','vitebsk'],
+});
+
+ids.filin = sp({
+  group: 'Птицы', habitat: 'Хвойный лес',
+  name_ru: 'Филин', name_be: 'Пугач', name_lat: 'Bubo bubo',
+  category: 'VU', by_category: 'II',
+  description: 'Крупнейшая сова планеты. Ночной охотник, способный атаковать добычу весом до 3 кг. Охотничий участок пары — до 80 км². Низкое токование самца слышно за 4 км в тихую ночь.',
+  fact: 'Филин — единственная птица, которая регулярно охотится на других хищников: ловит ястребов и даже молодых орланов.',
+  threats: ['Фактор беспокойства', 'Гибель на ЛЭП', 'Оскудение кормовой базы'],
+  conservation: 'Охрана гнёзд. Изоляция ЛЭП. Мониторинг популяции.',
+  where_to_see: 'Беловежская пуща, ПЗ «Налибокский», НП «Припятский»',
+  model: 'procedural', biomass: 2.7,
+  regions: ['brest','grodno','gomel','minsk'],
+  trend: [{year:1990,count:200},{year:2010,count:250},{year:2024,count:280}],
+});
+
+ids.zhuravl_seryi2 = sp({
+  group: 'Птицы', habitat: 'Болото',
+  name_ru: 'Большой подорлик', name_be: 'Вялікі арол-крычун', name_lat: 'Clanga clanga',
+  category: 'EN', by_category: 'II',
+  description: 'Один из самых редких орлов Европы. Гнездится в старых лиственных лесах рядом с болотами и поймами. Питается амфибиями, мышевидными грызунами. Особенно уязвим из-за низкой плодовитости — одно яйцо в кладке.',
+  fact: 'В мире гнездится менее 10 000 пар большого подорлика. Беларусь — один из ключевых регионов гнездования в Европе.',
+  threats: ['Осушение болот и пойм', 'Вырубка пойменных лесов', 'Беспокойство'],
+  conservation: 'Охрана гнёзд. Сохранение болотных массивов.',
+  where_to_see: 'НП «Припятский», Полесский радиационно-экологический заповедник',
+  biomass: 2.0,
+  regions: ['gomel','brest','minsk'],
+  popdata: [[2000,80,'КК РБ 2004'],[2015,90,'КК РБ 2015'],[2024,100,'Мониторинг 2024']],
+  trend: [{year:2000,count:80},{year:2015,count:90},{year:2024,count:100}],
+});
+
+/* ── МЛЕКОПИТАЮЩИЕ ──────────────────────────────────────────────────────── */
+
+ids.zubr = sp({
+  group: 'Млекопитающие', habitat: 'Широколиственный лес',
+  name_ru: 'Зубр европейский', name_be: 'Зубр', name_lat: 'Bison bonasus',
+  category: 'VU', by_category: 'III',
+  description: 'Крупнейшее наземное млекопитающее Европы. Масса самца достигает 920 кг при высоте в холке 188 см. Вид был полностью истреблён в дикой природе к 1927 году — всё нынешнее поголовье (около 7000 особей в мире) происходит от 12 зубров из зоопарков. Беларусь сыграла ключевую роль в восстановлении вида.',
+  fact: 'Зубр может прыгнуть в высоту до 2 м. Беловежская пуща — колыбель восстановления этого вида.',
+  threats: ['Инбридинг из-за малой генетической базы', 'Болезни', 'Браконьерство'],
+  conservation: 'Беловежская пуща — ключевой центр разведения. Программы реинтродукции в Европе.',
+  where_to_see: 'Беловежская пуща (основная популяция), Налибокская пуща',
+  model: 'procedural', biomass: 650,
+  regions: ['brest','grodno','minsk','vitebsk'],
+  popdata: [[1927,0,'Летопись'],[1960,150,'КК РБ'],[1990,850,'КК РБ 1993'],[2010,1500,'КК РБ 2015'],[2024,2000,'Мониторинг 2024']],
+  trend: [{year:1927,count:0},{year:1960,count:150},{year:1990,count:850},{year:2010,count:1500},{year:2024,count:2000}],
+});
+
+ids.rys = sp({
+  group: 'Млекопитающие', habitat: 'Хвойный лес',
+  name_ru: 'Рысь евразийская', name_be: 'Рысь', name_lat: 'Lynx lynx',
+  category: 'NT', by_category: 'III',
+  description: 'Крупнейший кошачий хищник Европы. Ведёт одиночный ночной образ жизни. Охотится главным образом на косуль и зайцев, реже на других оленей. Огромные лапы работают как снегоступы — рысь не проваливается в снег глубиной до 50 см.',
+  fact: 'Рысь может прыгнуть на расстояние 7 м. Она единственная крупная кошка, живущая севернее 60° с.ш.',
+  threats: ['Браконьерство', 'Фрагментация лесных массивов', 'Снижение кормовой базы'],
+  conservation: 'Полный запрет охоты. Охрана крупных лесных массивов. GPS-мониторинг.',
+  where_to_see: 'Налибокская пуща, Беловежская пуща, Освейский заказник',
+  model: 'procedural', biomass: 22,
+  regions: ['grodno','minsk','vitebsk','brest'],
+  popdata: [[1990,350,'КК РБ 1993'],[2005,500,'КК РБ 2004'],[2015,650,'КК РБ 2015'],[2024,700,'Мониторинг 2024']],
+  trend: [{year:1990,count:350},{year:2005,count:500},{year:2015,count:650},{year:2024,count:700}],
+});
+
+ids.medved = sp({
+  group: 'Млекопитающие', habitat: 'Хвойный лес',
+  name_ru: 'Бурый медведь', name_be: 'Буры мядзведзь', name_lat: 'Ursus arctos',
+  category: 'NT', by_category: 'III',
+  description: 'Крупнейший хищник фауны Беларуси. Всеяден — рацион на 80% состоит из растительной пищи. Залегает в берлогу с ноября по март. В Беларуси обитает на северо-востоке, сохранились лишь периферийные популяции.',
+  fact: 'Медведь чует запах еды с расстояния 20 км. Самка рожает медвежат в берлоге прямо в январе, весящих всего 500 г.',
+  threats: ['Браконьерство', 'Фрагментация лесов', 'Деградация кормовой базы'],
+  conservation: 'Запрет охоты. Охрана берлог. Мониторинг численности.',
+  where_to_see: 'Полоцкий район Витебской области, Освейский заказник',
+  model: 'procedural', biomass: 180,
+  regions: ['vitebsk','mogilev'],
+  popdata: [[1990,80,'КК РБ 1993'],[2005,70,'КК РБ 2004'],[2015,65,'КК РБ 2015'],[2024,60,'Мониторинг 2024']],
+  trend: [{year:1990,count:80},{year:2005,count:70},{year:2015,count:65},{year:2024,count:60}],
+});
+
+ids.norka = sp({
+  group: 'Млекопитающие', habitat: 'Река и озеро',
+  name_ru: 'Европейская норка', name_be: 'Еўрапейская норка', name_lat: 'Mustela lutreola',
+  category: 'CR', by_category: 'I',
+  description: 'Один из самых редких хищников Европы. Конкурентно вытеснена завезённой американской норкой. Держится у небольших рек с захламлёнными берегами. Отличается от американской норкой белым пятном на верхней губе.',
+  fact: 'Европейская норка занесена в Красную книгу МСОП как находящаяся под критической угрозой исчезновения. В Беларуси обитает менее 500 особей.',
+  threats: ['Конкуренция с американской норкой', 'Охота/отлов', 'Деградация береговой растительности'],
+  conservation: 'Программа разведения в неволе. Отлов и стерилизация американской норки. Реинтродукция.',
+  where_to_see: 'Полесье, бассейн Немана',
+  biomass: 0.6,
+  regions: ['brest','gomel','grodno'],
+  popdata: [[1990,2000,'КК РБ 1993'],[2005,800,'КК РБ 2004'],[2015,400,'КК РБ 2015'],[2024,300,'Мониторинг 2024']],
+  trend: [{year:1990,count:2000},{year:2005,count:800},{year:2015,count:400},{year:2024,count:300}],
+});
+
+ids.vydra = sp({
+  group: 'Млекопитающие', habitat: 'Река и озеро',
+  name_ru: 'Речная выдра', name_be: 'Выдра', name_lat: 'Lutra lutra',
+  category: 'NT', by_category: 'III',
+  description: 'Полуводный хищник семейства куньих. Мастер плавания — способна задерживать дыхание на 4 минуты. Поедает рыбу, раков, лягушек. Индикатор чистоты водоёмов: там, где живёт выдра, вода чистая.',
+  fact: 'Выдра скользит по снегу и льду на брюхе, развивая скорость до 25 км/ч. Каждый день ей нужно съесть 15% своего веса.',
+  threats: ['Загрязнение водоёмов', 'Браконьерство', 'Вылов в рыболовные снасти'],
+  conservation: 'Охрана водоохранных зон. Запрет охоты. Очистка водоёмов.',
+  where_to_see: 'Реки по всей Беларуси, НП «Припятский»',
+  biomass: 9,
+  regions: ['brest','gomel','grodno','minsk','vitebsk','mogilev'],
+  trend: [{year:1990,count:2500},{year:2010,count:3000},{year:2024,count:3200}],
+});
+
+ids.bober = sp({
+  group: 'Млекопитающие', habitat: 'Река и озеро',
+  name_ru: 'Речной бобёр', name_be: 'Рачны бабёр', name_lat: 'Castor fiber',
+  category: 'LC', by_category: 'IV',
+  description: 'Крупнейший грызун Беларуси. Инженер экосистем: строит плотины, создаёт водоёмы, меняет ландшафт. Был истреблён к XIX веку и успешно реинтродуцирован. Сейчас численность в Беларуси — одна из крупнейших в Европе.',
+  fact: 'Бобёр — природный мелиоратор: его плотины повышают уровень грунтовых вод, создают новые биотопы для других видов.',
+  threats: ['Охота', 'Уничтожение прибрежной растительности'],
+  conservation: 'Регулирование охоты. Охрана пойменных лесов.',
+  where_to_see: 'Повсеместно у рек и каналов Беларуси',
+  biomass: 25,
+  regions: ['brest','gomel','grodno','minsk','vitebsk','mogilev'],
+  trend: [{year:1960,count:1000},{year:1990,count:20000},{year:2010,count:50000},{year:2024,count:60000}],
+});
+
+ids.zubatka = sp({
+  group: 'Млекопитающие', habitat: 'Широколиственный лес',
+  name_ru: 'Соня лесная', name_be: 'Лясная соня', name_lat: 'Dryomys nitedula',
+  category: 'VU', by_category: 'III',
+  description: 'Небольшой ночной грызун смешанных и лиственных лесов. Спит 7–8 месяцев в году — дольше всех млекопитающих Беларуси. Гнездо строит в дуплах или развилках ветвей на высоте 2–5 м.',
+  fact: 'Перед зимней спячкой соня увеличивает массу тела вдвое, накапливая жир. Температура тела во сне падает до 1°C.',
+  threats: ['Вырубка лиственных лесов', 'Снижение урожая орехов и желудей'],
+  conservation: 'Охрана старолесий. Вывешивание дуплянок.',
+  where_to_see: 'Беловежская пуща, Налибокская пуща',
+  biomass: 0.03,
+  regions: ['brest','grodno','minsk'],
+});
+
+ids.kosulya = sp({
+  group: 'Млекопитающие', habitat: 'Широколиственный лес',
+  name_ru: 'Косуля европейская', name_be: 'Еўрапейская казуля', name_lat: 'Capreolus capreolus',
+  category: 'LC', by_category: 'IV',
+  description: 'Самый распространённый олень Беларуси. Важнейший элемент пищевой цепи — основная добыча волка, рыси и лисы. Рожки самец сбрасывает ежегодно в ноябре. Летом держится одиночно, зимой образует небольшие группы.',
+  fact: 'Косуля — чемпион среди оленей по скорости: развивает до 60 км/ч. Рогатый самец защищает территорию площадью до 60 га.',
+  threats: ['Интенсивная охота', 'Браконьерство', 'Хищники'],
+  conservation: 'Регулирование охотничьей нагрузки. Мониторинг численности.',
+  where_to_see: 'Лесные массивы по всей Беларуси',
+  model: 'procedural', biomass: 25,
+  regions: ['brest','gomel','grodno','minsk','vitebsk','mogilev'],
+  trend: [{year:1990,count:80000},{year:2010,count:100000},{year:2024,count:110000}],
+});
+
+ids.volk = sp({
+  group: 'Млекопитающие', habitat: 'Хвойный лес',
+  name_ru: 'Волк', name_be: 'Воўк', name_lat: 'Canis lupus',
+  category: 'LC', by_category: 'IV',
+  description: 'Крупнейший хищник семейства псовых. Живёт стаями 5–12 особей с чёткой иерархией. Регулирует численность копытных, оздоровляя их популяции. В Беларуси отношение к волку противоречивое — он и символ дикой природы, и угроза для скота.',
+  fact: 'Волк за сутки способен пробежать до 70 км. Воя стаи достаточно, чтобы пометить территорию площадью в сотни км².',
+  threats: ['Истребление как вредителя', 'Фрагментация ареала'],
+  conservation: 'Мониторинг. Компенсации за ущерб скоту.',
+  where_to_see: 'Леса по всей Беларуси',
+  model: 'procedural', biomass: 40,
+  regions: ['brest','gomel','grodno','minsk','vitebsk','mogilev'],
+  trend: [{year:1990,count:1800},{year:2005,count:1500},{year:2015,count:1700},{year:2024,count:2000}],
+});
+
+/* ── РАСТЕНИЯ ────────────────────────────────────────────────────────────── */
+
+ids.venerina = sp({
+  group: 'Растения', habitat: 'Широколиственный лес',
+  name_ru: 'Венерин башмачок настоящий', name_be: 'Венерын чаравічак', name_lat: 'Cypripedium calceolus',
+  category: 'EN', by_category: 'II',
+  description: 'Красивейшая дикая орхидея Беларуси. Цветок напоминает туфельку. Растёт в тенистых лиственных лесах. Живёт до 100 лет, но впервые цветёт только в 15–17 лет. Опыляется только мелкими пчёлами рода Andrena.',
+  fact: 'Венерин башмачок — самая долгоживущая травянистая орхидея. Одно растение в Германии было документально прослежено 100 лет на одном месте.',
+  threats: ['Незаконный сбор', 'Вырубка лесов', 'Уплотнение почвы', 'Зарастание кустарником'],
+  conservation: 'Охрана местонахождений. Культивирование в ботанических садах. Запрет сбора.',
+  where_to_see: 'Беловежская пуща (ур. Новый Двор), Налибокская пуща',
+  biomass: 0.05,
+  regions: ['brest','grodno','minsk','vitebsk'],
+  popdata: [[1990,5000,'КК РБ 1993'],[2005,3000,'КК РБ 2004'],[2015,2000,'КК РБ 2015'],[2024,1800,'Мониторинг 2024']],
+  trend: [{year:1990,count:5000},{year:2005,count:3000},{year:2015,count:2000},{year:2024,count:1800}],
+});
+
+ids.vodyanoy_oreh = sp({
+  group: 'Растения', habitat: 'Река и озеро',
+  name_ru: 'Водяной орех плавающий', name_be: 'Плывучы вадзяны арэх', name_lat: 'Trapa natans',
+  category: 'CR', by_category: 'I',
+  description: 'Реликт третичной флоры, живший на Земле ещё 100 миллионов лет назад. Плавающие листья образуют красивую розетку. Плоды съедобны, богаты крахмалом. Сохранился лишь в нескольких озёрах Полесья.',
+  fact: 'Водяной орех пережил динозавров. Его плоды с четырьмя «рогами» служили пищей людям ещё в каменном веке.',
+  threats: ['Загрязнение и эвтрофикация озёр', 'Колебания уровня воды', 'Конкуренция с другими водными растениями'],
+  conservation: 'Охрана озёр. Ограничение хозяйственной деятельности. Культивирование.',
+  where_to_see: 'Оз. Червоное (Брестская обл.), оз. Белое (Полесье)',
+  biomass: 0.02,
+  regions: ['brest','gomel'],
+  popdata: [[1990,15000,'КК РБ 1993'],[2005,8000,'КК РБ 2004'],[2015,4000,'КК РБ 2015'],[2024,2500,'Мониторинг 2024']],
+  trend: [{year:1990,count:15000},{year:2005,count:8000},{year:2015,count:4000},{year:2024,count:2500}],
+});
+
+ids.palchatokorenik = sp({
+  group: 'Растения', habitat: 'Болото',
+  name_ru: 'Пальчатокоренник мясокрасный', name_be: 'Мяснякраснаты пальчатакарэнік', name_lat: 'Dactylorhiza incarnata',
+  category: 'VU', by_category: 'III',
+  description: 'Болотная орхидея с плотным колосом розово-лиловых цветков. Растёт на низинных болотах и заболоченных лугах. Микоризный гриб необходим для прорастания семян — без него орхидея не может развиться.',
+  fact: 'Семена орхидей настолько малы (0,002 мм), что видны только под микроскопом. В одной коробочке содержится до 10 000 семян.',
+  threats: ['Осушение болот', 'Зарастание кустарником', 'Выпас скота'],
+  conservation: 'Охрана болотных массивов. Запрет мелиорации.',
+  where_to_see: 'Полесье, Налибокская пуща, Осиповичский район',
+  biomass: 0.03,
+  regions: ['brest','gomel','grodno','minsk'],
+});
+
+ids.molochai = sp({
+  group: 'Растения', habitat: 'Луг и поле',
+  name_ru: 'Прострел луговой', name_be: 'Сонца-трава', name_lat: 'Pulsatilla pratensis',
+  category: 'VU', by_category: 'III',
+  description: 'Один из первых весенних цветков. Тёмно-фиолетовые бокаловидные цветки появляются ещё при снеге. Покрыт шелковистыми волосками — защита от холода. Сильно сократился из-за сбора на букеты и распашки лугов.',
+  fact: 'Прострел — символ весны в Беларуси. Второе название «сон-трава» — легенда гласит, что заснувший рядом с ним видит вещие сны.',
+  threats: ['Сбор букетов', 'Распашка луговин', 'Сенокос до плодоношения'],
+  conservation: 'Запрет сбора. Охрана луговых заказников.',
+  where_to_see: 'Сосновые боры, остепнённые луга по всей Беларуси',
+  biomass: 0.01,
+  regions: ['brest','gomel','grodno','minsk','vitebsk','mogilev'],
+});
+
+ids.lobelia = sp({
+  group: 'Растения', habitat: 'Река и озеро',
+  name_ru: 'Лобелия Дортмана', name_be: 'Лобелія Дортмана', name_lat: 'Lobelia dortmanna',
+  category: 'EN', by_category: 'II',
+  description: 'Водное растение олиготрофных озёр. Растёт на песчаном дне на глубине 0,5–3 м. Цветонос возвышается над водой. Сверхчувствителен к загрязнению — индикатор кристально чистой воды.',
+  fact: 'Лобелия Дортмана поглощает CO₂ через корни из донных отложений, а не из воды — уникальный для растений способ.',
+  threats: ['Эвтрофикация озёр', 'Загрязнение воды', 'Рекреационная нагрузка'],
+  conservation: 'Охрана чистых озёр. Ограничение рекреации.',
+  where_to_see: 'Браславские озёра, озёра Нарочанской группы',
+  biomass: 0.01,
+  regions: ['vitebsk','minsk','grodno'],
+});
+
+ids.soldanella = sp({
+  group: 'Растения', habitat: 'Широколиственный лес',
+  name_ru: 'Лунник оживающий', name_be: 'Лунарыя ажываючая', name_lat: 'Lunaria rediviva',
+  category: 'VU', by_category: 'III',
+  description: 'Многолетнее растение тенистых влажных лесов. Серебристые эллиптические стручки используют для зимних букетов. Редчайшее в Беларуси — известно лишь несколько популяций.',
+  fact: 'Название «лунник» происходит от формы плодов — круглых, как луна. После высыхания они становятся прозрачными и серебристыми.',
+  threats: ['Сбор для флористики', 'Вырубка тенистых лесов'],
+  conservation: 'Запрет сбора. Охрана местонахождений.',
+  where_to_see: 'Налибокская пуща, Беловежская пуща',
+  biomass: 0.1,
+  regions: ['grodno','minsk','brest'],
+});
+
+ids.matik = sp({
+  group: 'Растения', habitat: 'Болото',
+  name_ru: 'Шейхцерия болотная', name_be: 'Балотная шэйхцэрыя', name_lat: 'Scheuchzeria palustris',
+  category: 'VU', by_category: 'III',
+  description: 'Реликтовое травянистое растение верховых болот. Растёт в сфагновых зарослях у мочажин. Индикатор ненарушенных болотных экосистем. При осушении болот исчезает первым.',
+  fact: 'Шейхцерия существует более 10 000 лет — с конца ледникового периода — практически не изменившись.',
+  threats: ['Осушение болот', 'Торфоразработки'],
+  conservation: 'Охрана верховых болот. Запрет торфоразработок.',
+  where_to_see: 'Ельнянский заказник, Освейское болото',
+  biomass: 0.01,
+  regions: ['vitebsk','minsk','gomel'],
+});
+
+/* ── НАСЕКОМЫЕ ────────────────────────────────────────────────────────────── */
+
+ids.makhаon = sp({
+  group: 'Насекомые', habitat: 'Луг и поле',
+  name_ru: 'Махаон', name_be: 'Махаон', name_lat: 'Papilio machaon',
+  category: 'NT', by_category: 'IV',
+  description: 'Одна из крупнейших и красивейших бабочек Беларуси. Размах крыльев до 95 мм. Жёлтые крылья с чёрным рисунком и синей каймой. Гусеница поедает листья зонтичных растений. Стал редок из-за распашки лугов с дикими зонтичными.',
+  fact: 'Хвостики-отростки на задних крыльях отвлекают хищников — птицы атакуют «ненастоящую голову».',
+  threats: ['Распашка лугов с зонтичными растениями', 'Применение пестицидов', 'Сбор коллекционерами'],
+  conservation: 'Сохранение лугов с дикими зонтичными. Запрет отлова.',
+  where_to_see: 'Луга и опушки по всей Беларуси, Полесье',
+  model: 'procedural', biomass: 0.002,
+  regions: ['brest','gomel','grodno','minsk','vitebsk','mogilev'],
+  trend: [{year:1990,count:100000},{year:2010,count:50000},{year:2024,count:30000}],
+});
+
+ids.podolik = sp({
+  group: 'Насекомые', habitat: 'Широколиственный лес',
+  name_ru: 'Жук-олень', name_be: 'Жук-алень', name_lat: 'Lucanus cervus',
+  category: 'VU', by_category: 'II',
+  description: 'Крупнейший жук Беларуси. Самцы достигают 9 см. «Рога» — увеличенные жвала, используемые в турнирных боях. Личинка развивается в мёртвой древесине дуба 5–8 лет. Исчезает вместе со старыми дубравами.',
+  fact: 'Жук-олень умеет летать, несмотря на тяжёлую «броню». Взрослый жук не ест — живёт всего 1–2 месяца за счёт жировых запасов.',
+  threats: ['Вырубка старых дубрав', 'Уборка мёртвой древесины', 'Декоративный сбор'],
+  conservation: 'Сохранение старовозрастных дубрав. Оставление валежника.',
+  where_to_see: 'Беловежская пуща, Налибокская пуща',
+  model: 'procedural', biomass: 0.008,
+  regions: ['brest','grodno','minsk'],
+});
+
+ids.apollon = sp({
+  group: 'Насекомые', habitat: 'Луг и поле',
+  name_ru: 'Аполлон', name_be: 'Апалон', name_lat: 'Parnassius apollo',
+  category: 'EN', by_category: 'I',
+  description: 'Крупная дневная бабочка с полупрозрачными белыми крыльями и красными глазками. Считается одним из красивейших насекомых Европы. В Беларуси сохранились единичные изолированные популяции. Гусеница питается очитком.',
+  fact: 'Аполлон — первая бабочка, включённая в Конвенцию CITES (запрет международной торговли). Его коллекционируют вопреки всем запретам.',
+  threats: ['Зарастание каменистых склонов кустарником', 'Коллекционирование', 'Применение пестицидов'],
+  conservation: 'Строгая охрана популяций. Борьба с зарастанием склонов.',
+  where_to_see: 'Окрестности Гродно (единственное местонахождение в РБ)',
+  biomass: 0.003,
+  regions: ['grodno'],
+  popdata: [[2000,500,'КК РБ 2004'],[2015,300,'КК РБ 2015'],[2024,200,'Мониторинг 2024']],
+  trend: [{year:2000,count:500},{year:2015,count:300},{year:2024,count:200}],
+});
+
+ids.bogomol = sp({
+  group: 'Насекомые', habitat: 'Луг и поле',
+  name_ru: 'Богомол обыкновенный', name_be: 'Звычайны багамол', name_lat: 'Mantis religiosa',
+  category: 'EN', by_category: 'II',
+  description: 'Самый известный хищный кузнечик. Передние ноги — ловчий аппарат, реагирующий быстрее, чем успевает моргнуть человек. Самка после спаривания поедает самца. В Беларуси — на северной границе ареала.',
+  fact: 'Богомол — единственное насекомое, способное поворачивать голову на 180°. Реакция захвата добычи занимает 0,05 секунды.',
+  threats: ['Применение пестицидов', 'Распашка сухих лугов', 'Изменение климата'],
+  conservation: 'Охрана сухих травянистых местообитаний.',
+  where_to_see: 'Южная Беларусь — Брестская, Гомельская обл.',
+  biomass: 0.004,
+  regions: ['brest','gomel'],
+});
+
+ids.stag_beetle2 = sp({
+  group: 'Насекомые', habitat: 'Широколиственный лес',
+  name_ru: 'Усач мускусный', name_be: 'Мускусны вусач', name_lat: 'Aromia moschata',
+  category: 'VU', by_category: 'III',
+  description: 'Ярко-зелёный жук с металлическим блеском. Издаёт сильный запах мускуса, слышный за несколько метров. Личинки развиваются в старых ивах. Встречается вдоль рек с ивняком.',
+  fact: 'Мускусный усач — один из немногих жуков, использующих химическую сигнализацию для общения с партнёрами.',
+  threats: ['Обрезка и уборка старых ив', 'Осушение пойм'],
+  conservation: 'Сохранение старых ив вдоль рек.',
+  where_to_see: 'Поймы рек Полесья, долина Немана',
+  biomass: 0.004,
+  regions: ['brest','gomel','grodno','minsk'],
+});
+
+/* ── РЫБЫ ─────────────────────────────────────────────────────────────────── */
+
+ids.sterlyadj = sp({
+  group: 'Рыбы', habitat: 'Река и озеро',
+  name_ru: 'Стерлядь', name_be: 'Асётр-стэрлядзь', name_lat: 'Acipenser ruthenus',
+  category: 'EN', by_category: 'II',
+  description: 'Самый мелкий осетр. Реликт доледникового периода — осетры появились 250 миллионов лет назад. В Беларуси исчезала в XX веке и восстанавливается искусственным зарыблением. Ценнейшая промысловая рыба.',
+  fact: 'Осетры — живые ископаемые. Их форма тела не менялась 200 миллионов лет. Стерлядь доживает до 30 лет.',
+  threats: ['Браконьерство', 'Строительство плотин', 'Загрязнение рек', 'Изъятие из русел гравия'],
+  conservation: 'Искусственное воспроизводство. Рыборазводные заводы. Запрет вылова.',
+  where_to_see: 'Р. Днепр, р. Припять, р. Сож (редко)',
+  biomass: 0.8,
+  regions: ['gomel','mogilev','brest'],
+  popdata: [[1990,100,'КК РБ 1993'],[2010,500,'после зарыбления'],[2024,1500,'Мониторинг 2024']],
+  trend: [{year:1990,count:100},{year:2010,count:500},{year:2024,count:1500}],
+});
+
+ids.minog = sp({
+  group: 'Рыбы', habitat: 'Река и озеро',
+  name_ru: 'Ручьевая минога', name_be: 'Ручаёвая мінога', name_lat: 'Lampetra planeri',
+  category: 'VU', by_category: 'III',
+  description: 'Древнейший позвоночный — миноги появились 360 миллионов лет назад, ещё до динозавров. Не имеет челюстей. Личинка (амоцет) живёт в иле 3–7 лет с закрытыми глазами. Взрослая минога не питается и гибнет после нереста.',
+  fact: 'Ручьевая минога — «живое ископаемое», практически не изменившееся за 360 миллионов лет. Её называют самым примитивным позвоночным.',
+  threats: ['Загрязнение малых рек', 'Заиление нерестилищ', 'Мелиорация'],
+  conservation: 'Охрана малых рек. Ограничение мелиорации.',
+  where_to_see: 'Чистые малые реки Витебской, Гродненской областей',
+  biomass: 0.02,
+  regions: ['vitebsk','grodno','minsk','mogilev'],
+});
+
+ids.usatch = sp({
+  group: 'Рыбы', habitat: 'Река и озеро',
+  name_ru: 'Усач обыкновенный', name_be: 'Марэна', name_lat: 'Barbus barbus',
+  category: 'VU', by_category: 'III',
+  description: 'Крупная реофильная рыба быстрых рек. Достигает 90 см. Ищет пищу на дне с помощью чувствительных усиков. Нерестится на каменистых перекатах — именно их исчезновение главная угроза.',
+  fact: 'Икра усача ядовита для теплокровных — содержит ихтиотоксин. Местные рыбаки знали об этом и никогда её не ели.',
+  threats: ['Добыча гравия', 'Строительство плотин', 'Загрязнение'],
+  conservation: 'Сохранение каменистых перекатов. Запрет добычи гравия.',
+  where_to_see: 'Р. Западный Буг, р. Нёман',
+  biomass: 1.5,
+  regions: ['brest','grodno'],
+});
+
+ids.rylets = sp({
+  group: 'Рыбы', habitat: 'Река и озеро',
+  name_ru: 'Подуст обыкновенный', name_be: 'Падуст', name_lat: 'Chondrostoma nasus',
+  category: 'EN', by_category: 'II',
+  description: 'Стайная рыба горных и предгорных рек. В Беларуси — на восточной границе ареала. Питается водорослями и органикой, соскребая их нижнечелюстным роговым чехликом со дна.',
+  fact: 'Подуст чистит дно реки, поедая водоросли — выполняет роль «пылесоса» экосистемы.',
+  threats: ['Загрязнение', 'Уничтожение нерестовых субстратов', 'Строительство плотин'],
+  conservation: 'Охрана нерестилищ. Запрет строительства.',
+  where_to_see: 'Р. Западный Буг (редко)',
+  biomass: 0.3,
+  regions: ['brest'],
+});
+
+/* ── РЕПТИЛИИ И АМФИБИИ ──────────────────────────────────────────────────── */
+
+ids.cherepaha = sp({
+  group: 'Рептилии и амфибии', habitat: 'Болото',
+  name_ru: 'Черепаха болотная', name_be: 'Балотная чарапаха', name_lat: 'Emys orbicularis',
+  category: 'VU', by_category: 'II',
+  description: 'Единственная дикая черепаха Беларуси. Греется на берегах заболоченных водоёмов. При опасности мгновенно ныряет. Живёт до 100 лет. Откладывает яйца в прогретую почву. Самая северная черепаха Европы.',
+  fact: 'Черепаха болотная определяет пол потомства температурой гнезда: при +28°C рождаются самки, при +26°C — самцы.',
+  threats: ['Осушение болот', 'Уничтожение берегов', 'Гибель на дорогах'],
+  conservation: 'Охрана водно-болотных угодий. Туннели под дорогами.',
+  where_to_see: 'Полесье (Брестская, Гомельская обл.)',
+  model: 'procedural', biomass: 0.5,
+  regions: ['brest','gomel','grodno'],
+  popdata: [[1990,10000,'КК РБ 1993'],[2005,7000,'КК РБ 2004'],[2015,5000,'КК РБ 2015'],[2024,4000,'Мониторинг 2024']],
+  trend: [{year:1990,count:10000},{year:2005,count:7000},{year:2015,count:5000},{year:2024,count:4000}],
+});
+
+ids.medyanka = sp({
+  group: 'Рептилии и амфибии', habitat: 'Широколиственный лес',
+  name_ru: 'Медянка', name_be: 'Медзянка', name_lat: 'Coronella austriaca',
+  category: 'VU', by_category: 'III',
+  description: 'Небольшая безвредная змея. Часто принимается за гадюку и уничтожается. Специализируется на ящерицах — конкурирует с гадюкой за пищу, но не ядовита. Гладкая чешуя с медным блеском.',
+  fact: 'Медянка сжимает добычу как удав — потому что ящерицы не боятся яда. Укус человека абсолютно безвреден.',
+  threats: ['Уничтожение из-за путаницы с гадюкой', 'Уничтожение сухих опушек'],
+  conservation: 'Просветительская работа. Охрана сухих опушек и вырубок.',
+  where_to_see: 'Сухие сосновые леса Полесья',
+  biomass: 0.05,
+  regions: ['brest','gomel','grodno','minsk'],
+});
+
+ids.trit = sp({
+  group: 'Рептилии и амфибии', habitat: 'Болото',
+  name_ru: 'Тритон гребенчатый', name_be: 'Грэбеньчасты трытон', name_lat: 'Triturus cristatus',
+  category: 'NT', by_category: 'III',
+  description: 'Крупнейший тритон Беларуси. В брачный период самец развивает высокий зубчатый гребень от затылка до хвоста. Днём прячется в укрытиях, ночью охотится. Живёт у лесных водоёмов.',
+  fact: 'Гребень самца — не для плавания, а для привлечения самок. В воде он играет роль «хвоста павлина».',
+  threats: ['Мелиорация', 'Гибель на дорогах', 'Инвазивные рыбы в водоёмах'],
+  conservation: 'Охрана прудов и болот. Ограничение вселения рыбы.',
+  where_to_see: 'Лесные пруды по всей Беларуси',
+  biomass: 0.02,
+  regions: ['brest','gomel','grodno','minsk','vitebsk','mogilev'],
+});
+
+/* ── ГРИБЫ ────────────────────────────────────────────────────────────────── */
+
+ids.truffe = sp({
+  group: 'Грибы', habitat: 'Широколиственный лес',
+  name_ru: 'Трюфель летний', name_be: 'Летні трувель', name_lat: 'Tuber aestivum',
+  category: 'EN', by_category: 'I',
+  description: 'Подземный гриб — деликатес с неповторимым ароматом. Растёт в симбиозе с корнями дуба и бука. Плодовое тело полностью под землёй. В Беларуси — редчайший вид, известны единичные находки.',
+  fact: 'Аромат трюфеля обусловлен андростенолом — феромоном, похожим на половой гормон кабана. Именно поэтому их традиционно ищут со свиньями.',
+  threats: ['Вырубка дубрав', 'Уплотнение почвы', 'Сбор до созревания спор'],
+  conservation: 'Охрана старых дубрав. Запрет сбора.',
+  where_to_see: 'Беловежская пуща (единичные находки)',
+  biomass: 0.1,
+  regions: ['brest'],
+});
+
+ids.mukhomor = sp({
+  group: 'Грибы', habitat: 'Хвойный лес',
+  name_ru: 'Решёточник красный', name_be: 'Чырвоная кратчатка', name_lat: 'Clathrus ruber',
+  category: 'CR', by_category: 'I',
+  description: 'Невероятный гриб — красная ажурная решётка. Вылупляется из белого яйца за несколько часов. Тухлый запах привлекает мух, распространяющих споры. Средиземноморский вид, в Беларуси единственная находка в 2019 г.',
+  fact: 'Решёточник — один из самых необычных грибов мира. Его рост занимает всего 4–6 часов. Живёт 1–2 дня.',
+  threats: ['Недостаточность тепла', 'Уничтожение при сборе'],
+  conservation: 'Строгая охрана единственного местонахождения.',
+  where_to_see: 'Гродненский район (единственная находка)',
+  biomass: 0.05,
+  regions: ['grodno'],
+});
+
+ids.sparassis = sp({
+  group: 'Грибы', habitat: 'Хвойный лес',
+  name_ru: 'Спарасис курчавый (грибная капуста)', name_be: 'Кучаравы спарасіс', name_lat: 'Sparassis crispa',
+  category: 'VU', by_category: 'III',
+  description: 'Гриб, похожий на кочан цветной капусты кремового цвета. Диаметр до 50 см, вес до 5 кг. Растёт у оснований старых сосен. Съедобен и очень вкусен. Обладает противоопухолевыми свойствами.',
+  fact: 'Спарасис содержит β-1,3-глюкан — вещество, доказанно усиливающее иммунитет и применяемое в японской медицине.',
+  threats: ['Вырубка старых сосновых лесов', 'Сбор до созревания спор'],
+  conservation: 'Сохранение старых сосняков. Ограничение сбора.',
+  where_to_see: 'Старые сосняки Беларуси',
+  biomass: 1.5,
+  regions: ['brest','gomel','grodno','minsk','vitebsk','mogilev'],
+});
+
+/* ── МХИ И ЛИШАЙНИКИ ─────────────────────────────────────────────────────── */
+
+ids.lobaria = sp({
+  group: 'Мхи и лишайники', habitat: 'Широколиственный лес',
+  name_ru: 'Лобария лёгочная', name_be: 'Лёгачная лобарыя', name_lat: 'Lobaria pulmonaria',
+  category: 'VU', by_category: 'III',
+  description: 'Крупный лишайник — симбиоз гриба, водоросли и цианобактерии. Таллом похож на лёгочную ткань. Растёт только в старых нетронутых лесах с постоянной влажностью. Индикатор экологической ценности леса.',
+  fact: 'Лобария лёгочная фиксирует атмосферный азот. Раньше её применяли при болезнях лёгких — отсюда и название.',
+  threats: ['Вырубка старолесий', 'Загрязнение воздуха (SO₂)', 'Изменение микроклимата'],
+  conservation: 'Охрана старовозрастных лесов.',
+  where_to_see: 'Беловежская пуща, Налибокская пуща',
+  biomass: 0.05,
+  regions: ['brest','grodno'],
+});
+
+ids.kladon = sp({
+  group: 'Мхи и лишайники', habitat: 'Хвойный лес',
+  name_ru: 'Кладония звёздчатая', name_be: 'Зорчатая кладонія', name_lat: 'Cladonia stellaris',
+  category: 'VU', by_category: 'III',
+  description: 'Напочвенный кустистый лишайник, образующий белые кочки в сосновых борах. Один из компонентов оленьего мха — важный корм для оленей зимой. Растёт крайне медленно — 1–3 мм в год.',
+  fact: 'Ковёр из кладонии в сосняке может быть возрастом 200–300 лет. Протяжённость "колонии" до 10 м.',
+  threats: ['Пожары', 'Вытаптывание', 'Загрязнение воздуха'],
+  conservation: 'Охрана сухих сосняков. Противопожарные меры.',
+  where_to_see: 'Сухие боры Витебской, Минской, Гомельской областей',
+  biomass: 0.1,
+  regions: ['vitebsk','minsk','gomel','brest'],
+});
+
+  db.exec('COMMIT');
+  console.log(`✓ Виды засеяны (${Object.keys(ids).length} видов)`);
+} catch (e) {
+  db.exec('ROLLBACK');
+  console.error('Ошибка при вставке видов:', e.message);
+  process.exit(1);
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   ПИЩЕВАЯ СЕТЬ
+   ══════════════════════════════════════════════════════════════════════════ */
+const insWeb = db.prepare('INSERT OR IGNORE INTO rb_food_web (predator_id, prey_id, strength) VALUES (?,?,?)');
+
+db.exec('BEGIN');
+const web = [
+  // Орлан-белохвост охотится на рыб, водоплавающих птиц
+  [ids.orlan, ids.sterlyadj, 0.6],
+  [ids.orlan, ids.usatch, 0.3],
+  [ids.orlan, ids.krasnozobaya_kazarka, 0.1],
+  // Скопа — только рыба
+  [ids.skopa, ids.sterlyadj, 0.7],
+  [ids.skopa, ids.usatch, 0.3],
+  [ids.skopa, ids.rylets, 0.2],
+  // Змееяд — рептилии
+  [ids.zmeeyed, ids.medyanka, 0.7],
+  [ids.zmeeyed, ids.cherepaha, 0.1],
+  // Филин
+  [ids.filin, ids.kosulya, 0.2],
+  [ids.filin, ids.bober, 0.1],
+  [ids.filin, ids.vydra, 0.1],
+  // Большой подорлик
+  [ids.zhuravl_seryi2, ids.trit, 0.5],
+  [ids.zhuravl_seryi2, ids.cherepaha, 0.3],
+  [ids.zhuravl_seryi2, ids.minog, 0.2],
+  // Рысь — косули, заяц, бобёр
+  [ids.rys, ids.kosulya, 0.8],
+  [ids.rys, ids.bober, 0.1],
+  [ids.rys, ids.zubatka, 0.05],
+  // Волк
+  [ids.volk, ids.kosulya, 0.7],
+  [ids.volk, ids.zubr, 0.1],
+  [ids.volk, ids.bober, 0.2],
+  // Выдра — рыба, лягушки
+  [ids.vydra, ids.sterlyadj, 0.4],
+  [ids.vydra, ids.minog, 0.3],
+  [ids.vydra, ids.usatch, 0.3],
+  // Норка — рыба, раки
+  [ids.norka, ids.rylets, 0.4],
+  [ids.norka, ids.minog, 0.3],
+  [ids.norka, ids.trit, 0.3],
+  // Бурый медведь — всеяден
+  [ids.medved, ids.bober, 0.15],
+  [ids.medved, ids.lobelia, 0.2],
+  // Журавль — насекомые, лягушки, зерно
+  [ids.zhuravl, ids.trit, 0.3],
+  [ids.zhuravl, ids.bogomol, 0.2],
+  // Черный аист — рыба, лягушки
+  [ids.chorny_aist, ids.minog, 0.4],
+  [ids.chorny_aist, ids.sterlyadj, 0.2],
+  [ids.chorny_aist, ids.trit, 0.4],
+  // Коростель — насекомые
+  [ids.dergach, ids.makhаon, 0.1],
+  [ids.dergach, ids.bogomol, 0.1],
+  // Жук-олень — мёртвая дубовая древесина
+  [ids.podolik, ids.lobaria, 0.1],
+];
+web.forEach(([p, q, s]) => insWeb.run(p, q, s));
+db.exec('COMMIT');
+console.log(`✓ Пищевая сеть: ${web.length} связей`);
+
+/* ══════════════════════════════════════════════════════════════════════════
+   КВЕСТЫ
+   ══════════════════════════════════════════════════════════════════════════ */
+const insQ = db.prepare('INSERT INTO rb_quests (title, description, species_ids, xp_reward, badge_slug) VALUES (?,?,?,?,?)');
+
+[
+  [
+    'Спасти зубра',
+    'Узнайте историю зубра — от истребления до триумфального возвращения. Пройдите 5 этапов: история вида, генетика, пищевая сеть, ареал и современная охрана.',
+    JSON.stringify([ids.zubr, ids.kosulya, ids.volk, ids.rys]),
+    200, 'quest_zubr'
+  ],
+  [
+    'Путь чёрного аиста',
+    'Проследите миграцию чёрного аиста из белорусских болот в Африку. Изучите биомы, угрозы на маршруте и меры охраны.',
+    JSON.stringify([ids.chorny_aist, ids.zhuravl, ids.cherepaha, ids.trit]),
+    180, 'quest_black_stork'
+  ],
+  [
+    'Река живёт',
+    'Стерлядь — символ здоровья белорусских рек. Узнайте, почему исчезают осетры и как восстановить их популяцию.',
+    JSON.stringify([ids.sterlyadj, ids.minog, ids.usatch, ids.vydra, ids.norka]),
+    160, 'quest_river'
+  ],
+  [
+    'Последний лес',
+    'Беловежская пуща — последний первобытный лес Европы. Исследуйте её обитателей и поймите, почему этот лес уникален.',
+    JSON.stringify([ids.zubr, ids.rys, ids.filin, ids.venerina, ids.podolik, ids.truffe]),
+    250, 'quest_forest'
+  ],
+].forEach(args => insQ.run(...args));
+
+console.log('✓ Квесты');
+console.log('\n✅ seed-red-book.js завершён успешно!');
+console.log(`   Видов: ${Object.keys(ids).length}`);
+console.log('   Запустите: node src/db/migrate.js && node src/db/seed-red-book.js');
diff --git a/backend/src/db/seed-theory.js b/backend/src/db/seed-theory.js
new file mode 100644
index 0000000..66050f0
--- /dev/null
+++ b/backend/src/db/seed-theory.js
@@ -0,0 +1,1006 @@
+/**
+ * Seed: все теоретические курсы с уроками
+ *
+ * Курсы:
+ *   [math] Тригонометрия              — 4 урока
+ *   [math] Производные и интегралы    — 4 урока
+ *   [math] Теория вероятностей        — 3 урока
+ *   [phys] Механика                   — 4 урока
+ *   [phys] Электричество и магнетизм  — 4 урока
+ *   [phys] Оптика и волны             — 3 урока
+ *   [chem] Строение вещества          — 4 урока
+ *   [chem] Органическая химия         — 4 урока
+ *   [bio]  Клетка и генетика          — 4 урока
+ *   [inf]  Алгоритмы                  — 3 урока
+ *
+ * Запуск: node src/db/seed-theory.js  (из папки backend/)
+ */
+'use strict';
+require('./migrate'); // применить все миграции (включая lesson_blocks v4)
+const db = require('./db');
+
+/* ── Guard: пропустить, если уже засеяно ─────────────────────────────── */
+const TITLES = [
+  'Тригонометрия', 'Производные и интегралы', 'Теория вероятностей и статистика',
+  'Механика', 'Электричество и магнетизм', 'Оптика и волны',
+  'Строение вещества', 'Органическая химия', 'Клетка и генетика', 'Алгоритмы и структуры данных',
+];
+const already = db.prepare(
+  `SELECT 1 FROM courses WHERE title IN (${TITLES.map(() => '?').join(',')}) LIMIT 1`
+).get(...TITLES);
+if (already) { console.log('seed-theory: already seeded — skipping.'); process.exit(0); }
+
+/* ── Найти/создать преподавателя ─────────────────────────────────────── */
+let teacher = db.prepare("SELECT id FROM users WHERE role IN ('teacher','admin') LIMIT 1").get();
+if (!teacher) {
+  const bcrypt = require('bcryptjs');
+  const hash = bcrypt.hashSync('teacher123', 10);
+  const r = db.prepare(
+    "INSERT INTO users (email, password_hash, name, role) VALUES (?, ?, ?, 'teacher')"
+  ).run('teacher@learnspace.local', hash, 'Преподаватель');
+  teacher = { id: Number(r.lastInsertRowid) };
+  console.log('Created system teacher, id =', teacher.id);
+}
+const TEACHER = Number(teacher.id);
+
+/* ── Хелперы ─────────────────────────────────────────────────────────── */
+function J(obj) { return JSON.stringify(obj); }
+
+function course(slug, title, desc, emoji, order) {
+  return Number(db.prepare(
+    `INSERT INTO courses (subject_slug, title, description, cover_emoji, order_index, is_published, created_by)
+     VALUES (?, ?, ?, ?, ?, 1, ?)`
+  ).run(slug, title, desc, emoji, order, TEACHER).lastInsertRowid);
+}
+function section(courseId, title, order) {
+  return Number(db.prepare(
+    `INSERT INTO course_sections (course_id, title, order_index) VALUES (?, ?, ?)`
+  ).run(courseId, title, order).lastInsertRowid);
+}
+function lesson(courseId, sectionId, title, order) {
+  return Number(db.prepare(
+    `INSERT INTO lessons (course_id, section_id, title, order_index, is_published) VALUES (?, ?, ?, ?, 1)`
+  ).run(courseId, sectionId, title, order).lastInsertRowid);
+}
+function block(lid, type, order, data) {
+  db.prepare(
+    `INSERT INTO lesson_blocks (lesson_id, type, order_index, data) VALUES (?, ?, ?, ?)`
+  ).run(lid, type, order, J(data));
+}
+
+/* ═══════════════════════════════════════════════════════════════════════
+   Транзакция
+   ═══════════════════════════════════════════════════════════════════════ */
+db.transaction(() => {
+
+/* ══════════════════════════════════════════════════════════════
+   КУРС: Тригонометрия  [math]
+   ══════════════════════════════════════════════════════════════ */
+const C_TRIG = course('math', 'Тригонометрия',
+  'Единичная окружность, тригонометрические функции, формулы и уравнения', '📐', 1);
+const S_T1 = section(C_TRIG, 'Основы', 1);
+const S_T2 = section(C_TRIG, 'Формулы', 2);
+
+{
+  const L = lesson(C_TRIG, S_T1, 'Единичная окружность и углы', 1);
+  let b = 0;
+  block(L, 'heading', ++b, { level: 2, text: 'Единичная окружность' });
+  block(L, 'text', ++b, { text: 'Единичная окружность — окружность с центром в начале координат и радиусом 1. Любая точка на ней имеет координаты (cos α, sin α), где α — угол от положительной оси OX против часовой стрелки.' });
+  block(L, 'callout', ++b, { style: 'info', text: 'Радиус равен 1, поэтому sin α = y/1 = y, cos α = x/1 = x. Это упрощает все формулы.' });
+  block(L, 'heading', ++b, { level: 3, text: 'Радианы и градусы' });
+  block(L, 'text', ++b, { text: 'Один радиан — угол, при котором длина дуги равна радиусу. Полный оборот: 360° = 2π рад.' });
+  block(L, 'formula', ++b, { tex: '\\alpha_{\\text{рад}} = \\dfrac{\\alpha_{\\text{град}}}{180°} \\cdot \\pi' });
+  block(L, 'table', ++b, {
+    header: ['Градусы', '0°', '30°', '45°', '60°', '90°', '180°', '270°', '360°'],
+    rows: [['Радианы', '0', 'π/6', 'π/4', 'π/3', 'π/2', 'π', '3π/2', '2π']],
+  });
+  block(L, 'heading', ++b, { level: 3, text: 'Знаки в четвертях' });
+  block(L, 'table', ++b, {
+    header: ['Четверть', 'Углы', 'sin', 'cos', 'tg'],
+    rows: [
+      ['I', '0°–90°', '+', '+', '+'],
+      ['II', '90°–180°', '+', '−', '−'],
+      ['III', '180°–270°', '−', '−', '+'],
+      ['IV', '270°–360°', '−', '+', '−'],
+    ],
+  });
+  block(L, 'callout', ++b, { style: 'success', text: 'Запоминалка: «Все Студенты Такие Кретины» (All Students Take Calculus) — в I все положительны, во II только sin, в III только tg, в IV только cos.' });
+  block(L, 'quiz', ++b, {
+    question: 'В какой четверти cos α < 0 и sin α > 0?',
+    options: ['I', 'II', 'III', 'IV'],
+    correctIndex: 1,
+  });
+}
+
+{
+  const L = lesson(C_TRIG, S_T1, 'Синус и косинус', 2);
+  let b = 0;
+  block(L, 'heading', ++b, { level: 2, text: 'Синус и косинус угла' });
+  block(L, 'text', ++b, { text: 'sin α — ордината точки на единичной окружности. cos α — абсцисса. Оба лежат в [−1, 1].' });
+  block(L, 'formula', ++b, { tex: '-1 \\le \\sin \\alpha \\le 1, \\quad -1 \\le \\cos \\alpha \\le 1' });
+  block(L, 'table', ++b, {
+    header: ['α', '0°', '30°', '45°', '60°', '90°'],
+    rows: [
+      ['sin α', '0', '½', '√2/2', '√3/2', '1'],
+      ['cos α', '1', '√3/2', '√2/2', '½', '0'],
+    ],
+  });
+  block(L, 'callout', ++b, { style: 'success', text: 'Для sin: √0/2, √1/2, √2/2, √3/2, √4/2 = 0, ½, √2/2, √3/2, 1. Для cos — в обратном порядке.' });
+  block(L, 'heading', ++b, { level: 3, text: 'Основное тригонометрическое тождество' });
+  block(L, 'formula', ++b, { tex: '\\sin^2 \\alpha + \\cos^2 \\alpha = 1' });
+  block(L, 'text', ++b, { text: 'Следует из теоремы Пифагора: точка (cos α, sin α) лежит на окружности r = 1, поэтому x² + y² = 1.' });
+  block(L, 'quiz', ++b, {
+    question: 'sin²(60°) + cos²(60°) = ?',
+    options: ['0', '½', '1', '√3'],
+    correctIndex: 2,
+  });
+  block(L, 'flashcard', ++b, { front: 'sin 30° = ?', back: '½ = 0.5' });
+  block(L, 'flashcard', ++b, { front: 'cos 45° = ?', back: '√2/2 ≈ 0.707' });
+}
+
+{
+  const L = lesson(C_TRIG, S_T1, 'Тангенс и котангенс', 3);
+  let b = 0;
+  block(L, 'heading', ++b, { level: 2, text: 'Тангенс и котангенс' });
+  block(L, 'formula', ++b, { label: 'Тангенс', tex: '\\tan \\alpha = \\dfrac{\\sin \\alpha}{\\cos \\alpha}' });
+  block(L, 'formula', ++b, { label: 'Котангенс', tex: '\\cot \\alpha = \\dfrac{\\cos \\alpha}{\\sin \\alpha} = \\dfrac{1}{\\tan \\alpha}' });
+  block(L, 'callout', ++b, { style: 'warning', text: 'tg α не определён при cos α = 0 (α = 90° + 180°·n).\nctg α не определён при sin α = 0 (α = 180°·n).' });
+  block(L, 'table', ++b, {
+    header: ['α', '0°', '30°', '45°', '60°', '90°'],
+    rows: [
+      ['tg α', '0', '√3/3', '1', '√3', '—'],
+      ['ctg α', '—', '√3', '1', '√3/3', '0'],
+    ],
+  });
+  block(L, 'quiz', ++b, {
+    question: 'tg 45° = ?',
+    options: ['0', '½', '1', '√3'],
+    correctIndex: 2,
+  });
+}
+
+{
+  const L = lesson(C_TRIG, S_T2, 'Формулы приведения и сложения', 4);
+  let b = 0;
+  block(L, 'heading', ++b, { level: 2, text: 'Формулы приведения' });
+  block(L, 'callout', ++b, { style: 'info', text: 'Правило: 1) определите четверть → знак результата; 2) если аргумент π/2 или 3π/2 — функция меняется на кофункцию (sin↔cos, tg↔ctg); π или 2π — не меняется.' });
+  block(L, 'table', ++b, {
+    header: ['', 'sin', 'cos', 'tg'],
+    rows: [
+      ['π/2 − α', 'cos α', 'sin α', 'ctg α'],
+      ['π − α', 'sin α', '−cos α', '−tg α'],
+      ['π + α', '−sin α', '−cos α', 'tg α'],
+      ['2π − α', '−sin α', 'cos α', '−tg α'],
+    ],
+  });
+  block(L, 'heading', ++b, { level: 2, text: 'Формулы сложения' });
+  block(L, 'formula', ++b, { tex: '\\sin(\\alpha \\pm \\beta) = \\sin\\alpha\\cos\\beta \\pm \\cos\\alpha\\sin\\beta' });
+  block(L, 'formula', ++b, { tex: '\\cos(\\alpha \\pm \\beta) = \\cos\\alpha\\cos\\beta \\mp \\sin\\alpha\\sin\\beta' });
+  block(L, 'formula', ++b, { tex: '\\tan(\\alpha \\pm \\beta) = \\dfrac{\\tan\\alpha \\pm \\tan\\beta}{1 \\mp \\tan\\alpha\\tan\\beta}' });
+  block(L, 'heading', ++b, { level: 3, text: 'Формулы двойного угла' });
+  block(L, 'formula', ++b, { tex: '\\sin 2\\alpha = 2\\sin\\alpha\\cos\\alpha' });
+  block(L, 'formula', ++b, { tex: '\\cos 2\\alpha = \\cos^2\\alpha - \\sin^2\\alpha = 2\\cos^2\\alpha - 1 = 1 - 2\\sin^2\\alpha' });
+  block(L, 'quiz', ++b, {
+    question: 'sin(π − α) = ?',
+    options: ['sin α', '−sin α', 'cos α', '−cos α'],
+    correctIndex: 0,
+  });
+  block(L, 'flashcard', ++b, { front: 'sin(α + β) = ?', back: 'sin α · cos β + cos α · sin β' });
+  block(L, 'flashcard', ++b, { front: 'cos 2α = ?', back: 'cos²α − sin²α = 2cos²α − 1 = 1 − 2sin²α' });
+}
+
+/* ══════════════════════════════════════════════════════════════
+   КУРС: Производные и интегралы  [math]
+   ══════════════════════════════════════════════════════════════ */
+const C_CALC = course('math', 'Производные и интегралы',
+  'Дифференциальное и интегральное исчисление: производная, правила, применение, первообразная', '∫', 2);
+const S_C1 = section(C_CALC, 'Дифференциальное исчисление', 1);
+const S_C2 = section(C_CALC, 'Интегральное исчисление', 2);
+
+{
+  const L = lesson(C_CALC, S_C1, 'Понятие производной', 1);
+  let b = 0;
+  block(L, 'heading', ++b, { level: 2, text: 'Производная функции' });
+  block(L, 'text', ++b, { text: 'Производная — мгновенная скорость изменения функции. Геометрически: тангенс угла наклона касательной к графику.' });
+  block(L, 'formula', ++b, { label: 'Определение', tex: "f'(x) = \\lim_{\\Delta x \\to 0} \\frac{f(x + \\Delta x) - f(x)}{\\Delta x}" });
+  block(L, 'table', ++b, {
+    header: ['f(x)', "f'(x)"],
+    rows: [
+      ['C', '0'], ['xⁿ', 'n·xⁿ⁻¹'], ['eˣ', 'eˣ'], ['aˣ', 'aˣ·ln a'],
+      ['ln x', '1/x'], ['sin x', 'cos x'], ['cos x', '−sin x'],
+      ['tg x', '1/cos²x'], ['√x', '1/(2√x)'],
+    ],
+  });
+  block(L, 'formula', ++b, { label: 'Произведение', tex: '(fg)\' = f\'g + fg\'' });
+  block(L, 'formula', ++b, { label: 'Частное', tex: '\\left(\\dfrac{f}{g}\\right)\' = \\dfrac{f\'g - fg\'}{g^2}' });
+  block(L, 'formula', ++b, { label: 'Сложная функция', tex: '(f(g(x)))\' = f\'(g(x)) \\cdot g\'(x)' });
+  block(L, 'accordion', ++b, { title: 'Пример: f(x) = x³ − 5x + 2', content: "f'(x) = 3x² − 5\n(x³)' = 3x², (−5x)' = −5, (2)' = 0" });
+  block(L, 'quiz', ++b, {
+    question: "(4x³)' = ?",
+    options: ['4x²', '12x²', '12x³', '4x⁴'],
+    correctIndex: 1,
+  });
+  block(L, 'flashcard', ++b, { front: "(xⁿ)' = ?", back: 'n · xⁿ⁻¹\nПример: (x⁵)\' = 5x⁴' });
+}
+
+{
+  const L = lesson(C_CALC, S_C1, 'Применение производной', 2);
+  let b = 0;
+  block(L, 'heading', ++b, { level: 2, text: 'Применение производной' });
+  block(L, 'callout', ++b, { style: 'info', text: "Алгоритм нахождения экстремумов:\n1. Найти f'(x)\n2. Решить f'(x) = 0\n3. Определить знак f' слева и справа\n4. «+→−» — максимум, «−→+» — минимум" });
+  block(L, 'formula', ++b, { label: 'Признак через вторую производную', tex: "f''(x_0) > 0 \\Rightarrow \\text{min}, \\quad f''(x_0) < 0 \\Rightarrow \\text{max}" });
+  block(L, 'formula', ++b, { label: 'Уравнение касательной', tex: "y = f(x_0) + f'(x_0)(x - x_0)" });
+  block(L, 'diagram', ++b, {
+    code: "graph LR\n  A[\"Найти f'(x)\"] --> B[\"Нули f'(x)\"]\n  B --> C[\"Знаки f'(x)\"]\n  C --> D[\"min / max\"]\n  D --> E[\"f''(x) — выпуклость\"]",
+    caption: 'Алгоритм исследования функции',
+  });
+  block(L, 'quiz', ++b, {
+    question: 'f(x) = x² − 4x + 3. При каком x минимум?',
+    options: ['x = 0', 'x = 2', 'x = 3', 'x = −2'],
+    correctIndex: 1,
+  });
+}
+
+{
+  const L = lesson(C_CALC, S_C2, 'Первообразная и неопределённый интеграл', 3);
+  let b = 0;
+  block(L, 'heading', ++b, { level: 2, text: 'Первообразная' });
+  block(L, 'text', ++b, { text: 'F(x) — первообразная f(x), если F\'(x) = f(x). Первообразных бесконечно много: F(x) + C.' });
+  block(L, 'formula', ++b, { label: 'Неопределённый интеграл', tex: '\\int f(x)\\, dx = F(x) + C' });
+  block(L, 'table', ++b, {
+    header: ['Интеграл', 'Результат'],
+    rows: [
+      ['∫ xⁿ dx', 'xⁿ⁺¹/(n+1) + C'], ['∫ dx/x', 'ln|x| + C'],
+      ['∫ eˣ dx', 'eˣ + C'], ['∫ sin x dx', '−cos x + C'],
+      ['∫ cos x dx', 'sin x + C'], ['∫ aˣ dx', 'aˣ/ln a + C'],
+    ],
+  });
+  block(L, 'callout', ++b, { style: 'warning', text: 'Проверить интеграл: взять производную результата — должна получиться подынтегральная функция.' });
+  block(L, 'quiz', ++b, {
+    question: '∫ 3x² dx = ?',
+    options: ['6x + C', 'x³ + C', '3x³ + C', 'x² + C'],
+    correctIndex: 1,
+  });
+  block(L, 'flashcard', ++b, { front: '∫ cos x dx = ?', back: "sin x + C\nПроверка: (sin x)' = cos x ✓" });
+}
+
+{
+  const L = lesson(C_CALC, S_C2, 'Определённый интеграл и площадь', 4);
+  let b = 0;
+  block(L, 'heading', ++b, { level: 2, text: 'Определённый интеграл' });
+  block(L, 'formula', ++b, { label: 'Формула Ньютона–Лейбница', tex: '\\int_a^b f(x)\\, dx = F(b) - F(a)' });
+  block(L, 'text', ++b, { text: 'Геометрический смысл: площадь под графиком f(x) ≥ 0 на [a, b]. Ниже оси — вычитается.' });
+  block(L, 'formula', ++b, { label: 'Площадь между двумя кривыми', tex: 'S = \\int_a^b |f(x) - g(x)|\\, dx' });
+  block(L, 'table', ++b, {
+    header: ['Свойство', 'Запись'],
+    rows: [
+      ['Линейность', '∫[αf + βg] = α∫f + β∫g'],
+      ['Аддитивность', '∫ₐᵇ = ∫ₐᶜ + ∫ᶜᵇ'],
+      ['Смена пределов', '∫ₐᵇ = −∫ᵦₐ'],
+    ],
+  });
+  block(L, 'quiz', ++b, {
+    question: '∫₀² x dx = ?',
+    options: ['1', '2', '4', '½'],
+    correctIndex: 1,
+  });
+  block(L, 'alert', ++b, { style: 'exam', text: 'ЕГЭ профиль: отработайте алгоритм — найти первообразную → подставить пределы → вычесть F(a) из F(b).' });
+}
+
+/* ══════════════════════════════════════════════════════════════
+   КУРС: Теория вероятностей  [math]
+   ══════════════════════════════════════════════════════════════ */
+const C_PROB = course('math', 'Теория вероятностей и статистика',
+  'Классическая вероятность, формулы сложения и умножения, случайные величины', '🎲', 3);
+const S_P1 = section(C_PROB, 'Классическая вероятность', 1);
+const S_P2 = section(C_PROB, 'Случайные величины', 2);
+
+{
+  const L = lesson(C_PROB, S_P1, 'Классическое определение вероятности', 1);
+  let b = 0;
+  block(L, 'heading', ++b, { level: 2, text: 'Вероятность событий' });
+  block(L, 'formula', ++b, { label: 'Классическая вероятность', tex: 'P(A) = \\dfrac{m}{n}' });
+  block(L, 'text', ++b, { text: 'm — число благоприятных исходов, n — общее число равновозможных.\nВсегда: 0 ≤ P(A) ≤ 1.' });
+  block(L, 'table', ++b, {
+    header: ['Схема', 'Формула', 'Смысл'],
+    rows: [
+      ['Перестановки', 'Pₙ = n!', 'Расставить n предметов'],
+      ['Размещения', 'Aₙᵏ = n!/(n−k)!', 'k из n с учётом порядка'],
+      ['Сочетания', 'Cₙᵏ = n!/(k!(n−k)!)', 'k из n без порядка'],
+    ],
+  });
+  block(L, 'accordion', ++b, {
+    title: 'Пример: вероятность выпадения 3 при броске кубика',
+    content: 'n = 6, m = 1 → P = 1/6 ≈ 0.167',
+  });
+  block(L, 'quiz', ++b, {
+    question: 'В урне 4 белых и 6 чёрных. Вероятность вытащить белый?',
+    options: ['0.4', '0.6', '0.25', '0.5'],
+    correctIndex: 0,
+  });
+}
+
+{
+  const L = lesson(C_PROB, S_P1, 'Формулы сложения и умножения', 2);
+  let b = 0;
+  block(L, 'heading', ++b, { level: 2, text: 'Операции над событиями' });
+  block(L, 'formula', ++b, { label: 'Сложение (несовместные)', tex: 'P(A \\cup B) = P(A) + P(B)' });
+  block(L, 'formula', ++b, { label: 'Сложение (общий случай)', tex: 'P(A \\cup B) = P(A) + P(B) - P(A \\cap B)' });
+  block(L, 'formula', ++b, { label: 'Противоположное событие', tex: 'P(\\bar{A}) = 1 - P(A)' });
+  block(L, 'formula', ++b, { label: 'Умножение (независимые)', tex: 'P(A \\cap B) = P(A) \\cdot P(B)' });
+  block(L, 'formula', ++b, { label: 'Условная вероятность', tex: 'P(B|A) = \\dfrac{P(A \\cap B)}{P(A)}' });
+  block(L, 'quiz', ++b, {
+    question: 'Стрелок A попадает с P=0.7, B с P=0.8. Оба стреляют. P(хотя бы одного попадания)?',
+    options: ['1.5', '0.56', '0.94', '0.75'],
+    correctIndex: 2,
+  });
+}
+
+{
+  const L = lesson(C_PROB, S_P2, 'Случайные величины и математическое ожидание', 3);
+  let b = 0;
+  block(L, 'heading', ++b, { level: 2, text: 'Дискретная случайная величина' });
+  block(L, 'formula', ++b, { label: 'Математическое ожидание', tex: 'M(X) = \\sum_{i=1}^{n} x_i p_i' });
+  block(L, 'formula', ++b, { label: 'Дисперсия', tex: 'D(X) = \\sum_{i}(x_i - M(X))^2 p_i' });
+  block(L, 'formula', ++b, { label: 'СКО', tex: '\\sigma = \\sqrt{D(X)}' });
+  block(L, 'callout', ++b, { style: 'info', text: 'M(X) — «центр тяжести» распределения. σ имеет те же единицы, что X. Правило трёх сигм: 68% в [μ−σ, μ+σ], 95% в [μ−2σ, μ+2σ], 99.7% в [μ−3σ, μ+3σ].' });
+  block(L, 'formula', ++b, { label: 'Нормальное распределение (плотность)', tex: 'f(x) = \\dfrac{1}{\\sigma\\sqrt{2\\pi}} e^{-\\frac{(x-\\mu)^2}{2\\sigma^2}}' });
+  block(L, 'quiz', ++b, {
+    question: 'X принимает 1, 2, 3 с вероятностями 0.2, 0.5, 0.3. M(X) = ?',
+    options: ['1.5', '2.0', '2.1', '1.8'],
+    correctIndex: 2,
+  });
+}
+
+/* ══════════════════════════════════════════════════════════════
+   КУРС: Механика  [phys]
+   ══════════════════════════════════════════════════════════════ */
+const C_MECH = course('phys', 'Механика',
+  'Кинематика, динамика, законы Ньютона, энергия и импульс', '🚀', 1);
+const S_M1 = section(C_MECH, 'Кинематика', 1);
+const S_M2 = section(C_MECH, 'Динамика', 2);
+const S_M3 = section(C_MECH, 'Законы сохранения', 3);
+
+{
+  const L = lesson(C_MECH, S_M1, 'Прямолинейное движение', 1);
+  let b = 0;
+  block(L, 'heading', ++b, { level: 2, text: 'Основные понятия кинематики' });
+  block(L, 'text', ++b, { text: 'Кинематика описывает движение без анализа причин.\n\nПеремещение s⃗ [м] — вектор от старта к финишу.\nСкорость v⃗ [м/с] — быстрота изменения положения.\nУскорение a⃗ [м/с²] — быстрота изменения скорости.' });
+  block(L, 'callout', ++b, { style: 'info', text: 'Путь ≠ перемещение. Путь — длина траектории (скаляр ≥ 0). При движении «туда-обратно» путь > 0, перемещение = 0.' });
+  block(L, 'formula', ++b, { label: 'Равномерное движение', tex: 'x = x_0 + v \\cdot t' });
+  block(L, 'formula', ++b, { label: 'Скорость при равноускоренном', tex: 'v = v_0 + a \\cdot t' });
+  block(L, 'formula', ++b, { label: 'Координата', tex: 'x = x_0 + v_0 t + \\dfrac{a t^2}{2}' });
+  block(L, 'formula', ++b, { label: 'Без времени', tex: 'v^2 = v_0^2 + 2a \\cdot s' });
+  block(L, 'quiz', ++b, {
+    question: 'Автомобиль разгоняется из покоя с a = 2 м/с². Путь за 5 с?',
+    options: ['10 м', '25 м', '50 м', '5 м'],
+    correctIndex: 1,
+  });
+}
+
+{
+  const L = lesson(C_MECH, S_M2, 'Законы Ньютона', 2);
+  let b = 0;
+  block(L, 'heading', ++b, { level: 2, text: 'Три закона Ньютона' });
+  block(L, 'text', ++b, { text: 'I закон (инерция): тело сохраняет покой или равномерное прямолинейное движение, если равнодействующая сил = 0.' });
+  block(L, 'formula', ++b, { label: 'II закон', tex: '\\vec{F} = m \\vec{a}' });
+  block(L, 'formula', ++b, { label: 'III закон', tex: '\\vec{F}_{12} = -\\vec{F}_{21}' });
+  block(L, 'text', ++b, { text: 'Силы в механике:\n• Тяжесть: F = mg (вниз)\n• Нормальная реакция N ⊥ опоре\n• Трение: F = μN (против движения)\n• Упругость: F = −kx (закон Гука)' });
+  block(L, 'quiz', ++b, {
+    question: 'К телу m = 4 кг приложена F = 12 Н (без трения). Ускорение?',
+    options: ['2 м/с²', '3 м/с²', '4 м/с²', '48 м/с²'],
+    correctIndex: 1,
+  });
+  block(L, 'flashcard', ++b, { front: 'Второй закон Ньютона', back: 'F⃗ = m·a⃗\nУскорение пропорционально силе и обратно пропорционально массе.' });
+}
+
+{
+  const L = lesson(C_MECH, S_M3, 'Работа и энергия', 3);
+  let b = 0;
+  block(L, 'heading', ++b, { level: 2, text: 'Работа и механическая энергия' });
+  block(L, 'formula', ++b, { label: 'Работа', tex: 'A = F \\cdot s \\cdot \\cos \\alpha' });
+  block(L, 'formula', ++b, { label: 'Кинетическая энергия', tex: 'E_k = \\dfrac{mv^2}{2}' });
+  block(L, 'formula', ++b, { label: 'Потенциальная энергия', tex: 'E_p = mgh' });
+  block(L, 'formula', ++b, { label: 'Закон сохранения', tex: 'E_k + E_p = \\text{const}' });
+  block(L, 'callout', ++b, { style: 'warning', text: 'С трением: E_k1 + E_p1 = E_k2 + E_p2 + Q, где Q — тепловые потери.' });
+  block(L, 'quiz', ++b, {
+    question: 'Мяч 0.5 кг падает с h = 20 м (g = 10 м/с²). Eₖ у земли?',
+    options: ['50 Дж', '100 Дж', '200 Дж', '10 Дж'],
+    correctIndex: 1,
+  });
+}
+
+{
+  const L = lesson(C_MECH, S_M3, 'Импульс и закон сохранения', 4);
+  let b = 0;
+  block(L, 'heading', ++b, { level: 2, text: 'Импульс тела' });
+  block(L, 'formula', ++b, { tex: '\\vec{p} = m \\vec{v}' });
+  block(L, 'formula', ++b, { label: 'Импульс силы', tex: '\\vec{F} \\cdot \\Delta t = \\Delta \\vec{p}' });
+  block(L, 'formula', ++b, { label: 'Закон сохранения импульса', tex: 'm_1 \\vec{v}_1 + m_2 \\vec{v}_2 = m_1 \\vec{v}_1\\prime + m_2 \\vec{v}_2\\prime' });
+  block(L, 'columns', ++b, {
+    cols: [
+      { content: '<strong>Упругий удар</strong><br>Сохраняется и импульс, и кинетическая энергия.' },
+      { content: '<strong>Неупругий удар</strong><br>Тела слипаются, сохраняется только импульс.' },
+    ],
+  });
+  block(L, 'quiz', ++b, {
+    question: 'Вагон 30 т (v = 2 м/с) сцепляется с неподвижным 20 т. Скорость?',
+    options: ['1 м/с', '1.2 м/с', '1.5 м/с', '2 м/с'],
+    correctIndex: 1,
+  });
+}
+
+/* ══════════════════════════════════════════════════════════════
+   КУРС: Электричество и магнетизм  [phys]
+   ══════════════════════════════════════════════════════════════ */
+const C_EM = course('phys', 'Электричество и магнетизм',
+  'Закон Кулона, электрическое поле, постоянный ток, магнитное поле, индукция', '⚡', 2);
+const S_E1 = section(C_EM, 'Электростатика', 1);
+const S_E2 = section(C_EM, 'Постоянный ток', 2);
+const S_E3 = section(C_EM, 'Магнетизм', 3);
+
+{
+  const L = lesson(C_EM, S_E1, 'Закон Кулона и электрическое поле', 1);
+  let b = 0;
+  block(L, 'heading', ++b, { level: 2, text: 'Электрический заряд' });
+  block(L, 'text', ++b, { text: 'Заряд квантуется: e ≈ 1.6·10⁻¹⁹ Кл. Закон сохранения: суммарный заряд замкнутой системы постоянен.' });
+  block(L, 'formula', ++b, { label: 'Закон Кулона', tex: 'F = k \\dfrac{|q_1 q_2|}{r^2}, \\quad k = 9 \\cdot 10^9 \\text{ Н·м}^2/\\text{Кл}^2' });
+  block(L, 'formula', ++b, { label: 'Напряжённость поля', tex: 'E = k \\dfrac{Q}{r^2}, \\quad E = \\dfrac{U}{d}' });
+  block(L, 'formula', ++b, { label: 'Потенциал', tex: '\\varphi = k \\dfrac{Q}{r}, \\quad U_{AB} = \\varphi_A - \\varphi_B' });
+  block(L, 'quiz', ++b, {
+    question: 'q₁ = q₂ = 10⁻⁶ Кл, r = 1 м. Сила?',
+    options: ['9·10⁻³ Н', '9·10⁻⁶ Н', '9·10⁻² Н', '9 Н'],
+    correctIndex: 0,
+  });
+}
+
+{
+  const L = lesson(C_EM, S_E2, 'Постоянный ток. Законы Ома', 2);
+  let b = 0;
+  block(L, 'heading', ++b, { level: 2, text: 'Законы Ома' });
+  block(L, 'formula', ++b, { label: 'Закон Ома (участок)', tex: 'I = \\dfrac{U}{R}' });
+  block(L, 'formula', ++b, { label: 'Закон Ома (полная цепь)', tex: 'I = \\dfrac{\\mathcal{E}}{R + r}' });
+  block(L, 'columns', ++b, {
+    cols: [
+      { content: '<strong>Последовательно:</strong><br>R = R₁ + R₂<br>I одинаковый<br>U = U₁ + U₂' },
+      { content: '<strong>Параллельно:</strong><br>1/R = 1/R₁ + 1/R₂<br>U одинаковое<br>I = I₁ + I₂' },
+    ],
+  });
+  block(L, 'formula', ++b, { label: 'Мощность', tex: 'P = UI = I^2R = U^2/R' });
+  block(L, 'formula', ++b, { label: 'Закон Джоуля–Ленца', tex: 'Q = I^2Rt' });
+  block(L, 'quiz', ++b, {
+    question: 'R₁ = 3 Ом и R₂ = 6 Ом параллельно. Общее сопротивление?',
+    options: ['9 Ом', '4.5 Ом', '2 Ом', '18 Ом'],
+    correctIndex: 2,
+  });
+}
+
+{
+  const L = lesson(C_EM, S_E3, 'Магнитное поле. Сила Лоренца', 3);
+  let b = 0;
+  block(L, 'heading', ++b, { level: 2, text: 'Магнитное поле' });
+  block(L, 'formula', ++b, { label: 'Сила Лоренца', tex: 'F = qvB\\sin\\alpha' });
+  block(L, 'formula', ++b, { label: 'Сила Ампера', tex: 'F = BIl\\sin\\alpha' });
+  block(L, 'callout', ++b, { style: 'info', text: 'Направление силы Лоренца — правило левой руки: пальцы по v (+), ладонь на B, большой палец — F.' });
+  block(L, 'formula', ++b, { label: 'Радиус кругового движения заряда', tex: 'r = \\dfrac{mv}{qB}' });
+  block(L, 'formula', ++b, { label: 'Закон Фарадея (ЭДС индукции)', tex: '\\mathcal{E} = -\\dfrac{\\Delta\\Phi}{\\Delta t}, \\quad \\Phi = BS\\cos\\alpha' });
+  block(L, 'callout', ++b, { style: 'warning', text: 'Знак «−» — правило Ленца: индукционный ток противодействует изменению потока.' });
+  block(L, 'quiz', ++b, {
+    question: 'Протон (q=1.6·10⁻¹⁹, m=1.67·10⁻²⁷ кг) летит v=10⁶ м/с ⊥ полю B=0.1 Тл. Радиус?',
+    options: ['≈ 0.1 м', '≈ 0.01 м', '≈ 1 м', '≈ 10 м'],
+    correctIndex: 0,
+  });
+}
+
+{
+  const L = lesson(C_EM, S_E3, 'Колебательный контур и переменный ток', 4);
+  let b = 0;
+  block(L, 'heading', ++b, { level: 2, text: 'Электромагнитные колебания' });
+  block(L, 'formula', ++b, { label: 'Формула Томсона', tex: 'T = 2\\pi\\sqrt{LC}' });
+  block(L, 'formula', ++b, { label: 'Действующее значение', tex: 'I_{\\text{rms}} = \\dfrac{I_m}{\\sqrt{2}} \\approx 0.707\\, I_m' });
+  block(L, 'callout', ++b, { style: 'info', text: 'Приборы измеряют действующее значение. В розетке 220 В — это RMS, амплитуда ≈ 311 В.' });
+  block(L, 'formula', ++b, { label: 'Резонанс (X_L = X_C)', tex: '\\omega_0 = \\dfrac{1}{\\sqrt{LC}}, \\quad Z_{\\min} = R' });
+  block(L, 'quiz', ++b, {
+    question: 'Контур L=0.1 Гн, C=10 мкФ. Частота?',
+    options: ['≈ 159 Гц', '≈ 16 Гц', '≈ 1590 Гц', '≈ 100 Гц'],
+    correctIndex: 0,
+  });
+  block(L, 'flashcard', ++b, { front: 'Формула Томсона', back: 'T = 2π√(LC) — период свободных колебаний контура' });
+}
+
+/* ══════════════════════════════════════════════════════════════
+   КУРС: Оптика и волны  [phys]
+   ══════════════════════════════════════════════════════════════ */
+const C_OPT = course('phys', 'Оптика и волны',
+  'Геометрическая оптика, линзы, волновые явления: интерференция, дифракция', '🔭', 3);
+const S_O1 = section(C_OPT, 'Геометрическая оптика', 1);
+const S_O2 = section(C_OPT, 'Волновая оптика', 2);
+
+{
+  const L = lesson(C_OPT, S_O1, 'Отражение и преломление света', 1);
+  let b = 0;
+  block(L, 'heading', ++b, { level: 2, text: 'Законы геометрической оптики' });
+  block(L, 'callout', ++b, { style: 'info', text: 'c ≈ 3·10⁸ м/с. В среде с n: v = c/n. Стекло: n ≈ 1.5, вода: n ≈ 1.33.' });
+  block(L, 'formula', ++b, { label: 'Закон отражения', tex: '\\alpha_1 = \\alpha_2' });
+  block(L, 'formula', ++b, { label: 'Закон Снеллиуса', tex: 'n_1 \\sin\\alpha_1 = n_2 \\sin\\alpha_2' });
+  block(L, 'formula', ++b, { label: 'Критический угол полного отражения', tex: '\\sin\\theta_c = \\dfrac{n_2}{n_1}' });
+  block(L, 'text', ++b, { text: 'При переходе из более плотной среды (n₁ > n₂) при угле > θc возникает полное внутреннее отражение. На этом работает оптоволокно.' });
+  block(L, 'quiz', ++b, {
+    question: 'Луч из воды (n=1.33) в воздух (n=1). Критический угол?',
+    options: ['sin⁻¹(0.75) ≈ 48.75°', '90°', '45°', '30°'],
+    correctIndex: 0,
+  });
+}
+
+{
+  const L = lesson(C_OPT, S_O1, 'Линзы', 2);
+  let b = 0;
+  block(L, 'heading', ++b, { level: 2, text: 'Тонкая линза' });
+  block(L, 'formula', ++b, { label: 'Формула тонкой линзы', tex: '\\dfrac{1}{f} = \\dfrac{1}{d} + \\dfrac{1}{v}' });
+  block(L, 'formula', ++b, { label: 'Увеличение', tex: 'M = \\dfrac{|v|}{d}' });
+  block(L, 'table', ++b, {
+    header: ['Положение предмета', 'Изображение', 'Применение'],
+    rows: [
+      ['d > 2f', 'Действит., уменьш., перевёрн.', 'Объективы'],
+      ['f < d < 2f', 'Действит., увелич., перевёрн.', 'Проекторы'],
+      ['d < f', 'Мнимое, увелич., прямое', 'Лупа, очки'],
+    ],
+  });
+  block(L, 'accordion', ++b, {
+    title: 'Пример: f = 10 см, d = 15 см → где изображение?',
+    content: '1/v = 1/10 − 1/15 = 1/30 → v = 30 см\nМ = 30/15 = 2 (увеличенное, перевёрнутое)',
+  });
+  block(L, 'quiz', ++b, {
+    question: 'Линза f=10 см, предмет d=15 см. Изображение?',
+    options: ['30 см', '−30 см', '20 см', '15 см'],
+    correctIndex: 0,
+  });
+  block(L, 'flashcard', ++b, { front: 'Формула тонкой линзы', back: '1/f = 1/d + 1/v\nf > 0 — собирающая, f < 0 — рассеивающая' });
+}
+
+{
+  const L = lesson(C_OPT, S_O2, 'Интерференция и дифракция', 3);
+  let b = 0;
+  block(L, 'heading', ++b, { level: 2, text: 'Волновые свойства света' });
+  block(L, 'text', ++b, { text: 'Свет — поперечная ЭМ волна. Длина волны: фиолетовый ≈ 400 нм, красный ≈ 700 нм.' });
+  block(L, 'formula', ++b, { label: 'Максимум интерференции', tex: '\\Delta = m\\lambda, \\quad m = 0, \\pm1, \\pm2, \\ldots' });
+  block(L, 'formula', ++b, { label: 'Минимум интерференции', tex: '\\Delta = (2m+1)\\dfrac{\\lambda}{2}' });
+  block(L, 'formula', ++b, { label: 'Дифракционная решётка', tex: 'd \\sin\\theta = m\\lambda' });
+  block(L, 'formula', ++b, { label: 'Закон Малюса (поляризация)', tex: 'I = I_0 \\cos^2\\theta' });
+  block(L, 'quiz', ++b, {
+    question: 'Решётка d=2 мкм, λ=600 нм, m=1. Угол θ?',
+    options: ['17.5°', '30°', '15°', '45°'],
+    correctIndex: 0,
+  });
+}
+
+/* ══════════════════════════════════════════════════════════════
+   КУРС: Строение вещества  [chem]
+   ══════════════════════════════════════════════════════════════ */
+const C_ATOM = course('chem', 'Строение вещества',
+  'Атом, электронные оболочки, периодический закон, химическая связь', '⚛️', 1);
+const S_A1 = section(C_ATOM, 'Строение атома', 1);
+const S_A2 = section(C_ATOM, 'Периодический закон', 2);
+const S_A3 = section(C_ATOM, 'Химическая связь', 3);
+
+{
+  const L = lesson(C_ATOM, S_A1, 'Модели атома', 1);
+  let b = 0;
+  block(L, 'heading', ++b, { level: 2, text: 'Строение атома' });
+  block(L, 'text', ++b, { text: 'Атом = ядро (протоны p⁺ + нейтроны n⁰) + электронная оболочка (e⁻).' });
+  block(L, 'callout', ++b, { style: 'info', text: 'Протон: заряд +1, масса ≈ 1 а.е.м.\nНейтрон: заряд 0, масса ≈ 1 а.е.м.\nЭлектрон: заряд −1, масса ≈ 1/1836 а.е.м.' });
+  block(L, 'formula', ++b, { label: 'Массовое число', tex: 'A = Z + N' });
+  block(L, 'text', ++b, { text: 'Z — число протонов (порядковый номер). N — число нейтронов. Изотопы — одинаковый Z, разный N.' });
+  block(L, 'quiz', ++b, {
+    question: 'Сколько нейтронов в ²⁷₁₃Al?',
+    options: ['13', '14', '27', '40'],
+    correctIndex: 1,
+  });
+}
+
+{
+  const L = lesson(C_ATOM, S_A1, 'Электронные оболочки', 2);
+  let b = 0;
+  block(L, 'heading', ++b, { level: 2, text: 'Электронные оболочки атома' });
+  block(L, 'text', ++b, { text: 'Электроны занимают энергетические уровни n = 1, 2, 3… Максимум на уровне: 2n².' });
+  block(L, 'table', ++b, {
+    header: ['Уровень n', 'Обозначение', 'Макс. e⁻', 'Подуровни'],
+    rows: [['1', 'K', '2', 's'], ['2', 'L', '8', 's, p'], ['3', 'M', '18', 's, p, d'], ['4', 'N', '32', 's, p, d, f']],
+  });
+  block(L, 'text', ++b, { text: 'Порядок заполнения: 1s→2s→2p→3s→3p→4s→3d→4p→…\n\nПринцип Паули: ≤ 2 e⁻ на орбитали.\nПравило Гунда: на одном подуровне сначала по одному.\nПравило Клечковского: порядок по (n+l).' });
+  block(L, 'callout', ++b, { style: 'success', text: 'Углерод (Z=6): 1s² 2s² 2p² — на 2p два электрона на разных орбиталях (правило Гунда).' });
+  block(L, 'quiz', ++b, {
+    question: 'Электронная конфигурация Na (Z=11)?',
+    options: ['1s² 2s² 2p⁶ 3s¹', '1s² 2s² 2p⁷', '1s² 2s² 2p⁶ 3p¹', '1s² 2s² 3s² 3p⁵'],
+    correctIndex: 0,
+  });
+  block(L, 'flashcard', ++b, { front: 'Макс. e⁻ на 3-м уровне?', back: '2n² = 18\n3s²(2) + 3p⁶(6) + 3d¹⁰(10) = 18' });
+}
+
+{
+  const L = lesson(C_ATOM, S_A2, 'Периодический закон Менделеева', 3);
+  let b = 0;
+  block(L, 'heading', ++b, { level: 2, text: 'Периодический закон' });
+  block(L, 'text', ++b, { text: 'Свойства элементов периодически зависят от заряда ядра.\n\nПериод — строка (номер = число уровней). Группа — столбец (сходные свойства).' });
+  block(L, 'columns', ++b, {
+    cols: [
+      { content: '<strong>В периоде (→):</strong><br>Z растёт<br>Радиус ↓<br>ЭО ↑<br>Металл. свойства ↓' },
+      { content: '<strong>В группе (↓):</strong><br>Радиус ↑<br>ЭО ↓<br>Металл. свойства ↑' },
+    ],
+  });
+  block(L, 'callout', ++b, { style: 'success', text: 'Самый электроотрицательный элемент — F (правый верхний). Самый активный металл — Fr (левый нижний).' });
+  block(L, 'quiz', ++b, {
+    question: 'Какой элемент имеет наибольший атомный радиус: Li, Na, K, Rb?',
+    options: ['Li', 'Na', 'K', 'Rb'],
+    correctIndex: 3,
+  });
+}
+
+{
+  const L = lesson(C_ATOM, S_A3, 'Типы химической связи', 4);
+  let b = 0;
+  block(L, 'heading', ++b, { level: 2, text: 'Химическая связь' });
+  block(L, 'table', ++b, {
+    header: ['Тип', 'Механизм', 'Пример', 'Прочность'],
+    rows: [
+      ['Ковалентная неполярная', 'Обобществление e⁻ (одинак. атомы)', 'H₂, Cl₂', 'Высокая'],
+      ['Ковалентная полярная', 'Обобществление e⁻ (разные неМе)', 'HCl, H₂O', 'Высокая'],
+      ['Ионная', 'Передача e⁻ (Ме+неМе)', 'NaCl, CaO', 'Высокая'],
+      ['Металлическая', 'Электронный газ', 'Fe, Cu', 'Средняя'],
+      ['Водородная', 'H···F/O/N', 'H₂O···H₂O', 'Низкая'],
+    ],
+  });
+  block(L, 'callout', ++b, { style: 'info', text: 'Водородная связь объясняет аномально высокую t° кипения воды (100°C против −80°C у H₂S).' });
+  block(L, 'quiz', ++b, {
+    question: 'Тип связи в NaCl?',
+    options: ['Ковалентная неполярная', 'Ковалентная полярная', 'Ионная', 'Металлическая'],
+    correctIndex: 2,
+  });
+  block(L, 'flashcard', ++b, { front: 'Чем отличается ковалентная полярная от неполярной?', back: 'Полярная: e⁻ пара смещена к более ЭО атому (разные эл-ты).\nНеполярная: e⁻ пара симметрична (одинаковые эл-ты).' });
+}
+
+/* ══════════════════════════════════════════════════════════════
+   КУРС: Органическая химия  [chem]
+   ══════════════════════════════════════════════════════════════ */
+const C_ORG = course('chem', 'Органическая химия',
+  'Углеводороды, кислородсодержащие соединения, биополимеры', '🧪', 2);
+const S_G1 = section(C_ORG, 'Углеводороды', 1);
+const S_G2 = section(C_ORG, 'Кислородсодержащие', 2);
+const S_G3 = section(C_ORG, 'Биополимеры', 3);
+
+{
+  const L = lesson(C_ORG, S_G1, 'Алканы — предельные углеводороды', 1);
+  let b = 0;
+  block(L, 'heading', ++b, { level: 2, text: 'Алканы CₙH₂ₙ₊₂' });
+  block(L, 'formula', ++b, { tex: 'C_n H_{2n+2}' });
+  block(L, 'text', ++b, { text: 'Все связи C–C и C–H одинарные (σ-связи). Метан CH₄, этан C₂H₆, пропан C₃H₈, бутан C₄H₁₀…\n\nС C₄ возможна структурная изомерия.' });
+  block(L, 'text', ++b, { text: 'Химические свойства:\n1. Горение: CH₄ + 2O₂ → CO₂ + 2H₂O\n2. Замещение: CH₄ + Cl₂ → CH₃Cl + HCl (свет, SR)\n3. Крекинг: C₁₀H₂₂ → C₅H₁₂ + C₅H₁₀' });
+  block(L, 'callout', ++b, { style: 'warning', text: 'Реакции присоединения (AE) для алканов НЕВОЗМОЖНЫ — нет π-связей. Это главное отличие от алкенов.' });
+  block(L, 'quiz', ++b, {
+    question: 'Общая формула алканов?',
+    options: ['CₙHₙ', 'CₙH₂ₙ', 'CₙH₂ₙ₊₂', 'CₙH₂ₙ₋₂'],
+    correctIndex: 2,
+  });
+  block(L, 'flashcard', ++b, { front: 'Алканы / алкены / алкины — общие формулы?', back: 'Алканы: CₙH₂ₙ₊₂\nАлкены: CₙH₂ₙ\nАлкины: CₙH₂ₙ₋₂' });
+}
+
+{
+  const L = lesson(C_ORG, S_G1, 'Алкены и алкины', 2);
+  let b = 0;
+  block(L, 'heading', ++b, { level: 2, text: 'Ненасыщенные углеводороды' });
+  block(L, 'formula', ++b, { label: 'Алкены', tex: 'C_n H_{2n}' });
+  block(L, 'formula', ++b, { label: 'Алкины', tex: 'C_n H_{2n-2}' });
+  block(L, 'text', ++b, { text: 'Реакции присоединения алкенов:\n1. Гидрирование: CH₂=CH₂ + H₂ → C₂H₆ (Ni, t°)\n2. Галогенирование: CH₂=CH₂ + Br₂ → CH₂BrCH₂Br (обесцвечивает бромную воду!)\n3. Гидратация: CH₂=CH₂ + H₂O → C₂H₅OH\n4. Полимеризация: nCH₂=CH₂ → (CH₂–CH₂)ₙ' });
+  block(L, 'callout', ++b, { style: 'info', text: 'Правило Марковникова: H присоединяется к более гидрогенизированному углероду несимметричного алкена.' });
+  block(L, 'quiz', ++b, {
+    question: 'Какая реакция невозможна для алканов?',
+    options: ['Горение', 'Замещение', 'Присоединение', 'Крекинг'],
+    correctIndex: 2,
+  });
+}
+
+{
+  const L = lesson(C_ORG, S_G2, 'Спирты и карбоновые кислоты', 3);
+  let b = 0;
+  block(L, 'heading', ++b, { level: 2, text: 'Кислородсодержащие соединения' });
+  block(L, 'matching', ++b, {
+    question: 'Класс → функциональная группа:',
+    pairs: [
+      { left: 'Спирт', right: '–OH' },
+      { left: 'Альдегид', right: '–CHO' },
+      { left: 'Кислота', right: '–COOH' },
+      { left: 'Амин', right: '–NH₂' },
+    ],
+  });
+  block(L, 'text', ++b, { text: 'Свойства спиртов:\n1. + Na: 2C₂H₅OH + 2Na → 2C₂H₅ONa + H₂↑\n2. Окисление: C₂H₅OH → CH₃CHO → CH₃COOH\n3. Дегидратация (140°): → эфир\n4. Дегидратация (170°): C₂H₅OH → CH₂=CH₂ + H₂O' });
+  block(L, 'text', ++b, { text: 'Этерификация (кислота + спирт):\nCH₃COOH + C₂H₅OH ⇌ CH₃COOC₂H₅ + H₂O (кат. H₂SO₄)\n\nРеакция обратима. Продукт — сложный эфир.' });
+  block(L, 'quiz', ++b, {
+    question: 'При дегидратации C₂H₅OH при 170°C образуется:',
+    options: ['Эфир', 'CH₂=CH₂', 'Ацетальдегид', 'Ацетилен'],
+    correctIndex: 1,
+  });
+}
+
+{
+  const L = lesson(C_ORG, S_G3, 'Углеводы и белки', 4);
+  let b = 0;
+  block(L, 'heading', ++b, { level: 2, text: 'Биополимеры' });
+  block(L, 'formula', ++b, { label: 'Углеводы', tex: 'C_n(H_2O)_m' });
+  block(L, 'text', ++b, { text: 'Моносахариды: глюкоза и фруктоза C₆H₁₂O₆ (изомеры).\nДисахариды: сахароза C₁₂H₂₂O₁₁.\nПолисахариды: крахмал, целлюлоза (C₆H₁₀O₅)ₙ.\n\nБрожение: C₆H₁₂O₆ → 2C₂H₅OH + 2CO₂' });
+  block(L, 'text', ++b, { text: 'Белки — полимеры из аминокислот, связанных пептидными связями (–CO–NH–).\n\nСтруктуры: первичная (последовательность), вторичная (α-спираль), третичная (3D-форма), четвертичная (несколько цепей).' });
+  block(L, 'callout', ++b, { style: 'warning', text: 'Денатурация — разрушение вторичной и выше структур (не первичной). Причины: нагрев, кислоты, щёлочи. Необратима.' });
+  block(L, 'quiz', ++b, {
+    question: 'Какая связь соединяет аминокислоты в белке?',
+    options: ['Ионная', 'Водородная', 'Пептидная (–CO–NH–)', 'Дисульфидная'],
+    correctIndex: 2,
+  });
+  block(L, 'timeline', ++b, {
+    items: [
+      { date: '1869', title: 'ДНК выделена Мишером', text: 'Из лейкоцитов выделено «нуклеиновое вещество».' },
+      { date: '1944', title: 'ДНК — носитель наследственности', text: 'Эйвери показал: именно ДНК передаёт наследственную информацию.' },
+      { date: '1953', title: 'Двойная спираль', text: 'Уотсон и Крик предложили модель двойной спирали ДНК.' },
+    ],
+  });
+}
+
+/* ══════════════════════════════════════════════════════════════
+   КУРС: Клетка и генетика  [bio]
+   ══════════════════════════════════════════════════════════════ */
+const C_BIO = course('bio', 'Клетка и генетика',
+  'Строение клетки, фотосинтез, клеточное дыхание, законы Менделя, ДНК и синтез белка', '🧬', 1);
+const S_B1 = section(C_BIO, 'Строение клетки', 1);
+const S_B2 = section(C_BIO, 'Обмен веществ', 2);
+const S_B3 = section(C_BIO, 'Генетика', 3);
+
+{
+  const L = lesson(C_BIO, S_B1, 'Строение эукариотической клетки', 1);
+  let b = 0;
+  block(L, 'heading', ++b, { level: 2, text: 'Строение клетки' });
+  block(L, 'callout', ++b, { style: 'info', text: 'Прокариоты (бактерии) — нет ядра и мембранных органоидов. Эукариоты (животные, растения, грибы) — есть ядро.' });
+  block(L, 'table', ++b, {
+    header: ['Органоид', 'Функция'],
+    rows: [
+      ['Клеточная мембрана', 'Барьер, транспорт, рецепция'],
+      ['Ядро', 'Хранение ДНК, регуляция'],
+      ['Митохондрии', 'Синтез АТФ (дыхание)'],
+      ['Рибосомы', 'Синтез белков'],
+      ['ЭПС шероховатая', 'Синтез и транспорт белков'],
+      ['Аппарат Гольджи', 'Модификация, упаковка белков'],
+      ['Лизосомы', 'Переваривание (аутолиз)'],
+      ['Хлоропласты', 'Фотосинтез (только у растений)'],
+    ],
+  });
+  block(L, 'diagram', ++b, {
+    code: "graph LR\n  A[Профаза] --> B[Метафаза] --> C[Анафаза] --> D[Телофаза]\n  D --> E[2 дочерние клетки 2n]",
+    caption: 'Фазы митоза',
+  });
+  block(L, 'quiz', ++b, {
+    question: 'Какой органоид синтезирует АТФ?',
+    options: ['Рибосома', 'Хлоропласт', 'Митохондрия', 'Лизосома'],
+    correctIndex: 2,
+  });
+  block(L, 'flashcard', ++b, { front: 'Митоз vs мейоз?', back: 'Митоз: 2n → 2n (соматические, идентичные)\nМейоз: 2n → n (гаметы, 2 деления, кроссинговер)' });
+}
+
+{
+  const L = lesson(C_BIO, S_B2, 'Фотосинтез и клеточное дыхание', 2);
+  let b = 0;
+  block(L, 'heading', ++b, { level: 2, text: 'Энергетический обмен клетки' });
+  block(L, 'formula', ++b, { label: 'Фотосинтез', tex: '6CO_2 + 6H_2O \\xrightarrow{h\\nu} C_6H_{12}O_6 + 6O_2' });
+  block(L, 'columns', ++b, {
+    cols: [
+      { content: '<strong>Световые реакции</strong> (тилакоиды):<br>Фотолиз воды → O₂<br>АТФ (фотофосфорилирование)<br>НАДФН' },
+      { content: '<strong>Тёмновые реакции</strong> (строма, цикл Калвина):<br>Фиксация CO₂<br>Синтез глюкозы<br>Расход АТФ и НАДФН' },
+    ],
+  });
+  block(L, 'formula', ++b, { label: 'Клеточное дыхание', tex: 'C_6H_{12}O_6 + 6O_2 \\rightarrow 6CO_2 + 6H_2O + 38\\,\\text{АТФ}' });
+  block(L, 'table', ++b, {
+    header: ['Этап', 'Место', 'АТФ'],
+    rows: [
+      ['Гликолиз', 'Цитоплазма', '2'],
+      ['Цикл Кребса', 'Матрикс митохондрий', '2'],
+      ['Окислит. фосфорилирование', 'Внутр. мембрана митохондрий', '34'],
+    ],
+  });
+  block(L, 'callout', ++b, { style: 'info', text: 'Без O₂: анаэробный гликолиз → 2 АТФ. Аэробное дыхание → 38 АТФ, в 19 раз эффективнее!' });
+  block(L, 'quiz', ++b, {
+    question: 'На каком этапе дыхания выделяется CO₂?',
+    options: ['Гликолиз', 'Цикл Кребса', 'Окислительное фосфорилирование', 'Все этапы'],
+    correctIndex: 1,
+  });
+}
+
+{
+  const L = lesson(C_BIO, S_B3, 'Законы Менделя', 3);
+  let b = 0;
+  block(L, 'heading', ++b, { level: 2, text: 'Генетика наследственности' });
+  block(L, 'text', ++b, { text: 'Ген — участок ДНК, кодирующий признак. Аллели — варианты гена. Доминантный (A) подавляет рецессивный (a). Генотип — набор генов, фенотип — его проявление.' });
+  block(L, 'table', ++b, {
+    header: ['Скрещивание', 'Расщепление F₂ по фенотипу'],
+    rows: [
+      ['Aa × Aa (моногибридное)', '3:1'],
+      ['AaBb × AaBb (дигибридное)', '9:3:3:1'],
+      ['Aa × Aa (неполное доминирование)', '1:2:1'],
+      ['Aa × aa (анализирующее)', '1:1'],
+    ],
+  });
+  block(L, 'callout', ++b, { style: 'warning', text: 'III закон (независимое наследование) нарушается при сцеплении генов — если они в одной хромосоме.' });
+  block(L, 'quiz', ++b, {
+    question: 'Скрещивание Aa × Aa. Вероятность фенотипа aa?',
+    options: ['25%', '50%', '75%', '100%'],
+    correctIndex: 0,
+  });
+  block(L, 'flashcard', ++b, { front: 'II закон Менделя (расщепление)', back: 'Aa × Aa:\nФенотип: 3 доминантных : 1 рецессивный\nГенотип: 1 AA : 2 Aa : 1 aa' });
+}
+
+{
+  const L = lesson(C_BIO, S_B3, 'ДНК и синтез белка', 4);
+  let b = 0;
+  block(L, 'heading', ++b, { level: 2, text: 'Молекула ДНК и реализация наследственности' });
+  block(L, 'text', ++b, { text: 'ДНК — двойная спираль. Принцип комплементарности: A–T (2 связи), G–C (3 связи).\nПравило Чаргаффа: %A = %T, %G = %C.' });
+  block(L, 'columns', ++b, {
+    cols: [
+      { content: '<strong>Транскрипция</strong> (ядро):<br>ДНК → мРНК<br>РНК-полимераза<br>T заменяется на U' },
+      { content: '<strong>Трансляция</strong> (рибосомы):<br>мРНК → белок<br>Кодон = 3 нуклеотида<br>Код универсален' },
+    ],
+  });
+  block(L, 'formula', ++b, { label: 'Нуклеотиды ↔ аминокислоты', tex: 'N_{\\text{нукл}} = 3 \\times N_{\\text{а.к.}}' });
+  block(L, 'diagram', ++b, {
+    code: "graph LR\n  DNA[ДНК] -->|Репликация| DNA2[ДНК-копия]\n  DNA -->|Транскрипция| mRNA[мРНК]\n  mRNA -->|Трансляция| P[Белок]",
+    caption: 'Центральная догма молекулярной биологии',
+  });
+  block(L, 'quiz', ++b, {
+    question: 'В ДНК 30% аденина. Сколько % тимина?',
+    options: ['30%', '20%', '70%', '60%'],
+    correctIndex: 0,
+  });
+  block(L, 'alert', ++b, { style: 'exam', text: 'В мРНК нет тимина — только урацил. При транскрипции: A→U, T→A, G→C, C→G.' });
+}
+
+/* ══════════════════════════════════════════════════════════════
+   КУРС: Алгоритмы и структуры данных  [inf]
+   ══════════════════════════════════════════════════════════════ */
+const C_ALG = course('inf', 'Алгоритмы и структуры данных',
+  'Сложность, сортировки, деревья и графы', '💻', 1);
+const S_L1 = section(C_ALG, 'Основы', 1);
+const S_L2 = section(C_ALG, 'Сортировки', 2);
+const S_L3 = section(C_ALG, 'Структуры данных', 3);
+
+{
+  const L = lesson(C_ALG, S_L1, 'Сложность алгоритмов (O-нотация)', 1);
+  let b = 0;
+  block(L, 'heading', ++b, { level: 2, text: 'Big-O нотация' });
+  block(L, 'text', ++b, { text: 'O-нотация описывает верхнюю оценку роста времени выполнения при n→∞. Константы и малые слагаемые игнорируются: O(2n) = O(n).' });
+  block(L, 'table', ++b, {
+    header: ['Сложность', 'Название', 'Пример'],
+    rows: [
+      ['O(1)', 'Константная', 'Доступ к элементу массива'],
+      ['O(log n)', 'Логарифмическая', 'Бинарный поиск'],
+      ['O(n)', 'Линейная', 'Линейный поиск'],
+      ['O(n log n)', 'Квазилинейная', 'Быстрая сортировка'],
+      ['O(n²)', 'Квадратичная', 'Сортировка пузырьком'],
+      ['O(2ⁿ)', 'Экспоненциальная', 'Перебор подмножеств'],
+    ],
+  });
+  block(L, 'code', ++b, {
+    lang: 'python',
+    code: `# O(log n) — бинарный поиск
+def binary_search(arr, target):
+    left, right = 0, len(arr) - 1
+    while left <= right:
+        mid = (left + right) // 2
+        if arr[mid] == target:   return mid
+        elif arr[mid] < target:  left = mid + 1
+        else:                    right = mid - 1
+    return -1`,
+  });
+  block(L, 'quiz', ++b, {
+    question: 'Два вложенных цикла по n элементам — сложность?',
+    options: ['O(n)', 'O(n log n)', 'O(n²)', 'O(2ⁿ)'],
+    correctIndex: 2,
+  });
+  block(L, 'flashcard', ++b, { front: 'O(n log n) vs O(n²) при n=1000?', back: 'O(n log n) ≈ 10 000 оп.\nO(n²) = 1 000 000 оп.\nРазница в 100 раз!' });
+}
+
+{
+  const L = lesson(C_ALG, S_L2, 'Алгоритмы сортировки', 2);
+  let b = 0;
+  block(L, 'heading', ++b, { level: 2, text: 'Сравнение алгоритмов сортировки' });
+  block(L, 'table', ++b, {
+    header: ['Алгоритм', 'Лучшее', 'Среднее', 'Худшее', 'Память'],
+    rows: [
+      ['Пузырьковая', 'O(n)', 'O(n²)', 'O(n²)', 'O(1)'],
+      ['Вставками', 'O(n)', 'O(n²)', 'O(n²)', 'O(1)'],
+      ['Слиянием', 'O(n log n)', 'O(n log n)', 'O(n log n)', 'O(n)'],
+      ['Быстрая', 'O(n log n)', 'O(n log n)', 'O(n²)', 'O(log n)'],
+      ['Кучей', 'O(n log n)', 'O(n log n)', 'O(n log n)', 'O(1)'],
+    ],
+  });
+  block(L, 'code', ++b, {
+    lang: 'python',
+    code: `def quicksort(arr):
+    if len(arr) <= 1: return arr
+    pivot = arr[len(arr) // 2]
+    left  = [x for x in arr if x < pivot]
+    mid   = [x for x in arr if x == pivot]
+    right = [x for x in arr if x > pivot]
+    return quicksort(left) + mid + quicksort(right)`,
+  });
+  block(L, 'callout', ++b, { style: 'warning', text: 'QuickSort в худшем случае (уже отсортированный + крайний pivot) деградирует до O(n²). Решение: случайный pivot.' });
+  block(L, 'ordering', ++b, {
+    question: 'Шаги сортировки слиянием в правильном порядке:',
+    items: [
+      'Разделить массив на две половины',
+      'Рекурсивно отсортировать левую',
+      'Рекурсивно отсортировать правую',
+      'Слить две отсортированные половины',
+    ],
+  });
+  block(L, 'quiz', ++b, {
+    question: 'Какая сортировка гарантирует O(n log n) в худшем случае без доп. памяти?',
+    options: ['Быстрая', 'Слиянием', 'Кучей (HeapSort)', 'Пузырьковая'],
+    correctIndex: 2,
+  });
+}
+
+{
+  const L = lesson(C_ALG, S_L3, 'Деревья и графы', 3);
+  let b = 0;
+  block(L, 'heading', ++b, { level: 2, text: 'Бинарное дерево поиска (BST)' });
+  block(L, 'text', ++b, { text: 'В BST: всё левое поддерево < узел < всё правое. Поиск/вставка/удаление: O(h). У сбалансированного дерева h = O(log n).' });
+  block(L, 'code', ++b, {
+    lang: 'python',
+    code: `class Node:
+    def __init__(self, val):
+        self.val = val
+        self.left = self.right = None
+
+def insert(root, val):
+    if not root: return Node(val)
+    if val < root.val: root.left  = insert(root.left,  val)
+    else:              root.right = insert(root.right, val)
+    return root
+
+def inorder(root):     # обход: лево → корень → право
+    if root:
+        inorder(root.left)
+        print(root.val, end=' ')
+        inorder(root.right)`,
+  });
+  block(L, 'heading', ++b, { level: 3, text: 'Графы' });
+  block(L, 'table', ++b, {
+    header: ['Алгоритм', 'Задача', 'Сложность'],
+    rows: [
+      ['BFS', 'Кратчайший путь (без весов)', 'O(V+E)'],
+      ['DFS', 'Обход, топосортировка', 'O(V+E)'],
+      ['Dijkstra', 'Кратчайший путь (≥0 веса)', 'O((V+E) log V)'],
+      ['Bellman–Ford', 'Кратчайший путь (любые веса)', 'O(V·E)'],
+    ],
+  });
+  block(L, 'diagram', ++b, {
+    code: "graph TD\n  A((A)) -- 4 --> B((B))\n  A -- 2 --> C((C))\n  B -- 1 --> D((D))\n  C -- 5 --> D\n  B -- 3 --> E((E))\n  D -- 1 --> E",
+    caption: 'Взвешенный граф',
+  });
+  block(L, 'quiz', ++b, {
+    question: 'Какой алгоритм находит кратчайшие пути при отрицательных весах рёбер?',
+    options: ['Dijkstra', 'BFS', 'Bellman–Ford', 'DFS'],
+    correctIndex: 2,
+  });
+  block(L, 'flashcard', ++b, { front: 'BFS vs DFS?', back: 'BFS — очередь, обход по уровням, кратчайший путь (без весов).\nDFS — стек/рекурсия, идёт вглубь, топосортировка, компоненты связности.' });
+}
+
+// ── Итог ──────────────────────────────────────────────────────────────
+console.log(`✓ Theory seed complete:
+  [math] Тригонометрия              (id=${C_TRIG}) — 4 урока
+  [math] Производные и интегралы    (id=${C_CALC}) — 4 урока
+  [math] Теория вероятностей        (id=${C_PROB}) — 3 урока
+  [phys] Механика                   (id=${C_MECH}) — 4 урока
+  [phys] Электричество и магнетизм  (id=${C_EM})   — 4 урока
+  [phys] Оптика и волны             (id=${C_OPT})  — 3 урока
+  [chem] Строение вещества          (id=${C_ATOM}) — 4 урока
+  [chem] Органическая химия         (id=${C_ORG})  — 4 урока
+  [bio]  Клетка и генетика          (id=${C_BIO})  — 4 урока
+  [inf]  Алгоритмы                  (id=${C_ALG})  — 3 урока
+  Итого: 37 уроков`);
+
+})(); // end transaction
diff --git a/backend/src/db/seed.js b/backend/src/db/seed.js
new file mode 100644
index 0000000..f3bbb50
--- /dev/null
+++ b/backend/src/db/seed.js
@@ -0,0 +1,63 @@
+const fs   = require('fs');
+const path = require('path');
+const db   = require('./db');
+
+const dataDir = path.join(__dirname, '../../data');
+const files   = fs.readdirSync(dataDir).filter(f => f.endsWith('.json'));
+
+for (const file of files) {
+  const data = JSON.parse(fs.readFileSync(path.join(dataDir, file), 'utf8'));
+  console.log(`\nSeeding: ${file} (subject: ${data.subject})`);
+
+  const subject = db.prepare('SELECT id FROM subjects WHERE slug = ?').get(data.subject);
+  if (!subject) {
+    console.error(`Subject "${data.subject}" not found. Run migrate first.`);
+    continue;
+  }
+  const subject_id = subject.id;
+
+  /* topics */
+  const topicMap = {};
+  const insertTopic = db.prepare(
+    'INSERT OR IGNORE INTO topics (subject_id, name, order_index) VALUES (?, ?, ?)'
+  );
+  for (const t of data.topics) {
+    insertTopic.run(subject_id, t.name, t.order);
+    const row = db.prepare('SELECT id FROM topics WHERE subject_id = ? AND name = ?')
+                  .get(subject_id, t.name);
+    topicMap[t.name] = row.id;
+  }
+
+  /* questions + options inside a transaction (idempotent — skip existing by text) */
+  const checkQ = db.prepare('SELECT id FROM questions WHERE subject_id = ? AND text = ?');
+  const insertQ = db.prepare(
+    'INSERT INTO questions (subject_id, topic_id, text, difficulty, explanation) VALUES (?, ?, ?, ?, ?)'
+  );
+  const insertO = db.prepare(
+    'INSERT INTO options (question_id, text, is_correct, order_index) VALUES (?, ?, ?, ?)'
+  );
+
+  let added = 0, skipped = 0;
+  db.exec('BEGIN');
+  try {
+    for (const q of data.questions) {
+      if (checkQ.get(subject_id, q.text)) { skipped++; continue; }
+      const topic_id = topicMap[q.topic] ?? null;
+      insertQ.run(subject_id, topic_id, q.text, q.difficulty, q.explanation ?? null);
+      const { id: question_id } = db.prepare('SELECT last_insert_rowid() AS id').get();
+      for (let i = 0; i < q.options.length; i++) {
+        insertO.run(question_id, q.options[i], i === q.answer ? 1 : 0, i);
+      }
+      process.stdout.write('.');
+      added++;
+    }
+    db.exec('COMMIT');
+  } catch (err) {
+    db.exec('ROLLBACK');
+    throw err;
+  }
+
+  console.log(`\n✓ Добавлено: ${added}, пропущено (уже есть): ${skipped}`);
+}
+
+console.log('\nSeed complete.');
diff --git a/backend/src/middleware/auth.js b/backend/src/middleware/auth.js
new file mode 100644
index 0000000..21b0c05
--- /dev/null
+++ b/backend/src/middleware/auth.js
@@ -0,0 +1,154 @@
+const jwt = require('jsonwebtoken');
+const db  = require('../db/db');
+
+/* ── Default values for role_permissions (mirrors permissionsController) ── */
+const PERM_DEFAULTS = {
+  teacher: {
+    'questions.manage':     false,
+    'questions.delete':     false,
+    'students.invite':      false,
+    'sessions.reset':       true,
+    'results.export':       true,
+    'classes.manage':       true,
+    'library.upload':       true,
+    'library.folders':      true,
+    'schedule.manage':      true,
+    'announcements.send':   true,
+    'templates.manage':     true,
+    'templates.public':     false,
+    'courses.manage':       true,
+    'courses.interactive':  true,
+    'shop.manage':          false,
+    'gamification.manage':  false,
+  },
+  student: {
+    'tests.free':              true,
+    'board.post':              true,
+    'profile.edit':            true,
+    'shop.purchase':           true,
+    'gamification.challenges': true,
+    'theory.access':           true,
+    'simulations.access':      true,
+    'simulations.quiz':        true,
+  },
+  free_student: {
+    'tests.free':              true,
+    'board.post':              true,
+    'profile.edit':            true,
+    'shop.purchase':           true,
+    'gamification.challenges': true,
+    'theory.access':           true,
+    'simulations.access':      true,
+    'simulations.quiz':        true,
+  },
+};
+
+function authMiddleware(req, res, next) {
+  const header = req.headers.authorization;
+  if (!header || !header.startsWith('Bearer ')) {
+    return res.status(401).json({ error: 'Unauthorized' });
+  }
+
+  const token = header.slice(7);
+  try {
+    const payload = jwt.verify(token, process.env.JWT_SECRET, { algorithms: ['HS256'] });
+    // Re-fetch role + token_version from DB so changes take effect immediately
+    const fresh = db.prepare('SELECT role, token_version, is_banned FROM users WHERE id = ?').get(payload.id);
+    if (!fresh) return res.status(401).json({ error: 'User not found' });
+    if (fresh.is_banned) return res.status(403).json({ error: 'Аккаунт заблокирован' });
+    // Invalidate tokens issued before password change / role change.
+    // If DB has token_version set, token MUST carry matching tv.
+    // (payload.tv === undefined means old token without version — also revoke)
+    if (fresh.token_version != null && payload.tv !== fresh.token_version) {
+      return res.status(401).json({ error: 'Token revoked — please log in again' });
+    }
+    req.user = { ...payload, role: fresh.role };
+    next();
+  } catch {
+    res.status(401).json({ error: 'Token invalid or expired' });
+  }
+}
+
+function requireRole(...roles) {
+  return (req, res, next) => {
+    if (!roles.includes(req.user?.role)) {
+      return res.status(403).json({ error: 'Forbidden' });
+    }
+    next();
+  };
+}
+
+/* ── Check permission; user override → role override → hardcoded default ── */
+function requirePermission(key) {
+  return (req, res, next) => {
+    if (req.user?.role === 'admin') return next();
+    const role = req.user?.role;
+    const uid  = req.user?.id;
+    if (!role) return res.status(401).json({ error: 'Unauthorized' });
+
+    // 1. User-level override
+    const userRow = db.prepare(
+      'SELECT enabled FROM user_permissions WHERE user_id = ? AND permission = ?'
+    ).get(uid, key);
+    if (userRow !== undefined) {
+      return userRow.enabled === 1 ? next() : res.status(403).json({ error: 'Permission denied' });
+    }
+
+    // 2. Role-level
+    const roleRow = db.prepare(
+      'SELECT enabled FROM role_permissions WHERE role = ? AND permission = ?'
+    ).get(role, key);
+    const enabled = roleRow !== undefined ? roleRow.enabled === 1 : (PERM_DEFAULTS[role]?.[key] ?? false);
+    if (enabled) return next();
+    return res.status(403).json({ error: 'Permission denied' });
+  };
+}
+
+/* ── Parent link JWT auth (separate from user auth) ───────────────────── */
+function parentAuth(req, res, next) {
+  const header = req.headers.authorization;
+  if (!header || !header.startsWith('Bearer '))
+    return res.status(401).json({ error: 'Unauthorized' });
+
+  const token = header.slice(7);
+  try {
+    const payload = jwt.verify(token, process.env.JWT_SECRET, { algorithms: ['HS256'] });
+    if (payload.type !== 'parent')
+      return res.status(401).json({ error: 'Invalid token type' });
+
+    const link = db.prepare(
+      'SELECT id, student_id, is_active, expires_at FROM parent_links WHERE id = ?'
+    ).get(payload.linkId);
+    if (!link || !link.is_active)
+      return res.status(401).json({ error: 'Link revoked' });
+    if (link.expires_at && new Date(link.expires_at) < new Date())
+      return res.status(401).json({ error: 'Link expired' });
+
+    req.parent = { linkId: link.id, studentId: link.student_id };
+    next();
+  } catch {
+    res.status(401).json({ error: 'Token invalid or expired' });
+  }
+}
+
+/* Alias: requireAuth = authMiddleware */
+const requireAuth = authMiddleware;
+
+/* optionalAuth: попытаться установить req.user, но не блокировать при отсутствии токена */
+function optionalAuth(req, res, next) {
+  const header = req.headers.authorization || '';
+  if (!header.startsWith('Bearer ')) return next();
+  const token = header.slice(7);
+  try {
+    const payload = jwt.verify(token, process.env.JWT_SECRET, { algorithms: ['HS256'] });
+    const fresh = db.prepare('SELECT role, token_version, is_banned FROM users WHERE id = ?').get(payload.id);
+    if (fresh && !fresh.is_banned) {
+      if (fresh.token_version == null || payload.tv === fresh.token_version) {
+        req.user = { ...payload, role: fresh.role };
+      }
+    }
+  } catch {}
+  next();
+}
+
+module.exports = { authMiddleware, requireAuth, optionalAuth, requireRole, requirePermission, parentAuth };
diff --git a/backend/src/middleware/errorHandler.js b/backend/src/middleware/errorHandler.js
new file mode 100644
index 0000000..49b9fff
--- /dev/null
+++ b/backend/src/middleware/errorHandler.js
@@ -0,0 +1,77 @@
+'use strict';
+
+/* ── Error handling middleware ─────────────────────────────────────────────
+   requestId  — attach X-Request-Id to every request (use early in middleware chain)
+   errorHandler — 4-arg Express error handler (use as last app.use)
+   ──────────────────────────────────────────────────────────────────────── */
+
+const crypto = require('crypto');
+const logger = require('../utils/logger');
+let _errorLogStmt = null;
+function getErrorLogStmt() {
+  if (!_errorLogStmt) {
+    try {
+      const db = require('../db/db');
+      _errorLogStmt = db.prepare(
+        'INSERT INTO error_log (level, message, stack, route, method, user_id) VALUES (?, ?, ?, ?, ?, ?)'
+      );
+    } catch {}
+  }
+  return _errorLogStmt;
+}
+
+/**
+ * Attaches a unique request ID to req.requestId and sets X-Request-Id header.
+ * Honour an incoming X-Request-Id from trusted proxies/gateways when present.
+ */
+function requestId(req, res, next) {
+  const id = req.headers['x-request-id'] || crypto.randomUUID();
+  req.requestId = id;
+  res.setHeader('X-Request-Id', id);
+  next();
+}
+
+/**
+ * Global error handler — must be registered AFTER all routes.
+ *
+ * Classifies errors:
+ *   operational  (4xx) — expected client errors → warn level, message returned as-is
+ *   programmer   (5xx) — unexpected bugs        → error level, stack logged, message hidden in prod
+ */
+function errorHandler(err, req, res, _next) {
+  const status = err.status || err.statusCode || 500;
+  const isOperational = status >= 400 && status < 500;
+  const isProd = process.env.NODE_ENV === 'production';
+
+  const meta = {
+    requestId: req.requestId,
+    method:    req.method,
+    path:      req.path,
+    status,
+    userId:    req.user?.id,
+    role:      req.user?.role,
+  };
+
+  if (isOperational) {
+    logger.warn(err.message || 'Client error', meta);
+  } else {
+    logger.error(err.message || 'Unhandled error', {
+      ...meta,
+      stack: !isProd ? err.stack : undefined,
+    });
+    // Persist to error_log table for admin dashboard
+    try {
+      const s = getErrorLogStmt();
+      if (s) s.run('error', (err.message || 'Unknown').slice(0, 1000), (err.stack || '').slice(0, 4000), req.path, req.method, req.user?.id || null);
+    } catch {}
+  }
+
+  const message = isProd && !isOperational
+    ? 'Internal server error'
+    : (err.message || 'Server error');
+
+  if (res.headersSent) return;
+  res.status(status).json({ error: message, requestId: req.requestId });
+}
+
+module.exports = { requestId, errorHandler };
diff --git a/backend/src/middleware/ownership.js b/backend/src/middleware/ownership.js
new file mode 100644
index 0000000..98cef49
--- /dev/null
+++ b/backend/src/middleware/ownership.js
@@ -0,0 +1,54 @@
+'use strict';
+const db = require('../db/db');
+
+/**
+ * Factory: returns middleware that loads a resource by req.params[paramKey],
+ * verifies ownership against req.user.id, and attaches the row as req.resource.
+ *
+ * Simple usage (table lookup):
+ *   requireOwnership({ table: 'tests', ownerField: 'created_by' })
+ *
+ * Complex usage (JOIN / aliased field):
+ *   requireOwnership({
+ *     fetchFn: id => db.prepare(`
+ *       SELECT a.id, COALESCE(c.teacher_id, a.created_by) AS teacher_id
+ *       FROM assignments a LEFT JOIN classes c ON c.id = a.class_id WHERE a.id = ?
+ *     `).get(id),
+ *     ownerField: 'teacher_id',
+ *   })
+ *
+ * Options:
+ *   table       — DB table name for `SELECT * FROM {table} WHERE id = ?`
+ *   fetchFn     — (id) => row|undefined  (alternative to `table`)
+ *   ownerField  — row field compared to req.user.id  (required)
+ *   paramKey    — req.params key for the record ID    (default: 'id')
+ *   adminBypass — admin role always passes             (default: true)
+ */
+const ALLOWED_TABLES = new Set(['tests','classes','assignments','questions','courses','lessons','files','folders','shop_items','live_sessions']);
+
+function requireOwnership({ table, fetchFn, ownerField, paramKey = 'id', adminBypass = true }) {
+  if (table && !ALLOWED_TABLES.has(table)) throw new Error(`requireOwnership: unknown table "${table}"`);
+  // Pre-compile statement once at middleware creation (server startup)
+  const stmt  = table ? db.prepare(`SELECT * FROM ${table} WHERE id = ?`) : null;
+  const fetch = fetchFn || (id => stmt.get(id));
+
+  return (req, res, next) => {
+    const row = fetch(req.params[paramKey]);
+
+    if (!row) return res.status(404).json({ error: 'Not found' });
+
+    if (adminBypass && req.user?.role === 'admin') {
+      req.resource = row;
+      return next();
+    }
+
+    if (row[ownerField] !== req.user?.id) {
+      return res.status(403).json({ error: 'Forbidden' });
+    }
+
+    req.resource = row;
+    next();
+  };
+}
+
+module.exports = { requireOwnership };
diff --git a/backend/src/middleware/rateLimit.js b/backend/src/middleware/rateLimit.js
new file mode 100644
index 0000000..926615b
--- /dev/null
+++ b/backend/src/middleware/rateLimit.js
@@ -0,0 +1,40 @@
+/* Simple in-memory rate limiter — no external dependency needed */
+
+// Clean stale entries every 5 minutes across all stores
+const _allStores = new Set();
+setInterval(() => {
+  const now = Date.now();
+  for (const store of _allStores) {
+    for (const [key, entry] of store) {
+      if (now > entry.resetAt) store.delete(key);
+    }
+  }
+}, 5 * 60 * 1000).unref();
+
+module.exports = function rateLimit({ windowMs = 60_000, max = 10, message = 'Too many requests, please try again later' } = {}) {
+  // Skip rate limiting in test environment
+  if (process.env.NODE_ENV === 'test') return (_req, _res, next) => next();
+
+  // Each rateLimit() call gets its own isolated store — counters don't bleed between limiters
+  const store = new Map();
+  _allStores.add(store);
+
+  return (req, res, next) => {
+    const key = req.ip || req.socket?.remoteAddress || 'unknown';
+    const now = Date.now();
+    let entry = store.get(key);
+
+    if (!entry || now > entry.resetAt) {
+      entry = { count: 0, resetAt: now + windowMs };
+    }
+    entry.count++;
+    store.set(key, entry);
+
+    if (entry.count > max) {
+      const retryAfter = Math.ceil((entry.resetAt - now) / 1000);
+      res.set('Retry-After', retryAfter);
+      return res.status(429).json({ error: message });
+    }
+    next();
+  };
+};
diff --git a/backend/src/middleware/validate.js b/backend/src/middleware/validate.js
new file mode 100644
index 0000000..aff1071
--- /dev/null
+++ b/backend/src/middleware/validate.js
@@ -0,0 +1,89 @@
+/* ── Lightweight input validation middleware (no external deps) ─────────── */
+
+/**
+ * validate(schema) — Express middleware factory.
+ *
+ * Schema format:
+ *   { body: { field: { type, required, min, max, minLen, maxLen, match, oneOf, custom } },
+ *     params: { ... },
+ *     query:  { ... } }
+ *
+ * Supported rule keys:
+ *   type      — 'string' | 'number' | 'boolean' | 'object' | 'array'
+ *   required  — true/false  (default false)
+ *   min / max — for numbers
+ *   minLen / maxLen — for strings
+ *   match     — RegExp
+ *   oneOf     — array of allowed values
+ *   custom    — fn(value) => string|null  (return error string or null)
+ */
+function validate(schema) {
+  return (req, res, next) => {
+    const errors = [];
+
+    for (const source of ['body', 'params', 'query']) {
+      const rules = schema[source];
+      if (!rules) continue;
+      const data = req[source] || {};
+
+      for (const [field, rule] of Object.entries(rules)) {
+        const val = data[field];
+        const label = `${source}.${field}`;
+
+        // Required check
+        if (rule.required && (val === undefined || val === null || val === '')) {
+          errors.push(`${label} обязателен`);
+          continue;
+        }
+
+        // Skip optional absent fields
+        if (val === undefined || val === null) continue;
+
+        // Type check
+        if (rule.type) {
+          const t = rule.type;
+          if (t === 'array' && !Array.isArray(val)) {
+            errors.push(`${label} должен быть массивом`);
+            continue;
+          }
+          if (t !== 'array' && typeof val !== t) {
+            errors.push(`${label} должен быть типа ${t}`);
+            continue;
+          }
+        }
+
+        // Number constraints
+        if (typeof val === 'number') {
+          if (rule.min !== undefined && val < rule.min) errors.push(`${label} минимум ${rule.min}`);
+          if (rule.max !== undefined && val > rule.max) errors.push(`${label} максимум ${rule.max}`);
+          if (rule.integer && !Number.isInteger(val)) errors.push(`${label} должен быть целым числом`);
+        }
+
+        // String constraints
+        if (typeof val === 'string') {
+          if (rule.minLen !== undefined && val.length < rule.minLen) errors.push(`${label} минимум ${rule.minLen} символов`);
+          if (rule.maxLen !== undefined && val.length > rule.maxLen) errors.push(`${label} максимум ${rule.maxLen} символов`);
+          if (rule.match && !rule.match.test(val)) errors.push(`${label} неверный формат`);
+        }
+
+        // Enum
+        if (rule.oneOf && !rule.oneOf.includes(val)) {
+          errors.push(`${label} должен быть одним из: ${rule.oneOf.join(', ')}`);
+        }
+
+        // Custom validator
+        if (rule.custom) {
+          const err = rule.custom(val);
+          if (err) errors.push(`${label}: ${err}`);
+        }
+      }
+    }
+
+    if (errors.length) {
+      return res.status(400).json({ error: errors.join('; ') });
+    }
+    next();
+  };
+}
+
+module.exports = validate;
diff --git a/backend/src/routes/admin.js b/backend/src/routes/admin.js
new file mode 100644
index 0000000..46874ad
--- /dev/null
+++ b/backend/src/routes/admin.js
@@ -0,0 +1,48 @@
+const router = require('express').Router();
+const { authMiddleware, requireRole } = require('../middleware/auth');
+const ctrl = require('../controllers/adminController');
+
+router.use(authMiddleware);
+
+/* Features — teachers may read (need to know what's enabled for their classes) */
+router.get('/features',                       requireRole('admin', 'teacher'), ctrl.getFeatures);
+router.patch('/features',                     requireRole('admin'), ctrl.updateFeatures);
+router.get('/free-student-features',          requireRole('admin', 'teacher'), ctrl.getFreeStudentFeatures);
+router.patch('/free-student-features',        requireRole('admin'), ctrl.updateFreeStudentFeatures);
+
+/* Everything below is admin-only */
+router.use(requireRole('admin'));
+
+router.get('/stats',                  ctrl.getStats);
+router.get('/users',                  ctrl.getUsers);
+router.patch('/users/:id/role',       ctrl.updateRole);
+router.get('/users/:id/sessions',     ctrl.getUserSessions);
+router.delete('/users/:id/sessions',  ctrl.clearUserSessions);
+router.post('/users/:id/sessions/clear', ctrl.clearUserSessions);
+router.patch('/users/:id',            ctrl.updateUser);
+router.patch('/users/:id/ban',        ctrl.banUser);
+router.delete('/users/:id',           ctrl.deleteUser);
+router.get('/sessions',               ctrl.getAllSessions);
+router.get('/sessions/:id',           ctrl.getSessionDetail);
+
+/* Audit log */
+router.get('/audit-log',              ctrl.getAuditLog);
+router.delete('/audit-log',           ctrl.clearAuditLog);
+
+/* Error log */
+router.get('/error-log',              ctrl.getErrorLog);
+router.delete('/error-log',           ctrl.clearErrorLog);
+
+/* System health */
+router.get('/health',                 ctrl.getHealth);
+
+/* Topics CRUD */
+router.get('/topics',                 ctrl.getTopics);
+router.post('/topics',                ctrl.createTopic);
+router.patch('/topics/:id',           ctrl.updateTopic);
+router.delete('/topics/:id',          ctrl.deleteTopic);
+
+/* Broadcast notifications */
+router.post('/broadcast',             ctrl.broadcast);
+
+module.exports = router;
diff --git a/backend/src/routes/analytics.js b/backend/src/routes/analytics.js
new file mode 100644
index 0000000..d3b33de
--- /dev/null
+++ b/backend/src/routes/analytics.js
@@ -0,0 +1,7 @@
+const router = require('express').Router();
+const { authMiddleware, requireRole } = require('../middleware/auth');
+const { teacherOverview } = require('../controllers/analyticsController');
+
+router.get('/teacher', authMiddleware, requireRole('teacher', 'admin'), teacherOverview);
+
+module.exports = router;
diff --git a/backend/src/routes/assignments.js b/backend/src/routes/assignments.js
new file mode 100644
index 0000000..0c98679
--- /dev/null
+++ b/backend/src/routes/assignments.js
@@ -0,0 +1,56 @@
+const router = require('express').Router();
+const { authMiddleware, requireRole } = require('../middleware/auth');
+const validate = require('../middleware/validate');
+const ctrl = require('../controllers/assignmentController');
+
+const MODES = ['exam', 'practice', 'repeat', 'ct'];
+
+const createSchema = { body: {
+  title:        { type: 'string', required: true, minLen: 1, maxLen: 200 },
+  subject_slug: { type: 'string', maxLen: 100 },
+  mode:         { type: 'string', oneOf: MODES },
+  count:        { type: 'number', min: 1, max: 200 },
+  deadline:     { type: 'string', maxLen: 30 },
+}};
+
+const updateSchema = { body: {
+  title:        { type: 'string', required: true, minLen: 1, maxLen: 200 },
+  subject_slug: { type: 'string', maxLen: 100 },
+  mode:         { type: 'string', oneOf: MODES },
+  count:        { type: 'number', min: 1, max: 200 },
+  deadline:     { type: 'string', maxLen: 30 },
+}};
+
+const directSchema = { body: {
+  title:         { type: 'string', required: true, minLen: 1, maxLen: 200 },
+  subject_slug:  { type: 'string', maxLen: 100 },
+  mode:          { type: 'string', oneOf: MODES },
+  count:         { type: 'number', min: 1, max: 200 },
+  deadline:      { type: 'string', maxLen: 30 },
+  student_email: { type: 'string', maxLen: 255 },
+}};
+
+const bulkSchema = { body: {
+  title:    { type: 'string', required: true, minLen: 1, maxLen: 200 },
+  class_id: { type: 'number', required: true, min: 1 },
+  mode:     { type: 'string', oneOf: MODES },
+  count:    { type: 'number', min: 1, max: 200 },
+}};
+
+router.use(authMiddleware);
+
+router.get('/my',               ctrl.myAssignments);
+router.get('/teacher',          requireRole('teacher','admin'), ctrl.teacherAssignments);
+router.get('/templates',        requireRole('teacher','admin'), ctrl.listTemplates);
+router.post('/templates',       requireRole('teacher','admin'), ctrl.saveTemplate);
+router.delete('/templates/:id', requireRole('teacher','admin'), ctrl.deleteTemplate);
+router.post('/bulk',            requireRole('teacher','admin'), validate(bulkSchema),   ctrl.bulkCreateAssignment);
+router.post('/',                requireRole('teacher','admin'), validate(directSchema), ctrl.createDirectAssignment);
+router.post('/:id/start',       ctrl.startAssignment);
+router.get('/:id/results',                        requireRole('teacher','admin'), ctrl.assignmentResults);
+router.get('/:id/question-stats',                 requireRole('teacher','admin'), ctrl.assignmentQuestionStats);
+router.get('/:id/sessions/:session_id/review',    requireRole('teacher','admin'), ctrl.assignmentSessionReview);
+router.put('/:id',              requireRole('teacher','admin'), validate(updateSchema), ctrl.updateAssignment);
+router.delete('/:id',           requireRole('teacher','admin'), ctrl.deleteAssignment);
+
+module.exports = router;
diff --git a/backend/src/routes/auth.js b/backend/src/routes/auth.js
new file mode 100644
index 0000000..a0fec11
--- /dev/null
+++ b/backend/src/routes/auth.js
@@ -0,0 +1,32 @@
+const router = require('express').Router();
+const { register, login, me, updateProfile } = require('../controllers/authController');
+const { authMiddleware } = require('../middleware/auth');
+const rateLimit = require('../middleware/rateLimit');
+const validate  = require('../middleware/validate');
+
+const loginLimiter    = rateLimit({ windowMs: 60_000, max: 10, message: 'Слишком много попыток входа, подождите минуту' });
+const registerLimiter = rateLimit({ windowMs: 60_000, max: 5,  message: 'Слишком много регистраций, подождите минуту' });
+const profileLimiter  = rateLimit({ windowMs: 60_000, max: 10, message: 'Слишком много запросов, подождите минуту' });
+
+const registerSchema = { body: {
+  email:    { type: 'string', required: true, maxLen: 255, match: /^[^\s@]+@[^\s@]+\.[^\s@]+$/ },
+  password: { type: 'string', required: true, minLen: 6, maxLen: 128 },
+  name:     { type: 'string', required: true, minLen: 1, maxLen: 100 },
+}};
+const loginSchema = { body: {
+  email:    { type: 'string', required: true, maxLen: 255 },
+  password: { type: 'string', required: true, minLen: 1, maxLen: 128 },
+}};
+const profileSchema = { body: {
+  name:            { type: 'string', minLen: 1, maxLen: 100 },
+  newPassword:     { type: 'string', minLen: 6, maxLen: 128 },
+  currentPassword: { type: 'string', maxLen: 128 },
+}};
+
+router.post('/register',  registerLimiter, validate(registerSchema), register);
+router.post('/login',     loginLimiter,    validate(loginSchema),    login);
+router.get('/me',         authMiddleware, me);
+router.get('/profile',    authMiddleware, me);
+router.patch('/profile',  authMiddleware, profileLimiter, validate(profileSchema), updateProfile);
+
+module.exports = router;
diff --git a/backend/src/routes/biochem.js b/backend/src/routes/biochem.js
new file mode 100644
index 0000000..3ca42eb
--- /dev/null
+++ b/backend/src/routes/biochem.js
@@ -0,0 +1,18 @@
+const router = require('express').Router();
+const { authMiddleware } = require('../middleware/auth');
+const c = require('../controllers/biochemController');
+
+router.use(authMiddleware);
+
+router.get('/elements',               c.getElements);
+router.get('/molecules',              c.getMolecules);
+router.get('/molecules/:id',          c.getMolecule);
+router.post('/validate',              c.validate);
+router.get('/reactions',              c.getReactions);
+router.get('/challenges',             c.getChallenges);
+router.post('/challenges/:id/solve',  c.solveChallenge);
+router.get('/saved',                  c.getSaved);
+router.post('/saved',                 c.saveMolecule);
+router.delete('/saved/:id',           c.deleteSaved);
+
+module.exports = router;
diff --git a/backend/src/routes/bookmarks.js b/backend/src/routes/bookmarks.js
new file mode 100644
index 0000000..2e72b64
--- /dev/null
+++ b/backend/src/routes/bookmarks.js
@@ -0,0 +1,13 @@
+const router = require('express').Router();
+const { authMiddleware } = require('../middleware/auth');
+const ctrl = require('../controllers/bookmarkController');
+
+router.use(authMiddleware);
+
+router.get('/',                          ctrl.list);
+router.post('/',                         ctrl.add);
+router.delete('/:id',                    ctrl.remove);
+router.delete('/entity/:type/:entityId', ctrl.removeByEntity);
+router.get('/check/:type/:entityId',     ctrl.check);
+
+module.exports = router;
diff --git a/backend/src/routes/classes.js b/backend/src/routes/classes.js
new file mode 100644
index 0000000..f6d0794
--- /dev/null
+++ b/backend/src/routes/classes.js
@@ -0,0 +1,48 @@
+const router = require('express').Router();
+const { authMiddleware, requireRole, requirePermission } = require('../middleware/auth');
+const rateLimit = require('../middleware/rateLimit');
+const validate  = require('../middleware/validate');
+const ctrl = require('../controllers/classController');
+const assignCtrl = require('../controllers/assignmentController');
+
+const joinLimiter   = rateLimit({ windowMs: 60_000, max: 10, message: 'Слишком много попыток, подождите минуту' });
+const createLimiter = rateLimit({ windowMs: 60_000, max: 5,  message: 'Слишком много запросов, подождите минуту' });
+const joinSchema    = { body: { invite_code: { type: 'string', required: true, minLen: 1, maxLen: 20 } } };
+const createSchema  = { body: { name: { type: 'string', required: true, minLen: 1, maxLen: 200 } } };
+const updateSchema  = { body: {
+  name:        { type: 'string', minLen: 1, maxLen: 200 },
+  description: { type: 'string', maxLen: 1000 },
+}};
+const assignmentSchema = { body: {
+  title:        { type: 'string', required: true, minLen: 1, maxLen: 200 },
+  subject_slug: { type: 'string', maxLen: 100 },
+  mode:         { type: 'string', oneOf: ['exam', 'practice', 'repeat', 'ct'] },
+  count:        { type: 'number', min: 1, max: 200 },
+  deadline:     { type: 'string', maxLen: 30 },
+}};
+
+router.use(authMiddleware);
+
+/* ── Student (must be before /:id to avoid route conflicts) ── */
+router.post('/join', requireRole('student','free_student'), joinLimiter, validate(joinSchema), ctrl.joinClass);
+router.get('/student/my',   ctrl.myClasses);
+router.get('/students',     requireRole('teacher','admin'), ctrl.listStudents);
+
+/* ── Teacher / Admin ── */
+router.get('/',              requireRole('teacher','admin'), ctrl.listClasses);
+router.post('/',             requireRole('teacher','admin'), requirePermission('classes.manage'), createLimiter, validate(createSchema), ctrl.createClass);
+router.get('/:id',           requireRole('teacher','admin'), ctrl.getClass);
+router.patch('/:id',         requireRole('teacher','admin'), requirePermission('classes.manage'), validate(updateSchema), ctrl.updateClass);
+router.delete('/:id',        requireRole('teacher','admin'), requirePermission('classes.manage'), ctrl.deleteClass);
+router.post('/:id/new-code', requireRole('teacher','admin'), requirePermission('classes.manage'), ctrl.regenerateCode);
+router.get('/:id/journal',     requireRole('teacher','admin'), ctrl.classJournal);
+router.get('/:id/journal/csv', requireRole('teacher','admin'), ctrl.classJournalCsv);
+router.post('/:id/members',  requireRole('teacher','admin'), ctrl.addMember);
+router.delete('/:id/members/:uid',       requireRole('teacher','admin'), ctrl.kickMember);
+router.post('/:id/assignments',          requireRole('teacher','admin'), validate(assignmentSchema), assignCtrl.createAssignment);
+router.get('/:id/announcements',         requireRole('teacher','admin'), ctrl.getAnnouncements);
+router.post('/:id/announcements',        requireRole('teacher','admin'), requirePermission('announcements.send'), ctrl.createAnnouncement);
+router.delete('/:id/announcements/:aid', requireRole('teacher','admin'), requirePermission('announcements.send'), ctrl.deleteAnnouncement);
+router.get('/:id/feed',                            ctrl.classFeed);
+
+module.exports = router;
diff --git a/backend/src/routes/classroom.js b/backend/src/routes/classroom.js
new file mode 100644
index 0000000..91f6e96
--- /dev/null
+++ b/backend/src/routes/classroom.js
@@ -0,0 +1,104 @@
+const router  = require('express').Router();
+const multer  = require('multer');
+const path    = require('path');
+const crypto  = require('crypto');
+const { authMiddleware, requireRole } = require('../middleware/auth');
+const rateLimit = require('../middleware/rateLimit');
+const c = require('../controllers/classroomController');
+
+/* ── multer for chat image attachments ─────────────────────────────────── */
+const _chatUploadsDir = path.join(__dirname, '../../uploads/chat');
+const _chatStorage = multer.diskStorage({
+  destination: (req, file, cb) => cb(null, _chatUploadsDir),
+  filename:    (req, file, cb) => {
+    const ext = path.extname(file.originalname).toLowerCase().replace(/[^.a-z0-9]/g, '');
+    cb(null, crypto.randomBytes(14).toString('hex') + ext);
+  },
+});
+const chatUpload = multer({
+  storage: _chatStorage,
+  limits:  { fileSize: 5 * 1024 * 1024 },
+  fileFilter: (req, file, cb) => {
+    const ok = ['image/jpeg','image/png','image/gif','image/webp'].includes(file.mimetype);
+    cb(null, ok);
+  },
+});
+
+const teacher = [authMiddleware, requireRole('teacher', 'admin')];
+const auth    = [authMiddleware];
+
+const chatLimiter = rateLimit({ windowMs: 5_000, max: 5, message: 'Слишком много сообщений, подождите' });
+
+// Template library — MUST be before /:id to avoid shadowing
+router.get('/templates',                  ...teacher, c.getTemplates);
+router.delete('/templates/:tid',          ...teacher, c.deleteTemplate);
+
+// Session lifecycle
+router.post('/',                          ...teacher, c.createSession);
+router.get('/online-students',            ...teacher, c.getOnlineStudents);
+router.get('/my/session',                 ...auth,    c.getMySession);
+router.get('/class/:classId/active',      ...auth,    c.getActiveSession);
+router.get('/my/active',                  ...auth,    c.getMyActive);
+router.get('/:id',                        ...auth,    c.getSession);
+router.delete('/:id',                     ...teacher, c.endSession);
+
+// Attendance
+router.post('/:id/join',                  ...auth,    c.joinSession);
+router.post('/:id/leave',                 ...auth,    c.leaveSession);
+router.get('/:id/participants',           ...auth,    c.getParticipants);
+router.get('/:id/attendance',             ...teacher, c.getAttendance);
+
+// Chat
+router.post('/:id/chat',                  ...auth, chatLimiter, c.sendChat);
+router.get('/:id/chat',                   ...auth,    c.getChat);
+router.post('/:id/chat/upload',           ...auth,    chatUpload.single('file'), c.uploadChatAttachment);
+router.post('/:id/chat/:msgId/react',     ...auth,    c.reactToMessage);
+
+// WebRTC signaling
+router.post('/:id/signal',                ...auth,    c.signal);
+
+// Whiteboard strokes
+router.post('/:id/strokes',               ...auth,    c.postStrokes);
+router.get('/:id/strokes',                ...auth,    c.getStrokes);
+router.delete('/:id/strokes/:strokeId',   ...teacher, c.deleteStroke);
+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);
+
+// Hand raise
+router.post('/:id/hand',                  ...auth,    c.raiseHand);
+router.delete('/:id/hand',                ...auth,    c.lowerHand);
+router.get('/:id/hands',                  ...auth,    c.getHands);
+
+// Whiteboard: clear page
+router.post('/:id/clear-page',            ...teacher, c.clearPage);
+
+// WebRTC: mute peer, screen share broadcast
+router.post('/:id/mute',                  ...teacher, c.mutePeer);
+router.post('/:id/screen',                ...teacher, c.screenStart);
+router.delete('/:id/screen',              ...teacher, c.screenStop);
+
+// Cursor broadcast (all participants)
+router.post('/:id/cursor',                ...auth,    c.broadcastCursor);
+
+// Message pin (teacher only)
+router.post('/:id/chat/:msgId/pin',       ...teacher, c.pinMessage);
+
+// Collaborative drawing permissions
+router.post('/:id/allow-draw/:userId',    ...teacher, c.allowDraw);
+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);
+
+// 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);
+
+module.exports = router;
diff --git a/backend/src/routes/collection.js b/backend/src/routes/collection.js
new file mode 100644
index 0000000..f161bf9
--- /dev/null
+++ b/backend/src/routes/collection.js
@@ -0,0 +1,7 @@
+const router = require('express').Router();
+const { authMiddleware } = require('../middleware/auth');
+const c = require('../controllers/collectionController');
+
+router.get('/', authMiddleware, c.getCollection);
+
+module.exports = router;
diff --git a/backend/src/routes/courses.js b/backend/src/routes/courses.js
new file mode 100644
index 0000000..eab2154
--- /dev/null
+++ b/backend/src/routes/courses.js
@@ -0,0 +1,34 @@
+const express = require('express');
+const router  = express.Router();
+const { authMiddleware, requireRole, requirePermission } = require('../middleware/auth');
+const c = require('../controllers/courseController');
+
+router.use(authMiddleware);
+
+// Course listing & special
+router.get('/',             c.list);
+router.get('/search',       c.search);
+router.get('/continue',     c.continueLesson);
+router.get('/:id',          c.get);
+router.get('/:id/stats',      requireRole('teacher','admin'), c.stats);
+router.get('/:id/analytics', requireRole('teacher','admin'), c.analytics);
+
+// Course mutations
+router.post('/',            requireRole('teacher','admin'), requirePermission('courses.manage'), c.create);
+router.post('/:id/duplicate',    requireRole('teacher','admin'), requirePermission('courses.manage'), c.duplicate);
+router.patch('/:id/publish-all', requireRole('teacher','admin'), requirePermission('courses.manage'), c.publishAll);
+router.put('/:id',               requireRole('teacher','admin'), requirePermission('courses.manage'), c.update);
+router.delete('/:id',       requireRole('teacher','admin'), requirePermission('courses.manage'), c.remove);
+
+// Sections
+router.get('/:id/sections',         requireRole('teacher','admin'), c.listSections);
+router.post('/:id/sections',        requireRole('teacher','admin'), c.createSection);
+router.put('/:id/sections/:sid',    requireRole('teacher','admin'), c.updateSection);
+router.delete('/:id/sections/:sid', requireRole('teacher','admin'), c.deleteSection);
+
+// Class courses
+router.get('/class/:classId',              c.listClassCourses);
+router.post('/class/:classId/assign',      requireRole('teacher','admin'), c.assignCourseToClass);
+router.delete('/class/:classId/:courseId', requireRole('teacher','admin'), c.unassignCourseFromClass);
+
+module.exports = router;
diff --git a/backend/src/routes/files.js b/backend/src/routes/files.js
new file mode 100644
index 0000000..cb9dffe
--- /dev/null
+++ b/backend/src/routes/files.js
@@ -0,0 +1,73 @@
+const router  = require('express').Router();
+const multer  = require('multer');
+const path    = require('path');
+const { v4: uuidv4 } = require('crypto').randomUUID ? { v4: () => require('crypto').randomBytes(16).toString('hex') } : {};
+const { authMiddleware, requireRole, requirePermission } = require('../middleware/auth');
+const ctrl    = require('../controllers/fileController');
+const { fixUtf8Name } = require('../utils/fixUtf8');
+
+/* ── multer config ─────────────────────────────────────────────────────── */
+const UPLOADS_DIR = path.join(__dirname, '../../uploads');
+const ALLOWED = ['application/pdf','image/png','image/jpeg','image/gif','image/webp',
+  'application/msword',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  'application/vnd.ms-powerpoint',
+  'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+  'application/vnd.ms-excel',
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  'text/plain'];
+
+const storage = multer.diskStorage({
+  destination: UPLOADS_DIR,
+  filename: (_req, file, cb) => {
+    const ext  = path.extname(file.originalname);
+    const name = require('crypto').randomBytes(16).toString('hex') + ext;
+    cb(null, name);
+  },
+});
+
+const SAFE_EXTS = new Set(['.pdf','.png','.jpg','.jpeg','.gif','.webp','.doc','.docx','.ppt','.pptx','.xls','.xlsx','.txt']);
+
+const upload = multer({
+  storage,
+  limits: { fileSize: 50 * 1024 * 1024 }, // 50 MB
+  fileFilter: (_req, file, cb) => {
+    if (!ALLOWED.includes(file.mimetype)) return cb(null, false);
+    // Reject double extensions (.php.jpg, .exe.pdf, etc.)
+    const name = file.originalname;
+    const parts = name.split('.');
+    if (parts.length > 2) {
+      const inner = '.' + parts[parts.length - 2].toLowerCase();
+      if (['.php','.exe','.sh','.bat','.cmd','.ps1','.js','.html','.htm'].includes(inner)) return cb(null, false);
+    }
+    // Verify file extension is allowed
+    const ext = path.extname(name).toLowerCase();
+    if (ext && !SAFE_EXTS.has(ext)) return cb(null, false);
+    cb(null, true);
+  },
+});
+
+/* ── routes ─────────────────────────────────────────────────────────────── */
+router.use(authMiddleware);
+
+router.get('/',                                                      ctrl.listFiles);
+router.post('/', requireRole('teacher','admin'), requirePermission('library.upload'), upload.single('file'), fixUtf8Name, ctrl.uploadFile);
+
+/* ── folder routes (must be before /:id to avoid conflicts) ── */
+router.get('/folders',                                                                         ctrl.listFolders);
+router.post('/folders',   requireRole('teacher','admin'), requirePermission('library.folders'), ctrl.createFolder);
+router.put('/folders/:id',requireRole('teacher','admin'), requirePermission('library.folders'), ctrl.renameFolder);
+router.delete('/folders/:id', requireRole('teacher','admin'), requirePermission('library.folders'), ctrl.deleteFolder);
+router.get('/folders/:id/access',    requireRole('teacher','admin'), requirePermission('library.folders'), ctrl.getFolderAccess);
+router.delete('/folders/:id/access', requireRole('teacher','admin'), requirePermission('library.folders'), ctrl.clearFolderAccess);
+router.post('/folders/:id/assign',   requireRole('teacher','admin'), requirePermission('library.folders'), ctrl.assignFolder);
+router.delete('/folders/:id/assign/:type/:targetId', requireRole('teacher','admin'), requirePermission('library.folders'), ctrl.unassignFolder);
+
+router.patch('/:id/move', requireRole('teacher','admin'), ctrl.moveFile);
+router.get('/:id/download',                                          ctrl.downloadFile);
+router.delete('/:id',        requireRole('teacher','admin'),          ctrl.deleteFile);
+router.get('/:id/access',    requireRole('teacher','admin'),          ctrl.getFileAccess);
+router.post('/:id/assign',   requireRole('teacher','admin'),          ctrl.assignFile);
+router.delete('/:id/assign/:type/:targetId', requireRole('teacher','admin'), ctrl.unassignFile);
+
+module.exports = router;
diff --git a/backend/src/routes/flashcards.js b/backend/src/routes/flashcards.js
new file mode 100644
index 0000000..13d9a65
--- /dev/null
+++ b/backend/src/routes/flashcards.js
@@ -0,0 +1,21 @@
+const express = require('express');
+const router  = express.Router();
+const fc      = require('../controllers/flashcardController');
+const { authMiddleware } = require('../middleware/auth');
+
+router.use(authMiddleware);
+
+router.get   ('/decks',                fc.listDecks);
+router.post  ('/decks',                fc.createDeck);
+router.put   ('/decks/:id',            fc.updateDeck);
+router.delete('/decks/:id',            fc.deleteDeck);
+router.get   ('/decks/:id/cards',      fc.getCards);
+router.post  ('/decks/:id/cards',      fc.addCard);
+router.post  ('/decks/:id/cards/bulk', fc.addCardsBulk);
+router.get   ('/decks/:id/study',      fc.getStudySession);
+router.put   ('/cards/:id',            fc.updateCard);
+router.delete('/cards/:id',            fc.deleteCard);
+router.post  ('/cards/:id/review',     fc.submitReview);
+router.get   ('/stats',                fc.getStats);
+
+module.exports = router;
diff --git a/backend/src/routes/games.js b/backend/src/routes/games.js
new file mode 100644
index 0000000..7bae763
--- /dev/null
+++ b/backend/src/routes/games.js
@@ -0,0 +1,10 @@
+const router = require('express').Router();
+const { authMiddleware } = require('../middleware/auth');
+const c = require('../controllers/gamesController');
+
+router.get('/hangman/word',         authMiddleware, c.hangmanWord);
+router.post('/hangman/complete',    authMiddleware, c.hangmanComplete);
+router.get('/crossword/generate',   authMiddleware, c.crosswordGenerate);
+router.post('/crossword/complete',  authMiddleware, c.crosswordComplete);
+
+module.exports = router;
diff --git a/backend/src/routes/gamification.js b/backend/src/routes/gamification.js
new file mode 100644
index 0000000..2ee33f8
--- /dev/null
+++ b/backend/src/routes/gamification.js
@@ -0,0 +1,40 @@
+const router = require('express').Router();
+const { authMiddleware, requireRole, requirePermission } = require('../middleware/auth');
+const validate  = require('../middleware/validate');
+const rateLimit = require('../middleware/rateLimit');
+const {
+  getMe, getAchievements, getLeaderboard, getXPHistory,
+  getChallenges, claimChallenge, setGoalTier, getFrames, setFrame,
+  onLabExperiment,
+  adminAward, adminReset, adminGamStats, adminGetUser
+} = require('../controllers/gamificationController');
+
+const labLimiter = rateLimit({ windowMs: 60_000, max: 30, message: 'Слишком частые запросы лаборатории' });
+const labSchema  = { body: { reactionsDiscovered: { type: 'number', min: 0, max: 100, integer: true } } };
+
+router.use(authMiddleware);
+
+router.get('/me',              getMe);
+router.get('/achievements',    getAchievements);
+router.get('/leaderboard',     getLeaderboard);
+router.get('/xp-history',      getXPHistory);
+router.get('/challenges',      getChallenges);
+router.post('/challenges/:id/claim', requirePermission('gamification.challenges'), claimChallenge);
+router.post('/goal-tier', requirePermission('gamification.challenges'), setGoalTier);
+router.get('/frames',    getFrames);
+router.post('/frame',    requirePermission('shop.purchase'), setFrame);
+
+/* Lab experiment tracking */
+router.post('/lab-activity', requirePermission('simulations.access'), labLimiter, validate(labSchema), (req, res) => {
+  const discovered = Number(req.body.reactionsDiscovered) || 0;
+  onLabExperiment(req.user.id, discovered);
+  res.json({ ok: true });
+});
+
+/* Admin routes */
+router.post('/admin/award',        requireRole('admin', 'teacher'), adminAward);
+router.post('/admin/reset',        requireRole('admin'),            adminReset);
+router.get('/admin/stats',         requireRole('admin', 'teacher'), adminGamStats);
+router.get('/admin/user/:id',      requireRole('admin', 'teacher'), adminGetUser);
+
+module.exports = router;
diff --git a/backend/src/routes/knowledgeMap.js b/backend/src/routes/knowledgeMap.js
new file mode 100644
index 0000000..d0174ec
--- /dev/null
+++ b/backend/src/routes/knowledgeMap.js
@@ -0,0 +1,7 @@
+const router = require('express').Router();
+const { authMiddleware } = require('../middleware/auth');
+const c = require('../controllers/knowledgeMapController');
+
+router.get('/', authMiddleware, c.getMap);
+
+module.exports = router;
diff --git a/backend/src/routes/lessons.js b/backend/src/routes/lessons.js
new file mode 100644
index 0000000..5ea0f58
--- /dev/null
+++ b/backend/src/routes/lessons.js
@@ -0,0 +1,21 @@
+const express = require('express');
+const router  = express.Router();
+const { authMiddleware, requireRole } = require('../middleware/auth');
+const c = require('../controllers/lessonController');
+
+router.use(authMiddleware);
+
+router.get('/:id',              c.get);
+router.post('/:id/complete',    c.markComplete);
+router.put('/:id/note',         c.saveNote);
+router.get('/:id/comments',     c.listComments);
+router.post('/:id/comments',    c.addComment);
+router.delete('/:id/comments/:cid', c.deleteComment);
+
+// Teacher/admin only
+router.post('/',             requireRole('teacher','admin'), c.create);
+router.put('/:id',           requireRole('teacher','admin'), c.update);
+router.delete('/:id',        requireRole('teacher','admin'), c.remove);
+router.put('/:id/blocks',    requireRole('teacher','admin'), c.saveBlocks);
+
+module.exports = router;
diff --git a/backend/src/routes/live.js b/backend/src/routes/live.js
new file mode 100644
index 0000000..5760dbe
--- /dev/null
+++ b/backend/src/routes/live.js
@@ -0,0 +1,16 @@
+const router  = require('express').Router();
+const { authMiddleware, requireRole } = require('../middleware/auth');
+const c = require('../controllers/liveController');
+
+const teacher = [authMiddleware, requireRole('teacher', 'admin')];
+
+router.post('/',                      ...teacher,    c.create);
+router.get('/:id',                    ...teacher,    c.getSession);
+router.put('/:id/question',           ...teacher,    c.setQuestion);
+router.get('/:id/results',            ...teacher,    c.results);
+router.delete('/:id',                 ...teacher,    c.end);
+
+router.post('/:id/answer',            authMiddleware, c.answer);
+router.get('/class/:classId/active',  authMiddleware, c.getActive);
+
+module.exports = router;
diff --git a/backend/src/routes/notifications.js b/backend/src/routes/notifications.js
new file mode 100644
index 0000000..7ef258a
--- /dev/null
+++ b/backend/src/routes/notifications.js
@@ -0,0 +1,13 @@
+const router = require('express').Router();
+const { authMiddleware } = require('../middleware/auth');
+const ctrl = require('../controllers/notificationController');
+
+// SSE stream — auth done inside handler via ?token param (EventSource can't set headers)
+router.get('/stream',      ctrl.stream);
+
+router.use(authMiddleware);
+router.get('/',            ctrl.list);
+router.post('/read-all',   ctrl.markAllRead);
+router.patch('/:id/read',  ctrl.markRead);
+
+module.exports = router;
diff --git a/backend/src/routes/parent.js b/backend/src/routes/parent.js
new file mode 100644
index 0000000..e334edc
--- /dev/null
+++ b/backend/src/routes/parent.js
@@ -0,0 +1,26 @@
+const router = require('express').Router();
+const rateLimit = require('../middleware/rateLimit');
+const { authMiddleware, requireRole, parentAuth } = require('../middleware/auth');
+const ctrl = require('../controllers/parentController');
+
+/* ── Rate limits ───────────────────────────────────────────────────── */
+const authLimiter   = rateLimit({ windowMs: 60_000, max: 5,  message: 'Слишком много попыток, подождите минуту' });
+const parentLimiter = rateLimit({ windowMs: 60_000, max: 30, message: 'Слишком много запросов' });
+
+/* ── Public: token exchange ────────────────────────────────────────── */
+router.post('/auth', authLimiter, ctrl.exchangeToken);
+
+/* ── Student-side: manage parent links ─────────────────────────────── */
+router.get('/my-links',     authMiddleware, requireRole('student', 'free_student'), ctrl.getMyLinks);
+router.post('/links',       authMiddleware, requireRole('student', 'free_student'), ctrl.createLink);
+router.patch('/links/:id',  authMiddleware, requireRole('student', 'free_student'), ctrl.updateLink);
+router.delete('/links/:id', authMiddleware, requireRole('student', 'free_student'), ctrl.deleteLink);
+
+/* ── Parent-side: read-only dashboard (rate-limited) ───────────────── */
+router.use(parentAuth, parentLimiter);
+router.get('/dashboard',              ctrl.getDashboard);
+router.get('/history',                ctrl.getHistory);
+router.get('/notifications',          ctrl.getNotifications);
+router.patch('/notifications/:id/read', ctrl.markRead);
+
+module.exports = router;
diff --git a/backend/src/routes/permissions.js b/backend/src/routes/permissions.js
new file mode 100644
index 0000000..e6f4e76
--- /dev/null
+++ b/backend/src/routes/permissions.js
@@ -0,0 +1,20 @@
+const router = require('express').Router();
+const { authMiddleware, requireRole } = require('../middleware/auth');
+const { getPermissions, setPermission, getMyPermissions, getUserPermissions, setUserPermission, resetUserPermissions } = require('../controllers/permissionsController');
+
+router.use(authMiddleware);
+
+/* Any authenticated user can fetch their own effective permissions */
+router.get('/me', getMyPermissions);
+
+router.use(requireRole('admin'));
+
+router.get('/',  getPermissions);
+router.post('/', setPermission);
+
+/* ── Per-user overrides ── */
+router.get('/users/:id',         getUserPermissions);
+router.post('/users/:id',        setUserPermission);
+router.delete('/users/:id/reset', resetUserPermissions);
+
+module.exports = router;
diff --git a/backend/src/routes/pet.js b/backend/src/routes/pet.js
new file mode 100644
index 0000000..8e677ca
--- /dev/null
+++ b/backend/src/routes/pet.js
@@ -0,0 +1,15 @@
+const router = require('express').Router();
+const { authMiddleware } = require('../middleware/auth');
+const c = require('../controllers/petController');
+
+router.get('/',          authMiddleware, c.getPet);
+router.patch('/name',    authMiddleware, c.renamePet);
+router.post('/pet',      authMiddleware, c.petAction);
+router.patch('/color',   authMiddleware, c.updateColor);
+router.post('/star',     authMiddleware, c.starCatch);
+router.get('/shop',      authMiddleware, c.getShop);
+router.post('/shop/buy', authMiddleware, c.buyBg);
+router.patch('/bg',      authMiddleware, c.setBg);
+router.post('/feed',     authMiddleware, c.feedPet);
+
+module.exports = router;
diff --git a/backend/src/routes/questions.js b/backend/src/routes/questions.js
new file mode 100644
index 0000000..944fdd7
--- /dev/null
+++ b/backend/src/routes/questions.js
@@ -0,0 +1,18 @@
+const router  = require('express').Router();
+const multer  = require('multer');
+const { authMiddleware, requireRole, requirePermission } = require('../middleware/auth');
+const { list, create, duplicate, update, remove, importCSV } = require('../controllers/questionController');
+
+const csvUpload = multer({ storage: multer.memoryStorage(), limits: { fileSize: 2 * 1024 * 1024 } });
+
+router.use(authMiddleware);
+router.use(requireRole('admin', 'teacher'));
+
+router.get('/',          list);
+router.post('/import',   requirePermission('questions.manage'), csvUpload.single('file'), importCSV);
+router.post('/',         requirePermission('questions.manage'), create);
+router.post('/:id/copy', requirePermission('questions.manage'), duplicate);
+router.put('/:id',       requirePermission('questions.manage'), update);
+router.delete('/:id',    requireRole('admin', 'teacher'), requirePermission('questions.delete'), remove);
+
+module.exports = router;
diff --git a/backend/src/routes/red-book.js b/backend/src/routes/red-book.js
new file mode 100644
index 0000000..39aab3a
--- /dev/null
+++ b/backend/src/routes/red-book.js
@@ -0,0 +1,25 @@
+const express = require('express');
+const router = express.Router();
+const ctrl = require('../controllers/redBookController');
+const { requireAuth, optionalAuth } = require('../middleware/auth');
+
+// Public (or optional auth for collection status)
+router.get('/groups',             ctrl.getGroups);
+router.get('/habitats',           ctrl.getHabitats);
+router.get('/stats',              optionalAuth, ctrl.getStats);
+router.get('/map-data',           ctrl.getMapData);
+router.get('/food-web',           ctrl.getFoodWeb);
+router.get('/daily',              optionalAuth, ctrl.getDaily);
+router.get('/species',            optionalAuth, ctrl.getSpecies);
+router.get('/species/:id',        optionalAuth, ctrl.getSpeciesById);
+router.get('/biome/:habitatId',   ctrl.getBiomeSpecies);
+
+// Auth required
+router.post('/species/:id/collect', requireAuth, ctrl.collectSpecies);
+router.get('/collection',           requireAuth, ctrl.getCollection);
+router.get('/quests',               optionalAuth, ctrl.getQuests);
+router.post('/quests/:id/start',    requireAuth, ctrl.startQuest);
+router.get('/sightings',            optionalAuth, ctrl.getSightings);
+router.post('/sightings',           requireAuth, ctrl.addSighting);
+
+module.exports = router;
diff --git a/backend/src/routes/search.js b/backend/src/routes/search.js
new file mode 100644
index 0000000..337a20c
--- /dev/null
+++ b/backend/src/routes/search.js
@@ -0,0 +1,8 @@
+const router = require('express').Router();
+const { authMiddleware } = require('../middleware/auth');
+const ctrl = require('../controllers/searchController');
+
+router.use(authMiddleware);
+router.get('/', ctrl.search);
+
+module.exports = router;
diff --git a/backend/src/routes/sessions.js b/backend/src/routes/sessions.js
new file mode 100644
index 0000000..b27f5fa
--- /dev/null
+++ b/backend/src/routes/sessions.js
@@ -0,0 +1,28 @@
+const router = require('express').Router();
+const { authMiddleware } = require('../middleware/auth');
+const rateLimit = require('../middleware/rateLimit');
+const validate  = require('../middleware/validate');
+const { start, answer, finish, result, history, weakTopics, getSessionQuestions, stats } = require('../controllers/sessionController');
+
+const sessionLimiter = rateLimit({ windowMs: 60_000, max: 10, message: 'Слишком много сессий, подождите минуту' });
+const startSchema = { body: {
+  subject_slug: { type: 'string', required: true, minLen: 1, maxLen: 100 },
+  mode:  { type: 'string', oneOf: ['exam', 'practice', 'repeat', 'ct'] },
+  count: { type: 'number', min: 1, max: 200, integer: true },
+}};
+const answerSchema = { body: {
+  question_id: { type: 'number', required: true, min: 1, integer: true },
+}};
+
+router.use(authMiddleware); // все маршруты требуют авторизации
+
+router.post('/', sessionLimiter, validate(startSchema), start);
+router.post('/:id/answer', validate(answerSchema), answer);
+router.post('/:id/finish',    finish);
+router.get('/history',        history);
+router.get('/stats',          stats);
+router.get('/weak-topics',    weakTopics);
+router.get('/:id/result',     result);
+router.get('/:id/questions',  getSessionQuestions);
+
+module.exports = router;
diff --git a/backend/src/routes/settings.js b/backend/src/routes/settings.js
new file mode 100644
index 0000000..d2fb1b5
--- /dev/null
+++ b/backend/src/routes/settings.js
@@ -0,0 +1,12 @@
+const express = require('express');
+const router  = express.Router();
+const { authMiddleware, requireRole } = require('../middleware/auth');
+const { getSimSettings, updateSimSettings } = require('../controllers/settingsController');
+
+// GET is open to any authenticated user (students need to check disabled sims)
+router.get('/sims', authMiddleware, getSimSettings);
+
+// PUT requires admin
+router.put('/sims', authMiddleware, requireRole('admin'), updateSimSettings);
+
+module.exports = router;
diff --git a/backend/src/routes/shop.js b/backend/src/routes/shop.js
new file mode 100644
index 0000000..7cf54cd
--- /dev/null
+++ b/backend/src/routes/shop.js
@@ -0,0 +1,39 @@
+const router = require('express').Router();
+const { authMiddleware, requireRole, requirePermission } = require('../middleware/auth');
+const rateLimit = require('../middleware/rateLimit');
+const validate  = require('../middleware/validate');
+const {
+  getItems, purchaseItem, getPurchases, getCoins, getMyActive, activateItem,
+  adminGetItems, adminCreateItem, adminUpdateItem, adminDeleteItem, adminAwardCoins, adminShopStats
+} = require('../controllers/shopController');
+
+const purchaseLimiter = rateLimit({ windowMs: 60_000, max: 10, message: 'Слишком много покупок, подождите минуту' });
+const activateSchema  = { body: { type: { type: 'string', oneOf: ['frame', 'title', 'effect'] } } };
+const adminItemSchema = { body: {
+  name:  { type: 'string', required: true, minLen: 1, maxLen: 200 },
+  type:  { type: 'string', required: true, oneOf: ['frame', 'title', 'effect'] },
+  price: { type: 'number', required: true, min: 0 },
+}};
+const awardCoinsSchema = { body: {
+  userId: { type: 'number', required: true, min: 1, integer: true },
+  amount: { type: 'number', required: true, min: 1, integer: true },
+}};
+
+router.use(authMiddleware);
+
+router.get('/items', getItems);
+router.post('/items/:id/purchase', requirePermission('shop.purchase'), purchaseLimiter, purchaseItem);
+router.get('/purchases', getPurchases);
+router.get('/coins', getCoins);
+router.get('/my-active', getMyActive);
+router.post('/activate', validate(activateSchema), activateItem);
+
+/* Admin routes */
+router.get('/admin/items',       requireRole('admin', 'teacher'), adminGetItems);
+router.post('/admin/items',      requireRole('admin'), validate(adminItemSchema), adminCreateItem);
+router.put('/admin/items/:id',   requireRole('admin'),            adminUpdateItem);
+router.delete('/admin/items/:id',requireRole('admin'),            adminDeleteItem);
+router.post('/admin/award-coins',requireRole('admin', 'teacher'), validate(awardCoinsSchema), adminAwardCoins);
+router.get('/admin/stats',       requireRole('admin', 'teacher'), adminShopStats);
+
+module.exports = router;
diff --git a/backend/src/routes/subjects.js b/backend/src/routes/subjects.js
new file mode 100644
index 0000000..0088ace
--- /dev/null
+++ b/backend/src/routes/subjects.js
@@ -0,0 +1,44 @@
+const router = require('express').Router();
+const db     = require('../db/db');
+const { authMiddleware, requireRole } = require('../middleware/auth');
+
+router.get('/', (_req, res) => {
+  res.json(db.prepare(`
+    SELECT s.*, (SELECT COUNT(*) FROM questions q WHERE q.subject_id = s.id) AS question_count
+    FROM subjects s ORDER BY s.id
+  `).all());
+});
+
+router.patch('/:slug', authMiddleware, requireRole('admin'), (req, res) => {
+  const { default_mode, default_count, default_test_id } = req.body;
+  const valid_modes = ['exam', 'practice', 'topic', 'random'];
+  if (default_mode && !valid_modes.includes(default_mode))
+    return res.status(400).json({ error: 'Invalid mode' });
+
+  const subj = db.prepare('SELECT id FROM subjects WHERE slug = ?').get(req.params.slug);
+  if (!subj) return res.status(404).json({ error: 'Subject not found' });
+
+  const updates = [];
+  const args    = [];
+  if (default_mode    !== undefined) { updates.push('default_mode = ?');    args.push(default_mode); }
+  if (default_count   !== undefined) { updates.push('default_count = ?');   args.push(Number(default_count) || 25); }
+  if (default_test_id !== undefined) { updates.push('default_test_id = ?'); args.push(default_test_id || null); }
+  if (!updates.length) return res.status(400).json({ error: 'Nothing to update' });
+
+  args.push(req.params.slug);
+  db.prepare(`UPDATE subjects SET ${updates.join(', ')} WHERE slug = ?`).run(...args);
+  res.json(db.prepare('SELECT * FROM subjects WHERE slug = ?').get(req.params.slug));
+});
+
+router.get('/:slug/topics', (req, res) => {
+  const subject = db.prepare('SELECT id FROM subjects WHERE slug = ?').get(req.params.slug);
+  if (!subject) return res.status(404).json({ error: 'Subject not found' });
+
+  const topics = db.prepare(
+    'SELECT MIN(id) AS id, subject_id, name, MIN(order_index) AS order_index FROM topics WHERE subject_id = ? GROUP BY name ORDER BY MIN(order_index)'
+  ).all(subject.id);
+
+  res.json(topics);
+});
+
+module.exports = router;
diff --git a/backend/src/routes/submissions.js b/backend/src/routes/submissions.js
new file mode 100644
index 0000000..81d16ec
--- /dev/null
+++ b/backend/src/routes/submissions.js
@@ -0,0 +1,60 @@
+const router = require('express').Router();
+const multer = require('multer');
+const path   = require('path');
+const { authMiddleware, requireRole } = require('../middleware/auth');
+const ctrl   = require('../controllers/submissionsController');
+const { fixUtf8Name } = require('../utils/fixUtf8');
+
+/* ── multer — same dir/types as library uploads ─────────────────────── */
+const UPLOADS_DIR = path.join(__dirname, '../../uploads');
+const ALLOWED = [
+  'application/pdf', 'image/png', 'image/jpeg', 'image/gif', 'image/webp',
+  'application/msword',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  'application/vnd.ms-powerpoint',
+  'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+  'application/vnd.ms-excel',
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  'text/plain',
+];
+const SAFE_EXTS = new Set(['.pdf','.png','.jpg','.jpeg','.gif','.webp','.doc','.docx','.ppt','.pptx','.xls','.xlsx','.txt']);
+const storage = multer.diskStorage({
+  destination: UPLOADS_DIR,
+  filename: (_req, file, cb) => {
+    const ext  = path.extname(file.originalname);
+    const name = require('crypto').randomBytes(16).toString('hex') + ext;
+    cb(null, name);
+  },
+});
+const upload = multer({
+  storage,
+  limits: { fileSize: 50 * 1024 * 1024 },
+  fileFilter: (_req, file, cb) => {
+    if (!ALLOWED.includes(file.mimetype)) return cb(null, false);
+    // Reject double extensions (.php.jpg, .exe.pdf, etc.)
+    const name = file.originalname;
+    const parts = name.split('.');
+    if (parts.length > 2) {
+      const inner = '.' + parts[parts.length - 2].toLowerCase();
+      if (['.php','.exe','.sh','.bat','.cmd','.ps1','.js','.html','.htm'].includes(inner)) return cb(null, false);
+    }
+    const ext = path.extname(name).toLowerCase();
+    if (ext && !SAFE_EXTS.has(ext)) return cb(null, false);
+    cb(null, true);
+  },
+});
+
+/* ── routes ─────────────────────────────────────────────────────────── */
+router.use(authMiddleware);
+
+router.post('/',              requireRole('student', 'free_student'), upload.single('file'), fixUtf8Name, ctrl.submit);
+router.get('/my',             requireRole('student', 'free_student'), ctrl.getMySubmissions);
+router.get('/log',            requireRole('admin'), ctrl.getSubmissionLog);
+router.delete('/log',         requireRole('admin'), ctrl.clearSubmissionLog);
+router.get('/',               requireRole('teacher', 'admin'), ctrl.getClassSubmissions);
+router.patch('/:id',          requireRole('teacher', 'admin'), ctrl.reviewSubmission);
+router.get('/:id/download',   ctrl.downloadSubmission);
+router.delete('/:id',         ctrl.deleteSubmission);
+router.post('/:id/resubmit', requireRole('student', 'free_student'), upload.single('file'), fixUtf8Name, ctrl.resubmit);
+
+module.exports = router;
diff --git a/backend/src/routes/templates.js b/backend/src/routes/templates.js
new file mode 100644
index 0000000..caacbcd
--- /dev/null
+++ b/backend/src/routes/templates.js
@@ -0,0 +1,17 @@
+const router = require('express').Router();
+const { authMiddleware, requirePermission } = require('../middleware/auth');
+const ctrl = require('../controllers/templateController');
+
+router.use(authMiddleware);
+
+router.get('/courses',             ctrl.listCourseTemplates);
+router.post('/courses',            requirePermission('templates.manage'), ctrl.saveCourseTemplate);
+router.post('/courses/:id/create', requirePermission('templates.manage'), ctrl.createFromCourseTemplate);
+router.delete('/courses/:id',      requirePermission('templates.manage'), ctrl.deleteCourseTemplate);
+
+router.get('/lessons',             ctrl.listLessonTemplates);
+router.post('/lessons',            requirePermission('templates.manage'), ctrl.saveLessonTemplate);
+router.post('/lessons/:id/create', requirePermission('templates.manage'), ctrl.createFromLessonTemplate);
+router.delete('/lessons/:id',      requirePermission('templates.manage'), ctrl.deleteLessonTemplate);
+
+module.exports = router;
diff --git a/backend/src/routes/tests.js b/backend/src/routes/tests.js
new file mode 100644
index 0000000..ca37bd9
--- /dev/null
+++ b/backend/src/routes/tests.js
@@ -0,0 +1,19 @@
+const router = require('express').Router();
+const { authMiddleware, requireRole } = require('../middleware/auth');
+const { requireOwnership } = require('../middleware/ownership');
+const ctrl = require('../controllers/testController');
+
+const ownsTest = requireOwnership({ table: 'tests', ownerField: 'created_by' });
+
+router.use(authMiddleware);
+
+router.get('/',                          ctrl.list);
+router.post('/',                         requireRole('teacher','admin'), ctrl.create);
+router.get('/:id',                       ctrl.getOne);
+router.put('/:id',                       requireRole('teacher','admin'), ownsTest, ctrl.update);
+router.delete('/:id',                    requireRole('teacher','admin'), ownsTest, ctrl.remove);
+router.post('/:id/questions',            requireRole('teacher','admin'), ownsTest, ctrl.addQuestions);
+router.patch('/:id/questions/reorder',   requireRole('teacher','admin'), ownsTest, ctrl.reorderQuestions);
+router.delete('/:id/questions/:qid',     requireRole('teacher','admin'), ownsTest, ctrl.removeQuestion);
+
+module.exports = router;
diff --git a/backend/src/server.js b/backend/src/server.js
new file mode 100644
index 0000000..5350549
--- /dev/null
+++ b/backend/src/server.js
@@ -0,0 +1,327 @@
+const config = require('./config');        // validates .env, fails fast on error
+const logger = require('./utils/logger');  // structured logging
+
+require('./db/migrate'); // авто-миграция при каждом старте
+const { seedDefaults: seedPermissions } = require('./controllers/permissionsController');
+seedPermissions();
+const express     = require('express');
+const cors        = require('cors');
+const path        = require('path');
+const compression = require('compression');
+
+const authRoutes         = require('./routes/auth');
+const subjectRoutes      = require('./routes/subjects');
+const sessionRoutes      = require('./routes/sessions');
+const adminRoutes        = require('./routes/admin');
+const questionRoutes     = require('./routes/questions');
+const classRoutes        = require('./routes/classes');
+const assignmentRoutes   = require('./routes/assignments');
+const fileRoutes         = require('./routes/files');
+const testRoutes         = require('./routes/tests');
+const notificationRoutes  = require('./routes/notifications');
+const permissionRoutes    = require('./routes/permissions');
+const submissionRoutes    = require('./routes/submissions');
+const courseRoutes        = require('./routes/courses');
+const lessonRoutes        = require('./routes/lessons');
+const gamificationRoutes  = require('./routes/gamification');
+const shopRoutes          = require('./routes/shop');
+const templateRoutes      = require('./routes/templates');
+const bookmarkRoutes      = require('./routes/bookmarks');
+const searchRoutes        = require('./routes/search');
+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 knowledgeMapRoutes  = require('./routes/knowledgeMap');
+const petRoutes           = require('./routes/pet');
+const collectionRoutes    = require('./routes/collection');
+const redBookRoutes       = require('./routes/red-book');
+const parentRoutes        = require('./routes/parent');
+
+const { requestId, errorHandler } = require('./middleware/errorHandler');
+
+const app    = express();
+const PORT   = config.PORT;
+const isProd = config.isProd;
+
+/* ── Gzip compression (skip SSE streams — compression buffers chunks and breaks real-time) ── */
+app.use(compression({
+  filter: (req, res) => {
+    if (req.path.includes('/stream') || req.headers.accept === 'text/event-stream') return false;
+    return compression.filter(req, res);
+  },
+}));
+
+/* ── Request ID — attach before everything else ── */
+app.use(requestId);
+
+/* ── Security headers (no helmet dep needed) ── */
+app.use((_req, res, next) => {
+  res.setHeader('X-Content-Type-Options', 'nosniff');
+  res.setHeader('X-Frame-Options', 'SAMEORIGIN');
+  res.setHeader('Referrer-Policy', 'strict-origin-when-cross-origin');
+  res.setHeader('X-XSS-Protection', '1; mode=block');
+  // classroom.html needs microphone + camera for WebRTC
+  const isClassroom = _req.path === '/classroom' || _req.path === '/classroom.html';
+  res.setHeader('Permissions-Policy',
+    isClassroom
+      ? 'camera=(self), microphone=(self), geolocation=()'
+      : 'camera=(), microphone=(), geolocation=()'
+  );
+  res.setHeader('Content-Security-Policy',
+    "default-src 'self'; " +
+    "script-src 'self' 'unsafe-inline' https://unpkg.com https://cdn.jsdelivr.net; " +
+    "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://cdn.jsdelivr.net; " +
+    "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'" +
+    (isProd ? "; upgrade-insecure-requests" : "")
+  );
+  if (isProd) res.setHeader('Strict-Transport-Security', 'max-age=31536000; includeSubDomains');
+  next();
+});
+
+/* ── Request logger ── */
+app.use((req, res, next) => {
+  const start = Date.now();
+  res.on('finish', () => {
+    const ms     = Date.now() - start;
+    const status = res.statusCode;
+    const level  = status >= 500 ? 'error' : status >= 400 ? 'warn' : 'info';
+    logger[level](`${req.method} ${req.path}`, {
+      status, ms, requestId: req.requestId,
+      userId: req.user?.id,
+    });
+  });
+  next();
+});
+
+/* ── CORS ── */
+app.set('trust proxy', 1);
+const allowedOrigins = [process.env.CLIENT_ORIGIN].filter(Boolean);
+app.use(cors({
+  origin: (origin, cb) => {
+    if (!origin) return cb(null, !isProd); // dev: allow, prod: block
+    cb(null, allowedOrigins.includes(origin) ? origin : false);
+  },
+  credentials: true
+}));
+
+/* ── Body parser with size limit ── */
+app.use(express.json({ limit: '1mb' }));
+
+/* ── Global API rate limit ── */
+const rateLimit = require('./middleware/rateLimit');
+// Classroom real-time endpoints (cursor, stroke-preview) fire ~10/s per user — higher limit
+app.use('/api/classroom', rateLimit({ windowMs: 60_000, max: 6000, message: 'Слишком много запросов' }));
+app.use('/api', rateLimit({ windowMs: 60_000, max: 600, message: 'Слишком много запросов, подождите минуту' }));
+
+/* ── Routes ── */
+app.use('/api/auth',          authRoutes);
+app.use('/api/subjects',      subjectRoutes);
+app.use('/api/sessions',      sessionRoutes);
+app.use('/api/admin',         adminRoutes);
+app.use('/api/questions',     questionRoutes);
+app.use('/api/classes',       classRoutes);
+app.use('/api/assignments',   assignmentRoutes);
+app.use('/api/files',         fileRoutes);
+app.use('/api/tests',         testRoutes);
+app.use('/api/notifications', notificationRoutes);
+app.use('/api/permissions',  permissionRoutes);
+app.use('/api/submissions',  submissionRoutes);
+app.use('/api/courses',       courseRoutes);
+app.use('/api/lessons',       lessonRoutes);
+app.use('/api/gamification',  gamificationRoutes);
+app.use('/api/shop',          shopRoutes);
+app.use('/api/templates',     templateRoutes);
+app.use('/api/bookmarks',    bookmarkRoutes);
+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/games',        gamesRoutes);
+app.use('/api/knowledge-map', knowledgeMapRoutes);
+app.use('/api/pet',          petRoutes);
+app.use('/api/collection',   collectionRoutes);
+app.use('/api/red-book',     redBookRoutes);
+app.use('/api/biochem',      require('./routes/biochem'));
+app.use('/api/parent',       parentRoutes);
+
+/* ── Public features endpoint (merges global + per-class for authenticated students) ── */
+const _featDb = require('./db/db');
+const _stmtGlobalFeats      = _featDb.prepare("SELECT key, value FROM app_settings WHERE key LIKE 'feature_%'");
+const _stmtClassFeats        = _featDb.prepare(
+  'SELECT c.features FROM classes c JOIN class_members cm ON cm.class_id = c.id WHERE cm.user_id = ?'
+);
+const _stmtFreeStudentFeats  = _featDb.prepare("SELECT value FROM app_settings WHERE key = 'free_student_features'");
+const _jwtLib = require('jsonwebtoken');
+
+app.get('/api/features', (req, res) => {
+  const rows = _stmtGlobalFeats.all();
+  const features = {};
+  for (const r of rows) {
+    const name = r.key.replace('feature_', '').replace('_enabled', '');
+    features[name] = r.value === '1';
+  }
+  // Prevent browser caching — class features change when teacher updates settings
+  res.setHeader('Cache-Control', 'no-store');
+
+  // For authenticated students: overlay class-specific feature flags
+  const token = (req.headers.authorization || '').replace('Bearer ', '');
+  if (token) {
+    try {
+      const payload = _jwtLib.verify(token, process.env.JWT_SECRET, { algorithms: ['HS256'] });
+      if (payload.role === 'student' || payload.role === 'free_student') {
+        const classes = _stmtClassFeats.all(payload.id);
+        if (classes.length === 0 && payload.role === 'student') {
+          features._no_class = true; // regular student has no class — restrict access
+        }
+        for (const cls of classes) {
+          if (!cls.features) continue;
+          try {
+            const f = JSON.parse(cls.features);
+            for (const [key, val] of Object.entries(f)) {
+              if (val === false) features[key] = false;
+            }
+          } catch (e) { console.error('[features] class JSON parse error:', e.message); }
+        }
+        // Apply role-level free_student restrictions (set by admin)
+        if (payload.role === 'free_student') {
+          const fsRow = _stmtFreeStudentFeats.get();
+          if (fsRow?.value) {
+            try {
+              const fsFeats = JSON.parse(fsRow.value);
+              for (const [key, val] of Object.entries(fsFeats)) {
+                if (val === false) features[key] = false;
+              }
+            } catch (e) { console.error('[features] free_student JSON parse error:', e.message); }
+          }
+        }
+      }
+    } catch { /* invalid/expired token — anonymous features */ }
+  }
+  res.json(features);
+});
+
+/* ── Health check ── */
+const _startTime = Date.now();
+const _pkg = require('../package.json');
+const _db  = require('./db/db');
+
+app.get('/api/health', (req, res) => {
+  let dbStatus = 'ok';
+  let dbLatencyMs = null;
+  try {
+    const t0 = Date.now();
+    _db.prepare('SELECT 1').get();
+    dbLatencyMs = Date.now() - t0;
+  } catch {
+    dbStatus = 'error';
+  }
+
+  const status = dbStatus === 'ok' ? 'ok' : 'degraded';
+  const httpStatus = status === 'ok' ? 200 : 503;
+
+  // Minimal public response — no version/runtime details
+  const pub = { status, timestamp: new Date().toISOString() };
+
+  // Detailed response only for authenticated admins
+  const token = (req.headers.authorization || '').replace('Bearer ', '');
+  if (token) {
+    try {
+      const jwt = require('jsonwebtoken');
+      const payload = jwt.verify(token, process.env.JWT_SECRET, { algorithms: ['HS256'] });
+      const u = _db.prepare('SELECT role FROM users WHERE id = ?').get(payload.id);
+      if (u?.role === 'admin') {
+        const uptimeSec = Math.floor((Date.now() - _startTime) / 1000);
+        return res.status(httpStatus).json({
+          ...pub,
+          version: _pkg.version,
+          uptime: { seconds: uptimeSec, human: _fmtUptime(uptimeSec) },
+          db: { status: dbStatus, latency_ms: dbLatencyMs },
+          node: process.version,
+          env: process.env.NODE_ENV || 'development',
+        });
+      }
+    } catch { /* invalid token → fall through to public response */ }
+  }
+
+  res.status(httpStatus).json(pub);
+});
+
+function _fmtUptime(s) {
+  const d = Math.floor(s / 86400);
+  const h = Math.floor((s % 86400) / 3600);
+  const m = Math.floor((s % 3600) / 60);
+  const sec = s % 60;
+  if (d > 0) return `${d}d ${h}h ${m}m`;
+  if (h > 0) return `${h}h ${m}m ${sec}s`;
+  if (m > 0) return `${m}m ${sec}s`;
+  return `${sec}s`;
+}
+
+/* ── Static frontend ── */
+const frontendDir = path.join(__dirname, '../../frontend');
+const jsDir       = path.join(__dirname, '../../js');
+const staticCache = isProd ? { maxAge: '7d' } : { setHeaders: (res) => res.setHeader('Cache-Control', 'no-store') };
+app.use('/js',  express.static(jsDir, staticCache));
+app.use('/css', express.static(path.join(frontendDir, 'css'), staticCache));
+app.use('/img', express.static(path.join(frontendDir, 'img'), staticCache));
+
+// Redirect legacy .html URLs → clean URLs (301)
+app.use((req, res, next) => {
+  if (req.path.endsWith('.html') && !req.path.startsWith('/api/')) {
+    const clean = req.path.slice(0, -5);
+    const qs    = req.url.slice(req.path.length); // preserve ?query
+    return res.redirect(301, clean + qs);
+  }
+  next();
+});
+
+// Serve HTML files without extension  (/dashboard → dashboard.html)
+// In dev: disable cache so edits are always picked up immediately
+const htmlCacheOpts = isProd ? { extensions: ['html'] } : {
+  extensions: ['html'],
+  setHeaders: (res, filePath) => {
+    if (filePath.endsWith('.html')) res.setHeader('Cache-Control', 'no-store');
+  },
+};
+app.use(express.static(frontendDir, htmlCacheOpts));
+
+app.get('/', (_req, res) => res.sendFile(path.join(frontendDir, 'login.html')));
+app.get('/login', (_req, res) => res.sendFile(path.join(frontendDir, 'login.html')));
+
+/* ── Custom error pages ── */
+app.get('/403', (_req, res) => res.status(403).sendFile(path.join(frontendDir, '403.html')));
+app.get('/404', (_req, res) => res.status(404).sendFile(path.join(frontendDir, '404.html')));
+app.get('/500', (_req, res) => res.status(500).sendFile(path.join(frontendDir, '500.html')));
+/* ── Global error handler ── */
+app.use(errorHandler);
+
+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 }));
+
+/* ── Graceful shutdown ── */
+function shutdown(signal) {
+  logger.info(`${signal} received — shutting down gracefully`);
+  server.close(() => {
+    try {
+      const _shutDb = require('./db/db');
+      _shutDb.exec('PRAGMA optimize');
+      _shutDb.close();
+    } catch (e) { logger.error('db close error', { err: e.message }); }
+    logger.info('Server closed');
+    process.exit(0);
+  });
+  // Force exit after 5s if connections hang
+  setTimeout(() => process.exit(1), 5000).unref();
+}
+process.on('SIGTERM', () => shutdown('SIGTERM'));
+process.on('SIGINT',  () => shutdown('SIGINT'));
diff --git a/backend/src/sse.js b/backend/src/sse.js
new file mode 100644
index 0000000..4c1307e
--- /dev/null
+++ b/backend/src/sse.js
@@ -0,0 +1,50 @@
+/* ── SSE registry — shared between controllers ─────────────────────────── */
+const clients = new Map(); // userId -> Set<res>
+const db = require('./db/db');
+
+function addClient(userId, res) {
+  if (!clients.has(userId)) clients.set(userId, new Set());
+  clients.get(userId).add(res);
+}
+
+function removeClient(userId, res) {
+  const set = clients.get(userId);
+  if (!set) return;
+  set.delete(res);
+  if (set.size === 0) clients.delete(userId);
+}
+
+function emit(userId, data) {
+  const conns = clients.get(userId);
+  if (!conns?.size) return;
+  const payload = `data: ${JSON.stringify(data)}\n\n`;
+  for (const res of conns) {
+    try { res.write(payload); } catch {}
+  }
+}
+
+// Heartbeat: detect and remove dead connections every 30s
+setInterval(() => {
+  for (const [userId, conns] of clients) {
+    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) clients.delete(userId);
+  }
+}, 30_000).unref();
+
+/* Broadcast to all members of a class */
+function emitToClass(classId, data) {
+  const members = db.prepare('SELECT user_id FROM class_members WHERE class_id=?').all(classId);
+  for (const { user_id } of members) emit(user_id, data);
+}
+
+/* Returns array of user IDs currently connected via SSE */
+function getOnlineUserIds() {
+  return [...clients.keys()];
+}
+
+module.exports = { addClient, removeClient, emit, emitToClass, getOnlineUserIds };
diff --git a/backend/src/utils/audit.js b/backend/src/utils/audit.js
new file mode 100644
index 0000000..60fc1dd
--- /dev/null
+++ b/backend/src/utils/audit.js
@@ -0,0 +1,22 @@
+'use strict';
+const db = require('../db/db');
+
+const stmt = db.prepare(
+  "INSERT INTO admin_audit_log (admin_id, action, target, detail, ip) VALUES (?, ?, ?, ?, ?)"
+);
+
+/**
+ * Log an admin action.
+ * @param {object} req - Express request (must have req.user)
+ * @param {string} action - e.g. 'user.role_change', 'user.delete', 'user.ban'
+ * @param {string} [target] - e.g. 'user:42', 'question:15'
+ * @param {string} [detail] - human-readable detail
+ */
+function audit(req, action, target, detail) {
+  try {
+    const ip = req.ip || req.socket?.remoteAddress || '';
+    stmt.run(req.user?.id || 0, action, target || null, detail || null, ip);
+  } catch (e) { console.error('[audit]', e.message); }
+}
+
+module.exports = { audit };
diff --git a/backend/src/utils/fixUtf8.js b/backend/src/utils/fixUtf8.js
new file mode 100644
index 0000000..fa34a9b
--- /dev/null
+++ b/backend/src/utils/fixUtf8.js
@@ -0,0 +1,15 @@
+/**
+ * Multer encodes originalname as latin1 (ISO-8859-1).
+ * Browsers send filenames as UTF-8 bytes, so non-ASCII chars get mangled.
+ * This middleware re-decodes the bytes back to proper UTF-8.
+ */
+function fixUtf8Name(req, _res, next) {
+  if (req.file && req.file.originalname) {
+    try {
+      req.file.originalname = Buffer.from(req.file.originalname, 'latin1').toString('utf8');
+    } catch { /* keep as-is if decoding fails */ }
+  }
+  next();
+}
+
+module.exports = { fixUtf8Name };
diff --git a/backend/src/utils/logger.js b/backend/src/utils/logger.js
new file mode 100644
index 0000000..067bc7c
--- /dev/null
+++ b/backend/src/utils/logger.js
@@ -0,0 +1,61 @@
+'use strict';
+
+/* ── Structured logger — JSON in prod, pretty in dev ──────────────────────
+   Usage:  logger.info('msg', { key: val })
+           logger.error('msg', { err: e.message })
+   ──────────────────────────────────────────────────────────────────────── */
+
+const LEVELS = { error: 0, warn: 1, info: 2, debug: 3 };
+
+const COLORS = {
+  error: '\x1b[31m',   // red
+  warn:  '\x1b[33m',   // yellow
+  info:  '\x1b[36m',   // cyan
+  debug: '\x1b[90m',   // gray
+};
+const RESET = '\x1b[0m';
+
+const isProd = process.env.NODE_ENV === 'production';
+
+function _currentLevel() {
+  const env = process.env.LOG_LEVEL;
+  if (env && LEVELS[env] !== undefined) return LEVELS[env];
+  return isProd ? LEVELS.info : LEVELS.debug;
+}
+
+function log(level, msg, meta) {
+  if (LEVELS[level] > _currentLevel()) return;
+
+  const ts = new Date().toISOString();
+
+  if (isProd) {
+    /* JSON — one line per entry, parseable by log aggregators */
+    const entry = { level, ts, msg };
+    if (meta && typeof meta === 'object') Object.assign(entry, meta);
+    process.stdout.write(JSON.stringify(entry) + '\n');
+  } else {
+    /* Pretty — coloured label + message + optional meta */
+    const color = COLORS[level] || '';
+    const label = `[${ts}] ${color}${level.toUpperCase().padEnd(5)}${RESET}`;
+    const metaStr = meta && Object.keys(meta).length
+      ? ' ' + JSON.stringify(meta, null, 0)
+      : '';
+    process.stdout.write(`${label} ${msg}${metaStr}\n`);
+  }
+}
+
+const logger = {
+  error: (msg, meta) => log('error', msg, meta),
+  warn:  (msg, meta) => log('warn',  msg, meta),
+  info:  (msg, meta) => log('info',  msg, meta),
+  debug: (msg, meta) => log('debug', msg, meta),
+
+  /* Convenience: log an Error object */
+  exception: (msg, err, meta) => log('error', msg, {
+    err: err?.message,
+    stack: !isProd ? err?.stack : undefined,
+    ...meta,
+  }),
+};
+
+module.exports = logger;
diff --git a/backend/src/utils/magic.js b/backend/src/utils/magic.js
new file mode 100644
index 0000000..76fd099
--- /dev/null
+++ b/backend/src/utils/magic.js
@@ -0,0 +1,38 @@
+'use strict';
+/* ── Magic bytes validation (shared between file and submission uploads) ── */
+const fs = require('fs');
+
+const MAGIC = [
+  { mime: 'application/pdf',  bytes: [0x25,0x50,0x44,0x46],                     offset: 0 }, // %PDF
+  { mime: 'image/png',        bytes: [0x89,0x50,0x4E,0x47,0x0D,0x0A,0x1A,0x0A], offset: 0 },
+  { mime: 'image/jpeg',       bytes: [0xFF,0xD8,0xFF],                           offset: 0 },
+  { mime: 'image/gif',        bytes: [0x47,0x49,0x46,0x38],                      offset: 0 }, // GIF8
+  { mime: 'image/webp',       bytes: [0x57,0x45,0x42,0x50],                      offset: 8 }, // RIFF????WEBP
+  // OLE2 (doc, xls, ppt)
+  { mime: 'application/msword',       bytes: [0xD0,0xCF,0x11,0xE0], offset: 0 },
+  { mime: 'application/vnd.ms-excel', bytes: [0xD0,0xCF,0x11,0xE0], offset: 0 },
+  { mime: 'application/vnd.ms-powerpoint', bytes: [0xD0,0xCF,0x11,0xE0], offset: 0 },
+  // ZIP/OOXML (docx, xlsx, pptx)
+  { mime: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',   bytes: [0x50,0x4B,0x03,0x04], offset: 0 },
+  { mime: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',         bytes: [0x50,0x4B,0x03,0x04], offset: 0 },
+  { mime: 'application/vnd.openxmlformats-officedocument.presentationml.presentation', bytes: [0x50,0x4B,0x03,0x04], offset: 0 },
+];
+
+function checkMagicBytes(filePath, declaredMime) {
+  if (declaredMime === 'text/plain') return true; // txt has no magic bytes
+  const rules = MAGIC.filter(m => m.mime === declaredMime);
+  if (!rules.length) return false; // unknown mime → reject
+  try {
+    const needed = Math.max(...rules.map(r => r.offset + r.bytes.length));
+    const buf  = Buffer.alloc(needed);
+    const fd   = fs.openSync(filePath, 'r');
+    const read = fs.readSync(fd, buf, 0, needed, 0);
+    fs.closeSync(fd);
+    if (read < needed) return false;
+    return rules.some(r => r.bytes.every((b, i) => buf[r.offset + i] === b));
+  } catch {
+    return false;
+  }
+}
+
+module.exports = { checkMagicBytes };
diff --git a/backend/src/utils/notifications.js b/backend/src/utils/notifications.js
new file mode 100644
index 0000000..1912efc
--- /dev/null
+++ b/backend/src/utils/notifications.js
@@ -0,0 +1,26 @@
+const db  = require('../db/db');
+const sse = require('../sse');
+
+function pushNotif(user_id, type, message, link) {
+  try {
+    const { lastInsertRowid } = db.prepare(
+      "INSERT INTO notifications (user_id, type, message, link) VALUES (?, ?, ?, ?)"
+    ).run(user_id, type, message, link || null);
+    sse.emit(user_id, { id: lastInsertRowid, type, message, link: link || null });
+  } catch (e) { console.error('[pushNotif]', e.message); }
+}
+
+/* ── Notify all active parent links for a student ────────────────────── */
+function pushParentNotif(studentId, type, message) {
+  try {
+    const links = db.prepare(
+      'SELECT id FROM parent_links WHERE student_id = ? AND is_active = 1'
+    ).all(studentId);
+    const ins = db.prepare(
+      'INSERT INTO parent_notifications (parent_link_id, type, message) VALUES (?, ?, ?)'
+    );
+    for (const link of links) ins.run(link.id, type, message);
+  } catch (e) { console.error('[pushParentNotif]', e.message); }
+}
+
+module.exports = { pushNotif, pushParentNotif };
diff --git a/backend/src/utils/sanitize.js b/backend/src/utils/sanitize.js
new file mode 100644
index 0000000..0277178
--- /dev/null
+++ b/backend/src/utils/sanitize.js
@@ -0,0 +1,27 @@
+/* ── Shared input sanitization ────────────────────────────────────────── */
+
+/**
+ * Strip HTML tags from a string.
+ * Use on user-supplied text that will be stored or rendered.
+ */
+function stripTags(str) {
+  if (typeof str !== 'string') return str;
+  let s = str;
+  let prev;
+  do { prev = s; s = s.replace(/<[^>]*>?/g, ''); } while (s !== prev);
+  return s.trim();
+}
+
+/**
+ * Sanitize an object's string fields in-place.
+ * @param {object} obj
+ * @param {string[]} fields — keys to sanitize
+ */
+function sanitizeFields(obj, fields) {
+  for (const f of fields) {
+    if (typeof obj[f] === 'string') obj[f] = stripTags(obj[f]);
+  }
+  return obj;
+}
+
+module.exports = { stripTags, sanitizeFields };
diff --git a/backend/tests/auth.test.js b/backend/tests/auth.test.js
new file mode 100644
index 0000000..9142a10
--- /dev/null
+++ b/backend/tests/auth.test.js
@@ -0,0 +1,92 @@
+const { describe, it, after } = require('node:test');
+const assert = require('node:assert/strict');
+const { db, inject, getToken, cleanup } = require('./setup');
+
+after(() => cleanup());
+
+describe('Auth', () => {
+  it('registers a new user', async () => {
+    const res = await inject('POST', '/api/auth/register', {
+      email: 'auth1@test.com', password: 'pass123', name: 'Auth User'
+    });
+    assert.equal(res.status, 201);
+    assert.ok(res.body.token);
+    assert.equal(res.body.user.email, 'auth1@test.com');
+  });
+
+  it('rejects duplicate email', async () => {
+    const res = await inject('POST', '/api/auth/register', {
+      email: 'auth1@test.com', password: 'pass123', name: 'Dupe'
+    });
+    assert.equal(res.status, 409);
+  });
+
+  it('validates required fields', async () => {
+    const res = await inject('POST', '/api/auth/register', { email: 'x@y.z' });
+    assert.equal(res.status, 400);
+  });
+
+  it('validates email format', async () => {
+    const res = await inject('POST', '/api/auth/register', {
+      email: 'not-an-email', password: 'pass123', name: 'Bad'
+    });
+    assert.equal(res.status, 400);
+  });
+
+  it('validates password min length', async () => {
+    const res = await inject('POST', '/api/auth/register', {
+      email: 'short@test.com', password: '12345', name: 'Short'
+    });
+    assert.equal(res.status, 400);
+  });
+
+  it('logs in with correct credentials', async () => {
+    const res = await inject('POST', '/api/auth/login', {
+      email: 'auth1@test.com', password: 'pass123'
+    });
+    assert.equal(res.status, 200);
+    assert.ok(res.body.token);
+  });
+
+  it('rejects wrong password', async () => {
+    const res = await inject('POST', '/api/auth/login', {
+      email: 'auth1@test.com', password: 'wrong'
+    });
+    assert.equal(res.status, 401);
+  });
+
+  it('GET /me returns user with valid token', async () => {
+    const { token } = await getToken();
+    const res = await inject('GET', '/api/auth/me', null, token);
+    assert.equal(res.status, 200);
+    assert.ok(res.body.id);
+  });
+
+  it('rejects request without token', async () => {
+    const res = await inject('GET', '/api/auth/me');
+    assert.equal(res.status, 401);
+  });
+
+  it('invalidates token after password change', async () => {
+    // Register
+    const reg = await inject('POST', '/api/auth/register', {
+      email: 'pwchange@test.com', password: 'old_pass123', name: 'PW Test'
+    });
+    const oldToken = reg.body.token;
+
+    // Change password
+    const upd = await inject('PATCH', '/api/auth/profile', {
+      currentPassword: 'old_pass123', newPassword: 'new_pass123'
+    }, oldToken);
+    assert.equal(upd.status, 200);
+    const newToken = upd.body.token;
+
+    // Old token should be rejected
+    const res1 = await inject('GET', '/api/auth/me', null, oldToken);
+    assert.equal(res1.status, 401);
+
+    // New token should work
+    const res2 = await inject('GET', '/api/auth/me', null, newToken);
+    assert.equal(res2.status, 200);
+  });
+});
diff --git a/backend/tests/sessions.test.js b/backend/tests/sessions.test.js
new file mode 100644
index 0000000..075f37c
--- /dev/null
+++ b/backend/tests/sessions.test.js
@@ -0,0 +1,106 @@
+const { describe, it, before, after } = require('node:test');
+const assert = require('node:assert/strict');
+const { db, inject, getToken, cleanup } = require('./setup');
+
+after(() => cleanup());
+
+describe('Sessions', () => {
+  let token, userId;
+
+  before(async () => {
+    const u = await getToken('student');
+    token = u.token; userId = u.userId;
+
+    // Ensure subject + questions exist
+    const subj = db.prepare('SELECT id FROM subjects WHERE slug = ?').get('chem');
+    if (!subj) {
+      db.prepare("INSERT INTO subjects (slug, name, icon) VALUES ('chem', 'Химия', 'atom')").run();
+    }
+    const subjId = db.prepare('SELECT id FROM subjects WHERE slug = ?').get('chem').id;
+
+    // Create some questions
+    const ins = db.prepare('INSERT INTO questions (subject_id, text, difficulty) VALUES (?, ?, 1)');
+    for (let i = 0; i < 5; i++) {
+      const qId = ins.run(subjId, `Test question ${i + 1}`).lastInsertRowid;
+      // Add options
+      db.prepare('INSERT INTO options (question_id, text, is_correct) VALUES (?, ?, ?)').run(qId, 'Wrong', 0);
+      db.prepare('INSERT INTO options (question_id, text, is_correct) VALUES (?, ?, ?)').run(qId, 'Correct', 1);
+    }
+  });
+
+  it('validates subject_slug required', async () => {
+    const res = await inject('POST', '/api/sessions', { mode: 'exam' }, token);
+    assert.equal(res.status, 400);
+  });
+
+  it('validates mode enum', async () => {
+    const res = await inject('POST', '/api/sessions', {
+      subject_slug: 'chem', mode: 'invalid'
+    }, token);
+    assert.equal(res.status, 400);
+  });
+
+  it('validates count range', async () => {
+    const res = await inject('POST', '/api/sessions', {
+      subject_slug: 'chem', count: 999
+    }, token);
+    assert.equal(res.status, 400);
+  });
+
+  it('starts a session successfully', async () => {
+    const res = await inject('POST', '/api/sessions', {
+      subject_slug: 'chem', count: 3, mode: 'exam'
+    }, token);
+    assert.equal(res.status, 201);
+    assert.ok(res.body.session_id);
+    assert.equal(res.body.mode, 'exam');
+    assert.ok(res.body.questions.length > 0);
+  });
+
+  it('submits an answer', async () => {
+    // Start fresh session
+    const s = await inject('POST', '/api/sessions', {
+      subject_slug: 'chem', count: 2, mode: 'practice'
+    }, token);
+    const sessionId = s.body.session_id;
+    const q = s.body.questions[0];
+
+    const res = await inject('POST', `/api/sessions/${sessionId}/answer`, {
+      question_id: q.id, option_id: q.options[0].id
+    }, token);
+    assert.equal(res.status, 200);
+    assert.ok('is_correct' in res.body);
+  });
+
+  it('validates answer question_id required', async () => {
+    const s = await inject('POST', '/api/sessions', {
+      subject_slug: 'chem', count: 2
+    }, token);
+    const sessionId = s.body.session_id;
+
+    const res = await inject('POST', `/api/sessions/${sessionId}/answer`, {}, token);
+    assert.equal(res.status, 400);
+  });
+
+  it('finishes a session', async () => {
+    const s = await inject('POST', '/api/sessions', {
+      subject_slug: 'chem', count: 1
+    }, token);
+    const sessionId = s.body.session_id;
+
+    const res = await inject('POST', `/api/sessions/${sessionId}/finish`, {}, token);
+    assert.equal(res.status, 200);
+    assert.ok('score' in res.body);
+  });
+
+  it('returns session history', async () => {
+    const res = await inject('GET', '/api/sessions/history', null, token);
+    assert.equal(res.status, 200);
+    assert.ok(Array.isArray(res.body.rows));
+  });
+
+  it('rejects session start without auth', async () => {
+    const res = await inject('POST', '/api/sessions', { subject_slug: 'chem' });
+    assert.equal(res.status, 401);
+  });
+});
diff --git a/backend/tests/setup.js b/backend/tests/setup.js
new file mode 100644
index 0000000..1320067
--- /dev/null
+++ b/backend/tests/setup.js
@@ -0,0 +1,116 @@
+/**
+ * Test setup — creates a temp SQLite DB, runs migrations, boots Express app.
+ * Usage:  const { app, db, getToken } = require('./setup');
+ */
+const path = require('path');
+const os   = require('os');
+const fs   = require('fs');
+
+// Unique temp DB per test run
+const tmpDb = path.join(os.tmpdir(), `ls_test_${Date.now()}_${Math.random().toString(36).slice(2)}.db`);
+process.env.DB_PATH    = tmpDb;
+process.env.JWT_SECRET = 'test_secret_that_is_at_least_32_characters_long!!';
+process.env.JWT_EXPIRES_IN = '1h';
+process.env.NODE_ENV   = 'test';
+
+// Now require app modules (they will use the temp DB)
+const db = require('../src/db/db');
+require('../src/db/migrate');
+
+// Seed permissions
+const { seedDefaults } = require('../src/controllers/permissionsController');
+seedDefaults();
+
+// Seed achievements
+const { seedAchievements } = require('../src/controllers/gamificationController');
+seedAchievements();
+
+// Build Express app (without listen)
+const express = require('express');
+const cors    = require('cors');
+
+const app = express();
+app.use(cors());
+app.use(express.json({ limit: '1mb' }));
+
+app.use('/api/auth',          require('../src/routes/auth'));
+app.use('/api/sessions',      require('../src/routes/sessions'));
+app.use('/api/shop',          require('../src/routes/shop'));
+app.use('/api/classes',       require('../src/routes/classes'));
+app.use('/api/gamification',  require('../src/routes/gamification'));
+app.use('/api/admin',         require('../src/routes/admin'));
+app.use('/api/subjects',      require('../src/routes/subjects'));
+app.use('/api/questions',     require('../src/routes/questions'));
+
+// Error handler
+app.use((err, _req, res, _next) => {
+  res.status(err.status || 500).json({ error: err.message || 'Server error' });
+});
+
+/* ── Helper: register + get token ─────────────────────────────────────── */
+let _userCounter = 0;
+
+async function getToken(role = 'student', nameOverride) {
+  const n = ++_userCounter;
+  const email = `test${n}@example.com`;
+  const name  = nameOverride || `Test User ${n}`;
+  const password = 'password123';
+
+  // Register via API
+  const res = await inject('POST', '/api/auth/register', { email, password, name });
+  const token = res.body.token;
+  const userId = res.body.user.id;
+
+  // If role is not student, set it directly in DB
+  if (role !== 'student') {
+    db.prepare('UPDATE users SET role = ? WHERE id = ?').run(role, userId);
+  }
+
+  return { token, userId, email, name };
+}
+
+/* ── HTTP injection (no real TCP) ─────────────────────────────────────── */
+const http = require('http');
+
+let _server;
+function ensureServer() {
+  if (!_server) {
+    _server = http.createServer(app);
+    _server.listen(0); // random port
+  }
+  return _server;
+}
+
+async function inject(method, path, body, token) {
+  const server = ensureServer();
+  const port = server.address().port;
+
+  return new Promise((resolve, reject) => {
+    const data = body ? JSON.stringify(body) : null;
+    const headers = { 'Content-Type': 'application/json' };
+    if (token) headers['Authorization'] = `Bearer ${token}`;
+    if (data) headers['Content-Length'] = Buffer.byteLength(data);
+
+    const req = http.request({ hostname: '127.0.0.1', port, path, method, headers }, (res) => {
+      let chunks = [];
+      res.on('data', c => chunks.push(c));
+      res.on('end', () => {
+        const raw = Buffer.concat(chunks).toString();
+        let parsed;
+        try { parsed = JSON.parse(raw); } catch { parsed = raw; }
+        resolve({ status: res.statusCode, body: parsed, headers: res.headers });
+      });
+    });
+    req.on('error', reject);
+    if (data) req.write(data);
+    req.end();
+  });
+}
+
+/* ── Cleanup ──────────────────────────────────────────────────────────── */
+function cleanup() {
+  if (_server) _server.close();
+  try { fs.unlinkSync(tmpDb); } catch {}
+}
+
+module.exports = { app, db, getToken, inject, cleanup };
diff --git a/backend/tests/shop.test.js b/backend/tests/shop.test.js
new file mode 100644
index 0000000..90ff8d3
--- /dev/null
+++ b/backend/tests/shop.test.js
@@ -0,0 +1,86 @@
+const { describe, it, before, after } = require('node:test');
+const assert = require('node:assert/strict');
+const { db, inject, getToken, cleanup } = require('./setup');
+
+after(() => cleanup());
+
+describe('Shop', () => {
+  let studentToken, studentId, adminToken, itemId;
+
+  before(async () => {
+    const s = await getToken('student');
+    studentToken = s.token; studentId = s.userId;
+    const a = await getToken('admin');
+    adminToken = a.token;
+
+    // Give student some coins
+    db.prepare('UPDATE users SET coins = 500 WHERE id = ?').run(studentId);
+
+    // Create a shop item via admin
+    const res = await inject('POST', '/api/shop/admin/items', {
+      name: 'Test Frame', type: 'frame', price: 100, category: 'cosmetic',
+      data: '{"css":"box-shadow:0 0 5px red"}', icon: 'star'
+    }, adminToken);
+    assert.equal(res.status, 200);
+    itemId = res.body.id;
+  });
+
+  it('lists items for student', async () => {
+    const res = await inject('GET', '/api/shop/items', null, studentToken);
+    assert.equal(res.status, 200);
+    assert.ok(Array.isArray(res.body.items));
+    assert.equal(res.body.coins, 500);
+  });
+
+  it('purchases item atomically', async () => {
+    const res = await inject('POST', `/api/shop/items/${itemId}/purchase`, {}, studentToken);
+    assert.equal(res.status, 200);
+    assert.equal(res.body.ok, true);
+    assert.equal(res.body.coins, 400); // 500 - 100
+  });
+
+  it('rejects duplicate purchase', async () => {
+    const res = await inject('POST', `/api/shop/items/${itemId}/purchase`, {}, studentToken);
+    assert.equal(res.status, 400);
+    assert.ok(res.body.error.includes('уже купили'));
+  });
+
+  it('rejects purchase with insufficient coins', async () => {
+    // Create expensive item
+    const cr = await inject('POST', '/api/shop/admin/items', {
+      name: 'Expensive', type: 'title', price: 99999
+    }, adminToken);
+    const expId = cr.body.id;
+
+    const res = await inject('POST', `/api/shop/items/${expId}/purchase`, {}, studentToken);
+    assert.equal(res.status, 400);
+    assert.ok(res.body.error.includes('монет'));
+  });
+
+  it('activates purchased item', async () => {
+    const res = await inject('POST', '/api/shop/activate', { itemId }, studentToken);
+    assert.equal(res.status, 200);
+    assert.equal(res.body.type, 'frame');
+  });
+
+  it('validates activate type field', async () => {
+    const res = await inject('POST', '/api/shop/activate', { type: 'invalid' }, studentToken);
+    assert.equal(res.status, 400);
+  });
+
+  it('validates admin create item fields', async () => {
+    const res = await inject('POST', '/api/shop/admin/items', { name: 'X' }, adminToken);
+    assert.equal(res.status, 400); // missing type, price
+  });
+
+  it('validates admin award-coins fields', async () => {
+    const res = await inject('POST', '/api/shop/admin/award-coins', { userId: 'abc' }, adminToken);
+    assert.equal(res.status, 400);
+  });
+
+  it('returns coin balance', async () => {
+    const res = await inject('GET', '/api/shop/coins', null, studentToken);
+    assert.equal(res.status, 200);
+    assert.equal(typeof res.body.coins, 'number');
+  });
+});
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..1571ac7
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,32 @@
+version: "3.9"
+
+services:
+  app:
+    build: .
+    container_name: ls-system
+    restart: unless-stopped
+    ports:
+      - "${PORT:-3000}:3000"
+    volumes:
+      - ls-data:/app/backend/data
+      - ls-uploads:/app/backend/uploads
+      - ls-backups:/app/backups
+    environment:
+      - NODE_ENV=production
+      - PORT=3000
+      - JWT_SECRET=${JWT_SECRET:?Set JWT_SECRET in .env}
+      - JWT_EXPIRES_IN=${JWT_EXPIRES_IN:-7d}
+      - CLIENT_ORIGIN=${CLIENT_ORIGIN:-}
+      - DB_PATH=/app/backend/data/learnspace.db
+      - UPLOADS_DIR=/app/backend/uploads
+    healthcheck:
+      test: ["CMD", "wget", "-qO-", "http://localhost:3000/api/health"]
+      interval: 30s
+      timeout: 5s
+      start_period: 10s
+      retries: 3
+
+volumes:
+  ls-data:
+  ls-uploads:
+  ls-backups:
diff --git a/frontend/403.html b/frontend/403.html
new file mode 100644
index 0000000..15d99bb
--- /dev/null
+++ b/frontend/403.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>403 — Нет доступа</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"/>
+  <style>
+    html, body { height: 100%; display: flex; align-items: center; justify-content: center; }
+    .err-wrap { text-align: center; padding: 40px 24px; max-width: 480px; }
+    .err-code {
+      font-family: 'Unbounded', sans-serif; font-size: 6rem; font-weight: 900;
+      background: linear-gradient(135deg, #F15BB5, #9B5DE5);
+      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+      background-clip: text; line-height: 1; margin-bottom: 8px;
+    }
+    .err-title { font-family: 'Unbounded', sans-serif; font-size: 1.2rem; font-weight: 800; color: var(--text); margin-bottom: 12px; }
+    .err-desc { font-size: 0.92rem; color: var(--text-3); line-height: 1.6; margin-bottom: 32px; }
+    .err-illustration {
+      width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 28px;
+      background: linear-gradient(135deg, rgba(241,91,181,.15), rgba(155,93,229,.1));
+      border: 2px solid rgba(241,91,181,.2);
+      display: flex; align-items: center; justify-content: center;
+    }
+    .err-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
+    .err-btn-primary {
+      padding: 11px 28px; border: none; border-radius: 99px;
+      background: linear-gradient(135deg, #F15BB5, #9B5DE5);
+      color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.88rem; font-weight: 700;
+      text-decoration: none; display: inline-flex; align-items: center; gap: 7px; transition: all .2s;
+    }
+    .err-btn-primary:hover { opacity: .88; transform: translateY(-1px); }
+    .err-btn-secondary {
+      padding: 10px 22px; border: 1.5px solid var(--border-h); border-radius: 99px;
+      background: transparent; color: var(--text-2); font-family: 'Manrope', sans-serif;
+      font-size: 0.88rem; font-weight: 600; text-decoration: none;
+      display: inline-flex; align-items: center; gap: 7px; transition: all .2s;
+    }
+    .err-btn-secondary:hover { border-color: var(--violet); color: var(--violet); }
+  </style>
+</head>
+<body>
+<div class="err-wrap">
+  <div class="err-illustration">
+    <svg width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="#F15BB5" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+      <rect width="18" height="11" x="3" y="11" rx="2" ry="2"/>
+      <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
+    </svg>
+  </div>
+  <div class="err-code">403</div>
+  <div class="err-title">Нет доступа</div>
+  <div class="err-desc">У тебя нет прав для просмотра этой страницы. Если ты считаешь, что это ошибка, обратись к преподавателю или администратору.</div>
+  <div class="err-actions">
+    <a class="err-btn-primary" href="/dashboard">
+      <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="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+      На главную
+    </a>
+    <button class="err-btn-secondary" onclick="history.back()">
+      <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="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
+      Назад
+    </button>
+    <a class="err-btn-secondary" href="/login">
+      <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 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" x2="3" y1="12" y2="12"/></svg>
+      Войти
+    </a>
+  </div>
+</div>
+</body>
+</html>
diff --git a/frontend/404.html b/frontend/404.html
new file mode 100644
index 0000000..3263d91
--- /dev/null
+++ b/frontend/404.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>404 — Страница не найдена</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"/>
+  <style>
+    html, body { height: 100%; display: flex; align-items: center; justify-content: center; }
+    .err-wrap {
+      text-align: center; padding: 40px 24px; max-width: 480px;
+    }
+    .err-code {
+      font-family: 'Unbounded', sans-serif; font-size: 6rem; font-weight: 900;
+      background: linear-gradient(135deg, #9B5DE5, #06D6E0);
+      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+      background-clip: text; line-height: 1; margin-bottom: 8px;
+    }
+    .err-title {
+      font-family: 'Unbounded', sans-serif; font-size: 1.2rem; font-weight: 800;
+      color: var(--text); margin-bottom: 12px;
+    }
+    .err-desc { font-size: 0.92rem; color: var(--text-3); line-height: 1.6; margin-bottom: 32px; }
+    .err-illustration {
+      width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 28px;
+      background: linear-gradient(135deg, rgba(155,93,229,.15), rgba(6,214,224,.1));
+      border: 2px solid rgba(155,93,229,.2);
+      display: flex; align-items: center; justify-content: center;
+    }
+    .err-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
+    .err-btn-primary {
+      padding: 11px 28px; border: none; border-radius: 99px;
+      background: linear-gradient(135deg, #9B5DE5, #06D6E0);
+      color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.88rem; font-weight: 700;
+      text-decoration: none; display: inline-flex; align-items: center; gap: 7px;
+      transition: all .2s;
+    }
+    .err-btn-primary:hover { opacity: .88; transform: translateY(-1px); }
+    .err-btn-secondary {
+      padding: 10px 22px; border: 1.5px solid var(--border-h); border-radius: 99px;
+      background: transparent; color: var(--text-2); font-family: 'Manrope', sans-serif;
+      font-size: 0.88rem; font-weight: 600; text-decoration: none;
+      display: inline-flex; align-items: center; gap: 7px; transition: all .2s;
+    }
+    .err-btn-secondary:hover { border-color: var(--violet); color: var(--violet); }
+    .err-search {
+      display: flex; gap: 8px; margin-bottom: 20px;
+    }
+    .err-search input {
+      flex: 1; padding: 10px 14px; border: 1.5px solid var(--border-h); border-radius: 12px;
+      font-family: 'Manrope', sans-serif; font-size: 0.88rem; color: var(--text);
+      background: var(--surface); outline: none; transition: border-color .2s;
+    }
+    .err-search input:focus { border-color: var(--violet); }
+    .err-search button {
+      padding: 10px 18px; border: none; border-radius: 12px;
+      background: rgba(155,93,229,.12); color: var(--violet);
+      font-family: 'Manrope', sans-serif; font-size: 0.88rem; font-weight: 700; cursor: pointer;
+      transition: background .2s;
+    }
+    .err-search button:hover { background: rgba(155,93,229,.22); }
+  </style>
+</head>
+<body>
+<div class="err-wrap">
+  <div class="err-illustration">
+    <svg width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="#9B5DE5" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+      <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
+      <path d="M11 8v4M11 16h.01"/>
+    </svg>
+  </div>
+  <div class="err-code">404</div>
+  <div class="err-title">Страница не найдена</div>
+  <div class="err-desc">Такой страницы не существует или она была перемещена. Попробуй поискать или вернись на главную.</div>
+  <div class="err-search">
+    <input type="text" id="search-inp" placeholder="Поиск по системе..." onkeydown="if(event.key==='Enter')doSearch()"/>
+    <button onclick="doSearch()">Найти</button>
+  </div>
+  <div class="err-actions">
+    <a class="err-btn-primary" href="/dashboard">
+      <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="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+      На главную
+    </a>
+    <button class="err-btn-secondary" onclick="history.back()">
+      <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="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
+      Назад
+    </button>
+  </div>
+</div>
+<script>
+function doSearch() {
+  const q = document.getElementById('search-inp').value.trim();
+  if (q) window.location.href = '/library?q=' + encodeURIComponent(q);
+}
+</script>
+</body>
+</html>
diff --git a/frontend/500.html b/frontend/500.html
new file mode 100644
index 0000000..4183e1f
--- /dev/null
+++ b/frontend/500.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>500 — Ошибка сервера</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"/>
+  <style>
+    html, body { height: 100%; display: flex; align-items: center; justify-content: center; }
+    .err-wrap { text-align: center; padding: 40px 24px; max-width: 480px; }
+    .err-code {
+      font-family: 'Unbounded', sans-serif; font-size: 6rem; font-weight: 900;
+      background: linear-gradient(135deg, #FFB347, #F15BB5);
+      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+      background-clip: text; line-height: 1; margin-bottom: 8px;
+    }
+    .err-title { font-family: 'Unbounded', sans-serif; font-size: 1.2rem; font-weight: 800; color: var(--text); margin-bottom: 12px; }
+    .err-desc { font-size: 0.92rem; color: var(--text-3); line-height: 1.6; margin-bottom: 32px; }
+    .err-illustration {
+      width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 28px;
+      background: linear-gradient(135deg, rgba(255,179,71,.15), rgba(241,91,181,.1));
+      border: 2px solid rgba(255,179,71,.25);
+      display: flex; align-items: center; justify-content: center;
+    }
+    .err-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
+    .err-btn-primary {
+      padding: 11px 28px; border: none; border-radius: 99px;
+      background: linear-gradient(135deg, #FFB347, #F15BB5);
+      color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.88rem; font-weight: 700;
+      text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: all .2s;
+    }
+    .err-btn-primary:hover { opacity: .88; transform: translateY(-1px); }
+    .err-btn-secondary {
+      padding: 10px 22px; border: 1.5px solid var(--border-h); border-radius: 99px;
+      background: transparent; color: var(--text-2); font-family: 'Manrope', sans-serif;
+      font-size: 0.88rem; font-weight: 600; text-decoration: none;
+      display: inline-flex; align-items: center; gap: 7px; transition: all .2s; cursor: pointer;
+    }
+    .err-btn-secondary:hover { border-color: var(--violet); color: var(--violet); }
+    .err-hint {
+      display: inline-flex; align-items: center; gap: 6px; margin-bottom: 24px;
+      padding: 8px 16px; border-radius: 99px;
+      background: rgba(255,179,71,.08); border: 1px solid rgba(255,179,71,.2);
+      font-size: 0.78rem; color: #FFB347; font-weight: 600;
+    }
+  </style>
+</head>
+<body>
+<div class="err-wrap">
+  <div class="err-illustration">
+    <svg width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="#FFB347" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+      <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3z"/>
+      <path d="M12 9v4M12 17h.01"/>
+    </svg>
+  </div>
+  <div class="err-code">500</div>
+  <div class="err-title">Что-то пошло не так</div>
+  <div class="err-hint">
+    <svg width="13" height="13" 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"/><path d="M12 8v4M12 16h.01"/></svg>
+    Ошибка на стороне сервера — мы уже в курсе
+  </div>
+  <div class="err-desc">Произошла внутренняя ошибка. Попробуй перезагрузить страницу или вернуться позже.</div>
+  <div class="err-actions">
+    <button class="err-btn-primary" onclick="location.reload()">
+      <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="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg>
+      Перезагрузить
+    </button>
+    <a class="err-btn-secondary" href="/dashboard">
+      <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="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+      На главную
+    </a>
+  </div>
+</div>
+</body>
+</html>
diff --git a/frontend/admin.html b/frontend/admin.html
new file mode 100644
index 0000000..ebf548a
--- /dev/null
+++ b/frontend/admin.html
@@ -0,0 +1,4837 @@
+<!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 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.11/dist/katex.min.css" crossorigin="anonymous" />
+  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js" crossorigin="anonymous"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js" crossorigin="anonymous"
+    onload="window._katexReady=true; if(window._katexCb){window._katexCb(); window._katexCb=null;}"></script>
+  <script src="https://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+  <style>
+    .container { padding: 32px 32px 80px; }
+    .page-title { font-family: 'Unbounded', sans-serif; font-size: 1.65rem; font-weight: 800; margin-bottom: 6px; }
+    .page-sub   { font-size: 1rem; color: var(--text-2); margin-bottom: 40px; }
+    .section-title { font-family: 'Unbounded', sans-serif; font-size: 0.9rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 20px; }
+
+    /* stats */
+    .stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px; margin-bottom: 48px; }
+    .stat-card  { background: var(--surface); backdrop-filter: var(--blur); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px 24px; }
+    .stat-val   { font-family: 'Unbounded', sans-serif; font-size: 2.4rem; font-weight: 800; margin-bottom: 6px; }
+    .stat-label { font-size: 0.9rem; color: var(--text-3); font-weight: 600; }
+    .stat-val.violet { color: var(--violet); }
+    .stat-val.cyan   { color: var(--cyan); }
+    .stat-val.green  { color: var(--green); }
+    .subj-stats { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 48px; }
+    .subj-stat  { background: var(--surface); backdrop-filter: var(--blur); border: 1px solid var(--border); border-radius: 16px; padding: 18px 22px; display: flex; align-items: center; gap: 14px; }
+    .subj-stat-name { font-size: 0.95rem; font-weight: 700; }
+    .subj-stat-info { font-size: 0.84rem; color: var(--text-3); }
+    .subj-stat-pct  { font-family: 'Unbounded', sans-serif; font-size: 1.1rem; font-weight: 800; color: var(--violet); min-width: 48px; text-align: right; }
+
+    /* subject config cards */
+    .sc-list { display: flex; flex-direction: column; gap: 8px; }
+    .sc-card {
+      background: #fff; border: 1.5px solid var(--border); border-radius: 16px;
+      overflow: hidden; transition: border-color 0.18s, box-shadow 0.18s;
+    }
+    .sc-card.open { border-color: rgba(155,93,229,0.2); box-shadow: 0 6px 24px rgba(15,23,42,0.07); }
+
+    /* Collapsed row — always visible */
+    .sc-row-top {
+      display: flex; align-items: center; gap: 14px; padding: 14px 20px;
+      cursor: pointer; user-select: none; transition: background 0.12s;
+    }
+    .sc-row-top:hover { background: rgba(155,93,229,0.02); }
+    .sc-icon {
+      width: 42px; height: 42px; border-radius: 12px;
+      display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff;
+    }
+    .sc-icon svg { width: 20px; height: 20px; }
+    .sc-info { flex: 1; min-width: 0; }
+    .sc-name { font-family: 'Unbounded', sans-serif; font-size: 0.88rem; font-weight: 800; color: #0F172A; }
+    .sc-summary {
+      display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; align-items: center;
+    }
+    .sc-tag {
+      font-size: 0.68rem; font-weight: 700; padding: 2px 8px; border-radius: 6px;
+      background: rgba(15,23,42,0.05); color: #64748B;
+    }
+    .sc-tag-mode { background: rgba(155,93,229,0.08); color: var(--violet); }
+    .sc-qcount { font-size: 0.72rem; color: #8898AA; font-weight: 600; }
+    .sc-chevron {
+      width: 20px; height: 20px; color: #cbd5e1; transition: transform 0.2s; flex-shrink: 0;
+    }
+    .sc-card.open .sc-chevron { transform: rotate(180deg); color: var(--violet); }
+
+    /* Expanded body */
+    .sc-body {
+      display: none; padding: 0 20px 20px; flex-direction: column; gap: 14px;
+      border-top: 1px solid rgba(15,23,42,0.06);
+    }
+    .sc-card.open .sc-body { display: flex; }
+
+    /* Presets row */
+    .sc-presets {
+      display: flex; gap: 6px; flex-wrap: wrap; padding-top: 14px;
+    }
+    .sc-preset {
+      padding: 6px 14px; border: 1.5px solid var(--border); border-radius: 99px;
+      background: #fff; font-family: 'Manrope', sans-serif; font-size: 0.76rem;
+      font-weight: 600; color: #64748B; cursor: pointer; transition: all 0.15s;
+    }
+    .sc-preset:hover { border-color: rgba(155,93,229,0.35); color: var(--violet); background: rgba(155,93,229,0.04); }
+    .sc-preset.active { border-color: var(--violet); background: rgba(155,93,229,0.08); color: var(--violet); }
+
+    /* Fields */
+    .sc-fields { display: flex; flex-direction: column; gap: 12px; }
+    .sc-field { display: flex; align-items: center; gap: 10px; }
+    .sc-label {
+      font-size: 0.72rem; color: #8898AA; font-weight: 700; white-space: nowrap;
+      text-transform: uppercase; letter-spacing: 0.04em; min-width: 68px;
+    }
+    .sc-select {
+      flex: 1; padding: 8px 12px; border: 1.5px solid var(--border); border-radius: 10px;
+      background: #f8f9fc; font-family: 'Manrope', sans-serif; font-size: 0.82rem;
+      font-weight: 600; color: var(--text); cursor: pointer; transition: border-color 0.15s;
+    }
+    .sc-select:focus { border-color: var(--violet); outline: none; }
+    .sc-input {
+      width: 68px; padding: 8px 10px; border: 1.5px solid var(--border); border-radius: 10px;
+      background: #f8f9fc; font-family: 'Manrope', sans-serif; font-size: 0.82rem;
+      font-weight: 600; color: var(--text); text-align: center; transition: border-color 0.15s;
+    }
+    .sc-input:focus { border-color: var(--violet); outline: none; }
+    .sc-src-toggle {
+      display: flex; gap: 0; background: rgba(15,23,42,0.04); border-radius: 10px; padding: 3px; flex: 1;
+    }
+    .sc-src-btn {
+      flex: 1; padding: 6px 12px; border: none; border-radius: 8px; background: transparent;
+      font-family: 'Manrope', sans-serif; font-size: 0.76rem; font-weight: 600;
+      color: #8898AA; cursor: pointer; transition: all 0.15s; text-align: center;
+    }
+    .sc-src-btn.active { background: #fff; color: var(--violet); box-shadow: 0 1px 4px rgba(15,23,42,0.08); }
+    .sc-test-pick { display: none; flex-direction: column; gap: 10px; }
+    .sc-test-pick.open { display: flex; }
+
+    /* Footer */
+    .sc-footer {
+      display: flex; gap: 8px; align-items: center; padding-top: 14px;
+      border-top: 1px solid rgba(15,23,42,0.05);
+    }
+    .sc-save {
+      padding: 8px 22px; border: none; border-radius: 999px; background: #0F172A; color: #fff;
+      font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 700;
+      cursor: pointer; transition: all 0.15s;
+    }
+    .sc-save:hover { background: #1E293B; }
+    .sc-save.saved { background: #059652; pointer-events: none; }
+    .sc-save-add {
+      padding: 8px 16px; border: 1.5px solid rgba(155,93,229,0.25); border-radius: 999px;
+      background: rgba(155,93,229,0.06); color: var(--violet);
+      font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 700;
+      cursor: pointer; transition: all 0.15s;
+    }
+    .sc-save-add:hover { background: rgba(155,93,229,0.12); border-color: var(--violet); }
+
+    /* tables */
+    .table-wrap { background: var(--surface); backdrop-filter: var(--blur); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 48px; box-shadow: var(--shadow); }
+    table { width: 100%; border-collapse: collapse; }
+    th { padding: 14px 20px; text-align: left; font-size: 0.82rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--border); background: rgba(238,242,255,0.5); }
+    td { padding: 15px 20px; font-size: 0.94rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
+    tr:last-child td { border-bottom: none; }
+    tr.clickable { cursor: pointer; transition: background var(--tr); }
+    tr.clickable:hover td { background: rgba(155,93,229,0.04); }
+    tr.selected td { background: rgba(155,93,229,0.07); }
+    .role-badge { display: inline-block; padding: 4px 12px; border-radius: var(--r-pill); font-size: 0.78rem; font-weight: 700; }
+    .role-badge.student      { background: rgba(15,23,42,0.07); color: var(--text-3); }
+    .role-badge.free_student { background: rgba(16,185,129,0.12); color: #059669; }
+    .role-badge.teacher      { background: rgba(6,214,224,0.12); color: #05aab3; }
+    .role-badge.admin        { background: rgba(155,93,229,0.12); color: var(--violet); }
+    .role-select { padding: 6px 10px; border: 1.5px solid var(--border-h); border-radius: 8px; font-family: 'Manrope', sans-serif; font-size: 0.88rem; font-weight: 600; background: transparent; color: var(--text); cursor: pointer; }
+    .role-select:focus { outline: none; border-color: var(--violet); }
+    .role-select:disabled { opacity: 0.4; cursor: default; }
+    .pct-cell { font-family: 'Unbounded', sans-serif; font-size: 0.92rem; font-weight: 700; }
+    .pct-hi   { color: var(--green); }
+    .pct-mid  { color: var(--amber); }
+    .pct-lo   { color: var(--pink); }
+
+    /* user panel */
+    .user-panel { background: var(--surface); backdrop-filter: var(--blur); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 32px; box-shadow: var(--shadow); display: none; }
+    .user-panel.visible { display: block; }
+    .user-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
+    .user-panel-name  { font-family: 'Unbounded', sans-serif; font-size: 1.1rem; font-weight: 800; }
+    .user-panel-email { font-size: 0.92rem; color: var(--text-3); margin-top: 3px; }
+    .btn-close { padding: 8px 18px; border: 1.5px solid var(--border-h); border-radius: var(--r-pill); background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.88rem; font-weight: 600; color: var(--text-3); cursor: pointer; transition: all var(--tr); }
+    .btn-close:hover { border-color: var(--pink); color: var(--pink); }
+    .sess-list { display: flex; flex-direction: column; gap: 12px; }
+    .sess-item { display: flex; align-items: center; gap: 16px; padding: 14px 20px; border: 1px solid var(--border); border-radius: 14px; }
+    .sess-pct  { font-family: 'Unbounded', sans-serif; font-size: 1.1rem; font-weight: 800; min-width: 52px; text-align: center; }
+    .sess-info { flex: 1; }
+    .sess-subj { font-size: 0.94rem; font-weight: 700; margin-bottom: 3px; }
+    .sess-meta { font-size: 0.83rem; color: var(--text-3); }
+    .sess-score{ font-size: 0.9rem; font-weight: 600; color: var(--text-2); white-space: nowrap; }
+
+    .spinner { width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--violet); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 40px auto; display: block; }
+    .empty { text-align: center; padding: 40px; color: var(--text-3); font-size: 0.95rem; }
+    .error { color: var(--pink); font-size: 0.92rem; padding: 14px 0; }
+
+    /* ── admin two-column layout ── */
+    .admin-layout { display: flex; gap: 0; align-items: flex-start; }
+
+    .admin-nav {
+      width: 200px; flex-shrink: 0;
+      position: sticky; top: 24px;
+      background: var(--surface); border: 1px solid var(--border);
+      border-radius: var(--r-lg); padding: 12px 10px;
+      box-shadow: var(--shadow);
+      display: flex; flex-direction: column; gap: 2px;
+    }
+    .admin-nav-label {
+      font-size: .68rem; font-weight: 800; text-transform: uppercase;
+      letter-spacing: .09em; color: var(--text-3);
+      padding: 12px 12px 5px; margin-top: 4px;
+    }
+    .admin-nav-label:first-child { margin-top: 0; }
+    .admin-nav-sep { height: 1px; background: var(--border); margin: 8px 6px; }
+    .admin-nav-item {
+      display: flex; align-items: center; gap: 10px;
+      padding: 10px 12px; border-radius: 10px; border: none;
+      background: transparent; width: 100%; text-align: left;
+      font-family: 'Manrope', sans-serif; font-size: .93rem; font-weight: 600;
+      color: var(--text-2); cursor: pointer; transition: all .14s;
+      white-space: nowrap;
+    }
+    .admin-nav-item svg { flex-shrink: 0; opacity: .7; }
+    .admin-nav-item:hover { background: rgba(155,93,229,.07); color: var(--text); }
+    .admin-nav-item:hover svg { opacity: 1; }
+    .admin-nav-item.active {
+      background: rgba(155,93,229,.1); color: var(--violet);
+      font-weight: 700;
+    }
+    .admin-nav-item.active svg { opacity: 1; color: var(--violet); }
+
+    .admin-main { flex: 1; min-width: 0; padding-left: 28px; }
+
+    /* tab panes */
+    .tab-pane { display: none; }
+    .tab-pane.active { display: block; }
+
+    /* permissions tab */
+    .perm-header { margin-bottom: 24px; }
+    .perm-role-block { background: var(--surface); border: 1.5px solid var(--border-h); border-radius: var(--r-xl); padding: 20px 24px; margin-bottom: 20px; }
+    .perm-role-title { margin-bottom: 16px; }
+    .perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
+    .perm-card { display: flex; align-items: flex-start; gap: 16px; padding: 16px 20px; border: 1.5px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2, #f8fafc); transition: border-color .2s, box-shadow .2s; }
+    .perm-card:hover { border-color: var(--violet); box-shadow: 0 2px 12px rgba(109,40,217,.08); }
+    .perm-card.enabled { border-color: rgba(6,214,160,.5); background: rgba(6,214,160,.04); }
+    .perm-info { flex: 1; min-width: 0; }
+    .perm-label { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.3; }
+    .perm-desc  { font-size: 13px; color: var(--muted); margin-top: 4px; line-height: 1.45; }
+    /* toggle switch */
+    .perm-toggle { flex-shrink: 0; position: relative; width: 46px; height: 26px; cursor: pointer; }
+    .perm-toggle input { opacity: 0; width: 0; height: 0; }
+    .perm-track { position: absolute; inset: 0; border-radius: 26px; background: var(--border-h); transition: background .2s; }
+    .perm-thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); transition: transform .2s; }
+    .perm-toggle input:checked ~ .perm-track { background: var(--green, #06d6a0); }
+    .perm-toggle input:checked ~ .perm-thumb { transform: translateX(20px); }
+    .perm-toggle input:focus-visible ~ .perm-track { outline: 2px solid var(--violet); }
+
+    /* toolbar */
+    .t-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 24px; }
+    .t-select { padding: 10px 16px; border: 1.5px solid var(--border-h); border-radius: var(--r-pill); font-family: 'Manrope', sans-serif; font-size: 0.92rem; font-weight: 600; background: var(--surface); color: var(--text); cursor: pointer; }
+    .t-select:focus { outline: none; border-color: var(--violet); }
+    .t-input  { padding: 10px 16px; border: 1.5px solid var(--border-h); border-radius: var(--r-pill); font-family: 'Manrope', sans-serif; font-size: 0.92rem; background: var(--surface); color: var(--text); width: 220px; }
+    .t-input:focus { outline: none; border-color: var(--violet); }
+    .t-count  { font-size: 0.9rem; color: var(--text-3); margin-left: auto; }
+    .btn-add  { padding: 10px 24px; border: none; border-radius: var(--r-pill); background: var(--grad-1); color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.92rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: transform var(--tr), box-shadow var(--tr); }
+    .btn-add:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(6,214,224,0.35); }
+
+    .mode-badge { display: inline-block; padding: 3px 10px; border-radius: var(--r-pill); font-size: 0.76rem; font-weight: 700; }
+    .mode-exam     { background: rgba(155,93,229,0.1); color: var(--violet); }
+    .mode-practice { background: rgba(6,214,224,0.1); color: #05aab3; }
+    .mode-repeat   { background: rgba(6,214,224,0.1); color: #05aab3; }
+    .mode-ct       { background: rgba(255,179,71,0.12); color: var(--amber); }
+    .mode-topic    { background: rgba(255,179,71,0.12); color: var(--amber); }
+    .mode-random   { background: rgba(15,23,42,0.07); color: var(--text-3); }
+
+    /* ── assignment card rows ── */
+    .a-summary { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
+    .a-sum-chip { padding: 6px 16px; border-radius: var(--r-pill); font-size: 0.85rem; font-weight: 700; font-family: 'Manrope', sans-serif; display: flex; align-items: center; gap: 7px; }
+    .a-sum-chip.s-all     { background: rgba(15,23,42,0.06);    color: var(--text-3); }
+    .a-sum-chip.s-active  { background: rgba(155,93,229,0.1);   color: var(--violet); }
+    .a-sum-chip.s-overdue { background: rgba(241,91,181,0.12);  color: var(--pink); }
+    .a-sum-chip.s-done    { background: rgba(6,214,100,0.12);   color: #059652; }
+
+    .a-filter-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
+    .a-f-chip { padding: 6px 18px; border-radius: var(--r-pill); border: 1.5px solid var(--border-h); background: var(--surface); color: var(--text-3); font-family: 'Manrope', sans-serif; font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: all var(--tr); }
+    .a-f-chip:hover { border-color: var(--violet); color: var(--violet); }
+    .a-f-chip.active { background: #0F172A; color: #fff; border-color: #0F172A; }
+    .a-filter-sep { width: 1px; height: 22px; background: var(--border-h); margin: 0 4px; }
+    .a-sort-sel { padding: 6px 14px; border: 1.5px solid var(--border-h); border-radius: var(--r-pill); background: var(--surface); color: var(--text-3); font-family: 'Manrope', sans-serif; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
+    .a-sort-sel:focus { outline: none; border-color: var(--violet); }
+
+    .a-rows { display: flex; flex-direction: column; gap: 6px; }
+    .a-row {
+      display: flex; align-items: center; gap: 14px;
+      background: var(--surface);
+      border: 1.5px solid var(--border);
+      border-left: 4px solid var(--ac, var(--violet));
+      border-radius: 14px;
+      padding: 0 16px 0 12px;
+      height: 68px;
+      transition: box-shadow 0.15s, transform 0.15s;
+    }
+    .a-row:hover { box-shadow: 0 4px 18px rgba(15,23,42,0.1); transform: translateX(2px); }
+    .a-row.a-overdue { --ac: var(--pink);   background: rgba(241,91,181,0.02); }
+    .a-row.a-done    { --ac: var(--green);  opacity: 0.76; }
+    .a-row.a-urgent  { --ac: #FF4C29; }
+
+    .a-icon { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.05rem; }
+    .a-main { flex: 1; min-width: 0; }
+    .a-title { font-size: 0.94rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); line-height: 1.2; }
+    .a-meta  { font-size: 0.78rem; color: var(--text-3); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .a-meta .a-tag-over   { color: var(--pink);  font-weight: 700; }
+    .a-meta .a-tag-urgent { color: #E83A1E;       font-weight: 700; }
+
+    .a-prog { flex-shrink: 0; width: 120px; }
+    .a-prog-nums { display: flex; justify-content: space-between; font-size: 0.76rem; color: var(--text-3); font-weight: 600; margin-bottom: 5px; }
+    .a-prog-pct  { font-family: 'Unbounded', sans-serif; font-size: 0.84rem; font-weight: 900; }
+    .a-prog-bar  { height: 6px; border-radius: 99px; background: rgba(15,23,42,0.08); overflow: hidden; }
+    .a-prog-fill { height: 100%; border-radius: 99px; transition: width 0.3s; }
+
+    .a-actions { display: flex; gap: 6px; flex-shrink: 0; }
+
+    /* session drawer */
+    .sess-drawer { overflow: hidden; max-height: 0; transition: max-height 0.35s ease; }
+    .sess-drawer.open { max-height: 4000px; }
+    .sess-drawer-inner { padding: 28px 32px; background: rgba(238,242,255,0.6); border-top: 1px solid var(--border); }
+    .drawer-header { display: flex; align-items: center; gap: 18px; margin-bottom: 24px; flex-wrap: wrap; }
+    .drawer-meta   { font-size: 0.9rem; color: var(--text-3); }
+    .drawer-score  { font-family: 'Unbounded', sans-serif; font-size: 1.8rem; font-weight: 900; }
+    .qb-list  { display: flex; flex-direction: column; gap: 12px; }
+    .qb-item  { border-radius: 14px; padding: 16px 20px; border: 1px solid var(--border); background: var(--surface); }
+    .qb-item.correct { border-left: 3px solid var(--green); }
+    .qb-item.wrong   { border-left: 3px solid var(--pink); }
+    .qb-item.skipped { border-left: 3px solid var(--text-3); }
+    .qb-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
+    .qb-badge  { padding: 3px 10px; border-radius: var(--r-pill); font-size: 0.74rem; font-weight: 700; }
+    .qb-badge.correct { background: rgba(6,214,100,0.1); color: var(--green); }
+    .qb-badge.wrong   { background: rgba(241,91,181,0.1); color: var(--pink); }
+    .qb-badge.skipped { background: rgba(15,23,42,0.06); color: var(--text-3); }
+    .qb-qnum  { font-size: 0.82rem; color: var(--text-3); font-weight: 600; }
+    .qb-time  { margin-left: auto; font-size: 0.79rem; color: var(--text-3); }
+    .qb-text  { font-size: 0.96rem; line-height: 1.6; margin-bottom: 12px; }
+    .qb-opts  { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
+    .qb-opt   { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 9px; font-size: 0.9rem; }
+    .qb-opt.correct-opt  { background: rgba(6,214,100,0.08); color: var(--green); font-weight: 600; }
+    .qb-opt.chosen-wrong { background: rgba(241,91,181,0.08); color: var(--pink); }
+    .qb-opt-icon { font-size: 0.88rem; width: 18px; text-align: center; flex-shrink: 0; }
+    .qb-expl  { font-size: 0.88rem; color: var(--text-2); background: rgba(155,93,229,0.05); border: 1px solid rgba(155,93,229,0.12); border-radius: 9px; padding: 10px 14px; line-height: 1.6; }
+
+    /* ── E: upgraded stat cards ── */
+    .stat-card { position: relative; overflow: hidden; }
+    .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--stat-top, var(--violet)); opacity: 0.7; }
+    .stat-card-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 14px; }
+
+    /* ── F: performance bar in users table ── */
+    .perf-bar { height: 4px; background: rgba(15,23,42,0.06); border-radius: 99px; margin-top: 6px; min-width: 70px; overflow: hidden; }
+    .perf-fill { height: 100%; border-radius: 99px; }
+    .perf-fill.pct-hi  { background: var(--green); }
+    .perf-fill.pct-mid { background: var(--amber); }
+    .perf-fill.pct-lo  { background: var(--pink); }
+
+    /* ── H: session timeline ── */
+    .sess-tl-day { font-family: 'Unbounded', sans-serif; font-size: 0.76rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; margin: 24px 0 12px; display: flex; align-items: center; gap: 10px; }
+    .sess-tl-day::after { content: ''; flex: 1; height: 1px; background: var(--border); }
+    .sess-tl-day:first-child { margin-top: 0; }
+    .sess-tl-item { display: flex; align-items: center; gap: 16px; padding: 15px 20px; border: 1px solid var(--border); border-radius: 14px; margin-bottom: 10px; transition: all var(--tr); cursor: pointer; background: var(--surface); }
+    .sess-tl-item:hover { border-color: var(--border-h); transform: translateX(3px); box-shadow: 0 4px 20px rgba(15,23,42,0.07); }
+    .sess-tl-item.open { border-color: var(--violet); background: rgba(155,93,229,0.04); }
+    .sess-tl-ring { flex-shrink: 0; }
+    .sess-tl-user { flex: 1; min-width: 0; }
+    .sess-tl-name { font-size: 0.94rem; font-weight: 700; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .sess-tl-meta { font-size: 0.81rem; color: var(--text-3); }
+    .sess-tl-score { font-size: 0.8rem; font-weight: 600; color: var(--text-2); white-space: nowrap; }
+    .sess-tl-time  { font-size: 0.75rem; color: var(--text-3); white-space: nowrap; }
+    .sess-tl-drawer { overflow: hidden; max-height: 0; transition: max-height 0.35s ease; margin-bottom: 0; }
+    .sess-tl-drawer.open { max-height: 4000px; margin-bottom: 8px; }
+    .sess-tl-wrap { display: flex; flex-direction: column; }
+
+    /* ═══ QUESTION EDITOR ═══════════════════════════════════════════════ */
+    .q-list { display: flex; flex-direction: column; gap: 12px; }
+    .q-card { background: var(--surface); backdrop-filter: var(--blur); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: border-color var(--tr), box-shadow var(--tr); }
+    .q-card:hover { border-color: var(--border-h); box-shadow: 0 4px 20px rgba(15,23,42,0.07); }
+    .q-card-head { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; }
+    .q-card-num  { font-family: 'Unbounded', sans-serif; font-size: 0.7rem; font-weight: 700; color: var(--text-3); min-width: 36px; padding-top: 3px; flex-shrink: 0; }
+    .q-card-body { flex: 1; min-width: 0; cursor: pointer; }
+    .q-card-text { font-size: 0.9rem; font-weight: 600; line-height: 1.5; margin-bottom: 8px; }
+    .q-card-meta { display: flex; gap: 8px; flex-wrap: wrap; }
+    .q-badge       { display: inline-block; padding: 2px 8px; border-radius: var(--r-pill); font-size: 0.68rem; font-weight: 700; }
+    .q-badge-subj  { background: rgba(155,93,229,0.1); color: var(--violet); }
+    .q-badge-topic { background: rgba(6,214,224,0.1);  color: #05aab3; }
+    .diff-1 { background: rgba(6,214,100,0.1);  color: var(--green); }
+    .diff-2 { background: rgba(255,179,71,0.1); color: var(--amber); }
+    .diff-3 { background: rgba(241,91,181,0.1); color: var(--pink); }
+    .q-card-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: flex-start; padding-top: 2px; }
+    .btn-edit-q { padding: 5px 12px; border: 1.5px solid var(--border-h); border-radius: var(--r-pill); background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.75rem; font-weight: 600; color: var(--text-3); cursor: pointer; transition: all var(--tr); }
+    .btn-edit-q:hover { border-color: var(--violet); color: var(--violet); }
+    .btn-dup-q  { padding: 5px 10px; border: 1.5px solid transparent; border-radius: var(--r-pill); background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.75rem; font-weight: 600; color: var(--text-3); cursor: pointer; transition: all var(--tr); }
+    .btn-dup-q:hover { border-color: var(--cyan); color: #05aab3; }
+    .btn-del-q  { padding: 5px 10px; border: 1.5px solid transparent; border-radius: var(--r-pill); background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.75rem; font-weight: 600; color: var(--text-3); cursor: pointer; transition: all var(--tr); }
+    .btn-del-q:hover { border-color: var(--pink); color: var(--pink); }
+    .q-card-detail { display: none; padding: 0 20px 16px 70px; border-top: 1px solid var(--border); margin-top: -1px; }
+    .q-card-detail.open { display: block; }
+    .q-opt-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 0.85rem; border-bottom: 1px solid var(--border); }
+    .q-opt-row:last-of-type { border-bottom: none; }
+    .q-opt-row.correct { color: var(--green); font-weight: 700; }
+    .q-opt-icon { font-size: 0.85rem; width: 18px; flex-shrink: 0; }
+    .q-expl { margin-top: 12px; font-size: 0.8rem; color: var(--text-2); background: rgba(155,93,229,0.05); border: 1px solid rgba(155,93,229,0.12); border-radius: 10px; padding: 10px 14px; line-height: 1.6; }
+
+    /* modal */
+    .q-modal { position: fixed; inset: 0; z-index: 400; display: none; align-items: flex-start; justify-content: center; padding: 32px 20px 60px; background: rgba(15,23,42,0.5); backdrop-filter: blur(10px); overflow-y: auto; }
+    .q-modal.open { display: flex; }
+    .q-modal-box { background: #fff; border-radius: 24px; padding: 36px 40px; width: 100%; max-width: 780px; box-shadow: 0 40px 100px rgba(15,23,42,0.26); }
+    .q-modal-title { font-family: 'Unbounded', sans-serif; font-size: 1.05rem; font-weight: 800; margin-bottom: 28px; }
+    .form-row   { margin-bottom: 18px; }
+    .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
+    .form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 18px; }
+    .form-label { display: block; font-size: 0.72rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
+    .form-hint  { font-size: 0.72rem; color: var(--text-3); margin-top: 4px; }
+    .form-ctrl  { width: 100%; padding: 10px 14px; border: 1.5px solid rgba(15,23,42,0.16); border-radius: 10px; font-family: 'Manrope', sans-serif; font-size: 0.9rem; color: var(--text); background: #f8f9ff; resize: vertical; transition: border-color 0.2s; }
+    .form-ctrl:focus { outline: none; border-color: var(--violet); background: #fff; }
+    .char-counter { font-size: 0.72rem; color: var(--text-3); text-align: right; margin-top: 3px; }
+    .char-counter.warn { color: var(--amber); }
+    .char-counter.over { color: var(--pink); }
+
+    /* options in modal */
+    .opts-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
+    .opts-label  { font-size: 0.72rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }
+    .opts-grid   { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
+    .opt-row     { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; border: 1.5px solid rgba(15,23,42,0.12); background: #f8f9ff; transition: border-color 0.2s, background 0.2s; }
+    .opt-row.opt-correct { border-color: var(--green); background: rgba(6,214,100,0.06); }
+    .opt-letter  { font-size: 0.78rem; font-weight: 800; color: var(--text-3); min-width: 18px; font-family: 'Unbounded', sans-serif; }
+    .opt-row.opt-correct .opt-letter { color: var(--green); }
+    .opt-radio   { width: 18px; height: 18px; accent-color: var(--green); flex-shrink: 0; cursor: pointer; }
+    .opt-input   { flex: 1; border: none; background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.9rem; color: var(--text); outline: none; }
+    .opt-row.opt-correct .opt-input { font-weight: 600; color: #1a7a3e; }
+    .btn-rem-opt { width: 24px; height: 24px; border: none; border-radius: 50%; background: rgba(15,23,42,0.07); color: var(--text-3); font-size: 1rem; line-height: 1; cursor: pointer; flex-shrink: 0; transition: background 0.2s, color 0.2s; display: flex; align-items: center; justify-content: center; }
+    .btn-rem-opt:hover { background: rgba(241,91,181,0.12); color: var(--pink); }
+    .btn-add-opt { padding: 7px 16px; border: 1.5px dashed rgba(15,23,42,0.2); border-radius: 10px; background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 600; color: var(--text-3); cursor: pointer; width: 100%; margin-bottom: 18px; transition: border-color 0.2s, color 0.2s; }
+    .btn-add-opt:hover { border-color: var(--violet); color: var(--violet); }
+
+    .img-upload-row { display: flex; gap: 8px; align-items: center; }
+    .btn-img-upload { display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; height: 40px; border: 1.5px solid rgba(15,23,42,0.18); border-radius: 10px; background: var(--surface); font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 600; color: var(--text-2); cursor: pointer; white-space: nowrap; transition: border-color 0.2s, color 0.2s; flex-shrink: 0; }
+    .btn-img-upload:hover { border-color: var(--violet); color: var(--violet); }
+    .btn-img-upload:disabled { opacity: 0.5; cursor: not-allowed; }
+    #qf-image-preview { display: none; }
+    #qf-image-preview.visible { display: inline-block !important; }
+
+    .modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; border-top: 1px solid var(--border); padding-top: 20px; }
+    .btn-cancel2 { padding: 10px 22px; border: 1.5px solid rgba(15,23,42,0.2); border-radius: 999px; background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.88rem; font-weight: 600; color: var(--text-3); cursor: pointer; }
+    .btn-save    { padding: 10px 28px; border: none; border-radius: 999px; background: var(--grad-1); color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.88rem; font-weight: 700; cursor: pointer; min-width: 130px; transition: opacity 0.2s; }
+    .btn-save:disabled { opacity: 0.5; cursor: not-allowed; }
+    .form-error  { font-size: 0.82rem; color: var(--pink); margin-top: 8px; min-height: 20px; }
+    /* question type buttons */
+    .type-btn { padding: 6px 14px; border: 1.5px solid var(--border-h); border-radius: var(--r-pill); background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.78rem; font-weight: 600; color: var(--text-3); cursor: pointer; transition: all var(--tr); }
+    .type-btn.active { background: var(--violet); border-color: var(--violet); color: #fff; }
+
+    /* ═══ TESTS TAB ══════════════════════════════════════════════════════ */
+    .tst-drawer { border-top: 1px solid var(--border); background: rgba(238,242,255,0.5); }
+    .tst-drawer-inner { padding: 20px 24px; }
+    .tst-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
+    @media(max-width:700px){ .tst-cols { grid-template-columns: 1fr; } }
+    .tst-panel-title { font-size: 0.72rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
+    .tst-q-list { display: flex; flex-direction: column; gap: 2px; max-height: 400px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; background: #fff; padding: 4px; }
+    .tst-q-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 7px; font-size: 0.83rem; transition: background var(--tr); }
+    .tst-q-item:hover { background: rgba(15,23,42,0.03); }
+    .tst-q-num { font-size: 0.68rem; font-weight: 700; color: var(--text-3); min-width: 22px; padding-top: 2px; }
+    .tst-q-body { flex: 1; min-width: 0; }
+    .tst-q-text { display: block; line-height: 1.45; word-break: break-word; margin-bottom: 4px; }
+    .tst-q-meta { display: flex; gap: 4px; flex-wrap: wrap; }
+    .tst-q-badge { font-size: 0.62rem; font-weight: 700; padding: 1px 6px; border-radius: 999px; flex-shrink: 0; }
+    .tst-q-opts  { font-size: 0.68rem; color: var(--text-3); padding-top: 2px; }
+    .btn-tst-rem { width: 22px; height: 22px; border: none; border-radius: 50%; background: rgba(241,91,181,0.1); color: var(--pink); font-size: 0.85rem; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: background var(--tr); }
+    .btn-tst-rem:hover { background: rgba(241,91,181,0.22); }
+    .btn-tst-add { width: 22px; height: 22px; border: none; border-radius: 50%; background: rgba(6,214,100,0.12); color: var(--green); font-size: 1rem; line-height: 1; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; transition: background var(--tr); }
+    .btn-tst-add:hover { background: rgba(6,214,100,0.25); }
+    .btn-tst-add.added { background: rgba(6,214,100,0.25); cursor: default; opacity: 0.6; }
+    .tst-search { width: 100%; padding: 7px 12px; border: 1.5px solid var(--border-h); border-radius: 8px; font-family: 'Manrope', sans-serif; font-size: 0.83rem; background: #fff; color: var(--text); margin-bottom: 8px; outline: none; }
+    .tst-search:focus { border-color: var(--violet); }
+    .tst-empty { text-align: center; padding: 20px; color: var(--text-3); font-size: 0.82rem; }
+    .src-toggle { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
+    /* formula bar */
+    .formula-bar { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; padding: 8px 12px; background: #f0f2ff; border-radius: 10px; margin-bottom: 8px; }
+    .fml { padding: 4px 9px; border: 1px solid rgba(155,93,229,0.2); border-radius: 6px; background: #fff; font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 600; color: var(--violet); cursor: pointer; transition: background 0.15s; }
+    .fml:hover { background: rgba(155,93,229,0.08); }
+    /* preview */
+    .q-preview-wrap { background: rgba(155,93,229,0.04); border: 1px solid rgba(155,93,229,0.15); border-radius: 10px; padding: 12px 16px; margin-top: 8px; margin-bottom: 18px; min-height: 40px; }
+    .q-preview-text { font-size: 0.95rem; line-height: 1.6; color: var(--text); }
+    .form-hint { font-size: 0.72rem; color: var(--text-3); margin-top: 4px; }
+
+    /* ── Mobile responsive ── */
+    @media (max-width: 768px) {
+      .container { padding: 16px 12px 80px; }
+      .page-title { font-size: 1.1rem; }
+      .page-sub   { font-size: 0.83rem; margin-bottom: 24px; }
+
+      /* Stats */
+      .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
+      .stat-val   { font-size: 1.5rem; }
+
+      /* Admin nav — collapse to horizontal scroll strip on mobile */
+      .admin-layout { flex-direction: column; gap: 0; align-items: stretch; }
+      .admin-nav {
+        width: 100%; position: static;
+        flex-direction: row; overflow-x: auto; overflow-y: hidden;
+        flex-wrap: nowrap; padding: 6px; gap: 2px;
+        scrollbar-width: none; border-radius: 14px;
+        margin-bottom: 20px;
+      }
+      .admin-nav::-webkit-scrollbar { display: none; }
+      .admin-nav-label { display: none; }
+      .admin-nav-sep   { display: none !important; }
+      .admin-nav-item  { padding: 7px 12px; font-size: .78rem; white-space: nowrap; border-radius: 8px; }
+      .admin-nav-item svg { display: none; }
+      /* admin-main must fill full width when stacked */
+      .admin-main { padding-left: 0; width: 100%; min-width: 0; box-sizing: border-box; }
+
+      /* Toolbar: selects wrap and fill available space */
+      .t-toolbar { gap: 7px; flex-wrap: wrap; }
+      .t-select  { flex: 1 1 120px; min-width: 0; max-width: 100%; font-size: 0.82rem; padding: 8px 10px; }
+      .t-input   { width: 100%; flex: 1 1 140px; min-width: 0; }
+      .t-count   { margin-left: 0; width: 100%; }
+      .btn-add   { width: 100%; justify-content: center; }
+
+      /* Tables: horizontal scroll container */
+      .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+      table { min-width: 540px; }
+      th, td { padding: 10px 12px; }
+
+      /* Assignment rows */
+      .a-row { height: auto; min-height: 56px; padding: 8px 10px; gap: 8px; flex-wrap: wrap; }
+      .a-prog { display: none; }          /* hide progress column on mobile */
+      .a-meta { white-space: normal; }
+
+      /* Subject config cards */
+      .sc-row-top { padding: 12px 14px; gap: 10px; }
+      .sc-icon { width: 36px; height: 36px; border-radius: 10px; }
+      .sc-icon svg { width: 16px; height: 16px; }
+      .sc-name { font-size: 0.82rem; }
+      .sc-body { padding: 0 14px 16px; gap: 10px; }
+      .sc-presets { gap: 4px; padding-top: 10px; }
+      .sc-preset { font-size: 0.7rem; padding: 5px 10px; }
+      .sc-field { flex-wrap: wrap; gap: 6px; }
+      .sc-label { min-width: 56px; font-size: 0.68rem; }
+      .sc-input { width: 60px; }
+      .sc-footer { gap: 6px; }
+
+      /* Question editor modal */
+      .q-modal { padding: 0; align-items: flex-end; overflow-y: hidden; }
+      .q-modal-box {
+        border-radius: 22px 22px 0 0;
+        padding: 24px 16px 32px;
+        max-height: 92vh;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+      }
+      .q-modal-title { font-size: 0.9rem; margin-bottom: 20px; }
+      .form-row-2, .form-row-3 { grid-template-columns: 1fr; }
+
+      /* User panel */
+      .user-panel { padding: 18px 14px; }
+      .user-panel-header { flex-wrap: wrap; gap: 10px; }
+
+      /* Session drawer */
+      .sess-drawer-inner { padding: 16px 12px; }
+      .drawer-header { gap: 10px; }
+      .drawer-score { font-size: 1.2rem; }
+
+      /* Session timeline */
+      .sess-tl-item { padding: 10px 12px; gap: 10px; }
+      .sess-tl-time { display: none; }
+
+      /* Subj stats: stretch to fill row */
+      .subj-stats { gap: 8px; }
+      .subj-stat  { padding: 10px 12px; flex: 1 1 calc(50% - 8px); min-width: 0; box-sizing: border-box; }
+      .subj-stat-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+      .subj-stat-info { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+      /* adm-panel (shop/gam/perms tabs): reduce padding */
+      .adm-panel { padding: 18px 14px; }
+
+      /* q-card-detail: reduce deep left indent */
+      .q-card-detail { padding-left: 20px; }
+
+      /* modal footer: wrap buttons on narrow screens */
+      .q-modal-box .modal-footer { flex-wrap: wrap; }
+      .q-modal-box .modal-footer .btn-cancel2,
+      .q-modal-box .modal-footer .btn-save { flex: 1; min-width: 0; text-align: center; justify-content: center; }
+
+      /* subj-stat: don't let % value push items off screen */
+      .subj-stat-pct { min-width: 36px; font-size: 0.95rem; }
+    }
+
+    @media (max-width: 480px) {
+      .container { padding: 14px 10px 80px; }
+      .stats-grid { grid-template-columns: 1fr; gap: 8px; }
+      .stat-val   { font-size: 1.2rem; }
+      .stat-card  { padding: 16px 14px; }
+      .admin-nav-item { padding: 6px 11px; font-size: 0.75rem; }
+      .a-actions  { gap: 4px; }
+      .a-icon     { display: none; }
+      /* subj-stat: 1 column on very narrow */
+      .subj-stat  { flex: 1 1 100%; }
+      /* perm-grid: single column at 480px */
+      .perm-grid  { grid-template-columns: 1fr; }
+      /* adm-form-row: full-width inputs */
+      .adm-form-group input,
+      .adm-form-group select,
+      .adm-form-group textarea { width: 100%; box-sizing: border-box; }
+      /* toolbar: each select full row */
+      .t-select { flex: 1 1 100%; }
+    }
+
+    /* ═══ SHOP / GAM / TPL tabs ═══ */
+    .shop-items-table td, .gam-top-table td, .gam-log-table td, .tpl-table td { font-size: 0.92rem; }
+    .adm-panel { background: var(--surface); backdrop-filter: var(--blur); border: 1.5px solid var(--border); border-radius: var(--r-lg); padding: 28px 32px; margin-bottom: 28px; }
+    .adm-panel-title { font-family: 'Unbounded', sans-serif; font-size: 0.88rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 20px; }
+    .adm-form-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
+    .adm-form-group { display: flex; flex-direction: column; gap: 5px; }
+    .adm-form-group label { font-size: 0.76rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }
+    .adm-form-group input, .adm-form-group select, .adm-form-group textarea { padding: 10px 14px; border: 1.5px solid var(--border-h); border-radius: 10px; font-family: 'Manrope', sans-serif; font-size: 0.92rem; background: var(--surface); color: var(--text); }
+    .adm-form-group input:focus, .adm-form-group select:focus, .adm-form-group textarea:focus { outline: none; border-color: var(--violet); }
+    .adm-form-group textarea { resize: vertical; min-height: 70px; }
+    .adm-btn { padding: 10px 24px; border: none; border-radius: var(--r-pill); font-family: 'Manrope', sans-serif; font-size: 0.92rem; font-weight: 700; cursor: pointer; transition: opacity .2s; }
+    .adm-btn-primary { background: var(--grad-1); color: #fff; }
+    .adm-btn-danger  { background: var(--pink); color: #fff; }
+    .adm-btn-small   { padding: 6px 14px; font-size: 0.84rem; }
+    .adm-btn:hover { opacity: 0.88; }
+    .adm-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+    .adm-toggle { position: relative; width: 42px; height: 24px; cursor: pointer; display: inline-block; vertical-align: middle; }
+    .adm-toggle input { opacity: 0; width: 0; height: 0; }
+    .adm-toggle .track { position: absolute; inset: 0; border-radius: 24px; background: var(--border-h); transition: background .2s; }
+    .adm-toggle .thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.15); transition: transform .2s; }
+    .adm-toggle input:checked ~ .track { background: var(--green, #06d6a0); }
+    .adm-toggle input:checked ~ .thumb { transform: translateX(18px); }
+    .adm-user-search { position: relative; }
+    .adm-user-search .us-results { position: absolute; top: 100%; left: 0; right: 0; z-index: 50; background: #fff; border: 1.5px solid var(--border-h); border-radius: 12px; max-height: 240px; overflow-y: auto; box-shadow: 0 8px 24px rgba(15,23,42,0.12); display: none; }
+    .adm-user-search .us-results.open { display: block; }
+    .adm-user-search .us-item { padding: 10px 16px; font-size: 0.92rem; cursor: pointer; transition: background .15s; display: flex; justify-content: space-between; align-items: center; }
+    .adm-user-search .us-item:hover { background: rgba(155,93,229,0.06); }
+    .adm-user-search .us-item .us-role { font-size: 0.76rem; color: var(--text-3); }
+
+    /* ── Submission log ── */
+    .sl-wrap {
+      overflow-x: auto; border: 1.5px solid var(--border); border-radius: 16px;
+      background: #fff; box-shadow: 0 2px 12px rgba(15,23,42,0.05);
+    }
+    .sl-table { width: 100%; border-collapse: collapse; min-width: 800px; }
+    .sl-table th {
+      padding: 12px 14px; text-align: left; font-size: 0.68rem; font-weight: 800;
+      color: var(--violet); text-transform: uppercase; letter-spacing: 0.07em;
+      border-bottom: 2px solid rgba(155,93,229,0.12);
+      background: linear-gradient(180deg, rgba(155,93,229,0.04) 0%, rgba(155,93,229,0.01) 100%);
+      white-space: nowrap;
+    }
+    .sl-table td {
+      padding: 12px 14px; font-size: 0.82rem; color: #1E293B;
+      border-bottom: 1px solid rgba(15,23,42,0.06); vertical-align: middle;
+    }
+    .sl-table tr:last-child td { border-bottom: none; }
+    .sl-table tbody tr { transition: background 0.12s; }
+    .sl-table tbody tr:hover td { background: rgba(155,93,229,0.03); }
+    .sl-table tbody tr:nth-child(even) td { background: rgba(15,23,42,0.015); }
+    .sl-table tbody tr:nth-child(even):hover td { background: rgba(155,93,229,0.04); }
+
+    .sl-date { font-size: 0.78rem; color: #64748B; white-space: nowrap; }
+    .sl-student {
+      font-weight: 700; color: #0F172A; display: flex; align-items: center; gap: 8px;
+    }
+    .sl-student-avatar {
+      width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
+      background: linear-gradient(135deg, rgba(155,93,229,0.15), rgba(6,214,224,0.1));
+      display: flex; align-items: center; justify-content: center;
+      font-size: 0.65rem; font-weight: 800; color: var(--violet);
+    }
+    .sl-file {
+      max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+      font-size: 0.78rem; color: #64748B; font-family: monospace;
+    }
+    .sl-assignment { font-weight: 600; color: #3D4F6B; }
+    .sl-class { font-size: 0.78rem; color: #8898AA; }
+
+    .sl-status {
+      display: inline-flex; align-items: center; gap: 4px;
+      padding: 3px 10px; border-radius: 99px; font-size: 0.7rem; font-weight: 700;
+      white-space: nowrap;
+    }
+    .sl-status-new         { background: rgba(6,214,224,0.1); color: #06aab3; }
+    .sl-status-reviewed    { background: rgba(5,150,82,0.08); color: #059652; }
+    .sl-status-accepted    { background: rgba(5,150,82,0.12); color: #047857; }
+    .sl-status-revision    { background: rgba(241,91,181,0.08); color: #c0306a; }
+    .sl-status-resubmitted { background: rgba(59,130,246,0.08); color: #3B82F6; }
+
+    .sl-grade {
+      font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 800;
+      min-width: 32px; text-align: center;
+    }
+    .sl-grade-hi { color: #059652; }
+    .sl-grade-mid { color: #c07c00; }
+    .sl-grade-lo { color: #c0306a; }
+    .sl-grade-none { color: #cbd5e1; font-weight: 400; font-family: 'Manrope', sans-serif; font-size: 0.78rem; }
+
+    .sl-deleted-by {
+      display: flex; align-items: center; gap: 6px;
+      font-size: 0.78rem; color: #64748B;
+    }
+    .sl-role-badge {
+      font-size: 0.62rem; font-weight: 700; padding: 1px 6px; border-radius: 4px;
+      text-transform: uppercase; letter-spacing: 0.04em;
+    }
+    .sl-role-admin   { background: rgba(241,91,181,0.1); color: #c0306a; }
+    .sl-role-teacher { background: rgba(155,93,229,0.1); color: var(--violet); }
+    .sl-role-student { background: rgba(6,214,224,0.1); color: #06aab3; }
+
+    .sl-empty {
+      padding: 48px 24px; text-align: center; color: #8898AA; font-size: 0.88rem;
+    }
+    .sl-empty-icon { margin-bottom: 12px; opacity: 0.3; }
+
+    .sl-filter-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
+    .sl-filter-select {
+      padding: 8px 14px; border: 1.5px solid var(--border); border-radius: 10px;
+      font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 600;
+      color: #3D4F6B; background: #fff; cursor: pointer; min-width: 200px;
+      transition: border-color 0.15s;
+    }
+    .sl-filter-select:focus { border-color: var(--violet); outline: none; }
+    .sl-count { font-size: 0.78rem; color: #8898AA; font-weight: 600; }
+  </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="sbl-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"><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="/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>
+      <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>
+    <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>
+          <span class="sb-logout" style="pointer-events:none">Мой профиль</span>
+        </div>
+      </a>
+    </div>
+  </aside>
+  <div class="sb-content">
+
+  <div class="container">
+    <div class="page-title">Панель управления</div>
+    <div class="page-sub" id="page-sub">Загрузка…</div>
+
+    <div class="admin-layout">
+    <nav class="admin-nav" id="admin-nav">
+
+      <div class="admin-nav-label">Аналитика</div>
+      <button class="admin-nav-item active" data-tab="stats" onclick="switchTab(this)">
+        <i data-lucide="bar-chart-2" style="width:15px;height:15px"></i> Статистика
+      </button>
+      <button class="admin-nav-item" data-tab="sessions" onclick="switchTab(this)">
+        <i data-lucide="clock" style="width:15px;height:15px"></i> История сессий
+      </button>
+
+      <div class="admin-nav-sep"></div>
+      <div class="admin-nav-label">Контент</div>
+      <button class="admin-nav-item" data-tab="questions" onclick="switchTab(this)">
+        <i data-lucide="help-circle" style="width:15px;height:15px"></i> Вопросы
+      </button>
+      <button class="admin-nav-item" data-tab="tests" onclick="switchTab(this)">
+        <i data-lucide="clipboard-list" style="width:15px;height:15px"></i> Тесты
+      </button>
+      <button class="admin-nav-item" data-tab="assignments" onclick="switchTab(this)">
+        <i data-lucide="file-check" style="width:15px;height:15px"></i> Задания
+      </button>
+      <button class="admin-nav-item" data-tab="subjects" onclick="switchTab(this)" id="btn-tab-subjects" style="display:none">
+        <i data-lucide="book-marked" style="width:15px;height:15px"></i> Доступные тесты
+      </button>
+      <button class="admin-nav-item" data-tab="tpl" onclick="switchTab(this)" id="btn-tab-tpl" style="display:none">
+        <i data-lucide="copy" style="width:15px;height:15px"></i> Шаблоны
+      </button>
+
+      <div class="admin-nav-sep"></div>
+      <div class="admin-nav-label">Пользователи</div>
+      <button class="admin-nav-item" data-tab="users" onclick="switchTab(this)">
+        <i data-lucide="users" style="width:15px;height:15px"></i> Пользователи
+      </button>
+      <button class="admin-nav-item" data-tab="permissions" onclick="switchTab(this)" id="btn-tab-permissions" style="display:none">
+        <i data-lucide="shield" style="width:15px;height:15px"></i> Права доступа
+      </button>
+
+      <div class="admin-nav-sep" id="admin-nav-system-sep" style="display:none"></div>
+      <div class="admin-nav-label" id="admin-nav-system-label" style="display:none">Система</div>
+      <button class="admin-nav-item" data-tab="shop" onclick="switchTab(this)" id="btn-tab-shop" style="display:none">
+        <i data-lucide="shopping-bag" style="width:15px;height:15px"></i> Магазин
+      </button>
+      <button class="admin-nav-item" data-tab="gam" onclick="switchTab(this)" id="btn-tab-gam" style="display:none">
+        <i data-lucide="trophy" style="width:15px;height:15px"></i> Геймификация
+      </button>
+      <button class="admin-nav-item" data-tab="sims" onclick="switchTab(this)" id="btn-tab-sims" style="display:none">
+        <i data-lucide="atom" style="width:15px;height:15px"></i> Симуляции
+      </button>
+      <button class="admin-nav-item" data-tab="games" onclick="switchTab(this)" id="btn-tab-games" style="display:none">
+        <i data-lucide="gamepad-2" style="width:15px;height:15px"></i> Игры
+      </button>
+      <button class="admin-nav-item" data-tab="sublog" onclick="switchTab(this)">
+        <i data-lucide="file-x" style="width:15px;height:15px"></i> Журнал работ
+      </button>
+      <button class="admin-nav-item" data-tab="topics" onclick="switchTab(this)">
+        <i data-lucide="list-tree" style="width:15px;height:15px"></i> Темы
+      </button>
+      <button class="admin-nav-item" data-tab="broadcast" onclick="switchTab(this)">
+        <i data-lucide="megaphone" style="width:15px;height:15px"></i> Рассылка
+      </button>
+      <button class="admin-nav-item" data-tab="audit" onclick="switchTab(this)">
+        <i data-lucide="scroll-text" style="width:15px;height:15px"></i> Аудит-лог
+      </button>
+      <button class="admin-nav-item" data-tab="errors" onclick="switchTab(this)">
+        <i data-lucide="bug" style="width:15px;height:15px"></i> Ошибки
+      </button>
+      <button class="admin-nav-item" data-tab="health" onclick="switchTab(this)">
+        <i data-lucide="activity" style="width:15px;height:15px"></i> Здоровье
+      </button>
+
+    </nav>
+    <div class="admin-main">
+
+    <!-- ── Статистика ── -->
+    <div class="tab-pane active" id="tab-stats">
+      <div class="section-title">Общая статистика</div>
+      <div class="stats-grid" id="stats-grid"><div class="spinner"></div></div>
+      <div class="section-title">По предметам</div>
+      <div class="subj-stats" id="subj-stats"><div class="spinner"></div></div>
+    </div>
+
+    <!-- ── Вопросы ── -->
+    <div class="tab-pane" id="tab-questions">
+      <div class="t-toolbar">
+        <select class="t-select" id="q-subject" onchange="onQSubjectChange()">
+          <option value="">Все предметы</option>
+          <option value="bio">Биология</option>
+          <option value="chem">Химия</option>
+          <option value="math">Математика</option>
+          <option value="phys">Физика</option>
+        </select>
+        <select class="t-select" id="q-topic" onchange="loadQuestions()">
+          <option value="">Все темы</option>
+        </select>
+        <select class="t-select" id="q-sort" onchange="loadQuestions()">
+          <option value="date_desc">Новые сначала</option>
+          <option value="date_asc">Старые сначала</option>
+          <option value="diff_asc">Сложность <svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg></option>
+          <option value="diff_desc">Сложность <svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg></option>
+        </select>
+        <input class="t-input" id="q-search" type="text" placeholder="Поиск по тексту…" oninput="renderQuestions()" />
+        <span class="t-count" id="q-count"></span>
+        <button class="btn-add" onclick="openQModal()">+ Добавить вопрос</button>
+        <button class="btn-add" style="background:var(--grad-1)" onclick="document.getElementById('csv-file-input').click()"><i data-lucide="upload" style="width:13px;height:13px;vertical-align:-2px"></i> Импорт CSV</button>
+        <input type="file" id="csv-file-input" accept=".csv,.txt" style="display:none" onchange="importCSVFile(this)" />
+        <a id="csv-template-link" href="#" onclick="downloadCSVTemplate(event)" style="font-size:0.78rem;color:var(--violet);text-decoration:none;margin-left:4px"><i data-lucide="file-text" style="width:12px;height:12px;vertical-align:-2px"></i> Шаблон</a>
+      </div>
+      <div id="q-list-wrap"><div class="empty">Выберите предмет или загрузите все вопросы</div></div>
+    </div>
+
+    <!-- ── Тесты (шаблоны) ── -->
+    <div class="tab-pane" id="tab-tests">
+      <div class="t-toolbar">
+        <select class="t-select" id="tst-subj" onchange="loadTests()">
+          <option value="">Все предметы</option>
+          <option value="bio">Биология</option>
+          <option value="chem">Химия</option>
+          <option value="math">Математика</option>
+          <option value="phys">Физика</option>
+        </select>
+        <input class="t-input" id="tst-search" type="text" placeholder="Поиск по названию…" oninput="renderTests()" />
+        <span class="t-count" id="tst-count"></span>
+        <button class="btn-add" onclick="openTstModal()">+ Создать тест</button>
+      </div>
+      <div id="tst-list-wrap"><div class="empty">Загрузка…</div></div>
+    </div>
+
+    <!-- ── Задания ── -->
+    <div class="tab-pane" id="tab-assignments">
+      <div class="t-toolbar" style="margin-bottom:12px">
+        <input class="t-input" id="a-search" type="text" placeholder="Поиск по названию…" oninput="renderAssignments()" style="flex:1;max-width:280px" />
+        <select class="t-select" id="a-subject" onchange="renderAssignments()">
+          <option value="">Все предметы</option>
+          <option value="bio">Биология</option>
+          <option value="chem">Химия</option>
+          <option value="math">Математика</option>
+          <option value="phys">Физика</option>
+        </select>
+        <span class="t-count" id="a-count" style="margin-left:0"></span>
+      </div>
+      <div class="a-summary" id="a-summary"></div>
+      <div class="a-filter-row">
+        <button class="a-f-chip active" onclick="setAFilter('all')">Все</button>
+        <button class="a-f-chip" onclick="setAFilter('active')">Активные</button>
+        <button class="a-f-chip" onclick="setAFilter('overdue')">Просрочены</button>
+        <button class="a-f-chip" onclick="setAFilter('done')">Завершены</button>
+        <div class="a-filter-sep"></div>
+        <select class="a-sort-sel" id="a-sort" onchange="renderAssignments()">
+          <option value="date">По дате <svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg></option>
+          <option value="deadline">По дедлайну <svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg></option>
+          <option value="progress_asc">Прогресс <svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg></option>
+          <option value="progress_desc">Прогресс <svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg></option>
+        </select>
+        <a class="btn-add" href="/classes" style="text-decoration:none;margin-left:auto">Перейти в классы <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></a>
+      </div>
+      <div class="a-rows" id="a-body"><div class="spinner"></div></div>
+    </div>
+
+    <!-- ── Доступные тесты (настройки предметов) ── -->
+    <div class="tab-pane" id="tab-subjects">
+      <div class="section-title" style="margin-bottom:6px">Настройка доступных тестов</div>
+      <div class="perm-desc" style="margin-bottom:20px">Настройте что увидят ученики на дашборде: режим, количество вопросов, источник.</div>
+      <div class="sc-list" id="subj-config-list"></div>
+    </div>
+
+    <!-- ── Пользователи ── -->
+    <div class="tab-pane" id="tab-users">
+      <div class="section-title">Пользователи</div>
+      <div class="table-wrap">
+        <table>
+          <thead><tr><th>Пользователь</th><th>Роль</th><th>Тестов</th><th>Средний %</th><th>Регистрация</th><th>Посл. вход</th><th></th></tr></thead>
+          <tbody id="users-body"><tr><td colspan="7"><div class="spinner"></div></td></tr></tbody>
+        </table>
+      </div>
+      <div class="user-panel" id="user-panel">
+        <div class="user-panel-header">
+          <div><div class="user-panel-name" id="up-name"></div><div class="user-panel-email" id="up-email"></div></div>
+          <div style="display:flex;gap:8px;align-items:center">
+            <button class="btn-edit-q" id="up-edit-btn" onclick="openEditUserModal()" style="display:none"><i data-lucide="pencil" style="width:13px;height:13px;vertical-align:-2px"></i> Изменить</button>
+            <button class="btn-edit-q" id="up-perms-btn" onclick="openUserPermsModal()" style="display:none"><i data-lucide="shield" style="width:13px;height:13px;vertical-align:-2px"></i> Права</button>
+            <button class="btn-del-q"  id="up-clear-btn" onclick="clearUserHistory()" style="display:none"><i data-lucide="trash-2" style="width:13px;height:13px;vertical-align:-2px"></i> История</button>
+            <button class="btn-del-q"  id="up-ban-btn"   onclick="toggleBanUser()" style="display:none"><i data-lucide="ban" style="width:13px;height:13px;vertical-align:-2px"></i> <span id="up-ban-label">Заблокировать</span></button>
+            <button class="btn-del-q"  id="up-delete-btn" onclick="confirmDeleteUser()" style="display:none;background:rgba(239,68,68,.12);color:#EF4444;border-color:rgba(239,68,68,.25)"><i data-lucide="user-x" style="width:13px;height:13px;vertical-align:-2px"></i> Удалить</button>
+            <button class="btn-close" onclick="closeUserPanel()"><i data-lucide="x" style="width:13px;height:13px;vertical-align:-2px"></i> Закрыть</button>
+          </div>
+        </div>
+        <div class="section-title">История тестов</div>
+        <div id="up-sessions"><div class="spinner"></div></div>
+      </div>
+    </div>
+
+    <!-- ── Тесты (сессии) ── -->
+    <div class="tab-pane" id="tab-sessions">
+      <div class="t-toolbar">
+        <select class="t-select" id="t-subject" onchange="loadSessions()">
+          <option value="">Все предметы</option>
+          <option value="bio">Биология</option>
+          <option value="chem">Химия</option>
+          <option value="math">Математика</option>
+          <option value="phys">Физика</option>
+        </select>
+        <select class="t-select" id="t-mode" onchange="renderSessions()">
+          <option value="">Все режимы</option>
+          <option value="exam">Экзамен</option>
+          <option value="practice">Тренировка</option>
+          <option value="repeat">Обычный</option>
+          <option value="ct">ЦТ/ЦЭ</option>
+        </select>
+        <input class="t-input" id="t-search" type="text" placeholder="Поиск по имени…" oninput="renderSessions()" />
+        <span class="t-count" id="t-count"></span>
+      </div>
+      <div id="t-body"><div class="spinner"></div></div>
+    </div>
+
+    <!-- ── Права доступа ── -->
+    <div class="tab-pane" id="tab-permissions">
+      <div class="perm-header">
+        <div class="section-title" style="margin:0">Права доступа по ролям</div>
+        <p style="color:var(--muted);font-size:13px;margin:4px 0 0">Настройте, что могут делать учителя и ученики. Администраторы имеют все права всегда.</p>
+      </div>
+
+      <div class="perm-role-block">
+        <div class="perm-role-title">
+          <span class="badge badge-warn" style="font-size:13px;padding:4px 12px">Учитель</span>
+        </div>
+        <div class="perm-grid" id="perm-teacher"></div>
+      </div>
+
+      <div class="perm-role-block">
+        <div class="perm-role-title">
+          <span class="badge badge-info" style="font-size:13px;padding:4px 12px">Ученик</span>
+        </div>
+        <div class="perm-grid" id="perm-student"></div>
+      </div>
+    </div>
+
+    <!-- ── Магазин ── -->
+    <div class="tab-pane" id="tab-shop">
+      <div class="section-title">Магазин</div>
+      <div class="stats-grid" id="shop-stats-grid"><div class="spinner"></div></div>
+
+      <div class="section-title" style="margin-top:32px">Товары</div>
+      <div style="margin-bottom:14px">
+        <button class="btn-add" onclick="shopAdminCreateItem()">+ Добавить товар</button>
+      </div>
+      <div class="table-wrap">
+        <table>
+          <thead><tr>
+            <th>ID</th><th>Название</th><th>Тип</th><th>Цена</th><th>Продано</th><th>Активен</th><th>Действия</th>
+          </tr></thead>
+          <tbody id="shop-items-body"><tr><td colspan="7"><div class="spinner"></div></td></tr></tbody>
+        </table>
+      </div>
+
+      <div class="adm-panel" id="shop-item-form" style="display:none">
+        <div class="adm-panel-title" id="shop-form-title">Новый товар</div>
+        <div class="adm-form-row">
+          <div class="adm-form-group" style="flex:1">
+            <label>Название</label>
+            <input type="text" id="shop-f-name" placeholder="Название товара" />
+          </div>
+          <div class="adm-form-group" style="flex:1">
+            <label>Тип</label>
+            <select id="shop-f-type">
+              <option value="frame">Рамка</option>
+              <option value="title">Титул</option>
+              <option value="theme">Тема</option>
+              <option value="effect">Эффект</option>
+            </select>
+          </div>
+          <div class="adm-form-group" style="width:100px">
+            <label>Цена</label>
+            <input type="number" id="shop-f-price" min="0" value="100" />
+          </div>
+        </div>
+        <div class="adm-form-row">
+          <div class="adm-form-group" style="flex:1">
+            <label>Описание</label>
+            <textarea id="shop-f-desc" rows="2" placeholder="Описание товара"></textarea>
+          </div>
+        </div>
+        <div class="adm-form-row">
+          <div class="adm-form-group" style="flex:1">
+            <label>Иконка (emoji/код)</label>
+            <input type="text" id="shop-f-icon" placeholder="SVG-код или эмодзи" />
+          </div>
+          <div class="adm-form-group" style="flex:1">
+            <label>Данные (JSON)</label>
+            <input type="text" id="shop-f-data" placeholder='{"key":"value"}' />
+          </div>
+          <div class="adm-form-group">
+            <label>Активен</label>
+            <label class="adm-toggle">
+              <input type="checkbox" id="shop-f-active" checked />
+              <span class="track"></span><span class="thumb"></span>
+            </label>
+          </div>
+        </div>
+        <div style="display:flex;gap:10px">
+          <button class="adm-btn adm-btn-primary" onclick="shopAdminSaveItem()">Сохранить</button>
+          <button class="adm-btn" style="background:var(--border-h);color:var(--text-3)" onclick="shopAdminCancelForm()">Отмена</button>
+        </div>
+      </div>
+
+      <div class="section-title" style="margin-top:32px">Начислить монеты</div>
+      <div class="adm-panel">
+        <div class="adm-form-row">
+          <div class="adm-form-group adm-user-search" style="flex:1">
+            <label>Пользователь</label>
+            <input type="text" id="shop-award-user" placeholder="Поиск по имени…" autocomplete="off" oninput="shopSearchUser(this.value)" />
+            <div class="us-results" id="shop-award-results"></div>
+            <input type="hidden" id="shop-award-uid" />
+          </div>
+          <div class="adm-form-group" style="width:120px">
+            <label>Кол-во монет</label>
+            <input type="number" id="shop-award-amount" min="1" value="10" />
+          </div>
+          <div class="adm-form-group" style="flex:1">
+            <label>Причина</label>
+            <input type="text" id="shop-award-reason" placeholder="За активность" />
+          </div>
+          <button class="adm-btn adm-btn-primary" onclick="shopAdminAwardCoins()" style="align-self:flex-end">Начислить</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- ── Геймификация ── -->
+    <div class="tab-pane" id="tab-gam">
+      <div class="section-title">Геймификация</div>
+      <div class="stats-grid" id="gam-stats-grid"><div class="spinner"></div></div>
+
+      <div class="section-title" style="margin-top:32px">Топ-10 по XP</div>
+      <div class="table-wrap">
+        <table>
+          <thead><tr>
+            <th>#</th><th>Имя</th><th>XP</th><th>Уровень</th><th>Монеты</th>
+          </tr></thead>
+          <tbody id="gam-top-body"><tr><td colspan="5"><div class="spinner"></div></td></tr></tbody>
+        </table>
+      </div>
+
+      <div class="section-title" style="margin-top:32px">Покупки в магазине</div>
+      <div class="table-wrap">
+        <table>
+          <thead><tr>
+            <th>Время</th><th>Пользователь</th><th>Предмет</th><th>Тип</th><th>Цена</th>
+          </tr></thead>
+          <tbody id="gam-purchases-body"><tr><td colspan="5"><div class="spinner"></div></td></tr></tbody>
+        </table>
+      </div>
+
+      <div class="section-title" style="margin-top:32px">Последние начисления XP</div>
+      <div class="table-wrap">
+        <table>
+          <thead><tr>
+            <th>Время</th><th>Имя</th><th>XP</th><th>Причина</th>
+          </tr></thead>
+          <tbody id="gam-log-body"><tr><td colspan="4"><div class="spinner"></div></td></tr></tbody>
+        </table>
+      </div>
+
+      <div class="section-title" style="margin-top:32px">Начислить XP / Монеты</div>
+      <div class="adm-panel">
+        <div class="adm-form-row">
+          <div class="adm-form-group adm-user-search" style="flex:1">
+            <label>Пользователь</label>
+            <input type="text" id="gam-award-user" placeholder="Поиск по имени…" autocomplete="off" oninput="gamSearchUser(this.value,'gam-award')" />
+            <div class="us-results" id="gam-award-results"></div>
+            <input type="hidden" id="gam-award-uid" />
+          </div>
+          <div class="adm-form-group" style="width:100px">
+            <label>XP</label>
+            <input type="number" id="gam-award-xp" min="0" value="10" />
+          </div>
+          <div class="adm-form-group" style="width:100px">
+            <label>Монеты</label>
+            <input type="number" id="gam-award-coins" min="0" value="0" />
+          </div>
+          <div class="adm-form-group" style="flex:1">
+            <label>Причина</label>
+            <input type="text" id="gam-award-reason" placeholder="За участие" />
+          </div>
+          <button class="adm-btn adm-btn-primary" onclick="gamAdminAward()" style="align-self:flex-end">Начислить</button>
+        </div>
+      </div>
+
+      <div class="section-title" style="margin-top:32px">Сбросить прогресс пользователя</div>
+      <div class="adm-panel">
+        <div class="adm-form-row">
+          <div class="adm-form-group adm-user-search" style="flex:1">
+            <label>Пользователь</label>
+            <input type="text" id="gam-reset-user" placeholder="Поиск по имени…" autocomplete="off" oninput="gamSearchUser(this.value,'gam-reset')" />
+            <div class="us-results" id="gam-reset-results"></div>
+            <input type="hidden" id="gam-reset-uid" />
+          </div>
+          <button class="adm-btn adm-btn-danger" onclick="gamAdminReset()" style="align-self:flex-end">Сбросить прогресс</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- ── Шаблоны ── -->
+    <div class="tab-pane" id="tab-tpl">
+      <div class="section-title">Шаблоны курсов</div>
+      <div class="table-wrap">
+        <table>
+          <thead><tr>
+            <th>ID</th><th>Название</th><th>Предмет</th><th>Категория</th><th>Автор</th><th>Публичный</th><th>Действия</th>
+          </tr></thead>
+          <tbody id="tpl-course-body"><tr><td colspan="7"><div class="spinner"></div></td></tr></tbody>
+        </table>
+      </div>
+
+      <div class="section-title" style="margin-top:32px">Шаблоны уроков</div>
+      <div class="table-wrap">
+        <table>
+          <thead><tr>
+            <th>ID</th><th>Название</th><th>Предмет</th><th>Категория</th><th>Автор</th><th>Публичный</th><th>Действия</th>
+          </tr></thead>
+          <tbody id="tpl-lesson-body"><tr><td colspan="7"><div class="spinner"></div></td></tr></tbody>
+        </table>
+      </div>
+    </div>
+
+    <div class="tab-pane" id="tab-sims">
+      <div class="section-title">Управление симуляциями</div>
+
+      <!-- Master toggle -->
+      <div class="perm-role-block" style="margin-bottom:24px">
+        <div style="display:flex;align-items:center;justify-content:space-between;gap:16px">
+          <div>
+            <div class="perm-label" style="font-size:15px">Модуль симуляций</div>
+            <div class="perm-desc">Отключить полностью — страница «Лаборатория» станет недоступна для всех пользователей</div>
+          </div>
+          <label class="perm-toggle" id="sims-master-lbl" title="Включить / выключить весь модуль">
+            <input type="checkbox" id="sims-master-chk" onchange="simsMasterToggle(this.checked)" />
+            <span class="perm-track"></span>
+            <span class="perm-thumb"></span>
+          </label>
+        </div>
+      </div>
+
+      <!-- Per-sim grid -->
+      <div class="perm-desc" style="margin-bottom:16px">Отключённые симуляции не отображаются в лаборатории. Симуляции в статусе «скоро» не показываются независимо от этой настройки.</div>
+      <div class="perm-grid" id="sims-grid">
+        <div style="color:var(--muted);font-size:0.84rem">Загрузка…</div>
+      </div>
+    </div>
+
+    <!-- ── Игры ── -->
+    <div class="tab-pane" id="tab-games">
+      <div class="section-title">Управление играми</div>
+      <div class="perm-desc" style="margin-bottom:20px">Отключённые игры скрываются из бокового меню и становятся недоступны для всех пользователей.</div>
+      <div class="perm-grid" id="games-features-grid">
+        <div style="color:var(--muted);font-size:0.84rem">Загрузка…</div>
+      </div>
+
+      <div class="section-title" style="margin-top:32px">Модули для «Своб. ученика»</div>
+      <div class="perm-desc" style="margin-bottom:20px">Отключённые модули скрываются только для пользователей с ролью <b>Своб. ученик</b>. Глобальные настройки выше применяются поверх этих.</div>
+      <div class="perm-grid" id="fs-features-grid">
+        <div style="color:var(--muted);font-size:0.84rem">Загрузка…</div>
+      </div>
+    </div>
+
+    <!-- ── Журнал удалённых работ ── -->
+    <div class="tab-pane" id="tab-sublog">
+      <div class="section-title">Журнал удалённых работ</div>
+      <div class="perm-desc" style="margin-bottom:16px">Все удалённые работы учеников записываются сюда. Данные сохраняются даже после удаления файлов.</div>
+      <div class="sl-filter-row">
+        <select class="sl-filter-select" id="sublog-class-filter" onchange="loadSubmissionLog()">
+          <option value="">Все классы</option>
+        </select>
+        <span class="sl-count" id="sublog-count"></span>
+        <button class="btn-del-q" id="btn-clear-sublog" style="display:none;margin-left:auto" onclick="clearSubmissionLog()">
+          <i data-lucide="trash-2" style="width:13px;height:13px;vertical-align:-2px"></i> Очистить журнал
+        </button>
+      </div>
+      <div id="sublog-list"></div>
+    </div>
+
+    <!-- ── Темы ── -->
+    <div class="tab-pane" id="tab-topics">
+      <div class="section-title">Управление темами</div>
+      <div style="display:flex;gap:12px;margin-bottom:18px;flex-wrap:wrap;align-items:center">
+        <select class="t-select" id="topics-subj-filter" onchange="loadTopics()" style="max-width:220px"></select>
+        <button class="adm-btn adm-btn-primary adm-btn-small" onclick="showAddTopic()">+ Добавить тему</button>
+        <span class="sl-count" id="topics-count"></span>
+      </div>
+      <div id="topics-add-row" style="display:none;margin-bottom:16px">
+        <div class="adm-panel" style="padding:16px 20px">
+          <div class="adm-form-row" style="margin:0">
+            <div class="adm-form-group" style="flex:1"><label>Название</label><input type="text" id="topics-new-name" placeholder="Название темы" /></div>
+            <button class="adm-btn adm-btn-primary adm-btn-small" onclick="createTopic()" style="align-self:flex-end">Создать</button>
+            <button class="adm-btn adm-btn-small" style="background:var(--border-h);color:var(--text-3);align-self:flex-end" onclick="document.getElementById('topics-add-row').style.display='none'">Отмена</button>
+          </div>
+        </div>
+      </div>
+      <div id="topics-list"></div>
+    </div>
+
+    <!-- ── Рассылка ── -->
+    <div class="tab-pane" id="tab-broadcast">
+      <div class="section-title">Рассылка уведомлений</div>
+      <div class="adm-panel">
+        <div class="adm-form-row">
+          <div class="adm-form-group" style="flex:1">
+            <label>Сообщение</label>
+            <textarea id="bc-message" rows="3" placeholder="Текст уведомления (макс. 500 символов)" maxlength="500"></textarea>
+          </div>
+        </div>
+        <div class="adm-form-row">
+          <div class="adm-form-group" style="width:200px">
+            <label>Кому</label>
+            <select id="bc-role">
+              <option value="all">Всем пользователям</option>
+              <option value="student">Только ученикам</option>
+              <option value="teacher">Только учителям</option>
+              <option value="free_student">Свободным ученикам</option>
+            </select>
+          </div>
+          <div class="adm-form-group" style="flex:1">
+            <label>Ссылка (необязательно)</label>
+            <input type="text" id="bc-link" placeholder="/dashboard" />
+          </div>
+          <button class="adm-btn adm-btn-primary" onclick="sendBroadcast()" style="align-self:flex-end">Отправить</button>
+        </div>
+        <div id="bc-result" style="font-size:0.85rem;color:var(--green);margin-top:8px"></div>
+      </div>
+    </div>
+
+    <!-- ── Аудит-лог ── -->
+    <div class="tab-pane" id="tab-audit">
+      <div class="section-title" style="display:flex;align-items:center;justify-content:space-between">
+        Журнал действий администраторов
+        <button class="adm-btn adm-btn-danger adm-btn-small" onclick="clearAuditLog()">Очистить</button>
+      </div>
+      <div id="audit-list"></div>
+    </div>
+
+    <!-- ── Ошибки ── -->
+    <div class="tab-pane" id="tab-errors">
+      <div class="section-title" style="display:flex;align-items:center;justify-content:space-between">
+        Журнал ошибок сервера
+        <button class="adm-btn adm-btn-danger adm-btn-small" onclick="clearErrorLog()">Очистить</button>
+      </div>
+      <div id="errors-list"></div>
+    </div>
+
+    <!-- ── Здоровье системы ── -->
+    <div class="tab-pane" id="tab-health">
+      <div class="section-title">Здоровье системы</div>
+      <div id="health-content"></div>
+    </div>
+
+    </div><!-- /admin-main -->
+    </div><!-- /admin-layout -->
+  </div><!-- /container -->
+
+  <!-- ═══ MODAL ПРАВ ПОЛЬЗОВАТЕЛЯ ════════════════════════════════════ -->
+  <div class="q-modal" id="up-modal" onclick="if(event.target===this)closeUserPermsModal()">
+    <div class="q-modal-box" style="max-width:520px">
+      <div class="q-modal-title" id="up-modal-title">Права пользователя</div>
+      <p style="font-size:12.5px;color:var(--muted);margin:-8px 0 16px">Индивидуальные настройки переопределяют права роли для этого учителя.</p>
+      <div id="up-modal-list" style="display:flex;flex-direction:column;gap:8px;max-height:420px;overflow-y:auto;padding-right:4px"></div>
+      <div style="display:flex;justify-content:space-between;align-items:center;margin-top:20px;gap:12px">
+        <button class="btn-del-q" onclick="doResetAllUserPerms()" id="up-modal-reset-btn">
+          <i data-lucide="rotate-ccw" style="width:13px;height:13px;vertical-align:-2px"></i> Сбросить всё по умолчанию
+        </button>
+        <button class="btn-close" onclick="closeUserPermsModal()">Закрыть</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- ═══ MODAL РЕДАКТИРОВАНИЯ ПОЛЬЗОВАТЕЛЯ ═══════════════════════════ -->
+  <div class="q-modal" id="eu-modal" onclick="if(event.target===this)closeEditUserModal()">
+    <div class="q-modal-box" style="max-width:460px">
+      <div class="q-modal-title">Редактировать пользователя</div>
+      <div class="form-row">
+        <label class="form-label">Имя *</label>
+        <input type="text" class="form-ctrl" id="eu-name" placeholder="Имя пользователя" />
+      </div>
+      <div class="form-row">
+        <label class="form-label">Email *</label>
+        <input type="email" class="form-ctrl" id="eu-email" placeholder="email@example.com" />
+      </div>
+      <div class="form-row">
+        <label class="form-label">Новый пароль</label>
+        <input type="password" class="form-ctrl" id="eu-password" placeholder="Оставьте пустым, чтобы не менять (мин. 6 символов)" />
+      </div>
+      <div class="form-error" id="eu-error"></div>
+      <div class="modal-footer">
+        <button class="btn-cancel2" onclick="closeEditUserModal()">Отмена</button>
+        <button class="btn-save" id="eu-save" onclick="saveEditUser()">Сохранить</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- ═══ MODAL РЕДАКТОРА ВОПРОСА ══════════════════════════════════════ -->
+  <div class="q-modal" id="q-modal" onclick="if(event.target===this)closeQModal()">
+    <div class="q-modal-box">
+      <div class="q-modal-title" id="q-modal-title">Добавить вопрос</div>
+
+      <div class="form-row">
+        <label class="form-label">Тип вопроса</label>
+        <div style="display:flex;gap:8px;flex-wrap:wrap" id="qf-type-btns">
+          <button type="button" class="type-btn active" data-type="single"       onclick="setQType('single')"><i data-lucide="circle-dot" style="width:12px;height:12px;vertical-align:-1px"></i> Один ответ</button>
+          <button type="button" class="type-btn"        data-type="multi"        onclick="setQType('multi')"><i data-lucide="list-checks" style="width:12px;height:12px;vertical-align:-1px"></i> Несколько ответов</button>
+          <button type="button" class="type-btn"        data-type="true_false"   onclick="setQType('true_false')"><i data-lucide="check-circle-2" style="width:12px;height:12px;vertical-align:-1px"></i> Верно/Неверно</button>
+          <button type="button" class="type-btn"        data-type="short_answer" onclick="setQType('short_answer')"><i data-lucide="pencil" style="width:12px;height:12px;vertical-align:-1px"></i> Краткий ответ</button>
+          <button type="button" class="type-btn"        data-type="matching"     onclick="setQType('matching')"><i data-lucide="git-compare" style="width:12px;height:12px;vertical-align:-1px"></i> Сопоставление</button>
+        </div>
+      </div>
+
+      <div class="form-row-3">
+        <div>
+          <label class="form-label">Предмет *</label>
+          <select class="form-ctrl" id="qf-subject" onchange="loadQModalTopics()">
+            <option value="">— выберите —</option>
+            <option value="bio">Биология</option>
+            <option value="chem">Химия</option>
+            <option value="math">Математика</option>
+            <option value="phys">Физика</option>
+          </select>
+        </div>
+        <div>
+          <label class="form-label">Тема</label>
+          <input type="text" class="form-ctrl" id="qf-topic-text" placeholder="Введите или выберите…" list="qf-topic-list" autocomplete="off" />
+          <datalist id="qf-topic-list"></datalist>
+          <div class="form-hint">Введите новую — создастся автоматически</div>
+        </div>
+        <div>
+          <label class="form-label">Сложность</label>
+          <select class="form-ctrl" id="qf-difficulty">
+            <option value="1">1 — Лёгкий</option>
+            <option value="2" selected>2 — Средний</option>
+            <option value="3">3 — Сложный</option>
+          </select>
+        </div>
+      </div>
+
+      <div class="formula-bar" id="formula-bar">
+        <span style="font-size:0.7rem;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:0.05em">Формулы:</span>
+        <button type="button" class="fml" onclick="ins('\\frac{a}{b}')" title="Дробь">ᵃ⁄ᵦ</button>
+        <button type="button" class="fml" onclick="ins('\\sqrt{x}')"    title="Корень">√</button>
+        <button type="button" class="fml" onclick="ins('x^{n}')"          title="Степень">xⁿ</button>
+        <button type="button" class="fml" onclick="ins('x_{n}')"          title="Индекс">xₙ</button>
+        <button type="button" class="fml" onclick="ins('\\pi')"          title="Пи">π</button>
+        <button type="button" class="fml" onclick="ins('\\alpha')"       title="Альфа">α</button>
+        <button type="button" class="fml" onclick="ins('\\beta')"        title="Бета">β</button>
+        <button type="button" class="fml" onclick="ins('\\theta')"       title="Тета">θ</button>
+        <button type="button" class="fml" onclick="ins('\\infty')"       title="Бесконечность">∞</button>
+        <button type="button" class="fml" onclick="ins('\\leq')"         title="≤">≤</button>
+        <button type="button" class="fml" onclick="ins('\\geq')"         title="≥">≥</button>
+        <button type="button" class="fml" onclick="ins('\\neq')"         title="≠">≠</button>
+        <button type="button" class="fml" onclick="ins('\\pm')"          title="±">±</button>
+        <button type="button" class="fml" onclick="ins('\\cdot')"        title="·">·</button>
+        <button type="button" class="fml" onclick="ins('\\log_{a}{x}')"  title="Логарифм">log</button>
+        <button type="button" class="fml" onclick="ins('\\sin')"         title="Синус">sin</button>
+        <button type="button" class="fml" onclick="ins('\\cos')"         title="Косинус">cos</button>
+        <button type="button" class="fml" onclick="wrapMath()"             title="Обернуть в \(...\)" style="font-weight:800">\( \)</button>
+      </div>
+
+      <div class="form-row">
+        <label class="form-label">Текст вопроса *</label>
+        <textarea class="form-ctrl" id="qf-text" rows="3" placeholder="Введите текст вопроса…" oninput="updateCharCounter(this, 'qf-text-cnt', 500)" maxlength="500"></textarea>
+        <div class="char-counter" id="qf-text-cnt">0 / 500</div>
+      </div>
+
+      <div class="q-preview-wrap" id="q-preview-wrap">
+        <div style="font-size:0.7rem;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:6px">Предпросмотр</div>
+        <div class="q-preview-text" id="q-preview-text">Введите текст вопроса…</div>
+      </div>
+
+      <div class="opts-header" id="qf-opts-header">
+        <span class="opts-label">Варианты ответов — отметьте правильный <svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="currentColor" stroke="none"/></svg></span>
+      </div>
+      <div class="opts-grid" id="qf-opts"></div>
+      <!-- short_answer input -->
+      <div id="qf-short-wrap" style="display:none;margin-bottom:18px">
+        <label class="form-label">Правильный ответ *</label>
+        <input type="text" class="form-ctrl" id="qf-correct-text" placeholder="Введите точный правильный ответ (регистр не важен)…" />
+        <div class="form-hint">Сравнение без учёта регистра и лишних пробелов</div>
+      </div>
+      <!-- matching pairs UI -->
+      <div id="qf-match-wrap" style="display:none;margin-bottom:18px">
+        <div style="display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:center;margin-bottom:8px">
+          <span class="form-label" style="margin:0">Левая часть</span>
+          <span class="form-label" style="margin:0">Правая часть (пара)</span>
+          <span></span>
+        </div>
+        <div id="qf-match-rows"></div>
+        <button type="button" class="btn-add-opt" onclick="addMatchPair()">+ Добавить пару</button>
+      </div>
+      <button type="button" class="btn-add-opt" id="btn-add-opt" onclick="addOpt()">+ Добавить вариант</button>
+
+      <div class="form-row">
+        <label class="form-label">Изображение к вопросу</label>
+        <div class="img-upload-row">
+          <button type="button" class="btn-img-upload" id="btn-img-upload" onclick="document.getElementById('qf-image-file').click()">
+            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" 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="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+            <span id="btn-img-upload-lbl">Загрузить</span>
+          </button>
+          <input type="file" id="qf-image-file" accept="image/*" style="display:none" onchange="handleImageFileSelect(this)">
+          <input type="text" class="form-ctrl" id="qf-image" placeholder="или вставьте URL" style="flex:1;min-width:0" />
+        </div>
+        <div id="qf-image-preview" style="display:none;margin-top:8px;position:relative;display:inline-block">
+          <img id="qf-image-img" style="max-width:100%;max-height:180px;border-radius:8px;border:1px solid var(--border);display:block" />
+          <button type="button" onclick="clearQuestionImage()" style="position:absolute;top:6px;right:6px;background:rgba(0,0,0,.6);color:#fff;border:none;border-radius:50%;width:26px;height:26px;cursor:pointer;font-size:15px;line-height:26px;text-align:center"><svg class="ic" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+        </div>
+      </div>
+
+      <div class="form-row">
+        <label class="form-label">Пояснение к правильному ответу</label>
+        <textarea class="form-ctrl" id="qf-explanation" rows="2" placeholder="Необязательно. Появится после ответа в режиме тренировки…"></textarea>
+      </div>
+
+      <div class="form-error" id="qf-error"></div>
+      <div class="modal-footer">
+        <button class="btn-cancel2" onclick="closeQModal()">Отмена</button>
+        <button class="btn-save" id="qf-save" onclick="saveQuestion()">Сохранить</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- ═══ MODAL СОЗДАНИЯ ЗАДАНИЯ ═══════════════════════════════════════ -->
+  <div class="q-modal" id="ac-modal" onclick="if(event.target===this)closeCreateAModal()">
+    <div class="q-modal-box">
+      <div class="q-modal-title">Создать задание</div>
+
+      <div class="form-row">
+        <label class="form-label">Назначить</label>
+        <div class="src-toggle">
+          <button type="button" class="type-btn active" data-actgt="class" onclick="setAcTarget('class')"><i data-lucide="users" style="width:12px;height:12px;vertical-align:-1px"></i> Классу</button>
+          <button type="button" class="type-btn"        data-actgt="user"  onclick="setAcTarget('user')"><i data-lucide="user" style="width:12px;height:12px;vertical-align:-1px"></i> Ученику</button>
+        </div>
+      </div>
+
+      <div id="acf-class-field">
+        <div class="form-row">
+          <label class="form-label">Класс *</label>
+          <select class="form-ctrl" id="acf-class">
+            <option value="">— загрузка… —</option>
+          </select>
+        </div>
+      </div>
+
+      <div id="acf-user-field" style="display:none">
+        <div class="form-row">
+          <label class="form-label">Ученик *</label>
+          <div style="position:relative">
+            <input type="text" class="form-ctrl" id="acf-student-search" placeholder="Поиск по имени или email…" autocomplete="off"
+              oninput="filterAcStudents(this.value)" onfocus="openAcStudentDrop()" onblur="setTimeout(closeAcStudentDrop,180)" />
+            <div id="acf-student-drop" style="display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #d1d5db;border-radius:6px;max-height:180px;overflow-y:auto;z-index:200;box-shadow:0 4px 12px rgba(0,0,0,.12)"></div>
+          </div>
+          <div id="acf-student-selected" style="display:none;margin-top:6px;padding:6px 10px;background:#f0fdf4;border-radius:6px;font-size:13px;color:#166534"></div>
+        </div>
+      </div>
+
+      <div class="form-row">
+        <label class="form-label">Название задания *</label>
+        <input type="text" class="form-ctrl" id="acf-title" placeholder="Например: Контрольная работа по биологии" />
+      </div>
+
+      <div class="form-row">
+        <label class="form-label">Источник</label>
+        <div class="src-toggle">
+          <button type="button" class="type-btn active" data-src="random" onclick="setAcSrc('random')"><i data-lucide="shuffle" style="width:12px;height:12px;vertical-align:-1px"></i> Случайные</button>
+          <button type="button" class="type-btn"        data-src="test"   onclick="setAcSrc('test')"><i data-lucide="clipboard-list" style="width:12px;height:12px;vertical-align:-1px"></i> Тест</button>
+          <button type="button" class="type-btn"        data-src="file"   onclick="setAcSrc('file')"><i data-lucide="paperclip" style="width:12px;height:12px;vertical-align:-1px"></i> Файл</button>
+        </div>
+      </div>
+
+      <!-- Random source fields -->
+      <div id="acf-random-fields">
+        <div class="form-row-3">
+          <div>
+            <label class="form-label">Предмет *</label>
+            <select class="form-ctrl" id="acf-subject">
+              <option value="">— выберите —</option>
+              <option value="bio">Биология</option>
+              <option value="chem">Химия</option>
+              <option value="math">Математика</option>
+              <option value="phys">Физика</option>
+            </select>
+          </div>
+          <div>
+            <label class="form-label">Режим</label>
+            <select class="form-ctrl" id="acf-mode">
+              <option value="exam">Экзамен (1 раз, таймер)</option>
+              <option value="repeat">Обычный (многократно)</option>
+              <option value="ct">ЦТ/ЦЭ (A+Б части)</option>
+            </select>
+          </div>
+          <div>
+            <label class="form-label">Кол-во вопросов</label>
+            <input type="number" class="form-ctrl" id="acf-count" min="5" max="100" value="25" />
+          </div>
+        </div>
+      </div>
+
+      <!-- Test source fields -->
+      <div id="acf-test-fields" style="display:none">
+        <div class="form-row-2">
+          <div>
+            <label class="form-label">Тест *</label>
+            <select class="form-ctrl" id="acf-test">
+              <option value="">— загрузка тестов… —</option>
+            </select>
+            <div class="form-hint">Вопросы берутся из теста в заданном порядке</div>
+          </div>
+          <div>
+            <label class="form-label">Режим</label>
+            <select class="form-ctrl" id="acf-mode-test">
+              <option value="exam">Экзамен (1 раз, таймер)</option>
+              <option value="repeat">Обычный (многократно)</option>
+              <option value="ct">ЦТ/ЦЭ (A+Б части)</option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <!-- File source fields -->
+      <div id="acf-file-fields" style="display:none">
+        <div class="form-row">
+          <label class="form-label">Файл из библиотеки *</label>
+          <input type="text" class="form-ctrl" id="acf-file-search" placeholder="Поиск по названию…" oninput="filterAcFiles(this.value)" />
+          <div id="acf-file-list" style="max-height:180px;overflow-y:auto;border:1.5px solid rgba(15,23,42,0.15);border-radius:8px;margin-top:6px"></div>
+          <div id="acf-file-selected" style="display:none;margin-top:6px;font-size:0.82rem;color:var(--violet);font-weight:600"></div>
+        </div>
+      </div>
+
+      <div class="form-row">
+        <label class="form-label">Дедлайн (необязательно)</label>
+        <input type="date" class="form-ctrl" id="acf-deadline" style="max-width:220px" />
+      </div>
+
+      <div class="form-error" id="acf-error"></div>
+      <div class="modal-footer">
+        <button class="btn-cancel2" onclick="closeCreateAModal()">Отмена</button>
+        <button class="btn-save" id="acf-save" onclick="saveNewAssignment()">Создать</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- ═══ MODAL РЕДАКТОРА ЗАДАНИЯ ══════════════════════════════════════ -->
+  <div class="q-modal" id="a-modal" onclick="if(event.target===this)closeAModal()">
+    <div class="q-modal-box">
+      <div class="q-modal-title" id="a-modal-title">Редактировать задание</div>
+
+      <div class="form-row">
+        <label class="form-label">Название задания *</label>
+        <input type="text" class="form-ctrl" id="af-title" placeholder="Например: Итоговый тест по биологии" />
+      </div>
+
+      <div class="form-row">
+        <label class="form-label">Источник вопросов</label>
+        <div class="src-toggle">
+          <button type="button" class="type-btn active" data-afsrc="random" onclick="setAfSrc('random')"><i data-lucide="shuffle" style="width:12px;height:12px;vertical-align:-1px"></i> Случайные из предмета</button>
+          <button type="button" class="type-btn"        data-afsrc="test"   onclick="setAfSrc('test')"><i data-lucide="clipboard-list" style="width:12px;height:12px;vertical-align:-1px"></i> Готовый тест</button>
+        </div>
+      </div>
+
+      <!-- Random source fields -->
+      <div id="af-random-fields">
+        <div class="form-row-2">
+          <div>
+            <label class="form-label">Предмет *</label>
+            <select class="form-ctrl" id="af-subject">
+              <option value="">— выберите —</option>
+              <option value="bio">Биология</option>
+              <option value="chem">Химия</option>
+              <option value="math">Математика</option>
+              <option value="phys">Физика</option>
+            </select>
+          </div>
+          <div>
+            <label class="form-label">Режим</label>
+            <select class="form-ctrl" id="af-mode">
+              <option value="exam">Экзамен (1 раз, таймер)</option>
+              <option value="repeat">Обычный (многократно)</option>
+              <option value="ct">ЦТ/ЦЭ (A+Б части)</option>
+            </select>
+          </div>
+        </div>
+        <div class="form-row">
+          <label class="form-label">Количество вопросов</label>
+          <input type="number" class="form-ctrl" id="af-count" min="5" max="100" value="25" style="max-width:160px" />
+        </div>
+      </div>
+
+      <!-- Test source fields -->
+      <div id="af-test-fields" style="display:none">
+        <div class="form-row-2">
+          <div>
+            <label class="form-label">Тест *</label>
+            <select class="form-ctrl" id="af-test">
+              <option value="">— загрузка… —</option>
+            </select>
+            <div class="form-hint">Вопросы берутся из теста в заданном порядке</div>
+          </div>
+          <div>
+            <label class="form-label">Режим</label>
+            <select class="form-ctrl" id="af-mode-test">
+              <option value="exam">Экзамен (1 раз, таймер)</option>
+              <option value="repeat">Обычный (многократно)</option>
+              <option value="ct">ЦТ/ЦЭ (A+Б части)</option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <div class="form-row">
+        <label class="form-label">Дедлайн (необязательно)</label>
+        <input type="date" class="form-ctrl" id="af-deadline" style="max-width:220px" />
+      </div>
+
+      <div class="form-error" id="af-error"></div>
+      <div class="modal-footer">
+        <button class="btn-cancel2" onclick="closeAModal()">Отмена</button>
+        <button class="btn-save" id="af-save" onclick="saveAssignment()">Сохранить</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- ═══ MODAL СОЗДАНИЯ/РЕДАКТИРОВАНИЯ ТЕСТА ════════════════════════ -->
+  <div class="q-modal" id="tst-modal" onclick="if(event.target===this)closeTstModal()">
+    <div class="q-modal-box" style="max-width:560px">
+      <div class="q-modal-title" id="tst-modal-title">Создать тест</div>
+
+      <div class="form-row-2">
+        <div>
+          <label class="form-label">Название *</label>
+          <input type="text" class="form-ctrl" id="tstf-title" placeholder="Название теста…" />
+        </div>
+        <div>
+          <label class="form-label">Предмет *</label>
+          <select class="form-ctrl" id="tstf-subject">
+            <option value="">— выберите —</option>
+            <option value="bio">Биология</option>
+            <option value="chem">Химия</option>
+            <option value="math">Математика</option>
+            <option value="phys">Физика</option>
+          </select>
+        </div>
+      </div>
+
+      <div class="form-row">
+        <label class="form-label">Описание (необязательно)</label>
+        <textarea class="form-ctrl" id="tstf-desc" rows="2" placeholder="Краткое описание теста…"></textarea>
+      </div>
+
+      <div class="form-row">
+        <label class="form-label">Лимит времени (мин)</label>
+        <input type="number" class="form-ctrl" id="tstf-time" min="1" max="600" placeholder="по умолчанию: кол-во вопросов × 1.5 мин" style="max-width:320px" />
+        <div class="form-hint">Оставьте пустым — время рассчитывается автоматически</div>
+      </div>
+
+      <div class="form-row">
+        <label class="form-label">После завершения</label>
+        <div style="display:flex;gap:8px;flex-wrap:wrap">
+          <button type="button" class="type-btn active" id="tstf-show-yes" onclick="setTstShowAnswers(true)"><i data-lucide="eye" style="width:12px;height:12px;vertical-align:-1px"></i> Показать ответы и решения</button>
+          <button type="button" class="type-btn"        id="tstf-show-no"  onclick="setTstShowAnswers(false)"><i data-lucide="eye-off" style="width:12px;height:12px;vertical-align:-1px"></i> Скрыть ответы</button>
+        </div>
+        <div class="form-hint">При «Скрыть» ученики видят только итоговый балл</div>
+      </div>
+
+      <div class="form-error" id="tstf-error"></div>
+      <div class="modal-footer">
+        <button class="btn-cancel2" onclick="closeTstModal()">Отмена</button>
+        <button class="btn-save" id="tstf-save" onclick="saveTst()">Сохранить</button>
+      </div>
+    </div>
+  </div>
+
+  <script src="/js/api.js"></script>
+  <script>
+    const { user, isTeacher, isAdmin } = LS.initPage();
+    if (!isTeacher) { window.location.href = '/dashboard'; throw new Error(); }
+    document.getElementById('page-sub').textContent =
+      isAdmin ? 'Администратор · полный доступ' : 'Учитель · просмотр статистики';
+
+    if (isAdmin) {
+      ['btn-tab-subjects','btn-tab-permissions','btn-tab-shop','btn-tab-gam','btn-tab-tpl','btn-tab-sims','btn-tab-games'].forEach(id => {
+        const el = document.getElementById(id);
+        if (el) el.style.display = '';
+      });
+      document.getElementById('admin-nav-system-sep').style.display = '';
+      document.getElementById('admin-nav-system-label').style.display = '';
+    }
+    LS.showBoardIfAllowed();
+    const MODES   = { exam:'Экзамен', practice:'Тренировка', repeat:'Обычный', ct:'ЦТ/ЦЭ', topic:'По теме', random:'Случайный' };
+    const DIFFS   = { 1:'Лёгкий', 2:'Средний', 3:'Сложный' };
+
+    function pctClass(p) { return p === null ? '' : p >= 75 ? 'pct-hi' : p >= 50 ? 'pct-mid' : 'pct-lo'; }
+    function fmtDate(d) { return new Date(d).toLocaleDateString('ru',{day:'numeric',month:'short',year:'numeric'}); }
+    function fmtTime(sec) {
+      if (!sec || sec < 0) return '—';
+      const m = Math.floor(sec / 60), s = sec % 60;
+      return m ? `${m} мин ${s} сек` : `${s} сек`;
+    }
+
+    /* ─── Tabs ─── */
+    let questionsInited = false, testsInited = false, assignmentsInited = false, usersInited = false, sessionsInited = false, subjectsInited = false, permissionsInited = false, shopInited = false, gamInited = false, tplInited = false, simsInited = false, gamesInited = false, sublogInited = false;
+    function switchTab(btn) {
+      document.querySelectorAll('.tab-pane').forEach(p => p.classList.remove('active'));
+      document.querySelectorAll('.admin-nav-item').forEach(b => b.classList.remove('active'));
+      const name = btn.dataset.tab;
+      document.getElementById('tab-' + name).classList.add('active');
+      btn.classList.add('active');
+      if (name === 'questions'   && !questionsInited)   { questionsInited = true;   loadQuestions(); }
+      if (name === 'tests'       && !testsInited)       { testsInited = true;       loadTests(); }
+      if (name === 'assignments' && !assignmentsInited) { assignmentsInited = true; loadAssignments(); }
+      if (name === 'subjects'    && !subjectsInited)    { subjectsInited = true;    loadSubjectConfig(); }
+      if (name === 'users'       && !usersInited)       { usersInited = true;       loadUsers(); }
+      if (name === 'sessions'    && !sessionsInited)    { sessionsInited = true;    loadSessions(); }
+      if (name === 'permissions' && !permissionsInited) { permissionsInited = true; loadPermissions(); }
+      if (name === 'shop'        && !shopInited)        { shopInited = true;        loadShopAdmin(); }
+      if (name === 'gam'         && !gamInited)         { gamInited = true;         loadGamAdmin(); }
+      if (name === 'tpl'         && !tplInited)         { tplInited = true;         loadTplAdmin(); }
+      if (name === 'sims'        && !simsInited)        { simsInited = true;         loadSimsAdmin(); }
+      if (name === 'games'       && !gamesInited)       { gamesInited = true;        loadGamesAdmin(); loadFsFeatures(); }
+      if (name === 'sublog'      && !sublogInited)      { sublogInited = true;       loadSubmissionLog(); }
+    }
+
+    /* Переход к вопросам конкретного предмета с открытием формы */
+    async function goAddQuestion(slug) {
+      // переключаем на вкладку Вопросы
+      const qBtn = document.querySelector('[data-tab="questions"]');
+      switchTab(qBtn);
+      // выставляем предмет в фильтре и обновляем список
+      document.getElementById('q-subject').value = slug;
+      if (!questionsInited) { questionsInited = true; }
+      await loadQuestions();
+      // открываем форму с предзаполненным предметом
+      openQModal();
+      document.getElementById('qf-subject').value = slug;
+      await loadQModalTopics();
+    }
+
+    /* ════════════════════════════════════════════════
+       СТАТИСТИКА
+    ════════════════════════════════════════════════ */
+    async function loadStats() {
+      try {
+        const s = await LS.adminGetStats();
+        document.getElementById('stats-grid').innerHTML = `
+          <div class="stat-card" style="--stat-top:var(--violet)">
+            <div class="stat-card-icon" style="background:rgba(155,93,229,0.1)"><i data-lucide="users" class="stat-icon"></i></div>
+            <div class="stat-val violet">${s.totalUsers}</div>
+            <div class="stat-label">Пользователей</div>
+          </div>
+          <div class="stat-card" style="--stat-top:var(--cyan)">
+            <div class="stat-card-icon" style="background:rgba(6,214,224,0.1)"><i data-lucide="file-text" class="stat-icon"></i></div>
+            <div class="stat-val cyan">${s.totalTests}</div>
+            <div class="stat-label">Тестов пройдено</div>
+          </div>
+          <div class="stat-card" style="--stat-top:var(--green)">
+            <div class="stat-card-icon" style="background:rgba(6,214,100,0.1)"><i data-lucide="target" class="stat-icon"></i></div>
+            <div class="stat-val green">${s.avgScore ?? '—'}%</div>
+            <div class="stat-label">Средний результат</div>
+          </div>`;
+        if (window.lucide) lucide.createIcons();
+        const subjEl = document.getElementById('subj-stats');
+        if (!s.bySubject?.length) { subjEl.innerHTML = '<div class="empty">Нет данных</div>'; return; }
+        subjEl.innerHTML = s.bySubject.map(b => {
+          const pct = b.avg_pct ?? 0;
+          const barColor = pct >= 75 ? 'var(--green)' : pct >= 50 ? 'var(--amber)' : 'var(--pink)';
+          return `<div class="subj-stat">
+            <div><div class="subj-stat-name">${esc(b.name)}</div><div class="subj-stat-info">${b.tests} тестов</div></div>
+            <div>
+              <div class="subj-stat-pct">${b.avg_pct ?? '—'}%</div>
+              <div style="width:60px;height:3px;background:rgba(15,23,42,0.06);border-radius:99px;margin-top:5px;overflow:hidden"><div style="width:${pct}%;height:100%;background:${barColor};border-radius:99px"></div></div>
+            </div>
+          </div>`;
+        }).join('');
+      } catch (e) {
+        document.getElementById('stats-grid').innerHTML = `<div class="error">Ошибка: ${esc(e.message)}</div>`;
+      }
+    }
+
+    /* ════════════════════════════════════════════════
+       РЕДАКТОР ВОПРОСОВ
+    ════════════════════════════════════════════════ */
+    let allQuestions = [];
+    let editingQId   = null;
+    let openQId      = null;
+    let _topicMap    = {};   // topic name (lower) <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> id, for current subject
+
+    /* ─── KaTeX rendering ─── */
+    const KATEX_OPTS = {
+      delimiters: [
+        { left: '\\(', right: '\\)', display: false },
+        { left: '\\[', right: '\\]', display: true  },
+      ],
+      throwOnError: false,
+    };
+    function renderMath(el) {
+      if (!el) return;
+      const run = () => { if (window.renderMathInElement) renderMathInElement(el, KATEX_OPTS); };
+      if (window._katexReady) run(); else window._katexCb = run;
+    }
+
+    function updateCharCounter(el, cntId, max) {
+      const n = el.value.length;
+      const cnt = document.getElementById(cntId);
+      if (!cnt) return;
+      cnt.textContent = `${n} / ${max}`;
+      cnt.className = 'char-counter' + (n > max * 0.9 ? ' warn' : '') + (n >= max ? ' over' : '');
+    }
+
+    async function onQSubjectChange() {
+      const slug = document.getElementById('q-subject').value;
+      const sel  = document.getElementById('q-topic');
+      sel.innerHTML = '<option value="">Все темы</option>';
+      if (slug) {
+        try {
+          const topics = await LS.getTopics(slug);
+          topics.forEach(t => sel.appendChild(new Option(t.name, t.id)));
+        } catch {}
+      }
+      loadQuestions();
+    }
+
+    async function loadQuestions() {
+      const subject  = document.getElementById('q-subject').value;
+      const topic_id = document.getElementById('q-topic').value;
+      const sort     = document.getElementById('q-sort').value;
+      const wrap     = document.getElementById('q-list-wrap');
+      wrap.innerHTML = LS.skeleton(5);
+      try {
+        allQuestions = await LS.getQuestions(subject || null, topic_id || null, sort);
+        renderQuestions();
+      } catch (e) {
+        wrap.innerHTML = `<div class="error">Ошибка загрузки: ${esc(e.message)}</div>`;
+      }
+    }
+
+    function renderQuestions() {
+      const search   = document.getElementById('q-search').value.toLowerCase();
+      const filtered = search
+        ? allQuestions.filter(q => q.text.toLowerCase().includes(search) || (q.topic||'').toLowerCase().includes(search))
+        : allQuestions;
+
+      document.getElementById('q-count').textContent = `${filtered.length} вопросов`;
+
+      if (!filtered.length) {
+        document.getElementById('q-list-wrap').innerHTML = '<div class="empty">Вопросов не найдено</div>';
+        return;
+      }
+
+      const wrap = document.getElementById('q-list-wrap');
+      wrap.innerHTML =
+        `<div class="q-list">${filtered.map(q => {
+          const diffCls = `diff-${q.difficulty}`;
+          const optsHtml = (q.options || []).map(o =>
+            `<div class="q-opt-row ${o.is_correct ? 'correct' : ''}">
+               <span class="q-opt-icon">${o.is_correct ? '<i data-lucide="check" style="width:13px;height:13px"></i>' : '<svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg>'}</span>${esc(o.text)}
+             </div>`).join('');
+          const explHtml = q.explanation
+            ? `<div class="q-expl"><strong>Пояснение:</strong> ${esc(q.explanation)}</div>` : '';
+          return `<div class="q-card" id="qcard-${q.id}">
+            <div class="q-card-head">
+              <span class="q-card-num">#${q.id}</span>
+              <div class="q-card-body" onclick="toggleQDetail(${q.id})">
+                <div class="q-card-text">${esc(q.text)}</div>
+                <div class="q-card-meta">
+                  ${q.subject_name ? `<span class="q-badge q-badge-subj">${esc(q.subject_name)}</span>` : ''}
+                  ${q.topic ? `<span class="q-badge q-badge-topic">${esc(q.topic)}</span>` : ''}
+                  <span class="q-badge ${diffCls}">${DIFFS[q.difficulty]||q.difficulty}</span>
+                  <span style="font-size:0.72rem;color:var(--text-3);background:rgba(15,23,42,0.05);padding:2px 7px;border-radius:999px">${{single:'Один',multi:'Несколько',true_false:'Верно/Неверно',short_answer:'Краткий',matching:'Сопост.'}[q.type]||q.type||'Один'}</span>
+                  <span style="font-size:0.75rem;color:var(--text-3)">${q.options?.length||0} вар.</span>
+                </div>
+              </div>
+              <div class="q-card-actions">
+                <button class="btn-edit-q" onclick="editQ(${q.id})">Изменить</button>
+                <button class="btn-dup-q"  onclick="dupQ(${q.id})" title="Дублировать">⧉</button>
+                <button class="btn-del-q"  onclick="deleteQ(${q.id})" title="Удалить"><i data-lucide="x" style="width:14px;height:14px"></i></button>
+              </div>
+            </div>
+            <div class="q-card-detail" id="qdetail-${q.id}">
+              ${optsHtml}${explHtml}
+            </div>
+          </div>`;
+        }).join('')}</div>`;
+      renderMath(wrap);
+      if (window.lucide) lucide.createIcons();
+    }
+
+    function toggleQDetail(id) {
+      if (openQId === id) {
+        document.getElementById('qdetail-' + id)?.classList.remove('open');
+        openQId = null; return;
+      }
+      if (openQId) document.getElementById('qdetail-' + openQId)?.classList.remove('open');
+      document.getElementById('qdetail-' + id)?.classList.add('open');
+      openQId = id;
+    }
+
+    async function dupQ(id) {
+      try {
+        const { id: newId } = await LS.duplicateQuestion(id);
+        await loadQuestions();
+        // scroll to new card
+        setTimeout(() => document.getElementById('qcard-' + newId)?.scrollIntoView({ behavior:'smooth', block:'center' }), 300);
+      } catch (e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+    }
+
+    async function deleteQ(id) {
+      if (!await LS.confirm(`Удалить вопрос #${id}?`, { title: 'Удалить вопрос', confirmText: 'Удалить' })) return;
+      try {
+        await LS.deleteQuestion(id);
+        allQuestions = allQuestions.filter(q => q.id !== id);
+        renderQuestions();
+      } catch (e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+    }
+
+    /* ─── Question type ─── */
+    let _currentType = 'single';
+    let _matchPairs = []; // [{left:'', right:''}]
+
+    function setQType(type) {
+      _currentType = type;
+      document.querySelectorAll('[data-type]').forEach(b => b.classList.toggle('active', b.dataset.type === type));
+      const isMatching   = type === 'matching';
+      const isShort      = type === 'short_answer';
+      const showOpts     = !isShort && !isMatching;
+      const optsHeader = document.getElementById('qf-opts-header');
+      if (optsHeader) optsHeader.style.display = showOpts ? '' : 'none';
+      document.getElementById('qf-opts').style.display       = showOpts ? '' : 'none';
+      document.getElementById('qf-short-wrap').style.display = isShort    ? '' : 'none';
+      document.getElementById('qf-match-wrap').style.display = isMatching ? '' : 'none';
+      document.getElementById('btn-add-opt').style.display   = showOpts && type !== 'true_false' ? '' : 'none';
+
+      if (type === 'true_false') {
+        initOpts([{ text:'Верно', is_correct:false }, { text:'Неверно', is_correct:false }]);
+      } else if (isShort) {
+        _opts = [];
+      } else if (isMatching) {
+        _opts = [];
+        if (_matchPairs.length === 0) _matchPairs = [{left:'',right:''},{left:'',right:''},{left:'',right:''}];
+        renderMatchRows();
+      } else {
+        if (_opts.length === 0 || _opts[0]?.text === 'Верно') initOpts([{},{},{},{}]);
+        else renderOptRows(_opts);
+      }
+    }
+
+    function renderMatchRows() {
+      const cont = document.getElementById('qf-match-rows');
+      cont.innerHTML = _matchPairs.map((p, i) => `
+        <div style="display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin-bottom:8px" data-mi="${i}">
+          <input type="text" class="form-ctrl" placeholder="Элемент…" value="${esc(p.left)}"
+            oninput="_matchPairs[${i}].left=this.value" style="margin:0" />
+          <input type="text" class="form-ctrl" placeholder="Пара к нему…" value="${esc(p.right)}"
+            oninput="_matchPairs[${i}].right=this.value" style="margin:0" />
+          <button type="button" onclick="removeMatchPair(${i})" style="border:none;background:none;color:var(--text-3);cursor:pointer;padding:0 6px;display:flex;align-items:center" title="Удалить"><i data-lucide="x" style="width:15px;height:15px"></i></button>
+        </div>`).join('');
+      if (window.lucide) lucide.createIcons();
+    }
+
+    function addMatchPair() {
+      _matchPairs.push({left:'',right:''});
+      renderMatchRows();
+    }
+
+    function removeMatchPair(i) {
+      _matchPairs.splice(i, 1);
+      renderMatchRows();
+    }
+
+    /* ─── Formula bar ─── */
+    let _focusedInput = null;
+    document.addEventListener('focusin', e => {
+      if (e.target.closest && e.target.closest('#q-modal') &&
+          (e.target.tagName === 'TEXTAREA' || (e.target.tagName === 'INPUT' && e.target.type === 'text'))) {
+        _focusedInput = e.target;
+      }
+    });
+
+    function ins(latex) {
+      const el = _focusedInput || document.getElementById('qf-text');
+      if (!el) return;
+      const s = el.selectionStart ?? el.value.length;
+      const e2= el.selectionEnd   ?? el.value.length;
+      const before = el.value.slice(0, s), after = el.value.slice(e2);
+      const opens  = (before.match(/\\\(/g)||[]).length;
+      const closes = (before.match(/\\\)/g)||[]).length;
+      const insert = opens > closes ? latex : `\\(${latex}\\)`;
+      el.value = before + insert + after;
+      el.setSelectionRange(s + insert.length, s + insert.length);
+      el.focus();
+      updateQPreview();
+    }
+
+    function wrapMath() {
+      const el = _focusedInput || document.getElementById('qf-text');
+      if (!el) return;
+      const s = el.selectionStart, e2 = el.selectionEnd;
+      const sel = el.value.slice(s, e2) || 'x';
+      el.value = el.value.slice(0, s) + `\\(${sel}\\)` + el.value.slice(e2);
+      el.focus();
+      updateQPreview();
+    }
+
+    /* ─── Live preview ─── */
+    let _prevTimer = null;
+    function updateQPreview() {
+      clearTimeout(_prevTimer);
+      _prevTimer = setTimeout(() => {
+        const text = document.getElementById('qf-text').value || 'Введите текст вопроса…';
+        const el   = document.getElementById('q-preview-text');
+        el.textContent = text;
+        renderMath(el);
+      }, 150);
+    }
+    // Wire textarea input to preview
+    setTimeout(() => {
+      const ta = document.getElementById('qf-text');
+      if (ta) ta.addEventListener('input', updateQPreview);
+    }, 0);
+
+    /* ─── Dynamic options ─── */
+    const OPT_LETTERS = 'АБВГДЕ';
+
+    function renderOptRows(opts) {
+      const grid    = document.getElementById('qf-opts');
+      const isMulti = _currentType === 'multi';
+      grid.innerHTML = opts.map((o, i) => `
+        <div class="opt-row${o.is_correct ? ' opt-correct' : ''}" data-i="${i}">
+          <span class="opt-letter">${OPT_LETTERS[i]}</span>
+          ${isMulti
+            ? `<input type="checkbox" class="opt-radio" value="${i}" ${o.is_correct ? 'checked' : ''}
+                   onchange="onCheckChange(${i}, this.checked)" />`
+            : `<input type="radio" name="qf-correct" class="opt-radio" value="${i}" ${o.is_correct ? 'checked' : ''}
+                   onchange="onRadioChange(${i})" />`}
+          <input type="text" class="opt-input" placeholder="Вариант ${OPT_LETTERS[i]}"
+                 value="${esc(o.text||'')}" oninput="syncOptText(${i}, this.value)" />
+          ${opts.length > 2
+            ? `<button type="button" class="btn-rem-opt" onclick="removeOpt(${i})" title="Удалить">−</button>`
+            : '<span style="width:24px;flex-shrink:0"></span>'}
+        </div>`).join('');
+      document.getElementById('btn-add-opt').style.display = opts.length >= 6 ? 'none' : '';
+    }
+
+    function onCheckChange(idx, checked) {
+      _opts[idx].is_correct = checked;
+      document.querySelector(`#qf-opts .opt-row[data-i="${idx}"]`)?.classList.toggle('opt-correct', checked);
+    }
+
+    let _opts = [];  // current options state
+
+    function initOpts(opts) {
+      _opts = opts.length ? opts.map(o => ({ text: o.text||'', is_correct: !!o.is_correct }))
+                          : [{text:'',is_correct:false},{text:'',is_correct:false},{text:'',is_correct:false},{text:'',is_correct:false}];
+      renderOptRows(_opts);
+    }
+
+    function onRadioChange(idx) {
+      _opts.forEach((o, i) => o.is_correct = (i === idx));
+      renderOptRows(_opts);
+    }
+
+    function syncOptText(idx, val) { _opts[idx].text = val; }
+
+    function addOpt() {
+      if (_opts.length >= 6) return;
+      _opts.push({ text: '', is_correct: false });
+      renderOptRows(_opts);
+      // focus new input
+      const rows = document.querySelectorAll('#qf-opts .opt-row');
+      rows[rows.length - 1]?.querySelector('input[type=text]')?.focus();
+    }
+
+    function removeOpt(idx) {
+      if (_opts.length <= 2) return;
+      const wasCorrect = _opts[idx].is_correct;
+      _opts.splice(idx, 1);
+      if (wasCorrect && _opts.length > 0) _opts[0].is_correct = true;
+      renderOptRows(_opts);
+    }
+
+    /* ─── Modal ─── */
+    function openQModal(q = null) {
+      editingQId = q ? q.id : null;
+      document.getElementById('q-modal-title').textContent = q ? `Редактировать вопрос #${q.id}` : 'Новый вопрос';
+      const textEl = document.getElementById('qf-text');
+      textEl.value = q?.text || '';
+      updateCharCounter(textEl, 'qf-text-cnt', 500);
+      document.getElementById('qf-explanation').value   = q?.explanation || '';
+      document.getElementById('qf-difficulty').value    = q?.difficulty ?? 2;
+      document.getElementById('qf-subject').value       = q?.subject_slug || '';
+      document.getElementById('qf-topic-text').value    = q?.topic || '';
+      document.getElementById('qf-correct-text').value  = q?.correct_text || '';
+      document.getElementById('qf-error').textContent   = '';
+      const imgVal = q?.image || '';
+      document.getElementById('qf-image').value = imgVal;
+      updateImagePreview(imgVal);
+
+      if (q?.type === 'matching') {
+        _matchPairs = (q.options || []).map(o => ({ left: o.text, right: o.match_pair || '' }));
+        if (!_matchPairs.length) _matchPairs = [{left:'',right:''},{left:'',right:''},{left:'',right:''}];
+      } else {
+        _matchPairs = [];
+      }
+      setQType(q?.type || 'single');
+      if (q?.type !== 'matching') initOpts(q?.options || []);
+      updateQPreview();
+      loadQModalTopics();
+      document.getElementById('q-modal').classList.add('open');
+      setTimeout(() => textEl.focus(), 80);
+    }
+
+    function editQ(id) {
+      const q = allQuestions.find(x => x.id === id);
+      if (q) openQModal(q);
+    }
+
+    function closeQModal() {
+      document.getElementById('q-modal').classList.remove('open');
+      editingQId = null;
+    }
+
+    async function loadQModalTopics() {
+      const slug = document.getElementById('qf-subject').value;
+      const dl   = document.getElementById('qf-topic-list');
+      dl.innerHTML = '';
+      _topicMap = {};
+      if (!slug) return;
+      try {
+        const topics = await LS.getTopics(slug);
+        topics.forEach(t => {
+          dl.appendChild(new Option(t.name));
+          _topicMap[t.name.toLowerCase()] = t.id;
+        });
+      } catch {}
+    }
+
+    async function saveQuestion() {
+      const text         = document.getElementById('qf-text').value.trim();
+      const explanation  = document.getElementById('qf-explanation').value.trim();
+      const difficulty   = Number(document.getElementById('qf-difficulty').value);
+      const subject_slug = document.getElementById('qf-subject').value;
+      const topicText    = document.getElementById('qf-topic-text').value.trim();
+      const type         = _currentType;
+      const errEl        = document.getElementById('qf-error');
+      errEl.textContent  = '';
+
+      if (!subject_slug) { errEl.textContent = 'Выберите предмет'; return; }
+      if (!text)         { errEl.textContent = 'Введите текст вопроса'; return; }
+
+      let options      = null;
+      let correct_text = null;
+
+      if (type === 'short_answer') {
+        correct_text = document.getElementById('qf-correct-text').value.trim();
+        if (!correct_text) { errEl.textContent = 'Введите правильный ответ'; return; }
+      } else if (type === 'matching') {
+        // sync text from DOM inputs
+        document.querySelectorAll('#qf-match-rows [data-mi]').forEach((row, i) => {
+          const [l, r] = row.querySelectorAll('input');
+          if (_matchPairs[i]) { _matchPairs[i].left = l.value.trim(); _matchPairs[i].right = r.value.trim(); }
+        });
+        if (_matchPairs.length < 2) { errEl.textContent = 'Нужно минимум 2 пары'; return; }
+        if (_matchPairs.some(p => !p.left || !p.right)) { errEl.textContent = 'Заполните все пары'; return; }
+        options = _matchPairs.map(p => ({ text: p.left, match_pair: p.right, is_correct: 0 }));
+      } else {
+        // sync any unsaved text from DOM inputs
+        document.querySelectorAll('#qf-opts .opt-row').forEach((row, i) => {
+          if (_opts[i]) _opts[i].text = row.querySelector('input[type=text]').value.trim();
+        });
+        options = _opts.map(o => ({ text: o.text, is_correct: o.is_correct }));
+        if (options.length < 2)           { errEl.textContent = 'Нужно минимум 2 варианта ответа'; return; }
+        if (options.some(o => !o.text))   { errEl.textContent = 'Заполните все варианты ответов'; return; }
+        if (!options.some(o => o.is_correct)) { errEl.textContent = 'Отметьте правильный ответ'; return; }
+      }
+
+      // resolve topic: use id if known, else send topic_name for find-or-create
+      const knownId    = _topicMap[topicText.toLowerCase()];
+      const topic_id   = knownId || null;
+      const topic_name = !knownId && topicText ? topicText : null;
+
+      const image = document.getElementById('qf-image').value.trim() || null;
+
+      const btn = document.getElementById('qf-save');
+      btn.disabled = true; btn.textContent = 'Сохранение…';
+      try {
+        if (editingQId) {
+          await LS.updateQuestion(editingQId, { text, type, correct_text, difficulty, explanation: explanation||null, topic_id, topic_name, options, image });
+        } else {
+          await LS.createQuestion({ subject_slug, topic_id, topic_name, text, type, correct_text, difficulty, explanation: explanation||null, options, image });
+        }
+        closeQModal();
+        loadQuestions();
+      } catch (e) {
+        errEl.textContent = 'Ошибка: ' + e.message;
+      } finally {
+        btn.disabled = false; btn.textContent = 'Сохранить';
+      }
+    }
+
+    /* ── Image upload & preview ── */
+    function updateImagePreview(url) {
+      const wrap = document.getElementById('qf-image-preview');
+      const img  = document.getElementById('qf-image-img');
+      if (url) { img.src = url; wrap.classList.add('visible'); }
+      else     { wrap.classList.remove('visible'); img.src = ''; }
+    }
+
+    function clearQuestionImage() {
+      document.getElementById('qf-image').value = '';
+      updateImagePreview('');
+    }
+
+    async function handleImageFileSelect(input) {
+      const file = input.files[0];
+      if (!file) return;
+      input.value = '';
+      const btn = document.getElementById('btn-img-upload');
+      const lbl = document.getElementById('btn-img-upload-lbl');
+      btn.disabled = true;
+      lbl.textContent = 'Загрузка…';
+      try {
+        const fd = new FormData();
+        fd.append('file', file);
+        fd.append('title', 'Question image: ' + file.name);
+        fd.append('is_public', '1');
+        const res = await fetch('/api/files', {
+          method: 'POST',
+          headers: { Authorization: 'Bearer ' + localStorage.getItem('ls_token') },
+          body: fd
+        });
+        if (!res.ok) throw new Error((await res.json()).error || res.statusText);
+        const { id } = await res.json();
+        const url = `/api/files/${id}/download`;
+        document.getElementById('qf-image').value = url;
+        updateImagePreview(url);
+      } catch (e) {
+        document.getElementById('qf-error').textContent = 'Ошибка загрузки: ' + e.message;
+      } finally {
+        btn.disabled = false;
+        lbl.textContent = 'Загрузить';
+      }
+    }
+
+    document.addEventListener('DOMContentLoaded', () => {
+      const imgInput = document.getElementById('qf-image');
+      if (imgInput) imgInput.addEventListener('input', e => updateImagePreview(e.target.value.trim()));
+    });
+
+    /* ── CSV Import ── */
+    async function importCSVFile(input) {
+      const file = input.files[0];
+      if (!file) return;
+      input.value = '';
+      const fd = new FormData();
+      fd.append('file', file);
+      const btn = document.querySelector('[onclick="document.getElementById(\'csv-file-input\').click()"]');
+      if (btn) { btn.disabled = true; btn.textContent = 'Импорт…'; }
+      try {
+        const { imported, errors } = await LS.importQuestions(fd);
+        LS.toast(`Импортировано: ${imported} вопросов${errors.length ? ` (${errors.length} ошибок)` : ''}`, imported > 0 ? 'success' : 'warn', 5000);
+        loadQuestions();
+      } catch (e) {
+        LS.toast('Ошибка импорта: ' + e.message, 'error');
+      } finally {
+        if (btn) { btn.disabled = false; btn.innerHTML = '<i data-lucide="upload" style="width:14px;height:14px;vertical-align:-2px"></i> Импорт CSV'; if(window.lucide)lucide.createIcons(); }
+      }
+    }
+
+    function downloadCSVTemplate(e) {
+      e.preventDefault();
+      const header = 'subject_slug;topic;text;difficulty;type;opt1;c1;opt2;c2;opt3;c3;opt4;c4;correct_text;explanation;year';
+      const example = [
+        'bio;Клетки;Что является «электростанцией» клетки?;2;single;Митохондрия;1;Рибосома;0;Лизосома;0;Ядро;0;;Митохондрии синтезируют АТФ;2024',
+        'bio;Клетки;Какие органоиды участвуют в синтезе белка?;2;multi;Рибосома;1;Митохондрия;0;Эндоплазматическая сеть;1;Лизосома;0;;',
+        'chem;Кислоты;Формула серной кислоты;1;short_answer;;;;;;;;H2SO4;;',
+      ].join('\n');
+      const blob = new Blob(['\ufeff' + header + '\n' + example], { type: 'text/csv;charset=utf-8' });
+      const a = document.createElement('a');
+      a.href = URL.createObjectURL(blob);
+      a.download = 'questions_template.csv';
+      a.click();
+    }
+
+    /* ════════════════════════════════════════════════
+       ПОЛЬЗОВАТЕЛИ
+    ════════════════════════════════════════════════ */
+    async function loadUsers() {
+      try {
+        const users = await LS.adminGetUsers();
+        const tbody = document.getElementById('users-body');
+        if (!users.length) { tbody.innerHTML = '<tr><td colspan="7"><div class="empty">Пользователей нет</div></td></tr>'; return; }
+        tbody.innerHTML = users.map(u => {
+          const pc = pctClass(u.avg_pct);
+          const initials = (u.name||'?').split(' ').slice(0,2).map(w=>w[0]?.toUpperCase()||'').join('')||'?';
+          const avatarBg = u.role==='admin' ? 'linear-gradient(135deg,#9B5DE5,#c084fc)' : u.role==='teacher' ? 'linear-gradient(135deg,#06D6E0,#9B5DE5)' : u.role==='free_student' ? 'linear-gradient(135deg,#10B981,#059669)' : 'linear-gradient(135deg,#8898AA,#3D4F6B)';
+          const roleCell = isAdmin && u.id !== user.id
+            ? `<select class="role-select" data-uid="${u.id}" onchange="changeRole(this)">
+                <option value="student"      ${u.role==='student'      ?'selected':''}>Ученик</option>
+                <option value="free_student" ${u.role==='free_student' ?'selected':''}>Своб. ученик</option>
+                <option value="teacher"      ${u.role==='teacher'      ?'selected':''}>Учитель</option>
+                <option value="admin"        ${u.role==='admin'        ?'selected':''}>Админ</option>
+               </select>`
+            : `<span class="role-badge ${u.role}">${{student:'Ученик',free_student:'Своб. ученик',teacher:'Учитель',admin:'Админ'}[u.role]||u.role}</span>`;
+          return `<tr class="clickable${u.is_banned ? ' banned-row' : ''}" onclick="openUserPanel(event,${u.id},'${u.role}')">
+            <td>
+              <div style="display:flex;align-items:center;gap:12px">
+                <div style="width:36px;height:36px;border-radius:10px;background:${avatarBg};display:flex;align-items:center;justify-content:center;font-family:'Unbounded',sans-serif;font-size:0.62rem;font-weight:800;color:#fff;flex-shrink:0;${u.is_banned?'filter:grayscale(1);opacity:.5':''}">${initials}</div>
+                <div>
+                  <div style="font-weight:700;font-size:0.88rem;color:var(--text)">${esc(u.name)}${u.is_banned ? ' <span style="font-size:0.7rem;background:rgba(239,68,68,.12);color:#EF4444;border-radius:4px;padding:1px 5px;font-weight:600;vertical-align:middle">заблокирован</span>' : ''}</div>
+                  <div style="color:var(--text-3);font-size:0.76rem">${esc(u.email)}</div>
+                </div>
+              </div>
+            </td>
+            <td onclick="event.stopPropagation()">${roleCell}</td>
+            <td style="font-weight:700">${u.tests_count}</td>
+            <td>
+              <span class="pct-cell ${pc}">${u.avg_pct !== null ? u.avg_pct+'%' : '—'}</span>
+              ${u.avg_pct !== null ? `<div class="perf-bar"><div class="perf-fill ${pc}" style="width:${u.avg_pct}%"></div></div>` : ''}
+            </td>
+            <td style="color:var(--text-3);font-size:0.8rem">${fmtDate(u.created_at)}</td>
+            <td style="color:var(--text-3);font-size:0.8rem">${u.last_login ? new Date(u.last_login).toLocaleDateString('ru',{day:'numeric',month:'short'}) : '—'}</td>
+            <td style="text-align:right;color:var(--text-3);font-size:0.85rem;opacity:0.4">›</td>
+          </tr>`;
+        }).join('');
+      } catch (e) {
+        document.getElementById('users-body').innerHTML = `<tr><td colspan="7" class="error">Ошибка: ${esc(e.message)}</td></tr>`;
+      }
+    }
+
+    async function changeRole(select) {
+      select.disabled = true;
+      try { await LS.adminUpdateRole(select.dataset.uid, select.value); LS.toast('Роль изменена', 'success', 2000); }
+      catch (e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+      finally { select.disabled = false; }
+    }
+
+    let activeTr = null;
+    let activeUid = null;
+    let activeUserRole = null;
+
+    async function openUserPanel(e, uid, role) {
+      if (activeTr) activeTr.classList.remove('selected');
+      activeTr = e.currentTarget; activeTr.classList.add('selected');
+      activeUid = uid;
+      activeUserRole = role;
+      const panel = document.getElementById('user-panel');
+      panel.classList.add('visible');
+      panel.scrollIntoView({ behavior:'smooth', block:'nearest' });
+      document.getElementById('up-sessions').innerHTML = LS.skeleton(3, 'row');
+      document.getElementById('up-name').textContent   = '…';
+      document.getElementById('up-email').textContent  = '';
+      if (isAdmin) {
+        document.getElementById('up-edit-btn').style.display   = '';
+        document.getElementById('up-clear-btn').style.display  = '';
+        document.getElementById('up-perms-btn').style.display  = role === 'teacher' ? '' : 'none';
+        document.getElementById('up-ban-btn').style.display    = '';
+        document.getElementById('up-delete-btn').style.display = '';
+      }
+      await reloadUserPanel(uid);
+    }
+
+    async function reloadUserPanel(uid) {
+      try {
+        const { user: u, sessions } = await LS.adminGetUserSessions(uid);
+        activeUserRole = u.role;
+        document.getElementById('up-name').innerHTML  = u.name + (u.is_banned ? ' <svg class="ic" viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>' : '');
+        document.getElementById('up-email').textContent = u.email;
+        // Sync button in case role changed after panel was opened
+        if (isAdmin) {
+          document.getElementById('up-perms-btn').style.display = u.role === 'teacher' ? '' : 'none';
+          const banBtn = document.getElementById('up-ban-btn');
+          const banLbl = document.getElementById('up-ban-label');
+          if (u.is_banned) {
+            banBtn.style.background     = 'rgba(34,197,94,.12)';
+            banBtn.style.color          = '#22C55E';
+            banBtn.style.borderColor    = 'rgba(34,197,94,.25)';
+            banLbl.textContent          = 'Разблокировать';
+          } else {
+            banBtn.style.background = '';
+            banBtn.style.color      = '';
+            banBtn.style.borderColor = '';
+            banLbl.textContent      = 'Заблокировать';
+          }
+        }
+        const el = document.getElementById('up-sessions');
+        if (!sessions.length) { el.innerHTML = '<div class="empty">Тестов нет</div>'; return; }
+        el.innerHTML = '<div class="sess-list">' + sessions.map(s => {
+          const pct = s.score !== null ? Math.round((s.score/s.total)*100) : null;
+          return `<div class="sess-item">
+            <div class="sess-pct ${pctClass(pct)}">${pct !== null ? pct+'%' : '—'}</div>
+            <div class="sess-info"><div class="sess-subj">${s.subject_name||'Тест'}</div><div class="sess-meta">${fmtDate(s.started_at)} · ${MODES[s.mode]||s.mode}</div></div>
+            <div class="sess-score">${s.score??'—'} / ${s.total}</div>
+          </div>`;
+        }).join('') + '</div>';
+      } catch (e) { document.getElementById('up-sessions').innerHTML = `<div class="error">Ошибка: ${esc(e.message)}</div>`; }
+    }
+
+    function closeUserPanel() {
+      document.getElementById('user-panel').classList.remove('visible');
+      if (activeTr) { activeTr.classList.remove('selected'); activeTr = null; }
+      activeUid = null;
+    }
+
+    async function clearUserHistory() {
+      const name = document.getElementById('up-name').textContent;
+      if (!await LS.confirm(`Удалить всю историю тестов пользователя «${name}»?\nЭто действие нельзя отменить.`, { title: 'Очистить историю', confirmText: 'Удалить историю' })) return;
+      try {
+        await LS.adminClearUserSessions(activeUid);
+        await reloadUserPanel(activeUid);
+        loadUsers();
+      } catch (e) { LS.toast('Ошибка очистки истории: ' + e.message, 'error'); }
+    }
+
+    async function toggleBanUser() {
+      const banLbl = document.getElementById('up-ban-label');
+      const isBanning = banLbl.textContent === 'Заблокировать';
+      const name = document.getElementById('up-name').innerHTML.replace(' <svg class="ic" viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>','');
+      const msg = isBanning
+        ? `Заблокировать пользователя «${name}»?\nОн не сможет войти в систему.`
+        : `Разблокировать пользователя «${name}»?`;
+      if (!await LS.confirm(msg, { title: isBanning ? 'Блокировка' : 'Разблокировка', confirmText: isBanning ? 'Заблокировать' : 'Разблокировать' })) return;
+      try {
+        await LS.adminBanUser(activeUid, isBanning);
+        LS.toast(isBanning ? 'Пользователь заблокирован' : 'Пользователь разблокирован', isBanning ? 'warning' : 'success');
+        await reloadUserPanel(activeUid);
+        loadUsers();
+      } catch (e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+    }
+
+    async function confirmDeleteUser() {
+      const name = document.getElementById('up-name').innerHTML.replace(' <svg class="ic" viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>','');
+      if (!await LS.confirm(`Удалить пользователя «${name}» навсегда?\nВсе его данные, тесты и прогресс будут удалены. Это действие нельзя отменить.`, { title: 'Удалить пользователя', confirmText: 'Удалить навсегда' })) return;
+      try {
+        await LS.adminDeleteUser(activeUid);
+        LS.toast('Пользователь удалён', 'success');
+        closeUserPanel();
+        loadUsers();
+      } catch (e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+    }
+
+    let _editUid = null;
+    function closeEditUserModal() {
+      document.getElementById('eu-modal').classList.remove('open');
+      _editUid = null;
+    }
+    function openEditUserModal() {
+      _editUid = activeUid;
+      document.getElementById('eu-name').value     = document.getElementById('up-name').textContent;
+      document.getElementById('eu-email').value    = document.getElementById('up-email').textContent;
+      document.getElementById('eu-password').value = '';
+      document.getElementById('eu-error').textContent = '';
+      document.getElementById('eu-modal').classList.add('open');
+      setTimeout(() => document.getElementById('eu-name').focus(), 80);
+    }
+    async function saveEditUser() {
+      const name     = document.getElementById('eu-name').value.trim();
+      const email    = document.getElementById('eu-email').value.trim();
+      const password = document.getElementById('eu-password').value;
+      const errEl    = document.getElementById('eu-error');
+      errEl.textContent = '';
+      if (!name)  { errEl.textContent = 'Введите имя'; return; }
+      if (!email) { errEl.textContent = 'Введите email'; return; }
+      if (password && password.length < 6) { errEl.textContent = 'Пароль должен быть не менее 6 символов'; return; }
+      const payload = { name, email };
+      if (password) payload.password = password;
+      const btn = document.getElementById('eu-save');
+      btn.disabled = true; btn.textContent = 'Сохранение…';
+      try {
+        await LS.adminUpdateUser(_editUid, payload);
+        closeEditUserModal();
+        await reloadUserPanel(activeUid);
+        loadUsers();
+      } catch (e) {
+        errEl.textContent = 'Ошибка: ' + e.message;
+      } finally {
+        btn.disabled = false; btn.textContent = 'Сохранить';
+      }
+    }
+
+    /* ════════════════════════════════════════════════
+       СЕССИИ
+    ════════════════════════════════════════════════ */
+    let allSessions  = [];
+    let openDrawerId = null;
+
+    async function loadSessions() {
+      const subject = document.getElementById('t-subject').value;
+      document.getElementById('t-body').innerHTML = '<div class="spinner"></div>';
+      openDrawerId = null;
+      try {
+        allSessions = await LS.adminGetSessions({ subject: subject || undefined });
+        renderSessions();
+      } catch (e) {
+        document.getElementById('t-body').innerHTML = `<div class="error">Ошибка: ${esc(e.message)}</div>`;
+      }
+    }
+
+    function sessPctRing(pct) {
+      const pc  = pctClass(pct);
+      const colorMap = {'pct-hi':'var(--green)','pct-mid':'var(--amber)','pct-lo':'var(--pink)'};
+      const color = colorMap[pc] || 'var(--text-3)';
+      const circ = 106.8;
+      const dash = (pct / 100 * circ).toFixed(1);
+      return `<svg class="sess-tl-ring" width="48" height="48" viewBox="0 0 48 48">
+        <circle cx="24" cy="24" r="17" fill="none" stroke="rgba(15,23,42,0.08)" stroke-width="4"/>
+        <circle cx="24" cy="24" r="17" fill="none" stroke="${color}" stroke-width="4"
+          stroke-dasharray="${dash} ${circ}" stroke-dashoffset="26.7" stroke-linecap="round"
+          transform="rotate(-90 24 24)"/>
+        <text x="24" y="28" text-anchor="middle" font-family="Unbounded,sans-serif" font-size="8" font-weight="800" fill="${color}">${pct}%</text>
+      </svg>`;
+    }
+
+    function renderSessions() {
+      const modeF   = document.getElementById('t-mode').value;
+      const searchF = document.getElementById('t-search').value.toLowerCase();
+      const filtered = allSessions.filter(s => {
+        if (modeF && s.mode !== modeF) return false;
+        if (searchF && !s.user_name.toLowerCase().includes(searchF) && !s.user_email.toLowerCase().includes(searchF)) return false;
+        return true;
+      });
+      document.getElementById('t-count').textContent = `${filtered.length} тестов`;
+      if (!filtered.length) {
+        document.getElementById('t-body').innerHTML = '<div class="empty">Нет тестов</div>';
+        return;
+      }
+      // Group by date
+      const groups = {};
+      filtered.forEach(s => {
+        const key = fmtDate(s.started_at);
+        (groups[key] = groups[key] || []).push(s);
+      });
+      document.getElementById('t-body').innerHTML = Object.entries(groups).map(([date, sessions]) =>
+        `<div class="sess-tl-day">${date}</div>
+         <div class="sess-tl-wrap">${sessions.map(s => {
+           const ring = s.percent !== null
+             ? sessPctRing(s.percent)
+             : `<div style="width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-family:'Unbounded',sans-serif;font-size:0.85rem;font-weight:800;color:var(--text-3)">—</div>`;
+           return `<div class="sess-tl-item" id="trow-${s.id}" onclick="toggleDrawer(${s.id})">
+             ${ring}
+             <div class="sess-tl-user">
+               <div class="sess-tl-name">${esc(s.user_name)}</div>
+               <div class="sess-tl-meta">${esc(s.subject_name||'?')} · <span class="mode-badge mode-${s.mode}">${MODES[s.mode]||s.mode}</span></div>
+             </div>
+             <div class="sess-tl-score">${s.score??'—'} / ${s.total}</div>
+             <div class="sess-tl-time">${fmtTime(s.duration_sec)}</div>
+           </div>
+           <div class="sess-tl-drawer" id="tdrawer-${s.id}">
+             <div class="sess-drawer" id="drawer-${s.id}">
+               <div class="sess-drawer-inner" id="drawer-inner-${s.id}"><div class="spinner"></div></div>
+             </div>
+           </div>`;
+         }).join('')}</div>`
+      ).join('');
+    }
+
+    async function toggleDrawer(id) {
+      const drawerEl = document.getElementById('tdrawer-' + id);
+      const drawer   = document.getElementById('drawer-'  + id);
+      const trow     = document.getElementById('trow-'    + id);
+      if (openDrawerId && openDrawerId !== id) {
+        document.getElementById('tdrawer-' + openDrawerId)?.classList.remove('open');
+        document.getElementById('drawer-'  + openDrawerId)?.classList.remove('open');
+        document.getElementById('trow-'    + openDrawerId)?.classList.remove('open');
+      }
+      if (openDrawerId === id) {
+        drawerEl.classList.remove('open'); drawer.classList.remove('open'); trow.classList.remove('open');
+        openDrawerId = null; return;
+      }
+      openDrawerId = id; trow.classList.add('open');
+      drawerEl.classList.add('open');
+      requestAnimationFrame(() => drawer.classList.add('open'));
+      const inner = document.getElementById('drawer-inner-' + id);
+      if (inner.dataset.loaded) return;
+      inner.dataset.loaded = '1';
+      try {
+        const d = await LS.adminGetSessionDetail(id);
+        renderDrawer(inner, d);
+      } catch (e) { inner.innerHTML = `<div class="error">Ошибка: ${esc(e.message)}</div>`; }
+    }
+
+    function renderDrawer(el, d) {
+      const pct     = d.score !== null && d.total ? Math.round((d.score/d.total)*100) : null;
+      const pc      = pctClass(pct);
+      const correct = d.questions.filter(q => q.is_correct).length;
+      const wrong   = d.questions.filter(q => !q.is_correct && q.chosen_option_id).length;
+      const skipped = d.questions.filter(q => !q.chosen_option_id).length;
+      const qHtml   = d.questions.map((q,i) => {
+        const status   = !q.chosen_option_id ? 'skipped' : q.is_correct ? 'correct' : 'wrong';
+        const badgeTxt = { correct:'Верно', wrong:'Неверно', skipped:'Пропущено' }[status];
+        const opts = q.options.map(o => {
+          const isCor = o.is_correct, isCho = o.id === q.chosen_option_id;
+          let cls='', icon='<svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg>';
+          if (isCor) { cls='correct-opt'; icon='<i data-lucide="check" style="width:13px;height:13px"></i>'; }
+          else if (isCho && !isCor) { cls='chosen-wrong'; icon='<i data-lucide="x" style="width:13px;height:13px"></i>'; }
+          return `<div class="qb-opt ${cls}"><span class="qb-opt-icon">${icon}</span>${esc(o.text)}</div>`;
+        }).join('');
+        const expl = q.explanation ? `<div class="qb-expl"><strong>Пояснение:</strong> ${esc(q.explanation)}</div>` : '';
+        return `<div class="qb-item ${status}">
+          <div class="qb-header"><span class="qb-qnum">Вопрос ${i+1}</span><span class="qb-badge ${status}">${badgeTxt}</span><span class="qb-time">${q.time_spent_sec?q.time_spent_sec+' сек':''}</span></div>
+          <div class="qb-text">${esc(q.text)}</div>
+          <div class="qb-opts">${opts}</div>${expl}
+        </div>`;
+      }).join('');
+      el.innerHTML = `
+        <div class="drawer-header">
+          <div>
+            <div style="font-family:'Unbounded',sans-serif;font-weight:800;font-size:0.95rem">${esc(d.user_name)}</div>
+            <div class="drawer-meta">${esc(d.user_email)} · ${d.subject_name||'?'} · ${MODES[d.mode]||d.mode} · ${fmtDate(d.started_at)}</div>
+          </div>
+          <div class="drawer-score ${pc}">${pct !== null ? pct+'%' : '—'}</div>
+          <div style="display:flex;gap:20px;margin-left:auto;text-align:center">
+            <div><div style="font-family:'Unbounded',sans-serif;color:var(--green);font-weight:700">${correct}</div><div style="font-size:0.72rem;color:var(--text-3)">Верно</div></div>
+            <div><div style="font-family:'Unbounded',sans-serif;color:var(--pink);font-weight:700">${wrong}</div><div style="font-size:0.72rem;color:var(--text-3)">Неверно</div></div>
+            <div><div style="font-family:'Unbounded',sans-serif;color:var(--text-3);font-weight:700">${skipped}</div><div style="font-size:0.72rem;color:var(--text-3)">Пропущено</div></div>
+            <div><div style="font-family:'Unbounded',sans-serif;color:var(--text-2);font-weight:700">${fmtTime(d.duration_sec)}</div><div style="font-size:0.72rem;color:var(--text-3)">Время</div></div>
+          </div>
+        </div>
+        <div class="qb-list">${qHtml||'<div class="empty">Вопросы не найдены</div>'}</div>`;
+      renderMath(el);
+      if (window.lucide) lucide.createIcons();
+    }
+
+    /* ════════════════════════════════════════════════
+       ТЕСТЫ (ШАБЛОНЫ)
+    ════════════════════════════════════════════════ */
+    let allTests = [];
+    let openTstId = null;
+    let editingTstId = null;
+    const DIFF_LABELS = { 1:'Лёгкий', 2:'Средний', 3:'Сложный' };
+    const TYPE_LABELS = { single:'Один', multi:'Несколько', true_false:'Верно/Нет', short_answer:'Краткий', matching:'Сопоставление' };
+
+    async function loadTests() {
+      const subj = document.getElementById('tst-subj').value;
+      const wrap = document.getElementById('tst-list-wrap');
+      wrap.innerHTML = '<div class="spinner"></div>';
+      try {
+        allTests = await LS.getTests(subj || null);
+        renderTests();
+      } catch (e) {
+        wrap.innerHTML = `<div class="error">Ошибка: ${esc(e.message)}</div>`;
+      }
+    }
+
+    function renderTests() {
+      const search = document.getElementById('tst-search').value.toLowerCase();
+      const filtered = search ? allTests.filter(t => t.title.toLowerCase().includes(search)) : allTests;
+      document.getElementById('tst-count').textContent = `${filtered.length} тестов`;
+      const wrap = document.getElementById('tst-list-wrap');
+      if (!filtered.length) { wrap.innerHTML = '<div class="empty">Тестов не найдено</div>'; return; }
+      const SUBJ_N = { bio:'Биология', chem:'Химия', math:'Математика', phys:'Физика' };
+      wrap.innerHTML = `<div class="q-list">${filtered.map(t => `
+        <div class="q-card" id="tstcard-${t.id}">
+          <div class="q-card-head">
+            <span class="q-card-num">#${t.id}</span>
+            <div class="q-card-body" onclick="toggleTstDrawer(${t.id})">
+              <div class="q-card-text">${esc(t.title)}</div>
+              <div class="q-card-meta">
+                <span class="q-badge q-badge-subj">${SUBJ_N[t.subject_slug]||t.subject_slug}</span>
+                <span style="font-size:0.75rem;color:var(--text-3)">${t.question_count} вопросов</span>
+                <span style="font-size:0.75rem;color:var(--text-3)">${fmtDate(t.created_at)}</span>
+                ${t.description ? `<span style="font-size:0.75rem;color:var(--text-2)">${esc(t.description)}</span>` : ''}
+              </div>
+            </div>
+            <div class="q-card-actions">
+              <button class="btn-edit-q" onclick="editTst(${t.id})">Изменить</button>
+              <button class="btn-del-q"  onclick="deleteTst(${t.id})" title="Удалить"><i data-lucide="x" style="width:14px;height:14px"></i></button>
+            </div>
+          </div>
+          <div class="tst-drawer" id="tstdrawer-${t.id}" style="display:none">
+            <div class="tst-drawer-inner" id="tstdinner-${t.id}">
+              <div class="spinner"></div>
+            </div>
+          </div>
+        </div>`).join('')}</div>`;
+      if (window.lucide) lucide.createIcons();
+    }
+
+    async function toggleTstDrawer(id) {
+      const drawer = document.getElementById('tstdrawer-' + id);
+      if (!drawer) return;
+      if (openTstId && openTstId !== id) {
+        const old = document.getElementById('tstdrawer-' + openTstId);
+        if (old) old.style.display = 'none';
+      }
+      if (openTstId === id) {
+        drawer.style.display = 'none'; openTstId = null; return;
+      }
+      openTstId = id;
+      drawer.style.display = '';
+      await renderTstDrawer(id);
+    }
+
+    async function renderTstDrawer(id) {
+      const inner = document.getElementById('tstdinner-' + id);
+      if (!inner) return;
+      inner.innerHTML = '<div class="spinner"></div>';
+      try {
+        const [t, subjectQs] = await Promise.all([
+          LS.getTest(id),
+          LS.getQuestions(
+            (_tstPickerCache[id]?.subject_slug) || allTests.find(x => x.id === id)?.subject_slug || '',
+            null, 'date_asc'
+          ).catch(() => []),
+        ]);
+
+        const inIds = new Set(t.questions.map(q => q.id));
+        // Update cache so filterTstPicker can filter locally
+        _tstPickerCache[id] = { subjectQs, inIds, subject_slug: t.subject_slug };
+
+        inner.innerHTML = `
+          <div class="tst-cols">
+            <div>
+              <div class="tst-panel-title">Вопросы в тесте (${t.questions.length})</div>
+              <div class="tst-q-list" id="tstql-${id}">${renderTstQList(t.questions, id)}</div>
+            </div>
+            <div>
+              <div class="tst-panel-title">Добавить вопросы</div>
+              <input class="tst-search" id="tstps-${id}" placeholder="Поиск вопросов…" oninput="filterTstPicker(${id})" />
+              <div class="tst-q-list" id="tstpicker-${id}">${renderTstPicker(subjectQs, inIds, id)}</div>
+            </div>
+          </div>`;
+        renderMath(inner);
+        if (window.lucide) lucide.createIcons();
+      } catch (e) {
+        inner.innerHTML = `<div class="error">Ошибка: ${esc(e.message)}</div>`;
+      }
+    }
+
+    function qTypeBadge(type) {
+      const MAP = { single:'Один', multi:'Несколько', true_false:'Верно/Нет', short_answer:'Ответ', matching:'Сопост.' };
+      const CLR = { single:'rgba(155,93,229,0.12)', multi:'rgba(6,214,224,0.12)', true_false:'rgba(255,179,71,0.14)', short_answer:'rgba(6,214,100,0.12)', matching:'rgba(241,91,181,0.10)' };
+      const TXT = { single:'var(--violet)', multi:'#05aab3', true_false:'var(--amber)', short_answer:'var(--green)', matching:'var(--pink)' };
+      return `<span class="tst-q-badge" style="background:${CLR[type]||'rgba(15,23,42,0.06)'};color:${TXT[type]||'var(--text-3)'}">${MAP[type]||type}</span>`;
+    }
+
+    function qOptsPreview(q) {
+      if (q.type === 'short_answer') return q.correct_text ? `<span class="tst-q-opts">Ответ: ${esc(q.correct_text)}</span>` : '';
+      if (!q.options?.length) return '';
+      const correct = q.options.filter(o => o.is_correct).map(o => esc(o.text)).join(', ');
+      return `<span class="tst-q-opts"><i data-lucide="check" style="width:12px;height:12px;vertical-align:-2px"></i> ${correct}</span>`;
+    }
+
+    function renderTstQList(questions, tid) {
+      if (!questions.length) return '<div class="tst-empty">Вопросов нет. Добавьте справа <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></div>';
+      return questions.map((q, i) => `
+        <div class="tst-q-item" id="tstqitem-${tid}-${q.id}">
+          <span class="tst-q-num">${i+1}.</span>
+          <div class="tst-q-body">
+            <span class="tst-q-text">${esc(q.text)}</span>
+            <div class="tst-q-meta">
+              <span class="tst-q-badge diff-${q.difficulty}">${DIFF_LABELS[q.difficulty]||q.difficulty}</span>
+              ${qTypeBadge(q.type)}
+              ${qOptsPreview(q)}
+            </div>
+          </div>
+          <button class="btn-tst-rem" onclick="tstRemoveQ(${tid},${q.id})" title="Убрать">−</button>
+        </div>`).join('');
+    }
+
+    function renderTstPicker(questions, inIds, tid) {
+      if (!questions.length) return '<div class="tst-empty">Вопросов нет в этом предмете</div>';
+      return questions.map(q => {
+        const added = inIds.has(q.id);
+        return `<div class="tst-q-item" id="tstpick-${tid}-${q.id}">
+          <div class="tst-q-body">
+            <span class="tst-q-text">${esc(q.text)}</span>
+            <div class="tst-q-meta">
+              <span class="tst-q-badge diff-${q.difficulty}">${DIFF_LABELS[q.difficulty]||''}</span>
+              ${qTypeBadge(q.type)}
+              ${qOptsPreview(q)}
+            </div>
+          </div>
+          <button class="btn-tst-add${added?' added':''}" id="tstbtn-${tid}-${q.id}"
+                  title="${added?'Уже в тесте':'Добавить'}" ${added?'disabled':'onclick="tstAddQ('+tid+','+q.id+')"'}>${added?'<i data-lucide="check" style="width:14px;height:14px"></i>':'+'}</button>
+        </div>`;
+      }).join('');
+    }
+
+    // Cache for picker: { tid: { subjectQs:[], inIds: Set } }
+    const _tstPickerCache = {};
+
+    async function filterTstPicker(tid) {
+      const search = document.getElementById('tstps-'+tid)?.value.toLowerCase() || '';
+      const cache  = _tstPickerCache[tid];
+      if (!cache) return; // not loaded yet
+      const filtered = search
+        ? cache.subjectQs.filter(q => q.text.toLowerCase().includes(search))
+        : cache.subjectQs;
+      const picker = document.getElementById('tstpicker-'+tid);
+      if (picker) { picker.innerHTML = renderTstPicker(filtered, cache.inIds, tid); renderMath(picker); if(window.lucide)lucide.createIcons(); }
+    }
+
+    async function tstAddQ(tid, qid) {
+      const btn = document.getElementById(`tstbtn-${tid}-${qid}`);
+      if (btn) { btn.disabled = true; btn.textContent = '…'; }
+      try {
+        await LS.addQuestionsToTest(tid, [qid]);
+        const t = allTests.find(x => x.id === tid);
+        if (t) t.question_count++;
+        renderTests();
+        openTstId = tid;
+        document.getElementById('tstdrawer-' + tid).style.display = '';
+        await renderTstDrawer(tid);
+      } catch (e) { LS.toast('Ошибка: ' + e.message, 'error'); if (btn) { btn.disabled=false; btn.textContent='+'; } }
+    }
+
+    async function tstRemoveQ(tid, qid) {
+      try {
+        await LS.removeQFromTest(tid, qid);
+        const t = allTests.find(x => x.id === tid);
+        if (t) t.question_count = Math.max(0, t.question_count - 1);
+        renderTests();
+        openTstId = tid;
+        document.getElementById('tstdrawer-' + tid).style.display = '';
+        await renderTstDrawer(tid);
+      } catch (e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+    }
+
+    /* ── Test modal ── */
+    let _tstShowAnswers = true;
+    function setTstShowAnswers(val) {
+      _tstShowAnswers = val;
+      document.getElementById('tstf-show-yes').classList.toggle('active',  val);
+      document.getElementById('tstf-show-no').classList.toggle('active', !val);
+    }
+
+    function openTstModal(t = null) {
+      editingTstId = t ? t.id : null;
+      document.getElementById('tst-modal-title').textContent = t ? `Редактировать: ${t.title}` : 'Создать тест';
+      document.getElementById('tstf-title').value   = t?.title || '';
+      document.getElementById('tstf-subject').value = t?.subject_slug || '';
+      document.getElementById('tstf-desc').value    = t?.description || '';
+      document.getElementById('tstf-time').value    = t?.time_limit || '';
+      document.getElementById('tstf-error').textContent = '';
+      setTstShowAnswers(t ? (t.show_answers !== 0) : true);
+      document.getElementById('tst-modal').classList.add('open');
+      setTimeout(() => document.getElementById('tstf-title').focus(), 80);
+    }
+
+    function editTst(id) {
+      const t = allTests.find(x => x.id === id);
+      if (t) openTstModal(t);
+    }
+
+    function closeTstModal() {
+      document.getElementById('tst-modal').classList.remove('open');
+      editingTstId = null;
+    }
+
+    async function saveTst() {
+      const title       = document.getElementById('tstf-title').value.trim();
+      const subject_slug= document.getElementById('tstf-subject').value;
+      const description = document.getElementById('tstf-desc').value.trim();
+      const errEl       = document.getElementById('tstf-error');
+      errEl.textContent = '';
+      if (!title)        { errEl.textContent = 'Введите название'; return; }
+      if (!subject_slug) { errEl.textContent = 'Выберите предмет'; return; }
+
+      const btn = document.getElementById('tstf-save');
+      btn.disabled = true; btn.textContent = 'Сохранение…';
+      const show_answers = _tstShowAnswers ? 1 : 0;
+      const timeVal = parseInt(document.getElementById('tstf-time').value, 10);
+      const time_limit = timeVal >= 1 ? Math.min(600, timeVal) : null;
+      try {
+        if (editingTstId) {
+          await LS.updateTest(editingTstId, { title, subject_slug, description: description||null, show_answers, time_limit });
+          const idx = allTests.findIndex(x => x.id === editingTstId);
+          if (idx !== -1) Object.assign(allTests[idx], { title, subject_slug, description, show_answers, time_limit });
+        } else {
+          const { id } = await LS.createTest({ title, subject_slug, description: description||null, show_answers, time_limit });
+          allTests.unshift({ id, title, subject_slug, description, question_count: 0, created_at: new Date().toISOString() });
+          closeTstModal();
+          renderTests();
+          // Auto-open drawer so teacher can immediately add questions
+          openTstId = id;
+          document.getElementById('tstdrawer-' + id).style.display = '';
+          await renderTstDrawer(id);
+          return;
+        }
+        closeTstModal();
+        renderTests();
+      } catch (e) {
+        errEl.textContent = 'Ошибка: ' + e.message;
+      } finally {
+        btn.disabled = false; btn.textContent = 'Сохранить';
+      }
+    }
+
+    async function deleteTst(id) {
+      const t = allTests.find(x => x.id === id);
+      if (!await LS.confirm(`Удалить тест «${t?.title}»?`, { title: 'Удалить тест', confirmText: 'Удалить' })) return;
+      try {
+        await LS.deleteTest(id);
+        allTests = allTests.filter(x => x.id !== id);
+        if (openTstId === id) openTstId = null;
+        renderTests();
+      } catch (e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+    }
+
+    /* ════════════════════════════════════════════════
+       ЗАДАНИЯ
+    ════════════════════════════════════════════════ */
+    let allAssignments  = [];
+    let editingAId      = null;
+    const SUBJ_NAMES    = { bio:'Биология', chem:'Химия', math:'Математика', phys:'Физика' };
+
+    async function loadAssignments() {
+      document.getElementById('a-body').innerHTML = '<div class="spinner"></div>';
+      try {
+        allAssignments = await LS.teacherAssignments();
+        renderAssignments();
+      } catch (e) {
+        document.getElementById('a-body').innerHTML = `<div class="error">Ошибка: ${esc(e.message)}</div>`;
+      }
+    }
+
+    const SUBJ_COLORS_A = { bio:'#9B5DE5', chem:'#06D6A0', math:'#06B6D4', phys:'#F59E0B' };
+    const SUBJ_ICONS_A  = { bio:'dna', chem:'flask-conical', math:'calculator', phys:'zap' };
+    let _aFilter = 'all';
+
+    function setAFilter(f) {
+      _aFilter = f;
+      document.querySelectorAll('.a-f-chip').forEach(c =>
+        c.classList.toggle('active', c.textContent.trim() === {all:'Все',active:'Активные',overdue:'Просрочены',done:'Завершены'}[f])
+      );
+      renderAssignments();
+    }
+
+    function aClassify(a) {
+      const pct = a.total_members ? Math.round(a.completed_count / a.total_members * 100) : null;
+      if (pct === 100) return 'done';
+      if (a.deadline && new Date(a.deadline) < new Date()) return 'overdue';
+      return 'active';
+    }
+
+    function renderAssignments() {
+      const subjF   = document.getElementById('a-subject').value;
+      const searchF = document.getElementById('a-search').value.toLowerCase();
+      const sortF   = document.getElementById('a-sort')?.value || 'date';
+
+      let list = allAssignments.filter(a => {
+        if (subjF   && a.subject_slug !== subjF) return false;
+        if (searchF && !a.title.toLowerCase().includes(searchF)) return false;
+        if (_aFilter === 'active'  && aClassify(a) !== 'active')  return false;
+        if (_aFilter === 'overdue' && aClassify(a) !== 'overdue') return false;
+        if (_aFilter === 'done'    && aClassify(a) !== 'done')    return false;
+        return true;
+      });
+
+      // Sort
+      list = [...list].sort((a, b) => {
+        if (sortF === 'deadline') {
+          const da = a.deadline ? new Date(a.deadline) : new Date(9e15);
+          const db = b.deadline ? new Date(b.deadline) : new Date(9e15);
+          return da - db;
+        }
+        if (sortF === 'progress_asc') {
+          const pa = a.total_members ? a.completed_count / a.total_members : 0;
+          const pb = b.total_members ? b.completed_count / b.total_members : 0;
+          return pa - pb;
+        }
+        if (sortF === 'progress_desc') {
+          const pa = a.total_members ? a.completed_count / a.total_members : 0;
+          const pb = b.total_members ? b.completed_count / b.total_members : 0;
+          return pb - pa;
+        }
+        return 0; // date: keep server order
+      });
+
+      // Summary chips
+      const all     = allAssignments;
+      const nActive  = all.filter(a => aClassify(a) === 'active').length;
+      const nOverdue = all.filter(a => aClassify(a) === 'overdue').length;
+      const nDone    = all.filter(a => aClassify(a) === 'done').length;
+      document.getElementById('a-summary').innerHTML = [
+        `<span class="a-sum-chip s-all">Всего: ${all.length}</span>`,
+        nActive  ? `<span class="a-sum-chip s-active">Активных: ${nActive}</span>`    : '',
+        nOverdue ? `<span class="a-sum-chip s-overdue">Просрочено: ${nOverdue}</span>` : '',
+        nDone    ? `<span class="a-sum-chip s-done">Завершено: ${nDone}</span>`        : '',
+      ].join('');
+
+      document.getElementById('a-count').textContent = `${list.length} заданий`;
+      const container = document.getElementById('a-body');
+
+      if (!list.length) {
+        container.innerHTML = '<div class="empty">Заданий нет</div>';
+        return;
+      }
+
+      const now = new Date();
+      container.innerHTML = list.map(a => {
+        const pct      = a.total_members ? Math.round(a.completed_count / a.total_members * 100) : null;
+        const cls      = aClassify(a);
+        const rowCls   = cls === 'overdue' ? 'a-overdue' : cls === 'done' ? 'a-done' : '';
+        const sColor   = SUBJ_COLORS_A[a.subject_slug] || '#9B5DE5';
+        const dlMs     = a.deadline ? new Date(a.deadline) - now : Infinity;
+        const isUrgent = cls === 'active' && dlMs > 0 && dlMs < 24 * 3600 * 1000;
+
+        const dl = a.deadline
+          ? new Date(a.deadline).toLocaleDateString('ru', {day:'numeric', month:'short'})
+          : null;
+
+        const targetStr = a.target_user_id
+          ? esc(a.target_user_name || 'Ученик')
+          : esc(a.class_name || '—');
+
+        const metaParts = [
+          targetStr,
+          SUBJ_NAMES[a.subject_slug] || a.subject_slug,
+          `<span class="mode-badge mode-${a.mode}">${MODES[a.mode]||a.mode}</span>`,
+          a.count + ' вопр.',
+          dl ? `до ${dl}` : null,
+          isUrgent  ? `<span class="a-tag-urgent"><i data-lucide="zap" style="width:10px;height:10px;vertical-align:-1px"></i> срочно</span>` : null,
+          cls === 'overdue' ? `<span class="a-tag-over">просрочено</span>` : null,
+        ].filter(Boolean);
+
+        const barColor = pct >= 75 ? '#06D6A0' : pct >= 40 ? '#F59E0B' : '#F15BB5';
+        const pctLabel = pct !== null ? `${pct}%` : '—';
+
+        return `<div class="a-row ${rowCls}${isUrgent ? ' a-urgent' : ''}" style="--ac:${sColor}">
+          <div class="a-icon" style="background:${sColor}18;color:${sColor}"><i data-lucide="${SUBJ_ICONS_A[a.subject_slug]||'file-text'}" style="width:18px;height:18px"></i></div>
+          <div class="a-main">
+            <div class="a-title">${esc(a.title)}</div>
+            <div class="a-meta">${metaParts.join(' · ')}</div>
+          </div>
+          <div class="a-prog">
+            <div class="a-prog-nums">
+              <span>${a.completed_count} / ${a.total_members} сдали</span>
+              <span class="a-prog-pct ${pctClass(pct)}">${pctLabel}</span>
+            </div>
+            <div class="a-prog-bar">
+              <div class="a-prog-fill" style="width:${pct||0}%;background:${barColor}"></div>
+            </div>
+          </div>
+          <div class="a-actions">
+            <button class="btn-edit-q" onclick="openAModal(${a.id})">Изменить</button>
+            <button class="btn-del-q"  onclick="deleteAsgn(${a.id})"><i data-lucide="x" style="width:14px;height:14px"></i></button>
+          </div>
+        </div>`;
+      }).join('');
+      if (window.lucide) lucide.createIcons();
+    }
+
+    let _afSrc = 'random';
+    let _afLoadedTests = [];
+
+    function setAfSrc(src) {
+      _afSrc = src;
+      document.querySelectorAll('[data-afsrc]').forEach(b => b.classList.toggle('active', b.dataset.afsrc === src));
+      document.getElementById('af-random-fields').style.display = src === 'random' ? '' : 'none';
+      document.getElementById('af-test-fields').style.display   = src === 'test'   ? '' : 'none';
+    }
+
+    async function openAModal(id) {
+      const a = allAssignments.find(x => x.id === id);
+      if (!a) return;
+      editingAId = id;
+      document.getElementById('a-modal-title').textContent = `Редактировать: ${a.title}`;
+      document.getElementById('af-title').value    = a.title;
+      document.getElementById('af-deadline').value = a.deadline ? a.deadline.split('T')[0] : '';
+      document.getElementById('af-error').textContent = '';
+
+      // Load tests for the dropdown
+      const testSel = document.getElementById('af-test');
+      testSel.innerHTML = '<option value="">Загрузка…</option>';
+      try {
+        _afLoadedTests = await LS.getTests();
+        testSel.innerHTML = _afLoadedTests.length
+          ? '<option value="">— выберите тест —</option>' + _afLoadedTests.map(t => `<option value="${t.id}">${esc(t.title)} (${t.question_count} вопр.)</option>`).join('')
+          : '<option value="">Нет тестов</option>';
+      } catch {
+        testSel.innerHTML = '<option value="">Ошибка загрузки</option>';
+        _afLoadedTests = [];
+      }
+
+      if (a.test_id) {
+        setAfSrc('test');
+        testSel.value = a.test_id;
+        document.getElementById('af-mode-test').value = a.mode;
+      } else {
+        setAfSrc('random');
+        document.getElementById('af-subject').value = a.subject_slug;
+        document.getElementById('af-mode').value    = a.mode;
+        document.getElementById('af-count').value   = a.count;
+      }
+
+      document.getElementById('a-modal').classList.add('open');
+      setTimeout(() => document.getElementById('af-title').focus(), 80);
+    }
+
+    function closeAModal() {
+      document.getElementById('a-modal').classList.remove('open');
+      editingAId = null;
+    }
+
+    async function saveAssignment() {
+      const title    = document.getElementById('af-title').value.trim();
+      const deadline = document.getElementById('af-deadline').value || null;
+      const errEl    = document.getElementById('af-error');
+      errEl.textContent = '';
+      if (!title) { errEl.textContent = 'Введите название'; return; }
+
+      let payload = { title, deadline };
+
+      if (_afSrc === 'test') {
+        const test_id = document.getElementById('af-test').value;
+        const mode    = document.getElementById('af-mode-test').value;
+        if (!test_id) { errEl.textContent = 'Выберите тест'; return; }
+        const testObj = _afLoadedTests.find(t => t.id === Number(test_id));
+        if (testObj && testObj.question_count === 0) { errEl.textContent = 'В выбранном тесте нет вопросов'; return; }
+        payload = { ...payload, test_id: Number(test_id), mode };
+      } else {
+        const subject_slug = document.getElementById('af-subject').value;
+        const mode         = document.getElementById('af-mode').value;
+        const count        = Number(document.getElementById('af-count').value);
+        if (!subject_slug)       { errEl.textContent = 'Выберите предмет'; return; }
+        if (!count || count < 1) { errEl.textContent = 'Введите количество вопросов'; return; }
+        payload = { ...payload, subject_slug, mode, count, test_id: null };
+      }
+
+      const btn = document.getElementById('af-save');
+      btn.disabled = true; btn.textContent = 'Сохранение…';
+      try {
+        await LS.updateAssignment(editingAId, payload);
+        const idx = allAssignments.findIndex(x => x.id === editingAId);
+        if (idx !== -1) Object.assign(allAssignments[idx], payload);
+        closeAModal();
+        renderAssignments();
+      } catch (e) {
+        errEl.textContent = 'Ошибка: ' + e.message;
+      } finally {
+        btn.disabled = false; btn.textContent = 'Сохранить';
+      }
+    }
+
+    /* ─── Create assignment modal ─── */
+    let _acSrc    = 'random'; // 'random' | 'test'
+    let _acTarget = 'class';  // 'class' | 'user'
+
+    let _acFileId = null, _acAllFiles = null;
+    let _acStudentId = null, _acAllStudents = null;
+
+    function setAcTarget(t) {
+      _acTarget = t;
+      document.querySelectorAll('[data-actgt]').forEach(b => b.classList.toggle('active', b.dataset.actgt === t));
+      document.getElementById('acf-class-field').style.display = t === 'class' ? '' : 'none';
+      document.getElementById('acf-user-field').style.display  = t === 'user'  ? '' : 'none';
+      if (t === 'user' && !_acAllStudents) loadAcStudents();
+    }
+
+    async function loadAcStudents() {
+      const drop = document.getElementById('acf-student-drop');
+      drop.innerHTML = '<div style="padding:8px 12px;font-size:13px;color:#9ca3af">Загрузка…</div>';
+      drop.style.display = '';
+      try {
+        _acAllStudents = await LS.getStudentsList();
+        openAcStudentDrop();
+      } catch(e) {
+        _acAllStudents = [];
+        drop.innerHTML = `<div style="padding:8px 12px;font-size:13px;color:#ef4444">Ошибка загрузки: ${e.message}</div>`;
+      }
+    }
+
+    function filterAcStudents(q) {
+      openAcStudentDrop(q);
+    }
+
+    function openAcStudentDrop(q) {
+      const drop = document.getElementById('acf-student-drop');
+      if (_acAllStudents === null) { loadAcStudents(); return; }
+      const list = _acAllStudents;
+      const term = (q !== undefined ? q : document.getElementById('acf-student-search').value).toLowerCase().trim();
+      const filtered = term ? list.filter(s => s.name.toLowerCase().includes(term) || s.email.toLowerCase().includes(term)) : list;
+      if (!filtered.length) {
+        drop.innerHTML = '<div style="padding:8px 12px;font-size:13px;color:#9ca3af">Нет учеников</div>';
+        drop.style.display = '';
+        return;
+      }
+      drop.innerHTML = filtered.slice(0, 50).map(s =>
+        `<div style="padding:8px 12px;cursor:pointer;border-bottom:1px solid #f3f4f6;font-size:13px" data-id="${s.id}" data-name="${esc(s.name)}" data-email="${esc(s.email)}" onmousedown="selectAcStudent(+this.dataset.id,this.dataset.name,this.dataset.email)" onmouseover="this.style.background='#f9fafb'" onmouseout="this.style.background=''">${esc(s.name)} <span style="color:#9ca3af">${esc(s.email)}</span></div>`
+      ).join('');
+      drop.style.display = '';
+    }
+
+    function closeAcStudentDrop() {
+      document.getElementById('acf-student-drop').style.display = 'none';
+    }
+
+    function selectAcStudent(id, name, email) {
+      _acStudentId = id;
+      document.getElementById('acf-student-search').value = name;
+      document.getElementById('acf-student-selected').textContent = `${name} (${email})`;
+      document.getElementById('acf-student-selected').style.display = '';
+      closeAcStudentDrop();
+    }
+
+    function setAcSrc(src) {
+      _acSrc = src;
+      document.querySelectorAll('[data-src]').forEach(b => b.classList.toggle('active', b.dataset.src === src));
+      document.getElementById('acf-random-fields').style.display = src === 'random' ? '' : 'none';
+      document.getElementById('acf-test-fields').style.display   = src === 'test'   ? '' : 'none';
+      document.getElementById('acf-file-fields').style.display   = src === 'file'   ? '' : 'none';
+      if (src === 'file' && !_acAllFiles) loadAcFiles();
+    }
+
+    async function loadAcFiles() {
+      try {
+        _acAllFiles = await LS.getFiles();
+        renderAcFiles('');
+      } catch { _acAllFiles = []; }
+    }
+
+    function renderAcFiles(q) {
+      const el = document.getElementById('acf-file-list');
+      if (!_acAllFiles) { el.innerHTML = '<div style="padding:10px;color:#8898AA;font-size:.82rem;text-align:center">Загрузка…</div>'; return; }
+      const lq = q.toLowerCase();
+      const items = q ? _acAllFiles.filter(f => (f.title||'').toLowerCase().includes(lq)) : _acAllFiles;
+      const SUBJ = { bio:'Биология', chem:'Химия', math:'Математика', phys:'Физика' };
+      if (!items.length) { el.innerHTML = '<div style="padding:10px;color:#8898AA;font-size:.82rem;text-align:center">Нет файлов</div>'; return; }
+      el.innerHTML = items.map(f => `
+        <div onclick="selectAcFile(${f.id},'${esc(f.title||'Файл')}','${f.subject_slug||''}')"
+             style="padding:9px 12px;cursor:pointer;border-bottom:1px solid rgba(15,23,42,0.07);display:flex;align-items:center;gap:8px;${_acFileId===f.id?'background:rgba(155,93,229,0.08);':''} transition:background .15s">
+          <div style="flex:1">
+            <div style="font-size:.84rem;font-weight:600">${esc(f.title||'Файл')}</div>
+            <div style="font-size:.74rem;color:#8898AA">${SUBJ[f.subject_slug]||f.subject_slug||''}</div>
+          </div>
+          ${_acFileId===f.id ? '<span style="color:var(--violet)"><i data-lucide="check" style="width:15px;height:15px"></i></span>' : ''}
+        </div>`).join('');
+      if (window.lucide) lucide.createIcons();
+    }
+
+    function filterAcFiles(q) { renderAcFiles(q); }
+
+    function selectAcFile(id, title, subject_slug) {
+      _acFileId = id;
+      renderAcFiles(document.getElementById('acf-file-search').value);
+      const sel = document.getElementById('acf-file-selected');
+      sel.textContent = 'Выбран: ' + title;
+      sel.style.display = '';
+    }
+
+    async function openCreateAModal() {
+      _acSrc = 'random'; _acTarget = 'class'; _acFileId = null; _acStudentId = null; _acAllStudents = null;
+      setAcSrc('random');
+      setAcTarget('class');
+      loadAcStudents(); // preload students so search is ready
+      document.getElementById('acf-title').value          = '';
+      document.getElementById('acf-subject').value         = '';
+      document.getElementById('acf-mode').value            = 'exam';
+      document.getElementById('acf-mode-test').value       = 'exam';
+      document.getElementById('acf-count').value           = '25';
+      document.getElementById('acf-deadline').value        = '';
+      document.getElementById('acf-student-search').value   = '';
+      document.getElementById('acf-student-selected').style.display = 'none';
+      _acStudentId = null;
+      document.getElementById('acf-error').textContent     = '';
+      document.getElementById('acf-file-search').value     = '';
+      document.getElementById('acf-file-selected').style.display = 'none';
+
+      // load classes and tests in parallel
+      const [clsSel, testSel] = [document.getElementById('acf-class'), document.getElementById('acf-test')];
+      clsSel.innerHTML = '<option value="">Загрузка…</option>';
+      testSel.innerHTML = '<option value="">Загрузка…</option>';
+
+      const [classesP, testsP] = await Promise.allSettled([LS.getClasses(), LS.getTests()]);
+
+      if (classesP.status === 'fulfilled') {
+        const classes = classesP.value;
+        clsSel.innerHTML = classes.length
+          ? '<option value="">— выберите класс —</option>' + classes.map(c => `<option value="${c.id}">${esc(c.name)} (${c.member_count} уч.)</option>`).join('')
+          : '<option value="">Нет классов — создайте класс</option>';
+      } else {
+        clsSel.innerHTML = `<option value="">Ошибка загрузки классов</option>`;
+      }
+
+      if (testsP.status === 'fulfilled') {
+        const tests = testsP.value;
+        testSel.innerHTML = tests.length
+          ? '<option value="">— выберите тест —</option>' + tests.map(t => `<option value="${t.id}">${esc(t.title)} (${t.question_count} вопр.)</option>`).join('')
+          : '<option value="">Нет тестов — создайте тест</option>';
+      } else {
+        testSel.innerHTML = `<option value="">Ошибка загрузки тестов</option>`;
+      }
+
+      document.getElementById('ac-modal').classList.add('open');
+      setTimeout(() => document.getElementById('acf-title').focus(), 80);
+    }
+
+    function closeCreateAModal() {
+      document.getElementById('ac-modal').classList.remove('open');
+    }
+
+    async function saveNewAssignment() {
+      const title    = document.getElementById('acf-title').value.trim();
+      const deadline = document.getElementById('acf-deadline').value || null;
+      const errEl    = document.getElementById('acf-error');
+      errEl.textContent = '';
+      if (!title) { errEl.textContent = 'Введите название'; return; }
+
+      let payload = { title, deadline };
+
+      if (_acSrc === 'file') {
+        if (!_acFileId) { errEl.textContent = 'Выберите файл из библиотеки'; return; }
+        const f = _acAllFiles.find(x => x.id === _acFileId);
+        payload = { ...payload, file_id: _acFileId, subject_slug: f?.subject_slug || 'bio', mode: 'exam', count: 1 };
+      } else if (_acSrc === 'test') {
+        const test_id = document.getElementById('acf-test').value;
+        const mode    = document.getElementById('acf-mode-test').value;
+        if (!test_id) { errEl.textContent = 'Выберите тест'; return; }
+        const selOpt = document.querySelector(`#acf-test option[value="${test_id}"]`);
+        if (selOpt && selOpt.textContent.includes('(0 вопр.)')) { errEl.textContent = 'В выбранном тесте нет вопросов. Добавьте вопросы во вкладке «Тесты».'; return; }
+        payload = { ...payload, test_id: Number(test_id), mode };
+      } else {
+        const subject_slug = document.getElementById('acf-subject').value;
+        const mode         = document.getElementById('acf-mode').value;
+        const count        = Number(document.getElementById('acf-count').value);
+        if (!subject_slug) { errEl.textContent = 'Выберите предмет'; return; }
+        if (!count || count < 1) { errEl.textContent = 'Укажите количество вопросов'; return; }
+        payload = { ...payload, subject_slug, mode, count };
+      }
+
+      const btn = document.getElementById('acf-save');
+      btn.disabled = true; btn.textContent = 'Создание…';
+      try {
+        if (_acTarget === 'user') {
+          if (!_acStudentId) { errEl.textContent = 'Выберите ученика из списка'; btn.disabled=false; btn.textContent='Создать'; return; }
+          await LS.createDirectAssignment({ ...payload, student_id: _acStudentId });
+        } else {
+          const class_id = document.getElementById('acf-class').value;
+          if (!class_id) { errEl.textContent = 'Выберите класс'; btn.disabled=false; btn.textContent='Создать'; return; }
+          await LS.createAssignment(class_id, payload);
+        }
+        closeCreateAModal();
+        loadAssignments();
+      } catch (e) {
+        errEl.textContent = 'Ошибка: ' + e.message;
+      } finally {
+        btn.disabled = false; btn.textContent = 'Создать';
+      }
+    }
+
+    async function deleteAsgn(id) {
+      const a = allAssignments.find(x => x.id === id);
+      if (!await LS.confirm(`Удалить задание «${a?.title}»?\nВсе связанные сессии будут удалены.`, { title: 'Удалить задание', confirmText: 'Удалить' })) return;
+      try {
+        await LS.deleteAssignment(id);
+        allAssignments = allAssignments.filter(x => x.id !== id);
+        renderAssignments();
+      } catch (e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+    }
+
+    /* ════════════════════════════════════════════════
+       ДОСТУПНЫЕ ТЕСТЫ — настройка предметов
+    ════════════════════════════════════════════════ */
+    let _subjConfigInited = false;
+    const SC_MODES = { exam: 'Экзамен', practice: 'Пробный тест', topic: 'По теме', random: 'Случайный' };
+    const SC_ICONS  = { bio:'dna', chem:'flask-conical', math:'calculator', phys:'zap' };
+    const SC_COLORS = { bio:'#9B5DE5', chem:'#06D6A0', math:'#06B6D4', phys:'#F59E0B' };
+
+    // кэш тестов по предмету для селектора
+    const _scTests = {};
+    async function loadScTests(slug) {
+      if (_scTests[slug]) return _scTests[slug];
+      const tests = await LS.getTests(slug);
+      _scTests[slug] = tests;
+      return tests;
+    }
+
+    function setSrcMode(slug, src) {
+      const rndBtn  = document.getElementById(`sc-src-rnd-${slug}`);
+      const fixBtn  = document.getElementById(`sc-src-fix-${slug}`);
+      const pick    = document.getElementById(`sc-test-pick-${slug}`);
+      const cntWrap = document.getElementById(`sc-count-wrap-${slug}`);
+      rndBtn.classList.toggle('active', src === 'random');
+      fixBtn.classList.toggle('active', src === 'fixed');
+      pick.classList.toggle('open', src === 'fixed');
+      cntWrap.style.display = src === 'random' ? '' : 'none';
+      if (src === 'fixed') {
+        loadAndRenderTestPick(slug);
+      } else {
+        // скрыть drawer вопросов при переключении на случайный
+        const dr = document.getElementById(`sc-qdr-${slug}`);
+        if (dr) { dr.style.display = 'none'; }
+      }
+    }
+
+    async function loadAndRenderTestPick(slug) {
+      const sel = document.getElementById(`sc-test-sel-${slug}`);
+      if (sel.dataset.loaded) return;
+      sel.innerHTML = '<option value="">Загрузка…</option>';
+      try {
+        const tests = await loadScTests(slug);
+        const cur   = document.getElementById(`sc-card-${slug}`)?.dataset.testId || '';
+        sel.innerHTML = `<option value="">— случайные вопросы —</option>` +
+          tests.map(t => `<option value="${t.id}"${String(t.id) === cur ? ' selected' : ''}>${esc(t.title)} (${t.question_count ?? '?'} вопр.)</option>`).join('');
+        sel.dataset.loaded = '1';
+      } catch(e) {
+        sel.innerHTML = '<option value="">Ошибка загрузки</option>';
+      }
+    }
+
+    async function loadSubjectConfig() {
+      const wrap = document.getElementById('subj-config-list');
+      wrap.innerHTML = LS.skeleton(4);
+      try {
+        const subjects = await LS.getSubjects();
+        wrap.innerHTML = subjects.map(s => {
+          const hasFix = !!s.default_test_id;
+          const color = SC_COLORS[s.slug] || '#9B5DE5';
+          const mode = s.default_mode || 'exam';
+          const count = s.default_count || 25;
+          const srcLabel = hasFix ? 'Фикс. тест' : `${count} вопросов`;
+          return `
+          <div class="sc-card" id="sc-card-${s.slug}" data-test-id="${s.default_test_id || ''}">
+            <div class="sc-row-top" onclick="toggleScCard('${s.slug}')">
+              <div class="sc-icon" style="background:${color}"><i data-lucide="${SC_ICONS[s.slug]||'book'}"></i></div>
+              <div class="sc-info">
+                <div class="sc-name">${esc(s.name)}</div>
+                <div class="sc-summary" id="sc-sum-${s.slug}">
+                  <span class="sc-tag sc-tag-mode">${SC_MODES[mode]}</span>
+                  <span class="sc-tag">${srcLabel}</span>
+                  <span class="sc-qcount">${s.question_count ?? 0} в базе</span>
+                </div>
+              </div>
+              <i data-lucide="chevron-down" class="sc-chevron"></i>
+            </div>
+            <div class="sc-body">
+              <!-- Quick presets -->
+              <div class="sc-presets">
+                <button class="sc-preset${mode==='exam'&&count===25&&!hasFix?' active':''}" onclick="applyPreset('${s.slug}','exam',25)">Экзамен 25</button>
+                <button class="sc-preset${mode==='exam'&&count===40&&!hasFix?' active':''}" onclick="applyPreset('${s.slug}','exam',40)">Экзамен 40</button>
+                <button class="sc-preset${mode==='practice'&&count===15&&!hasFix?' active':''}" onclick="applyPreset('${s.slug}','practice',15)">Практика 15</button>
+                <button class="sc-preset${mode==='practice'&&count===25&&!hasFix?' active':''}" onclick="applyPreset('${s.slug}','practice',25)">Практика 25</button>
+              </div>
+              <!-- Detailed fields -->
+              <div class="sc-fields">
+                <div class="sc-field">
+                  <span class="sc-label">Режим</span>
+                  <select class="sc-select" id="sc-mode-${s.slug}">
+                    ${Object.entries(SC_MODES).map(([v, l]) =>
+                      `<option value="${v}"${mode === v ? ' selected' : ''}>${l}</option>`
+                    ).join('')}
+                  </select>
+                </div>
+                <div class="sc-field">
+                  <span class="sc-label">Источник</span>
+                  <div class="sc-src-toggle">
+                    <button class="sc-src-btn${hasFix ? '' : ' active'}" id="sc-src-rnd-${s.slug}" onclick="setSrcMode('${s.slug}','random')">Случайные</button>
+                    <button class="sc-src-btn${hasFix ? ' active' : ''}" id="sc-src-fix-${s.slug}" onclick="setSrcMode('${s.slug}','fixed')">Из теста</button>
+                  </div>
+                </div>
+                <div class="sc-field" id="sc-count-wrap-${s.slug}" style="${hasFix ? 'display:none' : ''}">
+                  <span class="sc-label">Вопросов</span>
+                  <input class="sc-input" type="number" id="sc-count-${s.slug}" min="5" max="100" value="${count}" />
+                </div>
+                <div class="sc-test-pick${hasFix ? ' open' : ''}" id="sc-test-pick-${s.slug}">
+                  <div class="sc-field">
+                    <span class="sc-label">Тест</span>
+                    <select class="sc-select" id="sc-test-sel-${s.slug}" onchange="onScTestChange('${s.slug}')">
+                      <option value="${s.default_test_id || ''}" selected>Загрузка...</option>
+                    </select>
+                  </div>
+                  <button class="sc-save-add" id="sc-qdr-btn-${s.slug}" style="display:${hasFix?'':'none'};align-self:flex-start"
+                    onclick="toggleScDrawer('${s.slug}')"><i data-lucide="list" style="width:13px;height:13px;vertical-align:-2px"></i> Вопросы</button>
+                </div>
+              </div>
+              <!-- Footer -->
+              <div class="sc-footer">
+                <button class="sc-save" id="sc-save-btn-${s.slug}" onclick="saveSubjectConfig('${s.slug}')">Сохранить</button>
+                <button class="sc-save-add" onclick="goAddQuestion('${s.slug}')"><i data-lucide="plus" style="width:13px;height:13px;vertical-align:-2px"></i> Вопрос</button>
+              </div>
+            </div>
+          </div>
+          <div id="sc-qdr-${s.slug}" style="display:none;border-top:1px solid var(--border);padding:20px 24px;background:rgba(238,242,255,0.5)">
+            <div id="sc-qdr-inner-${s.slug}"></div>
+          </div>`;
+        }).join('');
+        if (window.lucide) lucide.createIcons();
+        // pre-load test selectors and show Вопросы button for subjects already using a fixed test
+        subjects.filter(s => s.default_test_id).forEach(s => {
+          loadAndRenderTestPick(s.slug);
+          const btn = document.getElementById(`sc-qdr-btn-${s.slug}`);
+          if (btn) btn.style.display = '';
+        });
+      } catch (e) {
+        wrap.innerHTML = `<div class="error">Ошибка: ${esc(e.message)}</div>`;
+      }
+    }
+
+    function toggleScCard(slug) {
+      const card = document.getElementById('sc-card-' + slug);
+      if (!card) return;
+      const wasOpen = card.classList.contains('open');
+      // Close all
+      document.querySelectorAll('.sc-card.open').forEach(c => c.classList.remove('open'));
+      if (!wasOpen) {
+        card.classList.add('open');
+        if (window.lucide) lucide.createIcons({ nodes: [card] });
+      }
+    }
+
+    function applyPreset(slug, mode, count) {
+      document.getElementById('sc-mode-' + slug).value = mode;
+      document.getElementById('sc-count-' + slug).value = count;
+      setSrcMode(slug, 'random');
+      // Highlight active preset
+      const card = document.getElementById('sc-card-' + slug);
+      card.querySelectorAll('.sc-preset').forEach(p => p.classList.remove('active'));
+      const isFix = document.getElementById('sc-src-fix-' + slug).classList.contains('active');
+      card.querySelectorAll('.sc-preset').forEach(p => {
+        const txt = p.textContent.trim();
+        const mLabel = SC_MODES[mode];
+        if (txt === mLabel + ' ' + count && !isFix) p.classList.add('active');
+      });
+      // Auto-save
+      saveSubjectConfig(slug);
+    }
+
+    function updateScSummary(slug) {
+      const el = document.getElementById('sc-sum-' + slug);
+      if (!el) return;
+      const mode = document.getElementById('sc-mode-' + slug).value;
+      const isFix = document.getElementById('sc-src-fix-' + slug).classList.contains('active');
+      const count = document.getElementById('sc-count-' + slug).value;
+      const srcLabel = isFix ? 'Фикс. тест' : count + ' вопросов';
+      el.innerHTML = `<span class="sc-tag sc-tag-mode">${SC_MODES[mode]}</span><span class="sc-tag">${srcLabel}</span>`;
+    }
+
+    function scPreviewText(s) {
+      if (s.default_test_id) return `На дашборде: «${SC_MODES[s.default_mode || 'exam']}», фиксированный тест`;
+      return `На дашборде: «${SC_MODES[s.default_mode || 'exam']}», ${s.default_count || 25} вопросов (случайные)`;
+    }
+
+    async function saveSubjectConfig(slug) {
+      const btn = document.getElementById(`sc-save-btn-${slug}`);
+      const mode   = document.getElementById(`sc-mode-${slug}`).value;
+      const isFix  = document.getElementById(`sc-src-fix-${slug}`).classList.contains('active');
+      const count  = Number(document.getElementById(`sc-count-${slug}`)?.value || 25);
+      const testId = isFix ? (document.getElementById(`sc-test-sel-${slug}`).value || null) : null;
+
+      if (btn) { btn.disabled = true; btn.textContent = '...'; }
+      const payload = { default_mode: mode, default_count: count, default_test_id: testId ? Number(testId) : null };
+      try {
+        await LS.updateSubject(slug, payload);
+        document.getElementById(`sc-card-${slug}`).dataset.testId = testId || '';
+        if (isFix) document.getElementById(`sc-test-sel-${slug}`).dataset.loaded = '';
+        updateScSummary(slug);
+        // Visual feedback
+        if (btn) { btn.classList.add('saved'); btn.textContent = 'Сохранено'; }
+        setTimeout(() => { if (btn) { btn.classList.remove('saved'); btn.textContent = 'Сохранить'; btn.disabled = false; } }, 1500);
+      } catch (e) {
+        LS.toast('Ошибка: ' + e.message, 'error');
+        if (btn) { btn.disabled = false; btn.textContent = 'Сохранить'; }
+      }
+    }
+
+    /* ── Subject drawer: управление вопросами теста ── */
+    function onScTestChange(slug) {
+      const tid = document.getElementById(`sc-test-sel-${slug}`).value;
+      const btn = document.getElementById(`sc-qdr-btn-${slug}`);
+      btn.style.display = tid ? '' : 'none';
+      // скрыть drawer если тест сменился
+      const dr = document.getElementById(`sc-qdr-${slug}`);
+      dr.style.display = 'none';
+      document.getElementById(`sc-qdr-inner-${slug}`).innerHTML = '';
+    }
+
+    const _scDrOpen = {}; // slug <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> bool
+    async function toggleScDrawer(slug) {
+      const dr  = document.getElementById(`sc-qdr-${slug}`);
+      const tid = Number(document.getElementById(`sc-test-sel-${slug}`).value);
+      if (!tid) return;
+      if (dr.style.display !== 'none') { dr.style.display = 'none'; return; }
+      dr.style.display = '';
+      await renderScDrawer(slug, tid);
+    }
+
+    const _scCache = {}; // tid <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> { test, subjectQs }
+    async function renderScDrawer(slug, tid) {
+      const inner = document.getElementById(`sc-qdr-inner-${slug}`);
+      inner.innerHTML = LS.skeleton(3, 'row');
+      try {
+        const [t, subjectQs] = await Promise.all([
+          LS.getTest(tid),
+          LS.getQuestions(slug, null, 'date_asc').catch(() => []),
+        ]);
+        _scCache[tid] = { test: t, subjectQs };
+        inner.innerHTML = `
+          <div class="tst-cols">
+            <div>
+              <div class="tst-panel-title">Вопросы в тесте (<span id="sc-qcnt-${tid}">${t.questions.length}</span>)</div>
+              <div class="tst-q-list" id="sc-ql-${tid}">${renderScQList(t.questions, tid, slug)}</div>
+            </div>
+            <div>
+              <div class="tst-panel-title">Добавить из базы</div>
+              <input class="tst-search" placeholder="Поиск…" oninput="filterScPicker(${tid},'${slug}',this.value)" />
+              <div class="tst-q-list" id="sc-pick-${tid}">${renderScPicker(subjectQs, new Set(t.questions.map(q=>q.id)), tid, slug)}</div>
+            </div>
+          </div>`;
+        renderMath(inner);
+      } catch(e) {
+        inner.innerHTML = `<div class="error">Ошибка: ${esc(e.message)}</div>`;
+      }
+    }
+
+    function renderScQList(questions, tid, slug) {
+      if (!questions.length) return '<div class="tst-empty">Пусто. Добавьте вопросы справа <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></div>';
+      return questions.map((q,i) => `
+        <div class="tst-q-item" id="sc-qi-${tid}-${q.id}">
+          <span class="tst-q-num">${i+1}.</span>
+          <div class="tst-q-body">
+            <span class="tst-q-text">${esc(q.text)}</span>
+            <div class="tst-q-meta">
+              <span class="tst-q-badge diff-${q.difficulty}">${DIFF_LABELS[q.difficulty]||q.difficulty}</span>
+              ${qTypeBadge(q.type)}
+              ${qOptsPreview(q)}
+            </div>
+          </div>
+          <button class="btn-tst-rem" onclick="scRemoveQ(${tid},'${slug}',${q.id})" title="Убрать">−</button>
+        </div>`).join('');
+    }
+
+    function renderScPicker(questions, inIds, tid, slug) {
+      if (!questions.length) return '<div class="tst-empty">Вопросов нет в этом предмете</div>';
+      return questions.map(q => {
+        const added = inIds.has(q.id);
+        return `
+          <div class="tst-q-item" id="sc-pick-item-${tid}-${q.id}" style="${added?'opacity:0.4;pointer-events:none':''}">
+            <div class="tst-q-body" style="flex:1">
+              <span class="tst-q-text">${esc(q.text)}</span>
+              <div class="tst-q-meta">
+                <span class="tst-q-badge diff-${q.difficulty}">${DIFF_LABELS[q.difficulty]||q.difficulty}</span>
+                ${qTypeBadge(q.type)}
+                ${q.topic ? `<span class="tst-q-badge" style="background:rgba(6,214,224,0.1);color:#05aab3">${esc(q.topic)}</span>` : ''}
+              </div>
+            </div>
+            <button class="btn-tst-add" id="sc-add-btn-${tid}-${q.id}" onclick="scAddQ(${tid},'${slug}',${q.id},this)" title="Добавить">${added?'<i data-lucide="check" style="width:14px;height:14px"></i>':'+' }</button>
+          </div>`;
+      }).join('');
+    }
+
+    function filterScPicker(tid, slug, q) {
+      const cache = _scCache[tid];
+      if (!cache) return;
+      const lq  = q.toLowerCase();
+      const filtered = lq.length < 1
+        ? cache.subjectQs
+        : cache.subjectQs.filter(x => x.text.toLowerCase().includes(lq) || (x.topic||'').toLowerCase().includes(lq));
+      const inIds = new Set(cache.test.questions.map(x=>x.id));
+      document.getElementById(`sc-pick-${tid}`).innerHTML = renderScPicker(filtered, inIds, tid, slug);
+    }
+
+    async function scAddQ(tid, slug, qid, btn) {
+      btn.disabled = true; btn.textContent = '…';
+      try {
+        await LS.addQuestionsToTest(tid, [qid]);
+        // обновить кэш и списки
+        const t = await LS.getTest(tid);
+        _scCache[tid].test = t;
+        const inIds = new Set(t.questions.map(q=>q.id));
+        document.getElementById(`sc-ql-${tid}`).innerHTML   = renderScQList(t.questions, tid, slug);
+        document.getElementById(`sc-qcnt-${tid}`).textContent = t.questions.length;
+        // пометить кнопку в пикере
+        const item = document.getElementById(`sc-pick-item-${tid}-${qid}`);
+        if (item) { item.style.opacity='0.4'; item.style.pointerEvents='none'; }
+        const addBtn = document.getElementById(`sc-add-btn-${tid}-${qid}`);
+        if (addBtn) { addBtn.innerHTML = '<i data-lucide="check" style="width:14px;height:14px"></i>'; if(window.lucide)lucide.createIcons(); }
+        renderMath(document.getElementById(`sc-ql-${tid}`));
+      } catch(e) { LS.toast('Ошибка: ' + e.message, 'error'); btn.disabled=false; btn.textContent='+'; }
+    }
+
+    async function scRemoveQ(tid, slug, qid) {
+      try {
+        await LS.removeQFromTest(tid, qid);
+        const t = await LS.getTest(tid);
+        _scCache[tid].test = t;
+        const inIds = new Set(t.questions.map(q=>q.id));
+        document.getElementById(`sc-ql-${tid}`).innerHTML    = renderScQList(t.questions, tid, slug);
+        document.getElementById(`sc-qcnt-${tid}`).textContent = t.questions.length;
+        // разблокировать в пикере
+        const item = document.getElementById(`sc-pick-item-${tid}-${qid}`);
+        if (item) { item.style.opacity=''; item.style.pointerEvents=''; }
+        const addBtn = document.getElementById(`sc-add-btn-${tid}-${qid}`);
+        if (addBtn) { addBtn.textContent='+'; addBtn.disabled=false; }
+      } catch(e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+    }
+
+    /* ─── User permissions modal ───────────────────────────────────────── */
+    let _upPermsData = null;
+
+    function closeUserPermsModal() {
+      document.getElementById('up-modal').classList.remove('open');
+      _upPermsData = null;
+    }
+
+    async function openUserPermsModal() {
+      if (!activeUid) return;
+      const name = document.getElementById('up-name').textContent;
+      document.getElementById('up-modal-title').textContent = `Права: ${name}`;
+      document.getElementById('up-modal-list').innerHTML = LS.skeleton(5, 'row');
+      document.getElementById('up-modal').classList.add('open');
+      try {
+        _upPermsData = await LS.getUserPermissions(activeUid);
+        renderUserPerms();
+      } catch(e) {
+        document.getElementById('up-modal-list').innerHTML = `<p style="color:var(--danger);font-size:13px">Ошибка: ${esc(e.message)}</p>`;
+      }
+    }
+
+    function renderUserPerms() {
+      if (!_upPermsData) return;
+      const list = document.getElementById('up-modal-list');
+      list.innerHTML = _upPermsData.permissions.map(p => {
+        const hasOverride = p.userVal !== undefined;
+        const checked = p.effective;
+        const badge = hasOverride
+          ? `<span style="font-size:10px;padding:2px 7px;border-radius:var(--r-pill);background:rgba(155,93,229,0.12);color:var(--violet);font-weight:700">Инд.</span>`
+          : `<span style="font-size:10px;padding:2px 7px;border-radius:var(--r-pill);background:rgba(136,152,170,0.12);color:var(--text-3);font-weight:700">По роли</span>`;
+        const resetBtn = hasOverride
+          ? `<button style="background:none;border:none;cursor:pointer;color:var(--text-3);padding:3px 6px;border-radius:6px;font-size:11px;font-weight:700;transition:color .2s"
+               onmouseover="this.style.color='var(--danger)'" onmouseout="this.style.color='var(--text-3)'"
+               onclick="doResetOneUserPerm('${esc(p.key)}')" title="Сбросить к роли">×</button>`
+          : '';
+        return `
+          <div class="perm-card${checked ? ' enabled' : ''}" id="up-perm-card-${p.key.replace('.','_')}">
+            <div class="perm-info">
+              <div style="display:flex;align-items:center;gap:7px">
+                <span class="perm-label">${esc(p.label)}</span>
+                ${badge}
+                ${resetBtn}
+              </div>
+              <div class="perm-desc">${esc(p.desc)}</div>
+            </div>
+            <label class="perm-toggle">
+              <input type="checkbox" ${checked ? 'checked' : ''}
+                onchange="doSetUserPerm('${esc(p.key)}', this.checked, this)">
+              <span class="perm-track"></span>
+              <span class="perm-thumb"></span>
+            </label>
+          </div>`;
+      }).join('');
+      // update reset-all btn visibility
+      const hasAny = _upPermsData.permissions.some(p => p.userVal !== undefined);
+      document.getElementById('up-modal-reset-btn').style.opacity = hasAny ? '1' : '0.4';
+    }
+
+    async function doSetUserPerm(key, enabled, checkbox) {
+      checkbox.disabled = true;
+      try {
+        await LS.setUserPermission(activeUid, key, enabled);
+        _upPermsData = await LS.getUserPermissions(activeUid);
+        renderUserPerms();
+        LS.toast(enabled ? 'Право включено' : 'Право отключено', 'success');
+      } catch(e) {
+        checkbox.checked = !enabled;
+        LS.toast('Ошибка: ' + e.message, 'error');
+      } finally {
+        checkbox.disabled = false;
+      }
+    }
+
+    async function doResetOneUserPerm(key) {
+      try {
+        await LS.resetUserPermissions(activeUid, key);
+        _upPermsData = await LS.getUserPermissions(activeUid);
+        renderUserPerms();
+        LS.toast('Сброшено к значению роли', 'success');
+      } catch(e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+    }
+
+    async function doResetAllUserPerms() {
+      const name = document.getElementById('up-name').textContent;
+      if (!await LS.confirm(`Сбросить все индивидуальные права «${name}»?\nБудут применены права роли.`, { title: 'Сбросить права', confirmText: 'Сбросить' })) return;
+      try {
+        await LS.resetUserPermissions(activeUid);
+        _upPermsData = await LS.getUserPermissions(activeUid);
+        renderUserPerms();
+        LS.toast('Права сброшены к роли', 'success');
+      } catch(e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+    }
+
+    /* ─── Permissions tab ──────────────────────────────────────────────── */
+    let _permData = null;
+
+    async function loadPermissions() {
+      try {
+        _permData = await LS.getPermissions();
+        renderPermissions();
+      } catch(e) {
+        document.getElementById('perm-teacher').innerHTML =
+          `<p style="color:var(--danger);font-size:13px">Ошибка загрузки: ${esc(e.message)}</p>`;
+      }
+    }
+
+    function renderPermissions() {
+      if (!_permData) return;
+      const { permissions, definitions } = _permData;
+      ['teacher', 'student'].forEach(role => {
+        const container = document.getElementById('perm-' + role);
+        const defs = definitions.filter(d => d.role === role);
+        container.innerHTML = defs.map(def => {
+          const enabled = permissions[role]?.[def.key] ?? def.default;
+          return `
+            <div class="perm-card${enabled ? ' enabled' : ''}" id="perm-card-${role}-${def.key.replace('.','_')}">
+              <div class="perm-info">
+                <div class="perm-label">${esc(def.label)}</div>
+                <div class="perm-desc">${esc(def.desc)}</div>
+              </div>
+              <label class="perm-toggle" title="${enabled ? 'Выключить' : 'Включить'}">
+                <input type="checkbox" ${enabled ? 'checked' : ''}
+                  onchange="togglePermission('${esc(role)}','${esc(def.key)}',this.checked,this)">
+                <span class="perm-track"></span>
+                <span class="perm-thumb"></span>
+              </label>
+            </div>`;
+        }).join('');
+      });
+    }
+
+    async function togglePermission(role, key, enabled, checkbox) {
+      checkbox.disabled = true;
+      try {
+        await LS.setPermission(role, key, enabled);
+        // update local cache
+        if (!_permData.permissions[role]) _permData.permissions[role] = {};
+        _permData.permissions[role][key] = enabled;
+        // update card style
+        const safeKey = key.replace('.', '_');
+        const card = document.getElementById(`perm-card-${role}-${safeKey}`);
+        if (card) card.classList.toggle('enabled', enabled);
+        LS.toast(enabled ? 'Право включено' : 'Право отключено', 'success');
+      } catch(e) {
+        checkbox.checked = !enabled; // revert
+        LS.toast('Ошибка: ' + e.message, 'error');
+      } finally {
+        checkbox.disabled = false;
+      }
+    }
+
+    /* ════════════════════════════════════════════════
+       МАГАЗИН (Shop)
+    ════════════════════════════════════════════════ */
+    let _shopItems = [];
+    let _shopEditId = null;
+
+    async function loadShopAdmin() {
+      try {
+        const [stats, items] = await Promise.all([
+          LS.adminShopStats(),
+          LS.adminShopGetItems()
+        ]);
+        const topName = stats.topItems?.[0]?.name || '—';
+        document.getElementById('shop-stats-grid').innerHTML = `
+          <div class="stat-card" style="--stat-top:var(--violet)">
+            <div class="stat-card-icon" style="background:rgba(155,93,229,0.1)"><i data-lucide="shopping-bag" class="stat-icon"></i></div>
+            <div class="stat-val violet">${stats.activeItems}/${stats.totalItems}</div>
+            <div class="stat-label">Товаров</div>
+          </div>
+          <div class="stat-card" style="--stat-top:var(--cyan)">
+            <div class="stat-card-icon" style="background:rgba(6,214,224,0.1)"><i data-lucide="receipt" class="stat-icon"></i></div>
+            <div class="stat-val cyan">${stats.totalPurchases}</div>
+            <div class="stat-label">Покупок</div>
+          </div>
+          <div class="stat-card" style="--stat-top:var(--green)">
+            <div class="stat-card-icon" style="background:rgba(6,214,100,0.1)"><i data-lucide="coins" class="stat-icon"></i></div>
+            <div class="stat-val green">${stats.totalCoinsInCirculation}</div>
+            <div class="stat-label">Монет в обороте</div>
+          </div>
+          <div class="stat-card" style="--stat-top:var(--amber, #FFB347)">
+            <div class="stat-card-icon" style="background:rgba(255,179,71,0.1)"><i data-lucide="star" class="stat-icon"></i></div>
+            <div class="stat-val" style="color:var(--amber, #FFB347);font-size:1.1rem">${esc(topName)}</div>
+            <div class="stat-label">Топ товар</div>
+          </div>`;
+        _shopItems = items;
+        renderShopItems();
+        if (window.lucide) lucide.createIcons();
+      } catch(e) {
+        document.getElementById('shop-stats-grid').innerHTML = `<div class="error">Ошибка: ${esc(e.message)}</div>`;
+      }
+    }
+
+    function renderShopItems() {
+      const body = document.getElementById('shop-items-body');
+      if (!_shopItems.length) { body.innerHTML = '<tr><td colspan="7" class="empty">Нет товаров</td></tr>'; return; }
+      const typeLabels = { frame:'Рамка', title:'Титул', theme:'Тема', effect:'Эффект' };
+      body.innerHTML = _shopItems.map(it => `<tr>
+        <td>${it.id}</td>
+        <td><strong>${esc(it.name)}</strong></td>
+        <td><span class="mode-badge mode-practice">${typeLabels[it.type] || esc(it.type)}</span></td>
+        <td>${it.price} <i data-lucide="coins" style="width:12px;height:12px;vertical-align:-2px;color:var(--amber, #FFB347)"></i></td>
+        <td>${it.sold_count || 0}</td>
+        <td>
+          <label class="adm-toggle">
+            <input type="checkbox" ${it.is_active ? 'checked' : ''} onchange="shopAdminToggleActive(${it.id}, this.checked)" />
+            <span class="track"></span><span class="thumb"></span>
+          </label>
+        </td>
+        <td>
+          <button class="btn-edit-q" onclick="shopAdminEditItem(${it.id})">Ред.</button>
+          <button class="btn-del-q" onclick="shopAdminDeleteItem(${it.id})">Удалить</button>
+        </td>
+      </tr>`).join('');
+      if (window.lucide) lucide.createIcons();
+    }
+
+    function shopAdminCreateItem() {
+      _shopEditId = null;
+      document.getElementById('shop-form-title').textContent = 'Новый товар';
+      document.getElementById('shop-f-name').value = '';
+      document.getElementById('shop-f-type').value = 'frame';
+      document.getElementById('shop-f-price').value = '100';
+      document.getElementById('shop-f-desc').value = '';
+      document.getElementById('shop-f-icon').value = '';
+      document.getElementById('shop-f-data').value = '';
+      document.getElementById('shop-f-active').checked = true;
+      document.getElementById('shop-item-form').style.display = '';
+    }
+
+    function shopAdminEditItem(id) {
+      const it = _shopItems.find(i => i.id === id);
+      if (!it) return;
+      _shopEditId = id;
+      document.getElementById('shop-form-title').textContent = 'Редактировать товар #' + id;
+      document.getElementById('shop-f-name').value = it.name || '';
+      document.getElementById('shop-f-type').value = it.type || 'frame';
+      document.getElementById('shop-f-price').value = it.price ?? 100;
+      document.getElementById('shop-f-desc').value = it.description || '';
+      document.getElementById('shop-f-icon').value = it.icon || '';
+      document.getElementById('shop-f-data').value = it.data ? (typeof it.data === 'string' ? it.data : JSON.stringify(it.data)) : '';
+      document.getElementById('shop-f-active').checked = !!it.is_active;
+      document.getElementById('shop-item-form').style.display = '';
+    }
+
+    function shopAdminCancelForm() {
+      document.getElementById('shop-item-form').style.display = 'none';
+      _shopEditId = null;
+    }
+
+    let _shopSaving = false;
+    async function shopAdminSaveItem() {
+      if (_shopSaving) return;
+      _shopSaving = true;
+      const data = {
+        name: document.getElementById('shop-f-name').value.trim(),
+        type: document.getElementById('shop-f-type').value,
+        price: parseInt(document.getElementById('shop-f-price').value) || 0,
+        description: document.getElementById('shop-f-desc').value.trim(),
+        icon: document.getElementById('shop-f-icon').value.trim(),
+        data: document.getElementById('shop-f-data').value.trim() || null,
+        is_active: document.getElementById('shop-f-active').checked ? 1 : 0
+      };
+      if (!data.name) { LS.toast('Введите название', 'error'); return; }
+      try {
+        if (_shopEditId) {
+          await LS.adminShopUpdateItem(_shopEditId, data);
+          LS.toast('Товар обновлён', 'success');
+        } else {
+          await LS.adminShopCreateItem(data);
+          LS.toast('Товар создан', 'success');
+        }
+        shopAdminCancelForm();
+        shopInited = false;
+        loadShopAdmin();
+      } catch(e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+      finally { _shopSaving = false; }
+    }
+
+    async function shopAdminDeleteItem(id) {
+      if (!await LS.confirm('Все покупки этого товара будут удалены.', { title: 'Удалить товар?', confirmText: 'Удалить', danger: true })) return;
+      try {
+        await LS.adminShopDeleteItem(id);
+        LS.toast('Товар удалён', 'success');
+        shopInited = false;
+        loadShopAdmin();
+      } catch(e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+    }
+
+    async function shopAdminToggleActive(id, active) {
+      try {
+        await LS.adminShopUpdateItem(id, { is_active: active ? 1 : 0 });
+        LS.toast(active ? 'Товар активирован' : 'Товар деактивирован', 'success');
+      } catch(e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+    }
+
+    let _shopSearchTimer = null;
+    async function shopSearchUser(q) {
+      clearTimeout(_shopSearchTimer);
+      const box = document.getElementById('shop-award-results');
+      if (q.length < 2) { box.classList.remove('open'); return; }
+      _shopSearchTimer = setTimeout(async () => {
+        try {
+          const r = await LS.adminGetUsers({ q, limit: 8 });
+          box.innerHTML = (r.users || []).map(u => `<div class="us-item" onclick="shopPickUser(${u.id}, '${esc(u.name || u.email)}')">
+            <span>${esc(u.name || u.email)}</span><span class="us-role">${u.role}</span>
+          </div>`).join('') || '<div class="us-item" style="color:var(--text-3)">Не найдено</div>';
+          box.classList.add('open');
+        } catch(e) { box.classList.remove('open'); }
+      }, 300);
+    }
+    function shopPickUser(id, name) {
+      document.getElementById('shop-award-uid').value = id;
+      document.getElementById('shop-award-user').value = name;
+      document.getElementById('shop-award-results').classList.remove('open');
+    }
+
+    let _coinsAwarding = false;
+    async function shopAdminAwardCoins() {
+      if (_coinsAwarding) return;
+      const userId = parseInt(document.getElementById('shop-award-uid').value);
+      const amount = parseInt(document.getElementById('shop-award-amount').value);
+      const reason = document.getElementById('shop-award-reason').value.trim();
+      if (!userId) { LS.toast('Выберите пользователя', 'error'); return; }
+      if (!amount || amount <= 0) { LS.toast('Введите количество монет', 'error'); return; }
+      _coinsAwarding = true;
+      try {
+        const r = await LS.adminShopAwardCoins({ userId, amount, reason });
+        LS.toast(`Начислено ${amount} монет. Баланс: ${r.coins}`, 'success');
+        document.getElementById('shop-award-uid').value = '';
+        document.getElementById('shop-award-user').value = '';
+        document.getElementById('shop-award-reason').value = '';
+      } catch(e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+      finally { _coinsAwarding = false; }
+    }
+
+    /* ════════════════════════════════════════════════
+       ГЕЙМИФИКАЦИЯ (Gamification)
+    ════════════════════════════════════════════════ */
+    async function loadGamAdmin() {
+      try {
+        const stats = await LS.adminGamStats();
+        document.getElementById('gam-stats-grid').innerHTML = `
+          <div class="stat-card" style="--stat-top:var(--violet)">
+            <div class="stat-card-icon" style="background:rgba(155,93,229,0.1)"><i data-lucide="zap" class="stat-icon"></i></div>
+            <div class="stat-val violet">${stats.totalXP}</div>
+            <div class="stat-label">Суммарный XP</div>
+          </div>
+          <div class="stat-card" style="--stat-top:var(--cyan)">
+            <div class="stat-card-icon" style="background:rgba(6,214,224,0.1)"><i data-lucide="coins" class="stat-icon"></i></div>
+            <div class="stat-val cyan">${stats.totalCoins}</div>
+            <div class="stat-label">Суммарные монеты</div>
+          </div>
+          <div class="stat-card" style="--stat-top:var(--green)">
+            <div class="stat-card-icon" style="background:rgba(6,214,100,0.1)"><i data-lucide="bar-chart-3" class="stat-icon"></i></div>
+            <div class="stat-val green">${(stats.avgLevel ?? 0).toFixed(1)}</div>
+            <div class="stat-label">Средний уровень</div>
+          </div>
+          <div class="stat-card" style="--stat-top:var(--amber, #FFB347)">
+            <div class="stat-card-icon" style="background:rgba(255,179,71,0.1)"><i data-lucide="trophy" class="stat-icon"></i></div>
+            <div class="stat-val" style="color:var(--amber, #FFB347)">${stats.achievementCount}</div>
+            <div class="stat-label">Достижений выдано</div>
+          </div>
+          <div class="stat-card" style="--stat-top:#FF9F1C">
+            <div class="stat-card-icon" style="background:rgba(255,159,28,0.1)"><i data-lucide="shopping-bag" class="stat-icon"></i></div>
+            <div class="stat-val" style="color:#FF9F1C">${stats.totalPurchases || 0}</div>
+            <div class="stat-label">Покупок</div>
+          </div>`;
+
+        // Top-10
+        const topBody = document.getElementById('gam-top-body');
+        if (stats.topByXP?.length) {
+          topBody.innerHTML = stats.topByXP.slice(0, 10).map((u, i) => `<tr>
+            <td><strong>${i + 1}</strong></td>
+            <td>${esc(u.name || u.email || 'ID:' + (u.id || u.user_id))}</td>
+            <td><span style="color:var(--violet);font-weight:700">${u.xp}</span></td>
+            <td>${u.level}</td>
+            <td>${u.coins} <i data-lucide="coins" style="width:12px;height:12px;vertical-align:-2px;color:var(--amber, #FFB347)"></i></td>
+          </tr>`).join('');
+        } else {
+          topBody.innerHTML = '<tr><td colspan="5" class="empty">Нет данных</td></tr>';
+        }
+
+        // Recent XP
+        const XP_REASONS = {
+          'daily_activity': ['sun',          '#F59E0B', 'Ежедневная активность'],
+          'correct_answers':['check-circle', '#10B981', 'Правильные ответы'],
+          'test_complete':  ['file-text',    '#06B6D4', 'Тест завершён'],
+          'test_90+':       ['zap',          '#9B5DE5', 'Тест на 90%+'],
+          'test_perfect':   ['trophy',       '#F59E0B', 'Идеальный тест (100%)'],
+          'lab_experiment': ['atom',         '#06D6A0', 'Лабораторный эксперимент'],
+          'daily_goal':     ['target',       '#EF476F', 'Ежедневная цель выполнена'],
+          'Admin award':    ['crown',        '#9B5DE5', 'Начисление администратором'],
+        };
+        function fmtXPReason(reason) {
+          if (!reason) return '—';
+          const entry = XP_REASONS[reason];
+          if (entry) {
+            const [icon, color, label] = entry;
+            return `<span style="display:inline-flex;align-items:center;gap:5px"><span style="color:${color};display:inline-flex">${lsIcon(icon,14)}</span>${label}</span>`;
+          }
+          if (reason.startsWith('achievement:')) {
+            return `<span style="display:inline-flex;align-items:center;gap:5px"><span style="color:#F59E0B;display:inline-flex">${lsIcon('award',14)}</span>Достижение: ${esc(reason.slice(12))}</span>`;
+          }
+          if (reason.startsWith('Испытание:')) {
+            return `<span style="display:inline-flex;align-items:center;gap:5px"><span style="color:#EF476F;display:inline-flex">${lsIcon('swords',14)}</span>${esc(reason)}</span>`;
+          }
+          return esc(reason);
+        }
+
+        const logBody = document.getElementById('gam-log-body');
+        if (stats.recentXP?.length) {
+          logBody.innerHTML = stats.recentXP.slice(0, 20).map(e => `<tr>
+            <td style="font-size:0.78rem;color:var(--text-3)">${fmtDate(e.created_at || e.date)}</td>
+            <td>${esc(e.name || e.user_name || '—')}</td>
+            <td><span style="color:var(--violet);font-weight:700">+${e.amount}</span></td>
+            <td style="font-size:0.82rem;color:var(--text-2)">${fmtXPReason(e.reason)}</td>
+          </tr>`).join('');
+        } else {
+          logBody.innerHTML = '<tr><td colspan="4" class="empty">Нет данных</td></tr>';
+        }
+
+        // Purchases
+        const purchBody = document.getElementById('gam-purchases-body');
+        if (stats.recentPurchases?.length) {
+          purchBody.innerHTML = stats.recentPurchases.slice(0, 20).map(p => `<tr>
+            <td style="font-size:0.78rem;color:var(--text-3)">${fmtDate(p.purchased_at)}</td>
+            <td>${esc(p.user_name || '—')}</td>
+            <td style="font-weight:600">${esc(p.item_name || '—')}</td>
+            <td><span class="badge" style="font-size:0.7rem">${esc(p.type || '—')}</span></td>
+            <td style="color:var(--amber,#FFB347);font-weight:700">${p.price} <i data-lucide="coins" style="width:12px;height:12px;vertical-align:-2px"></i></td>
+          </tr>`).join('');
+        } else {
+          purchBody.innerHTML = '<tr><td colspan="5" class="empty">Нет покупок</td></tr>';
+        }
+
+        if (window.lucide) lucide.createIcons();
+      } catch(e) {
+        document.getElementById('gam-stats-grid').innerHTML = `<div class="error">Ошибка: ${esc(e.message)}</div>`;
+      }
+    }
+
+    let _gamSearchTimer = null;
+    async function gamSearchUser(q, prefix) {
+      clearTimeout(_gamSearchTimer);
+      const box = document.getElementById(prefix + '-results');
+      if (q.length < 2) { box.classList.remove('open'); return; }
+      _gamSearchTimer = setTimeout(async () => {
+        try {
+          const r = await LS.adminGetUsers({ q, limit: 8 });
+          box.innerHTML = (r.users || []).map(u => `<div class="us-item" onclick="gamPickUser(${u.id}, '${esc(u.name || u.email)}', '${prefix}')">
+            <span>${esc(u.name || u.email)}</span><span class="us-role">${u.role}</span>
+          </div>`).join('') || '<div class="us-item" style="color:var(--text-3)">Не найдено</div>';
+          box.classList.add('open');
+        } catch(e) { box.classList.remove('open'); }
+      }, 300);
+    }
+    function gamPickUser(id, name, prefix) {
+      document.getElementById(prefix + '-uid').value = id;
+      document.getElementById(prefix + '-user').value = name;
+      document.getElementById(prefix + '-results').classList.remove('open');
+    }
+
+    let _gamAwarding = false;
+    async function gamAdminAward() {
+      if (_gamAwarding) return;
+      const userId = parseInt(document.getElementById('gam-award-uid').value);
+      const xp = parseInt(document.getElementById('gam-award-xp').value) || 0;
+      const coins = parseInt(document.getElementById('gam-award-coins').value) || 0;
+      const reason = document.getElementById('gam-award-reason').value.trim();
+      if (!userId) { LS.toast('Выберите пользователя', 'error'); return; }
+      if (!xp && !coins) { LS.toast('Введите XP или монеты', 'error'); return; }
+      _gamAwarding = true;
+      try {
+        const r = await LS.adminGamAward({ userId, xp, coins, reason });
+        LS.toast(`Начислено! XP: ${r.xp}, Уровень: ${r.level}, Монеты: ${r.coins}`, 'success');
+        document.getElementById('gam-award-uid').value = '';
+        document.getElementById('gam-award-user').value = '';
+        document.getElementById('gam-award-reason').value = '';
+        gamInited = false;
+        loadGamAdmin();
+      } catch(e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+      finally { _gamAwarding = false; }
+    }
+
+    async function gamAdminReset() {
+      const userId = parseInt(document.getElementById('gam-reset-uid').value);
+      const userName = document.getElementById('gam-reset-user').value;
+      if (!userId) { LS.toast('Выберите пользователя', 'error'); return; }
+      if (!await LS.confirm(`ВСЕ XP, монеты и достижения «${userName}» будут удалены безвозвратно.`, { title: 'Сбросить прогресс?', confirmText: 'Сбросить', danger: true })) return;
+      try {
+        await LS.adminGamReset({ userId });
+        LS.toast('Прогресс сброшен', 'success');
+        document.getElementById('gam-reset-uid').value = '';
+        document.getElementById('gam-reset-user').value = '';
+        gamInited = false;
+        loadGamAdmin();
+      } catch(e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+    }
+
+    /* ════════════════════════════════════════════════
+       ШАБЛОНЫ (Templates)
+    ════════════════════════════════════════════════ */
+    async function loadTplAdmin() {
+      try {
+        const [courses, lessons] = await Promise.all([
+          LS.getCourseTemplates().catch(() => []),
+          LS.getLessonTemplates().catch(() => [])
+        ]);
+        renderTplTable('tpl-course-body', courses, 'courses');
+        renderTplTable('tpl-lesson-body', lessons, 'lessons');
+        if (window.lucide) lucide.createIcons();
+      } catch(e) {
+        document.getElementById('tpl-course-body').innerHTML = `<tr><td colspan="7" class="error">Ошибка: ${esc(e.message)}</td></tr>`;
+      }
+    }
+
+    function renderTplTable(bodyId, items, type) {
+      const body = document.getElementById(bodyId);
+      if (!items || !items.length) {
+        body.innerHTML = '<tr><td colspan="7" class="empty">Нет шаблонов</td></tr>';
+        return;
+      }
+      body.innerHTML = items.map(t => `<tr>
+        <td>${t.id}</td>
+        <td><strong>${esc(t.name || t.title || '—')}</strong></td>
+        <td>${esc(t.subject || '—')}</td>
+        <td>${esc(t.category || '—')}</td>
+        <td>${esc(t.author_name || t.author || '—')}</td>
+        <td>
+          <label class="adm-toggle">
+            <input type="checkbox" ${t.is_public ? 'checked' : ''} onchange="tplTogglePublic('${type}', ${t.id}, this.checked)" />
+            <span class="track"></span><span class="thumb"></span>
+          </label>
+        </td>
+        <td>
+          <button class="btn-del-q" onclick="tplDelete('${type}', ${t.id})">Удалить</button>
+        </td>
+      </tr>`).join('');
+    }
+
+    async function tplTogglePublic(type, id, isPublic) {
+      try {
+        const endpoint = type === 'courses' ? '/api/templates/courses/' : '/api/templates/lessons/';
+        await LS.api(endpoint + id, { method: 'PUT', body: JSON.stringify({ is_public: isPublic ? 1 : 0 }) });
+        LS.toast(isPublic ? 'Шаблон опубликован' : 'Шаблон скрыт', 'success');
+      } catch(e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+    }
+
+    async function tplDelete(type, id) {
+      if (!confirm('Удалить шаблон #' + id + '?')) return;
+      try {
+        if (type === 'courses') await LS.deleteCourseTemplate(id);
+        else await LS.deleteLessonTemplate(id);
+        LS.toast('Шаблон удалён', 'success');
+        tplInited = false;
+        loadTplAdmin();
+      } catch(e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+    }
+
+    /* ════════════════════════════════════════════════
+       СИМУЛЯЦИИ
+    ════════════════════════════════════════════════ */
+
+    // Full list of available (non-null id) sims mirrored from /lab
+    const ADMIN_SIMS = [
+      { id: 'graph',          cat: 'Математика', title: 'График функции' },
+      { id: 'graphtransform', cat: 'Математика', title: 'Трансформации графиков' },
+      { id: 'triangle',       cat: 'Математика', title: 'Геометрия треугольника' },
+      { id: 'quadratic',      cat: 'Математика', title: 'Корни квадратного уравнения' },
+      { id: 'stereo',         cat: 'Математика', title: 'Стереометрия 3D' },
+      { id: 'probability',    cat: 'Математика', title: 'Теория вероятностей' },
+      { id: 'trigcircle',     cat: 'Математика', title: 'Тригонометрическая окружность' },
+      { id: 'normaldist',     cat: 'Математика', title: 'Нормальное распределение' },
+      { id: 'projectile',     cat: 'Физика',     title: 'Бросок тела' },
+      { id: 'pendulum',       cat: 'Физика',     title: 'Маятник' },
+      { id: 'collision',      cat: 'Физика',     title: 'Столкновение шаров' },
+      { id: 'magnetic',       cat: 'Физика',     title: 'Магнитное поле токов' },
+      { id: 'circuit',        cat: 'Физика',     title: 'Электрические цепи' },
+      { id: 'coulomb',        cat: 'Физика',     title: 'Закон Кулона' },
+      { id: 'dynamics',       cat: 'Физика',     title: 'Динамика' },
+      { id: 'thinlens',       cat: 'Физика',     title: 'Тонкая линза' },
+      { id: 'refraction',     cat: 'Физика',     title: 'Преломление света' },
+      { id: 'molphys',        cat: 'Химия',      title: 'Молекулярная физика' },
+      { id: 'chemistry',      cat: 'Химия',      title: 'Химические реакции' },
+      { id: 'equilibrium',    cat: 'Химия',      title: 'Химическое равновесие' },
+      { id: 'electrolysis',   cat: 'Химия',      title: 'Электролиз' },
+      { id: 'bohratom',       cat: 'Химия',      title: 'Атом Бора' },
+      { id: 'orbitals',       cat: 'Химия',      title: 'Молекулярные орбитали' },
+      { id: 'titration',      cat: 'Химия',      title: 'pH и кривая титрования' },
+      { id: 'chemsandbox',    cat: 'Химия',      title: 'Химическая песочница' },
+      { id: 'crystal',        cat: 'Химия',      title: 'Кристаллическая решётка' },
+      { id: 'celldivision',   cat: 'Биология',   title: 'Деление клетки' },
+      { id: 'photosynthesis', cat: 'Биология',   title: 'Фотосинтез и дыхание' },
+      { id: 'angrybirds',     cat: 'Игры',       title: 'Angry Birds Physics' },
+    ];
+
+    let _simsSettings = { module_disabled: false, disabled_ids: [] };
+
+    async function loadSimsAdmin() {
+      try {
+        const data = await LS.api('/api/settings/sims');
+        _simsSettings = data;
+        _renderSimsAdmin();
+      } catch(e) { LS.toast('Ошибка загрузки настроек: ' + e.message, 'error'); }
+    }
+
+    function _renderSimsAdmin() {
+      // master toggle
+      const masterChk = document.getElementById('sims-master-chk');
+      if (masterChk) masterChk.checked = !_simsSettings.module_disabled;
+
+      // per-sim cards
+      const grid = document.getElementById('sims-grid');
+      const dis  = new Set(_simsSettings.disabled_ids || []);
+      // group by category
+      const byCat = {};
+      ADMIN_SIMS.forEach(s => { (byCat[s.cat] = byCat[s.cat] || []).push(s); });
+
+      let html = '';
+      Object.entries(byCat).forEach(([cat, sims]) => {
+        html += `<div style="grid-column:1/-1;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);margin-top:12px;margin-bottom:2px">${esc(cat)}</div>`;
+        sims.forEach(s => {
+          const enabled = !dis.has(s.id);
+          html += `<div class="perm-card${enabled ? ' enabled' : ''}" id="simcard-${s.id}">
+            <div class="perm-info">
+              <div class="perm-label">${esc(s.title)}</div>
+              <div class="perm-desc" style="font-size:11px;margin-top:2px;opacity:.7">${esc(s.id)}</div>
+            </div>
+            <label class="perm-toggle" title="${enabled ? 'Отключить' : 'Включить'}">
+              <input type="checkbox" ${enabled ? 'checked' : ''} onchange="simToggleOne('${s.id}', this.checked)" />
+              <span class="perm-track"></span>
+              <span class="perm-thumb"></span>
+            </label>
+          </div>`;
+        });
+      });
+      grid.innerHTML = html;
+      if (window.lucide) lucide.createIcons();
+    }
+
+    async function simsMasterToggle(checked) {
+      // checked = module enabled; disabled = !checked
+      try {
+        await LS.api('/api/settings/sims', { method: 'PUT', body: JSON.stringify({ module_disabled: !checked }) });
+        _simsSettings.module_disabled = !checked;
+        LS.toast(checked ? 'Модуль симуляций включён' : 'Модуль симуляций отключён', checked ? 'success' : 'warning');
+      } catch(e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+    }
+
+    async function simToggleOne(simId, enabled) {
+      const dis = new Set(_simsSettings.disabled_ids || []);
+      if (enabled) dis.delete(simId); else dis.add(simId);
+      const disabled_ids = [...dis];
+      try {
+        await LS.api('/api/settings/sims', { method: 'PUT', body: JSON.stringify({ disabled_ids }) });
+        _simsSettings.disabled_ids = disabled_ids;
+        // update card style
+        const card = document.getElementById('simcard-' + simId);
+        if (card) card.classList.toggle('enabled', enabled);
+        LS.toast(enabled ? `«${simId}» включена` : `«${simId}» отключена`, enabled ? 'success' : 'warning');
+      } catch(e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+    }
+
+    /* ─── Games features admin ─── */
+    const GAME_FEATURES = [
+      { key: 'hangman',       label: 'Виселица',        desc: 'Игра «Угадай слово» — отгадывание терминов по буквам',              icon: 'gamepad-2'      },
+      { key: 'crossword',     label: 'Кроссворд',       desc: 'Кроссворд из терминов — генерируется автоматически по темам',       icon: 'grid-3x3'       },
+      { key: 'pet',           label: 'Питомец',          desc: 'Виртуальный питомец, отражающий активность ученика',                icon: 'heart'          },
+      { key: 'red_book',      label: 'Красная книга',   desc: 'Интерактивная Красная книга РБ: виды, биомы, пищевые сети, квесты', icon: 'leaf'           },
+      { key: 'collection',    label: 'Коллекция',        desc: 'Коллекция карточек и достижений — игровой прогресс ученика',        icon: 'layers'         },
+      { key: 'flashcards',    label: 'Флеш-карточки',   desc: 'Карточки для запоминания терминов и понятий методом интервальных повторений', icon: 'square-stack'   },
+      { key: 'knowledge_map', label: 'Карта знаний',    desc: 'Визуальная карта тем и связей между биологическими понятиями',      icon: 'share-2'        },
+      { key: 'board',         label: 'Доска',             desc: 'Классная доска с объявлениями, постами и обсуждениями',             icon: 'layout-dashboard'},
+      { key: 'biochem',       label: 'Биохимия',          desc: 'Молекулярный редактор, задачи на построение молекул и реакции',     icon: 'flask-conical'  },
+      { key: 'live_quiz',     label: 'Живая викторина',  desc: 'Синхронная викторина в реальном времени для всего класса',          icon: 'radio'          },
+    ];
+
+    async function loadGamesAdmin() {
+      const grid = document.getElementById('games-features-grid');
+      try {
+        const features = await LS.api('/api/admin/features');
+        grid.innerHTML = '';
+        for (const f of GAME_FEATURES) {
+          const enabled = features[f.key] !== false;
+          const card = document.createElement('div');
+          card.className = 'perm-card' + (enabled ? ' enabled' : '');
+          card.innerHTML = `
+            <div class="perm-info">
+              <div class="perm-label"><i data-lucide="${f.icon}" style="width:14px;height:14px;vertical-align:-2px;margin-right:6px"></i>${f.label}</div>
+              <div class="perm-desc">${f.desc}</div>
+            </div>
+            <label class="perm-toggle">
+              <input type="checkbox" ${enabled ? 'checked' : ''} onchange="toggleGameFeature('${f.key}', this.checked, this)" />
+              <span class="perm-track"></span>
+              <span class="perm-thumb"></span>
+            </label>`;
+          grid.appendChild(card);
+        }
+        if (window.lucide) lucide.createIcons();
+      } catch(e) {
+        grid.innerHTML = '<div class="error">Ошибка загрузки</div>';
+      }
+    }
+
+    async function toggleGameFeature(key, enabled, checkbox) {
+      try {
+        await LS.api('/api/admin/features', {
+          method: 'PATCH',
+          body: JSON.stringify({ [key]: enabled }),
+        });
+        const card = checkbox.closest('.perm-card');
+        if (card) card.classList.toggle('enabled', enabled);
+        LS.toast(enabled ? 'Функция включена' : 'Функция отключена', 'success');
+      } catch(e) {
+        checkbox.checked = !enabled;
+        LS.toast('Ошибка: ' + e.message, 'error');
+      }
+    }
+
+    /* ─── Free-student module features ─── */
+    const FS_FEATURES = [
+      { key: 'gamification', label: 'Геймификация',   desc: 'XP, уровни, достижения, монеты, стрики, магазин', icon: 'trophy' },
+      { key: 'hangman',      label: 'Виселица',        desc: 'Игра «Угадай слово» — отгадывание терминов по буквам', icon: 'gamepad-2' },
+      { key: 'crossword',    label: 'Кроссворд',       desc: 'Кроссворд из терминов — генерируется автоматически', icon: 'grid-3x3' },
+      { key: 'pet',          label: 'Питомец',          desc: 'Виртуальный питомец, отражающий активность ученика', icon: 'heart' },
+      { key: 'red_book',     label: 'Красная книга',   desc: 'Интерактивная Красная книга РБ: виды, биомы, квесты', icon: 'leaf' },
+      { key: 'collection',   label: 'Коллекция',        desc: 'Коллекция карточек и игровой прогресс ученика', icon: 'layers' },
+      { key: 'lab',          label: 'Лаборатория',      desc: 'Виртуальные симуляции и интерактивные опыты', icon: 'flask-conical' },
+      { key: 'knowledge_map',label: 'Карта знаний',    desc: 'Визуальная карта тем и связей между понятиями', icon: 'map' },
+      { key: 'flashcards',   label: 'Флеш-карточки',   desc: 'Карточки для повторения терминов и понятий', icon: 'square-stack' },
+      { key: 'board',        label: 'Доска',             desc: 'Классная доска с объявлениями и постами', icon: 'layout-dashboard' },
+      { key: 'biochem',      label: 'Биохимия',          desc: 'Молекулярный редактор, задачи на построение молекул и реакции', icon: 'flask-conical' },
+      { key: 'live_quiz',    label: 'Живая викторина',  desc: 'Синхронная викторина в реальном времени для всего класса', icon: 'radio' },
+    ];
+
+    async function loadFsFeatures() {
+      const grid = document.getElementById('fs-features-grid');
+      try {
+        const features = await LS.api('/api/admin/free-student-features');
+        grid.innerHTML = '';
+        for (const f of FS_FEATURES) {
+          const enabled = features[f.key] !== false;
+          const card = document.createElement('div');
+          card.className = 'perm-card' + (enabled ? ' enabled' : '');
+          card.innerHTML = `
+            <div class="perm-info">
+              <div class="perm-label"><i data-lucide="${f.icon}" style="width:14px;height:14px;vertical-align:-2px;margin-right:6px"></i>${f.label}</div>
+              <div class="perm-desc">${f.desc}</div>
+            </div>
+            <label class="perm-toggle">
+              <input type="checkbox" ${enabled ? 'checked' : ''} onchange="toggleFsFeature('${f.key}', this.checked, this)" />
+              <span class="perm-track"></span>
+              <span class="perm-thumb"></span>
+            </label>`;
+          grid.appendChild(card);
+        }
+        if (window.lucide) lucide.createIcons();
+      } catch(e) {
+        grid.innerHTML = '<div class="error">Ошибка загрузки</div>';
+      }
+    }
+
+    async function toggleFsFeature(key, enabled, checkbox) {
+      try {
+        await LS.api('/api/admin/free-student-features', {
+          method: 'PATCH',
+          body: JSON.stringify({ [key]: enabled }),
+        });
+        const card = checkbox.closest('.perm-card');
+        if (card) card.classList.toggle('enabled', enabled);
+        LS.toast(enabled ? 'Модуль включён' : 'Модуль отключён', 'success');
+      } catch(e) {
+        checkbox.checked = !enabled;
+        LS.toast('Ошибка: ' + e.message, 'error');
+      }
+    }
+
+    /* ─── Submission log ─── */
+    const SL_STATUSES = { new:'На проверке', reviewed:'Проверено', accepted:'Принято', revision:'На доработке', resubmitted:'Повторно' };
+
+    async function loadSubmissionLog() {
+      const el = document.getElementById('sublog-list');
+      const countEl = document.getElementById('sublog-count');
+      const classId = document.getElementById('sublog-class-filter').value;
+      el.innerHTML = '<div class="spinner"></div>';
+      countEl.textContent = '';
+      try {
+        const url = classId ? `/api/submissions/log?class_id=${classId}` : '/api/submissions/log';
+        const rows = await LS.api(url);
+
+        // Populate class filter on first load
+        const sel = document.getElementById('sublog-class-filter');
+        if (sel.options.length <= 1 && rows.length) {
+          const classMap = new Map();
+          rows.forEach(r => { if (r.class_id && r.class_name) classMap.set(r.class_id, r.class_name); });
+          classMap.forEach((name, id) => {
+            const opt = document.createElement('option');
+            opt.value = id; opt.textContent = name;
+            sel.appendChild(opt);
+          });
+        }
+
+        countEl.textContent = rows.length ? `${rows.length} записей` : '';
+
+        if (!rows.length) {
+          el.innerHTML = `<div class="sl-empty">
+            <div class="sl-empty-icon"><i data-lucide="inbox" style="width:48px;height:48px"></i></div>
+            Удалённых работ нет
+          </div>`;
+          if (window.lucide) lucide.createIcons({ nodes: [el] });
+          return;
+        }
+
+        const ROLE_LABELS = { admin: 'Админ', teacher: 'Учитель', student: 'Ученик' };
+
+        el.innerHTML = `<div class="sl-wrap"><table class="sl-table">
+          <thead><tr>
+            <th>Дата</th>
+            <th>Ученик</th>
+            <th>Файл</th>
+            <th>Задание</th>
+            <th>Класс</th>
+            <th>Статус</th>
+            <th>Оценка</th>
+            <th>Удалил</th>
+          </tr></thead>
+          <tbody>${rows.map(r => {
+            const dt = r.deleted_at ? new Date(r.deleted_at.includes('T') ? r.deleted_at : r.deleted_at.replace(' ','T')+'Z') : null;
+            const dateStr = dt ? dt.toLocaleDateString('ru',{day:'numeric',month:'short'}) + ' ' + dt.toLocaleTimeString('ru',{hour:'2-digit',minute:'2-digit'}) : '—';
+            const initials = (r.student_name || '?').split(' ').slice(0,2).map(w => w[0]?.toUpperCase() || '').join('');
+            const st = r.status || 'new';
+            const gradeVal = r.grade != null ? r.grade : null;
+            const gradeCls = gradeVal != null ? (gradeVal >= 80 ? 'sl-grade-hi' : gradeVal >= 50 ? 'sl-grade-mid' : 'sl-grade-lo') : 'sl-grade-none';
+            const roleCls = 'sl-role-' + (r.deleted_by_role || 'student');
+            return `<tr>
+              <td><span class="sl-date">${dateStr}</span></td>
+              <td><span class="sl-student"><span class="sl-student-avatar">${initials}</span>${esc(r.student_name || '—')}</span></td>
+              <td><span class="sl-file" title="${esc(r.original_name || '')}">${esc(r.original_name || '—')}</span></td>
+              <td><span class="sl-assignment">${esc(r.assignment_title || '—')}</span></td>
+              <td><span class="sl-class">${esc(r.class_name || '—')}</span></td>
+              <td><span class="sl-status sl-status-${st}">${SL_STATUSES[st] || st}</span></td>
+              <td><span class="sl-grade ${gradeCls}">${gradeVal != null ? gradeVal : '—'}</span></td>
+              <td><span class="sl-deleted-by">${esc(r.deleted_by_name || '—')} <span class="sl-role-badge ${roleCls}">${ROLE_LABELS[r.deleted_by_role] || r.deleted_by_role || '?'}</span></span></td>
+            </tr>`;
+          }).join('')}</tbody>
+        </table></div>`;
+        document.getElementById('btn-clear-sublog').style.display = '';
+      } catch (e) {
+        el.innerHTML = `<div class="sl-empty" style="color:#c0306a">Ошибка: ${esc(e.message)}</div>`;
+      }
+    }
+
+    async function clearSubmissionLog() {
+      if (!await LS.confirm('Очистить весь журнал удалённых работ? Это действие необратимо.', { title: 'Очистка журнала', confirmText: 'Очистить', danger: true })) return;
+      try {
+        await LS.api('/api/submissions/log', { method: 'DELETE' });
+        document.getElementById('btn-clear-sublog').style.display = 'none';
+        document.getElementById('sublog-count').textContent = '';
+        document.getElementById('sublog-list').innerHTML = `<div class="sl-empty">
+          <div class="sl-empty-icon"><i data-lucide="inbox" style="width:48px;height:48px"></i></div>
+          Журнал очищен
+        </div>`;
+        if (window.lucide) lucide.createIcons({ nodes: [document.getElementById('sublog-list')] });
+        LS.toast('Журнал очищен', 'success');
+      } catch (e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+    }
+
+    /* ═══ TOPICS ═══════════════════════════════════════════════════════ */
+    let _topicsSubjects = [];
+    async function loadTopicSubjects() {
+      if (_topicsSubjects.length) return;
+      try {
+        _topicsSubjects = await LS.getSubjects();
+        const sel = document.getElementById('topics-subj-filter');
+        sel.innerHTML = _topicsSubjects.map(s => `<option value="${s.id}">${esc(s.name)}</option>`).join('');
+      } catch {}
+    }
+    async function loadTopics() {
+      await loadTopicSubjects();
+      const subjId = document.getElementById('topics-subj-filter').value;
+      const el = document.getElementById('topics-list');
+      el.innerHTML = LS.skeleton(4, 'row');
+      try {
+        const rows = await LS.api(`/api/admin/topics?subject_id=${subjId}`);
+        document.getElementById('topics-count').textContent = rows.length + ' тем';
+        if (!rows.length) { el.innerHTML = '<div style="padding:32px;text-align:center;color:#8898AA">Тем нет</div>'; return; }
+        el.innerHTML = '<div style="display:flex;flex-direction:column;gap:6px">' + rows.map(t => `
+          <div class="adm-panel" style="padding:12px 18px;margin:0;display:flex;align-items:center;gap:14px">
+            <span style="font-size:0.75rem;color:var(--text-3);font-weight:700;min-width:28px">#${t.order_index}</span>
+            <span style="flex:1;font-weight:600">${esc(t.name)}</span>
+            <span style="font-size:0.78rem;color:var(--text-3)">${t.question_count} вопр.</span>
+            <button class="adm-btn adm-btn-small" style="background:var(--border-h);color:var(--text-2);padding:5px 12px" onclick="renameTopic(${t.id},'${esc(t.name).replace(/'/g,"\\'")}')">
+              <i data-lucide="pencil" style="width:12px;height:12px;vertical-align:-1px"></i>
+            </button>
+            <button class="adm-btn adm-btn-small" style="background:rgba(241,91,181,0.1);color:var(--pink);padding:5px 12px" onclick="deleteTopic(${t.id},'${esc(t.name).replace(/'/g,"\\'")}',${t.question_count})">
+              <i data-lucide="trash-2" style="width:12px;height:12px;vertical-align:-1px"></i>
+            </button>
+          </div>`).join('') + '</div>';
+        if (window.lucide) lucide.createIcons({ nodes: [el] });
+      } catch (e) { el.innerHTML = `<div style="color:var(--pink)">${esc(e.message)}</div>`; }
+    }
+    function showAddTopic() { document.getElementById('topics-add-row').style.display = ''; document.getElementById('topics-new-name').focus(); }
+    async function createTopic() {
+      const name = document.getElementById('topics-new-name').value.trim();
+      if (!name) return;
+      const subjId = document.getElementById('topics-subj-filter').value;
+      try {
+        await LS.api('/api/admin/topics', { method:'POST', body: JSON.stringify({ subject_id: subjId, name }) });
+        document.getElementById('topics-new-name').value = '';
+        document.getElementById('topics-add-row').style.display = 'none';
+        LS.toast('Тема создана', 'success');
+        loadTopics();
+      } catch (e) { LS.toast(e.message, 'error'); }
+    }
+    async function renameTopic(id, oldName) {
+      const name = prompt('Новое название темы:', oldName);
+      if (!name || name === oldName) return;
+      try {
+        await LS.api(`/api/admin/topics/${id}`, { method:'PATCH', body: JSON.stringify({ name }) });
+        LS.toast('Тема переименована', 'success');
+        loadTopics();
+      } catch (e) { LS.toast(e.message, 'error'); }
+    }
+    async function deleteTopic(id, name, qcount) {
+      if (qcount > 0) { LS.toast(`Нельзя удалить тему с ${qcount} вопросами`, 'warn'); return; }
+      if (!await LS.confirm(`Удалить тему "${name}"?`, { danger: true })) return;
+      try {
+        await LS.api(`/api/admin/topics/${id}`, { method:'DELETE' });
+        LS.toast('Тема удалена', 'success');
+        loadTopics();
+      } catch (e) { LS.toast(e.message, 'error'); }
+    }
+
+    /* ═══ BROADCAST ═════════════════════════════════════════════════════ */
+    async function sendBroadcast() {
+      const message = document.getElementById('bc-message').value.trim();
+      if (!message) { LS.toast('Введите сообщение', 'warn'); return; }
+      const role = document.getElementById('bc-role').value;
+      const link = document.getElementById('bc-link').value.trim() || null;
+      try {
+        const r = await LS.api('/api/admin/broadcast', { method:'POST', body: JSON.stringify({ message, role, link }) });
+        document.getElementById('bc-result').textContent = `Отправлено ${r.sent} пользователям`;
+        document.getElementById('bc-message').value = '';
+        LS.toast(`Уведомление отправлено ${r.sent} пользователям`, 'success');
+      } catch (e) { LS.toast(e.message, 'error'); }
+    }
+
+    /* ═══ AUDIT LOG ════════════════════════════════════════════════════ */
+    async function loadAuditLog() {
+      const el = document.getElementById('audit-list');
+      el.innerHTML = LS.skeleton(5, 'row');
+      try {
+        const rows = await LS.api('/api/admin/audit-log?limit=200');
+        if (!rows.length) { el.innerHTML = '<div style="padding:32px;text-align:center;color:#8898AA">Журнал пуст</div>'; return; }
+        const ACTION_LABELS = {
+          'user.role_change': 'Смена роли', 'user.edit': 'Редактирование', 'user.ban': 'Блокировка',
+          'user.unban': 'Разблокировка', 'user.delete': 'Удаление', 'user.clear_sessions': 'Очистка истории',
+          'features.update': 'Фичи обновлены', 'topic.create': 'Создание темы', 'topic.update': 'Редакт. темы',
+          'topic.delete': 'Удаление темы', 'broadcast': 'Рассылка',
+        };
+        const ACTION_COLORS = {
+          'user.delete': 'var(--pink)', 'user.ban': 'var(--pink)', 'user.clear_sessions': 'var(--amber)',
+        };
+        el.innerHTML = `<div class="sl-wrap"><table class="sl-table">
+          <thead><tr><th>Дата</th><th>Админ</th><th>Действие</th><th>Цель</th><th>Детали</th><th>IP</th></tr></thead>
+          <tbody>${rows.map(r => {
+            const dt = new Date(r.created_at);
+            const ds = dt.toLocaleDateString('ru',{day:'numeric',month:'short'}) + ' ' + dt.toLocaleTimeString('ru',{hour:'2-digit',minute:'2-digit'});
+            const acol = ACTION_COLORS[r.action] || 'var(--violet)';
+            return `<tr>
+              <td><span class="sl-date">${ds}</span></td>
+              <td>${esc(r.admin_name || '—')}</td>
+              <td><span style="color:${acol};font-weight:700;font-size:0.82rem">${ACTION_LABELS[r.action] || r.action}</span></td>
+              <td style="font-size:0.82rem;color:var(--text-3)">${esc(r.target || '')}</td>
+              <td style="font-size:0.82rem;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="${esc(r.detail || '')}">${esc(r.detail || '')}</td>
+              <td style="font-size:0.78rem;color:var(--text-3);font-family:monospace">${esc(r.ip || '')}</td>
+            </tr>`;
+          }).join('')}</tbody></table></div>`;
+      } catch (e) { el.innerHTML = `<div style="color:var(--pink)">${esc(e.message)}</div>`; }
+    }
+    async function clearAuditLog() {
+      if (!await LS.confirm('Очистить весь аудит-лог?', { danger: true })) return;
+      try {
+        await LS.api('/api/admin/audit-log', { method:'DELETE' });
+        document.getElementById('audit-list').innerHTML = '<div style="padding:32px;text-align:center;color:#8898AA">Журнал очищен</div>';
+        LS.toast('Журнал очищен', 'success');
+      } catch (e) { LS.toast(e.message, 'error'); }
+    }
+
+    /* ═══ ERROR LOG ════════════════════════════════════════════════════ */
+    async function loadErrorLog() {
+      const el = document.getElementById('errors-list');
+      el.innerHTML = LS.skeleton(3, 'row');
+      try {
+        const rows = await LS.api('/api/admin/error-log?limit=200');
+        if (!rows.length) { el.innerHTML = '<div style="padding:32px;text-align:center;color:#8898AA;font-size:0.88rem">Ошибок нет</div>'; return; }
+        el.innerHTML = rows.map(r => {
+          const dt = new Date(r.created_at);
+          const ds = dt.toLocaleDateString('ru',{day:'numeric',month:'short'}) + ' ' + dt.toLocaleTimeString('ru',{hour:'2-digit',minute:'2-digit'});
+          return `<div class="adm-panel" style="padding:14px 18px;margin-bottom:8px;border-left:3px solid var(--pink)">
+            <div style="display:flex;align-items:center;gap:10px;margin-bottom:6px">
+              <span style="font-size:0.78rem;color:var(--pink);font-weight:700">${r.method || ''} ${esc(r.route || '')}</span>
+              <span style="font-size:0.72rem;color:var(--text-3);margin-left:auto">${ds}</span>
+              ${r.user_id ? `<span style="font-size:0.72rem;color:var(--text-3)">user:${r.user_id}</span>` : ''}
+            </div>
+            <div style="font-size:0.88rem;font-weight:600;color:var(--text);margin-bottom:4px">${esc(r.message)}</div>
+            ${r.stack ? `<details><summary style="font-size:0.75rem;color:var(--text-3);cursor:pointer">Stack trace</summary><pre style="font-size:0.72rem;color:var(--text-3);white-space:pre-wrap;max-height:200px;overflow:auto;margin-top:6px;padding:8px;background:rgba(0,0,0,0.02);border-radius:8px">${esc(r.stack)}</pre></details>` : ''}
+          </div>`;
+        }).join('');
+      } catch (e) { el.innerHTML = `<div style="color:var(--pink)">${esc(e.message)}</div>`; }
+    }
+    async function clearErrorLog() {
+      if (!await LS.confirm('Очистить журнал ошибок?', { danger: true })) return;
+      try {
+        await LS.api('/api/admin/error-log', { method:'DELETE' });
+        document.getElementById('errors-list').innerHTML = '<div style="padding:32px;text-align:center;color:#8898AA">Журнал очищен</div>';
+        LS.toast('Журнал очищен', 'success');
+      } catch (e) { LS.toast(e.message, 'error'); }
+    }
+
+    /* ═══ SYSTEM HEALTH ════════════════════════════════════════════════ */
+    async function loadHealth() {
+      const el = document.getElementById('health-content');
+      el.innerHTML = LS.skeleton(3, 'row');
+      try {
+        const h = await LS.api('/api/admin/health');
+        const fmtBytes = b => b > 1e9 ? (b/1e9).toFixed(1)+' GB' : b > 1e6 ? (b/1e6).toFixed(1)+' MB' : (b/1e3).toFixed(0)+' KB';
+        const fmtUp = s => { const d=Math.floor(s/86400), hr=Math.floor(s%86400/3600), m=Math.floor(s%3600/60); return d>0?`${d}d ${hr}h`:hr>0?`${hr}h ${m}m`:`${m}m`; };
+        el.innerHTML = `
+          <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-bottom:24px">
+            <div class="adm-panel" style="padding:18px;margin:0;text-align:center">
+              <div style="font-size:1.3rem;font-weight:800;font-family:'Unbounded',sans-serif;color:var(--green)">${fmtUp(h.uptime)}</div>
+              <div style="font-size:0.72rem;color:var(--text-3);font-weight:700;text-transform:uppercase;margin-top:4px">Uptime</div>
+            </div>
+            <div class="adm-panel" style="padding:18px;margin:0;text-align:center">
+              <div style="font-size:1.3rem;font-weight:800;font-family:'Unbounded',sans-serif;color:var(--violet)">${fmtBytes(h.db.sizeBytes)}</div>
+              <div style="font-size:0.72rem;color:var(--text-3);font-weight:700;text-transform:uppercase;margin-top:4px">База данных</div>
+            </div>
+            <div class="adm-panel" style="padding:18px;margin:0;text-align:center">
+              <div style="font-size:1.3rem;font-weight:800;font-family:'Unbounded',sans-serif">${fmtBytes(h.uploads.sizeBytes)}</div>
+              <div style="font-size:0.72rem;color:var(--text-3);font-weight:700;text-transform:uppercase;margin-top:4px">Файлы</div>
+            </div>
+            <div class="adm-panel" style="padding:18px;margin:0;text-align:center">
+              <div style="font-size:1.3rem;font-weight:800;font-family:'Unbounded',sans-serif;color:${h.recentErrors>0?'var(--pink)':'var(--green)'}">${h.recentErrors}</div>
+              <div style="font-size:0.72rem;color:var(--text-3);font-weight:700;text-transform:uppercase;margin-top:4px">Ошибок за 24ч</div>
+            </div>
+          </div>
+          <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px">
+            <div class="adm-panel" style="margin:0">
+              <div class="adm-panel-title">Платформа</div>
+              <table style="width:100%;font-size:0.88rem">
+                <tr><td style="color:var(--text-3);padding:4px 0">Node.js</td><td style="font-weight:600">${h.node}</td></tr>
+                <tr><td style="color:var(--text-3);padding:4px 0">OS</td><td style="font-weight:600">${h.platform}</td></tr>
+                <tr><td style="color:var(--text-3);padding:4px 0">CPU ядра</td><td style="font-weight:600">${h.cpus}</td></tr>
+                <tr><td style="color:var(--text-3);padding:4px 0">RAM использовано</td><td style="font-weight:600">${fmtBytes(h.memory.rss)}</td></tr>
+                <tr><td style="color:var(--text-3);padding:4px 0">RAM heap</td><td style="font-weight:600">${fmtBytes(h.memory.heapUsed)}</td></tr>
+                <tr><td style="color:var(--text-3);padding:4px 0">RAM свободно</td><td style="font-weight:600">${fmtBytes(h.freeMem)} / ${fmtBytes(h.totalMem)}</td></tr>
+              </table>
+            </div>
+            <div class="adm-panel" style="margin:0">
+              <div class="adm-panel-title">Данные</div>
+              <table style="width:100%;font-size:0.88rem">
+                <tr><td style="color:var(--text-3);padding:4px 0">Пользователей</td><td style="font-weight:600">${h.db.totalUsers}</td></tr>
+                <tr><td style="color:var(--text-3);padding:4px 0">Всего сессий</td><td style="font-weight:600">${h.db.totalSessions}</td></tr>
+                <tr><td style="color:var(--text-3);padding:4px 0">Сессий сегодня</td><td style="font-weight:600;color:var(--violet)">${h.db.todaySessions}</td></tr>
+                <tr><td style="color:var(--text-3);padding:4px 0">Вопросов в базе</td><td style="font-weight:600">${h.db.totalQuestions}</td></tr>
+              </table>
+            </div>
+          </div>`;
+      } catch (e) { el.innerHTML = `<div style="color:var(--pink)">${esc(e.message)}</div>`; }
+    }
+
+    /* ─── wire tab loading ─── */
+    const _origSwitchTab = window.switchTab;
+    window.switchTab = function(btn) {
+      _origSwitchTab(btn);
+      const tab = btn.dataset.tab;
+      if (tab === 'topics') loadTopics();
+      else if (tab === 'audit') loadAuditLog();
+      else if (tab === 'errors') loadErrorLog();
+      else if (tab === 'health') loadHealth();
+    };
+
+    /* ─── init ─── */
+    loadStats();
+    if (window.lucide) lucide.createIcons();
+  </script>
+  </div>
+</div>
+<script src="/js/search.js"></script>
+<script src="/js/mobile.js"></script>
+</body>
+</html>
diff --git a/frontend/analytics.html b/frontend/analytics.html
new file mode 100644
index 0000000..ea7521a
--- /dev/null
+++ b/frontend/analytics.html
@@ -0,0 +1,711 @@
+<!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://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+  <style>
+    .sb-content { background: #f4f5f8; overflow-y: auto; }
+
+    /* ── page header ── */
+    .an-header {
+      background: linear-gradient(140deg, #0a0220 0%, #1a0a3c 60%, #080818 100%);
+      padding: 32px 28px 28px; position: relative; overflow: hidden;
+    }
+    .an-header-dots {
+      position: absolute; inset: 0;
+      background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
+      background-size: 22px 22px; pointer-events: none;
+    }
+    .an-header-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; }
+    .an-header-back {
+      display: inline-flex; align-items: center; gap: 6px;
+      font-size: 0.78rem; font-weight: 700; color: rgba(255,255,255,0.45);
+      text-decoration: none; margin-bottom: 14px; transition: color 0.15s;
+    }
+    .an-header-back:hover { color: rgba(255,255,255,0.8); }
+    .an-title-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
+    .an-title {
+      font-family: 'Unbounded', sans-serif; font-size: 1.3rem; font-weight: 800;
+      color: #fff; flex: 1; display: flex; align-items: center; gap: 10px;
+    }
+    .an-class-select {
+      padding: 8px 14px; border: 1.5px solid rgba(255,255,255,0.15); border-radius: 10px;
+      font-family: 'Manrope', sans-serif; font-size: 0.84rem; font-weight: 600;
+      color: #fff; background: rgba(255,255,255,0.08); cursor: pointer;
+    }
+    .an-class-select option { color: #0F172A; background: #fff; }
+
+    /* ── summary chips ── */
+    .an-summary {
+      display: flex; gap: 12px; flex-wrap: wrap; max-width: 1200px;
+      margin: -20px auto 0; padding: 0 28px; position: relative; z-index: 2;
+    }
+    .an-chip {
+      flex: 1; min-width: 160px; background: #fff;
+      border: 1.5px solid rgba(15,23,42,0.07);
+      border-radius: 16px; padding: 16px 20px;
+      box-shadow: 0 2px 8px rgba(15,23,42,0.06);
+    }
+    .an-chip-val {
+      font-family: 'Unbounded', sans-serif; font-size: 1.5rem; font-weight: 800;
+    }
+    .an-chip-label { font-size: 0.72rem; color: #8898AA; font-weight: 600; margin-top: 4px; }
+
+    /* ── content container ── */
+    .an-container { max-width: 1200px; margin: 0 auto; padding: 28px 28px 80px; }
+
+    /* ── section title ── */
+    .an-section-title {
+      font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 800;
+      color: #0F172A; margin: 0 0 14px; display: flex; align-items: center; gap: 8px;
+    }
+
+    /* ── card wrapper ── */
+    .an-card {
+      background: #fff; border: 1.5px solid rgba(15,23,42,0.07);
+      border-radius: 20px; padding: 22px 24px;
+      box-shadow: 0 2px 8px rgba(15,23,42,0.05);
+      margin-bottom: 20px;
+    }
+
+    /* ── chart area ── */
+    .chart-wrap { position: relative; height: 240px; }
+
+    /* ── hard questions table ── */
+    .hq-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
+    .hq-table thead th {
+      padding: 10px 14px; text-align: left;
+      background: #f8f9fc; border-bottom: 1.5px solid rgba(15,23,42,0.08);
+      font-size: 0.7rem; font-weight: 700; color: #8898AA;
+      text-transform: uppercase; letter-spacing: 0.04em;
+    }
+    .hq-table tbody td {
+      padding: 10px 14px; border-bottom: 1px solid rgba(15,23,42,0.05);
+      color: #3D4F6B; font-weight: 500;
+    }
+    .hq-table tbody tr:last-child td { border-bottom: none; }
+    .hq-table tbody tr:hover td { background: rgba(155,93,229,0.02); }
+    .hq-rank {
+      font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800;
+      color: #0F172A; text-align: center;
+    }
+    .hq-text { max-width: 320px; }
+    .hq-text-inner {
+      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+      overflow: hidden; font-weight: 600; color: #0F172A;
+    }
+    .hq-topic { font-size: 0.72rem; color: #8898AA; margin-top: 2px; }
+    .diff-badge {
+      display: inline-flex; align-items: center;
+      padding: 3px 10px; border-radius: 999px;
+      font-size: 0.7rem; font-weight: 700; white-space: nowrap;
+    }
+    .diff-1 { background: rgba(6,214,160,0.12); color: #059652; }
+    .diff-2 { background: rgba(255,179,71,0.15); color: #B8860B; }
+    .diff-3 { background: rgba(239,71,111,0.12); color: #EF476F; }
+    .hq-pct { font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 800; }
+    .hq-pct-hi  { color: #EF476F; }
+    .hq-pct-mid { color: #B8860B; }
+    .hq-pct-lo  { color: #059652; }
+
+    /* ── heatmap ── */
+    .heatmap-wrap { overflow-x: auto; }
+    .heatmap-grid {
+      display: grid; grid-template-rows: repeat(7, 14px);
+      grid-auto-flow: column; gap: 3px;
+      grid-auto-columns: 14px;
+      min-width: max-content;
+    }
+    .hm-cell {
+      width: 14px; height: 14px; border-radius: 3px;
+      background: rgba(155,93,229,0.08);
+      transition: transform 0.12s;
+      cursor: default;
+      position: relative;
+    }
+    .hm-cell:hover { transform: scale(1.3); z-index: 10; }
+    .hm-0 { background: rgba(155,93,229,0.07); }
+    .hm-1 { background: rgba(155,93,229,0.20); }
+    .hm-2 { background: rgba(155,93,229,0.38); }
+    .hm-3 { background: rgba(155,93,229,0.56); }
+    .hm-4 { background: rgba(155,93,229,0.80); }
+    .heatmap-legend {
+      display: flex; align-items: center; gap: 6px;
+      margin-top: 10px; font-size: 0.7rem; color: #8898AA; font-weight: 600;
+    }
+    .hm-legend-cell {
+      width: 12px; height: 12px; border-radius: 2px;
+    }
+    .heatmap-days {
+      display: grid; grid-template-rows: repeat(7, 14px); gap: 3px;
+      font-size: 0.62rem; color: #8898AA; font-weight: 700;
+      margin-right: 8px; flex-shrink: 0;
+    }
+    .heatmap-row { display: flex; align-items: flex-start; }
+    .heatmap-months {
+      display: flex; margin-left: 30px; margin-bottom: 4px;
+      font-size: 0.65rem; color: #8898AA; font-weight: 700;
+    }
+    .hm-month { flex-shrink: 0; }
+
+    /* ── assignments progress ── */
+    .asgn-list { display: flex; flex-direction: column; gap: 12px; }
+    .asgn-item { display: flex; align-items: center; gap: 14px; }
+    .asgn-title {
+      min-width: 180px; max-width: 240px; font-size: 0.82rem; font-weight: 600;
+      color: #0F172A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+      flex-shrink: 0;
+    }
+    .asgn-bar-wrap {
+      flex: 1; height: 10px; background: rgba(155,93,229,0.1);
+      border-radius: 999px; overflow: hidden;
+    }
+    .asgn-bar-fill {
+      height: 100%; border-radius: 999px;
+      background: linear-gradient(90deg, #9B5DE5, #06D6E0);
+      transition: width 0.5s ease;
+    }
+    .asgn-pct {
+      min-width: 42px; text-align: right;
+      font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800;
+      color: var(--violet);
+    }
+    .asgn-deadline {
+      font-size: 0.7rem; color: #8898AA; flex-shrink: 0; min-width: 80px;
+    }
+
+    /* ── empty state ── */
+    .an-empty {
+      text-align: center; padding: 80px 20px; color: #8898AA; font-size: 0.9rem;
+    }
+    .an-empty-icon { margin-bottom: 14px; opacity: 0.25; }
+
+    /* ── nav ── */
+    .nav-active {
+      background: rgba(155,93,229,0.08) !important;
+      border-color: var(--violet) !important;
+      color: var(--violet) !important;
+      cursor: default; pointer-events: none;
+    }
+    .notif-badge {
+      position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px;
+      padding: 0 4px; background: var(--pink); color: #fff; border-radius: 99px;
+      font-size: 0.65rem; font-weight: 700;
+      display: flex; align-items: center; justify-content: center;
+    }
+    .notif-drop-header {
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 14px 16px 10px; border-bottom: 1px solid var(--border);
+    }
+    .notif-drop-title { font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800; }
+    .notif-read-all {
+      background: none; border: none; font-size: 0.74rem; color: var(--violet);
+      cursor: pointer; font-family: 'Manrope', sans-serif; font-weight: 600;
+    }
+    .notif-item {
+      display: flex; gap: 10px; padding: 11px 16px;
+      border-bottom: 1px solid var(--border);
+      cursor: pointer; transition: background var(--tr);
+      text-decoration: none; color: inherit;
+    }
+    .notif-item:last-child { border-bottom: none; }
+    .notif-item:hover { background: rgba(155,93,229,0.04); }
+    .notif-item.unread { background: rgba(155,93,229,0.05); }
+    .notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); flex-shrink: 0; margin-top: 5px; }
+    .notif-dot.read { background: transparent; border: 1.5px solid var(--border-h); }
+    .notif-msg { font-size: 0.80rem; line-height: 1.45; flex: 1; }
+    .notif-time { font-size: 0.70rem; color: var(--text-3); margin-top: 2px; }
+    .notif-empty { padding: 28px 16px; text-align: center; color: var(--text-3); font-size: 0.84rem; }
+
+    @media (max-width: 768px) {
+      .an-header { padding: 20px 16px 36px; }
+      .an-title { font-size: 1rem; }
+      .an-class-select { width: 100%; }
+      .an-summary { padding: 0 14px; gap: 8px; margin-top: -24px; }
+      .an-chip { min-width: 0; flex: 1 1 calc(50% - 8px); padding: 12px 14px; }
+      .an-chip-val { font-size: 1.1rem; }
+      .an-container { padding: 18px 12px 80px; }
+      .hq-text { max-width: 160px; }
+      .asgn-title { min-width: 100px; max-width: 120px; }
+    }
+    @media (max-width: 480px) {
+      .an-chip { flex: 1 1 100%; }
+    }
+  </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" onclick="toggleSidebar()" 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"><i data-lucide="layout-dashboard" class="sb-icon"></i><span class="sb-lbl">Доска</span></a>
+      <a href="/classes"       class="sb-link"><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>
+      <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>
+      <a href="/live-quiz"     class="sb-link"><i data-lucide="radio"            class="sb-icon"></i><span class="sb-lbl">Live-квиз</span></a>
+      <a href="/gradebook"     class="sb-link"><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="toggleNotifDrop()">
+          <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>
+    </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>
+          <span class="sb-logout" style="pointer-events:none">Мой профиль</span>
+        </div>
+      </a>
+    </div>
+  </aside>
+  <div class="notif-drop" id="notif-drop"></div>
+  <div class="sb-content">
+
+    <!-- Header -->
+    <div class="an-header">
+      <div class="an-header-dots"></div>
+      <div class="an-header-inner">
+        <a href="/classes" class="an-header-back"><i data-lucide="arrow-left" style="width:14px;height:14px"></i> Классы</a>
+        <div class="an-title-row">
+          <div class="an-title"><i data-lucide="bar-chart-2" style="width:22px;height:22px;opacity:0.5"></i> Аналитика</div>
+          <select class="an-class-select" id="class-select" onchange="onClassChange()">
+            <option value="">Выберите класс…</option>
+          </select>
+        </div>
+      </div>
+    </div>
+
+    <!-- Summary chips -->
+    <div class="an-summary" id="an-summary" style="display:none">
+      <div class="an-chip">
+        <div class="an-chip-val" id="chip-students" style="color:var(--violet)">0</div>
+        <div class="an-chip-label">Учеников</div>
+      </div>
+      <div class="an-chip">
+        <div class="an-chip-val" id="chip-sessions" style="color:#06B6D4">0</div>
+        <div class="an-chip-label">Сессий</div>
+      </div>
+      <div class="an-chip">
+        <div class="an-chip-val" id="chip-avg" style="color:#06D6A0">—</div>
+        <div class="an-chip-label">Средний балл</div>
+      </div>
+    </div>
+
+    <!-- Content -->
+    <div class="an-container" id="an-container">
+      <div class="an-empty" id="an-empty">
+        <div class="an-empty-icon"><i data-lucide="bar-chart-2" style="width:56px;height:56px"></i></div>
+        <div style="font-family:'Unbounded',sans-serif;font-weight:800;font-size:1rem;color:#0F172A;margin-bottom:6px">Выберите класс</div>
+        Выберите класс из списка выше, чтобы увидеть аналитику
+      </div>
+    </div>
+
+  </div>
+</div>
+
+<script src="/js/api.js"></script>
+<script>
+  if (!LS.requireAuth()) throw new Error();
+
+  const user = LS.getUser();
+  document.getElementById('nav-user').textContent = user?.name || user?.email || '';
+  document.getElementById('nav-avatar').textContent =
+    (user?.name || 'LS').split(' ').slice(0, 2).map(w => w[0]?.toUpperCase() || '').join('') || 'LS';
+
+  const isTeacher = ['admin', 'teacher'].includes(user?.role);
+  if (!isTeacher) { location.href = '/dashboard'; throw new Error(); }
+  if (user?.role === 'admin') document.getElementById('btn-admin').style.display = '';
+
+  /* ── helpers ── */
+  function fmtDate(s) {
+    if (!s) return '—';
+    const d = new Date(s.includes('T') ? s : s + 'T00:00:00');
+    return d.toLocaleDateString('ru', { day: '2-digit', month: '2-digit', year: 'numeric' });
+  }
+  function fmtTime(s) {
+    const d = new Date(s && s.includes('T') ? s : (s || '').replace(' ', 'T') + 'Z');
+    const diff = Date.now() - d.getTime();
+    if (diff < 60000) return 'только что';
+    if (diff < 3600000) return Math.floor(diff / 60000) + ' мин назад';
+    return d.toLocaleDateString('ru', { day: 'numeric', month: 'short' });
+  }
+
+  /* ── sidebar ── */
+  function toggleSidebar() {
+    const layout = document.querySelector('.app-layout');
+    const collapsed = layout.classList.toggle('sb-collapsed');
+    localStorage.setItem('ls_sb_collapsed', collapsed ? '1' : '');
+    lucide.createIcons();
+  }
+  if (localStorage.getItem('ls_sb_collapsed'))
+    document.querySelector('.app-layout').classList.add('sb-collapsed');
+
+  /* ── notifications ── */
+  function toggleNotifDrop() {
+    const btn = document.getElementById('notif-btn');
+    const drop = document.getElementById('notif-drop');
+    const r = btn.getBoundingClientRect();
+    drop.style.left = (r.right + 8) + 'px';
+    drop.style.top = r.top + 'px';
+    if (drop.classList.toggle('open')) loadNotifs();
+  }
+  async function loadNotifs() {
+    const drop = document.getElementById('notif-drop');
+    drop.innerHTML = '<div class="notif-drop-header"><span class="notif-drop-title">Уведомления</span><button class="notif-read-all" onclick="readAllNotifs()">Прочитать все</button></div><div class="notif-empty">Загрузка…</div>';
+    try {
+      const data = await LS.api('/api/notifications?limit=20');
+      const items = data.items || [];
+      const badge = document.getElementById('notif-badge');
+      const unread = items.filter(n => !n.is_read).length;
+      badge.textContent = unread; badge.style.display = unread ? '' : 'none';
+      if (!items.length) { drop.querySelector('.notif-empty').textContent = 'Нет уведомлений'; return; }
+      drop.innerHTML = '<div class="notif-drop-header"><span class="notif-drop-title">Уведомления</span><button class="notif-read-all" onclick="readAllNotifs()">Прочитать все</button></div>' +
+        items.map(n => `<a class="notif-item${n.is_read ? '' : ' unread'}" href="${LS.safeHref(n.link)}" onclick="markRead(${n.id})">
+          <div class="notif-dot${n.is_read ? ' read' : ''}"></div>
+          <div><div class="notif-msg">${esc(n.message)}</div><div class="notif-time">${fmtTime(n.created_at)}</div></div>
+        </a>`).join('');
+    } catch {}
+  }
+  async function markRead(id) { try { await LS.api('/api/notifications/' + id + '/read', { method: 'POST' }); } catch {} }
+  async function readAllNotifs() { try { await LS.api('/api/notifications/read-all', { method: 'POST' }); loadNotifs(); } catch {} }
+  document.addEventListener('click', e => {
+    const drop = document.getElementById('notif-drop');
+    if (drop.classList.contains('open') && !drop.contains(e.target) && !document.getElementById('notif-btn').contains(e.target))
+      drop.classList.remove('open');
+  });
+
+  /* ── load classes ── */
+  async function loadClasses() {
+    try {
+      const classes = await LS.api('/api/classes');
+      const sel = document.getElementById('class-select');
+      (classes || []).forEach(c => {
+        const opt = document.createElement('option');
+        opt.value = c.id;
+        opt.textContent = c.name;
+        sel.appendChild(opt);
+      });
+      const urlClass = new URLSearchParams(location.search).get('classId');
+      if (urlClass) { sel.value = urlClass; onClassChange(); }
+    } catch {}
+  }
+
+  let trendChart = null;
+
+  function onClassChange() {
+    const classId = document.getElementById('class-select').value;
+    if (!classId) {
+      document.getElementById('an-summary').style.display = 'none';
+      document.getElementById('an-container').innerHTML = `
+        <div class="an-empty" id="an-empty">
+          <div class="an-empty-icon"><i data-lucide="bar-chart-2" style="width:56px;height:56px"></i></div>
+          <div style="font-family:'Unbounded',sans-serif;font-weight:800;font-size:1rem;color:#0F172A;margin-bottom:6px">Выберите класс</div>
+          Выберите класс из списка выше, чтобы увидеть аналитику
+        </div>`;
+      lucide.createIcons();
+      return;
+    }
+    loadAnalytics(classId);
+  }
+
+  async function loadAnalytics(classId) {
+    document.getElementById('an-container').innerHTML = '<div class="spinner" style="margin:80px auto"></div>';
+    document.getElementById('an-summary').style.display = 'none';
+    try {
+      const data = await LS.api('/api/analytics/teacher?classId=' + classId);
+      renderAnalytics(data);
+    } catch (e) {
+      document.getElementById('an-container').innerHTML = `<div class="an-empty"><div class="an-empty-icon"><i data-lucide="alert-circle" style="width:48px;height:48px"></i></div>${esc(e.message || 'Ошибка загрузки')}</div>`;
+      lucide.createIcons();
+    }
+  }
+
+  function renderAnalytics(data) {
+    const { overview = {}, scoreByWeek = [], hardQuestions = [], heatmap = [], assignments = [] } = data;
+
+    // chips
+    const summary = document.getElementById('an-summary');
+    summary.style.display = '';
+    document.getElementById('chip-students').textContent = overview.students ?? 0;
+    document.getElementById('chip-sessions').textContent = overview.sessions ?? 0;
+    document.getElementById('chip-avg').textContent = overview.avgScore != null ? (overview.avgScore + '%') : '—';
+
+    // destroy old chart
+    if (trendChart) { trendChart.destroy(); trendChart = null; }
+
+    let html = '';
+
+    // ── Score trend chart ──
+    html += `<div class="an-section-title"><i data-lucide="trending-up" style="width:15px;height:15px;opacity:0.5"></i> Динамика среднего балла</div>
+    <div class="an-card">
+      <div class="chart-wrap"><canvas id="trend-canvas"></canvas></div>
+    </div>`;
+
+    // ── Hard questions table ──
+    html += `<div class="an-section-title" style="margin-top:8px"><i data-lucide="alert-triangle" style="width:15px;height:15px;opacity:0.5"></i> Сложные вопросы</div>
+    <div class="an-card" style="padding:0;overflow:hidden">`;
+    if (hardQuestions.length) {
+      html += `<div style="overflow-x:auto"><table class="hq-table">
+        <thead><tr>
+          <th style="width:40px;text-align:center">#</th>
+          <th>Вопрос</th>
+          <th>Тема</th>
+          <th>Сложность</th>
+          <th>% ошибок</th>
+          <th>Попыток</th>
+        </tr></thead><tbody>`;
+      hardQuestions.forEach((q, i) => {
+        const errPct = Math.round((q.errorRate || 0) * 100);
+        const errCls = errPct >= 60 ? 'hq-pct-hi' : errPct >= 35 ? 'hq-pct-mid' : 'hq-pct-lo';
+        const diffLabel = q.difficulty === 1 ? 'Лёгкий' : q.difficulty === 2 ? 'Средний' : 'Сложный';
+        const diffCls = q.difficulty === 1 ? 'diff-1' : q.difficulty === 2 ? 'diff-2' : 'diff-3';
+        html += `<tr>
+          <td class="hq-rank">${i + 1}</td>
+          <td class="hq-text">
+            <div class="hq-text-inner">${esc(q.text)}</div>
+          </td>
+          <td><span style="font-size:0.75rem;color:#8898AA;font-weight:600">${esc(q.topic || '—')}</span></td>
+          <td><span class="diff-badge ${diffCls}">${diffLabel}</span></td>
+          <td><span class="hq-pct ${errCls}">${errPct}%</span></td>
+          <td style="font-weight:600">${q.attempts || 0}</td>
+        </tr>`;
+      });
+      html += '</tbody></table></div>';
+    } else {
+      html += '<div style="padding:40px;text-align:center;color:#8898AA;font-size:0.88rem">Нет данных о сложных вопросах</div>';
+    }
+    html += '</div>';
+
+    // ── Activity heatmap ──
+    html += `<div class="an-section-title" style="margin-top:8px"><i data-lucide="calendar" style="width:15px;height:15px;opacity:0.5"></i> Активность за 13 недель</div>
+    <div class="an-card">
+      <div id="heatmap-area"></div>
+      <div class="heatmap-legend">
+        <span>Меньше</span>
+        <div class="hm-legend-cell hm-0"></div>
+        <div class="hm-legend-cell hm-1"></div>
+        <div class="hm-legend-cell hm-2"></div>
+        <div class="hm-legend-cell hm-3"></div>
+        <div class="hm-legend-cell hm-4"></div>
+        <span>Больше</span>
+      </div>
+    </div>`;
+
+    // ── Assignment completion ──
+    html += `<div class="an-section-title" style="margin-top:8px"><i data-lucide="check-circle" style="width:15px;height:15px;opacity:0.5"></i> Выполнение заданий</div>
+    <div class="an-card">`;
+    if (assignments.length) {
+      html += '<div class="asgn-list">';
+      assignments.forEach(a => {
+        const pct = a.total > 0 ? Math.round((a.done / a.total) * 100) : 0;
+        html += `<div class="asgn-item">
+          <div class="asgn-title" title="${esc(a.title)}">${esc(a.title)}</div>
+          <div class="asgn-bar-wrap"><div class="asgn-bar-fill" style="width:${pct}%"></div></div>
+          <div class="asgn-pct">${pct}%</div>
+          <div class="asgn-deadline">${a.done}/${a.total} · ${fmtDate(a.deadline)}</div>
+        </div>`;
+      });
+      html += '</div>';
+    } else {
+      html += '<div style="text-align:center;color:#8898AA;padding:30px;font-size:0.88rem">Нет заданий</div>';
+    }
+    html += '</div>';
+
+    document.getElementById('an-container').innerHTML = html;
+    lucide.createIcons();
+
+    // render chart
+    requestAnimationFrame(() => {
+      const canvas = document.getElementById('trend-canvas');
+      if (canvas && scoreByWeek.length) {
+        trendChart = new Chart(canvas, {
+          type: 'line',
+          data: {
+            labels: scoreByWeek.map(w => w.week || ''),
+            datasets: [{
+              label: 'Средний балл',
+              data: scoreByWeek.map(w => w.avg),
+              borderColor: '#9B5DE5',
+              backgroundColor: 'rgba(155,93,229,0.1)',
+              borderWidth: 2.5,
+              pointBackgroundColor: '#9B5DE5',
+              pointRadius: 4,
+              pointHoverRadius: 6,
+              tension: 0.4,
+              fill: true,
+            }, {
+              label: 'Сессии',
+              data: scoreByWeek.map(w => w.sessions),
+              borderColor: '#06D6E0',
+              backgroundColor: 'rgba(6,214,224,0.07)',
+              borderWidth: 2,
+              pointBackgroundColor: '#06D6E0',
+              pointRadius: 3,
+              pointHoverRadius: 5,
+              tension: 0.4,
+              fill: true,
+              yAxisID: 'y2',
+            }],
+          },
+          options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+              legend: {
+                labels: { font: { family: 'Manrope', weight: '600', size: 12 }, color: '#3D4F6B', boxWidth: 14 },
+              },
+              tooltip: { mode: 'index', intersect: false },
+            },
+            scales: {
+              x: {
+                grid: { color: 'rgba(15,23,42,0.05)' },
+                ticks: { font: { family: 'Manrope', size: 11 }, color: '#8898AA' },
+              },
+              y: {
+                min: 0, max: 100,
+                grid: { color: 'rgba(15,23,42,0.05)' },
+                ticks: {
+                  font: { family: 'Manrope', size: 11 }, color: '#8898AA',
+                  callback: v => v + '%',
+                },
+              },
+              y2: {
+                position: 'right',
+                grid: { display: false },
+                ticks: { font: { family: 'Manrope', size: 11 }, color: '#8898AA' },
+              },
+            },
+          },
+        });
+      } else if (canvas) {
+        canvas.parentElement.innerHTML = '<div style="display:flex;align-items:center;justify-content:center;height:100%;color:#8898AA;font-size:0.88rem">Нет данных за последние недели</div>';
+      }
+
+      // render heatmap
+      renderHeatmap(heatmap);
+    });
+  }
+
+  function renderHeatmap(heatmapData) {
+    const area = document.getElementById('heatmap-area');
+    if (!area) return;
+
+    // build map by date string
+    const dataMap = {};
+    heatmapData.forEach(d => { dataMap[d.day] = d.sessions; });
+
+    // figure out max for scale
+    const maxVal = Math.max(...heatmapData.map(d => d.sessions), 1);
+
+    // build 13 weeks × 7 days grid (ending today)
+    const WEEKS = 13;
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    // start from Sunday of the week 13 weeks ago
+    const startDate = new Date(today);
+    startDate.setDate(startDate.getDate() - (WEEKS * 7) + 1);
+
+    const days = ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'];
+    const months = ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'];
+
+    let cells = [];
+    let monthLabels = [];
+    let lastMonth = -1;
+    let colIdx = 0;
+
+    const cur = new Date(startDate);
+    while (cur <= today) {
+      const dateStr = cur.toISOString().slice(0, 10);
+      const sessions = dataMap[dateStr] || 0;
+      const ratio = sessions / maxVal;
+      const lvl = sessions === 0 ? 0 : ratio < 0.25 ? 1 : ratio < 0.5 ? 2 : ratio < 0.75 ? 3 : 4;
+
+      if (cur.getMonth() !== lastMonth) {
+        monthLabels.push({ col: colIdx, name: months[cur.getMonth()] });
+        lastMonth = cur.getMonth();
+      }
+
+      cells.push({ dateStr, sessions, lvl, dow: cur.getDay() });
+      if (cur.getDay() === 6) colIdx++;
+      cur.setDate(cur.getDate() + 1);
+    }
+
+    // build month label bar
+    let monthHtml = '';
+    if (monthLabels.length) {
+      monthLabels.forEach((ml, i) => {
+        const nextCol = monthLabels[i + 1]?.col ?? (colIdx + 1);
+        const width = (nextCol - ml.col) * (14 + 3);
+        monthHtml += `<div class="hm-month" style="width:${width}px">${ml.name}</div>`;
+      });
+    }
+
+    // build grid: 7 rows per column, columns = weeks
+    const totalCols = WEEKS;
+    const gridCells = Array.from({ length: totalCols * 7 }, () => ({ sessions: 0, lvl: 0, dateStr: '' }));
+    let colTrack = 0;
+    cells.forEach((c, idx) => {
+      const col = Math.floor(idx / 7);
+      const row = c.dow;
+      const gridIdx = col * 7 + row;
+      if (gridIdx < gridCells.length) gridCells[gridIdx] = c;
+    });
+
+    let gridHtml = '';
+    gridCells.forEach(c => {
+      gridHtml += `<div class="hm-cell hm-${c.lvl}" title="${c.dateStr ? c.dateStr + ': ' + c.sessions + ' сессий' : ''}"></div>`;
+    });
+
+    area.innerHTML = `
+      <div style="display:flex;gap:0">
+        <div class="heatmap-days">
+          ${days.map((d, i) => `<div style="display:flex;align-items:center;font-size:0.62rem;color:#8898AA;font-weight:700">${i % 2 === 1 ? d : ''}</div>`).join('')}
+        </div>
+        <div>
+          <div class="heatmap-months" style="margin-left:0">${monthHtml}</div>
+          <div class="heatmap-wrap">
+            <div class="heatmap-grid" style="grid-template-columns: repeat(${totalCols}, 14px)">
+              ${gridHtml}
+            </div>
+          </div>
+        </div>
+      </div>`;
+  }
+
+  lucide.createIcons();
+  loadClasses();
+</script>
+<script src="/js/notifications.js"></script>
+<script src="/js/search.js"></script>
+<script src="/js/mobile.js"></script>
+</body>
+</html>
diff --git a/frontend/biochem-library.html b/frontend/biochem-library.html
new file mode 100644
index 0000000..c83a284
--- /dev/null
+++ b/frontend/biochem-library.html
@@ -0,0 +1,673 @@
+<!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" />
+  <style>
+    html, body { height: 100%; overflow: hidden; }
+    .app-layout { height: 100vh; overflow: hidden; }
+    .sb-content { padding: 0 !important; overflow: hidden; display: flex; flex-direction: column; background: #07070f; }
+    .sb-sub-link { padding-left: 28px !important; font-size: 0.76rem !important; opacity: .75; }
+    .sb-sub-link:hover { opacity: 1; }
+
+    /* ── Page header ── */
+    .page-header {
+      padding: 22px 28px 18px;
+      background: linear-gradient(135deg, rgba(155,93,229,.12) 0%, rgba(6,214,224,.06) 100%);
+      border-bottom: 1px solid rgba(155,93,229,.15);
+      flex-shrink: 0;
+      display: flex; align-items: center; gap: 16px;
+    }
+    .page-header-icon {
+      width: 46px; height: 46px; border-radius: 14px;
+      background: rgba(6,214,224,.12); border: 1.5px solid rgba(6,214,224,.2);
+      display: flex; align-items: center; justify-content: center;
+      font-size: 1.4rem; flex-shrink: 0;
+    }
+    .page-title {
+      font-family: 'Unbounded', sans-serif; font-size: 1.05rem; font-weight: 800;
+      color: #f0f0ff; margin-bottom: 3px;
+      background: linear-gradient(135deg,#c084fc,#06D6E0); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
+    }
+    .page-subtitle { font-size: 0.8rem; color: #666; }
+
+    /* ── Filters ── */
+    .filters-row {
+      display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
+      padding: 12px 20px;
+      background: rgba(7,7,20,0.9);
+      border-bottom: 1px solid rgba(255,255,255,.06);
+      flex-shrink: 0;
+    }
+    .filter-input {
+      flex: 1; min-width: 200px; max-width: 280px;
+      padding: 8px 14px; border-radius: 10px;
+      background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.09);
+      color: #ddd; font-family: 'Manrope', sans-serif; font-size: 0.83rem;
+      outline: none; transition: border-color .18s;
+    }
+    .filter-input:focus { border-color: rgba(155,93,229,.5); background: rgba(155,93,229,.05); }
+    .filter-input::placeholder { color: #444; }
+    .filter-select {
+      padding: 7px 11px; border-radius: 10px;
+      background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.09);
+      color: #aaa; font-family: 'Manrope', sans-serif; font-size: 0.81rem;
+      cursor: pointer; outline: none; transition: border-color .18s;
+    }
+    .filter-select:focus { border-color: rgba(155,93,229,.5); }
+    .filter-select option { background: #10101e; }
+    .filter-chip {
+      padding: 5px 13px; border-radius: 999px;
+      border: 1.5px solid rgba(255,255,255,.08);
+      background: rgba(255,255,255,.03); color: #666;
+      font-family: 'Manrope', sans-serif; font-size: 0.76rem; font-weight: 700;
+      cursor: pointer; transition: all .16s; white-space: nowrap;
+    }
+    .filter-chip:hover { border-color: rgba(155,93,229,.35); color: #ccc; background: rgba(155,93,229,.06); }
+    .filter-chip.active { background: rgba(155,93,229,.18); border-color: rgba(155,93,229,.6); color: #c084fc; }
+    .filter-count { font-size: 0.76rem; color: #444; margin-left: auto; white-space: nowrap; font-weight: 600; }
+
+    /* ── Main area ── */
+    .lib-main { flex: 1; display: flex; overflow: hidden; min-height: 0; }
+    .lib-scroll { flex: 1; overflow-y: auto; padding: 20px; }
+    .lib-scroll::-webkit-scrollbar { width: 5px; }
+    .lib-scroll::-webkit-scrollbar-thumb { background: rgba(155,93,229,.3); border-radius: 4px; }
+
+    /* ── Grid ── */
+    .lib-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
+      gap: 14px;
+    }
+
+    /* ── Molecule card ── */
+    .mol-card {
+      border-radius: 16px;
+      border: 1.5px solid rgba(255,255,255,.07);
+      background: rgba(255,255,255,.03);
+      overflow: hidden; cursor: pointer;
+      transition: transform .2s, border-color .2s, box-shadow .2s;
+      display: flex; flex-direction: column;
+      animation: cardIn .4s ease both;
+      animation-delay: calc(var(--i, 0) * 40ms);
+    }
+    @keyframes cardIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
+    .mol-card:hover {
+      transform: translateY(-3px);
+      border-color: rgba(155,93,229,.4);
+      box-shadow: 0 8px 28px rgba(0,0,0,.4), 0 0 0 1px rgba(155,93,229,.15);
+    }
+    .mol-card.selected {
+      border-color: rgba(6,214,224,.5);
+      box-shadow: 0 0 0 1px rgba(6,214,224,.2), 0 8px 28px rgba(6,214,224,.08);
+    }
+
+    /* canvas preview */
+    .mol-thumb-wrap {
+      width: 100%; aspect-ratio: 4/3;
+      background: radial-gradient(ellipse at 40% 35%, rgba(155,93,229,.07) 0%, rgba(5,5,15,0.95) 70%);
+      position: relative; overflow: hidden;
+    }
+    .mol-thumb-wrap canvas {
+      position: absolute; inset: 0; width: 100%; height: 100%;
+    }
+    .mol-thumb-placeholder {
+      position: absolute; inset: 0;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 2.2rem; opacity: .18;
+    }
+    /* Category ribbon in top-right corner */
+    .mol-cat-ribbon {
+      position: absolute; top: 8px; right: 8px;
+      font-size: 0.62rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
+      letter-spacing: .04em; text-transform: uppercase;
+      backdrop-filter: blur(8px);
+    }
+    .mol-cat-ribbon.inorganic  { background: rgba(96,165,250,.2);  color: #93c5fd; border: 1px solid rgba(96,165,250,.25); }
+    .mol-cat-ribbon.organic    { background: rgba(52,211,153,.18); color: #6ee7b7; border: 1px solid rgba(52,211,153,.25); }
+    .mol-cat-ribbon.biomolecule{ background: rgba(251,191,36,.18); color: #fde68a; border: 1px solid rgba(251,191,36,.25); }
+
+    /* card body */
+    .mol-card-body { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
+    .mol-formula {
+      font-family: 'Unbounded', monospace; font-size: 0.95rem; font-weight: 800;
+      background: linear-gradient(135deg,#a78bfa,#06D6E0);
+      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+      letter-spacing: .01em; margin-bottom: 1px;
+    }
+    .mol-name { font-size: 0.8rem; color: #bbb; font-weight: 600; line-height: 1.3; }
+    .mol-name-lat { font-size: 0.7rem; color: #555; font-style: italic; }
+    .mol-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
+    .mol-diff {
+      font-size: 0.7rem; letter-spacing: .06em;
+      color: #facc15; text-shadow: 0 0 6px rgba(250,204,21,.4);
+    }
+    .mol-open-btn {
+      width: 100%; padding: 7px; margin-top: 7px;
+      background: rgba(155,93,229,.1); border: 1px solid rgba(155,93,229,.25);
+      border-radius: 9px; color: #a78bfa;
+      font-family: 'Manrope', sans-serif; font-size: 0.74rem; font-weight: 700;
+      cursor: pointer; transition: all .16s; text-align: center;
+    }
+    .mol-open-btn:hover { background: rgba(155,93,229,.22); border-color: rgba(155,93,229,.5); color: #c084fc; }
+
+    /* ── Detail panel ── */
+    .mol-detail {
+      width: 280px; flex-shrink: 0;
+      background: rgba(6,6,18,0.96);
+      border-left: 1px solid rgba(155,93,229,.12);
+      display: none; flex-direction: column;
+      overflow-y: auto;
+    }
+    .mol-detail.visible { display: flex; }
+    .mol-detail::-webkit-scrollbar { width: 4px; }
+    .mol-detail::-webkit-scrollbar-thumb { background: rgba(155,93,229,.25); border-radius: 4px; }
+
+    .detail-header {
+      padding: 18px 18px 14px;
+      background: linear-gradient(160deg, rgba(155,93,229,.1), rgba(6,214,224,.05));
+      border-bottom: 1px solid rgba(255,255,255,.06);
+    }
+    .detail-formula {
+      font-family: 'Unbounded', monospace; font-size: 1.3rem; font-weight: 800; margin-bottom: 4px;
+      background: linear-gradient(135deg,#c084fc,#06D6E0);
+      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+    }
+    .detail-name { font-size: 0.88rem; color: #ddd; font-weight: 700; }
+    .detail-lat { font-size: 0.74rem; color: #555; font-style: italic; margin-top: 2px; }
+
+    .detail-canvas-wrap {
+      margin: 14px;
+      border-radius: 14px; overflow: hidden;
+      background: radial-gradient(ellipse at 40% 35%, rgba(155,93,229,.08) 0%, rgba(5,5,15,.98) 70%);
+      border: 1px solid rgba(255,255,255,.07);
+      aspect-ratio: 1; position: relative;
+    }
+    .detail-canvas-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
+
+    .detail-section { padding: 10px 18px; border-bottom: 1px solid rgba(255,255,255,.04); }
+    .detail-label { font-size: 0.63rem; color: #555; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 4px; }
+    .detail-value { font-size: 0.81rem; color: #bbb; line-height: 1.55; }
+    .detail-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
+    .detail-tag {
+      font-size: 0.65rem; padding: 3px 9px; border-radius: 999px;
+      background: rgba(167,139,250,.1); color: #a78bfa; border: 1px solid rgba(167,139,250,.2);
+      font-weight: 600;
+    }
+    .detail-open-btn {
+      margin: 14px; padding: 11px;
+      background: linear-gradient(135deg, rgba(155,93,229,.25), rgba(6,214,224,.15));
+      border: 1.5px solid rgba(155,93,229,.4);
+      border-radius: 12px; color: #c084fc;
+      font-family: 'Manrope', sans-serif; font-size: 0.83rem; font-weight: 700;
+      cursor: pointer; transition: all .18s; text-align: center;
+      display: block; width: calc(100% - 28px); text-decoration: none;
+    }
+    .detail-open-btn:hover { background: linear-gradient(135deg, rgba(155,93,229,.4), rgba(6,214,224,.25)); border-color: rgba(6,214,224,.5); color: #fff; }
+
+    /* Empty state */
+    .lib-empty {
+      grid-column: 1/-1;
+      display: flex; flex-direction: column; align-items: center; justify-content: center;
+      padding: 70px 20px; gap: 12px; color: #444;
+    }
+    .lib-empty svg { opacity: .15; }
+    .lib-empty p { font-size: 0.86rem; font-weight: 600; }
+
+    /* Reaction items in detail panel */
+    .det-rxn-item {
+      padding: 7px 10px;
+      border-radius: 9px;
+      background: rgba(255,255,255,.03);
+      border: 1px solid rgba(255,255,255,.06);
+      margin-bottom: 5px;
+      cursor: pointer;
+      transition: border-color .15s, background .15s;
+    }
+    .det-rxn-item:last-child { margin-bottom: 0; }
+    .det-rxn-item:hover { border-color: rgba(6,214,224,.3); background: rgba(6,214,224,.04); }
+    .det-rxn-name { font-size: 0.76rem; color: #bbb; font-weight: 600; margin-bottom: 2px; }
+    .det-rxn-eq   { font-size: 0.68rem; color: #555; font-family: 'Unbounded', monospace; line-height: 1.4; word-break: break-all; }
+    .det-rxn-type { display: inline-block; font-size: 0.6rem; padding: 1px 6px; border-radius: 999px;
+                    background: rgba(155,93,229,.12); color: #a78bfa; border: 1px solid rgba(155,93,229,.2);
+                    font-weight: 700; margin-top: 3px; }
+
+    /* Mobile */
+    @media (max-width: 1100px) { .mol-detail { display: none !important; } }
+    @media (max-width: 768px) {
+      html, body { height: auto; overflow: auto; }
+      .app-layout { height: auto; overflow: visible; }
+      .sb-content { overflow: visible !important; height: auto !important; }
+      .lib-main { flex-direction: column; overflow: visible; }
+      .lib-scroll { padding: 12px; overflow: visible; }
+      .lib-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
+      .filters-row { padding: 10px 12px; gap: 6px; flex-wrap: wrap; }
+      .filter-input { min-width: 0; max-width: none; flex: 1 1 100%; }
+      .page-header { padding: 14px 12px; gap: 10px; }
+      .page-header-icon { width: 36px; height: 36px; font-size: 1.1rem; border-radius: 10px; }
+      .page-title { font-size: 0.88rem; }
+      .mol-card { border-radius: 12px; }
+      .mol-name { font-size: 0.78rem; }
+    }
+    @media (max-width: 480px) {
+      .lib-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
+      .page-header { padding: 10px; }
+      .filters-row { padding: 8px 10px; }
+    }
+  </style>
+</head>
+<body>
+<div class="app-layout" id="app">
+  <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="/biochem-library"   class="sb-link sb-sub-link active"><i data-lucide="library" class="sb-icon"></i><span class="sb-lbl">↳ Библиотека</span></a>
+      <a href="/biochem-reactions" class="sb-link sb-sub-link"><i data-lucide="arrow-right-left" class="sb-icon"></i><span class="sb-lbl">↳ Реакции</span></a>
+      <a href="/biochem-properties" class="sb-link sb-sub-link"><i data-lucide="table-properties" class="sb-icon"></i><span class="sb-lbl">↳ Свойства</span></a>
+      <a href="/biochem-pathways"   class="sb-link sb-sub-link"><i data-lucide="route"             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>
+      <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>
+    </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>
+          <span class="sb-logout" style="pointer-events:none">Мой профиль</span>
+        </div>
+      </a>
+    </div>
+  </aside>
+  <div class="notif-drop" id="notif-drop"></div>
+
+  <div class="sb-content">
+    <!-- Header -->
+    <div class="page-header">
+      <div class="page-header-icon"><svg class="ic" viewBox="0 0 24 24"><path d="M9 3h6m-4.5 0v5.5l-4 7.5a1 1 0 0 0 .9 1.5h8.2a1 1 0 0 0 .9-1.5l-4-7.5V3"/></svg></div>
+      <div>
+        <div class="page-title">Библиотека молекул</div>
+        <div class="page-subtitle" id="subtitle">Загрузка…</div>
+      </div>
+    </div>
+
+    <!-- Filters -->
+    <div class="filters-row">
+      <input type="search" class="filter-input" id="search-q" placeholder="Поиск по названию или формуле..." oninput="applyFilters()" />
+      <select class="filter-select" id="filter-cat" onchange="applyFilters()">
+        <option value="">Все категории</option>
+        <option value="inorganic">Неорганика</option>
+        <option value="organic">Органика</option>
+        <option value="biomolecule">Биомолекулы</option>
+      </select>
+      <button class="filter-chip" id="diff-0" onclick="setDiff(0)">Все</button>
+      <button class="filter-chip" id="diff-1" onclick="setDiff(1)"><svg class="ic" viewBox="0 0 24 24"><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="filter-chip" id="diff-2" onclick="setDiff(2)"><svg class="ic" viewBox="0 0 24 24"><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><svg class="ic" viewBox="0 0 24 24"><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="filter-chip" id="diff-3" onclick="setDiff(3)"><svg class="ic" viewBox="0 0 24 24"><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><svg class="ic" viewBox="0 0 24 24"><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><svg class="ic" viewBox="0 0 24 24"><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>
+      <span class="filter-count" id="filter-count"></span>
+    </div>
+
+    <!-- Content -->
+    <div class="lib-main">
+      <div class="lib-scroll" id="lib-scroll">
+        <div class="lib-grid" id="lib-grid">
+          <div class="lib-empty">
+            <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.3">
+              <circle cx="12" cy="12" r="3"/><path d="M2 12h3M19 12h3M12 2v3M12 19v3"/>
+            </svg>
+            <p>Загрузка молекул…</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Detail panel -->
+      <div class="mol-detail" id="mol-detail">
+        <div class="detail-header">
+          <div class="detail-formula" id="det-formula">—</div>
+          <div class="detail-name" id="det-name">—</div>
+          <div class="detail-lat" id="det-lat"></div>
+        </div>
+        <div class="detail-canvas-wrap">
+          <canvas id="det-canvas"></canvas>
+        </div>
+        <div class="detail-section">
+          <div class="detail-label">Категория</div>
+          <div class="detail-value" id="det-cat">—</div>
+        </div>
+        <div class="detail-section" id="det-desc-sec" style="display:none">
+          <div class="detail-label">Описание</div>
+          <div class="detail-value" id="det-desc">—</div>
+        </div>
+        <div class="detail-section" id="det-tags-sec" style="display:none">
+          <div class="detail-label">Темы</div>
+          <div class="detail-tags" id="det-tags"></div>
+        </div>
+        <div class="detail-section" id="det-rxn-sec" style="display:none">
+          <div class="detail-label">Реакции</div>
+          <div id="det-rxn-list"></div>
+        </div>
+        <button class="detail-open-btn" id="det-open-btn" onclick="openInEditor()">
+          Открыть в конструкторе <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>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script src="/js/api.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+<script>
+'use strict';
+const { user, isTeacher, isAdmin } = LS.initPage();
+if (!user) location.href = '/login';
+
+const nav = document.getElementById('nav-user');
+const ava = document.getElementById('nav-avatar');
+if (nav) nav.textContent = user?.name?.split(' ')[0] || 'Пользователь';
+if (ava) ava.textContent = (user?.name||'LS').split(' ').slice(0,2).map(w=>w[0]?.toUpperCase()||'').join('')||'LS';
+if (isAdmin)   document.getElementById('btn-admin').style.display = '';
+if (isTeacher) document.getElementById('btn-classes').style.display = '';
+LS.showBoardIfAllowed();
+
+// ── CPK element colours ──
+const ELEM_COLORS = {
+  H:  { color:'#D4D4D4', text:'#222', r:9  },
+  C:  { color:'#555555', text:'#fff', r:10 },
+  N:  { color:'#4060FF', text:'#fff', r:10 },
+  O:  { color:'#EE2020', text:'#fff', r:10 },
+  P:  { color:'#FF8000', text:'#fff', r:11 },
+  S:  { color:'#C8B400', text:'#000', r:11 },
+  Cl: { color:'#00A860', text:'#fff', r:11 },
+  Na: { color:'#8040C0', text:'#fff', r:11 },
+  Ca: { color:'#707070', text:'#fff', r:11 },
+  Mg: { color:'#1E8A1E', text:'#fff', r:11 },
+  Fe: { color:'#B03010', text:'#fff', r:11 },
+  Br: { color:'#8B4513', text:'#fff', r:11 },
+  I:  { color:'#580DAB', text:'#fff', r:11 },
+  F:  { color:'#B0FFB0', text:'#222', r:9  },
+};
+
+// ── Molecule thumbnail renderer ──
+function renderMolThumb(canvas, atoms, bonds) {
+  const W = canvas.width, H = canvas.height;
+  const ctx = canvas.getContext('2d');
+  ctx.clearRect(0, 0, W, H);
+
+  if (!atoms || !atoms.length) {
+    // flask outline fallback
+    const fw = Math.min(W, H) * 0.32, fx = W/2, fy = H/2 + fw*0.05;
+    ctx.strokeStyle = '#555';
+    ctx.lineWidth = Math.max(1.5, fw * 0.07);
+    ctx.lineCap = 'round'; ctx.lineJoin = 'round';
+    ctx.beginPath();
+    ctx.moveTo(fx - fw*0.22, fy - fw*0.52);
+    ctx.lineTo(fx - fw*0.22, fy - fw*0.08);
+    ctx.lineTo(fx - fw*0.55, fy + fw*0.42);
+    ctx.quadraticCurveTo(fx, fy + fw*0.62, fx + fw*0.55, fy + fw*0.42);
+    ctx.lineTo(fx + fw*0.22, fy - fw*0.08);
+    ctx.lineTo(fx + fw*0.22, fy - fw*0.52);
+    ctx.moveTo(fx - fw*0.32, fy - fw*0.52);
+    ctx.lineTo(fx + fw*0.32, fy - fw*0.52);
+    ctx.stroke();
+    return;
+  }
+
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const a of atoms) {
+    const x = a.x ?? 0, y = a.y ?? 0;
+    minX = Math.min(minX, x); minY = Math.min(minY, y);
+    maxX = Math.max(maxX, x); maxY = Math.max(maxY, y);
+  }
+
+  const pad = Math.min(W, H) * 0.16;
+  const rangeX = maxX - minX || 1, rangeY = maxY - minY || 1;
+  const scale  = Math.min((W - pad*2) / rangeX, (H - pad*2) / rangeY);
+  const offX   = (W - rangeX * scale) / 2 - minX * scale;
+  const offY   = (H - rangeY * scale) / 2 - minY * scale;
+  const sx = ax => ax * scale + offX;
+  const sy = ay => ay * scale + offY;
+
+  // bonds
+  for (const b of bonds) {
+    const f = b.f ?? b.from, t = b.t ?? b.to, order = b.o ?? b.order ?? 1;
+    const af = atoms.find(a => a.id === f), at_ = atoms.find(a => a.id === t);
+    if (!af || !at_) continue;
+    const x1 = sx(af.x??0), y1 = sy(af.y??0);
+    const x2 = sx(at_.x??0), y2 = sy(at_.y??0);
+    ctx.strokeStyle = 'rgba(180,180,200,0.65)';
+    ctx.lineWidth = Math.max(1, scale * 0.75); ctx.lineCap = 'round';
+    if (order === 1) {
+      ctx.beginPath(); ctx.moveTo(x1,y1); ctx.lineTo(x2,y2); ctx.stroke();
+    } else {
+      const dx = x2-x1, dy = y2-y1, len = Math.hypot(dx,dy)||1;
+      const nx = -dy/len, ny = dx/len, gap = Math.max(1.5, scale * 0.85);
+      const offsets = order === 2 ? [-gap/2, gap/2] : [-gap, 0, gap];
+      for (const o of offsets) {
+        ctx.beginPath(); ctx.moveTo(x1+nx*o, y1+ny*o); ctx.lineTo(x2+nx*o, y2+ny*o); ctx.stroke();
+      }
+    }
+  }
+
+  // atoms
+  const minR = Math.max(6, Math.min(W, H) * 0.065);
+  for (const a of atoms) {
+    const x = sx(a.x??0), y = sy(a.y??0);
+    const el = ELEM_COLORS[a.s] || { color:'#888', text:'#fff', r:10 };
+    const r = Math.max(minR * 0.65, (el.r / 20) * minR);
+    // sphere gradient
+    const grd = ctx.createRadialGradient(x-r*0.3,y-r*0.35,r*0.05,x,y,r);
+    const [hr,hg,hb] = hexToRgb(el.color);
+    grd.addColorStop(0,   `rgb(${Math.min(255,hr+90)},${Math.min(255,hg+90)},${Math.min(255,hb+90)})`);
+    grd.addColorStop(0.5, el.color);
+    grd.addColorStop(1,   `rgb(${Math.round(hr*.3)},${Math.round(hg*.3)},${Math.round(hb*.3)})`);
+    ctx.beginPath(); ctx.arc(x,y,r,0,Math.PI*2);
+    ctx.fillStyle = grd; ctx.fill();
+    const fs = Math.max(6, r * (a.s.length > 1 ? 0.72 : 0.92));
+    ctx.fillStyle = el.text;
+    ctx.font = `700 ${fs}px Manrope,sans-serif`;
+    ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+    ctx.fillText(a.s, x, y);
+  }
+}
+function hexToRgb(hex) {
+  hex = hex.replace('#','');
+  if (hex.length===3) hex=hex.split('').map(c=>c+c).join('');
+  const n=parseInt(hex,16);
+  return [(n>>16)&255,(n>>8)&255,n&255];
+}
+
+// ── Data ──
+let allMols      = [];
+let allReactions = [];
+let filterDiff   = 0;
+let selectedId   = null;
+
+const CAT_LABELS = { inorganic:'Неорганика', organic:'Органика', biomolecule:'Биомолекулы' };
+const DIFF_STARS  = ['', '<svg class="ic" viewBox="0 0 24 24"><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>', '<svg class="ic" viewBox="0 0 24 24"><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><svg class="ic" viewBox="0 0 24 24"><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>', '<svg class="ic" viewBox="0 0 24 24"><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><svg class="ic" viewBox="0 0 24 24"><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><svg class="ic" viewBox="0 0 24 24"><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>'];
+
+async function init() {
+  try {
+    [allMols, allReactions] = await Promise.all([
+      LS.biochemGetMolecules(),
+      LS.biochemGetReactions().catch(() => []),
+    ]);
+    document.getElementById('subtitle').textContent = `${allMols.length} молекул в базе`;
+    applyFilters();
+  } catch(e) {
+    document.getElementById('lib-grid').innerHTML = `<div class="lib-empty"><p>Ошибка загрузки: ${e.message}</p></div>`;
+  }
+}
+
+function setDiff(d) {
+  filterDiff = d;
+  document.querySelectorAll('.filter-chip').forEach((btn, i) => btn.classList.toggle('active', i === d));
+  applyFilters();
+}
+
+function applyFilters() {
+  const q   = document.getElementById('search-q').value.toLowerCase().trim();
+  const cat = document.getElementById('filter-cat').value;
+  const filtered = allMols.filter(m => {
+    if (q && !m.name_ru.toLowerCase().includes(q) && !(m.formula||'').toLowerCase().includes(q) &&
+            !(m.name_lat||'').toLowerCase().includes(q)) return false;
+    if (cat && m.category !== cat) return false;
+    if (filterDiff && m.difficulty !== filterDiff) return false;
+    return true;
+  });
+  document.getElementById('filter-count').textContent = `${filtered.length} молекул`;
+  renderGrid(filtered);
+}
+
+function renderGrid(mols) {
+  const grid = document.getElementById('lib-grid');
+  if (!mols.length) {
+    grid.innerHTML = `<div class="lib-empty">
+      <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.3">
+        <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/>
+      </svg>
+      <p>Ничего не найдено</p></div>`;
+    return;
+  }
+  grid.innerHTML = '';
+  mols.forEach((m, i) => {
+    const card = document.createElement('div');
+    card.className = 'mol-card';
+    card.style.setProperty('--i', i);
+    card.dataset.id = m.id;
+    if (m.id == selectedId) card.classList.add('selected');
+
+    card.innerHTML = `
+      <div class="mol-thumb-wrap">
+        <canvas class="mol-thumb" width="200" height="150"></canvas>
+        ${(!m.atoms_json||!m.atoms_json.length)?'<div class="mol-thumb-placeholder"><svg class="ic" viewBox="0 0 24 24"><path d="M9 3h6m-4.5 0v5.5l-4 7.5a1 1 0 0 0 .9 1.5h8.2a1 1 0 0 0 .9-1.5l-4-7.5V3"/></svg></div>':''}
+        ${m.category?`<div class="mol-cat-ribbon ${m.category||''}">${CAT_LABELS[m.category]||m.category}</div>`:''}
+      </div>
+      <div class="mol-card-body">
+        <div class="mol-formula">${m.formula}</div>
+        <div class="mol-name">${m.name_ru}</div>
+        ${m.name_lat?`<div class="mol-name-lat">${m.name_lat}</div>`:''}
+        <div class="mol-card-foot">
+          <span class="mol-diff">${DIFF_STARS[m.difficulty]||''}</span>
+        </div>
+        <button class="mol-open-btn" onclick="event.stopPropagation();openInEditorId(${m.id})">
+          Открыть в конструкторе <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>
+        </button>
+      </div>`;
+
+    card.addEventListener('click', () => selectMol(m.id));
+    grid.appendChild(card);
+
+    requestAnimationFrame(() => {
+      const cvs = card.querySelector('.mol-thumb');
+      if (cvs && m.atoms_json && m.atoms_json.length) {
+        renderMolThumb(cvs, m.atoms_json, m.bonds_json || []);
+      }
+    });
+  });
+}
+
+async function selectMol(id) {
+  selectedId = id;
+  document.querySelectorAll('.mol-card').forEach(c => c.classList.toggle('selected', c.dataset.id == id));
+
+  const det = document.getElementById('mol-detail');
+  det.classList.add('visible');
+
+  try {
+    const m = await LS.biochemGetMolecule(id);
+    document.getElementById('det-formula').textContent = m.formula;
+    document.getElementById('det-name').textContent    = m.name_ru;
+    document.getElementById('det-lat').textContent     = m.name_lat || '';
+    document.getElementById('det-cat').textContent     = CAT_LABELS[m.category] || m.category || '—';
+
+    const descSec = document.getElementById('det-desc-sec');
+    if (m.description) { document.getElementById('det-desc').textContent = m.description; descSec.style.display = ''; }
+    else descSec.style.display = 'none';
+
+    const tagsSec = document.getElementById('det-tags-sec');
+    const tags = Array.isArray(m.topic_tags) ? m.topic_tags : [];
+    if (tags.length) {
+      document.getElementById('det-tags').innerHTML = tags.map(t=>`<span class="detail-tag">${t}</span>`).join('');
+      tagsSec.style.display = '';
+    } else tagsSec.style.display = 'none';
+
+    // reactions where this molecule participates
+    const molRxns = allReactions.filter(r =>
+      (r.reactant_ids||[]).includes(m.id) || (r.product_ids||[]).includes(m.id)
+    );
+    const rxnSec  = document.getElementById('det-rxn-sec');
+    const rxnList = document.getElementById('det-rxn-list');
+    if (molRxns.length) {
+      rxnList.innerHTML = molRxns.map(r => `
+        <div class="det-rxn-item" onclick="location.href='/biochem-reactions'">
+          <div class="det-rxn-name">${r.name_ru||'—'}</div>
+          <div class="det-rxn-eq">${r.equation||''}</div>
+          ${r.type ? `<span class="det-rxn-type">${r.type}</span>` : ''}
+        </div>`).join('');
+      rxnSec.style.display = '';
+    } else {
+      rxnList.innerHTML = '<div style="font-size:.75rem;color:#444;padding:2px 0">Реакций не найдено</div>';
+      rxnSec.style.display = '';
+    }
+
+    document.getElementById('det-open-btn').dataset.id = id;
+
+    const cvs = document.getElementById('det-canvas');
+    cvs.width  = cvs.offsetWidth  || 252;
+    cvs.height = cvs.offsetHeight || 252;
+    renderMolThumb(cvs, m.atoms_json || [], m.bonds_json || []);
+  } catch(e) {
+    document.getElementById('det-name').textContent = 'Ошибка загрузки';
+  }
+}
+
+function openInEditor() {
+  const id = document.getElementById('det-open-btn').dataset.id;
+  if (id) openInEditorId(id);
+}
+function openInEditorId(id) { location.href = `/biochem?mol=${id}`; }
+
+// ── Boot ──
+document.getElementById('diff-0').classList.add('active');
+if (window.lucide) lucide.createIcons();
+LS.notif?.init();
+LS.hideDisabledFeatures?.();
+init();
+</script>
+<script src="/js/notifications.js"></script>
+<script src="/js/mobile.js"></script>
+</body>
+</html>
diff --git a/frontend/biochem-pathways.html b/frontend/biochem-pathways.html
new file mode 100644
index 0000000..846c015
--- /dev/null
+++ b/frontend/biochem-pathways.html
@@ -0,0 +1,1288 @@
+<!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://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+  <style>
+    html, body { height: 100%; overflow: hidden; }
+    .app-layout { height: 100vh; overflow: hidden; }
+    .sb-content { padding: 0 !important; overflow: hidden; display: flex; flex-direction: column; background: #07070f; }
+    .sb-sub-link { padding-left: 28px !important; font-size: 0.76rem !important; opacity: .75; }
+    .sb-sub-link:hover { opacity: 1; }
+
+    /* ── Page header ── */
+    .page-header {
+      padding: 18px 28px 14px;
+      background: linear-gradient(135deg, rgba(16,185,129,.1) 0%, rgba(155,93,229,.08) 100%);
+      border-bottom: 1px solid rgba(16,185,129,.15);
+      flex-shrink: 0;
+      display: flex; align-items: center; gap: 16px;
+    }
+    .page-header-icon {
+      width: 44px; height: 44px; border-radius: 14px;
+      background: rgba(16,185,129,.12); border: 1.5px solid rgba(16,185,129,.25);
+      display: flex; align-items: center; justify-content: center;
+      font-size: 1.35rem; flex-shrink: 0;
+    }
+    .page-title {
+      font-family: 'Unbounded', sans-serif; font-size: 1rem; font-weight: 800;
+      background: linear-gradient(135deg,#34d399,#a78bfa); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
+      margin-bottom: 2px;
+    }
+    .page-subtitle { font-size: 0.78rem; color: #555; }
+    .header-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
+
+    /* ── Pathway selector ── */
+    .path-selector {
+      display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
+      padding: 10px 20px;
+      background: rgba(7,7,20,.95);
+      border-bottom: 1px solid rgba(255,255,255,.06);
+      flex-shrink: 0;
+    }
+    .path-chip {
+      padding: 5px 14px; border-radius: 999px;
+      border: 1.5px solid rgba(255,255,255,.09);
+      background: rgba(255,255,255,.04); color: #666;
+      font-family: 'Manrope', sans-serif; font-size: 0.78rem; font-weight: 700;
+      cursor: pointer; transition: all .18s; white-space: nowrap;
+      display: flex; align-items: center; gap: 5px;
+    }
+    .path-chip:hover { border-color: rgba(52,211,153,.35); color: #ccc; background: rgba(52,211,153,.07); }
+    .path-chip.active { background: rgba(52,211,153,.16); border-color: rgba(52,211,153,.55); color: #34d399; }
+    .path-chip .chip-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
+    .path-chip[data-path="glycolysis"].active  { color: #f59e0b; border-color: rgba(245,158,11,.5); background: rgba(245,158,11,.12); }
+    .path-chip[data-path="glycolysis"] .chip-dot { background: #f59e0b; }
+    .path-chip[data-path="krebs"].active  { color: #06b6d4; border-color: rgba(6,182,212,.5); background: rgba(6,182,212,.12); }
+    .path-chip[data-path="krebs"] .chip-dot { background: #06b6d4; }
+    .path-chip[data-path="oxidation"].active  { color: #fb923c; border-color: rgba(251,146,60,.5); background: rgba(251,146,60,.12); }
+    .path-chip[data-path="oxidation"] .chip-dot { background: #fb923c; }
+    .path-chip[data-path="synthesis"].active  { color: #a78bfa; border-color: rgba(167,139,250,.5); background: rgba(167,139,250,.12); }
+    .path-chip[data-path="synthesis"] .chip-dot { background: #a78bfa; }
+    .sel-divider { width: 1px; height: 20px; background: rgba(255,255,255,.07); margin: 0 4px; }
+    .learn-btn {
+      margin-left: auto; padding: 5px 16px; border-radius: 8px;
+      background: linear-gradient(135deg,#34d399,#059669); border: none;
+      color: #fff; font-family:'Manrope',sans-serif; font-size:.8rem; font-weight:700;
+      cursor: pointer; transition: opacity .18s; display: flex; align-items: center; gap: 6px;
+    }
+    .learn-btn:hover { opacity: .85; }
+    .anim-btn {
+      padding: 5px 14px; border-radius: 8px;
+      background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.1);
+      color: #aaa; font-family:'Manrope',sans-serif; font-size:.78rem; font-weight:600;
+      cursor: pointer; transition: all .18s; display: flex; align-items: center; gap: 5px;
+    }
+    .anim-btn.on { background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.4); color: #34d399; }
+    .anim-btn:hover { border-color: rgba(255,255,255,.2); color: #ccc; }
+
+    /* ── Main layout ── */
+    .paths-main {
+      flex: 1; display: flex; overflow: hidden; min-height: 0;
+    }
+
+    /* ── SVG Canvas area ── */
+    .svg-area {
+      flex: 1; overflow: hidden; position: relative;
+      background: radial-gradient(ellipse at 40% 40%, rgba(16,185,129,.04) 0%, transparent 60%),
+                  radial-gradient(ellipse at 70% 70%, rgba(155,93,229,.04) 0%, transparent 60%),
+                  #07070f;
+      cursor: grab;
+    }
+    .svg-area:active { cursor: grabbing; }
+    #pathway-svg {
+      width: 100%; height: 100%;
+      overflow: visible;
+    }
+
+    /* SVG node styles */
+    .mol-node { cursor: pointer; transition: filter .18s; }
+    .mol-node:hover .node-circle { filter: brightness(1.4); }
+    .mol-node .node-circle { transition: r .15s; }
+    .mol-node.active .node-circle { filter: drop-shadow(0 0 8px currentColor); }
+    .node-label {
+      font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 700;
+      fill: #e0e0f0; pointer-events: none; dominant-baseline: central; text-anchor: middle;
+    }
+    .node-formula {
+      font-family: 'Manrope', sans-serif; font-size: 9.5px;
+      fill: #777; pointer-events: none; dominant-baseline: central; text-anchor: middle;
+    }
+    .edge-arrow { marker-end: url(#arrowhead); }
+    .edge-label {
+      font-family: 'Manrope', sans-serif; font-size: 9px;
+      fill: #555; dominant-baseline: central; text-anchor: middle;
+      pointer-events: none;
+    }
+    .edge-enzyme {
+      font-family: 'Manrope', sans-serif; font-size: 8.5px; font-style: italic;
+      fill: #494; pointer-events: none; dominant-baseline: central; text-anchor: middle;
+    }
+    /* Particle animation */
+    .flow-particle { pointer-events: none; }
+    @keyframes particleAppear { from { opacity:0; transform:scale(0); } to { opacity:1; transform:scale(1); } }
+
+    /* ── Side panel ── */
+    .side-panel {
+      width: 320px; flex-shrink: 0;
+      border-left: 1px solid rgba(255,255,255,.07);
+      background: rgba(8,8,20,.9);
+      display: flex; flex-direction: column; overflow: hidden;
+      transition: width .25s;
+    }
+    .side-panel.hidden { width: 0; overflow: hidden; }
+
+    .panel-tabs {
+      display: flex; border-bottom: 1px solid rgba(255,255,255,.07); flex-shrink: 0;
+    }
+    .ptab {
+      flex: 1; padding: 10px 8px; text-align: center;
+      font-family: 'Manrope', sans-serif; font-size: .75rem; font-weight: 700;
+      color: #555; cursor: pointer; border-bottom: 2px solid transparent;
+      transition: all .18s; white-space: nowrap;
+    }
+    .ptab.active { color: #34d399; border-bottom-color: #34d399; }
+    .ptab:hover { color: #aaa; }
+
+    .panel-body { flex: 1; overflow-y: auto; padding: 16px; }
+    .panel-body::-webkit-scrollbar { width: 4px; }
+    .panel-body::-webkit-scrollbar-thumb { background: rgba(52,211,153,.25); border-radius: 4px; }
+
+    /* Mol popup card */
+    .mol-card { display: none; }
+    .mol-card.show { display: block; }
+    .mol-card-name {
+      font-family: 'Unbounded', sans-serif; font-size: .9rem; font-weight: 800;
+      color: #e0e0f0; margin-bottom: 3px;
+    }
+    .mol-card-formula {
+      font-size: .8rem; color: #888; margin-bottom: 12px; font-family: 'Manrope', sans-serif;
+    }
+    .mol-card-desc {
+      font-size: .8rem; color: #aaa; line-height: 1.55; font-family: 'Manrope', sans-serif;
+      margin-bottom: 12px;
+    }
+    .mol-card-props { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
+    .mol-prop { padding: 3px 10px; border-radius: 6px; font-size: .72rem; font-weight: 600;
+      font-family: 'Manrope',sans-serif; }
+    .mol-prop.atp  { background: rgba(245,158,11,.15); color: #f59e0b; border: 1px solid rgba(245,158,11,.25); }
+    .mol-prop.nadh { background: rgba(6,182,212,.15); color: #06b6d4; border: 1px solid rgba(6,182,212,.25); }
+    .mol-prop.co2  { background: rgba(239,68,68,.12); color: #f87171; border: 1px solid rgba(239,68,68,.2); }
+    .mol-prop.key  { background: rgba(52,211,153,.12); color: #34d399; border: 1px solid rgba(52,211,153,.2); }
+    .mol-card-btn {
+      display: block; width: 100%; padding: 7px; border-radius: 9px; text-align: center;
+      background: rgba(52,211,153,.1); border: 1.5px solid rgba(52,211,153,.25);
+      color: #34d399; font-family:'Manrope',sans-serif; font-size:.78rem; font-weight:700;
+      cursor: pointer; text-decoration: none; transition: all .18s; margin-top: 4px;
+    }
+    .mol-card-btn:hover { background: rgba(52,211,153,.2); }
+    .mol-empty {
+      text-align: center; padding: 40px 20px;
+      color: #444; font-family:'Manrope',sans-serif; font-size:.83rem;
+    }
+    .mol-empty .hint-icon { font-size: 2.2rem; margin-bottom: 8px; }
+
+    /* ── Learn mode ── */
+    .learn-panel { display: none; }
+    .learn-panel.active { display: block; }
+    .learn-progress-bar {
+      height: 4px; border-radius: 2px; background: rgba(255,255,255,.07); margin-bottom: 14px;
+    }
+    .learn-progress-fill {
+      height: 100%; border-radius: 2px;
+      background: linear-gradient(90deg,#34d399,#a78bfa);
+      transition: width .4s;
+    }
+    .step-counter {
+      font-family:'Manrope',sans-serif; font-size:.72rem; color:#555; margin-bottom:10px;
+    }
+    .step-num {
+      display: inline-flex; align-items:center; justify-content:center;
+      width:28px; height:28px; border-radius:50%;
+      background: linear-gradient(135deg,#34d399,#059669);
+      color:#fff; font-family:'Unbounded',sans-serif; font-size:.7rem; font-weight:800;
+      margin-right: 8px; flex-shrink:0;
+    }
+    .step-title-row { display:flex; align-items:center; margin-bottom:10px; }
+    .step-title {
+      font-family:'Unbounded',sans-serif; font-size:.82rem; font-weight:800; color:#e0e0f0;
+    }
+    .step-desc {
+      font-family:'Manrope',sans-serif; font-size:.8rem; color:#aaa; line-height:1.6;
+      margin-bottom: 12px;
+    }
+    .step-energy {
+      display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px;
+    }
+    .energy-badge {
+      padding: 3px 10px; border-radius:6px; font-family:'Manrope',sans-serif;
+      font-size:.72rem; font-weight:700;
+    }
+    .energy-badge.atp-prod { background:rgba(245,158,11,.15); color:#f59e0b; }
+    .energy-badge.atp-used { background:rgba(239,68,68,.12); color:#f87171; }
+    .energy-badge.nadh     { background:rgba(6,182,212,.12);  color:#06b6d4; }
+    .energy-badge.fadh2    { background:rgba(167,139,250,.12);color:#a78bfa; }
+    .energy-badge.co2      { background:rgba(74,222,128,.1);  color:#4ade80; }
+
+    /* Mini-quiz */
+    .mini-quiz { margin-top:12px; }
+    .quiz-q {
+      font-family:'Manrope',sans-serif; font-size:.8rem; font-weight:700; color:#ddd;
+      margin-bottom:8px;
+    }
+    .quiz-opts { display:flex; flex-direction:column; gap:5px; }
+    .quiz-opt {
+      padding:7px 12px; border-radius:8px;
+      border:1.5px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03);
+      color:#aaa; font-family:'Manrope',sans-serif; font-size:.78rem;
+      cursor:pointer; transition:all .16s; text-align:left;
+    }
+    .quiz-opt:hover { border-color:rgba(52,211,153,.35); color:#ccc; background:rgba(52,211,153,.06); }
+    .quiz-opt.correct { border-color:rgba(52,211,153,.6) !important; background:rgba(52,211,153,.15) !important; color:#34d399 !important; }
+    .quiz-opt.wrong   { border-color:rgba(239,68,68,.5)  !important; background:rgba(239,68,68,.1)   !important; color:#f87171 !important; }
+    .quiz-feedback {
+      margin-top:8px; font-family:'Manrope',sans-serif; font-size:.78rem;
+      padding:7px 12px; border-radius:8px;
+    }
+    .quiz-feedback.ok  { background:rgba(52,211,153,.1);  color:#34d399; }
+    .quiz-feedback.err { background:rgba(239,68,68,.08);  color:#f87171; }
+    .step-nav { display:flex; gap:8px; margin-top:14px; }
+    .step-btn {
+      flex:1; padding:8px; border-radius:9px;
+      font-family:'Manrope',sans-serif; font-size:.78rem; font-weight:700;
+      cursor:pointer; transition:all .18s; border:none;
+    }
+    .step-btn.prev { background:rgba(255,255,255,.06); color:#888; }
+    .step-btn.prev:hover { background:rgba(255,255,255,.1); color:#ccc; }
+    .step-btn.next { background:linear-gradient(135deg,#34d399,#059669); color:#fff; }
+    .step-btn.next:hover { opacity:.88; }
+    .step-btn:disabled { opacity:.3; cursor:default; }
+    .learn-complete {
+      text-align:center; padding:20px 10px;
+    }
+    .complete-icon { font-size:2.5rem; margin-bottom:10px; }
+    .complete-title {
+      font-family:'Unbounded',sans-serif; font-size:.9rem; font-weight:800; color:#34d399;
+      margin-bottom:6px;
+    }
+    .complete-text { font-family:'Manrope',sans-serif; font-size:.78rem; color:#888; }
+
+    /* ── Path legend ── */
+    .path-legend {
+      padding: 12px 16px;
+      border-top: 1px solid rgba(255,255,255,.06);
+      flex-shrink: 0;
+    }
+    .legend-title {
+      font-family:'Manrope',sans-serif; font-size:.7rem; font-weight:700; color:#444;
+      text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px;
+    }
+    .legend-items { display:flex; flex-wrap:wrap; gap:6px; }
+    .legend-item {
+      display:flex; align-items:center; gap:4px;
+      font-family:'Manrope',sans-serif; font-size:.72rem; color:#666;
+    }
+    .legend-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
+    .legend-line { width:18px; height:2px; flex-shrink:0; border-radius:1px; }
+
+    /* zoom controls */
+    .zoom-controls {
+      position: absolute; bottom: 16px; right: 16px;
+      display: flex; gap: 6px;
+    }
+    .zoom-btn {
+      width: 34px; height: 34px; border-radius: 9px;
+      background: rgba(15,15,30,.9); border: 1.5px solid rgba(255,255,255,.09);
+      color: #aaa; font-size: 1.1rem; cursor: pointer;
+      display: flex; align-items: center; justify-content: center;
+      transition: all .16s;
+    }
+    .zoom-btn:hover { background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.3); color: #34d399; }
+
+    /* path stats bar */
+    .path-stats {
+      position: absolute; top: 12px; left: 16px;
+      display: flex; gap: 8px; pointer-events: none;
+    }
+    .pstat {
+      padding: 4px 12px; border-radius: 8px;
+      background: rgba(8,8,20,.85); border: 1px solid rgba(255,255,255,.08);
+      font-family:'Manrope',sans-serif; font-size:.73rem; font-weight:700;
+      backdrop-filter: blur(8px);
+    }
+    .pstat.atp  { color:#f59e0b; }
+    .pstat.nadh { color:#06b6d4; }
+    .pstat.co2  { color:#f87171; }
+
+    /* ── Mobile ── */
+    @media (max-width: 768px) {
+      .sb-content { flex-direction: column; overflow: auto; }
+      .page-header { padding: 10px 14px 0; gap: 8px; }
+      .page-title { font-size: 0.85rem !important; }
+      .page-subtitle { display: none; }
+      .header-right { gap: 4px; }
+      .path-selector { padding: 8px 12px; gap: 5px; flex-wrap: wrap; }
+      .paths-main { flex-direction: column-reverse; }
+      .svg-area { min-height: 55vw; flex: none; height: 55vw; }
+      .side-panel { width: 100% !important; max-height: 40vh; border-left: none !important; border-top: 1px solid rgba(255,255,255,.07); overflow-y: auto; }
+      .path-stats { top: 6px; left: 8px; gap: 4px; }
+      .zoom-controls { bottom: 8px; right: 8px; }
+    }
+    @media (max-width: 480px) {
+      .svg-area { min-height: 260px; height: 260px; }
+      .path-chip { font-size: 0.68rem; padding: 4px 10px; }
+      .side-panel { max-height: 45vh; }
+    }
+  </style>
+</head>
+<body>
+<div class="app-layout" id="app">
+  <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="/biochem-library"    class="sb-link sb-sub-link"><i data-lucide="library"              class="sb-icon"></i><span class="sb-lbl">↳ Библиотека</span></a>
+      <a href="/biochem-reactions"  class="sb-link sb-sub-link"><i data-lucide="arrow-right-left"     class="sb-icon"></i><span class="sb-lbl">↳ Реакции</span></a>
+      <a href="/biochem-properties" class="sb-link sb-sub-link"><i data-lucide="table-properties"     class="sb-icon"></i><span class="sb-lbl">↳ Свойства</span></a>
+      <a href="/biochem-pathways"   class="sb-link sb-sub-link active"><i data-lucide="route"         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>
+      <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>
+    </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>
+          <span class="sb-logout" style="pointer-events:none">Мой профиль</span>
+        </div>
+      </a>
+    </div>
+  </aside>
+  <div class="notif-drop" id="notif-drop"></div>
+
+  <div class="sb-content">
+    <!-- Header -->
+    <div class="page-header">
+      <div class="page-header-icon"><svg class="ic" viewBox="0 0 24 24"><path d="M6 18h8"/><path d="M3 22h18"/><path d="M14 22a7 7 0 1 0 0-14h-1"/><path d="M9 14l2-7"/><path d="M12 14l2-7"/></svg></div>
+      <div>
+        <div class="page-title">Метаболические пути</div>
+        <div class="page-subtitle" id="path-subtitle">Интерактивные схемы обмена веществ</div>
+      </div>
+      <div class="header-right">
+        <div class="nav-user-chip">
+          <div class="nav-avatar" id="nav-avatar2"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Pathway selector -->
+    <div class="path-selector">
+      <span style="font-family:'Manrope',sans-serif;font-size:.75rem;color:#444;font-weight:700;">Путь:</span>
+      <button class="path-chip active" data-path="glycolysis" onclick="selectPath('glycolysis')">
+        <span class="chip-dot"></span>Гликолиз
+      </button>
+      <button class="path-chip" data-path="krebs" onclick="selectPath('krebs')">
+        <span class="chip-dot"></span>Цикл Кребса
+      </button>
+      <button class="path-chip" data-path="oxidation" onclick="selectPath('oxidation')">
+        <span class="chip-dot"></span>β-Окисление
+      </button>
+      <button class="path-chip" data-path="synthesis" onclick="selectPath('synthesis')">
+        <span class="chip-dot"></span>Синтез белка
+      </button>
+      <div class="sel-divider"></div>
+      <button class="anim-btn on" id="anim-toggle" onclick="toggleAnimation()">
+        <i data-lucide="play-circle" style="width:14px;height:14px"></i> Анимация
+      </button>
+      <button class="learn-btn" onclick="startLearn()">
+        <i data-lucide="graduation-cap" style="width:14px;height:14px"></i> Пройти путь
+      </button>
+    </div>
+
+    <!-- Main content -->
+    <div class="paths-main">
+      <!-- SVG area -->
+      <div class="svg-area" id="svg-area">
+        <svg id="pathway-svg" xmlns="http://www.w3.org/2000/svg">
+          <defs>
+            <marker id="arrowhead" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
+              <polygon points="0 0, 8 3, 0 6" fill="rgba(120,120,160,0.7)" />
+            </marker>
+            <marker id="arrowhead-active" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
+              <polygon points="0 0, 8 3, 0 6" fill="#34d399" />
+            </marker>
+            <marker id="arrowhead-gly" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
+              <polygon points="0 0, 8 3, 0 6" fill="#f59e0b" />
+            </marker>
+            <marker id="arrowhead-krebs" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
+              <polygon points="0 0, 8 3, 0 6" fill="#06b6d4" />
+            </marker>
+            <filter id="glow-green">
+              <feGaussianBlur stdDeviation="3" result="blur"/>
+              <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+            </filter>
+            <filter id="glow-amber">
+              <feGaussianBlur stdDeviation="3" result="blur"/>
+              <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+            </filter>
+          </defs>
+          <g id="svg-root" transform="translate(0,0) scale(1)">
+            <g id="edges-layer"></g>
+            <g id="nodes-layer"></g>
+            <g id="particles-layer"></g>
+          </g>
+        </svg>
+        <!-- Path stats overlay -->
+        <div class="path-stats" id="path-stats"></div>
+        <!-- Zoom controls -->
+        <div class="zoom-controls">
+          <button class="zoom-btn" onclick="zoom(1.2)" title="Увеличить">+</button>
+          <button class="zoom-btn" onclick="zoom(0.83)" title="Уменьшить">−</button>
+          <button class="zoom-btn" onclick="resetView()" title="Сбросить">⊙</button>
+        </div>
+      </div>
+
+      <!-- Side panel -->
+      <div class="side-panel" id="side-panel">
+        <div class="panel-tabs">
+          <div class="ptab active" id="tab-mol" onclick="switchTab('mol')">Молекула</div>
+          <div class="ptab" id="tab-learn" onclick="switchTab('learn')">Обучение</div>
+          <div class="ptab" id="tab-info" onclick="switchTab('info')">Путь</div>
+        </div>
+        <div class="panel-body" id="panel-mol">
+          <div class="mol-empty" id="mol-empty">
+            <div class="hint-icon"><svg class="ic" viewBox="0 0 24 24"><path d="M4 4l7.07 17 2.51-7.39L21 11.07z"/></svg></div>
+            <div>Кликни на молекулу<br/>на схеме</div>
+          </div>
+          <div class="mol-card" id="mol-card">
+            <div class="mol-card-name" id="mc-name"></div>
+            <div class="mol-card-formula" id="mc-formula"></div>
+            <div class="mol-card-desc" id="mc-desc"></div>
+            <div class="mol-card-props" id="mc-props"></div>
+            <a class="mol-card-btn" id="mc-link">Открыть в редакторе <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></a>
+          </div>
+        </div>
+        <div class="panel-body" id="panel-learn" style="display:none">
+          <div class="learn-panel" id="learn-inactive" style="display:block">
+            <div class="mol-empty">
+              <div class="hint-icon"><svg class="ic" viewBox="0 0 24 24"><polygon points="22 10 12 5 2 10 12 15 22 10"/><polyline points="6 12 6 17"/><path d="M18 13.5V17c-3 1.5-9 1.5-12 0v-3.5"/></svg></div>
+              <div>Нажми «Пройти путь»<br/>чтобы начать обучение</div>
+            </div>
+          </div>
+          <div class="learn-panel" id="learn-active"></div>
+        </div>
+        <div class="panel-body" id="panel-info" style="display:none">
+          <div id="path-info-content"></div>
+        </div>
+
+        <div class="path-legend" id="path-legend">
+          <div class="legend-title">Обозначения</div>
+          <div class="legend-items" id="legend-items"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script src="/js/api.js"></script>
+<script>
+// ═══════════════════════════════════════════════════════
+// PATHWAY DATA
+// ═══════════════════════════════════════════════════════
+const PATHWAYS = {
+  glycolysis: {
+    name: 'Гликолиз',
+    color: '#f59e0b',
+    colorRgb: '245,158,11',
+    desc: '10 реакций расщепления глюкозы до пирувата. Происходит в цитоплазме. Выход: 2 АТФ (нетто), 2 НАДН, 2 пируват.',
+    stats: [
+      { label: '−2 АТФ <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> +4 АТФ', cls: 'atp' },
+      { label: '2 НАДН', cls: 'nadh' },
+    ],
+    legend: [
+      { color: '#f59e0b', type: 'circle', label: 'Метаболит' },
+      { color: '#f59e0b', type: 'line', label: 'Реакция' },
+      { color: '#f59e0b88', type: 'circle-sm', label: 'Кофактор (АТФ/НАД)' },
+    ],
+    // nodes: id, label, formula, x, y, role
+    nodes: [
+      { id:'glc',   label:'Глюкоза',     formula:'C₆H₁₂O₆', x:400, y:60,  role:'substrate', desc:'Исходный субстрат гликолиза. 6-углеродный сахар, главный источник энергии клетки.', props:[] },
+      { id:'g6p',   label:'Глюкозо-6-Ф', formula:'C₆H₁₃O₉P', x:400, y:145, role:'inter', desc:'Глюкозо-6-фосфат. Образуется при фосфорилировании глюкозы за счёт АТФ. Удерживает молекулу в клетке.', props:['−1 АТФ'] },
+      { id:'f6p',   label:'Фруктозо-6-Ф',formula:'C₆H₁₃O₉P', x:400, y:225, role:'inter', desc:'Изомер глюкозо-6-фосфата. Образуется при изомеризации ферментом фосфоглюкоизомеразой.', props:[] },
+      { id:'f16bp', label:'Фруктозо-1,6-бФ',formula:'C₆H₁₄O₁₂P₂', x:400, y:310, role:'key', desc:'Фруктозо-1,6-бисфосфат — ключевой регуляторный метаболит. Образование катализирует фосфофруктокиназа-1 (ФФК-1).', props:['−1 АТФ', 'Контроль скорости'] },
+      { id:'dhap',  label:'ДГАФ',         formula:'C₃H₇O₆P',  x:260, y:395, role:'inter', desc:'Дигидроксиацетонфосфат — один из двух триозофосфатов при расщеплении фруктозо-1,6-бисфосфата. Быстро конвертируется в ГАФ.', props:[] },
+      { id:'gap',   label:'ГАФ',          formula:'C₃H₇O₆P',  x:540, y:395, role:'inter', desc:'Глицеральдегид-3-фосфат (ГАФ) — непосредственный субстрат следующих реакций. Оба триозофосфата канализируются через ГАФ.', props:[] },
+      { id:'bpg',   label:'1,3-бФГ',      formula:'C₃H₈O₁₀P₂',x:540, y:480, role:'inter', desc:'1,3-бисфосфоглицерат. Образуется при окислении ГАФ, сопряжённом с восстановлением НАД⁺ в НАДН.', props:['2 НАДН'] },
+      { id:'pg3',   label:'3-ФГК',        formula:'C₃H₇O₇P',  x:540, y:560, role:'inter', desc:'3-фосфоглицерат. Образуется при субстратном фосфорилировании АДФ <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> АТФ ферментом фосфоглицераткиназой.', props:['+2 АТФ'] },
+      { id:'pg2',   label:'2-ФГК',        formula:'C₃H₇O₇P',  x:540, y:635, role:'inter', desc:'2-фосфоглицерат. Образуется при перемещении фосфатной группы с 3 на 2 положение.', props:[] },
+      { id:'pep',   label:'ФЕП',          formula:'C₃H₅O₆P',  x:540, y:710, role:'inter', desc:'Фосфоенолпируват (ФЕП) — высокоэнергетический промежуточный продукт. Образуется при дегидратации 2-ФГК.', props:[] },
+      { id:'pyr',   label:'Пируват',      formula:'C₃H₄O₃',   x:400, y:795, role:'product', desc:'Конечный продукт гликолиза. В аэробных условиях переходит в ацетил-КоА (цикл Кребса). В анаэробных <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> лактат или этанол.', props:['+2 АТФ', '2 молекулы'] },
+    ],
+    edges: [
+      { from:'glc',  to:'g6p',   enzyme:'Гексокиназа', co:'-АТФ', curveX:0 },
+      { from:'g6p',  to:'f6p',   enzyme:'ФГИ', curveX:0 },
+      { from:'f6p',  to:'f16bp', enzyme:'ФФК-1', co:'-АТФ', curveX:0 },
+      { from:'f16bp',to:'dhap',  enzyme:'Альдолаза', curveX:0 },
+      { from:'f16bp',to:'gap',   enzyme:'Альдолаза', curveX:0 },
+      { from:'dhap', to:'gap',   enzyme:'ТФИ', curveX:0 },
+      { from:'gap',  to:'bpg',   enzyme:'ГАФДГ', co:'+НАДН', curveX:0 },
+      { from:'bpg',  to:'pg3',   enzyme:'ФГК', co:'+АТФ', curveX:0 },
+      { from:'pg3',  to:'pg2',   enzyme:'Фосфоглицератмутаза', curveX:0 },
+      { from:'pg2',  to:'pep',   enzyme:'Енолаза', curveX:0 },
+      { from:'pep',  to:'pyr',   enzyme:'Пируваткиназа', co:'+АТФ', curveX:0 },
+    ],
+    steps: [
+      {
+        title:'Фосфорилирование глюкозы',
+        mol:'g6p',
+        desc:'Гексокиназа катализирует перенос фосфатной группы с АТФ на глюкозу, образуя глюкозо-6-фосфат (Г6Ф). Реакция необратима и «ловит» глюкозу в клетке.',
+        energy:[{label:'-1 АТФ', cls:'atp-used'}],
+        quiz:{ q:'Зачем глюкозу фосфорилируют в первой реакции?', opts:['Для выхода из клетки','Чтобы удержать глюкозу в клетке','Для образования НАДН','Для расщепления кольца'], ans:1 }
+      },
+      {
+        title:'Изомеризация',
+        mol:'f6p',
+        desc:'Фосфоглюкоизомераза превращает Г6Ф в фруктозо-6-фосфат (Ф6Ф). Реакция обратима и перестраивает альдозный сахар в кетозный.',
+        energy:[],
+        quiz:{ q:'Какой фермент катализирует изомеризацию Г6Ф <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> Ф6Ф?', opts:['Гексокиназа','Альдолаза','Фосфоглюкоизомераза','Пируваткиназа'], ans:2 }
+      },
+      {
+        title:'Ключевой контрольный шаг',
+        mol:'f16bp',
+        desc:'Фосфофруктокиназа-1 (ФФК-1) фосфорилирует Ф6Ф <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> фруктозо-1,6-бисфосфат. Это необратимая реакция — главный регуляторный пункт гликолиза. АТФ ингибирует, АМФ/АДФ активирует.',
+        energy:[{label:'-1 АТФ', cls:'atp-used'}],
+        quiz:{ q:'Что является главным аллостерическим активатором ФФК-1?', opts:['АТФ','АМФ','НАДН','Пируват'], ans:1 }
+      },
+      {
+        title:'Расщепление на триозы',
+        mol:'gap',
+        desc:'Альдолаза расщепляет фруктозо-1,6-бисфосфат на два триозофосфата: ДГАФ и ГАФ (глицеральдегид-3-фосфат). Триозофосфатизомераза быстро конвертирует ДГАФ <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> ГАФ.',
+        energy:[],
+        quiz:{ q:'Сколько молекул ГАФ образуется из одной глюкозы?', opts:['1','2','3','4'], ans:1 }
+      },
+      {
+        title:'Окислительное фосфорилирование',
+        mol:'bpg',
+        desc:'ГАФДГ окисляет ГАФ и присоединяет неорганический фосфат <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> 1,3-бисфосфоглицерат. Сопряжено с восстановлением НАД⁺ <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> НАДН. Реакция субстратного фосфорилирования.',
+        energy:[{label:'+2 НАДН', cls:'nadh'}],
+        quiz:{ q:'Чем восстанавливается НАД⁺ в этой реакции?', opts:['ГАФ','Пируват','ДГАФ','АТФ'], ans:0 }
+      },
+      {
+        title:'Первая выработка АТФ',
+        mol:'pg3',
+        desc:'Фосфоглицераткиназа переносит фосфат с 1,3-бФГ на АДФ <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> АТФ. Это субстратное фосфорилирование — первый синтез АТФ в гликолизе. С каждой глюкозы получаем 2 АТФ.',
+        energy:[{label:'+2 АТФ', cls:'atp-prod'}],
+        quiz:{ q:'Как называется тип синтеза АТФ в этой реакции?', opts:['Окислительное фосфорилирование','Субстратное фосфорилирование','Фотофосфорилирование','Трансфосфорилирование'], ans:1 }
+      },
+      {
+        title:'Мутация фосфатной группы',
+        mol:'pg2',
+        desc:'Фосфоглицератмутаза перемещает фосфатную группу с 3-го на 2-е углеродное положение, подготавливая молекулу к дегидратации.',
+        energy:[],
+        quiz:{ q:'Какой продукт образуется из 3-ФГК под действием мутазы?', opts:['ФЕП','2-ФГК','Пируват','1,3-бФГ'], ans:1 }
+      },
+      {
+        title:'Образование ФЕП',
+        mol:'pep',
+        desc:'Енолаза катализирует дегидратацию 2-фосфоглицерата <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> фосфоенолпируват (ФЕП). ФЕП — высокоэнергетический соединение с большой отрицательной ΔG° гидролиза фосфата.',
+        energy:[],
+        quiz:{ q:'Почему ФЕП называют «высокоэнергетическим»?', opts:['Содержит много атомов С','Большая ΔG° гидролиза фосфатной связи','Растворяется в жирах','Содержит двойную связь'], ans:1 }
+      },
+      {
+        title:'Финальная реакция — пируват',
+        mol:'pyr',
+        desc:'Пируваткиназа переносит фосфат с ФЕП на АДФ <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> АТФ + пируват. Необратимая реакция. Итог: из 1 глюкозы 2 пирувата, 2 НАДН, +2 АТФ нетто.',
+        energy:[{label:'+2 АТФ', cls:'atp-prod'},{label:'2 пируват', cls:'co2'}],
+        quiz:{ q:'Каков нетто-выход АТФ на 1 молекулу глюкозы в гликолизе?', opts:['1','2','4','36'], ans:1 }
+      },
+    ]
+  },
+
+  krebs: {
+    name: 'Цикл Кребса',
+    color: '#06b6d4',
+    colorRgb: '6,182,212',
+    desc: '8 реакций окисления ацетил-КоА. Происходит в матриксе митохондрий. Выход на 1 оборот: 3 НАДН, 1 ФАДН₂, 1 ГТФ, 2 СО₂.',
+    stats: [
+      { label: '3 НАДН / оборот', cls: 'nadh' },
+      { label: '2 CO₂', cls: 'co2' },
+      { label: '1 ГТФ', cls: 'atp' },
+    ],
+    legend: [
+      { color: '#06b6d4', type: 'circle', label: 'Промежуточный метаболит' },
+      { color: '#06b6d4', type: 'line', label: 'Реакция цикла' },
+    ],
+    nodes: [
+      { id:'acetcoa', label:'Ацетил-КоА', formula:'CH₃CO-SCoA',x:440, y:80,  role:'substrate', desc:'Активированный ацетат. Образуется из пирувата (гликолиз), жирных кислот (β-окисление) и аминокислот.', props:['Входит в цикл'] },
+      { id:'oaa',     label:'ОАА',        formula:'C₄H₄O₅',    x:260, y:140, role:'key', desc:'Оксалоацетат — акцептор ацетил-КоА. Регенерируется в каждом обороте цикла. Ключевой анаплеротический метаболит.', props:['Акцептор'] },
+      { id:'cit',     label:'Цитрат',     formula:'C₆H₈O₇',    x:160, y:260, role:'inter', desc:'Цитрат — первый продукт цикла. Синтезируется цитратсинтазой из ацетил-КоА и ОАА.', props:[] },
+      { id:'isocit',  label:'Изоцитрат',  formula:'C₆H₈O₇',    x:120, y:390, role:'inter', desc:'Изоцитрат — изомер цитрата. Субстрат изоцитратдегидрогеназы — ключевого регуляторного фермента.', props:[] },
+      { id:'akg',     label:'α-КГ',       formula:'C₅H₆O₅',    x:160, y:520, role:'inter', desc:'α-кетоглутарат (α-КГ). Образуется при окислительном декарбоксилировании изоцитрата. Выделяется CO₂.', props:['−CO₂','+НАДН'] },
+      { id:'succoa',  label:'Сукцинил-КоА',formula:'C₅H₆O₃S',  x:300, y:620, role:'inter', desc:'Сукцинил-КоА — высокоэнергетический тиоэфир. Образуется при окислительном декарбоксилировании α-КГ.', props:['+НАДН','+ГТФ','-CO₂'] },
+      { id:'succ',    label:'Сукцинат',   formula:'C₄H₆O₄',    x:480, y:620, role:'inter', desc:'Сукцинат. Окисляется сукцинатдегидрогеназой (СДГ) — единственным мембранным ферментом цикла.', props:['+ФАДН₂'] },
+      { id:'fum',     label:'Фумарат',    formula:'C₄H₄O₄',    x:620, y:520, role:'inter', desc:'Фумарат — транс-изомер. Образуется при окислении сукцината. Гидратируется фумаразой.', props:[] },
+      { id:'mal',     label:'Малат',      formula:'C₄H₆O₅',    x:660, y:390, role:'inter', desc:'Малат (яблочная кислота). Образуется при гидратации фумарата. Окисляется малатдегидрогеназой.', props:['+НАДН'] },
+    ],
+    edges: [
+      { from:'acetcoa',to:'cit',    enzyme:'Цитратсинтаза',          co:'+ОАА', curveX:0 },
+      { from:'oaa',    to:'cit',    enzyme:'',                        curveX:0 },
+      { from:'cit',    to:'isocit', enzyme:'Аконитаза',               curveX:0 },
+      { from:'isocit', to:'akg',    enzyme:'ИзоцитратДГ',             co:'+НАДН,-CO₂', curveX:0 },
+      { from:'akg',    to:'succoa', enzyme:'α-КГДГ-комплекс',         co:'+НАДН,-CO₂', curveX:0 },
+      { from:'succoa', to:'succ',   enzyme:'Сукцинил-КоА-синтетаза',  co:'+ГТФ', curveX:0 },
+      { from:'succ',   to:'fum',    enzyme:'Сукцинатдегидрогеназа',   co:'+ФАДН₂', curveX:0 },
+      { from:'fum',    to:'mal',    enzyme:'Фумараза',                 curveX:0 },
+      { from:'mal',    to:'oaa',    enzyme:'МалатДГ',                  co:'+НАДН', curveX:0 },
+    ],
+    steps: [
+      { title:'Конденсация с ОАА', mol:'cit', desc:'Цитратсинтаза присоединяет ацетил-КоА (2C) к оксалоацетату (4C) <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> цитрат (6C). Это необратимая реакция, запускающая цикл.', energy:[], quiz:{q:'Сколько углеродов в цитрате?', opts:['2','4','6','8'], ans:2} },
+      { title:'Изомеризация цитрата', mol:'isocit', desc:'Аконитаза через промежуточный цис-аконитат превращает цитрат в изоцитрат. Реакция обратима, равновесие сдвинуто в сторону цитрата.', energy:[], quiz:{q:'Какой фермент изомеризует цитрат?', opts:['Фумараза','Аконитаза','Малатдегидрогеназа','Цитратсинтаза'], ans:1} },
+      { title:'Первое окислительное декарбоксилирование', mol:'akg', desc:'Изоцитратдегидрогеназа окисляет изоцитрат <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> α-кетоглутарат с выделением CO₂ и НАДН. Ключевой регуляторный шаг — активируется изоцитратом, ингибируется НАДН.', energy:[{label:'+НАДН',cls:'nadh'},{label:'-CO₂',cls:'co2'}], quiz:{q:'Сколько углеродов в α-кетоглутарате?', opts:['2','4','5','6'], ans:2} },
+      { title:'Второе окислительное декарбоксилирование', mol:'succoa', desc:'α-кетоглутаратдегидрогеназный комплекс (аналог ПДК) окисляет α-КГ <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> сукцинил-КоА. Выделяется ещё одна CO₂ и НАДН.', energy:[{label:'+НАДН',cls:'nadh'},{label:'-CO₂',cls:'co2'}], quiz:{q:'Чем структурно похож α-КГДК на пируватдегидрогеназный комплекс?', opts:['Использует ФАДН₂','Механизм окислительного декарбоксилирования с КоА','Находится в цитоплазме','Требует витамин К'], ans:1} },
+      { title:'Субстратное фосфорилирование', mol:'succ', desc:'Сукцинил-КоА-синтетаза расщепляет тиоэфирную связь сукцинил-КоА, сопрягая это с синтезом ГТФ (или АТФ). Единственная реакция субстратного фосфорилирования в цикле.', energy:[{label:'+ГТФ',cls:'atp-prod'}], quiz:{q:'Что синтезируется при реакции сукцинил-КоА-синтетазы?', opts:['НАДН','ФАДН₂','ГТФ','CO₂'], ans:2} },
+      { title:'Окисление сукцината', mol:'fum', desc:'Сукцинатдегидрогеназа (комплекс II дыхательной цепи) окисляет сукцинат <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> фумарат, восстанавливая ФАД <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> ФАДН₂.', energy:[{label:'+ФАДН₂',cls:'fadh2'}], quiz:{q:'К какому комплексу дыхательной цепи относится СДГ?', opts:['Комплекс I','Комплекс II','Комплекс III','АТФ-синтаза'], ans:1} },
+      { title:'Гидратация фумарата', mol:'mal', desc:'Фумараза присоединяет воду к фумарату <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> L-малат. Реакция стереоспецифична — образуется только L-изомер.', energy:[], quiz:{q:'Что присоединяется к фумарату в этой реакции?', opts:['CO₂','АТФ','H₂O','НАДН'], ans:2} },
+      { title:'Регенерация ОАА', mol:'oaa', desc:'Малатдегидрогеназа окисляет малат <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> оксалоацетат с образованием НАДН. Регенерируется акцептор для следующего оборота цикла.', energy:[{label:'+НАДН',cls:'nadh'}], quiz:{q:'Сколько оборотов цикла Кребса нужно на 1 молекулу глюкозы?', opts:['1','2','4','10'], ans:1} },
+    ]
+  },
+
+  oxidation: {
+    name: 'β-Окисление',
+    color: '#fb923c',
+    colorRgb: '251,146,60',
+    desc: 'Повторяющиеся циклы окисления жирных кислот в митохондриях. Каждый цикл отщепляет 2C в виде ацетил-КоА и выделяет 1 НАДН + 1 ФАДН₂.',
+    stats: [
+      { label: '+НАДН / цикл', cls: 'nadh' },
+      { label: '+ФАДН₂', cls: 'nadh' },
+      { label: '+Ацетил-КоА', cls: 'atp' },
+    ],
+    legend: [
+      { color: '#fb923c', type: 'circle', label: 'Промежуточный продукт' },
+      { color: '#fb923c', type: 'line', label: 'Реакция β-окисления' },
+    ],
+    nodes: [
+      { id:'fac',     label:'Жирная к-та',formula:'R-COOH',      x:400, y:60,  role:'substrate', desc:'Свободная жирная кислота (напр. пальмитиновая C₁₆). Активируется в ацил-КоА перед входом в митохондрии.', props:[] },
+      { id:'acylcoa', label:'Ацил-КоА',   formula:'R-CO-SCoA',   x:400, y:150, role:'key', desc:'Активированная жирная кислота. Образуется при участии ацил-КоА-синтетазы за счёт АТФ (<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>АМФ+PPi). Не проходит через мембрану — транспортируется как карнитиновый эфир.', props:['-АТФ (<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>АМФ)'] },
+      { id:'enoylcoa',label:'Транс-еноил-КоА',formula:'R-CH=CH-CO-SCoA',x:400,y:250,role:'inter',desc:'Транс-Δ²-еноил-КоА. Образуется при ФАД-зависимом окислении ацил-КоА ацил-КоА-дегидрогеназой.', props:['+ФАДН₂'] },
+      { id:'hydroxy', label:'L-β-гидрокси-КоА',formula:'R-CHOH-CH₂-CO-SCoA',x:400,y:345,role:'inter',desc:'L-β-гидроксиацил-КоА. Образуется при гидратации двойной связи еноил-КоА гидратазой.', props:[] },
+      { id:'ketoacoa',label:'β-кето-КоА',  formula:'R-CO-CH₂-CO-SCoA',x:400,y:440,role:'inter',desc:'β-кетоацил-КоА. Образуется при НАД⁺-зависимом окислении L-β-гидроксиацил-КоА.', props:['+НАДН'] },
+      { id:'newacyl', label:'Ацил-КоА (−2C)',formula:'R\'—CO-SCoA', x:240, y:540, role:'inter', desc:'Укороченный на 2 углерода ацил-КоА. Возвращается на начало цикла β-окисления.', props:['Следующий цикл'] },
+      { id:'acetcoa2',label:'Ацетил-КоА',  formula:'CH₃CO-SCoA',  x:560, y:540, role:'product', desc:'Ацетил-КоА — входит в цикл Кребса. Из пальмитиновой кислоты (C₁₆) образуется 8 ацетил-КоА за 7 циклов β-окисления.', props:['<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> Цикл Кребса'] },
+    ],
+    edges: [
+      { from:'fac',     to:'acylcoa',  enzyme:'Ацил-КоА-синтетаза', co:'-АТФ', curveX:0 },
+      { from:'acylcoa', to:'enoylcoa', enzyme:'Ацил-КоА-ДГ',         co:'+ФАДН₂', curveX:0 },
+      { from:'enoylcoa',to:'hydroxy',  enzyme:'Еноил-КоА-гидратаза', curveX:0 },
+      { from:'hydroxy', to:'ketoacoa', enzyme:'L-3-гидроксиацил-КоА-ДГ', co:'+НАДН', curveX:0 },
+      { from:'ketoacoa',to:'newacyl',  enzyme:'Тиолаза', curveX:0 },
+      { from:'ketoacoa',to:'acetcoa2', enzyme:'Тиолаза', curveX:0 },
+      { from:'newacyl', to:'acylcoa',  enzyme:'Повтор цикла', curveX:-60 },
+    ],
+    steps: [
+      { title:'Активация жирной кислоты', mol:'acylcoa', desc:'Ацил-КоА-синтетаза присоединяет КоА к жирной кислоте, образуя ацил-КоА. Расходуется АТФ (<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>АМФ+PPi, что эквивалентно 2 АТФ). Это происходит в цитоплазме.', energy:[{label:'-2 АТФ',cls:'atp-used'}], quiz:{q:'Где происходит активация жирной кислоты в ацил-КоА?', opts:['В митохондриях','В ядре','В цитоплазме','В рибосомах'], ans:2} },
+      { title:'ФАД-зависимое окисление', mol:'enoylcoa', desc:'Ацил-КоА-дегидрогеназа окисляет ацил-КоА, вводя двойную связь между α и β углеродами <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> транс-Δ²-еноил-КоА. ФАД восстанавливается до ФАДН₂.', energy:[{label:'+ФАДН₂',cls:'fadh2'}], quiz:{q:'Какой кофактор восстанавливается в первой реакции β-окисления?', opts:['НАД⁺','ФАД','ГТФ','КоА'], ans:1} },
+      { title:'Гидратация двойной связи', mol:'hydroxy', desc:'Еноил-КоА-гидратаза присоединяет воду по двойной связи <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> L-β-гидроксиацил-КоА. Реакция стереоспецифична.', energy:[], quiz:{q:'Что присоединяется в реакции гидратации еноил-КоА?', opts:['CO₂','O₂','H₂O','НАД⁺'], ans:2} },
+      { title:'НАД⁺-зависимое окисление', mol:'ketoacoa', desc:'L-3-гидроксиацил-КоА-дегидрогеназа окисляет гидроксильную группу <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> кетогруппу, восстанавливая НАД⁺ <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> НАДН.', energy:[{label:'+НАДН',cls:'nadh'}], quiz:{q:'Какая группа окисляется в этой реакции?', opts:['Карбоксильная','Аминогруппа','Гидроксильная','Метильная'], ans:2} },
+      { title:'Тиолитическое расщепление', mol:'acetcoa2', desc:'Тиолаза расщепляет β-кетоацил-КоА присоединением КоА <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> ацетил-КоА (2C) + укороченный ацил-КоА. Цикл повторяется.', energy:[{label:'+Ацетил-КоА',cls:'atp-prod'}], quiz:{q:'Сколько ацетил-КоА образуется из пальмитиновой кислоты (C16)?', opts:['4','6','7','8'], ans:3} },
+    ]
+  },
+
+  synthesis: {
+    name: 'Синтез белка',
+    color: '#a78bfa',
+    colorRgb: '167,139,250',
+    desc: 'Трансляция — считывание мРНК рибосомой и полимеризация аминокислот в полипептидную цепь.',
+    stats: [
+      { label: '~2 ГТФ / аминокислота', cls: 'atp' },
+      { label: 'мРНК <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> белок', cls: 'nadh' },
+    ],
+    legend: [
+      { color: '#a78bfa', type: 'circle', label: 'Участник трансляции' },
+      { color: '#a78bfa', type: 'line', label: 'Этап синтеза' },
+    ],
+    nodes: [
+      { id:'mrna',    label:'мРНК',          formula:'5′-AUG…-3′',  x:400, y:60,  role:'substrate', desc:'Матричная РНК — несёт генетическую информацию от ДНК к рибосоме в виде кодонов (триплетов нуклеотидов).', props:['Матрица'] },
+      { id:'ribosome',label:'Рибосома',       formula:'60S+40S',     x:400, y:160, role:'key', desc:'Эукариотическая рибосома (80S). Состоит из малой (40S) и большой (60S) субъединиц. Имеет 3 сайта: A (аминоацильный), P (пептидильный), E (выход).', props:['A-P-E сайты'] },
+      { id:'trna',    label:'аминоацил-тРНК', formula:'aa-tRNA',     x:230, y:260, role:'inter', desc:'тРНК с присоединённой аминокислотой. Распознаёт кодон мРНК через антикодон. Доставляется в A-сайт в комплексе с EF-Tu·ГТФ.', props:['-2 ГТФ'] },
+      { id:'peptide', label:'Растущая цепь',  formula:'...aa-aa-aa', x:560, y:260, role:'inter', desc:'Нарастающая полипептидная цепь в P-сайте. Пептидилтрансфераза (23S rRNA) катализирует образование пептидной связи.', props:['P-сайт'] },
+      { id:'peptbond',label:'Пептидная связь',formula:'—CO—NH—',     x:400, y:360, role:'inter', desc:'Образование пептидной связи катализируется рибозимом (23S rRNA) — пептидилтрансферазой. Выделяется тРНК из P-сайта.', props:[] },
+      { id:'translo', label:'Транслокация',   formula:'EF-G·ГТФ',   x:400, y:460, role:'inter', desc:'Фактор EF-G (с ГТФ) сдвигает рибосому на 1 кодон (3 нт) в направлении 5′<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>3′. Освобождается Е-сайт. Расходуется ГТФ.', props:['-1 ГТФ'] },
+      { id:'protein', label:'Белок',          formula:'[полипептид]', x:400, y:560, role:'product', desc:'Готовый полипептид. Освобождается при встрече со стоп-кодоном (UAA, UAG, UGA) при участии факторов высвобождения RF1/RF2.', props:['Готовый продукт'] },
+    ],
+    edges: [
+      { from:'mrna',    to:'ribosome', enzyme:'Инициация (eIF)', curveX:0 },
+      { from:'ribosome',to:'trna',     enzyme:'Декодирование', curveX:0 },
+      { from:'trna',    to:'peptbond', enzyme:'Пептидилтрансфераза', curveX:0 },
+      { from:'peptide', to:'peptbond', enzyme:'', curveX:0 },
+      { from:'peptbond',to:'translo',  enzyme:'EF-G·ГТФ', curveX:0 },
+      { from:'translo', to:'protein',  enzyme:'Терминация (RF)', curveX:0 },
+      { from:'translo', to:'ribosome', enzyme:'Следующий кодон', curveX:-70 },
+    ],
+    steps: [
+      { title:'Инициация', mol:'ribosome', desc:'Малая субъединица рибосомы распознаёт 5′-кэп мРНК при помощи факторов инициации (eIF4E/4G). Инициаторная Met-тРНК занимает P-сайт. Присоединяется большая субъединица.', energy:[{label:'-3 ГТФ',cls:'atp-used'}], quiz:{q:'Какой сайт занимает инициаторная Met-тРНК?', opts:['A-сайт','P-сайт','E-сайт','Все три'], ans:1} },
+      { title:'Элонгация — доставка аа-тРНК', mol:'trna', desc:'EF-Tu·ГТФ доставляет аминоацил-тРНК в A-сайт. При правильном спаривании кодон–антикодон ГТФ гидролизуется, EF-Tu·ГДФ уходит.', energy:[{label:'-1 ГТФ',cls:'atp-used'}], quiz:{q:'Какой фактор доставляет аа-тРНК в А-сайт?', opts:['EF-G','EF-Tu','eIF2','RF1'], ans:1} },
+      { title:'Пептидная связь', mol:'peptbond', desc:'Пептидилтрансфераза переносит пептидильную группу с P-сайта на аминогруппу в A-сайте, образуя пептидную связь. Энергия — из гидролиза аминоацильной связи тРНК.', energy:[], quiz:{q:'Что катализирует образование пептидной связи?', opts:['Белковый фермент','23S rRNA (рибозим)','ДНК-полимераза','АТФ-синтаза'], ans:1} },
+      { title:'Транслокация', mol:'translo', desc:'EF-G·ГТФ сдвигает рибосому на 3 нуклеотида по мРНК. Цепь с тРНК перемещается из A <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> P, пустая тРНК из P <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> E и уходит. Расходуется ГТФ.', energy:[{label:'-1 ГТФ',cls:'atp-used'}], quiz:{q:'На сколько нуклеотидов сдвигается рибосома при транслокации?', opts:['1','2','3','4'], ans:2} },
+      { title:'Терминация и высвобождение', mol:'protein', desc:'Стоп-кодон (UAA/UAG/UGA) распознаётся факторами высвобождения RF1/RF2. Пептидилтрансфераза гидролизует связь пептид-тРНК <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> белок освобождается. Рибосома диссоциирует.', energy:[], quiz:{q:'Сколько стоп-кодонов существует?', opts:['1','2','3','4'], ans:2} },
+    ]
+  }
+};
+
+// ═══════════════════════════════════════════════════════
+// STATE
+// ═══════════════════════════════════════════════════════
+let currentPath = 'glycolysis';
+let animOn = true;
+let activeNode = null;
+let learnStep = 0;
+let learnMode = false;
+let particles = [];
+let animFrame = null;
+let svgTranslate = { x: 0, y: 0 };
+let svgScale = 1;
+let dragState = null;
+
+// ═══════════════════════════════════════════════════════
+// PATH SELECTION & RENDER
+// ═══════════════════════════════════════════════════════
+function selectPath(id) {
+  currentPath = id;
+  document.querySelectorAll('.path-chip').forEach(c => c.classList.toggle('active', c.dataset.path === id));
+  stopLearnMode();
+  renderPath();
+  renderPathInfo();
+}
+
+function renderPath() {
+  const pd = PATHWAYS[currentPath];
+  const area = document.getElementById('svg-area');
+  const W = area.clientWidth || 800;
+  const H = area.clientHeight || 600;
+
+  // auto-fit: find bounding box of nodes
+  const xs = pd.nodes.map(n => n.x), ys = pd.nodes.map(n => n.y);
+  const minX = Math.min(...xs) - 60, minY = Math.min(...ys) - 60;
+  const maxX = Math.max(...xs) + 60, maxY = Math.max(...ys) + 60;
+  const scaleX = W / (maxX - minX), scaleY = H / (maxY - minY);
+  svgScale = Math.min(scaleX, scaleY, 1.2) * 0.9;
+  svgTranslate.x = (W - (maxX - minX) * svgScale) / 2 - minX * svgScale;
+  svgTranslate.y = (H - (maxY - minY) * svgScale) / 2 - minY * svgScale;
+  applyTransform();
+
+  renderEdges(pd);
+  renderNodes(pd);
+  renderStats(pd);
+  renderLegend(pd);
+
+  stopParticles();
+  if (animOn) startParticles(pd);
+}
+
+function applyTransform() {
+  const g = document.getElementById('svg-root');
+  g.setAttribute('transform', `translate(${svgTranslate.x},${svgTranslate.y}) scale(${svgScale})`);
+}
+
+function renderEdges(pd) {
+  const layer = document.getElementById('edges-layer');
+  layer.innerHTML = '';
+  const color = pd.color;
+  const marker = `url(#arrowhead)`;
+
+  for (const e of pd.edges) {
+    const fn = pd.nodes.find(n => n.id === e.from);
+    const tn = pd.nodes.find(n => n.id === e.to);
+    if (!fn || !tn) continue;
+
+    const x1 = fn.x, y1 = fn.y, x2 = tn.x, y2 = tn.y;
+    const dx = x2 - x1, dy = y2 - y1;
+    const len = Math.hypot(dx, dy) || 1;
+    // shorten to edge of node circle (r=28)
+    const R = 28;
+    const sx = x1 + dx/len * R, sy = y1 + dy/len * R;
+    const ex = x2 - dx/len * R, ey = y2 - dy/len * R;
+
+    let pathD;
+    if (e.curveX && e.curveX !== 0) {
+      // quadratic curve
+      const mx = (x1+x2)/2 + e.curveX, my = (y1+y2)/2;
+      pathD = `M${sx},${sy} Q${mx},${my} ${ex},${ey}`;
+    } else {
+      pathD = `M${sx},${sy} L${ex},${ey}`;
+    }
+
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttribute('d', pathD);
+    path.setAttribute('stroke', `rgba(${pd.colorRgb},0.45)`);
+    path.setAttribute('stroke-width', '1.8');
+    path.setAttribute('fill', 'none');
+    path.setAttribute('marker-end', marker);
+    path.setAttribute('data-edge-id', `${e.from}-${e.to}`);
+    layer.appendChild(path);
+
+    // enzyme label
+    if (e.enzyme) {
+      const midT = 0.5;
+      let lx, ly;
+      if (e.curveX) {
+        const mx = (x1+x2)/2 + e.curveX, my = (y1+y2)/2;
+        lx = (1-midT)*(1-midT)*sx + 2*(1-midT)*midT*mx + midT*midT*ex;
+        ly = (1-midT)*(1-midT)*sy + 2*(1-midT)*midT*my + midT*midT*ey - 12;
+      } else {
+        lx = (sx+ex)/2 + (-dy/len)*12;
+        ly = (sy+ey)/2 + (dx/len)*12;
+      }
+      const txt = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+      txt.setAttribute('x', lx);
+      txt.setAttribute('y', ly);
+      txt.setAttribute('class', 'edge-enzyme');
+      txt.textContent = e.enzyme;
+      layer.appendChild(txt);
+    }
+
+    // co-factor label
+    if (e.co) {
+      const nx = -dy/len, ny = dx/len;
+      const lx = (sx+ex)/2 - nx*13, ly = (sy+ey)/2 - ny*13;
+      const txt2 = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+      txt2.setAttribute('x', lx);
+      txt2.setAttribute('y', ly);
+      txt2.setAttribute('class', 'edge-label');
+      txt2.setAttribute('fill', `rgba(${pd.colorRgb},0.7)`);
+      txt2.textContent = e.co;
+      layer.appendChild(txt2);
+    }
+  }
+}
+
+function renderNodes(pd) {
+  const layer = document.getElementById('nodes-layer');
+  layer.innerHTML = '';
+
+  const roleColor = {
+    substrate: { fill: '#1a2e20', stroke: '#34d399' },
+    key:       { fill: '#1e1a2e', stroke: '#a78bfa' },
+    inter:     { fill: '#111128', stroke: `rgba(${pd.colorRgb},0.7)` },
+    product:   { fill: '#1a2a20', stroke: '#4ade80' },
+  };
+
+  for (const n of pd.nodes) {
+    const rc = roleColor[n.role] || roleColor.inter;
+    const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    g.setAttribute('class', 'mol-node' + (activeNode === n.id ? ' active' : ''));
+    g.setAttribute('data-node-id', n.id);
+    g.setAttribute('transform', `translate(${n.x},${n.y})`);
+    g.style.cursor = 'pointer';
+    g.addEventListener('click', () => clickNode(n.id));
+
+    // Outer glow circle
+    const glow = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+    glow.setAttribute('r', '34');
+    glow.setAttribute('fill', 'none');
+    glow.setAttribute('stroke', rc.stroke);
+    glow.setAttribute('stroke-width', '0.5');
+    glow.setAttribute('opacity', '0.2');
+    g.appendChild(glow);
+
+    // Main circle
+    const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+    circle.setAttribute('class', 'node-circle');
+    circle.setAttribute('r', n.role === 'key' ? '30' : '27');
+    circle.setAttribute('fill', rc.fill);
+    circle.setAttribute('stroke', rc.stroke);
+    circle.setAttribute('stroke-width', activeNode === n.id ? '2.5' : '1.8');
+    g.appendChild(circle);
+
+    // Label
+    const lines = n.label.split(' ');
+    if (lines.length === 1) {
+      const t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+      t.setAttribute('class', 'node-label');
+      t.setAttribute('y', '0');
+      t.textContent = n.label;
+      g.appendChild(t);
+      // formula
+      const f = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+      f.setAttribute('class', 'node-formula');
+      f.setAttribute('y', '13');
+      f.textContent = n.formula;
+      g.appendChild(f);
+    } else {
+      lines.forEach((ln, i) => {
+        const t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+        t.setAttribute('class', 'node-label');
+        t.setAttribute('y', (i - (lines.length-1)/2) * 13 + '');
+        t.setAttribute('font-size', '9.5');
+        t.textContent = ln;
+        g.appendChild(t);
+      });
+    }
+
+    layer.appendChild(g);
+  }
+}
+
+function renderStats(pd) {
+  const el = document.getElementById('path-stats');
+  el.innerHTML = pd.stats.map(s => `<div class="pstat ${s.cls}">${s.label}</div>`).join('');
+}
+
+function renderLegend(pd) {
+  const el = document.getElementById('legend-items');
+  el.innerHTML = pd.legend.map(l => {
+    if (l.type === 'circle')    return `<div class="legend-item"><div class="legend-dot" style="background:${l.color}"></div>${l.label}</div>`;
+    if (l.type === 'circle-sm') return `<div class="legend-item"><div class="legend-dot" style="background:${l.color};width:5px;height:5px;opacity:.6"></div>${l.label}</div>`;
+    return `<div class="legend-item"><div class="legend-line" style="background:${l.color}"></div>${l.label}</div>`;
+  }).join('');
+}
+
+function renderPathInfo() {
+  const pd = PATHWAYS[currentPath];
+  document.getElementById('path-info-content').innerHTML = `
+    <div style="font-family:'Unbounded',sans-serif;font-size:.85rem;font-weight:800;color:#e0e0f0;margin-bottom:8px">${pd.name}</div>
+    <div style="font-family:'Manrope',sans-serif;font-size:.8rem;color:#aaa;line-height:1.6;margin-bottom:14px">${pd.desc}</div>
+    <div style="font-family:'Manrope',sans-serif;font-size:.72rem;font-weight:700;color:#444;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px">Выход энергии</div>
+    <div style="display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px">
+      ${pd.stats.map(s=>`<span class="pstat ${s.cls}" style="position:static;font-size:.75rem">${s.label}</span>`).join('')}
+    </div>
+    <div style="font-family:'Manrope',sans-serif;font-size:.72rem;font-weight:700;color:#444;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px">Ключевые молекулы (${pd.nodes.length})</div>
+    ${pd.nodes.map(n=>`
+      <div style="display:flex;gap:8px;align-items:center;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.04);cursor:pointer" onclick="clickNode('${n.id}');switchTab('mol')">
+        <div style="width:8px;height:8px;border-radius:50%;background:${pd.color};flex-shrink:0"></div>
+        <div>
+          <div style="font-family:'Manrope',sans-serif;font-size:.78rem;font-weight:700;color:#ccc">${n.label}</div>
+          <div style="font-family:'Manrope',sans-serif;font-size:.72rem;color:#555">${n.formula}</div>
+        </div>
+      </div>`).join('')}
+  `;
+}
+
+// ═══════════════════════════════════════════════════════
+// PARTICLE ANIMATION
+// ═══════════════════════════════════════════════════════
+function startParticles(pd) {
+  const layer = document.getElementById('particles-layer');
+  layer.innerHTML = '';
+  particles = [];
+
+  for (const e of pd.edges) {
+    const fn = pd.nodes.find(n => n.id === e.from);
+    const tn = pd.nodes.find(n => n.id === e.to);
+    if (!fn || !tn) continue;
+    // stagger start
+    const delay = Math.random() * 2000;
+    setTimeout(() => spawnParticle(pd, e, fn, tn), delay);
+  }
+}
+
+function spawnParticle(pd, edge, fn, tn) {
+  if (!animOn) return;
+  const layer = document.getElementById('particles-layer');
+
+  const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+  circle.setAttribute('r', '4');
+  circle.setAttribute('fill', pd.color);
+  circle.setAttribute('opacity', '0.9');
+  circle.setAttribute('class', 'flow-particle');
+  layer.appendChild(circle);
+
+  const duration = 1400 + Math.random() * 600;
+  const start = performance.now();
+
+  const R = 28;
+  const dx0 = tn.x - fn.x, dy0 = tn.y - fn.y;
+  const len0 = Math.hypot(dx0, dy0) || 1;
+  const sx = fn.x + dx0/len0 * R, sy = fn.y + dy0/len0 * R;
+  const ex = tn.x - dx0/len0 * R, ey = tn.y - dy0/len0 * R;
+
+  function frame(now) {
+    if (!animOn) { circle.remove(); return; }
+    const t = Math.min((now - start) / duration, 1);
+    const ease = t < 0.5 ? 2*t*t : -1+(4-2*t)*t;
+
+    let px, py;
+    if (edge.curveX) {
+      const mx = (fn.x+tn.x)/2 + edge.curveX, my = (fn.y+tn.y)/2;
+      px = (1-ease)*(1-ease)*sx + 2*(1-ease)*ease*mx + ease*ease*ex;
+      py = (1-ease)*(1-ease)*sy + 2*(1-ease)*ease*my + ease*ease*ey;
+    } else {
+      px = sx + (ex-sx)*ease;
+      py = sy + (ey-sy)*ease;
+    }
+
+    circle.setAttribute('cx', px);
+    circle.setAttribute('cy', py);
+    circle.setAttribute('opacity', t < 0.1 ? t*9 : t > 0.85 ? (1-t)/0.15 : 0.9);
+
+    if (t < 1) {
+      requestAnimationFrame(frame);
+    } else {
+      circle.remove();
+      // respawn after pause
+      if (animOn) setTimeout(() => spawnParticle(pd, edge, fn, tn), 800 + Math.random() * 1200);
+    }
+  }
+  requestAnimationFrame(frame);
+}
+
+function stopParticles() {
+  animOn = false;
+  document.getElementById('particles-layer').innerHTML = '';
+}
+
+function toggleAnimation() {
+  animOn = !animOn;
+  const btn = document.getElementById('anim-toggle');
+  btn.classList.toggle('on', animOn);
+  btn.innerHTML = `<i data-lucide="${animOn ? 'play-circle' : 'pause-circle'}" style="width:14px;height:14px"></i> Анимація`;
+  btn.innerHTML = `<i data-lucide="${animOn ? 'play-circle' : 'pause-circle'}" style="width:14px;height:14px"></i> Анимация`;
+  if (window.lucide) lucide.createIcons();
+  if (animOn) startParticles(PATHWAYS[currentPath]);
+  else document.getElementById('particles-layer').innerHTML = '';
+}
+
+// ═══════════════════════════════════════════════════════
+// NODE CLICK <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> SIDE PANEL
+// ═══════════════════════════════════════════════════════
+function clickNode(id) {
+  activeNode = id;
+  // re-render nodes to update active state
+  renderNodes(PATHWAYS[currentPath]);
+
+  const pd = PATHWAYS[currentPath];
+  const n = pd.nodes.find(x => x.id === id);
+  if (!n) return;
+
+  document.getElementById('mol-empty').style.display = 'none';
+  document.getElementById('mol-card').classList.add('show');
+  document.getElementById('mc-name').textContent = n.label;
+  document.getElementById('mc-formula').textContent = n.formula;
+  document.getElementById('mc-desc').textContent = n.desc;
+  document.getElementById('mc-props').innerHTML = (n.props||[]).map(p => {
+    let cls = 'key';
+    if (p.includes('АТФ') || p.includes('ГТФ')) cls = p.startsWith('+') ? 'atp' : 'atp';
+    if (p.includes('НАДН') || p.includes('ФАДН')) cls = 'nadh';
+    if (p.includes('CO₂')) cls = 'co2';
+    return `<span class="mol-prop ${cls}">${p}</span>`;
+  }).join('');
+  document.getElementById('mc-link').href = '/biochem-library';
+  document.getElementById('mc-link').innerHTML = 'Найти в библиотеке <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>';
+
+  switchTab('mol');
+}
+
+// ═══════════════════════════════════════════════════════
+// LEARN MODE
+// ═══════════════════════════════════════════════════════
+function startLearn() {
+  learnMode = true;
+  learnStep = 0;
+  switchTab('learn');
+  document.getElementById('learn-inactive').style.display = 'none';
+  renderLearnStep();
+}
+
+function stopLearnMode() {
+  learnMode = false;
+  document.getElementById('learn-inactive').style.display = 'block';
+  document.getElementById('learn-active').innerHTML = '';
+}
+
+let quizAnswered = false;
+
+function renderLearnStep() {
+  const pd = PATHWAYS[currentPath];
+  const steps = pd.steps;
+  if (learnStep >= steps.length) { renderLearnComplete(); return; }
+
+  const s = steps[learnStep];
+  const pct = Math.round((learnStep / steps.length) * 100);
+  quizAnswered = false;
+
+  // highlight node
+  activeNode = s.mol;
+  renderNodes(pd);
+  // scroll to node (pan)
+  const n = pd.nodes.find(x => x.id === s.mol);
+  if (n) {
+    const area = document.getElementById('svg-area');
+    const W = area.clientWidth, H = area.clientHeight;
+    svgTranslate.x = W/2 - n.x * svgScale;
+    svgTranslate.y = H/2 - n.y * svgScale;
+    applyTransform();
+  }
+
+  const html = `
+    <div class="learn-progress-bar"><div class="learn-progress-fill" style="width:${pct}%"></div></div>
+    <div class="step-counter">Шаг ${learnStep+1} из ${steps.length}</div>
+    <div class="step-title-row">
+      <span class="step-num">${learnStep+1}</span>
+      <span class="step-title">${s.title}</span>
+    </div>
+    <div class="step-desc">${s.desc}</div>
+    ${s.energy.length ? `<div class="step-energy">${s.energy.map(e=>`<span class="energy-badge ${e.cls}">${e.label}</span>`).join('')}</div>` : ''}
+    <div class="mini-quiz">
+      <div class="quiz-q">${s.quiz.q}</div>
+      <div class="quiz-opts">
+        ${s.quiz.opts.map((o,i)=>`<button class="quiz-opt" id="qopt-${i}" onclick="answerQuiz(${i},${s.quiz.ans})">${o}</button>`).join('')}
+      </div>
+      <div id="quiz-fb" style="display:none" class="quiz-feedback"></div>
+    </div>
+    <div class="step-nav">
+      <button class="step-btn prev" onclick="stepNav(-1)" ${learnStep===0?'disabled':''}><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> Назад</button>
+      <button class="step-btn next" id="step-next-btn" onclick="stepNav(1)" disabled>
+        ${learnStep===steps.length-1 ? 'Завершить <svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>' : 'Далее <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>'}
+      </button>
+    </div>
+  `;
+  document.getElementById('learn-active').innerHTML = html;
+}
+
+function answerQuiz(chosen, correct) {
+  if (quizAnswered) return;
+  quizAnswered = true;
+  const ok = chosen === correct;
+  const fb = document.getElementById('quiz-fb');
+  fb.style.display = '';
+  fb.className = 'quiz-feedback ' + (ok ? 'ok' : 'err');
+  fb.innerHTML = ok ? '<svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg> Верно!' : `<svg class="ic" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg> Неверно. Правильный ответ: "${PATHWAYS[currentPath].steps[learnStep].quiz.opts[correct]}"`;
+
+  document.querySelectorAll('.quiz-opt').forEach((el, i) => {
+    el.disabled = true;
+    if (i === correct) el.classList.add('correct');
+    else if (i === chosen && !ok) el.classList.add('wrong');
+  });
+  document.getElementById('step-next-btn').disabled = false;
+}
+
+function stepNav(dir) {
+  learnStep += dir;
+  if (learnStep < 0) learnStep = 0;
+  renderLearnStep();
+}
+
+function renderLearnComplete() {
+  activeNode = null;
+  renderNodes(PATHWAYS[currentPath]);
+  document.getElementById('learn-active').innerHTML = `
+    <div class="learn-complete">
+      <div class="complete-icon"><svg class="ic" viewBox="0 0 24 24"><path d="m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3z"/></svg></div>
+      <div class="complete-title">${PATHWAYS[currentPath].name} пройден!</div>
+      <div class="complete-text" style="margin-bottom:16px">Вы изучили все ${PATHWAYS[currentPath].steps.length} шагов пути.</div>
+      <button class="learn-btn" style="display:inline-flex;margin:0 auto" onclick="startLearn()">Повторить</button>
+    </div>
+  `;
+}
+
+// ═══════════════════════════════════════════════════════
+// TABS
+// ═══════════════════════════════════════════════════════
+function switchTab(tab) {
+  ['mol','learn','info'].forEach(t => {
+    document.getElementById('tab-'+t).classList.toggle('active', t===tab);
+    document.getElementById('panel-'+t).style.display = t===tab ? '' : 'none';
+  });
+}
+
+// ═══════════════════════════════════════════════════════
+// PAN / ZOOM
+// ═══════════════════════════════════════════════════════
+function zoom(factor) {
+  svgScale *= factor;
+  applyTransform();
+}
+function resetView() {
+  renderPath();
+}
+
+const svgArea = document.getElementById('svg-area');
+svgArea.addEventListener('mousedown', e => {
+  if (e.target.closest('.mol-node')) return;
+  dragState = { sx: e.clientX, sy: e.clientY, tx: svgTranslate.x, ty: svgTranslate.y };
+});
+window.addEventListener('mousemove', e => {
+  if (!dragState) return;
+  svgTranslate.x = dragState.tx + (e.clientX - dragState.sx);
+  svgTranslate.y = dragState.ty + (e.clientY - dragState.sy);
+  applyTransform();
+});
+window.addEventListener('mouseup', () => { dragState = null; });
+svgArea.addEventListener('wheel', e => {
+  e.preventDefault();
+  const delta = e.deltaY > 0 ? 0.88 : 1.14;
+  const rect = svgArea.getBoundingClientRect();
+  const mx = e.clientX - rect.left, my = e.clientY - rect.top;
+  svgTranslate.x = mx - (mx - svgTranslate.x) * delta;
+  svgTranslate.y = my - (my - svgTranslate.y) * delta;
+  svgScale *= delta;
+  applyTransform();
+}, { passive: false });
+
+// ═══════════════════════════════════════════════════════
+// BOOT
+// ═══════════════════════════════════════════════════════
+async function init() {
+  try {
+    const user = await LS.getMe();
+    const initials = (user?.name||'LS').split(' ').slice(0,2).map(w=>w[0]?.toUpperCase()||'').join('')||'LS';
+    document.getElementById('nav-avatar').textContent = initials;
+    const nav2 = document.getElementById('nav-avatar2');
+    if (nav2) nav2.textContent = initials;
+    if (user?.role === 'admin') document.getElementById('btn-admin').style.display = '';
+    LS.applyRoleSidebar(user);
+    LS.showBoardIfAllowed();
+    if (user?.role !== 'student') {
+      document.getElementById('btn-classes').style.display = '';
+    }
+    document.getElementById('nav-user').textContent = user?.name || '—';
+  } catch(e) {}
+
+  // wait for layout
+  await new Promise(r => setTimeout(r, 60));
+  renderPath();
+  renderPathInfo();
+  if (window.lucide) lucide.createIcons();
+  LS.notif?.init();
+  LS.hideDisabledFeatures?.();
+}
+
+init();
+</script>
+<script src="/js/notifications.js"></script>
+<script src="/js/mobile.js"></script>
+</body>
+</html>
diff --git a/frontend/biochem-properties.html b/frontend/biochem-properties.html
new file mode 100644
index 0000000..29619f2
--- /dev/null
+++ b/frontend/biochem-properties.html
@@ -0,0 +1,605 @@
+<!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" />
+  <style>
+    html, body { height: 100%; overflow: hidden; }
+    .app-layout { height: 100vh; overflow: hidden; }
+    .sb-content { background: #0d0d1a; overflow: hidden; display: flex; flex-direction: column; }
+    .sb-sub-link { padding-left: 28px !important; font-size: 0.76rem !important; opacity: .75; }
+    .sb-sub-link:hover { opacity: 1; }
+
+    /* ── Layout ── */
+    .props-layout {
+      display: flex; flex: 1; min-height: 0; overflow: hidden; background: #0d0d1a;
+    }
+
+    /* ── Left: molecule search list ── */
+    .props-sidebar {
+      width: 260px; flex-shrink: 0;
+      background: rgba(8,8,20,.95);
+      border-right: 1px solid rgba(155,93,229,.12);
+      display: flex; flex-direction: column; overflow: hidden;
+    }
+    .ps-head {
+      padding: 14px 14px 10px;
+      border-bottom: 1px solid rgba(255,255,255,.05);
+      flex-shrink: 0;
+    }
+    .ps-title {
+      font-family: 'Unbounded', sans-serif; font-size: 0.68rem; font-weight: 700;
+      color: #9B5DE5; letter-spacing: .05em; margin-bottom: 8px;
+    }
+    .ps-search {
+      width: 100%; padding: 7px 10px; border-radius: 8px;
+      background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.1);
+      color: #ddd; font-family: 'Manrope', sans-serif; font-size: 0.8rem;
+      margin-bottom: 8px;
+    }
+    .ps-search:focus { outline: none; border-color: rgba(155,93,229,.5); }
+    .ps-cats { display: flex; gap: 4px; flex-wrap: wrap; }
+    .ps-cat {
+      font-size: 0.64rem; font-weight: 700; padding: 2px 7px; border-radius: 999px;
+      border: 1px solid rgba(255,255,255,.1); cursor: pointer; transition: all .15s;
+      background: rgba(255,255,255,.04); color: #666;
+    }
+    .ps-cat.active { background: rgba(155,93,229,.2); border-color: var(--violet); color: #c084fc; }
+    .ps-list { flex: 1; overflow-y: auto; padding: 6px 8px; }
+    .mol-row {
+      display: flex; align-items: center; gap: 8px; padding: 7px 8px;
+      border-radius: 8px; border: 1px solid transparent;
+      cursor: pointer; transition: all .15s; margin-bottom: 2px;
+    }
+    .mol-row:hover { background: rgba(155,93,229,.1); border-color: rgba(155,93,229,.15); }
+    .mol-row.in-compare { background: rgba(155,93,229,.18); border-color: var(--violet); }
+    .mol-thumb { width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; background: rgba(255,255,255,.04); }
+    .mol-info { flex: 1; min-width: 0; }
+    .mol-name { font-size: 0.74rem; font-weight: 700; color: #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .mol-formula { font-size: 0.68rem; color: #06D6E0; font-family: monospace; }
+
+    /* ── Right: comparison area ── */
+    .props-main {
+      flex: 1; overflow-y: auto; padding: 20px 24px;
+      display: flex; flex-direction: column; gap: 20px;
+    }
+    .props-hero {
+      display: flex; align-items: center; gap: 14px;
+    }
+    .props-hero-title {
+      font-family: 'Unbounded', sans-serif; font-size: 1.1rem; font-weight: 800;
+      color: #fff;
+    }
+    .props-hero-sub { font-size: 0.78rem; color: #666; margin-top: 2px; }
+    .compare-hint {
+      flex: 1; display: flex; align-items: center; justify-content: center;
+      flex-direction: column; gap: 10px; color: #444;
+      padding: 60px 24px; text-align: center; border: 1.5px dashed rgba(255,255,255,.06);
+      border-radius: 16px;
+    }
+    .compare-hint-icon { font-size: 2.5rem; }
+    .compare-hint-text { font-size: 0.82rem; }
+
+    /* ── Comparison cards ── */
+    .compare-grid {
+      display: grid; gap: 16px;
+      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    }
+    .compare-card {
+      background: rgba(15,15,35,.9); border: 1.5px solid rgba(155,93,229,.15);
+      border-radius: 16px; overflow: hidden; position: relative;
+    }
+    .compare-card .cc-canvas-wrap {
+      height: 160px; background: #08080f; position: relative;
+    }
+    .compare-card canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
+    .cc-remove {
+      position: absolute; top: 8px; right: 8px; width: 24px; height: 24px;
+      border-radius: 6px; background: rgba(239,68,68,.2); border: 1px solid rgba(239,68,68,.3);
+      color: #f87171; font-size: 12px; cursor: pointer; display: flex; align-items: center;
+      justify-content: center; transition: all .15s; z-index: 5;
+    }
+    .cc-remove:hover { background: rgba(239,68,68,.4); }
+    .cc-body { padding: 12px 14px 14px; }
+    .cc-formula {
+      font-family: 'Unbounded', sans-serif; font-size: 1rem; font-weight: 800;
+      background: linear-gradient(135deg,#a78bfa,#06D6E0);
+      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+      background-clip: text; margin-bottom: 2px;
+    }
+    .cc-name { font-size: 0.78rem; font-weight: 700; color: #ddd; margin-bottom: 10px; }
+    .cc-props { display: flex; flex-direction: column; gap: 5px; }
+    .cc-prop { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
+    .cc-prop-label { font-size: 0.66rem; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: .04em; }
+    .cc-prop-val { font-size: 0.78rem; font-weight: 700; color: #ccc; text-align: right; }
+    .cc-prop-val.highlight { color: #c084fc; }
+    .cc-cat {
+      display: inline-block; font-size: 0.62rem; font-weight: 700; padding: 2px 7px;
+      border-radius: 999px; margin-top: 6px;
+    }
+    .cc-cat.inorganic { background: rgba(59,130,246,.15); color: #60a5fa; border: 1px solid rgba(59,130,246,.2); }
+    .cc-cat.organic    { background: rgba(74,222,128,.12); color: #4ade80; border: 1px solid rgba(74,222,128,.2); }
+    .cc-cat.biomolecule{ background: rgba(251,191,36,.12);  color: #fbbf24; border: 1px solid rgba(251,191,36,.2); }
+    .cc-cat.amino_acid { background: rgba(244,114,182,.12); color: #f472b6; border: 1px solid rgba(244,114,182,.2); }
+
+    /* ── Comparison table (when 2+ molecules) ── */
+    .compare-table-wrap { overflow-x: auto; }
+    .compare-table {
+      width: 100%; border-collapse: collapse; font-size: 0.78rem;
+    }
+    .compare-table th, .compare-table td {
+      padding: 9px 14px; text-align: left;
+      border-bottom: 1px solid rgba(255,255,255,.05);
+    }
+    .compare-table th {
+      background: rgba(155,93,229,.1); color: #c084fc;
+      font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: .05em;
+      white-space: nowrap;
+    }
+    .compare-table th.mol-col { color: #06D6E0; background: rgba(6,214,224,.06); }
+    .compare-table td.row-label { color: #666; font-weight: 700; font-size: 0.69rem; white-space: nowrap; }
+    .compare-table td.mol-val { color: #ddd; font-weight: 600; }
+    .compare-table tr:hover td { background: rgba(255,255,255,.02); }
+
+    /* ── Add placeholder card ── */
+    .add-card {
+      border: 1.5px dashed rgba(155,93,229,.2); border-radius: 16px;
+      display: flex; align-items: center; justify-content: center; flex-direction: column;
+      gap: 8px; color: #444; cursor: pointer; transition: all .2s;
+      min-height: 240px; font-size: 0.78rem; padding: 20px;
+    }
+    .add-card:hover { border-color: rgba(155,93,229,.5); color: #9B5DE5; background: rgba(155,93,229,.05); }
+    .add-card-icon { font-size: 2rem; }
+
+    /* ── Mobile ── */
+    @media (max-width: 768px) {
+      html, body { overflow: auto; }
+      .app-layout { height: auto; overflow: visible; }
+      .sb-content { overflow: auto; }
+      .props-layout { flex-direction: column; overflow: visible; }
+      .props-sidebar { width: 100%; height: auto; max-height: 45vh; border-right: none; border-bottom: 1px solid rgba(155,93,229,.12); flex-shrink: 0; }
+      .ps-list { max-height: 30vh; }
+      .props-main { overflow-y: auto; }
+      .compare-table { font-size: 0.72rem; }
+      .compare-table th, .compare-table td { padding: 6px 10px; }
+    }
+    @media (max-width: 480px) {
+      .props-sidebar { max-height: 40vh; }
+      .mol-card-grid { grid-template-columns: 1fr !important; }
+    }
+  </style>
+</head>
+<body>
+<div class="app-layout" id="app">
+  <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="/biochem-library"       class="sb-link sb-sub-link"><i data-lucide="library"          class="sb-icon"></i><span class="sb-lbl">↳ Библиотека</span></a>
+      <a href="/biochem-reactions"     class="sb-link sb-sub-link"><i data-lucide="arrow-right-left" class="sb-icon"></i><span class="sb-lbl">↳ Реакции</span></a>
+      <a href="/biochem-properties" class="sb-link sb-sub-link active"><i data-lucide="table-properties" class="sb-icon"></i><span class="sb-lbl">↳ Свойства</span></a>
+      <a href="/biochem-pathways"   class="sb-link sb-sub-link"><i data-lucide="route"             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>
+      <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>
+    </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>
+          <span class="sb-logout" style="pointer-events:none">Мой профиль</span>
+        </div>
+      </a>
+    </div>
+  </aside>
+  <div class="notif-drop" id="notif-drop"></div>
+
+  <div class="sb-content" style="overflow:hidden;display:flex;flex-direction:column">
+    <div class="props-layout">
+      <!-- Left: molecule list -->
+      <div class="props-sidebar">
+        <div class="ps-head">
+          <div class="ps-title">Молекулы</div>
+          <input type="text" class="ps-search" placeholder="Поиск…" oninput="filterMols(this.value)" id="mol-search" />
+          <div class="ps-cats">
+            <button class="ps-cat active" data-cat="" onclick="setCat(this,'')">Все</button>
+            <button class="ps-cat" data-cat="inorganic"  onclick="setCat(this,'inorganic')">Неорг.</button>
+            <button class="ps-cat" data-cat="organic"    onclick="setCat(this,'organic')">Орган.</button>
+            <button class="ps-cat" data-cat="biomolecule" onclick="setCat(this,'biomolecule')">Биомол.</button>
+            <button class="ps-cat" data-cat="amino_acid" onclick="setCat(this,'amino_acid')">АК</button>
+          </div>
+        </div>
+        <div class="ps-list" id="mol-list"><div style="padding:20px;color:#555;font-size:.8rem">Загрузка…</div></div>
+      </div>
+
+      <!-- Right: comparison -->
+      <div class="props-main" id="props-main">
+        <div class="props-hero">
+          <div>
+            <div class="props-hero-title">Сравнение молекул</div>
+            <div class="props-hero-sub">Добавь до 4 молекул из списка слева</div>
+          </div>
+        </div>
+
+        <div id="compare-area">
+          <div class="compare-hint" id="compare-empty">
+            <div class="compare-hint-icon"><svg class="ic" viewBox="0 0 24 24"><path d="M9 3h6m-4.5 0v5.5l-4 7.5a1 1 0 0 0 .9 1.5h8.2a1 1 0 0 0 .9-1.5l-4-7.5V3"/></svg></div>
+            <div class="compare-hint-text">Выбери молекулы из списка, чтобы сравнить их свойства</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script src="/js/api.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+<script>
+'use strict';
+const { user, isTeacher, isAdmin } = LS.initPage();
+if (!user) location.href = '/login';
+
+const nav = document.getElementById('nav-user');
+const ava = document.getElementById('nav-avatar');
+if (nav) nav.textContent = user?.name?.split(' ')[0] || 'Пользователь';
+if (ava) ava.textContent = (user?.name||'LS').split(' ').slice(0,2).map(w=>w[0]?.toUpperCase()||'').join('')||'LS';
+if (isAdmin) document.getElementById('btn-admin').style.display = '';
+if (isTeacher) document.getElementById('btn-classes').style.display = '';
+LS.showBoardIfAllowed();
+
+// ── Atomic masses (g/mol) ──
+const ATOMIC_MASS = {
+  H:1.008, C:12.011, N:14.007, O:15.999, P:30.974, S:32.06,
+  Cl:35.45, Na:22.990, Ca:40.078, K:39.098, Mg:24.305, Fe:55.845,
+  Br:79.904, I:126.904, F:18.998, Al:26.982, Cu:63.546, Zn:65.38,
+  Ag:107.868, Ba:137.327, Mn:54.938,
+};
+
+// ── CPK colors (for canvas thumbnails) ──
+const CPK = {
+  H:'#D4D4D4', C:'#555555', N:'#4060FF', O:'#EE2020', P:'#FF8000',
+  S:'#C8B400', Cl:'#00A860', Na:'#8040C0', Ca:'#707070', K:'#8040C0',
+  Mg:'#1E8A1E', Fe:'#B03010', Br:'#8B2222', F:'#90E050', Al:'#BFA6A6',
+};
+
+function cpkColor(sym) { return CPK[sym] || '#888'; }
+
+function molarMass(formula) {
+  let mass = 0;
+  const re = /([A-Z][a-z]*)(\d*)/g;
+  let m;
+  while ((m = re.exec(formula)) !== null) {
+    const el = m[1], n = parseInt(m[2])||1;
+    mass += (ATOMIC_MASS[el]||0) * n;
+  }
+  return mass;
+}
+
+function catLabel(cat) {
+  return {inorganic:'Неорганика', organic:'Органика', biomolecule:'Биомолекула', amino_acid:'Аминокислота'}[cat] || cat || '—';
+}
+
+// ── Known physical properties ──
+const PHYS_PROPS = {
+  'H2O':   { state:'жидкость', solubility:'растворитель', bp:'100°C', mp:'0°C' },
+  'CO2':   { state:'газ',      solubility:'растворим',    bp:'-78.5°C(субл.)', mp:'—' },
+  'O2':    { state:'газ',      solubility:'мало растворим', bp:'-183°C', mp:'-218.4°C' },
+  'H2':    { state:'газ',      solubility:'мало растворим', bp:'-252.9°C', mp:'-259.2°C' },
+  'N2':    { state:'газ',      solubility:'мало растворим', bp:'-195.8°C', mp:'-210°C' },
+  'NH3':   { state:'газ',      solubility:'хорошо растворим', bp:'-33.4°C', mp:'-77.7°C' },
+  'HCl':   { state:'газ',      solubility:'хорошо растворим', bp:'-85.1°C', mp:'-114.2°C' },
+  'H2SO4': { state:'жидкость', solubility:'растворитель', bp:'337°C', mp:'10°C' },
+  'HNO3':  { state:'жидкость', solubility:'смешивается',  bp:'83°C', mp:'-42°C' },
+  'NaOH':  { state:'твёрдое',  solubility:'хорошо растворим', bp:'1388°C', mp:'318°C' },
+  'NaCl':  { state:'твёрдое',  solubility:'растворим',    bp:'1413°C', mp:'801°C' },
+  'CH4':   { state:'газ',      solubility:'мало растворим', bp:'-161.5°C', mp:'-182.5°C' },
+  'C2H5OH':{ state:'жидкость', solubility:'смешивается',  bp:'78.4°C', mp:'-114.1°C' },
+  'C6H6':  { state:'жидкость', solubility:'не растворим', bp:'80.1°C', mp:'5.5°C' },
+  'C6H12O6':{ state:'твёрдое', solubility:'растворим',    bp:'разлагается', mp:'146°C' },
+};
+
+function getPhysProps(formula) {
+  return PHYS_PROPS[formula] || { state:'—', solubility:'—', bp:'—', mp:'—' };
+}
+
+// ── State ──
+let _allMols = [];
+let _filtered = [];
+let _catFilter = '';
+let _searchQ = '';
+let _compare = []; // array of mol objects, max 4
+
+async function init() {
+  try {
+    _allMols = await LS.biochemGetMolecules();
+    applyFilter();
+  } catch(e) {
+    document.getElementById('mol-list').innerHTML = '<div style="padding:20px;color:#666;font-size:.8rem">Ошибка загрузки</div>';
+  }
+}
+
+function applyFilter() {
+  _filtered = _allMols.filter(m => {
+    const q = _searchQ.toLowerCase();
+    const matchQ = !q || m.name_ru.toLowerCase().includes(q) || m.formula.toLowerCase().includes(q);
+    const matchCat = !_catFilter || m.category === _catFilter;
+    return matchQ && matchCat;
+  });
+  renderMolList();
+}
+
+function filterMols(q) { _searchQ = q; applyFilter(); }
+function setCat(btn, cat) {
+  _catFilter = cat;
+  document.querySelectorAll('.ps-cat').forEach(b => b.classList.toggle('active', b.dataset.cat===cat));
+  applyFilter();
+}
+
+function renderMolList() {
+  const list = document.getElementById('mol-list');
+  if (!_filtered.length) {
+    list.innerHTML = '<div style="padding:20px 8px;color:#555;font-size:.78rem">Ничего не найдено</div>';
+    return;
+  }
+  list.innerHTML = _filtered.map(m => {
+    const inCompare = _compare.some(c => c.id === m.id);
+    return `<div class="mol-row ${inCompare?'in-compare':''}" onclick="toggleCompare(${m.id})">
+      <canvas class="mol-thumb" id="thumb-${m.id}" width="34" height="34"></canvas>
+      <div class="mol-info">
+        <div class="mol-name">${m.name_ru}</div>
+        <div class="mol-formula">${m.formula}</div>
+      </div>
+      ${inCompare ? '<span style="color:#c084fc;font-size:11px"><svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>' : ''}
+    </div>`;
+  }).join('');
+  // draw thumbnails
+  setTimeout(() => { _filtered.forEach(m => drawThumb(m)); }, 0);
+}
+
+function drawThumb(mol) {
+  const canvas = document.getElementById('thumb-'+mol.id);
+  if (!canvas) return;
+  const ctx = canvas.getContext('2d');
+  const W = 34, H = 34;
+  ctx.clearRect(0,0,W,H);
+  ctx.fillStyle = '#08080f';
+  ctx.fillRect(0,0,W,H);
+  const atoms = mol.atoms_json || [];
+  const bonds = mol.bonds_json || [];
+  if (!atoms.length) return;
+  let minX=Infinity,minY=Infinity,maxX=-Infinity,maxY=-Infinity;
+  for (const a of atoms) { minX=Math.min(minX,a.x??a.id); minY=Math.min(minY,a.y??0); maxX=Math.max(maxX,a.x??a.id); maxY=Math.max(maxY,a.y??0); }
+  const pad=6, molW=Math.max(maxX-minX,1), molH=Math.max(maxY-minY,1);
+  const sc=Math.min((W-pad*2)/molW,(H-pad*2)/molH);
+  const ox=pad+(W-pad*2-molW*sc)/2, oy=pad+(H-pad*2-molH*sc)/2;
+  const sx=a=>ox+(a.x-minX)*sc, sy=a=>oy+(a.y-minY)*sc;
+  // bonds
+  ctx.strokeStyle='rgba(180,180,200,.5)'; ctx.lineWidth=1;
+  for (const b of bonds) {
+    const a1=atoms.find(a=>a.id===b.from||(b.f&&a.id===b.f)), a2=atoms.find(a=>a.id===b.to||(b.t&&a.id===b.t));
+    if (!a1||!a2) continue;
+    ctx.beginPath(); ctx.moveTo(sx(a1),sy(a1)); ctx.lineTo(sx(a2),sy(a2)); ctx.stroke();
+  }
+  // atoms
+  for (const a of atoms) {
+    const r = Math.max(2, 4*sc);
+    const col = cpkColor(a.s);
+    ctx.beginPath(); ctx.arc(sx(a),sy(a),r,0,Math.PI*2);
+    const [r0,g0,b0] = hexRgb(col);
+    const grd = ctx.createRadialGradient(sx(a)-r*.3,sy(a)-r*.35,r*.05,sx(a),sy(a),r);
+    grd.addColorStop(0,`rgb(${Math.min(255,r0+80)},${Math.min(255,g0+80)},${Math.min(255,b0+80)})`);
+    grd.addColorStop(1,`rgb(${Math.round(r0*.3)},${Math.round(g0*.3)},${Math.round(b0*.3)})`);
+    ctx.fillStyle=grd; ctx.fill();
+  }
+}
+
+function hexRgb(hex) {
+  hex=hex.replace('#','');
+  if(hex.length===3)hex=hex.split('').map(c=>c+c).join('');
+  const n=parseInt(hex,16);
+  return[(n>>16)&255,(n>>8)&255,n&255];
+}
+
+function toggleCompare(id) {
+  const mol = _allMols.find(m => m.id===id);
+  if (!mol) return;
+  const idx = _compare.findIndex(c => c.id===id);
+  if (idx >= 0) {
+    _compare.splice(idx, 1);
+  } else {
+    if (_compare.length >= 4) { LS.toast('Максимум 4 молекулы', 'info'); return; }
+    _compare.push(mol);
+  }
+  renderMolList();
+  renderCompare();
+}
+
+function removeFromCompare(id) {
+  _compare = _compare.filter(c => c.id !== id);
+  renderMolList();
+  renderCompare();
+}
+
+function renderCompare() {
+  const area = document.getElementById('compare-area');
+  if (!_compare.length) {
+    area.innerHTML = `<div class="compare-hint" id="compare-empty">
+      <div class="compare-hint-icon"><svg class="ic" viewBox="0 0 24 24"><path d="M9 3h6m-4.5 0v5.5l-4 7.5a1 1 0 0 0 .9 1.5h8.2a1 1 0 0 0 .9-1.5l-4-7.5V3"/></svg></div>
+      <div class="compare-hint-text">Выбери молекулы из списка, чтобы сравнить их свойства</div>
+    </div>`;
+    return;
+  }
+
+  let html = '<div class="compare-grid">';
+  for (const mol of _compare) {
+    const mm = molarMass(mol.formula);
+    const phys = getPhysProps(mol.formula);
+    html += `
+    <div class="compare-card">
+      <div class="cc-canvas-wrap">
+        <canvas id="ccc-${mol.id}" width="200" height="160"></canvas>
+        <button class="cc-remove" onclick="removeFromCompare(${mol.id})" title="Убрать"><svg class="ic" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+      </div>
+      <div class="cc-body">
+        <div class="cc-formula">${mol.formula}</div>
+        <div class="cc-name">${mol.name_ru}</div>
+        <div class="cc-props">
+          <div class="cc-prop">
+            <span class="cc-prop-label">М. масса</span>
+            <span class="cc-prop-val highlight">${mm > 0 ? mm.toFixed(2) + ' г/моль' : '—'}</span>
+          </div>
+          <div class="cc-prop">
+            <span class="cc-prop-label">Состояние</span>
+            <span class="cc-prop-val">${phys.state}</span>
+          </div>
+          <div class="cc-prop">
+            <span class="cc-prop-label">Растворимость</span>
+            <span class="cc-prop-val">${phys.solubility}</span>
+          </div>
+          <div class="cc-prop">
+            <span class="cc-prop-label">Ткип</span>
+            <span class="cc-prop-val">${phys.bp}</span>
+          </div>
+          <div class="cc-prop">
+            <span class="cc-prop-label">Тпл</span>
+            <span class="cc-prop-val">${phys.mp}</span>
+          </div>
+          <div class="cc-prop">
+            <span class="cc-prop-label">Сложность</span>
+            <span class="cc-prop-val">${['','<svg class="ic" viewBox="0 0 24 24"><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>','<svg class="ic" viewBox="0 0 24 24"><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><svg class="ic" viewBox="0 0 24 24"><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>','<svg class="ic" viewBox="0 0 24 24"><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><svg class="ic" viewBox="0 0 24 24"><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><svg class="ic" viewBox="0 0 24 24"><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>'][mol.difficulty]||'—'}</span>
+          </div>
+        </div>
+        <span class="cc-cat ${mol.category||''}">${catLabel(mol.category)}</span>
+      </div>
+    </div>`;
+  }
+  // Add placeholder if < 4
+  if (_compare.length < 4) {
+    html += `<div class="add-card" onclick="document.getElementById('mol-search').focus()">
+      <div class="add-card-icon">+</div>
+      <div>Добавить молекулу</div>
+    </div>`;
+  }
+  html += '</div>';
+
+  // Comparison table (when 2+)
+  if (_compare.length >= 2) {
+    html += `<div class="compare-table-wrap"><table class="compare-table">
+      <thead><tr>
+        <th>Свойство</th>
+        ${_compare.map(m=>`<th class="mol-col">${m.formula}</th>`).join('')}
+      </tr></thead>
+      <tbody>
+        <tr><td class="row-label">Название</td>${_compare.map(m=>`<td class="mol-val">${m.name_ru}</td>`).join('')}</tr>
+        <tr><td class="row-label">Молярная масса</td>${_compare.map(m=>{const mm=molarMass(m.formula);return`<td class="mol-val">${mm>0?mm.toFixed(2)+' г/моль':'—'}</td>`}).join('')}</tr>
+        <tr><td class="row-label">Агр. состояние</td>${_compare.map(m=>`<td class="mol-val">${getPhysProps(m.formula).state}</td>`).join('')}</tr>
+        <tr><td class="row-label">Растворимость</td>${_compare.map(m=>`<td class="mol-val">${getPhysProps(m.formula).solubility}</td>`).join('')}</tr>
+        <tr><td class="row-label">Температура кипения</td>${_compare.map(m=>`<td class="mol-val">${getPhysProps(m.formula).bp}</td>`).join('')}</tr>
+        <tr><td class="row-label">Температура плавления</td>${_compare.map(m=>`<td class="mol-val">${getPhysProps(m.formula).mp}</td>`).join('')}</tr>
+        <tr><td class="row-label">Категория</td>${_compare.map(m=>`<td class="mol-val">${catLabel(m.category)}</td>`).join('')}</tr>
+        <tr><td class="row-label">Сложность</td>${_compare.map(m=>`<td class="mol-val">${['','<svg class="ic" viewBox="0 0 24 24"><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>','<svg class="ic" viewBox="0 0 24 24"><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><svg class="ic" viewBox="0 0 24 24"><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>','<svg class="ic" viewBox="0 0 24 24"><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><svg class="ic" viewBox="0 0 24 24"><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><svg class="ic" viewBox="0 0 24 24"><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>'][m.difficulty]||'—'}</td>`).join('')}</tr>
+        <tr><td class="row-label">Описание</td>${_compare.map(m=>`<td class="mol-val" style="font-size:.7rem;color:#888">${m.description||'—'}</td>`).join('')}</tr>
+      </tbody>
+    </table></div>`;
+  }
+
+  area.innerHTML = html;
+  // Draw compare canvases
+  setTimeout(() => {
+    for (const mol of _compare) drawCompareCanvas(mol);
+  }, 0);
+}
+
+function drawCompareCanvas(mol) {
+  const canvas = document.getElementById('ccc-'+mol.id);
+  if (!canvas) return;
+  const W = canvas.offsetWidth || 200, H = canvas.offsetHeight || 160;
+  canvas.width = W; canvas.height = H;
+  const ctx = canvas.getContext('2d');
+  ctx.fillStyle = '#08080f';
+  ctx.fillRect(0,0,W,H);
+  const atoms = mol.atoms_json || [];
+  const bonds = mol.bonds_json || [];
+  if (!atoms.length) {
+    ctx.fillStyle = '#444';
+    ctx.font = '0.8rem Manrope,sans-serif';
+    ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+    ctx.fillText('Нет структуры', W/2, H/2);
+    return;
+  }
+  let minX=Infinity,minY=Infinity,maxX=-Infinity,maxY=-Infinity;
+  for (const a of atoms) { minX=Math.min(minX,a.x); minY=Math.min(minY,a.y); maxX=Math.max(maxX,a.x); maxY=Math.max(maxY,a.y); }
+  const pad=20, molW=Math.max(maxX-minX,1), molH=Math.max(maxY-minY,1);
+  const sc=Math.min((W-pad*2)/molW,(H-pad*2)/molH, 2.5);
+  const ox=W/2-(minX+maxX)*sc/2, oy=H/2-(minY+maxY)*sc/2;
+  const sx=a=>ox+a.x*sc, sy=a=>oy+a.y*sc;
+  // bonds
+  for (const b of bonds) {
+    const a1=atoms.find(a=>a.id===(b.from??b.f)), a2=atoms.find(a=>a.id===(b.to??b.t));
+    if (!a1||!a2) continue;
+    ctx.strokeStyle='rgba(180,180,200,.55)'; ctx.lineWidth=Math.max(1.5,2*sc);
+    ctx.lineCap='round';
+    ctx.beginPath(); ctx.moveTo(sx(a1),sy(a1)); ctx.lineTo(sx(a2),sy(a2)); ctx.stroke();
+  }
+  // atoms
+  for (const a of atoms) {
+    const r = Math.max(6, 9*sc);
+    const col = cpkColor(a.s);
+    const [r0,g0,b0] = hexRgb(col);
+    const grd = ctx.createRadialGradient(sx(a)-r*.32,sy(a)-r*.38,r*.05,sx(a),sy(a),r);
+    grd.addColorStop(0,`rgb(${Math.min(255,r0+100)},${Math.min(255,g0+100)},${Math.min(255,b0+100)})`);
+    grd.addColorStop(.4, col);
+    grd.addColorStop(1,`rgb(${Math.round(r0*.2)},${Math.round(g0*.2)},${Math.round(b0*.2)})`);
+    ctx.beginPath(); ctx.arc(sx(a),sy(a),r,0,Math.PI*2);
+    ctx.fillStyle=grd; ctx.fill();
+    if (atoms.length <= 15) {
+      ctx.fillStyle = a.s==='C'||a.s==='N'||a.s==='Fe'||a.s==='Mg' ? '#fff' : '#111';
+      ctx.font=`bold ${Math.max(8,Math.round(r*.7))}px Manrope,sans-serif`;
+      ctx.textAlign='center'; ctx.textBaseline='middle';
+      ctx.fillText(a.s,sx(a),sy(a));
+    }
+  }
+}
+
+init();
+if (window.lucide) lucide.createIcons();
+LS.notif?.init();
+LS.hideDisabledFeatures?.();
+</script>
+<script src="/js/notifications.js"></script>
+<script src="/js/mobile.js"></script>
+</body>
+</html>
diff --git a/frontend/biochem-reactions.html b/frontend/biochem-reactions.html
new file mode 100644
index 0000000..098dccb
--- /dev/null
+++ b/frontend/biochem-reactions.html
@@ -0,0 +1,843 @@
+<!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" />
+  <style>
+    html, body { height: 100%; overflow: hidden; }
+    .app-layout { height: 100vh; overflow: hidden; }
+    .sb-content { padding: 0 !important; overflow: hidden; display: flex; flex-direction: column; background: #07070f; }
+    .sb-sub-link { padding-left: 28px !important; font-size: 0.76rem !important; opacity: .75; }
+    .sb-sub-link:hover { opacity: 1; }
+
+    /* ── Page header ── */
+    .page-header {
+      padding: 22px 28px 18px;
+      background: linear-gradient(135deg, rgba(249,115,22,.1) 0%, rgba(155,93,229,.08) 100%);
+      border-bottom: 1px solid rgba(249,115,22,.15);
+      flex-shrink: 0;
+      display: flex; align-items: center; gap: 16px;
+    }
+    .page-header-icon {
+      width: 46px; height: 46px; border-radius: 14px;
+      background: rgba(249,115,22,.12); border: 1.5px solid rgba(249,115,22,.2);
+      display: flex; align-items: center; justify-content: center;
+      font-size: 1.4rem; flex-shrink: 0;
+    }
+    .page-title {
+      font-family: 'Unbounded', sans-serif; font-size: 1.05rem; font-weight: 800;
+      margin-bottom: 3px;
+      background: linear-gradient(135deg,#fb923c,#a78bfa); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
+    }
+    .page-subtitle { font-size: 0.8rem; color: #666; }
+
+    /* ── Filters ── */
+    .filters-row {
+      display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
+      padding: 12px 20px;
+      background: rgba(7,7,20,0.9);
+      border-bottom: 1px solid rgba(255,255,255,.06);
+      flex-shrink: 0;
+    }
+    .filter-input {
+      flex: 1; min-width: 200px; max-width: 280px;
+      padding: 8px 14px; border-radius: 10px;
+      background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.09);
+      color: #ddd; font-family: 'Manrope', sans-serif; font-size: 0.83rem;
+      outline: none; transition: border-color .18s;
+    }
+    .filter-input:focus { border-color: rgba(155,93,229,.5); background: rgba(155,93,229,.05); }
+    .filter-input::placeholder { color: #444; }
+    .type-chip {
+      padding: 5px 13px; border-radius: 999px;
+      border: 1.5px solid rgba(255,255,255,.08);
+      background: rgba(255,255,255,.03); color: #666;
+      font-family: 'Manrope', sans-serif; font-size: 0.76rem; font-weight: 700;
+      cursor: pointer; transition: all .16s; white-space: nowrap;
+    }
+    .type-chip:hover { border-color: rgba(155,93,229,.35); color: #ccc; background: rgba(155,93,229,.06); }
+    .type-chip.active { background: rgba(155,93,229,.18); border-color: rgba(155,93,229,.6); color: #c084fc; }
+    .filter-count { font-size: 0.76rem; color: #444; margin-left: auto; white-space: nowrap; font-weight: 600; }
+
+    /* ── Scroll area ── */
+    .rxn-scroll { flex: 1; overflow-y: auto; padding: 18px 20px 40px; }
+    .rxn-scroll::-webkit-scrollbar { width: 5px; }
+    .rxn-scroll::-webkit-scrollbar-thumb { background: rgba(155,93,229,.3); border-radius: 4px; }
+
+    /* ── Reaction card ── */
+    .rxn-card {
+      border-radius: 16px;
+      border: 1.5px solid rgba(255,255,255,.07);
+      background: rgba(255,255,255,.025);
+      margin-bottom: 12px;
+      transition: border-color .2s, box-shadow .2s, background .2s;
+      overflow: hidden;
+      animation: cardIn .4s ease both;
+      animation-delay: calc(var(--i,0) * 35ms);
+    }
+    @keyframes cardIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
+    .rxn-card:hover {
+      border-color: rgba(155,93,229,.28);
+      background: rgba(155,93,229,.03);
+      box-shadow: 0 4px 20px rgba(0,0,0,.25);
+    }
+    .rxn-card.expanded {
+      border-color: rgba(155,93,229,.35);
+      background: rgba(155,93,229,.05);
+    }
+
+    /* Left-side type stripe */
+    .rxn-card-inner { display: flex; }
+    .rxn-stripe {
+      width: 4px; flex-shrink: 0;
+      border-radius: 16px 0 0 16px;
+    }
+    .rxn-stripe.synthesis     { background: linear-gradient(180deg,#60a5fa,#3b82f6); }
+    .rxn-stripe.decomposition { background: linear-gradient(180deg,#fbbf24,#f59e0b); }
+    .rxn-stripe.exchange      { background: linear-gradient(180deg,#34d399,#10b981); }
+    .rxn-stripe.redox         { background: linear-gradient(180deg,#f97316,#ea580c); }
+    .rxn-stripe.acid_base     { background: linear-gradient(180deg,#a78bfa,#7c3aed); }
+    .rxn-stripe.combustion    { background: linear-gradient(180deg,#ef4444,#dc2626); }
+    .rxn-stripe.hydrolysis    { background: linear-gradient(180deg,#06D6E0,#0891b2); }
+    .rxn-stripe.other         { background: rgba(148,163,184,.4); }
+    .rxn-stripe.neutral       { background: rgba(255,255,255,.08); }
+
+    .rxn-body { flex: 1; padding: 16px 18px 14px; min-width: 0; }
+
+    /* Card header */
+    .rxn-header { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
+    .rxn-icon {
+      width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 1.2rem;
+    }
+    .rxn-header-text { flex: 1; min-width: 0; }
+    .rxn-name {
+      font-family: 'Manrope', sans-serif; font-size: 0.94rem; font-weight: 700;
+      color: #e8e8f8; margin-bottom: 5px; line-height: 1.3;
+    }
+    .rxn-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
+
+    .rxn-type-badge {
+      font-size: 0.66rem; font-weight: 700; padding: 2px 9px; border-radius: 999px;
+      letter-spacing: .04em; text-transform: uppercase;
+    }
+    .rxn-type-badge.synthesis     { background: rgba(96,165,250,.15);  color:#93c5fd; }
+    .rxn-type-badge.decomposition { background: rgba(251,191,36,.15);  color:#fde68a; }
+    .rxn-type-badge.exchange      { background: rgba(52,211,153,.15);  color:#6ee7b7; }
+    .rxn-type-badge.redox         { background: rgba(249,115,22,.15);  color:#fdba74; }
+    .rxn-type-badge.acid_base     { background: rgba(167,139,250,.15); color:#c4b5fd; }
+    .rxn-type-badge.combustion    { background: rgba(239,68,68,.15);   color:#fca5a5; }
+    .rxn-type-badge.hydrolysis    { background: rgba(6,214,224,.15);   color:#67e8f9; }
+    .rxn-type-badge.other         { background: rgba(148,163,184,.12); color:#94a3b8; }
+
+    .energy-badge {
+      font-size: 0.66rem; font-weight: 700; padding: 2px 9px; border-radius: 999px;
+      letter-spacing: .02em;
+    }
+    .energy-badge.exo  { background: rgba(239,68,68,.12);  color:#fca5a5; border:1px solid rgba(239,68,68,.2); }
+    .energy-badge.endo { background: rgba(96,165,250,.12); color:#93c5fd; border:1px solid rgba(96,165,250,.2); }
+
+    .rxn-expand-btn {
+      background: none; border: none; color: #555; cursor: pointer;
+      width: 28px; height: 28px; border-radius: 8px;
+      display: flex; align-items: center; justify-content: center;
+      transition: color .15s, background .15s; flex-shrink: 0;
+      font-size: 16px; align-self: center;
+    }
+    .rxn-expand-btn:hover { color: #aaa; background: rgba(255,255,255,.07); }
+    .rxn-card.expanded .rxn-expand-btn { color: #a78bfa; }
+
+    /* ── Equation ── */
+    .rxn-equation {
+      margin: 12px 0 0;
+      padding: 11px 16px;
+      background: rgba(0,0,0,.35);
+      border-radius: 11px;
+      border: 1px solid rgba(255,255,255,.06);
+      font-family: 'Unbounded', monospace; font-size: 0.82rem;
+      color: #ccc; text-align: center;
+      overflow-x: auto; white-space: nowrap;
+      line-height: 1.6;
+    }
+    .rxn-equation .eq-mol {
+      color: #06D6E0; cursor: pointer; transition: color .15s;
+      display: inline-block;
+    }
+    .rxn-equation .eq-mol:hover { color: #fff; text-decoration: underline; }
+    .rxn-equation .eq-arrow {
+      color: #9B5DE5; margin: 0 10px; font-size: 1rem;
+    }
+    .rxn-equation .eq-plus  { color: #555; margin: 0 6px; }
+    .rxn-equation.empty { color: #444; font-family: 'Manrope',sans-serif; font-size: 0.78rem; font-style: italic; }
+
+    /* ── Expanded details ── */
+    .rxn-details { display: none; margin-top: 14px; }
+    .rxn-card.expanded .rxn-details { display: block; }
+
+    .rxn-description {
+      font-size: 0.81rem; color: #999; line-height: 1.65;
+      margin-bottom: 14px; padding: 12px 14px;
+      background: rgba(255,255,255,.03); border-radius: 10px;
+      border: 1px solid rgba(255,255,255,.05);
+    }
+
+    .rxn-details-grid {
+      display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
+      margin-bottom: 14px;
+    }
+    .rxn-detail-item { background: rgba(255,255,255,.03); border-radius: 10px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.05); }
+    .rxn-detail-label { font-size: 0.63rem; color: #555; font-weight: 700; letter-spacing:.07em; text-transform:uppercase; margin-bottom:4px; }
+    .rxn-detail-value { font-size: 0.82rem; color: #ccc; font-weight: 600; }
+
+    /* Molecule row */
+    .rxn-mols-section { }
+    .rxn-mols-label { font-size: 0.65rem; color: #555; font-weight: 700; letter-spacing:.07em; text-transform:uppercase; margin-bottom: 10px; }
+    .rxn-mols-row {
+      display: flex; gap: 8px; align-items: flex-end;
+      flex-wrap: wrap;
+    }
+    .rxn-mol-thumb { display: flex; flex-direction: column; align-items: center; gap: 5px; }
+    .rxn-mol-canvas-wrap {
+      width: 88px; height: 78px; border-radius: 12px; overflow: hidden;
+      background: radial-gradient(ellipse at 40% 35%, rgba(155,93,229,.06) 0%, rgba(5,5,15,.95) 70%);
+      border: 1.5px solid rgba(255,255,255,.08);
+      position: relative; cursor: pointer;
+      transition: border-color .16s, transform .16s;
+    }
+    .rxn-mol-canvas-wrap:hover { border-color: rgba(6,214,224,.4); transform: translateY(-2px); }
+    .rxn-mol-canvas-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
+    .rxn-mol-formula { font-family: 'Unbounded', monospace; font-size: 0.67rem; color: #06D6E0; text-align: center; font-weight: 700; }
+    .rxn-mol-name { font-size: 0.62rem; color: #666; text-align: center; max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .rxn-mol-open {
+      font-size: 0.64rem; color: #7c3aed; text-decoration: none;
+      padding: 1px 6px; border-radius: 4px;
+      transition: color .15s; font-weight: 600;
+    }
+    .rxn-mol-open:hover { color: #c084fc; }
+    .rxn-mol-arrow {
+      font-size: 1.4rem; color: rgba(155,93,229,.7); flex-shrink: 0;
+      align-self: center; padding-bottom: 22px; line-height: 1;
+    }
+    .rxn-mols-empty { font-size: 0.78rem; color: #444; padding: 10px 0; font-style: italic; }
+
+    /* Empty state */
+    .rxn-empty {
+      display: flex; flex-direction: column; align-items: center;
+      padding: 80px 20px; gap: 14px; color: #444;
+    }
+    .rxn-empty svg { opacity: .14; }
+    .rxn-empty p { font-size: 0.86rem; font-weight: 600; }
+
+    /* ── Topic chips row ── */
+    .topics-row {
+      display: flex; gap: 5px; align-items: center; flex-wrap: wrap;
+      padding: 7px 20px 8px;
+      background: rgba(5,5,14,.85);
+      border-bottom: 1px solid rgba(255,255,255,.04);
+      flex-shrink: 0;
+    }
+    .topic-lbl { font-size: 0.63rem; color: #444; font-weight: 700; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
+    .topic-chip {
+      padding: 2px 9px; border-radius: 999px;
+      border: 1px solid rgba(255,255,255,.07);
+      background: rgba(255,255,255,.02); color: #555;
+      font-size: 0.67rem; font-weight: 700;
+      cursor: pointer; transition: all .15s; white-space:nowrap;
+    }
+    .topic-chip:hover { border-color: rgba(6,214,224,.3); color: #aaa; }
+    .topic-chip.active { background: rgba(6,214,224,.1); border-color: rgba(6,214,224,.4); color: #06D6E0; }
+
+    /* ── Mini quiz ── */
+    .mini-quiz {
+      margin-top: 14px; padding: 13px 14px;
+      background: rgba(155,93,229,.06); border-radius: 12px;
+      border: 1px solid rgba(155,93,229,.15);
+    }
+    .mq-head { font-size: 0.64rem; font-weight: 700; color: #7c3aed; letter-spacing:.06em; text-transform:uppercase; margin-bottom: 7px; }
+    .mq-q { font-size: 0.8rem; color: #ddd; font-weight: 600; margin-bottom: 9px; line-height: 1.4; }
+    .mq-opts { display: flex; flex-direction: column; gap: 4px; }
+    .mq-btn {
+      padding: 6px 11px; border-radius: 7px; border: 1.5px solid rgba(255,255,255,.1);
+      background: rgba(255,255,255,.03); color: #ccc; font-family: 'Manrope', sans-serif;
+      font-size: 0.76rem; cursor: pointer; transition: all .15s; text-align: left;
+    }
+    .mq-btn:hover:not(:disabled) { border-color: rgba(155,93,229,.4); background: rgba(155,93,229,.1); }
+    .mq-btn.correct { border-color: #4ade80 !important; background: rgba(74,222,128,.1) !important; color: #4ade80 !important; }
+    .mq-btn.wrong   { border-color: #ef4444 !important; background: rgba(239,68,68,.1) !important; color: #ef4444 !important; }
+    .mq-again { font-size: 0.68rem; color: #555; cursor: pointer; margin-top: 6px; display: inline-block; transition: color .15s; }
+    .mq-again:hover { color: #9B5DE5; }
+
+    @media (max-width: 768px) {
+      html, body { height: auto; overflow: auto; }
+      .app-layout { height: auto; overflow: visible; }
+      .sb-content { overflow: visible !important; height: auto !important; }
+      .rxn-scroll { padding: 12px 12px 40px; overflow: visible; }
+      .filters-row, .page-header, .topics-row { padding-left: 12px; padding-right: 12px; }
+      .filters-row { flex-wrap: wrap; }
+      .filter-input { min-width: 0; max-width: none; flex: 1 1 100%; }
+      .rxn-details-grid { grid-template-columns: 1fr; }
+      .page-header { padding: 14px 12px; gap: 10px; }
+      .page-header-icon { width: 36px; height: 36px; font-size: 1.1rem; border-radius: 10px; }
+      .page-title { font-size: 0.88rem; }
+      .type-chip { font-size: 0.72rem; padding: 4px 10px; }
+      .topics-row { gap: 6px; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
+      .topics-row::-webkit-scrollbar { display: none; }
+      .topic-chip { flex-shrink: 0; }
+      .rxn-card { padding: 14px; border-radius: 12px; }
+    }
+    @media (max-width: 480px) {
+      .page-header { padding: 10px; }
+      .rxn-card { padding: 10px; }
+    }
+  </style>
+</head>
+<body>
+<div class="app-layout" id="app">
+  <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="/biochem-library"   class="sb-link sb-sub-link"><i data-lucide="library" class="sb-icon"></i><span class="sb-lbl">↳ Библиотека</span></a>
+      <a href="/biochem-reactions" class="sb-link sb-sub-link active"><i data-lucide="arrow-right-left" class="sb-icon"></i><span class="sb-lbl">↳ Реакции</span></a>
+      <a href="/biochem-properties" class="sb-link sb-sub-link"><i data-lucide="table-properties" class="sb-icon"></i><span class="sb-lbl">↳ Свойства</span></a>
+      <a href="/biochem-pathways"   class="sb-link sb-sub-link"><i data-lucide="route"             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>
+      <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>
+    </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>
+          <span class="sb-logout" style="pointer-events:none">Мой профиль</span>
+        </div>
+      </a>
+    </div>
+  </aside>
+  <div class="notif-drop" id="notif-drop"></div>
+
+  <div class="sb-content">
+    <!-- Header -->
+    <div class="page-header">
+      <div class="page-header-icon"><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></div>
+      <div>
+        <div class="page-title">Химические реакции</div>
+        <div class="page-subtitle" id="subtitle">Загрузка…</div>
+      </div>
+    </div>
+
+    <!-- Filters -->
+    <div class="filters-row">
+      <input type="search" class="filter-input" id="search-q" placeholder="Поиск по названию или формуле..." oninput="applyFilters()" />
+      <button class="type-chip active" data-type="" onclick="setType('')">Все</button>
+      <button class="type-chip" data-type="synthesis"     onclick="setType('synthesis')">Синтез</button>
+      <button class="type-chip" data-type="decomposition" onclick="setType('decomposition')">Разложение</button>
+      <button class="type-chip" data-type="exchange"      onclick="setType('exchange')">Обмен</button>
+      <button class="type-chip" data-type="redox"         onclick="setType('redox')">ОВР</button>
+      <button class="type-chip" data-type="combustion"    onclick="setType('combustion')">Горение</button>
+      <span class="filter-count" id="filter-count"></span>
+    </div>
+    <!-- Topic filter row (populated by JS) -->
+    <div class="topics-row" id="topics-row" style="display:none">
+      <span class="topic-lbl">Тема:</span>
+      <span id="topics-chips"></span>
+    </div>
+
+    <!-- Content -->
+    <div class="rxn-scroll" id="rxn-scroll">
+      <div id="rxn-list">
+        <div class="rxn-empty">
+          <svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.3">
+            <path d="M9 3H5a2 2 0 00-2 2v4m6-6h10a2 2 0 012 2v4M9 3v18m0 0h10a2 2 0 002-2V9M9 21H5a2 2 0 01-2-2V9m0 0h18"/>
+          </svg>
+          <p>Загрузка реакций…</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script src="/js/api.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+<script>
+'use strict';
+const { user, isTeacher, isAdmin } = LS.initPage();
+if (!user) location.href = '/login';
+
+const nav = document.getElementById('nav-user');
+const ava = document.getElementById('nav-avatar');
+if (nav) nav.textContent = user?.name?.split(' ')[0] || 'Пользователь';
+if (ava) ava.textContent = (user?.name||'LS').split(' ').slice(0,2).map(w=>w[0]?.toUpperCase()||'').join('')||'LS';
+if (isAdmin)   document.getElementById('btn-admin').style.display = '';
+if (isTeacher) document.getElementById('btn-classes').style.display = '';
+LS.showBoardIfAllowed();
+
+// ── CPK colours ──
+const ELEM_COLORS = {
+  H:  { color:'#D4D4D4', text:'#222', r:9  },
+  C:  { color:'#555555', text:'#fff', r:10 },
+  N:  { color:'#4060FF', text:'#fff', r:10 },
+  O:  { color:'#EE2020', text:'#fff', r:10 },
+  P:  { color:'#FF8000', text:'#fff', r:11 },
+  S:  { color:'#C8B400', text:'#000', r:11 },
+  Cl: { color:'#00A860', text:'#fff', r:11 },
+  Na: { color:'#8040C0', text:'#fff', r:11 },
+  Ca: { color:'#707070', text:'#fff', r:11 },
+  Mg: { color:'#1E8A1E', text:'#fff', r:11 },
+  Fe: { color:'#B03010', text:'#fff', r:11 },
+  Br: { color:'#8B4513', text:'#fff', r:11 },
+  I:  { color:'#580DAB', text:'#fff', r:11 },
+  F:  { color:'#B0FFB0', text:'#222', r:9  },
+};
+
+function hexToRgb(hex) {
+  hex = hex.replace('#','');
+  if (hex.length===3) hex=hex.split('').map(c=>c+c).join('');
+  const n=parseInt(hex,16);
+  return [(n>>16)&255,(n>>8)&255,n&255];
+}
+
+function renderMolThumb(canvas, atoms, bonds) {
+  const W = canvas.width, H = canvas.height;
+  const ctx = canvas.getContext('2d');
+  ctx.clearRect(0, 0, W, H);
+  if (!atoms || !atoms.length) {
+    ctx.fillStyle = '#4b5563';
+    ctx.beginPath();
+    ctx.arc(W/2, H/2, Math.min(W,H)*0.18, 0, Math.PI*2);
+    ctx.fill();
+    ctx.fillStyle = '#9ca3af';
+    ctx.font = `bold ${Math.floor(Math.min(W,H)*0.22)}px sans-serif`;
+    ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+    ctx.fillText('?', W/2, H/2);
+    return;
+  }
+  let minX=Infinity, minY=Infinity, maxX=-Infinity, maxY=-Infinity;
+  for (const a of atoms) {
+    const x=a.x??0, y=a.y??0;
+    minX=Math.min(minX,x); minY=Math.min(minY,y);
+    maxX=Math.max(maxX,x); maxY=Math.max(maxY,y);
+  }
+  const pad=Math.min(W,H)*0.15;
+  const rangeX=maxX-minX||1, rangeY=maxY-minY||1;
+  const scale=Math.min((W-pad*2)/rangeX,(H-pad*2)/rangeY);
+  const offX=(W-rangeX*scale)/2-minX*scale;
+  const offY=(H-rangeY*scale)/2-minY*scale;
+  const sx=ax=>ax*scale+offX, sy=ay=>ay*scale+offY;
+
+  for (const b of bonds) {
+    const f=b.f??b.from, t=b.t??b.to, order=b.o??b.order??1;
+    const af=atoms.find(a=>a.id===f), at_=atoms.find(a=>a.id===t);
+    if (!af||!at_) continue;
+    const x1=sx(af.x??0), y1=sy(af.y??0), x2=sx(at_.x??0), y2=sy(at_.y??0);
+    ctx.strokeStyle='rgba(180,180,200,0.6)';
+    ctx.lineWidth=Math.max(1,scale*0.75); ctx.lineCap='round';
+    if (order===1) { ctx.beginPath(); ctx.moveTo(x1,y1); ctx.lineTo(x2,y2); ctx.stroke(); }
+    else {
+      const dx=x2-x1, dy=y2-y1, len=Math.hypot(dx,dy)||1;
+      const nx=-dy/len, ny=dx/len, gap=Math.max(1.5,scale*0.85);
+      const offsets=order===2?[-gap/2,gap/2]:[-gap,0,gap];
+      for (const o of offsets) { ctx.beginPath(); ctx.moveTo(x1+nx*o,y1+ny*o); ctx.lineTo(x2+nx*o,y2+ny*o); ctx.stroke(); }
+    }
+  }
+  const minR=Math.max(5,Math.min(W,H)*0.065);
+  for (const a of atoms) {
+    const x=sx(a.x??0), y=sy(a.y??0);
+    const el=ELEM_COLORS[a.s]||{color:'#888',text:'#fff',r:10};
+    const r=Math.max(minR*0.6,(el.r/20)*minR);
+    const [hr,hg,hb]=hexToRgb(el.color);
+    const grd=ctx.createRadialGradient(x-r*0.3,y-r*0.35,r*0.05,x,y,r);
+    grd.addColorStop(0,`rgb(${Math.min(255,hr+90)},${Math.min(255,hg+90)},${Math.min(255,hb+90)})`);
+    grd.addColorStop(0.5,el.color);
+    grd.addColorStop(1,`rgb(${Math.round(hr*.3)},${Math.round(hg*.3)},${Math.round(hb*.3)})`);
+    ctx.beginPath(); ctx.arc(x,y,r,0,Math.PI*2);
+    ctx.fillStyle=grd; ctx.fill();
+    const fs=Math.max(5,r*(a.s.length>1?0.7:0.9));
+    ctx.fillStyle=el.text;
+    ctx.font=`700 ${fs}px Manrope,sans-serif`;
+    ctx.textAlign='center'; ctx.textBaseline='middle';
+    ctx.fillText(a.s,x,y);
+  }
+}
+
+// ── Type metadata ──
+const TYPE_META = {
+  synthesis:     { label:'Синтез',       icon:'<svg class="ic" viewBox="0 0 24 24"><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>', iconBg:'rgba(96,165,250,.15)'  },
+  decomposition: { label:'Разложение',   icon:'<svg class="ic" viewBox="0 0 24 24"><path d="m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3z"/></svg>', iconBg:'rgba(251,191,36,.15)'  },
+  exchange:      { label:'Обмен',        icon:'<svg class="ic" viewBox="0 0 24 24"><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>', iconBg:'rgba(52,211,153,.15)'  },
+  redox:         { label:'ОВР',          icon:'<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>', iconBg:'rgba(249,115,22,.15)'  },
+  acid_base:     { label:'Кислота-осн.', icon:'<svg class="ic" viewBox="0 0 24 24"><path d="M14.5 2v17.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5V2"/><path d="M8.5 2h7"/><path d="M14.5 16h-5"/></svg>', iconBg:'rgba(167,139,250,.15)' },
+  combustion:    { label:'Горение',      icon:'<svg class="ic" viewBox="0 0 24 24"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 3z"/></svg>', iconBg:'rgba(239,68,68,.15)'   },
+  hydrolysis:    { label:'Гидролиз',     icon:'<svg class="ic" viewBox="0 0 24 24"><path d="M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z"/></svg>', iconBg:'rgba(6,214,224,.15)'   },
+  other:         { label:'Другое',       icon:'<svg class="ic" viewBox="0 0 24 24"><path d="M9 3h6m-4.5 0v5.5l-4 7.5a1 1 0 0 0 .9 1.5h8.2a1 1 0 0 0 .9-1.5l-4-7.5V3"/></svg>', iconBg:'rgba(148,163,184,.12)' },
+};
+
+// ── State ──
+let allRxns    = [];
+let molCache   = {};
+let filterType = '';
+let filterTopic = '';
+
+async function init() {
+  try {
+    allRxns = await LS.biochemGetReactions();
+    document.getElementById('subtitle').textContent = `${allRxns.length} реакций в базе`;
+    buildTopicChips();
+    applyFilters();
+  } catch(e) {
+    document.getElementById('rxn-list').innerHTML = `<div class="rxn-empty"><p>Ошибка загрузки: ${e.message}</p></div>`;
+  }
+}
+
+function buildTopicChips() {
+  const allTopics = new Set();
+  allRxns.forEach(r => (r.topic_tags||[]).forEach(t => allTopics.add(t)));
+  if (!allTopics.size) return;
+  const row = document.getElementById('topics-row');
+  const chips = document.getElementById('topics-chips');
+  row.style.display = '';
+  chips.innerHTML = Array.from(allTopics).map(t =>
+    `<button class="topic-chip" data-topic="${t}" onclick="setTopic(this,'${t.replace(/'/g,"\\'")}')">
+      ${t}
+    </button>`
+  ).join('');
+}
+
+function setTopic(btn, topic) {
+  if (filterTopic === topic) {
+    filterTopic = '';
+    document.querySelectorAll('.topic-chip').forEach(c => c.classList.remove('active'));
+  } else {
+    filterTopic = topic;
+    document.querySelectorAll('.topic-chip').forEach(c => c.classList.toggle('active', c.dataset.topic === topic));
+  }
+  applyFilters();
+}
+
+function setType(t) {
+  filterType = t;
+  document.querySelectorAll('.type-chip').forEach(c => c.classList.toggle('active', c.dataset.type === t));
+  applyFilters();
+}
+
+function applyFilters() {
+  const q = document.getElementById('search-q').value.toLowerCase().trim();
+  const filtered = allRxns.filter(r => {
+    const rxnType = r.type || r.reaction_type || '';
+    if (filterType && rxnType !== filterType) return false;
+    if (filterTopic && !(r.topic_tags||[]).includes(filterTopic)) return false;
+    if (q) {
+      const nameMatch = (r.name_ru||'').toLowerCase().includes(q);
+      // also search by molecule formula/name from cache
+      const allIds = [...new Set([...(r.reactant_ids||[]), ...(r.product_ids||[])])];
+      const molMatch = allIds.some(id => {
+        const m = molCache[id];
+        if (!m) return false;
+        return (m.formula||'').toLowerCase().includes(q) || (m.name_ru||'').toLowerCase().includes(q);
+      });
+      if (!nameMatch && !molMatch) return false;
+    }
+    return true;
+  });
+  document.getElementById('filter-count').textContent = `${filtered.length} реакций`;
+  renderList(filtered);
+}
+
+function buildEquation(r, molMap) {
+  const hasReactants = (r.reactant_ids||[]).length > 0;
+  const hasProducts  = (r.product_ids||[]).length  > 0;
+  if (!hasReactants && !hasProducts) {
+    return `<div class="rxn-equation empty">Уравнение не указано</div>`;
+  }
+  const fmt = ids => (ids||[]).map(id => {
+    const m = molMap[id];
+    return m
+      ? `<span class="eq-mol" onclick="location.href='/biochem?mol=${id}'" title="${m.name_ru||''}">${m.formula||'?'}</span>`
+      : `<span style="color:#555">#${id}</span>`;
+  }).join('<span class="eq-plus"> + </span>');
+
+  const reactants = fmt(r.reactant_ids||[]);
+  const products  = fmt(r.product_ids||[]);
+  const cond = r.conditions
+    ? `<div style="font-size:0.7rem;color:#666;margin-top:5px;font-family:'Manrope',sans-serif">${r.conditions}</div>`
+    : '';
+  return `<div class="rxn-equation">${reactants}<span class="eq-arrow"><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></span>${products}</div>${cond}`;
+}
+
+function renderList(rxns) {
+  const list = document.getElementById('rxn-list');
+  if (!rxns.length) {
+    list.innerHTML = `<div class="rxn-empty">
+      <svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.3">
+        <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/>
+      </svg>
+      <p>Реакций не найдено</p></div>`;
+    return;
+  }
+  list.innerHTML = '';
+  rxns.forEach((r, i) => {
+    const rxnType = r.type || r.reaction_type || 'other';
+    const meta    = TYPE_META[rxnType] || TYPE_META.other;
+    const energyNum = parseFloat(r.energy_kj);
+    const energyBadge = !isNaN(energyNum)
+      ? `<span class="energy-badge ${energyNum < 0 ? 'exo':'endo'}">${energyNum < 0 ? '<svg class="ic" viewBox="0 0 24 24"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 3z"/></svg> Экзо':'<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="2" x2="12" y2="22"/><path d="M17 7 12 2 7 7"/><path d="m17 17-5 5-5-5"/><line x1="2" y1="12" x2="22" y2="12"/><path d="m7 7-5 5 5 5"/><path d="m17 7 5 5-5 5"/></svg> Эндо'} ${Math.abs(energyNum)} кДж/моль</span>`
+      : '';
+
+    const card = document.createElement('div');
+    card.className = 'rxn-card';
+    card.style.setProperty('--i', i);
+    card.dataset.id = r.id;
+
+    card.innerHTML = `
+      <div class="rxn-card-inner">
+        <div class="rxn-stripe ${rxnType}"></div>
+        <div class="rxn-body">
+          <div class="rxn-header">
+            <div class="rxn-icon" style="background:${meta.iconBg}">${meta.icon}</div>
+            <div class="rxn-header-text">
+              <div class="rxn-name">${r.name_ru}</div>
+              <div class="rxn-badges">
+                <span class="rxn-type-badge ${rxnType}">${meta.label}</span>
+                ${energyBadge}
+              </div>
+            </div>
+            <button class="rxn-expand-btn" title="Развернуть"><svg class="ic" viewBox="0 0 24 24"><polyline points="2 9 12 21 22 9"/></svg></button>
+          </div>
+
+          <div class="rxn-eq-placeholder" id="rxn-eq-${r.id}">
+            <div class="rxn-equation empty">Загрузка…</div>
+          </div>
+
+          <div class="rxn-details" id="rxn-det-${r.id}">
+            ${r.description ? `<div class="rxn-description">${r.description}</div>` : ''}
+            ${(r.conditions || r.energy_kj != null) ? `
+            <div class="rxn-details-grid">
+              ${r.conditions ? `<div class="rxn-detail-item"><div class="rxn-detail-label">Условия</div><div class="rxn-detail-value">${r.conditions}</div></div>` : ''}
+              ${r.energy_kj != null ? `<div class="rxn-detail-item"><div class="rxn-detail-label">ΔH (энергия)</div><div class="rxn-detail-value">${r.energy_kj} кДж/моль</div></div>` : ''}
+            </div>` : ''}
+            <div class="rxn-mols-section">
+              <div class="rxn-mols-label">Молекулы реакции</div>
+              <div class="rxn-mols-row" id="rxn-mols-${r.id}">
+                <div class="rxn-mols-empty">Загрузка…</div>
+              </div>
+            </div>
+            <div id="rxn-quiz-${r.id}"></div>
+          </div>
+        </div>
+      </div>`;
+
+    card.querySelector('.rxn-header').addEventListener('click', () => toggleCard(card, r));
+    card.querySelector('.rxn-expand-btn').addEventListener('click', e => { e.stopPropagation(); toggleCard(card, r); });
+    list.appendChild(card);
+    loadEquation(r);
+  });
+}
+
+async function loadEquation(r) {
+  const allIds = [...new Set([...(r.reactant_ids||[]), ...(r.product_ids||[])])];
+  const molMap = await fetchMols(allIds);
+  const eqEl = document.getElementById(`rxn-eq-${r.id}`);
+  if (eqEl) eqEl.innerHTML = buildEquation(r, molMap);
+}
+
+async function fetchMols(ids) {
+  const missing = ids.filter(id => !molCache[id]);
+  await Promise.all(missing.map(async id => {
+    try { molCache[id] = await LS.biochemGetMolecule(id); }
+    catch { molCache[id] = { formula:`#${id}`, name_ru:'', atoms_json:[], bonds_json:[] }; }
+  }));
+  const map = {};
+  for (const id of ids) { if (molCache[id]) map[id] = molCache[id]; }
+  return map;
+}
+
+async function toggleCard(card, r) {
+  const wasExpanded = card.classList.contains('expanded');
+  card.classList.toggle('expanded', !wasExpanded);
+  card.querySelector('.rxn-expand-btn').innerHTML = card.classList.contains('expanded') ? '<svg class="ic" viewBox="0 0 24 24"><polyline points="22 15 12 3 2 15"/></svg>' : '<svg class="ic" viewBox="0 0 24 24"><polyline points="2 9 12 21 22 9"/></svg>';
+  if (card.classList.contains('expanded')) await loadMolThumbs(r);
+}
+
+async function loadMolThumbs(r) {
+  const molsRow = document.getElementById(`rxn-mols-${r.id}`);
+  if (!molsRow || molsRow.dataset.loaded) return;
+  molsRow.dataset.loaded = '1';
+
+  const reactantIds = r.reactant_ids||[];
+  const productIds  = r.product_ids||[];
+  const allIds = [...new Set([...reactantIds, ...productIds])];
+
+  if (!allIds.length) {
+    molsRow.innerHTML = '<div class="rxn-mols-empty">Состав реакции не указан</div>';
+    return;
+  }
+
+  const molMap = await fetchMols(allIds);
+  molsRow.innerHTML = '';
+
+  function appendMol(id) {
+    const m = molMap[id];
+    if (!m) return;
+    const wrap = document.createElement('div');
+    wrap.className = 'rxn-mol-thumb';
+    wrap.innerHTML = `
+      <div class="rxn-mol-canvas-wrap" onclick="location.href='/biochem?mol=${id}'" title="Открыть в конструкторе">
+        <canvas width="88" height="78"></canvas>
+      </div>
+      <div class="rxn-mol-formula">${m.formula||'?'}</div>
+      <div class="rxn-mol-name">${m.name_ru||''}</div>
+      <a class="rxn-mol-open" href="/biochem?mol=${id}">открыть <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></a>`;
+    molsRow.appendChild(wrap);
+    requestAnimationFrame(() => {
+      const cvs = wrap.querySelector('canvas');
+      renderMolThumb(cvs, m.atoms_json||[], m.bonds_json||[]);
+    });
+  }
+
+  reactantIds.forEach(appendMol);
+
+  const arrow = document.createElement('div');
+  arrow.className = 'rxn-mol-arrow';
+  arrow.innerHTML = '<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>';
+  molsRow.appendChild(arrow);
+
+  productIds.forEach(appendMol);
+
+  // Generate mini-quiz
+  const quizEl = document.getElementById(`rxn-quiz-${r.id}`);
+  if (quizEl && !quizEl.dataset.loaded) {
+    quizEl.dataset.loaded = '1';
+    quizEl.dataset.rid = r.id;
+    const quiz = generateQuiz(r, molMap);
+    if (quiz) renderQuiz(quizEl, quiz);
+  }
+}
+
+// ── Mini-quiz ──
+function _shuffle(arr) { return [...arr].sort(() => Math.random() - .5); }
+
+function generateQuiz(r, molMap) {
+  const rxnType = r.type || r.reaction_type || 'other';
+  const reactants = (r.reactant_ids||[]).map(id=>molMap[id]).filter(Boolean);
+  const products  = (r.product_ids||[]).map(id=>molMap[id]).filter(Boolean);
+
+  const quizTypes = [];
+  // Q1: reaction type
+  quizTypes.push(() => {
+    const correct = TYPE_META[rxnType]?.label || 'Другое';
+    const others = _shuffle(Object.values(TYPE_META).map(m=>m.label).filter(l=>l!==correct)).slice(0,3);
+    return { q: 'К какому типу относится эта реакция?', choices: _shuffle([correct,...others]), answer: correct };
+  });
+  // Q2: pick product from formula
+  if (products.length && reactants.length) {
+    quizTypes.push(() => {
+      const target = products[Math.floor(Math.random()*products.length)];
+      const distractors = _shuffle(
+        Object.values(molCache).filter(m => !(products.find(p=>p.id===m.id)) && !(reactants.find(a=>a.id===m.id)) && m.formula)
+      ).slice(0,3);
+      const choices = _shuffle([target.formula, ...distractors.map(m=>m.formula)]).filter(Boolean);
+      if (choices.length < 2) return null;
+      const reactStr = reactants.map(m=>m.formula).join(' + ');
+      return { q: `Какое вещество является продуктом реакции?\n${reactStr} <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> ?`, choices, answer: target.formula };
+    });
+  }
+  // Q3: pick reactant name
+  if (reactants.length && products.length) {
+    quizTypes.push(() => {
+      const target = reactants[Math.floor(Math.random()*reactants.length)];
+      const distractors = _shuffle(
+        Object.values(molCache).filter(m => !(reactants.find(a=>a.id===m.id)) && m.name_ru)
+      ).slice(0,3);
+      const choices = _shuffle([target.name_ru||target.formula, ...distractors.map(m=>m.name_ru||m.formula)]).filter(Boolean);
+      if (choices.length < 2) return null;
+      return { q: 'Какое вещество является реагентом этой реакции?', choices, answer: target.name_ru||target.formula };
+    });
+  }
+  // Pick a random quiz type and generate
+  const shuffledTypes = _shuffle(quizTypes);
+  for (const gen of shuffledTypes) {
+    const q = gen();
+    if (q && q.choices.length >= 2) return q;
+  }
+  return null;
+}
+
+function renderQuiz(container, quiz) {
+  container.innerHTML = `
+    <div class="mini-quiz">
+      <div class="mq-head"><svg class="ic" viewBox="0 0 24 24"><path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 4.44-1.04z"/><path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-4.44-1.04z"/></svg> Мини-тест</div>
+      <div class="mq-q">${quiz.q.replace(/\n/g,'<br>')}</div>
+      <div class="mq-opts">
+        ${quiz.choices.map(ch =>
+          `<button class="mq-btn" onclick="answerQuiz(this,'${ch.replace(/'/g,"\\'")}','${quiz.answer.replace(/'/g,"\\'")}',this.parentElement)">${ch}</button>`
+        ).join('')}
+      </div>
+      <span class="mq-again" onclick="reloadQuiz(this,${container.dataset.rid})"><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> Другой вопрос</span>
+    </div>`;
+}
+
+function answerQuiz(btn, answer, correct, opts) {
+  opts.querySelectorAll('.mq-btn').forEach(b => b.disabled = true);
+  btn.classList.add(answer === correct ? 'correct' : 'wrong');
+  if (answer !== correct) {
+    opts.querySelectorAll('.mq-btn').forEach(b => {
+      if (b.textContent.trim() === correct) b.classList.add('correct');
+    });
+  }
+}
+
+function reloadQuiz(btn, rid) {
+  const r = allRxns.find(rx => rx.id === rid);
+  if (!r) return;
+  const allIds = [...new Set([...(r.reactant_ids||[]), ...(r.product_ids||[])])];
+  const molMap = {};
+  for (const id of allIds) if (molCache[id]) molMap[id] = molCache[id];
+  const quiz = generateQuiz(r, molMap);
+  const container = btn.closest('[data-rid]');
+  if (quiz && container) renderQuiz(container, quiz);
+}
+
+// ── Boot ──
+if (window.lucide) lucide.createIcons();
+LS.notif?.init();
+LS.hideDisabledFeatures?.();
+init();
+</script>
+<script src="/js/notifications.js"></script>
+<script src="/js/mobile.js"></script>
+</body>
+</html>
diff --git a/frontend/biochem.html b/frontend/biochem.html
new file mode 100644
index 0000000..2822617
--- /dev/null
+++ b/frontend/biochem.html
@@ -0,0 +1,2079 @@
+<!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" />
+  <style>
+    body { overflow: hidden; }
+    .sb-sub-link { padding-left: 28px !important; font-size: 0.76rem !important; opacity: .75; }
+    .sb-sub-link:hover { opacity: 1; }
+    .sb-content { padding: 0 !important; overflow: hidden; display: flex; flex-direction: column; background: #0d0d1a; }
+
+    /* ── 3D mode button ── */
+    .tool-btn.mode-3d-active { background: rgba(6,214,224,.2) !important; border-color: #06D6E0 !important; color: #06D6E0 !important; }
+
+    /* ── Toolbar ── */
+    .bio-toolbar {
+      display: flex; align-items: center; gap: 6px;
+      padding: 8px 14px; flex-shrink: 0;
+      background: rgba(15,15,30,0.95);
+      border-bottom: 1px solid rgba(155,93,229,0.15);
+      backdrop-filter: blur(10px);
+      flex-wrap: wrap;
+    }
+    .bio-title {
+      font-family: 'Unbounded', sans-serif; font-size: 0.72rem; font-weight: 700;
+      color: var(--violet); letter-spacing: .04em; white-space: nowrap; margin-right: 8px;
+    }
+    .el-btn {
+      width: 38px; height: 38px; border-radius: 10px; border: 2px solid transparent;
+      font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 800;
+      cursor: pointer; transition: all .15s; position: relative; flex-shrink: 0;
+      display: flex; align-items: center; justify-content: center;
+    }
+    .el-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.4); }
+    .el-btn.active { border-color: #fff !important; box-shadow: 0 0 0 3px rgba(255,255,255,.18) !important; }
+    .tool-sep { width: 1px; height: 28px; background: rgba(255,255,255,.12); margin: 0 4px; flex-shrink: 0; }
+    .tool-btn {
+      height: 34px; padding: 0 12px; border-radius: 8px; border: 1.5px solid rgba(255,255,255,.12);
+      background: rgba(255,255,255,.06); color: #ccc;
+      font-family: 'Manrope', sans-serif; font-size: 0.78rem; font-weight: 600;
+      cursor: pointer; transition: all .15s; white-space: nowrap; display: flex; align-items: center; gap: 5px;
+    }
+    .tool-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
+    .tool-btn.active { background: rgba(155,93,229,.25); border-color: var(--violet); color: #c084fc; }
+    .tool-btn svg { width: 14px; height: 14px; }
+
+    /* ── Main body ── */
+    .bio-body { flex: 1; display: flex; overflow: hidden; min-height: 0; height: 0; }
+
+    /* ── Canvas ── */
+    .bio-canvas-wrap { flex: 1; position: relative; overflow: hidden; cursor: crosshair; min-width: 0; }
+    #mol-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
+
+    /* Zoom controls */
+    .zoom-ctrl {
+      position: absolute; bottom: 16px; left: 16px; display: flex; flex-direction: column; gap: 4px;
+    }
+    .zoom-btn {
+      width: 32px; height: 32px; border-radius: 8px;
+      background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
+      color: #aaa; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
+      transition: all .15s;
+    }
+    .zoom-btn:hover { background: rgba(255,255,255,.16); color: #fff; }
+
+    /* Hint */
+    .bio-hint {
+      position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
+      background: rgba(0,0,0,.7); color: #999; font-size: 0.72rem; padding: 5px 14px;
+      border-radius: 999px; pointer-events: none; white-space: nowrap;
+      border: 1px solid rgba(255,255,255,.06);
+    }
+
+    /* ── Info panel ── */
+    .bio-panel {
+      width: 290px; flex-shrink: 0;
+      background: rgba(8,8,20,0.9);
+      border-left: 1px solid rgba(155,93,229,.15);
+      display: flex; flex-direction: column;
+      overflow: hidden; min-height: 0;
+    }
+    .bp-section { padding: 16px; border-bottom: 1px solid rgba(255,255,255,.06); }
+    .bp-label { font-size: 0.68rem; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
+    .bp-formula {
+      font-family: 'Unbounded', sans-serif; font-size: 1.6rem; font-weight: 800;
+      color: #fff; min-height: 44px; word-break: break-all;
+    }
+    .bp-formula.empty { color: #333; }
+    .bp-mol-name { font-size: 0.92rem; font-weight: 700; color: var(--violet); margin-bottom: 4px; }
+    .bp-mol-desc { font-size: 0.76rem; color: #888; line-height: 1.5; }
+    .bp-issue { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 6px; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.2); font-size: 0.75rem; color: #f87171; margin-bottom: 4px; }
+    .bp-ok { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 6px; background: rgba(74,222,128,.1); border: 1px solid rgba(74,222,128,.2); font-size: 0.75rem; color: #4ade80; }
+    .bp-btn {
+      width: 100%; padding: 9px; border-radius: 10px; border: none; cursor: pointer;
+      font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 700;
+      transition: all .15s; margin-bottom: 6px;
+    }
+    .bp-btn-primary { background: linear-gradient(135deg,#9B5DE5,#c084fc); color: #fff; }
+    .bp-btn-primary:hover { filter: brightness(1.1); }
+    .bp-btn-secondary { background: rgba(255,255,255,.06); color: #aaa; border: 1.5px solid rgba(255,255,255,.1); }
+    .bp-btn-secondary:hover { background: rgba(255,255,255,.1); color: #fff; }
+    .bp-btn:disabled { opacity: .4; cursor: not-allowed; }
+
+    /* Challenges in panel */
+    .chal-progress {
+      padding: 10px 12px 6px; border-bottom: 1px solid rgba(255,255,255,.05);
+    }
+    .chal-progress-row {
+      display: flex; justify-content: space-between; align-items: center;
+      font-size: 0.72rem; color: #888; margin-bottom: 6px;
+    }
+    .chal-progress-row strong { color: #c084fc; }
+    .chal-progress-bar {
+      height: 4px; border-radius: 999px;
+      background: rgba(255,255,255,.08); overflow: hidden;
+    }
+    .chal-progress-fill {
+      height: 100%; border-radius: 999px;
+      background: linear-gradient(90deg, #9B5DE5, #c084fc);
+      transition: width .4s ease;
+    }
+    .chal-type-row { display: flex; gap: 6px; padding: 8px 12px 4px; flex-wrap: wrap; }
+    .chal-type-chip {
+      font-size: 0.66rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
+      border: 1px solid transparent; cursor: pointer; transition: all .15s;
+      background: rgba(255,255,255,.05); color: #666;
+    }
+    .chal-type-chip.active { background: rgba(155,93,229,.2); border-color: var(--violet); color: #c084fc; }
+    .chal-item {
+      display: flex; align-items: center; gap: 10px; padding: 8px 10px;
+      border-radius: 8px; background: rgba(255,255,255,.04); margin-bottom: 4px;
+      border: 1.5px solid transparent; cursor: pointer; transition: all .15s;
+    }
+    .chal-item:hover { background: rgba(155,93,229,.1); border-color: rgba(155,93,229,.2); }
+    .chal-item.done { opacity: .5; }
+    .chal-item.active-chal { background: rgba(155,93,229,.18); border-color: var(--violet); }
+    .chal-icon { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
+    .chal-info { flex: 1; min-width: 0; }
+    .chal-title { font-size: 0.78rem; font-weight: 700; color: #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .chal-xp { font-size: 0.68rem; color: #888; }
+    .diff-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
+
+    /* Choice buttons for identify/formula challenges */
+    .chal-choice-btn {
+      width: 100%; padding: 8px 12px; border-radius: 8px; text-align: left;
+      border: 1.5px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04);
+      color: #ccc; font-family: 'Manrope', sans-serif; font-size: 0.8rem;
+      cursor: pointer; transition: all .15s; margin-bottom: 4px; display: block;
+    }
+    .chal-choice-btn:hover:not(:disabled) { border-color: rgba(155,93,229,.4); background: rgba(155,93,229,.1); color: #ddd; }
+    .chal-choice-btn.correct { border-color: #4ade80 !important; background: rgba(74,222,128,.1) !important; color: #4ade80 !important; }
+    .chal-choice-btn.wrong   { border-color: #ef4444 !important; background: rgba(239,68,68,.1) !important;  color: #ef4444 !important; }
+    .chal-choice-btn:disabled { cursor: default; }
+
+    /* Saved panel */
+    .saved-item {
+      display: flex; align-items: center; gap: 8px; padding: 7px 10px;
+      border-radius: 8px; background: rgba(255,255,255,.04); margin-bottom: 4px;
+      border: 1px solid rgba(255,255,255,.06); cursor: pointer; transition: all .15s;
+    }
+    .saved-item:hover { background: rgba(6,214,224,.08); border-color: rgba(6,214,224,.15); }
+    .saved-formula { font-size: 0.78rem; font-weight: 700; color: #06D6E0; font-family: monospace; }
+    .saved-name { font-size: 0.7rem; color: #888; }
+
+    /* Tab bar inside panel */
+    .panel-tabs { display: flex; border-bottom: 1px solid rgba(255,255,255,.06); flex-shrink: 0; }
+    .panel-tab { flex: 1; padding: 10px 4px; font-size: 0.72rem; font-weight: 700; color: #666; background: none; border: none; cursor: pointer; border-bottom: 2px solid transparent; transition: all .15s; text-align: center; }
+    .panel-tab.active { color: var(--violet); border-bottom-color: var(--violet); }
+    .panel-pane { display: none; padding: 12px; flex: 1 1 0; overflow-y: auto; min-height: 0; }
+    .panel-pane.active { display: block; }
+
+    /* ── Ring dropdown ── */
+    .ring-menu-wrap { position: relative; }
+    .ring-menu {
+      position: absolute; top: calc(100% + 4px); left: 0; z-index: 300;
+      background: rgba(10,10,24,.98); border: 1px solid rgba(155,93,229,.3);
+      border-radius: 10px; padding: 6px; min-width: 168px;
+      box-shadow: 0 8px 28px rgba(0,0,0,.6); display: none;
+    }
+    .ring-menu.open { display: block; }
+    .ring-opt {
+      display: flex; align-items: center; gap: 7px; padding: 7px 10px;
+      border-radius: 7px; cursor: pointer; transition: all .15s;
+      color: #ccc; font-size: 0.77rem; font-weight: 600; white-space: nowrap;
+    }
+    .ring-opt:hover { background: rgba(155,93,229,.18); color: #c084fc; }
+    .ring-sub { font-size: 0.69rem; color: #555; margin-left: auto; }
+
+    /* ── Atom count badge ── */
+    .el-cnt {
+      position: absolute; bottom: -3px; right: -3px;
+      background: #7c3aed; color: #fff; font-size: 8px; font-weight: 800;
+      border-radius: 4px; min-width: 12px; padding: 0 2px; text-align: center;
+      line-height: 13px; pointer-events: none; display: none;
+    }
+    .el-btn.has-cnt .el-cnt { display: block; }
+
+    /* ── Tool btn disabled ── */
+    .tool-btn:disabled { opacity: .35; cursor: default; pointer-events: none; }
+    .tool-btn.icon-only { padding: 0 9px; }
+
+    /* ── Live mol stats panel ── */
+    .bp-stats-grid {
+      display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 8px;
+    }
+    .bp-stat-chip {
+      display: flex; flex-direction: column;
+      padding: 7px 9px; border-radius: 9px;
+      background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
+      transition: border-color .15s;
+    }
+    .bp-stat-chip:hover { border-color: rgba(155,93,229,.35); }
+    .bp-stat-lbl { font-size: 0.58rem; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
+    .bp-stat-val { font-size: 0.84rem; font-weight: 700; color: #ddd; }
+    .bp-stat-val.good  { color: #4ade80; }
+    .bp-stat-val.warn  { color: #facc15; }
+    .bp-stat-val.bad   { color: #f87171; }
+    .bp-stat-val.cyan  { color: #06D6E0; }
+    .bp-stat-val.violet{ color: #c084fc; }
+    .bp-fg-wrap {
+      margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px;
+    }
+    .bp-fg-tag {
+      font-size: 0.66rem; font-weight: 700; padding: 2px 8px;
+      border-radius: 999px; border: 1px solid; cursor: default;
+    }
+
+    /* ── Match challenge ── */
+    .match-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 8px; }
+    .match-col-hdr { font-size: 0.65rem; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; text-align: center; }
+    .match-it {
+      padding: 6px 7px; border-radius: 7px; border: 1.5px solid rgba(255,255,255,.1);
+      background: rgba(255,255,255,.04); color: #ccc; font-size: 0.74rem; font-weight: 600;
+      cursor: pointer; transition: all .15s; text-align: center; word-break: break-word;
+      display: block; width: 100%;
+    }
+    .match-it:hover:not(.matched):not(.selected) { border-color: rgba(155,93,229,.5); background: rgba(155,93,229,.12); }
+    .match-it.selected { border-color: #06D6E0 !important; background: rgba(6,214,224,.15) !important; color: #06D6E0 !important; }
+    .match-it.matched  { border-color: #4ade80 !important; background: rgba(74,222,128,.08) !important; color: #4ade80 !important; cursor: default; }
+    .match-it.wrong    { border-color: #ef4444 !important; background: rgba(239,68,68,.12) !important; }
+
+    /* ── Balance challenge ── */
+    .balance-eq { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 8px 0 12px; }
+    .bal-coef {
+      width: 34px; text-align: center; padding: 4px 0; border-radius: 6px;
+      background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.15);
+      color: #fff; font-size: 0.86rem; font-weight: 700; -moz-appearance: textfield;
+    }
+    .bal-coef::-webkit-outer-spin-button, .bal-coef::-webkit-inner-spin-button { -webkit-appearance: none; }
+    .bal-coef:focus { outline: none; border-color: #9B5DE5; background: rgba(155,93,229,.14); }
+    .bal-formula { font-size: 0.88rem; color: #06D6E0; font-weight: 700; }
+    .bal-op { font-size: 1rem; color: #666; }
+    .bal-arrow { font-size: 0.9rem; color: #888; padding: 0 2px; }
+
+    /* ── Mobile ── */
+    @media (max-width: 768px) {
+      body { overflow: auto; }
+      .sb-content { overflow: auto; flex-direction: column; }
+
+      /* Toolbar: two rows — elements then tools */
+      .bio-toolbar {
+        padding: 6px 8px; flex-wrap: wrap; gap: 4px;
+        position: sticky; top: 56px; z-index: 20;
+        background: rgba(15,15,30,0.97); backdrop-filter: blur(10px);
+      }
+      .bio-title { display: none; }
+      .tool-sep { display: none; }
+
+      /* Element palette: horizontal scroll, full width first row */
+      #el-palette {
+        flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch;
+        width: 100%; order: -1; gap: 3px !important;
+        scrollbar-width: none; padding-bottom: 2px;
+      }
+      #el-palette::-webkit-scrollbar { display: none; }
+      .el-btn { width: 32px; height: 32px; font-size: 0.72rem; flex-shrink: 0; }
+
+      /* Tool buttons: compact, scrollable row */
+      .tool-btn { height: 30px; padding: 0 8px; font-size: 0.72rem; flex-shrink: 0; }
+      .tool-btn svg { width: 12px; height: 12px; }
+      .tool-btn.icon-only { padding: 0 6px; }
+
+      /* Body: canvas on top, panel below — natural scroll */
+      .bio-body { flex-direction: column; overflow: visible; flex: none; }
+      .bio-canvas-wrap { height: 45vw; min-height: 220px; flex: none; }
+      .bio-panel {
+        width: 100% !important; max-height: none; height: auto;
+        border-left: none !important; border-top: 1px solid rgba(155,93,229,.15);
+        overflow-y: visible; flex: none;
+      }
+      .ring-menu-wrap { display: none; }
+
+      /* Panel tabs */
+      .panel-tabs { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
+      .panel-tabs::-webkit-scrollbar { display: none; }
+      .panel-tab { white-space: nowrap; flex-shrink: 0; }
+
+      /* Panel sections */
+      .bp-section { padding: 12px; }
+
+      /* Zoom controls */
+      .zoom-ctrl { bottom: 8px; left: 8px; }
+      .zoom-btn { width: 28px; height: 28px; font-size: 14px; }
+      .bio-hint { display: none; }
+    }
+    @media (max-width: 480px) {
+      .bio-canvas-wrap { height: 220px; min-height: 180px; }
+      .el-btn { width: 28px; height: 28px; font-size: 0.66rem; }
+      .tool-btn { height: 26px; padding: 0 6px; font-size: 0.66rem; }
+    }
+  </style>
+</head>
+<body>
+<div class="app-layout" id="app">
+  <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 active"><i data-lucide="flask-conical" class="sb-icon"></i><span class="sb-lbl">Биохимия</span></a>
+      <a href="/biochem-library"   class="sb-link sb-sub-link"><i data-lucide="library" class="sb-icon"></i><span class="sb-lbl">↳ Библиотека</span></a>
+      <a href="/biochem-reactions" class="sb-link sb-sub-link"><i data-lucide="arrow-right-left" class="sb-icon"></i><span class="sb-lbl">↳ Реакции</span></a>
+      <a href="/biochem-properties" class="sb-link sb-sub-link"><i data-lucide="table-properties" class="sb-icon"></i><span class="sb-lbl">↳ Свойства</span></a>
+      <a href="/biochem-pathways"   class="sb-link sb-sub-link"><i data-lucide="route"             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>
+      <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>
+    </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>
+          <span class="sb-logout" style="pointer-events:none">Мой профиль</span>
+        </div>
+      </a>
+    </div>
+  </aside>
+  <div class="notif-drop" id="notif-drop"></div>
+
+  <div class="sb-content">
+    <!-- ── Toolbar ── -->
+    <div class="bio-toolbar">
+      <span class="bio-title">Биохимия</span>
+      <div class="tool-sep"></div>
+      <!-- Element palette (filled by JS) -->
+      <div id="el-palette" style="display:flex;gap:4px;flex-wrap:wrap;align-items:center"></div>
+      <div class="tool-sep"></div>
+      <!-- Tools -->
+      <button class="tool-btn active" id="tool-add"  onclick="setTool('add')"  title="Добавить атом / нарисовать связь">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4"/></svg>Добавить
+      </button>
+      <button class="tool-btn" id="tool-move" onclick="setTool('move')" title="Перемещать атомы">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 9l-3 3 3 3M9 5l3-3 3 3M15 19l-3 3-3-3M19 9l3 3-3 3M12 12h.01"/></svg>Двигать
+      </button>
+      <button class="tool-btn" id="tool-erase" onclick="setTool('erase')" title="Удалить атом/связь">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 20H7L3 16l10-10 7 7-2.5 2.5"/><path d="M6.0001 10L14 18"/></svg>Стереть
+      </button>
+      <div class="tool-sep"></div>
+      <button class="tool-btn" onclick="clearAll()" title="Очистить холст">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>Очистить
+      </button>
+      <button class="tool-btn" onclick="centerView()" title="По центру">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 3H5a2 2 0 00-2 2v3M21 8V5a2 2 0 00-2-2h-3M3 16v3a2 2 0 002 2h3M16 21h3a2 2 0 002-2v-3"/></svg>Центр
+      </button>
+      <button class="tool-btn" id="btn-3d" onclick="toggle3D()" title="3D вращение">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>3D
+      </button>
+      <button class="tool-btn" id="btn-vdw" onclick="toggleVDW()" title="Space-fill (VDW радиусы)" style="display:none"><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/></svg> VDW</button>
+      <div class="tool-sep"></div>
+      <button class="tool-btn icon-only" id="btn-undo" onclick="undo()" disabled title="Отменить (Ctrl+Z)">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" width="14" height="14"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 00-9-9 9 9 0 00-6 2.3L3 13"/></svg>
+      </button>
+      <button class="tool-btn icon-only" id="btn-redo" onclick="redo()" disabled title="Повторить (Ctrl+Y)">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" width="14" height="14"><path d="M21 7v6h-6"/><path d="M3 17a9 9 0 019-9 9 9 0 016 2.3L21 13"/></svg>
+      </button>
+      <div class="ring-menu-wrap">
+        <button class="tool-btn" id="btn-rings" onclick="toggleRingMenu()" title="Вставить кольцо">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5"/></svg>Кольца
+        </button>
+        <div class="ring-menu" id="ring-menu">
+          <div class="ring-opt" onclick="insertRing('benzene')">⬡ Бензол <span class="ring-sub">C₆H₆</span></div>
+          <div class="ring-opt" onclick="insertRing('cyclohexane')">⬡ Циклогексан <span class="ring-sub">C₆</span></div>
+          <div class="ring-opt" onclick="insertRing('cyclopentane')">⬠ Циклопентан <span class="ring-sub">C₅</span></div>
+          <div class="ring-opt" onclick="insertRing('naphthalene')">⬡⬡ Нафталин <span class="ring-sub">C₁₀H₈</span></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ── Body ── -->
+    <div class="bio-body">
+      <!-- Canvas -->
+      <div class="bio-canvas-wrap" id="canvas-wrap">
+        <canvas id="mol-canvas"></canvas>
+        <div class="zoom-ctrl">
+          <button class="zoom-btn" onclick="zoomBy(1.2)" title="Приблизить">+</button>
+          <button class="zoom-btn" onclick="zoomBy(0.8)" title="Отдалить">−</button>
+        </div>
+        <div class="bio-hint" id="bio-hint">Кликни на холст, чтобы добавить атом · Перетащи от атома, чтобы создать связь · Клик по связи меняет порядок</div>
+      </div>
+
+      <!-- Info panel -->
+      <div class="bio-panel">
+        <div class="panel-tabs">
+          <button class="panel-tab active" onclick="switchPanel('editor')">Редактор</button>
+          <button class="panel-tab" onclick="switchPanel('challenges')">Задания</button>
+          <button class="panel-tab" onclick="switchPanel('saved')">Сохранённые</button>
+        </div>
+
+        <!-- Editor pane -->
+        <div class="panel-pane active" id="pane-editor">
+          <div class="bp-section" style="border-bottom:none;padding-bottom:0">
+            <div class="bp-label">Формула</div>
+            <div class="bp-formula empty" id="bp-formula">—</div>
+          </div>
+          <!-- Live mol stats -->
+          <div class="bp-section" id="bp-mol-stats" style="display:none;padding-top:8px;padding-bottom:8px">
+            <div class="bp-label">Свойства</div>
+            <div class="bp-stats-grid" id="bp-stats-grid"></div>
+            <div class="bp-fg-wrap" id="bp-fg-wrap" style="display:none"></div>
+          </div>
+          <div class="bp-section" id="bp-mol-info" style="display:none">
+            <div class="bp-mol-name" id="bp-mol-name"></div>
+            <div class="bp-mol-desc" id="bp-mol-desc"></div>
+          </div>
+          <div class="bp-section" id="bp-issues-wrap">
+            <div id="bp-issues"></div>
+          </div>
+          <div class="bp-section">
+            <button class="bp-btn bp-btn-primary" id="bp-save-btn" onclick="saveCurrentMolecule()" disabled>
+              Сохранить молекулу
+            </button>
+            <button class="bp-btn bp-btn-secondary" onclick="loadFromLibrary()">
+              Загрузить из библиотеки
+            </button>
+          </div>
+          <div class="bp-section" id="bp-active-challenge" style="display:none">
+            <div class="bp-label" id="bp-chal-type-label">Текущее задание</div>
+            <div id="bp-chal-text" style="font-size:0.8rem;color:#ddd;margin-bottom:8px"></div>
+            <!-- identify/formula: molecule name hint -->
+            <div id="bp-chal-mol-hint" style="display:none;font-size:1rem;font-weight:700;color:#06D6E0;margin-bottom:10px;text-align:center"></div>
+            <!-- identify/formula: multiple choice buttons -->
+            <div id="bp-chal-choices" style="display:none;margin-bottom:6px"></div>
+            <!-- match challenge: two columns -->
+            <div id="bp-chal-match" style="display:none;margin-bottom:6px"></div>
+            <!-- balance challenge: equation with inputs -->
+            <div id="bp-chal-balance" style="display:none;margin-bottom:6px"></div>
+            <!-- build: submit button -->
+            <button class="bp-btn bp-btn-primary" id="bp-submit-build" onclick="submitChallenge()">Проверить решение</button>
+            <button class="bp-btn bp-btn-secondary" onclick="cancelChallenge()">Отмена</button>
+          </div>
+        </div>
+
+        <!-- Challenges pane -->
+        <div class="panel-pane" id="pane-challenges" style="padding:0">
+          <div class="chal-progress">
+            <div class="chal-progress-row">
+              <span>Прогресс: <strong id="chal-done-n">0</strong>/<span id="chal-total-n">0</span></span>
+              <span id="chal-xp-total" style="color:#facc15">0 XP</span>
+            </div>
+            <div class="chal-progress-bar"><div class="chal-progress-fill" id="chal-progress-fill" style="width:0%"></div></div>
+          </div>
+          <div class="chal-type-row">
+            <button class="chal-type-chip active" data-ctype="" onclick="setChalFilter(this,'')">Все</button>
+            <button class="chal-type-chip" data-ctype="build"    onclick="setChalFilter(this,'build')"><svg class="ic" viewBox="0 0 24 24"><path d="M9 3h6m-4.5 0v5.5l-4 7.5a1 1 0 0 0 .9 1.5h8.2a1 1 0 0 0 .9-1.5l-4-7.5V3"/></svg> Построить</button>
+            <button class="chal-type-chip" data-ctype="identify" onclick="setChalFilter(this,'identify')"><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> Узнать</button>
+            <button class="chal-type-chip" data-ctype="formula"  onclick="setChalFilter(this,'formula')"><svg class="ic" viewBox="0 0 24 24"><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.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg> Формула</button>
+            <button class="chal-type-chip" data-ctype="balance"  onclick="setChalFilter(this,'balance')"><svg class="ic" viewBox="0 0 24 24"><path d="m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1z"/><path d="m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1z"/><path d="M7 21h10M12 3v18M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2"/></svg> Уравнение</button>
+            <button class="chal-type-chip" data-ctype="match"    onclick="setChalFilter(this,'match')"><svg class="ic" viewBox="0 0 24 24"><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> Совместить</button>
+            <button class="chal-type-chip" data-ctype="classify" onclick="setChalFilter(this,'classify')"><svg class="ic" viewBox="0 0 24 24"><path d="M12 2H2v10l9.29 9.29c.94.94 2.48.94 3.42 0l6.58-6.58c.94-.94.94-2.48 0-3.42L12 2Z"/><path d="M7 7h.01"/></svg> Класс</button>
+            <button class="chal-type-chip" data-ctype="complete" onclick="setChalFilter(this,'complete')"><svg class="ic" viewBox="0 0 24 24"><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> Завершить</button>
+          </div>
+          <div style="padding:0 12px 12px">
+            <div id="challenges-list" style="color:#666;font-size:0.82rem">Загрузка…</div>
+          </div>
+        </div>
+
+        <!-- Saved pane -->
+        <div class="panel-pane" id="pane-saved">
+          <div id="saved-list" style="color:#666;font-size:0.82rem">Загрузка…</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Library modal -->
+<div class="modal-overlay" id="lib-modal" onclick="if(event.target===this)closeLibModal()" style="display:none;z-index:1000">
+  <div class="modal-box" style="max-width:600px;background:#0f0f1e;border:1px solid rgba(155,93,229,.2)">
+    <div class="modal-title" style="color:#ddd">Библиотека молекул</div>
+    <div style="display:flex;gap:8px;margin-bottom:16px">
+      <input type="text" id="lib-search" placeholder="Поиск по названию или формуле…" oninput="filterLibrary(this.value)"
+        style="flex:1;padding:8px 12px;border-radius:8px;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.1);color:#ddd;font-family:'Manrope',sans-serif;font-size:0.84rem">
+      <select id="lib-cat" onchange="filterLibrary()" style="padding:8px 12px;border-radius:8px;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.1);color:#ddd;font-family:'Manrope',sans-serif;font-size:0.82rem">
+        <option value="">Все категории</option>
+        <option value="inorganic">Неорганика</option>
+        <option value="organic">Органика</option>
+        <option value="biomolecule">Биомолекулы</option>
+      </select>
+    </div>
+    <div id="lib-grid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;max-height:380px;overflow-y:auto"></div>
+    <div style="margin-top:16px;text-align:right">
+      <button class="bp-btn bp-btn-secondary" style="width:auto;padding:8px 20px" onclick="closeLibModal()">Закрыть</button>
+    </div>
+  </div>
+</div>
+
+<script src="/js/api.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+<script>
+'use strict';
+const { user, isTeacher, isAdmin } = LS.initPage();
+if (!user) location.href = '/login';
+
+// Nav init
+const nav = document.getElementById('nav-user');
+const ava = document.getElementById('nav-avatar');
+if (nav) nav.textContent = user?.name?.split(' ')[0] || 'Пользователь';
+if (ava) ava.textContent = (user?.name||'LS').split(' ').slice(0,2).map(w=>w[0]?.toUpperCase()||'').join('')||'LS';
+if (isAdmin) { document.getElementById('btn-admin').style.display=''; }
+if (isTeacher) { document.getElementById('btn-classes').style.display=''; }
+LS.showBoardIfAllowed();
+
+// ── Element definitions (CPK colours) ──
+const ELEMENTS = {
+  H:  { name:'Водород',  color:'#D4D4D4', text:'#222', radius:18, maxV:1 },
+  C:  { name:'Углерод',  color:'#555555', text:'#fff', radius:20, maxV:4 },
+  N:  { name:'Азот',     color:'#4060FF', text:'#fff', radius:20, maxV:3 },
+  O:  { name:'Кислород', color:'#EE2020', text:'#fff', radius:20, maxV:2 },
+  P:  { name:'Фосфор',   color:'#FF8000', text:'#fff', radius:22, maxV:5 },
+  S:  { name:'Сера',     color:'#C8B400', text:'#000', radius:22, maxV:6 },
+  Cl: { name:'Хлор',     color:'#00A860', text:'#fff', radius:22, maxV:1 },
+  Na: { name:'Натрий',   color:'#8040C0', text:'#fff', radius:22, maxV:1 },
+  Ca: { name:'Кальций',  color:'#707070', text:'#fff', radius:22, maxV:2 },
+  Mg: { name:'Магний',   color:'#1E8A1E', text:'#fff', radius:22, maxV:2 },
+  Fe: { name:'Железо',   color:'#B03010', text:'#fff', radius:22, maxV:3 },
+};
+
+// ── State ──
+let atoms = [];
+let bonds = [];
+let nextId = 1;
+let selEl = 'C';           // selected element
+let tool = 'add';          // 'add' | 'move' | 'erase'
+let hoveredAtomId  = null;
+let hoveredBondId  = null;
+let bondFromId     = null; // dragging bond from this atom
+let bondCurX = 0, bondCurY = 0;
+let isDragging     = false;
+let dragId         = null;
+let dragOffX = 0,  dragOffY = 0;
+let isPanning      = false;
+let panSX = 0,     panSY = 0;
+let panX = 0,      panY = 0;
+let scale = 1;
+let mouseDownW     = null; // world pos at mousedown
+let activeChalId   = null; // challenge being attempted
+let _libAll = [];          // all library molecules (cached)
+
+// ── Undo/Redo history ──
+const _HISTORY_MAX = 30;
+let _history  = [];
+let _histIdx  = -1;
+
+// ── Panel tabs ──
+const _panelNames = { editor: 'pane-editor', challenges: 'pane-challenges', saved: 'pane-saved' };
+function switchPanel(name) {
+  document.querySelectorAll('.panel-tab').forEach((b, i) => {
+    const panes = ['editor','challenges','saved'];
+    b.classList.toggle('active', panes[i] === name);
+  });
+  document.querySelectorAll('.panel-pane').forEach(p => p.classList.remove('active'));
+  const pane = document.getElementById('pane-' + name);
+  if (pane) pane.classList.add('active');
+  if (name === 'challenges' && !_challenges.length) loadChallenges();
+  if (name === 'saved') loadSaved();
+  // Re-sync canvas after panel content changes layout
+  setTimeout(resizeCanvas, 50);
+}
+
+// ── Canvas setup ──
+const canvas = document.getElementById('mol-canvas');
+const ctx    = canvas.getContext('2d');
+
+function resizeCanvas() {
+  const wrap = document.getElementById('canvas-wrap');
+  const w = wrap.clientWidth, h = wrap.clientHeight;
+  if (w < 1 || h < 1) return; // panel hidden — skip
+  canvas.width  = w;
+  canvas.height = h;
+  render();
+}
+
+// ── Coordinate helpers ──
+function toWorld(ex, ey) {
+  const r = canvas.getBoundingClientRect();
+  return { x: (ex - r.left - panX) / scale, y: (ey - r.top - panY) / scale };
+}
+function toScreen(wx, wy) {
+  return { x: wx * scale + panX, y: wy * scale + panY };
+}
+
+// ── Hit testing ──
+const HIT_R_BONUS = 6;
+function atomAt(wx, wy) {
+  for (let i = atoms.length - 1; i >= 0; i--) {
+    const a = atoms[i];
+    const r = (ELEMENTS[a.s]?.radius || 20) + HIT_R_BONUS;
+    if ((wx - a.x)**2 + (wy - a.y)**2 <= r*r) return a;
+  }
+  return null;
+}
+function bondAt(wx, wy) {
+  for (const b of bonds) {
+    const a1 = atoms.find(a => a.id === b.from);
+    const a2 = atoms.find(a => a.id === b.to);
+    if (!a1 || !a2) continue;
+    if (ptSegDist(wx, wy, a1.x, a1.y, a2.x, a2.y) < 8) return b;
+  }
+  return null;
+}
+function ptSegDist(px, py, ax, ay, bx, by) {
+  const dx = bx-ax, dy = by-ay, len2 = dx*dx+dy*dy;
+  if (len2 === 0) return Math.hypot(px-ax, py-ay);
+  const t = Math.max(0, Math.min(1, ((px-ax)*dx+(py-ay)*dy)/len2));
+  return Math.hypot(px-(ax+t*dx), py-(ay+t*dy));
+}
+
+// ── Molecule operations ──
+function addAtom(wx, wy, sym) {
+  const a = { id: nextId++, s: sym, x: wx, y: wy };
+  atoms.push(a);
+  return a;
+}
+function addBond(fromId, toId, order=1) {
+  const existing = bonds.find(b =>
+    (b.from===fromId && b.to===toId) || (b.from===toId && b.to===fromId));
+  if (existing) { existing.order = Math.min(existing.order + 1, 3); return existing; }
+  const b = { id: nextId++, from: fromId, to: toId, order };
+  bonds.push(b);
+  return b;
+}
+function removeAtom(id) {
+  atoms = atoms.filter(a => a.id !== id);
+  bonds = bonds.filter(b => b.from !== id && b.to !== id);
+}
+function removeBond(id) { bonds = bonds.filter(b => b.id !== id); }
+
+function cycleBondOrder(id) {
+  const b = bonds.find(b => b.id === id);
+  if (!b) return;
+  if (b.order >= 3) removeBond(id);
+  else b.order++;
+}
+
+function hillFormula() {
+  if (!atoms.length) return '';
+  const cnt = {};
+  for (const a of atoms) cnt[a.s] = (cnt[a.s]||0) + 1;
+  const parts = [];
+  if (cnt.C) { parts.push('C' + (cnt.C>1?cnt.C:'')); delete cnt.C; }
+  if (cnt.H) { parts.push('H' + (cnt.H>1?cnt.H:'')); delete cnt.H; }
+  for (const el of Object.keys(cnt).sort()) parts.push(el+(cnt[el]>1?cnt[el]:''));
+  return parts.join('');
+}
+function getBondSum(id) {
+  return bonds.reduce((s,b) => s + (b.from===id||b.to===id ? b.o || b.order : 0), 0);
+}
+function getIssues() {
+  return atoms.filter(a => {
+    const used = bonds.reduce((s,b)=>(b.from===a.id||b.to===a.id)?s+(b.order||1):s,0);
+    return used > (ELEMENTS[a.s]?.maxV ?? 4);
+  }).map(a => {
+    const used = bonds.reduce((s,b)=>(b.from===a.id||b.to===a.id)?s+(b.order||1):s,0);
+    return { id:a.id, s:a.s, used, max: ELEMENTS[a.s]?.maxV??4 };
+  });
+}
+
+// ── Live molecular stats ──
+const ATOMIC_MASS = {
+  H:1.008, C:12.011, N:14.007, O:15.999, P:30.974, S:32.06,
+  Cl:35.45, Na:22.990, Ca:40.078, Mg:24.305, Fe:55.845,
+};
+
+function calcMolStats() {
+  const wrap = document.getElementById('bp-mol-stats');
+  if (!atoms.length) { wrap.style.display = 'none'; return; }
+  wrap.style.display = '';
+
+  const cnt = {};
+  for (const a of atoms) cnt[a.s] = (cnt[a.s]||0) + 1;
+
+  // Molar weight
+  let mw = 0;
+  for (const [el, n] of Object.entries(cnt)) mw += (ATOMIC_MASS[el]||0) * n;
+
+  // DBE: (2C + 2 + N + P − H − Cl) / 2
+  const C = cnt.C||0, H = cnt.H||0, Nv = cnt.N||0, Pv = cnt.P||0, Clv = cnt.Cl||0;
+  const dbe = (C || H) ? (2*C + 2 + Nv + Pv - H - Clv) / 2 : null;
+
+  const fg       = _detectFG();
+  const molClass = _molClass(cnt, dbe, fg);
+  const polarity = _polarity(cnt, fg);
+
+  const chips = [];
+  chips.push(_chip('М.М. г/моль', mw.toFixed(2), 'cyan'));
+  if (dbe !== null && Number.isFinite(dbe)) {
+    const cls = dbe < 0 ? 'bad' : dbe === 0 ? 'good' : dbe >= 4 ? 'violet' : 'warn';
+    chips.push(_chip('DBE', Number.isInteger(dbe*2) && dbe === Math.round(dbe) ? dbe : dbe.toFixed(1), cls));
+  }
+  chips.push(_chip('Полярность', polarity.label, polarity.cls));
+  chips.push(_chip('Атомов', atoms.length, ''));
+  if (molClass) chips.push(
+    `<div class="bp-stat-chip" style="grid-column:1/-1"><span class="bp-stat-lbl">Класс</span>` +
+    `<span class="bp-stat-val violet">${molClass}</span></div>`
+  );
+  document.getElementById('bp-stats-grid').innerHTML = chips.join('');
+
+  const fgWrap = document.getElementById('bp-fg-wrap');
+  if (fg.length) {
+    fgWrap.innerHTML = fg.map(g =>
+      `<span class="bp-fg-tag" style="color:${g.color};border-color:${g.color}40">${g.label}</span>`
+    ).join('');
+    fgWrap.style.display = 'flex';
+  } else {
+    fgWrap.innerHTML = ''; fgWrap.style.display = 'none';
+  }
+}
+
+function _chip(label, val, cls) {
+  return `<div class="bp-stat-chip"><span class="bp-stat-lbl">${label}</span>` +
+         `<span class="bp-stat-val ${cls}">${val}</span></div>`;
+}
+
+function _detectFG() {
+  const groups = [];
+  const bondsOf = id => bonds.filter(b => b.from===id || b.to===id);
+  const othr    = (b, id) => b.from===id ? b.to : b.from;
+  const sym     = id => atoms.find(a=>a.id===id)?.s;
+  const used    = new Set();
+
+  // −COOH: C with C=O and C-O-H
+  for (const a of atoms) {
+    if (a.s !== 'C') continue;
+    const myB = bondsOf(a.id);
+    const hasDblO = myB.some(b => b.order===2 && sym(othr(b,a.id))==='O');
+    const sglOs   = myB.filter(b => b.order===1 && sym(othr(b,a.id))==='O');
+    if (hasDblO && sglOs.length) {
+      const oId = othr(sglOs[0], a.id);
+      if (bondsOf(oId).some(b => sym(othr(b,oId))==='H')) {
+        groups.push({ label:'−COOH', color:'#f87171' }); used.add(a.id); continue;
+      }
+    }
+    // C=O (aldehyde or ketone)
+    if (hasDblO && !used.has(a.id)) {
+      const hN = myB.some(b => sym(othr(b,a.id))==='H');
+      const cN = myB.filter(b => sym(othr(b,a.id))==='C').length;
+      if (hN)       groups.push({ label:'−CHO',        color:'#fb923c' });
+      else if(cN>=2)groups.push({ label:'C=O (кетон)', color:'#fb923c' });
+      else           groups.push({ label:'C=O',         color:'#fb923c' });
+      used.add(a.id);
+    }
+  }
+
+  // −OH
+  const ohCount = atoms.filter(a => a.s==='O' &&
+    bondsOf(a.id).some(b => b.order===1 && sym(othr(b,a.id))==='H')).length;
+  if (ohCount) groups.push({ label: ohCount>1 ? `−OH ×${ohCount}` : '−OH', color:'#60a5fa' });
+
+  // −NH₂ / −NH
+  for (const a of atoms) {
+    if (a.s !== 'N') continue;
+    const hCnt = bondsOf(a.id).filter(b => sym(othr(b,a.id))==='H').length;
+    if (hCnt >= 2) groups.push({ label:'−NH₂', color:'#34d399' });
+    else if (hCnt === 1) groups.push({ label:'−NH', color:'#34d399' });
+  }
+
+  // −SH
+  if (atoms.some(a => a.s==='S' && bondsOf(a.id).some(b => sym(othr(b,a.id))==='H')))
+    groups.push({ label:'−SH', color:'#fbbf24' });
+
+  // C=C
+  const enes = bonds.filter(b => b.order===2 && sym(b.from)==='C' && sym(b.to)==='C');
+  if (enes.length) groups.push({ label: enes.length>1 ? `C=C ×${enes.length}` : 'C=C', color:'#a78bfa' });
+
+  // C≡C
+  if (bonds.some(b => b.order===3 && sym(b.from)==='C' && sym(b.to)==='C'))
+    groups.push({ label:'C≡C', color:'#e879f9' });
+
+  // Aromatic (≥3 C=C bonds in C skeleton)
+  const cIds = new Set(atoms.filter(a=>a.s==='C').map(a=>a.id));
+  if (bonds.filter(b => b.order===2 && cIds.has(b.from) && cIds.has(b.to)).length >= 3)
+    groups.push({ label:'Арен', color:'#06D6E0' });
+
+  // −Cl
+  const clCnt = atoms.filter(a=>a.s==='Cl').length;
+  if (clCnt) groups.push({ label: clCnt>1 ? `−Cl ×${clCnt}` : '−Cl', color:'#4ade80' });
+
+  // Phosphate
+  for (const a of atoms) {
+    if (a.s!=='P') continue;
+    if (bondsOf(a.id).filter(b=>sym(othr(b,a.id))==='O').length >= 2) {
+      groups.push({ label:'Фосфат', color:'#f97316' }); break;
+    }
+  }
+  return groups;
+}
+
+function _molClass(cnt, dbe, fg) {
+  const has = label => fg.some(g => g.label.startsWith(label));
+  const onlyCH = Object.keys(cnt).every(el => el==='C'||el==='H');
+  if (has('Арен'))          return 'Ароматическое';
+  if (has('−COOH'))         return 'Карбоновая кислота';
+  if (has('−CHO'))          return 'Альдегид';
+  if (has('C=O (кетон)'))   return 'Кетон';
+  if (has('−OH') && !cnt.N) return 'Спирт';
+  if (has('−NH'))           return 'Амин';
+  if (has('−SH'))           return 'Тиол';
+  if (has('Фосфат'))        return 'Фосфорное соединение';
+  if (has('C≡C'))           return 'Алкин';
+  if (has('C=C'))           return 'Алкен';
+  if (dbe === 0 && onlyCH)  return 'Алкан';
+  if (dbe === 1 && onlyCH)  return 'Циклоалкан';
+  return null;
+}
+
+function _polarity(cnt, fg) {
+  if (cnt.Na||cnt.Ca||cnt.Mg||cnt.Fe) return { label:'Ионная',           cls:'bad'  };
+  if (fg.some(g=>g.label.startsWith('−COOH')) || (cnt.O&&cnt.N))
+                                        return { label:'Сильно полярная', cls:'bad'  };
+  if (cnt.O||cnt.N)                     return { label:'Полярная',        cls:'warn' };
+  if (cnt.Cl||cnt.S)                    return { label:'Слабо полярная',  cls:'warn' };
+  return                                       { label:'Неполярная',      cls:'good' };
+}
+
+// ── Rendering ──
+function render() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+  // Background grid
+  ctx.save();
+  const gs = 40 * scale;
+  const ox = ((panX % gs) + gs) % gs;
+  const oy = ((panY % gs) + gs) % gs;
+  ctx.strokeStyle = 'rgba(255,255,255,0.035)';
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  for (let x = ox; x < canvas.width;  x += gs) { ctx.moveTo(x,0); ctx.lineTo(x,canvas.height); }
+  for (let y = oy; y < canvas.height; y += gs) { ctx.moveTo(0,y); ctx.lineTo(canvas.width,y); }
+  ctx.stroke();
+  ctx.restore();
+
+  ctx.save();
+  ctx.translate(panX, panY);
+  ctx.scale(scale, scale);
+
+  // Bonds
+  for (const b of bonds) renderBond(b, b.id === hoveredBondId);
+
+  // Bond preview line
+  if (bondFromId !== null) {
+    const src = atoms.find(a => a.id === bondFromId);
+    if (src) {
+      ctx.save();
+      ctx.setLineDash([6, 4]);
+      ctx.strokeStyle = '#9B5DE5';
+      ctx.lineWidth = 2;
+      ctx.beginPath();
+      ctx.moveTo(src.x, src.y);
+      ctx.lineTo(bondCurX, bondCurY);
+      ctx.stroke();
+      ctx.setLineDash([]);
+      ctx.restore();
+    }
+  }
+
+  // Atoms
+  for (const a of atoms) renderAtom(a, a.id === hoveredAtomId);
+
+  ctx.restore();
+}
+
+function renderBond(b, hovered) {
+  const a1 = atoms.find(a => a.id === b.from);
+  const a2 = atoms.find(a => a.id === b.to);
+  if (!a1 || !a2) return;
+
+  const dx = a2.x - a1.x, dy = a2.y - a1.y;
+  const len = Math.hypot(dx, dy);
+  if (len < 1) return;
+  const nx = dx/len, ny = dy/len;
+  const px = -ny, py = nx;
+  const r1 = ELEMENTS[a1.s]?.radius || 20;
+  const r2 = ELEMENTS[a2.s]?.radius || 20;
+  const x1 = a1.x + nx*r1, y1 = a1.y + ny*r1;
+  const x2 = a2.x - nx*r2, y2 = a2.y - ny*r2;
+
+  ctx.strokeStyle = hovered ? '#c084fc' : '#6b7280';
+  ctx.lineWidth = 2.5;
+  ctx.lineCap = 'round';
+
+  const drawLine = (ox, oy) => {
+    ctx.beginPath();
+    ctx.moveTo(x1+px*ox, y1+py*oy);
+    ctx.lineTo(x2+px*ox, y2+py*oy);
+    ctx.stroke();
+  };
+
+  if (b.order === 1)      { drawLine(0,0); }
+  else if (b.order === 2) { drawLine(-4,0); drawLine(4,0); }
+  else                    { drawLine(0,0); drawLine(-5,0); drawLine(5,0); }
+}
+
+function renderAtom(a, hovered) {
+  const el = ELEMENTS[a.s] || { color:'#888', text:'#fff', radius:20 };
+  const r  = el.radius;
+  const bondSum = bonds.reduce((s,b)=>(b.from===a.id||b.to===a.id)?s+(b.order||1):s,0);
+  const remaining = (el.maxV||1) - bondSum;
+  const overloaded = remaining < 0;
+
+  ctx.save();
+  if (hovered) { ctx.shadowBlur = 18; ctx.shadowColor = overloaded ? '#ef4444' : '#9B5DE5'; }
+
+  // Circle
+  ctx.beginPath();
+  ctx.arc(a.x, a.y, r, 0, Math.PI*2);
+  ctx.fillStyle = el.color;
+  ctx.fill();
+  ctx.strokeStyle = overloaded ? '#ef4444' : (hovered ? '#c084fc' : lighten(el.color));
+  ctx.lineWidth = hovered ? 2.5 : 1.8;
+  ctx.stroke();
+  ctx.shadowBlur = 0;
+
+  // Symbol
+  ctx.fillStyle = el.text || '#fff';
+  ctx.font = `bold ${r < 20 ? 11 : 13}px Manrope, sans-serif`;
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'middle';
+  ctx.fillText(a.s, a.x, a.y);
+
+  // Remaining valency badge
+  if (remaining > 0 && atoms.length > 1) {
+    ctx.fillStyle = '#4ade80';
+    ctx.font = '9px Manrope, sans-serif';
+    ctx.fillText(remaining, a.x + r - 2, a.y - r + 4);
+  } else if (overloaded) {
+    ctx.fillStyle = '#ef4444';
+    ctx.font = 'bold 9px Manrope, sans-serif';
+    ctx.fillText('!', a.x + r - 2, a.y - r + 4);
+  }
+
+  // Free valence stubs — dashed radial lines showing open bonding slots
+  if (remaining > 0 && !overloaded) {
+    const myBonds = bonds.filter(b => b.from===a.id || b.to===a.id);
+    const taken = myBonds.map(b => {
+      const oth = atoms.find(x => x.id === (b.from===a.id ? b.to : b.from));
+      return oth ? Math.atan2(oth.y - a.y, oth.x - a.x) : null;
+    }).filter(ang => ang !== null);
+
+    ctx.save();
+    ctx.strokeStyle = 'rgba(74,222,128,0.5)';
+    ctx.lineWidth = 1.5;
+    ctx.setLineDash([3, 3]);
+    ctx.lineCap = 'round';
+    const sLen = r * 0.6;
+    const N2P = x => ((x % (Math.PI*2)) + Math.PI*2) % (Math.PI*2);
+
+    let stubAngles;
+    if (!taken.length) {
+      stubAngles = Array.from({length: remaining}, (_, i) =>
+        -Math.PI/2 + (i / remaining) * Math.PI * 2);
+    } else {
+      // Find gaps between bond directions, place stubs in the largest gaps
+      const sorted = taken.map(N2P).sort((a, b) => a - b);
+      const nB = sorted.length;
+      const gaps = sorted.map((s, i) => {
+        const e = sorted[(i+1) % nB];
+        const size = (e > s) ? e - s : e - s + Math.PI * 2;
+        return { start: s, size };
+      }).sort((a, b) => b.size - a.size);
+
+      stubAngles = [];
+      let need = remaining;
+      for (const g of gaps) {
+        if (!need) break;
+        const k = Math.min(need, Math.max(1, Math.floor(g.size / (Math.PI / 2))));
+        for (let s = 0; s < k; s++) stubAngles.push(g.start + g.size * (s+1) / (k+1));
+        need -= k;
+      }
+    }
+
+    for (const angle of stubAngles) {
+      const ca = Math.cos(angle), sa = Math.sin(angle);
+      ctx.beginPath();
+      ctx.moveTo(a.x + ca*(r+1), a.y + sa*(r+1));
+      ctx.lineTo(a.x + ca*(r+1+sLen), a.y + sa*(r+1+sLen));
+      ctx.stroke();
+    }
+    ctx.setLineDash([]);
+    ctx.restore();
+  }
+
+  ctx.restore();
+}
+
+function lighten(hex) {
+  try {
+    const n = parseInt(hex.slice(1), 16);
+    const r = Math.min(255, ((n>>16)&0xff) + 50);
+    const g = Math.min(255, ((n>>8)&0xff) + 50);
+    const b = Math.min(255, (n&0xff) + 50);
+    return `rgb(${r},${g},${b})`;
+  } catch { return '#aaa'; }
+}
+
+// ── Mouse events ──
+function getEvtPos(e) {
+  if (e.touches) return { clientX: e.touches[0].clientX, clientY: e.touches[0].clientY };
+  return { clientX: e.clientX, clientY: e.clientY };
+}
+
+canvas.addEventListener('mousedown', onMD);
+canvas.addEventListener('mousemove', onMM);
+canvas.addEventListener('mouseup',   onMU);
+canvas.addEventListener('mouseleave', () => {
+  if (_is3D) { _3dDrag = false; return; }
+  if (!isDragging && !isPanning) { hoveredAtomId=null; hoveredBondId=null; render(); }
+});
+canvas.addEventListener('wheel', e => {
+  e.preventDefault();
+  if (_is3D) { scale = Math.max(0.2, Math.min(4, scale * (e.deltaY < 0 ? 1.12 : 0.9))); return; }
+  zoomAt(e.clientX, e.clientY, e.deltaY < 0 ? 1.12 : 0.9);
+}, { passive: false });
+canvas.addEventListener('contextmenu', e => e.preventDefault());
+
+/* ── Touch support (mobile) ── */
+function touchToMouse(type, e) {
+  e.preventDefault();
+  const t = e.touches[0] || e.changedTouches[0];
+  if (!t) return;
+  const me = new MouseEvent(type, {
+    clientX: t.clientX, clientY: t.clientY,
+    button: 0, buttons: 1,
+  });
+  canvas.dispatchEvent(me);
+}
+canvas.addEventListener('touchstart',  e => touchToMouse('mousedown', e), { passive: false });
+canvas.addEventListener('touchmove',   e => touchToMouse('mousemove', e), { passive: false });
+canvas.addEventListener('touchend',    e => touchToMouse('mouseup',   e), { passive: false });
+canvas.addEventListener('touchcancel', e => touchToMouse('mouseup',   e), { passive: false });
+
+function onMD(e) {
+  // 3D mode: drag to rotate
+  if (_is3D) {
+    _3dDrag = true; _3dSpin = false;
+    _3dVelX = 0; _3dVelY = 0;
+    _3dLX = e.clientX; _3dLY = e.clientY;
+    canvas.style.cursor = 'grabbing';
+    return;
+  }
+  // Read-only for identify challenges (canvas shows the mystery molecule)
+  const activeType = activeChalId ? (_challenges.find(c=>c.id===activeChalId)?.type||'build') : 'build';
+  if (activeType !== 'build' && activeChalId) {
+    if (e.button === 1 || (e.button === 0 && e.altKey)) {
+      isPanning = true; panSX = e.clientX - panX; panSY = e.clientY - panY;
+    }
+    return;
+  }
+  if (e.button === 1 || (e.button === 0 && e.altKey)) {
+    isPanning = true;
+    panSX = e.clientX - panX; panSY = e.clientY - panY;
+    return;
+  }
+  if (e.button === 2) {
+    // Right-click <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> delete
+    const w = toWorld(e.clientX, e.clientY);
+    const a = atomAt(w.x, w.y);
+    if (a) { pushHistory(); removeAtom(a.id); updateInfo(); render(); return; }
+    const b = bondAt(w.x, w.y);
+    if (b) { pushHistory(); removeBond(b.id); updateInfo(); render(); return; }
+    return;
+  }
+  if (e.button !== 0) return;
+
+  const w = toWorld(e.clientX, e.clientY);
+  mouseDownW = w;
+
+  if (tool === 'add') {
+    const a = atomAt(w.x, w.y);
+    if (a) {
+      bondFromId = a.id; bondCurX = w.x; bondCurY = w.y;
+    } else {
+      pushHistory();
+      addAtom(w.x, w.y, selEl);
+      updateInfo(); render();
+    }
+  } else if (tool === 'move') {
+    const a = atomAt(w.x, w.y);
+    if (a) {
+      dragId = a.id; dragOffX = a.x - w.x; dragOffY = a.y - w.y; isDragging = true;
+    } else {
+      isPanning = true; panSX = e.clientX - panX; panSY = e.clientY - panY;
+    }
+  } else if (tool === 'erase') {
+    const a = atomAt(w.x, w.y);
+    if (a) { pushHistory(); removeAtom(a.id); updateInfo(); render(); return; }
+    const b = bondAt(w.x, w.y);
+    if (b) { pushHistory(); removeBond(b.id); updateInfo(); render(); return; }
+  }
+}
+
+function onMM(e) {
+  if (_is3D) {
+    if (_3dDrag) {
+      const dx = e.clientX - _3dLX;
+      const dy = e.clientY - _3dLY;
+      // EMA velocity for smooth inertia
+      _3dVelY = _3dVelY * 0.5 + dx * 0.009 * 0.5;
+      _3dVelX = _3dVelX * 0.5 + dy * 0.009 * 0.5;
+      _3dRotY += dx * 0.009;
+      _3dRotX += dy * 0.009;
+      _3dLX = e.clientX; _3dLY = e.clientY;
+    }
+    canvas.style.cursor = _3dDrag ? 'grabbing' : 'grab';
+    return;
+  }
+  const w = toWorld(e.clientX, e.clientY);
+
+  if (isPanning) { panX = e.clientX - panSX; panY = e.clientY - panSY; render(); return; }
+
+  if (bondFromId !== null) {
+    bondCurX = w.x; bondCurY = w.y;
+    hoveredAtomId = atomAt(w.x, w.y)?.id ?? null;
+    updateCursor(e);
+    render(); return;
+  }
+
+  if (isDragging && dragId !== null) {
+    const a = atoms.find(a => a.id === dragId);
+    if (a) { a.x = w.x + dragOffX; a.y = w.y + dragOffY; }
+    render(); return;
+  }
+
+  const ha = atomAt(w.x, w.y);
+  hoveredAtomId = ha?.id ?? null;
+  hoveredBondId = ha ? null : (bondAt(w.x, w.y)?.id ?? null);
+  updateCursor(e);
+  render();
+}
+
+function onMU(e) {
+  if (_is3D) {
+    if (_3dDrag) {
+      _3dDrag = false;
+      canvas.style.cursor = 'grab';
+      // let inertia decay, then resume auto-spin
+      clearTimeout(_3dSpinTmo);
+      _3dSpinTmo = setTimeout(() => { _3dSpin = true; }, 3000);
+    }
+    return;
+  }
+  const w = toWorld(e.clientX, e.clientY);
+
+  if (isPanning) { isPanning = false; return; }
+
+  if (bondFromId !== null) {
+    const src = bondFromId;
+    bondFromId = null;
+    const target = atomAt(w.x, w.y);
+    if (target && target.id !== src) {
+      pushHistory();
+      addBond(src, target.id);
+    } else if (!target && mouseDownW) {
+      const dx = w.x - mouseDownW.x, dy = w.y - mouseDownW.y;
+      if (Math.hypot(dx, dy) > 10) {
+        pushHistory();
+        const na = addAtom(w.x, w.y, selEl);
+        addBond(src, na.id);
+      }
+    }
+    updateInfo(); render(); return;
+  }
+
+  if (isDragging) { isDragging = false; dragId = null; updateInfo(); render(); return; }
+
+  // Click on bond <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> cycle order
+  if (mouseDownW) {
+    const moved = Math.hypot(w.x - mouseDownW.x, w.y - mouseDownW.y);
+    if (moved < 5) {
+      const b = bondAt(w.x, w.y);
+      if (b) { pushHistory(); cycleBondOrder(b.id); updateInfo(); render(); }
+    }
+  }
+}
+
+function updateCursor(e) {
+  const w = toWorld(e.clientX, e.clientY);
+  if (tool === 'erase') { canvas.style.cursor = 'cell'; return; }
+  if (tool === 'move') {
+    canvas.style.cursor = atomAt(w.x, w.y) ? 'grab' : 'default';
+    return;
+  }
+  if (bondFromId !== null) { canvas.style.cursor = 'crosshair'; return; }
+  canvas.style.cursor = atomAt(w.x, w.y) ? 'crosshair' : 'cell';
+}
+
+// ── Zoom ──
+function zoomBy(factor) { zoomAt(canvas.width/2, canvas.height/2, factor); }
+function zoomAt(sx, sy, factor) {
+  const wx = (sx - panX) / scale, wy = (sy - panY) / scale;
+  scale = Math.max(0.2, Math.min(4, scale * factor));
+  panX = sx - wx * scale; panY = sy - wy * scale;
+  render();
+}
+function centerView() {
+  if (!atoms.length) { panX = canvas.width/2; panY = canvas.height/2; scale = 1; render(); return; }
+  let minX=Infinity,minY=Infinity,maxX=-Infinity,maxY=-Infinity;
+  for (const a of atoms) { minX=Math.min(minX,a.x); minY=Math.min(minY,a.y); maxX=Math.max(maxX,a.x); maxY=Math.max(maxY,a.y); }
+  const pad = 80;
+  scale = Math.min(4, Math.min((canvas.width-pad*2)/Math.max(maxX-minX,1), (canvas.height-pad*2)/Math.max(maxY-minY,1)));
+  panX = canvas.width/2  - ((minX+maxX)/2)*scale;
+  panY = canvas.height/2 - ((minY+maxY)/2)*scale;
+  render();
+}
+
+// ── UI ──
+function setTool(t) {
+  tool = t;
+  ['add','move','erase'].forEach(id => document.getElementById('tool-'+id).classList.toggle('active', id===t));
+  canvas.style.cursor = t==='erase' ? 'cell' : 'crosshair';
+}
+
+function clearAll() {
+  pushHistory();
+  atoms = []; bonds = []; nextId = 1;
+  bondFromId = null; hoveredAtomId = null; hoveredBondId = null;
+  updateInfo(); render();
+}
+
+function switchPanel(name) {
+  document.querySelectorAll('.panel-tab').forEach((b,i) => b.classList.toggle('active', ['editor','challenges','saved'][i]===name));
+  document.querySelectorAll('.panel-pane').forEach(p => p.classList.remove('active'));
+  document.getElementById('pane-'+name).classList.add('active');
+  if (name==='challenges') loadChallenges();
+  if (name==='saved') loadSaved();
+}
+
+function updateInfo() {
+  updateAtomCounts();
+  const formula = hillFormula();
+  const fEl = document.getElementById('bp-formula');
+  fEl.textContent = formula || '—';
+  fEl.classList.toggle('empty', !formula);
+
+  document.getElementById('bp-save-btn').disabled = !formula;
+
+  // Issues
+  const issues = getIssues();
+  const issDiv = document.getElementById('bp-issues');
+  if (issues.length) {
+    issDiv.innerHTML = issues.map(i => `<div class="bp-issue"><svg class="ic" viewBox="0 0 24 24"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg> ${i.s}: ${i.used}/${i.max} связей</div>`).join('');
+  } else if (formula) {
+    issDiv.innerHTML = '<div class="bp-ok"><svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg> Валентность в норме</div>';
+  } else {
+    issDiv.innerHTML = '';
+  }
+
+  // Lookup known molecule
+  const info = document.getElementById('bp-mol-info');
+  if (formula && !issues.length) {
+    LS.biochemValidate(
+      atoms.map(a=>({id:a.id,s:a.s})),
+      bonds.map(b=>({f:b.from,t:b.to,o:b.order}))
+    ).then(r => {
+      if (r.known) {
+        info.style.display = '';
+        document.getElementById('bp-mol-name').textContent = r.known.name_ru;
+        document.getElementById('bp-mol-desc').textContent = r.known.description;
+      } else { info.style.display = 'none'; }
+    }).catch(() => { info.style.display = 'none'; });
+  } else { info.style.display = 'none'; }
+
+  calcMolStats();
+}
+
+// ── Build element palette ──
+const EL_SHORTCUTS = { H:'H', C:'C', N:'N', O:'O', P:'P', S:'S' };
+for (const [sym, el] of Object.entries(ELEMENTS)) {
+  const btn = document.createElement('button');
+  btn.className = 'el-btn' + (sym==='C' ? ' active' : '');
+  btn.id = 'el-btn-' + sym;
+  const shortcut = EL_SHORTCUTS[sym] ? ` [${sym}]` : '';
+  btn.title = el.name + ' (' + sym + ')' + shortcut;
+  btn.innerHTML = `${sym}<span class="el-cnt" id="el-cnt-${sym}"></span>`;
+  btn.style.background = el.color;
+  btn.style.color = el.text;
+  btn.style.borderColor = sym==='C' ? '#fff' : 'transparent';
+  btn.onclick = () => selectElement(sym);
+  document.getElementById('el-palette').appendChild(btn);
+}
+
+function selectElement(sym) {
+  if (!ELEMENTS[sym]) return;
+  selEl = sym;
+  document.querySelectorAll('.el-btn').forEach(b => { b.classList.remove('active'); b.style.borderColor = 'transparent'; });
+  const btn = document.getElementById('el-btn-' + sym);
+  if (btn) { btn.classList.add('active'); btn.style.borderColor = '#fff'; }
+  setTool('add');
+}
+
+function updateAtomCounts() {
+  const cnt = {};
+  for (const a of atoms) cnt[a.s] = (cnt[a.s]||0) + 1;
+  for (const sym of Object.keys(ELEMENTS)) {
+    const badge = document.getElementById('el-cnt-' + sym);
+    const btn   = document.getElementById('el-btn-' + sym);
+    if (!badge || !btn) continue;
+    const n = cnt[sym] || 0;
+    badge.textContent = n > 0 ? n : '';
+    btn.classList.toggle('has-cnt', n > 0);
+  }
+}
+
+// ── Save ──
+async function saveCurrentMolecule() {
+  if (!atoms.length) return;
+  const issues = getIssues();
+  if (issues.length) { LS.toast('Сначала исправь ошибки валентности', 'error'); return; }
+  const name = hillFormula();
+  try {
+    await LS.biochemSave(
+      atoms.map(a=>({id:a.id,s:a.s,x:Math.round(a.x),y:Math.round(a.y)})),
+      bonds.map(b=>({f:b.from,t:b.to,o:b.order})),
+      name
+    );
+    LS.toast('Молекула сохранена!', 'success');
+  } catch(e) { LS.toast('Ошибка: '+e.message, 'error'); }
+}
+
+// ── Library ──
+async function loadFromLibrary() {
+  if (!_libAll.length) _libAll = await LS.biochemGetMolecules();
+  document.getElementById('lib-modal').style.display = '';
+  filterLibrary();
+}
+function closeLibModal() { document.getElementById('lib-modal').style.display = 'none'; }
+function filterLibrary() {
+  const q   = (document.getElementById('lib-search').value||'').toLowerCase();
+  const cat = document.getElementById('lib-cat').value;
+  const filtered = _libAll.filter(m =>
+    (!q || m.name_ru.toLowerCase().includes(q) || m.formula.toLowerCase().includes(q)) &&
+    (!cat || m.category===cat)
+  );
+  const grid = document.getElementById('lib-grid');
+  if (!filtered.length) { grid.innerHTML = '<div style="color:#666;font-size:0.82rem;grid-column:1/-1">Ничего не найдено</div>'; return; }
+  grid.innerHTML = filtered.map(m => `
+    <div onclick="loadMolecule(${m.id})" style="padding:10px;border-radius:10px;background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.08);cursor:pointer;transition:all .15s"
+         onmouseover="this.style.borderColor='rgba(155,93,229,.4)'" onmouseout="this.style.borderColor='rgba(255,255,255,.08)'">
+      <div style="font-family:monospace;font-size:0.9rem;color:#06D6E0;font-weight:700">${m.formula}</div>
+      <div style="font-size:0.74rem;color:#bbb;margin-top:2px">${m.name_ru}</div>
+      <div style="font-size:0.68rem;color:#555;margin-top:2px">${['','<svg class="ic" viewBox="0 0 24 24"><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>','<svg class="ic" viewBox="0 0 24 24"><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><svg class="ic" viewBox="0 0 24 24"><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>','<svg class="ic" viewBox="0 0 24 24"><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><svg class="ic" viewBox="0 0 24 24"><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><svg class="ic" viewBox="0 0 24 24"><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>'][m.difficulty]||''}</div>
+    </div>`).join('');
+}
+async function loadMolecule(id) {
+  try {
+    const m = await LS.biochemGetMolecule(id);
+    pushHistory();
+    atoms = (m.atoms_json||[]).map(a=>({...a, id: a.id}));
+    bonds = (m.bonds_json||[]).map(b=>({id:nextId++, from:b.f, to:b.t, order:b.o}));
+    nextId = Math.max(nextId, ...atoms.map(a=>a.id), 0) + 1;
+    closeLibModal();
+    centerView();
+    updateInfo();
+  } catch(e) { LS.toast('Ошибка загрузки: '+e.message,'error'); }
+}
+
+// ── Challenges ──
+let _challenges = [];
+let _chalFilter  = '';
+
+function setChalFilter(btn, type) {
+  _chalFilter = type;
+  document.querySelectorAll('.chal-type-chip').forEach(b => b.classList.toggle('active', b.dataset.ctype === type));
+  renderChalList();
+}
+
+async function loadChallenges() {
+  try {
+    _challenges = await LS.biochemGetChallenges();
+    updateChalProgress();
+    renderChalList();
+  } catch { document.getElementById('challenges-list').innerHTML = '<div style="color:#666">Ошибка загрузки</div>'; }
+}
+
+function updateChalProgress() {
+  const done  = _challenges.filter(c => c.done).length;
+  const total = _challenges.length;
+  const xp    = _challenges.filter(c => c.done).reduce((s,c) => s + c.xp_reward, 0);
+  document.getElementById('chal-done-n').textContent  = done;
+  document.getElementById('chal-total-n').textContent = total;
+  document.getElementById('chal-xp-total').textContent = xp + ' XP';
+  document.getElementById('chal-progress-fill').style.width = total ? (done/total*100)+'%' : '0%';
+}
+
+function renderChalList() {
+  const list = document.getElementById('challenges-list');
+  const TYPE_ICON = { build:'<svg class="ic" viewBox="0 0 24 24"><path d="M9 3h6m-4.5 0v5.5l-4 7.5a1 1 0 0 0 .9 1.5h8.2a1 1 0 0 0 .9-1.5l-4-7.5V3"/></svg>', identify:'<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>', formula:'<svg class="ic" viewBox="0 0 24 24"><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.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>', balance:'<svg class="ic" viewBox="0 0 24 24"><path d="m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1z"/><path d="m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1z"/><path d="M7 21h10M12 3v18M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2"/></svg>', match:'<svg class="ic" viewBox="0 0 24 24"><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>', classify:'<svg class="ic" viewBox="0 0 24 24"><path d="M12 2H2v10l9.29 9.29c.94.94 2.48.94 3.42 0l6.58-6.58c.94-.94.94-2.48 0-3.42L12 2Z"/><path d="M7 7h.01"/></svg>', complete:'<svg class="ic" viewBox="0 0 24 24"><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>' };
+  const DIFF_COLOR = ['','#4ade80','#facc15','#f97316'];
+  const filtered = _chalFilter ? _challenges.filter(c => (c.type||'build') === _chalFilter) : _challenges;
+  if (!filtered.length) { list.innerHTML = '<div style="color:#555;font-size:0.78rem;padding:8px 0">Нет заданий</div>'; return; }
+  list.innerHTML = filtered.map(c => `
+    <div class="chal-item ${c.done?'done':''} ${activeChalId===c.id?'active-chal':''}" onclick="startChallenge(${c.id})">
+      <div class="chal-icon" style="background:rgba(155,93,229,.15)">${c.done ? '<svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>' : (TYPE_ICON[c.type||'build']||'<svg class="ic" viewBox="0 0 24 24"><path d="M9 3h6m-4.5 0v5.5l-4 7.5a1 1 0 0 0 .9 1.5h8.2a1 1 0 0 0 .9-1.5l-4-7.5V3"/></svg>')}</div>
+      <div class="chal-info">
+        <div class="chal-title">${c.title}</div>
+        <div class="chal-xp">+${c.xp_reward} XP</div>
+      </div>
+      <div class="diff-dot" style="background:${DIFF_COLOR[c.difficulty]||'#888'}"></div>
+    </div>`).join('');
+}
+
+function startChallenge(id) {
+  const c = _challenges.find(c=>c.id===id);
+  if (!c || c.done) return;
+  activeChalId = id;
+
+  const typeLabels = {
+    build:    '<svg class="ic" viewBox="0 0 24 24"><path d="M9 3h6m-4.5 0v5.5l-4 7.5a1 1 0 0 0 .9 1.5h8.2a1 1 0 0 0 .9-1.5l-4-7.5V3"/></svg> Построить молекулу',
+    identify: '<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> Узнать молекулу',
+    formula:  '<svg class="ic" viewBox="0 0 24 24"><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.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg> Найти формулу',
+    balance:  '<svg class="ic" viewBox="0 0 24 24"><path d="m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1z"/><path d="m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1z"/><path d="M7 21h10M12 3v18M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2"/></svg> Уравнять реакцию',
+    match:    '<svg class="ic" viewBox="0 0 24 24"><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> Совместить пары',
+    classify: '<svg class="ic" viewBox="0 0 24 24"><path d="M12 2H2v10l9.29 9.29c.94.94 2.48.94 3.42 0l6.58-6.58c.94-.94.94-2.48 0-3.42L12 2Z"/><path d="M7 7h.01"/></svg> Классифицировать',
+    complete: '<svg class="ic" viewBox="0 0 24 24"><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> Завершить реакцию',
+  };
+  document.getElementById('bp-chal-type-label').textContent = typeLabels[c.type||'build'] || 'Задание';
+  document.getElementById('bp-chal-text').textContent = c.description;
+  document.getElementById('bp-active-challenge').style.display = '';
+
+  // hide all sub-UIs first
+  document.getElementById('bp-chal-choices').style.display = 'none';
+  document.getElementById('bp-chal-mol-hint').style.display = 'none';
+  document.getElementById('bp-chal-match').style.display = 'none';
+  document.getElementById('bp-chal-balance').style.display = 'none';
+  document.getElementById('bp-submit-build').style.display = 'none';
+
+  const type = c.type || 'build';
+
+  if (type === 'build') {
+    clearAll();
+    document.getElementById('bp-submit-build').style.display = '';
+    document.getElementById('bio-hint').innerHTML = c.hint ? '<svg class="ic" viewBox="0 0 24 24"><line x1="9" y1="18" x2="15" y2="18"/><line x1="10" y1="22" x2="14" y2="22"/><path d="M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14"/></svg> ' + c.hint : 'Построй молекулу на холсте';
+    switchPanel('editor');
+
+  } else if (type === 'identify') {
+    renderChoiceButtons(c.data_json?.choices || [], answer => submitChoiceAnswer(answer));
+    if (c.data_json?.mol_id) {
+      LS.biochemGetMolecule(c.data_json.mol_id).then(m => {
+        atoms = (m.atoms_json||[]).map(a=>({...a}));
+        bonds = (m.bonds_json||[]).map(b=>({id:nextId++, from:b.f??b.from, to:b.t??b.to, order:b.o??b.order??1}));
+        nextId = Math.max(nextId, ...atoms.map(a=>a.id), 0) + 1;
+        centerView();
+      });
+    } else { clearAll(); }
+    document.getElementById('bio-hint').innerHTML = '<svg class="ic" viewBox="0 0 24 24"><path d="M4 4l7.07 17 2.51-7.39L21 11.07z"/></svg> Выбери правильное название молекулы';
+    switchPanel('editor');
+
+  } else if (type === 'formula') {
+    clearAll();
+    const molName = c.data_json?.mol_name || c.title;
+    document.getElementById('bp-chal-mol-hint').textContent = molName;
+    document.getElementById('bp-chal-mol-hint').style.display = '';
+    renderChoiceButtons(c.data_json?.choices || [], answer => submitChoiceAnswer(answer));
+    document.getElementById('bio-hint').innerHTML = '<svg class="ic" viewBox="0 0 24 24"><path d="M4 4l7.07 17 2.51-7.39L21 11.07z"/></svg> Выбери правильную химическую формулу';
+    switchPanel('editor');
+
+  } else if (type === 'classify') {
+    clearAll();
+    const target = c.data_json?.target || c.target_formula || '';
+    document.getElementById('bp-chal-mol-hint').textContent = target;
+    document.getElementById('bp-chal-mol-hint').style.display = '';
+    renderChoiceButtons(c.data_json?.choices || [], answer => submitChoiceAnswer(answer));
+    document.getElementById('bio-hint').innerHTML = '<svg class="ic" viewBox="0 0 24 24"><path d="M4 4l7.07 17 2.51-7.39L21 11.07z"/></svg> Выбери класс вещества';
+    switchPanel('editor');
+
+  } else if (type === 'complete') {
+    clearAll();
+    const eqText = c.data_json?.equation || '';
+    document.getElementById('bp-chal-mol-hint').textContent = eqText;
+    document.getElementById('bp-chal-mol-hint').style.display = eqText ? '' : 'none';
+    document.getElementById('bp-chal-mol-hint').style.fontSize = '0.82rem';
+    document.getElementById('bp-chal-mol-hint').style.color = '#ccc';
+    renderChoiceButtons(c.data_json?.choices || [], answer => submitChoiceAnswer(answer));
+    document.getElementById('bio-hint').innerHTML = '<svg class="ic" viewBox="0 0 24 24"><path d="M4 4l7.07 17 2.51-7.39L21 11.07z"/></svg> Выбери недостающий компонент реакции';
+    switchPanel('editor');
+
+  } else if (type === 'match') {
+    clearAll();
+    renderMatchChallenge(c.data_json?.pairs || []);
+    document.getElementById('bio-hint').innerHTML = '<svg class="ic" viewBox="0 0 24 24"><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> Совмести формулы с названиями';
+    switchPanel('editor');
+
+  } else if (type === 'balance') {
+    clearAll();
+    renderBalanceChallenge(c.data_json || {});
+    document.getElementById('bp-submit-build').style.display = '';
+    document.getElementById('bio-hint').innerHTML = '<svg class="ic" viewBox="0 0 24 24"><path d="m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1z"/><path d="m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1z"/><path d="M7 21h10M12 3v18M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2"/></svg> Введи коэффициенты для балансировки уравнения';
+    switchPanel('editor');
+  }
+
+  renderChalList();
+  LS.toast('Задание: ' + c.title, 'info');
+}
+
+function renderChoiceButtons(choices, onSelect) {
+  const wrap = document.getElementById('bp-chal-choices');
+  wrap.style.display = '';
+  wrap.innerHTML = choices.map(ch =>
+    `<button class="chal-choice-btn" onclick="handleChoiceClick(this,'${ch.replace(/'/g,"\\'")}')">
+      ${ch}
+    </button>`
+  ).join('');
+  wrap._onSelect = onSelect;
+}
+
+function handleChoiceClick(btn, answer) {
+  // Disable all buttons
+  const wrap = document.getElementById('bp-chal-choices');
+  wrap.querySelectorAll('.chal-choice-btn').forEach(b => { b.disabled = true; });
+  wrap._pendingAnswer = answer;
+  wrap._pendingBtn = btn;
+  if (wrap._onSelect) wrap._onSelect(answer);
+}
+
+function cancelChallenge() {
+  activeChalId = null;
+  document.getElementById('bp-active-challenge').style.display = 'none';
+  document.getElementById('bp-chal-choices').style.display = 'none';
+  document.getElementById('bp-chal-mol-hint').style.display = 'none';
+  document.getElementById('bp-chal-match').style.display = 'none';
+  document.getElementById('bp-chal-balance').style.display = 'none';
+  document.getElementById('bp-submit-build').style.display = '';
+  document.getElementById('bio-hint').textContent = 'Кликни на холст, чтобы добавить атом · Перетащи от атома, чтобы создать связь · Клик по связи меняет порядок';
+  renderChalList();
+}
+
+async function submitChallenge() {
+  if (!activeChalId) return;
+  const c = _challenges.find(ch=>ch.id===activeChalId);
+  const type = c?.type || 'build';
+
+  // Balance type: read coefficient inputs
+  if (type === 'balance') {
+    const inputs = document.querySelectorAll('#bp-chal-balance .bal-coef');
+    const coefficients = Array.from(inputs).map(inp => parseInt(inp.value) || 0);
+    try {
+      const r = await LS.biochemSolveChallenge(activeChalId, { coefficients });
+      LS.toast(`Верно! +${r.xp} XP`, 'success');
+      cancelChallenge(); loadChallenges();
+    } catch(e) {
+      inputs.forEach(inp => { inp.style.borderColor='#ef4444'; setTimeout(()=>inp.style.borderColor='',900); });
+      LS.toast('Неверно! Проверь коэффициенты', 'error');
+    }
+    return;
+  }
+
+  // Default build type
+  const issues = getIssues();
+  if (issues.length) { LS.toast('Исправь ошибки валентности перед проверкой', 'error'); return; }
+  try {
+    const r = await LS.biochemSolveChallenge(activeChalId, {
+      atoms: atoms.map(a=>({id:a.id,s:a.s})),
+      bonds: bonds.map(b=>({f:b.from,t:b.to,o:b.order})),
+    });
+    LS.toast(`Верно! +${r.xp} XP`, 'success');
+    cancelChallenge();
+    loadChallenges();
+  } catch(e) {
+    if (e.data?.error === 'wrong_formula') LS.toast(`Неверно. Ожидается ${e.data.expected}, получено ${e.data.submitted}`, 'error');
+    else LS.toast('Ошибка: ' + e.message, 'error');
+  }
+}
+
+async function submitChoiceAnswer(answer) {
+  if (!activeChalId) return;
+  try {
+    const r = await LS.biochemSolveChallenge(activeChalId, { answer });
+    // Mark correct button green
+    const wrap = document.getElementById('bp-chal-choices');
+    wrap.querySelectorAll('.chal-choice-btn').forEach(b => {
+      if (b.textContent.trim() === answer) b.classList.add('correct');
+    });
+    LS.toast(`Верно! +${r.xp} XP`, 'success');
+    setTimeout(() => { cancelChallenge(); loadChallenges(); }, 900);
+  } catch(e) {
+    // Mark wrong button red, re-enable others
+    const wrap = document.getElementById('bp-chal-choices');
+    wrap.querySelectorAll('.chal-choice-btn').forEach(b => {
+      if (b.textContent.trim() === answer) b.classList.add('wrong');
+      else { b.disabled = false; }
+    });
+    LS.toast('Неверно! Попробуй ещё раз', 'error');
+  }
+}
+
+// ── Saved ──
+async function loadSaved() {
+  const list = document.getElementById('saved-list');
+  try {
+    const saved = await LS.biochemGetSaved();
+    if (!saved.length) { list.innerHTML = '<div style="color:#555;font-size:0.8rem">Сохранённых молекул пока нет</div>'; return; }
+    list.innerHTML = saved.map(m => `
+      <div class="saved-item" onclick="loadSavedMolecule(${m.id})">
+        <div style="flex:1;min-width:0">
+          <div class="saved-formula">${m.formula}</div>
+          <div class="saved-name">${m.mol_name||m.name||''}</div>
+        </div>
+        <button onclick="event.stopPropagation();deleteSaved(${m.id})" style="background:none;border:none;color:#666;cursor:pointer;font-size:14px;padding:2px 4px" title="Удалить"><svg class="ic" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+      </div>`).join('');
+  } catch { list.innerHTML = '<div style="color:#666">Ошибка загрузки</div>'; }
+}
+
+async function loadSavedMolecule(id) {
+  try {
+    const saved = await LS.biochemGetSaved();
+    const m = saved.find(s=>s.id===id);
+    if (!m) return;
+    pushHistory();
+    atoms = (m.atoms_json||[]).map(a=>({...a}));
+    bonds = (m.bonds_json||[]).map(b=>({id:nextId++, from:b.f||b.from, to:b.t||b.to, order:b.o||b.order||1}));
+    nextId = Math.max(nextId, ...atoms.map(a=>a.id), 0) + 1;
+    centerView(); updateInfo(); switchPanel('editor');
+  } catch(e) { LS.toast('Ошибка: '+e.message,'error'); }
+}
+
+async function deleteSaved(id) {
+  if (!await LS.confirm('Удалить сохранённую молекулу?')) return;
+  try { await LS.biochemDeleteSaved(id); loadSaved(); } catch(e) { LS.toast('Ошибка','error'); }
+}
+
+// ── 3D mode ──
+let _is3D      = false;
+let _isVDW     = false;   // space-fill (VDW) sub-mode
+let _3dRotX    = 0.35;   // initial X-tilt in radians
+let _3dRotY    = 0;
+let _3dAnimId  = null;
+let _3dDrag    = false;
+let _3dLX      = 0, _3dLY = 0;
+let _3dVelX    = 0;      // rotation inertia
+let _3dVelY    = 0;
+let _3dSpin    = true;   // auto-spin flag
+let _3dSpinTmo = null;   // resume-spin timeout
+
+// VDW radii (van der Waals, canvas units)
+const VDW_R = { H:38, C:56, N:52, O:50, S:72, P:70, F:40, Cl:72, Br:85,
+                Na:80, Ca:86, K:92, Mg:72, Fe:70 };
+
+function toggle3D() {
+  _is3D = !_is3D;
+  document.getElementById('btn-3d').classList.toggle('mode-3d-active', _is3D);
+  const vdwBtn = document.getElementById('btn-vdw');
+  vdwBtn.style.display = _is3D ? '' : 'none';
+  if (!_is3D && _isVDW) { _isVDW = false; vdwBtn.classList.remove('mode-3d-active'); }
+  if (_is3D) {
+    centerView();
+    _start3D();
+  } else {
+    _stop3D();
+    render();
+  }
+}
+
+function toggleVDW() {
+  _isVDW = !_isVDW;
+  document.getElementById('btn-vdw').classList.toggle('mode-3d-active', _isVDW);
+}
+
+function _start3D() {
+  _stop3D();
+  function frame() {
+    if (!_is3D) return;
+    if (!_3dDrag) {
+      if (_3dSpin && Math.abs(_3dVelX) < 0.001 && Math.abs(_3dVelY) < 0.001) {
+        // auto-spin when no inertia
+        _3dRotY += 0.013;
+      } else {
+        // apply inertia with decay
+        _3dRotX += _3dVelX;
+        _3dRotY += _3dVelY;
+        _3dVelX *= 0.92;
+        _3dVelY *= 0.92;
+      }
+    }
+    render3D();
+    _3dAnimId = requestAnimationFrame(frame);
+  }
+  _3dAnimId = requestAnimationFrame(frame);
+}
+
+function _stop3D() {
+  if (_3dAnimId) { cancelAnimationFrame(_3dAnimId); _3dAnimId = null; }
+}
+
+function _proj3D(x, y, z) {
+  const cy = Math.cos(_3dRotY), sy = Math.sin(_3dRotY);
+  const x1 =  x * cy + z * sy;
+  const z1 = -x * sy + z * cy;
+  const cx = Math.cos(_3dRotX), sx2 = Math.sin(_3dRotX);
+  const y2 =  y * cx - z1 * sx2;
+  const z2 =  y * sx2 + z1 * cx;
+  const fov = 800;
+  const sc  = fov / (fov + z2);
+  return { sx: x1 * sc, sy: y2 * sc, sz: z2, sc };
+}
+
+function _hexRgb(hex) {
+  hex = hex.replace('#','');
+  if (hex.length === 3) hex = hex.split('').map(c=>c+c).join('');
+  const n = parseInt(hex,16);
+  return [(n>>16)&255,(n>>8)&255,n&255];
+}
+
+function render3D() {
+  const W = canvas.width, H = canvas.height;
+  ctx.clearRect(0,0,W,H);
+  ctx.fillStyle = '#07070f';
+  ctx.fillRect(0,0,W,H);
+
+  if (!atoms.length) return;
+
+  // molecule center (world coords)
+  let cx=0, cy=0;
+  for (const a of atoms) { cx+=a.x; cy+=a.y; }
+  cx/=atoms.length; cy/=atoms.length;
+
+  const s3 = scale * 1.15;
+
+  // project all atoms
+  const proj = atoms.map(a => {
+    const p = _proj3D((a.x-cx)*s3, (a.y-cy)*s3, (a.z||0)*s3);
+    return { a, sx: p.sx+W/2, sy: p.sy+H/2, sz: p.sz, sc: p.sc };
+  });
+  proj.sort((a,b) => b.sz - a.sz);   // back<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>front
+
+  const pm = {};
+  for (const p of proj) pm[p.a.id] = p;
+
+  // bonds (hidden in VDW mode)
+  if (!_isVDW) {
+    for (const b of bonds) {
+      const p1 = pm[b.from], p2 = pm[b.to];
+      if (!p1||!p2) continue;
+      const avgSc = (p1.sc+p2.sc)/2;
+      ctx.strokeStyle = `rgba(180,180,200,${0.35+avgSc*0.55})`;
+      ctx.lineWidth   = Math.max(1.2, 3.5*avgSc);
+      ctx.lineCap     = 'round';
+      const order = b.order||1;
+      if (order===1) {
+        ctx.beginPath(); ctx.moveTo(p1.sx,p1.sy); ctx.lineTo(p2.sx,p2.sy); ctx.stroke();
+      } else {
+        const dx=p2.sx-p1.sx, dy=p2.sy-p1.sy, len=Math.hypot(dx,dy)||1;
+        const ox=-dy/len*3.5*avgSc, oy=dx/len*3.5*avgSc;
+        for (let o=-(order-1); o<=(order-1); o+=2) {
+          ctx.beginPath();
+          ctx.moveTo(p1.sx+ox*o, p1.sy+oy*o);
+          ctx.lineTo(p2.sx+ox*o, p2.sy+oy*o);
+          ctx.stroke();
+        }
+      }
+    }
+  }
+
+  // atoms (back<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>front already)
+  for (const p of proj) {
+    const { a, sx, sy, sc } = p;
+    const el = ELEMENTS[a.s]||{color:'#888',text:'#fff',radius:20};
+    const r  = _isVDW
+      ? Math.max(4, (VDW_R[a.s] || 56) * sc * 0.85)
+      : Math.max(3, el.radius * sc * 1.25);
+    const [r0,g0,b0] = _hexRgb(el.color);
+    // sphere gradient: highlight top-left, dark bottom-right
+    const grd = ctx.createRadialGradient(sx-r*0.32,sy-r*0.38,r*0.06, sx,sy,r);
+    grd.addColorStop(0,   `rgb(${Math.min(255,r0+110)},${Math.min(255,g0+110)},${Math.min(255,b0+110)})`);
+    grd.addColorStop(0.42, el.color);
+    grd.addColorStop(1,   `rgb(${Math.round(r0*0.2)},${Math.round(g0*0.2)},${Math.round(b0*0.2)})`);
+    ctx.beginPath();
+    ctx.arc(sx, sy, r, 0, Math.PI*2);
+    ctx.fillStyle = grd;
+    ctx.fill();
+    // label (hide H when tiny, hidden in VDW mode)
+    if (!_isVDW && (a.s !== 'H' || r > 13)) {
+      ctx.fillStyle = el.text||'#fff';
+      ctx.font = `bold ${Math.max(8,Math.round(r*0.72))}px Manrope,sans-serif`;
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.shadowBlur = 0;
+      ctx.fillText(a.s, sx, sy);
+    }
+  }
+}
+
+// ── Init ──
+window.addEventListener('resize', resizeCanvas);
+resizeCanvas();
+panX = canvas.width / 2;
+panY = canvas.height / 2;
+
+// Auto-load molecule from URL ?mol=ID
+const _urlMol = new URLSearchParams(location.search).get('mol');
+if (_urlMol) {
+  LS.biochemGetMolecule(_urlMol).then(m => {
+    atoms = (m.atoms_json||[]).map(a => ({...a}));
+    bonds = (m.bonds_json||[]).map(b => ({ id: nextId++, from: b.f, to: b.t, order: b.o }));
+    nextId = Math.max(nextId, ...atoms.map(a => a.id), 0) + 1;
+    history.replaceState({}, '', '/biochem');
+    centerView(); updateInfo();
+  }).catch(() => {});
+}
+
+// ── History (undo/redo) ──
+function pushHistory() {
+  _history = _history.slice(0, _histIdx + 1);
+  _history.push({
+    atoms: JSON.parse(JSON.stringify(atoms)),
+    bonds: JSON.parse(JSON.stringify(bonds)),
+    nextId,
+  });
+  if (_history.length > _HISTORY_MAX) _history.shift();
+  _histIdx = _history.length - 1;
+  _updateUndoButtons();
+}
+
+function undo() {
+  if (_histIdx <= 0) return;
+  _histIdx--;
+  const s = _history[_histIdx];
+  atoms = JSON.parse(JSON.stringify(s.atoms));
+  bonds = JSON.parse(JSON.stringify(s.bonds));
+  nextId = s.nextId;
+  updateInfo(); render(); _updateUndoButtons();
+}
+
+function redo() {
+  if (_histIdx >= _history.length - 1) return;
+  _histIdx++;
+  const s = _history[_histIdx];
+  atoms = JSON.parse(JSON.stringify(s.atoms));
+  bonds = JSON.parse(JSON.stringify(s.bonds));
+  nextId = s.nextId;
+  updateInfo(); render(); _updateUndoButtons();
+}
+
+function _updateUndoButtons() {
+  document.getElementById('btn-undo').disabled = _histIdx <= 0;
+  document.getElementById('btn-redo').disabled = _histIdx >= _history.length - 1;
+}
+
+// ── Ring templates ──
+const RING_TEMPLATES = {
+  benzene: {
+    atoms: [{s:'C',x:0,y:-55},{s:'C',x:47.6,y:-27.5},{s:'C',x:47.6,y:27.5},
+            {s:'C',x:0,y:55},{s:'C',x:-47.6,y:27.5},{s:'C',x:-47.6,y:-27.5}],
+    bonds: [[0,1,2],[1,2,1],[2,3,2],[3,4,1],[4,5,2],[5,0,1]],
+  },
+  cyclohexane: {
+    atoms: [{s:'C',x:0,y:-55},{s:'C',x:47.6,y:-27.5},{s:'C',x:47.6,y:27.5},
+            {s:'C',x:0,y:55},{s:'C',x:-47.6,y:27.5},{s:'C',x:-47.6,y:-27.5}],
+    bonds: [[0,1,1],[1,2,1],[2,3,1],[3,4,1],[4,5,1],[5,0,1]],
+  },
+  cyclopentane: {
+    atoms: [{s:'C',x:0,y:-50},{s:'C',x:47.6,y:-15.5},{s:'C',x:29.4,y:40.5},
+            {s:'C',x:-29.4,y:40.5},{s:'C',x:-47.6,y:-15.5}],
+    bonds: [[0,1,1],[1,2,1],[2,3,1],[3,4,1],[4,0,1]],
+  },
+  naphthalene: {
+    atoms: [
+      {s:'C',x:0,y:27.5},{s:'C',x:0,y:-27.5},
+      {s:'C',x:-47.6,y:-55},{s:'C',x:-95.2,y:-27.5},{s:'C',x:-95.2,y:27.5},{s:'C',x:-47.6,y:55},
+      {s:'C',x:47.6,y:-55},{s:'C',x:95.2,y:-27.5},{s:'C',x:95.2,y:27.5},{s:'C',x:47.6,y:55},
+    ],
+    bonds: [
+      [0,1,1],[1,2,2],[2,3,1],[3,4,2],[4,5,1],[5,0,2],
+      [1,6,2],[6,7,1],[7,8,2],[8,9,1],[9,0,2],
+    ],
+  },
+};
+
+function insertRing(key) {
+  const t = RING_TEMPLATES[key];
+  if (!t) return;
+  pushHistory();
+  // Place to the right of existing atoms (or canvas center)
+  const offX = atoms.length ? Math.max(...atoms.map(a=>a.x)) + 90 : 0;
+  const idMap = {};
+  t.atoms.forEach((a, i) => {
+    const id = nextId++;
+    idMap[i] = id;
+    atoms.push({ id, s: a.s, x: a.x + offX, y: a.y });
+  });
+  t.bonds.forEach(([f, to, order]) => {
+    bonds.push({ id: nextId++, from: idMap[f], to: idMap[to], order });
+  });
+  centerView();
+  updateInfo();
+  closeRingMenu();
+}
+
+function toggleRingMenu() {
+  document.getElementById('ring-menu').classList.toggle('open');
+}
+function closeRingMenu() {
+  document.getElementById('ring-menu').classList.remove('open');
+}
+// Close ring menu on outside click
+document.addEventListener('click', e => {
+  if (!e.target.closest('.ring-menu-wrap')) closeRingMenu();
+});
+
+// ── Match challenge ──
+let _matchSelected = null; // { side: 'left'|'right', value: string }
+let _matchPairs    = [];   // completed pairs so far
+
+function renderMatchChallenge(pairs) {
+  _matchSelected = null;
+  _matchPairs = [];
+  const wrap = document.getElementById('bp-chal-match');
+  wrap.style.display = '';
+  // Shuffle right side
+  const rights = [...pairs.map(p=>p.right)].sort(() => Math.random()-.5);
+  wrap.innerHTML = `
+    <div style="display:grid;grid-template-columns:1fr 1fr;gap:5px">
+      <div class="match-col-hdr">Формула</div><div class="match-col-hdr">Название</div>
+      ${pairs.map((p,i) => `
+        <button class="match-it" id="ml-${i}" data-side="left" data-val="${escHtml(p.left)}" onclick="matchClick(this)">${p.left}</button>
+        <button class="match-it" id="mr-${i}" data-side="right" data-val="${escHtml(rights[i])}" onclick="matchClick(this)">${rights[i]}</button>
+      `).join('')}
+    </div>
+    <button class="bp-btn bp-btn-primary" id="match-submit-btn" onclick="submitMatchAnswer()" style="display:none;margin-top:6px">Проверить</button>`;
+  wrap._pairs = pairs;
+  wrap._rights = rights;
+}
+
+function escHtml(s) { return String(s).replace(/[&<>"']/g, c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c])); }
+
+function matchClick(btn) {
+  if (btn.classList.contains('matched')) return;
+  const side = btn.dataset.side;
+  const val  = btn.dataset.val;
+
+  if (!_matchSelected) {
+    // First click — select
+    document.querySelectorAll('.match-it.selected').forEach(b=>b.classList.remove('selected'));
+    btn.classList.add('selected');
+    _matchSelected = { side, val, btn };
+  } else if (_matchSelected.side === side) {
+    // Same side — reselect
+    document.querySelectorAll('.match-it.selected').forEach(b=>b.classList.remove('selected'));
+    btn.classList.add('selected');
+    _matchSelected = { side, val, btn };
+  } else {
+    // Opposite side — attempt pair
+    const left  = side === 'right' ? _matchSelected.val : val;
+    const right = side === 'right' ? val : _matchSelected.val;
+    const wrap  = document.getElementById('bp-chal-match');
+    const correctRight = (wrap._pairs||[]).find(p=>p.left===left)?.right;
+    if (right === correctRight) {
+      btn.classList.add('matched');
+      _matchSelected.btn.classList.remove('selected');
+      _matchSelected.btn.classList.add('matched');
+      _matchPairs.push({ left, right });
+      _matchSelected = null;
+      // Check if all done
+      if (_matchPairs.length === (wrap._pairs||[]).length) {
+        document.getElementById('match-submit-btn').style.display = '';
+      }
+    } else {
+      // Flash wrong
+      btn.classList.add('wrong');
+      _matchSelected.btn.classList.add('wrong');
+      setTimeout(() => {
+        btn.classList.remove('wrong','selected');
+        _matchSelected?.btn.classList.remove('wrong','selected');
+        _matchSelected = null;
+      }, 700);
+    }
+  }
+}
+
+async function submitMatchAnswer() {
+  if (!activeChalId) return;
+  try {
+    const r = await LS.biochemSolveChallenge(activeChalId, { pairs: _matchPairs });
+    LS.toast(`Верно! +${r.xp} XP`, 'success');
+    cancelChallenge(); loadChallenges();
+  } catch(e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+}
+
+// ── Balance challenge ──
+function renderBalanceChallenge(data) {
+  const wrap = document.getElementById('bp-chal-balance');
+  wrap.style.display = '';
+  const reactants = data.reactants || [];
+  const products  = data.products  || [];
+  const count = reactants.length + products.length;
+  let html = '<div class="balance-eq">';
+  reactants.forEach((f,i) => {
+    if (i > 0) html += '<span class="bal-op">+</span>';
+    html += `<input type="number" class="bal-coef" min="1" max="99" value="1" placeholder="?">`;
+    html += `<span class="bal-formula">${escHtml(f)}</span>`;
+  });
+  html += '<span class="bal-arrow"><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></span>';
+  products.forEach((f,i) => {
+    if (i > 0) html += '<span class="bal-op">+</span>';
+    html += `<input type="number" class="bal-coef" min="1" max="99" value="1" placeholder="?">`;
+    html += `<span class="bal-formula">${escHtml(f)}</span>`;
+  });
+  html += '</div>';
+  wrap.innerHTML = html;
+}
+
+// Keyboard shortcuts
+window.addEventListener('keydown', e => {
+  if (['INPUT','TEXTAREA','SELECT'].includes(e.target.tagName)) return;
+  if (e.key === 'Delete' || e.key === 'Backspace') {
+    if (hoveredAtomId) { pushHistory(); removeAtom(hoveredAtomId); hoveredAtomId=null; updateInfo(); render(); }
+    else if (hoveredBondId) { pushHistory(); removeBond(hoveredBondId); hoveredBondId=null; updateInfo(); render(); }
+  }
+  if (e.key === 'Escape') { cancelChallenge(); bondFromId=null; closeRingMenu(); render(); }
+  if (e.ctrlKey && !e.shiftKey && e.key.toLowerCase()==='z') { e.preventDefault(); undo(); }
+  if ((e.ctrlKey && e.shiftKey && e.key.toLowerCase()==='z') || (e.ctrlKey && e.key.toLowerCase()==='y')) { e.preventDefault(); redo(); }
+  // Element shortcuts
+  if (!e.ctrlKey && !e.altKey) {
+    const EL_KEY = { h:'H', c:'C', n:'N', o:'O', p:'P', s:'S' };
+    if (EL_KEY[e.key.toLowerCase()]) selectElement(EL_KEY[e.key.toLowerCase()]);
+    if (e.key.toLowerCase()==='a') setTool('add');
+    if (e.key.toLowerCase()==='m') setTool('move');
+    if (e.key.toLowerCase()==='e') setTool('erase');
+  }
+});
+
+if (window.lucide) lucide.createIcons();
+LS.notif?.init();
+LS.hideDisabledFeatures?.();
+</script>
+<script src="/js/notifications.js"></script>
+<script src="/js/search.js"></script>
+<script src="/js/mobile.js"></script>
+</body>
+</html>
diff --git a/frontend/board.html b/frontend/board.html
new file mode 100644
index 0000000..74d1171
--- /dev/null
+++ b/frontend/board.html
@@ -0,0 +1,960 @@
+<!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" />
+  <style>
+    /* board-specific extra variables */
+    :root {
+      --surface: rgba(255,255,255,0.88);
+      --border: rgba(15,23,42,0.09); --border-h: rgba(15,23,42,0.18);
+      --amber: #FF9F1C;
+      --grad-v: linear-gradient(135deg, #9B5DE5, #c084fc);
+      --grad-c: linear-gradient(135deg, #06D6E0, #06b6d4);
+      --grad-g: linear-gradient(135deg, #06D664, #06b84a);
+      --blur: blur(24px); --shadow: 0 4px 24px rgba(15,23,42,0.08);
+      --shadow-h: 0 12px 48px rgba(15,23,42,0.14);
+    }
+
+    #bg-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
+    .notif-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; border-radius: 999px; background: #F15BB5; color: #fff; font-size: 0.65rem; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
+
+    /* ── container ── */
+    .container { position: relative; z-index: 1; max-width: 1140px; margin: 0 auto; padding: 28px 24px 80px; }
+
+    /* ── new items banner ── */
+    .new-banner {
+      display: none;
+      align-items: center; gap: 10px;
+      padding: 10px 18px;
+      margin-bottom: 16px;
+      background: linear-gradient(135deg, rgba(6,214,224,0.12), rgba(155,93,229,0.12));
+      border: 1px solid rgba(155,93,229,0.25);
+      border-radius: var(--r-pill);
+      font-size: 0.83rem; font-weight: 700; color: var(--violet);
+      cursor: pointer;
+      animation: banner-in 0.4s cubic-bezier(.34,1.56,.64,1);
+    }
+    .new-banner.visible { display: flex; }
+    @keyframes banner-in { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
+
+    /* ── board header ── */
+    .board-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
+    .board-title {
+      font-family: 'Unbounded', sans-serif;
+      font-size: 1.3rem; font-weight: 800; flex: 1; min-width: 180px;
+      background: var(--grad-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
+    }
+    .live-badge { display: flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: var(--r-pill); background: rgba(6,214,100,0.10); border: 1px solid rgba(6,214,100,0.30); font-size: 0.75rem; font-weight: 700; color: #06a84e; user-select: none; }
+    .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #06D664; animation: pulse-dot 1.6s ease-in-out infinite; }
+    @keyframes pulse-dot { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.5; transform:scale(1.5); } }
+    .class-select { padding: 7px 14px; border: 1.5px solid var(--border-h); border-radius: var(--r-pill); background: var(--surface); font-family: 'Manrope', sans-serif; font-size: 0.85rem; font-weight: 600; color: var(--text); cursor: pointer; outline: none; transition: border-color var(--tr); }
+    .class-select:focus { border-color: var(--violet); }
+    .refresh-info { font-size: 0.72rem; color: var(--text-3); display: flex; align-items: center; gap: 5px; }
+
+    /* ── search ── */
+    .search-wrap { position: relative; margin-bottom: 16px; }
+    .search-input {
+      width: 100%;
+      padding: 10px 16px 10px 40px;
+      border: 1.5px solid var(--border-h);
+      border-radius: var(--r-pill);
+      background: var(--surface);
+      backdrop-filter: var(--blur);
+      font-family: 'Manrope', sans-serif;
+      font-size: 0.88rem; color: var(--text);
+      outline: none;
+      transition: border-color var(--tr), box-shadow var(--tr);
+    }
+    .search-input:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(155,93,229,0.10); }
+    .search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 1rem; pointer-events: none; }
+
+    /* ── filter tabs ── */
+    .filter-tabs { display: flex; gap: 6px; margin-bottom: 24px; flex-wrap: wrap; }
+    .filter-tab { padding: 7px 18px; border: 1.5px solid var(--border-h); border-radius: var(--r-pill); background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 600; color: var(--text-3); cursor: pointer; transition: all var(--tr); }
+    .filter-tab:hover { border-color: var(--violet); color: var(--violet); }
+    .filter-tab.active { background: var(--grad-1); border-color: transparent; color: #fff; box-shadow: 0 4px 16px rgba(155,93,229,0.28); }
+    .filter-count { display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: rgba(255,255,255,0.25); font-size: 0.68rem; font-weight: 800; line-height: 18px; margin-left: 4px; }
+    .filter-tab:not(.active) .filter-count { background: rgba(15,23,42,0.07); color: var(--text-3); }
+
+    /* ── compose ── */
+    .compose-wrap { margin-bottom: 20px; }
+    .compose-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 9px 20px; border: 1.5px dashed var(--border-h); border-radius: var(--r-pill); background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 600; color: var(--text-3); cursor: pointer; transition: all var(--tr); }
+    .compose-toggle:hover { border-color: var(--cyan); color: #0aa6b0; background: rgba(6,214,224,0.04); }
+    .compose-box { display: none; background: var(--surface); backdrop-filter: var(--blur); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow); margin-top: 10px; animation: card-in 0.2s ease; }
+    .compose-box.open { display: block; }
+    .compose-textarea { width: 100%; min-height: 80px; resize: vertical; padding: 10px 12px; border: 1px solid var(--border-h); border-radius: 12px; background: rgba(255,255,255,0.7); font-family: 'Manrope', sans-serif; font-size: 0.9rem; color: var(--text); outline: none; transition: border-color var(--tr); }
+    .compose-textarea:focus { border-color: var(--cyan); }
+    .compose-footer { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
+    .compose-chars { font-size: 0.72rem; color: var(--text-3); margin-right: auto; }
+    .compose-chars.warn { color: #c07400; }
+    .btn-post { padding: 8px 22px; border: none; border-radius: var(--r-pill); background: var(--grad-1); color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: transform var(--tr), box-shadow var(--tr); }
+    .btn-post:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(6,214,224,0.35); }
+    .btn-post:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
+    .btn-cancel-compose { padding: 8px 16px; border: 1.5px solid var(--border-h); border-radius: var(--r-pill); background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.85rem; font-weight: 600; color: var(--text-3); cursor: pointer; transition: all var(--tr); }
+    .btn-cancel-compose:hover { border-color: var(--pink); color: #c0306a; }
+
+    /* ── masonry ── */
+    .masonry { columns: 3 320px; column-gap: 16px; }
+
+    /* ── card base ── */
+    .card {
+      break-inside: avoid;
+      margin-bottom: 12px;
+      background: var(--surface);
+      backdrop-filter: var(--blur);
+      border: 1px solid var(--border);
+      border-radius: var(--r-lg);
+      overflow: hidden;
+      box-shadow: var(--shadow);
+      transition: transform 0.2s ease, box-shadow 0.2s ease;
+      opacity: 0;
+      animation: card-in 0.38s ease forwards;
+      will-change: transform;
+    }
+    .card:hover { box-shadow: var(--shadow-h); }
+    @keyframes card-in { from { opacity:0; transform:translateY(16px) scale(0.98); } to { opacity:1; transform:none; } }
+
+    /* card accent strip */
+    .card-strip {
+      height: 3px;
+      width: 100%;
+    }
+    .card-assignment  .card-strip { background: var(--grad-v); }
+    .card-announcement .card-strip { background: var(--grad-c); }
+    .card-activity    .card-strip { background: var(--grad-g); }
+
+    .card-body { padding: 12px 15px 10px; }
+
+    /* card icon + type row */
+    .card-head { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 8px; }
+    .card-icon {
+      width: 34px; height: 34px; border-radius: 9px;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 1rem; flex-shrink: 0;
+    }
+    .card-assignment  .card-icon { background: linear-gradient(135deg, rgba(155,93,229,0.14), rgba(155,93,229,0.06)); }
+    .card-announcement .card-icon { background: linear-gradient(135deg, rgba(6,214,224,0.14), rgba(6,214,224,0.06)); }
+    .card-activity    .card-icon { background: linear-gradient(135deg, rgba(6,214,100,0.14), rgba(6,214,100,0.06)); }
+
+    .card-head-info { flex: 1; min-width: 0; }
+    .card-type-label { font-size: 0.63rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 1px; }
+    .card-assignment  .card-type-label { color: var(--violet); }
+    .card-announcement .card-type-label { color: #0aa6b0; }
+    .card-activity    .card-type-label { color: #0b9e4a; }
+    .card-head-actions { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
+
+    .card-title { font-size: 0.87rem; font-weight: 700; line-height: 1.35; word-break: break-word; }
+
+    /* NEW badge */
+    .badge-new { display: inline-block; padding: 1px 7px; border-radius: var(--r-pill); background: var(--grad-1); color: #fff; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.04em; vertical-align: middle; margin-left: 6px; }
+
+    /* tags */
+    .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
+    .tag { padding: 2px 8px; border-radius: var(--r-pill); background: rgba(15,23,42,0.05); font-size: 0.67rem; font-weight: 600; color: var(--text-3); }
+    .tag.done    { background: rgba(6,214,100,0.12); color: #06a84e; }
+    .tag.class   { background: rgba(6,214,224,0.10); color: #0aa6b0; }
+    .tag.personal{ background: rgba(241,91,181,0.10); color: #9b3c7e; }
+    .tag.pending { background: rgba(255,159,28,0.12); color: #c07400; }
+    .tag.hw      { background: rgba(155,93,229,0.10); color: var(--violet); }
+    .tag.late    { background: rgba(241,91,181,0.10); color: #c0306a; }
+    .tag.urgent  { background: rgba(255,59,48,0.10);  color: #d63300; }
+
+    /* deadline countdown */
+    .deadline-row { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 0.72rem; color: var(--text-3); }
+    .deadline-row .icon { font-size: 0.85rem; }
+    .countdown { font-weight: 700; }
+    .countdown.urgent { color: #d63300; }
+    .countdown.warn   { color: #c07400; }
+    .countdown.ok     { color: var(--text-2); }
+
+    /* SVG progress ring */
+    .ring-wrap { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
+    .ring-label { font-size: 0.73rem; color: var(--text-3); line-height: 1.5; }
+    .ring-label strong { color: var(--text); font-weight: 700; }
+
+    /* announcement text expand */
+    .announce-text { font-size: 0.82rem; line-height: 1.6; color: var(--text-2); white-space: pre-wrap; word-break: break-word; }
+    .announce-text.clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+    .expand-btn { margin-top: 4px; background: none; border: none; font-family: 'Manrope', sans-serif; font-size: 0.74rem; font-weight: 700; color: var(--violet); cursor: pointer; padding: 0; }
+    .expand-btn:hover { text-decoration: underline; }
+
+    /* reactions */
+    .reactions { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
+    .reaction-btn {
+      display: inline-flex; align-items: center; gap: 3px;
+      padding: 3px 8px;
+      border: 1.5px solid var(--border-h);
+      border-radius: var(--r-pill);
+      background: transparent;
+      font-size: 0.78rem; font-weight: 600; color: var(--text-3);
+      cursor: pointer; transition: all 0.15s ease;
+    }
+    .reaction-btn:hover { border-color: var(--violet); background: rgba(155,93,229,0.06); }
+    .reaction-btn.active { border-color: var(--violet); background: rgba(155,93,229,0.10); color: var(--violet); }
+
+    /* activity score */
+    .score-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--r-pill); font-size: 0.76rem; font-weight: 700; }
+    .score-chip.good { background: rgba(6,214,100,0.12); color: #06a84e; }
+    .score-chip.ok   { background: rgba(255,159,28,0.12); color: #c07400; }
+    .score-chip.bad  { background: rgba(241,91,181,0.10); color: #c0306a; }
+
+    /* card footer */
+    .card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--border); }
+    .card-time { font-size: 0.72rem; color: var(--text-3); }
+    .card-author { font-size: 0.72rem; color: var(--text-3); font-weight: 600; }
+
+    /* action buttons */
+    .btn-action {
+      padding: 5px 14px; border: none; border-radius: var(--r-pill);
+      background: var(--grad-1); color: #fff;
+      font-family: 'Manrope', sans-serif; font-size: 0.78rem; font-weight: 700;
+      cursor: pointer; transition: transform var(--tr), box-shadow var(--tr);
+      text-decoration: none; display: inline-block;
+    }
+    .btn-action:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(155,93,229,0.3); }
+    .btn-del-ann {
+      width: 28px; height: 28px; border-radius: 50%;
+      border: 1.5px solid var(--border-h);
+      background: transparent;
+      font-size: 0.85rem; color: var(--text-3);
+      cursor: pointer; display: flex; align-items: center; justify-content: center;
+      transition: all var(--tr);
+    }
+    .btn-del-ann:hover { border-color: #c0306a; color: #c0306a; background: rgba(241,91,181,0.07); }
+
+    /* empty + loading */
+    .empty-state { column-span: all; text-align: center; padding: 60px 20px; color: var(--text-3); font-size: 0.95rem; width: 100%; }
+    .empty-state .empty-icon { display: none; }
+    .skeleton-card { break-inside: avoid; margin-bottom: 12px; background: rgba(255,255,255,0.6); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px; animation: shimmer 1.4s ease-in-out infinite; }
+    @keyframes shimmer { 0%,100% { opacity:0.7; } 50% { opacity:0.35; } }
+    .sk-line { height: 12px; border-radius: 6px; background: rgba(15,23,42,0.08); margin-bottom: 10px; }
+    .sk-circle { width: 40px; height: 40px; border-radius: 12px; background: rgba(15,23,42,0.08); flex-shrink: 0; }
+
+    /* ── Mobile responsive ── */
+    @media (max-width: 768px) {
+      .container { padding: 20px 14px 80px; }
+      .board-header { flex-wrap: wrap; gap: 8px; }
+      .board-title { font-size: 1.05rem !important; min-width: 0; flex: 1 1 auto; }
+      .class-select { font-size: 0.82rem; padding: 6px 12px; }
+      .masonry { columns: 1 !important; }
+      .filter-tab { padding: 6px 12px; font-size: 0.78rem; }
+      .compose-box { padding: 14px; }
+    }
+    @media (max-width: 480px) {
+      .board-header { gap: 6px; }
+      .live-badge, .refresh-info { display: none; }
+    }
+  </style>
+  <script src="https://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+</head>
+<body>
+  <canvas id="bg-canvas"></canvas>
+
+<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>
+      <span class="sb-link active"><i data-lucide="layout-dashboard" class="sb-icon"></i><span class="sb-lbl">Доска</span></span>
+      <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>
+      <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>
+    </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>
+          <span class="sb-logout" style="pointer-events:none">Мой профиль</span>
+        </div>
+      </a>
+    </div>
+  </aside>
+  <div class="notif-drop" id="notif-drop"></div>
+  <div class="sb-content">
+
+  <div class="container">
+
+    <!-- new items banner -->
+    <div class="new-banner" id="new-banner" onclick="dismissBanner()">
+      <i data-lucide="sparkles" style="width:14px;height:14px;vertical-align:-2px"></i> <span id="new-banner-text">Новые записи</span> — нажмите чтобы обновить
+    </div>
+
+    <!-- header -->
+    <div class="board-header">
+      <div class="board-title" id="board-title">Доска класса</div>
+      <div class="live-badge"><div class="live-dot"></div> LIVE</div>
+      <select class="class-select" id="class-select" style="display:none"></select>
+      <span class="refresh-info" id="refresh-info">Обновление через 30 с</span>
+    </div>
+
+    <!-- compose -->
+    <div class="compose-wrap" id="compose-wrap" style="display:none">
+      <button class="compose-toggle" onclick="toggleCompose()"><i data-lucide="megaphone" style="width:14px;height:14px;vertical-align:-2px"></i> Написать объявление</button>
+      <div class="compose-box" id="compose-box">
+        <textarea class="compose-textarea" id="compose-text" placeholder="Напишите объявление для класса…" oninput="onComposeInput()" maxlength="1000"></textarea>
+        <div class="compose-footer">
+          <span class="compose-chars" id="compose-chars">0 / 1000</span>
+          <button class="btn-cancel-compose" onclick="toggleCompose()">Отмена</button>
+          <button class="btn-post" id="btn-post" onclick="postAnnouncement()">Опубликовать</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- search -->
+    <div class="search-wrap">
+      <i data-lucide="search" class="sb-icon" style="width:16px;height:16px"></i>
+      <input class="search-input" type="text" id="search-input" placeholder="Поиск по доске…" oninput="render()" />
+    </div>
+
+    <!-- filter tabs -->
+    <div class="filter-tabs" id="filter-tabs">
+      <button class="filter-tab active" data-filter="all">Все <span class="filter-count" id="cnt-all">0</span></button>
+      <button class="filter-tab" data-filter="assignment"><i data-lucide="clipboard-list" class="sb-icon"></i> Задания <span class="filter-count" id="cnt-assignment">0</span></button>
+      <button class="filter-tab" data-filter="announcement"><i data-lucide="megaphone" class="sb-icon"></i> Объявления <span class="filter-count" id="cnt-announcement">0</span></button>
+      <button class="filter-tab" data-filter="activity"><i data-lucide="zap" class="sb-icon"></i> Активность <span class="filter-count" id="cnt-activity">0</span></button>
+    </div>
+
+    <!-- masonry -->
+    <div class="masonry" id="masonry"></div>
+  </div>
+
+  <script src="/js/api.js"></script>
+  <script src="/js/notifications.js"></script>
+  <script>
+    if (!LS.requireAuth()) throw 0;
+
+    /* ════════════════════════════════════════
+       CANVAS BACKGROUND
+    ════════════════════════════════════════ */
+    (function initCanvas() {
+      const canvas = document.getElementById('bg-canvas');
+      const ctx    = canvas.getContext('2d');
+      let W, H;
+      const mouse = { x: 0, y: 0, tx: 0, ty: 0 };
+
+      function resize() { W = canvas.width = window.innerWidth; H = canvas.height = window.innerHeight; }
+      resize();
+      window.addEventListener('resize', resize);
+      document.addEventListener('mousemove', e => { mouse.tx = e.clientX; mouse.ty = e.clientY; });
+
+      const circles = Array.from({ length: 24 }, () => ({
+        x: Math.random() * 1400, y: Math.random() * 900,
+        r: 50 + Math.random() * 120,
+        dx: (Math.random() - 0.5) * 0.2,
+        dy: (Math.random() - 0.5) * 0.2,
+        hue: [272, 185, 320][Math.floor(Math.random() * 3)],
+        hueSpeed: (Math.random() - 0.5) * 0.08,
+        alpha: 0.025 + Math.random() * 0.045,
+        px: 0.008 + Math.random() * 0.022,
+      }));
+
+      function draw() {
+        mouse.x += (mouse.tx - mouse.x) * 0.06;
+        mouse.y += (mouse.ty - mouse.y) * 0.06;
+        const mx = mouse.x - W / 2, my = mouse.y - H / 2;
+
+        ctx.clearRect(0, 0, W, H);
+        for (const c of circles) {
+          c.hue += c.hueSpeed;
+          c.x += c.dx + mx * c.px * 0.003;
+          c.y += c.dy + my * c.px * 0.003;
+          if (c.x < -c.r)    c.x = W + c.r;
+          if (c.x > W + c.r) c.x = -c.r;
+          if (c.y < -c.r)    c.y = H + c.r;
+          if (c.y > H + c.r) c.y = -c.r;
+          const g = ctx.createRadialGradient(c.x, c.y, 0, c.x, c.y, c.r);
+          g.addColorStop(0, `hsla(${c.hue},75%,65%,${c.alpha})`);
+          g.addColorStop(1, `hsla(${c.hue},75%,65%,0)`);
+          ctx.beginPath();
+          ctx.arc(c.x, c.y, c.r, 0, Math.PI * 2);
+          ctx.fillStyle = g;
+          ctx.fill();
+        }
+        requestAnimationFrame(draw);
+      }
+      draw();
+    })();
+
+    /* ════════════════════════════════════════
+       CARD MAGNETIC HOVER
+    ════════════════════════════════════════ */
+    document.addEventListener('mousemove', e => {
+      const card = e.target.closest?.('.card');
+      if (!card) return;
+      const r = card.getBoundingClientRect();
+      const mx = (e.clientX - r.left) / r.width  - 0.5;
+      const my = (e.clientY - r.top)  / r.height - 0.5;
+      card.style.transform = `perspective(600px) rotateY(${mx * 4}deg) rotateX(${-my * 4}deg) translateY(-3px)`;
+    });
+    document.addEventListener('mouseleave', () => {
+      document.querySelectorAll('.card').forEach(c => c.style.transform = '');
+    }, true);
+    document.addEventListener('mouseover', e => {
+      if (!e.target.closest?.('.card')) {
+        document.querySelectorAll('.card').forEach(c => c.style.transform = '');
+      }
+    });
+
+    /* ════════════════════════════════════════
+       STATE
+    ════════════════════════════════════════ */
+    const { user, isTeacher, isAdmin } = LS.initPage();
+    let _classes     = [];
+    let _currentClassId = null;
+    let _feed        = null;
+    let _prevTotal   = 0;
+    let _filter      = 'all';
+    let _refreshTimer = null;
+    let _reactions   = {};   // { `ann_${id}`: { '<svg class="ic" viewBox="0 0 24 24"><path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"/></svg>': true, '<svg class="ic" viewBox="0 0 24 24"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>️': false, '<svg class="ic" viewBox="0 0 24 24"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 3z"/></svg>': false } }
+    let _expanded    = {};   // { `ann_${id}`: true/false }
+    let _deadlineTimers = [];
+
+    /* nav */
+    if (isTeacher) {
+      document.getElementById('btn-classes').style.display = '';
+      if (isAdmin) document.getElementById('btn-admin').style.display = '';
+    }
+
+    /* reactions from localStorage */
+    function loadReactions() {
+      try { _reactions = JSON.parse(localStorage.getItem('ls_reactions') || '{}'); } catch {}
+    }
+    function saveReactions() {
+      try { localStorage.setItem('ls_reactions', JSON.stringify(_reactions)); } catch {}
+    }
+
+    /* filter tabs */
+    document.querySelectorAll('.filter-tab').forEach(btn => {
+      btn.addEventListener('click', () => {
+        document.querySelectorAll('.filter-tab').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        _filter = btn.dataset.filter;
+        animateFilter();
+      });
+    });
+
+    function animateFilter() {
+      const m = document.getElementById('masonry');
+      m.style.opacity = '0';
+      m.style.transform = 'translateY(8px)';
+      m.style.transition = 'opacity 0.15s ease, transform 0.15s ease';
+      setTimeout(() => {
+        render();
+        m.style.opacity = '1';
+        m.style.transform = '';
+      }, 150);
+    }
+
+    /* search */
+    document.getElementById('search-input').addEventListener('keydown', e => {
+      if (e.key === 'Escape') { e.target.value = ''; render(); }
+    });
+
+    /* ════════════════════════════════════════
+       INIT
+    ════════════════════════════════════════ */
+    async function init() {
+      loadReactions();
+      const preselect = Number(sessionStorage.getItem('board_class') || 0);
+      sessionStorage.removeItem('board_class');
+      try {
+        _classes = isTeacher ? await LS.getClasses() : await LS.myClasses();
+
+        if (!_classes.length) {
+          document.getElementById('masonry').innerHTML = `<div class="empty-state"><div class="empty-icon"><i data-lucide="graduation-cap" style="width:48px;height:48px;stroke:var(--text-3);stroke-width:1.2"></i></div><p>Вы не состоите ни в одном классе</p><p style="font-size:0.82rem;color:var(--text-3);margin-top:4px">Попросите учителя дать код приглашения и введите его на <a href="/dashboard" style="color:var(--violet);font-weight:600">дашборде</a></p></div>`;
+          return;
+        }
+
+        const sel = document.getElementById('class-select');
+        if (_classes.length > 1) {
+          const hasPreselect = preselect && _classes.some(c => c.id === preselect);
+
+          const placeholder = document.createElement('option');
+          placeholder.value = ''; placeholder.textContent = '— Выберите класс —';
+          sel.appendChild(placeholder);
+
+          _classes.forEach(c => {
+            const o = document.createElement('option');
+            o.value = c.id; o.textContent = c.name;
+            if (c.id === preselect) o.selected = true;
+            sel.appendChild(o);
+          });
+          sel.style.display = '';
+          sel.addEventListener('change', () => {
+            const val = Number(sel.value);
+            if (!val) return;
+            _currentClassId = val;
+            loadFeed();
+            scheduleRefresh();
+          });
+
+          // Always load first class (or preselected one)
+          const loadId = hasPreselect ? preselect : _classes[0].id;
+          _currentClassId = loadId;
+          sel.value = loadId;
+          showSkeletons();
+          await loadFeed();
+          scheduleRefresh();
+        } else {
+          _currentClassId = _classes[0].id;
+          showSkeletons();
+          await loadFeed();
+          scheduleRefresh();
+        }
+      } catch (e) {
+        document.getElementById('masonry').innerHTML = `<div class="empty-state"><p style="color:var(--pink)">${esc(e.message)}</p></div>`;
+      }
+    }
+
+    /* ════════════════════════════════════════
+       SKELETONS
+    ════════════════════════════════════════ */
+    function showSkeletons() {
+      document.getElementById('masonry').innerHTML = Array.from({ length: 6 }, () => `
+        <div class="skeleton-card">
+          <div style="display:flex;gap:12px;margin-bottom:12px">
+            <div class="sk-circle"></div>
+            <div style="flex:1">
+              <div class="sk-line" style="width:40%;height:9px"></div>
+              <div class="sk-line" style="width:75%;height:13px;margin-top:6px"></div>
+            </div>
+          </div>
+          <div class="sk-line" style="width:100%"></div>
+          <div class="sk-line" style="width:65%"></div>
+        </div>`).join('');
+    }
+
+    /* ════════════════════════════════════════
+       LOAD FEED
+    ════════════════════════════════════════ */
+    async function loadFeed(silent = false) {
+      if (!silent) showSkeletons();
+      try {
+        const newFeed = await LS.classFeed(_currentClassId);
+        const newTotal = newFeed.assignments.length + newFeed.announcements.length + newFeed.activity.length;
+
+        if (silent && _feed && newTotal > _prevTotal) {
+          // show "new items" banner
+          const diff = newTotal - _prevTotal;
+          document.getElementById('new-banner-text').textContent = `${diff} новых записей`;
+          document.getElementById('new-banner').classList.add('visible');
+          _feed = newFeed; _prevTotal = newTotal;
+          return; // don't re-render until user clicks banner
+        }
+
+        _feed = newFeed; _prevTotal = newTotal;
+        document.getElementById('board-title').textContent = newFeed.class.name + ' — Доска';
+        if (isTeacher) document.getElementById('compose-wrap').style.display = '';
+        render();
+      } catch (e) {
+        if (!silent) document.getElementById('masonry').innerHTML =
+          `<div class="empty-state"><p style="color:var(--pink)">${e.message.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')}</p></div>`;
+      }
+    }
+
+    function dismissBanner() {
+      document.getElementById('new-banner').classList.remove('visible');
+      render();
+    }
+
+    /* ════════════════════════════════════════
+       AUTO REFRESH
+    ════════════════════════════════════════ */
+    function scheduleRefresh() {
+      clearInterval(_refreshTimer);
+      let cd = 30;
+      const info = document.getElementById('refresh-info');
+      const tick = setInterval(() => {
+        cd--;
+        info.textContent = cd > 0 ? `Обновление через ${cd} с` : 'Обновляется…';
+        if (cd <= 0) {
+          clearInterval(tick);
+          loadFeed(true).then(scheduleRefresh);
+        }
+      }, 1000);
+      _refreshTimer = tick;
+    }
+
+    /* ════════════════════════════════════════
+       RENDER
+    ════════════════════════════════════════ */
+    function render() {
+      if (!_feed) return;
+      clearDeadlineTimers();
+
+      const q = document.getElementById('search-input').value.trim().toLowerCase();
+      const items = [];
+      const now = Date.now();
+      const DAY = 86400000;
+
+      const isNew = ts => ts && (now - new Date(ts).getTime()) < DAY;
+
+      if (_filter === 'all' || _filter === 'assignment') {
+        _feed.assignments.forEach(a => {
+          if (q && !a.title.toLowerCase().includes(q)) return;
+          items.push({ type: 'assignment', data: a, ts: a.created_at });
+        });
+      }
+      if (_filter === 'all' || _filter === 'announcement') {
+        _feed.announcements.forEach(a => {
+          if (q && !a.text.toLowerCase().includes(q) && !a.author_name.toLowerCase().includes(q)) return;
+          items.push({ type: 'announcement', data: a, ts: a.created_at });
+        });
+      }
+      if (_filter === 'all' || _filter === 'activity') {
+        _feed.activity.forEach(a => {
+          if (q && !a.student_name.toLowerCase().includes(q) && !a.assignment_title.toLowerCase().includes(q)) return;
+          items.push({ type: 'activity', data: a, ts: a.completed_at });
+        });
+      }
+
+      items.sort((a, b) => new Date(b.ts || 0) - new Date(a.ts || 0));
+
+      // update counts
+      document.getElementById('cnt-all').textContent         = (_feed.assignments.length + _feed.announcements.length + _feed.activity.length);
+      document.getElementById('cnt-assignment').textContent  = _feed.assignments.length;
+      document.getElementById('cnt-announcement').textContent = _feed.announcements.length;
+      document.getElementById('cnt-activity').textContent    = _feed.activity.length;
+
+      const m = document.getElementById('masonry');
+      if (!items.length) {
+        m.innerHTML = `<div class="empty-state"><div class="empty-icon"><i data-lucide="${q ? 'search' : 'inbox'}" style="width:48px;height:48px;stroke:var(--text-3);stroke-width:1.2"></i></div><p>${q ? 'Ничего не найдено' : 'В этом классе пока нет активности'}</p></div>`;
+        return;
+      }
+
+      m.innerHTML = items.map((item, idx) => {
+        const delay = `animation-delay:${Math.min(idx * 50, 500)}ms`;
+        const fresh = isNew(item.ts);
+        if (item.type === 'assignment')   return renderAssignment(item.data, delay, fresh);
+        if (item.type === 'announcement') return renderAnnouncement(item.data, delay, fresh);
+        if (item.type === 'activity')     return renderActivity(item.data, delay, fresh);
+      }).join('');
+
+      if (window.lucide) lucide.createIcons();
+      // start countdown timers for deadline cards
+      startDeadlineTimers();
+    }
+
+    /* ════════════════════════════════════════
+       ASSIGNMENT CARD
+    ════════════════════════════════════════ */
+    function renderAssignment(a, delay, fresh) {
+      const MODES = { exam: 'Контроль', repeat: 'Практика', ct: 'ЦТ-формат', homework: 'ДЗ' };
+      const pct = a.total_members > 0 ? Math.round(a.done_count / a.total_members * 100) : 0;
+      const deadline = a.deadline ? new Date(a.deadline) : null;
+      const isLate   = deadline && deadline < new Date();
+      const isUrgent = deadline && !isLate && (deadline - Date.now()) < 86400000;
+      const newBadge = fresh ? '<span class="badge-new">NEW</span>' : '';
+
+      let statusTag = '';
+      if (!isTeacher) {
+        const maxAtt  = a.max_attempts || 0;
+        const usedAtt = a.attempts_used ?? 0;
+        const attExhausted = maxAtt > 0 && usedAtt >= maxAtt;
+        if (attExhausted)                statusTag = `<span class="tag late">Попытки исчерпаны</span>`;
+        else if (a.my_status === 'completed') statusTag = `<span class="tag done"><i data-lucide="check" style="width:11px;height:11px;vertical-align:-1px"></i> Сдано</span>`;
+        else if (isLate)                 statusTag = `<span class="tag late">Просрочено</span>`;
+        else if (isUrgent)               statusTag = `<span class="tag urgent"><i data-lucide="zap" style="width:11px;height:11px;vertical-align:-1px"></i> Скоро дедлайн</span>`;
+        else                             statusTag = `<span class="tag pending">Не сдано</span>`;
+      }
+
+      // SVG ring for teacher
+      let progressHtml = '';
+      if (isTeacher) {
+        const stroke = 15.9; const r = 15.9; const circ = 2 * Math.PI * r;
+        const dash = (pct / 100) * circ;
+        const ringColor = pct >= 80 ? '#06D664' : pct >= 50 ? '#FF9F1C' : '#F15BB5';
+        progressHtml = `
+          <div class="ring-wrap">
+            <svg width="44" height="44" viewBox="0 0 36 36">
+              <defs><linearGradient id="rg${a.id}" x1="0%" y1="0%" x2="100%" y2="100%">
+                <stop offset="0%" stop-color="#06D6E0"/><stop offset="100%" stop-color="#9B5DE5"/>
+              </linearGradient></defs>
+              <circle cx="18" cy="18" r="${stroke}" fill="none" stroke="rgba(15,23,42,0.07)" stroke-width="3.5"/>
+              <circle cx="18" cy="18" r="${stroke}" fill="none" stroke="url(#rg${a.id})" stroke-width="3.5"
+                stroke-dasharray="${dash.toFixed(1)} ${(circ - dash).toFixed(1)}"
+                stroke-dashoffset="${(circ * 0.25).toFixed(1)}" stroke-linecap="round"/>
+              <text x="18" y="20.5" text-anchor="middle" font-size="7.5" font-weight="800" fill="#3D4F6B">${pct}%</text>
+            </svg>
+            <div class="ring-label">
+              <strong>${a.done_count}</strong> из <strong>${a.total_members}</strong> сдали
+            </div>
+          </div>`;
+      }
+
+      // deadline countdown (updated by JS timer)
+      let deadlineHtml = '';
+      if (deadline) {
+        const cls = isLate ? 'late' : isUrgent ? 'urgent' : 'ok';
+        deadlineHtml = `<div class="deadline-row">
+          <span class="icon"><i data-lucide="calendar" style="width:13px;height:13px;vertical-align:-2px"></i></span>
+          <span>Дедлайн: ${fmtDate(deadline)}</span>
+          ${!isLate ? `<span class="countdown ${isUrgent ? 'urgent' : 'warn'}" data-deadline="${deadline.toISOString()}" id="cd-${a.id}"></span>` : `<span class="countdown urgent">— просрочено</span>`}
+        </div>`;
+      }
+
+      // action
+      const actionHtml = !isTeacher && a.my_status !== 'completed'
+        ? `<a href="/dashboard" class="btn-action">Перейти <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></a>` : '';
+
+      return `<div class="card card-assignment" style="${delay}">
+        <div class="card-strip"></div>
+        <div class="card-body">
+          <div class="card-head">
+            <div class="card-icon"><i data-lucide="${a.is_homework ? 'book-open' : 'clipboard-list'}" style="width:22px;height:22px;stroke:currentColor;stroke-width:1.8"></i></div>
+            <div class="card-head-info">
+              <div class="card-type-label">${a.is_homework ? 'Домашнее задание' : 'Задание'}</div>
+              <div class="card-title">${esc(a.title)}${newBadge}</div>
+            </div>
+          </div>
+          ${a.file_title ? `<div style="font-size:0.73rem;color:var(--text-3);margin-bottom:4px"><i data-lucide="paperclip" style="width:11px;height:11px;vertical-align:-1px"></i> ${esc(a.file_title)}</div>` : ''}
+          <div class="tags">
+            <span class="tag class"><i data-lucide="school" style="width:11px;height:11px;vertical-align:-1px"></i> Для класса</span>
+            <span class="tag">${MODES[a.mode] || a.mode}</span>
+            ${a.is_homework ? `<span class="tag hw">ДЗ</span>` : ''}
+            ${statusTag}
+          </div>
+          ${deadlineHtml}
+          ${progressHtml}
+          ${!isTeacher && (a.max_attempts > 0 || a.attempts_used > 0) ? `<div style="font-size:0.73rem;color:var(--text-3);margin-top:4px"><i data-lucide="repeat" style="width:11px;height:11px;vertical-align:-2px"></i> Попытка ${(a.attempts_used||0)+1}${a.max_attempts > 0 ? ` из ${a.max_attempts}` : ''}</div>` : ''}
+          ${actionHtml ? `<div style="margin-top:8px">${actionHtml}</div>` : ''}
+        </div>
+      </div>`;
+    }
+
+    /* ════════════════════════════════════════
+       ANNOUNCEMENT CARD
+    ════════════════════════════════════════ */
+    const EMOJIS = ['<svg class="ic" viewBox="0 0 24 24"><path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"/></svg>', '<svg class="ic" viewBox="0 0 24 24"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>️', '<svg class="ic" viewBox="0 0 24 24"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 3z"/></svg>'];
+
+    function renderAnnouncement(a, delay, fresh) {
+      const key      = `ann_${a.id}`;
+      const rxState  = _reactions[key] || {};
+      const expanded = _expanded[key];
+      const newBadge = fresh ? '<span class="badge-new">NEW</span>' : '';
+      const isClamped = a.text.length > 200 && !expanded;
+
+      const rxHtml = EMOJIS.map((em, idx) => {
+        const count = rxState[idx] ? 1 : 0;
+        return `<button class="reaction-btn ${rxState[idx] ? 'active' : ''}" onclick="toggleReaction(${a.id},${idx},this)">${em}${count ? ` ${count}` : ''}</button>`;
+      }).join('');
+
+      const delBtn = isTeacher
+        ? `<button class="btn-del-ann" onclick="deleteAnnouncement(${a.id})" title="Удалить"><i data-lucide="x" style="width:13px;height:13px"></i></button>` : '';
+
+      return `<div class="card card-announcement" style="${delay}">
+        <div class="card-strip"></div>
+        <div class="card-body">
+          <div class="card-head">
+            <div class="card-icon"><i data-lucide="megaphone" style="width:22px;height:22px;stroke:currentColor;stroke-width:1.8"></i></div>
+            <div class="card-head-info">
+              <div class="card-type-label">Объявление</div>
+              <div class="card-title" style="font-size:0.87rem;font-weight:600;color:var(--text-2)">${newBadge}</div>
+            </div>
+            <div class="card-head-actions">${delBtn}</div>
+          </div>
+          <div class="announce-text ${isClamped ? 'clamped' : ''}">${esc(a.text)}</div>
+          ${a.text.length > 200 ? `<button class="expand-btn" onclick="toggleExpand(${a.id},this)">${isClamped ? '<i data-lucide="chevron-down" style="width:12px;height:12px;vertical-align:-2px"></i> читать дальше' : '<i data-lucide="chevron-up" style="width:12px;height:12px;vertical-align:-2px"></i> свернуть'}</button>` : ''}
+          <div class="reactions">${rxHtml}</div>
+          <div class="card-footer">
+            <span class="card-author"><i data-lucide="pencil-line" style="width:11px;height:11px;vertical-align:-1px"></i> ${esc(a.author_name)}</span>
+            <span class="card-time">${fmtRelative(a.created_at)}</span>
+          </div>
+        </div>
+      </div>`;
+    }
+
+    /* ════════════════════════════════════════
+       ACTIVITY CARD
+    ════════════════════════════════════════ */
+    function renderActivity(a, delay, fresh) {
+      const pct  = a.total > 0 ? Math.round(a.score / a.total * 100) : 0;
+      const cls  = pct >= 80 ? 'good' : pct >= 50 ? 'ok' : 'bad';
+      const icon = pct >= 80 ? 'trophy' : pct >= 50 ? 'file-text' : 'trending-down';
+      const newBadge = fresh ? '<span class="badge-new">NEW</span>' : '';
+
+      return `<div class="card card-activity" style="${delay}">
+        <div class="card-strip"></div>
+        <div class="card-body">
+          <div class="card-head">
+            <div class="card-icon"><i data-lucide="${icon}" style="width:22px;height:22px;stroke:currentColor;stroke-width:1.8"></i></div>
+            <div class="card-head-info">
+              <div class="card-type-label">Активность</div>
+              <div class="card-title">${esc(a.student_name)}${newBadge}</div>
+            </div>
+          </div>
+          <div style="font-size:0.79rem;color:var(--text-2);margin-bottom:6px">
+            завершил(а) «${esc(a.assignment_title)}»
+          </div>
+          <span class="score-chip ${cls}">${a.score} / ${a.total} — ${pct}%</span>
+          <div class="card-footer">
+            <span></span>
+            <span class="card-time">${fmtRelative(a.completed_at)}</span>
+          </div>
+        </div>
+      </div>`;
+    }
+
+    /* ════════════════════════════════════════
+       DEADLINE COUNTDOWN TIMERS
+    ════════════════════════════════════════ */
+    function startDeadlineTimers() {
+      document.querySelectorAll('[data-deadline]').forEach(el => {
+        function update() {
+          const ms   = new Date(el.dataset.deadline) - Date.now();
+          if (ms <= 0) { el.textContent = ''; return; }
+          const h    = Math.floor(ms / 3600000);
+          const m    = Math.floor((ms % 3600000) / 60000);
+          const s    = Math.floor((ms % 60000) / 1000);
+          el.textContent = h > 0 ? `(${h} ч ${m} мин)` : `(${m}:${String(s).padStart(2,'0')})`;
+        }
+        update();
+        const t = setInterval(update, 1000);
+        _deadlineTimers.push(t);
+      });
+    }
+    function clearDeadlineTimers() {
+      _deadlineTimers.forEach(clearInterval);
+      _deadlineTimers = [];
+    }
+
+    /* ════════════════════════════════════════
+       INTERACTIONS
+    ════════════════════════════════════════ */
+    function toggleExpand(id, btn) {
+      const key = `ann_${id}`;
+      _expanded[key] = !_expanded[key];
+      const expanded = _expanded[key];
+      const card = btn.closest('.card');
+      const textEl = card?.querySelector('.announce-text');
+      if (textEl) textEl.classList.toggle('clamped', !expanded);
+      btn.innerHTML = expanded ? '<svg class="ic" viewBox="0 0 24 24"><polyline points="22 15 12 3 2 15"/></svg> свернуть' : '<svg class="ic" viewBox="0 0 24 24"><polyline points="2 9 12 21 22 9"/></svg> читать дальше';
+    }
+
+    function toggleReaction(id, idx, btn) {
+      const key = `ann_${id}`;
+      if (!_reactions[key]) _reactions[key] = {};
+      _reactions[key][idx] = !_reactions[key][idx];
+      saveReactions();
+      const active = _reactions[key][idx];
+      btn.classList.toggle('active', active);
+      btn.innerHTML = EMOJIS[idx] + (active ? ' 1' : '');
+    }
+
+    async function deleteAnnouncement(id) {
+      if (!await LS.confirm('Это действие нельзя отменить.', { title: 'Удалить объявление?', confirmText: 'Удалить', danger: true })) return;
+      try {
+        await LS.deleteAnnouncement(_currentClassId, id);
+        await loadFeed(true);
+        render();
+        LS.toast('Объявление удалено', 'info');
+      } catch (e) {
+        LS.toast(e.message, 'error');
+      }
+    }
+
+    /* ════════════════════════════════════════
+       COMPOSE
+    ════════════════════════════════════════ */
+    function toggleCompose() {
+      const box = document.getElementById('compose-box');
+      box.classList.toggle('open');
+      if (box.classList.contains('open')) document.getElementById('compose-text').focus();
+    }
+    function onComposeInput() {
+      const len  = document.getElementById('compose-text').value.length;
+      const el   = document.getElementById('compose-chars');
+      el.textContent = `${len} / 1000`;
+      el.className   = `compose-chars${len > 900 ? ' warn' : ''}`;
+    }
+    async function postAnnouncement() {
+      const text = document.getElementById('compose-text').value.trim();
+      if (!text) return;
+      const btn = document.getElementById('btn-post');
+      btn.disabled = true; btn.textContent = 'Публикую…';
+      try {
+        await LS.createAnnouncement(_currentClassId, text);
+        document.getElementById('compose-text').value = '';
+        document.getElementById('compose-chars').textContent = '0 / 1000';
+        document.getElementById('compose-box').classList.remove('open');
+        await loadFeed(true);
+        render();
+        scheduleRefresh();
+        LS.toast('Объявление опубликовано', 'success');
+      } catch (e) {
+        LS.toast(e.message, 'error');
+      } finally {
+        btn.disabled = false; btn.textContent = 'Опубликовать';
+      }
+    }
+    // Ctrl+Enter to post
+    document.getElementById('compose-text').addEventListener('keydown', e => {
+      if (e.ctrlKey && e.key === 'Enter') postAnnouncement();
+      if (e.key === 'Escape') toggleCompose();
+    });
+
+    /* ════════════════════════════════════════
+       HELPERS
+    ════════════════════════════════════════ */
+    function fmtDate(d) {
+      if (!(d instanceof Date)) d = new Date(d);
+      return d.toLocaleDateString('ru-RU', { day: 'numeric', month: 'short', year: d.getFullYear() !== new Date().getFullYear() ? 'numeric' : undefined });
+    }
+    function fmtRelative(s) {
+      if (!s) return '';
+      const d    = new Date(s);
+      const diff = Date.now() - d.getTime();
+      const min  = Math.floor(diff / 60000);
+      if (min < 1)  return 'только что';
+      if (min < 60) return `${min} мин назад`;
+      const h = Math.floor(min / 60);
+      if (h < 24)   return `${h} ч назад`;
+      const days = Math.floor(h / 24);
+      if (days < 7) return `${days} дн назад`;
+      return fmtDate(d);
+    }
+
+    /* ── START ── */
+    init();
+    LS.notif.init();
+    if (window.lucide) lucide.createIcons();
+  </script>
+  </div>
+</div>
+<script src="/js/search.js"></script>
+<script src="/js/mobile.js"></script>
+</body>
+</html>
diff --git a/frontend/classes.html b/frontend/classes.html
new file mode 100644
index 0000000..93522eb
--- /dev/null
+++ b/frontend/classes.html
@@ -0,0 +1,2620 @@
+<!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" />
+  <style>
+
+    /* ── Split layout ── */
+    .sb-content.classes-split { display: flex; height: 100vh; overflow: hidden; background: #f4f5f8; }
+
+    /* Left: class list */
+    .cl-side { width: 300px; flex-shrink: 0; border-right: 1px solid var(--border); background: #fff; display: flex; flex-direction: column; overflow: hidden; }
+    .cl-side-header { padding: 20px 16px 14px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
+    .cl-side-title { font-family: 'Unbounded', sans-serif; font-size: 0.95rem; font-weight: 800; flex: 1; }
+    .btn-new-cl { width: 32px; height: 32px; border: none; border-radius: 10px; background: var(--grad-1); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; flex-shrink: 0; }
+    .btn-new-cl:hover { transform: scale(1.1); box-shadow: 0 4px 14px rgba(6,214,224,0.35); }
+    .btn-new-cl svg { width: 16px; height: 16px; }
+    .cl-list { flex: 1; overflow-y: auto; padding: 10px 8px; display: flex; flex-direction: column; gap: 3px; }
+
+    .cl-item { display: flex; align-items: center; gap: 12px; padding: 12px 13px; border-radius: 14px; cursor: pointer; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; border: 1.5px solid transparent; }
+    .cl-item:hover { background: rgba(155,93,229,0.05); border-color: rgba(155,93,229,0.10); }
+    .cl-item.active { background: rgba(155,93,229,0.09); border-color: rgba(155,93,229,0.22); box-shadow: 0 2px 10px rgba(155,93,229,0.10); }
+    .cl-avatar { width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 800; color: #fff; }
+    .cl-info { flex: 1; min-width: 0; }
+    .cl-name { font-size: 0.88rem; font-weight: 700; color: #0F172A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
+    .cl-meta { font-size: 0.73rem; color: #8898AA; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .cl-chevron { color: #cbd5e1; flex-shrink: 0; transition: color 0.15s; }
+    .cl-item.active .cl-chevron { color: var(--violet); }
+    .cl-item:hover .cl-chevron { color: #94a3b8; }
+    .cl-works-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); flex-shrink: 0; }
+    .cl-empty-side { padding: 40px 16px; text-align: center; color: #8898AA; font-size: 0.8rem; line-height: 1.6; }
+
+    /* Right: class detail */
+    .cl-main { flex: 1; overflow-y: auto; display: flex; flex-direction: column; min-width: 0; }
+
+    @keyframes panelFadeIn {
+      from { opacity: 0; transform: translateY(10px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    #detail-panel.panel-visible,
+    #personal-panel.panel-visible { animation: panelFadeIn 0.22s ease forwards; }
+    .cl-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 14px; padding: 80px 40px; text-align: center; }
+    .cl-placeholder-icon { width: 72px; height: 72px; border-radius: 22px; background: linear-gradient(135deg, rgba(155,93,229,0.12), rgba(6,214,224,0.08)); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
+    .cl-placeholder-icon svg { width: 32px; height: 32px; stroke: var(--violet); stroke-width: 1.6; }
+    .cl-placeholder-title { font-family: 'Unbounded', sans-serif; font-size: 0.95rem; font-weight: 800; color: #0F172A; }
+    .cl-placeholder-sub { font-size: 0.82rem; color: #8898AA; max-width: 220px; line-height: 1.6; }
+    .cl-detail-wrap { padding: 28px 32px 60px; flex: 1; }
+
+    .btn-primary { padding: 10px 24px; border: none; border-radius: var(--r-pill); background: var(--grad-1); color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.88rem; font-weight: 700; cursor: pointer; transition: transform var(--tr); }
+    .btn-primary:hover { transform: translateY(-1px); }
+    .btn-delete-class { padding: 7px 16px; border: 1.5px solid rgba(241,91,181,0.3); border-radius: var(--r-pill); background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 600; color: var(--text-3); cursor: pointer; transition: all var(--tr); }
+    .btn-delete-class:hover { border-color: var(--pink); color: #c0306a; background: rgba(241,91,181,0.06); }
+
+    /* ── Detail panel ── */
+    .detail-panel { background: #fff; border: 1.5px solid var(--border); border-radius: var(--r-lg); padding: 24px 28px; box-shadow: 0 2px 12px rgba(15,23,42,0.06); }
+    .invite-badge {
+      display: inline-flex; align-items: center; gap: 5px;
+      padding: 4px 12px; border-radius: var(--r-pill);
+      background: rgba(155,93,229,0.07); color: var(--violet);
+      font-family: monospace; font-size: 0.8rem; font-weight: 700;
+      letter-spacing: 0.05em; cursor: pointer;
+      transition: background var(--tr);
+      border: 1px dashed rgba(155,93,229,0.25);
+    }
+    .invite-badge:hover { background: rgba(155,93,229,0.14); }
+    .detail-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
+    .detail-title { font-family: 'Unbounded', sans-serif; font-size: 1.2rem; font-weight: 800; }
+    .detail-sub { font-size: 0.84rem; color: var(--text-3); margin-top: 4px; }
+    .detail-actions { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
+
+    .tabs { display: flex; gap: 4px; margin-bottom: 24px; background: rgba(15,23,42,0.05); border-radius: var(--r-pill); padding: 4px; width: fit-content; }
+    .tab-btn { padding: 7px 20px; border: none; border-radius: var(--r-pill); background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 600; color: var(--text-3); cursor: pointer; transition: all var(--tr); }
+    .tab-btn.active { background: #fff; color: var(--text); box-shadow: 0 2px 8px rgba(15,23,42,0.08); }
+    .tab-pane { display: none; }
+    .tab-pane.active { display: block; }
+
+    /* ── Members table ── */
+    .table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin-bottom: 20px; }
+    table { width: 100%; border-collapse: collapse; }
+    th { padding: 10px 14px; text-align: left; font-size: 0.72rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--border); background: rgba(238,242,255,0.5); }
+    td { padding: 11px 14px; font-size: 0.83rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
+    tr:last-child td { border-bottom: none; }
+    .pct-cell { font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 700; }
+    .pct-hi  { color: var(--green); } .pct-mid { color: var(--amber); } .pct-lo  { color: var(--pink); }
+
+    /* ── Assignments ── */
+    .assign-list { display: flex; flex-direction: column; gap: 12px; }
+    .assign-item { border: 1px solid var(--border); border-radius: 14px; padding: 16px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; transition: border-color var(--tr); }
+    .assign-item:hover { border-color: var(--border-h); }
+    .assign-title { font-size: 0.9rem; font-weight: 700; flex: 1; }
+    .assign-meta  { font-size: 0.76rem; color: var(--text-3); margin-top: 3px; }
+    .assign-progress { text-align: right; }
+    .assign-pct   { font-family: 'Unbounded', sans-serif; font-size: 1rem; font-weight: 800; color: var(--violet); }
+    .assign-sub   { font-size: 0.72rem; color: var(--text-3); }
+    .deadline-badge { display: inline-block; padding: 2px 9px; border-radius: var(--r-pill); font-size: 0.7rem; font-weight: 700; }
+    .deadline-ok   { background: rgba(6,214,100,0.1); color: var(--green); }
+    .deadline-soon { background: rgba(255,179,71,0.12); color: var(--amber); }
+    .deadline-over { background: rgba(241,91,181,0.1); color: var(--pink); }
+
+    /* ── Student search ── */
+    .student-search-wrap { position: relative; flex: 1; max-width: 360px; }
+    .student-search-wrap .form-input { width: 100%; }
+    .student-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1.5px solid var(--border-h); border-radius: 12px; box-shadow: 0 8px 32px rgba(15,23,42,0.12); max-height: 240px; overflow-y: auto; z-index: 50; display: none; }
+    .student-dropdown.open { display: block; }
+    .student-opt { padding: 10px 14px; cursor: pointer; font-size: 0.86rem; transition: background var(--tr); }
+    .student-opt:hover, .student-opt.focused { background: rgba(155,93,229,0.07); }
+    .student-opt-name { font-weight: 700; color: var(--text); }
+    .student-opt-email { font-size: 0.76rem; color: var(--text-3); }
+    .student-opt-empty { padding: 12px 14px; color: var(--text-3); font-size: 0.84rem; text-align: center; }
+
+    /* ── Assignment type toggle ── */
+    .atype-tabs { display: flex; gap: 0; background: rgba(15,23,42,0.05); border-radius: var(--r-pill); padding: 3px; margin-bottom: 20px; flex-wrap: wrap; }
+    .atype-tab { flex: 1 1 auto; padding: 7px 10px; border: none; border-radius: var(--r-pill); background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.78rem; font-weight: 600; color: var(--text-3); cursor: pointer; transition: all var(--tr); text-align: center; white-space: nowrap; }
+    .atype-tab.active { background: #fff; color: var(--text); box-shadow: 0 2px 8px rgba(15,23,42,0.08); }
+
+    /* ── File picker ── */
+    .file-picker-search { width: 100%; }
+    .file-picker-list { max-height: 200px; overflow-y: auto; border: 1.5px solid var(--border-h); border-radius: 10px; margin-top: 8px; }
+    .file-pick-item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; transition: background var(--tr); }
+    .file-pick-item:last-child { border-bottom: none; }
+    .file-pick-item:hover { background: rgba(155,93,229,0.05); }
+    .file-pick-item.selected { background: rgba(155,93,229,0.10); }
+    .file-pick-name { font-size: 0.86rem; font-weight: 600; flex: 1; }
+    .file-pick-subj { font-size: 0.74rem; color: var(--text-3); }
+    .file-pick-check { color: var(--violet); font-size: 1rem; }
+
+    /* ── Modal ── */
+    .modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.35); backdrop-filter: blur(4px); z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; }
+    .modal-overlay.open { display: flex; }
+    .modal { background: #fff; border-radius: var(--r-lg); padding: 32px; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 80px rgba(15,23,42,0.2); }
+    .modal-title { font-family: 'Unbounded', sans-serif; font-size: 1rem; font-weight: 800; margin-bottom: 24px; }
+    .form-group { margin-bottom: 16px; }
+    .form-label { display: block; font-size: 0.76rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
+    .form-input, .form-textarea, .form-select { width: 100%; padding: 10px 14px; border: 1.5px solid var(--border-h); border-radius: 10px; font-family: 'Manrope', sans-serif; font-size: 0.88rem; color: var(--text); background: #fafbff; transition: border-color var(--tr); }
+    .form-input:focus, .form-textarea:focus, .form-select:focus { outline: none; border-color: var(--violet); }
+    .btn-cancel { padding: 10px 22px; border: 1.5px solid var(--border-h); border-radius: var(--r-pill); background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.88rem; font-weight: 600; color: var(--text-3); cursor: pointer; }
+    .btn-save   { padding: 10px 28px; border: none; border-radius: var(--r-pill); background: var(--grad-1); color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.88rem; font-weight: 700; cursor: pointer; }
+    .btn-save:disabled { opacity: 0.5; cursor: not-allowed; }
+
+    .spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--violet); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 30px auto; }
+
+    /* ── announcements ── */
+    .ann-item { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; display: flex; gap: 12px; }
+    .ann-body { flex: 1; }
+    .ann-author { font-size: 0.78rem; font-weight: 700; color: var(--violet); }
+    .ann-text { font-size: 0.87rem; margin-top: 4px; white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
+    .ann-date { font-size: 0.72rem; color: var(--text-3); margin-top: 6px; }
+    .ann-del { background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 1rem; padding: 0; transition: color var(--tr); }
+    .ann-del:hover { color: var(--pink); }
+
+    /* ── notification bell ── */
+    .notif-bell-wrap { position: relative; }
+    .notif-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; background: var(--pink); color: #fff; border-radius: 99px; font-size: 0.65rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
+    .notif-drop-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; border-bottom: 1px solid var(--border); }
+    .notif-drop-title { font-family: 'Unbounded', sans-serif; font-size: 0.75rem; font-weight: 800; }
+    .notif-read-all { background: none; border: none; font-size: 0.72rem; color: var(--violet); cursor: pointer; font-family: 'Manrope', sans-serif; font-weight: 600; }
+    .notif-item { display: flex; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); cursor: pointer; text-decoration: none; color: inherit; transition: background var(--tr); }
+    .notif-item:last-child { border-bottom: none; }
+    .notif-item:hover { background: rgba(155,93,229,0.04); }
+    .notif-item.unread { background: rgba(155,93,229,0.06); }
+    .notif-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--violet); flex-shrink: 0; margin-top: 5px; }
+    .notif-dot.read { background: transparent; border: 1.5px solid var(--border-h); }
+    .notif-msg { font-size: 0.79rem; line-height: 1.4; flex: 1; }
+    .notif-time { font-size: 0.68rem; color: var(--text-3); margin-top: 2px; }
+    .notif-empty { padding: 24px 14px; text-align: center; color: var(--text-3); font-size: 0.82rem; }
+    .empty { text-align: center; padding: 30px; color: var(--text-3); font-size: 0.88rem; }
+    .error { color: var(--pink); font-size: 0.85rem; padding: 8px 0; }
+    .toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); background: #0F172A; color: #fff; padding: 10px 24px; border-radius: var(--r-pill); font-size: 0.85rem; font-weight: 600; z-index: 999; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
+    .toast.show { opacity: 1; }
+
+    /* ── Teacher dashboard ── */
+    .dash-stat-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
+    .dash-stat-card { flex: 1; min-width: 120px; background: rgba(155,93,229,0.06); border: 1.5px solid rgba(155,93,229,0.14); border-radius: 14px; padding: 16px 20px; }
+    .dash-stat-val { font-family: 'Unbounded', sans-serif; font-size: 1.5rem; font-weight: 900; color: var(--violet); }
+    .dash-stat-lbl { font-size: 0.75rem; color: var(--text-3); font-weight: 600; margin-top: 4px; }
+    .dash-assign-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
+    .dash-assign-row:last-child { border-bottom: none; }
+    .dash-assign-bar-wrap { flex: 1; height: 6px; background: rgba(15,23,42,0.08); border-radius: 99px; overflow: hidden; min-width: 80px; }
+    .dash-assign-bar { height: 100%; border-radius: 99px; background: linear-gradient(90deg,#06D6E0,#9B5DE5); transition: width .5s ease; }
+    .dash-lagging { background: rgba(241,91,181,0.07); border: 1.5px solid rgba(241,91,181,0.18); border-radius: 12px; padding: 10px 14px; font-size: 0.82rem; color: var(--pink); margin-top: 4px; display: inline-block; }
+
+    /* ── Journal / grade matrix ── */
+    .journal-wrap { overflow-x: auto; }
+    .journal-table { border-collapse: collapse; min-width: 100%; }
+    .journal-table th { padding: 8px 12px; font-size: 0.7rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1.5px solid var(--border); background: rgba(238,242,255,0.5); white-space: nowrap; }
+    .journal-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 0.82rem; white-space: nowrap; text-align: center; }
+    .journal-table td:first-child { text-align: left; font-weight: 600; color: var(--text); }
+    .journal-table tr:last-child td { border-bottom: none; }
+    .j-cell-hi  { background: rgba(6,214,100,0.12); color: #059669; font-family: 'Unbounded',sans-serif; font-size: 0.75rem; font-weight: 700; border-radius: 6px; padding: 3px 7px; }
+    .j-cell-mid { background: rgba(255,179,71,0.14); color: #b45309; font-family: 'Unbounded',sans-serif; font-size: 0.75rem; font-weight: 700; border-radius: 6px; padding: 3px 7px; }
+    .j-cell-lo  { background: rgba(241,91,181,0.12); color: #be185d; font-family: 'Unbounded',sans-serif; font-size: 0.75rem; font-weight: 700; border-radius: 6px; padding: 3px 7px; }
+    .j-cell-none { color: var(--text-3); font-size: 0.76rem; }
+
+    /* ── Settings tab ── */
+    .settings-section { background: #fff; border: 1.5px solid var(--border); border-radius: 14px; padding: 20px 24px; margin-bottom: 16px; }
+    .settings-section-title { font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800; margin-bottom: 16px; color: var(--text); }
+    .settings-danger { border-color: rgba(241,91,181,0.3); background: rgba(241,91,181,0.03); }
+    .settings-danger .settings-section-title { color: #be185d; }
+    .invite-regen-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+    .invite-code-display { font-family: monospace; font-size: 1.1rem; font-weight: 700; color: var(--violet); background: rgba(155,93,229,0.08); border: 1.5px dashed rgba(155,93,229,0.3); border-radius: 10px; padding: 8px 18px; letter-spacing: 0.08em; }
+
+    /* results overlay */
+    .results-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.45); backdrop-filter: blur(6px); z-index: 300; display: none; align-items: center; justify-content: center; padding: 20px; }
+    .results-overlay.open { display: flex; }
+    .results-box { background: #fff; border-radius: var(--r-lg); padding: 28px 32px 32px; width: 100%; max-width: 740px; max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 80px rgba(15,23,42,0.2); }
+
+    /* overlay header */
+    .res-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
+    .res-header-title { font-family: 'Unbounded',sans-serif; font-weight: 800; font-size: 1rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .res-csv-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border: 1.5px solid var(--border-h); border-radius: var(--r-pill); background: transparent; font-family: 'Manrope',sans-serif; font-size: 0.78rem; font-weight: 600; color: var(--text-2); cursor: pointer; transition: all var(--tr); white-space: nowrap; }
+    .res-csv-btn:hover { border-color: var(--violet); color: var(--violet); }
+    .res-close-btn { padding: 6px 14px; border: 1.5px solid rgba(241,91,181,0.3); border-radius: var(--r-pill); background: transparent; font-family: 'Manrope',sans-serif; font-size: 0.78rem; font-weight: 600; color: #c0306a; cursor: pointer; transition: all var(--tr); white-space: nowrap; }
+    .res-close-btn:hover { border-color: var(--pink); background: rgba(241,91,181,0.06); }
+
+    /* overlay tabs */
+    .res-tabs { display: flex; gap: 4px; background: rgba(15,23,42,0.05); border-radius: var(--r-pill); padding: 4px; margin-bottom: 20px; width: fit-content; }
+    .res-tab-btn { padding: 6px 18px; border: none; border-radius: var(--r-pill); background: transparent; font-family: 'Manrope',sans-serif; font-size: 0.82rem; font-weight: 600; color: var(--text-3); cursor: pointer; transition: all var(--tr); }
+    .res-tab-btn.active { background: #fff; color: var(--text); box-shadow: 0 2px 8px rgba(15,23,42,0.08); }
+
+    /* summary stats chips */
+    .res-stat-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
+    .res-stat-chip { flex: 1; min-width: 90px; background: rgba(155,93,229,0.06); border: 1.5px solid rgba(155,93,229,0.13); border-radius: 12px; padding: 12px 16px; text-align: center; }
+    .res-stat-val { font-family: 'Unbounded',sans-serif; font-size: 1.3rem; font-weight: 900; color: var(--violet); }
+    .res-stat-lbl { font-size: 0.7rem; color: var(--text-3); font-weight: 600; margin-top: 3px; }
+
+    /* completion bar */
+    .res-prog-wrap { height: 6px; background: rgba(15,23,42,0.08); border-radius: 99px; overflow: hidden; margin-bottom: 20px; }
+    .res-prog-fill { height: 100%; background: linear-gradient(90deg,#06D6E0,#9B5DE5); border-radius: 99px; transition: width .5s ease; }
+
+    /* score distribution */
+    .res-distrib { margin-bottom: 20px; }
+    .res-distrib-title { font-size: 0.72rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing:.06em; margin-bottom: 10px; }
+    .res-distrib-bars { display: flex; gap: 6px; align-items: flex-end; height: 72px; }
+    .res-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
+    .res-bar-fill { width: 100%; border-radius: 6px 6px 0 0; min-height: 4px; transition: height .4s ease; }
+    .res-bar-lbl  { font-size: 0.66rem; color: var(--text-3); font-weight: 600; text-align: center; line-height: 1.2; }
+    .res-bar-cnt  { font-size: 0.72rem; font-weight: 700; color: var(--text); }
+
+    /* student list */
+    .res-row { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 10px; cursor: pointer; transition: background var(--tr); }
+    .res-row:hover { background: rgba(155,93,229,0.05); }
+    .res-row + .res-row { margin-top: 2px; }
+    .res-rank { font-family: 'Unbounded', sans-serif; font-size: 0.85rem; font-weight: 800; min-width: 28px; color: var(--text-3); }
+    .res-name { flex: 1; }
+    .res-pct  { font-family: 'Unbounded', sans-serif; font-size: 1rem; font-weight: 800; }
+    .res-score { font-size: 0.8rem; color: var(--text-3); }
+    .res-pending { color: var(--text-3); font-style: italic; font-size: 0.82rem; }
+
+    /* question stats tab */
+    .qs-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; margin-bottom: 6px; background: rgba(15,23,42,0.02); border: 1px solid var(--border); }
+    .qs-num  { font-family: 'Unbounded',sans-serif; font-size: 0.72rem; font-weight: 800; color: var(--text-3); min-width: 20px; }
+    .qs-text { flex: 1; font-size: 0.82rem; font-weight: 500; line-height: 1.4; color: var(--text); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
+    .qs-bar-wrap { width: 90px; height: 6px; background: rgba(15,23,42,0.08); border-radius: 99px; overflow: hidden; flex-shrink: 0; }
+    .qs-bar-fill { height: 100%; border-radius: 99px; }
+    .qs-pct  { font-family: 'Unbounded',sans-serif; font-size: 0.78rem; font-weight: 800; min-width: 38px; text-align: right; flex-shrink: 0; }
+    .qs-cnt  { font-size: 0.7rem; color: var(--text-3); min-width: 54px; text-align: right; flex-shrink: 0; }
+
+    /* drill-down review */
+    .res-drill { display: none; }
+    .res-drill.open { display: block; }
+    .res-drill-header { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
+    .res-back-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border: 1.5px solid var(--border-h); border-radius: var(--r-pill); background: transparent; font-family: 'Manrope',sans-serif; font-size: 0.82rem; font-weight: 600; color: var(--text-2); cursor: pointer; transition: all var(--tr); }
+    .res-back-btn:hover { border-color: var(--violet); color: var(--violet); }
+    .res-drill-name { font-family: 'Unbounded',sans-serif; font-size: 0.95rem; font-weight: 800; }
+    .res-drill-pct { font-family: 'Unbounded',sans-serif; font-size: 0.85rem; font-weight: 800; margin-left: auto; }
+
+    /* question review items */
+    .rq-item { border: 1.5px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
+    .rq-item.correct { border-color: rgba(6,214,100,0.3); background: rgba(6,214,100,0.04); }
+    .rq-item.wrong   { border-color: rgba(241,91,181,0.3); background: rgba(241,91,181,0.04); }
+    .rq-item.skipped { border-color: rgba(15,23,42,0.12); background: rgba(15,23,42,0.02); }
+    .rq-num   { font-size: 0.68rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing:.05em; margin-bottom: 5px; }
+    .rq-text  { font-size: 0.88rem; font-weight: 600; line-height: 1.45; margin-bottom: 10px; }
+    .rq-opts  { display: flex; flex-direction: column; gap: 5px; }
+    .rq-opt   { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; padding: 5px 10px; border-radius: 8px; }
+    .rq-opt.chosen  { background: rgba(241,91,181,0.1); color: #be185d; font-weight: 600; }
+    .rq-opt.answer  { background: rgba(6,214,100,0.1); color: #059669; font-weight: 600; }
+    .rq-opt.both    { background: rgba(6,214,100,0.12); color: #059669; font-weight: 700; }
+    .rq-icon        { font-size: 0.9rem; flex-shrink: 0; }
+    .rq-expl  { margin-top: 10px; font-size: 0.79rem; color: var(--text-3); background: rgba(155,93,229,0.05); border-radius: 8px; padding: 8px 12px; line-height: 1.5; }
+
+    /* ── Mobile responsive ── */
+    @media (max-width: 1000px) {
+      .cl-side { width: 240px; }
+    }
+    @media (max-width: 900px) {
+      .cl-side { width: 200px; }
+      .cl-chevron { display: none; }
+    }
+    @media (max-width: 768px) {
+      /* Split → stacked with toggle */
+      .sb-content.classes-split { flex-direction: column; height: auto; overflow: visible; }
+      .cl-side {
+        width: 100%; border-right: none; border-bottom: 1px solid var(--border);
+        max-height: none; overflow: visible;
+      }
+      .cl-side-header { padding: 14px 12px 10px; }
+      .cl-list {
+        display: flex; flex-direction: row; overflow-x: auto; overflow-y: hidden;
+        gap: 6px; padding: 8px 10px; -webkit-overflow-scrolling: touch;
+        scrollbar-width: none;
+      }
+      .cl-list::-webkit-scrollbar { display: none; }
+      .cl-item {
+        flex-shrink: 0; padding: 8px 12px; border-radius: 12px;
+        min-width: auto; gap: 8px;
+      }
+      .cl-avatar { width: 32px; height: 32px; border-radius: 10px; font-size: 0.7rem; }
+      .cl-avatar svg, .cl-avatar i { width: 16px !important; height: 16px !important; }
+      .cl-name { font-size: 0.78rem; max-width: 100px; }
+      .cl-meta { display: none; }
+      .cl-item-personal { padding: 8px 12px; }
+      .cl-item-personal .cl-avatar { width: 32px; height: 32px; }
+      .cl-personal-sep { display: none; }
+
+      .cl-main { min-height: 50vh; }
+      .cl-detail-wrap { padding: 16px 12px 40px; }
+      .cl-placeholder { padding: 40px 20px; }
+
+      /* Detail panel */
+      .detail-panel { padding: 16px 14px; border-radius: 14px; }
+      .detail-header { gap: 10px; flex-direction: column; }
+      .detail-title { font-size: 0.95rem; }
+      .detail-sub { font-size: 0.78rem; word-break: break-word; }
+      .detail-actions { margin-left: 0; width: 100%; justify-content: flex-start; }
+      .detail-actions .btn-ghost,
+      .detail-actions .invite-badge { font-size: 0.72rem; padding: 5px 10px; }
+
+      /* Tabs → scrollable */
+      .tabs {
+        width: 100%; overflow-x: auto; flex-wrap: nowrap;
+        scrollbar-width: none; -webkit-overflow-scrolling: touch;
+      }
+      .tabs::-webkit-scrollbar { display: none; }
+      .tab-btn { padding: 6px 14px; font-size: 0.76rem; white-space: nowrap; flex-shrink: 0; }
+
+      /* Tables */
+      .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+      table { min-width: 500px; }
+      th, td { padding: 8px 10px; font-size: 0.76rem; }
+
+      /* Assignments */
+      .assign-item { padding: 12px 14px; gap: 10px; }
+      .assign-title { font-size: 0.82rem; }
+      .assign-item .btn-ghost { font-size: 0.72rem; padding: 5px 10px; }
+
+      /* Modals */
+      .modal { max-width: calc(100vw - 24px); margin: 0 12px; border-radius: 18px; }
+      .modal-title { font-size: 0.95rem; }
+
+      /* Icon picker */
+      .icon-picker { grid-template-columns: repeat(auto-fill, 36px); max-height: 140px; }
+      .ip-btn { width: 36px; height: 36px; }
+      .ip-btn svg { width: 16px; height: 16px; }
+      .ip-preview { width: 44px; height: 44px; }
+      .ip-preview svg { width: 22px; height: 22px; }
+
+      /* Assignment type tabs */
+      .atype-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
+      .atype-tabs::-webkit-scrollbar { display: none; }
+      .atype-tab { font-size: 0.72rem; padding: 6px 8px; white-space: nowrap; flex-shrink: 0; }
+
+      /* Works cards */
+      .work-card { flex-wrap: wrap; gap: 8px; }
+      .work-meta { width: 100%; display: flex; align-items: center; gap: 8px; justify-content: flex-start; }
+
+      /* Settings */
+      .settings-section { padding: 14px 0; }
+
+      /* Announcements */
+      .announcement-card { padding: 14px; }
+
+      /* Journal table */
+      .journal-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+      .journal-table { min-width: 500px; }
+    }
+
+    @media (max-width: 480px) {
+      .cl-detail-wrap { padding: 12px 8px 30px; }
+      .detail-panel { padding: 12px 10px; }
+      .detail-title { font-size: 0.88rem; }
+      .tabs { gap: 2px; padding: 3px; }
+      .tab-btn { padding: 5px 10px; font-size: 0.72rem; }
+      .modal { padding: 18px 14px; }
+    }
+
+    /* ── Submissions (works tab) ── */
+    .works-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; align-items: center; }
+    .works-chip {
+      padding: 4px 14px; border-radius: 99px; border: 1.5px solid rgba(15,23,42,0.1);
+      background: #fff; color: #8898AA;
+      font-family: 'Manrope', sans-serif; font-size: 0.74rem; font-weight: 700;
+      cursor: pointer; transition: all 0.15s;
+    }
+    .works-chip.active { background: #0F172A; color: #fff; border-color: #0F172A; }
+    .works-chip:hover:not(.active) { border-color: rgba(155,93,229,0.35); color: var(--violet); }
+
+    .work-card {
+      background: #fff; border: 1.5px solid rgba(15,23,42,0.08);
+      border-left: 4px solid var(--wc, #9B5DE5);
+      border-radius: 14px; padding: 14px 16px;
+      display: flex; align-items: flex-start; gap: 14px;
+      cursor: pointer; transition: all 0.18s;
+      box-shadow: 0 1px 4px rgba(15,23,42,0.04);
+      margin-bottom: 8px;
+    }
+    .work-card:hover { box-shadow: 0 6px 24px rgba(15,23,42,0.1); border-color: rgba(15,23,42,0.14); }
+    .work-card.reviewed { --wc: #059652; }
+    .work-card.new { --wc: #06D6E0; }
+    .work-icon {
+      width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
+      background: rgba(155,93,229,0.08); color: var(--violet);
+      display: flex; align-items: center; justify-content: center;
+    }
+    .work-icon svg { width: 18px; height: 18px; }
+    .work-body { flex: 1; min-width: 0; }
+    .work-student { font-size: 0.88rem; font-weight: 700; color: #0F172A; margin-bottom: 2px; }
+    .work-assign  { font-size: 0.76rem; color: var(--violet); font-weight: 600; margin-bottom: 3px; }
+    .work-file    { font-size: 0.74rem; color: #8898AA; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .work-msg     { font-size: 0.76rem; color: #3D4F6B; margin-top: 5px; line-height: 1.4; font-style: italic; }
+    .work-note    { font-size: 0.74rem; color: #059652; margin-top: 4px; font-style: italic; }
+    .work-meta    { font-size: 0.70rem; color: #8898AA; white-space: nowrap; flex-shrink: 0; text-align: right; }
+    .work-status  {
+      display: inline-flex; align-items: center; gap: 4px;
+      padding: 2px 9px; border-radius: 99px; font-size: 0.70rem; font-weight: 700;
+      margin-bottom: 6px;
+    }
+    .work-status.new      { background: rgba(6,214,224,0.1);  color: #06aab3; }
+    .work-status.reviewed { background: rgba(5,150,82,0.1);   color: #059652; }
+    .work-grade {
+      display: inline-flex; align-items: center; gap: 4px;
+      padding: 2px 9px; border-radius: 99px; font-size: 0.72rem; font-weight: 800;
+      background: rgba(155,93,229,0.1); color: var(--violet);
+      margin-left: 6px;
+    }
+    .work-grade.high { background: rgba(5,150,82,0.12); color: #059652; }
+    .work-grade.mid  { background: rgba(255,193,7,0.14); color: #c07c00; }
+    .work-grade.low  { background: rgba(241,91,181,0.12); color: #c0306a; }
+    .work-del-btn {
+      margin-top: 6px; border: none; background: transparent; color: #c0306a;
+      cursor: pointer; opacity: 0.4; transition: opacity 0.15s; padding: 4px;
+      border-radius: 6px; display: flex; align-items: center; justify-content: center;
+      margin-left: auto;
+    }
+    .work-del-btn:hover { opacity: 1; background: rgba(241,91,181,0.1); }
+
+    /* grade input row */
+    .grade-input-row {
+      display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
+    }
+    .grade-input-row label { font-size: 0.8rem; font-weight: 600; color: #3D4F6B; white-space: nowrap; }
+    .grade-input {
+      width: 80px; padding: 6px 10px; border: 1.5px solid rgba(15,23,42,0.15); border-radius: 8px;
+      font-family: 'Manrope', sans-serif; font-size: 0.88rem; font-weight: 700; color: #0F172A;
+      background: #fff; text-align: center;
+    }
+    .grade-input:focus { outline: none; border-color: var(--violet); }
+    .grade-letter {
+      font-size: 1.1rem; font-weight: 900;
+      width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
+      background: rgba(155,93,229,0.08); color: var(--violet); flex-shrink: 0;
+    }
+
+    /* review modal */
+    #review-modal .modal { max-width: 480px; }
+    .review-file-link {
+      display: inline-flex; align-items: center; gap: 6px;
+      padding: 7px 14px; border-radius: 10px; font-size: 0.82rem; font-weight: 600;
+      background: rgba(155,93,229,0.07); color: var(--violet); text-decoration: none;
+      border: 1.5px solid rgba(155,93,229,0.2); transition: background 0.15s;
+    }
+    .review-file-link:hover { background: rgba(155,93,229,0.14); }
+
+    /* ── Icon picker ── */
+    .icon-picker-label { font-size: 0.78rem; font-weight: 600; color: var(--text-3); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
+    .icon-picker {
+      display: grid; grid-template-columns: repeat(auto-fill, 42px); gap: 4px;
+      max-height: 180px; overflow-y: auto; padding: 8px;
+      background: rgba(15,23,42,0.02); border: 1.5px solid rgba(15,23,42,0.08);
+      border-radius: 12px;
+    }
+    .icon-picker::-webkit-scrollbar { width: 5px; }
+    .icon-picker::-webkit-scrollbar-thumb { background: rgba(15,23,42,0.12); border-radius: 99px; }
+    .ip-btn {
+      width: 42px; height: 42px; border: 2px solid transparent; border-radius: 10px;
+      background: #fff; cursor: pointer; display: flex;
+      align-items: center; justify-content: center; transition: all 0.12s;
+      color: #3D4F6B;
+    }
+    .ip-btn svg { width: 20px; height: 20px; }
+    .ip-btn:hover { border-color: rgba(155,93,229,0.3); transform: scale(1.1); color: var(--violet); }
+    .ip-btn.selected { border-color: var(--violet); background: rgba(155,93,229,0.1); color: var(--violet); box-shadow: 0 0 0 2px rgba(155,93,229,0.15); }
+    .ip-preview {
+      width: 52px; height: 52px; border-radius: 14px;
+      display: flex; align-items: center; justify-content: center;
+      background: rgba(155,93,229,0.08); border: 2px solid rgba(155,93,229,0.15);
+      flex-shrink: 0; color: var(--violet);
+    }
+    .ip-preview svg { width: 28px; height: 28px; }
+    .ip-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
+    .color-picker { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
+    .cp-btn {
+      width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid transparent;
+      cursor: pointer; transition: all 0.12s; flex-shrink: 0;
+    }
+    .cp-btn:hover { transform: scale(1.2); }
+    .cp-btn.selected { border-color: #0F172A; box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor; }
+
+    /* ── Personal assignments ── */
+    .cl-personal-sep { height: 1px; background: var(--border); margin: 6px 10px 8px; }
+    .cl-item-personal .cl-avatar {
+      background: linear-gradient(135deg, #F15BB5, #FF9F1C);
+      display: flex; align-items: center; justify-content: center;
+    }
+    .pa-item {
+      display: flex; align-items: flex-start; gap: 14px;
+      padding: 14px 16px; border: 1.5px solid rgba(15,23,42,0.08);
+      border-radius: 12px; margin-bottom: 8px; background: #fff;
+      transition: border-color var(--tr), box-shadow var(--tr);
+    }
+    .pa-item:hover { border-color: rgba(241,91,181,0.25); box-shadow: 0 2px 12px rgba(15,23,42,0.05); }
+    .pa-student {
+      display: inline-flex; align-items: center; gap: 4px;
+      padding: 2px 10px; border-radius: 999px;
+      background: rgba(241,91,181,0.10); color: #9b3c7e;
+      font-size: 0.72rem; font-weight: 700;
+    }
+    .pa-status-done {
+      display: inline-flex; align-items: center; gap: 4px;
+      padding: 2px 10px; border-radius: 999px;
+      background: rgba(6,214,100,0.10); color: #059669;
+      font-size: 0.72rem; font-weight: 700;
+    }
+    .pa-status-pending {
+      display: inline-flex; align-items: center; gap: 4px;
+      padding: 2px 10px; border-radius: 999px;
+      background: rgba(15,23,42,0.06); color: var(--text-3);
+      font-size: 0.72rem; font-weight: 700;
+    }
+  </style>
+  <script src="https://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+</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"><i data-lucide="layout-dashboard" class="sb-icon"></i><span class="sb-lbl">Доска</span></a>
+      <span class="sb-link active"><i data-lucide="graduation-cap" class="sb-icon"></i><span class="sb-lbl">Классы</span></span>
+      <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>
+      <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="nav-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>
+    </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>
+          <span class="sb-logout" style="pointer-events:none">Мой профиль</span>
+        </div>
+      </a>
+    </div>
+  </aside>
+  <div class="notif-drop" id="notif-drop"></div>
+  <div class="sb-content classes-split">
+
+    <!-- Left: class list sidebar -->
+    <div class="cl-side">
+      <div class="cl-side-header">
+        <span class="cl-side-title">Классы</span>
+        <a href="/gradebook" class="btn-new-cl" style="background:rgba(155,93,229,0.15);color:var(--violet)" title="Журнал оценок">
+          <i data-lucide="table"></i>
+        </a>
+        <button class="btn-new-cl" onclick="openCreateClass()" title="Создать класс">
+          <i data-lucide="plus"></i>
+        </button>
+      </div>
+      <div class="cl-item cl-item-personal" onclick="openPersonalAssignments()" id="cc-personal">
+        <div class="cl-avatar">
+          <svg class="ic" viewBox="0 0 24 24" style="width:18px;height:18px;stroke:#fff;stroke-width:2;fill:none"><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 class="cl-info">
+          <div class="cl-name">Личные задания</div>
+          <div class="cl-meta" id="pa-sidebar-count">—</div>
+        </div>
+        <i data-lucide="chevron-right" class="cl-chevron" style="width:15px;height:15px"></i>
+      </div>
+      <div class="cl-personal-sep"></div>
+      <div class="cl-list" id="classes-grid"><div class="spinner" style="margin:20px auto;width:24px;height:24px;border-width:2px"></div></div>
+    </div>
+
+    <!-- Right: class content -->
+    <div class="cl-main">
+
+      <!-- Empty state -->
+      <div class="cl-placeholder" id="cl-placeholder">
+        <div class="cl-placeholder-icon"><i data-lucide="graduation-cap"></i></div>
+        <div class="cl-placeholder-title">Выберите класс</div>
+        <div class="cl-placeholder-sub">Нажмите на класс слева или создайте новый</div>
+        <button class="btn-primary" onclick="openCreateClass()" style="margin-top:4px">+ Создать класс</button>
+      </div>
+
+      <!-- Personal Assignments Panel -->
+      <div id="personal-panel" style="display:none">
+        <div class="cl-detail-wrap">
+          <div class="detail-panel">
+            <div class="detail-header">
+              <div style="flex:1;min-width:0">
+                <div class="detail-title">Личные задания</div>
+                <div class="detail-sub">Задания, выданные напрямую конкретным ученикам</div>
+              </div>
+            </div>
+            <div id="personal-list" style="margin-top:20px"></div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Detail panel -->
+      <div id="detail-panel" style="display:none">
+      <div class="cl-detail-wrap">
+      <div class="detail-panel">
+        <div class="detail-header">
+          <div style="flex:1;min-width:0">
+            <div class="detail-title" id="d-name"></div>
+            <div class="detail-sub" id="d-sub"></div>
+          </div>
+          <div class="detail-actions">
+            <button class="btn-ghost" onclick="copyInvite()"><i data-lucide="link-2" style="width:13px;height:13px;vertical-align:-2px"></i> Ссылка</button>
+            <button class="btn-primary" onclick="openCreateAssignment()">+ Задание</button>
+          </div>
+        </div>
+
+        <div class="tabs">
+          <button class="tab-btn active" data-tab="dash"     onclick="switchDetailTab(this)">Дашборд</button>
+          <button class="tab-btn"        data-tab="members"  onclick="switchDetailTab(this)">Ученики</button>
+          <button class="tab-btn"        data-tab="assign"   onclick="switchDetailTab(this)">Задания</button>
+          <button class="tab-btn"        data-tab="journal"  onclick="switchDetailTab(this)">Журнал</button>
+          <button class="tab-btn"        data-tab="announce" onclick="switchDetailTab(this)">Объявления</button>
+          <button class="tab-btn"        data-tab="works"    onclick="switchDetailTab(this)"><i data-lucide="paperclip" style="width:13px;height:13px;vertical-align:-2px"></i> Работы</button>
+          <button class="tab-btn"        data-tab="theory"   onclick="switchDetailTab(this)"><i data-lucide="brain" style="width:13px;height:13px;vertical-align:-2px"></i> Теория</button>
+          <button class="tab-btn"        data-tab="settings" onclick="switchDetailTab(this)"><i data-lucide="settings" style="width:13px;height:13px;vertical-align:-2px"></i> Настройки</button>
+        </div>
+
+        <!-- Dashboard -->
+        <div class="tab-pane active" id="dtab-dash">
+          <div id="dash-content"><div class="spinner"></div></div>
+        </div>
+
+        <!-- Members -->
+        <div class="tab-pane" id="dtab-members">
+          <div style="display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap">
+            <div class="student-search-wrap">
+              <input class="form-input" id="add-member-search" placeholder="Поиск ученика по имени или email…" autocomplete="off"
+                oninput="filterStudents(this.value)" onfocus="openStudentDrop()" onblur="setTimeout(closeStudentDrop,180)" />
+              <div class="student-dropdown" id="student-drop"></div>
+            </div>
+            <button class="btn-ghost" onclick="doAddMember()" id="btn-add-member" disabled>+ Добавить</button>
+            <span id="add-member-err" style="font-size:0.82rem;color:var(--pink)"></span>
+          </div>
+          <div class="table-wrap">
+            <table>
+              <thead><tr><th>Имя</th><th>Email</th><th>Тестов</th><th>Средний %</th><th>Вступил</th><th></th></tr></thead>
+              <tbody id="d-members"></tbody>
+            </table>
+          </div>
+        </div>
+
+        <!-- Assignments -->
+        <div class="tab-pane" id="dtab-assign">
+          <div class="assign-list" id="d-assignments"></div>
+        </div>
+
+        <!-- Journal -->
+        <div class="tab-pane" id="dtab-journal">
+          <div id="journal-content"><div class="spinner"></div></div>
+        </div>
+
+        <!-- Works (student submissions) -->
+        <div class="tab-pane" id="dtab-works">
+          <div id="works-content"><div class="spinner"></div></div>
+        </div>
+
+        <!-- Theory -->
+        <div class="tab-pane" id="dtab-theory">
+          <div id="theory-content"><div class="spinner"></div></div>
+        </div>
+
+        <!-- Settings -->
+        <div class="tab-pane" id="dtab-settings">
+          <div class="settings-section">
+            <div class="settings-section-title">Основная информация</div>
+            <div class="ip-row">
+              <div class="ip-preview" id="set-icon-preview"><i data-lucide="book-open"></i></div>
+              <div style="flex:1">
+                <div class="form-group" style="margin-bottom:0">
+                  <label class="form-label">Название класса</label>
+                  <input class="form-input" id="set-name" placeholder="11А · Биология" />
+                </div>
+              </div>
+            </div>
+            <div class="form-group">
+              <div class="icon-picker-label">Иконка класса</div>
+              <div class="icon-picker" id="set-icon-picker"></div>
+              <div class="icon-picker-label" style="margin-top:10px">Цвет</div>
+              <div class="color-picker" id="set-color-picker"></div>
+            </div>
+            <div class="form-group">
+              <label class="form-label">Описание</label>
+              <textarea class="form-textarea" id="set-desc" rows="2" placeholder="Подготовка к ЦТ 2026"></textarea>
+            </div>
+            <button class="btn-primary" onclick="saveClassSettings()">Сохранить изменения</button>
+          </div>
+          <div class="settings-section">
+            <div class="settings-section-title">Код приглашения</div>
+            <div class="invite-regen-row">
+              <div class="invite-code-display" id="set-invite-code">—</div>
+              <button class="btn-ghost" onclick="copyInvite()"><i data-lucide="link-2" style="width:13px;height:13px;vertical-align:-2px"></i> Скопировать ссылку</button>
+              <button class="btn-ghost" onclick="doRegenerateCode()"><i data-lucide="refresh-cw" style="width:13px;height:13px;vertical-align:-2px"></i> Обновить код</button>
+            </div>
+            <div style="margin-top:10px;font-size:0.77rem;color:var(--text-3);line-height:1.5">
+              После обновления старый код перестанет работать. Ученики, которые уже вступили, останутся в классе.
+            </div>
+          </div>
+          <div class="settings-section" id="set-modules">
+            <div class="settings-section-title">Модули класса</div>
+            <p style="font-size:0.82rem;color:var(--text-2);margin-bottom:14px;line-height:1.5">Отключённые модули скроются у учеников этого класса.</p>
+            <div style="display:flex;flex-direction:column;gap:10px;margin-bottom:16px">
+              <label style="display:flex;align-items:center;gap:10px;cursor:pointer;font-size:0.85rem;font-weight:600;color:var(--text-1)">
+                <input type="checkbox" id="feat-gamification" style="width:16px;height:16px;accent-color:var(--violet);cursor:pointer">
+                <svg class="ic" viewBox="0 0 24 24"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2z"/></svg> Геймификация (XP, уровни, рейтинг)
+              </label>
+              <label style="display:flex;align-items:center;gap:10px;cursor:pointer;font-size:0.85rem;font-weight:600;color:var(--text-1)">
+                <input type="checkbox" id="feat-collection" style="width:16px;height:16px;accent-color:var(--violet);cursor:pointer">
+                🃏 Коллекция
+              </label>
+              <label style="display:flex;align-items:center;gap:10px;cursor:pointer;font-size:0.85rem;font-weight:600;color:var(--text-1)">
+                <input type="checkbox" id="feat-hangman" style="width:16px;height:16px;accent-color:var(--violet);cursor:pointer">
+                <svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg> Виселица
+              </label>
+              <label style="display:flex;align-items:center;gap:10px;cursor:pointer;font-size:0.85rem;font-weight:600;color:var(--text-1)">
+                <input type="checkbox" id="feat-crossword" style="width:16px;height:16px;accent-color:var(--violet);cursor:pointer">
+                <svg class="ic" viewBox="0 0 24 24"><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.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg> Кроссворд
+              </label>
+              <label style="display:flex;align-items:center;gap:10px;cursor:pointer;font-size:0.85rem;font-weight:600;color:var(--text-1)">
+                <input type="checkbox" id="feat-red_book" style="width:16px;height:16px;accent-color:var(--violet);cursor:pointer">
+                <svg class="ic" viewBox="0 0 24 24"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg> Красная книга
+              </label>
+              <label style="display:flex;align-items:center;gap:10px;cursor:pointer;font-size:0.85rem;font-weight:600;color:var(--text-1)">
+                <input type="checkbox" id="feat-pet" style="width:16px;height:16px;accent-color:var(--violet);cursor:pointer">
+                <svg class="ic" viewBox="0 0 24 24"><circle cx="11" cy="4" r="2"/><circle cx="18" cy="8" r="2"/><circle cx="20" cy="16" r="2"/><path d="M9 10a5 5 0 0 1 5 5v3.5a3.5 3.5 0 0 1-6.84 1.045Q6.52 17.48 4.46 16.84A3.5 3.5 0 0 1 5.5 10Z"/></svg> Питомец
+              </label>
+            </div>
+            <button class="btn-primary" onclick="saveModules()">Сохранить модули</button>
+          </div>
+          <div class="settings-section settings-danger">
+            <div class="settings-section-title">Опасная зона</div>
+            <p style="font-size:0.83rem;color:var(--text-2);margin-bottom:14px;line-height:1.5">Удаление класса необратимо. Все задания, участники и объявления будут удалены.</p>
+            <button class="btn-delete-class" onclick="confirmDeleteClass()"><i data-lucide="triangle-alert" style="width:13px;height:13px;vertical-align:-2px"></i> Удалить класс</button>
+          </div>
+        </div>
+
+        <!-- Announcements -->
+        <div class="tab-pane" id="dtab-announce">
+          <div style="display:flex;gap:10px;margin-bottom:20px;align-items:flex-end">
+            <textarea class="form-textarea" id="announce-text" rows="2" placeholder="Текст объявления…" style="flex:1;resize:vertical"></textarea>
+            <button class="btn-save" id="announce-send-btn" onclick="sendAnnouncement()" style="white-space:nowrap">Отправить</button>
+          </div>
+          <div id="announce-list"><div class="spinner"></div></div>
+        </div>
+      </div><!-- /detail-panel (.detail-panel card) -->
+      </div><!-- /cl-detail-wrap -->
+      </div><!-- /#detail-panel -->
+
+    </div><!-- /cl-main -->
+  </div><!-- /sb-content -->
+
+  <!-- Modal: Create class -->
+  <div class="modal-overlay" id="modal-class" onclick="closeOnOverlay(event,'modal-class')">
+    <div class="modal">
+      <div class="modal-title">Создать класс</div>
+      <div class="ip-row">
+        <div class="ip-preview" id="c-icon-preview"><i data-lucide="book-open"></i></div>
+        <div style="flex:1">
+          <div class="form-group" style="margin-bottom:0">
+            <label class="form-label">Название класса</label>
+            <input class="form-input" id="c-name" placeholder="11А · Биология" />
+          </div>
+        </div>
+      </div>
+      <div class="form-group">
+        <div class="icon-picker-label">Иконка класса</div>
+        <div class="icon-picker" id="c-icon-picker"></div>
+        <div class="icon-picker-label" style="margin-top:10px">Цвет</div>
+        <div class="color-picker" id="c-color-picker"></div>
+      </div>
+      <div class="form-group">
+        <label class="form-label">Описание (необязательно)</label>
+        <textarea class="form-textarea" id="c-desc" rows="2" placeholder="Подготовка к ЦТ 2026"></textarea>
+      </div>
+      <div class="modal-footer">
+        <button class="btn-cancel" onclick="closeModal('modal-class')">Отмена</button>
+        <button class="btn-save" id="btn-save-class" onclick="saveClass()">Создать</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Modal: Create assignment -->
+  <div class="modal-overlay" id="modal-assign" onclick="closeOnOverlay(event,'modal-assign')">
+    <div class="modal">
+      <div class="modal-title" id="modal-assign-title">Новое задание</div>
+
+      <!-- Шаблоны -->
+      <div style="display:flex;gap:8px;align-items:center;margin-bottom:18px">
+        <select class="form-select" id="tpl-select" style="flex:1;font-size:0.82rem">
+          <option value="">— Загрузить шаблон —</option>
+        </select>
+        <button class="btn-ghost" onclick="loadTemplateIntoForm()" style="padding:7px 14px;white-space:nowrap">Загрузить</button>
+      </div>
+
+      <!-- Тип контента: случайные / готовый тест / файл -->
+      <div class="atype-tabs">
+        <button class="atype-tab active" id="atype-random-btn"  onclick="setAssignType('random')"><i data-lucide="shuffle" style="width:13px;height:13px;vertical-align:-2px"></i> Случайные</button>
+        <button class="atype-tab"        id="atype-fixtest-btn" onclick="setAssignType('fixed_test')"><i data-lucide="clipboard-list" style="width:13px;height:13px;vertical-align:-2px"></i> Готовый тест</button>
+        <button class="atype-tab"        id="atype-file-btn"    onclick="setAssignType('file')"><i data-lucide="paperclip" style="width:13px;height:13px;vertical-align:-2px"></i> Файл</button>
+        <button class="atype-tab"        id="atype-upload-btn"  onclick="setAssignType('upload')"><i data-lucide="upload" style="width:13px;height:13px;vertical-align:-2px"></i> Сдать работу</button>
+      </div>
+      <div id="a-type-hint" style="font-size:0.76rem;color:var(--text-3);margin:-12px 0 16px;padding:0 4px;line-height:1.5">
+        Вопросы подбираются случайно из базы по выбранному предмету
+      </div>
+
+      <!-- Кому: класс / ученик / несколько классов + ДЗ-переключатель -->
+      <div style="display:flex;gap:10px;align-items:flex-start;margin-bottom:16px;flex-wrap:wrap">
+        <div class="form-group" style="flex:1;min-width:180px;margin-bottom:0">
+          <label class="form-label">Кому</label>
+          <select class="form-select" id="a-target" onchange="onTargetChange()">
+            <option value="class">Всему классу</option>
+            <option value="multi">Нескольким классам…</option>
+          </select>
+        </div>
+        <div style="display:flex;flex-direction:column;gap:4px;padding-top:22px">
+          <label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-size:0.86rem;font-weight:600;color:var(--text-2)">
+            <input type="checkbox" id="a-is-hw" onchange="onHwChange()" style="width:16px;height:16px;accent-color:var(--violet)">
+            <i data-lucide="book-open" style="width:15px;height:15px;vertical-align:-3px;color:var(--violet)"></i> Домашнее задание
+          </label>
+          <div id="a-hw-hint" style="display:none;font-size:0.72rem;color:var(--text-3);line-height:1.45;max-width:200px">
+            Доступно в любое время, без ограничений режима
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label class="form-label">Название</label>
+        <input class="form-input" id="a-title" placeholder="Домашнее задание №3" />
+      </div>
+
+      <!-- Поля для случайных вопросов -->
+      <div id="a-test-fields">
+        <div class="form-group">
+          <label class="form-label">Предмет</label>
+          <select class="form-select" id="a-subject">
+            <option value="bio">Биология</option>
+            <option value="chem">Химия</option>
+            <option value="math">Математика</option>
+            <option value="phys">Физика</option>
+          </select>
+        </div>
+        <div class="form-group" id="a-mode-group">
+          <label class="form-label">Режим</label>
+          <select class="form-select" id="a-mode">
+            <option value="exam">Экзамен</option>
+            <option value="practice">Тренировка</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label class="form-label">Количество вопросов</label>
+          <select class="form-select" id="a-count">
+            <option value="10">10</option>
+            <option value="25" selected>25</option>
+            <option value="40">40</option>
+            <option value="60">60</option>
+          </select>
+        </div>
+      </div>
+
+      <!-- Поля для готового теста -->
+      <div id="a-fixtest-fields" style="display:none">
+        <div class="form-group">
+          <label class="form-label">Выбери тест из библиотеки</label>
+          <input class="form-input file-picker-search" id="a-test-search" placeholder="Поиск теста…" oninput="filterTestList(this.value)" />
+          <div class="file-picker-list" id="a-test-list"><div class="student-opt-empty">Загрузка…</div></div>
+          <div id="a-test-selected" style="display:none;margin-top:8px;font-size:0.84rem;color:var(--violet);font-weight:600"></div>
+        </div>
+      </div>
+
+      <!-- Поля для файла -->
+      <div id="a-file-fields" style="display:none">
+        <div class="form-group">
+          <label class="form-label">Файл из библиотеки</label>
+          <input class="form-input file-picker-search" id="a-file-search" placeholder="Поиск файла…" oninput="filterFileList(this.value)" />
+          <div class="file-picker-list" id="a-file-list"><div class="student-opt-empty">Загрузка…</div></div>
+          <div id="a-file-selected" style="display:none;margin-top:8px;font-size:0.84rem;color:var(--violet);font-weight:600"></div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label class="form-label">Дедлайн <span style="font-weight:400;text-transform:none;font-size:0.72rem;color:var(--text-3)">(необязательно — если не задан, задание открыто бессрочно)</span></label>
+        <input class="form-input" id="a-deadline" type="datetime-local" />
+      </div>
+
+      <div class="form-group">
+        <label class="form-label">Попытки <span style="font-weight:400;text-transform:none;font-size:0.72rem;color:var(--text-3)">(сколько раз ученик может пройти задание)</span></label>
+        <select class="form-select" id="a-max-attempts">
+          <option value="0">Без ограничений</option>
+          <option value="1">1 попытка</option>
+          <option value="2">2 попытки</option>
+          <option value="3">3 попытки</option>
+          <option value="5">5 попыток</option>
+        </select>
+      </div>
+
+      <!-- Multi-class selector (shown when target=multi) -->
+      <div id="a-multi-classes" style="display:none">
+        <div class="form-label" style="margin-bottom:8px">Выберите классы</div>
+        <div id="a-multi-class-list" style="display:flex;flex-direction:column;gap:6px;max-height:160px;overflow-y:auto;border:1.5px solid var(--border);border-radius:12px;padding:10px 12px"></div>
+      </div>
+
+      <div class="modal-footer">
+        <button class="btn-ghost" onclick="promptSaveTemplate()" style="margin-right:auto;font-size:0.8rem"><i data-lucide="save" style="width:13px;height:13px;vertical-align:-2px"></i> Сохранить шаблон</button>
+        <button class="btn-cancel" onclick="closeModal('modal-assign')">Отмена</button>
+        <button class="btn-save" id="btn-save-assign" onclick="saveAssignment()">Создать</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Results overlay -->
+  <div class="results-overlay" id="results-overlay" onclick="closeOnOverlay(event,'results-overlay')">
+    <div class="results-box">
+
+      <!-- ── Header ── -->
+      <div class="res-header">
+        <div class="res-header-title" id="res-title">Результаты</div>
+        <button class="res-csv-btn" onclick="exportResultsCSV()" id="res-csv-btn" style="display:none">
+          <i data-lucide="download" style="width:13px;height:13px"></i> CSV
+        </button>
+        <button class="res-close-btn" onclick="closeModal('results-overlay')">Закрыть <svg class="ic" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+      </div>
+
+      <!-- ── Tabs ── -->
+      <div class="res-tabs" id="res-tabs" style="display:none">
+        <button class="res-tab-btn active" data-restab="students" onclick="switchResTab(this)">Ученики</button>
+        <button class="res-tab-btn"        data-restab="questions" onclick="switchResTab(this)">По вопросам</button>
+      </div>
+
+      <!-- ── Tab: Students ── -->
+      <div id="restab-students">
+        <!-- stat chips -->
+        <div class="res-stat-row" id="res-stats" style="display:none">
+          <div class="res-stat-chip"><div class="res-stat-val" id="res-done-n">0</div><div class="res-stat-lbl">Сдали</div></div>
+          <div class="res-stat-chip"><div class="res-stat-val" id="res-total-n">0</div><div class="res-stat-lbl">Всего</div></div>
+          <div class="res-stat-chip"><div class="res-stat-val" id="res-avg-n">—</div><div class="res-stat-lbl">Средний %</div></div>
+          <div class="res-stat-chip"><div class="res-stat-val" id="res-best-n">—</div><div class="res-stat-lbl">Лучший %</div></div>
+        </div>
+        <!-- completion bar -->
+        <div class="res-prog-wrap" id="res-prog-wrap" style="display:none">
+          <div class="res-prog-fill" id="res-prog-bar" style="width:0%"></div>
+        </div>
+        <!-- score distribution -->
+        <div class="res-distrib" id="res-distrib" style="display:none">
+          <div class="res-distrib-title">Распределение баллов</div>
+          <div class="res-distrib-bars" id="res-distrib-bars"></div>
+        </div>
+        <div style="font-size:0.72rem;color:var(--text-3);margin-bottom:10px;padding:0 2px" id="res-click-hint" style="display:none">Нажмите на ученика, чтобы посмотреть его ответы</div>
+        <div id="res-list"></div>
+      </div>
+
+      <!-- ── Tab: Questions ── -->
+      <div id="restab-questions" style="display:none">
+        <div id="res-q-list"><div class="spinner"></div></div>
+      </div>
+
+      <!-- ── Drill-down: individual student review ── -->
+      <div class="res-drill" id="res-drill">
+        <div class="res-drill-header">
+          <button class="res-back-btn" onclick="resDrillBack()"><i data-lucide="arrow-left" style="width:14px;height:14px"></i> Назад</button>
+          <div class="res-drill-name" id="res-drill-name"></div>
+          <div class="res-drill-pct" id="res-drill-pct"></div>
+        </div>
+        <div id="res-drill-list"></div>
+      </div>
+
+    </div>
+  </div>
+
+  <!-- Modal: Edit assignment -->
+  <div class="modal-overlay" id="modal-edit-assign" onclick="closeOnOverlay(event,'modal-edit-assign')">
+    <div class="modal">
+      <div class="modal-title">Редактировать задание</div>
+      <div class="form-group">
+        <label class="form-label">Название</label>
+        <input class="form-input" id="ea-title" />
+      </div>
+      <div class="form-group">
+        <label class="form-label">Дедлайн</label>
+        <input class="form-input" id="ea-deadline" type="datetime-local" />
+      </div>
+      <div class="modal-footer">
+        <button class="btn-cancel" onclick="closeModal('modal-edit-assign')">Отмена</button>
+        <button class="btn-save" id="btn-save-edit-assign" onclick="saveEditAssignment()">Сохранить</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Review submission modal -->
+  <div class="modal-overlay" id="review-modal" onclick="if(event.target===this)closeReviewModal()">
+    <div class="modal">
+      <div class="modal-title">Работа ученика</div>
+      <div id="rv-student" style="font-size:0.88rem;color:#3D4F6B;font-weight:600;margin-bottom:4px"></div>
+      <div id="rv-assign"  style="font-size:0.78rem;color:var(--violet);margin-bottom:14px"></div>
+      <a id="rv-file-link" class="review-file-link" href="#" target="_blank" style="margin-bottom:14px;display:inline-flex">
+        <i data-lucide="download" style="width:14px;height:14px"></i>
+        <span id="rv-file-name"></span>
+      </a>
+      <div id="rv-message" style="background:#f8f9fc;border-radius:12px;padding:12px 14px;font-size:0.82rem;color:#3D4F6B;line-height:1.5;margin-bottom:14px;display:none"></div>
+      <div class="grade-input-row">
+        <label>Оценка (0–100):</label>
+        <input class="grade-input" id="rv-grade" type="number" min="0" max="100" placeholder="—" oninput="updateGradeLetter()">
+        <div class="grade-letter" id="rv-grade-letter">—</div>
+      </div>
+      <div class="form-group">
+        <label class="form-label">Комментарий учителя</label>
+        <textarea class="form-input" id="rv-note" rows="2" placeholder="Молодец! Или: нужно доработать раздел 2…" style="resize:vertical"></textarea>
+      </div>
+      <div class="modal-footer" style="justify-content:space-between">
+        <button class="btn-cancel" onclick="closeReviewModal()">Закрыть</button>
+        <button class="btn-save" id="btn-mark-reviewed" onclick="doMarkReviewed()">Отметить проверенным</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="toast" id="toast"></div>
+
+  <script src="/js/api.js"></script>
+  <script src="/js/notifications.js"></script>
+  <script>
+    const { user, isTeacher, isAdmin } = LS.initPage();
+    if (!user) throw new Error('Not logged in');
+    if (!isTeacher) { window.location.href='/dashboard'; throw new Error(); }
+    if (isAdmin) document.getElementById('nav-admin').style.display = '';
+
+    const SUBJECTS = { bio:'Биология', chem:'Химия', math:'Математика', phys:'Физика', other:'Задание' };
+    const MODES    = { exam:'Экзамен', practice:'Тренировка' };
+
+    function fmtDate(d) { return d ? new Date(d).toLocaleDateString('ru',{day:'numeric',month:'short',year:'numeric'}) : '—'; }
+    function pctCls(p)  { return p===null?'':p>=75?'pct-hi':p>=50?'pct-mid':'pct-lo'; }
+    function toast(msg) {
+      const el = document.getElementById('toast');
+      el.textContent = msg; el.classList.add('show');
+      setTimeout(() => el.classList.remove('show'), 2200);
+    }
+    function deadlineBadge(d) {
+      if (!d) return '';
+      const dt = new Date(d), now = new Date(), diff = (dt - now) / 3600000;
+      if (dt < now) return `<span class="deadline-badge deadline-over">просрочено ${fmtDate(d)}</span>`;
+      if (diff < 48) return `<span class="deadline-badge deadline-soon">до ${fmtDate(d)}</span>`;
+      return `<span class="deadline-badge deadline-ok">до ${fmtDate(d)}</span>`;
+    }
+
+    /* ══ Classes list ══ */
+    let classes = [], currentClass = null, _classAssignments = [];
+
+    async function loadClasses() {
+      try {
+        classes = await LS.getClasses();
+        renderClasses();
+      } catch (e) {
+        document.getElementById('classes-grid').innerHTML = `<div class="error">${esc(e.message)}</div>`;
+      }
+      // Update personal assignments sidebar count in background
+      LS.teacherAssignments().then(all => {
+        updatePaSidebarCount(all.filter(a => a.class_id === 0).length);
+      }).catch(() => {});
+    }
+
+    const CC_GRADIENTS = [
+      'linear-gradient(135deg,#06D6E0,#9B5DE5)',
+      'linear-gradient(135deg,#F15BB5,#9B5DE5)',
+      'linear-gradient(135deg,#06D664,#06B6D4)',
+      'linear-gradient(135deg,#FF9F1C,#F15BB5)',
+      'linear-gradient(135deg,#3B82F6,#9B5DE5)',
+      'linear-gradient(135deg,#06D6E0,#06D664)',
+    ];
+    function classGradient(id) { return CC_GRADIENTS[id % CC_GRADIENTS.length]; }
+    function classInitials(name) {
+      return name.trim().split(/\s+/).slice(0, 2).map(w => w[0]?.toUpperCase() || '').join('') || '?';
+    }
+
+    function renderClasses() {
+      const grid = document.getElementById('classes-grid');
+      if (!classes.length) {
+        grid.innerHTML = `<div class="cl-empty-side">Классов нет.<br>Нажмите <strong>+</strong>, чтобы создать первый.</div>`;
+        return;
+      }
+      grid.innerHTML = classes.map(c => {
+        const grad     = classGradient(c.id);
+        const initials = classInitials(c.name);
+        const isActive = currentClass?.id === c.id;
+        let avatar;
+        if (c.cover_emoji) {
+          const p = parseIconValue(c.cover_emoji);
+          avatar = `<div class="cl-avatar" style="background:${p.color}18;color:${p.color}"><i data-lucide="${p.icon}" style="width:20px;height:20px"></i></div>`;
+        } else {
+          avatar = `<div class="cl-avatar" style="background:${grad}">${initials}</div>`;
+        }
+        return `<div class="cl-item${isActive ? ' active' : ''}" onclick="openClass(${c.id})" id="cc-${c.id}">
+          ${avatar}
+          <div class="cl-info">
+            <div class="cl-name">${esc(c.name)}</div>
+            <div class="cl-meta">${c.member_count} уч · ${c.assignment_count} зад</div>
+          </div>
+          <i data-lucide="chevron-right" class="cl-chevron" style="width:15px;height:15px"></i>
+        </div>`;
+      }).join('');
+      if (window.lucide) lucide.createIcons();
+    }
+
+    async function openClass(id) {
+      document.querySelectorAll('.cl-item').forEach(c => c.classList.remove('active'));
+      document.getElementById('cc-' + id)?.classList.add('active');
+
+      document.getElementById('cl-placeholder').style.display = 'none';
+      document.getElementById('personal-panel').style.display = 'none';
+      const panel = document.getElementById('detail-panel');
+      panel.classList.remove('panel-visible');
+      panel.style.display = 'block';
+      void panel.offsetWidth; // reflow to restart animation
+      panel.classList.add('panel-visible');
+      // Reset to dashboard tab
+      document.querySelectorAll('.tab-btn').forEach(b => b.classList.toggle('active', b.dataset.tab === 'dash'));
+      document.querySelectorAll('.tab-pane').forEach(p => p.classList.toggle('active', p.id === 'dtab-dash'));
+      document.getElementById('dash-content').innerHTML = '<div class="spinner"></div>';
+      document.getElementById('theory-content').innerHTML = '<div class="spinner"></div>';
+      _theoryLoaded = null;
+
+      try {
+        const d = await LS.getClassDetail(id);
+        currentClass = d;
+        document.getElementById('d-name').textContent = d.name;
+        document.getElementById('d-sub').innerHTML = esc(d.description || '') + ' · Код: <strong style="color:var(--violet);letter-spacing:0.05em;user-select:all">' + esc(d.invite_code) + '</strong> <button onclick="navigator.clipboard.writeText(\'' + esc(d.invite_code) + '\');LS.toast(\'Код скопирован\',\'success\')" style="background:none;border:1px solid var(--border);border-radius:6px;padding:2px 8px;font-size:0.72rem;cursor:pointer;color:var(--text-2);margin-left:4px" title="Копировать код"><svg class="ic" viewBox="0 0 24 24" style="width:12px;height:12px"><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>';
+        renderMembers(d.members);
+        renderAssignments(d.assignments, d.members.length);
+        renderDashboard(d);
+      } catch (e) {
+        document.getElementById('dash-content').innerHTML = `<div class="error">${esc(e.message)}</div>`;
+      }
+    }
+
+    function renderMembers(members) {
+      const tbody = document.getElementById('d-members');
+      if (!members.length) {
+        tbody.innerHTML = '<tr><td colspan="6"><div class="empty">Нет учеников. Поделитесь кодом приглашения.</div></td></tr>';
+        return;
+      }
+      tbody.innerHTML = members.map(m => {
+        const pc = pctCls(m.avg_pct);
+        return `<tr>
+          <td><strong>${esc(m.name)}</strong></td>
+          <td style="color:var(--text-3)">${esc(m.email)}</td>
+          <td>${m.tests_count}</td>
+          <td><span class="pct-cell ${pc}">${m.avg_pct!==null?m.avg_pct+'%':'—'}</span></td>
+          <td style="color:var(--text-3);font-size:0.78rem">${fmtDate(m.joined_at)}</td>
+          <td><button class="btn-danger" onclick="kickMember(${m.id},'${esc(m.name)}')">Удалить</button></td>
+        </tr>`;
+      }).join('');
+    }
+
+    function renderAssignments(assignments, totalMembers) {
+      _classAssignments = assignments;
+      const el = document.getElementById('d-assignments');
+      if (!assignments.length) {
+        el.innerHTML = '<div class="empty">Заданий нет. Нажмите «+ Задание» чтобы создать.</div>';
+        return;
+      }
+      el.innerHTML = assignments.map(a => {
+        const isFile = !!a.file_id;
+        const meta = isFile
+          ? `<i data-lucide="paperclip" style="width:12px;height:12px;vertical-align:-1px"></i> ${esc(a.file_title || 'Файл')} · ${SUBJECTS[a.subject_slug]||a.subject_slug} ${deadlineBadge(a.deadline)}`
+          : `${SUBJECTS[a.subject_slug]||a.subject_slug} · ${MODES[a.mode]||a.mode} · ${a.count} вопросов ${deadlineBadge(a.deadline)}`;
+        return `<div class="assign-item">
+          <div style="flex:1">
+            <div class="assign-title">${esc(a.title)}</div>
+            <div class="assign-meta">${meta}</div>
+          </div>
+          <div class="assign-progress">
+            <div class="assign-pct">${a.completed_count} / ${a.total_members}</div>
+            <div class="assign-sub">${isFile ? 'скачали' : 'выполнили'}</div>
+          </div>
+          <div style="display:flex;gap:8px">
+            ${!isFile ? `<button class="btn-ghost" style="font-size:0.78rem;padding:6px 14px" onclick="showResults(${a.id},'${esc(a.title)}')">Результаты</button>` : ''}
+            <button class="btn-ghost" style="font-size:0.78rem;padding:6px 14px" onclick="openEditAssignment(${a.id})">Изменить</button>
+            <button class="btn-danger" onclick="removeAssignment(${a.id})">Удалить</button>
+          </div>
+        </div>`;
+      }).join('');
+    }
+
+    /* ══ Detail tabs ══ */
+    function switchDetailTab(btn) {
+      const name = btn.dataset.tab;
+      document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+      document.querySelectorAll('.tab-pane').forEach(p => p.classList.remove('active'));
+      btn.classList.add('active');
+      document.getElementById('dtab-' + name).classList.add('active');
+      if (name === 'announce')  loadAnnouncements();
+      if (name === 'dash')      loadClassDashboard();
+      if (name === 'journal')   loadJournal();
+      if (name === 'settings')  loadSettings();
+      if (name === 'works')     loadClassWorks();
+      if (name === 'theory')    loadClassTheory();
+    }
+
+    /* ══ Invite ══ */
+    function copyCode(code) {
+      const url = `${location.origin}/dashboard?join=${code}`;
+      navigator.clipboard.writeText(url).then(() => toast('Ссылка скопирована!'));
+    }
+    function copyInvite() {
+      if (!currentClass) return;
+      copyCode(currentClass.invite_code);
+    }
+
+    /* ══ Create class ══ */
+    function openCreateClass() {
+      document.getElementById('c-name').value = '';
+      document.getElementById('c-desc').value = '';
+      _selectedIcon = 'book-open';
+      _selectedColor = '#9B5DE5';
+      renderIconPreview('c-icon-preview');
+      renderIconPicker('c-icon-picker', 'c-icon-preview');
+      renderColorPicker('c-color-picker', 'c-icon-preview');
+      openModal('modal-class');
+    }
+    /* ══ Icon picker (Lucide SVG) ══════════════════════════════════════ */
+    const CLASS_ICONS = [
+      // Биология / Химия / Наука
+      'flask-conical','flask-round','microscope','atom','dna','test-tubes','pill','syringe',
+      'scan-eye','heart-pulse','activity','thermometer','biohazard','bug','leaf','trees',
+      'flower-2','sprout','apple','carrot','egg','fish','bird','cat','dog','rabbit','turtle','squirrel',
+      // Математика / Физика
+      'calculator','sigma','pi','percent','binary','triangle','hexagon','circle-dot',
+      'magnet','zap','lightbulb','sun','moon','cloud-lightning','orbit','satellite',
+      // География / История
+      'globe','map','compass','mountain','waves','landmark','castle','flag',
+      // Учёба / Школа
+      'book-open','book-marked','notebook-pen','notebook-text','library','scroll-text',
+      'graduation-cap','school','backpack','pencil','pen-tool','highlighter','clipboard-list',
+      'file-text','file-check','brain','sparkles','puzzle','blocks',
+      // IT / Технологии
+      'laptop','monitor','keyboard','cpu','code','terminal','database','wifi','bot','circuit-board',
+      // Искусство / Музыка
+      'palette','brush','paintbrush','camera','clapperboard','music','music-2','mic','headphones','drama',
+      // Спорт
+      'trophy','medal','target','flame','timer','bike','dumbbell','footprints',
+      // Общие / Абстрактные
+      'rocket','gem','crown','star','heart','shield','key','lock','award','badge-check',
+      'square','circle','triangle','diamond','hexagon','octagon','pentagon',
+    ];
+    let _selectedIcon = 'book-open';
+    let _selectedColor = '#9B5DE5';
+
+    const ICON_COLORS = [
+      { color: '#9B5DE5', label: 'Фиолетовый' },
+      { color: '#3B82F6', label: 'Синий' },
+      { color: '#06B6D4', label: 'Голубой' },
+      { color: '#06D6A0', label: 'Зелёный' },
+      { color: '#059652', label: 'Тёмно-зелёный' },
+      { color: '#F59E0B', label: 'Жёлтый' },
+      { color: '#F97316', label: 'Оранжевый' },
+      { color: '#E83A1E', label: 'Красный' },
+      { color: '#F15BB5', label: 'Розовый' },
+      { color: '#8B5CF6', label: 'Индиго' },
+      { color: '#64748B', label: 'Серый' },
+      { color: '#0F172A', label: 'Чёрный' },
+    ];
+
+    function parseIconValue(val) {
+      if (!val) return { icon: 'book-open', color: '#9B5DE5' };
+      const parts = val.split(':');
+      return { icon: parts[0] || 'book-open', color: parts[1] || '#9B5DE5' };
+    }
+    function encodeIconValue(icon, color) {
+      return color === '#9B5DE5' ? icon : icon + ':' + color;
+    }
+
+    function renderIconPreview(previewId) {
+      const el = document.getElementById(previewId);
+      if (!el) return;
+      el.style.color = _selectedColor;
+      el.style.background = _selectedColor + '18';
+      el.style.borderColor = _selectedColor + '30';
+      el.innerHTML = `<i data-lucide="${_selectedIcon}"></i>`;
+      if (window.lucide) lucide.createIcons({ nodes: [el] });
+    }
+
+    function renderIconPicker(containerId, previewId) {
+      const el = document.getElementById(containerId);
+      if (!el) return;
+      el.innerHTML = CLASS_ICONS.map(ic =>
+        `<button type="button" class="ip-btn${ic === _selectedIcon ? ' selected' : ''}" data-icon="${ic}"><i data-lucide="${ic}"></i></button>`
+      ).join('');
+      if (window.lucide) lucide.createIcons({ nodes: [el] });
+      el.onclick = (e) => {
+        const btn = e.target.closest('.ip-btn');
+        if (!btn) return;
+        _selectedIcon = btn.dataset.icon;
+        renderIconPreview(previewId);
+        el.querySelectorAll('.ip-btn').forEach(b => b.classList.toggle('selected', b.dataset.icon === _selectedIcon));
+      };
+    }
+
+    function renderColorPicker(containerId, previewId) {
+      const el = document.getElementById(containerId);
+      if (!el) return;
+      el.innerHTML = ICON_COLORS.map(c =>
+        `<button type="button" class="cp-btn${c.color === _selectedColor ? ' selected' : ''}" data-color="${c.color}" title="${c.label}" style="background:${c.color}"></button>`
+      ).join('');
+      el.onclick = (e) => {
+        const btn = e.target.closest('.cp-btn');
+        if (!btn) return;
+        _selectedColor = btn.dataset.color;
+        renderIconPreview(previewId);
+        el.querySelectorAll('.cp-btn').forEach(b => b.classList.toggle('selected', b.dataset.color === _selectedColor));
+      };
+    }
+
+    async function saveClass() {
+      const name = document.getElementById('c-name').value.trim();
+      const description = document.getElementById('c-desc').value.trim();
+      if (!name) return LS.toast('Введите название', 'warn');
+      const btn = document.getElementById('btn-save-class');
+      btn.disabled = true;
+      try {
+        const c = await LS.createClass({ name, description, cover_emoji: encodeIconValue(_selectedIcon, _selectedColor) });
+        closeModal('modal-class');
+        toast('Класс создан! Код: ' + c.invite_code);
+        await loadClasses();
+        openClass(c.id);
+      } catch (e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+      finally { btn.disabled = false; }
+    }
+
+    /* ══ Delete class ══ */
+    async function confirmDeleteClass() {
+      if (!currentClass) return;
+      if (!await LS.confirm(`Удалить класс «${currentClass.name}»?\nВсе данные будут удалены.`, { title: 'Удалить класс', confirmText: 'Удалить' })) return;
+      try {
+        await LS.deleteClass(currentClass.id);
+        currentClass = null;
+        document.getElementById('detail-panel').style.display = 'none';
+        document.getElementById('cl-placeholder').style.display = '';
+        toast('Класс удалён');
+        await loadClasses();
+      } catch (e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+    }
+
+    /* ══ Student search ══ */
+    let allStudents = [], selectedStudent = null;
+
+    async function loadStudents() {
+      if (allStudents.length) return;
+      try { allStudents = await LS.getStudentsList(); } catch {}
+    }
+
+    function filterStudents(q) {
+      const drop = document.getElementById('student-drop');
+      const lq = q.toLowerCase();
+      const matches = q.length < 1
+        ? allStudents.slice(0, 60)
+        : allStudents.filter(s => s.name.toLowerCase().includes(lq) || s.email.toLowerCase().includes(lq)).slice(0, 40);
+      if (!matches.length) {
+        drop.innerHTML = '<div class="student-opt-empty">Ничего не найдено</div>';
+      } else {
+        drop.innerHTML = matches.map(s => `
+          <div class="student-opt" onmousedown="selectStudent(${s.id},'${esc(s.name)}','${esc(s.email)}')">
+            <div class="student-opt-name">${esc(s.name)}</div>
+            <div class="student-opt-email">${esc(s.email)}</div>
+          </div>`).join('');
+      }
+      drop.classList.add('open');
+      if (selectedStudent) { selectedStudent = null; document.getElementById('btn-add-member').disabled = true; }
+    }
+
+    function selectStudent(id, name, email) {
+      selectedStudent = { id, name, email };
+      document.getElementById('add-member-search').value = `${name} (${email})`;
+      document.getElementById('student-drop').classList.remove('open');
+      document.getElementById('btn-add-member').disabled = false;
+    }
+
+    async function openStudentDrop() {
+      await loadStudents();
+      filterStudents(document.getElementById('add-member-search').value);
+    }
+    function closeStudentDrop() { document.getElementById('student-drop').classList.remove('open'); }
+
+    /* ══ Add member ══ */
+    async function doAddMember() {
+      if (!currentClass || !selectedStudent) return;
+      const errEl = document.getElementById('add-member-err');
+      errEl.textContent = '';
+      try {
+        const r = await LS.addClassMember(currentClass.id, null, selectedStudent.id);
+        document.getElementById('add-member-search').value = '';
+        selectedStudent = null;
+        document.getElementById('btn-add-member').disabled = true;
+        toast(`${r.name} добавлен в класс`);
+        await openClass(currentClass.id);
+      } catch (e) { errEl.textContent = e.message; }
+    }
+
+    /* ══ Kick member ══ */
+    async function kickMember(uid, name) {
+      if (!await LS.confirm(`Удалить ${name} из класса?`, { title: 'Удалить ученика', confirmText: 'Удалить' })) return;
+      try {
+        await LS.kickMember(currentClass.id, uid);
+        await openClass(currentClass.id);
+        toast('Ученик удалён');
+      } catch (e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+    }
+
+    /* ══ Assignment type ══ */
+    let _assignType = 'random';
+    let _allFiles = null, _selectedFileId = null;
+    let _allTests = null, _selectedTestId = null;
+
+    const TYPE_HINTS = {
+      random:     'Вопросы подбираются случайно из базы по выбранному предмету',
+      fixed_test: 'Все ученики получат одинаковый тест из библиотеки в фиксированном порядке',
+      file:       'Ученикам будет доступна ссылка для скачивания файла из библиотеки',
+      upload:     'Ученик должен загрузить файл (реферат, лабораторную и т.д.)',
+    };
+
+    function setAssignType(type) {
+      _assignType = type;
+      document.getElementById('atype-random-btn') .classList.toggle('active', type === 'random');
+      document.getElementById('atype-fixtest-btn').classList.toggle('active', type === 'fixed_test');
+      document.getElementById('atype-file-btn')   .classList.toggle('active', type === 'file');
+      document.getElementById('atype-upload-btn') .classList.toggle('active', type === 'upload');
+      document.getElementById('a-test-fields')    .style.display = type === 'random'     ? '' : 'none';
+      document.getElementById('a-fixtest-fields') .style.display = type === 'fixed_test' ? '' : 'none';
+      document.getElementById('a-file-fields')    .style.display = type === 'file'       ? '' : 'none';
+      document.getElementById('a-type-hint').textContent = TYPE_HINTS[type] || '';
+      if (type === 'file'       && !_allFiles) loadFilePicker();
+      if (type === 'fixed_test' && !_allTests) loadTestPicker();
+      // Upload type: auto-check homework, hide test/file fields
+      if (type === 'upload') {
+        document.getElementById('a-is-hw').checked = true;
+        onHwChange();
+      }
+    }
+
+    function onHwChange() {
+      const isHw = document.getElementById('a-is-hw').checked;
+      document.getElementById('a-mode-group').style.display = isHw ? 'none' : '';
+      document.getElementById('a-hw-hint').style.display    = isHw ? '' : 'none';
+    }
+
+    async function loadFilePicker() {
+      try {
+        _allFiles = await LS.getFiles();
+        renderFileList('');
+      } catch { _allFiles = []; }
+    }
+
+    async function loadTestPicker() {
+      try {
+        _allTests = await LS.getTests();
+        renderTestList('');
+      } catch { _allTests = []; }
+    }
+
+    function renderTestList(q) {
+      const el = document.getElementById('a-test-list');
+      if (!_allTests) { el.innerHTML = '<div class="student-opt-empty">Загрузка…</div>'; return; }
+      const lq = q.toLowerCase();
+      const items = q ? _allTests.filter(t => (t.title||'').toLowerCase().includes(lq)) : _allTests;
+      if (!items.length) { el.innerHTML = '<div class="student-opt-empty">Тестов нет</div>'; return; }
+      el.innerHTML = items.map(t => `
+        <div class="file-pick-item${_selectedTestId === t.id ? ' selected' : ''}" onclick="selectTest(${t.id},'${esc(t.title||'Тест')}')">
+          <div style="flex:1">
+            <div class="file-pick-name">${esc(t.title||'Тест')}</div>
+            <div class="file-pick-subj">${SUBJECTS[t.subject_slug]||t.subject_slug||''} · ${t.question_count||'?'} вопросов</div>
+          </div>
+          ${_selectedTestId === t.id ? '<div class="file-pick-check"><svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div>' : ''}
+        </div>`).join('');
+    }
+
+    function filterTestList(q) { renderTestList(q); }
+
+    function selectTest(id, title) {
+      _selectedTestId = id;
+      renderTestList(document.getElementById('a-test-search').value);
+      const sel = document.getElementById('a-test-selected');
+      sel.innerHTML = '<svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg> Выбран: ' + title;
+      sel.style.display = '';
+    }
+
+    function renderFileList(q) {
+      const el = document.getElementById('a-file-list');
+      if (!_allFiles) { el.innerHTML = '<div class="student-opt-empty">Загрузка…</div>'; return; }
+      const lq = q.toLowerCase();
+      const items = q ? _allFiles.filter(f => (f.title||'').toLowerCase().includes(lq)) : _allFiles;
+      if (!items.length) { el.innerHTML = '<div class="student-opt-empty">Нет файлов</div>'; return; }
+      el.innerHTML = items.map(f => `
+        <div class="file-pick-item${_selectedFileId === f.id ? ' selected' : ''}" onclick="selectFile(${f.id},'${esc(f.title||'Файл')}','${f.subject_slug||''}')">
+          <div style="flex:1">
+            <div class="file-pick-name">${esc(f.title||'Файл')}</div>
+            <div class="file-pick-subj">${SUBJECTS[f.subject_slug]||f.subject_slug||''}</div>
+          </div>
+          ${_selectedFileId === f.id ? '<div class="file-pick-check"><svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div>' : ''}
+        </div>`).join('');
+    }
+
+    function filterFileList(q) { renderFileList(q); }
+
+    function selectFile(id, title, subject_slug) {
+      _selectedFileId = id;
+      renderFileList(document.getElementById('a-file-search').value);
+      const sel = document.getElementById('a-file-selected');
+      sel.innerHTML = '<svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg> Выбран: ' + title;
+      sel.style.display = '';
+    }
+
+    /* ══ Target selector ══ */
+    function buildTargetSelect(members) {
+      const sel = document.getElementById('a-target');
+      sel.innerHTML =
+        `<option value="class">Всему классу</option>` +
+        `<option value="multi">Нескольким классам…</option>` +
+        members.map(m => `<option value="${m.id}">${esc(m.name)} (лично)</option>`).join('');
+    }
+
+    function onTargetChange() {
+      const val = document.getElementById('a-target').value;
+      const isHw = document.getElementById('a-is-hw');
+      if (val !== 'class' && val !== 'multi') { isHw.checked = true; }
+      // Show/hide multi-class selector
+      const multiDiv = document.getElementById('a-multi-classes');
+      if (val === 'multi') {
+        multiDiv.style.display = '';
+        buildMultiClassList();
+      } else {
+        multiDiv.style.display = 'none';
+      }
+    }
+
+    function buildMultiClassList() {
+      const el = document.getElementById('a-multi-class-list');
+      const others = (classes || []).filter(c => c.id !== currentClass?.id);
+      // Always include current class (pre-checked)
+      const all = currentClass ? [currentClass, ...others] : others;
+      el.innerHTML = all.map(c => `
+        <label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-size:0.85rem;font-weight:600;color:var(--text-2);padding:2px 0">
+          <input type="checkbox" value="${c.id}"${c.id === currentClass?.id ? ' checked' : ''} style="width:15px;height:15px;accent-color:var(--violet)">
+          ${esc(c.name)}
+        </label>`).join('');
+    }
+
+    /* ══ Templates ══ */
+    let _templates = [];
+
+    async function refreshTemplates() {
+      try {
+        _templates = await LS.listTemplates();
+        const sel = document.getElementById('tpl-select');
+        sel.innerHTML = '<option value="">— Загрузить шаблон —</option>' +
+          _templates.map(t => `<option value="${t.id}">${esc(t.label)}</option>`).join('');
+      } catch { _templates = []; }
+    }
+
+    function loadTemplateIntoForm() {
+      const id = Number(document.getElementById('tpl-select').value);
+      if (!id) return LS.toast('Выберите шаблон', 'warn');
+      const tpl = _templates.find(t => t.id === id);
+      if (!tpl) return;
+
+      if (tpl.file_id) {
+        setAssignType('file');
+        _selectedFileId = tpl.file_id;
+        document.getElementById('a-file-selected').innerHTML = '<svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg> Файл из шаблона';
+        document.getElementById('a-file-selected').style.display = '';
+      } else if (tpl.test_id) {
+        setAssignType('fixed_test');
+        _selectedTestId = tpl.test_id;
+        document.getElementById('a-test-selected').innerHTML = '<svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg> Тест из шаблона';
+        document.getElementById('a-test-selected').style.display = '';
+      } else {
+        setAssignType('random');
+        const subj = document.getElementById('a-subject');
+        if (subj) subj.value = tpl.subject_slug || 'bio';
+        const mode = document.getElementById('a-mode');
+        if (mode) mode.value = tpl.mode || 'exam';
+        const count = document.getElementById('a-count');
+        if (count) count.value = tpl.count || 25;
+      }
+      document.getElementById('a-is-hw').checked = !!tpl.is_homework;
+      onHwChange();
+      LS.toast('Шаблон загружен', 'success');
+    }
+
+    async function promptSaveTemplate() {
+      const label = window.prompt('Название шаблона:',
+        document.getElementById('a-title').value.trim() || 'Мой шаблон');
+      if (!label) return;
+
+      const isHw = document.getElementById('a-is-hw').checked;
+      let payload = { label, is_homework: isHw ? 1 : 0 };
+
+      if (_assignType === 'file') {
+        if (!_selectedFileId) return LS.toast('Выберите файл перед сохранением', 'warn');
+        const f = (_allFiles||[]).find(x => x.id === _selectedFileId);
+        payload = { ...payload, subject_slug: f?.subject_slug || 'bio', mode: 'exam', count: 1, file_id: _selectedFileId };
+      } else if (_assignType === 'fixed_test') {
+        if (!_selectedTestId) return LS.toast('Выберите тест перед сохранением', 'warn');
+        const t = (_allTests||[]).find(x => x.id === _selectedTestId);
+        payload = { ...payload, subject_slug: t?.subject_slug || 'bio', mode: 'exam', count: t?.question_count || 25, test_id: _selectedTestId };
+      } else {
+        payload = {
+          ...payload,
+          subject_slug: document.getElementById('a-subject').value,
+          mode: isHw ? 'exam' : document.getElementById('a-mode').value,
+          count: Number(document.getElementById('a-count').value),
+        };
+      }
+
+      try {
+        await LS.saveTemplate(payload);
+        await refreshTemplates();
+        LS.toast('Шаблон сохранён', 'success');
+      } catch (e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+    }
+
+    /* ══ Create assignment ══ */
+    function openCreateAssignment() {
+      if (!currentClass) return;
+      document.getElementById('a-title').value    = '';
+      document.getElementById('a-deadline').value = '';
+      document.getElementById('a-is-hw').checked  = false;
+      const ma = document.getElementById('a-max-attempts');
+      if (ma) ma.value = '0';
+      document.getElementById('a-mode-group').style.display = '';
+      document.getElementById('a-multi-classes').style.display = 'none';
+      _selectedFileId = null;
+      document.getElementById('a-file-selected').style.display = 'none';
+      document.getElementById('a-file-search').value = '';
+      _selectedTestId = null;
+      document.getElementById('a-test-selected').style.display = 'none';
+      document.getElementById('a-test-search').value = '';
+      setAssignType('random');
+      buildTargetSelect(currentClass.members || []);
+      refreshTemplates();
+      openModal('modal-assign');
+    }
+
+    async function saveAssignment() {
+      if (!currentClass) return;
+      const title       = document.getElementById('a-title').value.trim();
+      const deadline    = document.getElementById('a-deadline').value || null;
+      const isHw        = document.getElementById('a-is-hw').checked;
+      const target      = document.getElementById('a-target').value;
+      const maxAttempts = Number(document.getElementById('a-max-attempts')?.value || 0);
+      if (!title) return LS.toast('Введите название задания', 'warn');
+
+      let payload;
+      if (_assignType === 'upload') {
+        payload = { title, mode: 'exam', count: 1, deadline, is_homework: 1, max_attempts: 0 };
+      } else if (_assignType === 'file') {
+        if (!_selectedFileId) return LS.toast('Выберите файл из библиотеки', 'warn');
+        const f = _allFiles.find(x => x.id === _selectedFileId);
+        payload = { title, file_id: _selectedFileId, subject_slug: f?.subject_slug || 'bio', mode: 'exam', count: 1, deadline, is_homework: isHw ? 1 : 0, max_attempts: maxAttempts };
+      } else if (_assignType === 'fixed_test') {
+        if (!_selectedTestId) return LS.toast('Выберите тест из списка', 'warn');
+        const t = _allTests.find(x => x.id === _selectedTestId);
+        payload = { title, test_id: _selectedTestId, subject_slug: t?.subject_slug || 'bio', mode: 'exam', count: t?.question_count || 25, deadline, is_homework: isHw ? 1 : 0, max_attempts: maxAttempts };
+      } else {
+        payload = {
+          title,
+          subject_slug: document.getElementById('a-subject').value,
+          mode:    isHw ? 'exam' : document.getElementById('a-mode').value,
+          count:   Number(document.getElementById('a-count').value),
+          deadline,
+          is_homework: isHw ? 1 : 0,
+          max_attempts: maxAttempts,
+        };
+      }
+
+      const btn = document.getElementById('btn-save-assign');
+      btn.disabled = true;
+      try {
+        if (target === 'multi') {
+          const checked = [...document.querySelectorAll('#a-multi-class-list input[type=checkbox]:checked')];
+          const class_ids = checked.map(cb => Number(cb.value));
+          if (!class_ids.length) { LS.toast('Выберите хотя бы один класс', 'warn'); return; }
+          const result = await LS.bulkCreateAssignment({ ...payload, class_ids });
+          closeModal('modal-assign');
+          LS.toast(`Задание создано для ${result.count} класс(ов)`, 'success');
+          await openClass(currentClass.id);
+          document.querySelector('[data-tab="assign"]').click();
+        } else if (target === 'class') {
+          await LS.createAssignment(currentClass.id, payload);
+          closeModal('modal-assign');
+          toast(isHw ? 'ДЗ выдано' : 'Задание создано');
+          await openClass(currentClass.id);
+          document.querySelector('[data-tab="assign"]').click();
+        } else {
+          // Конкретному ученику
+          await LS.createDirectAssignment({ ...payload, student_id: Number(target) });
+          closeModal('modal-assign');
+          toast(isHw ? 'ДЗ выдано' : 'Задание выдано');
+          await openClass(currentClass.id);
+          document.querySelector('[data-tab="assign"]').click();
+        }
+      } catch (e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+      finally { btn.disabled = false; }
+    }
+
+    /* ══ Delete assignment ══ */
+    async function removeAssignment(id) {
+      if (!await LS.confirm('Удалить задание?', { title: 'Удалить задание', confirmText: 'Удалить' })) return;
+      try {
+        await LS.deleteAssignment(id);
+        toast('Задание удалено');
+        await openClass(currentClass.id);
+      } catch (e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+    }
+
+    /* ══ Edit assignment ══ */
+    let _editingAssign = null;
+    function openEditAssignment(id) {
+      _editingAssign = _classAssignments.find(x => x.id === id);
+      if (!_editingAssign) return;
+      document.getElementById('ea-title').value = _editingAssign.title;
+      const dl = _editingAssign.deadline;
+      document.getElementById('ea-deadline').value = dl ? dl.replace(' ', 'T').slice(0, 16) : '';
+      openModal('modal-edit-assign');
+    }
+    async function saveEditAssignment() {
+      if (!_editingAssign) return;
+      const title = document.getElementById('ea-title').value.trim();
+      if (!title) return LS.toast('Введите название', 'warn');
+      const deadline = document.getElementById('ea-deadline').value || null;
+      const btn = document.getElementById('btn-save-edit-assign');
+      btn.disabled = true;
+      try {
+        await LS.updateAssignment(_editingAssign.id, {
+          title,
+          deadline,
+          subject_slug: _editingAssign.subject_slug || 'bio',
+          mode: _editingAssign.mode || 'exam',
+          count: _editingAssign.count || 25,
+          test_id: _editingAssign.test_id || null,
+        });
+        closeModal('modal-edit-assign');
+        toast('Изменения сохранены');
+        await openClass(currentClass.id);
+        document.querySelector('[data-tab="assign"]').click();
+      } catch (e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+      finally { btn.disabled = false; }
+    }
+
+    /* ══ Results overlay ══════════════════════════════════════════════════ */
+    let _currentResultsAssignId = null;
+    let _currentResultsData     = null; // cache for CSV
+    let _qStatsLoaded           = false;
+
+    function switchResTab(btn) {
+      document.querySelectorAll('.res-tab-btn').forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+      const tab = btn.dataset.restab;
+      document.getElementById('restab-students').style.display  = tab === 'students'  ? '' : 'none';
+      document.getElementById('restab-questions').style.display = tab === 'questions' ? '' : 'none';
+      document.getElementById('res-csv-btn').style.display      = tab === 'students'  ? '' : 'none';
+      if (tab === 'questions') loadResQuestionStats();
+    }
+
+    async function showResults(id, title) {
+      _currentResultsAssignId = id;
+      _currentResultsData = null;
+      _qStatsLoaded = false;
+      document.getElementById('res-title').textContent = title;
+      document.getElementById('res-list').innerHTML = '<div class="spinner"></div>';
+      document.getElementById('res-drill').classList.remove('open');
+      document.getElementById('restab-students').style.display  = '';
+      document.getElementById('restab-questions').style.display = 'none';
+      document.getElementById('res-tabs').style.display         = 'none';
+      document.getElementById('res-stats').style.display        = 'none';
+      document.getElementById('res-distrib').style.display      = 'none';
+      document.getElementById('res-prog-wrap').style.display    = 'none';
+      document.getElementById('res-csv-btn').style.display      = 'none';
+      // reset tabs
+      document.querySelectorAll('.res-tab-btn').forEach((b,i) => b.classList.toggle('active', i===0));
+      openModal('results-overlay');
+
+      try {
+        const { results } = await LS.assignmentResults(id);
+        _currentResultsData = { results, title };
+        const done    = results.filter(r => r.session_status === 'completed');
+        const pending = results.filter(r => r.session_status !== 'completed');
+
+        if (done.length > 0) {
+          // Stats chips
+          const avg  = Math.round(done.reduce((s,r) => s + (r.percent||0), 0) / done.length);
+          const best = Math.max(...done.map(r => r.percent||0));
+          document.getElementById('res-done-n').textContent  = done.length;
+          document.getElementById('res-total-n').textContent = results.length;
+          document.getElementById('res-avg-n').textContent   = avg + '%';
+          document.getElementById('res-best-n').textContent  = best + '%';
+          document.getElementById('res-stats').style.display = '';
+          // Completion bar
+          document.getElementById('res-prog-bar').style.width = Math.round(done.length / results.length * 100) + '%';
+          document.getElementById('res-prog-wrap').style.display = '';
+          // Score distribution
+          const buckets = [
+            { label: '0–25%',  min: 0,  max: 25,  color: '#F15BB5' },
+            { label: '26–50%', min: 26, max: 50,  color: '#FFB347' },
+            { label: '51–75%', min: 51, max: 75,  color: '#06B6D4' },
+            { label: '76–100%',min: 76, max: 100, color: '#06D664' },
+          ];
+          const maxCnt = Math.max(...buckets.map(b => done.filter(r => r.percent >= b.min && r.percent <= b.max).length), 1);
+          document.getElementById('res-distrib-bars').innerHTML = buckets.map(b => {
+            const cnt = done.filter(r => r.percent >= b.min && r.percent <= b.max).length;
+            const h   = Math.round((cnt / maxCnt) * 56);
+            return `<div class="res-bar-col">
+              <div class="res-bar-cnt">${cnt || ''}</div>
+              <div class="res-bar-fill" style="height:${h}px;background:${b.color};opacity:0.85"></div>
+              <div class="res-bar-lbl">${b.label}</div>
+            </div>`;
+          }).join('');
+          document.getElementById('res-distrib').style.display = '';
+          document.getElementById('res-csv-btn').style.display = '';
+          document.getElementById('res-tabs').style.display    = '';
+        }
+
+        // Student list
+        const rank = (r, i) => {
+          const medal = ['<svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="8" r="6"/><path d="M15.477 12.89 17 22l-5-3-5 3 1.523-9.11"/></svg>','<svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="8" r="6"/><path d="M15.477 12.89 17 22l-5-3-5 3 1.523-9.11"/></svg>','<svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="8" r="6"/><path d="M15.477 12.89 17 22l-5-3-5 3 1.523-9.11"/></svg>'][i] || (i+1)+'.';
+          const pc = pctCls(r.percent);
+          const clickable = r.session_id ? `onclick="openResDrill(${r.session_id},'${esc(r.name)}',${r.percent??'null'})"` : '';
+          return `<div class="res-row" ${clickable} title="${r.session_id ? 'Посмотреть ответы' : ''}">
+            <div class="res-rank">${medal}</div>
+            <div class="res-name">
+              <strong>${esc(r.name)}</strong>
+              <div style="font-size:0.75rem;color:var(--text-3)">${esc(r.email)}</div>
+            </div>
+            <div style="text-align:right">
+              <div class="res-pct ${pc}">${r.percent!==null?r.percent+'%':'—'}</div>
+              <div class="res-score">${r.score??'—'} / ${r.total??'—'}</div>
+            </div>
+            ${r.session_id ? `<div style="color:var(--text-3);opacity:.4"><i data-lucide="chevron-right" style="width:15px;height:15px"></i></div>` : ''}
+          </div>`;
+        };
+
+        document.getElementById('res-list').innerHTML =
+          (done.length ? `<div style="font-size:0.72rem;color:var(--text-3);margin-bottom:8px;padding:0 2px">Нажмите на ученика — увидите его ответы</div>` + done.map(rank).join('') : '') +
+          (pending.length ? `<div style="margin-top:16px;font-family:'Unbounded',sans-serif;font-size:0.72rem;color:var(--text-3);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px">Не выполнили</div>` +
+            pending.map(r => `<div class="res-row"><div class="res-rank" style="color:var(--text-3)">—</div><div class="res-name"><strong>${esc(r.name)}</strong><div style="font-size:0.75rem;color:var(--text-3)">${esc(r.email)}</div></div><div class="res-pending">Не сдано</div></div>`).join('') : '');
+
+        if (!results.length) document.getElementById('res-list').innerHTML = '<div class="empty">Нет данных</div>';
+        if (window.lucide) lucide.createIcons();
+      } catch (e) {
+        document.getElementById('res-list').innerHTML = `<div class="error">${esc(e.message)}</div>`;
+      }
+    }
+
+    /* ── Question stats tab ── */
+    async function loadResQuestionStats() {
+      if (_qStatsLoaded) return;
+      const el = document.getElementById('res-q-list');
+      el.innerHTML = '<div class="spinner"></div>';
+      try {
+        const { stats, session_count } = await LS.assignmentQuestionStats(_currentResultsAssignId);
+        _qStatsLoaded = true;
+        if (!stats.length) { el.innerHTML = '<div class="empty">Нет данных — никто не сдал это задание</div>'; return; }
+        el.innerHTML = `<div style="font-size:0.72rem;color:var(--text-3);margin-bottom:12px">На основе ${session_count} сданных работ. Сортировка: от самых сложных вопросов.</div>` +
+          stats.map((q, idx) => {
+            const pct   = q.error_pct || 0;
+            const color = pct >= 70 ? '#F15BB5' : pct >= 40 ? '#FFB347' : '#06D664';
+            return `<div class="qs-item">
+              <div class="qs-num">${idx+1}</div>
+              <div class="qs-text">${esc(q.question_text)}</div>
+              <div class="qs-bar-wrap"><div class="qs-bar-fill" style="width:${pct}%;background:${color}"></div></div>
+              <div class="qs-pct" style="color:${color}">${pct}%</div>
+              <div class="qs-cnt">${q.wrong}/${q.total} ошибок</div>
+            </div>`;
+          }).join('');
+      } catch (e) { el.innerHTML = `<div class="error">${esc(e.message)}</div>`; }
+    }
+
+    /* ── CSV export ── */
+    function exportResultsCSV() {
+      if (!_currentResultsData) return;
+      const { results, title } = _currentResultsData;
+      const rows = [['Имя', 'Email', 'Баллы', 'Всего', '%', 'Статус', 'Дата сдачи']];
+      results.forEach(r => {
+        const dt = r.finished_at ? new Date(r.finished_at.includes('T') ? r.finished_at : r.finished_at.replace(' ','T')+'Z').toLocaleString('ru') : '';
+        rows.push([r.name, r.email, r.score??'', r.total??'', r.percent!=null?r.percent+'%':'', r.session_status==='completed'?'Сдано':'Не сдано', dt]);
+      });
+      const csv = rows.map(row => row.map(v => `"${String(v).replace(/"/g,'""')}"`).join(',')).join('\n');
+      const a = document.createElement('a');
+      a.href = 'data:text/csv;charset=utf-8,\uFEFF' + encodeURIComponent(csv);
+      a.download = `results_${title.replace(/[^а-яёa-z0-9]/gi,'_')}.csv`;
+      a.click();
+    }
+
+    /* ── Drill-down: individual student review ── */
+    async function openResDrill(session_id, name, pct) {
+      document.getElementById('restab-students').style.display  = 'none';
+      document.getElementById('restab-questions').style.display = 'none';
+      document.getElementById('res-tabs').style.display         = 'none';
+      document.getElementById('res-csv-btn').style.display      = 'none';
+      document.getElementById('res-drill').classList.add('open');
+      document.getElementById('res-drill-name').textContent = name;
+      const pctEl = document.getElementById('res-drill-pct');
+      pctEl.textContent = pct !== null ? pct + '%' : '—';
+      pctEl.className = 'res-drill-pct ' + pctCls(pct);
+      const listEl = document.getElementById('res-drill-list');
+      listEl.innerHTML = '<div class="spinner"></div>';
+      document.querySelector('.results-box').scrollTop = 0;
+      try {
+        const data = await LS.assignmentSessionReview(_currentResultsAssignId, session_id);
+        const review = data.review || [];
+        if (!review.length) { listEl.innerHTML = '<div class="empty">Нет данных</div>'; return; }
+        listEl.innerHTML = review.map((q, idx) => {
+          const status      = q.is_correct === null ? 'skipped' : q.is_correct ? 'correct' : 'wrong';
+          const statusIcon  = q.is_correct === null ? '<svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg>' : q.is_correct ? '<svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>' : '<svg class="ic" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>';
+          const statusColor = q.is_correct === null ? 'var(--text-3)' : q.is_correct ? 'var(--green)' : 'var(--pink)';
+          let answerHtml = '';
+          if (q.type === 'short_answer') {
+            answerHtml = `<div class="rq-opts">
+              <div class="rq-opt ${q.is_correct ? 'both' : 'chosen'}"><span class="rq-icon">${q.is_correct?'<svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>':'<svg class="ic" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>'}</span> Ответ: ${esc(q.answer_text||'—')}</div>
+              ${!q.is_correct ? `<div class="rq-opt answer"><span class="rq-icon"><svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span> Правильно: ${esc(q.correct_text||'')}</div>` : ''}
+            </div>`;
+          } else if (q.type === 'matching') {
+            let pairs = {}; try { pairs = JSON.parse(q.answer_text||'{}'); } catch {}
+            answerHtml = '<div class="rq-opts">' + q.options.map(o => {
+              const given = pairs[String(o.id)], ok = given === o.match_pair;
+              return `<div class="rq-opt ${ok?'answer':given?'chosen':''}">
+                <span class="rq-icon">${ok?'<svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>':given?'<svg class="ic" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>':'<svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg>'}</span>
+                ${esc(o.text)} <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> <strong>${esc(given||'—')}</strong>${!ok&&o.match_pair?` <span style="color:var(--green)">(${esc(o.match_pair)})</span>`:''}
+              </div>`;
+            }).join('') + '</div>';
+          } else {
+            let chosen = q.type === 'multi'
+              ? (()=>{try{return JSON.parse(q.answer_text||'[]');}catch{return [];}})()
+              : (q.chosen_option_id ? [q.chosen_option_id] : []);
+            answerHtml = '<div class="rq-opts">' + q.options.map(o => {
+              const ic = chosen.includes(o.id), ir = o.is_correct;
+              const cls = ic&&ir?'both':ic?'chosen':ir?'answer':'';
+              const icon = ic&&ir?'<svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>':ic?'<svg class="ic" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>':ir?'<svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>':'<svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg>';
+              return cls
+                ? `<div class="rq-opt ${cls}"><span class="rq-icon">${icon}</span>${esc(o.text)}</div>`
+                : `<div class="rq-opt" style="color:var(--text-3)">${esc(o.text)}</div>`;
+            }).join('') + '</div>';
+          }
+          return `<div class="rq-item ${status}">
+            <div class="rq-num" style="color:${statusColor}">${statusIcon} Вопрос ${idx+1}</div>
+            <div class="rq-text">${esc(q.text)}</div>
+            ${answerHtml}
+            ${q.explanation?`<div class="rq-expl"><strong>Пояснение:</strong> ${esc(q.explanation)}</div>`:''}
+          </div>`;
+        }).join('');
+      } catch (e) { listEl.innerHTML = `<div class="error">${esc(e.message)}</div>`; }
+    }
+
+    function resDrillBack() {
+      document.getElementById('res-drill').classList.remove('open');
+      document.getElementById('restab-students').style.display  = '';
+      document.getElementById('restab-questions').style.display = 'none';
+      const hasTabs = _currentResultsData?.results?.some(r => r.session_status === 'completed');
+      document.getElementById('res-tabs').style.display    = hasTabs ? '' : 'none';
+      document.getElementById('res-csv-btn').style.display = hasTabs ? '' : 'none';
+      document.querySelector('.results-box').scrollTop = 0;
+      if (window.lucide) lucide.createIcons();
+    }
+
+    /* ══ Объявления ══════════════════════════════════════════════════════ */
+    async function loadAnnouncements() {
+      if (!currentClass) return;
+      const el = document.getElementById('announce-list');
+      el.innerHTML = '<div class="spinner"></div>';
+      try {
+        const items = await LS.getAnnouncements(currentClass.id);
+        if (!items.length) { el.innerHTML = '<div class="empty">Объявлений нет</div>'; return; }
+        el.innerHTML = items.map(a => `
+          <div class="ann-item">
+            <div class="ann-body">
+              <div class="ann-author">${esc(a.author_name)}</div>
+              <div class="ann-text">${esc(a.text)}</div>
+              <div class="ann-date">${parseDate(a.created_at).toLocaleString('ru',{day:'numeric',month:'short',hour:'2-digit',minute:'2-digit'})}</div>
+            </div>
+            <button class="ann-del" onclick="delAnnouncement(${a.id})" title="Удалить"><svg class="ic" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+          </div>`).join('');
+      } catch (e) { el.innerHTML = `<div class="error">${esc(e.message)}</div>`; }
+    }
+
+    async function sendAnnouncement() {
+      const text = document.getElementById('announce-text').value.trim();
+      if (!text) return;
+      const btn = document.getElementById('announce-send-btn');
+      btn.disabled = true;
+      try {
+        await LS.createAnnouncement(currentClass.id, text);
+        document.getElementById('announce-text').value = '';
+        await loadAnnouncements();
+        LS.toast('Объявление отправлено', 'success');
+      } catch (e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+      finally { btn.disabled = false; }
+    }
+
+    async function delAnnouncement(id) {
+      if (!await LS.confirm('Объявление будет удалено для всех студентов.', { title: 'Удалить объявление?', confirmText: 'Удалить', danger: true })) return;
+      try {
+        await LS.deleteAnnouncement(currentClass.id, id);
+        await loadAnnouncements();
+      } catch (e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+    }
+
+    /* ══ Работы учеников (submissions) ══════════════════════════════════ */
+    let _worksFilter = 'all', _worksData = [];
+
+    async function loadClassWorks() {
+      if (!currentClass) return;
+      const el = document.getElementById('works-content');
+      el.innerHTML = '<div class="spinner"></div>';
+      try {
+        _worksData = await LS.getClassSubmissions(currentClass.id);
+        renderWorks();
+      } catch (e) { el.innerHTML = `<div class="error">${esc(e.message)}</div>`; }
+    }
+
+    function renderWorks() {
+      const el = document.getElementById('works-content');
+      let list = _worksData;
+      if (_worksFilter === 'new')      list = list.filter(w => w.status === 'new');
+      if (_worksFilter === 'reviewed') list = list.filter(w => w.status === 'reviewed');
+
+      const newCount      = _worksData.filter(w => w.status === 'new').length;
+      const reviewedCount = _worksData.filter(w => w.status === 'reviewed').length;
+
+      if (!_worksData.length) {
+        el.innerHTML = '<div class="empty">Работ нет. Ученики ещё не прикрепляли файлы.</div>';
+        return;
+      }
+
+      el.innerHTML = `
+        <div class="works-filters">
+          <button class="works-chip${_worksFilter==='all'?' active':''}" onclick="setWorksFilter('all')">Все (${_worksData.length})</button>
+          <button class="works-chip${_worksFilter==='new'?' active':''}" onclick="setWorksFilter('new')">На проверке (${newCount})</button>
+          <button class="works-chip${_worksFilter==='reviewed'?' active':''}" onclick="setWorksFilter('reviewed')">Проверено (${reviewedCount})</button>
+        </div>
+        <div id="works-list">
+          ${!list.length ? '<div class="empty">Нет работ в этой категории.</div>' : list.map(w => `
+          <div class="work-card ${w.status}" onclick="openReviewModal(${w.id})">
+            <div class="work-icon"><i data-lucide="file-text" style="width:18px;height:18px"></i></div>
+            <div class="work-body">
+              <div class="work-student">${esc(w.student_name)}</div>
+              ${w.assignment_title ? `<div class="work-assign">${esc(w.assignment_title)}</div>` : ''}
+              <div class="work-file"><i data-lucide="paperclip" style="width:11px;height:11px;vertical-align:-1px;margin-right:3px"></i>${esc(w.original_name)}</div>
+              ${w.message ? `<div class="work-msg">"${esc(w.message)}"</div>` : ''}
+              ${w.teacher_note ? `<div class="work-note"><svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg> ${esc(w.teacher_note)}</div>` : ''}
+            </div>
+            <div class="work-meta">
+              <div style="display:flex;align-items:center;gap:6px;justify-content:flex-end;margin-bottom:4px">
+                <div class="work-status ${w.status}" style="margin-bottom:0">${w.status === 'reviewed' ? LS.icon('check-circle',14)+' Проверено' : LS.icon('clock',14)+' На проверке'}</div>
+                ${w.grade != null ? `<span class="work-grade ${w.grade>=80?'high':w.grade>=50?'mid':'low'}">${w.grade}</span>` : ''}
+              </div>
+              <div>${parseDate(w.submitted_at).toLocaleDateString('ru',{day:'numeric',month:'short'})}</div>
+              <button class="work-del-btn" onclick="event.stopPropagation();deleteClassWork(${w.id})" title="Удалить работу"><i data-lucide="trash-2" style="width:13px;height:13px"></i></button>
+            </div>
+          </div>`).join('')}
+        </div>`;
+      if (window.lucide) lucide.createIcons();
+    }
+
+    function setWorksFilter(f) {
+      _worksFilter = f;
+      renderWorks();
+    }
+
+    async function deleteClassWork(id) {
+      if (!await LS.confirm('Удалить работу ученика? Действие записывается в журнал.', { title: 'Удаление работы', confirmText: 'Удалить', danger: true })) return;
+      try {
+        await LS.deleteSubmission(id);
+        _worksData = _worksData.filter(w => w.id !== id);
+        renderWorks();
+        LS.toast('Работа удалена', 'info');
+      } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+    }
+
+    let _reviewSubId = null;
+
+    function gradeLetter(g) {
+      if (g == null) return '—';
+      if (g >= 90) return 'A';
+      if (g >= 75) return 'B';
+      if (g >= 60) return 'C';
+      if (g >= 40) return 'D';
+      return 'F';
+    }
+
+    function updateGradeLetter() {
+      const val = document.getElementById('rv-grade').value;
+      const g = val === '' ? null : Number(val);
+      const el = document.getElementById('rv-grade-letter');
+      const letter = gradeLetter(g);
+      el.textContent = letter;
+      el.style.background = g == null ? 'rgba(155,93,229,0.08)' :
+        g >= 80 ? 'rgba(5,150,82,0.12)' : g >= 50 ? 'rgba(255,193,7,0.14)' : 'rgba(241,91,181,0.12)';
+      el.style.color = g == null ? 'var(--violet)' :
+        g >= 80 ? '#059652' : g >= 50 ? '#c07c00' : '#c0306a';
+    }
+
+    function openReviewModal(subId) {
+      const w = _worksData.find(x => x.id === subId);
+      if (!w) return;
+      _reviewSubId = subId;
+      document.getElementById('rv-student').textContent = w.student_name + (w.student_email ? ` · ${w.student_email}` : '');
+      document.getElementById('rv-assign').textContent  = w.assignment_title ? `Задание: ${w.assignment_title}` : '';
+      document.getElementById('rv-file-name').textContent = w.original_name;
+      document.getElementById('rv-file-link').href = LS.submissionDownloadUrl(subId);
+      const msgEl = document.getElementById('rv-message');
+      if (w.message) { msgEl.textContent = `"${w.message}"`; msgEl.style.display = ''; }
+      else msgEl.style.display = 'none';
+      document.getElementById('rv-note').value = w.teacher_note || '';
+      document.getElementById('rv-grade').value = w.grade != null ? w.grade : '';
+      updateGradeLetter();
+      const btn = document.getElementById('btn-mark-reviewed');
+      btn.textContent = w.status === 'reviewed' ? 'Обновить' : 'Отметить проверенным';
+      document.getElementById('review-modal').classList.add('open');
+      if (window.lucide) lucide.createIcons();
+    }
+
+    function closeReviewModal() {
+      document.getElementById('review-modal').classList.remove('open');
+    }
+
+    async function doMarkReviewed() {
+      if (!_reviewSubId) return;
+      const note  = document.getElementById('rv-note').value.trim();
+      const gradeRaw = document.getElementById('rv-grade').value;
+      const grade = gradeRaw === '' ? null : Number(gradeRaw);
+      const btn   = document.getElementById('btn-mark-reviewed');
+      btn.disabled = true;
+      try {
+        await LS.reviewSubmission(_reviewSubId, { status: 'reviewed', teacher_note: note || null, grade });
+        const w = _worksData.find(x => x.id === _reviewSubId);
+        if (w) { w.status = 'reviewed'; w.teacher_note = note || null; w.grade = grade; }
+        closeReviewModal();
+        LS.toast('Работа проверена' + (grade != null ? ` · ${grade}/100 (${gradeLetter(grade)})` : ''), 'success');
+        renderWorks();
+      } catch (e) {
+        LS.toast('Ошибка: ' + e.message, 'error');
+      } finally {
+        btn.disabled = false;
+      }
+    }
+
+    /* ══ Уведомления — handled by notifications.js ══ */
+
+    /* ══ Teacher Dashboard ══════════════════════════════════════════════ */
+    function renderDashboard(d) {
+      const { members, assignments } = d;
+      const totalMembers = members.length;
+      const totalAssigns = assignments.length;
+      const avgPct = members.length
+        ? Math.round(members.filter(m => m.avg_pct !== null).reduce((s, m) => s + (m.avg_pct || 0), 0) / (members.filter(m => m.avg_pct !== null).length || 1))
+        : null;
+
+      // Find lagging students: those with 0 completions across all assignments
+      const lagging = members.filter(m => m.tests_count === 0);
+
+      let html = `<div class="dash-stat-row">
+        <div class="dash-stat-card"><div class="dash-stat-val">${totalMembers}</div><div class="dash-stat-lbl">Учеников</div></div>
+        <div class="dash-stat-card"><div class="dash-stat-val">${totalAssigns}</div><div class="dash-stat-lbl">Заданий</div></div>
+        <div class="dash-stat-card"><div class="dash-stat-val">${avgPct !== null ? avgPct + '%' : '—'}</div><div class="dash-stat-lbl">Средний балл</div></div>
+      </div>`;
+
+      if (assignments.length) {
+        html += `<div style="font-family:'Unbounded',sans-serif;font-size:0.75rem;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px">Выполнение заданий</div>
+        <div style="border:1.5px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:20px">`;
+        assignments.forEach(a => {
+          const pct = totalMembers ? Math.round(a.completed_count / totalMembers * 100) : 0;
+          html += `<div class="dash-assign-row" style="padding:10px 16px">
+            <div style="flex:1;min-width:0">
+              <div style="font-size:0.85rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(a.title)}</div>
+              <div style="font-size:0.72rem;color:var(--text-3);margin-top:2px">${a.completed_count} из ${totalMembers} сдали</div>
+            </div>
+            <div class="dash-assign-bar-wrap" style="max-width:120px">
+              <div class="dash-assign-bar" style="width:${pct}%"></div>
+            </div>
+            <div style="min-width:36px;text-align:right;font-family:'Unbounded',sans-serif;font-size:0.78rem;font-weight:800;color:${pct>=75?'var(--green)':pct>=40?'var(--amber)':'var(--pink)'}">${pct}%</div>
+          </div>`;
+        });
+        html += '</div>';
+      }
+
+      if (lagging.length) {
+        html += `<div style="font-family:'Unbounded',sans-serif;font-size:0.75rem;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px">Не приступали к тестам</div>
+        <div style="display:flex;flex-wrap:wrap;gap:8px">`;
+        lagging.forEach(m => {
+          html += `<span class="dash-lagging">${esc(m.name)}</span>`;
+        });
+        html += '</div>';
+      } else if (totalMembers > 0) {
+        html += `<div style="color:var(--green);font-size:0.84rem;font-weight:600"><svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg> Все ученики уже проходили тесты</div>`;
+      }
+
+      if (!totalMembers) {
+        html = `<div class="empty">В классе нет учеников. Поделитесь кодом приглашения.</div>`;
+      }
+
+      document.getElementById('dash-content').innerHTML = html;
+    }
+
+    async function loadClassDashboard() {
+      if (!currentClass) return;
+      renderDashboard(currentClass);
+    }
+
+    /* ══ Journal ════════════════════════════════════════════════════════ */
+    async function loadJournal() {
+      if (!currentClass) return;
+      const el = document.getElementById('journal-content');
+      el.innerHTML = '<div class="spinner"></div>';
+      try {
+        const { members, assignments, results } = await LS.classJournal(currentClass.id);
+        if (!assignments.length || !members.length) {
+          el.innerHTML = '<div class="empty">Нет данных для журнала. Добавьте учеников и задания.</div>';
+          return;
+        }
+        // Build lookup map: [userId][assignmentId] = percent
+        const map = {};
+        results.forEach(r => {
+          if (!map[r.user_id]) map[r.user_id] = {};
+          map[r.user_id][r.assignment_id] = r.percent;
+        });
+
+        const avgRow = {};
+        assignments.forEach(a => {
+          const vals = members.map(m => map[m.id]?.[a.id]).filter(v => v != null);
+          avgRow[a.id] = vals.length ? Math.round(vals.reduce((s,v)=>s+v,0)/vals.length) : null;
+        });
+
+        let th = '<th>Ученик</th>';
+        assignments.forEach(a => { th += `<th title="${esc(a.title)}">${esc(a.title.length > 16 ? a.title.slice(0,14)+'…' : a.title)}</th>`; });
+        th += '<th>Средний</th>';
+
+        const rows = members.map(m => {
+          let cells = `<td>${esc(m.name)}</td>`;
+          let sum = 0, cnt = 0;
+          assignments.forEach(a => {
+            const v = map[m.id]?.[a.id];
+            if (v != null) { sum += v; cnt++; }
+            cells += `<td>${v != null ? `<span class="${v>=75?'j-cell-hi':v>=50?'j-cell-mid':'j-cell-lo'}">${v}%</span>` : '<span class="j-cell-none">—</span>'}</td>`;
+          });
+          const avg = cnt ? Math.round(sum/cnt) : null;
+          cells += `<td>${avg != null ? `<span class="${avg>=75?'j-cell-hi':avg>=50?'j-cell-mid':'j-cell-lo'}">${avg}%</span>` : '<span class="j-cell-none">—</span>'}</td>`;
+          return `<tr>${cells}</tr>`;
+        }).join('');
+
+        const avgCells = assignments.map(a => {
+          const v = avgRow[a.id];
+          return `<td>${v != null ? `<span class="${v>=75?'j-cell-hi':v>=50?'j-cell-mid':'j-cell-lo'}">${v}%</span>` : '<span class="j-cell-none">—</span>'}</td>`;
+        }).join('');
+
+        el.innerHTML = `<div class="journal-wrap">
+          <table class="journal-table">
+            <thead><tr>${th}</tr></thead>
+            <tbody>${rows}
+              <tr style="font-weight:700;background:rgba(238,242,255,0.5)">
+                <td style="font-size:0.75rem;color:var(--text-3);font-family:'Unbounded',sans-serif;font-weight:700">Средний</td>${avgCells}<td></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>`;
+      } catch (e) { el.innerHTML = `<div class="error">${esc(e.message)}</div>`; }
+    }
+
+    /* ══ Settings ═══════════════════════════════════════════════════════ */
+    function loadSettings() {
+      if (!currentClass) return;
+      document.getElementById('set-name').value = currentClass.name || '';
+      document.getElementById('set-desc').value = currentClass.description || '';
+      const parsed = parseIconValue(currentClass.cover_emoji);
+      _selectedIcon = parsed.icon;
+      _selectedColor = parsed.color;
+      renderIconPreview('set-icon-preview');
+      renderIconPicker('set-icon-picker', 'set-icon-preview');
+      renderColorPicker('set-color-picker', 'set-icon-preview');
+      document.getElementById('set-invite-code').textContent = currentClass.invite_code || '—';
+      // Populate module toggles (all enabled by default if no features set)
+      const f = currentClass.features || {};
+      const FEATS = ['gamification', 'collection', 'hangman', 'crossword', 'red_book', 'pet'];
+      for (const key of FEATS) {
+        const el = document.getElementById('feat-' + key);
+        if (el) el.checked = f[key] !== false; // default enabled
+      }
+    }
+
+    async function saveModules() {
+      if (!currentClass) return;
+      const FEATS = ['gamification', 'collection', 'hangman', 'crossword', 'red_book', 'pet'];
+      const features = {};
+      for (const key of FEATS) {
+        const el = document.getElementById('feat-' + key);
+        if (el) features[key] = el.checked;
+      }
+      try {
+        const updated = await LS.updateClass(currentClass.id, { features });
+        currentClass = { ...currentClass, ...updated };
+        LS.clearFeaturesCache?.(); // force re-check on next navigation
+        LS.toast('Модули сохранены', 'success');
+      } catch (e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+    }
+
+    async function saveClassSettings() {
+      if (!currentClass) return;
+      const name = document.getElementById('set-name').value.trim();
+      const description = document.getElementById('set-desc').value.trim();
+      if (!name) return LS.toast('Введите название', 'warn');
+      try {
+        const updated = await LS.updateClass(currentClass.id, { name, description, cover_emoji: encodeIconValue(_selectedIcon, _selectedColor) });
+        currentClass = { ...currentClass, ...updated };
+        document.getElementById('d-name').textContent = updated.name;
+        document.getElementById('d-sub').textContent  = (updated.description || '') + ' · Код: ' + updated.invite_code;
+        // Update in classes list
+        const idx = classes.findIndex(c => c.id === currentClass.id);
+        if (idx >= 0) classes[idx] = { ...classes[idx], ...updated };
+        renderClasses();
+        LS.toast('Настройки сохранены', 'success');
+      } catch (e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+    }
+
+    async function doRegenerateCode() {
+      if (!currentClass) return;
+      if (!await LS.confirm('Старый код приглашения перестанет работать. Продолжить?', { title: 'Обновить код', confirmText: 'Обновить' })) return;
+      try {
+        const { invite_code } = await LS.regenerateInviteCode(currentClass.id);
+        currentClass.invite_code = invite_code;
+        document.getElementById('set-invite-code').textContent = invite_code;
+        document.getElementById('d-sub').textContent = (currentClass.description || '') + ' · Код: ' + invite_code;
+        LS.toast('Код обновлён: ' + invite_code, 'success');
+      } catch (e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+    }
+
+    /* ══ Theory tab ══════════════════════════════════════════════════════ */
+    let _theoryLoaded = false;
+
+    async function loadClassTheory() {
+      if (!currentClass) return;
+      if (_theoryLoaded === currentClass.id) return;
+      _theoryLoaded = currentClass.id;
+      const el = document.getElementById('theory-content');
+      el.innerHTML = '<div class="spinner"></div>';
+      try {
+        const courses = await LS.api('/api/courses/class/' + currentClass.id);
+        const allCourses = await LS.api('/api/courses');
+
+        const BANNER_CLASS = { bio:'cc-banner-bio', chem:'cc-banner-chem', math:'cc-banner-math', phys:'cc-banner-phys' };
+        const SUBJ_LABEL = { bio:'Биология', chem:'Химия', math:'Математика', phys:'Физика' };
+
+        const assignedIds = new Set((courses || []).map(c => c.id));
+        const available   = (allCourses || []).filter(c => !assignedIds.has(c.id));
+
+        let html = `<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:8px">
+          <div style="font-family:'Unbounded',sans-serif;font-size:0.82rem;font-weight:800;color:#0F172A">
+            Курсы класса <span style="color:#8898AA;font-weight:600">(${(courses||[]).length})</span>
+          </div>
+          ${available.length ? `<button class="btn-ghost" onclick="openAssignCourseModal()" style="font-size:0.8rem">
+            <i data-lucide="plus" style="width:13px;height:13px;vertical-align:-2px"></i> Добавить курс
+          </button>` : ''}
+        </div>`;
+
+        if (!(courses||[]).length) {
+          html += `<div style="text-align:center;padding:40px;color:#8898AA;font-size:0.85rem;background:#fff;border-radius:16px;border:1.5px dashed rgba(155,93,229,0.15)">
+            Нет назначенных курсов. Нажмите «Добавить курс», чтобы назначить курс классу.
+          </div>`;
+        } else {
+          html += `<div style="display:flex;flex-direction:column;gap:10px">` +
+            (courses || []).map(c => {
+              const bannerClass = BANNER_CLASS[c.subjectSlug] || 'cc-banner-other';
+              const pct = c.lessonCount > 0 ? Math.round(c.doneCount / c.lessonCount * 100) : 0;
+              return `<div style="background:#fff;border:1.5px solid rgba(15,23,42,0.07);border-radius:16px;padding:14px 18px;display:flex;align-items:center;gap:14px">
+                <a href="/course?id=${c.id}" style="flex:1;display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;min-width:0">
+                  <span style="font-size:1.6rem">${c.coverEmoji || LS.icon('book-open',20)}</span>
+                  <div style="flex:1;min-width:0">
+                    <div style="font-size:0.9rem;font-weight:700;color:#0F172A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${esc(c.title)}</div>
+                    <div style="font-size:0.74rem;color:#8898AA;margin-top:2px">${esc(SUBJ_LABEL[c.subjectSlug] || c.subjectSlug || '')} · ${c.lessonCount} уроков</div>
+                  </div>
+                  <div style="display:flex;align-items:center;gap:8px;flex-shrink:0">
+                    <div style="width:80px;height:5px;border-radius:99px;background:rgba(15,23,42,0.07)">
+                      <div style="height:100%;border-radius:99px;background:var(--violet);width:${pct}%"></div>
+                    </div>
+                    <span style="font-size:0.72rem;font-weight:700;color:var(--violet)">${pct}%</span>
+                  </div>
+                </a>
+                <button onclick="unassignCourse(${c.id})" title="Убрать из класса"
+                  style="width:28px;height:28px;border-radius:8px;border:none;background:rgba(239,71,111,0.08);color:#EF476F;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0">
+                  <i data-lucide="x" style="width:13px;height:13px"></i>
+                </button>
+              </div>`;
+            }).join('') + `</div>`;
+        }
+
+        el.innerHTML = html;
+        if (window.lucide) lucide.createIcons();
+
+        // Store available for modal
+        el._available = available;
+      } catch (e) {
+        el.innerHTML = `<div class="empty">Ошибка загрузки: ${esc(e.message)}</div>`;
+      }
+    }
+
+    async function unassignCourse(courseId) {
+      if (!currentClass) return;
+      if (!await LS.confirm('Убрать курс из класса?', { title: 'Убрать курс', confirmText: 'Убрать', danger: true })) return;
+      try {
+        await LS.api('/api/courses/class/' + currentClass.id + '/' + courseId, { method: 'DELETE' });
+        _theoryLoaded = null;
+        loadClassTheory();
+      } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+    }
+
+    function openAssignCourseModal() {
+      const el = document.getElementById('theory-content');
+      const available = el._available || [];
+      if (!available.length) { LS.toast('Нет доступных курсов для назначения', 'warn'); return; }
+      const SUBJ_LABEL = { bio:'Биология', chem:'Химия', math:'Математика', phys:'Физика' };
+      const sel = document.createElement('select');
+      sel.id = 'assign-course-select';
+      sel.style.cssText = 'width:100%;padding:10px 12px;border:1.5px solid rgba(15,23,42,0.15);border-radius:12px;font-family:Manrope,sans-serif;font-size:0.92rem;margin-bottom:16px';
+      available.forEach(c => {
+        const o = document.createElement('option');
+        o.value = c.id;
+        o.textContent = (SUBJ_LABEL[c.subjectSlug] || c.subjectSlug || '') + ' · ' + c.title;
+        sel.appendChild(o);
+      });
+
+      const overlay = document.createElement('div');
+      overlay.style.cssText = 'position:fixed;inset:0;background:rgba(15,23,42,0.4);backdrop-filter:blur(6px);z-index:400;display:flex;align-items:center;justify-content:center;padding:20px';
+      overlay.innerHTML = `<div style="background:#fff;border-radius:24px;padding:32px;width:100%;max-width:440px;box-shadow:0 32px 80px rgba(15,23,42,0.22)">
+        <div style="font-family:'Unbounded',sans-serif;font-size:0.92rem;font-weight:800;margin-bottom:20px">Назначить курс классу</div>
+        <div id="assign-course-sel-wrap"></div>
+        <div style="display:flex;gap:10px;justify-content:flex-end;margin-top:4px">
+          <button id="assign-cancel-btn" style="padding:10px 22px;border:1.5px solid rgba(15,23,42,0.15);border-radius:999px;background:transparent;font-family:Manrope,sans-serif;font-size:0.88rem;font-weight:600;color:#8898AA;cursor:pointer">Отмена</button>
+          <button id="assign-confirm-btn" style="padding:10px 28px;border:none;border-radius:999px;background:var(--violet);color:#fff;font-family:Manrope,sans-serif;font-size:0.88rem;font-weight:700;cursor:pointer">Назначить</button>
+        </div>
+      </div>`;
+      overlay.querySelector('#assign-course-sel-wrap').appendChild(sel);
+      document.body.appendChild(overlay);
+      overlay.querySelector('#assign-cancel-btn').onclick = () => overlay.remove();
+      overlay.onclick = e => { if (e.target === overlay) overlay.remove(); };
+      overlay.querySelector('#assign-confirm-btn').onclick = async () => {
+        const courseId = parseInt(sel.value);
+        if (!courseId) return;
+        try {
+          await LS.api('/api/courses/class/' + currentClass.id + '/assign', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ courseId }),
+          });
+          overlay.remove();
+          _theoryLoaded = null;
+          loadClassTheory();
+        } catch (e) { alert(e.message || 'Ошибка назначения'); }
+      };
+    }
+
+    /* ══ Modal helpers ══ */
+    function openModal(id)  { document.getElementById(id).classList.add('open'); }
+    function closeModal(id) { document.getElementById(id).classList.remove('open'); }
+    function closeOnOverlay(e, id) { if (e.target === document.getElementById(id)) closeModal(id); }
+
+    /* ══ Personal assignments panel ══ */
+    async function openPersonalAssignments() {
+      document.querySelectorAll('.cl-item').forEach(c => c.classList.remove('active'));
+      document.getElementById('cc-personal').classList.add('active');
+      currentClass = null;
+
+      document.getElementById('cl-placeholder').style.display = 'none';
+      document.getElementById('detail-panel').style.display = 'none';
+
+      const panel = document.getElementById('personal-panel');
+      panel.classList.remove('panel-visible');
+      panel.style.display = 'block';
+      void panel.offsetWidth;
+      panel.classList.add('panel-visible');
+
+      document.getElementById('personal-list').innerHTML = '<div class="spinner"></div>';
+      try {
+        const all  = await LS.teacherAssignments();
+        const list = all.filter(a => a.class_id === 0);
+        renderPersonalList(list);
+        updatePaSidebarCount(list.length);
+      } catch (e) {
+        document.getElementById('personal-list').innerHTML = `<div class="error">${esc(e.message)}</div>`;
+      }
+    }
+
+    function updatePaSidebarCount(n) {
+      const s = n === 0 ? 'нет заданий'
+        : n % 10 === 1 && n % 100 !== 11 ? n + ' задание'
+        : n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20) ? n + ' задания'
+        : n + ' заданий';
+      document.getElementById('pa-sidebar-count').textContent = s;
+    }
+
+    function renderPersonalList(list) {
+      const el = document.getElementById('personal-list');
+      if (!list.length) {
+        el.innerHTML = `<div class="empty" style="padding:30px 0">
+          Личных заданий пока нет.<br>
+          <span style="font-size:0.82rem;color:var(--text-3)">
+            Назначьте задание конкретному ученику: выберите класс → «+ Задание» → в поле «Кому» выберите ученика.
+          </span>
+        </div>`;
+        return;
+      }
+      el.innerHTML = list.map(a => {
+        const subject  = SUBJECTS[a.subject_slug] || a.subject_slug;
+        const done     = (a.completed_count || 0) >= 1;
+        const statusHtml = done
+          ? `<span class="pa-status-done"><svg class="ic" viewBox="0 0 24 24" style="width:11px;height:11px;stroke-width:2.5"><polyline points="20 6 9 17 4 12"/></svg> Выполнено</span>`
+          : `<span class="pa-status-pending"><svg class="ic" viewBox="0 0 24 24" style="width:11px;height:11px;stroke-width:2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg> Ожидает</span>`;
+        const meta = [subject, a.mode ? (MODES[a.mode] || a.mode) : null, a.count ? a.count + ' вопр.' : null].filter(Boolean).join(' · ');
+        const safeTitle = esc(a.title).replace(/'/g, "\\'");
+        return `<div class="pa-item">
+          <div style="flex:1;min-width:0">
+            <div style="display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px">
+              <span class="pa-student">
+                <svg class="ic" viewBox="0 0 24 24" style="width:10px;height:10px;stroke-width:2;fill:none"><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>
+                ${esc(a.target_user_name || '—')}
+              </span>
+              ${statusHtml}
+              ${deadlineBadge(a.deadline)}
+            </div>
+            <div class="assign-title" style="font-size:0.9rem">${esc(a.title)}</div>
+            <div class="assign-meta">${meta}</div>
+          </div>
+          <div style="display:flex;gap:8px;align-items:center;flex-shrink:0;margin-top:2px">
+            ${!a.file_id ? `<button class="btn-ghost" style="font-size:0.78rem;padding:6px 14px" onclick="showResults(${a.id},'${safeTitle}')">Результаты</button>` : ''}
+            <button class="btn-danger" onclick="removePersonalAssignment(${a.id})">Удалить</button>
+          </div>
+        </div>`;
+      }).join('');
+      if (window.lucide) lucide.createIcons();
+    }
+
+    async function removePersonalAssignment(id) {
+      if (!await LS.confirm('Удалить задание?', { title: 'Удалить задание', confirmText: 'Удалить' })) return;
+      try {
+        await LS.deleteAssignment(id);
+        toast('Задание удалено');
+        openPersonalAssignments();
+      } catch (e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+    }
+
+    loadClasses();
+    loadStudents(); // preload for student search
+    LS.notif.init();
+
+    // Real-time SSE for page-specific events
+    LS.connectSSE(ev => {
+      if (ev.type === 'session') {
+        LS.toast(ev.message, 'info');
+        if (currentClass) openClass(currentClass.id); // refresh assignment progress
+      } else if (ev.type === 'join') {
+        LS.toast(ev.message, 'info');
+        loadClasses();
+      }
+    });
+
+    if (window.lucide) lucide.createIcons();
+  </script>
+</div>
+<script src="/js/search.js"></script>
+<script src="/js/mobile.js"></script>
+</body>
+</html>
diff --git a/frontend/classroom.html b/frontend/classroom.html
new file mode 100644
index 0000000..953b5b9
--- /dev/null
+++ b/frontend/classroom.html
@@ -0,0 +1,4254 @@
+<!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://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+  <style>
+    .sb-content { background: #0e1117; overflow: hidden; display: flex; flex-direction: column; height: 100vh; }
+
+    /* ── header ── */
+    .cr-header {
+      background: linear-gradient(140deg, #0a0220 0%, #1a0a3c 60%, #080818 100%);
+      padding: 16px 20px; display: flex; align-items: center; gap: 12px;
+      flex-shrink: 0; position: relative; overflow: hidden;
+    }
+    .cr-header-dots {
+      position: absolute; inset: 0;
+      background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
+      background-size: 22px 22px; pointer-events: none;
+    }
+    .cr-header-inner { display: flex; align-items: center; gap: 12px; width: 100%; position: relative; z-index: 1; }
+    .cr-title {
+      font-family: 'Unbounded', sans-serif; font-size: 1rem; font-weight: 800; color: #fff;
+      display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
+    }
+    .cr-title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .cr-session-chip {
+      display: inline-flex; align-items: center; gap: 6px;
+      padding: 4px 12px; border-radius: 999px;
+      background: rgba(6,214,160,0.15); border: 1.5px solid rgba(6,214,160,0.3);
+      font-size: 0.72rem; font-weight: 700; color: #06D6A0;
+      font-family: 'Unbounded', sans-serif;
+    }
+    .cr-session-chip .dot {
+      width: 6px; height: 6px; 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)} }
+
+    .cr-header-btn {
+      display: flex; align-items: center; gap: 6px;
+      padding: 7px 14px; border-radius: 99px;
+      border: 1.5px solid rgba(255,255,255,0.15); background: transparent;
+      color: rgba(255,255,255,0.7); font-family: 'Manrope',sans-serif;
+      font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: all .15s;
+      white-space: nowrap;
+    }
+    .cr-header-btn:hover { border-color: rgba(255,255,255,0.4); color: #fff; }
+    .cr-header-btn.danger { border-color: rgba(241,91,181,0.4); color: #F15BB5; }
+    .cr-header-btn.danger:hover { background: rgba(241,91,181,0.12); }
+    .cr-header-btn svg { width: 14px; height: 14px; }
+
+    /* ── body ── */
+    .cr-body { flex: 1; display: flex; min-height: 0; }
+
+    /* ── main area (whiteboard placeholder) ── */
+    .cr-main {
+      flex: 1; display: flex; flex-direction: column;
+      align-items: center; justify-content: center;
+      background: #0e1117; min-width: 0;
+    }
+    .cr-idle {
+      display: flex; flex-direction: column; align-items: center; gap: 20px;
+      text-align: center; padding: 40px;
+    }
+    .cr-idle-icon {
+      width: 72px; height: 72px; border-radius: 20px;
+      background: linear-gradient(135deg, rgba(155,93,229,0.2), rgba(6,214,224,0.1));
+      border: 1.5px solid rgba(155,93,229,0.3);
+      display: flex; align-items: center; justify-content: center;
+    }
+    .cr-idle-icon svg { width: 36px; height: 36px; stroke: #9B5DE5; }
+    .cr-idle h2 {
+      font-family: 'Unbounded',sans-serif; font-size: 1.1rem; font-weight: 800;
+      color: #fff; margin: 0;
+    }
+    .cr-idle p { color: #8898AA; font-size: 0.85rem; margin: 0; max-width: 340px; line-height: 1.6; }
+    .cr-start-btn {
+      display: flex; align-items: center; gap: 8px;
+      padding: 12px 28px; border-radius: 99px;
+      background: linear-gradient(135deg, #9B5DE5, #7B3FC5);
+      border: none; color: #fff; font-family: 'Manrope',sans-serif;
+      font-size: 0.88rem; font-weight: 700; cursor: pointer;
+      transition: all .2s; box-shadow: 0 4px 20px rgba(155,93,229,0.35);
+    }
+    .cr-start-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 28px rgba(155,93,229,0.5); }
+    .cr-start-btn svg { width: 16px; height: 16px; }
+
+    /* active session main area — whiteboard */
+    .cr-active-main {
+      flex: 1; align-self: stretch; display: flex; flex-direction: column;
+      overflow: hidden; min-height: 0;
+    }
+    .cr-board-area {
+      flex: 1; display: flex; flex-direction: row;
+      overflow: hidden; min-height: 0;
+    }
+    .cr-board-wrap {
+      flex: 1; position: relative; overflow: hidden;
+      background: #213d26;
+      /* Chalkboard wooden frame */
+      border: 10px solid #3a2210;
+      border-top: 12px solid #3a2210;
+      border-bottom: 14px solid #2c1a0d;
+      box-shadow:
+        inset 0 0 0 2px rgba(0,0,0,0.55),
+        inset 0 0 0 3px rgba(255,200,100,0.07),
+        0 4px 18px rgba(0,0,0,0.6),
+        0 1px 0 rgba(255,200,80,0.08);
+      /* Wood grain via gradient */
+      background-image: none;
+    }
+    /* Chalk-dust highlight at inner bottom edge of frame */
+    .cr-board-wrap::before {
+      content: '';
+      position: absolute;
+      bottom: 0; left: 0; right: 0;
+      height: 3px;
+      background: rgba(255,255,255,0.06);
+      pointer-events: none; z-index: 10;
+    }
+    /* Wood highlight — top inner edge */
+    .cr-board-wrap::after {
+      content: '';
+      position: absolute;
+      top: 0; left: 0; right: 0;
+      height: 2px;
+      background: rgba(255,200,100,0.08);
+      pointer-events: none; z-index: 10;
+    }
+    #cr-canvas {
+      display: block; cursor: crosshair;
+      touch-action: none;
+    }
+    /* Thumbnail panel (pages sidebar) */
+    .wb-thumbs-panel {
+      width: 110px; flex-shrink: 0;
+      background: #120d1e;
+      border-right: 1px solid rgba(155,93,229,0.2);
+      display: flex; flex-direction: column;
+      overflow-y: auto; overflow-x: hidden;
+      padding: 6px 4px 40px;
+      gap: 6px; position: relative;
+      scrollbar-width: thin; scrollbar-color: rgba(155,93,229,0.3) transparent;
+    }
+    .wb-thumb-item {
+      position: relative; cursor: pointer; flex-shrink: 0;
+      border-radius: 4px; overflow: hidden;
+      border: 1.5px solid transparent;
+      transition: border-color .12s;
+    }
+    .wb-thumb-item:hover { border-color: rgba(155,93,229,0.5); }
+    .wb-thumb-item.active { border-color: #9B5DE5; }
+    .wb-thumb-item canvas { display: block; width: 100%; height: auto; }
+    .wb-thumb-num {
+      position: absolute; bottom: 2px; right: 4px;
+      font-size: 9px; color: rgba(255,255,255,0.4);
+      font-family: 'Manrope', sans-serif;
+    }
+    .wb-thumbs-add {
+      position: sticky; bottom: 0;
+      width: 100%; padding: 4px; background: #120d1e;
+      border-top: 1px solid rgba(155,93,229,0.15);
+    }
+    .wb-thumbs-add-btn {
+      width: 100%; height: 28px; border-radius: 4px;
+      background: rgba(155,93,229,0.12); border: 1px solid rgba(155,93,229,0.25);
+      color: rgba(255,255,255,0.5); font-size: 16px; cursor: pointer;
+      transition: all .12s;
+    }
+    .wb-thumbs-add-btn:hover { background: rgba(155,93,229,0.22); color: #fff; }
+    /* Template picker */
+    .wb-tpl-picker {
+      display: flex; align-items: center; gap: 4px; flex-shrink: 0;
+    }
+    .wb-tpl-picker label { font-size: 10px; color: rgba(255,230,180,0.45); white-space: nowrap; }
+    .wb-tpl-picker select {
+      font-size: 11px; background: #2a1a0e;
+      border: 1px solid rgba(255,180,60,0.3); border-radius: 4px;
+      color: rgba(255,230,180,0.9); padding: 2px 4px; cursor: pointer;
+      max-width: 90px;
+    }
+    .wb-tpl-picker select option {
+      background: #2a1a0e;
+      color: #ffe0b0;
+    }
+    /* toolbar — wood-tray look beneath the board */
+    .cr-toolbar {
+      flex-shrink: 0;
+      background: linear-gradient(to bottom, #2c1e10, #1e1509);
+      border-top: 2px solid #4a2e18;
+      border-bottom: 1px solid #110e08;
+      display: flex; flex-direction: column; align-items: stretch;
+      box-shadow: 0 3px 10px rgba(0,0,0,0.5);
+    }
+    .cr-tb-row {
+      height: 44px; flex-shrink: 0;
+      display: flex; align-items: center; gap: 3px; padding: 0 8px;
+      overflow-x: auto; overflow-y: hidden;
+      scrollbar-width: thin; scrollbar-color: rgba(255,180,60,0.18) transparent;
+    }
+    .cr-tb-row + .cr-tb-row {
+      border-top: 1px solid rgba(255,180,60,0.1);
+    }
+    .cr-tb-row::-webkit-scrollbar { height: 2px; }
+    .cr-tb-row::-webkit-scrollbar-thumb { background: rgba(255,180,60,0.2); border-radius:2px; }
+    .cr-tool-sep {
+      width: 1px; height: 20px; background: rgba(255,255,255,0.12);
+      margin: 0 4px; flex-shrink: 0;
+    }
+    .cr-tool-btn {
+      display: flex; align-items: center; justify-content: center;
+      width: 32px; height: 32px; border-radius: 7px; border: 1.5px solid transparent;
+      background: transparent; cursor: pointer; color: rgba(255,230,180,0.55);
+      transition: all .12s; flex-shrink: 0;
+    }
+    .cr-tool-btn:hover { background: rgba(255,200,100,0.1); color: rgba(255,230,180,0.95); }
+    .cr-tool-btn.active {
+      background: rgba(255,180,60,0.15);
+      border-color: rgba(255,180,60,0.45);
+      color: #f5b942;
+    }
+    .cr-tool-btn svg { width: 15px; height: 15px; }
+    .cr-color-btn {
+      width: 20px; height: 20px; border-radius: 50%;
+      border: 2px solid transparent; cursor: pointer;
+      flex-shrink: 0; transition: transform .12s;
+      outline: none;
+    }
+    .cr-color-btn:hover { transform: scale(1.15); }
+    .cr-color-btn.active { border-color: #fff; transform: scale(1.15); }
+    .cr-width-btn {
+      display: flex; align-items: center; justify-content: center;
+      width: 32px; height: 32px; border-radius: 8px; border: 1.5px solid transparent;
+      background: transparent; cursor: pointer; flex-shrink: 0;
+      transition: all .12s;
+    }
+    .cr-width-btn:hover { background: rgba(255,200,100,0.1); }
+    .cr-width-btn.active { background: rgba(255,180,60,0.15); border-color: rgba(255,180,60,0.45); }
+    .cr-width-dot {
+      border-radius: 50%; background: rgba(255,230,180,0.6);
+      pointer-events: none;
+    }
+    .cr-width-btn.active .cr-width-dot { background: #f5b942; }
+    .cr-linestyle-btn {
+      display: flex; align-items: center; justify-content: center;
+      width: 32px; height: 32px; border-radius: 8px; border: 1.5px solid transparent;
+      background: transparent; cursor: pointer; flex-shrink: 0;
+      transition: all .12s; color: rgba(255,230,180,0.55);
+      font-size: 13px; font-weight: bold; letter-spacing: 1px;
+    }
+    .cr-linestyle-btn:hover { background: rgba(255,200,100,0.1); }
+    .cr-linestyle-btn.active { background: rgba(255,180,60,0.15); border-color: rgba(255,180,60,0.45); color: #f5b942; }
+    .cr-opacity-row {
+      display: flex; align-items: center; gap: 4px; flex-shrink: 0;
+    }
+    .cr-opacity-row label { font-size: 10px; color: rgba(255,230,180,0.45); white-space: nowrap; }
+    #wb-opacity-slider {
+      width: 60px; height: 4px; accent-color: #f5b942; cursor: pointer;
+    }
+    .wb-zoom-row {
+      display: flex; align-items: center; gap: 2px; flex-shrink: 0;
+    }
+    .wb-zoom-label {
+      font-family: 'Manrope', sans-serif; font-size: 0.7rem; font-weight: 700;
+      color: rgba(255,210,140,0.6); min-width: 36px; text-align: center;
+      white-space: nowrap;
+    }
+    .wb-zoom-label:hover { color: #f5b942; }
+    /* overlay properties panel */
+    .wb-ov-props {
+      display: none; align-items: center; gap: 6px; flex-shrink: 0;
+      background: rgba(28,20,44,0.92); border: 1px solid rgba(155,93,229,0.3);
+      border-radius: 8px; padding: 3px 10px; font-family: 'Manrope',sans-serif;
+    }
+    .wb-ov-props.visible { display: flex; }
+    .wb-ov-props label { font-size: 0.68rem; color: rgba(255,255,255,0.55); white-space: nowrap; }
+    .wb-ov-props input[type=number] {
+      width: 52px; background: rgba(255,255,255,0.07); border: 1px solid rgba(155,93,229,0.3);
+      border-radius: 5px; color: #e8e0f7; font-size: 0.72rem; padding: 2px 4px;
+      text-align: center; -moz-appearance: textfield;
+    }
+    .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); }
+    /* read-only overlay label */
+    .cr-board-readonly {
+      position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
+      background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1);
+      border-radius: 99px; padding: 4px 14px;
+      font-family: 'Manrope',sans-serif; font-size: 0.72rem; color: rgba(255,255,255,0.4);
+      pointer-events: none; white-space: nowrap;
+    }
+
+    /* page nav */
+    .cr-page-nav {
+      display: flex; align-items: center; gap: 4px; margin-left: auto; flex-shrink: 0;
+    }
+    .cr-page-label {
+      font-family: 'Manrope',sans-serif; font-size: 0.72rem; font-weight: 700;
+      color: rgba(255,210,140,0.5); min-width: 42px; text-align: center;
+    }
+    /* hand raise */
+    .cr-hand-btn {
+      display: flex; align-items: center; gap: 6px;
+      padding: 7px 14px; border-radius: 99px;
+      border: 1.5px solid rgba(255,255,255,0.15); background: transparent;
+      color: rgba(255,255,255,0.7); font-family: 'Manrope',sans-serif;
+      font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: all .15s;
+    }
+    .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; }
+    /* raised hands section in participants panel */
+    .cr-hands-section {
+      padding: 8px 8px 0; flex-shrink: 0;
+    }
+    .cr-hands-title {
+      font-family: 'Manrope',sans-serif; font-size: 0.7rem; font-weight: 700;
+      color: #FFB347; text-transform: uppercase; letter-spacing: .05em;
+      padding: 4px 2px 6px; display: flex; align-items: center; gap: 6px;
+    }
+    .cr-hands-title svg { width: 12px; height: 12px; }
+    .cr-hand-item {
+      display: flex; align-items: center; gap: 8px;
+      padding: 5px 10px; border-radius: 8px; background: rgba(255,179,71,0.08);
+      font-family: 'Manrope',sans-serif; font-size: 0.78rem; color: #FFB347;
+      font-weight: 600; margin-bottom: 3px;
+    }
+    .cr-hand-item svg { width: 13px; height: 13px; flex-shrink: 0; }
+
+    /* ── right panel ── */
+    .cr-right {
+      width: 300px; flex-shrink: 0;
+      background: #12161f; border-left: 1.5px solid rgba(255,255,255,0.06);
+      display: flex; flex-direction: column;
+    }
+
+    /* participants */
+    .cr-panel-tabs {
+      display: flex; border-bottom: 1.5px solid rgba(255,255,255,0.06); flex-shrink: 0;
+    }
+    .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;
+    }
+    .cr-tab.active { color: #9B5DE5; border-bottom-color: #9B5DE5; }
+    .cr-tab svg { width: 13px; height: 13px; }
+    .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;
+    }
+
+    /* participants list */
+    .cr-participants {
+      flex: 1; overflow-y: auto; padding: 8px;
+      display: flex; flex-direction: column; gap: 4px;
+    }
+    .cr-participants::-webkit-scrollbar { width: 4px; }
+    .cr-participants::-webkit-scrollbar-track { background: transparent; }
+    .cr-participants::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
+
+    .cr-participant {
+      display: flex; align-items: center; gap: 8px;
+      padding: 8px 10px; border-radius: 10px;
+      transition: background .15s;
+    }
+    .cr-participant:hover { background: rgba(255,255,255,0.04); }
+    .cr-p-avatar {
+      width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
+      background: linear-gradient(135deg, #9B5DE5, #06D6E0);
+      display: flex; align-items: center; justify-content: center;
+      font-size: 0.7rem; font-weight: 800; color: #fff;
+      font-family: 'Unbounded', sans-serif;
+      transition: box-shadow .15s;
+    }
+    .cr-p-avatar.speaking {
+      box-shadow: 0 0 0 3px #06D6A0, 0 0 10px rgba(6,214,160,.5);
+      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); }
+    }
+    .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-status svg { width: 13px; height: 13px; }
+    .mic-on { color: #06D6A0; }
+    .mic-off { color: #8898AA; }
+    .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; }
+    /* Draw permission toggle — always visible for teacher */
+    .cr-p-draw-toggle {
+      display: flex; align-items: center; gap: 4px;
+      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
+      border-radius: 6px; padding: 2px 7px 2px 5px;
+      cursor: pointer; font-size: 0.67rem; font-weight: 600; color: #8898AA;
+      transition: background .15s, border-color .15s, color .15s;
+      white-space: nowrap;
+    }
+    .cr-p-draw-toggle:hover { background: rgba(6,214,160,.12); border-color: rgba(6,214,160,.3); color: #06D6A0; }
+    .cr-p-draw-toggle.granted {
+      background: rgba(6,214,160,.15); border-color: rgba(6,214,160,.5); color: #06D6A0;
+    }
+    .cr-p-draw-toggle svg { flex-shrink: 0; }
+    /* Badge for student who can draw */
+    .cr-p-draw-badge {
+      display: inline-flex; align-items: center;
+      background: rgba(6,214,160,.15); border: 1px solid rgba(6,214,160,.4);
+      border-radius: 4px; padding: 1px 5px; font-size: 0.6rem; font-weight: 700; color: #06D6A0;
+      gap: 3px;
+    }
+
+    /* 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;
+    }
+    .cr-messages::-webkit-scrollbar { width: 4px; }
+    .cr-messages::-webkit-scrollbar-track { background: transparent; }
+    .cr-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); 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; }
+    .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.teacher-name { color: #06D6A0; }
+    .cr-msg-time { font-size: 0.65rem; color: #8898AA; flex: 1; }
+    .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;
+      padding: 1px; border-radius: 4px; display: flex; align-items: center;
+      opacity: 0; transition: opacity .15s, color .15s;
+    }
+    .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; }
+    /* 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 */
+    .cr-msg-reactions { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
+    .cr-msg-react-bar {
+      display: none; gap: 3px;
+      position: absolute; right: 4px; top: 4px;
+      background: rgba(20,14,40,0.95); border: 1px solid rgba(155,93,229,0.3);
+      border-radius: 8px; padding: 3px 5px;
+    }
+    .cr-msg:hover .cr-msg-react-bar { display: flex; }
+    .cr-msg { position: relative; }
+    .cr-react-pick {
+      background: none; border: none; cursor: pointer; padding: 3px 4px; border-radius: 5px;
+      color: rgba(255,255,255,0.45); font-size: 13px; line-height: 1;
+      transition: all .12s; display: flex; align-items: center; justify-content: center;
+    }
+    .cr-react-pick:hover { background: rgba(155,93,229,0.2); color: #c4b5fd; }
+    .cr-react-chip {
+      display: inline-flex; align-items: center; gap: 3px;
+      padding: 1px 7px; border-radius: 99px; cursor: pointer;
+      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
+      font-size: 0.72rem; color: rgba(255,255,255,0.6); transition: all .12s;
+    }
+    .cr-react-chip.mine { background: rgba(155,93,229,0.2); border-color: rgba(155,93,229,0.5); color: #c4b5fd; }
+    .cr-react-chip:hover { background: rgba(155,93,229,0.25); }
+    .cr-react-chip svg { flex-shrink: 0; }
+    /* chat attach preview */
+    .cr-chat-attach-preview {
+      display: none; align-items: center; gap: 8px;
+      padding: 6px 10px; background: rgba(155,93,229,0.1);
+      border: 1px solid rgba(155,93,229,0.3); border-radius: 8px; margin: 0 10px 4px;
+    }
+    .cr-chat-attach-preview.show { display: flex; }
+    .cr-attach-thumb { width: 40px; height: 40px; border-radius: 5px; object-fit: cover; }
+    .cr-attach-name { flex: 1; font-size: 0.72rem; color: rgba(255,255,255,0.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .cr-attach-rm { background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.4); padding: 2px; border-radius: 4px; flex-shrink: 0; }
+    .cr-attach-rm:hover { color: #F15BB5; }
+    .cr-attach-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: 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); }
+    .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;
+    }
+    .cr-notes-ta:focus { border-color: rgba(155,93,229,0.5); }
+    .cr-notes-ta::placeholder { color: rgba(255,255,255,0.2); }
+    /* templates modal */
+    .cr-tpl-modal-overlay {
+      display: none; position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.7);
+      align-items: center; justify-content: center;
+    }
+    .cr-tpl-modal-overlay.open { display: flex; }
+    .cr-tpl-modal {
+      background: #15102a; border: 1.5px solid rgba(155,93,229,0.35);
+      border-radius: 16px; padding: 20px; width: min(480px, calc(100vw - 24px));
+      max-height: 80vh; display: flex; flex-direction: column; gap: 12px;
+      box-shadow: 0 20px 60px rgba(0,0,0,0.7);
+    }
+    .cr-tpl-hdr { display: flex; align-items: center; justify-content: space-between; }
+    .cr-tpl-title { font-family:'Unbounded',sans-serif; font-size:0.82rem; font-weight:800; color:#fff; }
+    .cr-tpl-close { background:none;border:none;cursor:pointer;color:rgba(255,255,255,0.4);font-size:18px;padding:0 4px; }
+    .cr-tpl-list { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:6px; min-height:80px; }
+    .cr-tpl-item {
+      display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;
+      background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);cursor:pointer;
+      transition:all .12s;
+    }
+    .cr-tpl-item:hover { background:rgba(155,93,229,0.12);border-color:rgba(155,93,229,0.35); }
+    .cr-tpl-item-name { flex:1;font-size:0.82rem;color:#e8e0f7; }
+    .cr-tpl-item-meta { font-size:0.68rem;color:rgba(255,255,255,0.3); }
+    .cr-tpl-item-del { background:none;border:none;cursor:pointer;color:rgba(255,255,255,0.2);padding:2px;border-radius:4px; }
+    .cr-tpl-item-del:hover { color:#F15BB5; }
+    .cr-tpl-save-area { display:flex;gap:8px;border-top:1px solid rgba(255,255,255,0.08);padding-top:12px; }
+    .cr-tpl-name-input {
+      flex:1;background:rgba(255,255,255,0.06);border:1.5px solid rgba(255,255,255,0.12);border-radius:8px;
+      padding:7px 10px;color:#e8e0f7;font-size:0.82rem;font-family:'Manrope',sans-serif;outline:none;
+    }
+    .cr-tpl-name-input:focus { border-color:rgba(155,93,229,0.6); }
+    .cr-tpl-save-btn {
+      padding:7px 16px;border-radius:8px;border:none;background:linear-gradient(135deg,#9B5DE5,#7B3FC5);
+      color:#fff;font-size:0.8rem;font-weight:700;font-family:'Manrope',sans-serif;cursor:pointer;
+      white-space:nowrap;transition:all .15s;
+    }
+    .cr-tpl-save-btn:hover { transform:translateY(-1px);box-shadow:0 4px 14px rgba(155,93,229,0.4); }
+    .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;
+    }
+    .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;
+    }
+    .cr-chat-input:focus { border-color: rgba(155,93,229,0.5); }
+    .cr-chat-input::placeholder { color: #8898AA; }
+    .cr-chat-send {
+      width: 34px; height: 34px; border-radius: 10px;
+      background: #9B5DE5; border: none; cursor: pointer;
+      display: flex; align-items: center; justify-content: center;
+      color: #fff; transition: all .15s; flex-shrink: 0;
+    }
+    .cr-chat-send:hover { background: #7B3FC5; }
+    .cr-chat-send svg { width: 14px; height: 14px; }
+
+    /* no session placeholder in chat */
+    .cr-no-session {
+      flex: 1; display: flex; flex-direction: column;
+      align-items: center; justify-content: center; gap: 10px;
+      padding: 20px; text-align: center;
+    }
+    .cr-no-session svg { width: 32px; height: 32px; stroke: #8898AA; }
+    .cr-no-session p { font-size: 0.78rem; color: #8898AA; line-height: 1.5; margin: 0; }
+
+    /* ── Modal: start session ── */
+    .cr-modal-overlay {
+      position: fixed; inset: 0; background: rgba(0,0,0,0.7);
+      display: flex; align-items: center; justify-content: center;
+      z-index: 1000; opacity: 0; pointer-events: none; transition: opacity .2s;
+    }
+    .cr-modal-overlay.open { opacity: 1; pointer-events: all; }
+    .cr-modal {
+      background: #1a1f2e; border-radius: 18px;
+      border: 1.5px solid rgba(255,255,255,0.1);
+      padding: 28px; width: 440px; max-width: 90vw;
+      transform: translateY(10px); transition: transform .2s;
+    }
+    .cr-modal-overlay.open .cr-modal { transform: translateY(0); }
+    .cr-modal-title {
+      font-family: 'Unbounded',sans-serif; font-size: 1rem; font-weight: 800;
+      color: #fff; margin-bottom: 6px;
+    }
+    .cr-modal-sub { font-size: 0.8rem; color: #8898AA; margin-bottom: 20px; }
+
+    .cr-mode-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
+    .cr-mode-tab {
+      flex: 1; padding: 9px; border-radius: 10px;
+      border: 1.5px solid rgba(255,255,255,0.1); background: transparent;
+      color: #8898AA; font-family: 'Manrope',sans-serif; font-size: 0.78rem;
+      font-weight: 700; cursor: pointer; transition: all .15s;
+    }
+    .cr-mode-tab.active {
+      border-color: #9B5DE5; background: rgba(155,93,229,0.12); color: #c4b5fd;
+    }
+
+    .cr-field { margin-bottom: 14px; }
+    .cr-label { font-size: 0.75rem; font-weight: 700; color: #8898AA; margin-bottom: 6px; display: block; }
+    .cr-input {
+      width: 100%; background: rgba(255,255,255,0.06);
+      border: 1.5px solid rgba(255,255,255,0.1); border-radius: 10px;
+      padding: 10px 12px; color: #fff; font-family: 'Manrope',sans-serif;
+      font-size: 0.85rem; outline: none; transition: border-color .15s; box-sizing: border-box;
+    }
+    .cr-input:focus { border-color: rgba(155,93,229,0.5); }
+    .cr-select {
+      width: 100%; background: rgba(255,255,255,0.06);
+      border: 1.5px solid rgba(255,255,255,0.1); border-radius: 10px;
+      padding: 10px 12px; color: #fff; font-family: 'Manrope',sans-serif;
+      font-size: 0.85rem; outline: none; cursor: pointer; appearance: none;
+      transition: border-color .15s;
+    }
+    .cr-select:focus { border-color: rgba(155,93,229,0.5); }
+    .cr-select option { background: #1a1f2e; }
+
+    /* online students list */
+    .cr-online-list {
+      max-height: 200px; overflow-y: auto; border: 1.5px solid rgba(255,255,255,0.1);
+      border-radius: 10px; background: rgba(255,255,255,0.03);
+    }
+    .cr-online-item {
+      display: flex; align-items: center; gap: 10px; padding: 9px 12px;
+      cursor: pointer; transition: background .12s;
+    }
+    .cr-online-item:hover { background: rgba(155,93,229,0.12); }
+    .cr-online-item.selected { background: rgba(155,93,229,0.18); }
+    .cr-online-dot {
+      width: 7px; height: 7px; border-radius: 50%; background: #22c55e; flex-shrink: 0;
+    }
+    .cr-online-avatar {
+      width: 28px; height: 28px; border-radius: 50%;
+      background: linear-gradient(135deg, #9B5DE5, #06D6E0);
+      display: flex; align-items: center; justify-content: center;
+      font-size: 0.62rem; font-weight: 800; color: #fff; flex-shrink: 0;
+    }
+    .cr-online-name { font-size: 0.83rem; color: #d1d5db; flex: 1; }
+    .cr-online-check {
+      width: 16px; height: 16px; border-radius: 4px;
+      border: 1.5px solid rgba(155,93,229,0.4); flex-shrink: 0; transition: all .12s;
+    }
+    .cr-online-item.selected .cr-online-check {
+      background: #9B5DE5; border-color: #9B5DE5;
+    }
+    .cr-online-empty { padding: 16px 12px; text-align: center; font-size: .8rem; color: #475569; }
+    .cr-online-refresh {
+      display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
+      font-size: .72rem; font-weight: 700; color: #8898AA; cursor: pointer;
+      background: none; border: none; padding: 0; font-family: 'Manrope',sans-serif;
+    }
+    .cr-online-refresh:hover { color: #c4b5fd; }
+    .cr-selected-users { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
+    .cr-selected-user {
+      display: flex; align-items: center; gap: 5px;
+      padding: 4px 10px; border-radius: 99px;
+      background: rgba(155,93,229,0.15); border: 1.5px solid rgba(155,93,229,0.3);
+      font-size: 0.75rem; font-weight: 600; color: #c4b5fd;
+    }
+    .cr-selected-user button {
+      background: none; border: none; cursor: pointer; color: #c4b5fd;
+      padding: 0; display: flex; align-items: center; opacity: .7;
+    }
+    .cr-selected-user button:hover { opacity: 1; }
+    .cr-selected-user button svg { width: 11px; height: 11px; }
+
+    .cr-modal-actions { display: flex; gap: 10px; margin-top: 20px; }
+    .cr-modal-cancel {
+      flex: 1; padding: 11px; border-radius: 10px;
+      border: 1.5px solid rgba(255,255,255,0.1); background: transparent;
+      color: #8898AA; font-family: 'Manrope',sans-serif; font-size: 0.85rem;
+      font-weight: 700; cursor: pointer; transition: all .15s;
+    }
+    .cr-modal-cancel:hover { border-color: rgba(255,255,255,0.25); color: #fff; }
+    .cr-modal-confirm {
+      flex: 2; padding: 11px; border-radius: 10px;
+      background: linear-gradient(135deg, #9B5DE5, #7B3FC5);
+      border: none; color: #fff; font-family: 'Manrope',sans-serif;
+      font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: all .15s;
+    }
+    .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; }
+
+    /* join banner (student) */
+    .cr-join-banner {
+      background: linear-gradient(135deg, rgba(155,93,229,0.15), rgba(6,214,224,0.08));
+      border: 1.5px solid rgba(155,93,229,0.3); border-radius: 14px;
+      padding: 24px 28px; max-width: 380px; text-align: center;
+      display: flex; flex-direction: column; align-items: center; gap: 14px;
+    }
+    .cr-join-banner h3 {
+      font-family: 'Unbounded',sans-serif; font-size: 1rem; font-weight: 800;
+      color: #fff; margin: 0;
+    }
+    .cr-join-banner p { font-size: 0.82rem; color: #8898AA; margin: 0; line-height: 1.6; }
+    .cr-join-btn {
+      padding: 11px 32px; border-radius: 99px;
+      background: linear-gradient(135deg, #9B5DE5, #7B3FC5);
+      border: none; color: #fff; font-family: 'Manrope',sans-serif;
+      font-size: 0.88rem; font-weight: 700; cursor: pointer; transition: all .2s;
+    }
+    .cr-join-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(155,93,229,0.4); }
+
+    /* ── Session timer ── */
+    .cr-timer {
+      font-family: 'Manrope', monospace; font-size: 0.72rem; font-weight: 700;
+      color: rgba(255,255,255,0.35); letter-spacing: .04em; padding: 0 2px;
+    }
+    /* ── Teacher badge in participants ── */
+    .cr-p-teacher {
+      font-size: 0.6rem; font-weight: 700; color: #06D6A0;
+      background: rgba(6,214,160,0.12); border-radius: 4px; padding: 1px 5px;
+      white-space: nowrap; flex-shrink: 0;
+    }
+    /* ── Follow teacher toggle (student) ── */
+    .cr-follow-btn {
+      display: flex; align-items: center; gap: 5px;
+      padding: 3px 10px; border-radius: 99px; font-family: 'Manrope',sans-serif;
+      font-size: 0.7rem; font-weight: 700; white-space: nowrap;
+      border: 1.5px solid rgba(255,255,255,0.1); background: transparent;
+      color: rgba(255,255,255,0.35); cursor: pointer; transition: all .15s; flex-shrink: 0;
+    }
+    .cr-follow-btn.active {
+      border-color: rgba(6,214,224,0.4); background: rgba(6,214,224,0.08); color: #06D6E0;
+    }
+    .cr-follow-btn svg { width: 11px; height: 11px; }
+    /* ── Custom color input ── */
+    .cr-color-custom {
+      width: 20px; height: 20px; border-radius: 50%; cursor: pointer; flex-shrink: 0;
+      border: 2px solid rgba(255,255,255,0.2); padding: 0; overflow: hidden;
+      background: none; transition: transform .12s;
+    }
+    .cr-color-custom:hover { transform: scale(1.15); }
+    .cr-color-custom::-webkit-color-swatch-wrapper { padding: 0; }
+    .cr-color-custom::-webkit-color-swatch { border: none; border-radius: 50%; }
+    /* ── Student minimal nav ── */
+    .cr-student-nav {
+      flex-shrink: 0; height: 44px; background: #12161f;
+      border-top: 1.5px solid rgba(255,255,255,0.06);
+      display: flex; align-items: center; gap: 4px; padding: 0 12px;
+    }
+
+    /* ── Phase 4: screen share video overlay ── */
+    #cr-screen-video {
+      position: absolute; inset: 0; width: 100%; height: 100%;
+      object-fit: contain; background: #0e1117; display: none; z-index: 2;
+    }
+    .cr-screen-label {
+      position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
+      background: rgba(155,93,229,0.25); border: 1.5px solid rgba(155,93,229,0.4);
+      border-radius: 99px; padding: 4px 14px;
+      font-family: 'Manrope',sans-serif; font-size: 0.72rem; color: #c4b5fd;
+      pointer-events: none; white-space: nowrap; z-index: 3; display: none;
+    }
+    /* header button states */
+    .cr-header-btn.cr-btn-sharing {
+      background: rgba(155,93,229,0.18); border-color: rgba(155,93,229,0.5); color: #c4b5fd;
+    }
+    /* ── student status notification bar ── */
+    #cr-status-bar {
+      position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
+      z-index: 30; pointer-events: none;
+      display: flex; flex-direction: column; align-items: center; gap: 6px;
+    }
+    .cr-status-msg {
+      display: flex; align-items: center; gap: 8px;
+      padding: 8px 16px; border-radius: 99px;
+      font-family: 'Manrope', sans-serif; font-size: 0.78rem; font-weight: 700;
+      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
+      box-shadow: 0 4px 20px rgba(0,0,0,0.4);
+      animation: cr-status-in .25s cubic-bezier(.34,1.4,.64,1) forwards;
+      white-space: nowrap;
+    }
+    .cr-status-msg.cr-status-out {
+      animation: cr-status-out .2s ease-in forwards;
+    }
+    .cr-status-msg svg { flex-shrink: 0; }
+    .cr-status-msg.type-success { background: rgba(6,214,160,.2); border: 1.5px solid rgba(6,214,160,.5); color: #06D6A0; }
+    .cr-status-msg.type-warn    { background: rgba(241,91,181,.18); border: 1.5px solid rgba(241,91,181,.5); color: #F15BB5; }
+    .cr-status-msg.type-info    { background: rgba(155,93,229,.2); border: 1.5px solid rgba(155,93,229,.5); color: #c4b5fd; }
+    @keyframes cr-status-in {
+      from { opacity: 0; transform: translateY(10px) scale(.92); }
+      to   { opacity: 1; transform: translateY(0)    scale(1); }
+    }
+    @keyframes cr-status-out {
+      from { opacity: 1; transform: translateY(0)    scale(1); }
+      to   { opacity: 0; transform: translateY(-6px) scale(.94); }
+    }
+
+    /* mic ON: green */
+    .cr-header-btn.cr-btn-mic-on {
+      background: rgba(6,214,160,.12); border-color: rgba(6,214,160,.5); color: #06D6A0;
+    }
+    .cr-header-btn.cr-btn-mic-on:hover {
+      background: rgba(6,214,160,.22); border-color: #06D6A0;
+    }
+    /* mic OFF: red */
+    .cr-header-btn.cr-btn-mic-off {
+      background: rgba(241,91,181,.12); border-color: rgba(241,91,181,.5); color: #F15BB5;
+    }
+    .cr-header-btn.cr-btn-mic-off:hover {
+      background: rgba(241,91,181,.22); border-color: #F15BB5;
+    }
+    /* per-participant mute button (teacher view) — pill style, always visible */
+    .cr-p-mute-btn {
+      display: flex; align-items: center; gap: 3px;
+      padding: 2px 7px 2px 5px; border-radius: 6px; border: 1px solid transparent;
+      font-family: 'Manrope',sans-serif; font-size: 0.65rem; font-weight: 700;
+      cursor: pointer; transition: all .15s; white-space: nowrap; flex-shrink: 0;
+    }
+    /* mic ON state for participant button */
+    .cr-p-mute-btn.mic-active {
+      background: rgba(6,214,160,.1); border-color: rgba(6,214,160,.35); color: #06D6A0;
+    }
+    .cr-p-mute-btn.mic-active:hover {
+      background: rgba(241,91,181,.15); border-color: rgba(241,91,181,.5); color: #F15BB5;
+    }
+    /* mic OFF state for participant button */
+    .cr-p-mute-btn.mic-muted {
+      background: rgba(241,91,181,.1); border-color: rgba(241,91,181,.35); color: #F15BB5;
+      opacity: 1 !important;
+    }
+    .cr-p-mute-btn.mic-muted:hover {
+      background: rgba(6,214,160,.1); border-color: rgba(6,214,160,.4); color: #06D6A0;
+    }
+
+    @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; }
+      .cr-main { min-height: 200px; }
+    }
+
+    /* ── Formula visual editor modal ────────────────────────────────────── */
+    .wbfm-overlay {
+      position: fixed; inset: 0; background: rgba(0,0,0,0.75);
+      z-index: 190; cursor: pointer;
+    }
+    .wbfm-card {
+      position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
+      z-index: 191;
+      width: min(700px, calc(100vw - 24px));
+      background: #15102a;
+      border: 1.5px solid rgba(155,93,229,0.38);
+      border-radius: 18px;
+      box-shadow: 0 24px 70px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.04);
+      font-family: 'Manrope', sans-serif;
+      display: flex; flex-direction: column;
+      max-height: calc(100vh - 32px);
+      overflow: hidden;
+    }
+    /* header */
+    .wbfm-hdr {
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 14px 18px 12px;
+      border-bottom: 1px solid rgba(255,255,255,0.07);
+      flex-shrink: 0;
+    }
+    .wbfm-title {
+      font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 800;
+      color: #fff; display: flex; align-items: center; gap: 8px;
+    }
+    .wbfm-close {
+      width: 28px; height: 28px; border-radius: 7px; border: none;
+      background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5);
+      cursor: pointer; display: flex; align-items: center; justify-content: center;
+      transition: all .12s;
+    }
+    .wbfm-close:hover { background: rgba(241,91,181,0.15); color: #F15BB5; }
+    /* big preview */
+    .wbfm-preview {
+      min-height: 72px; max-height: 110px; overflow: auto;
+      background: rgba(255,255,255,0.05);
+      border: 1px solid rgba(255,255,255,0.08);
+      margin: 10px 16px 0;
+      border-radius: 12px;
+      display: flex; align-items: center; justify-content: center;
+      padding: 10px 20px;
+      color: rgba(255,255,255,0.85);
+      font-size: 1.15rem;
+      flex-shrink: 0;
+      position: relative;
+    }
+    .wbfm-preview .katex { color: #fff; }
+    .wbfm-prev-hint {
+      position: absolute; bottom: 4px; right: 10px;
+      font-size: 0.67rem; color: rgba(255,255,255,0.18);
+      pointer-events: none;
+    }
+    /* category tabs */
+    .wbfm-tabs {
+      display: flex; gap: 2px;
+      padding: 8px 16px 0;
+      overflow-x: auto; flex-shrink: 0;
+      scrollbar-width: none;
+    }
+    .wbfm-tabs::-webkit-scrollbar { display: none; }
+    .wbfm-tab {
+      padding: 5px 13px; border-radius: 8px 8px 0 0;
+      border: 1px solid rgba(255,255,255,0.08); border-bottom: none;
+      background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.45);
+      font-size: 0.75rem; font-family: 'Manrope',sans-serif;
+      cursor: pointer; transition: all .13s; white-space: nowrap;
+      flex-shrink: 0;
+    }
+    .wbfm-tab:hover { background: rgba(155,93,229,0.14); color: rgba(255,255,255,0.75); }
+    .wbfm-tab.active {
+      background: rgba(155,93,229,0.22); color: #c4b5fd;
+      border-color: rgba(155,93,229,0.45); font-weight: 700;
+    }
+    /* button grid */
+    .wbfm-grid-wrap {
+      flex: 0 0 auto;
+      height: 210px;
+      overflow-y: auto;
+      padding: 8px 16px 6px;
+      border-top: 1px solid rgba(155,93,229,0.2);
+      scrollbar-width: thin; scrollbar-color: rgba(155,93,229,0.2) transparent;
+    }
+    .wbfm-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
+      gap: 5px;
+    }
+    .wbfm-vbtn {
+      height: 56px; border-radius: 9px;
+      border: 1.5px solid rgba(255,255,255,0.08);
+      background: rgba(255,255,255,0.04);
+      color: #e8e0f7; cursor: pointer;
+      transition: all .13s;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 0.95rem; padding: 4px 2px;
+      overflow: hidden; position: relative;
+    }
+    .wbfm-vbtn:hover {
+      background: rgba(155,93,229,0.2); border-color: rgba(155,93,229,0.55);
+      transform: translateY(-2px);
+      box-shadow: 0 4px 14px rgba(155,93,229,0.25);
+    }
+    .wbfm-vbtn:active { transform: translateY(0); }
+    .wbfm-vbtn .katex { color: #e8e0f7; font-size: 1em; pointer-events: none; }
+    .wbfm-vbtn .katex-display { margin: 0 !important; }
+    /* LaTeX code toggle */
+    .wbfm-latex-toggle {
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 6px 16px 4px; flex-shrink: 0;
+    }
+    .wbfm-lt-btn {
+      background: none; border: none;
+      color: rgba(255,255,255,0.32); font-size: 0.73rem;
+      font-family: 'Manrope',sans-serif; cursor: pointer;
+      display: flex; align-items: center; gap: 5px;
+      padding: 2px 4px; border-radius: 5px; transition: color .13s;
+    }
+    .wbfm-lt-btn:hover { color: rgba(255,255,255,0.6); }
+    .wbfm-lt-arrow { font-size: 0.65rem; transition: transform .2s; }
+    .wbfm-lt-arrow.open { transform: rotate(180deg); }
+    .wbfm-tab-hint {
+      font-size: 0.67rem; color: rgba(6,214,224,0.45); pointer-events: none;
+    }
+    .wbfm-latex-area {
+      padding: 0 16px 4px; flex-shrink: 0;
+    }
+    .wbfm-input {
+      background: rgba(255,255,255,0.05);
+      border: 1.5px solid rgba(155,93,229,0.4);
+      border-radius: 9px; outline: none;
+      color: #e8e0f7; caret-color: #9B5DE5;
+      font-size: 0.88rem; font-family: 'JetBrains Mono', 'Courier New', monospace;
+      padding: 8px 12px; resize: none; width: 100%;
+      line-height: 1.55; box-sizing: border-box;
+      transition: border-color .15s;
+    }
+    .wbfm-input:focus { border-color: rgba(155,93,229,0.8); }
+    /* bottom bar */
+    .wbfm-bottom {
+      display: flex; align-items: center; gap: 0;
+      padding: 8px 16px 13px; flex-shrink: 0;
+      border-top: 1px solid rgba(255,255,255,0.07);
+    }
+    .wbfm-size-row {
+      display: flex; align-items: center; gap: 6px; flex: 1;
+      font-size: 0.75rem; color: rgba(255,255,255,0.35);
+    }
+    .wbfm-sz {
+      padding: 3px 10px; border-radius: 6px; border: 1.5px solid rgba(255,255,255,0.12);
+      background: transparent; color: rgba(255,255,255,0.4);
+      font-size: 0.75rem; cursor: pointer; transition: all .12s;
+    }
+    .wbfm-sz.active { border-color: rgba(155,93,229,0.6); background: rgba(155,93,229,0.15); color: #c084fc; }
+    .wbfm-actions { display: flex; gap: 8px; }
+    .wbfm-cancel {
+      padding: 8px 18px; border-radius: 8px; border: 1.5px solid rgba(255,255,255,0.12);
+      background: transparent; color: rgba(255,255,255,0.5);
+      font-size: 0.82rem; font-family: 'Manrope',sans-serif;
+      cursor: pointer; transition: all .12s;
+    }
+    .wbfm-cancel:hover { border-color: rgba(255,255,255,0.3); color: #fff; }
+    .wbfm-insert {
+      padding: 8px 22px; border-radius: 8px; border: none;
+      background: linear-gradient(135deg, #9B5DE5, #7B3FC5);
+      color: #fff; font-size: 0.85rem; font-weight: 700;
+      font-family: 'Manrope',sans-serif; cursor: pointer;
+      transition: all .15s; box-shadow: 0 3px 14px rgba(155,93,229,0.4);
+    }
+    .wbfm-insert:hover { transform: translateY(-1px); box-shadow: 0 5px 20px rgba(155,93,229,0.55); }
+    .wbfm-insert:disabled { opacity: 0.4; pointer-events: none; }
+
+    /* ── Confirm/Alert dialog ───────────────────────────────────────────── */
+    .cr-dlg-overlay {
+      position: fixed; inset: 0; z-index: 9000;
+      background: rgba(10,7,20,0.72); backdrop-filter: blur(6px);
+      display: flex; align-items: center; justify-content: center;
+      padding: 20px;
+      animation: crDlgFadeIn .15s ease;
+    }
+    @keyframes crDlgFadeIn { from { opacity:0 } to { opacity:1 } }
+    .cr-dlg {
+      background: linear-gradient(155deg, rgba(30,22,48,0.98), rgba(22,15,38,0.98));
+      border: 1.5px solid rgba(155,93,229,0.25); border-radius: 18px;
+      padding: 28px 28px 24px; max-width: 400px; width: 100%;
+      box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
+      animation: crDlgSlideIn .18s cubic-bezier(.34,1.56,.64,1);
+      display: flex; flex-direction: column; gap: 0;
+    }
+    @keyframes crDlgSlideIn { from { transform: scale(.92) translateY(10px); opacity:0 } to { transform: none; opacity:1 } }
+    .cr-dlg-icon {
+      width: 48px; height: 48px; border-radius: 14px; margin-bottom: 16px;
+      display: flex; align-items: center; justify-content: center;
+    }
+    .cr-dlg-icon.danger { background: rgba(241,91,181,0.15); border: 1.5px solid rgba(241,91,181,0.25); }
+    .cr-dlg-icon.warn   { background: rgba(255,159,67,0.15);  border: 1.5px solid rgba(255,159,67,0.25); }
+    .cr-dlg-icon.info   { background: rgba(6,214,224,0.12);   border: 1.5px solid rgba(6,214,224,0.22); }
+    .cr-dlg-title {
+      font-family: 'Unbounded',sans-serif; font-size: 0.95rem; font-weight: 800;
+      color: #fff; margin: 0 0 8px;
+    }
+    .cr-dlg-msg {
+      font-size: 0.83rem; color: #8898AA; margin: 0 0 24px; line-height: 1.65;
+    }
+    .cr-dlg-actions { display: flex; gap: 10px; }
+    .cr-dlg-cancel {
+      flex: 1; padding: 10px; border-radius: 10px;
+      border: 1.5px solid rgba(255,255,255,0.1); background: transparent;
+      color: #8898AA; font-family: 'Manrope',sans-serif; font-size: 0.85rem;
+      font-weight: 700; cursor: pointer; transition: all .15s;
+    }
+    .cr-dlg-cancel:hover { border-color: rgba(255,255,255,0.28); color: #fff; }
+    .cr-dlg-ok {
+      flex: 2; padding: 10px; border-radius: 10px; border: none;
+      color: #fff; font-family: 'Manrope',sans-serif;
+      font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: all .15s;
+    }
+    .cr-dlg-ok.danger { background: linear-gradient(135deg, #F15BB5, #c43a94); }
+    .cr-dlg-ok.danger:hover { box-shadow: 0 4px 20px rgba(241,91,181,0.45); transform: translateY(-1px); }
+    .cr-dlg-ok.warn   { background: linear-gradient(135deg, #FF9F43, #e07a20); }
+    .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); }
+  </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" onclick="toggleSidebar()" 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"><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 nav-active"><i data-lucide="presentation" 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>
+      <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="toggleNotifDrop()">
+          <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>
+    </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>
+          <span class="sb-logout" style="pointer-events:none">Мой профиль</span>
+        </div>
+      </a>
+    </div>
+  </aside>
+  <div class="notif-drop" id="notif-drop"></div>
+
+  <div class="sb-content">
+    <!-- Header -->
+    <div class="cr-header">
+      <div class="cr-header-dots"></div>
+      <div class="cr-header-inner">
+        <div class="cr-title">
+          <i data-lucide="presentation" style="width:18px;height:18px;opacity:.6;flex-shrink:0"></i>
+          <span id="cr-session-title">Онлайн-урок</span>
+        </div>
+        <div id="cr-session-chip" style="display:none" class="cr-session-chip">
+          <span class="dot"></span> Идёт урок
+        </div>
+        <span class="cr-timer" id="cr-timer" style="display:none">00:00</span>
+        <div id="cr-header-actions" style="display:none; align-items:center; gap:8px;">
+          <button class="cr-header-btn" id="cr-mute-btn" onclick="crToggleMute()" style="display:none">
+          </button>
+          <button class="cr-header-btn" id="cr-screen-btn" onclick="crToggleScreen()" style="display:none">
+            <i data-lucide="monitor" style="width:14px;height:14px"></i>
+            <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>
+          <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>
+          </button>
+          <button class="cr-header-btn" id="cr-leave-btn" onclick="crLeaveSession()" style="display:none">
+            <i data-lucide="log-out" style="width:14px;height:14px"></i>
+            <span>Покинуть</span>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Body -->
+    <div class="cr-body">
+      <!-- Main area -->
+      <div class="cr-main" id="cr-main">
+        <!-- idle state (teacher) -->
+        <div class="cr-idle" id="cr-idle-teacher" style="display:none">
+          <div class="cr-idle-icon">
+            <i data-lucide="presentation" style="width:36px;height:36px;stroke:#9B5DE5"></i>
+          </div>
+          <h2>Начните онлайн-урок</h2>
+          <p>Интерактивная доска, голосовой чат и трансляция экрана для вашего класса</p>
+          <button class="cr-start-btn" onclick="crOpenStartModal()">
+            <i data-lucide="play" style="width:16px;height:16px"></i>
+            Начать урок
+          </button>
+        </div>
+
+        <!-- idle state (student) -->
+        <div class="cr-idle" id="cr-idle-student" style="display:none">
+          <div class="cr-idle-icon">
+            <i data-lucide="clock" style="width:36px;height:36px;stroke:#06D6E0"></i>
+          </div>
+          <h2>Ожидание урока</h2>
+          <p>Когда учитель начнёт урок — вы получите уведомление</p>
+        </div>
+
+        <!-- join banner (student got notification) -->
+        <div id="cr-join-banner" style="display:none">
+          <div class="cr-join-banner">
+            <i data-lucide="presentation" style="width:32px;height:32px;stroke:#9B5DE5"></i>
+            <h3 id="cr-join-title">Урок начался!</h3>
+            <p id="cr-join-sub">Нажмите кнопку чтобы войти</p>
+            <button class="cr-join-btn" onclick="crJoinSession()">Войти в урок</button>
+          </div>
+        </div>
+
+        <!-- active session main — whiteboard -->
+        <div class="cr-active-main" id="cr-active-main" style="display:none">
+          <!-- board area: thumbs panel + board wrap side by side -->
+          <div class="cr-board-area" id="cr-board-area">
+          <!-- thumbnail panel (teacher only) -->
+          <div class="wb-thumbs-panel" id="wb-thumbs-panel" style="display:none">
+            <div id="wb-thumbs-list"></div>
+            <div class="wb-thumbs-add">
+              <button class="wb-thumbs-add-btn" onclick="wbAddPage()" title="Добавить страницу">+</button>
+            </div>
+          </div>
+          <div class="cr-board-wrap" id="cr-board-wrap">
+            <canvas id="cr-canvas"></canvas>
+            <video id="cr-screen-video" autoplay playsinline></video>
+            <div class="cr-screen-label" id="cr-screen-label">Трансляция экрана</div>
+            <div class="cr-board-readonly" id="cr-board-readonly" style="display:none">Только просмотр</div>
+            <!-- Student status notification bar -->
+            <div id="cr-status-bar"></div>
+            <!-- Teacher cursor overlay (students see teacher's mouse) -->
+            <div id="cr-teacher-cursor" style="display:none;"></div>
+          </div>
+          </div><!-- /.cr-board-area -->
+          <!-- student nav: page nav + follow toggle -->
+          <div class="cr-student-nav" id="cr-student-nav" style="display:none">
+            <button class="cr-tool-btn" onclick="wbStudentPrevPage()" 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-student-page-label">1/1</span>
+            <button class="cr-tool-btn" onclick="wbStudentNextPage()" 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-follow-btn active" id="cr-follow-btn" onclick="crToggleFollow()" 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"/><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>
+          </div>
+          <!-- toolbar: teacher only -->
+          <div class="cr-toolbar" id="cr-toolbar" style="display:none">
+
+            <!-- ── ROW 1: drawing tools ─────────────────────────────────── -->
+            <div class="cr-tb-row">
+              <!-- select -->
+              <button class="cr-tool-btn" id="wb-tool-select" onclick="wbSetTool('select')" title="Выделить / переместить">
+                <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>
+              <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>
+              <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>
+              <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-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-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>
+
+            <!-- ── ROW 2: options + 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>
+              <button class="cr-color-btn"        data-color="#e8e0f7" style="background:#e8e0f7"  onclick="wbSetColor(this)" title="Лаванда"></button>
+              <button class="cr-color-btn"        data-color="#FFE066" style="background:#FFE066"  onclick="wbSetColor(this)" title="Жёлтый"></button>
+              <button class="cr-color-btn"        data-color="#06D6E0" style="background:#06D6E0"  onclick="wbSetColor(this)" title="Голубой"></button>
+              <button class="cr-color-btn"        data-color="#FF6B6B" style="background:#FF6B6B"  onclick="wbSetColor(this)" title="Красный"></button>
+              <button class="cr-color-btn"        data-color="#4361EE" style="background:#4361EE"  onclick="wbSetColor(this)" title="Синий"></button>
+              <button class="cr-color-btn"        data-color="#A8E063" style="background:#A8E063"  onclick="wbSetColor(this)" title="Зелёный"></button>
+              <button class="cr-color-btn"        data-color="#F15BB5" style="background:#F15BB5"  onclick="wbSetColor(this)" title="Розовый"></button>
+              <button class="cr-color-btn"        data-color="#9B5DE5" style="background:#9B5DE5"  onclick="wbSetColor(this)" title="Фиолетовый"></button>
+              <button class="cr-color-btn"        data-color="#FF9F43" style="background:#FF9F43"  onclick="wbSetColor(this)" title="Оранжевый"></button>
+              <button class="cr-color-btn"        data-color="#8B6F47" style="background:#8B6F47"  onclick="wbSetColor(this)" title="Коричневый"></button>
+              <button class="cr-color-btn"        data-color="#9CA3AF" style="background:#9CA3AF"  onclick="wbSetColor(this)" title="Серый"></button>
+              <input type="color" class="cr-color-custom" id="wb-color-custom" value="#ffffff"
+                onchange="wbSetCustomColor(this)" title="Свой цвет" />
+              <div class="cr-tool-sep"></div>
+              <!-- widths -->
+              <button class="cr-width-btn" id="wb-w1"  onclick="wbSetWidth(1,this)"  title="1px"><span class="cr-width-dot" style="width:2px;height:2px"></span></button>
+              <button class="cr-width-btn" id="wb-w2"  onclick="wbSetWidth(2,this)"  title="2px"><span class="cr-width-dot" style="width:3px;height:3px"></span></button>
+              <button class="cr-width-btn active" id="wb-w4" onclick="wbSetWidth(4,this)" title="4px"><span class="cr-width-dot" style="width:6px;height:6px"></span></button>
+              <button class="cr-width-btn" id="wb-w8"  onclick="wbSetWidth(8,this)"  title="8px"><span class="cr-width-dot" style="width:11px;height:11px"></span></button>
+              <button class="cr-width-btn" id="wb-w16" onclick="wbSetWidth(16,this)" title="16px"><span class="cr-width-dot" style="width:16px;height:16px"></span></button>
+              <div class="cr-tool-sep"></div>
+              <!-- line styles -->
+              <button class="cr-linestyle-btn active" id="wb-ls-solid"  onclick="wbSetLineStyle('solid',this)"  title="Сплошная">—</button>
+              <button class="cr-linestyle-btn"        id="wb-ls-dashed" onclick="wbSetLineStyle('dashed',this)" title="Пунктир">╌</button>
+              <button class="cr-linestyle-btn"        id="wb-ls-dotted" onclick="wbSetLineStyle('dotted',this)" title="Точки">···</button>
+              <div class="cr-tool-sep"></div>
+              <!-- opacity -->
+              <div class="cr-opacity-row">
+                <label>α</label>
+                <input type="range" id="wb-opacity-slider" min="10" max="100" value="100"
+                  oninput="wbSetOpacity(this.value)" title="Непрозрачность">
+              </div>
+              <div class="cr-tool-sep"></div>
+              <!-- object actions -->
+              <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>
+              <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) -->
+              <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>
+              </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">
+                <button class="cr-tool-btn" onclick="wbZoomIn()"  title="Приблизить (Ctrl+)"><svg 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"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg></button>
+                <span class="wb-zoom-label" id="wb-zoom-label" onclick="wbResetZoom()" title="Сбросить масштаб (Ctrl+0)" style="cursor:pointer">100%</span>
+                <button class="cr-tool-btn" onclick="wbZoomOut()" title="Отдалить (Ctrl-)"><svg 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"/><line x1="8" y1="11" x2="14" y2="11"/></svg></button>
+              </div>
+              <div class="cr-tool-sep"></div>
+              <!-- template picker -->
+              <div class="wb-tpl-picker">
+                <label>Шаблон:</label>
+                <select id="wb-tpl-select" onchange="wbSetPageTemplate(this.value)" title="Шаблон страницы">
+                  <option value="blank">Чистая</option>
+                  <option value="grid">Сетка</option>
+                  <option value="lined">Линейки</option>
+                  <option value="dots">Точки</option>
+                  <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>
+            </div>
+
+          </div>
+        </div>
+      </div>
+
+      <!-- Right panel -->
+      <div class="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>
+            Заметки
+          </button>
+        </div>
+
+        <!-- Participants panel -->
+        <div id="panel-participants" style="flex:1;overflow-y:auto;display:flex;flex-direction:column;">
+          <!-- raised hands (teacher only) -->
+          <div id="cr-hands-section" class="cr-hands-section" style="display:none">
+            <div class="cr-hands-title">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><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>
+              Поднятые руки
+            </div>
+            <div id="cr-hands-list"></div>
+          </div>
+          <div class="cr-participants" id="cr-participants-list">
+            <div class="cr-no-session" id="participants-no-session">
+              <i data-lucide="users" style="width:32px;height:32px;stroke:#8898AA"></i>
+              <p>Участники появятся когда урок начнётся</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Notes panel -->
+        <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-status" id="notes-status"></span>
+            </div>
+            <textarea class="cr-notes-ta" id="cr-notes-ta"
+              placeholder="Пишите заметки по уроку…"
+              oninput="crNotesOnInput()"></textarea>
+          </div>
+        </div>
+
+        <!-- Chat panel -->
+        <div id="panel-chat" style="display:none; flex:1; flex-direction:column; overflow:hidden;">
+          <div class="cr-no-session" id="chat-no-session">
+            <i data-lucide="message-circle" style="width:32px;height:32px;stroke:#8898AA"></i>
+            <p>Чат доступен во время урока</p>
+          </div>
+          <div class="cr-chat-wrap" id="chat-active" style="display:none">
+            <div class="cr-messages" id="cr-messages"></div>
+            <!-- attach preview -->
+            <div class="cr-chat-attach-preview" id="cr-attach-preview">
+              <img id="cr-attach-thumb" class="cr-attach-thumb" src="" alt="">
+              <span class="cr-attach-name" id="cr-attach-name"></span>
+              <button class="cr-attach-rm" onclick="crClearAttach()" 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="M18 6 6 18M6 6l12 12"/></svg>
+              </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>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Start Session Modal -->
+<div class="cr-modal-overlay" id="cr-modal">
+  <div class="cr-modal">
+    <div class="cr-modal-title">Начать онлайн-урок</div>
+    <div class="cr-modal-sub">Выберите аудиторию и введите тему</div>
+
+    <div class="cr-mode-tabs">
+      <button class="cr-mode-tab active" id="mode-class" onclick="crSetMode('class')">
+        <i data-lucide="graduation-cap" style="width:13px;height:13px;display:inline;vertical-align:middle;margin-right:4px"></i>
+        Класс
+      </button>
+      <button class="cr-mode-tab" id="mode-personal" onclick="crSetMode('personal')">
+        <i data-lucide="user" style="width:13px;height:13px;display:inline;vertical-align:middle;margin-right:4px"></i>
+        Личная сессия
+      </button>
+    </div>
+
+    <div class="cr-field">
+      <label class="cr-label">Тема урока (необязательно)</label>
+      <input type="text" class="cr-input" id="cr-title-input" placeholder="Например: Тема 5 — Фотосинтез" maxlength="100" />
+    </div>
+
+    <!-- class mode -->
+    <div id="field-class" class="cr-field">
+      <label class="cr-label">Класс</label>
+      <select class="cr-select" id="cr-class-select">
+        <option value="">Выберите класс...</option>
+      </select>
+    </div>
+
+    <!-- personal mode -->
+    <div id="field-personal" class="cr-field" style="display:none">
+      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px">
+        <label class="cr-label" style="margin:0">Онлайн-ученики</label>
+        <button class="cr-online-refresh" onclick="crLoadOnlineStudents()">
+          <i data-lucide="refresh-cw" style="width:11px;height:11px"></i>Обновить
+        </button>
+      </div>
+      <div class="cr-online-list" id="cr-online-list">
+        <div class="cr-online-empty">Загрузка...</div>
+      </div>
+      <div class="cr-selected-users" id="cr-selected-users"></div>
+    </div>
+
+    <div class="cr-modal-actions">
+      <button class="cr-modal-cancel" onclick="crCloseStartModal()">Отмена</button>
+      <button class="cr-modal-confirm" id="cr-confirm-btn" onclick="crStartSession()">
+        <i data-lucide="play" style="width:14px;height:14px;display:inline;vertical-align:middle;margin-right:4px"></i>
+        Начать урок
+      </button>
+    </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>
+  /* ── state ── */
+  let _me = null;
+  let _session = null;
+  let _sessionId = null;
+  let _sseHandle = null;
+  let _participants = {};   // userId -> {name, micMuted}
+  let _raisedHands  = {};   // userId -> userName
+  let _handRaised   = false;// student: own hand state
+  let _totalPages   = 1;    // total page count for current session
+  let _followTeacher = true; // student: follow teacher's page
+  let _mode = 'class';
+  let _selectedUsers = [];  // [{id, name}] for personal session
+
+  /* ── whiteboard state ── */
+  let _wb = null;             // Whiteboard instance
+  let _wbBatch = [];          // strokes pending send
+  let _wbBatchTimer = null;   // flush timer
+  let _wbCurrentPage = 1;
+  let _wbInitializing = false;       // true while loading initial strokes from server
+  let _wbPendingSSE = [];            // SSE strokes buffered during initialization
+  const _wbOwnIds = new Set();       // server-assigned IDs of our own sent strokes (to skip in SSE)
+
+  /* ── WebRTC state ── */
+  let _rtc = null;                   // ClassroomRTC instance
+
+  /* ── UI state ── */
+  let _chatUnread = 0;               // unread messages (when chat tab not active)
+  let _activeTab  = 'participants';  // current right panel tab
+  let _timerHandle = null;           // session timer interval
+  let _sessionStartTime = null;      // Date when session was created
+
+  /* ── polling ── */
+  let _pollPart = null;       // setInterval handle (participants backup)
+  let _pollChatTimer = null;  // setInterval handle (chat backup poll)
+  let _lastChatId = 0;        // last rendered message id
+  const _renderedMsgIds = new Set(); // dedup
+
+  /* ── live drawing ── */
+  let _wbLiveTimer = null;    // throttle timer for stroke-preview POST
+  let _wbMaxSeq = 0;          // highest seq received (for polling fallback)
+  let _wbClearGen = 0;        // incremented on clear/page-switch to discard stale poll responses
+  let _strokePollTimer = null;// polling interval for student stroke fallback
+  let _teacherPollTimer = null;// incremental stroke poll for teacher (SSE fallback)
+  let _drawPermPollTimer = null;// periodic draw permission check for student
+
+  /* ── teacher cursor ── */
+  let _cursorThrottle = null; // setTimeout handle for cursor POST throttle
+  let _cursorHideTimer = null;// setTimeout to hide cursor after inactivity
+
+  /* ── collaborative drawing ── */
+  let _canDraw = false;       // student: has teacher granted draw permission?
+  const _permittedStudents = new Set(); // teacher: set of student user IDs with draw permission
+
+  /** Enable draw permission for the current student (shared logic for SSE + REST) */
+  function enableDrawPermission(silent) {
+    if (_canDraw) return; // already enabled
+    _canDraw = true;
+    if (_wb) {
+      _wb.setReadOnly(false);
+      _wb._onStrokeDone     = wbOnLocalStroke;
+      _wb._onStrokeUndo     = wbOnLocalUndo;
+      _wb._onStrokeProgress = wbOnStrokeProgress;
+      _wb._onStrokeUpdated  = wbOnLocalStrokeUpdated;
+      _wb._onFormulaInsert  = showFormulaModal;
+      _wb._onCoordEdit      = showCoordModal;
+      _wb._onNumberLineEdit = showNumLineModal;
+      _wb._onObjectCreated  = () => wbSetTool('select');
+    }
+    document.getElementById('cr-toolbar').style.display = 'flex';
+    document.getElementById('cr-board-readonly').style.display = 'none';
+    if (!_wbBatchTimer) _wbBatchTimer = setInterval(wbFlushBatch, 80);
+    // Stop the 2s full-replace poll, switch to full-sync-with-local-preservation poll.
+    wbStopPoll();
+    if (!_teacherPollTimer) _teacherPollTimer = setInterval(_drawingStudentSyncPoll, 2000);
+    if (!silent) crStatusNotify('success',
+      `<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="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>`,
+      'Вам разрешено рисовать');
+  }
+
+  /** Disable draw permission for the current student */
+  function disableDrawPermission() {
+    if (!_canDraw) return; // already disabled
+    _canDraw = false;
+    if (_wb) {
+      _wb.setReadOnly(true);
+      _wb._onStrokeDone     = null;
+      _wb._onStrokeUndo     = null;
+      _wb._onStrokeProgress = null;
+      _wb._onStrokeUpdated  = null;
+      _wb._onFormulaInsert  = null;
+      _wb._onCoordEdit      = null;
+      _wb._onObjectCreated  = null;
+    }
+    document.getElementById('cr-toolbar').style.display = 'none';
+    document.getElementById('cr-board-readonly').style.display = 'block';
+    if (_wbBatchTimer)    { clearInterval(_wbBatchTimer);    _wbBatchTimer    = null; }
+    if (_teacherPollTimer){ clearInterval(_teacherPollTimer);_teacherPollTimer= null; }
+    // Resume the 2s full-replace poll so the student sees teacher strokes
+    wbStartPoll();
+    crStatusNotify('warn',
+      `<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="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>`,
+      'Рисование запрещено');
+  }
+
+  /* ── Student status notification bar ── */
+  const _statusTimers = new Map();
+  function crStatusNotify(type, iconSvg, text, duration = 4000) {
+    const isStudent = _me?.role !== 'teacher' && _me?.role !== 'admin';
+    if (!isStudent) return;
+    const bar = document.getElementById('cr-status-bar');
+    if (!bar) return;
+    const id = type + '_' + text; // deduplicate same message
+    // remove old same message if exists
+    const old = bar.querySelector(`[data-sid="${CSS.escape(id)}"]`);
+    if (old) { clearTimeout(_statusTimers.get(id)); old.remove(); }
+    const el = document.createElement('div');
+    el.className = `cr-status-msg type-${type}`;
+    el.dataset.sid = id;
+    el.innerHTML = iconSvg + `<span>${text}</span>`;
+    bar.appendChild(el);
+    const timer = setTimeout(() => {
+      el.classList.add('cr-status-out');
+      el.addEventListener('animationend', () => el.remove(), { once: true });
+      _statusTimers.delete(id);
+    }, duration);
+    _statusTimers.set(id, timer);
+  }
+
+  function startPolling() {
+    stopPolling();
+    _pollPart      = setInterval(pollParticipants, 10_000); // participants backup (10s)
+    _pollChatTimer = setInterval(_pollChat, 15_000);        // chat backup (15s)
+  }
+
+  function stopPolling() {
+    clearInterval(_pollPart);      _pollPart      = null;
+    clearInterval(_pollChatTimer); _pollChatTimer = null;
+  }
+
+  async function _pollChat() {
+    if (!_sessionId) return;
+    try {
+      const data = await LS.get(`/api/classroom/${_sessionId}/chat?since_id=${_lastChatId}`);
+      (data.messages || []).forEach(m => appendChatMessage({
+        id: m.id, userId: m.user_id, userName: m.user_name,
+        message: m.message, createdAt: m.created_at, pinned: !!m.pinned,
+        attachmentUrl: m.attachment_url, attachmentType: m.attachment_type,
+        reactions: m.reactions || {},
+      }));
+    } catch {}
+  }
+
+  async function pollParticipants() {
+    if (!_sessionId) return;
+    try {
+      const data = await LS.get(`/api/classroom/${_sessionId}/participants`);
+      const fresh = {};
+      for (const p of (data.participants || [])) {
+        fresh[p.user_id] = { name: p.name, micMuted: _participants[p.user_id]?.micMuted || false };
+      }
+      _participants = fresh;
+      updateParticipantsList();
+    } catch {}
+  }
+
+  /* ── cursor colors per user ── */
+  const _CURSOR_COLORS = ['#06D6E0','#FF6B6B','#A8E063','#FF9F43','#F15BB5','#4361EE','#FFE066','#9B5DE5'];
+  function _getUserColor(userId) {
+    return _CURSOR_COLORS[Math.abs(userId) % _CURSOR_COLORS.length];
+  }
+
+  /* ── init ── */
+  /* ── Universal confirm dialog ─────────────────────────────────────── */
+  let _dlgResolve = null;
+  function crConfirm(title, msg, { okText = 'Подтвердить', type = 'danger', iconSvg = null } = {}) {
+    return new Promise(resolve => {
+      const overlay  = document.getElementById('cr-dlg');
+      const iconEl   = document.getElementById('cr-dlg-icon');
+      const titleEl  = document.getElementById('cr-dlg-title');
+      const msgEl    = document.getElementById('cr-dlg-msg');
+      const okBtn    = document.getElementById('cr-dlg-ok');
+      const cancelBtn = document.getElementById('cr-dlg-cancel');
+
+      titleEl.textContent = title;
+      msgEl.textContent   = msg;
+      okBtn.textContent   = okText;
+      okBtn.className     = `cr-dlg-ok ${type}`;
+      iconEl.className    = `cr-dlg-icon ${type}`;
+
+      const icons = {
+        danger: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:22px;height:22px;stroke:#F15BB5"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><circle cx="12" cy="16" r=".5" fill="currentColor"/></svg>`,
+        warn:   `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:22px;height:22px;stroke:#FF9F43"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><circle cx="12" cy="17" r=".5" fill="currentColor"/></svg>`,
+        info:   `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:22px;height:22px;stroke:#06D6E0"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><circle cx="12" cy="8" r=".5" fill="currentColor"/></svg>`,
+      };
+      iconEl.innerHTML = iconSvg || icons[type] || icons.info;
+
+      if (_dlgResolve) _dlgResolve(false); // dismiss any previous dialog
+      _dlgResolve = resolve;
+      overlay.style.display = 'flex';
+
+      const onOk = () => { overlay.style.display = 'none'; _dlgResolve = null; resolve(true);  cleanup(); };
+      const onCancel = () => { overlay.style.display = 'none'; _dlgResolve = null; resolve(false); cleanup(); };
+      const onKey = (e) => { if (e.key === 'Escape') onCancel(); if (e.key === 'Enter') onOk(); };
+
+      function cleanup() {
+        okBtn.removeEventListener('click', onOk);
+        cancelBtn.removeEventListener('click', onCancel);
+        document.removeEventListener('keydown', onKey);
+      }
+      okBtn.addEventListener('click', onOk, { once: true });
+      cancelBtn.addEventListener('click', onCancel, { once: true });
+      document.addEventListener('keydown', onKey, { once: true });
+    });
+  }
+
+  async function init() {
+    if (!LS.isLoggedIn()) { window.location.href = '/login'; return; }
+    _me = LS.getUser();
+    if (!_me) {
+      try { _me = await LS.get('/api/auth/me'); LS.setUser(_me); } catch { window.location.href = '/login'; return; }
+    }
+
+    // setup nav
+    const initials = (_me.name || 'LS').split(' ').slice(0,2).map(w=>w[0]?.toUpperCase()||'').join('') || 'LS';
+    document.getElementById('nav-avatar').textContent = initials;
+    document.getElementById('nav-user').textContent = _me.name || _me.email;
+    if (_me.role === 'admin') document.getElementById('btn-admin').style.display = '';
+    if (['teacher', 'admin'].includes(_me.role)) {
+      document.querySelectorAll('.sb-teacher-only').forEach(el => el.style.display = '');
+      document.getElementById('btn-classes').style.display = '';
+    }
+    if (window.lucide) lucide.createIcons();
+
+    // sidebar collapse
+    if (localStorage.getItem('ls_sb_collapsed') === '1') {
+      document.querySelector('.app-layout')?.classList.add('sb-collapsed');
+    }
+
+    // SSE for classroom events
+    _sseHandle = LS.connectSSE(handleSSE);
+
+    // check for active session
+    await checkActiveSession();
+
+    // load classes for modal (teacher only)
+    if (_me.role === 'teacher' || _me.role === 'admin') {
+      loadClassesForModal();
+    }
+  }
+
+  async function checkActiveSession() {
+    const isTeacher = _me.role === 'teacher' || _me.role === 'admin';
+
+    try {
+      const data = await LS.get('/api/classroom/my/session');
+      if (data.session) {
+        _session  = data.session;
+        _sessionId = data.session.id;
+
+        if (isTeacher) {
+          // Teacher: always reconnect — rejoin to refresh attendance
+          await LS.post(`/api/classroom/${_sessionId}/join`).catch(() => {});
+          enterActiveState(data.session);
+          loadChat();
+          return;
+        } else {
+          // Student: auto-reconnect if was already in session, else show banner
+          if (data.wasJoined) {
+            const joinRes = await LS.post(`/api/classroom/${_sessionId}/join`).catch(() => ({}));
+            const fresh = await LS.get(`/api/classroom/${_sessionId}`).catch(() => data.session);
+            _session = fresh;
+            // Set _canDraw BEFORE enterActiveState so initWhiteboard sees it
+            if (fresh.canDraw || joinRes.canDraw) _canDraw = true;
+            enterActiveState(fresh);
+            loadChat();
+            // Apply toolbar/readonly state if draw was pre-set
+            if (_canDraw) enableDrawPermission(true);
+          } else {
+            showJoinBanner(data.session);
+          }
+          return;
+        }
+      }
+    } catch {}
+
+    // No active session — show idle state
+    if (isTeacher) {
+      document.getElementById('cr-idle-teacher').style.display = 'flex';
+    } else {
+      document.getElementById('cr-idle-student').style.display = 'flex';
+    }
+  }
+
+  function showJoinBanner(session) {
+    _session = session;
+    _sessionId = session.id;
+    // Hide board area if it was left visible from a previous session
+    document.getElementById('cr-active-main').style.display = 'none';
+    document.getElementById('cr-idle-teacher').style.display = 'none';
+    document.getElementById('cr-idle-student').style.display = 'none';
+    document.getElementById('cr-join-banner').style.display = 'flex';
+    document.getElementById('cr-join-title').textContent = session.title || 'Урок начался!';
+    document.getElementById('cr-join-sub').textContent = `Нажмите чтобы войти`;
+  }
+
+  /* ── SSE handler ── */
+  /* eslint-disable eqeqeq */
+  function handleSSE(data) {
+    // Use == for sessionId comparison throughout — guards against string/number mismatch
+    // when _sessionId comes from JSON (number) vs SSE data (could be string in edge cases).
+    if (data.type === 'classroom_started') {
+      onClassroomStarted(data);
+    } else if (data.type === 'classroom_ended') {
+      if (_sessionId == data.sessionId) onClassroomEnded();
+    } else if (data.type === 'classroom_user_joined') {
+      if (_sessionId == data.sessionId) onUserJoined(data);
+    } else if (data.type === 'classroom_user_left') {
+      if (_sessionId == data.sessionId) onUserLeft(data);
+    } else if (data.type === 'classroom_chat') {
+      if (_sessionId == data.sessionId) appendChatMessage(data);
+    } else if (data.type === 'classroom_strokes') {
+      if (_sessionId == data.sessionId && _wb && data.pageNum == _wbCurrentPage) {
+        // Skip our own strokes — server now includes userId.
+        // _wbOwnIds is a backup for strokes already confirmed locally.
+        if (data.userId == _me?.id) return;
+        const incoming = (data.strokes || []).filter(s => !_wbOwnIds.has(s.id));
+        // Confirmed strokes replace live preview
+        if (incoming.length > 0) _wb.clearAllLiveStrokes();
+        if (incoming.length === 0) return;
+        if (_wbInitializing) {
+          // Buffer until loadStrokes completes to avoid race condition
+          _wbPendingSSE.push(...incoming);
+        } else {
+          _wbUpdateMaxSeq(incoming);
+          _wb.addStrokes(incoming);
+        }
+      }
+    } else if (data.type === 'classroom_stroke_preview') {
+      if (_sessionId == data.sessionId && _wb && data.pageNum == _wbCurrentPage) {
+        // Skip our own preview echo — we already render it locally via _curPts/_shapeEnd
+        if (data.userId == _me?.id) return;
+        if (data.cancel) {
+          _wb.removeLiveStroke(data.liveId);
+        } else {
+          // Assign stable color per userId
+          const color = _getUserColor(data.userId);
+          _wb.setLiveStroke(data.liveId, data.tool, data.data, data.userName, color);
+        }
+      }
+    } else if (data.type === 'classroom_stroke_deleted') {
+      if (_sessionId == data.sessionId && _wb) _wb.removeStroke(data.strokeId);
+    } else if (data.type === 'classroom_stroke_updated') {
+      if (_sessionId == data.sessionId && _wb && data.pageNum == _wbCurrentPage)
+        _wb.updateStroke(data.strokeId, data.data);
+    } else if (data.type === 'classroom_page_added') {
+      if (_sessionId == data.sessionId) onPageAdded(data.pageNum);
+    } else if (data.type === 'classroom_page_changed') {
+      if (_sessionId == data.sessionId) onPageChanged(data.pageNum);
+    } else if (data.type === 'classroom_template_changed') {
+      if (_sessionId == data.sessionId && _wb && data.pageNum == _wbCurrentPage) {
+        _wb.setTemplate(data.template);
+        const sel = document.getElementById('wb-tpl-select');
+        if (sel) sel.value = data.template;
+        wbUpdateThumbnail(_wbCurrentPage);
+      }
+    } else if (data.type === 'classroom_hand_raised') {
+      if (_sessionId == data.sessionId) onHandRaised(data.userId, data.userName);
+    } else if (data.type === 'classroom_hand_lowered') {
+      if (_sessionId == data.sessionId) onHandLowered(data.userId);
+    } else if (data.type === 'classroom_signal') {
+      if (_rtc && _sessionId == data.sessionId) _rtc.handleSignal(data.from, data.payload);
+    } else if (data.type === 'classroom_screen_started') {
+      if (_sessionId == data.sessionId) {
+        document.getElementById('cr-screen-label').style.display = 'block';
+      }
+    } else if (data.type === 'classroom_screen_stopped') {
+      if (_sessionId == data.sessionId) {
+        const video = document.getElementById('cr-screen-video');
+        video.srcObject = null; video.style.display = 'none';
+        document.getElementById('cr-screen-label').style.display = 'none';
+        document.getElementById('cr-screen-btn').classList.remove('cr-btn-sharing');
+      }
+    } else if (data.type === 'classroom_muted') {
+      if (_sessionId == data.sessionId && _rtc) {
+        _rtc.forceMute();
+        if (_participants[_me.id]) _participants[_me.id].micMuted = true;
+        updateParticipantsList();
+        updateMuteBtn();
+        crStatusNotify('warn',
+          `<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"><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>`,
+          'Учитель выключил ваш микрофон');
+      }
+    } else if (data.type === 'classroom_draw_permitted') {
+      if (_sessionId == data.sessionId) enableDrawPermission();
+    } else if (data.type === 'classroom_draw_revoked') {
+      if (_sessionId == data.sessionId) disableDrawPermission();
+    } else if (data.type === 'classroom_reaction') {
+      if (_sessionId == data.sessionId) {
+        const el = document.getElementById(`msg-reactions-${data.msgId}`);
+        if (el) el.innerHTML = _renderReactions(data.reactions || {}, data.msgId);
+      }
+    } else if (data.type === 'classroom_template_loaded') {
+      if (_sessionId == data.sessionId && _wb) {
+        _totalPages = data.pages || 1;
+        _wbCurrentPage = 1;
+        wbRebuildThumbnails();
+        _wbOwnIds.clear();
+        _wbMaxSeq = 0;
+        LS.get(`/api/classroom/${_sessionId}/strokes?page_num=1`).then(strokesData => {
+          _wbUpdateMaxSeq(strokesData.strokes || []);
+          _wb.loadStrokes(strokesData.strokes || []);
+          wbUpdateThumbnail(1);
+        }).catch(() => {});
+      }
+    } else if (data.type === 'classroom_message_pinned') {
+      if (_sessionId == data.sessionId) _updatePinnedMsg(data.msgId, data.pinned);
+    } else if (data.type === 'classroom_cursor') {
+      if (_sessionId == data.sessionId && data.pageNum == _wbCurrentPage && data.userId != _me?.id) {
+        _showRemoteCursor(data.userId, data.userName, data.x, data.y);
+      }
+    } else if (data.type === 'classroom_page_cleared') {
+      if (_sessionId == data.sessionId && _wb && data.pageNum == _wbCurrentPage) {
+        _wbClearGen++;   // discard any in-flight poll response that has pre-clear strokes
+        _wbMaxSeq = 0;   // seq restarts from 0 after DB delete, so reset polling cursor
+        _wb.clearPage();
+      }
+    } else if (data.type === '_sse_reconnect') {
+      // SSE reconnected after a drop — re-sync all real-time state to fill the gap
+      if (_sessionId) resyncAfterReconnect();
+    }
+  }
+  /* eslint-enable eqeqeq */
+
+  function onClassroomStarted(data) {
+    const isTeacher = _me.role === 'teacher' || _me.role === 'admin';
+    if (!isTeacher) {
+      showJoinBanner({ id: data.sessionId, title: data.title });
+    }
+  }
+
+  function onClassroomEnded() {
+    stopPolling();
+    wbStopBatch();
+    // Fully destroy whiteboard (not just clear) so the board area is gone
+    if (_wb) { _wb.destroy(); _wb = null; }
+    if (_rtc) { _rtc.destroy(); _rtc = null; }
+    if (_timerHandle) { clearInterval(_timerHandle); _timerHandle = null; }
+    _session = null;
+    _sessionId = null;
+    _sessionStartTime = null;
+    _participants = {};
+    _raisedHands = {};
+    _handRaised = false;
+    _wbCurrentPage = 1;
+    _totalPages = 1;
+    _canDraw = false;
+    _permittedStudents.clear();
+    _lastChatId = 0;
+    _chatUnread = 0;
+    _renderedMsgIds.clear();
+    _notesLoaded = false;
+    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-student-nav').style.display = 'none';
+    document.getElementById('cr-timer').style.display = 'none';
+    document.getElementById('cr-timer').textContent = '00:00';
+    document.getElementById('chat-unread').style.display = 'none';
+    // reset screen video
+    const video = document.getElementById('cr-screen-video');
+    video.srcObject = null; video.style.display = 'none';
+    document.getElementById('cr-screen-label').style.display = 'none';
+    setActiveState(false);
+    document.getElementById('cr-session-title').textContent = 'Онлайн-урок';
+    document.getElementById('cr-session-chip').style.display = 'none';
+    document.getElementById('cr-header-actions').style.display = 'none';
+    _cleanupRemoteCursors();
+    // Hide active board area immediately so the empty board doesn't stay on screen
+    document.getElementById('cr-active-main').style.display = 'none';
+    document.getElementById('cr-join-banner').style.display = 'none';
+    // Show correct idle state right away (don't wait for checkActiveSession)
+    const isTeacher = _me?.role === 'teacher' || _me?.role === 'admin';
+    document.getElementById('cr-idle-teacher').style.display = isTeacher ? 'flex' : 'none';
+    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';
+    updateParticipantsList();
+    LS.toast('Урок завершён', 'info');
+  }
+
+  function onUserJoined(data) {
+    _participants[data.userId] = { name: data.userName, micMuted: false };
+    updateParticipantsList();
+    // If teacher is sharing screen, add the new peer
+    if (_rtc) _rtc.addPeerForScreenShare(data.userId);
+  }
+
+  function onUserLeft(data) {
+    delete _participants[data.userId];
+    updateParticipantsList();
+    if (_rtc) _rtc.removePeer(data.userId);
+  }
+
+  /* ── start session modal ── */
+  function crOpenStartModal() {
+    _selectedUsers = [];
+    renderSelectedUsers();
+    document.getElementById('cr-modal').classList.add('open');
+    if (window.lucide) lucide.createIcons();
+  }
+
+  function crCloseStartModal() {
+    document.getElementById('cr-modal').classList.remove('open');
+  }
+
+  function crSetMode(mode) {
+    _mode = mode;
+    document.getElementById('mode-class').classList.toggle('active', mode === 'class');
+    document.getElementById('mode-personal').classList.toggle('active', mode === 'personal');
+    document.getElementById('field-class').style.display = mode === 'class' ? '' : 'none';
+    document.getElementById('field-personal').style.display = mode === 'personal' ? '' : 'none';
+    if (mode === 'personal') crLoadOnlineStudents();
+  }
+
+  async function loadClassesForModal() {
+    try {
+      const classes = await LS.get('/api/classes');
+      const sel = document.getElementById('cr-class-select');
+      sel.innerHTML = '<option value="">Выберите класс...</option>';
+      (classes || []).forEach(c => {
+        sel.innerHTML += `<option value="${c.id}">${c.name}</option>`;
+      });
+    } catch {}
+  }
+
+  async function crLoadOnlineStudents() {
+    const list = document.getElementById('cr-online-list');
+    list.innerHTML = '<div class="cr-online-empty">Загрузка...</div>';
+    try {
+      const data = await LS.get('/api/classroom/online-students');
+      const students = data.students || [];
+      if (!students.length) {
+        list.innerHTML = '<div class="cr-online-empty">Нет учеников онлайн</div>';
+        return;
+      }
+      list.innerHTML = students.map(u => {
+        const initials = (u.name || '?').split(' ').slice(0,2).map(w=>w[0]?.toUpperCase()||'').join('') || '?';
+        const sel = _selectedUsers.find(s => s.id === u.id) ? 'selected' : '';
+        return `<div class="cr-online-item ${sel}" id="cr-oi-${u.id}" onclick="crToggleOnlineUser(${u.id}, '${(u.name||'').replace(/'/g,"\\'")}')">
+          <span class="cr-online-dot"></span>
+          <div class="cr-online-avatar">${initials}</div>
+          <span class="cr-online-name">${LS.esc(u.name || u.email)}</span>
+          <span class="cr-online-check"></span>
+        </div>`;
+      }).join('');
+      if (window.lucide) lucide.createIcons();
+    } catch { list.innerHTML = '<div class="cr-online-empty">Ошибка загрузки</div>'; }
+  }
+
+  function crToggleOnlineUser(id, name) {
+    const idx = _selectedUsers.findIndex(u => u.id === id);
+    if (idx >= 0) {
+      _selectedUsers.splice(idx, 1);
+    } else {
+      _selectedUsers.push({ id, name });
+    }
+    // toggle selected class on item
+    const item = document.getElementById(`cr-oi-${id}`);
+    if (item) item.classList.toggle('selected', _selectedUsers.some(u => u.id === id));
+    renderSelectedUsers();
+  }
+
+  function crRemoveUser(id) {
+    _selectedUsers = _selectedUsers.filter(u => u.id !== id);
+    // un-select in online list if visible
+    const item = document.getElementById(`cr-oi-${id}`);
+    if (item) item.classList.remove('selected');
+    renderSelectedUsers();
+  }
+
+  function renderSelectedUsers() {
+    const wrap = document.getElementById('cr-selected-users');
+    wrap.innerHTML = _selectedUsers.map(u =>
+      `<div class="cr-selected-user">
+        ${u.name}
+        <button onclick="crRemoveUser(${u.id})"><i data-lucide="x" style="width:11px;height:11px"></i></button>
+      </div>`
+    ).join('');
+    if (window.lucide) lucide.createIcons();
+  }
+
+  async function crStartSession() {
+    const title = document.getElementById('cr-title-input').value.trim();
+    const btn = document.getElementById('cr-confirm-btn');
+    btn.disabled = true;
+
+    try {
+      let body;
+      if (_mode === 'class') {
+        const classId = Number(document.getElementById('cr-class-select').value);
+        if (!classId) { LS.toast('Выберите класс', 'error'); btn.disabled = false; return; }
+        body = { class_id: classId, title };
+      } else {
+        if (!_selectedUsers.length) { LS.toast('Добавьте хотя бы одного ученика', 'error'); btn.disabled = false; return; }
+        body = { user_ids: _selectedUsers.map(u => u.id), title };
+      }
+
+      const session = await LS.post('/api/classroom', body);
+      _session = session;
+      _sessionId = session.id;
+      crCloseStartModal();
+      // teacher joins their own session (adds to attendance + fires classroom_user_joined SSE)
+      await LS.post(`/api/classroom/${session.id}/join`).catch(() => {});
+      const fullSession = await LS.get(`/api/classroom/${session.id}`).catch(() => session);
+      _session = fullSession;
+      enterActiveState(fullSession);
+      loadChat();
+    } catch (e) {
+      LS.toast(e.message || 'Ошибка', 'error');
+    } finally {
+      btn.disabled = false;
+    }
+  }
+
+  /* ── join session (student) ── */
+  async function crJoinSession() {
+    if (!_sessionId) return;
+    try {
+      const joinRes = await LS.post(`/api/classroom/${_sessionId}/join`);
+      const session = await LS.get(`/api/classroom/${_sessionId}`);
+      _session = session;
+      // Set _canDraw BEFORE enterActiveState so initWhiteboard sees it
+      if (session.canDraw || joinRes.canDraw) _canDraw = true;
+      enterActiveState(session);
+      // load existing chat
+      loadChat();
+      // Apply toolbar/readonly state if draw was pre-set
+      if (_canDraw) enableDrawPermission();
+    } catch (e) {
+      LS.toast(e.message || 'Ошибка входа', 'error');
+    }
+  }
+
+  /* ── active state ── */
+  function enterActiveState(session) {
+    // reset dedup state for fresh session
+    _lastChatId = 0;
+    _renderedMsgIds.clear();
+    _notesLoaded = false;
+    document.getElementById('cr-messages').innerHTML = '';
+    document.getElementById('cr-notes-ta').value = '';
+    startPolling();
+    setActiveState(true);
+    document.getElementById('cr-idle-teacher').style.display = 'none';
+    document.getElementById('cr-idle-student').style.display = 'none';
+    document.getElementById('cr-join-banner').style.display = 'none';
+    document.getElementById('cr-active-main').style.display = 'flex';
+    document.getElementById('cr-session-title').textContent = session.title || 'Онлайн-урок';
+    document.getElementById('cr-session-chip').style.display = 'inline-flex';
+    document.getElementById('cr-header-actions').style.display = 'flex';
+
+    const isTeacher = _me.role === 'teacher' || _me.role === 'admin';
+    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-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';
+
+    // page state
+    _wbCurrentPage = session.current_page || 1;
+    _totalPages    = session.pageCount    || 1;
+    _raisedHands   = {};
+    _handRaised    = false;
+    _followTeacher = true;
+    updatePageLabel();
+
+    // populate participants from attendance
+    if (session.attendance) {
+      session.attendance.forEach(a => {
+        if (!a.left_at) _participants[a.user_id] = { name: a.name || a.user_name, micMuted: false };
+      });
+    }
+    if (_me?.id) _participants[_me.id] = { name: _me.name, micMuted: false };
+    updateParticipantsList();
+    if (window.lucide) lucide.createIcons();
+
+    // session timer
+    _sessionStartTime = session.created_at ? new Date(session.created_at) : new Date();
+    if (_timerHandle) clearInterval(_timerHandle);
+    _timerHandle = setInterval(updateTimer, 1000);
+    document.getElementById('cr-timer').style.display = 'inline';
+    updateTimer();
+
+    // show correct nav (teacher toolbar vs student nav)
+    document.getElementById('cr-student-nav').style.display = isTeacher ? 'none' : 'flex';
+
+    // load raised hands (non-blocking)
+    _loadHandsAsync(session.id);
+
+    // init whiteboard
+    initWhiteboard(isTeacher, session.id);
+
+    // init WebRTC (async - don't block UI)
+    initRTC(session);
+
+    // Welcome status for student
+    if (!isTeacher) {
+      setTimeout(() => 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"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>`,
+        `Урок начался: ${session.title || 'Онлайн-урок'}`, 5000), 600);
+    }
+  }
+
+  function setActiveState(active) {
+    document.getElementById('chat-no-session').style.display = active ? 'none' : 'flex';
+    document.getElementById('chat-active').style.display = active ? 'flex' : 'none';
+    document.getElementById('participants-no-session').style.display = active ? 'none' : 'flex';
+  }
+
+  /* ── whiteboard ── */
+  async function initWhiteboard(isTeacher, sessionId) {
+    const canvas = document.getElementById('cr-canvas');
+    if (!canvas) return;
+
+    // destroy previous instance
+    if (_wb) { _wb.destroy(); _wb = null; }
+    wbStopBatch();
+    _wbPendingSSE = [];
+    _wbOwnIds.clear();
+
+    // Mark as initializing — SSE strokes will be buffered into _wbPendingSSE
+    _wbInitializing = true;
+
+    const canEdit = isTeacher || _canDraw;
+    _wb = new Whiteboard(canvas, {
+      readOnly:         !canEdit,
+      onStrokeDone:     canEdit ? wbOnLocalStroke        : null,
+      onStrokeUndo:     canEdit ? wbOnLocalUndo          : null,
+      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
+      onZoomChange: z => { const el = document.getElementById('wb-zoom-label'); if (el) el.textContent = Math.round(z * 100) + '%'; },
+      // Overlay change: update props panel
+      onOverlayChange: wbOvChange,
+    });
+
+    // 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';
+
+    // load existing strokes — done before unblocking SSE to avoid duplicates
+    try {
+      const res = await LS.get(`/api/classroom/${sessionId}/strokes?page_num=1`);
+      const initialStrokes = res.strokes || [];
+      _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; }
+      wbUpdateThumbnail(1);
+    } catch {}
+
+    // Unlock SSE processing and apply any buffered strokes
+    _wbInitializing = false;
+    if (_wbPendingSSE.length > 0) {
+      _wbUpdateMaxSeq(_wbPendingSSE);
+      _wb.addStrokes(_wbPendingSSE);
+      _wbPendingSSE = [];
+    }
+
+    if (isTeacher) {
+      // start batch flush every 80ms
+      _wbBatchTimer = setInterval(wbFlushBatch, 80);
+      // Incremental poll every 4s as SSE fallback — fetches only strokes newer than _wbMaxSeq
+      _teacherPollTimer = setInterval(_wbTeacherIncrementalPoll, 4000);
+      // cursor is now broadcast via whiteboard's onCursorMove callback
+    } else {
+      // Start batch flush if student has draw permission
+      if (_canDraw) {
+        if (!_wbBatchTimer)    _wbBatchTimer    = setInterval(wbFlushBatch, 80);
+        // Full-sync every 2s (preserves local unconfirmed strokes, guarantees teacher strokes appear)
+        if (!_teacherPollTimer) _teacherPollTimer = setInterval(_drawingStudentSyncPoll, 2000);
+      } else {
+        // Read-only student: poll every 2s as a fallback in case SSE events are missed
+        wbStartPoll();
+      }
+      // Periodic draw permission check — catches missed SSE draw_permitted events
+      if (!_drawPermPollTimer) _drawPermPollTimer = setInterval(_checkDrawPermission, 5000);
+    }
+  }
+
+  /** Teacher: fetch strokes newer than _wbMaxSeq to catch any missed SSE events */
+  async function _wbTeacherIncrementalPoll() {
+    if (!_sessionId || !_wb || _wbInitializing) return;
+    const since = _wbMaxSeq;
+    const page  = _wbCurrentPage;
+    try {
+      const res = await LS.get(`/api/classroom/${_sessionId}/strokes?page_num=${page}&since_seq=${since}`);
+      if (_wbCurrentPage !== page) return; // page switched while fetching
+      const strokes = res.strokes || [];
+      if (strokes.length === 0) return;
+      const newStrokes = strokes.filter(s => !_wbOwnIds.has(s.id));
+      if (newStrokes.length === 0) return;
+      _wbUpdateMaxSeq(newStrokes);
+      _wb.addStrokes(newStrokes);
+    } catch {}
+  }
+
+  /** Drawing student: full-sync poll that preserves locally-drawn (unconfirmed) strokes.
+   *  Guarantees teacher strokes appear even if SSE is missed. Runs every 2s. */
+  async function _drawingStudentSyncPoll() {
+    if (!_sessionId || !_wb || _wbInitializing) return;
+    const page = _wbCurrentPage;
+    const gen  = _wbClearGen;
+    try {
+      const res = await LS.get(`/api/classroom/${_sessionId}/strokes?page_num=${page}`);
+      if (_wbClearGen !== gen || _wbCurrentPage !== page) return;
+      const serverStrokes = res.strokes || [];
+      // Collect strokes with negative IDs (locally drawn, not yet saved to server)
+      // Snapshot taken AFTER fetch so we don't re-add strokes that were confirmed during await
+      const localUnconfirmed = _wb.getLocalStrokes();
+      _wbMaxSeq = 0;
+      _wbUpdateMaxSeq(serverStrokes);
+      _wb.loadStrokes(serverStrokes); // full replace — includes all teacher strokes
+      // Re-add unconfirmed local strokes on top (addStrokes deduplicates by ID)
+      if (localUnconfirmed.length > 0) _wb.addStrokes(localUnconfirmed);
+      if (res.template) _wb.setTemplate(res.template);
+      wbUpdateThumbnail(page);
+    } catch {}
+  }
+
+  /** Student: check draw permission state from server (SSE fallback) */
+  async function _checkDrawPermission() {
+    if (!_sessionId || !_wb) return;
+    const isTeacher = _me?.role === 'teacher' || _me?.role === 'admin';
+    if (isTeacher) return;
+    try {
+      const session = await LS.get(`/api/classroom/${_sessionId}`);
+      if (session.canDraw && !_canDraw) {
+        enableDrawPermission(true); // silent — catching up with missed SSE event
+      } else if (!session.canDraw && _canDraw) {
+        disableDrawPermission();
+      }
+    } catch {}
+  }
+
+  /* Remote cursors: one DOM element per userId */
+  const _remoteCursorEls   = new Map(); // userId → {el, hideTimer}
+  const _CURSOR_COLORS_DOM = ['#9B5DE5','#06D6E0','#FF6B6B','#A8E063','#FF9F43','#F15BB5','#4361EE','#FFE066'];
+
+  function _getOrCreateCursorEl(userId, userName, color) {
+    if (_remoteCursorEls.has(userId)) return _remoteCursorEls.get(userId);
+    const wrap = document.getElementById('cr-board-wrap');
+    if (!wrap) return null;
+    const el = document.createElement('div');
+    el.style.cssText = 'position:absolute;pointer-events:none;z-index:20;display:none;transform:translate(-4px,-4px);transition:left 100ms linear,top 100ms linear;';
+    el.innerHTML = `
+      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M2 2L12 6L7 7.5L5.5 12L2 2Z" fill="${color}" stroke="#fff" stroke-width="1"/>
+      </svg>
+      <span style="position:absolute;left:14px;top:0;background:${color};color:#fff;font-size:0.6rem;font-weight:700;padding:1px 5px;border-radius:4px;white-space:nowrap;">${userName || ''}</span>`;
+    wrap.appendChild(el);
+    _remoteCursorEls.set(userId, { el, hideTimer: null });
+    return _remoteCursorEls.get(userId);
+  }
+
+  function _showRemoteCursor(userId, userName, vx, vy) {
+    const wrap = document.getElementById('cr-board-wrap');
+    if (!wrap) return;
+    const color = _CURSOR_COLORS_DOM[Math.abs(userId) % _CURSOR_COLORS_DOM.length];
+    const entry = _getOrCreateCursorEl(userId, userName, color);
+    if (!entry) return;
+    const { el } = entry;
+    const cssW = wrap.clientWidth || 1;
+    const cssH = wrap.clientHeight || 1;
+    el.style.left    = ((vx / 1920) * cssW) + 'px';
+    el.style.top     = ((vy / 1080) * cssH) + 'px';
+    el.style.display = 'block';
+    if (entry.hideTimer) clearTimeout(entry.hideTimer);
+    entry.hideTimer = setTimeout(() => { el.style.display = 'none'; }, 3000);
+  }
+
+  function _cleanupRemoteCursors() {
+    for (const { el } of _remoteCursorEls.values()) el.remove();
+    _remoteCursorEls.clear();
+  }
+
+  // Keep legacy function name for backward compat with old SSE events
+  function _showTeacherCursor(vx, vy) {
+    if (_session?.teacher_id) _showRemoteCursor(_session.teacher_id, 'Учитель', vx, vy);
+  }
+
+  /* Teacher cursor: throttled broadcast */
+  function _onTeacherMouseMove(e) {
+    if (!_sessionId || !_wb) return;
+    if (_cursorThrottle) return; // already scheduled
+    _cursorThrottle = setTimeout(() => {
+      _cursorThrottle = null;
+      const rect = e.target.getBoundingClientRect();
+      const cssW = e.target.clientWidth || 1;
+      const cssH = e.target.clientHeight || 1;
+      // Normalize to virtual 1920x1080
+      const vx = ((e.clientX - rect.left) / cssW) * 1920;
+      const vy = ((e.clientY - rect.top)  / cssH) * 1080;
+      LS.post(`/api/classroom/${_sessionId}/cursor`, { x: vx, y: vy, page_num: _wbCurrentPage }).catch(() => {});
+    }, 150); // ~6fps throttle — enough for cursor indicator, stays within rate limits
+  }
+
+  function _onTeacherMouseLeave() {
+    // Send off-screen cursor position to hide it on student side
+    if (_sessionId) {
+      LS.post(`/api/classroom/${_sessionId}/cursor`, { x: -1, y: -1, page_num: _wbCurrentPage }).catch(() => {});
+    }
+  }
+
+  function wbOnLocalStroke(stroke) {
+    _wbBatch.push(stroke);
+    wbUpdateThumbnail(_wbCurrentPage);
+  }
+
+  /* Called when teacher moves/resizes an image object on the board */
+  function wbOnLocalStrokeUpdated(stroke) {
+    if (!_sessionId || stroke.id < 0) return; // not yet saved to server — skip
+    LS.patch(`/api/classroom/${_sessionId}/strokes/${stroke.id}`, { data: stroke.data }).catch(() => {});
+  }
+
+  async function wbOnLocalUndo(id) {
+    // if it's a server-confirmed id (positive), delete from server
+    if (id > 0) {
+      try { await LS.del(`/api/classroom/${_sessionId}/strokes/${id}`); } catch {}
+    }
+    // if negative (local only, not yet sent), remove from batch queue
+    _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. */
+  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(() => {});
+      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(() => {});
+  }
+
+  function wbOnCursorMove(vx, vy) {
+    if (!_sessionId) return;
+    LS.post(`/api/classroom/${_sessionId}/cursor`, {
+      x: vx, y: vy, page_num: _wbCurrentPage,
+    }).catch(() => {});
+  }
+
+  async function wbFlushBatch() {
+    if (!_sessionId || _wbBatch.length === 0) return;
+    const toSend = _wbBatch.splice(0, _wbBatch.length); // drain queue
+    try {
+      const res = await LS.post(`/api/classroom/${_sessionId}/strokes`, {
+        page_num: _wbCurrentPage,
+        strokes: toSend.map(s => ({ tool: s.tool, data: s.data })),
+      });
+      // update local (negative) ids to server-assigned ids; track own ids to skip in SSE
+      if (res.strokes && _wb) {
+        res.strokes.forEach((saved, i) => {
+          if (toSend[i]) {
+            _wbOwnIds.add(saved.id);  // register BEFORE confirmStroke calls render
+            _wb.confirmStroke(toSend[i].id, saved.id);
+          }
+        });
+      }
+    } catch {
+      // put back on failure
+      _wbBatch.unshift(...toSend);
+    }
+  }
+
+  function wbStopBatch() {
+    if (_wbBatchTimer)    { clearInterval(_wbBatchTimer);    _wbBatchTimer    = null; }
+    if (_wbLiveTimer)     { clearTimeout(_wbLiveTimer);      _wbLiveTimer     = null; }
+    if (_teacherPollTimer){ clearInterval(_teacherPollTimer);_teacherPollTimer= null; }
+    if (_drawPermPollTimer){ clearInterval(_drawPermPollTimer);_drawPermPollTimer= null; }
+    wbStopPoll();
+    _wbBatch = [];
+    _wbOwnIds.clear();
+    _wbInitializing = false;
+    _wbPendingSSE = [];
+    _wbMaxSeq = 0;
+  }
+
+  /* Track max stroke seq (for efficient polling with since_seq) */
+  function _wbUpdateMaxSeq(strokes) {
+    for (const s of strokes) {
+      if (s.seq != null && s.seq > _wbMaxSeq) _wbMaxSeq = s.seq;
+    }
+  }
+
+  /* Student-side full-sync poll: replaces board state every 2s.
+     Handles missed SSE events for strokes AND clears — no since_seq tricks needed. */
+  function wbStartPoll() {
+    wbStopPoll();
+    _strokePollTimer = setInterval(async () => {
+      if (!_sessionId || !_wb || _wbInitializing) return;
+      const page = _wbCurrentPage;
+      const gen  = _wbClearGen;
+      try {
+        const res = await LS.get(`/api/classroom/${_sessionId}/strokes?page_num=${page}`);
+        // Discard if board was cleared or page switched while fetching
+        if (_wbClearGen !== gen || _wbCurrentPage !== page) return;
+        const strokes = res.strokes || [];
+        // Update seq cursor so SSE dedup still works
+        _wbMaxSeq = 0;
+        _wbUpdateMaxSeq(strokes);
+        // Full replace — correctly reflects clears, undos, and any missed events
+        _wb.loadStrokes(strokes);
+        if (res.template) _wb.setTemplate(res.template);
+        wbUpdateThumbnail(page);
+      } catch {}
+    }, 2000);
+  }
+
+  function wbStopPoll() {
+    if (_strokePollTimer) { clearInterval(_strokePollTimer); _strokePollTimer = null; }
+  }
+
+  // zoom controls
+  function wbZoomIn()  { if (_wb) _wb.zoomTo(_wb._zoom * 1.25); }
+  function wbZoomOut() { if (_wb) _wb.zoomTo(_wb._zoom / 1.25); }
+  function wbResetZoom() { if (_wb) _wb.resetView(); }
+
+  // toolbar handlers
+  const WB_TOOLS = ['pencil','eraser','highlighter','laser','select',
+    'rect','ellipse','line','arrow',
+    'triangle','diamond','hexagon','star','roundedrect','callout',
+    'text','sticky','formula','table','connector','coordinate','numberline','compass'];
+  function wbSetTool(tool) {
+    if (!_wb) return;
+    _wb.setTool(tool);
+    WB_TOOLS.forEach(t => {
+      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';
+  }
+
+  function wbSetColor(btn) {
+    if (!_wb) return;
+    const color = btn.dataset.color;
+    _wb.setColor(color);
+    document.querySelectorAll('.cr-color-btn').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    // switch to pencil if eraser or laser is active when color changes
+    const activeTools = ['eraser','laser'];
+    if (activeTools.some(t => document.getElementById(`wb-tool-${t}`)?.classList.contains('active')))
+      wbSetTool('pencil');
+  }
+
+  function wbSetWidth(px, btn) {
+    if (!_wb) return;
+    _wb.setWidth(px);
+    document.querySelectorAll('.cr-width-btn').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+  }
+
+  function wbSetLineStyle(style, btn) {
+    if (!_wb) return;
+    _wb.setLineStyle(style);
+    document.querySelectorAll('.cr-linestyle-btn').forEach(b => b.classList.remove('active'));
+    if (btn) btn.classList.add('active');
+  }
+
+  function wbSetOpacity(val) {
+    if (!_wb) return;
+    const v = Number(val) / 100;
+    _wb.setOpacity(v);
+    // also update selected stroke opacity live
+    if (_wb._selectedId != null) _wb.updateOpacity(v);
+  }
+
+  function wbToggleRuler() {
+    if (!_wb) return;
+    _wb.toggleRuler();
+    const on = _wb._overlays.some(o => o.type === 'ruler');
+    document.getElementById('wb-btn-ruler')?.classList.toggle('active', on);
+    if (!on && _wbOvCurrent?.type === 'ruler') wbOvHide();
+  }
+
+  function wbToggleProtractor() {
+    if (!_wb) return;
+    _wb.toggleProtractor();
+    const on = _wb._overlays.some(o => o.type === 'protractor');
+    document.getElementById('wb-btn-protractor')?.classList.toggle('active', on);
+    if (!on && _wbOvCurrent?.type === 'protractor') wbOvHide();
+  }
+
+  function wbToggleMeasurements(btn) {
+    if (!_wb) return;
+    const on = _wb.toggleMeasurements();
+    btn.classList.toggle('active', on);
+  }
+
+  /* ── Overlay properties panel ─────────────────────────────────────── */
+  let _wbOvCurrent = null; // currently shown overlay object
+
+  function wbOvChange(ov) {
+    _wbOvCurrent = ov;
+    const panel = document.getElementById('wb-ov-props');
+    if (!panel) return;
+    const isRuler = ov.type === 'ruler';
+    document.getElementById('wb-ov-type').textContent = isRuler ? 'Линейка' : 'Транспортир';
+    document.getElementById('wb-ov-size-lbl').firstChild.textContent = isRuler ? 'Длина' : 'Радиус';
+    const angleDeg = Math.round(((ov.angle || 0) * 180 / Math.PI) * 10) / 10;
+    document.getElementById('wb-ov-angle').value = angleDeg;
+    const sizeVal = isRuler ? Math.round(ov.width || 400) : Math.round(ov.radius || 80);
+    document.getElementById('wb-ov-size').value = sizeVal;
+    panel.classList.add('visible');
+  }
+
+  function wbOvApply() {
+    if (!_wbOvCurrent || !_wb) return;
+    const ov = _wbOvCurrent;
+    const angleDeg = parseFloat(document.getElementById('wb-ov-angle').value) || 0;
+    ov.angle = angleDeg * Math.PI / 180;
+    const sizeVal = parseFloat(document.getElementById('wb-ov-size').value) || 100;
+    if (ov.type === 'ruler') ov.width  = Math.max(50, sizeVal);
+    else                     ov.radius = Math.max(20, sizeVal);
+    _wb.render();
+  }
+
+  function wbOvHide() {
+    _wbOvCurrent = null;
+    document.getElementById('wb-ov-props')?.classList.remove('visible');
+  }
+
+  /* Coordinate system edit modal */
+  let _coordEditStroke = null;
+  function showCoordModal(stroke) {
+    _coordEditStroke = stroke;
+    const d = stroke.data;
+    document.getElementById('coord-xmin').value = d.xMin ?? -10;
+    document.getElementById('coord-xmax').value = d.xMax ?? 10;
+    document.getElementById('coord-ymin').value = d.yMin ?? -10;
+    document.getElementById('coord-ymax').value = d.yMax ?? 10;
+    document.getElementById('coord-step').value = d.gridStep ?? 1;
+    renderCoordFnList();
+    document.getElementById('wb-coord-modal').style.display = 'flex';
+  }
+  function closeCoordModal() { document.getElementById('wb-coord-modal').style.display = 'none'; }
+  function applyCoordSettings() {
+    if (!_coordEditStroke || !_wb) return;
+    const d = _coordEditStroke.data;
+    d.xMin     = parseFloat(document.getElementById('coord-xmin').value) || -10;
+    d.xMax     = parseFloat(document.getElementById('coord-xmax').value) || 10;
+    d.yMin     = parseFloat(document.getElementById('coord-ymin').value) || -10;
+    d.yMax     = parseFloat(document.getElementById('coord-ymax').value) || 10;
+    d.gridStep = parseFloat(document.getElementById('coord-step').value) || 1;
+    _wb._staticDirty = true; _wb.render();
+    if (_wb._onStrokeUpdated) _wb._onStrokeUpdated(_coordEditStroke);
+  }
+  function renderCoordFnList() {
+    if (!_coordEditStroke) return;
+    const list = document.getElementById('coord-fn-list');
+    list.innerHTML = '';
+    (_coordEditStroke.data.functions || []).forEach((fn, i) => {
+      const row = document.createElement('div');
+      row.style.cssText = 'display:flex;gap:6px;align-items:center;margin-bottom:6px;';
+      row.innerHTML = `<input type="color" value="${fn.color||'#06D6E0'}" style="width:28px;height:28px;border:none;border-radius:4px;cursor:pointer;padding:0" onchange="_coordEditStroke.data.functions[${i}].color=this.value; _wb&&(_wb._staticDirty=true,_wb.render())">
+        <input type="text" value="${fn.expr||''}" placeholder="y = sin(x)" style="flex:1;font-size:12px;background:rgba(255,255,255,0.07);border:1px solid rgba(155,93,229,0.3);border-radius:4px;color:#e8e0f7;padding:4px 8px" onchange="_coordEditStroke.data.functions[${i}].expr=this.value;_wb&&(_wb._staticDirty=true,_wb.render())">
+        <button onclick="coordRemoveFn(${i})" style="background:rgba(255,80,80,0.15);border:1px solid rgba(255,80,80,0.3);color:#ff6b6b;border-radius:4px;cursor:pointer;padding:3px 8px;font-size:11px">✕</button>`;
+      list.appendChild(row);
+    });
+  }
+  function coordAddFn() {
+    if (!_coordEditStroke) return;
+    _coordEditStroke.data.functions = _coordEditStroke.data.functions || [];
+    _coordEditStroke.data.functions.push({ expr: 'x', color: '#06D6E0' });
+    renderCoordFnList();
+    if (_wb) { _wb._staticDirty = true; _wb.render(); }
+  }
+  function coordRemoveFn(i) {
+    if (!_coordEditStroke) return;
+    _coordEditStroke.data.functions.splice(i, 1);
+    renderCoordFnList();
+    if (_wb) { _wb._staticDirty = true; _wb.render(); }
+  }
+
+  /* Number line edit modal */
+  let _nlEditStroke = null;
+  function showNumLineModal(stroke) {
+    _nlEditStroke = stroke;
+    const d = stroke.data;
+    document.getElementById('nl-min').value  = d.min  ?? -10;
+    document.getElementById('nl-max').value  = d.max  ?? 10;
+    document.getElementById('nl-step').value = d.step ?? 1;
+    nlRenderPoints(); nlRenderIntervals();
+    document.getElementById('wb-numline-modal').style.display = 'flex';
+  }
+  function closeNumLineModal() { document.getElementById('wb-numline-modal').style.display = 'none'; }
+  function applyNumLineSettings() {
+    if (!_nlEditStroke || !_wb) return;
+    const d = _nlEditStroke.data;
+    d.min  = parseFloat(document.getElementById('nl-min').value)  || -10;
+    d.max  = parseFloat(document.getElementById('nl-max').value)  || 10;
+    d.step = parseFloat(document.getElementById('nl-step').value) || 1;
+    _wb._staticDirty = true; _wb.render();
+  }
+  const _nlStyle = 'width:100%;margin-top:3px;background:rgba(255,255,255,0.07);border:1px solid rgba(6,214,224,0.3);border-radius:4px;color:#e8e0f7;padding:4px 7px;font-size:11px;';
+  function nlRenderPoints() {
+    const list = document.getElementById('nl-points-list');
+    if (!list || !_nlEditStroke) return;
+    list.innerHTML = '';
+    (_nlEditStroke.data.points || []).forEach((pt, i) => {
+      const row = document.createElement('div');
+      row.style.cssText = 'display:flex;gap:5px;align-items:center;margin-bottom:5px;';
+      row.innerHTML = `<input type="number" value="${pt.val??0}" placeholder="Значение" style="${_nlStyle}flex:1" oninput="_nlEditStroke.data.points[${i}].val=+this.value;_wb&&(_wb._staticDirty=true,_wb.render())">
+        <input type="text" value="${pt.label||''}" placeholder="Метка" style="${_nlStyle}width:60px" oninput="_nlEditStroke.data.points[${i}].label=this.value;_wb&&(_wb._staticDirty=true,_wb.render())">
+        <input type="color" value="${pt.color||'#06D6E0'}" style="width:24px;height:24px;border:none;border-radius:3px;cursor:pointer;padding:0" onchange="_nlEditStroke.data.points[${i}].color=this.value;_wb&&(_wb._staticDirty=true,_wb.render())">
+        <label style="font-size:10px;color:#aaa;white-space:nowrap;"><input type="checkbox" ${pt.open?'checked':''} onchange="_nlEditStroke.data.points[${i}].open=this.checked;_wb&&(_wb._staticDirty=true,_wb.render())"> ○</label>
+        <button onclick="nlRemovePoint(${i})" style="background:rgba(255,80,80,0.15);border:1px solid rgba(255,80,80,0.3);color:#ff6b6b;border-radius:3px;cursor:pointer;padding:2px 6px;font-size:10px">✕</button>`;
+      list.appendChild(row);
+    });
+  }
+  function nlRenderIntervals() {
+    const list = document.getElementById('nl-intervals-list');
+    if (!list || !_nlEditStroke) return;
+    list.innerHTML = '';
+    (_nlEditStroke.data.intervals || []).forEach((iv, i) => {
+      const row = document.createElement('div');
+      row.style.cssText = 'display:flex;gap:5px;align-items:center;margin-bottom:5px;';
+      row.innerHTML = `<input type="number" value="${iv.from??0}" placeholder="От" style="${_nlStyle}flex:1" oninput="_nlEditStroke.data.intervals[${i}].from=+this.value;_wb&&(_wb._staticDirty=true,_wb.render())">
+        <input type="number" value="${iv.to??5}" placeholder="До" style="${_nlStyle}flex:1" oninput="_nlEditStroke.data.intervals[${i}].to=+this.value;_wb&&(_wb._staticDirty=true,_wb.render())">
+        <input type="color" value="${iv.color||'#9B5DE5'}" style="width:24px;height:24px;border:none;border-radius:3px;cursor:pointer;padding:0" onchange="_nlEditStroke.data.intervals[${i}].color=this.value;_wb&&(_wb._staticDirty=true,_wb.render())">
+        <button onclick="nlRemoveInterval(${i})" style="background:rgba(255,80,80,0.15);border:1px solid rgba(255,80,80,0.3);color:#ff6b6b;border-radius:3px;cursor:pointer;padding:2px 6px;font-size:10px">✕</button>`;
+      list.appendChild(row);
+    });
+  }
+  function nlAddPoint() {
+    if (!_nlEditStroke) return;
+    _nlEditStroke.data.points = _nlEditStroke.data.points || [];
+    _nlEditStroke.data.points.push({ val: 0, color: '#06D6E0', open: false });
+    nlRenderPoints();
+    if (_wb) { _wb._staticDirty = true; _wb.render(); }
+  }
+  function nlRemovePoint(i) {
+    if (!_nlEditStroke) return;
+    _nlEditStroke.data.points.splice(i, 1); nlRenderPoints();
+    if (_wb) { _wb._staticDirty = true; _wb.render(); }
+  }
+  function nlAddInterval() {
+    if (!_nlEditStroke) return;
+    _nlEditStroke.data.intervals = _nlEditStroke.data.intervals || [];
+    _nlEditStroke.data.intervals.push({ from: 0, to: 5, color: '#9B5DE5' });
+    nlRenderIntervals();
+    if (_wb) { _wb._staticDirty = true; _wb.render(); }
+  }
+  function nlRemoveInterval(i) {
+    if (!_nlEditStroke) return;
+    _nlEditStroke.data.intervals.splice(i, 1); nlRenderIntervals();
+    if (_wb) { _wb._staticDirty = true; _wb.render(); }
+  }
+
+  function wbUndo() {
+    if (!_wb) return;
+    _wb.undo();
+  }
+
+  async function wbClear() {
+    if (!_wb || !_sessionId) return;
+    const ok = await crConfirm('Очистить страницу?', 'Все рисунки на текущей странице будут удалены для всех участников урока.', { okText: 'Очистить', type: 'warn' });
+    if (!ok) return;
+    _wb.clearPage();
+    _wbBatch = [];
+    try { await LS.post(`/api/classroom/${_sessionId}/clear-page`, { page_num: _wbCurrentPage }); } catch {}
+    wbUpdateThumbnail(_wbCurrentPage);
+  }
+
+  /* ── end / leave session ── */
+  async function crEndSession() {
+    if (!_sessionId) return;
+    const ok = await crConfirm('Завершить урок?', 'Урок будет завершён для всех участников. Это действие нельзя отменить.', { okText: 'Завершить урок', type: 'danger' });
+    if (!ok) return;
+    try {
+      await LS.del(`/api/classroom/${_sessionId}`);
+      onClassroomEnded();
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+
+  async function crLeaveSession() {
+    if (!_sessionId) return;
+    try {
+      await LS.post(`/api/classroom/${_sessionId}/leave`);
+      onClassroomEnded();
+    } catch {}
+  }
+
+  /* ── participants ── */
+  function updateParticipantsList() {
+    const list = document.getElementById('cr-participants-list');
+    const noSession = document.getElementById('participants-no-session');
+    const ids = Object.keys(_participants);
+    document.getElementById('participants-count').textContent = ids.length;
+
+    if (!_sessionId || !ids.length) {
+      noSession.style.display = 'flex';
+      return;
+    }
+    noSession.style.display = 'none';
+
+    const existing = list.querySelectorAll('.cr-participant');
+    existing.forEach(el => el.remove());
+
+    const isTeacherView = _me?.role === 'teacher' || _me?.role === 'admin';
+    ids.forEach(uid => {
+      const p = _participants[uid];
+      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 div = document.createElement('div');
+      div.className = 'cr-participant';
+      div.dataset.uid = uid;
+      const hasDrawPerm = _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 ? (
+        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>`
+      ) : '';
+      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-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 ? `
+        <button class="cr-p-draw-toggle${hasDrawPerm ? ' granted' : ''}" onclick="crToggleDrawPermission(${uid})">
+          ${svgPencil}
+          ${hasDrawPerm ? 'Запретить' : 'Рисовать'}
+        </button>` : ''}`;
+      list.appendChild(div);
+    });
+    if (window.lucide) lucide.createIcons();
+  }
+
+  /* ── hand raise ── */
+  async function crToggleHand() {
+    if (!_sessionId) return;
+    _handRaised = !_handRaised;
+    const btn = document.getElementById('cr-hand-btn');
+    const lbl = document.getElementById('cr-hand-label');
+    btn.classList.toggle('raised', _handRaised);
+    lbl.textContent = _handRaised ? 'Опустить руку' : 'Поднять руку';
+    try {
+      if (_handRaised) await LS.post(`/api/classroom/${_sessionId}/hand`);
+      else             await LS.del(`/api/classroom/${_sessionId}/hand`);
+    } catch {
+      // revert on error
+      _handRaised = !_handRaised;
+      btn.classList.toggle('raised', _handRaised);
+      lbl.textContent = _handRaised ? 'Опустить руку' : 'Поднять руку';
+    }
+  }
+
+  function onHandRaised(userId, userName) {
+    _raisedHands[userId] = userName;
+    updateHandsList();
+    updateParticipantsList();
+  }
+
+  function onHandLowered(userId) {
+    delete _raisedHands[userId];
+    updateHandsList();
+    updateParticipantsList();
+  }
+
+  function updateHandsList() {
+    const list = document.getElementById('cr-hands-list');
+    if (!list) return;
+    const ids = Object.keys(_raisedHands);
+    list.innerHTML = ids.map(uid => `
+      <div class="cr-hand-item">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><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>
+        ${LS.escapeHtml(_raisedHands[uid])}
+      </div>`).join('');
+  }
+
+  /* ── page navigation ── */
+  function updatePageLabel() {
+    const text = `${_wbCurrentPage}/${_totalPages}`;
+    const lbl = document.getElementById('wb-page-label');
+    const slbl = document.getElementById('wb-student-page-label');
+    if (lbl) lbl.textContent = text;
+    if (slbl) slbl.textContent = text;
+  }
+
+  function onPageAdded(pageNum) {
+    _totalPages = Math.max(_totalPages, pageNum);
+    updatePageLabel();
+    const isTeacher = _me.role === 'teacher' || _me.role === 'admin';
+    if (!isTeacher && _followTeacher) wbGoToPage(pageNum);
+  }
+
+  function onPageChanged(pageNum) {
+    const isTeacher = _me.role === 'teacher' || _me.role === 'admin';
+    if (!isTeacher && _followTeacher) wbGoToPage(pageNum);
+    else if (isTeacher) {
+      _wbCurrentPage = pageNum;
+      updatePageLabel();
+    }
+  }
+
+  async function wbGoToPage(pageNum) {
+    if (!_wb || pageNum === _wbCurrentPage) return;
+    _wbCurrentPage = pageNum;
+    _wbMaxSeq = 0;
+    _wbClearGen++;
+    updatePageLabel();
+    _wb.clearPage();
+    _wbBatch = [];
+    try {
+      const res = await LS.get(`/api/classroom/${_sessionId}/strokes?page_num=${pageNum}`);
+      const strokes = res.strokes || [];
+      _wbUpdateMaxSeq(strokes);
+      _wb.loadStrokes(strokes);
+      if (res.template) _wb.setTemplate(res.template);
+      _wb.setPageNum(pageNum);
+      wbRebuildThumbnails();
+    } catch {}
+  }
+
+  async function wbPrevPage() {
+    if (_wbCurrentPage <= 1) return;
+    await _wbChangePage(_wbCurrentPage - 1);
+  }
+
+  async function wbNextPage() {
+    if (_wbCurrentPage >= _totalPages) return;
+    await _wbChangePage(_wbCurrentPage + 1);
+  }
+
+  // Thumbnail rendering helpers
+  function wbUpdateThumbnail(pageNum) {
+    if (!_wb) return;
+    const list = document.getElementById('wb-thumbs-list');
+    if (!list) return;
+    // Rebuild if count changed
+    if (list.children.length !== _totalPages) { wbRebuildThumbnails(); return; }
+    // Update only the target page canvas
+    const item = list.querySelector(`.wb-thumb-item[data-page="${pageNum}"]`);
+    if (!item) return;
+    const cvs = item.querySelector('canvas');
+    if (!cvs) return;
+    if (pageNum === _wbCurrentPage) {
+      _wb.renderThumbnail(cvs);
+    }
+    // Highlight active
+    list.querySelectorAll('.wb-thumb-item').forEach(el => {
+      el.classList.toggle('active', parseInt(el.dataset.page) === _wbCurrentPage);
+    });
+  }
+
+  function wbRebuildThumbnails() {
+    const list = document.getElementById('wb-thumbs-list');
+    if (!list || !_wb) return;
+    list.innerHTML = '';
+    for (let i = 1; i <= _totalPages; i++) {
+      const item = document.createElement('div');
+      item.className = 'wb-thumb-item' + (i === _wbCurrentPage ? ' active' : '');
+      item.dataset.page = i;
+      item.title = `Страница ${i}`;
+      item.onclick = () => { if (i !== _wbCurrentPage) _wbChangePage(i); };
+      const cvs = document.createElement('canvas');
+      cvs.width = 192; cvs.height = 108;
+      item.appendChild(cvs);
+      const num = document.createElement('span');
+      num.className = 'wb-thumb-num';
+      num.textContent = i;
+      item.appendChild(num);
+      list.appendChild(item);
+      if (i === _wbCurrentPage) _wb.renderThumbnail(cvs);
+    }
+  }
+
+  async function wbAddPage(template = 'blank') {
+    if (!_sessionId) return;
+    try {
+      const res = await LS.post(`/api/classroom/${_sessionId}/pages`, { template });
+      _totalPages = res.pageNum;
+      await _wbChangePage(res.pageNum);
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+
+  async function wbSetPageTemplate(template) {
+    if (!_sessionId || !_wb) return;
+    _wb.setTemplate(template);
+    try { await LS.patch(`/api/classroom/${_sessionId}/page-template`, { template }); } catch {}
+    wbUpdateThumbnail(_wbCurrentPage);
+  }
+
+  async function _wbChangePage(pageNum) {
+    if (!_sessionId) return;
+    _wbBatch = []; // discard unsent strokes from old page
+    try {
+      await LS.put(`/api/classroom/${_sessionId}/page`, { page_num: pageNum });
+      // SSE will echo back page_changed; teacher handles locally too
+      _wbCurrentPage = pageNum;
+      _wbMaxSeq = 0;
+      _wbClearGen++;
+      updatePageLabel();
+      if (_wb) {
+        _wb.clearPage();
+        const res = await LS.get(`/api/classroom/${_sessionId}/strokes?page_num=${pageNum}`);
+        const strokes = res.strokes || [];
+        _wbUpdateMaxSeq(strokes);
+        _wb.loadStrokes(strokes);
+        if (res.template) {
+          _wb.setTemplate(res.template);
+          const sel = document.getElementById('wb-tpl-select');
+          if (sel) sel.value = res.template;
+        }
+        wbRebuildThumbnails();
+      }
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+
+  /* ── tabs ── */
+  function crSwitchTab(tab) {
+    _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');
+    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';
+    if (tab === 'chat') {
+      _chatUnread = 0;
+      document.getElementById('chat-unread').style.display = 'none';
+    }
+    if (tab === 'notes' && _sessionId) crNotesLoad();
+  }
+
+  /* ── chat ── */
+  async function loadChat() {
+    if (!_sessionId) return;
+    try {
+      const data = await LS.get(`/api/classroom/${_sessionId}/chat`);
+      (data.messages || []).forEach(m => appendChatMessage({
+        id: m.id, userId: m.user_id, userName: m.user_name,
+        message: m.message, createdAt: m.created_at, pinned: !!m.pinned,
+        attachmentUrl: m.attachment_url, attachmentType: m.attachment_type,
+        reactions: m.reactions || {},
+      }));
+    } catch {}
+  }
+
+  function appendChatMessage(data) {
+    // dedup
+    if (data.id && _renderedMsgIds.has(data.id)) return;
+    if (data.id) {
+      _renderedMsgIds.add(data.id);
+      if (data.id > _lastChatId) _lastChatId = data.id;
+    }
+
+    // track unread when chat tab not active
+    if (_activeTab !== 'chat' && data.userId !== _me?.id) {
+      _chatUnread++;
+      const badge = document.getElementById('chat-unread');
+      if (badge) { badge.textContent = _chatUnread; badge.style.display = 'inline'; }
+    }
+
+    const wrap = document.getElementById('cr-messages');
+    const isMsgTeacher = data.userId === _session?.teacher_id;
+    const isTeacherView = _me?.role === 'teacher' || _me?.role === 'admin';
+    const time = new Date(data.createdAt).toLocaleTimeString('ru', { hour: '2-digit', minute: '2-digit' });
+    const div = document.createElement('div');
+    div.className = 'cr-msg' + (data.pinned ? ' cr-msg-pinned' : '');
+    if (data.id) div.dataset.msgid = data.id;
+    const pinIcon = `<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"><line x1="12" y1="17" x2="12" y2="22"/><path d="M5 17H19V15L17 7V3H7V7L5 15V17Z"/><line x1="12" y1="3" x2="12" y2="7"/></svg>`;
+
+    // reaction icons (SVG, no emoji)
+    const REACT_ICONS = {
+      like:     `<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"><path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"/></svg>`,
+      heart:    `<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"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg>`,
+      question: `<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"/><path d="M12 17h.01"/></svg>`,
+      idea:     `<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"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg>`,
+      wow:      `<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="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>`,
+    };
+    const REACT_LABELS = { like:'Понятно', heart:'Класс!', question:'Вопрос', idea:'Интересно', wow:'Вау' };
+
+    const reactBar = `<div class="cr-msg-react-bar">${
+      Object.entries(REACT_ICONS).map(([k,ico]) =>
+        `<button class="cr-react-pick" onclick="crReact(${data.id},'${k}')" title="${REACT_LABELS[k]}">${ico}</button>`
+      ).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>` : '';
+
+    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>
+        <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>` : ''}
+      ${attachHtml}
+      <div class="cr-msg-reactions" id="msg-reactions-${data.id}">${reactionsHtml}</div>`;
+    wrap.appendChild(div);
+    wrap.scrollTop = wrap.scrollHeight;
+  }
+
+  async function crPinMessage(msgId, btn) {
+    if (!_sessionId) return;
+    try {
+      const res = await LS.post(`/api/classroom/${_sessionId}/chat/${msgId}/pin`);
+      // SSE will update all clients; update local immediately
+      _updatePinnedMsg(msgId, res.pinned);
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+
+  function _updatePinnedMsg(msgId, pinned) {
+    const div = document.querySelector(`.cr-msg[data-msgid="${msgId}"]`);
+    if (!div) return;
+    div.classList.toggle('cr-msg-pinned', pinned);
+    const badge = div.querySelector('.cr-msg-pin-badge');
+    const btn   = div.querySelector('.cr-msg-pin-btn');
+    const pinIcon = `<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"><line x1="12" y1="17" x2="12" y2="22"/><path d="M5 17H19V15L17 7V3H7V7L5 15V17Z"/><line x1="12" y1="3" x2="12" y2="7"/></svg>`;
+    if (pinned && !badge) {
+      const s = document.createElement('span');
+      s.className = 'cr-msg-pin-badge';
+      s.innerHTML = pinIcon;
+      div.querySelector('.cr-msg-header')?.insertBefore(s, btn || null);
+    } else if (!pinned && badge) {
+      badge.remove();
+    }
+    if (btn) {
+      btn.classList.toggle('active', pinned);
+      btn.title = pinned ? 'Открепить' : 'Закрепить';
+    }
+  }
+
+  /* ── chat attach state ── */
+  let _pendingAttachUrl  = null;
+  let _pendingAttachType = null;
+  let _pendingAttachName = null;
+
+  async function crAttachFile(input) {
+    const file = input.files[0];
+    if (!file || !_sessionId) return;
+    input.value = '';
+    try {
+      const fd = new FormData();
+      fd.append('file', file);
+      const res = await fetch(`/api/classroom/${_sessionId}/chat/upload`, {
+        method: 'POST',
+        headers: { 'Authorization': `Bearer ${LS.getToken()}` },
+        body: fd,
+      });
+      if (!res.ok) throw new Error('Ошибка загрузки');
+      const data = await res.json();
+      _pendingAttachUrl  = data.url;
+      _pendingAttachType = data.type;
+      _pendingAttachName = data.name;
+      const prev = document.getElementById('cr-attach-preview');
+      const thumb = document.getElementById('cr-attach-thumb');
+      const name  = document.getElementById('cr-attach-name');
+      if (data.type === 'image') {
+        thumb.src = data.url;
+        thumb.style.display = 'block';
+      } else {
+        thumb.style.display = 'none';
+      }
+      name.textContent = data.name;
+      prev.style.display = 'flex';
+    } catch (e) { LS.toast(e.message || 'Ошибка загрузки', 'error'); }
+  }
+
+  function crClearAttach() {
+    _pendingAttachUrl  = null;
+    _pendingAttachType = null;
+    _pendingAttachName = null;
+    document.getElementById('cr-attach-preview').style.display = 'none';
+    document.getElementById('cr-attach-thumb').src = '';
+    document.getElementById('cr-attach-name').textContent = '';
+  }
+
+  async function crSendChat() {
+    const input = document.getElementById('cr-chat-input');
+    const message = input.value.trim();
+    const hasAttach = !!_pendingAttachUrl;
+    if (!message && !hasAttach) return;
+    if (!_sessionId) return;
+    input.value = '';
+    const body = { message };
+    if (hasAttach) {
+      body.attachment_url  = _pendingAttachUrl;
+      body.attachment_type = _pendingAttachType;
+      crClearAttach();
+    }
+    try {
+      await LS.post(`/api/classroom/${_sessionId}/chat`, body);
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+
+  function crChatKeyDown(e) {
+    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); crSendChat(); }
+  }
+
+  /* ── reactions ── */
+  function _renderReactions(reactions, msgId) {
+    if (!reactions || !Object.keys(reactions).length) return '';
+    const ICONS = { like:'👍', heart:'❤', question:'❓', idea:'💡', wow:'⭐' };
+    const myId = String(_me?.id || '');
+    return Object.entries(reactions).map(([k, info]) => {
+      // getChat provides `mine` boolean; SSE/reactToMessage provides `uids` string
+      let isMine = !!info.mine;
+      if (!isMine && info.uids) isMine = myId && String(info.uids).split(',').includes(myId);
+      const mine = isMine ? ' cr-react-chip-mine' : '';
+      const label = ICONS[k] || k;
+      const count = info.count || info.cnt || 0;
+      return `<button class="cr-react-chip${mine}" onclick="crReact(${msgId},'${k}')" title="${k}">${label} <span>${count}</span></button>`;
+    }).join('');
+  }
+
+  async function crReact(msgId, reaction) {
+    if (!_sessionId || !msgId) return;
+    try {
+      const res = await LS.post(`/api/classroom/${_sessionId}/chat/${msgId}/react`, { reaction });
+      // SSE will broadcast; update locally immediately
+      const el = document.getElementById(`msg-reactions-${msgId}`);
+      if (el) el.innerHTML = _renderReactions(res.reactions || {}, msgId);
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+
+  /* ── notes ── */
+  let _notesSaveTimer = null;
+  let _notesLoaded    = false;
+
+  async function crNotesLoad() {
+    if (!_sessionId || _notesLoaded) return;
+    _notesLoaded = true;
+    try {
+      const data = await LS.get(`/api/classroom/${_sessionId}/notes`);
+      const ta = document.getElementById('cr-notes-ta');
+      if (ta) ta.value = data.content || '';
+      const st = document.getElementById('notes-status');
+      if (st) st.textContent = '';
+    } catch {}
+  }
+
+  function crNotesOnInput() {
+    const st = document.getElementById('notes-status');
+    if (st) st.textContent = 'Изменено…';
+    clearTimeout(_notesSaveTimer);
+    _notesSaveTimer = setTimeout(crNotesSave, 1500);
+  }
+
+  async function crNotesSave() {
+    if (!_sessionId) return;
+    const ta = document.getElementById('cr-notes-ta');
+    const content = ta ? ta.value : '';
+    try {
+      await LS.put(`/api/classroom/${_sessionId}/notes`, { content });
+      const st = document.getElementById('notes-status');
+      if (st) st.textContent = 'Сохранено';
+      setTimeout(() => { const s = document.getElementById('notes-status'); if (s) s.textContent = ''; }, 2000);
+    } catch {}
+  }
+
+  /* ── lesson templates ── */
+  function crShowTemplates() {
+    document.getElementById('cr-tpl-modal').classList.add('open');
+    crLoadTemplatesList();
+  }
+
+  function crHideTemplates() {
+    document.getElementById('cr-tpl-modal').classList.remove('open');
+  }
+
+  async function crLoadTemplatesList() {
+    try {
+      const data = await LS.get('/api/classroom/templates');
+      crRenderTemplates(data.templates || []);
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+
+  function crRenderTemplates(list) {
+    const el = document.getElementById('cr-tpl-list');
+    if (!list.length) {
+      el.innerHTML = '<div class="cr-tpl-empty">Нет сохранённых шаблонов</div>';
+      return;
+    }
+    el.innerHTML = list.map(t => `
+      <div class="cr-tpl-item">
+        <div style="flex:1;min-width:0">
+          <div class="cr-tpl-item-name">${LS.esc(t.title)}</div>
+          ${t.description ? `<div class="cr-tpl-item-meta">${LS.esc(t.description)}</div>` : ''}
+        </div>
+        <button class="cr-tpl-save-btn" style="padding:5px 10px;font-size:0.74rem;flex-shrink:0" onclick="crLoadTemplate(${t.id})">Загрузить</button>
+        <button class="cr-tpl-item-del" onclick="crDeleteTemplate(${t.id})" 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="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6M14 11v6"/><path d="M9 6V4h6v2"/></svg>
+        </button>
+      </div>`).join('');
+  }
+
+  async function crSaveTemplate() {
+    if (!_sessionId) return;
+    const name = document.getElementById('cr-tpl-name').value.trim();
+    if (!name) { LS.toast('Введите название шаблона', 'error'); return; }
+    try {
+      await LS.post(`/api/classroom/${_sessionId}/save-template`, { title: name });
+      document.getElementById('cr-tpl-name').value = '';
+      LS.toast('Шаблон сохранён', 'success');
+      crLoadTemplatesList();
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+
+  async function crLoadTemplate(id) {
+    if (!_sessionId || !id) return;
+    const ok = await crConfirm('Загрузить шаблон?', 'Текущее содержимое всех страниц урока будет заменено содержимым шаблона.', { okText: 'Загрузить', type: 'warn' });
+    if (!ok) return;
+    try {
+      await LS.post(`/api/classroom/${_sessionId}/load-template`, { template_id: id });
+      crHideTemplates();
+      LS.toast('Шаблон загружен', 'success');
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+
+  async function crDeleteTemplate(id) {
+    if (!id) return;
+    const ok = await crConfirm('Удалить шаблон?', 'Шаблон будет удалён без возможности восстановления.', { okText: 'Удалить', type: 'danger' });
+    if (!ok) return;
+    try {
+      await LS.del(`/api/classroom/templates/${id}`);
+      crLoadTemplatesList();
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+
+  /* ── Helpers ── */
+  function _loadHandsAsync(sessionId) {
+    LS.get(`/api/classroom/${sessionId}/hands`)
+      .then(data => {
+        (data.hands || []).forEach(h => { _raisedHands[h.userId] = h.userName; });
+        updateHandsList();
+        updateParticipantsList();
+      }).catch(() => {});
+  }
+
+  /* ── SSE reconnect: re-sync all state missed during the gap ── */
+  async function resyncAfterReconnect() {
+    if (!_sessionId) return;
+    try {
+      // 1. Verify session is still active
+      const session = await LS.get(`/api/classroom/${_sessionId}`).catch(() => null);
+      if (!session || session.status !== 'active') {
+        onClassroomEnded();
+        return;
+      }
+      _session = session;
+
+      // 2. Re-sync participants
+      const partData = await LS.get(`/api/classroom/${_sessionId}/participants`).catch(() => null);
+      if (partData) {
+        const fresh = {};
+        for (const p of (partData.participants || [])) {
+          fresh[p.user_id] = {
+            name: p.name,
+            micMuted: _participants[p.user_id]?.micMuted || false,
+          };
+        }
+        // Keep our own entry with current mute state
+        if (_me?.id) fresh[_me.id] = { name: _me.name, micMuted: _rtc?.isMuted() || false };
+        _participants = fresh;
+        updateParticipantsList();
+      }
+
+      // 3. Re-sync raised hands
+      const handsData = await LS.get(`/api/classroom/${_sessionId}/hands`).catch(() => null);
+      if (handsData) {
+        _raisedHands = {};
+        (handsData.hands || []).forEach(h => { _raisedHands[h.userId] = h.userName; });
+        updateHandsList();
+        updateParticipantsList();
+      }
+
+      // 4. Re-sync whiteboard strokes for current page
+      if (_wb) {
+        // Clear own-id filter — strokes will be reloaded from server, so echoes no longer needed
+        _wbOwnIds.clear();
+        _wbMaxSeq = 0;
+        const strokesData = await LS.get(`/api/classroom/${_sessionId}/strokes?page_num=${_wbCurrentPage}`).catch(() => null);
+        if (strokesData) {
+          _wbUpdateMaxSeq(strokesData.strokes || []);
+          _wb.loadStrokes(strokesData.strokes || []);
+        }
+      }
+
+      // 5. Catch up on missed chat messages using since_id for efficiency
+      const chatData = await LS.get(`/api/classroom/${_sessionId}/chat?since_id=${_lastChatId}`).catch(() => null);
+      if (chatData) {
+        (chatData.messages || []).forEach(m => appendChatMessage({
+          id: m.id, userId: m.user_id, userName: m.user_name,
+          message: m.message, createdAt: m.created_at,
+        }));
+      }
+
+      // 6. Recover WebRTC peers that failed during the SSE gap
+      if (_rtc) {
+        const peerIds = Object.keys(_participants).map(Number).filter(id => id !== _me?.id);
+        _rtc.recoverPeers(peerIds).catch(() => {});
+      }
+
+      // 7. Follow teacher's current page if follow mode is on
+      const isTeacher = _me?.role === 'teacher' || _me?.role === 'admin';
+      if (!isTeacher && _followTeacher && session.current_page && session.current_page !== _wbCurrentPage) {
+        wbGoToPage(session.current_page);
+      }
+
+      // 8. Re-check draw permission (SSE event may have been missed during the gap)
+      if (!isTeacher && session.canDraw && !_canDraw) {
+        enableDrawPermission(true); // silent — just re-syncing after SSE gap
+      } else if (!isTeacher && !session.canDraw && _canDraw) {
+        disableDrawPermission();
+      }
+
+    } catch (e) {
+      console.warn('[Classroom] resync error', e);
+    }
+  }
+
+  function updateTimer() {
+    if (!_sessionStartTime) return;
+    const s = Math.floor((Date.now() - _sessionStartTime.getTime()) / 1000);
+    const h = Math.floor(s / 3600), m = Math.floor((s % 3600) / 60), sec = s % 60;
+    const t = h > 0
+      ? `${h}:${String(m).padStart(2,'0')}:${String(sec).padStart(2,'0')}`
+      : `${String(m).padStart(2,'0')}:${String(sec).padStart(2,'0')}`;
+    const el = document.getElementById('cr-timer');
+    if (el) el.textContent = t;
+  }
+
+  /* ── Whiteboard extra ── */
+  function wbRedo() { if (_wb) _wb.redo(); }
+
+  let _wbFill = false;
+  function wbToggleFill(btn) {
+    if (!_wb) return;
+    _wbFill = !_wbFill;
+    _wb.setFill(_wbFill);
+    btn.classList.toggle('active', _wbFill);
+  }
+
+  function wbCopySelected()   { if (_wb) _wb.copy(); }
+  function wbPasteSelected()  { if (_wb) _wb.paste(); }
+  function wbDeleteSelected() { if (_wb) _wb.deleteSelected(); }
+  function wbBringToFront()   { if (_wb) _wb.bringToFront(); }
+  function wbSendToBack()     { if (_wb) _wb.sendToBack(); }
+
+  /* ── Formula visual editor ── */
+  let _wbFmVx = 960, _wbFmVy = 540, _wbFmFontSize = 32, _wbFmPrevTimer = null;
+  let _wbFmCurrentTab = 'basic';
+
+  /* ---- button data for all categories ---- */
+  const WB_FM_CATS = {
+    basic: { name: 'Основные', items: [
+      { label:'Плюс-минус ±',       latex:'\\pm',               display:'\\pm' },
+      { label:'Умножить ×',         latex:'\\times',            display:'\\times' },
+      { label:'Делить ÷',           latex:'\\div',              display:'\\div' },
+      { label:'Точка · (умножение)',latex:'\\cdot',             display:'\\cdot' },
+      { label:'Не равно ≠',         latex:'\\neq',              display:'\\neq' },
+      { label:'Меньше или равно ≤', latex:'\\leq',              display:'\\leq' },
+      { label:'Больше или равно ≥', latex:'\\geq',              display:'\\geq' },
+      { label:'Примерно равно ≈',   latex:'\\approx',           display:'\\approx' },
+      { label:'Бесконечность ∞',    latex:'\\infty',            display:'\\infty' },
+      { label:'Многоточие …',       latex:'\\ldots',            display:'\\ldots' },
+      { label:'Процент %',          latex:'\\%',                display:'\\%' },
+      { label:'Градус °',           latex:'^{\\circ}',          display:'90^{\\circ}' },
+      { label:'Модуль числа |x|',   latex:'\\left|{}\\right|',  display:'|x|', cursorBack:7 },
+      { label:'Скобки ( )',         latex:'\\left({}\\right)',   display:'(a+b)', cursorBack:7 },
+      { label:'Квадратные скобки',  latex:'\\left[{}\\right]',  display:'[x]', cursorBack:7 },
+      { label:'Стрелка вправо →',   latex:'\\rightarrow',       display:'\\rightarrow' },
+      { label:'Следовательно ⇒',    latex:'\\Rightarrow',       display:'\\Rightarrow' },
+      { label:'Равносильно ⟺',      latex:'\\Leftrightarrow',   display:'\\Leftrightarrow' },
+    ]},
+    frac: { name: 'Дроби · √', items: [
+      { label:'Дробь a/b',            latex:'\\frac{}{}',           display:'\\frac{a}{b}',         cursorBack:2 },
+      { label:'Квадратный корень √',  latex:'\\sqrt{}',             display:'\\sqrt{a}',            cursorBack:1 },
+      { label:'Кубический корень ∛',  latex:'\\sqrt[3]{}',          display:'\\sqrt[3]{a}',         cursorBack:1 },
+      { label:'Корень n-й степени',   latex:'\\sqrt[n]{}',          display:'\\sqrt[n]{a}',         cursorBack:1 },
+      { label:'Дробь со скобками',    latex:'\\frac{\\left({}\\right)}{}', display:'\\frac{(a+b)}{c}', cursorBack:9 },
+      { label:'Корень из дроби',      latex:'\\sqrt{\\frac{}{}}',   display:'\\sqrt{\\frac{a}{b}}', cursorBack:3 },
+      { label:'Дробь с корнем вверху',latex:'\\frac{\\sqrt{}}{{}}'  ,display:'\\frac{\\sqrt{a}}{b}',cursorBack:2 },
+      { label:'Дробь с корнем внизу', latex:'\\frac{{}}{\\sqrt{}}', display:'\\frac{a}{\\sqrt{b}}', cursorBack:8 },
+    ]},
+    powers: { name: 'Степени', items: [
+      { label:'В квадрате x²',        latex:'^{2}',        display:'x^{2}' },
+      { label:'В кубе x³',            latex:'^{3}',        display:'x^{3}' },
+      { label:'В степени n',          latex:'^{}',         display:'x^{n}',       cursorBack:1 },
+      { label:'Нижний индекс',        latex:'_{}',         display:'x_{n}',       cursorBack:1 },
+      { label:'Степень и индекс',     latex:'_{}^{}',      display:'x_{i}^{n}',   cursorBack:1 },
+      { label:'e в степени x',        latex:'e^{}',        display:'e^{x}',       cursorBack:1 },
+      { label:'10 в степени n',       latex:'10^{}',       display:'10^{n}',      cursorBack:1 },
+      { label:'Логарифм log_a(b)',     latex:'\\log_{}{}'  ,display:'\\log_{a}b',  cursorBack:2 },
+      { label:'Натуральный ln',        latex:'\\ln{}',      display:'\\ln x',      cursorBack:1 },
+      { label:'Десятичный lg',         latex:'\\lg{}',      display:'\\lg x',      cursorBack:1 },
+      { label:'Логарифм log₂',        latex:'\\log_{2}{}', display:'\\log_{2}x',  cursorBack:1 },
+      { label:'Логарифм log₁₀',       latex:'\\log_{10}{}',display:'\\log_{10}x', cursorBack:1 },
+    ]},
+    sums: { name: 'Суммы · ∫', items: [
+      { label:'Сумма Σ с пределами',       latex:'\\sum_{i=1}^{n}{}',               display:'\\sum_{i=1}^{n}a_i',          cursorBack:2 },
+      { label:'Интеграл от a до b',        latex:'\\int_{a}^{b}{}\\,dx',            display:'\\int_{a}^{b}f(x)\\,dx',      cursorBack:4 },
+      { label:'Неопределённый интеграл',   latex:'\\int {}\\,dx',                   display:'\\int f(x)\\,dx',             cursorBack:4 },
+      { label:'Двойной интеграл',          latex:'\\iint',                          display:'\\iint' },
+      { label:'Криволинейный интеграл',    latex:'\\oint',                          display:'\\oint' },
+      { label:'Произведение Π',            latex:'\\prod_{i=1}^{n}{}',              display:'\\prod_{i=1}^{n}a_i',         cursorBack:2 },
+      { label:'Предел x → 0',             latex:'\\lim_{x \\to {}}{}',             display:'\\lim_{x\\to 0}f(x)',         cursorBack:4 },
+      { label:'Предел x → ∞',             latex:'\\lim_{x \\to \\infty}{}',        display:'\\lim_{x\\to\\infty}f(x)',    cursorBack:2 },
+      { label:'Производная dy/dx',         latex:'\\frac{dy}{dx}',                  display:'\\frac{dy}{dx}' },
+      { label:'Частная производная',       latex:'\\frac{\\partial {}}{\\partial {}}',display:'\\frac{\\partial f}{\\partial x}',cursorBack:11 },
+      { label:'Вторая производная d²y/dx²',latex:"\\frac{d^2y}{dx^2}",              display:"\\frac{d^{2}y}{dx^{2}}" },
+      { label:'f штрих f\'(x)',            latex:"f'(x)",                           display:"f'(x)" },
+      { label:'Вектор над буквой',         latex:'\\vec{}',                         display:'\\vec{a}',                    cursorBack:1 },
+      { label:'Вектор AB →',              latex:'\\overrightarrow{}',               display:'\\overrightarrow{AB}',        cursorBack:1 },
+    ]},
+    greek: { name: 'α β γ …', items: [
+      { label:'Альфа α',   latex:'\\alpha',   display:'\\alpha' },
+      { label:'Бета β',    latex:'\\beta',    display:'\\beta' },
+      { label:'Гамма γ',   latex:'\\gamma',   display:'\\gamma' },
+      { label:'Гамма Γ',   latex:'\\Gamma',   display:'\\Gamma' },
+      { label:'Дельта δ',  latex:'\\delta',   display:'\\delta' },
+      { label:'Дельта Δ',  latex:'\\Delta',   display:'\\Delta' },
+      { label:'Эпсилон ε', latex:'\\varepsilon',display:'\\varepsilon' },
+      { label:'Дзета ζ',   latex:'\\zeta',    display:'\\zeta' },
+      { label:'Эта η',     latex:'\\eta',     display:'\\eta' },
+      { label:'Тета θ',    latex:'\\theta',   display:'\\theta' },
+      { label:'Тета Θ',    latex:'\\Theta',   display:'\\Theta' },
+      { label:'Каппа κ',   latex:'\\kappa',   display:'\\kappa' },
+      { label:'Лямбда λ',  latex:'\\lambda',  display:'\\lambda' },
+      { label:'Лямбда Λ',  latex:'\\Lambda',  display:'\\Lambda' },
+      { label:'Мю μ',      latex:'\\mu',      display:'\\mu' },
+      { label:'Ню ν',      latex:'\\nu',      display:'\\nu' },
+      { label:'Кси ξ',     latex:'\\xi',      display:'\\xi' },
+      { label:'Пи π',      latex:'\\pi',      display:'\\pi' },
+      { label:'Пи Π',      latex:'\\Pi',      display:'\\Pi' },
+      { label:'Ро ρ',      latex:'\\rho',     display:'\\rho' },
+      { label:'Сигма σ',   latex:'\\sigma',   display:'\\sigma' },
+      { label:'Сигма Σ',   latex:'\\Sigma',   display:'\\Sigma' },
+      { label:'Тау τ',     latex:'\\tau',     display:'\\tau' },
+      { label:'Фи φ',      latex:'\\varphi',  display:'\\varphi' },
+      { label:'Фи Φ',      latex:'\\Phi',     display:'\\Phi' },
+      { label:'Хи χ',      latex:'\\chi',     display:'\\chi' },
+      { label:'Пси ψ',     latex:'\\psi',     display:'\\psi' },
+      { label:'Пси Ψ',     latex:'\\Psi',     display:'\\Psi' },
+      { label:'Омега ω',   latex:'\\omega',   display:'\\omega' },
+      { label:'Омега Ω',   latex:'\\Omega',   display:'\\Omega' },
+    ]},
+    trig: { name: 'sin · cos', items: [
+      { label:'Синус sin(x)',             latex:'\\sin{}',                    display:'\\sin(x)',              cursorBack:1 },
+      { label:'Косинус cos(x)',           latex:'\\cos{}',                    display:'\\cos(x)',              cursorBack:1 },
+      { label:'Тангенс tan(x)',           latex:'\\tan{}',                    display:'\\tan(x)',              cursorBack:1 },
+      { label:'Котангенс cot(x)',         latex:'\\cot{}',                    display:'\\cot(x)',              cursorBack:1 },
+      { label:'Арксинус arcsin',          latex:'\\arcsin{}',                 display:'\\arcsin(x)',           cursorBack:1 },
+      { label:'Арккосинус arccos',        latex:'\\arccos{}',                 display:'\\arccos(x)',           cursorBack:1 },
+      { label:'Арктангенс arctan',        latex:'\\arctan{}',                 display:'\\arctan(x)',           cursorBack:1 },
+      { label:'sin² x',                  latex:'\\sin^{2}{}',                display:'\\sin^{2}x',            cursorBack:1 },
+      { label:'cos² x',                  latex:'\\cos^{2}{}',                display:'\\cos^{2}x',            cursorBack:1 },
+      { label:'sin²+cos²=1',             latex:'\\sin^{2}x+\\cos^{2}x=1',   display:'\\sin^{2}x+\\cos^{2}x=1' },
+      { label:'sin(α+β)',                latex:'\\sin(\\alpha+\\beta)',       display:'\\sin(\\alpha+\\beta)' },
+      { label:'cos(α+β)',                latex:'\\cos(\\alpha+\\beta)',       display:'\\cos(\\alpha+\\beta)' },
+      { label:'sin(2α) = 2sin·cos',      latex:'\\sin(2\\alpha)=2\\sin\\alpha\\cos\\alpha', display:'\\sin 2\\alpha' },
+    ]},
+    geo: { name: 'Геометрия', items: [
+      { label:'Угол ∠',                  latex:'\\angle',                    display:'\\angle' },
+      { label:'Треугольник △',           latex:'\\triangle',                 display:'\\triangle' },
+      { label:'Перпендикулярно ⊥',       latex:'\\perp',                     display:'\\perp' },
+      { label:'Параллельно ∥',           latex:'\\parallel',                 display:'\\parallel' },
+      { label:'Отрезок AB с чёрточкой',  latex:'\\overline{}',               display:'\\overline{AB}',    cursorBack:1 },
+      { label:'Вектор AB →',             latex:'\\overrightarrow{}',         display:'\\overrightarrow{AB}',cursorBack:1 },
+      { label:'Длина отрезка |AB|',      latex:'|{}|',                       display:'|AB|',               cursorBack:2 },
+      { label:'Координаты (x; y)',       latex:'({};\\ {})',                  display:'(x;\\ y)',           cursorBack:5 },
+      { label:'Подобие ~',               latex:'\\sim',                      display:'\\sim' },
+      { label:'Конгруэнтность ≅',        latex:'\\cong',                     display:'\\cong' },
+      { label:'Площадь S = ...',         latex:'S={}',                       display:'S=\\ldots',          cursorBack:2 },
+      { label:'Периметр P = ...',        latex:'P={}',                       display:'P=\\ldots',          cursorBack:2 },
+      { label:'Теорема Пифагора a²+b²=c²',latex:'a^{2}+b^{2}=c^{2}',       display:'a^{2}+b^{2}=c^{2}' },
+      { label:'Формула расстояния',      latex:'\\sqrt{(x_2-x_1)^{2}+(y_2-y_1)^{2}}', display:'\\sqrt{\\Delta x^{2}+\\Delta y^{2}}' },
+    ]},
+    matrix: { name: 'Матрицы', items: [
+      { label:'Матрица 2×2',         latex:'\\begin{pmatrix} {} & {} \\\\ {} & {} \\end{pmatrix}',           display:'\\begin{pmatrix}a&b\\\\c&d\\end{pmatrix}',           cursorBack:30 },
+      { label:'Матрица 3×3',         latex:'\\begin{pmatrix} {} & {} & {} \\\\ {} & {} & {} \\\\ {} & {} & {} \\end{pmatrix}', display:'\\begin{pmatrix}a&b&c\\\\d&e&f\\\\g&h&k\\end{pmatrix}', cursorBack:50 },
+      { label:'Столбец-вектор',      latex:'\\begin{pmatrix} {} \\\\ {} \\end{pmatrix}',                     display:'\\begin{pmatrix}x\\\\y\\end{pmatrix}',               cursorBack:18 },
+      { label:'Система 2 уравнений', latex:'\\begin{cases} {} \\\\ {} \\end{cases}',                         display:'\\begin{cases}ax=b\\\\cx=d\\end{cases}',             cursorBack:18 },
+      { label:'Система 3 уравнений', latex:'\\begin{cases} {} \\\\ {} \\\\ {} \\end{cases}',                 display:'\\begin{cases}a\\\\b\\\\c\\end{cases}',              cursorBack:18 },
+      { label:'Определитель |M| 2×2',latex:'\\begin{vmatrix} {} & {} \\\\ {} & {} \\end{vmatrix}',           display:'\\begin{vmatrix}a&b\\\\c&d\\end{vmatrix}',           cursorBack:30 },
+    ]},
+  };
+
+  /* ---- render buttons for current tab ---- */
+  function wbFmRenderTab(tabId) {
+    const grid = document.getElementById('wbfm-grid');
+    grid.innerHTML = '';
+    const cat = WB_FM_CATS[tabId];
+    if (!cat) return;
+    cat.items.forEach(item => {
+      const btn = document.createElement('button');
+      btn.className = 'wbfm-vbtn';
+      btn.title = item.label;
+      if (window.katex) {
+        try {
+          btn.innerHTML = window.katex.renderToString(item.display, { throwOnError: false, displayMode: false });
+        } catch(e) { btn.textContent = item.label.slice(0,6); }
+      } else {
+        btn.textContent = item.label.slice(0,8);
+      }
+      btn.addEventListener('click', () => wbFmInsertItem(item));
+      grid.appendChild(btn);
+    });
+  }
+
+  function wbFmTab(btn, tabId) {
+    _wbFmCurrentTab = tabId;
+    document.querySelectorAll('.wbfm-tab').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    wbFmRenderTab(tabId);
+  }
+
+  /* ---- insert item into textarea and show LaTeX area ---- */
+  function wbFmInsertItem(item) {
+    // Auto-show LaTeX area so teacher sees what was generated
+    const ltArea = document.getElementById('wbfm-latex-area');
+    if (ltArea.style.display === 'none') {
+      ltArea.style.display = 'block';
+      document.getElementById('wbfm-lt-arrow').classList.add('open');
+    }
+    const ta = document.getElementById('wbfm-input');
+    const s = ta.selectionStart, e = ta.selectionEnd;
+    ta.value = ta.value.slice(0, s) + item.latex + ta.value.slice(e);
+    // place cursor inside first {} if template
+    let newPos = s + item.latex.length - (item.cursorBack || 0);
+    const braceIn = item.latex.indexOf('{}');
+    if (braceIn >= 0 && item.cursorBack > 0) {
+      newPos = s + braceIn + 1;
+    }
+    ta.focus();
+    ta.setSelectionRange(newPos, newPos);
+    // show hint about Tab key if template has holes
+    const holes = (item.latex.match(/\{\}/g) || []).length;
+    const hint = document.getElementById('wbfm-tab-hint');
+    hint.textContent = holes > 1 ? 'Tab — следующее поле' : holes === 1 ? 'Допишите значение' : '';
+    wbFmUpdatePreview();
+  }
+
+  /* ---- Tab key jumps between {} holes ---- */
+  function wbFmKeydown(event) {
+    if (event.key === 'Tab') {
+      event.preventDefault();
+      const ta = event.target;
+      const pos = ta.selectionStart;
+      const val = ta.value;
+      // find next {} after cursor
+      let next = val.indexOf('{}', pos);
+      if (next < 0) next = val.indexOf('{}'); // wrap around
+      if (next >= 0) { ta.setSelectionRange(next + 1, next + 1); return; }
+    }
+    if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
+      event.preventDefault(); wbFmInsert();
+    }
+    if (event.key === 'Escape') { event.stopPropagation(); wbFmClose(); }
+  }
+
+  function wbFmToggleLatex() {
+    const area  = document.getElementById('wbfm-latex-area');
+    const arrow = document.getElementById('wbfm-lt-arrow');
+    const open  = area.style.display !== 'none';
+    area.style.display = open ? 'none' : 'block';
+    arrow.classList.toggle('open', !open);
+    if (!open) setTimeout(() => document.getElementById('wbfm-input').focus(), 50);
+  }
+
+  function showFormulaModal(vx, vy, existingLatex) {
+    _wbFmVx = vx; _wbFmVy = vy;
+    const modal = document.getElementById('wb-formula-modal');
+    modal.style.display = 'block';
+    // Reset tab to basic
+    wbFmRenderTab(_wbFmCurrentTab);
+    // Reset/load latex
+    const ta = document.getElementById('wbfm-input');
+    ta.value = existingLatex || '';
+    if (existingLatex) {
+      // Editing existing — show LaTeX field
+      document.getElementById('wbfm-latex-area').style.display = 'block';
+      document.getElementById('wbfm-lt-arrow').classList.add('open');
+    } else {
+      document.getElementById('wbfm-latex-area').style.display = 'none';
+      document.getElementById('wbfm-lt-arrow').classList.remove('open');
+    }
+    document.getElementById('wbfm-insert-btn').disabled = !ta.value.trim();
+    wbFmUpdatePreview();
+  }
+
+  function wbFmClose() {
+    document.getElementById('wb-formula-modal').style.display = 'none';
+    if (_wbFmPrevTimer) { clearTimeout(_wbFmPrevTimer); _wbFmPrevTimer = null; }
+    if (_wb) _wb._editingFormulaStroke = null;
+    document.getElementById('wbfm-tab-hint').textContent = '';
+  }
+
+  function wbFmUpdatePreview() {
+    if (_wbFmPrevTimer) clearTimeout(_wbFmPrevTimer);
+    _wbFmPrevTimer = setTimeout(() => {
+      const latex = document.getElementById('wbfm-input').value.trim();
+      const prev  = document.getElementById('wbfm-preview');
+      const btn   = document.getElementById('wbfm-insert-btn');
+      btn.disabled = !latex;
+      if (!latex) {
+        prev.innerHTML = '<span style="color:rgba(255,255,255,0.28);font-size:0.85rem">Нажмите любую кнопку — здесь появится формула</span><span class="wbfm-prev-hint">Ctrl+Enter — вставить</span>';
+        return;
+      }
+      if (!window.katex) { prev.textContent = latex; return; }
+      try {
+        prev.innerHTML = window.katex.renderToString(latex, { throwOnError: false, displayMode: true });
+        prev.innerHTML += '<span class="wbfm-prev-hint">Ctrl+Enter — вставить</span>';
+      } catch (e) {
+        prev.innerHTML = `<span style="color:#F15BB5;font-size:0.8rem">${e.message || 'Ошибка'}</span>`;
+      }
+    }, 160);
+  }
+
+  function wbFmSz(btn, fs) {
+    _wbFmFontSize = fs;
+    document.querySelectorAll('.wbfm-sz').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+  }
+
+  function wbFmInsert() {
+    if (!_wb) return wbFmClose();
+    const latex = document.getElementById('wbfm-input').value.trim();
+    if (!latex) return;
+    const editStroke = _wb._editingFormulaStroke;
+    if (editStroke) {
+      _wb.updateFormula(editStroke, latex, _wbFmFontSize);
+    } else {
+      _wb.insertFormula(_wbFmVx, _wbFmVy, latex, _wbFmFontSize);
+    }
+    wbFmClose();
+  }
+
+  /* ── Image upload ── */
+  function wbOpenImagePicker() {
+    document.getElementById('wb-image-input')?.click();
+  }
+
+  function wbImageSelected(input) {
+    const file = input.files?.[0];
+    if (!file || !_wb || !_sessionId) return;
+    input.value = '';
+    const maxPx = 800;
+    const reader = new FileReader();
+    reader.onload = e => {
+      const img = new Image();
+      img.onload = () => {
+        // Resize to max 800px on longest side
+        let w = img.naturalWidth, h = img.naturalHeight;
+        if (w > maxPx || h > maxPx) {
+          if (w >= h) { h = Math.round(h * maxPx / w); w = maxPx; }
+          else        { w = Math.round(w * maxPx / h); h = maxPx; }
+        }
+        const canvas = document.createElement('canvas');
+        canvas.width = w; canvas.height = h;
+        canvas.getContext('2d').drawImage(img, 0, 0, w, h);
+        const src = canvas.toDataURL('image/jpeg', 0.8);
+        // Place image centered on whiteboard in virtual coords
+        const vw = (w / (img.naturalWidth || w)) * 800;
+        const vh = (h / (img.naturalHeight || h)) * 450;
+        const vx = (1920 - vw) / 2;
+        const vy = (1080 - vh) / 2;
+        const stroke = {
+          id:   _wb._localIdCounter--,
+          tool: 'image',
+          data: { src, x: vx, y: vy, w: vw, h: vh },
+        };
+        _wb._strokes.push(stroke);
+        _wb._undoStack.push(stroke.id);
+        _wb.render();
+        if (_wb._onStrokeDone) _wb._onStrokeDone(stroke);
+      };
+      img.src = e.target.result;
+    };
+    reader.readAsDataURL(file);
+  }
+
+  function wbSetCustomColor(input) {
+    if (!_wb) return;
+    _wb.setColor(input.value);
+    document.querySelectorAll('.cr-color-btn').forEach(b => b.classList.remove('active'));
+    input.style.outline = '2px solid #fff';
+    setTimeout(() => { if (input) input.style.outline = ''; }, 300);
+    if (['eraser','laser'].some(t => document.getElementById(`wb-tool-${t}`)?.classList.contains('active')))
+      wbSetTool('pencil');
+  }
+
+  function wbToggleFullscreen() {
+    const el = document.getElementById('cr-board-wrap');
+    if (!document.fullscreenElement) {
+      el.requestFullscreen?.() || el.webkitRequestFullscreen?.();
+    } else {
+      document.exitFullscreen?.() || document.webkitExitFullscreen?.();
+    }
+  }
+
+  /* ── Student page nav / follow ── */
+  async function wbStudentPrevPage() {
+    if (_wbCurrentPage <= 1) return;
+    _followTeacher = false; updateFollowBtn();
+    await wbGoToPage(_wbCurrentPage - 1);
+  }
+
+  async function wbStudentNextPage() {
+    if (_wbCurrentPage >= _totalPages) return;
+    _followTeacher = false; updateFollowBtn();
+    await wbGoToPage(_wbCurrentPage + 1);
+  }
+
+  function crToggleFollow() {
+    _followTeacher = !_followTeacher;
+    updateFollowBtn();
+    if (_followTeacher && _session?.current_page) wbGoToPage(_session.current_page);
+  }
+
+  function updateFollowBtn() {
+    const btn = document.getElementById('cr-follow-btn');
+    const lbl = document.getElementById('cr-follow-label');
+    if (!btn) return;
+    btn.classList.toggle('active', _followTeacher);
+    if (lbl) lbl.textContent = _followTeacher ? 'Авто' : 'Ручной';
+  }
+
+  /* ── Keyboard shortcuts (non-whiteboard-class shortcuts only) ── */
+  // Note: Ctrl+Z/Y, Ctrl+C/V, Delete, Escape are handled inside Whiteboard class.
+  document.addEventListener('keydown', e => {
+    if (!_wb || !_sessionId) return;
+    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+    const isTeacher = _me?.role === 'teacher' || _me?.role === 'admin';
+    if (!isTeacher) return;
+    const toolMap = { '1': 'pencil', '2': 'eraser', '3': 'rect', '4': 'ellipse', '5': 'line', '6': 'text',
+                      '7': 'connector', '8': 'sticky', '9': 'formula' };
+    if (toolMap[e.key] && !e.ctrlKey && !e.metaKey) { wbSetTool(toolMap[e.key]); return; }
+  });
+
+  /* ── WebRTC ── */
+  async function initRTC(session) {
+    if (_rtc) { _rtc.destroy(); _rtc = null; }
+
+    // peers already in session (excluding self)
+    const peerIds = Object.keys(_participants).map(Number).filter(id => id !== _me.id);
+
+    _rtc = new ClassroomRTC({
+      sessionId: session.id,
+      userId: _me.id,
+      onSignal: async (targetId, payload) => {
+        try {
+          await LS.post(`/api/classroom/${session.id}/signal`, { target_user_id: targetId, payload });
+        } catch {}
+      },
+      onScreenStream: (stream) => {
+        const video = document.getElementById('cr-screen-video');
+        const label = document.getElementById('cr-screen-label');
+        if (stream) {
+          video.srcObject = stream;
+          video.style.display = 'block';
+          label.style.display = 'block';
+        } else {
+          video.srcObject = null;
+          video.style.display = 'none';
+          label.style.display = 'none';
+        }
+      },
+      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);
+        }
+      },
+    });
+
+    const micOk = await _rtc.startAudio();
+    if (!micOk) LS.toast('Нет доступа к микрофону', 'warning');
+
+    document.getElementById('cr-mute-btn').style.display = 'flex';
+    updateMuteBtn();
+
+    if (peerIds.length > 0) await _rtc.connectTo(peerIds);
+  }
+
+  function crToggleMute() {
+    if (!_rtc) return;
+    const muted = _rtc.toggleMute();
+    if (_participants[_me?.id]) _participants[_me.id].micMuted = muted;
+    updateParticipantsList();
+    updateMuteBtn();
+  }
+
+  function updateMuteBtn() {
+    const btn = document.getElementById('cr-mute-btn');
+    if (!btn) return;
+    const muted = _rtc?.isMuted() ?? false;
+    btn.classList.toggle('cr-btn-mic-on',  !muted);
+    btn.classList.toggle('cr-btn-mic-off',  muted);
+    // Update icon via data attribute on a child span (no innerHTML overwrite — keeps onclick)
+    let ico = btn.querySelector('.cr-mute-ico');
+    let lbl = btn.querySelector('.cr-mute-lbl');
+    if (!ico) {
+      btn.innerHTML = '<span class="cr-mute-ico"></span><span class="cr-mute-lbl"></span>';
+      ico = btn.querySelector('.cr-mute-ico');
+      lbl = btn.querySelector('.cr-mute-lbl');
+    }
+    lbl.textContent = muted ? 'Выключен' : 'Включён';
+    ico.innerHTML = muted
+      ? `<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"><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>`
+      : `<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() {
+    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 {}
+    } 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 {}
+    }
+  }
+
+  async function onScreenShareStopped() {
+    document.getElementById('cr-screen-btn').classList.remove('cr-btn-sharing');
+    if (_sessionId) {
+      try { await LS.del(`/api/classroom/${_sessionId}/screen`); } catch {}
+    }
+  }
+
+  async function crToggleDrawPermission(uid) {
+    if (!_sessionId) return;
+    const numUid = Number(uid);
+    const hasPermit = _permittedStudents.has(numUid);
+    try {
+      if (hasPermit) {
+        await LS.del(`/api/classroom/${_sessionId}/allow-draw/${numUid}`);
+        _permittedStudents.delete(numUid);
+      } else {
+        await LS.post(`/api/classroom/${_sessionId}/allow-draw/${numUid}`);
+        _permittedStudents.add(numUid);
+      }
+      updateParticipantsList();
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+
+  async function crMutePeer(uid) {
+    if (!_sessionId) return;
+    try {
+      await LS.post(`/api/classroom/${_sessionId}/mute`, { user_id: uid });
+      if (_participants[uid]) {
+        _participants[uid].micMuted = true;
+        updateParticipantsList();
+      }
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+
+  /* ── notifications ── */
+  function toggleNotifDrop() {
+    const drop = document.getElementById('notif-drop');
+    if (!drop.classList.contains('open')) {
+      const r = document.getElementById('notif-btn').getBoundingClientRect();
+      drop.style.left = (r.right + 8) + 'px';
+      drop.style.top = r.top + 'px';
+    }
+    drop.classList.toggle('open');
+    if (drop.classList.contains('open')) LS.loadNotifs();
+  }
+  document.addEventListener('click', e => {
+    const drop = document.getElementById('notif-drop');
+    if (drop.classList.contains('open') &&
+        !drop.contains(e.target) &&
+        !document.getElementById('notif-btn').contains(e.target))
+      drop.classList.remove('open');
+  });
+
+  /* ── sidebar ── */
+  function toggleSidebar() {
+    const layout = document.querySelector('.app-layout');
+    layout.classList.toggle('sb-collapsed');
+    localStorage.setItem('ls_sb_collapsed', layout.classList.contains('sb-collapsed') ? '1' : '0');
+    if (window.lucide) lucide.createIcons();
+  }
+
+  function lsSearchOpen() {
+    if (typeof LS !== 'undefined' && LS.searchOpen) LS.searchOpen();
+  }
+
+  /* ── stop polling + leave on navigate away ── */
+  window.addEventListener('pagehide', () => {
+    stopPolling();
+    if (_timerHandle) { clearInterval(_timerHandle); _timerHandle = null; }
+    if (_rtc) { _rtc.destroy(); _rtc = null; }
+    if (_sessionId) LS.post(`/api/classroom/${_sessionId}/leave`).catch(() => {});
+  });
+
+  /* ── run ── */
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
+  else init();
+</script>
+<script src="/js/mobile.js"></script>
+
+<!-- ── Formula visual editor modal ──────────────────────────────────── -->
+<div id="wb-formula-modal" style="display:none; position:fixed; inset:0; z-index:190;">
+  <div class="wbfm-overlay" onclick="wbFmClose()"></div>
+  <div class="wbfm-card">
+
+    <!-- header -->
+    <div class="wbfm-hdr">
+      <span class="wbfm-title">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9B5DE5" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3h7l1 9 2-6 2 6 1-9h7"/><path d="M5 21h14"/></svg>
+        Вставить формулу
+      </span>
+      <button class="wbfm-close" onclick="wbFmClose()" title="Закрыть (Esc)">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M18 6 6 18M6 6l12 12"/></svg>
+      </button>
+    </div>
+
+    <!-- live preview (big) -->
+    <div class="wbfm-preview" id="wbfm-preview">
+      <span style="color:rgba(255,255,255,0.28);font-size:0.85rem">Нажмите любую кнопку — здесь появится формула</span>
+      <span class="wbfm-prev-hint">Ctrl+Enter — вставить</span>
+    </div>
+
+    <!-- category tabs -->
+    <div class="wbfm-tabs" id="wbfm-tabs">
+      <button class="wbfm-tab active" onclick="wbFmTab(this,'basic')">Основные</button>
+      <button class="wbfm-tab" onclick="wbFmTab(this,'frac')">Дроби · √</button>
+      <button class="wbfm-tab" onclick="wbFmTab(this,'powers')">Степени</button>
+      <button class="wbfm-tab" onclick="wbFmTab(this,'sums')">Суммы · ∫</button>
+      <button class="wbfm-tab" onclick="wbFmTab(this,'greek')">α β γ …</button>
+      <button class="wbfm-tab" onclick="wbFmTab(this,'trig')">sin · cos</button>
+      <button class="wbfm-tab" onclick="wbFmTab(this,'geo')">Геометрия</button>
+      <button class="wbfm-tab" onclick="wbFmTab(this,'matrix')">Матрицы</button>
+    </div>
+
+    <!-- visual button grid -->
+    <div class="wbfm-grid-wrap">
+      <div class="wbfm-grid" id="wbfm-grid"></div>
+    </div>
+
+    <!-- LaTeX code toggle (hidden by default) -->
+    <div class="wbfm-latex-toggle">
+      <button class="wbfm-lt-btn" onclick="wbFmToggleLatex()" id="wbfm-lt-btn">
+        <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="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
+        LaTeX-код (для опытных)
+        <span class="wbfm-lt-arrow" id="wbfm-lt-arrow">▾</span>
+      </button>
+      <span class="wbfm-tab-hint" id="wbfm-tab-hint"></span>
+    </div>
+    <div class="wbfm-latex-area" id="wbfm-latex-area" style="display:none">
+      <textarea id="wbfm-input" class="wbfm-input" rows="2"
+        oninput="wbFmUpdatePreview()"
+        onkeydown="wbFmKeydown(event)"
+        placeholder="\frac{a}{b}   \sqrt{x}   \int_0^\infty e^{-x}\,dx"></textarea>
+    </div>
+
+    <!-- bottom bar: size + actions -->
+    <div class="wbfm-bottom">
+      <div class="wbfm-size-row">
+        Размер:
+        <button class="wbfm-sz"        onclick="wbFmSz(this,24)">S</button>
+        <button class="wbfm-sz active" onclick="wbFmSz(this,32)">M</button>
+        <button class="wbfm-sz"        onclick="wbFmSz(this,48)">L</button>
+        <button class="wbfm-sz"        onclick="wbFmSz(this,72)">XL</button>
+      </div>
+      <div class="wbfm-actions">
+        <button class="wbfm-cancel" onclick="wbFmClose()">Отмена</button>
+        <button class="wbfm-insert" id="wbfm-insert-btn" onclick="wbFmInsert()" disabled>Вставить на доску</button>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+<!-- Templates modal -->
+<div class="cr-tpl-modal-overlay" id="cr-tpl-modal">
+  <div class="cr-tpl-modal">
+    <div class="cr-tpl-hdr">
+      <span class="cr-tpl-title">Шаблоны уроков</span>
+      <button class="cr-tpl-close" onclick="crHideTemplates()">
+        <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>
+    <div class="cr-tpl-list" id="cr-tpl-list">
+      <div class="cr-tpl-empty">Нет сохранённых шаблонов</div>
+    </div>
+    <div class="cr-tpl-save-area">
+      <input class="cr-tpl-name-input" id="cr-tpl-name" placeholder="Название шаблона…" maxlength="80">
+      <button class="cr-tpl-save-btn" onclick="crSaveTemplate()">Сохранить текущий урок</button>
+    </div>
+  </div>
+</div>
+
+<!-- Coordinate system edit modal -->
+<div id="wb-coord-modal" style="display:none; position:fixed; inset:0; z-index:190; align-items:center; justify-content:center; background:rgba(0,0,0,0.6);">
+  <div style="background:#1a1028; border:1px solid rgba(155,93,229,0.4); border-radius:12px; padding:20px; width:380px; max-width:96vw;">
+    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;">
+      <span style="font-size:14px;font-weight:700;color:#e8e0f7;">Система координат</span>
+      <button onclick="closeCoordModal()" style="background:none;border:none;cursor:pointer;color:#9B5DE5;font-size:18px;padding:0 4px;">✕</button>
+    </div>
+    <!-- Axis range -->
+    <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;">
+      <label style="font-size:11px;color:rgba(255,230,180,0.5);">X min
+        <input id="coord-xmin" type="number" value="-10" oninput="applyCoordSettings()" style="width:100%;margin-top:3px;background:rgba(255,255,255,0.07);border:1px solid rgba(155,93,229,0.3);border-radius:4px;color:#e8e0f7;padding:5px 8px;font-size:12px;">
+      </label>
+      <label style="font-size:11px;color:rgba(255,230,180,0.5);">X max
+        <input id="coord-xmax" type="number" value="10" oninput="applyCoordSettings()" style="width:100%;margin-top:3px;background:rgba(255,255,255,0.07);border:1px solid rgba(155,93,229,0.3);border-radius:4px;color:#e8e0f7;padding:5px 8px;font-size:12px;">
+      </label>
+      <label style="font-size:11px;color:rgba(255,230,180,0.5);">Y min
+        <input id="coord-ymin" type="number" value="-10" oninput="applyCoordSettings()" style="width:100%;margin-top:3px;background:rgba(255,255,255,0.07);border:1px solid rgba(155,93,229,0.3);border-radius:4px;color:#e8e0f7;padding:5px 8px;font-size:12px;">
+      </label>
+      <label style="font-size:11px;color:rgba(255,230,180,0.5);">Y max
+        <input id="coord-ymax" type="number" value="10" oninput="applyCoordSettings()" style="width:100%;margin-top:3px;background:rgba(255,255,255,0.07);border:1px solid rgba(155,93,229,0.3);border-radius:4px;color:#e8e0f7;padding:5px 8px;font-size:12px;">
+      </label>
+    </div>
+    <label style="font-size:11px;color:rgba(255,230,180,0.5);">Шаг сетки
+      <input id="coord-step" type="number" value="1" min="0.1" step="0.1" oninput="applyCoordSettings()" style="width:100%;margin-top:3px;background:rgba(255,255,255,0.07);border:1px solid rgba(155,93,229,0.3);border-radius:4px;color:#e8e0f7;padding:5px 8px;font-size:12px;">
+    </label>
+    <!-- Functions -->
+    <div style="margin-top:14px;">
+      <div style="font-size:11px;color:rgba(255,230,180,0.5);margin-bottom:8px;">Функции (y = ...)</div>
+      <div id="coord-fn-list"></div>
+      <button onclick="coordAddFn()" style="width:100%;padding:6px;background:rgba(155,93,229,0.12);border:1px solid rgba(155,93,229,0.3);border-radius:6px;color:#9B5DE5;cursor:pointer;font-size:12px;margin-top:4px;">+ Добавить функцию</button>
+    </div>
+    <div style="margin-top:16px;display:flex;justify-content:flex-end;">
+      <button onclick="closeCoordModal();if(_wb&&_wb._onStrokeUpdated&&_coordEditStroke)_wb._onStrokeUpdated(_coordEditStroke);" style="padding:7px 18px;background:linear-gradient(135deg,#9B5DE5,#4361EE);border:none;border-radius:7px;color:#fff;cursor:pointer;font-size:13px;font-weight:600;">Готово</button>
+    </div>
+  </div>
+</div>
+
+<!-- ── Number Line edit modal ───────────────────────────────────────────── -->
+<div id="wb-numline-modal" style="display:none; position:fixed; inset:0; z-index:190; align-items:center; justify-content:center; background:rgba(0,0,0,0.6);">
+  <div style="background:#1a1028; border:1px solid rgba(6,214,224,0.35); border-radius:12px; padding:20px; width:380px; max-width:96vw;">
+    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;">
+      <span style="font-size:14px;font-weight:700;color:#e8e0f7;">Числовая ось</span>
+      <button onclick="closeNumLineModal()" style="background:none;border:none;cursor:pointer;color:#06D6E0;font-size:18px;padding:0 4px;">✕</button>
+    </div>
+    <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:12px;">
+      <label style="font-size:11px;color:rgba(255,230,180,0.5);">Мин
+        <input id="nl-min" type="number" value="-10" oninput="applyNumLineSettings()" style="width:100%;margin-top:3px;background:rgba(255,255,255,0.07);border:1px solid rgba(6,214,224,0.3);border-radius:4px;color:#e8e0f7;padding:5px 8px;font-size:12px;">
+      </label>
+      <label style="font-size:11px;color:rgba(255,230,180,0.5);">Макс
+        <input id="nl-max" type="number" value="10" oninput="applyNumLineSettings()" style="width:100%;margin-top:3px;background:rgba(255,255,255,0.07);border:1px solid rgba(6,214,224,0.3);border-radius:4px;color:#e8e0f7;padding:5px 8px;font-size:12px;">
+      </label>
+      <label style="font-size:11px;color:rgba(255,230,180,0.5);">Шаг
+        <input id="nl-step" type="number" value="1" min="0.1" step="0.1" oninput="applyNumLineSettings()" style="width:100%;margin-top:3px;background:rgba(255,255,255,0.07);border:1px solid rgba(6,214,224,0.3);border-radius:4px;color:#e8e0f7;padding:5px 8px;font-size:12px;">
+      </label>
+    </div>
+    <!-- Points -->
+    <div style="margin-bottom:12px;">
+      <div style="font-size:11px;color:rgba(255,230,180,0.5);margin-bottom:6px;">Точки</div>
+      <div id="nl-points-list"></div>
+      <button onclick="nlAddPoint()" style="width:100%;padding:5px;background:rgba(6,214,224,0.1);border:1px solid rgba(6,214,224,0.25);border-radius:5px;color:#06D6E0;cursor:pointer;font-size:11px;margin-top:4px;">+ Добавить точку</button>
+    </div>
+    <!-- Intervals -->
+    <div style="margin-bottom:14px;">
+      <div style="font-size:11px;color:rgba(255,230,180,0.5);margin-bottom:6px;">Интервалы (закрашенные области)</div>
+      <div id="nl-intervals-list"></div>
+      <button onclick="nlAddInterval()" style="width:100%;padding:5px;background:rgba(155,93,229,0.1);border:1px solid rgba(155,93,229,0.25);border-radius:5px;color:#9B5DE5;cursor:pointer;font-size:11px;margin-top:4px;">+ Добавить интервал</button>
+    </div>
+    <div style="display:flex;justify-content:flex-end;">
+      <button onclick="closeNumLineModal();if(_wb&&_wb._onStrokeUpdated&&_nlEditStroke)_wb._onStrokeUpdated(_nlEditStroke);" style="padding:7px 18px;background:linear-gradient(135deg,#06D6E0,#4361EE);border:none;border-radius:7px;color:#fff;cursor:pointer;font-size:13px;font-weight:600;">Готово</button>
+    </div>
+  </div>
+</div>
+
+<!-- ── Universal Confirm Dialog ────────────────────────────────────────── -->
+<div id="cr-dlg" style="display:none" class="cr-dlg-overlay" role="dialog" aria-modal="true">
+  <div class="cr-dlg">
+    <div class="cr-dlg-icon danger" id="cr-dlg-icon"></div>
+    <h3 class="cr-dlg-title" id="cr-dlg-title"></h3>
+    <p class="cr-dlg-msg" id="cr-dlg-msg"></p>
+    <div class="cr-dlg-actions">
+      <button class="cr-dlg-cancel" id="cr-dlg-cancel">Отмена</button>
+      <button class="cr-dlg-ok danger" id="cr-dlg-ok"></button>
+    </div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/frontend/collection-rb.html b/frontend/collection-rb.html
new file mode 100644
index 0000000..e994489
--- /dev/null
+++ b/frontend/collection-rb.html
@@ -0,0 +1,488 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Моя коллекция — Красная книга РБ</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
+  <link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;700;900&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet"/>
+  <link rel="stylesheet" href="/css/ls.css"/>
+  <style>
+    :root {
+      --rb-bg:      #0a1a0d;
+      --rb-surface: #111d13;
+      --rb-border:  #1e3523;
+      --rb-cr:      #ef4444;
+      --rb-en:      #f97316;
+      --rb-vu:      #eab308;
+      --rb-nt:      #22c55e;
+      --rb-lc:      #3b82f6;
+      --rb-accent:  #4ade80;
+      --rb-text:    #e2f5e8;
+      --rb-muted:   #6b9a74;
+      --sb-width:   240px;
+    }
+    body { background: var(--rb-bg); color: var(--rb-text); font-family: 'Manrope', sans-serif; }
+    .app-layout { background: var(--rb-bg); }
+    .sb-content  { padding: 0; }
+
+    /* Sidebar overrides */
+    .app-layout > .sidebar { background: var(--rb-surface) !important; border-right: 1px solid var(--rb-border) !important; }
+    .sb-brand { border-bottom: 1px solid var(--rb-border); padding: 16px 12px 12px; }
+    .sb-link, a.sb-link { color: var(--rb-muted) !important; }
+    .sb-link:hover { background: rgba(74,222,128,.08) !important; color: var(--rb-text) !important; }
+    .sb-link.active { background: rgba(74,222,128,.14) !important; color: var(--rb-accent) !important; font-weight: 700; }
+    .sb-link.active::before { background: var(--rb-accent) !important; }
+    .sb-toggle { color: var(--rb-muted) !important; border-color: var(--rb-border) !important; background: transparent !important; }
+    .sb-toggle:hover { background: rgba(74,222,128,.12) !important; color: var(--rb-accent) !important; }
+    .nav-user-chip { border-color: var(--rb-border) !important; }
+    .nav-avatar { background: linear-gradient(135deg, #166534, #15803d) !important; }
+    .nav-user-name { color: var(--rb-muted) !important; }
+    .rb-brand-link { display:flex; align-items:center; gap:9px; text-decoration:none; flex:1; min-width:0; overflow:hidden; }
+    .rb-brand-icon { font-size:24px; line-height:1; flex-shrink:0; }
+    .rb-brand-text { font-family:'Unbounded',sans-serif; font-size:10px; font-weight:700; color:var(--rb-accent); line-height:1.4; white-space:nowrap; }
+    .rb-sb-section { font-size:9px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--rb-muted); padding:14px 12px 4px; margin:0; opacity:.55; }
+    .app-layout.sb-collapsed .rb-sb-section { display:none; }
+    .rb-sb-divider { border:none; border-top:1px solid var(--rb-border); margin:8px 4px; }
+    .rb-back-link { opacity:.65; font-size:.82rem !important; }
+    .rb-back-link:hover { opacity:1 !important; }
+
+    /* Page layout */
+    .col-page { padding: 40px 40px 80px; max-width: 1300px; margin: 0 auto; }
+
+    /* Header */
+    .col-header {
+      display: flex; align-items: flex-end; gap: 20px;
+      margin-bottom: 32px; flex-wrap: wrap;
+    }
+    .col-title { font-family: 'Unbounded', sans-serif; font-size: 28px; font-weight: 900; color: #fff; margin: 0; }
+    .col-subtitle { font-size: 13px; color: var(--rb-muted); margin: 6px 0 0; }
+    .col-actions { margin-left: auto; display: flex; gap: 10px; }
+    .btn-rb-outline {
+      display: inline-flex; align-items: center; gap: 8px;
+      background: transparent; color: var(--rb-accent);
+      font-weight: 600; font-size: 13px; padding: 10px 18px;
+      border: 1.5px solid var(--rb-accent); border-radius: 12px; cursor: pointer;
+      text-decoration: none; transition: all .2s;
+    }
+    .btn-rb-outline:hover { background: rgba(74,222,128,.1); }
+
+    /* Progress overview */
+    .progress-overview {
+      display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+      gap: 16px; margin-bottom: 36px;
+    }
+    .prog-card {
+      background: var(--rb-surface); border: 1px solid var(--rb-border);
+      border-radius: 14px; padding: 18px 20px;
+    }
+    .prog-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
+    .prog-icon { font-size: 22px; }
+    .prog-name { font-size: 13px; font-weight: 700; color: var(--rb-text); }
+    .prog-count { font-size: 11px; color: var(--rb-muted); margin-top: 2px; }
+    .prog-bar { height: 6px; background: var(--rb-border); border-radius: 3px; overflow: hidden; }
+    .prog-fill { height: 100%; background: linear-gradient(90deg, #22c55e, #4ade80); border-radius: 3px; transition: width .6s; }
+    .prog-pct { font-size: 20px; font-weight: 800; color: var(--rb-accent); margin-top: 8px; }
+
+    /* Filters */
+    .filters-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; align-items: center; }
+    .filter-chip {
+      display: inline-flex; align-items: center; gap: 6px;
+      background: var(--rb-surface); border: 1px solid var(--rb-border);
+      color: var(--rb-muted); font-size: 12px; font-weight: 600;
+      padding: 6px 14px; border-radius: 20px; cursor: pointer; transition: all .15s;
+    }
+    .filter-chip:hover { border-color: var(--rb-accent); color: var(--rb-text); }
+    .filter-chip.active { background: rgba(74,222,128,.15); border-color: var(--rb-accent); color: var(--rb-accent); }
+    .search-wrap { position: relative; flex: 1; min-width: 180px; }
+    .search-wrap input {
+      width: 100%; background: var(--rb-surface); border: 1px solid var(--rb-border);
+      color: var(--rb-text); font-size: 13px; padding: 8px 12px 8px 36px;
+      border-radius: 20px; outline: none; font-family: inherit;
+    }
+    .search-wrap input:focus { border-color: var(--rb-accent); }
+    .search-wrap input::placeholder { color: var(--rb-muted); }
+    .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--rb-muted); font-size: 14px; }
+
+    /* Section header */
+    .section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
+    .section-header h2 { font-family: 'Unbounded', sans-serif; font-size: 18px; font-weight: 700; margin: 0; }
+    .section-header .count { background: var(--rb-border); color: var(--rb-muted); font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 10px; }
+
+    /* Grid */
+    .species-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+      gap: 16px;
+    }
+    .species-card {
+      background: var(--rb-surface); border: 1px solid var(--rb-border);
+      border-radius: 14px; overflow: hidden; cursor: pointer;
+      transition: all .2s; position: relative;
+      animation: cardIn .35s both;
+      animation-delay: calc(var(--i, 0) * 35ms);
+    }
+    @keyframes cardIn {
+      from { opacity: 0; transform: translateY(14px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    .species-card:hover { transform: translateY(-4px); border-color: var(--rb-accent); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
+    .card-photo {
+      width: 100%; aspect-ratio: 1;
+      background: #1a2e1d;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 48px; position: relative; overflow: hidden;
+    }
+    .card-photo img { width: 100%; height: 100%; object-fit: cover; }
+    .card-body { padding: 12px; }
+    .card-name { font-size: 13px; font-weight: 700; color: var(--rb-text); margin: 0 0 2px; line-height: 1.3; }
+    .card-lat  { font-size: 10px; color: var(--rb-muted); font-style: italic; margin: 0 0 8px; }
+    .card-footer { display: flex; align-items: center; justify-content: space-between; }
+    .cat-badge { font-size: 10px; font-weight: 800; letter-spacing: .5px; padding: 2px 8px; border-radius: 8px; }
+    .cat-badge.CR { background: rgba(239,68,68,.2);  color: var(--rb-cr); }
+    .cat-badge.EN { background: rgba(249,115,22,.2); color: var(--rb-en); }
+    .cat-badge.VU { background: rgba(234,179,8,.2);  color: var(--rb-vu); }
+    .cat-badge.NT { background: rgba(34,197,94,.2);  color: var(--rb-nt); }
+    .cat-badge.LC { background: rgba(59,130,246,.2); color: var(--rb-lc); }
+    .card-date { font-size: 10px; color: var(--rb-muted); margin-top: 4px; }
+    .card-method {
+      display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: .5px;
+      text-transform: uppercase;
+      background: rgba(74,222,128,.1); color: var(--rb-accent); padding: 2px 7px; border-radius: 6px; margin-top: 4px;
+    }
+
+    /* Empty state */
+    .rb-empty {
+      grid-column: 1/-1; text-align: center; padding: 80px 20px; color: var(--rb-muted);
+    }
+    .rb-empty .empty-icon { font-size: 56px; margin-bottom: 16px; }
+    .rb-empty h3 { font-size: 18px; font-weight: 700; margin: 0 0 8px; color: var(--rb-text); }
+    .rb-empty p { font-size: 14px; margin: 0 0 20px; }
+
+    /* Achievement chips */
+    .achievement-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 36px; }
+    .ach-chip {
+      display: flex; align-items: center; gap: 8px;
+      background: var(--rb-surface); border: 1px solid var(--rb-border);
+      border-radius: 12px; padding: 12px 16px;
+      font-size: 13px; font-weight: 600; color: var(--rb-text);
+    }
+    .ach-chip.unlocked { border-color: rgba(74,222,128,.4); background: rgba(74,222,128,.08); }
+    .ach-icon { font-size: 20px; }
+    .ach-label { color: var(--rb-muted); font-size: 11px; display: block; margin-top: 1px; }
+
+    /* Toasts */
+    #rb-toasts {
+      position: fixed; bottom: 24px; right: 24px; z-index: 9999;
+      display: flex; flex-direction: column; gap: 10px; pointer-events: none;
+    }
+    .rb-toast {
+      display: flex; align-items: center; gap: 10px;
+      background: #0d2210; border: 1px solid var(--rb-border);
+      color: var(--rb-text); font-size: 13px; font-weight: 600;
+      padding: 12px 18px; border-radius: 12px;
+      box-shadow: 0 8px 24px rgba(0,0,0,.5);
+      pointer-events: auto;
+      animation: toastIn .3s both;
+    }
+    .rb-toast.success { border-color: rgba(74,222,128,.4); }
+    .rb-toast.error   { border-color: rgba(239,68,68,.4); color: #fca5a5; }
+    @keyframes toastIn  { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
+    @keyframes toastOut { from { opacity:1; transform:translateX(0); } to { opacity:0; transform:translateX(20px); } }
+
+    /* ── Mobile ── */
+    @media (max-width: 768px) {
+      .sb-content { padding: 0; overflow-y: auto; }
+      #rb-toasts { right: 14px; bottom: 80px; }
+    }
+    @media (max-width: 480px) {
+      .ach-chip { padding: 9px 12px; font-size: 12px; }
+    }
+  </style>
+</head>
+<body>
+<div class="app-layout" id="app">
+
+  <!-- RB Sidebar -->
+  <nav class="sidebar">
+    <div class="sb-brand">
+      <a href="/red-book.html" class="rb-brand-link">
+        <span class="rb-brand-icon"><svg class="ic" viewBox="0 0 24 24"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z"/><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"/></svg></span>
+        <span class="sb-lbl rb-brand-text">Красная<br>книга РБ</span>
+      </a>
+      <button class="sb-toggle" onclick="toggleSidebar()" title="Свернуть меню"><i data-lucide="panel-left-close"></i></button>
+    </div>
+    <nav class="sb-nav">
+      <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="/collection-rb.html"       class="sb-link active"><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>
+      <a href="/red-book-games.html"     class="sb-link"><i data-lucide="gamepad-2"    class="sb-icon"></i><span class="sb-lbl">Игры</span></a>
+      <hr class="rb-sb-divider">
+      <a href="/dashboard.html" class="sb-link rb-back-link"><i data-lucide="chevron-left" class="sb-icon"></i><span class="sb-lbl">Назад</span></a>
+      <a href="/profile.html"   class="sb-link"><i data-lucide="user"                   class="sb-icon"></i><span class="sb-lbl">Профиль</span></a>
+    </nav>
+    <div class="sb-footer">
+      <div class="nav-user-chip" onclick="location.href='/profile.html'">
+        <div class="nav-avatar" id="nav-avatar">LS</div>
+        <span class="nav-user-name" id="nav-user">—</span>
+      </div>
+    </div>
+  </nav>
+
+  <main class="sb-content">
+    <div class="col-page">
+
+      <!-- Header -->
+      <div class="col-header">
+        <div>
+          <h1 class="col-title">Моя коллекция</h1>
+          <p class="col-subtitle">Открытые виды Красной книги Беларуси</p>
+        </div>
+        <div class="col-actions">
+          <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>
+        </div>
+      </div>
+
+      <!-- Group progress cards -->
+      <div class="progress-overview" id="progress-overview">
+        <!-- filled by JS -->
+      </div>
+
+      <!-- Achievements -->
+      <div class="achievement-row" id="achievement-row">
+        <!-- filled by JS -->
+      </div>
+
+      <!-- Filter bar -->
+      <div class="filters-bar" id="cat-filter">
+        <div class="filter-chip active" data-cat="" onclick="setCat('')">Все</div>
+        <div class="filter-chip" data-cat="CR" onclick="setCat('CR')" style="color:var(--rb-cr);border-color:rgba(239,68,68,.3)">CR</div>
+        <div class="filter-chip" data-cat="EN" onclick="setCat('EN')" style="color:var(--rb-en);border-color:rgba(249,115,22,.3)">EN</div>
+        <div class="filter-chip" data-cat="VU" onclick="setCat('VU')" style="color:var(--rb-vu);border-color:rgba(234,179,8,.3)">VU</div>
+        <div class="filter-chip" data-cat="NT" onclick="setCat('NT')" style="color:var(--rb-nt);border-color:rgba(34,197,94,.3)">NT</div>
+        <div class="search-wrap">
+          <span class="search-icon"><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></span>
+          <input type="text" id="search-input" placeholder="Поиск в коллекции..." oninput="debouncedSearch()"/>
+        </div>
+      </div>
+
+      <!-- Section header -->
+      <div class="section-header">
+        <h2>Открытые виды</h2>
+        <span class="count" id="col-count">—</span>
+      </div>
+
+      <!-- Grid -->
+      <div class="species-grid" id="col-grid">
+        <!-- filled by JS -->
+      </div>
+
+    </div>
+  </main>
+</div>
+
+<div id="rb-toasts"></div>
+
+<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/mobile.js"></script>
+<script>
+/* ── State ── */
+let all = [];
+let filter = { cat: '', q: '' };
+
+const METHOD_LABELS = {
+  explore: '<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> Исследование',
+  quest:   '<svg class="ic" viewBox="0 0 24 24"><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"/><line x1="8" y1="2" x2="8" y2="18"/><line x1="16" y1="6" x2="16" y2="22"/></svg> Квест',
+  sighting:'<svg class="ic" viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg> Наблюдение',
+  daily:   '⭐ Вид дня',
+};
+
+const ACHIEVEMENTS = [
+  { id: 'first',    label: 'Первый шаг',    desc: 'Открыт первый вид',    icon: '<svg class="ic" viewBox="0 0 24 24"><path d="M7 20h10"/><path d="M10 20c5.5-2.5.8-6.4 3-10"/><path d="M9.5 9.4c1.1.8 1.8 2.2 2.3 3.7-2 .4-3.5.4-4.8-.3-1.2-.6-2.3-1.9-3-4.2 2.8-.5 4.4 0 5.5.8z"/><path d="M14.1 6a7 7 0 0 1 1.5 4.7c-1.7 1.3-3 1.4-4 1.1a3 3 0 0 1-1.8-1.9c.8-2 2.3-3.3 4.3-3.9z"/></svg>', need: 1 },
+  { id: 'five',     label: 'Пять видов',    desc: 'Открыто 5 видов',      icon: '<svg class="ic" viewBox="0 0 24 24"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z"/><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"/></svg>', need: 5 },
+  { id: 'ten',      label: 'Десятка',       desc: 'Открыто 10 видов',     icon: '<svg class="ic" viewBox="0 0 24 24"><path d="M11.1 7.1a16.55 16.55 0 0 1 10.9 4"/><path d="M12 12 5.78 17.43A1 1 0 0 0 6.95 19"/><path d="M12.12 12a16.55 16.55 0 0 1-5.2 11.14"/><path d="M12 12 7.7 4.5A1 1 0 0 0 6.02 5.1"/><path d="M12 12 3.88 10.28A1 1 0 0 0 3.6 12.01"/><path d="M12 12v9a1 1 0 0 0 1.8.6"/></svg>', need: 10 },
+  { id: 'quarter',  label: 'Четверть',      desc: 'Открыто 25% каталога', icon: '<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>', need: null, pct: 25 },
+  { id: 'half',     label: 'Половина',      desc: 'Открыто 50% каталога', icon: '<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>', need: null, pct: 50 },
+  { id: 'complete', label: 'Полная книга',  desc: 'Открыты все виды',     icon: '<svg class="ic" viewBox="0 0 24 24"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>', need: null, pct: 100 },
+];
+
+/* ── Init ── */
+async function init() {
+  LS.hideDisabledFeatures?.();
+  lucide.createIcons();
+
+  const user = LS.getUser?.() || null;
+  if (user) {
+    document.getElementById('nav-user').textContent = user.name?.split(' ')[0] || 'Профиль';
+    const initials = (user.name||'LS').split(' ').slice(0,2).map(w=>w[0]?.toUpperCase()||'').join('')||'LS';
+    document.getElementById('nav-avatar').textContent = initials;
+  }
+  if (localStorage.getItem('ls_sb_collapsed') === '1') {
+    document.getElementById('app').classList.add('sb-collapsed');
+  }
+
+  const [colRes, groupsRes, statsRes] = await Promise.all([
+    LS.get('/api/red-book/collection').catch(() => ({ total: 0, species: [] })),
+    LS.get('/api/red-book/groups').catch(() => []),
+    LS.get('/api/red-book/stats').catch(() => ({})),
+  ]);
+
+  all = colRes.species || [];
+  renderProgressCards(groupsRes, all, statsRes);
+  renderAchievements(all, statsRes);
+  renderGrid();
+}
+
+/* ── Progress cards by group ── */
+function renderProgressCards(groups, collected, stats) {
+  const el = document.getElementById('progress-overview');
+  // Total
+  const total  = stats.total || 1;
+  const colCnt = collected.length;
+  const pct    = Math.round(colCnt / total * 100);
+
+  let html = `<div class="prog-card" style="grid-column:span 2;border-color:rgba(74,222,128,.3)">
+    <div class="prog-card-header">
+      <span class="prog-icon"><svg class="ic" viewBox="0 0 24 24"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg></span>
+      <div><div class="prog-name">Вся Красная книга</div><div class="prog-count">${colCnt} из ${total} видов</div></div>
+    </div>
+    <div class="prog-bar"><div class="prog-fill" style="width:${pct}%"></div></div>
+    <div class="prog-pct">${pct}%</div>
+  </div>`;
+
+  // Per group
+  const byGroup = {};
+  collected.forEach(s => {
+    const g = s.icon || '?';
+    if (!byGroup[g]) byGroup[g] = { count: 0, icon: s.icon, name: '' };
+    byGroup[g].count++;
+  });
+
+  groups.forEach(g => {
+    const cnt  = collected.filter(s => s.color === g.color).length;
+    const gpct = g.n ? Math.round(cnt / g.n * 100) : 0;
+    html += `<div class="prog-card">
+      <div class="prog-card-header">
+        <span class="prog-icon">${g.icon}</span>
+        <div><div class="prog-name">${g.name_ru}</div><div class="prog-count">${cnt} из ${g.n}</div></div>
+      </div>
+      <div class="prog-bar"><div class="prog-fill" style="width:${gpct}%"></div></div>
+      <div class="prog-pct">${gpct}%</div>
+    </div>`;
+  });
+
+  el.innerHTML = html;
+}
+
+/* ── Achievements ── */
+function renderAchievements(collected, stats) {
+  const n = collected.length;
+  const total = stats.total || 1;
+  const pct   = n / total * 100;
+
+  const html = ACHIEVEMENTS.map(a => {
+    const unlocked = a.need ? n >= a.need : pct >= a.pct;
+    return `<div class="ach-chip ${unlocked ? 'unlocked' : ''}">
+      <span class="ach-icon">${a.icon}</span>
+      <div>
+        <div style="font-weight:700;font-size:12px;${unlocked?'':'color:var(--rb-muted)'}">${a.label}</div>
+        <span class="ach-label">${a.desc}</span>
+      </div>
+      ${unlocked ? '<span style="color:var(--rb-accent);font-size:18px;margin-left:auto"><svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>' : ''}
+    </div>`;
+  }).join('');
+
+  document.getElementById('achievement-row').innerHTML = html;
+}
+
+/* ── Filters ── */
+function setCat(cat) {
+  filter.cat = cat;
+  document.querySelectorAll('#cat-filter .filter-chip').forEach(c => {
+    c.classList.toggle('active', c.dataset.cat === cat);
+  });
+  renderGrid();
+}
+let searchTimer;
+function debouncedSearch() {
+  clearTimeout(searchTimer);
+  searchTimer = setTimeout(() => {
+    filter.q = document.getElementById('search-input').value.trim().toLowerCase();
+    renderGrid();
+  }, 200);
+}
+
+/* ── Render grid ── */
+function renderGrid() {
+  const grid = document.getElementById('col-grid');
+  let list = all;
+  if (filter.cat) list = list.filter(s => s.category === filter.cat);
+  if (filter.q)   list = list.filter(s => s.name_ru.toLowerCase().includes(filter.q) || (s.name_lat||'').toLowerCase().includes(filter.q));
+
+  document.getElementById('col-count').textContent = list.length;
+
+  if (!list.length && !all.length) {
+    grid.innerHTML = `<div class="rb-empty">
+      <div class="empty-icon"><svg class="ic" viewBox="0 0 24 24"><path d="M22 13V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h8"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/><path d="M16 19h6M19 16v6"/></svg></div>
+      <h3>Коллекция пуста</h3>
+      <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>
+    </div>`;
+    return;
+  }
+
+  if (!list.length) {
+    grid.innerHTML = `<div class="rb-empty"><div class="empty-icon"><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></div><h3>Ничего не найдено</h3><p>Измените фильтры</p></div>`;
+    return;
+  }
+
+  const formatDate = dt => dt ? new Date(dt).toLocaleDateString('ru', { day:'2-digit', month:'short', year:'2-digit' }) : '';
+
+  grid.innerHTML = list.map((s, i) => `
+    <div class="species-card" style="--i:${i%30}" onclick="location.href='/red-book.html?species=${s.id}'">
+      <div class="card-photo">
+        ${s.photo_url ? `<img src="${s.photo_url}" alt="${s.name_ru}" loading="lazy"/>` : `<span style="font-size:48px">${s.icon||'<svg class="ic" viewBox="0 0 24 24"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z"/><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"/></svg>'}</span>`}
+      </div>
+      <div class="card-body">
+        <div class="card-name">${s.name_ru}</div>
+        <div class="card-lat">${s.name_lat || ''}</div>
+        <div class="card-footer">
+          <span class="cat-badge ${s.category}">${s.category}</span>
+          <span style="font-size:16px">${s.icon||''}</span>
+        </div>
+        <div class="card-date">${formatDate(s.at)}</div>
+        ${s.method ? `<span class="card-method">${METHOD_LABELS[s.method] || s.method}</span>` : ''}
+      </div>
+    </div>`).join('');
+}
+
+/* ── Sidebar ── */
+function toggleSidebar() {
+  const app = document.getElementById('app');
+  app.classList.toggle('sb-collapsed');
+  localStorage.setItem('ls_sb_collapsed', app.classList.contains('sb-collapsed') ? '1' : '0');
+  lucide.createIcons();
+}
+
+/* ── Toast ── */
+function showToast(msg, type = 'success') {
+  const wrap = document.getElementById('rb-toasts');
+  const t = document.createElement('div');
+  t.className = `rb-toast ${type}`;
+  t.innerHTML = msg;
+  wrap.appendChild(t);
+  setTimeout(() => {
+    t.classList.add('out');
+    t.addEventListener('animationend', () => t.remove());
+  }, 3000);
+}
+
+init();
+</script>
+</body>
+</html>
diff --git a/frontend/collection.html b/frontend/collection.html
new file mode 100644
index 0000000..b7e8160
--- /dev/null
+++ b/frontend/collection.html
@@ -0,0 +1,551 @@
+<!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" />
+  <style>
+    .sb-content { padding: 0; }
+    .col-wrap {
+      min-height: 100vh;
+      padding: 28px 24px 60px;
+      max-width: 1100px; margin: 0 auto;
+    }
+
+    /* Header */
+    .col-header { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
+    .col-icon {
+      width:52px; height:52px; border-radius:14px; flex-shrink:0;
+      background: linear-gradient(135deg,rgba(249,199,79,.2),rgba(155,93,229,.15));
+      border:1.5px solid rgba(255,255,255,.1);
+      display:flex; align-items:center; justify-content:center;
+    }
+    .col-icon svg { width:26px; height:26px; stroke:#F9C74F; stroke-width:1.8; fill:none; }
+    .col-title { font-family:'Unbounded',sans-serif; font-size:1.3rem; font-weight:800; }
+    .col-sub   { font-size:.82rem; color:var(--text-2); margin-top:2px; }
+
+    /* Summary bar */
+    .col-summary {
+      display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px;
+    }
+    .col-sum-card {
+      background:var(--surface); border:1.5px solid rgba(255,255,255,.08);
+      border-radius:14px; padding:12px 18px;
+      display:flex; align-items:center; gap:10px;
+      min-width:110px;
+    }
+    .col-sum-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
+    .col-sum-icon svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; }
+    .col-sum-val   { font-family:'Unbounded',sans-serif; font-size:1rem; font-weight:800; }
+    .col-sum-label { font-size:.72rem; color:var(--text-2); margin-top:1px; }
+
+    /* Tier legend */
+    .tier-legend { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; align-items:center; }
+    .tier-dot {
+      display:inline-flex; align-items:center; gap:5px;
+      font-size:.75rem; font-weight:600; color:var(--text-2); cursor:pointer;
+      padding:4px 10px; border-radius:99px; border:1.5px solid transparent; transition:all .15s;
+    }
+    .tier-dot.active { color:var(--text); }
+    .tier-dot-circle { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
+
+    /* Filter */
+    .col-filter { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; align-items:center; }
+    .col-pill {
+      padding:5px 14px; border-radius:99px; border:1.5px solid rgba(255,255,255,.12);
+      font-size:.78rem; font-weight:600; cursor:pointer; transition:all .15s;
+      background:transparent; color:var(--text-2);
+    }
+    .col-pill:hover  { border-color:rgba(249,199,79,.4); color:#F9C74F; }
+    .col-pill.active { background:rgba(249,199,79,.12); border-color:#F9C74F; color:#F9C74F; }
+
+    /* Search */
+    .col-search-wrap { position:relative; margin-left:auto; }
+    .col-search {
+      padding:6px 12px 6px 34px; border-radius:99px;
+      border:1.5px solid rgba(255,255,255,.12);
+      background:rgba(255,255,255,.05); color:var(--text);
+      font-family:'Manrope',sans-serif; font-size:.82rem; outline:none; width:200px;
+      transition:border-color .2s;
+    }
+    .col-search:focus { border-color:rgba(249,199,79,.4); }
+    .col-search-icon {
+      position:absolute; left:10px; top:50%; transform:translateY(-50%);
+      color:var(--text-2); pointer-events:none;
+    }
+    .col-search-icon svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; }
+
+    /* Progress bar */
+    .col-progress-bar {
+      background:var(--surface); border:1.5px solid rgba(255,255,255,.08);
+      border-radius:14px; padding:14px 18px; margin-bottom:20px;
+      display:flex; align-items:center; gap:16px;
+    }
+    .col-prog-label { font-size:.82rem; color:var(--text-2); flex-shrink:0; }
+    .col-prog-bar   { flex:1; height:8px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
+    .col-prog-fill  { height:100%; border-radius:99px; background:linear-gradient(90deg,#9B5DE5,#F9C74F); transition:width .8s ease; }
+    .col-prog-pct   { font-family:'Unbounded',sans-serif; font-size:.88rem; font-weight:800; color:#F9C74F; flex-shrink:0; }
+
+    /* Cards grid */
+    .col-grid {
+      display:grid;
+      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+      gap:12px;
+    }
+
+    /* Card */
+    .col-card {
+      position:relative; cursor:pointer;
+      perspective:800px;
+      height:200px;
+    }
+    .col-card-inner {
+      position:absolute; inset:0;
+      transition:transform .5s cubic-bezier(.4,0,.2,1);
+      transform-style:preserve-3d;
+    }
+    .col-card:hover .col-card-inner:not(.flipped) { transform:rotateY(10deg) scale(1.03); }
+    .col-card-inner.flipped { transform:rotateY(180deg); }
+
+    .col-card-front, .col-card-back {
+      position:absolute; inset:0;
+      border-radius:16px; padding:14px 12px;
+      backface-visibility:hidden;
+      display:flex; flex-direction:column; align-items:center;
+      justify-content:center; gap:6px;
+    }
+    .col-card-back { transform:rotateY(180deg); }
+
+    /* Tier styles */
+    .tier-locked .col-card-front {
+      background:rgba(255,255,255,.04); border:1.5px solid rgba(255,255,255,.08);
+      filter:grayscale(1);
+    }
+    .tier-bronze .col-card-front {
+      background:linear-gradient(145deg,rgba(180,80,20,.3),rgba(120,50,10,.2));
+      border:1.5px solid rgba(205,127,50,.35);
+      box-shadow:0 0 20px rgba(205,127,50,.15);
+    }
+    .tier-silver .col-card-front {
+      background:linear-gradient(145deg,rgba(160,160,170,.25),rgba(100,100,110,.2));
+      border:1.5px solid rgba(192,192,192,.4);
+      box-shadow:0 0 20px rgba(192,192,192,.15);
+    }
+    .tier-gold .col-card-front {
+      background:linear-gradient(145deg,rgba(249,199,79,.2),rgba(200,150,30,.15));
+      border:1.5px solid rgba(249,199,79,.45);
+      box-shadow:0 0 24px rgba(249,199,79,.2);
+    }
+    .tier-platinum .col-card-front {
+      background:linear-gradient(145deg,rgba(6,214,224,.2),rgba(155,93,229,.2));
+      border:1.5px solid rgba(6,214,224,.45);
+      box-shadow:0 0 28px rgba(6,214,224,.2);
+    }
+
+    /* Platinum shimmer */
+    .tier-platinum .col-card-front::after {
+      content:''; position:absolute; inset:0; border-radius:16px;
+      background:linear-gradient(135deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%);
+      animation:shimmer 2.5s linear infinite;
+      background-size:200% 200%;
+    }
+    @keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
+
+    .col-card-tier-badge {
+      position:absolute; top:8px; right:8px;
+      font-size:.6rem; font-weight:800; padding:2px 7px;
+      border-radius:99px; text-transform:uppercase; letter-spacing:.05em;
+    }
+    .tier-locked  .col-card-tier-badge { background:rgba(255,255,255,.08); color:var(--text-2); }
+    .tier-bronze  .col-card-tier-badge { background:rgba(205,127,50,.3);   color:#CD7F32; }
+    .tier-silver  .col-card-tier-badge { background:rgba(192,192,192,.3);  color:#C0C0C0; }
+    .tier-gold    .col-card-tier-badge { background:rgba(249,199,79,.25);  color:#F9C74F; }
+    .tier-platinum .col-card-tier-badge { background:rgba(6,214,224,.25);  color:#06D6E0; }
+
+    .col-card-icon { font-size:2rem; line-height:1; }
+    .tier-locked .col-card-icon { opacity:.3; }
+
+    .col-card-name {
+      font-family:'Unbounded',sans-serif; font-size:.7rem; font-weight:800;
+      text-align:center; line-height:1.3; word-break:break-word;
+    }
+    .tier-locked .col-card-name { color:var(--text-2); }
+
+    .col-card-subj {
+      font-size:.68rem; color:var(--text-2); text-align:center;
+    }
+
+    /* Stars rating */
+    .col-card-stars { display:flex; gap:2px; }
+    .col-card-stars svg { width:12px; height:12px; }
+
+    /* Back face */
+    .col-card-back {
+      background:var(--surface); border:1.5px solid rgba(255,255,255,.12);
+    }
+    .col-card-back-title {
+      font-family:'Unbounded',sans-serif; font-size:.72rem; font-weight:800;
+      text-align:center; margin-bottom:6px;
+    }
+    .col-card-back-stat { font-size:.72rem; color:var(--text-2); text-align:center; }
+    .col-card-back-pct  {
+      font-family:'Unbounded',sans-serif; font-size:1.3rem; font-weight:800;
+      color:#F9C74F;
+    }
+    .col-card-back-bar  { width:80%; height:5px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; }
+    .col-card-back-fill { height:100%; border-radius:99px; }
+
+    /* Lock icon */
+    .col-lock-icon {
+      width:36px; height:36px; border-radius:50%;
+      background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center;
+    }
+    .col-lock-icon svg { width:18px; height:18px; stroke:var(--text-2); fill:none; stroke-width:2; }
+
+    /* Empty state */
+    .col-empty {
+      grid-column:1/-1;
+      text-align:center; padding:60px; color:var(--text-2);
+      font-size:.88rem;
+    }
+
+    @media (max-width:768px) {
+      .col-grid { grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); }
+      .col-search { width:150px; }
+    }
+  </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="sbl-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="sbl-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>
+      <span class="sb-link active"><i data-lucide="layers" class="sb-icon"></i><span class="sb-lbl">Коллекция</span></span>
+      <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>
+      <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="sbl-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>
+    </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>
+          <span class="sb-logout" style="pointer-events:none">Мой профиль</span>
+        </div>
+      </a>
+    </div>
+  </aside>
+  <div class="notif-drop" id="notif-drop"></div>
+
+  <div class="sb-content">
+    <div class="col-wrap">
+
+      <div class="col-header">
+        <div class="col-icon">
+          <svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
+        </div>
+        <div>
+          <div class="col-title">Коллекция карточек</div>
+          <div class="col-sub">Открывай карточки, прокачивая знания по темам</div>
+        </div>
+      </div>
+
+      <!-- Summary -->
+      <div class="col-summary" id="col-summary">
+        <div class="col-sum-card">
+          <div class="col-sum-icon" style="background:rgba(249,199,79,.12);color:#F9C74F">
+            <svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
+          </div>
+          <div>
+            <div class="col-sum-val" id="sum-total">—</div>
+            <div class="col-sum-label">Всего тем</div>
+          </div>
+        </div>
+        <div class="col-sum-card">
+          <div class="col-sum-icon" style="background:rgba(56,217,90,.12);color:#38D95A">
+            <svg viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
+          </div>
+          <div>
+            <div class="col-sum-val" id="sum-unlocked">—</div>
+            <div class="col-sum-label">Открыто</div>
+          </div>
+        </div>
+        <div class="col-sum-card" style="cursor:pointer" onclick="setTier('platinum')">
+          <div class="col-sum-icon" style="background:rgba(6,214,224,.12);color:#06D6E0">
+            <svg viewBox="0 0 24 24"><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>
+          </div>
+          <div>
+            <div class="col-sum-val" id="sum-plat" style="color:#06D6E0">—</div>
+            <div class="col-sum-label">Платина</div>
+          </div>
+        </div>
+        <div class="col-sum-card" style="cursor:pointer" onclick="setTier('gold')">
+          <div class="col-sum-icon" style="background:rgba(249,199,79,.12);color:#F9C74F">
+            <svg viewBox="0 0 24 24"><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>
+          </div>
+          <div>
+            <div class="col-sum-val" id="sum-gold" style="color:#F9C74F">—</div>
+            <div class="col-sum-label">Золото</div>
+          </div>
+        </div>
+        <div class="col-sum-card" style="cursor:pointer" onclick="setTier('silver')">
+          <div class="col-sum-icon" style="background:rgba(192,192,192,.15);color:#C0C0C0">
+            <svg viewBox="0 0 24 24"><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>
+          </div>
+          <div>
+            <div class="col-sum-val" id="sum-silver" style="color:#C0C0C0">—</div>
+            <div class="col-sum-label">Серебро</div>
+          </div>
+        </div>
+        <div class="col-sum-card" style="cursor:pointer" onclick="setTier('bronze')">
+          <div class="col-sum-icon" style="background:rgba(205,127,50,.15);color:#CD7F32">
+            <svg viewBox="0 0 24 24"><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>
+          </div>
+          <div>
+            <div class="col-sum-val" id="sum-bronze" style="color:#CD7F32">—</div>
+            <div class="col-sum-label">Бронза</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Progress -->
+      <div class="col-progress-bar">
+        <div class="col-prog-label">Прогресс коллекции</div>
+        <div class="col-prog-bar"><div class="col-prog-fill" id="col-prog-fill" style="width:0%"></div></div>
+        <div class="col-prog-pct" id="col-prog-pct">0%</div>
+      </div>
+
+      <!-- Filters -->
+      <div class="col-filter">
+        <button class="col-pill active" data-slug=""    onclick="setSubject(this,'')">Все</button>
+        <button class="col-pill" data-slug="bio"  onclick="setSubject(this,'bio')">Биология</button>
+        <button class="col-pill" data-slug="chem" onclick="setSubject(this,'chem')">Химия</button>
+        <button class="col-pill" data-slug="math" onclick="setSubject(this,'math')">Математика</button>
+        <button class="col-pill" data-slug="phys" onclick="setSubject(this,'phys')">Физика</button>
+
+        <div class="col-search-wrap" style="margin-left:auto">
+          <div class="col-search-icon"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg></div>
+          <input class="col-search" id="col-search" placeholder="Поиск темы…" oninput="renderCards()" />
+        </div>
+      </div>
+
+      <!-- Tier filter -->
+      <div class="tier-legend" id="tier-legend">
+        <div class="tier-dot active" data-tier="" onclick="setTier('')">
+          <div class="tier-dot-circle" style="background:var(--text-2)"></div>Все
+        </div>
+        <div class="tier-dot" data-tier="platinum" onclick="setTier('platinum')">
+          <div class="tier-dot-circle" style="background:#06D6E0"></div>Платина
+        </div>
+        <div class="tier-dot" data-tier="gold" onclick="setTier('gold')">
+          <div class="tier-dot-circle" style="background:#F9C74F"></div>Золото
+        </div>
+        <div class="tier-dot" data-tier="silver" onclick="setTier('silver')">
+          <div class="tier-dot-circle" style="background:#C0C0C0"></div>Серебро
+        </div>
+        <div class="tier-dot" data-tier="bronze" onclick="setTier('bronze')">
+          <div class="tier-dot-circle" style="background:#CD7F32"></div>Бронза
+        </div>
+        <div class="tier-dot" data-tier="locked" onclick="setTier('locked')">
+          <div class="tier-dot-circle" style="background:rgba(255,255,255,.2)"></div>Закрыто
+        </div>
+      </div>
+
+      <!-- Cards -->
+      <div class="col-grid" id="col-grid">
+        <div class="col-empty">
+          <div style="font-size:2rem;margin-bottom:8px"><svg class="ic" viewBox="0 0 24 24"><path d="M5 22h14M5 2h14M17 22v-4.17a2 2 0 0 0-.59-1.41L12 12l-4.41 4.42A2 2 0 0 0 7 17.83V22M7 2v4.17a2 2 0 0 0 .59 1.41L12 12l4.41-4.42A2 2 0 0 0 17 6.17V2"/></svg></div>
+          Загружаем коллекцию…
+        </div>
+      </div>
+
+    </div>
+  </div>
+</div>
+
+<script src="/js/api.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+<script>
+(async () => {
+  if (!LS.requireAuth()) return;
+  const user = LS.getUser();
+  LS.applyRoleSidebar(user);
+  if (user) {
+    document.getElementById('nav-avatar').textContent =
+      (user.name||'LS').split(' ').slice(0,2).map(w=>w[0]?.toUpperCase()||'').join('')||'LS';
+    document.getElementById('nav-user').textContent = user.name || '—';
+    if (user.role === 'admin') document.getElementById('sbl-admin').style.display = '';
+    LS.showBoardIfAllowed();
+    if (user.role !== 'student') {
+      document.getElementById('sbl-classes').style.display = '';
+    }
+  }
+  LS.sidebar?.init();
+  lucide.createIcons();
+  await loadCollection();
+})();
+
+let _cards = [];
+let _filterSubject = '';
+let _filterTier = '';
+
+/* ── Subject icons ── */
+const SUBJ_ICONS = { bio:'<svg class="ic" viewBox="0 0 24 24"><path d="M2 15c6.667-6 13.333 0 20-6"/><path d="M9 22c1.798-2 2.518-4 2.807-6"/><path d="M15 2c-1.798 2-2.518 4-2.807 6"/><path d="m17 6-2.5-2.5M14 8 13 7M7 18l2.5 2.5M3.5 14.5l.5.5M20 9l.5.5M6.5 12.5l1 1M16.5 10.5l1 1M10 16l1.5 1.5"/></svg>', chem:'<svg class="ic" viewBox="0 0 24 24"><path d="M9 3h6m-4.5 0v5.5l-4 7.5a1 1 0 0 0 .9 1.5h8.2a1 1 0 0 0 .9-1.5l-4-7.5V3"/></svg>️', math:'<svg class="ic" viewBox="0 0 24 24"><path d="m15 5 6.3 6.3a2.4 2.4 0 0 1 0 3.4L17 19"/><path d="M9.586 5.586A2 2 0 0 0 8.172 5H3a1 1 0 0 0-1 1v5.172a2 2 0 0 0 .586 1.414L8.29 18.29a2.426 2.426 0 0 0 3.42 0l3.58-3.58a2.426 2.426 0 0 0 0-3.42z"/><circle cx="6.5" cy="9.5" r=".5" fill="currentColor"/></svg>', phys:'<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>' };
+
+/* ── Star SVG ── */
+function starSVG(filled, color) {
+  return `<svg viewBox="0 0 24 24" fill="${filled ? color : 'none'}" stroke="${color}" stroke-width="2">
+    <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>`;
+}
+
+const TIER_COLOR   = { platinum:'#06D6E0', gold:'#F9C74F', silver:'#C0C0C0', bronze:'#CD7F32', locked:'rgba(255,255,255,.2)' };
+const TIER_LABEL   = { platinum:'Платина', gold:'Золото', silver:'Серебро', bronze:'Бронза', locked:'Закрыто' };
+const TIER_STARS   = { platinum:5, gold:4, silver:3, bronze:1, locked:0 };
+
+/* ── Load ── */
+async function loadCollection() {
+  const data = await LS.api('/api/collection').catch(() => null);
+  if (!data) return;
+
+  _cards = data.cards;
+
+  document.getElementById('sum-total').textContent    = data.totalTopics;
+  document.getElementById('sum-unlocked').textContent = data.unlockedTopics;
+  document.getElementById('sum-plat').textContent     = data.platinumCount;
+  document.getElementById('sum-gold').textContent     = data.goldCount;
+  document.getElementById('sum-silver').textContent   = data.silverCount;
+  document.getElementById('sum-bronze').textContent   = data.bronzeCount;
+
+  const pct = data.totalTopics > 0 ? Math.round(data.unlockedTopics / data.totalTopics * 100) : 0;
+  document.getElementById('col-prog-fill').style.width = pct + '%';
+  document.getElementById('col-prog-pct').textContent  = pct + '%';
+
+  renderCards();
+}
+
+/* ── Filters ── */
+function setSubject(el, slug) {
+  document.querySelectorAll('.col-pill').forEach(p => p.classList.remove('active'));
+  el.classList.add('active');
+  _filterSubject = slug;
+  renderCards();
+}
+
+function setTier(tier) {
+  document.querySelectorAll('.tier-dot').forEach(d => d.classList.remove('active'));
+  const el = document.querySelector(`.tier-dot[data-tier="${tier}"]`);
+  if (el) el.classList.add('active');
+  _filterTier = tier;
+  renderCards();
+}
+
+/* ── Render ── */
+function renderCards() {
+  const q = document.getElementById('col-search').value.trim().toLowerCase();
+  let cards = _cards;
+  if (_filterSubject) cards = cards.filter(c => c.subjectSlug === _filterSubject);
+  if (_filterTier)    cards = cards.filter(c => c.tier === _filterTier);
+  if (q)              cards = cards.filter(c => c.topicName.toLowerCase().includes(q) || c.subjectName.toLowerCase().includes(q));
+
+  const grid = document.getElementById('col-grid');
+  if (!cards.length) {
+    grid.innerHTML = `<div class="col-empty"><div style="font-size:2rem;margin-bottom:8px"><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></div>Ничего не найдено</div>`;
+    return;
+  }
+
+  // Sort: unlocked first, then by tier weight
+  const TIER_WEIGHT = { platinum:4, gold:3, silver:2, bronze:1, locked:0 };
+  cards = [...cards].sort((a,b) => (TIER_WEIGHT[b.tier]||0) - (TIER_WEIGHT[a.tier]||0));
+
+  grid.innerHTML = cards.map(card => buildCard(card)).join('');
+}
+
+function buildCard(c) {
+  const tierColor = TIER_COLOR[c.tier] || 'rgba(255,255,255,.2)';
+  const tierLbl   = TIER_LABEL[c.tier] || '';
+  const stars     = TIER_STARS[c.tier] || 0;
+  const icon      = SUBJ_ICONS[c.subjectSlug] || '<svg class="ic" viewBox="0 0 24 24"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg>';
+
+  const starsHtml = [1,2,3,4,5].map(i =>
+    starSVG(i <= stars, tierColor)
+  ).join('');
+
+  const frontContent = c.tier === 'locked'
+    ? `<div class="col-lock-icon"><svg viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></div>
+       <div class="col-card-name">${escHtml(c.topicName)}</div>
+       <div class="col-card-subj">${escHtml(c.subjectName)}</div>`
+    : `<div class="col-card-icon">${icon}</div>
+       <div class="col-card-name">${escHtml(c.topicName)}</div>
+       <div class="col-card-subj">${escHtml(c.subjectName)}</div>
+       <div class="col-card-stars">${starsHtml}</div>`;
+
+  const backContent = c.tier === 'locked'
+    ? `<div class="col-card-back-title">${escHtml(c.topicName)}</div>
+       <div class="col-card-back-stat">Нет правильных ответов</div>
+       <div class="col-card-back-stat" style="margin-top:6px">Проходи тесты,<br>чтобы открыть карточку</div>`
+    : `<div class="col-card-back-title">${escHtml(c.topicName)}</div>
+       <div class="col-card-back-pct">${c.masteryPct}%</div>
+       <div class="col-card-back-stat">мастерство</div>
+       <div class="col-card-back-bar" style="margin-top:6px">
+         <div class="col-card-back-fill" style="width:${c.masteryPct}%;background:${tierColor}"></div>
+       </div>
+       <div class="col-card-back-stat" style="margin-top:6px">${c.correctCount}/${c.totalAttempts} попыток</div>`;
+
+  return `<div class="col-card tier-${c.tier}" onclick="flipCard(this)">
+    <div class="col-card-inner">
+      <div class="col-card-front">
+        <span class="col-card-tier-badge">${tierLbl}</span>
+        ${frontContent}
+      </div>
+      <div class="col-card-back">${backContent}</div>
+    </div>
+  </div>`;
+}
+
+function flipCard(el) {
+  el.querySelector('.col-card-inner').classList.toggle('flipped');
+}
+
+function escHtml(s) {
+  return (s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+}
+
+LS.notif?.init();
+</script>
+<script src="/js/notifications.js"></script>
+<script src="/js/search.js"></script>
+<script src="/js/mobile.js"></script>
+</body>
+</html>
diff --git a/frontend/course.html b/frontend/course.html
new file mode 100644
index 0000000..e496b24
--- /dev/null
+++ b/frontend/course.html
@@ -0,0 +1,1167 @@
+<!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://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+  <style>
+    .sb-content { background: #f4f5f8; }
+
+    /* ── page header ── */
+    .course-header {
+      padding: 36px 28px 32px;
+      position: relative; overflow: hidden;
+    }
+    .course-header-bio   { background: linear-gradient(140deg, #0a0220 0%, #1a0a3c 60%, #080818 100%); }
+    .course-header-chem  { background: linear-gradient(140deg, #001a12 0%, #042e20 60%, #010f0c 100%); }
+    .course-header-math  { background: linear-gradient(140deg, #00080f 0%, #031828 60%, #000f1c 100%); }
+    .course-header-phys  { background: linear-gradient(140deg, #140c00 0%, #2a1800 60%, #0e0900 100%); }
+    .course-header-other { background: linear-gradient(140deg, #050505 0%, #0f0f1a 60%, #050510 100%); }
+    .ch-bg-dots {
+      position: absolute; inset: 0;
+      background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
+      background-size: 22px 22px; pointer-events: none;
+    }
+    .ch-inner {
+      position: relative; z-index: 1;
+      max-width: 860px; margin: 0 auto;
+    }
+    .ch-back {
+      display: inline-flex; align-items: center; gap: 6px;
+      font-size: 0.78rem; font-weight: 700; color: rgba(255,255,255,0.45);
+      text-decoration: none; margin-bottom: 18px;
+      transition: color 0.15s;
+    }
+    .ch-back:hover { color: rgba(255,255,255,0.8); }
+    .ch-emoji { font-size: 3rem; line-height: 1; margin-bottom: 10px; }
+    .ch-subj {
+      font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
+      margin-bottom: 8px;
+    }
+    .ch-subj-bio   { color: #9B5DE5; }
+    .ch-subj-chem  { color: #06D6A0; }
+    .ch-subj-math  { color: #06B6D4; }
+    .ch-subj-phys  { color: #F59E0B; }
+    .ch-title {
+      font-family: 'Unbounded', sans-serif; font-size: 1.55rem; font-weight: 800;
+      color: #fff; letter-spacing: -0.03em; margin-bottom: 8px; line-height: 1.25;
+    }
+    .ch-desc { font-size: 0.9rem; color: rgba(255,255,255,0.5); max-width: 600px; line-height: 1.6; margin-bottom: 18px; }
+    .ch-meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
+    .ch-meta-item { font-size: 0.8rem; color: rgba(255,255,255,0.45); display: flex; align-items: center; gap: 5px; }
+    .ch-progress-wrap { display: flex; align-items: center; gap: 10px; }
+    .ch-progress-bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,0.1); width: 160px; }
+    .ch-progress-fill { height: 100%; border-radius: 99px; transition: width 0.5s; }
+    .ch-progress-fill-bio   { background: #9B5DE5; }
+    .ch-progress-fill-chem  { background: #06D6A0; }
+    .ch-progress-fill-math  { background: #06B6D4; }
+    .ch-progress-fill-phys  { background: #F59E0B; }
+    .ch-pct { font-size: 0.82rem; font-weight: 700; color: rgba(255,255,255,0.7); }
+    .ch-bm-btn {
+      padding: 5px 8px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,0.2);
+      background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.5); cursor: pointer;
+      display: flex; align-items: center; transition: all 0.15s;
+    }
+    .ch-bm-btn:hover { border-color: #FFD166; color: #FFD166; }
+    .ch-bm-btn.active { border-color: #FFD166; color: #FFD166; background: rgba(255,209,102,0.15); }
+    .ch-teacher-actions {
+      position: absolute; top: 28px; right: 28px; z-index: 2;
+      display: flex; gap: 8px;
+    }
+    .ch-action-btn {
+      padding: 7px 16px; border-radius: 99px; font-family: 'Manrope', sans-serif;
+      font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: all 0.15s;
+      display: flex; align-items: center; gap: 6px;
+    }
+    .ch-action-edit {
+      border: 1.5px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.07);
+      color: rgba(255,255,255,0.7);
+    }
+    .ch-action-edit:hover { background: rgba(255,255,255,0.14); color: #fff; }
+    .ch-action-pub {
+      border: none; background: #06D6A0; color: #fff;
+      box-shadow: 0 2px 8px rgba(6,214,160,0.35);
+    }
+    .ch-action-pub:hover { background: #05bc8c; }
+    .ch-action-unpub {
+      border: none; background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.6);
+    }
+    .ch-action-unpub:hover { background: rgba(255,255,255,0.2); }
+    .ch-draft-tag {
+      display: inline-block; font-size: 0.68rem; font-weight: 700; font-family: 'Manrope', sans-serif;
+      color: rgba(255,255,255,0.4); background: rgba(0,0,0,0.25); padding: 3px 10px; border-radius: 99px;
+    }
+
+    /* ── content ── */
+    .container { max-width: 860px; margin: 0 auto; padding: 28px 24px 80px; }
+
+    /* ── lesson list ── */
+    .lessons-header {
+      display: flex; align-items: center; justify-content: space-between;
+      margin-bottom: 18px;
+    }
+    .lessons-title {
+      font-family: 'Unbounded', sans-serif; font-size: 0.88rem; font-weight: 800;
+      color: #0F172A;
+    }
+    .lessons-header-btns { display: flex; gap: 8px; }
+    .btn-add-lesson {
+      padding: 7px 16px; border: 1.5px solid rgba(155,93,229,0.25); border-radius: 999px;
+      background: rgba(155,93,229,0.06); color: var(--violet);
+      font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 700;
+      cursor: pointer; display: flex; align-items: center; gap: 6px;
+      transition: all 0.15s;
+    }
+    .btn-add-lesson:hover { background: rgba(155,93,229,0.12); border-color: var(--violet); }
+
+    /* section header */
+    .section-header {
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 6px 4px 10px; margin-top: 6px;
+    }
+    .section-title {
+      font-family: 'Unbounded', sans-serif; font-size: 0.72rem; font-weight: 800;
+      color: #8898AA; text-transform: uppercase; letter-spacing: 0.07em;
+      display: flex; align-items: center; gap: 7px;
+    }
+    .section-title::before {
+      content: ''; display: inline-block; width: 20px; height: 1.5px; background: #CBD5E1;
+    }
+
+    .lesson-list { display: flex; flex-direction: column; gap: 10px; }
+    .lesson-item {
+      background: #fff; border: 1.5px solid rgba(15,23,42,0.07);
+      border-radius: 16px; padding: 14px 18px;
+      display: flex; align-items: center; gap: 14px;
+      text-decoration: none; color: inherit;
+      transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
+      box-shadow: 0 1px 4px rgba(15,23,42,0.04);
+    }
+    .lesson-item:hover {
+      transform: translateX(4px);
+      box-shadow: 0 4px 16px rgba(15,23,42,0.09);
+      border-color: rgba(155,93,229,0.2);
+    }
+    .lesson-num {
+      width: 32px; height: 32px; border-radius: 10px;
+      background: rgba(15,23,42,0.05); border: 1.5px solid rgba(15,23,42,0.08);
+      display: flex; align-items: center; justify-content: center;
+      font-family: 'Unbounded', sans-serif; font-size: 0.72rem; font-weight: 800;
+      color: #8898AA; flex-shrink: 0;
+    }
+    .lesson-num.done {
+      background: rgba(5,150,82,0.1); border-color: rgba(5,150,82,0.2); color: #059652;
+    }
+    .lesson-info { flex: 1; }
+    .lesson-title { font-size: 0.92rem; font-weight: 700; color: #0F172A; }
+    .lesson-meta-row { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
+    .lesson-draft-lbl {
+      font-size: 0.68rem; font-weight: 700; color: #8898AA;
+      background: rgba(15,23,42,0.05); padding: 2px 7px; border-radius: 99px;
+    }
+    .lesson-read-time {
+      font-size: 0.68rem; color: #8898AA; display: flex; align-items: center; gap: 3px;
+    }
+    .lesson-stat-lbl {
+      font-size: 0.7rem; font-weight: 700; color: #06D6A0;
+      background: rgba(6,214,160,0.08); padding: 2px 7px; border-radius: 99px;
+    }
+    .lesson-arrow { color: #CBD5E1; flex-shrink: 0; }
+    .lesson-item:hover .lesson-arrow { color: var(--violet); }
+    .lesson-del-btn {
+      width: 28px; height: 28px; border-radius: 8px; border: none;
+      background: transparent; color: #CBD5E1; cursor: pointer;
+      display: flex; align-items: center; justify-content: center;
+      flex-shrink: 0; transition: all 0.15s;
+    }
+    .lesson-del-btn:hover { background: rgba(239,71,111,0.1); color: #EF476F; }
+    .section-actions { display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s; }
+    .section-header:hover .section-actions { opacity: 1; }
+    .section-act-btn {
+      width: 26px; height: 26px; border-radius: 7px; border: none;
+      background: transparent; color: #CBD5E1; cursor: pointer;
+      display: flex; align-items: center; justify-content: center; transition: all 0.12s;
+    }
+    .section-act-btn:hover { background: rgba(155,93,229,0.08); color: var(--violet); }
+    .section-act-btn.danger:hover { background: rgba(239,71,111,0.08); color: #EF476F; }
+
+    /* ── stats panel (teacher) ── */
+    .stats-panel {
+      background: #fff; border: 1.5px solid rgba(15,23,42,0.07);
+      border-radius: 20px; padding: 22px 24px; margin-bottom: 28px;
+      box-shadow: 0 1px 4px rgba(15,23,42,0.04);
+    }
+    .stats-panel-title {
+      font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800;
+      color: #0F172A; margin-bottom: 16px; display: flex; align-items: center; gap: 8px;
+    }
+    .stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }
+    .stat-chip {
+      background: #f8f9fc; border: 1.5px solid rgba(15,23,42,0.07);
+      border-radius: 14px; padding: 14px 16px;
+    }
+    .stat-chip-label { font-size: 0.72rem; color: #8898AA; font-weight: 600; margin-bottom: 6px; }
+    .stat-chip-val { font-family: 'Unbounded', sans-serif; font-size: 1.1rem; font-weight: 800; color: #0F172A; }
+    .stat-chip-sub { font-size: 0.7rem; color: #8898AA; margin-top: 2px; }
+
+    /* ── analytics dashboard ── */
+    .analytics-panel {
+      background: #fff; border: 1.5px solid rgba(15,23,42,0.07);
+      border-radius: 20px; padding: 24px; margin-bottom: 28px;
+      box-shadow: 0 1px 4px rgba(15,23,42,0.04);
+    }
+    .analytics-title {
+      font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 800;
+      color: #0F172A; margin-bottom: 20px; display: flex; align-items: center; gap: 8px;
+    }
+    .analytics-summary {
+      display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px;
+      margin-bottom: 24px;
+    }
+    .an-chip {
+      background: #f8f9fc; border: 1.5px solid rgba(15,23,42,0.07);
+      border-radius: 14px; padding: 14px 16px; text-align: center;
+    }
+    .an-chip-val {
+      font-family: 'Unbounded', sans-serif; font-size: 1.3rem; font-weight: 800;
+    }
+    .an-chip-label { font-size: 0.72rem; color: #8898AA; font-weight: 600; margin-top: 4px; }
+
+    /* lesson bars */
+    .an-lessons-title {
+      font-size: 0.76rem; font-weight: 700; color: #8898AA; text-transform: uppercase;
+      letter-spacing: 0.06em; margin-bottom: 12px;
+    }
+    .an-lesson-row {
+      display: flex; align-items: center; gap: 12px; margin-bottom: 8px;
+    }
+    .an-lesson-name {
+      width: 180px; flex-shrink: 0; font-size: 0.8rem; font-weight: 600; color: #3D4F6B;
+      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    }
+    .an-lesson-bar {
+      flex: 1; height: 8px; background: rgba(15,23,42,0.06); border-radius: 99px;
+      overflow: hidden;
+    }
+    .an-lesson-fill {
+      height: 100%; border-radius: 99px; transition: width 0.5s;
+      background: linear-gradient(90deg, var(--violet), #06D6A0);
+    }
+    .an-lesson-pct {
+      width: 42px; text-align: right; font-size: 0.76rem; font-weight: 700; color: #3D4F6B;
+    }
+
+    /* stuck students */
+    .an-stuck-section { margin-top: 20px; }
+    .an-stuck-title {
+      font-size: 0.76rem; font-weight: 700; color: #EF476F; text-transform: uppercase;
+      letter-spacing: 0.06em; margin-bottom: 10px;
+      display: flex; align-items: center; gap: 6px;
+    }
+    .an-stuck-item {
+      display: flex; align-items: center; gap: 12px;
+      padding: 10px 14px; background: rgba(239,71,111,0.04);
+      border: 1px solid rgba(239,71,111,0.1); border-radius: 12px;
+      margin-bottom: 6px;
+    }
+    .an-stuck-avatar {
+      width: 30px; height: 30px; border-radius: 10px;
+      background: rgba(239,71,111,0.12); color: #EF476F;
+      font-size: 0.7rem; font-weight: 800;
+      display: flex; align-items: center; justify-content: center;
+    }
+    .an-stuck-info { flex: 1; }
+    .an-stuck-name { font-size: 0.82rem; font-weight: 700; color: #0F172A; }
+    .an-stuck-detail { font-size: 0.72rem; color: #8898AA; margin-top: 2px; }
+
+    /* students table */
+    .an-students-section { margin-top: 20px; }
+    .an-students-toggle {
+      background: none; border: 1.5px solid rgba(15,23,42,0.1); border-radius: 10px;
+      padding: 8px 16px; font-family: 'Manrope', sans-serif; font-size: 0.78rem;
+      font-weight: 700; color: #8898AA; cursor: pointer; transition: all 0.15s;
+      display: flex; align-items: center; gap: 6px;
+    }
+    .an-students-toggle:hover { border-color: var(--violet); color: var(--violet); }
+    .an-students-table {
+      width: 100%; border-collapse: collapse; margin-top: 12px;
+      font-size: 0.8rem;
+    }
+    .an-students-table th {
+      text-align: left; padding: 8px 10px; font-size: 0.7rem; font-weight: 700;
+      color: #8898AA; text-transform: uppercase; letter-spacing: 0.05em;
+      border-bottom: 1.5px solid rgba(15,23,42,0.08);
+    }
+    .an-students-table td {
+      padding: 9px 10px; border-bottom: 1px solid rgba(15,23,42,0.05);
+      color: #3D4F6B; font-weight: 600;
+    }
+    .an-students-table tr:hover td { background: rgba(155,93,229,0.03); }
+    .an-pct-badge {
+      display: inline-block; padding: 2px 8px; border-radius: 99px;
+      font-size: 0.72rem; font-weight: 700;
+    }
+    .an-pct-low  { background: rgba(239,71,111,0.1); color: #EF476F; }
+    .an-pct-mid  { background: rgba(255,209,102,0.15); color: #B8860B; }
+    .an-pct-high { background: rgba(6,214,160,0.1); color: #059652; }
+
+    /* class selector for analytics */
+    .an-class-select {
+      padding: 7px 12px; border: 1.5px solid rgba(15,23,42,0.12); border-radius: 10px;
+      font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 600;
+      color: #3D4F6B; background: #f8f9fc; cursor: pointer;
+    }
+    .an-class-select:focus { outline: none; border-color: var(--violet); }
+
+    /* ── nav active ── */
+    .nav-active {
+      background: rgba(155,93,229,0.08) !important;
+      border-color: var(--violet) !important;
+      color: var(--violet) !important;
+      cursor: default; pointer-events: none;
+    }
+    /* ── notif ── */
+    .notif-bell { position: relative; }
+    .notif-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; background: var(--pink); color: #fff; border-radius: 99px; font-size: 0.65rem; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; }
+    .notif-drop-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid var(--border); }
+    .notif-drop-title { font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800; }
+    .notif-read-all { background: none; border: none; font-size: 0.74rem; color: var(--violet); cursor: pointer; font-family: 'Manrope', sans-serif; font-weight: 600; }
+    .notif-item { display: flex; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background var(--tr); text-decoration: none; color: inherit; }
+    .notif-item:last-child { border-bottom: none; }
+    .notif-item:hover { background: rgba(155,93,229,0.04); }
+    .notif-item.unread { background: rgba(155,93,229,0.05); }
+    .notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); flex-shrink: 0; margin-top: 5px; }
+    .notif-dot.read { background: transparent; border: 1.5px solid var(--border-h); }
+    .notif-msg { font-size: 0.80rem; line-height: 1.45; flex: 1; }
+    .notif-time { font-size: 0.70rem; color: var(--text-3); margin-top: 2px; }
+    .notif-empty { padding: 28px 16px; text-align: center; color: var(--text-3); font-size: 0.84rem; }
+
+    /* ── modals ── */
+    .modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.4); backdrop-filter: blur(6px); z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; }
+    .modal-overlay.open { display: flex; }
+    .modal { background: #fff; border-radius: 24px; padding: 36px; width: 100%; max-width: 460px; box-shadow: 0 32px 80px rgba(15,23,42,0.22); }
+    .modal-title { font-family: 'Unbounded', sans-serif; font-size: 1rem; font-weight: 800; margin-bottom: 22px; }
+    .form-group { margin-bottom: 16px; }
+    .form-label { display: block; font-size: 0.8rem; font-weight: 700; color: #3D4F6B; margin-bottom: 6px; }
+    .form-input { width: 100%; padding: 11px 14px; border: 1.5px solid rgba(15,23,42,0.15); border-radius: 12px; font-family: 'Manrope', sans-serif; font-size: 0.92rem; color: var(--text); background: #f8f9fc; transition: border-color 0.2s; box-sizing: border-box; }
+    .form-input:focus { outline: none; border-color: var(--violet); background: #fff; }
+    .modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }
+    .btn-cancel { padding: 10px 22px; border: 1.5px solid rgba(15,23,42,0.15); border-radius: 999px; background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.88rem; font-weight: 600; color: #8898AA; cursor: pointer; transition: all 0.18s; }
+    .btn-cancel:hover { border-color: rgba(15,23,42,0.3); color: var(--text); }
+    .btn-primary { padding: 10px 28px; border: none; border-radius: 999px; background: var(--violet); color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.88rem; font-weight: 700; cursor: pointer; box-shadow: 0 2px 10px rgba(155,93,229,0.3); transition: all 0.18s; }
+    .btn-primary:hover { background: #8a47d8; }
+    .btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
+
+    /* ── Mobile responsive ── */
+    @media (max-width: 768px) {
+      /* Course header */
+      .course-header { padding: 24px 16px 20px; }
+      .ch-title { font-size: 1.1rem; }
+      .ch-desc  { font-size: 0.82rem; margin-bottom: 12px; }
+      .ch-emoji { font-size: 2rem; }
+      /* Teacher action buttons: take them out of absolute corner */
+      .ch-teacher-actions { position: static; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
+      /* Progress bar: don't let it overflow */
+      .ch-progress-bar { width: 100px; }
+
+      /* Container */
+      .container { padding: 18px 12px 80px; }
+
+      /* Analytics lesson name: fixed 180px <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> shrinkable */
+      .an-lesson-name { width: 100px; }
+
+      /* Stats grid: ensure 2 columns on tablet, 1 on very small */
+      .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
+
+      /* Lessons header: wrap if buttons don't fit */
+      .lessons-header { flex-wrap: wrap; gap: 8px; }
+
+      /* Modal: bottom sheet */
+      .modal-overlay { align-items: flex-end; padding: 0; }
+      .modal { border-radius: 22px 22px 0 0; padding: 28px 20px 36px; max-height: 90vh; overflow-y: auto; }
+      .modal-footer { flex-wrap: wrap; }
+      .modal-footer .btn-cancel,
+      .modal-footer .btn-primary { flex: 1; text-align: center; }
+    }
+
+    @media (max-width: 480px) {
+      .ch-title { font-size: 0.95rem; }
+      .stats-grid { grid-template-columns: 1fr; }
+      .an-lesson-name { width: 80px; font-size: 0.72rem; }
+      .container { padding: 14px 10px 80px; }
+    }
+  </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" onclick="toggleSidebar()" 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 active"><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="/hangman"       class="sb-link"><i data-lucide="gamepad-2"  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>
+      <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="toggleNotifDrop()">
+          <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>
+    </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>
+          <span class="sb-logout" style="pointer-events:none">Мой профиль</span>
+        </div>
+      </a>
+    </div>
+  </aside>
+  <div class="notif-drop" id="notif-drop"></div>
+  <div class="sb-content">
+
+    <!-- Course header (populated by JS) -->
+    <div id="course-header" class="course-header course-header-other">
+      <div class="ch-bg-dots"></div>
+      <div class="ch-inner">
+        <a href="/theory" class="ch-back"><i data-lucide="arrow-left" style="width:14px;height:14px"></i> Все курсы</a>
+        <div id="header-body" style="color:#fff">
+          <div class="spinner" style="border-color:rgba(255,255,255,0.1);border-top-color:#fff"></div>
+        </div>
+      </div>
+    </div>
+
+    <div class="container">
+      <!-- Analytics dashboard (teacher only, hidden initially) -->
+      <div class="analytics-panel" id="analytics-panel" style="display:none">
+        <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:20px">
+          <div class="analytics-title" style="margin-bottom:0">
+            <i data-lucide="bar-chart-2" style="width:16px;height:16px;opacity:0.5"></i> Аналитика курса
+          </div>
+          <select class="an-class-select" id="an-class-select" onchange="loadAnalytics()">
+            <option value="">Все ученики</option>
+          </select>
+        </div>
+        <div id="analytics-body"><div class="spinner"></div></div>
+      </div>
+
+      <!-- Lesson list -->
+      <div class="lessons-header">
+        <div class="lessons-title" id="lessons-count">Уроки</div>
+        <div class="lessons-header-btns">
+          <button class="btn-add-lesson" id="btn-add-section" style="display:none" onclick="openAddSectionModal()">
+            <i data-lucide="folder-plus" style="width:14px;height:14px"></i> Раздел
+          </button>
+          <button class="btn-add-lesson" id="btn-add-lesson" style="display:none" onclick="openAddLessonModal()">
+            <i data-lucide="plus" style="width:14px;height:14px"></i> Урок
+          </button>
+        </div>
+      </div>
+      <div class="lesson-list" id="lesson-list">
+        <div class="spinner"></div>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+<!-- Add section modal -->
+<div class="modal-overlay" id="add-section-modal" onclick="if(event.target===this)closeAddSectionModal()">
+  <div class="modal">
+    <div class="modal-title">Новый раздел</div>
+    <div class="form-group">
+      <label class="form-label">Название раздела</label>
+      <input class="form-input" id="as-title" placeholder="Например: Часть 1. Введение" />
+    </div>
+    <div class="modal-footer">
+      <button class="btn-cancel" onclick="closeAddSectionModal()">Отмена</button>
+      <button class="btn-primary" id="btn-do-add-section" onclick="doAddSection()">Создать</button>
+    </div>
+  </div>
+</div>
+
+<!-- Edit course modal -->
+<div class="modal-overlay" id="edit-course-modal" onclick="if(event.target===this)closeEditModal()">
+  <div class="modal">
+    <div class="modal-title">Редактировать курс</div>
+    <div class="form-group">
+      <label class="form-label">Название</label>
+      <input class="form-input" id="ec-title" placeholder="Название курса" />
+    </div>
+    <div class="form-group" style="margin-top:12px">
+      <label class="form-label">Описание</label>
+      <textarea class="form-input" id="ec-desc" rows="3" placeholder="Краткое описание курса" style="resize:vertical"></textarea>
+    </div>
+    <div style="display:flex;gap:12px;margin-top:12px">
+      <div class="form-group" style="flex:0 0 80px">
+        <label class="form-label">Эмодзи</label>
+        <input class="form-input" id="ec-emoji" placeholder="" maxlength="4" style="text-align:center;font-size:1.4rem" />
+      </div>
+      <div class="form-group" style="flex:1">
+        <label class="form-label">Предмет</label>
+        <select class="form-input" id="ec-subject">
+          <option value="">— Не указан —</option>
+          <option value="bio">Биология</option>
+          <option value="chem">Химия</option>
+          <option value="math">Математика</option>
+          <option value="phys">Физика</option>
+        </select>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn-cancel" onclick="closeEditModal()">Отмена</button>
+      <button class="btn-primary" id="btn-do-edit-course" onclick="doEditCourse()">Сохранить</button>
+    </div>
+  </div>
+</div>
+
+<!-- Add lesson modal -->
+<div class="modal-overlay" id="add-lesson-modal" onclick="if(event.target===this)closeAddLessonModal()">
+  <div class="modal">
+    <div class="modal-title">Новый урок</div>
+    <div class="form-group">
+      <label class="form-label">Название урока</label>
+      <input class="form-input" id="al-title" placeholder="Например: Строение клетки" />
+    </div>
+    <div class="modal-footer">
+      <button class="btn-cancel" onclick="closeAddLessonModal()">Отмена</button>
+      <button class="btn-primary" id="btn-do-add-lesson" onclick="doAddLesson()">Создать</button>
+    </div>
+  </div>
+</div>
+
+<script src="/js/api.js"></script>
+<script>
+  if (!LS.requireAuth()) throw new Error();
+
+  const user = LS.getUser();
+  document.getElementById('nav-user').textContent   = user?.name || user?.email || '';
+  document.getElementById('nav-avatar').textContent =
+    (user?.name || 'LS').split(' ').slice(0,2).map(w => w[0]?.toUpperCase() || '').join('') || 'LS';
+
+  const isTeacher = ['admin','teacher'].includes(user?.role);
+  LS.showBoardIfAllowed();
+  LS.applyRoleSidebar(user);
+  if (isTeacher) {
+    document.getElementById('btn-classes').style.display = '';
+    document.getElementById('btn-admin').style.display   = '';
+  }
+  lucide.createIcons();
+
+  /* ── sidebar ── */
+  function toggleSidebar() {
+    const layout = document.querySelector('.app-layout');
+    const collapsed = layout.classList.toggle('sb-collapsed');
+    localStorage.setItem('ls_sb_collapsed', collapsed ? '1' : '');
+    lucide.createIcons();
+  }
+  if (localStorage.getItem('ls_sb_collapsed'))
+    document.querySelector('.app-layout').classList.add('sb-collapsed');
+
+  /* ── notif ── */
+  function toggleNotifDrop() {
+    const btn = document.getElementById('notif-btn');
+    const drop = document.getElementById('notif-drop');
+    const r = btn.getBoundingClientRect();
+    drop.style.left = (r.right + 8) + 'px';
+    drop.style.top  = r.top + 'px';
+    if (drop.classList.toggle('open')) loadNotifs();
+  }
+  async function loadNotifs() {
+    const drop = document.getElementById('notif-drop');
+    drop.innerHTML = '<div class="notif-drop-header"><span class="notif-drop-title">Уведомления</span><button class="notif-read-all" onclick="readAllNotifs()">Прочитать все</button></div><div class="notif-empty">Загрузка…</div>';
+    try {
+      const data = await LS.api('/api/notifications?limit=20');
+      const items = data.items || [];
+      const badge = document.getElementById('notif-badge');
+      const unread = items.filter(n => !n.is_read).length;
+      badge.textContent = unread; badge.style.display = unread ? '' : 'none';
+      if (!items.length) { drop.querySelector('.notif-empty').textContent = 'Нет уведомлений'; return; }
+      drop.innerHTML = '<div class="notif-drop-header"><span class="notif-drop-title">Уведомления</span><button class="notif-read-all" onclick="readAllNotifs()">Прочитать все</button></div>' +
+        items.map(n => `<a class="notif-item${n.is_read ? '' : ' unread'}" href="${LS.safeHref(n.link)}" onclick="markRead(${n.id})">
+          <div class="notif-dot${n.is_read ? ' read' : ''}"></div>
+          <div><div class="notif-msg">${esc(n.message)}</div><div class="notif-time">${fmtTime(n.created_at)}</div></div>
+        </a>`).join('');
+    } catch {}
+  }
+  async function markRead(id) { try { await LS.api('/api/notifications/' + id + '/read', { method:'POST' }); } catch {} }
+  async function readAllNotifs() { try { await LS.api('/api/notifications/read-all', { method:'POST' }); loadNotifs(); } catch {} }
+  document.addEventListener('click', e => {
+    const drop = document.getElementById('notif-drop');
+    if (drop.classList.contains('open') && !drop.contains(e.target) && !document.getElementById('notif-btn').contains(e.target))
+      drop.classList.remove('open');
+  });
+
+  /* ── helpers ── */
+  function fmtTime(s) {
+    const d = new Date(s && s.includes('T') ? s : (s||'').replace(' ','T')+'Z');
+    const diff = Date.now() - d.getTime();
+    if (diff < 60000) return 'только что';
+    if (diff < 3600000) return Math.floor(diff/60000) + ' мин назад';
+    return d.toLocaleDateString('ru', { day:'numeric', month:'short' });
+  }
+
+  const SUBJ_LABEL = { bio:'Биология', chem:'Химия', math:'Математика', phys:'Физика' };
+  const HEADER_CLASS = { bio:'course-header-bio', chem:'course-header-chem', math:'course-header-math', phys:'course-header-phys' };
+  const SUBJ_CLASS   = { bio:'ch-subj-bio',       chem:'ch-subj-chem',       math:'ch-subj-math',       phys:'ch-subj-phys' };
+  const FILL_CLASS   = { bio:'ch-progress-fill-bio', chem:'ch-progress-fill-chem', math:'ch-progress-fill-math', phys:'ch-progress-fill-phys' };
+
+  /* ── load course ── */
+  const courseId = new URLSearchParams(location.search).get('id');
+  if (!courseId) location.href = '/theory';
+  let course = null;
+
+  async function loadCourse() {
+    try {
+      course = await LS.api('/api/courses/' + courseId);
+    } catch (e) {
+      document.getElementById('header-body').innerHTML = '<div style="color:rgba(255,255,255,0.5)">Курс не найден</div>';
+      return;
+    }
+
+    // update header bg
+    const hdr = document.getElementById('course-header');
+    hdr.className = 'course-header ' + (HEADER_CLASS[course.subjectSlug] || 'course-header-other');
+
+    const pct = course.lessonCount > 0 ? Math.round(course.doneCount / course.lessonCount * 100) : 0;
+    const fillCls = FILL_CLASS[course.subjectSlug] || 'ch-progress-fill-bio';
+
+    document.title = esc(course.title) + ' — LearnSpace';
+
+    document.getElementById('header-body').innerHTML = `
+      ${!course.isPublished ? '<span class="ch-draft-tag">Черновик</span><br><br>' : ''}
+      <div class="ch-emoji">${course.coverEmoji || LS.icon('book-open',24)}</div>
+      <div class="ch-subj ${SUBJ_CLASS[course.subjectSlug] || ''}">${esc(SUBJ_LABEL[course.subjectSlug] || course.subjectSlug)}</div>
+      <div class="ch-title">${esc(course.title)}</div>
+      ${course.description ? `<div class="ch-desc">${esc(course.description)}</div>` : ''}
+      <div class="ch-meta">
+        <div class="ch-meta-item"><i data-lucide="book-open" style="width:13px;height:13px"></i> ${course.lessonCount} уроков</div>
+        ${course.lessonCount > 0 ? `
+        <div class="ch-progress-wrap">
+          <div class="ch-progress-bar"><div class="ch-progress-fill ${fillCls}" style="width:${pct}%"></div></div>
+          <span class="ch-pct">${pct}% пройдено</span>
+        </div>` : ''}
+        <button class="ch-bm-btn" id="btn-bookmark-course" onclick="toggleCourseBookmark()" title="В закладки">
+          <i data-lucide="bookmark" style="width:14px;height:14px"></i>
+        </button>
+      </div>
+    `;
+
+    if (isTeacher) {
+      document.getElementById('header-body').insertAdjacentHTML('afterend', `
+        <div class="ch-teacher-actions">
+          <button class="ch-action-btn ch-action-edit" onclick="openSaveCourseTplModal()" title="Сохранить как шаблон">
+            <i data-lucide="bookmark-plus" style="width:13px;height:13px"></i>
+          </button>
+          <button class="ch-action-btn ch-action-edit" onclick="duplicateCourse()" title="Дублировать курс">
+            <i data-lucide="copy" style="width:13px;height:13px"></i>
+          </button>
+          <button class="ch-action-btn ch-action-edit" onclick="openEditModal()">
+            <i data-lucide="pencil" style="width:13px;height:13px"></i> Редактировать
+          </button>
+          <button class="ch-action-btn ${course.isPublished ? 'ch-action-unpub' : 'ch-action-pub'}"
+                  onclick="togglePublish()">
+            <i data-lucide="${course.isPublished ? 'eye-off' : 'eye'}" style="width:13px;height:13px"></i>
+            ${course.isPublished ? 'Снять' : 'Опубликовать'}
+          </button>
+          <button class="ch-action-btn ch-action-del" onclick="deleteCourse()" style="color:#EF476F;border-color:rgba(239,71,111,0.25)">
+            <i data-lucide="trash-2" style="width:13px;height:13px"></i> Удалить
+          </button>
+        </div>
+      `);
+      document.getElementById('btn-add-lesson').style.display = '';
+    }
+
+    lucide.createIcons();
+    renderLessons(course.lessons || [], course.sections || []);
+    checkCourseBookmark();
+
+    if (isTeacher) {
+      document.getElementById('btn-add-section').style.display = '';
+      loadClassesForAnalytics();
+      loadAnalytics();
+    }
+  }
+
+  /* ── course bookmark ── */
+  let _courseBmId = null;
+  async function checkCourseBookmark() {
+    try {
+      const r = await LS.checkBookmark('course', courseId);
+      _courseBmId = r.id;
+      const btn = document.getElementById('btn-bookmark-course');
+      if (btn) btn.classList.toggle('active', r.bookmarked);
+    } catch {}
+  }
+  async function toggleCourseBookmark() {
+    const btn = document.getElementById('btn-bookmark-course');
+    if (!btn) return;
+    try {
+      if (_courseBmId) {
+        await LS.removeBookmark(_courseBmId);
+        _courseBmId = null;
+        btn.classList.remove('active');
+        LS.toast('Убрано из закладок', 'info');
+      } else {
+        const r = await LS.addBookmark('course', Number(courseId));
+        _courseBmId = r.id;
+        btn.classList.add('active');
+        LS.toast('Добавлено в закладки', 'success');
+      }
+    } catch (e) {
+      if (e.status === 409) { btn.classList.add('active'); LS.toast('Уже в закладках', 'info'); }
+      else LS.toast(e.message || 'Ошибка', 'error');
+    }
+  }
+
+  function renderLessons(lessons, sections) {
+    const list = document.getElementById('lesson-list');
+    document.getElementById('lessons-count').textContent = `Уроки · ${lessons.length}`;
+
+    if (!lessons.length) {
+      list.innerHTML = `<div style="text-align:center;padding:40px;color:#8898AA;font-size:0.86rem">
+        ${isTeacher ? 'Нажмите «Урок», чтобы создать первый урок' : 'В курсе пока нет уроков'}
+      </div>`;
+      return;
+    }
+
+    // Build section map
+    const sectionMap = {};
+    (sections || []).forEach(s => { sectionMap[s.id] = s.title; });
+
+    // Group lessons by section
+    const groups = []; // [{sectionId, sectionTitle, lessons:[]}]
+    const seenSections = new Set();
+    lessons.forEach(l => {
+      const sid = l.sectionId || null;
+      if (!seenSections.has(sid)) {
+        seenSections.add(sid);
+        groups.push({ sectionId: sid, sectionTitle: sid ? (sectionMap[sid] || 'Раздел') : null, lessons: [] });
+      }
+      groups[groups.length - 1].lessons.push(l);
+    });
+
+    let html = '';
+    let globalIdx = 0;
+    groups.forEach(g => {
+      if (g.sectionTitle) {
+        html += `<div class="section-header">
+          <span class="section-title">${esc(g.sectionTitle)}</span>
+          ${isTeacher ? `<div class="section-actions">
+            <button class="section-act-btn" onclick="editSection(${g.sectionId},'${esc(g.sectionTitle).replace(/'/g, "\\'")}')" title="Переименовать">
+              <i data-lucide="pencil" style="width:12px;height:12px"></i>
+            </button>
+            <button class="section-act-btn danger" onclick="deleteSection(${g.sectionId},'${esc(g.sectionTitle).replace(/'/g, "\\'")}')" title="Удалить раздел">
+              <i data-lucide="trash-2" style="width:12px;height:12px"></i>
+            </button>
+          </div>` : ''}
+        </div>`;
+      }
+      g.lessons.forEach(l => {
+        const i = globalIdx++;
+        const rt = l.readTime ? `<span class="lesson-read-time"><i data-lucide="clock" style="width:10px;height:10px"></i> ${l.readTime} мин</span>` : '';
+        const draft = !l.isPublished && isTeacher ? '<span class="lesson-draft-lbl">Черновик</span>' : '';
+        const meta = (rt || draft) ? `<div class="lesson-meta-row">${draft}${rt}</div>` : '';
+        html += `
+          <a class="lesson-item stagger-item" href="/lesson?id=${l.id}" style="--i:${i}">
+            <div class="lesson-num${l.completed ? ' done' : ''}">
+              ${l.completed ? '<i data-lucide="check" style="width:14px;height:14px"></i>' : (i + 1)}
+            </div>
+            <div class="lesson-info">
+              <span class="lesson-title">${esc(l.title)}</span>
+              ${meta}
+            </div>
+            ${isTeacher ? `<button class="lesson-del-btn" onclick="deleteLesson(event,${l.id},'${esc(l.title).replace(/'/g, "\\'")}')" title="Удалить урок"><i data-lucide="trash-2" style="width:13px;height:13px"></i></button>` : ''}
+            <i data-lucide="chevron-right" class="lesson-arrow" style="width:16px;height:16px"></i>
+          </a>`;
+      });
+    });
+
+    list.innerHTML = html;
+    lucide.createIcons();
+  }
+
+  /* ── analytics ── */
+  async function loadClassesForAnalytics() {
+    try {
+      const classes = await LS.api('/api/classes');
+      const sel = document.getElementById('an-class-select');
+      (classes || []).forEach(c => {
+        const opt = document.createElement('option');
+        opt.value = c.id;
+        opt.textContent = c.name;
+        sel.appendChild(opt);
+      });
+      // pre-select from URL
+      const urlClass = new URLSearchParams(location.search).get('classId');
+      if (urlClass) sel.value = urlClass;
+    } catch {}
+  }
+
+  let _studentsExpanded = false;
+  async function loadAnalytics() {
+    const panel = document.getElementById('analytics-panel');
+    const body  = document.getElementById('analytics-body');
+    const classId = document.getElementById('an-class-select').value;
+
+    panel.style.display = '';
+    body.innerHTML = '<div class="spinner"></div>';
+
+    try {
+      const url = `/api/courses/${courseId}/analytics` + (classId ? `?classId=${classId}` : '');
+      const data = await LS.api(url);
+
+      if (!data.totalStudents && !data.lessons?.length) {
+        body.innerHTML = '<div style="text-align:center;padding:20px;color:#8898AA;font-size:0.84rem">Нет данных. Назначьте курс классу, чтобы видеть аналитику.</div>';
+        return;
+      }
+
+      let html = '';
+
+      // Summary chips
+      html += `<div class="analytics-summary">
+        <div class="an-chip">
+          <div class="an-chip-val" style="color:var(--violet)">${data.totalStudents}</div>
+          <div class="an-chip-label">Учеников</div>
+        </div>
+        <div class="an-chip">
+          <div class="an-chip-val" style="color:#06D6A0">${data.avgPct}%</div>
+          <div class="an-chip-label">Средний прогресс</div>
+        </div>
+        <div class="an-chip">
+          <div class="an-chip-val" style="color:#06B6D4">${data.totalLessons}</div>
+          <div class="an-chip-label">Уроков в курсе</div>
+        </div>
+        <div class="an-chip">
+          <div class="an-chip-val" style="color:#EF476F">${data.stuckStudents?.length || 0}</div>
+          <div class="an-chip-label">Застряли</div>
+        </div>
+      </div>`;
+
+      // Lesson progress bars
+      if (data.lessons?.length) {
+        html += `<div class="an-lessons-title">Прохождение по урокам</div>`;
+        data.lessons.forEach(l => {
+          html += `<div class="an-lesson-row">
+            <div class="an-lesson-name" title="${esc(l.title)}">${esc(l.title)}</div>
+            <div class="an-lesson-bar"><div class="an-lesson-fill" style="width:${l.pct}%"></div></div>
+            <div class="an-lesson-pct">${l.pct}%</div>
+          </div>`;
+        });
+      }
+
+      // Stuck students
+      if (data.stuckStudents?.length) {
+        html += `<div class="an-stuck-section">
+          <div class="an-stuck-title"><i data-lucide="alert-triangle" style="width:13px;height:13px"></i> Ученики, которые застряли</div>`;
+        data.stuckStudents.forEach(s => {
+          const initials = (s.name || '??').split(' ').slice(0,2).map(w => w[0]?.toUpperCase() || '').join('');
+          const ago = s.lastActivity ? fmtTime(s.lastActivity) : '';
+          html += `<div class="an-stuck-item">
+            <div class="an-stuck-avatar">${esc(initials)}</div>
+            <div class="an-stuck-info">
+              <div class="an-stuck-name">${esc(s.name)}</div>
+              <div class="an-stuck-detail">
+                Застрял на: <b>${esc(s.stuckLessonTitle || '—')}</b> · Прогресс: ${s.pct}%
+                ${ago ? ' · Последняя активность: ' + ago : ''}
+              </div>
+            </div>
+          </div>`;
+        });
+        html += `</div>`;
+      }
+
+      // Students table (collapsed by default)
+      if (data.students?.length) {
+        html += `<div class="an-students-section">
+          <button class="an-students-toggle" onclick="toggleStudentsTable()">
+            <i data-lucide="users" style="width:13px;height:13px"></i>
+            Все ученики (${data.students.length})
+            <i data-lucide="chevron-down" style="width:13px;height:13px" id="an-students-chevron"></i>
+          </button>
+          <div id="an-students-wrap" style="display:${_studentsExpanded ? 'block' : 'none'}">
+            <table class="an-students-table">
+              <thead><tr>
+                <th>Ученик</th><th>Пройдено</th><th>Прогресс</th><th>Статус</th>
+              </tr></thead>
+              <tbody>`;
+        data.students.forEach(s => {
+          const cls = s.pct >= 80 ? 'an-pct-high' : s.pct >= 40 ? 'an-pct-mid' : 'an-pct-low';
+          const status = s.pct >= 100 ? '<svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg> Завершил'
+            : s.stuck ? '<svg class="ic" viewBox="0 0 24 24"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg> Застрял'
+            : s.doneCount > 0 ? 'В процессе' : 'Не начал';
+          html += `<tr>
+            <td>${esc(s.name)}</td>
+            <td>${s.doneCount} / ${data.totalLessons}</td>
+            <td><span class="an-pct-badge ${cls}">${s.pct}%</span></td>
+            <td>${status}</td>
+          </tr>`;
+        });
+        html += `</tbody></table></div></div>`;
+      }
+
+      body.innerHTML = html;
+      lucide.createIcons();
+    } catch (e) {
+      body.innerHTML = '<div style="text-align:center;padding:20px;color:#8898AA;font-size:0.84rem">Ошибка загрузки аналитики</div>';
+    }
+  }
+
+  function toggleStudentsTable() {
+    const wrap = document.getElementById('an-students-wrap');
+    const chev = document.getElementById('an-students-chevron');
+    if (!wrap) return;
+    _studentsExpanded = !_studentsExpanded;
+    wrap.style.display = _studentsExpanded ? 'block' : 'none';
+    if (chev) chev.style.transform = _studentsExpanded ? 'rotate(180deg)' : '';
+  }
+
+  /* ── edit course modal ── */
+  function openEditModal() {
+    if (!course) return;
+    document.getElementById('ec-title').value   = course.title || '';
+    document.getElementById('ec-desc').value     = course.description || '';
+    document.getElementById('ec-emoji').value    = course.coverEmoji || '';
+    document.getElementById('ec-subject').value  = course.subjectSlug || '';
+    document.getElementById('edit-course-modal').classList.add('open');
+    setTimeout(() => document.getElementById('ec-title').focus(), 50);
+  }
+  function closeEditModal() {
+    document.getElementById('edit-course-modal').classList.remove('open');
+  }
+  async function doEditCourse() {
+    const btn = document.getElementById('btn-do-edit-course');
+    btn.disabled = true;
+    try {
+      await LS.api('/api/courses/' + courseId, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          title:       document.getElementById('ec-title').value.trim(),
+          description: document.getElementById('ec-desc').value.trim(),
+          coverEmoji:  document.getElementById('ec-emoji').value.trim(),
+          subjectSlug: document.getElementById('ec-subject').value || null,
+        }),
+      });
+      closeEditModal();
+      loadCourse();
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+    finally { btn.disabled = false; }
+  }
+
+  /* ── toggle publish ── */
+  async function togglePublish() {
+    try {
+      await LS.api('/api/courses/' + courseId, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ isPublished: !course.isPublished }),
+      });
+      loadCourse();
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+
+  /* ── edit section ── */
+  async function editSection(sectionId, currentTitle) {
+    const newTitle = prompt('Название раздела:', currentTitle);
+    if (!newTitle || newTitle.trim() === currentTitle) return;
+    try {
+      await LS.api('/api/courses/' + courseId + '/sections/' + sectionId, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ title: newTitle.trim() }),
+      });
+      loadCourse();
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+
+  /* ── delete section ── */
+  async function deleteSection(sectionId, sectionTitle) {
+    const ok = await LS.confirm('Удалить раздел «' + sectionTitle + '»? Уроки останутся без раздела.', { title:'Удаление раздела', confirmText:'Удалить', danger:true });
+    if (!ok) return;
+    try {
+      await LS.api('/api/courses/' + courseId + '/sections/' + sectionId, { method: 'DELETE' });
+      loadCourse();
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+
+  /* ── delete course ── */
+  async function deleteCourse() {
+    const ok = await LS.confirm('Удалить курс «' + esc(course?.title || '') + '» и все его уроки?', { title:'Удаление курса', confirmText:'Удалить', danger:true });
+    if (!ok) return;
+    try {
+      await LS.api('/api/courses/' + courseId, { method: 'DELETE' });
+      location.href = '/theory';
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+
+  /* ── delete lesson ── */
+  async function deleteLesson(e, lessonId, lessonTitle) {
+    e.preventDefault();
+    e.stopPropagation();
+    const ok = await LS.confirm('Удалить урок «' + esc(lessonTitle) + '»?', { title:'Удаление урока', confirmText:'Удалить', danger:true });
+    if (!ok) return;
+    try {
+      await LS.api('/api/lessons/' + lessonId, { method: 'DELETE' });
+      loadCourse();
+    } catch (e2) { LS.toast(e2.message || 'Ошибка', 'error'); }
+  }
+
+  /* ── duplicate course ── */
+  async function duplicateCourse() {
+    if (!await LS.confirm('Создать копию курса «' + esc(course?.title || '') + '»?', { title: 'Дублирование', confirmText: 'Создать копию' })) return;
+    try {
+      const res = await LS.api('/api/courses/' + courseId + '/duplicate', { method: 'POST' });
+      location.href = '/course?id=' + res.id;
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+
+  /* ── add section modal ── */
+  function openAddSectionModal() {
+    document.getElementById('as-title').value = '';
+    document.getElementById('add-section-modal').classList.add('open');
+    setTimeout(() => document.getElementById('as-title').focus(), 50);
+  }
+  function closeAddSectionModal() {
+    document.getElementById('add-section-modal').classList.remove('open');
+  }
+  async function doAddSection() {
+    const title = document.getElementById('as-title').value.trim();
+    if (!title) { document.getElementById('as-title').focus(); return; }
+    const btn = document.getElementById('btn-do-add-section');
+    btn.disabled = true;
+    try {
+      await LS.api('/api/courses/' + courseId + '/sections', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ title, orderIndex: (course?.sections?.length || 0) }),
+      });
+      closeAddSectionModal();
+      loadCourse();
+    } catch (e) {
+      LS.toast(e.message || 'Ошибка', 'error');
+    } finally { btn.disabled = false; }
+  }
+  document.getElementById('as-title').addEventListener('keydown', e => {
+    if (e.key === 'Enter') doAddSection();
+  });
+
+  /* ── add lesson modal ── */
+  function openAddLessonModal() {
+    document.getElementById('al-title').value = '';
+    document.getElementById('add-lesson-modal').classList.add('open');
+    setTimeout(() => document.getElementById('al-title').focus(), 50);
+  }
+  function closeAddLessonModal() {
+    document.getElementById('add-lesson-modal').classList.remove('open');
+  }
+  async function doAddLesson() {
+    const title = document.getElementById('al-title').value.trim();
+    if (!title) { document.getElementById('al-title').focus(); return; }
+    const btn = document.getElementById('btn-do-add-lesson');
+    btn.disabled = true;
+    try {
+      const res = await LS.api('/api/lessons', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ courseId: parseInt(courseId), title }),
+      });
+      closeAddLessonModal();
+      location.href = '/lesson-editor?id=' + res.id;
+    } catch (e) {
+      LS.toast(e.message || 'Ошибка', 'error');
+    } finally { btn.disabled = false; }
+  }
+  document.getElementById('al-title').addEventListener('keydown', e => {
+    if (e.key === 'Enter') doAddLesson();
+  });
+
+  /* ── save course as template ── */
+  function openSaveCourseTplModal() {
+    if (!course) return;
+    document.getElementById('ct-title').value = course.title || '';
+    document.getElementById('ct-desc').value  = course.description || '';
+    document.getElementById('save-course-tpl-modal').classList.add('open');
+    setTimeout(() => document.getElementById('ct-title').focus(), 50);
+  }
+  function closeSaveCourseTplModal() {
+    document.getElementById('save-course-tpl-modal').classList.remove('open');
+  }
+  async function doSaveCourseTpl() {
+    const title = document.getElementById('ct-title').value.trim();
+    if (!title) { document.getElementById('ct-title').focus(); return; }
+    const btn = document.getElementById('btn-do-save-ct');
+    btn.disabled = true;
+    try {
+      await LS.saveCourseTemplate({
+        title,
+        description: document.getElementById('ct-desc').value.trim(),
+        category: document.getElementById('ct-cat').value,
+        subject_slug: course.subjectSlug || null,
+        courseId: parseInt(courseId),
+      });
+      closeSaveCourseTplModal();
+      LS.toast('Шаблон курса сохранён', 'success');
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+    finally { btn.disabled = false; }
+  }
+
+  loadCourse();
+</script>
+
+<!-- Save course template modal -->
+<div class="modal-overlay" id="save-course-tpl-modal" onclick="if(event.target===this)closeSaveCourseTplModal()">
+  <div class="modal">
+    <div class="modal-title">Сохранить курс как шаблон</div>
+    <div class="form-group">
+      <label class="form-label">Название шаблона</label>
+      <input class="form-input" id="ct-title" placeholder="Название шаблона" />
+    </div>
+    <div class="form-group">
+      <label class="form-label">Описание</label>
+      <textarea class="form-input" id="ct-desc" rows="2" placeholder="Краткое описание" style="resize:vertical"></textarea>
+    </div>
+    <div class="form-group">
+      <label class="form-label">Категория</label>
+      <select class="form-input" id="ct-cat">
+        <option value="general">Общее</option>
+        <option value="lecture">Лекционный курс</option>
+        <option value="practice">Практикум</option>
+        <option value="exam">Подготовка к экзамену</option>
+      </select>
+    </div>
+    <div class="modal-footer">
+      <button class="btn-cancel" onclick="closeSaveCourseTplModal()">Отмена</button>
+      <button class="btn-primary" id="btn-do-save-ct" onclick="doSaveCourseTpl()">Сохранить</button>
+    </div>
+  </div>
+</div>
+
+<script src="/js/notifications.js"></script>
+<script src="/js/search.js"></script>
+<script src="/js/mobile.js"></script>
+</body>
+</html>
diff --git a/frontend/crossword.html b/frontend/crossword.html
new file mode 100644
index 0000000..caa3420
--- /dev/null
+++ b/frontend/crossword.html
@@ -0,0 +1,829 @@
+<!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" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" crossorigin="anonymous" />
+  <style>
+    .sb-content { padding: 0; }
+
+    .cw-wrap {
+      min-height: 100vh;
+      padding: 28px 24px 60px;
+      max-width: 1100px; margin: 0 auto; width: 100%;
+    }
+
+    /* ── Header ── */
+    .cw-header { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
+    .cw-icon {
+      width:52px; height:52px; border-radius:14px; flex-shrink:0;
+      background: linear-gradient(135deg,rgba(6,214,224,.2),rgba(155,93,229,.2));
+      border:1.5px solid rgba(255,255,255,.1);
+      display:flex; align-items:center; justify-content:center;
+    }
+    .cw-icon svg { width:26px; height:26px; stroke:#06D6E0; stroke-width:1.8; fill:none; }
+    .cw-title { font-family:'Unbounded',sans-serif; font-size:1.3rem; font-weight:800; letter-spacing:-.02em; }
+    .cw-sub   { font-size:.82rem; color:var(--text-2); margin-top:2px; }
+    .cw-header-right { margin-left:auto; display:flex; align-items:center; gap:8px; }
+
+    /* ── Subject filter ── */
+    .cw-filter { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
+    .cw-pill {
+      padding:6px 16px; border-radius:99px; border:1.5px solid rgba(255,255,255,.12);
+      font-size:.8rem; font-weight:600; cursor:pointer; transition:all .15s;
+      background:transparent; color:var(--text-2);
+    }
+    .cw-pill:hover  { border-color:rgba(6,214,224,.4); color:#06D6E0; }
+    .cw-pill.active { background:rgba(6,214,224,.15); border-color:#06D6E0; color:#06D6E0; }
+
+    /* ── Main layout ── */
+    .cw-main { display:flex; gap:20px; align-items:flex-start; }
+
+    /* ── Grid ── */
+    .cw-grid-wrap {
+      background:var(--surface); border:1.5px solid var(--border);
+      border-radius:16px; padding:14px; flex-shrink:0;
+      max-width:480px;
+      box-shadow: var(--shadow);
+    }
+    .cw-grid { display:inline-grid; gap:2px; }
+    .cw-cell {
+      width:30px; height:30px;
+      border-radius:5px;
+      position:relative; cursor:pointer;
+      display:flex; align-items:center; justify-content:center;
+      font-size:13px; font-weight:700;
+      font-family:'Manrope',sans-serif; text-transform:uppercase;
+      transition: background .1s, border-color .1s;
+      user-select:none;
+    }
+    .cw-cell.black { background:rgba(15,23,42,.1); cursor:default; }
+    .cw-cell.white {
+      background:#fff;
+      border:1.5px solid rgba(15,23,42,.22);
+      color:var(--text);
+      box-shadow:0 1px 3px rgba(15,23,42,.08);
+    }
+    .cw-cell.white:hover { background:rgba(6,214,224,.12); border-color:rgba(6,214,224,.5); }
+    .cw-cell.selected    { background:rgba(6,214,224,.25) !important; border-color:#06D6E0 !important; }
+    .cw-cell.highlighted { background:rgba(6,214,224,.1); border-color:rgba(6,214,224,.35); }
+    .cw-cell.correct { background:rgba(56,217,90,.2)  !important; border-color:#38D95A !important; color:#1a7a40 !important; }
+    .cw-cell.wrong   { background:rgba(249,65,68,.15) !important; border-color:#F94144 !important; color:#c0392b !important; }
+
+    .cw-num {
+      position:absolute; top:2px; left:2px;
+      font-size:7px; font-weight:800; color:var(--text-2);
+      line-height:1; pointer-events:none;
+    }
+    .cw-letter { pointer-events:none; }
+
+    /* ── Clues panel ── */
+    .cw-clues {
+      flex:1; min-width:0;
+      background:var(--surface); border:1.5px solid var(--border);
+      border-radius:16px; padding:14px 16px;
+      max-height:260px; overflow-y:auto;
+      box-shadow: var(--shadow);
+    }
+    .cw-clues-title {
+      font-family:'Unbounded',sans-serif; font-size:.78rem; font-weight:800;
+      color:var(--text-2); text-transform:uppercase; letter-spacing:.05em;
+      margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.08);
+    }
+    .cw-clue-item {
+      display:flex; gap:8px; align-items:flex-start;
+      padding:7px 8px; border-radius:8px; cursor:pointer;
+      transition: background .1s;
+      margin-bottom:3px;
+    }
+    .cw-clue-item:hover { background:rgba(255,255,255,.05); }
+    .cw-clue-item.active { background:rgba(6,214,224,.12); }
+    .cw-clue-num {
+      font-family:'Unbounded',sans-serif; font-size:.7rem; font-weight:800;
+      color:#06D6E0; flex-shrink:0; min-width:18px; padding-top:1px;
+    }
+    .cw-clue-text { font-size:.82rem; color:var(--text); line-height:1.5; }
+    .cw-clue-meta { font-size:.72rem; color:var(--text-2); margin-top:2px; }
+    .cw-clue-done { text-decoration:line-through; opacity:.5; }
+
+    /* ── Controls ── */
+    .cw-controls {
+      display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; align-items:center;
+    }
+    .cw-btn {
+      padding:8px 18px; border-radius:99px;
+      border:1.5px solid rgba(255,255,255,.15);
+      font-family:'Manrope',sans-serif; font-size:.82rem; font-weight:700;
+      cursor:pointer; transition:all .15s; color:var(--text); background:transparent;
+      display:flex; align-items:center; gap:6px;
+    }
+    .cw-btn:hover { background:rgba(255,255,255,.08); }
+    .cw-btn.primary { background:#06D6E0; border-color:#06D6E0; color:#0d1117; }
+    .cw-btn.primary:hover { background:#04b8c0; }
+    .cw-btn.danger  { border-color:rgba(249,65,68,.4); color:#F94144; }
+    .cw-btn.danger:hover  { background:rgba(249,65,68,.1); }
+    .cw-btn svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; }
+
+    .cw-progress {
+      margin-left:auto; font-size:.82rem; color:var(--text-2); font-weight:600;
+    }
+    .cw-progress span { color:#06D6E0; font-family:'Unbounded',sans-serif; font-weight:800; }
+
+    /* ── Result overlay ── */
+    .cw-result {
+      position:fixed; inset:0; z-index:200;
+      background:rgba(0,0,0,.7); backdrop-filter:blur(8px);
+      display:none; align-items:center; justify-content:center;
+    }
+    .cw-result.visible { display:flex; }
+    .cw-result-card {
+      background:var(--surface); border:1.5px solid rgba(255,255,255,.12);
+      border-radius:24px; padding:36px 40px; text-align:center; max-width:420px;
+      animation: resIn .4s cubic-bezier(.34,1.56,.64,1);
+    }
+    @keyframes resIn { from{opacity:0;transform:scale(.7)} to{opacity:1;transform:scale(1)} }
+    .cw-res-icon { width:64px; height:64px; margin:0 auto 12px; }
+    .cw-res-icon svg { width:64px; height:64px; }
+    .cw-res-title { font-family:'Unbounded',sans-serif; font-size:1.4rem; font-weight:800; margin-bottom:8px; }
+    .cw-res-sub   { font-size:.88rem; color:var(--text-2); margin-bottom:20px; }
+    .cw-res-xp    { font-family:'Unbounded',sans-serif; font-size:1.1rem; font-weight:800; color:#F9C74F; margin-bottom:24px; }
+    .cw-res-actions { display:flex; gap:10px; justify-content:center; }
+
+    /* ── Loading / empty ── */
+    .cw-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:60px; color:var(--text-2); }
+    .cw-loading-spin {
+      width:40px; height:40px; border-radius:50%;
+      border:3px solid rgba(6,214,224,.15); border-top-color:#06D6E0;
+      animation: spin .8s linear infinite;
+    }
+    @keyframes spin { to { transform:rotate(360deg); } }
+
+    /* ── Toast ── */
+    .cw-toast {
+      position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(80px);
+      background:var(--surface); border:1.5px solid rgba(255,255,255,.15);
+      border-radius:12px; padding:10px 20px;
+      font-size:.84rem; font-weight:600; color:var(--text);
+      transition:transform .3s cubic-bezier(.34,1.56,.64,1);
+      z-index:300; white-space:nowrap;
+    }
+    .cw-toast.show { transform:translateX(-50%) translateY(0); }
+
+    @media (max-width:768px) {
+      .cw-main { flex-direction:column; }
+      .cw-clues { max-height:300px; }
+      .cw-grid-wrap { max-width:100%; }
+    }
+  </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="sbl-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="sbl-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>
+      <span class="sb-link active"><i data-lucide="grid-3x3" class="sb-icon"></i><span class="sb-lbl">Кроссворд</span></span>
+      <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>
+      <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="sbl-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>
+    </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>
+          <span class="sb-logout" style="pointer-events:none">Мой профиль</span>
+        </div>
+      </a>
+    </div>
+  </aside>
+  <div class="notif-drop" id="notif-drop"></div>
+
+  <div class="sb-content">
+    <div class="cw-wrap">
+
+      <div class="cw-header">
+        <div class="cw-icon">
+          <svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
+        </div>
+        <div>
+          <div class="cw-title">Кроссворд</div>
+          <div class="cw-sub">Угадай биологические термины по вопросам</div>
+        </div>
+        <div class="cw-header-right">
+          <button class="cw-btn primary" id="btn-new-game" onclick="loadCrossword()">
+            <svg viewBox="0 0 24 24"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
+            Новый
+          </button>
+        </div>
+      </div>
+
+      <!-- Subject filter -->
+      <div class="cw-filter" id="cw-filter">
+        <button class="cw-pill active" data-slug="" onclick="setSubject(this,'')">Все предметы</button>
+        <button class="cw-pill" data-slug="bio"  onclick="setSubject(this,'bio')">Биология</button>
+        <button class="cw-pill" data-slug="chem" onclick="setSubject(this,'chem')">Химия</button>
+        <button class="cw-pill" data-slug="math" onclick="setSubject(this,'math')">Математика</button>
+        <button class="cw-pill" data-slug="phys" onclick="setSubject(this,'phys')">Физика</button>
+      </div>
+
+      <!-- Controls -->
+      <div class="cw-controls" id="cw-controls" style="display:none">
+        <button class="cw-btn" id="btn-check" onclick="checkAnswers()">
+          <svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
+          Проверить
+        </button>
+        <button class="cw-btn" id="btn-reveal" onclick="revealSelected()">
+          <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+          Открыть слово
+        </button>
+        <button class="cw-btn danger" id="btn-give-up" onclick="giveUp()">
+          <svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+          Сдаться
+        </button>
+        <div class="cw-progress">Угадано: <span id="cw-solved">0</span>/<span id="cw-total">0</span></div>
+      </div>
+
+      <!-- Main content -->
+      <div id="cw-loading" class="cw-loading">
+        <div class="cw-loading-spin"></div>
+        <div>Генерируем кроссворд…</div>
+      </div>
+
+      <div class="cw-main" id="cw-main" style="display:none">
+        <div class="cw-grid-wrap">
+          <div class="cw-grid" id="cw-grid"></div>
+        </div>
+        <div style="flex:1; min-width:0; display:flex; flex-direction:column; gap:12px;">
+          <div class="cw-clues" id="cw-clues-across">
+            <div class="cw-clues-title"><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> По горизонтали</div>
+            <div id="clues-across-list"></div>
+          </div>
+          <div class="cw-clues" id="cw-clues-down">
+            <div class="cw-clues-title"><svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> По вертикали</div>
+            <div id="clues-down-list"></div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</div>
+
+<!-- Result overlay -->
+<div class="cw-result" id="cw-result">
+  <div class="cw-result-card">
+    <div class="cw-res-icon" id="res-icon"></div>
+    <div class="cw-res-title" id="res-title"></div>
+    <div class="cw-res-sub"   id="res-sub"></div>
+    <div class="cw-res-xp"   id="res-xp" style="display:none"></div>
+    <div class="cw-res-actions">
+      <button class="cw-btn primary" onclick="loadCrossword(); closeResult()">
+        <svg viewBox="0 0 24 24" style="width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
+        Новый кроссворд
+      </button>
+      <button class="cw-btn" onclick="closeResult()">Остаться</button>
+    </div>
+  </div>
+</div>
+
+<!-- Toast -->
+<div class="cw-toast" id="cw-toast"></div>
+
+<script src="/js/api.js"></script>
+<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="https://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+<script>
+/* ── State (must be before the IIFE to avoid TDZ) ── */
+let _data = null;
+let _userGrid = [];
+let _revealed = new Set();
+let _sel = { r: -1, c: -1, dir: 'across' };
+let _hintsUsed = 0;
+let _solved = new Set();
+let _finished = false;
+let _subjectSlug = '';
+
+(async () => {
+  if (!LS.requireAuth()) return;
+  const user = LS.getUser();
+  LS.applyRoleSidebar(user);
+  if (user) {
+    document.getElementById('nav-avatar').textContent =
+      (user.name||'LS').split(' ').slice(0,2).map(w=>w[0]?.toUpperCase()||'').join('')||'LS';
+    document.getElementById('nav-user').textContent = user.name || '—';
+    if (user.role === 'admin')
+      document.getElementById('sbl-admin').style.display = '';
+    LS.showBoardIfAllowed();
+    if (user.role !== 'student') {
+      document.getElementById('sbl-classes').style.display = '';
+    }
+  }
+  LS.sidebar?.init();
+  lucide.createIcons();
+  // Feature gate
+  const feats = await LS.loadFeatures();
+  if (feats.crossword === false) {
+    document.getElementById('cw-loading').innerHTML =
+      '<div style="color:var(--text-2);text-align:center">Кроссворд отключён администратором.</div>';
+    LS.hideDisabledFeatures();
+    return;
+  }
+  LS.hideDisabledFeatures();
+  await loadCrossword();
+})();
+
+/* ── Load ── */
+async function loadCrossword() {
+  _finished = false;
+  _data = null;
+  _userGrid = [];
+  _revealed = new Set();
+  _solved = new Set();
+  _hintsUsed = 0;
+  _sel = { r: -1, c: -1, dir: 'across' };
+
+  document.getElementById('cw-loading').style.display = '';
+  document.getElementById('cw-main').style.display = 'none';
+  document.getElementById('cw-controls').style.display = 'none';
+
+  const qs = _subjectSlug ? `?subject_slug=${_subjectSlug}` : '';
+  const data = await LS.api(`/api/games/crossword/generate${qs}`).catch(() => null);
+
+  if (!data || !data.grid) {
+    document.getElementById('cw-loading').innerHTML =
+      '<div style="color:var(--text-2);text-align:center">Недостаточно тем для кроссворда.<br>Попробуйте другой предмет.</div>';
+    return;
+  }
+
+  _data = data;
+  _userGrid = data.grid.map(row => row.map(cell => cell === null ? null : ''));
+
+  document.getElementById('cw-loading').style.display = 'none';
+  document.getElementById('cw-main').style.display = '';
+  document.getElementById('cw-controls').style.display = '';
+
+  renderGrid();
+  renderClues();
+  updateProgress();
+}
+
+function setSubject(el, slug) {
+  document.querySelectorAll('.cw-pill').forEach(p => p.classList.remove('active'));
+  el.classList.add('active');
+  _subjectSlug = slug;
+  loadCrossword();
+}
+
+/* ── Render grid ── */
+function renderGrid() {
+  if (!_data) return;
+  const { grid, words } = _data;
+  const rows = grid.length, cols = grid[0].length;
+
+  // Build number map
+  const numMap = {};
+  for (const w of words) numMap[`${w.row},${w.col}`] = w.num;
+
+  // Dynamic cell size: fit grid in 452px (480px wrap − 28px padding)
+  const isMobile = window.innerWidth <= 768;
+  const maxPx = isMobile ? Math.min(window.innerWidth - 40, 420) : 452;
+  const cs    = Math.max(18, Math.min(32, Math.floor((maxPx - 4) / Math.max(cols, rows) - 2)));
+  const fs    = Math.round(cs * 0.44);   // letter font-size
+  const ns    = Math.max(7, Math.round(cs * 0.24)); // number font-size
+
+  const container = document.getElementById('cw-grid');
+  container.style.gridTemplateColumns = `repeat(${cols}, ${cs}px)`;
+  container.innerHTML = '';
+
+  for (let r = 0; r < rows; r++) {
+    for (let c = 0; c < cols; c++) {
+      const cell = document.createElement('div');
+      cell.className = grid[r][c] === null ? 'cw-cell black' : 'cw-cell white';
+      cell.dataset.r = r;
+      cell.dataset.c = c;
+      cell.style.width  = cs + 'px';
+      cell.style.height = cs + 'px';
+      cell.style.fontSize = fs + 'px';
+      if (grid[r][c] !== null) {
+        const num = numMap[`${r},${c}`];
+        if (num) {
+          const n = document.createElement('span');
+          n.className = 'cw-num';
+          n.textContent = num;
+          n.style.fontSize = ns + 'px';
+          cell.appendChild(n);
+        }
+        const ltr = document.createElement('span');
+        ltr.className = 'cw-letter';
+        ltr.id = `cell-${r}-${c}`;
+        ltr.textContent = _userGrid[r][c] || '';
+        cell.appendChild(ltr);
+        cell.addEventListener('click', () => onCellClick(r, c));
+      }
+      container.appendChild(cell);
+    }
+  }
+
+  document.addEventListener('keydown', onKeyDown);
+}
+
+function renderClues() {
+  const { across, down } = _data;
+  const buildList = (words, container) => {
+    container.innerHTML = '';
+    for (const w of words) {
+      const item = document.createElement('div');
+      item.className = 'cw-clue-item';
+      item.id = `clue-${w.dir}-${w.num}`;
+      item.dataset.num = w.num;
+      item.dataset.dir = w.dir;
+      item.onclick = () => selectWord(w);
+      item.innerHTML = `
+        <span class="cw-clue-num">${w.num}</span>
+        <div>
+          <div class="cw-clue-text">${escHtml(w.clue)}</div>
+          <div class="cw-clue-meta">${escHtml(w.subjectName)} · ${w.word.length} букв</div>
+        </div>`;
+      container.appendChild(item);
+    }
+  };
+  buildList(across, document.getElementById('clues-across-list'));
+  buildList(down, document.getElementById('clues-down-list'));
+
+  if (window.renderMathInElement) {
+    const mathOpts = {
+      delimiters: [
+        { left: '$$', right: '$$', display: true },
+        { left: '$',  right: '$',  display: false },
+        { left: '\\(', right: '\\)', display: false },
+        { left: '\\[', right: '\\]', display: true },
+      ],
+      throwOnError: false,
+    };
+    renderMathInElement(document.getElementById('clues-across-list'), mathOpts);
+    renderMathInElement(document.getElementById('clues-down-list'), mathOpts);
+  }
+}
+
+function escHtml(s) {
+  return (s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+}
+
+/* ── Selection ── */
+function _findWordAt(r, c, dir) {
+  return _data.words.find(w =>
+    w.dir === dir &&
+    (dir === 'across'
+      ? w.row === r && c >= w.col && c < w.col + w.word.length
+      : w.col === c && r >= w.row && r < w.row + w.word.length)
+  ) || null;
+}
+
+function onCellClick(r, c) {
+  if (_data.grid[r][c] === null || _finished) return;
+  if (_sel.r === r && _sel.c === c) {
+    // Toggle direction — only if there's actually a word in the other direction
+    const other = _sel.dir === 'across' ? 'down' : 'across';
+    if (_findWordAt(r, c, other)) _sel.dir = other;
+  } else {
+    _sel.r = r; _sel.c = c;
+    // Auto-pick direction: keep current if valid, otherwise try the other
+    if (!_findWordAt(r, c, _sel.dir)) {
+      const other = _sel.dir === 'across' ? 'down' : 'across';
+      if (_findWordAt(r, c, other)) _sel.dir = other;
+    }
+  }
+  updateHighlights();
+  updateClueHighlight();
+}
+
+function selectWord(word) {
+  _sel.r = word.row; _sel.c = word.col; _sel.dir = word.dir;
+  updateHighlights();
+  updateClueHighlight();
+}
+
+function updateHighlights() {
+  // Clear all highlights
+  document.querySelectorAll('.cw-cell.highlighted, .cw-cell.selected').forEach(el => {
+    el.classList.remove('highlighted', 'selected');
+  });
+  if (_sel.r < 0) return;
+
+  // Find the word that contains the selected cell in the current direction
+  const word = _findWordAt(_sel.r, _sel.c, _sel.dir);
+
+  if (word) {
+    for (let i = 0; i < word.word.length; i++) {
+      const wr = word.dir === 'across' ? word.row : word.row + i;
+      const wc = word.dir === 'across' ? word.col + i : word.col;
+      const el = getCellEl(wr, wc);
+      if (el) el.classList.add('highlighted');
+    }
+  }
+
+  const selEl = getCellEl(_sel.r, _sel.c);
+  if (selEl) { selEl.classList.remove('highlighted'); selEl.classList.add('selected'); }
+}
+
+function updateClueHighlight() {
+  document.querySelectorAll('.cw-clue-item.active').forEach(el => el.classList.remove('active'));
+  if (_sel.r < 0) return;
+  const word = _findWordAt(_sel.r, _sel.c, _sel.dir);
+  if (word) {
+    const el = document.getElementById(`clue-${word.dir}-${word.num}`);
+    if (el) { el.classList.add('active'); el.scrollIntoView({ block: 'nearest' }); }
+  }
+}
+
+function getCellEl(r, c) {
+  return document.querySelector(`.cw-cell[data-r="${r}"][data-c="${c}"]`);
+}
+
+/* ── Keyboard input ── */
+function onKeyDown(e) {
+  if (_finished || _sel.r < 0) return;
+  const { r, c, dir } = _sel;
+
+  if (e.key === 'Tab') {
+    e.preventDefault();
+    const words = _data.words.filter(w => w.dir === dir);
+    const cur = words.find(w =>
+      dir === 'across'
+        ? w.row === r && c >= w.col && c < w.col + w.word.length
+        : w.col === c && r >= w.row && r < w.row + w.word.length
+    );
+    const idx = cur ? words.indexOf(cur) : -1;
+    const next = words[(idx + (e.shiftKey ? -1 : 1) + words.length) % words.length];
+    if (next) { _sel.r = next.row; _sel.c = next.col; updateHighlights(); updateClueHighlight(); }
+    return;
+  }
+
+  if (e.key === 'ArrowRight') { _sel.dir = 'across'; _sel.r = r; moveCursor(0, 1); return; }
+  if (e.key === 'ArrowLeft')  { _sel.dir = 'across'; _sel.r = r; moveCursor(0,-1); return; }
+  if (e.key === 'ArrowDown')  { _sel.dir = 'down';   _sel.c = c; moveCursor(1, 0); return; }
+  if (e.key === 'ArrowUp')    { _sel.dir = 'down';   _sel.c = c; moveCursor(-1,0); return; }
+
+  if (e.key === 'Backspace') {
+    if (_userGrid[r][c]) {
+      _userGrid[r][c] = '';
+      updateCellDisplay(r, c);
+      removeCellState(r, c);
+    } else {
+      moveCursor(dir === 'across' ? 0 : -1, dir === 'across' ? -1 : 0);
+      const { r: nr, c: nc } = _sel;
+      if (_userGrid[nr]?.[nc] !== undefined && _userGrid[nr][nc] !== null) {
+        _userGrid[nr][nc] = '';
+        updateCellDisplay(nr, nc);
+        removeCellState(nr, nc);
+      }
+    }
+    return;
+  }
+
+  // Letter key
+  const ch = e.key.toUpperCase();
+  if (/^[А-ЯЁA-Z]$/.test(ch) && !e.ctrlKey && !e.metaKey) {
+    e.preventDefault();
+    if (_data.grid[r][c] === null) return;
+    _userGrid[r][c] = ch;
+    updateCellDisplay(r, c);
+    removeCellState(r, c);
+    // Advance cursor
+    moveCursor(dir === 'across' ? 0 : 1, dir === 'across' ? 1 : 0);
+    // Auto-check word completion
+    checkWordCompletion();
+  }
+}
+
+function moveCursor(dr, dc) {
+  let nr = _sel.r + dr, nc = _sel.c + dc;
+  // Skip null/out-of-bounds cells
+  while (nr >= 0 && nc >= 0 && nr < _data.grid.length && nc < _data.grid[0].length && _data.grid[nr][nc] === null) {
+    nr += dr; nc += dc;
+  }
+  if (nr >= 0 && nc >= 0 && nr < _data.grid.length && nc < _data.grid[0].length && _data.grid[nr][nc] !== null) {
+    _sel.r = nr; _sel.c = nc;
+  }
+  updateHighlights();
+  updateClueHighlight();
+}
+
+function updateCellDisplay(r, c) {
+  const el = document.getElementById(`cell-${r}-${c}`);
+  if (el) el.textContent = _userGrid[r][c] || '';
+}
+
+function removeCellState(r, c) {
+  const el = getCellEl(r, c);
+  if (el) { el.classList.remove('correct', 'wrong'); }
+}
+
+/* ── Auto-check word ── */
+function checkWordCompletion() {
+  for (const w of _data.words) {
+    if (_solved.has(`${w.dir}-${w.num}`)) continue;
+    let complete = true;
+    for (let i = 0; i < w.word.length; i++) {
+      const wr = w.dir === 'across' ? w.row : w.row + i;
+      const wc = w.dir === 'across' ? w.col + i : w.col;
+      if (!_userGrid[wr][wc]) { complete = false; break; }
+    }
+    if (!complete) continue;
+    // Check if correct
+    let correct = true;
+    for (let i = 0; i < w.word.length; i++) {
+      const wr = w.dir === 'across' ? w.row : w.row + i;
+      const wc = w.dir === 'across' ? w.col + i : w.col;
+      if (_userGrid[wr][wc] !== w.word[i]) { correct = false; break; }
+    }
+    if (correct) {
+      _solved.add(`${w.dir}-${w.num}`);
+      markWord(w, 'correct');
+      updateProgress();
+      showToast(`<svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg> Слово #${w.num} угадано!`);
+      const clueEl = document.getElementById(`clue-${w.dir}-${w.num}`);
+      if (clueEl) clueEl.querySelector('.cw-clue-text')?.classList.add('cw-clue-done');
+      if (_solved.size === _data.words.length) setTimeout(finishGame, 400);
+    }
+  }
+}
+
+function markWord(word, state) {
+  for (let i = 0; i < word.word.length; i++) {
+    const wr = word.dir === 'across' ? word.row : word.row + i;
+    const wc = word.dir === 'across' ? word.col + i : word.col;
+    const el = getCellEl(wr, wc);
+    if (el) { el.classList.remove('correct','wrong'); el.classList.add(state); }
+  }
+}
+
+function updateProgress() {
+  document.getElementById('cw-solved').textContent = _solved.size;
+  document.getElementById('cw-total').textContent  = _data?.words.length || 0;
+}
+
+/* ── Check answers ── */
+function checkAnswers() {
+  if (!_data || _finished) return;
+  let anyWrong = false;
+  let filledCount = 0;
+  let emptyCount = 0;
+  for (const w of _data.words) {
+    if (_solved.has(`${w.dir}-${w.num}`)) continue;
+    for (let i = 0; i < w.word.length; i++) {
+      const wr = w.dir === 'across' ? w.row : w.row + i;
+      const wc = w.dir === 'across' ? w.col + i : w.col;
+      const val = _userGrid[wr][wc];
+      if (!val) { emptyCount++; continue; }
+      filledCount++;
+      const el = getCellEl(wr, wc);
+      if (!el) continue;
+      el.classList.remove('correct','wrong');
+      if (val === w.word[i]) el.classList.add('correct');
+      else { el.classList.add('wrong'); anyWrong = true; }
+    }
+  }
+  if (filledCount === 0) showToast('Сначала введите ответы');
+  else if (anyWrong) showToast('Есть ошибки — выделены красным');
+  else if (emptyCount > 0) showToast(`Верно! Осталось заполнить ${emptyCount} клеток`);
+  else showToast('Всё верно! <svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>');
+}
+
+/* ── Reveal selected word ── */
+function revealSelected() {
+  if (!_data || _finished) return;
+  if (_sel.r < 0) { showToast('Выберите клетку в кроссворде'); return; }
+  let word = _findWordAt(_sel.r, _sel.c, _sel.dir);
+  if (!word) {
+    const otherDir = _sel.dir === 'across' ? 'down' : 'across';
+    word = _findWordAt(_sel.r, _sel.c, otherDir);
+    if (word) _sel.dir = otherDir;
+  }
+  if (!word) { showToast('Выберите клетку со словом'); return; }
+  if (_solved.has(`${word.dir}-${word.num}`)) { showToast('Слово уже угадано'); return; }
+
+  _hintsUsed++;
+  _revealed.add(`${word.dir}-${word.num}`);
+  for (let i = 0; i < word.word.length; i++) {
+    const wr = word.dir === 'across' ? word.row : word.row + i;
+    const wc = word.dir === 'across' ? word.col + i : word.col;
+    _userGrid[wr][wc] = word.word[i];
+    updateCellDisplay(wr, wc);
+    const el = getCellEl(wr, wc);
+    if (el) { el.classList.remove('wrong','correct'); el.classList.add('correct'); }
+  }
+  _solved.add(`${word.dir}-${word.num}`);
+  updateProgress();
+  const clueEl = document.getElementById(`clue-${word.dir}-${word.num}`);
+  if (clueEl) clueEl.querySelector('.cw-clue-text')?.classList.add('cw-clue-done');
+  if (_solved.size === _data.words.length) setTimeout(finishGame, 300);
+}
+
+/* ── Give up ── */
+function giveUp() {
+  if (!_data || _finished) return;
+  _finished = true;
+  // Reveal all words
+  for (const w of _data.words) {
+    if (_solved.has(`${w.dir}-${w.num}`)) continue;
+    for (let i = 0; i < w.word.length; i++) {
+      const wr = w.dir === 'across' ? w.row : w.row + i;
+      const wc = w.dir === 'across' ? w.col + i : w.col;
+      _userGrid[wr][wc] = w.word[i];
+      updateCellDisplay(wr, wc);
+      const el = getCellEl(wr, wc);
+      if (el) { el.classList.remove('wrong','selected','highlighted'); el.classList.add('correct'); }
+    }
+  }
+  LS.api('/api/games/crossword/complete', { method: 'POST', body: JSON.stringify({ completed: false, hintsUsed: _hintsUsed }) }).catch(()=>{});
+  showResult(false, _solved.size);
+}
+
+/* ── Finish ── */
+async function finishGame() {
+  _finished = true;
+  const resp = await LS.api('/api/games/crossword/complete', {
+    method: 'POST',
+    body: JSON.stringify({ completed: true, hintsUsed: _hintsUsed }),
+  }).catch(() => ({ xp: 0 }));
+  showResult(true, _data.words.length, resp.xp || 0);
+}
+
+function showResult(won, solvedCount, xp = 0) {
+  const resIcon  = document.getElementById('res-icon');
+  const resTitle = document.getElementById('res-title');
+  const resSub   = document.getElementById('res-sub');
+  const resXP    = document.getElementById('res-xp');
+
+  if (won) {
+    resIcon.innerHTML = `<svg viewBox="0 0 24 24" style="stroke:#F9C74F;fill:none;stroke-width:1.5">
+      <path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/>
+      <path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/>
+      <path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/>
+      <path d="M18 2H6v7a6 6 0 0 0 12 0V2z"/></svg>`;
+    resTitle.textContent = 'Кроссворд решён!';
+    resSub.textContent   = _hintsUsed ? `Использовано подсказок: ${_hintsUsed}` : 'Без единой подсказки!';
+    if (xp) { resXP.textContent = `+${xp} XP`; resXP.style.display = ''; }
+  } else {
+    resIcon.innerHTML = `<svg viewBox="0 0 24 24" style="stroke:#F94144;fill:none;stroke-width:1.5">
+      <circle cx="12" cy="12" r="10"/><path d="M16 16s-1.5-2-4-2-4 2-4 2"/>
+      <line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>`;
+    resTitle.textContent = 'Не получилось';
+    resSub.textContent   = `Угадано: ${solvedCount} из ${_data?.words.length || 0} слов`;
+    resXP.style.display  = 'none';
+  }
+  document.getElementById('cw-result').classList.add('visible');
+}
+
+function closeResult() {
+  document.getElementById('cw-result').classList.remove('visible');
+}
+
+/* ── Toast ── */
+function showToast(msg) {
+  const el = document.getElementById('cw-toast');
+  el.innerHTML = msg;
+  el.classList.add('show');
+  clearTimeout(el._t);
+  el._t = setTimeout(() => el.classList.remove('show'), 2500);
+}
+</script>
+<script src="/js/notifications.js"></script>
+<script src="/js/search.js"></script>
+<script src="/js/mobile.js"></script>
+</body>
+</html>
diff --git a/frontend/css/ls.css b/frontend/css/ls.css
new file mode 100644
index 0000000..9cfbf7e
--- /dev/null
+++ b/frontend/css/ls.css
@@ -0,0 +1,957 @@
+/* ═══════════════════════════════════════════════════════
+   LearnSpace — Shared Design System  /css/ls.css
+   ═══════════════════════════════════════════════════════ */
+
+/* ── Reset ── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+/* ── Design tokens ── */
+:root {
+  --bg:       #EEF2FF;
+  --surface:  rgba(255,255,255,0.82);
+  --border:   rgba(15,23,42,0.10);
+  --border-h: rgba(15,23,42,0.20);
+  --text:     #0F172A;
+  --text-2:   #3D4F6B;
+  --text-3:   #8898AA;
+
+  --violet: #9B5DE5;
+  --cyan:   #06D6E0;
+  --green:  #06D664;
+  --pink:   #F15BB5;
+  --amber:  #FFB347;
+
+  --grad-1: linear-gradient(135deg, #06D6E0, #9B5DE5);
+
+  --r-lg:   20px;
+  --r-pill: 999px;
+
+  --blur:   blur(20px);
+  /* two-layer shadow: crisp + ambient */
+  --shadow:   0 2px 8px rgba(15,23,42,0.08), 0 8px 40px rgba(15,23,42,0.10);
+  --shadow-h: 0 4px 16px rgba(15,23,42,0.12), 0 16px 56px rgba(15,23,42,0.13);
+
+  --tr: 0.22s ease;
+}
+
+/* ── Body + dot-grid ── */
+body {
+  font-family: 'Manrope', sans-serif;
+  background: var(--bg);
+  background-image: radial-gradient(circle, rgba(15,23,42,0.055) 1px, transparent 1px);
+  background-size: 22px 22px;
+  min-height: 100vh;
+  color: var(--text);
+}
+
+/* ── Custom scrollbar ── */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: rgba(155,93,229,0.35); border-radius: 99px; }
+::-webkit-scrollbar-thumb:hover { background: rgba(155,93,229,0.60); }
+
+/* ── Focus ring ── */
+:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
+
+/* ── Navbar ── */
+.nav {
+  position: sticky; top: 0; z-index: 100;
+  padding: 10px 24px;
+  display: flex; align-items: center; justify-content: space-between;
+  background: rgba(238,242,255,0.90);
+  backdrop-filter: var(--blur);
+  border-bottom: 1px solid var(--border);
+}
+.nav-logo {
+  font-family: 'Unbounded', sans-serif;
+  font-size: 1rem; font-weight: 800;
+  color: var(--text); text-decoration: none;
+  letter-spacing: -0.01em;
+}
+.nav-logo span {
+  background: var(--grad-1);
+  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.nav-right { display: flex; align-items: center; gap: 10px; }
+
+/* nav user avatar chip */
+.nav-user-chip {
+  display: flex; align-items: center; gap: 8px;
+  padding: 4px 12px 4px 4px;
+  background: rgba(155,93,229,0.07);
+  border: 1.5px solid rgba(155,93,229,0.18);
+  border-radius: var(--r-pill);
+}
+.nav-avatar {
+  width: 28px; height: 28px;
+  border-radius: 50%;
+  background: var(--grad-1);
+  display: flex; align-items: center; justify-content: center;
+  font-family: 'Unbounded', sans-serif;
+  font-size: 0.62rem; font-weight: 800; color: #fff;
+  flex-shrink: 0;
+}
+.nav-user-name {
+  font-size: 0.78rem; font-weight: 600; color: var(--text-2);
+  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+
+/* legacy .nav-user (plain text) */
+.nav-user { font-size: 0.85rem; color: var(--text-2); }
+
+.btn-nav {
+  padding: 6px 16px;
+  border: 1.5px solid var(--border-h);
+  border-radius: var(--r-pill);
+  background: transparent;
+  font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 600;
+  color: var(--text-3);
+  cursor: pointer; text-decoration: none; display: inline-block;
+  transition: all var(--tr);
+}
+.btn-nav:hover { border-color: var(--violet); color: var(--violet); }
+.nav-active {
+  background: rgba(155,93,229,0.08) !important;
+  border-color: var(--violet) !important;
+  color: var(--violet) !important;
+  cursor: default; pointer-events: none;
+}
+
+/* ── Shimmer btn-primary ── */
+.btn-primary {
+  position: relative; overflow: hidden;
+  padding: 10px 26px;
+  border: none; border-radius: var(--r-pill);
+  background: var(--grad-1);
+  color: #fff;
+  font-family: 'Manrope', sans-serif; font-size: 0.88rem; font-weight: 700;
+  cursor: pointer;
+  transition: transform var(--tr), box-shadow var(--tr);
+  box-shadow: 0 2px 14px rgba(155,93,229,0.30);
+}
+.btn-primary::after {
+  content: '';
+  position: absolute; top: 0; left: -120%;
+  width: 80%; height: 100%;
+  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.28), transparent);
+  transform: skewX(-15deg);
+  transition: left 0.55s ease;
+}
+.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(155,93,229,0.40); }
+.btn-primary:hover::after { left: 160%; }
+.btn-primary:active { transform: translateY(0); }
+
+/* ── Ghost & danger buttons ── */
+.btn-ghost {
+  padding: 8px 18px;
+  border: 1.5px solid var(--border-h); border-radius: var(--r-pill);
+  background: transparent;
+  font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 600;
+  color: var(--text-2); cursor: pointer;
+  transition: all var(--tr);
+}
+.btn-ghost:hover { border-color: var(--violet); color: var(--violet); }
+
+.btn-danger {
+  padding: 6px 14px;
+  border: 1.5px solid rgba(241,91,181,0.35); border-radius: var(--r-pill);
+  background: rgba(241,91,181,0.06);
+  font-family: 'Manrope', sans-serif; font-size: 0.76rem; font-weight: 600;
+  color: #c0306a; cursor: pointer;
+  transition: all var(--tr);
+}
+.btn-danger:hover { border-color: var(--pink); background: rgba(241,91,181,0.12); color: #a0204a; }
+
+/* ── Form inputs ── */
+.form-input {
+  width: 100%;
+  padding: 10px 14px;
+  border: 1.5px solid var(--border-h); border-radius: 12px;
+  background: rgba(255,255,255,0.70);
+  font-family: 'Manrope', sans-serif; font-size: 0.88rem; color: var(--text);
+  transition: border-color var(--tr), box-shadow var(--tr);
+}
+.form-input:focus {
+  outline: none;
+  border-color: var(--violet);
+  box-shadow: 0 0 0 3px rgba(155,93,229,0.15);
+}
+
+/* ── Badges ── */
+.badge {
+  display: inline-flex; align-items: center;
+  padding: 2px 9px;
+  border-radius: var(--r-pill);
+  font-size: 0.72rem; font-weight: 700;
+}
+.badge-violet { background: rgba(155,93,229,0.12); color: var(--violet); }
+.badge-cyan   { background: rgba(6,214,224,0.12);  color: #05aab3; }
+.badge-green  { background: rgba(6,214,100,0.12);  color: #059950; }
+.badge-pink   { background: rgba(241,91,181,0.12); color: #c0306a; }
+.badge-amber  { background: rgba(255,179,71,0.15); color: #b06a00; }
+
+/* ── Modal ── */
+.modal-overlay {
+  position: fixed; inset: 0; z-index: 1000;
+  background: rgba(15,23,42,0.48);
+  backdrop-filter: blur(6px);
+  display: flex; align-items: center; justify-content: center;
+  padding: 20px;
+  animation: fadeIn 0.18s ease;
+}
+.modal {
+  background: #fff;
+  border-radius: 24px;
+  padding: 32px 28px;
+  max-width: 520px; width: 100%;
+  box-shadow: var(--shadow-h);
+  animation: fadeUp 0.22s ease;
+}
+.modal-title {
+  font-family: 'Unbounded', sans-serif;
+  font-size: 1.05rem; font-weight: 800;
+  margin-bottom: 20px;
+}
+.modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; }
+
+/* ── Spinner ── */
+.spinner {
+  width: 32px; height: 32px;
+  border: 3px solid var(--border);
+  border-top-color: var(--violet);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+  margin: 30px auto; display: block;
+}
+
+/* ── Empty state ── */
+.empty {
+  text-align: center; padding: 40px 20px;
+  color: var(--text-3); font-size: 0.88rem;
+}
+.empty-icon { font-size: 2.4rem; margin-bottom: 12px; }
+
+/* ── Error text ── */
+.error { color: var(--pink); font-size: 0.85rem; padding: 12px 0; }
+
+/* ── Keyframes ── */
+@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
+@keyframes fadeUp  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes spin    { to { transform: rotate(360deg); } }
+@keyframes shimmer {
+  0%   { left: -120%; }
+  100% { left: 160%; }
+}
+
+/* ══════════════════════════════════════════
+   SIDEBAR LAYOUT
+══════════════════════════════════════════ */
+.app-layout {
+  display: flex;
+  min-height: 100vh;
+}
+
+.app-layout > .sidebar {
+  width: 230px;
+  flex-shrink: 0;
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  background: rgba(238,242,255,0.94);
+  backdrop-filter: blur(28px);
+  border-right: 1.5px solid var(--border);
+  padding: 0 10px 16px;
+  z-index: 50;
+  scrollbar-width: none;
+}
+.app-layout > .sidebar::-webkit-scrollbar { display: none; }
+
+.sb-brand {
+  display: flex;
+  align-items: center;
+  padding: 20px 12px 14px;
+  margin-bottom: 4px;
+}
+
+.sb-logo {
+  font-family: 'Unbounded', sans-serif;
+  font-size: 1.05rem;
+  font-weight: 800;
+  color: var(--text);
+  text-decoration: none;
+}
+.sb-logo span {
+  background: var(--grad-1);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.sb-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1;
+}
+
+.sb-link, a.sb-link, button.sb-link {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 9px 12px;
+  border-radius: 12px;
+  text-decoration: none;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-3);
+  transition: all var(--tr);
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  width: 100%;
+  text-align: left;
+  font-family: 'Manrope', sans-serif;
+  position: relative;
+  white-space: nowrap;
+}
+.sb-link:hover {
+  background: rgba(155,93,229,0.07);
+  color: var(--text);
+}
+.sb-link.active {
+  background: rgba(155,93,229,0.10);
+  color: var(--violet);
+  font-weight: 700;
+}
+.sb-link.active::before {
+  content: '';
+  position: absolute;
+  left: 0; top: 5px; bottom: 5px;
+  width: 3px;
+  border-radius: 0 3px 3px 0;
+  background: var(--grad-1);
+}
+
+.sb-icon {
+  width: 18px;
+  height: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: inherit;
+}
+.sb-icon svg {
+  width: 18px;
+  height: 18px;
+  stroke-width: 1.85;
+}
+/* tab-icon: inline svg в табах и кнопках */
+.tab-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+.tab-icon svg {
+  width: 16px;
+  height: 16px;
+  stroke-width: 2;
+}
+/* stat-icon: иконки в карточках KPI */
+.stat-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.stat-icon svg {
+  width: 22px;
+  height: 22px;
+  stroke-width: 1.75;
+}
+
+.sb-divider {
+  height: 1px;
+  background: var(--border);
+  margin: 8px 2px;
+}
+
+.sb-badge {
+  min-width: 18px;
+  height: 18px;
+  border-radius: 99px;
+  background: var(--pink);
+  color: #fff;
+  font-size: 0.6rem;
+  font-weight: 700;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 4px;
+  margin-left: auto;
+}
+
+.sb-foot {
+  padding-top: 10px;
+  border-top: 1px solid var(--border);
+  margin-top: 6px;
+}
+
+.sb-user-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border-radius: 12px;
+  transition: background var(--tr);
+}
+.sb-user-row:hover { background: rgba(155,93,229,0.05); }
+
+.sb-avatar {
+  width: 32px; height: 32px;
+  border-radius: 10px;
+  background: var(--grad-1);
+  display: flex; align-items: center; justify-content: center;
+  font-family: 'Unbounded', sans-serif;
+  font-size: 0.6rem; font-weight: 800; color: #fff;
+  flex-shrink: 0;
+}
+
+.sb-user-info { flex: 1; min-width: 0; }
+.sb-user-name {
+  font-size: 0.78rem; font-weight: 700; color: var(--text);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  margin-bottom: 1px;
+}
+.sb-logout {
+  font-size: 0.68rem; color: var(--text-3);
+  background: none; border: none; cursor: pointer; padding: 0;
+  font-family: 'Manrope', sans-serif; font-weight: 600;
+  transition: color var(--tr);
+}
+.sb-logout:hover { color: var(--pink); }
+
+.sb-content {
+  flex: 1;
+  min-width: 0;
+  overflow-x: hidden;
+}
+
+/* notif drop anchored relative to sidebar */
+.notif-drop {
+  position: fixed;
+  left: 246px;
+  width: 320px;
+  max-height: 420px;
+  overflow-y: auto;
+  background: #fff;
+  border: 1.5px solid var(--border-h);
+  border-radius: 16px;
+  box-shadow: 0 12px 48px rgba(15,23,42,0.14);
+  z-index: 1000;
+  display: none;
+  font-size: 0.82rem;
+  color: var(--text-2);
+}
+.notif-drop.open { display: block; }
+.notif-drop-header { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px 9px; border-bottom: 1px solid var(--border); }
+.notif-drop-title  { font-family: 'Unbounded', sans-serif; font-size: 0.77rem; font-weight: 800; }
+.notif-read-all    { background: none; border: none; font-size: 0.72rem; color: var(--violet); cursor: pointer; font-family: 'Manrope', sans-serif; font-weight: 600; padding: 0; }
+.notif-read-all:hover { text-decoration: underline; }
+.notif-item        { display: flex; gap: 9px; padding: 10px 14px; border-bottom: 1px solid var(--border); cursor: pointer; text-decoration: none; color: inherit; transition: background var(--tr); }
+.notif-item:last-child { border-bottom: none; }
+.notif-item:hover  { background: rgba(155,93,229,0.04); }
+.notif-item.unread { background: rgba(155,93,229,0.06); }
+.notif-dot         { width: 7px; height: 7px; border-radius: 50%; background: var(--violet); flex-shrink: 0; margin-top: 5px; }
+.notif-dot.read    { background: transparent; border: 1.5px solid var(--border-h); }
+.notif-msg         { font-size: 0.79rem; line-height: 1.4; flex: 1; }
+.notif-time        { font-size: 0.68rem; color: var(--text-3); margin-top: 2px; }
+.notif-empty       { padding: 26px 16px; text-align: center; color: var(--text-3); font-size: 0.83rem; }
+
+/* ══════════════════════════════════════════
+   PAGE TRANSITIONS (View Transitions API)
+══════════════════════════════════════════ */
+@view-transition { navigation: auto; }
+
+/* Shared element: sidebar stays fixed, only main content transitions */
+.sb-content { view-transition-name: main-content; }
+.sidebar     { view-transition-name: sidebar; }
+
+/* Sidebar: no animation — stays in place */
+::view-transition-old(sidebar),
+::view-transition-new(sidebar) { animation: none; }
+
+/* Main content: slide + fade */
+::view-transition-old(main-content) {
+  animation: 180ms cubic-bezier(.4,0,1,1) both vt-slide-out;
+}
+::view-transition-new(main-content) {
+  animation: 260ms cubic-bezier(0,.5,.3,1) both vt-slide-in;
+}
+
+/* Fallback for pages without sidebar (login, test-run, test-result) */
+::view-transition-old(root) {
+  animation: 160ms cubic-bezier(.4,0,1,1) both vt-fade-out;
+}
+::view-transition-new(root) {
+  animation: 240ms cubic-bezier(0,.5,.3,1) both vt-fade-in;
+}
+
+@keyframes vt-slide-out {
+  from { opacity: 1; transform: translateX(0)  scale(1); }
+  to   { opacity: 0; transform: translateX(-16px) scale(.98); }
+}
+@keyframes vt-slide-in {
+  from { opacity: 0; transform: translateX(20px) scale(.98); }
+  to   { opacity: 1; transform: translateX(0)  scale(1); }
+}
+@keyframes vt-fade-out {
+  from { opacity: 1; }
+  to   { opacity: 0; }
+}
+@keyframes vt-fade-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* ══════════════════════════════════════════
+   LOGIN PAGE SPLIT LAYOUT
+══════════════════════════════════════════ */
+.login-page {
+  display: block !important;
+  padding: 0 !important;
+}
+.login-layout {
+  display: flex;
+  min-height: 100vh;
+}
+
+.login-left {
+  flex: 1;
+  background: linear-gradient(145deg, #0f0c29 0%, #1a1547 40%, #24243e 100%);
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  padding: 60px 56px;
+}
+.login-left::before {
+  content: '';
+  position: absolute; inset: 0;
+  background-image: radial-gradient(circle, rgba(255,255,255,0.055) 1px, transparent 1px);
+  background-size: 22px 22px;
+  pointer-events: none;
+}
+.ll-blob1, .ll-blob2 { position: absolute; border-radius: 50%; pointer-events: none; }
+.ll-blob1 { width: 520px; height: 520px; background: radial-gradient(circle, rgba(155,93,229,0.32), transparent 70%); top: -160px; right: -100px; }
+.ll-blob2 { width: 380px; height: 380px; background: radial-gradient(circle, rgba(6,214,224,0.22), transparent 70%); bottom: -100px; left: 15%; }
+
+.ll-inner { position: relative; z-index: 1; max-width: 440px; }
+.ll-logo {
+  font-family: 'Unbounded', sans-serif;
+  font-size: 1.35rem; font-weight: 800;
+  color: #fff;
+  margin-bottom: 52px;
+}
+.ll-logo span {
+  background: linear-gradient(135deg, #06D6E0, #9B5DE5);
+  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.ll-headline {
+  font-family: 'Unbounded', sans-serif;
+  font-size: 1.75rem; font-weight: 800; line-height: 1.3;
+  color: #fff;
+  margin-bottom: 14px;
+  text-shadow: 0 2px 20px rgba(0,0,0,0.25);
+}
+.ll-tagline {
+  font-size: 0.88rem; color: rgba(255,255,255,0.58); font-weight: 500;
+  margin-bottom: 40px; line-height: 1.65;
+}
+.ll-features { display: flex; flex-direction: column; gap: 10px; }
+.ll-feat {
+  display: flex; align-items: center; gap: 12px;
+  font-size: 0.85rem; color: rgba(255,255,255,0.82); font-weight: 600;
+  padding: 10px 16px;
+  background: rgba(255,255,255,0.06);
+  border: 1px solid rgba(255,255,255,0.09);
+  border-radius: 12px;
+}
+.ll-feat-icon { font-size: 1rem; flex-shrink: 0; }
+
+.login-right {
+  width: 450px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 44px 40px;
+  background: #f4f6ff;
+}
+.login-right .auth-wrap {
+  width: 100%;
+  max-width: 100%;
+}
+
+@media (max-width: 840px) {
+  .login-layout { flex-direction: column; }
+  .login-left { padding: 40px 28px; min-height: 300px; }
+  .login-right { width: 100%; padding: 36px 24px; }
+  .ll-headline { font-size: 1.35rem; }
+}
+
+/* ══════════════════════════════════════════
+   A1: STAGGERED ENTRANCE ANIMATION
+══════════════════════════════════════════ */
+@keyframes cardIn {
+  from { opacity: 0; transform: translateY(18px) scale(0.97); }
+  to   { opacity: 1; transform: none; }
+}
+.stagger-item {
+  animation: cardIn 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) both;
+  animation-delay: calc(var(--i, 0) * 50ms);
+}
+
+/* ══════════════════════════════════════════
+   D1: SKELETON 2.0 — VIOLET SHIMMER
+══════════════════════════════════════════ */
+@keyframes ls-shimmer {
+  from { background-position: -600px 0; }
+  to   { background-position:  600px 0; }
+}
+.ls-sk {
+  background: linear-gradient(
+    90deg,
+    rgba(155,93,229,0.06) 20%,
+    rgba(155,93,229,0.16) 40%,
+    rgba(255,255,255,0.7)  50%,
+    rgba(155,93,229,0.16) 60%,
+    rgba(155,93,229,0.06) 80%
+  ) !important;
+  background-size: 1200px 100% !important;
+  animation: ls-shimmer 1.8s infinite ease-in-out !important;
+}
+
+/* ══════════════════════════════════════════
+   C2: RICH EMPTY STATES
+══════════════════════════════════════════ */
+.rich-empty {
+  display: flex; flex-direction: column; align-items: center;
+  gap: 10px; padding: 52px 24px; text-align: center;
+  background: rgba(255,255,255,0.7);
+  border: 1.5px dashed rgba(155,93,229,0.22);
+  border-radius: 20px;
+  backdrop-filter: blur(12px);
+  animation: cardIn 0.4s ease both;
+}
+.rich-empty-svg { opacity: 0.7; }
+.rich-empty-title {
+  font-family: 'Unbounded', sans-serif;
+  font-size: 0.95rem; font-weight: 800; color: var(--text);
+  margin-top: 4px;
+}
+.rich-empty-sub {
+  font-size: 0.83rem; color: var(--text-3);
+  max-width: 290px; line-height: 1.62; margin-bottom: 2px;
+}
+.rich-empty-btn {
+  padding: 10px 26px;
+  background: var(--grad-1); color: #fff;
+  border: none; border-radius: 999px;
+  font-family: 'Manrope', sans-serif;
+  font-size: 0.84rem; font-weight: 700;
+  cursor: pointer; transition: all var(--tr);
+}
+.rich-empty-btn:hover { opacity: 0.88; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(155,93,229,0.3); }
+
+/* ══════════════════════════════════════════
+   C1: COLLAPSIBLE SIDEBAR
+══════════════════════════════════════════ */
+/* Smooth transition for sidebar width */
+.app-layout > .sidebar { transition: width 0.28s cubic-bezier(0.4,0,0.2,1); }
+
+/* Label text inside nav links — fades/collapses */
+.sb-lbl {
+  overflow: hidden;
+  max-width: 160px;
+  transition: max-width 0.25s ease, opacity 0.18s ease, margin 0.18s ease;
+  white-space: nowrap;
+  flex-shrink: 1;
+  min-width: 0;
+}
+
+/* Toggle button (chevron) */
+.sb-toggle {
+  width: 26px; height: 26px; border-radius: 50%;
+  background: rgba(255,255,255,0.85);
+  border: 1.5px solid var(--border-h);
+  display: inline-flex; align-items: center; justify-content: center;
+  cursor: pointer; flex-shrink: 0;
+  box-shadow: 0 1px 6px rgba(15,23,42,0.10);
+  transition: background var(--tr), border-color var(--tr), transform 0.28s ease;
+  padding: 0; margin-left: auto;
+}
+.sb-toggle:hover { background: var(--violet); color: #fff; border-color: var(--violet); }
+.sb-toggle svg { width: 13px; height: 13px; stroke-width: 2.5; }
+
+/* ── Collapsed state ── */
+.app-layout.sb-collapsed > .sidebar { width: 62px; padding: 0 6px 16px; }
+.app-layout.sb-collapsed .sb-brand  { padding: 20px 4px 14px; justify-content: center; }
+.app-layout.sb-collapsed .sb-logo   { display: none; }
+.app-layout.sb-collapsed .sb-lbl    { max-width: 0; opacity: 0; }
+.app-layout.sb-collapsed .sb-link   { justify-content: center; padding: 10px 0; gap: 0; }
+.app-layout.sb-collapsed .sb-badge  { display: none !important; }
+.app-layout.sb-collapsed .sb-user-info { display: none; }
+.app-layout.sb-collapsed .sb-user-row  { justify-content: center; padding: 8px 0; }
+.app-layout.sb-collapsed .sb-toggle { margin: 0; transform: rotate(180deg); }
+
+/* ══════════════════════════════════════════
+   GLOBAL SEARCH MODAL
+══════════════════════════════════════════ */
+.gs-overlay {
+  position: fixed; inset: 0; z-index: 9500;
+  background: rgba(15,23,42,0.45); backdrop-filter: blur(12px);
+  display: flex; align-items: flex-start; justify-content: center;
+  padding: 10vh 20px 20px; opacity: 0; pointer-events: none;
+  transition: opacity .18s ease;
+}
+.gs-overlay.open { opacity: 1; pointer-events: auto; }
+.gs-box {
+  width: 100%; max-width: 560px; background: #fff;
+  border-radius: 20px; box-shadow: 0 40px 100px rgba(15,23,42,0.28);
+  overflow: hidden; transform: scale(.96) translateY(-8px);
+  transition: transform .18s ease;
+}
+.gs-overlay.open .gs-box { transform: scale(1) translateY(0); }
+.gs-input-wrap {
+  display: flex; align-items: center; gap: 10px;
+  padding: 16px 20px; border-bottom: 1px solid rgba(15,23,42,0.08);
+}
+.gs-input-wrap svg { flex-shrink: 0; color: #8898AA; }
+.gs-input {
+  flex: 1; border: none; outline: none; font-family: 'Manrope', sans-serif;
+  font-size: 0.95rem; font-weight: 500; color: #0F172A; background: transparent;
+}
+.gs-input::placeholder { color: #B0BEC5; }
+.gs-kbd {
+  font-size: 0.65rem; font-weight: 700; color: #8898AA; background: rgba(15,23,42,0.06);
+  padding: 3px 7px; border-radius: 5px; line-height: 1;
+}
+.gs-results {
+  max-height: 380px; overflow-y: auto; padding: 8px;
+}
+.gs-empty {
+  text-align: center; padding: 40px 20px; color: #8898AA; font-size: 0.85rem;
+}
+.gs-group-label {
+  font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
+  letter-spacing: 0.06em; color: #8898AA; padding: 10px 12px 4px;
+}
+.gs-item {
+  display: flex; align-items: center; gap: 12px;
+  padding: 10px 12px; border-radius: 12px; cursor: pointer;
+  transition: background .12s;
+}
+.gs-item:hover, .gs-item.active { background: rgba(155,93,229,0.06); }
+.gs-item-icon {
+  width: 34px; height: 34px; border-radius: 9px;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 0.85rem; flex-shrink: 0;
+}
+.gs-icon-lesson   { background: rgba(155,93,229,0.1); color: #9B5DE5; }
+.gs-icon-course   { background: rgba(6,214,160,0.1);  color: #06D6A0; }
+.gs-icon-file     { background: rgba(6,214,224,0.1);  color: #06D6E0; }
+.gs-icon-question { background: rgba(245,158,11,0.1); color: #F59E0B; }
+.gs-item-body { flex: 1; min-width: 0; }
+.gs-item-title {
+  font-size: 0.85rem; font-weight: 600; color: #0F172A;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.gs-item-sub {
+  font-size: 0.7rem; color: #8898AA; margin-top: 1px;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.gs-item-arrow { color: #ccc; flex-shrink: 0; }
+
+/* ══════════════════════════════════════════
+   MOBILE TOPBAR
+══════════════════════════════════════════ */
+.mob-bar { display: none; }
+
+/* ══════════════════════════════════════════
+   RESPONSIVE — TABLET & MOBILE (≤ 768px)
+══════════════════════════════════════════ */
+@media (max-width: 768px) {
+  /* ── Mobile top bar ── */
+  .mob-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: fixed;
+    top: 0; left: 0; right: 0;
+    height: 56px;
+    padding: 0 14px;
+    background: rgba(238,242,255,0.95);
+    backdrop-filter: blur(20px);
+    border-bottom: 1px solid var(--border);
+    z-index: 150;
+    gap: 10px;
+  }
+  .mob-bar-logo {
+    font-family: 'Unbounded', sans-serif;
+    font-size: 0.9rem; font-weight: 800;
+    color: var(--text); text-decoration: none;
+    flex: 1;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  }
+  .mob-bar-logo span {
+    background: var(--grad-1);
+    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+  .mob-bar-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
+  .mob-icon-btn {
+    width: 36px; height: 36px;
+    border-radius: 10px;
+    background: transparent;
+    border: 1.5px solid var(--border-h);
+    display: flex; align-items: center; justify-content: center;
+    cursor: pointer;
+    transition: all var(--tr);
+    position: relative;
+    flex-shrink: 0;
+  }
+  .mob-icon-btn:hover { background: rgba(155,93,229,0.08); border-color: var(--violet); }
+  .mob-icon-btn svg { width: 17px; height: 17px; stroke: var(--text-2); stroke-width: 2; pointer-events: none; }
+
+  /* ── Sidebar becomes fixed drawer ── */
+  .app-layout { flex-direction: column; }
+  .app-layout > .sidebar {
+    position: fixed !important;
+    top: 0; left: 0;
+    height: 100vh !important;
+    width: 272px !important;
+    transform: translateX(-100%);
+    z-index: 200;
+    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s ease !important;
+    box-shadow: none !important;
+    padding-top: 0 !important;
+  }
+  .app-layout.sb-open > .sidebar {
+    transform: translateX(0) !important;
+    box-shadow: 8px 0 40px rgba(15,23,42,0.22) !important;
+  }
+
+  /* Backdrop overlay when drawer is open */
+  .sb-backdrop {
+    display: none;
+    position: fixed; inset: 0;
+    background: rgba(15,23,42,0.40);
+    z-index: 190;
+    backdrop-filter: blur(2px);
+    animation: fadeIn 0.2s ease;
+  }
+  .sb-backdrop.open { display: block; }
+
+  /* Hide desktop collapse toggle on mobile */
+  .sb-toggle { display: none !important; }
+
+  /* Content: full width, offset for topbar */
+  .sb-content { width: 100%; padding-top: 56px; }
+
+  /* Restore labels inside drawer on mobile (ignore collapsed state) */
+  .app-layout > .sidebar .sb-lbl { max-width: 160px !important; opacity: 1 !important; }
+  .app-layout > .sidebar .sb-logo { display: block !important; }
+  .app-layout > .sidebar .sb-link { justify-content: flex-start !important; padding: 9px 12px !important; gap: 10px !important; }
+  .app-layout > .sidebar .sb-user-info { display: block !important; }
+  .app-layout > .sidebar .sb-user-row { justify-content: flex-start !important; padding: 8px 10px !important; }
+  .app-layout > .sidebar .sb-badge { display: inline-flex !important; }
+  .app-layout > .sidebar .sb-brand { padding: 20px 12px 14px !important; justify-content: flex-start !important; }
+
+  /* ── Notification dropdown ── */
+  .notif-drop {
+    position: fixed !important;
+    left: auto !important;
+    right: 14px !important;
+    top: 60px !important;
+    width: min(360px, calc(100vw - 28px)) !important;
+  }
+
+  /* ── Modal: bottom sheet on mobile ── */
+  .modal-overlay {
+    align-items: flex-end;
+    padding: 0;
+  }
+  .modal {
+    max-width: 100% !important;
+    width: 100%;
+    border-radius: 22px 22px 0 0;
+    padding: 24px 20px calc(32px + env(safe-area-inset-bottom, 0px));
+    max-height: 90vh;
+    overflow-y: auto;
+  }
+
+  /* ── Safe area for fixed bottom elements ── */
+  .mob-bar {
+    padding-bottom: env(safe-area-inset-bottom, 0px);
+  }
+
+  /* ── Login page: handled by login.html inline styles ── */
+}
+
+/* ══════════════════════════════════════════
+   INLINE SVG ICONS  (.ic)
+══════════════════════════════════════════ */
+/* Replaces emoji / Unicode symbols throughout the UI */
+.ic {
+  display: inline-block;
+  width: 1em; height: 1em;
+  vertical-align: -0.15em;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  flex-shrink: 0;
+  overflow: visible;
+}
+/* Larger display icons (page headers, empty-state hints) */
+.page-header-icon .ic,
+.hint-icon .ic,
+.complete-icon .ic {
+  width: 1.1em; height: 1.1em;
+  stroke-width: 1.5;
+}
+
+/* ══════════════════════════════════════════
+   FEATURE FLAGS
+══════════════════════════════════════════ */
+/* Student without a class: hide leaderboard */
+body.no-class #lb-section { display: none !important; }
+
+body.no-gamification .gam-bar,
+body.no-gamification .lb-widget,
+body.no-gamification .achievements-section,
+body.no-gamification #tab-btn-achievements,
+body.no-gamification #tab-btn-shop,
+body.no-gamification #tab-achievements,
+body.no-gamification #tab-shop { display: none !important; }
+
+/* ══════════════════════════════════════════
+   RESPONSIVE — SMALL PHONES (≤ 480px)
+══════════════════════════════════════════ */
+@media (max-width: 480px) {
+  .mob-bar { padding: 0 12px; }
+  .modal { padding: 20px 16px 28px; }
+  .btn-primary { padding: 10px 20px; }
+  .filter-tabs { gap: 4px; }
+  .filter-tab  { padding: 6px 12px; font-size: 0.78rem; }
+}
diff --git a/frontend/dashboard.html b/frontend/dashboard.html
new file mode 100644
index 0000000..af446da
--- /dev/null
+++ b/frontend/dashboard.html
@@ -0,0 +1,3684 @@
+<!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" />
+  <style>
+    .container { max-width: 1600px; margin: 0 auto; padding: 24px 32px 100px; }
+
+    /* ── working area bg ── */
+    .sb-content { background: #f4f5f8; }
+
+    /* ── ZONE 1: Compact Header (sticky) ── */
+    .dash-header {
+      display: flex; align-items: center; gap: 18px;
+      height: 64px; padding: 0 28px;
+      background: rgba(255,255,255,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
+      border-bottom: 1px solid rgba(15,23,42,0.08);
+      position: sticky; top: 0; z-index: 90;
+    }
+    .dh-avatar {
+      width: 44px; height: 44px; border-radius: 50%;
+      background: linear-gradient(135deg, #9B5DE5, #06D6E0);
+      display: flex; align-items: center; justify-content: center;
+      font-family: 'Unbounded', sans-serif; font-size: 0.9rem; font-weight: 800; color: #fff;
+      flex-shrink: 0;
+    }
+    .dh-text { flex: 1; min-width: 0; }
+    .dh-greeting {
+      font-family: 'Unbounded', sans-serif; font-size: 1rem; font-weight: 800;
+      color: #0F172A; letter-spacing: -0.02em;
+      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+    }
+    .dh-sub { font-size: 0.78rem; color: #8898AA; font-weight: 500; margin-top: 2px; }
+    .dh-stats { display: flex; gap: 14px; flex-shrink: 0; }
+    .stat-ring { display: flex; flex-direction: column; align-items: center; gap: 2px; }
+    .stat-ring .sr-label { font-size: 0.62rem; color: #8898AA; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
+
+    /* ── ZONE 2: Action Banner + Cards ── */
+    .action-zone { margin-bottom: 22px; }
+    .action-banner {
+      border-radius: 16px; padding: 18px 24px;
+      display: flex; align-items: center; gap: 18px;
+      margin-bottom: 14px; color: #fff; text-decoration: none;
+    }
+    .action-banner.ab-urgent {
+      background: linear-gradient(135deg, #1a0a2e 0%, #5c1a3e 50%, #8b1a1a 100%);
+    }
+    .action-banner.ab-continue {
+      background: linear-gradient(135deg, #0a0818 0%, #1a1040 60%, #0d1f3c 100%);
+    }
+    .ab-icon { font-size: 1.6rem; flex-shrink: 0; }
+    .ab-body { flex: 1; min-width: 0; }
+    .ab-title { font-family: 'Unbounded', sans-serif; font-size: 0.88rem; font-weight: 800; margin-bottom: 4px; }
+    .ab-sub { font-size: 0.78rem; opacity: 0.7; }
+    .ab-countdown { text-align: right; flex-shrink: 0; }
+    .ab-countdown-val { font-family: 'Unbounded', sans-serif; font-size: 1.4rem; font-weight: 900; }
+    .ab-countdown-label { font-size: 0.68rem; opacity: 0.6; font-weight: 600; }
+    .ab-btn {
+      padding: 8px 22px; border: none; border-radius: 99px;
+      background: rgba(255,255,255,0.15); color: #fff; backdrop-filter: blur(8px);
+      font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 700;
+      cursor: pointer; transition: background 0.15s; white-space: nowrap; flex-shrink: 0;
+      text-decoration: none;
+    }
+    .ab-btn:hover { background: rgba(255,255,255,0.25); }
+    .action-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+    .ac-card {
+      display: flex; align-items: center; gap: 12px;
+      padding: 14px 16px; border-radius: 14px;
+      background: #fff; border: 1.5px solid rgba(15,23,42,0.07);
+      text-decoration: none; color: inherit; transition: all 0.15s;
+      box-shadow: 0 2px 8px rgba(15,23,42,0.04);
+    }
+    .ac-card:hover { border-color: rgba(155,93,229,0.25); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(15,23,42,0.08); }
+    .ac-emoji { font-size: 1.4rem; flex-shrink: 0; }
+    .ac-body { flex: 1; min-width: 0; }
+    .ac-title { font-size: 0.84rem; font-weight: 700; color: #0F172A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .ac-sub { font-size: 0.72rem; color: #8898AA; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .ac-badge { font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 800; color: var(--violet); flex-shrink: 0; }
+
+    /* ── ZONE 3: Three-Column Grid ── */
+    .main-grid {
+      display: grid;
+      grid-template-columns: 1.3fr 0.8fr 1fr;
+      gap: 22px;
+      margin-bottom: 22px;
+    }
+    .full-row { margin-bottom: 22px; }
+
+    .qa-btn {
+      display: flex; align-items: center; gap: 8px;
+      padding: 12px 20px; border-radius: 14px;
+      border: 1.5px solid rgba(15,23,42,0.08);
+      background: #fff; color: #0F172A;
+      font-family: 'Manrope', sans-serif; font-size: 0.84rem; font-weight: 700;
+      cursor: pointer; transition: all 0.18s; text-decoration: none;
+      box-shadow: 0 2px 8px rgba(15,23,42,0.04);
+    }
+    .qa-btn:hover { border-color: rgba(155,93,229,0.3); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(15,23,42,0.1); }
+
+    .widget {
+      background: #fff;
+      border: 1.5px solid rgba(15,23,42,0.07);
+      border-radius: 20px;
+      padding: 20px;
+      box-shadow: 0 2px 8px rgba(15,23,42,0.04);
+      transition: box-shadow 0.2s;
+    }
+    .widget:hover { box-shadow: 0 6px 24px rgba(15,23,42,0.08); }
+    .w-head {
+      display: flex; align-items: center; justify-content: space-between;
+      margin-bottom: 16px;
+    }
+    .w-title {
+      font-family: 'Unbounded', sans-serif; font-size: 0.72rem; font-weight: 800;
+      color: #8898AA; text-transform: uppercase; letter-spacing: 0.08em;
+      display: flex; align-items: center; gap: 8px;
+    }
+    .w-title::before {
+      content: ''; display: inline-block; width: 3px; height: 14px;
+      background: linear-gradient(180deg, #06D6E0, #9B5DE5);
+      border-radius: 99px; flex-shrink: 0;
+    }
+    .w-more {
+      font-size: 0.74rem; font-weight: 700; color: var(--violet);
+      text-decoration: none; cursor: pointer; background: none; border: none;
+      font-family: 'Manrope', sans-serif;
+    }
+    .w-more:hover { text-decoration: underline; }
+
+    /* ── last grades mini-list ── */
+    .grade-row {
+      display: flex; align-items: center; gap: 12px;
+      padding: 8px 0;
+      border-bottom: 1px solid rgba(15,23,42,0.05);
+    }
+    .grade-row:last-child { border-bottom: none; }
+    .grade-pct { font-family: 'Unbounded', sans-serif; font-size: 0.88rem; font-weight: 900; min-width: 42px; text-align: center; }
+    .grade-body { flex: 1; min-width: 0; }
+    .grade-subj { font-size: 0.82rem; font-weight: 700; color: #0F172A; }
+    .grade-date { font-size: 0.7rem; color: #8898AA; }
+
+    /* ── activity widget tabs ── */
+    .act-tabs { display: flex; gap: 4px; }
+    .act-tab {
+      padding: 3px 12px; border-radius: 99px; border: none;
+      font-family: 'Manrope', sans-serif; font-size: 0.68rem; font-weight: 700;
+      color: #8898AA; background: transparent; cursor: pointer; transition: all 0.15s;
+    }
+    .act-tab:hover { color: var(--violet); }
+    .act-tab.active { background: #0F172A; color: #fff; }
+    .act-scale-btns { display: flex; gap: 3px; }
+    .act-scale-btn {
+      padding: 2px 8px; border-radius: 6px; border: 1px solid rgba(15,23,42,0.08);
+      font-family: 'Manrope', sans-serif; font-size: 0.62rem; font-weight: 700;
+      color: #8898AA; background: transparent; cursor: pointer; transition: all 0.12s;
+    }
+    .act-scale-btn:hover { border-color: rgba(155,93,229,0.3); color: var(--violet); }
+    .act-scale-btn.active { background: rgba(155,93,229,0.08); border-color: rgba(155,93,229,0.25); color: var(--violet); }
+    .act-pane { display: none; }
+    .act-pane.visible { display: block; }
+
+    /* ── mini heatmap (redesigned) ── */
+    .hm-months { display: flex; margin-bottom: 2px; padding-left: 22px; }
+    .hm-month-label { font-size: 0.56rem; font-weight: 700; color: #8898AA; text-transform: uppercase; letter-spacing: 0.02em; overflow: hidden; white-space: nowrap; }
+    .hm-body { display: flex; gap: 0; }
+    .hm-weekdays { display: flex; flex-direction: column; gap: 2px; width: 22px; flex-shrink: 0; padding-top: 1px; }
+    .hm-wd { font-size: 0.5rem; font-weight: 700; color: #8898AA; height: 14px; line-height: 14px; }
+    .mini-heatmap { display: grid; grid-template-rows: repeat(7, 14px); grid-auto-flow: column; grid-auto-columns: 14px; gap: 2px; }
+    .mhm-cell {
+      width: 14px; height: 14px; border-radius: 50%; background: rgba(15,23,42,0.05);
+      cursor: pointer; transition: transform 0.12s, box-shadow 0.12s;
+      animation: hmCellIn 0.3s ease both;
+    }
+    .mhm-cell:hover { transform: scale(1.45); z-index: 2; position: relative; }
+    .mhm-cell.has-data:hover { box-shadow: 0 0 8px var(--cell-color, rgba(155,93,229,0.5)); }
+    @keyframes hmCellIn { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: scale(1); } }
+
+    /* Subject-colored cells */
+    .mhm-cell.s-bio  { --cell-color: rgba(155,93,229,0.85); }
+    .mhm-cell.s-chem { --cell-color: rgba(6,214,160,0.85); }
+    .mhm-cell.s-math { --cell-color: rgba(6,182,212,0.85); }
+    .mhm-cell.s-phys { --cell-color: rgba(245,158,11,0.85); }
+    .mhm-cell.s-mix  { --cell-color: rgba(155,93,229,0.6); }
+
+    /* Heatmap footer stats */
+    .hm-footer {
+      display: flex; align-items: center; gap: 14px; margin-top: 8px; padding-top: 8px;
+      border-top: 1px solid rgba(15,23,42,0.05);
+      font-size: 0.68rem; color: #8898AA; font-weight: 600; flex-wrap: wrap;
+    }
+    .hm-footer strong { color: #0F172A; font-weight: 800; }
+    .hm-legend { display: flex; align-items: center; gap: 4px; margin-left: auto; }
+    .hm-legend-dot { width: 10px; height: 10px; border-radius: 50%; }
+    .hm-legend-label { font-size: 0.58rem; }
+
+    /* Day popup */
+    .hm-day-popup {
+      position: fixed; z-index: 250; pointer-events: auto;
+      background: #fff; border: 1.5px solid rgba(15,23,42,0.1);
+      border-radius: 14px; padding: 14px 16px; min-width: 200px;
+      box-shadow: 0 12px 40px rgba(15,23,42,0.15);
+      font-family: 'Manrope', sans-serif;
+      animation: fadeIn 0.2s ease;
+    }
+    .hm-day-popup .hdp-date { font-size: 0.72rem; font-weight: 800; color: #0F172A; margin-bottom: 8px; }
+    .hm-day-popup .hdp-row {
+      display: flex; align-items: center; gap: 8px;
+      padding: 5px 0; border-bottom: 1px solid rgba(15,23,42,0.04);
+      font-size: 0.75rem;
+    }
+    .hm-day-popup .hdp-row:last-child { border-bottom: none; }
+    .hm-day-popup .hdp-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+    .hm-day-popup .hdp-subj { flex: 1; font-weight: 600; color: #0F172A; }
+    .hm-day-popup .hdp-score { font-family: 'Unbounded', sans-serif; font-size: 0.72rem; font-weight: 900; }
+    .hm-day-popup .hdp-mode { font-size: 0.66rem; color: #8898AA; }
+    .hm-day-popup .hdp-empty { font-size: 0.75rem; color: #8898AA; padding: 4px 0; }
+
+    /* Dark mode */
+    .app-layout.dark .act-tab.active { background: #E8ECF2; color: #0F172A; }
+    .app-layout.dark .act-scale-btn { border-color: rgba(255,255,255,0.08); color: #6B7A8E; }
+    .app-layout.dark .act-scale-btn.active { background: rgba(155,93,229,0.12); border-color: rgba(155,93,229,0.3); color: var(--violet); }
+    .app-layout.dark .mhm-cell { background: rgba(255,255,255,0.04); }
+    .app-layout.dark .hm-footer { border-color: rgba(255,255,255,0.06); }
+    .app-layout.dark .hm-footer strong { color: #E8ECF2; }
+    .app-layout.dark .hm-day-popup { background: #1A1D27; border-color: rgba(255,255,255,0.08); box-shadow: 0 12px 40px rgba(0,0,0,0.4); }
+    .app-layout.dark .hm-day-popup .hdp-date, .app-layout.dark .hm-day-popup .hdp-subj { color: #E8ECF2; }
+
+    /* ── continue reading banner ── */
+    .continue-card {
+      display: flex; align-items: center; gap: 14px;
+      padding: 14px 16px; border-radius: 14px;
+      background: linear-gradient(135deg, rgba(155,93,229,0.05), rgba(6,214,224,0.04));
+      border: 1px solid rgba(155,93,229,0.12); cursor: pointer;
+      transition: all 0.15s; text-decoration: none; color: inherit;
+    }
+    .continue-card:hover { border-color: rgba(155,93,229,0.3); transform: translateX(3px); }
+    .cont-emoji { font-size: 1.5rem; flex-shrink: 0; }
+    .cont-info { flex: 1; min-width: 0; }
+    .cont-title { font-size: 0.85rem; font-weight: 700; color: #0F172A; }
+    .cont-sub { font-size: 0.72rem; color: #8898AA; margin-top: 2px; }
+    .cont-pct { font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 800; color: var(--violet); }
+
+    /* ── subjects progress bars ── */
+    .subj-prog-row {
+      display: flex; align-items: center; gap: 14px;
+      padding: 10px 0; border-bottom: 1px solid rgba(15,23,42,0.05);
+    }
+    .subj-prog-row:last-child { border-bottom: none; }
+    .sp-name { font-size: 0.82rem; font-weight: 700; min-width: 90px; color: #0F172A; }
+    .sp-bar { flex: 1; height: 8px; border-radius: 99px; background: rgba(15,23,42,0.06); overflow: hidden; }
+    .sp-fill { height: 100%; border-radius: 99px; transition: width 0.8s cubic-bezier(.34,1.2,.64,1); }
+    .sp-pct { font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800; min-width: 40px; text-align: right; }
+
+    /* ── compact test cards (Column 2) ── */
+    .subj-mini-grid { display: flex; flex-direction: column; gap: 8px; }
+    .subj-mini-card {
+      display: flex; align-items: center; gap: 12px;
+      padding: 12px 14px; border-radius: 14px;
+      border: 1.5px solid rgba(15,23,42,0.07); background: #fff;
+      cursor: pointer; transition: all 0.18s;
+      box-shadow: 0 1px 4px rgba(15,23,42,0.04);
+    }
+    .subj-mini-card:hover { border-color: rgba(155,93,229,0.25); transform: translateX(3px); box-shadow: 0 6px 20px rgba(15,23,42,0.08); }
+    .smc-icon {
+      width: 38px; height: 38px; border-radius: 10px;
+      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
+      color: #fff;
+    }
+    .smc-icon svg, .smc-icon i { width: 20px; height: 20px; stroke: #fff; stroke-width: 1.8; }
+    .smc-body { flex: 1; min-width: 0; }
+    .smc-name { font-size: 0.86rem; font-weight: 700; color: #0F172A; }
+    .smc-meta { font-size: 0.72rem; color: #8898AA; margin-top: 2px; }
+    .smc-arrow { width: 18px; height: 18px; color: #8898AA; flex-shrink: 0; }
+
+    /* ── animations ── */
+    @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
+    @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
+
+    /* B4: Animated stat ring fill */
+    @keyframes ringFill { from { stroke-dasharray: 0 200; } }
+    .stat-ring svg circle:nth-child(2) { animation: ringFill 0.9s cubic-bezier(.34,1.2,.64,1) both; }
+    .stat-ring { animation: fadeIn 0.5s ease both; }
+    .stat-ring:nth-child(1) { animation-delay: 0.1s; }
+    .stat-ring:nth-child(2) { animation-delay: 0.2s; }
+    .stat-ring:nth-child(3) { animation-delay: 0.3s; }
+    .stat-ring:nth-child(4) { animation-delay: 0.4s; }
+
+    /* A4: Deadline gradient bar on assignment rows */
+    .asgn-row.urgent::after, .asgn-row.over::after {
+      content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
+      border-radius: 0 0 14px 14px;
+    }
+    .asgn-row { position: relative; overflow: hidden; }
+    .asgn-row.urgent::after { background: linear-gradient(90deg, #F59E0B, #E83A1E); }
+    .asgn-row.over::after { background: linear-gradient(90deg, #E83A1E, #9B1B30); }
+
+    /* A2: Skeleton shimmer for widgets */
+    .widget-skeleton { padding: 20px; }
+    .sk-line { height: 12px; border-radius: 6px; background: linear-gradient(90deg, rgba(15,23,42,0.06) 25%, rgba(15,23,42,0.1) 50%, rgba(15,23,42,0.06) 75%); background-size: 200% 100%; animation: skShimmer 1.5s ease infinite; margin-bottom: 10px; }
+    .sk-line:nth-child(1) { width: 65%; }
+    .sk-line:nth-child(2) { width: 85%; }
+    .sk-line:nth-child(3) { width: 50%; }
+    .sk-line.sk-tall { height: 40px; width: 100%; border-radius: 10px; }
+    @keyframes skShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
+
+    /* B3: Heatmap tooltip */
+    .hm-tip {
+      position: fixed; z-index: 200; pointer-events: none;
+      background: #0F172A; color: #fff; padding: 6px 12px; border-radius: 8px;
+      font-size: 0.72rem; font-weight: 600; font-family: 'Manrope', sans-serif;
+      box-shadow: 0 8px 24px rgba(0,0,0,0.25); white-space: nowrap;
+      opacity: 0; transition: opacity 0.15s;
+    }
+    .hm-tip.visible { opacity: 1; }
+
+    /* B2: Search assignments */
+    .assign-search {
+      width: 100%; padding: 8px 14px 8px 34px; border: 1.5px solid rgba(15,23,42,0.08);
+      border-radius: 10px; font-family: 'Manrope', sans-serif; font-size: 0.82rem;
+      color: #0F172A; background: #f8f9fc; transition: border-color 0.2s;
+      box-sizing: border-box; margin-bottom: 10px;
+    }
+    .assign-search:focus { outline: none; border-color: var(--violet); background: #fff; }
+    .assign-search-wrap { position: relative; }
+    .assign-search-wrap::before {
+      content: ''; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
+      width: 14px; height: 14px;
+      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238898AA' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/contain no-repeat;
+    }
+
+    /* B5: Deadline urgent toast */
+    .deadline-toast {
+      position: fixed; top: 12px; right: 12px; z-index: 300;
+      display: flex; align-items: center; gap: 12px;
+      padding: 14px 20px; border-radius: 14px;
+      background: linear-gradient(135deg, #2d0a0a, #4a1020);
+      color: #fff; box-shadow: 0 12px 40px rgba(0,0,0,0.3);
+      font-family: 'Manrope', sans-serif; font-size: 0.84rem; font-weight: 600;
+      animation: toastSlide 0.4s ease, toastSlide 0.4s ease 8s reverse forwards;
+      cursor: pointer;
+    }
+    .deadline-toast:hover { opacity: 0.9; }
+    @keyframes toastSlide { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
+    .dt-icon { font-size: 1.3rem; }
+    .dt-text { flex: 1; }
+    .dt-time { font-family: 'Unbounded', sans-serif; font-weight: 900; }
+    .dt-close { background: none; border: none; color: rgba(255,255,255,0.5); cursor: pointer; font-size: 1.2rem; padding: 0 0 0 8px; }
+
+    /* C2: Streak calendar */
+    .streak-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
+    .sc-day {
+      aspect-ratio: 1; border-radius: 6px; display: flex; align-items: center; justify-content: center;
+      font-size: 0.62rem; font-weight: 700; color: #8898AA; background: rgba(15,23,42,0.03);
+      transition: transform 0.12s;
+    }
+    .sc-day.today { border: 1.5px solid var(--violet); color: var(--violet); font-weight: 800; }
+    .sc-day.active { background: rgba(155,93,229,0.18); color: #7c3aed; }
+    .sc-day.active.today { background: var(--violet); color: #fff; }
+    .sc-day.future { opacity: 0.3; }
+    .sc-day:hover { transform: scale(1.15); }
+    .sc-day.pulse { animation: scPulse 2s ease-in-out infinite; }
+    @keyframes scPulse {
+      0%, 100% { box-shadow: 0 0 0 0 rgba(155,93,229,0.3); }
+      50% { box-shadow: 0 0 0 5px rgba(155,93,229,0); }
+    }
+    .sc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
+    .sc-month { font-family: 'Unbounded', sans-serif; font-size: 0.7rem; font-weight: 800; color: #0F172A; }
+    .sc-streak-badge { font-family: 'Unbounded', sans-serif; font-size: 0.7rem; font-weight: 800; color: #F59E0B; display: flex; align-items: center; gap: 4px; }
+    .sc-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 3px; }
+    .sc-wd { font-size: 0.56rem; color: #8898AA; font-weight: 700; text-align: center; text-transform: uppercase; }
+
+    /* C4: Keyboard shortcuts hint */
+    .kb-hint {
+      position: fixed; bottom: 16px; right: 16px; z-index: 100;
+      background: rgba(15,23,42,0.9); color: #fff; padding: 8px 14px;
+      border-radius: 10px; font-size: 0.72rem; font-family: 'Manrope', sans-serif;
+      backdrop-filter: blur(8px); display: none; gap: 12px;
+      box-shadow: 0 8px 32px rgba(0,0,0,0.3);
+    }
+    .kb-hint.visible { display: flex; }
+    .kb-key { background: rgba(255,255,255,0.15); padding: 2px 7px; border-radius: 4px; font-family: monospace; font-weight: 700; }
+
+    /* B1: Quick-start test modal */
+    .qs-subjects { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
+    .qs-subj-btn {
+      display: flex; align-items: center; gap: 8px;
+      padding: 10px 16px; border-radius: 12px;
+      border: 1.5px solid rgba(15,23,42,0.1); background: #fff;
+      cursor: pointer; transition: all 0.15s; flex: 1; min-width: 100px;
+      font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 700; color: #0F172A;
+    }
+    .qs-subj-btn:hover { border-color: rgba(155,93,229,0.3); }
+    .qs-subj-btn.active { border-color: var(--violet); background: rgba(155,93,229,0.06); color: var(--violet); }
+    .qs-subj-icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
+    .qs-subj-icon svg { width: 14px; height: 14px; stroke: #fff; stroke-width: 2; }
+    .qs-options { display: flex; flex-direction: column; gap: 12px; }
+    .qs-row { display: flex; align-items: center; gap: 12px; }
+    .qs-label { font-size: 0.78rem; font-weight: 700; color: #8898AA; min-width: 80px; }
+    .qs-select, .qs-input {
+      flex: 1; padding: 8px 12px; border: 1.5px solid rgba(15,23,42,0.1);
+      border-radius: 8px; font-family: 'Manrope', sans-serif; font-size: 0.82rem;
+      color: #0F172A; background: #f8f9fc;
+    }
+    .qs-select:focus, .qs-input:focus { outline: none; border-color: var(--violet); }
+
+    /* ── Admin/Teacher compact layout ── */
+    .admin-grid {
+      display: grid;
+      grid-template-columns: 1.3fr 1fr 1fr;
+      gap: 18px;
+      margin-bottom: 18px;
+    }
+    .admin-grid .widget { padding: 18px; border-radius: 16px; }
+    .admin-grid .w-head { margin-bottom: 10px; }
+
+    /* Quick-action buttons grid */
+    .adm-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
+    .adm-act {
+      display: flex; align-items: center; gap: 10px;
+      padding: 12px 14px; border-radius: 12px;
+      border: 1.5px solid rgba(15,23,42,0.07); background: #fff;
+      font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 700;
+      color: #0F172A; cursor: pointer; transition: all 0.15s;
+      text-decoration: none;
+    }
+    .adm-act:hover { border-color: rgba(155,93,229,0.25); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(15,23,42,0.08); }
+    .adm-act-icon {
+      width: 32px; height: 32px; border-radius: 8px;
+      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
+    }
+    .adm-act-icon svg, .adm-act-icon i { width: 16px; height: 16px; stroke: #fff; stroke-width: 2; }
+
+    /* Compact stat chips row for admin header */
+    .adm-stat-chips { display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }
+    .adm-stat-chip {
+      display: flex; align-items: center; gap: 8px;
+      padding: 6px 14px; border-radius: 10px;
+      background: rgba(15,23,42,0.03); border: 1px solid rgba(15,23,42,0.06);
+      font-family: 'Manrope', sans-serif; font-size: 0.75rem; font-weight: 600; color: #8898AA;
+    }
+    .adm-stat-val {
+      font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 900;
+    }
+
+    /* Admin compact assignment row */
+    .admin-grid .asgn-row { height: 52px; padding: 0 12px 0 10px; border-radius: 10px; }
+    .admin-grid .ar-icon { width: 30px; height: 30px; border-radius: 8px; }
+    .admin-grid .ar-icon svg { width: 14px; height: 14px; }
+    .admin-grid .ar-title { font-size: 0.82rem; }
+    .admin-grid .ar-meta { font-size: 0.68rem; }
+    .admin-grid .ar-prog-text { font-size: 0.68rem; }
+    .admin-grid .ar-btn-ghost { font-size: 0.72rem; padding: 4px 12px; }
+    .admin-grid .asgn-expand { padding: 8px 12px 10px 50px; border-radius: 0 0 10px 10px; }
+
+    /* Recent sessions mini table */
+    .adm-sessions { display: flex; flex-direction: column; gap: 4px; }
+    .adm-sess-row {
+      display: flex; align-items: center; gap: 10px;
+      padding: 6px 0; border-bottom: 1px solid rgba(15,23,42,0.04);
+      font-size: 0.76rem;
+    }
+    .adm-sess-row:last-child { border-bottom: none; }
+    .adm-sess-name { flex: 1; font-weight: 600; color: #0F172A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .adm-sess-subj { color: #8898AA; font-weight: 600; min-width: 60px; }
+    .adm-sess-pct { font-family: 'Unbounded', sans-serif; font-weight: 900; font-size: 0.74rem; min-width: 36px; text-align: right; }
+
+    /* Dark mode for admin */
+    .app-layout.dark .adm-act { background: #1A1D27; border-color: rgba(255,255,255,0.06); color: #E8ECF2; }
+    .app-layout.dark .adm-stat-chip { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.06); }
+    .app-layout.dark .adm-sess-name { color: #E8ECF2; }
+
+    /* C1: Teacher class summary widget */
+    .class-summary { display: flex; flex-direction: column; gap: 12px; }
+    .cs-card {
+      display: flex; align-items: center; gap: 14px;
+      padding: 14px 16px; border-radius: 14px;
+      background: rgba(155,93,229,0.04); border: 1px solid rgba(155,93,229,0.1);
+    }
+    .cs-avatar { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
+    .cs-body { flex: 1; min-width: 0; }
+    .cs-name { font-size: 0.84rem; font-weight: 700; color: #0F172A; }
+    .cs-stats { font-size: 0.72rem; color: #8898AA; margin-top: 2px; display: flex; gap: 10px; }
+    .cs-stats span { display: flex; align-items: center; gap: 3px; }
+    .cs-bar { width: 60px; height: 5px; border-radius: 99px; background: rgba(15,23,42,0.07); overflow: hidden; flex-shrink: 0; }
+    .cs-fill { height: 100%; border-radius: 99px; background: var(--violet); }
+
+    /* ── section header ── */
+    .section-header {
+      display: flex; align-items: center; justify-content: space-between;
+      margin-bottom: 18px;
+    }
+    .section-title {
+      font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800;
+      color: #8898AA; text-transform: uppercase; letter-spacing: 0.09em;
+      display: flex; align-items: center; gap: 8px;
+    }
+    .section-title::before {
+      content: '';
+      display: inline-block; width: 3px; height: 14px;
+      background: linear-gradient(180deg, #06D6E0, #9B5DE5);
+      border-radius: 99px; flex-shrink: 0;
+    }
+    .section-mb { margin-bottom: 40px; }
+
+    /* ── assign toolbar ── */
+    .assign-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
+    .assign-chips { display: flex; gap: 6px; }
+    .assign-chip {
+      padding: 5px 16px; border-radius: 99px; border: 1.5px solid rgba(15,23,42,0.1);
+      background: #fff; color: #6B7A8E;
+      font-family: 'Manrope', sans-serif; font-size: 0.78rem; font-weight: 700;
+      cursor: pointer; transition: all 0.16s;
+    }
+    .assign-chip:hover { border-color: rgba(155,93,229,0.3); color: var(--violet); }
+    .assign-chip.active { background: #0F172A; color: #fff; border-color: #0F172A; }
+    .assign-stats { font-size: 0.75rem; color: #8898AA; font-weight: 600; display: flex; gap: 14px; flex-wrap: wrap; }
+    .assign-stats .s-active  { color: var(--violet); }
+    .assign-stats .s-overdue { color: var(--pink); }
+    .assign-stats .s-done    { color: #059652; }
+
+    /* ── subject filter chips ── */
+    .subj-filter-row { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 14px; }
+    .sf-chip {
+      padding: 3px 11px 3px 8px; border-radius: 99px; border: 1.5px solid rgba(15,23,42,0.09);
+      background: #fff; color: #8898AA;
+      font-family: 'Manrope', sans-serif; font-size: 0.72rem; font-weight: 700;
+      cursor: pointer; transition: all 0.15s; display: inline-flex; align-items: center; gap: 5px;
+      white-space: nowrap;
+    }
+    .sf-chip svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 1.8; }
+    .sf-chip:hover { color: var(--violet); border-color: rgba(155,93,229,0.35); }
+    .sf-chip.active { color: #fff; border-color: transparent; }
+
+    /* ── group headers ── */
+    .assign-group-hdr {
+      display: flex; align-items: center; gap: 10px;
+      font-family: 'Unbounded', sans-serif; font-size: 0.72rem; font-weight: 800;
+      color: #8898AA; text-transform: uppercase; letter-spacing: 0.08em;
+      margin: 8px 0 4px; cursor: pointer; user-select: none;
+    }
+    .assign-group-hdr::before { content: ''; display: inline-block; width: 3px; height: 13px; border-radius: 99px; flex-shrink: 0; }
+    .assign-group-hdr.grp-todo::before { background: linear-gradient(180deg, #FF4C29, #F15BB5); }
+    .assign-group-hdr.grp-done::before { background: linear-gradient(180deg, #06D664, #06D6E0); }
+    .assign-group-hdr .grp-count { background: rgba(15,23,42,0.07); border-radius: 99px; padding: 1px 8px; font-size: 0.68rem; }
+    .assign-group-hdr .grp-arrow { margin-left: auto; transition: transform 0.2s; font-size: 0.65rem; }
+    .assign-group-hdr.collapsed .grp-arrow { transform: rotate(-90deg); }
+    .assign-group-body.collapsed { display: none; }
+    .assign-group-body { margin-top: 6px; }
+
+    /* ── expand panel ── */
+    .asgn-wrap { }
+    .asgn-row.expanded { border-radius: 14px 14px 0 0; border-bottom-color: rgba(15,23,42,0.04); transform: none !important; box-shadow: none !important; }
+    .asgn-row.spotlight { background: linear-gradient(90deg, rgba(155,93,229,0.04) 0%, #fff 60%); }
+    .asgn-expand {
+      background: #f8f9fc;
+      border: 1.5px solid rgba(15,23,42,0.07); border-top: none;
+      border-radius: 0 0 14px 14px;
+      padding: 10px 14px 13px 62px;
+      display: none; flex-direction: column; gap: 10px;
+      margin-bottom: 0;
+    }
+    .asgn-expand.open { display: flex; }
+    .ae-row { display: flex; align-items: center; gap: 12px; }
+    .ae-pills { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
+    .ae-pill { padding: 3px 10px; border-radius: 99px; background: rgba(15,23,42,0.06); color: #6B7A8E; font-size: 0.72rem; font-weight: 600; }
+    .ae-dl { flex: 1; }
+    .ae-dl-label { font-size: 0.70rem; color: #8898AA; margin-bottom: 5px; display: flex; justify-content: space-between; }
+    .ae-dl-bar { height: 4px; border-radius: 99px; background: rgba(15,23,42,0.08); overflow: hidden; }
+    .ae-dl-fill { height: 100%; border-radius: 99px; transition: width 0.4s; }
+    .ae-btn {
+      padding: 8px 24px; border: none; border-radius: 99px;
+      background: #0F172A; color: #fff;
+      font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 700;
+      cursor: pointer; transition: background 0.15s; white-space: nowrap; flex-shrink: 0;
+    }
+    .ae-btn:hover { background: #1E2D4A; }
+    .ae-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+    .ae-btn-result {
+      padding: 8px 24px; border: 1.5px solid #059652; border-radius: 99px;
+      background: rgba(6,214,100,0.07); color: #059652;
+      font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 700;
+      text-decoration: none; display: inline-flex; align-items: center;
+      white-space: nowrap; flex-shrink: 0; transition: background 0.15s;
+    }
+    .ae-btn-result:hover { background: rgba(6,214,100,0.14); }
+
+    /* ── assignment list ── */
+    .tests-list { display: flex; flex-direction: column; gap: 6px; }
+    /* ── compact assignment rows ── */
+    .asgn-row {
+      background: #fff;
+      border: 1.5px solid rgba(15,23,42,0.07);
+      border-left: 4px solid var(--ac, #9B5DE5);
+      border-radius: 14px;
+      padding: 0 14px 0 12px;
+      height: 62px;
+      display: flex; align-items: center; gap: 12px;
+      transition: transform 0.15s, box-shadow 0.15s;
+    }
+    .asgn-row:hover { transform: translateX(3px); box-shadow: 0 4px 20px rgba(15,23,42,0.09); }
+    .asgn-row.over   { --ac: var(--pink); background: rgba(241,91,181,0.02); }
+    .asgn-row.urgent { --ac: #FF4C29; box-shadow: 0 0 0 2px rgba(255,76,41,0.08); }
+    .asgn-row.done   { --ac: var(--green); }
+
+    .ar-icon {
+      width: 36px; height: 36px; border-radius: 10px;
+      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
+    }
+    .ar-icon svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; }
+
+    .ar-body { flex: 1; min-width: 0; }
+    .ar-title {
+      font-size: 0.88rem; font-weight: 700; color: #0F172A;
+      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;
+    }
+    .ar-meta {
+      font-size: 0.71rem; color: #8898AA; margin-top: 3px;
+      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+    }
+    .ar-meta .ar-tag-urgent { color: #E83A1E; font-weight: 700; }
+    .ar-meta .ar-tag-over   { color: var(--pink); font-weight: 700; }
+    .ar-meta .ar-tag-hw     { color: #7c3aed; font-weight: 700; }
+
+    .ar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
+    .ar-score { font-family: 'Unbounded', sans-serif; font-size: 0.85rem; font-weight: 900; min-width: 36px; text-align: right; }
+    .ar-score.hi  { color: #059652; }
+    .ar-score.mid { color: var(--amber); }
+    .ar-score.lo  { color: var(--pink); }
+
+    .ar-progress { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
+    .ar-prog-bar { width: 72px; height: 4px; border-radius: 99px; background: rgba(15,23,42,0.08); overflow: hidden; }
+    .ar-prog-fill { height: 100%; border-radius: 99px; }
+    .ar-prog-text { font-size: 0.71rem; color: #8898AA; white-space: nowrap; min-width: 36px; }
+
+    .ar-btn {
+      padding: 6px 16px; border: none; border-radius: 99px;
+      background: #0F172A; color: #fff;
+      font-family: 'Manrope', sans-serif; font-size: 0.76rem; font-weight: 700;
+      cursor: pointer; transition: background 0.15s; white-space: nowrap;
+    }
+    .ar-btn:hover { background: #1E2D4A; }
+    .ar-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+    .ar-btn-result {
+      padding: 6px 16px; border: 1.5px solid #059652; border-radius: 99px;
+      background: rgba(6,214,100,0.06); color: #059652;
+      font-family: 'Manrope', sans-serif; font-size: 0.76rem; font-weight: 700;
+      text-decoration: none; display: inline-flex; align-items: center;
+      white-space: nowrap; transition: background 0.15s;
+    }
+    .ar-btn-result:hover { background: rgba(6,214,100,0.14); }
+    .ar-btn-ghost {
+      padding: 6px 16px; border: 1.5px solid rgba(15,23,42,0.12); border-radius: 99px;
+      background: transparent; color: #8898AA;
+      font-family: 'Manrope', sans-serif; font-size: 0.76rem; font-weight: 600;
+      text-decoration: none; display: inline-flex; align-items: center;
+      white-space: nowrap; transition: all 0.15s;
+    }
+    .ar-btn-ghost:hover { border-color: var(--violet); color: var(--violet); }
+
+    /* ── history ── */
+    .history-list { display: flex; flex-direction: column; gap: 8px; }
+    .hist-item {
+      background: #fff;
+      border: 1.5px solid rgba(15,23,42,0.07);
+      border-radius: 16px; padding: 14px 20px;
+      display: flex; align-items: center; gap: 16px;
+      transition: all 0.18s ease;
+      text-decoration: none; color: inherit;
+      box-shadow: 0 1px 4px rgba(15,23,42,0.04);
+    }
+    .hist-item:hover {
+      border-color: rgba(15,23,42,0.12);
+      box-shadow: 0 6px 24px rgba(15,23,42,0.08);
+      transform: translateX(4px);
+    }
+    .hist-pct { font-family: 'Unbounded', sans-serif; font-size: 1rem; font-weight: 900; min-width: 52px; text-align: center; }
+    .hist-pct.hi  { color: #059652; }
+    .hist-pct.mid { color: var(--amber); }
+    .hist-pct.lo  { color: var(--pink); }
+    .hist-info { flex: 1; }
+    .hist-subj { font-size: 0.88rem; font-weight: 700; margin-bottom: 2px; color: #0F172A; }
+    .hist-meta { font-size: 0.75rem; color: #8898AA; }
+    .hist-score { font-size: 0.8rem; color: #3D4F6B; font-weight: 600; white-space: nowrap; }
+
+    /* ── progress tab ── */
+    .chart-section-title {
+      font-family: 'Unbounded', sans-serif; font-size: 0.76rem; font-weight: 800;
+      color: #8898AA; text-transform: uppercase; letter-spacing: 0.09em;
+      margin: 36px 0 16px;
+      display: flex; align-items: center; gap: 8px;
+    }
+    .chart-section-title::before {
+      content: ''; display: inline-block; width: 3px; height: 14px;
+      background: linear-gradient(180deg, #06D6E0, #9B5DE5);
+      border-radius: 99px;
+    }
+    .chart-section-title:first-child { margin-top: 0; }
+    .trend-wrap {
+      background: #fff; border: 1.5px solid rgba(15,23,42,0.08);
+      border-radius: 20px; padding: 24px 24px 16px;
+      box-shadow: 0 2px 8px rgba(15,23,42,0.05);
+    }
+    .trend-canvas-wrap { position: relative; height: 230px; }
+    .subj-charts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
+    .subj-chart-card {
+      background: #fff; border: 1.5px solid rgba(15,23,42,0.08);
+      border-radius: 20px; padding: 22px 18px;
+      text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px;
+      box-shadow: 0 2px 8px rgba(15,23,42,0.05);
+      transition: all 0.2s;
+    }
+    .subj-chart-card:hover { border-color: rgba(15,23,42,0.14); transform: translateY(-3px); box-shadow: 0 10px 32px rgba(15,23,42,0.1); }
+    .subj-chart-name { font-family: 'Unbounded', sans-serif; font-size: 0.76rem; font-weight: 800; color: #0F172A; }
+    .subj-chart-sessions { font-size: 0.72rem; color: #8898AA; }
+    .canvas-wrap { position: relative; width: 130px; height: 130px; margin: 4px 0; }
+
+    /* ── weak topics ── */
+    .weak-list { display: flex; flex-direction: column; gap: 10px; }
+    .weak-item {
+      background: #fff; border: 1.5px solid rgba(15,23,42,0.07);
+      border-radius: 16px; padding: 16px 20px;
+      display: flex; align-items: center; gap: 18px;
+      cursor: pointer; transition: all 0.18s ease;
+      box-shadow: 0 1px 4px rgba(15,23,42,0.04);
+    }
+    .weak-item:hover { border-color: rgba(15,23,42,0.12); transform: translateX(4px); box-shadow: 0 6px 24px rgba(15,23,42,0.08); }
+    .weak-bar-wrap { flex: 1; }
+    .weak-name { font-size: 0.88rem; font-weight: 700; margin-bottom: 2px; color: #0F172A; }
+    .weak-meta { font-size: 0.75rem; color: #8898AA; }
+    .weak-bar  { height: 7px; background: rgba(15,23,42,0.07); border-radius: 99px; overflow: hidden; margin-top: 8px; }
+    .weak-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #FF9F1C, #F15BB5); transition: width 0.8s cubic-bezier(0.34,1.2,0.64,1); }
+    .weak-pct  { font-family: 'Unbounded', sans-serif; font-size: 1rem; font-weight: 900; color: #E0335E; min-width: 48px; text-align: right; }
+
+    /* ── submission strip in expand ── */
+    .ae-submit-row {
+      display: flex; align-items: center; gap: 10px;
+      padding-top: 8px; border-top: 1px solid rgba(15,23,42,0.06); flex-wrap: wrap;
+    }
+    .ae-submit-label { font-size: 0.72rem; color: #8898AA; font-weight: 600; flex-shrink: 0; }
+    .ae-submit-status {
+      display: inline-flex; align-items: center; gap: 5px;
+      padding: 3px 10px; border-radius: 99px; font-size: 0.72rem; font-weight: 700;
+    }
+    .ae-submit-status.new         { background: rgba(6,214,224,0.1); color: #06aab3; }
+    .ae-submit-status.resubmitted { background: rgba(6,214,224,0.1); color: #06aab3; }
+    .ae-submit-status.reviewed    { background: rgba(5,150,82,0.1);  color: #059652; }
+    .ae-submit-status.accepted    { background: rgba(5,150,82,0.12); color: #059652; }
+    .ae-submit-status.revision    { background: rgba(241,91,181,0.1); color: #c0306a; }
+
+    /* mini status chip on collapsed card */
+    .ar-sub-chip {
+      display: inline-flex; align-items: center; gap: 4px;
+      padding: 2px 8px; border-radius: 99px; font-size: 0.65rem; font-weight: 700;
+      flex-shrink: 0;
+    }
+    .ar-sub-chip.s-new, .ar-sub-chip.s-resubmitted { background: rgba(6,214,224,0.1); color: #06aab3; }
+    .ar-sub-chip.s-reviewed { background: rgba(5,150,82,0.1); color: #059652; }
+    .ar-sub-chip.s-accepted { background: rgba(5,150,82,0.12); color: #059652; }
+    .ar-sub-chip.s-revision { background: rgba(241,91,181,0.1); color: #c0306a; }
+    .ar-sub-chip.s-none     { background: rgba(155,93,229,0.08); color: #9B5DE5; }
+
+    /* ── My submissions widget ── */
+    .my-subs-list { display: flex; flex-direction: column; gap: 6px; }
+    .ms-row {
+      display: flex; align-items: center; gap: 10px;
+      padding: 10px 14px; background: #fff;
+      border: 1.5px solid rgba(15,23,42,0.07); border-radius: 12px;
+      transition: transform 0.15s, box-shadow 0.15s;
+    }
+    .ms-row:hover { transform: translateX(3px); box-shadow: 0 4px 16px rgba(15,23,42,0.07); }
+    .ms-title { flex: 1; font-size: 0.82rem; font-weight: 600; color: #0F172A;
+      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .ms-file  { font-size: 0.7rem; color: #8898AA; flex-shrink: 0; max-width: 120px;
+      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .ms-grade { font-weight: 800; font-size: 0.78rem; flex-shrink: 0; }
+    .ms-more  { display: inline-block; margin-top: 8px; font-size: 0.78rem; font-weight: 700; color: var(--violet); text-decoration: none; }
+    .ms-more:hover { text-decoration: underline; }
+    .ae-submit-note { font-size: 0.75rem; color: #3D4F6B; flex: 1; font-style: italic; }
+    .ae-grade-badge {
+      display: inline-flex; align-items: center; gap: 3px;
+      padding: 3px 9px; border-radius: 99px; font-size: 0.72rem; font-weight: 800;
+      background: rgba(155,93,229,0.1); color: var(--violet); flex-shrink: 0;
+    }
+    .ae-grade-badge.high { background: rgba(5,150,82,0.12); color: #059652; }
+    .ae-grade-badge.mid  { background: rgba(255,193,7,0.14); color: #c07c00; }
+    .ae-grade-badge.low  { background: rgba(241,91,181,0.12); color: #c0306a; }
+    .ae-btn-submit {
+      padding: 5px 14px; border: 1.5px solid rgba(155,93,229,0.3); border-radius: 99px;
+      background: rgba(155,93,229,0.06); color: var(--violet);
+      font-family: 'Manrope', sans-serif; font-size: 0.74rem; font-weight: 700;
+      cursor: pointer; transition: all 0.15s; white-space: nowrap; flex-shrink: 0;
+    }
+    .ae-btn-submit:hover { background: rgba(155,93,229,0.14); border-color: var(--violet); }
+    .ae-btn-delete-sub {
+      padding: 5px 10px; border: 1.5px solid rgba(241,91,181,0.25); border-radius: 99px;
+      background: transparent; color: #c0306a;
+      font-family: 'Manrope', sans-serif; font-size: 0.70rem; font-weight: 600;
+      cursor: pointer; transition: all 0.15s; white-space: nowrap; flex-shrink: 0;
+    }
+    .ae-btn-delete-sub:hover { background: rgba(241,91,181,0.08); border-color: var(--pink); }
+
+    /* ── spinner / empty ── */
+    .spinner { width: 36px; height: 36px; border: 3px solid rgba(15,23,42,0.1); border-top-color: var(--violet); border-radius: 50%; animation: spin 0.75s linear infinite; margin: 48px auto; display: block; }
+    @keyframes spin { to { transform: rotate(360deg); } }
+    .empty { text-align: center; padding: 36px; color: #8898AA; font-size: 0.88rem; }
+
+    /* ── empty CTA ── */
+    .empty-cta {
+      display: flex; flex-direction: column; align-items: center; gap: 16px;
+      padding: 60px 28px; text-align: center;
+      background: #fff;
+      border: 2px dashed rgba(155,93,229,0.2);
+      border-radius: 24px;
+      box-shadow: 0 2px 8px rgba(15,23,42,0.04);
+    }
+    .empty-cta-icon { font-size: 3.4rem; line-height: 1; filter: drop-shadow(0 4px 16px rgba(0,0,0,0.12)); }
+    .empty-cta-title { font-family: 'Unbounded', sans-serif; font-size: 1.05rem; font-weight: 800; color: #0F172A; }
+    .empty-cta-desc { font-size: 0.88rem; color: #6B7A8E; max-width: 300px; line-height: 1.7; }
+
+    /* ── nav active ── */
+    .nav-active { background: rgba(155,93,229,0.08) !important; border-color: var(--violet) !important; color: var(--violet) !important; cursor: default; pointer-events: none; }
+
+    /* ── notification ── */
+    .notif-bell { position: relative; }
+    .notif-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; background: var(--pink); color: #fff; border-radius: 99px; font-size: 0.65rem; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; }
+    .notif-drop-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid var(--border); }
+    .notif-drop-title { font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800; }
+    .notif-read-all { background: none; border: none; font-size: 0.74rem; color: var(--violet); cursor: pointer; font-family: 'Manrope', sans-serif; font-weight: 600; }
+    .notif-item { display: flex; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background var(--tr); text-decoration: none; color: inherit; }
+    .notif-item:last-child { border-bottom: none; }
+    .notif-item:hover { background: rgba(155,93,229,0.04); }
+    .notif-item.unread { background: rgba(155,93,229,0.05); }
+    .notif-item.unread:hover { background: rgba(155,93,229,0.09); }
+    .notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); flex-shrink: 0; margin-top: 5px; }
+    .notif-dot.read { background: transparent; border: 1.5px solid var(--border-h); }
+    .notif-msg { font-size: 0.80rem; line-height: 1.45; flex: 1; }
+    .notif-time { font-size: 0.70rem; color: var(--text-3); margin-top: 2px; }
+    .notif-empty { padding: 28px 16px; text-align: center; color: var(--text-3); font-size: 0.84rem; }
+
+    /* ── join modal ── */
+    .modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.4); backdrop-filter: blur(6px); z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; }
+    .modal-overlay.open { display: flex; }
+    .modal { background: #fff; border-radius: 24px; padding: 36px; width: 100%; max-width: 420px; box-shadow: 0 32px 80px rgba(15,23,42,0.22); }
+    .modal-title { font-family: 'Unbounded', sans-serif; font-size: 1rem; font-weight: 800; margin-bottom: 22px; }
+    .form-input { width: 100%; padding: 12px 16px; border: 1.5px solid rgba(15,23,42,0.15); border-radius: 12px; font-family: 'Manrope', sans-serif; font-size: 0.95rem; color: var(--text); background: #f8f9fc; transition: border-color 0.2s; box-sizing: border-box; }
+    .form-input:focus { outline: none; border-color: var(--violet); background: #fff; }
+    .modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }
+    .btn-cancel { padding: 10px 22px; border: 1.5px solid rgba(15,23,42,0.15); border-radius: 999px; background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.88rem; font-weight: 600; color: #8898AA; cursor: pointer; transition: all 0.18s; }
+    .btn-cancel:hover { border-color: rgba(15,23,42,0.3); color: var(--text); }
+    .btn-join   { padding: 10px 28px; border: none; border-radius: 999px; background: #0F172A; color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.88rem; font-weight: 700; cursor: pointer; box-shadow: 0 2px 10px rgba(15,23,42,0.2); transition: all 0.18s; }
+    .btn-join:hover { background: #1E2D4A; box-shadow: 0 6px 20px rgba(15,23,42,0.25); }
+    .btn-join:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
+
+
+    /* ── history timeline ── */
+    .hist-date-sep {
+      font-family: 'Unbounded', sans-serif; font-size: 0.68rem; font-weight: 800;
+      color: #8898AA; text-transform: uppercase; letter-spacing: 0.08em;
+      margin: 22px 0 10px; display: flex; align-items: center; gap: 12px;
+    }
+    .hist-date-sep:first-child { margin-top: 0; }
+    .hist-date-sep::after { content: ''; flex: 1; height: 1px; background: rgba(15,23,42,0.08); }
+    .hist-ring { flex-shrink: 0; }
+
+    /* ── stats charts ── */
+    .stats-section { margin-bottom: 18px; }
+    .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
+    @media (max-width: 768px) { .stats-grid { grid-template-columns: 1fr; } }
+    .stats-chart-card {
+      background: #fff; border: 1.5px solid rgba(15,23,42,0.07);
+      border-radius: 18px; padding: 18px 20px;
+    }
+    .stats-chart-title {
+      font-size: 0.72rem; font-weight: 700; color: #8898AA;
+      text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px;
+    }
+    .stats-bar-chart { display: flex; align-items: flex-end; gap: 4px; height: 100px; }
+    .stats-bar {
+      flex: 1; border-radius: 4px 4px 0 0; min-width: 6px; position: relative;
+      transition: height 0.3s; cursor: default;
+    }
+    .stats-bar:hover::after {
+      content: attr(data-tip); position: absolute; bottom: 100%; left: 50%;
+      transform: translateX(-50%); padding: 3px 8px; border-radius: 6px;
+      background: #0F172A; color: #fff; font-size: 0.65rem; font-weight: 600;
+      white-space: nowrap; pointer-events: none;
+    }
+    .stats-bar-labels { display: flex; gap: 4px; margin-top: 4px; }
+    .stats-bar-labels span {
+      flex: 1; font-size: 0.55rem; color: #B0BEC5; text-align: center;
+      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    }
+    .stats-line-chart { position: relative; height: 100px; }
+    .stats-line-chart canvas { width: 100% !important; height: 100% !important; }
+    .stats-summary-chips {
+      display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px;
+    }
+    .stats-chip {
+      flex: 1; min-width: 80px; padding: 12px 14px; border-radius: 14px;
+      background: rgba(255,255,255,0.7); border: 1px solid rgba(15,23,42,0.06);
+      text-align: center;
+    }
+    .stats-chip-val {
+      font-family: 'Unbounded', sans-serif; font-size: 1.1rem; font-weight: 800;
+      color: #0F172A; line-height: 1;
+    }
+    .stats-chip-lbl { font-size: 0.65rem; color: #8898AA; margin-top: 3px; font-weight: 600; }
+
+    /* ── activity heatmap ── */
+    .heatmap-section {
+      background: #fff; border: 1.5px solid rgba(15,23,42,0.08);
+      border-radius: 20px; padding: 24px 28px; overflow-x: auto;
+      box-shadow: 0 2px 8px rgba(15,23,42,0.05);
+    }
+    .heatmap-grid { display: grid; grid-template-columns: repeat(52, 14px); grid-template-rows: repeat(7, 14px); gap: 3px; min-width: 780px; }
+    .hm-cell { width: 14px; height: 14px; border-radius: 3px; background: rgba(15,23,42,0.06); transition: transform 0.12s; cursor: default; }
+    .hm-cell[data-n="1"] { background: rgba(155,93,229,0.2); }
+    .hm-cell[data-n="2"] { background: rgba(155,93,229,0.42); }
+    .hm-cell[data-n="3"] { background: rgba(155,93,229,0.65); }
+    .hm-cell[data-n="4"] { background: rgba(155,93,229,0.88); }
+    .hm-cell:hover { transform: scale(1.5); z-index: 5; position: relative; }
+    .heatmap-legend { display: flex; align-items: center; gap: 5px; margin-top: 14px; font-size: 0.72rem; color: #8898AA; }
+    .hm-leg { width: 14px; height: 14px; border-radius: 3px; }
+
+    /* ── subject card grid (legacy, kept for compatibility) ── */
+    .subj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
+
+    /* ── theory progress ── */
+    .theory-courses-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 14px; margin-bottom: 8px; }
+    .theory-course-card {
+      background: #fff; border: 1.5px solid rgba(15,23,42,0.07);
+      border-radius: 16px; padding: 16px 18px;
+      text-decoration: none; color: inherit;
+      display: flex; flex-direction: column; gap: 10px;
+      transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
+      box-shadow: 0 1px 4px rgba(15,23,42,0.04);
+    }
+    .theory-course-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,23,42,0.1); border-color: rgba(155,93,229,0.2); }
+    .tc-header { display: flex; align-items: center; gap: 10px; }
+    .tc-emoji { font-size: 1.6rem; line-height: 1; }
+    .tc-info { flex: 1; }
+    .tc-title { font-size: 0.88rem; font-weight: 700; color: #0F172A; line-height: 1.35; }
+    .tc-subj { font-size: 0.7rem; font-weight: 700; color: #8898AA; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.06em; }
+    .tc-progress { display: flex; align-items: center; gap: 8px; }
+    .tc-bar { flex: 1; height: 5px; border-radius: 99px; background: rgba(15,23,42,0.07); }
+    .tc-fill { height: 100%; border-radius: 99px; background: var(--violet); }
+    .tc-pct { font-size: 0.72rem; font-weight: 700; color: var(--violet); flex-shrink: 0; }
+    .tc-meta { font-size: 0.74rem; color: #8898AA; }
+
+    /* ── Leaderboard widget ── */
+    .lb-widget {
+      background: #fff; border: 1.5px solid rgba(15,23,42,0.08);
+      border-radius: 18px; padding: 20px 22px; margin-bottom: 22px;
+      box-shadow: 0 2px 8px rgba(15,23,42,0.04);
+    }
+    .lb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
+    .lb-title { font-family: 'Unbounded', sans-serif; font-size: 0.84rem; font-weight: 800; color: #0F172A; }
+    .lb-tabs { display: flex; gap: 4px; }
+    .lb-tab {
+      padding: 5px 12px; border-radius: 99px; border: none;
+      font-family: 'Manrope', sans-serif; font-size: 0.72rem; font-weight: 700;
+      background: transparent; color: #8898AA; cursor: pointer; transition: all 0.15s;
+    }
+    .lb-tab.active { background: linear-gradient(135deg, rgba(155,93,229,0.1), rgba(6,214,224,0.08)); color: #9B5DE5; }
+    .lb-list { display: flex; flex-direction: column; gap: 4px; }
+    .lb-row {
+      display: flex; align-items: center; gap: 10px;
+      padding: 8px 10px; border-radius: 12px; transition: background 0.12s;
+    }
+    .lb-row:hover { background: rgba(155,93,229,0.04); }
+    .lb-row.me { background: linear-gradient(135deg, rgba(155,93,229,0.06), rgba(6,214,224,0.04)); border: 1px solid rgba(155,93,229,0.12); }
+    .lb-pos {
+      width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
+      display: flex; align-items: center; justify-content: center;
+      font-family: 'Unbounded', sans-serif; font-size: 0.68rem; font-weight: 900;
+      background: rgba(15,23,42,0.06); color: #8898AA;
+    }
+    .lb-pos.gold { background: linear-gradient(135deg, #FFD700, #FFA500); color: #fff; }
+    .lb-pos.silver { background: linear-gradient(135deg, #C0C0C0, #A0A0A0); color: #fff; }
+    .lb-pos.bronze { background: linear-gradient(135deg, #CD7F32, #B87333); color: #fff; }
+    .lb-avatar {
+      width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
+      background: linear-gradient(135deg, #9B5DE5, #06D6E0);
+      display: flex; align-items: center; justify-content: center;
+      font-family: 'Unbounded', sans-serif; font-size: 0.6rem; font-weight: 800; color: #fff;
+    }
+    .lb-info { flex: 1; min-width: 0; }
+    .lb-name { font-size: 0.82rem; font-weight: 700; color: #0F172A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .lb-rank { font-size: 0.64rem; color: #8898AA; font-weight: 600; }
+    .lb-xp { font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800; color: #9B5DE5; flex-shrink: 0; }
+    .lb-empty { text-align: center; padding: 20px; color: #8898AA; font-size: 0.82rem; }
+    .lb-class-sel {
+      padding: 5px 10px; border-radius: 10px; border: 1.5px solid rgba(15,23,42,0.1);
+      background: #fff; font-family: 'Manrope', sans-serif; font-size: 0.72rem; font-weight: 600;
+      color: #0F172A; cursor: pointer; outline: none;
+    }
+
+    /* ── Challenges widget ── */
+    .ch-widget { margin-bottom: 22px; }
+    .ch-list { display: flex; flex-direction: column; gap: 8px; }
+    .ch-item {
+      display: flex; align-items: center; gap: 14px;
+      padding: 14px 16px; border-radius: 14px;
+      background: #fff; border: 1.5px solid rgba(15,23,42,0.07);
+      transition: all 0.15s;
+    }
+    .ch-item.done { border-color: rgba(6,214,100,0.25); background: rgba(6,214,100,0.03); }
+    .ch-item.claimed { opacity: 0.55; }
+    .ch-icon { font-size: 1.3rem; flex-shrink: 0; }
+    .ch-body { flex: 1; min-width: 0; }
+    .ch-title { font-size: 0.84rem; font-weight: 700; color: #0F172A; }
+    .ch-desc { font-size: 0.72rem; color: #8898AA; margin-top: 2px; }
+    .ch-prog { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
+    .ch-bar { flex: 1; height: 5px; border-radius: 99px; background: rgba(15,23,42,0.07); overflow: hidden; }
+    .ch-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #9B5DE5, #06D6E0); transition: width 0.4s; }
+    .ch-pct { font-size: 0.68rem; font-weight: 700; color: #9B5DE5; flex-shrink: 0; }
+    .ch-reward { flex-shrink: 0; text-align: right; }
+    .ch-xp { font-family: 'Unbounded', sans-serif; font-size: 0.72rem; font-weight: 800; color: #9B5DE5; }
+    .ch-claim {
+      margin-top: 4px; padding: 4px 12px; border: none; border-radius: 99px;
+      background: var(--grad-1); color: #fff; font-family: 'Manrope', sans-serif;
+      font-size: 0.68rem; font-weight: 700; cursor: pointer; transition: transform 0.15s;
+    }
+    .ch-claim:hover { transform: translateY(-1px); }
+    .ch-claimed-badge { font-size: 0.68rem; color: #059652; font-weight: 700; margin-top: 4px; }
+
+    /* ── Gamification bar ── */
+    .gam-bar {
+      display: flex; align-items: center; gap: 18px;
+      padding: 14px 20px; border-radius: 16px; margin-bottom: 16px;
+      background: linear-gradient(135deg, rgba(155,93,229,0.07), rgba(6,214,224,0.05));
+      border: 1.5px solid rgba(155,93,229,0.12);
+    }
+    .gam-level {
+      width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
+      background: linear-gradient(135deg, #9B5DE5, #06D6E0);
+      display: flex; flex-direction: column; align-items: center; justify-content: center;
+      color: #fff; line-height: 1;
+    }
+    .gam-level-num { font-family: 'Unbounded', sans-serif; font-size: 1.1rem; font-weight: 900; }
+    .gam-level-lbl { font-size: 0.52rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.85; }
+    .gam-main { flex: 1; min-width: 0; }
+    .gam-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
+    .gam-rank { font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 800; color: #0F172A; }
+    .gam-xp-text { font-size: 0.72rem; color: #8898AA; font-weight: 600; }
+    .gam-progress { height: 8px; border-radius: 99px; background: rgba(15,23,42,0.07); overflow: hidden; }
+    .gam-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #9B5DE5, #06D6E0); transition: width 0.6s ease; }
+    .gam-chips { display: flex; gap: 10px; flex-shrink: 0; }
+    .gam-chip {
+      display: flex; flex-direction: column; align-items: center; gap: 2px;
+      padding: 6px 12px; border-radius: 12px;
+      background: rgba(255,255,255,0.8); border: 1px solid rgba(15,23,42,0.06);
+      min-width: 62px;
+    }
+    .gam-chip-icon { font-size: 1.1rem; line-height: 1; }
+    .gam-chip-val { font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800; color: #0F172A; }
+    .gam-chip-lbl { font-size: 0.58rem; color: #8898AA; font-weight: 600; text-transform: uppercase; }
+    .gam-goal-ring { position: relative; width: 40px; height: 40px; }
+    .gam-goal-ring svg { width: 40px; height: 40px; }
+
+    /* ── Mobile responsive ── */
+    @media (max-width: 768px) {
+      /* Layout */
+      .container { padding: 20px 14px 80px; }
+      .widget { padding: 16px; }
+      .lb-widget { padding: 16px; }
+
+      /* Dash header */
+      .dash-header { flex-wrap: wrap; height: auto; padding: 14px 16px; gap: 12px; }
+      .dh-stats { flex-wrap: wrap; gap: 10px; width: 100%; justify-content: center; }
+      .dh-greeting { font-size: 0.88rem; }
+
+      /* Grids <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> single column */
+      .main-grid { grid-template-columns: 1fr; }
+      .action-cards { grid-template-columns: 1fr; }
+      .admin-grid { grid-template-columns: 1fr; gap: 14px; }
+      .adm-actions { grid-template-columns: repeat(2, 1fr); }
+      .theory-courses-grid { grid-template-columns: 1fr; }
+      .subj-charts-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
+
+      /* Gamification bar */
+      .gam-bar { flex-wrap: wrap; gap: 12px; }
+      .gam-chips { width: 100%; justify-content: center; }
+
+      /* Action banner */
+      .action-banner { flex-wrap: wrap; padding: 14px 16px; gap: 10px; }
+      .ab-countdown { text-align: left; }
+      .ab-countdown-val { font-size: 1.1rem; }
+      .ab-btn { width: 100%; text-align: center; justify-content: center; }
+
+      /* Assignment rows: wrap right-side, hide progress bar */
+      .asgn-row { height: auto; min-height: 54px; padding: 8px 10px; gap: 8px; flex-wrap: wrap; }
+      .ar-progress { display: none; }
+      .ar-right { gap: 6px; }
+      .ar-btn, .ar-btn-ghost, .ar-btn-result { font-size: 0.72rem; padding: 5px 12px; }
+      /* Expand panel: remove deep left indent */
+      .asgn-expand { padding: 10px 12px 12px; }
+
+      /* History + weak topics */
+      .hist-item { padding: 12px 14px; gap: 10px; }
+      .hist-pct  { min-width: 44px; font-size: 0.88rem; }
+      .weak-item { padding: 12px 14px; gap: 12px; }
+      .weak-pct  { min-width: 36px; font-size: 0.88rem; }
+
+      /* Empty CTA */
+      .empty-cta { padding: 40px 20px; }
+      .empty-cta-icon  { font-size: 2.5rem; }
+      .empty-cta-title { font-size: 0.9rem; }
+
+      /* Trend chart */
+      .trend-wrap { padding: 16px 12px 12px; }
+
+      /* Heatmap popup: prevent off-screen overflow */
+      .hm-day-popup { min-width: 0; max-width: 90vw; }
+
+      /* Modal <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> bottom sheet */
+      .modal-overlay { align-items: flex-end; padding: 0; }
+      .modal { border-radius: 22px 22px 0 0; padding: 28px 20px 36px; max-height: 90vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
+      .modal-footer { flex-wrap: wrap; }
+      .modal-footer .btn-cancel,
+      .modal-footer .btn-primary { flex: 1; justify-content: center; }
+
+      /* Quick-start modal row label */
+      .qs-label { min-width: 60px; }
+
+      /* Leaderboard */
+      .lb-head { flex-direction: column; gap: 10px; align-items: flex-start; }
+      .lb-name { font-size: 0.76rem; }
+
+      /* Section headers */
+      .section-title { font-size: 0.74rem; }
+
+      /* Heatmap section */
+      .heatmap-section { padding: 18px 12px; }
+
+      /* Keyboard hints: hide on mobile */
+      .kb-hint { display: none !important; }
+    }
+
+    @media (max-width: 480px) {
+      .container { padding: 16px 10px 80px; }
+      .widget { padding: 14px; }
+      .lb-widget { padding: 14px; }
+
+      /* Header stats */
+      .dh-stats { gap: 8px; }
+      .stat-ring { min-width: 60px; }
+      .dh-greeting { font-size: 0.82rem; }
+
+      /* Admin quick actions: stay 2 columns (narrow enough) */
+      .adm-actions { gap: 8px; }
+      .adm-act { padding: 10px 10px; font-size: 0.76rem; gap: 8px; }
+
+      /* Assignment rows tighter */
+      .asgn-row { gap: 6px; padding: 6px 8px; }
+      .ar-icon { width: 30px; height: 30px; }
+      .ar-icon svg { width: 14px; height: 14px; }
+
+      /* Stats chips min-width */
+      .stats-chip { min-width: 60px; }
+
+      /* Heatmap popup always right-anchored */
+      .hm-day-popup { right: 10px !important; left: auto !important; top: auto !important; }
+    }
+  </style>
+  <script src="https://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+</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>
+      <span class="sb-link active"><i data-lucide="home" class="sb-icon"></i><span class="sb-lbl">Дашборд</span></span>
+      <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>
+      <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">
+      <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 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>
+    </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>
+          <span class="sb-logout" style="pointer-events:none">Мой профиль</span>
+        </div>
+      </a>
+    </div>
+  </aside>
+  <div class="notif-drop" id="notif-drop"></div>
+  <div class="sb-content">
+
+  <!-- ZONE 1: Compact Header -->
+  <div class="dash-header">
+    <div class="dh-avatar" id="dh-avatar">LS</div>
+    <div class="dh-text">
+      <div class="dh-greeting" id="dh-greeting">Привет, <span id="user-name">—</span></div>
+      <div class="dh-sub" id="dh-sub">Выбери тест и начни</div>
+    </div>
+    <div class="dh-stats" id="dh-stats" style="display:none">
+      <div class="stat-ring" id="sr-sessions"></div>
+      <div class="stat-ring" id="sr-avg"></div>
+      <div class="stat-ring" id="sr-streak"></div>
+      <div class="stat-ring" id="sr-pending"></div>
+    </div>
+  </div>
+
+  <div class="container">
+
+  <!-- Gamification Bar (students only) -->
+  <div class="gam-bar" id="gam-bar" style="display:none">
+    <div class="gam-level">
+      <div class="gam-level-num" id="gam-lvl">1</div>
+      <div class="gam-level-lbl">уровень</div>
+    </div>
+    <div class="gam-main">
+      <div class="gam-top">
+        <div class="gam-rank" id="gam-rank">Новичок</div>
+        <div class="gam-xp-text" id="gam-xp-text">0 / 100 XP</div>
+      </div>
+      <div class="gam-progress"><div class="gam-fill" id="gam-fill" style="width:0%"></div></div>
+    </div>
+    <div class="gam-chips">
+      <div class="gam-chip">
+        <div class="gam-chip-icon" id="gam-streak-icon"></div>
+        <div class="gam-chip-val" id="gam-streak">0</div>
+        <div class="gam-chip-lbl">стрик</div>
+      </div>
+      <div class="gam-chip" style="cursor:pointer" onclick="cycleGoalTier()" title="Нажмите для смены сложности">
+        <div class="gam-goal-ring" id="gam-goal-ring"></div>
+        <div class="gam-chip-lbl" id="gam-goal-label">цель дня</div>
+      </div>
+    </div>
+  </div>
+
+  <!-- ZONE 2: Action Banner + Cards -->
+  <div class="action-zone">
+    <div class="action-banner" id="action-banner" style="display:none">
+      <!-- populated by JS -->
+    </div>
+    <div class="action-cards" id="action-cards" style="display:none">
+      <a class="ac-card" id="ac-continue" style="display:none" href="#">
+        <span class="ac-emoji"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle"><path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2V3zm20 0h-6a4 4 0 00-4 4v14a3 3 0 013-3h7V3z"/></svg></span>
+        <div class="ac-body">
+          <div class="ac-title" id="ac-cont-title">—</div>
+          <div class="ac-sub" id="ac-cont-sub">—</div>
+        </div>
+        <span class="ac-badge" id="ac-cont-pct"></span>
+      </a>
+      <a class="ac-card" id="ac-weak" style="display:none" href="#">
+        <span class="ac-emoji"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg></span>
+        <div class="ac-body">
+          <div class="ac-title" id="ac-weak-title">—</div>
+          <div class="ac-sub" id="ac-weak-sub">—</div>
+        </div>
+        <span class="ac-badge" id="ac-weak-pct" style="color:#E0335E"></span>
+      </a>
+    </div>
+  </div>
+
+  <!-- ADMIN ZONE: Quick actions (hidden for students) -->
+  <div id="admin-actions-zone" style="display:none;margin-bottom:18px">
+    <div class="adm-actions" id="adm-actions-grid">
+      <a class="adm-act" href="/classes">
+        <div class="adm-act-icon" style="background:#9B5DE5"><i data-lucide="graduation-cap"></i></div>
+        Мои классы
+      </a>
+      <a class="adm-act" href="/admin">
+        <div class="adm-act-icon" style="background:#06B6D4"><i data-lucide="settings"></i></div>
+        Управление
+      </a>
+      <a class="adm-act" href="/board">
+        <div class="adm-act-icon" style="background:#06D6A0"><i data-lucide="layout-dashboard"></i></div>
+        Доска
+      </a>
+      <a class="adm-act" href="/library">
+        <div class="adm-act-icon" style="background:#F59E0B"><i data-lucide="book-open"></i></div>
+        Библиотека
+      </a>
+      <a class="adm-act" href="/homework">
+        <div class="adm-act-icon" style="background:#F15BB5"><i data-lucide="file-check"></i></div>
+        Работы
+      </a>
+    </div>
+  </div>
+
+  <!-- ADMIN GRID: 3-column compact layout (hidden for students) -->
+  <div class="admin-grid" id="admin-grid" style="display:none">
+    <!-- Admin Col 1: Assignments (compact) -->
+    <div class="widget" id="w-admin-assignments">
+      <div class="w-head">
+        <div class="w-title">Задания</div>
+        <a class="w-more" href="/classes">Все классы</a>
+      </div>
+      <div id="admin-assignments-list"><div id="admin-assignments-sk"></div></div>
+    </div>
+    <!-- Admin Col 2: Classes -->
+    <div class="widget" id="w-admin-classes">
+      <div class="w-head">
+        <div class="w-title">Классы</div>
+        <a class="w-more" href="/classes">Все</a>
+      </div>
+      <div class="class-summary" id="admin-classes-body"></div>
+    </div>
+    <!-- Admin Col 3: Recent sessions -->
+    <div class="widget" id="w-admin-sessions">
+      <div class="w-head">
+        <div class="w-title">Последние сессии</div>
+        <a class="w-more" href="/admin">Все</a>
+      </div>
+      <div class="adm-sessions" id="admin-sessions-body"></div>
+    </div>
+  </div>
+
+  <!-- ZONE 3: Three-Column Grid -->
+  <div class="main-grid">
+    <!-- Col 1: Assignments -->
+    <div class="widget" id="w-assignments">
+      <div class="w-head">
+        <div class="w-title">Задания <span class="tab-badge" id="assignments-badge" style="display:none"></span></div>
+        <div class="assign-chips" id="assign-chips-wrap" style="display:none">
+          <button class="assign-chip active" onclick="setAssignFilter('all')">Все</button>
+          <button class="assign-chip" onclick="setAssignFilter('active')">Активные</button>
+          <button class="assign-chip" onclick="setAssignFilter('done')">Сдано</button>
+        </div>
+      </div>
+      <div class="assign-search-wrap">
+        <input class="assign-search" id="assign-search" type="text" placeholder="Поиск заданий…" oninput="filterAssignments(this.value)">
+      </div>
+      <div class="assign-stats" id="assign-stats" style="margin-bottom:8px"></div>
+      <div class="subj-filter-row" id="subj-filter-row" style="display:none"></div>
+      <div id="assignments-list"><div id="assignments-sk"></div></div>
+    </div>
+
+    <!-- Col 2: Tests / Teacher class summary -->
+    <div class="widget" id="w-teacher-summary" style="display:none">
+      <div class="w-head"><div class="w-title">Мои классы</div></div>
+      <div class="class-summary" id="teacher-summary-body"></div>
+    </div>
+    <div class="widget" id="w-tests">
+      <div class="w-head"><div class="w-title">Тесты</div></div>
+      <div class="subj-mini-grid" id="subjects-list"><div id="subjects-sk"></div></div>
+    </div>
+
+    <!-- Col 3: Progress -->
+    <div class="widget" id="w-progress-col">
+      <!-- Combined Activity Widget (heatmap + streak calendar) -->
+      <div id="w-activity" style="display:none">
+        <div class="w-head">
+          <div class="w-title">Активность</div>
+          <div class="act-tabs">
+            <button class="act-tab active" onclick="switchActTab('heatmap',this)">Карта</button>
+            <button class="act-tab" onclick="switchActTab('calendar',this)">Месяц</button>
+          </div>
+        </div>
+        <!-- Pane 1: Heatmap -->
+        <div class="act-pane visible" id="act-heatmap-pane">
+          <div style="display:flex;justify-content:flex-end;margin-bottom:6px">
+            <div class="act-scale-btns" id="hm-scale-btns">
+              <button class="act-scale-btn" onclick="setHmScale(6,this)">6н</button>
+              <button class="act-scale-btn active" onclick="setHmScale(12,this)">12н</button>
+              <button class="act-scale-btn" onclick="setHmScale(26,this)">6м</button>
+            </div>
+          </div>
+          <div id="activity-heatmap"></div>
+        </div>
+        <!-- Pane 2: Streak calendar -->
+        <div class="act-pane" id="act-cal-pane">
+          <div id="streak-cal-body"></div>
+        </div>
+      </div>
+      <!-- Day popup (floating) -->
+      <div class="hm-day-popup" id="hm-day-popup" style="display:none"></div>
+      <!-- Subject progress bars -->
+      <div id="w-subj-progress" style="display:none;margin-top:18px">
+        <div class="w-head"><div class="w-title">По предметам</div></div>
+        <div id="subj-progress-bars"></div>
+      </div>
+      <!-- Last results -->
+      <div id="w-last-results" style="display:none;margin-top:18px">
+        <div class="w-head">
+          <div class="w-title">Результаты</div>
+          <button class="w-more" onclick="toggleFullHistory()">Все</button>
+        </div>
+        <div id="last-results-list"></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- My submissions compact widget (student only) -->
+  <div class="full-row" id="w-my-subs" style="display:none">
+    <div class="widget">
+      <div class="w-head">
+        <div class="w-title">Мои сдачи</div>
+        <a class="ae-btn-submit" href="/homework" style="text-decoration:none">Загрузить работу</a>
+      </div>
+      <div class="my-subs-list" id="my-subs-list"></div>
+    </div>
+  </div>
+
+  <!-- Leaderboard (students only) -->
+  <div class="full-row" id="lb-section" style="display:none">
+    <div class="lb-widget">
+      <div class="lb-head">
+        <div class="lb-title" id="lb-title">Рейтинг</div>
+        <div style="display:flex;gap:8px;align-items:center">
+          <select class="lb-class-sel" id="lb-class-sel" onchange="loadLeaderboard()">
+            <option value="">Все</option>
+          </select>
+          <div class="lb-tabs">
+            <button class="lb-tab active" onclick="setLbPeriod('week',this)">Неделя</button>
+            <button class="lb-tab" onclick="setLbPeriod('all',this)">Всё время</button>
+          </div>
+        </div>
+      </div>
+      <div class="lb-list" id="lb-list"></div>
+    </div>
+  </div>
+
+  <!-- Challenges (students only) -->
+  <div class="full-row" id="ch-section" style="display:none">
+    <div class="widget ch-widget">
+      <div class="w-head"><div class="w-title" id="ch-title">Испытания недели</div></div>
+      <div class="ch-list" id="ch-list"></div>
+    </div>
+  </div>
+
+  <!-- Statistics Charts (students only) -->
+  <div class="full-row stats-section" id="stats-section" style="display:none">
+    <div class="widget">
+      <div class="w-head"><div class="w-title">Статистика</div></div>
+      <div class="stats-summary-chips" id="stats-chips"></div>
+      <div class="stats-grid">
+        <div class="stats-chart-card">
+          <div class="stats-chart-title">Средний балл по неделям</div>
+          <div class="stats-bar-chart" id="stats-weekly-chart"></div>
+          <div class="stats-bar-labels" id="stats-weekly-labels"></div>
+        </div>
+        <div class="stats-chart-card">
+          <div class="stats-chart-title">Тренд последних сессий</div>
+          <div class="stats-bar-chart" id="stats-trend-chart"></div>
+        </div>
+        <div class="stats-chart-card">
+          <div class="stats-chart-title">По предметам</div>
+          <div id="stats-subjects-chart"></div>
+        </div>
+        <div class="stats-chart-card">
+          <div class="stats-chart-title">Прогресс курсов</div>
+          <div id="stats-courses-chart"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Full width: Theory -->
+  <div class="full-row">
+    <div class="widget" id="w-theory-progress" style="display:none">
+      <div class="w-head"><div class="w-title">Теория — в процессе</div></div>
+      <div id="theory-progress-grid" class="theory-courses-grid"></div>
+    </div>
+  </div>
+
+  <!-- Full width: Full history (hidden) -->
+  <div class="full-row">
+    <div class="widget" id="w-full-history" style="display:none">
+      <div class="w-head">
+        <div class="w-title">История сессий</div>
+        <button class="w-more" onclick="toggleFullHistory()">Свернуть</button>
+      </div>
+      <div id="history-wrap"><div id="history-sk"></div></div>
+      <div id="history-more-wrap" style="text-align:center;margin-top:16px;display:none">
+        <button class="qa-btn" id="history-more-btn" onclick="loadMoreHistory()" style="margin:0 auto">Загрузить ещё</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Full width: Full progress (hidden) -->
+  <div class="full-row">
+    <div class="widget" id="w-full-progress" style="display:none">
+      <div class="w-head"><div class="w-title">Детальный прогресс</div></div>
+      <div id="progress-wrap"></div>
+    </div>
+  </div>
+
+  </div><!-- /.container -->
+
+  <!-- Heatmap tooltip (floating) -->
+  <div class="hm-tip" id="hm-tip"></div>
+
+  <!-- Keyboard hints (floating) -->
+  <div class="kb-hint" id="kb-hint">
+    <span><span class="kb-key">N</span> Новый тест</span>
+    <span><span class="kb-key">T</span> Библиотека</span>
+    <span><span class="kb-key">B</span> Доска</span>
+    <span><span class="kb-key">?</span> Подсказки</span>
+  </div>
+
+  <!-- Join modal -->
+  <div class="modal-overlay" id="join-modal" onclick="if(event.target===this)closeJoinModal()">
+    <div class="modal">
+      <div class="modal-title">Вступить в класс</div>
+      <input class="form-input" id="join-code" placeholder="Код приглашения" />
+      <div style="font-size:0.78rem;color:var(--text-3);margin-top:8px">Попросите учителя поделиться кодом или ссылкой</div>
+      <div class="modal-footer">
+        <button class="btn-cancel" onclick="closeJoinModal()">Отмена</button>
+        <button class="btn-join" id="btn-do-join" onclick="doJoin()">Вступить</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Quick-start test modal -->
+  <div class="modal-overlay" id="qs-modal" onclick="if(event.target===this)closeQuickStart()">
+    <div class="modal" style="max-width:480px">
+      <div class="modal-title">Быстрый тест</div>
+      <div class="qs-subjects" id="qs-subjects"></div>
+      <div class="qs-options">
+        <div class="qs-row">
+          <span class="qs-label">Режим</span>
+          <select class="qs-select" id="qs-mode">
+            <option value="exam">Экзамен</option>
+            <option value="practice">Тренировка</option>
+            <option value="random">Случайный</option>
+          </select>
+        </div>
+        <div class="qs-row">
+          <span class="qs-label">Вопросов</span>
+          <input class="qs-input" id="qs-count" type="number" min="5" max="50" value="25">
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button class="btn-cancel" onclick="closeQuickStart()">Отмена</button>
+        <button class="btn-join" onclick="doQuickStart()">Начать</button>
+      </div>
+    </div>
+  </div>
+
+  <script src="/js/api.js"></script>
+  <script src="/js/notifications.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+  <script>
+    const { user, isTeacher, isAdmin } = LS.initPage();
+    if (!user) throw new Error('Not logged in');
+
+    document.getElementById('user-name').textContent = user?.name?.split(' ')[0] || 'Студент';
+    document.getElementById('dh-avatar').textContent =
+      (user?.name || 'LS').split(' ').slice(0, 2).map(w => w[0]?.toUpperCase() || '').join('') || 'LS';
+    LS.showBoardIfAllowed();
+    if (isTeacher) {
+      document.getElementById('btn-admin').style.display      = '';
+      document.getElementById('btn-classes').style.display    = '';
+      const h = new Date().getHours();
+      const gr = h < 6 ? 'Доброй ночи' : h < 12 ? 'Доброе утро' : h < 18 ? 'Добрый день' : 'Добрый вечер';
+      document.getElementById('dh-greeting').innerHTML = `${gr}, <span>${esc(user?.name?.split(' ')[0] || 'Администратор')}</span>`;
+      document.getElementById('dh-sub').textContent = user?.role === 'admin' ? 'Панель администратора' : 'Панель учителя';
+      // teacher/admin: hide student-only widgets, show admin compact layout
+      document.querySelectorAll('.action-zone,.main-grid,#w-theory-progress,.full-row').forEach(el => { if (el) el.style.display = 'none'; });
+      document.getElementById('admin-actions-zone').style.display = '';
+      document.getElementById('admin-grid').style.display = '';
+    } else {
+      // Приветствие по времени суток
+      const h = new Date().getHours();
+      const gr = h < 6 ? 'Доброй ночи' : h < 12 ? 'Доброе утро' : h < 18 ? 'Добрый день' : 'Добрый вечер';
+      document.getElementById('dh-greeting').innerHTML =
+        `${gr}, <span id="user-name2">${esc(user?.name?.split(' ')[0] || 'Студент')}</span>`;
+      reIcons();
+    }
+
+    // Auto-join from invite link (?join=CODE)
+    const joinCode = new URLSearchParams(location.search).get('join');
+    if (joinCode) { history.replaceState({}, '', location.pathname); openJoinModal(joinCode); }
+
+    const SUBJ  = { bio:'Биология', chem:'Химия', math:'Математика', phys:'Физика', other:'Задание' };
+    const ICONS = { bio:'dna', chem:'flask-conical', math:'calculator', phys:'zap', other:'file-check' };
+    const MODES = { exam:'Экзамен', practice:'Тренировка', repeat:'Обычный', ct:'ЦТ/ЦЭ', topic:'По теме', random:'Случайный' };
+    const SUBJ_COLORS = { bio:'#9B5DE5', chem:'#06D6A0', math:'#06B6D4', phys:'#F59E0B', other:'#7c3aed' };
+
+    // helper: inline Lucide icon for dynamic HTML (requires lucide.createIcons() after render)
+    function lci(name, style = '') {
+      return `<i data-lucide="${name}"${style ? ` style="${style}"` : ''}></i>`;
+    }
+    function reIcons() { if (window.lucide) lucide.createIcons(); }
+
+
+    /* ══ TOGGLE FULL HISTORY ═══════════════════════════════════════════ */
+    let _fullHistoryLoaded = false;
+    function toggleFullHistory() {
+      const full = document.getElementById('w-full-history');
+      const mini = document.getElementById('w-last-results');
+      const isOpen = full.style.display !== 'none';
+      full.style.display = isOpen ? 'none' : '';
+      mini.style.display = isOpen ? '' : 'none';
+      if (!isOpen && !_fullHistoryLoaded) {
+        _fullHistoryLoaded = true;
+        loadHistory();
+      }
+    }
+
+    /* ══ GAMIFICATION BAR ═════════════════════════════════════════════════ */
+    async function loadGamification() {
+      if (isTeacher) return;
+      try {
+        const g = await LS.getGamificationMe();
+        document.getElementById('gam-bar').style.display = '';
+        document.getElementById('gam-lvl').textContent = g.level || 1;
+        document.getElementById('gam-rank').textContent = g.rank || 'Новичок';
+        const xp = g.xp || 0, min = g.levelMin || 0, max = g.levelMax || 100;
+        const pct = max > min ? Math.round((xp - min) / (max - min) * 100) : 0;
+        // Animated XP count-up
+        const xpText = document.getElementById('gam-xp-text');
+        const xpTarget = xp - min, xpMax = max - min;
+        const fillEl = document.getElementById('gam-fill');
+        fillEl.style.width = '0%';
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            fillEl.style.width = Math.min(100, pct) + '%';
+          });
+        });
+        // Count-up animation for XP text
+        const countDur = 800;
+        const countStart = performance.now();
+        function countTick(now) {
+          const t = Math.min(1, (now - countStart) / countDur);
+          const ease = 1 - Math.pow(1 - t, 3);
+          const cur = Math.round(xpTarget * ease);
+          xpText.textContent = `${cur} / ${xpMax} XP`;
+          if (t < 1) requestAnimationFrame(countTick);
+        }
+        requestAnimationFrame(countTick);
+        document.getElementById('gam-streak').textContent = g.streak || 0;
+        document.getElementById('gam-streak-icon').innerHTML = lci('flame', 20);
+        // Daily goal ring
+        const dg = g.dailyGoal;
+        if (dg) {
+          const testsPct = dg.tests_target > 0 ? Math.min(100, Math.round(dg.tests_done / dg.tests_target * 100)) : 0;
+          const xpPct    = dg.xp_target > 0    ? Math.min(100, Math.round(dg.xp_earned  / dg.xp_target * 100))   : 0;
+          const avgPct = Math.round((testsPct + xpPct) / 2);
+          const r = 15, circ = 2 * Math.PI * r, dash = (avgPct / 100 * circ).toFixed(1);
+          const color = avgPct >= 100 ? '#059652' : '#9B5DE5';
+          document.getElementById('gam-goal-ring').innerHTML = `
+            <svg width="40" height="40" viewBox="0 0 40 40">
+              <circle cx="20" cy="20" r="${r}" fill="none" stroke="rgba(15,23,42,0.07)" stroke-width="4"/>
+              <circle cx="20" cy="20" r="${r}" fill="none" stroke="${color}" stroke-width="4"
+                stroke-dasharray="${dash} ${circ.toFixed(1)}" stroke-linecap="round" transform="rotate(-90 20 20)"/>
+              <text x="20" y="24" text-anchor="middle" font-family="Unbounded,sans-serif" font-size="8" font-weight="800" fill="${color}">${avgPct}%</text>
+            </svg>`;
+          // Show tier label
+          const tierLabels = { easy: 'Лёгкая', medium: 'Средняя', hard: 'Тяжёлая' };
+          document.getElementById('gam-goal-label').textContent = tierLabels[g.goalTier] || 'цель дня';
+          window._currentGoalTier = g.goalTier || 'medium';
+        }
+        // Apply avatar frame
+        if (g.avatarFrame && g.avatarFrame.css) {
+          const dhAv = document.getElementById('dh-avatar');
+          if (dhAv) dhAv.style.cssText += ';' + g.avatarFrame.css;
+          const navAv = document.getElementById('nav-avatar');
+          if (navAv) navAv.style.cssText += ';' + g.avatarFrame.css;
+        }
+      } catch { /* silent */ }
+    }
+
+    const _tierCycle = ['easy', 'medium', 'hard'];
+    const _tierLabels = { easy: 'Лёгкая', medium: 'Средняя', hard: 'Тяжёлая' };
+    let _cyclingGoal = false;
+    async function cycleGoalTier() {
+      if (_cyclingGoal) return;
+      _cyclingGoal = true;
+      const cur = window._currentGoalTier || 'medium';
+      const idx = _tierCycle.indexOf(cur);
+      const next = _tierCycle[(idx + 1) % _tierCycle.length];
+      try {
+        await LS.setGoalTier(next);
+        window._currentGoalTier = next;
+        document.getElementById('gam-goal-label').textContent = _tierLabels[next];
+        LS.toast(`Цель дня: ${_tierLabels[next]}`, 'info', 2000);
+        // Refresh gam bar to show updated targets (will apply from tomorrow)
+      } catch (e) { LS.toast(e.message, 'error'); }
+      finally { _cyclingGoal = false; }
+    }
+
+    /* ══ LEADERBOARD ═══════════════════════════════════════════════════ */
+    let _lbPeriod = 'week';
+    function setLbPeriod(p, btn) {
+      _lbPeriod = p;
+      btn.parentElement.querySelectorAll('.lb-tab').forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+      loadLeaderboard();
+    }
+    async function loadLeaderboard() {
+      if (isTeacher) return;
+      try {
+        const sel = document.getElementById('lb-class-sel');
+        const classId = sel.value || undefined;
+        const resp = await LS.getLeaderboard({ period: _lbPeriod, class_id: classId });
+        const data = Array.isArray(resp) ? resp : (resp.rows || []);
+        const list = document.getElementById('lb-list');
+        const me = LS.getUser();
+        if (!data.length) {
+          list.innerHTML = '<div class="lb-empty">Пока нет данных</div>';
+          return;
+        }
+        list.innerHTML = data.slice(0, 10).map((u, i) => {
+          const pos = i + 1;
+          const posClass = pos === 1 ? 'gold' : pos === 2 ? 'silver' : pos === 3 ? 'bronze' : '';
+          const initials = (u.name || 'U').split(' ').slice(0, 2).map(w => (w[0] || '').toUpperCase()).join('') || 'U';
+          const isMe = me && (u.user_id || u.id) === me.id;
+          return `<div class="lb-row${isMe ? ' me' : ''}">
+            <div class="lb-pos ${posClass}">${pos}</div>
+            <div class="lb-avatar">${esc(initials)}</div>
+            <div class="lb-info">
+              <div class="lb-name">${esc(u.name)}${isMe ? ' (вы)' : ''}</div>
+              <div class="lb-rank">Ур. ${u.level || 1}</div>
+            </div>
+            <div class="lb-xp">${u.sort_xp || u.xp || 0} XP</div>
+          </div>`;
+        }).join('');
+        document.getElementById('lb-section').style.display = '';
+        document.getElementById('lb-title').innerHTML = lci('trophy', 18) + ' Рейтинг';
+      } catch { /* silent */ }
+    }
+    async function _populateLbClasses() {
+      try {
+        const classes = await LS.myClasses();
+        if (classes && classes.length) {
+          const sel = document.getElementById('lb-class-sel');
+          classes.forEach(c => {
+            const opt = document.createElement('option');
+            opt.value = c.id;
+            opt.textContent = c.name;
+            sel.appendChild(opt);
+          });
+        }
+      } catch {}
+    }
+
+    /* ══ CHALLENGES ════════════════════════════════════════════════════ */
+    async function loadChallenges() {
+      if (isTeacher) return;
+      try {
+        const data = await LS.getChallenges();
+        if (!data || !data.length) return;
+        const list = document.getElementById('ch-list');
+        list.innerHTML = data.map(c => {
+          const pct = c.target > 0 ? Math.min(100, Math.round(c.progress / c.target * 100)) : 0;
+          const done = c.completed;
+          const claimed = c.claimed;
+          const icon = done ? lci('check-circle', 20) : c.type === 'topic_tests' ? lci('book-open', 20) : c.type === 'high_score' ? lci('target', 20) : c.type === 'perfect' ? lci('diamond', 20) : lci('running', 20);
+          return `<div class="ch-item${done ? ' done' : ''}${claimed ? ' claimed' : ''}">
+            <div class="ch-icon">${icon}</div>
+            <div class="ch-body">
+              <div class="ch-title">${esc(c.title)}</div>
+              <div class="ch-desc">${esc(c.description)}</div>
+              <div class="ch-prog">
+                <div class="ch-bar"><div class="ch-fill" style="width:${pct}%"></div></div>
+                <div class="ch-pct">${c.progress}/${c.target}</div>
+              </div>
+            </div>
+            <div class="ch-reward">
+              <div class="ch-xp">+${c.xp_reward} XP</div>
+              ${done && !claimed ? `<button class="ch-claim" onclick="claimCh(${c.id},this)">Забрать</button>` : ''}
+              ${claimed ? '<div class="ch-claimed-badge">Получено</div>' : ''}
+            </div>
+          </div>`;
+        }).join('');
+        document.getElementById('ch-section').style.display = '';
+        document.getElementById('ch-title').innerHTML = lci('target', 18) + ' Испытания недели';
+      } catch {}
+    }
+    async function claimCh(id, btn) {
+      btn.disabled = true;
+      btn.textContent = '...';
+      try {
+        const r = await LS.claimChallenge(id);
+        LS.toast(`+${r.xp} XP за испытание!`, 'success');
+        loadChallenges();
+        loadGamification();
+      } catch (e) { LS.toast(e.message, 'error'); btn.disabled = false; btn.textContent = 'Забрать'; }
+    }
+
+    /* ══ ANIMATED COUNTER ════════════════════════════════════════════════ */
+    function animateCounter(el, target, suffix = '') {
+      if (!el) return;
+      const duration = 700;
+      const start = performance.now();
+      const step = t => {
+        const p = Math.min((t - start) / duration, 1);
+        const e = 1 - Math.pow(1 - p, 3);
+        el.textContent = Math.round(target * e) + suffix;
+        if (p < 1) requestAnimationFrame(step);
+      };
+      requestAnimationFrame(step);
+    }
+
+    /* ══ STAT RING SVG HELPER ════════════════════════════════════════════ */
+    function statRingSvg(value, max, color, label) {
+      const pct = max > 0 ? Math.min(100, Math.round(value / max * 100)) : 0;
+      const r = 15, circ = 2 * Math.PI * r;
+      const dash = (pct / 100 * circ).toFixed(1);
+      return `<svg width="40" height="40" viewBox="0 0 40 40">
+        <circle cx="20" cy="20" r="${r}" fill="none" stroke="rgba(15,23,42,0.07)" stroke-width="4"/>
+        <circle cx="20" cy="20" r="${r}" fill="none" stroke="${color}" stroke-width="4"
+          stroke-dasharray="${dash} ${circ.toFixed(1)}" stroke-linecap="round"
+          transform="rotate(-90 20 20)"/>
+        <text x="20" y="24" text-anchor="middle" font-family="Unbounded,sans-serif" font-size="9" font-weight="800" fill="${color}">${value}</text>
+      </svg>
+      <span class="sr-label">${label}</span>`;
+    }
+
+    /* ══ STATS STRIP ═════════════════════════════════════════════════════ */
+    async function loadStats() {
+      if (isTeacher) return;
+      document.getElementById('dh-stats').style.display = '';
+      try {
+        const data = await LS.getHistory(1, 60);
+        const rows = data.rows || [];
+
+        // Total sessions
+        const totalSessions = data.total || 0;
+
+        // Average %
+        const done = rows.filter(r => r.score !== null && r.total > 0);
+        const avg  = done.length
+          ? Math.round(done.reduce((s, r) => s + r.score / r.total * 100, 0) / done.length)
+          : 0;
+        const avgColor = avg >= 75 ? '#059652' : avg >= 50 ? '#F59E0B' : '#E0335E';
+
+        // Streak — consecutive days going back from today
+        const dayKeys = new Set(rows.map(r => {
+          const d = parseDate(r.started_at);
+          return d.getFullYear() + '-' + d.getMonth() + '-' + d.getDate();
+        }));
+        let streak = 0;
+        const now = new Date();
+        for (let i = 0; i <= 60; i++) {
+          const d = new Date(now);
+          d.setDate(d.getDate() - i);
+          const k = d.getFullYear() + '-' + d.getMonth() + '-' + d.getDate();
+          if (dayKeys.has(k)) { streak++; }
+          else if (i > 1) break;
+        }
+
+        document.getElementById('sr-sessions').innerHTML = statRingSvg(totalSessions, Math.max(totalSessions, 1), '#9B5DE5', 'сессий');
+        document.getElementById('sr-avg').innerHTML = statRingSvg(avg, 100, avgColor, 'средний %');
+        document.getElementById('sr-streak').innerHTML = statRingSvg(streak, Math.max(streak, 7), '#F59E0B', 'подряд');
+        document.getElementById('sr-pending').innerHTML = statRingSvg(0, 1, '#06D6E0', 'ожидают');
+      } catch { /* тихо */ }
+    }
+
+    function updatePendingStat(list) {
+      if (isTeacher) return;
+      const pending = (list || []).filter(a =>
+        !a.session_status && (!a.deadline || new Date(a.deadline) > new Date())
+      ).length;
+      const el = document.getElementById('sr-pending');
+      if (el) el.innerHTML = statRingSvg(pending, Math.max(pending, 1), '#06D6E0', 'ожидают');
+    }
+
+    /* ══ ПРЕДМЕТЫ ════════════════════════════════════════════════════════ */
+    async function loadSubjects() {
+      const list = document.getElementById('subjects-list');
+      try {
+        const SUBJ_MODE_LABELS = { exam:'Экзамен', practice:'Пробный тест', topic:'По теме', random:'Случайный' };
+        const subjects = await LS.getSubjects();
+        list.innerHTML = subjects.map((s, si) => {
+          const mode   = s.default_mode  || 'exam';
+          const count  = s.default_count || 25;
+          const testId = s.default_test_id || null;
+          const modeLabel = SUBJ_MODE_LABELS[mode] || mode;
+          const color  = SUBJ_COLORS[s.slug] || '#9B5DE5';
+          const iconName = ICONS[s.slug] || 'book-open';
+          const srcLabel = testId ? 'Фиксированный тест' : `${count} вопросов`;
+          return `<div class="subj-mini-card stagger-item" style="--i:${si}" onclick="startSubjectTest('${s.slug}','${mode}',${count},${testId||'null'})">
+            <div class="smc-icon" style="background:${color}">${lci(iconName)}</div>
+            <div class="smc-body">
+              <div class="smc-name">${esc(s.name)}</div>
+              <div class="smc-meta">${modeLabel} · ${srcLabel}</div>
+            </div>
+            <i data-lucide="chevron-right" class="smc-arrow"></i>
+          </div>`;
+        }).join('');
+        reIcons();
+      } catch (e) {
+        list.innerHTML = `<div class="empty">Ошибка: ${esc(e.message)}</div>`;
+      }
+    }
+
+    function startSubjectTest(slug, mode = 'exam', count = 25, testId = null) {
+      let url = `/test-run?subject=${slug}&mode=${mode}&count=${count}`;
+      if (testId) url += `&test=${testId}`;
+      window.location.href = url;
+    }
+
+    /* ══ ЗАДАНИЯ ══════════════════════════════════════════════════════════ */
+    async function loadAssignments() {
+      try {
+        const [list, myClassesList] = isTeacher
+          ? [await LS.teacherAssignments(), []]
+          : await Promise.all([LS.myAssignments(), LS.myClasses().catch(() => [])]);
+
+        if (!isTeacher) await loadMySubmissions();
+
+        const alreadyInClass = !isTeacher && myClassesList.length > 0;
+
+        if (!isTeacher) {
+          document.getElementById('btn-join').style.display  = alreadyInClass ? 'none' : '';
+        }
+
+        if (!list.length) {
+          if (!isTeacher) {
+            document.getElementById('assignments-list').innerHTML = alreadyInClass
+              ? `<div class="rich-empty">
+                  <svg class="rich-empty-svg" width="110" height="84" viewBox="0 0 110 84" fill="none">
+                    <rect x="22" y="18" width="66" height="54" rx="9" fill="rgba(155,93,229,0.07)" stroke="#9B5DE5" stroke-width="1.8"/>
+                    <rect x="38" y="10" width="34" height="16" rx="5" fill="white" stroke="#9B5DE5" stroke-width="1.8"/>
+                    <line x1="36" y1="40" x2="74" y2="40" stroke="#9B5DE5" stroke-width="2" stroke-linecap="round"/>
+                    <line x1="36" y1="51" x2="68" y2="51" stroke="#06D6E0" stroke-width="2" stroke-linecap="round"/>
+                    <line x1="36" y1="62" x2="58" y2="62" stroke="#06D6E0" stroke-width="2" stroke-linecap="round"/>
+                  </svg>
+                  <div class="rich-empty-title">Заданий пока нет</div>
+                  <div class="rich-empty-sub">Учитель ещё не назначил задания. Они появятся здесь автоматически.</div>
+                </div>`
+              : `<div class="rich-empty">
+                  <svg class="rich-empty-svg" width="110" height="84" viewBox="0 0 110 84" fill="none">
+                    <circle cx="55" cy="42" r="28" fill="rgba(155,93,229,0.07)" stroke="#9B5DE5" stroke-width="1.8"/>
+                    <path d="M44 42 L52 50 L66 34" stroke="#06D6E0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+                    <circle cx="55" cy="42" r="18" fill="none" stroke="rgba(155,93,229,0.25)" stroke-width="1" stroke-dasharray="4 3"/>
+                  </svg>
+                  <div class="rich-empty-title">Вы ещё не в классе</div>
+                  <div class="rich-empty-sub">Попросите учителя поделиться кодом приглашения и вступите в класс, чтобы получать задания</div>
+                  <button class="rich-empty-btn" onclick="openJoinModal()">Вступить в класс</button>
+                </div>`;
+          } else {
+            document.getElementById('assignments-list').innerHTML = `<div class="empty" style="padding:20px 0">Заданий пока нет.</div>`;
+          }
+          return;
+        }
+
+        // ── badge на кнопке таба ──
+        if (!isTeacher) {
+          const lsKey    = 'ls_assign_seen_' + (LS.getUser()?.id || '');
+          const lastSeen = localStorage.getItem(lsKey);
+          const newCount = lastSeen
+            ? list.filter(a => !a.session_status && parseDate(a.created_at) > parseDate(lastSeen)).length
+            : 0;
+          const badge = document.getElementById('assignments-badge');
+          if (newCount > 0) { badge.textContent = newCount; badge.style.display = ''; }
+          else badge.style.display = 'none';
+          localStorage.setItem(lsKey, new Date().toISOString());
+          updatePendingStat(list);
+
+          // show toolbar + subject chips for students
+          document.getElementById('assign-chips-wrap').style.display = '';
+          buildSubjChips(list);
+        }
+
+        _allAssignmentsList = list;
+        renderAssignmentsList();
+        if (!isTeacher) {
+          loadActionBanner(list);
+          showDeadlineToast(list);
+        }
+
+      } catch (e) {
+        console.error('Assignments error:', e.message);
+        document.getElementById('assignments-list').innerHTML =
+          `<div class="empty">Не удалось загрузить задания</div>`;
+      }
+    }
+
+    let _allAssignmentsList = [];
+    let _assignFilter = 'all';
+
+    function setAssignFilter(f) {
+      _assignFilter = f;
+      document.querySelectorAll('.assign-chip').forEach(c => c.classList.toggle('active', c.textContent.trim() === {all:'Все',active:'Активные',done:'Сдано'}[f]));
+      renderAssignmentsList();
+    }
+
+    function toggleAssignGroup(grpId) {
+      const hdr  = document.getElementById('grp-hdr-'  + grpId);
+      const body = document.getElementById('grp-body-' + grpId);
+      hdr .classList.toggle('collapsed');
+      body.classList.toggle('collapsed');
+    }
+
+    /* ── Urgency sort score (lower = shown first) ── */
+    function urgencyScore(a) {
+      if (a.session_status === 'in_progress') return -4;       // in progress <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> top
+      const dlMs = a.deadline ? new Date(a.deadline) - Date.now() : Infinity;
+      if (dlMs < 0)                              return -3;    // overdue
+      if (dlMs < 24 * 3600 * 1000)              return -2;    // urgent <24h
+      if (dlMs < Infinity)                       return dlMs;  // sorted by deadline
+      return 1e12;                                             // no deadline <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> last
+    }
+
+    function buildAssignCard(a, idx, isFirst = false) {
+      const dl        = a.deadline ? new Date(a.deadline).toLocaleDateString('ru',{day:'numeric',month:'short'}) : null;
+      const dlMs      = a.deadline ? new Date(a.deadline) - Date.now() : Infinity;
+      const isUrgent  = !a.session_status && dlMs > 0 && dlMs < 24 * 3600 * 1000;
+      const hoursLeft = isUrgent ? Math.ceil(dlMs / 3600000) : 0;
+      const sColor    = SUBJ_COLORS[a.subject_slug] || '#9B5DE5';
+      const iconName  = ICONS[a.subject_slug] || 'file-text';
+      const classStr  = a.class_id ? esc(a.class_name) : 'Личное';
+
+      /* ── Teacher view ── */
+      if (isTeacher) {
+        const done  = a.completed_count || 0;
+        const total = a.total_members   || 0;
+        const pct   = total > 0 ? Math.round((done / total) * 100) : 0;
+        const meta  = [classStr, SUBJ[a.subject_slug] || a.subject_slug, dl ? `до ${dl}` : null].filter(Boolean).join(' · ');
+        return `<div class="asgn-wrap"><div class="asgn-row stagger-item" style="--i:${idx};--ac:${sColor}" id="asgn-row-${a.id}" onclick="toggleAsgn(${a.id},event)">
+          <div class="ar-icon" style="background:${sColor}18;color:${sColor}">${lci(iconName)}</div>
+          <div class="ar-body"><div class="ar-title">${esc(a.title)}</div><div class="ar-meta">${meta}</div></div>
+          <div class="ar-progress">
+            <div class="ar-prog-bar"><div class="ar-prog-fill" style="width:${pct}%;background:${sColor}"></div></div>
+            <span class="ar-prog-text">${done} / ${total}</span>
+          </div>
+          <a class="ar-btn-ghost" href="/classes" onclick="event.stopPropagation()">Подробнее</a>
+        </div>
+        <div class="asgn-expand" id="asgn-exp-${a.id}">
+          <div class="ae-row">
+            <div class="ae-pills">
+              <span class="ae-pill">${lci('layers')} ${MODES[a.mode]||a.mode}</span>
+              <span class="ae-pill">${lci('list')} ${a.count} вопросов</span>
+              ${a.is_homework ? `<span class="ae-pill">${lci('book-open')} Домашнее задание</span>` : ''}
+            </div>
+            <a class="ae-btn-result" href="/classes" onclick="event.stopPropagation()">Открыть результаты</a>
+          </div>
+        </div></div>`;
+      }
+
+      /* ── Upload-only homework (no test, no file) ── */
+      if (a.is_homework && !a.file_id && !a.session_id && a.count <= 1 && (!a.subject_slug || a.subject_slug === 'other')) {
+        const over = a.deadline && new Date(a.deadline) < new Date();
+        const sub = _mySubmissions.get(a.id);
+        const metaParts = [classStr, dl ? `до ${dl}` : null,
+          isUrgent ? `<span class="ar-tag-urgent"><i data-lucide="zap" style="width:10px;height:10px;vertical-align:-1px"></i> ${hoursLeft} ч</span>` : null].filter(Boolean);
+        const submitBtn = sub
+          ? `<span class="ar-sub-chip s-${(SUB_STATUS[sub.status]||SUB_STATUS.new).cls}">${lci((SUB_STATUS[sub.status]||SUB_STATUS.new).icon,'width:11px;height:11px')} ${(SUB_STATUS[sub.status]||SUB_STATUS.new).label}</span>`
+          : `<a class="ar-btn" href="/homework" onclick="event.stopPropagation()" style="background:var(--violet);text-decoration:none;color:#fff">Сдать работу</a>`;
+        return `<div class="asgn-wrap"><div class="asgn-row stagger-item${over?' over':isUrgent?' urgent':''}" style="--i:${idx};--ac:#7c3aed" id="asgn-row-${a.id}" onclick="toggleAsgn(${a.id},event)">
+          <div class="ar-icon" style="background:rgba(124,58,237,0.1);color:#7c3aed">${lci('upload')}</div>
+          <div class="ar-body"><div class="ar-title">${esc(a.title)}</div><div class="ar-meta">${metaParts.join(' · ')}</div></div>
+          <div class="ar-right">${submitBtn}</div>
+        </div>
+        <div class="asgn-expand" id="asgn-exp-${a.id}">
+          <div class="ae-row">
+            <div class="ae-pills">
+              <span class="ae-pill">${lci('upload')} Загрузить работу</span>
+              ${a.is_homework ? `<span class="ae-pill">${lci('book-open')} Домашнее задание</span>` : ''}
+            </div>
+            ${!sub ? `<a class="ae-btn" href="/homework" onclick="event.stopPropagation()" style="background:var(--violet);text-decoration:none;color:#fff">Прикрепить файл</a>` : ''}
+          </div>
+          ${buildSubmitStrip(a)}
+        </div></div>`;
+      }
+
+      /* ── File assignment ── */
+      if (a.file_id) {
+        const over = a.deadline && new Date(a.deadline) < new Date();
+        const metaParts = [classStr, SUBJ[a.subject_slug]||a.subject_slug, dl ? `до ${dl}` : null,
+          isUrgent ? `<span class="ar-tag-urgent"><i data-lucide="zap" style="width:10px;height:10px;vertical-align:-1px"></i> ${hoursLeft} ч</span>` : null].filter(Boolean);
+        return `<div class="asgn-wrap"><div class="asgn-row stagger-item${over?' over':isUrgent?' urgent':''}" style="--i:${idx};--ac:#05aab3" id="asgn-row-${a.id}" onclick="toggleAsgn(${a.id},event)">
+          <div class="ar-icon" style="background:rgba(6,214,224,0.1);color:#05aab3">${lci('paperclip')}</div>
+          <div class="ar-body"><div class="ar-title">${esc(a.title)}</div><div class="ar-meta">${metaParts.join(' · ')}</div></div>
+          <div class="ar-right">${buildSubChip(a)}<a class="ar-btn" href="${LS.downloadFileUrl(a.file_id)}" target="_blank" download onclick="event.stopPropagation()">Скачать</a></div>
+        </div>
+        <div class="asgn-expand" id="asgn-exp-${a.id}">
+          <div class="ae-row">
+            <div class="ae-pills">
+              <span class="ae-pill">${lci('file')} Файл для скачивания</span>
+              ${a.file_title ? `<span class="ae-pill">${esc(a.file_title)}</span>` : ''}
+            </div>
+            <a class="ae-btn" href="${LS.downloadFileUrl(a.file_id)}" target="_blank" download onclick="event.stopPropagation()">Скачать файл</a>
+          </div>
+          ${buildSubmitStrip(a)}
+        </div></div>`;
+      }
+
+      /* ── Test assignment ── */
+      const isDone       = a.session_status === 'completed';
+      const inProgress   = a.session_status === 'in_progress';
+      const isRepeat     = a.mode === 'repeat';
+      const maxAtt       = a.max_attempts || 0;
+      const usedAtt      = a.attempts_used ?? 0;
+      const attExhausted = maxAtt > 0 && usedAtt >= maxAtt;
+      const over         = !isDone && !inProgress && a.deadline && new Date(a.deadline) < new Date();
+      const cardCls      = attExhausted ? 'done' : (isDone && !isRepeat) ? 'done' : over ? 'over' : isUrgent ? 'urgent' : '';
+      const pct          = a.percent;
+      const pctCls       = pct >= 75 ? 'hi' : pct >= 50 ? 'mid' : 'lo';
+
+      const metaParts = [
+        classStr,
+        SUBJ[a.subject_slug] || a.subject_slug,
+        a.is_homework ? `<span class="ar-tag-hw">ДЗ</span>` : null,
+        dl ? `до ${dl}` : null,
+        isUrgent  ? `<span class="ar-tag-urgent"><i data-lucide="zap" style="width:10px;height:10px;vertical-align:-1px"></i> ${hoursLeft} ч</span>` : null,
+        over && !isDone ? `<span class="ar-tag-over">просрочено</span>` : null
+      ].filter(Boolean);
+
+      const scoreEl   = (isDone && !isRepeat && pct !== null) ? `<span class="ar-score ${pctCls}">${pct}%</span>` : '';
+      const actionBtn = attExhausted
+        ? `<span class="ar-tag-over" style="font-size:.73rem">Попытки исчерпаны</span>`
+        : (isDone && !isRepeat)
+          ? `<a class="ar-btn-result" href="/test-result?session=${a.session_id}" onclick="event.stopPropagation()">Результат</a>`
+          : `<button class="ar-btn" onclick="startAssignment(event,${a.id},'${a.mode}')">${inProgress ? 'Продолжить' : isDone ? 'Повторить' : 'Начать'}</button>`;
+
+      /* Deadline urgency bar */
+      let dlBarHtml = '';
+      if (a.deadline && !isDone) {
+        const refMs   = 7 * 24 * 3600 * 1000;
+        const fillPct = Math.min(100, Math.max(0, (1 - dlMs / refMs) * 100));
+        const barClr  = fillPct >= 85 ? '#E83A1E' : fillPct >= 60 ? '#F59E0B' : '#06D6A0';
+        const daysLeft = dlMs > 0 ? Math.ceil(dlMs / 86400000) : null;
+        const dlText  = over ? 'Просрочено' : daysLeft === 1 ? 'Остался 1 день' : daysLeft ? `${daysLeft} дн. до дедлайна` : 'Сегодня дедлайн';
+        dlBarHtml = `<div class="ae-dl">
+          <div class="ae-dl-label"><span>${dlText}</span><span>${dl}</span></div>
+          <div class="ae-dl-bar"><div class="ae-dl-fill" style="width:${fillPct}%;background:${barClr}"></div></div>
+        </div>`;
+      }
+
+      const expandActionBtn = attExhausted
+        ? `<span style="font-size:.8rem;color:var(--text-3)">Лимит попыток исчерпан</span>`
+        : (isDone && !isRepeat)
+          ? `<a class="ae-btn-result" href="/test-result?session=${a.session_id}" onclick="event.stopPropagation()">Смотреть результат</a>`
+          : `<button class="ae-btn" onclick="startAssignment(event,${a.id},'${a.mode}')">${inProgress ? 'Продолжить тест' : isDone ? 'Пройти снова' : 'Начать тест'}</button>`;
+
+      return `<div class="asgn-wrap"><div class="asgn-row stagger-item ${cardCls}${isFirst && !isDone ? ' spotlight' : ''}" style="--i:${idx};--ac:${sColor}" id="asgn-row-${a.id}" onclick="toggleAsgn(${a.id},event)">
+        <div class="ar-icon" style="background:${sColor}18;color:${sColor}">${lci(a.is_homework ? 'book-open' : iconName)}</div>
+        <div class="ar-body"><div class="ar-title">${esc(a.title)}</div><div class="ar-meta">${metaParts.join(' · ')}</div></div>
+        <div class="ar-right">${buildSubChip(a)}${scoreEl}${actionBtn}</div>
+      </div>
+      <div class="asgn-expand" id="asgn-exp-${a.id}">
+        <div class="ae-row">
+          <div class="ae-pills">
+            <span class="ae-pill">${lci('layers')} ${MODES[a.mode]||a.mode}</span>
+            <span class="ae-pill">${lci('list')} ${a.count} вопросов</span>
+            ${a.is_homework ? `<span class="ae-pill">${lci('book-open')} Домашнее задание</span>` : ''}
+            ${inProgress ? `<span class="ae-pill" style="color:#059652">${lci('play')} Начат</span>` : ''}
+            ${maxAtt > 0 ? `<span class="ae-pill" style="color:${attExhausted?'#E83A1E':'var(--text-2)'}">${lci('repeat')} ${usedAtt}/${maxAtt} поп.</span>` : (usedAtt > 0 ? `<span class="ae-pill">${lci('repeat')} ${usedAtt} поп.</span>` : '')}
+          </div>
+          ${expandActionBtn}
+        </div>
+        ${dlBarHtml}
+        ${buildSubmitStrip(a)}
+      </div></div>`;
+    }
+
+    function toggleAsgn(id, e) {
+      if (e.target.closest('a,button')) return;
+      const row = document.getElementById('asgn-row-' + id);
+      const exp = document.getElementById('asgn-exp-' + id);
+      if (!row || !exp) return;
+      const isOpen = exp.classList.contains('open');
+      document.querySelectorAll('.asgn-expand.open').forEach(el => {
+        el.classList.remove('open');
+        el.previousElementSibling?.classList.remove('expanded');
+      });
+      if (!isOpen) { exp.classList.add('open'); row.classList.add('expanded'); }
+    }
+
+    let _subjFilter = '';
+
+    function setSubjFilter(slug) {
+      _subjFilter = _subjFilter === slug ? '' : slug;
+      document.querySelectorAll('.sf-chip').forEach(c => c.classList.toggle('active', c.dataset.slug === _subjFilter));
+      if (_subjFilter) {
+        const chip = document.querySelector(`.sf-chip[data-slug="${_subjFilter}"]`);
+        if (chip) {
+          const color = SUBJ_COLORS[_subjFilter] || '#9B5DE5';
+          document.querySelectorAll('.sf-chip').forEach(c => c.style.background = '');
+          chip.style.background = color;
+        }
+      } else {
+        document.querySelectorAll('.sf-chip').forEach(c => c.style.background = '');
+      }
+      renderAssignmentsList();
+    }
+
+    function buildSubjChips(list) {
+      const slugs = [...new Set(list.map(a => a.subject_slug).filter(Boolean))];
+      const row = document.getElementById('subj-filter-row');
+      if (slugs.length < 2) { row.style.display = 'none'; return; }
+      row.style.display = 'flex';
+      row.innerHTML = slugs.map(slug => {
+        const color = SUBJ_COLORS[slug] || '#9B5DE5';
+        return `<button class="sf-chip" data-slug="${slug}" onclick="setSubjFilter('${slug}')" style="color:${color};border-color:${color}33">
+          ${lci(ICONS[slug] || 'book')} ${SUBJ[slug] || slug}
+        </button>`;
+      }).join('');
+      reIcons();
+    }
+
+    function renderAssignmentsList() {
+      const now  = new Date();
+      let   list = _allAssignmentsList;
+
+      // Subject filter
+      if (_subjFilter) list = list.filter(a => a.subject_slug === _subjFilter);
+
+      // B2: Live search filter
+      if (_searchQuery) list = list.filter(a =>
+        (a.title || '').toLowerCase().includes(_searchQuery) ||
+        (SUBJ[a.subject_slug] || '').toLowerCase().includes(_searchQuery) ||
+        (a.class_name || '').toLowerCase().includes(_searchQuery)
+      );
+
+      // For teacher: sorted by deadline, flat
+      if (isTeacher) {
+        const sorted = [...list].sort((a, b) => urgencyScore(a) - urgencyScore(b));
+        document.getElementById('assignments-list').innerHTML =
+          `<div class="tests-list">${sorted.map((a, i) => buildAssignCard(a, i)).join('')}</div>`;
+        reIcons(); return;
+      }
+
+      // Classify
+      function classify(a) {
+        const maxAtt = a.max_attempts || 0;
+        const usedAtt = a.attempts_used ?? 0;
+        if (maxAtt > 0 && usedAtt >= maxAtt) return 'done';
+        if (a.session_status === 'completed' && a.mode !== 'repeat') return 'done';
+        if (!a.file_id && a.deadline && new Date(a.deadline) < now && a.session_status !== 'in_progress') return 'overdue';
+        return 'active';
+      }
+
+      const cActive  = list.filter(a => classify(a) === 'active').sort((a,b) => urgencyScore(a) - urgencyScore(b));
+      const cOverdue = list.filter(a => classify(a) === 'overdue');
+      const cDone    = list.filter(a => classify(a) === 'done');
+
+      // Stats
+      const statParts = [];
+      if (cActive.length)  statParts.push(`<span class="s-active">${cActive.length} активных</span>`);
+      if (cOverdue.length) statParts.push(`<span class="s-overdue">${cOverdue.length} просрочено</span>`);
+      if (cDone.length)    statParts.push(`<span class="s-done">${cDone.length} сдано</span>`);
+      document.getElementById('assign-stats').innerHTML = statParts.join('<span style="color:#DDE2EC"> · </span>');
+
+      // Status filter
+      let filtered;
+      if (_assignFilter === 'active')    filtered = [...cActive, ...cOverdue];
+      else if (_assignFilter === 'done') filtered = cDone;
+      else filtered = null; // grouped
+
+      if (filtered !== null) {
+        if (!filtered.length) {
+          document.getElementById('assignments-list').innerHTML = `<div class="empty" style="padding:20px 0">Нет заданий в этой категории.</div>`;
+          return;
+        }
+        document.getElementById('assignments-list').innerHTML =
+          `<div class="tests-list">${filtered.map((a, i) => buildAssignCard(a, i, i === 0)).join('')}</div>`;
+        reIcons(); return;
+      }
+
+      // "Все": grouped view
+      const todoList = [...cActive, ...cOverdue];
+      const doneList = cDone;
+      let html = '';
+
+      if (todoList.length) {
+        html += `<div class="assign-group-hdr grp-todo" id="grp-hdr-todo" onclick="toggleAssignGroup('todo')">
+          Нужно выполнить <span class="grp-count">${todoList.length}</span>
+          <span class="grp-arrow"><svg class="ic" viewBox="0 0 24 24"><polyline points="2 9 12 21 22 9"/></svg></span>
+        </div>
+        <div class="tests-list assign-group-body" id="grp-body-todo">
+          ${todoList.map((a, i) => buildAssignCard(a, i, i === 0)).join('')}
+        </div>`;
+      }
+
+      if (doneList.length) {
+        const startCollapsed = todoList.length > 0;
+        html += `<div class="assign-group-hdr grp-done${startCollapsed?' collapsed':''}" id="grp-hdr-done" onclick="toggleAssignGroup('done')" style="margin-top:${todoList.length?18:0}px">
+          Выполнено <span class="grp-count">${doneList.length}</span>
+          <span class="grp-arrow"><svg class="ic" viewBox="0 0 24 24"><polyline points="2 9 12 21 22 9"/></svg></span>
+        </div>
+        <div class="tests-list assign-group-body${startCollapsed?' collapsed':''}" id="grp-body-done">
+          ${doneList.map((a, i) => buildAssignCard(a, todoList.length + i)).join('')}
+        </div>`;
+      }
+
+      if (!html) html = `<div class="empty" style="padding:20px 0">Заданий нет.</div>`;
+      document.getElementById('assignments-list').innerHTML = html;
+      reIcons();
+    }
+
+    async function startAssignment(e, id, mode) {
+      const btn = e.currentTarget;
+      btn.disabled = true; btn.textContent = '…';
+      try {
+        const r = await LS.startAssignment(id);
+        if (r.error && r.max_attempts) {
+          LS.toast(`Исчерпан лимит попыток (${r.attempts_used}/${r.max_attempts})`, 'warn');
+          btn.disabled = false; btn.textContent = 'Начать';
+          return;
+        }
+        const aMode = r.assignment_mode || mode || 'exam';
+        if (r.status === 'completed' && aMode !== 'repeat') {
+          window.location.href = `/test-result?session=${r.session_id}`;
+        } else {
+          window.location.href = `/test-run?session=${r.session_id}&assignment_mode=${aMode}`;
+        }
+      } catch (err) {
+        if (err.message?.includes('лимит попыток') || err.message?.includes('Исчерпан')) {
+          LS.toast(err.message, 'warn');
+        } else {
+          LS.toast('Ошибка: ' + err.message, 'error');
+        }
+        btn.disabled = false; btn.textContent = 'Начать';
+      }
+    }
+
+    /* ══ ИСТОРИЯ ══════════════════════════════════════════════════════════ */
+    let _histPage = 1, _histTotal = 0, _histList = null;
+    const HIST_LIMIT = 15;
+
+    function histRingSvg(pct, pc) {
+      const colorMap = { hi: 'var(--green)', mid: 'var(--amber)', lo: 'var(--pink)' };
+      const color = colorMap[pc] || 'var(--text-3)';
+      const circ  = 106.8;
+      const dash  = (pct / 100 * circ).toFixed(1);
+      return `<svg class="hist-ring" width="48" height="48" viewBox="0 0 48 48">
+        <circle cx="24" cy="24" r="17" fill="none" stroke="rgba(15,23,42,0.08)" stroke-width="4"/>
+        <circle cx="24" cy="24" r="17" fill="none" stroke="${color}" stroke-width="4"
+          stroke-dasharray="${dash} ${circ}" stroke-dashoffset="26.7" stroke-linecap="round"
+          transform="rotate(-90 24 24)"/>
+        <text x="24" y="28" text-anchor="middle" font-family="Unbounded,sans-serif" font-size="8" font-weight="800" fill="${color}">${pct}%</text>
+      </svg>`;
+    }
+
+    function histItemHtml(h, i = 0) {
+      const pct  = h.score !== null ? Math.round((h.score / h.total) * 100) : null;
+      const pc   = pct === null ? '' : pct >= 75 ? 'hi' : pct >= 50 ? 'mid' : 'lo';
+      const href = h.status === 'completed' ? `/test-result?session=${h.id}` : '#';
+      const ring = pct !== null
+        ? histRingSvg(pct, pc)
+        : `<div class="hist-pct" style="width:48px;text-align:center;color:var(--text-3)">—</div>`;
+      return `<a class="hist-item stagger-item" style="--i:${i}" href="${href}">
+        ${ring}
+        <div class="hist-info">
+          <div class="hist-subj">${esc(h.subject_name || 'Тест')}</div>
+          <div class="hist-meta">${MODES[h.mode] || h.mode}</div>
+        </div>
+        <div class="hist-score">${h.score ?? '—'} / ${h.total}</div>
+      </a>`;
+    }
+
+    function histGroupedHtml(rows) {
+      const groups = {};
+      rows.forEach(h => {
+        const key = parseDate(h.started_at).toLocaleDateString('ru', { day:'numeric', month:'long', year:'numeric' });
+        (groups[key] = groups[key] || []).push(h);
+      });
+      let idx = 0;
+      return Object.entries(groups).map(([date, items]) =>
+        `<div class="hist-date-sep">${date}</div>` + items.map(h => histItemHtml(h, idx++)).join('')
+      ).join('');
+    }
+
+    async function loadHistory() {
+      const wrap = document.getElementById('history-wrap');
+      try {
+        const data = await LS.getHistory(1, HIST_LIMIT);
+        _histPage  = 1;
+        _histTotal = data.total;
+        if (!data.rows.length) {
+          wrap.innerHTML = `<div class="rich-empty">
+            <svg class="rich-empty-svg" width="110" height="84" viewBox="0 0 110 84" fill="none">
+              <circle cx="55" cy="40" r="24" fill="rgba(155,93,229,0.07)" stroke="#9B5DE5" stroke-width="1.8"/>
+              <line x1="55" y1="40" x2="55" y2="23" stroke="#9B5DE5" stroke-width="2.5" stroke-linecap="round"/>
+              <line x1="55" y1="40" x2="67" y2="47" stroke="#06D6E0" stroke-width="2.5" stroke-linecap="round"/>
+              <circle cx="55" cy="40" r="3" fill="#9B5DE5"/>
+              <circle cx="55" cy="40" r="8" fill="none" stroke="rgba(155,93,229,0.2)" stroke-width="1"/>
+            </svg>
+            <div class="rich-empty-title">История пуста</div>
+            <div class="rich-empty-sub">Пройди первый тест, и здесь появятся твои результаты</div>
+          </div>`;
+          return;
+        }
+        _histList = document.createElement('div');
+        _histList.className = 'history-list';
+        _histList.innerHTML = histGroupedHtml(data.rows);
+        wrap.innerHTML = '';
+        wrap.appendChild(_histList);
+        document.getElementById('history-more-wrap').style.display =
+          data.rows.length < data.total ? '' : 'none';
+      } catch { wrap.innerHTML = '<div class="empty">Не удалось загрузить историю</div>'; }
+    }
+
+    async function loadMoreHistory() {
+      const btn = document.getElementById('history-more-btn');
+      btn.disabled = true; btn.textContent = 'Загрузка…';
+      try {
+        const data = await LS.getHistory(_histPage + 1, HIST_LIMIT);
+        _histPage++;
+        const frag = document.createRange().createContextualFragment(histGroupedHtml(data.rows));
+        _histList.appendChild(frag);
+        const shown = _histPage * HIST_LIMIT;
+        document.getElementById('history-more-wrap').style.display = shown < _histTotal ? '' : 'none';
+      } catch { LS.toast('Не удалось загрузить историю', 'error'); }
+      finally { btn.disabled = false; btn.textContent = 'Загрузить ещё'; }
+    }
+
+    /* ══ ПРОГРЕСС TAB ════════════════════════════════════════════════════ */
+
+    // Chart.js: text in center of doughnut
+    const centerLabelPlugin = {
+      id: 'centerLabel',
+      beforeDraw(chart) {
+        const opts = chart.config.options.plugins.centerLabel;
+        if (!opts?.text) return;
+        const { ctx, chartArea: { left, right, top, bottom } } = chart;
+        const cx = (left + right) / 2, cy = (top + bottom) / 2;
+        ctx.save();
+        ctx.font = `900 ${opts.size || 18}px 'Unbounded', sans-serif`;
+        ctx.fillStyle = opts.color || '#0F172A';
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(opts.text, cx, cy);
+        ctx.restore();
+      }
+    };
+    if (typeof Chart !== 'undefined') Chart.register(centerLabelPlugin);
+
+    async function loadProgress() {
+      const wrap = document.getElementById('progress-wrap');
+      wrap.innerHTML = '<div class="spinner"></div>';
+      try {
+        const [histData, weakTopics, courses] = await Promise.all([
+          LS.getHistory(1, 200),
+          LS.getWeakTopics(),
+          LS.api('/api/courses').catch(() => []),
+        ]);
+        const rows = histData.rows || [];
+        wrap.innerHTML = '';
+
+        // Theory progress section
+        const activeCourses = (Array.isArray(courses) ? courses : [])
+          .filter(c => c.lessonCount > 0 && c.doneCount < c.lessonCount);
+        if (activeCourses.length > 0) {
+          renderTheoryProgress(wrap, activeCourses);
+        }
+
+        if (!rows.length) {
+          wrap.innerHTML += `<div class="rich-empty" style="margin-top:20px">
+            <svg class="rich-empty-svg" width="120" height="90" viewBox="0 0 120 90" fill="none">
+              <rect x="16" y="56" width="16" height="20" rx="3" fill="rgba(155,93,229,0.15)" stroke="#9B5DE5" stroke-width="1.5"/>
+              <rect x="40" y="40" width="16" height="36" rx="3" fill="rgba(155,93,229,0.25)" stroke="#9B5DE5" stroke-width="1.5"/>
+              <rect x="64" y="28" width="16" height="48" rx="3" fill="rgba(155,93,229,0.4)" stroke="#9B5DE5" stroke-width="1.5"/>
+              <rect x="88" y="16" width="16" height="60" rx="3" fill="rgba(155,93,229,0.6)" stroke="#9B5DE5" stroke-width="1.5"/>
+              <line x1="10" y1="76" x2="115" y2="76" stroke="rgba(15,23,42,0.18)" stroke-width="1.5" stroke-linecap="round"/>
+            </svg>
+            <div class="rich-empty-title">Нет данных по тестам</div>
+            <div class="rich-empty-sub">Пройди несколько тестов — и здесь появится твоя статистика прогресса</div>
+          </div>`;
+          if (!activeCourses.length) return;
+          reIcons();
+          return;
+        }
+        renderHeatmap(wrap, rows);
+        renderTrendChart(wrap, rows);
+        renderSubjectCharts(wrap, rows);
+        renderWeakInProgress(wrap, weakTopics);
+      } catch (e) {
+        wrap.innerHTML = `<div class="empty">Ошибка загрузки: ${esc(e.message)}</div>`;
+      }
+    }
+
+    function renderTheoryProgress(container, courses) {
+      const SUBJ_LABEL = { bio:'Биология', chem:'Химия', math:'Математика', phys:'Физика', other:'Задание' };
+      const div = document.createElement('div');
+      div.innerHTML = `
+        <div class="chart-section-title">Теория — в процессе</div>
+        <div class="theory-courses-grid">
+          ${courses.slice(0, 6).map(c => {
+            const pct = c.lessonCount > 0 ? Math.round(c.doneCount / c.lessonCount * 100) : 0;
+            const subj = SUBJ_LABEL[c.subjectSlug] || c.subjectSlug || '';
+            return `<a class="theory-course-card" href="/course?id=${c.id}">
+              <div class="tc-header">
+                <span class="tc-emoji">${c.coverEmoji || LS.icon('book-open',20)}</span>
+                <div class="tc-info">
+                  <div class="tc-title">${esc(c.title)}</div>
+                  ${subj ? `<div class="tc-subj">${esc(subj)}</div>` : ''}
+                </div>
+              </div>
+              <div class="tc-progress">
+                <div class="tc-bar"><div class="tc-fill" style="width:${pct}%"></div></div>
+                <span class="tc-pct">${pct}%</span>
+              </div>
+              <div class="tc-meta">${c.doneCount} / ${c.lessonCount} уроков</div>
+            </a>`;
+          }).join('')}
+        </div>`;
+      container.appendChild(div);
+      reIcons();
+    }
+
+    function renderHeatmap(container, rows) {
+      const title = document.createElement('div');
+      title.className = 'chart-section-title';
+      title.textContent = 'Активность';
+      container.appendChild(title);
+
+      const section = document.createElement('div');
+      section.className = 'heatmap-section';
+
+      // Build day-count map for past 364 days (52 weeks)
+      const today    = new Date(); today.setHours(0,0,0,0);
+      const dayCounts = {};
+      rows.forEach(r => {
+        const d = parseDate(r.started_at); d.setHours(0,0,0,0);
+        const key = d.toISOString().slice(0,10);
+        dayCounts[key] = (dayCounts[key] || 0) + 1;
+      });
+
+      // Start from 52 weeks ago, aligned to Sunday of that week
+      const startDay = new Date(today);
+      startDay.setDate(today.getDate() - 364);
+      // align to nearest past Sunday
+      startDay.setDate(startDay.getDate() - startDay.getDay());
+
+      const grid = document.createElement('div');
+      grid.className = 'heatmap-grid';
+
+      for (let col = 0; col < 52; col++) {
+        for (let row = 0; row < 7; row++) {
+          const d = new Date(startDay);
+          d.setDate(startDay.getDate() + col * 7 + row);
+          const key = d.toISOString().slice(0,10);
+          const n   = dayCounts[key] || 0;
+          const lvl = n === 0 ? 0 : n === 1 ? 1 : n <= 3 ? 2 : n <= 5 ? 3 : 4;
+          const cell = document.createElement('div');
+          cell.className = 'hm-cell';
+          if (lvl > 0) cell.dataset.n = lvl;
+          cell.title = `${d.toLocaleDateString('ru',{day:'numeric',month:'short'})}: ${n} ${n===1?'тест':'тестов'}`;
+          grid.appendChild(cell);
+        }
+      }
+      section.appendChild(grid);
+
+      const legend = document.createElement('div');
+      legend.className = 'heatmap-legend';
+      legend.innerHTML = `<span>Меньше</span>
+        <div class="hm-leg" style="background:rgba(15,23,42,0.06)"></div>
+        <div class="hm-leg" data-n="1"></div>
+        <div class="hm-leg" data-n="2"></div>
+        <div class="hm-leg" data-n="3"></div>
+        <div class="hm-leg" data-n="4"></div>
+        <span>Больше</span>`;
+      legend.querySelectorAll('[data-n]').forEach(el => {
+        const n = el.dataset.n;
+        el.style.background = `rgba(155,93,229,${n*0.22})`;
+      });
+      section.appendChild(legend);
+      container.appendChild(section);
+    }
+
+    function renderTrendChart(container, rows) {
+      const completed = rows
+        .filter(r => r.score !== null && r.total > 0)
+        .slice(0, 20)
+        .reverse();
+      if (!completed.length) return;
+
+      const title = document.createElement('div');
+      title.className = 'chart-section-title';
+      title.textContent = 'Динамика результатов';
+      container.appendChild(title);
+
+      const wrap = document.createElement('div');
+      wrap.className = 'trend-wrap';
+      const cWrap = document.createElement('div');
+      cWrap.className = 'trend-canvas-wrap';
+      const canvas = document.createElement('canvas');
+      cWrap.appendChild(canvas);
+      wrap.appendChild(cWrap);
+      container.appendChild(wrap);
+
+      new Chart(canvas, {
+        type: 'line',
+        data: {
+          labels: completed.map(r =>
+            parseDate(r.started_at).toLocaleDateString('ru', { day: 'numeric', month: 'short' })
+          ),
+          datasets: [{
+            label: '%',
+            data: completed.map(r => Math.round(r.score / r.total * 100)),
+            borderColor: '#9B5DE5',
+            backgroundColor: 'rgba(155,93,229,0.07)',
+            borderWidth: 2.5,
+            pointRadius: 5,
+            pointHoverRadius: 7,
+            pointBackgroundColor: '#9B5DE5',
+            pointBorderColor: '#fff',
+            pointBorderWidth: 2,
+            fill: true,
+            tension: 0.4,
+          }]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          plugins: {
+            legend: { display: false },
+            tooltip: {
+              callbacks: { label: ctx => ` ${ctx.raw}%` },
+              bodyFont: { family: 'Manrope' },
+              titleFont: { family: 'Manrope' },
+            }
+          },
+          scales: {
+            y: {
+              min: 0, max: 100,
+              grid: { color: 'rgba(15,23,42,0.05)' },
+              ticks: { callback: v => v + '%', font: { family: 'Manrope', size: 11 }, color: '#8898AA' }
+            },
+            x: {
+              grid: { display: false },
+              ticks: { font: { family: 'Manrope', size: 11 }, color: '#8898AA' }
+            }
+          }
+        }
+      });
+    }
+
+    function renderSubjectCharts(container, rows) {
+      const bySubj = {};
+      rows.forEach(r => {
+        if (!r.subject_slug) return;
+        if (!bySubj[r.subject_slug]) bySubj[r.subject_slug] = { name: r.subject_name, rows: [] };
+        bySubj[r.subject_slug].rows.push(r);
+      });
+      if (!Object.keys(bySubj).length) return;
+
+      const title = document.createElement('div');
+      title.className = 'chart-section-title';
+      title.textContent = 'По предметам';
+      container.appendChild(title);
+
+      const grid = document.createElement('div');
+      grid.className = 'subj-charts-grid';
+      container.appendChild(grid);
+
+      Object.entries(bySubj).forEach(([slug, data]) => {
+        const done = data.rows.filter(r => r.score !== null && r.total > 0);
+        const avg  = done.length
+          ? Math.round(done.reduce((s, r) => s + r.score / r.total * 100, 0) / done.length)
+          : 0;
+        const color  = SUBJ_COLORS[slug] || '#9B5DE5';
+        const avgCls = avg >= 75 ? 'c-green' : avg >= 50 ? 'c-amber' : 'c-pink';
+
+        const card = document.createElement('div');
+        card.className = 'subj-chart-card';
+        card.innerHTML = `
+          <div class="subj-chart-name">${esc(data.name || SUBJ[slug] || slug)}</div>
+          <div class="canvas-wrap"><canvas id="chart-${slug}"></canvas></div>
+          <div class="subj-chart-sessions">${done.length} сессий</div>`;
+        grid.appendChild(card);
+
+        const canvas = card.querySelector('canvas');
+        new Chart(canvas, {
+          type: 'doughnut',
+          data: {
+            datasets: [{
+              data: [avg, 100 - avg],
+              backgroundColor: [color, 'rgba(15,23,42,0.06)'],
+              borderWidth: 0,
+              borderRadius: 6,
+            }]
+          },
+          options: {
+            responsive: true,
+            cutout: '70%',
+            plugins: {
+              legend: { display: false },
+              tooltip: { enabled: false },
+              centerLabel: { text: avg + '%', size: 16, color: color }
+            },
+            animation: { duration: 900, easing: 'easeInOutQuart' }
+          }
+        });
+      });
+    }
+
+    function renderWeakInProgress(container, topics) {
+      const title = document.createElement('div');
+      title.className = 'chart-section-title';
+      title.textContent = 'Темы, требующие внимания';
+      container.appendChild(title);
+
+      if (!topics.length) {
+        const el = document.createElement('div');
+        el.className = 'empty';
+        el.style.padding = '20px 0';
+        el.innerHTML = 'Слабых тем не обнаружено <i data-lucide="party-popper" style="width:15px;height:15px;vertical-align:-3px"></i>';
+        container.appendChild(el);
+        return;
+      }
+
+      const list = document.createElement('div');
+      list.className = 'weak-list';
+      list.innerHTML = topics.map(t => `
+        <div class="weak-item" onclick="window.location.href='/test-run?subject=${t.subject_slug}&mode=exam&count=15&topic=${t.topic_id}'">
+          <div class="weak-bar-wrap">
+            <div class="weak-name">${esc(t.topic)}</div>
+            <div class="weak-meta">${esc(t.subject_name)} · ${t.wrong} из ${t.total} неверно</div>
+            <div class="weak-bar"><div class="weak-fill" style="width:${t.error_pct}%"></div></div>
+          </div>
+          <div class="weak-pct">${t.error_pct}%</div>
+        </div>`).join('');
+      container.appendChild(list);
+    }
+
+    /* ══ УВЕДОМЛЕНИЯ — handled by notifications.js ══ */
+
+    /* ══ JOIN MODAL ════════════════════════════════════════════════════════ */
+    function openJoinModal(code) {
+      document.getElementById('join-code').value = code || '';
+      document.getElementById('join-modal').classList.add('open');
+      setTimeout(() => document.getElementById('join-code').focus(), 50);
+    }
+    function closeJoinModal() { document.getElementById('join-modal').classList.remove('open'); }
+    async function doJoin() {
+      const code = document.getElementById('join-code').value.trim();
+      if (!code) return;
+      const btn = document.getElementById('btn-do-join');
+      btn.disabled = true;
+      try {
+        const r = await LS.joinClass(code);
+        closeJoinModal();
+        LS.toast(`Вы вступили в класс «${r.class_name}»!`, 'success');
+        loadAssignments();
+      } catch (e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+      finally { btn.disabled = false; }
+    }
+
+    /* ══ SUBMISSIONS (student) ════════════════════════════════════════════ */
+    let _mySubmissions = new Map(); // assignment_id -> latest submission
+    let _allSubmissions = [];       // full list for "My submissions" widget
+
+    const SUB_STATUS = {
+      new:         { label: 'На проверке',   icon: 'clock',        cls: 'new' },
+      resubmitted: { label: 'Повторно',      icon: 'refresh-cw',   cls: 'resubmitted' },
+      reviewed:    { label: 'Проверено',      icon: 'check-circle', cls: 'reviewed' },
+      accepted:    { label: 'Принято',        icon: 'check-circle', cls: 'accepted' },
+      revision:    { label: 'На доработке',   icon: 'alert-circle', cls: 'revision' },
+    };
+
+    async function loadMySubmissions() {
+      if (isTeacher) return;
+      try {
+        const rows = await LS.getMySubmissions();
+        _allSubmissions = rows;
+        _mySubmissions.clear();
+        rows.forEach(r => { if (r.assignment_id) _mySubmissions.set(r.assignment_id, r); });
+        renderMySubsWidget();
+      } catch (e) { console.error('[submissions]', e.message); renderMySubsWidget(); }
+    }
+
+    /* Mini status chip for collapsed assignment card */
+    function buildSubChip(a) {
+      if (isTeacher || !a.class_id) return '';
+      const sub = _mySubmissions.get(a.id);
+      if (sub) {
+        const st = SUB_STATUS[sub.status] || SUB_STATUS.new;
+        const gradeStr = sub.grade != null ? ` ${sub.grade}` : '';
+        return `<span class="ar-sub-chip s-${st.cls}">${lci(st.icon,'width:11px;height:11px')} ${st.label}${gradeStr}</span>`;
+      }
+      if (a.is_homework) return `<span class="ar-sub-chip s-none">${lci('upload','width:11px;height:11px')} Сдать</span>`;
+      return '';
+    }
+
+    function buildSubmitStrip(a) {
+      if (isTeacher || !a.class_id) return '';
+      const sub = _mySubmissions.get(a.id);
+      if (sub) {
+        const st = SUB_STATUS[sub.status] || SUB_STATUS.new;
+        const noteHtml = sub.teacher_note
+          ? `<span class="ae-submit-note">"${esc(sub.teacher_note)}"</span>`
+          : '';
+        const gradeHtml = sub.grade != null ? (() => {
+          const gcls = sub.grade >= 80 ? 'high' : sub.grade >= 50 ? 'mid' : 'low';
+          const letter = sub.grade>=90?'A':sub.grade>=75?'B':sub.grade>=60?'C':sub.grade>=40?'D':'F';
+          return `<span class="ae-grade-badge ${gcls}">${sub.grade} <span style="opacity:.7">${letter}</span></span>`;
+        })() : '';
+        const canDelete = !['reviewed','accepted'].includes(sub.status);
+        const delBtn = canDelete
+          ? `<button class="ae-btn-delete-sub" onclick="doDeleteSubmission(event,${sub.id},${a.id})">Отозвать</button>`
+          : '';
+        const resubBtn = sub.status === 'revision'
+          ? `<a class="ae-btn-submit" href="/homework" onclick="event.stopPropagation()" style="text-decoration:none">Пересдать</a>`
+          : '';
+        return `<div class="ae-submit-row">
+          <span class="ae-submit-label">Работа:</span>
+          <span class="ae-submit-status ${st.cls}">${lci(st.icon,'width:14px;height:14px')} ${st.label}</span>
+          ${gradeHtml}
+          <span style="font-size:0.72rem;color:#8898AA;flex:1">${esc(sub.original_name)}</span>
+          ${noteHtml}
+          ${resubBtn}
+          ${delBtn}
+        </div>`;
+      }
+      return `<div class="ae-submit-row">
+        <span class="ae-submit-label">Сдача работы:</span>
+        <a class="ae-btn-submit" href="/homework" onclick="event.stopPropagation()" style="text-decoration:none">
+          Прикрепить файл
+        </a>
+      </div>`;
+    }
+
+    /* Compact "My submissions" widget */
+    function renderMySubsWidget() {
+      const wrap = document.getElementById('w-my-subs');
+      const list = document.getElementById('my-subs-list');
+      if (!wrap || !list || isTeacher) return;
+
+      if (!_allSubmissions.length) {
+        list.innerHTML = `<div style="padding:18px 0;text-align:center;color:#8898AA;font-size:0.82rem">
+          ${lci('file-plus','width:24px;height:24px;opacity:0.4;display:block;margin:0 auto 8px')}
+          Сданных работ пока нет.<br>
+          <span style="font-size:0.74rem">Когда учитель назначит задание с прикреплением файла, вы сможете сдать его прямо здесь.</span>
+        </div>`;
+        wrap.style.display = '';
+        reIcons();
+        return;
+      }
+
+      const recent = _allSubmissions.slice(0, 5);
+      list.innerHTML = recent.map(s => {
+        const st = SUB_STATUS[s.status] || SUB_STATUS.new;
+        const gradeHtml = s.grade != null ? (() => {
+          const gcls = s.grade >= 80 ? 'high' : s.grade >= 50 ? 'mid' : 'low';
+          return `<span class="ms-grade" style="color:${gcls==='high'?'#059652':gcls==='mid'?'#c07c00':'#c0306a'}">${s.grade}</span>`;
+        })() : '';
+        return `<div class="ms-row">
+          <span class="ae-submit-status ${st.cls}" style="flex-shrink:0">${lci(st.icon,'width:12px;height:12px')} ${st.label}</span>
+          <span class="ms-title">${esc(s.assignment_title || s.original_name)}</span>
+          <span class="ms-file">${esc(s.original_name)}</span>
+          ${gradeHtml}
+        </div>`;
+      }).join('');
+
+      wrap.style.display = '';
+      reIcons();
+    }
+
+    async function doDeleteSubmission(e, subId, assignId) {
+      e.stopPropagation();
+      const ok = await LS.confirm('Отозвать отправленную работу?', { confirmText: 'Отозвать', danger: true });
+      if (!ok) return;
+      try {
+        await LS.deleteSubmission(subId);
+        _mySubmissions.delete(assignId);
+        LS.toast('Работа отозвана', 'info');
+        renderAssignmentsList();
+      } catch (err) {
+        LS.toast('Ошибка: ' + err.message, 'error');
+      }
+    }
+
+    /* ══ ACTION BANNER (replaces loadDeadlineWidget) ══════════════════ */
+    function loadActionBanner(assignments) {
+      const banner = document.getElementById('action-banner');
+      if (!banner) return;
+      const threeDays = 3 * 24 * 3600 * 1000;
+      const upcoming = (assignments || [])
+        .filter(a => a.deadline && !a.session_status && new Date(a.deadline) > new Date())
+        .sort((a, b) => new Date(a.deadline) - new Date(b.deadline));
+      const urgent = upcoming.filter(a => (new Date(a.deadline) - Date.now()) < threeDays);
+      if (urgent.length) {
+        const a = urgent[0];
+        const dl = new Date(a.deadline);
+        const diffMs = dl - Date.now();
+        const days = Math.floor(diffMs / 86400000);
+        const hours = Math.floor((diffMs % 86400000) / 3600000);
+        const countdownText = days > 0 ? days : hours;
+        const countdownSub = days > 0 ? (days === 1 ? 'день' : days < 5 ? 'дня' : 'дней') : (hours === 1 ? 'час' : hours < 5 ? 'часа' : 'часов');
+        banner.className = 'action-banner ab-urgent';
+        banner.style.display = '';
+        banner.innerHTML = `
+          <span class="ab-icon"><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="13" r="8"/><path d="M12 9v4l2 2"/><path d="M5 3 2 6m20 0-3-3"/></svg></span>
+          <div class="ab-body">
+            <div class="ab-title">${esc(a.title)}</div>
+            <div class="ab-sub">${SUBJ[a.subject_slug] || ''} · до ${dl.toLocaleDateString('ru',{day:'numeric',month:'short'})}</div>
+          </div>
+          <div class="ab-countdown">
+            <div class="ab-countdown-val">${countdownText}</div>
+            <div class="ab-countdown-label">${countdownSub}</div>
+          </div>`;
+      } else {
+        banner.style.display = 'none';
+      }
+    }
+
+    /* ══ WIDGET: Continue reading (action card) ══════════════════════ */
+    async function loadContinueWidget() {
+      const card = document.getElementById('ac-continue');
+      const cardsWrap = document.getElementById('action-cards');
+      if (!card) return;
+      try {
+        const data = await LS.api('/api/courses/continue');
+        if (!data || !data.courseId) { card.style.display = 'none'; return; }
+        const pct = data.lessonCount > 0 ? Math.round((data.doneCount || 0) / data.lessonCount * 100) : 0;
+        const href = `/lesson?course=${data.courseId}&lesson=${data.lessonId}`;
+        card.href = href;
+        card.style.display = '';
+        if (cardsWrap) cardsWrap.style.display = '';
+        document.getElementById('ac-cont-title').textContent = data.courseTitle || 'Продолжить';
+        document.getElementById('ac-cont-sub').textContent = `${data.lessonTitle || ''} · ${data.doneCount || 0}/${data.lessonCount || 0} уроков`;
+        document.getElementById('ac-cont-pct').textContent = pct + '%';
+      } catch { card.style.display = 'none'; }
+    }
+
+    /* ══ WIDGET: Weak topics (action card) ════════════════════════════ */
+    async function loadWeakWidget() {
+      const card = document.getElementById('ac-weak');
+      const cardsWrap = document.getElementById('action-cards');
+      if (!card) return;
+      try {
+        const topics = await LS.getWeakTopics();
+        if (!topics.length) { card.style.display = 'none'; return; }
+        const t = topics[0];
+        card.href = `/test-run?subject=${t.subject_slug}&mode=exam&count=15&topic=${t.topic_id}`;
+        card.style.display = '';
+        if (cardsWrap) cardsWrap.style.display = '';
+        document.getElementById('ac-weak-title').textContent = t.topic;
+        document.getElementById('ac-weak-sub').textContent = `${t.subject_name} · ${t.wrong} из ${t.total} неверно`;
+        document.getElementById('ac-weak-pct').textContent = t.error_pct + '%';
+      } catch { card.style.display = 'none'; }
+    }
+
+    /* ══ ACTIVITY: data structure ══════════════════════════════════════ */
+    let _activityRows = [];  // raw history rows
+    let _hmScale = 12;       // weeks to show
+
+    // Build per-day aggregation from rows
+    function _buildDayData(rows) {
+      const byDay = {};
+      (rows || []).forEach(r => {
+        if (r.score === null || r.total <= 0) return;
+        const d = parseDate(r.started_at); d.setHours(0,0,0,0);
+        const key = d.toISOString().slice(0,10);
+        if (!byDay[key]) byDay[key] = { count: 0, sessions: [], slugs: {}, totalPct: 0 };
+        const pct = Math.round(r.score / r.total * 100);
+        byDay[key].count++;
+        byDay[key].totalPct += pct;
+        byDay[key].sessions.push(r);
+        byDay[key].slugs[r.subject_slug] = (byDay[key].slugs[r.subject_slug] || 0) + 1;
+      });
+      return byDay;
+    }
+
+    // Dominant subject for a day
+    function _domSubject(slugs) {
+      const entries = Object.entries(slugs || {});
+      if (!entries.length) return null;
+      if (entries.length > 1) return 'mix';
+      return entries[0][0];
+    }
+
+    /* ══ WIDGET: Activity heatmap (redesigned) ══════════════════════════ */
+    function loadActivityWidget(rows) {
+      _activityRows = rows;
+      const w = document.getElementById('w-activity');
+      if (!w || !rows || !rows.length) { if (w) w.style.display = 'none'; return; }
+      w.style.display = '';
+      renderHeatmap();
+    }
+
+    function renderHeatmap() {
+      const rows = _activityRows;
+      const weeks = _hmScale;
+      const byDay = _buildDayData(rows);
+      const today = new Date(); today.setHours(0,0,0,0);
+
+      const totalDays = weeks * 7;
+      const startDay = new Date(today);
+      startDay.setDate(today.getDate() - totalDays + 1);
+      // Align to Monday
+      const startDow = (startDay.getDay() + 6) % 7;
+      startDay.setDate(startDay.getDate() - startDow);
+
+      // Month labels
+      const months = [];
+      let lastMonth = -1;
+      for (let col = 0; col < weeks; col++) {
+        const d = new Date(startDay);
+        d.setDate(startDay.getDate() + col * 7);
+        const m = d.getMonth();
+        if (m !== lastMonth) {
+          const mNames = ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'];
+          months.push({ col, label: mNames[m] });
+          lastMonth = m;
+        }
+      }
+
+      // Build month label row
+      let monthHtml = '';
+      months.forEach((m, i) => {
+        const nextCol = i < months.length - 1 ? months[i + 1].col : weeks;
+        const span = nextCol - m.col;
+        monthHtml += `<span class="hm-month-label" style="width:${span * 16}px">${m.label}</span>`;
+      });
+
+      // Weekday labels
+      const wdNames = ['Пн','','Ср','','Пт','',''];
+
+      // Cells
+      let cellsHtml = '';
+      let cellIdx = 0;
+      let totalSessions = 0, totalPctSum = 0, totalPctCount = 0;
+      let bestDay = null, bestDayCount = 0;
+
+      for (let col = 0; col < weeks; col++) {
+        for (let row = 0; row < 7; row++) {
+          const d = new Date(startDay);
+          d.setDate(startDay.getDate() + col * 7 + row);
+          const key = d.toISOString().slice(0,10);
+          const day = byDay[key];
+          const n = day ? day.count : 0;
+          const isFuture = d > today;
+
+          // Stats
+          if (day) {
+            totalSessions += day.count;
+            totalPctSum += day.totalPct;
+            totalPctCount += day.count;
+            if (day.count > bestDayCount) { bestDayCount = day.count; bestDay = key; }
+          }
+
+          // Color by dominant subject
+          const dom = day ? _domSubject(day.slugs) : null;
+          const subjClass = dom ? ` s-${dom} has-data` : '';
+
+          // Intensity by avg score
+          let style = '';
+          if (day && !isFuture) {
+            const avgPct = day.totalPct / day.count;
+            const alpha = 0.15 + (avgPct / 100) * 0.75;
+            // Size by count
+            const sz = Math.min(14, 8 + n * 2);
+            const margin = (14 - sz) / 2;
+            style = ` style="background:var(--cell-color, rgba(155,93,229,${alpha.toFixed(2)}));width:${sz}px;height:${sz}px;margin:${margin}px;animation-delay:${cellIdx * 4}ms"`;
+          } else if (isFuture) {
+            style = ` style="opacity:0.2;animation-delay:${cellIdx * 4}ms"`;
+          } else {
+            style = ` style="animation-delay:${cellIdx * 4}ms"`;
+          }
+
+          cellsHtml += `<div class="mhm-cell${subjClass}" data-key="${key}"${style}></div>`;
+          cellIdx++;
+        }
+      }
+
+      // Footer stats
+      const avgAll = totalPctCount > 0 ? Math.round(totalPctSum / totalPctCount) : 0;
+      const bestLabel = bestDay ? new Date(bestDay + 'T00:00:00').toLocaleDateString('ru', {day:'numeric', month:'short'}) : '—';
+
+      let footerHtml = `<span><strong>${totalSessions}</strong> сессий за ${weeks} нед.</span>`;
+      footerHtml += `<span>средний <strong>${avgAll}%</strong></span>`;
+      if (bestDayCount > 1) footerHtml += `<span>рекорд <strong>${bestDayCount}</strong> — ${bestLabel}</span>`;
+      // Legend
+      footerHtml += `<div class="hm-legend">
+        <span class="hm-legend-dot" style="background:#9B5DE5"></span><span class="hm-legend-label">Био</span>
+        <span class="hm-legend-dot" style="background:#06D6A0"></span><span class="hm-legend-label">Хим</span>
+        <span class="hm-legend-dot" style="background:#06B6D4"></span><span class="hm-legend-label">Мат</span>
+        <span class="hm-legend-dot" style="background:#F59E0B"></span><span class="hm-legend-label">Физ</span>
+      </div>`;
+
+      document.getElementById('activity-heatmap').innerHTML =
+        `<div class="hm-months">${monthHtml}</div>` +
+        `<div class="hm-body">` +
+          `<div class="hm-weekdays">${wdNames.map(w => `<div class="hm-wd">${w}</div>`).join('')}</div>` +
+          `<div class="mini-heatmap">${cellsHtml}</div>` +
+        `</div>` +
+        `<div class="hm-footer">${footerHtml}</div>`;
+
+      // Bind events
+      setTimeout(() => {
+        initHeatmapTooltip();
+        initHeatmapClick();
+      }, 50);
+    }
+
+    /* ══ Heatmap scale switch ══════════════════════════════════════════ */
+    function setHmScale(weeks, btn) {
+      _hmScale = weeks;
+      document.querySelectorAll('.act-scale-btn').forEach(b => b.classList.remove('active'));
+      if (btn) btn.classList.add('active');
+      renderHeatmap();
+    }
+
+    /* ══ Activity tab switch ═══════════════════════════════════════════ */
+    function switchActTab(tab, btn) {
+      document.querySelectorAll('.act-tab').forEach(t => t.classList.remove('active'));
+      if (btn) btn.classList.add('active');
+      document.getElementById('act-heatmap-pane').classList.toggle('visible', tab === 'heatmap');
+      document.getElementById('act-cal-pane').classList.toggle('visible', tab === 'calendar');
+    }
+
+    /* ══ WIDGET: Last results (compact, 5 items) ══════════════════════ */
+    function loadLastResultsWidget(rows) {
+      const w = document.getElementById('w-last-results');
+      if (!w) return;
+      const completed = (rows || []).filter(r => r.score !== null && r.total > 0).slice(0, 5);
+      if (!completed.length) { w.style.display = 'none'; return; }
+      w.style.display = '';
+      document.getElementById('last-results-list').innerHTML = completed.map(h => {
+        const pct = Math.round(h.score / h.total * 100);
+        const pc = pct >= 75 ? 'hi' : pct >= 50 ? 'mid' : 'lo';
+        const colorMap = { hi: '#059652', mid: '#F59E0B', lo: '#E0335E' };
+        return `<div class="grade-row">
+          <span class="grade-pct" style="color:${colorMap[pc]}">${pct}%</span>
+          <div class="grade-body">
+            <div class="grade-subj">${esc(h.subject_name || 'Тест')}</div>
+            <div class="grade-date">${parseDate(h.started_at).toLocaleDateString('ru',{day:'numeric',month:'short'})} · ${MODES[h.mode] || h.mode}</div>
+          </div>
+        </div>`;
+      }).join('');
+    }
+
+    /* ══ WIDGET: Subject progress bars ════════════════════════════════ */
+    function loadSubjProgressWidget(rows) {
+      const w = document.getElementById('w-subj-progress');
+      if (!w) return;
+      const bySubj = {};
+      (rows || []).forEach(r => {
+        if (!r.subject_slug || r.score === null || r.total <= 0) return;
+        if (!bySubj[r.subject_slug]) bySubj[r.subject_slug] = { name: r.subject_name, scores: [] };
+        bySubj[r.subject_slug].scores.push(Math.round(r.score / r.total * 100));
+      });
+      const entries = Object.entries(bySubj);
+      if (!entries.length) { w.style.display = 'none'; return; }
+      w.style.display = '';
+      document.getElementById('subj-progress-bars').innerHTML = entries.map(([slug, d]) => {
+        const avg = Math.round(d.scores.reduce((a, b) => a + b, 0) / d.scores.length);
+        const color = SUBJ_COLORS[slug] || '#9B5DE5';
+        return `<div class="subj-prog-row">
+          <span class="sp-name">${esc(d.name || SUBJ[slug] || slug)}</span>
+          <div class="sp-bar"><div class="sp-fill" style="width:${avg}%;background:${color}"></div></div>
+          <span class="sp-pct" style="color:${color}">${avg}%</span>
+        </div>`;
+      }).join('');
+    }
+
+    /* ══ WIDGET: Theory progress ══════════════════════════════════════ */
+    async function loadTheoryWidget() {
+      const w = document.getElementById('w-theory-progress');
+      if (!w) return;
+      try {
+        const courses = await LS.api('/api/courses');
+        const active = (Array.isArray(courses) ? courses : [])
+          .filter(c => c.lessonCount > 0 && c.doneCount < c.lessonCount);
+        if (!active.length) { w.style.display = 'none'; return; }
+        w.style.display = '';
+        const SUBJ_LABEL = { bio:'Биология', chem:'Химия', math:'Математика', phys:'Физика', other:'Задание' };
+        document.getElementById('theory-progress-grid').innerHTML = active.slice(0, 6).map(c => {
+          const pct = Math.round(c.doneCount / c.lessonCount * 100);
+          const subj = SUBJ_LABEL[c.subjectSlug] || c.subjectSlug || '';
+          return `<a class="theory-course-card" href="/course?id=${c.id}">
+            <div class="tc-header">
+              <span class="tc-emoji">${c.coverEmoji || LS.icon('book-open',20)}</span>
+              <div class="tc-info">
+                <div class="tc-title">${esc(c.title)}</div>
+                ${subj ? `<div class="tc-subj">${esc(subj)}</div>` : ''}
+              </div>
+            </div>
+            <div class="tc-progress">
+              <div class="tc-bar"><div class="tc-fill" style="width:${pct}%"></div></div>
+              <span class="tc-pct">${pct}%</span>
+            </div>
+            <div class="tc-meta">${c.doneCount} / ${c.lessonCount} уроков</div>
+          </a>`;
+        }).join('');
+      } catch { w.style.display = 'none'; }
+    }
+
+    /* ══ B2: LIVE SEARCH ASSIGNMENTS ═══════════════════════════════════ */
+    let _searchQuery = '';
+    function filterAssignments(q) {
+      _searchQuery = (q || '').toLowerCase().trim();
+      renderAssignmentsList();
+    }
+
+    /* ══ HEATMAP TOOLTIP (rich) ════════════════════════════════════════ */
+    function initHeatmapTooltip() {
+      const container = document.getElementById('activity-heatmap');
+      const tip = document.getElementById('hm-tip');
+      if (!container || !tip) return;
+      // Remove old listeners by cloning
+      const fresh = container.cloneNode(true);
+      container.parentNode.replaceChild(fresh, container);
+
+      fresh.addEventListener('mouseover', e => {
+        const cell = e.target.closest('.mhm-cell');
+        if (!cell) { tip.classList.remove('visible'); return; }
+        const key = cell.dataset.key;
+        const byDay = _buildDayData(_activityRows);
+        const day = byDay[key];
+        const dateLabel = new Date(key + 'T00:00:00').toLocaleDateString('ru', {weekday:'short', day:'numeric', month:'long'});
+        if (day) {
+          const lines = day.sessions.slice(0, 4).map(s => {
+            const pct = Math.round(s.score / s.total * 100);
+            const color = SUBJ_COLORS[s.subject_slug] || '#9B5DE5';
+            return `${s.subject_name || ''} ${pct}%`;
+          });
+          tip.textContent = `${dateLabel} — ${day.count} сес. · ${lines.join(', ')}`;
+        } else {
+          tip.textContent = `${dateLabel} — нет сессий`;
+        }
+        const r = cell.getBoundingClientRect();
+        tip.style.left = Math.min(r.left + r.width / 2, window.innerWidth - 180) + 'px';
+        tip.style.top  = (r.top - 34) + 'px';
+        tip.classList.add('visible');
+      });
+      fresh.addEventListener('mouseleave', () => tip.classList.remove('visible'));
+    }
+
+    /* ══ HEATMAP CLICK <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> DAY POPUP ════════════════════════════════════ */
+    function initHeatmapClick() {
+      const container = document.getElementById('activity-heatmap');
+      if (!container) return;
+      container.addEventListener('click', e => {
+        const cell = e.target.closest('.mhm-cell');
+        const popup = document.getElementById('hm-day-popup');
+        if (!cell || !cell.classList.contains('has-data')) {
+          if (popup) popup.style.display = 'none';
+          return;
+        }
+        const key = cell.dataset.key;
+        const byDay = _buildDayData(_activityRows);
+        const day = byDay[key];
+        if (!day) { popup.style.display = 'none'; return; }
+
+        const dateLabel = new Date(key + 'T00:00:00').toLocaleDateString('ru', {weekday:'long', day:'numeric', month:'long'});
+        let html = `<div class="hdp-date">${dateLabel}</div>`;
+        day.sessions.forEach(s => {
+          const pct = Math.round(s.score / s.total * 100);
+          const color = SUBJ_COLORS[s.subject_slug] || '#9B5DE5';
+          const pc = pct >= 75 ? '#059652' : pct >= 50 ? '#F59E0B' : '#E0335E';
+          html += `<div class="hdp-row">
+            <span class="hdp-dot" style="background:${color}"></span>
+            <span class="hdp-subj">${esc(s.subject_name || 'Тест')}</span>
+            <span class="hdp-mode">${MODES[s.mode] || s.mode}</span>
+            <span class="hdp-score" style="color:${pc}">${pct}%</span>
+          </div>`;
+        });
+        popup.innerHTML = html;
+        popup.style.display = '';
+
+        const r = cell.getBoundingClientRect();
+        popup.style.left = Math.min(r.right + 8, window.innerWidth - 220) + 'px';
+        popup.style.top  = Math.max(8, r.top - 20) + 'px';
+      });
+      // Close popup on outside click
+      document.addEventListener('click', e => {
+        const popup = document.getElementById('hm-day-popup');
+        if (popup && !popup.contains(e.target) && !e.target.closest('.mhm-cell')) {
+          popup.style.display = 'none';
+        }
+      });
+    }
+
+    /* ══ B5: DEADLINE TOAST ════════════════════════════════════════════ */
+    function showDeadlineToast(assignments) {
+      const oneDay = 24 * 3600 * 1000;
+      const urgent = (assignments || []).filter(a =>
+        a.deadline && !a.session_status &&
+        new Date(a.deadline) > new Date() &&
+        (new Date(a.deadline) - Date.now()) < oneDay
+      );
+      if (!urgent.length) return;
+      const a = urgent[0];
+      const hours = Math.ceil((new Date(a.deadline) - Date.now()) / 3600000);
+      const toast = document.createElement('div');
+      toast.className = 'deadline-toast';
+      toast.innerHTML = `<span class="dt-icon">${LS.icon('flame',18)}</span>
+        <span class="dt-text"><strong>${esc(a.title)}</strong> — осталось <span class="dt-time">${hours}ч</span></span>
+        <button class="dt-close" onclick="this.parentElement.remove()"><svg class="ic" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>`;
+      toast.addEventListener('click', e => {
+        if (e.target.closest('.dt-close')) return;
+        toast.remove();
+      });
+      document.querySelector('.sb-content').appendChild(toast);
+      setTimeout(() => { if (toast.parentElement) toast.remove(); }, 9000);
+    }
+
+    /* ══ C2: STREAK CALENDAR ═══════════════════════════════════════════ */
+    function renderStreakCalendar(rows) {
+      const body = document.getElementById('streak-cal-body');
+      if (!body || !rows || !rows.length) return;
+      const today = new Date(); today.setHours(0,0,0,0);
+      const activeDays = new Set();
+      rows.forEach(r => {
+        const d = parseDate(r.started_at); d.setHours(0,0,0,0);
+        activeDays.add(d.toISOString().slice(0,10));
+      });
+      const year = today.getFullYear(), month = today.getMonth();
+      const firstDay = new Date(year, month, 1);
+      const lastDay  = new Date(year, month + 1, 0);
+      const startDow = (firstDay.getDay() + 6) % 7;
+      const todayKey = today.toISOString().slice(0,10);
+      const todayHasSession = activeDays.has(todayKey);
+
+      // Current streak + best streak
+      let streak = 0, bestStreak = 0, cur = 0;
+      const allDays = [...activeDays].sort();
+      for (let i = 0; i <= 180; i++) {
+        const d = new Date(today); d.setDate(today.getDate() - i);
+        const k = d.toISOString().slice(0,10);
+        if (activeDays.has(k)) { if (i === 0 || streak > 0) streak++; }
+        else if (streak > 0) break;
+      }
+      // Best streak from all data
+      let tmpStreak = 0;
+      for (let i = 0; i <= 365; i++) {
+        const d = new Date(today); d.setDate(today.getDate() - i);
+        const k = d.toISOString().slice(0,10);
+        if (activeDays.has(k)) { tmpStreak++; bestStreak = Math.max(bestStreak, tmpStreak); }
+        else tmpStreak = 0;
+      }
+
+      const monthNames = ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'];
+      const wdNames = ['Пн','Вт','Ср','Чт','Пт','Сб','Вс'];
+      let html = `<div class="sc-header">
+        <span class="sc-month">${monthNames[month]}</span>
+        <span style="display:flex;gap:10px;align-items:center">
+          <span class="sc-streak-badge">${lci('flame', 16)} ${streak}</span>
+          ${bestStreak > streak ? `<span style="font-size:0.6rem;color:#8898AA;font-weight:600">рекорд ${bestStreak}</span>` : ''}
+        </span>
+      </div>`;
+      html += `<div class="sc-weekdays">${wdNames.map(d => `<span class="sc-wd">${d}</span>`).join('')}</div>`;
+      html += '<div class="streak-cal">';
+      for (let i = 0; i < startDow; i++) html += '<div class="sc-day" style="visibility:hidden"></div>';
+      for (let d = 1; d <= lastDay.getDate(); d++) {
+        const dt = new Date(year, month, d);
+        const key = dt.toISOString().slice(0,10);
+        const isToday  = key === todayKey;
+        const isActive = activeDays.has(key);
+        const isFuture = dt > today;
+        let cls = 'sc-day';
+        if (isToday)  cls += ' today';
+        if (isActive) cls += ' active';
+        if (isFuture) cls += ' future';
+        // Pulse today if no session yet
+        if (isToday && !todayHasSession) cls += ' pulse';
+        html += `<div class="${cls}">${d}</div>`;
+      }
+      html += '</div>';
+      body.innerHTML = html;
+    }
+
+    /* ══ B1: QUICK-START MODAL ═════════════════════════════════════════ */
+    let _qsSlug = null;
+    async function openQuickStart(slug) {
+      _qsSlug = slug || null;
+      try {
+        const subjects = await LS.getSubjects();
+        document.getElementById('qs-subjects').innerHTML = subjects.map(s => {
+          const color = SUBJ_COLORS[s.slug] || '#9B5DE5';
+          const active = s.slug === _qsSlug ? ' active' : '';
+          return `<button class="qs-subj-btn${active}" onclick="selectQsSubject('${s.slug}',this)">
+            <div class="qs-subj-icon" style="background:${color}">${lci(ICONS[s.slug]||'book-open')}</div>
+            ${esc(s.name)}
+          </button>`;
+        }).join('');
+        reIcons();
+      } catch {}
+      document.getElementById('qs-modal').classList.add('open');
+    }
+    function selectQsSubject(slug, btn) {
+      _qsSlug = slug;
+      document.querySelectorAll('.qs-subj-btn').forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+    }
+    function closeQuickStart() { document.getElementById('qs-modal').classList.remove('open'); }
+    function doQuickStart() {
+      if (!_qsSlug) { LS.toast('Выберите предмет', 'warn'); return; }
+      const mode  = document.getElementById('qs-mode').value;
+      const count = parseInt(document.getElementById('qs-count').value) || 25;
+      closeQuickStart();
+      window.location.href = `/test-run?subject=${_qsSlug}&mode=${mode}&count=${count}`;
+    }
+
+    /* ══ C4: KEYBOARD SHORTCUTS ════════════════════════════════════════ */
+    (function initKeyboard() {
+      document.addEventListener('keydown', e => {
+        if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.tagName === 'SELECT') return;
+        if (e.ctrlKey || e.metaKey || e.altKey) return;
+        switch (e.key.toLowerCase()) {
+          case 'n': e.preventDefault(); openQuickStart(); break;
+          case 't': e.preventDefault(); window.location.href = '/library'; break;
+          case 'b': e.preventDefault(); window.location.href = '/board'; break;
+          case '?': e.preventDefault();
+            document.getElementById('kb-hint').classList.toggle('visible');
+            break;
+        }
+      });
+    })();
+
+    /* ══ ADMIN: Load stats into header ════════════════════════════════ */
+    async function loadAdminStats() {
+      if (!isTeacher) return;
+      try {
+        const data = await LS.api('/api/admin/stats');
+        const statsEl = document.getElementById('dh-stats');
+        statsEl.style.display = '';
+        statsEl.innerHTML = '';
+        // Show compact stat chips instead of rings for admin
+        const chips = [
+          { val: data.totalUsers || 0, label: 'студентов', color: '#9B5DE5' },
+          { val: data.totalTests || 0, label: 'тестов', color: '#06B6D4' },
+          { val: data.avgScore != null ? data.avgScore + '%' : '—', label: 'средний', color: data.avgScore >= 75 ? '#059652' : data.avgScore >= 50 ? '#F59E0B' : '#E0335E' },
+        ];
+        statsEl.innerHTML = chips.map(c =>
+          `<div class="adm-stat-chip"><span class="adm-stat-val" style="color:${c.color}">${c.val}</span>${c.label}</div>`
+        ).join('');
+      } catch { /* silent */ }
+    }
+
+    /* ══ ADMIN: Load classes into admin panel ═══════════════════════════ */
+    async function loadAdminClasses() {
+      if (!isTeacher) return;
+      const body = document.getElementById('admin-classes-body');
+      if (!body) return;
+      try {
+        const classes = await LS.api('/api/classes');
+        if (!classes || !classes.length) {
+          body.innerHTML = '<div style="font-size:0.8rem;color:#8898AA;padding:8px 0">Нет классов</div>';
+          return;
+        }
+        const colors = ['#9B5DE5','#06D6A0','#F59E0B','#06B6D4','#E0335E'];
+        body.innerHTML = classes.slice(0, 5).map(c => {
+          const memberCount = c.member_count || c.members || 0;
+          const aCount = c.assignment_count || 0;
+          const bg = colors[(c.id || 0) % colors.length];
+          return `<a class="cs-card" href="/classes?id=${c.id}" style="text-decoration:none;color:inherit">
+            <div class="cs-avatar" style="${c.cover_emoji ? (()=>{const p=c.cover_emoji.split(':');const cl=p[1]||'#9B5DE5';return 'background:'+cl+'18;color:'+cl})() : 'background:'+bg}">${c.cover_emoji ? lci(c.cover_emoji.split(':')[0],'width:18px;height:18px') : (c.name||'?')[0]}</div>
+            <div class="cs-body">
+              <div class="cs-name">${esc(c.name)}</div>
+              <div class="cs-stats">
+                <span>${lci('users','width:12px;height:12px')} ${memberCount}</span>
+                <span>${lci('file-text','width:12px;height:12px')} ${aCount} заданий</span>
+              </div>
+            </div>
+          </a>`;
+        }).join('');
+        reIcons();
+      } catch {
+        body.innerHTML = '<div style="font-size:0.8rem;color:#8898AA;padding:8px 0">Ошибка загрузки</div>';
+      }
+    }
+
+    /* ══ ADMIN: Load recent sessions ═══════════════════════════════════ */
+    async function loadAdminSessions() {
+      if (!isTeacher) return;
+      const body = document.getElementById('admin-sessions-body');
+      if (!body) return;
+      try {
+        const data = await LS.api('/api/admin/sessions?limit=8');
+        const rows = Array.isArray(data) ? data : (data.rows || []);
+        if (!rows.length) {
+          body.innerHTML = '<div style="font-size:0.8rem;color:#8898AA;padding:8px 0">Нет сессий</div>';
+          return;
+        }
+        body.innerHTML = rows.slice(0, 8).map(s => {
+          const pct = s.total > 0 ? Math.round(s.score / s.total * 100) : 0;
+          const pc = pct >= 75 ? '#059652' : pct >= 50 ? '#F59E0B' : '#E0335E';
+          const dt = s.started_at ? parseDate(s.started_at).toLocaleDateString('ru', {day:'numeric',month:'short'}) : '';
+          return `<div class="adm-sess-row">
+            <span class="adm-sess-name">${esc(s.user_name || s.email || '—')}</span>
+            <span class="adm-sess-subj">${esc(s.subject_name || '')}</span>
+            <span class="adm-sess-pct" style="color:${pc}">${s.status === 'completed' ? pct + '%' : '…'}</span>
+          </div>`;
+        }).join('');
+      } catch {
+        body.innerHTML = '<div style="font-size:0.8rem;color:#8898AA;padding:8px 0">Ошибка</div>';
+      }
+    }
+
+    /* ══ ADMIN: Load assignments into admin compact panel ═══════════════ */
+    async function loadAdminAssignments() {
+      if (!isTeacher) return;
+      const listEl = document.getElementById('admin-assignments-list');
+      if (!listEl) return;
+      try {
+        const list = await LS.teacherAssignments();
+        if (!list.length) {
+          listEl.innerHTML = '<div style="font-size:0.8rem;color:#8898AA;padding:8px 0">Заданий пока нет</div>';
+          return;
+        }
+        const sorted = [...list].sort((a, b) => urgencyScore(a) - urgencyScore(b));
+        listEl.innerHTML = `<div class="tests-list">${sorted.slice(0, 8).map((a, i) => buildAssignCard(a, i)).join('')}</div>`;
+        if (list.length > 8) {
+          listEl.innerHTML += `<div style="text-align:center;margin-top:8px"><a class="w-more" href="/classes">Ещё ${list.length - 8} заданий</a></div>`;
+        }
+        reIcons();
+      } catch {
+        listEl.innerHTML = '<div style="font-size:0.8rem;color:#8898AA;padding:8px 0">Ошибка загрузки</div>';
+      }
+    }
+
+    /* ══ Load all student widgets ═════════════════════════════════════ */
+    async function loadStudentWidgets() {
+      if (isTeacher) return;
+      try {
+        const histData = await LS.getHistory(1, 100);
+        const rows = histData.rows || [];
+        loadLastResultsWidget(rows);
+        loadActivityWidget(rows);
+        loadSubjProgressWidget(rows);
+        renderStreakCalendar(rows);
+      } catch {}
+      loadContinueWidget();
+      loadWeakWidget();
+      loadTheoryWidget();
+    }
+
+    /* ══ INIT ═════════════════════════════════════════════════════════════ */
+    window.addEventListener('pageshow', e => { if (e.persisted) location.reload(); });
+
+    if (!isTeacher) {
+      document.getElementById('subjects-sk').innerHTML = LS.skeleton(4);
+      document.getElementById('assignments-sk').innerHTML = LS.skeleton(3);
+    }
+
+    /* ══ STATISTICS CHARTS ═══════════════════════════════════════════════ */
+    async function loadDashboardStats() {
+      try {
+        const data = await LS.getStudentStats();
+        if (!data || (!data.totals.sessions && !data.courseProgress.length)) return;
+        document.getElementById('stats-section').style.display = '';
+
+        // Summary chips
+        const chips = document.getElementById('stats-chips');
+        chips.innerHTML = `
+          <div class="stats-chip"><div class="stats-chip-val">${data.totals.sessions}</div><div class="stats-chip-lbl">Сессий</div></div>
+          <div class="stats-chip"><div class="stats-chip-val" style="color:${data.totals.avgPct >= 70 ? '#059652' : data.totals.avgPct >= 50 ? '#F59E0B' : '#EF476F'}">${data.totals.avgPct}%</div><div class="stats-chip-lbl">Ср. балл</div></div>
+          <div class="stats-chip"><div class="stats-chip-val">${data.totals.correct}/${data.totals.questions}</div><div class="stats-chip-lbl">Правильно</div></div>
+          <div class="stats-chip"><div class="stats-chip-val" style="color:#9B5DE5">${data.streak}</div><div class="stats-chip-lbl">Стрик (дн.)</div></div>
+        `;
+
+        // Weekly bar chart
+        renderWeeklyChart(data.weekly);
+        // Trend chart
+        renderTrendChart(data.trend);
+        // Subject chart
+        renderSubjectsChart(data.bySubject);
+        // Course progress
+        renderCourseProgressChart(data.courseProgress);
+      } catch (e) { console.warn('Stats error:', e); }
+    }
+
+    function renderWeeklyChart(weekly) {
+      const el = document.getElementById('stats-weekly-chart');
+      const labels = document.getElementById('stats-weekly-labels');
+      if (!weekly.length) { el.innerHTML = '<div style="color:#B0BEC5;font-size:.8rem;padding:20px;text-align:center">Нет данных</div>'; return; }
+      const max = Math.max(...weekly.map(w => w.avgPct), 10);
+      el.innerHTML = weekly.map(w => {
+        const h = Math.max(4, w.avgPct / max * 100);
+        const color = w.avgPct >= 70 ? '#06D664' : w.avgPct >= 50 ? '#FFB347' : '#EF476F';
+        return `<div class="stats-bar" style="height:${h}%;background:${color}" data-tip="${w.avgPct}% · ${w.sessions} сес."></div>`;
+      }).join('');
+      labels.innerHTML = weekly.map(w => {
+        const [yr, wk] = w.week.split('-').map(Number);
+        const jan4 = new Date(yr, 0, 4);
+        const mon = new Date(jan4);
+        mon.setDate(jan4.getDate() - ((jan4.getDay() || 7) - 1) + (wk - 1) * 7);
+        return `<span>${mon.toLocaleDateString('ru', { day:'numeric', month:'short' }).replace('.','')}</span>`;
+      }).join('');
+    }
+
+    function renderTrendChart(trend) {
+      const el = document.getElementById('stats-trend-chart');
+      if (!trend.length) { el.innerHTML = '<div style="color:#B0BEC5;font-size:.8rem;padding:20px;text-align:center">Нет данных</div>'; return; }
+      const max = 100;
+      el.innerHTML = trend.map(t => {
+        const h = Math.max(4, t.pct);
+        const color = SUBJ_COLORS[t.subject] || '#9B5DE5';
+        return `<div class="stats-bar" style="height:${h}%;background:${color};opacity:0.7" data-tip="${t.pct}%"></div>`;
+      }).join('');
+    }
+
+    function renderSubjectsChart(subjects) {
+      const el = document.getElementById('stats-subjects-chart');
+      if (!subjects.length) { el.innerHTML = '<div style="color:#B0BEC5;font-size:.8rem;padding:20px;text-align:center">Нет данных</div>'; return; }
+      el.innerHTML = subjects.map(s => {
+        const color = SUBJ_COLORS[s.slug] || '#9B5DE5';
+        const barW = Math.max(4, s.avgPct);
+        return `<div style="display:flex;align-items:center;gap:10px;margin-bottom:8px">
+          <div style="width:80px;font-size:.75rem;font-weight:700;color:#3D4F6B;text-align:right;flex-shrink:0">${esc(s.name)}</div>
+          <div style="flex:1;height:20px;background:rgba(15,23,42,0.04);border-radius:6px;overflow:hidden;position:relative">
+            <div style="height:100%;width:${barW}%;background:${color};border-radius:6px;transition:width .5s"></div>
+          </div>
+          <div style="font-size:.75rem;font-weight:800;color:${color};min-width:36px">${s.avgPct}%</div>
+        </div>`;
+      }).join('');
+    }
+
+    function renderCourseProgressChart(courses) {
+      const el = document.getElementById('stats-courses-chart');
+      if (!courses.length) { el.innerHTML = '<div style="color:#B0BEC5;font-size:.8rem;padding:20px;text-align:center">Нет курсов в процессе</div>'; return; }
+      el.innerHTML = courses.slice(0, 6).map(c => {
+        const color = SUBJ_COLORS[c.subjectSlug] || '#9B5DE5';
+        return `<a href="/course?id=${c.id}" style="display:flex;align-items:center;gap:10px;margin-bottom:8px;text-decoration:none;color:inherit">
+          <div style="font-size:1.1rem;width:28px;text-align:center;flex-shrink:0">${c.emoji || '<svg class="ic" viewBox="0 0 24 24"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>'}</div>
+          <div style="flex:1;min-width:0">
+            <div style="font-size:.75rem;font-weight:700;color:#0F172A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${esc(c.title)}</div>
+            <div style="height:6px;background:rgba(15,23,42,0.06);border-radius:99px;margin-top:3px;overflow:hidden">
+              <div style="height:100%;width:${c.pct}%;background:${color};border-radius:99px"></div>
+            </div>
+          </div>
+          <div style="font-size:.72rem;font-weight:800;color:${color};flex-shrink:0">${c.pct}%</div>
+        </a>`;
+      }).join('');
+    }
+
+    if (isTeacher) {
+      // Admin/Teacher: compact admin layout
+      loadAdminStats();
+      loadAdminAssignments();
+      loadAdminClasses();
+      loadAdminSessions();
+    } else {
+      // Student: full layout
+      loadSubjects();
+      loadAssignments();
+      loadStats();
+      loadGamification();
+      _populateLbClasses();
+      loadLeaderboard();
+      loadChallenges();
+      loadStudentWidgets();
+      loadDashboardStats();
+    }
+    LS.notif.init();
+
+    // Real-time SSE for page-specific events (notif handled by notifications.js)
+    LS.connectSSE(ev => {
+      if (ev.type === 'assignment') {
+        LS.toast(ev.message, 'info');
+        isTeacher ? loadAdminAssignments() : loadAssignments();
+      } else if (ev.type === 'session') {
+        LS.toast(ev.message, 'info');
+        if (isTeacher) loadAdminSessions();
+      }
+    });
+
+    if (window.lucide) lucide.createIcons();
+  </script>
+  </div>
+</div>
+<script src="/js/search.js"></script>
+<script src="/js/mobile.js"></script>
+</body>
+</html>
diff --git a/frontend/favicon.svg b/frontend/favicon.svg
new file mode 100644
index 0000000..26f14d3
--- /dev/null
+++ b/frontend/favicon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="8" fill="#1a1a2e"/>
+  <text x="16" y="22" font-family="Arial,sans-serif" font-size="18" font-weight="700" fill="#9B5DE5" text-anchor="middle">BQ</text>
+</svg>
diff --git a/frontend/flashcards.html b/frontend/flashcards.html
new file mode 100644
index 0000000..6920445
--- /dev/null
+++ b/frontend/flashcards.html
@@ -0,0 +1,871 @@
+<!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" />
+  <style>
+    .sb-content { background: #f4f5f8; min-height: 100vh; }
+    .fc-wrap    { max-width: 1100px; margin: 0 auto; padding: 28px 28px 80px; }
+
+    /* ── header ── */
+    .fc-header  { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
+    .fc-back    { display: none; background: none; border: 1.5px solid var(--border);
+                  border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: .82rem;
+                  color: var(--text-2); transition: .15s; }
+    .fc-back:hover { background: var(--surface-2); }
+    .fc-back.visible { display: flex; align-items: center; gap: 6px; }
+    .fc-title   { font-family: 'Unbounded', sans-serif; font-size: 1.25rem; font-weight: 800;
+                  color: var(--text); flex: 1; }
+    .fc-btn     { padding: 8px 16px; border-radius: 9px; border: none; cursor: pointer;
+                  font-family: 'Manrope', sans-serif; font-size: .82rem; font-weight: 700;
+                  transition: .15s; }
+    .fc-btn-primary   { background: var(--violet); color: #fff; }
+    .fc-btn-primary:hover { filter: brightness(1.12); }
+    .fc-btn-ghost     { background: var(--surface); border: 1.5px solid var(--border); color: var(--text-2); }
+    .fc-btn-ghost:hover { background: var(--surface-2); }
+    .fc-btn-danger    { background: #FEE2E2; border: 1.5px solid #FECACA; color: #DC2626; }
+    .fc-btn-danger:hover { background: #FECACA; }
+
+    /* ── stats bar ── */
+    .fc-stats { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
+    .fc-stat  { background: #fff; border: 1.5px solid var(--border); border-radius: 12px;
+                padding: 12px 18px; display: flex; flex-direction: column; gap: 2px; min-width: 110px; }
+    .fc-stat-val { font-family: 'Unbounded', sans-serif; font-size: 1.4rem; font-weight: 800; color: var(--violet); }
+    .fc-stat-lbl { font-size: .72rem; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
+
+    /* ── deck grid ── */
+    .deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
+    .deck-card { background: #fff; border: 1.5px solid var(--border); border-radius: 16px;
+                 overflow: hidden; cursor: pointer; transition: box-shadow .18s, transform .18s;
+                 display: flex; flex-direction: column; }
+    .deck-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.1); transform: translateY(-2px); }
+    .deck-stripe { height: 6px; }
+    .deck-body   { padding: 16px 18px 14px; flex: 1; }
+    .deck-name   { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .96rem;
+                   color: var(--text); margin-bottom: 5px; }
+    .deck-desc   { font-size: .78rem; color: var(--text-3); margin-bottom: 12px;
+                   display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+    .deck-meta   { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
+    .deck-badge  { padding: 3px 9px; border-radius: 20px; font-size: .7rem; font-weight: 700;
+                   background: var(--surface-2); color: var(--text-2); }
+    .deck-badge.due { background: #FEF3C7; color: #D97706; }
+    .deck-badge.zero { background: #DCFCE7; color: #16A34A; }
+    .deck-actions { display: flex; gap: 8px; padding: 0 18px 14px; }
+    .deck-btn-study { flex: 1; padding: 7px; border-radius: 8px; border: none; cursor: pointer;
+                      background: var(--violet); color: #fff; font-family: 'Manrope', sans-serif;
+                      font-size: .8rem; font-weight: 700; transition: .15s; }
+    .deck-btn-study:hover { filter: brightness(1.1); }
+    .deck-btn-study:disabled { background: var(--surface-2); color: var(--text-3); cursor: default; filter: none; }
+    .deck-btn-edit  { padding: 7px 12px; border-radius: 8px; border: 1.5px solid var(--border);
+                      cursor: pointer; background: none; color: var(--text-2);
+                      font-size: .8rem; font-weight: 700; font-family: 'Manrope', sans-serif; transition: .15s; }
+    .deck-btn-edit:hover { background: var(--surface-2); }
+
+    /* new deck card */
+    .deck-add { border: 2px dashed var(--border); border-radius: 16px; min-height: 140px;
+                display: flex; align-items: center; justify-content: center;
+                cursor: pointer; transition: .15s; flex-direction: column; gap: 8px;
+                color: var(--text-3); font-size: .84rem; font-weight: 600; }
+    .deck-add:hover { border-color: var(--violet); color: var(--violet); background: rgba(155,93,229,.04); }
+    .deck-add svg { opacity: .5; }
+
+    /* ── card list (deck detail) ── */
+    #view-cards { display: none; }
+    .card-list  { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
+    .card-item  { background: #fff; border: 1.5px solid var(--border); border-radius: 12px;
+                  display: flex; gap: 0; overflow: hidden; }
+    .card-item.editing { border-color: var(--violet); }
+    .card-side  { flex: 1; padding: 12px 14px; min-width: 0; }
+    .card-divider { width: 1px; background: var(--border); flex-shrink: 0; }
+    .card-side-lbl { font-size: .68rem; font-weight: 700; text-transform: uppercase;
+                     letter-spacing: .06em; color: var(--text-3); margin-bottom: 5px; }
+    .card-text  { font-size: .88rem; color: var(--text); white-space: pre-wrap; }
+    .card-textarea { width: 100%; border: none; outline: none; resize: none; background: transparent;
+                     font-family: 'Manrope', sans-serif; font-size: .88rem; color: var(--text);
+                     min-height: 48px; line-height: 1.5; padding: 0; }
+    .card-actions { display: flex; flex-direction: column; gap: 0; border-left: 1px solid var(--border); }
+    .card-act-btn { padding: 0 12px; height: 100%; flex: 1; border: none; background: none;
+                    cursor: pointer; color: var(--text-3); transition: .15s; display: flex;
+                    align-items: center; justify-content: center; }
+    .card-act-btn:hover { background: var(--surface-2); color: var(--text); }
+    .card-act-btn.del:hover { background: #FEE2E2; color: #DC2626; }
+
+    .card-add-bar { display: flex; gap: 10px; align-items: center; }
+    .card-add-input { flex: 1; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: 10px;
+                      font-family: 'Manrope', sans-serif; font-size: .88rem; background: #fff;
+                      color: var(--text); outline: none; transition: .15s; }
+    .card-add-input:focus { border-color: var(--violet); }
+
+    /* ── study mode ── */
+    #view-study { display: none; }
+    .study-wrap { max-width: 600px; margin: 0 auto; }
+    .study-progress-bar { height: 5px; background: var(--surface-2); border-radius: 3px;
+                          margin-bottom: 22px; overflow: hidden; }
+    .study-progress-fill { height: 100%; background: var(--violet); border-radius: 3px;
+                           transition: width .35s ease; }
+    .study-counter { text-align: center; font-size: .8rem; color: var(--text-3);
+                     font-weight: 600; margin-bottom: 18px; }
+
+    /* card */
+    .study-card-scene { perspective: 1000px; height: 260px; margin-bottom: 22px; cursor: pointer;
+                        user-select: none; -webkit-user-select: none; }
+    .study-card-inner { width: 100%; height: 100%; position: relative; transition: transform .5s cubic-bezier(.4,0,.2,1);
+                        transform-style: preserve-3d; will-change: transform; }
+    .study-card-inner.flipped { transform: rotateY(180deg); }
+    .study-card-inner.swipe-right { animation: swipeRight .4s ease forwards; }
+    .study-card-inner.swipe-left  { animation: swipeLeft  .4s ease forwards; }
+    @keyframes swipeRight { to { transform: translateX(110%) rotate(20deg) rotateY(0deg); opacity: 0; } }
+    @keyframes swipeLeft  { to { transform: translateX(-110%) rotate(-20deg) rotateY(180deg); opacity: 0; } }
+
+    .study-face { position: absolute; inset: 0; border-radius: 18px; padding: 28px 32px;
+                  display: flex; align-items: center; justify-content: center;
+                  backface-visibility: hidden; -webkit-backface-visibility: hidden;
+                  border: 1.5px solid var(--border); overflow: auto; }
+    .study-face-front { background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,.08); }
+    .study-face-back  { background: #fff; transform: rotateY(180deg);
+                        box-shadow: 0 4px 24px rgba(0,0,0,.08); }
+    .study-face-text  { font-family: 'Manrope', sans-serif; font-size: 1.15rem; font-weight: 600;
+                        color: var(--text); text-align: center; line-height: 1.6; }
+    .study-face-label { position: absolute; top: 12px; left: 16px; font-size: .65rem; font-weight: 700;
+                        text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
+    .study-hint { text-align: center; font-size: .77rem; color: var(--text-3); margin-bottom: 20px; }
+
+    /* drag tilt */
+    .study-card-inner.drag-right { transform: rotate(6deg) translateX(30px); }
+    .study-card-inner.drag-left  { transform: rotate(-6deg) translateX(-30px); }
+
+    /* answer quality buttons */
+    .study-btns { display: none; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }
+    .study-btns.visible { display: flex; }
+    .sq-btn { padding: 10px 20px; border-radius: 10px; border: 2px solid transparent;
+              cursor: pointer; font-family: 'Manrope', sans-serif; font-size: .84rem; font-weight: 700;
+              transition: .18s; display: flex; flex-direction: column; align-items: center; gap: 2px; }
+    .sq-btn .sq-days { font-size: .66rem; font-weight: 600; opacity: .65; }
+    .sq-btn-again { background: #FEE2E2; border-color: #FECACA; color: #DC2626; }
+    .sq-btn-again:hover  { background: #FECACA; }
+    .sq-btn-hard  { background: #FEF3C7; border-color: #FDE68A; color: #D97706; }
+    .sq-btn-hard:hover   { background: #FDE68A; }
+    .sq-btn-good  { background: #DBEAFE; border-color: #BFDBFE; color: #2563EB; }
+    .sq-btn-good:hover   { background: #BFDBFE; }
+    .sq-btn-easy  { background: #DCFCE7; border-color: #BBF7D0; color: #16A34A; }
+    .sq-btn-easy:hover   { background: #BBF7D0; }
+
+    /* swipe indicator */
+    .swipe-indicator { position: absolute; top: 18px; font-size: 1.4rem; font-weight: 900;
+                       letter-spacing: .04em; padding: 5px 14px; border-radius: 8px;
+                       opacity: 0; pointer-events: none; transition: opacity .1s; z-index: 10; }
+    .swipe-right-ind { right: 20px; background: #DCFCE7; color: #16A34A; border: 2px solid #BBF7D0; }
+    .swipe-left-ind  { left: 20px;  background: #FEE2E2; color: #DC2626; border: 2px solid #FECACA; }
+
+    /* finished state */
+    .study-done { text-align: center; padding: 48px 24px; }
+    .study-done-icon { font-size: 3rem; margin-bottom: 16px; }
+    .study-done h2 { font-family: 'Unbounded', sans-serif; font-size: 1.4rem; font-weight: 800;
+                     color: var(--text); margin-bottom: 8px; }
+    .study-done p { color: var(--text-3); font-size: .88rem; margin-bottom: 24px; }
+    .study-session-stats { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }
+    .ss-stat { background: #fff; border: 1.5px solid var(--border); border-radius: 12px;
+               padding: 12px 20px; text-align: center; }
+    .ss-stat-n { font-family: 'Unbounded', sans-serif; font-size: 1.4rem; font-weight: 800; }
+    .ss-stat-l { font-size: .72rem; color: var(--text-3); font-weight: 600; }
+
+    /* ── modals ── */
+    .fc-modal { position: fixed; inset: 0; z-index: 300; display: none;
+                align-items: center; justify-content: center; padding: 16px; }
+    .fc-modal.open { display: flex; }
+    .fc-modal-bg { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
+    .fc-modal-box { position: relative; z-index: 1; background: #fff; border-radius: 18px;
+                    padding: 28px; width: 100%; max-width: 480px; box-shadow: 0 20px 60px rgba(0,0,0,.18); }
+    .fc-modal-title { font-family: 'Unbounded', sans-serif; font-size: 1rem; font-weight: 800;
+                      color: var(--text); margin-bottom: 20px; }
+    .fc-modal-field { margin-bottom: 14px; }
+    .fc-modal-label { font-size: .75rem; font-weight: 700; color: var(--text-2);
+                      text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; }
+    .fc-modal-input { width: 100%; padding: 9px 12px; border: 1.5px solid var(--border);
+                      border-radius: 9px; font-family: 'Manrope', sans-serif; font-size: .88rem;
+                      color: var(--text); outline: none; box-sizing: border-box; transition: .15s; }
+    .fc-modal-input:focus { border-color: var(--violet); }
+    .fc-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }
+    .color-picker-row { display: flex; gap: 8px; flex-wrap: wrap; }
+    .cp-swatch { width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
+                 border: 3px solid transparent; transition: .15s; }
+    .cp-swatch.active, .cp-swatch:hover { border-color: var(--text); transform: scale(1.15); }
+
+    /* ── empty ── */
+    .fc-empty { text-align: center; padding: 60px 24px; }
+    .fc-empty-icon { font-size: 3rem; margin-bottom: 14px; }
+    .fc-empty h3 { font-family: 'Unbounded', sans-serif; font-size: 1rem; font-weight: 800;
+                   color: var(--text); margin-bottom: 8px; }
+    .fc-empty p  { color: var(--text-3); font-size: .84rem; margin-bottom: 22px; }
+
+    @media (max-width: 768px) {
+      .fc-wrap { padding: 16px 14px 60px; }
+      .fc-title { font-size: 1rem; }
+      .fc-stats { gap: 8px; }
+      .fc-stat { min-width: 90px; padding: 10px 12px; }
+      .fc-stat-val { font-size: 1.1rem; }
+      .deck-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
+      .study-face { padding: 24px 18px; }
+      .sq-btn { padding: 9px 16px; font-size: .8rem; }
+    }
+    @media (max-width: 480px) {
+      .fc-wrap { padding: 12px 10px 60px; }
+      .fc-header { flex-wrap: wrap; gap: 10px; }
+      .fc-title { font-size: 0.92rem; }
+      .deck-grid { grid-template-columns: 1fr; }
+      .study-face { padding: 20px 14px; }
+      .sq-btn { padding: 8px 14px; font-size: .78rem; flex: 1; justify-content: center; }
+    }
+  </style>
+</head>
+<body>
+<div class="app-layout">
+  <aside class="sidebar">
+    <div class="sb-brand">
+      <a href="/" class="sb-logo">Learn<span>Space</span></a>
+      <button class="sb-toggle" onclick="toggleSidebar()" title="Свернуть"><i data-lucide="panel-left-close" class="sb-icon"></i></button>
+    </div>
+    <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="/flashcards" class="sb-link active"><i data-lucide="layers" 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>
+    <div class="sb-spacer"></div>
+    <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>
+    <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>
+          <span class="sb-logout" style="pointer-events:none">Мой профиль</span>
+        </div>
+      </a>
+    </div>
+  </aside>
+
+  <main class="sb-content">
+    <div class="fc-wrap">
+
+      <!-- ── DECKS VIEW ── -->
+      <div id="view-decks">
+        <div class="fc-header">
+          <h1 class="fc-title">Флэш-карточки</h1>
+          <button class="fc-btn fc-btn-primary" onclick="openNewDeckModal()">+ Новая колода</button>
+        </div>
+        <div class="fc-stats" id="fc-stats-bar"></div>
+        <div class="deck-grid" id="deck-grid">
+          <div style="grid-column:1/-1; text-align:center; padding:40px; color:var(--text-3)">Загрузка…</div>
+        </div>
+      </div>
+
+      <!-- ── CARDS VIEW ── -->
+      <div id="view-cards">
+        <div class="fc-header">
+          <button class="fc-back visible" id="cards-back-btn" onclick="showDecks()">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M19 12H5M12 5l-7 7 7 7"/></svg>
+            Колоды
+          </button>
+          <h1 class="fc-title" id="cards-deck-title">Название колоды</h1>
+          <button class="fc-btn fc-btn-ghost" onclick="openBulkModal()">Добавить список</button>
+          <button class="fc-btn fc-btn-primary" id="cards-study-btn" onclick="startStudy()">Начать изучение</button>
+        </div>
+        <div class="card-list" id="card-list"></div>
+        <!-- Add card row -->
+        <div class="card-add-bar" style="margin-bottom:14px">
+          <input class="card-add-input" id="new-card-front" placeholder="Лицевая сторона (вопрос)…" onkeydown="addCardOnEnter(event)" />
+          <input class="card-add-input" id="new-card-back"  placeholder="Обратная сторона (ответ)…" onkeydown="addCardOnEnter(event)" />
+          <button class="fc-btn fc-btn-primary" onclick="addCard()">+ Добавить</button>
+        </div>
+        <div style="display:flex;gap:10px;align-items:center">
+          <button class="fc-btn fc-btn-ghost" onclick="openEditDeckModal()"><svg class="ic" viewBox="0 0 24 24"><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.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>️ Редактировать колоду</button>
+          <button class="fc-btn fc-btn-danger" onclick="confirmDeleteDeck()">Удалить колоду</button>
+        </div>
+      </div>
+
+      <!-- ── STUDY VIEW ── -->
+      <div id="view-study">
+        <div class="fc-header">
+          <button class="fc-back visible" onclick="showCards()">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M19 12H5M12 5l-7 7 7 7"/></svg>
+            Карточки
+          </button>
+          <h1 class="fc-title" id="study-deck-title">Изучение</h1>
+        </div>
+        <div class="study-wrap">
+          <div class="study-progress-bar"><div class="study-progress-fill" id="study-prog" style="width:0%"></div></div>
+          <div class="study-counter" id="study-counter">1 / 10</div>
+
+          <div class="study-card-scene" id="study-scene" onclick="flipCard()">
+            <div class="study-card-inner" id="study-card">
+              <div class="study-face study-face-front">
+                <span class="study-face-label">Вопрос</span>
+                <div class="study-face-text" id="study-front-text"></div>
+              </div>
+              <div class="study-face study-face-back">
+                <span class="study-face-label">Ответ</span>
+                <div class="study-face-text" id="study-back-text"></div>
+              </div>
+              <span class="swipe-indicator swipe-right-ind" id="ind-right">ЗНАЮ <svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>
+              <span class="swipe-indicator swipe-left-ind"  id="ind-left">ЕЩЁ РАЗ <svg class="ic" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span>
+            </div>
+          </div>
+          <div class="study-hint" id="study-flip-hint">Нажмите, чтобы увидеть ответ</div>
+
+          <div class="study-btns" id="study-btns">
+            <button class="sq-btn sq-btn-again" onclick="answer(0)">Снова<span class="sq-days" id="sq-days-0">&lt;1 мин</span></button>
+            <button class="sq-btn sq-btn-hard"  onclick="answer(3)">Трудно<span class="sq-days" id="sq-days-3">—</span></button>
+            <button class="sq-btn sq-btn-good"  onclick="answer(4)">Знаю<span class="sq-days" id="sq-days-4">—</span></button>
+            <button class="sq-btn sq-btn-easy"  onclick="answer(5)">Легко<span class="sq-days" id="sq-days-5">—</span></button>
+          </div>
+
+          <!-- done screen -->
+          <div class="study-done" id="study-done" style="display:none">
+            <div class="study-done-icon"><svg class="ic" viewBox="0 0 24 24"><path d="m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3z"/></svg></div>
+            <h2>Сессия завершена!</h2>
+            <p id="study-done-sub">Хорошая работа — вы просмотрели все карточки</p>
+            <div class="study-session-stats" id="study-session-stats"></div>
+            <div style="display:flex;gap:12px;justify-content:center">
+              <button class="fc-btn fc-btn-primary" onclick="startStudy()">Повторить ещё раз</button>
+              <button class="fc-btn fc-btn-ghost"   onclick="showCards()">Вернуться</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </main>
+</div>
+
+<!-- ── New / Edit Deck Modal ── -->
+<div class="fc-modal" id="modal-deck">
+  <div class="fc-modal-bg" onclick="closeModal('modal-deck')"></div>
+  <div class="fc-modal-box">
+    <div class="fc-modal-title" id="modal-deck-title">Новая колода</div>
+    <div class="fc-modal-field">
+      <div class="fc-modal-label">Название</div>
+      <input class="fc-modal-input" id="modal-deck-name" placeholder="Биология — клетка" maxlength="80" />
+    </div>
+    <div class="fc-modal-field">
+      <div class="fc-modal-label">Описание (необязательно)</div>
+      <input class="fc-modal-input" id="modal-deck-desc" placeholder="Краткое описание…" maxlength="200" />
+    </div>
+    <div class="fc-modal-field">
+      <div class="fc-modal-label">Цвет</div>
+      <div class="color-picker-row" id="color-picker">
+        <!-- filled by JS -->
+      </div>
+    </div>
+    <div class="fc-modal-actions">
+      <button class="fc-btn fc-btn-ghost" onclick="closeModal('modal-deck')">Отмена</button>
+      <button class="fc-btn fc-btn-primary" onclick="saveDeckModal()">Сохранить</button>
+    </div>
+  </div>
+</div>
+
+<!-- ── Bulk add Modal ── -->
+<div class="fc-modal" id="modal-bulk">
+  <div class="fc-modal-bg" onclick="closeModal('modal-bulk')"></div>
+  <div class="fc-modal-box">
+    <div class="fc-modal-title">Добавить список карточек</div>
+    <div class="fc-modal-field">
+      <div class="fc-modal-label">Формат: одна карточка = одна строка, вопрос и ответ разделены «—» или «|»</div>
+      <textarea class="fc-modal-input" id="bulk-text" rows="10" style="resize:vertical"
+                placeholder="Митохондрия — органелл клетки, производит АТФ&#10;Ядро | содержит ДНК&#10;Рибосома — синтез белка"></textarea>
+    </div>
+    <div class="fc-modal-actions">
+      <button class="fc-btn fc-btn-ghost" onclick="closeModal('modal-bulk')">Отмена</button>
+      <button class="fc-btn fc-btn-primary" onclick="saveBulk()">Добавить</button>
+    </div>
+  </div>
+</div>
+
+<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>
+(async () => {
+  /* ── auth ── */
+  const user = await LS.init();
+  if (!user) return;
+  const avatarEl = document.getElementById('nav-avatar');
+  const nameEl   = document.getElementById('nav-user');
+  const initials = (user.name||'LS').split(' ').slice(0,2).map(w=>w[0]?.toUpperCase()||'').join('')||'LS';
+  if (avatarEl) avatarEl.textContent = initials;
+  if (nameEl)   nameEl.textContent   = user.name || user.username || '';
+  LS.showBoardIfAllowed();
+  if (user.role!=='student')  { document.getElementById('btn-classes')?.style && (document.getElementById('btn-classes').style.display='flex'); }
+  if (user.role==='admin')    { document.getElementById('btn-admin')?.style   && (document.getElementById('btn-admin').style.display='flex'); }
+
+  if (localStorage.getItem('ls_sb_collapsed') === '1')
+    document.querySelector('.app-layout')?.classList.add('sb-collapsed');
+
+  lucide.createIcons();
+  init();
+})();
+
+/* ════ State ════ */
+let _decks    = [];
+let _curDeck  = null;   // { id, title, color, ... }
+let _cards    = [];     // cards in current deck
+let _editingDeckId = null;
+let _deckColor = '#9B5DE5';
+
+const COLORS = ['#9B5DE5','#EF476F','#FF9F1C','#06D6E0','#22d399','#3B82F6','#F15BB5','#6B7280'];
+
+/* ════ Init ════ */
+async function init() {
+  buildColorPicker();
+  await loadDecks();
+}
+
+async function loadDecks() {
+  const [decks, stats] = await Promise.all([
+    LS.api('/flashcards/decks').catch(()=>({decks:[]})),
+    LS.api('/flashcards/stats').catch(()=>null),
+  ]);
+  _decks = decks.decks || [];
+  renderStats(stats);
+  renderDecks();
+}
+
+/* ════ Sidebar toggle ════ */
+function toggleSidebar() {
+  const l = document.querySelector('.app-layout');
+  l.classList.toggle('sb-collapsed');
+  localStorage.setItem('ls_sb_collapsed', l.classList.contains('sb-collapsed') ? '1' : '0');
+}
+
+/* ════ Stats bar ════ */
+function renderStats(s) {
+  if (!s) return;
+  const bar = document.getElementById('fc-stats-bar');
+  bar.innerHTML = [
+    { val: s.decks_count,    lbl: 'Колод',   col: '#9B5DE5' },
+    { val: s.cards_count,    lbl: 'Карточек', col: '#3B82F6' },
+    { val: s.due_count,      lbl: 'К повторению', col: '#D97706' },
+    { val: s.reviewed_today, lbl: 'Сегодня',  col: '#16A34A' },
+  ].map(s => `<div class="fc-stat">
+    <span class="fc-stat-val" style="color:${s.col}">${s.val}</span>
+    <span class="fc-stat-lbl">${s.lbl}</span>
+  </div>`).join('');
+}
+
+/* ════ Deck grid ════ */
+function renderDecks() {
+  const grid = document.getElementById('deck-grid');
+  if (!_decks.length) {
+    grid.innerHTML = `<div class="fc-empty" style="grid-column:1/-1">
+      <div class="fc-empty-icon">🃏</div>
+      <h3>Нет колод</h3>
+      <p>Создайте первую колоду карточек</p>
+      <button class="fc-btn fc-btn-primary" onclick="openNewDeckModal()">+ Создать колоду</button>
+    </div>`;
+    return;
+  }
+  grid.innerHTML = _decks.map(d => {
+    const due = d.due_count;
+    const dueHtml = due > 0
+      ? `<span class="deck-badge due"><svg class="ic" viewBox="0 0 24 24"><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> ${due} к повторению</span>`
+      : `<span class="deck-badge zero"><svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg> Актуально</span>`;
+    return `<div class="deck-card">
+      <div class="deck-stripe" style="background:${d.color}"></div>
+      <div class="deck-body" onclick="openDeck(${d.id})">
+        <div class="deck-name">${esc(d.title)}</div>
+        ${d.description ? `<div class="deck-desc">${esc(d.description)}</div>` : ''}
+        <div class="deck-meta">
+          <span class="deck-badge"><svg class="ic" viewBox="0 0 24 24"><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="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg> ${d.card_count} карточек</span>
+          ${dueHtml}
+        </div>
+      </div>
+      <div class="deck-actions">
+        <button class="deck-btn-study" ${due===0&&d.card_count>0?'':''}
+                onclick="openDeckStudy(${d.id})" ${d.card_count===0?'disabled':''}>
+          ${due > 0 ? `<svg class="ic" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg> Повторить (${due})` : d.card_count > 0 ? '<svg class="ic" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg> Изучать' : 'Нет карточек'}
+        </button>
+        <button class="deck-btn-edit" onclick="openDeck(${d.id})"><svg class="ic" viewBox="0 0 24 24"><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.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>️</button>
+      </div>
+    </div>`;
+  }).join('') + `<div class="deck-add" onclick="openNewDeckModal()">
+    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v8M8 12h8"/></svg>
+    Новая колода
+  </div>`;
+}
+
+/* ════ Open deck (card editor) ════ */
+async function openDeck(id) {
+  _curDeck = _decks.find(d => d.id === id);
+  if (!_curDeck) return;
+  document.getElementById('cards-deck-title').textContent = _curDeck.title;
+  const data = await LS.api(`/flashcards/decks/${id}/cards`).catch(()=>({cards:[]}));
+  _cards = data.cards || [];
+  renderCardList();
+  document.getElementById('view-decks').style.display = 'none';
+  document.getElementById('view-cards').style.display = 'block';
+  document.getElementById('view-study').style.display = 'none';
+}
+
+function openDeckStudy(id) {
+  _curDeck = _decks.find(d => d.id === id);
+  if (!_curDeck) return;
+  startStudyForDeck(id);
+}
+
+function showDecks() {
+  document.getElementById('view-decks').style.display = 'block';
+  document.getElementById('view-cards').style.display = 'none';
+  document.getElementById('view-study').style.display = 'none';
+  loadDecks();
+}
+
+function showCards() {
+  document.getElementById('view-decks').style.display = 'none';
+  document.getElementById('view-cards').style.display = 'block';
+  document.getElementById('view-study').style.display = 'none';
+}
+
+/* ════ Card list ════ */
+function renderCardList() {
+  const list = document.getElementById('card-list');
+  if (!_cards.length) {
+    list.innerHTML = `<div class="fc-empty" style="padding:30px 0">
+      <div class="fc-empty-icon"><svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
+      <h3>Нет карточек</h3>
+      <p>Добавьте первую карточку ниже</p>
+    </div>`;
+    return;
+  }
+  list.innerHTML = _cards.map((c, i) => `
+    <div class="card-item" id="ci-${c.id}">
+      <div class="card-side">
+        <div class="card-side-lbl">Вопрос</div>
+        <textarea class="card-textarea" rows="2"
+          onchange="saveCard(${c.id},'front',this.value)">${esc(c.front)}</textarea>
+      </div>
+      <div class="card-divider"></div>
+      <div class="card-side">
+        <div class="card-side-lbl">Ответ</div>
+        <textarea class="card-textarea" rows="2"
+          onchange="saveCard(${c.id},'back',this.value)">${esc(c.back)}</textarea>
+      </div>
+      <div class="card-actions">
+        <button class="card-act-btn del" onclick="deleteCard(${c.id})" title="Удалить">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6M14 11v6"/></svg>
+        </button>
+      </div>
+    </div>`).join('');
+}
+
+async function addCard() {
+  if (!_curDeck) return;
+  const front = document.getElementById('new-card-front').value.trim();
+  const back  = document.getElementById('new-card-back').value.trim();
+  if (!front && !back) return;
+  const card = await LS.api(`/flashcards/decks/${_curDeck.id}/cards`, {
+    method: 'POST', body: JSON.stringify({ front, back })
+  }).catch(()=>null);
+  if (!card) return;
+  _cards.push(card);
+  document.getElementById('new-card-front').value = '';
+  document.getElementById('new-card-back').value  = '';
+  document.getElementById('new-card-front').focus();
+  renderCardList();
+}
+
+function addCardOnEnter(e) {
+  if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); addCard(); }
+}
+
+async function saveCard(id, field, value) {
+  const card = _cards.find(c => c.id === id);
+  if (!card) return;
+  card[field] = value;
+  await LS.api(`/flashcards/cards/${id}`, {
+    method: 'PUT', body: JSON.stringify({ [field]: value })
+  }).catch(()=>{});
+}
+
+async function deleteCard(id) {
+  if (!confirm('Удалить карточку?')) return;
+  await LS.api(`/flashcards/cards/${id}`, { method: 'DELETE' }).catch(()=>{});
+  _cards = _cards.filter(c => c.id !== id);
+  renderCardList();
+}
+
+/* ════ Bulk add ════ */
+function openBulkModal() {
+  document.getElementById('bulk-text').value = '';
+  document.getElementById('modal-bulk').classList.add('open');
+}
+
+async function saveBulk() {
+  const text = document.getElementById('bulk-text').value.trim();
+  if (!text || !_curDeck) return;
+  const lines = text.split('\n').map(l => l.trim()).filter(Boolean);
+  const cards = lines.map(l => {
+    const sep = l.includes('—') ? '—' : '|';
+    const [front, ...rest] = l.split(sep);
+    return { front: (front||'').trim(), back: rest.join(sep).trim() };
+  }).filter(c => c.front);
+  if (!cards.length) return;
+  const result = await LS.api(`/flashcards/decks/${_curDeck.id}/cards/bulk`, {
+    method: 'POST', body: JSON.stringify({ cards })
+  }).catch(()=>null);
+  if (result?.inserted) {
+    _cards.push(...result.inserted);
+    renderCardList();
+  }
+  closeModal('modal-bulk');
+}
+
+/* ════ Study mode ════ */
+let _studyCards  = [];
+let _studyIdx    = 0;
+let _studyFlipped = false;
+let _sessionStats = { again: 0, hard: 0, good: 0, easy: 0 };
+
+async function startStudy() {
+  if (!_curDeck) return;
+  await startStudyForDeck(_curDeck.id);
+}
+
+async function startStudyForDeck(deckId) {
+  _curDeck = _curDeck || _decks.find(d => d.id === deckId);
+  if (!_curDeck) return;
+  const data = await LS.api(`/flashcards/decks/${deckId}/study`).catch(()=>null);
+  if (!data || !data.cards?.length) {
+    LS.toast('Нет карточек для повторения — всё актуально!', 'success');
+    return;
+  }
+  _studyCards   = data.cards;
+  _studyIdx     = 0;
+  _studyFlipped = false;
+  _sessionStats = { again: 0, hard: 0, good: 0, easy: 0 };
+  document.getElementById('study-deck-title').textContent = _curDeck.title;
+  document.getElementById('study-done').style.display = 'none';
+  document.getElementById('study-scene').style.display = 'block';
+  document.getElementById('study-flip-hint').style.display = 'block';
+  document.getElementById('view-decks').style.display = 'none';
+  document.getElementById('view-cards').style.display = 'none';
+  document.getElementById('view-study').style.display = 'block';
+  showStudyCard();
+  bindSwipe();
+}
+
+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;
+  _studyFlipped = false;
+  document.getElementById('study-btns').classList.remove('visible');
+  document.getElementById('study-flip-hint').style.display = 'block';
+  document.getElementById('ind-right').style.opacity = '0';
+  document.getElementById('ind-left').style.opacity  = '0';
+  updateStudyProgress();
+  updateSQDays(card);
+}
+
+function updateStudyProgress() {
+  const total = _studyCards.length;
+  const done  = _studyIdx;
+  document.getElementById('study-prog').style.width = (done / total * 100) + '%';
+  document.getElementById('study-counter').textContent = `${done + 1} / ${total}`;
+}
+
+function flipCard() {
+  if (_studyFlipped) return;
+  _studyFlipped = true;
+  document.getElementById('study-card').classList.add('flipped');
+  document.getElementById('study-btns').classList.add('visible');
+  document.getElementById('study-flip-hint').style.display = 'none';
+}
+
+async function answer(quality) {
+  const card = _studyCards[_studyIdx];
+  if (!card) return;
+  // track session stats
+  if (quality === 0)      _sessionStats.again++;
+  else if (quality === 3) _sessionStats.hard++;
+  else if (quality === 4) _sessionStats.good++;
+  else if (quality === 5) _sessionStats.easy++;
+  // send review
+  await LS.api(`/flashcards/cards/${card.id}/review`, {
+    method: 'POST', body: JSON.stringify({ quality })
+  }).catch(()=>{});
+  // animate swipe
+  const el = document.getElementById('study-card');
+  el.classList.add(quality >= 3 ? 'swipe-right' : 'swipe-left');
+  setTimeout(() => {
+    _studyIdx++;
+    if (_studyIdx >= _studyCards.length) finishStudy();
+    else showStudyCard();
+  }, 380);
+}
+
+function finishStudy() {
+  document.getElementById('study-scene').style.display = 'none';
+  document.getElementById('study-btns').classList.remove('visible');
+  document.getElementById('study-flip-hint').style.display = 'none';
+  document.getElementById('study-done').style.display = 'block';
+  const s = _sessionStats;
+  const total = s.again + s.hard + s.good + s.easy;
+  document.getElementById('study-done-sub').textContent =
+    `Просмотрено ${total} карточек`;
+  document.getElementById('study-session-stats').innerHTML = [
+    { n: s.again, l: 'Снова',  c: '#DC2626' },
+    { n: s.hard,  l: 'Трудно', c: '#D97706' },
+    { n: s.good,  l: 'Знаю',   c: '#2563EB' },
+    { n: s.easy,  l: 'Легко',  c: '#16A34A' },
+  ].map(x => `<div class="ss-stat">
+    <div class="ss-stat-n" style="color:${x.c}">${x.n}</div>
+    <div class="ss-stat-l">${x.l}</div>
+  </div>`).join('');
+}
+
+/* ── estimated next interval preview for sq buttons ── */
+function updateSQDays(card) {
+  const ef  = card.ease_factor  || 2.5;
+  const iv  = card.interval_days || 1;
+  const rep = card.repetitions  || 0;
+  const preview = (q) => {
+    if (q < 3) return '<1 мин';
+    let niv;
+    if (rep === 0) niv = 1;
+    else if (rep === 1) niv = 6;
+    else niv = Math.round(iv * ef);
+    const nef = Math.max(1.3, ef + 0.1 - (5 - q) * (0.08 + (5 - q) * 0.02));
+    let n2 = (q === 3 ? Math.max(1, niv - 2) : q === 4 ? niv : Math.round(niv * nef));
+    return n2 <= 1 ? '1 день' : n2 + ' дн.';
+  };
+  document.getElementById('sq-days-0').textContent = '<1 мин';
+  document.getElementById('sq-days-3').textContent = preview(3);
+  document.getElementById('sq-days-4').textContent = preview(4);
+  document.getElementById('sq-days-5').textContent = preview(5);
+}
+
+/* ── touch/mouse swipe ── */
+function bindSwipe() {
+  const scene = document.getElementById('study-scene');
+  let startX = null, curX = null;
+  const THRESHOLD = 80;
+
+  const onStart = e => { startX = (e.touches ? e.touches[0] : e).clientX; curX = startX; };
+  const onMove  = e => {
+    if (startX === null) return;
+    curX = (e.touches ? e.touches[0] : e).clientX;
+    const dx = curX - startX;
+    const card = document.getElementById('study-card');
+    if (Math.abs(dx) < 10) return;
+    card.style.transform = `rotate(${dx * 0.04}deg) translateX(${dx * 0.3}px)`;
+    document.getElementById('ind-right').style.opacity = dx > 30 ? Math.min(1, (dx - 30) / 50) : '0';
+    document.getElementById('ind-left').style.opacity  = dx < -30 ? Math.min(1, (-dx - 30) / 50) : '0';
+    if (e.cancelable) e.preventDefault();
+  };
+  const onEnd = () => {
+    if (startX === null) return;
+    const dx = curX - startX;
+    const card = document.getElementById('study-card');
+    card.style.transform = '';
+    if (dx > THRESHOLD && _studyFlipped)  answer(5);
+    else if (dx < -THRESHOLD) { if (!_studyFlipped) flipCard(); else answer(0); }
+    startX = null; curX = null;
+    document.getElementById('ind-right').style.opacity = '0';
+    document.getElementById('ind-left').style.opacity  = '0';
+  };
+  scene.addEventListener('mousedown',  onStart);
+  scene.addEventListener('mousemove',  onMove);
+  scene.addEventListener('mouseup',    onEnd);
+  scene.addEventListener('mouseleave', onEnd);
+  scene.addEventListener('touchstart', onStart, { passive: true });
+  scene.addEventListener('touchmove',  onMove,  { passive: false });
+  scene.addEventListener('touchend',   onEnd);
+}
+
+/* ════ Deck modals ════ */
+function buildColorPicker() {
+  document.getElementById('color-picker').innerHTML = COLORS.map(c =>
+    `<div class="cp-swatch${c===_deckColor?' active':''}" style="background:${c}"
+         onclick="selectColor('${c}',this)" data-color="${c}"></div>`
+  ).join('');
+}
+
+function selectColor(color, el) {
+  _deckColor = color;
+  document.querySelectorAll('.cp-swatch').forEach(s => s.classList.remove('active'));
+  el.classList.add('active');
+}
+
+function openNewDeckModal() {
+  _editingDeckId = null;
+  document.getElementById('modal-deck-title').textContent = 'Новая колода';
+  document.getElementById('modal-deck-name').value = '';
+  document.getElementById('modal-deck-desc').value = '';
+  _deckColor = '#9B5DE5';
+  buildColorPicker();
+  document.getElementById('modal-deck').classList.add('open');
+  setTimeout(() => document.getElementById('modal-deck-name').focus(), 50);
+}
+
+function openEditDeckModal() {
+  if (!_curDeck) return;
+  _editingDeckId = _curDeck.id;
+  document.getElementById('modal-deck-title').textContent = 'Редактировать колоду';
+  document.getElementById('modal-deck-name').value = _curDeck.title;
+  document.getElementById('modal-deck-desc').value = _curDeck.description || '';
+  _deckColor = _curDeck.color || '#9B5DE5';
+  buildColorPicker();
+  document.getElementById('modal-deck').classList.add('open');
+}
+
+async function saveDeckModal() {
+  const title = document.getElementById('modal-deck-name').value.trim();
+  const desc  = document.getElementById('modal-deck-desc').value.trim();
+  if (!title) { document.getElementById('modal-deck-name').focus(); return; }
+  if (_editingDeckId) {
+    await LS.api(`/flashcards/decks/${_editingDeckId}`, {
+      method: 'PUT', body: JSON.stringify({ title, description: desc, color: _deckColor })
+    }).catch(()=>{});
+    _curDeck.title = title; _curDeck.description = desc; _curDeck.color = _deckColor;
+    document.getElementById('cards-deck-title').textContent = title;
+    const d = _decks.find(x => x.id === _editingDeckId);
+    if (d) { d.title = title; d.description = desc; d.color = _deckColor; }
+  } else {
+    const deck = await LS.api('/flashcards/decks', {
+      method: 'POST', body: JSON.stringify({ title, description: desc, color: _deckColor })
+    }).catch(()=>null);
+    if (deck) { _decks.unshift(deck); renderDecks(); }
+  }
+  closeModal('modal-deck');
+}
+
+async function confirmDeleteDeck() {
+  if (!_curDeck) return;
+  if (!await LS.confirm(`Удалить колоду «${_curDeck.title}» и все карточки?`, { title: 'Удаление колоды', confirmText: 'Удалить', danger: true })) return;
+  await LS.api(`/flashcards/decks/${_curDeck.id}`, { method: 'DELETE' }).catch(()=>{});
+  _decks = _decks.filter(d => d.id !== _curDeck.id);
+  _curDeck = null; _cards = [];
+  showDecks();
+}
+
+function closeModal(id) { document.getElementById(id).classList.remove('open'); }
+
+
+</script>
+<script src="/js/mobile.js"></script>
+</body>
+</html>
diff --git a/frontend/gradebook.html b/frontend/gradebook.html
new file mode 100644
index 0000000..222c3de
--- /dev/null
+++ b/frontend/gradebook.html
@@ -0,0 +1,554 @@
+<!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://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+  <style>
+    .sb-content { background: #f4f5f8; overflow-y: auto; }
+
+    /* ── page header ── */
+    .gb-header {
+      background: linear-gradient(140deg, #0a0220 0%, #1a0a3c 60%, #080818 100%);
+      padding: 32px 28px 28px; position: relative; overflow: hidden;
+    }
+    .gb-header-dots {
+      position: absolute; inset: 0;
+      background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
+      background-size: 22px 22px; pointer-events: none;
+    }
+    .gb-header-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; }
+    .gb-header-back {
+      display: inline-flex; align-items: center; gap: 6px;
+      font-size: 0.78rem; font-weight: 700; color: rgba(255,255,255,0.45);
+      text-decoration: none; margin-bottom: 14px; transition: color 0.15s;
+    }
+    .gb-header-back:hover { color: rgba(255,255,255,0.8); }
+    .gb-title-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
+    .gb-title {
+      font-family: 'Unbounded', sans-serif; font-size: 1.3rem; font-weight: 800;
+      color: #fff; flex: 1;
+    }
+    .gb-actions { display: flex; gap: 8px; flex-shrink: 0; }
+    .gb-action-btn {
+      padding: 8px 18px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,0.2);
+      background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.7);
+      font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 700;
+      cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.15s;
+    }
+    .gb-action-btn:hover { background: rgba(255,255,255,0.14); color: #fff; }
+
+    /* class selector */
+    .gb-class-select {
+      padding: 8px 14px; border: 1.5px solid rgba(255,255,255,0.15); border-radius: 10px;
+      font-family: 'Manrope', sans-serif; font-size: 0.84rem; font-weight: 600;
+      color: #fff; background: rgba(255,255,255,0.08); cursor: pointer;
+    }
+    .gb-class-select option { color: #0F172A; background: #fff; }
+
+    /* ── summary chips ── */
+    .gb-summary {
+      display: flex; gap: 12px; flex-wrap: wrap; max-width: 1200px;
+      margin: -20px auto 0; padding: 0 28px; position: relative; z-index: 2;
+    }
+    .gb-chip {
+      flex: 1; min-width: 150px; background: #fff; border: 1.5px solid rgba(15,23,42,0.07);
+      border-radius: 16px; padding: 16px 18px; box-shadow: 0 2px 8px rgba(15,23,42,0.06);
+    }
+    .gb-chip-val {
+      font-family: 'Unbounded', sans-serif; font-size: 1.3rem; font-weight: 800;
+    }
+    .gb-chip-label { font-size: 0.72rem; color: #8898AA; font-weight: 600; margin-top: 4px; }
+
+    /* ── table container ── */
+    .gb-container { max-width: 1200px; margin: 0 auto; padding: 24px 28px 80px; }
+
+    /* ── gradebook table ── */
+    .gb-table-wrap {
+      background: #fff; border: 1.5px solid rgba(15,23,42,0.07);
+      border-radius: 20px; overflow: hidden;
+      box-shadow: 0 2px 8px rgba(15,23,42,0.05);
+    }
+    .gb-table-scroll { overflow-x: auto; }
+    .gb-table {
+      width: 100%; border-collapse: collapse; font-size: 0.82rem;
+      min-width: 600px;
+    }
+    .gb-table thead th {
+      position: sticky; top: 0; z-index: 10;
+      background: #f8f9fc; border-bottom: 1.5px solid rgba(15,23,42,0.08);
+      padding: 12px 14px; text-align: left;
+      font-size: 0.7rem; font-weight: 700; color: #8898AA;
+      text-transform: uppercase; letter-spacing: 0.04em;
+      white-space: nowrap;
+    }
+    .gb-table thead th.gb-th-student {
+      position: sticky; left: 0; z-index: 15; background: #f8f9fc;
+      min-width: 180px;
+    }
+    .gb-table thead th.gb-th-avg {
+      background: rgba(155,93,229,0.06); color: var(--violet);
+    }
+    .gb-table thead th.gb-th-rotate {
+      max-width: 80px; min-width: 60px;
+    }
+    .gb-th-text {
+      display: block; max-width: 90px; overflow: hidden;
+      text-overflow: ellipsis; white-space: nowrap;
+    }
+    .gb-table tbody td {
+      padding: 10px 14px; border-bottom: 1px solid rgba(15,23,42,0.05);
+      text-align: center; font-weight: 600; color: #3D4F6B;
+    }
+    .gb-table tbody tr:hover td { background: rgba(155,93,229,0.02); }
+    .gb-table tbody td.gb-td-student {
+      position: sticky; left: 0; z-index: 5;
+      background: #fff; text-align: left; font-weight: 700; color: #0F172A;
+    }
+    .gb-table tbody tr:hover td.gb-td-student { background: rgba(155,93,229,0.02); }
+    .gb-table tbody td.gb-td-avg {
+      background: rgba(155,93,229,0.04); font-weight: 800;
+    }
+    /* grade cells */
+    .gb-grade {
+      display: inline-block; min-width: 40px; padding: 3px 8px;
+      border-radius: 8px; font-size: 0.76rem; font-weight: 700;
+      text-align: center;
+    }
+    .gb-grade-high { background: rgba(6,214,160,0.12); color: #059652; }
+    .gb-grade-mid  { background: rgba(255,209,102,0.18); color: #B8860B; }
+    .gb-grade-low  { background: rgba(239,71,111,0.12); color: #EF476F; }
+    .gb-grade-none { color: #CBD5E1; font-weight: 500; }
+    .gb-grade-full { background: rgba(6,214,160,0.15); color: #059652; font-weight: 800; }
+    /* student name row */
+    .gb-student-row { display: flex; align-items: center; gap: 10px; }
+    .gb-student-avatar {
+      width: 28px; height: 28px; border-radius: 8px;
+      background: rgba(155,93,229,0.1); color: var(--violet);
+      font-size: 0.65rem; font-weight: 800;
+      display: flex; align-items: center; justify-content: center;
+      flex-shrink: 0;
+    }
+    .gb-student-name { font-weight: 700; font-size: 0.82rem; }
+    .gb-student-email { font-size: 0.68rem; color: #8898AA; font-weight: 500; }
+
+    /* ── footer row ── */
+    .gb-table tfoot td {
+      padding: 10px 14px; border-top: 1.5px solid rgba(15,23,42,0.08);
+      font-weight: 800; font-size: 0.78rem; color: #0F172A;
+      background: #f8f9fc; text-align: center;
+    }
+    .gb-table tfoot td.gb-td-student {
+      position: sticky; left: 0; z-index: 5;
+      text-align: left; background: #f8f9fc;
+    }
+
+    /* ── course progress section ── */
+    .gb-section-title {
+      font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 800;
+      color: #0F172A; margin: 28px 0 14px; display: flex; align-items: center; gap: 8px;
+    }
+
+    /* ── empty state ── */
+    .gb-empty {
+      text-align: center; padding: 60px 20px; color: #8898AA; font-size: 0.88rem;
+    }
+    .gb-empty-icon { font-size: 3rem; margin-bottom: 12px; opacity: 0.3; }
+
+    /* ── nav ── */
+    .nav-active { background: rgba(155,93,229,0.08) !important; border-color: var(--violet) !important; color: var(--violet) !important; cursor: default; pointer-events: none; }
+    .notif-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; background: var(--pink); color: #fff; border-radius: 99px; font-size: 0.65rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
+    .notif-drop-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid var(--border); }
+    .notif-drop-title { font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800; }
+    .notif-read-all { background: none; border: none; font-size: 0.74rem; color: var(--violet); cursor: pointer; font-family: 'Manrope', sans-serif; font-weight: 600; }
+    .notif-item { display: flex; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background var(--tr); text-decoration: none; color: inherit; }
+    .notif-item:last-child { border-bottom: none; }
+    .notif-item:hover { background: rgba(155,93,229,0.04); }
+    .notif-item.unread { background: rgba(155,93,229,0.05); }
+    .notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); flex-shrink: 0; margin-top: 5px; }
+    .notif-dot.read { background: transparent; border: 1.5px solid var(--border-h); }
+    .notif-msg { font-size: 0.80rem; line-height: 1.45; flex: 1; }
+    .notif-time { font-size: 0.70rem; color: var(--text-3); margin-top: 2px; }
+    .notif-empty { padding: 28px 16px; text-align: center; color: var(--text-3); font-size: 0.84rem; }
+
+    @media (max-width: 768px) {
+      .gb-header { padding: 20px 16px 36px; }
+      .gb-title-row { gap: 10px; }
+      .gb-title { font-size: 1rem; }
+      .gb-class-select { width: 100%; }
+      .gb-summary { padding: 0 14px; gap: 8px; margin-top: -24px; }
+      .gb-chip { min-width: 0; flex: 1 1 calc(50% - 8px); padding: 12px 14px; }
+      .gb-chip-val { font-size: 1rem; }
+      .gb-container { padding: 18px 12px 80px; }
+    }
+    @media (max-width: 480px) {
+      .gb-chip { flex: 1 1 100%; }
+      .gb-action-btn { width: 100%; justify-content: center; }
+      .gb-title { font-size: 0.9rem; }
+    }
+  </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" onclick="toggleSidebar()" 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"><i data-lucide="layout-dashboard" class="sb-icon"></i><span class="sb-lbl">Доска</span></a>
+      <a href="/classes"    class="sb-link" id="btn-classes"><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>
+      <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>
+      <a href="/live-quiz"     class="sb-link"><i data-lucide="radio"            class="sb-icon"></i><span class="sb-lbl">Live-квиз</span></a>
+      <a href="/gradebook"     class="sb-link nav-active"><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="toggleNotifDrop()">
+          <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>
+    </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>
+          <span class="sb-logout" style="pointer-events:none">Мой профиль</span>
+        </div>
+      </a>
+    </div>
+  </aside>
+  <div class="notif-drop" id="notif-drop"></div>
+  <div class="sb-content">
+
+    <!-- Header -->
+    <div class="gb-header">
+      <div class="gb-header-dots"></div>
+      <div class="gb-header-inner">
+        <a href="/classes" class="gb-header-back"><i data-lucide="arrow-left" style="width:14px;height:14px"></i> Классы</a>
+        <div class="gb-title-row">
+          <div class="gb-title"><i data-lucide="table" style="width:22px;height:22px;opacity:0.4"></i> Журнал оценок</div>
+          <select class="gb-class-select" id="class-select" onchange="loadJournal()">
+            <option value="">Выберите класс…</option>
+          </select>
+          <div class="gb-actions">
+            <button class="gb-action-btn" id="btn-csv" onclick="exportCsv()" style="display:none">
+              <i data-lucide="download" style="width:14px;height:14px"></i> Экспорт CSV
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Summary -->
+    <div class="gb-summary" id="gb-summary" style="display:none">
+      <div class="gb-chip">
+        <div class="gb-chip-val" id="gs-students" style="color:var(--violet)">0</div>
+        <div class="gb-chip-label">Учеников</div>
+      </div>
+      <div class="gb-chip">
+        <div class="gb-chip-val" id="gs-assignments" style="color:#06B6D4">0</div>
+        <div class="gb-chip-label">Заданий</div>
+      </div>
+      <div class="gb-chip">
+        <div class="gb-chip-val" id="gs-avg" style="color:#06D6A0">—</div>
+        <div class="gb-chip-label">Средний балл</div>
+      </div>
+      <div class="gb-chip">
+        <div class="gb-chip-val" id="gs-completion" style="color:#FFD166">—</div>
+        <div class="gb-chip-label">Выполнение</div>
+      </div>
+    </div>
+
+    <!-- Content -->
+    <div class="gb-container" id="gb-container">
+      <div class="gb-empty">
+        <div class="gb-empty-icon"><i data-lucide="table" style="width:48px;height:48px"></i></div>
+        Выберите класс, чтобы увидеть журнал оценок
+      </div>
+    </div>
+
+  </div>
+</div>
+
+<script src="/js/api.js"></script>
+<script>
+  if (!LS.requireAuth()) throw new Error();
+
+  const user = LS.getUser();
+  document.getElementById('nav-user').textContent = user?.name || user?.email || '';
+  document.getElementById('nav-avatar').textContent =
+    (user?.name || 'LS').split(' ').slice(0,2).map(w => w[0]?.toUpperCase() || '').join('') || 'LS';
+
+  const isTeacher = ['admin','teacher'].includes(user?.role);
+  if (!isTeacher) { location.href = '/dashboard'; throw new Error(); }
+  if (user?.role === 'admin') document.getElementById('btn-admin').style.display = '';
+  lucide.createIcons();
+
+  /* ── sidebar ── */
+  function toggleSidebar() {
+    const layout = document.querySelector('.app-layout');
+    const collapsed = layout.classList.toggle('sb-collapsed');
+    localStorage.setItem('ls_sb_collapsed', collapsed ? '1' : '');
+    lucide.createIcons();
+  }
+  if (localStorage.getItem('ls_sb_collapsed'))
+    document.querySelector('.app-layout').classList.add('sb-collapsed');
+
+  /* ── notif ── */
+  function toggleNotifDrop() {
+    const btn = document.getElementById('notif-btn');
+    const drop = document.getElementById('notif-drop');
+    const r = btn.getBoundingClientRect();
+    drop.style.left = (r.right + 8) + 'px';
+    drop.style.top  = r.top + 'px';
+    if (drop.classList.toggle('open')) loadNotifs();
+  }
+  async function loadNotifs() {
+    const drop = document.getElementById('notif-drop');
+    drop.innerHTML = '<div class="notif-drop-header"><span class="notif-drop-title">Уведомления</span><button class="notif-read-all" onclick="readAllNotifs()">Прочитать все</button></div><div class="notif-empty">Загрузка…</div>';
+    try {
+      const data = await LS.api('/api/notifications?limit=20');
+      const items = data.items || [];
+      const badge = document.getElementById('notif-badge');
+      const unread = items.filter(n => !n.is_read).length;
+      badge.textContent = unread; badge.style.display = unread ? '' : 'none';
+      if (!items.length) { drop.querySelector('.notif-empty').textContent = 'Нет уведомлений'; return; }
+      drop.innerHTML = '<div class="notif-drop-header"><span class="notif-drop-title">Уведомления</span><button class="notif-read-all" onclick="readAllNotifs()">Прочитать все</button></div>' +
+        items.map(n => `<a class="notif-item${n.is_read ? '' : ' unread'}" href="${LS.safeHref(n.link)}" onclick="markRead(${n.id})">
+          <div class="notif-dot${n.is_read ? ' read' : ''}"></div>
+          <div><div class="notif-msg">${esc(n.message)}</div><div class="notif-time">${fmtTime(n.created_at)}</div></div>
+        </a>`).join('');
+    } catch {}
+  }
+  async function markRead(id) { try { await LS.api('/api/notifications/' + id + '/read', { method:'POST' }); } catch {} }
+  async function readAllNotifs() { try { await LS.api('/api/notifications/read-all', { method:'POST' }); loadNotifs(); } catch {} }
+  document.addEventListener('click', e => {
+    const drop = document.getElementById('notif-drop');
+    if (drop.classList.contains('open') && !drop.contains(e.target) && !document.getElementById('notif-btn').contains(e.target))
+      drop.classList.remove('open');
+  });
+
+  /* ── helpers ── */
+  function fmtTime(s) {
+    const d = new Date(s && s.includes('T') ? s : (s||'').replace(' ','T')+'Z');
+    const diff = Date.now() - d.getTime();
+    if (diff < 60000) return 'только что';
+    if (diff < 3600000) return Math.floor(diff/60000) + ' мин назад';
+    return d.toLocaleDateString('ru', { day:'numeric', month:'short' });
+  }
+  function initials(name) {
+    return (name || '??').split(' ').slice(0,2).map(w => w[0]?.toUpperCase() || '').join('');
+  }
+  function gradeClass(pct) {
+    if (pct >= 80) return 'gb-grade-high';
+    if (pct >= 50) return 'gb-grade-mid';
+    return 'gb-grade-low';
+  }
+  function gradeCell(pct) {
+    if (pct === null || pct === undefined || pct === '') return '<span class="gb-grade gb-grade-none">—</span>';
+    if (pct === 100) return `<span class="gb-grade gb-grade-full">${pct}%</span>`;
+    return `<span class="gb-grade ${gradeClass(pct)}">${pct}%</span>`;
+  }
+
+  /* ── load classes ── */
+  let currentClassId = null;
+  async function loadClasses() {
+    try {
+      const classes = await LS.api('/api/classes');
+      const sel = document.getElementById('class-select');
+      (classes || []).forEach(c => {
+        const opt = document.createElement('option');
+        opt.value = c.id;
+        opt.textContent = c.name;
+        sel.appendChild(opt);
+      });
+      // auto-select from URL
+      const urlClass = new URLSearchParams(location.search).get('classId');
+      if (urlClass) {
+        sel.value = urlClass;
+        loadJournal();
+      }
+    } catch {}
+  }
+
+  /* ── load journal ── */
+  async function loadJournal() {
+    const classId = document.getElementById('class-select').value;
+    if (!classId) {
+      document.getElementById('gb-summary').style.display = 'none';
+      document.getElementById('btn-csv').style.display = 'none';
+      document.getElementById('gb-container').innerHTML = `<div class="gb-empty"><div class="gb-empty-icon"><i data-lucide="table" style="width:48px;height:48px"></i></div>Выберите класс, чтобы увидеть журнал оценок</div>`;
+      lucide.createIcons();
+      return;
+    }
+    currentClassId = classId;
+    document.getElementById('gb-container').innerHTML = '<div class="spinner" style="margin:60px auto"></div>';
+
+    try {
+      const data = await LS.api('/api/classes/' + classId + '/journal');
+      renderJournal(data);
+    } catch (e) {
+      document.getElementById('gb-container').innerHTML = `<div class="gb-empty">${esc(e.message || 'Ошибка загрузки')}</div>`;
+    }
+  }
+
+  function renderJournal(data) {
+    const { members, assignments, results, courses, courseProgress, studentStats } = data;
+    const container = document.getElementById('gb-container');
+    const summary = document.getElementById('gb-summary');
+
+    if (!members.length) {
+      summary.style.display = 'none';
+      document.getElementById('btn-csv').style.display = 'none';
+      container.innerHTML = '<div class="gb-empty"><div class="gb-empty-icon"><i data-lucide="users" style="width:48px;height:48px"></i></div>В классе пока нет учеников</div>';
+      lucide.createIcons();
+      return;
+    }
+
+    // Build result map
+    const rmap = {};
+    results.forEach(r => { rmap[r.user_id + '_' + r.assignment_id] = r; });
+
+    // Summary stats
+    summary.style.display = '';
+    document.getElementById('btn-csv').style.display = '';
+    document.getElementById('gs-students').textContent = members.length;
+    document.getElementById('gs-assignments').textContent = assignments.length;
+
+    const allPcts = studentStats.filter(s => s.avgPct !== null);
+    const classAvg = allPcts.length > 0
+      ? Math.round(allPcts.reduce((s, x) => s + x.avgPct, 0) / allPcts.length)
+      : 0;
+    document.getElementById('gs-avg').textContent = classAvg + '%';
+
+    const totalSlots = members.length * assignments.length;
+    const filledSlots = results.length;
+    const completionPct = totalSlots > 0 ? Math.round(filledSlots / totalSlots * 100) : 0;
+    document.getElementById('gs-completion').textContent = completionPct + '%';
+
+    // Assignments table
+    let html = '';
+    if (assignments.length) {
+      html += `<div class="gb-table-wrap"><div class="gb-table-scroll"><table class="gb-table">
+        <thead><tr>
+          <th class="gb-th-student">Ученик</th>
+          ${assignments.map(a => `<th class="gb-th-rotate" title="${esc(a.title)}"><span class="gb-th-text">${esc(a.title)}</span></th>`).join('')}
+          <th class="gb-th-avg">Среднее</th>
+        </tr></thead>
+        <tbody>`;
+
+      members.forEach(m => {
+        const stats = studentStats.find(s => s.userId === m.id);
+        html += `<tr>
+          <td class="gb-td-student">
+            <div class="gb-student-row">
+              <div class="gb-student-avatar">${esc(initials(m.name))}</div>
+              <div>
+                <div class="gb-student-name">${esc(m.name)}</div>
+                <div class="gb-student-email">${esc(m.email)}</div>
+              </div>
+            </div>
+          </td>`;
+        assignments.forEach(a => {
+          const r = rmap[m.id + '_' + a.id];
+          html += `<td>${gradeCell(r ? r.percent : null)}</td>`;
+        });
+        html += `<td class="gb-td-avg">${stats?.avgPct !== null && stats?.avgPct !== undefined ? gradeCell(stats.avgPct) : gradeCell(null)}</td>`;
+        html += `</tr>`;
+      });
+
+      // Footer: averages per assignment
+      html += `</tbody><tfoot><tr><td class="gb-td-student" style="font-weight:800">Среднее по заданию</td>`;
+      assignments.forEach(a => {
+        const aResults = results.filter(r => r.assignment_id === a.id);
+        const avg = aResults.length > 0
+          ? Math.round(aResults.reduce((s, r) => s + r.percent, 0) / aResults.length)
+          : null;
+        html += `<td>${gradeCell(avg)}</td>`;
+      });
+      html += `<td class="gb-td-avg">${gradeCell(classAvg)}</td></tr></tfoot>`;
+      html += `</table></div></div>`;
+    } else {
+      html += `<div style="background:#fff;border:1.5px solid rgba(15,23,42,0.07);border-radius:16px;padding:40px;text-align:center;color:#8898AA;margin-bottom:20px">
+        Нет заданий в этом классе. <a href="/classes" style="color:var(--violet)">Создать задание <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></a>
+      </div>`;
+    }
+
+    // Course progress section
+    if (courses && courses.length) {
+      html += `<div class="gb-section-title"><i data-lucide="brain" style="width:15px;height:15px;opacity:0.5"></i> Прогресс по курсам теории</div>`;
+      html += `<div class="gb-table-wrap"><div class="gb-table-scroll"><table class="gb-table">
+        <thead><tr>
+          <th class="gb-th-student">Ученик</th>
+          ${courses.map(c => `<th class="gb-th-rotate" title="${esc(c.title)}"><span class="gb-th-text">${esc(c.title)}</span></th>`).join('')}
+        </tr></thead><tbody>`;
+
+      const cpMap = {};
+      (courseProgress || []).forEach(p => { cpMap[p.userId + '_' + p.courseId] = p; });
+
+      members.forEach(m => {
+        html += `<tr><td class="gb-td-student"><div class="gb-student-row"><div class="gb-student-avatar">${esc(initials(m.name))}</div><div class="gb-student-name">${esc(m.name)}</div></div></td>`;
+        courses.forEach(c => {
+          const p = cpMap[m.id + '_' + c.id];
+          html += `<td>${p ? gradeCell(p.percent) : gradeCell(null)}</td>`;
+        });
+        html += `</tr>`;
+      });
+      html += `</tbody></table></div></div>`;
+    }
+
+    container.innerHTML = html;
+    lucide.createIcons();
+  }
+
+  /* ── CSV export ── */
+  function exportCsv() {
+    if (!currentClassId) return;
+    const token = localStorage.getItem('ls_token');
+    const url = `/api/classes/${currentClassId}/journal/csv`;
+    // Use fetch with auth header then trigger download
+    fetch(url, { headers: { 'Authorization': 'Bearer ' + token } })
+      .then(r => {
+        if (!r.ok) throw new Error('Export failed');
+        return r.blob();
+      })
+      .then(blob => {
+        const a = document.createElement('a');
+        a.href = URL.createObjectURL(blob);
+        a.download = 'gradebook.csv';
+        a.click();
+        URL.revokeObjectURL(a.href);
+      })
+      .catch(e => LS.toast(e.message || 'Ошибка экспорта', 'error'));
+  }
+
+  loadClasses();
+</script>
+<script src="/js/notifications.js"></script>
+<script src="/js/search.js"></script>
+<script src="/js/mobile.js"></script>
+</body>
+</html>
diff --git a/frontend/hangman.html b/frontend/hangman.html
new file mode 100644
index 0000000..280f918
--- /dev/null
+++ b/frontend/hangman.html
@@ -0,0 +1,878 @@
+<!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" />
+  <style>
+    .sb-content { padding: 0; }
+
+    .hm-wrap {
+      min-height: 100vh;
+      padding: 32px 24px 60px;
+      max-width: 900px; margin: 0 auto; width: 100%;
+    }
+
+    /* ── Header ── */
+    .hm-header { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
+    .hm-icon {
+      width:52px; height:52px; border-radius:14px; flex-shrink:0;
+      background: linear-gradient(135deg,rgba(155,93,229,.25),rgba(249,65,68,.2));
+      border:1.5px solid rgba(255,255,255,.1);
+      display:flex; align-items:center; justify-content:center;
+    }
+    .hm-icon-main { width:26px; height:26px; stroke:#9B5DE5; stroke-width:1.8; fill:none; flex-shrink:0; }
+    .hm-title { font-family:'Unbounded',sans-serif; font-size:1.35rem; font-weight:800; letter-spacing:-.02em; }
+    .hm-sub   { font-size:.82rem; color:var(--text-2); margin-top:2px; }
+    .hm-header-right { margin-left:auto; display:flex; align-items:center; gap:8px; }
+    .hm-icon-btn {
+      width:34px; height:34px; border-radius:9px;
+      border:1.5px solid var(--border-h); background:transparent;
+      display:flex; align-items:center; justify-content:center;
+      cursor:pointer; transition:all .15s; color:var(--text-2); flex-shrink:0;
+    }
+    .hm-icon-btn:hover { border-color:var(--violet); color:var(--violet); }
+    .hm-icon-btn i { width:16px; height:16px; }
+
+    /* ── Stats bar ── */
+    .hm-statsbar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
+    .hm-stat {
+      display:flex; align-items:center; gap:6px;
+      padding:5px 13px; border-radius:99px;
+      background:var(--surface); border:1.5px solid var(--border);
+      font-size:.78rem; font-weight:600; color:var(--text-2); white-space:nowrap;
+    }
+    .hm-stat-val { color:var(--text); font-family:'Unbounded',sans-serif; font-size:.82rem; }
+    .hm-ico { width:14px; height:14px; stroke-width:2; flex-shrink:0; display:block; }
+    .hm-ico-sm { width:13px; height:13px; stroke-width:2; flex-shrink:0; display:block; }
+
+    /* ── Filters ── */
+    .hm-filters { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:20px; }
+    .hm-filter {
+      padding:5px 15px; border-radius:99px;
+      border:1.5px solid var(--border-h); background:var(--surface); color:var(--text-2);
+      font-family:'Manrope',sans-serif; font-size:.8rem; font-weight:700;
+      cursor:pointer; transition:all .15s;
+      display:inline-flex; align-items:center; gap:5px;
+    }
+    .hm-filter:hover { border-color:rgba(155,93,229,.4); color:var(--violet); }
+    .hm-filter.active { background:var(--violet); color:#fff; border-color:var(--violet); }
+
+    /* ── Card ── */
+    .hm-card {
+      width:100%; background:var(--surface);
+      border:1.5px solid var(--border); border-radius:22px;
+      padding:28px; position:relative; overflow:hidden;
+    }
+    /* Rainbow top stripe */
+    .hm-card::before {
+      content:''; position:absolute; top:0; left:0; right:0; height:3px;
+      background:linear-gradient(90deg,#9B5DE5 0%,#F94144 40%,#F9C74F 70%,#06D6A0 100%);
+      border-radius:22px 22px 0 0;
+    }
+    .hm-loading { text-align:center; padding:60px 0; color:var(--text-3); font-size:.88rem; }
+
+    /* ── Confetti ── */
+    #hm-confetti { position:absolute; inset:0; pointer-events:none; z-index:15; border-radius:20px; display:none; }
+
+    /* ── Result overlay ── */
+    .hm-result {
+      position:absolute; inset:0; border-radius:20px;
+      background:rgba(10,10,18,.93); backdrop-filter:blur(12px);
+      display:none; flex-direction:column; align-items:center; justify-content:center;
+      gap:14px; text-align:center; z-index:20; padding:40px;
+    }
+    .hm-result.show { display:flex; animation:resIn .35s cubic-bezier(.16,1,.3,1) both; }
+    @keyframes resIn { from{opacity:0;transform:scale(.95) translateY(10px)} to{opacity:1;transform:scale(1) translateY(0)} }
+    .hm-result-emoji { display:flex; align-items:center; justify-content:center; }
+    .hm-res-icon { width:72px; height:72px; stroke-width:1.4; fill:none; display:none; }
+    .hm-res-icon.visible { display:block; animation:emojiPop .6s cubic-bezier(.34,1.56,.64,1) .1s both; }
+    .hm-res-icon.win-icon  { stroke:#06D6A0; }
+    .hm-res-icon.lose-icon { stroke:#F94144; }
+    @keyframes emojiPop { from{transform:scale(0) rotate(-20deg);opacity:0} to{transform:scale(1) rotate(0);opacity:1} }
+    .hm-result-title { font-family:'Unbounded',sans-serif; font-size:1.35rem; font-weight:800; }
+    .hm-result-title.win  { color:#06D6A0; }
+    .hm-result-title.lose { color:#F94144; }
+    .hm-result-word {
+      font-family:'Unbounded',sans-serif; font-size:1rem; font-weight:700; color:var(--text);
+      background:rgba(255,255,255,.06); padding:8px 22px; border-radius:10px;
+      border:1.5px solid var(--border); letter-spacing:.04em;
+    }
+    .hm-result-msg { font-size:.85rem; color:var(--text-2); line-height:1.5; max-width:280px; }
+    .hm-xp-badge {
+      display:inline-flex; align-items:center; gap:6px;
+      padding:6px 18px; border-radius:99px;
+      background:rgba(155,93,229,.15); border:1.5px solid rgba(155,93,229,.4);
+      font-family:'Unbounded',sans-serif; font-size:.9rem; font-weight:700; color:var(--violet);
+      animation:xpPop .4s cubic-bezier(.34,1.56,.64,1) .6s both;
+    }
+    @keyframes xpPop { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }
+    .hm-btn-next {
+      margin-top:4px; padding:11px 32px; border-radius:12px;
+      background:var(--violet); color:#fff; border:none;
+      font-family:'Manrope',sans-serif; font-size:.9rem; font-weight:700;
+      cursor:pointer; transition:opacity .15s,transform .1s;
+    }
+    .hm-btn-next:hover { opacity:.88; transform:translateY(-1px); }
+
+    /* ── Arena ── */
+    .hm-arena { display:flex; gap:32px; align-items:flex-start; }
+
+    /* ── Left: gallows ── */
+    .hm-left { flex-shrink:0; width:190px; display:flex; flex-direction:column; align-items:center; gap:16px; }
+    .hm-gallows { width:180px; height:195px; display:block; }
+    .gallows-struct { stroke:rgba(255,255,255,.18); stroke-width:2.5; fill:none; stroke-linecap:round; }
+    /* stroke-draw animation instead of opacity */
+    .gallows-part {
+      fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-width:3.5;
+      transition: stroke-dashoffset .45s cubic-bezier(.4,0,.2,1);
+    }
+    #gp-0 { stroke:#F94144; stroke-dasharray:95;  stroke-dashoffset:95;  }   /* head */
+    #gp-1 { stroke:#F94144; stroke-dasharray:50;  stroke-dashoffset:50;  }   /* body */
+    #gp-2 { stroke:#F8961E; stroke-dasharray:32;  stroke-dashoffset:32;  }   /* L arm */
+    #gp-3 { stroke:#F8961E; stroke-dasharray:32;  stroke-dashoffset:32;  }   /* R arm */
+    #gp-4 { stroke:#F9C74F; stroke-dasharray:39;  stroke-dashoffset:39;  }   /* L leg */
+    #gp-5 { stroke:#F9C74F; stroke-dasharray:39;  stroke-dashoffset:39;  }   /* R leg */
+    /* !important needed: ID selectors (#gp-0) have higher specificity than .class.class */
+    .gallows-part.shown { stroke-dashoffset: 0 !important; }
+
+    /* ── Hearts ── */
+    .hm-hearts { display:flex; gap:5px; }
+    .hm-heart { width:24px; height:24px; flex-shrink:0; transition:transform .25s cubic-bezier(.34,1.56,.64,1),opacity .3s; }
+    .hm-heart svg { width:100%; height:100%; display:block; }
+    .hm-heart .heart-fill   { fill:#F94144;   transition:fill .25s; }
+    .hm-heart .heart-stroke { stroke:#F94144; transition:stroke .25s; }
+    .hm-heart.lost { opacity:.22; transform:scale(.72); }
+    .hm-heart.lost .heart-fill   { fill:rgba(255,255,255,.1); }
+    .hm-heart.lost .heart-stroke { stroke:rgba(255,255,255,.25); }
+
+    /* ── Right ── */
+    .hm-right { flex:1; min-width:0; display:flex; flex-direction:column; gap:16px; }
+
+    /* meta row */
+    .hm-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
+    .hm-subj-badge {
+      display:inline-flex; align-items:center; gap:5px;
+      padding:3px 10px; border-radius:8px;
+      background:rgba(155,93,229,.12); border:1.5px solid rgba(155,93,229,.25);
+      font-size:.78rem; font-weight:700; color:var(--violet);
+    }
+    .hm-diff-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:8px; font-size:.75rem; font-weight:700; }
+    .hm-diff-badge.easy { background:rgba(6,214,160,.1);  color:#06D6A0; border:1.5px solid rgba(6,214,160,.25); }
+    .hm-diff-badge.med  { background:rgba(249,168,37,.1); color:#F9A825; border:1.5px solid rgba(249,168,37,.25); }
+    .hm-diff-badge.hard { background:rgba(249,65,68,.1);  color:#F94144; border:1.5px solid rgba(249,65,68,.25); }
+    .hm-len { font-size:.78rem; color:var(--text-3); font-weight:600; margin-left:auto; }
+
+    /* ── Word ── */
+    .hm-word { display:flex; gap:7px; flex-wrap:wrap; }
+    .hm-word.shake { animation:wordShake .45s ease; }
+    @keyframes wordShake {
+      0%,100% { transform:translateX(0); }
+      15%  { transform:translateX(-9px); }
+      30%  { transform:translateX(9px); }
+      50%  { transform:translateX(-5px); }
+      70%  { transform:translateX(5px); }
+      85%  { transform:translateX(-2px); }
+    }
+    .hm-letter { display:flex; flex-direction:column; align-items:center; gap:4px; }
+    .hm-letter-char {
+      font-family:'Unbounded',sans-serif; font-size:1.15rem; font-weight:800;
+      min-width:28px; text-align:center; min-height:24px; line-height:1.1;
+    }
+    .hm-letter-char.reveal    { animation:popIn .3s cubic-bezier(.34,1.56,.64,1) both; }
+    .hm-letter-char.win-letter { animation:winBounce .5s cubic-bezier(.34,1.56,.64,1) both; color:#06D6A0; }
+    @keyframes popIn     { 0%{transform:scale(0) translateY(6px);opacity:0} 100%{transform:scale(1) translateY(0);opacity:1} }
+    @keyframes winBounce { 0%{transform:scale(1)} 40%{transform:scale(1.4) translateY(-8px)} 70%{transform:scale(.9)} 100%{transform:scale(1) translateY(0)} }
+    .hm-letter-line { min-width:28px; height:2px; background:var(--border-h); border-radius:2px; }
+    .hm-letter.space { width:12px; }
+    .hm-letter.space .hm-letter-line { opacity:0; }
+    .hm-letter.dash .hm-letter-char { color:var(--text-3); }
+
+    /* ── Progress bar ── */
+    .hm-progress { display:flex; align-items:center; gap:10px; }
+    .hm-prog-bar { flex:1; height:4px; background:rgba(255,255,255,.07); border-radius:2px; overflow:hidden; }
+    .hm-prog-fill { height:100%; border-radius:2px; width:0%; transition:width .35s cubic-bezier(.4,0,.2,1); background:linear-gradient(90deg,#9B5DE5,#06D6A0); }
+    .hm-prog-txt { font-size:.72rem; color:var(--text-3); font-weight:700; white-space:nowrap; font-family:'Unbounded',sans-serif; }
+
+    /* ── Actions ── */
+    .hm-actions { display:flex; gap:8px; align-items:center; }
+    .hm-hint-btn {
+      padding:6px 14px; border-radius:9px;
+      border:1.5px solid rgba(249,168,37,.4); background:rgba(249,168,37,.08); color:#F9A825;
+      font-family:'Manrope',sans-serif; font-size:.8rem; font-weight:700;
+      cursor:pointer; transition:all .15s; display:flex; align-items:center; gap:5px;
+    }
+    .hm-hint-btn:hover:not(:disabled) { background:rgba(249,168,37,.18); }
+    .hm-hint-btn:disabled { opacity:.3; cursor:default; }
+    .hm-skip-btn {
+      padding:6px 14px; border-radius:9px;
+      border:1.5px solid var(--border-h); background:transparent; color:var(--text-3);
+      font-family:'Manrope',sans-serif; font-size:.8rem; font-weight:700;
+      cursor:pointer; transition:all .15s; margin-left:auto;
+      display:inline-flex; align-items:center; gap:5px;
+    }
+    .hm-skip-btn:hover { border-color:var(--border); color:var(--text-2); }
+
+    /* ── Keyboard ── */
+    .hm-keyboard { display:flex; flex-direction:column; gap:5px; }
+    .hm-kb-row { display:flex; gap:4px; justify-content:center; }
+    .hm-key {
+      width:34px; height:40px; border-radius:8px;
+      border:1.5px solid var(--border-h); background:var(--bg);
+      color:var(--text); font-family:'Manrope',sans-serif; font-size:.85rem; font-weight:700;
+      cursor:pointer; transition:background .1s, border-color .1s, color .1s, box-shadow .1s;
+      display:flex; align-items:center; justify-content:center; flex-shrink:0; user-select:none;
+    }
+    .hm-key:hover:not(:disabled) {
+      border-color:var(--violet); color:var(--violet);
+      background:rgba(155,93,229,.08); transform:translateY(-2px);
+      box-shadow:0 4px 12px rgba(155,93,229,.2);
+    }
+    .hm-key:active:not(:disabled) { transform:scale(.9); }
+    .hm-key:disabled { cursor:default; }
+    .hm-key.wrong { background:rgba(249,65,68,.1); border-color:rgba(249,65,68,.35); color:#F94144; animation:keyWrong .35s ease; }
+    .hm-key.right { background:rgba(6,214,160,.12); border-color:rgba(6,214,160,.45); color:#06D6A0; animation:keyRight .3s cubic-bezier(.34,1.56,.64,1); }
+    @keyframes keyWrong { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
+    @keyframes keyRight { 0%{transform:scale(1.3)} 100%{transform:scale(1)} }
+
+    /* ── Toast ── */
+    #hm-toast {
+      position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(90px);
+      background:linear-gradient(135deg,#9B5DE5,#F94144);
+      color:#fff; padding:10px 24px; border-radius:99px;
+      font-family:'Manrope',sans-serif; font-size:.85rem; font-weight:700;
+      transition:transform .35s cubic-bezier(.16,1,.3,1);
+      z-index:1000; white-space:nowrap; pointer-events:none;
+      box-shadow:0 8px 32px rgba(155,93,229,.5);
+      display:flex; align-items:center; gap:8px;
+    }
+    #hm-toast.show { transform:translateX(-50%) translateY(0); }
+    #hm-toast i { width:16px; height:16px; flex-shrink:0; }
+
+    /* ── Mobile ── */
+    @media (max-width:640px) {
+      .hm-arena { flex-direction:column; gap:16px; }
+      .hm-left { width:100%; flex-direction:row; justify-content:space-around; align-items:center; }
+      .hm-gallows { width:130px; height:145px; }
+      .hm-key { width:30px; height:36px; font-size:.78rem; border-radius:6px; }
+    }
+  </style>
+  <script src="https://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+</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="sbl-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="sbl-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>
+      <span class="sb-link active"><i data-lucide="gamepad-2" class="sb-icon"></i><span class="sb-lbl">Виселица</span></span>
+      <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>
+      <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="sbl-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>
+    </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>
+          <span class="sb-logout" style="pointer-events:none">Мой профиль</span>
+        </div>
+      </a>
+    </div>
+  </aside>
+
+  <div class="sb-content">
+    <div class="hm-wrap">
+
+      <div class="hm-header">
+        <div class="hm-icon"><i data-lucide="target" class="hm-icon-main"></i></div>
+        <div>
+          <div class="hm-title">Виселица</div>
+          <div class="hm-sub">Угадай термин из учебной программы по буквам</div>
+        </div>
+        <div class="hm-header-right">
+          <button class="hm-icon-btn" id="hm-sound-btn" onclick="toggleSound()" title="Звук">
+            <i data-lucide="volume-2" style="width:16px;height:16px"></i>
+          </button>
+        </div>
+      </div>
+
+      <div class="hm-statsbar">
+        <div class="hm-stat"><i data-lucide="flame"        class="hm-ico" style="stroke:#F8961E"></i>Серия: <span class="hm-stat-val" id="stat-streak">0</span></div>
+        <div class="hm-stat"><i data-lucide="circle-check" class="hm-ico" style="stroke:#06D6A0"></i>Победы: <span class="hm-stat-val" id="stat-wins">0</span></div>
+        <div class="hm-stat"><i data-lucide="circle-x"     class="hm-ico" style="stroke:#F94144"></i>Поражений: <span class="hm-stat-val" id="stat-losses">0</span></div>
+        <div class="hm-stat"><i data-lucide="trophy"       class="hm-ico" style="stroke:#F9C74F"></i>Рекорд: <span class="hm-stat-val" id="stat-best">0</span></div>
+        <div class="hm-stat"><i data-lucide="zap"          class="hm-ico" style="stroke:#9B5DE5"></i>XP: <span class="hm-stat-val" id="stat-xp">0</span></div>
+      </div>
+
+      <div class="hm-filters" id="hm-filters">
+        <button class="hm-filter active" data-slug=""><i data-lucide="layers"        class="hm-ico-sm"></i>Все предметы</button>
+        <button class="hm-filter" data-slug="bio"> <i data-lucide="dna"           class="hm-ico-sm"></i>Биология</button>
+        <button class="hm-filter" data-slug="chem"><i data-lucide="flask-conical" class="hm-ico-sm"></i>Химия</button>
+        <button class="hm-filter" data-slug="math"><i data-lucide="calculator"    class="hm-ico-sm"></i>Математика</button>
+        <button class="hm-filter" data-slug="phys"><i data-lucide="zap"           class="hm-ico-sm"></i>Физика</button>
+      </div>
+
+      <div class="hm-card" id="hm-card">
+        <div class="hm-loading" id="hm-loading">Загрузка…</div>
+
+        <canvas id="hm-confetti"></canvas>
+
+        <div class="hm-result" id="hm-result">
+          <div class="hm-result-emoji">
+            <i data-lucide="trophy" class="hm-res-icon win-icon"  id="res-win"></i>
+            <i data-lucide="frown"  class="hm-res-icon lose-icon" id="res-lose"></i>
+          </div>
+          <div class="hm-result-title" id="hm-result-title">Победа!</div>
+          <div class="hm-result-word"  id="hm-result-word"></div>
+          <div class="hm-result-msg"   id="hm-result-msg"></div>
+          <div class="hm-xp-badge" id="hm-xp-badge" style="display:none">
+            <i data-lucide="zap" class="hm-ico"></i><span id="hm-xp-txt">+0 XP</span>
+          </div>
+          <button class="hm-btn-next" onclick="loadWord()">Следующее слово <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></button>
+        </div>
+
+        <div id="hm-game" style="display:none">
+          <div class="hm-arena">
+
+            <div class="hm-left">
+              <svg class="hm-gallows" viewBox="0 0 180 200" xmlns="http://www.w3.org/2000/svg">
+                <line x1="20"  y1="190" x2="160" y2="190" class="gallows-struct"/>
+                <line x1="60"  y1="190" x2="60"  y2="20"  class="gallows-struct"/>
+                <line x1="60"  y1="20"  x2="120" y2="20"  class="gallows-struct"/>
+                <line x1="120" y1="20"  x2="120" y2="50"  class="gallows-struct"/>
+                <circle cx="120" cy="52" r="3" fill="rgba(255,255,255,.2)"/>
+                <circle cx="120" cy="67" r="15" class="gallows-part" id="gp-0"/>
+                <line x1="120" y1="82"  x2="120" y2="132" class="gallows-part" id="gp-1"/>
+                <line x1="120" y1="97"  x2="95"  y2="117" class="gallows-part" id="gp-2"/>
+                <line x1="120" y1="97"  x2="145" y2="117" class="gallows-part" id="gp-3"/>
+                <line x1="120" y1="132" x2="95"  y2="162" class="gallows-part" id="gp-4"/>
+                <line x1="120" y1="132" x2="145" y2="162" class="gallows-part" id="gp-5"/>
+              </svg>
+              <div class="hm-hearts" id="hm-hearts"></div>
+            </div>
+
+            <div class="hm-right">
+              <div class="hm-meta">
+                <span class="hm-subj-badge" id="hm-subj-badge">—</span>
+                <span class="hm-diff-badge" id="hm-diff-badge">—</span>
+                <span class="hm-len" id="hm-len">— букв</span>
+              </div>
+
+              <div class="hm-word" id="hm-word"></div>
+
+              <div class="hm-progress">
+                <div class="hm-prog-bar"><div class="hm-prog-fill" id="hm-prog-fill"></div></div>
+                <span class="hm-prog-txt" id="hm-prog-txt">0 / 0</span>
+              </div>
+
+              <div class="hm-actions">
+                <button class="hm-hint-btn" id="hm-hint-btn" onclick="useHint()">
+                  <i data-lucide="lightbulb" class="hm-ico"></i><span id="hm-hint-txt">Подсказка</span>
+                </button>
+                <button class="hm-skip-btn" onclick="loadWord()">
+                  <i data-lucide="skip-forward" class="hm-ico"></i>Пропустить
+                </button>
+              </div>
+
+              <div class="hm-keyboard" id="hm-keyboard"></div>
+            </div>
+
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</div>
+
+<!-- Toast -->
+<div id="hm-toast"><i data-lucide="award" style="width:16px;height:16px"></i><span id="hm-toast-txt"></span></div>
+
+<script src="/js/api.js"></script>
+<script src="/js/notifications.js"></script>
+<script src="/js/search.js"></script>
+<script src="/js/mobile.js"></script>
+<script>
+/* ── Keyboard rows ─────────────────────────────────────────────────────── */
+const KB_ROWS = [
+  'ЙЦУКЕНГШЩЗХЪЁ',
+  'ФЫВАПРОЛДЖЭ',
+  'ЯЧСМИТЬБЮ',
+];
+
+/* ── Game state ────────────────────────────────────────────────────────── */
+let _word        = '';
+let _guessed     = new Set();
+let _errors      = 0;
+let _finished    = false;
+let _hintUsed    = false;
+let _curSlug     = '';
+let _confettiRaf = null;
+
+/* ── Session stats ─────────────────────────────────────────────────────── */
+const _s = { wins:0, losses:0, streak:0, xp:0 };
+let _bestStreak  = parseInt(localStorage.getItem('hm_best_streak') || '0');
+let _soundOn     = localStorage.getItem('hm_sound') !== '0';
+
+function updateStatsBar() {
+  document.getElementById('stat-streak').textContent = _s.streak;
+  document.getElementById('stat-wins').textContent   = _s.wins;
+  document.getElementById('stat-losses').textContent = _s.losses;
+  document.getElementById('stat-xp').textContent     = _s.xp;
+  document.getElementById('stat-best').textContent   = _bestStreak;
+}
+
+/* ── Audio ─────────────────────────────────────────────────────────────── */
+let _ac = null;
+function _getAC() {
+  if (!_ac) _ac = new (window.AudioContext || window.webkitAudioContext)();
+  return _ac;
+}
+function _tone(freq, dur, type = 'sine', vol = .22) {
+  if (!_soundOn) return;
+  try {
+    const ac = _getAC();
+    if (ac.state === 'suspended') ac.resume();
+    const osc  = ac.createOscillator();
+    const gain = ac.createGain();
+    osc.connect(gain); gain.connect(ac.destination);
+    osc.type = type; osc.frequency.value = freq;
+    gain.gain.setValueAtTime(vol, ac.currentTime);
+    gain.gain.exponentialRampToValueAtTime(.001, ac.currentTime + dur);
+    osc.start(); osc.stop(ac.currentTime + dur);
+  } catch {}
+}
+function sndCorrect() { _tone(660,.1); setTimeout(()=>_tone(880,.1),90); }
+function sndWrong()   { _tone(180,.25,'sawtooth',.18); }
+function sndWin()     { [523,659,784,1047].forEach((f,i)=>setTimeout(()=>_tone(f,.2),i*95)); }
+function sndLose()    { _tone(200,.3,'sawtooth'); setTimeout(()=>_tone(140,.5,'sawtooth'),200); }
+
+function toggleSound() {
+  _soundOn = !_soundOn;
+  localStorage.setItem('hm_sound', _soundOn ? '1' : '0');
+  const btn = document.getElementById('hm-sound-btn');
+  btn.innerHTML = `<i data-lucide="${_soundOn ? 'volume-2' : 'volume-x'}" style="width:16px;height:16px"></i>`;
+  lucide.createIcons();
+  if (_soundOn) sndCorrect();
+}
+
+/* ── Toast ─────────────────────────────────────────────────────────────── */
+let _toastTimer = null;
+function showToast(msg) {
+  document.getElementById('hm-toast-txt').textContent = msg;
+  const t = document.getElementById('hm-toast');
+  t.classList.add('show');
+  clearTimeout(_toastTimer);
+  _toastTimer = setTimeout(() => t.classList.remove('show'), 2800);
+}
+
+/* ── Init ──────────────────────────────────────────────────────────────── */
+(async () => {
+  if (!LS.requireAuth()) return;
+  const user = LS.getUser();
+  LS.initPage();
+
+  // sbl-classes — только для учителей/админов
+  if (user.role !== 'student') {
+    const el = document.getElementById('sbl-classes');
+    if (el) el.style.display = '';
+  }
+  if (user.role === 'admin') {
+    const a = document.getElementById('sbl-admin');
+    if (a) a.style.display = '';
+  }
+  LS.showBoardIfAllowed();
+
+  LS.notif.init();
+  lucide.createIcons();
+
+  // Feature gate
+  const feats = await LS.loadFeatures();
+  if (feats.hangman === false) {
+    document.querySelector('.hm-wrap').innerHTML =
+      '<div style="color:var(--text-2);text-align:center;padding:80px 20px;font-size:1rem">Виселица отключена администратором.</div>';
+    LS.hideDisabledFeatures();
+    return;
+  }
+  LS.hideDisabledFeatures();
+
+  // Apply stored sound state
+  if (!_soundOn) {
+    const btn = document.getElementById('hm-sound-btn');
+    btn.innerHTML = `<i data-lucide="volume-x" style="width:16px;height:16px"></i>`;
+    lucide.createIcons();
+  }
+
+  updateStatsBar();
+  buildKeyboard();
+  initFilters();
+  await loadWord();
+})();
+
+/* ── Filters ───────────────────────────────────────────────────────────── */
+function initFilters() {
+  document.getElementById('hm-filters').addEventListener('click', e => {
+    const btn = e.target.closest('.hm-filter');
+    if (!btn) return;
+    document.querySelectorAll('.hm-filter').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    _curSlug = btn.dataset.slug || '';
+    loadWord();
+  });
+}
+
+/* ── Load word ─────────────────────────────────────────────────────────── */
+async function loadWord() {
+  document.getElementById('hm-result').classList.remove('show');
+  document.getElementById('hm-loading').style.display = '';
+  document.getElementById('hm-game').style.display    = 'none';
+  stopConfetti();
+
+  const qs   = _curSlug ? `?subject_slug=${_curSlug}` : '';
+  const data = await LS.api(`/api/games/hangman/word${qs}`).catch(() => null);
+  if (!data || data.error) {
+    document.getElementById('hm-loading').textContent = data?.error === 'No topics found'
+      ? 'Нет слов для этого предмета — попробуй другой.'
+      : 'Ошибка загрузки. Попробуй позже.';
+    return;
+  }
+
+  _word     = data.word.toUpperCase();
+  _guessed  = new Set();
+  _errors   = 0;
+  _finished = false;
+  _hintUsed = false;
+
+  const letterCount = Array.from(_word).filter(c => /[А-ЯЁA-Z]/.test(c)).length;
+
+  // Difficulty
+  const diffEl = document.getElementById('hm-diff-badge');
+  if (letterCount <= 4) {
+    diffEl.innerHTML = '<i data-lucide="star" class="hm-ico-sm"></i>Лёгкое';
+    diffEl.className = 'hm-diff-badge easy';
+  } else if (letterCount <= 8) {
+    diffEl.innerHTML = '<i data-lucide="star" class="hm-ico-sm"></i>Среднее';
+    diffEl.className = 'hm-diff-badge med';
+  } else {
+    diffEl.innerHTML = '<i data-lucide="star" class="hm-ico-sm"></i>Сложное';
+    diffEl.className = 'hm-diff-badge hard';
+  }
+  lucide.createIcons();
+
+  document.getElementById('hm-subj-badge').textContent = data.hint;
+  document.getElementById('hm-len').textContent = `${letterCount} букв`;
+
+  // Reset gallows (stroke-dashoffset back to full = hidden)
+  for (let i = 0; i < 6; i++) document.getElementById(`gp-${i}`).classList.remove('shown');
+
+  buildHearts();
+
+  // Reset hint
+  document.getElementById('hm-hint-btn').disabled = false;
+  document.getElementById('hm-hint-txt').textContent = 'Подсказка';
+
+  buildWordDisplay();
+  resetKeyboard();
+  updateProgress();
+
+  document.getElementById('hm-loading').style.display = 'none';
+  document.getElementById('hm-game').style.display    = 'flex';
+}
+
+/* ── Hearts ────────────────────────────────────────────────────────────── */
+const HEART_SVG = `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path class="heart-fill heart-stroke" stroke-width="1.5" stroke-linejoin="round"
+    d="M12 21C12 21 3 14.5 3 8.5C3 6 5 4 7.5 4C9.24 4 10.91 5.01 12 6.5C13.09 5.01 14.76 4 16.5 4C19 4 21 6 21 8.5C21 14.5 12 21 12 21Z"/>
+</svg>`;
+
+function buildHearts() {
+  const c = document.getElementById('hm-hearts');
+  c.innerHTML = '';
+  for (let i = 0; i < 6; i++) {
+    const s = document.createElement('span');
+    s.className = 'hm-heart'; s.id = `heart-${i}`; s.innerHTML = HEART_SVG;
+    c.appendChild(s);
+  }
+}
+function loseHeart(i) {
+  const el = document.getElementById(`heart-${i}`);
+  if (el) el.classList.add('lost');
+}
+
+/* ── Word display ──────────────────────────────────────────────────────── */
+function buildWordDisplay() {
+  const container = document.getElementById('hm-word');
+  container.innerHTML = '';
+  for (const ch of _word) {
+    const cell = document.createElement('div');
+    if (ch === ' ') {
+      cell.className = 'hm-letter space';
+      cell.appendChild(Object.assign(document.createElement('div'), {className:'hm-letter-line'}));
+    } else if (!/[А-ЯЁA-Z]/.test(ch)) {
+      cell.className = 'hm-letter dash';
+      const cd = document.createElement('div'); cd.className = 'hm-letter-char'; cd.textContent = ch;
+      const ln = document.createElement('div'); ln.className = 'hm-letter-line';
+      cell.appendChild(cd); cell.appendChild(ln);
+      _guessed.add(ch);
+    } else {
+      cell.className = 'hm-letter';
+      const cd = document.createElement('div'); cd.className = 'hm-letter-char';
+      const ln = document.createElement('div'); ln.className = 'hm-letter-line';
+      cell.appendChild(cd); cell.appendChild(ln);
+    }
+    container.appendChild(cell);
+  }
+  refreshWordDisplay();
+}
+
+function refreshWordDisplay() {
+  const cells = document.getElementById('hm-word').children;
+  let i = 0;
+  for (const ch of _word) {
+    const cell = cells[i++];
+    if (ch === ' ' || !/[А-ЯЁA-Z]/.test(ch)) continue;
+    const cd = cell.querySelector('.hm-letter-char');
+    if (_guessed.has(ch)) {
+      if (!cd.textContent) {
+        cd.textContent = ch;
+        cd.classList.add('reveal');
+        setTimeout(() => cd.classList.remove('reveal'), 400);
+      }
+    } else {
+      cd.textContent = '';
+    }
+  }
+  updateProgress();
+}
+
+/* ── Progress bar ──────────────────────────────────────────────────────── */
+function updateProgress() {
+  const letters  = Array.from(_word).filter(c => /[А-ЯЁA-Z]/.test(c));
+  const revealed = letters.filter(c => _guessed.has(c)).length;
+  const total    = letters.length;
+  const pct      = total > 0 ? Math.round(revealed / total * 100) : 0;
+  document.getElementById('hm-prog-fill').style.width = pct + '%';
+  document.getElementById('hm-prog-txt').textContent  = `${revealed} / ${total}`;
+}
+
+/* ── Keyboard ──────────────────────────────────────────────────────────── */
+function buildKeyboard() {
+  const kb = document.getElementById('hm-keyboard');
+  KB_ROWS.forEach(row => {
+    const div = document.createElement('div');
+    div.className = 'hm-kb-row';
+    for (const ch of row) {
+      const btn = document.createElement('button');
+      btn.className = 'hm-key'; btn.textContent = ch; btn.dataset.letter = ch;
+      btn.onclick = () => guess(ch);
+      div.appendChild(btn);
+    }
+    kb.appendChild(div);
+  });
+}
+function resetKeyboard() {
+  document.querySelectorAll('.hm-key').forEach(btn => { btn.disabled = false; btn.className = 'hm-key'; });
+}
+
+/* ── Hint ──────────────────────────────────────────────────────────────── */
+function useHint() {
+  if (_hintUsed || _finished) return;
+  const missing = [...new Set(Array.from(_word).filter(c => /[А-ЯЁA-Z]/.test(c) && !_guessed.has(c)))];
+  if (!missing.length) return;
+  _hintUsed = true;
+  document.getElementById('hm-hint-btn').disabled = true;
+  document.getElementById('hm-hint-txt').textContent = 'Использована';
+  guess(missing[Math.floor(Math.random() * missing.length)]);
+}
+
+/* ── Guess ─────────────────────────────────────────────────────────────── */
+function guess(letter) {
+  if (_finished || _guessed.has(letter)) return;
+  _guessed.add(letter);
+
+  const btn = document.querySelector(`.hm-key[data-letter="${letter}"]`);
+
+  if (_word.includes(letter)) {
+    if (btn) { btn.classList.add('right'); btn.disabled = true; }
+    refreshWordDisplay();
+    sndCorrect();
+
+    const letters = Array.from(_word).filter(c => /[А-ЯЁA-Z]/.test(c));
+    if (letters.every(c => _guessed.has(c))) endGame(true);
+  } else {
+    if (btn) { btn.classList.add('wrong'); btn.disabled = true; }
+    loseHeart(_errors);
+    _errors++;
+    document.getElementById(`gp-${_errors - 1}`).classList.add('shown');
+    shakeWord();
+    sndWrong();
+    if (_errors >= 6) endGame(false);
+  }
+}
+
+/* ── Word shake ────────────────────────────────────────────────────────── */
+function shakeWord() {
+  const el = document.getElementById('hm-word');
+  el.classList.remove('shake');
+  requestAnimationFrame(() => requestAnimationFrame(() => el.classList.add('shake')));
+  setTimeout(() => el.classList.remove('shake'), 500);
+}
+
+/* ── Win cascade ───────────────────────────────────────────────────────── */
+function winCascade() {
+  const cells = document.getElementById('hm-word').children;
+  let delay = 0;
+  for (let i = 0; i < cells.length; i++) {
+    const cd = cells[i].querySelector('.hm-letter-char');
+    if (cd?.textContent) {
+      const d = delay;
+      setTimeout(() => cd.classList.add('win-letter'), d);
+      delay += 55;
+    }
+  }
+}
+
+/* ── End game ──────────────────────────────────────────────────────────── */
+async function endGame(won) {
+  _finished = true;
+  document.querySelectorAll('.hm-key').forEach(b => b.disabled = true);
+  document.getElementById('hm-hint-btn').disabled = true;
+
+  if (!won) {
+    for (const ch of _word) { if (/[А-ЯЁA-Z]/.test(ch)) _guessed.add(ch); }
+    refreshWordDisplay();
+    sndLose();
+  } else {
+    sndWin();
+    winCascade();
+  }
+
+  // Stats
+  if (won) {
+    _s.wins++; _s.streak++;
+    if (_s.streak > _bestStreak) {
+      _bestStreak = _s.streak;
+      localStorage.setItem('hm_best_streak', _bestStreak);
+      if (_bestStreak > 1) showToast(`Новый рекорд! Серия: ${_bestStreak}`);
+    }
+  } else {
+    _s.losses++; _s.streak = 0;
+  }
+  updateStatsBar();
+
+  // Result overlay
+  document.getElementById('res-win').classList.toggle('visible', won);
+  document.getElementById('res-lose').classList.toggle('visible', !won);
+  const titleEl = document.getElementById('hm-result-title');
+  titleEl.textContent = won ? 'Победа!' : 'Проигрыш';
+  titleEl.className   = 'hm-result-title ' + (won ? 'win' : 'lose');
+  document.getElementById('hm-result-word').textContent = _word;
+  document.getElementById('hm-result-msg').textContent  = won
+    ? `Угадано за ${_errors} ${_errors===1?'ошибку':_errors<5?'ошибки':'ошибок'}. Серия побед: ${_s.streak}`
+    : 'Правильный ответ выше. Не сдавайся!';
+
+  const xpBadge = document.getElementById('hm-xp-badge');
+  if (won) {
+    const resp = await LS.api('/api/games/hangman/complete', {
+      method:'POST', body:JSON.stringify({ won:true, errors:_errors })
+    }).catch(() => null);
+    const xp = resp?.xp || 0;
+    if (xp > 0) {
+      _s.xp += xp; updateStatsBar();
+      document.getElementById('hm-xp-txt').textContent = `+${xp} XP`;
+      xpBadge.style.display = '';
+    } else { xpBadge.style.display = 'none'; }
+  } else {
+    xpBadge.style.display = 'none';
+    LS.api('/api/games/hangman/complete', {
+      method:'POST', body:JSON.stringify({ won:false, errors:_errors })
+    }).catch(() => null);
+  }
+
+  document.getElementById('hm-result').classList.add('show');
+  if (won) launchConfetti();
+}
+
+/* ── Confetti ──────────────────────────────────────────────────────────── */
+const COLORS = ['#9B5DE5','#F94144','#06D6A0','#F9C74F','#F8961E','#4CC9F0','#FF6B9D'];
+
+function launchConfetti() {
+  const card = document.getElementById('hm-card');
+  const cvs  = document.getElementById('hm-confetti');
+  const W = card.offsetWidth, H = card.offsetHeight;
+  cvs.width = W; cvs.height = H; cvs.style.display = 'block';
+  const ctx = cvs.getContext('2d');
+  const p = Array.from({length:90}, () => ({
+    x:  W*(.2+Math.random()*.6),
+    y:  H*.3+Math.random()*H*.1,
+    vx: (Math.random()-.5)*6,
+    vy: -5-Math.random()*5,
+    sz: 5+Math.random()*7,
+    color: COLORS[Math.floor(Math.random()*COLORS.length)],
+    rot: Math.random()*Math.PI*2, vr:(Math.random()-.5)*.2,
+    shape: Math.random()>.5?'rect':'circle',
+  }));
+  const t0 = performance.now();
+  function draw(now) {
+    const t = (now-t0)/1000;
+    if (t > 3.5) { stopConfetti(); return; }
+    ctx.clearRect(0,0,W,H);
+    for (const q of p) {
+      q.x+=q.vx; q.vy+=.15; q.y+=q.vy; q.rot+=q.vr;
+      ctx.globalAlpha = Math.max(0, 1-t/3);
+      ctx.fillStyle = q.color;
+      ctx.save(); ctx.translate(q.x,q.y); ctx.rotate(q.rot);
+      if (q.shape==='rect') ctx.fillRect(-q.sz/2,-q.sz/4,q.sz,q.sz/2);
+      else { ctx.beginPath(); ctx.arc(0,0,q.sz/2,0,Math.PI*2); ctx.fill(); }
+      ctx.restore();
+    }
+    _confettiRaf = requestAnimationFrame(draw);
+  }
+  _confettiRaf = requestAnimationFrame(draw);
+}
+function stopConfetti() {
+  if (_confettiRaf) { cancelAnimationFrame(_confettiRaf); _confettiRaf = null; }
+  const cvs = document.getElementById('hm-confetti');
+  if (cvs) { cvs.style.display='none'; cvs.getContext('2d').clearRect(0,0,cvs.width,cvs.height); }
+}
+
+/* ── Physical keyboard ─────────────────────────────────────────────────── */
+document.addEventListener('keydown', e => {
+  if (e.ctrlKey || e.metaKey || e.altKey) return;
+  const ch = e.key.toUpperCase();
+  if (/^[А-ЯЁ]$/.test(ch) && !_finished) guess(ch);
+});
+</script>
+</body>
+</html>
diff --git a/frontend/homework.html b/frontend/homework.html
new file mode 100644
index 0000000..a027e95
--- /dev/null
+++ b/frontend/homework.html
@@ -0,0 +1,593 @@
+<!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://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+  <style>
+    .sb-content { background: #f4f5f8; }
+    .container { max-width: 960px; margin: 0 auto; padding: 28px 32px 100px; }
+    .page-title {
+      font-family: 'Unbounded', sans-serif; font-size: 1.1rem; font-weight: 800;
+      color: #0F172A; margin-bottom: 6px;
+    }
+    .page-sub { font-size: 0.82rem; color: #8898AA; margin-bottom: 24px; }
+
+    /* ── top bar with class selector ── */
+    .hw-top { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; flex-wrap: wrap; }
+    .hw-class-sel {
+      padding: 8px 14px; border-radius: 12px; border: 1.5px solid rgba(15,23,42,0.12);
+      background: #fff; font-family: 'Manrope', sans-serif; font-size: 0.82rem;
+      font-weight: 600; color: #0F172A; cursor: pointer; min-width: 180px;
+    }
+    .hw-status-filters { display: flex; gap: 4px; flex-wrap: wrap; }
+    .hw-sf-btn {
+      padding: 6px 14px; border-radius: 999px; border: 1.5px solid rgba(15,23,42,0.1);
+      background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.75rem;
+      font-weight: 600; color: #8898AA; cursor: pointer; transition: all .15s;
+    }
+    .hw-sf-btn:hover { border-color: var(--violet); color: var(--violet); }
+    .hw-sf-btn.active { background: rgba(155,93,229,0.08); border-color: var(--violet); color: var(--violet); }
+
+    /* ── submission cards ── */
+    .hw-list { display: flex; flex-direction: column; gap: 10px; }
+    .hw-card {
+      background: #fff; border-radius: 16px; padding: 18px 20px;
+      border: 1px solid rgba(15,23,42,0.06);
+      display: flex; align-items: flex-start; gap: 14px;
+      transition: all .15s;
+    }
+    .hw-card:hover { border-color: rgba(155,93,229,0.15); box-shadow: 0 2px 12px rgba(15,23,42,0.05); }
+    .hw-card-icon {
+      width: 42px; height: 42px; border-radius: 12px; display: flex;
+      align-items: center; justify-content: center; flex-shrink: 0;
+    }
+    .hw-card-body { flex: 1; min-width: 0; }
+    .hw-card-title { font-size: 0.88rem; font-weight: 700; color: #0F172A; margin-bottom: 4px; }
+    .hw-card-meta { font-size: 0.75rem; color: #8898AA; display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
+    .hw-card-note { font-size: 0.78rem; color: #3D4F6B; background: rgba(15,23,42,0.03); padding: 8px 12px; border-radius: 10px; margin-top: 8px; line-height: 1.5; }
+    .hw-card-note strong { color: #0F172A; }
+    .hw-card-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
+    .hw-card-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
+
+    /* status badges */
+    .hw-badge {
+      padding: 4px 10px; border-radius: 999px; font-size: 0.68rem; font-weight: 700;
+      text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap;
+    }
+    .hw-badge-new        { background: rgba(6,214,224,0.12); color: #06B6D4; }
+    .hw-badge-reviewed   { background: rgba(155,93,229,0.12); color: #9B5DE5; }
+    .hw-badge-revision   { background: rgba(245,158,11,0.12); color: #F59E0B; }
+    .hw-badge-resubmitted{ background: rgba(6,214,100,0.12); color: #06D664; }
+    .hw-badge-accepted   { background: rgba(16,185,129,0.12); color: #10B981; }
+
+    .hw-grade {
+      font-family: 'Unbounded', sans-serif; font-size: 1rem; font-weight: 800;
+      padding: 4px 10px; border-radius: 10px; min-width: 50px; text-align: center;
+    }
+    .hw-grade-high { background: rgba(16,185,129,0.1); color: #10B981; }
+    .hw-grade-mid  { background: rgba(245,158,11,0.1); color: #F59E0B; }
+    .hw-grade-low  { background: rgba(239,71,111,0.1); color: #EF476F; }
+
+    /* action buttons */
+    .hw-btn {
+      padding: 6px 14px; border-radius: 10px; border: 1.5px solid rgba(15,23,42,0.12);
+      background: #fff; font-family: 'Manrope', sans-serif; font-size: 0.75rem;
+      font-weight: 600; color: #3D4F6B; cursor: pointer; transition: all .15s;
+      display: flex; align-items: center; gap: 5px;
+    }
+    .hw-btn:hover { border-color: var(--violet); color: var(--violet); }
+    .hw-btn-primary { background: var(--grad-1); color: #fff; border-color: transparent; }
+    .hw-btn-primary:hover { opacity: .88; color: #fff; }
+    .hw-btn-danger { border-color: rgba(239,71,111,0.2); color: #EF476F; }
+    .hw-btn-danger:hover { background: rgba(239,71,111,0.06); }
+    .hw-btn-accept { border-color: rgba(16,185,129,0.3); color: #10B981; }
+    .hw-btn-accept:hover { background: rgba(16,185,129,0.06); }
+    .hw-btn-revision { border-color: rgba(245,158,11,0.3); color: #F59E0B; }
+    .hw-btn-revision:hover { background: rgba(245,158,11,0.06); }
+
+    /* upload area */
+    .hw-upload-area {
+      background: #fff; border-radius: 16px; border: 2px dashed rgba(15,23,42,0.12);
+      padding: 28px; text-align: center; margin-bottom: 24px;
+      transition: border-color .15s, background .15s; cursor: pointer;
+    }
+    .hw-upload-area:hover, .hw-upload-area.dragover {
+      border-color: var(--violet); background: rgba(155,93,229,0.02);
+    }
+    .hw-upload-icon { color: #8898AA; margin-bottom: 8px; }
+    .hw-upload-text { font-size: 0.85rem; font-weight: 600; color: #3D4F6B; margin-bottom: 4px; }
+    .hw-upload-hint { font-size: 0.72rem; color: #8898AA; }
+
+    /* review modal (inline) */
+    .hw-review-panel {
+      background: rgba(255,255,255,0.95); border: 1.5px solid rgba(15,23,42,0.08);
+      border-radius: 14px; padding: 16px; margin-top: 10px;
+    }
+    .hw-review-panel label { font-size: 0.75rem; font-weight: 700; color: #3D4F6B; display: block; margin-bottom: 4px; }
+    .hw-review-panel textarea, .hw-review-panel input {
+      width: 100%; padding: 8px 12px; border: 1.5px solid rgba(15,23,42,0.1); border-radius: 10px;
+      font-family: 'Manrope', sans-serif; font-size: 0.82rem; margin-bottom: 10px;
+      outline: none; transition: border-color .15s;
+    }
+    .hw-review-panel textarea:focus, .hw-review-panel input:focus { border-color: var(--violet); }
+    .hw-review-panel textarea { min-height: 60px; resize: vertical; }
+
+    /* empty state */
+    .hw-empty { text-align: center; padding: 60px 20px; color: #8898AA; }
+    .hw-empty-icon { font-size: 3rem; margin-bottom: 12px; opacity: 0.3; }
+    .hw-empty-text { font-size: 0.88rem; font-weight: 600; }
+
+    /* student name in teacher view */
+    .hw-student-name { font-size: 0.78rem; font-weight: 700; color: var(--violet); }
+
+    @media (max-width: 768px) {
+      .container { padding: 16px 14px 80px; }
+      .hw-top { gap: 8px; }
+      .hw-class-sel { flex: 1; min-width: 0; }
+      .hw-card { flex-direction: column; gap: 10px; }
+      .hw-card-right { flex-direction: row; align-items: center; justify-content: flex-start; width: 100%; }
+      .hw-card-actions { flex-wrap: wrap; }
+      .hw-upload-area { padding: 20px 16px; }
+    }
+    @media (max-width: 480px) {
+      .container { padding: 12px 10px 80px; }
+      .hw-status-filters { gap: 4px; }
+      .hw-sf-btn { font-size: 0.72rem; padding: 5px 10px; }
+      .hw-card { padding: 14px 14px; }
+      .hw-btn { font-size: 0.72rem; padding: 5px 10px; }
+    }
+  </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>
+      <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>
+    </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>
+          <span class="sb-logout" style="pointer-events:none">Мой профиль</span>
+        </div>
+      </a>
+    </div>
+  </aside>
+  <div class="notif-drop" id="notif-drop"></div>
+  <div class="sb-content">
+    <div class="container">
+      <div class="page-title">Домашние задания</div>
+      <div class="page-sub" id="hw-sub">Загрузка…</div>
+
+      <!-- Student: upload area -->
+      <div id="hw-upload-wrap" style="display:none">
+        <div class="hw-upload-area" id="hw-upload-area" onclick="document.getElementById('hw-file-input').click()">
+          <div class="hw-upload-icon"><i data-lucide="upload-cloud" style="width:36px;height:36px"></i></div>
+          <div class="hw-upload-text">Загрузить работу</div>
+          <div class="hw-upload-hint">PDF, Word, изображения · до 50 МБ</div>
+          <div class="hw-upload-hint" id="hw-selected-file" style="color:var(--violet);font-weight:600;margin-top:6px"></div>
+        </div>
+        <input type="file" id="hw-file-input" style="display:none"
+               accept=".pdf,.doc,.docx,.ppt,.pptx,.xls,.xlsx,.png,.jpg,.jpeg,.gif,.webp,.txt" />
+        <div style="display:flex;gap:10px;margin-bottom:24px;flex-wrap:wrap;align-items:flex-end">
+          <div style="flex:1;min-width:200px">
+            <label style="font-size:.72rem;font-weight:700;color:#8898AA;display:block;margin-bottom:4px">Задание (необязательно)</label>
+            <select id="hw-assignment-sel" class="hw-class-sel" style="width:100%">
+              <option value="">— Без привязки к заданию —</option>
+            </select>
+          </div>
+          <div style="flex:1;min-width:200px">
+            <label style="font-size:.72rem;font-weight:700;color:#8898AA;display:block;margin-bottom:4px">Комментарий</label>
+            <input type="text" id="hw-message" class="hw-class-sel" style="width:100%" placeholder="Опишите работу…" />
+          </div>
+          <button class="hw-btn hw-btn-primary" id="hw-submit-btn" onclick="submitHomework()" disabled>
+            <i data-lucide="send" style="width:13px;height:13px"></i> Отправить
+          </button>
+        </div>
+      </div>
+
+      <!-- Teacher: class selector -->
+      <div class="hw-top" id="hw-top-teacher" style="display:none">
+        <select class="hw-class-sel" id="hw-class-sel" onchange="loadTeacherSubmissions()">
+          <option value="">Выберите класс</option>
+        </select>
+        <div class="hw-status-filters">
+          <button class="hw-sf-btn active" onclick="filterStatus(null,this)">Все</button>
+          <button class="hw-sf-btn" onclick="filterStatus('new',this)">Новые</button>
+          <button class="hw-sf-btn" onclick="filterStatus('resubmitted',this)">Повторные</button>
+          <button class="hw-sf-btn" onclick="filterStatus('revision',this)">На доработке</button>
+          <button class="hw-sf-btn" onclick="filterStatus('reviewed',this)">Проверены</button>
+          <button class="hw-sf-btn" onclick="filterStatus('accepted',this)">Приняты</button>
+        </div>
+      </div>
+
+      <!-- Student: status filters -->
+      <div class="hw-top" id="hw-top-student" style="display:none">
+        <div class="hw-status-filters">
+          <button class="hw-sf-btn active" onclick="filterStatus(null,this)">Все</button>
+          <button class="hw-sf-btn" onclick="filterStatus('new',this)">Отправлено</button>
+          <button class="hw-sf-btn" onclick="filterStatus('revision',this)">На доработке</button>
+          <button class="hw-sf-btn" onclick="filterStatus('reviewed',this)">Проверено</button>
+          <button class="hw-sf-btn" onclick="filterStatus('accepted',this)">Принято</button>
+        </div>
+      </div>
+
+      <div class="hw-list" id="hw-list"></div>
+    </div>
+  </div>
+</div>
+
+<script src="/js/api.js"></script>
+<script src="/js/notifications.js"></script>
+<script>
+  const { user, isTeacher, isAdmin } = LS.initPage();
+  if (!user) throw new Error('Not logged in');
+
+  function fmtDate(s) {
+    if (!s) return '—';
+    const d = new Date(s.includes('T') ? s : s.replace(' ','T')+'Z');
+    return d.toLocaleDateString('ru',{day:'numeric',month:'short'}) + ' ' + d.toLocaleTimeString('ru',{hour:'2-digit',minute:'2-digit'});
+  }
+  function fmtSize(b) {
+    if (b < 1024) return b + ' Б';
+    if (b < 1024*1024) return (b/1024).toFixed(1) + ' КБ';
+    return (b/1024/1024).toFixed(1) + ' МБ';
+  }
+
+  if (isAdmin) {
+    const btnAdmin = document.getElementById('btn-admin');
+    if (btnAdmin) btnAdmin.style.display = '';
+  }
+  LS.showBoardIfAllowed();
+
+  LS.notif.init();
+
+  /* ── state ── */
+  let _submissions = [];
+  let _statusFilter = null;
+  let _selectedFile = null;
+  let _studentClassId = null;
+
+  const STATUS_LABELS = {
+    new: 'Новое', reviewed: 'Проверено', revision: 'На доработке',
+    resubmitted: 'Повторно', accepted: 'Принято'
+  };
+
+  /* ── filter ── */
+  function filterStatus(st, btn) {
+    _statusFilter = st;
+    document.querySelectorAll('.hw-sf-btn').forEach(b => b.classList.remove('active'));
+    if (btn) btn.classList.add('active');
+    renderSubmissions();
+  }
+
+  /* ── STUDENT VIEW ── */
+  async function initStudent() {
+    document.getElementById('hw-sub').textContent = 'Сдавайте работы и отслеживайте оценки';
+    document.getElementById('hw-top-student').style.display = '';
+
+    // Find student's class
+    try {
+      const classes = await LS.myClasses();
+      if (classes.length) {
+        _studentClassId = classes[0].id;
+        document.getElementById('hw-upload-wrap').style.display = '';
+
+        // Load assignments for selector
+        try {
+          const feed = await LS.classFeed(classes[0].id);
+          const sel = document.getElementById('hw-assignment-sel');
+          (feed.assignments || []).forEach(a => {
+            const opt = document.createElement('option');
+            opt.value = a.id;
+            opt.textContent = a.title;
+            sel.appendChild(opt);
+          });
+        } catch {}
+      }
+    } catch {}
+
+    // Load submissions
+    try {
+      _submissions = await LS.getMySubmissions();
+      renderSubmissions();
+    } catch {
+      document.getElementById('hw-list').innerHTML = '<div class="hw-empty"><div class="hw-empty-text">Ошибка загрузки</div></div>';
+    }
+
+    // File input
+    const fileInput = document.getElementById('hw-file-input');
+    fileInput.addEventListener('change', () => {
+      _selectedFile = fileInput.files[0] || null;
+      document.getElementById('hw-selected-file').textContent = _selectedFile ? _selectedFile.name : '';
+      document.getElementById('hw-submit-btn').disabled = !_selectedFile;
+    });
+
+    // Drag and drop
+    const area = document.getElementById('hw-upload-area');
+    area.addEventListener('dragover', e => { e.preventDefault(); area.classList.add('dragover'); });
+    area.addEventListener('dragleave', () => area.classList.remove('dragover'));
+    area.addEventListener('drop', e => {
+      e.preventDefault(); area.classList.remove('dragover');
+      if (e.dataTransfer.files.length) {
+        _selectedFile = e.dataTransfer.files[0];
+        document.getElementById('hw-selected-file').textContent = _selectedFile.name;
+        document.getElementById('hw-submit-btn').disabled = false;
+      }
+    });
+  }
+
+  async function submitHomework() {
+    if (!_selectedFile || !_studentClassId) return;
+    const btn = document.getElementById('hw-submit-btn');
+    btn.disabled = true;
+    try {
+      const fd = new FormData();
+      fd.append('file', _selectedFile);
+      fd.append('class_id', _studentClassId);
+      const assignId = document.getElementById('hw-assignment-sel').value;
+      if (assignId) fd.append('assignment_id', assignId);
+      const msg = document.getElementById('hw-message').value.trim();
+      if (msg) fd.append('message', msg);
+
+      await LS.submitWork(fd);
+      LS.toast('Работа отправлена!', 'success');
+
+      // Reset
+      _selectedFile = null;
+      document.getElementById('hw-file-input').value = '';
+      document.getElementById('hw-selected-file').textContent = '';
+      document.getElementById('hw-message').value = '';
+      document.getElementById('hw-assignment-sel').value = '';
+
+      // Reload
+      _submissions = await LS.getMySubmissions();
+      renderSubmissions();
+    } catch (e) {
+      LS.toast(e.message || 'Ошибка отправки', 'error');
+    } finally { btn.disabled = !_selectedFile; }
+  }
+
+  async function resubmitHomework(subId) {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = '.pdf,.doc,.docx,.ppt,.pptx,.xls,.xlsx,.png,.jpg,.jpeg,.gif,.webp,.txt';
+    input.onchange = async () => {
+      const file = input.files[0];
+      if (!file) return;
+      try {
+        const fd = new FormData();
+        fd.append('file', file);
+        await LS.resubmitWork(subId, fd);
+        LS.toast('Работа отправлена повторно!', 'success');
+        _submissions = await LS.getMySubmissions();
+        renderSubmissions();
+      } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+    };
+    input.click();
+  }
+
+  async function deleteHomework(id) {
+    if (!await LS.confirm('Удалить эту работу?', { title: 'Удаление', confirmText: 'Удалить' })) return;
+    try {
+      await LS.deleteSubmission(id);
+      _submissions = _submissions.filter(s => s.id !== id);
+      renderSubmissions();
+      LS.toast('Удалено', 'info');
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+
+  async function deleteSubmissionAdmin(id) {
+    if (!await LS.confirm('Удалить работу ученика? Это действие будет записано в журнал.', { title: 'Удаление работы', confirmText: 'Удалить', danger: true })) return;
+    try {
+      await LS.deleteSubmission(id);
+      _submissions = _submissions.filter(s => s.id !== id);
+      renderSubmissions();
+      LS.toast('Работа удалена', 'info');
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+
+  /* ── TEACHER VIEW ── */
+  async function initTeacher() {
+    document.getElementById('hw-sub').textContent = 'Проверяйте работы учеников и ставьте оценки';
+    document.getElementById('hw-top-teacher').style.display = '';
+
+    try {
+      const classes = await LS.getClasses();
+      const sel = document.getElementById('hw-class-sel');
+      classes.forEach(c => {
+        const opt = document.createElement('option');
+        opt.value = c.id;
+        opt.textContent = c.name;
+        sel.appendChild(opt);
+      });
+      if (classes.length) {
+        sel.value = classes[0].id;
+        loadTeacherSubmissions();
+      }
+    } catch {}
+  }
+
+  async function loadTeacherSubmissions() {
+    const classId = document.getElementById('hw-class-sel').value;
+    if (!classId) { _submissions = []; renderSubmissions(); return; }
+    document.getElementById('hw-list').innerHTML = LS.skeleton(3);
+    try {
+      _submissions = await LS.getClassSubmissions(classId);
+      renderSubmissions();
+    } catch {
+      document.getElementById('hw-list').innerHTML = '<div class="hw-empty"><div class="hw-empty-text">Ошибка загрузки</div></div>';
+    }
+  }
+
+  function openReviewPanel(subId) {
+    const el = document.getElementById('review-' + subId);
+    if (el) { el.style.display = el.style.display === 'none' ? '' : 'none'; return; }
+  }
+
+  async function submitReview(subId, action) {
+    const noteEl = document.getElementById('note-' + subId);
+    const gradeEl = document.getElementById('grade-' + subId);
+    const teacher_note = noteEl?.value?.trim() || undefined;
+    const grade = gradeEl?.value ? Number(gradeEl.value) : undefined;
+
+    let status;
+    if (action === 'accept') status = 'accepted';
+    else if (action === 'revision') status = 'revision';
+    else status = 'reviewed';
+
+    try {
+      await LS.reviewSubmission(subId, { status, teacher_note, grade });
+      LS.toast(action === 'accept' ? 'Работа принята!' : action === 'revision' ? 'Отправлено на доработку' : 'Проверено', 'success');
+      loadTeacherSubmissions();
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+
+  /* ── RENDER ── */
+  function renderSubmissions() {
+    const list = document.getElementById('hw-list');
+    const filtered = _statusFilter ? _submissions.filter(s => s.status === _statusFilter) : _submissions;
+
+    if (!filtered.length) {
+      list.innerHTML = `<div class="hw-empty">
+        <div class="hw-empty-icon"><i data-lucide="inbox" style="width:48px;height:48px"></i></div>
+        <div class="hw-empty-text">${_submissions.length ? 'Нет работ с этим статусом' : 'Работ пока нет'}</div>
+      </div>`;
+      lucide.createIcons();
+      return;
+    }
+
+    list.innerHTML = filtered.map(s => {
+      const badge = `<span class="hw-badge hw-badge-${s.status}">${STATUS_LABELS[s.status] || s.status}</span>`;
+      const gradeHtml = s.grade != null
+        ? `<div class="hw-grade ${s.grade >= 80 ? 'hw-grade-high' : s.grade >= 50 ? 'hw-grade-mid' : 'hw-grade-low'}">${s.grade}</div>`
+        : '';
+      const iconBg = s.status === 'accepted' ? 'rgba(16,185,129,0.1)' :
+                     s.status === 'revision' ? 'rgba(245,158,11,0.1)' :
+                     'rgba(155,93,229,0.1)';
+      const iconColor = s.status === 'accepted' ? '#10B981' :
+                        s.status === 'revision' ? '#F59E0B' : '#9B5DE5';
+      const iconName = s.status === 'accepted' ? 'check-circle' :
+                       s.status === 'revision' ? 'alert-circle' : 'file-text';
+
+      let noteHtml = '';
+      if (s.teacher_note) noteHtml = `<div class="hw-card-note"><strong>Учитель:</strong> ${esc(s.teacher_note)}</div>`;
+      if (s.message) noteHtml += `<div class="hw-card-note" style="margin-top:6px"><strong>Комментарий:</strong> ${esc(s.message)}</div>`;
+
+      let actionsHtml = '';
+      if (isTeacher || isAdmin) {
+        actionsHtml = `
+          <div class="hw-card-actions">
+            <a class="hw-btn" href="${LS.submissionDownloadUrl(s.id)}" target="_blank">
+              <i data-lucide="download" style="width:12px;height:12px"></i> Скачать
+            </a>
+            <button class="hw-btn" onclick="openReviewPanel(${s.id})">
+              <i data-lucide="pencil" style="width:12px;height:12px"></i> Проверить
+            </button>
+            <button class="hw-btn hw-btn-danger" onclick="deleteSubmissionAdmin(${s.id})">
+              <i data-lucide="trash-2" style="width:12px;height:12px"></i>
+            </button>
+          </div>
+          <div class="hw-review-panel" id="review-${s.id}" style="display:none">
+            <label>Комментарий</label>
+            <textarea id="note-${s.id}" placeholder="Замечания, рекомендации…">${esc(s.teacher_note || '')}</textarea>
+            <label>Оценка (0–100)</label>
+            <input type="number" id="grade-${s.id}" min="0" max="100" value="${s.grade != null ? s.grade : ''}" placeholder="—" />
+            <div style="display:flex;gap:8px;flex-wrap:wrap">
+              <button class="hw-btn hw-btn-accept" onclick="submitReview(${s.id},'accept')">
+                <i data-lucide="check" style="width:12px;height:12px"></i> Принять
+              </button>
+              <button class="hw-btn hw-btn-revision" onclick="submitReview(${s.id},'revision')">
+                <i data-lucide="rotate-ccw" style="width:12px;height:12px"></i> На доработку
+              </button>
+              <button class="hw-btn" onclick="submitReview(${s.id},'reviewed')">Проверено</button>
+            </div>
+          </div>`;
+      } else {
+        // Student actions
+        const canResubmit = s.status === 'revision';
+        const canDelete = ['new', 'revision', 'resubmitted'].includes(s.status);
+        actionsHtml = `<div class="hw-card-actions">
+          <a class="hw-btn" href="${LS.submissionDownloadUrl(s.id)}" target="_blank">
+            <i data-lucide="download" style="width:12px;height:12px"></i> Скачать
+          </a>
+          ${canResubmit ? `<button class="hw-btn hw-btn-primary" onclick="resubmitHomework(${s.id})"><i data-lucide="upload" style="width:12px;height:12px"></i> Пересдать</button>` : ''}
+          ${canDelete ? `<button class="hw-btn hw-btn-danger" onclick="deleteHomework(${s.id})"><i data-lucide="trash-2" style="width:12px;height:12px"></i></button>` : ''}
+        </div>`;
+      }
+
+      const studentLine = (isTeacher || isAdmin) && s.student_name
+        ? `<span class="hw-student-name">${esc(s.student_name)}</span> · `
+        : '';
+
+      return `<div class="hw-card">
+        <div class="hw-card-icon" style="background:${iconBg};color:${iconColor}">
+          <i data-lucide="${iconName}" style="width:20px;height:20px"></i>
+        </div>
+        <div class="hw-card-body">
+          <div class="hw-card-title">${esc(s.assignment_title || s.original_name)}</div>
+          <div class="hw-card-meta">
+            <span>${studentLine}${fmtDate(s.submitted_at)}</span>
+            <span>${esc(s.original_name)} · ${fmtSize(s.size || 0)}</span>
+          </div>
+          ${noteHtml}
+          ${actionsHtml}
+        </div>
+        <div class="hw-card-right">
+          ${badge}
+          ${gradeHtml}
+        </div>
+      </div>`;
+    }).join('');
+
+    lucide.createIcons();
+  }
+
+  /* ── init ── */
+  if (isTeacher || isAdmin) initTeacher();
+  else initStudent();
+
+  if (window.lucide) lucide.createIcons();
+</script>
+<script src="/js/search.js"></script>
+<script src="/js/mobile.js"></script>
+</body>
+</html>
diff --git a/frontend/img/questions/ct2021v1_a1.png b/frontend/img/questions/ct2021v1_a1.png
new file mode 100644
index 0000000..9803aef
Binary files /dev/null and b/frontend/img/questions/ct2021v1_a1.png differ
diff --git a/frontend/img/questions/ct2021v1_a15.png b/frontend/img/questions/ct2021v1_a15.png
new file mode 100644
index 0000000..96d3817
Binary files /dev/null and b/frontend/img/questions/ct2021v1_a15.png differ
diff --git a/frontend/img/questions/ct2021v1_a17.png b/frontend/img/questions/ct2021v1_a17.png
new file mode 100644
index 0000000..415c175
Binary files /dev/null and b/frontend/img/questions/ct2021v1_a17.png differ
diff --git a/frontend/img/questions/ct2021v1_a18.png b/frontend/img/questions/ct2021v1_a18.png
new file mode 100644
index 0000000..4d86ac7
Binary files /dev/null and b/frontend/img/questions/ct2021v1_a18.png differ
diff --git a/frontend/img/questions/ct2021v1_a7.png b/frontend/img/questions/ct2021v1_a7.png
new file mode 100644
index 0000000..7dc602d
Binary files /dev/null and b/frontend/img/questions/ct2021v1_a7.png differ
diff --git a/frontend/img/questions/ct2021v1_b1.png b/frontend/img/questions/ct2021v1_b1.png
new file mode 100644
index 0000000..a4fecbd
Binary files /dev/null and b/frontend/img/questions/ct2021v1_b1.png differ
diff --git a/frontend/img/questions/ct2021v1_b3.png b/frontend/img/questions/ct2021v1_b3.png
new file mode 100644
index 0000000..40823e2
Binary files /dev/null and b/frontend/img/questions/ct2021v1_b3.png differ
diff --git a/frontend/img/questions/ct2021v1_b4.png b/frontend/img/questions/ct2021v1_b4.png
new file mode 100644
index 0000000..382f108
Binary files /dev/null and b/frontend/img/questions/ct2021v1_b4.png differ
diff --git a/frontend/js/classroom-rtc.js b/frontend/js/classroom-rtc.js
new file mode 100644
index 0000000..98f80e0
--- /dev/null
+++ b/frontend/js/classroom-rtc.js
@@ -0,0 +1,358 @@
+/**
+ * ClassroomRTC — WebRTC mesh manager for audio + screen sharing.
+ *
+ * Topology: full mesh (each peer ↔ each peer).
+ * Audio: Opus ~30 Kbit/s per connection.
+ * Screen: teacher → renegotiation adds video track to existing connections.
+ *
+ * Usage:
+ *   const rtc = new ClassroomRTC({
+ *     sessionId, userId,
+ *     onSignal(targetId, payload)   — POST /signal
+ *     onScreenStream(stream|null)   — remote screen arrived / stopped
+ *     onMicActive(userId, active)   — visual mic indicator
+ *   });
+ *   await rtc.startAudio();
+ *   await rtc.connectTo([uid1, uid2]);  // new joiner sends offers
+ *   rtc.handleSignal(fromUid, payload); // called from SSE
+ *   rtc.addPeerForScreenShare(uid);     // if teacher, offer screen to new joiner
+ *   rtc.removePeer(uid);
+ *   rtc.destroy();
+ */
+class ClassroomRTC {
+  constructor({ sessionId, userId, onSignal, onScreenStream, onMicActive }) {
+    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._peers        = new Map();      // uid → PeerState
+    this._localStream  = null;           // mic audio
+    this._screenStream = null;           // outbound screen (teacher)
+    this._muted        = false;
+
+    this._vadTimers    = new Map();      // uid → {ctx, timer} for VAD
+  }
+
+  /* ── Audio ───────────────────────────────────────────��───────────────── */
+
+  async startAudio() {
+    try {
+      this._localStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
+      this._localStream.getAudioTracks().forEach(t => { t.enabled = !this._muted; });
+      this._startVAD(this._uid, this._localStream);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  /* ── Voice Activity Detection ────────────────────────────────────────── */
+
+  _startVAD(uid, stream) {
+    if (!this._onMicActive || !window.AudioContext) return;
+    this._stopVAD(uid);
+    try {
+      const ctx = new AudioContext();
+      const src = ctx.createMediaStreamSource(stream);
+      const analyser = ctx.createAnalyser();
+      analyser.fftSize = 256;
+      analyser.smoothingTimeConstant = 0.4;
+      src.connect(analyser);
+      const buf = new Uint8Array(analyser.frequencyBinCount);
+      let speaking = false;
+      const THRESHOLD = 12;
+      const timer = setInterval(() => {
+        analyser.getByteFrequencyData(buf);
+        const avg = buf.reduce((a, b) => a + b, 0) / buf.length;
+        const now = avg > THRESHOLD;
+        if (now !== speaking) {
+          speaking = now;
+          try { this._onMicActive(uid, speaking); } catch {}
+        }
+      }, 120);
+      this._vadTimers.set(uid, { ctx, timer });
+    } catch {}
+  }
+
+  _stopVAD(uid) {
+    const vad = this._vadTimers.get(uid);
+    if (!vad) return;
+    clearInterval(vad.timer);
+    try { vad.ctx.close(); } catch {}
+    this._vadTimers.delete(uid);
+  }
+
+  _stopAllVAD() {
+    for (const uid of [...this._vadTimers.keys()]) this._stopVAD(uid);
+  }
+
+  stopAudio() {
+    this._stopVAD(this._uid);
+    if (!this._localStream) return;
+    this._localStream.getTracks().forEach(t => t.stop());
+    this._localStream = null;
+  }
+
+  toggleMute() {
+    this._muted = !this._muted;
+    if (this._localStream) {
+      this._localStream.getAudioTracks().forEach(t => { t.enabled = !this._muted; });
+    }
+    return this._muted;
+  }
+
+  isMuted() { return this._muted; }
+
+  forceMute() {
+    this._muted = true;
+    if (this._localStream) {
+      this._localStream.getAudioTracks().forEach(t => { t.enabled = false; });
+    }
+  }
+
+  /* ── Connections ─────────────────────────────────────────────────────── */
+
+  /** New joiner calls this to send offers to all existing participants. */
+  async connectTo(userIds) {
+    for (const uid of userIds) {
+      if (uid !== this._uid) await this._sendOffer(uid);
+    }
+  }
+
+  /** Called when a new peer joins (existing participants call this to handle
+   *  teacher screen-share renegotiation if needed). */
+  async addPeerForScreenShare(uid) {
+    if (!this._screenStream) return;
+    // New person joined while we are sharing screen — renegotiate
+    const peer = this._getPeer(uid);
+    if (peer) {
+      const vt = this._screenStream.getVideoTracks()[0];
+      if (vt && !peer.screenSender) {
+        peer.screenSender = peer.pc.addTrack(vt, this._screenStream);
+        // onnegotiationneeded will fire and renegotiate automatically
+      }
+    }
+  }
+
+  removePeer(uid) {
+    const peer = this._peers.get(uid);
+    if (!peer) return;
+    this._stopVAD(uid);
+    if (peer.audioEl) { peer.audioEl.srcObject = null; peer.audioEl.remove(); }
+    try { peer.pc.close(); } catch {}
+    this._peers.delete(uid);
+  }
+
+  /**
+   * Called after SSE reconnect: re-connect peers whose ICE connection failed.
+   * Peers that are still connected are left alone.
+   * @param {number[]} currentUserIds — list of user ids currently in session (excluding self)
+   */
+  async recoverPeers(currentUserIds) {
+    // Close and remove peers that left during the SSE gap
+    for (const uid of [...this._peers.keys()]) {
+      if (!currentUserIds.includes(uid)) this.removePeer(uid);
+    }
+
+    // Re-offer peers with failed/closed ICE
+    for (const uid of currentUserIds) {
+      if (uid === this._uid) continue;
+      const peer = this._peers.get(uid);
+      if (!peer) {
+        // Completely new peer (joined while SSE was down) — we act as initiator
+        await this._sendOffer(uid);
+      } else {
+        const state = peer.pc.iceConnectionState;
+        if (state === 'failed' || state === 'closed' || state === 'disconnected') {
+          this.removePeer(uid);
+          await this._sendOffer(uid);
+        }
+        // else: 'connected' or 'completed' → leave intact
+      }
+    }
+  }
+
+  /* ── Signaling ───────────────────────────────────────────────────────── */
+
+  async handleSignal(fromUid, payload) {
+    const { kind } = payload;
+    try {
+      if (kind === 'offer')          await this._handleOffer(fromUid, payload);
+      else if (kind === 'answer')    await this._handleAnswer(fromUid, payload);
+      else if (kind === 'candidate') await this._handleCandidate(fromUid, payload);
+    } catch (e) {
+      console.warn('[RTC] handleSignal error', kind, e);
+    }
+  }
+
+  async _handleOffer(fromUid, payload) {
+    const peer = this._getOrCreate(fromUid);
+    await peer.pc.setRemoteDescription({ type: 'offer', sdp: payload.sdp });
+    peer.remoteSet = true;
+    await this._flushCandidates(peer);
+
+    // Add own audio track if not already present
+    if (this._localStream) {
+      const existing = peer.pc.getSenders().map(s => s.track);
+      this._localStream.getAudioTracks().forEach(t => {
+        if (!existing.includes(t)) peer.pc.addTrack(t, this._localStream);
+      });
+    }
+
+    const answer = await peer.pc.createAnswer();
+    await peer.pc.setLocalDescription(answer);
+    this._onSignal(fromUid, { kind: 'answer', sdp: answer.sdp });
+  }
+
+  async _handleAnswer(fromUid, payload) {
+    const peer = this._peers.get(fromUid);
+    if (!peer) return;
+    await peer.pc.setRemoteDescription({ type: 'answer', sdp: payload.sdp });
+    peer.remoteSet = true;
+    await this._flushCandidates(peer);
+  }
+
+  async _handleCandidate(fromUid, payload) {
+    const peer = this._peers.get(fromUid);
+    if (!peer) return;
+    if (peer.remoteSet) {
+      try { await peer.pc.addIceCandidate(payload.candidate); } catch {}
+    } else {
+      peer.pendingCandidates.push(payload.candidate);
+    }
+  }
+
+  async _flushCandidates(peer) {
+    for (const c of peer.pendingCandidates) {
+      try { await peer.pc.addIceCandidate(c); } catch {}
+    }
+    peer.pendingCandidates = [];
+  }
+
+  async _sendOffer(targetUid) {
+    const peer = this._getOrCreate(targetUid);
+    if (this._localStream) {
+      const existing = peer.pc.getSenders().map(s => s.track);
+      this._localStream.getAudioTracks().forEach(t => {
+        if (!existing.includes(t)) peer.pc.addTrack(t, this._localStream);
+      });
+    }
+    if (this._screenStream) {
+      const vt = this._screenStream.getVideoTracks()[0];
+      if (vt && !peer.screenSender) {
+        peer.screenSender = peer.pc.addTrack(vt, this._screenStream);
+      }
+    }
+    const offer = await peer.pc.createOffer();
+    await peer.pc.setLocalDescription(offer);
+    this._onSignal(targetUid, { kind: 'offer', sdp: offer.sdp });
+  }
+
+  _getOrCreate(uid) {
+    if (this._peers.has(uid)) return this._peers.get(uid);
+    return this._createPeer(uid);
+  }
+
+  _getPeer(uid) { return this._peers.get(uid) || null; }
+
+  _createPeer(uid) {
+    const ICE = { iceServers: [
+      { urls: 'stun:stun.l.google.com:19302' },
+      { urls: 'stun:stun1.l.google.com:19302' },
+    ]};
+
+    const pc = new RTCPeerConnection(ICE);
+    const peer = { pc, audioEl: null, screenSender: null, remoteSet: false, pendingCandidates: [], negotiating: false };
+    this._peers.set(uid, peer);
+
+    pc.onicecandidate = e => {
+      if (e.candidate) this._onSignal(uid, { kind: 'candidate', candidate: e.candidate.toJSON() });
+    };
+
+    /* Renegotiation: fires when tracks are added/removed (e.g. screen share) */
+    pc.onnegotiationneeded = async () => {
+      if (peer.negotiating || !peer.remoteSet) return;
+      peer.negotiating = true;
+      try {
+        const offer = await pc.createOffer();
+        await pc.setLocalDescription(offer);
+        this._onSignal(uid, { kind: 'offer', sdp: offer.sdp });
+      } catch {}
+      finally { peer.negotiating = false; }
+    };
+
+    pc.ontrack = e => {
+      const track  = e.track;
+      const stream = e.streams[0] || new MediaStream([track]);
+
+      if (track.kind === 'audio') {
+        if (!peer.audioEl) {
+          peer.audioEl = document.createElement('audio');
+          peer.audioEl.autoplay = true;
+          peer.audioEl.style.display = 'none';
+          document.body.appendChild(peer.audioEl);
+        }
+        peer.audioEl.srcObject = stream;
+        this._startVAD(uid, stream);
+      } else if (track.kind === 'video') {
+        if (this._onScreen) this._onScreen(stream);
+        track.onended = () => { if (this._onScreen) this._onScreen(null); };
+      }
+    };
+
+    return peer;
+  }
+
+  /* ── Screen sharing (teacher) ───────────────────────���─────────────────── */
+
+  async startScreenShare() {
+    try {
+      this._screenStream = await navigator.mediaDevices.getDisplayMedia({
+        video: { cursor: 'always' }, audio: false,
+      });
+    } catch { return null; }
+
+    const vt = this._screenStream.getVideoTracks()[0];
+    vt.onended = () => this.stopScreenShare();
+
+    // Add to all existing peer connections (onnegotiationneeded will renegotiate)
+    for (const [, peer] of this._peers) {
+      if (!peer.screenSender) {
+        peer.screenSender = peer.pc.addTrack(vt, this._screenStream);
+      }
+    }
+
+    return this._screenStream;
+  }
+
+  async stopScreenShare() {
+    if (!this._screenStream) return;
+    this._screenStream.getTracks().forEach(t => t.stop());
+    this._screenStream = null;
+
+    for (const [, peer] of this._peers) {
+      if (peer.screenSender) {
+        try { peer.pc.removeTrack(peer.screenSender); } catch {}
+        peer.screenSender = null;
+      }
+    }
+  }
+
+  isSharing() { return !!this._screenStream; }
+
+  /* ── Cleanup ─────────────────────────────────────────────────────────── */
+
+  destroy() {
+    this._stopAllVAD();
+    for (const uid of [...this._peers.keys()]) this.removePeer(uid);
+    this.stopAudio();
+    if (this._screenStream) {
+      this._screenStream.getTracks().forEach(t => t.stop());
+      this._screenStream = null;
+    }
+  }
+}
+
+if (typeof module !== 'undefined') module.exports = ClassroomRTC;
diff --git a/frontend/js/labs/_util.js b/frontend/js/labs/_util.js
new file mode 100644
index 0000000..7b48b4a
--- /dev/null
+++ b/frontend/js/labs/_util.js
@@ -0,0 +1,191 @@
+'use strict';
+/* ══════════════════════════════════════════════════════════════
+   SimUtil — shared utility functions for lab simulations.
+   Loaded once before all sim scripts.
+   ══════════════════════════════════════════════════════════════ */
+
+const SimUtil = (() => {
+
+  /**
+   * DPR-aware canvas resize.  Sets canvas pixel size and applies
+   * `setTransform` so subsequent drawing is in CSS-pixel coords.
+   * Returns { W, H, dpr }.
+   */
+  function fitCanvas(canvas, ctx) {
+    const dpr = window.devicePixelRatio || 1;
+    const w   = canvas.offsetWidth  || canvas.parentElement?.offsetWidth  || 600;
+    const h   = canvas.offsetHeight || canvas.parentElement?.offsetHeight || 400;
+    canvas.width  = w * dpr;
+    canvas.height = h * dpr;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    return { W: w, H: h, dpr };
+  }
+
+  /**
+   * Compute a "nice" grid step for the given pixel range and target ~n divisions.
+   */
+  function niceStep(rangePx, scale, n) {
+    if (!n) n = 8;
+    const raw = rangePx / scale / n;
+    const p   = Math.pow(10, Math.floor(Math.log10(raw)));
+    for (const m of [1, 2, 5, 10]) if (m * p >= raw) return m * p;
+    return p;
+  }
+
+  /**
+   * Format number for grid/axis labels.
+   */
+  function fmt(n, step) {
+    if (n === 0) return '0';
+    if (step >= 1 && Number.isInteger(n)) return String(n);
+    if (step < 0.001) return n.toExponential(1);
+    const dec = Math.max(0, -Math.floor(Math.log10(step)));
+    return n.toFixed(dec);
+  }
+
+  /**
+   * Draw an arrow from (x1,y1) to (x2,y2).
+   */
+  function arrow(ctx, x1, y1, x2, y2, color, lw) {
+    const dx = x2 - x1, dy = y2 - y1;
+    const len = Math.sqrt(dx * dx + dy * dy);
+    if (len < 1) return;
+    const ux = dx / len, uy = dy / len;
+    const hs = Math.min(10, len * 0.3); // head size
+
+    ctx.save();
+    ctx.strokeStyle = color || '#fff';
+    ctx.fillStyle   = color || '#fff';
+    ctx.lineWidth   = lw || 2;
+    ctx.lineCap     = 'round';
+
+    // shaft
+    ctx.beginPath();
+    ctx.moveTo(x1, y1);
+    ctx.lineTo(x2 - ux * hs * 0.5, y2 - uy * hs * 0.5);
+    ctx.stroke();
+
+    // head
+    ctx.beginPath();
+    ctx.moveTo(x2, y2);
+    ctx.lineTo(x2 - ux * hs - uy * hs * 0.4, y2 - uy * hs + ux * hs * 0.4);
+    ctx.lineTo(x2 - ux * hs + uy * hs * 0.4, y2 - uy * hs - ux * hs * 0.4);
+    ctx.closePath();
+    ctx.fill();
+    ctx.restore();
+  }
+
+  /**
+   * Draw a coordinate grid with labels.
+   * @param {object} opts — { ox, oy, scl, font, gridColor, labelColor }
+   */
+  function drawGrid(ctx, W, H, opts) {
+    const { ox = 0, oy = 0, scl = 50, font, gridColor, labelColor } = opts || {};
+
+    const step = niceStep(W, scl);
+
+    // math <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> pixel helpers
+    const toPx = (mx, my) => [W / 2 + (mx - ox) * scl, H / 2 - (my - oy) * scl];
+    const toMx = (px) => (px - W / 2) / scl + ox;
+    const toMy = (py) => -(py - H / 2) / scl + oy;
+
+    const x0 = toMx(0), x1 = toMx(W);
+    const y0 = toMy(H), y1 = toMy(0);
+    const gx = Math.floor(x0 / step) * step;
+    const gy = Math.floor(y0 / step) * step;
+
+    // grid lines
+    ctx.strokeStyle = gridColor || 'rgba(255,255,255,0.065)';
+    ctx.lineWidth = 1;
+    for (let x = gx; x <= x1 + step; x += step) {
+      const [px] = toPx(x, 0);
+      ctx.beginPath(); ctx.moveTo(px, 0); ctx.lineTo(px, H); ctx.stroke();
+    }
+    for (let y = gy; y <= y1 + step; y += step) {
+      const [, py] = toPx(0, y);
+      ctx.beginPath(); ctx.moveTo(0, py); ctx.lineTo(W, py); ctx.stroke();
+    }
+
+    // labels
+    ctx.font = font || '11px Manrope, system-ui, sans-serif';
+    ctx.fillStyle = labelColor || 'rgba(255,255,255,0.3)';
+    const [axX, axY] = toPx(0, 0);
+    const lblY = Math.max(4,  Math.min(H - 18, axY + 5));
+    const lblX = Math.max(28, Math.min(W - 6,  axX - 5));
+
+    ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+    for (let x = gx; x <= x1; x += step) {
+      if (Math.abs(x) < step * 0.01) continue;
+      const [px] = toPx(x, 0);
+      if (px < 18 || px > W - 18) continue;
+      ctx.fillText(fmt(x, step), px, lblY);
+    }
+    ctx.textAlign = 'right'; ctx.textBaseline = 'middle';
+    for (let y = gy; y <= y1; y += step) {
+      if (Math.abs(y) < step * 0.01) continue;
+      const [, py] = toPx(0, y);
+      if (py < 12 || py > H - 12) continue;
+      ctx.fillText(fmt(y, step), lblX, py);
+    }
+
+    // axes
+    ctx.strokeStyle = 'rgba(255,255,255,0.4)';
+    ctx.lineWidth = 1.5;
+    ctx.beginPath(); ctx.moveTo(0, axY);  ctx.lineTo(W - 10, axY); ctx.stroke();
+    ctx.beginPath(); ctx.moveTo(axX, H); ctx.lineTo(axX, 8);      ctx.stroke();
+
+    // arrowheads
+    ctx.fillStyle = 'rgba(255,255,255,0.4)';
+    _arrowHead(ctx, W - 8, axY, 0);
+    _arrowHead(ctx, axX, 6, -Math.PI / 2);
+
+    // axis labels
+    ctx.fillStyle = 'rgba(255,255,255,0.55)';
+    ctx.font = 'bold 12px Manrope, sans-serif';
+    ctx.textBaseline = 'middle'; ctx.textAlign = 'left';
+    ctx.fillText('x', W - 10, axY - 13);
+    ctx.textBaseline = 'top'; ctx.textAlign = 'left';
+    ctx.fillText('y', axX + 7, 4);
+  }
+
+  function _arrowHead(ctx, x, y, angle) {
+    const s = 5;
+    ctx.save(); ctx.translate(x, y); ctx.rotate(angle);
+    ctx.beginPath();
+    ctx.moveTo(0, 0); ctx.lineTo(-s * 1.6, -s * 0.6); ctx.lineTo(-s * 1.6, s * 0.6);
+    ctx.closePath(); ctx.fill();
+    ctx.restore();
+  }
+
+  /**
+   * Draw a tooltip panel at (x, y).
+   * @param {string[]} rows — lines of text
+   * @param {object} opts — { bg, fg, font, padding, radius }
+   */
+  function tooltip(ctx, x, y, rows, opts) {
+    const { bg = 'rgba(22,22,38,0.92)', fg = '#ddd', font = '12px Manrope, sans-serif',
+            padding = 8, radius = 8 } = opts || {};
+    ctx.save();
+    ctx.font = font;
+    let maxW = 0;
+    for (const r of rows) maxW = Math.max(maxW, ctx.measureText(r).width);
+    const w = maxW + padding * 2;
+    const lineH = 17;
+    const h = rows.length * lineH + padding * 2;
+    const tx = x + 14, ty = y - h / 2;
+
+    ctx.fillStyle = bg;
+    ctx.beginPath();
+    ctx.roundRect(tx, ty, w, h, radius);
+    ctx.fill();
+    ctx.fillStyle = fg;
+    ctx.textBaseline = 'top';
+    ctx.textAlign = 'left';
+    for (let i = 0; i < rows.length; i++) {
+      ctx.fillText(rows[i], tx + padding, ty + padding + i * lineH);
+    }
+    ctx.restore();
+  }
+
+  return { fitCanvas, niceStep, fmt, arrow, drawGrid, tooltip };
+})();
diff --git a/frontend/js/labs/angrybirds.js b/frontend/js/labs/angrybirds.js
new file mode 100644
index 0000000..fc70da6
--- /dev/null
+++ b/frontend/js/labs/angrybirds.js
@@ -0,0 +1,855 @@
+'use strict';
+
+/* ═══════════════════════════════════════════════════════════════════
+   AngryBirdsSim — Angry Birds Physics
+   Real projectile physics: RK4, drag, wind, gravity by planet.
+   Blocks: AABB with impulse collisions and destruction.
+   Pigs: circle targets with HP system.
+   6 levels with increasing difficulty.
+   ═══════════════════════════════════════════════════════════════════ */
+
+const AB_PLANETS = {
+  earth:   { g: 9.81,  label: 'Земля <svg class="ic" viewBox="0 0 24 24"><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>',  sky1: '#0f1923', sky2: '#1a3a2a', ground: '#3d6b47', g_label: '9.81' },
+  moon:    { g: 1.62,  label: 'Луна <svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="currentColor" stroke="none"/></svg>',   sky1: '#000008', sky2: '#0a0a18', ground: '#7a7a66', g_label: '1.62' },
+  mars:    { g: 3.71,  label: 'Марс <svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="currentColor" stroke="none"/></svg>',   sky1: '#2a0800', sky2: '#5c1e00', ground: '#7a3010', g_label: '3.71' },
+  jupiter: { g: 24.79, label: 'Юпитер <svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="currentColor" stroke="none"/></svg>', sky1: '#1a0a00', sky2: '#3d1e00', ground: '#5c3220', g_label: '24.79' },
+};
+
+const AB_MATS = {
+  wood:  { color: '#b5651d', border: '#7a3f0a', hpMax: 120, mass: 2.0, debris: '#8B4513' },
+  stone: { color: '#7a7a7a', border: '#444',    hpMax: 320, mass: 6.0, debris: '#555' },
+  glass: { color: '#a8d8ea', border: '#5badd4', hpMax: 45,  mass: 0.8, debris: '#d4eef8' },
+};
+
+const AB_BIRDS = {
+  normal: { color: '#e63946', r: 18, mass: 1.0, Cd: 0.28, label: 'Красная' },
+  heavy:  { color: '#888',    r: 23, mass: 4.2, Cd: 0.45, label: 'Тяжёлая' },
+  fast:   { color: '#ffd166', r: 13, mass: 0.55, Cd: 0.08, label: 'Жёлтая' },
+};
+
+const _PX_M = 42; // pixels per metre (base scale, adjusted in _layout)
+
+/* ── Level definitions ── */
+/* rx = metres right of slingshot, gy = metres above ground (bottom of block) */
+function _buildLevels() {
+  return [
+    /* 1 — Tutorial: one wooden column, one pig */
+    { planet: 'earth', wind: 0, birdType: 'normal', birds: 3,
+      blocks: [
+        { mat: 'wood', rx: 7.2, gy: 0,    w: 0.55, h: 1.9 },
+        { mat: 'wood', rx: 6.8, gy: 1.9,  w: 1.2,  h: 0.38 },
+      ],
+      pigs: [{ rx: 7.2, gy: 2.35 }] },
+
+    /* 2 — Glass tower, 2 pigs */
+    { planet: 'earth', wind: 0, birdType: 'normal', birds: 4,
+      blocks: [
+        { mat: 'glass', rx: 6.6, gy: 0,    w: 0.45, h: 1.6 },
+        { mat: 'glass', rx: 8.2, gy: 0,    w: 0.45, h: 1.6 },
+        { mat: 'glass', rx: 6.3, gy: 1.6,  w: 2.5,  h: 0.4 },
+        { mat: 'glass', rx: 7.3, gy: 2.0,  w: 0.55, h: 1.3 },
+      ],
+      pigs: [{ rx: 6.8, gy: 2.05 }, { rx: 7.3, gy: 3.4 }] },
+
+    /* 3 — Wind, wooden house */
+    { planet: 'earth', wind: 5, birdType: 'normal', birds: 4,
+      blocks: [
+        { mat: 'wood', rx: 6.5, gy: 0,    w: 0.5, h: 2.1 },
+        { mat: 'wood', rx: 9.1, gy: 0,    w: 0.5, h: 2.1 },
+        { mat: 'wood', rx: 6.2, gy: 2.1,  w: 3.4, h: 0.45 },
+        { mat: 'wood', rx: 7.1, gy: 2.55, w: 0.5, h: 1.6 },
+        { mat: 'wood', rx: 8.5, gy: 2.55, w: 0.5, h: 1.6 },
+        { mat: 'wood', rx: 6.8, gy: 4.15, w: 2.5, h: 0.4 },
+      ],
+      pigs: [{ rx: 7.8, gy: 2.6 }, { rx: 7.8, gy: 4.6 }] },
+
+    /* 4 — Moon, stone fortress, heavy bird */
+    { planet: 'moon', wind: 0, birdType: 'heavy', birds: 3,
+      blocks: [
+        { mat: 'stone', rx: 7.0, gy: 0,    w: 0.6, h: 2.6 },
+        { mat: 'stone', rx: 9.6, gy: 0,    w: 0.6, h: 2.6 },
+        { mat: 'stone', rx: 6.7, gy: 2.6,  w: 3.5, h: 0.6 },
+        { mat: 'stone', rx: 8.2, gy: 3.2,  w: 0.6, h: 1.6 },
+      ],
+      pigs: [{ rx: 7.5, gy: 3.2 }, { rx: 8.5, gy: 4.8 }] },
+
+    /* 5 — Mars, headwind, mixed materials, fast bird */
+    { planet: 'mars', wind: -4, birdType: 'fast', birds: 4,
+      blocks: [
+        { mat: 'stone', rx: 6.5, gy: 0,    w: 0.5, h: 1.3 },
+        { mat: 'wood',  rx: 6.5, gy: 1.3,  w: 0.5, h: 1.6 },
+        { mat: 'stone', rx: 8.2, gy: 0,    w: 0.5, h: 1.3 },
+        { mat: 'wood',  rx: 8.2, gy: 1.3,  w: 0.5, h: 1.6 },
+        { mat: 'stone', rx: 6.2, gy: 2.9,  w: 2.9, h: 0.5 },
+        { mat: 'wood',  rx: 7.4, gy: 3.4,  w: 0.7, h: 1.1 },
+      ],
+      pigs: [{ rx: 6.8, gy: 3.4 }, { rx: 8.8, gy: 3.4 }] },
+
+    /* 6 — Jupiter, strong wind, multi-level, 3 pigs */
+    { planet: 'jupiter', wind: 7, birdType: 'normal', birds: 5,
+      blocks: [
+        { mat: 'stone', rx: 6.2, gy: 0,    w: 0.5, h: 1.6 },
+        { mat: 'wood',  rx: 7.7, gy: 0,    w: 0.5, h: 1.6 },
+        { mat: 'stone', rx: 9.2, gy: 0,    w: 0.5, h: 1.6 },
+        { mat: 'stone', rx: 5.9, gy: 1.6,  w: 1.2, h: 0.5 },
+        { mat: 'wood',  rx: 7.4, gy: 1.6,  w: 2.3, h: 0.5 },
+        { mat: 'stone', rx: 8.9, gy: 1.6,  w: 1.2, h: 0.5 },
+        { mat: 'stone', rx: 6.7, gy: 2.1,  w: 0.5, h: 1.6 },
+        { mat: 'stone', rx: 8.7, gy: 2.1,  w: 0.5, h: 1.6 },
+        { mat: 'wood',  rx: 6.4, gy: 3.7,  w: 3.1, h: 0.45 },
+      ],
+      pigs: [{ rx: 6.4, gy: 2.15 }, { rx: 7.7, gy: 2.15 }, { rx: 8.9, gy: 2.15 }] },
+  ];
+}
+
+/* ══════════════════════════════════════════════════════════════════ */
+class AngryBirdsSim {
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.ctx    = canvas.getContext('2d');
+    this.W = 0; this.H = 0;
+
+    this.levelIdx = 0;
+    this.state    = 'aim'; // 'aim' | 'flying' | 'settling' | 'win' | 'lose'
+    this.bird     = null;
+    this.birdsLeft = [];
+    this.blocks   = [];
+    this.pigs     = [];
+    this.score    = 0;
+
+    this._particles  = [];
+    this._raf        = null;
+    this._lastTs     = null;
+    this._settleTimer = 0;
+    this._previewPath = [];
+    this._drag       = { pulling: false, mx: 0, my: 0 }; // mx/my updated in _layout()
+
+    /* layout (computed in _layout) */
+    this._gY  = 0;  // ground Y (canvas px)
+    this._sX  = 0;  // sling X
+    this._sY  = 0;  // sling Y (bird rest position)
+    this._sc  = _PX_M; // px per metre
+
+    this._levels = _buildLevels();
+    this._stars  = Array.from({ length: 70 }, () => ({
+      x: Math.random(), y: Math.random() * 0.7, r: 0.5 + Math.random() * 1.5, a: 0.3 + Math.random() * 0.7,
+    }));
+
+    this.onUpdate = null;
+    this._ready   = false; // true after first _initLevel
+
+    new ResizeObserver(() => { this.fit(); if (!this._raf) this.draw(); })
+      .observe(canvas.parentElement || canvas);
+  }
+
+  /* ── PUBLIC API ─────────────────────────────────────────────── */
+
+  fit() {
+    const dpr = window.devicePixelRatio || 1;
+    const el  = this.canvas.parentElement || this.canvas;
+    const W   = el.clientWidth  || 800;
+    const H   = el.clientHeight || 480;
+    this.canvas.width  = W * dpr;
+    this.canvas.height = H * dpr;
+    this.canvas.style.width  = W + 'px';
+    this.canvas.style.height = H + 'px';
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this.W = W; this.H = H;
+    this._layout();
+    /* Only init on first open — resize must NOT reset the game */
+    if (!this._ready) { this._ready = true; this._initLevel(); }
+  }
+
+  loadLevel(n) {
+    this.levelIdx = Math.max(0, Math.min(n, this._levels.length - 1));
+    this._ready = true; // ensure _initLevel runs even before first fit
+    this._initLevel();
+  }
+
+  restart() { this._ready = true; this._initLevel(); }
+
+  start() {
+    if (this._raf) return;
+    this._lastTs = null;
+    const tick = (ts) => {
+      const dt = this._lastTs ? Math.min((ts - this._lastTs) / 1000, 0.05) : 0.016;
+      this._lastTs = ts;
+      this._update(dt);
+      this.draw();
+      this._raf = requestAnimationFrame(tick);
+    };
+    this._raf = requestAnimationFrame(tick);
+  }
+
+  stop() {
+    if (this._raf) { cancelAnimationFrame(this._raf); this._raf = null; }
+  }
+
+  draw() {
+    if (!this.W) return;
+    this._drawBackground();
+    this._drawSlingshot();
+    this._drawBlocks();
+    this._drawPigs();
+    if (this.bird) this._drawBird(this.bird);
+    this._drawParticles();
+    if (this.state === 'aim' && this._drag.pulling) this._drawPreview();
+    this._drawSlingshotRubber();
+    this._drawQueue();
+    this._drawHUD();
+    if (this.state === 'win' || this.state === 'lose') this._drawOverlay();
+  }
+
+  info() {
+    const lvl = this._levels[this.levelIdx];
+    const planet = lvl ? AB_PLANETS[lvl.planet] : AB_PLANETS.earth;
+    return {
+      level:  this.levelIdx + 1,
+      birds:  this.birdsLeft.length + (this.bird ? 1 : 0),
+      pigs:   this.pigs.filter(p => !p.destroyed).length,
+      score:  this.score,
+      planet: planet ? planet.label : '—',
+      g:      planet ? planet.g_label : '—',
+    };
+  }
+
+  /* ── MOUSE HANDLERS ─────────────────────────────────────────── */
+
+  handleMouseDown(e) {
+    if (this.state !== 'aim' || !this.bird) return;
+    const { x, y } = this._evt(e);
+    if (Math.hypot(x - this._sX, y - this._sY) < 54) {
+      this._drag.pulling = true;
+      this._clampDrag(x, y);
+      this._updatePreview();
+    }
+  }
+
+  handleMouseMove(e) {
+    if (!this._drag.pulling) return;
+    const { x, y } = this._evt(e);
+    this._clampDrag(x, y);
+    this._updatePreview();
+    this.draw();
+  }
+
+  handleMouseUp(e) {
+    if (!this._drag.pulling) return;
+    this._drag.pulling = false;
+    const dx = this._drag.mx - this._sX;
+    const dy = this._drag.my - this._sY;
+    if (Math.hypot(dx, dy) < 12) { this.draw(); return; }
+    const K = 5.8; // px stretch <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> px/s velocity
+    this._launch(-dx * K, -dy * K);
+  }
+
+  /* ── PRIVATE ────────────────────────────────────────────────── */
+
+  _layout() {
+    this._gY  = Math.round(this.H * 0.80);
+    this._sX  = Math.round(this.W * 0.17);
+    this._sY  = this._gY - 68;
+    this._sc  = Math.max(34, Math.min(50, this.H / 11));
+    /* keep drag position at sling so rubber band doesn't snap to (0,0) */
+    if (!this._drag.pulling) { this._drag.mx = this._sX; this._drag.my = this._sY; }
+  }
+
+  _initLevel() {
+    if (!this.W) return;
+    const lvl = this._levels[this.levelIdx];
+    if (!lvl) return;
+
+    this.state        = 'aim';
+    this.score        = 0;
+    this._particles   = [];
+    this._previewPath = [];
+    this._settleTimer = 0;
+    this._drag.pulling = false;
+
+    this.birdsLeft = Array(lvl.birds - 1).fill(lvl.birdType);
+    this.bird      = this._spawnBird(lvl.birdType);
+    this._placeBirdAtSling(this.bird);
+
+    const sc = this._sc;
+    this.blocks = lvl.blocks.map((b, i) => {
+      const mat = AB_MATS[b.mat] || AB_MATS.wood;
+      return {
+        id: i, mat: b.mat,
+        x: this._sX + b.rx * sc,
+        y: this._gY - b.gy * sc - b.h * sc,
+        w: b.w * sc, h: b.h * sc,
+        vx: 0, vy: 0, angle: 0, angVel: 0,
+        hp: mat.hpMax, maxHp: mat.hpMax,
+        mass: mat.mass * b.w * b.h,
+        destroyed: false, onGround: true, // start stationary; set false on impulse
+      };
+    });
+
+    this.pigs = lvl.pigs.map((p, i) => ({
+      id: i,
+      x: this._sX + p.rx * sc,
+      y: this._gY - p.gy * sc - 20,
+      vx: 0, vy: 0,
+      r: 20, hp: 100, maxHp: 100,
+      destroyed: false, flash: 0, onGround: true, // start stationary
+    }));
+
+    if (this.onUpdate) this.onUpdate(this.info());
+  }
+
+  _spawnBird(type) {
+    const def = AB_BIRDS[type] || AB_BIRDS.normal;
+    return {
+      type, color: def.color,
+      x: 0, y: 0, vx: 0, vy: 0,
+      r: def.r, mass: def.mass, Cd: def.Cd,
+      trail: [], launched: false, destroyed: false,
+    };
+  }
+
+  _placeBirdAtSling(bird) {
+    bird.x = this._sX; bird.y = this._sY;
+    bird.vx = 0; bird.vy = 0;
+    bird.launched = false; bird.trail = [];
+  }
+
+  _launch(vx, vy) {
+    if (!this.bird) return;
+    this.bird.vx = vx; this.bird.vy = vy;
+    this.bird.launched = true;
+    this.state = 'flying';
+    this._emit('launch', this.bird.x, this.bird.y, this.bird.color, 8);
+    if (this.onUpdate) this.onUpdate(this.info());
+  }
+
+  _clampDrag(mx, my) {
+    let dx = mx - this._sX;
+    let dy = my - this._sY;
+    if (dx > 5) dx = 5; // mostly left only
+    const dist = Math.hypot(dx, dy);
+    const maxPull = 80;
+    if (dist > maxPull) { dx = dx / dist * maxPull; dy = dy / dist * maxPull; }
+    this._drag.mx = this._sX + dx;
+    this._drag.my = this._sY + dy;
+  }
+
+  /* ── UPDATE LOOP ─────────────────────────────────────────────── */
+
+  _update(dt) {
+    if (this.state === 'flying') {
+      this._stepBird(dt);
+      this._collisions();
+      if (this.bird && (this.bird.destroyed || this._offScreen(this.bird))) {
+        this.bird = null;
+        this.state = 'settling';
+        this._settleTimer = 1.5;
+      }
+    }
+
+    if (this.state === 'flying' || this.state === 'settling') {
+      this._stepBlocks(dt);
+      this._stepPigs(dt);
+    }
+
+    if (this.state === 'settling') {
+      this._settleTimer -= dt;
+      if (this._settleTimer <= 0) {
+        if (this.pigs.every(p => p.destroyed)) {
+          this._win();
+        } else if (!this.birdsLeft.length) {
+          this.state = 'lose';
+          if (this.onUpdate) this.onUpdate(this.info());
+        } else {
+          this.bird = this._spawnBird(this.birdsLeft.shift());
+          this._placeBirdAtSling(this.bird);
+          this.state = 'aim';
+          if (this.onUpdate) this.onUpdate(this.info());
+        }
+      }
+    }
+
+    this._stepParticles(dt);
+  }
+
+  _planet() {
+    const lvl = this._levels[this.levelIdx];
+    return AB_PLANETS[lvl?.planet] || AB_PLANETS.earth;
+  }
+
+  _stepBird(dt) {
+    const bird = this.bird;
+    if (!bird?.launched) return;
+    const g   = this._planet().g * this._sc;          // px/s²
+    const lvl = this._levels[this.levelIdx];
+    const wind = (lvl.wind || 0) * this._sc * 0.22;   // px/s² wind accel
+
+    /* Quadratic drag in px-space (empirical, looks right) */
+    const spd = Math.hypot(bird.vx, bird.vy);
+    const kD  = 2.8e-5 * bird.Cd;
+    const ax  = (wind - kD * spd * bird.vx) / bird.mass;
+    const ay  = (g    - kD * spd * bird.vy) / bird.mass;
+
+    /* Simple Euler (fast enough for game) */
+    bird.vx += ax * dt;
+    bird.vy += ay * dt;
+    bird.x  += bird.vx * dt;
+    bird.y  += bird.vy * dt;
+
+    /* Trail */
+    bird.trail.push({ x: bird.x, y: bird.y });
+    if (bird.trail.length > 22) bird.trail.shift();
+
+    /* Ground bounce / stop */
+    if (bird.y + bird.r >= this._gY) {
+      bird.y  = this._gY - bird.r;
+      bird.vy *= -0.32;
+      bird.vx *= 0.72;
+      this._emit('impact', bird.x, this._gY, '#a0d080', 5);
+      if (Math.abs(bird.vy) < 22) bird.destroyed = true;
+    }
+  }
+
+  _stepBlocks(dt) {
+    const g = this._planet().g * this._sc;
+    for (const b of this.blocks) {
+      if (b.destroyed) continue;
+      if (!b.onGround) {
+        b.vy += g * dt;
+        b.x  += b.vx * dt; b.y  += b.vy * dt;
+        b.angle += b.angVel * dt;
+        b.vx *= 0.992;
+        if (b.y + b.h >= this._gY) {
+          b.y = this._gY - b.h;
+          b.vy *= -0.22; b.vx *= 0.65; b.angVel *= 0.45;
+          if (Math.abs(b.vy) < 18) { b.vy = 0; b.onGround = true; }
+        }
+      } else {
+        // sleeping on ground: slide + check if kicked into air
+        if (Math.abs(b.vx) > 0.5 || Math.abs(b.vy) > 0.5) b.onGround = false;
+        b.vx *= 0.82; b.x += b.vx * dt;
+      }
+    }
+  }
+
+  _stepPigs(dt) {
+    const g = this._planet().g * this._sc;
+    for (const p of this.pigs) {
+      if (p.destroyed) continue;
+      if (p.flash > 0) p.flash -= dt;
+      if (p.onGround) {
+        // wake up if kicked
+        if (Math.abs(p.vx) > 0.5 || Math.abs(p.vy) > 0.5) p.onGround = false;
+        p.vx *= 0.82; p.x += p.vx * dt;
+        continue;
+      }
+      p.vy += g * dt;
+      p.x  += p.vx * dt; p.y  += p.vy * dt;
+      if (p.y + p.r >= this._gY) {
+        p.y = this._gY - p.r; p.vy *= -0.18; p.vx *= 0.65;
+        if (Math.abs(p.vy) < 10) { p.vy = 0; p.onGround = true; }
+      }
+    }
+  }
+
+  _collisions() {
+    const bird = this.bird;
+    if (!bird?.launched) return;
+
+    /* Bird vs Blocks */
+    for (const b of this.blocks) {
+      if (b.destroyed) continue;
+      const cx = Math.max(b.x, Math.min(bird.x, b.x + b.w));
+      const cy = Math.max(b.y, Math.min(bird.y, b.y + b.h));
+      const dx = bird.x - cx, dy = bird.y - cy;
+      const dist = Math.hypot(dx, dy);
+      if (dist >= bird.r) continue;
+
+      const nx = dist > 0.5 ? dx / dist : 0;
+      const ny = dist > 0.5 ? dy / dist : -1;
+      const vRel = (bird.vx - b.vx) * nx + (bird.vy - b.vy) * ny;
+      if (vRel >= 0) continue;
+
+      const e = 0.28;
+      const j = -(1 + e) * vRel / (1 / bird.mass + 1 / b.mass);
+      bird.vx += j / bird.mass * nx;
+      bird.vy += j / bird.mass * ny;
+      b.vx    -= j / b.mass * nx;
+      b.vy    -= j / b.mass * ny;
+      b.angVel += (dx * (-j / b.mass * ny) - dy * (-j / b.mass * nx)) * 0.015;
+      b.onGround = false; // wake up block — now subject to gravity
+
+      const dmg = Math.abs(j) * 0.18;
+      b.hp -= dmg;
+      this.score += Math.max(0, Math.floor(dmg * 3));
+      this._emit('hit', cx, cy, AB_MATS[b.mat]?.debris || '#888', 5);
+      if (b.hp <= 0) {
+        b.destroyed = true;
+        this.score += 500;
+        this._emit('destroy', b.x + b.w / 2, b.y + b.h / 2, AB_MATS[b.mat]?.debris || '#888', 15);
+      }
+      bird.x += nx * (bird.r - dist + 1);
+      bird.y += ny * (bird.r - dist + 1);
+    }
+
+    /* Bird vs Pigs */
+    for (const p of this.pigs) {
+      if (p.destroyed) continue;
+      const dx = bird.x - p.x, dy = bird.y - p.y;
+      const dist = Math.hypot(dx, dy);
+      const minD = bird.r + p.r;
+      if (dist >= minD) continue;
+
+      const nx = dist > 0.5 ? dx / dist : 0;
+      const ny = dist > 0.5 ? dy / dist : -1;
+      const pigMass = 2.2;
+      const vRel = (bird.vx - p.vx) * nx + (bird.vy - p.vy) * ny;
+      if (vRel >= 0) continue;
+
+      const e = 0.15;
+      const j = -(1 + e) * vRel / (1 / bird.mass + 1 / pigMass);
+      bird.vx += j / bird.mass * nx;
+      bird.vy += j / bird.mass * ny;
+      p.vx -= j / pigMass * nx;
+      p.vy -= j / pigMass * ny;
+      p.onGround = false; // wake up pig
+
+      const dmg = Math.abs(j) * 0.28;
+      p.hp -= dmg; p.flash = 0.35;
+      if (p.hp <= 0) {
+        p.destroyed = true;
+        this.score += 5000;
+        this._emit('destroy', p.x, p.y, '#4ade80', 20);
+      } else {
+        this._emit('hit', p.x, p.y, '#86efac', 5);
+      }
+      bird.x += nx * (minD - dist + 1);
+      bird.y += ny * (minD - dist + 1);
+    }
+  }
+
+  _win() {
+    this.state = 'win';
+    this.score += this.birdsLeft.length * 3000;
+    this._emit('confetti', this.W / 2, this.H * 0.35, '#ffd166', 50);
+    if (this.onUpdate) this.onUpdate(this.info());
+  }
+
+  _offScreen(b) {
+    return b.x > this.W + 60 || b.x < -60 || b.y > this.H + 60;
+  }
+
+  /* ── PARTICLES ───────────────────────────────────────────────── */
+
+  _emit(type, x, y, color, n) {
+    const confetti = ['#ffd166', '#ef476f', '#06d6e0', '#7bf5a4', '#9b5de5'];
+    for (let i = 0; i < n; i++) {
+      const a = Math.random() * Math.PI * 2;
+      const spd = type === 'confetti' ? 80 + Math.random() * 200
+                : type === 'destroy'  ? 90 + Math.random() * 220
+                : 45 + Math.random() * 100;
+      this._particles.push({
+        x, y,
+        vx: Math.cos(a) * spd,
+        vy: Math.sin(a) * spd - (type === 'destroy' || type === 'confetti' ? 100 : 20),
+        r:  type === 'confetti' ? 4 + Math.random() * 5 : 2 + Math.random() * 4,
+        color: type === 'confetti' ? confetti[i % confetti.length] : color,
+        gravity: type === 'confetti' ? 180 : 300,
+        life: 1, maxLife: 0.5 + Math.random() * 0.9,
+      });
+    }
+  }
+
+  _stepParticles(dt) {
+    for (const p of this._particles) {
+      p.x += p.vx * dt; p.y += p.vy * dt;
+      p.vy += p.gravity * dt; p.vx *= 0.97;
+      p.life -= dt / p.maxLife;
+    }
+    this._particles = this._particles.filter(p => p.life > 0);
+  }
+
+  /* ── PREVIEW PATH ────────────────────────────────────────────── */
+
+  _updatePreview() {
+    const dx = this._drag.mx - this._sX;
+    const dy = this._drag.my - this._sY;
+    const K  = 5.8;
+    const vx0 = -dx * K, vy0 = -dy * K;
+    const g   = this._planet().g * this._sc;
+    const lvl = this._levels[this.levelIdx];
+    const wind = (lvl?.wind || 0) * this._sc * 0.22;
+
+    this._previewPath = [];
+    let x = this._sX, y = this._sY, vx = vx0, vy = vy0;
+    const dt = 0.028;
+    for (let i = 0; i < 38; i++) {
+      vx += wind * dt; vy += g * dt;
+      x += vx * dt; y += vy * dt;
+      if (y > this._gY || x > this.W) break;
+      this._previewPath.push({ x, y, a: 1 - i / 38 });
+    }
+  }
+
+  /* ── DRAWING ─────────────────────────────────────────────────── */
+
+  _drawBackground() {
+    const ctx = this.ctx;
+    const pl  = this._planet();
+    ctx.clearRect(0, 0, this.W, this.H);
+
+    /* Sky */
+    const sky = ctx.createLinearGradient(0, 0, 0, this._gY);
+    sky.addColorStop(0, pl.sky1); sky.addColorStop(1, pl.sky2);
+    ctx.fillStyle = sky; ctx.fillRect(0, 0, this.W, this._gY);
+
+    /* Stars */
+    for (const s of this._stars) {
+      ctx.beginPath(); ctx.arc(s.x * this.W, s.y * this._gY, s.r, 0, Math.PI * 2);
+      ctx.fillStyle = `rgba(255,255,255,${s.a})`; ctx.fill();
+    }
+
+    /* Ground */
+    const gnd = ctx.createLinearGradient(0, this._gY, 0, this.H);
+    gnd.addColorStop(0, pl.ground);
+    gnd.addColorStop(1, this._shade(pl.ground, 0.45));
+    ctx.fillStyle = gnd; ctx.fillRect(0, this._gY, this.W, this.H - this._gY);
+    ctx.strokeStyle = 'rgba(255,255,255,0.10)'; ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.moveTo(0, this._gY); ctx.lineTo(this.W, this._gY); ctx.stroke();
+
+    /* Wind arrow (visual, centred top) */
+    const lvl = this._levels[this.levelIdx];
+    if (lvl?.wind) {
+      const dir = lvl.wind > 0 ? 1 : -1;
+      const len = Math.min(Math.abs(lvl.wind) * 7, 70);
+      const wx  = this.W * 0.5, wy = 22;
+      ctx.strokeStyle = 'rgba(255,255,255,0.5)'; ctx.lineWidth = 2.5;
+      ctx.setLineDash([5, 3]);
+      ctx.beginPath(); ctx.moveTo(wx - dir * len / 2, wy); ctx.lineTo(wx + dir * len / 2, wy); ctx.stroke();
+      ctx.setLineDash([]);
+      const ax = wx + dir * len / 2;
+      ctx.fillStyle = 'rgba(255,255,255,0.5)';
+      ctx.beginPath(); ctx.moveTo(ax, wy); ctx.lineTo(ax - dir*9, wy-5); ctx.lineTo(ax - dir*9, wy+5); ctx.closePath(); ctx.fill();
+    }
+  }
+
+  _drawSlingshot() {
+    const ctx = this.ctx;
+    const sx = this._sX, sy = this._sY, gY = this._gY;
+    ctx.strokeStyle = '#6b3a1f'; ctx.lineWidth = 9; ctx.lineCap = 'round';
+    ctx.beginPath(); ctx.moveTo(sx, gY); ctx.lineTo(sx - 2, sy + 14); ctx.stroke();
+    ctx.beginPath(); ctx.moveTo(sx - 12, gY + 4); ctx.lineTo(sx - 18, sy - 12); ctx.stroke();
+    ctx.beginPath(); ctx.moveTo(sx + 12, gY + 4); ctx.lineTo(sx + 18, sy - 12); ctx.stroke();
+    ctx.fillStyle = '#4a2510';
+    ctx.beginPath(); ctx.arc(sx - 18, sy - 12, 5.5, 0, Math.PI * 2); ctx.fill();
+    ctx.beginPath(); ctx.arc(sx + 18, sy - 12, 5.5, 0, Math.PI * 2); ctx.fill();
+  }
+
+  _drawSlingshotRubber() {
+    const ctx = this.ctx;
+    const sx = this._sX, sy = this._sY;
+    const bx = (this._drag.pulling && this.bird) ? this._drag.mx : (this.bird ? this.bird.x : sx);
+    const by = (this._drag.pulling && this.bird) ? this._drag.my : (this.bird ? this.bird.y : sy);
+    ctx.strokeStyle = '#7a4020'; ctx.lineWidth = 3; ctx.lineCap = 'round';
+    ctx.beginPath(); ctx.moveTo(sx - 18, sy - 12); ctx.lineTo(bx, by); ctx.stroke();
+    ctx.beginPath(); ctx.moveTo(sx + 18, sy - 12); ctx.lineTo(bx, by); ctx.stroke();
+  }
+
+  _drawQueue() {
+    const birds = this.birdsLeft;
+    if (!birds.length) return;
+    const qy  = this._gY + 26;
+    const gap = 28;
+    const startX = this._sX + 30; // right of sling handle
+    for (let i = 0; i < Math.min(birds.length, 8); i++) {
+      const def = AB_BIRDS[birds[i]] || AB_BIRDS.normal;
+      this._drawBirdShape(startX + i * gap, qy, def.r * 0.6, def.color, 0.65);
+    }
+  }
+
+  _drawBird(bird) {
+    const ctx = this.ctx;
+    /* trail */
+    for (let i = 0; i < bird.trail.length; i++) {
+      const t = bird.trail[i];
+      ctx.beginPath(); ctx.arc(t.x, t.y, bird.r * 0.38, 0, Math.PI * 2);
+      ctx.fillStyle = `rgba(255,255,255,${(i / bird.trail.length) * 0.35})`; ctx.fill();
+    }
+    this._drawBirdShape(bird.x, bird.y, bird.r, bird.color, 1);
+  }
+
+  _drawBirdShape(x, y, r, color, alpha) {
+    const ctx = this.ctx;
+    ctx.save(); ctx.globalAlpha = alpha;
+    const g = ctx.createRadialGradient(x - r * 0.3, y - r * 0.35, r * 0.1, x, y, r);
+    g.addColorStop(0, this._lighten(color, 60)); g.addColorStop(1, color);
+    ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2);
+    ctx.fillStyle = g; ctx.fill();
+    ctx.strokeStyle = this._shade(color, 0.6); ctx.lineWidth = 1.5; ctx.stroke();
+    /* eyes */
+    ctx.fillStyle = '#fff';
+    ctx.beginPath(); ctx.arc(x + r * 0.26, y - r * 0.18, r * 0.24, 0, Math.PI * 2); ctx.fill();
+    ctx.fillStyle = '#1a1a1a';
+    ctx.beginPath(); ctx.arc(x + r * 0.33, y - r * 0.15, r * 0.11, 0, Math.PI * 2); ctx.fill();
+    /* eyebrow (angry) */
+    ctx.strokeStyle = '#333'; ctx.lineWidth = Math.max(1.5, r * 0.13); ctx.lineCap = 'round';
+    ctx.beginPath(); ctx.moveTo(x + r * 0.08, y - r * 0.4); ctx.lineTo(x + r * 0.52, y - r * 0.28); ctx.stroke();
+    ctx.restore();
+  }
+
+  _drawBlocks() {
+    const ctx = this.ctx;
+    for (const b of this.blocks) {
+      if (b.destroyed) continue;
+      const mat = AB_MATS[b.mat] || AB_MATS.wood;
+      const hp  = b.hp / b.maxHp;
+      ctx.save();
+      ctx.translate(b.x + b.w / 2, b.y + b.h / 2); ctx.rotate(b.angle);
+      ctx.fillStyle = mat.color; ctx.globalAlpha = 0.45 + hp * 0.55;
+      ctx.fillRect(-b.w / 2, -b.h / 2, b.w, b.h);
+      ctx.globalAlpha = 1;
+      ctx.strokeStyle = mat.border; ctx.lineWidth = 1.5;
+      ctx.strokeRect(-b.w / 2, -b.h / 2, b.w, b.h);
+      if (hp < 0.55) {
+        ctx.strokeStyle = `rgba(0,0,0,${(1 - hp) * 0.55})`; ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.moveTo(-b.w * 0.12, -b.h * 0.35); ctx.lineTo(b.w * 0.18, b.h * 0.12);
+        ctx.moveTo(b.w * 0.08, -b.h * 0.22);  ctx.lineTo(-b.w * 0.2, b.h * 0.3);
+        ctx.stroke();
+      }
+      ctx.restore();
+    }
+  }
+
+  _drawPigs() {
+    const ctx = this.ctx;
+    for (const p of this.pigs) {
+      if (p.destroyed) continue;
+      const flash = p.flash > 0;
+      ctx.save();
+      const grd = ctx.createRadialGradient(p.x - p.r * 0.3, p.y - p.r * 0.3, p.r * 0.1, p.x, p.y, p.r);
+      grd.addColorStop(0, flash ? '#ffcc44' : '#7bf5a4');
+      grd.addColorStop(1, flash ? '#ff6600' : '#22c55e');
+      ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
+      ctx.fillStyle = grd; ctx.fill();
+      ctx.strokeStyle = '#166534'; ctx.lineWidth = 2; ctx.stroke();
+      /* snout */
+      ctx.beginPath(); ctx.ellipse(p.x, p.y + p.r * 0.28, p.r * 0.38, p.r * 0.26, 0, 0, Math.PI * 2);
+      ctx.fillStyle = flash ? '#ffdd88' : '#4ade80'; ctx.fill();
+      ctx.fillStyle = '#166534';
+      ctx.beginPath(); ctx.arc(p.x - p.r * 0.13, p.y + p.r * 0.25, p.r * 0.07, 0, Math.PI * 2); ctx.fill();
+      ctx.beginPath(); ctx.arc(p.x + p.r * 0.13, p.y + p.r * 0.25, p.r * 0.07, 0, Math.PI * 2); ctx.fill();
+      /* eyes */
+      ctx.fillStyle = '#fff';
+      ctx.beginPath(); ctx.arc(p.x - p.r * 0.26, p.y - p.r * 0.1, p.r * 0.23, 0, Math.PI * 2); ctx.fill();
+      ctx.beginPath(); ctx.arc(p.x + p.r * 0.26, p.y - p.r * 0.1, p.r * 0.23, 0, Math.PI * 2); ctx.fill();
+      ctx.fillStyle = '#111';
+      ctx.beginPath(); ctx.arc(p.x - p.r * 0.22, p.y - p.r * 0.08, p.r * 0.1, 0, Math.PI * 2); ctx.fill();
+      ctx.beginPath(); ctx.arc(p.x + p.r * 0.3, p.y - p.r * 0.08, p.r * 0.1, 0, Math.PI * 2); ctx.fill();
+      /* HP bar */
+      if (p.hp < p.maxHp) {
+        const bw = p.r * 2.2, bh = 5, bx = p.x - bw / 2, by = p.y - p.r - 11;
+        ctx.fillStyle = 'rgba(0,0,0,0.45)'; ctx.fillRect(bx, by, bw, bh);
+        ctx.fillStyle = `hsl(${120 * p.hp / p.maxHp},88%,42%)`;
+        ctx.fillRect(bx, by, bw * p.hp / p.maxHp, bh);
+      }
+      ctx.restore();
+    }
+  }
+
+  _drawParticles() {
+    const ctx = this.ctx;
+    for (const p of this._particles) {
+      ctx.save(); ctx.globalAlpha = Math.max(0, p.life) * 0.88;
+      ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
+      ctx.fillStyle = p.color; ctx.fill(); ctx.restore();
+    }
+  }
+
+  _drawPreview() {
+    const ctx = this.ctx;
+    ctx.save();
+    for (const pt of this._previewPath) {
+      ctx.beginPath(); ctx.arc(pt.x, pt.y, 2.5, 0, Math.PI * 2);
+      ctx.fillStyle = `rgba(255,255,255,${pt.a * 0.55})`; ctx.fill();
+    }
+    ctx.restore();
+  }
+
+  _drawHUD() {
+    const ctx = this.ctx;
+    const pl  = this._planet();
+    const lvl = this._levels[this.levelIdx];
+
+    /* Score — top right */
+    ctx.font = 'bold 20px Manrope,sans-serif'; ctx.textAlign = 'right';
+    ctx.fillStyle = 'rgba(255,255,255,0.95)';
+    ctx.fillText(this.score.toLocaleString('ru') + ' очков', this.W - 14, 30);
+
+    /* Level — top left */
+    ctx.textAlign = 'left'; ctx.font = 'bold 15px Manrope,sans-serif';
+    ctx.fillStyle = 'rgba(255,255,255,0.9)';
+    ctx.fillText(`Уровень ${this.levelIdx + 1} / ${this._levels.length}`, 14, 30);
+
+    /* 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);
+
+    /* Wind reminder */
+    if (lvl?.wind) {
+      ctx.font = '12px Manrope,sans-serif'; ctx.fillStyle = 'rgba(255,255,255,0.65)';
+      ctx.fillText(`Ветер ${lvl.wind > 0 ? '→' : '←'} ${Math.abs(lvl.wind)} м/с`, 14, 66);
+    }
+
+    /* Active bird type label near sling */
+    if (this.bird && this.state === 'aim') {
+      const def = AB_BIRDS[this.bird.type] || AB_BIRDS.normal;
+      ctx.font = '12px Manrope,sans-serif'; ctx.textAlign = 'center';
+      ctx.fillStyle = 'rgba(255,255,255,0.7)';
+      ctx.fillText(def.label, this._sX, this._gY + 50);
+    }
+  }
+
+  _drawOverlay() {
+    const ctx = this.ctx;
+    const win = this.state === 'win';
+    ctx.fillStyle = win ? 'rgba(0,30,8,0.78)' : 'rgba(30,0,0,0.78)';
+    ctx.fillRect(0, 0, this.W, this.H);
+    const cx = this.W / 2, cy = this.H / 2;
+    ctx.textAlign = 'center';
+    ctx.font = 'bold 34px Manrope,sans-serif';
+    ctx.fillStyle = win ? '#7bf5a4' : '#ef476f';
+    ctx.fillText(win ? '✦ Уровень пройден!' : '✦ Попробуй ещё раз', cx, cy - 18);
+    ctx.font = '17px Manrope,sans-serif'; ctx.fillStyle = 'rgba(255,255,255,0.7)';
+    ctx.fillText(win ? `Очки: ${this.score.toLocaleString('ru')}` : 'Свиньи выжили!', cx, cy + 18);
+    ctx.font = '12px Manrope,sans-serif'; ctx.fillStyle = 'rgba(255,255,255,0.38)';
+    ctx.fillText('Выбери уровень или нажми «Сначала»', cx, cy + 48);
+  }
+
+  /* ── UTILS ───────────────────────────────────────────────────── */
+
+  _evt(e) {
+    const r = this.canvas.getBoundingClientRect();
+    return { x: e.clientX - r.left, y: e.clientY - r.top };
+  }
+
+  _expandHex(hex) {
+    // Expand 3-digit (#abc <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> #aabbcc)
+    if (/^#[0-9a-fA-F]{3}$/.test(hex))
+      hex = '#' + hex[1]+hex[1] + hex[2]+hex[2] + hex[3]+hex[3];
+    return hex;
+  }
+
+  _shade(hex, f) {
+    hex = this._expandHex(hex);
+    const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
+    return `rgb(${Math.floor(r*f)},${Math.floor(g*f)},${Math.floor(b*f)})`;
+  }
+
+  _lighten(hex, add) {
+    hex = this._expandHex(hex);
+    const r = Math.min(255, parseInt(hex.slice(1,3),16)+add);
+    const g = Math.min(255, parseInt(hex.slice(3,5),16)+add);
+    const b = Math.min(255, parseInt(hex.slice(5,7),16)+add);
+    return `rgb(${r},${g},${b})`;
+  }
+}
diff --git a/frontend/js/labs/bohratom.js b/frontend/js/labs/bohratom.js
new file mode 100644
index 0000000..cd61bf0
--- /dev/null
+++ b/frontend/js/labs/bohratom.js
@@ -0,0 +1,639 @@
+'use strict';
+/* ══════════════════════════════════════════════════════════════
+   BohrAtomSim — Bohr atomic model simulation (hydrogen)
+   E_n = −13.6 / n²  eV      λ = 1240 / ΔE  nm
+   Orbital animation · energy diagram · spectrum bar
+   ══════════════════════════════════════════════════════════════ */
+
+class BohrAtomSim {
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.ctx    = canvas.getContext('2d');
+    this.W = 0; this.H = 0;
+
+    /* physics */
+    this.level = 2;               // current energy level n (1–6)
+    this._angle = 0;              // electron orbital angle
+    this._lastTransition = null;  // { from, to, deltaE, wavelength, series }
+    this._emittedPhotons = [];    // wavelengths emitted so far
+
+    /* transition animation */
+    this._trans      = null;  // { from, to, t, dur, photon }
+    this._photons    = [];    // flying photon particles [{x,y,vx,vy,color,t,maxT}]
+
+    /* spectrum marks */
+    this._specMarks = [];     // wavelengths (nm)
+
+    /* animation */
+    this.playing = false;
+    this._raf    = null;
+    this._lastTs = null;
+
+    /* interaction */
+    this._hoverLevel = null;
+
+    this.onUpdate = null;
+
+    this._bindEvents();
+    new ResizeObserver(() => { this.fit(); this.draw(); }).observe(canvas.parentElement);
+  }
+
+  /* ── public API ─────────────────────────────── */
+
+  fit() {
+    const dpr = window.devicePixelRatio || 1;
+    const w = this.canvas.offsetWidth || 600;
+    const h = this.canvas.offsetHeight || 400;
+    this.canvas.width  = w * dpr;
+    this.canvas.height = h * dpr;
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this.W = w; this.H = h;
+  }
+
+  setParams({ level } = {}) {
+    if (level !== undefined) {
+      const n = Math.max(1, Math.min(6, Math.round(+level)));
+      if (n !== this.level) this.transition(this.level, n);
+    }
+    this.draw();
+    this._emit();
+  }
+
+  transition(from, to) {
+    from = Math.max(1, Math.min(6, Math.round(+from)));
+    to   = Math.max(1, Math.min(6, Math.round(+to)));
+    if (from === to) return;
+
+    const eFrom = -13.6 / (from * from);
+    const eTo   = -13.6 / (to * to);
+    const deltaE = Math.abs(eTo - eFrom);
+    const wl     = 1240 / deltaE;
+    const color  = this._wavelengthToColor(wl);
+    const series = this._seriesName(from, to);
+
+    this._lastTransition = { from, to, deltaE, wavelength: wl, series };
+
+    const isEmission = from > to;
+    if (isEmission) this._emittedPhotons.push(wl);
+
+    /* push spectrum mark */
+    if (!this._specMarks.includes(Math.round(wl))) {
+      this._specMarks.push(Math.round(wl));
+    }
+
+    /* start animation */
+    this._trans = {
+      from, to, t: 0, dur: 0.5,
+      color, wavelength: wl,
+      isEmission,
+    };
+
+    if (!this.playing) { this.playing = true; this._lastTs = null; this._tick(); }
+    this._emit();
+  }
+
+  preset(name) {
+    const presets = {
+      lyman_alpha:  { from: 2, to: 1 },
+      balmer_alpha: { from: 3, to: 2 },
+      balmer_beta:  { from: 4, to: 2 },
+      paschen:      { from: 4, to: 3 },
+    };
+    const p = presets[name];
+    if (!p) return;
+    this.level = p.from;
+    this.transition(p.from, p.to);
+  }
+
+  reset() {
+    this.pause();
+    this.level = 2;
+    this._angle = 0;
+    this._lastTransition = null;
+    this._emittedPhotons = [];
+    this._specMarks = [];
+    this._trans   = null;
+    this._photons = [];
+    this.draw();
+    this._emit();
+  }
+
+  play() {
+    if (this.playing) return;
+    this.playing = true;
+    this._lastTs = null;
+    this._tick();
+  }
+
+  pause() {
+    this.playing = false;
+    if (this._raf) { cancelAnimationFrame(this._raf); this._raf = null; }
+  }
+
+  start() { this.play(); }
+  stop()  { this.pause(); }
+
+  info() {
+    const n  = this.level;
+    const en = -13.6 / (n * n);
+    return {
+      level: n,
+      energy: +en.toFixed(4),
+      lastTransition: this._lastTransition ? { ...this._lastTransition } : null,
+      emittedPhotons: this._emittedPhotons.slice(),
+    };
+  }
+
+  /* ── internals ─────────────────────────────── */
+
+  _emit() { if (this.onUpdate) this.onUpdate(this.info()); }
+
+  _energyOf(n) { return -13.6 / (n * n); }
+
+  _seriesName(from, to) {
+    const lo = Math.min(from, to);
+    if (lo === 1) return 'Lyman';
+    if (lo === 2) return 'Balmer';
+    if (lo === 3) return 'Paschen';
+    if (lo === 4) return 'Brackett';
+    if (lo === 5) return 'Pfund';
+    return '';
+  }
+
+  _wavelengthToColor(nm) {
+    if (nm < 380) return '#9B5DE5';
+    if (nm > 780) return '#EF476F';
+    /* approximate visible spectrum */
+    let r = 0, g = 0, b = 0;
+    if (nm < 450) {
+      const t = (nm - 380) / 70;
+      r = (1 - t) * 0.6; g = 0; b = 1;
+    } else if (nm < 495) {
+      const t = (nm - 450) / 45;
+      r = 0; g = t; b = 1;
+    } else if (nm < 570) {
+      const t = (nm - 495) / 75;
+      r = t; g = 1; b = 1 - t;
+    } else if (nm < 590) {
+      const t = (nm - 570) / 20;
+      r = 1; g = 1 - t * 0.5; b = 0;
+    } else if (nm < 620) {
+      const t = (nm - 590) / 30;
+      r = 1; g = 0.5 - t * 0.5; b = 0;
+    } else {
+      const t = Math.min((nm - 620) / 160, 1);
+      r = 1; g = 0; b = 0;
+    }
+    const clamp = v => Math.max(0, Math.min(255, Math.round(v * 255)));
+    return `rgb(${clamp(r)},${clamp(g)},${clamp(b)})`;
+  }
+
+  /* ── tick / animate ────────────────────────── */
+
+  _tick() {
+    if (!this.playing) return;
+    this._raf = requestAnimationFrame(ts => {
+      if (this._lastTs === null) this._lastTs = ts;
+      const dt = Math.min((ts - this._lastTs) / 1000, 0.05);
+      this._lastTs = ts;
+
+      /* orbital motion — angular speed inversely proportional to n */
+      const omega = (2.5 / this.level);
+      this._angle += omega * dt * 2 * Math.PI;
+      if (this._angle > Math.PI * 2) this._angle -= Math.PI * 2;
+
+      /* transition animation */
+      if (this._trans) {
+        this._trans.t += dt;
+        if (this._trans.t >= this._trans.dur) {
+          this.level = this._trans.to;
+          /* spawn photon */
+          if (this._trans.isEmission) {
+            const cx = this.W * 0.325;
+            const cy = (this.H - 44) * 0.5;
+            const a  = this._angle;
+            const r  = this._orbitRadius(this._trans.to);
+            const ex = cx + r * Math.cos(a);
+            const ey = cy + r * Math.sin(a);
+            const pa = Math.random() * Math.PI * 2;
+            this._photons.push({
+              x: ex, y: ey,
+              vx: Math.cos(pa) * 120, vy: Math.sin(pa) * 120,
+              color: this._trans.color, t: 0, maxT: 1.2,
+            });
+          }
+          this._trans = null;
+          this._emit();
+        }
+      }
+
+      /* update photons */
+      for (const p of this._photons) {
+        p.x += p.vx * dt;
+        p.y += p.vy * dt;
+        p.t += dt;
+      }
+      this._photons = this._photons.filter(p => p.t < p.maxT);
+
+      this.draw();
+      this._tick();
+    });
+  }
+
+  /* ── geometry helpers ──────────────────────── */
+
+  _orbitRadius(n) {
+    const maxR = Math.min(this.W * 0.325, (this.H - 44) * 0.5) * 0.85;
+    return 18 + (n - 1) * (maxR - 18) / 5;
+  }
+
+  _diagramLevelY(n) {
+    /* energy diagram in right panel; map energy <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> y */
+    const panelTop = 30;
+    const panelBot = this.H - 74;
+    const eMin = -13.6;    // n=1
+    const eMax = -0.378;   // n=6
+    const en   = this._energyOf(n);
+    const t = (en - eMin) / (eMax - eMin);
+    return panelBot - t * (panelBot - panelTop);
+  }
+
+  /* ── draw ──────────────────────────────────── */
+
+  draw() {
+    const ctx = this.ctx, W = this.W, H = this.H;
+    if (!W || !H) return;
+
+    ctx.fillStyle = '#0D0D1A';
+    ctx.fillRect(0, 0, W, H);
+
+    const atomW = W * 0.65;
+    const panelX = atomW;
+    const specH = 44;  // spectrum bar height at bottom
+
+    /* divider */
+    ctx.fillStyle = 'rgba(255,255,255,0.06)';
+    ctx.fillRect(atomW - 1, 0, 2, H - specH);
+
+    this._drawAtom(ctx, atomW, H - specH);
+    this._drawEnergyDiagram(ctx, panelX, W, H - specH);
+    this._drawSpectrumBar(ctx, W, H, specH);
+    this._drawPhotons(ctx);
+  }
+
+  /* ── atom (left 65%) ───────────────────────── */
+
+  _drawAtom(ctx, aW, aH) {
+    const cx = aW * 0.5;
+    const cy = aH * 0.5;
+
+    /* nucleus glow */
+    const ng = ctx.createRadialGradient(cx, cy, 0, cx, cy, 20);
+    ng.addColorStop(0, 'rgba(255,220,80,0.9)');
+    ng.addColorStop(0.3, 'rgba(255,200,60,0.3)');
+    ng.addColorStop(1, 'rgba(255,200,60,0)');
+    ctx.fillStyle = ng;
+    ctx.beginPath(); ctx.arc(cx, cy, 20, 0, Math.PI * 2); ctx.fill();
+
+    /* nucleus dot */
+    ctx.fillStyle = '#FFD166';
+    ctx.beginPath(); ctx.arc(cx, cy, 4, 0, Math.PI * 2); ctx.fill();
+
+    /* orbitals */
+    for (let n = 1; n <= 6; n++) {
+      const r = this._orbitRadius(n);
+      const isCurrent = n === this._currentDisplayLevel();
+      const alpha = isCurrent ? 0.6 : 0.15;
+
+      ctx.strokeStyle = isCurrent ? '#06D6E0' : `rgba(255,255,255,${alpha})`;
+      ctx.lineWidth = isCurrent ? 2 : 1;
+      ctx.setLineDash(isCurrent ? [] : [4, 4]);
+      ctx.beginPath(); ctx.arc(cx, cy, r, 0, Math.PI * 2); ctx.stroke();
+      ctx.setLineDash([]);
+
+      /* label */
+      const en = this._energyOf(n);
+      ctx.font = "10px 'Manrope', system-ui, sans-serif";
+      ctx.fillStyle = isCurrent ? '#06D6E0' : 'rgba(255,255,255,0.35)';
+      ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
+      ctx.fillText(`n=${n}  ${en.toFixed(2)} eV`, cx + r + 6, cy - 4);
+    }
+
+    /* electron */
+    const eLevel = this._currentDisplayLevel();
+    let eAngle = this._angle;
+    let eR     = this._orbitRadius(eLevel);
+
+    /* during transition: interpolate radius */
+    if (this._trans) {
+      const prog = Math.min(this._trans.t / this._trans.dur, 1);
+      const ease = prog * prog * (3 - 2 * prog); // smoothstep
+      const rFrom = this._orbitRadius(this._trans.from);
+      const rTo   = this._orbitRadius(this._trans.to);
+      eR = rFrom + (rTo - rFrom) * ease;
+    }
+
+    const ex = cx + eR * Math.cos(eAngle);
+    const ey = cy + eR * Math.sin(eAngle);
+
+    /* electron glow */
+    const eg = ctx.createRadialGradient(ex, ey, 0, ex, ey, 14);
+    eg.addColorStop(0, 'rgba(6,214,224,0.8)');
+    eg.addColorStop(0.4, 'rgba(6,214,224,0.2)');
+    eg.addColorStop(1, 'rgba(6,214,224,0)');
+    ctx.fillStyle = eg;
+    ctx.beginPath(); ctx.arc(ex, ey, 14, 0, Math.PI * 2); ctx.fill();
+
+    /* electron dot */
+    ctx.fillStyle = '#06D6E0';
+    ctx.beginPath(); ctx.arc(ex, ey, 5, 0, Math.PI * 2); ctx.fill();
+    ctx.fillStyle = '#fff';
+    ctx.beginPath(); ctx.arc(ex - 1.5, ey - 1.5, 1.5, 0, Math.PI * 2); ctx.fill();
+
+    /* title */
+    ctx.font = "bold 13px 'Manrope', system-ui, sans-serif";
+    ctx.fillStyle = 'rgba(255,255,255,0.3)';
+    ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+    ctx.fillText('Модель атома Бора (водород)', aW * 0.5, 10);
+  }
+
+  _currentDisplayLevel() {
+    if (this._trans) return this._trans.from;
+    return this.level;
+  }
+
+  /* ── energy diagram (right 35%) ────────────── */
+
+  _drawEnergyDiagram(ctx, x0, W, pH) {
+    const pW = W - x0;
+    const pad = { l: 52, r: 16, t: 30, b: 20 };
+    const lineX0 = x0 + pad.l;
+    const lineX1 = W - pad.r;
+
+    /* panel bg */
+    ctx.fillStyle = 'rgba(5,5,20,0.85)';
+    ctx.fillRect(x0, 0, pW, pH);
+
+    /* title */
+    ctx.font = "10px 'Manrope', system-ui, sans-serif";
+    ctx.fillStyle = 'rgba(255,255,255,0.5)';
+    ctx.textAlign = 'left'; ctx.textBaseline = 'top';
+    ctx.fillText('Энергетические уровни', x0 + 10, 10);
+
+    /* draw each level */
+    for (let n = 1; n <= 6; n++) {
+      const y  = this._diagramLevelY(n);
+      const en = this._energyOf(n);
+      const isCurrent = n === this.level && !this._trans;
+
+      /* line */
+      ctx.strokeStyle = isCurrent ? '#06D6E0' : 'rgba(255,255,255,0.3)';
+      ctx.lineWidth = isCurrent ? 2.5 : 1.5;
+      ctx.beginPath(); ctx.moveTo(lineX0, y); ctx.lineTo(lineX1, y); ctx.stroke();
+
+      /* hover highlight */
+      if (this._hoverLevel === n && n !== this.level) {
+        ctx.strokeStyle = 'rgba(155,93,229,0.5)';
+        ctx.lineWidth = 2;
+        ctx.beginPath(); ctx.moveTo(lineX0, y); ctx.lineTo(lineX1, y); ctx.stroke();
+      }
+
+      /* n label (right) */
+      ctx.font = "11px 'Manrope', system-ui, sans-serif";
+      ctx.fillStyle = isCurrent ? '#06D6E0' : 'rgba(255,255,255,0.6)';
+      ctx.textAlign = 'right'; ctx.textBaseline = 'middle';
+      ctx.fillText(`n=${n}`, lineX0 - 4, y);
+
+      /* energy label (left of n) */
+      ctx.font = "9px 'Manrope', system-ui, sans-serif";
+      ctx.fillStyle = 'rgba(255,255,255,0.35)';
+      ctx.textAlign = 'right';
+      ctx.fillText(`${en.toFixed(2)}`, lineX0 - 30, y);
+
+      /* dot on current level */
+      if (isCurrent) {
+        ctx.fillStyle = '#06D6E0';
+        ctx.beginPath(); ctx.arc(lineX0 + 8, y, 4, 0, Math.PI * 2); ctx.fill();
+      }
+    }
+
+    /* transition arrow */
+    if (this._lastTransition) {
+      const lt = this._lastTransition;
+      const y1 = this._diagramLevelY(lt.from);
+      const y2 = this._diagramLevelY(lt.to);
+      const ax = (lineX0 + lineX1) * 0.5 + 10;
+      const col = this._wavelengthToColor(lt.wavelength);
+
+      ctx.strokeStyle = col;
+      ctx.lineWidth = 2;
+      ctx.setLineDash([]);
+      ctx.beginPath(); ctx.moveTo(ax, y1); ctx.lineTo(ax, y2); ctx.stroke();
+
+      /* arrowhead */
+      const dir = y2 > y1 ? 1 : -1;
+      ctx.fillStyle = col;
+      ctx.beginPath();
+      ctx.moveTo(ax, y2);
+      ctx.lineTo(ax - 5, y2 - dir * 8);
+      ctx.lineTo(ax + 5, y2 - dir * 8);
+      ctx.closePath(); ctx.fill();
+
+      /* ΔE and λ labels */
+      ctx.font = "10px 'Manrope', system-ui, sans-serif";
+      ctx.fillStyle = col;
+      ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
+      const midY = (y1 + y2) / 2;
+      ctx.fillText(`ΔE=${lt.deltaE.toFixed(2)} eV`, ax + 8, midY - 8);
+      ctx.fillText(`λ=${lt.wavelength.toFixed(1)} nm`, ax + 8, midY + 8);
+
+      /* series name */
+      if (lt.series) {
+        ctx.fillStyle = 'rgba(255,255,255,0.4)';
+        ctx.font = "9px 'Manrope', system-ui, sans-serif";
+        ctx.fillText(lt.series, ax + 8, midY + 22);
+      }
+    }
+  }
+
+  /* ── spectrum bar (bottom) ─────────────────── */
+
+  _drawSpectrumBar(ctx, W, H, barH) {
+    const y0 = H - barH;
+
+    /* background strip */
+    ctx.fillStyle = 'rgba(5,5,20,0.9)';
+    ctx.fillRect(0, y0, W, barH);
+
+    /* label */
+    ctx.font = "9px 'Manrope', system-ui, sans-serif";
+    ctx.fillStyle = 'rgba(255,255,255,0.35)';
+    ctx.textAlign = 'left'; ctx.textBaseline = 'top';
+    ctx.fillText('Спектр', 6, y0 + 2);
+
+    /* visible spectrum gradient */
+    const gradX0 = 50, gradX1 = W - 16;
+    const gradW = gradX1 - gradX0;
+    const gradY = y0 + 14, gradH = 16;
+    const nmMin = 380, nmMax = 780;
+
+    for (let px = 0; px < gradW; px++) {
+      const nm = nmMin + (px / gradW) * (nmMax - nmMin);
+      ctx.fillStyle = this._wavelengthToColor(nm);
+      ctx.globalAlpha = 0.6;
+      ctx.fillRect(gradX0 + px, gradY, 1, gradH);
+    }
+    ctx.globalAlpha = 1;
+
+    /* border */
+    ctx.strokeStyle = 'rgba(255,255,255,0.15)';
+    ctx.lineWidth = 1;
+    ctx.strokeRect(gradX0, gradY, gradW, gradH);
+
+    /* nm tick labels */
+    ctx.font = "8px 'Manrope', system-ui, sans-serif";
+    ctx.fillStyle = 'rgba(255,255,255,0.3)';
+    ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+    for (let nm = 400; nm <= 750; nm += 50) {
+      const px = gradX0 + ((nm - nmMin) / (nmMax - nmMin)) * gradW;
+      ctx.fillText(nm, px, gradY + gradH + 2);
+    }
+
+    /* UV / IR labels */
+    ctx.fillStyle = '#9B5DE5'; ctx.textAlign = 'right';
+    ctx.fillText('UV', gradX0 - 4, gradY + 4);
+    ctx.fillStyle = '#EF476F'; ctx.textAlign = 'left';
+    ctx.fillText('IR', gradX1 + 4, gradY + 4);
+
+    /* emission marks */
+    for (const wl of this._specMarks) {
+      let px;
+      if (wl < nmMin) {
+        px = gradX0 - 6;
+      } else if (wl > nmMax) {
+        px = gradX1 + 6;
+      } else {
+        px = gradX0 + ((wl - nmMin) / (nmMax - nmMin)) * gradW;
+      }
+
+      const col = this._wavelengthToColor(wl);
+      ctx.strokeStyle = col;
+      ctx.lineWidth = 2;
+      ctx.beginPath(); ctx.moveTo(px, gradY - 3); ctx.lineTo(px, gradY + gradH + 3); ctx.stroke();
+
+      /* tiny wavelength label above */
+      ctx.font = "7px 'Manrope', system-ui, sans-serif";
+      ctx.fillStyle = col;
+      ctx.textAlign = 'center'; ctx.textBaseline = 'bottom';
+      ctx.fillText(wl, px, gradY - 4);
+    }
+  }
+
+  /* ── flying photons ────────────────────────── */
+
+  _drawPhotons(ctx) {
+    for (const p of this._photons) {
+      const alpha = 1 - p.t / p.maxT;
+      const r = 4 + p.t * 6;
+
+      /* glow */
+      const g = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, r * 2);
+      g.addColorStop(0, p.color);
+      g.addColorStop(1, 'rgba(0,0,0,0)');
+      ctx.globalAlpha = alpha * 0.5;
+      ctx.fillStyle = g;
+      ctx.beginPath(); ctx.arc(p.x, p.y, r * 2, 0, Math.PI * 2); ctx.fill();
+
+      /* core */
+      ctx.globalAlpha = alpha;
+      ctx.fillStyle = p.color;
+      ctx.beginPath(); ctx.arc(p.x, p.y, r * 0.5, 0, Math.PI * 2); ctx.fill();
+
+      /* wavy trail */
+      ctx.strokeStyle = p.color;
+      ctx.lineWidth = 1;
+      ctx.globalAlpha = alpha * 0.4;
+      ctx.beginPath();
+      const len = 30;
+      const vMag = Math.hypot(p.vx, p.vy) || 1;
+      const dx = -p.vx / vMag, dy = -p.vy / vMag;
+      const nx = -dy, ny = dx;
+      for (let i = 0; i <= len; i++) {
+        const t = i / len;
+        const wx = p.x + dx * i * 1.5 + nx * Math.sin(t * 8 + p.t * 12) * 3;
+        const wy = p.y + dy * i * 1.5 + ny * Math.sin(t * 8 + p.t * 12) * 3;
+        i === 0 ? ctx.moveTo(wx, wy) : ctx.lineTo(wx, wy);
+      }
+      ctx.stroke();
+
+      ctx.globalAlpha = 1;
+    }
+  }
+
+  /* ── events ─────────────────────────────────── */
+
+  _bindEvents() {
+    const cv = this.canvas;
+
+    const getPos = (e) => {
+      const r = cv.getBoundingClientRect();
+      const t = e.touches ? e.touches[0] : e;
+      return {
+        mx: (t.clientX - r.left) * (this.W / r.width),
+        my: (t.clientY - r.top)  * (this.H / r.height),
+      };
+    };
+
+    const hitLevel = (mx, my) => {
+      /* check energy diagram area */
+      const panelX = this.W * 0.65;
+      if (mx < panelX) return null;
+
+      const pH = this.H - 44;
+      const pad = { l: 52, r: 16 };
+      const lineX0 = panelX + pad.l;
+      const lineX1 = this.W - pad.r;
+
+      for (let n = 1; n <= 6; n++) {
+        const y = this._diagramLevelY(n);
+        if (mx >= lineX0 - 10 && mx <= lineX1 + 10 && Math.abs(my - y) < 10) {
+          return n;
+        }
+      }
+      return null;
+    };
+
+    /* click on level <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> transition */
+    cv.addEventListener('click', e => {
+      const { mx, my } = getPos(e);
+      const n = hitLevel(mx, my);
+      if (n !== null && n !== this.level && !this._trans) {
+        this.transition(this.level, n);
+      }
+    });
+
+    /* hover cursor */
+    cv.addEventListener('mousemove', e => {
+      const { mx, my } = getPos(e);
+      const n = hitLevel(mx, my);
+      this._hoverLevel = n;
+      cv.style.cursor = (n !== null && n !== this.level) ? 'pointer' : 'default';
+    });
+
+    cv.addEventListener('mouseleave', () => {
+      this._hoverLevel = null;
+    });
+
+    /* touch tap */
+    cv.addEventListener('touchend', e => {
+      if (e.changedTouches.length !== 1) return;
+      const r = cv.getBoundingClientRect();
+      const mx = (e.changedTouches[0].clientX - r.left) * (this.W / r.width);
+      const my = (e.changedTouches[0].clientY - r.top)  * (this.H / r.height);
+      const n = hitLevel(mx, my);
+      if (n !== null && n !== this.level && !this._trans) {
+        this.transition(this.level, n);
+      }
+    });
+  }
+}
diff --git a/frontend/js/labs/brownian.js b/frontend/js/labs/brownian.js
new file mode 100644
index 0000000..4745bb2
--- /dev/null
+++ b/frontend/js/labs/brownian.js
@@ -0,0 +1,406 @@
+'use strict';
+
+/**
+ * BrownianSim v2 — Brownian Motion simulation.
+ * v2: age-gradient trail, MSD history chart, hover tooltip on big particle,
+ *     resetOrigin() method.
+ */
+class BrownianSim {
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.ctx    = canvas.getContext('2d');
+    this.W = 0; this.H = 0;
+    this.big   = { x: 0, y: 0, vx: 0, vy: 0, r: 22 };
+    this.small = [];
+    this.N     = 120;
+    this.T     = 1.0;
+    this.trail = [];
+    this._origin   = { x: 0, y: 0 };
+    this._steps    = 0;
+    this._raf      = null;
+    this.onUpdate  = null;
+    this._dpr      = 1;
+
+    // v2
+    this._msdHistory = [];  // [{step, msd}]
+    this._hover      = false;
+
+    canvas.addEventListener('mousemove',  e => this._onMouseMove(e));
+    canvas.addEventListener('mouseleave', () => { this._hover = false; });
+  }
+
+  _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),
+    };
+  }
+
+  _onMouseMove(e) {
+    const { x, y } = this._cp(e);
+    this._hover = Math.hypot(x - this.big.x, y - this.big.y) < this.big.r + 22;
+  }
+
+  // ── public API ──────────────────────────────────────────────────────────────
+  fit() {
+    const dpr = window.devicePixelRatio || 1;
+    this._dpr = dpr;
+    const w = this.canvas.offsetWidth, h = this.canvas.offsetHeight;
+    this.canvas.width  = w * dpr;
+    this.canvas.height = h * dpr;
+    this.W = w; this.H = h;
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this.reset();
+  }
+
+  reset() {
+    const { W, H } = this;
+    this.big    = { x: W / 2, y: H / 2, vx: 0, vy: 0, r: 22 };
+    this._origin = { x: W / 2, y: H / 2 };
+    this.trail   = [{ x: W / 2, y: H / 2 }];
+    this._steps  = 0;
+    this._msdHistory = [];
+
+    const small = [];
+    let att = 0;
+    while (small.length < this.N && att < this.N * 20) {
+      att++;
+      const r  = 4;
+      const x  = r + Math.random() * (W - 2 * r);
+      const y  = r + Math.random() * (H - 2 * r);
+      if (Math.hypot(x - W / 2, y - H / 2) < this.big.r + r + 8) continue;
+      const a = Math.random() * Math.PI * 2, s = this.T * 4.5;
+      small.push({ x, y, vx: Math.cos(a) * s, vy: Math.sin(a) * s, r });
+    }
+    this.small = small;
+  }
+
+  resetOrigin() {
+    this._origin = { x: this.big.x, y: this.big.y };
+    this._msdHistory = [];
+  }
+
+  setN(n) { this.N = Math.max(10, Math.min(300, n)); this.reset(); }
+
+  setT(t) {
+    const f = Math.sqrt(t / this.T);
+    for (const s of this.small) { s.vx *= f; s.vy *= f; }
+    this.T = t;
+  }
+
+  start() { if (!this._raf) this._raf = requestAnimationFrame(this._loop.bind(this)); }
+  stop()  { if (this._raf) { cancelAnimationFrame(this._raf); this._raf = null; } }
+
+  // ── simulation ──────────────────────────────────────────────────────────────
+  _loop() {
+    this._step(); this._step(); this._step();
+    this.draw();
+    this._raf = requestAnimationFrame(this._loop.bind(this));
+  }
+
+  _step() {
+    const { W, H, big, small } = this;
+
+    big.x += big.vx; big.y += big.vy;
+    if (big.x < big.r) { big.x = big.r; big.vx = Math.abs(big.vx); }
+    if (big.x > W - big.r) { big.x = W - big.r; big.vx = -Math.abs(big.vx); }
+    if (big.y < big.r) { big.y = big.r; big.vy = Math.abs(big.vy); }
+    if (big.y > H - big.r) { big.y = H - big.r; big.vy = -Math.abs(big.vy); }
+
+    for (const s of small) {
+      s.x += s.vx; s.y += s.vy;
+      if (s.x < s.r) { s.x = s.r; s.vx = Math.abs(s.vx); }
+      if (s.x > W - s.r) { s.x = W - s.r; s.vx = -Math.abs(s.vx); }
+      if (s.y < s.r) { s.y = s.r; s.vy = Math.abs(s.vy); }
+      if (s.y > H - s.r) { s.y = H - s.r; s.vy = -Math.abs(s.vy); }
+    }
+
+    // big vs small
+    const m1 = big.r * big.r;
+    for (const s of small) {
+      const dx = s.x - big.x, dy = s.y - big.y;
+      const dist = Math.hypot(dx, dy), md = big.r + s.r;
+      if (dist < md && dist > 0.001) {
+        const nx = dx / dist, ny = dy / dist;
+        const dvn = (big.vx - s.vx) * nx + (big.vy - s.vy) * ny;
+        if (dvn > 0) continue;
+        const m2 = s.r * s.r, imp = (2 * dvn) / (m1 + m2);
+        big.vx -= imp * m2 * nx; big.vy -= imp * m2 * ny;
+        s.vx   += imp * m1 * nx; s.vy   += imp * m1 * ny;
+        const ov = md - dist, f1 = m2 / (m1 + m2), f2 = m1 / (m1 + m2);
+        big.x -= nx * ov * f1; big.y -= ny * ov * f1;
+        s.x   += nx * ov * f2; s.y   += ny * ov * f2;
+      }
+    }
+
+    // small vs small — spatial grid
+    const cs = 10, cols = Math.ceil(W / cs) + 1;
+    const grid = new Map();
+    for (let i = 0; i < small.length; i++) {
+      const s = small[i];
+      const k = Math.floor(s.x / cs) + Math.floor(s.y / cs) * cols;
+      if (!grid.has(k)) grid.set(k, []);
+      grid.get(k).push(i);
+    }
+    const checked = new Set();
+    for (let i = 0; i < small.length; i++) {
+      const s1 = small[i];
+      const cx = Math.floor(s1.x / cs), cy = Math.floor(s1.y / cs);
+      for (let dcx = -1; dcx <= 1; dcx++) for (let dcy = -1; dcy <= 1; dcy++) {
+        const cell = grid.get((cx + dcx) + (cy + dcy) * cols);
+        if (!cell) continue;
+        for (const j of cell) {
+          if (j <= i) continue;
+          const pk = i * 10000 + j;
+          if (checked.has(pk)) continue;
+          checked.add(pk);
+          const s2 = small[j];
+          const dx = s2.x - s1.x, dy = s2.y - s1.y;
+          const d = Math.hypot(dx, dy), md = s1.r + s2.r;
+          if (d < md && d > 0.001) {
+            const nx = dx / d, ny = dy / d;
+            const dvn = (s1.vx - s2.vx) * nx + (s1.vy - s2.vy) * ny;
+            if (dvn < 0) continue;
+            s1.vx -= dvn * nx; s1.vy -= dvn * ny;
+            s2.vx += dvn * nx; s2.vy += dvn * ny;
+            const ov = (md - d) / 2;
+            s1.x -= nx * ov; s1.y -= ny * ov;
+            s2.x += nx * ov; s2.y += ny * ov;
+          }
+        }
+      }
+    }
+
+    // Trail
+    if (this._steps % 2 === 0) {
+      this.trail.push({ x: big.x, y: big.y });
+      if (this.trail.length > 600) this.trail.shift();
+    }
+
+    // MSD history
+    if (this._steps % 6 === 0) {
+      const dx = big.x - this._origin.x, dy = big.y - this._origin.y;
+      this._msdHistory.push({ step: this._steps, msd: dx * dx + dy * dy });
+      if (this._msdHistory.length > 250) this._msdHistory.shift();
+    }
+
+    this._steps++;
+    if (this._steps % 40 === 0 && this.onUpdate) this.onUpdate(this.info());
+  }
+
+  info() {
+    const dx = this.big.x - this._origin.x, dy = this.big.y - this._origin.y;
+    return {
+      steps:        this._steps,
+      displacement: Math.hypot(dx, dy).toFixed(1),
+      msd:          (dx * dx + dy * dy).toFixed(0),
+      speed:        Math.hypot(this.big.vx, this.big.vy).toFixed(2),
+      N: this.N, T: this.T,
+    };
+  }
+
+  // ── drawing ─────────────────────────────────────────────────────────────────
+  draw() {
+    const { ctx, W, H } = this;
+    const TAU = Math.PI * 2;
+
+    const bg = ctx.createRadialGradient(W / 2, H / 2, 0, W / 2, H / 2, Math.max(W, H) * 0.7);
+    bg.addColorStop(0, '#080818'); bg.addColorStop(1, '#03030C');
+    ctx.fillStyle = bg; ctx.fillRect(0, 0, W, H);
+
+    // Dot grid
+    ctx.fillStyle = 'rgba(255,255,255,0.025)';
+    for (let x = 0; x < W; x += 30) for (let y = 0; y < H; y += 30) {
+      ctx.beginPath(); ctx.arc(x, y, 1, 0, TAU); ctx.fill();
+    }
+
+    // MSD history chart (bottom-left)
+    this._drawMsdChart(ctx, W, H);
+
+    // Age-gradient trail
+    const trail = this.trail;
+    for (let i = 1; i < trail.length; i++) {
+      const frac = i / trail.length;
+      // young <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> gold (#FFD166), old <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> dark indigo
+      const hue = 220 + (1 - frac) * 20;   // 220..240 — indigo <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> blue
+      const sat = 60 + frac * 40;
+      const lit = 20 + frac * 50;
+      ctx.beginPath();
+      ctx.arc(trail[i].x, trail[i].y, 1.5, 0, TAU);
+      ctx.fillStyle = `hsla(${hue},${sat}%,${lit}%,${frac * 0.75})`;
+      ctx.fill();
+    }
+    // Newest segment in gold
+    if (trail.length > 2) {
+      const t0 = trail[trail.length - 2], t1 = trail[trail.length - 1];
+      ctx.strokeStyle = 'rgba(255,209,102,0.9)'; ctx.lineWidth = 2;
+      ctx.beginPath(); ctx.moveTo(t0.x, t0.y); ctx.lineTo(t1.x, t1.y); ctx.stroke();
+    }
+
+    // Displacement vector
+    const ox = this._origin.x, oy = this._origin.y;
+    const bx = this.big.x,    by = this.big.y;
+    const vlen = Math.hypot(bx - ox, by - oy);
+    if (vlen > 2) {
+      ctx.save();
+      ctx.strokeStyle = 'rgba(255,100,100,0.6)'; ctx.lineWidth = 1.5;
+      ctx.beginPath(); ctx.moveTo(ox, oy); ctx.lineTo(bx, by); ctx.stroke();
+      const ang = Math.atan2(by - oy, bx - ox), hl = 8;
+      ctx.fillStyle = 'rgba(255,100,100,0.6)';
+      ctx.beginPath(); ctx.moveTo(bx, by);
+      ctx.lineTo(bx - hl * Math.cos(ang - 0.4), by - hl * Math.sin(ang - 0.4));
+      ctx.lineTo(bx - hl * Math.cos(ang + 0.4), by - hl * Math.sin(ang + 0.4));
+      ctx.closePath(); ctx.fill();
+      const mx = (ox + bx) / 2, my = (oy + by) / 2;
+      ctx.fillStyle = 'rgba(255,140,140,0.85)';
+      ctx.font = "10px 'Manrope', sans-serif";
+      ctx.fillText(`|Δr| = ${vlen.toFixed(1)}`, mx + 6, my - 4);
+      ctx.restore();
+    }
+
+    // Origin marker
+    ctx.save();
+    ctx.strokeStyle = 'rgba(255,100,100,0.35)'; ctx.lineWidth = 1;
+    ctx.setLineDash([3, 3]);
+    ctx.beginPath(); ctx.arc(ox, oy, 6, 0, TAU); ctx.stroke();
+    ctx.setLineDash([]);
+    ctx.restore();
+
+    // Small particles
+    ctx.save();
+    ctx.shadowBlur = 4; ctx.shadowColor = '#4CC9F0'; ctx.fillStyle = '#4CC9F0';
+    for (const s of this.small) {
+      ctx.beginPath(); ctx.arc(s.x, s.y, s.r, 0, TAU); ctx.fill();
+    }
+    ctx.restore();
+
+    // Big particle
+    const big = this.big;
+    ctx.save();
+    ctx.shadowBlur = 32; ctx.shadowColor = 'rgba(255,214,0,0.65)';
+    const grad = ctx.createRadialGradient(
+      big.x - big.r * 0.3, big.y - big.r * 0.3, 2,
+      big.x, big.y, big.r
+    );
+    grad.addColorStop(0, '#FFD166'); grad.addColorStop(1, '#9B5DE5');
+    ctx.fillStyle = grad;
+    ctx.beginPath(); ctx.arc(big.x, big.y, big.r, 0, TAU); ctx.fill();
+
+    // Hover ring
+    if (this._hover) {
+      ctx.shadowBlur = 0;
+      ctx.strokeStyle = 'rgba(255,255,255,0.55)'; ctx.lineWidth = 2;
+      ctx.beginPath(); ctx.arc(big.x, big.y, big.r + 4, 0, TAU); ctx.stroke();
+    }
+
+    ctx.shadowBlur = 0;
+    ctx.strokeStyle = 'rgba(255,255,255,0.3)'; ctx.lineWidth = 1.5;
+    ctx.beginPath(); ctx.arc(big.x, big.y, big.r, 0, TAU); ctx.stroke();
+
+    ctx.fillStyle = 'white'; ctx.font = "bold 12px 'Manrope', sans-serif";
+    ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+    ctx.fillText('B', big.x, big.y);
+    ctx.restore();
+
+    // Hover tooltip
+    if (this._hover) this._drawBigTooltip(ctx, W, H);
+  }
+
+  _drawMsdChart(ctx, W, H) {
+    const hist = this._msdHistory;
+    const chartW = 190, chartH = 90;
+    const cx = 14, cy = H - chartH - 14;
+
+    ctx.save();
+    ctx.fillStyle = 'rgba(0,0,10,0.72)';
+    ctx.beginPath(); ctx.roundRect(cx, cy, chartW, chartH, 8); ctx.fill();
+    ctx.strokeStyle = 'rgba(255,255,255,0.07)'; ctx.lineWidth = 1;
+    ctx.stroke();
+
+    ctx.fillStyle = 'rgba(255,255,255,0.6)'; ctx.font = "9px 'Manrope', sans-serif";
+    ctx.textAlign = 'left'; ctx.textBaseline = 'top';
+    ctx.fillText('MSD vs Шагов', cx + 8, cy + 7);
+
+    if (hist.length > 2) {
+      const padL = 8, padR = 10, padT = 20, padB = 8;
+      const pw = chartW - padL - padR;
+      const ph = chartH - padT - padB;
+      const maxMsd = Math.max(...hist.map(h => h.msd), 1);
+
+      ctx.strokeStyle = '#9B5DE5'; ctx.lineWidth = 1.5;
+      ctx.beginPath();
+      for (let i = 0; i < hist.length; i++) {
+        const hx = cx + padL + (i / (hist.length - 1)) * pw;
+        const hy = cy + padT + ph - (hist[i].msd / maxMsd) * ph;
+        if (i === 0) ctx.moveTo(hx, hy); else ctx.lineTo(hx, hy);
+      }
+      ctx.stroke();
+
+      // Theoretical linear MSD ~ D*t line (straight reference)
+      const lastMsd  = hist[hist.length - 1].msd;
+      const firstMsd = hist[0].msd;
+      ctx.strokeStyle = 'rgba(255,209,102,0.5)'; ctx.lineWidth = 1;
+      ctx.setLineDash([4, 4]);
+      ctx.beginPath();
+      ctx.moveTo(cx + padL, cy + padT + ph - (firstMsd / maxMsd) * ph);
+      ctx.lineTo(cx + padL + pw, cy + padT + ph - (lastMsd / maxMsd) * ph);
+      ctx.stroke();
+      ctx.setLineDash([]);
+
+      // Current value
+      const last = hist[hist.length - 1];
+      ctx.fillStyle = '#9B5DE5'; ctx.font = "bold 10px 'Manrope', sans-serif";
+      ctx.textAlign = 'right'; ctx.textBaseline = 'middle';
+      ctx.fillText(last.msd.toFixed(0), cx + chartW - padR - 2,
+        cy + padT + ph - (last.msd / maxMsd) * ph);
+    } else {
+      ctx.fillStyle = 'rgba(255,255,255,0.3)'; ctx.font = "10px 'Manrope', sans-serif";
+      ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+      ctx.fillText('Накапливается…', cx + chartW / 2, cy + chartH / 2);
+    }
+
+    ctx.restore();
+  }
+
+  _drawBigTooltip(ctx, W, H) {
+    const big  = this.big;
+    const spd  = Math.hypot(big.vx, big.vy);
+    const ke   = 0.5 * big.r * big.r * spd * spd; // prop to mass (r²)
+    const dx   = big.x - this._origin.x, dy = big.y - this._origin.y;
+    const disp = Math.hypot(dx, dy);
+    const msd  = dx * dx + dy * dy;
+
+    const rows = [
+      ['|v|',  spd.toFixed(2) + ' у.е.'],
+      ['KE',   ke.toFixed(0)  + ' у.е.'],
+      ['|Δr|', disp.toFixed(1) + ' px'],
+      ['MSD',  msd.toFixed(0) + ' px²'],
+    ];
+
+    const tw = 142, th = 18 + rows.length * 17 + 8;
+    let tx = big.x + big.r + 12, ty = big.y - th / 2;
+    if (tx + tw > W - 10) tx = big.x - big.r - tw - 12;
+    ty = Math.max(8, Math.min(H - th - 8, ty));
+
+    ctx.save();
+    ctx.fillStyle = 'rgba(6,8,28,0.93)';
+    ctx.beginPath(); ctx.roundRect(tx, ty, tw, th, 8); ctx.fill();
+    ctx.fillStyle = '#FFD166';
+    ctx.beginPath(); ctx.roundRect(tx, ty, tw, 3, [8, 8, 0, 0]); ctx.fill();
+    ctx.strokeStyle = 'rgba(255,255,255,0.08)'; ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.roundRect(tx, ty, tw, th, 8); ctx.stroke();
+
+    ctx.font = "11px 'Manrope', monospace"; ctx.textBaseline = 'middle';
+    for (let i = 0; i < rows.length; i++) {
+      const ry = ty + 18 + i * 17;
+      ctx.fillStyle = 'rgba(255,255,255,0.42)'; ctx.textAlign = 'left';
+      ctx.fillText(rows[i][0], tx + 10, ry);
+      ctx.fillStyle = 'rgba(255,255,255,0.9)'; ctx.textAlign = 'right';
+      ctx.fillText(rows[i][1], tx + tw - 10, ry);
+    }
+    ctx.restore();
+  }
+}
+
+if (typeof module !== 'undefined') module.exports = BrownianSim;
diff --git a/frontend/js/labs/celldivision.js b/frontend/js/labs/celldivision.js
new file mode 100644
index 0000000..6a76b7a
--- /dev/null
+++ b/frontend/js/labs/celldivision.js
@@ -0,0 +1,815 @@
+'use strict';
+/* ════════════════════════════════════════════════════════════════
+   CellDivisionSim v2 — интерактивное деление клетки
+   Митоз и мейоз · анимация · частицы · скрабинг · клик
+   ════════════════════════════════════════════════════════════════ */
+
+class CellDivisionSim {
+
+  static MITOSIS_PHASES = [
+    { id: 'interphase',  label: 'Интерфаза',  chromN: '2n = 46', dna: '2C → 4C', dur: 6000,
+      desc: 'G1+S+G2: клетка растёт, ДНК удваивается в S-периоде' },
+    { id: 'prophase',    label: 'Профаза',    chromN: '2n = 46', dna: '4C',       dur: 4500,
+      desc: 'Хромосомы конденсируются · ядерная оболочка разрушается · формируется веретено' },
+    { id: 'metaphase',   label: 'Метафаза',   chromN: '2n = 46', dna: '4C',       dur: 3500,
+      desc: 'Хромосомы на метафазной пластинке · нити веретена у кинетохор' },
+    { id: 'anaphase',    label: 'Анафаза',    chromN: '4n = 92', dna: '4C',       dur: 3000,
+      desc: 'Хроматиды расходятся к полюсам · клетка вытягивается' },
+    { id: 'telophase',   label: 'Телофаза',   chromN: '2n = 46', dna: '4C',       dur: 3000,
+      desc: 'Два ядра восстанавливаются · хромосомы деконденсируются' },
+    { id: 'cytokinesis', label: 'Цитокинез',  chromN: '2n = 46', dna: '2C',       dur: 3500,
+      desc: 'Цитоплазма делится · 2 дочерних диплоидных клетки (2n = 46)' },
+  ];
+
+  static MEIOSIS_PHASES = [
+    { id: 'interphase',  label: 'Интерфаза',   chromN: '2n = 46', dna: '2C → 4C', dur: 4000,
+      desc: 'Репликация ДНК перед делением' },
+    { id: 'prophase1',   label: 'Профаза I',   chromN: '2n = 46', dna: '4C',       dur: 5000,
+      desc: 'Конъюгация гомологов · кроссинговер — рекомбинация генов' },
+    { id: 'metaphase1',  label: 'Метафаза I',  chromN: '2n = 46', dna: '4C',       dur: 3000,
+      desc: 'Биваленты (пары гомологов) выстраиваются по экватору' },
+    { id: 'anaphase1',   label: 'Анафаза I',   chromN: '2n = 46', dna: '4C',       dur: 3000,
+      desc: 'Гомологичные хромосомы расходятся к полюсам' },
+    { id: 'telophase1',  label: 'Телофаза I',  chromN: 'n = 23',  dna: '2C',       dur: 2500,
+      desc: 'Два гаплоидных ядра · хромосомы ещё с сестринскими хроматидами' },
+    { id: 'prophase2',   label: 'Профаза II',  chromN: 'n = 23',  dna: '2C',       dur: 2000,
+      desc: 'Без репликации ДНК · начало второго деления' },
+    { id: 'metaphase2',  label: 'Метафаза II', chromN: 'n = 23',  dna: '2C',       dur: 2500,
+      desc: 'Хромосомы на экваторе · нити веретена к хроматидам' },
+    { id: 'anaphase2',   label: 'Анафаза II',  chromN: 'n = 23',  dna: '2C',       dur: 2500,
+      desc: 'Хроматиды расходятся к полюсам' },
+    { id: 'telophase2',  label: 'Телофаза II', chromN: 'n = 23',  dna: 'C',        dur: 2500,
+      desc: 'Четыре гаплоидных ядра формируются' },
+    { id: 'cytokinesis', label: 'Цитокинез',   chromN: 'n = 23',  dna: 'C',        dur: 3000,
+      desc: '4 гаплоидные клетки — гаметы (n = 23)' },
+  ];
+
+  static C = {
+    bg:       '#070711',
+    cell:     'rgba(34,211,153,0.055)',
+    cellStr:  '#22d399',
+    nucFill:  'rgba(122,77,210,0.09)',
+    nucStr:   '#9B5DE5',
+    chromatin:'#06D6E0',
+    ch:       ['#EF476F','#FF9F1C','#9B5DE5','#06D6E0','#F15BB5','#7BF5A4'],
+    spindle:  'rgba(255,214,0,0.55)',
+    pole:     '#FFD166',
+    furrow:   '#22d399',
+    crossing: '#FFD166',
+    progress: '#22d399',
+  };
+
+  constructor(canvas) {
+    this.canvas    = canvas;
+    this.ctx       = canvas.getContext('2d');
+    this.mode      = 'mitosis';
+    this._phaseIdx = 0;
+    this._phaseT   = 0;
+    this._autoPlay = true;
+    this._speed    = 1.0;
+    this._raf      = null;
+    this._last     = 0;
+    this._time     = 0;
+    this.W = 0; this.H = 0;
+    this.onUpdate  = null;
+    this._chromatinDots = [];
+    this._particles     = [];
+    this._draggingBar   = false;
+    this._bindEvents();
+    this.fit();
+  }
+
+  /* ── Lifecycle ──────────────────────────────────────────────── */
+
+  fit() {
+    const dpr = window.devicePixelRatio || 1;
+    const W   = this.canvas.offsetWidth  || 700;
+    const H   = this.canvas.offsetHeight || 440;
+    this.canvas.width  = Math.round(W * dpr);
+    this.canvas.height = Math.round(H * dpr);
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this.W = W; this.H = H;
+    this._genChromatinDots();
+    if (!this._raf) this._draw();
+  }
+
+  start() {
+    if (this._raf) return;
+    this._last = performance.now();
+    const loop = t => { this._raf = requestAnimationFrame(loop); this._tick(t); };
+    this._raf = requestAnimationFrame(loop);
+  }
+
+  stop()  { cancelAnimationFrame(this._raf); this._raf = null; }
+
+  reset() {
+    this._phaseIdx = 0;
+    this._phaseT   = 0;
+    this._particles = [];
+    this._emitUpdate();
+    if (!this._raf) this._draw();
+  }
+
+  setMode(mode) { this.mode = mode; this.reset(); }
+  setSpeed(s)   { this._speed = s; }
+
+  nextPhase() {
+    const phases = this._phases();
+    this._phaseIdx = (this._phaseIdx + 1) % phases.length;
+    this._phaseT   = 0;
+    this._particles = [];
+    this._emitUpdate();
+    if (!this._raf) this._draw();
+  }
+
+  prevPhase() {
+    const phases = this._phases();
+    this._phaseIdx = (this._phaseIdx - 1 + phases.length) % phases.length;
+    this._phaseT   = 0;
+    this._particles = [];
+    this._emitUpdate();
+    if (!this._raf) this._draw();
+  }
+
+  jumpToPhase(idx) {
+    const phases = this._phases();
+    this._phaseIdx = Math.max(0, Math.min(phases.length - 1, idx));
+    this._phaseT   = 0;
+    this._particles = [];
+    this._emitUpdate();
+    if (!this._raf) this._draw();
+  }
+
+  toggleAutoPlay() {
+    this._autoPlay = !this._autoPlay;
+    if (this._autoPlay && !this._raf) this.start();
+    return this._autoPlay;
+  }
+
+  info() {
+    const phases = this._phases();
+    const p = phases[this._phaseIdx];
+    return { phase: p.label, chromN: p.chromN, dna: p.dna,
+             index: this._phaseIdx, total: phases.length,
+             progress: this._phaseT, mode: this.mode };
+  }
+
+  /* ── Events ─────────────────────────────────────────────────── */
+
+  _bindEvents() {
+    const c = this.canvas;
+    const getBarT = e => {
+      const rect = c.getBoundingClientRect();
+      return Math.max(0, Math.min(1, (e.clientX - rect.left - 14) / (this.W - 28)));
+    };
+
+    c.addEventListener('click', e => {
+      const rect = c.getBoundingClientRect();
+      if (e.clientY - rect.top < this.H - 28) this.nextPhase();
+    });
+
+    c.addEventListener('mousedown', e => {
+      const rect = c.getBoundingClientRect();
+      if (e.clientY - rect.top >= this.H - 28) {
+        this._draggingBar = true;
+        this._phaseT = getBarT(e);
+        if (!this._raf) this._draw();
+      }
+    });
+    c.addEventListener('mousemove', e => {
+      const rect = c.getBoundingClientRect();
+      c.style.cursor = (e.clientY - rect.top >= this.H - 28) ? 'col-resize' : 'pointer';
+      if (this._draggingBar) { this._phaseT = getBarT(e); if (!this._raf) this._draw(); }
+    });
+    c.addEventListener('mouseup',    () => { this._draggingBar = false; });
+    c.addEventListener('mouseleave', () => { this._draggingBar = false; });
+
+    c.setAttribute('tabindex', '0');
+    c.addEventListener('keydown', e => {
+      if (e.code === 'Space')       { e.preventDefault(); this.toggleAutoPlay(); }
+      if (e.key  === 'ArrowRight')  { e.preventDefault(); this.nextPhase(); }
+      if (e.key  === 'ArrowLeft')   { e.preventDefault(); this.prevPhase(); }
+    });
+  }
+
+  /* ── Internals ──────────────────────────────────────────────── */
+
+  _phases() {
+    return this.mode === 'meiosis'
+      ? CellDivisionSim.MEIOSIS_PHASES
+      : CellDivisionSim.MITOSIS_PHASES;
+  }
+
+  _emitUpdate() {
+    if (this.onUpdate) this.onUpdate(this.info());
+  }
+
+  _ease(t) {
+    return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+  }
+
+  _genChromatinDots() {
+    const { W, H } = this;
+    const cx = W / 2, cy = H / 2;
+    const nr = Math.min(W, H) * 0.17;
+    this._chromatinDots = Array.from({ length: 52 }, (_, i) => {
+      // stable seeded positions
+      const seed = i * 1337 + 42;
+      const a  = ((seed * 9301 + 49297) % 233280) / 233280 * Math.PI * 2;
+      const r  = ((seed * 4321  + 12345) % 233280) / 233280 * nr * 0.88;
+      const sz = 1.4 + ((seed * 2341 + 7777) % 233280) / 233280 * 2.5;
+      const ph = ((seed * 6543 + 3210) % 233280) / 233280 * Math.PI * 2;
+      return { x: cx + Math.cos(a) * r, y: cy + Math.sin(a) * r * 0.85, size: sz, phase: ph };
+    });
+  }
+
+  _spawnEnvelopeParticles(cx, cy, nucR) {
+    for (let i = 0; i < 32; i++) {
+      const a  = Math.random() * Math.PI * 2;
+      const r  = nucR * (0.88 + Math.random() * 0.18);
+      this._particles.push({
+        x: cx + Math.cos(a) * r, y: cy + Math.sin(a) * r * 0.9,
+        vx: Math.cos(a) * (0.8 + Math.random() * 1.8),
+        vy: Math.sin(a) * (0.8 + Math.random() * 1.8),
+        life: 1, decay: 0.016 + Math.random() * 0.018,
+        size: 2 + Math.random() * 3, color: '#9B5DE5',
+      });
+    }
+  }
+
+  /* ── Tick ───────────────────────────────────────────────────── */
+
+  _tick(t) {
+    const dt = Math.min(t - this._last, 80);
+    this._last = t;
+    this._time += dt;
+
+    if (this._autoPlay && !this._draggingBar) {
+      const phases = this._phases();
+      const phase  = phases[this._phaseIdx];
+      this._phaseT += (dt / phase.dur) * this._speed;
+
+      // nuclear envelope breakdown particles
+      if ((phase.id === 'prophase' || phase.id === 'prophase1') &&
+          this._phaseT > 0.34 && this._phaseT < 0.38 && this._particles.length < 5) {
+        const cellR = Math.min(this.W, this.H) * 0.37;
+        this._spawnEnvelopeParticles(this.W / 2, this.H / 2, cellR * 0.46);
+      }
+
+      if (this._phaseT >= 1) {
+        this._phaseT   = 0;
+        this._phaseIdx = (this._phaseIdx + 1) % phases.length;
+        this._particles = [];
+        this._emitUpdate();
+      }
+    }
+
+    this._particles = this._particles.filter(p => {
+      p.x += p.vx; p.y += p.vy; p.vx *= 0.94; p.vy *= 0.94;
+      p.life -= p.decay; return p.life > 0;
+    });
+
+    this._emitUpdate();
+    this._draw();
+  }
+
+  /* ── Drawing ────────────────────────────────────────────────── */
+
+  _draw() {
+    const { ctx, W, H } = this;
+    const C  = CellDivisionSim.C;
+    const t  = this._phaseT;
+    const phases = this._phases();
+    const phase  = phases[this._phaseIdx];
+    const cx = W / 2, cy = H / 2;
+    const cellR  = Math.min(W, H) * 0.37;
+    const nucR   = cellR * 0.46;
+
+    ctx.fillStyle = C.bg;
+    ctx.fillRect(0, 0, W, H);
+
+    // subtle radial bg
+    const bg2 = ctx.createRadialGradient(cx, cy, 0, cx, cy, cellR * 1.5);
+    bg2.addColorStop(0, 'rgba(34,211,153,0.022)');
+    bg2.addColorStop(1, 'transparent');
+    ctx.fillStyle = bg2;
+    ctx.fillRect(0, 0, W, H);
+
+    switch (phase.id) {
+      case 'interphase':  this._drawInterphase(cx, cy, cellR, nucR, t); break;
+      case 'prophase':
+      case 'prophase1':   this._drawProphase(cx, cy, cellR, nucR, t, phase.id === 'prophase1'); break;
+      case 'metaphase':
+      case 'metaphase1':  this._drawMetaphase(cx, cy, cellR, t, phase.id === 'metaphase1', false); break;
+      case 'prophase2':   this._drawProphase2(cx, cy, cellR, nucR, t); break;
+      case 'metaphase2':  this._drawMetaphase(cx, cy, cellR, t, false, true); break;
+      case 'anaphase':    this._drawAnaphase(cx, cy, cellR, t, false, false); break;
+      case 'anaphase1':   this._drawAnaphase(cx, cy, cellR, t, true,  false); break;
+      case 'anaphase2':   this._drawAnaphase(cx, cy, cellR, t, false, true);  break;
+      case 'telophase':   this._drawTelophase(cx, cy, cellR, nucR, t, false, false); break;
+      case 'telophase1':  this._drawTelophase(cx, cy, cellR, nucR, t, true,  false); break;
+      case 'telophase2':  this._drawTelophase(cx, cy, cellR, nucR, t, false, true);  break;
+      case 'cytokinesis': this._drawCytokinesis(cx, cy, cellR, nucR, t); break;
+    }
+
+    this._drawParticles();
+    this._drawOverlay(phase);
+    this._drawProgressBar();
+    this._drawHint();
+  }
+
+  /* ── Cell / nucleus ─────────────────────────────────────────── */
+
+  _cellPath(cx, cy, rx, ry, wobble) {
+    const ctx = this.ctx, N = 48;
+    ctx.beginPath();
+    for (let i = 0; i <= N; i++) {
+      const a = (i / N) * Math.PI * 2;
+      const w = (wobble || 0) * (Math.sin(a * 3 + this._time * 0.00075) * 0.6 +
+                                  Math.sin(a * 5 + this._time * 0.00055) * 0.4);
+      ctx.lineTo(cx + Math.cos(a) * (rx + rx * w),
+                 cy + Math.sin(a) * ((ry || rx * 0.88) + (ry || rx * 0.88) * w));
+    }
+    ctx.closePath();
+  }
+
+  _drawCell(cx, cy, rx, ry, wobble, alpha) {
+    const ctx = this.ctx, C = CellDivisionSim.C;
+    ctx.save();
+    ctx.globalAlpha = alpha !== undefined ? alpha : 1;
+    this._cellPath(cx, cy, rx, ry, wobble !== undefined ? wobble : 0.013);
+    ctx.shadowColor = C.cellStr; ctx.shadowBlur = 20;
+    ctx.fillStyle   = C.cell; ctx.fill();
+    ctx.shadowBlur  = 0;
+    ctx.strokeStyle = C.cellStr; ctx.lineWidth = 2.2;
+    ctx.globalAlpha *= 0.65; ctx.stroke();
+    ctx.restore();
+  }
+
+  _drawNucleus(cx, cy, rx, ry, alpha) {
+    const ctx = this.ctx, C = CellDivisionSim.C;
+    ctx.save(); ctx.globalAlpha = alpha;
+    ctx.beginPath(); ctx.ellipse(cx, cy, rx, ry || rx * 0.9, 0, 0, Math.PI * 2);
+    ctx.shadowColor = C.nucStr; ctx.shadowBlur = 16;
+    ctx.fillStyle   = C.nucFill; ctx.fill();
+    ctx.shadowBlur  = 0; ctx.setLineDash([3, 3]);
+    ctx.strokeStyle = C.nucStr; ctx.lineWidth = 1.6; ctx.stroke();
+    ctx.setLineDash([]); ctx.restore();
+  }
+
+  /* ── Chromosome ─────────────────────────────────────────────── */
+
+  _drawChromosome(x, y, size, angle, color, sister, alpha) {
+    const ctx = this.ctx;
+    ctx.save();
+    if (alpha !== undefined) ctx.globalAlpha = alpha;
+    ctx.translate(x, y); ctx.rotate(angle);
+    const aw = size * 0.20, ah = size * 0.50, gap = size * 0.11;
+    const offsets = sister ? [-gap, gap] : [0];
+    ctx.shadowColor = color; ctx.shadowBlur = 10;
+    for (const ox of offsets) {
+      ctx.save(); ctx.translate(ox, 0);
+      ctx.beginPath();
+      ctx.moveTo(0, -gap * 0.5);
+      ctx.bezierCurveTo(-aw * 1.1, -ah * 0.35, -aw * 1.3, -ah * 0.75, 0, -ah);
+      ctx.bezierCurveTo( aw * 1.3, -ah * 0.75,  aw * 1.1, -ah * 0.35, 0, -gap * 0.5);
+      ctx.moveTo(0, gap * 0.5);
+      ctx.bezierCurveTo(-aw * 1.1,  ah * 0.35, -aw * 1.3,  ah * 0.75, 0,  ah);
+      ctx.bezierCurveTo( aw * 1.3,  ah * 0.75,  aw * 1.1,  ah * 0.35, 0,  gap * 0.5);
+      ctx.fillStyle = color; ctx.fill();
+      ctx.restore();
+    }
+    ctx.shadowColor = '#fff'; ctx.shadowBlur = 6;
+    ctx.beginPath(); ctx.arc(0, 0, size * 0.12, 0, Math.PI * 2);
+    ctx.fillStyle = '#fff'; ctx.fill();
+    ctx.restore();
+  }
+
+  _chrPairs(cx, cy, r) {
+    const ch = CellDivisionSim.C.ch;
+    return [
+      { x: cx - r * 0.50, y: cy - r * 0.28, angle: -0.20, color: ch[0] },
+      { x: cx - r * 0.15, y: cy - r * 0.35, angle:  0.15, color: ch[1] },
+      { x: cx + r * 0.28, y: cy - r * 0.20, angle:  0.28, color: ch[2] },
+      { x: cx - r * 0.38, y: cy + r * 0.22, angle:  0.18, color: ch[3] },
+      { x: cx + r * 0.12, y: cy + r * 0.32, angle: -0.22, color: ch[4] },
+      { x: cx + r * 0.48, y: cy + r * 0.18, angle: -0.10, color: ch[5] },
+    ];
+  }
+
+  _chrPairsHaploid(cx, cy, r) {
+    const ch = CellDivisionSim.C.ch;
+    return [
+      { x: cx - r * 0.36, y: cy - r * 0.24, angle: -0.18, color: ch[0] },
+      { x: cx + r * 0.08, y: cy - r * 0.08, angle:  0.12, color: ch[2] },
+      { x: cx + r * 0.32, y: cy + r * 0.26, angle:  0.28, color: ch[4] },
+    ];
+  }
+
+  /* ── Spindle ────────────────────────────────────────────────── */
+
+  _drawSpindle(cx, cy, cellR, alpha, chrs) {
+    const ctx = this.ctx, C = CellDivisionSim.C;
+    ctx.save(); ctx.globalAlpha = alpha;
+    const poleY = cellR * 0.72;
+    const poles = [{ x: cx, y: cy - poleY }, { x: cx, y: cy + poleY }];
+
+    // aster rays
+    for (const pole of poles) {
+      for (let i = 0; i < 10; i++) {
+        const a = (i / 10) * Math.PI * 2;
+        ctx.beginPath(); ctx.moveTo(pole.x, pole.y);
+        ctx.lineTo(pole.x + Math.cos(a) * 16, pole.y + Math.sin(a) * 16);
+        ctx.strokeStyle = 'rgba(255,214,0,0.28)'; ctx.lineWidth = 0.8; ctx.stroke();
+      }
+    }
+    // fibers
+    if (chrs) {
+      for (const ch of chrs) {
+        for (const pole of poles) {
+          ctx.beginPath(); ctx.moveTo(pole.x, pole.y);
+          ctx.quadraticCurveTo(cx + (ch.x - cx) * 0.18, (pole.y + ch.y) / 2, ch.x, ch.y);
+          ctx.strokeStyle = C.spindle; ctx.lineWidth = 0.9; ctx.stroke();
+        }
+      }
+    }
+    // pole dots
+    for (const p of poles) {
+      ctx.shadowColor = C.pole; ctx.shadowBlur = 14;
+      ctx.beginPath(); ctx.arc(p.x, p.y, 5, 0, Math.PI * 2);
+      ctx.fillStyle = C.pole; ctx.fill();
+    }
+    ctx.restore();
+  }
+
+  /* ── Phase renderers ────────────────────────────────────────── */
+
+  _drawInterphase(cx, cy, cellR, nucR, t) {
+    const ctx = this.ctx, C = CellDivisionSim.C;
+    const te = this._ease(t);
+    this._drawCell(cx, cy, cellR);
+    this._drawNucleus(cx, cy, nucR, nucR * 0.9, 1);
+
+    const dots = this._chromatinDots;
+    ctx.save();
+    for (let i = 0; i < dots.length; i++) {
+      const d = dots[i];
+      const pulse = 0.35 + 0.25 * Math.sin(d.phase + this._time * 0.0015);
+      ctx.globalAlpha = pulse;
+      ctx.beginPath(); ctx.arc(d.x, d.y, d.size * 0.72, 0, Math.PI * 2);
+      ctx.shadowColor = C.chromatin; ctx.shadowBlur = 5;
+      ctx.fillStyle = C.chromatin; ctx.fill();
+      // replication copies
+      if (te > 0.45 && i < Math.floor(((te - 0.45) / 0.55) * dots.length)) {
+        ctx.globalAlpha = ((te - 0.45) / 0.55) * 0.5;
+        ctx.beginPath(); ctx.arc(d.x + 3.5, d.y + 2, d.size * 0.62, 0, Math.PI * 2);
+        ctx.shadowColor = '#FFD166'; ctx.fillStyle = '#FFD166'; ctx.fill();
+      }
+    }
+    ctx.restore();
+    if (t > 0.42) {
+      const a = Math.min(1, (t - 0.42) * 7);
+      ctx.save(); ctx.globalAlpha = a;
+      ctx.font = 'bold 11px Manrope,sans-serif';
+      ctx.shadowColor = '#FFD166'; ctx.shadowBlur = 8;
+      ctx.fillStyle = '#FFD166'; ctx.textAlign = 'center';
+      ctx.fillText('S-период: репликация ДНК', cx, cy + nucR + 26);
+      ctx.restore();
+    }
+  }
+
+  _drawProphase(cx, cy, cellR, nucR, t, isMeiosis1) {
+    const ctx = this.ctx, C = CellDivisionSim.C;
+    const te = this._ease(t);
+    this._drawCell(cx, cy, cellR);
+    this._drawNucleus(cx, cy, nucR, nucR * 0.9, 1 - te * 0.95);
+    if (te > 0.28) {
+      this._drawSpindle(cx, cy, cellR, (te - 0.28) / 0.72 * 0.6);
+    }
+    const chrs = this._chrPairs(cx, cy, cellR * 0.27);
+    const size  = 11 + te * 15;
+    if (isMeiosis1) {
+      for (let i = 0; i < chrs.length; i++) {
+        const ch = chrs[i];
+        const off = (1 - te) * 9 * (i % 2 === 0 ? 1 : -1);
+        this._drawChromosome(ch.x + off, ch.y, size, ch.angle, ch.color, true);
+        if (te > 0.52) {
+          const ca = (te - 0.52) / 0.48;
+          ctx.save(); ctx.globalAlpha = ca * 0.88;
+          ctx.shadowColor = C.crossing; ctx.shadowBlur = 10;
+          ctx.beginPath(); ctx.arc(ch.x, ch.y, size * 0.55, 0, Math.PI * 2);
+          ctx.strokeStyle = C.crossing; ctx.lineWidth = 2; ctx.stroke();
+          ctx.restore();
+        }
+      }
+      if (te > 0.52) {
+        const ca = (te - 0.52) / 0.48;
+        ctx.save(); ctx.globalAlpha = ca;
+        ctx.shadowColor = '#FFD166'; ctx.shadowBlur = 8;
+        ctx.font = 'bold 11px Manrope,sans-serif';
+        ctx.fillStyle = '#FFD166'; ctx.textAlign = 'center';
+        ctx.fillText('Кроссинговер — рекомбинация', cx, cy + cellR * 0.72);
+        ctx.restore();
+      }
+    } else {
+      for (const ch of chrs) this._drawChromosome(ch.x, ch.y, size, ch.angle, ch.color, true);
+    }
+  }
+
+  _drawProphase2(cx, cy, cellR, nucR, t) {
+    const te = this._ease(t);
+    this._drawCell(cx, cy, cellR * 0.9);
+    this._drawNucleus(cx, cy, nucR * 0.75, nucR * 0.67, 1 - te * 0.85);
+    const chrs = this._chrPairsHaploid(cx, cy, cellR * 0.22);
+    const size = 14 + te * 9;
+    if (te > 0.3) this._drawSpindle(cx, cy, cellR * 0.9, (te - 0.3) / 0.7 * 0.55);
+    for (const ch of chrs) this._drawChromosome(ch.x, ch.y, size, ch.angle, ch.color, true);
+  }
+
+  _drawMetaphase(cx, cy, cellR, t, isMeiosis1, isHaploid) {
+    const ctx = this.ctx, C = CellDivisionSim.C;
+    const te = this._ease(t);
+    this._drawCell(cx, cy, cellR);
+
+    ctx.save();
+    ctx.setLineDash([5, 5]);
+    ctx.strokeStyle = `rgba(255,255,255,${0.14 + te * 0.12})`;
+    ctx.lineWidth = 1.5;
+    ctx.beginPath();
+    ctx.moveTo(cx - cellR * 0.82, cy); ctx.lineTo(cx + cellR * 0.82, cy);
+    ctx.stroke(); ctx.setLineDash([]); ctx.restore();
+
+    const ch = C.ch;
+    const sp = cellR * 0.55;
+
+    if (isHaploid) {
+      const pos = [
+        { x: cx - sp * 0.42, y: cy, angle: -0.05 },
+        { x: cx,              y: cy, angle:  0.0  },
+        { x: cx + sp * 0.42, y: cy, angle:  0.05 },
+      ];
+      this._drawSpindle(cx, cy, cellR, 0.75 + te * 0.25, pos);
+      for (let i = 0; i < pos.length; i++)
+        this._drawChromosome(pos[i].x, pos[i].y, 21, pos[i].angle, ch[i * 2], true);
+    } else if (isMeiosis1) {
+      const pos = [
+        { x: cx - sp * 0.54, y: cy, angle: -0.08 }, { x: cx - sp * 0.17, y: cy, angle:  0.04 },
+        { x: cx + sp * 0.17, y: cy, angle: -0.04 }, { x: cx + sp * 0.54, y: cy, angle:  0.08 },
+        { x: cx - sp * 0.35, y: cy, angle:  0.12 }, { x: cx + sp * 0.35, y: cy, angle: -0.12 },
+      ];
+      this._drawSpindle(cx, cy, cellR, 0.8 + te * 0.2, pos);
+      for (let i = 0; i < pos.length; i++) {
+        this._drawChromosome(pos[i].x - 5, pos[i].y, 19, pos[i].angle,       ch[i % 6],       true);
+        this._drawChromosome(pos[i].x + 5, pos[i].y, 19, pos[i].angle + 0.25, ch[(i + 3) % 6], true);
+      }
+    } else {
+      const pos = [
+        { x: cx - sp * 0.54, y: cy, angle: -0.08 }, { x: cx - sp * 0.28, y: cy, angle:  0.04 },
+        { x: cx - sp * 0.04, y: cy, angle: -0.02 }, { x: cx + sp * 0.04, y: cy, angle:  0.02 },
+        { x: cx + sp * 0.28, y: cy, angle: -0.04 }, { x: cx + sp * 0.54, y: cy, angle:  0.08 },
+      ];
+      this._drawSpindle(cx, cy, cellR, 0.8 + te * 0.2, pos);
+      for (let i = 0; i < 6; i++)
+        this._drawChromosome(pos[i].x, pos[i].y, 22, pos[i].angle, ch[i], true);
+    }
+  }
+
+  _drawAnaphase(cx, cy, cellR, t, isMeiosis1, isHaploid) {
+    const ctx = this.ctx, C = CellDivisionSim.C;
+    const te = this._ease(t);
+    const stretchY = 1 + te * 0.38;
+    ctx.save();
+    ctx.translate(cx, cy); ctx.scale(1, stretchY); ctx.translate(-cx, -cy);
+    this._drawCell(cx, cy, cellR * (1 - te * 0.04));
+    ctx.restore();
+
+    const poleOffset = cellR * 0.7 * te;
+    const topY = cy - poleOffset, botY = cy + poleOffset;
+    this._drawSpindle(cx, cy, cellR, 1 - te * 0.3);
+
+    const ch = C.ch, sp = cellR * (isHaploid ? 0.32 : 0.44);
+    const n = isHaploid ? 3 : 6;
+    for (let i = 0; i < n; i++) {
+      const ox = (i - (n - 1) / 2) * sp * (isHaploid ? 0.5 : 0.34);
+      const ang = (i - (n - 1) / 2) * 0.07;
+      if (isMeiosis1) {
+        this._drawChromosome(cx + ox, topY, 20, ang, ch[i], true);
+        this._drawChromosome(cx + ox, botY, 20, ang, ch[(i + 3) % 6], true);
+      } else {
+        const ci = isHaploid ? i * 2 : i;
+        this._drawChromosome(cx + ox, topY, isHaploid ? 17 : 18, ang, ch[ci % 6], false);
+        this._drawChromosome(cx + ox, botY, isHaploid ? 17 : 18, ang, ch[ci % 6], false);
+      }
+    }
+  }
+
+  _drawTelophase(cx, cy, cellR, nucR, t, isMeiosis1, isHaploid) {
+    const ctx = this.ctx, C = CellDivisionSim.C;
+    const te = this._ease(t);
+    const sep = cellR * 0.44;
+
+    ctx.save();
+    ctx.translate(cx, cy); ctx.scale(1, 1.30 - te * 0.12); ctx.translate(-cx, -cy);
+    this._drawCell(cx, cy, cellR);
+    ctx.restore();
+
+    for (const s of [-1, 1])
+      this._drawNucleus(cx, cy + s * sep, nucR * 0.72, nucR * 0.65, te);
+
+    const ch = C.ch, size = 20 * (1 - te * 0.78);
+    const alpha = 1 - te * 0.88, sp = cellR * (isHaploid ? 0.22 : 0.34);
+    const n = isHaploid ? 3 : 6;
+    for (let i = 0; i < n; i++) {
+      const ox = (i - (n - 1) / 2) * sp * (isHaploid ? 0.5 : 0.26);
+      const ci = isHaploid ? i * 2 : i;
+      ctx.save(); ctx.globalAlpha = alpha;
+      if (isMeiosis1) {
+        this._drawChromosome(cx + ox, cy - sep, size, 0, ch[ci % 6], true);
+        this._drawChromosome(cx + ox, cy + sep, size, 0, ch[(ci + 3) % 6], true);
+      } else {
+        this._drawChromosome(cx + ox, cy - sep, size, 0, ch[ci % 6], false);
+        this._drawChromosome(cx + ox, cy + sep, size, 0, ch[ci % 6], false);
+      }
+      ctx.restore();
+    }
+
+    if (te > 0.45) {
+      const fa = (te - 0.45) / 0.55;
+      ctx.save(); ctx.globalAlpha = fa * 0.6;
+      ctx.setLineDash([7, 5]);
+      ctx.shadowColor = C.furrow; ctx.shadowBlur = 10;
+      ctx.strokeStyle = C.furrow; ctx.lineWidth = 2;
+      ctx.beginPath();
+      ctx.moveTo(cx - cellR * 0.7, cy); ctx.lineTo(cx + cellR * 0.7, cy);
+      ctx.stroke(); ctx.setLineDash([]); ctx.restore();
+    }
+  }
+
+  _drawCytokinesis(cx, cy, cellR, nucR, t) {
+    const ctx = this.ctx, C = CellDivisionSim.C;
+    const te = this._ease(t);
+
+    if (te < 0.80) {
+      const pinch = te;
+      ctx.save();
+      ctx.beginPath();
+      for (let i = 0; i <= 48; i++) {
+        const a = (i / 48) * Math.PI * 2;
+        const s2 = Math.abs(Math.cos(a));
+        const waist = 1 - pinch * Math.max(0, 1 - s2 * 2.2) * 0.90;
+        ctx.lineTo(cx + Math.cos(a) * cellR * waist,
+                   cy + Math.sin(a) * cellR * 0.88 * (1 + pinch * 0.09));
+      }
+      ctx.closePath();
+      ctx.shadowColor = C.cellStr; ctx.shadowBlur = 16;
+      ctx.fillStyle = C.cell; ctx.fill(); ctx.shadowBlur = 0;
+      ctx.strokeStyle = C.cellStr; ctx.lineWidth = 2.2;
+      ctx.globalAlpha = 0.68; ctx.stroke(); ctx.restore();
+
+      ctx.save(); ctx.globalAlpha = pinch * 0.85;
+      ctx.shadowColor = C.furrow; ctx.shadowBlur = 14;
+      ctx.strokeStyle = C.furrow; ctx.lineWidth = 2.5;
+      ctx.beginPath();
+      ctx.moveTo(cx - cellR * (1 - pinch * 0.92), cy);
+      ctx.lineTo(cx + cellR * (1 - pinch * 0.92), cy);
+      ctx.stroke(); ctx.restore();
+    } else {
+      const appear = (te - 0.80) / 0.20;
+      const sepY = cellR * 0.52;
+      for (const s of [-1, 1])
+        this._drawCell(cx, cy + s * sepY * 0.54, cellR * 0.65, cellR * 0.57, 0.01, 0.5 + appear * 0.5);
+    }
+
+    const sep = cellR * 0.50;
+    for (const s of [-1, 1])
+      this._drawNucleus(cx, cy + s * sep * 0.52, nucR * 0.68, nucR * 0.61, Math.min(1, te * 1.5));
+
+    if (te > 0.72) {
+      const a = (te - 0.72) / 0.28;
+      ctx.save(); ctx.globalAlpha = a;
+      ctx.shadowColor = '#22d399'; ctx.shadowBlur = 12;
+      ctx.font = 'bold 12px Manrope,sans-serif';
+      ctx.fillStyle = '#22d399'; ctx.textAlign = 'center';
+      ctx.fillText(
+        this.mode === 'meiosis' ? '4 гаплоидные клетки (n = 23)' : '2 диплоидные клетки (2n = 46)',
+        cx, cy + cellR * 0.88);
+      ctx.restore();
+    }
+  }
+
+  /* ── Particles ──────────────────────────────────────────────── */
+
+  _drawParticles() {
+    const ctx = this.ctx;
+    for (const p of this._particles) {
+      ctx.save();
+      ctx.globalAlpha = p.life * 0.82;
+      ctx.shadowColor = p.color; ctx.shadowBlur = 8;
+      ctx.beginPath(); ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
+      ctx.fillStyle = p.color; ctx.fill();
+      ctx.restore();
+    }
+  }
+
+  /* ── UI overlays ────────────────────────────────────────────── */
+
+  _drawOverlay(phase) {
+    const ctx = this.ctx;
+    const { W, H } = this;
+
+    // phase name pill — top right
+    ctx.save();
+    ctx.font = 'bold 14px Manrope,sans-serif';
+    const tw = ctx.measureText(phase.label).width;
+    _cdRRect(ctx, W - tw - 30, 12, tw + 22, 28, 8);
+    ctx.shadowColor = '#22d399'; ctx.shadowBlur = 14;
+    ctx.fillStyle = 'rgba(34,211,153,0.12)'; ctx.fill(); ctx.shadowBlur = 0;
+    ctx.strokeStyle = 'rgba(34,211,153,0.38)'; ctx.lineWidth = 1; ctx.stroke();
+    ctx.fillStyle = '#22d399'; ctx.textAlign = 'left';
+    ctx.fillText(phase.label, W - tw - 19, 30);
+    ctx.restore();
+
+    // chromN + DNA — bottom left
+    ctx.save();
+    ctx.font = '11px Manrope,sans-serif'; ctx.textAlign = 'left';
+    ctx.fillStyle = 'rgba(6,214,224,0.78)';
+    ctx.fillText('n: ' + phase.chromN, 14, H - 46);
+    ctx.fillStyle = 'rgba(255,214,0,0.78)';
+    ctx.fillText('ДНК: ' + phase.dna, 14, H - 32);
+    ctx.restore();
+
+    // description — bottom right
+    ctx.save();
+    ctx.font = '10.5px Manrope,sans-serif';
+    ctx.fillStyle = 'rgba(255,255,255,0.36)';
+    ctx.textAlign = 'right';
+    const maxW = W * 0.5;
+    const words = phase.desc.split(' ');
+    let line = '', lines = [];
+    for (const w of words) {
+      const test = line + (line ? ' ' : '') + w;
+      if (ctx.measureText(test).width > maxW && line) { lines.push(line); line = w; }
+      else line = test;
+    }
+    if (line) lines.push(line);
+    lines.forEach((l, i) => ctx.fillText(l, W - 14, H - 46 + i * 14));
+    ctx.restore();
+  }
+
+  _drawProgressBar() {
+    const ctx = this.ctx;
+    const { W, H } = this;
+    const C = CellDivisionSim.C;
+    const phases = this._phases();
+    const bx = 14, bw = W - 28, by = H - 14, bh = 4;
+    const total = (this._phaseIdx + this._phaseT) / phases.length;
+
+    _cdRRect(ctx, bx, by - bh / 2, bw, bh, 2);
+    ctx.fillStyle = 'rgba(255,255,255,0.07)'; ctx.fill();
+
+    if (total > 0) {
+      _cdRRect(ctx, bx, by - bh / 2, bw * total, bh, 2);
+      ctx.shadowColor = C.progress; ctx.shadowBlur = 8;
+      ctx.fillStyle = C.progress; ctx.fill(); ctx.shadowBlur = 0;
+    }
+
+    // phase tick marks
+    for (let i = 1; i < phases.length; i++) {
+      const tx = bx + bw * (i / phases.length);
+      ctx.fillStyle = 'rgba(255,255,255,0.22)';
+      ctx.fillRect(tx - 0.5, by - bh, 1, bh * 2);
+    }
+
+    // status
+    ctx.save();
+    ctx.font = '10px Manrope,sans-serif';
+    ctx.fillStyle = 'rgba(255,255,255,0.3)';
+    ctx.textAlign = 'left';
+    ctx.fillText(this._autoPlay ? '> авто' : '|| пауза', bx, H - 22);
+    ctx.restore();
+  }
+
+  _drawHint() {
+    if (this._time >= 4500) return;
+    const a = Math.min(1, this._time / 600) * Math.max(0, 1 - (this._time - 3200) / 1300);
+    const ctx = this.ctx;
+    ctx.save();
+    ctx.globalAlpha = a * 0.42;
+    ctx.font = '10.5px Manrope,sans-serif';
+    ctx.fillStyle = '#fff'; ctx.textAlign = 'center';
+    ctx.fillText('Клик — следующая фаза  ·  тяни полосу внизу  ·  Space — пауза', this.W / 2, this.H - 26);
+    ctx.restore();
+  }
+}
+
+function _cdRRect(ctx, x, y, w, h, r) {
+  if (w <= 0 || h <= 0) return;
+  r = Math.min(r, w / 2, h / 2);
+  ctx.beginPath();
+  ctx.moveTo(x + r, y);
+  ctx.arcTo(x + w, y, x + w, y + h, r);
+  ctx.arcTo(x + w, y + h, x, y + h, r);
+  ctx.arcTo(x, y + h, x, y, r);
+  ctx.arcTo(x, y, x + w, y, r);
+  ctx.closePath();
+}
diff --git a/frontend/js/labs/chemsandbox.js b/frontend/js/labs/chemsandbox.js
new file mode 100644
index 0000000..6c2a06b
--- /dev/null
+++ b/frontend/js/labs/chemsandbox.js
@@ -0,0 +1,1670 @@
+'use strict';
+/* ════════════════════════════════════════════════════════════════
+   ChemSandboxSim v2 — «Химическая песочница»
+   • Колба Эрленмейера с реалистичным стеклом
+   • Анимация вливания реагента сверху
+   • Удаление отдельного реагента из зоны
+   • Drag реагентов с полки
+   • Визуальные эффекты: осадки, газы, смена цвета, нагрев
+   ════════════════════════════════════════════════════════════════ */
+
+class ChemSandboxSim {
+
+  /* ── База веществ ─────────────────────────────────────────────── */
+
+  static SUBSTANCES = {
+    'HCl':     { name: 'Соляная к-та',       state: 'aq', color: '#78D278', cat: 'acid' },
+    'H2SO4':   { name: 'Серная к-та',        state: 'aq', color: '#D2C378', cat: 'acid' },
+    'HNO3':    { name: 'Азотная к-та',       state: 'aq', color: '#E8D060', cat: 'acid' },
+    'CH3COOH': { name: 'Уксусная к-та',     state: 'aq', color: '#C8E0A0', cat: 'acid' },
+    'NaOH':    { name: 'Гидроксид натрия',   state: 'aq', color: '#7BF5A4', cat: 'base' },
+    'KOH':     { name: 'Гидроксид калия',    state: 'aq', color: '#7BF5A4', cat: 'base' },
+    'Ca(OH)2': { name: 'Гидроксид кальция',  state: 'aq', color: '#E0E0E0', cat: 'base' },
+    'NH3·H2O': { name: 'Аммиачная вода',     state: 'aq', color: '#A0D8F0', cat: 'base' },
+    'NaCl':    { name: 'Хлорид натрия',      state: 's',  color: '#FFFFFF', cat: 'salt' },
+    'CuSO4':   { name: 'Сульфат меди',       state: 'aq', color: '#4CC9F0', cat: 'salt' },
+    'BaCl2':   { name: 'Хлорид бария',       state: 'aq', color: '#E0E0E0', cat: 'salt' },
+    'AgNO3':   { name: 'Нитрат серебра',     state: 'aq', color: '#E0E0E0', cat: 'salt' },
+    'Na2CO3':  { name: 'Карбонат натрия',    state: 'aq', color: '#E0E0E0', cat: 'salt' },
+    'FeCl3':   { name: 'Хлорид железа(III)', state: 'aq', color: '#D4A040', cat: 'salt' },
+    'Pb(NO3)2':{ name: 'Нитрат свинца',      state: 'aq', color: '#E0E0E0', cat: 'salt' },
+    'K2CrO4':  { name: 'Хромат калия',       state: 'aq', color: '#FFD700', cat: 'salt' },
+    'Zn':      { name: 'Цинк',              state: 's',  color: '#9BB8CC', cat: 'metal' },
+    'Fe':      { name: 'Железо',             state: 's',  color: '#A08060', cat: 'metal' },
+    'Cu':      { name: 'Медь',              state: 's',  color: '#C87840', cat: 'metal' },
+    'Mg':      { name: 'Магний',             state: 's',  color: '#D6D6D6', cat: 'metal' },
+    'Na':      { name: 'Натрий',             state: 's',  color: '#F5F0C8', cat: 'metal' },
+    'H2O':     { name: 'Вода',              state: 'l',  color: '#6EB4D7', cat: 'other' },
+    'Phenolphthalein': { name: 'Фенолфталеин', state: 'ind', color: '#E0E0E0', cat: 'indicator' },
+    'Litmus':          { name: 'Лакмус',       state: 'ind', color: '#9B59B6', cat: 'indicator' },
+    'MethylOrange':    { name: 'Метилоранж',   state: 'ind', color: '#FF8C00', cat: 'indicator' },
+  };
+
+  /* ── База реакций ─────────────────────────────────────────────── */
+
+  static REACTIONS = [
+    // ── Нейтрализация ──
+    { r: ['HCl','NaOH'],       eq: 'HCl + NaOH <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> NaCl + H₂O',               type: 'Нейтрализация', fx: { heat: true },
+      ionFull: 'H⁺ + Cl⁻ + Na⁺ + OH⁻ <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> Na⁺ + Cl⁻ + H₂O', ionNet: 'H⁺ + OH⁻ <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> H₂O',
+      why: 'Кислота отдаёт H⁺, основание — OH⁻; они образуют воду' },
+    { r: ['H2SO4','NaOH'],     eq: 'H₂SO₄ + 2NaOH <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> Na₂SO₄ + 2H₂O',        type: 'Нейтрализация', fx: { heat: true },
+      ionFull: '2H⁺ + SO₄²⁻ + 2Na⁺ + 2OH⁻ <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> 2Na⁺ + SO₄²⁻ + 2H₂O', ionNet: 'H⁺ + OH⁻ <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> H₂O',
+      why: 'Кислота отдаёт H⁺, основание — OH⁻; они образуют воду' },
+    { r: ['HNO3','NaOH'],      eq: 'HNO₃ + NaOH <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> NaNO₃ + H₂O',             type: 'Нейтрализация', fx: { heat: true },
+      ionFull: 'H⁺ + NO₃⁻ + Na⁺ + OH⁻ <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> Na⁺ + NO₃⁻ + H₂O', ionNet: 'H⁺ + OH⁻ <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> H₂O',
+      why: 'Кислота отдаёт H⁺, основание — OH⁻; они образуют воду' },
+    { r: ['HCl','KOH'],        eq: 'HCl + KOH <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> KCl + H₂O',                 type: 'Нейтрализация', fx: { heat: true },
+      ionFull: 'H⁺ + Cl⁻ + K⁺ + OH⁻ <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> K⁺ + Cl⁻ + H₂O', ionNet: 'H⁺ + OH⁻ <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> H₂O',
+      why: 'Кислота отдаёт H⁺, основание — OH⁻; они образуют воду' },
+    { r: ['HCl','Ca(OH)2'],    eq: '2HCl + Ca(OH)₂ <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> CaCl₂ + 2H₂O',        type: 'Нейтрализация', fx: { heat: true },
+      ionFull: '2H⁺ + 2Cl⁻ + Ca²⁺ + 2OH⁻ <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> Ca²⁺ + 2Cl⁻ + 2H₂O', ionNet: 'H⁺ + OH⁻ <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> H₂O',
+      why: 'Кислота отдаёт H⁺, основание — OH⁻; они образуют воду' },
+    { r: ['CH3COOH','NaOH'],   eq: 'CH₃COOH + NaOH <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> CH₃COONa + H₂O',     type: 'Нейтрализация', fx: { heat: true },
+      ionFull: 'CH₃COOH + Na⁺ + OH⁻ <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> CH₃COO⁻ + Na⁺ + H₂O', ionNet: 'CH₃COOH + OH⁻ <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> CH₃COO⁻ + H₂O',
+      why: 'Слабая кислота реагирует с OH⁻ целиком (не диссоциирует полностью)' },
+    { r: ['H2SO4','KOH'],      eq: 'H₂SO₄ + 2KOH <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> K₂SO₄ + 2H₂O',         type: 'Нейтрализация', fx: { heat: true },
+      ionFull: '2H⁺ + SO₄²⁻ + 2K⁺ + 2OH⁻ <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> 2K⁺ + SO₄²⁻ + 2H₂O', ionNet: 'H⁺ + OH⁻ <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> H₂O',
+      why: 'Кислота отдаёт H⁺, основание — OH⁻; они образуют воду' },
+    { r: ['HNO3','KOH'],       eq: 'HNO₃ + KOH <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> KNO₃ + H₂O',              type: 'Нейтрализация', fx: { heat: true },
+      ionFull: 'H⁺ + NO₃⁻ + K⁺ + OH⁻ <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> K⁺ + NO₃⁻ + H₂O', ionNet: 'H⁺ + OH⁻ <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> H₂O',
+      why: 'Кислота отдаёт H⁺, основание — OH⁻; они образуют воду' },
+    { r: ['CH3COOH','KOH'],    eq: 'CH₃COOH + KOH <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> CH₃COOK + H₂O',        type: 'Нейтрализация', fx: { heat: true },
+      ionFull: 'CH₃COOH + K⁺ + OH⁻ <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> CH₃COO⁻ + K⁺ + H₂O', ionNet: 'CH₃COOH + OH⁻ <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> CH₃COO⁻ + H₂O',
+      why: 'Слабая кислота реагирует с OH⁻ целиком' },
+    { r: ['H2SO4','Ca(OH)2'],  eq: 'H₂SO₄ + Ca(OH)₂ <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> CaSO₄<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> + 2H₂O',     type: 'Нейтрализация', fx: { heat: true, precip: { c: '#F0F0F0', n: 'CaSO₄' } },
+      ionFull: '2H⁺ + SO₄²⁻ + Ca²⁺ + 2OH⁻ <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> CaSO₄<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> + 2H₂O', ionNet: '2H⁺ + SO₄²⁻ + Ca²⁺ + 2OH⁻ <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> CaSO₄<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> + 2H₂O',
+      why: 'Нейтрализация + образование малорастворимого CaSO₄' },
+    // ── Замещение (металл + кислота) ──
+    { r: ['Zn','HCl'],         eq: 'Zn + 2HCl <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> ZnCl₂ + H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',              type: 'Замещение',    fx: { gas: 'H₂', heat: true },
+      ionFull: 'Zn⁰ + 2H⁺ + 2Cl⁻ <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> Zn²⁺ + 2Cl⁻ + H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>', ionNet: 'Zn⁰ + 2H⁺ <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> Zn²⁺ + H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',
+      why: 'Zn активнее H в ряду активности <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> вытесняет водород' },
+    { r: ['Zn','H2SO4'],       eq: 'Zn + H₂SO₄ <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> ZnSO₄ + H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',            type: 'Замещение',    fx: { gas: 'H₂', heat: true },
+      ionFull: 'Zn⁰ + 2H⁺ + SO₄²⁻ <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> Zn²⁺ + SO₄²⁻ + H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>', ionNet: 'Zn⁰ + 2H⁺ <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> Zn²⁺ + H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',
+      why: 'Zn активнее H в ряду активности <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> вытесняет водород' },
+    { r: ['Fe','HCl'],         eq: 'Fe + 2HCl <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> FeCl₂ + H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',              type: 'Замещение',    fx: { gas: 'H₂', heat: true },
+      ionFull: 'Fe⁰ + 2H⁺ + 2Cl⁻ <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> Fe²⁺ + 2Cl⁻ + H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>', ionNet: 'Fe⁰ + 2H⁺ <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> Fe²⁺ + H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',
+      why: 'Fe активнее H в ряду активности <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> вытесняет водород' },
+    { r: ['Fe','H2SO4'],       eq: 'Fe + H₂SO₄ <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> FeSO₄ + H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',            type: 'Замещение',    fx: { gas: 'H₂', heat: true },
+      ionFull: 'Fe⁰ + 2H⁺ + SO₄²⁻ <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> Fe²⁺ + SO₄²⁻ + H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>', ionNet: 'Fe⁰ + 2H⁺ <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> Fe²⁺ + H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',
+      why: 'Fe активнее H в ряду активности <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> вытесняет водород' },
+    { r: ['Mg','HCl'],         eq: 'Mg + 2HCl <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> MgCl₂ + H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',             type: 'Замещение',    fx: { gas: 'H₂', heat: true, violent: true },
+      ionFull: 'Mg⁰ + 2H⁺ + 2Cl⁻ <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> Mg²⁺ + 2Cl⁻ + H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>', ionNet: 'Mg⁰ + 2H⁺ <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> Mg²⁺ + H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',
+      why: 'Mg очень активен <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> бурно вытесняет водород' },
+    { r: ['Mg','H2SO4'],       eq: 'Mg + H₂SO₄ <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> MgSO₄ + H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',           type: 'Замещение',    fx: { gas: 'H₂', heat: true, violent: true },
+      ionFull: 'Mg⁰ + 2H⁺ + SO₄²⁻ <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> Mg²⁺ + SO₄²⁻ + H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>', ionNet: 'Mg⁰ + 2H⁺ <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> Mg²⁺ + H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',
+      why: 'Mg очень активен <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> бурно вытесняет водород' },
+    // ── Замещение (металл + соль) ──
+    { r: ['CuSO4','Fe'],       eq: 'CuSO₄ + Fe <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> FeSO₄ + Cu<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>',            type: 'Замещение',    fx: { precip: { c: '#E8913A', n: 'Cu' }, colorTo: '#90C090' },
+      ionFull: 'Cu²⁺ + SO₄²⁻ + Fe⁰ <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> Fe²⁺ + SO₄²⁻ + Cu⁰<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>', ionNet: 'Cu²⁺ + Fe⁰ <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> Fe²⁺ + Cu⁰<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>',
+      why: 'Fe активнее Cu <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> вытесняет медь из раствора' },
+    { r: ['CuSO4','Zn'],       eq: 'CuSO₄ + Zn <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> ZnSO₄ + Cu<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>',           type: 'Замещение',    fx: { precip: { c: '#E8913A', n: 'Cu' }, colorTo: '#E0E0E0' },
+      ionFull: 'Cu²⁺ + SO₄²⁻ + Zn⁰ <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> Zn²⁺ + SO₄²⁻ + Cu⁰<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>', ionNet: 'Cu²⁺ + Zn⁰ <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> Zn²⁺ + Cu⁰<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>',
+      why: 'Zn активнее Cu <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> вытесняет медь из раствора' },
+    { r: ['AgNO3','Cu'],       eq: '2AgNO₃ + Cu <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> Cu(NO₃)₂ + 2Ag<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>',       type: 'Замещение',    fx: { precip: { c: '#C0C0C0', n: 'Ag' }, colorTo: '#4CC9F0' },
+      ionFull: '2Ag⁺ + 2NO₃⁻ + Cu⁰ <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> Cu²⁺ + 2NO₃⁻ + 2Ag⁰<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>', ionNet: '2Ag⁺ + Cu⁰ <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> Cu²⁺ + 2Ag⁰<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>',
+      why: 'Cu активнее Ag <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> вытесняет серебро из раствора' },
+    // ── Обмен с осадком ──
+    { r: ['AgNO3','NaCl'],     eq: 'AgNO₃ + NaCl <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> AgCl<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> + NaNO₃',        type: 'Обмен',        fx: { precip: { c: '#F0F0F0', n: 'AgCl' } },
+      ionFull: 'Ag⁺ + NO₃⁻ + Na⁺ + Cl⁻ <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> AgCl<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> + Na⁺ + NO₃⁻', ionNet: 'Ag⁺ + Cl⁻ <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> AgCl<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>',
+      why: 'AgCl нерастворим <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> ионы связываются в осадок' },
+    { r: ['AgNO3','HCl'],      eq: 'AgNO₃ + HCl <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> AgCl<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> + HNO₃',          type: 'Обмен',        fx: { precip: { c: '#F0F0F0', n: 'AgCl' } },
+      ionFull: 'Ag⁺ + NO₃⁻ + H⁺ + Cl⁻ <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> AgCl<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> + H⁺ + NO₃⁻', ionNet: 'Ag⁺ + Cl⁻ <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> AgCl<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>',
+      why: 'AgCl нерастворим <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> ионы связываются в осадок' },
+    { r: ['BaCl2','H2SO4'],    eq: 'BaCl₂ + H₂SO₄ <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> BaSO₄<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> + 2HCl',      type: 'Обмен',        fx: { precip: { c: '#FFFFFF', n: 'BaSO₄' } },
+      ionFull: 'Ba²⁺ + 2Cl⁻ + 2H⁺ + SO₄²⁻ <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> BaSO₄<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> + 2H⁺ + 2Cl⁻', ionNet: 'Ba²⁺ + SO₄²⁻ <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> BaSO₄<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>',
+      why: 'BaSO₄ нерастворим <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> ионы связываются в осадок' },
+    { r: ['CuSO4','NaOH'],     eq: 'CuSO₄ + 2NaOH <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> Cu(OH)₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> + Na₂SO₄',  type: 'Обмен',        fx: { precip: { c: '#5BC0EB', n: 'Cu(OH)₂' } },
+      ionFull: 'Cu²⁺ + SO₄²⁻ + 2Na⁺ + 2OH⁻ <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> Cu(OH)₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> + 2Na⁺ + SO₄²⁻', ionNet: 'Cu²⁺ + 2OH⁻ <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> Cu(OH)₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>',
+      why: 'Cu(OH)₂ нерастворим <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> осаждается голубой гидроксид' },
+    { r: ['FeCl3','NaOH'],     eq: 'FeCl₃ + 3NaOH <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> Fe(OH)₃<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> + 3NaCl',    type: 'Обмен',        fx: { precip: { c: '#8B4513', n: 'Fe(OH)₃' } },
+      ionFull: 'Fe³⁺ + 3Cl⁻ + 3Na⁺ + 3OH⁻ <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> Fe(OH)₃<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> + 3Na⁺ + 3Cl⁻', ionNet: 'Fe³⁺ + 3OH⁻ <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> Fe(OH)₃<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>',
+      why: 'Fe(OH)₃ нерастворим <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> бурый осадок' },
+    { r: ['Pb(NO3)2','K2CrO4'],eq: 'Pb(NO₃)₂ + K₂CrO₄ <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> PbCrO₄<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> + 2KNO₃',type:'Обмен',        fx: { precip: { c: '#FFD700', n: 'PbCrO₄' } },
+      ionFull: 'Pb²⁺ + 2NO₃⁻ + 2K⁺ + CrO₄²⁻ <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> PbCrO₄<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> + 2K⁺ + 2NO₃⁻', ionNet: 'Pb²⁺ + CrO₄²⁻ <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> PbCrO₄<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>',
+      why: 'PbCrO₄ нерастворим <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> яркий жёлтый осадок' },
+    { r: ['FeCl3','K2CrO4'],   eq: '2FeCl₃ + 3K₂CrO₄ <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> Fe₂(CrO₄)₃<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> + 6KCl',type:'Обмен',      fx: { precip: { c: '#8B6914', n: 'Fe₂(CrO₄)₃' } },
+      ionFull: '2Fe³⁺ + 6Cl⁻ + 6K⁺ + 3CrO₄²⁻ <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> Fe₂(CrO₄)₃<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> + 6K⁺ + 6Cl⁻', ionNet: '2Fe³⁺ + 3CrO₄²⁻ <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> Fe₂(CrO₄)₃<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>',
+      why: 'Fe₂(CrO₄)₃ нерастворим' },
+    { r: ['Pb(NO3)2','NaCl'],  eq: 'Pb(NO₃)₂ + 2NaCl <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> PbCl₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> + 2NaNO₃', type: 'Обмен',        fx: { precip: { c: '#F0F0F0', n: 'PbCl₂' } },
+      ionFull: 'Pb²⁺ + 2NO₃⁻ + 2Na⁺ + 2Cl⁻ <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> PbCl₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> + 2Na⁺ + 2NO₃⁻', ionNet: 'Pb²⁺ + 2Cl⁻ <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> PbCl₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>',
+      why: 'PbCl₂ малорастворим <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> белый осадок' },
+    { r: ['CuSO4','KOH'],      eq: 'CuSO₄ + 2KOH <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> Cu(OH)₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> + K₂SO₄',    type: 'Обмен',        fx: { precip: { c: '#5BC0EB', n: 'Cu(OH)₂' } },
+      ionFull: 'Cu²⁺ + SO₄²⁻ + 2K⁺ + 2OH⁻ <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> Cu(OH)₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> + 2K⁺ + SO₄²⁻', ionNet: 'Cu²⁺ + 2OH⁻ <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> Cu(OH)₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>',
+      why: 'Cu(OH)₂ нерастворим <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> голубой осадок' },
+    { r: ['FeCl3','KOH'],      eq: 'FeCl₃ + 3KOH <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> Fe(OH)₃<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> + 3KCl',      type: 'Обмен',        fx: { precip: { c: '#8B4513', n: 'Fe(OH)₃' } },
+      ionFull: 'Fe³⁺ + 3Cl⁻ + 3K⁺ + 3OH⁻ <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> Fe(OH)₃<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> + 3K⁺ + 3Cl⁻', ionNet: 'Fe³⁺ + 3OH⁻ <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> Fe(OH)₃<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>',
+      why: 'Fe(OH)₃ нерастворим <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> бурый осадок' },
+    // ── Обмен с газом ──
+    { r: ['Na2CO3','HCl'],     eq: 'Na₂CO₃ + 2HCl <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> 2NaCl + H₂O + CO₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',  type: 'Обмен',        fx: { gas: 'CO₂' },
+      ionFull: '2Na⁺ + CO₃²⁻ + 2H⁺ + 2Cl⁻ <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> 2Na⁺ + 2Cl⁻ + H₂O + CO₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>', ionNet: 'CO₃²⁻ + 2H⁺ <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> H₂O + CO₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',
+      why: 'H₂CO₃ неустойчива <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> разлагается на воду и газ CO₂' },
+    { r: ['Na2CO3','H2SO4'],   eq: 'Na₂CO₃ + H₂SO₄ <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> Na₂SO₄ + H₂O + CO₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',type:'Обмен',        fx: { gas: 'CO₂' },
+      ionFull: '2Na⁺ + CO₃²⁻ + 2H⁺ + SO₄²⁻ <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> 2Na⁺ + SO₄²⁻ + H₂O + CO₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>', ionNet: 'CO₃²⁻ + 2H⁺ <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> H₂O + CO₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',
+      why: 'H₂CO₃ неустойчива <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> разлагается на воду и газ CO₂' },
+    { r: ['Na2CO3','HNO3'],    eq: 'Na₂CO₃ + 2HNO₃ <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> 2NaNO₃ + H₂O + CO₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',type:'Обмен',        fx: { gas: 'CO₂' },
+      ionFull: '2Na⁺ + CO₃²⁻ + 2H⁺ + 2NO₃⁻ <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> 2Na⁺ + 2NO₃⁻ + H₂O + CO₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>', ionNet: 'CO₃²⁻ + 2H⁺ <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> H₂O + CO₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',
+      why: 'H₂CO₃ неустойчива <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> разлагается на воду и газ CO₂' },
+    { r: ['Na2CO3','CH3COOH'], eq: 'Na₂CO₃ + 2CH₃COOH <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> 2CH₃COONa + H₂O + CO₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',type:'Обмен',  fx: { gas: 'CO₂' },
+      ionFull: '2Na⁺ + CO₃²⁻ + 2CH₃COOH <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> 2CH₃COO⁻ + 2Na⁺ + H₂O + CO₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>', ionNet: 'CO₃²⁻ + 2CH₃COOH <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> 2CH₃COO⁻ + H₂O + CO₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',
+      why: 'Уксусная кислота слабая, но карбонат-ион связывает H⁺' },
+    // ── Активный металл + вода ──
+    { r: ['Na','H2O'],         eq: '2Na + 2H₂O <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> 2NaOH + H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',            type: 'Акт. металл',  fx: { gas: 'H₂', heat: true, violent: true },
+      ionNet: '2Na⁰ + 2H₂O <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> 2Na⁺ + 2OH⁻ + H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',
+      why: 'Na — щелочной металл, бурно реагирует с водой' },
+    { r: ['Mg','H2O'],         eq: 'Mg + 2H₂O <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> Mg(OH)₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> + H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',          type: 'Акт. металл',  fx: { gas: 'H₂', heat: true, precip: { c: '#E0E0E0', n: 'Mg(OH)₂' } },
+      ionNet: 'Mg⁰ + 2H₂O <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> Mg(OH)₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> + H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',
+      why: 'Mg реагирует с горячей водой, Mg(OH)₂ малорастворим' },
+    // ── Индикаторы ──
+    { r: ['Phenolphthalein','NaOH'],  eq: 'Фенолфталеин + щёлочь <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> малиновый',      type: 'Индикатор', fx: { colorTo: '#FF1493' },
+      why: 'pH > 8 <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> фенолфталеин приобретает малиновую окраску' },
+    { r: ['Phenolphthalein','KOH'],   eq: 'Фенолфталеин + щёлочь <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> малиновый',      type: 'Индикатор', fx: { colorTo: '#FF1493' },
+      why: 'pH > 8 <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> фенолфталеин приобретает малиновую окраску' },
+    { r: ['Phenolphthalein','Ca(OH)2'],eq:'Фенолфталеин + щёлочь <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> малиновый',      type: 'Индикатор', fx: { colorTo: '#FF1493' },
+      why: 'pH > 8 <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> фенолфталеин приобретает малиновую окраску' },
+    { r: ['Phenolphthalein','NH3·H2O'],eq:'Фенолфталеин + аммиак <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> бл.-розовый',    type: 'Индикатор', fx: { colorTo: '#FFB0C0' },
+      why: 'NH₃·H₂O — слабое основание, pH ~11, бледная окраска' },
+    { r: ['Litmus','HCl'],            eq: 'Лакмус + кислота <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> красный',             type: 'Индикатор', fx: { colorTo: '#EF476F' },
+      why: 'pH < 5 <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> лакмус краснеет' },
+    { r: ['Litmus','H2SO4'],          eq: 'Лакмус + кислота <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> красный',             type: 'Индикатор', fx: { colorTo: '#EF476F' },
+      why: 'pH < 5 <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> лакмус краснеет' },
+    { r: ['Litmus','HNO3'],           eq: 'Лакмус + кислота <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> красный',             type: 'Индикатор', fx: { colorTo: '#EF476F' },
+      why: 'pH < 5 <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> лакмус краснеет' },
+    { r: ['Litmus','NaOH'],           eq: 'Лакмус + щёлочь <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> синий',                type: 'Индикатор', fx: { colorTo: '#4466FF' },
+      why: 'pH > 8 <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> лакмус синеет' },
+    { r: ['Litmus','KOH'],            eq: 'Лакмус + щёлочь <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> синий',                type: 'Индикатор', fx: { colorTo: '#4466FF' },
+      why: 'pH > 8 <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> лакмус синеет' },
+    { r: ['MethylOrange','HCl'],      eq: 'Метилоранж + кислота <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> розовый',         type: 'Индикатор', fx: { colorTo: '#FF6666' },
+      why: 'pH < 3.1 <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> метилоранж розовеет' },
+    { r: ['MethylOrange','H2SO4'],    eq: 'Метилоранж + кислота <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> розовый',         type: 'Индикатор', fx: { colorTo: '#FF6666' },
+      why: 'pH < 3.1 <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> метилоранж розовеет' },
+    { r: ['MethylOrange','NaOH'],     eq: 'Метилоранж + щёлочь <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> жёлтый',           type: 'Индикатор', fx: { colorTo: '#FFD700' },
+      why: 'pH > 4.4 <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> метилоранж жёлтый' },
+    // ── Нет реакции ──
+    { r: ['Cu','HCl'],   eq: 'Cu + HCl — реакция не идёт',     type: 'Нет реакции', fx: { none: true },
+      why: 'Cu стоит после H в ряду активности <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> не вытесняет водород' },
+    { r: ['Cu','H2SO4'], eq: 'Cu + H₂SO₄(разб.) — нет реакции',type: 'Нет реакции', fx: { none: true },
+      why: 'Cu стоит после H в ряду активности <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> не вытесняет водород' },
+  ];
+
+  /* ── Ряд активности металлов ─────────────────────────────────── */
+  static ACTIVITY_SERIES = [
+    { sym: 'K',  name: 'Калий' },
+    { sym: 'Na', name: 'Натрий' },
+    { sym: 'Ca', name: 'Кальций' },
+    { sym: 'Mg', name: 'Магний' },
+    { sym: 'Al', name: 'Алюминий' },
+    { sym: 'Zn', name: 'Цинк' },
+    { sym: 'Fe', name: 'Железо' },
+    { sym: 'Ni', name: 'Никель' },
+    { sym: 'Sn', name: 'Олово' },
+    { sym: 'Pb', name: 'Свинец' },
+    { sym: 'H₂', name: 'Водород' },
+    { sym: 'Cu', name: 'Медь' },
+    { sym: 'Ag', name: 'Серебро' },
+    { sym: 'Au', name: 'Золото' },
+  ];
+
+  static PRESETS = {
+    neutralization: ['HCl', 'NaOH'],
+    gas_evolution:  ['Na2CO3', 'HCl'],
+    precipitate:    ['AgNO3', 'NaCl'],
+    displacement:   ['CuSO4', 'Fe'],
+    indicator:      ['Phenolphthalein', 'NaOH'],
+    violent:        ['Na', 'H2O'],
+    yellow_precip:  ['Pb(NO3)2', 'K2CrO4'],
+    blue_precip:    ['CuSO4', 'NaOH'],
+  };
+
+  /* ── Конструктор ─────────────────────────────────────────────── */
+
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.ctx    = canvas.getContext('2d');
+    this.W = 0; this.H = 0;
+
+    this.mixContents  = [];
+    this.lastReaction = null;
+    this.filterCat    = 'all';
+
+    // liquid state
+    this._liqColor       = null;
+    this._liqTargetColor = null;
+    this._liqLevel       = 0;
+    this._precipLevel    = 0;
+    this._precipColor    = null;
+
+    // particles
+    this._bubbles     = [];
+    this._precipParts = [];
+    this._steamParts  = [];
+    this._sparkParts  = [];
+    this._pourDrops   = [];    // pour animation
+
+    // animation
+    this._raf       = null;
+    this._last      = 0;
+    this._time      = 0;
+    this._animPhase = 0;
+    this._reacTimer = 0;
+
+    // flask geometry cache
+    this._g = {};
+
+    // glow / waves
+    this._glowPulse = 0;
+    this._heatGlow  = 0;
+    this._wave  = 0;
+    this._wave2 = 0;
+    this._wave3 = 0;
+
+    // gas label
+    this._gasLabel = null;
+
+    // pour animation state
+    this._pouring    = false;
+    this._pourColor  = null;
+    this._pourTimer  = 0;
+
+    // drag state
+    this._drag = null;   // { formula, x, y }
+
+    // added items chips (for removal)
+    this._chipLayout = []; // [{formula, x, y, w, h}]
+
+    // shelf layout cache
+    this._shelfKeys    = [];
+    this._shelfStartX  = 0;
+    this._shelfBottleW = 0;
+    this._shelfGap     = 0;
+    this._shelfBottleY = 0;
+    this._shelfBottleH = 0;
+    this._shelfLayout  = [];     // [{formula, x, y, w, h}]
+    this._shelfScroll  = 0;      // horizontal scroll offset
+    this._shelfHover   = -1;     // hovered card index
+
+    // pending preset timeouts
+    this._presetTimers = [];
+
+    // quiz mode
+    this._quizMode     = false;
+    this._quizTask     = null;    // { rx, question, answer: [f1,f2] }
+    this._quizScore    = 0;
+    this._quizTotal    = 0;
+    this._quizResult   = null;    // 'correct' | 'wrong' | null
+    this._quizResultT  = 0;
+
+    this.onUpdate = null;
+    this.onQuizUpdate = null;     // callback(quizInfo)
+    this.fit();
+  }
+
+  /* ── Геометрия колбы Эрленмейера ─────────────────────────────── */
+
+  fit() {
+    const dpr = window.devicePixelRatio || 1;
+    const W   = this.canvas.offsetWidth  || 600;
+    const H   = this.canvas.offsetHeight || 400;
+    this.canvas.width  = Math.round(W * dpr);
+    this.canvas.height = Math.round(H * dpr);
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this.W = W; this.H = H;
+    this._calcGeom();
+  }
+
+  _calcGeom() {
+    const { W, H } = this;
+    // flask parameters (Erlenmeyer)
+    const r    = Math.min(W * 0.17, H * 0.18);   // body radius (smaller to fit info)
+    const cx   = W * 0.50;
+    const cy   = H * 0.34;                         // body center (higher)
+    const nw   = r * 0.22;                         // neck half-width
+    const nh   = r * 0.90;                         // neck height
+    const nt   = cy - r - nh;                       // neck top Y
+    const nb   = cy - r * 0.75;                     // neck-shoulder transition Y
+    const liqTop = cy - r * 0.35;                   // default liquid surface
+    // shelf — 2-row grid with large cards
+    const shelfH = 140;
+    const shelfY = H - shelfH - 4;
+    this._g = { r, cx, cy, nw, nh, nt, nb, liqTop, shelfY, shelfH };
+  }
+
+  _flaskPath(ctx) {
+    const { r, cx, cy, nw, nt, nb } = this._g;
+    ctx.beginPath();
+    ctx.moveTo(cx - nw, nt);
+    ctx.lineTo(cx - nw, nb);
+    ctx.bezierCurveTo(cx - nw, cy - r * 0.38, cx - r * 0.85, cy - r * 0.08, cx - r, cy);
+    ctx.arc(cx, cy, r, Math.PI, 0, true);
+    ctx.bezierCurveTo(cx + r * 0.85, cy - r * 0.08, cx + nw, cy - r * 0.38, cx + nw, nb);
+    ctx.lineTo(cx + nw, nt);
+    ctx.closePath();
+  }
+
+  /* ── Запуск / остановка ─────────────────────────────────────── */
+
+  start() {
+    if (this._raf) return;
+    this._last = performance.now();
+    const loop = t => { this._raf = requestAnimationFrame(loop); this._tick(t); };
+    this._raf  = requestAnimationFrame(loop);
+  }
+
+  stop() { cancelAnimationFrame(this._raf); this._raf = null; }
+
+  /* ── Публичный API ──────────────────────────────────────────── */
+
+  reset() {
+    // cancel any pending preset timers
+    for (const t of this._presetTimers) clearTimeout(t);
+    this._presetTimers   = [];
+
+    this.mixContents     = [];
+    this.lastReaction    = null;
+    this._liqColor       = null;
+    this._liqTargetColor = null;
+    this._liqLevel       = 0;
+    this._precipLevel    = 0;
+    this._precipColor    = null;
+    this._bubbles        = [];
+    this._precipParts    = [];
+    this._steamParts     = [];
+    this._sparkParts     = [];
+    this._pourDrops      = [];
+    this._animPhase      = 0;
+    this._reacTimer      = 0;
+    this._heatGlow       = 0;
+    this._gasLabel       = null;
+    this._pouring        = false;
+    this._chipLayout     = [];
+    this._fireInfo();
+  }
+
+  resetReaction() {
+    // keep reagents in the zone, but clear reaction effects
+    this.lastReaction    = null;
+    this._liqTargetColor = null;
+    this._animPhase      = 0;
+    this._reacTimer      = 0;
+    this._gasLabel       = null;
+    this._bubbles        = [];
+    this._precipParts    = [];
+    this._steamParts     = [];
+    this._sparkParts     = [];
+    this._precipLevel    = 0;
+    this._precipColor    = null;
+    this._heatGlow       = 0;
+    // recalc liquid to original colors without reaction effects
+    this._recalcLiquid();
+    this._fireInfo();
+  }
+
+  addToMix(formula) {
+    if (this.mixContents.length >= 4) return;
+    if (this.mixContents.includes(formula)) return;
+
+    this.mixContents.push(formula);
+    const sub = ChemSandboxSim.SUBSTANCES[formula];
+
+    // pour animation
+    this._pouring   = true;
+    this._pourColor = sub.color;
+    this._pourTimer = 0;
+    this._spawnPourDrops(sub.color, sub.state === 's');
+
+    // liquid level (cap at 0.85 to keep within flask body)
+    if (sub.state !== 's') {
+      this._liqLevel = Math.min(0.85, this._liqLevel + 0.30);
+      this._liqColor = this._liqColor
+        ? this._blendColors(this._liqColor, sub.color, 0.45)
+        : sub.color;
+    } else {
+      this._liqLevel = Math.min(0.85, this._liqLevel + 0.10);
+    }
+
+    // check reaction
+    this._checkReaction();
+    this._fireInfo();
+  }
+
+  removeFromMix(formula) {
+    const idx = this.mixContents.indexOf(formula);
+    if (idx === -1) return;
+    this.mixContents.splice(idx, 1);
+
+    // recalculate liquid
+    this._recalcLiquid();
+
+    // re-check reaction
+    this.lastReaction    = null;
+    this._animPhase      = 0;
+    this._gasLabel       = null;
+    this._bubbles        = [];
+    this._precipParts    = [];
+    this._steamParts     = [];
+    this._sparkParts     = [];
+    this._precipLevel    = 0;
+    this._precipColor    = null;
+    this._heatGlow       = 0;
+    this._liqTargetColor = null;
+
+    if (this.mixContents.length >= 2) this._checkReaction();
+    this._fireInfo();
+  }
+
+  _recalcLiquid() {
+    this._liqLevel = 0;
+    this._liqColor = null;
+    for (const f of this.mixContents) {
+      const s = ChemSandboxSim.SUBSTANCES[f];
+      if (s.state !== 's') {
+        this._liqLevel = Math.min(0.85, this._liqLevel + 0.30);
+        this._liqColor = this._liqColor
+          ? this._blendColors(this._liqColor, s.color, 0.45)
+          : s.color;
+      } else {
+        this._liqLevel = Math.min(0.85, this._liqLevel + 0.10);
+      }
+    }
+  }
+
+  setCategory(cat) { this.filterCat = cat; }
+
+  preset(name) {
+    const p = ChemSandboxSim.PRESETS[name];
+    if (!p) return;
+    this.reset();
+    // add with staggered delay (store timer IDs so reset can cancel them)
+    this._presetTimers = p.map((f, i) =>
+      setTimeout(() => this.addToMix(f), i * 600)
+    );
+  }
+
+  info() {
+    const r = this.lastReaction;
+    return {
+      mixed:    this.mixContents.length,
+      contents: [...this.mixContents],
+      reaction: r && !r.fx.none ? true : false,
+      type:     r ? r.type : null,
+      equation: r ? r.eq : null,
+      products: r && !r.fx.none ? this._productsStr(r) : null,
+      ionNet:   r ? r.ionNet || null : null,
+      why:      r ? r.why || null : null,
+    };
+  }
+
+  /* ── Поиск реакции ─────────────────────────────────────────── */
+
+  _checkReaction() {
+    const c = this.mixContents;
+    if (c.length < 2) return;
+    for (let i = 0; i < c.length; i++) {
+      for (let j = i + 1; j < c.length; j++) {
+        const rx = this._findReaction(c[i], c[j]);
+        if (rx) {
+          this.lastReaction = rx;
+          this._triggerReaction(rx);
+          if (this._quizMode) this._checkQuizAnswer();
+          return;
+        }
+      }
+    }
+  }
+
+  _findReaction(a, b) {
+    return ChemSandboxSim.REACTIONS.find(rx =>
+      (rx.r[0] === a && rx.r[1] === b) || (rx.r[0] === b && rx.r[1] === a)
+    ) || null;
+  }
+
+  _productsStr(rx) {
+    const parts = rx.eq.split('<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>');
+    return parts.length > 1 ? parts[1].trim() : '—';
+  }
+
+  /* ── Эффекты реакции ────────────────────────────────────────── */
+
+  _triggerReaction(rx) {
+    const fx = rx.fx;
+    if (fx.none) { this._fireInfo(); return; }
+
+    this._animPhase = 1;
+    this._reacTimer = 0;
+
+    if (fx.colorTo)  this._liqTargetColor = fx.colorTo;
+    if (fx.gas)      { this._gasLabel = fx.gas; this._spawnBubbles(fx.violent ? 45 : 22); }
+    if (fx.precip)   { this._precipColor = fx.precip.c; this._spawnPrecipitate(28); }
+    if (fx.heat)     {
+      this._heatGlow = 1.0;
+      this._spawnSteam(fx.violent ? 25 : 12);
+      if (fx.violent) this._spawnSparks(35);
+    }
+    this._fireInfo();
+  }
+
+  /* ── Частицы ────────────────────────────────────────────────── */
+
+  _spawnPourDrops(color, isSolid) {
+    const { cx, nt, nw } = this._g;
+    const n = isSolid ? 8 : 15;
+    for (let i = 0; i < n; i++) {
+      this._pourDrops.push({
+        x: cx + (Math.random() - 0.5) * nw * 1.5,
+        y: nt - 20 - Math.random() * 30,
+        r: isSolid ? 2 + Math.random() * 3 : 1.5 + Math.random() * 2,
+        vy: 1.5 + Math.random() * 3,
+        vx: (Math.random() - 0.5) * 0.8,
+        color,
+        life: 1.0,
+        solid: isSolid,
+      });
+    }
+  }
+
+  _spawnBubbles(n) {
+    const { cx, cy, r } = this._g;
+    for (let i = 0; i < n; i++) {
+      const angle = (Math.random() - 0.5) * 1.2;
+      const dist  = Math.random() * r * 0.6;
+      this._bubbles.push({
+        x: cx + Math.sin(angle) * dist,
+        y: cy + r * 0.3 - Math.random() * 15,
+        r: 1.5 + Math.random() * 4.5,
+        vy: -(1.5 + Math.random() * 3),
+        vx: (Math.random() - 0.5) * 0.8,
+        life: 1.0,
+        delay: Math.random() * 2.5,
+      });
+    }
+  }
+
+  _spawnPrecipitate(n) {
+    const { cx, cy, r } = this._g;
+    for (let i = 0; i < n; i++) {
+      this._precipParts.push({
+        x: cx + (Math.random() - 0.5) * r * 1.2,
+        y: cy - r * 0.2 + Math.random() * r * 0.4,
+        r: 1.5 + Math.random() * 3,
+        vy: 0.3 + Math.random() * 0.9,
+        vx: (Math.random() - 0.5) * 0.3,
+        life: 1.0,
+        delay: Math.random() * 1.8,
+      });
+    }
+  }
+
+  _spawnSteam(n) {
+    const { cx, nt, nw } = this._g;
+    for (let i = 0; i < n; i++) {
+      this._steamParts.push({
+        x: cx + (Math.random() - 0.5) * nw * 2,
+        y: nt - 5 + Math.random() * 10,
+        r: 3 + Math.random() * 7,
+        vy: -(0.5 + Math.random() * 1.8),
+        vx: (Math.random() - 0.5) * 0.6,
+        life: 1.0,
+        delay: Math.random() * 2.5,
+      });
+    }
+  }
+
+  _spawnSparks(n) {
+    const { cx, nt, nw } = this._g;
+    for (let i = 0; i < n; i++) {
+      const a = Math.random() * Math.PI * 2;
+      const sp = 2 + Math.random() * 5;
+      this._sparkParts.push({
+        x: cx + (Math.random() - 0.5) * nw,
+        y: nt + 5,
+        vx: Math.cos(a) * sp,
+        vy: Math.sin(a) * sp - 3,
+        life: 1.0,
+        delay: Math.random() * 1.0,
+      });
+    }
+  }
+
+  /* ── Тик ────────────────────────────────────────────────────── */
+
+  _tick(now) {
+    const dt = Math.min((now - this._last) / 1000, 0.05);
+    this._last = now;
+    this._time += dt;
+    this._wave  += dt * 1.7;
+    this._wave2 += dt * 2.3;
+    this._wave3 += dt * 0.88;
+    this._glowPulse += dt * 3.2;
+
+    if (this._animPhase === 1) {
+      this._reacTimer += dt;
+      if (this._reacTimer > 5.0) this._animPhase = 2;
+    }
+
+    // color lerp
+    if (this._liqTargetColor && this._liqColor) {
+      this._liqColor = this._lerpColor(this._liqColor, this._liqTargetColor, dt * 1.0);
+    }
+
+    if (this._heatGlow > 0) this._heatGlow = Math.max(0, this._heatGlow - dt * 0.12);
+
+    // pour animation
+    if (this._pouring) {
+      this._pourTimer += dt;
+      if (this._pourTimer > 1.2) this._pouring = false;
+    }
+
+    // quiz result timer
+    if (this._quizResultT > 0) {
+      this._quizResultT -= dt;
+      if (this._quizResultT <= 0) {
+        this._quizResultT = 0;
+        if (this._quizResult === 'correct') this._nextQuizTask();
+      }
+    }
+
+    this._updatePour(dt);
+    this._updateBubbles(dt);
+    this._updatePrecip(dt);
+    this._updateSteam(dt);
+    this._updateSparks(dt);
+
+    this.draw();
+  }
+
+  _updatePour(dt) {
+    const { cy, r } = this._g;
+    const surfY = this._getSurfaceY();
+    for (let i = this._pourDrops.length - 1; i >= 0; i--) {
+      const d = this._pourDrops[i];
+      d.vy += 8 * dt; // gravity
+      d.y += d.vy;
+      d.x += d.vx;
+      if (d.y > surfY) {
+        d.life -= dt * 3;
+      }
+      if (d.life <= 0 || d.y > cy + r) this._pourDrops.splice(i, 1);
+    }
+  }
+
+  _updateBubbles(dt) {
+    const surfY = this._getSurfaceY();
+    for (let i = this._bubbles.length - 1; i >= 0; i--) {
+      const b = this._bubbles[i];
+      if (b.delay > 0) { b.delay -= dt; continue; }
+      b.x += b.vx;
+      b.y += b.vy;
+      b.vx += (Math.random() - 0.5) * 0.4;
+      b.life -= dt * 0.22;
+      if (b.y < surfY - 8 || b.life <= 0) this._bubbles.splice(i, 1);
+    }
+    if (this._animPhase === 1 && this._gasLabel && Math.random() < 0.35) {
+      this._spawnBubbles(2);
+    }
+  }
+
+  _updatePrecip(dt) {
+    const { cy, r } = this._g;
+    const bottom = cy + r - 14;
+    for (let i = this._precipParts.length - 1; i >= 0; i--) {
+      const p = this._precipParts[i];
+      if (p.delay > 0) { p.delay -= dt; continue; }
+      p.x += p.vx;
+      p.y += p.vy;
+      p.vx *= 0.99;
+      if (p.y >= bottom) {
+        p.y = bottom; p.vy = 0; p.vx = 0;
+        this._precipLevel = Math.min(1, this._precipLevel + 0.004);
+        p.life -= dt * 0.25;
+      }
+      if (p.life <= 0) this._precipParts.splice(i, 1);
+    }
+  }
+
+  _updateSteam(dt) {
+    for (let i = this._steamParts.length - 1; i >= 0; i--) {
+      const s = this._steamParts[i];
+      if (s.delay > 0) { s.delay -= dt; continue; }
+      s.x += s.vx; s.y += s.vy;
+      s.r += dt * 1.8; s.life -= dt * 0.35;
+      if (s.life <= 0) this._steamParts.splice(i, 1);
+    }
+  }
+
+  _updateSparks(dt) {
+    for (let i = this._sparkParts.length - 1; i >= 0; i--) {
+      const s = this._sparkParts[i];
+      if (s.delay > 0) { s.delay -= dt; continue; }
+      s.x += s.vx; s.y += s.vy;
+      s.vy += 4 * dt;
+      s.life -= dt * 0.7;
+      if (s.life <= 0) this._sparkParts.splice(i, 1);
+    }
+  }
+
+  _getSurfaceY() {
+    const { cy, r, nt, nb } = this._g;
+    if (this._liqLevel <= 0) return cy + r;
+    // total fillable height: from flask bottom (cy+r) up to just below neck-shoulder (nb+4)
+    const maxH = (cy + r) - (nb + 4);
+    const liqH = maxH * Math.min(1, this._liqLevel) * 0.75;
+    return cy + r - liqH;
+  }
+
+  /* ── Рендеринг ─────────────────────────────────────────────── */
+
+  draw() {
+    const { ctx, W, H } = this;
+    ctx.clearRect(0, 0, W, H);
+
+    this._drawBackground();
+    this._drawFlaskShadow();
+    this._drawLiquid();
+    this._drawPrecipitate();
+    this._drawBubbles();
+    this._drawPourDrops();
+    this._drawFlaskGlass();
+    this._drawSteam();
+    this._drawSparks();
+    this._drawChips();
+    this._drawEquation();
+    this._drawShelf();
+    this._drawDragGhost();
+    if (this.mixContents.length === 0 && !this.lastReaction && !this._quizMode) this._drawHint();
+    if (this._quizMode) this._drawQuizOverlay();
+  }
+
+  _drawBackground() {
+    const { ctx, W, H } = this;
+    const bg = ctx.createRadialGradient(W / 2, H * 0.38, 0, W / 2, H * 0.38, W * 0.75);
+    bg.addColorStop(0, '#0c0c1a');
+    bg.addColorStop(1, '#050508');
+    ctx.fillStyle = bg;
+    ctx.fillRect(0, 0, W, H);
+    // grid
+    ctx.strokeStyle = 'rgba(255,255,255,0.02)';
+    ctx.lineWidth = 0.5;
+    for (let x = 0; x < W; x += 30) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke(); }
+    for (let y = 0; y < H; y += 30) { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(W, y); ctx.stroke(); }
+  }
+
+  _drawFlaskShadow() {
+    const { ctx } = this;
+    const { cx, cy, r } = this._g;
+    // shadow beneath flask
+    const sg = ctx.createRadialGradient(cx, cy + r + 8, 0, cx, cy + r + 8, r * 1.1);
+    sg.addColorStop(0, 'rgba(0,0,0,0.25)');
+    sg.addColorStop(1, 'rgba(0,0,0,0)');
+    ctx.fillStyle = sg;
+    ctx.fillRect(cx - r * 1.2, cy + r - 2, r * 2.4, 25);
+  }
+
+  _drawLiquid() {
+    if (this._liqLevel <= 0) return;
+    const { ctx } = this;
+    const g = this._g;
+    const surfY = this._getSurfaceY();
+
+    ctx.save();
+    this._flaskPath(ctx);
+    ctx.clip();
+
+    const col = this._liqColor || '#6EB4D7';
+    const liqGrad = ctx.createLinearGradient(0, surfY, 0, g.cy + g.r);
+    liqGrad.addColorStop(0, this._alphaColor(col, 0.45));
+    liqGrad.addColorStop(0.5, this._alphaColor(col, 0.60));
+    liqGrad.addColorStop(1, this._alphaColor(col, 0.75));
+    ctx.fillStyle = liqGrad;
+
+    // wavy surface
+    ctx.beginPath();
+    ctx.moveTo(g.cx - g.r - 5, g.cy + g.r + 5);
+    const amp = 2.0;
+    const left = g.cx - g.r - 5, right = g.cx + g.r + 5;
+    for (let px = left; px <= right; px += 2) {
+      const t = (px - left) / (right - left);
+      const wy = surfY + Math.sin(t * 7 + this._wave) * amp
+                       + Math.sin(t * 4.5 + this._wave2) * amp * 0.6;
+      ctx.lineTo(px, wy);
+    }
+    ctx.lineTo(right, g.cy + g.r + 5);
+    ctx.closePath();
+    ctx.fill();
+
+    // meniscus highlight
+    ctx.beginPath();
+    for (let px = left; px <= right; px += 2) {
+      const t = (px - left) / (right - left);
+      const wy = surfY + Math.sin(t * 7 + this._wave) * amp
+                       + Math.sin(t * 4.5 + this._wave2) * amp * 0.6;
+      if (px === left) ctx.moveTo(px, wy); else ctx.lineTo(px, wy);
+    }
+    ctx.strokeStyle = 'rgba(255,255,255,0.15)';
+    ctx.lineWidth = 1;
+    ctx.stroke();
+
+    // SSS (sub-surface scattering glow)
+    const ssg = ctx.createRadialGradient(g.cx, surfY + 20, 5, g.cx, surfY + 20, g.r * 0.8);
+    ssg.addColorStop(0, this._alphaColor(col, 0.12));
+    ssg.addColorStop(1, 'rgba(0,0,0,0)');
+    ctx.fillStyle = ssg;
+    ctx.fillRect(left, surfY, right - left, g.r * 2);
+
+    ctx.restore();
+  }
+
+  _drawPrecipitate() {
+    const { ctx } = this;
+    const { cx, cy, r } = this._g;
+    if (this._precipLevel <= 0 && this._precipParts.length === 0) return;
+
+    // everything clipped to flask shape
+    ctx.save();
+    this._flaskPath(ctx);
+    ctx.clip();
+
+    // settled layer at flask bottom
+    if (this._precipLevel > 0 && this._precipColor) {
+      const layerH = r * 0.30 * this._precipLevel;
+      const layerY = cy + r - layerH;
+      const pg = ctx.createLinearGradient(0, layerY, 0, cy + r);
+      pg.addColorStop(0, this._alphaColor(this._precipColor, 0.35));
+      pg.addColorStop(1, this._alphaColor(this._precipColor, 0.65));
+      ctx.fillStyle = pg;
+      ctx.fillRect(cx - r - 2, layerY, r * 2 + 4, layerH);
+    }
+
+    // falling particles (also clipped)
+    for (const p of this._precipParts) {
+      if (p.delay > 0) continue;
+      ctx.beginPath();
+      ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
+      ctx.fillStyle = this._alphaColor(this._precipColor || '#FFF', p.life * 0.65);
+      ctx.fill();
+    }
+
+    ctx.restore();
+  }
+
+  _drawBubbles() {
+    const { ctx } = this;
+    for (const b of this._bubbles) {
+      if (b.delay > 0) continue;
+      ctx.beginPath();
+      ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2);
+      ctx.strokeStyle = `rgba(255,255,255,${b.life * 0.35})`;
+      ctx.lineWidth = 0.7;
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.arc(b.x - b.r * 0.3, b.y - b.r * 0.3, b.r * 0.25, 0, Math.PI * 2);
+      ctx.fillStyle = `rgba(255,255,255,${b.life * 0.3})`;
+      ctx.fill();
+    }
+    // gas label above neck
+    if (this._gasLabel && this._bubbles.length > 0) {
+      const { cx, nt } = this._g;
+      ctx.save();
+      ctx.font = '11px "JetBrains Mono", monospace';
+      ctx.fillStyle = 'rgba(255,255,255,0.45)';
+      ctx.textAlign = 'center';
+      ctx.fillText(this._gasLabel + ' ↑', cx, nt - 14);
+      ctx.restore();
+    }
+  }
+
+  _drawPourDrops() {
+    const { ctx } = this;
+    for (const d of this._pourDrops) {
+      ctx.beginPath();
+      ctx.arc(d.x, d.y, d.r, 0, Math.PI * 2);
+      ctx.fillStyle = this._alphaColor(d.color, d.life * 0.7);
+      ctx.fill();
+    }
+  }
+
+  _drawSteam() {
+    const { ctx } = this;
+    for (const s of this._steamParts) {
+      if (s.delay > 0) continue;
+      ctx.beginPath();
+      ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);
+      ctx.fillStyle = `rgba(200,200,220,${s.life * 0.13})`;
+      ctx.fill();
+    }
+  }
+
+  _drawSparks() {
+    const { ctx } = this;
+    for (const s of this._sparkParts) {
+      if (s.delay > 0) continue;
+      ctx.save();
+      ctx.beginPath();
+      ctx.arc(s.x, s.y, 2.2, 0, Math.PI * 2);
+      ctx.fillStyle = `rgba(255,200,60,${s.life * 0.85})`;
+      ctx.shadowColor = '#FFD060';
+      ctx.shadowBlur = 7;
+      ctx.fill();
+      ctx.restore();
+    }
+  }
+
+  _drawFlaskGlass() {
+    const { ctx } = this;
+    const g = this._g;
+
+    // glass body
+    ctx.save();
+    this._flaskPath(ctx);
+
+    // glass fill
+    const gf = ctx.createLinearGradient(g.cx - g.r, g.nt, g.cx + g.r, g.cy + g.r);
+    gf.addColorStop(0, 'rgba(255,255,255,0.05)');
+    gf.addColorStop(0.4, 'rgba(255,255,255,0.07)');
+    gf.addColorStop(1, 'rgba(255,255,255,0.03)');
+    ctx.fillStyle = gf;
+    ctx.fill();
+
+    // glass outline
+    ctx.strokeStyle = 'rgba(255,255,255,0.14)';
+    ctx.lineWidth = 1.8;
+    ctx.stroke();
+
+    // heat glow
+    if (this._heatGlow > 0) {
+      ctx.shadowColor = `rgba(255,80,20,${this._heatGlow * 0.45})`;
+      ctx.shadowBlur = 30;
+      ctx.strokeStyle = `rgba(255,120,60,${this._heatGlow * 0.35})`;
+      ctx.stroke();
+      ctx.shadowBlur = 0;
+    }
+    ctx.restore();
+
+    // specular highlight — left edge
+    ctx.save();
+    ctx.beginPath();
+    ctx.moveTo(g.cx - g.nw + 2, g.nt + 6);
+    ctx.lineTo(g.cx - g.nw + 2, g.nb + 5);
+    ctx.bezierCurveTo(
+      g.cx - g.nw + 2, g.cy - g.r * 0.3,
+      g.cx - g.r * 0.75, g.cy - g.r * 0.05,
+      g.cx - g.r + 5, g.cy + g.r * 0.3
+    );
+    ctx.strokeStyle = 'rgba(255,255,255,0.10)';
+    ctx.lineWidth = 2.5;
+    ctx.stroke();
+    ctx.restore();
+
+    // neck rim
+    ctx.save();
+    ctx.beginPath();
+    ctx.ellipse(g.cx, g.nt, g.nw + 1, 3, 0, 0, Math.PI * 2);
+    ctx.strokeStyle = 'rgba(255,255,255,0.18)';
+    ctx.lineWidth = 1.5;
+    ctx.stroke();
+    ctx.restore();
+
+    // graduated marks on neck
+    ctx.save();
+    ctx.strokeStyle = 'rgba(255,255,255,0.07)';
+    ctx.lineWidth = 0.5;
+    for (let i = 1; i <= 3; i++) {
+      const my = g.nt + (g.nb - g.nt) * i / 4;
+      ctx.beginPath();
+      ctx.moveTo(g.cx - g.nw + 3, my);
+      ctx.lineTo(g.cx - g.nw + 10, my);
+      ctx.stroke();
+    }
+    ctx.restore();
+  }
+
+  /* ── Чипы добавленных реагентов (с кнопкой удаления) ──────── */
+
+  _drawChips() {
+    if (this.mixContents.length === 0) return;
+    const { ctx, W } = this;
+    const { nt } = this._g;
+
+    this._chipLayout = [];
+    const chipH = 22, gap = 6;
+    let totalW = 0;
+    const labels = this.mixContents.map(f => {
+      const lbl = this._shortFormula(f);
+      ctx.font = 'bold 10px "JetBrains Mono", monospace';
+      const w = ctx.measureText(lbl).width + 28; // padding + "×" button
+      totalW += w + gap;
+      return { formula: f, label: lbl, w };
+    });
+    totalW -= gap;
+
+    let x = (W - totalW) / 2;
+    const y = Math.max(6, nt - 32);
+
+    for (const { formula, label, w } of labels) {
+      const sub = ChemSandboxSim.SUBSTANCES[formula];
+
+      // chip bg
+      ctx.save();
+      ctx.beginPath();
+      this._roundRect(ctx, x, y, w, chipH, 6);
+      ctx.fillStyle = 'rgba(255,255,255,0.06)';
+      ctx.fill();
+      ctx.strokeStyle = this._alphaColor(sub.color, 0.4);
+      ctx.lineWidth = 1;
+      ctx.stroke();
+
+      // color dot
+      ctx.beginPath();
+      ctx.arc(x + 10, y + chipH / 2, 4, 0, Math.PI * 2);
+      ctx.fillStyle = sub.color;
+      ctx.fill();
+
+      // label
+      ctx.font = 'bold 10px "JetBrains Mono", monospace';
+      ctx.fillStyle = 'rgba(255,255,255,0.8)';
+      ctx.textAlign = 'left';
+      ctx.fillText(label, x + 18, y + chipH / 2 + 3.5);
+
+      // "×" remove button
+      const xBtnX = x + w - 14;
+      ctx.font = 'bold 11px sans-serif';
+      ctx.fillStyle = 'rgba(255,100,100,0.6)';
+      ctx.textAlign = 'center';
+      ctx.fillText('×', xBtnX, y + chipH / 2 + 4);
+      ctx.restore();
+
+      this._chipLayout.push({ formula, x, y, w, h: chipH, xBtnX });
+      x += w + gap;
+    }
+  }
+
+  _drawEquation() {
+    if (!this.lastReaction) return;
+    const { ctx, W } = this;
+    const { cy, r } = this._g;
+    const rx = this.lastReaction;
+    let y = cy + r + 14;
+
+    ctx.save();
+    ctx.textAlign = 'center';
+
+    // ── Молекулярное уравнение ──
+    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);
+    y += 22;
+
+    // ── Тип реакции + пояснение ──
+    const tp = rx.type;
+    const tpColor = tp === 'Нет реакции' ? '#EF476F'
+                  : tp === 'Индикатор' ? '#9B59B6'
+                  : tp === 'Нейтрализация' ? '#FFD166'
+                  : tp === 'Замещение' ? '#06D6E0'
+                  : tp === 'Обмен' ? '#7BF5A4'
+                  : tp === 'Акт. металл' ? '#EF476F' : '#aaa';
+    ctx.font = 'bold 14px sans-serif';
+    ctx.fillStyle = tpColor;
+    ctx.fillText(tp, W / 2, y);
+    y += 18;
+
+    // why explanation
+    if (rx.why) {
+      ctx.font = '13px sans-serif';
+      ctx.fillStyle = 'rgba(255,255,255,0.55)';
+      ctx.fillText(rx.why, W / 2, y);
+      y += 17;
+    }
+
+    // ── Полное ионное уравнение ──
+    if (rx.ionFull) {
+      ctx.font = '13px "JetBrains Mono", monospace';
+      ctx.fillStyle = 'rgba(155,200,255,0.60)';
+      ctx.fillText('Полн.: ' + rx.ionFull, W / 2, y);
+      y += 16;
+    }
+
+    // ── Сокращённое ионное уравнение ──
+    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);
+      y += 16;
+    }
+
+    ctx.restore();
+
+    // ── Мини ряд активности (для замещения) ──
+    if (rx.type === 'Замещение' || rx.type === 'Нет реакции' || rx.type === 'Акт. металл') {
+      this._drawActivitySeries(y + 2);
+    }
+  }
+
+  _drawActivitySeries(topY) {
+    const { ctx, W } = this;
+    const series = ChemSandboxSim.ACTIVITY_SERIES;
+    const rx = this.lastReaction;
+    if (!rx) return;
+
+    // find which metals are involved
+    const involved = new Set();
+    for (const f of rx.r) {
+      for (const m of series) {
+        if (f === m.sym || f === m.sym.replace('₂', '2')) involved.add(m.sym);
+      }
+    }
+    const metalMap = { 'Zn': 'Zn', 'Fe': 'Fe', 'Cu': 'Cu', 'Mg': 'Mg', 'Na': 'Na', 'Ag': 'Ag' };
+    for (const f of rx.r) {
+      if (metalMap[f]) involved.add(f);
+    }
+    for (const f of rx.r) {
+      if (f.startsWith('Cu')) involved.add('Cu');
+      if (f.startsWith('Ag')) involved.add('Ag');
+      if (f.startsWith('Fe') && !f.includes('Cl')) involved.add('Fe');
+    }
+
+    if (involved.size === 0) return;
+
+    const cellW = 28, cellH = 18, gap = 2;
+    const totalW = series.length * (cellW + gap) - gap;
+    const startX = (W - totalW) / 2;
+    const y = topY;
+
+    ctx.save();
+    ctx.font = '8px sans-serif';
+    ctx.fillStyle = 'rgba(255,255,255,0.22)';
+    ctx.textAlign = 'center';
+    ctx.fillText('Ряд активности металлов', W / 2, y);
+
+    const rowY = y + 5;
+    for (let i = 0; i < series.length; i++) {
+      const m = series[i];
+      const x = startX + i * (cellW + gap);
+      const isInvolved = involved.has(m.sym) || involved.has(m.sym.replace('₂', '2'));
+      const isH = m.sym === 'H₂';
+
+      ctx.beginPath();
+      this._roundRect(ctx, x, rowY, cellW, cellH, 3);
+      ctx.fillStyle = isInvolved ? 'rgba(6,214,224,0.15)' : isH ? 'rgba(255,200,60,0.08)' : 'rgba(255,255,255,0.03)';
+      ctx.fill();
+      ctx.strokeStyle = isInvolved ? 'rgba(6,214,224,0.45)' : isH ? 'rgba(255,200,60,0.20)' : 'rgba(255,255,255,0.06)';
+      ctx.lineWidth = 0.7;
+      ctx.stroke();
+
+      ctx.font = isInvolved ? 'bold 9px "JetBrains Mono", monospace' : '8px "JetBrains Mono", monospace';
+      ctx.fillStyle = isInvolved ? '#06D6E0' : isH ? '#FFD166' : 'rgba(255,255,255,0.35)';
+      ctx.textAlign = 'center';
+      ctx.fillText(m.sym, x + cellW / 2, rowY + cellH / 2 + 3);
+    }
+
+    ctx.fillStyle = 'rgba(255,255,255,0.15)';
+    ctx.font = '9px sans-serif';
+    ctx.fillText('← активнее', startX + 40, rowY + cellH + 10);
+    ctx.fillText('менее активные →', startX + totalW - 60, rowY + cellH + 10);
+
+    ctx.restore();
+  }
+
+  _drawShelf() {
+    const { ctx, W } = this;
+    const { shelfY, shelfH } = this._g;
+    if (shelfH < 30) return;
+
+    // shelf background
+    ctx.save();
+    ctx.fillStyle = 'rgba(255,255,255,0.012)';
+    ctx.fillRect(0, shelfY - 4, W, shelfH + 8);
+    ctx.strokeStyle = 'rgba(255,255,255,0.06)';
+    ctx.lineWidth = 0.5;
+    ctx.beginPath(); ctx.moveTo(0, shelfY - 4); ctx.lineTo(W, shelfY - 4); ctx.stroke();
+    ctx.restore();
+
+    const subs = ChemSandboxSim.SUBSTANCES;
+    const keys = Object.keys(subs).filter(k =>
+      this.filterCat === 'all' || subs[k].cat === this.filterCat
+    );
+
+    // 2-row grid layout
+    const rows = 2;
+    const bW = 68, bH = 60, gapX = 7, gapY = 6;
+    const cols = Math.ceil(keys.length / rows);
+    const totalW = cols * (bW + gapX) - gapX;
+    const padX = 12;
+    const visW = W - padX * 2;
+
+    // clamp scroll
+    const maxScroll = Math.max(0, totalW - visW);
+    this._shelfScroll = Math.max(0, Math.min(maxScroll, this._shelfScroll));
+    const scrollOff = -this._shelfScroll;
+
+    const gridTop = shelfY + Math.max(2, (shelfH - (bH * rows + gapY * (rows - 1))) / 2);
+
+    // clip to shelf region
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(padX - 2, shelfY - 4, visW + 4, shelfH + 8);
+    ctx.clip();
+
+    // store layout for click detection
+    const layoutArr = [];
+
+    for (let i = 0; i < keys.length; i++) {
+      const k = keys[i];
+      const s = subs[k];
+      const col = Math.floor(i / rows);
+      const row = i % rows;
+      const x = padX + col * (bW + gapX) + scrollOff;
+      const y = gridTop + row * (bH + gapY);
+
+      // skip if off-screen
+      if (x + bW < padX - 10 || x > W - padX + 10) {
+        layoutArr.push({ formula: k, x, y, w: bW, h: bH });
+        continue;
+      }
+
+      const inMix = this.mixContents.includes(k);
+      const isHov = this._shelfHover === i;
+
+      // card background
+      ctx.beginPath();
+      this._roundRect(ctx, x, y, bW, bH, 8);
+      const bgAlpha = inMix ? 0.16 : isHov ? 0.07 : 0.035;
+      ctx.fillStyle = inMix
+        ? `rgba(75,205,155,${bgAlpha})`
+        : `rgba(255,255,255,${bgAlpha})`;
+      ctx.fill();
+      ctx.strokeStyle = inMix
+        ? 'rgba(75,205,155,0.55)'
+        : isHov ? 'rgba(255,255,255,0.18)' : 'rgba(255,255,255,0.07)';
+      ctx.lineWidth = inMix ? 1.6 : 1;
+      ctx.stroke();
+
+      // color swatch (rounded rect, not dot)
+      const swX = x + 8, swY = y + 7, swW = bW - 16, swH = 14;
+      ctx.beginPath();
+      this._roundRect(ctx, swX, swY, swW, swH, 4);
+      ctx.fillStyle = this._alphaColor(s.color, inMix ? 0.55 : 0.35);
+      ctx.fill();
+
+      // formula (main label)
+      ctx.font = 'bold 12px "JetBrains Mono", monospace';
+      ctx.fillStyle = inMix ? '#7BF5A4' : 'rgba(255,255,255,0.75)';
+      ctx.textAlign = 'center';
+      ctx.fillText(this._shortFormula(k), x + bW / 2, y + 37);
+
+      // name
+      ctx.font = '8.5px "Manrope", sans-serif';
+      ctx.fillStyle = 'rgba(255,255,255,0.30)';
+      ctx.fillText(s.name.substring(0, 13), x + bW / 2, y + 50);
+
+      // in-mix badge
+      if (inMix) {
+        ctx.beginPath();
+        ctx.arc(x + bW - 9, y + 9, 7, 0, Math.PI * 2);
+        ctx.fillStyle = 'rgba(75,205,155,0.65)';
+        ctx.fill();
+        ctx.font = 'bold 9px sans-serif';
+        ctx.fillStyle = '#fff';
+        ctx.textAlign = 'center';
+        ctx.fillText('✓', x + bW - 9, y + 12.5);
+      }
+
+      layoutArr.push({ formula: k, x, y, w: bW, h: bH });
+    }
+
+    ctx.restore();
+
+    // scroll arrows if content overflows
+    if (maxScroll > 0) {
+      ctx.save();
+      const arrowY = shelfY + shelfH / 2;
+      // left arrow
+      if (this._shelfScroll > 0) {
+        ctx.beginPath();
+        ctx.moveTo(padX - 1, arrowY);
+        ctx.lineTo(padX + 7, arrowY - 8);
+        ctx.lineTo(padX + 7, arrowY + 8);
+        ctx.closePath();
+        ctx.fillStyle = 'rgba(255,255,255,0.15)';
+        ctx.fill();
+      }
+      // right arrow
+      if (this._shelfScroll < maxScroll) {
+        const rx = W - padX + 1;
+        ctx.beginPath();
+        ctx.moveTo(rx, arrowY);
+        ctx.lineTo(rx - 8, arrowY - 8);
+        ctx.lineTo(rx - 8, arrowY + 8);
+        ctx.closePath();
+        ctx.fillStyle = 'rgba(255,255,255,0.15)';
+        ctx.fill();
+      }
+      ctx.restore();
+    }
+
+    this._shelfKeys    = keys;
+    this._shelfLayout  = layoutArr;
+    this._shelfStartX  = padX;
+    this._shelfBottleW = bW;
+    this._shelfGap     = gapX;
+    this._shelfBottleY = gridTop;
+    this._shelfBottleH = bH;
+  }
+
+  _drawDragGhost() {
+    if (!this._drag) return;
+    const { ctx } = this;
+    const { formula, x, y } = this._drag;
+    const sub = ChemSandboxSim.SUBSTANCES[formula];
+    if (!sub) return;
+
+    ctx.save();
+    ctx.globalAlpha = 0.7;
+    // small bottle ghost
+    ctx.beginPath();
+    this._roundRect(ctx, x - 18, y - 22, 36, 44, 5);
+    ctx.fillStyle = 'rgba(75,205,155,0.15)';
+    ctx.fill();
+    ctx.strokeStyle = 'rgba(75,205,155,0.5)';
+    ctx.lineWidth = 1.5;
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.arc(x, y - 8, 5, 0, Math.PI * 2);
+    ctx.fillStyle = sub.color;
+    ctx.fill();
+    ctx.font = '9px "JetBrains Mono", monospace';
+    ctx.fillStyle = '#7BF5A4';
+    ctx.textAlign = 'center';
+    ctx.fillText(this._shortFormula(formula), x, y + 10);
+    ctx.globalAlpha = 1;
+    ctx.restore();
+  }
+
+  _drawHint() {
+    const { ctx, W } = this;
+    const { cy } = this._g;
+    ctx.save();
+    ctx.textAlign = 'center';
+    ctx.font = '14px sans-serif';
+    ctx.fillStyle = 'rgba(255,255,255,0.18)';
+    ctx.fillText('Выберите реагенты на полке или панели', W / 2, cy);
+    ctx.font = '36px serif';
+    ctx.fillStyle = 'rgba(255,255,255,0.06)';
+    ctx.fillText('\u{1F9EA}', W / 2, cy - 30);
+    ctx.restore();
+  }
+
+  _drawQuizOverlay() {
+    if (!this._quizTask) return;
+    const { ctx, W } = this;
+    const { nt } = this._g;
+
+    ctx.save();
+    ctx.textAlign = 'center';
+
+    // question banner at top
+    const bannerY = Math.max(4, nt - 58);
+    ctx.fillStyle = 'rgba(155,93,229,0.12)';
+    ctx.beginPath();
+    this._roundRect(ctx, W / 2 - 180, bannerY, 360, 24, 8);
+    ctx.fill();
+    ctx.strokeStyle = 'rgba(155,93,229,0.30)';
+    ctx.lineWidth = 1;
+    ctx.stroke();
+
+    ctx.font = 'bold 11px "Manrope", sans-serif';
+    ctx.fillStyle = '#C9A0FF';
+    ctx.fillText(this._quizTask.question, W / 2, bannerY + 15);
+
+    // score
+    ctx.font = '9px sans-serif';
+    ctx.fillStyle = 'rgba(255,255,255,0.35)';
+    ctx.textAlign = 'right';
+    ctx.fillText(`${this._quizScore}/${this._quizTotal}`, W - 12, bannerY + 14);
+
+    // result flash
+    if (this._quizResult && this._quizResultT > 0) {
+      const alpha = Math.min(1, this._quizResultT / 0.5);
+      const isOk = this._quizResult === 'correct';
+      ctx.textAlign = 'center';
+      ctx.font = 'bold 18px "Manrope", sans-serif';
+      ctx.fillStyle = isOk
+        ? `rgba(123,245,164,${alpha * 0.9})`
+        : `rgba(239,71,111,${alpha * 0.9})`;
+      ctx.fillText(isOk ? 'Верно!' : 'Неверно', W / 2, bannerY + 50);
+      if (!isOk && this._quizTask) {
+        ctx.font = '10px "JetBrains Mono", monospace';
+        ctx.fillStyle = `rgba(255,255,255,${alpha * 0.45})`;
+        ctx.fillText('Ответ: ' + this._quizTask.rx.eq, W / 2, bannerY + 65);
+      }
+    }
+
+    ctx.restore();
+  }
+
+  /* ── Мышь ──────────────────────────────────────────────────── */
+
+  _hitShelfCard(mx, my) {
+    if (!this._shelfLayout) return null;
+    for (let i = 0; i < this._shelfLayout.length; i++) {
+      const c = this._shelfLayout[i];
+      if (mx >= c.x && mx <= c.x + c.w && my >= c.y && my <= c.y + c.h) return i;
+    }
+    return null;
+  }
+
+  handleClick(e) {
+    const rect = this.canvas.getBoundingClientRect();
+    const mx = e.clientX - rect.left;
+    const my = e.clientY - rect.top;
+
+    // check chip "×" buttons first
+    for (const chip of this._chipLayout) {
+      if (mx >= chip.xBtnX - 8 && mx <= chip.xBtnX + 8 && my >= chip.y && my <= chip.y + chip.h) {
+        this.removeFromMix(chip.formula);
+        return;
+      }
+    }
+
+    // check shelf cards (2-row grid)
+    const idx = this._hitShelfCard(mx, my);
+    if (idx !== null && this._shelfLayout[idx]) {
+      this.addToMix(this._shelfLayout[idx].formula);
+      return;
+    }
+  }
+
+  handleMouseDown(e) {
+    if (e.button !== 0) return;
+    const rect = this.canvas.getBoundingClientRect();
+    const mx = e.clientX - rect.left;
+    const my = e.clientY - rect.top;
+
+    const idx = this._hitShelfCard(mx, my);
+    if (idx !== null && this._shelfLayout[idx]) {
+      this._drag = { formula: this._shelfLayout[idx].formula, x: mx, y: my, startX: mx, startY: my };
+    }
+  }
+
+  handleMouseMove(e) {
+    const rect = this.canvas.getBoundingClientRect();
+    const mx = e.clientX - rect.left;
+    const my = e.clientY - rect.top;
+
+    if (this._drag) {
+      this._drag.x = mx;
+      this._drag.y = my;
+      return;
+    }
+
+    // hover detection
+    const idx = this._hitShelfCard(mx, my);
+    this._shelfHover = idx !== null ? idx : -1;
+  }
+
+  handleMouseUp(e) {
+    if (!this._drag) return;
+    const d = this._drag;
+    this._drag = null;
+
+    // if dragged into flask area — add
+    const { cx, cy, r, nt } = this._g;
+    const dx = d.x - cx, dy = d.y - cy;
+    const inFlask = (dy > nt - cy - 20) && (dx * dx + dy * dy < (r + 30) * (r + 30));
+    const movedEnough = Math.abs(d.x - d.startX) + Math.abs(d.y - d.startY) > 10;
+
+    if (inFlask && movedEnough) {
+      this.addToMix(d.formula);
+    }
+  }
+
+  handleWheel(e) {
+    const rect = this.canvas.getBoundingClientRect();
+    const my = e.clientY - rect.top;
+    const { shelfY, shelfH } = this._g;
+    // only scroll when cursor is over shelf area
+    if (my >= shelfY - 10 && my <= shelfY + shelfH + 10) {
+      e.preventDefault();
+      this._shelfScroll += e.deltaY * 0.8;
+    }
+  }
+
+  handleContextMenu(e) {
+    e.preventDefault();
+    this.reset();
+  }
+
+  /* ── Режим заданий (квиз) ──────────────────────────────────── */
+
+  startQuiz() {
+    this._quizMode  = true;
+    this._quizScore = 0;
+    this._quizTotal = 0;
+    this.filterCat  = 'all'; // show all reagents so quiz tasks are always solvable
+    this._nextQuizTask();
+    this._fireQuizInfo();
+  }
+
+  stopQuiz() {
+    this._quizMode   = false;
+    this._quizTask   = null;
+    this._quizResult = null;
+    this.reset();
+    this._fireQuizInfo();
+  }
+
+  _nextQuizTask() {
+    this.reset();
+    // pick a random non-indicator, non-"no reaction" reaction
+    const pool = ChemSandboxSim.REACTIONS.filter(rx =>
+      rx.type !== 'Индикатор' && rx.type !== 'Нет реакции'
+    );
+    const rx = pool[Math.floor(Math.random() * pool.length)];
+    const questions = this._generateQuestions(rx);
+    const q = questions[Math.floor(Math.random() * questions.length)];
+    this._quizTask   = { rx, question: q, answer: [...rx.r] };
+    this._quizResult = null;
+    this._fireQuizInfo();
+  }
+
+  _generateQuestions(rx) {
+    const prods = this._productsStr(rx);
+    const questions = [];
+    if (rx.fx.precip) {
+      questions.push(`Получи осадок ${rx.fx.precip.n}`);
+    }
+    if (rx.fx.gas) {
+      questions.push(`Получи газ ${rx.fx.gas}`);
+    }
+    questions.push(`Проведи реакцию: ${prods}`);
+    if (rx.type === 'Нейтрализация') {
+      questions.push('Проведи реакцию нейтрализации');
+    }
+    if (rx.type === 'Замещение') {
+      questions.push('Проведи реакцию замещения');
+    }
+    return questions;
+  }
+
+  _checkQuizAnswer() {
+    if (!this._quizMode || !this._quizTask) return;
+    const needed = this._quizTask.answer;
+    const has = this.mixContents;
+    if (has.length < 2) return;
+
+    // check if the correct reagents are present
+    const correct = needed.every(f => has.includes(f));
+    this._quizTotal++;
+    if (correct) {
+      this._quizScore++;
+      this._quizResult = 'correct';
+    } else {
+      this._quizResult = 'wrong';
+    }
+    this._quizResultT = 2.5; // seconds to show result
+    this._fireQuizInfo();
+  }
+
+  _fireQuizInfo() {
+    if (this.onQuizUpdate) {
+      this.onQuizUpdate({
+        active:   this._quizMode,
+        question: this._quizTask ? this._quizTask.question : null,
+        score:    this._quizScore,
+        total:    this._quizTotal,
+        result:   this._quizResult,
+        answer:   this._quizTask ? this._quizTask.rx.eq : null,
+      });
+    }
+  }
+
+  /* ── Утилиты ───────────────────────────────────────────────── */
+
+  _roundRect(ctx, x, y, w, h, rad) {
+    ctx.moveTo(x + rad, y);
+    ctx.lineTo(x + w - rad, y);
+    ctx.quadraticCurveTo(x + w, y, x + w, y + rad);
+    ctx.lineTo(x + w, y + h - rad);
+    ctx.quadraticCurveTo(x + w, y + h, x + w - rad, y + h);
+    ctx.lineTo(x + rad, y + h);
+    ctx.quadraticCurveTo(x, y + h, x, y + h - rad);
+    ctx.lineTo(x, y + rad);
+    ctx.quadraticCurveTo(x, y, x + rad, y);
+  }
+
+  _alphaColor(hex, alpha) {
+    if (!hex || !hex.startsWith('#')) return `rgba(128,128,128,${alpha})`;
+    const rv = parseInt(hex.slice(1, 3), 16) || 0;
+    const gv = parseInt(hex.slice(3, 5), 16) || 0;
+    const bv = parseInt(hex.slice(5, 7), 16) || 0;
+    return `rgba(${rv},${gv},${bv},${alpha})`;
+  }
+
+  _blendColors(c1, c2, t) {
+    const h = (s) => s.startsWith('#') ? s.slice(1) : '888888';
+    const p = (s, o) => parseInt(s.slice(o, o + 2), 16) || 0;
+    const h1 = h(c1), h2 = h(c2);
+    const rv = Math.round(p(h1, 0) * (1 - t) + p(h2, 0) * t);
+    const gv = Math.round(p(h1, 2) * (1 - t) + p(h2, 2) * t);
+    const bv = Math.round(p(h1, 4) * (1 - t) + p(h2, 4) * t);
+    return '#' + [rv, gv, bv].map(v => v.toString(16).padStart(2, '0')).join('');
+  }
+
+  _lerpColor(from, to, t) {
+    const safe = c => (c && c.startsWith('#')) ? c : '#6EB4D7';
+    return this._blendColors(safe(from), safe(to), Math.min(1, t));
+  }
+
+  _shortFormula(key) {
+    const map = {
+      'CH3COOH': 'CH₃COOH', 'Ca(OH)2': 'Ca(OH)₂', 'NH3·H2O': 'NH₃·H₂O',
+      'H2SO4': 'H₂SO₄', 'HNO3': 'HNO₃', 'Na2CO3': 'Na₂CO₃',
+      'CuSO4': 'CuSO₄', 'BaCl2': 'BaCl₂', 'AgNO3': 'AgNO₃',
+      'FeCl3': 'FeCl₃', 'Pb(NO3)2': 'Pb(NO₃)₂', 'K2CrO4': 'K₂CrO₄',
+      'H2O': 'H₂O', 'Phenolphthalein': 'ФФт', 'Litmus': 'Лакм.',
+      'MethylOrange': 'МетОр.',
+    };
+    return map[key] || key;
+  }
+
+  _fireInfo() {
+    if (this.onUpdate) this.onUpdate(this.info());
+  }
+}
diff --git a/frontend/js/labs/circuit.js b/frontend/js/labs/circuit.js
new file mode 100644
index 0000000..f0dac00
--- /dev/null
+++ b/frontend/js/labs/circuit.js
@@ -0,0 +1,1308 @@
+/**
+ * CircuitSim — Enhanced Electric Circuits Simulation v2
+ * MNA solver · L-shape wires · Drag · Undo/Redo · Tooltip
+ * New: Capacitor · Diode · LED · AC source · Junction dots
+ * Keyboard: W R B S L C D A V E  ·  Del  ·  Ctrl+Z/Y
+ */
+'use strict';
+
+function distToSegment(px, py, x1, y1, x2, y2) {
+  const dx = x2 - x1, dy = y2 - y1;
+  const len2 = dx * dx + dy * dy;
+  if (len2 < 1) return Math.hypot(px - x1, py - y1);
+  const t = Math.max(0, Math.min(1, ((px - x1) * dx + (py - y1) * dy) / len2));
+  return Math.hypot(px - (x1 + t * dx), py - (y1 + t * dy));
+}
+
+function _compLen(c) {
+  return Math.max(1, Math.abs(c.x2 - c.x1) + Math.abs(c.y2 - c.y1));
+}
+
+class CircuitSim {
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.ctx    = canvas.getContext('2d');
+
+    // State
+    this.components = [];
+    this.addMode    = 'wire';
+    this.R_value    = 10;
+    this.U_value    = 9;
+    this.C_value    = 100;   // µF (display label)
+    this.acFreq     = 2;     // Hz for AC source
+    this.ledColor   = '#7BF5A4';
+
+    // Interaction
+    this._drawing     = null;   // {x1, y1} while dragging new component
+    this._ghostEnd    = null;   // {x2, y2} cursor snap
+    this._hovered     = null;   // id of hovered component
+    this._selected    = null;   // id of selected component
+    this._dragIdx     = null;   // index of component being dragged
+    this._dragStart   = null;   // {gx, gy} grid anchor at drag start
+    this._dragOrigPos = null;   // original {x1,y1,x2,y2} before drag
+    this._didDrag     = false;  // whether mouse actually moved during drag
+
+    // Solver
+    this._nextId    = 0;
+    this._solution  = null;
+    this._diodeR    = new Map(); // component id <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> effective R
+    this._simTime   = 0;
+    this._hasAC     = false;
+
+    // Animation
+    this._raf     = null;
+    this._lastTs  = null;
+
+    // Undo stack
+    this._history    = [];
+    this._historyIdx = -1;
+
+    // Grid
+    this.GW   = 22;
+    this.GH   = 14;
+    this.CELL = 40;
+    this.ox   = 0;
+    this.oy   = 0;
+    this.W    = 0;
+    this.H    = 0;
+
+    this.onUpdate     = null;
+    this.onModeChange = null; // called when keyboard changes addMode
+    this._keyHandler  = null; // stored for destroy()
+
+    this.fit();
+    this._bindEvents();
+  }
+
+  /* ─── Geometry ─────────────────────────────────────────────────────────── */
+
+  _nodePixel(gx, gy) {
+    return { x: this.ox + gx * this.CELL, y: this.oy + gy * this.CELL };
+  }
+
+  _snapGrid(px, py) {
+    return {
+      gx: Math.max(0, Math.min(this.GW, Math.round((px - this.ox) / this.CELL))),
+      gy: Math.max(0, Math.min(this.GH, Math.round((py - this.oy) / this.CELL)))
+    };
+  }
+
+  /* ─── Undo / Redo ──────────────────────────────────────────────────────── */
+
+  _pushHistory() {
+    this._history.splice(this._historyIdx + 1);
+    this._history.push(JSON.stringify(this.components.map(c => ({
+      id: c.id, type: c.type,
+      x1: c.x1, y1: c.y1, x2: c.x2, y2: c.y2,
+      value: c.value, open: c.open,
+      ledColor: c.ledColor, acFreq: c.acFreq
+    }))));
+    if (this._history.length > 20) this._history.shift();
+    this._historyIdx = this._history.length - 1;
+  }
+
+  undo() {
+    if (this._historyIdx <= 0) return;
+    this._historyIdx--;
+    this._applyHistory();
+  }
+
+  redo() {
+    if (this._historyIdx >= this._history.length - 1) return;
+    this._historyIdx++;
+    this._applyHistory();
+  }
+
+  _applyHistory() {
+    const snap = JSON.parse(this._history[this._historyIdx]);
+    this._diodeR.clear();
+    this.components = snap.map(s => {
+      if (s.type === 'diode' || s.type === 'led') this._diodeR.set(s.id, 1e9);
+      return { ...s, _I: 0, _v1: 0, _v2: 0, _t: Math.random() };
+    });
+    this._nextId = Math.max(0, ...this.components.map(c => c.id + 1));
+    this._selected = null;
+    this._solve();
+    this.draw();
+    if (this.onUpdate) this.onUpdate(this.info());
+  }
+
+  /* ─── Component resistance ─────────────────────────────────────────────── */
+
+  _compR(c) {
+    switch (c.type) {
+      case 'wire':      return 0.001;
+      case 'ammeter':   return 0.001;
+      case 'voltmeter': return 1e7;
+      case 'resistor':  return Math.max(0.001, c.value || 10);
+      case 'lamp':      return 20;
+      case 'capacitor': return 1e7;   // open circuit in DC
+      case 'switch':    return c.open ? 1e9 : 0.001;
+      case 'diode':
+      case 'led':       return this._diodeR.get(c.id) ?? 1e9;
+      default:          return 1;
+    }
+  }
+
+  /* ─── MNA Solver ───────────────────────────────────────────────────────── */
+
+  _buildNodes() {
+    const allKeys = new Set();
+    for (const c of this.components) {
+      allKeys.add(`${c.x1},${c.y1}`);
+      allKeys.add(`${c.x2},${c.y2}`);
+    }
+    const parent = new Map();
+    for (const k of allKeys) parent.set(k, k);
+
+    const find = k => {
+      while (parent.get(k) !== k) {
+        parent.set(k, parent.get(parent.get(k)));
+        k = parent.get(k);
+      }
+      return k;
+    };
+    const union = (a, b) => parent.set(find(a), find(b));
+
+    for (const c of this.components) {
+      if (c.type === 'wire' || (c.type === 'switch' && !c.open)) {
+        union(`${c.x1},${c.y1}`, `${c.x2},${c.y2}`);
+      }
+    }
+
+    const roots = new Set();
+    for (const k of allKeys) roots.add(find(k));
+    const nodeId = new Map();
+    let n = 0;
+    for (const r of roots) nodeId.set(r, n++);
+
+    return { nNodes: n, nodeOf: key => nodeId.get(find(key)) };
+  }
+
+  _buildMatrix(nodeOf, nNodes) {
+    const vsrcs = this.components.filter(c => c.type === 'battery' || c.type === 'ac');
+    const nb = vsrcs.length;
+    if (nb === 0) return null;
+    const size = nNodes - 1 + nb;
+    if (size <= 0) return null;
+
+    const G = Array.from({ length: size }, () => new Float64Array(size));
+    const I = new Float64Array(size);
+
+    const stamp = (r, c, v) => {
+      if (r >= 0 && c >= 0 && r < size && c < size) G[r][c] += v;
+    };
+
+    for (const comp of this.components) {
+      if (comp.type === 'battery' || comp.type === 'ac') continue;
+      const n1 = nodeOf(`${comp.x1},${comp.y1}`);
+      const n2 = nodeOf(`${comp.x2},${comp.y2}`);
+      const R = this._compR(comp);
+      if (R >= 1e7) continue;
+      const g = 1 / R;
+      stamp(n1 - 1, n1 - 1, g);
+      stamp(n2 - 1, n2 - 1, g);
+      stamp(n1 - 1, n2 - 1, -g);
+      stamp(n2 - 1, n1 - 1, -g);
+    }
+
+    for (let b = 0; b < nb; b++) {
+      const vs = vsrcs[b];
+      const n1 = nodeOf(`${vs.x1},${vs.y1}`); // negative
+      const n2 = nodeOf(`${vs.x2},${vs.y2}`); // positive
+      const row = nNodes - 1 + b;
+      const U = vs.type === 'ac'
+        ? (vs.value || 9) * Math.sin(2 * Math.PI * (vs.acFreq || this.acFreq) * this._simTime)
+        : (vs.value || 9);
+      if (n2 > 0) { stamp(row, n2 - 1, 1);  stamp(n2 - 1, row, 1); }
+      if (n1 > 0) { stamp(row, n1 - 1, -1); stamp(n1 - 1, row, -1); }
+      I[row] = U;
+    }
+
+    return { G, I, nNodes, nodeOf, vsrcs, nb, size };
+  }
+
+  _gaussElim(G, I) {
+    const n = I.length;
+    for (let col = 0; col < n; col++) {
+      let maxRow = col;
+      for (let r = col + 1; r < n; r++) {
+        if (Math.abs(G[r][col]) > Math.abs(G[maxRow][col])) maxRow = r;
+      }
+      [G[col], G[maxRow]] = [G[maxRow], G[col]];
+      [I[col], I[maxRow]] = [I[maxRow], I[col]];
+      if (Math.abs(G[col][col]) < 1e-12) continue;
+      for (let r = col + 1; r < n; r++) {
+        const f = G[r][col] / G[col][col];
+        for (let c = col; c < n; c++) G[r][c] -= f * G[col][c];
+        I[r] -= f * I[col];
+      }
+    }
+    const x = new Float64Array(n);
+    for (let r = n - 1; r >= 0; r--) {
+      if (Math.abs(G[r][r]) < 1e-12) continue;
+      x[r] = I[r];
+      for (let c = r + 1; c < n; c++) x[r] -= G[r][c] * x[c];
+      x[r] /= G[r][r];
+    }
+    return x;
+  }
+
+  _solveOnce() {
+    if (this.components.length === 0) { this._solution = null; return; }
+    const { nNodes, nodeOf } = this._buildNodes();
+    if (nNodes < 2) { this._solution = null; return; }
+    const mat = this._buildMatrix(nodeOf, nNodes);
+    if (!mat) { this._solution = null; return; }
+    const { G, I, vsrcs, nb } = mat;
+    let x;
+    try { x = this._gaussElim(G, I); } catch { this._solution = null; return; }
+
+    const voltages = new Map();
+    voltages.set(0, 0);
+    for (let i = 1; i < nNodes; i++) voltages.set(i, x[i - 1] || 0);
+
+    for (const c of this.components) {
+      const n1 = nodeOf(`${c.x1},${c.y1}`);
+      const n2 = nodeOf(`${c.x2},${c.y2}`);
+      c._v1 = voltages.get(n1) ?? 0;
+      c._v2 = voltages.get(n2) ?? 0;
+      if (c.type === 'battery' || c.type === 'ac') {
+        const bi = vsrcs.indexOf(c);
+        c._I = bi >= 0 ? (x[nNodes - 1 + bi] || 0) : 0;
+      } else {
+        const R = this._compR(c);
+        c._I = R < 1e7 ? (c._v1 - c._v2) / R : 0;
+      }
+    }
+    this._solution = { solved: true, voltages };
+  }
+
+  _solve() {
+    // Init diode R
+    for (const c of this.components) {
+      if ((c.type === 'diode' || c.type === 'led') && !this._diodeR.has(c.id)) {
+        this._diodeR.set(c.id, 1e9);
+      }
+    }
+    // Iterative diode solve (Newton-style)
+    for (let iter = 0; iter < 6; iter++) {
+      this._solveOnce();
+      if (!this._solution?.solved) break;
+      let changed = false;
+      for (const c of this.components) {
+        if (c.type !== 'diode' && c.type !== 'led') continue;
+        const vd = (c._v1 ?? 0) - (c._v2 ?? 0);
+        const oldR = this._diodeR.get(c.id) ?? 1e9;
+        const newR = vd > 0.5 ? 0.5 : 1e9;
+        if (newR !== oldR) { this._diodeR.set(c.id, newR); changed = true; }
+      }
+      if (!changed) break;
+    }
+    this._hasAC = this.components.some(c => c.type === 'ac');
+    if (this.onUpdate) this.onUpdate(this.info());
+  }
+
+  /* ─── Animation ────────────────────────────────────────────────────────── */
+
+  _tick(ts) {
+    if (!this._raf) return;
+    const dt = Math.min((ts - (this._lastTs || ts)) / 1000, 0.05);
+    this._lastTs = ts;
+    this._simTime += dt;
+
+    if (this._hasAC) this._solveOnce(); // re-solve each frame for AC
+
+    for (const c of this.components) {
+      if (!c._I || Math.abs(c._I) < 0.001) continue;
+      const speed = Math.min(Math.abs(c._I) * 0.6, 8) / (this.CELL * _compLen(c));
+      c._t = ((c._t || 0) + speed * dt * 60) % 1;
+    }
+    this.draw();
+    this._raf = requestAnimationFrame(ts => this._tick(ts));
+  }
+
+  start() {
+    if (this._raf) return;
+    this._lastTs = null;
+    this._raf = requestAnimationFrame(ts => this._tick(ts));
+  }
+
+  stop() {
+    cancelAnimationFrame(this._raf);
+    this._raf = null;
+  }
+
+  destroy() {
+    this.stop();
+    if (this._keyHandler) {
+      document.removeEventListener('keydown', this._keyHandler);
+      this._keyHandler = null;
+    }
+  }
+
+  /* ─── Color helpers ────────────────────────────────────────────────────── */
+
+  _voltColor(v, alpha = 1) {
+    if (!this._solution?.solved) return `rgba(180,180,200,${alpha})`;
+    const t = Math.tanh(v / 6);
+    if (t >= 0) {
+      return `rgba(${Math.round(239+t*16)},${Math.round(71-t*30)},${Math.round(111-t*80)},${alpha})`;
+    } else {
+      const s = -t;
+      return `rgba(${Math.round(76-s*40)},${Math.round(201+s*20)},${Math.round(240-s*20)},${alpha})`;
+    }
+  }
+
+  /* ─── Grid ─────────────────────────────────────────────────────────────── */
+
+  _drawGrid(ctx) {
+    for (let gx = 0; gx <= this.GW; gx++) {
+      for (let gy = 0; gy <= this.GH; gy++) {
+        const { x, y } = this._nodePixel(gx, gy);
+        ctx.beginPath();
+        ctx.arc(x, y, 1.5, 0, Math.PI * 2);
+        ctx.fillStyle = 'rgba(255,255,255,0.12)';
+        ctx.fill();
+      }
+    }
+    if (this._ghostEnd) {
+      const { x, y } = this._nodePixel(this._ghostEnd.x2, this._ghostEnd.y2);
+      ctx.beginPath();
+      ctx.arc(x, y, 4.5, 0, Math.PI * 2);
+      ctx.fillStyle = 'rgba(255,255,255,0.55)';
+      ctx.shadowBlur = 8; ctx.shadowColor = '#fff';
+      ctx.fill(); ctx.shadowBlur = 0;
+    }
+  }
+
+  /* ─── Junction dots ────────────────────────────────────────────────────── */
+
+  _drawJunctions(ctx) {
+    const count = new Map();
+    for (const c of this.components) {
+      const k1 = `${c.x1},${c.y1}`, k2 = `${c.x2},${c.y2}`;
+      count.set(k1, (count.get(k1) || 0) + 1);
+      count.set(k2, (count.get(k2) || 0) + 1);
+    }
+    ctx.shadowBlur = 6;
+    ctx.shadowColor = '#fff';
+    for (const [key, cnt] of count) {
+      if (cnt < 3) continue;
+      const [gx, gy] = key.split(',').map(Number);
+      const { x, y } = this._nodePixel(gx, gy);
+      ctx.beginPath();
+      ctx.arc(x, y, 4, 0, Math.PI * 2);
+      ctx.fillStyle = '#fff';
+      ctx.fill();
+    }
+    ctx.shadowBlur = 0;
+  }
+
+  /* ─── Node voltage labels ──────────────────────────────────────────────── */
+
+  _drawNodeLabels(ctx) {
+    if (!this._solution?.solved) return;
+    const shown = new Set();
+    ctx.font = 'bold 8px Manrope, sans-serif';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'bottom';
+    for (const c of this.components) {
+      for (const [gx, gy, v] of [[c.x1, c.y1, c._v1], [c.x2, c.y2, c._v2]]) {
+        const key = `${gx},${gy}`;
+        if (shown.has(key) || Math.abs(v) < 0.05) continue;
+        shown.add(key);
+        const { x, y } = this._nodePixel(gx, gy);
+        ctx.fillStyle = v >= 0 ? 'rgba(239,140,140,0.75)' : 'rgba(100,190,240,0.75)';
+        ctx.fillText(v.toFixed(1) + 'V', x, y - 7);
+      }
+    }
+    ctx.textBaseline = 'alphabetic';
+  }
+
+  /* ─── Wire line ─────────────────────────────────────────────────────────── */
+
+  _drawWireLine(ctx, p1, p2, v1, v2, lineWidth, glow) {
+    if (Math.hypot(p2.x - p1.x, p2.y - p1.y) < 0.5) return;
+    ctx.save();
+    ctx.lineWidth = lineWidth || 3;
+    ctx.lineCap = 'round';
+    if (glow) { ctx.shadowBlur = 10; ctx.shadowColor = this._voltColor((v1 + v2) / 2, 1); }
+    try {
+      const grad = ctx.createLinearGradient(p1.x, p1.y, p2.x, p2.y);
+      grad.addColorStop(0, this._voltColor(v1, 1));
+      grad.addColorStop(1, this._voltColor(v2, 1));
+      ctx.strokeStyle = grad;
+    } catch { ctx.strokeStyle = this._voltColor((v1 + v2) / 2, 1); }
+    ctx.beginPath();
+    ctx.moveTo(p1.x, p1.y);
+    ctx.lineTo(p2.x, p2.y);
+    ctx.stroke();
+    ctx.shadowBlur = 0;
+    ctx.restore();
+  }
+
+  /* ─── Component draw methods ───────────────────────────────────────────── */
+
+  _drawWire(ctx, c, p1, p2, hasI) {
+    this._drawWireLine(ctx, p1, p2, c._v1, c._v2, 3, hasI);
+  }
+
+  _drawResistor(ctx, c, p1, p2, mx, my, hasI) {
+    const dx = p2.x - p1.x, dy = p2.y - p1.y;
+    const len = Math.hypot(dx, dy);
+    const ux = dx / len, uy = dy / len;
+    const half = len * 0.2;
+    const sP1 = { x: mx - ux*half, y: my - uy*half };
+    const sP2 = { x: mx + ux*half, y: my + uy*half };
+    this._drawWireLine(ctx, p1, sP1, c._v1, c._v1, 3, hasI);
+    this._drawWireLine(ctx, sP2, p2, c._v2, c._v2, 3, hasI);
+
+    // Power heat color
+    const power = Math.abs((c._I ?? 0) ** 2 * this._compR(c));
+    const heat  = Math.min(1, power / 5);
+
+    ctx.save();
+    ctx.translate(mx, my);
+    ctx.rotate(Math.atan2(dy, dx));
+    const rw = half * 2, rh = 12;
+    ctx.beginPath();
+    ctx.roundRect(-rw/2, -rh/2, rw, rh, 2);
+    ctx.fillStyle = `rgb(${Math.round(13 + heat*200)},${Math.round(13 + heat*60)},13)`;
+    ctx.fill();
+    ctx.strokeStyle = this._voltColor((c._v1+c._v2)/2, 0.9);
+    ctx.lineWidth = 1.5; ctx.stroke();
+
+    // Zigzag
+    ctx.beginPath();
+    const zs = 6, zStep = rw / zs;
+    ctx.moveTo(-rw/2, 0);
+    for (let i = 0; i < zs; i++) ctx.lineTo(-rw/2+(i+0.5)*zStep, i%2===0?-4:4);
+    ctx.lineTo(rw/2, 0);
+    ctx.strokeStyle = this._voltColor((c._v1+c._v2)/2, 0.7);
+    ctx.lineWidth = 1; ctx.stroke();
+    ctx.restore();
+
+    ctx.font = '9px Manrope,sans-serif';
+    ctx.fillStyle = heat > 0.3 ? `rgba(255,${Math.round(200-heat*150)},80,0.85)` : 'rgba(255,255,255,0.55)';
+    ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+    ctx.fillText(`R=${c.value}\u202fΩ`, mx - uy*14, my + ux*14 - 4);
+    ctx.textBaseline = 'alphabetic';
+  }
+
+  _drawBattery(ctx, c, p1, p2, mx, my, hasI) {
+    const dx = p2.x - p1.x, dy = p2.y - p1.y;
+    const len = Math.hypot(dx, dy);
+    const ux = len>0?dx/len:1, uy = len>0?dy/len:0;
+    const half = Math.min(this.CELL*0.45, len*0.38);
+    const sP1 = {x:mx-ux*half, y:my-uy*half};
+    const sP2 = {x:mx+ux*half, y:my+uy*half};
+    this._drawWireLine(ctx, p1, sP1, c._v1, c._v1, 3, hasI);
+    this._drawWireLine(ctx, sP2, p2, c._v2, c._v2, 3, hasI);
+
+    ctx.save();
+    ctx.translate(mx, my);
+    ctx.rotate(Math.atan2(dy, dx));
+    // Two cell pairs
+    for (let i = 0; i < 2; i++) {
+      const ox = (i - 0.5) * 12;
+      ctx.beginPath(); ctx.moveTo(ox+5,-11); ctx.lineTo(ox+5,11);
+      ctx.strokeStyle='#EF476F'; ctx.lineWidth=1.5; ctx.lineCap='round'; ctx.stroke();
+      ctx.beginPath(); ctx.moveTo(ox-5,-7); ctx.lineTo(ox-5,7);
+      ctx.strokeStyle='#4CC9F0'; ctx.lineWidth=4; ctx.stroke();
+    }
+    ctx.restore();
+
+    ctx.font = 'bold 10px Manrope,sans-serif'; ctx.textAlign='center';
+    ctx.fillStyle='#EF476F';
+    ctx.fillText('+', p2.x + uy*14 - ux*8, p2.y - ux*14 - uy*8);
+    ctx.fillStyle='#4CC9F0';
+    ctx.fillText('\u2212', p1.x + uy*14 + ux*8, p1.y - ux*14 + uy*8);
+    ctx.font = '9px Manrope,sans-serif';
+    ctx.fillStyle = 'rgba(255,255,255,0.65)';
+    ctx.textBaseline = 'bottom';
+    ctx.fillText(`${c.value}\u202fV`, mx - uy*18, my + ux*18);
+    ctx.textBaseline = 'alphabetic';
+  }
+
+  _drawAC(ctx, c, p1, p2, mx, my, hasI) {
+    const dx = p2.x-p1.x, dy = p2.y-p1.y;
+    const len = Math.hypot(dx,dy);
+    const ux = dx/len, uy = dy/len;
+    const r = 15;
+    this._drawWireLine(ctx, p1, {x:mx-ux*r,y:my-uy*r}, c._v1,c._v1,3,hasI);
+    this._drawWireLine(ctx, {x:mx+ux*r,y:my+uy*r}, p2, c._v2,c._v2,3,hasI);
+
+    ctx.save();
+    ctx.translate(mx,my); ctx.rotate(Math.atan2(dy,dx));
+    ctx.beginPath(); ctx.arc(0,0,r,0,Math.PI*2);
+    ctx.fillStyle='#0d0d2b'; ctx.fill();
+    ctx.strokeStyle='#FFD166'; ctx.lineWidth=1.5; ctx.stroke();
+    ctx.beginPath(); ctx.strokeStyle='#FFD166'; ctx.lineWidth=1.2;
+    for (let i=0;i<=24;i++) {
+      const t=(i/24)*2*Math.PI;
+      const sx=(i/24-0.5)*r*1.5, sy=-Math.sin(t)*5;
+      i===0?ctx.moveTo(sx,sy):ctx.lineTo(sx,sy);
+    }
+    ctx.stroke();
+    ctx.restore();
+
+    ctx.font='9px Manrope,sans-serif'; ctx.fillStyle='rgba(255,213,102,0.75)';
+    ctx.textAlign='center'; ctx.textBaseline='top';
+    ctx.fillText(`${c.value}V ${c.acFreq||this.acFreq}Hz`, mx-uy*20, my+ux*20-4);
+    ctx.textBaseline='alphabetic';
+  }
+
+  _drawSwitch(ctx, c, p1, p2, mx, my, hasI) {
+    if (!c.open) {
+      this._drawWireLine(ctx, p1, p2, c._v1, c._v2, 3, hasI);
+    } else {
+      const dx=p2.x-p1.x, dy=p2.y-p1.y;
+      const len=Math.hypot(dx,dy);
+      const ux=dx/len, uy=dy/len;
+      const gap=this.CELL*0.35;
+      const gapP1={x:mx-ux*gap,y:my-uy*gap};
+      this._drawWireLine(ctx,p1,gapP1,c._v1,c._v1,3,false);
+      this._drawWireLine(ctx,{x:mx+ux*gap,y:my+uy*gap},p2,c._v2,c._v2,3,false);
+      // Open arm
+      const armAngle=Math.PI/5, armLen=gap*2;
+      const nx=-uy, ny=ux;
+      ctx.save();
+      ctx.strokeStyle=this._voltColor(c._v1,0.9);
+      ctx.lineWidth=3; ctx.lineCap='round';
+      ctx.beginPath();
+      ctx.moveTo(gapP1.x, gapP1.y);
+      ctx.lineTo(gapP1.x+ux*armLen*Math.cos(armAngle)-nx*armLen*Math.sin(armAngle),
+                 gapP1.y+uy*armLen*Math.cos(armAngle)-ny*armLen*Math.sin(armAngle));
+      ctx.stroke();
+      ctx.restore();
+    }
+    const dx=p2.x-p1.x, dy=p2.y-p1.y;
+    const len=Math.hypot(dx,dy);
+    const ux=len>0?dx/len:1, uy=len>0?dy/len:0;
+    ctx.font='9px Manrope,sans-serif';
+    ctx.fillStyle=c.open?'rgba(239,71,111,0.7)':'rgba(76,201,240,0.7)';
+    ctx.textAlign='center'; ctx.textBaseline='top';
+    ctx.fillText(c.open?'OPEN':'SW', mx-uy*14, my+ux*14-4);
+    ctx.textBaseline='alphabetic';
+  }
+
+  _drawLamp(ctx, c, p1, p2, mx, my, hasI) {
+    const dx=p2.x-p1.x, dy=p2.y-p1.y;
+    const len=Math.hypot(dx,dy);
+    const ux=len>0?dx/len:1, uy=len>0?dy/len:0;
+    const r=10;
+    this._drawWireLine(ctx,p1,{x:mx-ux*r,y:my-uy*r},c._v1,c._v1,3,hasI);
+    this._drawWireLine(ctx,{x:mx+ux*r,y:my+uy*r},p2,c._v2,c._v2,3,hasI);
+
+    const power=Math.abs((c._I||0)**2*this._compR(c));
+    const bright=Math.min(1, power/3);
+    ctx.save();
+    if (bright>0.05) {
+      const grd=ctx.createRadialGradient(mx,my,r,mx,my,r+35*bright);
+      grd.addColorStop(0,`rgba(255,220,100,${bright*0.6})`);
+      grd.addColorStop(1,'rgba(255,200,50,0)');
+      ctx.fillStyle=grd;
+      ctx.beginPath(); ctx.arc(mx,my,r+35*bright,0,Math.PI*2); ctx.fill();
+    }
+    ctx.beginPath(); ctx.arc(mx,my,r,0,Math.PI*2);
+    if (bright>0.05) {
+      const ig=ctx.createRadialGradient(mx,my,0,mx,my,r);
+      ig.addColorStop(0,`rgba(255,240,180,${bright})`);
+      ig.addColorStop(1,'rgba(20,20,50,0.9)');
+      ctx.fillStyle=ig;
+      ctx.shadowBlur=20*bright; ctx.shadowColor='#FFD166';
+    } else { ctx.fillStyle='#0d0d2b'; }
+    ctx.fill();
+    ctx.strokeStyle=this._voltColor((c._v1+c._v2)/2,0.9);
+    ctx.lineWidth=1.5; ctx.shadowBlur=0; ctx.stroke();
+    const cr=r*0.6;
+    ctx.strokeStyle=bright>0.05?`rgba(255,240,180,${0.4+bright*0.6})`:'rgba(255,255,255,0.4)';
+    ctx.lineWidth=1.5;
+    ctx.beginPath();
+    ctx.moveTo(mx-cr,my-cr); ctx.lineTo(mx+cr,my+cr);
+    ctx.moveTo(mx+cr,my-cr); ctx.lineTo(mx-cr,my+cr);
+    ctx.stroke();
+    ctx.restore();
+    ctx.font='9px Manrope,sans-serif'; ctx.fillStyle='rgba(255,255,255,0.5)';
+    ctx.textAlign='center'; ctx.textBaseline='top';
+    ctx.fillText('L', mx-uy*14, my+ux*14-4);
+    if (this._solution?.solved && Math.abs(c._I)>0.001) {
+      ctx.fillStyle='rgba(255,209,102,0.8)';
+      ctx.fillText(`${power.toFixed(2)}W`, mx-uy*14, my+ux*14+6);
+    }
+    ctx.textBaseline='alphabetic';
+  }
+
+  _drawCapacitor(ctx, c, p1, p2, mx, my) {
+    const dx=p2.x-p1.x, dy=p2.y-p1.y;
+    const len=Math.hypot(dx,dy);
+    const ux=dx/len, uy=dy/len;
+    const nx=-uy, ny=ux;
+    const pg=6, ph=12; // plate gap half, plate half-length
+    const sP1={x:mx-ux*pg,y:my-uy*pg};
+    const sP2={x:mx+ux*pg,y:my+uy*pg};
+    this._drawWireLine(ctx,p1,sP1,c._v1,c._v1,3,false);
+    this._drawWireLine(ctx,sP2,p2,c._v2,c._v2,3,false);
+
+    // Plates
+    ctx.save();
+    ctx.lineWidth=2.5; ctx.lineCap='round';
+    ctx.strokeStyle=this._voltColor(c._v1,0.9);
+    ctx.beginPath(); ctx.moveTo(sP1.x-nx*ph,sP1.y-ny*ph); ctx.lineTo(sP1.x+nx*ph,sP1.y+ny*ph); ctx.stroke();
+    ctx.strokeStyle=this._voltColor(c._v2,0.9);
+    ctx.beginPath(); ctx.moveTo(sP2.x-nx*ph,sP2.y-ny*ph); ctx.lineTo(sP2.x+nx*ph,sP2.y+ny*ph); ctx.stroke();
+
+    // Charge fill
+    const vd=Math.abs((c._v2||0)-(c._v1||0));
+    if (vd>0.1 && this._solution?.solved) {
+      const alpha=Math.min(0.35, vd/12);
+      const cg=ctx.createLinearGradient(sP1.x,sP1.y,sP2.x,sP2.y);
+      cg.addColorStop(0,this._voltColor(c._v1,alpha));
+      cg.addColorStop(1,this._voltColor(c._v2,alpha));
+      ctx.fillStyle=cg;
+      ctx.beginPath();
+      ctx.moveTo(sP1.x-nx*ph,sP1.y-ny*ph); ctx.lineTo(sP1.x+nx*ph,sP1.y+ny*ph);
+      ctx.lineTo(sP2.x+nx*ph,sP2.y+ny*ph); ctx.lineTo(sP2.x-nx*ph,sP2.y-ny*ph);
+      ctx.closePath(); ctx.fill();
+    }
+    ctx.restore();
+
+    ctx.font='9px Manrope,sans-serif'; ctx.fillStyle='rgba(255,255,255,0.55)';
+    ctx.textAlign='center'; ctx.textBaseline='top';
+    ctx.fillText(`C=${c.value}µF`, mx-uy*16, my+ux*16-4);
+    ctx.textBaseline='alphabetic';
+  }
+
+  _drawDiode(ctx, c, p1, p2, mx, my, hasI) {
+    const dx=p2.x-p1.x, dy=p2.y-p1.y;
+    const len=Math.hypot(dx,dy);
+    const ux=dx/len, uy=dy/len;
+    const tw=10, th=11;
+    this._drawWireLine(ctx,p1,{x:mx-ux*tw,y:my-uy*tw},c._v1,c._v1,3,hasI);
+    this._drawWireLine(ctx,{x:mx+ux*tw,y:my+uy*tw},p2,c._v2,c._v2,3,hasI);
+
+    const on=(this._diodeR.get(c.id)??1e9)<1;
+    const col=on?'#7BF5A4':'rgba(255,255,255,0.65)';
+
+    ctx.save();
+    ctx.translate(mx,my); ctx.rotate(Math.atan2(dy,dx));
+    ctx.beginPath();
+    ctx.moveTo(-tw,-th); ctx.lineTo(-tw,th); ctx.lineTo(tw,0); ctx.closePath();
+    ctx.fillStyle=on?'rgba(123,245,164,0.25)':'rgba(255,255,255,0.06)';
+    ctx.fill();
+    ctx.strokeStyle=col; ctx.lineWidth=1.6; ctx.stroke();
+    ctx.beginPath(); ctx.moveTo(tw,-th); ctx.lineTo(tw,th); ctx.stroke();
+    ctx.restore();
+
+    ctx.font='9px Manrope,sans-serif';
+    ctx.fillStyle=on?'rgba(123,245,164,0.8)':'rgba(255,255,255,0.4)';
+    ctx.textAlign='center'; ctx.textBaseline='top';
+    ctx.fillText(on?'ON':'OFF', mx-uy*16, my+ux*16-4);
+    ctx.textBaseline='alphabetic';
+  }
+
+  _drawLED(ctx, c, p1, p2, mx, my, hasI) {
+    const dx=p2.x-p1.x, dy=p2.y-p1.y;
+    const len=Math.hypot(dx,dy);
+    const ux=dx/len, uy=dy/len;
+    const tw=9, th=10;
+    this._drawWireLine(ctx,p1,{x:mx-ux*tw,y:my-uy*tw},c._v1,c._v1,3,hasI);
+    this._drawWireLine(ctx,{x:mx+ux*tw,y:my+uy*tw},p2,c._v2,c._v2,3,hasI);
+
+    const on=(this._diodeR.get(c.id)??1e9)<1;
+    const col=c.ledColor||this.ledColor;
+
+    if (on) {
+      const grd=ctx.createRadialGradient(mx,my,0,mx,my,38);
+      grd.addColorStop(0,col+'50'); grd.addColorStop(1,col+'00');
+      ctx.fillStyle=grd;
+      ctx.beginPath(); ctx.arc(mx,my,38,0,Math.PI*2); ctx.fill();
+    }
+
+    ctx.save();
+    ctx.translate(mx,my); ctx.rotate(Math.atan2(dy,dx));
+    ctx.beginPath();
+    ctx.moveTo(-tw,-th); ctx.lineTo(-tw,th); ctx.lineTo(tw,0); ctx.closePath();
+    ctx.fillStyle=on?col+'55':col+'18'; ctx.fill();
+    ctx.strokeStyle=on?col:col+'90'; ctx.lineWidth=1.5; ctx.stroke();
+    ctx.beginPath(); ctx.moveTo(tw,-th); ctx.lineTo(tw,th); ctx.stroke();
+
+    if (on) {
+      ctx.strokeStyle=col; ctx.lineWidth=1.2;
+      for (let s=-1;s<=1;s+=2) {
+        ctx.beginPath();
+        ctx.moveTo(tw+3, s*5);
+        ctx.lineTo(tw+11, s*5-s*6);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.moveTo(tw+11,s*5-s*6); ctx.lineTo(tw+8,s*5-s*6);
+        ctx.moveTo(tw+11,s*5-s*6); ctx.lineTo(tw+11,s*5-s*3);
+        ctx.stroke();
+      }
+    }
+    ctx.restore();
+
+    ctx.font='9px Manrope,sans-serif'; ctx.fillStyle=col+'cc';
+    ctx.textAlign='center'; ctx.textBaseline='top';
+    ctx.fillText('LED', mx-uy*16, my+ux*16-4);
+    ctx.textBaseline='alphabetic';
+  }
+
+  _drawAmmeter(ctx, c, p1, p2, mx, my) {
+    const dx=p2.x-p1.x, dy=p2.y-p1.y, len=Math.hypot(dx,dy);
+    const ux=len>0?dx/len:1, uy=len>0?dy/len:0, r=9;
+    this._drawWireLine(ctx,p1,{x:mx-ux*r,y:my-uy*r},c._v1,c._v1,3,false);
+    this._drawWireLine(ctx,{x:mx+ux*r,y:my+uy*r},p2,c._v2,c._v2,3,false);
+    ctx.beginPath(); ctx.arc(mx,my,r,0,Math.PI*2);
+    ctx.fillStyle='#0d0d2b'; ctx.fill();
+    ctx.strokeStyle='rgba(76,201,240,0.9)'; ctx.lineWidth=1.5; ctx.stroke();
+    ctx.font='bold 9px Manrope,sans-serif'; ctx.fillStyle='#4CC9F0';
+    ctx.textAlign='center'; ctx.textBaseline='middle'; ctx.fillText('A',mx,my);
+    if (this._solution?.solved) {
+      ctx.font='8px Manrope,sans-serif'; ctx.fillStyle='rgba(255,255,255,0.55)';
+      ctx.textBaseline='top'; ctx.fillText(`${(c._I||0).toFixed(3)}A`,mx,my+r+3);
+    }
+    ctx.textBaseline='alphabetic';
+  }
+
+  _drawVoltmeter(ctx, c, p1, p2, mx, my) {
+    const dx=p2.x-p1.x, dy=p2.y-p1.y, len=Math.hypot(dx,dy);
+    const ux=len>0?dx/len:1, uy=len>0?dy/len:0, r=9;
+    this._drawWireLine(ctx,p1,{x:mx-ux*r,y:my-uy*r},c._v1,c._v1,2,false);
+    this._drawWireLine(ctx,{x:mx+ux*r,y:my+uy*r},p2,c._v2,c._v2,2,false);
+    ctx.beginPath(); ctx.arc(mx,my,r,0,Math.PI*2);
+    ctx.fillStyle='#0d0d2b'; ctx.fill();
+    ctx.strokeStyle='rgba(239,71,111,0.9)'; ctx.lineWidth=1.5; ctx.stroke();
+    ctx.font='bold 9px Manrope,sans-serif'; ctx.fillStyle='#EF476F';
+    ctx.textAlign='center'; ctx.textBaseline='middle'; ctx.fillText('V',mx,my);
+    if (this._solution?.solved) {
+      ctx.font='8px Manrope,sans-serif'; ctx.fillStyle='rgba(255,255,255,0.55)';
+      ctx.textBaseline='top'; ctx.fillText(`${((c._v1||0)-(c._v2||0)).toFixed(2)}V`,mx,my+r+3);
+    }
+    ctx.textBaseline='alphabetic';
+  }
+
+  /* ─── Animated current (comet trail) ──────────────────────────────────── */
+
+  _drawAnimDots(ctx) {
+    if (!this._solution?.solved) return;
+    for (const c of this.components) {
+      if (!c._I || Math.abs(c._I) < 0.05) continue;
+      const p1=this._nodePixel(c.x1,c.y1), p2=this._nodePixel(c.x2,c.y2);
+      const N=Math.max(1,Math.min(5,Math.ceil(Math.abs(c._I))));
+      const dir=c._I>0?1:-1;
+      for (let i=0;i<N;i++) {
+        const phase=((c._t||0)+i/N)%1;
+        const tt=dir>0?phase:1-phase;
+        // Comet trail: 5 fading dots
+        for (let tr=0;tr<5;tr++) {
+          const trailT=dir>0?Math.max(0,tt-tr*0.035):Math.min(1,tt+tr*0.035);
+          const tx=p1.x+(p2.x-p1.x)*trailT;
+          const ty=p1.y+(p2.y-p1.y)*trailT;
+          const alpha=(1-tr/5)*(tr===0?1:0.5);
+          const sz=Math.max(0, tr===0?3:2.5-tr*0.4);
+          ctx.beginPath(); ctx.arc(tx,ty,sz,0,Math.PI*2);
+          if (tr===0) {
+            ctx.fillStyle='#FFD166';
+            ctx.shadowColor='#FFD166'; ctx.shadowBlur=8;
+          } else {
+            ctx.shadowBlur=0;
+            ctx.fillStyle=`rgba(255,209,102,${alpha})`;
+          }
+          ctx.fill();
+        }
+        ctx.shadowBlur=0;
+      }
+    }
+  }
+
+  /* ─── Components dispatch ──────────────────────────────────────────────── */
+
+  _drawComponents(ctx) {
+    for (const c of this.components) {
+      const p1=this._nodePixel(c.x1,c.y1), p2=this._nodePixel(c.x2,c.y2);
+      const mx=(p1.x+p2.x)/2, my=(p1.y+p2.y)/2;
+      const isHov=this._hovered===c.id, isSel=this._selected===c.id;
+      const hasI=!!(this._solution?.solved && Math.abs(c._I)>0.001);
+
+      // Selection / hover highlight
+      if (isSel || isHov) {
+        ctx.save();
+        ctx.globalAlpha=isSel?0.28:0.15;
+        ctx.fillStyle=isSel?'#FFD166':'#fff';
+        const bx=Math.min(p1.x,p2.x)-10, by=Math.min(p1.y,p2.y)-10;
+        const bw=Math.abs(p2.x-p1.x)+20, bh=Math.abs(p2.y-p1.y)+20;
+        ctx.beginPath(); ctx.roundRect(bx,by,Math.max(bw,20),Math.max(bh,20),5); ctx.fill();
+        ctx.restore();
+      }
+
+      switch (c.type) {
+        case 'wire':      this._drawWire(ctx,c,p1,p2,hasI);              break;
+        case 'resistor':  this._drawResistor(ctx,c,p1,p2,mx,my,hasI);   break;
+        case 'battery':   this._drawBattery(ctx,c,p1,p2,mx,my,hasI);    break;
+        case 'ac':        this._drawAC(ctx,c,p1,p2,mx,my,hasI);         break;
+        case 'switch':    this._drawSwitch(ctx,c,p1,p2,mx,my,hasI);     break;
+        case 'lamp':      this._drawLamp(ctx,c,p1,p2,mx,my,hasI);       break;
+        case 'capacitor': this._drawCapacitor(ctx,c,p1,p2,mx,my);       break;
+        case 'diode':     this._drawDiode(ctx,c,p1,p2,mx,my,hasI);      break;
+        case 'led':       this._drawLED(ctx,c,p1,p2,mx,my,hasI);        break;
+        case 'ammeter':   this._drawAmmeter(ctx,c,p1,p2,mx,my);         break;
+        case 'voltmeter': this._drawVoltmeter(ctx,c,p1,p2,mx,my);       break;
+      }
+    }
+  }
+
+  /* ─── Ghost while drawing ──────────────────────────────────────────────── */
+
+  _drawGhost(ctx) {
+    if (!this._drawing || !this._ghostEnd) return;
+    const p1=this._nodePixel(this._drawing.x1,this._drawing.y1);
+    const g2=this._ghostEnd;
+    ctx.save();
+    ctx.globalAlpha=0.45; ctx.strokeStyle='#FFD166';
+    ctx.lineWidth=3; ctx.lineCap='round'; ctx.setLineDash([6,4]);
+
+    if (this.addMode==='wire' && this._drawing.x1!==g2.x2 && this._drawing.y1!==g2.y2) {
+      const corner=this._nodePixel(g2.x2, this._drawing.y1);
+      const p2=this._nodePixel(g2.x2,g2.y2);
+      ctx.beginPath(); ctx.moveTo(p1.x,p1.y); ctx.lineTo(corner.x,corner.y); ctx.lineTo(p2.x,p2.y); ctx.stroke();
+    } else {
+      const p2=this._nodePixel(g2.x2,g2.y2);
+      ctx.beginPath(); ctx.moveTo(p1.x,p1.y); ctx.lineTo(p2.x,p2.y); ctx.stroke();
+    }
+    ctx.setLineDash([]);
+    ctx.beginPath(); ctx.arc(p1.x,p1.y,5,0,Math.PI*2);
+    ctx.fillStyle='#FFD166'; ctx.globalAlpha=0.75; ctx.fill();
+    ctx.restore();
+  }
+
+  /* ─── Tooltip ──────────────────────────────────────────────────────────── */
+
+  _drawTooltip(ctx) {
+    if (!this._hovered || !this._solution?.solved) return;
+    const c=this.components.find(x=>x.id===this._hovered);
+    if (!c) return;
+    const p1=this._nodePixel(c.x1,c.y1), p2=this._nodePixel(c.x2,c.y2);
+    const mx=(p1.x+p2.x)/2, my=(p1.y+p2.y)/2;
+    const R=this._compR(c), I=c._I??0;
+    const U=Math.abs((c._v1??0)-(c._v2??0));
+    const P=Math.abs(I*I*Math.min(R,1e6));
+    const lines=[];
+    if (c.type==='resistor'||c.type==='lamp'||c.type==='wire')
+      lines.push(`R = ${R<1?R.toFixed(4):R.toFixed(1)} Ω`);
+    if (Math.abs(I)>0.0001) lines.push(`I = ${I.toFixed(4)} А`);
+    if (U>0.001) lines.push(`U = ${U.toFixed(3)} В`);
+    if (P>0.0001&&P<1e5) lines.push(`P = ${P.toFixed(4)} Вт`);
+    if (!lines.length) return;
+
+    const lh=14, pad=7, tw=96, th=lines.length*lh+pad*2;
+    let tx=mx+18, ty=my-th/2;
+    if (tx+tw>this.W-4) tx=mx-tw-18;
+    if (ty<4) ty=4;
+    if (ty+th>this.H-4) ty=this.H-th-4;
+
+    ctx.fillStyle='rgba(6,6,22,0.93)';
+    ctx.strokeStyle='rgba(255,255,255,0.14)';
+    ctx.lineWidth=1;
+    ctx.beginPath(); ctx.roundRect(tx,ty,tw,th,5); ctx.fill(); ctx.stroke();
+    ctx.font='10px Manrope,sans-serif'; ctx.textAlign='left'; ctx.textBaseline='top';
+    lines.forEach((l,i)=>{
+      ctx.fillStyle='rgba(255,255,255,0.78)';
+      ctx.fillText(l, tx+pad, ty+pad+i*lh);
+    });
+    ctx.textBaseline='alphabetic';
+  }
+
+  /* ─── Short circuit warning ────────────────────────────────────────────── */
+
+  _drawShortCircuitWarning(ctx) {
+    if (!this._solution?.solved) return;
+    const batt=this.components.find(c=>c.type==='battery'||c.type==='ac');
+    if (!batt||Math.abs(batt._I)<50) return;
+    const a=0.12+0.08*Math.sin(this._simTime*12);
+    ctx.fillStyle=`rgba(239,71,111,${a})`;
+    ctx.fillRect(0,0,this.W,this.H);
+    ctx.fillStyle='rgba(239,71,111,0.92)';
+    ctx.font='bold 18px Manrope,sans-serif';
+    ctx.textAlign='center'; ctx.textBaseline='middle';
+    ctx.fillText('Короткое замыкание!', this.W/2, this.H/2);
+    ctx.textBaseline='alphabetic';
+  }
+
+  /* ─── Hint ─────────────────────────────────────────────────────────────── */
+
+  _drawHint(ctx) {
+    ctx.font='15px Manrope,sans-serif'; ctx.fillStyle='rgba(255,255,255,0.18)';
+    ctx.textAlign='center'; ctx.textBaseline='middle';
+    ctx.fillText('Выберите инструмент и нарисуйте схему', this.W/2, this.H/2-14);
+    ctx.font='11px Manrope,sans-serif'; ctx.fillStyle='rgba(255,255,255,0.09)';
+    ctx.fillText('ПКМ — удалить · Dbl‑клик на ключе — переключить · Del — удалить выбранный', this.W/2, this.H/2+12);
+    ctx.font='10px Manrope,sans-serif'; ctx.fillStyle='rgba(255,255,255,0.07)';
+    ctx.fillText('Ctrl+Z / Ctrl+Y — Undo/Redo  ·  W R B S L C D A V E — горячие клавиши', this.W/2, this.H/2+30);
+    ctx.textBaseline='alphabetic';
+  }
+
+  /* ─── Main draw ────────────────────────────────────────────────────────── */
+
+  draw() {
+    const ctx=this.ctx, W=this.W, H=this.H;
+    if (!W||!H) return;
+    ctx.clearRect(0,0,W,H);
+    ctx.fillStyle='#080818'; ctx.fillRect(0,0,W,H);
+    this._drawGrid(ctx);
+    this._drawComponents(ctx);
+    this._drawJunctions(ctx);
+    this._drawNodeLabels(ctx);
+    this._drawAnimDots(ctx);
+    this._drawShortCircuitWarning(ctx);
+    if (this._drawing&&this._ghostEnd) this._drawGhost(ctx);
+    this._drawTooltip(ctx);
+    if (this.components.length===0) this._drawHint(ctx);
+  }
+
+  /* ─── Events ───────────────────────────────────────────────────────────── */
+
+  _bindEvents() {
+    const cvs=this.canvas;
+
+    const pos = e => {
+      const r=cvs.getBoundingClientRect(), s=e.touches?e.touches[0]:e;
+      return { x:s.clientX-r.left, y:s.clientY-r.top };
+    };
+    const snap = p => this._snapGrid(p.x,p.y);
+    const hitComp = p => {
+      for (let i=this.components.length-1;i>=0;i--) {
+        const c=this.components[i];
+        const q1=this._nodePixel(c.x1,c.y1), q2=this._nodePixel(c.x2,c.y2);
+        if (distToSegment(p.x,p.y,q1.x,q1.y,q2.x,q2.y)<13) return i;
+      }
+      return -1;
+    };
+
+    // ── Keyboard shortcuts ──
+    this._keyHandler = e => {
+      const simEl=document.getElementById('sim-circuit');
+      if (!simEl||simEl.style.display==='none') return;
+      if (e.target.tagName==='INPUT'||e.target.tagName==='TEXTAREA') return;
+
+      if ((e.ctrlKey||e.metaKey)&&e.key==='z') { e.preventDefault(); this.undo(); return; }
+      if ((e.ctrlKey||e.metaKey)&&(e.key==='y'||(e.shiftKey&&e.key==='z'))) { e.preventDefault(); this.redo(); return; }
+
+      const modeMap={w:'wire',r:'resistor',b:'battery',s:'switch',l:'lamp',c:'capacitor',d:'diode',a:'ammeter',v:'voltmeter',e:'erase'};
+      const newMode=modeMap[e.key.toLowerCase()];
+      if (newMode) { this.addMode=newMode; if (this.onModeChange) this.onModeChange(newMode); }
+
+      if ((e.key==='Delete'||e.key==='Backspace')&&this._selected!==null) {
+        const idx=this.components.findIndex(c=>c.id===this._selected);
+        if (idx>=0) { this._pushHistory(); this.components.splice(idx,1); this._selected=null; this._solve(); this.draw(); }
+      }
+      if (e.key==='Escape') {
+        this._selected=null; this._drawing=null; this._ghostEnd=null; this._dragIdx=null;
+        if (!this._raf) this.draw();
+      }
+    };
+    document.addEventListener('keydown', this._keyHandler);
+
+    // ── Mouse ──
+    cvs.addEventListener('mousedown', e=>{
+      if (e.button!==0) return;
+      const p=pos(e), g=snap(p), hi=hitComp(p);
+
+      if (this.addMode==='erase') {
+        if (hi>=0) { this._pushHistory(); this.components.splice(hi,1); this._solve(); this.draw(); }
+        return;
+      }
+      if (hi>=0) {
+        // Start potential drag / select
+        this._selected=this.components[hi].id;
+        this._dragIdx=hi;
+        this._dragStart=g;
+        this._dragOrigPos={...this.components[hi]};
+        this._didDrag=false;
+        this.draw(); return;
+      }
+      this._selected=null;
+      this._drawing={x1:g.gx,y1:g.gy};
+      this._ghostEnd={x2:g.gx,y2:g.gy};
+    });
+
+    cvs.addEventListener('mousemove', e=>{
+      const p=pos(e), g=snap(p);
+      this._ghostEnd={x2:g.gx,y2:g.gy};
+      const hi=hitComp(p);
+      this._hovered=hi>=0?this.components[hi].id:null;
+
+      if (this._dragIdx!==null&&this._dragStart) {
+        const dx=g.gx-this._dragStart.gx, dy=g.gy-this._dragStart.gy;
+        if (dx!==0||dy!==0) {
+          this._didDrag=true;
+          const c=this.components[this._dragIdx], o=this._dragOrigPos;
+          c.x1=Math.max(0,Math.min(this.GW,o.x1+dx));
+          c.y1=Math.max(0,Math.min(this.GH,o.y1+dy));
+          c.x2=Math.max(0,Math.min(this.GW,o.x2+dx));
+          c.y2=Math.max(0,Math.min(this.GH,o.y2+dy));
+          this._solve();
+        }
+      }
+      if (!this._raf) this.draw();
+    });
+
+    cvs.addEventListener('mouseup', e=>{
+      if (e.button!==0) return;
+
+      if (this._dragIdx!==null) {
+        if (this._didDrag) this._pushHistory();
+        this._dragIdx=null; this._dragStart=null; this._dragOrigPos=null; this._didDrag=false;
+        if (!this._raf) this.draw(); return;
+      }
+      if (!this._drawing) return;
+      const p=pos(e), g=snap(p);
+      const {x1,y1}=this._drawing;
+      const x2=g.gx, y2=g.gy;
+      this._drawing=null; this._ghostEnd=null;
+
+      if (x1===x2&&y1===y2) { if (!this._raf) this.draw(); return; }
+      this._pushHistory();
+
+      // L-shape wires: split diagonal into two orthogonal segments
+      if (this.addMode==='wire'&&x1!==x2&&y1!==y2) {
+        this._add('wire',x1,y1,x2,y1);
+        this._add('wire',x2,y1,x2,y2);
+      } else {
+        this.addComponent(this.addMode,x1,y1,x2,y2);
+        return;
+      }
+      this._solve(); this.draw();
+      if (this.onUpdate) this.onUpdate(this.info());
+    });
+
+    cvs.addEventListener('contextmenu', e=>{
+      e.preventDefault();
+      const p=pos(e), i=hitComp(p);
+      if (i>=0) { this._pushHistory(); this.components.splice(i,1); this._selected=null; this._solve(); this.draw(); }
+    });
+
+    cvs.addEventListener('dblclick', e=>{
+      const p=pos(e), i=hitComp(p);
+      if (i>=0&&this.components[i].type==='switch') {
+        this._pushHistory(); this.components[i].open=!this.components[i].open; this._solve(); this.draw();
+      }
+    });
+
+    cvs.addEventListener('mouseleave', ()=>{
+      this._ghostEnd=null; this._drawing=null; this._hovered=null;
+      if (this._dragIdx!==null) { this._dragIdx=null; this._dragStart=null; this._dragOrigPos=null; this._didDrag=false; }
+      if (!this._raf) this.draw();
+    });
+
+    // Touch
+    cvs.addEventListener('touchstart', e=>{
+      e.preventDefault();
+      const p=pos(e), g=snap(p);
+      if (this.addMode==='erase') {
+        const i=this._hitCompFromSnap(p);
+        if (i>=0) { this._pushHistory(); this.components.splice(i,1); this._solve(); this.draw(); }
+        return;
+      }
+      this._drawing={x1:g.gx,y1:g.gy}; this._ghostEnd={x2:g.gx,y2:g.gy};
+    },{passive:false});
+
+    cvs.addEventListener('touchmove', e=>{
+      e.preventDefault();
+      const p=pos(e), g=snap(p);
+      this._ghostEnd={x2:g.gx,y2:g.gy};
+      if (!this._raf) this.draw();
+    },{passive:false});
+
+    cvs.addEventListener('touchend', e=>{
+      e.preventDefault();
+      if (!this._drawing) return;
+      const {x1,y1}=this._drawing;
+      const x2=this._ghostEnd?.x2??x1, y2=this._ghostEnd?.y2??y1;
+      this._drawing=null; this._ghostEnd=null;
+      if (x1===x2&&y1===y2) { if (!this._raf) this.draw(); return; }
+      this._pushHistory();
+      if (this.addMode==='wire'&&x1!==x2&&y1!==y2) {
+        this._add('wire',x1,y1,x2,y1); this._add('wire',x2,y1,x2,y2);
+        this._solve(); this.draw(); if (this.onUpdate) this.onUpdate(this.info());
+      } else {
+        this.addComponent(this.addMode,x1,y1,x2,y2);
+      }
+    },{passive:false});
+  }
+
+  /* ─── CRUD ─────────────────────────────────────────────────────────────── */
+
+  addComponent(type, x1, y1, x2, y2) {
+    const value = type==='resistor'?this.R_value
+      : type==='battery'||type==='ac'?this.U_value
+      : type==='capacitor'?this.C_value
+      : undefined;
+    this._add(type,x1,y1,x2,y2,value);
+    this._solve(); this.draw();
+    if (this.onUpdate) this.onUpdate(this.info());
+  }
+
+  _add(type, x1, y1, x2, y2, value) {
+    const id=this._nextId++;
+    if (type==='diode'||type==='led') this._diodeR.set(id,1e9);
+    this.components.push({
+      id, type, x1, y1, x2, y2,
+      value: value??undefined,
+      open: false,
+      ledColor: type==='led'?(this.ledColor||'#7BF5A4'):undefined,
+      acFreq:   type==='ac'?this.acFreq:undefined,
+      _I:0, _v1:0, _v2:0, _t:Math.random()
+    });
+  }
+
+  /* ─── Presets ──────────────────────────────────────────────────────────── */
+
+  preset(name) {
+    this.components=[]; this._nextId=0; this._diodeR.clear(); this._selected=null;
+
+    switch (name) {
+      case 'serial':
+        this._add('battery',1,7,1,4,9);
+        this._add('wire',1,4,8,4);
+        this._add('resistor',8,4,13,4,10);
+        this._add('resistor',13,4,19,4,20);
+        this._add('wire',19,4,19,7);
+        this._add('wire',19,7,1,7);
+        break;
+
+      case 'parallel':
+        this._add('battery',1,7,1,4,12);
+        this._add('wire',1,4,8,4);
+        this._add('wire',8,4,8,3);
+        this._add('resistor',8,3,16,3,10);
+        this._add('wire',16,3,16,4);
+        this._add('wire',8,4,8,6);
+        this._add('resistor',8,6,16,6,20);
+        this._add('wire',16,6,16,4);
+        this._add('wire',16,4,19,4);
+        this._add('wire',19,4,19,7);
+        this._add('wire',19,7,1,7);
+        break;
+
+      case 'lamp':
+        this._add('battery',2,8,2,4,9);
+        this._add('wire',2,4,8,4);
+        this._add('switch',8,4,13,4);
+        this._add('lamp',13,4,18,4);
+        this._add('wire',18,4,20,4);
+        this._add('wire',20,4,20,8);
+        this._add('wire',20,8,2,8);
+        break;
+
+      case 'divider':
+        this._add('battery',2,7,2,4,12);
+        this._add('wire',2,4,9,4);
+        this._add('resistor',9,4,14,4,10);
+        this._add('resistor',14,4,19,4,10);
+        this._add('wire',19,4,19,7);
+        this._add('wire',19,7,2,7);
+        this._add('voltmeter',14,4,14,7);
+        this._add('wire',14,7,19,7);
+        break;
+
+      case 'bridge':
+        this._add('battery',1,7,1,4,12);
+        this._add('wire',1,4,5,4);
+        this._add('resistor',5,4,10,2,10);
+        this._add('resistor',5,4,10,6,20);
+        this._add('resistor',10,2,16,4,10);
+        this._add('resistor',10,6,16,4,30);
+        this._add('ammeter',10,2,10,6);
+        this._add('wire',16,4,19,4);
+        this._add('wire',19,4,19,7);
+        this._add('wire',19,7,1,7);
+        break;
+
+      case 'diode':
+        this._add('battery',2,7,2,4,9);
+        this._add('wire',2,4,7,4);
+        this._add('diode',7,4,13,4);
+        this._add('resistor',13,4,19,4,100);
+        this._add('ammeter',19,4,19,7);
+        this._add('wire',19,7,2,7);
+        break;
+
+      case 'led':
+        this._add('battery',2,7,2,4,9);
+        this._add('wire',2,4,7,4);
+        this._add('led',7,4,13,4);
+        this._add('resistor',13,4,19,4,47);
+        this._add('wire',19,4,19,7);
+        this._add('wire',19,7,2,7);
+        break;
+
+      case 'rc':
+        this._add('battery',2,7,2,4,9);
+        this._add('wire',2,4,6,4);
+        this._add('switch',6,4,10,4);
+        this._add('resistor',10,4,15,4,100);
+        this._add('capacitor',15,4,19,4,100);
+        this._add('wire',19,4,19,7);
+        this._add('wire',19,7,2,7);
+        break;
+
+      case 'ac':
+        this._add('ac',2,7,2,4,9);
+        this._add('wire',2,4,9,4);
+        this._add('resistor',9,4,15,4,10);
+        this._add('wire',15,4,19,4);
+        this._add('wire',19,4,19,7);
+        this._add('wire',19,7,2,7);
+        break;
+
+      default: break;
+    }
+
+    this._pushHistory();
+    this._solve(); this.draw();
+    if (this.onUpdate) this.onUpdate(this.info());
+  }
+
+  /* ─── Fit ──────────────────────────────────────────────────────────────── */
+
+  fit() {
+    this.W=this.canvas.offsetWidth||800;
+    this.H=this.canvas.offsetHeight||500;
+    const dpr=window.devicePixelRatio||1;
+    this.canvas.width=this.W*dpr;
+    this.canvas.height=this.H*dpr;
+    this.ctx.setTransform(1,0,0,1,0,0);
+    this.ctx.scale(dpr,dpr);
+    this.CELL=Math.max(24,Math.floor(Math.min((this.W-40)/this.GW,(this.H-40)/this.GH)));
+    this.ox=Math.round((this.W-this.CELL*this.GW)/2);
+    this.oy=Math.round((this.H-this.CELL*this.GH)/2);
+    this._solve(); this.draw();
+  }
+
+  /* ─── Info ─────────────────────────────────────────────────────────────── */
+
+  info() {
+    const solved=this._solution?.solved??false;
+    const batt=this.components.find(c=>c.type==='battery'||c.type==='ac');
+    return {
+      components: this.components.length,
+      solved,
+      voltage:  batt?batt.value:0,
+      current:  batt?Math.abs(batt._I).toFixed(3):'—',
+      power:    batt?(Math.abs(batt._I)*(batt.value||0)).toFixed(2):'—',
+      totalR:   (batt&&batt._I&&Math.abs(batt._I)>0.0001)?((batt.value||0)/Math.abs(batt._I)).toFixed(1):'—',
+      addMode:  this.addMode
+    };
+  }
+
+  /* ─── Clear ────────────────────────────────────────────────────────────── */
+
+  clear() {
+    this._pushHistory();
+    this.components=[]; this._nextId=0; this._diodeR.clear(); this._selected=null;
+    this._solve(); this.draw();
+    if (this.onUpdate) this.onUpdate(this.info());
+  }
+}
diff --git a/frontend/js/labs/collision.js b/frontend/js/labs/collision.js
new file mode 100644
index 0000000..082926f
--- /dev/null
+++ b/frontend/js/labs/collision.js
@@ -0,0 +1,1009 @@
+'use strict';
+
+/* ═══════════════════════════════════════════════
+   CollisionSim — 2D elastic/inelastic ball collision
+   Conservation of momentum & energy demo
+   ═══════════════════════════════════════════════ */
+
+class CollisionSim {
+  constructor(canvas) {
+    this.c   = canvas;
+    this.ctx = canvas.getContext('2d');
+
+    /* physics params */
+    this.m1    = 4;
+    this.m2    = 4;
+    this.v1    = 8;
+    this.v2    = 8;
+    this.angle = 0;
+    this.e     = 1;
+    this.speed = 1;   // sim speed multiplier (0.1 – 4)
+
+    /* runtime */
+    this.playing   = false;
+    this._raf      = null;
+    this._lastTs   = null;
+    this._cooldown = 0;
+    this._colCount = 0;
+
+    /* balls */
+    this._b = [];
+
+    /* visual effects */
+    this._sparks    = [];
+    this._rings     = [];
+    this._dust      = [];          // tiny debris cloud
+    this._impactPt  = null;
+    this._squish    = [null, null]; // per-ball squish {ts, nx, ny}
+    this._launchTs  = null;         // when play() was called
+
+    /* stats */
+    this._snapBefore = null;
+    this._snapAfter  = null;
+
+    /* perfectly-inelastic merge state */
+    this._merged      = false;
+    this._mergeR      = 0;
+    this._mergeNormal = null;   // {nx, ny} at moment of merge
+
+    this.onUpdate    = null;
+    this.onPlayPause = null;  // canvas click callback
+
+    /* centre-of-mass trail */
+    this._cmTrail = [];
+
+    /* pre-collision ghost velocity arrows */
+    this._ghostArrows = [];
+
+    /* hover inspector */
+    this._hoverBall = null;
+
+    canvas.addEventListener('click',      () => { if (this.onPlayPause) this.onPlayPause(); });
+    canvas.addEventListener('mousemove',  e  => this._onMouseMove(e));
+    canvas.addEventListener('mouseleave', ()  => { this._hoverBall = null; this.draw(); });
+
+    new ResizeObserver(() => { this.fit(); this._initBalls(); this.draw(); })
+      .observe(canvas.parentElement);
+  }
+
+  /* ═══ public API ═══ */
+
+  fit() {
+    const r = this.c.parentElement.getBoundingClientRect();
+    this.c.width  = r.width  || 700;
+    this.c.height = r.height || 420;
+  }
+
+  setParams(p) {
+    if (p.m1    !== undefined) this.m1    = +p.m1;
+    if (p.m2    !== undefined) this.m2    = +p.m2;
+    if (p.v1    !== undefined) this.v1    = +p.v1;
+    if (p.v2    !== undefined) this.v2    = +p.v2;
+    if (p.angle !== undefined) this.angle = +p.angle;
+    if (p.e     !== undefined) this.e     = +p.e;
+    this.reset();
+  }
+
+  setSpeed(s) {
+    this.speed = Math.max(0.1, Math.min(4, +s));
+  }
+
+  play() {
+    if (this.playing) return;
+    this.playing   = true;
+    this._lastTs   = null;
+    this._launchTs = performance.now();
+    this._spawnLaunchFx();
+    this._tick();
+  }
+
+  pause() {
+    this.playing = false;
+    if (this._raf) { cancelAnimationFrame(this._raf); this._raf = null; }
+  }
+
+  reset() {
+    this.pause();
+    this._sparks      = [];
+    this._rings       = [];
+    this._dust        = [];
+    this._squish      = [null, null];
+    this._impactPt    = null;
+    this._launchTs    = null;
+    this._merged      = false;
+    this._mergeR      = 0;
+    this._mergeNormal = null;
+    this._cmTrail     = [];
+    this._ghostArrows = [];
+    this._initBalls();
+    this.draw();
+    this._emit();
+  }
+
+  stats() {
+    if (this._b.length < 2) return { v1:0, v2:0, ke:0, p:0, colCount:0, before:null, after:null };
+    const [b1, b2] = this._b;
+    const v1 = Math.hypot(b1.vx, b1.vy), v2 = Math.hypot(b2.vx, b2.vy);
+    const ke = 0.5 * b1.m * v1 * v1 + 0.5 * b2.m * v2 * v2;
+    const px = b1.m * b1.vx + b2.m * b2.vx;
+    const py = b1.m * b1.vy + b2.m * b2.vy;
+    const p  = Math.hypot(px, py);
+    return { v1, v2, ke, p, colCount: this._colCount,
+             before: this._snapBefore, after: this._snapAfter };
+  }
+
+  /* ═══ init ═══ */
+
+  _r(m) { return Math.max(16, Math.min(42, 12 + m * 2.2)); }
+
+  _initBalls() {
+    const W = this.c.width || 700, H = this.c.height || 420;
+    const r1 = this._r(this.m1), r2 = this._r(this.m2);
+    const gap = Math.max(r1 + r2 + 70, W * 0.30);
+    const cx  = W / 2, cy = H / 2;
+    const rad = (this.angle * Math.PI) / 180;
+    const dy2 = Math.tan(rad) * (gap / 2);
+
+    this._b = [
+      { id:1, m:this.m1, r:r1, x:cx - gap/2, y:cy,
+        vx:this.v1, vy:0, angle: 0, angVel: 0,
+        color:'#9B5DE5', rgb:'155,93,229', trail:[] },
+      { id:2, m:this.m2, r:r2, x:cx + gap/2, y:cy + dy2,
+        vx:-this.v2 * Math.cos(rad), vy:-this.v2 * Math.sin(rad), angle: 0, angVel: 0,
+        color:'#06D6E0', rgb:'6,214,224', trail:[] },
+    ];
+
+    this._cooldown   = 0;
+    this._colCount   = 0;
+    this._snapBefore = null;
+    this._snapAfter  = null;
+  }
+
+  /* ═══ launch visual burst ═══ */
+
+  _spawnLaunchFx() {
+    const now = performance.now();
+    for (const b of this._b) {
+      /* expanding ring per ball */
+      this._rings.push({ x:b.x, y:b.y, ts:now, kind:'launch',
+                         life:700, maxR:b.r * 4, col:b.rgb });
+      /* radial spark burst */
+      for (let k = 0; k < 14; k++) {
+        this._sparks.push({
+          kind:'launch',
+          ang: (k / 14) * Math.PI * 2,
+          spd: 25 + Math.random() * 35,
+          x: b.x, y: b.y, ts: now,
+          col: b.rgb, life: 550,
+        });
+      }
+    }
+  }
+
+  /* ═══ tick / step ═══ */
+
+  _tick() {
+    if (!this.playing) return;
+    this._raf = requestAnimationFrame(ts => {
+      if (!this.playing) return;
+      if (this._lastTs === null) this._lastTs = ts;
+      const dt = Math.min((ts - this._lastTs) / 1000, 0.05) * this.speed;
+      this._lastTs = ts;
+      this._step(dt);
+      this.draw();
+      this._emit();
+      if (this.playing) this._tick();
+    });
+  }
+
+  _step(dt) {
+    const W = this.c.width, H = this.c.height;
+    const [b1, b2] = this._b;
+    if (this._cooldown > 0) this._cooldown--;
+
+    /* trails */
+    for (const b of this._b) {
+      b.trail.push({ x: b.x, y: b.y, spd: Math.hypot(b.vx, b.vy) });
+      if (b.trail.length > 90) b.trail.shift();
+    }
+
+    /* centre-of-mass trail */
+    const M   = b1.m + b2.m;
+    const cmx = (b1.m * b1.x + b2.m * b2.x) / M;
+    const cmy = (b1.m * b1.y + b2.m * b2.y) / M;
+    this._cmTrail.push({ x: cmx, y: cmy });
+    if (this._cmTrail.length > 180) this._cmTrail.shift();
+
+    /* integrate */
+    for (const b of this._b) {
+      b.x += b.vx * dt; b.y += b.vy * dt;
+      b.angle += (b.angVel || 0) * dt;
+      if (b.angVel) b.angVel *= 0.997; // rotational air drag
+    }
+
+    /* wall bounces — when merged, use combined radius and bounce both */
+    if (this._merged) {
+      const r = this._mergeR;
+      const fx = [
+        b1.x - r < 0   ? [b => { b.x = r;     b.vx =  Math.abs(b.vx); }, 'L'] : null,
+        b1.x + r > W   ? [b => { b.x = W - r; b.vx = -Math.abs(b.vx); }, 'R'] : null,
+        b1.y - r < 0   ? [b => { b.y = r;     b.vy =  Math.abs(b.vy); }, 'T'] : null,
+        b1.y + r > H   ? [b => { b.y = H - r; b.vy = -Math.abs(b.vy); }, 'B'] : null,
+      ].filter(Boolean);
+      for (const [fn, side] of fx) {
+        fn(b1); fn(b2); this._wallFx(b1, side);
+      }
+    } else {
+      const eW = Math.max(0.5, this.e); // wall restitution (at least 0.5)
+      const wallMu = 0.18;             // wall surface friction <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> spin
+      for (const b of this._b) {
+        if (b.x - b.r < 0)   { b.x = b.r;     const vn = Math.abs(b.vx); b.vx = vn * eW;  b.angVel -= b.vy * wallMu / b.r; this._wallFx(b, 'L'); }
+        if (b.x + b.r > W)   { b.x = W - b.r; const vn = Math.abs(b.vx); b.vx = -vn * eW; b.angVel += b.vy * wallMu / b.r; this._wallFx(b, 'R'); }
+        if (b.y - b.r < 0)   { b.y = b.r;     const vn = Math.abs(b.vy); b.vy = vn * eW;  b.angVel += b.vx * wallMu / b.r; this._wallFx(b, 'T'); }
+        if (b.y + b.r > H)   { b.y = H - b.r; const vn = Math.abs(b.vy); b.vy = -vn * eW; b.angVel -= b.vx * wallMu / b.r; this._wallFx(b, 'B'); }
+      }
+    }
+
+    /* ball–ball collision — skip when already merged */
+    if (this._cooldown === 0 && !this._merged) {
+      const dx   = b2.x - b1.x, dy = b2.y - b1.y;
+      const dist = Math.hypot(dx, dy);
+      const min  = b1.r + b2.r;
+
+      if (dist < min && dist > 0.01) {
+        const nx = dx / dist, ny = dy / dist;
+        const dvn = (b1.vx - b2.vx) * nx + (b1.vy - b2.vy) * ny;
+
+        if (dvn > 0) {
+          if (this._colCount === 0) this._snapBefore = this._snapshot();
+
+          /* save pre-collision ghost arrows */
+          const _gnow = performance.now();
+          this._ghostArrows = this._b.map(b => ({
+            x: b.x, y: b.y, vx: b.vx, vy: b.vy, rgb: b.rgb, ts: _gnow,
+          }));
+
+          const isPerfectlyInelastic = this.e < 0.02;
+          if (isPerfectlyInelastic) {
+            /* ── MERGE: conservation of momentum, balls stick ── */
+            const M = b1.m + b2.m;
+            const mvx = (b1.m * b1.vx + b2.m * b2.vx) / M;
+            const mvy = (b1.m * b1.vy + b2.m * b2.vy) / M;
+            b1.vx = b2.vx = mvx;
+            b1.vy = b2.vy = mvy;
+            this._merged      = true;
+            this._mergeR      = Math.sqrt(b1.r * b1.r + b2.r * b2.r);
+            this._mergeNormal = { nx, ny };
+          } else {
+            const J = (1 + this.e) * dvn / (1 / b1.m + 1 / b2.m);
+            b1.vx -= J * nx / b1.m;  b1.vy -= J * ny / b1.m;
+            b2.vx += J * nx / b2.m;  b2.vy += J * ny / b2.m;
+
+            /* tangential friction <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> spin */
+            const tx = -ny, ty = nx;
+            const vRelT = (b1.vx - b2.vx) * tx + (b1.vy - b2.vy) * ty;
+            if (Math.abs(vRelT) > 0.5) {
+              const frMu = 0.32;
+              const jtMax = frMu * Math.abs(J);
+              const jt = -Math.sign(vRelT) * Math.min(jtMax, Math.abs(vRelT) / (1/b1.m + 1/b2.m));
+              b1.vx += jt * tx / b1.m;  b1.vy += jt * ty / b1.m;
+              b2.vx -= jt * tx / b2.m;  b2.vy -= jt * ty / b2.m;
+              const I1 = 0.4 * b1.m * b1.r * b1.r;
+              const I2 = 0.4 * b2.m * b2.r * b2.r;
+              b1.angVel -= jt * b1.r / I1;
+              b2.angVel += jt * b2.r / I2;
+            }
+          }
+
+          this._snapAfter = this._snapshot();
+          this._colCount++;
+          this._cooldown = 8;
+
+          const ix = (b1.x + b2.x) / 2, iy = (b1.y + b2.y) / 2;
+          this._spawnCollisionFx(ix, iy, nx, ny, dvn);
+
+          /* squish (even on merge — visible one frame) */
+          this._squish[0] = { ts: performance.now(), nx,  ny,  dv: dvn };
+          this._squish[1] = { ts: performance.now(), nx: -nx, ny: -ny, dv: dvn };
+        }
+
+        /* overlap resolution */
+        const ov = min - dist;
+        b1.x -= nx * ov / 2;  b1.y -= ny * ov / 2;
+        b2.x += nx * ov / 2;  b2.y += ny * ov / 2;
+      }
+    }
+
+    /* if merged, lock both balls to centre-of-mass */
+    if (this._merged) {
+      const M = b1.m + b2.m;
+      const cmx = (b1.m * b1.x + b2.m * b2.x) / M;
+      const cmy = (b1.m * b1.y + b2.m * b2.y) / M;
+      b1.x = b2.x = cmx;
+      b1.y = b2.y = cmy;
+      b2.vx = b1.vx;
+      b2.vy = b1.vy;
+      /* sync rotation of merged body */
+      const avgAng = (b1.angVel * b1.m + b2.angVel * b2.m) / M;
+      b1.angVel = b2.angVel = avgAng;
+      b1.angle += avgAng * dt; b2.angle = b1.angle;
+    }
+
+    /* expire effects */
+    const now = performance.now();
+    this._rings  = this._rings.filter(r  => (now - r.ts)  < (r.life  || 900));
+    this._sparks = this._sparks.filter(sp => (now - sp.ts) < (sp.life || 800));
+    this._dust   = this._dust.filter(d   => (now - d.ts)   < 1400);
+    for (let i = 0; i < 2; i++) {
+      if (this._squish[i] && (now - this._squish[i].ts) > 300) this._squish[i] = null;
+    }
+  }
+
+  _wallFx(b, side) {
+    const now = performance.now();
+    const count = 6;
+    const baseAng = { L: 0, R: Math.PI, T: Math.PI / 2, B: -Math.PI / 2 }[side] ?? 0;
+    for (let k = 0; k < count; k++) {
+      this._sparks.push({
+        kind: 'wall',
+        ang:  baseAng + (Math.random() - 0.5) * Math.PI,
+        spd:  10 + Math.random() * 20,
+        x: b.x, y: b.y, ts: now,
+        col: b.rgb, life: 400,
+      });
+    }
+  }
+
+  _spawnCollisionFx(ix, iy, nx, ny, dvn) {
+    const now       = performance.now();
+    const intensity = Math.min(1, dvn / 22);
+
+    this._impactPt = { x: ix, y: iy, ts: now, intensity };
+
+    /* 4 expanding rings (different radii, colors, lifetimes) */
+    const ringDefs = [
+      { life:1400, col:'255,255,255',  maxR:160 },
+      { life:1000, col:'155,93,229',   maxR: 90 },
+      { life: 750, col:'6,214,224',    maxR: 65 },
+      { life: 500, col:'241,91,181',   maxR: 42 },
+    ];
+    for (const rd of ringDefs) {
+      this._rings.push({ x:ix, y:iy, ts:now, kind:'collision',
+                         life:rd.life, col:rd.col, maxR:rd.maxR });
+    }
+
+    /* 40 sparks — multi-color, gravity arc */
+    const pal = ['255,255,255','255,220,70','155,93,229','6,214,224','241,91,181'];
+    for (let k = 0; k < 40; k++) {
+      this._sparks.push({
+        kind: 'collision',
+        ang:  (k / 40) * Math.PI * 2 + (Math.random() - 0.5) * 0.35,
+        spd:  (28 + Math.random() * 95) * (0.55 + intensity * 0.45),
+        len:  0.3 + Math.random() * 0.7,
+        x: ix, y: iy, ts: now,
+        col:  pal[Math.floor(Math.random() * pal.length)],
+        grav: 35 + Math.random() * 65,
+        life: 900,
+      });
+    }
+
+    /* dust cloud — tiny slow particles */
+    for (let k = 0; k < 20; k++) {
+      this._dust.push({
+        ang:  Math.random() * Math.PI * 2,
+        spd:  4 + Math.random() * 12,
+        x: ix + (Math.random() - 0.5) * 6,
+        y: iy + (Math.random() - 0.5) * 6,
+        r:    1 + Math.random() * 2.5,
+        ts:   now,
+        grav: 8 + Math.random() * 18,
+      });
+    }
+  }
+
+  /* ═══ snapshot ═══ */
+
+  _snapshot() {
+    return this._b.map(b => {
+      const spd = Math.hypot(b.vx, b.vy);
+      return { m: b.m, vx: b.vx, vy: b.vy, spd, ke: 0.5 * b.m * spd * spd };
+    });
+  }
+
+  _emit() { if (this.onUpdate) this.onUpdate(this.stats()); }
+
+  /* ═══ RENDER ═══ */
+
+  draw() {
+    const W = this.c.width, H = this.c.height;
+    if (!W || !H || this._b.length < 2) return;
+    const ctx = this.ctx;
+    const now = performance.now();
+
+    /* ── 1. Background ── */
+    /* radial dark-violet base */
+    const bg = ctx.createRadialGradient(W / 2, H / 2, 0, W / 2, H / 2, Math.hypot(W, H) / 1.7);
+    bg.addColorStop(0, '#130e22');
+    bg.addColorStop(1, '#080812');
+    ctx.fillStyle = bg;
+    ctx.fillRect(0, 0, W, H);
+
+    /* impact bg flash */
+    if (this._impactPt) {
+      const el = (now - this._impactPt.ts) / 220;
+      if (el < 1) {
+        const fa  = Math.pow(1 - el, 2) * (this._impactPt.intensity || 0.5) * 0.22;
+        const fg  = ctx.createRadialGradient(
+          this._impactPt.x, this._impactPt.y, 0,
+          this._impactPt.x, this._impactPt.y, Math.hypot(W, H));
+        fg.addColorStop(0,   `rgba(255,255,255,${fa})`);
+        fg.addColorStop(0.4, `rgba(155,93,229,${fa * 0.5})`);
+        fg.addColorStop(1,   'transparent');
+        ctx.fillStyle = fg;
+        ctx.fillRect(0, 0, W, H);
+      }
+    }
+
+    /* ── 2. Grid ── */
+    ctx.strokeStyle = 'rgba(255,255,255,.04)'; ctx.lineWidth = 1;
+    for (let x = 60; x < W; x += 60) {
+      ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke();
+    }
+    for (let y = 60; y < H; y += 60) {
+      ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(W, y); ctx.stroke();
+    }
+
+    /* ── 3. Arena border (pulses on impact) ── */
+    let borderAlpha = 0.18;
+    if (this._impactPt) {
+      const el = (now - this._impactPt.ts) / 500;
+      if (el < 1) borderAlpha = 0.18 + (1 - el) * 0.55;
+    }
+    ctx.strokeStyle = `rgba(155,93,229,${borderAlpha})`;
+    ctx.lineWidth = 2;
+    ctx.strokeRect(2, 2, W - 4, H - 4);
+
+    /* ── 4. Center dashes ── */
+    ctx.strokeStyle = 'rgba(255,255,255,.06)'; ctx.lineWidth = 1;
+    ctx.setLineDash([6, 7]);
+    ctx.beginPath(); ctx.moveTo(W / 2, 0); ctx.lineTo(W / 2, H); ctx.stroke();
+    ctx.beginPath(); ctx.moveTo(0, H / 2); ctx.lineTo(W, H / 2); ctx.stroke();
+    ctx.setLineDash([]);
+
+    /* ── 5. Idle pulsing halos ── */
+    if (!this.playing && this._colCount === 0) {
+      const pulse = 0.5 + 0.5 * Math.sin(now / 420);
+      for (const b of this._b) {
+        const [r, g, bl] = b.rgb.split(',').map(Number);
+        for (let ring = 0; ring < 2; ring++) {
+          const ph = pulse * (ring === 0 ? 1 : 1 - pulse);
+          const hg = ctx.createRadialGradient(b.x, b.y, b.r * (1 + ring * 0.7),
+                                              b.x, b.y, b.r * (3.2 + ring));
+          hg.addColorStop(0,   `rgba(${r},${g},${bl},${0.28 * ph})`);
+          hg.addColorStop(0.5, `rgba(${r},${g},${bl},${0.08 * ph})`);
+          hg.addColorStop(1,   'transparent');
+          ctx.fillStyle = hg;
+          ctx.beginPath();
+          ctx.arc(b.x, b.y, b.r * (3.2 + ring), 0, Math.PI * 2);
+          ctx.fill();
+        }
+      }
+      /* dashed approach lines */
+      for (const b of this._b) {
+        const spd = Math.hypot(b.vx, b.vy);
+        if (spd < 0.01) continue;
+        const nx  = b.vx / spd, ny = b.vy / spd;
+        const opa = 0.12 + 0.1 * Math.sin(now / 420);
+        ctx.strokeStyle = `rgba(255,255,255,${opa})`;
+        ctx.lineWidth   = 1.5;
+        ctx.setLineDash([5, 5]);
+        ctx.beginPath(); ctx.moveTo(b.x, b.y);
+        ctx.lineTo(b.x + nx * 60, b.y + ny * 60); ctx.stroke();
+        ctx.setLineDash([]);
+      }
+    }
+
+    /* ── 6. Launch burst (first 600 ms after play()) ── */
+    if (this._launchTs) {
+      const le = Math.min(1, (now - this._launchTs) / 600);
+      if (le < 1) {
+        for (const b of this._b) {
+          const [r, g, bl] = b.rgb.split(',').map(Number);
+          /* expanding ring */
+          const lR    = le * b.r * 5.5;
+          const lAlph = (1 - le) * 0.75;
+          ctx.strokeStyle = `rgba(${r},${g},${bl},${lAlph})`;
+          ctx.lineWidth   = 3 * (1 - le);
+          ctx.beginPath(); ctx.arc(b.x, b.y, lR, 0, Math.PI * 2); ctx.stroke();
+          /* 8 radial spokes */
+          for (let k = 0; k < 8; k++) {
+            const ang  = (k / 8) * Math.PI * 2;
+            const inner = b.r + 3;
+            const outer = b.r + 3 + le * 48;
+            ctx.strokeStyle = `rgba(${r},${g},${bl},${(1 - le) * 0.65})`;
+            ctx.lineWidth   = 1.8 * (1 - le * 0.6);
+            ctx.beginPath();
+            ctx.moveTo(b.x + Math.cos(ang) * inner, b.y + Math.sin(ang) * inner);
+            ctx.lineTo(b.x + Math.cos(ang) * outer, b.y + Math.sin(ang) * outer);
+            ctx.stroke();
+          }
+        }
+      }
+    }
+
+    /* ── 7. Trails (speed-colored: blue<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>yellow<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>red) ── */
+    const _maxSpd = Math.max(this.v1, this.v2, 0.1) * 1.6;
+    for (const b of this._b) {
+      for (let i = 1; i < b.trail.length; i++) {
+        const frac = i / b.trail.length;
+        const spd  = b.trail[i].spd || 0;
+        const tr   = frac * Math.min(8, 1.5 + spd * 0.18);
+        /* hue: 220 (blue) <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> 60 (yellow) <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> 0 (red) */
+        const t    = Math.min(1, spd / _maxSpd);
+        const hue  = 220 - t * 220;
+        const sat  = 80 + t * 20;
+        ctx.fillStyle = `hsla(${hue},${sat}%,65%,${frac * 0.6})`;
+        ctx.beginPath();
+        ctx.arc(b.trail[i].x, b.trail[i].y, tr, 0, Math.PI * 2);
+        ctx.fill();
+      }
+    }
+
+    /* ── 7b. Centre-of-mass trail ── */
+    for (let i = 1; i < this._cmTrail.length; i++) {
+      const frac = i / this._cmTrail.length;
+      const p    = this._cmTrail[i];
+      ctx.fillStyle = `rgba(255,255,255,${frac * 0.35})`;
+      ctx.beginPath(); ctx.arc(p.x, p.y, 1.5 + frac, 0, Math.PI * 2); ctx.fill();
+    }
+    if (this._cmTrail.length > 0) {
+      const cm = this._cmTrail[this._cmTrail.length - 1];
+      ctx.strokeStyle = 'rgba(255,255,255,.65)'; ctx.lineWidth = 1.5;
+      const cs = 7;
+      ctx.beginPath();
+      ctx.moveTo(cm.x - cs, cm.y); ctx.lineTo(cm.x + cs, cm.y);
+      ctx.moveTo(cm.x, cm.y - cs); ctx.lineTo(cm.x, cm.y + cs);
+      ctx.stroke();
+      ctx.strokeStyle = 'rgba(255,255,255,.25)'; ctx.lineWidth = 1;
+      ctx.beginPath(); ctx.arc(cm.x, cm.y, 5, 0, Math.PI * 2); ctx.stroke();
+      ctx.fillStyle = 'rgba(255,255,255,.35)';
+      ctx.font = '8px Manrope'; ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+      ctx.fillText('CM', cm.x, cm.y + 8);
+    }
+
+    /* ── 8. Impact rings ── */
+    for (const ring of this._rings) {
+      const el   = (now - ring.ts) / ring.life;
+      if (el >= 1) continue;
+      const maxR = ring.maxR || 110;
+      const ra   = Math.pow(1 - el, ring.kind === 'launch' ? 1.2 : 1.6);
+      ctx.strokeStyle = `rgba(${ring.col},${ra * 0.7})`;
+      ctx.lineWidth   = (ring.kind === 'launch' ? 1.5 : 2.8) * (1 - el * 0.75);
+      ctx.beginPath(); ctx.arc(ring.x, ring.y, el * maxR, 0, Math.PI * 2); ctx.stroke();
+    }
+
+    /* ── 9. Sparks ── */
+    ctx.lineCap = 'round';
+    for (const sp of this._sparks) {
+      const el = (now - sp.ts) / sp.life;
+      if (el >= 1) continue;
+      const sa   = Math.pow(1 - el, sp.kind === 'launch' ? 1.1 : 1.4);
+      const dist = sp.spd * el;
+      const grav = sp.grav ? sp.grav * el * el : 0;
+      const ex   = sp.x + Math.cos(sp.ang) * dist;
+      const ey   = sp.y + Math.sin(sp.ang) * dist + grav;
+      const sx   = sp.x + Math.cos(sp.ang) * dist * 0.4;
+      const sy   = sp.y + Math.sin(sp.ang) * dist * 0.4 + grav * 0.16;
+      ctx.strokeStyle = `rgba(${sp.col},${sa * 0.92})`;
+      ctx.lineWidth   = (sp.len || 1) * (sp.kind === 'launch' ? 1.2 : 2) * (1 - el * 0.4);
+      ctx.beginPath(); ctx.moveTo(sx, sy); ctx.lineTo(ex, ey); ctx.stroke();
+      /* bright tip */
+      if (el < 0.45) {
+        ctx.fillStyle = `rgba(255,255,255,${sa * 0.75})`;
+        ctx.beginPath(); ctx.arc(ex, ey, 1.4, 0, Math.PI * 2); ctx.fill();
+      }
+    }
+    ctx.lineCap = 'butt';
+
+    /* ── 10. Dust cloud ── */
+    for (const d of this._dust) {
+      const el = (now - d.ts) / 1400;
+      if (el >= 1) continue;
+      const da  = Math.pow(1 - el, 2) * 0.55;
+      const dist = d.spd * el;
+      const grav = d.grav * el * el;
+      ctx.fillStyle = `rgba(200,180,255,${da})`;
+      ctx.beginPath();
+      ctx.arc(d.x + Math.cos(d.ang) * dist,
+              d.y + Math.sin(d.ang) * dist + grav,
+              d.r * (1 + el * 0.5), 0, Math.PI * 2);
+      ctx.fill();
+    }
+
+    /* ── 11. Central impact flash ── */
+    if (this._impactPt) {
+      const el = (now - this._impactPt.ts) / 320;
+      if (el < 1) {
+        const fa  = Math.pow(1 - el, 2.2);
+        const fgR = 90 * (1 + el * 0.6);
+        const fg  = ctx.createRadialGradient(
+          this._impactPt.x, this._impactPt.y, 0,
+          this._impactPt.x, this._impactPt.y, fgR);
+        fg.addColorStop(0,    `rgba(255,255,255,${fa})`);
+        fg.addColorStop(0.22, `rgba(255,215,80,${fa * 0.55})`);
+        fg.addColorStop(0.6,  `rgba(155,93,229,${fa * 0.18})`);
+        fg.addColorStop(1,    'transparent');
+        ctx.fillStyle = fg;
+        ctx.beginPath(); ctx.arc(this._impactPt.x, this._impactPt.y, fgR, 0, Math.PI * 2);
+        ctx.fill();
+      }
+    }
+
+    /* ── 12. Velocity arrows ── */
+    for (const b of this._b) {
+      const [r, g, bl] = b.rgb.split(',').map(Number);
+      const spd = Math.hypot(b.vx, b.vy);
+      if (spd < 0.05) continue;
+      const pLen = Math.min(68, spd * b.m * 0.75 + 8);
+      const nx   = b.vx / spd, ny = b.vy / spd;
+      const ox   = nx * (b.r + 7),  oy = ny * (b.r + 7);
+      _colArrow(ctx,
+        b.x + ox,           b.y + oy,
+        b.x + ox + nx*pLen, b.y + oy + ny*pLen,
+        b.color, 2.5);
+      ctx.save();
+      ctx.shadowColor = b.color; ctx.shadowBlur = 5;
+      ctx.fillStyle = `rgba(${r},${g},${bl},.9)`;
+      ctx.font = 'bold 10px Manrope';
+      ctx.textAlign    = nx > 0 ? 'left' : 'right';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(spd.toFixed(1) + ' м/с',
+        b.x + ox + nx * (pLen + 8),
+        b.y + oy + ny * (pLen + 8));
+      ctx.restore();
+    }
+
+    /* ── 12b. Ghost velocity arrows (pre-collision, fade out 1.5 s) ── */
+    if (this._ghostArrows.length > 0) {
+      const ghostAge = (now - this._ghostArrows[0].ts) / 1500;
+      if (ghostAge < 1) {
+        const alpha = Math.pow(1 - ghostAge, 1.5) * 0.5;
+        for (const ga of this._ghostArrows) {
+          const spd = Math.hypot(ga.vx, ga.vy);
+          if (spd < 0.1) continue;
+          const pLen = Math.min(64, spd * 2.5 + 8);
+          const nx = ga.vx / spd, ny = ga.vy / spd;
+          ctx.save();
+          ctx.globalAlpha = alpha;
+          ctx.strokeStyle = `rgba(${ga.rgb},.9)`;
+          ctx.lineWidth = 2; ctx.setLineDash([5, 4]);
+          ctx.beginPath();
+          ctx.moveTo(ga.x, ga.y);
+          ctx.lineTo(ga.x + nx * pLen, ga.y + ny * pLen);
+          ctx.stroke();
+          ctx.setLineDash([]);
+          ctx.restore();
+        }
+      } else {
+        this._ghostArrows = [];
+      }
+    }
+
+    /* ── 12c. ΔKE loss badge near impact ── */
+    if (this._snapBefore && this._snapAfter && this._impactPt) {
+      const keBefore = this._snapBefore.reduce((s, b) => s + b.ke, 0);
+      const keAfter  = this._snapAfter.reduce((s,  b) => s + b.ke, 0);
+      const lossPct  = keBefore > 0.1 ? Math.round((1 - keAfter / keBefore) * 100) : 0;
+      if (lossPct > 0) {
+        const ix = this._impactPt.x, iy = this._impactPt.y - 42;
+        const label = 'ΔKE −' + lossPct + '%';
+        ctx.font = 'bold 10px Manrope';
+        const tw = ctx.measureText(label).width;
+        ctx.fillStyle = 'rgba(239,71,111,.18)';
+        _roundRect(ctx, ix - tw / 2 - 8, iy - 10, tw + 16, 20, 6); ctx.fill();
+        ctx.strokeStyle = 'rgba(239,71,111,.4)'; ctx.lineWidth = 1;
+        _roundRect(ctx, ix - tw / 2 - 8, iy - 10, tw + 16, 20, 6); ctx.stroke();
+        ctx.fillStyle = '#EF476F';
+        ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+        ctx.fillText(label, ix, iy);
+      } else if (lossPct === 0 && keBefore > 0.1) {
+        const ix = this._impactPt.x, iy = this._impactPt.y - 42;
+        const label = 'KE сохранена <svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>';
+        ctx.font = 'bold 10px Manrope';
+        const tw = ctx.measureText(label).width;
+        ctx.fillStyle = 'rgba(123,245,164,.15)';
+        _roundRect(ctx, ix - tw / 2 - 8, iy - 10, tw + 16, 20, 6); ctx.fill();
+        ctx.strokeStyle = 'rgba(123,245,164,.4)'; ctx.lineWidth = 1;
+        _roundRect(ctx, ix - tw / 2 - 8, iy - 10, tw + 16, 20, 6); ctx.stroke();
+        ctx.fillStyle = '#7BF5A4';
+        ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+        ctx.fillText(label, ix, iy);
+      }
+    }
+
+    /* ── 12d. Merged-body special rendering ── */
+    if (this._merged && this._mergeNormal) {
+      const mn  = this._mergeNormal;
+      const b1_ = this._b[0], b2_ = this._b[1];
+      const cx  = b1_.x, cy = b1_.y;          // both at same CM pos
+      const off = (b1_.r + b2_.r) * 0.52;      // visual separation
+
+      /* connection beam — shimmering gradient bar */
+      const bx1 = cx - mn.nx * off, by1 = cy - mn.ny * off;
+      const bx2 = cx + mn.nx * off, by2 = cy + mn.ny * off;
+      const pulse = 0.55 + 0.45 * Math.sin(now / 200);
+      const beamG = ctx.createLinearGradient(bx1, by1, bx2, by2);
+      beamG.addColorStop(0,   `rgba(155,93,229,${pulse * 0.9})`);
+      beamG.addColorStop(0.5, `rgba(255,255,255,${pulse * 0.55})`);
+      beamG.addColorStop(1,   `rgba(6,214,224,${pulse * 0.9})`);
+      ctx.save();
+      ctx.strokeStyle = beamG;
+      ctx.lineWidth   = Math.max(b1_.r, b2_.r) * 0.7;
+      ctx.lineCap     = 'round';
+      ctx.shadowColor = '#fff'; ctx.shadowBlur = 18 * pulse;
+      ctx.globalAlpha = 0.7;
+      ctx.beginPath(); ctx.moveTo(bx1, by1); ctx.lineTo(bx2, by2); ctx.stroke();
+      ctx.restore();
+
+      /* outer merged-body glow */
+      const gloBig = ctx.createRadialGradient(cx, cy, this._mergeR * 0.3,
+                                               cx, cy, this._mergeR * 3.2);
+      gloBig.addColorStop(0,   `rgba(255,220,100,${0.2 * pulse})`);
+      gloBig.addColorStop(0.4, `rgba(155,93,229,${0.1 * pulse})`);
+      gloBig.addColorStop(1,   'transparent');
+      ctx.save(); ctx.fillStyle = gloBig;
+      ctx.beginPath(); ctx.arc(cx, cy, this._mergeR * 3.2, 0, Math.PI * 2); ctx.fill();
+      ctx.restore();
+    }
+
+    /* ── 13. Balls (with squish deform) ── */
+    for (let i = 0; i < this._b.length; i++) {
+      const b  = this._b[i];
+      const [r, g, bl] = b.rgb.split(',').map(Number);
+      const sq = this._squish[i];
+
+      /* visual offset when merged — draw at slightly separated positions */
+      let drawX = b.x, drawY = b.y;
+      if (this._merged && this._mergeNormal) {
+        const mn  = this._mergeNormal;
+        const off = (this._b[0].r + this._b[1].r) * 0.52;
+        const sign = i === 0 ? -1 : 1;
+        drawX = b.x + sign * mn.nx * off;
+        drawY = b.y + sign * mn.ny * off;
+      }
+
+      /* outer glow */
+      const glo = ctx.createRadialGradient(drawX, drawY, b.r * 0.2, drawX, drawY, b.r * 3.4);
+      glo.addColorStop(0,   `rgba(${r},${g},${bl},.55)`);
+      glo.addColorStop(0.35,`rgba(${r},${g},${bl},.16)`);
+      glo.addColorStop(1,   'transparent');
+      ctx.fillStyle = glo;
+      ctx.beginPath(); ctx.arc(drawX, drawY, b.r * 3.4, 0, Math.PI * 2); ctx.fill();
+
+      /* squish transform */
+      let sqEl   = 0;
+      let sqAngle = 0;
+      if (sq) {
+        sqEl    = Math.min(1, (now - sq.ts) / 300);
+        sqAngle = Math.atan2(sq.ny, sq.nx);
+      }
+
+      ctx.save();
+      ctx.translate(drawX, drawY);
+      if (sqEl > 0 && sqEl < 1) {
+        const squeeze = 1 - 0.38 * Math.sin(sqEl * Math.PI);
+        ctx.rotate(sqAngle);
+        ctx.scale(1 + (1 - squeeze) * 0.5, squeeze);
+        ctx.rotate(-sqAngle);
+      }
+
+      /* body */
+      const bodyG = ctx.createRadialGradient(
+        -b.r * 0.33, -b.r * 0.33, b.r * 0.06,
+         0, 0, b.r);
+      bodyG.addColorStop(0,    '#ffffff');
+      bodyG.addColorStop(0.18, b.color);
+      bodyG.addColorStop(1,    `rgba(${Math.round(r*0.3)},${Math.round(g*0.3)},${Math.round(bl*0.3)},1)`);
+      ctx.fillStyle = bodyG;
+      ctx.beginPath(); ctx.arc(0, 0, b.r, 0, Math.PI * 2); ctx.fill();
+
+      /* rim */
+      ctx.strokeStyle = 'rgba(255,255,255,.5)'; ctx.lineWidth = 1.5;
+      ctx.stroke();
+
+      /* rotation indicator */
+      const bAng = b.angle || 0;
+      ctx.strokeStyle = 'rgba(255,255,255,.18)'; ctx.lineWidth = 1.5;
+      ctx.beginPath();
+      ctx.moveTo(0, 0);
+      ctx.lineTo(Math.cos(bAng) * b.r * 0.78, Math.sin(bAng) * b.r * 0.78);
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.arc(Math.cos(bAng) * b.r * 0.58, Math.sin(bAng) * b.r * 0.58, 2.2, 0, Math.PI * 2);
+      ctx.fillStyle = 'rgba(255,255,255,.28)'; ctx.fill();
+
+      /* primary highlight */
+      ctx.fillStyle = 'rgba(255,255,255,.25)';
+      ctx.beginPath();
+      ctx.ellipse(-b.r * 0.3, -b.r * 0.3, b.r * 0.35, b.r * 0.2, -0.6, 0, Math.PI * 2);
+      ctx.fill();
+
+      /* secondary glint */
+      ctx.fillStyle = 'rgba(255,255,255,.1)';
+      ctx.beginPath();
+      ctx.ellipse(b.r * 0.22, b.r * 0.28, b.r * 0.14, b.r * 0.07, 0.9, 0, Math.PI * 2);
+      ctx.fill();
+
+      ctx.restore();
+
+      /* mass label (not squished) */
+      ctx.fillStyle = 'rgba(255,255,255,.95)';
+      ctx.font = `bold ${Math.max(10, Math.round(b.r * 0.60))}px Manrope`;
+      ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+      ctx.fillText(b.m + ' кг', drawX, drawY);
+    }
+
+    /* ── 14. Total momentum vector from CoM ── */
+    const [b1, b2] = this._b;
+    const px   = b1.m * b1.vx + b2.m * b2.vx;
+    const py   = b1.m * b1.vy + b2.m * b2.vy;
+    const pMag = Math.hypot(px, py);
+    if (pMag > 0.1) {
+      const cmx  = (b1.m * b1.x + b2.m * b2.x) / (b1.m + b2.m);
+      const cmy  = (b1.m * b1.y + b2.m * b2.y) / (b1.m + b2.m);
+      const pLen = Math.min(68, pMag * 1.5);
+      const pnx  = px / pMag, pny = py / pMag;
+      ctx.save(); ctx.globalAlpha = 0.42;
+      _colArrow(ctx, cmx, cmy, cmx + pnx * pLen, cmy + pny * pLen, '#F15BB5', 1.5);
+      ctx.restore();
+      ctx.fillStyle = 'rgba(241,91,181,.5)';
+      ctx.font = '9px Manrope'; ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+      ctx.fillText('p⃗ = ' + pMag.toFixed(1), cmx + pnx * (pLen / 2 + 12), cmy + pny * (pLen / 2));
+    }
+
+    /* ── 15. Collision count badge ── */
+    if (this._colCount > 0) {
+      /* badge bg pill */
+      const txt = 'Столкновений: ' + this._colCount;
+      ctx.font = 'bold 11px Manrope';
+      const tw  = ctx.measureText(txt).width;
+      const bx  = W - 14 - tw, by = 8;
+      ctx.fillStyle = 'rgba(255,200,50,.15)';
+      _roundRect(ctx, bx - 8, by - 2, tw + 16, 20, 6);
+      ctx.fill();
+      ctx.strokeStyle = 'rgba(255,200,50,.3)'; ctx.lineWidth = 1;
+      _roundRect(ctx, bx - 8, by - 2, tw + 16, 20, 6);
+      ctx.stroke();
+      ctx.fillStyle = 'rgba(255,200,50,.95)';
+      ctx.textAlign = 'left'; ctx.textBaseline = 'top';
+      ctx.fillText(txt, bx, by);
+    }
+
+    /* ── 15b. СЛИПАНИЕ badge ── */
+    if (this._merged) {
+      const pulse2 = 0.65 + 0.35 * Math.sin(now / 380);
+      const txt2 = 'СЛИПАНИЕ';
+      ctx.font = 'bold 12px Manrope';
+      const tw2 = ctx.measureText(txt2).width;
+      ctx.fillStyle = `rgba(255,220,100,${0.22 * pulse2})`;
+      _roundRect(ctx, W/2 - tw2/2 - 12, 8, tw2 + 24, 22, 8); ctx.fill();
+      ctx.strokeStyle = `rgba(255,220,100,${0.55 * pulse2})`; ctx.lineWidth = 1.5;
+      _roundRect(ctx, W/2 - tw2/2 - 12, 8, tw2 + 24, 22, 8); ctx.stroke();
+      ctx.fillStyle = `rgba(255,220,100,${pulse2})`;
+      ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+      ctx.fillText(txt2, W/2, 19);
+    }
+
+    /* ── 16. Speed badge (top-left when speed ≠ 1×) ── */
+    if (Math.abs(this.speed - 1) > 0.05) {
+      const label = this.speed.toFixed(2) + '×';
+      ctx.font = 'bold 11px Manrope';
+      const tw  = ctx.measureText(label).width;
+      ctx.fillStyle = 'rgba(6,214,224,.12)';
+      _roundRect(ctx, 8, 8, tw + 14, 20, 6); ctx.fill();
+      ctx.strokeStyle = 'rgba(6,214,224,.3)'; ctx.lineWidth = 1;
+      _roundRect(ctx, 8, 8, tw + 14, 20, 6); ctx.stroke();
+      ctx.fillStyle = 'rgba(6,214,224,.9)';
+      ctx.textAlign = 'left'; ctx.textBaseline = 'top';
+      ctx.fillText(label, 15, 10);
+    }
+
+    /* ── 17. Hover ball tooltip ── */
+    if (this._hoverBall) {
+      this._drawBallTooltip(ctx, this._hoverBall, W, H);
+    }
+  }
+
+  /* ── hover inspector ── */
+
+  _onMouseMove(e) {
+    const r  = this.c.getBoundingClientRect();
+    const mx = (e.clientX - r.left) * (this.c.width  / r.width);
+    const my = (e.clientY - r.top)  * (this.c.height / r.height);
+    let found = null;
+    for (const b of this._b) {
+      if (Math.hypot(mx - b.x, my - b.y) < b.r + 18) { found = b; break; }
+    }
+    if (found !== this._hoverBall) { this._hoverBall = found; this.draw(); }
+  }
+
+  _drawBallTooltip(ctx, b, W, H) {
+    const [r, g, bl] = b.rgb.split(',').map(Number);
+    const spd = Math.hypot(b.vx, b.vy);
+    const ke  = 0.5 * b.m * spd * spd;
+    const p   = b.m * spd;
+    const ang = Math.atan2(b.vy, b.vx) * 180 / Math.PI;
+
+    const rows = [
+      { label: 'Масса m', val: b.m + ' кг',                     color: b.color },
+      { label: '|v|',     val: spd.toFixed(2) + ' м/с',          color: '#ffffff' },
+      { label: 'vx',      val: b.vx.toFixed(2) + ' м/с',         color: '#06D6E0' },
+      { label: 'vy',      val: b.vy.toFixed(2) + ' м/с',         color: '#9B5DE5' },
+      { label: 'KE',      val: ke.toFixed(1) + ' Дж',            color: '#FFD166' },
+      { label: 'p = mv',  val: p.toFixed(1) + ' кг·м/с',        color: '#F15BB5' },
+      { label: 'угол',    val: ang.toFixed(1) + '°',             color: 'rgba(255,255,255,.55)' },
+      { label: 'ω',       val: (b.angVel || 0).toFixed(1) + ' рад/с', color: '#F15BB5' },
+    ];
+
+    const padX = 10, padY = 8, lineH = 17;
+    const tw = 148, th = padY * 2 + rows.length * lineH;
+
+    let tx = b.x + b.r + 14, ty = b.y - th / 2;
+    if (tx + tw > W - 8) tx = b.x - b.r - tw - 14;
+    if (ty < 8)          ty = 8;
+    if (ty + th > H - 8) ty = H - th - 8;
+
+    ctx.save();
+    ctx.shadowColor = 'rgba(0,0,0,.65)'; ctx.shadowBlur = 14;
+    ctx.fillStyle   = 'rgba(8,8,18,.93)';
+    ctx.beginPath(); ctx.roundRect(tx, ty, tw, th, 9); ctx.fill();
+    ctx.restore();
+
+    ctx.strokeStyle = `rgba(${r},${g},${bl},.5)`; ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.roundRect(tx, ty, tw, th, 9); ctx.stroke();
+
+    ctx.strokeStyle = `rgba(${r},${g},${bl},.8)`; ctx.lineWidth = 2;
+    ctx.beginPath(); ctx.moveTo(tx + 9, ty + 1); ctx.lineTo(tx + tw - 9, ty + 1); ctx.stroke();
+
+    ctx.font = '10px Manrope, sans-serif';
+    for (let i = 0; i < rows.length; i++) {
+      const row = rows[i];
+      const ry  = ty + padY + i * lineH + lineH / 2;
+      if (i > 0) {
+        ctx.strokeStyle = 'rgba(255,255,255,.04)'; ctx.lineWidth = 1;
+        ctx.beginPath(); ctx.moveTo(tx + 8, ry - lineH / 2); ctx.lineTo(tx + tw - 8, ry - lineH / 2); ctx.stroke();
+      }
+      ctx.fillStyle = 'rgba(255,255,255,.35)'; ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
+      ctx.fillText(row.label, tx + padX, ry);
+      ctx.fillStyle = row.color; ctx.textAlign = 'right';
+      ctx.fillText(row.val, tx + tw - padX, ry);
+    }
+  }
+}
+
+/* ═══ helpers ═══ */
+
+function _colArrow(ctx, x1, y1, x2, y2, color, lw) {
+  const ang = Math.atan2(y2 - y1, x2 - x1);
+  ctx.save();
+  ctx.strokeStyle = color; ctx.fillStyle = color; ctx.lineWidth = lw;
+  ctx.shadowColor = color; ctx.shadowBlur  = 9;
+  ctx.lineCap = 'round';
+  ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke();
+  ctx.beginPath();
+  ctx.moveTo(x2, y2);
+  ctx.lineTo(x2 - 9 * Math.cos(ang - 0.42), y2 - 9 * Math.sin(ang - 0.42));
+  ctx.lineTo(x2 - 9 * Math.cos(ang + 0.42), y2 - 9 * Math.sin(ang + 0.42));
+  ctx.closePath(); ctx.fill();
+  ctx.restore();
+}
+
+function _roundRect(ctx, x, y, w, h, r) {
+  ctx.beginPath();
+  ctx.moveTo(x + r, y);
+  ctx.lineTo(x + w - r, y);    ctx.arcTo(x+w, y,   x+w, y+r,   r);
+  ctx.lineTo(x + w, y + h - r); ctx.arcTo(x+w, y+h, x+w-r, y+h, r);
+  ctx.lineTo(x + r, y + h);     ctx.arcTo(x,   y+h, x,   y+h-r, r);
+  ctx.lineTo(x, y + r);         ctx.arcTo(x,   y,   x+r, y,      r);
+  ctx.closePath();
+}
diff --git a/frontend/js/labs/coulomb.js b/frontend/js/labs/coulomb.js
new file mode 100644
index 0000000..53c1367
--- /dev/null
+++ b/frontend/js/labs/coulomb.js
@@ -0,0 +1,748 @@
+'use strict';
+/* ══════════════════════════════════════════════════════════
+   CoulombSim — Coulomb's Law interactive simulation
+   • Click canvas to place charge (+ or −)
+   • Drag to reposition, double-click / right-click to remove
+   • Layers: colormap, field lines, vector arrows,
+             equipotentials, force arrows
+   Electric field of point charge q at (cx,cy):
+     Ex = K·q·(x-cx)/r³,  Ey = K·q·(y-cy)/r³
+   Potential: V = K·q/r
+══════════════════════════════════════════════════════════ */
+
+class CoulombSim {
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.ctx    = canvas.getContext('2d');
+
+    this.charges  = [];   // [{x, y, q, id}]
+    this._nextId  = 0;
+    this.addSign  = +1;
+
+    /* layers */
+    this.layers = {
+      colormap:       true,
+      fieldlines:     true,
+      vectors:        false,
+      equipotentials: true,
+      forces:         false,
+    };
+
+    /* interaction */
+    this._drag     = null;   // charge index being dragged
+    this._hovered  = null;   // charge index under mouse
+    this._downPos  = null;   // mousedown position for click vs drag detection
+    this._mousePos = null;   // {x, y}
+
+    /* colormap cache */
+    this._cmDirty = true;
+    this._cmCache = null;    // ImageData
+
+    /* cursor reading */
+    this._cursorE = null;    // {ex, ey, mag, v}
+
+    /* visual Coulomb constant */
+    this.K = 60000;
+
+    /* dimensions */
+    this.W = 0;
+    this.H = 0;
+
+    /* callback */
+    this.onUpdate = null;
+
+    this._bindEvents();
+  }
+
+  /* ── Resize ─────────────────────────────────────────────── */
+  fit() {
+    this.W = this.canvas.offsetWidth;
+    this.H = this.canvas.offsetHeight;
+    this.canvas.width  = this.W * devicePixelRatio;
+    this.canvas.height = this.H * devicePixelRatio;
+    this.ctx.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0);
+    this._cmDirty = true;
+    this._cmCache = null;
+    this.draw();
+  }
+
+  /* ── Reset ──────────────────────────────────────────────── */
+  reset() {
+    this.charges  = [];
+    this._nextId  = 0;
+    this._cmDirty = true;
+    this._cmCache = null;
+    this._drag    = null;
+    this._hovered = null;
+  }
+
+  /* ── Charge management ──────────────────────────────────── */
+  addCharge(x, y, q) {
+    this.charges.push({ x, y, q, id: this._nextId++ });
+    this._cmDirty = true;
+    this.draw();
+    if (this.onUpdate) this.onUpdate(this.info());
+  }
+
+  removeCharge(i) {
+    if (i < 0 || i >= this.charges.length) return;
+    this.charges.splice(i, 1);
+    this._cmDirty = true;
+    this._drag    = null;
+    this._hovered = null;
+    this.draw();
+    if (this.onUpdate) this.onUpdate(this.info());
+  }
+
+  toggleLayer(name) {
+    if (name in this.layers) {
+      this.layers[name] = !this.layers[name];
+      this.draw();
+    }
+  }
+
+  setSign(s) {
+    this.addSign = s >= 0 ? +1 : -1;
+  }
+
+  /* ── Presets ────────────────────────────────────────────── */
+  preset(name) {
+    this.reset();
+    const cx = this.W / 2, cy = this.H / 2, d = this.W * 0.2;
+    if (name === 'dipole') {
+      this.addCharge(cx - d, cy,  1);
+      this.addCharge(cx + d, cy, -1);
+    } else if (name === 'equal') {
+      this.addCharge(cx - d, cy, 1);
+      this.addCharge(cx + d, cy, 1);
+    } else if (name === 'quadrupole') {
+      this.addCharge(cx - d, cy - d,  1);
+      this.addCharge(cx + d, cy - d, -1);
+      this.addCharge(cx + d, cy + d,  1);
+      this.addCharge(cx - d, cy + d, -1);
+    } else if (name === 'ring') {
+      for (let i = 0; i < 6; i++) {
+        const a = i * Math.PI / 3;
+        this.addCharge(cx + d * Math.cos(a), cy + d * Math.sin(a), i % 2 === 0 ? 1 : -1);
+      }
+    }
+    this._cmDirty = true;
+    this.draw();
+    if (this.onUpdate) this.onUpdate(this.info());
+  }
+
+  /* ── Info ───────────────────────────────────────────────── */
+  info() {
+    const pos = this.charges.filter(c => c.q > 0).length;
+    const neg = this.charges.filter(c => c.q < 0).length;
+    let maxE = 0;
+    for (let x = 20; x < this.W; x += 40)
+      for (let y = 20; y < this.H; y += 40) {
+        const f = this._fieldAt(x, y);
+        if (f.mag > maxE) maxE = f.mag;
+      }
+    const ce = this._cursorE;
+    return {
+      total:    this.charges.length,
+      positive: pos,
+      negative: neg,
+      maxE:     maxE.toFixed(0),
+      cursorE:  ce ? ce.mag.toFixed(0) : '—',
+      cursorV:  ce ? ce.v.toFixed(0)   : '—',
+    };
+  }
+
+  /* ── Physics ────────────────────────────────────────────── */
+  _fieldAt(x, y) {
+    let ex = 0, ey = 0, v = 0;
+    for (const c of this.charges) {
+      const dx = x - c.x, dy = y - c.y;
+      const r2 = dx * dx + dy * dy;
+      if (r2 < 1) continue;
+      const r  = Math.sqrt(r2);
+      const r3 = r2 * r;
+      ex += this.K * c.q * dx / r3;
+      ey += this.K * c.q * dy / r3;
+      v  += this.K * c.q / r;
+    }
+    return { ex, ey, mag: Math.hypot(ex, ey), v };
+  }
+
+  /* ── HSL <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> RGB helper ───────────────────────────────────── */
+  _hslToRgb(h, s, l) {
+    h = ((h % 360) + 360) % 360;
+    s /= 100; l /= 100;
+    const c  = (1 - Math.abs(2 * l - 1)) * s;
+    const x  = c * (1 - Math.abs((h / 60) % 2 - 1));
+    const m  = l - c / 2;
+    let r = 0, g = 0, b = 0;
+    if      (h < 60)  { r = c; g = x; b = 0; }
+    else if (h < 120) { r = x; g = c; b = 0; }
+    else if (h < 180) { r = 0; g = c; b = x; }
+    else if (h < 240) { r = 0; g = x; b = c; }
+    else if (h < 300) { r = x; g = 0; b = c; }
+    else              { r = c; g = 0; b = x; }
+    return [
+      Math.round((r + m) * 255),
+      Math.round((g + m) * 255),
+      Math.round((b + m) * 255),
+    ];
+  }
+
+  /* ── Colormap ───────────────────────────────────────────── */
+  _drawColormap(ctx) {
+    const W = this.W, H = this.H;
+    const STEP = 3;
+
+    if (this._cmDirty || !this._cmCache) {
+      const imgW = Math.ceil(W / STEP);
+      const imgH = Math.ceil(H / STEP);
+      const img  = ctx.createImageData(imgW, imgH);
+      const d    = img.data;
+
+      for (let py = 0; py < imgH; py++) {
+        for (let px = 0; px < imgW; px++) {
+          const x = px * STEP + STEP / 2;
+          const y = py * STEP + STEP / 2;
+          const { mag, v } = this._fieldAt(x, y);
+
+          /* hue based on potential sign */
+          let hue;
+          if (v > 0)      hue = 0  + (v  / (v  + 30000)) * 30;   // 0–30 red-orange
+          else if (v < 0) hue = 240 - ((-v) / (-v + 30000)) * 20; // 220–240 blue
+          else            hue = 0;
+
+          const sat = 80;
+          const lit = Math.tanh(mag   /  3000) * 40
+                    + Math.tanh(Math.abs(v) / 50000) * 25;
+
+          const [r, g, b] = this._hslToRgb(hue, sat, lit);
+          const idx = (py * imgW + px) * 4;
+          d[idx]     = r;
+          d[idx + 1] = g;
+          d[idx + 2] = b;
+          d[idx + 3] = 200;
+        }
+      }
+
+      this._cmCache = { img, imgW, imgH, STEP };
+      this._cmDirty = false;
+    }
+
+    const { img, imgW, imgH } = this._cmCache;
+
+    /* draw scaled up */
+    const oc  = document.createElement('canvas');
+    oc.width  = imgW;
+    oc.height = imgH;
+    oc.getContext('2d').putImageData(img, 0, 0);
+
+    ctx.save();
+    ctx.imageSmoothingEnabled = true;
+    ctx.imageSmoothingQuality = 'medium';
+    ctx.drawImage(oc, 0, 0, W, H);
+    ctx.restore();
+  }
+
+  /* ── Equipotentials ─────────────────────────────────────── */
+  _drawEquipotentials(ctx) {
+    const W = this.W, H = this.H;
+    const GRID = 8;
+    const LEVELS = [500, 2000, 8000, 30000, 100000, -500, -2000, -8000, -30000, -100000];
+
+    const cols = Math.ceil(W / GRID) + 1;
+    const rows = Math.ceil(H / GRID) + 1;
+
+    /* build V grid */
+    const vGrid = new Float64Array(cols * rows);
+    for (let r = 0; r < rows; r++)
+      for (let c = 0; c < cols; c++)
+        vGrid[r * cols + c] = this._fieldAt(c * GRID, r * GRID).v;
+
+    ctx.save();
+    ctx.strokeStyle = 'rgba(255,255,255,0.22)';
+    ctx.lineWidth   = 0.8;
+    ctx.setLineDash([4, 4]);
+    ctx.beginPath();
+
+    for (const level of LEVELS) {
+      for (let r = 0; r < rows - 1; r++) {
+        for (let c = 0; c < cols - 1; c++) {
+          const v00 = vGrid[ r      * cols + c    ];
+          const v10 = vGrid[ r      * cols + c + 1];
+          const v01 = vGrid[(r + 1) * cols + c    ];
+          const v11 = vGrid[(r + 1) * cols + c + 1];
+
+          /* crossed edges: top, right, bottom, left */
+          const pts = [];
+          const interp = (va, vb, xa, ya, xb, yb) => {
+            const t = (level - va) / (vb - va);
+            return [xa + t * (xb - xa), ya + t * (yb - ya)];
+          };
+
+          if ((v00 - level) * (v10 - level) < 0)
+            pts.push(interp(v00, v10, c * GRID, r * GRID, (c + 1) * GRID, r * GRID));
+          if ((v10 - level) * (v11 - level) < 0)
+            pts.push(interp(v10, v11, (c + 1) * GRID, r * GRID, (c + 1) * GRID, (r + 1) * GRID));
+          if ((v01 - level) * (v11 - level) < 0)
+            pts.push(interp(v01, v11, c * GRID, (r + 1) * GRID, (c + 1) * GRID, (r + 1) * GRID));
+          if ((v00 - level) * (v01 - level) < 0)
+            pts.push(interp(v00, v01, c * GRID, r * GRID, c * GRID, (r + 1) * GRID));
+
+          if (pts.length >= 2) {
+            ctx.moveTo(pts[0][0], pts[0][1]);
+            ctx.lineTo(pts[1][0], pts[1][1]);
+          }
+        }
+      }
+    }
+
+    ctx.stroke();
+    ctx.restore();
+  }
+
+  /* ── Vector arrows ──────────────────────────────────────── */
+  _drawVectors(ctx) {
+    const GRID = 45;
+    ctx.save();
+    ctx.strokeStyle = 'rgba(255,255,255,0.5)';
+    ctx.fillStyle   = 'rgba(255,255,255,0.5)';
+    ctx.lineWidth   = 1;
+
+    for (let x = GRID / 2; x < this.W; x += GRID) {
+      for (let y = GRID / 2; y < this.H; y += GRID) {
+        const { ex, ey, mag } = this._fieldAt(x, y);
+        if (mag < 1e-6) continue;
+        const len = Math.tanh(mag / 8000) * 18;
+        const nx  = ex / mag, ny = ey / mag;
+        const x2  = x + nx * len, y2 = y + ny * len;
+
+        ctx.beginPath();
+        ctx.moveTo(x, y);
+        ctx.lineTo(x2, y2);
+        ctx.stroke();
+
+        /* arrowhead */
+        const ax = -ny * 3, ay = nx * 3;
+        ctx.beginPath();
+        ctx.moveTo(x2, y2);
+        ctx.lineTo(x2 - nx * 6 + ax, y2 - ny * 6 + ay);
+        ctx.lineTo(x2 - nx * 6 - ax, y2 - ny * 6 - ay);
+        ctx.closePath();
+        ctx.fill();
+      }
+    }
+    ctx.restore();
+  }
+
+  /* ── Field lines ────────────────────────────────────────── */
+  _drawFieldLines(ctx) {
+    const W = this.W, H = this.H, sim = this;
+    const RAYS    = 12;
+    const STEP    = 2.5;
+    const MAX     = 2500;
+    const MARGIN  = 5;
+    const HIT_R   = 12;
+    const START_R = 18;
+
+    function rkStep(x, y, h) {
+      const f = (px, py) => {
+        const e = sim._fieldAt(px, py);
+        const m = Math.hypot(e.ex, e.ey) || 1e-10;
+        return [e.ex / m, e.ey / m];
+      };
+      const [k1x, k1y] = f(x, y);
+      const [k2x, k2y] = f(x + h * k1x / 2, y + h * k1y / 2);
+      const [k3x, k3y] = f(x + h * k2x / 2, y + h * k2y / 2);
+      const [k4x, k4y] = f(x + h * k3x, y + h * k3y);
+      return [
+        x + h * (k1x + 2 * k2x + 2 * k3x + k4x) / 6,
+        y + h * (k1y + 2 * k2y + 2 * k3y + k4y) / 6,
+      ];
+    }
+
+    const traceLine = (startX, startY, dir) => {
+      const pts = [[startX, startY]];
+      let px = startX, py = startY;
+      for (let s = 0; s < MAX; s++) {
+        const [nx, ny] = rkStep(px, py, dir * STEP);
+        if (nx < -MARGIN || nx > W + MARGIN || ny < -MARGIN || ny > H + MARGIN) break;
+
+        /* stop near negative charges */
+        let hitNeg = false;
+        for (const c of sim.charges) {
+          if (c.q < 0 && Math.hypot(nx - c.x, ny - c.y) < HIT_R) { hitNeg = true; break; }
+        }
+        if (hitNeg) break;
+
+        pts.push([nx, ny]);
+        px = nx; py = ny;
+      }
+      return pts;
+    };
+
+    ctx.save();
+    ctx.lineWidth = 1.2;
+
+    for (const charge of this.charges) {
+      const dir = charge.q > 0 ? 1 : -1;
+      for (let i = 0; i < RAYS; i++) {
+        const angle = (i / RAYS) * Math.PI * 2;
+        const sx    = charge.x + START_R * Math.cos(angle);
+        const sy    = charge.y + START_R * Math.sin(angle);
+        const pts   = traceLine(sx, sy, dir);
+        if (pts.length < 2) continue;
+
+        const grad = ctx.createLinearGradient(pts[0][0], pts[0][1], pts[pts.length - 1][0], pts[pts.length - 1][1]);
+        grad.addColorStop(0,   'rgba(255,255,255,0.75)');
+        grad.addColorStop(0.5, 'rgba(255,255,255,0.35)');
+        grad.addColorStop(1,   'rgba(255,255,255,0.0)');
+        ctx.strokeStyle = grad;
+
+        ctx.beginPath();
+        ctx.moveTo(pts[0][0], pts[0][1]);
+        for (let k = 1; k < pts.length; k++) ctx.lineTo(pts[k][0], pts[k][1]);
+        ctx.stroke();
+      }
+    }
+    ctx.restore();
+  }
+
+  /* ── Force arrows ───────────────────────────────────────── */
+  _drawForceArrows(ctx) {
+    ctx.save();
+    for (let i = 0; i < this.charges.length; i++) {
+      const ci = this.charges[i];
+      let fx = 0, fy = 0;
+      for (let j = 0; j < this.charges.length; j++) {
+        if (i === j) continue;
+        const cj  = this.charges[j];
+        const dx  = ci.x - cj.x, dy = ci.y - cj.y;
+        const r2  = dx * dx + dy * dy;
+        if (r2 < 1) continue;
+        const r3  = r2 * Math.sqrt(r2);
+        const F   = this.K * ci.q * cj.q;
+        fx += F * dx / r3;
+        fy += F * dy / r3;
+      }
+      const mag = Math.hypot(fx, fy);
+      if (mag < 1e-6) continue;
+
+      const len = Math.tanh(mag / 50000) * 55;
+      const nx  = fx / mag, ny = fy / mag;
+      const x2  = ci.x + nx * len, y2 = ci.y + ny * len;
+
+      ctx.strokeStyle = '#FFD166';
+      ctx.fillStyle   = '#FFD166';
+      ctx.lineWidth   = 2;
+      ctx.shadowBlur  = 10;
+      ctx.shadowColor = '#FFD166';
+
+      ctx.beginPath();
+      ctx.moveTo(ci.x, ci.y);
+      ctx.lineTo(x2, y2);
+      ctx.stroke();
+
+      /* arrowhead */
+      const ax = -ny * 5, ay = nx * 5;
+      ctx.beginPath();
+      ctx.moveTo(x2, y2);
+      ctx.lineTo(x2 - nx * 10 + ax, y2 - ny * 10 + ay);
+      ctx.lineTo(x2 - nx * 10 - ax, y2 - ny * 10 - ay);
+      ctx.closePath();
+      ctx.fill();
+
+      ctx.shadowBlur = 0;
+    }
+    ctx.restore();
+  }
+
+  /* ── Draw charges ───────────────────────────────────────── */
+  _drawCharges(ctx) {
+    for (let i = 0; i < this.charges.length; i++) {
+      const c   = this.charges[i];
+      const r   = 14 + Math.tanh(Math.abs(c.q) / 5) * 4;
+      const pos = c.q > 0;
+
+      ctx.save();
+      ctx.shadowBlur  = 18;
+      ctx.shadowColor = pos ? '#EF476F' : '#4CC9F0';
+
+      /* hovered outer ring */
+      if (this._hovered === i) {
+        ctx.beginPath();
+        ctx.arc(c.x, c.y, r + 6, 0, Math.PI * 2);
+        ctx.strokeStyle = pos ? 'rgba(239,71,111,0.45)' : 'rgba(76,201,240,0.45)';
+        ctx.lineWidth   = 2;
+        ctx.stroke();
+      }
+
+      /* body gradient */
+      const grd = ctx.createRadialGradient(c.x - r * 0.3, c.y - r * 0.3, r * 0.1, c.x, c.y, r);
+      if (pos) {
+        grd.addColorStop(0, '#FF7FA3');
+        grd.addColorStop(1, '#EF476F');
+      } else {
+        grd.addColorStop(0, '#90E0FF');
+        grd.addColorStop(1, '#4CC9F0');
+      }
+
+      ctx.beginPath();
+      ctx.arc(c.x, c.y, r, 0, Math.PI * 2);
+      ctx.fillStyle = grd;
+      ctx.fill();
+
+      /* label */
+      ctx.shadowBlur  = 0;
+      ctx.fillStyle   = '#fff';
+      ctx.font        = 'bold 14px sans-serif';
+      ctx.textAlign   = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(pos ? '+' : '−', c.x, c.y + 1);
+
+      ctx.restore();
+    }
+  }
+
+  /* ── Cursor E display ───────────────────────────────────── */
+  _drawCursorE(ctx) {
+    const { ex, ey, mag, v } = this._cursorE;
+    const { x, y }           = this._mousePos;
+    if (mag < 1e-6) return;
+
+    const nx  = ex / mag, ny = ey / mag;
+    const len = 20;
+    const x2  = x + nx * len, y2 = y + ny * len;
+
+    ctx.save();
+    ctx.strokeStyle = 'rgba(255,255,255,0.8)';
+    ctx.fillStyle   = 'rgba(255,255,255,0.8)';
+    ctx.lineWidth   = 1.5;
+
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    ctx.lineTo(x2, y2);
+    ctx.stroke();
+
+    const ax = -ny * 4, ay = nx * 4;
+    ctx.beginPath();
+    ctx.moveTo(x2, y2);
+    ctx.lineTo(x2 - nx * 8 + ax, y2 - ny * 8 + ay);
+    ctx.lineTo(x2 - nx * 8 - ax, y2 - ny * 8 - ay);
+    ctx.closePath();
+    ctx.fill();
+
+    /* text */
+    const eStr = mag >= 1000 ? (mag / 1000).toFixed(1) + 'k' : mag.toFixed(0);
+    const vStr = Math.abs(v) >= 1000 ? (v / 1000).toFixed(1) + 'k' : v.toFixed(0);
+
+    ctx.font         = '11px monospace';
+    ctx.textAlign    = 'left';
+    ctx.textBaseline = 'bottom';
+    ctx.fillStyle    = 'rgba(255,255,255,0.85)';
+    ctx.shadowBlur   = 4;
+    ctx.shadowColor  = '#000';
+    ctx.fillText(`|E| = ${eStr}`, x + 6, y - 14);
+    ctx.fillText(`V  = ${vStr}`, x + 6, y - 2);
+    ctx.restore();
+  }
+
+  /* ── Hint ───────────────────────────────────────────────── */
+  _drawHint(ctx) {
+    const W = this.W, H = this.H;
+    ctx.save();
+    ctx.textAlign    = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.font         = '16px sans-serif';
+    ctx.fillStyle    = 'rgba(255,255,255,0.35)';
+    ctx.fillText('Нажмите чтобы добавить заряд', W / 2, H / 2 + 30);
+
+    /* simple circle icon */
+    ctx.strokeStyle = 'rgba(255,255,255,0.25)';
+    ctx.lineWidth   = 1.5;
+    ctx.beginPath();
+    ctx.arc(W / 2, H / 2 - 14, 18, 0, Math.PI * 2);
+    ctx.stroke();
+    ctx.font      = 'bold 22px sans-serif';
+    ctx.fillStyle = 'rgba(255,255,255,0.3)';
+    ctx.fillText('+', W / 2, H / 2 - 13);
+    ctx.restore();
+  }
+
+  /* ── Main draw ──────────────────────────────────────────── */
+  draw() {
+    const ctx = this.ctx, W = this.W, H = this.H;
+    if (!W || !H) return;
+    ctx.clearRect(0, 0, W, H);
+
+    /* 1. background radial gradient */
+    const bg = ctx.createRadialGradient(W / 2, H / 2, 0, W / 2, H / 2, Math.max(W, H) / 2);
+    bg.addColorStop(0, '#0D0D1A');
+    bg.addColorStop(1, '#050508');
+    ctx.fillStyle = bg;
+    ctx.fillRect(0, 0, W, H);
+
+    /* 2. subtle grid */
+    ctx.save();
+    ctx.strokeStyle = 'rgba(255,255,255,0.025)';
+    ctx.lineWidth   = 1;
+    ctx.beginPath();
+    for (let x = 0; x < W; x += 30) { ctx.moveTo(x, 0); ctx.lineTo(x, H); }
+    for (let y = 0; y < H; y += 30) { ctx.moveTo(0, y); ctx.lineTo(W, y); }
+    ctx.stroke();
+    ctx.restore();
+
+    if (this.charges.length > 0) {
+      /* 3. colormap */
+      if (this.layers.colormap)       this._drawColormap(ctx);
+      /* 4. equipotentials */
+      if (this.layers.equipotentials) this._drawEquipotentials(ctx);
+      /* 5. vectors */
+      if (this.layers.vectors)        this._drawVectors(ctx);
+      /* 6. field lines */
+      if (this.layers.fieldlines)     this._drawFieldLines(ctx);
+      /* 7. force arrows */
+      if (this.layers.forces)         this._drawForceArrows(ctx);
+    }
+
+    /* 8. charges */
+    this._drawCharges(ctx);
+
+    /* 9. cursor E */
+    if (this._cursorE && this._mousePos && this.charges.length > 0)
+      this._drawCursorE(ctx);
+
+    /* 10. hint if empty */
+    if (this.charges.length === 0) this._drawHint(ctx);
+  }
+
+  /* ── Events ─────────────────────────────────────────────── */
+  _bindEvents() {
+    const canvas = this.canvas;
+
+    const pos = e => {
+      const r = canvas.getBoundingClientRect();
+      const s = e.touches ? e.touches[0] : e;
+      return { x: s.clientX - r.left, y: s.clientY - r.top };
+    };
+
+    const hitIdx = p => {
+      for (let i = this.charges.length - 1; i >= 0; i--)
+        if (Math.hypot(p.x - this.charges[i].x, p.y - this.charges[i].y) < 20) return i;
+      return -1;
+    };
+
+    /* ── mousedown ── */
+    canvas.addEventListener('mousedown', e => {
+      if (e.button !== 0) return;
+      const p  = pos(e);
+      const hi = hitIdx(p);
+      this._downPos = p;
+      if (hi >= 0) this._drag = hi;
+    });
+
+    /* ── mousemove ── */
+    canvas.addEventListener('mousemove', e => {
+      const p = pos(e);
+      this._mousePos = p;
+      if (this._drag !== null) {
+        this.charges[this._drag].x = p.x;
+        this.charges[this._drag].y = p.y;
+        this._cmDirty = true;
+        this._cursorE = this._fieldAt(p.x, p.y);
+        this.draw();
+      } else {
+        this._hovered = hitIdx(p);
+        this._cursorE = this.charges.length > 0 ? this._fieldAt(p.x, p.y) : null;
+        this.draw();
+      }
+    });
+
+    /* ── mouseup ── */
+    canvas.addEventListener('mouseup', e => {
+      if (e.button !== 0) return;
+      const p  = pos(e);
+      const wasDragging = this._drag !== null;
+      if (wasDragging) {
+        this._drag    = null;
+        this._cmDirty = true;
+        this.draw();
+        if (this.onUpdate) this.onUpdate(this.info());
+        return;
+      }
+      /* click (no drag) */
+      const dp   = this._downPos || p;
+      const dist = Math.hypot(p.x - dp.x, p.y - dp.y);
+      if (dist < 5) {
+        const hi = hitIdx(p);
+        if (hi < 0) this.addCharge(p.x, p.y, this.addSign);
+      }
+      if (this.onUpdate) this.onUpdate(this.info());
+    });
+
+    /* ── contextmenu (remove) ── */
+    canvas.addEventListener('contextmenu', e => {
+      e.preventDefault();
+      const p  = pos(e);
+      const hi = hitIdx(p);
+      if (hi >= 0) this.removeCharge(hi);
+    });
+
+    /* ── dblclick (remove) ── */
+    canvas.addEventListener('dblclick', e => {
+      const p  = pos(e);
+      const hi = hitIdx(p);
+      if (hi >= 0) this.removeCharge(hi);
+    });
+
+    /* ── mouseleave ── */
+    canvas.addEventListener('mouseleave', () => {
+      this._cursorE  = null;
+      this._mousePos = null;
+      this._hovered  = null;
+      this.draw();
+    });
+
+    /* ── touch support ── */
+    canvas.addEventListener('touchstart', e => {
+      e.preventDefault();
+      const p  = pos(e);
+      const hi = hitIdx(p);
+      this._downPos = p;
+      if (hi >= 0) this._drag = hi;
+    }, { passive: false });
+
+    canvas.addEventListener('touchmove', e => {
+      e.preventDefault();
+      const p = pos(e);
+      this._mousePos = p;
+      if (this._drag !== null) {
+        this.charges[this._drag].x = p.x;
+        this.charges[this._drag].y = p.y;
+        this._cmDirty = true;
+        this._cursorE = this._fieldAt(p.x, p.y);
+        this.draw();
+      }
+    }, { passive: false });
+
+    canvas.addEventListener('touchend', e => {
+      e.preventDefault();
+      const wasDragging = this._drag !== null;
+      if (wasDragging) {
+        this._drag    = null;
+        this._cmDirty = true;
+        this.draw();
+        if (this.onUpdate) this.onUpdate(this.info());
+        return;
+      }
+      const p    = pos({ touches: e.changedTouches });
+      const dp   = this._downPos || p;
+      const dist = Math.hypot(p.x - dp.x, p.y - dp.y);
+      if (dist < 10) {
+        const hi = hitIdx(p);
+        if (hi < 0) this.addCharge(p.x, p.y, this.addSign);
+      }
+      if (this.onUpdate) this.onUpdate(this.info());
+    }, { passive: false });
+  }
+}
diff --git a/frontend/js/labs/crystal.js b/frontend/js/labs/crystal.js
new file mode 100644
index 0000000..93d91cf
--- /dev/null
+++ b/frontend/js/labs/crystal.js
@@ -0,0 +1,315 @@
+'use strict';
+
+/* ═══════════════════════════════════════════════
+   CrystalSim — 3D crystal lattice (Three.js)
+   NaCl, Diamond, BCC metal, FCC metal
+   ═══════════════════════════════════════════════ */
+
+class CrystalSim {
+  constructor(container) {
+    this.container = container;
+    this._running = false;
+
+    /* Three.js */
+    this.scene    = new THREE.Scene();
+    this.camera   = new THREE.PerspectiveCamera(50, 1, 0.1, 200);
+    this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+    this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+    this.renderer.setClearColor(0x0D0D1A, 1);
+    container.appendChild(this.renderer.domElement);
+
+    /* lighting */
+    this.scene.add(new THREE.AmbientLight(0xffffff, 0.5));
+    const dir = new THREE.DirectionalLight(0xffffff, 0.8);
+    dir.position.set(5, 8, 6);
+    this.scene.add(dir);
+    const pt = new THREE.PointLight(0x9B5DE5, 0.4, 50);
+    pt.position.set(-4, 3, 5);
+    this.scene.add(pt);
+
+    this.camera.position.set(8, 6, 8);
+    this.camera.lookAt(0, 0, 0);
+
+    /* orbit-like manual controls */
+    this._drag   = false;
+    this._prevX  = 0;
+    this._prevY  = 0;
+    this._rotY   = 0.6;
+    this._rotX   = 0.4;
+    this._dist   = 12;
+    this._autoSpin = true;
+
+    const el = this.renderer.domElement;
+    el.style.cursor = 'grab';
+    el.addEventListener('pointerdown', e => { this._drag = true; this._prevX = e.clientX; this._prevY = e.clientY; this._autoSpin = false; el.style.cursor = 'grabbing'; });
+    window.addEventListener('pointerup', () => { this._drag = false; el.style.cursor = 'grab'; });
+    window.addEventListener('pointermove', e => {
+      if (!this._drag) return;
+      this._rotY += (e.clientX - this._prevX) * 0.008;
+      this._rotX += (e.clientY - this._prevY) * 0.008;
+      this._rotX = Math.max(-1.4, Math.min(1.4, this._rotX));
+      this._prevX = e.clientX; this._prevY = e.clientY;
+    });
+    el.addEventListener('wheel', e => {
+      e.preventDefault();
+      this._dist = Math.max(5, Math.min(30, this._dist + e.deltaY * 0.02));
+    }, { passive: false });
+
+    /* touch */
+    el.addEventListener('touchstart', e => {
+      if (e.touches.length === 1) {
+        this._drag = true; this._prevX = e.touches[0].clientX; this._prevY = e.touches[0].clientY; this._autoSpin = false;
+      }
+    }, { passive: true });
+    el.addEventListener('touchmove', e => {
+      if (!this._drag || e.touches.length !== 1) return;
+      const t = e.touches[0];
+      this._rotY += (t.clientX - this._prevX) * 0.008;
+      this._rotX += (t.clientY - this._prevY) * 0.008;
+      this._rotX = Math.max(-1.4, Math.min(1.4, this._rotX));
+      this._prevX = t.clientX; this._prevY = t.clientY;
+    }, { passive: true });
+    el.addEventListener('touchend', () => { this._drag = false; });
+
+    /* resize */
+    this._ro = new ResizeObserver(() => this.fit());
+    this._ro.observe(container);
+
+    /* state */
+    this._lattice = 'nacl';
+    this._group = new THREE.Group();
+    this.scene.add(this._group);
+
+    this._buildLattice('nacl');
+    this.fit();
+    this.play();
+  }
+
+  /* ── public ── */
+  setLattice(type) {
+    this._lattice = type;
+    this._buildLattice(type);
+  }
+
+  fit() {
+    const w = this.container.clientWidth  || 600;
+    const h = this.container.clientHeight || 400;
+    this.camera.aspect = w / h;
+    this.camera.updateProjectionMatrix();
+    this.renderer.setSize(w, h);
+  }
+
+  play()  { if (!this._running) { this._running = true; this._loop(); } }
+  stop()  { this._running = false; }
+  pause() { this._running = false; }
+
+  /* ── lattice builders ── */
+  _buildLattice(type) {
+    // clear
+    while (this._group.children.length) {
+      const c = this._group.children[0];
+      c.geometry?.dispose(); c.material?.dispose();
+      this._group.remove(c);
+    }
+
+    const builders = {
+      nacl:    () => this._buildNaCl(),
+      diamond: () => this._buildDiamond(),
+      bcc:     () => this._buildBCC(),
+      fcc:     () => this._buildFCC(),
+    };
+    (builders[type] || builders.nacl)();
+  }
+
+  _sphere(r, color) {
+    const geo = new THREE.SphereGeometry(r, 24, 24);
+    const mat = new THREE.MeshPhysicalMaterial({
+      color, metalness: 0.1, roughness: 0.3,
+      clearcoat: 0.6, clearcoatRoughness: 0.2,
+    });
+    return new THREE.Mesh(geo, mat);
+  }
+
+  _bond(from, to, color = 0x555555) {
+    const dir = new THREE.Vector3().subVectors(to, from);
+    const len = dir.length();
+    const geo = new THREE.CylinderGeometry(0.04, 0.04, len, 8);
+    const mat = new THREE.MeshStandardMaterial({ color, opacity: 0.5, transparent: true });
+    const mesh = new THREE.Mesh(geo, mat);
+    mesh.position.copy(from).add(dir.multiplyScalar(0.5));
+    mesh.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), dir.normalize());
+    return mesh;
+  }
+
+  _buildNaCl() {
+    const n = 3; // 3×3×3 unit cells
+    const a = 2.0; // lattice constant
+    const offset = -(n - 1) * a / 2;
+    const positions = [];
+
+    for (let i = 0; i < n; i++)
+      for (let j = 0; j < n; j++)
+        for (let k = 0; k < n; k++) {
+          const x = offset + i * a, y = offset + j * a, z = offset + k * a;
+          const isNa = (i + j + k) % 2 === 0;
+          const s = this._sphere(isNa ? 0.28 : 0.38, isNa ? 0x9B5DE5 : 0x06D6E0);
+          s.position.set(x, y, z);
+          this._group.add(s);
+          positions.push({ x, y, z });
+        }
+
+    // bonds to nearest neighbors
+    for (let i = 0; i < positions.length; i++)
+      for (let j = i + 1; j < positions.length; j++) {
+        const dx = positions[i].x - positions[j].x;
+        const dy = positions[i].y - positions[j].y;
+        const dz = positions[i].z - positions[j].z;
+        const d2 = dx * dx + dy * dy + dz * dz;
+        if (Math.abs(d2 - a * a) < 0.01) {
+          const b = this._bond(
+            new THREE.Vector3(positions[i].x, positions[i].y, positions[i].z),
+            new THREE.Vector3(positions[j].x, positions[j].y, positions[j].z),
+            0x444466
+          );
+          this._group.add(b);
+        }
+      }
+  }
+
+  _buildDiamond() {
+    const a = 2.5;
+    const basis = [
+      [0, 0, 0], [0.5, 0.5, 0], [0.5, 0, 0.5], [0, 0.5, 0.5],
+      [0.25, 0.25, 0.25], [0.75, 0.75, 0.25], [0.75, 0.25, 0.75], [0.25, 0.75, 0.75],
+    ];
+    const n = 2;
+    const offset = -(n * a) / 2;
+    const allPos = [];
+
+    for (let ci = 0; ci < n; ci++)
+      for (let cj = 0; cj < n; cj++)
+        for (let ck = 0; ck < n; ck++)
+          for (const [bx, by, bz] of basis) {
+            const x = offset + (ci + bx) * a;
+            const y = offset + (cj + by) * a;
+            const z = offset + (ck + bz) * a;
+            const s = this._sphere(0.22, 0x34d399);
+            s.position.set(x, y, z);
+            this._group.add(s);
+            allPos.push(new THREE.Vector3(x, y, z));
+          }
+
+    // bonds
+    const bondLen = a * Math.sqrt(3) / 4;
+    const tol = bondLen * 0.15;
+    for (let i = 0; i < allPos.length; i++)
+      for (let j = i + 1; j < allPos.length; j++) {
+        const d = allPos[i].distanceTo(allPos[j]);
+        if (Math.abs(d - bondLen) < tol) {
+          this._group.add(this._bond(allPos[i], allPos[j], 0x228866));
+        }
+      }
+  }
+
+  _buildBCC() {
+    const a = 2.2, n = 3;
+    const offset = -(n - 1) * a / 2;
+    const allPos = [];
+
+    for (let i = 0; i < n; i++)
+      for (let j = 0; j < n; j++)
+        for (let k = 0; k < n; k++) {
+          // corner atoms
+          const x1 = offset + i * a, y1 = offset + j * a, z1 = offset + k * a;
+          const s1 = this._sphere(0.3, 0xF15BB5);
+          s1.position.set(x1, y1, z1);
+          this._group.add(s1);
+          allPos.push(new THREE.Vector3(x1, y1, z1));
+
+          // body center (except last cell in each dimension)
+          if (i < n - 1 && j < n - 1 && k < n - 1) {
+            const cx = x1 + a / 2, cy = y1 + a / 2, cz = z1 + a / 2;
+            const s2 = this._sphere(0.3, 0xF59E0B);
+            s2.position.set(cx, cy, cz);
+            this._group.add(s2);
+            allPos.push(new THREE.Vector3(cx, cy, cz));
+          }
+        }
+
+    // bonds
+    const bondLen = a * Math.sqrt(3) / 2;
+    const tol = bondLen * 0.1;
+    for (let i = 0; i < allPos.length; i++)
+      for (let j = i + 1; j < allPos.length; j++) {
+        const d = allPos[i].distanceTo(allPos[j]);
+        if (Math.abs(d - bondLen) < tol) {
+          this._group.add(this._bond(allPos[i], allPos[j], 0x664444));
+        }
+      }
+  }
+
+  _buildFCC() {
+    const a = 2.4, n = 3;
+    const offset = -(n - 1) * a / 2;
+    const allPos = [];
+
+    for (let i = 0; i < n; i++)
+      for (let j = 0; j < n; j++)
+        for (let k = 0; k < n; k++) {
+          const x = offset + i * a, y = offset + j * a, z = offset + k * a;
+          // corner
+          const s = this._sphere(0.25, 0x60a5fa);
+          s.position.set(x, y, z);
+          this._group.add(s);
+          allPos.push(new THREE.Vector3(x, y, z));
+
+          // face centers (only for cell interiors)
+          if (i < n - 1 && j < n - 1) {
+            const f1 = this._sphere(0.25, 0x60a5fa);
+            f1.position.set(x + a / 2, y + a / 2, z);
+            this._group.add(f1);
+            allPos.push(new THREE.Vector3(x + a / 2, y + a / 2, z));
+          }
+          if (i < n - 1 && k < n - 1) {
+            const f2 = this._sphere(0.25, 0x60a5fa);
+            f2.position.set(x + a / 2, y, z + a / 2);
+            this._group.add(f2);
+            allPos.push(new THREE.Vector3(x + a / 2, y, z + a / 2));
+          }
+          if (j < n - 1 && k < n - 1) {
+            const f3 = this._sphere(0.25, 0x60a5fa);
+            f3.position.set(x, y + a / 2, z + a / 2);
+            this._group.add(f3);
+            allPos.push(new THREE.Vector3(x, y + a / 2, z + a / 2));
+          }
+        }
+
+    // bonds to nearest neighbors (a/√2)
+    const bondLen = a / Math.SQRT2;
+    const tol = bondLen * 0.1;
+    for (let i = 0; i < allPos.length; i++)
+      for (let j = i + 1; j < allPos.length; j++) {
+        const d = allPos[i].distanceTo(allPos[j]);
+        if (Math.abs(d - bondLen) < tol) {
+          this._group.add(this._bond(allPos[i], allPos[j], 0x334466));
+        }
+      }
+  }
+
+  /* ── animation ── */
+  _loop() {
+    if (!this._running) return;
+    requestAnimationFrame(() => this._loop());
+
+    if (this._autoSpin) this._rotY += 0.003;
+
+    this.camera.position.set(
+      this._dist * Math.sin(this._rotY) * Math.cos(this._rotX),
+      this._dist * Math.sin(this._rotX),
+      this._dist * Math.cos(this._rotY) * Math.cos(this._rotX)
+    );
+    this.camera.lookAt(0, 0, 0);
+
+    this.renderer.render(this.scene, this.camera);
+  }
+}
diff --git a/frontend/js/labs/diffusion.js b/frontend/js/labs/diffusion.js
new file mode 100644
index 0000000..c89f403
--- /dev/null
+++ b/frontend/js/labs/diffusion.js
@@ -0,0 +1,465 @@
+'use strict';
+
+/**
+ * DiffusionSim v2 — Diffusion simulation (two gases mixing).
+ * v2: entropy timeline on history chart, pore mode (gap in partition), density heatmap.
+ */
+class DiffusionSim {
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.ctx    = canvas.getContext('2d');
+    this.W = 0; this.H = 0;
+    this.particles   = [];
+    this.N           = 60;
+    this.T           = 1.0;
+    this.partitionOn = true;
+    this._history    = [];  // {step, fracA_left, entropy}
+    this._steps      = 0;
+    this._raf        = null;
+    this.onUpdate    = null;
+    this._dpr        = 1;
+
+    // v2
+    this._poreMode  = false;  // partition has a gap in the center
+    this._poreH     = 40;     // gap height in pixels
+    this._heatmap   = null;   // cached density heatmap
+    this._hmTick    = 0;
+  }
+
+  // ── public API ──────────────────────────────────────────────────────────────
+  fit() {
+    const dpr = window.devicePixelRatio || 1;
+    this._dpr = dpr;
+    const w = this.canvas.offsetWidth, h = this.canvas.offsetHeight;
+    this.canvas.width = w * dpr; this.canvas.height = h * dpr;
+    this.W = w; this.H = h;
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this.reset();
+  }
+
+  reset() {
+    const { W, H } = this;
+    this.partitionOn = true;
+    this._poreMode   = false;
+    this._steps      = 0;
+    this._history    = [{ step: 0, fracA_left: 1.0, entropy: 0 }];
+    this._heatmap    = null;
+
+    const particles = [];
+    const r = 5;
+
+    let attA = 0;
+    while (particles.filter(p => p.type === 'A').length < this.N && attA < this.N * 30) {
+      attA++;
+      const x = r + Math.random() * (W / 2 - 2 * r);
+      const y = r + Math.random() * (H - 2 * r);
+      const a = Math.random() * Math.PI * 2, s = this.T * 3.5;
+      particles.push({ x, y, vx: Math.cos(a) * s, vy: Math.sin(a) * s, r, type: 'A' });
+    }
+
+    let attB = 0;
+    while (particles.filter(p => p.type === 'B').length < this.N && attB < this.N * 30) {
+      attB++;
+      const x = W / 2 + r + Math.random() * (W / 2 - 2 * r);
+      const y = r + Math.random() * (H - 2 * r);
+      const a = Math.random() * Math.PI * 2, s = this.T * 3.5;
+      particles.push({ x, y, vx: Math.cos(a) * s, vy: Math.sin(a) * s, r, type: 'B' });
+    }
+
+    this.particles = particles;
+  }
+
+  togglePartition() {
+    if (this._poreMode) {
+      // If pore is on, full toggle removes pore first
+      this._poreMode  = false;
+      this.partitionOn = true;
+    } else {
+      this.partitionOn = !this.partitionOn;
+    }
+  }
+
+  togglePore() {
+    if (!this.partitionOn && !this._poreMode) {
+      // Partition is fully off — re-enable with pore
+      this.partitionOn = true;
+      this._poreMode   = true;
+    } else if (this.partitionOn && !this._poreMode) {
+      this._poreMode   = true;   // add pore to full partition
+    } else if (this._poreMode) {
+      this._poreMode   = false;  // remove pore, keep partition
+    }
+  }
+
+  setN(n) { this.N = Math.max(10, Math.min(200, n)); this.reset(); }
+
+  setT(t) {
+    const f = Math.sqrt(t / this.T);
+    for (const p of this.particles) { p.vx *= f; p.vy *= f; }
+    this.T = t;
+  }
+
+  start() { if (!this._raf) this._raf = requestAnimationFrame(this._loop.bind(this)); }
+  stop()  { if (this._raf) { cancelAnimationFrame(this._raf); this._raf = null; } }
+
+  // ── simulation ──────────────────────────────────────────────────────────────
+  _loop() {
+    this._step(); this._step();
+    this.draw();
+    this._raf = requestAnimationFrame(this._loop.bind(this));
+  }
+
+  _step() {
+    const { W, H, particles } = this;
+
+    for (const p of particles) {
+      p.x += p.vx; p.y += p.vy;
+
+      if (p.x < p.r) { p.x = p.r; p.vx = Math.abs(p.vx); }
+      if (p.x > W - p.r) { p.x = W - p.r; p.vx = -Math.abs(p.vx); }
+      if (p.y < p.r) { p.y = p.r; p.vy = Math.abs(p.vy); }
+      if (p.y > H - p.r) { p.y = H - p.r; p.vy = -Math.abs(p.vy); }
+
+      // Partition logic
+      if (this.partitionOn) {
+        const mid = W / 2, hw = 3;
+        const inPore = this._poreMode
+          && p.y > H / 2 - this._poreH / 2
+          && p.y < H / 2 + this._poreH / 2;
+
+        if (!inPore) {
+          if (p.vx > 0 && p.x + p.r > mid - hw && p.x < mid) {
+            p.x = mid - hw - p.r; p.vx = -Math.abs(p.vx);
+          } else if (p.vx < 0 && p.x - p.r < mid + hw && p.x > mid) {
+            p.x = mid + hw + p.r; p.vx = Math.abs(p.vx);
+          }
+        }
+      }
+    }
+
+    // Spatial grid collisions
+    const cs = 14, cols = Math.ceil(W / cs) + 1;
+    const grid = new Map();
+    for (let i = 0; i < particles.length; i++) {
+      const p = particles[i];
+      const k = Math.floor(p.x / cs) + Math.floor(p.y / cs) * cols;
+      if (!grid.has(k)) grid.set(k, []);
+      grid.get(k).push(i);
+    }
+
+    for (let i = 0; i < particles.length; i++) {
+      const p1 = particles[i];
+      const cx = Math.floor(p1.x / cs), cy = Math.floor(p1.y / cs);
+      for (let dcx = -1; dcx <= 1; dcx++) for (let dcy = -1; dcy <= 1; dcy++) {
+        const cell = grid.get((cx + dcx) + (cy + dcy) * cols);
+        if (!cell) continue;
+        for (const j of cell) {
+          if (j <= i) continue;
+          const p2 = particles[j];
+          const dx = p2.x - p1.x, dy = p2.y - p1.y;
+          const d = Math.hypot(dx, dy), md = p1.r + p2.r;
+          if (d < md && d > 0.001) {
+            const nx = dx / d, ny = dy / d;
+            const dvn = (p1.vx - p2.vx) * nx + (p1.vy - p2.vy) * ny;
+            if (dvn < 0) continue;
+            p1.vx -= dvn * nx; p1.vy -= dvn * ny;
+            p2.vx += dvn * nx; p2.vy += dvn * ny;
+            const ov = (md - d) / 2;
+            p1.x -= nx * ov; p1.y -= ny * ov;
+            p2.x += nx * ov; p2.y += ny * ov;
+          }
+        }
+      }
+    }
+
+    // History (with entropy)
+    if (this._steps % 60 === 0) {
+      const left = particles.filter(p => p.x < W / 2);
+      const fracA_left = left.length > 0
+        ? left.filter(p => p.type === 'A').length / left.length
+        : 0;
+      const f = fracA_left;
+      const entropy = -(f * Math.log(f + 1e-9) + (1 - f) * Math.log(1 - f + 1e-9));
+      this._history.push({ step: this._steps, fracA_left, entropy });
+      if (this._history.length > 200) this._history.shift();
+    }
+
+    // Heatmap update (every 30 steps)
+    if (this._steps % 30 === 0) this._updateHeatmap();
+
+    this._steps++;
+    if (this._steps % 30 === 0 && this.onUpdate) this.onUpdate(this.info());
+  }
+
+  _updateHeatmap() {
+    const { W, H, particles } = this;
+    const cols = 20, rows = 14;
+    const cw = W / cols, ch = H / rows;
+    const grid = [];
+    for (let r = 0; r < rows; r++) {
+      grid[r] = [];
+      for (let c = 0; c < cols; c++) grid[r][c] = { A: 0, B: 0 };
+    }
+    for (const p of particles) {
+      const c = Math.min(cols - 1, Math.floor(p.x / cw));
+      const r = Math.min(rows - 1, Math.floor(p.y / ch));
+      grid[r][c][p.type]++;
+    }
+    const maxCount = Math.max(...grid.flat().map(c => c.A + c.B), 1);
+    this._heatmap = { grid, cols, rows, cw, ch, maxCount };
+  }
+
+  info() {
+    const { particles, W, N } = this;
+    const leftA  = particles.filter(p => p.x < W / 2 && p.type === 'A').length;
+    const leftB  = particles.filter(p => p.x < W / 2 && p.type === 'B').length;
+    const rightA = particles.filter(p => p.x >= W / 2 && p.type === 'A').length;
+    const rightB = particles.filter(p => p.x >= W / 2 && p.type === 'B').length;
+    const mixed  = (leftB + rightA) / (2 * N);
+    const fracAL = leftA / ((leftA + leftB) || 1);
+    const entropy = -(fracAL * Math.log(fracAL + 1e-9) + (1 - fracAL) * Math.log(1 - fracAL + 1e-9));
+    return {
+      leftA, leftB, rightA, rightB,
+      mixed:        (mixed * 100).toFixed(0),
+      entropy:      entropy.toFixed(3),
+      partitionOn:  this.partitionOn,
+      poreMode:     this._poreMode,
+      steps:        this._steps,
+    };
+  }
+
+  // ── drawing ─────────────────────────────────────────────────────────────────
+  draw() {
+    const { ctx, W, H } = this;
+    const TAU = Math.PI * 2;
+
+    ctx.fillStyle = '#080818'; ctx.fillRect(0, 0, W, H);
+
+    // Background tints
+    ctx.fillStyle = 'rgba(6,214,224,0.04)';  ctx.fillRect(0,     0, W / 2, H);
+    ctx.fillStyle = 'rgba(241,91,181,0.04)'; ctx.fillRect(W / 2, 0, W / 2, H);
+
+    // Density heatmap (subtle)
+    this._drawHeatmap(ctx);
+
+    // Partition
+    if (this.partitionOn) this._drawPartition(ctx, W, H);
+
+    // Particles
+    ctx.save();
+    for (const p of this.particles) {
+      const color = p.type === 'A' ? '#06D6E0' : '#F15BB5';
+      ctx.shadowColor = color; ctx.shadowBlur = 6;
+      ctx.fillStyle   = color;
+      ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, TAU); ctx.fill();
+    }
+    ctx.restore();
+
+    // Concentration bar (right side)
+    this._drawConcBar(ctx, W, H);
+
+    // History chart with entropy (bottom)
+    this._drawHistoryChart(ctx, W, H);
+
+    // Stats overlay (top-left)
+    this._drawStats(ctx);
+  }
+
+  _drawHeatmap(ctx) {
+    const hm = this._heatmap;
+    if (!hm) return;
+    for (let r = 0; r < hm.rows; r++) for (let c = 0; c < hm.cols; c++) {
+      const cell = hm.grid[r][c];
+      const total = cell.A + cell.B;
+      if (total === 0) continue;
+      const frac = total / hm.maxCount;
+      // Color based on A vs B ratio
+      const fracA = cell.A / total;
+      // Mix cyan and pink by composition
+      const rr = Math.round(6   + (241 - 6)   * (1 - fracA));
+      const rg = Math.round(214 + (91  - 214) * (1 - fracA));
+      const rb = Math.round(224 + (181 - 224) * (1 - fracA));
+      ctx.fillStyle = `rgba(${rr},${rg},${rb},${frac * 0.08})`;
+      ctx.fillRect(c * hm.cw, r * hm.ch, hm.cw, hm.ch);
+    }
+  }
+
+  _drawPartition(ctx, W, H) {
+    const mid = W / 2, pw = 6;
+    const poreOn = this._poreMode;
+    const poreY1 = H / 2 - this._poreH / 2;
+    const poreY2 = H / 2 + this._poreH / 2;
+
+    ctx.save();
+    ctx.shadowBlur = 10; ctx.shadowColor = 'rgba(255,255,255,0.5)';
+
+    const grad = ctx.createLinearGradient(mid - pw / 2, 0, mid + pw / 2, 0);
+    grad.addColorStop(0, 'rgba(255,255,255,0.15)');
+    grad.addColorStop(1, 'rgba(255,255,255,0.05)');
+    ctx.fillStyle = grad;
+
+    if (!poreOn) {
+      ctx.fillRect(mid - pw / 2, 0, pw, H);
+    } else {
+      // Two segments (above and below pore)
+      ctx.fillRect(mid - pw / 2, 0, pw, poreY1);
+      ctx.fillRect(mid - pw / 2, poreY2, pw, H - poreY2);
+
+      // Pore opening highlight
+      ctx.shadowBlur = 0;
+      ctx.strokeStyle = 'rgba(255,255,255,0.35)'; ctx.lineWidth = 1;
+      ctx.setLineDash([3, 3]);
+      ctx.beginPath(); ctx.moveTo(mid - pw / 2, poreY1); ctx.lineTo(mid + pw / 2, poreY1); ctx.stroke();
+      ctx.beginPath(); ctx.moveTo(mid - pw / 2, poreY2); ctx.lineTo(mid + pw / 2, poreY2); ctx.stroke();
+      ctx.setLineDash([]);
+
+      // Pore gap arrows (showing flow direction)
+      ctx.fillStyle = 'rgba(255,255,255,0.4)';
+      ctx.font = "bold 10px monospace"; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+      ctx.fillText('⇌', mid, H / 2);
+    }
+
+    if (!poreOn) {
+      // Door handle
+      const hx = mid - 10, hy = H / 2 - 14, hw = 20, hh = 28;
+      ctx.shadowBlur = 0;
+      ctx.fillStyle = 'rgba(255,255,255,0.12)';
+      ctx.strokeStyle = 'rgba(255,255,255,0.3)'; ctx.lineWidth = 1;
+      ctx.beginPath(); ctx.roundRect(hx, hy, hw, hh, 4); ctx.fill(); ctx.stroke();
+      ctx.fillStyle = 'rgba(255,255,255,0.6)';
+      ctx.font = "bold 10px monospace"; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+      ctx.fillText('||', mid, H / 2);
+    }
+
+    ctx.restore();
+  }
+
+  _drawConcBar(ctx, W, H) {
+    const barX = W - 20, barHalf = H / 2;
+    const { particles } = this;
+    const lA = particles.filter(p => p.x < W / 2 && p.type === 'A').length;
+    const lT = particles.filter(p => p.x < W / 2).length || 1;
+    const rA = particles.filter(p => p.x >= W / 2 && p.type === 'A').length;
+    const rT = particles.filter(p => p.x >= W / 2).length || 1;
+    const fAL = lA / lT, fAR = rA / rT;
+
+    ctx.fillStyle = '#06D6E0'; ctx.fillRect(barX, 0,           20, barHalf * fAL);
+    ctx.fillStyle = '#F15BB5'; ctx.fillRect(barX, barHalf * fAL, 20, barHalf * (1 - fAL));
+    ctx.fillStyle = '#06D6E0'; ctx.fillRect(barX, barHalf,         20, barHalf * fAR);
+    ctx.fillStyle = '#F15BB5'; ctx.fillRect(barX, barHalf + barHalf * fAR, 20, barHalf * (1 - fAR));
+
+    ctx.fillStyle = 'rgba(255,255,255,0.2)'; ctx.fillRect(barX, barHalf - 1, 20, 2);
+    ctx.strokeStyle = 'rgba(255,255,255,0.15)'; ctx.lineWidth = 1;
+    ctx.strokeRect(barX, 0, 20, H);
+
+    ctx.save();
+    ctx.fillStyle = 'rgba(255,255,255,0.35)'; ctx.font = "9px 'Manrope', sans-serif";
+    ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+    ctx.translate(barX + 10, H / 2); ctx.rotate(-Math.PI / 2);
+    ctx.fillText('Концентрация', 0, 0);
+    ctx.restore();
+  }
+
+  _drawHistoryChart(ctx, W, H) {
+    const graphH = 100, graphY = H - graphH, graphW = W - 24;
+
+    ctx.save();
+    ctx.fillStyle = 'rgba(0,0,10,0.76)';
+    ctx.beginPath(); ctx.roundRect(0, graphY, graphW, graphH, 8); ctx.fill();
+    ctx.strokeStyle = 'rgba(255,255,255,0.06)'; ctx.lineWidth = 1; ctx.stroke();
+
+    ctx.fillStyle = 'rgba(255,255,255,0.5)'; ctx.font = "10px 'Manrope', sans-serif";
+    ctx.textAlign = 'left'; ctx.textBaseline = 'top';
+    ctx.fillText('Доля A в левой половине', 10, graphY + 6);
+
+    // Y-axis labels
+    ctx.fillStyle = 'rgba(255,255,255,0.3)'; ctx.font = "9px 'Manrope', sans-serif";
+    ctx.fillText('1.0', 4, graphY + 18);
+    ctx.fillText('0.0', 4, graphY + graphH - 10);
+
+    const refY = graphY + graphH * 0.5 - 2;
+    ctx.setLineDash([4, 4]); ctx.strokeStyle = 'rgba(255,255,255,0.2)'; ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.moveTo(24, refY); ctx.lineTo(graphW - 10, refY); ctx.stroke();
+    ctx.setLineDash([]);
+    ctx.fillStyle = 'rgba(255,255,255,0.25)'; ctx.font = "9px 'Manrope', sans-serif";
+    ctx.textAlign = 'left'; ctx.fillText('равновесие', 28, refY - 10);
+
+    const hist = this._history;
+    if (hist.length > 1) {
+      const plotX0 = 28, plotW = graphW - 38;
+      const plotY0 = graphY + 18, plotH2 = graphH - 28;
+
+      // Concentration line (cyan)
+      ctx.strokeStyle = '#06D6E0'; ctx.lineWidth = 1.5;
+      ctx.beginPath();
+      for (let i = 0; i < hist.length; i++) {
+        const hx = plotX0 + (i / (hist.length - 1)) * plotW;
+        const hy = plotY0 + plotH2 * (1 - hist[i].fracA_left);
+        if (i === 0) ctx.moveTo(hx, hy); else ctx.lineTo(hx, hy);
+      }
+      ctx.stroke();
+
+      // Entropy line (orange, dashed, scaled to 0..ln(2) ≈ 0.693)
+      const maxEnt = Math.log(2);
+      ctx.strokeStyle = '#FFB347'; ctx.lineWidth = 1.2;
+      ctx.setLineDash([4, 3]);
+      ctx.beginPath();
+      for (let i = 0; i < hist.length; i++) {
+        const hx = plotX0 + (i / (hist.length - 1)) * plotW;
+        const hy = plotY0 + plotH2 * (1 - hist[i].entropy / maxEnt);
+        if (i === 0) ctx.moveTo(hx, hy); else ctx.lineTo(hx, hy);
+      }
+      ctx.stroke();
+      ctx.setLineDash([]);
+
+      // Legend
+      ctx.fillStyle = '#06D6E0'; ctx.beginPath(); ctx.arc(plotX0 + plotW - 50, graphY + 8, 3, 0, Math.PI * 2); ctx.fill();
+      ctx.fillStyle = 'rgba(255,255,255,0.5)'; ctx.font = "8px sans-serif"; ctx.textBaseline = 'middle';
+      ctx.textAlign = 'left'; ctx.fillText('X(A)', plotX0 + plotW - 44, graphY + 8);
+
+      ctx.fillStyle = '#FFB347'; ctx.beginPath(); ctx.arc(plotX0 + plotW - 22, graphY + 8, 3, 0, Math.PI * 2); ctx.fill();
+      ctx.fillText('S', plotX0 + plotW - 16, graphY + 8);
+
+      // Current value
+      const last = hist[hist.length - 1];
+      const endX = plotX0 + plotW;
+      const endY = plotY0 + plotH2 * (1 - last.fracA_left);
+      ctx.fillStyle = '#06D6E0'; ctx.font = "bold 10px 'Manrope', sans-serif";
+      ctx.textAlign = 'right'; ctx.textBaseline = 'middle';
+      ctx.fillText((last.fracA_left * 100).toFixed(0) + '%', endX - 2, endY);
+    }
+
+    ctx.restore();
+  }
+
+  _drawStats(ctx) {
+    const info = this.info();
+    const pad = 10, panelW = 180, panelH = 90, px = 14, py = 14;
+
+    ctx.save();
+    ctx.fillStyle = 'rgba(0,0,10,0.72)';
+    ctx.beginPath(); ctx.roundRect(px, py, panelW, panelH, 8); ctx.fill();
+    ctx.strokeStyle = 'rgba(255,255,255,0.07)'; ctx.lineWidth = 1; ctx.stroke();
+
+    const lineH = 18;
+    ctx.textAlign = 'left'; ctx.textBaseline = 'top'; ctx.font = "11px 'Manrope', sans-serif";
+
+    ctx.fillStyle = '#06D6E0';
+    ctx.fillText(`Лево:  A=${info.leftA}  B=${info.leftB}`, px + pad, py + pad);
+
+    ctx.fillStyle = '#F15BB5';
+    ctx.fillText(`Право: A=${info.rightA}  B=${info.rightB}`, px + pad, py + pad + lineH);
+
+    ctx.fillStyle = 'rgba(255,255,255,0.8)';
+    ctx.fillText(`Смешивание: ${info.mixed}%`, px + pad, py + pad + lineH * 2);
+
+    const stateLabel = !info.partitionOn ? 'Снята' : info.poreMode ? 'С порой' : 'Вкл';
+    const stateColor = !info.partitionOn ? '#F15BB5' : info.poreMode ? '#FFB347' : '#06D6E0';
+    ctx.fillStyle = stateColor;
+    ctx.fillText(`Раздел: ${stateLabel}`, px + pad, py + pad + lineH * 3);
+
+    ctx.restore();
+  }
+}
+
+if (typeof module !== 'undefined') module.exports = DiffusionSim;
diff --git a/frontend/js/labs/electrolysis.js b/frontend/js/labs/electrolysis.js
new file mode 100644
index 0000000..a06bc54
--- /dev/null
+++ b/frontend/js/labs/electrolysis.js
@@ -0,0 +1,540 @@
+'use strict';
+/**
+ * ElectrolysisSim v2 — Электролиз водных растворов
+ * Закон Фарадея: m = M·I·t / (n·F),  F = 96485 Кл/моль
+ * Чистый рерайт: стабильная физика, ионная анимация, пузырьки, осадок.
+ */
+class ElectrolysisSim {
+  static F    = 96485;
+  static BG   = '#0b0b1a';
+  static FONT = 'Manrope, system-ui, sans-serif';
+
+  static ELECTROLYTES = {
+    NaCl: {
+      name: 'NaCl', displayName: 'NaCl (водный р-р)',
+      cation: 'Na\u207A', anion: 'Cl\u207B',
+      M: 2, n: 2, R: 8,
+      solColor: [160, 200, 230],
+      cathodeProduct: 'H\u2082', anodeProduct: 'Cl\u2082',
+      depositColor: null,
+      cathodeBubColor: 'rgba(160,210,255,0.55)',
+      anodeBubColor:   'rgba(180,255,140,0.50)',
+      cathodeEq: '2H\u2082O + 2e\u207B \u2192 H\u2082 + 2OH\u207B',
+      anodeEq:   '2Cl\u207B \u2212 2e\u207B \u2192 Cl\u2082',
+    },
+    CuSO4: {
+      name: 'CuSO\u2084', displayName: 'CuSO\u2084 (водный р-р)',
+      cation: 'Cu\u00B2\u207A', anion: 'SO\u2084\u00B2\u207B',
+      M: 63.546, n: 2, R: 12,
+      solColor: [55, 120, 210],
+      cathodeProduct: 'Cu\u2193', anodeProduct: 'O\u2082',
+      depositColor: '#b87333',
+      cathodeBubColor: null,
+      anodeBubColor:   'rgba(200,210,255,0.50)',
+      cathodeEq: 'Cu\u00B2\u207A + 2e\u207B \u2192 Cu\u2193',
+      anodeEq:   '2H\u2082O \u2212 4e\u207B \u2192 O\u2082 + 4H\u207A',
+    },
+    H2SO4: {
+      name: 'H\u2082SO\u2084', displayName: 'H\u2082SO\u2084 (водный р-р)',
+      cation: 'H\u207A', anion: 'SO\u2084\u00B2\u207B',
+      M: 2, n: 2, R: 6,
+      solColor: [200, 200, 215],
+      cathodeProduct: 'H\u2082', anodeProduct: 'O\u2082',
+      depositColor: null,
+      cathodeBubColor: 'rgba(160,210,255,0.55)',
+      anodeBubColor:   'rgba(200,210,255,0.50)',
+      cathodeEq: '2H\u207A + 2e\u207B \u2192 H\u2082',
+      anodeEq:   '2H\u2082O \u2212 4e\u207B \u2192 O\u2082 + 4H\u207A',
+    },
+  };
+
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.ctx    = canvas.getContext('2d');
+    this.W = 0; this.H = 0;
+
+    this.voltage     = 6;
+    this.electrolyte = 'NaCl';
+    this.speed       = 1;
+
+    this._time         = 0;
+    this._massDeposit  = 0;
+    this._gasVolume    = 0;
+    this._depositH     = 0;
+    this._ions         = [];
+    this._bubbles      = [];
+    this._electronPhase = 0;
+
+    this.playing  = false;
+    this._raf     = null;
+    this._lastTs  = null;
+    this.onUpdate = null;
+
+    new ResizeObserver(() => { this.fit(); this.draw(); }).observe(canvas.parentElement);
+  }
+
+  // ── public API ────────────────────────────────────────────────
+
+  fit() {
+    const dpr = window.devicePixelRatio || 1;
+    const w = this.canvas.offsetWidth  || 640;
+    const h = this.canvas.offsetHeight || 420;
+    this.canvas.width  = w * dpr;
+    this.canvas.height = h * dpr;
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this.W = w; this.H = h;
+    this._initIons();
+  }
+
+  setParams({ voltage, electrolyte } = {}) {
+    if (voltage !== undefined) this.voltage = Math.max(1, Math.min(12, +voltage));
+    if (electrolyte !== undefined) {
+      // accept both 'nacl' (from lab.html) and 'NaCl' (canonical)
+      const keyMap = { nacl: 'NaCl', cuso4: 'CuSO4', h2so4: 'H2SO4' };
+      const key = keyMap[String(electrolyte).toLowerCase()] || electrolyte;
+      if (ElectrolysisSim.ELECTROLYTES[key] && this.electrolyte !== key) {
+        this.electrolyte = key;
+        this.reset(); return;
+      }
+    }
+    this.draw(); this._emit();
+  }
+
+  preset(name) {
+    const map = { nacl: ['NaCl', 6], cuso4: ['CuSO4', 4], h2so4: ['H2SO4', 3] };
+    const [el, v] = map[name] || map.nacl;
+    this.voltage = v; this.electrolyte = el;
+    this.reset();
+  }
+
+  reset() {
+    this.pause();
+    this._time = 0; this._massDeposit = 0;
+    this._gasVolume = 0; this._depositH = 0;
+    this._bubbles = []; this._electronPhase = 0;
+    this._initIons();
+    this.draw(); this._emit();
+  }
+
+  play()  { if (this.playing) return; this.playing = true; this._lastTs = null; this._tick(); }
+  pause() { this.playing = false; if (this._raf) { cancelAnimationFrame(this._raf); this._raf = null; } }
+  start() { this.play(); }
+  stop()  { this.pause(); }
+
+  info() {
+    return {
+      voltage:       this.voltage,
+      current:       +this._current().toFixed(3),
+      electrolyte:   this.electrolyte,
+      massDeposited: +this._massDeposit.toFixed(4),
+      gasVolume:     +this._gasVolume.toFixed(2),
+      time:          +this._time.toFixed(1),
+    };
+  }
+
+  // ── internals ─────────────────────────────────────────────────
+
+  _emit()    { if (this.onUpdate) this.onUpdate(this.info()); }
+  _el()      { return ElectrolysisSim.ELECTROLYTES[this.electrolyte]; }
+  _current() { return this.voltage / this._el().R; }
+
+  _cell() {
+    const { W, H } = this;
+    const cw = Math.min(W * 0.50, 300);
+    const ch = Math.min(H * 0.48, 210);
+    return { cx: (W - cw) / 2, cy: H * 0.28, cw, ch };
+  }
+
+  _electrodes() {
+    const { cx, cy, cw, ch } = this._cell();
+    const ew = 13, eh = ch * 0.70, gap = cw * 0.12;
+    const ey = cy + ch - eh - 8;
+    return {
+      cathode: { x: cx + gap,            y: ey, w: ew, h: eh },
+      anode:   { x: cx + cw - gap - ew,  y: ey, w: ew, h: eh },
+    };
+  }
+
+  _initIons() {
+    this._ions = [];
+    const { cx, cy, cw, ch } = this._cell();
+    if (!cw || !ch) return;
+    const el = this._el();
+    for (let i = 0; i < 30; i++) {
+      const isCat = i < 15;
+      this._ions.push({
+        x: cx + 18 + Math.random() * (cw - 36),
+        y: cy + 12 + Math.random() * (ch - 24),
+        vx: (Math.random() - 0.5) * 0.7,
+        vy: (Math.random() - 0.5) * 0.5,
+        charge: isCat ? 1 : -1,
+        label: isCat ? el.cation : el.anion,
+        color: isCat ? '#EF476F' : '#06D6E0',
+      });
+    }
+  }
+
+  _spawnIon(charge) {
+    const { cx, cy, cw, ch } = this._cell();
+    const el = this._el();
+    this._ions.push({
+      x:  charge > 0 ? cx + 8 : cx + cw - 8,
+      y:  cy + 12 + Math.random() * (ch - 24),
+      vx: charge > 0 ? 0.55 : -0.55,
+      vy: (Math.random() - 0.5) * 0.4,
+      charge,
+      label: charge > 0 ? el.cation : el.anion,
+      color: charge > 0 ? '#EF476F' : '#06D6E0',
+    });
+  }
+
+  _spawnBubble(x, y, color) {
+    this._bubbles.push({
+      x, y,
+      r:     1.5 + Math.random() * 2.5,
+      vx:    (Math.random() - 0.5) * 0.3,
+      vy:    -(0.5 + Math.random() * 0.9),
+      life:  1,
+      decay: 0.005 + Math.random() * 0.007,
+      color,
+    });
+  }
+
+  // ── simulation tick ────────────────────────────────────────────
+
+  _tick() {
+    if (!this.playing) return;
+    this._raf = requestAnimationFrame(ts => {
+      if (!this._lastTs) this._lastTs = ts;
+      const dt = Math.min((ts - this._lastTs) / 1000, 0.05) * this.speed;
+      this._lastTs = ts;
+      this._step(dt); this.draw(); this._emit(); this._tick();
+    });
+  }
+
+  _step(dt) {
+    const el = this._el(), I = this._current();
+    const { cx, cy, cw, ch } = this._cell();
+    const elec = this._electrodes();
+
+    this._time += dt;
+    this._electronPhase = (this._electronPhase + dt * I * 1.2) % 1;
+
+    // Faraday's law
+    const molesPS = I / (el.n * ElectrolysisSim.F);
+    if (el.depositColor) {
+      this._massDeposit += el.M * molesPS * dt;
+      this._depositH = Math.min(elec.cathode.h * 0.72, this._depositH + dt * 0.14 * I);
+    }
+    this._gasVolume += molesPS * 22400 * dt;
+
+    // Ion drift + thermal jitter
+    const drift = I * 0.45;
+    for (const ion of this._ions) {
+      ion.vx += (ion.charge > 0 ? -drift : drift) * dt + (Math.random() - 0.5) * 0.18;
+      ion.vy += (Math.random() - 0.5) * 0.14;
+      ion.vx  = Math.max(-3.5, Math.min(3.5, ion.vx * 0.96));
+      ion.vy  = Math.max(-3.5, Math.min(3.5, ion.vy * 0.96));
+      ion.x  += ion.vx; ion.y += ion.vy;
+      ion.x   = Math.max(cx + 4, Math.min(cx + cw - 4, ion.x));
+      ion.y   = Math.max(cy + 4, Math.min(cy + ch - 4, ion.y));
+    }
+
+    // Ions reaching electrodes → discharge + bubbles
+    const rm = new Set();
+    for (let i = 0; i < this._ions.length; i++) {
+      const ion = this._ions[i];
+      if (ion.charge > 0 && ion.x <= elec.cathode.x + elec.cathode.w + 5) {
+        rm.add(i);
+        if (el.cathodeBubColor) {
+          for (let b = 0; b < 2; b++)
+            this._spawnBubble(
+              elec.cathode.x + elec.cathode.w + 2 + Math.random() * 4,
+              elec.cathode.y + Math.random() * elec.cathode.h,
+              el.cathodeBubColor);
+        }
+      }
+      if (ion.charge < 0 && ion.x >= elec.anode.x - 5) {
+        rm.add(i);
+        if (el.anodeBubColor) {
+          for (let b = 0; b < 2; b++)
+            this._spawnBubble(
+              elec.anode.x - 2 - Math.random() * 4,
+              elec.anode.y + Math.random() * elec.anode.h,
+              el.anodeBubColor);
+        }
+      }
+    }
+    this._ions = this._ions.filter((_, i) => !rm.has(i));
+
+    // Replenish ions to keep count ~15 each
+    let cat = 0, an = 0;
+    for (const ion of this._ions) ion.charge > 0 ? cat++ : an++;
+    while (cat < 15) { this._spawnIon(1);  cat++; }
+    while (an  < 15) { this._spawnIon(-1); an++;  }
+
+    // Bubble physics
+    this._bubbles = this._bubbles.filter(b => {
+      b.x += b.vx + Math.sin(b.life * 22) * 0.12;
+      b.y += b.vy;
+      b.life -= b.decay;
+      return b.life > 0 && b.y > cy + 2;
+    });
+  }
+
+  // ── draw ──────────────────────────────────────────────────────
+
+  draw() {
+    const { ctx, W, H } = this;
+    if (!W || !H) return;
+
+    // Background
+    ctx.fillStyle = ElectrolysisSim.BG; ctx.fillRect(0, 0, W, H);
+
+    // Dot grid
+    ctx.fillStyle = 'rgba(255,255,255,0.018)';
+    for (let x = 22; x < W; x += 22)
+      for (let y = 22; y < H; y += 22) {
+        ctx.beginPath(); ctx.arc(x, y, 0.7, 0, Math.PI * 2); ctx.fill();
+      }
+
+    this._drawWiresAndBattery();
+    this._drawCellBody();
+    this._drawSolution();
+    this._drawDeposit();
+    this._drawElectrodes();
+    this._drawBubbles();
+    this._drawIons();
+    this._drawLabels();
+    this._drawInfoPanel();
+  }
+
+  _drawCellBody() {
+    const { ctx } = this;
+    const { cx, cy, cw, ch } = this._cell();
+    ctx.save();
+    ctx.strokeStyle = 'rgba(255,255,255,0.15)'; ctx.lineWidth = 2;
+    ctx.beginPath(); ctx.roundRect(cx, cy, cw, ch, 6); ctx.stroke();
+    // glass shimmer
+    const gg = ctx.createLinearGradient(cx, cy, cx + 14, cy);
+    gg.addColorStop(0, 'rgba(255,255,255,0.05)');
+    gg.addColorStop(1, 'rgba(255,255,255,0)');
+    ctx.fillStyle = gg; ctx.fillRect(cx + 1, cy + 1, 14, ch - 2);
+    ctx.restore();
+  }
+
+  _drawSolution() {
+    const { ctx } = this;
+    const { cx, cy, cw, ch } = this._cell();
+    const [r, g, b] = this._el().solColor;
+    ctx.save();
+    ctx.beginPath(); ctx.roundRect(cx + 2, cy + 2, cw - 4, ch - 4, 4); ctx.clip();
+    const sg = ctx.createLinearGradient(cx, cy, cx, cy + ch);
+    sg.addColorStop(0, `rgba(${r},${g},${b},0.06)`);
+    sg.addColorStop(1, `rgba(${r},${g},${b},0.22)`);
+    ctx.fillStyle = sg; ctx.fillRect(cx + 2, cy + 2, cw - 4, ch - 4);
+    ctx.restore();
+  }
+
+  _drawElectrodes() {
+    const { ctx } = this;
+    const e = this._electrodes();
+    const FN = ElectrolysisSim.FONT;
+
+    ctx.fillStyle = '#42425a';
+    ctx.beginPath(); ctx.roundRect(e.cathode.x, e.cathode.y, e.cathode.w, e.cathode.h, 3); ctx.fill();
+    ctx.strokeStyle = 'rgba(6,214,224,0.3)'; ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.roundRect(e.cathode.x, e.cathode.y, e.cathode.w, e.cathode.h, 3); ctx.stroke();
+
+    ctx.fillStyle = '#525268';
+    ctx.beginPath(); ctx.roundRect(e.anode.x, e.anode.y, e.anode.w, e.anode.h, 3); ctx.fill();
+    ctx.strokeStyle = 'rgba(239,71,111,0.3)'; ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.roundRect(e.anode.x, e.anode.y, e.anode.w, e.anode.h, 3); ctx.stroke();
+
+    ctx.font = `bold 16px ${FN}`; ctx.textAlign = 'center'; ctx.textBaseline = 'bottom';
+    ctx.fillStyle = '#06D6E0';
+    ctx.fillText('\u2212', e.cathode.x + e.cathode.w / 2, e.cathode.y - 3);
+    ctx.fillStyle = '#EF476F';
+    ctx.fillText('+', e.anode.x + e.anode.w / 2, e.anode.y - 3);
+  }
+
+  _drawDeposit() {
+    const el = this._el();
+    if (!el.depositColor || this._depositH < 1) return;
+    const { ctx } = this;
+    const c = this._electrodes().cathode;
+    const dh = Math.min(this._depositH, c.h * 0.72);
+    ctx.save();
+    const dg = ctx.createLinearGradient(c.x + c.w, c.y + c.h - dh, c.x + c.w + 10, c.y + c.h);
+    dg.addColorStop(0, 'rgba(184,115,51,0.35)');
+    dg.addColorStop(1, 'rgba(184,115,51,0.85)');
+    ctx.fillStyle = dg;
+    ctx.beginPath(); ctx.roundRect(c.x + c.w, c.y + c.h - dh, 10, dh, [2, 2, 0, 0]); ctx.fill();
+    ctx.shadowColor = '#b87333'; ctx.shadowBlur = 6;
+    ctx.fillStyle = 'rgba(210,150,80,0.5)';
+    ctx.beginPath(); ctx.roundRect(c.x + c.w, c.y + c.h - dh, 10, 3, [2, 2, 0, 0]); ctx.fill();
+    ctx.restore();
+  }
+
+  _drawIons() {
+    const { ctx } = this;
+    const FN = ElectrolysisSim.FONT;
+    ctx.save();
+    for (const ion of this._ions) {
+      const g = ctx.createRadialGradient(ion.x, ion.y, 0, ion.x, ion.y, 11);
+      g.addColorStop(0, ion.color + '2a'); g.addColorStop(1, ion.color + '00');
+      ctx.fillStyle = g;
+      ctx.beginPath(); ctx.arc(ion.x, ion.y, 11, 0, Math.PI * 2); ctx.fill();
+      ctx.fillStyle = ion.color;
+      ctx.beginPath(); ctx.arc(ion.x, ion.y, 4, 0, Math.PI * 2); ctx.fill();
+      ctx.fillStyle = 'rgba(255,255,255,0.68)';
+      ctx.font = `8px ${FN}`; ctx.textAlign = 'center'; ctx.textBaseline = 'bottom';
+      ctx.fillText(ion.label, ion.x, ion.y - 5);
+    }
+    ctx.restore();
+  }
+
+  _drawBubbles() {
+    const { ctx } = this;
+    ctx.save();
+    for (const b of this._bubbles) {
+      ctx.globalAlpha = b.life * 0.65;
+      ctx.strokeStyle = b.color; ctx.lineWidth = 0.8;
+      ctx.beginPath(); ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2); ctx.stroke();
+      ctx.fillStyle = `rgba(255,255,255,${b.life * 0.18})`;
+      ctx.beginPath(); ctx.arc(b.x - b.r * 0.3, b.y - b.r * 0.3, b.r * 0.3, 0, Math.PI * 2); ctx.fill();
+    }
+    ctx.restore();
+  }
+
+  _drawWiresAndBattery() {
+    const { ctx } = this;
+    const { cx, cy, cw } = this._cell();
+    const e = this._electrodes();
+    const FN = ElectrolysisSim.FONT;
+
+    const cXt = e.cathode.x + e.cathode.w / 2;  // cathode top center
+    const aXt = e.anode.x   + e.anode.w   / 2;  // anode top center
+    const bx  = cx + cw / 2;                     // battery center x
+    const by  = cy - Math.max(42, this.H * 0.09); // battery y
+
+    ctx.save();
+    ctx.strokeStyle = 'rgba(255,255,255,0.2)'; ctx.lineWidth = 1.5;
+
+    // Cathode wire: up then right to battery −
+    ctx.beginPath();
+    ctx.moveTo(cXt, e.cathode.y); ctx.lineTo(cXt, by); ctx.lineTo(bx - 22, by);
+    ctx.stroke();
+
+    // Anode wire: up then left to battery +
+    ctx.beginPath();
+    ctx.moveTo(aXt, e.anode.y); ctx.lineTo(aXt, by); ctx.lineTo(bx + 22, by);
+    ctx.stroke();
+
+    // Electron flow dots (cathode side: from battery − toward cathode)
+    const dist = (bx - 22) - cXt;
+    for (let i = 0; i < 4; i++) {
+      const t = ((this._electronPhase + i / 4) % 1);
+      const ex = (bx - 22) - t * dist;
+      const ey = by;
+      if (ex >= cXt - 1 && ex <= bx - 22 + 1) {
+        ctx.fillStyle = '#4CC9F0'; ctx.shadowColor = '#4CC9F0'; ctx.shadowBlur = 5;
+        ctx.beginPath(); ctx.arc(ex, ey, 2.5, 0, Math.PI * 2); ctx.fill();
+        ctx.shadowBlur = 0;
+      }
+    }
+
+    // Battery symbol — two plates
+    ctx.strokeStyle = '#EF476F'; ctx.lineWidth = 3;
+    ctx.beginPath(); ctx.moveTo(bx + 22, by - 14); ctx.lineTo(bx + 22, by + 14); ctx.stroke();
+    ctx.strokeStyle = '#06D6E0'; ctx.lineWidth = 1.8;
+    ctx.beginPath(); ctx.moveTo(bx - 22, by - 8);  ctx.lineTo(bx - 22, by + 8);  ctx.stroke();
+    // Connecting wire between battery plates
+    ctx.strokeStyle = 'rgba(255,255,255,0.12)'; ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.moveTo(bx - 22, by); ctx.lineTo(bx + 22, by); ctx.stroke();
+
+    // Voltage label
+    ctx.fillStyle = '#FFD166';
+    ctx.font = `bold 12px ${FN}`; ctx.textAlign = 'center'; ctx.textBaseline = 'bottom';
+    ctx.fillText(this.voltage.toFixed(1) + ' V', bx, by - 18);
+
+    // +/− labels on battery
+    ctx.fillStyle = '#EF476F'; ctx.font = `bold 10px ${FN}`; ctx.textAlign = 'left';  ctx.textBaseline = 'middle';
+    ctx.fillText('+', bx + 26, by);
+    ctx.fillStyle = '#06D6E0'; ctx.textAlign = 'right';
+    ctx.fillText('\u2212', bx - 26, by);
+
+    ctx.restore();
+  }
+
+  _drawLabels() {
+    const { ctx } = this;
+    const el = this._el(), e = this._electrodes();
+    const { cx, cy, cw, ch } = this._cell();
+    const FN = ElectrolysisSim.FONT;
+
+    ctx.save();
+    ctx.font = `10px ${FN}`; ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+
+    ctx.fillStyle = '#06D6E0';
+    ctx.fillText('\u041A\u0430\u0442\u043E\u0434 (\u2212)', e.cathode.x + e.cathode.w / 2, cy + ch + 6);
+    ctx.fillStyle = '#EF476F';
+    ctx.fillText('\u0410\u043D\u043E\u0434 (+)', e.anode.x + e.anode.w / 2, cy + ch + 6);
+
+    ctx.fillStyle = 'rgba(255,255,255,0.42)';
+    ctx.fillText(el.cathodeProduct, e.cathode.x + e.cathode.w / 2, cy + ch + 20);
+    ctx.fillText(el.anodeProduct,   e.anode.x   + e.anode.w   / 2, cy + ch + 20);
+
+    ctx.fillStyle = '#9B5DE5'; ctx.font = `bold 11px ${FN}`;
+    ctx.fillText(el.displayName, cx + cw / 2, cy + ch + 36);
+
+    ctx.font = `8px ${FN}`;
+    ctx.fillStyle = 'rgba(6,214,224,0.48)';
+    ctx.fillText(el.cathodeEq, e.cathode.x + e.cathode.w / 2, cy + ch + 52);
+    ctx.fillStyle = 'rgba(239,71,111,0.48)';
+    ctx.fillText(el.anodeEq,   e.anode.x   + e.anode.w   / 2, cy + ch + 52);
+
+    ctx.restore();
+  }
+
+  _drawInfoPanel() {
+    const { ctx } = this;
+    const inf = this.info(), el = this._el();
+    const FN = ElectrolysisSim.FONT;
+    const px = 12, py = 10, pw = 170, lh = 17;
+
+    const rows = [
+      ['U', inf.voltage.toFixed(1) + ' \u0412'],
+      ['I', this._current().toFixed(3) + ' \u0410'],
+      ['\u0422\u0432\u0440\u0435\u043C\u044F', this._fmtTime(inf.time)],
+    ];
+    if (el.depositColor) rows.push(['m(Cu)', inf.massDeposited.toFixed(4) + ' \u0433']);
+    rows.push(['V(\u0433\u0430\u0437)', inf.gasVolume.toFixed(2) + ' \u043C\u043B']);
+
+    const ph = 12 + rows.length * lh + 8;
+    ctx.save();
+    ctx.fillStyle = 'rgba(5,5,20,0.86)';
+    ctx.beginPath(); ctx.roundRect(px, py, pw, ph, 7); ctx.fill();
+    ctx.strokeStyle = 'rgba(255,255,255,0.07)'; ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.roundRect(px, py, pw, ph, 7); ctx.stroke();
+
+    ctx.font = `10px ${FN}`; ctx.textBaseline = 'middle';
+    rows.forEach(([k, v], i) => {
+      const ry = py + 10 + i * lh + lh / 2;
+      ctx.fillStyle = 'rgba(255,255,255,0.38)'; ctx.textAlign = 'left';  ctx.fillText(k, px + 10, ry);
+      ctx.fillStyle = 'rgba(255,255,255,0.88)'; ctx.textAlign = 'right'; ctx.fillText(v, px + pw - 10, ry);
+    });
+
+    ctx.fillStyle = 'rgba(255,255,255,0.16)';
+    ctx.font = `italic 8px ${FN}`; ctx.textAlign = 'left';
+    ctx.fillText('m = M\u00B7I\u00B7t / (n\u00B7F)', px + 10, py + ph + 10);
+    ctx.restore();
+  }
+
+  _fmtTime(s) {
+    if (s < 60) return s.toFixed(1) + ' \u0441';
+    return Math.floor(s / 60) + ' \u043C\u0438\u043D ' + (s % 60).toFixed(0) + ' \u0441';
+  }
+}
+
+if (typeof module !== 'undefined') module.exports = ElectrolysisSim;
diff --git a/frontend/js/labs/equilibrium.js b/frontend/js/labs/equilibrium.js
new file mode 100644
index 0000000..3237a4e
--- /dev/null
+++ b/frontend/js/labs/equilibrium.js
@@ -0,0 +1,475 @@
+'use strict';
+
+/**
+ * EquilibriumSim — Chemical equilibrium simulation.
+ * A + B ⇌ C + D with Arrhenius kinetics, Le Chatelier principle.
+ * Left: particle animation with collisions & reactions.
+ * Right (30%): live concentration graph over time.
+ */
+class EquilibriumSim {
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.ctx    = canvas.getContext('2d');
+    this.W = 0; this.H = 0;
+
+    this.particles = [];
+    this.flashes   = [];       // [{x, y, t, maxT, color}]
+    this._history  = [];       // [{step, nA, nB, nC, nD}]
+    this._nextId   = 0;
+
+    /* parameters */
+    this.T    = 300;           // temperature K
+    this.nA   = 20;            // initial A count
+    this.nB   = 20;            // initial B count
+    this.Ea_f = 50;            // forward activation energy
+    this.Ea_r = 55;            // reverse activation energy
+
+    /* runtime */
+    this._steps  = 0;
+    this._raf    = null;
+    this._dpr    = 1;
+    this.playing = false;
+    this.onUpdate = null;
+
+    new ResizeObserver(() => { this.fit(); this.draw(); }).observe(canvas.parentElement);
+  }
+
+  /* ═══════════════════════ public API ═══════════════════════ */
+
+  fit() {
+    const dpr = window.devicePixelRatio || 1;
+    this._dpr = dpr;
+    const w = this.canvas.offsetWidth || 600;
+    const h = this.canvas.offsetHeight || 400;
+    this.canvas.width  = w * dpr;
+    this.canvas.height = h * dpr;
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this.W = w; this.H = h;
+    this.reset();
+  }
+
+  setParams({ T, nA, nB, Ea_f, Ea_r } = {}) {
+    let needReset = false;
+    if (T    !== undefined) this.T    = Math.max(200, Math.min(500, +T));
+    if (Ea_f !== undefined) this.Ea_f = +Ea_f;
+    if (Ea_r !== undefined) this.Ea_r = +Ea_r;
+    if (nA   !== undefined) { this.nA = Math.max(10, Math.min(40, +nA)); needReset = true; }
+    if (nB   !== undefined) { this.nB = Math.max(10, Math.min(40, +nB)); needReset = true; }
+    if (needReset) this.reset();
+    this.draw();
+    this._emit();
+  }
+
+  preset(name) {
+    const presets = {
+      default:      { T: 300, nA: 20, nB: 20, Ea_f: 50, Ea_r: 55 },
+      exothermic:   { T: 280, nA: 20, nB: 20, Ea_f: 35, Ea_r: 65 },
+      endothermic:  { T: 350, nA: 20, nB: 20, Ea_f: 65, Ea_r: 35 },
+      excess_A:     { T: 300, nA: 35, nB: 15, Ea_f: 50, Ea_r: 55 },
+    };
+    const p = presets[name] || presets.default;
+    Object.assign(this, p);
+    this.reset();
+  }
+
+  reset() {
+    this.pause();
+    const { W, H } = this;
+    if (!W || !H) return;
+    this.particles  = [];
+    this.flashes    = [];
+    this._history   = [];
+    this._steps     = 0;
+    this._nextId    = 0;
+
+    const simW = W * 0.7;
+    this._spawnType('A', this.nA, simW);
+    this._spawnType('B', this.nB, simW);
+    this._recordHistory();
+    this.draw();
+    this._emit();
+  }
+
+  play() {
+    if (this.playing) return;
+    this.playing = true;
+    this._tick();
+  }
+
+  pause() {
+    this.playing = false;
+    if (this._raf) { cancelAnimationFrame(this._raf); this._raf = null; }
+  }
+
+  start() { this.play(); }
+  stop()  { this.pause(); }
+
+  info() {
+    let nA = 0, nB = 0, nC = 0, nD = 0;
+    for (const p of this.particles) {
+      if (p.type === 'A') nA++;
+      else if (p.type === 'B') nB++;
+      else if (p.type === 'C') nC++;
+      else nD++;
+    }
+    const cA = nA || 0.001, cB = nB || 0.001;
+    const cC = nC || 0.001, cD = nD || 0.001;
+    const Q   = (cC * cD) / (cA * cB);
+    const keq = Math.exp((this.Ea_f - this.Ea_r) / (this.T * 0.05));
+    const direction = Q < keq * 0.95 ? '\u2192' : Q > keq * 1.05 ? '\u2190' : '\u21CC';
+    return { keq: +keq.toFixed(3), Q: +Q.toFixed(3), direction, nA, nB, nC, nD };
+  }
+
+  /* ═══════════════════════ internals ═══════════════════════ */
+
+  _emit() { if (this.onUpdate) this.onUpdate(this.info()); }
+
+  _tick() {
+    if (!this.playing) return;
+    this._raf = requestAnimationFrame(() => {
+      for (let i = 0; i < 3; i++) this._step();
+      this.draw();
+      this._tick();
+    });
+  }
+
+  _color(type) {
+    return { A: '#EF476F', B: '#9B5DE5', C: '#7BF5A4', D: '#FFD166' }[type] || '#aaa';
+  }
+
+  _radius() { return 5; }
+
+  _spawnType(type, count, maxX) {
+    const { H } = this;
+    const r = this._radius();
+    const margin = 10;
+    let placed = 0, att = 0;
+    while (placed < count && att < count * 60) {
+      att++;
+      const x = margin + r + Math.random() * (maxX - 2 * r - margin * 2);
+      const y = margin + r + Math.random() * (H - 2 * r - margin * 2);
+      let overlap = false;
+      for (const p of this.particles) {
+        if ((p.x - x) ** 2 + (p.y - y) ** 2 < (p.r + r + 1) ** 2) { overlap = true; break; }
+      }
+      if (overlap) continue;
+      const a = Math.random() * Math.PI * 2;
+      const spd = 1.5 + Math.random() * 1.5;
+      this.particles.push({ x, y, vx: Math.cos(a) * spd, vy: Math.sin(a) * spd, r, type, id: this._nextId++ });
+      placed++;
+    }
+  }
+
+  _step() {
+    const { W, H } = this;
+    const simW = W * 0.7;
+    const dt = 0.6;
+
+    /* move + walls */
+    for (const p of this.particles) {
+      p.x += p.vx * dt;
+      p.y += p.vy * dt;
+      if (p.x < p.r)        { p.x = p.r;        p.vx = Math.abs(p.vx); }
+      if (p.x > simW - p.r) { p.x = simW - p.r; p.vx = -Math.abs(p.vx); }
+      if (p.y < p.r)        { p.y = p.r;        p.vy = Math.abs(p.vy); }
+      if (p.y > H - p.r)    { p.y = H - p.r;    p.vy = -Math.abs(p.vy); }
+    }
+
+    /* spatial grid */
+    const cs = 18;
+    const cols = Math.ceil(simW / cs) + 1;
+    const grid = new Map();
+    for (let i = 0; i < this.particles.length; i++) {
+      const p = this.particles[i];
+      const k = Math.floor(p.x / cs) + Math.floor(p.y / cs) * cols;
+      if (!grid.has(k)) grid.set(k, []);
+      grid.get(k).push(i);
+    }
+
+    const toRemove = new Set();
+    const toAdd    = [];
+
+    /* collisions + reactions */
+    for (let i = 0; i < this.particles.length; i++) {
+      const p1 = this.particles[i];
+      if (toRemove.has(p1.id)) continue;
+      const cx = Math.floor(p1.x / cs), cy = Math.floor(p1.y / cs);
+      for (let dcx = -1; dcx <= 1; dcx++) for (let dcy = -1; dcy <= 1; dcy++) {
+        const cell = grid.get((cx + dcx) + (cy + dcy) * cols);
+        if (!cell) continue;
+        for (const j of cell) {
+          if (j <= i) continue;
+          const p2 = this.particles[j];
+          if (toRemove.has(p2.id)) continue;
+          const dx = p2.x - p1.x, dy = p2.y - p1.y;
+          const dist2 = dx * dx + dy * dy;
+          const minD  = p1.r + p2.r;
+          if (dist2 >= minD * minD) continue;
+          const dist = Math.sqrt(dist2);
+
+          /* forward: A + B <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> C + D */
+          const isAB = (p1.type === 'A' && p2.type === 'B') || (p1.type === 'B' && p2.type === 'A');
+          if (isAB) {
+            const kf = Math.exp(-this.Ea_f / (this.T * 0.08)) * 0.35;
+            if (Math.random() < kf) {
+              toRemove.add(p1.id); toRemove.add(p2.id);
+              const mx = (p1.x + p2.x) / 2, my = (p1.y + p2.y) / 2;
+              const a1 = Math.random() * Math.PI * 2;
+              const spd = 1.2 + Math.random();
+              toAdd.push({ x: mx + Math.cos(a1) * 4, y: my + Math.sin(a1) * 4, vx: Math.cos(a1) * spd, vy: Math.sin(a1) * spd, r: 5, type: 'C', id: this._nextId++ });
+              toAdd.push({ x: mx - Math.cos(a1) * 4, y: my - Math.sin(a1) * 4, vx: -Math.cos(a1) * spd, vy: -Math.sin(a1) * spd, r: 5, type: 'D', id: this._nextId++ });
+              this.flashes.push({ x: mx, y: my, t: 0, maxT: 18, color: '123,245,164' });
+              continue;
+            }
+          }
+
+          /* reverse: C + D <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> A + B */
+          const isCD = (p1.type === 'C' && p2.type === 'D') || (p1.type === 'D' && p2.type === 'C');
+          if (isCD) {
+            const kr = Math.exp(-this.Ea_r / (this.T * 0.08)) * 0.35;
+            if (Math.random() < kr) {
+              toRemove.add(p1.id); toRemove.add(p2.id);
+              const mx = (p1.x + p2.x) / 2, my = (p1.y + p2.y) / 2;
+              const a1 = Math.random() * Math.PI * 2;
+              const spd = 1.2 + Math.random();
+              toAdd.push({ x: mx + Math.cos(a1) * 4, y: my + Math.sin(a1) * 4, vx: Math.cos(a1) * spd, vy: Math.sin(a1) * spd, r: 5, type: 'A', id: this._nextId++ });
+              toAdd.push({ x: mx - Math.cos(a1) * 4, y: my - Math.sin(a1) * 4, vx: -Math.cos(a1) * spd, vy: -Math.sin(a1) * spd, r: 5, type: 'B', id: this._nextId++ });
+              this.flashes.push({ x: mx, y: my, t: 0, maxT: 18, color: '239,71,111' });
+              continue;
+            }
+          }
+
+          /* elastic bounce */
+          if (dist > 0.001) {
+            const nx = dx / dist, ny = dy / dist;
+            const dvn = (p1.vx - p2.vx) * nx + (p1.vy - p2.vy) * ny;
+            if (dvn > 0) {
+              p1.vx -= dvn * nx; p1.vy -= dvn * ny;
+              p2.vx += dvn * nx; p2.vy += dvn * ny;
+            }
+            const ov = (minD - dist) * 0.5;
+            p1.x -= nx * ov; p1.y -= ny * ov;
+            p2.x += nx * ov; p2.y += ny * ov;
+          }
+        }
+      }
+    }
+
+    if (toRemove.size) this.particles = this.particles.filter(p => !toRemove.has(p.id));
+    for (const p of toAdd) this.particles.push(p);
+    this.flashes = this.flashes.filter(f => ++f.t < f.maxT);
+
+    this._steps++;
+    if (this._steps % 20 === 0) {
+      this._recordHistory();
+      this._emit();
+    }
+  }
+
+  _recordHistory() {
+    let nA = 0, nB = 0, nC = 0, nD = 0;
+    for (const p of this.particles) {
+      if (p.type === 'A') nA++;
+      else if (p.type === 'B') nB++;
+      else if (p.type === 'C') nC++;
+      else nD++;
+    }
+    this._history.push({ step: this._steps, nA, nB, nC, nD });
+    if (this._history.length > 300) this._history.shift();
+  }
+
+  /* ═══════════════════════ rendering ═══════════════════════ */
+
+  draw() {
+    const { ctx, W, H } = this;
+    if (!W || !H) return;
+    const simW = W * 0.7;
+
+    /* background */
+    ctx.fillStyle = '#0D0D1A';
+    ctx.fillRect(0, 0, W, H);
+
+    /* dot grid */
+    ctx.fillStyle = 'rgba(255,255,255,0.025)';
+    for (let x = 30; x < simW; x += 30)
+      for (let y = 30; y < H; y += 30) {
+        ctx.beginPath(); ctx.arc(x, y, 0.8, 0, Math.PI * 2); ctx.fill();
+      }
+
+    /* divider */
+    ctx.fillStyle = 'rgba(255,255,255,0.06)';
+    ctx.fillRect(simW - 1, 0, 2, H);
+
+    /* flashes */
+    for (const f of this.flashes) {
+      const prog   = f.t / f.maxT;
+      const radius = prog * 38 + 4;
+      const alpha  = (1 - prog) * 0.55;
+      const g = ctx.createRadialGradient(f.x, f.y, 0, f.x, f.y, radius);
+      g.addColorStop(0,   `rgba(${f.color},${alpha * 1.5})`);
+      g.addColorStop(0.4, `rgba(${f.color},${alpha * 0.4})`);
+      g.addColorStop(1,   `rgba(${f.color},0)`);
+      ctx.fillStyle = g;
+      ctx.beginPath(); ctx.arc(f.x, f.y, radius, 0, Math.PI * 2); ctx.fill();
+    }
+
+    /* particles */
+    for (const p of this.particles) this._drawParticle(ctx, p);
+
+    /* right panel: concentration graph */
+    this._drawGraph(ctx, simW, W, H);
+
+    /* stats overlay */
+    this._drawStats(ctx);
+
+    /* equation label */
+    ctx.fillStyle = 'rgba(255,255,255,0.28)';
+    ctx.font = "bold 11px 'Manrope', system-ui, sans-serif";
+    ctx.textAlign = 'center';
+    ctx.fillText('A + B  \u21CC  C + D', simW / 2, H - 12);
+  }
+
+  _drawParticle(ctx, p) {
+    const col = this._color(p.type);
+    const { x, y, r } = p;
+
+    /* outer glow */
+    const glow = ctx.createRadialGradient(x, y, 0, x, y, r * 3.2);
+    glow.addColorStop(0, col + '44');
+    glow.addColorStop(1, col + '00');
+    ctx.fillStyle = glow;
+    ctx.beginPath(); ctx.arc(x, y, r * 3.2, 0, Math.PI * 2); ctx.fill();
+
+    /* body gradient */
+    const body = ctx.createRadialGradient(x - r * 0.25, y - r * 0.25, r * 0.05, x, y, r);
+    body.addColorStop(0,    col + 'ff');
+    body.addColorStop(0.6,  col + 'cc');
+    body.addColorStop(1,    col + '88');
+    ctx.fillStyle = body;
+    ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fill();
+
+    /* specular */
+    ctx.fillStyle = 'rgba(255,255,255,0.38)';
+    ctx.beginPath(); ctx.arc(x - r * 0.28, y - r * 0.28, r * 0.28, 0, Math.PI * 2); ctx.fill();
+
+    /* label */
+    ctx.fillStyle = 'rgba(0,0,0,0.65)';
+    ctx.font = `bold ${Math.round(r * 1.1)}px sans-serif`;
+    ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+    ctx.fillText(p.type, x, y + 0.5);
+    ctx.textBaseline = 'alphabetic';
+  }
+
+  _drawGraph(ctx, x0, W, H) {
+    const gW = W - x0, pad = { l: 36, r: 10, t: 32, b: 28 };
+    const px = x0 + pad.l, py = pad.t;
+    const pw = gW - pad.l - pad.r;
+    const ph = H - pad.t - pad.b;
+
+    /* panel bg */
+    ctx.fillStyle = 'rgba(5,5,20,0.85)';
+    ctx.fillRect(x0, 0, gW, H);
+
+    /* title */
+    ctx.fillStyle = 'rgba(255,255,255,0.5)';
+    ctx.font = "10px 'Manrope', system-ui, sans-serif";
+    ctx.textAlign = 'left';
+    ctx.fillText('\u041A\u043E\u043D\u0446\u0435\u043D\u0442\u0440\u0430\u0446\u0438\u044F', x0 + 10, 16);
+
+    /* grid */
+    ctx.strokeStyle = 'rgba(255,255,255,0.05)'; ctx.lineWidth = 0.5;
+    for (let i = 0; i <= 4; i++) {
+      const yl = py + ph * (i / 4);
+      ctx.beginPath(); ctx.moveTo(px, yl); ctx.lineTo(px + pw, yl); ctx.stroke();
+    }
+
+    /* y-axis labels */
+    ctx.fillStyle = 'rgba(255,255,255,0.25)';
+    ctx.font = "8px 'Manrope', system-ui, sans-serif";
+    ctx.textAlign = 'right';
+    const maxN = Math.max(this.nA, this.nB) * 1.2 + 2;
+    for (let i = 0; i <= 4; i++) {
+      const v = Math.round(maxN * (4 - i) / 4);
+      ctx.fillText(v, px - 4, py + ph * (i / 4) + 3);
+    }
+
+    if (this._history.length < 2) return;
+    const n = this._history.length;
+
+    const lines = [
+      { key: 'nA', color: '#EF476F', label: 'A' },
+      { key: 'nB', color: '#9B5DE5', label: 'B' },
+      { key: 'nC', color: '#7BF5A4', label: 'C' },
+      { key: 'nD', color: '#FFD166', label: 'D' },
+    ];
+
+    for (const { key, color } of lines) {
+      ctx.beginPath();
+      ctx.strokeStyle = color; ctx.lineWidth = 1.6;
+      for (let i = 0; i < n; i++) {
+        const lx = px + (i / Math.max(n - 1, 1)) * pw;
+        const ly = py + ph - Math.min(this._history[i][key] / maxN, 1) * ph;
+        i === 0 ? ctx.moveTo(lx, ly) : ctx.lineTo(lx, ly);
+      }
+      ctx.stroke();
+    }
+
+    /* legend */
+    lines.forEach(({ color, label }, i) => {
+      const lx = x0 + 10 + i * 38;
+      const ly = H - 14;
+      ctx.fillStyle = color;
+      ctx.fillRect(lx, ly, 10, 2.5);
+      ctx.fillStyle = 'rgba(255,255,255,0.5)';
+      ctx.font = "9px 'Manrope', system-ui, sans-serif";
+      ctx.textAlign = 'left';
+      ctx.fillText(label, lx + 13, ly + 3);
+    });
+
+    /* current values */
+    const last = this._history[n - 1];
+    ctx.fillStyle = 'rgba(255,255,255,0.3)';
+    ctx.font = "8px monospace";
+    ctx.textAlign = 'right';
+    ctx.fillText(`A:${last.nA} B:${last.nB} C:${last.nC} D:${last.nD}`, x0 + gW - 8, H - 14);
+  }
+
+  _drawStats(ctx) {
+    const info = this.info();
+    const px = 10, py = 10, pw = 160, ph = 82;
+
+    ctx.fillStyle = 'rgba(5,5,20,0.82)';
+    ctx.beginPath(); ctx.roundRect(px, py, pw, ph, 7); ctx.fill();
+    ctx.strokeStyle = 'rgba(255,255,255,0.07)'; ctx.lineWidth = 1; ctx.stroke();
+
+    ctx.textAlign = 'left'; ctx.textBaseline = 'top';
+    ctx.font = "10px 'Manrope', system-ui, sans-serif";
+    const lh = 16;
+
+    ctx.fillStyle = '#7BF5A4';
+    ctx.fillText(`K\u2091\u2071 = ${info.keq}`, px + 10, py + 8);
+
+    ctx.fillStyle = '#FFD166';
+    ctx.fillText(`Q = ${info.Q}`, px + 10, py + 8 + lh);
+
+    ctx.fillStyle = '#06D6E0';
+    ctx.fillText(`\u041D\u0430\u043F\u0440\u0430\u0432\u043B\u0435\u043D\u0438\u0435: ${info.direction}`, px + 10, py + 8 + lh * 2);
+
+    ctx.fillStyle = 'rgba(255,255,255,0.45)';
+    ctx.fillText(`T = ${this.T} K`, px + 10, py + 8 + lh * 3);
+  }
+
+  /* ═══════════════════════ utility ═══════════════════════ */
+
+  _rrect(ctx, x, y, w, h, r) {
+    ctx.beginPath();
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + w - r, y); ctx.quadraticCurveTo(x + w, y, x + w, y + r);
+    ctx.lineTo(x + w, y + h - r); ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+    ctx.lineTo(x + r, y + h); ctx.quadraticCurveTo(x, y + h, x, y + h - r);
+    ctx.lineTo(x, y + r); ctx.quadraticCurveTo(x, y, x + r, y);
+    ctx.closePath();
+  }
+}
+
+if (typeof module !== 'undefined') module.exports = EquilibriumSim;
diff --git a/frontend/js/labs/flask.js b/frontend/js/labs/flask.js
new file mode 100644
index 0000000..0821ac3
--- /dev/null
+++ b/frontend/js/labs/flask.js
@@ -0,0 +1,1156 @@
+'use strict';
+/* ════════════════════════════════════════════════════════════════
+   FlaskSim v2 — «Химия в колбе»
+   • Реалистичная вода: 3 слоя волн, каустики, мениск, SSS
+   • Пар при нагреве, всплески пузырьков
+   • Толстое стекло, пульсирующий glow реакции
+   • Specular highlight металла, dissolution edge
+   ════════════════════════════════════════════════════════════════ */
+
+class FlaskSim {
+
+  /* ── Реагенты ─────────────────────────────────────────────────── */
+
+  static METALS = {
+    Zn: { name: 'Цинк',     color: '#9BB8CC', k: 0.50, Ea: 0.9,  rho: 7.13, dH: 155,  h2: 1,   acids: ['HCl','H2SO4'] },
+    Fe: { name: 'Железо',   color: '#A08060', k: 0.08, Ea: 1.4,  rho: 7.87, dH: 87,   h2: 1,   acids: ['HCl'], rust: true },
+    Mg: { name: 'Магний',   color: '#D6D6D6', k: 1.50, Ea: 0.5,  rho: 1.74, dH: 467,  h2: 1,   acids: ['HCl','H2SO4','H2O'] },
+    Cu: { name: 'Медь',     color: '#C87840', k: 0,    Ea: 99,   rho: 8.96, dH: 0,    h2: 0,   acids: [] },
+    Na: { name: 'Натрий',   color: '#F5F0C8', k: 6.00, Ea: 0.05, rho: 0.97, dH: 883,  h2: 0.5, acids: ['HCl','H2SO4','H2O'], boom: true },
+    Al: { name: 'Алюминий', color: '#C0C0C0', k: 0.60, Ea: 1.0,  rho: 2.70, dH: 300,  h2: 1.5, acids: ['HCl','H2SO4'] },
+  };
+
+  static ACIDS = {
+    HCl:   { name: 'Соляная кислота HCl',  rgb: [120, 210, 120], pHf: 1.0, label: 'HCl' },
+    H2SO4: { name: 'Серная кислота H₂SO₄', rgb: [210, 195, 120], pHf: 1.2, label: 'H₂SO₄' },
+    H2O:   { name: 'Вода H₂O',             rgb: [110, 180, 215], pHf: 0.0, label: 'H₂O' },
+  };
+
+  static EQ = {
+    Zn_HCl:   'Zn + 2HCl <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> ZnCl₂ + H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',
+    Zn_H2SO4: 'Zn + H₂SO₄ <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> ZnSO₄ + H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',
+    Fe_HCl:   'Fe + 2HCl <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> FeCl₂ + H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',
+    Mg_HCl:   'Mg + 2HCl <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> MgCl₂ + H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',
+    Mg_H2SO4: 'Mg + H₂SO₄ <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> MgSO₄ + H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',
+    Mg_H2O:   'Mg + 2H₂O <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> Mg(OH)₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> + H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',
+    Al_HCl:   '2Al + 6HCl <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> 2AlCl₃ + 3H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',
+    Al_H2SO4: '2Al + 3H₂SO₄ <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> Al₂(SO₄)₃ + 3H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',
+    Na_HCl:   '2Na + 2HCl <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> 2NaCl + H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',
+    Na_H2SO4: '2Na + H₂SO₄ <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> Na₂SO₄ + H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',
+    Na_H2O:   '2Na + 2H₂O <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> 2NaOH + H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',
+    Cu_HCl:   'Cu + HCl — реакция не идёт',
+    Cu_H2SO4: 'Cu + H₂SO₄(разб.) — реакция не идёт',
+    Cu_H2O:   'Cu + H₂O — реакция не идёт',
+    Fe_H2SO4: 'Fe + H₂SO₄(конц.) — пассивация!',
+    Fe_H2O:   'Fe + H₂O — реакция не идёт при 20°C',
+    Al_H2O:   'Al + H₂O — не реагирует (оксидная плёнка)',
+    Zn_H2O:   'Zn + H₂O — реакция не идёт',
+  };
+
+  /* ── Конструктор ──────────────────────────────────────────────── */
+
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.ctx    = canvas.getContext('2d');
+
+    this.metalType = 'Zn';
+    this.acidType  = 'HCl';
+    this.concLevel = 0.35;
+    this.envTemp   = 20;
+
+    /* Частицы и волны */
+    this._metal    = null;
+    this._bubbles  = [];
+    this._dusts    = [];
+    this._sparks   = [];
+    this._steam    = [];
+    this._splashes = [];
+    this._caustics = [];
+
+    /* Фазы волн (3 независимые) */
+    this._wave  = 0;
+    this._wave2 = 0;
+    this._wave3 = 0;
+
+    /* Анимационные таймеры */
+    this._glowPulse  = 0;
+    this._causticTmr = 0;
+    this._steamTmr   = 0;
+
+    /* Физическое состояние */
+    this._passiv   = false;
+    this._ignited  = false;
+    this._flameOn  = false;
+    this._boomCD   = 0;
+    this._conc     = this.concLevel;
+    this._temp     = this.envTemp;
+    this._pH       = 1.0;
+    this._rxRate   = 0;
+    this._h2       = 0;
+    this._bubTmr   = 0;
+
+    /* Анимация */
+    this._raf    = null;
+    this._last   = 0;
+    this._paused = false;
+
+    this.onUpdate = null;
+    this.W = 0; this.H = 0;
+    this._g = {};
+
+    this.fit();
+  }
+
+  /* ── Геометрия ────────────────────────────────────────────────── */
+
+  fit() {
+    const dpr = window.devicePixelRatio || 1;
+    const W   = this.canvas.offsetWidth  || 600;
+    const H   = this.canvas.offsetHeight || 400;
+    this.canvas.width  = Math.round(W * dpr);
+    this.canvas.height = Math.round(H * dpr);
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this.W = W; this.H = H;
+    this._calcGeom();
+  }
+
+  _calcGeom() {
+    const { W, H } = this;
+    const r    = Math.min(W * 0.195, H * 0.285);
+    const cx   = W * 0.50;
+    const cy   = H * 0.615;
+    const nw   = r * 0.26;          // ширина горлышка
+    const nh   = r * 1.05;          // высота горлышка
+    const nt   = cy - r - nh;       // верх горлышка
+    const nb   = cy - r * 0.80;     // точка начала плеч (где шея переходит в колбу)
+    const liqTop = cy - r * 0.42;
+    this._g = { r, cx, cy, nw, nh, nt, nb, liqTop };
+  }
+
+  _flaskPath(ctx) {
+    const { r, cx, cy, nw, nt, nb } = this._g;
+    ctx.beginPath();
+    ctx.moveTo(cx - nw, nt);
+    ctx.lineTo(cx - nw, nb);
+    /* Левое плечо: плавная кривая Безье от шеи до экватора колбы */
+    ctx.bezierCurveTo(
+      cx - nw,       cy - r * 0.42,   // CP1: продолжаем вниз по шее
+      cx - r * 0.85, cy - r * 0.10,   // CP2: выходим к экватору
+      cx - r,        cy               // конец: левый экватор окружности
+    );
+    /* Нижняя дуга колбы: слева направо через дно (anticlockwise=true в canvas = через низ) */
+    ctx.arc(cx, cy, r, Math.PI, 0, true);
+    /* Правое плечо: симметрично */
+    ctx.bezierCurveTo(
+      cx + r * 0.85, cy - r * 0.10,
+      cx + nw,       cy - r * 0.42,
+      cx + nw,       nb
+    );
+    ctx.lineTo(cx + nw, nt);
+    ctx.closePath();
+  }
+
+  /* ── Запуск / остановка ───────────────────────────────────────── */
+
+  start() {
+    if (this._raf) return;
+    this._last = performance.now();
+    const loop = t => { this._raf = requestAnimationFrame(loop); this._tick(t); };
+    this._raf  = requestAnimationFrame(loop);
+  }
+
+  stop() { cancelAnimationFrame(this._raf); this._raf = null; }
+
+  /* ── Публичный API ────────────────────────────────────────────── */
+
+  dropMetal() {
+    const { cx, nt } = this._g;
+    const md   = FlaskSim.METALS[this.metalType];
+    const mass = 5;
+    this._metal = {
+      type: this.metalType,
+      mass, init: mass,
+      x: cx + (Math.random() - 0.5) * 8,
+      y: nt - 32,
+      vx: (Math.random() - 0.5) * 22,
+      vy: 0,
+      r: this._m2r(mass),
+      _v: Array.from({ length: 10 }, (_, i) => ({
+        a: (i / 10) * Math.PI * 2,
+        j: 0.68 + Math.random() * 0.32,
+      })),
+    };
+    this._passiv  = false;
+    this._ignited = false;
+    this._h2      = 0;
+    this._bubTmr  = 0;
+    this._boomCD  = 0;
+  }
+
+  reset() {
+    this._metal    = null;
+    this._bubbles  = [];
+    this._dusts    = [];
+    this._sparks   = [];
+    this._steam    = [];
+    this._splashes = [];
+    this._caustics = [];
+    this._passiv   = false;
+    this._ignited  = false;
+    this._flameOn  = false;
+    this._h2       = 0;
+    this._rxRate   = 0;
+    this._boomCD   = 0;
+    this._causticTmr = 0;
+    this._steamTmr   = 0;
+    this._conc     = this.concLevel;
+    this._temp     = this.envTemp;
+    this._pH       = this._startPH();
+    if (this.onUpdate) this.onUpdate(this.info());
+    this.draw();
+  }
+
+  togglePause() { this._paused  = !this._paused; }
+  toggleFlame() { this._flameOn = !this._flameOn; }
+  setMetal(t)   { this.metalType = t; }
+  setAcid(t)    { this.acidType  = t; this.reset(); }
+  setConc(v)    { this.concLevel = v; this._conc = v; if (!this._metal) this._pH = this._startPH(); }
+  setEnvTemp(v) { this.envTemp = v; if (!this._metal) this._temp = v; }
+
+  _startPH() {
+    const a = FlaskSim.ACIDS[this.acidType];
+    if (a.pHf === 0) return 7.0;
+    return Math.max(0, -Math.log10(this.concLevel * 10 * a.pHf + 1e-10));
+  }
+
+  _m2r(mass) { return 8 + 24 * Math.cbrt(Math.max(0, mass) / 5); }
+
+  /* ── Тик физики ───────────────────────────────────────────────── */
+
+  _tick(now) {
+    const dt = Math.min((now - this._last) / 1000, 0.05);
+    this._last = now;
+    if (!this._paused) {
+      this._wave      += dt * 1.7;
+      this._wave2     += dt * 2.3;
+      this._wave3     += dt * 0.88;
+      this._glowPulse += dt * 3.2;
+      this._stepMetal(dt);
+      this._stepBubbles(dt);
+      this._stepDusts(dt);
+      this._stepSparks(dt);
+      this._stepSteam(dt);
+      this._stepSplashes(dt);
+      this._stepCaustics(dt);
+    }
+    this.draw();
+    if (this.onUpdate) this.onUpdate(this.info());
+  }
+
+  /* ── Физика металла ───────────────────────────────────────────── */
+
+  _stepMetal(dt) {
+    const m = this._metal;
+    if (!m || m.mass <= 0.01) { if (m) m.mass = 0; return; }
+
+    const md = FlaskSim.METALS[m.type];
+    const { cy, r, liqTop, cx } = this._g;
+
+    const liqRho = 1.12;
+    const inLiq  = m.y + m.r > liqTop;
+    const grav   = 400;
+    const buoy   = inLiq ? grav * (liqRho / md.rho) : 0;
+    const drag   = inLiq ? 4.5 : 0.25;
+
+    m.vy += (grav - buoy) * dt;
+    m.vy -= drag * m.vy * dt;
+    m.vx -= drag * m.vx * dt;
+    m.y  += m.vy * dt;
+    m.x  += m.vx * dt;
+
+    const botY = cy + r - m.r;
+    if (m.y > botY) { m.y = botY; m.vy *= -0.22; }
+    const hw = Math.sqrt(Math.max(0, r * r - (m.y - cy) ** 2));
+    m.x = Math.max(cx - hw + m.r, Math.min(cx + hw - m.r, m.x));
+
+    if (md.rho < liqRho && inLiq) {
+      const sfY = liqTop - m.r;
+      if (m.y < sfY) { m.y = sfY; m.vy = Math.abs(m.vy) * 0.25; }
+    }
+
+    const reacts = md.acids.includes(this.acidType) && !this._passiv && this._conc > 4e-4;
+    if (!reacts) { this._rxRate = 0; return; }
+
+    const T_K    = this._temp + 273.15;
+    const rate   = md.k * this._conc * Math.exp(-md.Ea * 3000 / (8.314 * T_K));
+    this._rxRate = Math.min(1, rate * 4);
+
+    const surf = (m.r / 26) ** 2;
+    const dmdt = rate * surf * 0.95;
+
+    m.mass = Math.max(0, m.mass - dmdt * dt);
+    m.r    = this._m2r(m.mass);
+
+    /* Слегка деформировать вершины при реакции */
+    if (this._rxRate > 0.1 && Math.random() < dt * 6) {
+      const vi = Math.floor(Math.random() * m._v.length);
+      m._v[vi].j = Math.max(0.45, Math.min(1.0, m._v[vi].j + (Math.random() - 0.5) * 0.08));
+    }
+
+    const heatW = md.dH * dmdt * 0.055;
+    const cool  = 0.30 * (this._temp - this.envTemp);
+    this._temp  = Math.min(150, Math.max(this.envTemp, this._temp + (heatW - cool) * dt));
+
+    this._conc  = Math.max(0, this._conc - dmdt * 0.07 * dt);
+
+    const ad = FlaskSim.ACIDS[this.acidType];
+    if (ad.pHf > 0) {
+      this._pH = Math.min(7, Math.max(0, -Math.log10(this._conc * 10 * ad.pHf + 1e-10)));
+    } else {
+      this._pH = Math.min(14, 7 + Math.min(7, m.mass < 0.1 ? 7 : dmdt * 12));
+    }
+
+    this._h2 = Math.min(1, this._h2 + md.h2 * dmdt * 0.065 * dt);
+
+    this._bubTmr += rate * 32 * dt;
+    while (this._bubTmr > 1 && this._bubbles.length < 180) {
+      this._spawnBubble(m.x, m.y - m.r * 0.6);
+      this._bubTmr--;
+    }
+
+    if (md.rust && Math.random() < rate * dt * 14) {
+      this._spawnDust(m.x + (Math.random() - 0.5) * m.r, m.y + m.r * 0.3, '#8B3A0A', 0.65);
+    }
+
+    if (m.type === 'Fe' && this.acidType === 'H2SO4' && this.concLevel > 0.82) {
+      this._passiv = true;
+    }
+
+    if (md.boom && this._boomCD <= 0 && rate > 0.28) {
+      this._boom(m.x, m.y);
+      this._boomCD = 0.45;
+    }
+    if (this._boomCD > 0) this._boomCD -= dt;
+
+    if (this._flameOn && this._h2 > 0.22 && !this._ignited) {
+      this._igniteH2();
+    }
+  }
+
+  /* ── Частицы ─────────────────────────────────────────────────── */
+
+  _spawnBubble(x, y) {
+    this._bubbles.push({
+      x: x + (Math.random() - 0.5) * 14,
+      y,
+      r:      1.4 + Math.random() * 3.8,
+      vy:    -(16 + Math.random() * 38),
+      vx:    (Math.random() - 0.5) * 9,
+      wobble: Math.random() * Math.PI * 2,
+      wFreq:  3.5 + Math.random() * 3,
+      life:   1,
+    });
+  }
+
+  _stepBubbles(dt) {
+    const { liqTop } = this._g;
+    for (const b of this._bubbles) {
+      b.wobble += dt * b.wFreq;
+      b.x  += b.vx * dt + Math.sin(b.wobble) * b.r * 0.35 * dt * 10;
+      b.y  += b.vy * dt;
+      b.vx += (Math.random() - 0.5) * 28 * dt;
+      if (b.y - b.r < liqTop) {
+        this._spawnSplash(b.x, liqTop, b.r);
+        b.life = 0;
+      } else {
+        b.life -= dt * 0.14;
+      }
+    }
+    this._bubbles = this._bubbles.filter(b => b.life > 0);
+  }
+
+  _spawnSplash(x, y, r) {
+    if (r < 2) return;
+    const n = Math.floor(2 + r);
+    for (let i = 0; i < n; i++) {
+      const a = -Math.PI * 0.5 + (Math.random() - 0.5) * Math.PI * 1.2;
+      const s = 10 + r * 4 + Math.random() * 20;
+      this._splashes.push({ x, y, vx: Math.cos(a) * s, vy: Math.sin(a) * s - 12, r: 0.8 + Math.random() * 1.4, life: 1 });
+    }
+  }
+
+  _stepSplashes(dt) {
+    for (const s of this._splashes) {
+      s.x  += s.vx * dt;
+      s.y  += s.vy * dt;
+      s.vy += 55 * dt;
+      s.life -= dt * 4.0;
+    }
+    this._splashes = this._splashes.filter(s => s.life > 0);
+  }
+
+  _spawnSteam(x, y) {
+    this._steam.push({
+      x: x + (Math.random() - 0.5) * 16,
+      y,
+      vx:   (Math.random() - 0.5) * 12,
+      vy:  -(6 + Math.random() * 18),
+      r:    2.5 + Math.random() * 6,
+      life: 0.9 + Math.random() * 0.1,
+    });
+  }
+
+  _stepSteam(dt) {
+    if (this._temp > 70) {
+      this._steamTmr += (this._temp - 70) / 30 * dt * 7;
+      while (this._steamTmr > 1 && this._steam.length < 55) {
+        const { liqTop, cx, nw } = this._g;
+        this._spawnSteam(cx + (Math.random() - 0.5) * nw * 1.6, liqTop - 4);
+        this._steamTmr--;
+      }
+    }
+    for (const s of this._steam) {
+      s.x  += s.vx * dt;
+      s.y  += s.vy * dt;
+      s.vx += (Math.random() - 0.5) * 12 * dt;
+      s.r  += dt * 5;
+      s.life -= dt * (0.7 + (1 - s.life) * 0.4);
+    }
+    this._steam = this._steam.filter(s => s.life > 0 && s.r < 50);
+  }
+
+  _spawnCaustic(x, y) {
+    this._caustics.push({
+      x, y,
+      r:    7 + Math.random() * 20,
+      vx:  (Math.random() - 0.5) * 16,
+      vy:  (Math.random() - 0.5) * 7,
+      life: 0.4 + Math.random() * 0.6,
+      a:   0.05 + Math.random() * 0.09,
+    });
+  }
+
+  _stepCaustics(dt) {
+    this._causticTmr += dt * 3.5;
+    while (this._causticTmr > 1 && this._caustics.length < 20) {
+      const { cx, cy, r, liqTop } = this._g;
+      const px = cx + (Math.random() - 0.5) * r * 1.5;
+      const py = liqTop + 8 + Math.random() * (cy + r * 0.6 - liqTop - 16);
+      this._spawnCaustic(px, py);
+      this._causticTmr--;
+    }
+    for (const c of this._caustics) {
+      c.x += c.vx * dt;
+      c.y += c.vy * dt;
+      c.r += dt * 4;
+      c.life -= dt * 0.38;
+    }
+    this._caustics = this._caustics.filter(c => c.life > 0);
+  }
+
+  _spawnDust(x, y, col, a) {
+    this._dusts.push({
+      x, y,
+      vx: (Math.random() - 0.5) * 14,
+      vy: 4 + Math.random() * 20,
+      r: 1.0 + Math.random() * 2.2,
+      col, a, life: 1,
+    });
+  }
+
+  _stepDusts(dt) {
+    for (const d of this._dusts) {
+      d.x  += d.vx * dt;
+      d.y  += d.vy * dt;
+      d.vy += 28 * dt;
+      d.vx *= 1 - dt * 2.2;
+      d.life -= dt * 0.22;
+    }
+    this._dusts = this._dusts.filter(d => d.life > 0);
+    if (this._dusts.length > 300) this._dusts.splice(0, 60);
+  }
+
+  _stepSparks(dt) {
+    for (const s of this._sparks) {
+      s.x  += s.vx * dt;
+      s.y  += s.vy * dt;
+      s.vy += 210 * dt;
+      s.vx *= 1 - dt * 0.8;
+      s.life -= dt * 2.0;
+    }
+    this._sparks = this._sparks.filter(s => s.life > 0);
+  }
+
+  _boom(x, y) {
+    for (let i = 0; i < 36; i++) {
+      const a = Math.random() * Math.PI * 2;
+      const s = 90 + Math.random() * 240;
+      this._sparks.push({ x, y, vx: Math.cos(a) * s, vy: Math.sin(a) * s - 90,
+        r: 2 + Math.random() * 4, col: Math.random() < 0.55 ? '#FFD166' : '#EF476F', life: 1 });
+    }
+  }
+
+  _igniteH2() {
+    this._ignited = true;
+    this._h2 = 0;
+    const { cx, nt } = this._g;
+    for (let i = 0; i < 60; i++) {
+      const a = -Math.PI / 2 + (Math.random() - 0.5) * Math.PI * 0.9;
+      const s = 130 + Math.random() * 360;
+      this._sparks.push({
+        x: cx + (Math.random() - 0.5) * 18, y: nt - 10,
+        vx: Math.cos(a) * s, vy: Math.sin(a) * s,
+        r: 3 + Math.random() * 5, col: i < 30 ? '#FFD166' : '#FF6B35', life: 1,
+      });
+    }
+  }
+
+  /* ════════════════════════════════════════════════════════════════
+     РЕНДЕРИНГ
+  ════════════════════════════════════════════════════════════════ */
+
+  draw() {
+    const ctx = this.ctx;
+    const { W, H, _g: g } = this;
+    ctx.clearRect(0, 0, W, H);
+
+    /* Фон */
+    const bg = ctx.createRadialGradient(W * 0.5, H * 0.35, 0, W * 0.5, H * 0.5, W * 0.75);
+    bg.addColorStop(0, '#0d1320');
+    bg.addColorStop(1, '#05080f');
+    ctx.fillStyle = bg;
+    ctx.fillRect(0, 0, W, H);
+
+    /* Сетка лаборатории */
+    ctx.strokeStyle = 'rgba(255,255,255,0.018)'; ctx.lineWidth = 1;
+    for (let x = 0; x < W; x += 28) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke(); }
+    for (let y = 0; y < H; y += 28)  { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(W, y); ctx.stroke(); }
+
+    /* Стол */
+    const tableY = g.cy + g.r + 8;
+    const tg = ctx.createLinearGradient(0, tableY, 0, tableY + 48);
+    tg.addColorStop(0, '#19223a'); tg.addColorStop(1, '#0c101e');
+    ctx.fillStyle = tg; ctx.fillRect(0, tableY, W, H - tableY);
+    ctx.strokeStyle = 'rgba(90,120,200,0.20)'; ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.moveTo(0, tableY); ctx.lineTo(W, tableY); ctx.stroke();
+
+    this._drawFlaskShadow(ctx, tableY);
+    this._drawLiquid(ctx);
+    this._drawCaustics(ctx);
+    this._drawDusts(ctx);
+    this._drawBubbles(ctx);
+    this._drawSplashes(ctx);
+    this._drawMetal(ctx);
+    this._drawFlaskGlass(ctx);
+    this._drawSteam(ctx);
+    this._drawSparks(ctx);
+    this._drawThermometer(ctx);
+    this._drawPHStrip(ctx);
+    this._drawH2Bar(ctx);
+    this._drawInfoPanel(ctx);
+    if (!this._metal || this._metal.mass <= 0.01) this._drawHint(ctx);
+  }
+
+  /* ── Тень/отражение колбы на столе ── */
+  _drawFlaskShadow(ctx, tableY) {
+    const { _g: g } = this;
+    ctx.save();
+    ctx.scale(1, 0.26);
+    const shadowGrad = ctx.createRadialGradient(g.cx, tableY / 0.26, 0, g.cx, tableY / 0.26, g.r * 1.15);
+    shadowGrad.addColorStop(0, 'rgba(0,0,0,0.50)');
+    shadowGrad.addColorStop(0.55, 'rgba(0,0,0,0.22)');
+    shadowGrad.addColorStop(1,   'rgba(0,0,0,0)');
+    ctx.fillStyle = shadowGrad;
+    ctx.beginPath(); ctx.arc(g.cx, tableY / 0.26, g.r * 1.15, 0, Math.PI * 2); ctx.fill();
+    ctx.restore();
+
+    /* Реакционный glow на столе */
+    if (this._rxRate > 0.05) {
+      const ad = FlaskSim.ACIDS[this.acidType];
+      const [ri, gi, bi] = ad.rgb;
+      ctx.save();
+      ctx.scale(1, 0.28);
+      const gg = ctx.createRadialGradient(g.cx, tableY / 0.28, 0, g.cx, tableY / 0.28, g.r * 0.9);
+      gg.addColorStop(0, `rgba(${ri},${gi},${bi},${this._rxRate * 0.18})`);
+      gg.addColorStop(1, 'rgba(0,0,0,0)');
+      ctx.fillStyle = gg;
+      ctx.beginPath(); ctx.arc(g.cx, tableY / 0.28, g.r * 0.9, 0, Math.PI * 2); ctx.fill();
+      ctx.restore();
+    }
+  }
+
+  /* ── Жидкость: 3 волны + SSS + каустики + мениск ── */
+  _drawLiquid(ctx) {
+    const { _g: g } = this;
+    const ad = FlaskSim.ACIDS[this.acidType];
+    const [ri, gi, bi] = ad.rgb;
+    const heat = Math.min(1, (this._temp - 20) / 80);
+    const lr   = Math.min(255, ri + heat * 80);
+    const lg   = Math.max(0,   gi - heat * 58);
+    const lb   = Math.max(0,   bi - heat * 58);
+    const al   = 0.20 + this._conc * 0.40;
+
+    const amp  = 1.8 + this._rxRate * 8;
+
+    /* Функция волновой поверхности */
+    const waveY = (x) => {
+      const wx = x - g.cx;
+      return g.liqTop
+        + Math.sin(wx * 0.065 + this._wave)              * amp
+        + Math.sin(wx * 0.130 - this._wave2 * 1.38)      * amp * 0.36
+        + Math.sin(wx * 0.046 + this._wave3 * 0.75)      * amp * 0.20;
+    };
+
+    const step = 2;
+    const x0 = g.cx - g.r - 2, x1 = g.cx + g.r + 2;
+
+    ctx.save();
+    this._flaskPath(ctx);
+    ctx.clip();
+
+    /* ── Слой 1: основное тело жидкости ── */
+    ctx.beginPath();
+    ctx.moveTo(x0, waveY(x0));
+    for (let x = x0; x <= x1; x += step) ctx.lineTo(x, waveY(x));
+    ctx.lineTo(x1, g.cy + g.r + 12);
+    ctx.lineTo(x0, g.cy + g.r + 12);
+    ctx.closePath();
+
+    const depthGrad = ctx.createLinearGradient(0, g.liqTop, 0, g.cy + g.r);
+    depthGrad.addColorStop(0,    `rgba(${lr},${lg},${lb},${al * 0.40})`);
+    depthGrad.addColorStop(0.30, `rgba(${lr},${lg},${lb},${al * 0.65})`);
+    depthGrad.addColorStop(1,    `rgba(${lr},${lg},${lb},${al})`);
+    ctx.fillStyle = depthGrad; ctx.fill();
+
+    /* ── Слой 2: subsurface scattering (22px полоса под поверхностью) ── */
+    ctx.beginPath();
+    ctx.moveTo(x0, waveY(x0));
+    for (let x = x0; x <= x1; x += step) ctx.lineTo(x, waveY(x));
+    for (let x = x1; x >= x0; x -= step) ctx.lineTo(x, waveY(x) + 22);
+    ctx.closePath();
+    const sssGrad = ctx.createLinearGradient(0, g.liqTop, 0, g.liqTop + 22);
+    sssGrad.addColorStop(0, `rgba(${Math.min(255,lr+90)},${Math.min(255,lg+80)},${Math.min(255,lb+80)},0.22)`);
+    sssGrad.addColorStop(1, `rgba(${lr},${lg},${lb},0)`);
+    ctx.fillStyle = sssGrad; ctx.fill();
+
+    /* ── Слой 3: радиальный тинт дна (имитация рассеяния) ── */
+    const botGrad = ctx.createRadialGradient(g.cx, g.cy + g.r * 0.55, 0, g.cx, g.cy + g.r * 0.55, g.r * 0.80);
+    botGrad.addColorStop(0, `rgba(${Math.min(255,lr+30)},${Math.min(255,lg+30)},${Math.min(255,lb+40)},0.14)`);
+    botGrad.addColorStop(1, 'rgba(0,0,0,0)');
+    ctx.fillStyle = botGrad;
+    ctx.beginPath(); ctx.arc(g.cx, g.cy, g.r, 0, Math.PI * 2); ctx.fill();
+
+    /* ── Основной блик поверхности ── */
+    ctx.beginPath();
+    ctx.moveTo(x0, waveY(x0));
+    for (let x = x0; x <= x1; x += step) ctx.lineTo(x, waveY(x));
+    ctx.strokeStyle = `rgba(${Math.min(255,lr+100)},${Math.min(255,lg+95)},${Math.min(255,lb+95)},0.50)`;
+    ctx.lineWidth = 1.6; ctx.stroke();
+
+    /* ── Вторая, более тонкая волна-блик (чуть ниже) ── */
+    ctx.beginPath();
+    for (let x = x0; x <= x1; x += step) {
+      const wy = waveY(x) + 3
+        + Math.sin((x - g.cx) * 0.11 - this._wave2 * 1.1) * amp * 0.55;
+      if (x === x0) ctx.moveTo(x, wy); else ctx.lineTo(x, wy);
+    }
+    ctx.strokeStyle = `rgba(${Math.min(255,lr+55)},${Math.min(255,lg+55)},${Math.min(255,lb+55)},0.18)`;
+    ctx.lineWidth = 1; ctx.stroke();
+
+    /* ── Мениск у стенок колбы ── */
+    const mY = waveY(g.cx);
+    ctx.beginPath();
+    ctx.moveTo(g.cx - g.r + 2, waveY(g.cx - g.r) + 6);
+    ctx.quadraticCurveTo(g.cx - g.r + 14, mY - 4, g.cx - g.r * 0.38, mY);
+    ctx.strokeStyle = `rgba(${Math.min(255,lr+70)},${Math.min(255,lg+70)},${Math.min(255,lb+70)},0.32)`;
+    ctx.lineWidth = 2.2; ctx.stroke();
+
+    ctx.beginPath();
+    ctx.moveTo(g.cx + g.r - 2, waveY(g.cx + g.r) + 6);
+    ctx.quadraticCurveTo(g.cx + g.r - 14, mY - 4, g.cx + g.r * 0.38, mY);
+    ctx.stroke();
+
+    ctx.restore();
+  }
+
+  /* ── Каустики (световые пятна в толще жидкости) ── */
+  _drawCaustics(ctx) {
+    if (this._caustics.length === 0) return;
+    ctx.save();
+    this._flaskPath(ctx); ctx.clip();
+    for (const c of this._caustics) {
+      const alpha = c.a * c.life;
+      const cg = ctx.createRadialGradient(c.x, c.y, 0, c.x, c.y, c.r);
+      cg.addColorStop(0,   `rgba(255,255,255,${alpha * 0.9})`);
+      cg.addColorStop(0.45,`rgba(210,235,255,${alpha * 0.4})`);
+      cg.addColorStop(1,   'rgba(0,0,0,0)');
+      ctx.fillStyle = cg;
+      ctx.beginPath(); ctx.arc(c.x, c.y, c.r, 0, Math.PI * 2); ctx.fill();
+    }
+    ctx.globalAlpha = 1;
+    ctx.restore();
+  }
+
+  /* ── Пузырьки с wobble, specular, вторичным бликом ── */
+  _drawBubbles(ctx) {
+    ctx.save();
+    this._flaskPath(ctx); ctx.clip();
+    for (const b of this._bubbles) {
+      const a = Math.min(1, b.life * 2.5);
+
+      /* Тело пузырька — градиент */
+      const bg = ctx.createRadialGradient(
+        b.x - b.r * 0.30, b.y - b.r * 0.30, 0,
+        b.x, b.y, b.r
+      );
+      bg.addColorStop(0,   `rgba(220,240,255,${a * 0.18})`);
+      bg.addColorStop(0.65,`rgba(180,215,255,${a * 0.09})`);
+      bg.addColorStop(1,   `rgba(130,185,255,${a * 0.04})`);
+      ctx.fillStyle = bg;
+      ctx.beginPath(); ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2); ctx.fill();
+
+      /* Контур */
+      ctx.strokeStyle = `rgba(200,230,255,${a * 0.70})`;
+      ctx.lineWidth = 0.85;
+      ctx.beginPath(); ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2); ctx.stroke();
+
+      /* Specular highlight (верхний левый) */
+      const hg = ctx.createRadialGradient(
+        b.x - b.r * 0.30, b.y - b.r * 0.32, 0,
+        b.x - b.r * 0.30, b.y - b.r * 0.32, b.r * 0.30
+      );
+      hg.addColorStop(0, `rgba(255,255,255,${a * 0.88})`);
+      hg.addColorStop(1, 'rgba(255,255,255,0)');
+      ctx.fillStyle = hg;
+      ctx.beginPath(); ctx.arc(b.x - b.r * 0.30, b.y - b.r * 0.32, b.r * 0.30, 0, Math.PI * 2); ctx.fill();
+
+      /* Малый блик (нижний правый) */
+      ctx.fillStyle = `rgba(200,225,255,${a * 0.28})`;
+      ctx.beginPath(); ctx.arc(b.x + b.r * 0.24, b.y + b.r * 0.30, b.r * 0.12, 0, Math.PI * 2); ctx.fill();
+    }
+    ctx.restore();
+  }
+
+  /* ── Всплески на поверхности ── */
+  _drawSplashes(ctx) {
+    if (this._splashes.length === 0) return;
+    ctx.save();
+    this._flaskPath(ctx); ctx.clip();
+    const ad = FlaskSim.ACIDS[this.acidType];
+    const [ri, gi, bi] = ad.rgb;
+    for (const s of this._splashes) {
+      ctx.globalAlpha = s.life * 0.75;
+      ctx.beginPath(); ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);
+      ctx.fillStyle = `rgb(${Math.min(255,ri+70)},${Math.min(255,gi+70)},${Math.min(255,bi+70)})`;
+      ctx.fill();
+    }
+    ctx.globalAlpha = 1;
+    ctx.restore();
+  }
+
+  /* ── Пар ── */
+  _drawSteam(ctx) {
+    if (this._steam.length === 0) return;
+    const { _g: g } = this;
+    for (const s of this._steam) {
+      /* Пар выходит только выше горлышка или через нагрев (внутри колбы у шейки) */
+      const inNeck = s.x > g.cx - g.nw - 6 && s.x < g.cx + g.nw + 6;
+      if (!inNeck && s.y > g.nt - 4) continue;
+      ctx.save();
+      ctx.globalAlpha = s.life * 0.38 * Math.min(1, s.r / 8);
+      const sg = ctx.createRadialGradient(s.x, s.y, 0, s.x, s.y, s.r);
+      sg.addColorStop(0, 'rgba(200,215,255,0.9)');
+      sg.addColorStop(0.6,'rgba(180,200,240,0.4)');
+      sg.addColorStop(1, 'rgba(160,190,230,0)');
+      ctx.fillStyle = sg;
+      ctx.beginPath(); ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2); ctx.fill();
+      ctx.restore();
+    }
+  }
+
+  /* ── Колба: толстое стекло, glow реакции, highlights ── */
+  _drawFlaskGlass(ctx) {
+    const { _g: g } = this;
+    const { r, cx, cy, nw, nt, nb } = g;
+    const heat = Math.min(1, (this._temp - 20) / 80);
+    const ad   = FlaskSim.ACIDS[this.acidType];
+    const [ri, gi, bi] = ad.rgb;
+
+    /* ── Reaction glow (пульсирующий) ── */
+    if (this._rxRate > 0.04) {
+      ctx.save();
+      const pulse = 0.5 + 0.5 * Math.sin(this._glowPulse);
+      ctx.shadowColor = `rgb(${ri},${gi},${bi})`;
+      ctx.shadowBlur  = 10 + this._rxRate * 30 + pulse * 10;
+      this._flaskPath(ctx);
+      ctx.strokeStyle = `rgba(${ri},${gi},${bi},${this._rxRate * 0.50 + pulse * 0.12})`;
+      ctx.lineWidth = 1.2;
+      ctx.stroke();
+      ctx.shadowBlur = 0;
+      ctx.restore();
+    }
+
+    /* ── Внешний контур ── */
+    this._flaskPath(ctx);
+    ctx.strokeStyle = 'rgba(100,165,255,0.68)';
+    ctx.lineWidth = 3.0;
+    ctx.stroke();
+
+    /* ── Внутренний контур (толщина стекла) ── */
+    const tk   = 4;
+    const r_i  = r  - tk;
+    const nw_i = nw - tk * 0.70;
+    const nb_i = cy - r_i * 0.80;
+    ctx.save();
+    ctx.beginPath();
+    ctx.moveTo(cx - nw_i, nt + tk * 0.9);
+    ctx.lineTo(cx - nw_i, nb_i);
+    ctx.bezierCurveTo(
+      cx - nw_i,        cy - r_i * 0.42,
+      cx - r_i * 0.85,  cy - r_i * 0.10,
+      cx - r_i,         cy
+    );
+    ctx.arc(cx, cy, r_i, Math.PI, 0, true);
+    ctx.bezierCurveTo(
+      cx + r_i * 0.85,  cy - r_i * 0.10,
+      cx + nw_i,        cy - r_i * 0.42,
+      cx + nw_i,        nb_i
+    );
+    ctx.lineTo(cx + nw_i, nt + tk * 0.9);
+    ctx.strokeStyle = 'rgba(75,125,215,0.16)';
+    ctx.lineWidth = 1;
+    ctx.stroke();
+    ctx.restore();
+
+    /* ── Большой левый блик (gradient arc) ── */
+    ctx.save();
+    ctx.beginPath();
+    ctx.moveTo(cx - nw * 0.50, nt + 10);
+    ctx.lineTo(cx - nw * 0.50, nb);
+    ctx.bezierCurveTo(
+      cx - nw * 0.50, nb + r * 0.18,
+      cx - r * 0.72,  cy - r * 0.42,
+      cx - r * 0.74,  cy - r * 0.05
+    );
+    const hlGrad = ctx.createLinearGradient(cx - r * 0.73, nt, cx - r * 0.73, cy);
+    hlGrad.addColorStop(0,    'rgba(225,242,255,0.40)');
+    hlGrad.addColorStop(0.40, 'rgba(215,235,255,0.22)');
+    hlGrad.addColorStop(0.75, 'rgba(200,225,255,0.10)');
+    hlGrad.addColorStop(1,    'rgba(200,225,255,0.02)');
+    ctx.strokeStyle = hlGrad;
+    ctx.lineWidth = 5;
+    ctx.stroke();
+    ctx.restore();
+
+    /* ── Правый мягкий блик ── */
+    ctx.save();
+    ctx.beginPath();
+    ctx.moveTo(cx + r * 0.62, cy - r * 0.56);
+    ctx.quadraticCurveTo(cx + r * 0.83, cy - r * 0.18, cx + r * 0.78, cy + r * 0.20);
+    ctx.strokeStyle = 'rgba(200,225,255,0.11)';
+    ctx.lineWidth = 3;
+    ctx.stroke();
+    ctx.restore();
+
+    /* ── Горлышко — ободок ── */
+    ctx.beginPath();
+    ctx.moveTo(cx - nw - 5, nt);
+    ctx.lineTo(cx + nw + 5, nt);
+    ctx.strokeStyle = 'rgba(100,165,255,0.68)';
+    ctx.lineWidth = 3.2;
+    ctx.stroke();
+
+    /* ── Блик горлышка ── */
+    ctx.save();
+    ctx.beginPath();
+    ctx.moveTo(cx - nw * 0.42, nt + 4);
+    ctx.lineTo(cx - nw * 0.42, nb - 4);
+    ctx.strokeStyle = 'rgba(220,240,255,0.26)';
+    ctx.lineWidth = 2.2;
+    ctx.stroke();
+    ctx.restore();
+
+    /* ── Тепловой тинт (стекло краснеет при нагреве) ── */
+    if (heat > 0.15) {
+      ctx.save();
+      this._flaskPath(ctx);
+      ctx.fillStyle = `rgba(255,${Math.round(155 - heat * 110)},40,${heat * 0.072})`;
+      ctx.fill();
+      ctx.restore();
+    }
+  }
+
+  /* ── Металл: specular, dissolution edge ── */
+  _drawMetal(ctx) {
+    const m = this._metal;
+    if (!m || m.mass <= 0.01) return;
+    const md = FlaskSim.METALS[m.type];
+
+    ctx.save();
+
+    /* Dissolution edge glow */
+    if (this._rxRate > 0.08) {
+      ctx.shadowColor = '#FFD166';
+      ctx.shadowBlur  = 6 + this._rxRate * 22;
+    }
+
+    /* Тело */
+    ctx.beginPath();
+    for (let i = 0; i < m._v.length; i++) {
+      const v  = m._v[i];
+      const px = m.x + Math.cos(v.a) * m.r * v.j;
+      const py = m.y + Math.sin(v.a) * m.r * v.j;
+      if (i === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py);
+    }
+    ctx.closePath();
+
+    const mg = ctx.createRadialGradient(m.x - m.r * 0.32, m.y - m.r * 0.30, 0, m.x, m.y, m.r);
+    mg.addColorStop(0,   this._tint(md.color, 80));
+    mg.addColorStop(0.28,this._tint(md.color, 48));
+    mg.addColorStop(0.68,md.color);
+    mg.addColorStop(1,   this._tint(md.color, -62));
+    ctx.fillStyle = mg; ctx.fill();
+    ctx.strokeStyle = this._tint(md.color, 32); ctx.lineWidth = 1.5; ctx.stroke();
+    ctx.shadowBlur = 0;
+
+    /* Specular dot */
+    ctx.save();
+    ctx.globalAlpha = 0.68;
+    const sg = ctx.createRadialGradient(
+      m.x - m.r * 0.28, m.y - m.r * 0.30, 0,
+      m.x - m.r * 0.28, m.y - m.r * 0.30, m.r * 0.40
+    );
+    sg.addColorStop(0, 'rgba(255,255,255,0.95)');
+    sg.addColorStop(0.5,'rgba(255,255,255,0.35)');
+    sg.addColorStop(1, 'rgba(255,255,255,0)');
+    ctx.fillStyle = sg;
+    ctx.beginPath(); ctx.arc(m.x - m.r * 0.28, m.y - m.r * 0.30, m.r * 0.40, 0, Math.PI * 2); ctx.fill();
+    ctx.restore();
+
+    /* Dissolution edge */
+    if (this._rxRate > 0.12) {
+      ctx.save();
+      ctx.globalAlpha = this._rxRate * 0.55;
+      ctx.beginPath();
+      for (let i = 0; i < m._v.length; i++) {
+        const v = m._v[i];
+        const px = m.x + Math.cos(v.a) * m.r * v.j;
+        const py = m.y + Math.sin(v.a) * m.r * v.j;
+        if (i === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py);
+      }
+      ctx.closePath();
+      ctx.strokeStyle = '#FFD166';
+      ctx.lineWidth = 1.5 + this._rxRate * 3.5;
+      ctx.shadowColor = '#FFD166'; ctx.shadowBlur = 10;
+      ctx.stroke();
+      ctx.restore();
+    }
+
+    /* Пассивирующая плёнка */
+    if (this._passiv) {
+      ctx.beginPath();
+      for (let i = 0; i < m._v.length; i++) {
+        const v = m._v[i];
+        if (i === 0) ctx.moveTo(m.x + Math.cos(v.a) * m.r * v.j, m.y + Math.sin(v.a) * m.r * v.j);
+        else          ctx.lineTo(m.x + Math.cos(v.a) * m.r * v.j, m.y + Math.sin(v.a) * m.r * v.j);
+      }
+      ctx.closePath();
+      ctx.fillStyle = 'rgba(55,40,25,0.65)'; ctx.fill();
+    }
+
+    ctx.restore();
+  }
+
+  _drawDusts(ctx) {
+    ctx.save();
+    this._flaskPath(ctx); ctx.clip();
+    for (const d of this._dusts) {
+      ctx.globalAlpha = d.a * d.life;
+      ctx.beginPath(); ctx.arc(d.x, d.y, d.r, 0, Math.PI * 2);
+      ctx.fillStyle = d.col; ctx.fill();
+    }
+    ctx.globalAlpha = 1;
+    ctx.restore();
+  }
+
+  _drawSparks(ctx) {
+    for (const s of this._sparks) {
+      ctx.save();
+      ctx.globalAlpha = s.life;
+      ctx.shadowColor = s.col;
+      ctx.shadowBlur  = 12;
+      ctx.beginPath(); ctx.arc(s.x, s.y, s.r * s.life, 0, Math.PI * 2);
+      ctx.fillStyle = s.col; ctx.fill();
+      ctx.restore();
+    }
+    if (this._flameOn) {
+      const { cx, nt, nw } = this._g;
+      ctx.font = '22px serif';
+      ctx.fillText('*', cx + nw + 8, nt + 8);
+    }
+  }
+
+  /* ── Термометр ── */
+  _drawThermometer(ctx) {
+    const { _g: g } = this;
+    const tx = g.cx + g.r + 44;
+    const ty = g.nt + 8;
+    const th = g.cy + g.r - ty - 16;
+    const tw = 11;
+    const frac = Math.min(1, Math.max(0, (this._temp - 10) / 140));
+    const fillH = th * frac;
+    const col = `hsl(${Math.round(55 - frac * 55)},92%,56%)`;
+
+    _flask_rrect(ctx, tx - tw / 2, ty, tw, th, tw / 2);
+    ctx.fillStyle = 'rgba(255,255,255,0.07)'; ctx.fill();
+    ctx.strokeStyle = 'rgba(120,175,255,0.38)'; ctx.lineWidth = 1.5; ctx.stroke();
+
+    if (fillH > 0) {
+      _flask_rrect(ctx, tx - tw / 2 + 2, ty + th - fillH, tw - 4, fillH, (tw - 4) / 2);
+      ctx.fillStyle = col; ctx.fill();
+    }
+
+    ctx.beginPath(); ctx.arc(tx, ty + th + tw * 0.68, tw * 0.74, 0, Math.PI * 2);
+    ctx.fillStyle = col; ctx.shadowColor = col; ctx.shadowBlur = 10; ctx.fill(); ctx.shadowBlur = 0;
+
+    ctx.strokeStyle = 'rgba(150,185,255,0.3)'; ctx.lineWidth = 1;
+    for (let deg = 20; deg <= 150; deg += 20) {
+      const fy = ty + th - th * (deg - 10) / 140;
+      ctx.beginPath(); ctx.moveTo(tx + tw / 2, fy); ctx.lineTo(tx + tw / 2 + 5, fy); ctx.stroke();
+    }
+
+    ctx.font = 'bold 10.5px monospace'; ctx.fillStyle = 'rgba(195,215,255,0.82)';
+    ctx.textAlign = 'center';
+    ctx.fillText(Math.round(this._temp) + '°C', tx, ty + th + tw * 2 + 17);
+    ctx.fillText('T', tx, ty - 5);
+    ctx.textAlign = 'left';
+  }
+
+  /* ── pH-полоска ── */
+  _drawPHStrip(ctx) {
+    const { _g: g } = this;
+    const px = g.cx - g.r - 44;
+    const py = g.liqTop - 6;
+    const pw = 14; const ph = 88;
+    const hue = Math.round(this._pH / 14 * 270);
+    const col = `hsl(${hue},80%,52%)`;
+
+    _flask_rrect(ctx, px - pw / 2, py, pw, ph, 3);
+    ctx.fillStyle = col; ctx.shadowColor = col; ctx.shadowBlur = 8; ctx.fill();
+    ctx.shadowBlur = 0;
+    ctx.strokeStyle = 'rgba(255,255,255,0.25)'; ctx.lineWidth = 1; ctx.stroke();
+
+    ctx.strokeStyle = 'rgba(0,0,0,0.25)'; ctx.lineWidth = 0.8;
+    for (let i = 0; i <= 14; i += 2) {
+      const ry = py + ph * (1 - i / 14);
+      ctx.beginPath(); ctx.moveTo(px - pw / 2 + 2, ry); ctx.lineTo(px + pw / 2 - 2, ry); ctx.stroke();
+    }
+
+    ctx.font = 'bold 10.5px monospace'; ctx.fillStyle = 'rgba(195,215,255,0.82)';
+    ctx.textAlign = 'center';
+    ctx.fillText('pH', px, py - 5);
+    ctx.fillText(this._pH.toFixed(1), px, py + ph + 15);
+    ctx.textAlign = 'left';
+  }
+
+  /* ── Бар H₂ ── */
+  _drawH2Bar(ctx) {
+    const { _g: g } = this;
+    const bx = g.cx - 46, by = g.nt - 30;
+    const bw = 92, bh = 10;
+
+    _flask_rrect(ctx, bx, by, bw, bh, 4);
+    ctx.fillStyle = 'rgba(255,255,255,0.07)'; ctx.fill();
+
+    if (this._h2 > 0) {
+      const col = this._ignited ? '#EF476F' : '#4CC9F0';
+      ctx.shadowColor = col; ctx.shadowBlur = this._h2 > 0.45 ? 10 : 4;
+      _flask_rrect(ctx, bx, by, bw * this._h2, bh, 4);
+      ctx.fillStyle = col; ctx.fill(); ctx.shadowBlur = 0;
+    }
+
+    ctx.font = '10px monospace'; ctx.fillStyle = 'rgba(190,215,255,0.72)';
+    ctx.textAlign = 'center'; ctx.fillText('H₂', g.cx, by - 5); ctx.textAlign = 'left';
+
+    if (this._h2 > 0.65 && !this._ignited) {
+      ctx.font = 'bold 10px sans-serif'; ctx.fillStyle = '#FFD166';
+      ctx.textAlign = 'center';
+      ctx.fillText('Поднести огонь!', g.cx, by - 16);
+      ctx.textAlign = 'left';
+    }
+    if (this._ignited) {
+      ctx.font = 'bold 10px sans-serif'; ctx.fillStyle = '#EF476F';
+      ctx.textAlign = 'center'; ctx.fillText('H₂ воспламенился!', g.cx, by - 16); ctx.textAlign = 'left';
+    }
+  }
+
+  /* ── Информационная панель ── */
+  _drawInfoPanel(ctx) {
+    const { _g: g, W } = this;
+    const eq  = FlaskSim.EQ[`${this.metalType}_${this.acidType}`] || '—';
+    const eqY = g.cy + g.r + 26;
+
+    ctx.font = '12.5px monospace'; ctx.fillStyle = 'rgba(185,215,255,0.78)';
+    ctx.textAlign = 'center'; ctx.fillText(eq, W * 0.44, eqY); ctx.textAlign = 'left';
+
+    if (this._passiv) {
+      ctx.font = 'bold 11px sans-serif'; ctx.fillStyle = '#FFD166';
+      ctx.textAlign = 'center';
+      ctx.fillText('Пассивация: Fe покрыт оксидной плёнкой — реакция прекратилась', W * 0.44, eqY + 19);
+      ctx.textAlign = 'left';
+    }
+
+    if (this._metal && this._metal.mass > 0.1 && this._rxRate > 0) {
+      const bx = g.cx - g.r, by = g.cy + g.r - 6;
+      const bw = g.r * 2;
+      _flask_rrect(ctx, bx, by, bw, 5, 2);
+      ctx.fillStyle = 'rgba(255,255,255,0.07)'; ctx.fill();
+      const col = this._rxRate > 0.6 ? '#EF476F' : this._rxRate > 0.3 ? '#FFD166' : '#7BF5A4';
+      _flask_rrect(ctx, bx, by, bw * this._rxRate, 5, 2);
+      ctx.fillStyle = col; ctx.shadowColor = col; ctx.shadowBlur = 4; ctx.fill(); ctx.shadowBlur = 0;
+    }
+  }
+
+  _drawHint(ctx) {
+    const { _g: g } = this;
+    ctx.font = '13px sans-serif'; ctx.fillStyle = 'rgba(185,210,255,0.32)';
+    ctx.textAlign = 'center';
+    ctx.fillText('Нажмите «Бросить металл» для начала реакции', g.cx, g.cy + 14);
+    ctx.textAlign = 'left';
+  }
+
+  /* ── Вспомогательные ──────────────────────────────────────────── */
+
+  _tint(hex, d) {
+    const n = parseInt(hex.slice(1), 16);
+    const c = v => Math.max(0, Math.min(255, v));
+    return `rgb(${c((n >> 16) + d)},${c(((n >> 8) & 255) + d)},${c((n & 255) + d)})`;
+  }
+
+  info() {
+    const m  = this._metal;
+    const md = m ? FlaskSim.METALS[m.type] : null;
+    return {
+      metal:  md?.name ?? '—',
+      mass:   m ? m.mass.toFixed(2) : '0',
+      temp:   this._temp.toFixed(1),
+      pH:     this._pH.toFixed(2),
+      h2pct:  (this._h2 * 100).toFixed(0),
+      rate:   (this._rxRate * 100).toFixed(0),
+      reacts: md ? md.acids.includes(this.acidType) : false,
+    };
+  }
+}
+
+/* ── Util: скруглённый прямоугольник ─────────────────────────── */
+function _flask_rrect(ctx, x, y, w, h, r) {
+  if (w <= 0 || h <= 0) return;
+  r = Math.min(r, w / 2, h / 2);
+  ctx.beginPath();
+  ctx.moveTo(x + r, y);
+  ctx.arcTo(x + w, y,     x + w, y + h, r);
+  ctx.arcTo(x + w, y + h, x,     y + h, r);
+  ctx.arcTo(x,     y + h, x,     y,     r);
+  ctx.arcTo(x,     y,     x + w, y,     r);
+  ctx.closePath();
+}
diff --git a/frontend/js/labs/forcesandbox.js b/frontend/js/labs/forcesandbox.js
new file mode 100644
index 0000000..b362cd9
--- /dev/null
+++ b/frontend/js/labs/forcesandbox.js
@@ -0,0 +1,2099 @@
+'use strict';
+/* ════════════════════════════════════════════════════════════════
+   ForceSandboxSim v3 — полная физика твёрдого тела
+   Velocity-Verlet · 4 подшага · Вращение · OBB/SAT коллизии
+   Трение с угловым импульсом · Качение · Рампа с вращением
+   ════════════════════════════════════════════════════════════════ */
+
+class ForceSandboxSim {
+
+  static SCALE     = 58;   // px / metre
+  static G         = 9.81;
+  static COLORS    = ['#EF476F','#4CC9F0','#9B5DE5','#FFD166','#7BF5A4','#FF6B35'];
+  static SUB_STEPS = 4;    // physics sub-steps per rendered frame
+
+  /* ── Конструктор ─────────────────────────────────────────── */
+
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.ctx    = canvas.getContext('2d');
+
+    this.bodies    = [];
+    this._nextId   = 0;
+    this._colorIdx = 0;
+
+    /* Мировые параметры */
+    this.gravity      = true;
+    this.gVal         = 9.81;
+    this.hasFloor     = true;
+    this.hasWalls     = true;
+    this.floorMu      = 0.30;
+    this.showForces   = true;
+    this.showVelocity = true;
+    this.showFBD      = false;
+    this.showEnergy   = true;
+    this.showTrail    = true;
+    this.showDecomp   = true;
+    this.timeScale    = 1;
+    this.airDrag      = false;
+
+    /* Пружины */
+    this.springs        = [];
+    this._nextSpringId  = 0;
+    this._springStart   = null;
+    this.newSpringK     = 120;
+    this.newSpringDamp  = 4;
+
+    /* Верёвки / нити / блоки */
+    this.ropes          = [];
+    this._nextRopeId    = 0;
+    this._ropeStart     = null;
+    this.newRopeK       = 3000;   // жёсткость нити (квазинерастяжимая)
+    this.newRopeDamp    = 12;
+
+    /* Наклонная плоскость */
+    this.ramp        = false;
+    this.rampAngle   = 30;
+    this.rampMu      = 0.20;
+    this._rampGeom   = null;
+
+    /* Инструменты */
+    this.tool           = 'box';
+    this.forceMode      = 'constant';
+    this.newMass        = 5;
+    this.newRestitution = 0.65;
+
+    /* Drag / hover */
+    this._drag     = null;
+    this._hovered  = null;
+    this._ghostPos = null;
+    this._selected = null;
+
+    /* Timing */
+    this._raf         = null;
+    this._evAbort     = new AbortController();
+    this._last        = 0;
+    this._paused      = false;
+    this._simTime     = 0;
+    this._strobeTimer = 0;
+    this._energyLoss  = 0;
+
+    /* Geometry */
+    this.W = 0; this.H = 0;
+    this._floorY = 0;
+
+    this.onUpdate = null;
+    this.fit();
+    this._bindEvents();
+  }
+
+  /* ── Ramp geometry ───────────────────────────────────────── */
+
+  _calcRampGeom() {
+    if (!this.ramp) { this._rampGeom = null; return; }
+    const { W, _floorY: fY } = this;
+    const a = this.rampAngle * Math.PI / 180;
+    const margin = W * 0.08, L = W * 0.78;
+    const x1 = margin, y1 = fY;
+    const x2 = margin + L * Math.cos(a), y2 = fY - L * Math.sin(a);
+    const dx = x2 - x1, dy = y2 - y1;
+    const len = Math.hypot(dx, dy);
+    // Normal pointing ABOVE surface: rotate tangent 90° CW in screen coords
+    const nx = dy / len, ny = -dx / len;   // = (-sin a, -cos a)
+    this._rampGeom = { x1, y1, x2, y2, nx, ny, len,
+      cos: Math.cos(a), sin: Math.sin(a), angle: a };
+  }
+
+  /* ── Geometry ────────────────────────────────────────────── */
+
+  fit() {
+    const dpr = window.devicePixelRatio || 1;
+    const W   = this.canvas.offsetWidth  || 700;
+    const H   = this.canvas.offsetHeight || 440;
+    this.canvas.width  = Math.round(W * dpr);
+    this.canvas.height = Math.round(H * dpr);
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this.W = W; this.H = H;
+    this._floorY = H * 0.85;
+    this._calcRampGeom();
+  }
+
+  /* ── Lifecycle ───────────────────────────────────────────── */
+
+  start() {
+    if (this._raf) return;
+    this._last = performance.now();
+    const loop = t => { this._raf = requestAnimationFrame(loop); this._tick(t); };
+    this._raf = requestAnimationFrame(loop);
+  }
+  stop()        { cancelAnimationFrame(this._raf); this._raf = null; }
+  togglePause() { this._paused = !this._paused; }
+
+  reset() {
+    this.bodies       = [];
+    this._nextId      = 0;
+    this._colorIdx    = 0;
+    this._simTime     = 0;
+    this._energyLoss  = 0;
+    this._drag        = null;
+    this._hovered     = null;
+    this._selected    = null;
+    this.springs      = [];
+    this._springStart = null;
+    this.ropes        = [];
+    this._ropeStart   = null;
+    this.ramp         = false;
+    this._rampGeom    = null;
+  }
+
+  /* ── Ramp API ────────────────────────────────────────────── */
+
+  setRamp(on)        { this.ramp = on;                             this._calcRampGeom(); }
+  setRampAngle(deg)  { this.rampAngle = Math.max(5, Math.min(80, deg)); this._calcRampGeom(); }
+  setRampMu(v)       { this.rampMu = v; }
+
+  /* ── Body creation ───────────────────────────────────────── */
+
+  addBody(x, y, type) {
+    type = type || this.tool;
+    if (type === 'erase') return null;
+    const mass  = this.newMass;
+    const color = ForceSandboxSim.COLORS[this._colorIdx++ % ForceSandboxSim.COLORS.length];
+    const w = type === 'box'  ? 32 + mass * 2.4 : 0;
+    const h = type === 'box'  ? 28 + mass * 1.8 : 0;
+    const r = type === 'ball' ? 14 + mass * 1.6 : 0;
+    // Момент инерции (kg·px²):  box = m(w²+h²)/12,  ball = m·r²/2
+    const I = type === 'box' ? mass * (w * w + h * h) / 12
+                              : 0.5 * mass * r * r;
+    const body = {
+      id: this._nextId++, type, x, y,
+      vx: 0, vy: 0,
+      angle: 0, omega: 0,   // вращение
+      mass, w, h, r, I,
+      mu: 0.3,
+      restitution: this.newRestitution,
+      color,
+      pinned: false,
+      trail: [],
+      forces: [],
+    };
+    this.bodies.push(body);
+    return body;
+  }
+
+  removeBody(id) {
+    this.bodies  = this.bodies.filter(b => b.id !== id);
+    this.springs = this.springs.filter(s => s.b1id !== id && s.b2id !== id);
+    this.ropes   = this.ropes.filter(r => r.b1id !== id && r.b2id !== id);
+    if (this._selected === id) this._selected = null;
+  }
+
+  /* ── Springs ─────────────────────────────────────────────── */
+
+  // L0m — natural length in metres (null = current distance)
+  // opts: { lx1, ly1, lx2, ly2 } — local attachment offsets (px, default 0,0 = center)
+  addSpring(b1id, b2id, k, L0m, damp, opts) {
+    const b1 = this.bodies.find(b => b.id === b1id);
+    const b2 = this.bodies.find(b => b.id === b2id);
+    if (!b1 || !b2) return null;
+    const S  = ForceSandboxSim.SCALE;
+    const lx1 = opts?.lx1 || 0, ly1 = opts?.ly1 || 0;
+    const lx2 = opts?.lx2 || 0, ly2 = opts?.ly2 || 0;
+    // World attachment positions
+    const p1 = this._localToWorld(b1, lx1, ly1);
+    const p2 = this._localToWorld(b2, lx2, ly2);
+    const L0 = (L0m != null) ? L0m * S
+                              : Math.hypot(p2.x - p1.x, p2.y - p1.y);
+    const sp = { id: this._nextSpringId++, b1id, b2id,
+                 k:    k    != null ? k    : this.newSpringK,
+                 damp: damp != null ? damp : this.newSpringDamp,
+                 L0, lx1, ly1, lx2, ly2 };
+    this.springs.push(sp);
+    return sp;
+  }
+
+  removeSpring(id) {
+    this.springs = this.springs.filter(s => s.id !== id);
+  }
+
+  /* ── Ropes / Strings / Pulleys ───────────────────────────── */
+
+  // opts: { type:'direct'|'pulley', px, py, L0px, L0m, k, damp }
+  // type='direct'  — straight inextensible string between two bodies
+  // type='pulley'  — string over fixed pulley at (px, py), Atwood-style
+  addRope(b1id, b2id, opts = {}) {
+    const b1 = this.bodies.find(b => b.id === b1id);
+    const b2 = this.bodies.find(b => b.id === b2id);
+    if (!b1 || !b2) return null;
+    const S    = ForceSandboxSim.SCALE;
+    const type = opts.type || 'direct';
+    const px   = opts.px != null ? opts.px : 0;
+    const py   = opts.py != null ? opts.py : 0;
+    let L0;
+    if (opts.L0px != null) {
+      L0 = opts.L0px;
+    } else if (opts.L0m != null) {
+      L0 = opts.L0m * S;
+    } else if (type === 'pulley') {
+      L0 = Math.hypot(b1.x - px, b1.y - py) + Math.hypot(b2.x - px, b2.y - py);
+    } else {
+      L0 = Math.hypot(b2.x - b1.x, b2.y - b1.y);
+    }
+    const rope = { id: this._nextRopeId++, type, b1id, b2id, L0, px, py,
+                   k:    opts.k    != null ? opts.k    : this.newRopeK,
+                   damp: opts.damp != null ? opts.damp : this.newRopeDamp };
+    this.ropes.push(rope);
+    return rope;
+  }
+
+  removeRope(id) {
+    this.ropes = this.ropes.filter(r => r.id !== id);
+  }
+
+  clearForces(id) {
+    const b = this.bodies.find(b => b.id === id);
+    if (b) b.forces = [];
+  }
+
+  /* ── Presets ─────────────────────────────────────────────── */
+
+  preset(name) {
+    this.reset();
+    const S = ForceSandboxSim.SCALE;
+    const { W, H, _floorY: fY } = this;
+
+    switch (name) {
+      case 'freefall': {
+        this.gravity = true; this.hasFloor = true; this.hasWalls = true;
+        const b1 = this.addBody(W * 0.35, fY - 280, 'ball');
+        b1.mass = 3; b1.r = 14 + 3 * 1.6; b1.I = 0.5 * b1.mass * b1.r * b1.r; b1.color = '#4CC9F0';
+        const b2 = this.addBody(W * 0.65, fY - 280, 'ball');
+        b2.mass = 15; b2.r = 14 + 15 * 1.6; b2.I = 0.5 * b2.mass * b2.r * b2.r; b2.color = '#EF476F';
+        break;
+      }
+      case 'collision': {
+        this.gravity = false; this.hasFloor = false; this.hasWalls = true;
+        const b1 = this.addBody(W * 0.15, H * 0.45, 'ball');
+        b1.mass = 5; b1.r = 14 + 5 * 1.6; b1.I = 0.5 * b1.mass * b1.r * b1.r; b1.vx = 180; b1.color = '#4CC9F0';
+        const b2 = this.addBody(W * 0.85, H * 0.45, 'ball');
+        b2.mass = 12; b2.r = 14 + 12 * 1.6; b2.I = 0.5 * b2.mass * b2.r * b2.r; b2.vx = -80; b2.color = '#EF476F';
+        break;
+      }
+      case 'friction': {
+        this.gravity = true; this.hasFloor = true; this.hasWalls = true; this.floorMu = 0.35;
+        const b1 = this.addBody(W * 0.12, fY - 36, 'box');
+        b1.mass = 8; b1.w = 32 + 8 * 2.4; b1.h = 28 + 8 * 1.8;
+        b1.I = b1.mass * (b1.w * b1.w + b1.h * b1.h) / 12;
+        b1.vx = 240; b1.color = '#9B5DE5';
+        break;
+      }
+      case 'tug': {
+        this.gravity = true; this.hasFloor = true; this.hasWalls = true;
+        const b1 = this.addBody(W * 0.35, fY - 36, 'box');
+        b1.mass = 6; b1.w = 32 + 6 * 2.4; b1.h = 28 + 6 * 1.8;
+        b1.I = b1.mass * (b1.w * b1.w + b1.h * b1.h) / 12;
+        b1.color = '#EF476F';
+        b1.forces.push({ fx: 120 * S, fy: 0, label: 'F₁', color: '#FFD166' });
+        b1.forces.push({ fx: -80 * S, fy: 0, label: 'F₂', color: '#4CC9F0' });
+        break;
+      }
+      case 'balance': {
+        this.gravity = true; this.hasFloor = true; this.hasWalls = true;
+        const b1 = this.addBody(W * 0.5, fY - 36, 'box');
+        b1.mass = 10; b1.w = 32 + 10 * 2.4; b1.h = 28 + 10 * 1.8;
+        b1.I = b1.mass * (b1.w * b1.w + b1.h * b1.h) / 12;
+        b1.color = '#7BF5A4';
+        b1.forces.push({ fx:  60 * S, fy: 0, label: 'F₁', color: '#FFD166' });
+        b1.forces.push({ fx: -60 * S, fy: 0, label: 'F₂', color: '#4CC9F0' });
+        b1.forces.push({ fx: 0, fy: -50 * S, label: 'F₃', color: '#EF476F' });
+        break;
+      }
+      case 'ramp_slide': {
+        this.gravity = true; this.hasFloor = true; this.hasWalls = true;
+        this.ramp = true; this.rampAngle = 30; this.rampMu = 0.15;
+        this._calcRampGeom();
+        const rg = this._rampGeom;
+        if (rg) {
+          const b1 = this.addBody(0, 0, 'box');
+          b1.mass = 5; b1.w = 32 + 5 * 2.4; b1.h = 28 + 5 * 1.8;
+          b1.I = b1.mass * (b1.w * b1.w + b1.h * b1.h) / 12;
+          b1.color = '#EF476F';
+          const rad1 = Math.abs(b1.w / 2 * rg.nx) + Math.abs(b1.h / 2 * rg.ny);
+          const t1 = 0.82;
+          b1.x = rg.x1 + (rg.x2 - rg.x1) * t1 + rg.nx * (rad1 + 2);
+          b1.y = rg.y1 + (rg.y2 - rg.y1) * t1 + rg.ny * (rad1 + 2);
+        }
+        break;
+      }
+      case 'ramp_angle': {
+        this.gravity = true; this.hasFloor = true; this.hasWalls = true;
+        this.ramp = true; this.rampAngle = 45; this.rampMu = 0.30;
+        this._calcRampGeom();
+        const rg2 = this._rampGeom;
+        if (rg2) {
+          const b1 = this.addBody(0, 0, 'ball');
+          b1.mass = 8; b1.r = 14 + 8 * 1.6; b1.I = 0.5 * b1.mass * b1.r * b1.r; b1.color = '#4CC9F0';
+          const t2 = 0.75;
+          b1.x = rg2.x1 + (rg2.x2 - rg2.x1) * t2 + rg2.nx * (b1.r + 2);
+          b1.y = rg2.y1 + (rg2.y2 - rg2.y1) * t2 + rg2.ny * (b1.r + 2);
+        }
+        break;
+      }
+      case 'ramp_friction': {
+        this.gravity = true; this.hasFloor = true; this.hasWalls = true;
+        this.ramp = true; this.rampAngle = 25; this.rampMu = 0.50;
+        this._calcRampGeom();
+        const rg3 = this._rampGeom;
+        if (rg3) {
+          const b1 = this.addBody(0, 0, 'box');
+          b1.mass = 6; b1.w = 32 + 6 * 2.4; b1.h = 28 + 6 * 1.8;
+          b1.I = b1.mass * (b1.w * b1.w + b1.h * b1.h) / 12;
+          b1.color = '#FFD166';
+          const rad3 = Math.abs(b1.w / 2 * rg3.nx) + Math.abs(b1.h / 2 * rg3.ny);
+          b1.x = rg3.x1 + (rg3.x2 - rg3.x1) * 0.8 + rg3.nx * (rad3 + 2);
+          b1.y = rg3.y1 + (rg3.y2 - rg3.y1) * 0.8 + rg3.ny * (rad3 + 2);
+        }
+        break;
+      }
+      case 'atwood': {
+        // Машина Атвуда: m1 ≠ m2, нить через неподвижный блок
+        this.gravity = true; this.hasFloor = true; this.hasWalls = false;
+        const px = W * 0.5, py = H * 0.06;
+        const arm = H * 0.48;
+        const b1 = this.addBody(px - 55, py + arm, 'ball');
+        b1.mass = 3; b1.r = 14 + 3 * 1.6; b1.I = 0.5 * b1.mass * b1.r * b1.r; b1.color = '#4CC9F0';
+        const b2 = this.addBody(px + 55, py + arm - 60, 'ball');
+        b2.mass = 8; b2.r = 14 + 8 * 1.6; b2.I = 0.5 * b2.mass * b2.r * b2.r; b2.color = '#EF476F';
+        this.addRope(b1.id, b2.id, { type: 'pulley', px, py });
+        break;
+      }
+      case 'two_body': {
+        // Два тела на нити через блок: одно на горизонтальной плоскости
+        this.gravity = true; this.hasFloor = true; this.hasWalls = false;
+        const fY = this._floorY;
+        const px = W * 0.75, py = fY;          // блок у края стола
+        const b1 = this.addBody(W * 0.33, fY - 28, 'box');
+        b1.mass = 5; b1.w = 32 + 5 * 2.4; b1.h = 28 + 5 * 1.8;
+        b1.I = b1.mass * (b1.w * b1.w + b1.h * b1.h) / 12;
+        b1.color = '#9B5DE5'; b1.mu = 0.05;
+        const b2 = this.addBody(px, fY + 130, 'ball');
+        b2.mass = 3; b2.r = 14 + 3 * 1.6; b2.I = 0.5 * b2.mass * b2.r * b2.r; b2.color = '#EF476F';
+        this.addRope(b1.id, b2.id, { type: 'pulley', px, py });
+        break;
+      }
+      case 'spring_bounce': {
+        // Два шара соединены пружиной — колебания по горизонтали
+        this.gravity = false; this.hasFloor = false; this.hasWalls = true;
+        const a = this.addBody(W * 0.3, H * 0.5, 'ball');
+        a.mass = 6; a.r = 14 + 6 * 1.6; a.I = 0.5 * a.mass * a.r * a.r;
+        a.color = '#4CC9F0'; a.pinned = true;
+        const b = this.addBody(W * 0.72, H * 0.5, 'ball');
+        b.mass = 6; b.r = 14 + 6 * 1.6; b.I = 0.5 * b.mass * b.r * b.r;
+        b.color = '#EF476F';
+        this.addSpring(a.id, b.id, 80, null, 2);
+        break;
+      }
+      case 'spring_chain': {
+        // Цепочка тел, связанных пружинами — волна
+        this.gravity = false; this.hasFloor = false; this.hasWalls = true;
+        const n = 5;
+        let prev = null;
+        for (let i = 0; i < n; i++) {
+          const bx = W * (0.12 + i * 0.16), by = H * 0.5;
+          const bd = this.addBody(bx, by, 'ball');
+          bd.mass = 4; bd.r = 14 + 4 * 1.6; bd.I = 0.5 * bd.mass * bd.r * bd.r;
+          bd.color = ForceSandboxSim.COLORS[i % ForceSandboxSim.COLORS.length];
+          if (i === 0) bd.pinned = true;
+          if (prev) this.addSpring(prev.id, bd.id, 100, null, 3);
+          prev = bd;
+        }
+        // Толчок последнего
+        if (prev) prev.vx = -220;
+        break;
+      }
+      case 'pendulum': {
+        // Маятник: закреплённая точка + шар на жёсткой пружине
+        this.gravity = true; this.hasFloor = false; this.hasWalls = true;
+        const anchor = this.addBody(W * 0.5, H * 0.1, 'ball');
+        anchor.mass = 1; anchor.r = 7; anchor.I = 0.5 * anchor.mass * anchor.r * anchor.r;
+        anchor.color = '#FFD166'; anchor.pinned = true; anchor._isAnchor = true;
+        const bob = this.addBody(W * 0.5 + 170, H * 0.1 + 240, 'ball');
+        bob.mass = 6; bob.r = 14 + 6 * 1.6; bob.I = 0.5 * bob.mass * bob.r * bob.r;
+        bob.color = '#9B5DE5';
+        this.addSpring(anchor.id, bob.id, 1800, null, 18);
+        break;
+      }
+      case 'elastic_collision': {
+        // Абсолютно упругое столкновение: m1 = m2, e = 1
+        this.gravity = false; this.hasFloor = false; this.hasWalls = true;
+        const a = this.addBody(W * 0.2, H * 0.5, 'ball');
+        a.mass = 5; a.r = 14 + 5 * 1.6; a.I = 0.5 * a.mass * a.r * a.r;
+        a.vx = 160; a.restitution = 1.0; a.color = '#4CC9F0';
+        const b = this.addBody(W * 0.7, H * 0.5, 'ball');
+        b.mass = 5; b.r = 14 + 5 * 1.6; b.I = 0.5 * b.mass * b.r * b.r;
+        b.restitution = 1.0; b.color = '#EF476F';
+        break;
+      }
+      case 'inelastic_collision': {
+        // Абсолютно неупругое столкновение: e = 0
+        this.gravity = false; this.hasFloor = false; this.hasWalls = true;
+        const a = this.addBody(W * 0.15, H * 0.5, 'ball');
+        a.mass = 8; a.r = 14 + 8 * 1.6; a.I = 0.5 * a.mass * a.r * a.r;
+        a.vx = 180; a.restitution = 0; a.color = '#4CC9F0';
+        const b = this.addBody(W * 0.75, H * 0.5, 'ball');
+        b.mass = 4; b.r = 14 + 4 * 1.6; b.I = 0.5 * b.mass * b.r * b.r;
+        b.vx = -60; b.restitution = 0; b.color = '#EF476F';
+        break;
+      }
+      case 'newton_cradle': {
+        // Колыбель Ньютона: 5 шаров на пружинных подвесах
+        this.gravity = true; this.hasFloor = false; this.hasWalls = true;
+        const n = 5, gap = 30, anchorY = H * 0.08, bobY = H * 0.55;
+        const startX = W * 0.5 - (n - 1) * gap * 0.5;
+        const balls = [];
+        for (let i = 0; i < n; i++) {
+          const ax = startX + i * gap;
+          const anc = this.addBody(ax, anchorY, 'ball');
+          anc.mass = 0.5; anc.r = 5; anc.I = 0.5 * anc.mass * anc.r * anc.r;
+          anc.color = '#FFD166'; anc.pinned = true; anc._isAnchor = true;
+          const bl = this.addBody(ax, bobY, 'ball');
+          bl.mass = 5; bl.r = 14; bl.I = 0.5 * bl.mass * bl.r * bl.r;
+          bl.restitution = 1.0; bl.color = ForceSandboxSim.COLORS[i % 6];
+          this.addSpring(anc.id, bl.id, 2400, null, 6);
+          balls.push(bl);
+        }
+        // Поднять первый шар влево
+        balls[0].x -= 120; balls[0].y -= 30;
+        break;
+      }
+      case 'harmonic_oscillator': {
+        // Простой гармонический осциллятор: масса на пружине
+        this.gravity = false; this.hasFloor = false; this.hasWalls = true;
+        const anc = this.addBody(W * 0.15, H * 0.5, 'ball');
+        anc.mass = 0.5; anc.r = 6; anc.I = 0.5 * anc.mass * anc.r * anc.r;
+        anc.color = '#FFD166'; anc.pinned = true; anc._isAnchor = true;
+        const m = this.addBody(W * 0.65, H * 0.5, 'ball');
+        m.mass = 4; m.r = 14 + 4 * 1.6; m.I = 0.5 * m.mass * m.r * m.r;
+        m.color = '#7BF5A4';
+        this.addSpring(anc.id, m.id, 60, null, 0.5);
+        // Начальное смещение
+        m.x += 80;
+        break;
+      }
+      case 'double_pendulum': {
+        // Двойной маятник (хаотическое движение)
+        this.gravity = true; this.hasFloor = false; this.hasWalls = true;
+        const ax = W * 0.5, ay = H * 0.1;
+        const anc = this.addBody(ax, ay, 'ball');
+        anc.mass = 0.5; anc.r = 6; anc.I = 0.5 * anc.mass * anc.r * anc.r;
+        anc.color = '#FFD166'; anc.pinned = true; anc._isAnchor = true;
+        const m1 = this.addBody(ax + 100, ay + 140, 'ball');
+        m1.mass = 4; m1.r = 14 + 4 * 1.6; m1.I = 0.5 * m1.mass * m1.r * m1.r;
+        m1.color = '#4CC9F0';
+        const m2 = this.addBody(ax + 180, ay + 280, 'ball');
+        m2.mass = 3; m2.r = 14 + 3 * 1.6; m2.I = 0.5 * m2.mass * m2.r * m2.r;
+        m2.color = '#EF476F';
+        // Жёсткие пружины ≈ стержни
+        this.addSpring(anc.id, m1.id, 2200, null, 12);
+        this.addSpring(m1.id, m2.id, 2200, null, 12);
+        break;
+      }
+      case 'coupled_oscillators': {
+        // Связанные осцилляторы: два тела + 3 пружины
+        this.gravity = false; this.hasFloor = false; this.hasWalls = true;
+        const a1 = this.addBody(W * 0.08, H * 0.5, 'ball');
+        a1.mass = 0.5; a1.r = 6; a1.I = 0.5 * a1.mass * a1.r * a1.r;
+        a1.color = '#FFD166'; a1.pinned = true; a1._isAnchor = true;
+        const a2 = this.addBody(W * 0.92, H * 0.5, 'ball');
+        a2.mass = 0.5; a2.r = 6; a2.I = 0.5 * a2.mass * a2.r * a2.r;
+        a2.color = '#FFD166'; a2.pinned = true; a2._isAnchor = true;
+        const m1 = this.addBody(W * 0.33, H * 0.5, 'ball');
+        m1.mass = 5; m1.r = 14 + 5 * 1.6; m1.I = 0.5 * m1.mass * m1.r * m1.r;
+        m1.color = '#4CC9F0';
+        const m2 = this.addBody(W * 0.67, H * 0.5, 'ball');
+        m2.mass = 5; m2.r = 14 + 5 * 1.6; m2.I = 0.5 * m2.mass * m2.r * m2.r;
+        m2.color = '#EF476F';
+        this.addSpring(a1.id, m1.id, 80, null, 1);
+        this.addSpring(m1.id, m2.id, 40, null, 0.5);
+        this.addSpring(m2.id, a2.id, 80, null, 1);
+        // Толчок первого
+        m1.x += 60;
+        break;
+      }
+      case 'stacked_boxes': {
+        // Стопка ящиков: демонстрация нормальных сил
+        this.gravity = true; this.hasFloor = true; this.hasWalls = true; this.floorMu = 0.40;
+        const sizes = [10, 7, 4];
+        for (let i = 0; i < sizes.length; i++) {
+          const mass = sizes[i];
+          const bx = this.addBody(W * 0.45, 0, 'box');
+          bx.mass = mass; bx.w = 32 + mass * 2.4; bx.h = 28 + mass * 1.8;
+          bx.I = bx.mass * (bx.w * bx.w + bx.h * bx.h) / 12;
+          bx.color = ForceSandboxSim.COLORS[i];
+          bx.y = fY - bx.h * 0.5;
+          for (let j = 0; j < i; j++) {
+            const prev = this.bodies[1 + j * 1];  // не считаем правильно, сделаем проще
+          }
+        }
+        // Расставим вручную от пола вверх
+        const boxes = this.bodies;
+        let curY = fY;
+        for (let i = 0; i < boxes.length; i++) {
+          const bx = boxes[i];
+          curY -= bx.h * 0.5;
+          bx.y = curY;
+          curY -= bx.h * 0.5 + 1;
+        }
+        break;
+      }
+      case 'pulley_ramp': {
+        // Ящик на рампе + подвес через блок
+        this.gravity = true; this.hasFloor = true; this.hasWalls = false;
+        this.ramp = true; this.rampAngle = 30; this.rampMu = 0.15;
+        this._calcRampGeom();
+        const rg = this._rampGeom;
+        if (rg) {
+          const bx = this.addBody(0, 0, 'box');
+          bx.mass = 6; bx.w = 32 + 6 * 2.4; bx.h = 28 + 6 * 1.8;
+          bx.I = bx.mass * (bx.w * bx.w + bx.h * bx.h) / 12;
+          bx.color = '#9B5DE5'; bx.mu = 0.15;
+          const rad = Math.abs(bx.w / 2 * rg.nx) + Math.abs(bx.h / 2 * rg.ny);
+          bx.x = rg.x1 + (rg.x2 - rg.x1) * 0.5 + rg.nx * (rad + 2);
+          bx.y = rg.y1 + (rg.y2 - rg.y1) * 0.5 + rg.ny * (rad + 2);
+          // Блок наверху рампы
+          const px = rg.x2, py = rg.y2 - 20;
+          // Подвешенный шар
+          const bl = this.addBody(rg.x2 + 50, rg.y2 + 100, 'ball');
+          bl.mass = 3; bl.r = 14 + 3 * 1.6; bl.I = 0.5 * bl.mass * bl.r * bl.r;
+          bl.color = '#EF476F';
+          this.addRope(bx.id, bl.id, { type: 'pulley', px, py });
+        }
+        break;
+      }
+      case 'circular_motion': {
+        // Круговое движение: шар на пружине вокруг якоря
+        this.gravity = false; this.hasFloor = false; this.hasWalls = true;
+        const anc = this.addBody(W * 0.5, H * 0.45, 'ball');
+        anc.mass = 0.5; anc.r = 6; anc.I = 0.5 * anc.mass * anc.r * anc.r;
+        anc.color = '#FFD166'; anc.pinned = true; anc._isAnchor = true;
+        const m = this.addBody(W * 0.5 + 150, H * 0.45, 'ball');
+        m.mass = 3; m.r = 14 + 3 * 1.6; m.I = 0.5 * m.mass * m.r * m.r;
+        m.color = '#7BF5A4';
+        // Тангенциальная начальная скорость (вверх)
+        m.vy = -180;
+        this.addSpring(anc.id, m.id, 350, null, 2);
+        break;
+      }
+      case 'projectile_angle': {
+        // Запуск под углом: параболическая траектория
+        this.gravity = true; this.hasFloor = true; this.hasWalls = false;
+        const angle = 45 * Math.PI / 180;
+        const v0 = 280;
+        const bl = this.addBody(W * 0.08, fY - 20, 'ball');
+        bl.mass = 3; bl.r = 14 + 3 * 1.6; bl.I = 0.5 * bl.mass * bl.r * bl.r;
+        bl.vx = v0 * Math.cos(angle);
+        bl.vy = -v0 * Math.sin(angle);
+        bl.color = '#9B5DE5';
+        break;
+      }
+    }
+  }
+
+  /* ── Tick ─────────────────────────────────────────────────── */
+
+  _tick(now) {
+    let dt = Math.min((now - this._last) / 1000, 0.05);
+    this._last = now;
+    if (this._paused) { this.draw(); return; }
+    dt *= this.timeScale;
+    this._simTime += dt;
+    this._step(dt);
+    this.draw();
+    if (this.onUpdate) this.onUpdate(this.info());
+  }
+
+  /* ════════════════════════════════════════════════════════════
+     RIGID-BODY HELPERS
+     ════════════════════════════════════════════════════════════ */
+
+  // 4 угла повёрнутого прямоугольника
+  _getCorners(b) {
+    const c = Math.cos(b.angle), s = Math.sin(b.angle);
+    const hw = b.w / 2, hh = b.h / 2;
+    return [
+      { x: b.x + c * (-hw) - s * (-hh), y: b.y + s * (-hw) + c * (-hh) },
+      { x: b.x + c * ( hw) - s * (-hh), y: b.y + s * ( hw) + c * (-hh) },
+      { x: b.x + c * ( hw) - s * ( hh), y: b.y + s * ( hw) + c * ( hh) },
+      { x: b.x + c * (-hw) - s * ( hh), y: b.y + s * (-hw) + c * ( hh) },
+    ];
+  }
+
+  // Скорость точки тела, заданной смещением (rx, ry) от центра масс
+  _velAtPoint(b, rx, ry) {
+    return { x: b.vx - b.omega * ry, y: b.vy + b.omega * rx };
+  }
+
+  // Local-to-world: transform local offset (lx,ly) by body's rotation
+  _localToWorld(b, lx, ly) {
+    if (lx === 0 && ly === 0) return { x: b.x, y: b.y };
+    const c = Math.cos(b.angle), s = Math.sin(b.angle);
+    return { x: b.x + c * lx - s * ly, y: b.y + s * lx + c * ly };
+  }
+
+  // Применить импульс J·(nx,ny) в точке (rx,ry) относительно ЦМ
+  _applyImpulse(b, J, nx, ny, rx, ry) {
+    if (b.pinned) return;
+    b.vx    += J * nx / b.mass;
+    b.vy    += J * ny / b.mass;
+    b.omega += (rx * ny - ry * nx) * J / b.I;   // r × n = torque
+  }
+
+  // Находит точку на OBB, ближайшую к (px, py) (world space)
+  _closestOnBox(b, px, py) {
+    const cos = Math.cos(-b.angle), sin = Math.sin(-b.angle);
+    const dx = px - b.x, dy = py - b.y;
+    const lx = Math.max(-b.w / 2, Math.min(b.w / 2,  cos * dx - sin * dy));
+    const ly = Math.max(-b.h / 2, Math.min(b.h / 2,  sin * dx + cos * dy));
+    const cos2 = Math.cos(b.angle), sin2 = Math.sin(b.angle);
+    return { x: b.x + cos2 * lx - sin2 * ly, y: b.y + sin2 * lx + cos2 * ly };
+  }
+
+  // SAT для двух OBB: возвращает {nx,ny,pen,cx,cy} или null
+  _satTest(a, b) {
+    const ca = this._getCorners(a), cb = this._getCorners(b);
+    const axes = [
+      { x:  Math.cos(a.angle), y:  Math.sin(a.angle) },
+      { x: -Math.sin(a.angle), y:  Math.cos(a.angle) },
+      { x:  Math.cos(b.angle), y:  Math.sin(b.angle) },
+      { x: -Math.sin(b.angle), y:  Math.cos(b.angle) },
+    ];
+    let minPen = Infinity, minAxis = null;
+    for (const ax of axes) {
+      const pA = ca.map(c => c.x * ax.x + c.y * ax.y);
+      const pB = cb.map(c => c.x * ax.x + c.y * ax.y);
+      const minA = Math.min(...pA), maxA = Math.max(...pA);
+      const minB = Math.min(...pB), maxB = Math.max(...pB);
+      const pen = Math.min(maxA, maxB) - Math.max(minA, minB);
+      if (pen <= 0) return null;
+      if (pen < minPen) { minPen = pen; minAxis = { ...ax }; }
+    }
+    // Нормаль от a к b
+    const dab = { x: b.x - a.x, y: b.y - a.y };
+    if (dab.x * minAxis.x + dab.y * minAxis.y < 0) {
+      minAxis.x = -minAxis.x; minAxis.y = -minAxis.y;
+    }
+    // Контактная точка: среднее по углам b внутри a и углам a внутри b
+    const pts = [];
+    for (const c of cb) { if (this._ptInBox(c, a)) pts.push(c); }
+    for (const c of ca) { if (this._ptInBox(c, b)) pts.push(c); }
+    let cx = (a.x + b.x) / 2, cy = (a.y + b.y) / 2;
+    if (pts.length) {
+      cx = pts.reduce((s, p) => s + p.x, 0) / pts.length;
+      cy = pts.reduce((s, p) => s + p.y, 0) / pts.length;
+    }
+    return { nx: minAxis.x, ny: minAxis.y, pen: minPen, cx, cy };
+  }
+
+  _ptInBox(p, box) {
+    const cos = Math.cos(-box.angle), sin = Math.sin(-box.angle);
+    const dx = p.x - box.x, dy = p.y - box.y;
+    return Math.abs(cos * dx - sin * dy) <= box.w / 2 + 0.5 &&
+           Math.abs(sin * dx + cos * dy) <= box.h / 2 + 0.5;
+  }
+
+  /* ════════════════════════════════════════════════════════════
+     PHYSICS STEP  (4 подшага)
+     ════════════════════════════════════════════════════════════ */
+
+  _step(dt) {
+    this._strobeTimer += dt;
+    const sub = ForceSandboxSim.SUB_STEPS;
+    const subDt = dt / sub;
+    for (let i = 0; i < sub; i++) this._subStep(subDt);
+
+    // Стробоскопические следы — один раз за полный кадр
+    if (this._strobeTimer >= 0.12) {
+      this._strobeTimer = 0;
+      for (const b of this.bodies) {
+        if (!this.showTrail || b.pinned) continue;
+        if (Math.hypot(b.vx, b.vy) > 8) {
+          b.trail.push({ x: b.x, y: b.y, a: b.angle });
+          if (b.trail.length > 40) b.trail.shift();
+        }
+      }
+    }
+  }
+
+  _subStep(dt) {
+    const S  = ForceSandboxSim.SCALE;
+    const GV = this.gVal * S;
+
+    // ── Пружинные + верёвочные ускорения ───────────────────────
+    // k[N/m] * ext[px] / mass[kg] = a[px/s²]  (SCALE cancels)
+    const _spAcc = (this.springs.length || this.ropes.length) ? new Map() : null;
+    if (_spAcc) {
+      // Пружины (двусторонние — сжатие и растяжение, с точками крепления)
+      for (const sp of this.springs) {
+        const b1 = this.bodies.find(b => b.id === sp.b1id);
+        const b2 = this.bodies.find(b => b.id === sp.b2id);
+        if (!b1 || !b2) continue;
+        // Мировые точки крепления
+        const p1 = this._localToWorld(b1, sp.lx1, sp.ly1);
+        const p2 = this._localToWorld(b2, sp.lx2, sp.ly2);
+        const dx = p2.x - p1.x, dy = p2.y - p1.y;
+        const dist = Math.hypot(dx, dy);
+        if (dist < 1) continue;
+        const nx = dx / dist, ny = dy / dist;
+        const ext  = dist - sp.L0;
+        // Скорости точек крепления (с учётом вращения)
+        const r1x = p1.x - b1.x, r1y = p1.y - b1.y;
+        const r2x = p2.x - b2.x, r2y = p2.y - b2.y;
+        const v1 = this._velAtPoint(b1, r1x, r1y);
+        const v2 = this._velAtPoint(b2, r2x, r2y);
+        const vRel = (v2.x - v1.x) * nx + (v2.y - v1.y) * ny;
+        const F    = sp.k * ext + sp.damp * vRel;
+        const Fx = F * nx, Fy = F * ny;
+        if (!b1.pinned) {
+          const e = _spAcc.get(b1.id) || { ax: 0, ay: 0, ta: 0 };
+          e.ax += Fx / b1.mass;  e.ay += Fy / b1.mass;
+          e.ta += (r1x * Fy - r1y * Fx) / b1.I;   // момент от нецентральной силы
+          _spAcc.set(b1.id, e);
+        }
+        if (!b2.pinned) {
+          const e = _spAcc.get(b2.id) || { ax: 0, ay: 0, ta: 0 };
+          e.ax -= Fx / b2.mass;  e.ay -= Fy / b2.mass;
+          e.ta -= (r2x * Fy - r2y * Fx) / b2.I;   // момент
+          _spAcc.set(b2.id, e);
+        }
+      }
+      // Верёвки/нити (только растяжение — slack = 0 force)
+      for (const rp of this.ropes) {
+        const b1 = this.bodies.find(b => b.id === rp.b1id);
+        const b2 = this.bodies.find(b => b.id === rp.b2id);
+        if (!b1 || !b2) continue;
+        if (rp.type === 'direct') {
+          const dx = b2.x - b1.x, dy = b2.y - b1.y;
+          const dist = Math.hypot(dx, dy);
+          if (dist < 1) continue;
+          const ext = dist - rp.L0;
+          if (ext <= 0) continue;                         // slack
+          const nx = dx / dist, ny = dy / dist;
+          const vRel = (b2.vx - b1.vx) * nx + (b2.vy - b1.vy) * ny;
+          const T = rp.k * ext + rp.damp * Math.max(0, vRel);
+          if (!b1.pinned) { const e = _spAcc.get(b1.id) || { ax:0, ay:0, ta:0 }; e.ax += T*nx/b1.mass; e.ay += T*ny/b1.mass; _spAcc.set(b1.id, e); }
+          if (!b2.pinned) { const e = _spAcc.get(b2.id) || { ax:0, ay:0, ta:0 }; e.ax -= T*nx/b2.mass; e.ay -= T*ny/b2.mass; _spAcc.set(b2.id, e); }
+        } else {  // pulley
+          const d1x = b1.x - rp.px, d1y = b1.y - rp.py;
+          const r1  = Math.hypot(d1x, d1y);
+          const d2x = b2.x - rp.px, d2y = b2.y - rp.py;
+          const r2  = Math.hypot(d2x, d2y);
+          if (r1 < 1 || r2 < 1) continue;
+          const ext = (r1 + r2) - rp.L0;
+          if (ext <= 0) continue;                         // slack
+          const n1x = d1x/r1, n1y = d1y/r1;             // away from pulley <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> b1
+          const n2x = d2x/r2, n2y = d2y/r2;
+          const vRel = (b1.vx*n1x + b1.vy*n1y) + (b2.vx*n2x + b2.vy*n2y);
+          const T = rp.k * ext + rp.damp * Math.max(0, vRel);
+          if (!b1.pinned) { const e = _spAcc.get(b1.id) || { ax:0, ay:0, ta:0 }; e.ax -= T*n1x/b1.mass; e.ay -= T*n1y/b1.mass; _spAcc.set(b1.id, e); }
+          if (!b2.pinned) { const e = _spAcc.get(b2.id) || { ax:0, ay:0, ta:0 }; e.ax -= T*n2x/b2.mass; e.ay -= T*n2y/b2.mass; _spAcc.set(b2.id, e); }
+        }
+      }
+    }
+
+    for (const b of this.bodies) {
+      if (b.pinned) { b.vx = b.vy = b.omega = 0; continue; }
+      b._onRamp = false;
+
+      // ── Интегрирование сил ──
+      let ax = 0, ay = 0;
+      if (this.gravity) ay += GV;
+      for (const f of b.forces) { ax += f.fx / b.mass; ay += f.fy / b.mass; }
+      let omegaAcc = 0;
+      if (_spAcc) { const sf = _spAcc.get(b.id); if (sf) { ax += sf.ax; ay += sf.ay; omegaAcc += sf.ta; } }
+
+      // Воздушное торможение
+      if (this.airDrag) {
+        const spd = Math.hypot(b.vx, b.vy);
+        if (spd > 1) {
+          const A = b.type === 'box' ? (b.w + b.h) * 0.5 : b.r;
+          const drag = 0.0015 * A * spd * spd;
+          ax -= drag * b.vx / spd / b.mass;
+          ay -= drag * b.vy / spd / b.mass;
+        }
+      }
+
+      // Velocity Verlet — линейное движение
+      b.vx += ax * dt;  b.x += b.vx * dt;
+      b.vy += ay * dt;  b.y += b.vy * dt;
+
+      // Угловое движение: момент от пружин + лёгкое демпфирование (≈7%/с)
+      b.omega += omegaAcc * dt;
+      b.omega *= (1 - 0.07 * dt);
+      b.angle += b.omega * dt;
+
+      // Кэп скорости (защита от туннелирования)
+      const spd = Math.hypot(b.vx, b.vy);
+      if (spd > 1800) { b.vx = b.vx / spd * 1800; b.vy = b.vy / spd * 1800; }
+      b.omega = Math.max(-35, Math.min(35, b.omega));
+
+      // ── Коллизии с поверхностями ──
+      if (this.ramp && this._rampGeom) this._rampCollide(b, dt, GV);
+      this._resolveFloor(b, dt, GV);
+      this._resolveCeiling(b);
+      this._resolveWalls(b);
+    }
+
+    // Коллизии тел друг с другом
+    this._collide();
+
+    // Жёсткий клэмп — гарантия: ни одно тело не уходит за границы
+    if (this.hasFloor) {
+      const fY = this._floorY;
+      for (const b of this.bodies) {
+        if (b.pinned) continue;
+        if (b.type === 'ball') {
+          if (b.y + b.r > fY) { b.y = fY - b.r; if (b.vy > 0) b.vy = 0; }
+        } else {
+          const corners = this._getCorners(b);
+          let maxPen = 0;
+          for (const p of corners) if (p.y - fY > maxPen) maxPen = p.y - fY;
+          if (maxPen > 0) { b.y -= maxPen; if (b.vy > 0) b.vy = 0; }
+        }
+      }
+    }
+  }
+
+  /* ── Пол ─────────────────────────────────────────────────── */
+
+  _resolveFloor(b, dt, GV) {
+    if (!this.hasFloor) return;
+    const S  = ForceSandboxSim.SCALE;
+    const fY = this._floorY;
+
+    if (b.type === 'ball') {
+      const pen = (b.y + b.r) - fY;
+      if (pen <= 0) return;
+      b.y -= pen;
+      const e = b.restitution;
+      if (b.vy > 3) {
+        this._energyLoss += 0.5 * b.mass * b.vy * b.vy * (1 - e * e) / (S * S);
+        b.vy = -b.vy * e;
+      } else { b.vy = 0; }
+
+      // Трение качения: контактная точка = низ шара
+      const rx = 0, ry = b.r;
+      const vCx = b.vx - b.omega * ry;   // скорость точки контакта (горизонт.)
+      if (Math.abs(vCx) > 0.5) {
+        const denomT = 1 / b.mass + ry * ry / b.I;
+        let Jt = -vCx / denomT;
+        const mu = Math.max(b.mu, this.floorMu);
+        const maxJt = mu * b.mass * GV * dt;
+        Jt = Math.sign(Jt) * Math.min(Math.abs(Jt), maxJt);
+        b.vx    += Jt / b.mass;
+        b.omega += (-ry) * Jt / b.I;
+        this._energyLoss += Math.abs(Jt * vCx) / (S * S);
+      }
+      return;
+    }
+
+    // Ящик: многоточечный контакт — усреднение всех углов у пола
+    // (одноточечный контакт всегда брал один угол <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> постоянный крутящий момент)
+    const corners = this._getCorners(b);
+    let maxPen = 0;
+    for (const p of corners) { const dp = p.y - fY; if (dp > maxPen) maxPen = dp; }
+    if (maxPen <= 0) return;
+
+    // Собираем все углы в пределах 1.5px от максимального проникновения
+    let cntX = 0, cntY = 0, cnt = 0;
+    for (const p of corners) {
+      if (p.y - fY >= maxPen - 1.5) { cntX += p.x - b.x; cntY += p.y - b.y; cnt++; }
+    }
+    // Для плоского ящика оба нижних угла попадают <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> rx0 = 0, нет крутящего момента
+    const rx0 = cntX / cnt;
+    const ry0 = cntY / cnt;
+
+    // Полная позиционная коррекция (предотвращает уход под пол)
+    b.y -= maxPen;
+
+    // Скорость угла контакта, нормаль пола = (0, -1)
+    const vC = this._velAtPoint(b, rx0, ry0);
+    const vn = -vC.y;   // dot(vC, (0,-1))
+
+    if (vn < -2) {
+      // Отскок: J = -(1+e)*vn/denom (vn < 0 <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> J > 0 <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> импульс вверх)
+      const e = b.restitution;
+      const rCrossN = -rx0;   // rx*ny - ry*nx = rx0*(-1) - ry0*0
+      const denom = 1 / b.mass + rCrossN * rCrossN / b.I;
+      const J = -(1 + e) * vn / denom;
+      this._energyLoss += 0.5 * b.mass * vn * vn * (1 - e * e) / (denom * S * S);
+      this._applyImpulse(b, J, 0, -1, rx0, ry0);
+    } else if (vn < 0.5) {
+      // Покой: убираем нормальную составляющую (J = -vn/denom <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> kills sinking)
+      const rCrossN = -rx0;
+      const denom = 1 / b.mass + rCrossN * rCrossN / b.I;
+      const J = -vn / denom;
+      this._applyImpulse(b, J, 0, -1, rx0, ry0);
+    }
+
+    // Трение скольжения
+    const vC2  = this._velAtPoint(b, rx0, ry0);
+    const vCxt = vC2.x;
+    if (Math.abs(vCxt) > 0.5) {
+      const mu = Math.max(b.mu, this.floorMu);
+      const N  = b.mass * GV;
+      const rCrossT = -ry0;   // r × t = rx0*0 - ry0*1
+      const denomT = 1 / b.mass + rCrossT * rCrossT / b.I;
+      let Jt = -vCxt / denomT;
+      const maxJt = mu * N * dt;
+      Jt = Math.sign(Jt) * Math.min(Math.abs(Jt), maxJt);
+      this._applyImpulse(b, Jt, 1, 0, rx0, ry0);
+      this._energyLoss += Math.abs(Jt * vCxt) / (S * S);
+    }
+  }
+
+  /* ── Потолок ─────────────────────────────────────────────── */
+
+  _resolveCeiling(b) {
+    if (!this.hasWalls) return;
+    let top;
+    if (b.type === 'ball') { top = b.y - b.r; }
+    else { top = Math.min(...this._getCorners(b).map(c => c.y)); }
+    if (top < 0) {
+      b.y -= top;
+      if (b.vy < 0) { b.vy = Math.abs(b.vy) * b.restitution; b.omega *= -0.5; }
+    }
+  }
+
+  /* ── Стены ───────────────────────────────────────────────── */
+
+  _resolveWalls(b) {
+    if (!this.hasWalls) return;
+    const S = ForceSandboxSim.SCALE;
+    const { W } = this;
+
+    if (b.type === 'ball') {
+      if (b.x - b.r < 0) {
+        b.x = b.r;
+        if (b.vx < 0) { this._energyLoss += 0.5 * b.mass * b.vx * b.vx * (1 - b.restitution * b.restitution) / (S * S); b.vx = Math.abs(b.vx) * b.restitution; }
+      }
+      if (b.x + b.r > W) {
+        b.x = W - b.r;
+        if (b.vx > 0) { this._energyLoss += 0.5 * b.mass * b.vx * b.vx * (1 - b.restitution * b.restitution) / (S * S); b.vx = -Math.abs(b.vx) * b.restitution; }
+      }
+      return;
+    }
+
+    const corners = this._getCorners(b);
+    const leftmost  = corners.reduce((m, c) => c.x < m.x ? c : m, corners[0]);
+    const rightmost = corners.reduce((m, c) => c.x > m.x ? c : m, corners[0]);
+
+    const _wallImpulse = (corner, nx, ny, penFix) => {
+      const rx = corner.x - b.x, ry = corner.y - b.y;
+      b.x -= penFix * nx;   // коррекция
+      const vC = this._velAtPoint(b, rx, ry);
+      const vn = vC.x * nx + vC.y * ny;
+      if (vn < -1) {
+        const e = b.restitution;
+        const rCN = rx * ny - ry * nx;
+        const denom = 1 / b.mass + rCN * rCN / b.I;
+        const J = -(1 + e) * vn / denom;
+        this._energyLoss += 0.5 * b.mass * vn * vn * (1 - e * e) / (denom * S * S);
+        this._applyImpulse(b, J, nx, ny, rx, ry);
+        // Трение о стену (вертикальное)
+        const vCt = vC.y;
+        if (Math.abs(vCt) > 0.5) {
+          const ty = Math.sign(vCt);
+          const rCT = rx * ty - ry * 0;
+          const domT = 1 / b.mass + rCT * rCT / b.I;
+          let Jt = -vCt / domT;
+          Jt = Math.sign(Jt) * Math.min(Math.abs(Jt), 0.3 * Math.abs(J));
+          this._applyImpulse(b, Jt, 0, ty, rx, ry);
+        }
+      } else if (vn < 0) {
+        const rCN = rx * ny - ry * nx;
+        const denom = 1 / b.mass + rCN * rCN / b.I;
+        this._applyImpulse(b, -vn / denom, nx, ny, rx, ry);
+      }
+    };
+
+    if (leftmost.x < 0)  _wallImpulse(leftmost,  1, 0,  leftmost.x);
+    if (rightmost.x > W) _wallImpulse(rightmost, -1, 0, W - rightmost.x);
+  }
+
+  /* ── Рампа с вращением ───────────────────────────────────── */
+
+  _rampCollide(b, dt, GV) {
+    const rg = this._rampGeom;
+    if (!rg) return;
+    const S  = ForceSandboxSim.SCALE;
+    const dx = rg.x2 - rg.x1, dy = rg.y2 - rg.y1;
+
+    let contactX, contactY, pen;
+
+    const lenSq = rg.len * rg.len;
+
+    if (b.type === 'ball') {
+      const tRaw = ((b.x - rg.x1) * dx + (b.y - rg.y1) * dy) / lenSq;
+      // Вышел за пределы рампы — отдать полу/потолку
+      if (tRaw < -0.05 || tRaw > 1.05) { b._onRamp = false; return; }
+      const t = Math.max(0, Math.min(1, tRaw));
+      const px = rg.x1 + t * dx, py = rg.y1 + t * dy;
+      const dist = (b.x - px) * rg.nx + (b.y - py) * rg.ny;
+      if (dist >= b.r || dist < -b.r) { b._onRamp = false; return; }
+      pen = b.r - dist;
+      contactX = px; contactY = py;
+      b._rampT = tRaw;
+    } else {
+      // Проверяем, не вышел ли центр масс за пределы рампы
+      const tCOM = ((b.x - rg.x1) * dx + (b.y - rg.y1) * dy) / lenSq;
+      if (tCOM < -0.15 || tCOM > 1.15) { b._onRamp = false; return; }
+
+      // Ящик: ищем угол с минимальным signed distance (максимальным проникновением)
+      const corners = this._getCorners(b);
+      let minDist = Infinity, minCorner = null, minTRaw = 0;
+      for (const c of corners) {
+        const tRaw = ((c.x - rg.x1) * dx + (c.y - rg.y1) * dy) / lenSq;
+        const t = Math.max(0, Math.min(1, tRaw));
+        const px = rg.x1 + t * dx, py = rg.y1 + t * dy;
+        const dist = (c.x - px) * rg.nx + (c.y - py) * rg.ny;
+        if (dist < minDist) { minDist = dist; minCorner = { ...c }; contactX = px; contactY = py; minTRaw = tRaw; }
+      }
+      if (!minCorner || minDist >= 0) { b._onRamp = false; return; }
+      pen = -minDist;
+      if (pen > 30) { b._onRamp = false; return; }
+      b._rampT = minTRaw;
+    }
+
+    if (pen <= 0) { b._onRamp = false; return; }
+
+    // Полная коррекция позиции
+    b.x += rg.nx * pen;
+    b.y += rg.ny * pen;
+
+    // Смещение точки контакта от ЦМ (b.x/b.y уже скорректированы выше)
+    const rx = contactX - b.x;
+    const ry = contactY - b.y;
+
+    const vC = this._velAtPoint(b, rx, ry);
+    const vn = vC.x * rg.nx + vC.y * rg.ny;
+
+    if (vn < -1) {
+      // Отскок от рампы
+      const e = b.restitution * 0.45;
+      const rCN = rx * rg.ny - ry * rg.nx;
+      const denom = 1 / b.mass + rCN * rCN / b.I;
+      const J = -(1 + e) * vn / denom;
+      this._energyLoss += 0.5 * b.mass * vn * vn * (1 - e * e) / (denom * S * S);
+      this._applyImpulse(b, J, rg.nx, rg.ny, rx, ry);
+
+      // Трение при отскоке
+      const vCt = { x: vC.x - vn * rg.nx, y: vC.y - vn * rg.ny };
+      const vtLen = Math.hypot(vCt.x, vCt.y);
+      if (vtLen > 0.5) {
+        const tx = vCt.x / vtLen, ty = vCt.y / vtLen;
+        const rCT = rx * ty - ry * tx;
+        const domT = 1 / b.mass + rCT * rCT / b.I;
+        let Jt = -vtLen / domT;
+        Jt = Math.sign(Jt) * Math.min(Math.abs(Jt), this.rampMu * Math.abs(J));
+        this._applyImpulse(b, Jt, tx, ty, rx, ry);
+      }
+    } else {
+      // На поверхности рампы
+      const rCN = rx * rg.ny - ry * rg.nx;
+      const denom = 1 / b.mass + rCN * rCN / b.I;
+      const J_n = -vn / denom;
+      this._applyImpulse(b, J_n, rg.nx, rg.ny, rx, ry);
+
+      // Трение по рампе (кинетическое / статическое)
+      const vC2 = this._velAtPoint(b, rx, ry);
+      const tx = dx / rg.len, ty = dy / rg.len;
+      const vt = vC2.x * tx + vC2.y * ty;
+      const N = b.mass * GV * rg.cos;
+      const gPar = b.mass * GV * rg.sin;
+      const fFrMax = this.rampMu * N;
+      const rCT = rx * ty - ry * tx;
+      const domT = 1 / b.mass + rCT * rCT / b.I;
+
+      if (gPar > fFrMax) {
+        let Jt = -vt / domT;
+        const maxJt = this.rampMu * N * dt;
+        Jt = Math.sign(Jt) * Math.min(Math.abs(Jt), maxJt);
+        this._applyImpulse(b, Jt, tx, ty, rx, ry);
+        this._energyLoss += Math.abs(Jt * vt) / (S * S);
+      } else {
+        // Статика: обнуляем касательную скорость в точке контакта
+        const Jt = -vt / domT;
+        this._applyImpulse(b, Jt, tx, ty, rx, ry);
+      }
+
+      // Качение без проскальзывания для шаров:
+      // v_contact = v_cm + omega × r должна быть 0
+      // Для шара на рампе: v_t + omega * R = 0 <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> omega = -v_t / R
+      if (b.type === 'ball' && fFrMax >= gPar) {
+        const vC3 = this._velAtPoint(b, rx, ry);
+        const vtC = vC3.x * tx + vC3.y * ty;
+        if (Math.abs(vtC) > 0.3) {
+          // Enforce no-slip: impulse to match omega = -v_tangential / R
+          const rCT2 = rx * ty - ry * tx;
+          const dom2 = 1 / b.mass + rCT2 * rCT2 / b.I;
+          const Jfix = -vtC / dom2;
+          this._applyImpulse(b, Jfix, tx, ty, rx, ry);
+        }
+      }
+    }
+
+    b._onRamp = true;
+  }
+
+  /* ════════════════════════════════════════════════════════════
+     КОЛЛИЗИИ ТЕЛО–ТЕЛО
+     ════════════════════════════════════════════════════════════ */
+
+  _collide() {
+    const bodies = this.bodies;
+    for (let i = 0; i < bodies.length; i++) {
+      for (let j = i + 1; j < bodies.length; j++) {
+        const a = bodies[i], b = bodies[j];
+        if (a.pinned && b.pinned) continue;
+        if      (a.type === 'ball' && b.type === 'ball') this._colBallBall(a, b);
+        else if (a.type === 'ball')                       this._colBallBox(a, b);
+        else if (b.type === 'ball')                       this._colBallBox(b, a);
+        else                                              this._colBoxBox(a, b);
+      }
+    }
+  }
+
+  _applyContactImpulse(a, b, nx, ny, cx, cy) {
+    const S = ForceSandboxSim.SCALE;
+    const rAx = cx - a.x, rAy = cy - a.y;
+    const rBx = cx - b.x, rBy = cy - b.y;
+    const vCA = this._velAtPoint(a, rAx, rAy);
+    const vCB = this._velAtPoint(b, rBx, rBy);
+    const dvx = vCA.x - vCB.x, dvy = vCA.y - vCB.y;
+    const dvn = dvx * nx + dvy * ny;
+    if (dvn <= 0) return;
+
+    const e = Math.min(a.restitution, b.restitution);
+    const rACN = rAx * ny - rAy * nx, rBCN = rBx * ny - rBy * nx;
+    const denom = (a.pinned ? 0 : 1 / a.mass + rACN * rACN / a.I)
+                + (b.pinned ? 0 : 1 / b.mass + rBCN * rBCN / b.I);
+    if (denom < 1e-9) return;
+    const J = (1 + e) * dvn / denom;
+    const keBefore = 0.5 * a.mass * (a.vx * a.vx + a.vy * a.vy) + 0.5 * b.mass * (b.vx * b.vx + b.vy * b.vy);
+    if (!a.pinned) this._applyImpulse(a, -J, nx, ny, rAx, rAy);
+    if (!b.pinned) this._applyImpulse(b,  J, nx, ny, rBx, rBy);
+    const keAfter = 0.5 * a.mass * (a.vx * a.vx + a.vy * a.vy) + 0.5 * b.mass * (b.vx * b.vx + b.vy * b.vy);
+    this._energyLoss += Math.max(0, keBefore - keAfter) / (S * S);
+
+    // Трение между телами
+    const vCA2 = this._velAtPoint(a, rAx, rAy);
+    const vCB2 = this._velAtPoint(b, rBx, rBy);
+    const dv2x = vCA2.x - vCB2.x, dv2y = vCA2.y - vCB2.y;
+    const dvt = dv2x * (-ny) + dv2y * nx;   // касательная (perpendicular to n)
+    const tx = -ny, ty = nx;
+    const rACT = rAx * ty - rAy * tx, rBCT = rBx * ty - rBy * tx;
+    const domT = (a.pinned ? 0 : 1 / a.mass + rACT * rACT / a.I)
+               + (b.pinned ? 0 : 1 / b.mass + rBCT * rBCT / b.I);
+    if (domT > 1e-9 && Math.abs(dvt) > 0.5) {
+      const mu = 0.35 * (a.mu + b.mu);
+      let Jt = dvt / domT;
+      Jt = Math.sign(Jt) * Math.min(Math.abs(Jt), mu * J);
+      if (!a.pinned) this._applyImpulse(a, -Jt, tx, ty, rAx, rAy);
+      if (!b.pinned) this._applyImpulse(b,  Jt, tx, ty, rBx, rBy);
+    }
+  }
+
+  _colBallBall(a, b) {
+    const dx = b.x - a.x, dy = b.y - a.y;
+    const dist = Math.hypot(dx, dy);
+    const minD = a.r + b.r;
+    if (dist >= minD || dist < 0.01) return;
+    const nx = dx / dist, ny = dy / dist;
+    const ov = minD - dist;
+    const totM = (a.pinned ? 0 : a.mass) + (b.pinned ? 0 : b.mass);
+    if (!a.pinned) { a.x -= nx * ov * (b.pinned ? 1 : b.mass / totM); a.y -= ny * ov * (b.pinned ? 1 : b.mass / totM); }
+    if (!b.pinned) { b.x += nx * ov * (a.pinned ? 1 : a.mass / totM); b.y += ny * ov * (a.pinned ? 1 : a.mass / totM); }
+    this._applyContactImpulse(a, b, nx, ny, a.x + nx * a.r, a.y + ny * a.r);
+  }
+
+  _colBallBox(ball, box) {
+    const cp = this._closestOnBox(box, ball.x, ball.y);
+    const dx = ball.x - cp.x, dy = ball.y - cp.y;
+    const dist = Math.hypot(dx, dy);
+    if (dist >= ball.r || dist < 0.001) return;
+    const nx = dx / dist, ny = dy / dist;
+    const pen = ball.r - dist;
+    const totM = (ball.pinned ? 0 : ball.mass) + (box.pinned ? 0 : box.mass);
+    if (!ball.pinned) { ball.x += nx * pen * (box.pinned ? 1 : box.mass / totM); ball.y += ny * pen * (box.pinned ? 1 : box.mass / totM); }
+    if (!box.pinned)  { box.x  -= nx * pen * (ball.pinned ? 1 : ball.mass / totM); box.y  -= ny * pen * (ball.pinned ? 1 : ball.mass / totM); }
+    this._applyContactImpulse(ball, box, nx, ny, cp.x, cp.y);
+  }
+
+  _colBoxBox(a, b) {
+    const res = this._satTest(a, b);
+    if (!res) return;
+    const { nx, ny, pen, cx, cy } = res;
+    const totM = (a.pinned ? 0 : a.mass) + (b.pinned ? 0 : b.mass);
+    if (!a.pinned) { a.x -= nx * pen * (b.pinned ? 1 : b.mass / totM); a.y -= ny * pen * (b.pinned ? 1 : b.mass / totM); }
+    if (!b.pinned) { b.x += nx * pen * (a.pinned ? 1 : a.mass / totM); b.y += ny * pen * (a.pinned ? 1 : a.mass / totM); }
+    this._applyContactImpulse(a, b, nx, ny, cx, cy);
+  }
+
+  /* ════════════════════════════════════════════════════════════
+     EVENTS
+     ════════════════════════════════════════════════════════════ */
+
+  _bindEvents() {
+    const c   = this.canvas;
+    const sig = { signal: this._evAbort.signal };
+    c.addEventListener('mousedown',   e => this._onDown(e), sig);
+    c.addEventListener('mousemove',   e => this._onMove(e), sig);
+    c.addEventListener('mouseup',     e => this._onUp(e),   sig);
+    c.addEventListener('contextmenu', e => { e.preventDefault(); this._onRightClick(e); }, sig);
+    c.addEventListener('dblclick',    e => this._onDblClick(e), sig);
+    c.addEventListener('mouseleave',  () => { this._ghostPos = null; this._hovered = null; }, sig);
+    c.addEventListener('touchstart', e => {
+      e.preventDefault();
+      const t = e.touches[0];
+      this._onDown({ clientX: t.clientX, clientY: t.clientY, button: 0, shiftKey: false });
+    }, { passive: false, signal: this._evAbort.signal });
+    c.addEventListener('touchmove', e => {
+      e.preventDefault();
+      const t = e.touches[0];
+      this._onMove({ clientX: t.clientX, clientY: t.clientY });
+    }, { passive: false, signal: this._evAbort.signal });
+    c.addEventListener('touchend', e => { e.preventDefault(); this._onUp({}); },
+      { passive: false, signal: this._evAbort.signal });
+  }
+
+  destroy() {
+    this.stop();
+    this._evAbort.abort();
+  }
+
+  _pos(e)  { const r = this.canvas.getBoundingClientRect(); return { x: e.clientX - r.left, y: e.clientY - r.top }; }
+
+  _bodyAt(x, y) {
+    for (let i = this.bodies.length - 1; i >= 0; i--) {
+      const b = this.bodies[i];
+      if (b.type === 'ball') {
+        if (Math.hypot(x - b.x, y - b.y) < b.r + 4) return b;
+      } else {
+        if (this._ptInBox({ x, y }, b)) return b;
+      }
+    }
+    return null;
+  }
+
+  _onDown(e) {
+    const { x, y } = this._pos(e);
+    const body = this._bodyAt(x, y);
+    if (this.tool === 'erase') { if (body) this.removeBody(body.id); return; }
+    if (this.tool === 'spring') {
+      if (body) {
+        if (this._springStart === null) {
+          this._springStart = body.id;
+        } else if (this._springStart !== body.id) {
+          this.addSpring(this._springStart, body.id);
+          this._springStart = null;
+        }
+      } else {
+        this._springStart = null;
+      }
+      return;
+    }
+    if (this.tool === 'rope') {
+      if (body) {
+        if (this._ropeStart === null) {
+          this._ropeStart = body.id;
+        } else if (this._ropeStart !== body.id) {
+          this.addRope(this._ropeStart, body.id, { type: 'direct' });
+          this._ropeStart = null;
+        }
+      } else {
+        this._ropeStart = null;
+      }
+      return;
+    }
+    if (this.tool === 'anchor') {
+      // Создать небольшой закреплённый якорь (для пружин/верёвок)
+      const a = this.addBody(x, y, 'ball');
+      a.mass = 0.5; a.r = 6; a.I = 0.5 * a.mass * a.r * a.r;
+      a.color = '#FFD166'; a.pinned = true; a._isAnchor = true;
+      return;
+    }
+    if (body) {
+      this._selected = body.id;
+      this._drag = { bodyId: body.id, startX: x, startY: y, curX: x, curY: y,
+        type: (e.shiftKey || this.forceMode === 'impulse') ? 'impulse' : 'force' };
+      return;
+    }
+    this.addBody(x, y, this.tool);
+  }
+
+  _onMove(e) {
+    const { x, y } = this._pos(e);
+    this._ghostPos = { x, y };
+    if (this._drag) { this._drag.curX = x; this._drag.curY = y; return; }
+    const body = this._bodyAt(x, y);
+    this._hovered = body ? body.id : null;
+  }
+
+  _onUp(e) {
+    if (!this._drag) return;
+    const d = this._drag;
+    const body = this.bodies.find(b => b.id === d.bodyId);
+    this._drag = null;
+    if (!body) return;
+    const dx = d.curX - d.startX, dy = d.curY - d.startY;
+    const len = Math.hypot(dx, dy);
+    if (len < 8) return;
+    const S = ForceSandboxSim.SCALE;
+    const forceMag = len * 2.5;
+    if (d.type === 'impulse') {
+      body.vx += (dx / len) * forceMag * 1.8;
+      body.vy += (dy / len) * forceMag * 1.8;
+    } else {
+      const fx = (dx / len) * forceMag * S, fy = (dy / len) * forceMag * S;
+      const idx = body.forces.length + 1;
+      const fColors = ['#FFD166','#4CC9F0','#7BF5A4','#FF6B35','#EF476F','#9B5DE5'];
+      body.forces.push({ fx, fy, label: `F${idx}`, color: fColors[(idx - 1) % fColors.length] });
+    }
+  }
+
+  _onRightClick(e) {
+    const { x, y } = this._pos(e);
+    const body = this._bodyAt(x, y);
+    if (body) {
+      if (body.forces.length > 0) body.forces = [];
+      else this.removeBody(body.id);
+    }
+  }
+
+  _onDblClick(e) {
+    const { x, y } = this._pos(e);
+    const body = this._bodyAt(x, y);
+    if (body) {
+      body.pinned = !body.pinned;
+      if (body.pinned) { body.vx = body.vy = body.omega = 0; }
+    }
+  }
+
+  /* ════════════════════════════════════════════════════════════
+     RENDERING
+     ════════════════════════════════════════════════════════════ */
+
+  draw() {
+    const ctx = this.ctx;
+    const { W, H, _floorY: fY } = this;
+    ctx.clearRect(0, 0, W, H);
+    this._drawBg(ctx, W, H);
+    if (this.hasFloor)  this._drawFloor(ctx, W, fY);
+    if (this.hasWalls)  this._drawWalls(ctx, W, H, fY);
+    if (this.ramp)      this._drawRamp(ctx);
+    if (this.showTrail) this._drawTrails(ctx);
+    this._drawRopes(ctx);
+    this._drawSprings(ctx);
+    this._drawBodies(ctx);
+    if (this.showForces)   this._drawForceArrows(ctx);
+    if (this.showVelocity) this._drawVelocities(ctx);
+    if (this._drag)        this._drawDragArrow(ctx);
+    if (this.showFBD && this._selected !== null) this._drawFBD(ctx);
+    if (this.showEnergy)   this._drawEnergyBar(ctx);
+    if (this._ghostPos && !this._drag && !this._hovered && this.tool !== 'erase') this._drawGhost(ctx);
+    if (this.bodies.length === 0) this._drawHint(ctx);
+  }
+
+  _drawBg(ctx, W, H) {
+    const bg = ctx.createRadialGradient(W / 2, H * 0.3, 0, W / 2, H / 2, W * 0.82);
+    bg.addColorStop(0, '#0d1320'); bg.addColorStop(1, '#050810');
+    ctx.fillStyle = bg; ctx.fillRect(0, 0, W, H);
+    ctx.fillStyle = 'rgba(255,255,255,0.04)';
+    for (let x = 20; x < W; x += 40)
+      for (let y = 20; y < H; y += 40)
+        { ctx.beginPath(); ctx.arc(x, y, 1.2, 0, Math.PI * 2); ctx.fill(); }
+  }
+
+  _drawFloor(ctx, W, fY) {
+    const gg = ctx.createLinearGradient(0, fY, 0, fY + 42);
+    gg.addColorStop(0, '#1c1f2d'); gg.addColorStop(1, '#0c101a');
+    ctx.fillStyle = gg; ctx.fillRect(0, fY, W, 55);
+    ctx.strokeStyle = 'rgba(155,93,229,0.42)'; ctx.lineWidth = 2;
+    ctx.beginPath(); ctx.moveTo(0, fY); ctx.lineTo(W, fY); ctx.stroke();
+    ctx.strokeStyle = 'rgba(255,255,255,0.04)'; ctx.lineWidth = 1;
+    for (let x = 0; x < W; x += 22)
+      { ctx.beginPath(); ctx.moveTo(x, fY); ctx.lineTo(x + 12, fY + 12); ctx.stroke(); }
+    ctx.font = '10px monospace'; ctx.fillStyle = 'rgba(185,210,255,0.35)';
+    ctx.fillText(`μ = ${this.floorMu.toFixed(2)}`, 8, fY + 18);
+  }
+
+  _drawWalls(ctx, W, H, fY) {
+    ctx.strokeStyle = 'rgba(76,201,240,0.18)'; ctx.lineWidth = 2;
+    ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(0, fY); ctx.stroke();
+    ctx.beginPath(); ctx.moveTo(W, 0); ctx.lineTo(W, fY); ctx.stroke();
+  }
+
+  _drawTrails(ctx) {
+    for (const b of this.bodies) {
+      if (b.trail.length < 2) continue;
+      for (let i = 0; i < b.trail.length; i++) {
+        const alpha = (i / b.trail.length) * 0.28;
+        const t = b.trail[i];
+        ctx.save(); ctx.globalAlpha = alpha;
+        if (b.type === 'ball') {
+          ctx.beginPath(); ctx.arc(t.x, t.y, b.r * 0.8, 0, Math.PI * 2);
+          ctx.strokeStyle = b.color; ctx.lineWidth = 1.5; ctx.stroke();
+        } else {
+          ctx.save();
+          ctx.translate(t.x, t.y);
+          ctx.rotate(t.a || 0);
+          _fsb_rrect(ctx, -b.w * 0.42, -b.h * 0.42, b.w * 0.84, b.h * 0.84, 5);
+          ctx.strokeStyle = b.color; ctx.lineWidth = 1.5; ctx.stroke();
+          ctx.restore();
+        }
+        ctx.restore();
+      }
+    }
+  }
+
+  _drawRopes(ctx) {
+    const hasPreview = this.tool === 'rope' && this._ropeStart !== null && this._ghostPos;
+    if (!this.ropes.length && !hasPreview) return;
+    ctx.save();
+    ctx.lineCap = 'round'; ctx.lineJoin = 'round';
+
+    for (const rp of this.ropes) {
+      const b1 = this.bodies.find(b => b.id === rp.b1id);
+      const b2 = this.bodies.find(b => b.id === rp.b2id);
+      if (!b1 || !b2) continue;
+
+      // Compute tension for color coding
+      let taut = false, T = 0;
+      if (rp.type === 'direct') {
+        const ext = Math.hypot(b2.x - b1.x, b2.y - b1.y) - rp.L0;
+        taut = ext > 0.5; T = taut ? rp.k * ext : 0;
+      } else {
+        const r1  = Math.hypot(b1.x - rp.px, b1.y - rp.py);
+        const r2  = Math.hypot(b2.x - rp.px, b2.y - rp.py);
+        const ext = (r1 + r2) - rp.L0;
+        taut = ext > 0.5; T = taut ? rp.k * ext : 0;
+      }
+      const alpha = taut ? 0.9 : 0.4;
+      const ropeColor = taut ? `rgba(255,209,102,${alpha})` : `rgba(180,180,180,${alpha})`;
+
+      ctx.strokeStyle = ropeColor;
+      ctx.lineWidth = taut ? 2.5 : 1.5;
+      ctx.shadowColor = taut ? '#FFD166' : 'transparent';
+      ctx.shadowBlur  = taut ? 5 : 0;
+
+      if (rp.type === 'direct') {
+        ctx.beginPath();
+        ctx.moveTo(b1.x, b1.y);
+        ctx.lineTo(b2.x, b2.y);
+        ctx.stroke();
+      } else {
+        // Pulley: draw rope segments + pulley wheel
+        ctx.beginPath();
+        ctx.moveTo(b1.x, b1.y);
+        ctx.lineTo(rp.px, rp.py);
+        ctx.lineTo(b2.x, b2.y);
+        ctx.stroke();
+        ctx.shadowBlur = 0;
+        // Pulley wheel
+        ctx.beginPath();
+        ctx.arc(rp.px, rp.py, 12, 0, Math.PI * 2);
+        ctx.strokeStyle = '#FFD166'; ctx.lineWidth = 2; ctx.stroke();
+        // Axle
+        ctx.beginPath();
+        ctx.arc(rp.px, rp.py, 3, 0, Math.PI * 2);
+        ctx.fillStyle = '#FFD166'; ctx.fill();
+        // Pulley mount to ceiling
+        ctx.strokeStyle = 'rgba(255,209,102,0.5)'; ctx.lineWidth = 2;
+        ctx.beginPath();
+        ctx.moveTo(rp.px, rp.py - 12);
+        ctx.lineTo(rp.px, rp.py - 28);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.moveTo(rp.px - 14, rp.py - 28);
+        ctx.lineTo(rp.px + 14, rp.py - 28);
+        ctx.stroke();
+      }
+
+      // Tension label
+      if (taut && T > 1) {
+        const S = ForceSandboxSim.SCALE;
+        const TN = (T / S).toFixed(0);
+        const mx = rp.type === 'pulley'
+          ? (b1.x + b2.x) / 2
+          : (b1.x + b2.x) / 2;
+        const my = rp.type === 'pulley'
+          ? rp.py + 18
+          : (b1.y + b2.y) / 2 - 12;
+        ctx.shadowBlur = 0;
+        ctx.font = '9px monospace'; ctx.fillStyle = '#FFD166';
+        ctx.textAlign = 'center';
+        ctx.fillText(`T≈${TN}Н`, mx, my);
+        ctx.textAlign = 'left';
+      }
+    }
+
+    // Preview: dashed line from first body to cursor
+    if (hasPreview) {
+      const b = this.bodies.find(b => b.id === this._ropeStart);
+      if (b) {
+        ctx.shadowBlur = 0;
+        ctx.strokeStyle = 'rgba(255,209,102,0.55)';
+        ctx.lineWidth = 1.5;
+        ctx.setLineDash([6, 5]);
+        ctx.beginPath();
+        ctx.moveTo(b.x, b.y);
+        ctx.lineTo(this._ghostPos.x, this._ghostPos.y);
+        ctx.stroke();
+        ctx.setLineDash([]);
+        const br = b.type === 'ball' ? b.r + 5 : Math.hypot(b.w, b.h) * 0.5 + 5;
+        ctx.beginPath(); ctx.arc(b.x, b.y, br, 0, Math.PI * 2);
+        ctx.strokeStyle = 'rgba(255,209,102,0.5)'; ctx.lineWidth = 2; ctx.stroke();
+      }
+    }
+    ctx.restore();
+  }
+
+  _drawSprings(ctx) {
+    const hasPreview = this.tool === 'spring' && this._springStart !== null && this._ghostPos;
+    if (!this.springs.length && !hasPreview) return;
+    ctx.save();
+    ctx.lineCap = 'round'; ctx.lineJoin = 'round';
+
+    for (const sp of this.springs) {
+      const b1 = this.bodies.find(b => b.id === sp.b1id);
+      const b2 = this.bodies.find(b => b.id === sp.b2id);
+      if (!b1 || !b2) continue;
+      const p1 = this._localToWorld(b1, sp.lx1, sp.ly1);
+      const p2 = this._localToWorld(b2, sp.lx2, sp.ly2);
+      const x1 = p1.x, y1 = p1.y, x2 = p2.x, y2 = p2.y;
+      const dx = x2 - x1, dy = y2 - y1;
+      const dist = Math.hypot(dx, dy);
+      if (dist < 4) continue;
+      const ux = dx / dist, uy = dy / dist;
+      const px = -uy, py = ux;
+
+      // Color: cyan = relaxed, red = stretched, blue = compressed
+      const strain = Math.max(-1.5, Math.min(1.5, (dist - sp.L0) / Math.max(sp.L0, 1)));
+      let cr, cg, cb;
+      if (strain >= 0) {
+        cr = Math.round(6   + strain / 1.5 * 239);
+        cg = Math.round(214 - strain / 1.5 * 214);
+        cb = Math.round(224 - strain / 1.5 * 100);
+      } else {
+        cr = 6; cg = Math.round(214 + Math.abs(strain) / 1.5 * 41); cb = 224;
+      }
+      ctx.strokeStyle = `rgba(${cr},${cg},${cb},0.9)`;
+      ctx.lineWidth = 2;
+      ctx.shadowColor = `rgb(${cr},${cg},${cb})`;
+      ctx.shadowBlur = 6;
+
+      // Zigzag coil rendering
+      const COILS   = 8;
+      const headLen = Math.min(dist * 0.08, 16);
+      const zigDist = dist - 2 * headLen;
+      const amp     = Math.max(3, Math.min(14, 10 / (1 + Math.abs(strain) * 3)));
+
+      ctx.beginPath();
+      ctx.moveTo(x1, y1);
+      ctx.lineTo(x1 + ux * headLen, y1 + uy * headLen);
+      for (let i = 0; i < COILS * 2; i++) {
+        const frac  = (i + 0.5) / (COILS * 2);
+        const along = headLen + frac * zigDist;
+        const side  = (i % 2 === 0) ? amp : -amp;
+        ctx.lineTo(x1 + ux * along + px * side, y1 + uy * along + py * side);
+      }
+      ctx.lineTo(x2 - ux * headLen, y2 - uy * headLen);
+      ctx.lineTo(x2, y2);
+      ctx.stroke();
+
+      // Label
+      ctx.shadowBlur = 0;
+      ctx.font = '9px monospace';
+      ctx.fillStyle = `rgba(${cr},${cg},${cb},0.85)`;
+      ctx.textAlign = 'center';
+      const extM = (dist - sp.L0) / ForceSandboxSim.SCALE;
+      ctx.fillText(`k=${sp.k} · ${extM >= 0 ? '+' : ''}${extM.toFixed(2)}м`,
+        (x1 + x2) / 2 - py * 18, (y1 + y2) / 2 + px * 18);
+      ctx.textAlign = 'left';
+    }
+
+    // Preview: dashed line from first body to cursor
+    if (hasPreview) {
+      const b = this.bodies.find(b => b.id === this._springStart);
+      if (b) {
+        ctx.shadowBlur = 0;
+        ctx.strokeStyle = 'rgba(6,214,224,0.6)';
+        ctx.lineWidth = 1.5;
+        ctx.setLineDash([6, 5]);
+        ctx.beginPath();
+        ctx.moveTo(b.x, b.y);
+        ctx.lineTo(this._ghostPos.x, this._ghostPos.y);
+        ctx.stroke();
+        ctx.setLineDash([]);
+        // Highlight start body
+        const br = b.type === 'ball' ? b.r + 5 : Math.hypot(b.w, b.h) * 0.5 + 5;
+        ctx.beginPath(); ctx.arc(b.x, b.y, br, 0, Math.PI * 2);
+        ctx.strokeStyle = 'rgba(6,214,224,0.5)'; ctx.lineWidth = 2; ctx.stroke();
+      }
+    }
+    ctx.restore();
+  }
+
+  _drawBodies(ctx) {
+    for (const b of this.bodies) {
+      const isHover = b.id === this._hovered;
+      const isSel   = b.id === this._selected;
+      ctx.save();
+      ctx.shadowColor = b._onRamp ? '#06D6E0' : b.color;
+      ctx.shadowBlur  = isHover ? 22 : isSel ? 18 : b._onRamp ? 14 : 10;
+
+      if (b._isAnchor) {
+        // Якорь: маленький ромб с крестиком
+        ctx.shadowBlur = isHover ? 16 : 8;
+        ctx.beginPath();
+        ctx.moveTo(b.x, b.y - 7); ctx.lineTo(b.x + 7, b.y);
+        ctx.lineTo(b.x, b.y + 7); ctx.lineTo(b.x - 7, b.y); ctx.closePath();
+        ctx.fillStyle = b.color; ctx.fill();
+        ctx.strokeStyle = 'rgba(255,255,255,0.6)'; ctx.lineWidth = 1.5; ctx.stroke();
+        ctx.restore();
+        continue;
+      }
+      if (b.type === 'ball') {
+        ctx.beginPath(); ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2);
+        const bg = ctx.createRadialGradient(b.x - b.r * 0.3, b.y - b.r * 0.3, 0, b.x, b.y, b.r);
+        bg.addColorStop(0, _fsb_lighten(b.color, 55)); bg.addColorStop(1, b.color);
+        ctx.fillStyle = bg; ctx.fill();
+        if (isHover || isSel) { ctx.strokeStyle = '#fff'; ctx.lineWidth = 2; ctx.stroke(); }
+        // Индикатор вращения: линия от центра шара
+        if (Math.abs(b.omega) > 0.3) {
+          ctx.shadowBlur = 0;
+          ctx.strokeStyle = 'rgba(255,255,255,0.5)';
+          ctx.lineWidth = 1.5;
+          ctx.beginPath();
+          ctx.moveTo(b.x, b.y);
+          ctx.lineTo(b.x + Math.cos(b.angle) * b.r * 0.72, b.y + Math.sin(b.angle) * b.r * 0.72);
+          ctx.stroke();
+        }
+      } else {
+        // Рисуем повёрнутый прямоугольник
+        ctx.save();
+        ctx.translate(b.x, b.y);
+        ctx.rotate(b.angle);
+        _fsb_rrect(ctx, -b.w / 2, -b.h / 2, b.w, b.h, 7);
+        const bg = ctx.createLinearGradient(-b.w / 2, -b.h / 2, b.w / 2, b.h / 2);
+        bg.addColorStop(0, _fsb_lighten(b.color, 40)); bg.addColorStop(1, b.color);
+        ctx.fillStyle = bg; ctx.fill();
+        if (isHover || isSel) { ctx.strokeStyle = '#fff'; ctx.lineWidth = 2; ctx.stroke(); }
+        // Точка-индикатор вращения
+        ctx.shadowBlur = 0;
+        ctx.beginPath(); ctx.arc(b.w * 0.28, 0, 4, 0, Math.PI * 2);
+        ctx.fillStyle = 'rgba(255,255,255,0.35)'; ctx.fill();
+        ctx.restore();
+        ctx.shadowBlur = 0;
+      }
+
+      ctx.shadowBlur = 0;
+      ctx.font = 'bold 10px monospace'; ctx.fillStyle = '#fff';
+      ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+      ctx.fillText(`${b.mass}кг`, b.x, b.y);
+      ctx.textAlign = 'left'; ctx.textBaseline = 'alphabetic';
+
+      if (b.pinned) {
+        ctx.font = '14px sans-serif'; ctx.fillStyle = '#FFD166';
+        ctx.textAlign = 'center';
+        const py = b.type === 'ball' ? b.y - b.r - 10 : b.y - b.h / 2 - 10;
+        ctx.fillText('\u25C9', b.x, py);
+        ctx.textAlign = 'left';
+      }
+      ctx.restore();
+    }
+  }
+
+  _drawForceArrows(ctx) {
+    const S  = ForceSandboxSim.SCALE;
+    const GV = this.gVal * S;
+    for (const b of this.bodies) {
+      if (b._onRamp && this.ramp) {
+        this._drawRampForceDecomp(ctx, b);
+        for (const f of b.forces) {
+          const fMag = Math.hypot(f.fx, f.fy) / S;
+          const fLen = Math.min(fMag * 2.5, 120);
+          if (fLen < 3) continue;
+          this._arrow(ctx, b.x, b.y, b.x + Math.cos(Math.atan2(f.fy, f.fx)) * fLen,
+            b.y + Math.sin(Math.atan2(f.fy, f.fx)) * fLen, f.color, f.label + '=' + fMag.toFixed(0) + 'Н', 2.2);
+        }
+        continue;
+      }
+      const ancY = b.y;
+      if (this.gravity) {
+        const mg = b.mass * this.gVal;
+        this._arrow(ctx, b.x, ancY, b.x, ancY + Math.min(mg * 2.5, 80), 'rgba(180,180,180,0.45)', 'mg', 1.5);
+      }
+      if (this.hasFloor && this.gravity) {
+        const bottom = b.type === 'box' ? b.y + b.h / 2 : b.y + b.r;
+        if (Math.abs(bottom - this._floorY) < 5 && Math.abs(b.vy) < 8) {
+          const nLen = Math.min(b.mass * this.gVal * 2.5, 80);
+          this._arrow(ctx, b.x, ancY, b.x, ancY - nLen, 'rgba(180,180,180,0.45)', 'N', 1.5);
+        }
+      }
+      for (const f of b.forces) {
+        const fMag = Math.hypot(f.fx, f.fy) / S;
+        const fLen = Math.min(fMag * 2.5, 120);
+        if (fLen < 3) continue;
+        const dir = Math.atan2(f.fy, f.fx);
+        this._arrow(ctx, b.x, ancY, b.x + Math.cos(dir) * fLen, ancY + Math.sin(dir) * fLen,
+          f.color, f.label + '=' + fMag.toFixed(0) + 'Н', 2.2);
+      }
+      if (this.hasFloor && this.gravity) {
+        const bottom = b.type === 'box' ? b.y + b.h / 2 : b.y + b.r;
+        if (Math.abs(bottom - this._floorY) < 5 && Math.abs(b.vx) > 5) {
+          const fFr = Math.max(b.mu, this.floorMu) * b.mass * this.gVal;
+          this._arrow(ctx, b.x, ancY, b.x - Math.sign(b.vx) * Math.min(fFr * 2.5, 70), ancY,
+            'rgba(239,71,111,0.7)', `Fтр=${fFr.toFixed(0)}`, 1.8);
+        }
+      }
+    }
+  }
+
+  _drawVelocities(ctx) {
+    const S = ForceSandboxSim.SCALE;
+    for (const b of this.bodies) {
+      const spd    = Math.hypot(b.vx, b.vy);
+      const hasV   = spd > 10;
+      const hasOmg = Math.abs(b.omega) > 0.15;
+      if (!hasV && !hasOmg) continue;
+
+      const topY  = b.type === 'box' ? b.y - b.h / 2 - 6 : b.y - b.r - 6;
+      const halfW = b.type === 'box' ? b.w / 2 : b.r;
+
+      if (hasV) {
+        // Вектор скорости v — жёлтый
+        this._arrow(ctx, b.x, topY, b.x + b.vx * 0.22, topY + b.vy * 0.22,
+          '#FFD166', `v=${(spd / S).toFixed(1)}м/с`, 2);
+
+        // Вектор импульса p = mv — малиновый, смещён вниз от v
+        // Длина пропорциональна m: тяжёлое тело <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> длиннее стрелка
+        const pMag   = b.mass * spd / S;                           // кг·м/с
+        const pScale = Math.min(0.65, 0.22 * b.mass / 5);
+        this._arrow(ctx, b.x, topY + 14,
+          b.x + b.vx * pScale, topY + 14 + b.vy * pScale,
+          '#EF476F', `p=${pMag.toFixed(1)}кг·м/с`, 1.8);
+      }
+
+      // Угловая скорость ω — фиолетовая метка справа от тела
+      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 labX = b.x + halfW + 7;
+        const labY = b.type === 'box' ? b.y - b.h * 0.12 : b.y - b.r * 0.15;
+        ctx.save();
+        ctx.font = 'bold 9px monospace';
+        ctx.fillStyle = '#9B5DE5';
+        ctx.shadowColor = '#9B5DE5'; ctx.shadowBlur = 4;
+        ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
+        ctx.fillText(`${sym} ω=${Math.abs(b.omega).toFixed(1)}рад/с`, labX, labY);
+        ctx.shadowBlur = 0; ctx.textBaseline = 'alphabetic';
+        ctx.restore();
+      }
+    }
+  }
+
+  _drawDragArrow(ctx) {
+    const d = this._drag; if (!d) return;
+    const body = this.bodies.find(b => b.id === d.bodyId); if (!body) return;
+    const dx = d.curX - d.startX, dy = d.curY - d.startY;
+    if (Math.hypot(dx, dy) < 5) return;
+    ctx.save(); ctx.setLineDash([5, 5]);
+    this._arrow(ctx, body.x, body.y, body.x + dx, body.y + dy,
+      d.type === 'impulse' ? '#FF6B35' : '#FFD166', d.type === 'impulse' ? 'импульс' : 'сила', 2.5);
+    ctx.setLineDash([]); ctx.restore();
+  }
+
+  _drawFBD(ctx) {
+    const body = this.bodies.find(b => b.id === this._selected); if (!body) return;
+    const S = ForceSandboxSim.SCALE;
+    const cx = this.W - 120, cy = 80, r = 55;
+    _fsb_rrect(ctx, cx - r - 10, cy - r - 10, (r + 10) * 2, (r + 10) * 2 + 28, 8);
+    ctx.fillStyle = 'rgba(0,0,0,0.55)'; ctx.fill();
+    ctx.strokeStyle = 'rgba(255,255,255,0.12)'; ctx.lineWidth = 1; ctx.stroke();
+    ctx.font = 'bold 9px monospace'; ctx.fillStyle = 'rgba(185,210,255,0.7)';
+    ctx.textAlign = 'center'; ctx.fillText('Диаграмма сил', cx, cy - r - 2); ctx.textAlign = 'left';
+    ctx.beginPath(); ctx.arc(cx, cy, 4, 0, Math.PI * 2); ctx.fillStyle = body.color; ctx.fill();
+    const forces = [];
+    if (this.gravity) forces.push({ fx: 0, fy: body.mass * this.gVal, label: 'mg', color: 'rgba(180,180,180,0.7)' });
+    const bottom = body.type === 'box' ? body.y + body.h / 2 : body.y + body.r;
+    if (this.hasFloor && Math.abs(bottom - this._floorY) < 5 && Math.abs(body.vy) < 8)
+      forces.push({ fx: 0, fy: -body.mass * this.gVal, label: 'N', color: 'rgba(180,180,180,0.7)' });
+    for (const f of body.forces) forces.push({ fx: f.fx / S, fy: f.fy / S, label: f.label, color: f.color });
+    const maxF = Math.max(...forces.map(f => Math.hypot(f.fx, f.fy)), 1);
+    for (const f of forces) {
+      const len = (Math.hypot(f.fx, f.fy) / maxF) * (r - 8);
+      if (len < 2) continue;
+      const dir = Math.atan2(f.fy, f.fx);
+      this._arrow(ctx, cx, cy, cx + Math.cos(dir) * len, cy + Math.sin(dir) * len, f.color, f.label, 1.8);
+    }
+    let sfx = 0, sfy = 0;
+    for (const f of forces) { sfx += f.fx; sfy += f.fy; }
+    const smag = Math.hypot(sfx, sfy);
+    if (smag > 0.5) {
+      const len = (smag / maxF) * (r - 8);
+      ctx.save(); ctx.setLineDash([3, 3]);
+      this._arrow(ctx, cx, cy, cx + Math.cos(Math.atan2(sfy, sfx)) * len, cy + Math.sin(Math.atan2(sfy, sfx)) * len,
+        '#fff', `ΣF=${smag.toFixed(0)}`, 2);
+      ctx.setLineDash([]); ctx.restore();
+    }
+    // ω и p под диаграммой
+    const spd = Math.hypot(body.vx, body.vy);
+    ctx.font = '8px monospace'; ctx.textAlign = 'center';
+    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>';
+      ctx.fillStyle = '#9B5DE5';
+      ctx.fillText(`${sym} ω=${Math.abs(body.omega).toFixed(2)} рад/с`, cx, cy + r + 22);
+    }
+    ctx.textAlign = 'left';
+  }
+
+  _drawEnergyBar(ctx) {
+    if (!this.bodies.length) return;
+    const S = ForceSandboxSim.SCALE, fY = this._floorY;
+    let KE = 0, PE = 0;
+    for (const b of this.bodies) {
+      const v = Math.hypot(b.vx, b.vy) / S;
+      KE += 0.5 * b.mass * v * v;
+      // Вращательная KE: ½Iω² (I в px², переводим в м²)
+      KE += 0.5 * (b.I / (S * S)) * b.omega * b.omega;
+      if (this.gravity && this.hasFloor) {
+        const bot = b.type === 'box' ? b.y + b.h / 2 : b.y + b.r;
+        PE += b.mass * this.gVal * Math.max(0, fY - bot) / S;
+      }
+    }
+    const total = KE + PE + this._energyLoss;
+    if (total < 0.01) return;
+    const bx = 12, by = 12, bw = 110, bh = 52;
+    _fsb_rrect(ctx, bx, by, bw, bh, 6);
+    ctx.fillStyle = 'rgba(0,0,0,0.5)'; ctx.fill();
+    ctx.strokeStyle = 'rgba(255,255,255,0.1)'; ctx.lineWidth = 1; ctx.stroke();
+    ctx.font = 'bold 8px monospace'; ctx.fillStyle = 'rgba(185,210,255,0.55)';
+    ctx.fillText('Энергия', bx + 4, by + 10);
+    const barX = bx + 4, barY = by + 16, barW = bw - 8, barH = 8;
+    const keW = (KE / total) * barW, peW = (PE / total) * barW;
+    const lossW = barW - keW - peW;
+    ctx.fillStyle = '#4CC9F0'; if (keW > 0) { _fsb_rrect(ctx, barX, barY, Math.max(keW, 1), barH, 2); ctx.fill(); }
+    ctx.fillStyle = '#7BF5A4'; if (peW > 0) { _fsb_rrect(ctx, barX + keW, barY, Math.max(peW, 1), barH, 2); ctx.fill(); }
+    ctx.fillStyle = '#EF476F'; if (lossW > 0.5) { _fsb_rrect(ctx, barX + keW + peW, barY, Math.max(lossW, 1), barH, 2); ctx.fill(); }
+    ctx.font = '8px monospace';
+    ctx.fillStyle = '#4CC9F0'; ctx.fillText(`KE=${KE.toFixed(1)}Дж`, bx + 4, barY + barH + 10);
+    ctx.fillStyle = '#7BF5A4'; ctx.fillText(`PE=${PE.toFixed(1)}`, bx + 4, barY + barH + 20);
+    ctx.fillStyle = '#EF476F'; ctx.fillText(`Q=${this._energyLoss.toFixed(1)}`, bx + 56, barY + barH + 10);
+  }
+
+  /* ── Рампа ───────────────────────────────────────────────── */
+
+  _drawRamp(ctx) {
+    const rg = this._rampGeom; if (!rg) return;
+    const { _floorY: fY } = this;
+    const tx = (rg.x2 - rg.x1) / rg.len, ty = (rg.y2 - rg.y1) / rg.len;
+    ctx.save();
+
+    // Заливка
+    ctx.beginPath();
+    ctx.moveTo(rg.x1, rg.y1); ctx.lineTo(rg.x2, rg.y2); ctx.lineTo(rg.x2, fY); ctx.closePath();
+    const gg = ctx.createLinearGradient(rg.x1, fY, rg.x2, rg.y2);
+    gg.addColorStop(0, 'rgba(6,214,224,0.07)'); gg.addColorStop(1, 'rgba(6,214,224,0.02)');
+    ctx.fillStyle = gg; ctx.fill();
+
+    // Линия поверхности
+    ctx.strokeStyle = '#06D6E0'; ctx.lineWidth = 2.5;
+    ctx.shadowColor = '#06D6E0'; ctx.shadowBlur = 8;
+    ctx.beginPath(); ctx.moveTo(rg.x1, rg.y1); ctx.lineTo(rg.x2, rg.y2); ctx.stroke();
+    ctx.shadowBlur = 0;
+
+    // Вспомогательные линии
+    ctx.strokeStyle = 'rgba(6,214,224,0.25)'; ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.moveTo(rg.x1, fY); ctx.lineTo(rg.x2, fY); ctx.stroke();
+    ctx.beginPath(); ctx.moveTo(rg.x2, rg.y2); ctx.lineTo(rg.x2, fY); ctx.stroke();
+
+    // Дуга угла
+    ctx.strokeStyle = '#FFD166'; ctx.lineWidth = 1.5;
+    ctx.beginPath(); ctx.arc(rg.x1, rg.y1, 35, -rg.angle, 0); ctx.stroke();
+    ctx.font = 'bold 11px monospace'; ctx.fillStyle = '#FFD166';
+    ctx.textAlign = 'center';
+    ctx.fillText(`α=${this.rampAngle}°`,
+      rg.x1 + 35 * 1.15 * Math.cos(-rg.angle / 2),
+      rg.y1 + 35 * 1.15 * Math.sin(-rg.angle / 2));
+    ctx.textAlign = 'left';
+
+    // Прямой угол у основания
+    const rm = 12;
+    ctx.strokeStyle = 'rgba(255,255,255,0.25)'; ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.moveTo(rg.x2 - rm, fY); ctx.lineTo(rg.x2 - rm, fY - rm); ctx.lineTo(rg.x2, fY - rm); ctx.stroke();
+
+    // Штриховка (В твёрдый материал — противоположно нормали)
+    ctx.strokeStyle = 'rgba(6,214,224,0.10)'; ctx.lineWidth = 1;
+    for (let d = 20; d < rg.len; d += 22) {
+      const sx = rg.x1 + tx * d, sy = rg.y1 + ty * d;
+      ctx.beginPath(); ctx.moveTo(sx, sy); ctx.lineTo(sx - rg.nx * 11, sy - rg.ny * 11); ctx.stroke();
+    }
+
+    // μ-метка над поверхностью
+    ctx.font = '10px monospace'; ctx.fillStyle = 'rgba(6,214,224,0.55)';
+    ctx.save();
+    ctx.translate(rg.x1 + tx * rg.len * 0.5 + rg.nx * 20, rg.y1 + ty * rg.len * 0.5 + rg.ny * 20);
+    ctx.rotate(Math.atan2(ty, tx));
+    ctx.fillText(`μ = ${this.rampMu.toFixed(2)}`, 0, 0);
+    ctx.restore();
+
+    // Свечение в точках контакта
+    for (const b of this.bodies) {
+      if (!b._onRamp || b._rampT === undefined) continue;
+      const cx = rg.x1 + tx * rg.len * b._rampT;
+      const cy = rg.y1 + ty * rg.len * b._rampT;
+      const grd = ctx.createRadialGradient(cx, cy, 0, cx, cy, 20);
+      grd.addColorStop(0, 'rgba(6,214,224,0.38)'); grd.addColorStop(1, 'rgba(6,214,224,0)');
+      ctx.beginPath(); ctx.arc(cx, cy, 20, 0, Math.PI * 2); ctx.fillStyle = grd; ctx.fill();
+    }
+    ctx.restore();
+  }
+
+  /* ── Разложение сил на рампе ─────────────────────────────── */
+
+  _drawRampForceDecomp(ctx, b) {
+    if (!this.showDecomp || !b._onRamp || !this._rampGeom) return;
+    const rg = this._rampGeom;
+    const mg = b.mass * this.gVal;
+    const tx = (rg.x2 - rg.x1) / rg.len, ty = (rg.y2 - rg.y1) / rg.len;
+    const { nx, ny } = rg;
+    const mgPar  = mg * rg.sin, mgPerp = mg * rg.cos;
+    const mgLen  = Math.min(mg * 3, 90);
+    const parLen = Math.min(mgPar * 3, 70), perpLen = Math.min(mgPerp * 3, 70);
+
+    this._arrow(ctx, b.x, b.y, b.x, b.y + mgLen, 'rgba(255,255,255,0.5)', `mg=${mg.toFixed(0)}Н`, 2);
+    this._arrow(ctx, b.x, b.y, b.x - tx * parLen, b.y - ty * parLen, '#EF476F', `mg·sinα=${mgPar.toFixed(0)}`, 1.8);
+    this._arrow(ctx, b.x, b.y, b.x - nx * perpLen, b.y - ny * perpLen, '#4CC9F0', `mg·cosα=${mgPerp.toFixed(0)}`, 1.8);
+    this._arrow(ctx, b.x, b.y, b.x + nx * perpLen, b.y + ny * perpLen, 'rgba(180,180,180,0.5)', `N=${mgPerp.toFixed(0)}`, 1.5);
+
+    const fFr = this.rampMu * mgPerp;
+    const vt = b.vx * tx + b.vy * ty;
+    if (Math.abs(vt) > 0.5 || mgPar > fFr + 0.1) {
+      const frDir = Math.abs(vt) > 0.5 ? -Math.sign(vt) : 1;
+      this._arrow(ctx, b.x, b.y, b.x + tx * frDir * Math.min(fFr * 3, 55), b.y + ty * frDir * Math.min(fFr * 3, 55),
+        '#FF6B35', `Fтр=${fFr.toFixed(0)}`, 1.8);
+    }
+    const netPar = mgPar - (Math.abs(vt) > 0.5 || mgPar > fFr ? fFr : mgPar);
+    if (netPar > 0.5) {
+      ctx.font = 'bold 10px monospace'; ctx.fillStyle = '#7BF5A4';
+      ctx.textAlign = 'center';
+      ctx.fillText(`a = ${(netPar / b.mass).toFixed(1)} м/с²`, b.x,
+        b.y - (b.type === 'box' ? b.h / 2 : b.r) - 20);
+      ctx.textAlign = 'left';
+    }
+  }
+
+  _drawGhost(ctx) {
+    if (!this._ghostPos) return;
+    const { x, y } = this._ghostPos;
+    ctx.save(); ctx.globalAlpha = 0.25;
+    if (this.tool === 'ball') {
+      ctx.beginPath(); ctx.arc(x, y, 14 + this.newMass * 1.6, 0, Math.PI * 2);
+      ctx.strokeStyle = '#4CC9F0'; ctx.lineWidth = 2; ctx.stroke();
+    } else {
+      const w = 32 + this.newMass * 2.4, h = 28 + this.newMass * 1.8;
+      _fsb_rrect(ctx, x - w / 2, y - h / 2, w, h, 7);
+      ctx.strokeStyle = '#9B5DE5'; ctx.lineWidth = 2; ctx.stroke();
+    }
+    ctx.restore();
+  }
+
+  _drawHint(ctx) {
+    ctx.save();
+    ctx.font = '14px sans-serif'; ctx.fillStyle = 'rgba(185,210,255,0.3)';
+    ctx.textAlign = 'center';
+    ctx.fillText('Кликни — создай тело. Тяни от тела — приложи силу.', this.W / 2, this.H * 0.45);
+    ctx.fillText('Shift+drag = импульс · ПКМ = удалить · DblClick = закрепить', this.W / 2, this.H * 0.45 + 22);
+    ctx.fillText('Инструмент «Пружина» — кликни два тела, чтобы соединить.', this.W / 2, this.H * 0.45 + 44);
+    ctx.textAlign = 'left';
+    ctx.restore();
+  }
+
+  /* ── Arrow helper ────────────────────────────────────────── */
+
+  _arrow(ctx, x1, y1, x2, y2, color, label, lw) {
+    const dx = x2 - x1, dy = y2 - y1;
+    const len = Math.hypot(dx, dy);
+    if (len < 4) return;
+    const ux = dx / len, uy = dy / len;
+    const hw = 5, hl = 10;
+    ctx.save();
+    ctx.strokeStyle = color; ctx.lineWidth = lw || 2;
+    ctx.shadowColor = color; ctx.shadowBlur = 4;
+    ctx.lineCap = 'round';
+    ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2 - ux * hl, y2 - uy * hl); ctx.stroke();
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(x2, y2);
+    ctx.lineTo(x2 - ux * hl - uy * hw, y2 - uy * hl + ux * hw);
+    ctx.lineTo(x2 - ux * hl + uy * hw, y2 - uy * hl - ux * hw);
+    ctx.closePath(); ctx.fill();
+    if (label) {
+      ctx.shadowBlur = 0; ctx.font = '9px monospace'; ctx.fillStyle = color;
+      ctx.textAlign = 'center';
+      ctx.fillText(label, (x1 + x2) / 2 - uy * 12, (y1 + y2) / 2 + ux * 12);
+      ctx.textAlign = 'left';
+    }
+    ctx.restore();
+  }
+
+  /* ── Info ────────────────────────────────────────────────── */
+
+  info() {
+    const S = ForceSandboxSim.SCALE, fY = this._floorY;
+    let KE = 0, PE = 0;
+    for (const b of this.bodies) {
+      const v = Math.hypot(b.vx, b.vy) / S;
+      KE += 0.5 * b.mass * v * v + 0.5 * (b.I / (S * S)) * b.omega * b.omega;
+      if (this.gravity && this.hasFloor) {
+        const bot = b.type === 'box' ? b.y + b.h / 2 : b.y + b.r;
+        PE += b.mass * this.gVal * Math.max(0, fY - bot) / S;
+      }
+    }
+    let netF = '—';
+    if (this._selected !== null) {
+      const body = this.bodies.find(b => b.id === this._selected);
+      if (body) {
+        let fx = 0, fy = 0;
+        if (this.gravity) fy += body.mass * this.gVal;
+        for (const f of body.forces) { fx += f.fx / S; fy += f.fy / S; }
+        netF = Math.hypot(fx, fy).toFixed(1) + ' Н';
+      }
+    }
+    return { bodies: this.bodies.length, springs: this.springs.length, ropes: this.ropes.length,
+             KE: KE.toFixed(1), PE: PE.toFixed(1),
+             loss: this._energyLoss.toFixed(1), netF, time: this._simTime.toFixed(1) };
+  }
+}
+
+/* ── Utilities ───────────────────────────────────────────────── */
+
+function _fsb_rrect(ctx, x, y, w, h, r) {
+  if (w <= 0 || h <= 0) return;
+  r = Math.min(r, w / 2, h / 2);
+  ctx.beginPath();
+  ctx.moveTo(x + r, y);
+  ctx.arcTo(x + w, y,     x + w, y + h, r);
+  ctx.arcTo(x + w, y + h, x,     y + h, r);
+  ctx.arcTo(x,     y + h, x,     y,     r);
+  ctx.arcTo(x,     y,     x + w, y,     r);
+  ctx.closePath();
+}
+
+function _fsb_lighten(hex, d) {
+  const n = parseInt(hex.slice(1), 16);
+  const c = v => Math.max(0, Math.min(255, v));
+  return `rgb(${c((n >> 16) + d)},${c(((n >> 8) & 255) + d)},${c((n & 255) + d)})`;
+}
diff --git a/frontend/js/labs/gas.js b/frontend/js/labs/gas.js
new file mode 100644
index 0000000..84c5546
--- /dev/null
+++ b/frontend/js/labs/gas.js
@@ -0,0 +1,462 @@
+/**
+ * GasSim v2 — Ideal Gas simulation (PV=nRT, Maxwell-Boltzmann distribution)
+ * v2: hover inspector, velocity vectors, movable piston, v_mp/v_rms markers.
+ */
+class GasSim {
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.ctx = canvas.getContext('2d');
+    this.W = 0;
+    this.H = 0;
+    this.particles = [];
+    this.N = 80;
+    this.T = 1.0;
+    this._wallImpulse = 0;
+    this._pressureSmooth = 0;
+    this._raf = null;
+    this._updateTick = 0;
+    this.onUpdate = null;
+    this._loop = this._loop.bind(this);
+
+    // v2
+    this._showVectors = false;
+    this._pistonFrac  = 1.0;   // fraction of W — right wall position
+    this._hover       = null;  // hovered particle
+    this._pistonDrag  = false;
+
+    canvas.addEventListener('mousemove',  e => this._onMouseMove(e));
+    canvas.addEventListener('mouseleave', () => { this._hover = null; this._pistonDrag = false; });
+    canvas.addEventListener('mousedown',  e => this._onMouseDown(e));
+    canvas.addEventListener('mouseup',    () => { this._pistonDrag = false; });
+  }
+
+  // ── canvas coordinate helper ────────────────────────────────────────────────
+  _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),
+    };
+  }
+
+  _onMouseDown(e) {
+    const { x } = this._cp(e);
+    const px = this.W * this._pistonFrac;
+    if (Math.abs(x - px) < 16) this._pistonDrag = true;
+  }
+
+  _onMouseMove(e) {
+    const { x, y } = this._cp(e);
+
+    if (this._pistonDrag) {
+      this.setPiston(x / this.W);
+      return;
+    }
+
+    // nearest particle within 28px
+    let best = null, bestD = 28;
+    for (const p of this.particles) {
+      const d = Math.hypot(p.x - x, p.y - y);
+      if (d < bestD) { bestD = d; best = p; }
+    }
+    this._hover = best;
+  }
+
+  // ── public API ──────────────────────────────────────────────────────────────
+  fit() {
+    this.W = this.canvas.offsetWidth;
+    this.H = this.canvas.offsetHeight;
+    this.canvas.width  = this.W * devicePixelRatio;
+    this.canvas.height = this.H * devicePixelRatio;
+    this.ctx.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0);
+    this.reset();
+  }
+
+  reset() {
+    this.particles = [];
+    const px = this.W * this._pistonFrac;
+    for (let i = 0; i < this.N; i++) {
+      const a = Math.random() * Math.PI * 2;
+      const s = this._maxwellSpeed();
+      this.particles.push({
+        x:  20 + Math.random() * (px - 40),
+        y:  20 + Math.random() * (this.H - 40),
+        vx: s * Math.cos(a),
+        vy: s * Math.sin(a),
+        r:  5,
+      });
+    }
+    this._wallImpulse    = 0;
+    this._pressureSmooth = 0;
+    this._updateTick     = 0;
+    this._hover          = null;
+  }
+
+  setN(n)  { this.N = n; this.reset(); }
+
+  setT(t) {
+    const oldT = this.T;
+    if (oldT <= 0) { this.T = t; this.reset(); return; }
+    const f = Math.sqrt(t / oldT);
+    for (const p of this.particles) { p.vx *= f; p.vy *= f; }
+    this.T = t;
+  }
+
+  setPiston(frac) {
+    this._pistonFrac = Math.max(0.3, Math.min(1.0, frac));
+    const px = this.W * this._pistonFrac;
+    for (const p of this.particles) {
+      if (p.x + p.r > px) { p.x = px - p.r; if (p.vx > 0) p.vx = -p.vx; }
+    }
+  }
+
+  toggleVectors() { this._showVectors = !this._showVectors; }
+
+  start() { if (!this._raf) this._raf = requestAnimationFrame(this._loop); }
+  stop()  { cancelAnimationFrame(this._raf); this._raf = null; }
+
+  // ── simulation ──────────────────────────────────────────────────────────────
+  _loop() {
+    this._step();
+    this._step();
+    this.draw();
+    this._raf = requestAnimationFrame(this._loop);
+  }
+
+  _maxwellSpeed() {
+    const u1 = Math.max(1e-10, Math.random());
+    const sigma = this.T * 60;
+    return Math.abs(Math.sqrt(-2 * Math.log(u1)) * Math.cos(Math.PI * 2 * Math.random()) * sigma + sigma);
+  }
+
+  _step() {
+    const { W, H, particles } = this;
+    const px = W * this._pistonFrac;
+
+    for (const p of particles) { p.x += p.vx; p.y += p.vy; }
+
+    for (const p of particles) {
+      if (p.x < p.r) {
+        p.x = p.r; p.vx = Math.abs(p.vx);
+        this._wallImpulse += 2 * Math.abs(p.vx);
+      } else if (p.x > px - p.r) {
+        p.x = px - p.r; p.vx = -Math.abs(p.vx);
+        this._wallImpulse += 2 * Math.abs(p.vx);
+      }
+      if (p.y < p.r) {
+        p.y = p.r; p.vy = Math.abs(p.vy);
+        this._wallImpulse += 2 * Math.abs(p.vy);
+      } else if (p.y > H - p.r) {
+        p.y = H - p.r; p.vy = -Math.abs(p.vy);
+        this._wallImpulse += 2 * Math.abs(p.vy);
+      }
+    }
+
+    // Spatial grid collision
+    const cell = 14, cols = Math.ceil(W / cell), rows = Math.ceil(H / cell);
+    const grid = new Map();
+    const key  = (cx, cy) => cy * cols + cx;
+
+    for (let i = 0; i < particles.length; i++) {
+      const p = particles[i];
+      const k = key(Math.floor(p.x / cell), Math.floor(p.y / cell));
+      if (!grid.has(k)) grid.set(k, []);
+      grid.get(k).push(i);
+    }
+
+    const checked = new Set();
+    for (let i = 0; i < particles.length; i++) {
+      const p  = particles[i];
+      const cx = Math.floor(p.x / cell);
+      const cy = Math.floor(p.y / cell);
+      for (let dy = -1; dy <= 1; dy++) for (let dx = -1; dx <= 1; dx++) {
+        const nx = cx + dx, ny = cy + dy;
+        if (nx < 0 || ny < 0 || nx >= cols || ny >= rows) continue;
+        const cell2 = grid.get(key(nx, ny));
+        if (!cell2) continue;
+        for (const j of cell2) {
+          if (j <= i) continue;
+          const pk = i * 100000 + j;
+          if (checked.has(pk)) continue;
+          checked.add(pk);
+          const q = particles[j];
+          const ddx = q.x - p.x, ddy = q.y - p.y;
+          const d2 = ddx * ddx + ddy * ddy;
+          const md = p.r + q.r;
+          if (d2 < md * md && d2 > 0) {
+            const d = Math.sqrt(d2), nx2 = ddx / d, ny2 = ddy / d;
+            const dvn = (q.vx - p.vx) * nx2 + (q.vy - p.vy) * ny2;
+            if (dvn >= 0) continue;
+            p.vx += dvn * nx2; p.vy += dvn * ny2;
+            q.vx -= dvn * nx2; q.vy -= dvn * ny2;
+            const ov = (md - d) / 2;
+            p.x -= ov * nx2; p.y -= ov * ny2;
+            q.x += ov * nx2; q.y += ov * ny2;
+          }
+        }
+      }
+    }
+
+    this._pressureSmooth = this._pressureSmooth * 0.92 + this._wallImpulse * 0.08;
+    this._wallImpulse = 0;
+
+    if (++this._updateTick % 30 === 0 && this.onUpdate) this.onUpdate(this.info());
+  }
+
+  info() {
+    const speeds   = this.particles.map(p => Math.hypot(p.vx, p.vy));
+    const avgSpeed = speeds.length ? speeds.reduce((a, b) => a + b) / speeds.length : 0;
+    const pf = this._pistonFrac;
+    const P  = this._pressureSmooth / (2 * (this.W * pf + this.H)) * 100;
+    const V  = (this.W * pf * this.H) / 10000;
+    return {
+      N: this.N, T: this.T,
+      P: P.toFixed(1), V: V.toFixed(1), PV: (P * V).toFixed(1),
+      avgSpeed: avgSpeed.toFixed(0),
+      speedData: this._speedHistogram(speeds),
+    };
+  }
+
+  _speedHistogram(speeds) {
+    const maxSpeed = this.T * 200;
+    const numBins  = 12;
+    const binWidth = maxSpeed / numBins;
+    const bins     = new Array(numBins).fill(0);
+    for (const s of speeds) {
+      const idx = Math.floor(s / binWidth);
+      if (idx >= 0 && idx < numBins) bins[idx]++;
+    }
+    return { bins, max: Math.max(...bins, 1), binWidth };
+  }
+
+  _mbCurve(v) {
+    const sigma = this.T * 60;
+    return (v / (sigma * sigma)) * Math.exp(-v * v / (2 * sigma * sigma));
+  }
+
+  // ── drawing ─────────────────────────────────────────────────────────────────
+  draw() {
+    const { ctx, W, H } = this;
+    const pistonX = W * this._pistonFrac;
+
+    // Background
+    const bg = ctx.createRadialGradient(W / 2, H / 2, 0, W / 2, H / 2, Math.max(W, H) * 0.7);
+    bg.addColorStop(0, '#080818'); bg.addColorStop(1, '#030308');
+    ctx.fillStyle = bg; ctx.fillRect(0, 0, W, H);
+
+    // Grid
+    ctx.strokeStyle = 'rgba(255,255,255,0.03)'; ctx.lineWidth = 1;
+    ctx.beginPath();
+    for (let x = 0; x <= W; x += 20) { ctx.moveTo(x, 0); ctx.lineTo(x, H); }
+    for (let y = 0; y <= H; y += 20) { ctx.moveTo(0, y); ctx.lineTo(W, y); }
+    ctx.stroke();
+
+    // Dead zone beyond piston
+    if (this._pistonFrac < 0.99) {
+      ctx.fillStyle = 'rgba(0,0,0,0.55)';
+      ctx.fillRect(pistonX, 0, W - pistonX, H);
+    }
+
+    // Pressure wall glow
+    const P = parseFloat(this.info().P);
+    const wi = Math.min(1, P / 50);
+    if (wi > 0) {
+      const a = wi * 0.3, gd = 30;
+      const glows = [
+        [ctx.createLinearGradient(0, 0, gd, 0),                        0,           0, gd,    H],
+        [ctx.createLinearGradient(pistonX, 0, pistonX - gd, 0),        pistonX - gd, 0, gd,    H],
+        [ctx.createLinearGradient(0, 0, 0, gd),                        0,           0, W,     gd],
+        [ctx.createLinearGradient(0, H, 0, H - gd),                    0,     H - gd, W,     gd],
+      ];
+      for (const [g, rx, ry, rw, rh] of glows) {
+        g.addColorStop(0, `rgba(155,93,229,${a})`);
+        g.addColorStop(1, 'rgba(155,93,229,0)');
+        ctx.fillStyle = g; ctx.fillRect(rx, ry, rw, rh);
+      }
+    }
+
+    // Velocity vectors
+    if (this._showVectors) {
+      ctx.save();
+      for (const p of this.particles) {
+        const scale = 3;
+        const ex = p.x + p.vx * scale, ey = p.y + p.vy * scale;
+        const ang = Math.atan2(p.vy, p.vx);
+        ctx.strokeStyle = 'rgba(255,255,255,0.3)'; ctx.lineWidth = 1;
+        ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(ex, ey); ctx.stroke();
+        const hl = 4;
+        ctx.fillStyle = 'rgba(255,255,255,0.3)';
+        ctx.beginPath();
+        ctx.moveTo(ex, ey);
+        ctx.lineTo(ex - hl * Math.cos(ang - 0.4), ey - hl * Math.sin(ang - 0.4));
+        ctx.lineTo(ex - hl * Math.cos(ang + 0.4), ey - hl * Math.sin(ang + 0.4));
+        ctx.closePath(); ctx.fill();
+      }
+      ctx.restore();
+    }
+
+    // Particles
+    for (const p of this.particles) {
+      const spd   = Math.hypot(p.vx, p.vy);
+      const T     = this.T;
+      const color = spd < T * 40 ? '#4CC9F0' : spd < T * 80 ? '#7BF5A4' : spd < T * 120 ? '#FFD166' : '#EF476F';
+      const isH   = this._hover === p;
+      ctx.save();
+      ctx.shadowBlur  = isH ? 20 : 8;
+      ctx.shadowColor = color;
+      ctx.beginPath(); ctx.arc(p.x, p.y, isH ? p.r + 2 : p.r, 0, Math.PI * 2);
+      ctx.fillStyle = color; ctx.fill();
+      if (isH) { ctx.strokeStyle = 'rgba(255,255,255,0.6)'; ctx.lineWidth = 1.5; ctx.stroke(); }
+      ctx.restore();
+    }
+
+    // Piston
+    this._drawPiston(ctx, pistonX, H);
+
+    // Hover inspector
+    if (this._hover) this._drawInspector(ctx, this._hover, W, H);
+
+    // Histogram
+    this._drawHistogram(ctx, W, H);
+  }
+
+  _drawPiston(ctx, pistonX, H) {
+    if (this._pistonFrac >= 0.99) return;
+    ctx.save();
+    const pw = 8;
+    ctx.shadowBlur  = 16; ctx.shadowColor = 'rgba(255,209,102,0.5)';
+    const g = ctx.createLinearGradient(pistonX - pw, 0, pistonX + pw, 0);
+    g.addColorStop(0, 'rgba(255,209,102,0.4)');
+    g.addColorStop(0.5, 'rgba(255,209,102,0.9)');
+    g.addColorStop(1, 'rgba(255,209,102,0.3)');
+    ctx.fillStyle = g; ctx.fillRect(pistonX - pw / 2, 0, pw, H);
+
+    // Handle
+    const hh = 44, hw = 18, hx = pistonX - hw / 2, hy = H / 2 - hh / 2;
+    ctx.shadowBlur = 0;
+    ctx.fillStyle = 'rgba(255,209,102,0.88)';
+    ctx.beginPath(); ctx.roundRect(hx, hy, hw, hh, 4); ctx.fill();
+    ctx.strokeStyle = 'rgba(0,0,0,0.25)'; ctx.lineWidth = 1.5;
+    for (let i = 0; i < 3; i++) {
+      const gy = hy + 10 + i * 10;
+      ctx.beginPath(); ctx.moveTo(hx + 4, gy); ctx.lineTo(hx + hw - 4, gy); ctx.stroke();
+    }
+
+    ctx.fillStyle = 'rgba(255,209,102,0.7)';
+    ctx.font = "bold 9px 'Manrope', sans-serif";
+    ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+    ctx.fillText('⇌', pistonX, hy - 12);
+    ctx.restore();
+  }
+
+  _drawInspector(ctx, p, W, H) {
+    const spd = Math.hypot(p.vx, p.vy);
+    const ang = Math.atan2(p.vy, p.vx) * 180 / Math.PI;
+    const ke  = 0.5 * spd * spd;
+    const T   = this.T;
+    const clr = spd < T * 40 ? '#4CC9F0' : spd < T * 80 ? '#7BF5A4' : spd < T * 120 ? '#FFD166' : '#EF476F';
+
+    const rows = [
+      ['|v|',  spd.toFixed(1) + ' у.е.'],
+      ['vx',   p.vx.toFixed(1)],
+      ['vy',   p.vy.toFixed(1)],
+      ['KE',   ke.toFixed(0) + ' у.е.'],
+      ['угол', ang.toFixed(1) + '°'],
+    ];
+
+    const tw = 132, th = 18 + rows.length * 17 + 8;
+    let tx = p.x + 14, ty = p.y - th / 2;
+    if (tx + tw > W - 10) tx = p.x - tw - 14;
+    ty = Math.max(8, Math.min(H - th - 8, ty));
+
+    ctx.save();
+    ctx.fillStyle = 'rgba(6,8,28,0.92)';
+    ctx.beginPath(); ctx.roundRect(tx, ty, tw, th, 8); ctx.fill();
+
+    ctx.fillStyle = clr;
+    ctx.beginPath(); ctx.roundRect(tx, ty, tw, 3, [8, 8, 0, 0]); ctx.fill();
+
+    ctx.strokeStyle = 'rgba(255,255,255,0.08)'; ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.roundRect(tx, ty, tw, th, 8); ctx.stroke();
+
+    ctx.beginPath(); ctx.arc(p.x, p.y, p.r + 5, 0, Math.PI * 2);
+    ctx.strokeStyle = 'rgba(255,255,255,0.35)'; ctx.lineWidth = 1; ctx.stroke();
+
+    ctx.font = "11px 'Manrope', monospace"; ctx.textBaseline = 'middle';
+    for (let i = 0; i < rows.length; i++) {
+      const ry = ty + 18 + i * 17;
+      ctx.fillStyle = 'rgba(255,255,255,0.42)'; ctx.textAlign = 'left';
+      ctx.fillText(rows[i][0], tx + 10, ry);
+      ctx.fillStyle = 'rgba(255,255,255,0.92)'; ctx.textAlign = 'right';
+      ctx.fillText(rows[i][1], tx + tw - 10, ry);
+    }
+    ctx.restore();
+  }
+
+  _drawHistogram(ctx, W, H) {
+    const speeds = this.particles.map(p => Math.hypot(p.vx, p.vy));
+    const hist   = this._speedHistogram(speeds);
+
+    const hw = 204, hh = 102;
+    const hx = W - hw - 12, hy = H - hh - 12;
+    const pad = { l: 8, r: 8, t: 20, b: 18 };
+    const barW    = (hw - pad.l - pad.r) / hist.bins.length;
+    const barAreaH = hh - pad.t - pad.b;
+    const maxV    = this.T * 200;
+
+    ctx.save();
+    ctx.fillStyle = 'rgba(0,0,0,0.58)';
+    ctx.beginPath(); ctx.roundRect(hx, hy, hw, hh, 6); ctx.fill();
+
+    ctx.fillStyle = 'rgba(255,255,255,0.72)'; ctx.font = '9px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.fillText('Распределение скоростей', hx + hw / 2, hy + 11);
+
+    ctx.fillStyle = 'rgba(255,255,255,0.35)'; ctx.font = '8px sans-serif';
+    ctx.fillText('v (у.е.)', hx + hw / 2, hy + hh - 2);
+
+    // Bars
+    for (let i = 0; i < hist.bins.length; i++) {
+      const ratio = hist.bins[i] / hist.max;
+      const bh = ratio * barAreaH;
+      const bx = hx + pad.l + i * barW;
+      const by = hy + pad.t + barAreaH - bh;
+      ctx.fillStyle = 'rgba(155,93,229,0.75)';
+      ctx.beginPath(); ctx.roundRect(bx + 0.5, by, barW - 1, bh, 2); ctx.fill();
+    }
+
+    // MB theoretical curve
+    ctx.strokeStyle = 'rgba(255,209,102,0.9)'; ctx.lineWidth = 1.5;
+    ctx.setLineDash([3, 3]); ctx.beginPath();
+    let first = true;
+    for (let i = 0; i <= 80; i++) {
+      const v  = (i / 80) * maxV;
+      const sc = this._mbCurve(v) * speeds.length * hist.binWidth / hist.max;
+      const cx2 = hx + pad.l + (v / maxV) * (hw - pad.l - pad.r);
+      const cy2 = hy + pad.t + barAreaH - sc * barAreaH;
+      if (first) { ctx.moveTo(cx2, cy2); first = false; }
+      else ctx.lineTo(cx2, cy2);
+    }
+    ctx.stroke(); ctx.setLineDash([]);
+
+    // Characteristic speed lines
+    const sigma   = this.T * 60;
+    const v_mp    = sigma;              // v most probable (mode)
+    const v_rms   = sigma * Math.sqrt(2); // v_rms in 2D = sqrt(2) * sigma
+
+    const vline = (v, color, label) => {
+      if (v > maxV) return;
+      const vx2 = hx + pad.l + (v / maxV) * (hw - pad.l - pad.r);
+      ctx.strokeStyle = color; ctx.lineWidth = 1;
+      ctx.setLineDash([2, 3]);
+      ctx.beginPath(); ctx.moveTo(vx2, hy + pad.t); ctx.lineTo(vx2, hy + pad.t + barAreaH); ctx.stroke();
+      ctx.setLineDash([]);
+      ctx.fillStyle = color; ctx.font = '7px sans-serif'; ctx.textAlign = 'center';
+      ctx.fillText(label, vx2, hy + pad.t - 3);
+    };
+    vline(v_mp,  'rgba(76,201,240,0.9)',  'v_mp');
+    vline(v_rms, 'rgba(239,71,111,0.9)',  'v_rms');
+
+    ctx.restore();
+  }
+}
diff --git a/frontend/js/labs/graph.js b/frontend/js/labs/graph.js
new file mode 100644
index 0000000..edc42f4
--- /dev/null
+++ b/frontend/js/labs/graph.js
@@ -0,0 +1,493 @@
+'use strict';
+
+/* ═══════════════════════════════════════════════
+   GraphSim — interactive function plotter
+   Usage:
+     const sim = new GraphSim(canvasElement);
+     sim.setFn(0, 'sin(x)', '#9B5DE5');
+     sim.onHover = (mx, yVals) => { ... };
+   ═══════════════════════════════════════════════ */
+
+class GraphSim {
+  constructor(canvas) {
+    this.c   = canvas;
+    this.ctx = canvas.getContext('2d');
+    this.ox  = 0;    // viewport centre x (math units)
+    this.oy  = 0;    // viewport centre y (math units)
+    this.scl = 50;   // px per unit
+    this.fns = [];   // [{ color, fn } | null]
+    this.hx  = null; // hovered x (math) or null
+    this._dg = null; // drag state
+    this.onHover = null; // callback(mx, [y0,y1,…]) or (null, null)
+
+    this._bind();
+    new ResizeObserver(() => { this.fit(); this.draw(); })
+      .observe(canvas.parentElement);
+  }
+
+  /* ── public ────────────────────────────────── */
+
+  fit() {
+    const dpr = window.devicePixelRatio || 1;
+    const r = this.c.parentElement.getBoundingClientRect();
+    const w = r.width || 600, h = r.height || 400;
+    this.c.width  = w * dpr;
+    this.c.height = h * dpr;
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this._cw = w; this._ch = h;
+  }
+
+  /** idx 0-2, expr string, color hex. Returns error string or null. */
+  setFn(idx, expr, color) {
+    if (!expr || !expr.trim()) {
+      this.fns[idx] = null;
+      this.draw();
+      return null;
+    }
+    try {
+      const fn = this._compile(expr);
+      fn(0); fn(1); fn(-1); fn(Math.PI); // smoke-test
+      this.fns[idx] = { color, fn };
+      this.draw();
+      return null;
+    } catch {
+      this.fns[idx] = null;
+      this.draw();
+      return 'Синтаксическая ошибка';
+    }
+  }
+
+  resetView() { this.ox = 0; this.oy = 0; this.scl = 50; this.draw(); }
+  zoomIn()    { this.scl = Math.min(800, this.scl * 1.3); this.draw(); }
+  zoomOut()   { this.scl = Math.max(4,   this.scl / 1.3); this.draw(); }
+
+  /* ── formula compiler (CSP-safe: no eval / new Function) ── */
+
+  _compile(raw) {
+    const tokens   = this._tokenize(raw.trim());
+    const expanded = this._insertImplicit(tokens);
+    return this._parseExpr(expanded);
+  }
+
+  _tokenize(src) {
+    const out = [];
+    let i = 0;
+    while (i < src.length) {
+      const ch = src[i];
+      if (/\s/.test(ch)) { i++; continue; }
+
+      /* number */
+      if (/[0-9]/.test(ch) || (ch === '.' && /[0-9]/.test(src[i + 1] || ''))) {
+        let j = i;
+        while (j < src.length && /[0-9]/.test(src[j])) j++;
+        if (j < src.length && src[j] === '.') {
+          j++;
+          while (j < src.length && /[0-9]/.test(src[j])) j++;
+        }
+        if (j < src.length && /[eE]/.test(src[j])) {
+          j++;
+          if (j < src.length && /[+\-]/.test(src[j])) j++;
+          while (j < src.length && /[0-9]/.test(src[j])) j++;
+        }
+        out.push({ type: 'num', val: parseFloat(src.slice(i, j)) });
+        i = j;
+        continue;
+      }
+
+      /* identifier */
+      if (/[a-zA-Z_]/.test(ch)) {
+        let j = i;
+        while (j < src.length && /[a-zA-Z_0-9]/.test(src[j])) j++;
+        out.push({ type: 'id', val: src.slice(i, j) });
+        i = j;
+        continue;
+      }
+
+      /* operator / bracket */
+      if ('+-*/^()'.includes(ch)) {
+        out.push({ type: 'op', val: ch });
+        i++;
+        continue;
+      }
+
+      throw new Error('Unknown character: ' + ch);
+    }
+    return out;
+  }
+
+  /* Insert implicit '*' where adjacent tokens imply multiplication.
+     Covers: 2x <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> 2*x,  2( <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> 2*(,  )( <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> )*(,  )x <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> )*x            */
+  _insertImplicit(tokens) {
+    const FUNS = new Set([
+      'sin','cos','tan','tg','ctg',
+      'asin','acos','atan','arcsin','arccos','arctan','arctg',
+      'sqrt','abs','exp','ln','log','log2','log10',
+      'ceil','floor','round','sign',
+    ]);
+    const out = [];
+    for (let i = 0; i < tokens.length; i++) {
+      out.push(tokens[i]);
+      const cur = tokens[i], nxt = tokens[i + 1];
+      if (!nxt) continue;
+      const curEnds   = cur.type === 'num' ||
+                        (cur.type === 'id' && !FUNS.has(cur.val)) ||
+                        (cur.type === 'op' && cur.val === ')');
+      const nxtStarts = nxt.type === 'num' ||
+                        nxt.type === 'id'  ||
+                        (nxt.type === 'op' && nxt.val === '(');
+      if (curEnds && nxtStarts) out.push({ type: 'op', val: '*' });
+    }
+    return out;
+  }
+
+  /* Recursive-descent parser <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> returns a closure  x => number */
+  _parseExpr(tokens) {
+    let pos = 0;
+    const peek = () => tokens[pos];
+    const next = () => tokens[pos++];
+    const eat  = v => {
+      if (!peek() || peek().val !== v) throw new Error('Expected ' + v);
+      pos++;
+    };
+
+    /* All supported functions including Russian aliases */
+    const FN = {
+      sin: Math.sin,  cos: Math.cos,  tan: Math.tan,  tg: Math.tan,
+      asin: Math.asin, acos: Math.acos, atan: Math.atan,
+      arcsin: Math.asin, arccos: Math.acos, arctan: Math.atan, arctg: Math.atan,
+      sqrt: Math.sqrt, abs: Math.abs,  exp: Math.exp,
+      ln: Math.log,   log: Math.log10, log2: Math.log2, log10: Math.log10,
+      ceil: Math.ceil, floor: Math.floor, round: Math.round, sign: Math.sign,
+      ctg: t => 1 / Math.tan(t),
+    };
+
+    /* additive: left-associative +/- */
+    const addSub = () => {
+      let l = mulDiv();
+      while (peek() && (peek().val === '+' || peek().val === '-')) {
+        const op = next().val;
+        const r  = mulDiv();
+        const ll = l;
+        l = op === '+' ? x => ll(x) + r(x) : x => ll(x) - r(x);
+      }
+      return l;
+    };
+
+    /* multiplicative: left-associative */
+    const mulDiv = () => {
+      let l = power();
+      while (peek() && (peek().val === '*' || peek().val === '/')) {
+        const op = next().val;
+        const r  = power();
+        const ll = l;
+        l = op === '*' ? x => ll(x) * r(x) : x => ll(x) / r(x);
+      }
+      return l;
+    };
+
+    /* power: right-associative ^ */
+    const power = () => {
+      const base = unary();
+      if (peek() && peek().val === '^') {
+        next();
+        const exp = power(); // right-recursive <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> right-associative
+        return x => Math.pow(base(x), exp(x));
+      }
+      return base;
+    };
+
+    /* unary minus / plus */
+    const unary = () => {
+      if (peek()?.val === '-') { next(); const v = unary(); return x => -v(x); }
+      if (peek()?.val === '+') { next(); return unary(); }
+      return primary();
+    };
+
+    /* primary: number | variable | constant | fn(…) | (…) */
+    const primary = () => {
+      const t = peek();
+      if (!t) throw new Error('Unexpected end of expression');
+
+      if (t.type === 'num') {
+        next();
+        const v = t.val;
+        return () => v;
+      }
+
+      if (t.type === 'id') {
+        next();
+        if (t.val === 'x')                    return x => x;
+        if (t.val === 'pi' || t.val === 'PI') return () => Math.PI;
+        if (t.val === 'e')                    return () => Math.E;
+        if (FN[t.val]) {
+          eat('(');
+          const arg = addSub();
+          eat(')');
+          const f = FN[t.val];
+          return x => f(arg(x));
+        }
+        throw new Error('Unknown identifier: ' + t.val);
+      }
+
+      if (t.type === 'op' && t.val === '(') {
+        next();
+        const v = addSub();
+        eat(')');
+        return v;
+      }
+
+      throw new Error('Unexpected token: ' + t.val);
+    };
+
+    const fn = addSub();
+    if (pos !== tokens.length) throw new Error('Unexpected tokens after expression');
+    return fn;
+  }
+
+  /* ── coordinate transforms ─────────────────── */
+
+  _toPx(mx, my) {
+    const cx = (this._cw || this.c.width) / 2, cy = (this._ch || this.c.height) / 2;
+    return [cx + (mx - this.ox) * this.scl,
+            cy - (my - this.oy) * this.scl];
+  }
+
+  _toMx(px, py) {
+    const cx = (this._cw || this.c.width) / 2, cy = (this._ch || this.c.height) / 2;
+    return [(px - cx) / this.scl + this.ox,
+            -(py - cy) / this.scl + this.oy];
+  }
+
+  /* ── main render ───────────────────────────── */
+
+  draw() {
+    const c = this.ctx, W = this._cw || this.c.width, H = this._ch || this.c.height;
+    if (!W || !H) return;
+
+    c.fillStyle = '#0D0D1A';
+    c.fillRect(0, 0, W, H);
+
+    this._drawGrid(c, W, H);
+    this._drawAxes(c, W, H);
+    for (const f of this.fns) if (f) this._drawCurve(c, W, H, f);
+    if (this.hx !== null) this._drawHover(c, W, H);
+  }
+
+  /* ── grid ──────────────────────────────────── */
+
+  _niceStep() {
+    const raw = (this._cw || this.c.width) / this.scl / 8;
+    const p = Math.pow(10, Math.floor(Math.log10(raw)));
+    for (const n of [1, 2, 5, 10]) if (n * p >= raw) return n * p;
+    return p;
+  }
+
+  _drawGrid(c, W, H) {
+    const step = this._niceStep();
+    const [x0] = this._toMx(0, 0), [x1] = this._toMx(W, 0);
+    const [, y0] = this._toMx(0, H), [, y1] = this._toMx(0, 0);
+    const gx = Math.floor(x0 / step) * step;
+    const gy = Math.floor(y0 / step) * step;
+
+    c.strokeStyle = 'rgba(255,255,255,0.065)';
+    c.lineWidth = 1;
+    for (let x = gx; x <= x1 + step; x += step) {
+      const [px] = this._toPx(x, 0);
+      c.beginPath(); c.moveTo(px, 0); c.lineTo(px, H); c.stroke();
+    }
+    for (let y = gy; y <= y1 + step; y += step) {
+      const [, py] = this._toPx(0, y);
+      c.beginPath(); c.moveTo(0, py); c.lineTo(W, py); c.stroke();
+    }
+
+    /* number labels */
+    c.font = '11px Manrope, system-ui, sans-serif';
+    c.fillStyle = 'rgba(255,255,255,0.3)';
+    const [axX, axY] = this._toPx(0, 0);
+    const lblY = Math.max(4,  Math.min(H - 18, axY + 5));
+    const lblX = Math.max(28, Math.min(W - 6,  axX - 5));
+
+    c.textAlign = 'center'; c.textBaseline = 'top';
+    for (let x = gx; x <= x1; x += step) {
+      if (Math.abs(x) < step * 0.01) continue;
+      const [px] = this._toPx(x, 0);
+      if (px < 18 || px > W - 18) continue;
+      c.fillText(this._fmtN(x, step), px, lblY);
+    }
+    c.textAlign = 'right'; c.textBaseline = 'middle';
+    for (let y = gy; y <= y1; y += step) {
+      if (Math.abs(y) < step * 0.01) continue;
+      const [, py] = this._toPx(0, y);
+      if (py < 12 || py > H - 12) continue;
+      c.fillText(this._fmtN(y, step), lblX, py);
+    }
+  }
+
+  _fmtN(n, step) {
+    if (n === 0) return '0';
+    if (step >= 1 && Number.isInteger(n)) return String(n);
+    if (step < 0.001) return n.toExponential(1);
+    const dec = Math.max(0, -Math.floor(Math.log10(step)));
+    return n.toFixed(dec);
+  }
+
+  /* ── axes ──────────────────────────────────── */
+
+  _drawAxes(c, W, H) {
+    const [ax, ay] = this._toPx(0, 0);
+    c.strokeStyle = 'rgba(255,255,255,0.4)';
+    c.lineWidth = 1.5;
+    c.beginPath(); c.moveTo(0, ay);  c.lineTo(W - 10, ay); c.stroke();
+    c.beginPath(); c.moveTo(ax, H); c.lineTo(ax, 8);      c.stroke();
+
+    c.fillStyle = 'rgba(255,255,255,0.4)';
+    this._arrowHead(c, W - 8, ay, 0);
+    this._arrowHead(c, ax, 6, -Math.PI / 2);
+
+    c.fillStyle = 'rgba(255,255,255,0.55)';
+    c.font = 'bold 12px Manrope, sans-serif';
+    c.textBaseline = 'middle'; c.textAlign = 'left';
+    c.fillText('x', W - 10, ay - 13);
+    c.textBaseline = 'top'; c.textAlign = 'left';
+    c.fillText('y', ax + 7, 4);
+  }
+
+  _arrowHead(c, x, y, angle) {
+    const s = 5;
+    c.save(); c.translate(x, y); c.rotate(angle);
+    c.beginPath();
+    c.moveTo(0, 0); c.lineTo(-s * 1.6, -s * 0.6); c.lineTo(-s * 1.6, s * 0.6);
+    c.closePath(); c.fill();
+    c.restore();
+  }
+
+  /* ── curve ─────────────────────────────────── */
+
+  _drawCurve(c, W, H, { fn, color }) {
+    const steps  = Math.min(W * 2, 2000);
+    const [x0]  = this._toMx(0, 0), [x1] = this._toMx(W, 0);
+    const dx     = (x1 - x0) / steps;
+    const maxJmp = (H / this.scl) * 2; // discontinuity threshold (math units)
+
+    c.strokeStyle = color;
+    c.lineWidth = 2.5;
+    c.lineJoin  = 'round';
+    c.beginPath();
+
+    let pen = false, pyPrev = null;
+    for (let i = 0; i <= steps; i++) {
+      const mx = x0 + i * dx;
+      let my;
+      try { my = fn(mx); } catch { pen = false; pyPrev = null; continue; }
+      if (!isFinite(my) || isNaN(my)) { pen = false; pyPrev = null; continue; }
+
+      // discontinuity guard
+      if (pen && pyPrev !== null && Math.abs(my - pyPrev) > maxJmp) {
+        pen = false;
+      }
+
+      const [px, py] = this._toPx(mx, my);
+      pen ? c.lineTo(px, py) : c.moveTo(px, py);
+      pen = true; pyPrev = my;
+    }
+    c.stroke();
+  }
+
+  /* ── hover crosshair ───────────────────────── */
+
+  _drawHover(c, W, H) {
+    const [px] = this._toPx(this.hx, 0);
+
+    c.strokeStyle = 'rgba(255,255,255,0.15)';
+    c.lineWidth = 1;
+    c.setLineDash([5, 5]);
+    c.beginPath(); c.moveTo(px, 0); c.lineTo(px, H); c.stroke();
+    c.setLineDash([]);
+
+    for (const f of this.fns) {
+      if (!f) continue;
+      let my;
+      try { my = f.fn(this.hx); } catch { continue; }
+      if (!isFinite(my) || isNaN(my)) continue;
+
+      const [, py] = this._toPx(this.hx, my);
+      if (py < -20 || py > H + 20) continue;
+
+      c.fillStyle = f.color;
+      c.beginPath(); c.arc(px, py, 5.5, 0, 2 * Math.PI); c.fill();
+      c.strokeStyle = 'rgba(255,255,255,0.8)';
+      c.lineWidth = 1.5; c.stroke();
+    }
+  }
+
+  /* ── events ─────────────────────────────────── */
+
+  _bind() {
+    const cv = this.c;
+
+    /* wheel zoom — zoom toward cursor */
+    cv.addEventListener('wheel', e => {
+      e.preventDefault();
+      const [mx, my] = this._toMx(e.offsetX, e.offsetY);
+      this.scl = Math.max(4, Math.min(800, this.scl * (e.deltaY < 0 ? 1.15 : 1 / 1.15)));
+      const [nx, ny] = this._toMx(e.offsetX, e.offsetY);
+      this.ox -= nx - mx; this.oy -= ny - my;
+      this.draw();
+    }, { passive: false });
+
+    /* mouse drag */
+    cv.addEventListener('mousedown', e => {
+      this._dg = { x: e.clientX, y: e.clientY, ox: this.ox, oy: this.oy };
+      cv.style.cursor = 'grabbing';
+    });
+    window.addEventListener('mousemove', e => {
+      if (this._dg) {
+        this.ox = this._dg.ox - (e.clientX - this._dg.x) / this.scl;
+        this.oy = this._dg.oy + (e.clientY - this._dg.y) / this.scl;
+        this.draw();
+      } else {
+        const r = cv.getBoundingClientRect();
+        const lx = e.clientX - r.left, ly = e.clientY - r.top;
+        if (lx >= 0 && lx <= r.width && ly >= 0 && ly <= r.height) {
+          this.hx = this._toMx(lx, ly)[0];
+          this.draw();
+          this._emitHover();
+        }
+      }
+    });
+    window.addEventListener('mouseup', () => {
+      this._dg = null;
+      cv.style.cursor = 'crosshair';
+    });
+    cv.addEventListener('mouseleave', () => {
+      this.hx = null; this.draw();
+      if (this.onHover) this.onHover(null, null);
+    });
+    cv.style.cursor = 'crosshair';
+
+    /* touch drag */
+    let t0 = null;
+    cv.addEventListener('touchstart', e => {
+      if (e.touches.length === 1)
+        t0 = { x: e.touches[0].clientX, y: e.touches[0].clientY, ox: this.ox, oy: this.oy };
+    }, { passive: true });
+    cv.addEventListener('touchmove', e => {
+      e.preventDefault();
+      if (e.touches.length === 1 && t0) {
+        this.ox = t0.ox - (e.touches[0].clientX - t0.x) / this.scl;
+        this.oy = t0.oy + (e.touches[0].clientY - t0.y) / this.scl;
+        this.draw();
+      }
+    }, { passive: false });
+    cv.addEventListener('touchend', () => { t0 = null; });
+  }
+
+  _emitHover() {
+    if (!this.onHover) return;
+    const vals = this.fns.map(f => {
+      if (!f) return null;
+      try { const v = f.fn(this.hx); return isFinite(v) ? v : null; } catch { return null; }
+    });
+    this.onHover(this.hx, vals);
+  }
+}
diff --git a/frontend/js/labs/graphtransform.js b/frontend/js/labs/graphtransform.js
new file mode 100644
index 0000000..50d0482
--- /dev/null
+++ b/frontend/js/labs/graphtransform.js
@@ -0,0 +1,355 @@
+'use strict';
+/* ══════════════════════════════════════════════════════════════
+   GraphTransformSim — graph transformations explorer
+   y = a·f(k·x + b) + c  with sliders for a, k, b, c
+   Original f(x) shown faded, transformed shown bold.
+   ══════════════════════════════════════════════════════════════ */
+
+class GraphTransformSim {
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.ctx    = canvas.getContext('2d');
+    this.W = 0; this.H = 0;
+
+    /* base function */
+    this._baseFn  = x => Math.sin(x);
+    this._baseLabel = 'sin(x)';
+
+    /* transform params */
+    this.a = 1;
+    this.k = 1;
+    this.b = 0;
+    this.c = 0;
+
+    /* view */
+    this.ox  = 0;
+    this.oy  = 0;
+    this.scl = 40;
+
+    this.hx = null;
+    this._drag = null;
+    this.onUpdate = null;
+
+    this._bind();
+    new ResizeObserver(() => { this.fit(); this.draw(); }).observe(canvas.parentElement);
+  }
+
+  /* ── public ──────────────────────────────────────── */
+
+  fit() {
+    const dpr = window.devicePixelRatio || 1;
+    const w = this.canvas.offsetWidth || 600;
+    const h = this.canvas.offsetHeight || 400;
+    this.canvas.width  = w * dpr;
+    this.canvas.height = h * dpr;
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this.W = w; this.H = h;
+  }
+
+  setParams({ a, k, b, c } = {}) {
+    if (a !== undefined) this.a = +a;
+    if (k !== undefined) this.k = +k;
+    if (b !== undefined) this.b = +b;
+    if (c !== undefined) this.c = +c;
+    this.draw();
+    this._emit();
+  }
+
+  setBase(name) {
+    const BASES = {
+      'sin':   { fn: x => Math.sin(x),   label: 'sin(x)' },
+      'cos':   { fn: x => Math.cos(x),   label: 'cos(x)' },
+      'x^2':   { fn: x => x * x,         label: 'x²' },
+      'sqrt':  { fn: x => x >= 0 ? Math.sqrt(x) : NaN, label: '√x' },
+      '|x|':   { fn: x => Math.abs(x),   label: '|x|' },
+      '1/x':   { fn: x => x !== 0 ? 1 / x : NaN, label: '1/x' },
+      'x^3':   { fn: x => x * x * x,     label: 'x³' },
+    };
+    const b = BASES[name];
+    if (b) { this._baseFn = b.fn; this._baseLabel = b.label; this.draw(); this._emit(); }
+  }
+
+  resetView() { this.ox = 0; this.oy = 0; this.scl = 40; this.draw(); }
+  zoomIn()    { this.scl = Math.min(800, this.scl * 1.3); this.draw(); }
+  zoomOut()   { this.scl = Math.max(4,   this.scl / 1.3); this.draw(); }
+
+  info() {
+    const { a, k, b, c } = this;
+    const parts = [];
+    if (a !== 1) parts.push(a === -1 ? '−' : a.toFixed(1) + '·');
+    parts.push(this._baseLabel.replace('x', this._innerStr()));
+    if (c > 0) parts.push(' + ' + c.toFixed(1));
+    if (c < 0) parts.push(' − ' + Math.abs(c).toFixed(1));
+    return {
+      base: this._baseLabel,
+      equation: 'y = ' + parts.join(''),
+      a: a.toFixed(1),
+      k: k.toFixed(1),
+      b: b.toFixed(1),
+      c: c.toFixed(1),
+    };
+  }
+
+  /* ── internals ──────────────────────────────────── */
+
+  _innerStr() {
+    const { k, b } = this;
+    let s = '';
+    if (k !== 1) s += (k === -1 ? '−' : k.toFixed(1) + '·');
+    s += 'x';
+    if (b > 0) s += ' + ' + b.toFixed(1);
+    if (b < 0) s += ' − ' + Math.abs(b).toFixed(1);
+    return s;
+  }
+
+  _fBase(x) { try { return this._baseFn(x); } catch { return NaN; } }
+
+  _fTransformed(x) {
+    const inner = this.k * x + this.b;
+    const base  = this._fBase(inner);
+    return this.a * base + this.c;
+  }
+
+  _emit() { if (this.onUpdate) this.onUpdate(this.info()); }
+
+  /* ── coordinate transforms ────────────────────── */
+
+  _toPx(mx, my) {
+    return [
+      this.W / 2 + (mx - this.ox) * this.scl,
+      this.H / 2 - (my - this.oy) * this.scl,
+    ];
+  }
+
+  _toMath(px, py) {
+    return [
+      (px - this.W / 2) / this.scl + this.ox,
+      -(py - this.H / 2) / this.scl + this.oy,
+    ];
+  }
+
+  /* ── draw ────────────────────────────────────── */
+
+  draw() {
+    const ctx = this.ctx, W = this.W, H = this.H;
+    if (!W || !H) return;
+
+    ctx.fillStyle = '#0D0D1A';
+    ctx.fillRect(0, 0, W, H);
+
+    this._drawGrid(ctx, W, H);
+    this._drawAxes(ctx, W, H);
+    this._drawCurve(ctx, W, H, x => this._fBase(x), 'rgba(255,255,255,0.18)', 2); // original faded
+    this._drawCurve(ctx, W, H, x => this._fTransformed(x), '#9B5DE5', 2.5);       // transformed bold
+    this._drawEquation(ctx, W, H);
+    if (this.hx !== null) this._drawHover(ctx, W, H);
+  }
+
+  _drawGrid(ctx, W, H) {
+    const step = this._niceStep();
+    const [x0] = this._toMath(0, 0), [x1] = this._toMath(W, 0);
+    const [, y0] = this._toMath(0, H), [, y1] = this._toMath(0, 0);
+    const gx = Math.floor(x0 / step) * step;
+    const gy = Math.floor(y0 / step) * step;
+
+    ctx.strokeStyle = 'rgba(255,255,255,0.065)';
+    ctx.lineWidth = 1;
+    for (let x = gx; x <= x1 + step; x += step) {
+      const [px] = this._toPx(x, 0);
+      ctx.beginPath(); ctx.moveTo(px, 0); ctx.lineTo(px, H); ctx.stroke();
+    }
+    for (let y = gy; y <= y1 + step; y += step) {
+      const [, py] = this._toPx(0, y);
+      ctx.beginPath(); ctx.moveTo(0, py); ctx.lineTo(W, py); ctx.stroke();
+    }
+
+    ctx.font = '11px Manrope, system-ui, sans-serif';
+    ctx.fillStyle = 'rgba(255,255,255,0.3)';
+    const [axX, axY] = this._toPx(0, 0);
+    const lblY = Math.max(4, Math.min(H - 18, axY + 5));
+    const lblX = Math.max(28, Math.min(W - 6, axX - 5));
+
+    ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+    for (let x = gx; x <= x1; x += step) {
+      if (Math.abs(x) < step * 0.01) continue;
+      const [px] = this._toPx(x, 0);
+      if (px < 18 || px > W - 18) continue;
+      ctx.fillText(this._fmtLabel(x, step), px, lblY);
+    }
+    ctx.textAlign = 'right'; ctx.textBaseline = 'middle';
+    for (let y = gy; y <= y1; y += step) {
+      if (Math.abs(y) < step * 0.01) continue;
+      const [, py] = this._toPx(0, y);
+      if (py < 12 || py > H - 12) continue;
+      ctx.fillText(this._fmtLabel(y, step), lblX, py);
+    }
+  }
+
+  _niceStep() {
+    const raw = this.W / this.scl / 8;
+    const p = Math.pow(10, Math.floor(Math.log10(raw)));
+    for (const m of [1, 2, 5, 10]) if (m * p >= raw) return m * p;
+    return p;
+  }
+
+  _fmtLabel(n, step) {
+    if (n === 0) return '0';
+    if (step >= 1 && Number.isInteger(n)) return String(n);
+    if (step < 0.001) return n.toExponential(1);
+    const dec = Math.max(0, -Math.floor(Math.log10(step)));
+    return n.toFixed(dec);
+  }
+
+  _drawAxes(ctx, W, H) {
+    const [ax, ay] = this._toPx(0, 0);
+    ctx.strokeStyle = 'rgba(255,255,255,0.4)';
+    ctx.lineWidth = 1.5;
+    ctx.beginPath(); ctx.moveTo(0, ay);  ctx.lineTo(W - 10, ay); ctx.stroke();
+    ctx.beginPath(); ctx.moveTo(ax, H); ctx.lineTo(ax, 8);      ctx.stroke();
+
+    ctx.fillStyle = 'rgba(255,255,255,0.4)';
+    const s = 5;
+    // x arrow
+    ctx.save(); ctx.translate(W - 8, ay); ctx.beginPath();
+    ctx.moveTo(0, 0); ctx.lineTo(-s * 1.6, -s * 0.6); ctx.lineTo(-s * 1.6, s * 0.6); ctx.closePath(); ctx.fill(); ctx.restore();
+    // y arrow
+    ctx.save(); ctx.translate(ax, 6); ctx.rotate(-Math.PI / 2); ctx.beginPath();
+    ctx.moveTo(0, 0); ctx.lineTo(-s * 1.6, -s * 0.6); ctx.lineTo(-s * 1.6, s * 0.6); ctx.closePath(); ctx.fill(); ctx.restore();
+
+    ctx.fillStyle = 'rgba(255,255,255,0.55)';
+    ctx.font = 'bold 12px Manrope, sans-serif';
+    ctx.textBaseline = 'middle'; ctx.textAlign = 'left';
+    ctx.fillText('x', W - 10, ay - 13);
+    ctx.textBaseline = 'top'; ctx.textAlign = 'left';
+    ctx.fillText('y', ax + 7, 4);
+  }
+
+  _drawCurve(ctx, W, H, fn, color, lw) {
+    const steps = Math.min(W * 2, 2000);
+    const [x0] = this._toMath(0, 0), [x1] = this._toMath(W, 0);
+    const dx   = (x1 - x0) / steps;
+    const maxJmp = (H / this.scl) * 2;
+
+    ctx.strokeStyle = color;
+    ctx.lineWidth = lw;
+    ctx.lineJoin = 'round';
+    ctx.beginPath();
+
+    let pen = false, pyPrev = null;
+    for (let i = 0; i <= steps; i++) {
+      const mx = x0 + i * dx;
+      const my = fn(mx);
+      if (!isFinite(my) || isNaN(my)) { pen = false; pyPrev = null; continue; }
+      if (pen && pyPrev !== null && Math.abs(my - pyPrev) > maxJmp) pen = false;
+      const [px, py] = this._toPx(mx, my);
+      pen ? ctx.lineTo(px, py) : ctx.moveTo(px, py);
+      pen = true; pyPrev = my;
+    }
+    ctx.stroke();
+  }
+
+  _drawEquation(ctx, W, H) {
+    const info = this.info();
+    ctx.font = 'bold 13px Manrope, sans-serif';
+    const text = info.equation;
+    const tw = ctx.measureText(text).width;
+    const x = W - tw - 24, y = 14;
+
+    ctx.fillStyle = 'rgba(22,22,38,0.85)';
+    ctx.beginPath(); ctx.roundRect(x, y, tw + 16, 26, 8); ctx.fill();
+    ctx.strokeStyle = '#9B5DE5'; ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.roundRect(x, y, tw + 16, 26, 8); ctx.stroke();
+    ctx.fillStyle = '#ddd';
+    ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
+    ctx.fillText(text, x + 8, y + 13);
+
+    // base function label (faded)
+    const base = 'f(x) = ' + this._baseLabel;
+    ctx.font = '11px Manrope, sans-serif';
+    ctx.fillStyle = 'rgba(255,255,255,0.35)';
+    ctx.fillText(base, x + 8, y + 38);
+  }
+
+  _drawHover(ctx, W, H) {
+    const [px] = this._toPx(this.hx, 0);
+    const myOrig  = this._fBase(this.hx);
+    const myTrans = this._fTransformed(this.hx);
+
+    ctx.strokeStyle = 'rgba(255,255,255,0.15)';
+    ctx.lineWidth = 1;
+    ctx.setLineDash([5, 5]);
+    ctx.beginPath(); ctx.moveTo(px, 0); ctx.lineTo(px, H); ctx.stroke();
+    ctx.setLineDash([]);
+
+    // original point
+    if (isFinite(myOrig)) {
+      const [, py] = this._toPx(this.hx, myOrig);
+      if (py > -20 && py < H + 20) {
+        ctx.fillStyle = 'rgba(255,255,255,0.3)';
+        ctx.beginPath(); ctx.arc(px, py, 4, 0, Math.PI * 2); ctx.fill();
+      }
+    }
+
+    // transformed point
+    if (isFinite(myTrans)) {
+      const [, py2] = this._toPx(this.hx, myTrans);
+      if (py2 > -20 && py2 < H + 20) {
+        ctx.fillStyle = '#9B5DE5';
+        ctx.beginPath(); ctx.arc(px, py2, 5, 0, Math.PI * 2); ctx.fill();
+        ctx.strokeStyle = 'rgba(255,255,255,0.8)'; ctx.lineWidth = 1.5; ctx.stroke();
+      }
+    }
+  }
+
+  /* ── events ──────────────────────────────────── */
+
+  _bind() {
+    const cv = this.canvas;
+
+    cv.addEventListener('wheel', e => {
+      e.preventDefault();
+      const [mx, my] = this._toMath(e.offsetX, e.offsetY);
+      this.scl = Math.max(4, Math.min(800, this.scl * (e.deltaY < 0 ? 1.15 : 1 / 1.15)));
+      const [nx, ny] = this._toMath(e.offsetX, e.offsetY);
+      this.ox -= nx - mx; this.oy -= ny - my;
+      this.draw();
+    }, { passive: false });
+
+    cv.addEventListener('mousedown', e => {
+      this._drag = { x: e.clientX, y: e.clientY, ox: this.ox, oy: this.oy };
+      cv.style.cursor = 'grabbing';
+    });
+    window.addEventListener('mousemove', e => {
+      if (this._drag) {
+        this.ox = this._drag.ox - (e.clientX - this._drag.x) / this.scl;
+        this.oy = this._drag.oy + (e.clientY - this._drag.y) / this.scl;
+        this.draw();
+      } else {
+        const r = cv.getBoundingClientRect();
+        const lx = e.clientX - r.left, ly = e.clientY - r.top;
+        if (lx >= 0 && lx <= r.width && ly >= 0 && ly <= r.height) {
+          this.hx = this._toMath(lx, ly)[0];
+          this.draw();
+        }
+      }
+    });
+    window.addEventListener('mouseup', () => { this._drag = null; cv.style.cursor = 'crosshair'; });
+    cv.addEventListener('mouseleave', () => { this.hx = null; this.draw(); });
+    cv.style.cursor = 'crosshair';
+
+    let t0 = null;
+    cv.addEventListener('touchstart', e => {
+      if (e.touches.length === 1)
+        t0 = { x: e.touches[0].clientX, y: e.touches[0].clientY, ox: this.ox, oy: this.oy };
+    }, { passive: true });
+    cv.addEventListener('touchmove', e => {
+      e.preventDefault();
+      if (e.touches.length === 1 && t0) {
+        this.ox = t0.ox - (e.touches[0].clientX - t0.x) / this.scl;
+        this.oy = t0.oy + (e.touches[0].clientY - t0.y) / this.scl;
+        this.draw();
+      }
+    }, { passive: false });
+    cv.addEventListener('touchend', () => { t0 = null; });
+  }
+}
diff --git a/frontend/js/labs/ionexchange.js b/frontend/js/labs/ionexchange.js
new file mode 100644
index 0000000..2a16140
--- /dev/null
+++ b/frontend/js/labs/ionexchange.js
@@ -0,0 +1,484 @@
+'use strict';
+/* ====================================================================
+   IonExSim — Реакции ионного обмена
+   ==================================================================== */
+
+class IonExSim {
+
+  /* ── Данные реакций ──────────────────────────────────────────────── */
+
+  static RXN = {
+    ba_so4: {
+      name: 'BaCl₂ + Na₂SO₄',
+      left:  [{ f: 'Ba²⁺', color: '#4FC3F7', count: 7 }, { f: 'Cl⁻',   color: '#AED581', count: 14 }],
+      right: [{ f: 'Na⁺',  color: '#FFD54F', count: 14 }, { f: 'SO₄²⁻', color: '#F48FB1', count: 7 }],
+      reacts: ['Ba²⁺', 'SO₄²⁻'],
+      spectators: ['Cl⁻', 'Na⁺'],
+      product: { f: 'BaSO₄', color: '#E0E0E0' },
+      mol:      'BaCl₂ + Na₂SO₄ <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> BaSO₄<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> + 2NaCl',
+      full_ion: 'Ba²⁺ + 2Cl⁻ + 2Na⁺ + SO₄²⁻ <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> BaSO₄<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> + 2Na⁺ + 2Cl⁻',
+      net_ion:  'Ba²⁺ + SO₄²⁻ <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> BaSO₄<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>',
+      type: 'precip', pcolor: '#E0E0E0', pname: 'BaSO₄ — белый осадок',
+      sign: '<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>', signColor: '#E0E0E0',
+    },
+    ag_cl: {
+      name: 'AgNO₃ + NaCl',
+      left:  [{ f: 'Ag⁺',  color: '#E0E0E0', count: 10 }, { f: 'NO₃⁻', color: '#FFCC02', count: 10 }],
+      right: [{ f: 'Na⁺',  color: '#FFD54F', count: 10 }, { f: 'Cl⁻',  color: '#AED581', count: 10 }],
+      reacts: ['Ag⁺', 'Cl⁻'],
+      spectators: ['NO₃⁻', 'Na⁺'],
+      product: { f: 'AgCl', color: '#F5F5F5' },
+      mol:      'AgNO₃ + NaCl <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> AgCl<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> + NaNO₃',
+      full_ion: 'Ag⁺ + NO₃⁻ + Na⁺ + Cl⁻ <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> AgCl<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> + Na⁺ + NO₃⁻',
+      net_ion:  'Ag⁺ + Cl⁻ <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> AgCl<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>',
+      type: 'precip', pcolor: '#F5F5F5', pname: 'AgCl — белый творожистый осадок',
+      sign: '<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>', signColor: '#F5F5F5',
+    },
+    co3_hcl: {
+      name: 'Na₂CO₃ + HCl',
+      left:  [{ f: 'Na⁺',   color: '#FFD54F', count: 10 }, { f: 'CO₃²⁻', color: '#CE93D8', count: 5 }],
+      right: [{ f: 'H⁺',    color: '#EF5350', count: 10 }, { f: 'Cl⁻',   color: '#AED581', count: 10 }],
+      reacts: ['CO₃²⁻', 'H⁺'],
+      spectators: ['Na⁺', 'Cl⁻'],
+      product: { f: 'CO₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>', color: '#B0BEC5' },
+      mol:      'Na₂CO₃ + 2HCl <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> 2NaCl + CO₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg> + H₂O',
+      full_ion: '2Na⁺ + CO₃²⁻ + 2H⁺ + 2Cl⁻ <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> 2Na⁺ + 2Cl⁻ + CO₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg> + H₂O',
+      net_ion:  'CO₃²⁻ + 2H⁺ <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> CO₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg> + H₂O',
+      type: 'gas', gcolor: '#B0BEC5', gname: 'CO₂ — углекислый газ',
+      sign: '<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>', signColor: '#B0BEC5',
+    },
+    pb_i: {
+      name: 'Pb(NO₃)₂ + KI',
+      left:  [{ f: 'Pb²⁺', color: '#F48FB1', count: 6 }, { f: 'NO₃⁻', color: '#FFCC02', count: 12 }],
+      right: [{ f: 'K⁺',   color: '#80CBC4', count: 12 }, { f: 'I⁻',  color: '#CE93D8', count: 12 }],
+      reacts: ['Pb²⁺', 'I⁻'],
+      spectators: ['NO₃⁻', 'K⁺'],
+      product: { f: 'PbI₂', color: '#F9A825' },
+      mol:      'Pb(NO₃)₂ + 2KI <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> PbI₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> + 2KNO₃',
+      full_ion: 'Pb²⁺ + 2NO₃⁻ + 2K⁺ + 2I⁻ <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> PbI₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> + 2K⁺ + 2NO₃⁻',
+      net_ion:  'Pb²⁺ + 2I⁻ <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> PbI₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>',
+      type: 'precip', pcolor: '#F9A825', pname: 'PbI₂ — ярко-жёлтый осадок',
+      sign: '<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>', signColor: '#F9A825',
+    },
+    ca_co3: {
+      name: 'CaCl₂ + Na₂CO₃',
+      left:  [{ f: 'Ca²⁺', color: '#FF8A65', count: 8 }, { f: 'Cl⁻',   color: '#AED581', count: 16 }],
+      right: [{ f: 'Na⁺',  color: '#FFD54F', count: 16 }, { f: 'CO₃²⁻', color: '#CE93D8', count: 8 }],
+      reacts: ['Ca²⁺', 'CO₃²⁻'],
+      spectators: ['Cl⁻', 'Na⁺'],
+      product: { f: 'CaCO₃', color: '#F5F5F5' },
+      mol:      'CaCl₂ + Na₂CO₃ <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> CaCO₃<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> + 2NaCl',
+      full_ion: 'Ca²⁺ + 2Cl⁻ + 2Na⁺ + CO₃²⁻ <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> CaCO₃<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> + 2Na⁺ + 2Cl⁻',
+      net_ion:  'Ca²⁺ + CO₃²⁻ <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> CaCO₃<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>',
+      type: 'precip', pcolor: '#F5F5F5', pname: 'CaCO₃ — белый осадок (мел)',
+      sign: '<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>', signColor: '#F5F5F5',
+    },
+  };
+
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.ctx    = canvas.getContext('2d');
+    this.rxnId  = 'ba_so4';
+    this._raf   = null;
+    this._last  = 0;
+    this._t     = 0;
+    this._phase = 'idle';   // idle | mixing | pairing | done
+    this._prog  = 0;
+    this._stepIdx   = 0;
+    this._stepTimer = 0;
+    this._ions   = [];
+    this._pairs  = [];
+    this._precip = [];
+    this._gas    = [];
+    this.W = 0; this.H = 0;
+    this.onUpdate = null;
+    this.fit();
+    this._initIons();
+  }
+
+  fit() {
+    const dpr = window.devicePixelRatio || 1;
+    const W = this.canvas.offsetWidth  || 600;
+    const H = this.canvas.offsetHeight || 400;
+    this.canvas.width  = Math.round(W * dpr);
+    this.canvas.height = Math.round(H * dpr);
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this.W = W; this.H = H;
+    this._initIons();
+  }
+
+  setReaction(id) {
+    if (!IonExSim.RXN[id]) return;
+    this.rxnId = id;
+    this.reset();
+  }
+
+  reset() {
+    this._phase = 'idle'; this._prog = 0;
+    this._stepIdx = 0; this._stepTimer = 0;
+    this._pairs = []; this._precip = []; this._gas = [];
+    this._initIons();
+    this.draw();
+  }
+
+  _initIons() {
+    const { W, H } = this;
+    const rxn = IonExSim.RXN[this.rxnId];
+    const bTop = H * 0.10, bBot = H * 0.78;
+    this._ions = [];
+    /* Left beaker ions */
+    rxn.left.forEach(spec => {
+      for (let i = 0; i < spec.count; i++) {
+        this._ions.push({
+          x: W * 0.10 + Math.random() * W * 0.36,
+          y: bTop + 20 + Math.random() * (bBot - bTop - 40),
+          vx: (Math.random() - 0.5) * 0.8, vy: (Math.random() - 0.5) * 0.8,
+          spec: spec.f, color: spec.color,
+          r: 8 + Math.random() * 3,
+          phase: Math.random() * Math.PI * 2,
+          active: true, side: 'L',
+          reacts: rxn.reacts.includes(spec.f),
+          paired: false,
+        });
+      }
+    });
+    /* Right beaker ions */
+    rxn.right.forEach(spec => {
+      for (let i = 0; i < spec.count; i++) {
+        this._ions.push({
+          x: W * 0.54 + Math.random() * W * 0.36,
+          y: bTop + 20 + Math.random() * (bBot - bTop - 40),
+          vx: (Math.random() - 0.5) * 0.8, vy: (Math.random() - 0.5) * 0.8,
+          spec: spec.f, color: spec.color,
+          r: 8 + Math.random() * 3,
+          phase: Math.random() * Math.PI * 2,
+          active: true, side: 'R',
+          reacts: rxn.reacts.includes(spec.f),
+          paired: false,
+        });
+      }
+    });
+  }
+
+  start() {
+    if (this._phase !== 'idle') this.reset();
+    this._phase = 'mixing'; this._prog = 0;
+    if (this._raf) return;
+    this._last = performance.now();
+    const loop = t => { this._raf = requestAnimationFrame(loop); this._tick(t); };
+    this._raf = requestAnimationFrame(loop);
+  }
+
+  stop() { cancelAnimationFrame(this._raf); this._raf = null; }
+
+  /* ── Физика ─────────────────────────────────────────────────────── */
+
+  _tick(t) {
+    const dt = Math.min((t - this._last) / 1000, 0.05);
+    this._last = t; this._t += dt;
+    const { W, H } = this;
+    const rxn = IonExSim.RXN[this.rxnId];
+
+    if (this._phase === 'mixing') {
+      this._prog = Math.min(1, this._prog + dt * 0.32);
+      this._ions.forEach(ion => {
+        if (!ion.active) return;
+        const tx = W * 0.5 + (Math.random() - 0.5) * W * 0.72;
+        const ty = H * 0.44 + (Math.random() - 0.5) * H * 0.38;
+        ion.vx += (tx - ion.x) * 0.003 * this._prog;
+        ion.vy += (ty - ion.y) * 0.003 * this._prog;
+        ion.vx += (Math.random() - 0.5) * 0.7;
+        ion.vy += (Math.random() - 0.5) * 0.7;
+        ion.vx *= 0.88; ion.vy *= 0.88;
+        ion.x += ion.vx; ion.y += ion.vy;
+        ion.phase += dt * 2;
+        this._clampIon(ion);
+      });
+      if (this._prog >= 1) { this._phase = 'pairing'; this._prog = 0; }
+    }
+
+    if (this._phase === 'pairing') {
+      this._prog = Math.min(1, this._prog + dt * 0.16);
+      this._stepTimer += dt;
+      if (this._stepTimer > 1.5 && this._stepIdx < 2) { this._stepIdx++; this._stepTimer = 0; }
+
+      this._ions.forEach(ion => {
+        if (!ion.active || ion.paired) return;
+        ion.vx += (Math.random() - 0.5) * 0.8;
+        ion.vy += (Math.random() - 0.5) * 0.8;
+        ion.vx *= 0.88; ion.vy *= 0.88;
+        ion.x += ion.vx; ion.y += ion.vy;
+        ion.phase += dt * 2;
+        this._clampIon(ion);
+      });
+
+      /* Pair up reactive ions */
+      if (Math.random() < 0.10 * (0.5 + this._prog)) this._doPair(rxn);
+
+      /* Animate pairs */
+      this._pairs.forEach(p => {
+        p.flashT = Math.max(0, p.flashT - dt * 2.5);
+        if (rxn.type === 'precip') {
+          p.vy = Math.min(p.vy + 0.15, 5);
+          p.y += p.vy;
+          if (p.y >= H * 0.78 && !p.settled) {
+            p.y = H * 0.78; p.vy = 0; p.settled = true;
+            this._precip.push({ x: p.x, y: p.y, r: p.r, id: p.id });
+          }
+        } else if (rxn.type === 'gas') {
+          p.vy = Math.max(p.vy - 0.08, -4);
+          p.y += p.vy;
+          p.alpha = Math.max(0, p.alpha - 0.004);
+        }
+      });
+      this._pairs = this._pairs.filter(p => !p.settled && (p.alpha === undefined || p.alpha > 0));
+
+      if (this._prog >= 1) { this._phase = 'done'; this._stepIdx = 2; }
+    }
+
+    if (this._phase === 'done') {
+      this._ions.forEach(ion => {
+        if (!ion.active || ion.paired) return;
+        ion.vx += (Math.random() - 0.5) * 0.45;
+        ion.vy += (Math.random() - 0.5) * 0.45;
+        ion.vx *= 0.92; ion.vy *= 0.92;
+        ion.x += ion.vx; ion.y += ion.vy;
+        ion.phase += dt;
+        this._clampIon(ion);
+      });
+    }
+
+    this.draw();
+    if (this.onUpdate) this.onUpdate(this.info());
+  }
+
+  _clampIon(ion) {
+    const { W, H } = this;
+    const bTop = H * 0.10, bBot = H * 0.78;
+    if (ion.x < ion.r + 6)     { ion.x = ion.r + 6;     ion.vx *= -0.5; }
+    if (ion.x > W - ion.r - 6) { ion.x = W - ion.r - 6; ion.vx *= -0.5; }
+    if (ion.y < bTop + ion.r)  { ion.y = bTop + ion.r;   ion.vy *= -0.5; }
+    if (ion.y > bBot - ion.r)  { ion.y = bBot - ion.r;   ion.vy *= -0.5; }
+  }
+
+  _doPair(rxn) {
+    const r1 = rxn.reacts[0], r2 = rxn.reacts[1];
+    const pool1 = this._ions.filter(i => i.active && !i.paired && i.spec === r1);
+    const pool2 = this._ions.filter(i => i.active && !i.paired && i.spec === r2);
+    if (!pool1.length || !pool2.length) return;
+    const a = pool1[Math.floor(Math.random() * pool1.length)];
+    const b = pool2[Math.floor(Math.random() * pool2.length)];
+    a.paired = true; b.paired = true;
+    a.active = false; b.active = false;
+    this._pairs.push({
+      id: this._t + Math.random(),
+      x: (a.x + b.x) / 2, y: (a.y + b.y) / 2,
+      vy: rxn.type === 'gas' ? -2 : 0,
+      r: 7, flashT: 1, settled: false, alpha: 1,
+    });
+  }
+
+  /* ── Рендеринг ──────────────────────────────────────────────────── */
+
+  draw() {
+    const { ctx, W, H } = this;
+    const rxn = IonExSim.RXN[this.rxnId];
+
+    ctx.fillStyle = '#07071A';
+    ctx.fillRect(0, 0, W, H);
+
+    /* Dot grid */
+    ctx.fillStyle = 'rgba(255,255,255,0.07)';
+    for (let x = 0; x < W; x += 28) {
+      for (let y = 0; y < H; y += 28) {
+        ctx.beginPath(); ctx.arc(x, y, 0.8, 0, Math.PI * 2); ctx.fill();
+      }
+    }
+
+    if (this._phase === 'idle') {
+      this._drawTwoBeakers(ctx, W, H, rxn);
+    } else {
+      this._drawSingleBeaker(ctx, W, H);
+    }
+
+    this._drawIons(ctx, rxn);
+    this._drawPairs(ctx, rxn);
+    this._drawPrecipitate(ctx, rxn);
+    this._drawPanel(ctx, W, H, rxn);
+  }
+
+  _drawTwoBeakers(ctx, W, H, rxn) {
+    const drawB = (x, y, w, h, ions) => {
+      ctx.save();
+      ctx.strokeStyle = 'rgba(120,185,255,0.55)'; ctx.lineWidth = 2;
+      ctx.beginPath();
+      ctx.moveTo(x, y); ctx.lineTo(x, y + h);
+      ctx.lineTo(x + w, y + h); ctx.lineTo(x + w, y);
+      ctx.stroke();
+      ctx.beginPath(); ctx.moveTo(x - 4, y); ctx.lineTo(x + w + 4, y); ctx.stroke();
+      /* Rim highlight */
+      const hlg = ctx.createLinearGradient(x, y, x + 14, y + h);
+      hlg.addColorStop(0, 'rgba(200,230,255,0.15)');
+      hlg.addColorStop(1, 'rgba(200,230,255,0.02)');
+      ctx.strokeStyle = hlg; ctx.lineWidth = 5;
+      ctx.beginPath(); ctx.moveTo(x + 7, y + 6); ctx.lineTo(x + 7, y + h - 6); ctx.stroke();
+      /* Formula label */
+      ctx.fillStyle = 'rgba(255,255,255,0.22)'; ctx.font = 'bold 11px monospace';
+      ctx.textAlign = 'center'; ctx.textBaseline = 'bottom';
+      const label = ions.map(s => s.f).join(', ');
+      ctx.fillText(label, x + w / 2, y - 4);
+      ctx.restore();
+    };
+    const bTop = H * 0.10, bH = H * 0.70;
+    drawB(W * 0.04, bTop, W * 0.40, bH, rxn.left);
+    drawB(W * 0.56, bTop, W * 0.40, bH, rxn.right);
+
+    /* Mix arrow */
+    ctx.save();
+    const mx = W * 0.50, my = H * 0.44;
+    ctx.strokeStyle = 'rgba(255,255,255,0.22)'; ctx.lineWidth = 2;
+    ctx.fillStyle   = 'rgba(255,255,255,0.22)';
+    ctx.beginPath(); ctx.moveTo(mx - 16, my); ctx.lineTo(mx + 16, my); ctx.stroke();
+    ctx.beginPath(); ctx.moveTo(mx + 10, my - 5); ctx.lineTo(mx + 16, my); ctx.lineTo(mx + 10, my + 5); ctx.fill();
+    ctx.restore();
+  }
+
+  _drawSingleBeaker(ctx, W, H) {
+    const bx = W * 0.04, by = H * 0.08, bw = W * 0.92, bh = H * 0.72;
+    ctx.save();
+    ctx.strokeStyle = 'rgba(120,185,255,0.60)'; ctx.lineWidth = 2.5;
+    ctx.beginPath();
+    ctx.moveTo(bx, by); ctx.lineTo(bx, by + bh);
+    ctx.lineTo(bx + bw, by + bh); ctx.lineTo(bx + bw, by);
+    ctx.stroke();
+    ctx.beginPath(); ctx.moveTo(bx - 5, by); ctx.lineTo(bx + bw + 5, by); ctx.stroke();
+    const hlg = ctx.createLinearGradient(bx, by, bx + 18, by + bh);
+    hlg.addColorStop(0, 'rgba(200,230,255,0.18)');
+    hlg.addColorStop(1, 'rgba(200,230,255,0.02)');
+    ctx.strokeStyle = hlg; ctx.lineWidth = 6;
+    ctx.beginPath(); ctx.moveTo(bx + 8, by + 8); ctx.lineTo(bx + 8, by + bh - 8); ctx.stroke();
+    ctx.restore();
+  }
+
+  _drawIons(ctx, rxn) {
+    this._ions.forEach(ion => {
+      if (!ion.active) return;
+      const isSpec = rxn.spectators.includes(ion.spec);
+      ctx.save();
+      ctx.globalAlpha = (isSpec && this._phase !== 'idle') ? 0.40 : 0.88;
+      ctx.shadowColor = ion.color;
+      ctx.shadowBlur  = 7 + Math.sin(ion.phase) * 3;
+      ctx.beginPath(); ctx.arc(ion.x, ion.y, ion.r, 0, Math.PI * 2);
+      ctx.fillStyle = ion.color; ctx.fill();
+      ctx.strokeStyle = 'rgba(255,255,255,0.18)'; ctx.lineWidth = 1; ctx.stroke();
+      ctx.shadowBlur = 0; ctx.globalAlpha = 1;
+      /* Formula label */
+      const fs = Math.min(Math.round(ion.r * 0.60), 9);
+      ctx.fillStyle = 'rgba(0,0,0,0.80)';
+      ctx.font = `bold ${fs}px monospace`;
+      ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+      ctx.fillText(ion.spec, ion.x, ion.y);
+      ctx.restore();
+    });
+  }
+
+  _drawPairs(ctx, rxn) {
+    const pcolor = rxn.pcolor || rxn.gcolor || '#FFF';
+    this._pairs.forEach(p => {
+      ctx.save();
+      const alpha = p.alpha !== undefined ? p.alpha : 1;
+      ctx.globalAlpha = alpha * 0.92;
+      ctx.shadowColor = p.flashT > 0 ? '#FFFFFF' : pcolor;
+      ctx.shadowBlur  = p.flashT > 0 ? 28 * p.flashT : 8;
+      ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
+      ctx.fillStyle = p.flashT > 0 ? `rgba(255,255,255,${p.flashT * 0.9})` : pcolor;
+      ctx.fill();
+      ctx.shadowBlur = 0; ctx.globalAlpha = 1;
+      /* Product label */
+      ctx.fillStyle = 'rgba(0,0,0,0.80)';
+      ctx.font = 'bold 7px monospace';
+      ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+      ctx.fillText(rxn.product.f, p.x, p.y);
+      ctx.restore();
+    });
+  }
+
+  _drawPrecipitate(ctx, rxn) {
+    if (rxn.type !== 'precip' || !this._precip.length) return;
+    ctx.save();
+    this._precip.forEach(p => {
+      ctx.shadowColor = rxn.pcolor; ctx.shadowBlur = 3;
+      ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
+      ctx.fillStyle = rxn.pcolor; ctx.fill();
+    });
+    ctx.restore();
+    if (this._precip.length > 4) {
+      ctx.save();
+      ctx.fillStyle = rxn.pcolor; ctx.font = 'bold 10px monospace';
+      ctx.textAlign = 'center'; ctx.textBaseline = 'bottom';
+      ctx.shadowColor = rxn.pcolor; ctx.shadowBlur = 6;
+      ctx.fillText(`↓ ${rxn.pname}`, this.W / 2, this.H * 0.80 - 4);
+      ctx.restore();
+    }
+  }
+
+  _drawPanel(ctx, W, H, rxn) {
+    const py = H * 0.82;
+    ctx.fillStyle = 'rgba(7,7,26,0.95)';
+    ctx.fillRect(0, py, W, H - py);
+    ctx.strokeStyle = 'rgba(100,165,255,0.22)'; ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.moveTo(0, py); ctx.lineTo(W, py); ctx.stroke();
+
+    if (this._phase === 'idle') {
+      ctx.fillStyle = '#37474F'; ctx.font = '11px monospace';
+      ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+      ctx.fillText('← Нажми «Смешать» для начала реакции →', W / 2, py + (H - py) / 2);
+      return;
+    }
+
+    const steps = [
+      { lbl: 'Молекулярное:', txt: rxn.mol,      col: '#B0BEC5' },
+      { lbl: 'Полное ионное:',  txt: rxn.full_ion, col: '#CE93D8' },
+      { lbl: 'Краткое ионное:', txt: rxn.net_ion,  col: '#FFD166' },
+    ];
+
+    const panH = H - py;
+    const n = Math.min(this._stepIdx + 1, steps.length);
+    for (let i = 0; i < n; i++) {
+      const s = steps[i];
+      const y = py + 11 + i * (panH * 0.29);
+      ctx.save();
+      if (i === this._stepIdx && this._phase !== 'done') {
+        ctx.fillStyle = 'rgba(255,255,255,0.04)';
+        ctx.fillRect(8, y - 9, W - 16, 20);
+      }
+      ctx.fillStyle = s.col; ctx.font = 'bold 9.5px monospace';
+      ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
+      ctx.fillText(s.lbl, 14, y);
+      ctx.fillStyle = (i === this._stepIdx && this._phase !== 'done') ? '#FFF' : 'rgba(255,255,255,0.62)';
+      ctx.font = '9.5px monospace';
+      ctx.fillText(s.txt, 14 + ctx.measureText(s.lbl).width + 8, y);
+      ctx.restore();
+    }
+
+    if (this._phase === 'done') {
+      ctx.save();
+      ctx.fillStyle = rxn.signColor; ctx.font = 'bold 10px monospace';
+      ctx.textAlign = 'right'; ctx.textBaseline = 'top';
+      ctx.shadowColor = rxn.signColor; ctx.shadowBlur = 8;
+      const label = rxn.type === 'precip' ? `<svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg> ${rxn.sign} осадок` : `<svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg> ${rxn.sign} газ`;
+      ctx.fillText(label, W - 14, py + 3);
+      ctx.restore();
+    }
+  }
+
+  info() {
+    const rxn = IonExSim.RXN[this.rxnId];
+    return {
+      rxn:    rxn.name,
+      phase:  this._phase,
+      prog:   Math.round(this._prog * 100),
+      precip: this._precip.length,
+    };
+  }
+}
diff --git a/frontend/js/labs/isoprocess.js b/frontend/js/labs/isoprocess.js
new file mode 100644
index 0000000..611fe15
--- /dev/null
+++ b/frontend/js/labs/isoprocess.js
@@ -0,0 +1,463 @@
+'use strict';
+/* ══════════════════════════════════════════════════════════════
+   IsoprocessSim — PV-diagram for 4 ideal-gas isoprocesses
+   n = 1, R = 0.0821 L·atm/mol·K; energies in Joules
+   Isothermal  PV = const          ΔU=0, W=nRT·ln(V2/V1), Q=W
+   Isochoric   V  = const          W=0,  ΔU=νCvΔT,        Q=ΔU
+   Isobaric    P  = const          W=PΔV, ΔU=νCvΔT,       Q=ΔU+W
+   Adiabatic   PV^γ = const        Q=0,  ΔU=-W,            W=PΔV/(γ-1)
+   ══════════════════════════════════════════════════════════════ */
+
+class IsoprocessSim {
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.ctx    = canvas.getContext('2d');
+    this.W = 0; this.H = 0;
+
+    /* physics */
+    this.n     = 1;
+    this.R     = 0.0821;  // L·atm / mol·K
+    this.R_J   = 8.314;   // J / mol·K
+    this.gamma = 1.4;     // 7/5 diatomic default
+
+    /* state */
+    this.P1 = 3.0;     // atm
+    this.V1 = 10.0;    // L
+    this._ratio = 0.5; // 0..1, maps end state position along process
+
+    /* process */
+    this.process = 'isothermal';
+
+    /* axis range */
+    this.Vmin = 1; this.Vmax = 33;
+    this.Pmin = 0.2; this.Pmax = 9.5;
+
+    /* margins */
+    this.ML = 52; this.MB = 46; this.MT = 20; this.MR = 18;
+
+    this._drag = null; // 'state1' | 'state2'
+    this.onUpdate = null;
+
+    this._bindEvents();
+    new ResizeObserver(() => { this.fit(); this.draw(); }).observe(canvas.parentElement);
+  }
+
+  /* ── public API ─────────────────────────────── */
+
+  fit() {
+    const dpr = window.devicePixelRatio || 1;
+    const w = this.canvas.offsetWidth || 600;
+    const h = this.canvas.offsetHeight || 400;
+    this.canvas.width  = w * dpr;
+    this.canvas.height = h * dpr;
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this.W = w; this.H = h;
+  }
+
+  setProcess(p) { this.process = p; this.draw(); this._emit(); }
+  setGamma(g)   { this.gamma = +g; this.draw(); this._emit(); }
+  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));
+    this.draw(); this._emit();
+  }
+  setRatio(r) { this._ratio = Math.max(0.01, Math.min(0.99, +r)); this.draw(); this._emit(); }
+
+  /* ── coordinate transforms ─────────────────── */
+
+  _pw() { return this.W - this.ML - this.MR; }
+  _ph() { return this.H - this.MT - this.MB; }
+
+  _vx(v) { return this.ML + (v - this.Vmin) / (this.Vmax - this.Vmin) * this._pw(); }
+  _py(p) { return this.MT + (1 - (p - this.Pmin) / (this.Pmax - this.Pmin)) * this._ph(); }
+  _xv(x) { return this.Vmin + (x - this.ML) / this._pw() * (this.Vmax - this.Vmin); }
+  _yp(y) { return this.Pmin + (1 - (y - this.MT) / this._ph()) * (this.Pmax - this.Pmin); }
+
+  /* ── physics ───────────────────────────────── */
+
+  _T(P, V) { return P * V / (this.n * this.R); }
+
+  _state2() {
+    const { P1, V1, _ratio, gamma } = this;
+    /* ratio in [0..1] → multiplier in [0.2..3.5] for V2/V1 or P2/P1 */
+    const mult = 0.2 + _ratio * 3.3;
+    const clampV = v => Math.max(this.Vmin + 0.5, Math.min(this.Vmax - 0.5, v));
+    const clampP = p => Math.max(this.Pmin + 0.05, Math.min(this.Pmax - 0.1, p));
+
+    switch (this.process) {
+      case 'isothermal': {
+        const V2 = clampV(V1 * mult);
+        return { P2: clampP(P1 * V1 / V2), V2 };
+      }
+      case 'isochoric': {
+        return { P2: clampP(P1 * mult), V2: V1 };
+      }
+      case 'isobaric': {
+        const V2 = clampV(V1 * mult);
+        return { P2: P1, V2 };
+      }
+      case 'adiabatic': {
+        const V2 = clampV(V1 * mult);
+        return { P2: clampP(P1 * Math.pow(V1 / V2, gamma)), V2 };
+      }
+    }
+    return { P2: P1, V2: V1 };
+  }
+
+  info() {
+    const { P1, V1, n, R_J, gamma } = this;
+    const T1 = this._T(P1, V1);
+    const { P2, V2 } = this._state2();
+    const T2 = this._T(P2, V2);
+
+    /* internal energy: ΔU = νCvΔT,  Cv = R/(γ-1) */
+    const Cv_J = R_J / (gamma - 1);
+    const dU_J = n * Cv_J * (T2 - T1);
+
+    /* P in Pa = P_atm * 101325,  V in m³ = V_L * 0.001 */
+    const P1Pa = P1 * 101325, P2Pa = P2 * 101325;
+    const V1m3 = V1 * 0.001,  V2m3 = V2 * 0.001;
+
+    let W_J = 0, Q_J = 0;
+    switch (this.process) {
+      case 'isothermal':
+        W_J = n * R_J * T1 * Math.log(V2 / V1);
+        Q_J = W_J; break;
+      case 'isochoric':
+        W_J = 0; Q_J = dU_J; break;
+      case 'isobaric':
+        W_J = P1Pa * (V2m3 - V1m3);
+        Q_J = dU_J + W_J; break;
+      case 'adiabatic':
+        Q_J = 0;
+        W_J = -dU_J; break;
+    }
+
+    const fmt = x => (x >= 0 ? '+' : '') + Math.round(x);
+    return {
+      P1: P1.toFixed(2), V1: V1.toFixed(1), T1: Math.round(T1),
+      P2: P2.toFixed(2), V2: V2.toFixed(1), T2: Math.round(T2),
+      W: fmt(W_J), Q: fmt(Q_J), dU: fmt(Math.round(dU_J)),
+      W_raw: W_J, Q_raw: Q_J, dU_raw: dU_J,
+      process: this.process,
+    };
+  }
+
+  _emit() { if (this.onUpdate) this.onUpdate(this.info()); }
+
+  /* ── draw ──────────────────────────────────── */
+
+  draw() {
+    const { ctx, W, H } = this;
+    if (!W || !H) return;
+    ctx.fillStyle = '#0D0D1A';
+    ctx.fillRect(0, 0, W, H);
+    this._drawGrid(ctx);
+    this._drawBgCurves(ctx);
+    this._drawActiveCurve(ctx);
+    this._drawPoints(ctx);
+    this._drawInfoBox(ctx);
+  }
+
+  _drawGrid(ctx) {
+    const { ML, MT, MR, MB } = this;
+    const pw = this._pw(), ph = this._ph();
+
+    /* plot background */
+    ctx.fillStyle = 'rgba(255,255,255,0.018)';
+    ctx.fillRect(ML, MT, pw, ph);
+
+    /* grid */
+    ctx.strokeStyle = 'rgba(255,255,255,0.055)';
+    ctx.lineWidth = 1; ctx.setLineDash([]);
+    for (let v = 5; v <= 30; v += 5) {
+      const x = this._vx(v);
+      ctx.beginPath(); ctx.moveTo(x, MT); ctx.lineTo(x, MT + ph); ctx.stroke();
+    }
+    for (let p = 1; p <= 9; p++) {
+      const y = this._py(p);
+      ctx.beginPath(); ctx.moveTo(ML, y); ctx.lineTo(ML + pw, y); ctx.stroke();
+    }
+
+    /* axes */
+    ctx.strokeStyle = 'rgba(255,255,255,0.3)';
+    ctx.lineWidth = 1.5;
+    ctx.beginPath();
+    ctx.moveTo(ML, MT); ctx.lineTo(ML, MT + ph); ctx.lineTo(ML + pw, MT + ph);
+    ctx.stroke();
+
+    /* tick labels */
+    ctx.font = '11px Manrope, system-ui, sans-serif';
+    ctx.fillStyle = 'rgba(255,255,255,0.45)';
+    ctx.textAlign = 'right'; ctx.textBaseline = 'middle';
+    for (let p = 1; p <= 9; p++) {
+      const y = this._py(p);
+      if (y < MT + 2 || y > MT + ph - 2) continue;
+      ctx.fillText(p, ML - 6, y);
+    }
+    ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+    for (let v = 5; v <= 30; v += 5) {
+      const x = this._vx(v);
+      ctx.fillText(v, x, MT + ph + 5);
+    }
+
+    /* axis titles */
+    ctx.fillStyle = 'rgba(255,255,255,0.55)';
+    ctx.font = '12px Manrope, system-ui, sans-serif';
+    ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+    ctx.fillText('V, л', ML + pw / 2, MT + ph + 32);
+    ctx.save();
+    ctx.translate(13, MT + ph / 2);
+    ctx.rotate(-Math.PI / 2);
+    ctx.fillText('P, атм', 0, 0);
+    ctx.restore();
+  }
+
+  _COLORS = {
+    isothermal: '#EF476F',
+    isochoric:  '#06D6E0',
+    isobaric:   '#7BF5A4',
+    adiabatic:  '#FFD166',
+  };
+
+  /* draw one process curve through (P1,V1) */
+  _curve(ctx, process, alpha, lw, dashed) {
+    const { P1, V1, gamma, Vmin, Vmax, Pmin, Pmax } = this;
+    ctx.save();
+    ctx.globalAlpha = alpha;
+    ctx.strokeStyle = this._COLORS[process];
+    ctx.lineWidth = lw;
+    ctx.setLineDash(dashed ? [5, 4] : []);
+    ctx.beginPath();
+
+    if (process === 'isochoric') {
+      const x = this._vx(V1);
+      ctx.moveTo(x, this._py(Pmax));
+      ctx.lineTo(x, this._py(Pmin));
+    } else {
+      let started = false;
+      const steps = 300;
+      for (let i = 0; i <= steps; i++) {
+        const v = Vmin + (Vmax - Vmin) * i / steps;
+        let p;
+        if (process === 'isothermal') p = P1 * V1 / v;
+        else if (process === 'isobaric') p = P1;
+        else p = P1 * Math.pow(V1 / v, gamma); // adiabatic
+        if (p < Pmin || p > Pmax + 0.1) { started = false; continue; }
+        const x = this._vx(v), y = this._py(Math.min(p, Pmax));
+        if (!started) { ctx.moveTo(x, y); started = true; }
+        else ctx.lineTo(x, y);
+      }
+    }
+    ctx.stroke();
+    ctx.setLineDash([]);
+    ctx.restore();
+  }
+
+  _drawBgCurves(ctx) {
+    for (const p of ['isothermal', 'isochoric', 'isobaric', 'adiabatic']) {
+      if (p !== this.process) this._curve(ctx, p, 0.14, 1.2, true);
+    }
+    /* legend dots */
+    const names = { isothermal: 'Изотерма', isochoric: 'Изохора', isobaric: 'Изобара', adiabatic: 'Адиабата' };
+    ctx.font = '10px Manrope, system-ui, sans-serif';
+    let lx = this.ML + this._pw() - 8, ly = this.MT + 8;
+    ctx.textAlign = 'right'; ctx.textBaseline = 'top';
+    for (const [proc, label] of Object.entries(names)) {
+      const col = this._COLORS[proc];
+      const isCur = proc === this.process;
+      ctx.globalAlpha = isCur ? 0.85 : 0.3;
+      ctx.fillStyle = col;
+      ctx.beginPath(); ctx.arc(lx + 5, ly + 4, 4, 0, Math.PI * 2); ctx.fill();
+      ctx.fillText(label, lx - 3, ly);
+      ly += 16;
+    }
+    ctx.globalAlpha = 1;
+  }
+
+  _drawActiveCurve(ctx) {
+    /* full curve dimmed */
+    this._curve(ctx, this.process, 0.3, 1.5, false);
+
+    /* highlighted segment state1 → state2 */
+    const { P1, V1, gamma } = this;
+    const { P2, V2 } = this._state2();
+    const color = this._COLORS[this.process];
+
+    ctx.save();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 2.8;
+    ctx.setLineDash([]);
+
+    const steps = 200;
+    const [Vs, Ve] = V2 >= V1 ? [V1, V2] : [V2, V1];
+
+    if (this.process === 'isochoric') {
+      const x = this._vx(V1);
+      const y1c = this._py(P1), y2c = this._py(P2);
+      ctx.beginPath(); ctx.moveTo(x, y1c); ctx.lineTo(x, y2c); ctx.stroke();
+      this._arrowHead(ctx, x, y1c, x, y2c, color);
+    } else {
+      ctx.beginPath();
+      let started = false;
+      for (let i = 0; i <= steps; i++) {
+        const v = Vs + (Ve - Vs) * i / steps;
+        let p;
+        if (this.process === 'isothermal') p = P1 * V1 / v;
+        else if (this.process === 'isobaric') p = P1;
+        else p = P1 * Math.pow(V1 / v, gamma);
+        const x = this._vx(v), y = this._py(p);
+        if (!started) { ctx.moveTo(x, y); started = true; }
+        else ctx.lineTo(x, y);
+      }
+      ctx.stroke();
+
+      /* arrow at ~80% of segment */
+      const vArr = Vs + (Ve - Vs) * 0.8;
+      const vArr2 = Vs + (Ve - Vs) * 0.82;
+      let p1a, p2a;
+      if (this.process === 'isothermal') { p1a = P1*V1/vArr; p2a = P1*V1/vArr2; }
+      else if (this.process === 'isobaric') { p1a = P1; p2a = P1; }
+      else { p1a = P1*Math.pow(V1/vArr,gamma); p2a = P1*Math.pow(V1/vArr2,gamma); }
+      /* ensure arrow points from 1→2 */
+      const dir = V2 > V1 ? 1 : -1;
+      this._arrowHead(ctx,
+        this._vx(vArr + dir*0), this._py(p1a + dir*0),
+        this._vx(vArr2 + dir*0), this._py(p2a + dir*0), color);
+    }
+    ctx.restore();
+  }
+
+  _arrowHead(ctx, x1, y1, x2, y2, color) {
+    const angle = Math.atan2(y2 - y1, x2 - x1);
+    const s = 10;
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(x2, y2);
+    ctx.lineTo(x2 - s * Math.cos(angle - 0.4), y2 - s * Math.sin(angle - 0.4));
+    ctx.lineTo(x2 - s * Math.cos(angle + 0.4), y2 - s * Math.sin(angle + 0.4));
+    ctx.closePath(); ctx.fill();
+  }
+
+  _drawPoints(ctx) {
+    const { P2, V2 } = this._state2();
+    const color = this._COLORS[this.process];
+
+    const dot = (x, y, fill, label, textX, textY) => {
+      ctx.fillStyle = fill;
+      ctx.beginPath(); ctx.arc(x, y, 7, 0, Math.PI * 2); ctx.fill();
+      ctx.strokeStyle = 'rgba(255,255,255,0.55)'; ctx.lineWidth = 1.5;
+      ctx.beginPath(); ctx.arc(x, y, 7, 0, Math.PI * 2); ctx.stroke();
+      ctx.font = 'bold 11px Manrope, system-ui, sans-serif';
+      ctx.fillStyle = fill; ctx.textAlign = 'center'; ctx.textBaseline = 'bottom';
+      ctx.fillText(label, textX, textY);
+    };
+
+    const x1 = this._vx(this.V1), y1 = this._py(this.P1);
+    const x2 = this._vx(V2),     y2 = this._py(P2);
+    dot(x1, y1, '#9B5DE5', '1', x1 - 12, y1 - 4);
+    dot(x2, y2, color,     '2', x2 + 12, y2 - 4);
+  }
+
+  _drawInfoBox(ctx) {
+    const info = this.info();
+    const color = this._COLORS[info.process];
+    const names = { isothermal:'Изотермический', isochoric:'Изохорный', isobaric:'Изобарный', adiabatic:'Адиабатический' };
+    const formulas = { isothermal:'PV = const', isochoric:'V = const', isobaric:'P = const', adiabatic:'PV^γ = const' };
+
+    const bx = this.ML + 6, by = this.MT + 6;
+    const boxW = 205, boxH = 98;
+
+    ctx.fillStyle = 'rgba(13,13,26,0.9)';
+    ctx.beginPath(); ctx.roundRect(bx, by, boxW, boxH, 8); ctx.fill();
+
+    ctx.font = 'bold 11px Manrope, system-ui, sans-serif';
+    ctx.fillStyle = color; ctx.textAlign = 'left'; ctx.textBaseline = 'top';
+    ctx.fillText(`${names[info.process]}  ${formulas[info.process]}`, bx + 10, by + 8);
+
+    ctx.font = '11px Manrope, system-ui, sans-serif';
+    ctx.fillStyle = 'rgba(255,255,255,0.6)';
+    ctx.fillText(`T₁ = ${info.T1} K   →   T₂ = ${info.T2} K`, bx + 10, by + 28);
+
+    const wColor = info.W_raw > 0 ? '#7BF5A4' : info.W_raw < 0 ? '#EF476F' : 'rgba(255,255,255,0.4)';
+    const qColor = info.Q_raw > 0 ? '#FFD166' : info.Q_raw < 0 ? '#06D6E0' : 'rgba(255,255,255,0.4)';
+
+    ctx.fillStyle = 'rgba(255,255,255,0.4)'; ctx.fillText('W =', bx + 10, by + 48);
+    ctx.fillStyle = wColor; ctx.fillText(`${info.W} Дж`, bx + 38, by + 48);
+
+    ctx.fillStyle = 'rgba(255,255,255,0.4)'; ctx.fillText('Q =', bx + 10, by + 65);
+    ctx.fillStyle = qColor; ctx.fillText(`${info.Q} Дж`, bx + 38, by + 65);
+
+    ctx.fillStyle = 'rgba(255,255,255,0.4)'; ctx.fillText('ΔU =', bx + 10, by + 82);
+    ctx.fillStyle = 'rgba(255,255,255,0.65)'; ctx.fillText(`${info.dU} Дж`, bx + 40, by + 82);
+  }
+
+  /* ── events ─────────────────────────────────── */
+
+  _bindEvents() {
+    const cv = this.canvas;
+
+    const pos = e => {
+      const r = cv.getBoundingClientRect();
+      const t = e.touches ? e.touches[0] : e;
+      return {
+        px: (t.clientX - r.left) * (this.W / r.width),
+        py: (t.clientY - r.top)  * (this.H / r.height),
+      };
+    };
+
+    const hit = (px, py) => {
+      const x1 = this._vx(this.V1), y1 = this._py(this.P1);
+      if (Math.hypot(px - x1, py - y1) < 18) return 'state1';
+      const { P2, V2 } = this._state2();
+      const x2 = this._vx(V2), y2 = this._py(P2);
+      if (Math.hypot(px - x2, py - y2) < 18) return 'state2';
+      return null;
+    };
+
+    const clampV = v => Math.max(this.Vmin + 0.5, Math.min(this.Vmax - 0.5, v));
+    const clampP = p => Math.max(this.Pmin + 0.1, Math.min(this.Pmax - 0.1, p));
+
+    const onDown = e => { const { px, py } = pos(e); this._drag = hit(px, py); };
+
+    const onMove = e => {
+      if (!this._drag) return;
+      if (e.cancelable) e.preventDefault();
+      const { px, py } = pos(e);
+      const v = this._xv(px), p = this._yp(py);
+
+      if (this._drag === 'state1') {
+        this.V1 = clampV(v); this.P1 = clampP(p);
+      } else {
+        /* constrain state2 to current process curve */
+        switch (this.process) {
+          case 'isothermal': case 'isobaric': case 'adiabatic': {
+            const V2 = clampV(v);
+            this._ratio = Math.max(0.01, Math.min(0.99, (V2 / this.V1 - 0.2) / 3.3));
+            break;
+          }
+          case 'isochoric': {
+            const P2 = clampP(p);
+            this._ratio = Math.max(0.01, Math.min(0.99, (P2 / this.P1 - 0.2) / 3.3));
+            break;
+          }
+        }
+      }
+      this.draw(); this._emit();
+    };
+
+    const onUp = () => { this._drag = null; };
+
+    cv.addEventListener('mousedown', onDown);
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+    cv.addEventListener('touchstart', e => { if (e.touches.length === 1) onDown(e); }, { passive: true });
+    cv.addEventListener('touchmove',  e => onMove(e), { passive: false });
+    cv.addEventListener('touchend',   onUp);
+    cv.addEventListener('mousemove',  e => {
+      if (this._drag) { cv.style.cursor = 'grabbing'; return; }
+      const { px, py } = pos(e);
+      cv.style.cursor = hit(px, py) ? 'grab' : 'default';
+    });
+  }
+}
diff --git a/frontend/js/labs/magnetic.js b/frontend/js/labs/magnetic.js
new file mode 100644
index 0000000..b2e3cae
--- /dev/null
+++ b/frontend/js/labs/magnetic.js
@@ -0,0 +1,1055 @@
+'use strict';
+/* ══════════════════════════════════════════════════════════
+   MagneticSim — magnetic field of current-carrying wires
+   • Click canvas to place wire (• out / × in)
+   • Drag to reposition, double-click / right-click to remove
+   • Layers: colour map, field lines, vector arrows
+   • Particle: charged particle with Lorentz force (circular)
+   B field of wire at (x0,y0) with current I:
+     Bx = -k·I·(y-y0)/r²,  By = k·I·(x-x0)/r²
+   Colour map maps angle of B <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> hue, magnitude <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> brightness
+══════════════════════════════════════════════════════════ */
+
+class MagneticSim {
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.ctx    = canvas.getContext('2d');
+
+    this.sources  = [];   // {id, x, y, I}
+    this._nextId  = 1;
+    this.curI     = 6;    // current magnitude (user-adjustable)
+    this.addMode  = 'out'; // 'out' | 'in'
+
+    /* particle */
+    this._particle  = null;
+    this.particleOn = false;
+    this._pRaf      = null;
+    this._pLast     = 0;
+
+    /* layers */
+    this.layers = { colormap: true, fieldlines: true, vectors: false };
+
+    /* conductor (проводник в поле) */
+    this._cond = {
+      on: false,
+      x1: 0, y1: 0, x2: 0, y2: 0,   // set in fit()
+      I: 8,                            // conductor current
+      _dragEndpoint: null,             // 0 | 1 | 'body' | null
+    };
+
+    /* magnetic flux indicator (круг потока) */
+    this._flux = {
+      on: false,
+      x: 0, y: 0,                     // set in fit()
+      r: 55,
+      _dragging: false,
+    };
+
+    /* cursor B reading */
+    this._cursorB  = null;             // {x, y, bx, by, mag}
+    this._mousePos = null;
+
+    /* interaction */
+    this._drag    = null;   // index into sources[]
+    this._hovered = null;
+
+    /* offscreen canvas for pixel-level colour map */
+    this._oc  = null;   // created in fit()
+    this._ocW = 0;
+    this._ocH = 0;
+
+    this.W = 0; this.H = 0;
+    this.onUpdate = null;
+
+    this._bindEvents();
+  }
+
+  /* ────────────────────────────────
+     Sizing
+  ──────────────────────────────── */
+
+  fit() {
+    const rect = this.canvas.getBoundingClientRect();
+    const dpr  = window.devicePixelRatio || 1;
+    this.canvas.width  = rect.width  * dpr;
+    this.canvas.height = rect.height * dpr;
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this.W = rect.width;
+    this.H = rect.height;
+
+    const DS = 4;                          // downsample factor for colour map
+    this._ocW = Math.ceil(this.W / DS);
+    this._ocH = Math.ceil(this.H / DS);
+    this._oc  = document.createElement('canvas');
+    this._oc.width  = this._ocW;
+    this._oc.height = this._ocH;
+
+    this._initOverlays();
+
+    /* position conductor + flux relative to canvas */
+    if (this.W) {
+      this._cond.x1 = this.W * 0.25; this._cond.y1 = this.H * 0.5;
+      this._cond.x2 = this.W * 0.75; this._cond.y2 = this.H * 0.5;
+      this._flux.x  = this.W * 0.5;  this._flux.y  = this.H * 0.35;
+    }
+
+    this.draw();
+  }
+
+  /* init conductor / flux positions on first fit */
+  _initOverlays() {
+    this._cond.x1 = this.W * 0.25; this._cond.y1 = this.H * 0.5;
+    this._cond.x2 = this.W * 0.75; this._cond.y2 = this.H * 0.5;
+    this._flux.x  = this.W * 0.5;  this._flux.y  = this.H * 0.35;
+  }
+
+  /* ────────────────────────────────
+     Field calculation
+  ──────────────────────────────── */
+
+  _K = 8000;   // visual scaling constant
+
+  _field(px, py) {
+    let bx = 0, by = 0;
+    for (const s of this.sources) {
+      const dx = px - s.x, dy = py - s.y;
+      const r2 = dx * dx + dy * dy;
+      if (r2 < 4) continue;
+      const k = this._K * s.I / r2;
+      bx -= k * dy;
+      by += k * dx;
+    }
+    const mag = Math.hypot(bx, by);
+    return { bx, by, mag };
+  }
+
+  _fieldNorm(px, py) {
+    const { bx, by, mag } = this._field(px, py);
+    if (mag < 1e-12) return { nx: 0, ny: 0, mag: 0 };
+    return { nx: bx / mag, ny: by / mag, mag };
+  }
+
+  /* RK4 step for field-line tracing */
+  _rk4(x, y, step) {
+    const f = (xx, yy) => this._fieldNorm(xx, yy);
+    const k1 = f(x, y);
+    const k2 = f(x + step * k1.nx * 0.5, y + step * k1.ny * 0.5);
+    const k3 = f(x + step * k2.nx * 0.5, y + step * k2.ny * 0.5);
+    const k4 = f(x + step * k3.nx,       y + step * k3.ny);
+    return {
+      nx: (k1.nx + 2*k2.nx + 2*k3.nx + k4.nx) / 6,
+      ny: (k1.ny + 2*k2.ny + 2*k3.ny + k4.ny) / 6,
+    };
+  }
+
+  /* ────────────────────────────────
+     Source management
+  ──────────────────────────────── */
+
+  addSource(x, y, dir) {
+    this.sources.push({
+      id: this._nextId++,
+      x, y,
+      I: dir === 'out' ? +this.curI : -this.curI,
+    });
+    this._invalidateCache();
+    this.draw();
+    if (this.onUpdate) this.onUpdate(this.info());
+  }
+
+  removeSource(id) {
+    this.sources = this.sources.filter(s => s.id !== id);
+    this._invalidateCache();
+    this.draw();
+    if (this.onUpdate) this.onUpdate(this.info());
+  }
+
+  clearAll() {
+    this.sources = [];
+    this._particle = null;
+    this._invalidateCache();
+    this.draw();
+    if (this.onUpdate) this.onUpdate(this.info());
+  }
+
+  setCurrentAll(I) {
+    this.curI = I;
+    this.sources.forEach(s => { s.I = s.I > 0 ? I : -I; });
+    this._invalidateCache();
+    this.draw();
+  }
+
+  /* Invalidate precomputed colour map cache */
+  _invalidateCache() { this._cmapDirty = true; }
+
+  /* ── conductor & flux toggles ── */
+
+  toggleConductor() {
+    this._cond.on = !this._cond.on;
+    this.draw();
+  }
+
+  setConductorI(I) {
+    this._cond.I = I;
+    this.draw();
+  }
+
+  toggleFlux() {
+    this._flux.on = !this._flux.on;
+    this.draw();
+  }
+
+  /* Ampere force on conductor: F = I·(L×B)
+     L = conductor vector, B from wire sources at midpoint
+     In 3D with B in xy-plane:  F = (0, 0, I*(Lx*By - Ly*Bx))  [force in z]
+     We display Fz magnitude + direction (⊙ out / ⊗ in) */
+  _ampereForce() {
+    const c = this._cond;
+    const Lx = c.x2 - c.x1, Ly = c.y2 - c.y1;
+    const L  = Math.hypot(Lx, Ly);
+    if (L < 1) return { Fz: 0, L, B: 0 };
+    const mx = (c.x1 + c.x2) / 2, my = (c.y1 + c.y2) / 2;
+    const { bx, by, mag } = this._field(mx, my);
+    // F_z = I*(Lx*By - Ly*Bx)  — in "visual units"
+    const Fz = c.I * (Lx * by - Ly * bx) * 0.0001;
+    return { Fz, L: L / 100, B: mag, bx, by, mx, my };
+  }
+
+  /* Magnetic flux through indicator circle: Φ ≈ |B_avg|·πr² */
+  _fluxValue() {
+    const f = this._flux;
+    const { mag } = this._field(f.x, f.y);
+    return mag * Math.PI * f.r * f.r * 0.000001;  // visual units
+  }
+
+  /* Preset arrangements */
+  preset(name) {
+    this.sources = [];
+    const cx = this.W / 2, cy = this.H / 2, d = 90;
+    switch (name) {
+      case 'single':
+        this.sources.push({ id: this._nextId++, x: cx, y: cy, I: +this.curI });
+        break;
+      case 'parallel':
+        this.sources.push({ id: this._nextId++, x: cx - d, y: cy, I: +this.curI });
+        this.sources.push({ id: this._nextId++, x: cx + d, y: cy, I: +this.curI });
+        break;
+      case 'anti':
+        this.sources.push({ id: this._nextId++, x: cx - d, y: cy, I: +this.curI });
+        this.sources.push({ id: this._nextId++, x: cx + d, y: cy, I: -this.curI });
+        break;
+      case 'solenoid': {
+        const cols = 5, rows = 2, gx = 60, gy = 70;
+        for (let c = 0; c < cols; c++) {
+          const x = cx + (c - (cols-1)/2) * gx;
+          this.sources.push({ id: this._nextId++, x, y: cy - gy/2, I: +this.curI });
+          this.sources.push({ id: this._nextId++, x, y: cy + gy/2, I: -this.curI });
+        }
+        break;
+      }
+      case 'quadrupole':
+        this.sources.push({ id: this._nextId++, x: cx - d, y: cy,     I: +this.curI });
+        this.sources.push({ id: this._nextId++, x: cx + d, y: cy,     I: +this.curI });
+        this.sources.push({ id: this._nextId++, x: cx,     y: cy - d, I: -this.curI });
+        this.sources.push({ id: this._nextId++, x: cx,     y: cy + d, I: -this.curI });
+        break;
+      case 'ring': {
+        const n = 8, r = 110;
+        for (let i = 0; i < n; i++) {
+          const a = (i / n) * Math.PI * 2;
+          const dir = i % 2 === 0 ? +this.curI : -this.curI;
+          this.sources.push({ id: this._nextId++,
+            x: cx + Math.cos(a) * r, y: cy + Math.sin(a) * r, I: dir });
+        }
+        break;
+      }
+      case 'dipole':
+        this.sources.push({ id: this._nextId++, x: cx - 60, y: cy, I: +this.curI * 1.5 });
+        this.sources.push({ id: this._nextId++, x: cx + 60, y: cy, I: -this.curI * 1.5 });
+        this.sources.push({ id: this._nextId++, x: cx - 60, y: cy - 50, I: +this.curI * 0.5 });
+        this.sources.push({ id: this._nextId++, x: cx + 60, y: cy - 50, I: -this.curI * 0.5 });
+        this.sources.push({ id: this._nextId++, x: cx - 60, y: cy + 50, I: +this.curI * 0.5 });
+        this.sources.push({ id: this._nextId++, x: cx + 60, y: cy + 50, I: -this.curI * 0.5 });
+        break;
+    }
+    this._invalidateCache();
+    this.draw();
+    if (this.onUpdate) this.onUpdate(this.info());
+  }
+
+  /* ────────────────────────────────
+     Particle (Lorentz force)
+     F = q(v × B)
+     Treat |B_xy| as Bz (educational approximation for 2D):
+       Fx = q·vy·Bz,  Fy = -q·vx·Bz
+  ──────────────────────────────── */
+
+  toggleParticle() {
+    this.particleOn = !this.particleOn;
+    if (this.particleOn) {
+      this._initParticle();
+      this._pLast = performance.now();
+      this._tickParticle();
+    } else {
+      if (this._pRaf) cancelAnimationFrame(this._pRaf);
+      this._pRaf = null;
+      this._particle = null;
+      this.draw();
+    }
+    if (this.onUpdate) this.onUpdate(this.info());
+  }
+
+  _initParticle() {
+    this._particle = {
+      x: this.W * 0.18, y: this.H * 0.5,
+      vx: 2.2, vy: 0,
+      q: 1,
+      trail: [],
+    };
+  }
+
+  _tickParticle() {
+    if (!this.particleOn || !this._particle) return;
+    const now = performance.now();
+    const dt  = Math.min((now - this._pLast) * 0.06, 2.5);
+    this._pLast = now;
+
+    const p  = this._particle;
+    const { mag } = this._field(p.x, p.y);
+    const Bz = mag * 0.00012 * p.q;
+
+    const spd = Math.hypot(p.vx, p.vy);
+
+    // Lorentz (2D): Fx = q·vy·Bz, Fy = -q·vx·Bz
+    p.vx += p.q * p.vy * Bz * dt;
+    p.vy -= p.q * p.vx * Bz * dt;
+
+    // Conserve speed (magnetic force does no work)
+    const newSpd = Math.hypot(p.vx, p.vy);
+    if (newSpd > 1e-6) { p.vx = p.vx / newSpd * spd; p.vy = p.vy / newSpd * spd; }
+
+    p.x += p.vx * dt;
+    p.y += p.vy * dt;
+
+    // Bounce walls
+    if (p.x < 4)          { p.vx =  Math.abs(p.vx); p.x = 4; }
+    if (p.x > this.W - 4) { p.vx = -Math.abs(p.vx); p.x = this.W - 4; }
+    if (p.y < 4)          { p.vy =  Math.abs(p.vy); p.y = 4; }
+    if (p.y > this.H - 4) { p.vy = -Math.abs(p.vy); p.y = this.H - 4; }
+
+    p.trail.push({ x: p.x, y: p.y });
+    if (p.trail.length > 350) p.trail.shift();
+
+    this.draw();
+    this._pRaf = requestAnimationFrame(() => this._tickParticle());
+  }
+
+  /* ────────────────────────────────
+     Info
+  ──────────────────────────────── */
+
+  info() {
+    const out = this.sources.filter(s => s.I > 0).length;
+    const inn = this.sources.filter(s => s.I < 0).length;
+    const condOn  = this._cond.on;
+    const fluxOn  = this._flux.on;
+    const ampere  = condOn ? this._ampereForce() : null;
+    const Fz      = ampere ? ampere.Fz : 0;
+    const flux    = fluxOn ? this._fluxValue() : 0;
+    const cursorB = this._cursorB ? this._cursorB.mag : null;
+    return { total: this.sources.length, out, inn, particleOn: this.particleOn,
+             condOn, fluxOn, Fz, flux, cursorB };
+  }
+
+  /* ────────────────────────────────
+     Events
+  ──────────────────────────────── */
+
+  _bindEvents() {
+    const c = this.canvas;
+
+    const pos = e => {
+      const r = c.getBoundingClientRect();
+      const s = e.touches ? e.touches[0] : e;
+      return { x: s.clientX - r.left, y: s.clientY - r.top };
+    };
+
+    const hitIdx = p => {
+      for (let i = this.sources.length - 1; i >= 0; i--) {
+        if (Math.hypot(p.x - this.sources[i].x, p.y - this.sources[i].y) < 22) return i;
+      }
+      return -1;
+    };
+
+    /* hit test conductor endpoints / body */
+    const hitCond = p => {
+      if (!this._cond.on) return null;
+      const { x1, y1, x2, y2 } = this._cond;
+      if (Math.hypot(p.x - x1, p.y - y1) < 16) return 0;
+      if (Math.hypot(p.x - x2, p.y - y2) < 16) return 1;
+      // check midpoint drag
+      const mx = (x1+x2)/2, my = (y1+y2)/2;
+      if (Math.hypot(p.x - mx, p.y - my) < 14) return 'body';
+      return null;
+    };
+
+    /* hit test flux circle */
+    const hitFlux = p => {
+      if (!this._flux.on) return false;
+      return Math.hypot(p.x - this._flux.x, p.y - this._flux.y) < this._flux.r + 12;
+    };
+
+    let _mousedownPos = null;
+    let _condDragOffset = null;
+
+    c.addEventListener('mousedown', e => {
+      if (e.button !== 0) return;
+      const p  = pos(e);
+      _mousedownPos = p;
+
+      /* conductor endpoint drag */
+      const ch = hitCond(p);
+      if (ch !== null) {
+        this._cond._dragEndpoint = ch;
+        if (ch === 'body') {
+          _condDragOffset = { dx: p.x - this._cond.x1, dy: p.y - this._cond.y1,
+                              len: Math.hypot(this._cond.x2-this._cond.x1, this._cond.y2-this._cond.y1) };
+        }
+        c.style.cursor = 'grabbing';
+        return;
+      }
+
+      /* flux drag */
+      if (hitFlux(p)) {
+        this._flux._dragging = true;
+        c.style.cursor = 'grabbing';
+        return;
+      }
+
+      const i  = hitIdx(p);
+      if (i >= 0) {
+        this._drag = i;
+        c.style.cursor = 'grabbing';
+      }
+    });
+
+    c.addEventListener('mousemove', e => {
+      const p = pos(e);
+
+      /* update cursor B reading */
+      if (!e.buttons) {
+        if (this.sources.length > 0) {
+          const f = this._field(p.x, p.y);
+          this._cursorB = { x: p.x, y: p.y, ...f };
+          if (this.onUpdate) this.onUpdate(this.info());
+        }
+        this._mousePos = p;
+      }
+
+      /* conductor drag */
+      if (this._cond._dragEndpoint !== null) {
+        const ep = this._cond._dragEndpoint;
+        if (ep === 0) { this._cond.x1 = p.x; this._cond.y1 = p.y; }
+        else if (ep === 1) { this._cond.x2 = p.x; this._cond.y2 = p.y; }
+        else if (ep === 'body') {
+          const L  = _condDragOffset.len;
+          const dx = this._cond.x2 - this._cond.x1, dy = this._cond.y2 - this._cond.y1;
+          const nx = dx / Math.hypot(dx, dy), ny = dy / Math.hypot(dx, dy);
+          this._cond.x1 = p.x - _condDragOffset.dx;
+          this._cond.y1 = p.y - _condDragOffset.dy;
+          this._cond.x2 = this._cond.x1 + nx * L;
+          this._cond.y2 = this._cond.y1 + ny * L;
+        }
+        this.draw();
+        return;
+      }
+
+      /* flux drag */
+      if (this._flux._dragging) {
+        this._flux.x = p.x; this._flux.y = p.y;
+        this.draw(); return;
+      }
+
+      if (this._drag !== null) {
+        this.sources[this._drag].x = p.x;
+        this.sources[this._drag].y = p.y;
+        this._invalidateCache();
+        this.draw();
+        return;
+      }
+      const i   = hitIdx(p);
+      const ch  = hitCond(p);
+      const fh  = hitFlux(p);
+      this._hovered = i >= 0 ? i : null;
+      c.style.cursor = (i >= 0 || ch !== null || fh) ? 'grab' : 'crosshair';
+    });
+
+    c.addEventListener('mouseup', e => {
+      const p   = pos(e);
+      const moved = _mousedownPos &&
+        Math.hypot(p.x - _mousedownPos.x, p.y - _mousedownPos.y) > 5;
+
+      if (this._cond._dragEndpoint !== null) {
+        this._cond._dragEndpoint = null; c.style.cursor = 'crosshair'; this.draw(); return;
+      }
+      if (this._flux._dragging) {
+        this._flux._dragging = false; c.style.cursor = 'crosshair'; return;
+      }
+
+      if (this._drag !== null) {
+        this._invalidateCache();
+        this._drag = null;
+        c.style.cursor = 'crosshair';
+        this.draw();
+        if (this.onUpdate) this.onUpdate(this.info());
+        return;
+      }
+
+      // Click (not drag) on empty space <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> add source
+      if (!moved && e.button === 0 && hitIdx(p) < 0 &&
+          hitCond(p) === null && !hitFlux(p)) {
+        this.addSource(p.x, p.y, this.addMode);
+      }
+    });
+
+    c.addEventListener('dblclick', e => {
+      const p = pos(e);
+      const i = hitIdx(p);
+      if (i >= 0) this.removeSource(this.sources[i].id);
+    });
+
+    c.addEventListener('contextmenu', e => {
+      e.preventDefault();
+      const p = pos(e);
+      const i = hitIdx(p);
+      if (i >= 0) this.removeSource(this.sources[i].id);
+    });
+
+    c.addEventListener('touchstart', e => {
+      e.preventDefault();
+      _mousedownPos = pos(e);
+      const i = hitIdx(_mousedownPos);
+      if (i >= 0) this._drag = i;
+    }, { passive: false });
+
+    c.addEventListener('touchmove', e => {
+      e.preventDefault();
+      if (this._drag === null) return;
+      const p = pos(e);
+      this.sources[this._drag].x = p.x;
+      this.sources[this._drag].y = p.y;
+      this._invalidateCache();
+      this.draw();
+    }, { passive: false });
+
+    c.addEventListener('touchend', e => {
+      const p = e.changedTouches ? pos({ ...e, touches: e.changedTouches }) : null;
+      const moved = _mousedownPos && p &&
+        Math.hypot(p.x - _mousedownPos.x, p.y - _mousedownPos.y) > 8;
+      if (this._drag === null && !moved && p) {
+        this.addSource(p.x, p.y, this.addMode);
+      }
+      this._drag = null;
+      if (this.onUpdate) this.onUpdate(this.info());
+    });
+  }
+
+  /* ────────────────────────────────
+     Drawing
+  ──────────────────────────────── */
+
+  draw() {
+    const ctx = this.ctx;
+    const W = this.W, H = this.H;
+    if (!W || !H) return;
+
+    ctx.clearRect(0, 0, W, H);
+
+    // Background
+    const bg = ctx.createRadialGradient(W/2, H/2, 0, W/2, H/2, Math.max(W, H) * 0.7);
+    bg.addColorStop(0, '#080818');
+    bg.addColorStop(1, '#030308');
+    ctx.fillStyle = bg; ctx.fillRect(0, 0, W, H);
+
+    this._drawGrid(ctx, W, H);
+
+    if (this.sources.length > 0) {
+      if (this.layers.colormap)   this._drawColormap(ctx);
+      if (this.layers.fieldlines) this._drawFieldLines(ctx);
+      if (this.layers.vectors)    this._drawVectors(ctx);
+    }
+
+    if (this._flux.on)            this._drawFlux(ctx);
+    if (this._cond.on)            this._drawConductor(ctx);
+    if (this._particle)           this._drawParticle(ctx);
+    this._drawSources(ctx);
+    if (this._cursorB && this.sources.length > 0) this._drawCursorB(ctx);
+
+    if (this.sources.length === 0) this._drawHint(ctx, W, H);
+  }
+
+  /* ── grid ── */
+  _drawGrid(ctx, W, H) {
+    ctx.save();
+    ctx.strokeStyle = 'rgba(155,93,229,0.055)'; ctx.lineWidth = 1;
+    for (let x = 0; x <= W; x += 50) {
+      ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke();
+    }
+    for (let y = 0; y <= H; y += 50) {
+      ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(W, y); ctx.stroke();
+    }
+    ctx.restore();
+  }
+
+  /* ── colour map (hue = angle of B, brightness = log|B|) ── */
+  _cmapDirty = true;
+
+  _drawColormap(ctx) {
+    if (!this._oc) return;
+    const DS = 4;
+    const oc  = this._oc;
+    const oct = oc.getContext('2d');
+    const w   = this._ocW, h = this._ocH;
+
+    if (this._cmapDirty) {
+      const imgData = oct.createImageData(w, h);
+      const data = imgData.data;
+
+      for (let py = 0; py < h; py++) {
+        for (let px = 0; px < w; px++) {
+          const wx = px * DS, wy = py * DS;
+          const { bx, by, mag } = this._field(wx, wy);
+          if (mag < 0.5) continue;
+
+          const angle = Math.atan2(by, bx);          // -π…π
+          const hue   = ((angle / (2 * Math.PI) + 1) % 1) * 360;
+          const bright = Math.min(1, Math.log10(1 + mag * 0.005) * 0.55);
+          const alpha  = Math.round(bright * 210);
+
+          const [r, g, b] = this._hsl(hue / 360, 0.90, 0.38 + bright * 0.28);
+          const idx = (py * w + px) * 4;
+          data[idx]   = r;
+          data[idx+1] = g;
+          data[idx+2] = b;
+          data[idx+3] = alpha;
+        }
+      }
+      oct.putImageData(imgData, 0, 0);
+      this._cmapDirty = false;
+    }
+
+    ctx.save();
+    ctx.imageSmoothingEnabled = true;
+    ctx.imageSmoothingQuality = 'high';
+    ctx.drawImage(oc, 0, 0, w * DS, h * DS);
+    ctx.restore();
+  }
+
+  _hsl(h, s, l) {
+    let r, g, b;
+    if (s === 0) { r = g = b = l; }
+    else {
+      const q = l < 0.5 ? l*(1+s) : l+s-l*s, p = 2*l - q;
+      const hue2 = (p, q, t) => {
+        t = ((t % 1) + 1) % 1;
+        if (t < 1/6) return p + (q-p)*6*t;
+        if (t < 1/2) return q;
+        if (t < 2/3) return p + (q-p)*(2/3-t)*6;
+        return p;
+      };
+      r = hue2(p, q, h + 1/3); g = hue2(p, q, h); b = hue2(p, q, h - 1/3);
+    }
+    return [Math.round(r*255), Math.round(g*255), Math.round(b*255)];
+  }
+
+  /* ── field lines ── */
+  _drawFieldLines(ctx) {
+    if (!this.sources.length) return;
+    const maxSteps = 700;
+    const step     = 5;
+    const killR    = 24;
+
+    ctx.save();
+
+    for (const src of this.sources) {
+      const isOut  = src.I > 0;
+      const col    = isOut ? '6,214,224' : '241,91,181';
+      const nLines = 14;
+      const seedR  = 26;
+
+      for (let li = 0; li < nLines; li++) {
+        const ang = (li / nLines) * Math.PI * 2;
+        let x = src.x + Math.cos(ang) * seedR;
+        let y = src.y + Math.sin(ang) * seedR;
+
+        const pts = [{ x, y }];
+        let travelledSq = 0;
+
+        for (let st = 0; st < maxSteps; st++) {
+          const { nx, ny } = this._rk4(x, y, step);
+          x += step * nx;
+          y += step * ny;
+          travelledSq += step * step;
+
+          if (x < -60 || x > this.W + 60 || y < -60 || y > this.H + 60) break;
+
+          /* stop near another source */
+          let nearOther = false;
+          for (const s2 of this.sources) {
+            if (s2 === src) continue;
+            if (Math.hypot(x - s2.x, y - s2.y) < killR) { nearOther = true; break; }
+          }
+          if (nearOther) { pts.push({ x, y }); break; }
+
+          /* stop looping back to origin */
+          if (st > 20 && Math.hypot(x - src.x, y - src.y) < killR) break;
+
+          pts.push({ x, y });
+        }
+
+        if (pts.length < 3) continue;
+
+        /* draw with glow */
+        ctx.shadowColor = `rgba(${col},0.5)`;
+        ctx.shadowBlur  = 7;
+        ctx.strokeStyle = `rgba(${col},0.65)`;
+        ctx.lineWidth   = 1.6;
+
+        ctx.beginPath();
+        ctx.moveTo(pts[0].x, pts[0].y);
+        for (let pi = 1; pi < pts.length; pi++) ctx.lineTo(pts[pi].x, pts[pi].y);
+        ctx.stroke();
+
+        /* arrowheads every ~85 px */
+        this._drawArrows(ctx, pts, col);
+      }
+    }
+    ctx.restore();
+  }
+
+  _drawArrows(ctx, pts, col) {
+    let acc = 0, next = 80;
+    for (let i = 1; i < pts.length; i++) {
+      const dx = pts[i].x - pts[i-1].x, dy = pts[i].y - pts[i-1].y;
+      acc += Math.hypot(dx, dy);
+      if (acc < next) continue;
+      next += 85;
+      const ang = Math.atan2(dy, dx);
+      ctx.save();
+      ctx.translate(pts[i].x, pts[i].y);
+      ctx.rotate(ang);
+      ctx.shadowColor = `rgba(${col},0.9)`; ctx.shadowBlur = 6;
+      ctx.fillStyle   = `rgba(${col},0.90)`;
+      ctx.beginPath();
+      ctx.moveTo(7, 0); ctx.lineTo(-5, -4); ctx.lineTo(-3, 0); ctx.lineTo(-5, 4);
+      ctx.closePath(); ctx.fill();
+      ctx.restore();
+    }
+  }
+
+  /* ── vector field ── */
+  _drawVectors(ctx) {
+    if (!this.sources.length) return;
+    const step = 42;
+    ctx.save();
+    for (let px = step * 0.5; px < this.W; px += step) {
+      for (let py = step * 0.5; py < this.H; py += step) {
+        const { bx, by, mag } = this._field(px, py);
+        if (mag < 1) continue;
+        const t   = Math.min(1, Math.log10(1 + mag * 0.006) / 1.4);
+        const len = 8 + t * 14;
+        const nx  = bx / mag, ny = by / mag;
+        const alp = 0.28 + t * 0.6;
+
+        ctx.save();
+        ctx.translate(px, py);
+        ctx.rotate(Math.atan2(ny, nx));
+        ctx.globalAlpha = alp;
+        ctx.strokeStyle = `rgba(${Math.round(155+t*100)},${Math.round(93+t*121)},229,1)`;
+        ctx.lineWidth   = 1.1 + t * 0.6;
+        ctx.beginPath(); ctx.moveTo(-len/2, 0); ctx.lineTo(len/2, 0); ctx.stroke();
+        ctx.fillStyle = ctx.strokeStyle;
+        ctx.beginPath();
+        ctx.moveTo(len/2, 0); ctx.lineTo(len/2-5, -2.5); ctx.lineTo(len/2-5, 2.5);
+        ctx.closePath(); ctx.fill();
+        ctx.restore();
+      }
+    }
+    ctx.restore();
+  }
+
+  /* ── sources ── */
+  _drawSources(ctx) {
+    this.sources.forEach((s, i) => {
+      const isOut  = s.I > 0;
+      const col    = isOut ? '#06D6E0' : '#F15BB5';
+      const rgb    = isOut ? '6,214,224' : '241,91,181';
+      const isHov  = this._hovered === i || this._drag === i;
+      const R      = isHov ? 19 : 16;
+
+      ctx.save();
+      ctx.shadowColor = col; ctx.shadowBlur = isHov ? 32 : 18;
+
+      /* halo ring */
+      ctx.beginPath(); ctx.arc(s.x, s.y, R + 6, 0, Math.PI * 2);
+      ctx.fillStyle = `rgba(${rgb},0.08)`; ctx.fill();
+
+      /* body disc */
+      ctx.beginPath(); ctx.arc(s.x, s.y, R, 0, Math.PI * 2);
+      ctx.fillStyle = isHov ? `rgba(${rgb},0.25)` : 'rgba(5,5,20,0.9)';
+      ctx.fill();
+      ctx.strokeStyle = col; ctx.lineWidth = 2.5; ctx.stroke();
+
+      /* symbol */
+      if (isOut) {
+        /* dot = current toward viewer */
+        ctx.beginPath(); ctx.arc(s.x, s.y, 5, 0, Math.PI * 2);
+        ctx.fillStyle = col; ctx.shadowBlur = 8; ctx.fill();
+      } else {
+        /* × = current away from viewer */
+        const d = 5.5;
+        ctx.strokeStyle = col; ctx.lineWidth = 2.2; ctx.shadowBlur = 6;
+        ctx.beginPath();
+        ctx.moveTo(s.x - d, s.y - d); ctx.lineTo(s.x + d, s.y + d);
+        ctx.moveTo(s.x + d, s.y - d); ctx.lineTo(s.x - d, s.y + d);
+        ctx.stroke();
+      }
+
+      /* current label below */
+      ctx.shadowBlur = 0;
+      ctx.font = '10px Manrope, sans-serif';
+      ctx.fillStyle = `rgba(${rgb},0.75)`;
+      ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+      ctx.fillText((isOut ? '↑' : '↓') + ' ' + Math.abs(s.I).toFixed(0) + ' А', s.x, s.y + R + 5);
+
+      ctx.restore();
+    });
+  }
+
+  /* ── particle ── */
+  _drawParticle(ctx) {
+    const p = this._particle;
+    if (!p) return;
+
+    /* trail */
+    if (p.trail.length > 1) {
+      ctx.save();
+      for (let i = 1; i < p.trail.length; i++) {
+        const t = i / p.trail.length;
+        ctx.beginPath();
+        ctx.moveTo(p.trail[i-1].x, p.trail[i-1].y);
+        ctx.lineTo(p.trail[i].x, p.trail[i].y);
+        ctx.strokeStyle = `rgba(255,255,80,${t * 0.55})`;
+        ctx.lineWidth = t * 2.5;
+        ctx.stroke();
+      }
+      ctx.restore();
+    }
+
+    /* glow aura */
+    const grad = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, 16);
+    grad.addColorStop(0, 'rgba(255,255,80,0.35)');
+    grad.addColorStop(1, 'rgba(255,255,80,0)');
+    ctx.save(); ctx.fillStyle = grad;
+    ctx.beginPath(); ctx.arc(p.x, p.y, 16, 0, Math.PI*2); ctx.fill(); ctx.restore();
+
+    /* body */
+    ctx.save();
+    ctx.shadowColor = '#ffff50'; ctx.shadowBlur = 18;
+    ctx.beginPath(); ctx.arc(p.x, p.y, 6, 0, Math.PI*2);
+    ctx.fillStyle = '#ffff50'; ctx.fill();
+    ctx.strokeStyle = '#fff'; ctx.lineWidth = 1.8; ctx.stroke();
+    ctx.restore();
+
+    /* velocity arrow */
+    const spd = Math.hypot(p.vx, p.vy);
+    if (spd > 0.01) {
+      const s = 22;
+      ctx.save();
+      ctx.strokeStyle = 'rgba(255,255,80,0.7)'; ctx.lineWidth = 1.8;
+      ctx.shadowColor = '#ffff50'; ctx.shadowBlur = 8;
+      ctx.beginPath();
+      ctx.moveTo(p.x, p.y);
+      ctx.lineTo(p.x + p.vx / spd * s, p.y + p.vy / spd * s);
+      ctx.stroke();
+      ctx.restore();
+    }
+  }
+
+  /* ── empty hint ── */
+  /* ── conductor (проводник в поле — Сила Ампера) ── */
+  _drawConductor(ctx) {
+    const c = this._cond;
+    const Lx = c.x2 - c.x1, Ly = c.y2 - c.y1;
+    const L  = Math.hypot(Lx, Ly);
+    if (L < 2) return;
+
+    const { Fz, B, bx, by, mx, my } = this._ampereForce();
+    const Fabs = Math.abs(Fz);
+    const fOut = Fz > 0; // force out of screen (⊙) vs into screen (⊗)
+
+    ctx.save();
+
+    /* glow under conductor */
+    ctx.shadowColor = '#F15BB5'; ctx.shadowBlur = 14;
+    ctx.strokeStyle = '#F15BB5'; ctx.lineWidth = 5;
+    ctx.globalAlpha = 0.35;
+    ctx.beginPath(); ctx.moveTo(c.x1, c.y1); ctx.lineTo(c.x2, c.y2); ctx.stroke();
+
+    /* main conductor line */
+    ctx.globalAlpha = 1; ctx.shadowBlur = 6;
+    ctx.strokeStyle = '#F15BB5'; ctx.lineWidth = 3.5; ctx.lineCap = 'round';
+    ctx.beginPath(); ctx.moveTo(c.x1, c.y1); ctx.lineTo(c.x2, c.y2); ctx.stroke();
+
+    /* current direction arrows along conductor */
+    const steps = Math.floor(L / 55);
+    ctx.fillStyle = '#F15BB5'; ctx.shadowBlur = 5;
+    for (let s = 0; s <= steps; s++) {
+      const t  = (s + 0.5) / (steps + 1);
+      const ax = c.x1 + Lx * t, ay = c.y1 + Ly * t;
+      const ang = c.I > 0 ? Math.atan2(Ly, Lx) : Math.atan2(-Ly, -Lx);
+      ctx.save(); ctx.translate(ax, ay); ctx.rotate(ang);
+      ctx.beginPath(); ctx.moveTo(7,0); ctx.lineTo(-5,-4); ctx.lineTo(-5,4); ctx.closePath();
+      ctx.fill(); ctx.restore();
+    }
+
+    /* endpoints handle dots */
+    [[c.x1, c.y1], [c.x2, c.y2]].forEach(([ex, ey]) => {
+      ctx.beginPath(); ctx.arc(ex, ey, 8, 0, Math.PI*2);
+      ctx.fillStyle = '#F15BB5'; ctx.shadowBlur = 10; ctx.fill();
+      ctx.strokeStyle = '#fff'; ctx.lineWidth = 1.5; ctx.stroke();
+    });
+
+    /* B vector at midpoint */
+    if (B > 0.5 && this.sources.length) {
+      const bScale = Math.min(40, Math.log10(1 + B * 0.02) * 50);
+      const bNorm  = Math.hypot(bx, by);
+      const bnx = bx/bNorm, bny = by/bNorm;
+      ctx.strokeStyle = '#22d55e'; ctx.lineWidth = 1.5; ctx.shadowColor = '#22d55e';
+      ctx.beginPath(); ctx.moveTo(mx, my);
+      ctx.lineTo(mx + bnx*bScale, my + bny*bScale); ctx.stroke();
+      ctx.fillStyle = '#22d55e';
+      ctx.font = '10px Manrope'; ctx.textAlign = 'center'; ctx.textBaseline = 'bottom';
+      ctx.fillText('B⃗', mx + bnx*(bScale+10), my + bny*(bScale+10));
+    }
+
+    /* Ampere force symbols along conductor */
+    if (Fabs > 1e-6) {
+      const sym     = fOut ? '⊙' : '⊗';
+      const symCol  = fOut ? '#06D6E0' : '#ff6060';
+      const symSize = Math.min(22, 8 + Fabs * 200);
+      const perpX   = -Ly / L, perpY = Lx / L; // perpendicular to conductor
+      const offset  = fOut ? -35 : 35;           // visual direction hint
+
+      ctx.font = `${symSize}px Manrope`;
+      ctx.fillStyle = symCol; ctx.shadowColor = symCol; ctx.shadowBlur = 10;
+      ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+      const symCount = Math.max(1, Math.min(5, Math.floor(L / 80)));
+      for (let s = 0; s < symCount; s++) {
+        const t = (s + 0.5) / symCount;
+        ctx.fillText(sym,
+          c.x1 + Lx*t + perpX * 22,
+          c.y1 + Ly*t + perpY * 22);
+      }
+
+      /* force magnitude label */
+      ctx.font = 'bold 11px Manrope'; ctx.shadowBlur = 5;
+      ctx.fillStyle = symCol;
+      ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
+      ctx.fillText('F = ' + Fabs.toFixed(3) + ' (ед)', c.x2 + 12, c.y2);
+    }
+
+    /* current label */
+    ctx.shadowBlur = 0;
+    ctx.font = '10px Manrope'; ctx.fillStyle = 'rgba(241,91,181,0.8)';
+    ctx.textAlign = 'center'; ctx.textBaseline = 'bottom';
+    const ang2 = Math.atan2(Ly, Lx);
+    ctx.fillText('I = ' + c.I + ' А', mx - Math.sin(ang2)*20, my + Math.cos(ang2)*(-20));
+
+    ctx.restore();
+  }
+
+  /* ── flux circle (магнитный поток) ── */
+  _drawFlux(ctx) {
+    const f = this._flux;
+    const Phi = this._fluxValue();
+    const { mag } = this._field(f.x, f.y);
+    const brightness = Math.min(1, Math.log10(1 + mag * 0.003) * 0.7);
+
+    ctx.save();
+
+    /* filled circle — colour by field strength */
+    const grad = ctx.createRadialGradient(f.x, f.y, 0, f.x, f.y, f.r);
+    grad.addColorStop(0,   `rgba(255,220,50,${brightness * 0.4})`);
+    grad.addColorStop(0.6, `rgba(155,93,229,${brightness * 0.15})`);
+    grad.addColorStop(1,   'transparent');
+    ctx.fillStyle = grad; ctx.beginPath(); ctx.arc(f.x, f.y, f.r, 0, Math.PI*2); ctx.fill();
+
+    /* dashed border */
+    ctx.strokeStyle = 'rgba(255,220,50,0.7)'; ctx.lineWidth = 1.8;
+    ctx.setLineDash([6, 4]); ctx.shadowColor = '#ffdc32'; ctx.shadowBlur = 8;
+    ctx.beginPath(); ctx.arc(f.x, f.y, f.r, 0, Math.PI*2); ctx.stroke();
+    ctx.setLineDash([]);
+
+    /* centre dot */
+    ctx.beginPath(); ctx.arc(f.x, f.y, 4, 0, Math.PI*2);
+    ctx.fillStyle = '#ffdc32'; ctx.fill();
+
+    /* flux label */
+    ctx.font = 'bold 11px Manrope'; ctx.fillStyle = '#ffdc32';
+    ctx.shadowColor = '#ffdc32'; ctx.shadowBlur = 6;
+    ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+    ctx.fillText('Φ = ' + Phi.toFixed(4) + ' Вб', f.x, f.y + f.r + 6);
+    ctx.fillText('|B| = ' + mag.toFixed(1) + ' (ед)', f.x, f.y + f.r + 20);
+
+    ctx.restore();
+  }
+
+  /* ── B value at cursor ── */
+  _drawCursorB(ctx) {
+    const b = this._cursorB;
+    if (!b || !this._mousePos) return;
+    const { x, y, mag, bx, by } = b;
+    if (mag < 0.5) return;
+
+    ctx.save();
+    /* small circle */
+    ctx.strokeStyle = 'rgba(255,255,255,0.35)'; ctx.lineWidth = 1;
+    ctx.setLineDash([3,3]); ctx.beginPath(); ctx.arc(x, y, 14, 0, Math.PI*2); ctx.stroke();
+    ctx.setLineDash([]);
+
+    /* B direction arrow */
+    const bNorm = Math.hypot(bx, by);
+    const len   = Math.min(28, Math.log10(1 + mag * 0.01) * 35);
+    const bnx = bx/bNorm, bny = by/bNorm;
+    const col   = 'rgba(255,255,255,0.6)';
+    ctx.strokeStyle = col; ctx.lineWidth = 1.2;
+    ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + bnx*len, y + bny*len); ctx.stroke();
+    ctx.fillStyle = col;
+    const a = Math.atan2(bny, bnx);
+    const tx = x + bnx*len, ty = y + bny*len;
+    ctx.beginPath(); ctx.moveTo(tx,ty);
+    ctx.lineTo(tx - 6*Math.cos(a-0.4), ty - 6*Math.sin(a-0.4));
+    ctx.lineTo(tx - 6*Math.cos(a+0.4), ty - 6*Math.sin(a+0.4));
+    ctx.closePath(); ctx.fill();
+
+    /* label */
+    ctx.font = '9px Manrope'; ctx.fillStyle = 'rgba(255,255,255,0.6)';
+    ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
+    ctx.fillText('|B|=' + mag.toFixed(0), x + 18, y - 8);
+
+    ctx.restore();
+  }
+
+  _drawHint(ctx, W, H) {
+    ctx.save();
+    ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+    ctx.font = '16px Manrope, sans-serif';
+    ctx.fillStyle = 'rgba(155,93,229,0.45)';
+    ctx.fillText('Нажми на канвас — добавь провод с током', W/2, H/2 - 18);
+    ctx.font = '13px Manrope, sans-serif';
+    ctx.fillStyle = 'rgba(255,255,255,0.22)';
+    ctx.fillText('• Ток на нас   ×  Ток от нас   ПКМ / двойной клик — удалить', W/2, H/2 + 14);
+    ctx.restore();
+  }
+}
diff --git a/frontend/js/labs/mirror.js b/frontend/js/labs/mirror.js
new file mode 100644
index 0000000..d16dafe
--- /dev/null
+++ b/frontend/js/labs/mirror.js
@@ -0,0 +1,1004 @@
+'use strict';
+/* ══════════════════════════════════════════════════════════════
+   MirrorSim v3
+   Flat / Concave / Convex  ·  1/f = 1/d + 1/d'  ·  M = -d'/d
+   Features: fan rays, normals, angle arcs, ray labels ①②③,
+   center C, zones, grid, photon animation, step mode,
+   speed control, point mode, drag image, hover tooltips,
+   mirror transition, unified infobox, legend, export PNG
+   ══════════════════════════════════════════════════════════════ */
+
+class MirrorSim {
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.ctx    = canvas.getContext('2d');
+    this.W = 0; this.H = 0;
+
+    // physics
+    this.type = 'concave';
+    this.f    = 120;
+    this.d    = 240;
+    this.h    = 60;
+
+    // object animation
+    this._playing   = false;
+    this._animT     = 1.4;
+    this._animSpeed = 1;
+    this._raf       = null;
+
+    // step mode (-1 = all, 0..3 = progressive)
+    this._step = -1;
+
+    // display toggles
+    this._showGrid    = false;
+    this._showZones   = true;
+    this._showNormals = true;
+    this._showDims    = true;
+    this._showAngles  = true;
+    this._showPhotons = true;
+    this._pointMode   = false;
+
+    // photon system
+    this._photons       = [];
+    this._photonRaf     = null;
+    this._photonTimer   = 0;
+    this._lastPhoTime   = 0;
+    this._photonPaths   = [];
+
+    // mirror transition
+    this._prevType = 'concave';
+    this._transT   = 1.0;
+    this._transRaf = null;
+
+    // drag & hover
+    this._drag   = null;
+    this._hoverX = -999;
+    this._hoverY = -999;
+
+    // callbacks
+    this.onUpdate  = null;
+    this.onAnimate = null;
+
+    this._bindEvents();
+    new ResizeObserver(() => { this.fit(); this.draw(); }).observe(canvas.parentElement);
+  }
+
+  /* ── Public API ──────────────────────────────── */
+
+  fit() {
+    const dpr = window.devicePixelRatio || 1;
+    const w = this.canvas.offsetWidth  || 600;
+    const h = this.canvas.offsetHeight || 400;
+    this.canvas.width  = w * dpr;
+    this.canvas.height = h * dpr;
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this.W = w; this.H = h;
+  }
+
+  setType(type) {
+    if (type === this.type) return;
+    this._prevType = this.type;
+    this.type = type;
+    if (this._playing) this._stopAnim();
+    this._startTransition();
+    this.draw(); this._emit();
+  }
+
+  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));
+    if (h !== undefined) this.h = Math.max(20, Math.min(80,  +h));
+    this.draw(); this._emit();
+  }
+
+  setAnimSpeed(s)       { this._animSpeed = +s || 1; }
+  togglePlay()          { this._playing ? this._stopAnim() : this._startAnim(); }
+  stepNext()            { this._step = Math.min(3, this._step + 1); this.draw(); }
+  stepReset()           { this._step = -1; this.draw(); }
+  setPointMode(on)      { this._pointMode = !!on; this.draw(); this._emit(); }
+
+  setToggle(name, val) {
+    const map = {
+      grid:'_showGrid', zones:'_showZones', normals:'_showNormals',
+      dims:'_showDims', angles:'_showAngles', photons:'_showPhotons',
+    };
+    if (map[name]) this[map[name]] = !!val;
+    if (name === 'photons') { val ? this._startPhotons() : this._stopPhotons(); }
+    this.draw();
+  }
+
+  exportPng() {
+    const a = document.createElement('a');
+    a.href     = this.canvas.toDataURL('image/png');
+    a.download = `mirror_${this.type}_d${Math.round(this.d)}.png`;
+    a.click();
+  }
+
+  /* ── Physics ─────────────────────────────────── */
+
+  _fSigned() {
+    if (this.type === 'flat')   return Infinity;
+    return this.type === 'convex' ? -this.f : this.f;
+  }
+
+  info() {
+    const { type, d, h } = this;
+    const f = this._fSigned();
+    let dPrime, M;
+    if (type === 'flat') {
+      dPrime = -d; M = 1;
+    } else {
+      const den = d - f;
+      if (Math.abs(den) < 0.5) { dPrime = Infinity; M = Infinity; }
+      else { dPrime = f * d / den; M = -dPrime / d; }
+    }
+    const hPrime   = M === Infinity ? Infinity : M * h;
+    const isReal   = dPrime > 0 && dPrime !== Infinity;
+    const imageType = dPrime === Infinity ? '∞' : isReal ? 'действительное' : 'мнимое';
+    const orient   = (M === Infinity || M === 1) ? 'прямое' : M < 0 ? 'перевёрнутое' : 'прямое';
+    const sizeStr  = M === Infinity ? '' : Math.abs(M) > 1.05 ? 'увеличенное' : Math.abs(M) < 0.95 ? 'уменьшенное' : 'равное';
+    return {
+      f:      type === 'flat' ? '∞' : (type === 'convex' ? -this.f : +this.f).toFixed(0),
+      d:      +d.toFixed(1),
+      dPrime: dPrime === Infinity ? Infinity : +dPrime.toFixed(1),
+      M:      M === Infinity ? Infinity : +M.toFixed(3),
+      imageType, orient, sizeStr,
+      hPrime: hPrime === Infinity ? Infinity : +Math.abs(hPrime).toFixed(1),
+      isReal,
+    };
+  }
+
+  _emit() { if (this.onUpdate) this.onUpdate(this.info()); }
+
+  /* ── Mirror transition ───────────────────────── */
+
+  _getBulge(type) {
+    if (type === 'flat')    return 0;
+    if (type === 'concave') return -Math.min(30, this.f * 0.18);
+    return Math.min(24, this.f * 0.16);
+  }
+
+  _startTransition() {
+    this._transT = 0;
+    if (this._transRaf) cancelAnimationFrame(this._transRaf);
+    const step = () => {
+      this._transT = Math.min(1, this._transT + 0.07);
+      this.draw();
+      if (this._transT < 1) this._transRaf = requestAnimationFrame(step);
+      else this._transRaf = null;
+    };
+    this._transRaf = requestAnimationFrame(step);
+  }
+
+  /* ── Object animation ────────────────────────── */
+
+  _startAnim() { this._playing = true; this._animLoop(); }
+
+  _stopAnim() {
+    this._playing = false;
+    if (this._raf) { cancelAnimationFrame(this._raf); this._raf = null; }
+  }
+
+  _animLoop() {
+    if (!this._playing) return;
+    this._animT += 0.013 * this._animSpeed;
+    const t = 0.5 - 0.5 * Math.cos(this._animT);
+    if (this.type === 'concave') this.d = Math.max(30, Math.min(490, this.f * (0.35 + 2.75 * t)));
+    else                         this.d = 40 + 400 * t;
+    if (this.onAnimate) this.onAnimate(this.d);
+    this.draw(); this._emit();
+    this._raf = requestAnimationFrame(() => this._animLoop());
+  }
+
+  /* ── Photon system ───────────────────────────── */
+
+  _getRayPaths(mx, ay, f, dPrime, hPrime) {
+    const { d, h, type } = this;
+    const hasImage = dPrime !== null && isFinite(dPrime);
+    const isReal   = hasImage && dPrime > 0;
+    const imgX     = hasImage ? mx - dPrime : null;
+    const imgY     = hasImage ? ay - (this._pointMode ? 0 : hPrime) : null;
+    const objX     = mx - d;
+    const objY     = ay - (this._pointMode ? 0 : h);
+    const COLORS   = ['#06D6E0', '#7BF5A4', '#FFD166'];
+
+    if (type === 'flat') {
+      return [objY, ay, ay - h * 0.5].map((hy, i) => ({
+        pts: [[objX, objY], [mx, hy], ...(hasImage ? [[imgX, imgY]] : [])],
+        color: COLORS[i],
+      }));
+    }
+
+    const hit1Y  = ay - (this._pointMode ? 0 : h);
+    const hit2Y  = ay;
+    const denom3 = d - f;
+    const hit3Y  = Math.abs(denom3) < 0.5 ? null : ay + (this._pointMode ? 0 : h) * f / denom3;
+
+    const rays = [];
+    const add = (hitY, color) => {
+      if (hitY === null || !isFinite(hitY) || hitY < -this.H || hitY > 2 * this.H) return;
+      const pts = [[objX, objY], [mx, hitY]];
+      if (hasImage) {
+        if (isReal) {
+          pts.push([imgX, imgY]);
+          const dx = imgX - mx, dy = imgY - hitY, l = Math.hypot(dx, dy);
+          if (l > 1) pts.push([imgX + dx / l * 60, imgY + dy / l * 60]);
+        } else {
+          const dx = imgX - mx, dy = imgY - hitY;
+          if (Math.abs(dx) > 1) {
+            const tL   = (mx - 5) / dx;
+            let endX = 5, endY = hitY - dy * tL;
+            if (endY < 5 || endY > this.H - 5) {
+              endY = endY < 5 ? 5 : this.H - 5;
+              const tE = (hitY - endY) / dy;
+              endX = Math.max(5, mx - dx * tE);
+            }
+            pts.push([endX, endY]);
+          }
+        }
+      }
+      rays.push({ pts, color });
+    };
+    add(hit1Y, COLORS[0]); add(hit2Y, COLORS[1]); add(hit3Y, COLORS[2]);
+    return rays;
+  }
+
+  _startPhotons() {
+    if (this._photonRaf) return;
+    this._lastPhoTime = performance.now();
+    this._photonLoop();
+  }
+
+  _stopPhotons() {
+    if (this._photonRaf) { cancelAnimationFrame(this._photonRaf); this._photonRaf = null; }
+    this._photons = [];
+    this.draw();
+  }
+
+  _photonLoop() {
+    const now = performance.now();
+    const dt  = Math.min((now - this._lastPhoTime) / 1000, 0.1);
+    this._lastPhoTime = now;
+
+    const spd = 200;
+    for (const p of this._photons) p.t = Math.min(1, p.t + dt * spd / p.len);
+    this._photons = this._photons.filter(p => p.t < 1);
+
+    this._photonTimer += dt;
+    if (this._photonTimer > 0.75 && this._photonPaths.length) {
+      this._photonTimer = 0;
+      for (const path of this._photonPaths) {
+        if (path.pts.length < 2) continue;
+        let len = 0;
+        for (let i = 1; i < path.pts.length; i++)
+          len += Math.hypot(path.pts[i][0]-path.pts[i-1][0], path.pts[i][1]-path.pts[i-1][1]);
+        if (len > 20) this._photons.push({ pts: path.pts, color: path.color, t: 0, len });
+      }
+    }
+
+    if (!this._playing) this.draw(); // animation loop handles draw when playing
+    this._photonRaf = requestAnimationFrame(() => this._photonLoop());
+  }
+
+  /* ── Main draw ───────────────────────────────── */
+
+  draw() {
+    const { ctx, W, H } = this;
+    if (!W || !H) return;
+
+    const f  = this._fSigned();
+    const mx = Math.round(W * 0.62);
+    const ay = H / 2;
+
+    let dPrime = null, hPrime = null;
+    if (this.type === 'flat') {
+      dPrime = -this.d; hPrime = this._pointMode ? 0 : this.h;
+    } else {
+      const den = this.d - f;
+      if (Math.abs(den) >= 0.5) {
+        dPrime = f * this.d / den;
+        hPrime = this._pointMode ? 0 : (-dPrime / this.d) * this.h;
+      }
+    }
+
+    const step    = this._step;
+    const showRay  = i => step === -1 || i <= step;
+    const showFill = step === -1 || step >= 3;
+
+    this._photonPaths = this._getRayPaths(mx, ay, f, dPrime, hPrime);
+
+    /* bg */
+    ctx.fillStyle = '#0D0D1A';
+    ctx.fillRect(0, 0, W, H);
+
+    if (this._showGrid)  this._drawGrid(ctx);
+    if (this._showZones) this._drawZones(ctx, mx);
+
+    /* axis */
+    ctx.strokeStyle = 'rgba(255,255,255,0.12)';
+    ctx.lineWidth = 1; ctx.setLineDash([6, 4]);
+    ctx.beginPath(); ctx.moveTo(0, ay); ctx.lineTo(W, ay); ctx.stroke();
+    ctx.setLineDash([]);
+
+    /* fan rays */
+    this._drawFanRays(ctx, mx, ay, f, dPrime, hPrime, showRay, showFill);
+
+    /* mirror */
+    this._drawMirror(ctx, mx, ay);
+
+    /* focal pts + C */
+    if (this.type !== 'flat') {
+      this._drawFocalPoints(ctx, mx, ay, f);
+      this._drawCenterC(ctx, mx, ay, f);
+    }
+
+    /* normals */
+    if (this._showNormals && this.type !== 'flat' && (step === -1 || step >= 3))
+      this._drawNormals(ctx, mx, ay, f);
+
+    /* angle arcs (only in full view) */
+    if (this._showAngles && this.type !== 'flat' && step === -1)
+      this._drawAngleArcs(ctx, mx, ay, f);
+
+    /* ray labels */
+    if (step === -1 || step >= 1)
+      this._drawRayLabels(ctx, mx, ay, f, step);
+
+    /* object */
+    const objX = mx - this.d;
+    if (this._pointMode) {
+      ctx.save(); ctx.shadowColor='#9B5DE5'; ctx.shadowBlur=10;
+      ctx.fillStyle = '#9B5DE5';
+      ctx.beginPath(); ctx.arc(objX, ay, 5, 0, Math.PI*2); ctx.fill();
+      ctx.restore();
+    } else {
+      this._drawArrow(ctx, objX, ay, objX, ay - this.h, '#9B5DE5', false);
+    }
+
+    /* image */
+    if (dPrime !== null && isFinite(dPrime)) {
+      const imgX = mx - dPrime;
+      const imgY = ay - (this._pointMode ? 0 : hPrime);
+      if (this._pointMode) {
+        ctx.save();
+        ctx.fillStyle = dPrime > 0 ? '#EF476F' : '#FFD166';
+        if (dPrime < 0) { ctx.globalAlpha = 0.55; ctx.setLineDash([4,3]); }
+        ctx.beginPath(); ctx.arc(imgX, ay, 5, 0, Math.PI*2);
+        dPrime > 0 ? ctx.fill() : (() => { ctx.stroke(); })();
+        ctx.restore();
+      } else {
+        this._drawArrow(ctx, imgX, ay, imgX, imgY,
+          dPrime > 0 ? '#EF476F' : '#FFD166', dPrime <= 0);
+      }
+    }
+
+    /* dims */
+    if (this._showDims && (step === -1 || step >= 3))
+      this._drawDimensions(ctx, mx, ay, f, dPrime, hPrime);
+
+    /* infobox */
+    this._drawInfoBox(ctx, f, dPrime);
+
+    /* badge */
+    if ((step === -1 || step >= 3) && dPrime !== null)
+      this._drawImageBadge(ctx, dPrime, hPrime);
+
+    /* critical marker */
+    this._drawCriticalMarker(ctx, f);
+
+    /* legend */
+    if (this._showDims) this._drawLegend(ctx);
+
+    /* photons */
+    if (this._showPhotons && this._photons.length)
+      this._drawPhotons(ctx);
+
+    /* tooltip */
+    this._drawTooltip(ctx, mx, ay, f, dPrime, hPrime);
+
+    /* step overlay */
+    if (step >= 0) this._drawStepOverlay(ctx, step);
+  }
+
+  /* ── Grid & Zones ────────────────────────────── */
+
+  _drawGrid(ctx) {
+    ctx.strokeStyle = 'rgba(255,255,255,0.03)';
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    for (let x = 0; x < this.W; x += 40) { ctx.moveTo(x,0); ctx.lineTo(x,this.H); }
+    for (let y = 0; y < this.H; y += 40) { ctx.moveTo(0,y); ctx.lineTo(this.W,y); }
+    ctx.stroke();
+  }
+
+  _drawZones(ctx, mx) {
+    const g1 = ctx.createLinearGradient(0,0,mx,0);
+    g1.addColorStop(0, 'rgba(6,214,224,0.0)');
+    g1.addColorStop(1, 'rgba(6,214,224,0.03)');
+    ctx.fillStyle = g1; ctx.fillRect(0, 0, mx, this.H);
+
+    const g2 = ctx.createLinearGradient(mx,0,this.W,0);
+    g2.addColorStop(0, 'rgba(239,71,111,0.04)');
+    g2.addColorStop(1, 'rgba(239,71,111,0.0)');
+    ctx.fillStyle = g2; ctx.fillRect(mx, 0, this.W-mx, this.H);
+  }
+
+  /* ── Mirror surface ──────────────────────────── */
+
+  _drawMirror(ctx, mx, ay) {
+    const mH = Math.min(this.H * 0.4, 150);
+    ctx.save();
+
+    const ease   = t => t < 0.5 ? 2*t*t : -1+(4-2*t)*t;
+    const bulge  = this._getBulge(this._prevType) +
+                   (this._getBulge(this.type) - this._getBulge(this._prevType)) * ease(this._transT);
+
+    ctx.strokeStyle = 'rgba(6,214,224,0.92)';
+    ctx.lineWidth = 3;
+    ctx.shadowColor = 'rgba(6,214,224,0.45)';
+    ctx.shadowBlur  = 8;
+
+    ctx.beginPath();
+    ctx.moveTo(mx, ay - mH);
+    ctx.quadraticCurveTo(mx + bulge, ay, mx, ay + mH);
+    ctx.stroke();
+    ctx.shadowBlur = 0;
+
+    ctx.strokeStyle = 'rgba(6,214,224,0.15)'; ctx.lineWidth = 1.5;
+    for (let i = 0; i <= 10; i++) {
+      const y = ay - mH + i * mH * 2 / 10;
+      ctx.beginPath(); ctx.moveTo(mx, y); ctx.lineTo(mx+14, y+10); ctx.stroke();
+    }
+    ctx.restore();
+  }
+
+  /* ── Focal points ────────────────────────────── */
+
+  _drawFocalPoints(ctx, mx, ay, f) {
+    const behind = f < 0;
+    const pts = [{ px: mx-f, lbl:'F', r:5 }, { px: mx-2*f, lbl:'2F', r:3.5 }];
+    ctx.font = '11px Manrope, system-ui, sans-serif';
+    for (const p of pts) {
+      if (p.px < 4 || p.px > this.W-4) continue;
+      const col = behind ? 'rgba(255,209,102,0.7)' : '#06D6E0';
+      ctx.fillStyle = col;
+      ctx.beginPath(); ctx.arc(p.px, ay, p.r, 0, Math.PI*2); ctx.fill();
+      ctx.fillStyle = col; ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+      ctx.fillText(p.lbl, p.px, ay+9);
+    }
+  }
+
+  /* ── Center of curvature C ───────────────────── */
+
+  _drawCenterC(ctx, mx, ay, f) {
+    if (!isFinite(f)) return;
+    const cx = mx - 2*f;
+    if (cx < 4 || cx > this.W-4) return;
+    const pulse = Math.abs(this.d - 2*Math.abs(f)) < Math.abs(f)*0.06;
+    ctx.save();
+    if (pulse) { ctx.shadowColor='rgba(255,152,0,0.9)'; ctx.shadowBlur=14; }
+    ctx.fillStyle = pulse ? '#FF9800' : 'rgba(255,152,0,0.5)';
+    ctx.beginPath(); ctx.arc(cx, ay, pulse ? 5 : 3.5, 0, Math.PI*2); ctx.fill();
+    ctx.shadowBlur = 0;
+    ctx.font = '11px Manrope, system-ui, sans-serif';
+    ctx.fillStyle = pulse ? '#FF9800' : 'rgba(255,152,0,0.6)';
+    ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+    ctx.fillText('C', cx, ay+9);
+    ctx.restore();
+  }
+
+  /* ── Fan rays ────────────────────────────────── */
+
+  _drawFanRays(ctx, mx, ay, f, dPrime, hPrime, showRay, showFill) {
+    const { d, h, type } = this;
+    const hasImg = dPrime !== null && isFinite(dPrime);
+    const isReal = hasImg && dPrime > 0;
+    const imgX   = hasImg ? mx - dPrime : null;
+    const imgY   = hasImg ? ay - (this._pointMode ? 0 : hPrime) : null;
+    const objX   = mx - d;
+    const objY   = ay - (this._pointMode ? 0 : h);
+    const COLS   = ['#06D6E0','#7BF5A4','#FFD166'];
+    const FAN    = 'rgba(255,255,255,0.18)';
+
+    if (type === 'flat') {
+      const hits = [objY, ay, ay - (this._pointMode ? 0 : h)*0.5];
+      hits.forEach((hy, i) => {
+        if (!showRay(i)) return;
+        this._flatRay(ctx, mx, ay, d, h, objX, objY, hy, COLS[i], imgX, imgY, hasImg);
+      });
+      return;
+    }
+
+    const hit1 = ay - (this._pointMode ? 0 : h);
+    const hit2 = ay;
+    const den3  = d - f;
+    const hit3  = Math.abs(den3) < 0.5 ? null : ay + (this._pointMode ? 0 : h)*f/den3;
+
+    if (showFill) {
+      const fills = [(hit1+hit2)/2];
+      if (hit3 !== null && isFinite(hit3)) fills.push((hit2+hit3)/2);
+      for (const hy of fills)
+        this._oneRay(ctx, mx, objX, objY, hy, FAN, 0.6, hasImg, isReal, imgX, imgY);
+    }
+
+    if (showRay(0)) this._oneRay(ctx, mx, objX, objY, hit1, COLS[0], 1.0, hasImg, isReal, imgX, imgY);
+    if (showRay(1)) this._oneRay(ctx, mx, objX, objY, hit2, COLS[1], 1.0, hasImg, isReal, imgX, imgY);
+    if (showRay(2)) this._oneRay(ctx, mx, objX, objY, hit3, COLS[2], 1.0, hasImg, isReal, imgX, imgY);
+  }
+
+  _oneRay(ctx, mx, ox, oy, hitY, color, alpha, hasImg, isReal, imgX, imgY) {
+    if (hitY === null || !isFinite(hitY) || hitY < -this.H || hitY > 2*this.H) return;
+    ctx.save(); ctx.globalAlpha = alpha;
+    ctx.strokeStyle = color; ctx.lineWidth = 1.5; ctx.setLineDash([]);
+    ctx.beginPath(); ctx.moveTo(ox, oy); ctx.lineTo(mx, hitY); ctx.stroke();
+    if (!hasImg) { ctx.restore(); return; }
+
+    if (isReal) {
+      ctx.beginPath(); ctx.moveTo(mx, hitY); ctx.lineTo(imgX, imgY); ctx.stroke();
+      const dx = imgX-mx, dy = imgY-hitY, l = Math.hypot(dx,dy);
+      if (l > 1) {
+        ctx.globalAlpha = alpha * 0.22;
+        ctx.beginPath(); ctx.moveTo(imgX,imgY); ctx.lineTo(imgX+dx/l*60, imgY+dy/l*60); ctx.stroke();
+      }
+    } else {
+      const dx = imgX-mx, dy = imgY-hitY;
+      if (Math.abs(dx) < 1) { ctx.restore(); return; }
+      const tL = (mx-5)/dx;
+      let ex = 5, ey = hitY - dy*tL;
+      if (ey < 5 || ey > this.H-5) {
+        ey = ey < 5 ? 5 : this.H-5;
+        ex = Math.max(5, mx - dx*(hitY-ey)/dy);
+      }
+      ctx.beginPath(); ctx.moveTo(mx, hitY); ctx.lineTo(ex, ey); ctx.stroke();
+      ctx.globalAlpha = alpha * 0.4;
+      ctx.setLineDash([4,4]);
+      ctx.beginPath(); ctx.moveTo(mx, hitY); ctx.lineTo(imgX, imgY); ctx.stroke();
+      ctx.setLineDash([]);
+    }
+    ctx.restore();
+  }
+
+  _flatRay(ctx, mx, ay, d, h, ox, oy, hitY, color, imgX, imgY, hasImg) {
+    ctx.save(); ctx.strokeStyle = color; ctx.lineWidth = 1.5; ctx.setLineDash([]);
+    ctx.beginPath(); ctx.moveTo(ox, oy); ctx.lineTo(mx, hitY); ctx.stroke();
+    const slope = (hitY-oy)/(mx-ox);
+    const farX  = Math.max(5, ox-50);
+    const farY  = hitY - slope*(mx-farX);
+    ctx.globalAlpha = 0.3;
+    ctx.beginPath(); ctx.moveTo(mx, hitY); ctx.lineTo(farX, Math.max(5, Math.min(this.H-5, farY))); ctx.stroke();
+    ctx.globalAlpha = 1;
+    if (hasImg) {
+      ctx.setLineDash([4,4]);
+      ctx.beginPath(); ctx.moveTo(mx, hitY); ctx.lineTo(imgX, imgY); ctx.stroke();
+      ctx.setLineDash([]);
+    }
+    ctx.restore();
+  }
+
+  /* ── Normals ─────────────────────────────────── */
+
+  _drawNormals(ctx, mx, ay, f) {
+    if (!isFinite(f)) return;
+    const { d, h } = this;
+    const cX = mx - 2*f;
+    const hits = [ay-h, ay];
+    const d3 = d-f;
+    if (Math.abs(d3) >= 0.5) { const y3 = ay + h*f/d3; if (isFinite(y3)) hits.push(y3); }
+
+    ctx.save(); ctx.strokeStyle='rgba(255,255,255,0.14)'; ctx.lineWidth=1; ctx.setLineDash([4,4]);
+    for (const hy of hits) {
+      if (hy < -this.H || hy > 2*this.H) continue;
+      const nx=cX-mx, ny=ay-hy, nl=Math.hypot(nx,ny);
+      if (nl < 1) continue;
+      const ux=nx/nl*28, uy=ny/nl*28;
+      ctx.beginPath(); ctx.moveTo(mx-ux,hy-uy); ctx.lineTo(mx+ux,hy+uy); ctx.stroke();
+    }
+    ctx.setLineDash([]); ctx.restore();
+  }
+
+  /* ── Angle arcs ──────────────────────────────── */
+
+  _drawAngleArcs(ctx, mx, ay, f) {
+    if (!isFinite(f)) return;
+    const { d, h } = this;
+    const hitY = ay - h; // use ray 1 hit point
+    if (hitY < 5 || hitY > this.H-5) return;
+
+    const cX = mx - 2*f;
+    const nx = cX-mx, ny = ay-hitY, nl = Math.hypot(nx, ny);
+    if (nl < 1) return;
+
+    const normInward = Math.atan2(ny, nx);           // toward C
+    const normOuter  = normInward + Math.PI;          // outward normal
+    const incDir     = Math.atan2(hitY-(ay-h), mx-(mx-d)); // incident FROM object
+    const incFrom    = incDir + Math.PI;               // direction FROM mirror to object
+
+    const r = 14;
+    ctx.save();
+    ctx.lineWidth = 1;
+
+    // arc on incident side
+    ctx.strokeStyle = 'rgba(6,214,224,0.45)';
+    ctx.beginPath();
+    let a1 = normOuter, a2 = incFrom;
+    // normalize so arc goes the short way
+    ctx.arc(mx, hitY, r, a1, a2, false);
+    ctx.stroke();
+
+    // θ label
+    ctx.fillStyle = 'rgba(6,214,224,0.7)';
+    ctx.font = '9px Manrope, system-ui, sans-serif';
+    ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+    const mid = (a1+a2)/2;
+    ctx.fillText('θ', mx+Math.cos(mid)*(r+9), hitY+Math.sin(mid)*(r+9));
+
+    ctx.restore();
+  }
+
+  /* ── Ray labels ①②③ ──────────────────────────── */
+
+  _drawRayLabels(ctx, mx, ay, f, step) {
+    if (this.type === 'flat' || !isFinite(f)) return;
+    const { d, h } = this;
+    const hits  = [ay-h, ay, null];
+    const den3  = d-f;
+    if (Math.abs(den3) >= 0.5) { const y3 = ay+h*f/den3; if (isFinite(y3)) hits[2] = y3; }
+    const COLS  = ['#06D6E0','#7BF5A4','#FFD166'];
+    const LBLS  = ['①','②','③'];
+
+    ctx.font = 'bold 11px Manrope, system-ui, sans-serif';
+    ctx.textAlign = 'left';
+    hits.forEach((hy, i) => {
+      if (hy === null || !isFinite(hy) || hy < -50 || hy > this.H+50) return;
+      if (step !== -1 && i > step) return;
+      ctx.fillStyle = COLS[i]; ctx.textBaseline = 'middle';
+      ctx.fillText(LBLS[i], mx+8, hy);
+    });
+  }
+
+  /* ── Arrow ───────────────────────────────────── */
+
+  _drawArrow(ctx, x1, y1, x2, y2, color, dashed) {
+    ctx.strokeStyle = color; ctx.fillStyle = color; ctx.lineWidth = 2.5;
+    if (dashed) ctx.setLineDash([6,4]);
+    ctx.beginPath(); ctx.moveTo(x1,y1); ctx.lineTo(x2,y2); ctx.stroke();
+    if (dashed) ctx.setLineDash([]);
+    const a = Math.atan2(y2-y1, x2-x1), s=10;
+    ctx.beginPath();
+    ctx.moveTo(x2,y2);
+    ctx.lineTo(x2-s*Math.cos(a-0.35), y2-s*Math.sin(a-0.35));
+    ctx.lineTo(x2-s*Math.cos(a+0.35), y2-s*Math.sin(a+0.35));
+    ctx.closePath(); ctx.fill();
+  }
+
+  /* ── Dimension annotations ───────────────────── */
+
+  _drawDimensions(ctx, mx, ay, f, dPrime, hPrime) {
+    const { d, h } = this;
+    const objX  = mx - d;
+    const yBase = ay + Math.min(this.H*0.22, 60);
+    ctx.font = '11px Manrope, system-ui, sans-serif'; ctx.lineWidth = 1;
+
+    const bracket = (x1, x2, y, lbl, col) => {
+      if (x1 === x2 || x1 < 4 || x2 > this.W-4) return;
+      ctx.strokeStyle = col; ctx.fillStyle = col; ctx.setLineDash([]);
+      ctx.beginPath();
+      ctx.moveTo(x1, y-5); ctx.lineTo(x1, y+5);
+      ctx.moveTo(x1, y);   ctx.lineTo(x2, y);
+      ctx.moveTo(x2, y-5); ctx.lineTo(x2, y+5);
+      ctx.stroke();
+      ctx.textAlign='center'; ctx.textBaseline='top';
+      ctx.fillText(lbl, (x1+x2)/2, y+3);
+    };
+
+    bracket(objX, mx, yBase, `d=${d.toFixed(0)}`, 'rgba(155,93,229,0.65)');
+    if (isFinite(f) && Math.abs(f) > 5) {
+      const fX = mx-f;
+      if (fX > 4 && fX < this.W-4)
+        bracket(Math.min(fX,mx), Math.max(fX,mx), yBase+20,
+          `f=${Math.abs(f).toFixed(0)}`, 'rgba(6,214,224,0.55)');
+    }
+    if (dPrime !== null && isFinite(dPrime)) {
+      const ix = mx-dPrime;
+      if (ix > 4 && ix < this.W-4)
+        bracket(Math.min(ix,mx), Math.max(ix,mx), yBase,
+          `d'=${Math.abs(dPrime).toFixed(0)}`,
+          dPrime > 0 ? 'rgba(239,71,111,0.65)' : 'rgba(255,209,102,0.65)');
+    }
+
+    const xl = objX-18;
+    if (xl > 4 && h > 6 && !this._pointMode) {
+      ctx.strokeStyle='rgba(155,93,229,0.4)';
+      ctx.beginPath(); ctx.moveTo(xl,ay); ctx.lineTo(xl,ay-h); ctx.stroke();
+      ctx.fillStyle='rgba(155,93,229,0.7)'; ctx.textAlign='right'; ctx.textBaseline='middle';
+      ctx.fillText(`h=${h.toFixed(0)}`, xl-3, ay-h/2);
+    }
+
+    if (dPrime !== null && isFinite(dPrime) && !this._pointMode && Math.abs(hPrime) > 6) {
+      const ix  = mx-dPrime;
+      const xil = ix + (dPrime > 0 ? -18 : 18);
+      if (xil > 4 && xil < this.W-4) {
+        const col = dPrime > 0 ? 'rgba(239,71,111,' : 'rgba(255,209,102,';
+        ctx.strokeStyle = col+'0.4)';
+        ctx.beginPath(); ctx.moveTo(ix,ay); ctx.lineTo(ix,ay-hPrime); ctx.stroke();
+        ctx.fillStyle  = col+'0.7)';
+        ctx.textAlign  = dPrime > 0 ? 'right' : 'left'; ctx.textBaseline='middle';
+        ctx.fillText(`h'=${Math.abs(hPrime).toFixed(0)}`, ix+(dPrime>0?-3:3), ay-hPrime/2);
+      }
+    }
+  }
+
+  /* ── Unified info box ────────────────────────── */
+
+  _drawInfoBox(ctx, f, dPrime) {
+    const info = this.info();
+    const bx=12, by=12, bw=230, bh=76;
+    ctx.fillStyle='rgba(13,13,26,0.9)';
+    ctx.beginPath(); ctx.roundRect(bx,by,bw,bh,8); ctx.fill();
+    ctx.strokeStyle='rgba(255,255,255,0.06)'; ctx.lineWidth=1;
+    ctx.beginPath(); ctx.roundRect(bx,by,bw,bh,8); ctx.stroke();
+
+    ctx.font='11px Manrope, system-ui, sans-serif';
+    ctx.textAlign='left'; ctx.textBaseline='top';
+    ctx.fillStyle='rgba(255,255,255,0.42)';
+    ctx.fillText("1/f  =  1/d  +  1/d'", bx+10, by+8);
+
+    if (isFinite(f) && dPrime !== null && isFinite(dPrime)) {
+      ctx.fillStyle='rgba(6,214,224,0.88)';  ctx.fillText(`1/${Math.abs(+info.f)}`, bx+10, by+28);
+      ctx.fillStyle='rgba(255,255,255,0.28)';ctx.fillText('=',bx+60,by+28);
+      ctx.fillStyle='rgba(155,93,229,0.88)'; ctx.fillText(`1/${info.d}`, bx+78, by+28);
+      ctx.fillStyle='rgba(255,255,255,0.28)';ctx.fillText('+',bx+120,by+28);
+      ctx.fillStyle= dPrime>0 ? 'rgba(239,71,111,0.88)' : 'rgba(255,209,102,0.88)';
+      ctx.fillText(`${dPrime>0?'':'−'}1/${Math.abs(+info.dPrime).toFixed(0)}`, bx+136, by+28);
+    } else {
+      ctx.fillStyle='rgba(255,209,102,0.75)';
+      ctx.fillText('d = f  →  изображение на ∞', bx+10, by+28);
+    }
+
+    if (info.M !== Infinity) {
+      ctx.fillStyle='rgba(255,255,255,0.28)'; ctx.fillText(`M = ${info.M}`, bx+10, by+48);
+      if (isFinite(dPrime)) {
+        ctx.fillStyle = dPrime > 0 ? '#EF476F' : '#FFD166';
+        ctx.textAlign = 'right';
+        ctx.fillText(info.imageType + '  ' + info.orient, bx+bw-10, by+48);
+        ctx.textAlign = 'left';
+      }
+    }
+  }
+
+  /* ── Image badge ─────────────────────────────── */
+
+  _drawImageBadge(ctx, dPrime, hPrime) {
+    const info = this.info();
+    const bw=160, bh=58, bx=this.W-bw-12, by=12;
+    ctx.fillStyle='rgba(13,13,26,0.88)';
+    ctx.beginPath(); ctx.roundRect(bx,by,bw,bh,8); ctx.fill();
+    ctx.strokeStyle='rgba(255,255,255,0.06)'; ctx.lineWidth=1;
+    ctx.beginPath(); ctx.roundRect(bx,by,bw,bh,8); ctx.stroke();
+
+    const isInf = !isFinite(dPrime);
+    ctx.font='10px Manrope, system-ui, sans-serif';
+    ctx.textAlign='left'; ctx.textBaseline='top';
+    const tc = isInf ? '#FFD166' : dPrime>0 ? '#EF476F' : '#FFD166';
+    ctx.fillStyle='rgba(255,255,255,0.3)'; ctx.fillText('Тип:',    bx+10, by+8);
+    ctx.fillStyle=tc;                       ctx.fillText(isInf?'∞':info.imageType, bx+44, by+8);
+    if (!isInf) {
+      ctx.fillStyle='rgba(255,255,255,0.3)'; ctx.fillText('Ориент.:', bx+10, by+26);
+      ctx.fillStyle = info.M<0 ? 'rgba(239,71,111,0.9)' : 'rgba(123,245,164,0.9)';
+      ctx.fillText(info.orient, bx+62, by+26);
+      if (info.sizeStr) {
+        const sc = Math.abs(+info.M)>1.05 ? '#9B5DE5' : Math.abs(+info.M)<0.95 ? '#06D6E0' : 'rgba(255,255,255,0.6)';
+        ctx.fillStyle='rgba(255,255,255,0.3)'; ctx.fillText('Размер:', bx+10, by+42);
+        ctx.fillStyle=sc; ctx.fillText(`${info.sizeStr}  ×${Math.abs(+info.M).toFixed(2)}`, bx+57, by+42);
+      }
+    }
+  }
+
+  /* ── Critical marker ─────────────────────────── */
+
+  _drawCriticalMarker(ctx, f) {
+    if (!isFinite(f) || f <= 0) return;
+    const eps = f*0.06;
+    let text = null;
+    if (Math.abs(this.d-f) < eps)     text = 'd = f : лучи параллельны, изображения нет';
+    else if (Math.abs(this.d-2*f)<eps) text = 'd = 2f : изображение равное, M = −1';
+    if (!text) return;
+
+    ctx.save(); ctx.font='bold 11px Manrope, system-ui, sans-serif';
+    ctx.textAlign='center'; ctx.textBaseline='top';
+    const tw=ctx.measureText(text).width, bx=this.W/2-tw/2-10, by=4;
+    ctx.fillStyle='rgba(255,209,102,0.15)';
+    ctx.beginPath(); ctx.roundRect(bx,by,tw+20,22,6); ctx.fill();
+    ctx.strokeStyle='rgba(255,209,102,0.35)'; ctx.lineWidth=1;
+    ctx.beginPath(); ctx.roundRect(bx,by,tw+20,22,6); ctx.stroke();
+    ctx.fillStyle='#FFD166'; ctx.fillText(text, this.W/2, by+5);
+    ctx.restore();
+  }
+
+  /* ── Legend ──────────────────────────────────── */
+
+  _drawLegend(ctx) {
+    const items = [
+      { c:'rgba(155,93,229,0.8)', t:'d > 0 — предмет перед зеркалом' },
+      { c:'rgba(239,71,111,0.8)', t:"d' > 0 — действительное" },
+      { c:'rgba(255,209,102,0.8)',t:"d' < 0 — мнимое" },
+    ];
+    const bx=12, lh=14, by=this.H - items.length*lh - 16;
+    ctx.save(); ctx.font='9px Manrope, system-ui, sans-serif'; ctx.textBaseline='top';
+    items.forEach(({ c, t }, i) => {
+      const y = by+i*lh;
+      ctx.fillStyle=c; ctx.fillRect(bx, y+3, 8, 8);
+      ctx.fillStyle='rgba(255,255,255,0.32)'; ctx.textAlign='left'; ctx.fillText(t, bx+13, y);
+    });
+    ctx.restore();
+  }
+
+  /* ── Photon drawing ──────────────────────────── */
+
+  _drawPhotons(ctx) {
+    for (const p of this._photons) {
+      const pos = this._photonPos(p.pts, p.t);
+      if (!pos) continue;
+      ctx.save();
+      ctx.shadowColor = p.color; ctx.shadowBlur = 8;
+      ctx.fillStyle   = p.color;
+      ctx.beginPath(); ctx.arc(pos[0], pos[1], 3, 0, Math.PI*2); ctx.fill();
+      ctx.restore();
+    }
+  }
+
+  _photonPos(pts, t) {
+    if (pts.length < 2) return null;
+    let total = 0;
+    const lens = [];
+    for (let i=1; i<pts.length; i++) {
+      const l = Math.hypot(pts[i][0]-pts[i-1][0], pts[i][1]-pts[i-1][1]);
+      lens.push(l); total += l;
+    }
+    let dist = t * total;
+    for (let i=0; i<lens.length; i++) {
+      if (dist <= lens[i]) {
+        const k = dist/lens[i];
+        return [pts[i][0]+(pts[i+1][0]-pts[i][0])*k, pts[i][1]+(pts[i+1][1]-pts[i][1])*k];
+      }
+      dist -= lens[i];
+    }
+    return pts[pts.length-1];
+  }
+
+  /* ── Hover tooltip ───────────────────────────── */
+
+  _drawTooltip(ctx, mx, ay, f, dPrime, hPrime) {
+    const { _hoverX:hx, _hoverY:hy } = this;
+    if (hx < 0) return;
+    let tip = null;
+    const chk = (px, py, lbl, sub) => {
+      if (!tip && Math.hypot(hx-px, hy-py) < 15) tip = { lbl, sub };
+    };
+    if (isFinite(f)) {
+      chk(mx-f, ay,   'Главный фокус F', `f = ${Math.abs(f).toFixed(0)}`);
+      chk(mx-2*f, ay, 'Центр кривизны C', `R = 2f = ${(2*Math.abs(f)).toFixed(0)}`);
+    }
+    chk(mx-this.d, ay-(this._pointMode?0:this.h), 'Предмет', `d = ${this.d.toFixed(0)}, h = ${this.h.toFixed(0)}`);
+    if (dPrime !== null && isFinite(dPrime)) {
+      const ix=mx-dPrime, iy=ay-(this._pointMode?0:hPrime);
+      chk(ix, iy, 'Изображение', `d' = ${Math.abs(dPrime).toFixed(0)}, M = ${this.info().M}`);
+    }
+    if (!tip) return;
+
+    ctx.save();
+    ctx.font = 'bold 11px Manrope, system-ui, sans-serif';
+    const tw = Math.max(ctx.measureText(tip.lbl).width, ctx.measureText(tip.sub).width);
+    const bw=tw+20, bh=34;
+    let tx=hx+14, ty=hy-bh-6;
+    if (tx+bw > this.W-4) tx = hx-bw-14;
+    if (ty < 4) ty = hy+10;
+    ctx.fillStyle='rgba(13,13,26,0.95)'; ctx.strokeStyle='rgba(6,214,224,0.45)'; ctx.lineWidth=1;
+    ctx.beginPath(); ctx.roundRect(tx,ty,bw,bh,6); ctx.fill(); ctx.stroke();
+    ctx.fillStyle='#fff'; ctx.textAlign='left'; ctx.textBaseline='top';
+    ctx.fillText(tip.lbl, tx+10, ty+6);
+    ctx.font='10px Manrope, system-ui, sans-serif';
+    ctx.fillStyle='rgba(255,255,255,0.5)'; ctx.fillText(tip.sub, tx+10, ty+20);
+    ctx.restore();
+  }
+
+  /* ── Step overlay ────────────────────────────── */
+
+  _drawStepOverlay(ctx, step) {
+    const lbls = [
+      '① Луч параллельно оси → отражается через F',
+      '② Луч через вершину → отражается симметрично',
+      '③ Луч через F → отражается параллельно',
+      '   Изображение — пересечение всех отражённых лучей',
+    ];
+    const text = lbls[Math.min(step, lbls.length-1)];
+    ctx.save();
+    ctx.font = '11px Manrope, system-ui, sans-serif';
+    const tw = ctx.measureText(text).width;
+    const bx = this.W/2-tw/2-12, by = this.H-34;
+    ctx.fillStyle='rgba(13,13,26,0.9)';
+    ctx.beginPath(); ctx.roundRect(bx,by,tw+24,24,6); ctx.fill();
+    ctx.fillStyle='#7BF5A4'; ctx.textAlign='center'; ctx.textBaseline='middle';
+    ctx.fillText(text, this.W/2, by+12);
+    ctx.restore();
+  }
+
+  /* ── Events ──────────────────────────────────── */
+
+  _bindEvents() {
+    const cv = this.canvas;
+    const getPos = e => {
+      const r = cv.getBoundingClientRect();
+      const t = e.touches ? e.touches[0] : e;
+      return {
+        px: (t.clientX-r.left)*(this.W/r.width),
+        py: (t.clientY-r.top) *(this.H/r.height),
+      };
+    };
+    const mX  = () => Math.round(this.W*0.62);
+    const aY  = () => this.H/2;
+
+    const hitTest = (px, py) => {
+      if (this._playing) return null;
+      const mx=mX(), ay=aY(), f=this._fSigned();
+      if (Math.hypot(px-(mx-this.d), py-(ay-(this._pointMode?0:this.h))) < 20) return 'object';
+      if (this.type !== 'flat' && isFinite(f) && Math.hypot(px-(mx-f), py-ay) < 16) return 'focus';
+      const info = this.info();
+      if (info.dPrime !== Infinity && isFinite(info.dPrime)) {
+        const ix=mx-info.dPrime, iy=ay-(this._pointMode?0:(info.hPrime||0));
+        if (Math.hypot(px-ix, py-iy) < 18) return 'image';
+      }
+      return null;
+    };
+
+    cv.addEventListener('mousedown', e => { const {px,py}=getPos(e); this._drag=hitTest(px,py); });
+
+    window.addEventListener('mousemove', e => {
+      const {px,py} = getPos(e);
+      this._hoverX = px; this._hoverY = py;
+      if (this._drag) {
+        if (e.cancelable) e.preventDefault();
+        const mx=mX(), f=this._fSigned();
+        if (this._drag === 'object') {
+          this.d = Math.max(30, Math.min(490, mx-px));
+        } else if (this._drag === 'focus') {
+          this.f = Math.max(30, Math.min(300, Math.abs(mx-px)));
+        } else if (this._drag === 'image' && isFinite(f) && this.type !== 'flat') {
+          const dp = mx-px;
+          if (Math.abs(dp-f) > 5) this.d = Math.max(30, Math.min(490, f*dp/(dp-f)));
+        }
+        if (this.onAnimate) this.onAnimate(this.d);
+        this.draw(); this._emit();
+      } else if (!this._photonRaf && !this._playing) {
+        this.draw(); // redraw for tooltip
+      }
+    });
+
+    window.addEventListener('mouseup', () => { this._drag = null; });
+
+    cv.addEventListener('mousemove', e => {
+      if (this._drag) { cv.style.cursor='grabbing'; return; }
+      const {px,py}=getPos(e);
+      cv.style.cursor = (hitTest(px,py) && !this._playing) ? 'grab' : 'default';
+    });
+
+    cv.addEventListener('touchstart', e => {
+      if (e.touches.length===1) { const {px,py}=getPos(e); this._drag=hitTest(px,py); }
+    }, { passive: true });
+
+    cv.addEventListener('touchmove', e => {
+      if (!this._drag) return;
+      if (e.cancelable) e.preventDefault();
+      const {px}=getPos(e), mx=mX(), f=this._fSigned();
+      if (this._drag==='object') this.d=Math.max(30,Math.min(490,mx-px));
+      else if (this._drag==='focus') this.f=Math.max(30,Math.min(300,Math.abs(mx-px)));
+      else if (this._drag==='image' && isFinite(f) && this.type!=='flat') {
+        const dp=mx-px; if (Math.abs(dp-f)>5) this.d=Math.max(30,Math.min(490,f*dp/(dp-f)));
+      }
+      if (this.onAnimate) this.onAnimate(this.d);
+      this.draw(); this._emit();
+    }, { passive: false });
+
+    cv.addEventListener('touchend', () => { this._drag=null; });
+  }
+}
diff --git a/frontend/js/labs/newton.js b/frontend/js/labs/newton.js
new file mode 100644
index 0000000..d82c7cf
--- /dev/null
+++ b/frontend/js/labs/newton.js
@@ -0,0 +1,1204 @@
+'use strict';
+/* ════════════════════════════════════════════════════════════════
+   NewtonSim — три закона Ньютона
+   Закон I  : A — скользящий блок,     B — шар на нити
+   Закон II : A — один блок F=ma,      B — сравнение масс
+   Закон III: A — пушка + откат,       B — столкновение шаров, C — ракета
+   ════════════════════════════════════════════════════════════════ */
+
+class NewtonSim {
+
+  static SCALE = 58;   // px per metre (visual)
+  static G     = 9.81; // m/s²
+
+  /* ── Конструктор ─────────────────────────────────────────── */
+
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.ctx    = canvas.getContext('2d');
+
+    /* Пользовательские параметры */
+    this.law    = 1;
+    this.scene  = 'A';
+    this.mu     = 0.20;
+    this.mass1  = 5;    // кг — основной блок / шар / ядро
+    this.mass2  = 12;   // кг — сравниваемый блок / пушка
+    this.force  = 30;   // Н — приложенная сила (закон II)
+
+    /* Состояние сцен */
+    this._1A = {};
+    this._1B = {};
+    this._2  = {};
+    this._3A = {};
+    this._3B = {};
+    this._3C = {};
+
+    /* Петля */
+    this._raf    = null;
+    this._last   = 0;
+    this._paused = false;
+
+    /* Геометрия */
+    this.W = 0; this.H = 0;
+    this._g = {};
+
+    this.onUpdate     = null;
+    this.onModeChange = null;
+
+    this.fit();
+    this._bindEvents();
+  }
+
+  /* ── Геометрия ───────────────────────────────────────────── */
+
+  fit() {
+    const dpr = window.devicePixelRatio || 1;
+    const W   = this.canvas.offsetWidth  || 700;
+    const H   = this.canvas.offsetHeight || 440;
+    this.canvas.width  = Math.round(W * dpr);
+    this.canvas.height = Math.round(H * dpr);
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this.W = W; this.H = H;
+    this._g = {
+      gY:     H * 0.73,
+      cx:     W * 0.50,
+      cy:     H * 0.48,
+      orbitR: Math.min(W, H) * 0.255,
+    };
+    this._resetAll();
+  }
+
+  _resetAll() {
+    this._reset1A(); this._reset1B();
+    this._reset2();
+    this._reset3A(); this._reset3B(); this._reset3C();
+  }
+
+  /* ── Сброс каждой сцены ──────────────────────────────────── */
+
+  _reset1A() {
+    const { W, _g: g } = this;
+    this._1A = {
+      bx: W * 0.15, by: g.gY, bvx: 0, bvy: 0,
+      BW: 56, BH: 46,
+      trail: [], inAir: false,
+    };
+  }
+
+  _reset1B() {
+    const { _g: g } = this;
+    const omega = 1.35;
+    this._1B = {
+      angle: 0, omega,
+      cut: false, cutTimer: 0,
+      bx: g.cx + g.orbitR, by: g.cy,
+      bvx: 0, bvy: -g.orbitR * omega,
+    };
+  }
+
+  _reset2() {
+    const { W, _g: g } = this;
+    this._2 = {
+      b1x: W * 0.12, b1vx: 0,
+      b2x: W * 0.12, b2vx: 0,
+      history: [], t: 0, running: false,
+      flash: '',   // 'fin' message
+    };
+  }
+
+  _reset3A() {
+    const { W, _g: g } = this;
+    this._3A = {
+      cx: W * 0.38, cvx: 0,
+      ball: null, fired: false,
+      sparks: [], forceFlash: 0,
+    };
+  }
+
+  _reset3B() {
+    const { W, _g: g } = this;
+    const r1 = 16 + this.mass1 * 1.1;
+    const r2 = 16 + this.mass2 * 1.1;
+    this._3B = {
+      b1: { x: W * 0.18, vx:  160, mass: this.mass1, r: r1, color: '#EF476F' },
+      b2: { x: W * 0.82, vx: -100, mass: this.mass2, r: r2, color: '#4CC9F0' },
+      colFlash: 0, done: false,
+    };
+  }
+
+  _reset3C() {
+    const { W, H } = this;
+    this._3C = {
+      ry: H * 0.78, rvy: 0,
+      rmass: 10, fuel: 1,
+      particles: [], running: false,
+      stopped: false,
+    };
+  }
+
+  /* ── Запуск / остановка ──────────────────────────────────── */
+
+  start() {
+    if (this._raf) return;
+    this._last = performance.now();
+    const loop = t => { this._raf = requestAnimationFrame(loop); this._tick(t); };
+    this._raf = requestAnimationFrame(loop);
+  }
+
+  stop() { cancelAnimationFrame(this._raf); this._raf = null; }
+
+  /* ── Публичный API ───────────────────────────────────────── */
+
+  setLaw(n)    { this.law = n; this.scene = 'A'; this._resetAll(); if (this.onModeChange) this.onModeChange(); }
+  setScene(s)  { this.scene = s; this._resetAll(); }
+  setMu(v)     { this.mu = v; }
+  setMass1(v)  { this.mass1 = v; this._reset3B(); }
+  setMass2(v)  { this.mass2 = v; this._reset3B(); }
+  setForce(v)  { this.force = v; }
+
+  cutString()  {
+    this._1B.cut = true;
+    this._1B.bvx =  -Math.sin(this._1B.angle) * this._g.orbitR * this._1B.omega;
+    this._1B.bvy =   Math.cos(this._1B.angle) * this._g.orbitR * this._1B.omega;
+  }
+
+  startL2()    { this._2.running = true; }
+  resetL2()    { this._reset2(); }
+
+  fireCannon() {
+    if (this._3A.fired) { this._reset3A(); return; }
+    const { _g: g } = this;
+    const S = NewtonSim.SCALE;
+    const vBall   =  360;    // px/s
+    const vCannon = -(this.mass1 / this.mass2) * vBall;
+    this._3A.ball = { x: this._3A.cx + 68, y: g.gY - 22, vx: vBall, vy: -160 };
+    this._3A.cvx  = vCannon;
+    this._3A.fired = true;
+    this._3A.forceFlash = 0.55;
+    for (let i = 0; i < 24; i++) {
+      const a = (Math.random() - 0.5) * 1.1 - 0.05;
+      this._3A.sparks.push({
+        x: this._3A.cx + 68, y: g.gY - 22,
+        vx: Math.cos(a) * (180 + Math.random() * 220),
+        vy: Math.sin(a) * 140 - 80 - Math.random() * 120,
+        life: 1,
+      });
+    }
+  }
+
+  toggleRocket() {
+    if (this._3C.fuel <= 0) { this._reset3C(); return; }
+    this._3C.running = !this._3C.running;
+    if (this.onModeChange) this.onModeChange();
+  }
+
+  togglePause() { this._paused = !this._paused; }
+
+  preset(name) {
+    switch (name) {
+      case 'space':         this.mu = 0;    this._reset1A(); break;
+      case 'ice':           this.mu = 0.04; this._reset1A(); break;
+      case 'asphalt':       this.mu = 0.38; this._reset1A(); break;
+      case 'rubber':        this.mu = 0.72; this._reset1A(); break;
+      case 'light':         this.mass1 = 2;  this.force = 20; this._reset2(); break;
+      case 'heavy':         this.mass1 = 18; this.force = 20; this._reset2(); break;
+      case 'compare':       this.mass1 = 2; this.mass2 = 16; this.scene = 'B'; this._reset2(); break;
+      case 'big_cannon':    this.mass2 = 50; this.mass1 = 1;  this._reset3A(); break;
+      case 'small_cannon':  this.mass2 = 5;  this.mass1 = 4;  this._reset3A(); break;
+      case 'equal_balls':   this.mass1 = 8;  this.mass2 = 8;  this._reset3B(); break;
+    }
+    if (this.onUpdate) this.onUpdate(this.info());
+  }
+
+  /* ── Тик ──────────────────────────────────────────────────── */
+
+  _tick(now) {
+    const dt = Math.min((now - this._last) / 1000, 0.05);
+    this._last = now;
+    if (!this._paused) {
+      if      (this.law === 1 && this.scene === 'A') this._step1A(dt);
+      else if (this.law === 1)                        this._step1B(dt);
+      else if (this.law === 2)                        this._step2(dt);
+      else if (this.scene === 'A')                    this._step3A(dt);
+      else if (this.scene === 'B')                    this._step3B(dt);
+      else                                            this._step3C(dt);
+    }
+    this.draw();
+    if (this.onUpdate) this.onUpdate(this.info());
+  }
+
+  /* ── Физика I-A : блок с трением ────────────────────────── */
+
+  _step1A(dt) {
+    const b = this._1A;
+    const { W, _g: g } = this;
+    const S  = NewtonSim.SCALE;
+    const GV = NewtonSim.G * S;
+
+    /* Гравитация */
+    if (b.by < g.gY || b.bvy < 0) {
+      b.bvy += GV * dt;
+      b.inAir = true;
+    }
+
+    /* Интеграция */
+    b.bx += b.bvx * dt;
+    b.by += b.bvy * dt;
+
+    /* Приземление */
+    if (b.by >= g.gY) {
+      b.by  = g.gY;
+      b.bvy = Math.abs(b.bvy) > 60 ? -b.bvy * 0.42 : 0;
+      b.inAir = false;
+    }
+
+    /* Трение (только на земле) */
+    if (!b.inAir) {
+      const speed = Math.abs(b.bvx);
+      if (speed > 1) {
+        const dec = this.mu * GV * dt;
+        if (dec >= speed) b.bvx = 0;
+        else b.bvx -= Math.sign(b.bvx) * dec;
+      }
+    }
+
+    /* Стены (упругий отскок) */
+    const hw = b.BW / 2;
+    if (b.bx < hw)      { b.bx = hw;      b.bvx =  Math.abs(b.bvx) * 0.65; }
+    if (b.bx > W - hw)  { b.bx = W - hw;  b.bvx = -Math.abs(b.bvx) * 0.65; }
+
+    /* След */
+    const speed = Math.hypot(b.bvx, b.bvy);
+    if (speed > 15) {
+      b.trail.push({ x: b.bx, y: Math.min(b.by, g.gY) });
+      if (b.trail.length > 90) b.trail.shift();
+    } else if (b.trail.length > 0) {
+      b.trail.shift();
+    }
+  }
+
+  /* ── Физика I-B : орбита <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> прямолинейное движение ────────── */
+
+  _step1B(dt) {
+    const s = this._1B;
+    const { _g: g } = this;
+
+    if (!s.cut) {
+      s.angle += s.omega * dt;
+      s.bx = g.cx + Math.cos(s.angle) * g.orbitR;
+      s.by = g.cy + Math.sin(s.angle) * g.orbitR;
+      s.bvx = -Math.sin(s.angle) * g.orbitR * s.omega;
+      s.bvy =  Math.cos(s.angle) * g.orbitR * s.omega;
+    } else {
+      s.bx += s.bvx * dt;
+      s.by += s.bvy * dt;
+      s.cutTimer += dt;
+      if (s.cutTimer > 4.5) this._reset1B();
+    }
+  }
+
+  /* ── Физика II : F = m·a ──────────────────────────────────── */
+
+  _step2(dt) {
+    if (!this._2.running) return;
+    const { W } = this;
+    const S  = NewtonSim.SCALE;
+    const a1 = (this.force / this.mass1) * S;
+    const a2 = (this.force / this.mass2) * S;
+
+    this._2.b1vx += a1 * dt;  this._2.b1x += this._2.b1vx * dt;
+    this._2.b2vx += a2 * dt;  this._2.b2x += this._2.b2vx * dt;
+    this._2.t    += dt;
+
+    /* История для графика (примерно 20 точек/с) */
+    if (this._2.t % 0.05 < dt) {
+      this._2.history.push({ v1: this._2.b1vx / S, v2: this._2.b2vx / S });
+      if (this._2.history.length > 130) this._2.history.shift();
+    }
+
+    /* Сброс при достижении правого края */
+    if (this._2.b1x > W * 0.89 || this._2.b2x > W * 0.89) {
+      this._reset2(); this._2.running = true;
+    }
+  }
+
+  /* ── Физика III-A : пушка ─────────────────────────────────── */
+
+  _step3A(dt) {
+    const s = this._3A;
+    const { W, _g: g } = this;
+    const S  = NewtonSim.SCALE;
+    const GV = NewtonSim.G * S;
+
+    if (!s.fired) return;
+
+    if (this._3A.forceFlash > 0) this._3A.forceFlash -= dt;
+
+    /* Пушка тормозит */
+    if (Math.abs(s.cvx) > 2) {
+      const dec = this.mu * GV * dt;
+      if (dec >= Math.abs(s.cvx)) s.cvx = 0;
+      else s.cvx -= Math.sign(s.cvx) * dec;
+    } else { s.cvx = 0; }
+    s.cx = Math.max(60, Math.min(W - 80, s.cx + s.cvx * dt));
+
+    /* Ядро (баллистика) */
+    if (s.ball) {
+      s.ball.vy += GV * dt;
+      s.ball.x  += s.ball.vx * dt;
+      s.ball.y  += s.ball.vy * dt;
+      if (s.ball.y > g.gY + 40 || s.ball.x > W + 120 || s.ball.x < -120) s.ball = null;
+    }
+
+    /* Искры */
+    for (const sp of s.sparks) {
+      sp.x += sp.vx * dt; sp.y += sp.vy * dt;
+      sp.vy += GV * 0.6 * dt; sp.life -= dt * 2;
+    }
+    s.sparks = s.sparks.filter(sp => sp.life > 0);
+  }
+
+  /* ── Физика III-B : столкновение ─────────────────────────── */
+
+  _step3B(dt) {
+    const { b1, b2 } = this._3B;
+    const { W, _g: g } = this;
+    const S = NewtonSim.SCALE;
+
+    b1.x += b1.vx * dt;
+    b2.x += b2.vx * dt;
+
+    if (this._3B.colFlash > 0) this._3B.colFlash -= dt;
+
+    /* Упругое столкновение */
+    if (!this._3B.done) {
+      const dist = b2.x - b1.x;
+      if (dist < b1.r + b2.r) {
+        const m1 = b1.mass, m2 = b2.mass;
+        const v1 = b1.vx, v2 = b2.vx;
+        b1.vx = ((m1 - m2) * v1 + 2 * m2 * v2) / (m1 + m2);
+        b2.vx = ((m2 - m1) * v2 + 2 * m1 * v1) / (m1 + m2);
+        const overlap = b1.r + b2.r - dist;
+        b1.x -= overlap * 0.5; b2.x += overlap * 0.5;
+        this._3B.colFlash = 0.55;
+        this._3B.done = true;
+      }
+    }
+
+    /* Минимальное трение поверхности (сохраняет видимость закона импульса) */
+    if (this._3B.done) {
+      [b1, b2].forEach(b => { b.vx *= (1 - dt * 0.04); });
+    }
+
+    /* Авто-сброс */
+    if (b1.x < -120 || b2.x > W + 120 || (this._3B.done && Math.abs(b1.vx) < 2 && Math.abs(b2.vx) < 2)) {
+      setTimeout(() => this._reset3B(), 1800);
+      this._3B.done = true; // prevent double reset
+    }
+  }
+
+  /* ── Физика III-C : ракета ────────────────────────────────── */
+
+  _step3C(dt) {
+    const s = this._3C;
+    const { W, H } = this;
+    const g_vis = NewtonSim.G * 0.42; // visual gravity (px/s²)
+
+    /* Gravity always acts — even after fuel is out */
+    if (!s.running && s.fuel <= 0 && !s.stopped) {
+      s.rvy += g_vis * dt;
+      s.ry  += s.rvy * dt;
+      if (s.ry >= H * 0.78) { s.ry = H * 0.78; s.rvy = 0; s.stopped = true; }
+      /* exhaust smoke fading */
+      for (const p of s.particles) { p.x += p.vx * dt; p.y += p.vy * dt; p.life -= dt * 1.6; }
+      s.particles = s.particles.filter(p => p.life > 0 && p.y < H + 20);
+      return;
+    }
+
+    if (!s.running || s.fuel <= 0) {
+      if (s.fuel <= 0 && !s.stopped) { s.running = false; }
+      return;
+    }
+
+    const dmdt  = 0.025;   // кг/с — сгорание топлива
+    const F_thr = 220;     // Н — тяга (визуальная)
+    s.fuel  = Math.max(0, s.fuel - dmdt * dt);
+    s.rmass = Math.max(2,  10 * s.fuel + 2);
+
+    /* F_net = F_thrust - m·g */
+    const a_thrust = F_thr / s.rmass;
+    const a_net = a_thrust - g_vis;
+    s.rvy -= a_net * dt;
+    s.ry  += s.rvy * dt;
+    if (s.ry < H * 0.08) { s.ry = H * 0.08; s.rvy = 0; }
+    if (s.ry >= H * 0.78) { s.ry = H * 0.78; s.rvy = 0; }
+
+    /* Частицы выхлопа */
+    if (Math.random() < 0.55) {
+      s.particles.push({
+        x: W * 0.5 + (Math.random() - 0.5) * 16,
+        y: s.ry + 48,
+        vx: (Math.random() - 0.5) * 38,
+        vy: 130 + Math.random() * 170,
+        r: 2 + Math.random() * 4,
+        life: 1,
+      });
+    }
+    for (const p of s.particles) {
+      p.x += p.vx * dt; p.y += p.vy * dt; p.life -= dt * 1.6;
+    }
+    s.particles = s.particles.filter(p => p.life > 0 && p.y < H + 20);
+  }
+
+  /* ── Мышь ─────────────────────────────────────────────────── */
+
+  _bindEvents() {
+    this.canvas.addEventListener('click', e => {
+      if (this.law !== 1 || this.scene !== 'A') return;
+      const r  = this.canvas.getBoundingClientRect();
+      const x  = e.clientX - r.left;
+      const y  = e.clientY - r.top;
+      const b  = this._1A;
+      const dx = x - b.bx, dy = y - b.by;
+      const d  = Math.hypot(dx, dy);
+      if (d < 4) return;
+      const spd = 340;
+      b.bvx = (dx / d) * spd;
+      b.bvy = (dy / d) * spd;
+    });
+  }
+
+  /* ═══════════════════════════════════════════════════════════
+     РЕНДЕРИНГ
+     ═══════════════════════════════════════════════════════════ */
+
+  draw() {
+    const ctx = this.ctx;
+    const { W, H } = this;
+    ctx.clearRect(0, 0, W, H);
+
+    /* Фон */
+    const bg = ctx.createRadialGradient(W / 2, H * 0.3, 0, W / 2, H / 2, W * 0.82);
+    bg.addColorStop(0, '#0d1320'); bg.addColorStop(1, '#050810');
+    ctx.fillStyle = bg; ctx.fillRect(0, 0, W, H);
+
+    /* Водяной знак — номер закона */
+    ctx.save();
+    ctx.font = 'bold 78px sans-serif';
+    ctx.fillStyle = 'rgba(255,255,255,0.023)';
+    ctx.textAlign = 'center';
+    ctx.fillText(['', 'ЗАКОН I', 'ЗАКОН II', 'ЗАКОН III'][this.law], W / 2, H * 0.60);
+    ctx.textAlign = 'left';
+    ctx.restore();
+
+    if      (this.law === 1 && this.scene === 'A') this._drawL1A(ctx);
+    else if (this.law === 1)                        this._drawL1B(ctx);
+    else if (this.law === 2)                        this._drawL2(ctx);
+    else if (this.scene === 'A')                    this._drawL3A(ctx);
+    else if (this.scene === 'B')                    this._drawL3B(ctx);
+    else                                            this._drawL3C(ctx);
+  }
+
+  /* ── Закон I — Сцена A ───────────────────────────────────── */
+
+  _drawL1A(ctx) {
+    const { W, H, _g: g } = this;
+    const b = this._1A;
+    const S = NewtonSim.SCALE;
+    const spd = Math.hypot(b.bvx, b.bvy);
+
+    /* Звёздный фон при μ≈0 */
+    if (this.mu < 0.02) {
+      this._stars(ctx);
+      ctx.font = 'bold 12px sans-serif';
+      ctx.fillStyle = '#7BF5A4';
+      ctx.textAlign = 'center';
+      ctx.fillText('Трения нет — тело движется вечно!', W / 2, H * 0.10);
+      ctx.textAlign = 'left';
+    } else {
+      this._ground(ctx, g.gY, W);
+    }
+
+    /* След */
+    if (b.trail.length > 2) {
+      for (let i = 2; i < b.trail.length; i++) {
+        const a = (i / b.trail.length) * 0.55;
+        ctx.strokeStyle = `rgba(255,209,102,${a})`;
+        ctx.lineWidth = 2.5;
+        ctx.beginPath();
+        ctx.moveTo(b.trail[i-1].x, b.trail[i-1].y - 2);
+        ctx.lineTo(b.trail[i].x,   b.trail[i].y   - 2);
+        ctx.stroke();
+      }
+    }
+
+    /* Блок */
+    const by = b.by - b.BH / 2;
+    this._block(ctx, b.bx, by, b.BW, b.BH, '#9B5DE5', `${this.mass1} кг`);
+
+    /* Вектор скорости */
+    if (spd > 8) {
+      const scale = 0.28;
+      this._arrow(ctx,
+        b.bx, by,
+        b.bx + b.bvx * scale, by + b.bvy * scale,
+        '#FFD166', 'v = ' + (spd / S).toFixed(1) + ' м/с', 2.5);
+    }
+
+    /* Сила трения (горизонтальная, только на земле) */
+    if (!b.inAir && Math.abs(b.bvx) > 8 && this.mu > 0.01) {
+      const fFr = this.mu * this.mass1 * NewtonSim.G;
+      this._arrow(ctx,
+        b.bx, by - 32,
+        b.bx - Math.sign(b.bvx) * 55, by - 32,
+        '#EF476F', `F тр = ${fFr.toFixed(1)} Н`, 2);
+    }
+
+    /* Подсказка */
+    if (spd < 4) {
+      ctx.font = '13px sans-serif'; ctx.fillStyle = 'rgba(185,210,255,0.38)';
+      ctx.textAlign = 'center';
+      ctx.fillText('Кликни куда угодно — придай импульс блоку', W / 2, g.gY + 28);
+      ctx.textAlign = 'left';
+    }
+
+    /* μ и формула */
+    ctx.font = '12px monospace'; ctx.fillStyle = 'rgba(185,210,255,0.75)';
+    ctx.fillText(`μ = ${this.mu.toFixed(2)}    F тр = μ · m · g`, 18, 26);
+
+    this._caption(ctx, 'Тело продолжает движение\nпока не подействует сила', W, H);
+  }
+
+  /* ── Закон I — Сцена B ───────────────────────────────────── */
+
+  _drawL1B(ctx) {
+    const { W, H, _g: g } = this;
+    const s = this._1B;
+
+    this._stars(ctx);
+
+    /* Орбита */
+    ctx.save();
+    ctx.setLineDash([5, 9]);
+    ctx.strokeStyle = 'rgba(100,165,255,0.20)'; ctx.lineWidth = 1.5;
+    ctx.beginPath(); ctx.arc(g.cx, g.cy, g.orbitR, 0, Math.PI * 2); ctx.stroke();
+    ctx.setLineDash([]); ctx.restore();
+
+    /* Центральное тело */
+    ctx.save();
+    ctx.shadowColor = '#FFD166'; ctx.shadowBlur = 22;
+    ctx.beginPath(); ctx.arc(g.cx, g.cy, 20, 0, Math.PI * 2);
+    const cg = ctx.createRadialGradient(g.cx - 5, g.cy - 5, 0, g.cx, g.cy, 20);
+    cg.addColorStop(0, '#FFEA70'); cg.addColorStop(1, '#FF9500');
+    ctx.fillStyle = cg; ctx.fill();
+    ctx.restore();
+
+    /* Нить */
+    if (!s.cut) {
+      ctx.strokeStyle = 'rgba(210,225,255,0.55)'; ctx.lineWidth = 1.8;
+      ctx.beginPath(); ctx.moveTo(g.cx, g.cy); ctx.lineTo(s.bx, s.by); ctx.stroke();
+
+      /* Стрелка натяжения (центростремительная) */
+      const len  = g.orbitR;
+      const tx   = (g.cx - s.bx) / len * 36;
+      const ty   = (g.cy - s.by) / len * 36;
+      const F_c  = (this.mass1 * g.orbitR * s.omega * s.omega * NewtonSim.SCALE / NewtonSim.SCALE).toFixed(1);
+      this._arrow(ctx, s.bx, s.by, s.bx + tx, s.by + ty, '#4CC9F0', `T = F ц`, 1.8);
+    } else {
+      ctx.font = 'bold 14px sans-serif'; ctx.fillStyle = '#7BF5A4';
+      ctx.textAlign = 'center';
+      ctx.fillText('✂ Нить разрезана — тело летит прямолинейно!', W / 2, H * 0.10);
+      ctx.textAlign = 'left';
+
+      /* Вектор скорости по касательной */
+      this._arrow(ctx, s.bx, s.by,
+        s.bx + s.bvx * 0.22, s.by + s.bvy * 0.22,
+        '#FFD166', 'v = const', 2.8);
+    }
+
+    /* Шар */
+    ctx.save();
+    ctx.shadowColor = '#4CC9F0'; ctx.shadowBlur = 14;
+    ctx.beginPath(); ctx.arc(s.bx, s.by, 16, 0, Math.PI * 2);
+    ctx.fillStyle = '#4CC9F0'; ctx.fill();
+    ctx.restore();
+
+    /* Вектор скорости (во время орбиты) */
+    if (!s.cut) {
+      this._arrow(ctx, s.bx, s.by,
+        s.bx + s.bvx * 0.18, s.by + s.bvy * 0.18,
+        '#FFD166', '', 2);
+    }
+
+    this._caption(ctx, 'Без силы тело движется прямолинейно\nравномерно (1-й закон Ньютона)', W, H);
+  }
+
+  /* ── Закон II ─────────────────────────────────────────────── */
+
+  _drawL2(ctx) {
+    const { W, H, _g: g } = this;
+    const S  = NewtonSim.SCALE;
+    const a1 = this.force / this.mass1;
+    const a2 = this.force / this.mass2;
+
+    this._ground(ctx, g.gY, W);
+
+    /* Линия финиша */
+    ctx.strokeStyle = 'rgba(255,255,255,0.13)'; ctx.lineWidth = 1;
+    ctx.setLineDash([6, 7]);
+    ctx.beginPath(); ctx.moveTo(W * 0.89, 0); ctx.lineTo(W * 0.89, g.gY + 8); ctx.stroke();
+    ctx.setLineDash([]);
+
+    const BW = 58, BH = 48;
+
+    if (this.scene === 'A') {
+      /* ── Один блок ── */
+      const { b1x: bx, b1vx: bvx } = this._2;
+      const by = g.gY - BH / 2;
+
+      this._block(ctx, bx, by, BW, BH, '#EF476F', `${this.mass1} кг`);
+
+      /* Сила F */
+      this._arrow(ctx, bx + BW / 2, by,
+        bx + BW / 2 + 48 + this.force * 0.9, by,
+        '#EF476F', `F = ${this.force} Н`, 2.5);
+
+      /* Ускорение a */
+      const aLen = 32 + a1 * 5;
+      this._arrow(ctx, bx + BW / 2, by - 32,
+        bx + BW / 2 + aLen, by - 32,
+        '#7BF5A4', `a = ${a1.toFixed(1)} м/с²`, 2.5);
+
+      /* Скорость v */
+      if (bvx > 8) {
+        const v = bvx / S;
+        this._arrow(ctx, bx + BW / 2, by + 32,
+          bx + BW / 2 + bvx * 0.28, by + 32,
+          '#FFD166', `v = ${v.toFixed(1)} м/с`, 2);
+      }
+
+      /* Уравнение F = m·a */
+      this._fma(ctx, this.force, this.mass1, a1, W / 2, H * 0.12);
+
+      /* Мини-график v(t) */
+      if (this._2.history.length > 3) {
+        this._graph(ctx, this._2.history.map(h => h.v1),
+          W * 0.72, 14, 145, 62, '#FFD166', 'v(t) м/с');
+      }
+
+      if (!this._2.running) {
+        ctx.font = '13px sans-serif'; ctx.fillStyle = 'rgba(185,210,255,0.38)';
+        ctx.textAlign = 'center';
+        ctx.fillText('Нажмите «Старт» чтобы запустить', W / 2, g.gY + 28);
+        ctx.textAlign = 'left';
+      }
+
+    } else {
+      /* ── Сравнение двух масс ── */
+      const y1 = g.gY - BH - 6, y2 = g.gY + 4;
+
+      /* Разделитель дорожек */
+      ctx.strokeStyle = 'rgba(255,255,255,0.07)'; ctx.lineWidth = 1;
+      ctx.setLineDash([4, 7]);
+      ctx.beginPath(); ctx.moveTo(0, g.gY - BH / 2 - 4); ctx.lineTo(W, g.gY - BH / 2 - 4); ctx.stroke();
+      ctx.setLineDash([]);
+
+      const bx1 = this._2.b1x, bx2 = this._2.b2x;
+
+      this._block(ctx, bx1, y1, BW, BH, '#EF476F', `${this.mass1} кг`);
+      this._block(ctx, bx2, y2, BW, BH, '#4CC9F0', `${this.mass2} кг`);
+
+      /* Силы (одинаковые) */
+      const fLen = 40 + this.force * 0.9;
+      this._arrow(ctx, bx1 + BW / 2, y1 + BH / 2, bx1 + BW / 2 + fLen, y1 + BH / 2, '#EF476F', `F=${this.force}Н`, 2);
+      this._arrow(ctx, bx2 + BW / 2, y2 + BH / 2, bx2 + BW / 2 + fLen, y2 + BH / 2, '#4CC9F0', `F=${this.force}Н`, 2);
+
+      /* Ускорения */
+      ctx.font = 'bold 11px monospace';
+      ctx.fillStyle = '#7BF5A4'; ctx.fillText(`a₁=${a1.toFixed(1)} м/с²`, bx1 + 2, y1 - 8);
+      ctx.fillStyle = '#06D6E0'; ctx.fillText(`a₂=${a2.toFixed(1)} м/с²`, bx2 + 2, y2 - 8);
+
+      /* Вывод */
+      if (this._2.running && bx1 > bx2 + 20) {
+        ctx.font = 'bold 13px sans-serif'; ctx.fillStyle = '#7BF5A4';
+        ctx.textAlign = 'center';
+        ctx.fillText('Меньше масса → больше ускорение!', W / 2, g.gY + 26);
+        ctx.textAlign = 'left';
+      }
+
+      /* Графики */
+      if (this._2.history.length > 3) {
+        this._graph(ctx, this._2.history.map(h => h.v1), W * 0.68, 14, 130, 58, '#EF476F', 'v₁ м/с');
+        this._graph(ctx, this._2.history.map(h => h.v2), W * 0.68, 80, 130, 58, '#4CC9F0', 'v₂ м/с');
+      }
+
+      if (!this._2.running) {
+        ctx.font = '13px sans-serif'; ctx.fillStyle = 'rgba(185,210,255,0.38)';
+        ctx.textAlign = 'center';
+        ctx.fillText('Нажмите «Старт» чтобы запустить', W / 2, g.gY + 28);
+        ctx.textAlign = 'left';
+      }
+    }
+
+    this._caption(ctx, 'F = m · a', W, H);
+  }
+
+  /* ── Закон III — Сцена A : пушка ────────────────────────── */
+
+  _drawL3A(ctx) {
+    const { W, H, _g: g } = this;
+    const s  = this._3A;
+    const S  = NewtonSim.SCALE;
+    const CW = 124, CH = 42;
+
+    this._ground(ctx, g.gY, W);
+
+    /* Корпус пушки */
+    ctx.save();
+    ctx.shadowColor = '#9B5DE5'; ctx.shadowBlur = 14;
+    _nwt_rrect(ctx, s.cx - CW / 2, g.gY - CH - 4, CW, CH, 8);
+    const cg = ctx.createLinearGradient(0, g.gY - CH - 4, 0, g.gY - 4);
+    cg.addColorStop(0, '#5a3a7a'); cg.addColorStop(1, '#3a2260');
+    ctx.fillStyle = cg; ctx.fill();
+    ctx.strokeStyle = '#9B5DE5'; ctx.lineWidth = 1.8; ctx.stroke();
+    ctx.restore();
+
+    /* Ствол */
+    ctx.save();
+    ctx.shadowColor = '#9B5DE5'; ctx.shadowBlur = 7;
+    _nwt_rrect(ctx, s.cx + CW / 2 - 8, g.gY - CH / 2 - 8 - 4, 58, 16, 4);
+    ctx.fillStyle = '#7340a0'; ctx.fill();
+    ctx.strokeStyle = '#9B5DE5'; ctx.lineWidth = 1.5; ctx.stroke();
+    ctx.restore();
+
+    /* Колёса */
+    [s.cx - CW / 2 + 18, s.cx + CW / 2 - 18].forEach(wx => {
+      ctx.save(); ctx.shadowColor = '#9B5DE5'; ctx.shadowBlur = 6;
+      ctx.beginPath(); ctx.arc(wx, g.gY, 10, 0, Math.PI * 2);
+      ctx.fillStyle = '#4a2870'; ctx.fill();
+      ctx.strokeStyle = '#9B5DE5'; ctx.lineWidth = 1.5; ctx.stroke();
+      ctx.restore();
+    });
+
+    /* Масса пушки */
+    ctx.font = 'bold 11px monospace'; ctx.fillStyle = 'rgba(200,180,255,0.9)';
+    ctx.textAlign = 'center';
+    ctx.fillText(`M = ${this.mass2} кг`, s.cx, g.gY - CH - 16);
+    ctx.textAlign = 'left';
+
+    /* Ядро */
+    if (s.ball) {
+      ctx.save();
+      ctx.shadowColor = '#FFD166'; ctx.shadowBlur = 12;
+      ctx.beginPath(); ctx.arc(s.ball.x, s.ball.y, 12, 0, Math.PI * 2);
+      ctx.fillStyle = '#FFD166'; ctx.fill();
+      ctx.restore();
+      ctx.font = '10px monospace'; ctx.fillStyle = 'rgba(255,209,102,0.82)';
+      ctx.textAlign = 'center';
+      ctx.fillText(`m = ${this.mass1} кг`, s.ball.x, s.ball.y + 26);
+      ctx.textAlign = 'left';
+    }
+
+    /* Стрелки сил (сразу после выстрела) */
+    if (s.forceFlash > 0) {
+      const alpha = Math.min(1, s.forceFlash * 2.5);
+      const fScale = 72 * alpha;
+      const ny = g.gY - CH - 32;
+      /* Сила на ядро <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> вправо */
+      this._arrow(ctx, s.cx + CW / 2 + 20, ny, s.cx + CW / 2 + 20 + fScale, ny, '#EF476F', 'F<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>ядро', 2.5);
+      /* Реакция на пушку <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> влево */
+      this._arrow(ctx, s.cx - CW / 2 - 20, ny, s.cx - CW / 2 - 20 - fScale, ny, '#4CC9F0', 'F<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>пушка', 2.5);
+
+      ctx.save(); ctx.globalAlpha = alpha;
+      ctx.font = 'bold 12px sans-serif'; ctx.fillStyle = '#FFD166';
+      ctx.textAlign = 'center';
+      ctx.fillText('|F→ядро| = |F→пушка|', s.cx, ny - 22);
+      ctx.restore();
+    }
+
+    /* Скорости (после выстрела, когда искры погасли) */
+    if (s.fired && s.sparks.length === 0 && s.forceFlash <= 0) {
+      if (s.cvx !== 0) {
+        this._arrow(ctx, s.cx, g.gY - CH / 2 - 4, s.cx + s.cvx * 0.35, g.gY - CH / 2 - 4,
+          '#4CC9F0', `V₂=${(s.cvx/S).toFixed(1)}м/с`, 2);
+      }
+      if (s.ball) {
+        this._arrow(ctx, s.ball.x, s.ball.y, s.ball.x + s.ball.vx * 0.12, s.ball.y + s.ball.vy * 0.12,
+          '#EF476F', `V₁=${(s.ball.vx/S).toFixed(1)}м/с`, 2);
+      }
+      /* Сохранение импульса */
+      const p1 = (this.mass1 * 360 / S).toFixed(1);
+      const p2 = Math.abs(this.mass2 * (this.mass1 / this.mass2) * 360 / S).toFixed(1);
+      ctx.font = '12px monospace'; ctx.fillStyle = 'rgba(185,210,255,0.82)';
+      ctx.textAlign = 'center';
+      ctx.fillText(`p₁ = ${p1} кг·м/с    p₂ = ${p2} кг·м/с    Δp_total = 0`, W / 2, H * 0.11);
+      ctx.textAlign = 'left';
+    }
+
+    /* Искры */
+    for (const sp of s.sparks) {
+      ctx.save(); ctx.globalAlpha = sp.life;
+      ctx.shadowColor = '#FFD166'; ctx.shadowBlur = 8;
+      ctx.beginPath(); ctx.arc(sp.x, sp.y, 3 * sp.life, 0, Math.PI * 2);
+      ctx.fillStyle = sp.life > 0.5 ? '#FFD166' : '#EF476F'; ctx.fill();
+      ctx.restore();
+    }
+
+    if (!s.fired) {
+      ctx.font = '13px sans-serif'; ctx.fillStyle = 'rgba(185,210,255,0.38)';
+      ctx.textAlign = 'center';
+      ctx.fillText('Нажмите «Выстрел!» чтобы запустить ядро', W / 2, g.gY + 28);
+      ctx.textAlign = 'left';
+    }
+
+    this._caption(ctx, 'Действие = Противодействие\nF₁ = −F₂', W, H);
+  }
+
+  /* ── Закон III — Сцена B : столкновение ─────────────────── */
+
+  _drawL3B(ctx) {
+    const { W, H, _g: g } = this;
+    const { b1, b2, colFlash } = this._3B;
+    const S = NewtonSim.SCALE;
+    const cy = g.cy + 15;
+
+    /* Дорожка */
+    ctx.fillStyle = 'rgba(60,90,160,0.07)';
+    ctx.fillRect(0, cy - 50, W, 100);
+
+    /* Тени-следы */
+    [b1, b2].forEach(b => {
+      if (Math.abs(b.vx) < 4) return;
+      ctx.save(); ctx.globalAlpha = 0.14;
+      for (let s2 = 1; s2 <= 3; s2++) {
+        ctx.beginPath();
+        ctx.arc(b.x - b.vx * 0.06 * s2, cy, b.r * (1 - s2 * 0.1), 0, Math.PI * 2);
+        ctx.fillStyle = b.color; ctx.fill();
+      }
+      ctx.restore();
+    });
+
+    /* Шары */
+    [b1, b2].forEach(b => {
+      ctx.save();
+      ctx.shadowColor = b.color; ctx.shadowBlur = 16;
+      ctx.beginPath(); ctx.arc(b.x, cy, b.r, 0, Math.PI * 2);
+      const bg2 = ctx.createRadialGradient(b.x - b.r * 0.3, cy - b.r * 0.3, 0, b.x, cy, b.r);
+      bg2.addColorStop(0, _nwt_lighten(b.color, 65));
+      bg2.addColorStop(1, b.color);
+      ctx.fillStyle = bg2; ctx.fill();
+      ctx.restore();
+      /* Масса и скорость */
+      ctx.font = 'bold 12px monospace'; ctx.fillStyle = 'rgba(225,235,255,0.9)';
+      ctx.textAlign = 'center';
+      ctx.fillText(`${b.mass} кг`, b.x, cy + b.r + 19);
+      if (Math.abs(b.vx) > 6) {
+        ctx.fillStyle = '#FFD166';
+        ctx.fillText(`v=${( b.vx / S ).toFixed(1)}`, b.x, cy - b.r - 8);
+      }
+      ctx.textAlign = 'left';
+    });
+
+    /* Вспышка сил при ударе */
+    if (colFlash > 0.06) {
+      const mx  = (b1.x + b2.x) / 2;
+      const fY  = cy - b1.r - 28;
+      const a   = Math.min(1, colFlash * 2.5);
+      const len = 65 * a;
+      this._arrow(ctx, mx, fY,     mx - len, fY,     '#EF476F', 'F₁₂', 2.5);
+      this._arrow(ctx, mx, fY + 8, mx + len, fY + 8, '#4CC9F0', 'F₂₁', 2.5);
+      ctx.save(); ctx.globalAlpha = a;
+      ctx.font = 'bold 12px sans-serif'; ctx.fillStyle = '#FFD166';
+      ctx.textAlign = 'center'; ctx.fillText('|F₁₂| = |F₂₁|', mx, fY - 18); ctx.restore();
+    }
+
+    /* Импульс */
+    const p1 = (b1.mass * b1.vx / S).toFixed(2);
+    const p2 = (b2.mass * b2.vx / S).toFixed(2);
+    const pt = ((b1.mass * b1.vx + b2.mass * b2.vx) / S).toFixed(2);
+    ctx.font = '12px monospace'; ctx.fillStyle = 'rgba(185,210,255,0.82)';
+    ctx.textAlign = 'center';
+    ctx.fillText(`p₁ = ${p1}   p₂ = ${p2}   p(сумм) = ${pt} кг·м/с`, W / 2, H * 0.12);
+    ctx.textAlign = 'left';
+
+    this._caption(ctx, 'Δp₁ = −Δp₂  (импульс сохраняется)', W, H);
+  }
+
+  /* ── Закон III — Сцена C : ракета ───────────────────────── */
+
+  _drawL3C(ctx) {
+    const { W, H } = this;
+    const s  = this._3C;
+    const S  = NewtonSim.SCALE;
+    const rx = W / 2;
+
+    this._stars(ctx);
+
+    /* Частицы выхлопа */
+    for (const p of s.particles) {
+      ctx.save();
+      ctx.globalAlpha = p.life * 0.85;
+      const col = p.life > 0.6 ? '#FFD166' : p.life > 0.3 ? '#FF6B35' : '#EF476F';
+      ctx.shadowColor = col; ctx.shadowBlur = 7;
+      ctx.beginPath(); ctx.arc(p.x, p.y, p.r * p.life, 0, Math.PI * 2);
+      ctx.fillStyle = col; ctx.fill();
+      ctx.restore();
+    }
+
+    /* Ракета */
+    const ry = s.ry;
+    ctx.save(); ctx.shadowColor = '#4CC9F0'; ctx.shadowBlur = 18;
+
+    /* Фюзеляж */
+    _nwt_rrect(ctx, rx - 17, ry - 50, 34, 62, 7);
+    const rg = ctx.createLinearGradient(rx - 17, 0, rx + 17, 0);
+    rg.addColorStop(0, '#1a3a5a'); rg.addColorStop(0.5, '#4CC9F0'); rg.addColorStop(1, '#1a3a5a');
+    ctx.fillStyle = rg; ctx.fill();
+    ctx.strokeStyle = '#4CC9F0'; ctx.lineWidth = 1.5; ctx.stroke();
+
+    /* Нос */
+    ctx.beginPath();
+    ctx.moveTo(rx, ry - 72); ctx.lineTo(rx - 15, ry - 50); ctx.lineTo(rx + 15, ry - 50);
+    ctx.closePath(); ctx.fillStyle = '#06D6E0'; ctx.fill();
+
+    /* Плавники */
+    [[-1], [1]].forEach(([dx]) => {
+      ctx.beginPath();
+      ctx.moveTo(rx + dx * 17, ry + 12);
+      ctx.lineTo(rx + dx * 32, ry + 32);
+      ctx.lineTo(rx + dx * 17, ry + 22);
+      ctx.closePath(); ctx.fillStyle = '#06D6E0'; ctx.fill();
+    });
+    /* Иллюминатор */
+    ctx.beginPath(); ctx.arc(rx, ry - 20, 7, 0, Math.PI * 2);
+    ctx.fillStyle = 'rgba(200,240,255,0.25)'; ctx.fill();
+    ctx.strokeStyle = '#4CC9F0'; ctx.lineWidth = 1; ctx.stroke();
+    ctx.restore();
+
+    /* Стрелки сил */
+    if (s.running) {
+      const g_vis = NewtonSim.G * 0.42;
+      const a_thrust = 220 / s.rmass;
+      const a_net = (a_thrust - g_vis).toFixed(1);
+      this._arrow(ctx, rx, ry - 55, rx, ry - 55 - 52, '#7BF5A4', `F тяга`, 2.5);
+      this._arrow(ctx, rx - 38, ry, rx - 38, ry + 36, '#FFD166', 'mg', 1.8);
+      this._arrow(ctx, rx, ry + 25, rx, ry + 80, '#EF476F', 'F газ', 2.5);
+      ctx.font = '12px monospace'; ctx.fillStyle = '#7BF5A4';
+      ctx.textAlign = 'center';
+      ctx.fillText(`a = F/m − g = ${a_net} м/с²`, rx, ry - 110);
+      ctx.textAlign = 'left';
+    }
+    /* Falling after fuel out — show gravity arrow */
+    if (s.fuel <= 0 && !s.stopped) {
+      this._arrow(ctx, rx, ry + 25, rx, ry + 65, '#EF476F', 'mg<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>', 2.5);
+      ctx.font = 'bold 13px sans-serif'; ctx.fillStyle = '#EF476F';
+      ctx.textAlign = 'center'; ctx.fillText('Топливо кончилось — ракета падает!', W / 2, H * 0.15); ctx.textAlign = 'left';
+    }
+
+    /* Инфо */
+    ctx.font = '12px monospace'; ctx.fillStyle = 'rgba(185,210,255,0.82)';
+    ctx.textAlign = 'center';
+    ctx.fillText(`Масса: ${s.rmass.toFixed(1)} кг  Топливо: ${(s.fuel * 100).toFixed(0)}%`, W / 2, H * 0.94);
+    ctx.textAlign = 'left';
+
+    if (s.fuel <= 0 && s.stopped) {
+      ctx.font = 'bold 13px sans-serif'; ctx.fillStyle = '#FFD166';
+      ctx.textAlign = 'center'; ctx.fillText('Ракета приземлилась. Нажмите «Запуск» для сброса.', W / 2, H * 0.15); ctx.textAlign = 'left';
+    } else if (!s.running && s.fuel > 0) {
+      ctx.font = '13px sans-serif'; ctx.fillStyle = 'rgba(185,210,255,0.38)';
+      ctx.textAlign = 'center'; ctx.fillText('Нажмите «Запуск» для включения двигателя', W / 2, H * 0.50); ctx.textAlign = 'left';
+    }
+
+    this._caption(ctx, 'Газ вниз <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> ракета вверх\n(3-й закон Ньютона)', W, H);
+  }
+
+  /* ── Вспомогательные рисовалки ──────────────────────────── */
+
+  _ground(ctx, gY, W) {
+    const mu = this.mu;
+    /* Поверхность */
+    const gg = ctx.createLinearGradient(0, gY, 0, gY + 42);
+    gg.addColorStop(0, mu < 0.1 ? '#182535' : mu < 0.45 ? '#1c1f2d' : '#201420');
+    gg.addColorStop(1, '#0c101a');
+    ctx.fillStyle = gg; ctx.fillRect(0, gY, W, 55);
+    /* Линия */
+    ctx.strokeStyle = mu < 0.1 ? 'rgba(76,201,240,0.42)' : mu < 0.45 ? 'rgba(155,93,229,0.42)' : 'rgba(239,71,111,0.42)';
+    ctx.lineWidth = 2;
+    ctx.beginPath(); ctx.moveTo(0, gY); ctx.lineTo(W, gY); ctx.stroke();
+    /* Штриховка */
+    ctx.strokeStyle = 'rgba(255,255,255,0.04)'; ctx.lineWidth = 1;
+    for (let x = 0; x < W; x += 22) {
+      ctx.beginPath(); ctx.moveTo(x, gY); ctx.lineTo(x + 12, gY + 12); ctx.stroke();
+    }
+    /* Шероховатость (при высоком трении) */
+    if (mu > 0.06) {
+      ctx.fillStyle = `rgba(255,255,255,${mu * 0.055})`;
+      for (let x = 9; x < W; x += 20) {
+        ctx.beginPath(); ctx.arc(x, gY + 5, 2.5, 0, Math.PI * 2); ctx.fill();
+      }
+    }
+  }
+
+  _stars(ctx) {
+    const { W, H } = this;
+    for (let i = 0; i < 65; i++) {
+      const x = ((i * 139.5 + 7) % W);
+      const y = ((i * 97.3  + 5) % (H * 0.88));
+      const r = i % 8 === 0 ? 1.6 : 0.9;
+      ctx.fillStyle = `rgba(255,255,255,${0.35 + (i % 3) * 0.18})`;
+      ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fill();
+    }
+  }
+
+  _block(ctx, cx, cy, w, h, color, label) {
+    ctx.save();
+    ctx.shadowColor = color; ctx.shadowBlur = 10;
+    _nwt_rrect(ctx, cx - w / 2, cy - h / 2, w, h, 7);
+    const bg = ctx.createLinearGradient(cx - w/2, cy - h/2, cx + w/2, cy + h/2);
+    bg.addColorStop(0, _nwt_lighten(color, 45));
+    bg.addColorStop(1, color);
+    ctx.fillStyle = bg; ctx.fill();
+    ctx.strokeStyle = _nwt_lighten(color, 60); ctx.lineWidth = 1.5; ctx.stroke();
+    ctx.shadowBlur = 0;
+    ctx.font = 'bold 11px monospace'; ctx.fillStyle = '#fff';
+    ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+    ctx.fillText(label, cx, cy);
+    ctx.textAlign = 'left'; ctx.textBaseline = 'alphabetic';
+    ctx.restore();
+  }
+
+  _arrow(ctx, x1, y1, x2, y2, color, label, lw = 2) {
+    const dx = x2 - x1, dy = y2 - y1;
+    const len = Math.hypot(dx, dy);
+    if (len < 5) return;
+    const ux = dx / len, uy = dy / len;
+    const hw = 7, hl = 13;
+    ctx.save();
+    ctx.strokeStyle = color; ctx.lineWidth = lw;
+    ctx.shadowColor = color; ctx.shadowBlur = 6;
+    ctx.lineCap = 'round';
+    ctx.beginPath();
+    ctx.moveTo(x1, y1);
+    ctx.lineTo(x2 - ux * hl, y2 - uy * hl);
+    ctx.stroke();
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(x2, y2);
+    ctx.lineTo(x2 - ux * hl - uy * hw, y2 - uy * hl + ux * hw);
+    ctx.lineTo(x2 - ux * hl + uy * hw, y2 - uy * hl - ux * hw);
+    ctx.closePath(); ctx.fill();
+    if (label) {
+      ctx.shadowBlur = 0; ctx.font = '11px monospace'; ctx.fillStyle = color;
+      const lx = (x1 + x2) / 2 - uy * 16;
+      const ly = (y1 + y2) / 2 + ux * 16;
+      ctx.textAlign = 'center'; ctx.fillText(label, lx, ly); ctx.textAlign = 'left';
+    }
+    ctx.restore();
+  }
+
+  _fma(ctx, F, m, a, cx, y) {
+    ctx.save();
+    ctx.font = 'bold 15px monospace';
+    ctx.textAlign = 'center';
+    ctx.shadowColor = '#7BF5A4'; ctx.shadowBlur = 14;
+    ctx.fillStyle = 'rgba(123,245,164,0.88)';
+    ctx.fillText(`F = m·a      ${F} Н = ${m} кг × ${a.toFixed(1)} м/с²`, cx, y);
+    ctx.restore();
+  }
+
+  _graph(ctx, data, x, y, w, h, color, label) {
+    if (data.length < 2) return;
+    const max = Math.max(...data, 0.01);
+    _nwt_rrect(ctx, x, y, w, h, 4);
+    ctx.fillStyle = 'rgba(0,0,0,0.38)'; ctx.fill();
+    ctx.strokeStyle = 'rgba(255,255,255,0.10)'; ctx.lineWidth = 1; ctx.stroke();
+    ctx.strokeStyle = color; ctx.lineWidth = 1.6;
+    ctx.beginPath();
+    data.forEach((v, i) => {
+      const px = x + (i / (data.length - 1)) * w;
+      const py = y + h - 3 - (v / max) * (h - 7);
+      if (i === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py);
+    });
+    ctx.stroke();
+    ctx.font = '9px monospace'; ctx.fillStyle = color;
+    ctx.fillText(label, x + 3, y + 11);
+    ctx.fillText(max.toFixed(1), x + 3, y + h - 3);
+  }
+
+  _caption(ctx, text, W, H) {
+    ctx.save();
+    ctx.font = 'italic 12px sans-serif';
+    ctx.fillStyle = 'rgba(185,210,255,0.35)';
+    ctx.textAlign = 'right';
+    text.split('\n').forEach((line, i) => ctx.fillText(line, W - 16, H * 0.90 + i * 18));
+    ctx.textAlign = 'left';
+    ctx.restore();
+  }
+
+  /* ── Info ──────────────────────────────────────────────────── */
+
+  info() {
+    const S = NewtonSim.SCALE;
+    const base = { law: this.law, scene: this.scene };
+
+    if (this.law === 1 && this.scene === 'A') {
+      const b   = this._1A;
+      const spd = Math.hypot(b.bvx, b.bvy) / S;
+      const fFr = this.mu * this.mass1 * NewtonSim.G;
+      return { ...base, v: spd.toFixed(2), fFr: fFr.toFixed(2), mu: this.mu.toFixed(2), m: this.mass1 };
+    }
+    if (this.law === 1) {
+      const s  = this._1B;
+      const spd = Math.hypot(s.bvx, s.bvy) / S;
+      return { ...base, v: spd.toFixed(2), cut: s.cut };
+    }
+    if (this.law === 2) {
+      const a = this.force / this.mass1;
+      const v = this._2.b1vx / S;
+      return { ...base, F: this.force, m: this.mass1, a: a.toFixed(2), v: v.toFixed(2) };
+    }
+    if (this.scene === 'A') {
+      const vBall   = this._3A.ball ? (this._3A.ball.vx / S).toFixed(1) : '—';
+      const vCannon = (this._3A.cvx / S).toFixed(2);
+      return { ...base, vBall, vCannon, m1: this.mass1, m2: this.mass2 };
+    }
+    if (this.scene === 'B') {
+      const { b1, b2 } = this._3B;
+      return { ...base,
+        p1: (b1.mass * b1.vx / S).toFixed(2),
+        p2: (b2.mass * b2.vx / S).toFixed(2),
+        pt: ((b1.mass * b1.vx + b2.mass * b2.vx) / S).toFixed(2),
+      };
+    }
+    /* III-C rocket */
+    const s = this._3C;
+    const g_vis = NewtonSim.G * 0.42;
+    const a_net = s.running ? (220 / s.rmass - g_vis) : (s.stopped ? 0 : -g_vis);
+    return { ...base,
+      a:    a_net.toFixed(1),
+      v:    Math.abs(s.rvy / S).toFixed(2),
+      fuel: (s.fuel * 100).toFixed(0),
+      m:    s.rmass.toFixed(1),
+    };
+  }
+}
+
+/* ── Утилиты ─────────────────────────────────────────────────── */
+
+function _nwt_rrect(ctx, x, y, w, h, r) {
+  if (w <= 0 || h <= 0) return;
+  r = Math.min(r, w / 2, h / 2);
+  ctx.beginPath();
+  ctx.moveTo(x + r, y);
+  ctx.arcTo(x + w, y,     x + w, y + h, r);
+  ctx.arcTo(x + w, y + h, x,     y + h, r);
+  ctx.arcTo(x,     y + h, x,     y,     r);
+  ctx.arcTo(x,     y,     x + w, y,     r);
+  ctx.closePath();
+}
+
+function _nwt_lighten(hex, d) {
+  const n = parseInt(hex.slice(1), 16);
+  const c = v => Math.max(0, Math.min(255, v));
+  return `rgb(${c((n >> 16) + d)},${c(((n >> 8) & 255) + d)},${c((n & 255) + d)})`;
+}
diff --git a/frontend/js/labs/normaldist.js b/frontend/js/labs/normaldist.js
new file mode 100644
index 0000000..e75bff6
--- /dev/null
+++ b/frontend/js/labs/normaldist.js
@@ -0,0 +1,393 @@
+'use strict';
+/**
+ * NormalDistSim v2 — интерактивное нормальное распределение
+ * μ, σ · правило 68-95-99.7 · Z-score · закрашивание области
+ * Чистый рерайт: без SVG-строк в info(), лучшая визуализация.
+ */
+class NormalDistSim {
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.ctx    = canvas.getContext('2d');
+    this.W = 0; this.H = 0;
+
+    this.mu    = 0;
+    this.sigma = 1;
+    this.shade = '1s';   // 'none' | '1s' | '2s' | '3s' | 'custom'
+    this.zLow  = -1;
+    this.zHigh =  1;
+    this.hx    = null;
+
+    this.onUpdate = null;
+    this._bind();
+    new ResizeObserver(() => { this.fit(); this.draw(); }).observe(canvas.parentElement);
+  }
+
+  // ── public API ────────────────────────────────────────────────
+
+  fit() {
+    const dpr = window.devicePixelRatio || 1;
+    const w = this.canvas.offsetWidth  || 600;
+    const h = this.canvas.offsetHeight || 400;
+    this.canvas.width  = w * dpr;
+    this.canvas.height = h * dpr;
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this.W = w; this.H = h;
+  }
+
+  setParams({ mu, sigma, shade, zLow, zHigh } = {}) {
+    if (mu    !== undefined) this.mu    = +mu;
+    if (sigma !== undefined) this.sigma = Math.max(0.1, +sigma);
+    if (shade !== undefined) this.shade = shade;
+    if (zLow  !== undefined) this.zLow  = +zLow;
+    if (zHigh !== undefined) this.zHigh = +zHigh;
+    this.draw(); this._emit();
+  }
+
+  info() {
+    const { mu, sigma, shade } = this;
+    let areaLabel = '\u2014', areaPct = 0;
+    if      (shade === '1s')     { areaPct = 68.27; areaLabel = '\u03bc \u00b1 1\u03c3  \u2192  68.27%'; }
+    else if (shade === '2s')     { areaPct = 95.45; areaLabel = '\u03bc \u00b1 2\u03c3  \u2192  95.45%'; }
+    else if (shade === '3s')     { areaPct = 99.73; areaLabel = '\u03bc \u00b1 3\u03c3  \u2192  99.73%'; }
+    else if (shade === 'custom') {
+      areaPct = (this._phi(this.zHigh) - this._phi(this.zLow)) * 100;
+      areaLabel = `Z \u2208 [${this.zLow.toFixed(1)}, ${this.zHigh.toFixed(1)}]  \u2192  ${areaPct.toFixed(2)}%`;
+    }
+    return {
+      mu:       mu.toFixed(1),
+      sigma:    sigma.toFixed(2),
+      peak:     (1 / (sigma * Math.sqrt(2 * Math.PI))).toFixed(4),
+      area:     areaLabel,
+      areaPct:  areaPct.toFixed(2),
+    };
+  }
+
+  // ── math ─────────────────────────────────────────────────────
+
+  _pdf(x) {
+    const z = (x - this.mu) / this.sigma;
+    return Math.exp(-0.5 * z * z) / (this.sigma * Math.sqrt(2 * Math.PI));
+  }
+
+  _phi(z) {
+    const a1=0.254829592, a2=-0.284496736, a3=1.421413741, a4=-1.453152027, a5=1.061405429, p=0.3275911;
+    const sign = z < 0 ? -1 : 1;
+    const t = 1 / (1 + p * Math.abs(z) / Math.SQRT2);
+    const y = 1 - (((((a5*t + a4)*t) + a3)*t + a2)*t + a1)*t * Math.exp(-z*z/2);
+    return 0.5 * (1 + sign * y);
+  }
+
+  _emit() { if (this.onUpdate) this.onUpdate(this.info()); }
+
+  // ── coordinate transforms ─────────────────────────────────────
+
+  _pad()  { return { PL: 52, PR: 22, PT: 38, PB: 50 }; }
+
+  _xToP(x, xMin, xMax, PL, pw) { return PL + (x - xMin) / (xMax - xMin) * pw; }
+  _yToP(y, yMax, PT, ph)       { return PT + ph - (y / yMax) * ph; }
+  _pToX(px, xMin, xMax, PL, pw){ return xMin + (px - PL) / pw * (xMax - xMin); }
+
+  // ── draw ─────────────────────────────────────────────────────
+
+  draw() {
+    const { ctx, W, H, mu, sigma } = this;
+    if (!W || !H) return;
+    const { PL, PR, PT, PB } = this._pad();
+    const pw = W - PL - PR, ph = H - PT - PB;
+    const xMin = mu - 4.5 * sigma, xMax = mu + 4.5 * sigma;
+    const yMax = this._pdf(mu) * 1.18;
+
+    ctx.fillStyle = '#0D0D1A'; ctx.fillRect(0, 0, W, H);
+
+    this._drawGrid   (PL, PT, pw, ph, xMin, xMax, yMax);
+    this._drawShade  (PL, PT, pw, ph, xMin, xMax, yMax);
+    this._drawCurve  (PL, PT, pw, ph, xMin, xMax, yMax);
+    this._drawLabels (PL, PT, pw, ph, xMin, xMax, yMax);
+    this._drawBadge  (PL, PT, pw, ph);
+    if (this.hx !== null) this._drawHover(PL, PT, pw, ph, xMin, xMax, yMax);
+  }
+
+  _drawGrid(PL, PT, pw, ph, xMin, xMax, yMax) {
+    const { ctx, mu, sigma } = this;
+    const bottom = PT + ph;
+    const FN = 'Manrope, sans-serif';
+
+    // Horizontal grid
+    ctx.strokeStyle = 'rgba(255,255,255,0.05)'; ctx.lineWidth = 1;
+    for (let i = 1; i <= 4; i++) {
+      const py = PT + ph * (1 - i / 4);
+      ctx.beginPath(); ctx.moveTo(PL, py); ctx.lineTo(PL + pw, py); ctx.stroke();
+    }
+
+    // Vertical sigma grid lines
+    for (let s = -4; s <= 4; s++) {
+      const x = mu + s * sigma;
+      if (x < xMin || x > xMax) continue;
+      const px = this._xToP(x, xMin, xMax, PL, pw);
+      ctx.strokeStyle = s === 0
+        ? 'rgba(6,214,224,0.22)'
+        : `rgba(255,255,255,${0.04 + (Math.abs(s) <= 2 ? 0.03 : 0)})`;
+      ctx.lineWidth = 1;
+      ctx.beginPath(); ctx.moveTo(px, PT); ctx.lineTo(px, bottom); ctx.stroke();
+    }
+
+    // Axes
+    ctx.strokeStyle = 'rgba(255,255,255,0.3)'; ctx.lineWidth = 1.5;
+    ctx.beginPath(); ctx.moveTo(PL, bottom); ctx.lineTo(PL + pw, bottom); ctx.stroke();
+    ctx.beginPath(); ctx.moveTo(PL, PT);     ctx.lineTo(PL, bottom);      ctx.stroke();
+
+    // X-axis labels (sigma notation)
+    ctx.font = `11px ${FN}`; ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+    ctx.fillStyle = 'rgba(255,255,255,0.3)';
+    for (let s = -4; s <= 4; s++) {
+      const x = mu + s * sigma;
+      if (x < xMin || x > xMax) continue;
+      const px = this._xToP(x, xMin, xMax, PL, pw);
+      const lbl = s === 0 ? '\u03bc' : (s > 0 ? `+${s}\u03c3` : `${s}\u03c3`);
+      ctx.fillText(lbl, px, bottom + 6);
+    }
+
+    // Actual x values below
+    ctx.font = `9px ${FN}`; ctx.fillStyle = 'rgba(255,255,255,0.18)';
+    for (let s = -3; s <= 3; s++) {
+      const x = mu + s * sigma;
+      if (x < xMin || x > xMax) continue;
+      const px = this._xToP(x, xMin, xMax, PL, pw);
+      const dec = sigma < 1 ? 1 : 0;
+      ctx.fillText(x.toFixed(dec), px, bottom + 20);
+    }
+
+    // Y-axis labels
+    ctx.textAlign = 'right'; ctx.textBaseline = 'middle'; ctx.fillStyle = 'rgba(255,255,255,0.25)';
+    ctx.font = `10px ${FN}`;
+    for (let i = 0; i <= 4; i++) {
+      const v = (yMax / 4) * i;
+      const py = PT + ph - (v / yMax) * ph;
+      ctx.fillText(v.toFixed(2), PL - 6, py);
+    }
+
+    // Axis names
+    ctx.fillStyle = 'rgba(255,255,255,0.2)'; ctx.font = `10px ${FN}`;
+    ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+    ctx.fillText('x', PL + pw / 2, PT + ph + 36);
+    ctx.textAlign = 'left'; ctx.textBaseline = 'top';
+    ctx.fillText('f(x)', PL + 6, PT);
+  }
+
+  _drawShade(PL, PT, pw, ph, xMin, xMax, yMax) {
+    const { ctx, mu, sigma, shade } = this;
+    let lo, hi;
+    if      (shade === '1s')     { lo = mu - sigma;             hi = mu + sigma; }
+    else if (shade === '2s')     { lo = mu - 2 * sigma;         hi = mu + 2 * sigma; }
+    else if (shade === '3s')     { lo = mu - 3 * sigma;         hi = mu + 3 * sigma; }
+    else if (shade === 'custom') { lo = mu + this.zLow * sigma; hi = mu + this.zHigh * sigma; }
+    else return;
+
+    const bottom = PT + ph;
+    const steps = 240;
+    const dx = (hi - lo) / steps;
+    const xp = x => this._xToP(x, xMin, xMax, PL, pw);
+    const yp = y => this._yToP(y, yMax, PT, ph);
+
+    // Filled area with gradient
+    const grd = ctx.createLinearGradient(xp(lo), 0, xp(hi), 0);
+    grd.addColorStop(0,   'rgba(155,93,229,0.10)');
+    grd.addColorStop(0.5, 'rgba(155,93,229,0.30)');
+    grd.addColorStop(1,   'rgba(155,93,229,0.10)');
+    ctx.fillStyle = grd;
+    ctx.beginPath();
+    ctx.moveTo(xp(lo), bottom);
+    for (let i = 0; i <= steps; i++) {
+      const x = lo + i * dx;
+      ctx.lineTo(xp(x), yp(this._pdf(x)));
+    }
+    ctx.lineTo(xp(hi), bottom);
+    ctx.closePath(); ctx.fill();
+
+    // Border dashes
+    ctx.strokeStyle = 'rgba(155,93,229,0.55)'; ctx.lineWidth = 1; ctx.setLineDash([4, 4]);
+    for (const bx of [lo, hi]) {
+      const px = xp(bx);
+      ctx.beginPath(); ctx.moveTo(px, PT); ctx.lineTo(px, bottom); ctx.stroke();
+    }
+    ctx.setLineDash([]);
+  }
+
+  _drawCurve(PL, PT, pw, ph, xMin, xMax, yMax) {
+    const { ctx } = this;
+    const steps = Math.min(pw * 2, 500);
+    const dx = (xMax - xMin) / steps;
+    const xp = x => this._xToP(x, xMin, xMax, PL, pw);
+    const yp = y => this._yToP(y, yMax, PT, ph);
+
+    // Glow layer
+    ctx.strokeStyle = 'rgba(155,93,229,0.1)'; ctx.lineWidth = 10; ctx.lineJoin = 'round';
+    ctx.beginPath();
+    for (let i = 0; i <= steps; i++) {
+      const x = xMin + i * dx;
+      i === 0 ? ctx.moveTo(xp(x), yp(this._pdf(x))) : ctx.lineTo(xp(x), yp(this._pdf(x)));
+    }
+    ctx.stroke();
+
+    // Main curve
+    ctx.strokeStyle = '#9B5DE5'; ctx.lineWidth = 2.5; ctx.lineJoin = 'round';
+    ctx.beginPath();
+    for (let i = 0; i <= steps; i++) {
+      const x = xMin + i * dx;
+      i === 0 ? ctx.moveTo(xp(x), yp(this._pdf(x))) : ctx.lineTo(xp(x), yp(this._pdf(x)));
+    }
+    ctx.stroke();
+
+    // μ marker
+    const muPx = xp(this.mu);
+    const bottom = PT + ph;
+    ctx.strokeStyle = '#06D6E0'; ctx.lineWidth = 1.5; ctx.setLineDash([6, 4]);
+    ctx.beginPath(); ctx.moveTo(muPx, PT); ctx.lineTo(muPx, bottom); ctx.stroke();
+    ctx.setLineDash([]);
+
+    ctx.fillStyle = '#06D6E0';
+    ctx.font = 'bold 11px Manrope, sans-serif';
+    ctx.textAlign = 'center'; ctx.textBaseline = 'bottom';
+    ctx.fillText(`\u03bc = ${this.mu.toFixed(1)}`, muPx, PT - 4);
+
+    // Peak label
+    const peakPx = xp(this.mu);
+    const peakPy = yp(this._pdf(this.mu));
+    ctx.fillStyle = 'rgba(155,93,229,0.5)';
+    ctx.font = '9px Manrope, sans-serif';
+    ctx.textAlign = 'left'; ctx.textBaseline = 'bottom';
+    const peakVal = (1 / (this.sigma * Math.sqrt(2 * Math.PI))).toFixed(3);
+    ctx.fillText('f(μ) = ' + peakVal, peakPx + 6, peakPy - 2);
+  }
+
+  _drawLabels(PL, PT, pw, ph, xMin, xMax, yMax) {
+    // sigma annotation brackets
+    const { ctx, mu, sigma, shade } = this;
+    if (shade === 'none') return;
+    const nSig = shade === '1s' ? 1 : shade === '2s' ? 2 : shade === '3s' ? 3 : null;
+    if (!nSig) return;
+
+    const bottom = PT + ph;
+    const FN = 'Manrope, sans-serif';
+    const xp = x => this._xToP(x, xMin, xMax, PL, pw);
+    const yp = y => this._yToP(y, yMax, PT, ph);
+
+    // Annotate ±nσ points with small bracket
+    const lo = mu - nSig * sigma, hi = mu + nSig * sigma;
+    const loPx = xp(lo), hiPx = xp(hi);
+    const midY = bottom + 32;
+
+    ctx.save();
+    ctx.strokeStyle = 'rgba(155,93,229,0.38)'; ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(loPx, bottom + 4); ctx.lineTo(loPx, midY);
+    ctx.lineTo(hiPx, midY);       ctx.lineTo(hiPx, bottom + 4);
+    ctx.stroke();
+
+    ctx.fillStyle = 'rgba(155,93,229,0.55)';
+    ctx.font = `10px ${FN}`; ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+    ctx.fillText('\u00b1' + nSig + '\u03c3', (loPx + hiPx) / 2, midY + 2);
+    ctx.restore();
+  }
+
+  _drawBadge(PL, PT, pw, ph) {
+    const { ctx, shade } = this;
+    if (shade === 'none') return;
+    const info = this.info();
+    const pct = parseFloat(info.areaPct);
+    if (!pct) return;
+
+    const FN = 'Manrope, sans-serif';
+    ctx.save();
+    ctx.font = `bold 15px ${FN}`;
+    const text = pct.toFixed(2) + '%';
+    const tw = ctx.measureText(text).width;
+    const bw = tw + 24, bh = 28;
+    const bx = PL + pw - bw - 4, by = PT + 4;
+
+    ctx.fillStyle = 'rgba(155,93,229,0.16)';
+    ctx.beginPath(); ctx.roundRect(bx, by, bw, bh, 6); ctx.fill();
+    ctx.strokeStyle = 'rgba(155,93,229,0.38)'; ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.roundRect(bx, by, bw, bh, 6); ctx.stroke();
+    ctx.fillStyle = '#9B5DE5'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+    ctx.fillText(text, bx + bw / 2, by + bh / 2);
+
+    const shadeNames = { '1s': '\u03bc \u00b1 1\u03c3', '2s': '\u03bc \u00b1 2\u03c3', '3s': '\u03bc \u00b1 3\u03c3', custom: 'произвольный Z' };
+    ctx.font = `9px ${FN}`; ctx.fillStyle = 'rgba(155,93,229,0.55)';
+    ctx.fillText(shadeNames[shade] || '', bx + bw / 2, by + bh + 10);
+    ctx.restore();
+  }
+
+  _drawHover(PL, PT, pw, ph, xMin, xMax, yMax) {
+    const { ctx, W } = this;
+    const x = this.hx;
+    if (x < xMin || x > xMax) return;
+    const px = this._xToP(x, xMin, xMax, PL, pw);
+    const y  = this._pdf(x);
+    const py = this._yToP(y, yMax, PT, ph);
+    const bottom = PT + ph;
+    const FN = 'Manrope, sans-serif';
+
+    // Vertical crosshair
+    ctx.strokeStyle = 'rgba(255,255,255,0.12)'; ctx.lineWidth = 1; ctx.setLineDash([5, 5]);
+    ctx.beginPath(); ctx.moveTo(px, PT); ctx.lineTo(px, bottom); ctx.stroke();
+    ctx.setLineDash([]);
+
+    // Point on curve
+    ctx.fillStyle = '#FFD166'; ctx.shadowColor = '#FFD166'; ctx.shadowBlur = 8;
+    ctx.beginPath(); ctx.arc(px, py, 5, 0, Math.PI * 2); ctx.fill();
+    ctx.shadowBlur = 0;
+    ctx.strokeStyle = 'rgba(255,255,255,0.6)'; ctx.lineWidth = 1.5;
+    ctx.beginPath(); ctx.arc(px, py, 5, 0, Math.PI * 2); ctx.stroke();
+
+    // Tooltip
+    const z = (x - this.mu) / this.sigma;
+    const rows = [
+      ['x',    x.toFixed(3)],
+      ['z',    z.toFixed(3)],
+      ['f(x)', y.toFixed(5)],
+      ['\u03a6(z)', (this._phi(z) * 100).toFixed(2) + '%'],
+    ];
+    ctx.font = `11px ${FN}`;
+    const maxKW = Math.max(...rows.map(([k]) => ctx.measureText(k).width));
+    const maxVW = Math.max(...rows.map(([, v]) => ctx.measureText(v).width));
+    const tw = maxKW + maxVW + 26, th = rows.length * 18 + 14;
+    let tx = px + 14, ty = py - th / 2;
+    if (tx + tw > W - 8)   tx = px - tw - 14;
+    if (ty < PT + 4)       ty = PT + 4;
+    if (ty + th > bottom)  ty = bottom - th;
+
+    ctx.fillStyle = 'rgba(10,10,28,0.95)';
+    ctx.beginPath(); ctx.roundRect(tx, ty, tw, th, 8); ctx.fill();
+    ctx.strokeStyle = 'rgba(255,255,255,0.08)'; ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.roundRect(tx, ty, tw, th, 8); ctx.stroke();
+
+    ctx.textBaseline = 'middle';
+    rows.forEach(([k, v], i) => {
+      const ry = ty + 7 + i * 18 + 9;
+      ctx.fillStyle = 'rgba(255,255,255,0.38)'; ctx.textAlign = 'left';  ctx.fillText(k, tx + 10, ry);
+      ctx.fillStyle = '#FFD166';               ctx.textAlign = 'right'; ctx.fillText(v, tx + tw - 10, ry);
+    });
+  }
+
+  // ── events ────────────────────────────────────────────────────
+
+  _bind() {
+    const cv = this.canvas;
+    const getHx = e => {
+      const r = cv.getBoundingClientRect();
+      const { PL, PR } = this._pad();
+      const pw = this.W - PL - PR;
+      const xMin = this.mu - 4.5 * this.sigma;
+      const xMax = this.mu + 4.5 * this.sigma;
+      return this._pToX(e.clientX - r.left, xMin, xMax, PL, pw);
+    };
+    cv.addEventListener('mousemove', e => { this.hx = getHx(e); this.draw(); });
+    cv.addEventListener('mouseleave', () => { this.hx = null; this.draw(); });
+    cv.addEventListener('touchmove', e => {
+      e.preventDefault();
+      if (e.touches.length === 1) { this.hx = getHx(e.touches[0]); this.draw(); }
+    }, { passive: false });
+    cv.addEventListener('touchend', () => { this.hx = null; this.draw(); });
+  }
+}
diff --git a/frontend/js/labs/orbitals.js b/frontend/js/labs/orbitals.js
new file mode 100644
index 0000000..1d7d2ab
--- /dev/null
+++ b/frontend/js/labs/orbitals.js
@@ -0,0 +1,342 @@
+'use strict';
+
+/* ═══════════════════════════════════════════════
+   OrbitalsSim — 3D molecular orbitals (Three.js)
+   s, p, d orbitals + H₂ / H₂O molecular bonding
+   ═══════════════════════════════════════════════ */
+
+class OrbitalsSim {
+  constructor(container) {
+    this.container = container;
+    this._running = false;
+
+    /* Three.js */
+    this.scene    = new THREE.Scene();
+    this.camera   = new THREE.PerspectiveCamera(50, 1, 0.1, 200);
+    this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+    this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+    this.renderer.setClearColor(0x0D0D1A, 1);
+    container.appendChild(this.renderer.domElement);
+
+    /* lighting */
+    this.scene.add(new THREE.AmbientLight(0xffffff, 0.45));
+    const dir = new THREE.DirectionalLight(0xffffff, 0.7);
+    dir.position.set(5, 8, 6);
+    this.scene.add(dir);
+    const pt = new THREE.PointLight(0x9B5DE5, 0.3, 50);
+    pt.position.set(-4, 3, 5);
+    this.scene.add(pt);
+
+    this.camera.position.set(6, 4, 6);
+    this.camera.lookAt(0, 0, 0);
+
+    /* orbit controls (manual) */
+    this._drag  = false;
+    this._prevX = 0;
+    this._prevY = 0;
+    this._rotY  = 0.6;
+    this._rotX  = 0.3;
+    this._dist  = 8;
+    this._autoSpin = true;
+
+    const el = this.renderer.domElement;
+    el.style.cursor = 'grab';
+    el.addEventListener('pointerdown', e => { this._drag = true; this._prevX = e.clientX; this._prevY = e.clientY; this._autoSpin = false; el.style.cursor = 'grabbing'; });
+    window.addEventListener('pointerup', () => { this._drag = false; el.style.cursor = 'grab'; });
+    window.addEventListener('pointermove', e => {
+      if (!this._drag) return;
+      this._rotY += (e.clientX - this._prevX) * 0.008;
+      this._rotX += (e.clientY - this._prevY) * 0.008;
+      this._rotX = Math.max(-1.4, Math.min(1.4, this._rotX));
+      this._prevX = e.clientX; this._prevY = e.clientY;
+    });
+    el.addEventListener('wheel', e => {
+      e.preventDefault();
+      this._dist = Math.max(3, Math.min(20, this._dist + e.deltaY * 0.02));
+    }, { passive: false });
+
+    /* touch */
+    el.addEventListener('touchstart', e => {
+      if (e.touches.length === 1) {
+        this._drag = true; this._prevX = e.touches[0].clientX; this._prevY = e.touches[0].clientY; this._autoSpin = false;
+      }
+    }, { passive: true });
+    el.addEventListener('touchmove', e => {
+      if (!this._drag || e.touches.length !== 1) return;
+      const t = e.touches[0];
+      this._rotY += (t.clientX - this._prevX) * 0.008;
+      this._rotX += (t.clientY - this._prevY) * 0.008;
+      this._rotX = Math.max(-1.4, Math.min(1.4, this._rotX));
+      this._prevX = t.clientX; this._prevY = t.clientY;
+    }, { passive: true });
+    el.addEventListener('touchend', () => { this._drag = false; });
+
+    /* resize */
+    this._ro = new ResizeObserver(() => this.fit());
+    this._ro.observe(container);
+
+    /* state */
+    this._mode = 's';
+    this._group = new THREE.Group();
+    this.scene.add(this._group);
+
+    this._buildOrbital('s');
+    this.fit();
+    this.play();
+  }
+
+  /* ── public ── */
+  setMode(mode) {
+    this._mode = mode;
+    this._buildOrbital(mode);
+  }
+
+  fit() {
+    const w = this.container.clientWidth  || 600;
+    const h = this.container.clientHeight || 400;
+    this.camera.aspect = w / h;
+    this.camera.updateProjectionMatrix();
+    this.renderer.setSize(w, h);
+  }
+
+  play()  { if (!this._running) { this._running = true; this._loop(); } }
+  stop()  { this._running = false; }
+  pause() { this._running = false; }
+
+  /* ── clear scene group ── */
+  _clear() {
+    while (this._group.children.length) {
+      const c = this._group.children[0];
+      if (c.geometry) c.geometry.dispose();
+      if (c.material) {
+        if (Array.isArray(c.material)) c.material.forEach(m => m.dispose());
+        else c.material.dispose();
+      }
+      this._group.remove(c);
+    }
+  }
+
+  /* ── orbital builders ── */
+  _buildOrbital(mode) {
+    this._clear();
+    const b = {
+      s:    () => this._buildS(),
+      p:    () => this._buildP(),
+      d:    () => this._buildD(),
+      h2:   () => this._buildH2(),
+      h2o:  () => this._buildH2O(),
+    };
+    (b[mode] || b.s)();
+  }
+
+  /* nucleus dot */
+  _nucleus(pos, color = 0xffffff) {
+    const geo = new THREE.SphereGeometry(0.12, 16, 16);
+    const mat = new THREE.MeshStandardMaterial({ color, emissive: color, emissiveIntensity: 0.5 });
+    const m = new THREE.Mesh(geo, mat);
+    m.position.copy(pos);
+    this._group.add(m);
+    return m;
+  }
+
+  /* cloud lobe (ellipsoid) */
+  _lobe(pos, scale, color, opacity = 0.3) {
+    const geo = new THREE.SphereGeometry(1, 32, 32);
+    const mat = new THREE.MeshPhysicalMaterial({
+      color, transparent: true, opacity,
+      metalness: 0, roughness: 0.6,
+      clearcoat: 0.3, side: THREE.DoubleSide,
+      depthWrite: false,
+    });
+    const mesh = new THREE.Mesh(geo, mat);
+    mesh.position.copy(pos);
+    mesh.scale.set(scale.x, scale.y, scale.z);
+    this._group.add(mesh);
+    return mesh;
+  }
+
+  /* particle cloud (points) */
+  _cloud(center, radius, count, color) {
+    const positions = new Float32Array(count * 3);
+    for (let i = 0; i < count; i++) {
+      // gaussian distribution
+      const r = radius * Math.pow(Math.random(), 0.33);
+      const theta = Math.random() * Math.PI * 2;
+      const phi = Math.acos(2 * Math.random() - 1);
+      positions[i * 3]     = center.x + r * Math.sin(phi) * Math.cos(theta);
+      positions[i * 3 + 1] = center.y + r * Math.sin(phi) * Math.sin(theta);
+      positions[i * 3 + 2] = center.z + r * Math.cos(phi);
+    }
+    const geo = new THREE.BufferGeometry();
+    geo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+    const mat = new THREE.PointsMaterial({ color, size: 0.04, transparent: true, opacity: 0.6, depthWrite: false });
+    const pts = new THREE.Points(geo, mat);
+    this._group.add(pts);
+    return pts;
+  }
+
+  /* ── s orbital: spherical ── */
+  _buildS() {
+    this._nucleus(new THREE.Vector3(0, 0, 0));
+    this._lobe(new THREE.Vector3(0, 0, 0), new THREE.Vector3(1.5, 1.5, 1.5), 0x9B5DE5, 0.18);
+    this._cloud(new THREE.Vector3(0, 0, 0), 1.5, 2000, 0x9B5DE5);
+  }
+
+  /* ── p orbitals: 3 dumbbell shapes ── */
+  _buildP() {
+    this._nucleus(new THREE.Vector3(0, 0, 0));
+
+    // px (red)
+    this._lobe(new THREE.Vector3(1.2, 0, 0),  new THREE.Vector3(0.7, 0.5, 0.5), 0xF15BB5, 0.25);
+    this._lobe(new THREE.Vector3(-1.2, 0, 0), new THREE.Vector3(0.7, 0.5, 0.5), 0xF15BB5, 0.25);
+
+    // py (green)
+    this._lobe(new THREE.Vector3(0, 1.2, 0),  new THREE.Vector3(0.5, 0.7, 0.5), 0x34d399, 0.25);
+    this._lobe(new THREE.Vector3(0, -1.2, 0), new THREE.Vector3(0.5, 0.7, 0.5), 0x34d399, 0.25);
+
+    // pz (blue)
+    this._lobe(new THREE.Vector3(0, 0, 1.2),  new THREE.Vector3(0.5, 0.5, 0.7), 0x60a5fa, 0.25);
+    this._lobe(new THREE.Vector3(0, 0, -1.2), new THREE.Vector3(0.5, 0.5, 0.7), 0x60a5fa, 0.25);
+
+    // axis labels
+    this._addLabel('px', 2, 0, 0, 0xF15BB5);
+    this._addLabel('py', 0, 2, 0, 0x34d399);
+    this._addLabel('pz', 0, 0, 2, 0x60a5fa);
+  }
+
+  /* ── d orbital: dxy cloverleaf ── */
+  _buildD() {
+    this._nucleus(new THREE.Vector3(0, 0, 0));
+
+    // four lobes in xy plane
+    const r = 1.1, s = 0.45;
+    const angles = [Math.PI / 4, 3 * Math.PI / 4, 5 * Math.PI / 4, 7 * Math.PI / 4];
+    const colors = [0xF59E0B, 0x9B5DE5, 0xF59E0B, 0x9B5DE5]; // alternating sign
+
+    for (let i = 0; i < 4; i++) {
+      const x = r * Math.cos(angles[i]);
+      const y = r * Math.sin(angles[i]);
+      this._lobe(new THREE.Vector3(x, y, 0), new THREE.Vector3(s, s, s * 0.6), colors[i], 0.28);
+    }
+
+    // dz² torus + lobes
+    this._lobe(new THREE.Vector3(0, 0, 1.3),  new THREE.Vector3(0.35, 0.35, 0.6), 0x06D6E0, 0.2);
+    this._lobe(new THREE.Vector3(0, 0, -1.3), new THREE.Vector3(0.35, 0.35, 0.6), 0x06D6E0, 0.2);
+    // torus ring
+    const tGeo = new THREE.TorusGeometry(0.7, 0.18, 16, 32);
+    const tMat = new THREE.MeshPhysicalMaterial({ color: 0x06D6E0, transparent: true, opacity: 0.15, side: THREE.DoubleSide, depthWrite: false });
+    const torus = new THREE.Mesh(tGeo, tMat);
+    this._group.add(torus);
+
+    this._addLabel('d_{xy}', 1.8, 1.8, 0, 0xF59E0B);
+    this._addLabel('d_{z²}', 0, 0, 2.2, 0x06D6E0);
+  }
+
+  /* ── H₂ sigma bond ── */
+  _buildH2() {
+    const sep = 1.5;
+    this._nucleus(new THREE.Vector3(-sep / 2, 0, 0), 0xffffff);
+    this._nucleus(new THREE.Vector3(sep / 2, 0, 0), 0xffffff);
+
+    // individual 1s orbitals (faded)
+    this._lobe(new THREE.Vector3(-sep / 2, 0, 0), new THREE.Vector3(0.8, 0.8, 0.8), 0x9B5DE5, 0.1);
+    this._lobe(new THREE.Vector3(sep / 2, 0, 0),  new THREE.Vector3(0.8, 0.8, 0.8), 0x9B5DE5, 0.1);
+
+    // bonding σ (overlap region — elongated ellipsoid)
+    this._lobe(new THREE.Vector3(0, 0, 0), new THREE.Vector3(1.4, 0.6, 0.6), 0x06D6E0, 0.22);
+    this._cloud(new THREE.Vector3(0, 0, 0), 1.0, 3000, 0x06D6E0);
+
+    // bond line
+    const bGeo = new THREE.CylinderGeometry(0.03, 0.03, sep, 8);
+    const bMat = new THREE.MeshStandardMaterial({ color: 0xffffff, emissive: 0xffffff, emissiveIntensity: 0.3 });
+    const bond = new THREE.Mesh(bGeo, bMat);
+    bond.rotation.z = Math.PI / 2;
+    this._group.add(bond);
+
+    this._addLabel('H', -sep / 2 - 0.5, 0.6, 0, 0xffffff);
+    this._addLabel('H', sep / 2 + 0.3, 0.6, 0, 0xffffff);
+    this._addLabel('σ', 0, -0.9, 0, 0x06D6E0);
+  }
+
+  /* ── H₂O bent molecule ── */
+  _buildH2O() {
+    const angle = 104.5 * Math.PI / 180;
+    const bondLen = 1.6;
+
+    const oPos = new THREE.Vector3(0, 0, 0);
+    const h1 = new THREE.Vector3(-bondLen * Math.sin(angle / 2), -bondLen * Math.cos(angle / 2), 0);
+    const h2 = new THREE.Vector3(bondLen * Math.sin(angle / 2), -bondLen * Math.cos(angle / 2), 0);
+
+    // nuclei
+    const oNuc = this._nucleus(oPos, 0xF15BB5);
+    oNuc.scale.set(1.5, 1.5, 1.5);
+    this._nucleus(h1, 0xffffff);
+    this._nucleus(h2, 0xffffff);
+
+    // O lone pairs (above)
+    this._lobe(new THREE.Vector3(-0.5, 0.8, 0), new THREE.Vector3(0.4, 0.5, 0.35), 0xF59E0B, 0.2);
+    this._lobe(new THREE.Vector3(0.5, 0.8, 0),  new THREE.Vector3(0.4, 0.5, 0.35), 0xF59E0B, 0.2);
+
+    // O-H σ bonds (electron density)
+    const mid1 = new THREE.Vector3().addVectors(oPos, h1).multiplyScalar(0.5);
+    const mid2 = new THREE.Vector3().addVectors(oPos, h2).multiplyScalar(0.5);
+    this._lobe(mid1, new THREE.Vector3(0.4, 0.7, 0.35), 0x06D6E0, 0.2);
+    this._lobe(mid2, new THREE.Vector3(0.4, 0.7, 0.35), 0x06D6E0, 0.2);
+
+    // bond lines
+    for (const hPos of [h1, h2]) {
+      const d = new THREE.Vector3().subVectors(hPos, oPos);
+      const len = d.length();
+      const bGeo = new THREE.CylinderGeometry(0.04, 0.04, len, 8);
+      const bMat = new THREE.MeshStandardMaterial({ color: 0xaaaaaa });
+      const bond = new THREE.Mesh(bGeo, bMat);
+      bond.position.copy(oPos).add(d.clone().multiplyScalar(0.5));
+      bond.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), d.normalize());
+      this._group.add(bond);
+    }
+
+    // electron cloud
+    this._cloud(oPos, 1.2, 1500, 0xF15BB5);
+
+    this._addLabel('O', 0.3, 0.3, 0, 0xF15BB5);
+    this._addLabel('H', h1.x - 0.4, h1.y - 0.3, 0, 0xffffff);
+    this._addLabel('H', h2.x + 0.2, h2.y - 0.3, 0, 0xffffff);
+    this._addLabel('104.5°', 0, -0.5, 0, 0x888888);
+  }
+
+  /* ── text label (using sprite) ── */
+  _addLabel(text, x, y, z, color) {
+    const canvas = document.createElement('canvas');
+    canvas.width = 128; canvas.height = 48;
+    const ctx = canvas.getContext('2d');
+    ctx.font = 'bold 28px Manrope, sans-serif';
+    ctx.fillStyle = '#' + color.toString(16).padStart(6, '0');
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(text, 64, 24);
+
+    const tex = new THREE.CanvasTexture(canvas);
+    const mat = new THREE.SpriteMaterial({ map: tex, transparent: true, depthWrite: false });
+    const sprite = new THREE.Sprite(mat);
+    sprite.position.set(x, y, z);
+    sprite.scale.set(1, 0.4, 1);
+    this._group.add(sprite);
+  }
+
+  /* ── animation ── */
+  _loop() {
+    if (!this._running) return;
+    requestAnimationFrame(() => this._loop());
+
+    if (this._autoSpin) this._rotY += 0.004;
+
+    this.camera.position.set(
+      this._dist * Math.sin(this._rotY) * Math.cos(this._rotX),
+      this._dist * Math.sin(this._rotX),
+      this._dist * Math.cos(this._rotY) * Math.cos(this._rotX)
+    );
+    this.camera.lookAt(0, 0, 0);
+
+    this.renderer.render(this.scene, this.camera);
+  }
+}
diff --git a/frontend/js/labs/pendulum.js b/frontend/js/labs/pendulum.js
new file mode 100644
index 0000000..a2a2976
--- /dev/null
+++ b/frontend/js/labs/pendulum.js
@@ -0,0 +1,401 @@
+'use strict';
+/* ══════════════════════════════════════════════════════════════
+   PendulumSim — simple pendulum simulation
+   θ'' = -(g/L)sin(θ) − γ·θ'
+   RK4 integration · energy bar · trail · phase portrait
+   ══════════════════════════════════════════════════════════════ */
+
+class PendulumSim {
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.ctx    = canvas.getContext('2d');
+    this.W = 0; this.H = 0;
+
+    /* physics */
+    this.L     = 200;   // px length
+    this.g     = 9.81;
+    this.theta = Math.PI / 4;  // angle (rad)
+    this.omega = 0;     // angular velocity
+    this.damping = 0;   // damping coefficient γ
+
+    /* animation */
+    this.playing = false;
+    this._raf    = null;
+    this._lastTs = null;
+    this.speed   = 1;
+
+    /* trail */
+    this._trail = []; // [{x, y, age}]
+    this._maxTrail = 200;
+
+    /* energy chart (bottom) */
+    this._eHistory = []; // [{t, ke, pe}]
+    this._tSim = 0;
+
+    this.onUpdate = null;
+
+    this._drag = null;
+    this._bindEvents();
+    new ResizeObserver(() => { this.fit(); this.draw(); }).observe(canvas.parentElement);
+  }
+
+  /* ── public API ─────────────────────────────── */
+
+  fit() {
+    const dpr = window.devicePixelRatio || 1;
+    const w = this.canvas.offsetWidth || 600;
+    const h = this.canvas.offsetHeight || 400;
+    this.canvas.width  = w * dpr;
+    this.canvas.height = h * dpr;
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this.W = w; this.H = h;
+  }
+
+  setParams({ L, g, theta, damping } = {}) {
+    if (L       !== undefined) this.L       = +L;
+    if (g       !== undefined) this.g       = +g;
+    if (theta   !== undefined) { this.theta = +theta * Math.PI / 180; this.omega = 0; this._clearTrail(); }
+    if (damping !== undefined) this.damping = +damping;
+    this.draw();
+    this._emit();
+  }
+
+  play() {
+    if (this.playing) return;
+    this.playing = true;
+    this._lastTs = null;
+    this._tick();
+  }
+
+  pause() {
+    this.playing = false;
+    if (this._raf) { cancelAnimationFrame(this._raf); this._raf = null; }
+  }
+
+  reset() {
+    this.pause();
+    this.theta = Math.PI / 4;
+    this.omega = 0;
+    this._tSim = 0;
+    this._clearTrail();
+    this._eHistory = [];
+    this.draw();
+    this._emit();
+  }
+
+  start() { this.play(); }
+  stop()  { this.pause(); }
+
+  info() {
+    const T    = 2 * Math.PI * Math.sqrt(this.L / (this.g * 100)); // L in px <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> approx
+    const KE   = 0.5 * this.omega * this.omega * this.L * this.L;
+    const PE   = this.g * 100 * this.L * (1 - Math.cos(this.theta));
+    const total = KE + PE;
+    return {
+      angle:  (this.theta * 180 / Math.PI).toFixed(1) + '°',
+      omega:  this.omega.toFixed(3) + ' рад/с',
+      period: T.toFixed(2) + ' с',
+      energy: total > 0 ? Math.round(KE / total * 100) + '% KE' : '—',
+    };
+  }
+
+  /* ── internals ─────────────────────────────── */
+
+  _emit() { if (this.onUpdate) this.onUpdate(this.info()); }
+
+  _clearTrail() { this._trail = []; }
+
+  _tick() {
+    if (!this.playing) return;
+    this._raf = requestAnimationFrame(ts => {
+      if (this._lastTs === null) this._lastTs = ts;
+      const rawDt = Math.min((ts - this._lastTs) / 1000, 0.05);
+      this._lastTs = ts;
+      const dt = rawDt * this.speed;
+
+      this._step(dt);
+      this._tSim += dt;
+
+      // trail
+      const { bx, by } = this._bobPos();
+      this._trail.push({ x: bx, y: by });
+      if (this._trail.length > this._maxTrail) this._trail.shift();
+
+      // energy history
+      const KE = 0.5 * this.omega * this.omega * this.L * this.L;
+      const PE = this.g * 100 * this.L * (1 - Math.cos(this.theta));
+      this._eHistory.push({ t: this._tSim, ke: KE, pe: PE });
+      if (this._eHistory.length > 300) this._eHistory.shift();
+
+      this.draw();
+      this._emit();
+      this._tick();
+    });
+  }
+
+  /* RK4 step for θ'' = -(g/L)sinθ - γ·ω */
+  _step(dt) {
+    const gL = this.g * 100 / this.L; // scale g for px units
+    const c  = this.damping;
+
+    const deriv = (th, om) => ({
+      dth: om,
+      dom: -gL * Math.sin(th) - c * om,
+    });
+
+    const k1 = deriv(this.theta, this.omega);
+    const k2 = deriv(this.theta + k1.dth * dt / 2, this.omega + k1.dom * dt / 2);
+    const k3 = deriv(this.theta + k2.dth * dt / 2, this.omega + k2.dom * dt / 2);
+    const k4 = deriv(this.theta + k3.dth * dt,     this.omega + k3.dom * dt);
+
+    this.theta += dt / 6 * (k1.dth + 2 * k2.dth + 2 * k3.dth + k4.dth);
+    this.omega += dt / 6 * (k1.dom + 2 * k2.dom + 2 * k3.dom + k4.dom);
+  }
+
+  _bobPos() {
+    const cx = this.W / 2;
+    const cy = Math.min(this.H * 0.18, 80);
+    return {
+      px: cx,
+      py: cy,
+      bx: cx + this.L * Math.sin(this.theta),
+      by: cy + this.L * Math.cos(this.theta),
+    };
+  }
+
+  /* ── draw ──────────────────────────────────── */
+
+  draw() {
+    const ctx = this.ctx, W = this.W, H = this.H;
+    if (!W || !H) return;
+
+    ctx.fillStyle = '#0D0D1A';
+    ctx.fillRect(0, 0, W, H);
+
+    const { px, py, bx, by } = this._bobPos();
+
+    // trail
+    this._drawTrail(ctx);
+
+    // support
+    ctx.fillStyle = 'rgba(255,255,255,0.25)';
+    ctx.fillRect(W / 2 - 30, py - 4, 60, 4);
+
+    // string
+    ctx.strokeStyle = 'rgba(255,255,255,0.6)';
+    ctx.lineWidth = 2;
+    ctx.beginPath(); ctx.moveTo(px, py); ctx.lineTo(bx, by); ctx.stroke();
+
+    // pivot
+    ctx.fillStyle = '#666';
+    ctx.beginPath(); ctx.arc(px, py, 5, 0, Math.PI * 2); ctx.fill();
+
+    // bob
+    const bobR = 18;
+    ctx.fillStyle = '#9B5DE5';
+    ctx.beginPath(); ctx.arc(bx, by, bobR, 0, Math.PI * 2); ctx.fill();
+    ctx.strokeStyle = 'rgba(255,255,255,0.5)'; ctx.lineWidth = 2; ctx.stroke();
+
+    // glow
+    const grad = ctx.createRadialGradient(bx, by, 0, bx, by, bobR * 2);
+    grad.addColorStop(0, 'rgba(155,93,229,0.25)');
+    grad.addColorStop(1, 'rgba(155,93,229,0)');
+    ctx.fillStyle = grad;
+    ctx.beginPath(); ctx.arc(bx, by, bobR * 2, 0, Math.PI * 2); ctx.fill();
+
+    // angle arc
+    if (Math.abs(this.theta) > 0.02) {
+      ctx.strokeStyle = 'rgba(6,214,224,0.5)';
+      ctx.lineWidth = 1.5;
+      const arcR = 40;
+      const startAngle = Math.PI / 2;
+      const endAngle   = Math.PI / 2 + this.theta;
+      ctx.beginPath();
+      ctx.arc(px, py, arcR, Math.min(startAngle, endAngle), Math.max(startAngle, endAngle));
+      ctx.stroke();
+
+      ctx.fillStyle = '#06D6E0';
+      ctx.font = '12px Manrope, sans-serif';
+      ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+      const labelAngle = startAngle + this.theta / 2;
+      ctx.fillText(
+        (this.theta * 180 / Math.PI).toFixed(1) + '°',
+        px + (arcR + 16) * Math.cos(labelAngle),
+        py + (arcR + 16) * Math.sin(labelAngle)
+      );
+    }
+
+    // energy bar
+    this._drawEnergyBar(ctx, W, H);
+
+    // energy chart
+    this._drawEnergyChart(ctx, W, H);
+  }
+
+  _drawTrail(ctx) {
+    const n = this._trail.length;
+    if (n < 2) return;
+    for (let i = 1; i < n; i++) {
+      const a = i / n * 0.6;
+      ctx.strokeStyle = `rgba(155,93,229,${a})`;
+      ctx.lineWidth = 1.5;
+      ctx.beginPath();
+      ctx.moveTo(this._trail[i - 1].x, this._trail[i - 1].y);
+      ctx.lineTo(this._trail[i].x, this._trail[i].y);
+      ctx.stroke();
+    }
+  }
+
+  _drawEnergyBar(ctx, W, H) {
+    const KE = 0.5 * this.omega * this.omega * this.L * this.L;
+    const PE = this.g * 100 * this.L * (1 - Math.cos(this.theta));
+    const total = KE + PE || 1;
+    const bw = 160, bh = 14;
+    const x = W - bw - 20, y = 20;
+
+    ctx.fillStyle = 'rgba(22,22,38,0.85)';
+    ctx.beginPath(); ctx.roundRect(x - 8, y - 6, bw + 16, bh + 32, 8); ctx.fill();
+
+    // KE bar
+    const kw = (KE / total) * bw;
+    ctx.fillStyle = '#EF476F';
+    ctx.beginPath(); ctx.roundRect(x, y, Math.max(2, kw), bh, 4); ctx.fill();
+
+    // PE bar
+    ctx.fillStyle = '#06D6E0';
+    ctx.beginPath(); ctx.roundRect(x + kw, y, Math.max(2, bw - kw), bh, 4); ctx.fill();
+
+    ctx.font = '10px Manrope, sans-serif';
+    ctx.textBaseline = 'top';
+    ctx.fillStyle = '#EF476F'; ctx.textAlign = 'left';
+    ctx.fillText('KE ' + Math.round(KE / total * 100) + '%', x, y + bh + 4);
+    ctx.fillStyle = '#06D6E0'; ctx.textAlign = 'right';
+    ctx.fillText('PE ' + Math.round(PE / total * 100) + '%', x + bw, y + bh + 4);
+  }
+
+  _drawEnergyChart(ctx, W, H) {
+    const data = this._eHistory;
+    if (data.length < 2) return;
+
+    const cw = Math.min(300, W * 0.4);
+    const ch = 80;
+    const cx = W - cw - 20;
+    const cy = H - ch - 20;
+
+    ctx.fillStyle = 'rgba(22,22,38,0.7)';
+    ctx.beginPath(); ctx.roundRect(cx - 8, cy - 8, cw + 16, ch + 16, 8); ctx.fill();
+
+    let maxE = 0;
+    for (const d of data) maxE = Math.max(maxE, d.ke + d.pe);
+    if (maxE < 0.01) return;
+
+    // PE filled area
+    ctx.fillStyle = 'rgba(6,214,224,0.2)';
+    ctx.beginPath();
+    ctx.moveTo(cx, cy + ch);
+    for (let i = 0; i < data.length; i++) {
+      const x = cx + (i / (data.length - 1)) * cw;
+      const y = cy + ch - (data[i].pe / maxE) * ch;
+      ctx.lineTo(x, y);
+    }
+    ctx.lineTo(cx + cw, cy + ch);
+    ctx.closePath(); ctx.fill();
+
+    // KE line
+    ctx.strokeStyle = '#EF476F';
+    ctx.lineWidth = 1.5;
+    ctx.beginPath();
+    for (let i = 0; i < data.length; i++) {
+      const x = cx + (i / (data.length - 1)) * cw;
+      const y = cy + ch - (data[i].ke / maxE) * ch;
+      i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
+    }
+    ctx.stroke();
+
+    // total line
+    ctx.strokeStyle = 'rgba(255,255,255,0.25)';
+    ctx.lineWidth = 1;
+    ctx.setLineDash([4, 4]);
+    ctx.beginPath();
+    for (let i = 0; i < data.length; i++) {
+      const x = cx + (i / (data.length - 1)) * cw;
+      const y = cy + ch - ((data[i].ke + data[i].pe) / maxE) * ch;
+      i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
+    }
+    ctx.stroke();
+    ctx.setLineDash([]);
+
+    // labels
+    ctx.font = '10px Manrope, sans-serif';
+    ctx.textBaseline = 'bottom';
+    ctx.fillStyle = '#EF476F'; ctx.textAlign = 'left'; ctx.fillText('KE', cx + 2, cy);
+    ctx.fillStyle = '#06D6E0'; ctx.textAlign = 'center'; ctx.fillText('PE', cx + 30, cy);
+    ctx.fillStyle = 'rgba(255,255,255,0.4)'; ctx.textAlign = 'right'; ctx.fillText('Total', cx + cw, cy);
+  }
+
+  /* ── events ─────────────────────────────────── */
+
+  _bindEvents() {
+    const cv = this.canvas;
+
+    cv.addEventListener('mousedown', e => {
+      const { bx, by } = this._bobPos();
+      const r = cv.getBoundingClientRect();
+      const mx = (e.clientX - r.left) * (this.W / r.width);
+      const my = (e.clientY - r.top)  * (this.H / r.height);
+      if (Math.hypot(mx - bx, my - by) < 30) {
+        this._drag = true;
+        this.pause();
+      }
+    });
+
+    window.addEventListener('mousemove', e => {
+      if (!this._drag) return;
+      const r = cv.getBoundingClientRect();
+      const mx = (e.clientX - r.left) * (this.W / r.width);
+      const my = (e.clientY - r.top)  * (this.H / r.height);
+      const { px, py } = this._bobPos();
+      this.theta = Math.atan2(mx - px, my - py);
+      this.omega = 0;
+      this._clearTrail();
+      this.draw();
+      this._emit();
+    });
+
+    window.addEventListener('mouseup', () => {
+      if (this._drag) {
+        this._drag = false;
+        this.play();
+      }
+    });
+
+    // touch
+    cv.addEventListener('touchstart', e => {
+      if (e.touches.length !== 1) return;
+      const { bx, by } = this._bobPos();
+      const r = cv.getBoundingClientRect();
+      const mx = (e.touches[0].clientX - r.left) * (this.W / r.width);
+      const my = (e.touches[0].clientY - r.top)  * (this.H / r.height);
+      if (Math.hypot(mx - bx, my - by) < 40) {
+        this._drag = true;
+        this.pause();
+      }
+    }, { passive: true });
+    cv.addEventListener('touchmove', e => {
+      if (!this._drag) return;
+      e.preventDefault();
+      const r = cv.getBoundingClientRect();
+      const mx = (e.touches[0].clientX - r.left) * (this.W / r.width);
+      const my = (e.touches[0].clientY - r.top)  * (this.H / r.height);
+      const { px, py } = this._bobPos();
+      this.theta = Math.atan2(mx - px, my - py);
+      this.omega = 0;
+      this._clearTrail();
+      this.draw();
+      this._emit();
+    }, { passive: false });
+    cv.addEventListener('touchend', () => {
+      if (this._drag) { this._drag = false; this.play(); }
+    });
+  }
+}
diff --git a/frontend/js/labs/photosynthesis.js b/frontend/js/labs/photosynthesis.js
new file mode 100644
index 0000000..70352a0
--- /dev/null
+++ b/frontend/js/labs/photosynthesis.js
@@ -0,0 +1,811 @@
+'use strict';
+/* ════════════════════════════════════════════════════════════════
+   PhotosynthesisSim — Фотосинтез и клеточное дыхание
+   Световые реакции · цикл Кальвина · митохондриальное дыхание
+   Молекулярная анимация · частицы · статистика
+   ════════════════════════════════════════════════════════════════ */
+
+class PhotosynthesisSim {
+
+  static C = {
+    bg:          '#0a0e14',
+    // хлоропласт
+    chlorBg:     'rgba(34,211,153,0.07)',
+    chlorStroke: 'rgba(34,211,153,0.5)',
+    thylBg:      'rgba(34,211,153,0.18)',
+    thylStroke:  'rgba(34,211,153,0.6)',
+    stroma:      'rgba(34,211,153,0.04)',
+    // митохондрия
+    mitoBg:      'rgba(239,71,111,0.08)',
+    mitoStroke:  'rgba(239,71,111,0.5)',
+    cristaeBg:   'rgba(239,71,111,0.18)',
+    cristaeStroke:'rgba(239,71,111,0.55)',
+    matrix:      'rgba(239,71,111,0.04)',
+    // молекулы
+    photon:      '#FFD166',
+    water:       '#06D6E0',
+    co2:         '#EF476F',
+    o2:          '#4CC9F0',
+    atp:         '#9B5DE5',
+    nadph:       '#7BF5A4',
+    g3p:         '#22d399',
+    glucose:     '#FFD166',
+    pyruvate:    '#FF6B35',
+    electron:    '#4CC9F0',
+    // text
+    label:       'rgba(255,255,255,0.35)',
+    labelBright: 'rgba(255,255,255,0.8)',
+  };
+
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.ctx    = canvas.getContext('2d');
+
+    this.mode   = 'photo';    // 'photo' | 'resp'
+    this._light = 70;         // 0..100
+    this._co2   = 50;         // 0..100
+
+    this._particles = [];
+    this._time      = 0;
+
+    this._stats = { atp: 0, atpRate: 0, o2: 0, co2Out: 0, efficiency: 0 };
+    this._atpAccum   = 0;
+    this._atpSmoothR = 0;
+
+    // spawn timers
+    this._photonTimer   = 0;
+    this._waterTimer    = 0;
+    this._co2Timer      = 0;
+    this._glucoseTimer  = 0;
+    this._atpTimer      = 0;
+    this._pyrTimer      = 0;
+    this._krebsAngle    = 0;
+    this._etcOffset     = 0;
+
+    // layout (computed in fit)
+    this._layout = {};
+
+    this._raf  = null;
+    this._last = 0;
+    this.W = 0; this.H = 0;
+
+    this.onUpdate = null;
+
+    this.fit();
+  }
+
+  /* ── Lifecycle ────────────────────────────────────────────── */
+
+  fit() {
+    const dpr = window.devicePixelRatio || 1;
+    const W   = this.canvas.offsetWidth  || 700;
+    const H   = this.canvas.offsetHeight || 440;
+    this.canvas.width  = Math.round(W * dpr);
+    this.canvas.height = Math.round(H * dpr);
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this.W = W; this.H = H;
+    this._calcLayout();
+    if (!this._raf) this._draw();
+  }
+
+  start() {
+    if (this._raf) return;
+    this._last = performance.now();
+    const loop = t => { this._raf = requestAnimationFrame(loop); this._tick(t); };
+    this._raf = requestAnimationFrame(loop);
+  }
+
+  stop() { cancelAnimationFrame(this._raf); this._raf = null; }
+
+  reset() {
+    this._particles = [];
+    this._time      = 0;
+    this._stats     = { atp: 0, atpRate: 0, o2: 0, co2Out: 0, efficiency: 0 };
+    this._atpAccum  = 0;
+    this._atpSmoothR = 0;
+    if (!this._raf) this._draw();
+    this._emitUpdate();
+  }
+
+  setMode(mode) {
+    this.mode = mode;
+    this.reset();
+  }
+
+  setLightIntensity(v) { this._light = v; }
+  setCO2(v)            { this._co2   = v; }
+
+  /* ── Layout ───────────────────────────────────────────────── */
+
+  _calcLayout() {
+    const { W, H } = this;
+    const cx = W / 2, cy = H / 2;
+    const ow = Math.min(W * 0.82, 560), oh = Math.min(H * 0.72, 300);
+
+    if (this.mode === 'photo' || this.mode !== 'resp') {
+      // chloroplast outer
+      this._layout = {
+        cx, cy,
+        outerRx: ow / 2, outerRy: oh / 2,
+        // thylakoid band (horizontal, middle third)
+        thylY:  cy - oh * 0.06,
+        thylH:  oh * 0.28,
+        thylX1: cx - ow * 0.4,
+        thylX2: cx + ow * 0.4,
+        // stroma top / bottom
+        stromaTopY: cy - oh / 2,
+        stromaBotY: cy + oh / 2,
+        // label positions
+        thylLabelY: cy + oh * 0.08,
+        stromaLabelY: cy - oh * 0.34,
+      };
+    } else {
+      // mitochondria
+      this._layout = {
+        cx, cy,
+        outerRx: ow / 2, outerRy: oh / 2,
+        // inner membrane (cristae zone: inner 60% of organelle)
+        innerRx: ow * 0.3,
+        innerRy: oh * 0.3,
+        // zones
+        matrixCx: cx + ow * 0.12,
+        cytoCx:   cx - ow * 0.32,
+        etcY:     cy,
+      };
+    }
+  }
+
+  /* ── Tick ─────────────────────────────────────────────────── */
+
+  _tick(t) {
+    const dt = Math.min(t - this._last, 80);
+    this._last = t;
+    this._time += dt;
+
+    if (this.mode === 'photo') {
+      this._updatePhoto(dt);
+    } else {
+      this._updateResp(dt);
+    }
+
+    this._updateParticles(dt);
+    this._draw();
+    this._emitUpdate();
+  }
+
+  /* ── Photosynthesis update ────────────────────────────────── */
+
+  _updatePhoto(dt) {
+    const L  = this._light / 100;
+    const CO = this._co2   / 100;
+    const rate = L * 0.8 + 0.2;   // min rate even at low light
+
+    // фотоны (rain from top)
+    this._photonTimer += dt;
+    const photonInterval = 300 / (L * 3 + 0.5);
+    while (this._photonTimer > photonInterval) {
+      this._photonTimer -= photonInterval;
+      this._spawnPhoton();
+    }
+
+    // H2O splitting (thylakoid)
+    this._waterTimer += dt;
+    if (this._waterTimer > 600 / (rate + 0.2)) {
+      this._waterTimer = 0;
+      if (L > 0.1) this._spawnWaterSplit();
+    }
+
+    // CO2 into stroma
+    this._co2Timer += dt;
+    if (this._co2Timer > 500 / (CO * 2 + 0.3)) {
+      this._co2Timer = 0;
+      if (CO > 0.05) this._spawnCO2();
+    }
+
+    // ATP from thylakoid <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> stroma
+    this._atpTimer += dt;
+    if (this._atpTimer > 400 / (rate + 0.1)) {
+      this._atpTimer = 0;
+      if (L > 0.05) this._spawnATP();
+    }
+
+    // G3P output
+    this._glucoseTimer += dt;
+    if (this._glucoseTimer > 800 / (rate * CO + 0.1)) {
+      this._glucoseTimer = 0;
+      if (L > 0.1 && CO > 0.05) this._spawnG3P();
+    }
+
+    // Calvin cycle rotation
+    this._krebsAngle += dt * 0.0004 * rate;
+
+    // stats
+    const atpR = L * CO * 18;
+    this._atpSmoothR += (atpR - this._atpSmoothR) * 0.05;
+    this._atpAccum   += atpR * dt / 1000;
+    this._stats.atpRate    = this._atpSmoothR;
+    this._stats.atp        = this._atpAccum;
+    this._stats.o2        += L * 0.4 * dt / 1000;
+    this._stats.co2Out     = CO;
+    this._stats.efficiency = Math.round(L * CO * 100 * 0.38);
+  }
+
+  /* ── Respiration update ───────────────────────────────────── */
+
+  _updateResp(dt) {
+    const rate = 0.8;
+
+    // glucose <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> pyruvate (glycolysis)
+    this._glucoseTimer += dt;
+    if (this._glucoseTimer > 900) {
+      this._glucoseTimer = 0;
+      this._spawnGlucose();
+    }
+
+    // pyruvate <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> krebs cycle
+    this._pyrTimer += dt;
+    if (this._pyrTimer > 600) {
+      this._pyrTimer = 0;
+      this._spawnPyruvate();
+    }
+
+    // ATP bursts (ETC)
+    this._atpTimer += dt;
+    if (this._atpTimer > 350) {
+      this._atpTimer = 0;
+      this._spawnATPResp();
+    }
+
+    // CO2 from krebs
+    this._co2Timer += dt;
+    if (this._co2Timer > 500) {
+      this._co2Timer = 0;
+      this._spawnCO2Resp();
+    }
+
+    // electron flow along ETC
+    this._etcOffset = (this._etcOffset + dt * 0.0008) % 1;
+    this._krebsAngle += dt * 0.0005;
+
+    // stats
+    const atpR = 38 * 0.5;
+    this._atpSmoothR += (atpR - this._atpSmoothR) * 0.04;
+    this._atpAccum   += atpR * dt / 1000;
+    this._stats.atpRate    = this._atpSmoothR;
+    this._stats.atp        = this._atpAccum;
+    this._stats.o2        += 0.3 * dt / 1000;
+    this._stats.co2Out    += 0.5 * dt / 1000;
+    this._stats.efficiency = 38;
+  }
+
+  /* ── Particle spawners ────────────────────────────────────── */
+
+  _spawnPhoton() {
+    const L = this._layout;
+    const x = L.thylX1 + Math.random() * (L.thylX2 - L.thylX1);
+    this._particles.push({
+      type: 'photon', x, y: this.H * 0.02,
+      vx: (Math.random() - 0.5) * 15,
+      vy: 60 + Math.random() * 30,
+      life: 1, maxLife: 1,
+      targetY: L.thylY - L.thylH / 2,
+    });
+  }
+
+  _spawnWaterSplit() {
+    const L = this._layout;
+    const x = L.cx - L.outerRx * 0.35 + Math.random() * L.outerRx * 0.15;
+    const y = L.thylY;
+    // O2 bubbles rise
+    for (let i = 0; i < 2; i++) {
+      this._particles.push({
+        type: 'o2', x: x + i * 12, y,
+        vx: (Math.random() - 0.5) * 20,
+        vy: -(40 + Math.random() * 30),
+        life: 1, maxLife: 1,
+      });
+    }
+  }
+
+  _spawnCO2() {
+    const L = this._layout;
+    const x = L.cx + L.outerRx * 0.3;
+    const y = L.stromaTopY + Math.random() * (L.cy - L.stromaTopY);
+    this._particles.push({
+      type: 'co2', x, y,
+      vx: -(30 + Math.random() * 20),
+      vy: (Math.random() - 0.5) * 15,
+      life: 1, maxLife: 1,
+    });
+  }
+
+  _spawnATP() {
+    const L = this._layout;
+    const x = L.thylX1 + Math.random() * (L.thylX2 - L.thylX1);
+    const y = L.thylY - L.thylH * 0.1;
+    this._particles.push({
+      type: 'atp', x, y,
+      vx: (Math.random() - 0.5) * 25,
+      vy: -(35 + Math.random() * 25),
+      life: 1, maxLife: 1,
+    });
+  }
+
+  _spawnG3P() {
+    const L = this._layout;
+    const angle = Math.random() * Math.PI * 2;
+    const r = 30 + Math.random() * 20;
+    this._particles.push({
+      type: 'g3p',
+      x: L.cx + Math.cos(angle) * r,
+      y: L.cy - L.thylH * 0.8 + Math.sin(angle) * r * 0.5,
+      vx: (Math.random() - 0.5) * 20,
+      vy: -(20 + Math.random() * 15),
+      life: 1, maxLife: 1,
+    });
+  }
+
+  _spawnGlucose() {
+    const L = this._layout;
+    this._particles.push({
+      type: 'glucose',
+      x: L.cx - L.outerRx * 0.6,
+      y: L.cy + (Math.random() - 0.5) * 40,
+      vx: 35, vy: (Math.random() - 0.5) * 10,
+      life: 1, maxLife: 1,
+    });
+  }
+
+  _spawnPyruvate() {
+    const L = this._layout;
+    this._particles.push({
+      type: 'pyruvate',
+      x: L.cx - 20,
+      y: L.cy + (Math.random() - 0.5) * 30,
+      vx: 20, vy: (Math.random() - 0.5) * 15,
+      life: 1, maxLife: 1,
+    });
+  }
+
+  _spawnATPResp() {
+    const L = this._layout;
+    const angle = this._krebsAngle + Math.random() * 0.5;
+    const r = L.innerRx * 0.7;
+    this._particles.push({
+      type: 'atp',
+      x: L.cx + Math.cos(angle) * r,
+      y: L.cy + Math.sin(angle) * r * 0.75,
+      vx: (Math.random() - 0.5) * 30,
+      vy: -(25 + Math.random() * 20),
+      life: 1, maxLife: 1,
+    });
+  }
+
+  _spawnCO2Resp() {
+    const L = this._layout;
+    const angle = this._krebsAngle + Math.PI * (0.5 + Math.random() * 0.5);
+    const r = L.innerRx * 0.5;
+    this._particles.push({
+      type: 'co2',
+      x: L.cx + Math.cos(angle) * r,
+      y: L.cy + Math.sin(angle) * r * 0.75,
+      vx: (Math.random() - 0.5) * 20,
+      vy: -(30 + Math.random() * 20),
+      life: 1, maxLife: 1,
+    });
+  }
+
+  /* ── Particle update ──────────────────────────────────────── */
+
+  _updateParticles(dt) {
+    const s = dt / 1000;
+    for (const p of this._particles) {
+      if (p.targetY !== undefined && p.y > p.targetY) {
+        p.y += p.vy * s;
+        p.x += p.vx * s;
+      } else {
+        p.x += p.vx * s;
+        p.y += p.vy * s;
+        p.life -= s * (0.5 + Math.random() * 0.3);
+      }
+      if (p.type === 'photon' && p.y >= (p.targetY || 0)) {
+        p.targetY = undefined;
+        p.vy = -15;
+        p.vx = (Math.random() - 0.5) * 30;
+        p.life -= 0.4;
+      }
+    }
+    // cap at 120 particles
+    this._particles = this._particles.filter(p => p.life > 0).slice(-120);
+  }
+
+  /* ── Draw ─────────────────────────────────────────────────── */
+
+  _draw() {
+    const { ctx, W, H } = this;
+    ctx.clearRect(0, 0, W, H);
+    ctx.fillStyle = PhotosynthesisSim.C.bg;
+    ctx.fillRect(0, 0, W, H);
+
+    if (this.mode === 'photo') {
+      this._drawChloroplast();
+    } else {
+      this._drawMitochondria();
+    }
+
+    this._drawParticles();
+    this._drawEquation();
+  }
+
+  /* ── Chloroplast ──────────────────────────────────────────── */
+
+  _drawChloroplast() {
+    const { ctx } = this;
+    const C = PhotosynthesisSim.C;
+    const L = this._layout;
+    if (!L.outerRx) return;
+
+    // outer envelope
+    ctx.beginPath();
+    ctx.ellipse(L.cx, L.cy, L.outerRx, L.outerRy, 0, 0, Math.PI * 2);
+    ctx.fillStyle = C.chlorBg;
+    ctx.fill();
+    ctx.strokeStyle = C.chlorStroke;
+    ctx.lineWidth = 2.5;
+    ctx.stroke();
+
+    // stroma label
+    ctx.save();
+    ctx.font = '11px Manrope,sans-serif';
+    ctx.fillStyle = 'rgba(34,211,153,0.45)';
+    ctx.textAlign = 'center';
+    ctx.fillText('Строма (цикл Кальвина)', L.cx, L.stromaTopY + 22);
+    ctx.restore();
+
+    // thylakoid membrane band
+    const tY  = L.thylY, tH = L.thylH;
+    const tX1 = L.thylX1, tX2 = L.thylX2;
+    const tW  = tX2 - tX1;
+
+    ctx.beginPath();
+    _psRRect(ctx, tX1, tY - tH / 2, tW, tH, tH / 2);
+    ctx.fillStyle = C.thylBg;
+    ctx.fill();
+    ctx.strokeStyle = C.thylStroke;
+    ctx.lineWidth = 2;
+    ctx.stroke();
+
+    // thylakoid label
+    ctx.save();
+    ctx.font = '11px Manrope,sans-serif';
+    ctx.fillStyle = 'rgba(34,211,153,0.6)';
+    ctx.textAlign = 'center';
+    ctx.fillText('Тилакоид (световые реакции)', L.cx, L.thylY + tH / 2 + 16);
+    ctx.restore();
+
+    // Calvin cycle rotating wheel in stroma
+    this._drawCalvinCycle();
+
+    // light arrows
+    this._drawLightArrows();
+  }
+
+  _drawCalvinCycle() {
+    const { ctx } = this;
+    const C = PhotosynthesisSim.C;
+    const L = this._layout;
+    const cx = L.cx, cy = L.cy - L.thylH * 0.85;
+    const r  = Math.min(L.outerRy * 0.28, 42);
+    const a  = this._krebsAngle;
+
+    ctx.save();
+    ctx.globalAlpha = 0.6;
+
+    // circle arrow (rotating)
+    ctx.beginPath();
+    ctx.arc(cx, cy, r, a, a + Math.PI * 1.7);
+    ctx.strokeStyle = C.g3p;
+    ctx.lineWidth = 2.5;
+    ctx.stroke();
+
+    // arrowhead
+    const ex = cx + Math.cos(a + Math.PI * 1.7) * r;
+    const ey = cy + Math.sin(a + Math.PI * 1.7) * r;
+    const da = 0.4;
+    ctx.beginPath();
+    ctx.moveTo(ex, ey);
+    ctx.lineTo(ex - Math.cos(a + Math.PI * 1.7 - da) * 8,
+               ey - Math.sin(a + Math.PI * 1.7 - da) * 8);
+    ctx.moveTo(ex, ey);
+    ctx.lineTo(ex - Math.cos(a + Math.PI * 1.7 + da) * 8,
+               ey - Math.sin(a + Math.PI * 1.7 + da) * 8);
+    ctx.strokeStyle = C.g3p;
+    ctx.lineWidth = 2;
+    ctx.stroke();
+
+    // center label
+    ctx.globalAlpha = 0.55;
+    ctx.font = 'bold 10px Manrope,sans-serif';
+    ctx.fillStyle = C.g3p;
+    ctx.textAlign = 'center';
+    ctx.fillText('цикл', cx, cy - 2);
+    ctx.fillText('Кальвина', cx, cy + 11);
+    ctx.restore();
+  }
+
+  _drawLightArrows() {
+    const { ctx } = this;
+    const C = PhotosynthesisSim.C;
+    const L = this._layout;
+    const tX1 = L.thylX1, tX2 = L.thylX2;
+    const topY = L.stromaTopY + 8;
+    const botY = L.thylY - L.thylH / 2;
+    const L_norm = this._light / 100;
+
+    ctx.save();
+    ctx.globalAlpha = 0.25 + L_norm * 0.55;
+    const n = 5;
+    for (let i = 0; i < n; i++) {
+      const x = tX1 + (i + 0.5) / n * (tX2 - tX1);
+      ctx.beginPath();
+      ctx.moveTo(x, topY);
+      ctx.lineTo(x, botY - 4);
+      ctx.strokeStyle = C.photon;
+      ctx.lineWidth = 1.5;
+      ctx.setLineDash([5, 4]);
+      ctx.stroke();
+      ctx.setLineDash([]);
+      // arrowhead
+      ctx.beginPath();
+      ctx.moveTo(x, botY - 4);
+      ctx.lineTo(x - 5, botY - 14);
+      ctx.moveTo(x, botY - 4);
+      ctx.lineTo(x + 5, botY - 14);
+      ctx.strokeStyle = C.photon;
+      ctx.lineWidth = 1.5;
+      ctx.stroke();
+      // sun dot
+      ctx.beginPath();
+      ctx.arc(x, topY - 5, 4, 0, Math.PI * 2);
+      ctx.fillStyle = C.photon;
+      ctx.fill();
+    }
+    ctx.restore();
+  }
+
+  /* ── Mitochondria ─────────────────────────────────────────── */
+
+  _drawMitochondria() {
+    const { ctx } = this;
+    const C = PhotosynthesisSim.C;
+    const L = this._layout;
+    if (!L.outerRx) return;
+
+    // outer membrane
+    ctx.beginPath();
+    ctx.ellipse(L.cx, L.cy, L.outerRx, L.outerRy, 0, 0, Math.PI * 2);
+    ctx.fillStyle = C.mitoBg;
+    ctx.fill();
+    ctx.strokeStyle = C.mitoStroke;
+    ctx.lineWidth = 2.5;
+    ctx.stroke();
+
+    // inner membrane / cristae (zigzag folds)
+    this._drawCristae();
+
+    // zone labels
+    ctx.save();
+    ctx.font = '11px Manrope,sans-serif';
+    ctx.textAlign = 'center';
+    ctx.fillStyle = 'rgba(239,71,111,0.5)';
+    ctx.fillText('Матрикс (цикл Кребса)', L.cx + L.innerRx * 0.1, L.cy + 12);
+    ctx.fillStyle = 'rgba(239,71,111,0.35)';
+    ctx.fillText('Цитоплазма (гликолиз)', L.cx - L.outerRx * 0.62, L.cy);
+    ctx.restore();
+
+    // Krebs cycle arrow
+    this._drawKrebsWheel();
+
+    // ETC along inner membrane
+    this._drawETC();
+  }
+
+  _drawCristae() {
+    const { ctx } = this;
+    const C = PhotosynthesisSim.C;
+    const L = this._layout;
+    const iRx = L.innerRx || 110, iRy = L.innerRy || 80;
+
+    ctx.beginPath();
+    ctx.ellipse(L.cx, L.cy, iRx, iRy, 0, 0, Math.PI * 2);
+    ctx.fillStyle = C.cristaeBg;
+    ctx.fill();
+    ctx.strokeStyle = C.cristaeStroke;
+    ctx.lineWidth = 1.8;
+    ctx.stroke();
+
+    // cristae folds (vertical zigzag lines inside)
+    ctx.save();
+    ctx.globalAlpha = 0.45;
+    ctx.strokeStyle = C.cristaeStroke;
+    ctx.lineWidth = 1.5;
+    for (let i = -2; i <= 2; i++) {
+      const x = L.cx + i * iRx * 0.32;
+      const h = Math.sqrt(Math.max(0, 1 - (i * 0.32) ** 2)) * iRy * 0.7;
+      ctx.beginPath();
+      ctx.moveTo(x, L.cy - h);
+      ctx.bezierCurveTo(x - 12, L.cy - h * 0.3, x + 12, L.cy + h * 0.3, x, L.cy + h);
+      ctx.stroke();
+    }
+    ctx.restore();
+  }
+
+  _drawKrebsWheel() {
+    const { ctx } = this;
+    const C = PhotosynthesisSim.C;
+    const L = this._layout;
+    const cx = L.cx, cy = L.cy;
+    const r  = (L.innerRx || 110) * 0.42;
+    const a  = this._krebsAngle;
+
+    ctx.save();
+    ctx.globalAlpha = 0.55;
+    ctx.beginPath();
+    ctx.arc(cx, cy, r, a, a + Math.PI * 1.65);
+    ctx.strokeStyle = C.pyruvate;
+    ctx.lineWidth = 2.5;
+    ctx.stroke();
+    // arrowhead
+    const ex = cx + Math.cos(a + Math.PI * 1.65) * r;
+    const ey = cy + Math.sin(a + Math.PI * 1.65) * r;
+    const da = 0.45;
+    ctx.beginPath();
+    ctx.moveTo(ex, ey);
+    ctx.lineTo(ex - Math.cos(a + Math.PI * 1.65 - da) * 8,
+               ey - Math.sin(a + Math.PI * 1.65 - da) * 8);
+    ctx.moveTo(ex, ey);
+    ctx.lineTo(ex - Math.cos(a + Math.PI * 1.65 + da) * 8,
+               ey - Math.sin(a + Math.PI * 1.65 + da) * 8);
+    ctx.strokeStyle = C.pyruvate;
+    ctx.lineWidth = 2;
+    ctx.stroke();
+    ctx.globalAlpha = 0.45;
+    ctx.font = 'bold 10px Manrope,sans-serif';
+    ctx.fillStyle = C.pyruvate;
+    ctx.textAlign = 'center';
+    ctx.fillText('цикл', cx, cy - 3);
+    ctx.fillText('Кребса', cx, cy + 11);
+    ctx.restore();
+  }
+
+  _drawETC() {
+    const { ctx } = this;
+    const C = PhotosynthesisSim.C;
+    const L = this._layout;
+    const iRx = L.innerRx || 110, iRy = L.innerRy || 80;
+    const n = 8;
+
+    ctx.save();
+    ctx.globalAlpha = 0.7;
+    for (let i = 0; i < n; i++) {
+      const frac = ((i / n) + this._etcOffset) % 1;
+      const a = frac * Math.PI * 2 - Math.PI / 2;
+      const x = L.cx + Math.cos(a) * iRx;
+      const y = L.cy + Math.sin(a) * iRy;
+      const size = 4 + 2 * Math.sin(frac * Math.PI * 4);
+      ctx.beginPath();
+      ctx.arc(x, y, size, 0, Math.PI * 2);
+      ctx.fillStyle = C.electron;
+      ctx.shadowColor = C.electron;
+      ctx.shadowBlur  = 6;
+      ctx.fill();
+      ctx.shadowBlur = 0;
+    }
+    ctx.restore();
+  }
+
+  /* ── Particle rendering ───────────────────────────────────── */
+
+  _drawParticles() {
+    const { ctx } = this;
+    const C = PhotosynthesisSim.C;
+
+    const colorMap = {
+      photon:   C.photon,
+      o2:       C.o2,
+      co2:      C.co2,
+      atp:      C.atp,
+      nadph:    C.nadph,
+      g3p:      C.g3p,
+      glucose:  C.glucose,
+      pyruvate: C.pyruvate,
+      electron: C.electron,
+    };
+    const labelMap = {
+      photon:   '*',
+      o2:       'O₂',
+      co2:      'CO₂',
+      atp:      'ATP',
+      nadph:    'NADPH',
+      g3p:      'G3P',
+      glucose:  'Глк',
+      pyruvate: 'Пир',
+      electron: 'e⁻',
+    };
+
+    for (const p of this._particles) {
+      const alpha = Math.min(1, p.life * 2) * 0.9;
+      if (alpha <= 0) continue;
+      ctx.save();
+      ctx.globalAlpha = alpha;
+      const col = colorMap[p.type] || '#fff';
+      const lbl = labelMap[p.type] || '';
+
+      // glow
+      ctx.beginPath();
+      ctx.arc(p.x, p.y, 9, 0, Math.PI * 2);
+      ctx.fillStyle = col + '28';
+      ctx.fill();
+
+      // circle
+      ctx.beginPath();
+      ctx.arc(p.x, p.y, 5, 0, Math.PI * 2);
+      ctx.fillStyle = col;
+      ctx.fill();
+
+      // label
+      ctx.font = 'bold 8px Manrope,sans-serif';
+      ctx.fillStyle = '#fff';
+      ctx.textAlign = 'center';
+      ctx.fillText(lbl, p.x, p.y + 18);
+      ctx.restore();
+    }
+  }
+
+  /* ── Equation footer ──────────────────────────────────────── */
+
+  _drawEquation() {
+    const { ctx, W, H } = this;
+    const eq = this.mode === 'photo'
+      ? '6CO₂ + 6H₂O + свет  →  C₆H₁₂O₆ + 6O₂'
+      : 'C₆H₁₂O₆ + 6O₂  →  6CO₂ + 6H₂O + 38 ATP';
+
+    ctx.save();
+    ctx.font = '12px Manrope,sans-serif';
+    const tw = ctx.measureText(eq).width;
+    const px = W / 2 - tw / 2 - 12, py = H - 28;
+    ctx.fillStyle = 'rgba(255,255,255,0.06)';
+    _psRRect(ctx, px, py - 2, tw + 24, 20, 6);
+    ctx.fill();
+    ctx.fillStyle = 'rgba(255,255,255,0.45)';
+    ctx.textAlign = 'center';
+    ctx.fillText(eq, W / 2, py + 13);
+    ctx.restore();
+  }
+
+  /* ── Stats emit ───────────────────────────────────────────── */
+
+  _emitUpdate() {
+    if (!this.onUpdate) return;
+    this.onUpdate({
+      mode:       this.mode,
+      atpRate:    this._stats.atpRate.toFixed(1),
+      o2:         Math.floor(this._stats.o2),
+      co2:        Math.floor(this._stats.co2Out),
+      efficiency: this._stats.efficiency.toFixed ? this._stats.efficiency.toFixed(0) : this._stats.efficiency,
+      light:      this._light,
+      co2Level:   this._co2,
+    });
+  }
+}
+
+/* helper */
+function _psRRect(ctx, x, y, w, h, r) {
+  ctx.beginPath();
+  ctx.moveTo(x + r, y);
+  ctx.arcTo(x + w, y, x + w, y + h, r);
+  ctx.arcTo(x + w, y + h, x, y + h, r);
+  ctx.arcTo(x, y + h, x, y, r);
+  ctx.arcTo(x, y, x + w, y, r);
+  ctx.closePath();
+}
diff --git a/frontend/js/labs/probability.js b/frontend/js/labs/probability.js
new file mode 100644
index 0000000..d6e3122
--- /dev/null
+++ b/frontend/js/labs/probability.js
@@ -0,0 +1,570 @@
+'use strict';
+/* ══════════════════════════════════════════════════════════════
+   ProbabilitySim — probability & law of large numbers
+   coin flip · single die · two-dice sum
+   histogram + convergence chart + animated visuals
+   ══════════════════════════════════════════════════════════════ */
+
+class ProbabilitySim {
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.ctx    = canvas.getContext('2d');
+    this.W = 0; this.H = 0;
+
+    /* parameters */
+    this.mode   = 'coin';   // 'coin' | 'dice' | 'dice2'
+    this.trials = 100;      // target total
+    this.speed  = 5;        // trials per frame
+
+    /* state */
+    this.results     = [];  // outcome per trial
+    this.distribution = {}; // outcome <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> count
+    this._convHist   = [];  // running freq for convergence chart
+    this._trackKey   = null; // key tracked for convergence
+
+    /* animation */
+    this.playing  = false;
+    this._raf     = null;
+    this._animT   = 0;      // animation phase for coin/dice visual
+    this._lastOutcome = null;
+    this._shakeT  = 0;
+
+    this.onUpdate = null;
+
+    new ResizeObserver(() => { this.fit(); this.draw(); }).observe(canvas.parentElement);
+  }
+
+  /* ── presets ──────────────────────────────────── */
+
+  static PRESETS = {
+    coin_100:  { mode: 'coin',  trials: 100,  speed: 2 },
+    coin_1000: { mode: 'coin',  trials: 1000, speed: 10 },
+    dice_100:  { mode: 'dice',  trials: 100,  speed: 2 },
+    dice2_500: { mode: 'dice2', trials: 500,  speed: 5 },
+  };
+
+  preset(name) {
+    const p = ProbabilitySim.PRESETS[name];
+    if (p) { this.setParams(p); this.reset(); }
+  }
+
+  /* ── public API ──────────────────────────────── */
+
+  fit() {
+    const dpr = window.devicePixelRatio || 1;
+    const w = this.canvas.offsetWidth || 600;
+    const h = this.canvas.offsetHeight || 400;
+    this.canvas.width  = w * dpr;
+    this.canvas.height = h * dpr;
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this.W = w; this.H = h;
+  }
+
+  setParams({ mode, trials, speed } = {}) {
+    if (mode   !== undefined) this.mode   = mode;
+    if (trials !== undefined) this.trials = Math.max(1, +trials);
+    if (speed  !== undefined) this.speed  = Math.max(1, Math.min(50, +speed));
+    this._setupMode();
+    this.draw();
+    this._emit();
+  }
+
+  reset() {
+    this.pause();
+    this.results      = [];
+    this.distribution = {};
+    this._convHist    = [];
+    this._animT       = 0;
+    this._lastOutcome = null;
+    this._shakeT      = 0;
+    this._setupMode();
+    this.draw();
+    this._emit();
+  }
+
+  play() {
+    if (this.playing) return;
+    this.playing = true;
+    this._tick();
+  }
+
+  pause() {
+    this.playing = false;
+    if (this._raf) { cancelAnimationFrame(this._raf); this._raf = null; }
+  }
+
+  start() { this.play(); }
+  stop()  { this.pause(); }
+
+  info() {
+    const n = this.results.length;
+    const dist = { ...this.distribution };
+    const theo = this._theoretical();
+    let chiSq = 0, maxDev = 0;
+    for (const k of Object.keys(theo)) {
+      const obs = (dist[k] || 0) / (n || 1);
+      const exp = theo[k];
+      const dev = Math.abs(obs - exp);
+      if (dev > maxDev) maxDev = dev;
+      if (n > 0) chiSq += ((dist[k] || 0) - n * exp) ** 2 / (n * exp || 1);
+    }
+    return {
+      mode: this.mode,
+      totalTrials: n,
+      distribution: dist,
+      chiSquare: +chiSq.toFixed(4),
+      maxDeviation: +maxDev.toFixed(6),
+    };
+  }
+
+  /* ── internals ───────────────────────────────── */
+
+  _emit() { if (this.onUpdate) this.onUpdate(this.info()); }
+
+  _setupMode() {
+    const keys = this._outcomeKeys();
+    for (const k of keys) {
+      if (!(k in this.distribution)) this.distribution[k] = 0;
+    }
+    this._trackKey = keys[0]; // convergence tracks first outcome
+  }
+
+  _outcomeKeys() {
+    if (this.mode === 'coin') return ['О', 'Р'];
+    if (this.mode === 'dice') return ['1','2','3','4','5','6'];
+    // dice2: sums 2..12
+    const keys = [];
+    for (let i = 2; i <= 12; i++) keys.push(String(i));
+    return keys;
+  }
+
+  _theoretical() {
+    const t = {};
+    if (this.mode === 'coin') {
+      t['О'] = 0.5; t['Р'] = 0.5;
+    } else if (this.mode === 'dice') {
+      for (let i = 1; i <= 6; i++) t[String(i)] = 1 / 6;
+    } else {
+      // dice2: two dice sum probabilities
+      const ways = [0,0,1,2,3,4,5,6,5,4,3,2,1]; // index 0-12, sum 2-12
+      for (let s = 2; s <= 12; s++) t[String(s)] = ways[s] / 36;
+    }
+    return t;
+  }
+
+  _rollOnce() {
+    if (this.mode === 'coin') return Math.random() < 0.5 ? 'О' : 'Р';
+    if (this.mode === 'dice') return String(Math.floor(Math.random() * 6) + 1);
+    const d1 = Math.floor(Math.random() * 6) + 1;
+    const d2 = Math.floor(Math.random() * 6) + 1;
+    return String(d1 + d2);
+  }
+
+  _addTrial() {
+    if (this.results.length >= this.trials) return false;
+    const outcome = this._rollOnce();
+    this.results.push(outcome);
+    this.distribution[outcome] = (this.distribution[outcome] || 0) + 1;
+    this._lastOutcome = outcome;
+
+    // convergence: running frequency of tracked key
+    const n = this.results.length;
+    const freq = (this.distribution[this._trackKey] || 0) / n;
+    this._convHist.push(freq);
+    if (this._convHist.length > 500) this._convHist.shift();
+    return true;
+  }
+
+  _tick() {
+    if (!this.playing) return;
+    this._raf = requestAnimationFrame(() => {
+      let added = 0;
+      for (let i = 0; i < this.speed; i++) {
+        if (!this._addTrial()) break;
+        added++;
+      }
+      this._animT += 0.15;
+      if (added > 0) this._shakeT = 1;
+      else this._shakeT *= 0.9;
+
+      this.draw();
+      this._emit();
+
+      if (this.results.length >= this.trials) {
+        this.pause();
+        return;
+      }
+      this._tick();
+    });
+  }
+
+  /* ── drawing ─────────────────────────────────── */
+
+  draw() {
+    const { ctx, W, H } = this;
+    if (!W || !H) return;
+
+    ctx.fillStyle = '#0D0D1A';
+    ctx.fillRect(0, 0, W, H);
+
+    const vizH  = H * 0.28;
+    const histH = H * 0.48;
+    const convH = H * 0.24;
+
+    this._drawVisual(ctx, 0, 0, W, vizH);
+    this._drawHistogram(ctx, 0, vizH, W, histH);
+    this._drawConvergence(ctx, 0, vizH + histH, W, convH);
+    this._drawStats(ctx, W, H);
+  }
+
+  /* ── top visual: coin or dice ──────────────── */
+
+  _drawVisual(ctx, x0, y0, w, h) {
+    const cx = x0 + w / 2, cy = y0 + h / 2;
+
+    if (this.mode === 'coin') {
+      this._drawCoin(ctx, cx, cy, Math.min(w, h) * 0.32);
+    } else if (this.mode === 'dice') {
+      this._drawDie(ctx, cx, cy, Math.min(w, h) * 0.34, this._lastOutcome ? +this._lastOutcome : 1);
+    } else {
+      // dice2: two dice side by side
+      const sz = Math.min(w, h) * 0.28;
+      const gap = sz * 0.3;
+      const last = this._lastOutcome ? +this._lastOutcome : 7;
+      const d1 = Math.min(6, Math.max(1, Math.ceil(last / 2)));
+      const d2 = last - d1;
+      this._drawDie(ctx, cx - sz / 2 - gap, cy, sz, Math.max(1, Math.min(6, d1)));
+      this._drawDie(ctx, cx + sz / 2 + gap, cy, sz, Math.max(1, Math.min(6, d2)));
+    }
+
+    // trial counter
+    ctx.fillStyle = 'rgba(255,255,255,0.45)';
+    ctx.font = "bold 13px 'Manrope', system-ui, sans-serif";
+    ctx.textAlign = 'center'; ctx.textBaseline = 'bottom';
+    ctx.fillText(`Испытание ${this.results.length} / ${this.trials}`, x0 + w / 2, y0 + h - 6);
+  }
+
+  _drawCoin(ctx, cx, cy, r) {
+    const phase = this._animT % (Math.PI * 2);
+    const squeeze = Math.abs(Math.cos(phase));
+    const showHeads = Math.cos(phase) >= 0;
+
+    ctx.save();
+    ctx.translate(cx, cy);
+    ctx.scale(Math.max(0.05, squeeze), 1);
+
+    // shadow
+    ctx.fillStyle = 'rgba(155,93,229,0.15)';
+    ctx.beginPath(); ctx.ellipse(0, r * 0.15, r * 1.1, r * 0.18, 0, 0, Math.PI * 2); ctx.fill();
+
+    // coin body
+    const grad = ctx.createRadialGradient(-r * 0.2, -r * 0.2, 0, 0, 0, r);
+    if (showHeads) {
+      grad.addColorStop(0, '#FFD166');
+      grad.addColorStop(1, '#D4950A');
+    } else {
+      grad.addColorStop(0, '#9B5DE5');
+      grad.addColorStop(1, '#6B2FA0');
+    }
+    ctx.fillStyle = grad;
+    ctx.beginPath(); ctx.arc(0, 0, r, 0, Math.PI * 2); ctx.fill();
+
+    // rim
+    ctx.strokeStyle = 'rgba(255,255,255,0.3)';
+    ctx.lineWidth = 2;
+    ctx.stroke();
+
+    // label
+    ctx.fillStyle = showHeads ? '#5A3000' : '#E0D0FF';
+    ctx.font = `bold ${Math.round(r * 0.6)}px 'Manrope', system-ui, sans-serif`;
+    ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+    ctx.fillText(showHeads ? 'О' : 'Р', 0, 2);
+
+    ctx.restore();
+  }
+
+  _drawDie(ctx, cx, cy, size, value) {
+    const half = size / 2;
+    const shake = this._shakeT * 2;
+    const sx = shake * (Math.random() - 0.5);
+    const sy = shake * (Math.random() - 0.5);
+
+    ctx.save();
+    ctx.translate(cx + sx, cy + sy);
+
+    // shadow
+    ctx.fillStyle = 'rgba(6,214,224,0.08)';
+    ctx.beginPath(); ctx.roundRect(-half + 4, -half + 6, size, size, size * 0.18); ctx.fill();
+
+    // body
+    const grad = ctx.createLinearGradient(-half, -half, half, half);
+    grad.addColorStop(0, '#1E1E3A');
+    grad.addColorStop(1, '#12122A');
+    ctx.fillStyle = grad;
+    ctx.beginPath(); ctx.roundRect(-half, -half, size, size, size * 0.18); ctx.fill();
+
+    // border
+    ctx.strokeStyle = 'rgba(155,93,229,0.4)';
+    ctx.lineWidth = 1.5;
+    ctx.stroke();
+
+    // dots
+    const dotR = size * 0.08;
+    const off  = size * 0.26;
+    const dots = {
+      1: [[0, 0]],
+      2: [[-off, -off], [off, off]],
+      3: [[-off, -off], [0, 0], [off, off]],
+      4: [[-off, -off], [off, -off], [-off, off], [off, off]],
+      5: [[-off, -off], [off, -off], [0, 0], [-off, off], [off, off]],
+      6: [[-off, -off], [off, -off], [-off, 0], [off, 0], [-off, off], [off, off]],
+    };
+
+    const positions = dots[Math.max(1, Math.min(6, value))] || dots[1];
+    for (const [dx, dy] of positions) {
+      const dg = ctx.createRadialGradient(dx, dy, 0, dx, dy, dotR);
+      dg.addColorStop(0, '#FFFFFF');
+      dg.addColorStop(1, '#C0C0E0');
+      ctx.fillStyle = dg;
+      ctx.beginPath(); ctx.arc(dx, dy, dotR, 0, Math.PI * 2); ctx.fill();
+    }
+
+    ctx.restore();
+  }
+
+  /* ── histogram ─────────────────────────────── */
+
+  _drawHistogram(ctx, x0, y0, w, h) {
+    const keys = this._outcomeKeys();
+    const theo = this._theoretical();
+    const n    = this.results.length || 1;
+    const pad  = { l: 48, r: 16, t: 20, b: 34 };
+    const pw   = w - pad.l - pad.r;
+    const ph   = h - pad.t - pad.b;
+    const px   = x0 + pad.l, py = y0 + pad.t;
+
+    // panel bg
+    ctx.fillStyle = 'rgba(5,5,20,0.5)';
+    ctx.beginPath(); ctx.roundRect(x0 + 8, y0 + 4, w - 16, h - 8, 8); ctx.fill();
+
+    // y-axis: relative frequency
+    let maxFreq = 0;
+    for (const k of keys) {
+      const f = (this.distribution[k] || 0) / n;
+      if (f > maxFreq) maxFreq = f;
+    }
+    for (const k of keys) {
+      const t = theo[k];
+      if (t > maxFreq) maxFreq = t;
+    }
+    maxFreq = Math.max(maxFreq * 1.15, 0.05);
+
+    // grid lines
+    ctx.strokeStyle = 'rgba(255,255,255,0.05)';
+    ctx.lineWidth = 0.5;
+    for (let i = 0; i <= 4; i++) {
+      const gy = py + ph * (1 - i / 4);
+      ctx.beginPath(); ctx.moveTo(px, gy); ctx.lineTo(px + pw, gy); ctx.stroke();
+    }
+
+    // y labels
+    ctx.fillStyle = 'rgba(255,255,255,0.3)';
+    ctx.font = "9px 'Manrope', system-ui, sans-serif";
+    ctx.textAlign = 'right'; ctx.textBaseline = 'middle';
+    for (let i = 0; i <= 4; i++) {
+      const v = (maxFreq * i / 4 * 100).toFixed(0) + '%';
+      ctx.fillText(v, px - 6, py + ph * (1 - i / 4));
+    }
+
+    // bars
+    const barCount = keys.length;
+    const gap   = Math.max(2, pw * 0.03);
+    const barW  = (pw - gap * (barCount + 1)) / barCount;
+    const colors = ['#EF476F','#9B5DE5','#06D6E0','#7BF5A4','#FFD166',
+                    '#EF476F','#9B5DE5','#06D6E0','#7BF5A4','#FFD166','#EF476F'];
+
+    for (let i = 0; i < barCount; i++) {
+      const k = keys[i];
+      const freq = (this.distribution[k] || 0) / n;
+      const bh = (freq / maxFreq) * ph;
+      const bx = px + gap + i * (barW + gap);
+      const by = py + ph - bh;
+
+      // bar gradient
+      const bg = ctx.createLinearGradient(bx, by, bx, py + ph);
+      bg.addColorStop(0, colors[i % colors.length]);
+      bg.addColorStop(1, colors[i % colors.length] + '66');
+      ctx.fillStyle = bg;
+      ctx.beginPath(); ctx.roundRect(bx, by, barW, bh, [4, 4, 0, 0]); ctx.fill();
+
+      // glow at top
+      if (bh > 4) {
+        ctx.fillStyle = colors[i % colors.length] + '33';
+        ctx.beginPath(); ctx.roundRect(bx - 2, by - 2, barW + 4, 6, 3); ctx.fill();
+      }
+
+      // count + percentage label above bar
+      const count = this.distribution[k] || 0;
+      const pct   = (freq * 100).toFixed(1);
+      ctx.fillStyle = 'rgba(255,255,255,0.7)';
+      ctx.font = "bold 9px 'Manrope', system-ui, sans-serif";
+      ctx.textAlign = 'center'; ctx.textBaseline = 'bottom';
+      if (bh > 16) {
+        ctx.fillText(count, bx + barW / 2, by - 2);
+      } else {
+        ctx.fillText(count, bx + barW / 2, py + ph - bh - 2);
+      }
+      // percentage inside bar
+      if (bh > 28) {
+        ctx.fillStyle = 'rgba(0,0,0,0.55)';
+        ctx.font = "8px 'Manrope', system-ui, sans-serif";
+        ctx.textBaseline = 'top';
+        ctx.fillText(pct + '%', bx + barW / 2, by + 4);
+      }
+
+      // x label
+      ctx.fillStyle = 'rgba(255,255,255,0.55)';
+      ctx.font = "10px 'Manrope', system-ui, sans-serif";
+      ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+      ctx.fillText(k, bx + barW / 2, py + ph + 6);
+    }
+
+    // theoretical probability dashed lines
+    ctx.setLineDash([5, 4]);
+    ctx.lineWidth = 1.5;
+    for (let i = 0; i < barCount; i++) {
+      const k = keys[i];
+      const tp = theo[k];
+      const ly = py + ph - (tp / maxFreq) * ph;
+      const bx = px + gap + i * (barW + gap);
+      ctx.strokeStyle = colors[i % colors.length] + '88';
+      ctx.beginPath();
+      ctx.moveTo(bx - 2, ly);
+      ctx.lineTo(bx + barW + 2, ly);
+      ctx.stroke();
+    }
+    ctx.setLineDash([]);
+
+    // legend
+    ctx.fillStyle = 'rgba(255,255,255,0.3)';
+    ctx.font = "9px 'Manrope', system-ui, sans-serif";
+    ctx.textAlign = 'left'; ctx.textBaseline = 'bottom';
+    ctx.setLineDash([5, 4]);
+    ctx.strokeStyle = 'rgba(255,255,255,0.4)';
+    ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.moveTo(px, y0 + h - 8); ctx.lineTo(px + 18, y0 + h - 8); ctx.stroke();
+    ctx.setLineDash([]);
+    ctx.fillText('— теор. вероятность', px + 22, y0 + h - 4);
+  }
+
+  /* ── convergence chart ─────────────────────── */
+
+  _drawConvergence(ctx, x0, y0, w, h) {
+    const pad = { l: 48, r: 16, t: 14, b: 20 };
+    const pw  = w - pad.l - pad.r;
+    const ph  = h - pad.t - pad.b;
+    const px  = x0 + pad.l, py = y0 + pad.t;
+
+    // bg
+    ctx.fillStyle = 'rgba(5,5,20,0.5)';
+    ctx.beginPath(); ctx.roundRect(x0 + 8, y0 + 2, w - 16, h - 4, 8); ctx.fill();
+
+    // title
+    ctx.fillStyle = 'rgba(255,255,255,0.35)';
+    ctx.font = "9px 'Manrope', system-ui, sans-serif";
+    ctx.textAlign = 'left'; ctx.textBaseline = 'top';
+    const trackLabel = this._trackKey;
+    ctx.fillText(`Сходимость частоты «${trackLabel}»`, px, y0 + 3);
+
+    // theoretical value
+    const theo = this._theoretical();
+    const tp   = theo[this._trackKey] || 0;
+
+    // y range
+    const yMin = Math.max(0, tp - 0.35);
+    const yMax = Math.min(1, tp + 0.35);
+    const yRange = yMax - yMin || 0.01;
+
+    // grid
+    ctx.strokeStyle = 'rgba(255,255,255,0.04)';
+    ctx.lineWidth = 0.5;
+    for (let i = 0; i <= 3; i++) {
+      const gy = py + ph * (i / 3);
+      ctx.beginPath(); ctx.moveTo(px, gy); ctx.lineTo(px + pw, gy); ctx.stroke();
+    }
+
+    // y labels
+    ctx.fillStyle = 'rgba(255,255,255,0.25)';
+    ctx.font = "8px 'Manrope', system-ui, sans-serif";
+    ctx.textAlign = 'right'; ctx.textBaseline = 'middle';
+    for (let i = 0; i <= 3; i++) {
+      const v = yMax - (i / 3) * yRange;
+      ctx.fillText(v.toFixed(2), px - 5, py + ph * (i / 3));
+    }
+
+    // theoretical dashed line
+    const theoY = py + ph * (1 - (tp - yMin) / yRange);
+    ctx.setLineDash([6, 4]);
+    ctx.strokeStyle = '#FFD166';
+    ctx.lineWidth = 1.2;
+    ctx.beginPath(); ctx.moveTo(px, theoY); ctx.lineTo(px + pw, theoY); ctx.stroke();
+    ctx.setLineDash([]);
+
+    // label for theoretical
+    ctx.fillStyle = '#FFD166';
+    ctx.font = "8px 'Manrope', system-ui, sans-serif";
+    ctx.textAlign = 'right'; ctx.textBaseline = 'bottom';
+    ctx.fillText('p=' + tp.toFixed(4), px + pw, theoY - 3);
+
+    // convergence line
+    const data = this._convHist;
+    if (data.length < 2) return;
+
+    ctx.beginPath();
+    ctx.strokeStyle = '#06D6E0';
+    ctx.lineWidth = 1.5;
+    for (let i = 0; i < data.length; i++) {
+      const lx = px + (i / (data.length - 1)) * pw;
+      const ly = py + ph * (1 - (data[i] - yMin) / yRange);
+      const cly = Math.max(py, Math.min(py + ph, ly));
+      i === 0 ? ctx.moveTo(lx, cly) : ctx.lineTo(lx, cly);
+    }
+    ctx.stroke();
+
+    // x label
+    ctx.fillStyle = 'rgba(255,255,255,0.25)';
+    ctx.font = "8px 'Manrope', system-ui, sans-serif";
+    ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+    ctx.fillText('номер испытания →', px + pw / 2, y0 + h - 14);
+  }
+
+  /* ── stats overlay ─────────────────────────── */
+
+  _drawStats(ctx, W) {
+    const info = this.info();
+    const px = 12, py = 10, pw = 170, ph = 72;
+
+    ctx.fillStyle = 'rgba(5,5,20,0.82)';
+    ctx.beginPath(); ctx.roundRect(px, py, pw, ph, 7); ctx.fill();
+    ctx.strokeStyle = 'rgba(255,255,255,0.07)'; ctx.lineWidth = 1; ctx.stroke();
+
+    ctx.textAlign = 'left'; ctx.textBaseline = 'top';
+    ctx.font = "10px 'Manrope', system-ui, sans-serif";
+    const lh = 15;
+
+    const modeLabel = { coin: 'Монета', dice: 'Кубик', dice2: '2 кубика' }[this.mode] || this.mode;
+    ctx.fillStyle = '#9B5DE5';
+    ctx.fillText(`Режим: ${modeLabel}`, px + 10, py + 8);
+
+    ctx.fillStyle = '#06D6E0';
+    ctx.fillText(`N = ${info.totalTrials}`, px + 10, py + 8 + lh);
+
+    ctx.fillStyle = '#7BF5A4';
+    ctx.fillText(`χ² = ${info.chiSquare}`, px + 10, py + 8 + lh * 2);
+
+    ctx.fillStyle = '#FFD166';
+    ctx.fillText(`max Δ = ${info.maxDeviation.toFixed(4)}`, px + 10, py + 8 + lh * 3);
+  }
+}
+
+if (typeof module !== 'undefined') module.exports = ProbabilitySim;
diff --git a/frontend/js/labs/projectile.js b/frontend/js/labs/projectile.js
new file mode 100644
index 0000000..d43ec9e
--- /dev/null
+++ b/frontend/js/labs/projectile.js
@@ -0,0 +1,1058 @@
+'use strict';
+
+/* ═══════════════════════════════════════════════════════════════════
+   ProjectileSim v2 — physics simulation
+   Features: air drag (RK4) · wind · bounce · speed multiplier
+             ghost trail comparison · velocity vector labels
+             range arrow · landing angle · canvas click play/pause
+   ═══════════════════════════════════════════════════════════════════ */
+
+class ProjectileSim {
+  constructor(canvas) {
+    this.c   = canvas;
+    this.ctx = canvas.getContext('2d');
+
+    /* ── physics params ── */
+    this.v0    = 20;
+    this.angle = 45;
+    this.h0    = 2;
+    this.g     = 9.81;
+
+    /* air resistance */
+    this.drag = false;
+    this.Cd   = 0.3;
+    this.mass = 1;   // kg
+
+    /* wind (m/s, positive = tailwind / right) */
+    this.wind = 0;
+
+    /* bounce */
+    this.bounce      = false;
+    this.restitution = 0.7;
+
+    /* animation speed multiplier */
+    this.speed = 1;
+
+    /* computed trajectory (null = use analytical) */
+    this._path   = null;   // [{x, y, vx, vy, t}]
+    this._pathTf = 0;
+
+    /* animation state */
+    this.t        = 0;
+    this.playing  = false;
+    this._raf     = null;
+    this._lastTs  = null;
+
+    /* visual effects */
+    this._trail       = [];
+    this._sparks      = [];
+    this._impactTs    = -999;
+    this._launchFlash = 0;
+    this._stars       = this._genStars(90);
+
+    /* ghost trails for comparison */
+    this._ghosts   = [];
+    this._ghostIdx = 0;
+    this._GHOST_COLORS = [
+      'rgba(255,214,102,.45)',
+      'rgba(6,214,224,.45)',
+      'rgba(123,245,164,.45)',
+      'rgba(255,140,66,.45)',
+    ];
+
+    this.onUpdate    = null;
+    this.onPlayPause = null;  // called by canvas click
+
+    /* hover inspector */
+    this._hover      = null;   // { t, s } | null
+    this._viewParams = null;   // coordinate transform params (set in draw)
+
+    canvas.addEventListener('click', () => {
+      if (this.onPlayPause) this.onPlayPause();
+    });
+    canvas.addEventListener('mousemove', e => this._onMouseMove(e));
+    canvas.addEventListener('mouseleave', () => this._onMouseLeave());
+
+    new ResizeObserver(() => { this.fit(); this.draw(); }).observe(canvas.parentElement);
+  }
+
+  /* ── public API ── */
+
+  fit() {
+    const dpr = window.devicePixelRatio || 1;
+    const r = this.c.parentElement.getBoundingClientRect();
+    const w = r.width || 600, h = r.height || 400;
+    this.c.width  = w * dpr;
+    this.c.height = h * dpr;
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this._cw = w; this._ch = h;
+  }
+
+  setParams({ v0, angle, h0, g, drag, Cd, mass, wind, bounce, restitution } = {}) {
+    if (v0          !== undefined) this.v0          = +v0;
+    if (angle       !== undefined) this.angle       = +angle;
+    if (h0          !== undefined) this.h0          = +h0;
+    if (g           !== undefined) this.g           = +g;
+    if (drag        !== undefined) this.drag        = !!drag;
+    if (Cd          !== undefined) this.Cd          = +Cd;
+    if (mass        !== undefined) this.mass        = Math.max(0.1, +mass);
+    if (wind        !== undefined) this.wind        = +wind;
+    if (bounce      !== undefined) this.bounce      = !!bounce;
+    if (restitution !== undefined) this.restitution = Math.max(0, Math.min(1, +restitution));
+    this._computePath();
+    this._resetFX();
+    this.draw();
+    this._emit();
+  }
+
+  setSpeed(s) { this.speed = +s; }
+
+  play() {
+    if (this.playing) return;
+    if (this._pathTf > 0 && this.t >= this._pathTf) this._resetFX();
+    this._launchFlash = 1;
+    this.playing  = true;
+    this._lastTs  = null;
+    this._tick();
+  }
+
+  pause() {
+    this.playing = false;
+    if (this._raf) { cancelAnimationFrame(this._raf); this._raf = null; }
+  }
+
+  reset() {
+    this.pause();
+    this._resetFX();
+    this.draw();
+    this._emit();
+  }
+
+  /* ghost trails */
+  saveGhost() {
+    if (this._pathTf <= 0) return;
+    const points = [];
+    if (this._path) {
+      for (const p of this._path) points.push({ x: p.x, y: p.y });
+    } else {
+      const tf = this._pathTf;
+      for (let i = 0; i <= 200; i++) {
+        const s = this._stateAnalytical((i / 200) * tf);
+        points.push({ x: s.x, y: s.y });
+      }
+    }
+    const st = this.stats();
+    const windStr = this.wind !== 0 ? ` <svg class="ic" viewBox="0 0 24 24"><path d="M17.7 7.7a2.5 2.5 0 1 1 1.8 4.3H2"/><path d="M9.6 4.6A2 2 0 1 1 11 8H2"/><path d="M12.6 19.4A2 2 0 1 0 14 16H2"/></svg>${this.wind > 0 ? '+' : ''}${this.wind}` : '';
+    const label = `${this.angle}° ${this.v0}м/с${windStr}${this.drag ? ' +drag' : ''}${this.bounce ? ' <svg class="ic" viewBox="0 0 24 24"><polyline points="9 14 4 9 9 4"/><path d="M20 20v-7a4 4 0 0 0-4-4H4"/></svg>' : ''}`;
+    const color = this._GHOST_COLORS[this._ghostIdx % this._GHOST_COLORS.length];
+    this._ghostIdx++;
+    this._ghosts.push({ points, color, label, range: st.range, hMax: st.hMax });
+    if (this._ghosts.length > 4) this._ghosts.shift();
+    this.draw();
+  }
+
+  clearGhosts() {
+    this._ghosts = [];
+    this._ghostIdx = 0;
+    this.draw();
+  }
+
+  /* ── physics ── */
+
+  /* pure analytical solution (no drag/wind/bounce) */
+  _stateAnalytical(t) {
+    const rad = this.angle * Math.PI / 180;
+    const vx  = this.v0 * Math.cos(rad);
+    const vy0 = this.v0 * Math.sin(rad);
+    return {
+      x:  vx * t,
+      y:  this.h0 + vy0 * t - 0.5 * this.g * t * t,
+      vx,
+      vy: vy0 - this.g * t,
+    };
+  }
+
+  /* analytical flight time (for reference / no-effect comparison) */
+  _tFlightAnalytical() {
+    const rad  = this.angle * Math.PI / 180;
+    const vy0  = this.v0 * Math.sin(rad);
+    const disc = vy0 * vy0 + 2 * this.g * this.h0;
+    if (disc < 0) return 0;
+    return Math.max(0, (vy0 + Math.sqrt(disc)) / this.g);
+  }
+
+  _needsNumerical() {
+    return this.drag || this.wind !== 0 || this.bounce;
+  }
+
+  /* RK4 integration — handles drag, wind, bounce */
+  _computePath() {
+    if (!this._needsNumerical()) {
+      this._path   = null;
+      this._pathTf = this._tFlightAnalytical();
+      return;
+    }
+
+    const rho = 1.225, A = 0.00785;  // air density, ball cross-section
+    const k   = this.drag ? 0.5 * this.Cd * rho * A / Math.max(0.1, this.mass) : 0;
+    const g   = this.g;
+    const W   = this.wind;
+    const e   = this.restitution;
+    const maxBounces = this.bounce ? 7 : 0;
+
+    const rad = this.angle * Math.PI / 180;
+    let x = 0, y = this.h0;
+    let vx = this.v0 * Math.cos(rad);
+    let vy = this.v0 * Math.sin(rad);
+    const dt = 0.005;
+    const path = [{ x, y, vx, vy, t: 0 }];
+    let bounceCount = 0;
+
+    const deriv = (sx, sy, svx, svy) => {
+      const rvx = svx - W;  // velocity relative to wind
+      const rvy = svy;
+      const speed = Math.sqrt(rvx * rvx + rvy * rvy);
+      const dragF = speed > 0 ? k * speed : 0;
+      // wind-only pseudo-force when drag is off (simplified model)
+      const windAcc = (!this.drag && W !== 0) ? W * 0.05 : 0;
+      return {
+        dx:  svx,
+        dy:  svy,
+        dvx: -dragF * rvx + windAcc,
+        dvy: -g - dragF * rvy,
+      };
+    };
+
+    for (let step = 0; step < 200000; step++) {
+      const k1 = deriv(x, y, vx, vy);
+      const k2 = deriv(x + k1.dx * dt / 2, y + k1.dy * dt / 2, vx + k1.dvx * dt / 2, vy + k1.dvy * dt / 2);
+      const k3 = deriv(x + k2.dx * dt / 2, y + k2.dy * dt / 2, vx + k2.dvx * dt / 2, vy + k2.dvy * dt / 2);
+      const k4 = deriv(x + k3.dx * dt, y + k3.dy * dt, vx + k3.dvx * dt, vy + k3.dvy * dt);
+
+      x  += (k1.dx  + 2 * k2.dx  + 2 * k3.dx  + k4.dx)  * dt / 6;
+      y  += (k1.dy  + 2 * k2.dy  + 2 * k3.dy  + k4.dy)  * dt / 6;
+      vx += (k1.dvx + 2 * k2.dvx + 2 * k3.dvx + k4.dvx) * dt / 6;
+      vy += (k1.dvy + 2 * k2.dvy + 2 * k3.dvy + k4.dvy) * dt / 6;
+      const t = (step + 1) * dt;
+
+      if (y <= 0) {
+        const prev = path[path.length - 1];
+        if (prev && prev.y > 0) {
+          const frac = prev.y / (prev.y - y);
+          const lx  = prev.x  + (x  - prev.x)  * frac;
+          const lvx = prev.vx + (vx - prev.vx) * frac;
+          const lvy = prev.vy + (vy - prev.vy) * frac;
+          const lt  = prev.t  + dt * frac;
+          path.push({ x: lx, y: 0, vx: lvx, vy: lvy, t: lt });
+
+          if (this.bounce && bounceCount < maxBounces && Math.abs(lvy) > 0.4) {
+            vy = -e * lvy;
+            vx = lvx * (1 - 0.04);  // small horizontal friction
+            y  = 0.001;
+            x  = lx;
+            bounceCount++;
+            continue;
+          }
+        }
+        break;
+      }
+
+      path.push({ x, y, vx, vy, t });
+    }
+
+    this._path   = path;
+    this._pathTf = path[path.length - 1].t;
+  }
+
+  _pathStateAt(t) {
+    const path = this._path;
+    if (!path || path.length < 2) return { x: 0, y: this.h0, vx: 0, vy: 0 };
+    if (t <= 0) return path[0];
+    if (t >= this._pathTf) return path[path.length - 1];
+
+    let lo = 0, hi = path.length - 1;
+    while (lo < hi - 1) {
+      const mid = (lo + hi) >> 1;
+      if (path[mid].t <= t) lo = mid; else hi = mid;
+    }
+    const a = path[lo], b = path[hi];
+    const frac = (t - a.t) / (b.t - a.t);
+    return {
+      x:  a.x  + (b.x  - a.x)  * frac,
+      y:  a.y  + (b.y  - a.y)  * frac,
+      vx: a.vx + (b.vx - a.vx) * frac,
+      vy: a.vy + (b.vy - a.vy) * frac,
+    };
+  }
+
+  _curState(t) {
+    return this._path ? this._pathStateAt(t) : this._stateAnalytical(t);
+  }
+
+  _curTFlight() { return this._pathTf; }
+
+  stats() {
+    const tf  = this._pathTf;
+    const end = this._curState(tf);
+
+    let hMax = this.h0;
+    if (this._path) {
+      for (const p of this._path) if (p.y > hMax) hMax = p.y;
+    } else {
+      const rad = this.angle * Math.PI / 180;
+      const vy0 = this.v0 * Math.sin(rad);
+      const tMax = Math.max(0, vy0 / this.g);
+      hMax = Math.max(this.h0, this.h0 + vy0 * tMax - 0.5 * this.g * tMax * tMax);
+    }
+
+    const range     = Math.max(0, end.x);
+    const vLand     = Math.sqrt(end.vx ** 2 + end.vy ** 2);
+    const landAngle = vLand > 0.01
+      ? Math.abs(Math.atan2(Math.abs(end.vy), Math.abs(end.vx)) * 180 / Math.PI)
+      : 0;
+
+    // range compared to pure analytical (no drag/wind/bounce)
+    let rangeLoss = 0;
+    if (this._needsNumerical()) {
+      const tfND = this._tFlightAnalytical();
+      const endND = this._stateAnalytical(tfND);
+      const rangeND = Math.max(0, endND.x);
+      if (rangeND > 0.1) rangeLoss = Math.round((range / rangeND - 1) * 100);
+    }
+
+    return {
+      tf, hMax, range, vLand, rangeLoss, landAngle,
+      t:        this.t,
+      progress: tf > 0 ? Math.min(1, this.t / tf) : 0,
+      hasMod:   this._needsNumerical(),
+    };
+  }
+
+  /* ── animation loop ── */
+
+  _tick() {
+    if (!this.playing) return;
+    this._raf = requestAnimationFrame(ts => {
+      if (!this.playing) return;
+      if (this._lastTs === null) this._lastTs = ts;
+      const rawDt = Math.min((ts - this._lastTs) / 1000, 0.05);
+      this._lastTs = ts;
+
+      this._launchFlash = Math.max(0, this._launchFlash - rawDt * 2.5);
+
+      const cur = this._curState(this.t);
+      this._trail.push({ mx: cur.x, my: cur.y });
+      if (this._trail.length > 80) this._trail.shift();
+
+      this.t += rawDt * this.speed;
+      const tf = this._curTFlight();
+      if (this.t >= tf) {
+        this.t    = tf;
+        this.playing = false;
+        this._triggerImpact();
+      }
+      this.draw();
+      this._emit();
+      if (this.playing) this._tick();
+    });
+  }
+
+  _triggerImpact() {
+    const end = this._curState(this._curTFlight());
+    this._impactTs = performance.now();
+    this._sparks = Array.from({ length: 18 }, (_, i) => {
+      const ang = (i / 18) * Math.PI * 2 + Math.random() * 0.3;
+      const spd = 40 + Math.random() * 80;
+      return { ang, spd, mx: end.x };
+    });
+    this._tickFX();
+  }
+
+  _tickFX() {
+    const elapsed = (performance.now() - this._impactTs) / 1000;
+    if (elapsed < 1.8) {
+      this.draw(); this._emit();
+      requestAnimationFrame(() => this._tickFX());
+    } else {
+      this._sparks = [];
+      this.draw(); this._emit();
+    }
+  }
+
+  _resetFX() {
+    this.t            = 0;
+    this._trail       = [];
+    this._sparks      = [];
+    this._impactTs    = -999;
+    this._launchFlash = 0;
+    this._computePath();
+  }
+
+  _emit() { if (this.onUpdate) this.onUpdate(this.stats()); }
+
+  /* ── stars ── */
+
+  _genStars(n) {
+    return Array.from({ length: n }, () => ({
+      rx: Math.random(), ry: Math.random(),
+      r:  Math.random() * 1.1 + 0.2,
+      a:  Math.random() * 0.55 + 0.15,
+    }));
+  }
+
+  /* ── main render ── */
+
+  draw() {
+    const W = this._cw || this.c.width, H = this._ch || this.c.height;
+    if (!W || !H) return;
+    const ctx = this.ctx;
+    const tf  = this._curTFlight();
+    const st  = this.stats();
+
+    const PL = 54, PR = 20, PT = 26, PB = 44;
+    const pw = W - PL - PR, ph = H - PT - PB;
+
+    let maxRange = Math.max(st.range, 1);
+    let maxH     = Math.max(st.hMax, 1);
+    for (const gh of this._ghosts) {
+      if (gh.range > maxRange) maxRange = gh.range;
+      if (gh.hMax  > maxH)     maxH     = gh.hMax;
+    }
+
+    const xMax = maxRange * 1.15;
+    const yMax = maxH * 1.35;
+    const scX  = pw / xMax, scY = ph / yMax;
+    const tpx  = mx => PL + mx * scX;
+    const tpy  = my => H - PB - my * scY;
+    const gy   = tpy(0);
+
+    /* store for hover inspector */
+    this._viewParams = { xMax, yMax, PL, PR, PT, PB, W, H };
+
+    /* ── 1. Sky ── */
+    const sky = ctx.createLinearGradient(0, 0, 0, gy);
+    sky.addColorStop(0,   '#05050f');
+    sky.addColorStop(0.6, '#0d0d2a');
+    sky.addColorStop(1,   '#141430');
+    ctx.fillStyle = sky;
+    ctx.fillRect(0, 0, W, gy);
+
+    /* ── 2. Stars ── */
+    for (const s of this._stars) {
+      const sx = PL + s.rx * pw, sy = PT + s.ry * (gy - PT - 10);
+      ctx.fillStyle = `rgba(255,255,255,${s.a})`;
+      ctx.beginPath(); ctx.arc(sx, sy, s.r, 0, Math.PI * 2); ctx.fill();
+    }
+
+    /* ── 2.5. Wind streaks ── */
+    if (this.wind !== 0) {
+      this._drawWind(ctx, PL, PT, pw, gy - PT);
+    }
+
+    /* ── 3. Ground ── */
+    const gnd = ctx.createLinearGradient(0, gy, 0, H - PB);
+    gnd.addColorStop(0, 'rgba(22,101,52,.35)');
+    gnd.addColorStop(1, 'rgba(15,23,42,.9)');
+    ctx.fillStyle = gnd;
+    ctx.fillRect(PL, gy, pw, H - PB - gy);
+
+    const gl = ctx.createLinearGradient(PL, 0, PL + pw, 0);
+    gl.addColorStop(0,    'rgba(34,197,94,.2)');
+    gl.addColorStop(0.15, 'rgba(74,222,128,.7)');
+    gl.addColorStop(1,    'rgba(34,197,94,.3)');
+    ctx.strokeStyle = gl; ctx.lineWidth = 2.5;
+    ctx.beginPath(); ctx.moveTo(PL, gy); ctx.lineTo(PL + pw, gy); ctx.stroke();
+
+    /* ── 4. Margin fills ── */
+    ctx.fillStyle = '#0A0A14';
+    ctx.fillRect(0, H - PB, W, PB);
+    ctx.fillRect(0, 0, PL, H);
+    ctx.fillRect(W - PR, 0, PR, H);
+
+    /* ── 5. Grid ── */
+    const stX = _projNiceStep(xMax, 6), stY = _projNiceStep(yMax, 5);
+    ctx.strokeStyle = 'rgba(255,255,255,.04)'; ctx.lineWidth = 1;
+    for (let x = stX; x < xMax; x += stX) {
+      ctx.beginPath(); ctx.moveTo(tpx(x), PT); ctx.lineTo(tpx(x), H - PB); ctx.stroke();
+    }
+    for (let y = stY; y < yMax; y += stY) {
+      ctx.beginPath(); ctx.moveTo(PL, tpy(y)); ctx.lineTo(W - PR, tpy(y)); ctx.stroke();
+    }
+
+    /* ── 6. Axes + labels ── */
+    ctx.strokeStyle = 'rgba(255,255,255,.2)'; ctx.lineWidth = 1.5;
+    ctx.beginPath(); ctx.moveTo(PL, PT); ctx.lineTo(PL, H - PB); ctx.stroke();
+    ctx.beginPath(); ctx.moveTo(PL, gy); ctx.lineTo(W - PR, gy); ctx.stroke();
+
+    ctx.font = '10px Manrope, sans-serif';
+    ctx.fillStyle = 'rgba(255,255,255,.28)';
+    ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+    for (let x = stX; x < xMax * 0.97; x += stX)
+      ctx.fillText(_projFmt(x) + ' м', tpx(x), gy + 7);
+    ctx.textAlign = 'right'; ctx.textBaseline = 'middle';
+    for (let y = stY; y < yMax * 0.97; y += stY)
+      ctx.fillText(_projFmt(y) + ' м', PL - 6, tpy(y));
+
+    /* ── 6.5. Ghost trails ── */
+    for (const gh of this._ghosts) {
+      ctx.strokeStyle = gh.color; ctx.lineWidth = 2;
+      ctx.setLineDash([6, 4]);
+      ctx.beginPath();
+      for (let i = 0; i < gh.points.length; i++) {
+        const p = gh.points[i];
+        i === 0 ? ctx.moveTo(tpx(p.x), tpy(p.y)) : ctx.lineTo(tpx(p.x), tpy(p.y));
+      }
+      ctx.stroke(); ctx.setLineDash([]);
+
+      const last = gh.points[gh.points.length - 1];
+      const lx = tpx(last.x), ly = tpy(0);
+      ctx.strokeStyle = gh.color; ctx.lineWidth = 1.5;
+      ctx.beginPath();
+      ctx.moveTo(lx - 5, ly - 5); ctx.lineTo(lx + 5, ly + 5);
+      ctx.moveTo(lx + 5, ly - 5); ctx.lineTo(lx - 5, ly + 5);
+      ctx.stroke();
+      ctx.fillStyle = gh.color;
+      ctx.font = '9px Manrope'; ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+      ctx.fillText(gh.label, lx, ly + 10);
+    }
+
+    /* ── 7. Launch platform ── */
+    if (this.h0 > 0.2) {
+      const px0 = tpx(0), py0 = tpy(0), pyH = tpy(this.h0);
+      ctx.strokeStyle = 'rgba(255,200,60,.35)'; ctx.lineWidth = 1;
+      ctx.setLineDash([4, 4]);
+      ctx.beginPath(); ctx.moveTo(px0, py0); ctx.lineTo(px0, pyH); ctx.stroke();
+      ctx.setLineDash([]);
+      ctx.fillStyle = 'rgba(255,200,60,.25)';
+      ctx.fillRect(px0 - 12, pyH, 28, 4);
+      ctx.fillStyle = 'rgba(255,200,60,.5)';
+      ctx.font = '9px Manrope'; ctx.textAlign = 'right'; ctx.textBaseline = 'middle';
+      ctx.fillText(_projFmt(this.h0) + ' м', px0 - 14, pyH);
+    }
+
+    /* ── 8. Reference / full trajectories ── */
+    if (tf > 0) {
+      // analytical reference (always shown as faint dashed)
+      const noDragTf = this._tFlightAnalytical();
+      ctx.strokeStyle = 'rgba(155,93,229,.22)';
+      ctx.lineWidth = 1.5; ctx.setLineDash([7, 5]);
+      ctx.beginPath();
+      for (let i = 0; i <= 300; i++) {
+        const s = this._stateAnalytical((i / 300) * noDragTf);
+        i === 0 ? ctx.moveTo(tpx(s.x), tpy(s.y)) : ctx.lineTo(tpx(s.x), tpy(s.y));
+      }
+      ctx.stroke(); ctx.setLineDash([]);
+
+      // numerical path preview (if active)
+      if (this._path && this._path.length > 2) {
+        ctx.strokeStyle = this.drag ? 'rgba(239,71,111,.3)' : 'rgba(255,200,60,.35)';
+        ctx.lineWidth = 1.5; ctx.setLineDash([5, 4]);
+        ctx.beginPath();
+        const step = Math.max(1, Math.floor(this._path.length / 300));
+        for (let i = 0; i < this._path.length; i += step) {
+          const p = this._path[i];
+          i === 0 ? ctx.moveTo(tpx(p.x), tpy(p.y)) : ctx.lineTo(tpx(p.x), tpy(p.y));
+        }
+        const last = this._path[this._path.length - 1];
+        ctx.lineTo(tpx(last.x), tpy(last.y));
+        ctx.stroke(); ctx.setLineDash([]);
+      }
+    }
+
+    /* ── 9. Flown path ── */
+    if (this.t > 0 && tf > 0) {
+      const s0 = this._curState(0), s1 = this._curState(Math.min(this.t, tf));
+      const grad = ctx.createLinearGradient(tpx(s0.x), tpy(s0.y), tpx(s1.x), tpy(s1.y));
+      grad.addColorStop(0,   'rgba(155,93,229,.4)');
+      grad.addColorStop(0.5, '#9B5DE5');
+      grad.addColorStop(1,   '#F15BB5');
+      ctx.strokeStyle = grad; ctx.lineWidth = 3;
+      ctx.beginPath();
+
+      if (this._path) {
+        let first = true;
+        for (const p of this._path) {
+          if (p.t > this.t) break;
+          first ? (ctx.moveTo(tpx(p.x), tpy(p.y)), first = false)
+                : ctx.lineTo(tpx(p.x), tpy(p.y));
+        }
+        const cur = this._pathStateAt(this.t);
+        ctx.lineTo(tpx(cur.x), tpy(Math.max(0, cur.y)));
+      } else {
+        const steps = Math.max(2, Math.ceil(st.progress * 300));
+        for (let i = 0; i <= steps; i++) {
+          const s = this._stateAnalytical((i / 300) * tf);
+          i === 0 ? ctx.moveTo(tpx(s.x), tpy(s.y)) : ctx.lineTo(tpx(s.x), tpy(s.y));
+        }
+      }
+      ctx.stroke();
+    }
+
+    /* ── 10. Trail dots ── */
+    for (let i = 0; i < this._trail.length; i++) {
+      const frac = i / this._trail.length;
+      const tr = this._trail[i];
+      ctx.fillStyle = `rgba(241,91,181,${frac * 0.55})`;
+      ctx.beginPath(); ctx.arc(tpx(tr.mx), tpy(tr.my), frac * 5, 0, Math.PI * 2); ctx.fill();
+    }
+
+    /* ── 11. Max height marker ── */
+    if (st.hMax > this.h0 + 0.2 && tf > 0) {
+      let mpx, mpy;
+      if (this._path) {
+        let best = this._path[0];
+        for (const p of this._path) if (p.y > best.y) best = p;
+        mpx = tpx(best.x); mpy = tpy(best.y);
+      } else {
+        const rad = this.angle * Math.PI / 180;
+        const vy0 = this.v0 * Math.sin(rad);
+        const tPk = vy0 / this.g;
+        const pk  = this._stateAnalytical(Math.max(0, tPk));
+        mpx = tpx(pk.x); mpy = tpy(pk.y);
+      }
+      ctx.strokeStyle = 'rgba(255,200,60,.3)'; ctx.lineWidth = 1;
+      ctx.setLineDash([4, 4]);
+      ctx.beginPath(); ctx.moveTo(PL, mpy); ctx.lineTo(mpx, mpy); ctx.stroke();
+      ctx.beginPath(); ctx.moveTo(mpx, mpy); ctx.lineTo(mpx, gy); ctx.stroke();
+      ctx.setLineDash([]);
+      ctx.fillStyle = 'rgba(255,200,60,.7)';
+      ctx.beginPath(); ctx.arc(mpx, mpy, 4, 0, Math.PI * 2); ctx.fill();
+      ctx.fillStyle = 'rgba(255,200,60,.55)';
+      ctx.font = '10px Manrope'; ctx.textAlign = 'right'; ctx.textBaseline = 'middle';
+      ctx.fillText('↑ ' + _projFmt(st.hMax) + ' м', PL - 6, mpy);
+    }
+
+    /* ── 12. Landing marker + range arrow ── */
+    if (tf > 0) {
+      const lx = tpx(st.range), ly = tpy(0);
+      const elapsed = (performance.now() - this._impactTs) / 1000;
+      const pulse   = (elapsed >= 0 && elapsed < 10) ? 0.7 + 0.3 * Math.sin(elapsed * 8) : 0.6;
+
+      // X mark
+      ctx.strokeStyle = `rgba(6,214,224,${pulse})`; ctx.lineWidth = 2;
+      const ms = 7;
+      ctx.beginPath();
+      ctx.moveTo(lx - ms, ly - ms); ctx.lineTo(lx + ms, ly + ms);
+      ctx.moveTo(lx + ms, ly - ms); ctx.lineTo(lx - ms, ly + ms);
+      ctx.stroke();
+      ctx.fillStyle = `rgba(6,214,224,${pulse * 0.8})`;
+      ctx.font = 'bold 10px Manrope'; ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+      ctx.fillText(_projFmt(st.range) + ' м', lx, ly + 9);
+
+      // <svg class="ic" viewBox="0 0 24 24"><line x1="3" y1="12" x2="21" y2="12"/><polyline points="8 17 3 12 8 7"/><polyline points="16 7 21 12 16 17"/></svg> range arrow
+      if (st.range > 0.5 && lx > PL + 30) {
+        const ay = gy + 20;
+        ctx.strokeStyle = 'rgba(6,214,224,.3)'; ctx.lineWidth = 1;
+        ctx.beginPath(); ctx.moveTo(PL + 3, ay); ctx.lineTo(lx - 3, ay); ctx.stroke();
+        ctx.fillStyle = 'rgba(6,214,224,.3)';
+        ctx.beginPath(); ctx.moveTo(PL + 3, ay); ctx.lineTo(PL + 9, ay - 3); ctx.lineTo(PL + 9, ay + 3); ctx.closePath(); ctx.fill();
+        ctx.beginPath(); ctx.moveTo(lx - 3, ay); ctx.lineTo(lx - 9, ay - 3); ctx.lineTo(lx - 9, ay + 3); ctx.closePath(); ctx.fill();
+      }
+
+      if (st.hasMod && st.rangeLoss !== 0) {
+        const sign = st.rangeLoss > 0 ? '+' : '';
+        ctx.fillStyle = st.rangeLoss < 0 ? 'rgba(239,71,111,.7)' : 'rgba(123,245,164,.7)';
+        ctx.font = 'bold 9px Manrope'; ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+        ctx.fillText(sign + st.rangeLoss + '% от идеала', lx, ly + 22);
+      }
+    }
+
+    /* ── 13. Impact effects ── */
+    const impactElapsed = (performance.now() - this._impactTs) / 1000;
+    if (impactElapsed >= 0 && impactElapsed < 1.5 && tf > 0) {
+      const end = this._curState(tf);
+      const ix  = tpx(end.x), iy = tpy(0);
+      const p   = impactElapsed / 1.5;
+
+      for (let r = 0; r < 3; r++) {
+        const rp = Math.max(0, impactElapsed - r * 0.12);
+        if (rp <= 0) continue;
+        const rr = rp * 55 * (1 + r * 0.3);
+        const ra = Math.max(0, (0.5 - rp * 0.5) * (1 - r * 0.2));
+        ctx.strokeStyle = `rgba(6,214,224,${ra})`; ctx.lineWidth = 2 - r * 0.4;
+        ctx.beginPath(); ctx.ellipse(ix, iy, rr, rr * 0.28, 0, 0, Math.PI * 2); ctx.stroke();
+      }
+      if (impactElapsed < 0.6) {
+        const ca = (0.6 - impactElapsed) / 0.6;
+        const cg = ctx.createRadialGradient(ix, iy, 0, ix, iy, 30 + impactElapsed * 40);
+        cg.addColorStop(0,   `rgba(255,230,100,${ca * 0.7})`);
+        cg.addColorStop(0.4, `rgba(241,91,181,${ca * 0.4})`);
+        cg.addColorStop(1,   'transparent');
+        ctx.fillStyle = cg;
+        ctx.beginPath(); ctx.arc(ix, iy, 60, 0, Math.PI * 2); ctx.fill();
+      }
+      for (const sp of this._sparks) {
+        if (impactElapsed > 1.0) continue;
+        const sa  = Math.max(0, 1 - impactElapsed * 1.4);
+        const spd = sp.spd * impactElapsed;
+        const ex  = ix + Math.cos(sp.ang) * spd;
+        const ey  = iy + Math.sin(sp.ang) * spd * 0.4 - impactElapsed * impactElapsed * 120;
+        ctx.strokeStyle = `rgba(255,220,80,${sa})`; ctx.lineWidth = 1.5;
+        ctx.beginPath();
+        ctx.moveTo(ix + Math.cos(sp.ang) * spd * 0.6, iy + Math.sin(sp.ang) * spd * 0.6 * 0.4);
+        ctx.lineTo(ex, ey);
+        ctx.stroke();
+      }
+      const swR = impactElapsed * 120;
+      const swa = Math.max(0, 0.35 - p * 0.35);
+      ctx.strokeStyle = `rgba(255,255,255,${swa})`; ctx.lineWidth = 1;
+      ctx.beginPath(); ctx.moveTo(ix - swR, iy); ctx.lineTo(ix + swR, iy); ctx.stroke();
+    }
+
+    /* ── 14. Ball ── */
+    const cur   = this._curState(Math.min(this.t, tf));
+    const bx    = tpx(cur.x), by = tpy(Math.max(0, cur.y));
+    const speed = Math.sqrt(cur.vx ** 2 + cur.vy ** 2);
+
+    // shadow
+    const shadowX = tpx(cur.x);
+    const shadowA = Math.max(0, 0.25 - (by - gy) / (ph * 2));
+    if (shadowA > 0) {
+      const sh = ctx.createRadialGradient(shadowX, gy + 2, 0, shadowX, gy + 2, 18);
+      sh.addColorStop(0, `rgba(0,0,0,${shadowA})`);
+      sh.addColorStop(1, 'transparent');
+      ctx.fillStyle = sh;
+      ctx.beginPath(); ctx.ellipse(shadowX, gy + 3, 18, 5, 0, 0, Math.PI * 2); ctx.fill();
+    }
+
+    // glow
+    const glo = ctx.createRadialGradient(bx, by, 2, bx, by, 30);
+    glo.addColorStop(0,   'rgba(241,91,181,.5)');
+    glo.addColorStop(0.4, 'rgba(155,93,229,.25)');
+    glo.addColorStop(1,   'transparent');
+    ctx.fillStyle = glo;
+    ctx.beginPath(); ctx.arc(bx, by, 30, 0, Math.PI * 2); ctx.fill();
+
+    // ball body
+    const ballGrad = ctx.createRadialGradient(bx - 3, by - 3, 1, bx, by, 10);
+    ballGrad.addColorStop(0,    '#ffffff');
+    ballGrad.addColorStop(0.25, '#F15BB5');
+    ballGrad.addColorStop(1,    '#7c3aed');
+    ctx.fillStyle = ballGrad;
+    ctx.beginPath(); ctx.arc(bx, by, 10, 0, Math.PI * 2); ctx.fill();
+    ctx.strokeStyle = 'rgba(255,255,255,.6)'; ctx.lineWidth = 1.5; ctx.stroke();
+
+    /* ── 15. Velocity arrows + labels ── */
+    if (speed > 0.3 && this.t < tf) {
+      const VX_LEN = Math.min(55, 50 * Math.abs(cur.vx) / Math.max(1, this.v0));
+      const VY_LEN = Math.min(55, 50 * Math.abs(cur.vy) / Math.max(1, this.v0));
+
+      if (Math.abs(cur.vx) > 0.2) {
+        _projArrow(ctx, bx, by, bx + VX_LEN, by, '#06D6E0', 2);
+        ctx.fillStyle = '#06D6E0'; ctx.font = 'bold 9px Manrope';
+        ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+        ctx.fillText(_projFmt(Math.abs(cur.vx)) + ' м/с', bx + VX_LEN / 2, by + 7);
+      }
+
+      if (Math.abs(cur.vy) > 0.2) {
+        const vyDir  = cur.vy > 0 ? -1 : 1;
+        const vyCol  = cur.vy > 0 ? '#9B5DE5' : '#F15BB5';
+        _projArrow(ctx, bx, by, bx, by + vyDir * VY_LEN, vyCol, 2);
+        ctx.fillStyle = vyCol; ctx.font = 'bold 9px Manrope';
+        ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
+        ctx.fillText(_projFmt(Math.abs(cur.vy)) + ' м/с', bx + 6, by + vyDir * VY_LEN / 2);
+      }
+
+      // total velocity arrow
+      const vLen = 48 * (speed / Math.max(1, this.v0));
+      _projArrow(ctx, bx, by,
+        bx + (cur.vx / speed) * vLen,
+        by - (cur.vy / speed) * vLen,
+        '#ffffff', 2.5);
+    }
+
+    /* ── 16. Launch flash ── */
+    if (this._launchFlash > 0) {
+      const f   = this._launchFlash;
+      const rad = this.angle * Math.PI / 180;
+      for (let i = 0; i < 10; i++) {
+        const a   = rad + (i / 10) * Math.PI * 2;
+        const len = f * (20 + i % 3 * 15);
+        ctx.strokeStyle = `rgba(255,230,100,${f * 0.8})`; ctx.lineWidth = 1.5;
+        ctx.beginPath();
+        ctx.moveTo(bx + Math.cos(a) * 12, by - Math.sin(a) * 12);
+        ctx.lineTo(bx + Math.cos(a) * len, by - Math.sin(a) * len);
+        ctx.stroke();
+      }
+      const halo = ctx.createRadialGradient(bx, by, 0, bx, by, f * 40);
+      halo.addColorStop(0,   `rgba(255,230,100,${f * 0.5})`);
+      halo.addColorStop(0.5, `rgba(241,91,181,${f * 0.2})`);
+      halo.addColorStop(1,   'transparent');
+      ctx.fillStyle = halo;
+      ctx.beginPath(); ctx.arc(bx, by, f * 40, 0, Math.PI * 2); ctx.fill();
+    }
+
+    /* ── 17. Launch angle arc (idle) ── */
+    if (this.t < 0.04 && this.angle > 2 && !this.playing) {
+      const rad = this.angle * Math.PI / 180;
+      ctx.strokeStyle = 'rgba(255,200,60,.45)'; ctx.lineWidth = 1.5;
+      ctx.beginPath(); ctx.arc(bx, by, 34, -rad, 0); ctx.stroke();
+      const ivLen = Math.min(70, 30 + this.v0 * 0.8);
+      ctx.strokeStyle = 'rgba(255,255,255,.35)'; ctx.lineWidth = 1.5;
+      ctx.setLineDash([5, 4]);
+      ctx.beginPath();
+      ctx.moveTo(bx, by);
+      ctx.lineTo(bx + Math.cos(rad) * ivLen, by - Math.sin(rad) * ivLen);
+      ctx.stroke(); ctx.setLineDash([]);
+      ctx.fillStyle = 'rgba(255,200,60,.75)';
+      ctx.font = 'bold 11px Manrope'; ctx.textAlign = 'left'; ctx.textBaseline = 'bottom';
+      ctx.fillText(this.angle + '°', bx + 38, by - 2);
+    }
+
+    /* ── 18. Info badges (top-right) ── */
+    let bRight = W - PR - 8;
+    if (this.drag) {
+      this._drawBadge(ctx, bRight, PT + 6, 'Cd=' + this.Cd.toFixed(2) + ' m=' + this.mass + 'кг', 'rgba(239,71,111,.15)', 'rgba(239,71,111,.75)');
+      bRight -= 130;
+    }
+    if (this.wind !== 0) {
+      const dir = this.wind > 0 ? '<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>' : '<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>';
+      this._drawBadge(ctx, bRight, PT + 6, dir + ' ветер ' + Math.abs(this.wind) + 'м/с', 'rgba(6,214,224,.12)', 'rgba(6,214,224,.8)');
+      bRight -= 130;
+    }
+    if (this.bounce) {
+      this._drawBadge(ctx, bRight, PT + 6, '<svg class="ic" viewBox="0 0 24 24"><polyline points="9 14 4 9 9 4"/><path d="M20 20v-7a4 4 0 0 0-4-4H4"/></svg> e=' + this.restitution.toFixed(2), 'rgba(123,245,164,.1)', 'rgba(123,245,164,.75)');
+    }
+
+    /* speed badge bottom-right */
+    if (this.speed !== 1) {
+      this._drawBadge(ctx, W - PR - 8, H - PB - 28, '×' + this.speed, 'rgba(255,214,102,.12)', 'rgba(255,214,102,.8)');
+    }
+
+    /* ── 19. Hover inspector ── */
+    if (!this.playing && this._hover) {
+      this._drawInspector(ctx, tpx, tpy, PL, gy, W, H, PB, PT);
+    }
+  }
+
+  /* ── hover inspector ── */
+
+  _onMouseMove(e) {
+    if (this.playing) { this._hover = null; return; }
+    const tf = this._curTFlight();
+    if (tf <= 0 || !this._viewParams) { this._hover = null; return; }
+
+    const r  = this.c.getBoundingClientRect();
+    const cw = this._cw || this.c.width, ch = this._ch || this.c.height;
+    const mx = (e.clientX - r.left) * (cw / r.width);
+    const my = (e.clientY - r.top)  * (ch / r.height);
+
+    const { xMax, yMax, PL, PR, PT, PB, W, H } = this._viewParams;
+    const pw = W - PL - PR, ph = H - PT - PB;
+    const scX = pw / xMax, scY = ph / yMax;
+    const tpx = wx => PL + wx * scX;
+    const tpy = wy => H - PB - wy * scY;
+
+    let bestT = null, bestDist = Infinity;
+    const N = 400;
+
+    if (this._path) {
+      const step = Math.max(1, Math.floor(this._path.length / N));
+      for (let i = 0; i < this._path.length; i += step) {
+        const p = this._path[i];
+        const d = Math.hypot(tpx(p.x) - mx, tpy(Math.max(0, p.y)) - my);
+        if (d < bestDist) { bestDist = d; bestT = p.t; }
+      }
+      /* also check last point */
+      const last = this._path[this._path.length - 1];
+      const d = Math.hypot(tpx(last.x) - mx, tpy(Math.max(0, last.y)) - my);
+      if (d < bestDist) { bestDist = d; bestT = last.t; }
+    } else {
+      for (let i = 0; i <= N; i++) {
+        const t = (i / N) * tf;
+        const s = this._stateAnalytical(t);
+        const d = Math.hypot(tpx(s.x) - mx, tpy(Math.max(0, s.y)) - my);
+        if (d < bestDist) { bestDist = d; bestT = t; }
+      }
+    }
+
+    if (bestDist < 32 && bestT !== null) {
+      const s = this._curState(bestT);
+      this._hover = { t: bestT, s };
+    } else {
+      this._hover = null;
+    }
+    this.draw();
+  }
+
+  _onMouseLeave() {
+    this._hover = null;
+    this.draw();
+  }
+
+  _drawInspector(ctx, tpx, tpy, PL, gy, W, H, PB, PT) {
+    const { t, s } = this._hover;
+    const bx    = tpx(s.x);
+    const by    = tpy(Math.max(0, s.y));
+    const speed = Math.sqrt(s.vx ** 2 + s.vy ** 2);
+    const velAng = Math.atan2(s.vy, s.vx) * 180 / Math.PI;
+
+    /* ── crosshair lines ── */
+    ctx.save();
+    ctx.strokeStyle = 'rgba(255,214,102,.3)';
+    ctx.lineWidth   = 1;
+    ctx.setLineDash([4, 3]);
+    ctx.beginPath(); ctx.moveTo(bx, by);  ctx.lineTo(bx, gy);  ctx.stroke();
+    ctx.beginPath(); ctx.moveTo(PL, by); ctx.lineTo(bx, by); ctx.stroke();
+    ctx.setLineDash([]);
+    ctx.restore();
+
+    /* ── axis labels ── */
+    ctx.font      = 'bold 9px Manrope';
+    ctx.fillStyle = 'rgba(255,214,102,.7)';
+    ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+    ctx.fillText(_projFmt(Math.max(0, s.x)) + ' м', bx, gy + 6);
+    ctx.textAlign = 'right'; ctx.textBaseline = 'middle';
+    ctx.fillText(_projFmt(Math.max(0, s.y)) + ' м', PL - 4, by);
+
+    /* ── dot on trajectory ── */
+    const glow = ctx.createRadialGradient(bx, by, 0, bx, by, 14);
+    glow.addColorStop(0,   'rgba(255,214,102,.5)');
+    glow.addColorStop(1,   'transparent');
+    ctx.fillStyle = glow;
+    ctx.beginPath(); ctx.arc(bx, by, 14, 0, Math.PI * 2); ctx.fill();
+
+    ctx.fillStyle   = '#FFD166';
+    ctx.strokeStyle = 'rgba(255,255,255,.9)';
+    ctx.lineWidth   = 1.5;
+    ctx.beginPath(); ctx.arc(bx, by, 5.5, 0, Math.PI * 2); ctx.fill(); ctx.stroke();
+
+    /* ── tooltip ── */
+    const rows = [
+      { label: 't',    val: t.toFixed(3) + ' с',              color: '#FFD166' },
+      { label: 'x',    val: _projFmt(Math.max(0, s.x)) + ' м', color: '#06D6E0' },
+      { label: 'y',    val: _projFmt(Math.max(0, s.y)) + ' м', color: '#7BF5A4' },
+      { label: '|v|',  val: _projFmt(speed) + ' м/с',          color: '#ffffff' },
+      { label: 'vx',   val: _projFmt(s.vx) + ' м/с',           color: '#06D6E0' },
+      { label: 'vy',   val: _projFmt(s.vy) + ' м/с',           color: '#9B5DE5' },
+      { label: 'угол', val: velAng.toFixed(1) + '°',           color: '#F15BB5' },
+    ];
+
+    const padX = 10, padY = 8, lineH = 17;
+    const tw   = 138, th = padY * 2 + rows.length * lineH;
+
+    /* position — avoid canvas edges */
+    let tx = bx + 16, ty = by - th / 2;
+    if (tx + tw > W - 22)       tx = bx - tw - 16;
+    if (ty < PT + 4)             ty = PT + 4;
+    if (ty + th > H - PB - 4)   ty = H - PB - th - 4;
+
+    /* shadow */
+    ctx.save();
+    ctx.shadowColor = 'rgba(0,0,0,.6)';
+    ctx.shadowBlur  = 12;
+    ctx.fillStyle   = 'rgba(8,8,18,.92)';
+    ctx.beginPath(); ctx.roundRect(tx, ty, tw, th, 9); ctx.fill();
+    ctx.restore();
+
+    /* border */
+    ctx.strokeStyle = 'rgba(255,214,102,.35)';
+    ctx.lineWidth   = 1;
+    ctx.beginPath(); ctx.roundRect(tx, ty, tw, th, 9); ctx.stroke();
+
+    /* top accent line */
+    ctx.strokeStyle = 'rgba(255,214,102,.6)';
+    ctx.lineWidth   = 2;
+    ctx.beginPath();
+    ctx.moveTo(tx + 9, ty + 1);
+    ctx.lineTo(tx + tw - 9, ty + 1);
+    ctx.stroke();
+
+    /* rows */
+    ctx.font = '10px Manrope, sans-serif';
+    for (let i = 0; i < rows.length; i++) {
+      const row = rows[i];
+      const ry  = ty + padY + i * lineH + lineH / 2;
+
+      /* separator */
+      if (i > 0) {
+        ctx.strokeStyle = 'rgba(255,255,255,.04)';
+        ctx.lineWidth   = 1;
+        ctx.beginPath(); ctx.moveTo(tx + 8, ry - lineH / 2); ctx.lineTo(tx + tw - 8, ry - lineH / 2); ctx.stroke();
+      }
+
+      ctx.fillStyle    = 'rgba(255,255,255,.35)';
+      ctx.textAlign    = 'left';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(row.label, tx + padX, ry);
+
+      ctx.fillStyle = row.color;
+      ctx.textAlign = 'right';
+      ctx.fillText(row.val, tx + tw - padX, ry);
+    }
+
+    /* connector dot */
+    ctx.fillStyle   = '#FFD166';
+    ctx.strokeStyle = 'rgba(8,8,18,.9)';
+    ctx.lineWidth   = 1.5;
+    const cx = tx < bx ? tx + tw : tx;
+    const cy = ty + th / 2;
+    ctx.beginPath(); ctx.arc(cx, cy, 3, 0, Math.PI * 2); ctx.fill(); ctx.stroke();
+  }
+
+  /* ── draw helpers ── */
+
+  _drawBadge(ctx, rightX, y, text, bg, fg) {
+    const bh = 20;
+    ctx.font = 'bold 9px Manrope';
+    const tw  = ctx.measureText(text).width;
+    const bw  = tw + 16;
+    const bx  = rightX - bw;
+    ctx.fillStyle = bg;
+    ctx.beginPath(); ctx.roundRect(bx, y, bw, bh, 6); ctx.fill();
+    ctx.fillStyle = fg;
+    ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+    ctx.fillText(text, bx + bw / 2, y + bh / 2);
+  }
+
+  _drawWind(ctx, x, y, w, h) {
+    const now      = performance.now() / 1000;
+    const dir      = this.wind > 0 ? 1 : -1;
+    const strength = Math.min(1, Math.abs(this.wind) / 20);
+    const count    = Math.floor(4 + strength * 7);
+    const len      = (18 + strength * 45) * dir;
+
+    ctx.save();
+    ctx.strokeStyle = '#06D6E0';
+    for (let i = 0; i < count; i++) {
+      const phase    = ((i / count) + now * strength * 0.25) % 1;
+      const streak_x = dir > 0 ? x + phase * w : x + (1 - phase) * w;
+      const streak_y = y + (0.1 + (i / count) * 0.8) * h;
+      const alpha    = 0.08 + strength * 0.15;
+      ctx.globalAlpha = alpha;
+      ctx.lineWidth   = 0.8 + strength * 0.6;
+      ctx.beginPath(); ctx.moveTo(streak_x, streak_y); ctx.lineTo(streak_x + len, streak_y); ctx.stroke();
+    }
+    ctx.restore();
+  }
+}
+
+/* ── module helpers ── */
+
+function _projNiceStep(range, n) {
+  const raw = range / n;
+  const p   = Math.pow(10, Math.floor(Math.log10(raw)));
+  for (const m of [1, 2, 5, 10]) if (m * p >= raw) return m * p;
+  return p;
+}
+
+function _projFmt(n) {
+  if (n >= 1000) return (n / 1000).toFixed(1) + 'k';
+  if (n >= 100)  return Math.round(n).toString();
+  if (n >= 10)   return n.toFixed(1);
+  return n.toFixed(2);
+}
+
+function _projArrow(ctx, x1, y1, x2, y2, color, lw) {
+  const ang = Math.atan2(y2 - y1, x2 - x1);
+  ctx.save();
+  ctx.strokeStyle = color; ctx.fillStyle = color; ctx.lineWidth = lw;
+  ctx.shadowColor = color; ctx.shadowBlur = 6;
+  ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke();
+  ctx.beginPath();
+  ctx.moveTo(x2, y2);
+  ctx.lineTo(x2 - 9 * Math.cos(ang - 0.4), y2 - 9 * Math.sin(ang - 0.4));
+  ctx.lineTo(x2 - 9 * Math.cos(ang + 0.4), y2 - 9 * Math.sin(ang + 0.4));
+  ctx.closePath(); ctx.fill();
+  ctx.restore();
+}
diff --git a/frontend/js/labs/quadratic.js b/frontend/js/labs/quadratic.js
new file mode 100644
index 0000000..0d84b5c
--- /dev/null
+++ b/frontend/js/labs/quadratic.js
@@ -0,0 +1,433 @@
+'use strict';
+/* ══════════════════════════════════════════════════════════════
+   QuadraticSim — interactive quadratic equation explorer
+   y = ax² + bx + c   ·   discriminant, roots, vertex
+   ══════════════════════════════════════════════════════════════ */
+
+class QuadraticSim {
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.ctx    = canvas.getContext('2d');
+    this.W = 0; this.H = 0;
+
+    /* coefficients */
+    this.a = 1;
+    this.b = 0;
+    this.c = -1;
+
+    /* view */
+    this.ox  = 0;
+    this.oy  = 0;
+    this.scl = 40; // px per unit
+
+    /* interaction */
+    this._drag = null;
+    this.hx    = null; // hovered math x
+
+    /* callback */
+    this.onUpdate = null;
+
+    this._bind();
+    new ResizeObserver(() => { this.fit(); this.draw(); }).observe(canvas.parentElement);
+  }
+
+  /* ── public API ───────────────────────────────────── */
+
+  fit() {
+    const dpr = window.devicePixelRatio || 1;
+    const w = this.canvas.offsetWidth || 600;
+    const h = this.canvas.offsetHeight || 400;
+    this.canvas.width  = w * dpr;
+    this.canvas.height = h * dpr;
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this.W = w; this.H = h;
+  }
+
+  setParams({ a, b, c } = {}) {
+    if (a !== undefined) this.a = +a;
+    if (b !== undefined) this.b = +b;
+    if (c !== undefined) this.c = +c;
+    this.draw();
+    this._emit();
+  }
+
+  resetView() { this.ox = 0; this.oy = 0; this.scl = 40; this.draw(); }
+  zoomIn()    { this.scl = Math.min(800, this.scl * 1.3); this.draw(); }
+  zoomOut()   { this.scl = Math.max(4,   this.scl / 1.3); this.draw(); }
+
+  info() {
+    const { a, b, c } = this;
+    const D = b * b - 4 * a * c;
+    let roots = '—';
+    let rootCount = 0;
+    if (a === 0) {
+      roots = b !== 0 ? `x = ${this._fmt(-c / b)}` : '—';
+      rootCount = b !== 0 ? 1 : 0;
+    } else if (D > 0.0001) {
+      const sqD = Math.sqrt(D);
+      const x1 = (-b - sqD) / (2 * a);
+      const x2 = (-b + sqD) / (2 * a);
+      roots = `x₁=${this._fmt(x1)}, x₂=${this._fmt(x2)}`;
+      rootCount = 2;
+    } else if (Math.abs(D) <= 0.0001) {
+      roots = `x = ${this._fmt(-b / (2 * a))}`;
+      rootCount = 1;
+    }
+
+    const vx = a !== 0 ? -b / (2 * a) : 0;
+    const vy = a !== 0 ? c - b * b / (4 * a) : 0;
+
+    return {
+      D: this._fmt(D),
+      rootCount,
+      roots,
+      vertex: a !== 0 ? `(${this._fmt(vx)}; ${this._fmt(vy)})` : '—',
+      equation: `y = ${a !== 1 ? (a === -1 ? '−' : this._fmt(a)) : ''}x² ${b >= 0 ? '+' : '−'} ${this._fmt(Math.abs(b))}x ${c >= 0 ? '+' : '−'} ${this._fmt(Math.abs(c))}`,
+    };
+  }
+
+  /* ── internals ────────────────────────────────────── */
+
+  _fmt(n) {
+    if (Number.isInteger(n)) return String(n);
+    return Math.abs(n) < 0.005 ? '0' : n.toFixed(2).replace(/\.?0+$/, '');
+  }
+
+  _f(x) {
+    return this.a * x * x + this.b * x + this.c;
+  }
+
+  _emit() {
+    if (this.onUpdate) this.onUpdate(this.info());
+  }
+
+  /* ── coordinate transforms ─────────────────────────── */
+
+  _toPx(mx, my) {
+    return [
+      this.W / 2 + (mx - this.ox) * this.scl,
+      this.H / 2 - (my - this.oy) * this.scl,
+    ];
+  }
+
+  _toMath(px, py) {
+    return [
+      (px - this.W / 2) / this.scl + this.ox,
+      -(py - this.H / 2) / this.scl + this.oy,
+    ];
+  }
+
+  /* ── draw ─────────────────────────────────────────── */
+
+  draw() {
+    const ctx = this.ctx, W = this.W, H = this.H;
+    if (!W || !H) return;
+
+    ctx.fillStyle = '#0D0D1A';
+    ctx.fillRect(0, 0, W, H);
+
+    this._drawGrid(ctx, W, H);
+    this._drawAxes(ctx, W, H);
+    this._drawParabola(ctx, W, H);
+    this._drawFeatures(ctx, W, H);
+    if (this.hx !== null) this._drawHover(ctx, W, H);
+  }
+
+  /* ── grid & axes ──────────────────────────────────── */
+
+  _niceStep() {
+    const raw = this.W / this.scl / 8;
+    const p = Math.pow(10, Math.floor(Math.log10(raw)));
+    for (const m of [1, 2, 5, 10]) if (m * p >= raw) return m * p;
+    return p;
+  }
+
+  _drawGrid(ctx, W, H) {
+    const step = this._niceStep();
+    const [x0] = this._toMath(0, 0), [x1] = this._toMath(W, 0);
+    const [, y0] = this._toMath(0, H), [, y1] = this._toMath(0, 0);
+    const gx = Math.floor(x0 / step) * step;
+    const gy = Math.floor(y0 / step) * step;
+
+    ctx.strokeStyle = 'rgba(255,255,255,0.065)';
+    ctx.lineWidth = 1;
+    for (let x = gx; x <= x1 + step; x += step) {
+      const [px] = this._toPx(x, 0);
+      ctx.beginPath(); ctx.moveTo(px, 0); ctx.lineTo(px, H); ctx.stroke();
+    }
+    for (let y = gy; y <= y1 + step; y += step) {
+      const [, py] = this._toPx(0, y);
+      ctx.beginPath(); ctx.moveTo(0, py); ctx.lineTo(W, py); ctx.stroke();
+    }
+
+    // labels
+    ctx.font = '11px Manrope, system-ui, sans-serif';
+    ctx.fillStyle = 'rgba(255,255,255,0.3)';
+    const [axX, axY] = this._toPx(0, 0);
+    const lblY = Math.max(4, Math.min(H - 18, axY + 5));
+    const lblX = Math.max(28, Math.min(W - 6, axX - 5));
+
+    ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+    for (let x = gx; x <= x1; x += step) {
+      if (Math.abs(x) < step * 0.01) continue;
+      const [px] = this._toPx(x, 0);
+      if (px < 18 || px > W - 18) continue;
+      ctx.fillText(this._fmtLabel(x, step), px, lblY);
+    }
+    ctx.textAlign = 'right'; ctx.textBaseline = 'middle';
+    for (let y = gy; y <= y1; y += step) {
+      if (Math.abs(y) < step * 0.01) continue;
+      const [, py] = this._toPx(0, y);
+      if (py < 12 || py > H - 12) continue;
+      ctx.fillText(this._fmtLabel(y, step), lblX, py);
+    }
+  }
+
+  _fmtLabel(n, step) {
+    if (n === 0) return '0';
+    if (step >= 1 && Number.isInteger(n)) return String(n);
+    if (step < 0.001) return n.toExponential(1);
+    const dec = Math.max(0, -Math.floor(Math.log10(step)));
+    return n.toFixed(dec);
+  }
+
+  _drawAxes(ctx, W, H) {
+    const [ax, ay] = this._toPx(0, 0);
+    ctx.strokeStyle = 'rgba(255,255,255,0.4)';
+    ctx.lineWidth = 1.5;
+    ctx.beginPath(); ctx.moveTo(0, ay);  ctx.lineTo(W - 10, ay); ctx.stroke();
+    ctx.beginPath(); ctx.moveTo(ax, H); ctx.lineTo(ax, 8);      ctx.stroke();
+
+    // arrowheads
+    ctx.fillStyle = 'rgba(255,255,255,0.4)';
+    this._arrowHead(ctx, W - 8, ay, 0);
+    this._arrowHead(ctx, ax, 6, -Math.PI / 2);
+
+    ctx.fillStyle = 'rgba(255,255,255,0.55)';
+    ctx.font = 'bold 12px Manrope, sans-serif';
+    ctx.textBaseline = 'middle'; ctx.textAlign = 'left';
+    ctx.fillText('x', W - 10, ay - 13);
+    ctx.textBaseline = 'top'; ctx.textAlign = 'left';
+    ctx.fillText('y', ax + 7, 4);
+  }
+
+  _arrowHead(ctx, x, y, angle) {
+    const s = 5;
+    ctx.save(); ctx.translate(x, y); ctx.rotate(angle);
+    ctx.beginPath();
+    ctx.moveTo(0, 0); ctx.lineTo(-s * 1.6, -s * 0.6); ctx.lineTo(-s * 1.6, s * 0.6);
+    ctx.closePath(); ctx.fill();
+    ctx.restore();
+  }
+
+  /* ── parabola curve ───────────────────────────────── */
+
+  _drawParabola(ctx, W, H) {
+    const steps = Math.min(W * 2, 2000);
+    const [x0] = this._toMath(0, 0), [x1] = this._toMath(W, 0);
+    const dx   = (x1 - x0) / steps;
+
+    // glow
+    ctx.strokeStyle = 'rgba(155,93,229,0.15)';
+    ctx.lineWidth = 8;
+    ctx.lineJoin = 'round';
+    ctx.beginPath();
+    let pen = false;
+    for (let i = 0; i <= steps; i++) {
+      const mx = x0 + i * dx;
+      const my = this._f(mx);
+      if (!isFinite(my)) { pen = false; continue; }
+      const [px, py] = this._toPx(mx, my);
+      if (py < -200 || py > H + 200) { pen = false; continue; }
+      pen ? ctx.lineTo(px, py) : ctx.moveTo(px, py);
+      pen = true;
+    }
+    ctx.stroke();
+
+    // main curve
+    ctx.strokeStyle = '#9B5DE5';
+    ctx.lineWidth = 2.5;
+    ctx.beginPath();
+    pen = false;
+    for (let i = 0; i <= steps; i++) {
+      const mx = x0 + i * dx;
+      const my = this._f(mx);
+      if (!isFinite(my)) { pen = false; continue; }
+      const [px, py] = this._toPx(mx, my);
+      if (py < -200 || py > H + 200) { pen = false; continue; }
+      pen ? ctx.lineTo(px, py) : ctx.moveTo(px, py);
+      pen = true;
+    }
+    ctx.stroke();
+  }
+
+  /* ── vertex, roots, axis of symmetry ──────────────── */
+
+  _drawFeatures(ctx, W, H) {
+    const { a, b, c } = this;
+    if (a === 0) return; // linear — no features
+
+    const vx = -b / (2 * a);
+    const vy = this._f(vx);
+    const D  = b * b - 4 * a * c;
+
+    // axis of symmetry
+    const [symPx] = this._toPx(vx, 0);
+    ctx.strokeStyle = 'rgba(6,214,224,0.25)';
+    ctx.lineWidth = 1;
+    ctx.setLineDash([6, 4]);
+    ctx.beginPath(); ctx.moveTo(symPx, 0); ctx.lineTo(symPx, H); ctx.stroke();
+    ctx.setLineDash([]);
+
+    // vertex point
+    const [vpx, vpy] = this._toPx(vx, vy);
+    if (vpy > -20 && vpy < H + 20) {
+      ctx.fillStyle = '#06D6E0';
+      ctx.beginPath(); ctx.arc(vpx, vpy, 6, 0, Math.PI * 2); ctx.fill();
+      ctx.strokeStyle = 'rgba(255,255,255,0.8)'; ctx.lineWidth = 1.5; ctx.stroke();
+
+      // label
+      ctx.fillStyle = '#06D6E0';
+      ctx.font = 'bold 12px Manrope, sans-serif';
+      ctx.textAlign = 'center'; ctx.textBaseline = 'bottom';
+      ctx.fillText(`(${this._fmt(vx)}; ${this._fmt(vy)})`, vpx, vpy - 12);
+    }
+
+    // roots
+    if (D >= -0.0001) {
+      ctx.fillStyle = '#EF476F';
+      const roots = [];
+      if (D > 0.0001) {
+        const sqD = Math.sqrt(D);
+        roots.push((-b - sqD) / (2 * a));
+        roots.push((-b + sqD) / (2 * a));
+      } else {
+        roots.push(-b / (2 * a));
+      }
+
+      for (const rx of roots) {
+        const [rpx, rpy] = this._toPx(rx, 0);
+        if (rpx < -20 || rpx > W + 20) continue;
+
+        // root dot
+        ctx.fillStyle = '#EF476F';
+        ctx.beginPath(); ctx.arc(rpx, rpy, 5.5, 0, Math.PI * 2); ctx.fill();
+        ctx.strokeStyle = 'rgba(255,255,255,0.8)'; ctx.lineWidth = 1.5; ctx.stroke();
+
+        // label
+        ctx.fillStyle = '#EF476F';
+        ctx.font = '11px Manrope, sans-serif';
+        ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+        ctx.fillText(this._fmt(rx), rpx, rpy + 10);
+      }
+    }
+
+    // discriminant badge
+    const badgeColor = D > 0.0001 ? '#7BF5A4' : (D < -0.0001 ? '#EF476F' : '#FFD166');
+    const badgeText  = D > 0.0001 ? `D = ${this._fmt(D)} > 0  (2 корня)` :
+                       D < -0.0001 ? `D = ${this._fmt(D)} < 0  (нет корней)` :
+                       `D = 0  (1 корень)`;
+    ctx.font = 'bold 12px Manrope, sans-serif';
+    const tw = ctx.measureText(badgeText).width;
+    const bx = W - tw - 28, by = 16;
+    ctx.fillStyle = 'rgba(22,22,38,0.85)';
+    ctx.beginPath(); ctx.roundRect(bx, by, tw + 20, 28, 8); ctx.fill();
+    ctx.strokeStyle = badgeColor; ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.roundRect(bx, by, tw + 20, 28, 8); ctx.stroke();
+    ctx.fillStyle = badgeColor;
+    ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
+    ctx.fillText(badgeText, bx + 10, by + 14);
+  }
+
+  /* ── hover crosshair ──────────────────────────────── */
+
+  _drawHover(ctx, W, H) {
+    const [px] = this._toPx(this.hx, 0);
+    const my = this._f(this.hx);
+    if (!isFinite(my)) return;
+    const [, py] = this._toPx(this.hx, my);
+
+    // vertical line
+    ctx.strokeStyle = 'rgba(255,255,255,0.15)';
+    ctx.lineWidth = 1;
+    ctx.setLineDash([5, 5]);
+    ctx.beginPath(); ctx.moveTo(px, 0); ctx.lineTo(px, H); ctx.stroke();
+    ctx.setLineDash([]);
+
+    if (py < -20 || py > H + 20) return;
+
+    // point
+    ctx.fillStyle = '#FFD166';
+    ctx.beginPath(); ctx.arc(px, py, 5, 0, Math.PI * 2); ctx.fill();
+    ctx.strokeStyle = 'rgba(255,255,255,0.8)'; ctx.lineWidth = 1.5; ctx.stroke();
+
+    // tooltip
+    ctx.fillStyle = 'rgba(22,22,38,0.9)';
+    const text = `(${this._fmt(this.hx)}, ${this._fmt(my)})`;
+    ctx.font = '12px Manrope, sans-serif';
+    const tw2 = ctx.measureText(text).width;
+    const tx = px + 14, ty = py - 14;
+    ctx.beginPath(); ctx.roundRect(tx, ty - 10, tw2 + 16, 22, 6); ctx.fill();
+    ctx.fillStyle = '#FFD166';
+    ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
+    ctx.fillText(text, tx + 8, ty + 1);
+  }
+
+  /* ── events ───────────────────────────────────────── */
+
+  _bind() {
+    const cv = this.canvas;
+
+    cv.addEventListener('wheel', e => {
+      e.preventDefault();
+      const [mx, my] = this._toMath(e.offsetX, e.offsetY);
+      this.scl = Math.max(4, Math.min(800, this.scl * (e.deltaY < 0 ? 1.15 : 1 / 1.15)));
+      const [nx, ny] = this._toMath(e.offsetX, e.offsetY);
+      this.ox -= nx - mx; this.oy -= ny - my;
+      this.draw();
+    }, { passive: false });
+
+    cv.addEventListener('mousedown', e => {
+      this._drag = { x: e.clientX, y: e.clientY, ox: this.ox, oy: this.oy };
+      cv.style.cursor = 'grabbing';
+    });
+    window.addEventListener('mousemove', e => {
+      if (this._drag) {
+        this.ox = this._drag.ox - (e.clientX - this._drag.x) / this.scl;
+        this.oy = this._drag.oy + (e.clientY - this._drag.y) / this.scl;
+        this.draw();
+      } else {
+        const r = cv.getBoundingClientRect();
+        const lx = e.clientX - r.left, ly = e.clientY - r.top;
+        if (lx >= 0 && lx <= r.width && ly >= 0 && ly <= r.height) {
+          this.hx = this._toMath(lx, ly)[0];
+          this.draw();
+        }
+      }
+    });
+    window.addEventListener('mouseup', () => {
+      this._drag = null;
+      cv.style.cursor = 'crosshair';
+    });
+    cv.addEventListener('mouseleave', () => {
+      this.hx = null; this.draw();
+    });
+    cv.style.cursor = 'crosshair';
+
+    // touch
+    let t0 = null;
+    cv.addEventListener('touchstart', e => {
+      if (e.touches.length === 1)
+        t0 = { x: e.touches[0].clientX, y: e.touches[0].clientY, ox: this.ox, oy: this.oy };
+    }, { passive: true });
+    cv.addEventListener('touchmove', e => {
+      e.preventDefault();
+      if (e.touches.length === 1 && t0) {
+        this.ox = t0.ox - (e.touches[0].clientX - t0.x) / this.scl;
+        this.oy = t0.oy + (e.touches[0].clientY - t0.y) / this.scl;
+        this.draw();
+      }
+    }, { passive: false });
+    cv.addEventListener('touchend', () => { t0 = null; });
+  }
+}
diff --git a/frontend/js/labs/reactions.js b/frontend/js/labs/reactions.js
new file mode 100644
index 0000000..0945c40
--- /dev/null
+++ b/frontend/js/labs/reactions.js
@@ -0,0 +1,618 @@
+'use strict';
+
+/**
+ * ReactionSim — Chemical reaction kinetics simulation.
+ * Particle-based A + B <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> C (and variants) with Arrhenius kinetics.
+ * Renders: glowing molecules, flash effects on reaction,
+ *          live concentration graph, energy profile diagram.
+ */
+class ReactionSim {
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.ctx    = canvas.getContext('2d');
+    this.W = 0; this.H = 0;
+
+    this.particles  = [];
+    this.flashes    = [];    // [{x, y, t, maxT, color}]
+    this._history   = [];    // [{step, nA, nB, nC}]
+    this._nextId    = 0;
+
+    // Parameters
+    this.N  = 28;            // initial molecules per reactive species
+    this.T  = 1.2;           // temperature 0.2–4.0
+    this.Ea = 2.0;           // activation energy 0.5–5.0
+    this.mode = 'forward';   // 'forward' | 'reversible' | 'chain'
+    this.reactionOn = true;
+
+    // Runtime stats
+    this._steps           = 0;
+    this._totalReactions  = 0;
+    this._recentReactions = 0;
+    this._rate            = 0;  // reactions per step (ema)
+
+    this._raf  = null;
+    this._dpr  = 1;
+    this.onUpdate = null;
+
+    // Spatial grid
+    this._grid     = new Map();
+    this._GRID_C   = 22;  // cell size (> max particle diameter)
+  }
+
+  /* ────────────────────────── Lifecycle ────────────────────────── */
+
+  fit() {
+    const dpr = window.devicePixelRatio || 1;
+    this._dpr = dpr;
+    const w = this.canvas.offsetWidth;
+    const h = this.canvas.offsetHeight;
+    this.canvas.width  = w * dpr;
+    this.canvas.height = h * dpr;
+    this.W = w; this.H = h;
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this.reset();
+  }
+
+  reset() {
+    const { W, H } = this;
+    if (!W || !H) return;
+    this.particles  = [];
+    this.flashes    = [];
+    this._history   = [];
+    this._steps     = 0;
+    this._totalReactions  = 0;
+    this._recentReactions = 0;
+    this._rate      = 0;
+    this._nextId    = 0;
+
+    // Spawn N of A and N of B
+    this._spawnType('A', this.N);
+    this._spawnType('B', this.N);
+    this._recordHistory();
+  }
+
+  _spawnType(type, count) {
+    const { W, H } = this;
+    const r = this._radius(type);
+    const margin = 12;
+    let placed = 0, attempts = 0;
+    while (placed < count && attempts < count * 60) {
+      attempts++;
+      const x = margin + r + Math.random() * (W - 2 * r - margin * 2);
+      const y = margin + r + Math.random() * (H - 2 * r - margin * 2);
+      let overlap = false;
+      for (const p of this.particles) {
+        const dx = p.x - x, dy = p.y - y;
+        if (dx * dx + dy * dy < (p.r + r + 1) ** 2) { overlap = true; break; }
+      }
+      if (overlap) continue;
+      const ang = Math.random() * Math.PI * 2;
+      const spd = this._baseSpeed(type) * (0.6 + Math.random() * 0.8);
+      this.particles.push({ x, y, vx: Math.cos(ang) * spd, vy: Math.sin(ang) * spd, r, type, id: this._nextId++ });
+      placed++;
+    }
+  }
+
+  start() {
+    if (this._raf) return;
+    const loop = () => {
+      this._raf = requestAnimationFrame(loop);
+      for (let i = 0; i < 3; i++) this._step();
+      this.draw();
+    };
+    this._raf = requestAnimationFrame(loop);
+  }
+
+  stop() {
+    if (this._raf) { cancelAnimationFrame(this._raf); this._raf = null; }
+  }
+
+  /* ────────────────────────── Parameters ────────────────────────── */
+
+  setN(n) {
+    this.N = Math.max(5, Math.min(80, n));
+    this.reset();
+  }
+
+  setT(t) {
+    const ratio = Math.max(0.1, t) / Math.max(0.1, this.T);
+    this.T = Math.max(0.2, Math.min(4.0, t));
+    const scale = Math.sqrt(ratio);
+    for (const p of this.particles) { p.vx *= scale; p.vy *= scale; }
+  }
+
+  setEa(ea) {
+    this.Ea = Math.max(0.5, Math.min(5.0, ea));
+  }
+
+  setMode(mode) { this.mode = mode; }
+
+  toggleReaction() { this.reactionOn = !this.reactionOn; }
+
+  preset(name) {
+    this.reactionOn = true;
+    const presets = {
+      simple:     { N: 28, T: 1.2, Ea: 1.8, mode: 'forward'    },
+      reversible: { N: 22, T: 1.5, Ea: 1.5, mode: 'reversible' },
+      hot:        { N: 25, T: 2.8, Ea: 2.0, mode: 'forward'    },
+      cold:       { N: 25, T: 0.4, Ea: 1.5, mode: 'forward'    },
+      chain:      { N: 18, T: 1.8, Ea: 0.9, mode: 'chain'      },
+    };
+    Object.assign(this, presets[name] || {});
+    this.reset();
+  }
+
+  info() {
+    let nA = 0, nB = 0, nC = 0;
+    for (const p of this.particles) {
+      if (p.type === 'A') nA++;
+      else if (p.type === 'B') nB++;
+      else nC++;
+    }
+    return { nA, nB, nC, total: this.particles.length, reactions: this._totalReactions, rate: this._rate };
+  }
+
+  /* ────────────────────────── Helpers ────────────────────────── */
+
+  _radius(type)    { return type === 'C' ? 7 : 5; }
+  _baseSpeed(type) { return (type === 'C' ? 0.55 : 1.0) * this.T * 3.2; }
+  _color(type)     { return { A: '#06D6E0', B: '#EF476F', C: '#FFD166' }[type] || '#aaa'; }
+
+  /* ────────────────────────── Physics ────────────────────────── */
+
+  _buildGrid() {
+    this._grid.clear();
+    const cs = this._GRID_C;
+    for (const p of this.particles) {
+      const key = `${Math.floor(p.x / cs)},${Math.floor(p.y / cs)}`;
+      if (!this._grid.has(key)) this._grid.set(key, []);
+      this._grid.get(key).push(p);
+    }
+  }
+
+  _neighbors(p) {
+    const cs = this._GRID_C;
+    const gx = Math.floor(p.x / cs), gy = Math.floor(p.y / cs);
+    const out = [];
+    for (let dx = -1; dx <= 1; dx++)
+      for (let dy = -1; dy <= 1; dy++) {
+        const cell = this._grid.get(`${gx + dx},${gy + dy}`);
+        if (cell) for (const q of cell) if (q !== p) out.push(q);
+      }
+    return out;
+  }
+
+  _step() {
+    const { W, H } = this;
+    const dt = 0.55;
+
+    // Move + wall bounce
+    for (const p of this.particles) {
+      p.x += p.vx * dt;
+      p.y += p.vy * dt;
+      if (p.x < p.r)     { p.x = p.r;     p.vx =  Math.abs(p.vx); }
+      if (p.x > W - p.r) { p.x = W - p.r; p.vx = -Math.abs(p.vx); }
+      if (p.y < p.r)     { p.y = p.r;     p.vy =  Math.abs(p.vy); }
+      if (p.y > H - p.r) { p.y = H - p.r; p.vy = -Math.abs(p.vy); }
+    }
+
+    this._buildGrid();
+
+    const toRemove = new Set();
+    const toAdd    = [];
+
+    // Pairwise: collision detection, reaction check, elastic bounce
+    for (const p of this.particles) {
+      if (toRemove.has(p.id)) continue;
+      for (const q of this._neighbors(p)) {
+        if (q.id <= p.id || toRemove.has(q.id)) continue;
+
+        const dx = q.x - p.x, dy = q.y - p.y;
+        const dist2 = dx * dx + dy * dy;
+        const minD  = p.r + q.r;
+        if (dist2 >= minD * minD) continue;
+
+        const dist = Math.sqrt(dist2);
+
+        // Try chemical reaction
+        if (this.reactionOn && this._tryReact(p, q, dx, dy, dist, toRemove, toAdd)) continue;
+
+        // Elastic collision
+        const nx = dx / dist, ny = dy / dist;
+        const dvx = p.vx - q.vx, dvy = p.vy - q.vy;
+        const dot = dvx * nx + dvy * ny;
+        if (dot >= 0) {
+          // Just separate overlapping particles that are already moving apart
+          const ov = (minD - dist) * 0.5;
+          p.x -= nx * ov; p.y -= ny * ov;
+          q.x += nx * ov; q.y += ny * ov;
+          continue;
+        }
+        const m1 = p.r * p.r, m2 = q.r * q.r;
+        const imp = (2 * dot) / (m1 + m2);
+        p.vx -= imp * m2 * nx; p.vy -= imp * m2 * ny;
+        q.vx += imp * m1 * nx; q.vy += imp * m1 * ny;
+        const ov = (minD - dist) * 0.5;
+        p.x -= nx * ov; p.y -= ny * ov;
+        q.x += nx * ov; q.y += ny * ov;
+      }
+    }
+
+    // Spontaneous decomposition C <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> A + B (reversible mode)
+    if (this.mode === 'reversible') {
+      const prob = 0.00022 * this.T * Math.exp(-this.Ea * 0.38 / this.T);
+      for (const p of this.particles) {
+        if (p.type !== 'C' || toRemove.has(p.id)) continue;
+        if (Math.random() < prob) {
+          toRemove.add(p.id);
+          const ang = Math.random() * Math.PI * 2;
+          const spd = this._baseSpeed('A');
+          const mk = id => ({ x: p.x + Math.cos(ang + id * Math.PI) * 5,
+                               y: p.y + Math.sin(ang + id * Math.PI) * 5,
+                               vx: Math.cos(ang + id * Math.PI) * spd * (0.7 + Math.random() * 0.6),
+                               vy: Math.sin(ang + id * Math.PI) * spd * (0.7 + Math.random() * 0.6),
+                               r: 5, type: id === 0 ? 'A' : 'B', id: this._nextId++ });
+          toAdd.push(mk(0), mk(1));
+          this.flashes.push({ x: p.x, y: p.y, t: 0, maxT: 14, color: '100,160,255' });
+        }
+      }
+    }
+
+    // Apply changes
+    if (toRemove.size) this.particles = this.particles.filter(p => !toRemove.has(p.id));
+    for (const p of toAdd) this.particles.push(p);
+
+    // Age flashes
+    this.flashes = this.flashes.filter(f => ++f.t < f.maxT);
+
+    this._steps++;
+    if (this._steps % 30 === 0) {
+      this._rate = this._recentReactions / 30;
+      this._recentReactions = 0;
+    }
+    if (this._steps % 20 === 0) {
+      this._recordHistory();
+      if (this.onUpdate) this.onUpdate(this.info());
+    }
+  }
+
+  _tryReact(p, q, dx, dy, dist, toRemove, toAdd) {
+    const isAB = (p.type === 'A' && q.type === 'B') || (p.type === 'B' && q.type === 'A');
+    if (!isAB) return false;
+
+    // Arrhenius factor: k ∝ exp(-Ea / T)
+    if (Math.random() > Math.exp(-this.Ea / this.T) * 0.38) return false;
+
+    const m1 = p.r * p.r, m2 = q.r * q.r, mt = m1 + m2;
+    const cx  = (p.x * m1 + q.x * m2) / mt;
+    const cy  = (p.y * m1 + q.y * m2) / mt;
+    const pvx = (p.vx * m1 + q.vx * m2) / mt;
+    const pvy = (p.vy * m1 + q.vy * m2) / mt;
+
+    toRemove.add(p.id);
+    toRemove.add(q.id);
+
+    if (this.mode === 'chain') {
+      // Chain: A + B <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> 2 C (two fast products — cascade reaction)
+      const spd = Math.sqrt(pvx * pvx + pvy * pvy) * 1.35 + this._baseSpeed('C') * 0.7;
+      const ang  = Math.atan2(pvy || 0.001, pvx || 0.001);
+      for (let s = 0; s < 2; s++) {
+        const sign = s === 0 ? 1 : -1;
+        toAdd.push({
+          x:  cx + Math.cos(ang) * sign * 5,
+          y:  cy + Math.sin(ang) * sign * 5,
+          vx: Math.cos(ang) * sign * spd,
+          vy: Math.sin(ang) * sign * spd,
+          r: 6, type: 'C', id: this._nextId++
+        });
+      }
+      this.flashes.push({ x: cx, y: cy, t: 0, maxT: 28, color: '255,140,30' });
+    } else {
+      // Forward / reversible: A + B <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> 1 C
+      const cSpd = Math.sqrt(pvx * pvx + pvy * pvy) * 0.62 + this._baseSpeed('C') * 0.28;
+      const ang  = Math.atan2(pvy || 0.001, pvx || 0.001);
+      toAdd.push({ x: cx, y: cy, vx: Math.cos(ang) * cSpd, vy: Math.sin(ang) * cSpd, r: 7, type: 'C', id: this._nextId++ });
+      this.flashes.push({ x: cx, y: cy, t: 0, maxT: 22, color: '255,200,50' });
+    }
+
+    this._totalReactions++;
+    this._recentReactions++;
+    return true;
+  }
+
+  _recordHistory() {
+    let nA = 0, nB = 0, nC = 0;
+    for (const p of this.particles) {
+      if (p.type === 'A') nA++;
+      else if (p.type === 'B') nB++;
+      else nC++;
+    }
+    this._history.push({ step: this._steps, nA, nB, nC });
+    if (this._history.length > 260) this._history.shift();
+  }
+
+  /* ────────────────────────── Rendering ────────────────────────── */
+
+  draw() {
+    const { ctx, W, H } = this;
+    if (!W || !H) return;
+
+    // ── Background ──
+    ctx.fillStyle = '#080818';
+    ctx.fillRect(0, 0, W, H);
+
+    // ── Subtle dot grid ──
+    ctx.fillStyle = 'rgba(255,255,255,0.033)';
+    for (let x = 35; x < W; x += 35)
+      for (let y = 35; y < H; y += 35) {
+        ctx.beginPath();
+        ctx.arc(x, y, 1, 0, Math.PI * 2);
+        ctx.fill();
+      }
+
+    // ── Reaction flashes ──
+    for (const f of this.flashes) {
+      const prog   = f.t / f.maxT;
+      const radius = prog * 48 + 4;
+      const alpha  = (1 - prog) * 0.55;
+      const g = ctx.createRadialGradient(f.x, f.y, 0, f.x, f.y, radius);
+      g.addColorStop(0,   `rgba(${f.color},${alpha * 1.6})`);
+      g.addColorStop(0.4, `rgba(${f.color},${alpha * 0.5})`);
+      g.addColorStop(1,   `rgba(${f.color},0)`);
+      ctx.fillStyle = g;
+      ctx.beginPath();
+      ctx.arc(f.x, f.y, radius, 0, Math.PI * 2);
+      ctx.fill();
+    }
+
+    // ── Particles ──
+    for (const p of this.particles) this._drawParticle(ctx, p);
+
+    // ── Overlays ──
+    this._drawLegend(ctx);
+    this._drawConcentrationGraph(ctx);
+    this._drawEnergyDiagram(ctx);
+
+    // ── Empty state ──
+    if (this.particles.length === 0) {
+      ctx.fillStyle = 'rgba(255,255,255,0.22)';
+      ctx.font = '14px sans-serif';
+      ctx.textAlign = 'center';
+      ctx.fillText('Все молекулы прореагировали — нажмите Сброс', W / 2, H / 2);
+    }
+  }
+
+  _drawParticle(ctx, p) {
+    const col = this._color(p.type);
+    const { x, y, r } = p;
+
+    // Outer glow
+    const glow = ctx.createRadialGradient(x, y, 0, x, y, r * 3);
+    glow.addColorStop(0, col + '50');
+    glow.addColorStop(1, col + '00');
+    ctx.fillStyle = glow;
+    ctx.beginPath();
+    ctx.arc(x, y, r * 3, 0, Math.PI * 2);
+    ctx.fill();
+
+    // Body (radial gradient for depth)
+    const body = ctx.createRadialGradient(x - r * 0.28, y - r * 0.28, r * 0.05, x, y, r);
+    body.addColorStop(0, col + 'ff');
+    body.addColorStop(0.65, col + 'cc');
+    body.addColorStop(1, col + '88');
+    ctx.fillStyle = body;
+    ctx.beginPath();
+    ctx.arc(x, y, r, 0, Math.PI * 2);
+    ctx.fill();
+
+    // Specular highlight
+    ctx.fillStyle = 'rgba(255,255,255,0.42)';
+    ctx.beginPath();
+    ctx.arc(x - r * 0.27, y - r * 0.27, r * 0.3, 0, Math.PI * 2);
+    ctx.fill();
+
+    // Type label
+    ctx.fillStyle = 'rgba(0,0,0,0.72)';
+    ctx.font = `bold ${Math.round(r * 1.15)}px sans-serif`;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(p.type, x, y + 0.5);
+    ctx.textBaseline = 'alphabetic';
+  }
+
+  _drawConcentrationGraph(ctx) {
+    if (this._history.length < 2) return;
+    const { W, H } = this;
+    const gW = 198, gH = 118;
+    const gX = W - gW - 10, gY = H - gH - 10;
+
+    // Panel
+    ctx.fillStyle = 'rgba(5,5,20,0.88)';
+    ctx.strokeStyle = 'rgba(255,255,255,0.08)';
+    ctx.lineWidth = 1;
+    this._rrect(ctx, gX, gY, gW, gH, 7);
+    ctx.fill(); ctx.stroke();
+
+    // Title
+    ctx.fillStyle = 'rgba(255,255,255,0.42)';
+    ctx.font = '9px sans-serif';
+    ctx.textAlign = 'left';
+    ctx.fillText('Концентрация молекул', gX + 7, gY + 12);
+
+    const pad = { l: 8, r: 6, t: 18, b: 24 };
+    const px = gX + pad.l, py = gY + pad.t;
+    const pw = gW - pad.l - pad.r, ph = gH - pad.t - pad.b;
+    const maxN = this.N * 2.3;
+    const n = this._history.length;
+
+    // Grid lines
+    ctx.strokeStyle = 'rgba(255,255,255,0.05)';
+    ctx.lineWidth = 0.5;
+    for (let i = 0; i <= 4; i++) {
+      const yl = py + ph * (1 - i / 4);
+      ctx.beginPath(); ctx.moveTo(px, yl); ctx.lineTo(px + pw, yl); ctx.stroke();
+    }
+
+    // Data lines
+    const lines = [
+      { key: 'nA', color: '#06D6E0', label: 'A — реагент' },
+      { key: 'nB', color: '#EF476F', label: 'B — реагент' },
+      { key: 'nC', color: '#FFD166', label: 'C — продукт' },
+    ];
+    for (const { key, color } of lines) {
+      ctx.beginPath();
+      ctx.strokeStyle = color;
+      ctx.lineWidth = 1.6;
+      for (let i = 0; i < n; i++) {
+        const lx = px + (i / Math.max(n - 1, 1)) * pw;
+        const ly = py + ph - Math.min(this._history[i][key] / maxN, 1) * ph;
+        i === 0 ? ctx.moveTo(lx, ly) : ctx.lineTo(lx, ly);
+      }
+      ctx.stroke();
+    }
+
+    // Legend + current values
+    const last = this._history[this._history.length - 1];
+    lines.forEach(({ color, label }, i) => {
+      const lx = gX + 8 + i * 58;
+      ctx.fillStyle = color;
+      ctx.fillRect(lx, gY + gH - 16, 11, 2.5);
+      ctx.fillStyle = 'rgba(255,255,255,0.5)';
+      ctx.font = '8px sans-serif';
+      ctx.textAlign = 'left';
+      ctx.fillText(label.split(' ')[0], lx + 13, gY + gH - 12);
+    });
+    ctx.fillStyle = 'rgba(255,255,255,0.3)';
+    ctx.font = '8px monospace';
+    ctx.textAlign = 'right';
+    ctx.fillText(`A:${last.nA}  B:${last.nB}  C:${last.nC}`, gX + gW - 6, gY + gH - 12);
+  }
+
+  _drawEnergyDiagram(ctx) {
+    const { W } = this;
+    const dW = 158, dH = 100;
+    const dX = W - dW - 10, dY = 10;
+
+    ctx.fillStyle = 'rgba(5,5,20,0.88)';
+    ctx.strokeStyle = 'rgba(255,255,255,0.08)';
+    ctx.lineWidth = 1;
+    this._rrect(ctx, dX, dY, dW, dH, 7);
+    ctx.fill(); ctx.stroke();
+
+    ctx.fillStyle = 'rgba(255,255,255,0.42)';
+    ctx.font = '9px sans-serif';
+    ctx.textAlign = 'left';
+    ctx.fillText('Профиль энергии', dX + 7, dY + 12);
+
+    const pad = { l: 22, r: 10, t: 18, b: 20 };
+    const ex = dX + pad.l, ey_bot = dY + dH - pad.b;
+    const ew = dW - pad.l - pad.r, eh = dH - pad.t - pad.b;
+
+    const rE = 0.15;
+    const tE = 0.85;
+    const pE = Math.max(0.04, rE + this._diagDeltaH());
+    const toY = e => ey_bot - e * eh;
+
+    // Smooth reaction path
+    ctx.beginPath();
+    ctx.strokeStyle = 'rgba(255,200,60,0.78)';
+    ctx.lineWidth = 2;
+    ctx.moveTo(ex, toY(rE));
+    ctx.lineTo(ex + ew * 0.15, toY(rE));
+    ctx.bezierCurveTo(
+      ex + ew * 0.32, toY(rE),
+      ex + ew * 0.40, toY(tE),
+      ex + ew * 0.50, toY(tE)
+    );
+    ctx.bezierCurveTo(
+      ex + ew * 0.60, toY(tE),
+      ex + ew * 0.68, toY(pE),
+      ex + ew * 0.85, toY(pE)
+    );
+    ctx.lineTo(ex + ew, toY(pE));
+    ctx.stroke();
+
+    // Horizontal dashes at levels
+    ctx.setLineDash([2, 3]);
+    ctx.strokeStyle = 'rgba(255,255,255,0.1)';
+    ctx.lineWidth = 0.75;
+    [rE, pE].forEach(e => {
+      ctx.beginPath(); ctx.moveTo(ex, toY(e)); ctx.lineTo(ex + ew, toY(e)); ctx.stroke();
+    });
+    ctx.setLineDash([]);
+
+    // Ea bracket (left side)
+    ctx.strokeStyle = 'rgba(255,255,255,0.28)';
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(ex - 3, toY(rE)); ctx.lineTo(ex - 8, toY(rE));
+    ctx.moveTo(ex - 3, toY(tE)); ctx.lineTo(ex - 8, toY(tE));
+    ctx.moveTo(ex - 7, toY(rE)); ctx.lineTo(ex - 7, toY(tE));
+    ctx.stroke();
+    ctx.fillStyle = 'rgba(255,255,255,0.38)';
+    ctx.font = '8px sans-serif';
+    ctx.textAlign = 'right';
+    ctx.fillText('Ea', ex - 9, toY((rE + tE) / 2) + 3);
+
+    // Labels
+    ctx.fillStyle = '#06D6E0cc';
+    ctx.font = '8px sans-serif';
+    ctx.textAlign = 'left';
+    ctx.fillText('A+B', ex, toY(rE) - 4);
+    ctx.fillStyle = '#FFD166cc';
+    ctx.textAlign = 'right';
+    ctx.fillText('C', ex + ew, toY(pE) - 4);
+
+    // Mode label at bottom
+    const modeTxt = { forward: '<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>  A + B <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> C', reversible: '⇌  A + B ⇌ C', chain: 'цепная реакция' }[this.mode] || '';
+    ctx.fillStyle = 'rgba(255,255,255,0.22)';
+    ctx.font = '8px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.fillText(modeTxt, dX + dW / 2, dY + dH - 6);
+  }
+
+  _diagDeltaH() {
+    // Visual ΔH for energy diagram: exothermic by default
+    return -(0.10 + this.Ea * 0.045);
+  }
+
+  _drawLegend(ctx) {
+    const items = [
+      { color: '#06D6E0', label: 'A — реагент' },
+      { color: '#EF476F', label: 'B — реагент' },
+      { color: '#FFD166', label: 'C — продукт' },
+    ];
+    const lX = 10, lY = 10, lW = 120, lH = 14 * items.length + 14;
+    ctx.fillStyle = 'rgba(5,5,20,0.78)';
+    ctx.strokeStyle = 'rgba(255,255,255,0.07)';
+    ctx.lineWidth = 1;
+    this._rrect(ctx, lX, lY, lW, lH, 6);
+    ctx.fill(); ctx.stroke();
+
+    items.forEach(({ color, label }, i) => {
+      const iy = lY + 14 + i * 14;
+      ctx.fillStyle = color;
+      ctx.beginPath();
+      ctx.arc(lX + 12, iy, 4.5, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.fillStyle = 'rgba(255,255,255,0.52)';
+      ctx.font = '9px sans-serif';
+      ctx.textAlign = 'left';
+      ctx.fillText(label, lX + 22, iy + 3.5);
+    });
+  }
+
+  _rrect(ctx, x, y, w, h, r) {
+    ctx.beginPath();
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + w - r, y);
+    ctx.quadraticCurveTo(x + w, y, x + w, y + r);
+    ctx.lineTo(x + w, y + h - r);
+    ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+    ctx.lineTo(x + r, y + h);
+    ctx.quadraticCurveTo(x, y + h, x, y + h - r);
+    ctx.lineTo(x, y + r);
+    ctx.quadraticCurveTo(x, y, x + r, y);
+    ctx.closePath();
+  }
+}
diff --git a/frontend/js/labs/redox.js b/frontend/js/labs/redox.js
new file mode 100644
index 0000000..962046a
--- /dev/null
+++ b/frontend/js/labs/redox.js
@@ -0,0 +1,503 @@
+'use strict';
+/* ====================================================================
+   RedoxSim — Окислительно-восстановительные реакции
+   ==================================================================== */
+
+class RedoxSim {
+
+  /* ── Данные реакций ──────────────────────────────────────────────── */
+
+  static RXN = {
+    fe_cu: {
+      name: 'Fe + CuSO₄',
+      reducer:  { f: 'Fe',    name: 'Железо',       color: '#A0856A', ox: 0  },
+      oxidizer: { f: 'Cu²⁺',  name: 'Ион меди',     color: '#29B6F6', ox: 2  },
+      prod_r:   { f: 'Fe²⁺',  color: '#66BB6A', ox: 2 },
+      prod_o:   { f: 'Cu',    color: '#C87840', ox: 0, solid: true },
+      e: 2,
+      half_r:   'Fe⁰ – 2e⁻ <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> Fe²⁺       окисление',
+      half_o:   'Cu²⁺ + 2e⁻ <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> Cu⁰       восстановление',
+      eq_ion:   'Fe + Cu²⁺ <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> Fe²⁺ + Cu<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>',
+      eq_mol:   'Fe + CuSO₄ <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> FeSO₄ + Cu<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>',
+      sol_a: '#1565C040', sol_b: '#2E7D3230',
+      precip: true, pcolor: '#C87840', pname: 'медь Cu',
+    },
+    zn_hcl: {
+      name: 'Zn + HCl',
+      reducer:  { f: 'Zn',   name: 'Цинк',      color: '#90A4AE', ox: 0 },
+      oxidizer: { f: 'H⁺',   name: 'Ион H⁺',    color: '#EF5350', ox: 1 },
+      prod_r:   { f: 'Zn²⁺', color: '#80CBC4',  ox: 2 },
+      prod_o:   { f: 'H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',  color: '#EEEEEE',  ox: 0, gas: true },
+      e: 2,
+      half_r:   'Zn⁰ – 2e⁻ <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> Zn²⁺       окисление',
+      half_o:   '2H⁺ + 2e⁻ <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> H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>        восстановление',
+      eq_ion:   'Zn + 2H⁺ <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> Zn²⁺ + H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',
+      eq_mol:   'Zn + 2HCl <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> ZnCl₂ + H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>',
+      sol_a: '#EF525228', sol_b: '#E0F2F118',
+      gas: true, gcolor: '#CFD8DC', gname: 'водород H₂',
+    },
+    cl2_ki: {
+      name: 'Cl₂ + KI',
+      reducer:  { f: 'I⁻',   name: 'Иодид-ион', color: '#CE93D8', ox: -1 },
+      oxidizer: { f: 'Cl₂',  name: 'Хлор',      color: '#D4E157', ox:  0 },
+      prod_r:   { f: 'I₂',   color: '#6A1B9A',  ox: 0, solid: true },
+      prod_o:   { f: 'Cl⁻',  color: '#AED581',  ox: -1 },
+      e: 1,
+      half_r:   '2I⁻ – 2e⁻ <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> I₂          окисление',
+      half_o:   'Cl₂ + 2e⁻ <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> 2Cl⁻        восстановление',
+      eq_ion:   'Cl₂ + 2I⁻ <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> I₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> + 2Cl⁻',
+      eq_mol:   'Cl₂ + 2KI <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> I₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> + 2KCl',
+      sol_a: '#7B1FA230', sol_b: '#F9A82520',
+      precip: true, pcolor: '#6A1B9A', pname: 'йод I₂',
+    },
+    kmno4: {
+      name: 'KMnO₄ + FeSO₄',
+      reducer:  { f: 'Fe²⁺',  name: 'Ион Fe²⁺',     color: '#66BB6A', ox: 2 },
+      oxidizer: { f: 'MnO₄⁻', name: 'Перманганат',   color: '#AB47BC', ox: 7 },
+      prod_r:   { f: 'Fe³⁺',  color: '#FFA726', ox: 3 },
+      prod_o:   { f: 'Mn²⁺',  color: '#FFF9C4', ox: 2 },
+      e: 5,
+      half_r:   'Fe²⁺ – e⁻ <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> Fe³⁺  (×5)  окисление',
+      half_o:   'MnO₄⁻+8H⁺+5e⁻<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>Mn²⁺+4H₂O  восстановление',
+      eq_ion:   'MnO₄⁻ + 5Fe²⁺ + 8H⁺ <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> Mn²⁺ + 5Fe³⁺ + 4H₂O',
+      eq_mol:   '2KMnO₄ + 10FeSO₄ + 8H₂SO₄ <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> 2MnSO₄ + 5Fe₂(SO₄)₃ + K₂SO₄ + 8H₂O',
+      sol_a: '#7B1FA250', sol_b: '#F9A82515',
+      colorChange: true, newSolColor: '#FFF9C428', newName: 'бесцветный MnSO₄',
+    },
+    cu_fecl3: {
+      name: 'Cu + FeCl₃',
+      reducer:  { f: 'Cu',    name: 'Медь',      color: '#C87840', ox: 0 },
+      oxidizer: { f: 'Fe³⁺',  name: 'Ион Fe³⁺',  color: '#FFA726', ox: 3 },
+      prod_r:   { f: 'Cu²⁺',  color: '#29B6F6',  ox: 2 },
+      prod_o:   { f: 'Fe²⁺',  color: '#66BB6A',  ox: 2 },
+      e: 1,
+      half_r:   'Cu⁰ – 2e⁻ <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> Cu²⁺       окисление',
+      half_o:   '2Fe³⁺ + 2e⁻ <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> 2Fe²⁺    восстановление',
+      eq_ion:   'Cu + 2Fe³⁺ <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> Cu²⁺ + 2Fe²⁺',
+      eq_mol:   'Cu + 2FeCl₃ <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> CuCl₂ + 2FeCl₂',
+      sol_a: '#E6510018', sol_b: '#1565C018',
+      colorChange: true, newSolColor: '#1565C030', newName: 'синий CuCl₂',
+    },
+  };
+
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.ctx    = canvas.getContext('2d');
+    this.rxnId  = 'fe_cu';
+    this._raf   = null;
+    this._last  = 0;
+    this._t     = 0;
+    this._phase = 'idle';   // idle | mixing | reacting | done
+    this._prog  = 0;
+    this._colorT = 0;
+    this._stepIdx   = 0;
+    this._stepTimer = 0;
+    this._eParts = [];
+    this._rParts = [];
+    this._oParts = [];
+    this._precip = [];
+    this._gas    = [];
+    this.W = 0; this.H = 0;
+    this.onUpdate = null;
+    this.fit();
+    this._initParts();
+  }
+
+  fit() {
+    const dpr = window.devicePixelRatio || 1;
+    const W = this.canvas.offsetWidth  || 600;
+    const H = this.canvas.offsetHeight || 400;
+    this.canvas.width  = Math.round(W * dpr);
+    this.canvas.height = Math.round(H * dpr);
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this.W = W; this.H = H;
+    this._initParts();
+  }
+
+  setReaction(id) {
+    if (!RedoxSim.RXN[id]) return;
+    this.rxnId = id;
+    this.reset();
+  }
+
+  reset() {
+    this._phase = 'idle'; this._prog = 0; this._colorT = 0;
+    this._stepIdx = 0; this._stepTimer = 0;
+    this._eParts = []; this._precip = []; this._gas = [];
+    this._initParts();
+    this.draw();
+  }
+
+  _initParts() {
+    const { W, H } = this;
+    const N = 16;
+    this._rParts = Array.from({ length: N }, () => ({
+      x: W * 0.22 + (Math.random() - 0.5) * W * 0.22,
+      y: H * 0.42 + (Math.random() - 0.5) * H * 0.34,
+      vx: (Math.random() - 0.5) * 0.6, vy: (Math.random() - 0.5) * 0.6,
+      r: 11 + Math.random() * 4,
+      phase: Math.random() * Math.PI * 2,
+      trans: false, flashT: 0,
+    }));
+    this._oParts = Array.from({ length: N }, () => ({
+      x: W * 0.78 + (Math.random() - 0.5) * W * 0.22,
+      y: H * 0.42 + (Math.random() - 0.5) * H * 0.34,
+      vx: (Math.random() - 0.5) * 0.6, vy: (Math.random() - 0.5) * 0.6,
+      r: 11 + Math.random() * 4,
+      phase: Math.random() * Math.PI * 2,
+      trans: false, flashT: 0,
+    }));
+  }
+
+  start() {
+    if (this._phase !== 'idle') this.reset();
+    this._phase = 'mixing'; this._prog = 0;
+    if (this._raf) return;
+    this._last = performance.now();
+    const loop = t => { this._raf = requestAnimationFrame(loop); this._tick(t); };
+    this._raf = requestAnimationFrame(loop);
+  }
+
+  stop() { cancelAnimationFrame(this._raf); this._raf = null; }
+
+  /* ── Физика ─────────────────────────────────────────────────────── */
+
+  _tick(t) {
+    const dt = Math.min((t - this._last) / 1000, 0.05);
+    this._last = t; this._t += dt;
+    const { W, H } = this;
+    const rxn = RedoxSim.RXN[this.rxnId];
+
+    if (this._phase === 'mixing') {
+      this._prog = Math.min(1, this._prog + dt * 0.38);
+      const all = [...this._rParts, ...this._oParts];
+      all.forEach(p => {
+        const tx = W * 0.5 + (Math.random() - 0.5) * W * 0.52;
+        const ty = H * 0.44 + (Math.random() - 0.5) * H * 0.34;
+        p.vx += (tx - p.x) * 0.003 * this._prog;
+        p.vy += (ty - p.y) * 0.003 * this._prog;
+        p.vx += (Math.random() - 0.5) * 0.5;
+        p.vy += (Math.random() - 0.5) * 0.5;
+        p.vx *= 0.90; p.vy *= 0.90;
+        p.x += p.vx; p.y += p.vy;
+        p.phase += dt * 1.5;
+        this._clamp(p);
+      });
+      if (this._prog >= 1) { this._phase = 'reacting'; this._prog = 0; }
+    }
+
+    if (this._phase === 'reacting') {
+      this._prog = Math.min(1, this._prog + dt * 0.14);
+      this._colorT = this._prog;
+      this._stepTimer += dt;
+      if (this._stepTimer > 1.6 && this._stepIdx < 3) { this._stepIdx++; this._stepTimer = 0; }
+
+      const all = [...this._rParts, ...this._oParts];
+      all.forEach(p => {
+        p.vx += (Math.random() - 0.5) * 0.9;
+        p.vy += (Math.random() - 0.5) * 0.9;
+        p.vx *= 0.87; p.vy *= 0.87;
+        p.x += p.vx; p.y += p.vy;
+        p.phase += dt * 2;
+        p.flashT = Math.max(0, p.flashT - dt * 3);
+        this._clamp(p);
+      });
+
+      /* Transform particles proportional to progress */
+      const rT = Math.floor(this._prog * this._rParts.length);
+      const oT = Math.floor(this._prog * this._oParts.length);
+      this._rParts.forEach((p, i) => {
+        if (i < rT && !p.trans) { p.trans = true; p.flashT = 1; }
+      });
+      this._oParts.forEach((p, i) => {
+        if (i < oT && !p.trans) {
+          p.trans = true; p.flashT = 1;
+          if (rxn.precip) this._precip.push({ x: p.x, y: p.y, vy: 0, r: 3 + Math.random() * 3, settled: false });
+          if (rxn.gas)    this._gas.push({ x: p.x, y: p.y, vy: -(1.5 + Math.random()), vx: (Math.random() - 0.5) * 0.5, r: 2 + Math.random() * 3, alpha: 1 });
+        }
+      });
+
+      if (Math.random() < 0.22 && this._prog > 0.05) this._spawnE();
+      if (this._prog >= 1) { this._phase = 'done'; this._stepIdx = 3; }
+    }
+
+    if (this._phase === 'done') {
+      const all = [...this._rParts, ...this._oParts];
+      all.forEach(p => {
+        p.vx += (Math.random() - 0.5) * 0.45;
+        p.vy += (Math.random() - 0.5) * 0.45;
+        p.vx *= 0.92; p.vy *= 0.92;
+        p.x += p.vx; p.y += p.vy;
+        p.phase += dt;
+        this._clamp(p);
+      });
+    }
+
+    /* Electrons — quadratic bezier arc */
+    this._eParts = this._eParts.filter(e => e.t < 1);
+    this._eParts.forEach(e => {
+      e.t = Math.min(1, e.t + dt * e.spd);
+      const u = e.t;
+      e.x = (1-u)*(1-u)*e.x0 + 2*(1-u)*u*e.mx + u*u*e.x1;
+      e.y = (1-u)*(1-u)*e.y0 + 2*(1-u)*u*e.my + u*u*e.y1;
+      e.alpha = u < 0.1 ? u * 10 : u > 0.85 ? (1 - u) / 0.15 : 1;
+    });
+
+    /* Precipitate */
+    this._precip.forEach(p => {
+      if (!p.settled) {
+        p.vy = Math.min(p.vy + 0.15, 5);
+        p.y += p.vy;
+        if (p.y >= H * 0.78) { p.y = H * 0.78; p.vy = 0; p.settled = true; }
+      }
+    });
+
+    /* Gas */
+    this._gas.forEach(b => { b.y += b.vy; b.x += b.vx; b.vy -= 0.01; b.alpha -= 0.005; });
+    this._gas = this._gas.filter(b => b.alpha > 0 && b.y > 10);
+
+    this.draw();
+    if (this.onUpdate) this.onUpdate(this.info());
+  }
+
+  _clamp(p) {
+    const { W, H } = this;
+    const bot = H * 0.78;
+    if (p.x < p.r + 6)     { p.x = p.r + 6;     p.vx *= -0.5; }
+    if (p.x > W - p.r - 6) { p.x = W - p.r - 6; p.vx *= -0.5; }
+    if (p.y < p.r + 6)     { p.y = p.r + 6;     p.vy *= -0.5; }
+    if (p.y > bot - p.r)   { p.y = bot - p.r;   p.vy *= -0.5; }
+  }
+
+  _spawnE() {
+    const freeR = this._rParts.filter(p => !p.trans);
+    const freeO = this._oParts.filter(p => !p.trans);
+    if (!freeR.length || !freeO.length) return;
+    const rp = freeR[Math.floor(Math.random() * freeR.length)];
+    const op = freeO[Math.floor(Math.random() * freeO.length)];
+    const mx = (rp.x + op.x) / 2;
+    const my = Math.min(rp.y, op.y) - 45 - Math.random() * 40;
+    this._eParts.push({
+      x0: rp.x, y0: rp.y, x1: op.x, y1: op.y,
+      mx, my, x: rp.x, y: rp.y,
+      t: 0, spd: 0.65 + Math.random() * 0.45, alpha: 0,
+    });
+  }
+
+  /* ── Рендеринг ──────────────────────────────────────────────────── */
+
+  draw() {
+    const { ctx, W, H } = this;
+    const rxn = RedoxSim.RXN[this.rxnId];
+
+    /* Background */
+    ctx.fillStyle = '#07071A';
+    ctx.fillRect(0, 0, W, H);
+
+    /* Dot grid */
+    ctx.fillStyle = 'rgba(255,255,255,0.07)';
+    for (let x = 0; x < W; x += 28) {
+      for (let y = 0; y < H; y += 28) {
+        ctx.beginPath(); ctx.arc(x, y, 0.8, 0, Math.PI * 2); ctx.fill();
+      }
+    }
+
+    /* Solution tint */
+    const bx = W * 0.04, bw = W * 0.92, bTop = H * 0.08, bBot = H * 0.80;
+    if (this._phase === 'idle') {
+      if (rxn.sol_a) { ctx.save(); ctx.fillStyle = rxn.sol_a; ctx.fillRect(bx, bTop, bw / 2, bBot - bTop); ctx.restore(); }
+      if (rxn.sol_b) { ctx.save(); ctx.fillStyle = rxn.sol_b; ctx.fillRect(bx + bw / 2, bTop, bw / 2, bBot - bTop); ctx.restore(); }
+      /* Dashed divider */
+      ctx.save();
+      ctx.setLineDash([6, 5]); ctx.strokeStyle = 'rgba(255,255,255,0.10)'; ctx.lineWidth = 1.5;
+      ctx.beginPath(); ctx.moveTo(W / 2, bTop + 4); ctx.lineTo(W / 2, bBot - 4); ctx.stroke();
+      ctx.setLineDash([]); ctx.restore();
+      /* Zone labels */
+      ctx.save();
+      ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+      ctx.fillStyle = 'rgba(255,255,255,0.25)'; ctx.font = 'bold 12px sans-serif';
+      ctx.fillText(rxn.reducer.name, W * 0.22, bTop + 8);
+      ctx.fillStyle = 'rgba(255,255,255,0.14)'; ctx.font = '10px sans-serif';
+      ctx.fillText('восстановитель', W * 0.22, bTop + 26);
+      ctx.fillStyle = 'rgba(255,255,255,0.25)'; ctx.font = 'bold 12px sans-serif';
+      ctx.fillText(rxn.oxidizer.name, W * 0.78, bTop + 8);
+      ctx.fillStyle = 'rgba(255,255,255,0.14)'; ctx.font = '10px sans-serif';
+      ctx.fillText('окислитель', W * 0.78, bTop + 26);
+      ctx.restore();
+    } else if (this._colorT > 0) {
+      if (rxn.sol_a) {
+        ctx.save(); ctx.globalAlpha = 1 - this._colorT * 0.7;
+        ctx.fillStyle = rxn.sol_a; ctx.fillRect(bx, bTop, bw, bBot - bTop); ctx.restore();
+      }
+      if (rxn.colorChange && rxn.newSolColor) {
+        ctx.save(); ctx.globalAlpha = this._colorT * 0.55;
+        ctx.fillStyle = rxn.newSolColor; ctx.fillRect(bx, bTop, bw, bBot - bTop); ctx.restore();
+      }
+    }
+
+    this._drawBeaker(ctx, W, H);
+    this._drawParticles(ctx, rxn);
+    this._drawElectrons(ctx);
+    if (rxn.precip) this._drawPrecip(ctx, rxn);
+    if (rxn.gas)    this._drawGas(ctx, rxn);
+    this._drawPanel(ctx, W, H, rxn);
+  }
+
+  _drawBeaker(ctx, W, H) {
+    const bx = W * 0.04, by = H * 0.08, bw = W * 0.92, bh = H * 0.73;
+    ctx.save();
+    ctx.strokeStyle = 'rgba(120,185,255,0.60)'; ctx.lineWidth = 2.5;
+    ctx.beginPath();
+    ctx.moveTo(bx, by); ctx.lineTo(bx, by + bh);
+    ctx.lineTo(bx + bw, by + bh); ctx.lineTo(bx + bw, by);
+    ctx.stroke();
+    ctx.beginPath(); ctx.moveTo(bx - 5, by); ctx.lineTo(bx + bw + 5, by); ctx.stroke();
+    /* Left highlight */
+    const hlg = ctx.createLinearGradient(bx, by, bx + 18, by + bh);
+    hlg.addColorStop(0, 'rgba(200,230,255,0.18)');
+    hlg.addColorStop(1, 'rgba(200,230,255,0.02)');
+    ctx.strokeStyle = hlg; ctx.lineWidth = 6;
+    ctx.beginPath(); ctx.moveTo(bx + 8, by + 8); ctx.lineTo(bx + 8, by + bh - 8); ctx.stroke();
+    ctx.restore();
+  }
+
+  _drawParticles(ctx, rxn) {
+    const draw1 = (p, spec, prod) => {
+      const s = p.trans ? prod : spec;
+      ctx.save();
+      ctx.shadowColor = p.flashT > 0 ? '#FFFFFF' : s.color;
+      ctx.shadowBlur = p.flashT > 0 ? 28 * p.flashT : 8 + Math.sin(p.phase) * 3;
+      ctx.globalAlpha = 0.88;
+      ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
+      ctx.fillStyle = p.flashT > 0 ? `rgba(255,255,255,${p.flashT * 0.9})` : s.color;
+      ctx.fill();
+      ctx.strokeStyle = 'rgba(255,255,255,0.22)'; ctx.lineWidth = 1; ctx.stroke();
+      ctx.shadowBlur = 0; ctx.globalAlpha = 1;
+      /* Oxidation state */
+      const ox = p.trans ? prod.ox : spec.ox;
+      const oxStr = ox > 0 ? `+${ox}` : ox < 0 ? `${ox}` : '0';
+      ctx.fillStyle = p.trans ? '#FFD166' : 'rgba(255,255,255,0.88)';
+      ctx.font = `bold ${Math.round(p.r * 0.78)}px monospace`;
+      ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+      ctx.fillText(oxStr, p.x, p.y);
+      ctx.restore();
+    };
+    this._rParts.forEach(p => draw1(p, rxn.reducer, rxn.prod_r));
+    this._oParts.forEach(p => draw1(p, rxn.oxidizer, rxn.prod_o));
+  }
+
+  _drawElectrons(ctx) {
+    this._eParts.forEach(e => {
+      ctx.save();
+      ctx.globalAlpha = e.alpha;
+      ctx.shadowColor = '#4FC3F7'; ctx.shadowBlur = 16;
+      ctx.beginPath(); ctx.arc(e.x, e.y, 5.5, 0, Math.PI * 2);
+      ctx.fillStyle = '#4FC3F7'; ctx.fill();
+      ctx.shadowBlur = 0;
+      ctx.fillStyle = 'rgba(255,255,255,0.95)';
+      ctx.font = 'bold 7px monospace';
+      ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+      ctx.fillText('e⁻', e.x, e.y);
+      ctx.restore();
+    });
+  }
+
+  _drawPrecip(ctx, rxn) {
+    if (!this._precip.length) return;
+    ctx.save();
+    this._precip.forEach(p => {
+      ctx.shadowColor = rxn.pcolor; ctx.shadowBlur = 4;
+      ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
+      ctx.fillStyle = rxn.pcolor; ctx.fill();
+    });
+    ctx.restore();
+    /* Label when settled */
+    const settled = this._precip.filter(p => p.settled);
+    if (settled.length > 3) {
+      ctx.save();
+      ctx.fillStyle = rxn.pcolor; ctx.font = 'bold 10px monospace';
+      ctx.textAlign = 'center'; ctx.textBaseline = 'bottom';
+      ctx.shadowColor = rxn.pcolor; ctx.shadowBlur = 6;
+      ctx.fillText(`↓ ${rxn.pname}`, this.W / 2, this.H * 0.80 - 4);
+      ctx.restore();
+    }
+  }
+
+  _drawGas(ctx, rxn) {
+    this._gas.forEach(b => {
+      ctx.save(); ctx.globalAlpha = b.alpha * 0.75;
+      ctx.shadowColor = rxn.gcolor; ctx.shadowBlur = 5;
+      ctx.beginPath(); ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2);
+      ctx.strokeStyle = rxn.gcolor; ctx.lineWidth = 1; ctx.stroke();
+      ctx.restore();
+    });
+    const count = this._gas.length;
+    if (count > 2) {
+      ctx.save();
+      ctx.fillStyle = rxn.gcolor; ctx.font = 'bold 10px monospace';
+      ctx.textAlign = 'center'; ctx.shadowColor = rxn.gcolor; ctx.shadowBlur = 6;
+      ctx.fillText(`↑ ${rxn.gname}`, this.W / 2, this.H * 0.12);
+      ctx.restore();
+    }
+  }
+
+  _drawPanel(ctx, W, H, rxn) {
+    const py = H * 0.82;
+    ctx.fillStyle = 'rgba(7,7,26,0.94)';
+    ctx.fillRect(0, py, W, H - py);
+    ctx.strokeStyle = 'rgba(100,165,255,0.25)'; ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.moveTo(0, py); ctx.lineTo(W, py); ctx.stroke();
+
+    if (this._phase === 'idle') {
+      ctx.fillStyle = '#37474F'; ctx.font = '11px monospace';
+      ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+      ctx.fillText('← Нажми «Начать» для запуска реакции →', W / 2, py + (H - py) / 2);
+      return;
+    }
+
+    const steps = [
+      { lbl: 'Молекулярное:', txt: rxn.eq_mol,  col: '#B0BEC5' },
+      { lbl: 'Окисление:',    txt: rxn.half_r,  col: '#EF476F' },
+      { lbl: 'Восстановление:', txt: rxn.half_o, col: '#4CC9F0' },
+      { lbl: 'Ионное:',       txt: rxn.eq_ion,  col: '#FFD166' },
+    ];
+
+    const panH = H - py;
+    const n = Math.min(this._stepIdx + 1, steps.length);
+    for (let i = 0; i < n; i++) {
+      const s = steps[i];
+      const y = py + 11 + i * (panH * 0.22);
+      ctx.save();
+      if (i === this._stepIdx && this._phase !== 'done') {
+        ctx.fillStyle = 'rgba(255,255,255,0.04)';
+        ctx.fillRect(8, y - 9, W - 16, 20);
+      }
+      ctx.fillStyle = s.col; ctx.font = 'bold 9.5px monospace';
+      ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
+      ctx.fillText(s.lbl, 14, y);
+      ctx.fillStyle = (i === this._stepIdx && this._phase !== 'done') ? '#FFF' : 'rgba(255,255,255,0.62)';
+      ctx.font = '9.5px monospace';
+      ctx.fillText(s.txt, 14 + ctx.measureText(s.lbl).width + 8, y);
+      ctx.restore();
+    }
+
+    if (this._phase === 'done') {
+      ctx.save();
+      ctx.fillStyle = '#7BF5A4'; ctx.font = 'bold 10px monospace';
+      ctx.textAlign = 'right'; ctx.textBaseline = 'top';
+      ctx.shadowColor = '#7BF5A4'; ctx.shadowBlur = 8;
+      ctx.fillText('✓ Реакция завершена', W - 14, py + 3);
+      ctx.restore();
+    }
+  }
+
+  info() {
+    const rxn = RedoxSim.RXN[this.rxnId];
+    return {
+      rxn:  rxn.name,
+      phase: this._phase,
+      prog: Math.round((this._phase === 'reacting' ? this._prog : this._phase === 'done' ? 1 : 0) * 100),
+      e: rxn.e,
+    };
+  }
+}
diff --git a/frontend/js/labs/refraction.js b/frontend/js/labs/refraction.js
new file mode 100644
index 0000000..5470eb0
--- /dev/null
+++ b/frontend/js/labs/refraction.js
@@ -0,0 +1,497 @@
+'use strict';
+/* ══════════════════════════════════════════════════════════════
+   RefractionSim — light refraction simulation (Snell's law)
+   n₁·sin(θ₁) = n₂·sin(θ₂)
+   Total internal reflection · Fresnel coefficients · Dispersion
+   Interactive incident ray drag · Presets
+   ══════════════════════════════════════════════════════════════ */
+
+class RefractionSim {
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.ctx    = canvas.getContext('2d');
+    this.W = 0; this.H = 0;
+
+    /* physics */
+    this.n1    = 1.0;    // refractive index of top medium
+    this.n2    = 1.5;    // refractive index of bottom medium
+    this.angle = 30;     // incidence angle in degrees
+
+    /* dispersion mode */
+    this.dispersion = false;
+
+    /* drag state */
+    this._drag = false;
+
+    /* callback */
+    this.onUpdate = null;
+
+    this._bindEvents();
+    new ResizeObserver(() => { this.fit(); this.draw(); }).observe(canvas.parentElement);
+  }
+
+  /* ── public API ─────────────────────────────── */
+
+  fit() {
+    const dpr = window.devicePixelRatio || 1;
+    const w = this.canvas.offsetWidth || 600;
+    const h = this.canvas.offsetHeight || 400;
+    this.canvas.width  = w * dpr;
+    this.canvas.height = h * dpr;
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this.W = w; this.H = h;
+  }
+
+  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));
+    if (angle !== undefined) this.angle = Math.max(0, Math.min(89, +angle));
+    if (dispersion !== undefined) this.dispersion = !!dispersion;
+    this.draw();
+    this._emit();
+  }
+
+  reset() {
+    this.n1 = 1.0; this.n2 = 1.5; this.angle = 30;
+    this.dispersion = false;
+    this.draw();
+    this._emit();
+  }
+
+  info() {
+    const { n1, n2, angle } = this;
+    const theta1Rad = angle * Math.PI / 180;
+    const sinTheta2 = (n1 / n2) * Math.sin(theta1Rad);
+    const isTIR = Math.abs(sinTheta2) > 1;
+    const criticalAngle = n1 > n2
+      ? +(Math.asin(n2 / n1) * 180 / Math.PI).toFixed(1)
+      : null;
+
+    let angle2;
+    if (isTIR) {
+      angle2 = 'ПВО';
+    } else {
+      angle2 = +(Math.asin(sinTheta2) * 180 / Math.PI).toFixed(1);
+    }
+
+    return {
+      n1: +n1.toFixed(2),
+      n2: +n2.toFixed(2),
+      angle1: +angle.toFixed(1),
+      angle2,
+      criticalAngle,
+      isTIR,
+    };
+  }
+
+  /* ── presets ────────────────────────────────── */
+
+  static PRESETS = {
+    air_glass:   { n1: 1.0,  n2: 1.5,  angle: 30 },
+    glass_air:   { n1: 1.5,  n2: 1.0,  angle: 30 },
+    water_glass: { n1: 1.33, n2: 1.5,  angle: 30 },
+    diamond:     { n1: 1.0,  n2: 2.42, angle: 45 },
+  };
+
+  /* ── internals ─────────────────────────────── */
+
+  _emit() { if (this.onUpdate) this.onUpdate(this.info()); }
+
+  /* ── draw ──────────────────────────────────── */
+
+  draw() {
+    const ctx = this.ctx, W = this.W, H = this.H;
+    if (!W || !H) return;
+
+    const midY = H / 2;
+    const hitX = W / 2;
+    const hitY = midY;
+
+    /* --- background: two media --- */
+    // top medium (lighter)
+    const gradTop = ctx.createLinearGradient(0, 0, 0, midY);
+    gradTop.addColorStop(0, '#131328');
+    gradTop.addColorStop(1, '#1a1a3a');
+    ctx.fillStyle = gradTop;
+    ctx.fillRect(0, 0, W, midY);
+
+    // bottom medium (darker, denser feel)
+    const gradBot = ctx.createLinearGradient(0, midY, 0, H);
+    gradBot.addColorStop(0, '#0e1a2e');
+    gradBot.addColorStop(1, '#0D0D1A');
+    ctx.fillStyle = gradBot;
+    ctx.fillRect(0, midY, W, H - midY);
+
+    /* --- interface line with glow --- */
+    ctx.save();
+    ctx.shadowColor = 'rgba(155, 93, 229, 0.4)';
+    ctx.shadowBlur = 12;
+    ctx.strokeStyle = 'rgba(155, 93, 229, 0.5)';
+    ctx.lineWidth = 2;
+    ctx.beginPath(); ctx.moveTo(0, midY); ctx.lineTo(W, midY); ctx.stroke();
+    ctx.restore();
+
+    /* --- normal line (dashed vertical) --- */
+    ctx.strokeStyle = 'rgba(255,255,255,0.15)';
+    ctx.lineWidth = 1;
+    ctx.setLineDash([6, 4]);
+    ctx.beginPath(); ctx.moveTo(hitX, 0); ctx.lineTo(hitX, H); ctx.stroke();
+    ctx.setLineDash([]);
+
+    /* --- physics --- */
+    const theta1Rad = this.angle * Math.PI / 180;
+    const sinTheta2 = (this.n1 / this.n2) * Math.sin(theta1Rad);
+    const isTIR = Math.abs(sinTheta2) > 1;
+
+    /* Fresnel reflectance (simplified) */
+    let R = 1;
+    if (!isTIR) {
+      const theta2Rad = Math.asin(sinTheta2);
+      const cosT1 = Math.cos(theta1Rad);
+      const cosT2 = Math.cos(theta2Rad);
+      const rs = (this.n1 * cosT1 - this.n2 * cosT2) / (this.n1 * cosT1 + this.n2 * cosT2);
+      R = rs * rs;
+    }
+
+    /* ray length (from edge to hit point) */
+    const rayLen = Math.max(W, H) * 0.6;
+
+    /* --- critical angle indicator --- */
+    if (this.n1 > this.n2) {
+      const critRad = Math.asin(this.n2 / this.n1);
+      const critDx = Math.sin(critRad);
+      const critDy = Math.cos(critRad);
+      ctx.strokeStyle = 'rgba(255,209,102,0.25)';
+      ctx.lineWidth = 1;
+      ctx.setLineDash([4, 4]);
+      // critical angle ray in top medium
+      ctx.beginPath();
+      ctx.moveTo(hitX, hitY);
+      ctx.lineTo(hitX - critDx * rayLen * 0.5, hitY - critDy * rayLen * 0.5);
+      ctx.stroke();
+      ctx.setLineDash([]);
+      // label
+      ctx.font = '10px Manrope, system-ui, sans-serif';
+      ctx.fillStyle = 'rgba(255,209,102,0.5)';
+      ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
+      const lblX = hitX - critDx * rayLen * 0.35 + 6;
+      const lblY = hitY - critDy * rayLen * 0.35;
+      ctx.fillText('θc=' + (critRad * 180 / Math.PI).toFixed(1) + '°', lblX, lblY);
+    }
+
+    if (this.dispersion && !isTIR) {
+      this._drawDispersion(ctx, hitX, hitY, midY, theta1Rad, rayLen);
+    } else {
+      this._drawMainRays(ctx, hitX, hitY, midY, theta1Rad, sinTheta2, isTIR, R, rayLen);
+    }
+
+    /* --- angle arcs --- */
+    this._drawAngleArcs(ctx, hitX, hitY, theta1Rad, sinTheta2, isTIR);
+
+    /* --- medium labels --- */
+    this._drawMediumLabels(ctx, W, H, midY);
+
+    /* --- info box --- */
+    this._drawInfoBox(ctx, isTIR, R);
+
+    /* --- drag handle indicator (incident ray endpoint) --- */
+    const incDx = Math.sin(theta1Rad);
+    const incDy = Math.cos(theta1Rad);
+    const handleX = hitX - incDx * rayLen * 0.55;
+    const handleY = hitY - incDy * rayLen * 0.55;
+    const grad = ctx.createRadialGradient(handleX, handleY, 0, handleX, handleY, 10);
+    grad.addColorStop(0, 'rgba(155,93,229,0.4)');
+    grad.addColorStop(1, 'rgba(155,93,229,0)');
+    ctx.fillStyle = grad;
+    ctx.beginPath(); ctx.arc(handleX, handleY, 10, 0, Math.PI * 2); ctx.fill();
+  }
+
+  _drawMainRays(ctx, hitX, hitY, midY, theta1Rad, sinTheta2, isTIR, R, rayLen) {
+    const incDx = Math.sin(theta1Rad);
+    const incDy = Math.cos(theta1Rad);
+
+    /* incident ray */
+    const incStartX = hitX - incDx * rayLen;
+    const incStartY = hitY - incDy * rayLen;
+    this._drawRay(ctx, incStartX, incStartY, hitX, hitY, '#9B5DE5', 2.5);
+    this._drawArrowhead(ctx, hitX, hitY, Math.atan2(hitY - incStartY, hitX - incStartX), '#9B5DE5');
+
+    /* reflected ray */
+    const refDx = incDx;   // same x component
+    const refDy = -incDy;  // flipped y
+    const refEndX = hitX + refDx * rayLen;
+    const refEndY = hitY + refDy * rayLen;  // goes up (refDy is negative of incDy)
+    const refAlpha = isTIR ? 1.0 : Math.max(0.3, Math.sqrt(R));
+    ctx.globalAlpha = refAlpha;
+    this._drawRay(ctx, hitX, hitY, refEndX, refEndY, '#EF476F', 2.5);
+    this._drawArrowhead(ctx, refEndX, refEndY, Math.atan2(refEndY - hitY, refEndX - hitX), '#EF476F');
+    ctx.globalAlpha = 1;
+
+    /* refracted ray */
+    if (!isTIR) {
+      const theta2Rad = Math.asin(sinTheta2);
+      const refracDx = Math.sin(theta2Rad);
+      const refracDy = Math.cos(theta2Rad);
+      const refracEndX = hitX + refracDx * rayLen;
+      const refracEndY = hitY + refracDy * rayLen;
+      const T = 1 - R;
+      ctx.globalAlpha = Math.max(0.3, Math.sqrt(T));
+      this._drawRay(ctx, hitX, hitY, refracEndX, refracEndY, '#06D6E0', 2.5);
+      this._drawArrowhead(ctx, refracEndX, refracEndY,
+        Math.atan2(refracEndY - hitY, refracEndX - hitX), '#06D6E0');
+      ctx.globalAlpha = 1;
+    }
+  }
+
+  _drawDispersion(ctx, hitX, hitY, midY, theta1Rad, rayLen) {
+    /* Cauchy dispersion: n(λ) = A + B/λ² */
+    const spectral = [
+      { name: 'red',    color: '#FF0000', wave: 656 },
+      { name: 'orange', color: '#FF7F00', wave: 589 },
+      { name: 'yellow', color: '#FFFF00', wave: 550 },
+      { name: 'green',  color: '#00FF00', wave: 510 },
+      { name: 'cyan',   color: '#00FFFF', wave: 475 },
+      { name: 'blue',   color: '#0000FF', wave: 450 },
+      { name: 'violet', color: '#8B00FF', wave: 400 },
+    ];
+
+    /* incident white ray */
+    const incDx = Math.sin(theta1Rad);
+    const incDy = Math.cos(theta1Rad);
+    const incStartX = hitX - incDx * rayLen;
+    const incStartY = hitY - incDy * rayLen;
+    this._drawRay(ctx, incStartX, incStartY, hitX, hitY, '#FFFFFF', 2.5);
+    this._drawArrowhead(ctx, hitX, hitY, Math.atan2(hitY - incStartY, hitX - incStartX), '#FFFFFF');
+
+    /* Cauchy coefficients derived from base n2 */
+    const A = this.n2 - 4500 / (550 * 550);
+    const B = 4500;
+
+    for (const s of spectral) {
+      const n2w = A + B / (s.wave * s.wave);
+      const sinT2 = (this.n1 / n2w) * Math.sin(theta1Rad);
+      if (Math.abs(sinT2) > 1) continue;
+      const t2 = Math.asin(sinT2);
+      const dx = Math.sin(t2);
+      const dy = Math.cos(t2);
+      ctx.globalAlpha = 0.85;
+      this._drawRay(ctx, hitX, hitY, hitX + dx * rayLen, hitY + dy * rayLen, s.color, 1.5);
+      ctx.globalAlpha = 1;
+    }
+
+    /* reflected (white, partial) */
+    const refDx = incDx;
+    const refDy = -incDy;
+    ctx.globalAlpha = 0.35;
+    this._drawRay(ctx, hitX, hitY, hitX + refDx * rayLen * 0.7, hitY + refDy * rayLen * 0.7, '#FFFFFF', 1.5);
+    ctx.globalAlpha = 1;
+  }
+
+  _drawRay(ctx, x1, y1, x2, y2, color, width) {
+    ctx.strokeStyle = color;
+    ctx.lineWidth = width;
+    ctx.lineCap = 'round';
+    ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke();
+
+    /* subtle glow */
+    ctx.save();
+    ctx.shadowColor = color;
+    ctx.shadowBlur = 8;
+    ctx.globalAlpha = 0.3;
+    ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke();
+    ctx.restore();
+  }
+
+  _drawArrowhead(ctx, x, y, angle, color) {
+    const aLen = 10;
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    ctx.lineTo(x - aLen * Math.cos(angle - 0.3), y - aLen * Math.sin(angle - 0.3));
+    ctx.lineTo(x - aLen * Math.cos(angle + 0.3), y - aLen * Math.sin(angle + 0.3));
+    ctx.closePath(); ctx.fill();
+  }
+
+  _drawAngleArcs(ctx, hitX, hitY, theta1Rad, sinTheta2, isTIR) {
+    const arcR = 50;
+    const font = '12px Manrope, system-ui, sans-serif';
+
+    /* θ₁ arc (incidence angle, measured from normal = vertical up) */
+    if (this.angle > 1) {
+      ctx.strokeStyle = 'rgba(155,93,229,0.6)';
+      ctx.lineWidth = 1.5;
+      ctx.beginPath();
+      // normal points up from hit: angle = -π/2 in canvas coords
+      // incident ray comes from upper-left
+      // Arc from normal (straight up = -π/2) to incident ray direction
+      const normAngle = -Math.PI / 2;
+      const incAngle  = -Math.PI / 2 - theta1Rad;
+      ctx.arc(hitX, hitY, arcR, Math.min(incAngle, normAngle), Math.max(incAngle, normAngle));
+      ctx.stroke();
+
+      // label
+      ctx.font = font;
+      ctx.fillStyle = '#9B5DE5';
+      ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+      const midA = normAngle - theta1Rad / 2;
+      ctx.fillText(
+        'θ₁=' + this.angle.toFixed(1) + '°',
+        hitX + (arcR + 20) * Math.cos(midA),
+        hitY + (arcR + 20) * Math.sin(midA)
+      );
+    }
+
+    /* θ₂ arc (refraction angle, measured from normal = vertical down) */
+    if (!isTIR && Math.abs(sinTheta2) <= 1) {
+      const theta2Rad = Math.asin(sinTheta2);
+      if (theta2Rad > 0.02) {
+        ctx.strokeStyle = 'rgba(6,214,224,0.6)';
+        ctx.lineWidth = 1.5;
+        ctx.beginPath();
+        const normDown = Math.PI / 2;
+        const refAngle = Math.PI / 2 + theta2Rad;
+        ctx.arc(hitX, hitY, arcR * 0.8, Math.min(normDown, refAngle), Math.max(normDown, refAngle));
+        ctx.stroke();
+
+        // label
+        const angle2Deg = theta2Rad * 180 / Math.PI;
+        ctx.font = font;
+        ctx.fillStyle = '#06D6E0';
+        ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+        const midA2 = normDown + theta2Rad / 2;
+        ctx.fillText(
+          'θ₂=' + angle2Deg.toFixed(1) + '°',
+          hitX + (arcR * 0.8 + 20) * Math.cos(midA2),
+          hitY + (arcR * 0.8 + 20) * Math.sin(midA2)
+        );
+      }
+    }
+  }
+
+  _drawMediumLabels(ctx, W, H, midY) {
+    ctx.font = '13px Manrope, system-ui, sans-serif';
+    ctx.textBaseline = 'middle';
+
+    /* top medium */
+    ctx.fillStyle = 'rgba(155,93,229,0.6)';
+    ctx.textAlign = 'left';
+    ctx.fillText('n₁ = ' + this.n1.toFixed(2), 16, midY - 30);
+
+    /* bottom medium */
+    ctx.fillStyle = 'rgba(6,214,224,0.6)';
+    ctx.fillText('n₂ = ' + this.n2.toFixed(2), 16, midY + 30);
+
+    /* TIR badge */
+    const theta1Rad = this.angle * Math.PI / 180;
+    const sinT2 = (this.n1 / this.n2) * Math.sin(theta1Rad);
+    if (Math.abs(sinT2) > 1) {
+      ctx.font = 'bold 14px Manrope, system-ui, sans-serif';
+      ctx.fillStyle = '#EF476F';
+      ctx.textAlign = 'center';
+      ctx.fillText('Полное внутреннее отражение (ПВО)', W / 2, midY + 60);
+    }
+  }
+
+  _drawInfoBox(ctx, isTIR, R) {
+    const boxW = 220, boxH = 72;
+    const bx = this.W - boxW - 12, by = 12;
+
+    ctx.fillStyle = 'rgba(22,22,38,0.85)';
+    ctx.beginPath(); ctx.roundRect(bx, by, boxW, boxH, 8); ctx.fill();
+
+    ctx.font = '11px Manrope, system-ui, sans-serif';
+    ctx.textAlign = 'left'; ctx.textBaseline = 'top';
+
+    ctx.fillStyle = 'rgba(255,255,255,0.7)';
+    ctx.fillText('n₁·sin(θ₁) = n₂·sin(θ₂)', bx + 10, by + 10);
+
+    const info = this.info();
+    ctx.fillStyle = 'rgba(255,255,255,0.5)';
+    const a2str = info.isTIR ? 'ПВО' : info.angle2 + '°';
+    ctx.fillText(`θ₁ = ${info.angle1}°   θ₂ = ${a2str}`, bx + 10, by + 28);
+
+    const rPct = (R * 100).toFixed(1);
+    const tPct = ((1 - R) * 100).toFixed(1);
+    ctx.fillStyle = '#EF476F';
+    ctx.fillText(`R = ${rPct}%`, bx + 10, by + 46);
+    ctx.fillStyle = '#06D6E0';
+    ctx.fillText(`T = ${isTIR ? '0' : tPct}%`, bx + 90, by + 46);
+
+    if (info.criticalAngle !== null) {
+      ctx.fillStyle = '#FFD166';
+      ctx.fillText(`θc = ${info.criticalAngle}°`, bx + 160, by + 46);
+    }
+  }
+
+  /* ── events ─────────────────────────────────── */
+
+  _bindEvents() {
+    const cv = this.canvas;
+
+    const getPos = (e) => {
+      const r = cv.getBoundingClientRect();
+      const t = e.touches ? e.touches[0] : e;
+      return {
+        mx: (t.clientX - r.left) * (this.W / r.width),
+        my: (t.clientY - r.top)  * (this.H / r.height),
+      };
+    };
+
+    const hitTest = (mx, my) => {
+      /* Check if near the incident ray line (top half only) */
+      const hitX = this.W / 2;
+      const hitY = this.H / 2;
+      if (my >= hitY) return false;
+      /* distance from mouse to the hit point — if within top half, allow drag */
+      const dx = mx - hitX;
+      const dy = my - hitY;
+      const dist = Math.hypot(dx, dy);
+      return dist > 20 && dist < Math.max(this.W, this.H) * 0.6;
+    };
+
+    const angleFromMouse = (mx, my) => {
+      const hitX = this.W / 2;
+      const hitY = this.H / 2;
+      const dx = mx - hitX;
+      const dy = hitY - my; // flip: canvas y goes down, angle measured from vertical up
+      // angle from vertical = atan2(|dx|, dy)
+      const a = Math.atan2(Math.abs(dx), dy) * 180 / Math.PI;
+      return Math.max(0, Math.min(89, a));
+    };
+
+    const onDown = (e) => {
+      const { mx, my } = getPos(e);
+      if (hitTest(mx, my)) this._drag = true;
+    };
+
+    const onMove = (e) => {
+      if (!this._drag) return;
+      if (e.cancelable) e.preventDefault();
+      const { mx, my } = getPos(e);
+      this.angle = angleFromMouse(mx, my);
+      this.draw();
+      this._emit();
+    };
+
+    const onUp = () => { this._drag = false; };
+
+    /* mouse */
+    cv.addEventListener('mousedown', onDown);
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+
+    /* touch */
+    cv.addEventListener('touchstart', e => {
+      if (e.touches.length === 1) onDown(e);
+    }, { passive: true });
+    cv.addEventListener('touchmove', e => onMove(e), { passive: false });
+    cv.addEventListener('touchend', onUp);
+
+    /* cursor style */
+    cv.addEventListener('mousemove', e => {
+      if (this._drag) { cv.style.cursor = 'grabbing'; return; }
+      const { mx, my } = getPos(e);
+      cv.style.cursor = hitTest(mx, my) ? 'grab' : 'default';
+    });
+  }
+}
diff --git a/frontend/js/labs/states.js b/frontend/js/labs/states.js
new file mode 100644
index 0000000..7b505f3
--- /dev/null
+++ b/frontend/js/labs/states.js
@@ -0,0 +1,620 @@
+/**
+ * StatesSim v4 — Aggregate States of Matter (Lennard-Jones MD)
+ * Clean rewrite: stable physics, proper layout, canvas clipping, no boundary artifacts.
+ */
+class StatesSim {
+  // ── layout / physics constants ───────────────────────────────────────────
+  static PAD_B  = 112;   // px reserved at bottom for charts
+  static PAD_L  = 38;    // px reserved on left for temperature bar
+  static SIG    = 14;    // Lennard-Jones σ (px)
+  static EPS    = 1.0;   // Lennard-Jones ε
+  static DT     = 0.16;  // time step
+  static CUTOFF = 3.5;   // force cutoff in σ units
+
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.ctx    = canvas.getContext('2d');
+    this.W = 0; this.H = 0;
+    this.N = 64;
+    this.T = 0.15;
+    this.particles = [];
+
+    this._raf            = null;
+    this._stepCount      = 0;
+    this._loop           = this._loop.bind(this);
+    this._wallImpulse    = 0;
+    this._pressureSmooth = 0;
+    this._energyHistory  = [];
+    this._rdfData        = null;
+    this._rdfMaxG        = 3;
+    this._rdfTick        = 0;
+    this._phaseFlash     = 0;
+    this._flashColor     = '#4CC9F0';
+    this._prevPhase      = '';
+    this._phasePulse     = 0;
+    this._hover          = null;
+    this._showVectors    = false;
+    this.onUpdate        = null;
+
+    canvas.addEventListener('mousemove',  e => this._onMouse(e));
+    canvas.addEventListener('mouseleave', () => { this._hover = null; });
+  }
+
+  // ── public API ────────────────────────────────────────────────────────────
+  fit() {
+    this.W = this.canvas.offsetWidth  || 400;
+    this.H = this.canvas.offsetHeight || 400;
+    this.canvas.width  = this.W * devicePixelRatio;
+    this.canvas.height = this.H * devicePixelRatio;
+    this.ctx.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0);
+    this.reset();
+  }
+
+  reset() {
+    this.particles = [];
+    const { N, T } = this;
+    const { SIG, PAD_L, PAD_B } = StatesSim;
+    const spacing = SIG * 1.15;
+    const simW = this.W - PAD_L;
+    const simH = this.H - PAD_B;
+    const cols = Math.ceil(Math.sqrt(N));
+    const rows = Math.ceil(N / cols);
+    const gridW = (cols - 1) * spacing;
+    const gridH = (rows - 1) * spacing * Math.sqrt(3) / 2;
+    const ox = PAD_L + (simW - gridW) / 2;
+    const oy = (simH - gridH) / 2;
+
+    let n = 0;
+    for (let r = 0; r < rows && n < N; r++) {
+      const xOff = (r % 2) * spacing * 0.5;
+      for (let c = 0; c < cols && n < N; c++) {
+        this.particles.push({
+          x:  ox + xOff + c * spacing,
+          y:  oy + r * spacing * Math.sqrt(3) / 2,
+          vx: (Math.random() - 0.5) * T * 3,
+          vy: (Math.random() - 0.5) * T * 3,
+          ax: 0, ay: 0,
+        });
+        n++;
+      }
+    }
+
+    this._stepCount      = 0;
+    this._wallImpulse    = 0;
+    this._pressureSmooth = 0;
+    this._energyHistory  = [];
+    this._rdfData        = null;
+    this._rdfMaxG        = 3;
+    this._rdfTick        = 0;
+    this._phaseFlash     = 0;
+    this._prevPhase      = '';
+    this._hover          = null;
+  }
+
+  setT(t) {
+    const old = this.T;
+    this.T = Math.max(0.01, t);
+    if (old > 0) {
+      const f = Math.min(4, Math.sqrt(this.T / old));
+      for (const p of this.particles) { p.vx *= f; p.vy *= f; }
+    }
+  }
+
+  setN(n) {
+    this.N = Math.max(16, Math.min(120, n));
+    this.reset();
+  }
+
+  toggleVectors() { this._showVectors = !this._showVectors; }
+  start() { if (!this._raf) this._raf = requestAnimationFrame(this._loop); }
+  stop()  { cancelAnimationFrame(this._raf); this._raf = null; }
+
+  // ── simulation ────────────────────────────────────────────────────────────
+  _loop() {
+    for (let i = 0; i < 5; i++) this._stepPhysics();
+    this.draw();
+    this._raf = requestAnimationFrame(this._loop);
+  }
+
+  _stepPhysics() {
+    const { particles } = this;
+    const { SIG, EPS, DT, CUTOFF, PAD_L, PAD_B } = StatesSim;
+    const dt   = DT;
+    const pr   = SIG * 0.48;
+    const cut2 = (CUTOFF * SIG) ** 2;
+    const xMin = PAD_L + pr, xMax = this.W - pr;
+    const yMin = pr,         yMax = this.H - PAD_B - pr;
+
+    // Velocity Verlet — step 1
+    for (const p of particles) {
+      p.vx += 0.5 * p.ax * dt; p.vy += 0.5 * p.ay * dt;
+      p.x  += p.vx * dt;       p.y  += p.vy * dt;
+      if      (p.x < xMin) { p.x = xMin; p.vx =  Math.abs(p.vx); this._wallImpulse += Math.abs(p.vx); }
+      else if (p.x > xMax) { p.x = xMax; p.vx = -Math.abs(p.vx); this._wallImpulse += Math.abs(p.vx); }
+      if      (p.y < yMin) { p.y = yMin; p.vy =  Math.abs(p.vy); this._wallImpulse += Math.abs(p.vy); }
+      else if (p.y > yMax) { p.y = yMax; p.vy = -Math.abs(p.vy); this._wallImpulse += Math.abs(p.vy); }
+    }
+
+    // Lennard-Jones forces
+    for (const p of particles) { p.ax = 0; p.ay = 0; }
+    for (let i = 0; i < particles.length; i++) {
+      for (let j = i + 1; j < particles.length; j++) {
+        const pi = particles[i], pj = particles[j];
+        const dx = pj.x - pi.x, dy = pj.y - pi.y;
+        const r2 = dx * dx + dy * dy;
+        if (r2 >= cut2 || r2 < 0.25) continue;
+        const sr2 = (SIG * SIG) / r2, sr6 = sr2 * sr2 * sr2;
+        const f = Math.max(-40, Math.min(40, 24 * EPS * (2 * sr6 * sr6 - sr6) / r2));
+        pi.ax += f * dx; pi.ay += f * dy;
+        pj.ax -= f * dx; pj.ay -= f * dy;
+      }
+    }
+
+    // Velocity Verlet — step 2
+    for (const p of particles) {
+      p.vx += 0.5 * p.ax * dt; p.vy += 0.5 * p.ay * dt;
+    }
+
+    // Berendsen thermostat
+    this._stepCount++;
+    let ke2 = 0;
+    for (const p of particles) ke2 += p.vx * p.vx + p.vy * p.vy;
+    const ke = ke2 / (2 * particles.length);
+    if (ke > 1e-8) {
+      const lam = Math.max(0.92, Math.min(1.08, Math.sqrt(1 + (dt / 60) * (this.T / ke - 1))));
+      for (const p of particles) { p.vx *= lam; p.vy *= lam; }
+    }
+
+    // smooth pressure
+    this._pressureSmooth = this._pressureSmooth * 0.95 + this._wallImpulse * 0.05;
+    this._wallImpulse = 0;
+
+    // energy + phase history (every 8 steps)
+    if (this._stepCount % 8 === 0) {
+      const info = this.info();
+      this._energyHistory.push({ ke: +info.avgKE, pe: +info.avgPE, te: +info.avgKE + +info.avgPE });
+      if (this._energyHistory.length > 300) this._energyHistory.shift();
+      const ph = info.phase;
+      if (this._prevPhase && ph !== this._prevPhase) {
+        const fc = { solid: '#4CC9F0', liquid: '#7BF5A4', gas: '#FFB347' };
+        this._phaseFlash = 1; this._flashColor = fc[ph] || '#ffffff';
+      }
+      this._prevPhase = ph;
+    }
+
+    // RDF every 25 steps
+    if (++this._rdfTick % 25 === 0) this._computeRDF();
+    if (this._stepCount % 25 === 0 && this.onUpdate) this.onUpdate(this.info());
+  }
+
+  // ── RDF g(r) ──────────────────────────────────────────────────────────────
+  _computeRDF() {
+    const { particles } = this;
+    const N = particles.length;
+    if (N < 4) return;
+    const { SIG, PAD_L, PAD_B } = StatesSim;
+    const nBins = 32, maxR = 3.8 * SIG, dr = maxR / nBins;
+    const hist = new Float32Array(nBins);
+    for (let i = 0; i < N; i++) for (let j = i + 1; j < N; j++) {
+      const r = Math.hypot(particles[j].x - particles[i].x, particles[j].y - particles[i].y);
+      if (r < maxR) hist[Math.floor(r / dr)]++;
+    }
+    const area = (this.W - PAD_L) * (this.H - PAD_B);
+    const g = new Float32Array(nBins);
+    for (let i = 0; i < nBins; i++) {
+      const rc = (i + 0.5) * dr;
+      const ideal = N * (N - 1) * Math.PI * rc * dr / area;
+      g[i] = ideal > 1e-10 ? hist[i] / ideal : 0;
+    }
+    if (!this._rdfData) { this._rdfData = g; }
+    else { for (let i = 0; i < nBins; i++) this._rdfData[i] = this._rdfData[i] * 0.65 + g[i] * 0.35; }
+    this._rdfMaxG = Math.max(1.5, ...Array.from(this._rdfData.slice(1)));
+  }
+
+  // ── info / phase ──────────────────────────────────────────────────────────
+  _phase() {
+    return this.T < 0.2 ? 'solid' : this.T < 0.5 ? 'liquid' : 'gas';
+  }
+
+  info() {
+    const { particles, T } = this;
+    const { SIG, EPS, CUTOFF, PAD_L, PAD_B } = StatesSim;
+    let ke2 = 0;
+    for (const p of particles) ke2 += p.vx * p.vx + p.vy * p.vy;
+    const avgKE = particles.length ? 0.5 * ke2 / particles.length : 0;
+    const cut2 = (CUTOFF * SIG) ** 2;
+    let peTot = 0;
+    for (let i = 0; i < particles.length; i++) for (let j = i + 1; j < particles.length; j++) {
+      const dx = particles[j].x - particles[i].x, dy = particles[j].y - particles[i].y;
+      const r2 = dx * dx + dy * dy;
+      if (r2 < cut2 && r2 > 0.1) {
+        const sr2 = SIG * SIG / r2, sr6 = sr2 * sr2 * sr2;
+        peTot += 4 * EPS * (sr6 * sr6 - sr6);
+      }
+    }
+    const avgPE = particles.length ? peTot / particles.length : 0;
+    const perim = 2 * ((this.W - PAD_L) + (this.H - PAD_B));
+    const P = this._pressureSmooth / perim * 80;
+    return {
+      phase:  this._phase(),
+      T,
+      avgKE:  avgKE.toFixed(3),
+      avgPE:  avgPE.toFixed(3),
+      P:      P.toFixed(1),
+    };
+  }
+
+  // ── mouse ─────────────────────────────────────────────────────────────────
+  _onMouse(e) {
+    const r = this.canvas.getBoundingClientRect();
+    const x = (e.clientX - r.left) * (this.W / r.width);
+    const y = (e.clientY - r.top)  * (this.H / r.height);
+    let best = null, bd = 20;
+    for (const p of this.particles) {
+      const d = Math.hypot(p.x - x, p.y - y);
+      if (d < bd) { bd = d; best = p; }
+    }
+    this._hover = best;
+  }
+
+  // ── draw ──────────────────────────────────────────────────────────────────
+  draw() {
+    const { ctx, W, H, T } = this;
+    const { SIG, PAD_B, PAD_L } = StatesSim;
+    const simH  = H - PAD_B;
+    const phase = this._phase();
+
+    // full background
+    ctx.fillStyle = '#08091a'; ctx.fillRect(0, 0, W, H);
+
+    // ── clip everything to simulation area ─────────────────────────────────
+    ctx.save();
+    ctx.beginPath(); ctx.rect(0, 0, W, simH); ctx.clip();
+
+    // phase flash
+    if (this._phaseFlash > 0) {
+      this._phaseFlash = Math.max(0, this._phaseFlash - 0.02);
+      const [fr, fg, fb] = this._hex3(this._flashColor);
+      ctx.fillStyle = `rgba(${fr},${fg},${fb},${this._phaseFlash * 0.16})`;
+      ctx.fillRect(0, 0, W, simH);
+    }
+
+    // pressure wall glow (walls at simulation boundaries)
+    const P = parseFloat(this.info().P);
+    const wi = Math.min(1, P / 25);
+    if (wi > 0.04) {
+      const a = wi * 0.28, gd = 30;
+      const walls = [
+        { x: PAD_L,    y: 0,        w: gd, h: simH, d: 'r' },
+        { x: W - gd,   y: 0,        w: gd, h: simH, d: 'l' },
+        { x: 0,        y: 0,        w: W,  h: gd,   d: 'd' },
+        { x: 0,        y: simH-gd,  w: W,  h: gd,   d: 'u' },
+      ];
+      for (const { x, y, w, h, d } of walls) {
+        let gr;
+        if      (d==='r') gr = ctx.createLinearGradient(x, 0, x+w, 0);
+        else if (d==='l') gr = ctx.createLinearGradient(x+w, 0, x, 0);
+        else if (d==='d') gr = ctx.createLinearGradient(0, y, 0, y+h);
+        else              gr = ctx.createLinearGradient(0, y+h, 0, y);
+        gr.addColorStop(0, `rgba(139,92,246,${a})`);
+        gr.addColorStop(1, 'rgba(139,92,246,0)');
+        ctx.fillStyle = gr; ctx.fillRect(x, y, w, h);
+      }
+    }
+
+    // per-particle speeds
+    const speeds = this.particles.map(p => Math.hypot(p.vx, p.vy));
+    const maxSpd = Math.max(...speeds, 1e-6);
+
+    // bonds (solid / liquid)
+    const bondCut = SIG * 1.85;
+    if (phase !== 'gas') {
+      ctx.save();
+      ctx.strokeStyle = phase === 'solid'
+        ? 'rgba(96,210,250,0.45)'
+        : 'rgba(120,130,255,0.22)';
+      ctx.lineWidth = phase === 'solid' ? 1.2 : 0.8;
+      ctx.beginPath();
+      for (let i = 0; i < this.particles.length; i++) {
+        for (let j = i + 1; j < this.particles.length; j++) {
+          const pi = this.particles[i], pj = this.particles[j];
+          if (Math.hypot(pj.x - pi.x, pj.y - pi.y) < bondCut) {
+            ctx.moveTo(pi.x, pi.y); ctx.lineTo(pj.x, pj.y);
+          }
+        }
+      }
+      ctx.stroke(); ctx.restore();
+    }
+
+    // velocity vectors (optional)
+    if (this._showVectors) {
+      ctx.save();
+      const vScale = SIG * 2 / maxSpd;
+      for (let i = 0; i < this.particles.length; i++) {
+        const p = this.particles[i];
+        const len = speeds[i] * vScale;
+        if (len < 1.5) continue;
+        const ang = Math.atan2(p.vy, p.vx);
+        const ex = p.x + Math.cos(ang) * len, ey = p.y + Math.sin(ang) * len;
+        const hue = 240 - (speeds[i] / maxSpd) * 200;
+        ctx.strokeStyle = `hsla(${hue},85%,65%,0.55)`;
+        ctx.lineWidth = 1.2;
+        ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(ex, ey); ctx.stroke();
+        const hl = Math.min(7, len * 0.38);
+        ctx.fillStyle = `hsla(${hue},85%,65%,0.55)`;
+        ctx.beginPath();
+        ctx.moveTo(ex, ey);
+        ctx.lineTo(ex - hl * Math.cos(ang - 0.45), ey - hl * Math.sin(ang - 0.45));
+        ctx.lineTo(ex - hl * Math.cos(ang + 0.45), ey - hl * Math.sin(ang + 0.45));
+        ctx.closePath(); ctx.fill();
+      }
+      ctx.restore();
+    }
+
+    // particles
+    ctx.save();
+    for (let i = 0; i < this.particles.length; i++) {
+      const p   = this.particles[i];
+      const t   = speeds[i] / maxSpd;
+      const hue = 240 - t * 220;             // blue (cold) → green → yellow → red (hot)
+      const col = `hsl(${hue},85%,62%)`;
+      const isH = this._hover === p;
+      const rad = isH ? SIG * 0.62 : SIG * 0.5;
+      ctx.shadowBlur  = isH ? 22 : 5 + t * 12;
+      ctx.shadowColor = col;
+      ctx.fillStyle   = col;
+      ctx.beginPath(); ctx.arc(p.x, p.y, rad, 0, Math.PI * 2); ctx.fill();
+      if (isH) {
+        ctx.shadowBlur = 0;
+        ctx.strokeStyle = 'rgba(255,255,255,0.5)'; ctx.lineWidth = 1.5;
+        ctx.beginPath(); ctx.arc(p.x, p.y, rad + 4, 0, Math.PI * 2); ctx.stroke();
+      }
+    }
+    ctx.restore();
+
+    // phase badge
+    this._phasePulse += 0.04;
+    this._drawPhaseBadge(ctx, W, phase);
+
+    // temperature bar
+    this._drawTempBar(ctx, simH, T);
+
+    ctx.restore(); // end simulation clip
+
+    // chart separator
+    ctx.strokeStyle = 'rgba(255,255,255,0.06)'; ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.moveTo(0, simH); ctx.lineTo(W, simH); ctx.stroke();
+
+    // charts (outside clip)
+    this._drawEnergyChart(ctx, W, H, PAD_B);
+    this._drawRDFChart(ctx, W, H, PAD_B);
+
+    // hover inspector (may extend into chart area)
+    if (this._hover) this._drawInspector(ctx, this._hover, speeds, maxSpd, W, H);
+  }
+
+  // ── helpers ───────────────────────────────────────────────────────────────
+  _hex3(hex) {
+    const h = hex.replace('#', '');
+    return [parseInt(h.slice(0,2),16), parseInt(h.slice(2,4),16), parseInt(h.slice(4,6),16)];
+  }
+
+  // ── sub-drawing ───────────────────────────────────────────────────────────
+  _drawPhaseBadge(ctx, W, phase) {
+    const cfg = {
+      solid:  { icon: '❄', label: 'Твёрдое',  color: '#4CC9F0', bg: 'rgba(76,201,240,0.12)' },
+      liquid: { icon: '~', label: 'Жидкость', color: '#7BF5A4', bg: 'rgba(123,245,164,0.12)' },
+      gas:    { icon: '·', label: 'Газ',       color: '#FFB347', bg: 'rgba(255,179,71,0.12)' },
+    }[phase];
+    const sc = 1 + 0.028 * Math.sin(this._phasePulse);
+    ctx.save();
+    ctx.font = 'bold 13px sans-serif';
+    const text = `${cfg.icon}  ${cfg.label}`;
+    const tw = ctx.measureText(text).width;
+    const bw = tw + 24, bh = 27, bx = W / 2 - bw / 2, by = 10;
+    ctx.translate(W/2, by+bh/2); ctx.scale(sc,sc); ctx.translate(-W/2, -(by+bh/2));
+    ctx.fillStyle = cfg.bg;
+    ctx.beginPath(); ctx.roundRect(bx, by, bw, bh, 7); ctx.fill();
+    ctx.strokeStyle = cfg.color + '50'; ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.roundRect(bx, by, bw, bh, 7); ctx.stroke();
+    ctx.fillStyle = cfg.color; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+    ctx.fillText(text, W/2, by+bh/2);
+    ctx.restore();
+  }
+
+  _drawTempBar(ctx, simH, T) {
+    const bx = 10, by = 50, bw = 9;
+    const bh = Math.max(50, Math.min(simH - 72, 260));
+    ctx.save();
+
+    // gradient track
+    const grad = ctx.createLinearGradient(0, by, 0, by + bh);
+    grad.addColorStop(0,   '#EF476F');
+    grad.addColorStop(0.4, '#FFD166');
+    grad.addColorStop(1,   '#4CC9F0');
+    ctx.fillStyle = grad;
+    ctx.beginPath(); ctx.roundRect(bx, by, bw, bh, 4); ctx.fill();
+
+    // phase transition markers
+    ctx.strokeStyle = 'rgba(255,255,255,0.28)'; ctx.lineWidth = 1; ctx.setLineDash([2,3]);
+    ctx.font = '7px sans-serif'; ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
+    for (const [tv, lbl] of [[0.2,'Жидк.'],[0.5,'Газ']]) {
+      const y = by + bh - (tv / 0.7) * bh;
+      if (y > by + 4 && y < by + bh - 4) {
+        ctx.fillStyle = 'rgba(255,255,255,0)';
+        ctx.beginPath(); ctx.moveTo(bx-3, y); ctx.lineTo(bx+bw+3, y); ctx.stroke();
+        ctx.fillStyle = 'rgba(255,255,255,0.32)'; ctx.fillText(lbl, bx+bw+5, y);
+      }
+    }
+    ctx.setLineDash([]);
+
+    // indicator
+    const tNorm = Math.min(1, T / 0.7);
+    const iy = by + bh - tNorm * bh;
+    ctx.fillStyle = '#fff'; ctx.shadowBlur = 8; ctx.shadowColor = '#fff';
+    ctx.beginPath(); ctx.arc(bx + bw/2, iy, 5, 0, Math.PI*2); ctx.fill();
+    ctx.shadowBlur = 0;
+
+    // T value
+    const labelY = iy < by + 18 ? iy + 14 : iy - 14;
+    ctx.fillStyle = 'rgba(255,255,255,0.85)'; ctx.font = "bold 9px 'Manrope',monospace";
+    ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+    ctx.fillText(T.toFixed(2), bx + bw/2, labelY);
+
+    ctx.fillStyle = 'rgba(255,255,255,0.32)'; ctx.font = '9px sans-serif';
+    ctx.fillText('T', bx + bw/2, by - 8);
+    ctx.restore();
+  }
+
+  _drawEnergyChart(ctx, W, H, padB) {
+    const hist = this._energyHistory;
+    const cw = Math.min(196, Math.floor((W - 16) * 0.46));
+    const ch = padB - 18;
+    const cx = 8, cy = H - ch - 8;
+
+    ctx.save();
+    ctx.fillStyle = 'rgba(4,6,20,0.82)';
+    ctx.beginPath(); ctx.roundRect(cx, cy, cw, ch, 6); ctx.fill();
+    ctx.strokeStyle = 'rgba(255,255,255,0.06)'; ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.roundRect(cx, cy, cw, ch, 6); ctx.stroke();
+
+    ctx.fillStyle = 'rgba(255,255,255,0.48)'; ctx.font = "9px 'Manrope',sans-serif";
+    ctx.textAlign = 'left'; ctx.textBaseline = 'top';
+    ctx.fillText('Энергия / частицу', cx + 8, cy + 5);
+
+    if (hist.length > 3) {
+      const pL=8, pR=6, pT=17, pB=13;
+      const pw = cw-pL-pR, ph = ch-pT-pB;
+      const allV = hist.flatMap(h => [h.ke, h.pe, h.te]);
+      const minV = Math.min(...allV, 0), maxV = Math.max(...allV, 0.001);
+      const rng = maxV - minV || 0.001;
+      const px = i => cx + pL + (i / (hist.length-1)) * pw;
+      const py = v => cy + pT + ph - ((v - minV) / rng) * ph;
+
+      // zero line
+      const zy = py(0);
+      if (zy > cy + pT && zy < cy + pT + ph) {
+        ctx.strokeStyle = 'rgba(255,255,255,0.1)'; ctx.lineWidth = 1; ctx.setLineDash([3,3]);
+        ctx.beginPath(); ctx.moveTo(cx+pL, zy); ctx.lineTo(cx+pL+pw, zy); ctx.stroke();
+        ctx.setLineDash([]);
+      }
+
+      for (const [key, color, lw, dash] of [
+        ['pe','#9B5DE5',1.2,false],
+        ['ke','#FFD166',1.2,false],
+        ['te','rgba(255,255,255,0.38)',1,true],
+      ]) {
+        ctx.strokeStyle = color; ctx.lineWidth = lw;
+        if (dash) ctx.setLineDash([3,4]);
+        ctx.beginPath();
+        hist.forEach((h,i) => {
+          const x = px(i), y = py(h[key]);
+          i === 0 ? ctx.moveTo(x,y) : ctx.lineTo(x,y);
+        });
+        ctx.stroke(); ctx.setLineDash([]);
+      }
+
+      // legend
+      [['#FFD166','КЕ'],['#9B5DE5','ПЭ'],['rgba(255,255,255,0.4)','Е']].forEach(([c,l],li) => {
+        const lx = cx + 8 + li * 34;
+        ctx.fillStyle = c; ctx.beginPath(); ctx.arc(lx, cy+ch-7, 3, 0, Math.PI*2); ctx.fill();
+        ctx.fillStyle = 'rgba(255,255,255,0.48)'; ctx.font = '8px sans-serif';
+        ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
+        ctx.fillText(l, lx+5, cy+ch-7);
+      });
+    } else {
+      ctx.fillStyle = 'rgba(255,255,255,0.22)'; ctx.font = "9px 'Manrope',sans-serif";
+      ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+      ctx.fillText('накапливается…', cx+cw/2, cy+ch/2);
+    }
+    ctx.restore();
+  }
+
+  _drawRDFChart(ctx, W, H, padB) {
+    const g = this._rdfData;
+    const cw = Math.min(196, Math.floor((W - 16) * 0.46));
+    const ch = padB - 18;
+    const cx = W - cw - 8, cy = H - ch - 8;
+
+    ctx.save();
+    ctx.fillStyle = 'rgba(4,6,20,0.82)';
+    ctx.beginPath(); ctx.roundRect(cx, cy, cw, ch, 6); ctx.fill();
+    ctx.strokeStyle = 'rgba(255,255,255,0.06)'; ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.roundRect(cx, cy, cw, ch, 6); ctx.stroke();
+
+    ctx.fillStyle = 'rgba(255,255,255,0.48)'; ctx.font = "9px 'Manrope',sans-serif";
+    ctx.textAlign = 'left'; ctx.textBaseline = 'top';
+    ctx.fillText('g(r) — радиальная функция', cx+8, cy+5);
+
+    if (g) {
+      const pL=8, pR=6, pT=17, pB=14;
+      const pw = cw-pL-pR, ph = ch-pT-pB;
+      const nBins = g.length, barW = pw/nBins, maxG = this._rdfMaxG;
+
+      // g=1 reference
+      const refY = cy+pT+ph - (1/maxG)*ph;
+      ctx.strokeStyle = 'rgba(255,209,102,0.38)'; ctx.lineWidth=1; ctx.setLineDash([4,3]);
+      ctx.beginPath(); ctx.moveTo(cx+pL,refY); ctx.lineTo(cx+pL+pw,refY); ctx.stroke();
+      ctx.setLineDash([]);
+      ctx.fillStyle = 'rgba(255,209,102,0.35)'; ctx.font='7px sans-serif';
+      ctx.textAlign='right'; ctx.textBaseline='middle';
+      ctx.fillText('1', cx+pL-2, refY);
+
+      for (let i = 0; i < nBins; i++) {
+        const v = Math.min(g[i], maxG), frac = v / maxG;
+        const bh = frac * ph;
+        const bx = cx+pL+i*barW, by = cy+pT+ph-bh;
+        const hue = 220 - frac * 180;
+        ctx.fillStyle = `hsla(${hue},70%,55%,0.82)`;
+        ctx.beginPath(); ctx.roundRect(bx+0.5, by, barW-1, bh, 1); ctx.fill();
+      }
+
+      ctx.fillStyle = 'rgba(255,255,255,0.25)'; ctx.font='7px sans-serif'; ctx.textAlign='center';
+      for (let v=0; v<=3; v++) {
+        ctx.fillText(v, cx+pL+(v/3.8)*pw, cy+pT+ph+8);
+      }
+      ctx.fillStyle = 'rgba(255,255,255,0.25)'; ctx.textBaseline='bottom';
+      ctx.fillText('r / σ', cx+pL+pw/2, cy+ch);
+    } else {
+      ctx.fillStyle = 'rgba(255,255,255,0.22)'; ctx.font = "9px 'Manrope',sans-serif";
+      ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+      ctx.fillText('накапливается…', cx+cw/2, cy+ch/2);
+    }
+    ctx.restore();
+  }
+
+  _drawInspector(ctx, p, speeds, maxSpd, W, H) {
+    const { SIG } = StatesSim;
+    const spd = Math.hypot(p.vx, p.vy);
+    const ke  = 0.5 * spd * spd;
+    const ang = Math.atan2(p.vy, p.vx) * 180 / Math.PI;
+    let coord = 0;
+    for (const q of this.particles) {
+      if (q !== p && Math.hypot(q.x-p.x, q.y-p.y) < SIG*1.5) coord++;
+    }
+    const t = spd / maxSpd, hue = 240 - t * 220;
+    const clr = `hsl(${hue},85%,62%)`;
+    const rows = [
+      ['|v|', spd.toFixed(3)], ['vx', p.vx.toFixed(2)], ['vy', p.vy.toFixed(2)],
+      ['KE',  ke.toFixed(3)],  ['угол', ang.toFixed(1)+'°'], ['z', coord+' сос.'],
+    ];
+    const tw=136, th=rows.length*17+20;
+    let tx = p.x+14, ty = p.y-th/2;
+    if (tx+tw > W-8) tx = p.x-tw-14;
+    ty = Math.max(8, Math.min(H-th-8, ty));
+    ctx.save();
+    ctx.fillStyle = 'rgba(5,7,22,0.95)';
+    ctx.beginPath(); ctx.roundRect(tx, ty, tw, th, 8); ctx.fill();
+    ctx.fillStyle = clr;
+    ctx.beginPath(); ctx.roundRect(tx, ty, tw, 3, [8,8,0,0]); ctx.fill();
+    ctx.strokeStyle = 'rgba(255,255,255,0.07)'; ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.roundRect(tx, ty, tw, th, 8); ctx.stroke();
+    ctx.font = "11px 'Manrope',monospace"; ctx.textBaseline = 'middle';
+    rows.forEach(([k,v],i) => {
+      const ry = ty+15+i*17;
+      ctx.fillStyle='rgba(255,255,255,0.38)'; ctx.textAlign='left';  ctx.fillText(k, tx+10, ry);
+      ctx.fillStyle='rgba(255,255,255,0.9)';  ctx.textAlign='right'; ctx.fillText(v, tx+tw-10, ry);
+    });
+    ctx.restore();
+  }
+}
diff --git a/frontend/js/labs/stereo.js b/frontend/js/labs/stereo.js
new file mode 100644
index 0000000..09192cb
--- /dev/null
+++ b/frontend/js/labs/stereo.js
@@ -0,0 +1,2421 @@
+'use strict';
+
+/* ═══════════════════════════════════════════════════════════
+   StereoSim — 3D Stereometry (Three.js)
+   Cube, Parallelepiped, Pyramid, Tetrahedron, Cylinder,
+   Cone, Truncated Cone, Sphere, Prism + sections, unfold
+   ═══════════════════════════════════════════════════════════ */
+
+class StereoSim {
+  constructor(container) {
+    this.container = container;
+    this._running = false;
+
+    /* Three.js core */
+    this.scene    = new THREE.Scene();
+    this.camera   = new THREE.PerspectiveCamera(50, 1, 0.1, 500);
+    this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+    this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+    this.renderer.setClearColor(0x0D0D1A, 1);
+    container.appendChild(this.renderer.domElement);
+
+    /* lighting */
+    this.scene.add(new THREE.AmbientLight(0xffffff, 0.55));
+    const dir = new THREE.DirectionalLight(0xffffff, 0.75);
+    dir.position.set(6, 10, 8);
+    this.scene.add(dir);
+    const fill = new THREE.DirectionalLight(0x9B5DE5, 0.2);
+    fill.position.set(-5, 3, -4);
+    this.scene.add(fill);
+
+    /* orbit camera */
+    this._drag = false;
+    this._prevX = 0; this._prevY = 0;
+    this._rotY = 0.6; this._rotX = 0.45;
+    this._dist = 14;
+    this._autoSpin = true;
+    this._idleTime = 0;
+
+    const el = this.renderer.domElement;
+    el.style.cursor = 'grab';
+    this._clickStart = null;
+    el.addEventListener('pointerdown', e => {
+      this._clickStart = { x: e.clientX, y: e.clientY };
+      this._drag = true; this._prevX = e.clientX; this._prevY = e.clientY;
+      this._autoSpin = false; this._idleTime = 0;
+      if (!this._pointMode && !this._connectMode && !this._measureMode && !this._angleMode) el.style.cursor = 'grabbing';
+    });
+    window.addEventListener('pointerup', e => {
+      const wasDrag = this._clickStart &&
+        (Math.abs(e.clientX - this._clickStart.x) > 4 || Math.abs(e.clientY - this._clickStart.y) > 4);
+      this._drag = false;
+      if (this._pointMode) { el.style.cursor = 'cell'; if (!wasDrag) this._onPointClick(e); }
+      else if (this._connectMode) { el.style.cursor = 'pointer'; if (!wasDrag) this._onConnectClick(e); }
+      else if (this._measureMode) { el.style.cursor = 'crosshair'; if (!wasDrag) this._onMeasureClick(e); }
+      else if (this._angleMode) { el.style.cursor = 'crosshair'; if (!wasDrag) this._onAngleClick(e); }
+      else el.style.cursor = 'grab';
+    });
+    window.addEventListener('pointermove', e => {
+      this._onHoverMove(e);
+      if (!this._drag) return;
+      this._rotY += (e.clientX - this._prevX) * 0.007;
+      this._rotX += (e.clientY - this._prevY) * 0.007;
+      this._rotX = Math.max(-1.4, Math.min(1.4, this._rotX));
+      this._prevX = e.clientX; this._prevY = e.clientY;
+      this._idleTime = 0;
+    });
+    el.addEventListener('wheel', e => {
+      e.preventDefault();
+      this._dist = Math.max(4, Math.min(40, this._dist + e.deltaY * 0.02));
+    }, { passive: false });
+
+    /* touch — orbit + pinch zoom */
+    this._touchDist = 0;
+    el.addEventListener('touchstart', e => {
+      if (e.touches.length === 1) {
+        this._drag = true; this._prevX = e.touches[0].clientX; this._prevY = e.touches[0].clientY;
+        this._autoSpin = false; this._idleTime = 0;
+      } else if (e.touches.length === 2) {
+        this._drag = false;
+        const dx = e.touches[0].clientX - e.touches[1].clientX;
+        const dy = e.touches[0].clientY - e.touches[1].clientY;
+        this._touchDist = Math.sqrt(dx * dx + dy * dy);
+      }
+    }, { passive: true });
+    el.addEventListener('touchmove', e => {
+      if (e.touches.length === 2) {
+        // pinch zoom
+        const dx = e.touches[0].clientX - e.touches[1].clientX;
+        const dy = e.touches[0].clientY - e.touches[1].clientY;
+        const newDist = Math.sqrt(dx * dx + dy * dy);
+        if (this._touchDist > 0) {
+          const scale = this._touchDist / newDist;
+          this._dist = Math.max(4, Math.min(40, this._dist * scale));
+        }
+        this._touchDist = newDist;
+        return;
+      }
+      if (!this._drag || e.touches.length !== 1) return;
+      const t = e.touches[0];
+      this._rotY += (t.clientX - this._prevX) * 0.007;
+      this._rotX += (t.clientY - this._prevY) * 0.007;
+      this._rotX = Math.max(-1.4, Math.min(1.4, this._rotX));
+      this._prevX = t.clientX; this._prevY = t.clientY;
+    }, { passive: true });
+    el.addEventListener('touchend', () => { this._drag = false; this._touchDist = 0; });
+
+    /* resize */
+    this._ro = new ResizeObserver(() => this.fit());
+    this._ro.observe(container);
+
+    /* groups */
+    this._figGroup     = new THREE.Group();
+    this._labelGroup   = new THREE.Group();
+    this._sectionGroup = new THREE.Group();
+    this._sphereGroup  = new THREE.Group();
+    this._measureGroup = new THREE.Group();
+    this._gridGroup    = new THREE.Group();
+    this.scene.add(this._gridGroup);
+    this.scene.add(this._figGroup);
+    this.scene.add(this._sectionGroup);
+    this.scene.add(this._sphereGroup);
+    this.scene.add(this._measureGroup);
+    this.scene.add(this._labelGroup);
+
+    /* state */
+    this.figureType = 'cube';
+    this.params     = { a: 4, b: 3, c: 5, h: 5, r: 2, R: 3, n: 4 };
+    this.showEdges    = true;
+    this.showVertices = true;
+    this.showLabels   = true;
+    this.showAxes     = true;
+    this.showGrid     = true;
+    this.opacity      = 0.3;
+
+    this.showSection   = false;
+    this.sectionHeight = 0.5; // 0..1
+    this.sectionType   = 'horizontal'; // horizontal | diagonal | custom
+    this.sectionAngle  = 0.5; // 0..1 for diagonal tilt
+
+    this._unfold         = false;
+    this._unfoldProgress = 0;
+    this._unfoldTarget   = 0;
+
+    this.showInscribed   = false;
+    this.showCircumscribed = false;
+    this.showHeight      = false;
+    this.showApothem      = false;
+    this.showDiagonals   = false;
+    this.showMidpoints   = false;
+
+    this._measureMode = false;
+    this._measurePicks = [];
+    this._measurements = [];
+
+    /* angle modes */
+    this._angleMode = null;    // 'edge' | 'linePlane' | 'dihedral' | 'pointPlane'
+    this._anglePicks = [];     // picked vertices/points
+    this._angleGroup = new THREE.Group();
+    this.scene.add(this._angleGroup);
+
+    /* hover coordinate tooltip */
+    this._tooltipEl = null;
+    this._initTooltip();
+
+    /* custom points & connections */
+    this._pointMode    = false;   // place points on edges
+    this._connectMode  = false;   // connect two points with a line
+    this._customPoints = [];      // [{pos: Vector3, edgeIdx: number, t: number, label: string}]
+    this._connections  = [];      // [{from: idx, to: idx}]
+    this._connectPicks = [];      // temp picks for connecting
+    this._pointGroup   = new THREE.Group();
+    this.scene.add(this._pointGroup);
+    this._nextPointId  = 1;
+
+    this._vertices = []; // [{pos: Vector3, label: string}]
+    this._edges    = []; // [{from: Vector3, to: Vector3}]
+    this._faces    = []; // [[Vector3, ...]]
+
+    this.onUpdate = null;
+
+    this._buildGrid();
+    this._buildFigure();
+    this.fit();
+    this.play();
+  }
+
+  /* ════════════════ PUBLIC API ════════════════ */
+
+  setFigure(type) {
+    this.figureType = type;
+    this._unfold = false; this._unfoldProgress = 0; this._unfoldTarget = 0;
+    this.showSection = false;
+    this.showInscribed = false; this.showCircumscribed = false;
+    this.showHeight = false; this.showApothem = false;
+    this.showDiagonals = false; this.showMidpoints = false;
+    this._measurements = [];
+    this._measurePicks = [];
+    this._customPoints = [];
+    this._connections = [];
+    this._connectPicks = [];
+    this._anglePicks = [];
+    this._angleMode = null;
+    this._nextPointId = 1;
+    this._clearGroup(this._pointGroup);
+    this._clearGroup(this._angleGroup);
+    this._clearGroup(this._measureGroup);
+    this._buildFigure();
+    this._notify();
+  }
+
+  setParam(key, val) {
+    this.params[key] = val;
+    this._buildFigure();
+    this._notify();
+  }
+
+  setOpacity(v) {
+    this.opacity = v;
+    this._buildFigure();
+  }
+
+  toggleEdges(v)    { this.showEdges = v;    this._buildFigure(); }
+  toggleVertices(v) { this.showVertices = v; this._buildFigure(); }
+  toggleLabels(v)   { this.showLabels = v;   this._buildFigure(); }
+  toggleAxes(v)     { this.showAxes = v; this._buildGrid(); }
+  toggleGrid(v)     { this.showGrid = v; this._buildGrid(); }
+
+  toggleSection(on) {
+    this.showSection = on;
+    this._updateSection();
+  }
+  setSectionHeight(v) {
+    this.sectionHeight = v;
+    this._updateSection();
+    this._notify();
+  }
+  setSectionType(t) {
+    this.sectionType = t;
+    this._updateSection();
+    this._notify();
+  }
+
+  toggleUnfold(on) {
+    this._unfold = on;
+    this._unfoldTarget = on ? 1 : 0;
+  }
+
+  toggleInscribed(on) {
+    this.showInscribed = on;
+    this._updateSpheres();
+    this._notify();
+  }
+  toggleCircumscribed(on) {
+    this.showCircumscribed = on;
+    this._updateSpheres();
+    this._notify();
+  }
+
+  toggleHeight(on) {
+    this.showHeight = on;
+    this._buildFigure();
+    this._notify();
+  }
+
+  toggleApothem(on) {
+    this.showApothem = on;
+    this._buildFigure();
+    this._notify();
+  }
+
+  toggleDiagonals(on) {
+    this.showDiagonals = on;
+    this._buildFigure();
+    this._notify();
+  }
+
+  toggleMidpoints(on) {
+    this.showMidpoints = on;
+    this._buildFigure();
+    this._notify();
+  }
+
+  toggleMeasure(on) {
+    this._measureMode = on;
+    this._pointMode = false;
+    this._angleMode = null;
+    this._measurePicks = [];
+    if (!on) { this._clearGroup(this._measureGroup); this._measurements = []; }
+    this.renderer.domElement.style.cursor = on ? 'crosshair' : 'grab';
+  }
+
+  setAngleMode(mode) {
+    // mode: 'edge' | 'linePlane' | 'dihedral' | null
+    this._angleMode = mode;
+    this._anglePicks = [];
+    this._measureMode = false;
+    this._pointMode = false;
+    this._connectMode = false;
+    if (!mode) { this._clearGroup(this._angleGroup); }
+    this.renderer.domElement.style.cursor = mode ? 'crosshair' : 'grab';
+  }
+
+  setSectionAngle(v) {
+    this.sectionAngle = v;
+    if (this.showSection && this.sectionType === 'diagonal') this._updateSection();
+    this._notify();
+  }
+
+  /* ── Point mode: place points on edges ── */
+  togglePointMode(on) {
+    this._pointMode = on;
+    this._measureMode = false;
+    this._connectPicks = [];
+    this.renderer.domElement.style.cursor = on ? 'cell' : 'grab';
+  }
+
+  toggleConnectMode(on) {
+    this._connectMode = on;
+    this._pointMode = false;
+    this._measureMode = false;
+    this._connectPicks = [];
+    this.renderer.domElement.style.cursor = on ? 'pointer' : 'grab';
+  }
+
+  clearCustomPoints() {
+    this._customPoints = [];
+    this._connections = [];
+    this._connectPicks = [];
+    this._nextPointId = 1;
+    this._clearGroup(this._pointGroup);
+    if (this.showSection && this.sectionType === 'custom') this._updateSection();
+    this._notify();
+  }
+
+  removeLastPoint() {
+    if (!this._customPoints.length) return;
+    // Remove connections referencing last point
+    const lastIdx = this._customPoints.length - 1;
+    this._connections = this._connections.filter(c => c.from !== lastIdx && c.to !== lastIdx);
+    this._customPoints.pop();
+    this._nextPointId = Math.max(1, this._nextPointId - 1);
+    this._rebuildPointVisuals();
+    if (this.showSection && this.sectionType === 'custom') this._updateSection();
+    this._notify();
+  }
+
+  getCustomPoints() { return this._customPoints; }
+  getConnections()  { return this._connections; }
+
+  getFormulas() {
+    const p = this.params;
+    const PI = Math.PI;
+    const r = (v) => Math.round(v * 100) / 100;
+    switch (this.figureType) {
+      case 'cube': {
+        const a = p.a;
+        const rIn = a / 2, rOut = r(a * Math.sqrt(3) / 2);
+        return { V: r(a**3), S: r(6*a**2), S_side: r(4*a**2), d: r(a*Math.sqrt(3)), h: a,
+          formulas: [`V = a³ = ${r(a**3)}`, `S = 6a² = ${r(6*a**2)}`, `d = a√3 = ${r(a*Math.sqrt(3))}`,
+            `r_вп = a/2 = ${r(rIn)}`, `R_оп = a√3/2 = ${rOut}`] };
+      }
+      case 'parallelepiped': {
+        const {a,b,c} = p;
+        return { V: r(a*b*c), S: r(2*(a*b+b*c+a*c)), S_side: r(2*c*(a+b)), d: r(Math.sqrt(a**2+b**2+c**2)), h: c,
+          formulas: [`V = abc = ${r(a*b*c)}`, `S = 2(ab+bc+ac) = ${r(2*(a*b+b*c+a*c))}`, `d = √(a²+b²+c²) = ${r(Math.sqrt(a**2+b**2+c**2))}`,
+            `r_вп = ${r(Math.min(a,b,c)/2)}`, `R_оп = ${r(Math.sqrt(a**2+b**2+c**2)/2)}`] };
+      }
+      case 'pyramid': {
+        const {a, h, n} = p;
+        const sBase = n * a**2 / (4 * Math.tan(PI/n));
+        const apothem = a / (2 * Math.tan(PI/n));
+        const slantH = Math.sqrt(h**2 + apothem**2);
+        const sLat = n * a * slantH / 2;
+        const Vp = sBase * h / 3;
+        const rIn = r(3 * Vp / (sBase + sLat));
+        const Rb = a / (2 * Math.sin(PI / n));
+        const rOut = r((Rb**2 + h**2) / (2 * h));
+        return { V: r(Vp), S: r(sBase+sLat), S_side: r(sLat), d: null, h,
+          formulas: [`V = ⅓·S_осн·h = ${r(Vp)}`, `S_осн = ${r(sBase)}`, `S_бок = ${r(sLat)}`, `S_полн = ${r(sBase+sLat)}`,
+            `a_осн = ${r(apothem)}`, `a_бок = ${r(slantH)}`, `r_вп = ${rIn}`, `R_оп = ${rOut}`] };
+      }
+      case 'tetrahedron': {
+        const a = p.a;
+        const rIn = r(a / (2 * Math.sqrt(6))), rOut = r(a * Math.sqrt(6) / 4);
+        return { V: r(a**3*Math.sqrt(2)/12), S: r(a**2*Math.sqrt(3)), S_side: r(a**2*Math.sqrt(3)*3/4), d: null, h: r(a*Math.sqrt(2/3)),
+          formulas: [`V = a³√2/12 = ${r(a**3*Math.sqrt(2)/12)}`, `S = a²√3 = ${r(a**2*Math.sqrt(3))}`, `h = a√(2/3) = ${r(a*Math.sqrt(2/3))}`,
+            `r_вп = ${rIn}`, `R_оп = ${rOut}`] };
+      }
+      case 'cylinder': {
+        const {r: rad, h} = p;
+        const rIn = r(Math.min(rad, h/2)), rOut = r(Math.sqrt(rad**2 + (h/2)**2));
+        return { V: r(PI*rad**2*h), S: r(2*PI*rad*(rad+h)), S_side: r(2*PI*rad*h), d: r(2*rad), h,
+          formulas: [`V = πr²h = ${r(PI*rad**2*h)}`, `S_бок = 2πrh = ${r(2*PI*rad*h)}`, `S_полн = 2πr(r+h) = ${r(2*PI*rad*(rad+h))}`,
+            `r_вп = ${rIn}`, `R_оп = ${rOut}`] };
+      }
+      case 'cone': {
+        const {r: rad, h} = p;
+        const l = Math.sqrt(rad**2+h**2);
+        const rIn = r(rad * h / (rad + l)), rOut = r((rad**2 + h**2) / (2 * h));
+        return { V: r(PI*rad**2*h/3), S: r(PI*rad*(rad+l)), S_side: r(PI*rad*l), d: r(2*rad), h,
+          formulas: [`V = ⅓πr²h = ${r(PI*rad**2*h/3)}`, `l = √(r²+h²) = ${r(l)}`, `S_бок = πrl = ${r(PI*rad*l)}`,
+            `r_вп = ${rIn}`, `R_оп = ${rOut}`] };
+      }
+      case 'trunccone': {
+        const {R: R1, r: r1, h} = p;
+        const l = Math.sqrt((R1-r1)**2+h**2);
+        const V = PI*h*(R1**2+R1*r1+r1**2)/3;
+        return { V: r(V), S: r(PI*(R1**2+r1**2+(R1+r1)*l)), S_side: r(PI*(R1+r1)*l), d: null, h,
+          formulas: [`V = ⅓πh(R²+Rr+r²) = ${r(V)}`, `l = ${r(l)}`, `S_бок = π(R+r)l = ${r(PI*(R1+r1)*l)}`] };
+      }
+      case 'sphere': {
+        const rad = p.r;
+        return { V: r(4*PI*rad**3/3), S: r(4*PI*rad**2), S_side: null, d: r(2*rad), h: r(2*rad),
+          formulas: [`V = ⁴⁄₃πr³ = ${r(4*PI*rad**3/3)}`, `S = 4πr² = ${r(4*PI*rad**2)}`, `d = 2r = ${r(2*rad)}`] };
+      }
+      case 'prism': {
+        const {a, h, n} = p;
+        const sBase = n * a**2 / (4 * Math.tan(PI/n));
+        const apothem = a / (2 * Math.tan(PI/n));
+        const Rb = a / (2 * Math.sin(PI/n));
+        const rIn = r(Math.min(apothem, h/2)), rOut = r(Math.sqrt(Rb**2 + (h/2)**2));
+        return { V: r(sBase*h), S: r(2*sBase + n*a*h), S_side: r(n*a*h), d: null, h,
+          formulas: [`V = S_осн·h = ${r(sBase*h)}`, `S_осн = ${r(sBase)}`, `S_бок = nah = ${r(n*a*h)}`,
+            `r_вп = ${rIn}`, `R_оп = ${rOut}`] };
+      }
+      default: return { V: 0, S: 0, S_side: 0, d: 0, h: 0, formulas: [] };
+    }
+  }
+
+  getSectionArea() {
+    if (!this.showSection || !this._sectionPolygon || !this._sectionPolygon.length) return 0;
+    return this._polygonArea(this._sectionPolygon);
+  }
+
+  info() {
+    const f = this.getFormulas();
+    return {
+      type: this.figureType,
+      V: f.V, S: f.S, S_side: f.S_side, d: f.d, h: f.h,
+      sectionArea: this.showSection ? this.getSectionArea() : null,
+      inscribedR: this.showInscribed ? this._inscribedRadius() : null,
+      circumscribedR: this.showCircumscribed ? this._circumscribedRadius() : null,
+      customPoints: this._customPoints.length,
+      connections: this._connections.length,
+    };
+  }
+
+  fit() {
+    const w = this.container.clientWidth || 600;
+    const h = this.container.clientHeight || 400;
+    this.camera.aspect = w / h;
+    this.camera.updateProjectionMatrix();
+    this.renderer.setSize(w, h);
+  }
+
+  play()  { if (!this._running) { this._running = true; this._loop(); } }
+  stop()  { this._running = false; }
+  pause() { this._running = false; }
+
+  /* ════════════════ GRID + AXES ════════════════ */
+
+  _buildGrid() {
+    this._clearGroup(this._gridGroup);
+    if (this.showGrid) {
+      const grid = new THREE.GridHelper(20, 20, 0x222244, 0x151530);
+      grid.position.y = -0.01;
+      this._gridGroup.add(grid);
+    }
+    if (this.showAxes) {
+      const axes = new THREE.AxesHelper(6);
+      axes.material.transparent = true;
+      axes.material.opacity = 0.4;
+      this._gridGroup.add(axes);
+    }
+  }
+
+  /* ════════════════ FIGURE BUILDER ════════════════ */
+
+  _buildFigure() {
+    this._clearGroup(this._figGroup);
+    this._clearGroup(this._labelGroup);
+    this._vertices = [];
+    this._edges = [];
+    this._faces = [];
+
+    const builders = {
+      cube:           () => this._buildCube(),
+      parallelepiped: () => this._buildParallelepiped(),
+      pyramid:        () => this._buildPyramid(),
+      tetrahedron:    () => this._buildTetrahedron(),
+      cylinder:       () => this._buildCylinder(),
+      cone:           () => this._buildCone(),
+      trunccone:      () => this._buildTruncCone(),
+      sphere:         () => this._buildSphere(),
+      prism:          () => this._buildPrism(),
+    };
+    (builders[this.figureType] || builders.cube)();
+
+    this._updateSection();
+    this._updateSpheres();
+    this._drawHeightLine();
+    this._drawApothemLine();
+    this._drawDiagonals();
+    this._drawMidpoints();
+  }
+
+  /* ── BOX helpers ── */
+  _buildBox(sx, sy, sz) {
+    const hx = sx/2, hy = sy/2, hz = sz/2;
+    // 8 vertices
+    const v = [
+      new THREE.Vector3(-hx, 0,  hz), // A (0)
+      new THREE.Vector3( hx, 0,  hz), // B (1)
+      new THREE.Vector3( hx, 0, -hz), // C (2)
+      new THREE.Vector3(-hx, 0, -hz), // D (3)
+      new THREE.Vector3(-hx, sy, hz), // E (4)
+      new THREE.Vector3( hx, sy, hz), // F (5)
+      new THREE.Vector3( hx, sy,-hz), // G (6)
+      new THREE.Vector3(-hx, sy,-hz), // H (7)
+    ];
+    const labels = ['A','B','C','D','E','F','G','H'];
+    this._vertices = v.map((pos, i) => ({ pos, label: labels[i] }));
+
+    const edgeIdx = [[0,1],[1,2],[2,3],[3,0],[4,5],[5,6],[6,7],[7,4],[0,4],[1,5],[2,6],[3,7]];
+    this._edges = edgeIdx.map(([a,b]) => ({ from: v[a], to: v[b] }));
+
+    this._faces = [
+      [v[0],v[1],v[2],v[3]], // bottom
+      [v[4],v[5],v[6],v[7]], // top
+      [v[0],v[1],v[5],v[4]], // front
+      [v[2],v[3],v[7],v[6]], // back
+      [v[1],v[2],v[6],v[5]], // right
+      [v[0],v[3],v[7],v[4]], // left
+    ];
+
+    // transparent mesh
+    const geo = new THREE.BoxGeometry(sx, sy, sz);
+    geo.translate(0, sy/2, 0);
+    const mat = new THREE.MeshPhysicalMaterial({
+      color: 0x9B5DE5, transparent: true, opacity: this.opacity,
+      side: THREE.DoubleSide, metalness: 0.05, roughness: 0.4,
+      clearcoat: 0.3, depthWrite: false,
+    });
+    this._figGroup.add(new THREE.Mesh(geo, mat));
+
+    this._addEdges();
+    this._addVerticesAndLabels();
+  }
+
+  _buildCube() { const a = this.params.a; this._buildBox(a, a, a); }
+  _buildParallelepiped() { this._buildBox(this.params.a, this.params.c, this.params.b); }
+
+  /* ── PYRAMID ── */
+  _buildPyramid() {
+    const { a, h, n } = this.params;
+    const baseVerts = this._regularPolygon(n, a);
+    const apex = new THREE.Vector3(0, h, 0);
+    const labels = 'ABCDEFGH'.split('');
+
+    this._vertices = baseVerts.map((pos, i) => ({ pos, label: labels[i] || `P${i}` }));
+    this._vertices.push({ pos: apex, label: 'S' });
+
+    // edges: base ring + apex connections
+    for (let i = 0; i < n; i++) {
+      this._edges.push({ from: baseVerts[i], to: baseVerts[(i+1)%n] });
+      this._edges.push({ from: baseVerts[i], to: apex });
+    }
+
+    // faces: base + lateral triangles
+    this._faces.push([...baseVerts]);
+    for (let i = 0; i < n; i++) {
+      this._faces.push([baseVerts[i], baseVerts[(i+1)%n], apex]);
+    }
+
+    this._addMeshFromFaces(0x06D6A0);
+    this._addEdges();
+    this._addVerticesAndLabels();
+  }
+
+  /* ── TETRAHEDRON ── */
+  _buildTetrahedron() {
+    const a = this.params.a;
+    const h = a * Math.sqrt(2/3);
+    const r = a / Math.sqrt(3);
+    const v = [
+      new THREE.Vector3(0, 0, r),
+      new THREE.Vector3(a/2, 0, -r/2),
+      new THREE.Vector3(-a/2, 0, -r/2),
+      new THREE.Vector3(0, h, 0),
+    ];
+    const labels = ['A','B','C','D'];
+    this._vertices = v.map((pos, i) => ({ pos, label: labels[i] }));
+
+    const edgeIdx = [[0,1],[1,2],[2,0],[0,3],[1,3],[2,3]];
+    this._edges = edgeIdx.map(([a,b]) => ({ from: v[a], to: v[b] }));
+
+    this._faces = [
+      [v[0],v[1],v[2]],
+      [v[0],v[1],v[3]],
+      [v[1],v[2],v[3]],
+      [v[0],v[2],v[3]],
+    ];
+
+    this._addMeshFromFaces(0x06D6E0);
+    this._addEdges();
+    this._addVerticesAndLabels();
+  }
+
+  /* ── CYLINDER ── */
+  _buildCylinder() {
+    const { r, h } = this.params;
+    const geo = new THREE.CylinderGeometry(r, r, h, 48, 1, false);
+    geo.translate(0, h/2, 0);
+    const mat = new THREE.MeshPhysicalMaterial({
+      color: 0xF59E0B, transparent: true, opacity: this.opacity,
+      side: THREE.DoubleSide, metalness: 0.05, roughness: 0.4, depthWrite: false,
+    });
+    this._figGroup.add(new THREE.Mesh(geo, mat));
+
+    // wireframe rings
+    const ringGeo = new THREE.RingGeometry(r - 0.02, r + 0.02, 48);
+    const ringMat = new THREE.MeshBasicMaterial({ color: 0xFFD166, side: THREE.DoubleSide });
+    const bottomRing = new THREE.Mesh(ringGeo, ringMat);
+    bottomRing.rotation.x = -Math.PI/2;
+    this._figGroup.add(bottomRing);
+    const topRing = bottomRing.clone();
+    topRing.position.y = h;
+    this._figGroup.add(topRing);
+
+    // edges: two vertical lines + center
+    const n = 8;
+    for (let i = 0; i < n; i++) {
+      const angle = (i / n) * Math.PI * 2;
+      const x = r * Math.cos(angle), z = r * Math.sin(angle);
+      this._edges.push({ from: new THREE.Vector3(x, 0, z), to: new THREE.Vector3(x, h, z) });
+    }
+    // center axis
+    this._vertices.push({ pos: new THREE.Vector3(0, 0, 0), label: 'O₁' });
+    this._vertices.push({ pos: new THREE.Vector3(0, h, 0), label: 'O₂' });
+    this._edges.push({ from: new THREE.Vector3(0, 0, 0), to: new THREE.Vector3(0, h, 0) });
+
+    this._addEdges(0.4);
+    this._addVerticesAndLabels();
+  }
+
+  /* ── CONE ── */
+  _buildCone() {
+    const { r, h } = this.params;
+    const geo = new THREE.CylinderGeometry(0, r, h, 48, 1, false);
+    geo.translate(0, h/2, 0);
+    const mat = new THREE.MeshPhysicalMaterial({
+      color: 0xE0335E, transparent: true, opacity: this.opacity,
+      side: THREE.DoubleSide, metalness: 0.05, roughness: 0.4, depthWrite: false,
+    });
+    this._figGroup.add(new THREE.Mesh(geo, mat));
+
+    // bottom ring
+    const ringGeo = new THREE.RingGeometry(r - 0.02, r + 0.02, 48);
+    const ringMat = new THREE.MeshBasicMaterial({ color: 0xFF6B8A, side: THREE.DoubleSide });
+    const ring = new THREE.Mesh(ringGeo, ringMat);
+    ring.rotation.x = -Math.PI/2;
+    this._figGroup.add(ring);
+
+    const apex = new THREE.Vector3(0, h, 0);
+    this._vertices.push({ pos: new THREE.Vector3(0, 0, 0), label: 'O' });
+    this._vertices.push({ pos: apex, label: 'S' });
+    // slant lines
+    const n = 8;
+    for (let i = 0; i < n; i++) {
+      const angle = (i / n) * Math.PI * 2;
+      const x = r * Math.cos(angle), z = r * Math.sin(angle);
+      this._edges.push({ from: new THREE.Vector3(x, 0, z), to: apex });
+    }
+    this._edges.push({ from: new THREE.Vector3(0, 0, 0), to: apex });
+
+    this._addEdges(0.4);
+    this._addVerticesAndLabels();
+  }
+
+  /* ── TRUNCATED CONE ── */
+  _buildTruncCone() {
+    const { R, r, h } = this.params;
+    const geo = new THREE.CylinderGeometry(r, R, h, 48, 1, false);
+    geo.translate(0, h/2, 0);
+    const mat = new THREE.MeshPhysicalMaterial({
+      color: 0x60A5FA, transparent: true, opacity: this.opacity,
+      side: THREE.DoubleSide, metalness: 0.05, roughness: 0.4, depthWrite: false,
+    });
+    this._figGroup.add(new THREE.Mesh(geo, mat));
+
+    // rings
+    for (const [rad, y] of [[R, 0], [r, h]]) {
+      const rg = new THREE.RingGeometry(rad - 0.02, rad + 0.02, 48);
+      const rm = new THREE.MeshBasicMaterial({ color: 0x93C5FD, side: THREE.DoubleSide });
+      const mesh = new THREE.Mesh(rg, rm);
+      mesh.rotation.x = -Math.PI/2; mesh.position.y = y;
+      this._figGroup.add(mesh);
+    }
+
+    this._vertices.push({ pos: new THREE.Vector3(0, 0, 0), label: 'O₁' });
+    this._vertices.push({ pos: new THREE.Vector3(0, h, 0), label: 'O₂' });
+    this._edges.push({ from: new THREE.Vector3(0, 0, 0), to: new THREE.Vector3(0, h, 0) });
+
+    const n = 8;
+    for (let i = 0; i < n; i++) {
+      const angle = (i / n) * Math.PI * 2;
+      this._edges.push({
+        from: new THREE.Vector3(R * Math.cos(angle), 0, R * Math.sin(angle)),
+        to:   new THREE.Vector3(r * Math.cos(angle), h, r * Math.sin(angle)),
+      });
+    }
+
+    this._addEdges(0.4);
+    this._addVerticesAndLabels();
+  }
+
+  /* ── SPHERE ── */
+  _buildSphere() {
+    const rad = this.params.r;
+    const geo = new THREE.SphereGeometry(rad, 48, 32);
+    geo.translate(0, rad, 0);
+    const mat = new THREE.MeshPhysicalMaterial({
+      color: 0x9B5DE5, transparent: true, opacity: this.opacity,
+      side: THREE.DoubleSide, metalness: 0.1, roughness: 0.3,
+      clearcoat: 0.5, depthWrite: false,
+    });
+    this._figGroup.add(new THREE.Mesh(geo, mat));
+
+    // equator + meridian wireframes
+    const createCircle = (radius, y, rotX) => {
+      const pts = [];
+      for (let i = 0; i <= 64; i++) {
+        const a = (i/64)*Math.PI*2;
+        pts.push(new THREE.Vector3(radius*Math.cos(a), 0, radius*Math.sin(a)));
+      }
+      const lineGeo = new THREE.BufferGeometry().setFromPoints(pts);
+      const lineMat = new THREE.LineBasicMaterial({ color: 0xCCCCFF, transparent: true, opacity: 0.5 });
+      const line = new THREE.Line(lineGeo, lineMat);
+      line.position.y = y;
+      if (rotX) line.rotation.x = rotX;
+      return line;
+    };
+    this._figGroup.add(createCircle(rad, rad, 0));
+    this._figGroup.add(createCircle(rad, rad, Math.PI/2));
+
+    this._vertices.push({ pos: new THREE.Vector3(0, rad, 0), label: 'O' });
+    this._vertices.push({ pos: new THREE.Vector3(0, 2*rad, 0), label: 'N' });
+    this._vertices.push({ pos: new THREE.Vector3(0, 0, 0), label: 'S' });
+    this._addVerticesAndLabels();
+  }
+
+  /* ── PRISM ── */
+  _buildPrism() {
+    const { a, h, n } = this.params;
+    const baseVerts = this._regularPolygon(n, a);
+    const topVerts  = baseVerts.map(v => new THREE.Vector3(v.x, h, v.z));
+    const labels = 'ABCDEFGH'.split('');
+
+    this._vertices = baseVerts.map((pos, i) => ({ pos, label: labels[i] || `P${i}` }));
+    topVerts.forEach((pos, i) => this._vertices.push({ pos, label: (labels[i] || `P${i}`) + '₁' }));
+
+    // edges
+    for (let i = 0; i < n; i++) {
+      this._edges.push({ from: baseVerts[i], to: baseVerts[(i+1)%n] }); // base
+      this._edges.push({ from: topVerts[i], to: topVerts[(i+1)%n] });   // top
+      this._edges.push({ from: baseVerts[i], to: topVerts[i] });         // vertical
+    }
+
+    // faces
+    this._faces.push([...baseVerts]);
+    this._faces.push([...topVerts]);
+    for (let i = 0; i < n; i++) {
+      const j = (i+1) % n;
+      this._faces.push([baseVerts[i], baseVerts[j], topVerts[j], topVerts[i]]);
+    }
+
+    this._addMeshFromFaces(0x06D6A0);
+    this._addEdges();
+    this._addVerticesAndLabels();
+  }
+
+  /* ════════════════ GEOMETRY HELPERS ════════════════ */
+
+  _regularPolygon(n, sideLength) {
+    const r = sideLength / (2 * Math.sin(Math.PI / n));
+    const pts = [];
+    for (let i = 0; i < n; i++) {
+      const angle = (i / n) * Math.PI * 2 - Math.PI / 2;
+      pts.push(new THREE.Vector3(r * Math.cos(angle), 0, r * Math.sin(angle)));
+    }
+    return pts;
+  }
+
+  _addMeshFromFaces(color) {
+    // Build a single mesh from faces
+    const positions = [];
+    const indices = [];
+    let vi = 0;
+
+    for (const face of this._faces) {
+      const base = vi;
+      for (const v of face) {
+        positions.push(v.x, v.y, v.z);
+        vi++;
+      }
+      // triangulate fan
+      for (let i = 1; i < face.length - 1; i++) {
+        indices.push(base, base + i, base + i + 1);
+      }
+    }
+
+    const geo = new THREE.BufferGeometry();
+    geo.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
+    geo.setIndex(indices);
+    geo.computeVertexNormals();
+
+    const mat = new THREE.MeshPhysicalMaterial({
+      color, transparent: true, opacity: this.opacity,
+      side: THREE.DoubleSide, metalness: 0.05, roughness: 0.4,
+      clearcoat: 0.2, depthWrite: false,
+    });
+    this._figGroup.add(new THREE.Mesh(geo, mat));
+  }
+
+  _addEdges(opac = 0.8) {
+    if (!this.showEdges) return;
+    for (const e of this._edges) {
+      const pts = [e.from, e.to];
+      const geo = new THREE.BufferGeometry().setFromPoints(pts);
+      const mat = new THREE.LineBasicMaterial({ color: 0xFFFFFF, transparent: true, opacity: opac, linewidth: 2 });
+      this._figGroup.add(new THREE.Line(geo, mat));
+    }
+  }
+
+  _addVerticesAndLabels() {
+    for (const v of this._vertices) {
+      if (this.showVertices) {
+        const sGeo = new THREE.SphereGeometry(0.08, 12, 12);
+        const sMat = new THREE.MeshBasicMaterial({ color: 0xFFFFFF });
+        const sphere = new THREE.Mesh(sGeo, sMat);
+        sphere.position.copy(v.pos);
+        this._figGroup.add(sphere);
+      }
+
+      if (this.showLabels) {
+        const sprite = this._makeTextSprite(v.label);
+        sprite.position.copy(v.pos).add(new THREE.Vector3(0.15, 0.25, 0));
+        this._labelGroup.add(sprite);
+      }
+    }
+  }
+
+  _makeTextSprite(text, color = '#ffffff', size = 64) {
+    const canvas = document.createElement('canvas');
+    canvas.width = 128; canvas.height = 64;
+    const ctx = canvas.getContext('2d');
+    ctx.font = `bold ${size}px Manrope, sans-serif`;
+    ctx.fillStyle = color;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(text, 64, 32);
+
+    const tex = new THREE.CanvasTexture(canvas);
+    tex.minFilter = THREE.LinearFilter;
+    const mat = new THREE.SpriteMaterial({ map: tex, transparent: true, depthTest: false });
+    const sprite = new THREE.Sprite(mat);
+    sprite.scale.set(0.8, 0.4, 1);
+    return sprite;
+  }
+
+  /* ════════════════ SECTION PLANE ════════════════ */
+
+  _updateSection() {
+    this._clearGroup(this._sectionGroup);
+    this._sectionPolygon = null;
+    if (!this.showSection) return;
+
+    const figH = this._figureHeight();
+    const t = this.sectionType;
+
+    if (t === 'horizontal') {
+      const y = figH * this.sectionHeight;
+      this._sectionPolygon = this._sliceAtY(y);
+      if (this._sectionPolygon.length >= 3) {
+        this._drawSectionPolygon(this._sectionPolygon, y);
+        // translucent plane
+        const planeGeo = new THREE.PlaneGeometry(16, 16);
+        const planeMat = new THREE.MeshBasicMaterial({ color: 0x06D6E0, transparent: true, opacity: 0.08, side: THREE.DoubleSide });
+        const planeMesh = new THREE.Mesh(planeGeo, planeMat);
+        planeMesh.rotation.x = -Math.PI/2;
+        planeMesh.position.y = y;
+        this._sectionGroup.add(planeMesh);
+      }
+    } else if (t === 'diagonal') {
+      this._sectionPolygon = this._sliceDiagonal();
+      if (this._sectionPolygon.length >= 3) {
+        this._drawSectionPolygon3D(this._sectionPolygon);
+        this._drawSectionInfo(this._sectionPolygon);
+      }
+    } else if (t === 'custom') {
+      // Need ≥3 custom points to define a plane
+      if (this._customPoints.length >= 3) {
+        const pts3 = this._customPoints.slice(0, 3).map(p => p.pos);
+        this._sectionPolygon = this._sliceByPlane(pts3[0], pts3[1], pts3[2]);
+        if (this._sectionPolygon.length >= 3) {
+          this._drawSectionPolygon3D(this._sectionPolygon);
+          this._drawSectionInfo(this._sectionPolygon);
+        }
+      }
+    }
+  }
+
+  _figureHeight() {
+    const p = this.params;
+    switch (this.figureType) {
+      case 'cube': return p.a;
+      case 'parallelepiped': return p.c;
+      case 'pyramid': case 'prism': return p.h;
+      case 'tetrahedron': return p.a * Math.sqrt(2/3);
+      case 'cylinder': case 'cone': case 'trunccone': return p.h;
+      case 'sphere': return p.r * 2;
+      default: return p.h || p.a || 4;
+    }
+  }
+
+  _sliceAtY(y) {
+    // Find intersections of all edges with horizontal plane y
+    const points = [];
+    for (const e of this._edges) {
+      const y1 = e.from.y, y2 = e.to.y;
+      if ((y1 <= y && y2 >= y) || (y2 <= y && y1 >= y)) {
+        if (Math.abs(y2 - y1) < 1e-9) continue;
+        const t = (y - y1) / (y2 - y1);
+        if (t < -0.001 || t > 1.001) continue;
+        const pt = new THREE.Vector3().lerpVectors(e.from, e.to, t);
+        points.push(pt);
+      }
+    }
+    // For cylinders/cones/spheres with no explicit edges, generate circle
+    if (points.length < 3) {
+      const circleR = this._radiusAtHeight(y);
+      if (circleR > 0.01) {
+        const n = 48;
+        for (let i = 0; i < n; i++) {
+          const a = (i/n)*Math.PI*2;
+          points.push(new THREE.Vector3(circleR*Math.cos(a), y, circleR*Math.sin(a)));
+        }
+      }
+    }
+    // Sort by angle from centroid
+    return this._sortByAngle(points);
+  }
+
+  _radiusAtHeight(y) {
+    const p = this.params;
+    const fh = this._figureHeight();
+    const t = Math.max(0, Math.min(1, y / fh));
+    switch (this.figureType) {
+      case 'cylinder': return p.r;
+      case 'cone': return p.r * (1 - t);
+      case 'trunccone': return p.R + (p.r - p.R) * t;
+      case 'sphere': {
+        const dy = y - p.r; // center at (0, r, 0)
+        const r2 = p.r**2 - dy**2;
+        return r2 > 0 ? Math.sqrt(r2) : 0;
+      }
+      default: return 0;
+    }
+  }
+
+  _sliceDiagonal() {
+    const fh = this._figureHeight();
+    const y = fh * this.sectionHeight;
+    // Tilt angle: sectionAngle 0=horizontal, 1=nearly vertical (~80°)
+    const tiltRad = this.sectionAngle * Math.PI * 0.44; // 0..~80°
+    // Normal rotated from vertical (0,1,0) toward X axis
+    const normal = new THREE.Vector3(Math.sin(tiltRad), Math.cos(tiltRad), 0).normalize();
+    const pointOnPlane = new THREE.Vector3(0, y, 0);
+    return this._sliceByNormal(normal, pointOnPlane);
+  }
+
+  _sliceByPlane(p1, p2, p3) {
+    // Plane through 3 points
+    const v1 = new THREE.Vector3().subVectors(p2, p1);
+    const v2 = new THREE.Vector3().subVectors(p3, p1);
+    const normal = new THREE.Vector3().crossVectors(v1, v2).normalize();
+    if (normal.length() < 1e-9) return [];
+    return this._sliceByNormal(normal, p1);
+  }
+
+  _sliceByNormal(normal, pointOnPlane) {
+    const d = -normal.dot(pointOnPlane);
+    const points = [];
+
+    // Intersect with all edges
+    for (const e of this._edges) {
+      const d1 = normal.dot(e.from) + d;
+      const d2 = normal.dot(e.to) + d;
+      if ((d1 <= 0 && d2 >= 0) || (d2 <= 0 && d1 >= 0)) {
+        if (Math.abs(d2 - d1) < 1e-9) continue;
+        const t = -d1 / (d2 - d1);
+        if (t < -0.001 || t > 1.001) continue;
+        points.push(new THREE.Vector3().lerpVectors(e.from, e.to, Math.max(0, Math.min(1, t))));
+      }
+    }
+
+    // For cylinders/cones/spheres — sample the intersection curve
+    if (points.length < 3 && ['cylinder','cone','trunccone','sphere'].includes(this.figureType)) {
+      const fh = this._figureHeight();
+      const samples = 64;
+      for (let i = 0; i < samples; i++) {
+        const angle = (i / samples) * Math.PI * 2;
+        // Walk along height, find where the plane intersects at this angle
+        for (let step = 0; step <= 100; step++) {
+          const y = (step / 100) * fh;
+          const r = this._radiusAtHeight(y);
+          if (r < 0.01) continue;
+          const pt = new THREE.Vector3(r * Math.cos(angle), y, r * Math.sin(angle));
+          const dist = normal.dot(pt) + d;
+          if (Math.abs(dist) < fh * 0.012) {
+            points.push(pt);
+            break;
+          }
+        }
+      }
+    }
+
+    // Sort into convex polygon order (project onto plane, sort by angle)
+    return this._sortByAngle3D(points, normal);
+  }
+
+  _sortByAngle(points) {
+    if (points.length < 3) return points;
+    const cx = points.reduce((s,p) => s+p.x, 0) / points.length;
+    const cz = points.reduce((s,p) => s+p.z, 0) / points.length;
+    points.sort((a,b) => Math.atan2(a.z-cz, a.x-cx) - Math.atan2(b.z-cz, b.x-cx));
+    return points;
+  }
+
+  _sortByAngle3D(points, normal) {
+    if (points.length < 3) return points;
+    // Remove near-duplicates
+    const unique = [points[0]];
+    for (let i = 1; i < points.length; i++) {
+      let dup = false;
+      for (const u of unique) {
+        if (points[i].distanceTo(u) < 0.01) { dup = true; break; }
+      }
+      if (!dup) unique.push(points[i]);
+    }
+    if (unique.length < 3) return unique;
+
+    // Centroid
+    const c = new THREE.Vector3();
+    unique.forEach(p => c.add(p));
+    c.divideScalar(unique.length);
+
+    // Build local 2D basis on the plane
+    const u = new THREE.Vector3().subVectors(unique[0], c).normalize();
+    const v = new THREE.Vector3().crossVectors(normal, u).normalize();
+
+    // Project and sort by angle
+    unique.sort((a, b) => {
+      const da = new THREE.Vector3().subVectors(a, c);
+      const db = new THREE.Vector3().subVectors(b, c);
+      return Math.atan2(da.dot(v), da.dot(u)) - Math.atan2(db.dot(v), db.dot(u));
+    });
+    return unique;
+  }
+
+  _drawSectionInfo(pts) {
+    if (pts.length < 3) return;
+    const area = this._polygonArea(pts);
+    let perimeter = 0;
+    for (let i = 0; i < pts.length; i++) {
+      perimeter += pts[i].distanceTo(pts[(i + 1) % pts.length]);
+    }
+    // Label at centroid
+    const c = new THREE.Vector3();
+    pts.forEach(p => c.add(p));
+    c.divideScalar(pts.length);
+    const label = this._makeTextSprite(`S=${area.toFixed(1)} P=${perimeter.toFixed(1)}`, '#06D6E0', 36);
+    label.position.copy(c).add(new THREE.Vector3(0, 0.4, 0));
+    label.scale.set(1.6, 0.5, 1);
+    this._sectionGroup.add(label);
+
+    // Vertex markers on section polygon
+    for (const p of pts) {
+      const sGeo = new THREE.SphereGeometry(0.06, 8, 8);
+      const sMat = new THREE.MeshBasicMaterial({ color: 0x06D6E0 });
+      const sm = new THREE.Mesh(sGeo, sMat);
+      sm.position.copy(p);
+      this._sectionGroup.add(sm);
+    }
+  }
+
+  _drawSectionPolygon(pts, y) {
+    if (pts.length < 3) return;
+    // Fill polygon
+    const shape = new THREE.Shape();
+    shape.moveTo(pts[0].x, pts[0].z);
+    for (let i = 1; i < pts.length; i++) shape.lineTo(pts[i].x, pts[i].z);
+    shape.closePath();
+    const geo = new THREE.ShapeGeometry(shape);
+    const mat = new THREE.MeshBasicMaterial({ color: 0x06D6E0, transparent: true, opacity: 0.35, side: THREE.DoubleSide });
+    const mesh = new THREE.Mesh(geo, mat);
+    mesh.rotation.x = -Math.PI/2;
+    mesh.position.y = y + 0.005;
+    this._sectionGroup.add(mesh);
+
+    // outline
+    const linePts = [...pts, pts[0]];
+    const lineGeo = new THREE.BufferGeometry().setFromPoints(linePts);
+    const lineMat = new THREE.LineBasicMaterial({ color: 0x06D6E0, linewidth: 2 });
+    this._sectionGroup.add(new THREE.Line(lineGeo, lineMat));
+  }
+
+  _drawSectionPolygon3D(pts) {
+    if (pts.length < 3) return;
+    const positions = [];
+    const indices = [];
+    pts.forEach(p => positions.push(p.x, p.y, p.z));
+    for (let i = 1; i < pts.length - 1; i++) indices.push(0, i, i+1);
+    const geo = new THREE.BufferGeometry();
+    geo.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
+    geo.setIndex(indices);
+    geo.computeVertexNormals();
+    const mat = new THREE.MeshBasicMaterial({ color: 0x06D6E0, transparent: true, opacity: 0.35, side: THREE.DoubleSide });
+    this._sectionGroup.add(new THREE.Mesh(geo, mat));
+
+    const linePts = [...pts, pts[0]];
+    const lineGeo = new THREE.BufferGeometry().setFromPoints(linePts);
+    this._sectionGroup.add(new THREE.Line(lineGeo, new THREE.LineBasicMaterial({ color: 0x06D6E0 })));
+  }
+
+  _polygonArea(pts) {
+    // Shoelace in 3D — project onto best-fit plane
+    if (pts.length < 3) return 0;
+    let area = 0;
+    const n = pts.length;
+    const cx = pts.reduce((s,p)=>s+p.x,0)/n;
+    const cy = pts.reduce((s,p)=>s+p.y,0)/n;
+    const cz = pts.reduce((s,p)=>s+p.z,0)/n;
+    // Cross-product sum
+    const cross = new THREE.Vector3(0,0,0);
+    for (let i = 0; i < n; i++) {
+      const a = new THREE.Vector3().subVectors(pts[i], new THREE.Vector3(cx,cy,cz));
+      const b = new THREE.Vector3().subVectors(pts[(i+1)%n], new THREE.Vector3(cx,cy,cz));
+      cross.add(new THREE.Vector3().crossVectors(a, b));
+    }
+    return Math.round(cross.length() / 2 * 100) / 100;
+  }
+
+  /* ════════════════ INSCRIBED / CIRCUMSCRIBED ════════════════ */
+
+  _inscribedRadius() {
+    const p = this.params;
+    const PI = Math.PI;
+    switch (this.figureType) {
+      case 'cube': return p.a / 2;
+      case 'parallelepiped': return Math.min(p.a, p.b, p.c) / 2;
+      case 'tetrahedron': return p.a / (2 * Math.sqrt(6));
+      case 'sphere': return p.r;
+      case 'cylinder': return Math.min(p.r, p.h / 2);
+      case 'cone': {
+        // r_in = r * h / (r + sqrt(r²+h²))
+        const l = Math.sqrt(p.r ** 2 + p.h ** 2);
+        return p.r * p.h / (p.r + l);
+      }
+      case 'trunccone': {
+        // inscribed sphere radius = h * (R - r) / (2 * sqrt((R-r)² + h²))... approximate
+        // exact for truncated cone: r_in = h / (1 + sqrt(1 + ((R-r)/h)²)) * (not standard)
+        // simpler: r_in = h * min(R, r) / sqrt((R-r)² + h²) — approximate
+        // Actually: for truncated cone, inscribed sphere touches both bases and lateral surface
+        // r_in = h * (R + r - sqrt((R-r)² + h²)) / (2 * (R - r)) when R ≠ r
+        if (Math.abs(p.R - p.r) < 0.001) return Math.min(p.R, p.h / 2); // cylinder-like
+        const l = Math.sqrt((p.R - p.r) ** 2 + p.h ** 2);
+        return p.h * (p.R + p.r - l) / (2 * Math.abs(p.R - p.r));
+      }
+      case 'pyramid': {
+        // r_in = 3V / S_total
+        const { a, h, n } = p;
+        const sBase = n * a ** 2 / (4 * Math.tan(PI / n));
+        const apothem = a / (2 * Math.tan(PI / n));
+        const slantH = Math.sqrt(h ** 2 + apothem ** 2);
+        const sLat = n * a * slantH / 2;
+        const V = sBase * h / 3;
+        return 3 * V / (sBase + sLat);
+      }
+      case 'prism': {
+        // r_in = apothem of base (if h >= 2*apothem), else h/2
+        const { a, h, n } = p;
+        const apothem = a / (2 * Math.tan(PI / n));
+        return Math.min(apothem, h / 2);
+      }
+      default: return null;
+    }
+  }
+
+  _circumscribedRadius() {
+    const p = this.params;
+    const PI = Math.PI;
+    switch (this.figureType) {
+      case 'cube': return p.a * Math.sqrt(3) / 2;
+      case 'parallelepiped': return Math.sqrt(p.a ** 2 + p.b ** 2 + p.c ** 2) / 2;
+      case 'tetrahedron': return p.a * Math.sqrt(6) / 4;
+      case 'sphere': return p.r;
+      case 'cylinder': return Math.sqrt(p.r ** 2 + (p.h / 2) ** 2);
+      case 'cone': {
+        // circumscribed sphere around cone: passes through apex and base circle
+        // R = (r² + h²) / (2h)
+        return (p.r ** 2 + p.h ** 2) / (2 * p.h);
+      }
+      case 'trunccone': {
+        // R = sqrt(R² + (h/2 + (R²-r²)/(2h))²) — approximate
+        const hc = p.h / 2 + (p.R ** 2 - p.r ** 2) / (2 * p.h);
+        return Math.sqrt(p.R ** 2 + hc ** 2);
+      }
+      case 'pyramid': {
+        // R = sqrt(R_base² + h²_offset) where R_base = circumradius of base polygon
+        // center of circumscribed sphere at height y: y = h - R, R² = R_base² + (h - y)²
+        // solving: R = (R_base² + h²) / (2h)
+        const { a, h, n } = p;
+        const Rb = a / (2 * Math.sin(PI / n));
+        return (Rb ** 2 + h ** 2) / (2 * h);
+      }
+      case 'prism': {
+        // R = sqrt(R_base² + (h/2)²)
+        const { a, h, n } = p;
+        const Rb = a / (2 * Math.sin(PI / n));
+        return Math.sqrt(Rb ** 2 + (h / 2) ** 2);
+      }
+      default: return null;
+    }
+  }
+
+  _inscribedCenter() {
+    const p = this.params;
+    const PI = Math.PI;
+    switch (this.figureType) {
+      case 'cube': return p.a / 2;
+      case 'parallelepiped': return p.c / 2;
+      case 'tetrahedron': return p.a / (2 * Math.sqrt(6)); // r_in from base
+      case 'sphere': return p.r;
+      case 'cylinder': return p.h / 2;
+      case 'cone': {
+        const l = Math.sqrt(p.r ** 2 + p.h ** 2);
+        return p.r * p.h / (p.r + l); // r_in = height of center
+      }
+      case 'trunccone': return p.h / 2;
+      case 'pyramid': {
+        // inscribed sphere center at height r_in from base
+        const { a, h, n } = p;
+        const sBase = n * a ** 2 / (4 * Math.tan(PI / n));
+        const apothem = a / (2 * Math.tan(PI / n));
+        const slantH = Math.sqrt(h ** 2 + apothem ** 2);
+        const sLat = n * a * slantH / 2;
+        const V = sBase * h / 3;
+        return 3 * V / (sBase + sLat); // r_in
+      }
+      case 'prism': return p.h / 2;
+      default: return this._figureHeight() / 2;
+    }
+  }
+
+  _circumscribedCenter() {
+    const p = this.params;
+    const PI = Math.PI;
+    switch (this.figureType) {
+      case 'cube': return p.a / 2;
+      case 'parallelepiped': return p.c / 2;
+      case 'tetrahedron': {
+        // center at h - R from base = h - a*sqrt(6)/4
+        const h = p.a * Math.sqrt(2 / 3);
+        return h - p.a * Math.sqrt(6) / 4;
+      }
+      case 'sphere': return p.r;
+      case 'cylinder': return p.h / 2;
+      case 'cone': {
+        // center at y = R_circ from apex? No. center at y = h - R + h_offset
+        // R = (r²+h²)/(2h), center at y = h - R = h - (r²+h²)/(2h) = (h²-r²)/(2h)
+        // but if r > h, center goes below base — clamp
+        const R = (p.r ** 2 + p.h ** 2) / (2 * p.h);
+        return p.h - R;
+      }
+      case 'trunccone': {
+        const hc = p.h / 2 + (p.R ** 2 - p.r ** 2) / (2 * p.h);
+        return hc; // height of center from base
+      }
+      case 'pyramid': {
+        const { a, h, n } = p;
+        const Rb = a / (2 * Math.sin(PI / n));
+        const R = (Rb ** 2 + h ** 2) / (2 * h);
+        return h - R; // from base
+      }
+      case 'prism': return p.h / 2;
+      default: return this._figureHeight() / 2;
+    }
+  }
+
+  _updateSpheres() {
+    this._clearGroup(this._sphereGroup);
+
+    if (this.showInscribed) {
+      const r = this._inscribedRadius();
+      const cy = this._inscribedCenter();
+      if (r && r > 0) {
+        const geo = new THREE.SphereGeometry(r, 32, 24);
+        const mat = new THREE.MeshPhysicalMaterial({
+          color: 0x06D6E0, transparent: true, opacity: 0.12,
+          side: THREE.DoubleSide, depthWrite: false,
+        });
+        const mesh = new THREE.Mesh(geo, mat);
+        mesh.position.y = cy;
+        this._sphereGroup.add(mesh);
+        const wf = new THREE.LineSegments(
+          new THREE.WireframeGeometry(geo),
+          new THREE.LineBasicMaterial({ color: 0x06D6E0, transparent: true, opacity: 0.2 })
+        );
+        wf.position.y = cy;
+        this._sphereGroup.add(wf);
+        // radius label
+        const lbl = this._makeTextSprite(`r=${r.toFixed(2)}`, '#06D6E0', 36);
+        lbl.position.set(r * 0.5, cy + r * 0.3, 0);
+        lbl.scale.set(1.0, 0.4, 1);
+        this._sphereGroup.add(lbl);
+        // radius line
+        const lineGeo = new THREE.BufferGeometry().setFromPoints([
+          new THREE.Vector3(0, cy, 0), new THREE.Vector3(r, cy, 0)
+        ]);
+        const lineMat = new THREE.LineDashedMaterial({ color: 0x06D6E0, dashSize: 0.1, gapSize: 0.06, transparent: true, opacity: 0.7 });
+        const line = new THREE.Line(lineGeo, lineMat);
+        line.computeLineDistances();
+        this._sphereGroup.add(line);
+      }
+    }
+
+    if (this.showCircumscribed) {
+      const R = this._circumscribedRadius();
+      const cy = this._circumscribedCenter();
+      if (R && R > 0) {
+        const geo = new THREE.SphereGeometry(R, 32, 24);
+        const mat = new THREE.MeshPhysicalMaterial({
+          color: 0xF59E0B, transparent: true, opacity: 0.08,
+          side: THREE.DoubleSide, depthWrite: false,
+        });
+        const mesh = new THREE.Mesh(geo, mat);
+        mesh.position.y = cy;
+        this._sphereGroup.add(mesh);
+        const wf = new THREE.LineSegments(
+          new THREE.WireframeGeometry(geo),
+          new THREE.LineBasicMaterial({ color: 0xF59E0B, transparent: true, opacity: 0.15 })
+        );
+        wf.position.y = cy;
+        this._sphereGroup.add(wf);
+        // radius label
+        const lbl = this._makeTextSprite(`R=${R.toFixed(2)}`, '#F59E0B', 36);
+        lbl.position.set(R * 0.5, cy + R * 0.3, 0);
+        lbl.scale.set(1.0, 0.4, 1);
+        this._sphereGroup.add(lbl);
+        // radius line
+        const lineGeo = new THREE.BufferGeometry().setFromPoints([
+          new THREE.Vector3(0, cy, 0), new THREE.Vector3(R, cy, 0)
+        ]);
+        const lineMat = new THREE.LineDashedMaterial({ color: 0xF59E0B, dashSize: 0.1, gapSize: 0.06, transparent: true, opacity: 0.7 });
+        const line = new THREE.Line(lineGeo, lineMat);
+        line.computeLineDistances();
+        this._sphereGroup.add(line);
+      }
+    }
+  }
+
+  /* ════════════════ MEASUREMENT MODE ════════════════ */
+
+  _onMeasureClick(e) {
+    if (!this._measureMode) return;
+    const { mx, my } = this._screenCoords(e);
+
+    // Find closest vertex OR custom point in screen space
+    let bestDist = 0.08; // threshold in NDC
+    let bestPick = null;
+
+    // Check vertices
+    for (const v of this._vertices) {
+      const projected = v.pos.clone().project(this.camera);
+      const d = Math.sqrt((projected.x - mx) ** 2 + (projected.y - my) ** 2);
+      if (d < bestDist) { bestDist = d; bestPick = { pos: v.pos, label: v.label }; }
+    }
+
+    // Check custom points
+    for (const cp of this._customPoints) {
+      const projected = cp.pos.clone().project(this.camera);
+      const d = Math.sqrt((projected.x - mx) ** 2 + (projected.y - my) ** 2);
+      if (d < bestDist) { bestDist = d; bestPick = { pos: cp.pos, label: cp.label }; }
+    }
+
+    if (!bestPick) return;
+
+    this._measurePicks.push(bestPick);
+
+    // Highlight picked point
+    const sGeo = new THREE.SphereGeometry(0.14, 12, 12);
+    const sMat = new THREE.MeshBasicMaterial({ color: 0xFFD166 });
+    const s = new THREE.Mesh(sGeo, sMat);
+    s.position.copy(bestPick.pos);
+    this._measureGroup.add(s);
+
+    if (this._measurePicks.length === 2) {
+      const [a, b] = this._measurePicks;
+      const dist = a.pos.distanceTo(b.pos);
+      const mid = new THREE.Vector3().addVectors(a.pos, b.pos).multiplyScalar(0.5);
+
+      // Dashed line
+      const pts = [a.pos, b.pos];
+      const lineGeo = new THREE.BufferGeometry().setFromPoints(pts);
+      const lineMat = new THREE.LineDashedMaterial({ color: 0xFFD166, dashSize: 0.15, gapSize: 0.1, transparent: true, opacity: 0.9 });
+      const line = new THREE.Line(lineGeo, lineMat);
+      line.computeLineDistances();
+      this._measureGroup.add(line);
+
+      // Label
+      const label = this._makeTextSprite(`${a.label}${b.label} = ${dist.toFixed(2)}`, '#FFD166', 40);
+      label.position.copy(mid).add(new THREE.Vector3(0, 0.3, 0));
+      label.scale.set(1.4, 0.5, 1);
+      this._measureGroup.add(label);
+
+      this._measurements.push({ from: a.label, to: b.label, dist: Math.round(dist * 100) / 100 });
+      this._measurePicks = [];
+    }
+  }
+
+  /* ════════════════ POINT MODE — place points on edges ════════════════ */
+
+  _screenCoords(e) {
+    const rect = this.renderer.domElement.getBoundingClientRect();
+    return {
+      mx: ((e.clientX - rect.left) / rect.width) * 2 - 1,
+      my: -((e.clientY - rect.top) / rect.height) * 2 + 1,
+    };
+  }
+
+  _onPointClick(e) {
+    const { mx, my } = this._screenCoords(e);
+
+    // Find the nearest edge in screen space
+    let bestDist = 0.08; // threshold in NDC
+    let bestEdge = -1;
+    let bestT = 0;
+    let bestPos = null;
+
+    for (let ei = 0; ei < this._edges.length; ei++) {
+      const edge = this._edges[ei];
+      const p1 = edge.from.clone().project(this.camera);
+      const p2 = edge.to.clone().project(this.camera);
+
+      // Point-to-segment distance in 2D
+      const dx = p2.x - p1.x, dy = p2.y - p1.y;
+      const lenSq = dx * dx + dy * dy;
+      if (lenSq < 1e-9) continue;
+      let t = ((mx - p1.x) * dx + (my - p1.y) * dy) / lenSq;
+      t = Math.max(0.02, Math.min(0.98, t)); // clamp away from endpoints
+      const px = p1.x + t * dx, py = p1.y + t * dy;
+      const dist = Math.sqrt((mx - px) ** 2 + (my - py) ** 2);
+
+      if (dist < bestDist) {
+        bestDist = dist;
+        bestEdge = ei;
+        bestT = t;
+        bestPos = new THREE.Vector3().lerpVectors(edge.from, edge.to, t);
+      }
+    }
+
+    // Also check: click near a vertex <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> snap to vertex
+    for (const v of this._vertices) {
+      const proj = v.pos.clone().project(this.camera);
+      const dist = Math.sqrt((mx - proj.x) ** 2 + (my - proj.y) ** 2);
+      if (dist < 0.06) {
+        bestPos = v.pos.clone();
+        bestEdge = -2; // special: vertex
+        bestT = 0;
+        bestDist = dist;
+      }
+    }
+
+    if (!bestPos) return;
+
+    const label = String(this._nextPointId++);
+    this._customPoints.push({
+      pos: bestPos,
+      edgeIdx: bestEdge,
+      t: bestT,
+      label,
+    });
+
+    this._rebuildPointVisuals();
+
+    // If custom section mode and ≥3 points, update section
+    if (this.showSection && this.sectionType === 'custom') this._updateSection();
+    this._notify();
+  }
+
+  _onConnectClick(e) {
+    const { mx, my } = this._screenCoords(e);
+
+    // Find nearest custom point OR vertex
+    let bestDist = 0.08;
+    let bestIdx = -1;
+
+    // Check custom points
+    for (let i = 0; i < this._customPoints.length; i++) {
+      const proj = this._customPoints[i].pos.clone().project(this.camera);
+      const dist = Math.sqrt((mx - proj.x) ** 2 + (my - proj.y) ** 2);
+      if (dist < bestDist) { bestDist = dist; bestIdx = i; }
+    }
+
+    // Also check vertices (mapped as negative indices: -1 <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> vertex 0, -2 <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> vertex 1, etc.)
+    for (let i = 0; i < this._vertices.length; i++) {
+      const proj = this._vertices[i].pos.clone().project(this.camera);
+      const dist = Math.sqrt((mx - proj.x) ** 2 + (my - proj.y) ** 2);
+      if (dist < bestDist) { bestDist = dist; bestIdx = -(i + 100); } // encode vertex
+    }
+
+    if (bestIdx === -1 && bestIdx !== -(99 + this._vertices.length)) return; // nothing found
+    // Actually check: any valid pick
+    if (bestDist >= 0.08) return;
+
+    this._connectPicks.push(bestIdx);
+
+    // Highlight pick
+    const pos = bestIdx >= 0 ? this._customPoints[bestIdx].pos : this._vertices[-(bestIdx + 100)].pos;
+    const sGeo = new THREE.SphereGeometry(0.12, 10, 10);
+    const sMat = new THREE.MeshBasicMaterial({ color: 0xF59E0B });
+    const s = new THREE.Mesh(sGeo, sMat);
+    s.position.copy(pos);
+    this._pointGroup.add(s);
+
+    if (this._connectPicks.length === 2) {
+      const [idxA, idxB] = this._connectPicks;
+      if (idxA !== idxB) {
+        this._connections.push({ from: idxA, to: idxB });
+      }
+      this._connectPicks = [];
+      this._rebuildPointVisuals();
+      this._notify();
+    }
+  }
+
+  _getPointPos(idx) {
+    if (idx >= 0) return this._customPoints[idx]?.pos;
+    return this._vertices[-(idx + 100)]?.pos;
+  }
+
+  _getPointLabel(idx) {
+    if (idx >= 0) return this._customPoints[idx]?.label || '?';
+    return this._vertices[-(idx + 100)]?.label || '?';
+  }
+
+  _rebuildPointVisuals() {
+    this._clearGroup(this._pointGroup);
+
+    // Draw custom points
+    for (const pt of this._customPoints) {
+      // Sphere marker
+      const sGeo = new THREE.SphereGeometry(0.1, 10, 10);
+      const sMat = new THREE.MeshBasicMaterial({ color: 0xFFD166 });
+      const s = new THREE.Mesh(sGeo, sMat);
+      s.position.copy(pt.pos);
+      this._pointGroup.add(s);
+
+      // Label
+      const label = this._makeTextSprite(pt.label, '#FFD166', 40);
+      label.position.copy(pt.pos).add(new THREE.Vector3(0.2, 0.2, 0));
+      label.scale.set(0.6, 0.3, 1);
+      this._pointGroup.add(label);
+    }
+
+    // Draw connections
+    for (const conn of this._connections) {
+      const posA = this._getPointPos(conn.from);
+      const posB = this._getPointPos(conn.to);
+      if (!posA || !posB) continue;
+
+      const lineGeo = new THREE.BufferGeometry().setFromPoints([posA, posB]);
+      const lineMat = new THREE.LineDashedMaterial({
+        color: 0xF59E0B, dashSize: 0.12, gapSize: 0.06,
+        transparent: true, opacity: 0.9,
+      });
+      const line = new THREE.Line(lineGeo, lineMat);
+      line.computeLineDistances();
+      this._pointGroup.add(line);
+
+      // Distance label
+      const dist = posA.distanceTo(posB);
+      const mid = new THREE.Vector3().addVectors(posA, posB).multiplyScalar(0.5);
+      const lbl = this._makeTextSprite(dist.toFixed(2), '#F59E0B', 36);
+      lbl.position.copy(mid).add(new THREE.Vector3(0, 0.25, 0));
+      lbl.scale.set(0.8, 0.4, 1);
+      this._pointGroup.add(lbl);
+    }
+  }
+
+  /* ════════════════ HEIGHT LINE ════════════════ */
+
+  _drawHeightLine() {
+    if (!this.showHeight) return;
+    const p = this.params;
+    const fh = this._figureHeight();
+    let from, to, label;
+
+    switch (this.figureType) {
+      case 'cube':
+      case 'parallelepiped':
+      case 'prism':
+      case 'cylinder': {
+        // vertical height: center of bottom base <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> center of top base
+        from = new THREE.Vector3(0, 0, 0);
+        to   = new THREE.Vector3(0, fh, 0);
+        label = `h = ${fh.toFixed(2)}`;
+        break;
+      }
+      case 'pyramid': {
+        // apex to base center
+        from = new THREE.Vector3(0, 0, 0);
+        to   = new THREE.Vector3(0, p.h, 0);
+        label = `h = ${p.h.toFixed(2)}`;
+        break;
+      }
+      case 'tetrahedron': {
+        const h = p.a * Math.sqrt(2 / 3);
+        from = new THREE.Vector3(0, 0, 0);
+        to   = new THREE.Vector3(0, h, 0);
+        label = `h = ${h.toFixed(2)}`;
+        break;
+      }
+      case 'cone': {
+        from = new THREE.Vector3(0, 0, 0);
+        to   = new THREE.Vector3(0, p.h, 0);
+        label = `h = ${p.h.toFixed(2)}`;
+        break;
+      }
+      case 'trunccone': {
+        from = new THREE.Vector3(0, 0, 0);
+        to   = new THREE.Vector3(0, p.h, 0);
+        label = `h = ${p.h.toFixed(2)}`;
+        break;
+      }
+      case 'sphere': {
+        from = new THREE.Vector3(0, 0, 0);
+        to   = new THREE.Vector3(0, 2 * p.r, 0);
+        label = `d = ${(2 * p.r).toFixed(2)}`;
+        break;
+      }
+      default: return;
+    }
+
+    // dashed line
+    const lineGeo = new THREE.BufferGeometry().setFromPoints([from, to]);
+    const lineMat = new THREE.LineDashedMaterial({
+      color: 0xF9A8D4, dashSize: 0.15, gapSize: 0.08,
+      transparent: true, opacity: 0.85,
+    });
+    const line = new THREE.Line(lineGeo, lineMat);
+    line.computeLineDistances();
+    this._figGroup.add(line);
+
+    // small dots at endpoints
+    for (const pt of [from, to]) {
+      const sGeo = new THREE.SphereGeometry(0.06, 8, 8);
+      const sMat = new THREE.MeshBasicMaterial({ color: 0xF9A8D4 });
+      const s = new THREE.Mesh(sGeo, sMat);
+      s.position.copy(pt);
+      this._figGroup.add(s);
+    }
+
+    // label at midpoint
+    const mid = new THREE.Vector3().addVectors(from, to).multiplyScalar(0.5);
+    const lbl = this._makeTextSprite(label, '#F9A8D4', 36);
+    lbl.position.copy(mid).add(new THREE.Vector3(0.4, 0, 0));
+    lbl.scale.set(1.2, 0.4, 1);
+    this._labelGroup.add(lbl);
+
+    // right-angle marker at base (for pyramid/cone/tetrahedron)
+    if (['pyramid', 'tetrahedron', 'cone'].includes(this.figureType)) {
+      this._drawRightAngleMarker(from, new THREE.Vector3(0, 1, 0), new THREE.Vector3(1, 0, 0), 0.3);
+    }
+  }
+
+  _drawRightAngleMarker(origin, dir1, dir2, size) {
+    const p1 = origin.clone().add(dir1.clone().normalize().multiplyScalar(size));
+    const p2 = origin.clone().add(dir2.clone().normalize().multiplyScalar(size));
+    const p3 = p1.clone().add(dir2.clone().normalize().multiplyScalar(size));
+    const pts = [p1, p3, p2];
+    const geo = new THREE.BufferGeometry().setFromPoints(pts);
+    const mat = new THREE.LineBasicMaterial({ color: 0xF9A8D4, transparent: true, opacity: 0.6 });
+    this._figGroup.add(new THREE.Line(geo, mat));
+  }
+
+  /* ════════════════ APOTHEM LINE ════════════════ */
+
+  _drawApothemLine() {
+    if (!this.showApothem) return;
+    const p = this.params;
+    const PI = Math.PI;
+
+    if (this.figureType === 'pyramid') {
+      const { a, h, n } = p;
+      const apothem = a / (2 * Math.tan(PI / n)); // base apothem
+      const slantH = Math.sqrt(h ** 2 + apothem ** 2); // slant apothem
+
+      // Base apothem: center of base to midpoint of first base edge
+      const midEdge = this._getBaseMidpoint(n, a, 0);
+      this._drawDashedSegment(
+        new THREE.Vector3(0, 0, 0), midEdge,
+        `a_осн = ${apothem.toFixed(2)}`, '#7BF5A4'
+      );
+
+      // Slant apothem: apex to midpoint of first base edge
+      this._drawDashedSegment(
+        new THREE.Vector3(0, h, 0), midEdge,
+        `a_бок = ${slantH.toFixed(2)}`, '#60a5fa'
+      );
+
+      // Right angle at midEdge (between base apothem and base edge direction)
+      const edgeDir = this._getBaseEdgeDir(n, a, 0);
+      const toCenter = new THREE.Vector3().subVectors(new THREE.Vector3(0, 0, 0), midEdge).normalize();
+      this._drawRightAngleMarker(midEdge, toCenter, edgeDir, 0.25);
+
+    } else if (this.figureType === 'prism') {
+      const { a, h, n } = p;
+      const apothem = a / (2 * Math.tan(PI / n));
+
+      // Base apothem
+      const midEdge = this._getBaseMidpoint(n, a, 0);
+      this._drawDashedSegment(
+        new THREE.Vector3(0, 0, 0), midEdge,
+        `a = ${apothem.toFixed(2)}`, '#7BF5A4'
+      );
+
+      // Right angle marker
+      const edgeDir = this._getBaseEdgeDir(n, a, 0);
+      const toCenter = new THREE.Vector3().subVectors(new THREE.Vector3(0, 0, 0), midEdge).normalize();
+      this._drawRightAngleMarker(midEdge, toCenter, edgeDir, 0.25);
+
+    } else if (this.figureType === 'cone') {
+      // Slant height (образующая)
+      const l = Math.sqrt(p.r ** 2 + p.h ** 2);
+      this._drawDashedSegment(
+        new THREE.Vector3(0, p.h, 0),
+        new THREE.Vector3(p.r, 0, 0),
+        `l = ${l.toFixed(2)}`, '#60a5fa'
+      );
+
+    } else if (this.figureType === 'trunccone') {
+      const l = Math.sqrt((p.R - p.r) ** 2 + p.h ** 2);
+      this._drawDashedSegment(
+        new THREE.Vector3(p.r, p.h, 0),
+        new THREE.Vector3(p.R, 0, 0),
+        `l = ${l.toFixed(2)}`, '#60a5fa'
+      );
+    }
+  }
+
+  _getBaseMidpoint(n, a, edgeIndex) {
+    const r = a / (2 * Math.sin(Math.PI / n));
+    const a1 = (edgeIndex / n) * Math.PI * 2 - Math.PI / 2;
+    const a2 = ((edgeIndex + 1) / n) * Math.PI * 2 - Math.PI / 2;
+    return new THREE.Vector3(
+      (r * Math.cos(a1) + r * Math.cos(a2)) / 2,
+      0,
+      (r * Math.sin(a1) + r * Math.sin(a2)) / 2
+    );
+  }
+
+  _getBaseEdgeDir(n, a, edgeIndex) {
+    const r = a / (2 * Math.sin(Math.PI / n));
+    const a1 = (edgeIndex / n) * Math.PI * 2 - Math.PI / 2;
+    const a2 = ((edgeIndex + 1) / n) * Math.PI * 2 - Math.PI / 2;
+    const p1 = new THREE.Vector3(r * Math.cos(a1), 0, r * Math.sin(a1));
+    const p2 = new THREE.Vector3(r * Math.cos(a2), 0, r * Math.sin(a2));
+    return new THREE.Vector3().subVectors(p2, p1).normalize();
+  }
+
+  _drawDashedSegment(from, to, label, color) {
+    const lineGeo = new THREE.BufferGeometry().setFromPoints([from, to]);
+    const lineMat = new THREE.LineDashedMaterial({
+      color: new THREE.Color(color), dashSize: 0.12, gapSize: 0.06,
+      transparent: true, opacity: 0.85,
+    });
+    const line = new THREE.Line(lineGeo, lineMat);
+    line.computeLineDistances();
+    this._figGroup.add(line);
+
+    // dots
+    for (const pt of [from, to]) {
+      const sGeo = new THREE.SphereGeometry(0.05, 8, 8);
+      const sMat = new THREE.MeshBasicMaterial({ color: new THREE.Color(color) });
+      const s = new THREE.Mesh(sGeo, sMat);
+      s.position.copy(pt);
+      this._figGroup.add(s);
+    }
+
+    // label
+    const mid = new THREE.Vector3().addVectors(from, to).multiplyScalar(0.5);
+    const lbl = this._makeTextSprite(label, color, 34);
+    lbl.position.copy(mid).add(new THREE.Vector3(0.3, 0.2, 0));
+    lbl.scale.set(1.2, 0.4, 1);
+    this._labelGroup.add(lbl);
+  }
+
+  /* ════════════════ ANGLE MEASUREMENT MODES ════════════════ */
+
+  _pickNearestPoint(e) {
+    const { mx, my } = this._screenCoords(e);
+    let bestDist = 0.08;
+    let bestPick = null;
+
+    for (const v of this._vertices) {
+      const projected = v.pos.clone().project(this.camera);
+      const d = Math.sqrt((projected.x - mx) ** 2 + (projected.y - my) ** 2);
+      if (d < bestDist) { bestDist = d; bestPick = { pos: v.pos.clone(), label: v.label }; }
+    }
+    for (const cp of this._customPoints) {
+      const projected = cp.pos.clone().project(this.camera);
+      const d = Math.sqrt((projected.x - mx) ** 2 + (projected.y - my) ** 2);
+      if (d < bestDist) { bestDist = d; bestPick = { pos: cp.pos.clone(), label: cp.label }; }
+    }
+    return bestPick;
+  }
+
+  _pickNearestFace(e) {
+    // Pick the face whose projected centroid is closest to click
+    const { mx, my } = this._screenCoords(e);
+    let bestDist = 0.15;
+    let bestFace = null;
+    let bestIdx = -1;
+
+    for (let fi = 0; fi < this._faces.length; fi++) {
+      const face = this._faces[fi];
+      const c = new THREE.Vector3();
+      face.forEach(v => c.add(v));
+      c.divideScalar(face.length);
+      const proj = c.clone().project(this.camera);
+      const d = Math.sqrt((proj.x - mx) ** 2 + (proj.y - my) ** 2);
+      if (d < bestDist) { bestDist = d; bestFace = face; bestIdx = fi; }
+    }
+    return bestFace;
+  }
+
+  _pickNearestEdge(e) {
+    const { mx, my } = this._screenCoords(e);
+    let bestDist = 0.06;
+    let bestEdge = null;
+
+    for (const edge of this._edges) {
+      const p1 = edge.from.clone().project(this.camera);
+      const p2 = edge.to.clone().project(this.camera);
+      const mid = { x: (p1.x + p2.x) / 2, y: (p1.y + p2.y) / 2 };
+      const d = Math.sqrt((mid.x - mx) ** 2 + (mid.y - my) ** 2);
+      if (d < bestDist) { bestDist = d; bestEdge = edge; }
+    }
+    return bestEdge;
+  }
+
+  _highlightPick(pos, color = 0xFFD166) {
+    const sGeo = new THREE.SphereGeometry(0.12, 10, 10);
+    const sMat = new THREE.MeshBasicMaterial({ color });
+    const s = new THREE.Mesh(sGeo, sMat);
+    s.position.copy(pos);
+    this._angleGroup.add(s);
+  }
+
+  _onAngleClick(e) {
+    if (!this._angleMode) return;
+
+    if (this._angleMode === 'edge') {
+      this._onEdgeAngleClick(e);
+    } else if (this._angleMode === 'linePlane') {
+      this._onLinePlaneAngleClick(e);
+    } else if (this._angleMode === 'dihedral') {
+      this._onDihedralAngleClick(e);
+    } else if (this._angleMode === 'pointPlane') {
+      this._onPointPlaneClick(e);
+    }
+  }
+
+  /* ── Edge angle: pick 3 points (B is vertex, angle ∠ABC) ── */
+  _onEdgeAngleClick(e) {
+    const pick = this._pickNearestPoint(e);
+    if (!pick) return;
+
+    this._anglePicks.push(pick);
+    this._highlightPick(pick.pos, this._anglePicks.length === 2 ? 0xEF476F : 0xFFD166);
+
+    if (this._anglePicks.length === 3) {
+      const [A, B, C] = this._anglePicks;
+      const BA = new THREE.Vector3().subVectors(A.pos, B.pos);
+      const BC = new THREE.Vector3().subVectors(C.pos, B.pos);
+      const cosAngle = BA.dot(BC) / (BA.length() * BC.length());
+      const angle = Math.acos(Math.max(-1, Math.min(1, cosAngle))) * 180 / Math.PI;
+
+      // Draw the angle arc
+      this._drawAngleArc(B.pos, BA, BC, angle, 0.6, '#EF476F');
+
+      // Label
+      const bisect = new THREE.Vector3().addVectors(
+        BA.clone().normalize(), BC.clone().normalize()
+      ).normalize().multiplyScalar(0.8);
+      const lblPos = B.pos.clone().add(bisect);
+      const lbl = this._makeTextSprite(
+        `∠${A.label}${B.label}${C.label} = ${angle.toFixed(1)}°`, '#EF476F', 36
+      );
+      lbl.position.copy(lblPos);
+      lbl.scale.set(2.0, 0.5, 1);
+      this._angleGroup.add(lbl);
+
+      // Lines
+      this._drawAngleLine(B.pos, A.pos, '#EF476F');
+      this._drawAngleLine(B.pos, C.pos, '#EF476F');
+
+      this._anglePicks = [];
+    }
+  }
+
+  /* ── Line-Plane angle: pick 2 points (line), then 1 face ── */
+  _onLinePlaneAngleClick(e) {
+    if (this._anglePicks.length < 2) {
+      // Picking line endpoints
+      const pick = this._pickNearestPoint(e);
+      if (!pick) return;
+      this._anglePicks.push(pick);
+      this._highlightPick(pick.pos);
+
+      if (this._anglePicks.length === 2) {
+        // Draw the line
+        this._drawAngleLine(this._anglePicks[0].pos, this._anglePicks[1].pos, '#60a5fa');
+      }
+    } else {
+      // Pick a face
+      const face = this._pickNearestFace(e);
+      if (!face || face.length < 3) return;
+
+      const [A, B] = this._anglePicks;
+      const lineDir = new THREE.Vector3().subVectors(B.pos, A.pos).normalize();
+
+      // Face normal
+      const v1 = new THREE.Vector3().subVectors(face[1], face[0]);
+      const v2 = new THREE.Vector3().subVectors(face[2], face[0]);
+      const normal = new THREE.Vector3().crossVectors(v1, v2).normalize();
+
+      // Angle between line and plane = 90° - angle between line and normal
+      const sinAngle = Math.abs(lineDir.dot(normal));
+      const angle = Math.asin(Math.max(0, Math.min(1, sinAngle))) * 180 / Math.PI;
+
+      // Highlight face
+      const positions = [];
+      const indices = [];
+      face.forEach(v => positions.push(v.x, v.y, v.z));
+      for (let i = 1; i < face.length - 1; i++) indices.push(0, i, i + 1);
+      const geo = new THREE.BufferGeometry();
+      geo.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
+      geo.setIndex(indices);
+      const mat = new THREE.MeshBasicMaterial({ color: 0x60a5fa, transparent: true, opacity: 0.2, side: THREE.DoubleSide });
+      this._angleGroup.add(new THREE.Mesh(geo, mat));
+
+      // Label at face centroid
+      const c = new THREE.Vector3();
+      face.forEach(v => c.add(v));
+      c.divideScalar(face.length);
+      const lbl = this._makeTextSprite(
+        `∠(${A.label}${B.label}, пл) = ${angle.toFixed(1)}°`, '#60a5fa', 36
+      );
+      lbl.position.copy(c).add(new THREE.Vector3(0, 0.5, 0));
+      lbl.scale.set(2.4, 0.5, 1);
+      this._angleGroup.add(lbl);
+
+      // Draw projection of line onto plane
+      const proj = lineDir.clone().sub(normal.clone().multiplyScalar(lineDir.dot(normal))).normalize();
+      const projEnd = A.pos.clone().add(proj.multiplyScalar(A.pos.distanceTo(B.pos)));
+      this._drawAngleLine(A.pos, projEnd, '#60a5fa', true);
+
+      this._anglePicks = [];
+    }
+  }
+
+  /* ── Dihedral angle: pick 2 points of shared edge, then auto-find adjacent faces ── */
+  _onDihedralAngleClick(e) {
+    const pick = this._pickNearestPoint(e);
+    if (!pick) return;
+
+    this._anglePicks.push(pick);
+    this._highlightPick(pick.pos, 0xc4b5fd);
+
+    if (this._anglePicks.length === 2) {
+      const [P1, P2] = this._anglePicks;
+      const edgeDir = new THREE.Vector3().subVectors(P2.pos, P1.pos);
+
+      // Find two faces sharing this edge (both contain P1 and P2)
+      const adjFaces = [];
+      const eps = 0.1;
+      for (const face of this._faces) {
+        let hasP1 = false, hasP2 = false;
+        for (const v of face) {
+          if (v.distanceTo(P1.pos) < eps) hasP1 = true;
+          if (v.distanceTo(P2.pos) < eps) hasP2 = true;
+        }
+        if (hasP1 && hasP2) adjFaces.push(face);
+      }
+
+      if (adjFaces.length >= 2) {
+        // Compute normals of both faces
+        const normal1 = this._faceNormal(adjFaces[0]);
+        const normal2 = this._faceNormal(adjFaces[1]);
+
+        // Dihedral angle = π - angle between outward normals
+        const cosAngle = normal1.dot(normal2);
+        const rawAngle = Math.acos(Math.max(-1, Math.min(1, cosAngle))) * 180 / Math.PI;
+        // Dihedral is the interior angle
+        const dihedralAngle = 180 - rawAngle;
+
+        // Highlight both faces
+        for (const face of [adjFaces[0], adjFaces[1]]) {
+          const positions = [];
+          const indices = [];
+          face.forEach(v => positions.push(v.x, v.y, v.z));
+          for (let i = 1; i < face.length - 1; i++) indices.push(0, i, i + 1);
+          const geo = new THREE.BufferGeometry();
+          geo.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
+          geo.setIndex(indices);
+          const mat = new THREE.MeshBasicMaterial({ color: 0xc4b5fd, transparent: true, opacity: 0.2, side: THREE.DoubleSide });
+          this._angleGroup.add(new THREE.Mesh(geo, mat));
+        }
+
+        // Label at edge midpoint
+        const mid = new THREE.Vector3().addVectors(P1.pos, P2.pos).multiplyScalar(0.5);
+        const lbl = this._makeTextSprite(
+          `∠дв(${P1.label}${P2.label}) = ${dihedralAngle.toFixed(1)}°`, '#c4b5fd', 36
+        );
+        lbl.position.copy(mid).add(new THREE.Vector3(0, 0.5, 0.3));
+        lbl.scale.set(2.4, 0.5, 1);
+        this._angleGroup.add(lbl);
+
+        // Draw the edge
+        this._drawAngleLine(P1.pos, P2.pos, '#c4b5fd');
+      } else {
+        // Not enough adjacent faces — show error sprite
+        const mid = new THREE.Vector3().addVectors(P1.pos, P2.pos).multiplyScalar(0.5);
+        const lbl = this._makeTextSprite('Нет общего ребра', '#ff6b6b', 36);
+        lbl.position.copy(mid).add(new THREE.Vector3(0, 0.5, 0));
+        lbl.scale.set(2.0, 0.5, 1);
+        this._angleGroup.add(lbl);
+      }
+
+      this._anglePicks = [];
+    }
+  }
+
+  _faceNormal(face) {
+    if (face.length < 3) return new THREE.Vector3(0, 1, 0);
+    const v1 = new THREE.Vector3().subVectors(face[1], face[0]);
+    const v2 = new THREE.Vector3().subVectors(face[2], face[0]);
+    return new THREE.Vector3().crossVectors(v1, v2).normalize();
+  }
+
+  _drawAngleArc(center, dir1, dir2, angleDeg, radius, color) {
+    const n1 = dir1.clone().normalize();
+    const n2 = dir2.clone().normalize();
+    const angleRad = angleDeg * Math.PI / 180;
+    const steps = Math.max(8, Math.round(angleDeg / 5));
+    const pts = [];
+
+    // Build rotation from n1 toward n2
+    const axis = new THREE.Vector3().crossVectors(n1, n2).normalize();
+    if (axis.length() < 0.001) return; // parallel vectors
+
+    for (let i = 0; i <= steps; i++) {
+      const t = i / steps;
+      const a = t * angleRad;
+      const rotated = n1.clone().applyAxisAngle(axis, a).multiplyScalar(radius);
+      pts.push(center.clone().add(rotated));
+    }
+
+    const geo = new THREE.BufferGeometry().setFromPoints(pts);
+    const mat = new THREE.LineBasicMaterial({ color: new THREE.Color(color), transparent: true, opacity: 0.8 });
+    this._angleGroup.add(new THREE.Line(geo, mat));
+  }
+
+  _drawAngleLine(from, to, color, dashed = false) {
+    const geo = new THREE.BufferGeometry().setFromPoints([from, to]);
+    let mat;
+    if (dashed) {
+      mat = new THREE.LineDashedMaterial({
+        color: new THREE.Color(color), dashSize: 0.12, gapSize: 0.06,
+        transparent: true, opacity: 0.7,
+      });
+    } else {
+      mat = new THREE.LineBasicMaterial({ color: new THREE.Color(color), transparent: true, opacity: 0.7 });
+    }
+    const line = new THREE.Line(geo, mat);
+    if (dashed) line.computeLineDistances();
+    this._angleGroup.add(line);
+  }
+
+  /* ════════════════ DIAGONALS ════════════════ */
+
+  _drawDiagonals() {
+    if (!this.showDiagonals) return;
+    const t = this.figureType;
+
+    if (t === 'cube' || t === 'parallelepiped') {
+      // 8 vertices: 0-3 bottom, 4-7 top (from _buildBox)
+      const v = this._vertices.map(vt => vt.pos);
+      if (v.length < 8) return;
+
+      // Space diagonals (4)
+      const spaceDiags = [[0,6],[1,7],[2,4],[3,5]];
+      for (const [a, b] of spaceDiags) {
+        this._drawDashedSegment(v[a], v[b], '', '#fbbf24');
+      }
+
+      // Face diagonals (12) — 2 per face
+      const faceDiags = [
+        [0,2],[1,3], // bottom
+        [4,6],[5,7], // top
+        [0,5],[1,4], // front
+        [2,7],[3,6], // back
+        [1,6],[2,5], // right
+        [0,7],[3,4], // left
+      ];
+      for (const [a, b] of faceDiags) {
+        const lineGeo = new THREE.BufferGeometry().setFromPoints([v[a], v[b]]);
+        const lineMat = new THREE.LineDashedMaterial({
+          color: 0xF59E0B, dashSize: 0.1, gapSize: 0.06,
+          transparent: true, opacity: 0.35,
+        });
+        const line = new THREE.Line(lineGeo, lineMat);
+        line.computeLineDistances();
+        this._figGroup.add(line);
+      }
+
+      // Space diagonal label — only one, the longest
+      const d = v[0].distanceTo(v[6]);
+      const mid = new THREE.Vector3().addVectors(v[0], v[6]).multiplyScalar(0.5);
+      const lbl = this._makeTextSprite(`d = ${d.toFixed(2)}`, '#fbbf24', 34);
+      lbl.position.copy(mid).add(new THREE.Vector3(0.3, 0.2, 0));
+      lbl.scale.set(1.2, 0.4, 1);
+      this._labelGroup.add(lbl);
+
+    } else if (t === 'prism') {
+      const n = this.params.n;
+      const v = this._vertices.map(vt => vt.pos);
+      if (v.length < n * 2) return;
+
+      // Base diagonals (bottom)
+      for (let i = 0; i < n; i++) {
+        for (let j = i + 2; j < n; j++) {
+          if (j === (i + n - 1) % n + i) continue; // skip adjacent
+          if (i === 0 && j === n - 1) continue;
+          const lineGeo = new THREE.BufferGeometry().setFromPoints([v[i], v[j]]);
+          const lineMat = new THREE.LineDashedMaterial({
+            color: 0xF59E0B, dashSize: 0.1, gapSize: 0.06,
+            transparent: true, opacity: 0.35,
+          });
+          const line = new THREE.Line(lineGeo, lineMat);
+          line.computeLineDistances();
+          this._figGroup.add(line);
+        }
+      }
+      // Top diagonals
+      for (let i = n; i < 2 * n; i++) {
+        for (let j = i + 2; j < 2 * n; j++) {
+          if (i === n && j === 2 * n - 1) continue;
+          const lineGeo = new THREE.BufferGeometry().setFromPoints([v[i], v[j]]);
+          const lineMat = new THREE.LineDashedMaterial({
+            color: 0xF59E0B, dashSize: 0.1, gapSize: 0.06,
+            transparent: true, opacity: 0.35,
+          });
+          const line = new THREE.Line(lineGeo, lineMat);
+          line.computeLineDistances();
+          this._figGroup.add(line);
+        }
+      }
+      // Space diagonals: connect bottom[i] to top[(i+k)%n] for k≠0
+      for (let i = 0; i < n; i++) {
+        for (let k = 1; k < n; k++) {
+          const j = n + (i + k) % n;
+          this._drawDashedSegment(v[i], v[j], '', '#fbbf24');
+        }
+      }
+
+    } else if (t === 'pyramid') {
+      // Base diagonals only
+      const n = this.params.n;
+      const v = this._vertices.map(vt => vt.pos);
+      for (let i = 0; i < n; i++) {
+        for (let j = i + 2; j < n; j++) {
+          if (i === 0 && j === n - 1) continue;
+          const lineGeo = new THREE.BufferGeometry().setFromPoints([v[i], v[j]]);
+          const lineMat = new THREE.LineDashedMaterial({
+            color: 0xF59E0B, dashSize: 0.1, gapSize: 0.06,
+            transparent: true, opacity: 0.4,
+          });
+          const line = new THREE.Line(lineGeo, lineMat);
+          line.computeLineDistances();
+          this._figGroup.add(line);
+        }
+      }
+    }
+  }
+
+  /* ════════════════ MIDPOINTS ════════════════ */
+
+  _drawMidpoints() {
+    if (!this.showMidpoints) return;
+
+    for (let i = 0; i < this._edges.length; i++) {
+      const e = this._edges[i];
+      const mid = new THREE.Vector3().addVectors(e.from, e.to).multiplyScalar(0.5);
+
+      // small cyan sphere
+      const sGeo = new THREE.SphereGeometry(0.06, 8, 8);
+      const sMat = new THREE.MeshBasicMaterial({ color: 0x06D6E0 });
+      const s = new THREE.Mesh(sGeo, sMat);
+      s.position.copy(mid);
+      this._figGroup.add(s);
+
+      // label "M" + index
+      const lbl = this._makeTextSprite(`M${i + 1}`, '#06D6E0', 28);
+      lbl.position.copy(mid).add(new THREE.Vector3(0.15, 0.15, 0));
+      lbl.scale.set(0.5, 0.25, 1);
+      this._labelGroup.add(lbl);
+    }
+  }
+
+  /* ════════════════ POINT-TO-PLANE DISTANCE ════════════════ */
+
+  _onPointPlaneClick(e) {
+    if (this._anglePicks.length < 1) {
+      // First pick: a vertex/point
+      const pick = this._pickNearestPoint(e);
+      if (!pick) return;
+      this._anglePicks.push(pick);
+      this._highlightPick(pick.pos, 0xF9A8D4);
+    } else {
+      // Second pick: a face
+      const face = this._pickNearestFace(e);
+      if (!face || face.length < 3) return;
+
+      const pt = this._anglePicks[0];
+      const normal = this._faceNormal(face);
+      const planePoint = face[0];
+
+      // Distance = |dot(pt - planePoint, normal)|
+      const diff = new THREE.Vector3().subVectors(pt.pos, planePoint);
+      const dist = Math.abs(diff.dot(normal));
+
+      // Projection of point onto plane
+      const proj = pt.pos.clone().sub(normal.clone().multiplyScalar(diff.dot(normal)));
+
+      // Draw perpendicular line
+      this._drawAngleLine(pt.pos, proj, '#F9A8D4', true);
+
+      // Highlight foot of perpendicular
+      this._highlightPick(proj, 0xF9A8D4);
+
+      // Right angle marker
+      const edgeOnPlane = new THREE.Vector3().subVectors(face[1], face[0]).normalize();
+      this._drawRightAngleMarkerAt(proj, normal, edgeOnPlane, 0.25, '#F9A8D4');
+
+      // Highlight face
+      const positions = [];
+      const indices = [];
+      face.forEach(v => positions.push(v.x, v.y, v.z));
+      for (let i = 1; i < face.length - 1; i++) indices.push(0, i, i + 1);
+      const geo = new THREE.BufferGeometry();
+      geo.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
+      geo.setIndex(indices);
+      const mat = new THREE.MeshBasicMaterial({ color: 0xF9A8D4, transparent: true, opacity: 0.15, side: THREE.DoubleSide });
+      this._angleGroup.add(new THREE.Mesh(geo, mat));
+
+      // Label
+      const mid = new THREE.Vector3().addVectors(pt.pos, proj).multiplyScalar(0.5);
+      const lbl = this._makeTextSprite(`d(${pt.label}, пл) = ${dist.toFixed(2)}`, '#F9A8D4', 36);
+      lbl.position.copy(mid).add(new THREE.Vector3(0.4, 0.2, 0));
+      lbl.scale.set(2.2, 0.5, 1);
+      this._angleGroup.add(lbl);
+
+      this._anglePicks = [];
+    }
+  }
+
+  _drawRightAngleMarkerAt(origin, normalDir, tangentDir, size, color) {
+    const d1 = normalDir.clone().normalize().multiplyScalar(size);
+    const d2 = tangentDir.clone().normalize().multiplyScalar(size);
+    const p1 = origin.clone().add(d1);
+    const p2 = origin.clone().add(d2);
+    const p3 = p1.clone().add(d2);
+    const pts = [p1, p3, p2];
+    const geo = new THREE.BufferGeometry().setFromPoints(pts);
+    const mat = new THREE.LineBasicMaterial({ color: new THREE.Color(color), transparent: true, opacity: 0.6 });
+    this._angleGroup.add(new THREE.Line(geo, mat));
+  }
+
+  /* ════════════════ COORDINATE TOOLTIP ════════════════ */
+
+  _initTooltip() {
+    this._tooltipEl = document.createElement('div');
+    Object.assign(this._tooltipEl.style, {
+      position: 'absolute', pointerEvents: 'none',
+      background: 'rgba(13,13,26,0.85)', color: '#ccc',
+      fontSize: '11px', fontFamily: 'Manrope, monospace',
+      padding: '3px 7px', borderRadius: '4px',
+      border: '1px solid rgba(155,93,229,0.3)',
+      display: 'none', zIndex: '50', whiteSpace: 'nowrap',
+    });
+    this.container.style.position = 'relative';
+    this.container.appendChild(this._tooltipEl);
+  }
+
+  _onHoverMove(e) {
+    const rect = this.renderer.domElement.getBoundingClientRect();
+    if (e.clientX < rect.left || e.clientX > rect.right ||
+        e.clientY < rect.top || e.clientY > rect.bottom) {
+      if (this._tooltipEl) this._tooltipEl.style.display = 'none';
+      return;
+    }
+
+    const mx = ((e.clientX - rect.left) / rect.width) * 2 - 1;
+    const my = -((e.clientY - rect.top) / rect.height) * 2 + 1;
+
+    let bestDist = 0.06;
+    let bestV = null;
+
+    for (const v of this._vertices) {
+      const proj = v.pos.clone().project(this.camera);
+      const d = Math.sqrt((proj.x - mx) ** 2 + (proj.y - my) ** 2);
+      if (d < bestDist) { bestDist = d; bestV = v; }
+    }
+    for (const cp of this._customPoints) {
+      const proj = cp.pos.clone().project(this.camera);
+      const d = Math.sqrt((proj.x - mx) ** 2 + (proj.y - my) ** 2);
+      if (d < bestDist) { bestDist = d; bestV = cp; }
+    }
+
+    if (bestV && this._tooltipEl) {
+      const p = bestV.pos;
+      this._tooltipEl.textContent = `${bestV.label} (${p.x.toFixed(1)}, ${p.y.toFixed(1)}, ${p.z.toFixed(1)})`;
+      this._tooltipEl.style.display = 'block';
+      this._tooltipEl.style.left = (e.clientX - rect.left + 14) + 'px';
+      this._tooltipEl.style.top  = (e.clientY - rect.top - 10) + 'px';
+    } else if (this._tooltipEl) {
+      this._tooltipEl.style.display = 'none';
+    }
+  }
+
+  /* ════════════════ UNFOLD ANIMATION ════════════════ */
+  // Simplified unfold: flatten figure by reducing Y coordinates
+  _applyUnfold(progress) {
+    // This is a visual-only effect — squash Y toward 0
+    if (progress < 0.01) return;
+    this._figGroup.children.forEach(child => {
+      if (child.geometry) {
+        // Already built, don't modify geometry — just scale Y
+      }
+    });
+    this._figGroup.scale.y = 1 - progress * 0.85;
+    this._figGroup.position.y = progress * 0.5;
+  }
+
+  /* ════════════════ UTILS ════════════════ */
+
+  _clearGroup(group) {
+    while (group.children.length) {
+      const c = group.children[0];
+      if (c.geometry) c.geometry.dispose();
+      if (c.material) {
+        if (c.material.map) c.material.map.dispose();
+        c.material.dispose();
+      }
+      group.remove(c);
+    }
+  }
+
+  _notify() {
+    if (this.onUpdate) this.onUpdate(this.info());
+  }
+
+  /* ════════════════ ANIMATION LOOP ════════════════ */
+
+  _loop() {
+    if (!this._running) return;
+    requestAnimationFrame(() => this._loop());
+
+    // Auto-spin after idle
+    this._idleTime++;
+    if (this._idleTime > 300 && !this._drag) this._autoSpin = true;
+    if (this._autoSpin) this._rotY += 0.002;
+
+    // Unfold animation
+    if (this._unfold && this._unfoldProgress < this._unfoldTarget) {
+      this._unfoldProgress = Math.min(1, this._unfoldProgress + 0.015);
+      this._applyUnfold(this._unfoldProgress);
+    } else if (!this._unfold && this._unfoldProgress > 0) {
+      this._unfoldProgress = Math.max(0, this._unfoldProgress - 0.015);
+      this._applyUnfold(this._unfoldProgress);
+      if (this._unfoldProgress <= 0) {
+        this._figGroup.scale.y = 1;
+        this._figGroup.position.y = 0;
+      }
+    }
+
+    // Camera orbit
+    this.camera.position.set(
+      this._dist * Math.sin(this._rotY) * Math.cos(this._rotX),
+      this._dist * Math.sin(this._rotX),
+      this._dist * Math.cos(this._rotY) * Math.cos(this._rotX)
+    );
+    this.camera.lookAt(0, this._figureHeight() / 2, 0);
+
+    this.renderer.render(this.scene, this.camera);
+  }
+}
diff --git a/frontend/js/labs/thinlens.js b/frontend/js/labs/thinlens.js
new file mode 100644
index 0000000..ed4a0b9
--- /dev/null
+++ b/frontend/js/labs/thinlens.js
@@ -0,0 +1,445 @@
+'use strict';
+/* ══════════════════════════════════════════════════════════════
+   ThinLensSim — thin lens ray tracing simulation
+   1/f = 1/d + 1/d'   M = -d'/d
+   Three principal rays · draggable object & focal point
+   Converging (f>0) and diverging (f<0) lenses
+   ══════════════════════════════════════════════════════════════ */
+
+class ThinLensSim {
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.ctx    = canvas.getContext('2d');
+    this.W = 0; this.H = 0;
+
+    /* physics (px units) */
+    this.f = 100;    // focal length
+    this.d = 200;    // object distance (positive, measured from lens)
+    this.h = 50;     // object height
+
+    /* drag state */
+    this._drag = null; // 'object' | 'focus' | null
+
+    /* callback */
+    this.onUpdate = null;
+
+    this._bindEvents();
+    new ResizeObserver(() => { this.fit(); this.draw(); }).observe(canvas.parentElement);
+  }
+
+  /* ── public API ─────────────────────────────── */
+
+  fit() {
+    const dpr = window.devicePixelRatio || 1;
+    const w = this.canvas.offsetWidth || 600;
+    const h = this.canvas.offsetHeight || 400;
+    this.canvas.width  = w * dpr;
+    this.canvas.height = h * dpr;
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this.W = w; this.H = 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));
+    if (h !== undefined) this.h = Math.max(20, Math.min(80, +h));
+    this.draw();
+    this._emit();
+  }
+
+  reset() {
+    this.f = 100; this.d = 200; this.h = 50;
+    this.draw();
+    this._emit();
+  }
+
+  info() {
+    const { f, d, h } = this;
+    const denom = d - f;
+    const dPrime = Math.abs(denom) < 0.01 ? Infinity : (f * d) / denom;
+    const M = Math.abs(denom) < 0.01 ? Infinity : -dPrime / d;
+    const hPrime = M === Infinity ? Infinity : M * h;
+    const isVirtual = dPrime < 0;
+    return {
+      f:    +f.toFixed(1),
+      d:    +d.toFixed(1),
+      dPrime: dPrime === Infinity ? Infinity : +dPrime.toFixed(1),
+      M:      M === Infinity ? Infinity : +M.toFixed(3),
+      imageType: isVirtual ? 'мнимое' : 'действительное',
+      h:    +h.toFixed(1),
+      hPrime: hPrime === Infinity ? Infinity : +Math.abs(hPrime).toFixed(1),
+    };
+  }
+
+  /* ── internals ─────────────────────────────── */
+
+  _emit() { if (this.onUpdate) this.onUpdate(this.info()); }
+
+  /** Convert simulation coords to canvas coords.
+   *  Origin = lens center; +x right, +y up.
+   *  Canvas: lensX = W/2, axisY = H/2 */
+  _toCanvas(sx, sy) {
+    return { cx: this.W / 2 + sx, cy: this.H / 2 - sy };
+  }
+
+  _fromCanvas(cx, cy) {
+    return { sx: cx - this.W / 2, sy: this.H / 2 - cy };
+  }
+
+  /* ── draw ──────────────────────────────────── */
+
+  draw() {
+    const ctx = this.ctx, W = this.W, H = this.H;
+    if (!W || !H) return;
+
+    const { f, d, h } = this;
+    const lensX = W / 2;
+    const axisY = H / 2;
+
+    /* background */
+    ctx.fillStyle = '#0D0D1A';
+    ctx.fillRect(0, 0, W, H);
+
+    /* optical axis */
+    ctx.strokeStyle = 'rgba(255,255,255,0.15)';
+    ctx.lineWidth = 1;
+    ctx.setLineDash([6, 4]);
+    ctx.beginPath(); ctx.moveTo(0, axisY); ctx.lineTo(W, axisY); ctx.stroke();
+    ctx.setLineDash([]);
+
+    /* lens */
+    this._drawLens(ctx, lensX, axisY, f);
+
+    /* focal & 2F points */
+    this._drawFocalPoints(ctx, lensX, axisY, f);
+
+    /* object arrow */
+    const objX = lensX - d;
+    this._drawArrow(ctx, objX, axisY, objX, axisY - h, '#9B5DE5', false);
+
+    /* compute image */
+    const denom = d - f;
+    let dPrime, hPrime;
+    if (Math.abs(denom) < 0.5) {
+      /* object at focal point — rays parallel, no image */
+      dPrime = null;
+      hPrime = null;
+    } else {
+      dPrime = (f * d) / denom;
+      const M = -dPrime / d;
+      hPrime = M * h;
+    }
+
+    /* principal rays */
+    this._drawRays(ctx, lensX, axisY, d, h, f, dPrime, hPrime);
+
+    /* image arrow */
+    if (dPrime !== null && isFinite(dPrime)) {
+      const isVirtual = dPrime < 0;
+      const imgX = lensX + dPrime;
+      const imgTop = axisY - hPrime;
+      this._drawArrow(ctx, imgX, axisY, imgX, imgTop,
+        isVirtual ? '#FFD166' : '#EF476F', isVirtual);
+    }
+
+    /* labels */
+    this._drawLabels(ctx, lensX, axisY, d, f, dPrime, hPrime);
+  }
+
+  _drawLens(ctx, lx, ay, f) {
+    const lensH = Math.min(this.H * 0.38, 140);
+    const converging = f > 0;
+
+    ctx.strokeStyle = 'rgba(155,93,229,0.8)';
+    ctx.lineWidth = 2.5;
+
+    if (converging) {
+      /* biconvex shape */
+      const bulge = Math.min(18, Math.abs(f) * 0.12);
+      ctx.beginPath();
+      ctx.moveTo(lx, ay - lensH);
+      ctx.quadraticCurveTo(lx + bulge, ay, lx, ay + lensH);
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.moveTo(lx, ay - lensH);
+      ctx.quadraticCurveTo(lx - bulge, ay, lx, ay + lensH);
+      ctx.stroke();
+      /* arrowheads (converging) */
+      this._lensArrow(ctx, lx, ay - lensH, -1);
+      this._lensArrow(ctx, lx, ay + lensH, 1);
+    } else {
+      /* biconcave shape */
+      const bulge = Math.min(14, Math.abs(f) * 0.1);
+      ctx.beginPath();
+      ctx.moveTo(lx, ay - lensH);
+      ctx.quadraticCurveTo(lx - bulge, ay, lx, ay + lensH);
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.moveTo(lx, ay - lensH);
+      ctx.quadraticCurveTo(lx + bulge, ay, lx, ay + lensH);
+      ctx.stroke();
+      /* arrowheads (diverging) */
+      this._lensArrowDiv(ctx, lx, ay - lensH, -1);
+      this._lensArrowDiv(ctx, lx, ay + lensH, 1);
+    }
+
+    /* center line */
+    ctx.strokeStyle = 'rgba(155,93,229,0.3)';
+    ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.moveTo(lx, ay - lensH); ctx.lineTo(lx, ay + lensH); ctx.stroke();
+  }
+
+  _lensArrow(ctx, x, y, dir) {
+    const sz = 7;
+    ctx.fillStyle = 'rgba(155,93,229,0.8)';
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    ctx.lineTo(x - sz, y + dir * sz * 1.2);
+    ctx.lineTo(x + sz, y + dir * sz * 1.2);
+    ctx.closePath(); ctx.fill();
+  }
+
+  _lensArrowDiv(ctx, x, y, dir) {
+    const sz = 6;
+    ctx.fillStyle = 'rgba(155,93,229,0.8)';
+    ctx.beginPath();
+    ctx.moveTo(x - sz, y);
+    ctx.lineTo(x, y - dir * sz);
+    ctx.lineTo(x + sz, y);
+    ctx.closePath(); ctx.fill();
+  }
+
+  _drawFocalPoints(ctx, lx, ay, f) {
+    const pts = [
+      { sx:  f, label: "F'" },
+      { sx: -f, label: 'F'  },
+      { sx:  2 * f, label: "2F'" },
+      { sx: -2 * f, label: '2F'  },
+    ];
+
+    for (const p of pts) {
+      const px = lx + p.sx;
+      if (px < 10 || px > this.W - 10) continue;
+      const isFocal = !p.label.startsWith('2');
+      const r = isFocal ? 5 : 3.5;
+      const col = isFocal ? '#06D6E0' : 'rgba(6,214,224,0.5)';
+
+      ctx.fillStyle = col;
+      ctx.beginPath(); ctx.arc(px, ay, r, 0, Math.PI * 2); ctx.fill();
+
+      ctx.font = '11px Manrope, system-ui, sans-serif';
+      ctx.fillStyle = col;
+      ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+      ctx.fillText(p.label, px, ay + 10);
+    }
+  }
+
+  _drawArrow(ctx, x1, y1, x2, y2, color, dashed) {
+    ctx.strokeStyle = color;
+    ctx.fillStyle   = color;
+    ctx.lineWidth   = 2.5;
+
+    if (dashed) ctx.setLineDash([6, 4]);
+    ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke();
+    if (dashed) ctx.setLineDash([]);
+
+    /* arrowhead */
+    const angle = Math.atan2(y2 - y1, x2 - x1);
+    const aLen = 10;
+    ctx.beginPath();
+    ctx.moveTo(x2, y2);
+    ctx.lineTo(x2 - aLen * Math.cos(angle - 0.35), y2 - aLen * Math.sin(angle - 0.35));
+    ctx.lineTo(x2 - aLen * Math.cos(angle + 0.35), y2 - aLen * Math.sin(angle + 0.35));
+    ctx.closePath(); ctx.fill();
+  }
+
+  _drawRays(ctx, lx, ay, d, h, f, dPrime, hPrime) {
+    const objX  = lx - d;
+    const objY  = ay - h;
+    const colors = ['#06D6E0', '#7BF5A4', '#FFD166'];
+    const hasImage = dPrime !== null && isFinite(dPrime);
+    const isVirtual = hasImage && dPrime < 0;
+
+    ctx.lineWidth = 1.5;
+
+    /* Ray 1: parallel to axis <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> through F' (converging) or from F' (diverging) */
+    {
+      ctx.strokeStyle = colors[0];
+      ctx.setLineDash([]);
+      /* incoming: object tip <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> lens, parallel */
+      ctx.beginPath(); ctx.moveTo(objX, objY); ctx.lineTo(lx, objY); ctx.stroke();
+      /* outgoing */
+      if (hasImage) {
+        const imgX = lx + dPrime;
+        const imgY = ay - hPrime;
+        if (!isVirtual) {
+          ctx.beginPath(); ctx.moveTo(lx, objY); ctx.lineTo(imgX, imgY); ctx.stroke();
+          /* extend past image */
+          this._extendRay(ctx, lx, objY, imgX, imgY, colors[0]);
+        } else {
+          /* diverging outgoing ray + dashed virtual extension */
+          const outSlope = (objY - ay) / f;
+          ctx.beginPath(); ctx.moveTo(lx, objY);
+          ctx.lineTo(lx + 300, objY + outSlope * 300); ctx.stroke();
+          ctx.setLineDash([4, 4]);
+          ctx.beginPath(); ctx.moveTo(lx, objY); ctx.lineTo(imgX, imgY); ctx.stroke();
+          ctx.setLineDash([]);
+        }
+      }
+    }
+
+    /* Ray 2: through center <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> straight */
+    {
+      ctx.strokeStyle = colors[1];
+      ctx.setLineDash([]);
+      const slope = (objY - ay) / (objX - lx);
+      const farX = lx + 350;
+      const farY = ay + slope * 350;
+      ctx.beginPath(); ctx.moveTo(objX, objY); ctx.lineTo(farX, farY); ctx.stroke();
+      if (isVirtual) {
+        /* extend behind lens too */
+        const backX = lx - 350;
+        const backY = ay - slope * 350;
+        ctx.setLineDash([4, 4]);
+        ctx.beginPath(); ctx.moveTo(lx, ay); ctx.lineTo(backX, backY); ctx.stroke();
+        ctx.setLineDash([]);
+      }
+    }
+
+    /* Ray 3: through F <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> parallel after lens */
+    {
+      ctx.strokeStyle = colors[2]; ctx.setLineDash([]);
+      const fx = lx - f;
+      const slope = (objY - ay) / (objX - fx);
+      const hitY = objY + slope * (lx - objX);
+      ctx.beginPath(); ctx.moveTo(objX, objY); ctx.lineTo(lx, hitY); ctx.stroke();
+      const endX = hasImage && !isVirtual ? Math.max(lx + dPrime + 60, lx + 300) : lx + 300;
+      ctx.beginPath(); ctx.moveTo(lx, hitY); ctx.lineTo(endX, hitY); ctx.stroke();
+      if (hasImage && isVirtual) {
+        ctx.setLineDash([4, 4]);
+        ctx.beginPath(); ctx.moveTo(lx, hitY); ctx.lineTo(lx + dPrime, ay - hPrime); ctx.stroke();
+        ctx.setLineDash([]);
+      }
+    }
+  }
+
+  _extendRay(ctx, x1, y1, x2, y2, color) {
+    const dx = x2 - x1, dy = y2 - y1;
+    const len = Math.hypot(dx, dy);
+    if (len < 1) return;
+    const ex = x2 + (dx / len) * 80;
+    const ey = y2 + (dy / len) * 80;
+    ctx.globalAlpha = 0.3;
+    ctx.strokeStyle = color;
+    ctx.beginPath(); ctx.moveTo(x2, y2); ctx.lineTo(ex, ey); ctx.stroke();
+    ctx.globalAlpha = 1;
+  }
+
+  _drawLabels(ctx, lx, ay, d, f, dPrime, hPrime) {
+    ctx.font = '12px Manrope, system-ui, sans-serif';
+    ctx.textBaseline = 'top';
+
+    /* d label */
+    const objX = lx - d;
+    ctx.fillStyle = '#9B5DE5';
+    ctx.textAlign = 'center';
+    ctx.fillText(`d = ${d.toFixed(0)}`, (objX + lx) / 2, ay + 26);
+
+    /* f label */
+    ctx.fillStyle = '#06D6E0';
+    ctx.fillText(`f = ${f.toFixed(0)}`, lx, ay + 42);
+
+    /* d' label */
+    if (dPrime !== null && isFinite(dPrime)) {
+      const imgX = lx + dPrime;
+      ctx.fillStyle = dPrime > 0 ? '#EF476F' : '#FFD166';
+      ctx.textAlign = 'center';
+      ctx.fillText(`d' = ${dPrime.toFixed(1)}`, (lx + imgX) / 2, ay + 26);
+    }
+
+    /* formula box */
+    const info = this.info();
+    const boxW = 200, boxH = 52;
+    const bx = 12, by = 12;
+    ctx.fillStyle = 'rgba(22,22,38,0.85)';
+    ctx.beginPath(); ctx.roundRect(bx, by, boxW, boxH, 8); ctx.fill();
+
+    ctx.font = '11px Manrope, system-ui, sans-serif';
+    ctx.fillStyle = 'rgba(255,255,255,0.7)';
+    ctx.textAlign = 'left'; ctx.textBaseline = 'top';
+    const mStr = info.M === Infinity ? '---' : info.M.toFixed(2);
+    const dpStr = info.dPrime === Infinity ? '---' : info.dPrime.toFixed(1);
+    ctx.fillText(`1/f = 1/d + 1/d'`, bx + 10, by + 10);
+    ctx.fillStyle = 'rgba(255,255,255,0.5)';
+    ctx.fillText(`M = ${mStr}   d' = ${dpStr}   ${info.imageType}`, bx + 10, by + 30);
+  }
+
+  /* ── events ─────────────────────────────────── */
+
+  _bindEvents() {
+    const cv = this.canvas;
+
+    const getPos = (e) => {
+      const r = cv.getBoundingClientRect();
+      const t = e.touches ? e.touches[0] : e;
+      return {
+        mx: (t.clientX - r.left) * (this.W / r.width),
+        my: (t.clientY - r.top)  * (this.H / r.height),
+      };
+    };
+
+    const hitTest = (mx, my) => {
+      const lx = this.W / 2, ay = this.H / 2;
+      /* object tip */
+      const objX = lx - this.d;
+      const objY = ay - this.h;
+      if (Math.hypot(mx - objX, my - objY) < 20) return 'object';
+      /* focal point F (front) */
+      const fx = lx - this.f;
+      if (Math.hypot(mx - fx, my - ay) < 16) return 'focus';
+      return null;
+    };
+
+    const onDown = (e) => {
+      const { mx, my } = getPos(e);
+      this._drag = hitTest(mx, my);
+    };
+
+    const onMove = (e) => {
+      if (!this._drag) return;
+      if (e.cancelable) e.preventDefault();
+      const { mx } = getPos(e);
+      const lx = this.W / 2;
+
+      if (this._drag === 'object') {
+        this.d = Math.max(30, Math.min(400, lx - mx));
+      } else if (this._drag === 'focus') {
+        const newF = lx - mx;
+        this.f = Math.max(-200, Math.min(200, newF));
+      }
+      this.draw();
+      this._emit();
+    };
+
+    const onUp = () => { this._drag = null; };
+
+    /* mouse */
+    cv.addEventListener('mousedown', onDown);
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+
+    /* touch */
+    cv.addEventListener('touchstart', e => {
+      if (e.touches.length === 1) onDown(e);
+    }, { passive: true });
+    cv.addEventListener('touchmove', e => onMove(e), { passive: false });
+    cv.addEventListener('touchend', onUp);
+
+    /* cursor style */
+    cv.addEventListener('mousemove', e => {
+      if (this._drag) { cv.style.cursor = 'grabbing'; return; }
+      const { mx, my } = getPos(e);
+      cv.style.cursor = hitTest(mx, my) ? 'grab' : 'default';
+    });
+  }
+}
diff --git a/frontend/js/labs/titration.js b/frontend/js/labs/titration.js
new file mode 100644
index 0000000..640f1f5
--- /dev/null
+++ b/frontend/js/labs/titration.js
@@ -0,0 +1,657 @@
+'use strict';
+/* ══════════════════════════════════════════════════════════════
+   TitrationSim — acid-base titration simulation
+   Strong acid (HCl) / weak acid (CH₃COOH) + strong base (NaOH)
+   Left 60%: burette + Erlenmeyer flask with indicator colour
+   Right 40%: real-time pH vs V(base) titration curve
+   Henderson-Hasselbalch for weak acid buffer region
+   ══════════════════════════════════════════════════════════════ */
+
+class TitrationSim {
+
+  static PINK   = '#EF476F';
+  static VIOLET = '#9B5DE5';
+  static CYAN   = '#06D6E0';
+  static GREEN  = '#7BF5A4';
+  static YELLOW = '#FFD166';
+  static BG     = '#0D0D1A';
+  static FONT   = "Manrope, system-ui, sans-serif";
+
+  /* ── Constructor ────────────────────────────────────────── */
+
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.ctx    = canvas.getContext('2d');
+    this.W = 0; this.H = 0;
+
+    /* chemistry */
+    this.acidConc  = 0.1;               // mol/L
+    this.baseConc  = 0.1;               // mol/L
+    this.acidVol   = 50;                // mL
+    this.acidType  = 'strong';          // 'strong' | 'weak'
+    this.indicator = 'phenolphthalein'; // 'phenolphthalein' | 'methyl_orange' | 'litmus'
+    this.Ka        = 1.8e-5;           // CH₃COOH dissociation constant
+
+    /* state */
+    this.baseAdded  = 0;                // mL of base added
+    this._curve     = [];               // [{v, pH}]
+    this._drops     = [];               // [{x, y, vy, r}]
+    this._splashes  = [];               // [{x, y, vx, vy, r, life}]
+    this._ripples   = [];               // [{x, y, radius, life}]
+    this._dropAccum = 0;
+    this._wave      = 0;
+
+    /* animation */
+    this.playing = false;
+    this._raf    = null;
+    this._lastTs = null;
+    this.speed   = 1;
+
+    this.onUpdate = null;
+
+    this._recordPoint();
+    new ResizeObserver(() => { this.fit(); this.draw(); }).observe(canvas.parentElement);
+  }
+
+  /* ── Geometry ───────────────────────────────────────────── */
+
+  fit() {
+    const dpr = window.devicePixelRatio || 1;
+    const w = this.canvas.offsetWidth  || 600;
+    const h = this.canvas.offsetHeight || 400;
+    this.canvas.width  = w * dpr;
+    this.canvas.height = h * dpr;
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this.W = w; this.H = h;
+  }
+
+  /* ── Public API ─────────────────────────────────────────── */
+
+  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));
+    if (acidVol   !== undefined) this.acidVol   = Math.max(25, Math.min(100, +acidVol));
+    if (indicator !== undefined) this.indicator = indicator;
+    if (acidType  !== undefined) this.acidType  = acidType;
+    this.reset();
+  }
+
+  preset(name) {
+    const presets = {
+      strong_strong: { acidConc: 0.1, baseConc: 0.1, acidVol: 50, acidType: 'strong', indicator: 'phenolphthalein' },
+      weak_strong:   { acidConc: 0.1, baseConc: 0.1, acidVol: 50, acidType: 'weak',   indicator: 'phenolphthalein' },
+      concentrated:  { acidConc: 0.5, baseConc: 0.5, acidVol: 25, acidType: 'strong', indicator: 'methyl_orange'   },
+    };
+    const p = presets[name] || presets.strong_strong;
+    Object.assign(this, p);
+    this.reset();
+  }
+
+  reset() {
+    this.pause();
+    this.baseAdded  = 0;
+    this._curve     = [];
+    this._drops     = [];
+    this._splashes  = [];
+    this._ripples   = [];
+    this._dropAccum = 0;
+    this._wave      = 0;
+    this._recordPoint();
+    this.draw();
+    this._emit();
+  }
+
+  play() {
+    if (this.playing) return;
+    this.playing = true;
+    this._lastTs = null;
+    this._tick();
+  }
+
+  pause() {
+    this.playing = false;
+    if (this._raf) { cancelAnimationFrame(this._raf); this._raf = null; }
+  }
+
+  start() { this.play(); }
+  stop()  { this.pause(); }
+
+  info() {
+    const eqVol = this._eqVolume();
+    return {
+      pH:        +this._calcPH(this.baseAdded).toFixed(2),
+      baseAdded: +this.baseAdded.toFixed(2),
+      eqPoint:   +eqVol.toFixed(2),
+      indicator: this.indicator,
+      acidType:  this.acidType,
+    };
+  }
+
+  _emit() { if (this.onUpdate) this.onUpdate(this.info()); }
+
+  /* ── Chemistry ──────────────────────────────────────────── */
+
+  _eqVolume() { return (this.acidConc * this.acidVol) / this.baseConc; }
+  _maxVolume() { return this._eqVolume() * 1.5; }
+
+  _calcPH(vBase) {
+    const nAcid = this.acidConc * this.acidVol / 1000;
+    const nBase = this.baseConc * vBase / 1000;
+    const vTotal = (this.acidVol + vBase) / 1000;
+    return this.acidType === 'strong'
+      ? this._strongPH(nAcid, nBase, vTotal)
+      : this._weakPH(nAcid, nBase, vTotal);
+  }
+
+  _strongPH(nA, nB, vT) {
+    const d = nA - nB;
+    if (Math.abs(d) < 1e-10) return 7.0;
+    if (d > 0) return -Math.log10(d / vT);
+    return 14 + Math.log10(-d / vT);
+  }
+
+  _weakPH(nA, nB, vT) {
+    const Ka = this.Ka;
+    const d  = nA - nB;
+    if (d < -1e-10) return 14 + Math.log10(-d / vT);            // excess base
+    if (Math.abs(d) < 1e-10) {                                   // equivalence — hydrolysis
+      const Kb = 1e-14 / Ka;
+      return 14 + Math.log10(Math.sqrt(Kb * (nB / vT)));
+    }
+    if (nB < 1e-10) {                                            // pure weak acid
+      const c = nA / vT;
+      const cH = (-Ka + Math.sqrt(Ka * Ka + 4 * Ka * c)) / 2;
+      return -Math.log10(cH);
+    }
+    return -Math.log10(Ka) + Math.log10((nB / vT) / (d / vT));  // Henderson-Hasselbalch
+  }
+
+  _recordPoint() {
+    this._curve.push({ v: this.baseAdded, pH: this._calcPH(this.baseAdded) });
+  }
+
+  /* ── Indicator colour ───────────────────────────────────── */
+
+  _indicatorColor(pH) {
+    if (this.indicator === 'phenolphthalein') {
+      if (pH < 8.2)  return 'rgba(255,255,255,0.04)';
+      if (pH > 10)   return 'rgba(220,20,120,0.60)';
+      const t = (pH - 8.2) / 1.8;
+      return `rgba(220,${200 - Math.round(180 * t)},${255 - Math.round(135 * t)},${(0.04 + 0.56 * t).toFixed(2)})`;
+    }
+    if (this.indicator === 'methyl_orange') {
+      if (pH < 3.1) return 'rgba(220,40,40,0.50)';
+      if (pH > 4.4) return 'rgba(240,210,60,0.35)';
+      const t = (pH - 3.1) / 1.3;
+      return `rgba(${220 + Math.round(20 * t)},${40 + Math.round(170 * t)},${40 + Math.round(20 * t)},${(0.50 - 0.15 * t).toFixed(2)})`;
+    }
+    /* litmus */
+    if (pH < 5) return 'rgba(220,50,60,0.55)';
+    if (pH > 8) return 'rgba(60,80,210,0.55)';
+    const t = (pH - 5) / 3;
+    return `rgba(${220 - Math.round(160 * t)},${50 + Math.round(30 * t)},${60 + Math.round(150 * t)},0.55)`;
+  }
+
+  _liquidRGB(pH) {
+    if (this.indicator === 'phenolphthalein') {
+      if (pH < 8.2) return [180, 210, 255];
+      const t = Math.min(1, (pH - 8.2) / 1.8);
+      return [180 + t * 40, 210 - t * 140, 255 - t * 135];
+    }
+    if (this.indicator === 'methyl_orange') {
+      if (pH < 3.1) return [220, 80, 80];
+      if (pH > 4.4) return [240, 210, 80];
+      const t = (pH - 3.1) / 1.3;
+      return [220 + t * 20, 80 + t * 130, 80];
+    }
+    /* litmus */
+    if (pH < 5) return [220, 70, 70];
+    if (pH > 8) return [80, 100, 220];
+    const t = (pH - 5) / 3;
+    return [220 - 140 * t, 70 + 30 * t, 70 + 150 * t];
+  }
+
+  _phColor(pH) {
+    if (pH < 3)  return TitrationSim.PINK;
+    if (pH < 5)  return TitrationSim.YELLOW;
+    if (pH < 9)  return TitrationSim.GREEN;
+    if (pH < 11) return TitrationSim.CYAN;
+    return TitrationSim.VIOLET;
+  }
+
+  /* ── Animation loop ─────────────────────────────────────── */
+
+  _tick() {
+    if (!this.playing) return;
+    this._raf = requestAnimationFrame(ts => {
+      if (this._lastTs === null) this._lastTs = ts;
+      const rawDt = Math.min((ts - this._lastTs) / 1000, 0.05);
+      this._lastTs = ts;
+      const dt = rawDt * this.speed;
+
+      this._wave += rawDt * 2.0;
+
+      const maxV = this._maxVolume();
+      if (this.baseAdded < maxV) {
+        this.baseAdded = Math.min(this.baseAdded + (maxV / 14) * dt, maxV);
+        this._recordPoint();
+        if (this._curve.length > 600) this._curve.shift();
+        this._spawnDrops(dt);
+      } else {
+        this.pause();
+      }
+
+      /* move drops */
+      for (const d of this._drops) { d.vy += 480 * dt; d.y += d.vy * dt; }
+      const surfY = this.H * 0.72;
+      /* spawn splashes when drops hit surface */
+      for (const d of this._drops) {
+        if (d.y >= surfY && !d.hit) {
+          d.hit = true;
+          const bx = d.x;
+          for (let i = 0; i < 3; i++) {
+            const a = -Math.PI * 0.5 + (Math.random() - 0.5) * Math.PI;
+            const s = 15 + Math.random() * 25;
+            this._splashes.push({ x: bx, y: surfY, vx: Math.cos(a) * s, vy: Math.sin(a) * s - 8, r: 1 + Math.random(), life: 1 });
+          }
+          this._ripples.push({ x: bx, y: surfY, radius: 2, life: 1 });
+        }
+      }
+      this._drops = this._drops.filter(d => d.y < surfY + 4);
+
+      /* animate splashes */
+      for (const s of this._splashes) { s.x += s.vx * dt; s.y += s.vy * dt; s.vy += 160 * dt; s.life -= dt * 3.5; }
+      this._splashes = this._splashes.filter(s => s.life > 0);
+      for (const r of this._ripples) { r.radius += dt * 30; r.life -= dt * 2.2; }
+      this._ripples = this._ripples.filter(r => r.life > 0);
+
+      this.draw();
+      this._emit();
+      if (this.playing) this._tick();
+    });
+  }
+
+  _spawnDrops(dt) {
+    this._dropAccum += dt;
+    const interval = 0.18 / Math.max(0.5, this.speed);
+    while (this._dropAccum >= interval) {
+      this._dropAccum -= interval;
+      const simW = this.W * 0.6;
+      const bx = simW * 0.42;
+      this._drops.push({
+        x: bx + (Math.random() - 0.5) * 3,
+        y: this.H * 0.38 + 14,
+        vy: 10 + Math.random() * 8,
+        r: 2.2 + Math.random() * 1.4,
+        hit: false,
+      });
+    }
+  }
+
+  /* ═══════════════════════ Rendering ═══════════════════════ */
+
+  draw() {
+    const { ctx, W, H } = this;
+    if (!W || !H) return;
+    const simW = W * 0.6;
+
+    ctx.fillStyle = TitrationSim.BG;
+    ctx.fillRect(0, 0, W, H);
+
+    /* dot grid */
+    ctx.fillStyle = 'rgba(255,255,255,0.04)';
+    for (let x = 0; x < W; x += 28) for (let y = 0; y < H; y += 28) {
+      ctx.beginPath(); ctx.arc(x, y, 0.7, 0, Math.PI * 2); ctx.fill();
+    }
+
+    /* divider */
+    ctx.strokeStyle = 'rgba(255,255,255,0.06)'; ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.moveTo(simW, 16); ctx.lineTo(simW, H - 16); ctx.stroke();
+
+    this._drawStand(ctx, simW);
+    this._drawBurette(ctx, simW);
+    this._drawFlask(ctx, simW);
+    this._drawParticles(ctx);
+    this._drawOverlay(ctx);
+    this._drawPHCurve(ctx, simW, W, H);
+  }
+
+  /* ── Lab stand ──────────────────────────────────────────── */
+
+  _drawStand(ctx, simW) {
+    const H = this.H, sx = simW * 0.2;
+    const g = ctx.createLinearGradient(sx - 3, 0, sx + 3, 0);
+    g.addColorStop(0, 'rgba(120,130,160,0.5)');
+    g.addColorStop(0.5, 'rgba(180,190,210,0.7)');
+    g.addColorStop(1, 'rgba(100,110,140,0.4)');
+    ctx.fillStyle = g;
+    ctx.fillRect(sx - 3, H * 0.06, 6, H * 0.84);
+
+    ctx.fillStyle = 'rgba(150,160,190,0.40)';
+    ctx.beginPath(); ctx.roundRect(sx - 36, H * 0.90, 72, 7, 3); ctx.fill();
+
+    ctx.fillStyle = 'rgba(140,150,180,0.55)';
+    ctx.fillRect(sx - 1, H * 0.12, simW * 0.22 + 2, 5);
+  }
+
+  /* ── Burette ────────────────────────────────────────────── */
+
+  _drawBurette(ctx, simW) {
+    const H = this.H, FNT = TitrationSim.FONT;
+    const bx = simW * 0.42, bT = H * 0.06, bB = H * 0.38, bW = 12;
+    const maxV = this._maxVolume();
+    const frac = Math.max(0, 1 - this.baseAdded / maxV);
+
+    /* glass tube */
+    const gg = ctx.createLinearGradient(bx - bW, 0, bx + bW, 0);
+    gg.addColorStop(0, 'rgba(120,170,255,0.18)');
+    gg.addColorStop(0.4, 'rgba(160,200,255,0.08)');
+    gg.addColorStop(0.6, 'rgba(160,200,255,0.08)');
+    gg.addColorStop(1, 'rgba(100,150,240,0.15)');
+    ctx.fillStyle = gg;
+    ctx.beginPath(); ctx.roundRect(bx - bW, bT, bW * 2, bB - bT, 4); ctx.fill();
+
+    /* liquid level */
+    if (frac > 0.01) {
+      const lt = bT + (bB - bT) * (1 - frac) + 4;
+      const lg = ctx.createLinearGradient(0, lt, 0, bB);
+      lg.addColorStop(0, 'rgba(100,160,255,0.25)');
+      lg.addColorStop(1, 'rgba(80,140,240,0.40)');
+      ctx.fillStyle = lg;
+      ctx.beginPath(); ctx.roundRect(bx - bW + 2, lt, bW * 2 - 4, bB - lt - 4, 3); ctx.fill();
+    }
+
+    /* glass outline + highlight */
+    ctx.strokeStyle = 'rgba(120,175,255,0.50)'; ctx.lineWidth = 1.5;
+    ctx.beginPath(); ctx.roundRect(bx - bW, bT, bW * 2, bB - bT, 4); ctx.stroke();
+    ctx.strokeStyle = 'rgba(200,225,255,0.25)'; ctx.lineWidth = 2;
+    ctx.beginPath(); ctx.moveTo(bx - bW + 3, bT + 8); ctx.lineTo(bx - bW + 3, bB - 8); ctx.stroke();
+
+    /* graduations */
+    ctx.strokeStyle = 'rgba(180,210,255,0.30)'; ctx.lineWidth = 0.8;
+    ctx.font = `8px ${FNT}`; ctx.fillStyle = 'rgba(180,210,255,0.45)'; ctx.textAlign = 'right';
+    for (let i = 0; i <= 10; i++) {
+      const y = bT + 6 + (bB - bT - 12) * (i / 10), maj = i % 2 === 0;
+      ctx.beginPath(); ctx.moveTo(bx + bW, y); ctx.lineTo(bx + bW + (maj ? 8 : 4), y); ctx.stroke();
+      if (maj) ctx.fillText(((i / 10) * maxV).toFixed(0), bx + bW + 22, y + 3);
+    }
+
+    /* stopcock + nozzle */
+    ctx.fillStyle = 'rgba(180,190,220,0.55)'; ctx.fillRect(bx - 4, bB - 2, 8, 8);
+    ctx.fillStyle = 'rgba(140,165,210,0.50)';
+    ctx.beginPath();
+    ctx.moveTo(bx - 3, bB + 6); ctx.lineTo(bx + 3, bB + 6);
+    ctx.lineTo(bx + 1.5, bB + 14); ctx.lineTo(bx - 1.5, bB + 14);
+    ctx.closePath(); ctx.fill();
+
+    /* forming drip */
+    if (this.playing && this.baseAdded < maxV) {
+      const pulse = 0.5 + 0.5 * Math.sin(this._wave * 4);
+      const dr = 2.5 + pulse * 1.5;
+      ctx.save(); ctx.shadowColor = TitrationSim.CYAN; ctx.shadowBlur = 6;
+      ctx.fillStyle = 'rgba(100,180,255,0.65)';
+      ctx.beginPath(); ctx.arc(bx, bB + 14 + dr, dr, 0, Math.PI * 2); ctx.fill();
+      ctx.restore();
+    }
+
+    /* labels */
+    ctx.fillStyle = 'rgba(180,210,255,0.60)'; ctx.font = `bold 10px ${FNT}`; ctx.textAlign = 'center';
+    ctx.fillText('NaOH', bx, bT - 6);
+    ctx.fillText(`${this.baseConc} M`, bx, bT - 18);
+  }
+
+  /* ── Erlenmeyer flask ───────────────────────────────────── */
+
+  _drawFlask(ctx, simW) {
+    const H = this.H, cx = simW * 0.42, pH = this._calcPH(this.baseAdded);
+    const fB = H * 0.88, fNT = H * 0.58, fNW = 10, fBW = simW * 0.22;
+
+    const flaskP = () => {
+      ctx.beginPath();
+      ctx.moveTo(cx - fNW, fNT); ctx.lineTo(cx - fNW, fNT + 16);
+      ctx.bezierCurveTo(cx - fNW, fNT + 40, cx - fBW, fB - 30, cx - fBW, fB);
+      ctx.lineTo(cx + fBW, fB);
+      ctx.bezierCurveTo(cx + fBW, fB - 30, cx + fNW, fNT + 40, cx + fNW, fNT + 16);
+      ctx.lineTo(cx + fNW, fNT); ctx.closePath();
+    };
+
+    const lY = H * 0.72, [lr, lg, lb] = this._liquidRGB(pH);
+    const amp = 2 + (this.playing ? 1.5 : 0);
+    const wY = x => lY + Math.sin((x - cx) * 0.08 + this._wave) * amp
+                       + Math.sin((x - cx) * 0.15 - this._wave * 1.4) * amp * 0.3;
+
+    /* liquid clipped to flask */
+    ctx.save(); flaskP(); ctx.clip();
+    ctx.beginPath();
+    for (let x = cx - fBW - 2; x <= cx + fBW + 2; x += 2) {
+      x === cx - fBW - 2 ? ctx.moveTo(x, wY(x)) : ctx.lineTo(x, wY(x));
+    }
+    ctx.lineTo(cx + fBW + 2, fB + 4); ctx.lineTo(cx - fBW - 2, fB + 4); ctx.closePath();
+    const lGrad = ctx.createLinearGradient(0, lY, 0, fB);
+    lGrad.addColorStop(0, `rgba(${lr},${lg},${lb},0.30)`);
+    lGrad.addColorStop(0.5, `rgba(${lr},${lg},${lb},0.45)`);
+    lGrad.addColorStop(1, `rgba(${lr},${lg},${lb},0.55)`);
+    ctx.fillStyle = lGrad; ctx.fill();
+    ctx.fillStyle = this._indicatorColor(pH); ctx.fill();
+
+    /* surface shimmer */
+    ctx.beginPath();
+    for (let x = cx - fBW; x <= cx + fBW; x += 2) {
+      x === cx - fBW ? ctx.moveTo(x, wY(x)) : ctx.lineTo(x, wY(x));
+    }
+    ctx.strokeStyle = `rgba(${Math.min(255, lr + 80)},${Math.min(255, lg + 80)},${Math.min(255, lb + 80)},0.45)`;
+    ctx.lineWidth = 1.2; ctx.stroke();
+    ctx.restore();
+
+    /* glass outline */
+    ctx.strokeStyle = 'rgba(120,175,255,0.55)'; ctx.lineWidth = 2; flaskP(); ctx.stroke();
+
+    /* left highlight */
+    ctx.save(); ctx.beginPath();
+    ctx.moveTo(cx - fNW + 2, fNT + 4); ctx.lineTo(cx - fNW + 2, fNT + 18);
+    ctx.bezierCurveTo(cx - fNW + 2, fNT + 42, cx - fBW + 8, fB - 32, cx - fBW + 6, fB - 4);
+    const hg = ctx.createLinearGradient(cx - fBW, fNT, cx - fBW, fB);
+    hg.addColorStop(0, 'rgba(200,230,255,0.30)'); hg.addColorStop(1, 'rgba(200,230,255,0.03)');
+    ctx.strokeStyle = hg; ctx.lineWidth = 3; ctx.stroke(); ctx.restore();
+
+    /* neck rim */
+    ctx.strokeStyle = 'rgba(140,185,255,0.60)'; ctx.lineWidth = 2.5;
+    ctx.beginPath(); ctx.moveTo(cx - fNW - 4, fNT); ctx.lineTo(cx + fNW + 4, fNT); ctx.stroke();
+
+    /* acid label */
+    const label = this.acidType === 'strong' ? 'HCl' : 'CH\u2083COOH';
+    ctx.fillStyle = 'rgba(180,210,255,0.55)'; ctx.font = `9px ${TitrationSim.FONT}`; ctx.textAlign = 'center';
+    ctx.fillText(`${label} ${this.acidConc} M, ${this.acidVol} mL`, cx, fB + 14);
+
+    /* pH value */
+    ctx.font = `bold 14px ${TitrationSim.FONT}`;
+    ctx.fillStyle = this._phColor(pH);
+    ctx.fillText(`pH ${pH.toFixed(2)}`, cx, fB + 32);
+  }
+
+  /* ── Drops / splashes / ripples ─────────────────────────── */
+
+  _drawParticles(ctx) {
+    for (const d of this._drops) {
+      ctx.save(); ctx.globalAlpha = 0.85;
+      ctx.shadowColor = TitrationSim.CYAN; ctx.shadowBlur = 8;
+      const st = Math.min(2.5, 1 + d.vy * 0.003);
+      ctx.beginPath(); ctx.ellipse(d.x, d.y, d.r, d.r * st, 0, 0, Math.PI * 2);
+      ctx.fillStyle = 'rgba(100,180,255,0.70)'; ctx.fill();
+      ctx.fillStyle = 'rgba(220,240,255,0.55)';
+      ctx.beginPath(); ctx.arc(d.x - d.r * 0.3, d.y - d.r * 0.4, d.r * 0.3, 0, Math.PI * 2); ctx.fill();
+      ctx.restore();
+    }
+    const [sr, sg, sb] = this._liquidRGB(this._calcPH(this.baseAdded));
+    for (const s of this._splashes) {
+      ctx.save(); ctx.globalAlpha = s.life * 0.7;
+      ctx.beginPath(); ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);
+      ctx.fillStyle = `rgb(${Math.min(255, sr + 60)},${Math.min(255, sg + 60)},${Math.min(255, sb + 60)})`; ctx.fill();
+      ctx.restore();
+    }
+    for (const r of this._ripples) {
+      ctx.save(); ctx.globalAlpha = r.life * 0.4;
+      ctx.strokeStyle = 'rgba(180,220,255,0.6)'; ctx.lineWidth = 1;
+      ctx.beginPath(); ctx.arc(r.x, r.y, r.radius, 0, Math.PI * 2); ctx.stroke();
+      ctx.restore();
+    }
+  }
+
+  /* ── Stats overlay ──────────────────────────────────────── */
+
+  _drawOverlay(ctx) {
+    const pH = this._calcPH(this.baseAdded);
+    const eqV = this._eqVolume();
+    const bx = 10, by = 10, bw = 150, bh = 78;
+
+    ctx.fillStyle = 'rgba(5,5,20,0.82)';
+    ctx.beginPath(); ctx.roundRect(bx, by, bw, bh, 7); ctx.fill();
+    ctx.strokeStyle = 'rgba(255,255,255,0.07)'; ctx.lineWidth = 1; ctx.stroke();
+
+    ctx.textAlign = 'left'; ctx.textBaseline = 'top';
+    const lh = 16;
+
+    ctx.font = `bold 12px ${TitrationSim.FONT}`;
+    ctx.fillStyle = TitrationSim.CYAN;
+    ctx.fillText(`pH = ${pH.toFixed(2)}`, bx + 10, by + 8);
+
+    ctx.font = `10px ${TitrationSim.FONT}`;
+    ctx.fillStyle = TitrationSim.YELLOW;
+    ctx.fillText(`V(NaOH) = ${this.baseAdded.toFixed(1)} mL`, bx + 10, by + 8 + lh);
+
+    ctx.fillStyle = TitrationSim.GREEN;
+    ctx.fillText(`V\u044D\u043A\u0432 = ${eqV.toFixed(1)} mL`, bx + 10, by + 8 + lh * 2);
+
+    const names = { phenolphthalein: '\u0424\u0435\u043D\u043E\u043B\u0444\u0442.', methyl_orange: '\u041C\u0435\u0442.\u043E\u0440.', litmus: '\u041B\u0430\u043A\u043C\u0443\u0441' };
+    ctx.fillStyle = 'rgba(255,255,255,0.40)';
+    ctx.fillText(names[this.indicator] || this.indicator, bx + 10, by + 8 + lh * 3);
+  }
+
+  /* ── pH titration curve (right 40%) ─────────────────────── */
+
+  _drawPHCurve(ctx, x0, W, H) {
+    const gW = W - x0;
+    const pad = { l: 36, r: 12, t: 30, b: 32 };
+    const px = x0 + pad.l, py = pad.t;
+    const pw = gW - pad.l - pad.r, ph = H - pad.t - pad.b;
+    const maxV = this._maxVolume();
+    const eqV  = this._eqVolume();
+    const FNT  = TitrationSim.FONT;
+
+    /* panel bg */
+    ctx.fillStyle = 'rgba(5,5,20,0.85)';
+    ctx.fillRect(x0, 0, gW, H);
+
+    /* title */
+    ctx.fillStyle = 'rgba(200,220,255,0.65)';
+    ctx.font = `bold 11px ${FNT}`; ctx.textAlign = 'center';
+    ctx.fillText('\u041A\u0440\u0438\u0432\u0430\u044F \u0442\u0438\u0442\u0440\u043E\u0432\u0430\u043D\u0438\u044F', x0 + gW / 2, 14);
+
+    /* grid + y labels */
+    ctx.strokeStyle = 'rgba(255,255,255,0.06)'; ctx.lineWidth = 0.5;
+    ctx.fillStyle = 'rgba(180,210,255,0.35)';
+    ctx.font = `9px ${FNT}`; ctx.textAlign = 'right'; ctx.textBaseline = 'middle';
+    for (let p = 0; p <= 14; p += 2) {
+      const yl = py + ph - (p / 14) * ph;
+      ctx.beginPath(); ctx.moveTo(px, yl); ctx.lineTo(px + pw, yl); ctx.stroke();
+      ctx.fillText(p.toString(), px - 5, yl);
+    }
+
+    /* x labels */
+    ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+    const vs = maxV > 60 ? 20 : maxV > 30 ? 10 : 5;
+    for (let v = 0; v <= maxV; v += vs) {
+      const xl = px + (v / maxV) * pw;
+      ctx.strokeStyle = 'rgba(255,255,255,0.06)';
+      ctx.beginPath(); ctx.moveTo(xl, py); ctx.lineTo(xl, py + ph); ctx.stroke();
+      ctx.fillText(v.toFixed(0), xl, py + ph + 6);
+    }
+    ctx.fillStyle = 'rgba(180,210,255,0.50)'; ctx.font = `bold 10px ${FNT}`;
+    ctx.fillText('V (mL)', x0 + gW / 2, py + ph + 22);
+
+    /* y-axis label */
+    ctx.save();
+    ctx.translate(x0 + 10, py + ph / 2);
+    ctx.rotate(-Math.PI / 2);
+    ctx.fillText('pH', 0, 0);
+    ctx.restore();
+
+    /* dashed pH=7 */
+    const y7 = py + ph * (1 - 7 / 14);
+    ctx.setLineDash([4, 4]);
+    ctx.strokeStyle = 'rgba(123,245,164,0.25)'; ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.moveTo(px, y7); ctx.lineTo(px + pw, y7); ctx.stroke();
+    ctx.setLineDash([]);
+    ctx.fillStyle = 'rgba(123,245,164,0.40)'; ctx.font = `9px ${FNT}`;
+    ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
+    ctx.fillText('pH 7', px + pw + 4, y7);
+
+    /* axes */
+    ctx.strokeStyle = 'rgba(160,200,255,0.40)'; ctx.lineWidth = 1.5;
+    ctx.beginPath(); ctx.moveTo(px, py); ctx.lineTo(px, py + ph); ctx.lineTo(px + pw, py + ph); ctx.stroke();
+
+    /* curve */
+    if (this._curve.length > 1) {
+      ctx.strokeStyle = TitrationSim.CYAN; ctx.lineWidth = 2.5;
+      ctx.shadowColor = TitrationSim.CYAN; ctx.shadowBlur = 6;
+      ctx.beginPath();
+      for (let i = 0; i < this._curve.length; i++) {
+        const pt = this._curve[i];
+        const lx = px + (pt.v / maxV) * pw;
+        const ly = py + ph * (1 - Math.max(0, Math.min(14, pt.pH)) / 14);
+        i === 0 ? ctx.moveTo(lx, ly) : ctx.lineTo(lx, ly);
+      }
+      ctx.stroke(); ctx.shadowBlur = 0;
+
+      /* current point dot + tooltip */
+      const last = this._curve[this._curve.length - 1];
+      const dx = px + (last.v / maxV) * pw;
+      const dy = py + ph * (1 - Math.max(0, Math.min(14, last.pH)) / 14);
+      ctx.save();
+      ctx.shadowColor = '#FFF'; ctx.shadowBlur = 10; ctx.fillStyle = '#FFF';
+      ctx.beginPath(); ctx.arc(dx, dy, 4.5, 0, Math.PI * 2); ctx.fill();
+      ctx.shadowBlur = 0;
+
+      const tw = 72, th = 30;
+      const tx = Math.min(dx + 8, px + pw - tw - 4);
+      const ty = Math.max(dy - th - 8, py + 2);
+      ctx.fillStyle = 'rgba(0,0,0,0.65)';
+      ctx.beginPath(); ctx.roundRect(tx, ty, tw, th, 5); ctx.fill();
+      ctx.strokeStyle = 'rgba(255,255,255,0.15)'; ctx.lineWidth = 1; ctx.stroke();
+      ctx.fillStyle = this._phColor(last.pH);
+      ctx.font = `bold 11px ${FNT}`; ctx.textAlign = 'left'; ctx.textBaseline = 'top';
+      ctx.fillText(`pH ${last.pH.toFixed(2)}`, tx + 6, ty + 5);
+      ctx.fillStyle = 'rgba(200,220,255,0.60)'; ctx.font = `9px ${FNT}`;
+      ctx.fillText(`${last.v.toFixed(1)} mL`, tx + 6, ty + 18);
+      ctx.restore();
+    }
+
+    /* equivalence point markers */
+    const eqX = px + (eqV / maxV) * pw;
+    const eqPH = this._calcPH(eqV);
+    const eqY = py + ph * (1 - Math.max(0, Math.min(14, eqPH)) / 14);
+
+    ctx.setLineDash([4, 4]);
+    ctx.strokeStyle = 'rgba(155,93,229,0.45)'; ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.moveTo(eqX, py); ctx.lineTo(eqX, py + ph); ctx.stroke();
+    ctx.setLineDash([]);
+
+    /* equivalence diamond */
+    ctx.save();
+    ctx.shadowColor = TitrationSim.VIOLET; ctx.shadowBlur = 10;
+    ctx.fillStyle = TitrationSim.VIOLET;
+    ctx.beginPath();
+    ctx.moveTo(eqX, eqY - 6); ctx.lineTo(eqX + 5, eqY);
+    ctx.lineTo(eqX, eqY + 6); ctx.lineTo(eqX - 5, eqY);
+    ctx.closePath(); ctx.fill();
+    ctx.shadowBlur = 0; ctx.restore();
+
+    ctx.fillStyle = 'rgba(155,93,229,0.70)';
+    ctx.font = `bold 9px ${FNT}`; ctx.textAlign = 'center'; ctx.textBaseline = 'bottom';
+    ctx.fillText('\u044D\u043A\u0432', eqX, eqY - 10);
+    ctx.fillStyle = 'rgba(155,93,229,0.50)'; ctx.font = `8px ${FNT}`;
+    ctx.fillText(`${eqV.toFixed(1)} mL`, eqX, eqY - 20);
+  }
+}
+
+if (typeof module !== 'undefined') module.exports = TitrationSim;
diff --git a/frontend/js/labs/triangle.js b/frontend/js/labs/triangle.js
new file mode 100644
index 0000000..d9b7756
--- /dev/null
+++ b/frontend/js/labs/triangle.js
@@ -0,0 +1,961 @@
+'use strict';
+/* ══════════════════════════════════════════════════════
+   TriangleSim — interactive triangle geometry simulation
+   Draggable vertices A / B / C, toggleable layers:
+   medians, altitudes, bisectors, circumcircle, incircle
+══════════════════════════════════════════════════════ */
+
+class TriangleSim {
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.ctx    = canvas.getContext('2d');
+
+    this.pts  = null;          // [{x,y}, {x,y}, {x,y}]
+    this._dragging = null;
+    this._hovered  = null;
+
+    // visible layers
+    this.layers = {
+      medians     : false,
+      altitudes   : false,
+      bisectors   : false,
+      circumcircle: false,
+      incircle    : false,
+      eulerLine   : false,
+      sineLaw     : false,
+      cosineLaw   : false,
+      pythagorean : false,
+      grid        : true,
+    };
+
+    this.onUpdate = null;       // cb(stats)
+    this._bindEvents();
+  }
+
+  /* ── sizing ── */
+
+  fit() {
+    const rect = this.canvas.getBoundingClientRect();
+    const dpr  = window.devicePixelRatio || 1;
+    this.canvas.width  = rect.width  * dpr;
+    this.canvas.height = rect.height * dpr;
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this.W = rect.width;
+    this.H = rect.height;
+    if (!this.pts) this._initPts();
+    else           this._clampPts();
+    this.draw();
+  }
+
+  _initPts() {
+    const cx = this.W / 2, cy = this.H / 2;
+    const r  = Math.min(this.W, this.H) * 0.30;
+    this.pts = [
+      { x: cx,             y: cy - r        },   // A  top
+      { x: cx - r * 0.88, y: cy + r * 0.62 },   // B  bottom-left
+      { x: cx + r * 0.88, y: cy + r * 0.62 },   // C  bottom-right
+    ];
+  }
+
+  _clampPts() {
+    const pad = 48;
+    for (const p of this.pts) {
+      p.x = Math.max(pad, Math.min(this.W - pad, p.x));
+      p.y = Math.max(pad, Math.min(this.H - pad, p.y));
+    }
+  }
+
+  reset() {
+    this.pts = null;
+    this._initPts();
+    this.draw();
+    if (this.onUpdate) this.onUpdate(this.stats());
+  }
+
+  /* ── pointer events ── */
+
+  _bindEvents() {
+    const c = this.canvas;
+
+    const pos = e => {
+      const r = c.getBoundingClientRect();
+      const s = e.touches ? e.touches[0] : e;
+      return { x: s.clientX - r.left, y: s.clientY - r.top };
+    };
+
+    const hit = p => {
+      if (!this.pts) return -1;
+      for (let i = 0; i < 3; i++) {
+        if (Math.hypot(p.x - this.pts[i].x, p.y - this.pts[i].y) < 20) return i;
+      }
+      return -1;
+    };
+
+    const drag = (p) => {
+      this.pts[this._dragging].x = p.x;
+      this.pts[this._dragging].y = p.y;
+      this._clampPts();
+      this.draw();
+      if (this.onUpdate) this.onUpdate(this.stats());
+    };
+
+    c.addEventListener('mousedown', e => {
+      const i = hit(pos(e));
+      if (i >= 0) { this._dragging = i; c.style.cursor = 'grabbing'; }
+    });
+
+    c.addEventListener('mousemove', e => {
+      const p = pos(e);
+      if (this._dragging !== null) { drag(p); return; }
+      const i  = hit(p);
+      const was = this._hovered;
+      this._hovered = i >= 0 ? i : null;
+      c.style.cursor = i >= 0 ? 'grab' : 'default';
+      if (was !== this._hovered) this.draw();
+    });
+
+    c.addEventListener('mouseup', () => {
+      this._dragging = null;
+      c.style.cursor = this._hovered !== null ? 'grab' : 'default';
+    });
+
+    c.addEventListener('touchstart', e => { e.preventDefault(); const i = hit(pos(e)); if (i >= 0) this._dragging = i; }, { passive: false });
+    c.addEventListener('touchmove',  e => { e.preventDefault(); if (this._dragging !== null) drag(pos(e)); }, { passive: false });
+    c.addEventListener('touchend',   () => { this._dragging = null; });
+  }
+
+  /* ── layer toggles ── */
+
+  toggleLayer(name) { this.layers[name] = !this.layers[name]; this.draw(); }
+  setLayer(name, v) { this.layers[name] = v; this.draw(); }
+
+  /* ══════════════════════════════════════
+     Geometry helpers (canvas coords)
+     Scale: SCALE px = 1 unit for UI display
+  ══════════════════════════════════════ */
+
+  static SCALE = 50;   // px per unit
+
+  _len(P1, P2) { return Math.hypot(P2.x - P1.x, P2.y - P1.y); }
+
+  _sides() {
+    const [A, B, C] = this.pts;
+    return { a: this._len(B, C), b: this._len(A, C), c: this._len(A, B) };
+  }
+
+  _area() {
+    const [A, B, C] = this.pts;
+    return Math.abs((B.x - A.x) * (C.y - A.y) - (C.x - A.x) * (B.y - A.y)) / 2;
+  }
+
+  _angles() {
+    const { a, b, c } = this._sides();
+    const cl = v => Math.max(-1, Math.min(1, v));
+    const A  = Math.acos(cl((b*b + c*c - a*a) / (2*b*c)));
+    const B  = Math.acos(cl((a*a + c*c - b*b) / (2*a*c)));
+    const C  = Math.PI - A - B;
+    return { A, B, C };
+  }
+
+  _centroid() {
+    const [A, B, C] = this.pts;
+    return { x: (A.x + B.x + C.x) / 3, y: (A.y + B.y + C.y) / 3 };
+  }
+
+  _circumcenter() {
+    const [A, B, C] = this.pts;
+    const D = 2 * (A.x*(B.y-C.y) + B.x*(C.y-A.y) + C.x*(A.y-B.y));
+    if (Math.abs(D) < 1e-8) return null;
+    const a2 = A.x*A.x + A.y*A.y, b2 = B.x*B.x + B.y*B.y, c2 = C.x*C.x + C.y*C.y;
+    return {
+      x: (a2*(B.y-C.y) + b2*(C.y-A.y) + c2*(A.y-B.y)) / D,
+      y: (a2*(C.x-B.x) + b2*(A.x-C.x) + c2*(B.x-A.x)) / D,
+    };
+  }
+
+  _circumR() {
+    const O = this._circumcenter();
+    return O ? this._len(this.pts[0], O) : 0;
+  }
+
+  _incenter() {
+    const [A, B, C] = this.pts;
+    const { a, b, c } = this._sides();
+    const s = a + b + c;
+    if (s < 1e-8) return null;
+    return { x: (a*A.x + b*B.x + c*C.x)/s, y: (a*A.y + b*B.y + c*C.y)/s };
+  }
+
+  _inR() {
+    const { a, b, c } = this._sides();
+    const s = a + b + c;
+    return s < 1e-8 ? 0 : (2 * this._area()) / s;
+  }
+
+  _orthocenter() {
+    const [A, B, C] = this.pts;
+    const bcDx = C.x - B.x, bcDy = C.y - B.y;
+    const acDx = C.x - A.x, acDy = C.y - A.y;
+    const denom = bcDy * (-acDx) - (-bcDx) * acDy;
+    if (Math.abs(denom) < 1e-8) return null;
+    const t = ((B.x-A.x)*(-acDy) - (B.y-A.y)*(-acDx)) / denom;
+    return { x: A.x + t*bcDy, y: A.y - t*bcDx };
+  }
+
+  _foot(P, L1, L2) {
+    const dx = L2.x - L1.x, dy = L2.y - L1.y;
+    const l2 = dx*dx + dy*dy;
+    if (l2 < 1e-10) return { ...L1 };
+    const t = ((P.x-L1.x)*dx + (P.y-L1.y)*dy) / l2;
+    return { x: L1.x + t*dx, y: L1.y + t*dy };
+  }
+
+  _mid(P1, P2) { return { x: (P1.x+P2.x)/2, y: (P1.y+P2.y)/2 }; }
+
+  /* bisector foot: divides opposite side by angle-bisector theorem */
+  _bisFoot(V, L1, L2) {
+    const d1 = this._len(V, L1), d2 = this._len(V, L2);
+    const s  = d1 + d2;
+    if (s < 1e-8) return { ...L1 };
+    return { x: (d2*L1.x + d1*L2.x)/s, y: (d2*L1.y + d1*L2.y)/s };
+  }
+
+  stats() {
+    const S  = TriangleSim.SCALE;
+    const { a, b, c } = this._sides();
+    const { A, B, C } = this._angles();
+    const area  = this._area();
+    const perim = a + b + c;
+    const R = this._circumR();
+    const r = this._inR();
+
+    const deg = rad => rad * 180 / Math.PI;
+    const dA = deg(A), dB = deg(B), dC = deg(C);
+
+    let type = '';
+    const eps = 1.8;  // degrees tolerance
+    const isRight = [dA, dB, dC].some(d => Math.abs(d - 90) < eps);
+    const isObtuse = [dA, dB, dC].some(d => d > 90 + eps);
+    const sidesArr = [a, b, c].sort((x, y) => x - y);
+    const isEquil = sidesArr[2] - sidesArr[0] < 2;
+    const isIsoc  = !isEquil && (
+      Math.abs(a - b) < 2 || Math.abs(b - c) < 2 || Math.abs(a - c) < 2
+    );
+
+    if (isEquil)       type = 'Равносторонний';
+    else if (isRight)  type = isIsoc ? 'Прямоугольный равнобедр.' : 'Прямоугольный';
+    else if (isObtuse) type = isIsoc ? 'Тупоугольный равнобедр.' : 'Тупоугольный';
+    else               type = isIsoc ? 'Остроугольный равнобедр.' : 'Остроугольный';
+
+    return {
+      a: a/S, b: b/S, c: c/S,
+      A: dA,  B: dB,  C: dC,
+      S: area / (S*S),
+      perim: perim / S,
+      R: R / S,
+      r: r / S,
+      type,
+    };
+  }
+
+  /* ══════════════════════════════════════
+     Drawing
+  ══════════════════════════════════════ */
+
+  draw() {
+    const ctx = this.ctx, W = this.W, H = this.H;
+    if (!W || !H || !this.pts) return;
+
+    ctx.clearRect(0, 0, W, H);
+
+    // Background
+    const bg = ctx.createLinearGradient(0, 0, W, H);
+    bg.addColorStop(0, '#07071A');
+    bg.addColorStop(1, '#0D1830');
+    ctx.fillStyle = bg; ctx.fillRect(0, 0, W, H);
+
+    if (this.layers.grid) this._drawGrid(ctx, W, H);
+
+    // Layer order: circles behind <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> fill <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> construction lines <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> edges <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> vertices <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> labels
+    if (this.layers.circumcircle) this._drawCircumcircle(ctx);
+    if (this.layers.incircle)     this._drawIncircle(ctx);
+
+    this._drawFill(ctx);
+
+    if (this.layers.medians)   this._drawMedians(ctx);
+    if (this.layers.altitudes) this._drawAltitudes(ctx);
+    if (this.layers.bisectors) this._drawBisectors(ctx);
+
+    if (this.layers.eulerLine) this._drawEulerLine(ctx);
+
+    if (this.layers.pythagorean) this._drawPythagorean(ctx);
+    if (this.layers.sineLaw)     this._drawSineLaw(ctx);
+    if (this.layers.cosineLaw)   this._drawCosineLaw(ctx);
+
+    this._drawAngleArcs(ctx);
+    this._drawEdges(ctx);
+    this._drawRightAngleMark(ctx);
+    this._drawVertices(ctx);
+    this._drawSideLabels(ctx);
+    this._drawAngleLabels(ctx);
+  }
+
+  /* helpers */
+  _line(ctx, x1, y1, x2, y2) {
+    ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke();
+  }
+
+  _dot(ctx, x, y, r, fill, shadow) {
+    ctx.save();
+    ctx.shadowColor = shadow || fill; ctx.shadowBlur = 12;
+    ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI*2);
+    ctx.fillStyle = fill; ctx.fill(); ctx.restore();
+  }
+
+  _label(ctx, text, x, y, color, size=13) {
+    ctx.save();
+    ctx.font = `bold ${size}px Manrope, sans-serif`;
+    ctx.fillStyle = color;
+    ctx.shadowColor = color; ctx.shadowBlur = 8;
+    ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+    ctx.fillText(text, x, y); ctx.restore();
+  }
+
+  /* ── grid ── */
+  _drawGrid(ctx, W, H) {
+    const step = 50;
+    ctx.save();
+    ctx.strokeStyle = 'rgba(255,255,255,0.045)'; ctx.lineWidth = 1;
+    for (let x = 0; x <= W; x += step) this._line(ctx, x, 0, x, H);
+    for (let y = 0; y <= H; y += step) this._line(ctx, 0, y, W, y);
+    // axes
+    ctx.strokeStyle = 'rgba(255,255,255,0.10)'; ctx.lineWidth = 1.2;
+    this._line(ctx, 0, H/2, W, H/2);
+    this._line(ctx, W/2, 0, W/2, H);
+    ctx.restore();
+  }
+
+  /* ── triangle fill ── */
+  _drawFill(ctx) {
+    const [A, B, C] = this.pts;
+    ctx.save();
+    const g = ctx.createLinearGradient(A.x, A.y, (B.x+C.x)/2, (B.y+C.y)/2);
+    g.addColorStop(0, 'rgba(155,93,229,0.20)');
+    g.addColorStop(1, 'rgba(6,214,224,0.07)');
+    ctx.beginPath(); ctx.moveTo(A.x,A.y); ctx.lineTo(B.x,B.y); ctx.lineTo(C.x,C.y); ctx.closePath();
+    ctx.fillStyle = g; ctx.fill();
+    ctx.restore();
+  }
+
+  /* ── edges ── */
+  _drawEdges(ctx) {
+    const [A, B, C] = this.pts;
+    ctx.save();
+    ctx.shadowColor = 'rgba(155,93,229,0.55)'; ctx.shadowBlur = 10;
+    ctx.strokeStyle = '#9B5DE5'; ctx.lineWidth = 2.5; ctx.lineJoin = 'round';
+    ctx.beginPath(); ctx.moveTo(A.x,A.y); ctx.lineTo(B.x,B.y); ctx.lineTo(C.x,C.y); ctx.closePath(); ctx.stroke();
+    ctx.restore();
+  }
+
+  /* ── vertices ── */
+  _drawVertices(ctx) {
+    const names  = ['A', 'B', 'C'];
+    const colors = ['#9B5DE5', '#06D6E0', '#F15BB5'];
+
+    this.pts.forEach((p, i) => {
+      const active = this._hovered === i || this._dragging === i;
+      const col    = colors[i];
+      ctx.save();
+      ctx.shadowColor = col; ctx.shadowBlur = active ? 24 : 14;
+
+      ctx.beginPath(); ctx.arc(p.x, p.y, active ? 13 : 10, 0, Math.PI*2);
+      ctx.fillStyle   = active ? col : 'rgba(7,7,26,0.92)';
+      ctx.fill();
+      ctx.strokeStyle = col; ctx.lineWidth = 2.2; ctx.stroke();
+
+      if (!active) {
+        ctx.beginPath(); ctx.arc(p.x, p.y, 4, 0, Math.PI*2);
+        ctx.fillStyle = col; ctx.shadowBlur = 0; ctx.fill();
+      }
+      ctx.restore();
+    });
+  }
+
+  /* ── vertex name labels (outside) ── */
+  _drawSideLabels(ctx) {
+    const [A, B, C] = this.pts;
+    // sides: a=BC, b=AC, c=AB
+    const sides = [
+      { from: B, to: C, label: 'a', col: '#9B5DE5' },
+      { from: A, to: C, label: 'b', col: '#06D6E0' },
+      { from: A, to: B, label: 'c', col: '#F15BB5' },
+    ];
+    ctx.save();
+    sides.forEach(({ from, to, label, col }) => {
+      const mx = (from.x+to.x)/2, my = (from.y+to.y)/2;
+      const dx = to.x-from.x, dy = to.y-from.y;
+      const len = Math.hypot(dx, dy); if (len < 1) return;
+      // perpendicular outward — pick side toward centroid and invert
+      const cx_ = (this.pts[0].x+this.pts[1].x+this.pts[2].x)/3;
+      const cy_ = (this.pts[0].y+this.pts[1].y+this.pts[2].y)/3;
+      let nx = -dy/len, ny = dx/len;
+      if ((mx+nx*10-cx_)*nx + (my+ny*10-cy_)*ny < 0) { nx=-nx; ny=-ny; }
+      this._label(ctx, label, mx + nx*20, my + ny*20, col, 14);
+    });
+    ctx.restore();
+  }
+
+  /* ── vertex A/B/C labels ── */
+  _drawAngleLabels(ctx) {
+    const names  = ['A', 'B', 'C'];
+    const colors = ['#9B5DE5', '#06D6E0', '#F15BB5'];
+    const nexts  = [this.pts[1], this.pts[2], this.pts[0]];
+    const prevs  = [this.pts[2], this.pts[0], this.pts[1]];
+
+    this.pts.forEach((V, i) => {
+      const P = nexts[i], Q = prevs[i];
+      // direction from vertex away from triangle (outward bisector)
+      const dp = { x: P.x-V.x, y: P.y-V.y }; const lp = Math.hypot(dp.x, dp.y);
+      const dq = { x: Q.x-V.x, y: Q.y-V.y }; const lq = Math.hypot(dq.x, dq.y);
+      if (lp < 1 || lq < 1) return;
+      // outward: negate inward bisector
+      const bx = dp.x/lp + dq.x/lq, by = dp.y/lp + dq.y/lq;
+      const bl = Math.hypot(bx, by) || 1;
+      const ox = -bx/bl * 26, oy = -by/bl * 26;
+      this._label(ctx, names[i], V.x + ox, V.y + oy, colors[i], 15);
+    });
+  }
+
+  /* ── angle arcs ── */
+  _drawAngleArcs(ctx) {
+    const nexts = [this.pts[1], this.pts[2], this.pts[0]];
+    const prevs = [this.pts[2], this.pts[0], this.pts[1]];
+    const colors= ['rgba(155,93,229,0.7)','rgba(6,214,224,0.7)','rgba(241,91,181,0.7)'];
+    const fills = ['rgba(155,93,229,0.12)','rgba(6,214,224,0.12)','rgba(241,91,181,0.12)'];
+
+    ctx.save();
+    this.pts.forEach((V, i) => {
+      const P = nexts[i], Q = prevs[i];
+      const r = 30;
+      const a1 = Math.atan2(P.y-V.y, P.x-V.x);
+      const a2 = Math.atan2(Q.y-V.y, Q.x-V.x);
+      let diff = a2 - a1;
+      while (diff >  Math.PI) diff -= 2*Math.PI;
+      while (diff < -Math.PI) diff += 2*Math.PI;
+      const ccw = diff < 0;
+
+      ctx.strokeStyle = colors[i]; ctx.lineWidth = 1.5;
+      ctx.fillStyle   = fills[i];
+
+      ctx.beginPath();
+      ctx.moveTo(V.x, V.y);
+      ctx.arc(V.x, V.y, r, a1, a2, ccw);
+      ctx.closePath();
+      ctx.fill();
+
+      ctx.beginPath();
+      ctx.arc(V.x, V.y, r, a1, a2, ccw);
+      ctx.stroke();
+    });
+    ctx.restore();
+  }
+
+  /* ── right angle mark ── */
+  _drawRightAngleMark(ctx) {
+    const { A, B, C } = this._angles();
+    const verts  = this.pts;
+    const angles = [A, B, C];
+    const nexts  = [verts[1], verts[2], verts[0]];
+    const prevs  = [verts[2], verts[0], verts[1]];
+
+    ctx.save();
+    ctx.strokeStyle = 'rgba(255,255,255,0.55)'; ctx.lineWidth = 1.5;
+
+    verts.forEach((V, i) => {
+      if (Math.abs(angles[i] - Math.PI/2) > 0.035) return;
+      const P = nexts[i], Q = prevs[i];
+      const sz = 14;
+      const lp = Math.hypot(P.x-V.x, P.y-V.y), lq = Math.hypot(Q.x-V.x, Q.y-V.y);
+      if (lp < 1 || lq < 1) return;
+      const d1 = { x:(P.x-V.x)/lp*sz, y:(P.y-V.y)/lp*sz };
+      const d2 = { x:(Q.x-V.x)/lq*sz, y:(Q.y-V.y)/lq*sz };
+      ctx.beginPath();
+      ctx.moveTo(V.x+d1.x, V.y+d1.y);
+      ctx.lineTo(V.x+d1.x+d2.x, V.y+d1.y+d2.y);
+      ctx.lineTo(V.x+d2.x, V.y+d2.y);
+      ctx.stroke();
+    });
+    ctx.restore();
+  }
+
+  /* ── medians (green) ── */
+  _drawMedians(ctx) {
+    const [A, B, C] = this.pts;
+    const mA = this._mid(B, C), mB = this._mid(A, C), mC = this._mid(A, B);
+    const G  = this._centroid();
+
+    ctx.save();
+    ctx.strokeStyle = '#22d55e'; ctx.lineWidth = 1.8;
+    ctx.setLineDash([6, 4]); ctx.shadowColor = '#22d55e'; ctx.shadowBlur = 7;
+
+    [[A, mA],[B, mB],[C, mC]].forEach(([fr, to]) => {
+      ctx.beginPath(); ctx.moveTo(fr.x, fr.y); ctx.lineTo(to.x, to.y); ctx.stroke();
+    });
+    ctx.setLineDash([]);
+
+    // midpoint ticks
+    [mA, mB, mC].forEach(m => this._dot(ctx, m.x, m.y, 4, '#22d55e'));
+
+    // centroid
+    this._dot(ctx, G.x, G.y, 7, '#22d55e');
+    this._label(ctx, 'G', G.x + 14, G.y - 8, '#22d55e', 13);
+
+    ctx.restore();
+  }
+
+  /* ── altitudes (amber) ── */
+  _drawAltitudes(ctx) {
+    const [A, B, C] = this.pts;
+    const fA = this._foot(A, B, C);
+    const fB = this._foot(B, A, C);
+    const fC = this._foot(C, A, B);
+    const H  = this._orthocenter();
+
+    ctx.save();
+    ctx.strokeStyle = '#f59e0b'; ctx.lineWidth = 1.8;
+    ctx.setLineDash([6, 4]); ctx.shadowColor = '#f59e0b'; ctx.shadowBlur = 7;
+
+    [[A, fA],[B, fB],[C, fC]].forEach(([fr, to]) => {
+      ctx.beginPath(); ctx.moveTo(fr.x, fr.y); ctx.lineTo(to.x, to.y); ctx.stroke();
+    });
+    ctx.setLineDash([]);
+
+    // foot right-angle marks
+    [[A, B, C, fA],[B, A, C, fB],[C, A, B, fC]].forEach(([P, L1, L2, ft]) => {
+      const lp = Math.hypot(P.x-ft.x, P.y-ft.y);
+      const ll = Math.hypot(L2.x-L1.x, L2.y-L1.y);
+      if (lp < 1 || ll < 1) return;
+      const sz = 9;
+      const d1 = { x:(P.x-ft.x)/lp*sz, y:(P.y-ft.y)/lp*sz };
+      const d2 = { x:(L2.x-L1.x)/ll*sz, y:(L2.y-L1.y)/ll*sz };
+      ctx.strokeStyle = 'rgba(245,158,11,0.6)'; ctx.lineWidth = 1.2;
+      ctx.beginPath();
+      ctx.moveTo(ft.x+d1.x, ft.y+d1.y);
+      ctx.lineTo(ft.x+d1.x+d2.x, ft.y+d1.y+d2.y);
+      ctx.lineTo(ft.x+d2.x, ft.y+d2.y);
+      ctx.stroke();
+    });
+
+    [fA, fB, fC].forEach(f => this._dot(ctx, f.x, f.y, 4, '#f59e0b'));
+
+    if (H) {
+      this._dot(ctx, H.x, H.y, 7, '#f59e0b');
+      this._label(ctx, 'H', H.x + 14, H.y - 8, '#f59e0b', 13);
+    }
+    ctx.restore();
+  }
+
+  /* ── bisectors (pink) ── */
+  _drawBisectors(ctx) {
+    const [A, B, C] = this.pts;
+    const fA = this._bisFoot(A, B, C);
+    const fB = this._bisFoot(B, A, C);
+    const fC = this._bisFoot(C, A, B);
+    const I  = this._incenter();
+
+    ctx.save();
+    ctx.strokeStyle = '#ec4899'; ctx.lineWidth = 1.8;
+    ctx.setLineDash([6, 4]); ctx.shadowColor = '#ec4899'; ctx.shadowBlur = 7;
+
+    [[A, fA],[B, fB],[C, fC]].forEach(([fr, to]) => {
+      ctx.beginPath(); ctx.moveTo(fr.x, fr.y); ctx.lineTo(to.x, to.y); ctx.stroke();
+    });
+    ctx.setLineDash([]);
+
+    if (I) {
+      this._dot(ctx, I.x, I.y, 7, '#ec4899');
+      this._label(ctx, 'I', I.x + 14, I.y - 8, '#ec4899', 13);
+    }
+    ctx.restore();
+  }
+
+  /* ── circumscribed circle (pink dashed) ── */
+  _drawCircumcircle(ctx) {
+    const O = this._circumcenter();
+    if (!O) return;
+    const R = this._circumR();
+
+    ctx.save();
+    ctx.strokeStyle = 'rgba(241,91,181,0.75)'; ctx.lineWidth = 1.8;
+    ctx.setLineDash([7, 4]); ctx.shadowColor = '#F15BB5'; ctx.shadowBlur = 10;
+    ctx.beginPath(); ctx.arc(O.x, O.y, R, 0, Math.PI*2); ctx.stroke();
+    ctx.setLineDash([]);
+
+    // center O
+    this._dot(ctx, O.x, O.y, 5, '#F15BB5');
+    this._label(ctx, 'O', O.x + 10, O.y - 10, '#F15BB5', 12);
+
+    // radii (faint)
+    ctx.strokeStyle = 'rgba(241,91,181,0.18)'; ctx.lineWidth = 1;
+    this.pts.forEach(P => {
+      ctx.beginPath(); ctx.moveTo(O.x, O.y); ctx.lineTo(P.x, P.y); ctx.stroke();
+    });
+    ctx.restore();
+  }
+
+  /* ── inscribed circle (cyan dashed) ── */
+  _drawIncircle(ctx) {
+    const I = this._incenter();
+    if (!I) return;
+    const r = this._inR();
+
+    ctx.save();
+    ctx.strokeStyle = 'rgba(6,214,224,0.75)'; ctx.lineWidth = 1.8;
+    ctx.setLineDash([7, 4]); ctx.shadowColor = '#06D6E0'; ctx.shadowBlur = 10;
+    ctx.beginPath(); ctx.arc(I.x, I.y, r, 0, Math.PI*2); ctx.stroke();
+    ctx.setLineDash([]);
+
+    ctx.beginPath(); ctx.arc(I.x, I.y, r, 0, Math.PI*2);
+    ctx.fillStyle = 'rgba(6,214,224,0.05)'; ctx.fill();
+
+    this._dot(ctx, I.x, I.y, 5, '#06D6E0');
+    ctx.restore();
+  }
+
+  /* ── Euler line: O <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> G <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> H ── */
+  _drawEulerLine(ctx) {
+    const O = this._circumcenter();
+    const G = this._centroid();
+    const H = this._orthocenter();
+    if (!O || !H) return;
+
+    ctx.save();
+    ctx.strokeStyle = 'rgba(255,255,100,0.5)'; ctx.lineWidth = 1.5;
+    ctx.setLineDash([4, 4]); ctx.shadowColor = 'rgba(255,255,100,0.4)'; ctx.shadowBlur = 6;
+    ctx.beginPath(); ctx.moveTo(O.x, O.y); ctx.lineTo(H.x, H.y); ctx.stroke();
+    ctx.setLineDash([]);
+
+    // Label
+    const mx = (O.x + H.x)/2 + 16, my = (O.y + H.y)/2 - 8;
+    ctx.font = '11px Manrope, sans-serif';
+    ctx.fillStyle = 'rgba(255,255,100,0.6)';
+    ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
+    ctx.fillText('прямая Эйлера', mx, my);
+    ctx.restore();
+  }
+
+  /* ══════════════════════════════════════════════════════
+     THEOREM VISUALIZATIONS
+  ══════════════════════════════════════════════════════ */
+
+  /* ── Law of Sines: a/sinA = b/sinB = c/sinC = 2R ── */
+  _drawSineLaw(ctx) {
+    const [A, B, C] = this.pts;
+    const { a, b, c } = this._sides();
+    const angles = this._angles();
+    const S = TriangleSim.SCALE;
+    const O = this._circumcenter();
+    const R = this._circumR();
+
+    if (!O || R < 1) return;
+
+    ctx.save();
+
+    // Draw circumscribed circle (faint, if not already enabled)
+    if (!this.layers.circumcircle) {
+      ctx.strokeStyle = 'rgba(96,165,250,0.3)'; ctx.lineWidth = 1.2;
+      ctx.setLineDash([5, 4]);
+      ctx.beginPath(); ctx.arc(O.x, O.y, R, 0, Math.PI * 2); ctx.stroke();
+      ctx.setLineDash([]);
+      this._dot(ctx, O.x, O.y, 3, 'rgba(96,165,250,0.5)');
+    }
+
+    // Draw radii from O to each vertex with labels
+    const verts = [A, B, C];
+    const sideNames = ['a', 'b', 'c'];
+    const angNames  = ['A', 'B', 'C'];
+    const angVals   = [angles.A, angles.B, angles.C];
+    const sideVals  = [a, b, c];
+    const colors    = ['#60a5fa', '#34d399', '#fbbf24'];
+
+    // Draw radius lines from center to vertices
+    ctx.strokeStyle = 'rgba(96,165,250,0.25)'; ctx.lineWidth = 1;
+    verts.forEach(v => {
+      ctx.beginPath(); ctx.moveTo(O.x, O.y); ctx.lineTo(v.x, v.y); ctx.stroke();
+    });
+
+    // Compute 2R
+    const twoR = 2 * R / S;
+
+    // For each side, show a/sinA value annotation near the side midpoint
+    for (let i = 0; i < 3; i++) {
+      const ratio = (sideVals[i] / S) / Math.sin(angVals[i]);
+      const from = verts[(i + 1) % 3], to = verts[(i + 2) % 3];
+      const mx = (from.x + to.x) / 2, my = (from.y + to.y) / 2;
+
+      // offset outward from centroid
+      const cx_ = (A.x + B.x + C.x) / 3, cy_ = (A.y + B.y + C.y) / 3;
+      const dx = mx - cx_, dy = my - cy_;
+      const dl = Math.hypot(dx, dy) || 1;
+      const ox = dx / dl * 38, oy = dy / dl * 38;
+
+      ctx.font = 'bold 11px Manrope, sans-serif';
+      ctx.fillStyle = colors[i];
+      ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+      ctx.shadowColor = colors[i]; ctx.shadowBlur = 4;
+      ctx.fillText(`${sideNames[i]}/sin${angNames[i]} = ${ratio.toFixed(2)}`, mx + ox, my + oy);
+      ctx.shadowBlur = 0;
+    }
+
+    // Formula box at bottom
+    this._drawFormulaBox(ctx, this.W, this.H,
+      `a/sinA = b/sinB = c/sinC = 2R = ${twoR.toFixed(2)}`,
+      '#60a5fa');
+
+    ctx.restore();
+  }
+
+  /* ── Law of Cosines: c² = a² + b² − 2ab·cosC ── */
+  _drawCosineLaw(ctx) {
+    const [A, B, C] = this.pts;
+    const sides = this._sides();
+    const angles = this._angles();
+    const S = TriangleSim.SCALE;
+
+    // Pick the largest angle to demonstrate
+    const angArr = [angles.A, angles.B, angles.C];
+    const maxIdx = angArr.indexOf(Math.max(...angArr));
+    const angVertex = this.pts[maxIdx];
+    const oppFrom = this.pts[(maxIdx + 1) % 3];
+    const oppTo = this.pts[(maxIdx + 2) % 3];
+
+    const sNames = ['a', 'b', 'c'];
+    const aNames = ['A', 'B', 'C'];
+    const sVals  = [sides.a, sides.b, sides.c];
+
+    // The opposite side to the chosen angle
+    const oppSide = sVals[maxIdx] / S;
+    const adjSide1Name = sNames[(maxIdx + 1) % 3]; // side opposite to vertex (maxIdx+1)
+    const adjSide2Name = sNames[(maxIdx + 2) % 3]; // side opposite to vertex (maxIdx+2)
+    const adjSide1 = sVals[(maxIdx + 1) % 3] / S;
+    const adjSide2 = sVals[(maxIdx + 2) % 3] / S;
+    const oppSideName = sNames[maxIdx];
+    const angName = aNames[maxIdx];
+    const angDeg = angArr[maxIdx] * 180 / Math.PI;
+
+    ctx.save();
+
+    // Highlight the two adjacent sides with thicker lines
+    ctx.lineWidth = 3.5; ctx.lineCap = 'round';
+
+    ctx.strokeStyle = 'rgba(251,191,36,0.7)';
+    ctx.shadowColor = '#fbbf24'; ctx.shadowBlur = 8;
+    ctx.beginPath(); ctx.moveTo(angVertex.x, angVertex.y); ctx.lineTo(oppFrom.x, oppFrom.y); ctx.stroke();
+
+    ctx.strokeStyle = 'rgba(52,211,153,0.7)';
+    ctx.shadowColor = '#34d399'; ctx.shadowBlur = 8;
+    ctx.beginPath(); ctx.moveTo(angVertex.x, angVertex.y); ctx.lineTo(oppTo.x, oppTo.y); ctx.stroke();
+
+    // Highlight the opposite side
+    ctx.strokeStyle = 'rgba(239,71,111,0.7)';
+    ctx.shadowColor = '#EF476F'; ctx.shadowBlur = 8;
+    ctx.beginPath(); ctx.moveTo(oppFrom.x, oppFrom.y); ctx.lineTo(oppTo.x, oppTo.y); ctx.stroke();
+    ctx.shadowBlur = 0;
+
+    // Angle arc highlight at the chosen vertex
+    const r = 36;
+    const a1 = Math.atan2(oppFrom.y - angVertex.y, oppFrom.x - angVertex.x);
+    const a2 = Math.atan2(oppTo.y - angVertex.y, oppTo.x - angVertex.x);
+    let diff = a2 - a1;
+    while (diff > Math.PI) diff -= 2 * Math.PI;
+    while (diff < -Math.PI) diff += 2 * Math.PI;
+    const ccw = diff < 0;
+
+    ctx.fillStyle = 'rgba(251,191,36,0.15)';
+    ctx.beginPath();
+    ctx.moveTo(angVertex.x, angVertex.y);
+    ctx.arc(angVertex.x, angVertex.y, r, a1, a2, ccw);
+    ctx.closePath(); ctx.fill();
+
+    ctx.strokeStyle = 'rgba(251,191,36,0.6)'; ctx.lineWidth = 2;
+    ctx.beginPath(); ctx.arc(angVertex.x, angVertex.y, r, a1, a2, ccw); ctx.stroke();
+
+    // Angle label
+    const aMid = a1 + diff / 2;
+    ctx.font = 'bold 12px Manrope, sans-serif';
+    ctx.fillStyle = '#fbbf24'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+    ctx.fillText(`${angDeg.toFixed(1)}°`, angVertex.x + Math.cos(aMid) * 50, angVertex.y + Math.sin(aMid) * 50);
+
+    // Compute c² vs a²+b²-2ab·cosC
+    const c2 = oppSide ** 2;
+    const check = adjSide1 ** 2 + adjSide2 ** 2 - 2 * adjSide1 * adjSide2 * Math.cos(angArr[maxIdx]);
+
+    // 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)}`,
+      '#fbbf24');
+
+    ctx.restore();
+  }
+
+  /* ── Pythagorean theorem: c² = a² + b² ── */
+  _drawPythagorean(ctx) {
+    const [A, B, C] = this.pts;
+    const { a, b, c } = this._sides();
+    const angles = this._angles();
+    const S = TriangleSim.SCALE;
+
+    // Find the largest angle (closest to being right)
+    const angArr = [angles.A, angles.B, angles.C];
+    const maxIdx = angArr.indexOf(Math.max(...angArr));
+    const maxAngle = angArr[maxIdx];
+    const isRight = Math.abs(maxAngle - Math.PI / 2) < 0.035;
+
+    const hyp = this.pts[maxIdx]; // vertex at the largest angle
+    const p1 = this.pts[(maxIdx + 1) % 3];
+    const p2 = this.pts[(maxIdx + 2) % 3];
+
+    // Side lengths (the side opposite the right angle is the hypotenuse)
+    const sNames = ['a', 'b', 'c'];
+    const sVals  = [a / S, b / S, c / S];
+    const hypSide = sVals[maxIdx];
+    const leg1 = sVals[(maxIdx + 1) % 3];
+    const leg2 = sVals[(maxIdx + 2) % 3];
+    const hypName = sNames[maxIdx];
+    const leg1Name = sNames[(maxIdx + 1) % 3];
+    const leg2Name = sNames[(maxIdx + 2) % 3];
+
+    ctx.save();
+
+    // Draw squares on each side
+    this._drawSideSquare(ctx, p1, p2, '#EF476F', 0.12);  // hypotenuse
+    this._drawSideSquare(ctx, hyp, p2, '#06D6E0', 0.12);  // leg 1
+    this._drawSideSquare(ctx, hyp, p1, '#9B5DE5', 0.12);  // leg 2
+
+    // Labels on squares with areas
+    const hypArea = hypSide ** 2;
+    const leg1Area = leg1 ** 2;
+    const leg2Area = leg2 ** 2;
+
+    this._labelSquare(ctx, p1, p2, `${hypName}² = ${hypArea.toFixed(2)}`, '#EF476F');
+    this._labelSquare(ctx, hyp, p2, `${leg1Name}² = ${leg1Area.toFixed(2)}`, '#06D6E0');
+    this._labelSquare(ctx, hyp, p1, `${leg2Name}² = ${leg2Area.toFixed(2)}`, '#9B5DE5');
+
+    // Status: how close to Pythagorean
+    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)})`
+      : `${leg1Name}² + ${leg2Name}² = ${(leg1Area + leg2Area).toFixed(2)}  ≠  ${hypName}² = ${hypArea.toFixed(2)}  (Δ = ${diff.toFixed(2)})`;
+
+    this._drawFormulaBox(ctx, this.W, this.H, statusText, statusCol);
+
+    // Hint if not right angle
+    if (!isRight) {
+      ctx.font = '11px Manrope, sans-serif';
+      ctx.fillStyle = 'rgba(245,158,11,0.7)';
+      ctx.textAlign = 'center';
+      ctx.fillText('Перетащи вершину чтобы ∠ ≈ 90°', this.W / 2, this.H - 16);
+    }
+
+    ctx.restore();
+  }
+
+  /* ── Helpers for theorem visuals ── */
+
+  _drawSideSquare(ctx, p1, p2, color, alpha) {
+    const dx = p2.x - p1.x, dy = p2.y - p1.y;
+    // perpendicular direction (outward from triangle centroid)
+    const cx_ = (this.pts[0].x + this.pts[1].x + this.pts[2].x) / 3;
+    const cy_ = (this.pts[0].y + this.pts[1].y + this.pts[2].y) / 3;
+    let nx = -dy, ny = dx; // perpendicular
+    // ensure outward
+    const mx = (p1.x + p2.x) / 2, my = (p1.y + p2.y) / 2;
+    if ((mx + nx * 0.1 - cx_) * nx + (my + ny * 0.1 - cy_) * ny < 0) { nx = -nx; ny = -ny; }
+
+    const q1 = { x: p1.x + nx, y: p1.y + ny };
+    const q2 = { x: p2.x + nx, y: p2.y + ny };
+
+    ctx.save();
+    ctx.globalAlpha = alpha;
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(p1.x, p1.y);
+    ctx.lineTo(p2.x, p2.y);
+    ctx.lineTo(q2.x, q2.y);
+    ctx.lineTo(q1.x, q1.y);
+    ctx.closePath();
+    ctx.fill();
+    ctx.globalAlpha = 1;
+
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 1.5;
+    ctx.globalAlpha = 0.5;
+    ctx.beginPath();
+    ctx.moveTo(p1.x, p1.y);
+    ctx.lineTo(p2.x, p2.y);
+    ctx.lineTo(q2.x, q2.y);
+    ctx.lineTo(q1.x, q1.y);
+    ctx.closePath();
+    ctx.stroke();
+    ctx.globalAlpha = 1;
+    ctx.restore();
+  }
+
+  _labelSquare(ctx, p1, p2, text, color) {
+    const dx = p2.x - p1.x, dy = p2.y - p1.y;
+    const cx_ = (this.pts[0].x + this.pts[1].x + this.pts[2].x) / 3;
+    const cy_ = (this.pts[0].y + this.pts[1].y + this.pts[2].y) / 3;
+    let nx = -dy, ny = dx;
+    const mx = (p1.x + p2.x) / 2, my = (p1.y + p2.y) / 2;
+    if ((mx + nx * 0.1 - cx_) * nx + (my + ny * 0.1 - cy_) * ny < 0) { nx = -nx; ny = -ny; }
+
+    const center = { x: mx + nx * 0.5, y: my + ny * 0.5 };
+
+    ctx.save();
+    ctx.font = 'bold 11px Manrope, sans-serif';
+    ctx.fillStyle = color;
+    ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+    ctx.shadowColor = 'rgba(0,0,0,0.7)'; ctx.shadowBlur = 4;
+    ctx.fillText(text, center.x, center.y);
+    ctx.restore();
+  }
+
+  _drawFormulaBox(ctx, W, H, text, color) {
+    ctx.save();
+    const bw = ctx.measureText(text).width || 300;
+    const pad = 12;
+    const boxW = Math.min(W - 40, bw + pad * 2 + 20);
+    const boxH = 28;
+    const bx = (W - boxW) / 2;
+    const by = H - 42;
+
+    ctx.font = 'bold 12px Manrope, monospace';
+
+    // background
+    ctx.fillStyle = 'rgba(7,7,26,0.85)';
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 1.2;
+    ctx.globalAlpha = 0.9;
+    const r = 8;
+    ctx.beginPath();
+    ctx.moveTo(bx + r, by); ctx.lineTo(bx + boxW - r, by);
+    ctx.quadraticCurveTo(bx + boxW, by, bx + boxW, by + r);
+    ctx.lineTo(bx + boxW, by + boxH - r);
+    ctx.quadraticCurveTo(bx + boxW, by + boxH, bx + boxW - r, by + boxH);
+    ctx.lineTo(bx + r, by + boxH);
+    ctx.quadraticCurveTo(bx, by + boxH, bx, by + boxH - r);
+    ctx.lineTo(bx, by + r);
+    ctx.quadraticCurveTo(bx, by, bx + r, by);
+    ctx.closePath();
+    ctx.fill(); ctx.stroke();
+    ctx.globalAlpha = 1;
+
+    // text
+    ctx.fillStyle = color;
+    ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+    ctx.shadowColor = color; ctx.shadowBlur = 6;
+    ctx.fillText(text, W / 2, by + boxH / 2);
+    ctx.restore();
+  }
+}
diff --git a/frontend/js/labs/trigcircle.js b/frontend/js/labs/trigcircle.js
new file mode 100644
index 0000000..c51b339
--- /dev/null
+++ b/frontend/js/labs/trigcircle.js
@@ -0,0 +1,969 @@
+'use strict';
+
+/* ═══════════════════════════════════════════════════════════════════════
+   TrigCircleSim — premium interactive unit-circle + graph visualisation
+   v3 — maximum polish
+   ═══════════════════════════════════════════════════════════════════════ */
+
+const _TC_NOTABLE = [
+  { a: 0,               l: '0',     d: '0°'   },
+  { a: Math.PI / 6,     l: 'π/6',   d: '30°'  },
+  { a: Math.PI / 4,     l: 'π/4',   d: '45°'  },
+  { a: Math.PI / 3,     l: 'π/3',   d: '60°'  },
+  { a: Math.PI / 2,     l: 'π/2',   d: '90°'  },
+  { a: 2*Math.PI / 3,   l: '2π/3',  d: '120°' },
+  { a: 3*Math.PI / 4,   l: '3π/4',  d: '135°' },
+  { a: 5*Math.PI / 6,   l: '5π/6',  d: '150°' },
+  { a: Math.PI,         l: 'π',     d: '180°' },
+  { a: 7*Math.PI / 6,   l: '7π/6',  d: '210°' },
+  { a: 5*Math.PI / 4,   l: '5π/4',  d: '225°' },
+  { a: 4*Math.PI / 3,   l: '4π/3',  d: '240°' },
+  { a: 3*Math.PI / 2,   l: '3π/2',  d: '270°' },
+  { a: 5*Math.PI / 3,   l: '5π/3',  d: '300°' },
+  { a: 7*Math.PI / 4,   l: '7π/4',  d: '315°' },
+  { a: 11*Math.PI / 6,  l: '11π/6', d: '330°' },
+];
+
+const _TC = {
+  sin: '#EF476F', cos: '#06D6E0', tan: '#FFD166', cot: '#7BF5A4',
+  point: '#9B5DE5', violet: '#9B5DE5',
+};
+
+function _tcRgb(hex) {
+  const n = parseInt(hex.slice(1), 16);
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+function _tcRgba(hex, a) {
+  const [r, g, b] = _tcRgb(hex);
+  return `rgba(${r},${g},${b},${a})`;
+}
+
+class TrigCircleSim {
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.ctx = canvas.getContext('2d');
+    this.W = 0; this.H = 0; this.dpr = 1;
+
+    this.angle     = Math.PI / 4;
+    this.showSin   = true;
+    this.showCos   = true;
+    this.showTan   = false;
+    this.showCot   = false;
+    this.showGraph  = true;
+    this.graphFn   = 'sin';
+    this.snapToNotable = true;
+    this.animating = false;
+
+    this._cx = 0; this._cy = 0; this._r = 0;
+    this._gx = 0; this._gw = 0; this._gh = 0; this._gy = 0;
+
+    this._drag   = false;
+    this._hover  = false;
+    this._raf    = null;
+    this._animTarget = null;
+    this._animSpeed  = 3;
+    this._idlePulse  = 0;
+    this._idleRaf    = null;
+
+    /* snap particles */
+    this._particles = [];
+    this._lastSnap  = -1;
+
+    this.onUpdate = null;
+
+    this._bindEvents();
+    this._ro = new ResizeObserver(() => { this.fit(); this.draw(); });
+    this._ro.observe(canvas.parentElement);
+  }
+
+  /* ═══ Public ═══════════════════════════════════════════════════════ */
+
+  fit() {
+    const p = this.canvas.parentElement.getBoundingClientRect();
+    this.dpr = window.devicePixelRatio || 1;
+    this.W = p.width || 800; this.H = p.height || 500;
+    this.canvas.width  = this.W * this.dpr;
+    this.canvas.height = this.H * this.dpr;
+    this.canvas.style.width  = this.W + 'px';
+    this.canvas.style.height = this.H + 'px';
+    this._layout();
+  }
+
+  draw() {
+    const c = this.ctx;
+    c.save(); c.scale(this.dpr, this.dpr);
+    c.clearRect(0, 0, this.W, this.H);
+
+    this._drawBg(c);
+    this._drawCircle(c);
+    if (this.showGraph) { this._drawDivider(c); this._drawGraph(c); }
+    this._drawParticles(c);
+
+    c.restore();
+    this._fireUpdate();
+  }
+
+  setAngle(a)  { this.angle = this._norm(a); this.draw(); }
+  setGraphFn(f){ this.graphFn = f; this.draw(); }
+
+  toggleLayer(n, v) {
+    if (n === 'sin')  this.showSin = v;
+    if (n === 'cos')  this.showCos = v;
+    if (n === 'tan')  this.showTan = v;
+    if (n === 'cot')  this.showCot = v;
+    if (n === 'graph') this.showGraph = v;
+    this._layout(); this.draw();
+  }
+
+  goToAngle(rad) {
+    this._animTarget = this._norm(rad);
+    if (!this.animating) this._startAnim();
+  }
+
+  start() { this._startIdle(); }
+  stop()  { this._stopAnim(); this._stopIdle(); }
+
+  stats() {
+    const a = this.angle, s = Math.sin(a), co = Math.cos(a);
+    const t  = Math.abs(co) > 1e-9 ? s / co : undefined;
+    const ct = Math.abs(s)  > 1e-9 ? co / s : undefined;
+    const deg = a * 180 / Math.PI;
+    const q = a < Math.PI/2 ? 1 : a < Math.PI ? 2 : a < 3*Math.PI/2 ? 3 : 4;
+    return { angle: a, deg, radLabel: this._radLbl(a), sin: s, cos: co, tan: t, cot: ct, quadrant: q };
+  }
+
+  /* ═══ Layout ═══════════════════════════════════════════════════════ */
+
+  _layout() {
+    const m = 44;
+    if (this.showGraph) {
+      const cW = this.W * 0.50;
+      this._r  = Math.min(cW - m * 2, this.H - m * 2) / 2 * 0.76;
+      this._cx = cW / 2;
+      this._cy = this.H / 2;
+      this._gx = cW + 24;
+      this._gw = this.W - this._gx - m;
+      this._gh = this.H - m * 2;
+      this._gy = m;
+    } else {
+      this._r  = Math.min(this.W - m * 2, this.H - m * 2) / 2 * 0.76;
+      this._cx = this.W / 2;
+      this._cy = this.H / 2;
+    }
+    this._r = Math.max(55, this._r);
+  }
+
+  /* ═══ Background ═══════════════════════════════════════════════════ */
+
+  _drawBg(c) {
+    const g = c.createRadialGradient(this._cx, this._cy, 0, this._cx, this._cy, this._r * 2.4);
+    g.addColorStop(0, 'rgba(155,93,229,0.055)');
+    g.addColorStop(0.5,'rgba(155,93,229,0.02)');
+    g.addColorStop(1, 'rgba(0,0,0,0)');
+    c.fillStyle = g; c.fillRect(0, 0, this.W, this.H);
+
+    /* decorative rings */
+    c.strokeStyle = 'rgba(255,255,255,0.016)'; c.lineWidth = 1;
+    for (let i = 1; i <= 3; i++) {
+      c.beginPath(); c.arc(this._cx, this._cy, this._r * (0.5 + i * 0.35), 0, Math.PI * 2);
+      c.stroke();
+    }
+  }
+
+  /* ═══ Unit Circle ══════════════════════════════════════════════════ */
+
+  _drawCircle(c) {
+    const cx = this._cx, cy = this._cy, r = this._r;
+    const a = this.angle;
+    const cosA = Math.cos(a), sinA = Math.sin(a);
+    const px = cx + r * cosA, py = cy - r * sinA;
+    const ext = Math.min(55, r * 0.35);
+
+    /* ── quadrant soft fill ── */
+    const q = this.stats().quadrant;
+    const qS = [0, Math.PI/2, Math.PI, 3*Math.PI/2][q-1];
+    c.fillStyle = 'rgba(155,93,229,0.022)';
+    c.beginPath(); c.moveTo(cx, cy);
+    c.arc(cx, cy, r, -(qS + Math.PI/2), -qS);
+    c.closePath(); c.fill();
+
+    /* ── degree tick marks (every 10°, bigger every 30°) ── */
+    for (let deg = 0; deg < 360; deg += 10) {
+      const rad = deg * Math.PI / 180;
+      const big = deg % 30 === 0;
+      const len = big ? 8 : 4;
+      const x1 = cx + (r - len) * Math.cos(rad);
+      const y1 = cy - (r - len) * Math.sin(rad);
+      const x2 = cx + r * Math.cos(rad);
+      const y2 = cy - r * Math.sin(rad);
+      c.strokeStyle = big ? 'rgba(255,255,255,0.12)' : 'rgba(255,255,255,0.05)';
+      c.lineWidth = big ? 1.5 : 1;
+      c.beginPath(); c.moveTo(x1, y1); c.lineTo(x2, y2); c.stroke();
+    }
+
+    /* ── axes (gradient fade) ── */
+    const axGrad = (x1,y1,x2,y2) => {
+      const g = c.createLinearGradient(x1,y1,x2,y2);
+      g.addColorStop(0,   'rgba(255,255,255,0.0)');
+      g.addColorStop(0.08,'rgba(255,255,255,0.30)');
+      g.addColorStop(0.5, 'rgba(255,255,255,0.50)');
+      g.addColorStop(0.92,'rgba(255,255,255,0.30)');
+      g.addColorStop(1,   'rgba(255,255,255,0.0)');
+      return g;
+    };
+    c.lineWidth = 1.5;
+    c.strokeStyle = axGrad(cx - r - ext, cy, cx + r + ext, cy);
+    c.beginPath(); c.moveTo(cx - r - ext, cy); c.lineTo(cx + r + ext, cy); c.stroke();
+    c.strokeStyle = axGrad(cx, cy + r + ext, cx, cy - r - ext);
+    c.beginPath(); c.moveTo(cx, cy + r + ext); c.lineTo(cx, cy - r - ext); c.stroke();
+
+    /* arrows */
+    this._arrowH(c, cx + r + ext, cy, 0, 'rgba(255,255,255,0.5)');
+    this._arrowH(c, cx, cy - r - ext, -Math.PI/2, 'rgba(255,255,255,0.5)');
+
+    /* axis labels */
+    c.font = '700 13px Manrope,sans-serif'; c.fillStyle = 'rgba(255,255,255,0.45)';
+    c.textAlign = 'left'; c.textBaseline = 'top';
+    c.fillText('x', cx + r + ext - 12, cy + 8);
+    c.textAlign = 'right'; c.textBaseline = 'bottom';
+    c.fillText('y', cx - 10, cy - r - ext + 16);
+
+    /* ±1 ticks & labels */
+    c.strokeStyle = 'rgba(255,255,255,0.30)'; c.lineWidth = 1.5;
+    c.font = '600 11px Manrope,sans-serif'; c.fillStyle = 'rgba(255,255,255,0.45)';
+    const tk = 6;
+    c.beginPath(); c.moveTo(cx+r, cy-tk); c.lineTo(cx+r, cy+tk); c.stroke();
+    c.textAlign='center'; c.textBaseline='top'; c.fillText('1', cx+r, cy+9);
+    c.beginPath(); c.moveTo(cx-r, cy-tk); c.lineTo(cx-r, cy+tk); c.stroke();
+    c.fillText('−1', cx-r, cy+9);
+    c.beginPath(); c.moveTo(cx-tk, cy-r); c.lineTo(cx+tk, cy-r); c.stroke();
+    c.textAlign='right'; c.textBaseline='middle'; c.fillText('1', cx-10, cy-r);
+    c.beginPath(); c.moveTo(cx-tk, cy+r); c.lineTo(cx+tk, cy+r); c.stroke();
+    c.fillText('−1', cx-10, cy+r);
+
+    /* origin dot */
+    c.fillStyle = 'rgba(255,255,255,0.35)';
+    c.beginPath(); c.arc(cx, cy, 2.5, 0, Math.PI*2); c.fill();
+
+    /* ── unit circle (multi-layer) ── */
+    c.strokeStyle = _tcRgba(_TC.violet, 0.05 + Math.sin(this._idlePulse) * 0.02);
+    c.lineWidth = 14;
+    c.beginPath(); c.arc(cx, cy, r, 0, Math.PI*2); c.stroke();
+    c.strokeStyle = 'rgba(255,255,255,0.13)'; c.lineWidth = 2;
+    c.beginPath(); c.arc(cx, cy, r, 0, Math.PI*2); c.stroke();
+
+    /* ── notable angle dots + labels ── */
+    for (const n of _TC_NOTABLE) {
+      const nx = cx + r * Math.cos(n.a), ny = cy - r * Math.sin(n.a);
+      const act = Math.abs(a - n.a) < 0.03;
+      if (act) {
+        c.fillStyle = _tcRgba(_TC.violet, 0.5);
+        c.shadowColor = _TC.violet; c.shadowBlur = 10;
+        c.beginPath(); c.arc(nx, ny, 5, 0, Math.PI*2); c.fill();
+        c.shadowBlur = 0;
+        c.strokeStyle = _TC.violet; c.lineWidth = 1.5;
+        c.beginPath(); c.arc(nx, ny, 5, 0, Math.PI*2); c.stroke();
+      } else {
+        c.fillStyle = 'rgba(255,255,255,0.12)';
+        c.beginPath(); c.arc(nx, ny, 2.5, 0, Math.PI*2); c.fill();
+      }
+      if (n.l && n.l !== '0') {
+        const d = act ? 24 : 20;
+        const lx = cx + (r + d) * Math.cos(n.a);
+        const ly = cy - (r + d) * Math.sin(n.a);
+        c.font = act ? '700 11px Manrope,sans-serif' : '400 9px Manrope,sans-serif';
+        c.fillStyle = act ? _tcRgba(_TC.violet, 0.95) : 'rgba(255,255,255,0.18)';
+        c.textAlign = 'center'; c.textBaseline = 'middle';
+        c.fillText(n.l, lx, ly);
+      }
+    }
+
+    /* ── angle arc ── */
+    if (a > 0.015) {
+      const ar = Math.min(r * 0.22, 44);
+      c.fillStyle = _tcRgba(_TC.violet, 0.06);
+      c.beginPath(); c.moveTo(cx, cy); c.arc(cx, cy, ar, 0, -a, true); c.closePath(); c.fill();
+      const ag = c.createConicGradient(0, cx, cy);
+      ag.addColorStop(0, _tcRgba(_TC.violet, 0.7));
+      ag.addColorStop(Math.min(a / (Math.PI*2), 0.99), _tcRgba(_TC.violet, 0.25));
+      ag.addColorStop(1, _tcRgba(_TC.violet, 0.0));
+      c.strokeStyle = ag; c.lineWidth = 2.5;
+      c.beginPath(); c.arc(cx, cy, ar, 0, -a, true); c.stroke();
+      /* label */
+      const mid = a / 2, lr = ar + 18;
+      c.font = 'bold 12px Manrope,sans-serif'; c.fillStyle = _TC.violet;
+      c.textAlign = 'center'; c.textBaseline = 'middle';
+      c.fillText(this._radLbl(a), cx + lr * Math.cos(-mid), cy + lr * Math.sin(-mid));
+    }
+
+    /* ── radius ── */
+    const rg = c.createLinearGradient(cx, cy, px, py);
+    rg.addColorStop(0, 'rgba(255,255,255,0.12)'); rg.addColorStop(1, 'rgba(255,255,255,0.40)');
+    c.strokeStyle = rg; c.lineWidth = 1.5;
+    c.beginPath(); c.moveTo(cx, cy); c.lineTo(px, py); c.stroke();
+
+    /* ── projection dashes ── */
+    c.strokeStyle = 'rgba(255,255,255,0.08)'; c.lineWidth = 1;
+    c.setLineDash([4, 4]);
+    c.beginPath(); c.moveTo(px, py); c.lineTo(px, cy); c.stroke();
+    c.beginPath(); c.moveTo(px, py); c.lineTo(cx, py); c.stroke();
+    c.setLineDash([]);
+
+    const projX = cx + r * cosA;
+
+    /* ── triangle fill (sin+cos) ── */
+    if (this.showSin && this.showCos && Math.abs(cosA) > 0.04 && Math.abs(sinA) > 0.04) {
+      c.fillStyle = 'rgba(155,93,229,0.035)';
+      c.beginPath(); c.moveTo(cx, cy); c.lineTo(projX, cy); c.lineTo(px, py); c.closePath(); c.fill();
+    }
+
+    /* ═══ trig segments ═══ */
+
+    if (this.showCos) {
+      this._glowLine(c, cx, cy, projX, cy, _TC.cos, 4);
+      c.font = 'bold 12px Manrope,sans-serif'; c.fillStyle = _TC.cos;
+      c.textAlign = 'center'; c.textBaseline = sinA >= 0 ? 'top' : 'bottom';
+      c.fillText('cos', (cx + projX) / 2, cy + (sinA >= 0 ? 12 : -12));
+    }
+
+    if (this.showSin) {
+      this._glowLine(c, projX, cy, px, py, _TC.sin, 4);
+      c.font = 'bold 12px Manrope,sans-serif'; c.fillStyle = _TC.sin;
+      c.textAlign = cosA >= 0 ? 'left' : 'right'; c.textBaseline = 'middle';
+      c.fillText('sin', projX + (cosA >= 0 ? 9 : -9), (cy + py) / 2);
+    }
+
+    if (this.showTan && Math.abs(cosA) > 0.025) {
+      const tanV = sinA / cosA;
+      if (Math.abs(tanV) < 10) {
+        const tX = cosA >= 0 ? cx + r : cx - r;
+        const tY = cosA >= 0 ? cy - r * tanV : cy + r * tanV;
+        /* faint tangent guide line */
+        c.strokeStyle = _tcRgba(_TC.tan, 0.06); c.lineWidth = 1;
+        c.beginPath(); c.moveTo(tX, cy - r - ext); c.lineTo(tX, cy + r + ext); c.stroke();
+        this._glowLine(c, tX, cy, tX, tY, _TC.tan, 3.5);
+        c.strokeStyle = _tcRgba(_TC.tan, 0.18); c.lineWidth = 1;
+        c.setLineDash([5, 4]); c.beginPath(); c.moveTo(px, py); c.lineTo(tX, tY); c.stroke(); c.setLineDash([]);
+        c.fillStyle = _TC.tan; c.shadowColor = _TC.tan; c.shadowBlur = 8;
+        c.beginPath(); c.arc(tX, tY, 4.5, 0, Math.PI*2); c.fill(); c.shadowBlur = 0;
+        c.font = 'bold 12px Manrope,sans-serif'; c.fillStyle = _TC.tan;
+        c.textAlign = cosA >= 0 ? 'left' : 'right'; c.textBaseline = 'middle';
+        c.fillText('tg', tX + (cosA >= 0 ? 8 : -8), (cy + tY) / 2);
+      }
+    }
+
+    if (this.showCot && Math.abs(sinA) > 0.025) {
+      const cotV = cosA / sinA;
+      if (Math.abs(cotV) < 10) {
+        const cX = sinA >= 0 ? cx + r * cotV : cx - r * cotV;
+        const cY = sinA >= 0 ? cy - r : cy + r;
+        c.strokeStyle = _tcRgba(_TC.cot, 0.06); c.lineWidth = 1;
+        c.beginPath(); c.moveTo(cx - r - ext, cY); c.lineTo(cx + r + ext, cY); c.stroke();
+        this._glowLine(c, cx, cY, cX, cY, _TC.cot, 3.5);
+        c.strokeStyle = _tcRgba(_TC.cot, 0.18); c.lineWidth = 1;
+        c.setLineDash([5, 4]); c.beginPath(); c.moveTo(px, py); c.lineTo(cX, cY); c.stroke(); c.setLineDash([]);
+        c.fillStyle = _TC.cot; c.shadowColor = _TC.cot; c.shadowBlur = 8;
+        c.beginPath(); c.arc(cX, cY, 4.5, 0, Math.PI*2); c.fill(); c.shadowBlur = 0;
+        c.font = 'bold 12px Manrope,sans-serif'; c.fillStyle = _TC.cot;
+        c.textAlign = 'center'; c.textBaseline = sinA >= 0 ? 'bottom' : 'top';
+        c.fillText('ctg', (cx + cX) / 2, cY + (sinA >= 0 ? -8 : 8));
+      }
+    }
+
+    /* ── right-angle marker ── */
+    if (this.showSin && this.showCos && Math.abs(cosA) > 0.06 && Math.abs(sinA) > 0.06) {
+      const sz = 8, dx = cosA > 0 ? -sz : sz, dy = sinA > 0 ? sz : -sz;
+      c.strokeStyle = 'rgba(255,255,255,0.18)'; c.lineWidth = 1;
+      c.beginPath(); c.moveTo(projX+dx, cy); c.lineTo(projX+dx, cy-dy); c.lineTo(projX, cy-dy); c.stroke();
+    }
+
+    /* ── axis value badges ── */
+    if (this.showSin && Math.abs(sinA) > 0.04)
+      this._badge(c, cx - 12, py, this._fmt(sinA), _TC.sin, 'right', 'middle');
+    if (this.showCos && Math.abs(cosA) > 0.04)
+      this._badge(c, projX, cy + 17, this._fmt(cosA), _TC.cos, 'center', 'top');
+
+    /* ── main point ── */
+    const ps = this._hover || this._drag ? 10 : 8;
+    const blur = this._hover || this._drag ? 22 : 16;
+    c.fillStyle = _tcRgba(_TC.point, 0.10);
+    c.beginPath(); c.arc(px, py, ps + 10, 0, Math.PI*2); c.fill();
+    c.shadowColor = _TC.point; c.shadowBlur = blur;
+    c.fillStyle = _TC.point;
+    c.beginPath(); c.arc(px, py, ps, 0, Math.PI*2); c.fill();
+    c.shadowBlur = 0;
+    c.fillStyle = 'rgba(255,255,255,0.85)';
+    c.beginPath(); c.arc(px, py, ps * 0.35, 0, Math.PI*2); c.fill();
+    c.strokeStyle = 'rgba(255,255,255,0.50)'; c.lineWidth = 2;
+    c.beginPath(); c.arc(px, py, ps, 0, Math.PI*2); c.stroke();
+
+    /* ── coordinate tooltip ── */
+    this._tooltip(c, px, py, cosA, sinA);
+
+    /* ── quadrant roman numeral ── */
+    const qOff = r * 0.46;
+    const qx = (q===1||q===4) ? cx+qOff : cx-qOff;
+    const qy = (q<=2) ? cy-qOff : cy+qOff;
+    c.font = 'bold 22px Manrope,sans-serif'; c.fillStyle = _tcRgba(_TC.violet, 0.07);
+    c.textAlign = 'center'; c.textBaseline = 'middle';
+    c.fillText(['I','II','III','IV'][q-1]||'', qx, qy);
+
+    /* ── sign pills per quadrant ── */
+    this._quadSigns(c, cx, cy, r);
+
+    /* ── Pythagorean identity bar ── */
+    this._pythBar(c);
+
+    /* ── connection line to graph ── */
+    if (this.showGraph) this._connLine(c, px, py, sinA, cosA);
+  }
+
+  /* ═══ Connection line: circle <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> graph ═══════════════════════════════ */
+
+  _connLine(c, px, py, sinA, cosA) {
+    const fn = this.graphFn;
+    const val = fn === 'sin' ? sinA : fn === 'cos' ? cosA :
+                fn === 'tan' ? (Math.abs(cosA)>0.02 ? sinA/cosA : null) :
+                (Math.abs(sinA)>0.02 ? cosA/sinA : null);
+    if (val === null || !isFinite(val)) return;
+
+    const yR = (fn === 'tan' || fn === 'cot') ? 4 : 1.5;
+    if (Math.abs(val) > yR * 2) return;
+
+    const gy = this._gy, gh = this._gh;
+    const targetY = gy + gh/2 - val / yR * (gh/2);
+
+    /* source Y = py for sin, cy for cos, depends on fn */
+    const srcY = (fn === 'sin') ? py : (fn === 'cos') ? this._cy : py;
+    const srcX = (fn === 'sin' || fn === 'tan') ? px : this._cx;
+
+    c.strokeStyle = _tcRgba(_TC[fn] || _TC.sin, 0.12);
+    c.lineWidth = 1;
+    c.setLineDash([3, 5]);
+    c.beginPath(); c.moveTo(srcX, srcY); c.lineTo(this._gx, targetY); c.stroke();
+    c.setLineDash([]);
+  }
+
+  /* ═══ Quadrant sign pills ═══════════════════════════════════════════ */
+
+  _quadSigns(c, cx, cy, r) {
+    const signs = [
+      { q: 1, s:'+', co:'+', t:'+' }, { q: 2, s:'+', co:'−', t:'−' },
+      { q: 3, s:'−', co:'−', t:'+' }, { q: 4, s:'−', co:'+', t:'−' },
+    ];
+    const curr = this.stats().quadrant;
+    const off = r * 0.78;
+    for (const sg of signs) {
+      const sx = (sg.q===1||sg.q===4) ? cx+off : cx-off;
+      const sy = (sg.q<=2) ? cy-off : cy+off;
+      const isCurr = sg.q === curr;
+      c.font = '500 8px Manrope,sans-serif';
+      c.fillStyle = isCurr ? 'rgba(255,255,255,0.25)' : 'rgba(255,255,255,0.07)';
+      c.textAlign = 'center'; c.textBaseline = 'middle';
+      const txt = `s${sg.s} c${sg.co} t${sg.t}`;
+      c.fillText(txt, sx, sy);
+    }
+  }
+
+  /* ═══ Pythagorean identity bar ══════════════════════════════════════ */
+
+  _pythBar(c) {
+    const s = Math.sin(this.angle), co = Math.cos(this.angle);
+    const sin2 = s * s, cos2 = co * co;
+    const bw = Math.min(this._r * 1.4, 180);
+    const bh = 6;
+    const bx = this._cx - bw / 2;
+    const by = this._cy + this._r + 38;
+    if (by + bh + 16 > this.H) return;
+
+    /* background track */
+    c.fillStyle = 'rgba(255,255,255,0.04)';
+    c.beginPath(); c.roundRect(bx, by, bw, bh, 3); c.fill();
+
+    /* sin² portion */
+    const sw = bw * sin2;
+    if (sw > 0.5) {
+      c.fillStyle = _tcRgba(_TC.sin, 0.5);
+      c.beginPath(); c.roundRect(bx, by, sw, bh, [3,0,0,3]); c.fill();
+    }
+
+    /* cos² portion */
+    const cw = bw * cos2;
+    if (cw > 0.5) {
+      c.fillStyle = _tcRgba(_TC.cos, 0.5);
+      c.beginPath(); c.roundRect(bx + sw, by, cw, bh, [0,3,3,0]); c.fill();
+    }
+
+    /* label */
+    c.font = '500 9px Manrope,sans-serif'; c.fillStyle = 'rgba(255,255,255,0.25)';
+    c.textAlign = 'center'; c.textBaseline = 'top';
+    c.fillText(`sin² + cos² = 1`, this._cx, by + bh + 4);
+  }
+
+  /* ═══ Divider ══════════════════════════════════════════════════════ */
+
+  _drawDivider(c) {
+    const x = this._gx - 14;
+    const pad = 20;
+    const lg = c.createLinearGradient(x, pad, x, this.H - pad);
+    lg.addColorStop(0,   'rgba(155,93,229,0.0)');
+    lg.addColorStop(0.15,'rgba(155,93,229,0.18)');
+    lg.addColorStop(0.5, 'rgba(155,93,229,0.28)');
+    lg.addColorStop(0.85,'rgba(155,93,229,0.18)');
+    lg.addColorStop(1,   'rgba(155,93,229,0.0)');
+    c.strokeStyle = lg; c.lineWidth = 1;
+    c.beginPath(); c.moveTo(x, pad); c.lineTo(x, this.H - pad); c.stroke();
+    /* glow */
+    const gg = c.createLinearGradient(x - 16, 0, x + 16, 0);
+    gg.addColorStop(0, 'rgba(155,93,229,0.0)');
+    gg.addColorStop(0.5, 'rgba(155,93,229,0.035)');
+    gg.addColorStop(1, 'rgba(155,93,229,0.0)');
+    c.fillStyle = gg; c.fillRect(x - 16, pad, 32, this.H - pad*2);
+  }
+
+  /* ═══ Graph ════════════════════════════════════════════════════════ */
+
+  _drawGraph(c) {
+    const gx = this._gx, gy = this._gy, gw = this._gw, gh = this._gh;
+    if (gw < 50 || gh < 50) return;
+
+    const fn = this.graphFn;
+    const col = _TC[fn] || _TC.sin;
+    const lbl = fn==='sin'?'y = sin x':fn==='cos'?'y = cos x':fn==='tan'?'y = tg x':'y = ctg x';
+    const evFn = fn==='sin'?Math.sin:fn==='cos'?Math.cos:fn==='tan'?Math.tan:(x=>1/Math.tan(x));
+    const yR = (fn==='tan'||fn==='cot') ? 4 : 1.5;
+    const xMin = -0.25*Math.PI, xMax = 2.25*Math.PI;
+    const sx = x => gx + (x-xMin)/(xMax-xMin)*gw;
+    const sy = y => gy + gh/2 - y/yR*(gh/2);
+
+    /* ── glass panel ── */
+    const pp = 12;
+    const px1 = gx-pp, py1 = gy-pp, pw = gw+pp*2, ph = gh+pp*2;
+    c.fillStyle = 'rgba(10,10,20,0.50)';
+    c.beginPath(); c.roundRect(px1, py1, pw, ph, 20); c.fill();
+    /* gradient border */
+    const bg = c.createLinearGradient(px1, py1, px1+pw, py1+ph);
+    bg.addColorStop(0, 'rgba(155,93,229,0.18)');
+    bg.addColorStop(0.3,'rgba(255,255,255,0.06)');
+    bg.addColorStop(0.7,'rgba(255,255,255,0.06)');
+    bg.addColorStop(1, 'rgba(155,93,229,0.18)');
+    c.strokeStyle = bg; c.lineWidth = 1.5;
+    c.beginPath(); c.roundRect(px1, py1, pw, ph, 20); c.stroke();
+    /* top highlight */
+    const hg = c.createLinearGradient(px1, py1, px1, py1+50);
+    hg.addColorStop(0, 'rgba(255,255,255,0.025)'); hg.addColorStop(1, 'rgba(255,255,255,0.0)');
+    c.fillStyle = hg;
+    c.beginPath(); c.roundRect(px1+1, py1+1, pw-2, 50, [20,20,0,0]); c.fill();
+
+    /* ── zero axis ── */
+    const zy = sy(0);
+    c.strokeStyle = 'rgba(255,255,255,0.14)'; c.lineWidth = 1;
+    c.beginPath(); c.moveTo(gx, zy); c.lineTo(gx+gw, zy); c.stroke();
+    /* y-axis on graph */
+    const x0 = sx(0);
+    if (x0 > gx + 4 && x0 < gx + gw - 4) {
+      c.strokeStyle = 'rgba(255,255,255,0.08)'; c.lineWidth = 1;
+      c.beginPath(); c.moveTo(x0, gy); c.lineTo(x0, gy+gh); c.stroke();
+    }
+
+    /* ±1 lines */
+    if (fn==='sin'||fn==='cos') {
+      c.strokeStyle = 'rgba(255,255,255,0.05)'; c.setLineDash([4, 4]);
+      [1,-1].forEach(v => { c.beginPath(); c.moveTo(gx, sy(v)); c.lineTo(gx+gw, sy(v)); c.stroke(); });
+      c.setLineDash([]);
+      c.font='500 10px Manrope,sans-serif'; c.fillStyle='rgba(255,255,255,0.22)';
+      c.textAlign='right'; c.textBaseline='middle';
+      c.fillText('1', gx-5, sy(1)); c.fillText('−1', gx-5, sy(-1));
+    }
+
+    /* x ticks */
+    const ticks = [[0,'0'],[Math.PI/2,'π/2'],[Math.PI,'π'],[3*Math.PI/2,'3π/2'],[2*Math.PI,'2π']];
+    c.font='500 10px Manrope,sans-serif'; c.fillStyle='rgba(255,255,255,0.20)';
+    c.textAlign='center'; c.textBaseline='top';
+    for (const [v,l] of ticks) {
+      const xx = sx(v);
+      if (xx < gx+6 || xx > gx+gw-6) continue;
+      c.strokeStyle='rgba(255,255,255,0.05)'; c.lineWidth=1;
+      c.setLineDash([3,3]);
+      c.beginPath(); c.moveTo(xx, gy); c.lineTo(xx, gy+gh); c.stroke();
+      c.setLineDash([]);
+      c.fillText(l, xx, gy+gh+6);
+    }
+
+    /* ── ghost curves (other functions, dimmed) ── */
+    c.save();
+    c.beginPath(); c.rect(gx, gy, gw, gh); c.clip();
+
+    const allFns = [
+      { id: 'sin', ev: Math.sin, c: _TC.sin },
+      { id: 'cos', ev: Math.cos, c: _TC.cos },
+      { id: 'tan', ev: Math.tan, c: _TC.tan },
+      { id: 'cot', ev: x => 1/Math.tan(x), c: _TC.cot },
+    ];
+    const step = (xMax - xMin) / (gw * 1.5);
+
+    for (const f of allFns) {
+      if (f.id === fn) continue; /* skip active — draw it last */
+      const show = (f.id==='sin'&&this.showSin) || (f.id==='cos'&&this.showCos) ||
+                   (f.id==='tan'&&this.showTan) || (f.id==='cot'&&this.showCot);
+      if (!show) continue;
+      const yRg = (f.id==='tan'||f.id==='cot') ? 4 : 1.5;
+      const syG = y => gy + gh/2 - y/yRg*(gh/2);
+      c.strokeStyle = _tcRgba(f.c, 0.18); c.lineWidth = 1.5;
+      c.beginPath(); let on = false;
+      for (let x = xMin; x <= xMax; x += step) {
+        const yv = f.ev(x);
+        if (!isFinite(yv) || Math.abs(yv) > yRg*2) { on = false; continue; }
+        const spx = sx(x), spy = syG(yv);
+        if (!on) { c.moveTo(spx, spy); on = true; } else c.lineTo(spx, spy);
+      }
+      c.stroke();
+    }
+
+    /* gradient fill under active curve (sin/cos) */
+    if (fn==='sin'||fn==='cos') {
+      const pts = [];
+      for (let x = xMin; x <= xMax; x += step) {
+        const yv = evFn(x);
+        if (isFinite(yv)) pts.push({ sx: sx(x), sy: sy(yv) });
+      }
+      if (pts.length > 2) {
+        const fg = c.createLinearGradient(0, gy, 0, gy+gh);
+        fg.addColorStop(0, _tcRgba(col, 0.10));
+        fg.addColorStop(0.5, _tcRgba(col, 0.0));
+        fg.addColorStop(1, _tcRgba(col, 0.10));
+        c.fillStyle = fg; c.beginPath();
+        c.moveTo(pts[0].sx, zy);
+        pts.forEach(p => c.lineTo(p.sx, p.sy));
+        c.lineTo(pts[pts.length-1].sx, zy);
+        c.closePath(); c.fill();
+      }
+    }
+
+    /* active curve: glow + main */
+    c.strokeStyle = _tcRgba(col, 0.12); c.lineWidth = 10; c.lineCap='round'; c.lineJoin='round';
+    c.beginPath(); let on2 = false;
+    for (let x = xMin; x <= xMax; x += step) {
+      const yv = evFn(x);
+      if (!isFinite(yv)||Math.abs(yv)>yR*2) { on2 = false; continue; }
+      const spx = sx(x), spy = sy(yv);
+      if (!on2) { c.moveTo(spx, spy); on2 = true; } else c.lineTo(spx, spy);
+    }
+    c.stroke();
+    c.strokeStyle = col; c.lineWidth = 2.5;
+    c.beginPath(); on2 = false;
+    for (let x = xMin; x <= xMax; x += step) {
+      const yv = evFn(x);
+      if (!isFinite(yv)||Math.abs(yv)>yR*2) { on2 = false; continue; }
+      const spx = sx(x), spy = sy(yv);
+      if (!on2) { c.moveTo(spx, spy); on2 = true; } else c.lineTo(spx, spy);
+    }
+    c.stroke();
+
+    /* ── current angle marker ── */
+    const curY = evFn(this.angle);
+    if (isFinite(curY) && Math.abs(curY) <= yR*2) {
+      const mx = sx(this.angle), my = sy(curY);
+      c.strokeStyle = _tcRgba(_TC.violet, 0.18); c.lineWidth = 1;
+      c.setLineDash([4, 4]);
+      c.beginPath(); c.moveTo(mx, gy); c.lineTo(mx, gy+gh); c.stroke();
+      c.strokeStyle = _tcRgba(col, 0.18);
+      c.beginPath(); c.moveTo(gx, my); c.lineTo(mx, my); c.stroke();
+      c.setLineDash([]);
+      /* dot */
+      c.fillStyle = _tcRgba(_TC.point, 0.12);
+      c.beginPath(); c.arc(mx, my, 13, 0, Math.PI*2); c.fill();
+      c.fillStyle = _TC.point; c.shadowColor = _TC.point; c.shadowBlur = 12;
+      c.beginPath(); c.arc(mx, my, 5.5, 0, Math.PI*2); c.fill();
+      c.shadowBlur = 0;
+      c.fillStyle = 'rgba(255,255,255,0.7)';
+      c.beginPath(); c.arc(mx, my, 2, 0, Math.PI*2); c.fill();
+      /* value badge */
+      const txt = this._fmt(curY);
+      c.font = 'bold 11px Manrope,sans-serif';
+      const tm = c.measureText(txt);
+      const bx2 = mx+10, by2 = my-22, bw2 = tm.width+14, bh2 = 20;
+      c.fillStyle='rgba(12,12,22,0.85)';
+      c.beginPath(); c.roundRect(bx2, by2-bh2/2, bw2, bh2, 6); c.fill();
+      c.strokeStyle = _tcRgba(col, 0.4); c.lineWidth = 1;
+      c.beginPath(); c.roundRect(bx2, by2-bh2/2, bw2, bh2, 6); c.stroke();
+      c.fillStyle = col; c.textAlign='left'; c.textBaseline='middle';
+      c.fillText(txt, bx2+7, by2);
+    }
+
+    c.restore();
+
+    /* fn name badge */
+    c.font='bold 13px Manrope,sans-serif';
+    const tm2 = c.measureText(lbl);
+    const bw3 = tm2.width+18, bh3 = 26;
+    c.fillStyle='rgba(12,12,22,0.7)';
+    c.beginPath(); c.roundRect(gx+8, gy+8, bw3, bh3, 8); c.fill();
+    c.strokeStyle = _tcRgba(col, 0.25); c.lineWidth = 1;
+    c.beginPath(); c.roundRect(gx+8, gy+8, bw3, bh3, 8); c.stroke();
+    c.fillStyle = col; c.textAlign='left'; c.textBaseline='middle';
+    c.fillText(lbl, gx+17, gy+21);
+  }
+
+  /* ═══ Snap particles ═══════════════════════════════════════════════ */
+
+  _spawnSnap(px, py) {
+    for (let i = 0; i < 8; i++) {
+      const ang = Math.random() * Math.PI * 2;
+      const speed = 30 + Math.random() * 50;
+      this._particles.push({
+        x: px, y: py,
+        vx: Math.cos(ang) * speed,
+        vy: Math.sin(ang) * speed,
+        life: 1,
+        col: _TC.violet,
+      });
+    }
+  }
+
+  _drawParticles(c) {
+    const dt = 0.016;
+    for (let i = this._particles.length - 1; i >= 0; i--) {
+      const p = this._particles[i];
+      p.x += p.vx * dt; p.y += p.vy * dt;
+      p.life -= dt * 1.8;
+      if (p.life <= 0) { this._particles.splice(i, 1); continue; }
+      c.fillStyle = _tcRgba(p.col, p.life * 0.6);
+      c.shadowColor = p.col; c.shadowBlur = 6;
+      c.beginPath(); c.arc(p.x, p.y, 2 * p.life, 0, Math.PI*2); c.fill();
+      c.shadowBlur = 0;
+    }
+  }
+
+  /* ═══ Drawing helpers ══════════════════════════════════════════════ */
+
+  _glowLine(c, x1, y1, x2, y2, col, w) {
+    c.lineCap = 'round';
+    c.strokeStyle = _tcRgba(col, 0.14); c.lineWidth = w + 8;
+    c.beginPath(); c.moveTo(x1,y1); c.lineTo(x2,y2); c.stroke();
+    c.strokeStyle = col; c.lineWidth = w;
+    c.beginPath(); c.moveTo(x1,y1); c.lineTo(x2,y2); c.stroke();
+    c.strokeStyle = _tcRgba(col, 0.45); c.lineWidth = 1;
+    c.beginPath(); c.moveTo(x1,y1); c.lineTo(x2,y2); c.stroke();
+  }
+
+  _arrowH(c, x, y, angle, col) {
+    c.save(); c.translate(x, y); c.rotate(angle);
+    c.fillStyle = col;
+    c.beginPath(); c.moveTo(0,0); c.lineTo(-9,-4.5); c.lineTo(-9,4.5); c.closePath(); c.fill();
+    c.restore();
+  }
+
+  _badge(c, x, y, txt, col, tA, tB) {
+    c.font='600 10px Manrope,sans-serif';
+    const m = c.measureText(txt);
+    const pw = m.width+10, ph = 17;
+    let bx = x, by = y;
+    if (tA==='right') bx = x - pw;
+    else if (tA==='center') bx = x - pw/2;
+    if (tB==='middle') by = y - ph/2;
+    c.fillStyle='rgba(12,12,22,0.75)';
+    c.beginPath(); c.roundRect(bx, by, pw, ph, 4); c.fill();
+    c.strokeStyle = _tcRgba(col, 0.35); c.lineWidth = 1;
+    c.beginPath(); c.roundRect(bx, by, pw, ph, 4); c.stroke();
+    c.fillStyle = col; c.textAlign='center'; c.textBaseline='middle';
+    c.fillText(txt, bx + pw/2, by + ph/2);
+  }
+
+  _tooltip(c, px, py, cosA, sinA) {
+    const txt = `(${this._fmt(cosA)};  ${this._fmt(sinA)})`;
+    c.font='600 11px Manrope,sans-serif';
+    const m = c.measureText(txt);
+    const pw = m.width+16, ph = 24;
+    const offX = cosA >= 0 ? 16 : -pw-16;
+    const offY = sinA >= 0 ? -ph-12 : 12;
+    const bx = px+offX, by = py+offY;
+    c.fillStyle='rgba(12,12,22,0.80)';
+    c.beginPath(); c.roundRect(bx, by, pw, ph, 8); c.fill();
+    c.strokeStyle = _tcRgba(_TC.violet, 0.3); c.lineWidth = 1;
+    c.beginPath(); c.roundRect(bx, by, pw, ph, 8); c.stroke();
+    c.fillStyle='rgba(255,255,255,0.82)';
+    c.textAlign='center'; c.textBaseline='middle';
+    c.fillText(txt, bx+pw/2, by+ph/2);
+  }
+
+  /* ═══ Formatting ═══════════════════════════════════════════════════ */
+
+  _fmt(v) {
+    const a = Math.abs(v), s = v < 0 ? '−' : '';
+    if (a < 5e-4) return '0';
+    if (Math.abs(a-0.5)<1e-3)             return s+'½';
+    if (Math.abs(a-1)<1e-3)               return s+'1';
+    if (Math.abs(a-Math.SQRT2/2)<1e-3)    return s+'√2/2';
+    if (Math.abs(a-Math.sqrt(3)/2)<1e-3)  return s+'√3/2';
+    if (Math.abs(a-Math.sqrt(3)/3)<1e-3)  return s+'√3/3';
+    if (Math.abs(a-Math.sqrt(3))<1e-3)    return s+'√3';
+    if (Math.abs(a-2)<1e-3)               return s+'2';
+    if (Math.abs(a-2*Math.sqrt(3)/3)<1e-3)return s+'2√3/3';
+    return v.toFixed(3);
+  }
+
+  _radLbl(a) {
+    for (const n of _TC_NOTABLE) { if (Math.abs(a-n.a)<0.02) return n.l; }
+    return (a*180/Math.PI).toFixed(1)+'°';
+  }
+
+  _norm(a) { return ((a%(2*Math.PI))+2*Math.PI)%(2*Math.PI); }
+  _fireUpdate() { if (this.onUpdate) this.onUpdate(this.stats()); }
+
+  /* ═══ Events ═══════════════════════════════════════════════════════ */
+
+  _bindEvents() {
+    const cv = this.canvas;
+
+    const mp = e => {
+      const r = cv.getBoundingClientRect();
+      return { x:(e.clientX??e.touches?.[0]?.clientX??0)-r.left, y:(e.clientY??e.touches?.[0]?.clientY??0)-r.top };
+    };
+
+    const snapAngle = e => {
+      const m = mp(e);
+      let a = Math.atan2(-(m.y-this._cy), m.x-this._cx);
+      if (a<0) a += 2*Math.PI;
+      if (this.snapToNotable) {
+        for (const n of _TC_NOTABLE) {
+          if (Math.abs(a-n.a)<0.09) { a = n.a; break; }
+        }
+      }
+      return a;
+    };
+
+    const hit = e => {
+      const m = mp(e);
+      const px = this._cx + this._r*Math.cos(this.angle);
+      const py = this._cy - this._r*Math.sin(this.angle);
+      if (Math.hypot(m.x-px, m.y-py) < 30) return true;
+      return Math.abs(Math.hypot(m.x-this._cx, m.y-this._cy) - this._r) < 22;
+    };
+
+    const checkSnap = (newA) => {
+      for (const n of _TC_NOTABLE) {
+        if (Math.abs(newA-n.a)<0.02 && this._lastSnap !== n.a) {
+          this._lastSnap = n.a;
+          const nx = this._cx + this._r*Math.cos(n.a);
+          const ny = this._cy - this._r*Math.sin(n.a);
+          this._spawnSnap(nx, ny);
+          return;
+        }
+      }
+    };
+
+    const end = () => {
+      if (this._drag) { this._drag = false; this.draw(); }
+      cv.style.cursor = 'default';
+    };
+
+    cv.addEventListener('mousedown', e => {
+      if (!hit(e)) return;
+      this._drag = true; this._stopAnim();
+      const na = snapAngle(e); checkSnap(na);
+      this.angle = na; this.draw();
+      cv.style.cursor = 'grabbing';
+    });
+
+    cv.addEventListener('mousemove', e => {
+      if (this._drag) {
+        const na = snapAngle(e); checkSnap(na);
+        this.angle = na; this.draw();
+      } else {
+        const h = hit(e);
+        if (h !== this._hover) { this._hover = h; this.draw(); }
+        cv.style.cursor = h ? 'grab' : 'default';
+      }
+    });
+    cv.addEventListener('mouseup', end);
+    cv.addEventListener('mouseleave', () => { if (this._hover){this._hover=false;this.draw();} end(); });
+
+    /* scroll wheel fine-tune */
+    cv.addEventListener('wheel', e => {
+      e.preventDefault();
+      const step = e.shiftKey ? 0.01 : (Math.PI / 180);
+      this.angle = this._norm(this.angle - Math.sign(e.deltaY) * step);
+      this._lastSnap = -1;
+      this.draw();
+    }, { passive: false });
+
+    /* keyboard arrows */
+    cv.setAttribute('tabindex', '0');
+    cv.style.outline = 'none';
+    cv.addEventListener('keydown', e => {
+      const step = e.shiftKey ? (Math.PI/180) : (Math.PI/36); /* 1° or 5° */
+      if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {
+        e.preventDefault(); this.angle = this._norm(this.angle + step); this.draw();
+      } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
+        e.preventDefault(); this.angle = this._norm(this.angle - step); this.draw();
+      }
+    });
+
+    /* touch */
+    cv.addEventListener('touchstart', e => {
+      e.preventDefault();
+      if (!hit(e)) return;
+      this._drag = true; this._stopAnim();
+      const na = snapAngle(e); checkSnap(na); this.angle = na; this.draw();
+    }, { passive: false });
+    cv.addEventListener('touchmove', e => {
+      e.preventDefault();
+      if (this._drag) { const na = snapAngle(e); checkSnap(na); this.angle = na; this.draw(); }
+    }, { passive: false });
+    cv.addEventListener('touchend', end);
+  }
+
+  /* ═══ Animation ════════════════════════════════════════════════════ */
+
+  _startAnim() {
+    this.animating = true;
+    let last = performance.now();
+    const loop = now => {
+      if (!this.animating) return;
+      const dt = (now-last)/1000; last = now;
+      let d = this._animTarget - this.angle;
+      if (d > Math.PI) d -= 2*Math.PI;
+      if (d < -Math.PI) d += 2*Math.PI;
+      if (Math.abs(d) < 0.012) {
+        this.angle = this._animTarget;
+        this.animating = false;
+        /* snap particle at end */
+        const nx = this._cx + this._r*Math.cos(this.angle);
+        const ny = this._cy - this._r*Math.sin(this.angle);
+        this._spawnSnap(nx, ny);
+        this.draw(); return;
+      }
+      const speed = this._animSpeed * Math.max(0.3, Math.min(1, Math.abs(d)/0.5));
+      this.angle += Math.sign(d) * Math.min(Math.abs(d), speed * dt);
+      this.angle = this._norm(this.angle);
+      this.draw();
+      this._raf = requestAnimationFrame(loop);
+    };
+    this._raf = requestAnimationFrame(loop);
+  }
+
+  _stopAnim() {
+    this.animating = false;
+    if (this._raf) { cancelAnimationFrame(this._raf); this._raf = null; }
+  }
+
+  _startIdle() {
+    if (this._idleRaf) return;
+    let last = performance.now();
+    const loop = now => {
+      const dt = (now-last)/1000; last = now;
+      this._idlePulse += dt * 1.5;
+      /* update particles */
+      if (this._particles.length > 0 || (!this._drag && !this.animating)) this.draw();
+      this._idleRaf = requestAnimationFrame(loop);
+    };
+    this._idleRaf = requestAnimationFrame(loop);
+  }
+
+  _stopIdle() {
+    if (this._idleRaf) { cancelAnimationFrame(this._idleRaf); this._idleRaf = null; }
+  }
+}
+
+if (typeof window !== 'undefined') window.TrigCircleSim = TrigCircleSim;
diff --git a/frontend/js/labs/waves.js b/frontend/js/labs/waves.js
new file mode 100644
index 0000000..087251a
--- /dev/null
+++ b/frontend/js/labs/waves.js
@@ -0,0 +1,452 @@
+'use strict';
+/* ═══════════════════════════════════════════
+   WavesSim v2  —  Волны и звук
+   Modes: transverse | longitudinal | superposition | standing
+   ─────────────────────────────────────────── */
+class WavesSim {
+  static BG   = '#0D0D1A';
+  static FONT = "700 12px 'Manrope',sans-serif";
+  static V    = '#9B5DE5';  /* violet  */
+  static C    = '#06D6E0';  /* cyan    */
+  static P    = '#F15BB5';  /* pink    */
+  static G    = '#FFD166';  /* gold    */
+
+  constructor(canvas) {
+    this._c   = canvas;
+    this._ctx = canvas.getContext('2d');
+    this._dpr = 1;
+    this._W   = 0;
+    this._H   = 0;
+
+    this._mode   = 'transverse';
+    this._t      = 0;
+    this._last   = null;
+    this._raf    = null;
+    this._paused = true;
+
+    this._A1   = 50;  this._f1   = 1.0;  this._phi1 = 0;
+    this._A2   = 40;  this._f2   = 1.5;  this._phi2 = 0;
+    this._n    = 1;
+    this._speed = 2.0;
+
+    this._resizeObs = null;
+    this.onUpdate   = null;
+  }
+
+  /* ── публичное API ── */
+
+  fit() {
+    const par = this._c.parentElement;
+    const dpr = window.devicePixelRatio || 1;
+    const w   = par.clientWidth  || 600;
+    const h   = par.clientHeight || 400;
+    this._c.width  = Math.round(w * dpr);
+    this._c.height = Math.round(h * dpr);
+    this._dpr = dpr;
+    this._W   = w;
+    this._H   = h;
+    if (this._resizeObs) this._resizeObs.disconnect();
+    this._resizeObs = new ResizeObserver(() => this.fit());
+    this._resizeObs.observe(par);
+    this.draw();
+  }
+
+  setMode(mode) {
+    this._mode = mode;
+    this._t    = 0;
+    this._last = null;
+    this.draw();
+    this._emit();
+  }
+
+  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));
+    if (phi1  !== undefined) this._phi1  = +phi1;
+    if (A2    !== undefined) this._A2    = Math.max(5,   Math.min(90, +A2));
+    if (f2    !== undefined) this._f2    = Math.max(0.3, Math.min(4,  +f2));
+    if (phi2  !== undefined) this._phi2  = +phi2;
+    if (n     !== undefined) this._n     = Math.max(1, Math.min(5, Math.round(+n)));
+    if (speed !== undefined) this._speed = Math.max(0.3, Math.min(5, +speed));
+    this.draw();
+    this._emit();
+  }
+
+  play() {
+    this._paused = false;
+    this._last   = null;
+    if (!this._raf) this._raf = requestAnimationFrame(t => this._tick(t));
+  }
+  pause() {
+    this._paused = true;
+    if (this._raf) { cancelAnimationFrame(this._raf); this._raf = null; }
+  }
+  start() { this.play(); }
+  stop()  { this.pause(); }
+  reset() { this._t = 0; this._last = null; this.draw(); this._emit(); }
+
+  info() {
+    const v = (this._W || 600) / 3;
+    return {
+      T:      (1 / this._f1).toFixed(2),
+      lambda: (v / this._f1).toFixed(0),
+      v:      v.toFixed(0),
+      f1:     this._f1
+    };
+  }
+
+  /* ── анимационный цикл ── */
+
+  _tick(ts) {
+    if (!this._paused) {
+      if (this._last !== null)
+        this._t += Math.min((ts - this._last) / 1000, 0.05) * this._speed;
+      this._last = ts;
+      this._raf  = requestAnimationFrame(t => this._tick(t));
+    } else {
+      this._raf = null;
+    }
+    this.draw();
+    this._emit();
+  }
+
+  /* ── главный draw ── */
+
+  draw() {
+    const { _ctx: ctx, _W: W, _H: H, _dpr: dpr } = this;
+    if (!W || !H) return;
+    /* сбрасываем трансформ + заливаем фон */
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.fillStyle = WavesSim.BG;
+    ctx.fillRect(0, 0, W, H);
+    if      (this._mode === 'transverse')    this._transvDraw(ctx, W, H);
+    else if (this._mode === 'longitudinal')  this._longDraw(ctx, W, H);
+    else if (this._mode === 'superposition') this._superDraw(ctx, W, H);
+    else                                     this._standDraw(ctx, W, H);
+  }
+
+  /* ══════════════════════════════════════
+     ПОПЕРЕЧНАЯ ВОЛНА
+  ══════════════════════════════════════ */
+  _transvDraw(ctx, W, H) {
+    const PL = 48, PR = 20, PT = 50, PB = 48;
+    const cw = W - PL - PR;
+    const ch = H - PT - PB;
+    const cy = PT + ch / 2;
+
+    this._grid(ctx, PL, PR, PT, PB, W, H);
+    this._axisLine(ctx, PL, PR, PT, PB, W, H, cy);
+
+    const A   = Math.max(4, Math.min(this._A1, ch / 2 - 8));
+    const v   = cw / 3;
+    const lam = v / this._f1;
+    const k   = (2 * Math.PI) / lam;
+    const om  = 2 * Math.PI * this._f1;
+    const t   = this._t;
+    const phi = this._phi1;
+    const y   = x => A * Math.sin(om * t - k * (x - PL) + phi);
+
+    /* волновая кривая */
+    ctx.save();
+    ctx.shadowColor = WavesSim.V;
+    ctx.shadowBlur  = 16;
+    ctx.strokeStyle = WavesSim.V;
+    ctx.lineWidth   = 2.5;
+    ctx.beginPath();
+    for (let x = PL; x <= PL + cw; x += 1) {
+      const py = cy + y(x);
+      x === PL ? ctx.moveTo(x, py) : ctx.lineTo(x, py);
+    }
+    ctx.stroke();
+    ctx.restore();
+
+    /* частицы */
+    const step = Math.max(12, Math.floor(lam / 10));
+    for (let x = PL + step * 0.5; x < PL + cw; x += step) {
+      const py   = cy + y(x);
+      const norm = Math.abs(y(x)) / (A || 1);
+      ctx.beginPath(); ctx.moveTo(x, cy); ctx.lineTo(x, py);
+      ctx.strokeStyle = 'rgba(155,93,229,0.2)'; ctx.lineWidth = 1; ctx.stroke();
+      ctx.save();
+      ctx.shadowColor = WavesSim.V; ctx.shadowBlur = 8;
+      ctx.beginPath(); ctx.arc(x, py, 4, 0, 6.28);
+      ctx.fillStyle = `rgba(155,93,229,${(0.4 + 0.6 * norm).toFixed(2)})`; ctx.fill();
+      ctx.restore();
+    }
+
+    /* выделенная частица */
+    const hx = PL + Math.min(lam * 0.5, cw * 0.22);
+    const hy = cy + y(hx);
+    ctx.save();
+    ctx.shadowColor = WavesSim.G; ctx.shadowBlur = 18;
+    ctx.beginPath(); ctx.arc(hx, hy, 6, 0, 6.28);
+    ctx.fillStyle = WavesSim.G; ctx.fill();
+    ctx.restore();
+    ctx.save();
+    ctx.setLineDash([3, 4]);
+    ctx.strokeStyle = 'rgba(255,209,102,0.22)'; ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.moveTo(hx, cy - A); ctx.lineTo(hx, cy + A); ctx.stroke();
+    ctx.restore();
+
+    /* аннотация длины волны */
+    const ld = Math.min(lam, cw - 16);
+    if (ld > 36) {
+      const ay = cy + A + 26;
+      ctx.save();
+      ctx.strokeStyle = 'rgba(6,214,224,0.7)'; ctx.lineWidth = 1.4;
+      ctx.beginPath();
+      ctx.moveTo(PL + 8, ay); ctx.lineTo(PL + 8 + ld, ay);
+      ctx.moveTo(PL + 13, ay - 4); ctx.lineTo(PL + 8, ay); ctx.lineTo(PL + 13, ay + 4);
+      ctx.moveTo(PL + 8 + ld - 5, ay - 4); ctx.lineTo(PL + 8 + ld, ay); ctx.lineTo(PL + 8 + ld - 5, ay + 4);
+      ctx.stroke();
+      ctx.fillStyle = WavesSim.C; ctx.textAlign = 'center';
+      ctx.font = "700 10px 'Manrope',sans-serif";
+      ctx.fillText('\u03bb = ' + ld.toFixed(0), PL + 8 + ld / 2, ay - 5);
+      ctx.restore();
+    }
+
+    /* аннотация амплитуды */
+    if (A > 16) {
+      const ax = PL - 20;
+      ctx.save();
+      ctx.strokeStyle = 'rgba(241,91,181,0.7)'; ctx.lineWidth = 1.4;
+      ctx.beginPath();
+      ctx.moveTo(ax, cy); ctx.lineTo(ax, cy - A);
+      ctx.moveTo(ax - 4, cy - A + 5); ctx.lineTo(ax, cy - A); ctx.lineTo(ax + 4, cy - A + 5);
+      ctx.moveTo(ax - 3, cy - 3);     ctx.lineTo(ax, cy);     ctx.lineTo(ax + 3, cy - 3);
+      ctx.stroke();
+      ctx.fillStyle = WavesSim.P; ctx.textAlign = 'center';
+      ctx.font = "700 10px 'Manrope',sans-serif";
+      ctx.save(); ctx.translate(ax - 12, cy - A / 2); ctx.rotate(-Math.PI / 2);
+      ctx.fillText('A', 0, 0); ctx.restore();
+      ctx.restore();
+    }
+
+    /* подпись */
+    ctx.fillStyle = 'rgba(255,255,255,0.28)';
+    ctx.font = WavesSim.FONT; ctx.textAlign = 'left';
+    ctx.fillText('y = A sin(\u03c9t \u2212 kx + \u03c6)', PL, PT - 14);
+  }
+
+  /* ══════════════════════════════════════
+     ПРОДОЛЬНАЯ ВОЛНА
+  ══════════════════════════════════════ */
+  _longDraw(ctx, W, H) {
+    const PL = 24, PR = 24, PT = 50, PB = 60;
+    const cw = W - PL - PR;
+    const ch = H - PT - PB;
+
+    const nRows = 5;
+    const rowH  = ch / nRows;
+    const nPart = Math.max(20, Math.floor(cw / 10));
+    const dx0   = cw / nPart;
+
+    const v   = cw / 3;
+    const lam = v / this._f1;
+    const k   = (2 * Math.PI) / lam;
+    const om  = 2 * Math.PI * this._f1;
+    const A   = Math.min(this._A1 * 0.5, lam / 4, rowH * 0.36);
+    const t   = this._t;
+    const phi = this._phi1;
+
+    /* ряды частиц */
+    for (let row = 0; row < nRows; row++) {
+      const cy = PT + rowH * (row + 0.5);
+      for (let i = 0; i < nPart; i++) {
+        const x0    = PL + (i + 0.5) * dx0;
+        const phase = om * t - k * (x0 - PL) + phi;
+        const disp  = A * Math.sin(phase);
+        const xd    = Math.max(PL + 1, Math.min(PL + cw - 1, x0 + disp));
+        const dens  = 1 / Math.max(0.15, 1 + (-A * k * Math.cos(phase)));
+        const alpha = Math.max(0.1, Math.min(0.95, dens * 0.55));
+        ctx.beginPath(); ctx.arc(xd, cy, 3, 0, 6.28);
+        ctx.fillStyle = `rgba(155,93,229,${alpha.toFixed(2)})`; ctx.fill();
+      }
+    }
+
+    /* график давления */
+    const pTop = PT + ch + 10;
+    const pH   = H - pTop - 8;
+    if (pH > 20) {
+      const axY = pTop + pH / 2;
+      ctx.strokeStyle = 'rgba(255,255,255,0.08)'; ctx.lineWidth = 1;
+      ctx.setLineDash([4, 3]);
+      ctx.beginPath(); ctx.moveTo(PL, axY); ctx.lineTo(PL + cw, axY); ctx.stroke();
+      ctx.setLineDash([]);
+      ctx.save();
+      ctx.shadowColor = WavesSim.C; ctx.shadowBlur = 8;
+      ctx.strokeStyle = WavesSim.C; ctx.lineWidth = 2;
+      ctx.beginPath();
+      for (let x = PL; x <= PL + cw; x += 1) {
+        const py = axY - Math.cos(om * t - k * (x - PL) + phi) * pH * 0.4;
+        x === PL ? ctx.moveTo(x, py) : ctx.lineTo(x, py);
+      }
+      ctx.stroke(); ctx.restore();
+      ctx.fillStyle = WavesSim.C; ctx.font = "600 9px 'Manrope',sans-serif"; ctx.textAlign = 'left';
+      ctx.fillText('P(x,t)', PL + 2, pTop + 11);
+    }
+
+    ctx.fillStyle = 'rgba(255,255,255,0.28)';
+    ctx.font = WavesSim.FONT; ctx.textAlign = 'left';
+    ctx.fillText('Продольная волна', PL, PT - 16);
+  }
+
+  /* ══════════════════════════════════════
+     СУПЕРПОЗИЦИЯ
+  ══════════════════════════════════════ */
+  _superDraw(ctx, W, H) {
+    const PL = 48, PR = 20, PT = 70, PB = 48;
+    const cw = W - PL - PR;
+    const ch = H - PT - PB;
+    const cy = PT + ch / 2;
+
+    this._grid(ctx, PL, PR, PT, PB, W, H);
+    this._axisLine(ctx, PL, PR, PT, PB, W, H, cy);
+
+    const v  = cw / 3;
+    const t  = this._t;
+
+    const mk = (f, A) => {
+      const lam = v / f, k = (2 * Math.PI) / lam, om = 2 * Math.PI * f;
+      const amp = Math.max(4, Math.min(A, ch / 2 - 8));
+      return { k, om, amp };
+    };
+
+    const w1  = mk(this._f1, this._A1);
+    const w2  = mk(this._f2, this._A2);
+    const y1  = x => w1.amp * Math.sin(w1.om * t - w1.k * (x - PL) + this._phi1);
+    const y2  = x => w2.amp * Math.sin(w2.om * t - w2.k * (x - PL) + this._phi2);
+    const yR  = x => y1(x) + y2(x);
+
+    this._waveLine(ctx, PL, cw, cy, y1, WavesSim.V, 1.5, 0.45, false);
+    this._waveLine(ctx, PL, cw, cy, y2, WavesSim.C, 1.5, 0.45, false);
+    this._waveLine(ctx, PL, cw, cy, yR, WavesSim.P, 2.8, 1.0,  true);
+
+    /* легенда */
+    const items = [
+      { c: WavesSim.V, txt: 'y\u2081 = A\u2081 sin(\u03c9\u2081t \u2212 k\u2081x + \u03c6\u2081)' },
+      { c: WavesSim.C, txt: 'y\u2082 = A\u2082 sin(\u03c9\u2082t \u2212 k\u2082x + \u03c6\u2082)' },
+      { c: WavesSim.P, txt: 'y = y\u2081 + y\u2082' },
+    ];
+    ctx.font = "600 9px 'Manrope',sans-serif";
+    items.forEach((it, i) => {
+      const lx = PL + 6, ly = PT - 56 + i * 18;
+      ctx.save();
+      ctx.shadowColor = it.c; ctx.shadowBlur = 8;
+      ctx.fillStyle = it.c;
+      ctx.beginPath(); ctx.arc(lx + 4, ly + 4, 3.5, 0, 6.28); ctx.fill();
+      ctx.restore();
+      ctx.fillStyle = 'rgba(255,255,255,0.55)'; ctx.textAlign = 'left';
+      ctx.fillText(it.txt, lx + 13, ly + 8);
+    });
+  }
+
+  /* ══════════════════════════════════════
+     СТОЯЧАЯ ВОЛНА
+  ══════════════════════════════════════ */
+  _standDraw(ctx, W, H) {
+    const PL = 48, PR = 20, PT = 50, PB = 48;
+    const cw = W - PL - PR;
+    const ch = H - PT - PB;
+    const cy = PT + ch / 2;
+
+    this._grid(ctx, PL, PR, PT, PB, W, H);
+    this._axisLine(ctx, PL, PR, PT, PB, W, H, cy);
+
+    const n   = this._n;
+    const k   = (n * Math.PI) / cw;
+    const om  = 2 * Math.PI * this._f1;
+    const A   = Math.max(4, Math.min(this._A1, ch / 2 - 10));
+    const t   = this._t;
+
+    /* прямая и обратная (тусклые) */
+    this._waveLine(ctx, PL, cw, cy, x =>  A * Math.sin(om * t - k * (x - PL)),         WavesSim.V, 1.0, 0.25, false);
+    this._waveLine(ctx, PL, cw, cy, x =>  A * Math.sin(om * t + k * (x - PL) + Math.PI), WavesSim.C, 1.0, 0.25, false);
+
+    /* огибающая */
+    ctx.save();
+    ctx.globalAlpha = 0.12;
+    ctx.fillStyle = WavesSim.V;
+    ctx.beginPath(); ctx.moveTo(PL, cy);
+    for (let x = PL; x <= PL + cw; x++) ctx.lineTo(x, cy - 2 * A * Math.abs(Math.sin(k * (x - PL))));
+    for (let x = PL + cw; x >= PL; x--) ctx.lineTo(x, cy + 2 * A * Math.abs(Math.sin(k * (x - PL))));
+    ctx.closePath(); ctx.fill(); ctx.restore();
+
+    /* стоячая волна */
+    const cosT = Math.cos(om * t + this._phi1);
+    this._waveLine(ctx, PL, cw, cy, x => 2 * A * Math.sin(k * (x - PL)) * cosT, WavesSim.G, 2.8, 1.0, true);
+
+    /* узлы (cyan) */
+    ctx.save(); ctx.shadowColor = WavesSim.C; ctx.shadowBlur = 10; ctx.fillStyle = WavesSim.C;
+    for (let m = 0; m <= n; m++) {
+      ctx.beginPath(); ctx.arc(PL + m * cw / n, cy, 5, 0, 6.28); ctx.fill();
+    }
+    ctx.restore();
+
+    /* пучности (pink) */
+    ctx.save(); ctx.shadowColor = WavesSim.P; ctx.shadowBlur = 12; ctx.fillStyle = WavesSim.P;
+    for (let m = 0; m < n; m++) {
+      const ax = PL + (m + 0.5) * cw / n;
+      const ay = cy + 2 * A * Math.sin(k * (ax - PL)) * cosT;
+      ctx.beginPath(); ctx.arc(ax, ay, 5, 0, 6.28); ctx.fill();
+    }
+    ctx.restore();
+
+    /* легенда */
+    const lx = W - PR - 128, ly = PT - 20;
+    ctx.font = "600 9px 'Manrope',sans-serif";
+    [{ c: WavesSim.C, t: 'Узел (y\u22610)', dy: 0 }, { c: WavesSim.P, t: 'Пучность', dy: 16 }].forEach(r => {
+      ctx.save(); ctx.shadowColor = r.c; ctx.shadowBlur = 8; ctx.fillStyle = r.c;
+      ctx.beginPath(); ctx.arc(lx + 5, ly + r.dy + 5, 4, 0, 6.28); ctx.fill(); ctx.restore();
+      ctx.fillStyle = 'rgba(255,255,255,0.5)'; ctx.textAlign = 'left';
+      ctx.fillText(r.t, lx + 14, ly + r.dy + 9);
+    });
+
+    ctx.fillStyle = 'rgba(255,255,255,0.28)'; ctx.font = WavesSim.FONT; ctx.textAlign = 'left';
+    ctx.fillText('n = ' + n + '   \u03bb = 2L/' + n, PL, PT - 14);
+  }
+
+  /* ══════════════════════════════════════
+     ВСПОМОГАТЕЛЬНЫЕ
+  ══════════════════════════════════════ */
+
+  _waveLine(ctx, PL, cw, cy, fn, color, lw, alpha, glow) {
+    ctx.save();
+    ctx.globalAlpha = alpha;
+    if (glow) { ctx.shadowColor = color; ctx.shadowBlur = 16; }
+    ctx.strokeStyle = color; ctx.lineWidth = lw;
+    ctx.beginPath();
+    for (let x = PL; x <= PL + cw; x += 1) {
+      const py = cy + fn(x);
+      x === PL ? ctx.moveTo(x, py) : ctx.lineTo(x, py);
+    }
+    ctx.stroke(); ctx.restore();
+  }
+
+  _grid(ctx, PL, PR, PT, PB, W, H) {
+    ctx.strokeStyle = 'rgba(255,255,255,0.04)'; ctx.lineWidth = 1;
+    ctx.beginPath();
+    for (let y = PT; y <= H - PB; y += 28) { ctx.moveTo(PL, y); ctx.lineTo(W - PR, y); }
+    for (let x = PL; x <= W - PR; x += 40) { ctx.moveTo(x, PT); ctx.lineTo(x, H - PB); }
+    ctx.stroke();
+  }
+
+  _axisLine(ctx, PL, PR, PT, PB, W, H, cy) {
+    ctx.save();
+    ctx.setLineDash([6, 4]);
+    ctx.strokeStyle = 'rgba(255,255,255,0.12)'; ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.moveTo(PL, cy); ctx.lineTo(W - PR, cy); ctx.stroke();
+    ctx.restore();
+    ctx.strokeStyle = 'rgba(255,255,255,0.18)'; ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(PL, PT - 6); ctx.lineTo(PL, H - PB);
+    ctx.moveTo(PL, H - PB); ctx.lineTo(W - PR + 6, H - PB);
+    ctx.stroke();
+    ctx.fillStyle = 'rgba(255,255,255,0.22)';
+    ctx.font = "600 9px 'Manrope',sans-serif";
+    ctx.textAlign = 'right';  ctx.fillText('y', PL - 4, PT);
+    ctx.textAlign = 'left';   ctx.fillText('x', W - PR + 8, H - PB + 4);
+  }
+
+  _emit() { if (this.onUpdate) this.onUpdate(this.info()); }
+}
diff --git a/frontend/js/libs/three.min.js b/frontend/js/libs/three.min.js
new file mode 100644
index 0000000..24a3329
--- /dev/null
+++ b/frontend/js/libs/three.min.js
@@ -0,0 +1 @@
+Couldn't find the requested file /build/three.min.js in three.
\ No newline at end of file
diff --git a/frontend/js/whiteboard.js b/frontend/js/whiteboard.js
new file mode 100644
index 0000000..53951fb
--- /dev/null
+++ b/frontend/js/whiteboard.js
@@ -0,0 +1,3243 @@
+/* ── KaTeX CSS cache (module-level, shared across all Whiteboard instances) ── */
+let _katexCss = null;         // null = not fetched yet; '' = failed/loading; string = ready
+const _katexCssCbs = [];      // pending render callbacks waiting for CSS
+
+function _loadKatexCss(cb) {
+  if (_katexCss !== null) { cb(_katexCss); return; }
+  _katexCssCbs.push(cb);
+  if (_katexCssCbs.length > 1) return; // fetch already in flight
+  fetch('https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css')
+    .then(r => r.text())
+    .then(css => {
+      // Make font paths absolute so they resolve from inside an SVG Blob URL
+      _katexCss = css.replace(
+        /url\(fonts\//g,
+        'url(https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/fonts/'
+      );
+    })
+    .catch(() => { _katexCss = ''; })
+    .finally(() => {
+      const waiters = _katexCssCbs.splice(0);
+      waiters.forEach(w => w(_katexCss));
+    });
+}
+
+/**
+ * Whiteboard — interactive drawing canvas
+ * Virtual space: 1920×1080. All coordinates stored in virtual pixels.
+ *
+ * Tools:   'pencil' | 'eraser' | 'highlighter' | 'laser' | 'select' | 'text' |
+ *          'sticky' | 'formula' | 'table' | 'connector' |
+ *          'rect' | 'ellipse' | 'line' | 'arrow' |
+ *          'triangle' | 'diamond' | 'hexagon' | 'star' | 'roundedrect' | 'callout'
+ *
+ * Stroke.tool (DB): 'pencil' | 'eraser' | 'highlighter' | 'shape' | 'text' | 'image' |
+ *                   'sticky' | 'formula' | 'table' | 'connector'
+ *
+ * data shapes:
+ *   pencil/eraser/highlighter : {points:[[x,y],...], color, width, lineStyle, opacity}
+ *   shape         : {shape, x1,y1,x2,y2, color, width, fill, lineStyle, opacity}
+ *   connector     : {x1,y1,x2,y2, color, width, arrowStart, arrowEnd, lineStyle, opacity}
+ *   text          : {text, x, y, fontSize, color}
+ *   image         : {src, x, y, w, h}
+ *   sticky        : {x, y, w, h, text, bgColor, textColor, fontSize}
+ *   formula       : {x, y, w, h, latex, color}
+ *   table         : {x, y, w, h, rows, cols, cells, borderColor, bgColor, textColor, fontSize}
+ */
+class Whiteboard {
+  static VW = 1920;
+  static VH = 1080;
+
+  constructor(canvas, opts = {}) {
+    this._canvas  = canvas;
+    this._ctx     = canvas.getContext('2d');
+
+    this._readOnly         = opts.readOnly         || false;
+    this._onStrokeDone     = opts.onStrokeDone     || null;
+    this._onStrokeUndo     = opts.onStrokeUndo     || null;
+    this._onStrokeProgress = opts.onStrokeProgress || null;
+    this._onStrokeUpdated  = opts.onStrokeUpdated  || null;
+    this._onCursorMove     = opts.onCursorMove     || null;
+    this._cursorThrottle   = 0; // timestamp of last cursor broadcast
+
+    this._strokes   = [];
+    this._undoStack = [];
+    this._redoStack = [];
+
+    this._drawing    = false;
+    this._curPts     = [];
+    this._shapeStart = null;
+    this._shapeEnd   = null;
+
+    this._tool      = 'pencil';
+    this._color     = '#ffffff';
+    this._width     = 4;
+    this._fill      = false;
+    this._lineStyle = 'solid';
+    this._opacity   = 1.0;
+    this._template  = opts.template  || 'blank';
+    this._pageNum   = opts.pageNum   || 1;
+
+    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._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', ...}
+    this._selectedOverlayIdx = -1;
+    this._onOverlayChange = opts.onOverlayChange || null;
+    this._showMeasurements = false;  // auto-measurements toggle
+
+    // Zoom / pan
+    this._zoom        = 1;
+    this._panVX       = 0;   // virtual-space X of top-left corner
+    this._panVY       = 0;
+    this._spaceDown   = false;
+    this._panStartCss = null; // [cssX, cssY] at pan start
+    this._panStartPan = null; // [panVX, panVY] at pan start
+    this._onZoomChange = opts.onZoomChange || null;
+
+    this._lastClickTime = 0;
+    this._lastClickVx   = 0;
+    this._lastClickVy   = 0;
+
+    this._localIdCounter = -1;
+    this._liveId         = null;
+    this._progressTimer  = null;
+    this._liveStrokes    = new Map();
+
+    this._fitPending           = false;
+    this._bgNoise              = null;   // cached noise pattern for chalkboard texture
+    this._textInput            = null;
+    this._textInputDocHandler  = null;   // document pointerdown handler for outside-click
+    this._objectInput          = null;
+    this._onObjectCreated        = opts.onObjectCreated || 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;
+
+    // dynamic overlay canvas (selection, snap guides, live strokes, laser)
+    this._dynCanvas = document.createElement('canvas');
+    this._dynCanvas.style.cssText = 'position:absolute;top:0;left:0;pointer-events:none;';
+    const _wrap = canvas.parentElement;
+    if (_wrap) _wrap.appendChild(this._dynCanvas);
+    this._dynCtx = this._dynCanvas.getContext('2d');
+
+    // minimap canvas — navigation overview (bottom-right corner)
+    this._mmCanvas  = document.createElement('canvas');
+    this._mmCanvas.width  = 192;
+    this._mmCanvas.height = 108;
+    this._mmCanvas.style.cssText = [
+      'position:absolute;bottom:10px;right:10px;z-index:25;',
+      'width:192px;height:108px;border-radius:6px;',
+      'border:1px solid rgba(155,93,229,0.35);',
+      'box-shadow:0 2px 12px rgba(0,0,0,0.55);',
+      'cursor:crosshair;display:none;',
+      'transition:opacity 0.25s;'
+    ].join('');
+    this._mmCtx  = this._mmCanvas.getContext('2d');
+    this._mmDrag = false;
+    if (_wrap) _wrap.appendChild(this._mmCanvas);
+    const _mmDown = e => { e.stopPropagation(); this._mmDrag = true; this._mmNavigate(e); };
+    const _mmMove = e => { if (this._mmDrag) this._mmNavigate(e); };
+    const _mmUp   = () => { this._mmDrag = false; };
+    this._mmCanvas.addEventListener('mousedown',  _mmDown);
+    this._mmCanvas.addEventListener('mousemove',  _mmMove);
+    this._mmCanvas.addEventListener('mouseup',    _mmUp);
+    document.addEventListener('mouseup', _mmUp);
+
+    this._bindEvents();
+    this.fit();
+
+    this._ro = new ResizeObserver(() => this.fit());
+    this._ro.observe(canvas.parentElement || canvas);
+  }
+
+  /* ── backward-compat: single selectedId getter/setter ──────────────── */
+  get _selectedId()  { for (const id of this._selectedIds) return id; return null; }
+  set _selectedId(v) { this._selectedIds.clear(); if (v != null) this._selectedIds.add(v); }
+
+  /* ── setup ─────────────────────────────────────────────────────────── */
+
+  _bindEvents() {
+    const c = this._canvas;
+    const onDown = e => { if (!this._readOnly) this._onPointerDown(e); };
+    const onMove = e => {
+      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) {
+          this._cursorThrottle = now;
+          this._onCursorMove(vx, vy);
+        }
+      }
+    };
+    const onUp   = e => { if (!this._readOnly) this._onPointerUp(e); };
+
+    c.addEventListener('pointerdown', onDown);
+    c.addEventListener('pointermove', onMove);
+    c.addEventListener('pointerup',   onUp);
+    c.addEventListener('pointerleave', onUp);
+    c.addEventListener('pointercancel', onUp);
+    c.addEventListener('touchstart', e => e.preventDefault(), { passive: false });
+    c.addEventListener('wheel', e => this._onWheel(e), { passive: false });
+
+    this._onKeyDown  = e => this._handleKeyDown(e);
+    this._onKeyUp    = e => { if (e.key === ' ') { this._spaceDown = false; if (!this._panStartCss) this._canvas.style.cursor = ''; } };
+    this._onPaste    = e => this._onClipboardPaste(e);
+    document.addEventListener('keydown', this._onKeyDown);
+    document.addEventListener('keyup',   this._onKeyUp);
+    document.addEventListener('paste',   this._onPaste);
+  }
+
+  _handleKeyDown(e) {
+    if (this._readOnly) return;
+    const tag = document.activeElement?.tagName;
+    if (tag === 'INPUT' || tag === 'TEXTAREA' || document.activeElement?.isContentEditable) return;
+
+    if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'c') { this.copy(); }
+    if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'v') { e.preventDefault(); this.paste(); }
+    if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'z') { e.preventDefault(); this.undo(); }
+    if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'y') { e.preventDefault(); this.redo(); }
+    if (e.key === 'Delete' || e.key === 'Backspace') {
+      if (this._selectedIds.size > 0) { e.preventDefault(); this.deleteSelected(); }
+    }
+    if (e.key === 'Escape') {
+      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); }
+    if ((e.ctrlKey || e.metaKey) && e.key === '-') { e.preventDefault(); this.zoomTo(this._zoom / 1.25); }
+    if ((e.ctrlKey || e.metaKey) && e.key === '0') { e.preventDefault(); this.resetView(); }
+    // Space = pan mode
+    if (e.key === ' ' && !this._spaceDown) { e.preventDefault(); this._spaceDown = true; this._canvas.style.cursor = 'grab'; }
+  }
+
+  _isShapeTool() {
+    return ['rect','ellipse','line','arrow',
+            'triangle','diamond','hexagon','star',
+            'roundedrect','callout'].includes(this._tool);
+  }
+
+  _isObjectStroke(s) {
+    return s.tool === 'image' || s.tool === 'sticky' ||
+           s.tool === 'formula' || s.tool === 'table' || s.tool === 'coordinate' ||
+           s.tool === 'numberline' || s.tool === 'compass';
+  }
+
+  _isResizableStroke(s) {
+    return this._isObjectStroke(s) || 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;
+    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') {
+      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,
+      };
+    }
+    if (d.points && d.points.length) {
+      const xs = d.points.map(p => p[0]), ys = d.points.map(p => p[1]);
+      const bx = Math.min(...xs) - 10, by = Math.min(...ys) - 10;
+      return { x: bx, y: by, w: Math.max(...xs) - bx + 20, h: Math.max(...ys) - by + 20 };
+    }
+    return { x: 0, y: 0, w: Whiteboard.VW, h: Whiteboard.VH };
+  }
+
+  /* Move any stroke by virtual delta */
+  _moveStroke(stroke, dvx, dvy) {
+    const d = stroke.data;
+    if (this._isObjectStroke(stroke) || stroke.tool === 'text') {
+      d.x += dvx; d.y += dvy;
+    } else if (stroke.tool === 'shape' || stroke.tool === 'connector') {
+      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]);
+    }
+  }
+
+  /* Resize shape/connector by dragging a corner handle */
+  _applyResizeShape(data, ds, vx, vy) {
+    const origMinX = Math.min(ds.origX1, ds.origX2);
+    const origMaxX = Math.max(ds.origX1, ds.origX2);
+    const origMinY = Math.min(ds.origY1, ds.origY2);
+    const origMaxY = Math.max(ds.origY1, ds.origY2);
+    const h = ds.handle;
+    let newMinX = origMinX, newMaxX = origMaxX;
+    let newMinY = origMinY, newMaxY = origMaxY;
+    if (h === 'tl' || h === 'bl') newMinX = Math.min(vx, origMaxX - 10);
+    else                           newMaxX = Math.max(vx, origMinX + 10);
+    if (h === 'tl' || h === 'tr') newMinY = Math.min(vy, origMaxY - 10);
+    else                           newMaxY = Math.max(vy, origMinY + 10);
+    // Map back to x1,y1,x2,y2 preserving which slot is min/max
+    if (ds.origX1 <= ds.origX2) { data.x1 = newMinX; data.x2 = newMaxX; }
+    else                         { data.x1 = newMaxX; data.x2 = newMinX; }
+    if (ds.origY1 <= ds.origY2) { data.y1 = newMinY; data.y2 = newMaxY; }
+    else                         { data.y1 = newMaxY; data.y2 = newMinY; }
+  }
+
+  /* Snap guides: compute alignment guides for movingStroke vs. all other strokes */
+  _computeSnapGuides(movingStroke) {
+    const SNAP = 8; // virtual-pixel threshold
+    const b = this._getStrokeBBox(movingStroke);
+    const guides = [];
+    const seenX = new Set(), seenY = new Set();
+    for (const s of this._strokes) {
+      if (this._selectedIds.has(s.id)) continue;
+      const o = this._getStrokeBBox(s);
+      const xs = [o.x, o.x + o.w, o.x + o.w / 2];
+      const ys = [o.y, o.y + o.h, o.y + o.h / 2];
+      for (const sv of xs) {
+        if (seenX.has(sv)) continue;
+        const moving = [b.x, b.x + b.w, b.x + b.w / 2];
+        if (moving.some(mv => Math.abs(mv - sv) < SNAP)) { guides.push({ axis: 'x', pos: sv }); seenX.add(sv); }
+      }
+      for (const sv of ys) {
+        if (seenY.has(sv)) continue;
+        const moving = [b.y, b.y + b.h, b.y + b.h / 2];
+        if (moving.some(mv => Math.abs(mv - sv) < SNAP)) { guides.push({ axis: 'y', pos: sv }); seenY.add(sv); }
+      }
+    }
+    this._snapGuides = guides;
+  }
+
+  /* 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];
+      const b = this._getStrokeBBox(s);
+      if (vx >= b.x && vx <= b.x + b.w && vy >= b.y && vy <= b.y + b.h) return s;
+    }
+    return null;
+  }
+
+  fit() {
+    const c    = this._canvas;
+    const wrap = c.parentElement;
+    if (!wrap) return;
+    const dpr  = window.devicePixelRatio || 1;
+    const w    = wrap.clientWidth;
+    const h    = wrap.clientHeight;
+    if (w === 0 || h === 0) {
+      if (!this._fitPending) {
+        this._fitPending = true;
+        requestAnimationFrame(() => { this._fitPending = false; this.fit(); });
+      }
+      return;
+    }
+    c.width  = Math.round(w * dpr);
+    c.height = Math.round(h * dpr);
+    c.style.width  = w + 'px';
+    c.style.height = h + 'px';
+    this._ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    // size dynamic overlay canvas
+    const dc = this._dynCanvas;
+    dc.width  = c.width;
+    dc.height = c.height;
+    dc.style.width  = w + 'px';
+    dc.style.height = h + 'px';
+    this._dynCtx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this._dpr  = dpr;
+    this._cssW = w;
+    this._cssH = h;
+    this._staticDirty = true;
+    this.render();
+  }
+
+  /* ── coordinate helpers ─────────────────────────────────────────────── */
+
+  _toVirtual(cssX, cssY) {
+    const sx = (this._cssW || 1) / Whiteboard.VW;
+    const sy = (this._cssH || 1) / Whiteboard.VH;
+    return [
+      cssX / (sx * this._zoom) + this._panVX,
+      cssY / (sy * this._zoom) + this._panVY,
+    ];
+  }
+
+  _toCanvas(vx, vy) {
+    const sx = (this._cssW || 300) / Whiteboard.VW;
+    const sy = (this._cssH || 150) / Whiteboard.VH;
+    return [
+      (vx - this._panVX) * sx * this._zoom,
+      (vy - this._panVY) * sy * this._zoom,
+    ];
+  }
+
+  _pointerPos(e) {
+    const rect = this._canvas.getBoundingClientRect();
+    const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+    const clientY = e.touches ? e.touches[0].clientY : e.clientY;
+    return this._toVirtual(clientX - rect.left, clientY - rect.top);
+  }
+
+  /* ── pointer handlers ───────────────────────────────────────────────── */
+
+  _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;
+    }
+
+    const [vx, vy] = this._pointerPos(e);
+
+    // ── overlay drag (ruler/protractor) — always checked first ────────────
+    if (this._overlays.length > 0) {
+      const hit = this._hitTestOverlay(vx, vy);
+      if (hit) {
+        const ov = this._overlays[hit.idx];
+        this._selectedOverlayIdx = hit.idx;
+        this._canvas.setPointerCapture(e.pointerId);
+        if (hit.zone === 'body') {
+          this._overlayDrag = { idx: hit.idx, type: 'move',
+            startVx: vx, startVy: vy, origX: ov.x, origY: ov.y };
+        } else if (hit.zone === 'rot') {
+          this._overlayDrag = { idx: hit.idx, type: 'rotate',
+            startAngle: Math.atan2(vy - ov.y, vx - ov.x),
+            origAngle: ov.angle || 0 };
+        } else if (hit.zone === 'resize') {
+          const angle = ov.angle || 0;
+          const dx = vx - ov.x, dy = vy - ov.y;
+          if (ov.type === 'ruler') {
+            this._overlayDrag = { idx: hit.idx, type: 'resize',
+              startDot: dx * Math.cos(angle) + dy * Math.sin(angle),
+              origWidth: ov.width };
+          } else {
+            this._overlayDrag = { idx: hit.idx, type: 'resize',
+              startDist: Math.hypot(dx, dy),
+              origRadius: ov.radius || 80 };
+          }
+        }
+        if (this._onOverlayChange) this._onOverlayChange(ov);
+        return;
+      }
+    }
+
+    // ── select tool ──────────────────────────────────────────────────────
+    if (this._tool === 'select') {
+      const now = Date.now();
+      const dbl = now - this._lastClickTime < 350 &&
+                  Math.abs(vx - this._lastClickVx) < 40 &&
+                  Math.abs(vy - this._lastClickVy) < 40;
+      this._lastClickTime = now;
+      this._lastClickVx   = vx;
+      this._lastClickVy   = vy;
+
+      // Check handles on the primary selected stroke
+      const primarySel = this._selectedIds.size === 1
+        ? this._strokes.find(s => s.id === this._selectedId) : null;
+      if (primarySel) {
+        // Rotation handle (object strokes only)
+        if (this._isObjectStroke(primarySel)) {
+          const rotH = this._hitTestObjectHandle(vx, vy, primarySel);
+          if (rotH === 'rot') {
+            const b = this._getStrokeBBox(primarySel);
+            const ocx = b.x + b.w / 2, ocy = b.y + b.h / 2;
+            this._dragState = { type: 'rotate', cx: ocx, cy: ocy,
+              origRotation: primarySel.data.rotation || 0,
+              startAngle: Math.atan2(vy - ocy, vx - ocx) };
+            this._canvas.setPointerCapture(e.pointerId);
+            return;
+          }
+        }
+        if (this._isResizableStroke(primarySel)) {
+          const handle = this._hitTestObjectHandle(vx, vy, primarySel);
+          if (handle && handle !== 'rot') {
+            const d = primarySel.data;
+            if (this._isObjectStroke(primarySel)) {
+              this._dragState = { type: 'resize', handle,
+                startVx: vx, startVy: vy,
+                origX: d.x, origY: d.y, origW: d.w, origH: d.h };
+            } else {
+              this._dragState = { type: 'resize_shape', handle,
+                origX1: d.x1, origY1: d.y1, origX2: d.x2, origY2: d.y2 };
+            }
+            this._canvas.setPointerCapture(e.pointerId);
+            return;
+          }
+        }
+      }
+      // Check if click is inside any selected stroke (for move)
+      let clickedSelected = null;
+      for (const id of this._selectedIds) {
+        const s = this._strokes.find(x => x.id === id);
+        if (!s) continue;
+        const bbox = this._getStrokeBBox(s);
+        if (vx >= bbox.x && vx <= bbox.x + bbox.w && vy >= bbox.y && vy <= bbox.y + bbox.h) {
+          clickedSelected = s; break;
+        }
+      }
+      if (clickedSelected) {
+        if (dbl) { this._editObject(clickedSelected, vx, vy); return; }
+        this._dragState = { type: 'move', lastVx: vx, lastVy: vy };
+        this._canvas.setPointerCapture(e.pointerId);
+        this.render();
+        return;
+      }
+
+      const hit = this._hitTestAny(vx, vy);
+      if (hit) {
+        if (dbl) { this._editObject(hit, vx, vy); return; }
+        if (e.shiftKey) {
+          // Shift+click: toggle in selection
+          if (this._selectedIds.has(hit.id)) this._selectedIds.delete(hit.id);
+          else this._selectedIds.add(hit.id);
+        } else {
+          this._selectedIds.clear();
+          this._selectedIds.add(hit.id);
+          this._dragState = { type: 'move', lastVx: vx, lastVy: vy };
+          this._canvas.setPointerCapture(e.pointerId);
+        }
+      } else {
+        // Click on empty space: start lasso
+        if (!e.shiftKey) this._selectedIds.clear();
+        this._lassoRect = { x1: vx, y1: vy, x2: vx, y2: vy };
+        this._canvas.setPointerCapture(e.pointerId);
+      }
+      this._snapGuides = [];
+      this.render();
+      return;
+    }
+
+    // ── text tool ────────────────────────────────────────────────────────
+    if (this._tool === 'text') {
+      e.preventDefault(); // prevent browser default focus shift during pointerdown
+      this._placeTextInput([vx, vy]);
+      return;
+    }
+
+    // ── sticky tool ──────────────────────────────────────────────────────
+    if (this._tool === 'sticky') { this._createSticky(vx, vy); return; }
+
+    // ── formula tool ─────────────────────────────────────────────────────
+    if (this._tool === 'formula') { this._placeFormula(vx, vy); return; }
+
+    // ── 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)}`;
+      if (this._onStrokeProgress)
+        this._onStrokeProgress({ liveId: this._liveId, tool: 'laser', data: { points: [[vx, vy]] } });
+      this.render();
+      return;
+    }
+
+    // ── coordinate tool ───────────────────────────────────────────────────
+    if (this._tool === 'coordinate') {
+      const W = 600, H = 500;
+      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));
+      const stroke = {
+        id: this._localIdCounter--, tool: 'coordinate',
+        data: { x, y, w: W, h: H, xMin: -10, xMax: 10, yMin: -10, yMax: 10,
+                gridStep: 1, showLabels: true, functions: [] },
+      };
+      this._strokes.push(stroke);
+      this._undoStack.push(stroke.id);
+      this._redoStack = [];
+      this._selectedId = stroke.id;
+      this._staticDirty = true;
+      this.render();
+      if (this._onStrokeDone)    this._onStrokeDone(stroke);
+      if (this._onObjectCreated) this._onObjectCreated(stroke);
+      return;
+    }
+
+    // ── number line tool ─────────────────────────────────────────────────
+    if (this._tool === 'numberline') {
+      const W = 700, H = 120;
+      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));
+      const stroke = {
+        id: this._localIdCounter--, tool: 'numberline',
+        data: { x, y, w: W, h: H, min: -10, max: 10, step: 1, points: [], intervals: [] },
+      };
+      this._strokes.push(stroke);
+      this._undoStack.push(stroke.id);
+      this._redoStack = [];
+      this._selectedId = stroke.id;
+      this._staticDirty = true;
+      this.render();
+      if (this._onStrokeDone)    this._onStrokeDone(stroke);
+      if (this._onObjectCreated) this._onObjectCreated(stroke);
+      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));
+      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 },
+      };
+      this._strokes.push(stroke);
+      this._undoStack.push(stroke.id);
+      this._redoStack = [];
+      this._selectedId = stroke.id;
+      this._staticDirty = true;
+      this.render();
+      if (this._onStrokeDone)    this._onStrokeDone(stroke);
+      if (this._onObjectCreated) this._onObjectCreated(stroke);
+      return;
+    }
+
+    // ── drawing tools (pencil, eraser, highlighter, shapes, connector, table) ──
+    this._canvas.setPointerCapture(e.pointerId);
+    this._drawing = true;
+    this._liveId  = `${Date.now()}${Math.random().toString(36).slice(2, 5)}`;
+    if (this._isShapeTool() || this._tool === 'connector' || this._tool === 'table') {
+      this._shapeStart = [vx, vy];
+      this._shapeEnd   = [vx, vy];
+    } else {
+      this._curPts = [[vx, vy]];
+    }
+  }
+
+  _onPointerMove(e) {
+    // ── pan drag ─────────────────────────────────────────────────────────
+    if (this._panStartCss) {
+      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;
+      const sx = (this._cssW || 300) / Whiteboard.VW;
+      const sy = (this._cssH || 150) / Whiteboard.VH;
+      this._panVX = this._panStartPan[0] - (cx - this._panStartCss[0]) / (sx * this._zoom);
+      this._panVY = this._panStartPan[1] - (cy - this._panStartCss[1]) / (sy * this._zoom);
+      this._clampPan();
+      this._staticDirty = true;
+      this.render();
+      return;
+    }
+
+    const [vx, vy] = this._pointerPos(e);
+
+    // Broadcast cursor position to other participants (throttled to 50ms)
+    if (this._onCursorMove) {
+      const now = Date.now();
+      if (now - this._cursorThrottle > 100) {
+        this._cursorThrottle = now;
+        this._onCursorMove(vx, vy);
+      }
+    }
+
+    // ── overlay drag ──────────────────────────────────────────────────────
+    if (this._overlayDrag) {
+      const od = this._overlayDrag;
+      const ov = this._overlays[od.idx];
+      if (ov) {
+        if (od.type === 'move') {
+          ov.x = od.origX + (vx - od.startVx);
+          ov.y = od.origY + (vy - od.startVy);
+        } else if (od.type === 'rotate') {
+          const cur = Math.atan2(vy - ov.y, vx - ov.x);
+          ov.angle = od.origAngle + (cur - od.startAngle);
+        } else if (od.type === 'resize') {
+          const angle = ov.angle || 0;
+          const dx = vx - ov.x, dy = vy - ov.y;
+          if (ov.type === 'ruler') {
+            const dot = dx * Math.cos(angle) + dy * Math.sin(angle);
+            ov.width = Math.max(100, od.origWidth + (dot - od.startDot));
+          } else if (ov.type === 'protractor') {
+            ov.radius = Math.max(40, od.origRadius + (Math.hypot(dx, dy) - od.startDist));
+          }
+        }
+        if (this._onOverlayChange) this._onOverlayChange(ov);
+      }
+      this.render();
+      return;
+    }
+
+    // ── laser: update position ────────────────────────────────────────────
+    if (this._tool === 'laser' && this._drawing) {
+      this._laserPos = [vx, vy];
+      if (this._onStrokeProgress && this._liveId)
+        this._onStrokeProgress({ liveId: this._liveId, tool: 'laser', data: { points: [[vx, vy]] } });
+      this.render();
+      return;
+    }
+
+    // ── select: update cursor + drag ──────────────────────────────────────
+    if (this._tool === 'select') {
+      // Lasso update
+      if (this._lassoRect) {
+        this._lassoRect.x2 = vx;
+        this._lassoRect.y2 = vy;
+        this.render();
+        return;
+      }
+
+      if (!this._dragState) {
+        let cur = 'default';
+        if (this._selectedIds.size === 1) {
+          const sel = this._strokes.find(s => s.id === this._selectedId);
+          if (sel) {
+            if (this._isResizableStroke(sel)) {
+              const h = this._hitTestObjectHandle(vx, vy, sel);
+              if (h === 'tl' || h === 'br') cur = 'nwse-resize';
+              else if (h === 'tr' || h === 'bl') cur = 'nesw-resize';
+            }
+            if (cur === 'default') {
+              const bbox = this._getStrokeBBox(sel);
+              if (vx >= bbox.x && vx <= bbox.x + bbox.w && vy >= bbox.y && vy <= bbox.y + bbox.h)
+                cur = 'move';
+            }
+          }
+        }
+        if (cur === 'default') {
+          for (const id of this._selectedIds) {
+            const s = this._strokes.find(x => x.id === id);
+            if (!s) continue;
+            const b = this._getStrokeBBox(s);
+            if (vx >= b.x && vx <= b.x + b.w && vy >= b.y && vy <= b.y + b.h) { cur = 'move'; break; }
+          }
+        }
+        if (cur === 'default' && this._hitTestAny(vx, vy)) cur = 'move';
+        this._canvas.style.cursor = cur;
+      }
+
+      if (!this._dragState) return;
+      const ds  = this._dragState;
+      if (ds.type === 'move') {
+        const dvx = vx - ds.lastVx, dvy = vy - ds.lastVy;
+        ds.lastVx = vx; ds.lastVy = vy;
+        // Move all selected strokes
+        for (const id of this._selectedIds) {
+          const s = this._strokes.find(x => x.id === id);
+          if (s) this._moveStroke(s, dvx, dvy);
+        }
+        // Compute snap guides for primary selected stroke
+        if (this._selectedIds.size === 1) {
+          const sel = this._strokes.find(s => s.id === this._selectedId);
+          if (sel) this._computeSnapGuides(sel);
+        } else { this._snapGuides = []; }
+        this._staticDirty = true;
+      } else if (ds.type === 'resize') {
+        const sel = this._strokes.find(s => s.id === this._selectedId);
+        if (!sel) return;
+        this._applyResize(sel.data, ds, vx - ds.startVx, vy - ds.startVy);
+        this._staticDirty = true;
+      } else if (ds.type === 'resize_shape') {
+        const sel = this._strokes.find(s => s.id === this._selectedId);
+        if (!sel) return;
+        this._applyResizeShape(sel.data, ds, vx, vy);
+        this._staticDirty = true;
+      } else if (ds.type === 'rotate') {
+        const sel = this._strokes.find(s => s.id === this._selectedId);
+        if (!sel) return;
+        const angle = Math.atan2(vy - ds.cy, vx - ds.cx);
+        let rotation = ds.origRotation + (angle - ds.startAngle);
+        if (e.shiftKey) rotation = Math.round(rotation / (Math.PI / 12)) * (Math.PI / 12);
+        sel.data.rotation = rotation;
+        this._staticDirty = true;
+      }
+      this.render();
+      return;
+    }
+
+    if (!this._drawing) return;
+    if (this._isShapeTool() || this._tool === 'connector' || this._tool === 'table') {
+      this._shapeEnd = [vx, vy];
+      this.render();
+    } else {
+      this._curPts.push([vx, vy]);
+      this.render();
+    }
+    if (this._onStrokeProgress && !this._progressTimer) {
+      this._progressTimer = setTimeout(() => {
+        this._progressTimer = null;
+        this._flushProgress();
+      }, 50);
+    }
+  }
+
+  _onWheel(e) {
+    e.preventDefault();
+    const rect  = this._canvas.getBoundingClientRect();
+    const cx    = e.clientX - rect.left;
+    const cy    = e.clientY - rect.top;
+    const [vx, vy] = this._toVirtual(cx, cy);
+    const factor   = e.deltaY < 0 ? 1.15 : 1 / 1.15;
+    this.zoomTo(this._zoom * factor, vx, vy);
+  }
+
+  zoomTo(newZoom, pivotVX, pivotVY) {
+    const sx = (this._cssW || 300) / Whiteboard.VW;
+    const sy = (this._cssH || 150) / Whiteboard.VH;
+    // Pivot in CSS before zoom change
+    const pcx = pivotVX != null ? (pivotVX - this._panVX) * sx * this._zoom : (this._cssW || 300) / 2;
+    const pcy = pivotVY != null ? (pivotVY - this._panVY) * sy * this._zoom : (this._cssH || 150) / 2;
+    this._zoom = Math.max(0.25, Math.min(8, newZoom));
+    if (pivotVX != null) {
+      this._panVX = pivotVX - pcx / (sx * this._zoom);
+      this._panVY = pivotVY - pcy / (sy * this._zoom);
+    }
+    this._clampPan();
+    this._staticDirty = true;
+    this.render();
+    if (this._onZoomChange) this._onZoomChange(this._zoom);
+  }
+
+  resetView() {
+    this._zoom  = 1;
+    this._panVX = 0;
+    this._panVY = 0;
+    this._staticDirty = true;
+    this.render();
+    if (this._onZoomChange) this._onZoomChange(1);
+  }
+
+  _clampPan() {
+    const VW = Whiteboard.VW, VH = Whiteboard.VH;
+    const visW = VW / this._zoom;
+    const visH = VH / this._zoom;
+    if (visW <= VW) {
+      this._panVX = Math.max(0, Math.min(this._panVX, VW - visW));
+    } else {
+      this._panVX = (VW - visW) / 2;
+    }
+    if (visH <= VH) {
+      this._panVY = Math.max(0, Math.min(this._panVY, VH - visH));
+    } else {
+      this._panVY = (VH - visH) / 2;
+    }
+  }
+
+  _applyResize(data, ds, dvx, dvy) {
+    const h = ds.handle;
+    if (h === 'br') {
+      data.w = Math.max(20, ds.origW + dvx);
+      data.h = Math.max(20, ds.origH + dvy);
+    } else if (h === 'tr') {
+      data.w = Math.max(20, ds.origW + dvx);
+      const nh = Math.max(20, ds.origH - dvy);
+      data.y = ds.origY + (ds.origH - nh);
+      data.h = nh;
+    } else if (h === 'bl') {
+      const nw = Math.max(20, ds.origW - dvx);
+      data.x = ds.origX + (ds.origW - nw);
+      data.w = nw;
+      data.h = Math.max(20, ds.origH + dvy);
+    } else if (h === 'tl') {
+      const nw = Math.max(20, ds.origW - dvx);
+      const nh = Math.max(20, ds.origH - dvy);
+      data.x = ds.origX + (ds.origW - nw);
+      data.y = ds.origY + (ds.origH - nh);
+      data.w = nw;
+      data.h = nh;
+    }
+  }
+
+  _flushProgress() {
+    if (!this._drawing || !this._onStrokeProgress || !this._liveId) return;
+    let data;
+    if (this._isShapeTool()) {
+      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 };
+    } 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 };
+    } else {
+      if (this._curPts.length === 0) return;
+      data = { points: [...this._curPts],
+               color: this._tool === 'eraser' ? null : this._color, width: this._width };
+    }
+    this._onStrokeProgress({
+      liveId: this._liveId,
+      tool:   this._isShapeTool() ? 'shape' : this._tool,
+      data,
+    });
+  }
+
+  _onPointerUp(_e) {
+    // ── pan end ───────────────────────────────────────────────────────────
+    if (this._panStartCss) {
+      this._panStartCss = null;
+      this._panStartPan = null;
+      this._canvas.style.cursor = this._spaceDown ? 'grab' : '';
+      return;
+    }
+
+    // ── overlay drag end ──────────────────────────────────────────────────
+    if (this._overlayDrag) {
+      const ov = this._overlays[this._overlayDrag.idx];
+      this._overlayDrag = null;
+      if (ov && this._onOverlayChange) this._onOverlayChange(ov);
+      return;
+    }
+
+    // ── laser pointer: cancel preview ─────────────────────────────────────
+    if (this._tool === 'laser') {
+      this._drawing  = false;
+      this._laserPos = null;
+      const liveId   = this._liveId;
+      this._liveId   = null;
+      if (liveId && this._onStrokeProgress) this._onStrokeProgress({ liveId, cancel: true });
+      this.render();
+      return;
+    }
+
+    // ── select tool ──────────────────────────────────────────────────────
+    if (this._tool === 'select') {
+      // Finish lasso selection
+      if (this._lassoRect) {
+        const lr = this._lassoRect;
+        const lx1 = Math.min(lr.x1, lr.x2), lx2 = Math.max(lr.x1, lr.x2);
+        const ly1 = Math.min(lr.y1, lr.y2), ly2 = Math.max(lr.y1, lr.y2);
+        if (lx2 - lx1 > 4 || ly2 - ly1 > 4) {
+          for (const s of this._strokes) {
+            const b = this._getStrokeBBox(s);
+            if (b.x < lx2 && b.x + b.w > lx1 && b.y < ly2 && b.y + b.h > ly1)
+              this._selectedIds.add(s.id);
+          }
+        }
+        this._lassoRect = null;
+        this.render();
+        return;
+      }
+      if (this._dragState) {
+        this._snapGuides = [];
+        // Notify server of updated positions for all moved strokes
+        for (const id of this._selectedIds) {
+          const sel = this._strokes.find(s => s.id === id);
+          if (sel && this._onStrokeUpdated) this._onStrokeUpdated(sel);
+        }
+        this._dragState = null;
+        this.render();
+      }
+      return;
+    }
+
+    if (!this._drawing) return;
+    this._drawing = false;
+    if (this._progressTimer) { clearTimeout(this._progressTimer); this._progressTimer = null; }
+    const liveId = this._liveId;
+    this._liveId = null;
+
+    // ── table tool ────────────────────────────────────────────────────────
+    if (this._tool === 'table') {
+      const [x1, y1] = this._shapeStart;
+      const [x2, y2] = this._shapeEnd || this._shapeStart;
+      let vx = Math.min(x1, x2), vy = Math.min(y1, y2);
+      let vw = Math.abs(x2 - x1), vh = Math.abs(y2 - y1);
+      if (vw < 40) vw = 360;
+      if (vh < 40) vh = 240;
+      vx = Math.min(vx, Whiteboard.VW - vw);
+      vy = Math.min(vy, Whiteboard.VH - vh);
+      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: [['','','',''], ['','','',''], ['','','','']],
+          borderColor: '#9B5DE5',
+          bgColor:     'rgba(26,22,37,0.85)',
+          textColor:   '#e8e0f7',
+          fontSize:    14,
+        },
+      };
+      this._shapeStart = null; this._shapeEnd = null;
+      this._strokes.push(stroke);
+      this._undoStack.push(stroke.id);
+      this._redoStack = [];
+      this._selectedId = stroke.id;
+      this._staticDirty = true;
+      this.render();
+      if (this._onStrokeDone) this._onStrokeDone(stroke);
+      return;
+    }
+
+    // ── connector tool ────────────────────────────────────────────────────
+    if (this._tool === 'connector') {
+      const [x1, y1] = this._shapeStart;
+      const [x2, y2] = this._shapeEnd || this._shapeStart;
+      if (Math.abs(x2 - x1) < 5 && Math.abs(y2 - y1) < 5) {
+        if (liveId && this._onStrokeProgress) this._onStrokeProgress({ liveId, cancel: true });
+        return;
+      }
+      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 },
+      };
+      this._shapeStart = null; this._shapeEnd = null;
+      this._strokes.push(stroke);
+      this._undoStack.push(stroke.id);
+      this._redoStack = [];
+      this._staticDirty = true;
+      this.render();
+      if (this._onStrokeDone) this._onStrokeDone(stroke);
+      return;
+    }
+
+    // ── shape tools ────────────────────────────────────────────────────────
+    if (this._isShapeTool()) {
+      const [x1, y1] = this._shapeStart;
+      const [x2, y2] = this._shapeEnd || this._shapeStart;
+      if (Math.abs(x2 - x1) < 2 && Math.abs(y2 - y1) < 2) {
+        if (liveId && this._onStrokeProgress) this._onStrokeProgress({ liveId, cancel: true });
+        return;
+      }
+      const stroke = {
+        id: this._localIdCounter--, tool: 'shape',
+        data: { shape: this._tool, x1, y1, x2, y2,
+                color: this._color, width: this._width, fill: this._fill,
+                lineStyle: this._lineStyle, opacity: this._opacity },
+      };
+      this._shapeStart = null; this._shapeEnd = null;
+      this._strokes.push(stroke);
+      this._undoStack.push(stroke.id);
+      this._redoStack = [];
+      this._staticDirty = true;
+      this.render();
+      if (this._onStrokeDone) this._onStrokeDone(stroke);
+      return;
+    }
+
+    // ── pencil / eraser ────────────────────────────────────────────────────
+    if (this._curPts.length === 0) {
+      if (liveId && this._onStrokeProgress) this._onStrokeProgress({ liveId, cancel: true });
+      return;
+    }
+    const stroke = {
+      id: this._localIdCounter--, tool: this._tool,
+      data: { points: this._curPts,
+              color: this._tool === 'eraser' ? null : this._color, width: this._width,
+              lineStyle: this._lineStyle, opacity: this._opacity },
+    };
+    this._curPts = [];
+    this._strokes.push(stroke);
+    this._undoStack.push(stroke.id);
+    this._redoStack = [];
+    this._staticDirty = true;
+    this.render();
+    if (this._onStrokeDone) this._onStrokeDone(stroke);
+  }
+
+  /* ── text tool ──────────────────────────────────────────────────────── */
+
+  _placeTextInput([vx, vy]) {
+    const wrap = this._canvas.parentElement;
+    if (!wrap) return;
+    this._removeTextInput();
+    const cw = this._cssW || 300;
+    const ch = this._cssH || 150;
+    const [cx, cy] = this._toCanvas(vx, vy);
+
+    // Position textarea accounting for canvas offset within the parent wrapper
+    const canvasRect = this._canvas.getBoundingClientRect();
+    const wrapRect   = wrap.getBoundingClientRect();
+    const offX = canvasRect.left - wrapRect.left;
+    const offY = canvasRect.top  - wrapRect.top;
+
+    const fs   = Math.max(14, Math.round((22 / 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 ta = document.createElement('textarea');
+    ta.placeholder = 'Введите текст… (Enter — вставить, Esc — отмена)';
+    ta.rows = 3;
+    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};
+      background:rgba(12,8,24,0.92);
+      border:1.5px solid rgba(155,93,229,0.7);
+      border-radius:8px; outline:none; resize:none;
+      padding:6px 10px; caret-color:${this._color};
+      z-index:20; line-height:1.45;
+      box-shadow:0 4px 24px rgba(0,0,0,0.6);
+    `;
+    wrap.appendChild(ta);
+    this._textInput = ta;
+
+    const commit = () => {
+      const text = ta.value.trim();
+      this._removeTextInput();
+      if (!text) return;
+      const stroke = {
+        id: this._localIdCounter--, tool: 'text',
+        data: { text, x: vx, y: vy, fontSize: 22, color: this._color },
+      };
+      this._strokes.push(stroke);
+      this._undoStack.push(stroke.id);
+      this._redoStack = [];
+      this._staticDirty = true;
+      this.render();
+      if (this._onStrokeDone)    this._onStrokeDone(stroke);
+      if (this._onObjectCreated) this._onObjectCreated(stroke);
+    };
+
+    ta.addEventListener('keydown', ev => {
+      ev.stopPropagation(); // don't leak to canvas key handler
+      if (ev.key === 'Escape') { ev.preventDefault(); this._removeTextInput(); }
+      // Enter without Shift commits; Shift+Enter inserts newline
+      if (ev.key === 'Enter' && !ev.shiftKey) { ev.preventDefault(); commit(); }
+    });
+
+    // Outside-click detection: use capture-phase pointerdown on document.
+    // Registered via setTimeout to skip the current pointerdown that spawned this textarea.
+    const onDocDown = e => {
+      if (ta.contains(e.target) || e.target === ta) return;
+      this._textInputDocHandler = null;
+      document.removeEventListener('pointerdown', onDocDown, true);
+      commit();
+    };
+    this._textInputDocHandler = onDocDown;
+    setTimeout(() => {
+      if (ta.isConnected) document.addEventListener('pointerdown', onDocDown, true);
+    }, 0);
+
+    // Focus after the current event cycle so pointer events on the canvas
+    // can't steal focus back immediately.
+    requestAnimationFrame(() => { if (ta.isConnected) ta.focus(); });
+  }
+
+  _removeTextInput() {
+    if (this._textInputDocHandler) {
+      document.removeEventListener('pointerdown', this._textInputDocHandler, true);
+      this._textInputDocHandler = null;
+    }
+    if (this._textInput) { this._textInput.remove(); this._textInput = null; }
+  }
+
+  /* ── sticky tool ────────────────────────────────────────────────────── */
+
+  _createSticky(vx, vy) {
+    const W = 220, H = 200;
+    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 stroke = {
+      id: this._localIdCounter--, tool: 'sticky',
+      data: { x, y, w: W, h: H, text: '', bgColor, textColor: '#1a1a2e', fontSize: 16 },
+    };
+    this._strokes.push(stroke);
+    this._undoStack.push(stroke.id);
+    this._redoStack = [];
+    this._selectedId = stroke.id;
+    this._staticDirty = true;
+    this.render();
+    if (this._onStrokeDone)    this._onStrokeDone(stroke);
+    if (this._onObjectCreated) this._onObjectCreated(stroke);
+    this._editSticky(stroke);
+  }
+
+  _editSticky(stroke) {
+    const wrap = this._canvas.parentElement;
+    if (!wrap) return;
+    this._removeObjectInput();
+    const d = stroke.data;
+    const [cx, cy] = this._toCanvas(d.x, d.y);
+    const cw = (d.w / Whiteboard.VW) * this._cssW;
+    const ch = (d.h / Whiteboard.VH) * this._cssH;
+    const pad = 10;
+    const fs  = Math.round((d.fontSize / Whiteboard.VH) * this._cssH);
+    const ta  = document.createElement('textarea');
+    ta.value = d.text || '';
+    ta.style.cssText = `
+      position:absolute; left:${cx + pad}px; top:${cy + pad}px;
+      width:${cw - 2 * pad}px; height:${ch - 2 * pad}px;
+      font-size:${fs}px; font-family:'Manrope',sans-serif;
+      color:${d.textColor}; background:transparent;
+      border:none; outline:none; resize:none;
+      padding:0; line-height:1.4; caret-color:${d.textColor}; z-index:10;
+    `;
+    wrap.style.position = 'relative';
+    wrap.appendChild(ta);
+    ta.focus();
+    this._objectInput = { el: ta, strokeId: stroke.id };
+
+    const commit = () => {
+      const text = ta.value;
+      this._removeObjectInput();
+      const s = this._strokes.find(x => x.id === stroke.id);
+      if (!s) return;
+      s.data.text = text;
+      this._staticDirty = true;
+      this.render();
+      if (this._onStrokeUpdated) this._onStrokeUpdated(s);
+    };
+    ta.addEventListener('keydown', ev => { if (ev.key === 'Escape') commit(); });
+    ta.addEventListener('blur', () => setTimeout(commit, 80));
+  }
+
+  /* ── formula tool ───────────────────────────────────────────────────── */
+
+  _placeFormula(vx, vy) {
+    // If an external formula editor is wired up, delegate to it
+    if (this._onFormulaInsert) {
+      this._onFormulaInsert(vx, vy);
+      return;
+    }
+    // Fallback: inline input (minimal, shown when no modal is wired)
+    const wrap = this._canvas.parentElement;
+    if (!wrap) return;
+    this._removeObjectInput();
+    const [cx, cy] = this._toCanvas(vx, vy);
+    const inp = document.createElement('input');
+    inp.type = 'text';
+    inp.placeholder = 'LaTeX, напр: \\frac{a}{b}';
+    inp.style.cssText = `
+      position:absolute; left:${Math.min(cx, (this._cssW||300)-280)}px; top:${cy}px;
+      font-size:14px; font-family:'Manrope',sans-serif;
+      color:#e8e0f7; background:rgba(12,8,24,0.95);
+      border:1.5px solid #9B5DE5; border-radius:6px;
+      outline:none; width:270px; padding:7px 10px;
+      caret-color:#9B5DE5; z-index:20;
+      box-shadow:0 4px 20px rgba(0,0,0,0.55);
+    `;
+    wrap.appendChild(inp);
+    inp.focus();
+    this._objectInput = { el: inp, strokeId: null };
+
+    const commit = () => {
+      const latex = inp.value.trim();
+      this._removeObjectInput();
+      if (!latex) return;
+      this.insertFormula(vx, vy, latex);
+    };
+    inp.addEventListener('keydown', ev => {
+      if (ev.key === 'Enter')  { ev.preventDefault(); commit(); }
+      if (ev.key === 'Escape') { ev.stopPropagation(); this._removeObjectInput(); }
+    });
+    inp.addEventListener('blur', () => setTimeout(commit, 100));
+  }
+
+  _editFormula(stroke) {
+    // If external editor is wired, use it for edit too
+    if (this._onFormulaInsert) {
+      const d = stroke.data;
+      // We pass the stroke ID so the modal can update instead of insert
+      this._editingFormulaStroke = stroke;
+      this._onFormulaInsert(d.x + d.w / 2, d.y + d.h / 2, d.latex);
+      return;
+    }
+    // Fallback: inline input
+    const wrap = this._canvas.parentElement;
+    if (!wrap) return;
+    this._removeObjectInput();
+    const d = stroke.data;
+    const [cx, cy] = this._toCanvas(d.x, d.y);
+    const inp = document.createElement('input');
+    inp.type = 'text';
+    inp.value = d.latex || '';
+    inp.placeholder = 'LaTeX формула';
+    inp.style.cssText = `
+      position:absolute; left:${Math.min(cx, (this._cssW||300)-280)}px; top:${cy}px;
+      font-size:14px; font-family:'Manrope',sans-serif;
+      color:#e8e0f7; background:rgba(12,8,24,0.95);
+      border:1.5px solid #9B5DE5; border-radius:6px;
+      outline:none; width:270px; padding:7px 10px;
+      caret-color:#9B5DE5; z-index:20;
+      box-shadow:0 4px 20px rgba(0,0,0,0.55);
+    `;
+    wrap.appendChild(inp);
+    inp.focus();
+    inp.select();
+    this._objectInput = { el: inp, strokeId: stroke.id };
+
+    const commit = () => {
+      const latex = inp.value.trim();
+      this._removeObjectInput();
+      const s = this._strokes.find(x => x.id === stroke.id);
+      if (!s || !latex) return;
+      s.data.latex = latex;
+      s._formulaImg = null;
+      this._staticDirty = true;
+      this.render();
+      if (this._onStrokeUpdated) this._onStrokeUpdated(s);
+    };
+    inp.addEventListener('keydown', ev => {
+      if (ev.key === 'Enter')  { ev.preventDefault(); commit(); }
+      if (ev.key === 'Escape') { ev.stopPropagation(); this._removeObjectInput(); }
+    });
+    inp.addEventListener('blur', () => setTimeout(commit, 100));
+  }
+
+  /* ── table tool ─────────────────────────────────────────────────────── */
+
+  _getTableCell(stroke, vx, vy) {
+    const d = stroke.data;
+    if (vx < d.x || vx > d.x + d.w || vy < d.y || vy > d.y + d.h) return null;
+    return {
+      row: Math.min(Math.floor((vy - d.y) / (d.h / d.rows)), d.rows - 1),
+      col: Math.min(Math.floor((vx - d.x) / (d.w / d.cols)), d.cols - 1),
+    };
+  }
+
+  _editTableCell(stroke, row, col) {
+    const wrap = this._canvas.parentElement;
+    if (!wrap) return;
+    this._removeObjectInput();
+    const d = stroke.data;
+    const cellVW = d.w / d.cols;
+    const cellVH = d.h / d.rows;
+    const [cx, cy] = this._toCanvas(d.x + col * cellVW, d.y + row * cellVH);
+    const cw = (cellVW / Whiteboard.VW) * this._cssW;
+    const ch = (cellVH / Whiteboard.VH) * this._cssH;
+    const pad = 4;
+    const fs  = Math.round(((d.fontSize || 14) / Whiteboard.VH) * this._cssH);
+    const inp = document.createElement('input');
+    inp.type = 'text';
+    inp.value = (d.cells[row] && d.cells[row][col]) || '';
+    inp.style.cssText = `
+      position:absolute; left:${cx + pad}px; top:${cy + pad}px;
+      width:${cw - 2 * pad}px; height:${ch - 2 * pad}px;
+      font-size:${fs}px; font-family:'Manrope',sans-serif;
+      color:${d.textColor || '#e8e0f7'};
+      background:rgba(155,93,229,0.12);
+      border:1.5px solid #9B5DE5; border-radius:3px;
+      outline:none; padding:0 4px; z-index:10; box-sizing:border-box;
+    `;
+    wrap.style.position = 'relative';
+    wrap.appendChild(inp);
+    inp.focus();
+    inp.select();
+    this._objectInput = { el: inp, strokeId: stroke.id };
+
+    const commit = () => {
+      const val = inp.value;
+      this._removeObjectInput();
+      const s = this._strokes.find(x => x.id === stroke.id);
+      if (!s) return;
+      if (!s.data.cells[row]) s.data.cells[row] = [];
+      s.data.cells[row][col] = val;
+      this._staticDirty = true;
+      this.render();
+      if (this._onStrokeUpdated) this._onStrokeUpdated(s);
+    };
+    inp.addEventListener('keydown', ev => {
+      if (ev.key === 'Enter' || ev.key === 'Tab') { ev.preventDefault(); commit(); }
+      if (ev.key === 'Escape') { this._removeObjectInput(); }
+    });
+    inp.addEventListener('blur', () => setTimeout(commit, 80));
+  }
+
+  _removeObjectInput() {
+    if (this._objectInput) { this._objectInput.el.remove(); this._objectInput = null; }
+  }
+
+  /* ── edit dispatch ──────────────────────────────────────────────────── */
+
+  _editObject(stroke, vx, vy) {
+    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 === 'sticky')  { this._editSticky(stroke); return; }
+    if (stroke.tool === 'formula') { this._editFormula(stroke); return; }
+    if (stroke.tool === 'table') {
+      const cell = this._getTableCell(stroke, vx, vy);
+      if (cell) this._editTableCell(stroke, cell.row, cell.col);
+      return;
+    }
+    if (stroke.tool === 'text') {
+      const d = stroke.data;
+      this._strokes = this._strokes.filter(s => s.id !== stroke.id);
+      const i = this._undoStack.indexOf(stroke.id);
+      if (i !== -1) this._undoStack.splice(i, 1);
+      this._selectedId = null;
+      this._staticDirty = true;
+      this.render();
+      this._placeTextInput([d.x, d.y]);
+      if (this._textInput) this._textInput.value = d.text || '';
+    }
+    if (stroke.tool === 'image') {
+      // images are not editable inline
+    }
+  }
+
+  /* ── live stroke API (remote preview) ──────────────────────────────── */
+
+  setLiveStroke(liveId, tool, data, userName, color) {
+    this._liveStrokes.set(liveId, { tool, data, userName, color });
+    this.render();
+  }
+
+  removeLiveStroke(liveId) {
+    if (this._liveStrokes.delete(liveId)) this.render();
+  }
+
+  clearAllLiveStrokes() {
+    if (this._liveStrokes.size === 0) return;
+    this._liveStrokes.clear();
+    this.render();
+  }
+
+  /* ── render ─────────────────────────────────────────────────────────── */
+
+  /* ── chalkboard background ──────────────────────────────────────────── */
+
+  _getBgNoise() {
+    if (this._bgNoise) return this._bgNoise;
+    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';
+      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));
+      }
+      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();
+      }
+      this._bgNoise = this._ctx.createPattern(oc, 'repeat');
+    } catch { this._bgNoise = false; }
+    return this._bgNoise;
+  }
+
+  _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 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)');
+    ctx.fillStyle = vg;
+    ctx.fillRect(0, 0, W, H);
+  }
+
+  _renderTemplate(ctx) {
+    const W = this._cssW || 300;
+    const H = this._cssH || 150;
+    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.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.beginPath();
+      for (let y = stepY; y < H; y += stepY) { ctx.moveTo(0, y); ctx.lineTo(W, y); }
+      ctx.stroke();
+    } else if (this._template === 'dots') {
+      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)';
+      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();
+        }
+    } else if (this._template === 'coordinate') {
+      const ox = W / 2, oy = H / 2;
+      const stepX = (40 / Whiteboard.VW) * W;
+      const stepY = (40 / Whiteboard.VH) * H;
+      // Light grid
+      ctx.strokeStyle = 'rgba(255,255,255,0.06)'; 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.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)';
+      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;
+      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); }
+      for (let y = oy + stepY; y < H - ar; y += stepY)   { ctx.moveTo(ox-tk, y); ctx.lineTo(ox+tk, y); }
+      for (let y = oy - stepY; y > 0; y -= stepY)         { ctx.moveTo(ox-tk, y); ctx.lineTo(ox+tk, y); }
+      ctx.stroke();
+    }
+    ctx.restore();
+  }
+
+  render() {
+    if (this._staticDirty) { this._renderStatic(); this._staticDirty = false; }
+    this._renderDynamic();
+    this._renderMinimap();
+  }
+
+  _renderStatic() {
+    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);
+  }
+
+  _renderDynamic() {
+    const ctx = this._dynCtx;
+    const W = this._cssW || 300, H = this._cssH || 150;
+    ctx.clearRect(0, 0, W, H);
+
+    // Remote live strokes (other users drawing in real-time)
+    // Name/cursor dot is handled by DOM cursors (_showRemoteCursor) — no duplication here
+    for (const [, ls] of this._liveStrokes) {
+      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);
+      ctx.save();
+      ctx.shadowColor = '#ff2222'; ctx.shadowBlur = 15;
+      ctx.fillStyle   = '#ff4444';
+      ctx.beginPath(); ctx.arc(lcx, lcy, 6, 0, Math.PI * 2); ctx.fill();
+      ctx.restore();
+    }
+
+    // Selection overlays (all selected strokes)
+    for (const id of this._selectedIds) {
+      const sel = this._strokes.find(s => s.id === id);
+      if (sel) {
+        this._renderObjectSelection(ctx, sel);
+        // Auto-measurements for shapes
+        if (this._showMeasurements && sel.tool === 'shape') this.renderMeasurements(ctx, sel);
+      }
+    }
+
+    // Lasso rubber-band rectangle
+    if (this._lassoRect) {
+      const lr = this._lassoRect;
+      const [cx1, cy1] = this._toCanvas(Math.min(lr.x1, lr.x2), Math.min(lr.y1, lr.y2));
+      const [cx2, cy2] = this._toCanvas(Math.max(lr.x1, lr.x2), Math.max(lr.y1, lr.y2));
+      ctx.save();
+      ctx.strokeStyle = '#9B5DE5'; ctx.lineWidth = 1.5; ctx.setLineDash([4, 3]);
+      ctx.strokeRect(cx1, cy1, cx2 - cx1, cy2 - cy1);
+      ctx.fillStyle = 'rgba(155,93,229,0.06)';
+      ctx.fillRect(cx1, cy1, cx2 - cx1, cy2 - cy1);
+      ctx.setLineDash([]); ctx.restore();
+    }
+
+    // Snap guides (cyan lines)
+    if (this._snapGuides.length > 0) {
+      ctx.save();
+      ctx.strokeStyle = '#06D6E0'; ctx.lineWidth = 1; ctx.globalAlpha = 0.7;
+      ctx.setLineDash([4, 4]);
+      for (const g of this._snapGuides) {
+        const [gx, gy] = this._toCanvas(g.axis === 'x' ? g.pos : 0, g.axis === 'y' ? g.pos : 0);
+        ctx.beginPath();
+        if (g.axis === 'x') { ctx.moveTo(gx, 0); ctx.lineTo(gx, H); }
+        else                { ctx.moveTo(0, gy); ctx.lineTo(W, gy); }
+        ctx.stroke();
+      }
+      ctx.setLineDash([]); ctx.restore();
+    }
+
+    // Live drawing preview (current user)
+    if (this._drawing) {
+      if ((this._isShapeTool() || this._tool === 'connector') && this._shapeStart && this._shapeEnd) {
+        if (this._tool === 'connector') {
+          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,
+          }});
+        } 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,
+          }});
+        }
+      } else if (this._tool === 'table' && this._shapeStart && this._shapeEnd) {
+        const [x1, y1] = this._shapeStart, [x2, y2] = this._shapeEnd;
+        const [cx1, cy1] = this._toCanvas(Math.min(x1, x2), Math.min(y1, y2));
+        const [cx2, cy2] = this._toCanvas(Math.max(x1, x2), Math.max(y1, y2));
+        ctx.save();
+        ctx.strokeStyle = '#9B5DE5'; ctx.lineWidth = 1.5; ctx.setLineDash([4, 3]);
+        ctx.strokeRect(cx1, cy1, cx2 - cx1, cy2 - cy1);
+        ctx.setLineDash([]); ctx.restore();
+      } else if (!this._isShapeTool() && this._tool !== 'connector' && this._tool !== 'table' && this._curPts.length > 0) {
+        this._renderStroke(ctx, { tool: this._tool,
+          data: { points: this._curPts, color: this._color, width: this._width } });
+      }
+    }
+
+    // Ruler / Protractor overlays
+    if (this._overlays.length > 0) this._renderOverlays(ctx);
+  }
+
+  _renderStroke(ctx, stroke) {
+    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; }
+    if (stroke.tool === 'sticky')      { this._renderSticky(ctx, stroke);      return; }
+    if (stroke.tool === 'formula')     { this._renderFormula(ctx, stroke);     return; }
+    if (stroke.tool === 'table')       { this._renderTable(ctx, stroke);       return; }
+    if (stroke.tool === 'connector')   { this._renderConnector(ctx, stroke);   return; }
+    if (stroke.tool === 'highlighter') { this._renderHighlighter(ctx, stroke); return; }
+    if (stroke.tool === 'laser')       { this._renderLaser(ctx, stroke);       return; }
+    if (stroke.tool === 'coordinate')  { this._renderCoordinate(ctx, stroke);  return; }
+    if (stroke.tool === 'numberline')  { this._renderNumberLine(ctx, stroke);  return; }
+    if (stroke.tool === 'compass')     { this._renderCompass(ctx, stroke);     return; }
+
+    // pencil / eraser
+    const pts = stroke.data.points;
+    if (!pts || pts.length === 0) return;
+
+    ctx.save();
+    if (stroke.tool === 'eraser') {
+      ctx.globalCompositeOperation = 'destination-out';
+      ctx.strokeStyle = 'rgba(0,0,0,1)';
+      ctx.fillStyle   = 'rgba(0,0,0,1)';
+    } else {
+      ctx.globalCompositeOperation = 'source-over';
+      ctx.strokeStyle = stroke.data.color || '#ffffff';
+      ctx.fillStyle   = stroke.data.color || '#ffffff';
+      // Chalk effect: soft powdery edges + slight transparency, modulated by opacity
+      ctx.globalAlpha = (stroke.data.opacity ?? 1.0) * 0.88;
+      ctx.shadowColor = stroke.data.color || '#ffffff';
+      ctx.shadowBlur  = 1.4;
+    }
+    ctx.lineWidth = (stroke.data.width / Whiteboard.VW) * (this._cssW || 300);
+    ctx.lineCap   = 'round';
+    ctx.lineJoin  = 'round';
+
+    ctx.beginPath();
+    const [x0, y0] = this._toCanvas(pts[0][0], pts[0][1]);
+    ctx.moveTo(x0, y0);
+
+    if (pts.length === 1) {
+      ctx.arc(x0, y0, ctx.lineWidth / 2, 0, Math.PI * 2);
+      ctx.fill();
+    } else if (pts.length === 2) {
+      const [x1, y1] = this._toCanvas(pts[1][0], pts[1][1]);
+      ctx.lineTo(x1, y1); ctx.stroke();
+    } else {
+      // Catmull-Rom spline for smooth curves
+      for (let i = 0; i < pts.length - 1; i++) {
+        const i0 = Math.max(0, i - 1), i3 = Math.min(pts.length - 1, i + 2);
+        const p0 = this._toCanvas(pts[i0][0], pts[i0][1]);
+        const p1 = this._toCanvas(pts[i][0],  pts[i][1]);
+        const p2 = this._toCanvas(pts[i + 1][0], pts[i + 1][1]);
+        const p3 = this._toCanvas(pts[i3][0],    pts[i3][1]);
+        const cp1x = p1[0] + (p2[0] - p0[0]) / 6;
+        const cp1y = p1[1] + (p2[1] - p0[1]) / 6;
+        const cp2x = p2[0] - (p3[0] - p1[0]) / 6;
+        const cp2y = p2[1] - (p3[1] - p1[1]) / 6;
+        ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, p2[0], p2[1]);
+      }
+      ctx.stroke();
+    }
+    ctx.restore();
+  }
+
+  _renderShape(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 lw = Math.max(1, (d.width / Whiteboard.VW) * (this._cssW || 300));
+
+    ctx.save();
+    ctx.globalCompositeOperation = 'source-over';
+    ctx.globalAlpha = d.opacity ?? 1.0;
+    ctx.strokeStyle = d.color || '#ffffff';
+    ctx.fillStyle   = d.color || '#ffffff';
+    ctx.lineWidth   = lw;
+    ctx.lineCap     = 'round';
+    ctx.lineJoin    = 'round';
+    const dash = d.lineStyle === 'dashed' ? [lw * 3, lw * 2]
+               : d.lineStyle === 'dotted' ? [lw, lw * 2.5] : [];
+    ctx.setLineDash(dash);
+
+    const minX = Math.min(cx1, cx2), minY = Math.min(cy1, cy2);
+    const W    = Math.abs(cx2 - cx1),  H = Math.abs(cy2 - cy1);
+    const midX = (cx1 + cx2) / 2,     midY = (cy1 + cy2) / 2;
+
+    ctx.beginPath();
+    switch (d.shape) {
+      case 'rect':
+        ctx.rect(minX, minY, W, H);
+        if (d.fill) ctx.fill(); ctx.stroke();
+        break;
+
+      case 'ellipse': {
+        ctx.ellipse(midX, midY, W / 2 || 1, H / 2 || 1, 0, 0, Math.PI * 2);
+        if (d.fill) ctx.fill(); ctx.stroke();
+        break;
+      }
+
+      case 'line':
+        ctx.moveTo(cx1, cy1); ctx.lineTo(cx2, cy2); ctx.stroke();
+        break;
+
+      case 'triangle':
+        ctx.moveTo(midX, minY);
+        ctx.lineTo(Math.max(cx1, cx2), Math.max(cy1, cy2));
+        ctx.lineTo(Math.min(cx1, cx2), Math.max(cy1, cy2));
+        ctx.closePath();
+        if (d.fill) ctx.fill(); ctx.stroke();
+        break;
+
+      case 'diamond':
+        ctx.moveTo(midX, minY);
+        ctx.lineTo(Math.max(cx1, cx2), midY);
+        ctx.lineTo(midX, Math.max(cy1, cy2));
+        ctx.lineTo(Math.min(cx1, cx2), midY);
+        ctx.closePath();
+        if (d.fill) ctx.fill(); ctx.stroke();
+        break;
+
+      case 'hexagon': {
+        const angles = [0, 60, 120, 180, 240, 300].map(a => a * Math.PI / 180);
+        ctx.moveTo(midX + W / 2 * Math.cos(angles[0]), midY + H / 2 * Math.sin(angles[0]));
+        for (let i = 1; i < 6; i++)
+          ctx.lineTo(midX + W / 2 * Math.cos(angles[i]), midY + H / 2 * Math.sin(angles[i]));
+        ctx.closePath();
+        if (d.fill) ctx.fill(); ctx.stroke();
+        break;
+      }
+
+      case 'star': {
+        const outerR = Math.min(W, H) / 2;
+        const innerR = outerR * 0.4;
+        for (let i = 0; i < 10; i++) {
+          const r     = i % 2 === 0 ? outerR : innerR;
+          const angle = (i * Math.PI / 5) - Math.PI / 2;
+          const sx = midX + r * Math.cos(angle);
+          const sy = midY + r * Math.sin(angle);
+          i === 0 ? ctx.moveTo(sx, sy) : ctx.lineTo(sx, sy);
+        }
+        ctx.closePath();
+        if (d.fill) ctx.fill(); ctx.stroke();
+        break;
+      }
+
+      case 'roundedrect': {
+        const r = Math.min(W, H) * 0.15;
+        ctx.roundRect(minX, minY, W, H, r);
+        if (d.fill) ctx.fill(); ctx.stroke();
+        break;
+      }
+
+      case 'callout': {
+        const r    = Math.min(W, H) * 0.12;
+        const tailH = H * 0.22;
+        const tailW = W * 0.16;
+        const tailX = minX + W * 0.18;
+        const boxH  = H - tailH;
+        ctx.roundRect(minX, minY, W, boxH, r);
+        if (d.fill) ctx.fill(); ctx.stroke();
+        ctx.beginPath();
+        ctx.moveTo(tailX, minY + boxH);
+        ctx.lineTo(tailX + tailW, minY + boxH);
+        ctx.lineTo(tailX + tailW * 0.35, minY + H);
+        ctx.closePath();
+        if (d.fill) ctx.fill(); else ctx.stroke();
+        break;
+      }
+
+      case 'arrow': {
+        // Block arrow from cx1,cy1 to cx2,cy2
+        const dx = cx2 - cx1, dy = cy2 - cy1;
+        const len = Math.sqrt(dx * dx + dy * dy) || 1;
+        const ux = dx / len, uy = dy / len;
+        const bodyW = Math.max(4, H * 0.3);
+        const headH = Math.min(W * 0.35, H * 0.85);
+        const mx = cx2 - ux * headH, my = cy2 - uy * headH;
+        const px = -uy * bodyW, py = ux * bodyW;
+        const hpx = -uy * H * 0.5, hpy = ux * H * 0.5;
+        ctx.moveTo(cx1 + px, cy1 + py);
+        ctx.lineTo(mx + px, my + py);
+        ctx.lineTo(mx + hpx, my + hpy);
+        ctx.lineTo(cx2, cy2);
+        ctx.lineTo(mx - hpx, my - hpy);
+        ctx.lineTo(mx - px, my - py);
+        ctx.lineTo(cx1 - px, cy1 - py);
+        ctx.closePath();
+        if (d.fill) ctx.fill(); else { ctx.fill(); }
+        break;
+      }
+    }
+    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 lw = Math.max(1, (d.width / Whiteboard.VW) * (this._cssW || 300));
+
+    const dx = cx2 - cx1, dy = cy2 - cy1;
+    const len = Math.sqrt(dx * dx + dy * dy) || 1;
+    const ux = dx / len, uy = dy / len;
+    const headL = Math.max(8, Math.min(18, len * 0.22));
+    const headW = headL * 0.55;
+
+    ctx.save();
+    ctx.globalCompositeOperation = 'source-over';
+    ctx.globalAlpha = d.opacity ?? 1.0;
+    ctx.strokeStyle = d.color || '#ffffff';
+    ctx.fillStyle   = d.color || '#ffffff';
+    ctx.lineWidth   = lw;
+    ctx.lineCap     = 'round';
+    const dash = d.lineStyle === 'dashed' ? [lw * 3, lw * 2]
+               : d.lineStyle === 'dotted' ? [lw, lw * 2.5] : [];
+    ctx.setLineDash(dash);
+
+    // Line
+    ctx.beginPath();
+    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.beginPath();
+      ctx.moveTo(cx2, cy2);
+      ctx.lineTo(cx2 - ux * headL + uy * headW, cy2 - uy * headL - ux * headW);
+      ctx.lineTo(cx2 - ux * headL - uy * headW, cy2 - uy * headL + ux * headW);
+      ctx.closePath();
+      ctx.fill();
+    }
+
+    // Start arrowhead
+    if (d.arrowStart) {
+      ctx.beginPath();
+      ctx.moveTo(cx1, cy1);
+      ctx.lineTo(cx1 + ux * headL + uy * headW, cy1 + uy * headL - ux * headW);
+      ctx.lineTo(cx1 + ux * headL - uy * headW, cy1 + uy * headL + ux * headW);
+      ctx.closePath();
+      ctx.fill();
+    }
+    ctx.restore();
+  }
+
+  _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 [fx, fy] = this._toCanvas(d.points[0][0], d.points[0][1]);
+    ctx.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);
+    }
+    ctx.stroke();
+    ctx.restore();
+  }
+
+  _renderLaser(ctx, stroke) {
+    const d = stroke.data;
+    if (!d.points || d.points.length === 0) return;
+    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.fillStyle   = '#ff4444';
+    ctx.beginPath();
+    ctx.arc(cx, cy, 6, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.restore();
+  }
+
+  _renderText(ctx, stroke) {
+    const d = stroke.data;
+    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));
+    ctx.save();
+    ctx.globalCompositeOperation = 'source-over';
+    ctx.fillStyle = d.color || '#ffffff';
+    ctx.font = `${fontSize}px 'Manrope', sans-serif`;
+    ctx.textBaseline = 'top';
+    // chalk effect on text too
+    ctx.shadowColor = d.color || '#ffffff';
+    ctx.shadowBlur  = 1.2;
+    const lines = d.text.split('\n');
+    const lh = fontSize * 1.45;
+    lines.forEach((line, i) => ctx.fillText(line, cx, cy + i * lh));
+    ctx.restore();
+  }
+
+  _renderImage(ctx, stroke) {
+    const d = stroke.data;
+    if (!d.src) return;
+    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);
+    if (!stroke._img) {
+      stroke._img = new Image();
+      stroke._img.onload = () => { this._staticDirty = true; this.render(); };
+      stroke._img.src = d.src;
+    }
+    if (stroke._img.complete && stroke._img.naturalWidth > 0) {
+      ctx.save();
+      ctx.globalCompositeOperation = 'source-over';
+      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);
+      ctx.restore();
+    }
+  }
+
+  _renderSticky(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);
+
+    ctx.save();
+    ctx.globalCompositeOperation = 'source-over';
+    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); }
+
+    // Shadow
+    ctx.shadowColor = 'rgba(0,0,0,0.35)';
+    ctx.shadowBlur  = 8;
+    ctx.shadowOffsetX = 3;
+    ctx.shadowOffsetY = 4;
+
+    // Body
+    ctx.fillStyle = d.bgColor || '#FFE066';
+    ctx.beginPath();
+    ctx.roundRect(cx, cy, cw, ch, 3);
+    ctx.fill();
+    ctx.shadowColor = 'transparent';
+
+    // Folded corner (top-right)
+    const fold = Math.min(cw, ch) * 0.14;
+    ctx.fillStyle = 'rgba(0,0,0,0.18)';
+    ctx.beginPath();
+    ctx.moveTo(cx + cw - fold, cy);
+    ctx.lineTo(cx + cw, cy + fold);
+    ctx.lineTo(cx + cw, cy);
+    ctx.closePath();
+    ctx.fill();
+
+    ctx.fillStyle = this._darkenHex(d.bgColor || '#FFE066', 25);
+    ctx.beginPath();
+    ctx.moveTo(cx + cw - fold, cy);
+    ctx.lineTo(cx + cw - fold, cy + fold);
+    ctx.lineTo(cx + cw, cy + fold);
+    ctx.closePath();
+    ctx.fill();
+
+    // Text
+    if (d.text) {
+      const fs   = Math.round((d.fontSize / Whiteboard.VH) * (this._cssH || 150));
+      const pad  = Math.max(8, cw * 0.08);
+      ctx.fillStyle    = d.textColor || '#1a1a2e';
+      ctx.font         = `${fs}px 'Manrope', sans-serif`;
+      ctx.textBaseline = 'top';
+      const maxW  = cw - 2 * pad;
+      const lines = this._wrapText(ctx, d.text, maxW);
+      let ty = cy + pad;
+      const lineH = fs * 1.4;
+      for (const line of lines) {
+        if (ty + lineH > cy + ch - pad * 0.5) break;
+        ctx.fillText(line, cx + pad, ty);
+        ty += lineH;
+      }
+    }
+    ctx.restore();
+  }
+
+  _darkenHex(hex, amount) {
+    try {
+      const r = Math.max(0, parseInt(hex.slice(1, 3), 16) - amount);
+      const g = Math.max(0, parseInt(hex.slice(3, 5), 16) - amount);
+      const b = Math.max(0, parseInt(hex.slice(5, 7), 16) - amount);
+      return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+    } catch { return hex; }
+  }
+
+  _wrapText(ctx, text, maxW) {
+    const lines = [];
+    for (const para of text.split('\n')) {
+      const words = para.split(' ');
+      let cur = '';
+      for (const w of words) {
+        const test = cur ? cur + ' ' + w : w;
+        if (ctx.measureText(test).width > maxW && cur) {
+          lines.push(cur); cur = w;
+        } else { cur = test; }
+      }
+      lines.push(cur);
+    }
+    return lines;
+  }
+
+  _renderFormula(ctx, stroke) {
+    const d = stroke.data;
+    if (!d.latex) return;
+    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);
+
+    ctx.save();
+    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.fillStyle = 'rgba(26,22,37,0.75)';
+    ctx.beginPath();
+    ctx.roundRect(cx, cy, cw, ch, 6);
+    ctx.fill();
+
+    const fi = stroke._formulaImg;
+    if (fi === null || fi === undefined) {
+      // Not started yet — kick off async render and show placeholder text
+      this._renderFormulaAsync(stroke, cw, ch);
+      this._drawFormulaPlaceholder(ctx, d, cx, cy, cw, ch);
+    } else if (fi === 'pending') {
+      // CSS / image loading in progress
+      this._drawFormulaPlaceholder(ctx, d, cx, cy, cw, ch);
+    } else if (fi === false) {
+      // Render failed — show raw LaTeX so user knows what's there
+      this._drawFormulaPlaceholder(ctx, d, cx, cy, cw, ch);
+    } else if (fi.complete && fi.naturalWidth > 0) {
+      ctx.drawImage(fi, cx, cy, cw, ch);
+    } else {
+      this._drawFormulaPlaceholder(ctx, d, cx, cy, cw, ch);
+    }
+    ctx.restore();
+  }
+
+  _drawFormulaPlaceholder(ctx, d, cx, cy, cw, ch) {
+    const fs = Math.max(11, Math.round((13 / Whiteboard.VH) * (this._cssH || 150)));
+    ctx.fillStyle = 'rgba(255,255,255,0.45)';
+    ctx.font = `italic ${fs}px 'Manrope',sans-serif`;
+    ctx.textBaseline = 'middle';
+    // Clip text to box so it doesn't overflow
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(cx + 4, cy, cw - 8, ch);
+    ctx.clip();
+    ctx.fillText(d.latex, cx + 8, cy + ch / 2);
+    ctx.restore();
+  }
+
+  _renderFormulaAsync(stroke, cw, ch) {
+    stroke._formulaImg = 'pending';
+    if (!window.katex) { stroke._formulaImg = false; return; }
+    _loadKatexCss(css => {
+      // Stroke may have been removed while CSS was loading
+      if (!this._strokes.includes(stroke)) { stroke._formulaImg = false; return; }
+      try {
+        const html  = window.katex.renderToString(stroke.data.latex, {
+          throwOnError: false, displayMode: true, output: 'html',
+        });
+        const color = stroke.data.color || '#e8e0f7';
+        const vfs   = stroke.data.fontSize || 32;
+        // Render at 3× for crisp, PowerPoint-quality formulas
+        const scale = 3;
+        const W  = Math.ceil(cw * scale);
+        const H  = Math.ceil(ch * scale);
+        const fs = Math.max(18, Math.round((vfs / Whiteboard.VH) * (this._cssH || 150) * 2.8 * scale));
+        const svgStr = [
+          `<svg xmlns="http://www.w3.org/2000/svg" width="${W}" height="${H}">`,
+          `<foreignObject width="100%" height="100%">`,
+          `<div xmlns="http://www.w3.org/1999/xhtml">`,
+          `<style>`,
+          css,
+          `.katex-display{margin:0!important}.katex{font-size:${fs}px!important}`,
+          `</style>`,
+          `<div style="display:flex;align-items:center;justify-content:center;`,
+          `width:${W}px;height:${H}px;padding:${Math.ceil(6*scale)}px;`,
+          `box-sizing:border-box;color:${color};overflow:hidden;">`,
+          html,
+          `</div></div></foreignObject></svg>`,
+        ].join('');
+        const blob = new Blob([svgStr], { type: 'image/svg+xml;charset=utf-8' });
+        const url  = URL.createObjectURL(blob);
+        const img  = new Image();
+        img.onload = () => {
+          URL.revokeObjectURL(url);
+          stroke._formulaImg = img;
+          this._staticDirty = true;
+          this.render();
+        };
+        img.onerror = () => {
+          URL.revokeObjectURL(url);
+          stroke._formulaImg = false; // use false (not null) to avoid re-render loop
+          this._staticDirty = true;
+          this.render();
+        };
+        img.src = url;
+      } catch { stroke._formulaImg = false; }
+    });
+  }
+
+  _renderTable(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 cellW  = cw / d.cols;
+    const cellH  = ch / d.rows;
+    const fs     = Math.round(((d.fontSize || 14) / Whiteboard.VH) * (this._cssH || 150));
+    const border = d.borderColor || '#9B5DE5';
+    const bg     = d.bgColor     || 'rgba(26,22,37,0.85)';
+    const tc     = d.textColor   || '#e8e0f7';
+
+    ctx.save();
+    ctx.globalCompositeOperation = 'source-over';
+    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); }
+
+    // Background
+    ctx.fillStyle = bg;
+    ctx.beginPath();
+    ctx.roundRect(cx, cy, cw, ch, 4);
+    ctx.fill();
+
+    // Grid
+    ctx.strokeStyle = border;
+    ctx.lineWidth   = 1;
+    ctx.beginPath();
+    ctx.roundRect(cx, cy, cw, ch, 4);
+    ctx.stroke();
+
+    for (let c = 1; c < d.cols; c++) {
+      const x = cx + c * cellW;
+      ctx.beginPath();
+      ctx.moveTo(x, cy); ctx.lineTo(x, cy + ch); ctx.stroke();
+    }
+    for (let r = 1; r < d.rows; r++) {
+      const y = cy + r * cellH;
+      ctx.beginPath();
+      ctx.moveTo(cx, y); ctx.lineTo(cx + cw, y); ctx.stroke();
+    }
+
+    // Cell text
+    ctx.fillStyle    = tc;
+    ctx.font         = `${fs}px 'Manrope', sans-serif`;
+    ctx.textBaseline = 'middle';
+    const pad = Math.max(4, cellW * 0.06);
+
+    for (let r = 0; r < d.rows; r++) {
+      for (let c = 0; c < d.cols; c++) {
+        const text = (d.cells && d.cells[r] && d.cells[r][c]) || '';
+        if (!text) continue;
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(cx + c * cellW + 1, cy + r * cellH + 1, cellW - 2, cellH - 2);
+        ctx.clip();
+        ctx.fillText(text, cx + c * cellW + pad, cy + r * cellH + cellH / 2);
+        ctx.restore();
+      }
+    }
+    ctx.restore();
+  }
+
+  /* ── select tool helpers ─────────────────────────────────────────────── */
+
+  _hitTestObject(vx, vy) {
+    for (let i = this._strokes.length - 1; i >= 0; i--) {
+      const s = this._strokes[i];
+      if (!this._isObjectStroke(s)) continue;
+      const d = s.data;
+      if (vx >= d.x && vx <= d.x + d.w && vy >= d.y && vy <= d.y + d.h) return s;
+    }
+    return null;
+  }
+
+  _hitTestObjectHandle(vx, vy, stroke) {
+    const r = (12 / (this._cssW || 300)) * Whiteboard.VW;
+    const b = this._getStrokeBBox(stroke);
+    // Rotation handle (object strokes only): above top-center
+    if (this._isObjectStroke(stroke)) {
+      const rotVX = b.x + b.w / 2;
+      const rotVY = b.y - (28 / (this._cssH || 150)) * Whiteboard.VH;
+      if (Math.abs(vx - rotVX) < r && Math.abs(vy - rotVY) < r) return 'rot';
+    }
+    const corners = {
+      tl: [b.x,       b.y],
+      tr: [b.x + b.w, b.y],
+      bl: [b.x,       b.y + b.h],
+      br: [b.x + b.w, b.y + b.h],
+    };
+    for (const [name, [hx, hy]] of Object.entries(corners)) {
+      if (Math.abs(vx - hx) < r && Math.abs(vy - hy) < r) return name;
+    }
+    return null;
+  }
+
+  _renderObjectSelection(ctx, stroke) {
+    const b  = this._getStrokeBBox(stroke);
+    const [cx, cy] = this._toCanvas(b.x, b.y);
+    const cw = (b.w / Whiteboard.VW) * (this._cssW || 300);
+    const ch = (b.h / Whiteboard.VH) * (this._cssH || 150);
+    const HS = 8;
+
+    ctx.save();
+    ctx.strokeStyle = '#06D6E0';
+    ctx.lineWidth   = 1.5;
+    ctx.setLineDash([5, 3]);
+    ctx.strokeRect(cx, cy, cw, ch);
+    ctx.setLineDash([]);
+
+    // Resize handles only for resizable strokes
+    if (this._isResizableStroke(stroke)) {
+      for (const [hx, hy] of [[cx, cy], [cx + cw, cy], [cx, cy + ch], [cx + cw, cy + ch]]) {
+        ctx.fillStyle   = '#ffffff';
+        ctx.strokeStyle = '#06D6E0';
+        ctx.lineWidth   = 1.5;
+        ctx.fillRect(hx - HS / 2, hy - HS / 2, HS, HS);
+        ctx.strokeRect(hx - HS / 2, hy - HS / 2, HS, HS);
+      }
+    }
+    // Rotation handle (object strokes only)
+    if (this._isObjectStroke(stroke)) {
+      const rotCx = cx + cw / 2;
+      const rotCy = cy - 28;
+      ctx.strokeStyle = '#9B5DE5';
+      ctx.lineWidth   = 1.5;
+      ctx.setLineDash([3, 3]);
+      ctx.beginPath(); ctx.moveTo(cx + cw / 2, cy); ctx.lineTo(rotCx, rotCy); ctx.stroke();
+      ctx.setLineDash([]);
+      ctx.fillStyle   = '#ffffff';
+      ctx.strokeStyle = '#9B5DE5';
+      ctx.beginPath(); ctx.arc(rotCx, rotCy, 6, 0, Math.PI * 2);
+      ctx.fill(); ctx.stroke();
+    }
+    ctx.restore();
+  }
+
+  /* ── public API ─────────────────────────────────────────────────────── */
+
+  setTool(name) {
+    this._removeTextInput();
+    this._removeObjectInput();
+    this._drawing    = false;
+    this._shapeStart = null;
+    if (name !== 'select') {
+      this._selectedId = null;
+      this._dragState  = null;
+      this._canvas.style.cursor = '';
+    }
+    this._tool = name;
+  }
+
+  setColor(hex)       {
+    this._color = hex;
+    if (this._textInput) this._textInput.style.color = hex;
+  }
+  setWidth(px)        { this._width     = px; }
+  setFill(v)          { this._fill      = v; }
+  setReadOnly(v)      { this._readOnly  = v; }
+  setLineStyle(style) { this._lineStyle = style; }
+  setOpacity(v)       { this._opacity   = Math.max(0.05, Math.min(1, v)); }
+  setTemplate(name)   { this._template  = name || 'blank'; this._staticDirty = true; this.render(); }
+  setPageNum(n)       { this._pageNum   = n; }
+
+  exportPNG() {
+    const off = document.createElement('canvas');
+    off.width = Whiteboard.VW; off.height = Whiteboard.VH;
+    const ctx = off.getContext('2d');
+    const [sw, sh, sz, spx, spy] = [this._cssW, this._cssH, this._zoom, this._panVX, this._panVY];
+    this._cssW = Whiteboard.VW; this._cssH = Whiteboard.VH;
+    this._zoom = 1; this._panVX = 0; this._panVY = 0;
+    this._renderBg(ctx);
+    if (this._template && this._template !== 'blank') this._renderTemplate(ctx);
+    for (const s of this._strokes) this._renderStroke(ctx, s);
+    this._cssW = sw; this._cssH = sh; this._zoom = sz; this._panVX = spx; this._panVY = spy;
+    off.toBlob(blob => {
+      const a = document.createElement('a');
+      a.href = URL.createObjectURL(blob);
+      a.download = `whiteboard-p${this._pageNum}.png`;
+      document.body.appendChild(a); a.click(); document.body.removeChild(a);
+      setTimeout(() => URL.revokeObjectURL(a.href), 3000);
+    }, 'image/png');
+  }
+
+  _renderMinimap() {
+    if (!this._mmCanvas) return;
+    const visible = this._zoom > 1.04;
+    this._mmCanvas.style.display = visible ? 'block' : 'none';
+    if (!visible) return;
+
+    const mm = this._mmCtx;
+    const MW = 192, MH = 108;
+    mm.clearRect(0, 0, MW, MH);
+
+    // Blit the static layer (full board content) scaled to minimap size
+    mm.drawImage(this._canvas, 0, 0, MW, MH);
+
+    // Darken areas outside the viewport with a subtle vignette
+    const vpW = MW / this._zoom;
+    const vpH = MH / this._zoom;
+    const vpX = (this._panVX / Whiteboard.VW) * MW;
+    const vpY = (this._panVY / Whiteboard.VH) * MH;
+
+    // Dark overlay on non-viewport areas
+    mm.fillStyle = 'rgba(0,0,0,0.42)';
+    mm.fillRect(0,   0,   MW,       vpY);             // top strip
+    mm.fillRect(0,   vpY + vpH, MW, MH - vpY - vpH); // bottom strip
+    mm.fillRect(0,   vpY,  vpX,     vpH);             // left strip
+    mm.fillRect(vpX + vpW, vpY, MW - vpX - vpW, vpH); // right strip
+
+    // Viewport border
+    mm.strokeStyle = 'rgba(155,93,229,0.95)';
+    mm.lineWidth   = 1.5;
+    mm.strokeRect(vpX, vpY, vpW, vpH);
+
+    // Current position crosshair at viewport center
+    const cx = vpX + vpW / 2, cy = vpY + vpH / 2;
+    mm.strokeStyle = 'rgba(155,93,229,0.55)';
+    mm.lineWidth   = 0.7;
+    mm.beginPath(); mm.moveTo(cx - 5, cy); mm.lineTo(cx + 5, cy); mm.stroke();
+    mm.beginPath(); mm.moveTo(cx, cy - 5); mm.lineTo(cx, cy + 5); mm.stroke();
+  }
+
+  _mmNavigate(e) {
+    const rect = this._mmCanvas.getBoundingClientRect();
+    const mx = (e.clientX - rect.left) * (192 / rect.width);
+    const my = (e.clientY - rect.top)  * (108 / rect.height);
+    // Center the viewport on the clicked virtual position
+    this._panVX = (mx / 192) * Whiteboard.VW - Whiteboard.VW / (2 * this._zoom);
+    this._panVY = (my / 108) * Whiteboard.VH - Whiteboard.VH / (2 * this._zoom);
+    this._clampPan();
+    this._staticDirty = true;
+    this.render();
+  }
+
+  renderThumbnail(targetCanvas) {
+    const ctx = targetCanvas.getContext('2d');
+    const [sw, sh, sz, spx, spy] = [this._cssW, this._cssH, this._zoom, this._panVX, this._panVY];
+    this._cssW = targetCanvas.width; this._cssH = targetCanvas.height;
+    this._zoom = 1; this._panVX = 0; this._panVY = 0;
+    this._renderBg(ctx);
+    if (this._template && this._template !== 'blank') this._renderTemplate(ctx);
+    for (const s of this._strokes) this._renderStroke(ctx, s);
+    this._cssW = sw; this._cssH = sh; this._zoom = sz; this._panVX = spx; this._panVY = spy;
+  }
+
+  updateOpacity(v) {
+    if (this._selectedId == null) return;
+    const sel = this._strokes.find(s => s.id === this._selectedId);
+    if (!sel) return;
+    sel.data.opacity = Math.max(0.05, Math.min(1, v));
+    this._staticDirty = true;
+    this.render();
+    if (this._onStrokeUpdated) this._onStrokeUpdated(sel);
+  }
+
+  /* ── formula insert (called by external modal) ──────────────────────── */
+
+  insertFormula(vx, vy, latex, fontSize = 32) {
+    if (!latex) return;
+    this._editingFormulaStroke = null; // clear edit-mode flag
+    const W = Math.round(460 * (fontSize / 32));
+    const H = Math.round(160 * (fontSize / 32));
+    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));
+    const stroke = {
+      id: this._localIdCounter--, tool: 'formula',
+      data: { x, y, w: W, h: H, latex, fontSize, color: this._color },
+    };
+    this._strokes.push(stroke);
+    this._undoStack.push(stroke.id);
+    this._redoStack = [];
+    this._selectedId = stroke.id;
+    this._staticDirty = true;
+    this.render();
+    if (this._onStrokeDone)    this._onStrokeDone(stroke);
+    if (this._onObjectCreated) this._onObjectCreated(stroke);
+  }
+
+  /* Called by external modal when editing an existing formula */
+  updateFormula(stroke, latex, fontSize) {
+    if (!stroke || !latex) return;
+    stroke.data.latex    = latex;
+    stroke.data.fontSize = fontSize || stroke.data.fontSize;
+    stroke._formulaImg   = null;
+    this._editingFormulaStroke = null;
+    this._staticDirty = true;
+    this.render();
+    if (this._onStrokeUpdated) this._onStrokeUpdated(stroke);
+  }
+
+  /* ── Clipboard paste (system clipboard: images & text) ──────────────── */
+
+  _onClipboardPaste(e) {
+    if (this._readOnly) return;
+    // Don't intercept paste when a real input/textarea is focused
+    const tag = document.activeElement?.tagName;
+    if (tag === 'INPUT' || tag === 'TEXTAREA' || document.activeElement?.isContentEditable) return;
+
+    const items = e.clipboardData?.items;
+    if (!items) return;
+
+    // Prefer image over text
+    for (const item of Array.from(items)) {
+      if (item.type.startsWith('image/')) {
+        e.preventDefault();
+        const blob = item.getAsFile();
+        if (blob) this._pasteImageBlob(blob);
+        return;
+      }
+    }
+    for (const item of Array.from(items)) {
+      if (item.type === 'text/plain') {
+        e.preventDefault();
+        item.getAsString(text => {
+          if (!text.trim()) return;
+          // Place pasted text at upper-left area of the board
+          const stroke = {
+            id: this._localIdCounter--, tool: 'text',
+            data: { text: text.trim(), x: 80, y: 80, fontSize: 22, color: this._color },
+          };
+          this._strokes.push(stroke);
+          this._undoStack.push(stroke.id);
+          this._redoStack = [];
+          this._selectedId = stroke.id;
+          this._staticDirty = true;
+          this.render();
+          if (this._onStrokeDone) this._onStrokeDone(stroke);
+        });
+        return;
+      }
+    }
+  }
+
+  _pasteImageBlob(blob) {
+    const maxPx = 800;
+    const reader = new FileReader();
+    reader.onload = ev => {
+      const img = new Image();
+      img.onload = () => {
+        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.8);
+        // Virtual dimensions: fit into ~800×600 vp, maintain aspect ratio
+        const maxVW = 800, maxVH = 600;
+        let vw = maxVW, vh = Math.round(maxVW * ph / pw);
+        if (vh > maxVH) { vh = maxVH; vw = Math.round(maxVH * pw / ph); }
+        const vx = Math.round((Whiteboard.VW - vw) / 2);
+        const vy = Math.round((Whiteboard.VH - vh) / 2);
+        const stroke = {
+          id: this._localIdCounter--, tool: 'image',
+          data: { src, x: vx, y: vy, w: vw, h: vh },
+        };
+        this._strokes.push(stroke);
+        this._undoStack.push(stroke.id);
+        this._redoStack = [];
+        this._selectedId = stroke.id;
+        this._staticDirty = true;
+        this.render();
+        if (this._onStrokeDone)    this._onStrokeDone(stroke);
+        if (this._onObjectCreated) this._onObjectCreated(stroke);
+      };
+      img.src = ev.target.result;
+    };
+    reader.readAsDataURL(blob);
+  }
+
+  /* ── copy / paste / delete / z-order ─────────────────────────────────── */
+
+  copy() {
+    if (this._selectedId == null) return;
+    const sel = this._strokes.find(s => s.id === this._selectedId);
+    if (!sel) return;
+    this._clipboard = { tool: sel.tool, data: JSON.parse(JSON.stringify(sel.data)) };
+  }
+
+  paste() {
+    if (!this._clipboard) return;
+    const data = JSON.parse(JSON.stringify(this._clipboard.data));
+    const OFF = 30;
+    if (data.x1 != null) {
+      // shape / connector
+      data.x1 += OFF; data.y1 += OFF; data.x2 += OFF; data.y2 += OFF;
+    } else if (data.points) {
+      // pencil / highlighter
+      data.points = data.points.map(([px, py]) => [px + OFF, py + OFF]);
+    } else if (data.x != null && data.w != null) {
+      // object stroke (image/sticky/formula/table/text with w)
+      data.x = Math.min(data.x + OFF, Whiteboard.VW - (data.w || 10));
+      data.y = Math.min(data.y + OFF, Whiteboard.VH - (data.h || 10));
+    } else if (data.x != null) {
+      // text (no w)
+      data.x += OFF; data.y += OFF;
+    }
+    const stroke = { id: this._localIdCounter--, tool: this._clipboard.tool, data };
+    this._strokes.push(stroke);
+    this._undoStack.push(stroke.id);
+    this._redoStack = [];
+    this._selectedId = stroke.id;
+    this._staticDirty = true;
+    this.render();
+    if (this._onStrokeDone) this._onStrokeDone(stroke);
+  }
+
+  deleteSelected() {
+    if (this._selectedIds.size === 0) return;
+    const ids = [...this._selectedIds];
+    this._selectedIds.clear();
+    this._dragState = null;
+    this._strokes = this._strokes.filter(s => !ids.includes(s.id));
+    for (const id of ids) {
+      const ui = this._undoStack.indexOf(id);
+      if (ui !== -1) this._undoStack.splice(ui, 1);
+    }
+    this._staticDirty = true;
+    this.render();
+    for (const id of ids) { if (this._onStrokeUndo) this._onStrokeUndo(id); }
+  }
+
+  bringToFront() {
+    if (this._selectedIds.size === 0) return;
+    const toMove = this._strokes.filter(s => this._selectedIds.has(s.id));
+    this._strokes = this._strokes.filter(s => !this._selectedIds.has(s.id));
+    this._strokes.push(...toMove);
+    this._staticDirty = true;
+    this.render();
+    for (const s of toMove) { if (this._onStrokeUpdated) this._onStrokeUpdated(s); }
+  }
+
+  sendToBack() {
+    if (this._selectedIds.size === 0) return;
+    const toMove = this._strokes.filter(s => this._selectedIds.has(s.id));
+    this._strokes = this._strokes.filter(s => !this._selectedIds.has(s.id));
+    this._strokes.unshift(...toMove);
+    this._staticDirty = true;
+    this.render();
+    for (const s of toMove) { if (this._onStrokeUpdated) this._onStrokeUpdated(s); }
+  }
+
+  /* ── strokes management ─────────────────────────────────────────────── */
+
+  loadStrokes(strokes) {
+    this._strokes = (strokes || []).map(s => this._normalise(s));
+    this._liveStrokes.clear();
+    this._staticDirty = true;
+    this.render();
+  }
+
+  /* Returns strokes not yet confirmed by server (negative IDs = locally drawn). */
+  getLocalStrokes() {
+    return this._strokes.filter(s => s.id < 0);
+  }
+
+  addStrokes(strokes) {
+    let changed = false;
+    for (const s of strokes) {
+      if (this._strokes.some(x => x.id === s.id)) continue;
+      this._strokes.push(this._normalise(s));
+      changed = true;
+    }
+    if (changed) { this._staticDirty = true; this.render(); }
+  }
+
+  _normalise(s) {
+    return {
+      id:   s.id,
+      tool: s.tool,
+      data: typeof s.data === 'string' ? JSON.parse(s.data) : s.data,
+    };
+  }
+
+  removeStroke(id) {
+    this._strokes = this._strokes.filter(s => s.id !== id);
+    if (this._selectedIds.has(id)) { this._selectedIds.delete(id); this._dragState = null; }
+    this._staticDirty = true;
+    this.render();
+  }
+
+  updateStroke(id, data) {
+    const s = this._strokes.find(x => x.id === id);
+    if (!s) return;
+    s.data = typeof data === 'string' ? JSON.parse(data) : { ...data };
+    s._img        = null;
+    s._formulaImg = null;
+    this._staticDirty = true;
+    this.render();
+  }
+
+  confirmStroke(localId, serverId) {
+    const s = this._strokes.find(x => x.id === localId);
+    if (s) {
+      s.id = serverId;
+      const before = this._strokes.length;
+      this._strokes = this._strokes.filter(x => x === s || x.id !== serverId);
+      if (this._strokes.length !== before) { this._staticDirty = true; this.render(); }
+    }
+    const i = this._undoStack.indexOf(localId);
+    if (i !== -1) this._undoStack[i] = serverId;
+  }
+
+  undo() {
+    if (this._undoStack.length === 0) return;
+    const id = this._undoStack.pop();
+    const stroke = this._strokes.find(s => s.id === id);
+    this._strokes = this._strokes.filter(s => s.id !== id);
+    if (stroke) this._redoStack.push(stroke);
+    this._staticDirty = true;
+    this.render();
+    if (this._onStrokeUndo) this._onStrokeUndo(id);
+  }
+
+  redo() {
+    if (this._redoStack.length === 0) return;
+    const stroke = this._redoStack.pop();
+    this._strokes.push(stroke);
+    this._undoStack.push(stroke.id);
+    this._staticDirty = true;
+    this.render();
+    if (this._onStrokeDone) this._onStrokeDone(stroke);
+  }
+
+  clearPage() {
+    this._strokes    = [];
+    this._undoStack  = [];
+    this._redoStack  = [];
+    this._curPts     = [];
+    this._drawing    = false;
+    this._shapeStart = null;
+    this._selectedIds.clear();
+    this._dragState  = null;
+    this._lassoRect  = null;
+    this._snapGuides = [];
+    this._liveStrokes.clear();
+    this._removeTextInput();
+    this._removeObjectInput();
+    this._staticDirty = true;
+    this.render();
+  }
+
+  destroy() {
+    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);
+    if (this._dynCanvas?.parentElement) this._dynCanvas.parentElement.removeChild(this._dynCanvas);
+    if (this._mmCanvas?.parentElement)  this._mmCanvas.parentElement.removeChild(this._mmCanvas);
+  }
+
+  /* ── Phase 5: Coordinate system stroke ─────────────────────────────── */
+
+  _renderCoordinate(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 xMin = d.xMin ?? -10, xMax = d.xMax ?? 10;
+    const yMin = d.yMin ?? -10, yMax = d.yMax ?? 10;
+    const step = d.gridStep || 1;
+
+    ctx.save();
+    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); }
+    // Background
+    ctx.fillStyle   = 'rgba(18,13,30,0.88)';
+    ctx.strokeStyle = 'rgba(155,93,229,0.35)';
+    ctx.lineWidth   = 1;
+    ctx.beginPath();
+    if (ctx.roundRect) ctx.roundRect(cx, cy, cw, ch, 6);
+    else ctx.rect(cx, cy, cw, ch);
+    ctx.fill(); ctx.stroke();
+
+    ctx.beginPath(); ctx.rect(cx, cy, cw, ch); ctx.clip();
+
+    const xRange = xMax - xMin, yRange = yMax - yMin;
+    const scaleX = cw / xRange, scaleY = ch / yRange;
+    // Origin in canvas coords (0,0 of math space)
+    const ox = cx + (-xMin) * scaleX;
+    const oy = cy + yMax * scaleY;
+
+    // Grid lines
+    ctx.strokeStyle = 'rgba(255,255,255,0.05)';
+    ctx.lineWidth   = 0.5;
+    for (let v = Math.ceil(xMin / step) * step; v <= xMax; v += step) {
+      const px = cx + (v - xMin) * scaleX;
+      ctx.beginPath(); ctx.moveTo(px, cy); ctx.lineTo(px, cy + ch); ctx.stroke();
+    }
+    for (let v = Math.ceil(yMin / step) * step; v <= yMax; v += step) {
+      const py = cy + (yMax - v) * scaleY;
+      ctx.beginPath(); ctx.moveTo(cx, py); ctx.lineTo(cx + cw, py); ctx.stroke();
+    }
+
+    // Axes
+    ctx.strokeStyle = 'rgba(255,255,255,0.55)';
+    ctx.lineWidth   = 1.5;
+    // X axis
+    ctx.beginPath(); ctx.moveTo(cx, oy); ctx.lineTo(cx + cw, oy); ctx.stroke();
+    // Y axis
+    ctx.beginPath(); ctx.moveTo(ox, cy); ctx.lineTo(ox, cy + ch); ctx.stroke();
+
+    // Tick marks + labels
+    if (d.showLabels !== false) {
+      ctx.fillStyle   = 'rgba(255,255,255,0.45)';
+      ctx.font        = `${Math.max(8, Math.round(9 * cw / 400))}px Manrope,sans-serif`;
+      ctx.textAlign   = 'center';
+      ctx.textBaseline = 'top';
+      ctx.strokeStyle = 'rgba(255,255,255,0.3)';
+      ctx.lineWidth   = 0.8;
+      const tickH = 4;
+      for (let v = Math.ceil(xMin / step) * step; v <= xMax; v += step) {
+        if (Math.abs(v) < 1e-9) continue;
+        const px = cx + (v - xMin) * scaleX;
+        ctx.beginPath(); ctx.moveTo(px, oy - tickH); ctx.lineTo(px, oy + tickH); ctx.stroke();
+        ctx.fillText(v, px, oy + tickH + 1);
+      }
+      ctx.textAlign    = 'right';
+      ctx.textBaseline = 'middle';
+      for (let v = Math.ceil(yMin / step) * step; v <= yMax; v += step) {
+        if (Math.abs(v) < 1e-9) continue;
+        const py = cy + (yMax - v) * scaleY;
+        ctx.beginPath(); ctx.moveTo(ox - tickH, py); ctx.lineTo(ox + tickH, py); ctx.stroke();
+        ctx.fillText(v, ox - tickH - 2, py);
+      }
+      ctx.fillText('0', ox - tickH - 2, oy + tickH + 1);
+    }
+
+    // Arrow heads on axes
+    const aw = 6, ah = 4;
+    ctx.fillStyle = 'rgba(255,255,255,0.55)';
+    // X arrow right
+    const xEnd = cx + cw;
+    ctx.beginPath(); ctx.moveTo(xEnd, oy); ctx.lineTo(xEnd - aw, oy - ah); ctx.lineTo(xEnd - aw, oy + ah); ctx.closePath(); ctx.fill();
+    // Y arrow up
+    ctx.beginPath(); ctx.moveTo(ox, cy); ctx.lineTo(ox - ah, cy + aw); ctx.lineTo(ox + ah, cy + aw); ctx.closePath(); ctx.fill();
+
+    // Plot functions
+    for (const fn of (d.functions || [])) {
+      ctx.strokeStyle = fn.color || '#06D6E0';
+      ctx.lineWidth   = 1.5;
+      ctx.globalAlpha = 0.9;
+      ctx.beginPath();
+      let started = false;
+      for (let px = cx; px <= cx + cw; px += 0.8) {
+        const mathX = xMin + (px - cx) / scaleX;
+        let mathY;
+        try { mathY = this._evalMath(fn.expr, mathX); } catch { continue; }
+        if (!isFinite(mathY)) { started = false; continue; }
+        const py = oy - mathY * scaleY;
+        if (!started) { ctx.moveTo(px, py); started = true; } else ctx.lineTo(px, py);
+      }
+      ctx.stroke();
+      ctx.globalAlpha = 1;
+    }
+
+    ctx.restore();
+  }
+
+  /* Simple recursive descent math expression evaluator */
+  _evalMath(expr, x) {
+    const tokens = this._mathTokenise(expr.replace(/\s+/g, ''));
+    let pos = 0;
+    const peek = () => tokens[pos];
+    const consume = () => tokens[pos++];
+    const num = () => {
+      const t = peek();
+      if (t === '(') { consume(); const v = addSub(); consume(/* ')' */); return v; }
+      if (t === '-') { consume(); return -num(); }
+      if (t === 'x') { consume(); return x; }
+      if (/^[a-z]+$/.test(t)) {
+        consume();
+        const arg = peek() === '(' ? (consume(), (() => { const v = addSub(); consume(); return v; })()) : num();
+        const fns = { sin: Math.sin, cos: Math.cos, tan: Math.tan, sqrt: Math.sqrt,
+                      abs: Math.abs, log: Math.log, exp: Math.exp, asin: Math.asin,
+                      acos: Math.acos, atan: Math.atan, floor: Math.floor, ceil: Math.ceil };
+        if (fns[t]) return fns[t](arg);
+        if (t === 'pi') { pos--; return Math.PI; }
+        if (t === 'e')  { pos--; return Math.E; }
+        return NaN;
+      }
+      consume(); return parseFloat(t);
+    };
+    const pow = () => { let v = num(); while (peek() === '^') { consume(); v = Math.pow(v, num()); } return v; };
+    const mulDiv = () => {
+      let v = pow();
+      while (peek() === '*' || peek() === '/') {
+        const op = consume();
+        v = op === '*' ? v * pow() : v / pow();
+      }
+      return v;
+    };
+    const addSub = () => {
+      let v = mulDiv();
+      while (peek() === '+' || peek() === '-') {
+        const op = consume();
+        v = op === '+' ? v + mulDiv() : v - mulDiv();
+      }
+      return v;
+    };
+    return addSub();
+  }
+
+  _mathTokenise(expr) {
+    const tokens = [];
+    let i = 0;
+    const consts = { pi: Math.PI, e: Math.E };
+    while (i < expr.length) {
+      if (/\d|\./.test(expr[i])) {
+        let n = '';
+        while (i < expr.length && /[\d.]/.test(expr[i])) n += expr[i++];
+        tokens.push(n);
+      } else if (/[a-z]/i.test(expr[i])) {
+        let w = '';
+        while (i < expr.length && /[a-z]/i.test(expr[i])) w += expr[i++].toLowerCase();
+        if (w === 'pi' || w === 'e') tokens.push(parseFloat(consts[w]).toString());
+        else tokens.push(w);
+      } else {
+        tokens.push(expr[i++]);
+      }
+    }
+    tokens.push(null); // EOF sentinel
+    return tokens;
+  }
+
+  /* ── Phase 5: Ruler/Protractor overlays ────────────────────────────── */
+  // Overlays are rendered on the dynamic layer and are not saved to DB.
+
+  _renderOverlays(ctx) {
+    for (const ov of this._overlays) {
+      if (ov.type === 'ruler') this._renderRuler(ctx, ov);
+      else if (ov.type === 'protractor') this._renderProtractor(ctx, ov);
+    }
+  }
+
+  _renderRuler(ctx, ov) {
+    const [cx, cy] = this._toCanvas(ov.x, ov.y);
+    const rulerW = (ov.width / Whiteboard.VW) * (this._cssW || 300);
+    const rulerH = Math.max(18, rulerW * 0.07);
+    ctx.save();
+    ctx.translate(cx, cy);
+    ctx.rotate(ov.angle || 0);
+    ctx.fillStyle   = 'rgba(255,230,180,0.15)';
+    ctx.strokeStyle = 'rgba(255,230,180,0.5)';
+    ctx.lineWidth   = 1;
+    ctx.fillRect(0, 0, rulerW, rulerH);
+    ctx.strokeRect(0, 0, rulerW, rulerH);
+    // Tick marks every ~40vp
+    const tickStep = (40 / Whiteboard.VW) * (this._cssW || 300);
+    ctx.strokeStyle = 'rgba(255,230,180,0.4)';
+    ctx.font = `${Math.max(6, Math.round(7 * rulerW / 300))}px Manrope,sans-serif`;
+    ctx.fillStyle = 'rgba(255,230,180,0.5)';
+    ctx.textAlign = 'center'; ctx.textBaseline = 'bottom';
+    for (let t = 0; t * tickStep <= rulerW; t++) {
+      const tx = t * tickStep;
+      const th = t % 5 === 0 ? rulerH * 0.6 : rulerH * 0.3;
+      ctx.beginPath(); ctx.moveTo(tx, rulerH); ctx.lineTo(tx, rulerH - th); ctx.stroke();
+      if (t % 5 === 0 && t > 0) ctx.fillText(t, tx, rulerH - th - 1);
+    }
+
+    // ── handles ────────────────────────────────────────────────────────────
+    // Rotation handle — purple circle above ruler center
+    const rotHx = rulerW / 2, rotHy = -20;
+    ctx.strokeStyle = 'rgba(155,93,229,0.55)'; ctx.lineWidth = 1;
+    ctx.setLineDash([3, 2]);
+    ctx.beginPath(); ctx.moveTo(rulerW / 2, 0); ctx.lineTo(rotHx, rotHy); ctx.stroke();
+    ctx.setLineDash([]);
+    ctx.beginPath(); ctx.arc(rotHx, rotHy, 7, 0, Math.PI * 2);
+    ctx.fillStyle = 'rgba(155,93,229,0.75)'; ctx.fill();
+    ctx.strokeStyle = 'rgba(255,255,255,0.35)'; ctx.lineWidth = 1; ctx.stroke();
+    // ↺ symbol inside
+    ctx.fillStyle = '#fff'; ctx.font = '8px sans-serif';
+    ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+    ctx.fillText('↺', rotHx, rotHy);
+
+    // Resize handle — cyan circle at right end
+    const resHx = rulerW + 10, resHy = rulerH / 2;
+    ctx.beginPath(); ctx.arc(resHx, resHy, 7, 0, Math.PI * 2);
+    ctx.fillStyle = 'rgba(6,214,224,0.75)'; ctx.fill();
+    ctx.strokeStyle = 'rgba(255,255,255,0.35)'; ctx.lineWidth = 1; ctx.stroke();
+    ctx.fillStyle = '#fff'; ctx.font = '8px sans-serif';
+    ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+    ctx.fillText('↔', resHx, resHy);
+
+    ctx.restore();
+  }
+
+  _renderProtractor(ctx, ov) {
+    const [cx, cy] = this._toCanvas(ov.x, ov.y);
+    const vR = ov.radius || 80;
+    const r  = Math.max(30, (vR / Whiteboard.VW) * (this._cssW || 300));
+    ctx.save();
+    ctx.translate(cx, cy);
+    ctx.rotate(ov.angle || 0);
+    ctx.fillStyle   = 'rgba(6,214,224,0.08)';
+    ctx.strokeStyle = 'rgba(6,214,224,0.5)';
+    ctx.lineWidth   = 1;
+    ctx.beginPath();
+    ctx.arc(0, 0, r, Math.PI, 0, false); // top semicircle
+    ctx.lineTo(-r, 0); ctx.closePath();
+    ctx.fill(); ctx.stroke();
+    // Degree ticks
+    ctx.font = `${Math.max(6, Math.round(7 * r / 80))}px Manrope,sans-serif`;
+    ctx.fillStyle = 'rgba(6,214,224,0.6)'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+    for (let deg = 0; deg <= 180; deg += 10) {
+      const rad = (Math.PI - deg * Math.PI / 180);
+      const major = deg % 30 === 0;
+      const tl = major ? r * 0.15 : r * 0.08;
+      ctx.strokeStyle = major ? 'rgba(6,214,224,0.7)' : 'rgba(6,214,224,0.3)';
+      ctx.beginPath();
+      ctx.moveTo(Math.cos(rad) * (r - tl), Math.sin(rad) * (r - tl));
+      ctx.lineTo(Math.cos(rad) * r,        Math.sin(rad) * r);
+      ctx.stroke();
+      if (major && deg > 0 && deg < 180) {
+        const lr = r - tl - 5;
+        ctx.fillText(deg, Math.cos(rad) * lr, Math.sin(rad) * lr - 1);
+      }
+    }
+
+    // ── handles ────────────────────────────────────────────────────────────
+    // Rotation handle — above center of flat edge (local y negative = upward)
+    const pRotHy = -(r + 20);
+    ctx.strokeStyle = 'rgba(155,93,229,0.55)'; ctx.lineWidth = 1;
+    ctx.setLineDash([3, 2]);
+    ctx.beginPath(); ctx.moveTo(0, -r); ctx.lineTo(0, pRotHy); ctx.stroke();
+    ctx.setLineDash([]);
+    ctx.beginPath(); ctx.arc(0, pRotHy, 7, 0, Math.PI * 2);
+    ctx.fillStyle = 'rgba(155,93,229,0.75)'; ctx.fill();
+    ctx.strokeStyle = 'rgba(255,255,255,0.35)'; ctx.lineWidth = 1; ctx.stroke();
+    ctx.fillStyle = '#fff'; ctx.font = '8px sans-serif';
+    ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+    ctx.fillText('↺', 0, pRotHy);
+
+    // Resize handle — at right end of flat edge
+    ctx.beginPath(); ctx.arc(r + 10, 0, 7, 0, Math.PI * 2);
+    ctx.fillStyle = 'rgba(6,214,224,0.75)'; ctx.fill();
+    ctx.strokeStyle = 'rgba(255,255,255,0.35)'; ctx.lineWidth = 1; ctx.stroke();
+    ctx.fillStyle = '#fff'; ctx.font = '8px sans-serif';
+    ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+    ctx.fillText('↔', r + 10, 0);
+
+    ctx.restore();
+  }
+
+  /* Overlay drag helpers */
+  _hitTestOverlay(vx, vy) {
+    const [pcx, pcy] = this._toCanvas(vx, vy);
+    for (let i = this._overlays.length - 1; i >= 0; i--) {
+      const ov = this._overlays[i];
+      const [ox, oy] = this._toCanvas(ov.x, ov.y);
+      const angle = ov.angle || 0;
+      const dx = pcx - ox, dy = pcy - oy;
+      // rotate pointer into overlay local space
+      const lx =  dx * Math.cos(-angle) - dy * Math.sin(-angle);
+      const ly =  dx * Math.sin(-angle) + dy * Math.cos(-angle);
+
+      if (ov.type === 'ruler') {
+        const W = (ov.width / Whiteboard.VW) * (this._cssW || 300);
+        const H = Math.max(18, W * 0.07);
+        if (Math.hypot(lx - W / 2, ly + 20) < 10)       return { idx: i, zone: 'rot' };
+        if (Math.hypot(lx - (W + 10), ly - H / 2) < 10) return { idx: i, zone: 'resize' };
+        if (lx >= -5 && lx <= W + 5 && ly >= -5 && ly <= H + 5) return { idx: i, zone: 'body' };
+      }
+
+      if (ov.type === 'protractor') {
+        const vR = ov.radius || 80;
+        const r  = Math.max(30, (vR / Whiteboard.VW) * (this._cssW || 300));
+        if (Math.hypot(lx,       ly + r + 20) < 10) return { idx: i, zone: 'rot' };
+        if (Math.hypot(lx - r - 10, ly)       < 10) return { idx: i, zone: 'resize' };
+        const dist = Math.hypot(lx, ly);
+        if (dist < r && ly <= 0) return { idx: i, zone: 'body' };
+        if (Math.abs(ly) < 8 && Math.abs(lx) <= r) return { idx: i, zone: 'body' };
+      }
+    }
+    return null;
+  }
+
+  /* ── Number line stroke ─────────────────────────────────────────────── */
+
+  _renderNumberLine(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 min = d.min ?? -10, max = d.max ?? 10;
+    const step = d.step || 1;
+    const range = max - min;
+
+    ctx.save();
+    if (d.rotation) { const [ocx, ocy] = [cx + cw / 2, cy + ch / 2]; ctx.translate(ocx, ocy); ctx.rotate(d.rotation); ctx.translate(-ocx, -ocy); }
+
+    // Background
+    ctx.fillStyle = 'rgba(18,13,30,0.82)';
+    ctx.strokeStyle = 'rgba(155,93,229,0.3)';
+    ctx.lineWidth = 1;
+    if (ctx.roundRect) ctx.roundRect(cx, cy, cw, ch, 6); else ctx.rect(cx, cy, cw, ch);
+    ctx.fill(); ctx.stroke();
+
+    const axY  = cy + ch / 2;
+    const padX = cw * 0.04;
+    const axX1 = cx + padX, axX2 = cx + cw - padX;
+    const scaleX = (axX2 - axX1) / range;
+
+    // Main axis line
+    ctx.strokeStyle = 'rgba(255,255,255,0.75)';
+    ctx.lineWidth   = 1.5;
+    ctx.beginPath();
+    ctx.moveTo(axX1 - 6, axY); ctx.lineTo(axX2 + 8, axY);
+    ctx.stroke();
+
+    // Arrow right
+    ctx.fillStyle = 'rgba(255,255,255,0.75)';
+    ctx.beginPath(); ctx.moveTo(axX2 + 8, axY);
+    ctx.lineTo(axX2 + 2, axY - 5); ctx.lineTo(axX2 + 2, axY + 5); ctx.closePath(); ctx.fill();
+
+    // Tick marks + labels
+    const fs = Math.max(8, Math.round((11 / Whiteboard.VH) * (this._cssH || 150)));
+    ctx.font = `${fs}px Manrope,sans-serif`;
+    ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+    for (let v = Math.ceil(min / step) * step; v <= max; v += step) {
+      const px = axX1 + (v - min) * scaleX;
+      const major = (v % (step * 5) === 0) || step >= 1;
+      const th = major ? ch * 0.22 : ch * 0.12;
+      ctx.strokeStyle = major ? 'rgba(255,255,255,0.6)' : 'rgba(255,255,255,0.25)';
+      ctx.lineWidth = major ? 1.2 : 0.7;
+      ctx.beginPath(); ctx.moveTo(px, axY - th); ctx.lineTo(px, axY + th); ctx.stroke();
+      if (major) {
+        ctx.fillStyle = 'rgba(255,255,255,0.55)';
+        ctx.fillText(v === 0 ? '0' : v.toString(), px, axY + th + 2);
+      }
+    }
+
+    // Origin line
+    if (min <= 0 && 0 <= max) {
+      const ox = axX1 + (0 - min) * scaleX;
+      ctx.strokeStyle = 'rgba(255,255,255,0.4)';
+      ctx.lineWidth = 1.5;
+      ctx.beginPath(); ctx.moveTo(ox, axY - ch * 0.3); ctx.lineTo(ox, axY + ch * 0.3); ctx.stroke();
+    }
+
+    // Points
+    if (d.points) {
+      for (const pt of d.points) {
+        const px = axX1 + (pt.val - min) * scaleX;
+        if (px < cx || px > cx + cw) continue;
+        const color = pt.color || '#06D6E0';
+        ctx.fillStyle = pt.open ? 'transparent' : color;
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 2;
+        ctx.beginPath(); ctx.arc(px, axY, ch * 0.12, 0, Math.PI * 2);
+        ctx.fill(); ctx.stroke();
+        if (pt.label) {
+          ctx.fillStyle = color;
+          ctx.font = `bold ${fs}px Manrope,sans-serif`;
+          ctx.fillText(pt.label, px, axY - ch * 0.35);
+        }
+      }
+    }
+
+    // Intervals (shaded ranges)
+    if (d.intervals) {
+      for (const iv of d.intervals) {
+        const x1 = axX1 + (Math.max(iv.from, min) - min) * scaleX;
+        const x2 = axX1 + (Math.min(iv.to,   max) - min) * scaleX;
+        ctx.fillStyle = (iv.color || '#9B5DE5') + '33';
+        ctx.fillRect(x1, axY - ch * 0.1, x2 - x1, ch * 0.2);
+      }
+    }
+
+    ctx.restore();
+  }
+
+  /* ── Compass stroke ─────────────────────────────────────────────────── */
+
+  _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;
+
+    ctx.save();
+    if (d.rotation) { ctx.translate(ocx, ocy); ctx.rotate(d.rotation); ctx.translate(-ocx, -ocy); }
+
+    // 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;
+    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.beginPath();
+    ctx.arc(ocx + Math.cos(pivotAngle + angle) * legLen, ocy + Math.sin(pivotAngle + angle) * legLen,
+            arcR, arcStart, arcStart + arcAngle);
+    ctx.stroke();
+
+    // 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);
+    }
+    ctx.restore();
+  }
+
+  /* ── Auto-measurements: display geometric annotations on shapes ─────── */
+
+  renderMeasurements(ctx, stroke) {
+    if (!stroke || stroke.tool !== 'shape') return;
+    const d = stroke.data;
+    const fs = Math.max(9, Math.round((10 / Whiteboard.VH) * (this._cssH || 150)));
+    ctx.save();
+    ctx.font      = `${fs}px Manrope,sans-serif`;
+    ctx.fillStyle = 'rgba(255,230,100,0.85)';
+    ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+
+    const [cx1, cy1] = this._toCanvas(d.x1, d.y1);
+    const [cx2, cy2] = this._toCanvas(d.x2, d.y2);
+    const midCx = (cx1 + cx2) / 2, midCy = (cy1 + cy2) / 2;
+
+    if (d.shape === 'line' || d.shape === 'arrow') {
+      const len = Math.hypot(d.x2 - d.x1, d.y2 - d.y1);
+      const ang = Math.atan2(d.y2 - d.y1, d.x2 - d.x1) * 180 / Math.PI;
+      this._drawMeasLabel(ctx, `${len.toFixed(0)} vp  ${ang.toFixed(1)}°`, midCx, midCy - 12);
+    } else if (d.shape === 'rect' || d.shape === 'roundedrect') {
+      const vw = Math.abs(d.x2 - d.x1), vh = Math.abs(d.y2 - d.y1);
+      this._drawMeasLabel(ctx, `${vw.toFixed(0)}`, midCx, Math.min(cy1, cy2) - 8);
+      this._drawMeasLabel(ctx, `${vh.toFixed(0)}`, Math.max(cx1, cx2) + 8, midCy);
+    } else if (d.shape === 'ellipse') {
+      const rx = Math.abs(d.x2 - d.x1) / 2, ry = Math.abs(d.y2 - d.y1) / 2;
+      this._drawMeasLabel(ctx, `rx=${rx.toFixed(0)} ry=${ry.toFixed(0)}`, midCx, Math.min(cy1, cy2) - 8);
+    } else if (d.shape === 'triangle') {
+      const base = Math.abs(d.x2 - d.x1), height = Math.abs(d.y2 - d.y1);
+      const area = (base * height / 2).toFixed(0);
+      this._drawMeasLabel(ctx, `A≈${area}`, midCx, Math.min(cy1, cy2) - 8);
+    }
+    ctx.restore();
+  }
+
+  _drawMeasLabel(ctx, text, x, y) {
+    const m = ctx.measureText(text);
+    const pad = 3;
+    ctx.fillStyle = 'rgba(26,20,40,0.7)';
+    ctx.fillRect(x - m.width / 2 - pad, y - 7, m.width + pad * 2, 14);
+    ctx.fillStyle = 'rgba(255,230,100,0.9)';
+    ctx.fillText(text, x, y);
+  }
+
+  toggleMeasurements() {
+    this._showMeasurements = !this._showMeasurements;
+    this.render();
+    return this._showMeasurements;
+  }
+
+  toggleRuler() {
+    const idx = this._overlays.findIndex(o => o.type === 'ruler');
+    if (idx >= 0) this._overlays.splice(idx, 1);
+    else this._overlays.push({ type: 'ruler', x: 200, y: 200, angle: 0, width: 400 });
+    this.render();
+  }
+
+  toggleProtractor() {
+    const idx = this._overlays.findIndex(o => o.type === 'protractor');
+    if (idx >= 0) this._overlays.splice(idx, 1);
+    else this._overlays.push({ type: 'protractor', x: 960, y: 350, radius: 80, angle: 0 });
+    this.render();
+  }
+}
+
+if (typeof module !== 'undefined') module.exports = Whiteboard;
diff --git a/frontend/knowledge-map.html b/frontend/knowledge-map.html
new file mode 100644
index 0000000..a31d6e6
--- /dev/null
+++ b/frontend/knowledge-map.html
@@ -0,0 +1,1910 @@
+<!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" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css" crossorigin="anonymous" />
+  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js" crossorigin="anonymous"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js" crossorigin="anonymous"
+    onload="window._katexReady = true; if(window._katexReadyCb) window._katexReadyCb()"></script>
+  <style>
+    .app-layout { height: 100vh; overflow: hidden; }
+    .sb-content  { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
+
+    /* ── Topbar ── */
+    .km-topbar {
+      flex-shrink: 0; display: flex; align-items: center; gap: 12px;
+      padding: 14px 22px 0;
+    }
+    .km-icon {
+      width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
+      background: linear-gradient(135deg, rgba(155,93,229,.35), rgba(6,214,224,.2));
+      border: 1.5px solid rgba(255,255,255,.1);
+      display: flex; align-items: center; justify-content: center;
+    }
+    .km-icon svg { width: 19px; height: 19px; stroke: #9B5DE5; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
+    .km-title-wrap { flex: 1; min-width: 0; }
+    .km-title { font-family: 'Unbounded', sans-serif; font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }
+    .km-sub   { font-size: 0.76rem; color: var(--text-2); font-weight: 500; margin-top: 2px; }
+
+    /* ── Stats chips ── */
+    .km-stats {
+      flex-shrink: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
+      padding: 10px 22px 4px;
+    }
+    .km-stat {
+      display: flex; align-items: center; gap: 6px;
+      padding: 4px 12px 4px 8px; border-radius: 99px;
+      border: 1.5px solid var(--border-h); background: var(--surface);
+      font-family: 'Manrope', sans-serif; font-size: 0.75rem; font-weight: 700;
+    }
+    .km-stat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+    .km-stat-val { color: var(--text); }
+    .km-stat-lbl { color: var(--text-3); font-weight: 600; }
+
+    /* ── Overall progress bar ── */
+    .km-progress-wrap {
+      flex-shrink: 0; padding: 0 22px 4px; display: flex; align-items: center; gap: 10px;
+    }
+    .km-progress-bar {
+      flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.07);
+      overflow: hidden;
+    }
+    .km-progress-fill { height: 100%; border-radius: 3px; transition: width .5s ease; }
+    .km-progress-pct { font-size: 0.72rem; font-weight: 700; color: var(--text-2); min-width: 36px; text-align: right; }
+
+    /* ── Controls ── */
+    .km-controls {
+      flex-shrink: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
+      padding: 6px 22px 8px;
+      border-bottom: 1px solid var(--border);
+    }
+    .km-filter {
+      padding: 4px 13px; border-radius: 99px;
+      border: 1.5px solid var(--border-h);
+      background: var(--surface); color: var(--text-2);
+      font-family: 'Manrope', sans-serif; font-size: 0.77rem; font-weight: 700;
+      cursor: pointer; transition: all .14s;
+    }
+    .km-filter:hover { border-color: rgba(155,93,229,.4); color: var(--violet); }
+    .km-filter.active { background: var(--violet); color: #fff; border-color: var(--violet); }
+
+    .km-sep { width: 1px; height: 20px; background: var(--border-h); margin: 0 2px; }
+
+    .km-btn {
+      padding: 4px 12px; border-radius: 9px;
+      border: 1.5px solid var(--border-h); background: var(--surface); color: var(--text-2);
+      font-family: 'Manrope', sans-serif; font-size: 0.77rem; font-weight: 700;
+      cursor: pointer; transition: all .14s; display: flex; align-items: center; gap: 5px;
+    }
+    .km-btn:hover { border-color: rgba(155,93,229,.4); color: var(--violet); }
+    .km-btn svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2; fill: none; }
+
+    /* Legend */
+    .km-legend {
+      margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0;
+    }
+    .km-legend-item { display: flex; align-items: center; gap: 4px; font-size: 0.7rem; color: var(--text-3); font-weight: 600; }
+    .km-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+
+    /* ── Canvas ── */
+    .km-canvas-wrap { flex: 1; min-height: 0; position: relative; }
+    #km-canvas { display: block; width: 100%; height: 100%; }
+
+    /* ── Hint ── */
+    .km-hint {
+      position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
+      font-size: 0.7rem; color: rgba(255,255,255,.2); font-family: 'Manrope', sans-serif;
+      pointer-events: none; white-space: nowrap;
+    }
+
+    /* ── Zoom controls ── */
+    .km-zoom-btns {
+      position: absolute; right: 14px; bottom: 14px;
+      display: flex; flex-direction: column; gap: 4px;
+    }
+    .km-zoom-btn {
+      width: 32px; height: 32px; border-radius: 9px;
+      border: 1.5px solid rgba(255,255,255,.1); background: rgba(10,10,20,.7);
+      color: rgba(255,255,255,.6); cursor: pointer; font-size: 1rem;
+      display: flex; align-items: center; justify-content: center;
+      transition: all .14s; backdrop-filter: blur(6px);
+    }
+    .km-zoom-btn:hover { border-color: rgba(155,93,229,.5); color: #9B5DE5; }
+
+    /* ── Tooltip ── */
+    .km-tooltip {
+      position: fixed; pointer-events: auto;
+      background: rgba(8,8,18,.96); border: 1px solid rgba(255,255,255,.13);
+      border-radius: 12px; padding: 12px 15px; color: #fff;
+      font-family: 'Manrope', sans-serif; font-size: 0.82rem;
+      box-shadow: 0 12px 40px rgba(0,0,0,.6);
+      min-width: 190px; max-width: 250px; z-index: 9999;
+      display: none;
+    }
+    .tt-subject { font-size: 0.68rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; margin-bottom: 5px; }
+    .tt-name    { font-weight: 800; color: #fff; font-size: 0.9rem; margin-bottom: 8px; line-height: 1.3; }
+    .tt-bar-wrap { height: 5px; border-radius: 3px; background: rgba(255,255,255,.1); margin-bottom: 5px; overflow: hidden; }
+    .tt-bar-fill { height: 100%; border-radius: 3px; transition: width .3s; }
+    .tt-mastery  { font-size: 0.75rem; color: rgba(255,255,255,.6); display: flex; justify-content: space-between; }
+    .tt-action   { margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: rgba(155,93,229,.2); border: 1px solid rgba(155,93,229,.35); color: #c39af5; font-size: 0.76rem; font-weight: 700; text-align: center; cursor: pointer; transition: all .15s; display: flex; align-items: center; justify-content: center; gap: 6px; }
+    .tt-action:hover { background: rgba(155,93,229,.35); color: #fff; }
+
+    /* ── Loading ── */
+    .km-loading {
+      position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
+      color: var(--text-3); font-size: 0.88rem; gap: 8px;
+    }
+    .km-spinner { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(155,93,229,.2); border-top-color: var(--violet); animation: spin .7s linear infinite; }
+    @keyframes spin { to { transform: rotate(360deg); } }
+
+    /* ── Empty state ── */
+    .km-empty {
+      position: absolute; inset: 0; display: none; flex-direction: column;
+      align-items: center; justify-content: center; gap: 10px; color: var(--text-3);
+    }
+    .km-empty.show { display: flex; }
+    .km-empty-icon { font-size: 2.5rem; opacity: .4; }
+    .km-empty-text { font-size: 0.88rem; font-weight: 600; }
+
+    /* ── Context menu ── */
+    .km-ctx {
+      position: fixed; z-index: 300; display: none;
+      background: rgba(8,8,18,.96); border: 1px solid rgba(255,255,255,.12);
+      border-radius: 14px; padding: 6px; min-width: 190px;
+      box-shadow: 0 16px 48px rgba(0,0,0,.6); backdrop-filter: blur(16px);
+      font-family: 'Manrope', sans-serif;
+    }
+    .km-ctx.open { display: block; }
+    .km-ctx-item {
+      display: flex; align-items: center; gap: 10px;
+      padding: 9px 14px; border-radius: 9px; cursor: pointer;
+      font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,.8);
+      transition: all .12s; border: none; background: none; width: 100%; text-align: left;
+    }
+    .km-ctx-item:hover { background: rgba(155,93,229,.12); color: #fff; }
+    .km-ctx-item svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; fill: none; flex-shrink: 0; }
+    .km-ctx-sep { height: 1px; background: rgba(255,255,255,.06); margin: 4px 8px; }
+    .km-ctx-head {
+      padding: 8px 14px 4px; font-size: 0.68rem; font-weight: 700;
+      color: rgba(255,255,255,.3); text-transform: uppercase; letter-spacing: .06em;
+    }
+
+    /* ── Quick test modal ── */
+    .km-qtest {
+      position: fixed; inset: 0; z-index: 400;
+      background: rgba(8,4,20,.88); backdrop-filter: blur(12px);
+      display: none; align-items: center; justify-content: center; padding: 20px;
+    }
+    .km-qtest.open { display: flex; }
+    .km-qtest-box {
+      background: #fff; border-radius: 22px; width: 100%; max-width: 540px;
+      max-height: 90vh; overflow-y: auto; position: relative;
+      box-shadow: 0 40px 120px rgba(0,0,0,.5);
+    }
+    .km-qtest-head {
+      padding: 22px 24px 14px; border-bottom: 1px solid #E8EBF0;
+      display: flex; align-items: center; gap: 12px;
+    }
+    .km-qtest-head-ic {
+      width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
+      display: flex; align-items: center; justify-content: center;
+      background: linear-gradient(135deg, rgba(155,93,229,.12), rgba(6,214,224,.08));
+      color: #9B5DE5;
+    }
+    .km-qtest-head-ic svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 2; fill: none; }
+    .km-qtest-title {
+      font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 800;
+      color: #0F172A; flex: 1;
+    }
+    .km-qtest-close {
+      width: 32px; height: 32px; border-radius: 9px; border: 1.5px solid #E8EBF0;
+      background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
+      color: #8898AA; transition: all .15s;
+    }
+    .km-qtest-close:hover { border-color: #ef4444; color: #ef4444; }
+    .km-qtest-close svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }
+    .km-qtest-body { padding: 20px 24px; }
+    .km-qtest-progress {
+      display: flex; align-items: center; gap: 8px; margin-bottom: 18px;
+    }
+    .km-qtest-pbar { flex: 1; height: 4px; border-radius: 99px; background: #E8EBF0; overflow: hidden; }
+    .km-qtest-pfill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #9B5DE5, #06D6E0); transition: width .3s; }
+    .km-qtest-ptext { font-size: 0.72rem; font-weight: 700; color: #8898AA; min-width: 36px; text-align: right; }
+    .km-qtest-q {
+      font-size: 0.95rem; font-weight: 600; color: #0F172A; line-height: 1.6;
+      margin-bottom: 16px;
+    }
+    .km-qtest-opts { display: flex; flex-direction: column; gap: 8px; }
+    .km-qtest-opt {
+      display: flex; align-items: center; gap: 12px;
+      padding: 13px 16px; border: 1.5px solid #E8EBF0; border-radius: 14px;
+      cursor: pointer; transition: all .15s; font-size: 0.88rem; color: #0F172A;
+      background: #fff;
+    }
+    .km-qtest-opt:hover { border-color: rgba(155,93,229,.4); background: rgba(155,93,229,.03); }
+    .km-qtest-opt.correct { border-color: #22c55e; background: rgba(34,197,94,.06); color: #166534; }
+    .km-qtest-opt.wrong   { border-color: #ef4444; background: rgba(239,68,68,.06); color: #991b1b; }
+    .km-qtest-opt.dimmed  { opacity: 0.5; pointer-events: none; }
+    .km-qtest-opt-marker {
+      width: 22px; height: 22px; border-radius: 7px; border: 2px solid #E8EBF0;
+      flex-shrink: 0; display: flex; align-items: center; justify-content: center;
+      font-size: 0.7rem; font-weight: 800; color: transparent; transition: all .15s;
+    }
+    .km-qtest-opt.correct .km-qtest-opt-marker { border-color: #22c55e; color: #22c55e; background: rgba(34,197,94,.1); }
+    .km-qtest-opt.wrong   .km-qtest-opt-marker { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,.1); }
+    .km-qtest-explain {
+      margin-top: 14px; padding: 14px 16px; border-radius: 12px;
+      background: rgba(155,93,229,.05); border: 1px solid rgba(155,93,229,.1);
+      font-size: 0.82rem; color: #475569; line-height: 1.6; display: none;
+    }
+    .km-qtest-result {
+      text-align: center; padding: 32px 20px;
+    }
+    .km-qtest-result-score {
+      font-family: 'Unbounded', sans-serif; font-size: 2rem; font-weight: 800;
+      margin-bottom: 6px;
+    }
+    .km-qtest-result-label { font-size: 0.88rem; color: #8898AA; margin-bottom: 20px; }
+    .km-qtest-result-btn {
+      padding: 12px 28px; border-radius: 99px; border: none;
+      background: linear-gradient(135deg, #9B5DE5, #7C3AED);
+      color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.88rem; font-weight: 700;
+      cursor: pointer; transition: all .15s;
+    }
+    .km-qtest-result-btn:hover { opacity: .88; transform: translateY(-1px); }
+
+    /* ── Minimap ── */
+    .km-minimap {
+      position: absolute; left: 14px; bottom: 14px;
+      width: 140px; height: 90px; border-radius: 10px;
+      background: rgba(8,8,18,.75); border: 1px solid rgba(255,255,255,.1);
+      backdrop-filter: blur(6px); overflow: hidden; cursor: pointer;
+    }
+    .km-minimap canvas { width: 100%; height: 100%; display: block; }
+
+    /* ── Search input ── */
+    .km-search {
+      padding: 4px 10px 4px 28px; border-radius: 99px; width: 140px;
+      border: 1.5px solid var(--border-h); background: var(--surface);
+      color: var(--text); font-family: 'Manrope', sans-serif; font-size: 0.77rem;
+      font-weight: 600; outline: none; transition: all .2s;
+    }
+    .km-search:focus { border-color: rgba(155,93,229,.5); width: 200px; }
+    .km-search::placeholder { color: var(--text-3); }
+    .km-search-wrap {
+      position: relative; display: flex; align-items: center;
+    }
+    .km-search-ic {
+      position: absolute; left: 9px; color: var(--text-3); pointer-events: none;
+    }
+
+    /* ── Recommendation panel ── */
+    .km-reco {
+      position: absolute; top: 0; right: 0; bottom: 0; width: 300px;
+      background: rgba(8,8,18,.95); backdrop-filter: blur(16px);
+      border-left: 1px solid rgba(255,255,255,.08);
+      transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
+      z-index: 50; display: flex; flex-direction: column; overflow: hidden;
+    }
+    .km-reco.open { transform: translateX(0); }
+    .km-reco-head {
+      padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.06);
+      display: flex; align-items: center; gap: 10px;
+    }
+    .km-reco-title {
+      font-family: 'Unbounded', sans-serif; font-size: 0.75rem; font-weight: 800;
+      color: #fff; flex: 1;
+    }
+    .km-reco-close {
+      width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgba(255,255,255,.1);
+      background: transparent; color: rgba(255,255,255,.5); cursor: pointer;
+      display: flex; align-items: center; justify-content: center; transition: all .15s;
+    }
+    .km-reco-close:hover { border-color: rgba(255,255,255,.3); color: #fff; }
+    .km-reco-list { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
+    .km-reco-item {
+      padding: 14px 16px; border-radius: 14px;
+      background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06);
+      cursor: pointer; transition: all .15s;
+    }
+    .km-reco-item:hover { background: rgba(155,93,229,.08); border-color: rgba(155,93,229,.2); }
+    .km-reco-item-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
+    .km-reco-item-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+    .km-reco-item-name { font-size: 0.82rem; font-weight: 700; color: #fff; flex: 1; }
+    .km-reco-item-pct {
+      font-family: 'Unbounded', sans-serif; font-size: 0.72rem; font-weight: 800;
+    }
+    .km-reco-item-bar { height: 4px; border-radius: 99px; background: rgba(255,255,255,.06); overflow: hidden; margin-bottom: 6px; }
+    .km-reco-item-fill { height: 100%; border-radius: 99px; }
+    .km-reco-item-sub { font-size: 0.7rem; color: rgba(255,255,255,.4); }
+    .km-reco-item-reason { font-size: 0.7rem; color: rgba(255,209,102,.7); margin-top: 4px; font-weight: 600; }
+    .km-reco-btn {
+      margin: 6px 14px 14px; padding: 10px; border-radius: 12px; border: none;
+      background: linear-gradient(135deg, rgba(155,93,229,.2), rgba(6,214,224,.1));
+      color: #c39af5; font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 700;
+      cursor: pointer; text-align: center; transition: all .15s;
+      border: 1px solid rgba(155,93,229,.2);
+    }
+    .km-reco-btn:hover { background: rgba(155,93,229,.3); }
+    .km-reco-empty { text-align: center; padding: 40px 16px; color: rgba(255,255,255,.3); font-size: 0.85rem; }
+
+    /* ── Mobile ── */
+    @media (max-width: 768px) {
+      .app-layout { height: auto; }
+      .sb-content { height: auto; overflow: auto; flex-direction: column; }
+      .km-topbar { padding: 12px 14px 0; flex-wrap: wrap; gap: 8px; }
+      .km-title { font-size: 0.9rem; }
+      .km-stats { padding: 8px 14px 4px; }
+      .km-progress-wrap { padding: 0 14px 4px; }
+      .km-canvas-wrap { height: 70vw; min-height: 300px; flex: none; }
+      .km-minimap { display: none; }
+      .km-reco { width: 260px; }
+      .km-search { width: 110px; }
+      .km-search:focus { width: 150px; }
+      .km-legend { display: none; }
+    }
+    @media (max-width: 480px) {
+      .km-canvas-wrap { height: 280px; }
+      .km-stat { font-size: 0.68rem; padding: 3px 8px 3px 6px; }
+      .km-title { font-size: 0.82rem; }
+      .km-reco { width: 100%; }
+    }
+  </style>
+  <script src="https://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+</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="sbl-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="sbl-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>
+      <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>
+      <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="sbl-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>
+    </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>
+          <span class="sb-logout" style="pointer-events:none">Мой профиль</span>
+        </div>
+      </a>
+    </div>
+  </aside>
+
+  <div class="sb-content">
+
+    <!-- Topbar -->
+    <div class="km-topbar">
+      <div class="km-icon">
+        <svg viewBox="0 0 24 24"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
+      </div>
+      <div class="km-title-wrap">
+        <div class="km-title">Карта знаний</div>
+        <div class="km-sub" id="km-sub-text">Визуализация освоенности тем</div>
+      </div>
+    </div>
+
+    <!-- Stats -->
+    <div class="km-stats" id="km-stats" style="display:none">
+      <div class="km-stat" id="stat-mastered">
+        <div class="km-stat-dot" style="background:#06D6A0"></div>
+        <span class="km-stat-val" id="stat-mastered-val">0</span>
+        <span class="km-stat-lbl">освоено</span>
+      </div>
+      <div class="km-stat" id="stat-progress">
+        <div class="km-stat-dot" style="background:#FFD166"></div>
+        <span class="km-stat-val" id="stat-progress-val">0</span>
+        <span class="km-stat-lbl">в процессе</span>
+      </div>
+      <div class="km-stat" id="stat-new">
+        <div class="km-stat-dot" style="background:rgba(255,255,255,.25)"></div>
+        <span class="km-stat-val" id="stat-new-val">0</span>
+        <span class="km-stat-lbl">не начато</span>
+      </div>
+    </div>
+    <div class="km-progress-wrap" id="km-prog-wrap" style="display:none">
+      <div class="km-progress-bar"><div class="km-progress-fill" id="km-prog-fill"></div></div>
+      <div class="km-progress-pct" id="km-prog-pct">0%</div>
+    </div>
+
+    <!-- Controls -->
+    <div class="km-controls" id="km-controls">
+      <button class="km-filter active" data-slug="">Все</button>
+      <button class="km-filter" data-slug="bio"><svg class="ic" viewBox="0 0 24 24"><path d="M2 15c6.667-6 13.333 0 20-6"/><path d="M9 22c1.798-2 2.518-4 2.807-6"/><path d="M15 2c-1.798 2-2.518 4-2.807 6"/><path d="m17 6-2.5-2.5M14 8 13 7M7 18l2.5 2.5M3.5 14.5l.5.5M20 9l.5.5M6.5 12.5l1 1M16.5 10.5l1 1M10 16l1.5 1.5"/></svg> Биология</button>
+      <button class="km-filter" data-slug="chem"><svg class="ic" viewBox="0 0 24 24"><path d="M9 3h6m-4.5 0v5.5l-4 7.5a1 1 0 0 0 .9 1.5h8.2a1 1 0 0 0 .9-1.5l-4-7.5V3"/></svg>️ Химия</button>
+      <button class="km-filter" data-slug="math"><svg class="ic" viewBox="0 0 24 24"><path d="m15 5 6.3 6.3a2.4 2.4 0 0 1 0 3.4L17 19"/><path d="M9.586 5.586A2 2 0 0 0 8.172 5H3a1 1 0 0 0-1 1v5.172a2 2 0 0 0 .586 1.414L8.29 18.29a2.426 2.426 0 0 0 3.42 0l3.58-3.58a2.426 2.426 0 0 0 0-3.42z"/><circle cx="6.5" cy="9.5" r=".5" fill="currentColor"/></svg> Математика</button>
+      <button class="km-filter" data-slug="phys"><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>
+      <div class="km-search-wrap">
+        <svg class="km-search-ic ic" viewBox="0 0 24 24" style="width:13px;height:13px"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+        <input class="km-search" id="km-search" type="text" placeholder="Найти тему..." oninput="searchTopic(this.value)" />
+      </div>
+      <div class="km-sep"></div>
+      <button class="km-btn" id="btn-recenter" title="Сбросить вид">
+        <svg viewBox="0 0 24 24"><path d="M3 12a9 9 0 1 0 18 0A9 9 0 0 0 3 12z"/><path d="M12 8v4l3 3"/></svg>
+        Центр
+      </button>
+      <button class="km-btn" id="btn-resim" title="Перегруппировать">
+        <svg viewBox="0 0 24 24"><path d="M23 4v6h-6M1 20v-6h6"/><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>
+        Перегруппировать
+      </button>
+      <button class="km-btn" id="btn-reco" title="Рекомендации" onclick="toggleReco()">
+        <svg viewBox="0 0 24 24"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
+        Рекомендации
+      </button>
+      <div class="km-legend">
+        <div class="km-legend-item"><div class="km-legend-dot" style="background:#06D6A0"></div>≥70%</div>
+        <div class="km-legend-item"><div class="km-legend-dot" style="background:#FFD166"></div>30–69%</div>
+        <div class="km-legend-item"><div class="km-legend-dot" style="background:#F94144"></div>&lt;30%</div>
+        <div class="km-legend-item"><div class="km-legend-dot" style="background:rgba(255,255,255,.2)"></div>Новое</div>
+      </div>
+    </div>
+
+    <!-- Canvas -->
+    <div class="km-canvas-wrap" id="km-canvas-wrap">
+      <canvas id="km-canvas"></canvas>
+      <div class="km-loading" id="km-loading"><div class="km-spinner"></div> Загрузка…</div>
+      <div class="km-empty" id="km-empty">
+        <div class="km-empty-icon"><svg class="ic" viewBox="0 0 24 24"><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"/><line x1="8" y1="2" x2="8" y2="18"/><line x1="16" y1="6" x2="16" y2="22"/></svg></div>
+        <div class="km-empty-text">Нет тем для этого предмета</div>
+      </div>
+      <!-- Recommendation panel -->
+      <div class="km-reco" id="km-reco">
+        <div class="km-reco-head">
+          <svg class="ic" viewBox="0 0 24 24" style="width:15px;height:15px;color:#9B5DE5;stroke-width:2"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
+          <div class="km-reco-title">Что учить дальше</div>
+          <button class="km-reco-close" onclick="toggleReco()"><svg class="ic" viewBox="0 0 24 24" style="width:14px;height:14px"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+        </div>
+        <div class="km-reco-list" id="km-reco-list"></div>
+      </div>
+      <div class="km-hint">Колёсико — zoom · Перетащите узел · Клик — фокус</div>
+      <div class="km-minimap" id="km-minimap"><canvas id="km-minimap-canvas"></canvas></div>
+      <div class="km-zoom-btns">
+        <button class="km-zoom-btn" id="btn-zoom-in" title="Приблизить">+</button>
+        <button class="km-zoom-btn" id="btn-zoom-out" title="Отдалить">−</button>
+      </div>
+    </div>
+
+    <!-- Context menu -->
+    <div class="km-ctx" id="km-ctx">
+      <div class="km-ctx-head" id="km-ctx-head">Тема</div>
+      <button class="km-ctx-item" id="ctx-test">
+        <svg viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+        Быстрый тест (5 вопросов)
+      </button>
+      <button class="km-ctx-item" id="ctx-theory">
+        <svg viewBox="0 0 24 24"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
+        Открыть теорию
+      </button>
+      <div class="km-ctx-sep"></div>
+      <button class="km-ctx-item" id="ctx-focus">
+        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+        Фокус на тему
+      </button>
+    </div>
+
+    <!-- Quick test modal -->
+    <div class="km-qtest" id="km-qtest">
+      <div class="km-qtest-box">
+        <div class="km-qtest-head">
+          <div class="km-qtest-head-ic"><svg viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg></div>
+          <div class="km-qtest-title" id="qtest-title">Быстрый тест</div>
+          <button class="km-qtest-close" onclick="closeQuickTest()"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+        </div>
+        <div class="km-qtest-body" id="qtest-body"></div>
+      </div>
+    </div>
+
+    <!-- Tooltip -->
+    <div class="km-tooltip" id="km-tooltip">
+      <div class="tt-subject" id="tt-subject"></div>
+      <div class="tt-name"    id="tt-name"></div>
+      <div class="tt-bar-wrap"><div class="tt-bar-fill" id="tt-fill"></div></div>
+      <div class="tt-mastery">
+        <span id="tt-mastery-pct"></span>
+        <span id="tt-mastery-detail"></span>
+      </div>
+      <div class="tt-action" id="tt-action" style="display:none">Пройти тест по теме <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></div>
+    </div>
+
+  </div>
+</div>
+
+<script src="/js/api.js"></script>
+<script src="/js/notifications.js"></script>
+<script src="/js/search.js"></script>
+<script src="/js/mobile.js"></script>
+<script>
+/* ═══════════════════════════════════════════════════════
+   CONSTANTS
+═══════════════════════════════════════════════════════ */
+const SUBJ_COLORS = { bio: '#9B5DE5', chem: '#06D6A0', math: '#FFD166', phys: '#4CC9F0' };
+const R_SUBJ = 34, R_TOPIC_MIN = 16, R_TOPIC_MAX = 26;
+const ENTRANCE_MS = 800;  // stagger entrance duration per node
+const ENTRANCE_STAGGER = 40; // ms between each node's entrance
+
+/* roundRect polyfill for older browsers */
+if (!CanvasRenderingContext2D.prototype.roundRect) {
+  CanvasRenderingContext2D.prototype.roundRect = function(x,y,w,h,r) {
+    r = Math.min(r, w/2, h/2);
+    this.moveTo(x+r,y); this.arcTo(x+w,y,x+w,y+h,r); this.arcTo(x+w,y+h,x,y+h,r);
+    this.arcTo(x,y+h,x,y,r); this.arcTo(x,y,x+w,y,r); this.closePath();
+  };
+}
+
+function nodeRadius(n) {
+  if (n.type === 'subject') return R_SUBJ;
+  const q = n.totalQ || 0;
+  // Scale: 0 qs → R_TOPIC_MIN, 30+ qs → R_TOPIC_MAX
+  return R_TOPIC_MIN + Math.min(1, q / 30) * (R_TOPIC_MAX - R_TOPIC_MIN);
+}
+
+function masteryColor(m) {
+  if (m === null || m === undefined) return 'rgba(255,255,255,.18)';
+  if (m >= 70) return '#06D6A0';
+  if (m >= 30) return '#FFD166';
+  return '#F94144';
+}
+function masteryGlow(m) {
+  if (m === null || m === undefined) return null;
+  if (m >= 70) return 'rgba(6,214,160,.45)';
+  if (m >= 30) return 'rgba(255,209,102,.45)';
+  return 'rgba(249,65,68,.45)';
+}
+
+/* ═══════════════════════════════════════════════════════
+   STATE
+═══════════════════════════════════════════════════════ */
+let _nodes = [], _links = [], _positions = {};
+let _subjLookup = {};   // topic_id → subject node
+let _dragging = null, _dragOff = { x: 0, y: 0 };
+let _panning = false, _panStart = { mx: 0, my: 0, vx: 0, vy: 0 };
+let _hoverId = null, _selectedId = null;
+let _canvas = null, _ctx = null;
+let _raf = null;
+let _alpha = 0;        // simulation heat
+let _curSlug = '';
+let _view = { x: 0, y: 0, scale: 1 };    // current view
+let _tview = { x: 0, y: 0, scale: 1 };   // target view (for smooth zoom)
+
+/* ── Animation state ── */
+let _animStart = 0;                   // timestamp when data loaded
+const RING_ANIM_MS = 1200;           // mastery rings fill over 1.2s
+let _prevMastery = {};                // topic_id → previous mastery % (from localStorage)
+let _deltas = {};                     // topic_id → { delta, opacity } for "+N%" badges
+let _pulsePhase = 0;                  // global pulse phase for mastered nodes
+let _particles = [];                  // floating particles near mastered nodes
+let _mmCanvas = null, _mmCtx = null, _mmFrame = 0;  // minimap state
+let _stars = [];                      // background stars [{x,y,size,alpha}]
+let _ttHovered = false;               // is mouse over the tooltip?
+let _ttNode = null;                   // current tooltip node reference
+let _ttHideTimer = null;              // delayed hide timer
+let _nodeOrder = [];                  // ordered node ids for stagger entrance
+let _dashOffset = 0;                  // animated dash offset for link flow
+
+/* ═══════════════════════════════════════════════════════
+   INIT
+═══════════════════════════════════════════════════════ */
+(async () => {
+  if (!LS.requireAuth()) return;
+  const user = LS.getUser();
+  LS.initPage();
+
+  // sbl-classes — только для учителей/админов
+  if (user.role !== 'student') {
+    const el = document.getElementById('sbl-classes');
+    if (el) el.style.display = '';
+  }
+  if (user.role === 'admin') {
+    const a = document.getElementById('sbl-admin');
+    if (a) a.style.display = '';
+  }
+  LS.showBoardIfAllowed();
+
+  LS.notif.init();
+  lucide.createIcons();
+
+  document.querySelector('.sb-toggle')?.addEventListener('click', () => {
+    setTimeout(() => { resizeCanvas(); recenter(); }, 310);
+  });
+
+  initCanvas();
+  initControls();
+  initMinimap();
+  await loadMap();
+  startRender();
+})();
+
+/* ═══════════════════════════════════════════════════════
+   CONTROLS
+═══════════════════════════════════════════════════════ */
+function initControls() {
+  // Filters
+  document.getElementById('km-controls').addEventListener('click', e => {
+    const btn = e.target.closest('.km-filter');
+    if (!btn) return;
+    document.querySelectorAll('.km-filter').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    _curSlug = btn.dataset.slug || '';
+    loadMap();
+  });
+
+  // Recenter
+  document.getElementById('btn-recenter').addEventListener('click', recenter);
+
+  // Re-simulate
+  document.getElementById('btn-resim').addEventListener('click', () => {
+    initPositions();
+    kickSim(1);
+  });
+
+  // Zoom buttons
+  document.getElementById('btn-zoom-in').addEventListener('click', () => zoomBy(1.25));
+  document.getElementById('btn-zoom-out').addEventListener('click', () => zoomBy(0.8));
+}
+
+/* ═══════════════════════════════════════════════════════
+   LOAD DATA
+═══════════════════════════════════════════════════════ */
+async function loadMap() {
+  document.getElementById('km-loading').style.display = 'flex';
+  document.getElementById('km-empty').classList.remove('show');
+  document.getElementById('km-stats').style.display = 'none';
+  document.getElementById('km-prog-wrap').style.display = 'none';
+
+  const qs = _curSlug ? `?subject_slug=${_curSlug}` : '';
+  const data = await LS.api(`/api/knowledge-map${qs}`).catch(() => null);
+  document.getElementById('km-loading').style.display = 'none';
+
+  if (!data || !data.nodes.length) {
+    document.getElementById('km-empty').classList.add('show');
+    _nodes = []; _links = []; _positions = {};
+    return;
+  }
+
+  _nodes = data.nodes;
+  _links = data.links;
+
+  // Build subject lookup for topics
+  _subjLookup = {};
+  const subjMap = {};
+  for (const n of _nodes) {
+    if (n.type === 'subject') subjMap[n.id] = n;
+  }
+  for (const lk of _links) {
+    if (subjMap[lk.source]) _subjLookup[lk.target] = subjMap[lk.source];
+  }
+
+  // ── Mastery deltas (compare with previous visit) ──
+  try { _prevMastery = JSON.parse(localStorage.getItem('ls_km_mastery') || '{}'); } catch { _prevMastery = {}; }
+  _deltas = {};
+  const newMastery = {};
+  for (const n of _nodes) {
+    if (n.type !== 'topic' || n.mastery === null) continue;
+    newMastery[n.id] = n.mastery;
+    const prev = _prevMastery[n.id];
+    if (prev !== undefined && n.mastery > prev) {
+      _deltas[n.id] = { delta: n.mastery - prev, opacity: 1 };
+    }
+  }
+  try { localStorage.setItem('ls_km_mastery', JSON.stringify(newMastery)); } catch {}
+
+  // Spawn particles for mastered nodes
+  _particles = [];
+  for (const n of _nodes) {
+    if (n.type === 'topic' && n.mastery !== null && n.mastery >= 70) {
+      for (let i = 0; i < 3; i++) {
+        _particles.push({
+          nodeId: n.id,
+          angle: Math.random() * Math.PI * 2,
+          dist: nodeRadius(n) + 10 + Math.random() * 14,
+          speed: 0.3 + Math.random() * 0.4,
+          size: 1.5 + Math.random() * 1.5,
+          alpha: 0.3 + Math.random() * 0.4,
+        });
+      }
+    }
+  }
+
+  // Generate background stars (once, or on reload)
+  _stars = [];
+  const _starW = _canvas.width / devicePixelRatio;
+  const _starH = _canvas.height / devicePixelRatio;
+  for (let i = 0; i < 120; i++) {
+    _stars.push({
+      x: Math.random() * _starW,
+      y: Math.random() * _starH,
+      size: 0.5 + Math.random() * 1.5,
+      alpha: 0.1 + Math.random() * 0.3,
+      twinkle: Math.random() * Math.PI * 2,
+    });
+  }
+
+  // Node ordering for stagger entrance (subjects first, then topics)
+  _nodeOrder = [];
+  for (const n of _nodes) if (n.type === 'subject') _nodeOrder.push(n.id);
+  for (const n of _nodes) if (n.type === 'topic') _nodeOrder.push(n.id);
+
+  // Start ring animation
+  _animStart = performance.now();
+
+  initPositions();
+  kickSim(1);
+  updateStats();
+}
+
+/* ═══════════════════════════════════════════════════════
+   STATS BAR
+═══════════════════════════════════════════════════════ */
+function updateStats() {
+  const topics = _nodes.filter(n => n.type === 'topic');
+  if (!topics.length) return;
+
+  const mastered  = topics.filter(n => n.mastery !== null && n.mastery >= 70).length;
+  const inProg    = topics.filter(n => n.mastery !== null && n.mastery < 70).length;
+  const fresh     = topics.filter(n => n.mastery === null).length;
+  const studied   = mastered + inProg;
+  const pct       = Math.round((mastered / topics.length) * 100);
+  const gradColor = pct >= 70 ? '#06D6A0' : pct >= 30 ? '#FFD166' : '#F94144';
+
+  document.getElementById('stat-mastered-val').textContent = mastered;
+  document.getElementById('stat-progress-val').textContent = inProg;
+  document.getElementById('stat-new-val').textContent      = fresh;
+  document.getElementById('km-prog-fill').style.width      = pct + '%';
+  document.getElementById('km-prog-fill').style.background = gradColor;
+  document.getElementById('km-prog-pct').textContent       = pct + '%';
+  document.getElementById('km-prog-pct').style.color       = gradColor;
+
+  document.getElementById('km-sub-text').textContent =
+    `${studied} из ${topics.length} тем изучается · ${mastered} освоено`;
+
+  document.getElementById('km-stats').style.display  = '';
+  document.getElementById('km-prog-wrap').style.display = '';
+}
+
+/* ═══════════════════════════════════════════════════════
+   POSITIONS — cluster topics near their subject
+═══════════════════════════════════════════════════════ */
+function initPositions() {
+  const W = _canvas.width  / devicePixelRatio;
+  const H = _canvas.height / devicePixelRatio;
+  const subjs  = _nodes.filter(n => n.type === 'subject');
+  const topics = _nodes.filter(n => n.type === 'topic');
+  _positions   = {};
+
+  const cx = W / 2, cy = H / 2;
+  const sr  = Math.min(W, H) * 0.28;
+
+  // Place subjects in a ring
+  subjs.forEach((s, i) => {
+    const angle = (i / subjs.length) * Math.PI * 2 - Math.PI / 2;
+    _positions[s.id] = { x: cx + sr * Math.cos(angle), y: cy + sr * Math.sin(angle), vx: 0, vy: 0, pinned: false };
+  });
+
+  // Place topics near their subject
+  topics.forEach((t, i) => {
+    const subj = _subjLookup[t.id];
+    const sp   = subj ? _positions[subj.id] : { x: cx, y: cy };
+    const angle = Math.random() * Math.PI * 2;
+    const r     = 60 + Math.random() * 40;
+    _positions[t.id] = { x: sp.x + r * Math.cos(angle), y: sp.y + r * Math.sin(angle), vx: 0, vy: 0, pinned: false };
+  });
+}
+
+/* ═══════════════════════════════════════════════════════
+   SIMULATION
+═══════════════════════════════════════════════════════ */
+function kickSim(heat) { _alpha = heat; }
+
+function simulate() {
+  if (_alpha < 0.001) return;
+  const W = _canvas.width  / devicePixelRatio;
+  const H = _canvas.height / devicePixelRatio;
+
+  // Repulsion
+  for (let i = 0; i < _nodes.length; i++) {
+    for (let j = i + 1; j < _nodes.length; j++) {
+      const a = _positions[_nodes[i].id];
+      const b = _positions[_nodes[j].id];
+      if (!a || !b) continue;
+      const dx = b.x - a.x, dy = b.y - a.y;
+      const dist2 = dx * dx + dy * dy || 0.01;
+      const dist  = Math.sqrt(dist2);
+      const ri = nodeRadius(_nodes[i]), rj = nodeRadius(_nodes[j]);
+      const minDist = ri + rj + ((_nodes[i].type === 'subject' || _nodes[j].type === 'subject') ? 70 : 30);
+      if (dist < minDist) {
+        const f = (minDist - dist) / dist * 0.35 * _alpha;
+        a.vx -= dx * f; a.vy -= dy * f;
+        b.vx += dx * f; b.vy += dy * f;
+      }
+    }
+  }
+
+  // Spring on links
+  for (const lk of _links) {
+    const a = _positions[lk.source];
+    const b = _positions[lk.target];
+    if (!a || !b) continue;
+    const dx = b.x - a.x, dy = b.y - a.y;
+    const dist = Math.sqrt(dx * dx + dy * dy) || 0.1;
+    const rest = lk.source.startsWith('subj') ? 110 : 90;
+    const f = (dist - rest) / dist * 0.06 * _alpha;
+    a.vx += dx * f; a.vy += dy * f;
+    b.vx -= dx * f; b.vy -= dy * f;
+  }
+
+  // Gravity to center
+  for (const n of _nodes) {
+    const p = _positions[n.id];
+    if (!p || p.pinned) continue;
+    p.vx += (W / 2 - p.x) * 0.004 * _alpha;
+    p.vy += (H / 2 - p.y) * 0.004 * _alpha;
+  }
+
+  // Integrate
+  for (const n of _nodes) {
+    if (_dragging === n.id) continue;
+    const p = _positions[n.id];
+    if (!p || p.pinned) continue;
+    p.vx *= 0.65; p.vy *= 0.65;
+    p.x += p.vx;  p.y += p.vy;
+    const pad = 44;
+    p.x = Math.max(pad, Math.min(W - pad, p.x));
+    p.y = Math.max(pad, Math.min(H - pad, p.y));
+  }
+
+  _alpha *= 0.96;
+}
+
+/* ═══════════════════════════════════════════════════════
+   RENDER LOOP
+═══════════════════════════════════════════════════════ */
+function startRender() {
+  if (_raf) cancelAnimationFrame(_raf);
+  function loop() {
+    simulate();
+    // Smooth view interpolation
+    _view.x     += (_tview.x     - _view.x)     * 0.12;
+    _view.y     += (_tview.y     - _view.y)     * 0.12;
+    _view.scale += (_tview.scale - _view.scale) * 0.12;
+    draw();
+    drawMinimap();
+    _raf = requestAnimationFrame(loop);
+  }
+  _raf = requestAnimationFrame(loop);
+}
+
+/* ═══════════════════════════════════════════════════════
+   DRAW
+═══════════════════════════════════════════════════════ */
+function draw() {
+  if (!_ctx || !_canvas) return;
+  const DPR = devicePixelRatio;
+  const W   = _canvas.width / DPR, H = _canvas.height / DPR;
+  const now = performance.now();
+  const animT = Math.min(1, (now - _animStart) / RING_ANIM_MS);
+  const ease  = 1 - Math.pow(1 - animT, 3);
+  _pulsePhase = (now % 2400) / 2400;
+  _dashOffset = (now % 3000) / 3000 * 20; // dash flow cycle
+
+  _ctx.clearRect(0, 0, _canvas.width, _canvas.height);
+
+  // ══ 1. COSMIC BACKGROUND (screen-space, before world transform) ══
+  _ctx.save();
+  _ctx.scale(DPR, DPR);
+  // Dark base fill
+  _ctx.fillStyle = '#08080f';
+  _ctx.fillRect(0, 0, W, H);
+  // Nebula glow — fixed to screen
+  const ncx = W / 2, ncy = H / 2;
+  const nebR = Math.max(W, H) * 0.7;
+  const neb = _ctx.createRadialGradient(ncx, ncy, 0, ncx, ncy, nebR);
+  neb.addColorStop(0, 'rgba(155,93,229,0.08)');
+  neb.addColorStop(0.35, 'rgba(6,214,224,0.03)');
+  neb.addColorStop(0.7, 'rgba(155,93,229,0.015)');
+  neb.addColorStop(1, 'transparent');
+  _ctx.fillStyle = neb;
+  _ctx.fillRect(0, 0, W, H);
+  // Secondary glow offset
+  const neb2 = _ctx.createRadialGradient(W * 0.75, H * 0.3, 0, W * 0.75, H * 0.3, nebR * 0.5);
+  neb2.addColorStop(0, 'rgba(6,214,224,0.05)');
+  neb2.addColorStop(1, 'transparent');
+  _ctx.fillStyle = neb2;
+  _ctx.fillRect(0, 0, W, H);
+  // Stars (screen-space, parallax-shifted slightly by view)
+  const px = _view.x * 0.05, py = _view.y * 0.05; // subtle parallax
+  for (const st of _stars) {
+    const twinkle = Math.sin(now * 0.001 + st.twinkle) * 0.5 + 0.5;
+    _ctx.globalAlpha = st.alpha * (0.4 + twinkle * 0.6);
+    const sx = ((st.x + px) % W + W) % W;
+    const sy = ((st.y + py) % H + H) % H;
+    _ctx.beginPath();
+    _ctx.arc(sx, sy, st.size, 0, Math.PI * 2);
+    _ctx.fillStyle = '#fff';
+    _ctx.fill();
+  }
+  _ctx.globalAlpha = 1;
+  _ctx.restore();
+
+  // World-space transform
+  _ctx.save();
+  _ctx.scale(DPR, DPR);
+  _ctx.translate(_view.x, _view.y);
+  _ctx.scale(_view.scale, _view.scale);
+
+  const sel = _selectedId;
+
+  // ══ 2. CLUSTER HALOS — soft glow behind each subject's topics ══
+  const subjNodes = _nodes.filter(n => n.type === 'subject');
+  for (const sn of subjNodes) {
+    const sp = _positions[sn.id];
+    if (!sp) continue;
+    const color = SUBJ_COLORS[sn.slug] || '#9B5DE5';
+    // Find bounding radius of cluster
+    const childIds = _links.filter(l => l.source === sn.id).map(l => l.target);
+    let maxDist = 60;
+    for (const cid of childIds) {
+      const cp = _positions[cid];
+      if (!cp) continue;
+      const d = Math.sqrt((cp.x - sp.x) ** 2 + (cp.y - sp.y) ** 2);
+      if (d > maxDist) maxDist = d;
+    }
+    const haloR = maxDist + 40;
+    const halo = _ctx.createRadialGradient(sp.x, sp.y, 0, sp.x, sp.y, haloR);
+    halo.addColorStop(0, color + '0A'); // very subtle center
+    halo.addColorStop(0.6, color + '05');
+    halo.addColorStop(1, 'transparent');
+    const isDimmed = sel && sel !== sn.id && !childIds.some(id => id === sel);
+    _ctx.globalAlpha = isDimmed ? 0.05 : 0.7;
+    _ctx.beginPath();
+    _ctx.arc(sp.x, sp.y, haloR, 0, Math.PI * 2);
+    _ctx.fillStyle = halo;
+    _ctx.fill();
+  }
+  _ctx.globalAlpha = 1;
+
+  // ══ 3. LINKS — gradient + dash flow ══
+  for (const lk of _links) {
+    const a = _positions[lk.source], b = _positions[lk.target];
+    if (!a || !b) continue;
+    const isConnected = !sel || sel === lk.source || sel === lk.target;
+    const subj = _nodes.find(n => n.id === lk.source);
+    const subjColor = subj ? (SUBJ_COLORS[subj.slug] || '#9B5DE5') : '#9B5DE5';
+    const topicNode = _nodes.find(n => n.id === lk.target);
+    const topicColor = topicNode ? masteryColor(topicNode.mastery) : 'rgba(255,255,255,.15)';
+
+    if (sel && isConnected) {
+      // Gradient link when selected
+      const lg = _ctx.createLinearGradient(a.x, a.y, b.x, b.y);
+      lg.addColorStop(0, subjColor + 'CC');
+      lg.addColorStop(1, topicColor + '88');
+      _ctx.strokeStyle = lg;
+      _ctx.lineWidth = 1.8;
+      // Animated dash flow
+      _ctx.setLineDash([4, 6]);
+      _ctx.lineDashOffset = -_dashOffset;
+    } else if (!sel) {
+      _ctx.strokeStyle = 'rgba(255,255,255,.07)';
+      _ctx.lineWidth = 1;
+      _ctx.setLineDash([]);
+    } else {
+      _ctx.strokeStyle = 'rgba(255,255,255,.02)';
+      _ctx.lineWidth = 0.5;
+      _ctx.setLineDash([]);
+    }
+
+    _ctx.beginPath();
+    _ctx.moveTo(a.x, a.y);
+    _ctx.lineTo(b.x, b.y);
+    _ctx.stroke();
+    _ctx.setLineDash([]);
+  }
+
+  // ══ 4. NODES ══
+  for (const n of _nodes) {
+    const p = _positions[n.id];
+    if (!p) continue;
+    const isSubj   = n.type === 'subject';
+    const baseR    = nodeRadius(n);
+    const isHover  = _hoverId === n.id;
+    const isSel    = _selectedId === n.id;
+    const isDimmed = sel && sel !== n.id && !isConnectedTo(n.id, sel);
+    const isMastered = !isSubj && n.mastery !== null && n.mastery >= 70;
+    const isNew      = !isSubj && n.mastery === null;
+
+    // ── Stagger entrance scale ──
+    const idx = _nodeOrder.indexOf(n.id);
+    const entranceT = Math.min(1, Math.max(0, (now - _animStart - idx * ENTRANCE_STAGGER) / ENTRANCE_MS));
+    const entranceScale = 1 - Math.pow(1 - entranceT, 3); // easeOutCubic
+    if (entranceScale <= 0) continue; // not visible yet
+
+    const r     = baseR * entranceScale;
+    const alpha = (isDimmed ? 0.22 : 1) * entranceScale;
+
+    _ctx.globalAlpha = alpha;
+
+    // Pulse glow for mastered nodes
+    if (isMastered && !isDimmed && !isHover && !isSel) {
+      const pv = Math.sin(_pulsePhase * Math.PI * 2) * 0.5 + 0.5;
+      _ctx.shadowColor = 'rgba(6,214,160,' + (0.15 + pv * 0.2) + ')';
+      _ctx.shadowBlur  = 6 + pv * 8;
+    }
+
+    // Glow on hover or selected
+    if ((isHover || isSel) && !isDimmed) {
+      _ctx.shadowColor = isSubj ? (SUBJ_COLORS[n.slug] || '#9B5DE5') : masteryGlow(n.mastery) || '#9B5DE5';
+      _ctx.shadowBlur  = isSel ? 24 : 16;
+    }
+
+    // Fill
+    const grad = _ctx.createRadialGradient(p.x - r * 0.3, p.y - r * 0.3, 0, p.x, p.y, r);
+    if (isSubj) {
+      const c = SUBJ_COLORS[n.slug] || '#9B5DE5';
+      grad.addColorStop(0, c + 'EE');
+      grad.addColorStop(1, c + '88');
+    } else {
+      const c = masteryColor(n.mastery);
+      grad.addColorStop(0, c + 'CC');
+      grad.addColorStop(1, c + '66');
+    }
+    _ctx.beginPath();
+    _ctx.arc(p.x, p.y, r, 0, Math.PI * 2);
+    _ctx.fillStyle = grad;
+    _ctx.fill();
+
+    // Border — pulsing for untouched nodes
+    if (isNew && !isDimmed) {
+      const pv = Math.sin(_pulsePhase * Math.PI * 2) * 0.5 + 0.5;
+      _ctx.strokeStyle = `rgba(255,255,255,${0.12 + pv * 0.25})`;
+      _ctx.lineWidth = 1 + pv;
+    } else {
+      _ctx.strokeStyle = (isHover || isSel)
+        ? 'rgba(255,255,255,.7)'
+        : isSubj ? 'rgba(255,255,255,.25)' : 'rgba(255,255,255,.15)';
+      _ctx.lineWidth = (isHover || isSel) ? 2 : 1;
+    }
+    _ctx.stroke();
+    _ctx.shadowBlur = 0;
+
+    // Mastery ring (animated)
+    if (!isSubj && n.mastery !== null && entranceScale > 0.5) {
+      const animM = n.mastery * ease;
+      const arc = (animM / 100) * Math.PI * 2;
+      _ctx.beginPath();
+      _ctx.arc(p.x, p.y, r + 5, -Math.PI / 2, -Math.PI / 2 + arc);
+      _ctx.strokeStyle = masteryColor(n.mastery);
+      _ctx.lineWidth   = 3;
+      _ctx.lineCap     = 'round';
+      _ctx.stroke();
+      _ctx.lineCap = 'butt';
+      // Track
+      _ctx.beginPath();
+      _ctx.arc(p.x, p.y, r + 5, -Math.PI / 2 + arc, -Math.PI / 2 + Math.PI * 2);
+      _ctx.strokeStyle = 'rgba(255,255,255,.06)';
+      _ctx.lineWidth   = 3;
+      _ctx.stroke();
+    }
+
+    // Label
+    _ctx.globalAlpha = (isDimmed ? 0.18 : (isSubj ? 1 : 0.9)) * entranceScale;
+    _ctx.textAlign    = 'center';
+    _ctx.textBaseline = 'middle';
+    if (isSubj) {
+      _ctx.font = '700 11px Manrope, sans-serif';
+      _ctx.fillStyle = 'rgba(255,255,255,.95)';
+      _ctx.fillText(n.label.toUpperCase(), p.x, p.y);
+    } else {
+      const maxChars = Math.floor((r * 2 - 4) / 6);
+      const label = n.label.length > maxChars ? n.label.slice(0, maxChars - 1) + '…' : n.label;
+      _ctx.font = `600 ${Math.min(9.5, 34 / Math.max(label.length, 1) + 5)}px Manrope, sans-serif`;
+      _ctx.fillStyle = '#fff';
+      _ctx.fillText(label, p.x, p.y);
+    }
+
+    // Mastery % on hover
+    if (!isSubj && isHover && n.mastery !== null) {
+      _ctx.globalAlpha = 1;
+      _ctx.font = '700 9px Manrope, sans-serif';
+      _ctx.fillStyle = masteryColor(n.mastery);
+      _ctx.fillText(Math.round(n.mastery * ease) + '%', p.x, p.y + r + 13);
+    }
+
+    // Delta badge
+    const delta = _deltas[n.id];
+    if (delta && delta.opacity > 0 && !isDimmed) {
+      _ctx.globalAlpha = delta.opacity * entranceScale;
+      const bt = '+' + delta.delta + '%';
+      _ctx.font = '800 10px Unbounded, sans-serif';
+      const bw = _ctx.measureText(bt).width + 10;
+      const bx = p.x - bw / 2, by = p.y - r - 16;
+      _ctx.fillStyle = 'rgba(6,214,160,.9)';
+      _ctx.beginPath(); _ctx.roundRect(bx, by, bw, 16, 6); _ctx.fill();
+      _ctx.fillStyle = '#fff'; _ctx.textAlign = 'center'; _ctx.textBaseline = 'middle';
+      _ctx.fillText(bt, p.x, by + 8);
+      delta.opacity -= 0.003;
+    }
+
+    _ctx.globalAlpha = 1;
+  }
+
+  // ══ 5. PARTICLES ══
+  for (const pt of _particles) {
+    const p = _positions[pt.nodeId];
+    if (!p) continue;
+    const isDimmed = sel && sel !== pt.nodeId && !isConnectedTo(pt.nodeId, sel);
+    if (isDimmed) continue;
+    pt.angle += pt.speed * 0.02;
+    const px = p.x + Math.cos(pt.angle) * pt.dist;
+    const py = p.y + Math.sin(pt.angle) * pt.dist;
+    _ctx.globalAlpha = pt.alpha * (0.5 + Math.sin(pt.angle * 3) * 0.5);
+    _ctx.beginPath();
+    _ctx.arc(px, py, pt.size, 0, Math.PI * 2);
+    _ctx.fillStyle = '#06D6A0';
+    _ctx.fill();
+  }
+  _ctx.globalAlpha = 1;
+
+  _ctx.restore();
+}
+
+function isConnectedTo(nodeId, selId) {
+  return _links.some(lk =>
+    (lk.source === selId && lk.target === nodeId) ||
+    (lk.target === selId && lk.source === nodeId)
+  );
+}
+
+/* ═══════════════════════════════════════════════════════
+   CANVAS SETUP
+═══════════════════════════════════════════════════════ */
+function initCanvas() {
+  _canvas = document.getElementById('km-canvas');
+  _ctx    = _canvas.getContext('2d');
+  resizeCanvas();
+  window.addEventListener('resize', () => { resizeCanvas(); recenter(); });
+
+  _canvas.addEventListener('mousemove',  onMouseMove);
+  _canvas.addEventListener('mousedown',  onMouseDown);
+  _canvas.addEventListener('mouseup',    onMouseUp);
+  _canvas.addEventListener('dblclick',   onDblClick);
+  _canvas.addEventListener('mouseleave', () => {
+    _dragging = null; _panning = false;
+    _hoverId  = null;
+    if (!_ttHovered) { clearTimeout(_ttHideTimer); _ttHideTimer = setTimeout(hideTooltip, 200); }
+  });
+  _canvas.addEventListener('wheel', onWheel, { passive: false });
+
+  _canvas.addEventListener('contextmenu', onContextMenu);
+
+  // Keep tooltip alive when mouse enters it
+  const ttEl = document.getElementById('km-tooltip');
+  ttEl.addEventListener('mouseenter', () => { _ttHovered = true; clearTimeout(_ttHideTimer); });
+  ttEl.addEventListener('mouseleave', () => { _ttHovered = false; _ttHideTimer = setTimeout(hideTooltip, 150); });
+
+  // Click "Пройти тест" in tooltip
+  document.getElementById('tt-action').addEventListener('click', () => {
+    if (_ttNode && _ttNode.type === 'topic' && _ttNode.totalQ > 0) {
+      hideTooltip();
+      startQuickTest(_ttNode);
+    }
+  });
+  _canvas.addEventListener('touchstart',  onTouchStart,  { passive: false });
+  _canvas.addEventListener('touchmove',   onTouchMove,   { passive: false });
+  _canvas.addEventListener('touchend',    onTouchEnd);
+
+  // Close context menu on click anywhere
+  document.addEventListener('click', () => closeCtx());
+  document.addEventListener('contextmenu', e => {
+    if (!e.target.closest('#km-canvas') && !e.target.closest('.km-ctx')) closeCtx();
+  });
+}
+
+function resizeCanvas() {
+  if (!_canvas) return;
+  const wrap = document.getElementById('km-canvas-wrap');
+  _canvas.width  = wrap.clientWidth  * devicePixelRatio;
+  _canvas.height = wrap.clientHeight * devicePixelRatio;
+  _canvas.style.width  = wrap.clientWidth  + 'px';
+  _canvas.style.height = wrap.clientHeight + 'px';
+}
+
+/* ═══════════════════════════════════════════════════════
+   VIEW HELPERS
+═══════════════════════════════════════════════════════ */
+function recenter() {
+  const W = _canvas.width / devicePixelRatio;
+  const H = _canvas.height / devicePixelRatio;
+  _tview = { x: 0, y: 0, scale: 1 };
+}
+
+function zoomBy(factor, cx, cy) {
+  const W = _canvas.width / devicePixelRatio;
+  const H = _canvas.height / devicePixelRatio;
+  if (cx === undefined) { cx = W / 2; cy = H / 2; }
+  const ns = Math.max(0.2, Math.min(4, _tview.scale * factor));
+  _tview.x = cx - (cx - _tview.x) * (ns / _tview.scale);
+  _tview.y = cy - (cy - _tview.y) * (ns / _tview.scale);
+  _tview.scale = ns;
+}
+
+function toWorld(cx, cy) {
+  return { x: (cx - _view.x) / _view.scale, y: (cy - _view.y) / _view.scale };
+}
+
+/* ═══════════════════════════════════════════════════════
+   HIT TEST
+═══════════════════════════════════════════════════════ */
+function hitNode(cx, cy) {
+  const { x, y } = toWorld(cx, cy);
+  for (let i = _nodes.length - 1; i >= 0; i--) {
+    const n = _nodes[i];
+    const p = _positions[n.id];
+    if (!p) continue;
+    const r  = nodeRadius(n);
+    const dx = p.x - x, dy = p.y - y;
+    if (dx * dx + dy * dy <= r * r) return n;
+  }
+  return null;
+}
+
+/* ═══════════════════════════════════════════════════════
+   MOUSE EVENTS
+═══════════════════════════════════════════════════════ */
+function canvasXY(e) {
+  const rect = _canvas.getBoundingClientRect();
+  return { x: e.clientX - rect.left, y: e.clientY - rect.top };
+}
+
+let _mouseDownPos = null;
+let _mouseDownTime = 0;
+
+function onMouseMove(e) {
+  const { x, y } = canvasXY(e);
+
+  if (_dragging) {
+    const w = toWorld(x - _dragOff.x, y - _dragOff.y);
+    const p = _positions[_dragging];
+    if (p) { p.x = w.x + _dragOff.x; p.y = w.y + _dragOff.y; p.vx = 0; p.vy = 0; }
+    kickSim(0.1);
+    hideTooltip();
+    return;
+  }
+
+  if (_panning) {
+    _tview.x = _panStart.vx + (x - _panStart.mx);
+    _tview.y = _panStart.vy + (y - _panStart.my);
+    hideTooltip();
+    return;
+  }
+
+  const hit  = hitNode(x, y);
+  _hoverId   = hit ? hit.id : null;
+  _canvas.style.cursor = hit ? 'pointer' : 'grab';
+
+  if (hit) {
+    clearTimeout(_ttHideTimer);
+    showTooltip(hit, e.clientX, e.clientY);
+  } else if (!_ttHovered) {
+    // Delay hide so user can move mouse to tooltip
+    clearTimeout(_ttHideTimer);
+    _ttHideTimer = setTimeout(hideTooltip, 200);
+  }
+}
+
+function onMouseDown(e) {
+  const { x, y } = canvasXY(e);
+  _mouseDownPos  = { x, y };
+  _mouseDownTime = Date.now();
+
+  const hit = hitNode(x, y);
+  if (hit) {
+    _dragging = hit.id;
+    const p   = _positions[hit.id];
+    const w   = toWorld(x, y);
+    _dragOff  = { x: w.x - p.x, y: w.y - p.y };
+    kickSim(0.15);
+  } else {
+    _panning  = true;
+    _panStart = { mx: x, my: y, vx: _tview.x, vy: _tview.y };
+    _canvas.style.cursor = 'grabbing';
+  }
+}
+
+function onMouseUp(e) {
+  const { x, y } = canvasXY(e);
+  const moved = _mouseDownPos && (Math.abs(x - _mouseDownPos.x) + Math.abs(y - _mouseDownPos.y)) > 4;
+  const fast  = (Date.now() - _mouseDownTime) < 300;
+
+  if (!moved && fast) {
+    const hit = hitNode(x, y);
+    if (hit) {
+      _selectedId = (_selectedId === hit.id) ? null : hit.id;
+    } else {
+      _selectedId = null;
+    }
+  }
+  _dragging = null;
+  _panning  = false;
+  _canvas.style.cursor = 'grab';
+}
+
+function onDblClick(e) {
+  const { x, y } = canvasXY(e);
+  const hit = hitNode(x, y);
+  if (hit && hit.type === 'subject') {
+    drillInto(hit);
+  } else if (hit && hit.type === 'topic') {
+    // Focus on topic with smooth zoom
+    focusNode(hit.id);
+  } else {
+    recenter();
+    _selectedId = null;
+  }
+}
+
+function onWheel(e) {
+  e.preventDefault();
+  const { x, y } = canvasXY(e);
+  zoomBy(e.deltaY > 0 ? 0.88 : 1.14, x, y);
+}
+
+/* ── Touch ── */
+function onTouchStart(e) {
+  e.preventDefault();
+  const t = e.touches[0];
+  const rect = _canvas.getBoundingClientRect();
+  const x = t.clientX - rect.left, y = t.clientY - rect.top;
+  const hit = hitNode(x, y);
+  if (hit) {
+    _dragging = hit.id;
+    const p   = _positions[hit.id];
+    const w   = toWorld(x, y);
+    _dragOff  = { x: w.x - p.x, y: w.y - p.y };
+    kickSim(0.15);
+    showTooltip(hit, t.clientX, t.clientY);
+  } else {
+    _panning  = true;
+    _panStart = { mx: x, my: y, vx: _tview.x, vy: _tview.y };
+  }
+}
+function onTouchMove(e) {
+  e.preventDefault();
+  const t = e.touches[0];
+  const rect = _canvas.getBoundingClientRect();
+  const x = t.clientX - rect.left, y = t.clientY - rect.top;
+  if (_dragging) {
+    const w = toWorld(x, y);
+    const p = _positions[_dragging];
+    if (p) { p.x = w.x - _dragOff.x + _positions[_dragging].x; p.y = w.y - _dragOff.y + _positions[_dragging].y; }
+    kickSim(0.1);
+  } else if (_panning) {
+    _tview.x = _panStart.vx + (x - _panStart.mx);
+    _tview.y = _panStart.vy + (y - _panStart.my);
+  }
+}
+function onTouchEnd() { _dragging = null; _panning = false; }
+
+/* ═══════════════════════════════════════════════════════
+   TOOLTIP
+═══════════════════════════════════════════════════════ */
+function showTooltip(node, cx, cy) {
+  _ttNode = node;
+  const tt = document.getElementById('km-tooltip');
+
+  const subj = node.type === 'subject' ? null : (_subjLookup[node.id] || null);
+  const subjEl = document.getElementById('tt-subject');
+  if (subj) {
+    subjEl.textContent = subj.label;
+    subjEl.style.color = SUBJ_COLORS[subj.slug] || '#9B5DE5';
+    subjEl.style.display = '';
+  } else {
+    subjEl.style.display = 'none';
+  }
+
+  document.getElementById('tt-name').textContent = node.label;
+
+  const fill    = document.getElementById('tt-fill');
+  const pctEl   = document.getElementById('tt-mastery-pct');
+  const detEl   = document.getElementById('tt-mastery-detail');
+  const actEl   = document.getElementById('tt-action');
+
+  if (node.type === 'subject') {
+    fill.style.width      = '100%';
+    fill.style.background = SUBJ_COLORS[node.slug] || '#9B5DE5';
+    pctEl.textContent     = 'Предмет';
+    detEl.textContent     = '';
+    actEl.style.display   = 'none';
+  } else if (node.mastery === null) {
+    fill.style.width      = '2%';
+    fill.style.background = 'rgba(255,255,255,.2)';
+    pctEl.textContent     = 'Не начато';
+    detEl.textContent     = node.totalQ > 0 ? `${node.totalQ} вопросов` : 'Вопросов нет';
+    actEl.style.display   = node.totalQ > 0 ? '' : 'none';
+  } else {
+    const color           = masteryColor(node.mastery);
+    fill.style.width      = node.mastery + '%';
+    fill.style.background = color;
+    pctEl.textContent     = node.mastery + '%';
+    pctEl.style.color     = color;
+    detEl.textContent     = `${node.correctQ} / ${node.totalQ} верных`;
+    actEl.style.display   = '';
+  }
+
+  // Position
+  const ttW = 250, ttH = 110;
+  let tx = cx + 16, ty = cy - 14;
+  if (tx + ttW > window.innerWidth)  tx = cx - ttW - 12;
+  if (ty + ttH > window.innerHeight) ty = cy - ttH - 12;
+  if (ty < 4) ty = 4;
+
+  tt.style.left    = tx + 'px';
+  tt.style.top     = ty + 'px';
+  tt.style.display = 'block';
+}
+
+function hideTooltip() {
+  if (_ttHovered) return;
+  document.getElementById('km-tooltip').style.display = 'none';
+  _ttNode = null;
+}
+
+/* ═══════════════════════════════════════════════════════
+   RECOMMENDATION PANEL
+═══════════════════════════════════════════════════════ */
+function toggleReco() {
+  const panel = document.getElementById('km-reco');
+  const isOpen = panel.classList.toggle('open');
+  if (isOpen) buildRecoList();
+}
+
+function buildRecoList() {
+  const list = document.getElementById('km-reco-list');
+  const topics = _nodes.filter(n => n.type === 'topic' && n.totalQ > 0);
+
+  // Sort: worst mastery first (null = not started = priority), then by mastery ascending
+  const sorted = topics.slice().sort((a, b) => {
+    const am = a.mastery ?? -1;
+    const bm = b.mastery ?? -1;
+    return am - bm;
+  }).slice(0, 8);
+
+  if (!sorted.length) {
+    list.innerHTML = '<div class="km-reco-empty">Нет данных для рекомендаций</div>';
+    return;
+  }
+
+  list.innerHTML = sorted.map(n => {
+    const subj = _subjLookup[n.id];
+    const col  = subj ? (SUBJ_COLORS[subj.slug] || '#9B5DE5') : '#9B5DE5';
+    const m    = n.mastery;
+    const mCol = masteryColor(m);
+    const pct  = m !== null ? m + '%' : '—';
+    const barW = m !== null ? m : 0;
+    const reason = m === null
+      ? 'Ещё не начато — попробуйте!'
+      : m < 30 ? 'Низкий результат — стоит повторить'
+      : m < 70 ? 'Можно улучшить до уверенного уровня'
+      : 'Почти освоено — закрепите!';
+
+    return `<div class="km-reco-item" onclick="focusNode('${n.id}')">
+      <div class="km-reco-item-top">
+        <div class="km-reco-item-dot" style="background:${col}"></div>
+        <div class="km-reco-item-name">${LS.esc(n.label)}</div>
+        <div class="km-reco-item-pct" style="color:${mCol}">${pct}</div>
+      </div>
+      <div class="km-reco-item-bar"><div class="km-reco-item-fill" style="width:${barW}%;background:${mCol}"></div></div>
+      <div class="km-reco-item-sub">${subj ? esc(subj.label) : ''} · ${n.totalQ} вопросов</div>
+      <div class="km-reco-item-reason">${reason}</div>
+    </div>`;
+  }).join('');
+}
+
+function focusNode(nodeId) {
+  const p = _positions[nodeId];
+  if (!p) return;
+  _selectedId = nodeId;
+  const W = _canvas.width / devicePixelRatio;
+  const H = _canvas.height / devicePixelRatio;
+  _tview.x = W / 2 - p.x * 1.5;
+  _tview.y = H / 2 - p.y * 1.5;
+  _tview.scale = 1.5;
+}
+
+/* esc is already defined in api.js as window.LS.escapeHtml */
+
+/* ═══════════════════════════════════════════════════════
+   DRILL-DOWN — double-click subject to zoom into it
+═══════════════════════════════════════════════════════ */
+function drillInto(subjNode) {
+  // Find all topic positions connected to this subject
+  const topicIds = _links.filter(l => l.source === subjNode.id).map(l => l.target);
+  const allIds = [subjNode.id, ...topicIds];
+  const poses = allIds.map(id => _positions[id]).filter(Boolean);
+  if (!poses.length) return;
+
+  // Compute bounding box
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const p of poses) {
+    minX = Math.min(minX, p.x - 40);
+    minY = Math.min(minY, p.y - 40);
+    maxX = Math.max(maxX, p.x + 40);
+    maxY = Math.max(maxY, p.y + 40);
+  }
+
+  const W = _canvas.width / devicePixelRatio;
+  const H = _canvas.height / devicePixelRatio;
+  const bw = maxX - minX || 100;
+  const bh = maxY - minY || 100;
+  const scale = Math.min(W / bw, H / bh) * 0.8;
+  const clampedScale = Math.max(0.5, Math.min(3, scale));
+  const cx = (minX + maxX) / 2;
+  const cy = (minY + maxY) / 2;
+
+  _tview.scale = clampedScale;
+  _tview.x = W / 2 - cx * clampedScale;
+  _tview.y = H / 2 - cy * clampedScale;
+  _selectedId = subjNode.id;
+}
+
+/* ═══════════════════════════════════════════════════════
+   SEARCH
+═══════════════════════════════════════════════════════ */
+function searchTopic(query) {
+  const q = query.trim().toLowerCase();
+  if (!q) { _selectedId = null; return; }
+  const found = _nodes.find(n => n.type === 'topic' && n.label.toLowerCase().includes(q));
+  if (found) focusNode(found.id);
+}
+
+/* ═══════════════════════════════════════════════════════
+   MINIMAP — rendered every ~10 frames
+═══════════════════════════════════════════════════════ */
+function initMinimap() {
+  _mmCanvas = document.getElementById('km-minimap-canvas');
+  if (!_mmCanvas) return;
+  _mmCtx = _mmCanvas.getContext('2d');
+  const wrap = document.getElementById('km-minimap');
+  _mmCanvas.width  = wrap.clientWidth  * devicePixelRatio;
+  _mmCanvas.height = wrap.clientHeight * devicePixelRatio;
+}
+
+function drawMinimap() {
+  if (!_mmCtx || !_nodes.length) return;
+  _mmFrame++;
+  if (_mmFrame % 10 !== 0) return; // Draw every 10th frame for perf
+
+  const DPR = devicePixelRatio;
+  const mw = _mmCanvas.width / DPR, mh = _mmCanvas.height / DPR;
+  _mmCtx.clearRect(0, 0, _mmCanvas.width, _mmCanvas.height);
+  _mmCtx.save();
+  _mmCtx.scale(DPR, DPR);
+
+  // Compute world bounds
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const n of _nodes) {
+    const p = _positions[n.id];
+    if (!p) continue;
+    minX = Math.min(minX, p.x); minY = Math.min(minY, p.y);
+    maxX = Math.max(maxX, p.x); maxY = Math.max(maxY, p.y);
+  }
+  const pad = 30;
+  minX -= pad; minY -= pad; maxX += pad; maxY += pad;
+  const ww = maxX - minX || 100, wh = maxY - minY || 100;
+  const scale = Math.min(mw / ww, mh / wh);
+  const ox = (mw - ww * scale) / 2 - minX * scale;
+  const oy = (mh - wh * scale) / 2 - minY * scale;
+
+  // Draw nodes as dots
+  for (const n of _nodes) {
+    const p = _positions[n.id];
+    if (!p) continue;
+    const x = p.x * scale + ox, y = p.y * scale + oy;
+    const r = n.type === 'subject' ? 3 : 2;
+    _mmCtx.beginPath();
+    _mmCtx.arc(x, y, r, 0, Math.PI * 2);
+    _mmCtx.fillStyle = n.type === 'subject'
+      ? (SUBJ_COLORS[n.slug] || '#9B5DE5')
+      : masteryColor(n.mastery);
+    _mmCtx.globalAlpha = 0.8;
+    _mmCtx.fill();
+  }
+
+  // Draw viewport rectangle
+  const cw = _canvas.width / DPR, ch = _canvas.height / DPR;
+  const vx1 = (-_view.x / _view.scale) * scale + ox;
+  const vy1 = (-_view.y / _view.scale) * scale + oy;
+  const vw  = (cw / _view.scale) * scale;
+  const vh  = (ch / _view.scale) * scale;
+  _mmCtx.globalAlpha = 1;
+  _mmCtx.strokeStyle = 'rgba(155,93,229,.6)';
+  _mmCtx.lineWidth = 1;
+  _mmCtx.strokeRect(vx1, vy1, vw, vh);
+
+  _mmCtx.restore();
+}
+
+/* ═══════════════════════════════════════════════════════
+   CONTEXT MENU
+═══════════════════════════════════════════════════════ */
+let _ctxNode = null;
+
+function onContextMenu(e) {
+  e.preventDefault();
+  hideTooltip();
+  _ttHovered = false;
+  clearTimeout(_ttHideTimer);
+
+  const { x, y } = canvasXY(e);
+  const hit = hitNode(x, y);
+  if (!hit || hit.type === 'subject') { closeCtx(); return; }
+
+  _ctxNode = hit;
+  const ctx = document.getElementById('km-ctx');
+  document.getElementById('km-ctx-head').textContent = hit.label;
+
+  // Show/hide test option based on question count
+  document.getElementById('ctx-test').style.display = hit.totalQ > 0 ? '' : 'none';
+
+  // Position
+  let tx = e.clientX, ty = e.clientY;
+  if (tx + 200 > window.innerWidth) tx = e.clientX - 200;
+  if (ty + 160 > window.innerHeight) ty = e.clientY - 160;
+  ctx.style.left = tx + 'px';
+  ctx.style.top  = ty + 'px';
+  ctx.classList.add('open');
+
+  hideTooltip();
+}
+
+function closeCtx() {
+  document.getElementById('km-ctx').classList.remove('open');
+}
+
+// Wire context menu actions
+document.getElementById('ctx-test').addEventListener('click', () => {
+  closeCtx();
+  if (_ctxNode) startQuickTest(_ctxNode);
+});
+document.getElementById('ctx-theory').addEventListener('click', () => {
+  closeCtx();
+  if (_ctxNode) {
+    const subj = _subjLookup[_ctxNode.id];
+    if (subj) window.location.href = `/theory?subject=${subj.slug}`;
+    else window.location.href = '/theory';
+  }
+});
+document.getElementById('ctx-focus').addEventListener('click', () => {
+  closeCtx();
+  if (_ctxNode) focusNode(_ctxNode.id);
+});
+
+/* ═══════════════════════════════════════════════════════
+   QUICK TEST — inline 5-question test from topic
+═══════════════════════════════════════════════════════ */
+let _qt = {
+  node: null,
+  sessionId: null,
+  questions: [],
+  current: 0,
+  score: 0,
+  answered: false,
+};
+
+async function startQuickTest(node) {
+  const subj = _subjLookup[node.id];
+  if (!subj) return;
+
+  const topicId = node.id.replace('topic_', '');
+  document.getElementById('qtest-title').textContent = 'Тест: ' + node.label;
+  document.getElementById('qtest-body').innerHTML =
+    '<div style="text-align:center;padding:40px;color:#8898AA"><div class="km-spinner" style="margin:0 auto 12px;width:24px;height:24px;border-width:3px"></div>Загрузка вопросов...</div>';
+  document.getElementById('km-qtest').classList.add('open');
+
+  try {
+    const data = await LS.startSession(subj.slug, 'practice', 5, topicId, null);
+    _qt = {
+      node,
+      sessionId: data.session_id,
+      questions: data.questions || [],
+      current: 0,
+      score: 0,
+      answered: false,
+    };
+    if (!_qt.questions.length) {
+      document.getElementById('qtest-body').innerHTML =
+        '<div style="text-align:center;padding:40px;color:#8898AA">Нет вопросов по этой теме</div>';
+      return;
+    }
+    renderQuestion();
+  } catch (e) {
+    document.getElementById('qtest-body').innerHTML =
+      `<div style="text-align:center;padding:40px;color:#ef4444">${LS.esc(e.message || 'Ошибка запуска теста')}</div>`;
+  }
+}
+
+function renderQuestion() {
+  const q = _qt.questions[_qt.current];
+  if (!q) return;
+  _qt.answered = false;
+  const total = _qt.questions.length;
+  const pct = Math.round((_qt.current / total) * 100);
+  const LABELS = ['A', 'B', 'C', 'D', 'E', 'F'];
+
+  let html = `
+    <div class="km-qtest-progress">
+      <div class="km-qtest-pbar"><div class="km-qtest-pfill" style="width:${pct}%"></div></div>
+      <div class="km-qtest-ptext">${_qt.current + 1}/${total}</div>
+    </div>
+    <div class="km-qtest-q">${q.text}</div>
+    <div class="km-qtest-opts" id="qtest-opts">`;
+
+  if (q.options && q.options.length) {
+    q.options.forEach((opt, i) => {
+      html += `<div class="km-qtest-opt" data-oid="${opt.id}" onclick="answerQuick(${opt.id}, this)">
+        <div class="km-qtest-opt-marker">${LABELS[i] || ''}</div>
+        <div>${LS.esc(opt.text)}</div>
+      </div>`;
+    });
+  } else {
+    // Short answer
+    html += `<div style="display:flex;gap:10px">
+      <input type="text" id="qtest-input" class="form-input" style="flex:1;margin:0" placeholder="Введите ответ..." onkeydown="if(event.key==='Enter')answerQuickText()" />
+      <button onclick="answerQuickText()" style="padding:10px 20px;border:none;border-radius:12px;background:#9B5DE5;color:#fff;font-weight:700;cursor:pointer">OK</button>
+    </div>`;
+  }
+
+  html += '</div><div class="km-qtest-explain" id="qtest-explain"></div>';
+  document.getElementById('qtest-body').innerHTML = html;
+  renderMath(document.getElementById('qtest-body'));
+}
+
+async function answerQuick(optionId, el) {
+  if (_qt.answered) return;
+  _qt.answered = true;
+  const q = _qt.questions[_qt.current];
+
+  // Disable all options
+  document.querySelectorAll('.km-qtest-opt').forEach(o => o.classList.add('dimmed'));
+  el.classList.remove('dimmed');
+
+  try {
+    const res = await LS.sendAnswer(_qt.sessionId, q.id, optionId, null);
+    if (res.is_correct) {
+      el.classList.add('correct');
+      _qt.score++;
+    } else {
+      el.classList.add('wrong');
+      // Highlight correct option(s) in practice mode
+      if (res.correct_options?.length) {
+        for (const co of res.correct_options) {
+          const cel = document.querySelector(`[data-oid="${co.id}"]`);
+          if (cel) { cel.classList.remove('dimmed'); cel.classList.add('correct'); }
+        }
+      }
+    }
+  } catch {}
+
+  setTimeout(nextQuestion, 1500);
+}
+
+async function answerQuickText() {
+  if (_qt.answered) return;
+  _qt.answered = true;
+  const q = _qt.questions[_qt.current];
+  const inp = document.getElementById('qtest-input');
+  const text = inp?.value?.trim() || '';
+  if (!text) { _qt.answered = false; return; }
+  inp.disabled = true;
+
+  try {
+    const res = await LS.sendAnswer(_qt.sessionId, q.id, null, text);
+    if (res.is_correct) {
+      inp.style.borderColor = '#22c55e';
+      inp.style.background = 'rgba(34,197,94,.06)';
+      _qt.score++;
+    } else {
+      inp.style.borderColor = '#ef4444';
+      inp.style.background = 'rgba(239,68,68,.06)';
+      // Show correct answer in practice mode
+      if (res.correct_text) {
+        const expEl = document.getElementById('qtest-explain');
+        expEl.textContent = 'Правильный ответ: ' + res.correct_text;
+        expEl.style.display = '';
+      }
+    }
+  } catch {}
+
+  setTimeout(nextQuestion, 1500);
+}
+
+async function nextQuestion() {
+  _qt.current++;
+  if (_qt.current < _qt.questions.length) {
+    renderQuestion();
+  } else {
+    // Finish session
+    try { await LS.finishSession(_qt.sessionId); } catch {}
+    showQuickResult();
+  }
+}
+
+function showQuickResult() {
+  const total = _qt.questions.length;
+  const pct = Math.round((_qt.score / total) * 100);
+  const col = pct >= 70 ? '#22c55e' : pct >= 40 ? '#FFD166' : '#ef4444';
+
+  document.getElementById('qtest-body').innerHTML = `
+    <div class="km-qtest-result">
+      <div class="km-qtest-result-score" style="color:${col}">${_qt.score}/${total}</div>
+      <div class="km-qtest-result-label">${pct}% правильных ответов</div>
+      <button class="km-qtest-result-btn" onclick="closeQuickTest(); loadMap();">Вернуться к карте</button>
+    </div>
+  `;
+
+  // Update the node's mastery visually (will be correct after reload)
+  if (_qt.node) {
+    const prev = _qt.node.mastery;
+    // Optimistic: blend old mastery with new result
+    _qt.node.mastery = prev !== null
+      ? Math.round((prev + pct) / 2)
+      : pct;
+  }
+}
+
+function closeQuickTest() {
+  document.getElementById('km-qtest').classList.remove('open');
+}
+
+/* ── KaTeX formula rendering ── */
+function renderMath(el) {
+  if (!el) return;
+  const run = () => {
+    if (window.renderMathInElement) {
+      renderMathInElement(el, {
+        delimiters: [
+          { left: '\\(', right: '\\)', display: false },
+          { left: '\\[', right: '\\]', display: true },
+        ],
+        throwOnError: false,
+      });
+    }
+  };
+  if (window._katexReady) run(); else window._katexReadyCb = run;
+}
+</script>
+</body>
+</html>
diff --git a/frontend/lab.html b/frontend/lab.html
new file mode 100644
index 0000000..baea92c
--- /dev/null
+++ b/frontend/lab.html
@@ -0,0 +1,8010 @@
+<!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" />
+  <style>
+    /* ── page fill so sim canvas can go full-height ── */
+    .app-layout  { height: 100vh; overflow: hidden; }
+    .sb-content  { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
+
+    /* ════════════════════════════════
+       HOME VIEW
+    ════════════════════════════════ */
+    #lab-home { flex: 1; overflow-y: auto; padding: 36px 28px 80px; }
+
+    .lab-hero {
+      display: flex; align-items: center; gap: 20px;
+      margin-bottom: 36px;
+    }
+    .lab-hero-icon {
+      width: 64px; height: 64px; border-radius: 20px; flex-shrink: 0;
+      background: linear-gradient(135deg, rgba(155,93,229,.35), rgba(6,214,224,.25));
+      border: 1.5px solid rgba(255,255,255,.12);
+      display: flex; align-items: center; justify-content: center;
+    }
+    .lab-hero-icon svg { width: 30px; height: 30px; stroke: #9B5DE5; stroke-width: 1.5; }
+    .lab-hero-title {
+      font-family: 'Unbounded', sans-serif; font-size: 1.55rem; font-weight: 800;
+      letter-spacing: -0.02em; margin-bottom: 5px;
+    }
+    .lab-hero-sub { font-size: 0.9rem; color: var(--text-2); font-weight: 500; }
+
+    /* category filter */
+    .lab-filters {
+      display: flex; gap: 6px; margin-bottom: 28px; flex-wrap: wrap;
+    }
+    .lab-filter {
+      padding: 6px 18px; border-radius: 99px;
+      border: 1.5px solid var(--border-h);
+      background: var(--surface); color: var(--text-2);
+      font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 700;
+      cursor: pointer; transition: all .16s;
+    }
+    .lab-filter:hover { border-color: rgba(155,93,229,.4); color: var(--violet); }
+    .lab-filter.active { background: #0F172A; color: #fff; border-color: #0F172A; }
+
+    /* sim grid */
+    .sim-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
+      gap: 20px;
+    }
+
+    .sim-card {
+      background: var(--surface);
+      border: 1.5px solid var(--border);
+      border-radius: 20px;
+      overflow: hidden;
+      cursor: pointer;
+      transition: border-color .18s, box-shadow .18s, transform .18s;
+      position: relative;
+    }
+    .sim-card:hover {
+      border-color: var(--violet);
+      box-shadow: 0 8px 32px rgba(155,93,229,.18);
+      transform: translateY(-2px);
+    }
+    .sim-card.soon { cursor: default; opacity: .65; }
+    .sim-card.soon:hover { transform: none; box-shadow: none; border-color: var(--border); }
+
+    .sim-preview {
+      width: 100%; height: 140px; display: block;
+      background: #0D0D1A;
+    }
+
+    .sim-body { padding: 18px 20px 20px; }
+    .sim-cat {
+      display: inline-flex; align-items: center; gap: 5px;
+      font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
+      padding: 3px 10px; border-radius: 99px; margin-bottom: 10px;
+    }
+    .sim-cat.math { background: rgba(155,93,229,.12); color: var(--violet); }
+    .sim-cat.phys { background: rgba(6,214,224,.1);  color: #06D6E0; }
+
+    .sim-title {
+      font-family: 'Unbounded', sans-serif; font-size: 0.9rem; font-weight: 800;
+      margin-bottom: 6px; letter-spacing: -.01em;
+    }
+    .sim-desc { font-size: 0.82rem; color: var(--text-2); line-height: 1.55; }
+
+    .sim-soon-badge {
+      position: absolute; top: 12px; right: 12px;
+      background: rgba(15,23,42,.7); color: rgba(255,255,255,.55);
+      font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
+      padding: 3px 9px; border-radius: 99px; backdrop-filter: blur(6px);
+      border: 1px solid rgba(255,255,255,.1);
+    }
+
+    /* ════════════════════════════════
+       SIM VIEW (graph)
+    ════════════════════════════════ */
+    #lab-sim {
+      display: none;
+      flex: 1; min-height: 0;
+      flex-direction: column;
+    }
+    #lab-sim.open { display: flex; }
+
+    /* top bar */
+    .sim-topbar {
+      flex-shrink: 0;
+      display: flex; align-items: center; gap: 12px;
+      padding: 10px 18px;
+      background: var(--surface);
+      border-bottom: 1.5px solid var(--border);
+    }
+    .sim-back {
+      display: flex; align-items: center; gap: 6px;
+      padding: 6px 14px; border-radius: 99px;
+      border: 1.5px solid var(--border-h);
+      background: transparent; color: var(--text-2);
+      font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 700;
+      cursor: pointer; transition: all .15s;
+    }
+    .sim-back:hover { border-color: var(--violet); color: var(--violet); }
+    .sim-back svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.2; flex-shrink: 0; }
+
+    .sim-topbar-title {
+      font-family: 'Unbounded', sans-serif; font-size: 0.88rem; font-weight: 800;
+      flex: 1;
+    }
+
+    .sim-zoom-btns { display: flex; gap: 4px; }
+    .zoom-btn {
+      width: 32px; 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;
+      transition: all .15s;
+    }
+    .zoom-btn:hover { border-color: var(--violet); color: var(--violet); background: rgba(155,93,229,.07); }
+    .zoom-btn svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.2; }
+
+    /* sim body */
+    .sim-body-wrap {
+      flex: 1; min-height: 0;
+      display: flex;
+    }
+
+    /* left panel */
+    .graph-panel {
+      width: 280px; flex-shrink: 0;
+      background: var(--surface);
+      border-right: 1.5px solid var(--border);
+      display: flex; flex-direction: column;
+      overflow-y: auto;
+      padding: 16px 14px;
+      gap: 6px;
+    }
+
+    .gp-section-title {
+      font-family: 'Unbounded', sans-serif; font-size: 0.62rem; font-weight: 800;
+      color: var(--text-3); text-transform: uppercase; letter-spacing: .08em;
+      display: flex; align-items: center; gap: 8px; margin: 4px 0 8px;
+    }
+    .gp-section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }
+
+    /* function rows */
+    .fn-row {
+      display: flex; align-items: center; gap: 8px;
+      padding: 8px 10px; border-radius: 12px;
+      border: 1.5px solid var(--border);
+      background: rgba(15,23,42,.03);
+      transition: border-color .15s;
+    }
+    .fn-label {
+      font-family: 'Manrope', monospace; font-size: 0.85rem; font-weight: 700;
+      color: var(--fn-color, #9B5DE5); flex-shrink: 0; letter-spacing: .01em;
+    }
+    .fn-row:focus-within { border-color: var(--fn-color, #9B5DE5); }
+
+    .fn-dot {
+      width: 12px; height: 12px; border-radius: 50%;
+      flex-shrink: 0;
+      background: var(--fn-color, #9B5DE5);
+      box-shadow: 0 0 6px var(--fn-color, #9B5DE5);
+    }
+    .fn-input {
+      flex: 1; border: none; outline: none; background: transparent;
+      font-family: 'Manrope', monospace; font-size: 0.88rem; font-weight: 600;
+      color: var(--text); padding: 0; min-width: 0;
+    }
+    .fn-input::placeholder { color: var(--text-3); font-weight: 500; }
+
+    /* KaTeX live preview */
+    .fn-preview {
+      min-height: 20px; padding: 3px 4px 3px 36px;
+      font-size: 0.82rem; line-height: 1.5;
+      color: rgba(255,255,255,.65);
+      overflow: hidden; display: none;
+    }
+    .fn-preview.has-content { display: block; }
+    .fn-preview .katex { color: rgba(255,255,255,.8); font-size: 1em; }
+    .fn-err {
+      font-size: 0.68rem; color: var(--pink); font-weight: 600;
+      padding: 2px 0 0 22px; display: none;
+    }
+    .fn-err.show { display: block; }
+
+    /* presets */
+    .presets-wrap { display: flex; flex-wrap: wrap; gap: 5px; }
+    .preset-btn {
+      padding: 4px 11px; border-radius: 8px;
+      border: 1.5px solid var(--border-h);
+      background: transparent; color: var(--text-2);
+      font-family: 'Manrope', monospace; font-size: 0.75rem; font-weight: 700;
+      cursor: pointer; transition: all .14s;
+    }
+    .preset-btn:hover {
+      border-color: var(--violet); color: var(--violet);
+      background: rgba(155,93,229,.07);
+    }
+
+    /* info / actions */
+    .gp-btn {
+      display: flex; align-items: center; justify-content: center; gap: 7px;
+      padding: 9px 14px; border-radius: 12px;
+      border: 1.5px solid var(--border-h);
+      background: transparent; color: var(--text-2);
+      font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 700;
+      cursor: pointer; transition: all .15s; width: 100%;
+    }
+    .gp-btn:hover { border-color: var(--violet); color: var(--violet); background: rgba(155,93,229,.06); }
+    .gp-btn svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; flex-shrink: 0; }
+
+    /* stereo param sliders */
+    .stereo-sl-row { margin-bottom: 6px; }
+    .stereo-sl-row label { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--text-2); margin-bottom: 2px; }
+    .stereo-sl-row label span { color: var(--violet); font-weight: 700; }
+    .stereo-sl-row input[type=range] { width: 100%; accent-color: var(--violet); }
+    .stereo-fig-btn.active, .stereo-toggle.active, .stereo-sect-btn.active, .stereo-sect-type.active {
+      border-color: var(--violet) !important; color: var(--violet) !important; background: rgba(155,93,229,.1) !important;
+    }
+    #stereo-unfold-btn.active, #stereo-measure-btn.active, #stereo-inscribed-btn.active, #stereo-circumscribed-btn.active {
+      border-color: var(--violet) !important; color: var(--violet) !important; background: rgba(155,93,229,.1) !important;
+    }
+
+    .gp-preset-group { margin-bottom: 8px; }
+    .gp-preset-label {
+      font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
+      letter-spacing: .06em; color: var(--text-3);
+      margin: 6px 0 4px;
+    }
+
+    /* canvas area */
+    .graph-canvas-outer {
+      flex: 1; min-width: 0; min-height: 0;
+      display: flex; flex-direction: column;
+    }
+    .graph-canvas-wrap {
+      flex: 1; min-height: 0; position: relative;
+    }
+    #graph-canvas { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
+
+    /* info bar */
+    .graph-info-bar {
+      flex-shrink: 0;
+      display: flex; align-items: center; gap: 20px;
+      padding: 8px 18px;
+      background: #0D0D1A;
+      border-top: 1px solid rgba(255,255,255,.07);
+      font-family: 'Manrope', monospace; font-size: 0.8rem;
+      color: rgba(255,255,255,.4);
+      min-height: 36px;
+    }
+    .info-coord { display: flex; align-items: center; gap: 6px; }
+    .info-coord .ic-label { color: rgba(255,255,255,.25); }
+    .info-coord .ic-val { color: rgba(255,255,255,.7); font-weight: 700; min-width: 52px; }
+    .info-fn-val { display: flex; align-items: center; gap: 6px; }
+    .info-fn-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+    .info-fn-val .ic-val { color: rgba(255,255,255,.7); font-weight: 700; min-width: 60px; }
+    .info-hint { margin-left: auto; font-size: 0.72rem; color: rgba(255,255,255,.2); }
+
+    /* ════════════════════════════════
+       PROJECTILE SIM
+    ════════════════════════════════ */
+    .sim-proj-wrap {
+      flex: 1; min-height: 0;
+      display: flex; flex-direction: column; overflow: hidden;
+    }
+
+    /* left panel (shared base with .graph-panel) */
+    .proj-panel {
+      width: 260px; flex-shrink: 0;
+      background: var(--surface);
+      border-right: 1.5px solid var(--border);
+      display: flex; flex-direction: column;
+      overflow-y: auto; padding: 16px 14px; gap: 6px;
+    }
+
+    /* canvas */
+    .proj-canvas-outer {
+      flex: 1; min-width: 0; position: relative;
+    }
+    .proj-canvas-outer canvas {
+      display: block; position: absolute; top: 0; left: 0;
+      width: 100%; height: 100%;
+    }
+
+    /* sliders */
+    .param-block  { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
+    .param-header { display: flex; justify-content: space-between; align-items: baseline; }
+    .param-name   { font-size: 0.8rem; font-weight: 700; color: var(--text-2); }
+    .param-val    {
+      font-family: 'Manrope', monospace; font-size: 0.82rem; font-weight: 800;
+      color: var(--violet); min-width: 70px; text-align: right;
+    }
+    .param-slider {
+      -webkit-appearance: none; appearance: none;
+      width: 100%; height: 4px; border-radius: 4px;
+      background: var(--border-h); outline: none; cursor: pointer;
+    }
+    .param-slider::-webkit-slider-thumb {
+      -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
+      background: var(--violet); box-shadow: 0 0 6px rgba(155,93,229,.5);
+      cursor: pointer;
+    }
+    .param-slider::-moz-range-thumb {
+      width: 16px; height: 16px; border-radius: 50%; border: none;
+      background: var(--violet); cursor: pointer;
+    }
+
+    /* preset chips for projectile */
+    .proj-preset-chip {
+      padding: 5px 10px; border-radius: 8px; font-size: 0.75rem; font-weight: 700;
+      border: 1.5px solid var(--border-h); background: transparent;
+      color: var(--text-2); cursor: pointer; transition: all .15s; white-space: nowrap;
+    }
+    .proj-preset-chip:hover { border-color: var(--violet); color: var(--violet); background: rgba(155,93,229,.06); }
+
+    /* stats bar */
+    .proj-stats-bar {
+      flex-shrink: 0; display: flex; align-items: stretch;
+      background: #0D0D1A; border-top: 1px solid rgba(255,255,255,.07);
+      min-height: 48px;
+    }
+    .pstat {
+      flex: 1; display: flex; flex-direction: column;
+      align-items: center; justify-content: center;
+      gap: 2px; padding: 6px 8px;
+      border-right: 1px solid rgba(255,255,255,.06);
+    }
+    .pstat:last-child { border-right: none; }
+    .pstat-label { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.3); }
+    .pstat-val   { font-family: 'Manrope', monospace; font-size: 0.9rem; font-weight: 800; color: rgba(255,255,255,.85); }
+    #csbar-v4, #csbar-v6 { font-size: 0.60rem; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+    /* play button highlight */
+    .zoom-btn.active { border-color: var(--violet); color: var(--violet); background: rgba(155,93,229,.12); }
+
+    /* ── launch button ── */
+    .proj-launch-btn {
+      width: 100%; padding: 14px 18px;
+      border-radius: 16px; border: none;
+      background: linear-gradient(135deg, #7c3aed 0%, #9B5DE5 45%, #F15BB5 100%);
+      color: #fff;
+      font-family: 'Unbounded', sans-serif; font-size: 0.8rem; font-weight: 800;
+      letter-spacing: .04em; text-transform: uppercase;
+      cursor: pointer;
+      display: flex; align-items: center; justify-content: center; gap: 10px;
+      box-shadow: 0 4px 24px rgba(155,93,229,.45), 0 0 0 0 rgba(155,93,229,.3);
+      transition: transform .15s, box-shadow .15s;
+      position: relative; overflow: hidden;
+    }
+    .proj-launch-btn::before {
+      content: ''; position: absolute; inset: 0;
+      background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 60%);
+      pointer-events: none;
+    }
+    .proj-launch-btn:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 8px 32px rgba(155,93,229,.6), 0 0 0 3px rgba(155,93,229,.15);
+    }
+    .proj-launch-btn:active { transform: translateY(0); }
+    .proj-launch-btn.paused {
+      background: linear-gradient(135deg, #0891b2 0%, #06D6E0 100%);
+      box-shadow: 0 4px 24px rgba(6,214,224,.35);
+    }
+    .proj-launch-btn.done {
+      background: linear-gradient(135deg, #15803d 0%, #22c55e 100%);
+      box-shadow: 0 4px 24px rgba(34,197,94,.35);
+    }
+    .proj-reset-btn {
+      width: 100%; padding: 8px;
+      border-radius: 10px;
+      border: 1.5px solid var(--border-h);
+      background: transparent; color: var(--text-3);
+      font-family: 'Manrope', sans-serif; font-size: 0.75rem; font-weight: 700;
+      cursor: pointer; transition: all .15s;
+      display: flex; align-items: center; justify-content: center; gap: 7px;
+    }
+    .proj-reset-btn:hover { border-color: var(--violet); color: var(--violet); }
+
+    /* speed slider — cyan thumb */
+    #sl-speed::-webkit-slider-thumb {
+      background: #06D6E0;
+      box-shadow: 0 0 6px rgba(6,214,224,.5);
+    }
+    #sl-speed::-moz-range-thumb { background: #06D6E0; }
+
+    /* magnetic canvas */
+    #mag-canvas {
+      display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+      cursor: crosshair;
+    }
+
+    /* mode buttons */
+    .mag-mode-btn {
+      flex: 1; padding: 8px 6px; border-radius: 10px;
+      border: 1.5px solid var(--border-h);
+      background: transparent; color: var(--text-2);
+      font-family: 'Manrope', sans-serif; font-size: 0.75rem; font-weight: 700;
+      cursor: pointer; transition: all .15s;
+      display: flex; align-items: center; justify-content: center; gap: 6px;
+    }
+    .mag-mode-btn:hover { border-color: var(--violet); color: var(--text); }
+    .mag-mode-btn.active {
+      background: rgba(155,93,229,.15); border-color: var(--violet); color: #fff;
+    }
+
+    /* triangle canvas */
+    #tri-canvas {
+      display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+    }
+
+    /* molecular physics canvases */
+    #gas-canvas, #brownian-canvas, #states-canvas, #diffusion-canvas, #reactions-canvas {
+      display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+    }
+
+    /* chemistry sim-cat badge */
+    .sim-cat.chem { background: rgba(52,211,153,.1); color: #34d399; }
+    /* biology sim-cat badge */
+    .sim-cat.bio  { background: rgba(34,211,153,.1); color: #22d399; }
+    /* phase dot navigator */
+    .cd-phase-nav { display:flex; align-items:center; justify-content:center; gap:6px; padding:6px 0; flex-wrap:wrap; }
+    .cd-phase-dot { width:8px; height:8px; border-radius:50%; background:var(--border-h,rgba(255,255,255,.15)); cursor:pointer; transition:background .2s,transform .2s; flex-shrink:0; }
+    .cd-phase-dot.active { background:#22d399; transform:scale(1.5); }
+
+    /* ── triangle panel components ── */
+    .tri-layer-row {
+      display: flex; align-items: center; gap: 8px;
+      padding: 7px 10px; border-radius: 10px;
+      border: 1.5px solid var(--border);
+      background: rgba(15,23,42,.03);
+      cursor: pointer; user-select: none;
+      transition: border-color .15s, background .15s;
+    }
+    .tri-layer-row:hover { background: rgba(155,93,229,.05); border-color: rgba(155,93,229,.3); }
+    .tri-layer-row.active { background: rgba(155,93,229,.08); border-color: rgba(155,93,229,.4); }
+
+    .tri-dot {
+      width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
+    }
+    .tri-layer-name {
+      font-size: 0.78rem; font-weight: 700; color: var(--text); flex: 1;
+    }
+    .tri-layer-hint {
+      font-size: 0.68rem; font-weight: 700; opacity: 0.8;
+    }
+    .tri-toggle {
+      width: 28px; height: 16px; border-radius: 99px;
+      background: var(--border-h); flex-shrink: 0;
+      position: relative; transition: background .2s;
+    }
+    .tri-toggle::after {
+      content: ''; position: absolute; top: 2px; left: 2px;
+      width: 12px; height: 12px; border-radius: 50%;
+      background: #fff; transition: transform .2s;
+    }
+    .tri-layer-row.active .tri-toggle { background: var(--violet); }
+    .tri-layer-row.active .tri-toggle::after { transform: translateX(12px); }
+
+    .tri-stats-grid {
+      display: grid; grid-template-columns: 26px 1fr; gap: 3px 8px;
+      padding: 0 4px;
+    }
+    .tri-stat-k {
+      font-family: 'Manrope', monospace; font-size: 0.78rem; font-weight: 800;
+      display: flex; align-items: center;
+    }
+    .tri-stat-v {
+      font-family: 'Manrope', monospace; font-size: 0.82rem; font-weight: 700;
+      color: var(--text); padding: 2px 6px;
+      border-radius: 6px; background: rgba(15,23,42,.08);
+    }
+
+    /* ── trig circle buttons ── */
+    .trig-fn-btn {
+      padding: 6px 14px; border-radius: 8px;
+      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
+      color: #aaa; font-size: 13px; font-weight: 700; cursor: pointer;
+      font-family: 'Manrope', sans-serif; transition: .15s;
+    }
+    .trig-fn-btn:hover { background: rgba(var(--fc-rgb,155,93,229),0.15); border-color: var(--fc,#9B5DE5); color: var(--fc,#9B5DE5); }
+    .trig-fn-btn.active { background: rgba(var(--fc-rgb,155,93,229),0.18); border-color: var(--fc,#9B5DE5); color: var(--fc,#9B5DE5); box-shadow: 0 0 8px rgba(var(--fc-rgb,155,93,229),0.3); }
+
+    /* ── responsive ── */
+    @media (max-width: 768px) {
+      #lab-home { padding: 20px 16px 60px; }
+      .sim-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
+      .graph-panel { width: 220px; }
+      /* Touch-friendly button targets (min 44px) */
+      .zoom-btn { width: auto; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 12px; }
+      .sim-back { padding: 10px 16px; min-height: 44px; }
+      .theory-toggle-btn { width: 44px; height: 44px; border-radius: 12px; }
+    }
+    @media (max-width: 540px) {
+      .sim-grid { grid-template-columns: 1fr; }
+      .sim-body-wrap { flex-direction: column; }
+      .graph-panel { width: 100%; height: auto; border-right: none; border-bottom: 1.5px solid var(--border); max-height: 220px; }
+    }
+
+  /* Circuit tool buttons */
+  .circ-tool-btn.active {
+    background: rgba(155,93,229,0.25) !important;
+    border-color: #9B5DE5 !important;
+    color: #c4b5fd !important;
+  }
+  .circ-top-btn.active { background: rgba(155,93,229,0.35) !important; color: #c4b5fd !important; }
+
+  /* Flask selection buttons */
+  .flask-metal-btn.active, .flask-acid-btn.active {
+    background: rgba(75,205,155,0.20) !important;
+    border-color: #4BCD9B !important;
+    color: #7BF5A4 !important;
+  }
+
+  /* Reaction mode buttons */
+  .reac-mode-btn.active {
+    background: rgba(6,214,224,0.18) !important;
+    border-color: #06D6E0 !important;
+    color: #06D6E0 !important;
+  }
+
+  /* Newton law/scene buttons */
+  .nlaw-btn.active {
+    background: rgba(6,214,224,0.18) !important;
+    border-color: #06D6E0 !important;
+    color: #06D6E0 !important;
+  }
+  .nscene-btn.active {
+    background: rgba(241,91,181,0.15) !important;
+    border-color: #F15BB5 !important;
+    color: #F15BB5 !important;
+  }
+
+  /* ── wave mode buttons ── */
+  .wave-mode-btn {
+    flex: 1; padding: 7px 4px; border-radius: 10px;
+    border: 1.5px solid var(--border-h);
+    background: transparent; color: var(--text-2);
+    font-family: 'Manrope', sans-serif; font-size: 0.72rem; font-weight: 700;
+    cursor: pointer; transition: all .15s; text-align: center;
+  }
+  .wave-mode-btn:hover { border-color: var(--violet); color: var(--text); }
+  .wave-mode-btn.active {
+    background: rgba(155,93,229,.15) !important;
+    border-color: var(--violet) !important; color: #fff !important;
+  }
+  .wave-n-btn.active {
+    background: rgba(255,209,102,.15) !important;
+    border-color: #FFD166 !important; color: #FFD166 !important;
+  }
+
+  /* ── theory panel (overlay right sidebar) ── */
+  #lab-sim { position: relative; }
+  .theory-panel {
+    position: absolute; right: 0; top: 0; bottom: 0; z-index: 55;
+    width: 320px;
+    background: var(--surface);
+    border-left: 1.5px solid var(--border);
+    transform: translateX(100%);
+    transition: transform 0.25s cubic-bezier(.4,0,.2,1);
+    display: flex; flex-direction: column;
+    box-shadow: -4px 0 24px rgba(0,0,0,0.12);
+  }
+  .theory-panel.open { transform: translateX(0); }
+  .theory-panel-inner {
+    padding: 20px 16px; overflow-y: auto; flex: 1;
+    display: flex; flex-direction: column; gap: 16px;
+  }
+  .tp-title {
+    font-family: 'Unbounded', sans-serif; font-size: 0.72rem; font-weight: 800;
+    color: var(--text-3); text-transform: uppercase; letter-spacing: .06em;
+    display: flex; align-items: center; gap: 8px;
+  }
+  .tp-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }
+  .tp-section { margin-bottom: 4px; }
+  .tp-section-head {
+    font-size: 0.76rem; font-weight: 800; color: var(--violet);
+    margin-bottom: 6px; display: flex; align-items: center; gap: 6px;
+  }
+  .tp-formula {
+    background: rgba(155,93,229,0.06); border: 1px solid rgba(155,93,229,0.12);
+    border-radius: 10px; padding: 10px 12px; margin-bottom: 8px;
+    font-size: 0.88rem; text-align: center;
+  }
+  .tp-formula .katex { font-size: 1em; }
+  .tp-text {
+    font-size: 0.78rem; color: var(--text-2); line-height: 1.6; margin-bottom: 8px;
+  }
+  .tp-var-list { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
+  .tp-var {
+    font-size: 0.74rem; color: var(--text-2); display: flex; gap: 6px;
+    padding: 3px 0; border-bottom: 1px dashed rgba(255,255,255,0.04);
+  }
+  .tp-var b { color: var(--text); font-weight: 700; min-width: 24px; }
+  .theory-toggle-btn {
+    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
+    width: 32px; height: 32px; border-radius: 10px;
+    border: 1.5px solid var(--border-h); background: transparent; color: var(--text-2);
+    cursor: pointer; display: flex; align-items: center; justify-content: center;
+    transition: all 0.15s; z-index: 2;
+  }
+  .theory-toggle-btn:hover { border-color: var(--violet); color: var(--violet); background: rgba(155,93,229,0.07); }
+  .theory-toggle-btn svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.2; }
+  @media (max-width: 768px) {
+    .theory-panel.open { width: 100%; position: absolute; right: 0; top: 0; bottom: 0; z-index: 60; }
+  }
+
+  /* ── embed mode (loaded in iframe, no sidebar/topbar) ── */
+  .embed-mode { height: 100vh; }
+  .embed-mode .sb-content { height: 100vh; margin-left: 0 !important; }
+  .embed-mode #lab-sim { flex: 1; }
+  .embed-mode .sim-body-wrap { height: 100vh; }
+  .embed-mode .graph-panel { max-height: 100vh; }
+  </style>
+  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js"></script>
+</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="sbl-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="sbl-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>
+      <span class="sb-link active"><i data-lucide="atom" class="sb-icon"></i><span class="sb-lbl">Лаборатория</span></span>
+      <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>
+      <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="sbl-admin" style="display:none"><i data-lucide="settings" class="sb-icon"></i><span class="sb-lbl">Управление</span></a>
+    </nav>
+    <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>
+    <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>
+          <span class="sb-logout" style="pointer-events:none">Мой профиль</span>
+        </div>
+      </a>
+    </div>
+  </aside>
+  <div class="notif-drop" id="notif-drop"></div>
+
+  <div class="sb-content">
+
+    <!-- ══════════ HOME VIEW ══════════ -->
+    <div id="lab-home">
+
+      <div class="lab-hero">
+        <div class="lab-hero-icon">
+          <i data-lucide="atom" style="width:30px;height:30px;stroke:#9B5DE5;stroke-width:1.5"></i>
+        </div>
+        <div>
+          <div class="lab-hero-title">Лаборатория</div>
+          <div class="lab-hero-sub">Интерактивные симуляции по математике и физике</div>
+        </div>
+      </div>
+
+      <div class="lab-filters">
+        <button class="lab-filter active" onclick="filterSims('all',this)">Все</button>
+        <button class="lab-filter" onclick="filterSims('math',this)">
+          <i data-lucide="sigma" style="width:12px;height:12px;vertical-align:-2px;margin-right:4px"></i>Математика
+        </button>
+        <button class="lab-filter" onclick="filterSims('phys',this)">
+          <i data-lucide="zap" style="width:12px;height:12px;vertical-align:-2px;margin-right:4px"></i>Физика
+        </button>
+        <button class="lab-filter" onclick="filterSims('chem',this)">
+          <i data-lucide="flask-conical" style="width:12px;height:12px;vertical-align:-2px;margin-right:4px"></i>Химия
+        </button>
+        <button class="lab-filter" onclick="filterSims('bio',this)">
+          <i data-lucide="dna" style="width:12px;height:12px;vertical-align:-2px;margin-right:4px"></i>Биология
+        </button>
+        <button class="lab-filter" onclick="filterSims('game',this)">
+          <i data-lucide="gamepad-2" style="width:12px;height:12px;vertical-align:-2px;margin-right:4px"></i>Игры
+        </button>
+      </div>
+
+      <div class="sim-grid" id="sim-grid"></div>
+    </div>
+
+    <!-- ══════════ SIM VIEW ══════════ -->
+    <div id="lab-sim">
+
+      <!-- top bar -->
+      <div class="sim-topbar">
+        <button class="sim-back" onclick="closeSim()">
+          <svg viewBox="0 0 24 24" fill="none"><polyline points="15 18 9 12 15 6"/></svg>
+          Назад
+        </button>
+        <div class="sim-topbar-title" id="sim-topbar-title">График функции</div>
+
+        <!-- graph controls -->
+        <div id="ctrl-graph" class="sim-zoom-btns">
+          <button class="zoom-btn" onclick="gSim.zoomIn()" title="Приблизить">
+            <svg viewBox="0 0 24 24" fill="none"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg>
+          </button>
+          <button class="zoom-btn" onclick="gSim.zoomOut()" title="Отдалить">
+            <svg viewBox="0 0 24 24" fill="none"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="8" y1="11" x2="14" y2="11"/></svg>
+          </button>
+          <button class="zoom-btn" onclick="gSim.resetView()" title="Сброс вида">
+            <svg viewBox="0 0 24 24" fill="none"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
+          </button>
+        </div>
+
+        <!-- projectile controls -->
+        <div id="ctrl-proj" class="sim-zoom-btns" style="display:none">
+          <button class="zoom-btn" id="proj-play-btn" onclick="projPlayPause()" title="Запустить">
+            <svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+          </button>
+          <button class="zoom-btn" onclick="pSim && pSim.reset(); _projSyncPlayBtn()" title="Сброс">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
+          </button>
+          <div style="width:1px;height:20px;background:rgba(255,255,255,0.15);margin:0 2px"></div>
+          <button class="zoom-btn" onclick="projSaveGhost()" title="Зафиксировать траекторию" style="font-size:.65rem;font-weight:800"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle"><path d="M12 2a7 7 0 00-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 00-7-7z"/><circle cx="12" cy="9" r="2.5"/></svg></button>
+          <button class="zoom-btn" onclick="projClearGhosts()" title="Очистить следы" style="font-size:.65rem"><svg class="ic" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+        </div>
+
+        <!-- magnetic controls -->
+        <div id="ctrl-mag" class="sim-zoom-btns" style="display:none">
+          <button class="zoom-btn" id="mag-add-out" onclick="magMode('out')" title="Добавить провод • (ток на нас)" style="font-size:1rem">•</button>
+          <button class="zoom-btn" id="mag-add-in"  onclick="magMode('in')"  title="Добавить провод × (ток от нас)" style="font-size:1rem">×</button>
+          <button class="zoom-btn" onclick="mSim && mSim.clearAll()" title="Очистить">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/></svg>
+          </button>
+        </div>
+
+        <!-- triangle controls -->
+        <div id="ctrl-tri" class="sim-zoom-btns" style="display:none">
+          <button class="zoom-btn" onclick="tSim && tSim.reset()" title="Сбросить треугольник">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
+          </button>
+        </div>
+
+        <!-- trig circle controls -->
+        <div id="ctrl-trigcircle" class="sim-zoom-btns" style="display:none">
+          <button class="zoom-btn" onclick="trigReset()" title="Сбросить на 45°">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
+          </button>
+        </div>
+
+        <!-- collision controls -->
+        <div id="ctrl-coll" class="sim-zoom-btns" style="display:none">
+          <button class="zoom-btn" id="coll-play-btn" onclick="collPlayPause()" title="Запустить">
+            <svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+          </button>
+          <button class="zoom-btn" onclick="cSim && cSim.reset()" title="Сброс">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
+          </button>
+        </div>
+
+        <!-- molphys controls (unified: gas + brownian + states + diffusion) -->
+        <div id="ctrl-molphys" class="sim-zoom-btns" style="display:none">
+          <!-- diffusion-only: partition button -->
+          <span id="ctrl-mol-diff" style="display:none">
+            <button class="zoom-btn" onclick="diffSim && diffSim.togglePartition(); diffPartitionBtn()" title="Снять/поставить раздел" style="font-size:0.72rem;font-weight:800;font-family:Manrope,sans-serif" id="diffusion-part-btn">
+              ‖ Раздел
+            </button>
+          </span>
+          <button class="zoom-btn" onclick="molReset()" title="Сброс">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
+          </button>
+        </div>
+
+        <!-- coulomb controls -->
+        <div id="ctrl-coulomb" class="sim-zoom-btns" style="display:none">
+          <button class="zoom-btn" id="csign-pos" onclick="coulombSign(1)" title="Добавить + заряд" style="font-size:1.1rem;font-weight:900;color:#EF476F">+</button>
+          <button class="zoom-btn" id="csign-neg" onclick="coulombSign(-1)" title="Добавить − заряд" style="font-size:1.1rem;font-weight:900;color:#4CC9F0">−</button>
+          <button class="zoom-btn" onclick="csSim && csSim.reset(); csSim && csSim.draw(); _coulombUpdateUI(csSim&&csSim.info())" title="Очистить">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/></svg>
+          </button>
+        </div>
+
+        <!-- circuit controls -->
+        <div id="ctrl-circuit" class="sim-zoom-btns" style="display:none">
+          <button class="zoom-btn circ-top-btn active" id="ctool-wire"      onclick="circTool('wire',this)"      title="Провод (W)"       style="font-size:.7rem;font-weight:800">~</button>
+          <button class="zoom-btn circ-top-btn"        id="ctool-resistor"  onclick="circTool('resistor',this)"  title="Резистор (R)"     style="font-size:.6rem;font-weight:800">R</button>
+          <button class="zoom-btn circ-top-btn"        id="ctool-battery"   onclick="circTool('battery',this)"   title="Батарея (B)"      style="font-size:.6rem;font-weight:800">U</button>
+          <button class="zoom-btn circ-top-btn"        id="ctool-capacitor" onclick="circTool('capacitor',this)" title="Конденсатор (C)"  style="font-size:.6rem;font-weight:800">C</button>
+          <button class="zoom-btn circ-top-btn"        id="ctool-diode"     onclick="circTool('diode',this)"     title="Диод (D)"         style="font-size:.75rem"><svg class="ic" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg>|</button>
+          <button class="zoom-btn circ-top-btn"        id="ctool-led"       onclick="circTool('led',this)"       title="LED"              style="font-size:.6rem;font-weight:800">LED</button>
+          <button class="zoom-btn circ-top-btn"        id="ctool-ac"        onclick="circTool('ac',this)"        title="AC источник"      style="font-size:.65rem;font-weight:800">AC</button>
+          <button class="zoom-btn circ-top-btn"        id="ctool-switch"    onclick="circTool('switch',this)"    title="Выключатель (S)"  style="font-size:.7rem">⌇</button>
+          <button class="zoom-btn circ-top-btn"        id="ctool-lamp"      onclick="circTool('lamp',this)"      title="Лампа (L)"        style="font-size:.75rem"><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="3"/></svg></button>
+          <button class="zoom-btn circ-top-btn"        id="ctool-ammeter"   onclick="circTool('ammeter',this)"   title="Амперметр (A)"    style="font-size:.6rem;font-weight:800">А</button>
+          <button class="zoom-btn circ-top-btn"        id="ctool-voltmeter" onclick="circTool('voltmeter',this)" title="Вольтметр (V)"    style="font-size:.6rem;font-weight:800">V</button>
+          <button class="zoom-btn circ-top-btn"        id="ctool-erase"     onclick="circTool('erase',this)"     title="Ластик (E)">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M20 20H7L3 16l11.5-11.5a2 2 0 0 1 2.83 0l3.17 3.17a2 2 0 0 1 0 2.83L13 18"/><line x1="6" y1="14" x2="18" y2="2"/></svg>
+          </button>
+          <div style="width:1px;height:20px;background:rgba(255,255,255,0.15);margin:0 2px"></div>
+          <button class="zoom-btn" onclick="cirSim&&cirSim.undo()" title="Отменить (Ctrl+Z)" style="font-size:.65rem"><svg class="ic" viewBox="0 0 24 24"><polyline points="9 14 4 9 9 4"/><path d="M20 20v-7a4 4 0 0 0-4-4H4"/></svg></button>
+          <button class="zoom-btn" onclick="cirSim&&cirSim.redo()" title="Повторить (Ctrl+Y)" style="font-size:.65rem"><svg class="ic" viewBox="0 0 24 24"><polyline points="15 14 20 9 15 4"/><path d="M4 20v-7a4 4 0 0 1 4-4h12"/></svg></button>
+          <button class="zoom-btn" onclick="cirSim&&cirSim.preset('clear')" title="Очистить">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/></svg>
+          </button>
+        </div>
+
+        <!-- reactions controls -->
+        <!-- chemistry controls (unified) -->
+        <div id="ctrl-chemistry" class="sim-zoom-btns" style="display:none">
+          <!-- kinetics tools -->
+          <span id="ctrl-chem-kin" style="display:contents">
+            <button class="zoom-btn" id="reac-pause-btn" onclick="reacTogglePause()" title="Пауза реакций" style="font-size:.68rem;font-weight:800;font-family:Manrope,sans-serif"><svg class="ic" viewBox="0 0 24 24"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg> Пауза</button>
+          </span>
+          <!-- flask tools -->
+          <span id="ctrl-chem-flask" style="display:none">
+            <button class="zoom-btn" onclick="flaskSim && flaskSim.dropMetal()" title="Бросить металл" style="font-size:.65rem;font-weight:800">⬇ Металл</button>
+            <button class="zoom-btn" id="flask-flame-btn" onclick="flaskToggleFlame()" title="Поджечь H₂" style="font-size:.75rem"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle"><path d="M12 2c.5 3.5-1.5 6-1.5 6 1 1.5 3 2 3 5a4 4 0 01-8 0c0-2 .5-3 1.5-4.5C8.5 6.5 7 4.5 7 4.5S9.5 2 12 2z"/></svg></button>
+            <button class="zoom-btn" id="flask-pause-btn" onclick="flaskTogglePause()" title="Пауза" style="font-size:.68rem;font-weight:800;font-family:Manrope,sans-serif"><svg class="ic" viewBox="0 0 24 24"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg></button>
+          </span>
+          <!-- redox tools -->
+          <span id="ctrl-chem-redox" style="display:none">
+            <button class="zoom-btn" onclick="redoxStart()" title="Начать" style="font-size:.65rem;font-weight:800"><svg class="ic" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg> Старт</button>
+          </span>
+          <!-- ionex tools -->
+          <span id="ctrl-chem-ionex" style="display:none">
+            <button class="zoom-btn" onclick="ionexStart()" title="Смешать" style="font-size:.65rem;font-weight:800"><svg class="ic" viewBox="0 0 24 24"><path d="M9 3h6m-4.5 0v5.5l-4 7.5a1 1 0 0 0 .9 1.5h8.2a1 1 0 0 0 .9-1.5l-4-7.5V3"/></svg> Смешать</button>
+          </span>
+          <div style="width:1px;height:20px;background:rgba(255,255,255,0.15);margin:0 3px"></div>
+          <button class="zoom-btn" onclick="chemReset()" title="Сброс">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
+          </button>
+        </div>
+
+        <!-- newton controls -->
+        <!-- dynamics controls (unified newton + sandbox) -->
+        <div id="ctrl-dynamics" class="sim-zoom-btns" style="display:none">
+          <!-- sandbox tools (shown in sandbox mode) -->
+          <span id="ctrl-dyn-sb" style="display:contents">
+            <button class="zoom-btn sb-tool-btn active" id="sbt-box" onclick="sbTool('box',this)" style="font-size:.65rem;font-weight:800"><svg class="ic" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/></svg> Блок</button>
+            <button class="zoom-btn sb-tool-btn" id="sbt-ball" onclick="sbTool('ball',this)" style="font-size:.65rem;font-weight:800"><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="currentColor" stroke="none"/></svg> Шар</button>
+            <button class="zoom-btn sb-tool-btn" id="sbt-spring" onclick="sbTool('spring',this)" style="font-size:.65rem;font-weight:800">〜 Пружина</button>
+            <button class="zoom-btn sb-tool-btn" id="sbt-rope" onclick="sbTool('rope',this)" style="font-size:.65rem;font-weight:800">— Нить</button>
+            <button class="zoom-btn sb-tool-btn" id="sbt-anchor" onclick="sbTool('anchor',this)" style="font-size:.65rem;font-weight:800"><svg class="ic" viewBox="0 0 24 24"><path d="M12 2 2 12 12 22 22 12Z"/></svg> Якорь</button>
+            <button class="zoom-btn sb-tool-btn" id="sbt-erase" onclick="sbTool('erase',this)" style="font-size:.65rem;font-weight:800"><svg class="ic" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg> Ластик</button>
+          </span>
+          <!-- newton tools (shown in law modes) -->
+          <span id="ctrl-dyn-nw" style="display:none">
+            <button class="zoom-btn nscene-btn active" id="nscn-A" onclick="newtonScene('A',this)" style="font-size:.65rem;font-weight:800">A</button>
+            <button class="zoom-btn nscene-btn"        id="nscn-B" onclick="newtonScene('B',this)" style="font-size:.65rem;font-weight:800">B</button>
+            <button class="zoom-btn nscene-btn"        id="nscn-C" onclick="newtonScene('C',this)" style="font-size:.65rem;font-weight:800">C</button>
+            <div style="width:1px;height:20px;background:rgba(255,255,255,0.15);margin:0 3px"></div>
+            <button class="zoom-btn" id="newton-action-top" onclick="newtonAction()" style="font-size:.65rem;font-weight:800;font-family:Manrope,sans-serif"><svg class="ic" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg> Действие</button>
+          </span>
+          <div style="width:1px;height:20px;background:rgba(255,255,255,0.15);margin:0 3px"></div>
+          <button class="zoom-btn" onclick="dynPause()" title="Пауза" style="font-size:.75rem"><svg class="ic" viewBox="0 0 24 24"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg></button>
+          <button class="zoom-btn" onclick="dynReset()" title="Сброс">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
+          </button>
+        </div>
+
+
+        <!-- chemsandbox controls -->
+        <div id="ctrl-chemsandbox" class="sim-zoom-btns" style="display:none">
+          <button class="zoom-btn" onclick="chemSandResetReaction()" title="Сбросить реакцию" style="font-size:.65rem;font-weight:800"><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> Сброс реакции</button>
+          <button class="zoom-btn" onclick="chemSandReset()" title="Очистить всё" style="font-size:.65rem;font-weight:800"><svg class="ic" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg> Очистить</button>
+        </div>
+
+        <!-- celldivision controls -->
+        <div id="ctrl-celldivision" class="sim-zoom-btns" style="display:none">
+          <button class="zoom-btn" onclick="cdPrevPhase()" title="Предыдущая фаза" style="font-size:.65rem;font-weight:800"><svg class="ic" viewBox="0 0 24 24"><polygon points="19 20 9 12 19 4 19 20"/></svg> Назад</button>
+          <button class="zoom-btn" onclick="cdNextPhase()" title="Следующая фаза" style="font-size:.65rem;font-weight:800">Далее <svg class="ic" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg></button>
+          <button class="zoom-btn" id="ctrl-cd-auto" onclick="cdAutoPlay(document.getElementById('cd-auto-btn'))" title="Авто" style="font-size:.65rem;font-weight:800"><svg class="ic" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg> Авто</button>
+        </div>
+
+        <!-- photosynthesis controls -->
+        <div id="ctrl-photosynthesis" class="sim-zoom-btns" style="display:none">
+          <button class="zoom-btn" onclick="psReset()" title="Сброс" style="font-size:.65rem;font-weight:800"><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> Сброс</button>
+        </div>
+
+        <div id="ctrl-angrybirds" class="sim-zoom-btns" style="display:none">
+          <button class="zoom-btn" onclick="angryBirdsRestart()" title="Начать уровень заново" style="font-size:.65rem;font-weight:800"><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> Сначала</button>
+        </div>
+
+        <!-- waves controls -->
+        <div id="ctrl-waves" class="sim-zoom-btns" style="display:none">
+          <button class="zoom-btn" id="waves-play-btn" onclick="wavesPlayPause()" title="Пауза/Старт">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>
+          </button>
+          <button class="zoom-btn" onclick="wavesSim && wavesSim.reset()" title="Сброс">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
+          </button>
+        </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>
+        </button>
+      </div>
+
+      <!-- ── GRAPH sim body ── -->
+      <div id="sim-graph" class="sim-body-wrap">
+
+        <!-- left panel -->
+        <div class="graph-panel">
+          <div class="gp-section-title">Функции</div>
+
+          <!-- fn 1 -->
+          <div style="--fn-color:#9B5DE5">
+            <div class="fn-row">
+              <div class="fn-dot"></div>
+              <span class="fn-label">y =</span>
+              <input class="fn-input" id="fn0" placeholder="sin(x)" autocomplete="off" spellcheck="false" oninput="updateFn(0)" />
+            </div>
+            <div class="fn-preview" id="fn0-prev"></div>
+            <div class="fn-err" id="fn0-err">Синтаксическая ошибка</div>
+          </div>
+
+          <!-- fn 2 -->
+          <div style="--fn-color:#06D6E0">
+            <div class="fn-row">
+              <div class="fn-dot"></div>
+              <span class="fn-label">y =</span>
+              <input class="fn-input" id="fn1" placeholder="x^2 - 4" autocomplete="off" spellcheck="false" oninput="updateFn(1)" />
+            </div>
+            <div class="fn-preview" id="fn1-prev"></div>
+            <div class="fn-err" id="fn1-err">Синтаксическая ошибка</div>
+          </div>
+
+          <!-- fn 3 -->
+          <div style="--fn-color:#F15BB5">
+            <div class="fn-row">
+              <div class="fn-dot"></div>
+              <span class="fn-label">y =</span>
+              <input class="fn-input" id="fn2" placeholder="tg(x)" autocomplete="off" spellcheck="false" oninput="updateFn(2)" />
+            </div>
+            <div class="fn-preview" id="fn2-prev"></div>
+            <div class="fn-err" id="fn2-err">Синтаксическая ошибка</div>
+          </div>
+
+          <div style="margin-top:8px"></div>
+          <div class="gp-section-title">Примеры</div>
+
+          <div class="gp-preset-group">
+            <div class="gp-preset-label">Линейные / степенные</div>
+            <div class="presets-wrap">
+              <button class="preset-btn" onclick="applyPreset('2x-1')">2x−1</button>
+              <button class="preset-btn" onclick="applyPreset('x^2')">x²</button>
+              <button class="preset-btn" onclick="applyPreset('x^2-4')">x²−4</button>
+              <button class="preset-btn" onclick="applyPreset('x^3-3x')">x³−3x</button>
+              <button class="preset-btn" onclick="applyPreset('x^4-4x^2+3')">x⁴−4x²+3</button>
+            </div>
+          </div>
+
+          <div class="gp-preset-group">
+            <div class="gp-preset-label">Тригонометрия</div>
+            <div class="presets-wrap">
+              <button class="preset-btn" onclick="applyPreset('sin(x)')">sin x</button>
+              <button class="preset-btn" onclick="applyPreset('cos(x)')">cos x</button>
+              <button class="preset-btn" onclick="applyPreset('tg(x)')">tg x</button>
+              <button class="preset-btn" onclick="applyPreset('sin(2x)')">sin 2x</button>
+              <button class="preset-btn" onclick="applyPreset('x*sin(x)')">x·sin x</button>
+              <button class="preset-btn" onclick="applyPreset('sin(x)/x')">sin(x)/x</button>
+            </div>
+          </div>
+
+          <div class="gp-preset-group">
+            <div class="gp-preset-label">Показательные / логарифмы</div>
+            <div class="presets-wrap">
+              <button class="preset-btn" onclick="applyPreset('exp(x)')">eˣ</button>
+              <button class="preset-btn" onclick="applyPreset('2^x')">2ˣ</button>
+              <button class="preset-btn" onclick="applyPreset('ln(x)')">ln x</button>
+              <button class="preset-btn" onclick="applyPreset('log(x)')">log x</button>
+            </div>
+          </div>
+
+          <div class="gp-preset-group">
+            <div class="gp-preset-label">Прочие</div>
+            <div class="presets-wrap">
+              <button class="preset-btn" onclick="applyPreset('sqrt(x)')">√x</button>
+              <button class="preset-btn" onclick="applyPreset('1/x')">1/x</button>
+              <button class="preset-btn" onclick="applyPreset('abs(x)')">|x|</button>
+              <button class="preset-btn" onclick="applyPreset('floor(x)')">⌊x⌋</button>
+              <button class="preset-btn" onclick="applyPreset('1/(1+exp(-x))')">σ(x)</button>
+            </div>
+          </div>
+
+          <div style="margin-top:auto;padding-top:14px"></div>
+          <button class="gp-btn" onclick="clearAll()">
+            <svg viewBox="0 0 24 24" fill="none"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4h6v2"/></svg>
+            Очистить всё
+          </button>
+        </div>
+
+        <!-- canvas area -->
+        <div class="graph-canvas-outer">
+          <div class="graph-canvas-wrap">
+            <canvas id="graph-canvas"></canvas>
+          </div>
+          <div class="graph-info-bar" id="graph-info-bar">
+            <div class="info-coord">
+              <span class="ic-label">x =</span>
+              <span class="ic-val" id="info-x">—</span>
+            </div>
+            <div class="info-fn-val">
+              <div class="info-fn-dot" style="background:#9B5DE5;box-shadow:0 0 5px #9B5DE5"></div>
+              <span class="ic-label">y₁ =</span>
+              <span class="ic-val" id="info-y0">—</span>
+            </div>
+            <div class="info-fn-val">
+              <div class="info-fn-dot" style="background:#06D6E0;box-shadow:0 0 5px #06D6E0"></div>
+              <span class="ic-label">y₂ =</span>
+              <span class="ic-val" id="info-y1">—</span>
+            </div>
+            <div class="info-fn-val">
+              <div class="info-fn-dot" style="background:#F15BB5;box-shadow:0 0 5px #F15BB5"></div>
+              <span class="ic-label">y₃ =</span>
+              <span class="ic-val" id="info-y2">—</span>
+            </div>
+            <div class="info-hint">Скролл — зум · Перетащи — панорама</div>
+          </div>
+        </div>
+
+      </div><!-- /#sim-graph -->
+
+      <!-- ── MAGNETIC sim body ── -->
+      <div id="sim-mag" class="sim-proj-wrap" style="display:none">
+        <div class="sim-body-wrap">
+
+          <div class="proj-panel" style="width:248px;gap:0">
+
+            <!-- Mode -->
+            <div class="gp-section-title" style="margin-bottom:8px">Режим добавления</div>
+            <div style="display:flex;gap:6px;margin-bottom:12px">
+              <button id="mag-mode-out" class="mag-mode-btn active" onclick="magMode('out')">
+                <span style="font-size:1.2rem;font-weight:900;color:#06D6E0">•</span>
+                Ток на нас
+              </button>
+              <button id="mag-mode-in" class="mag-mode-btn" onclick="magMode('in')">
+                <span style="font-size:1.1rem;font-weight:900;color:#F15BB5">×</span>
+                Ток от нас
+              </button>
+            </div>
+
+            <!-- Current -->
+            <div class="param-block">
+              <div class="param-header">
+                <span class="param-name">Сила тока I</span>
+                <span class="param-val" id="m-curI">6 А</span>
+              </div>
+              <input type="range" class="param-slider" id="sl-curI" min="1" max="20" value="6" oninput="magCurrentChange()">
+            </div>
+
+            <!-- Layers -->
+            <div class="gp-section-title" style="margin-top:4px;margin-bottom:8px">Визуализация</div>
+            <div style="display:flex;flex-direction:column;gap:5px;margin-bottom:10px">
+              <label class="tri-layer-row active" id="ml-colormap" onclick="magLayer('colormap',this)">
+                <span class="tri-dot" style="background:linear-gradient(90deg,#9B5DE5,#06D6E0,#F15BB5)"></span>
+                <span class="tri-layer-name">Карта поля</span>
+                <span class="tri-layer-hint" style="color:rgba(255,255,255,.4)">hue = направление</span>
+                <span class="tri-toggle" style="background:var(--violet)"><span style="content:'';display:block;width:12px;height:12px;border-radius:50%;background:#fff;margin:2px;margin-left:14px"></span></span>
+              </label>
+              <label class="tri-layer-row active" id="ml-fieldlines" onclick="magLayer('fieldlines',this)">
+                <span class="tri-dot" style="background:#06D6E0;box-shadow:0 0 5px #06D6E0"></span>
+                <span class="tri-layer-name">Силовые линии</span>
+                <span class="tri-layer-hint" style="color:rgba(255,255,255,.4)">+ стрелки</span>
+                <span class="tri-toggle" style="background:var(--violet)"><span style="content:'';display:block;width:12px;height:12px;border-radius:50%;background:#fff;margin:2px;margin-left:14px"></span></span>
+              </label>
+              <label class="tri-layer-row" id="ml-vectors" onclick="magLayer('vectors',this)">
+                <span class="tri-dot" style="background:#9B5DE5;box-shadow:0 0 5px #9B5DE5"></span>
+                <span class="tri-layer-name">Векторное поле</span>
+                <span class="tri-layer-hint" style="color:rgba(255,255,255,.4)">сетка стрелок</span>
+                <span class="tri-toggle"></span>
+              </label>
+            </div>
+
+            <!-- Particle -->
+            <div class="gp-section-title" style="margin-bottom:8px">Частица</div>
+            <label class="tri-layer-row" id="ml-particle" onclick="magParticle(this)" style="margin-bottom:10px">
+              <span class="tri-dot" style="background:#ffff50;box-shadow:0 0 5px #ffff50"></span>
+              <span class="tri-layer-name">Заряженная частица</span>
+              <span class="tri-layer-hint" style="color:#ffff50">Сила Лоренца</span>
+              <span class="tri-toggle" id="ml-particle-toggle"></span>
+            </label>
+
+            <!-- Conductor -->
+            <div class="gp-section-title" style="margin-bottom:8px">Проводник в поле</div>
+            <label class="tri-layer-row" id="ml-cond" onclick="magCondToggle(this)" style="margin-bottom:6px">
+              <span class="tri-dot" style="background:#fbbf24;box-shadow:0 0 5px #fbbf24"></span>
+              <span class="tri-layer-name">Проводник (Ампер)</span>
+              <span class="tri-layer-hint" style="color:#fbbf24">F = I·L×B</span>
+              <span class="tri-toggle" id="ml-cond-toggle"></span>
+            </label>
+            <div class="param-block" id="cond-I-block" style="display:none;margin-bottom:10px">
+              <div class="param-header">
+                <span class="param-name">Ток проводника I꜀</span>
+                <span class="param-val" id="m-condI">8 А</span>
+              </div>
+              <input type="range" class="param-slider" id="sl-condI" min="1" max="20" value="8" oninput="magCondCurrentChange()">
+            </div>
+
+            <!-- Flux -->
+            <div class="gp-section-title" style="margin-bottom:8px">Магнитный поток</div>
+            <label class="tri-layer-row" id="ml-flux" onclick="magFluxToggle(this)" style="margin-bottom:10px">
+              <span class="tri-dot" style="background:#34d399;box-shadow:0 0 5px #34d399"></span>
+              <span class="tri-layer-name">Индикатор потока</span>
+              <span class="tri-layer-hint" style="color:#34d399">Φ = B·S</span>
+              <span class="tri-toggle" id="ml-flux-toggle"></span>
+            </label>
+
+            <!-- Presets -->
+            <div class="gp-section-title" style="margin-bottom:8px">Пресеты</div>
+            <div style="display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px">
+              <button class="proj-preset-chip" onclick="mSim && mSim.preset('single')">Один провод</button>
+              <button class="proj-preset-chip" onclick="mSim && mSim.preset('parallel')">Параллельные <svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg><svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg></button>
+              <button class="proj-preset-chip" onclick="mSim && mSim.preset('anti')">Антипараллельные <svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg><svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg></button>
+              <button class="proj-preset-chip" onclick="mSim && mSim.preset('solenoid')">Соленоид</button>
+              <button class="proj-preset-chip" onclick="mSim && mSim.preset('quadrupole')">Квадруполь</button>
+              <button class="proj-preset-chip" onclick="mSim && mSim.preset('ring')">Кольцо</button>
+              <button class="proj-preset-chip" onclick="mSim && mSim.preset('dipole')">Диполь</button>
+            </div>
+
+            <!-- Stats -->
+            <div style="margin-top:auto;padding-top:6px;display:flex;flex-direction:column;gap:5px">
+              <div class="tri-stats-grid" style="grid-template-columns:1fr 1fr">
+                <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)">Провода •</div>
+                <div class="tri-stat-v" id="ms-out" style="text-align:center;color:#06D6E0">0</div>
+                <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)">Провода ×</div>
+                <div class="tri-stat-v" id="ms-in" style="text-align:center;color:#F15BB5">0</div>
+              </div>
+              <div style="font-size:0.68rem;color:var(--text-3);text-align:center;line-height:1.6;margin-top:4px">
+                Клик — добавить &nbsp;·&nbsp; ПКМ / 2×клик — удалить<br>
+                Перетащи провод для перемещения
+              </div>
+            </div>
+
+          </div><!-- /.proj-panel -->
+
+          <div class="proj-canvas-outer">
+            <canvas id="mag-canvas"></canvas>
+          </div>
+
+        </div><!-- /.sim-body-wrap -->
+
+        <div class="proj-stats-bar">
+          <div class="pstat">
+            <div class="pstat-label">Проводов</div>
+            <div class="pstat-val" id="mbar-total">0</div>
+          </div>
+          <div class="pstat">
+            <div class="pstat-label">• Ток на нас</div>
+            <div class="pstat-val" id="mbar-out" style="color:#06D6E0">0</div>
+          </div>
+          <div class="pstat">
+            <div class="pstat-label">× Ток от нас</div>
+            <div class="pstat-val" id="mbar-in" style="color:#F15BB5">0</div>
+          </div>
+          <div class="pstat">
+            <div class="pstat-label">Ток I</div>
+            <div class="pstat-val" id="mbar-I">6 А</div>
+          </div>
+          <div class="pstat">
+            <div class="pstat-label">Частица</div>
+            <div class="pstat-val" id="mbar-particle">выкл</div>
+          </div>
+          <div class="pstat">
+            <div class="pstat-label">Сила Ампера</div>
+            <div class="pstat-val" id="mbar-ampere" style="color:#fbbf24">—</div>
+          </div>
+          <div class="pstat">
+            <div class="pstat-label">Поток Φ</div>
+            <div class="pstat-val" id="mbar-flux" style="color:#34d399">—</div>
+          </div>
+        </div>
+      </div><!-- /#sim-mag -->
+
+      <!-- ── TRIANGLE sim body ── -->
+      <div id="sim-tri" class="sim-proj-wrap" style="display:none">
+        <div class="sim-body-wrap">
+
+          <!-- left panel -->
+          <div class="proj-panel" style="width:240px;gap:0">
+
+            <!-- Layer toggles -->
+            <div class="gp-section-title" style="margin-bottom:10px">Слои</div>
+            <div style="display:flex;flex-direction:column;gap:5px;margin-bottom:10px">
+              <label class="tri-layer-row" onclick="triToggle('medians',this)">
+                <span class="tri-dot" style="background:#22d55e;box-shadow:0 0 5px #22d55e"></span>
+                <span class="tri-layer-name">Медианы</span>
+                <span class="tri-layer-hint" style="color:#22d55e">G — центроид</span>
+                <span class="tri-toggle" id="tl-medians"></span>
+              </label>
+              <label class="tri-layer-row" onclick="triToggle('altitudes',this)">
+                <span class="tri-dot" style="background:#f59e0b;box-shadow:0 0 5px #f59e0b"></span>
+                <span class="tri-layer-name">Высоты</span>
+                <span class="tri-layer-hint" style="color:#f59e0b">H — ортоцентр</span>
+                <span class="tri-toggle" id="tl-altitudes"></span>
+              </label>
+              <label class="tri-layer-row" onclick="triToggle('bisectors',this)">
+                <span class="tri-dot" style="background:#ec4899;box-shadow:0 0 5px #ec4899"></span>
+                <span class="tri-layer-name">Биссектрисы</span>
+                <span class="tri-layer-hint" style="color:#ec4899">I — инцентр</span>
+                <span class="tri-toggle" id="tl-bisectors"></span>
+              </label>
+              <label class="tri-layer-row" onclick="triToggle('circumcircle',this)">
+                <span class="tri-dot" style="background:#F15BB5;box-shadow:0 0 5px #F15BB5"></span>
+                <span class="tri-layer-name">Описанная окружность</span>
+                <span class="tri-layer-hint" style="color:#F15BB5">O, R</span>
+                <span class="tri-toggle" id="tl-circumcircle"></span>
+              </label>
+              <label class="tri-layer-row" onclick="triToggle('incircle',this)">
+                <span class="tri-dot" style="background:#06D6E0;box-shadow:0 0 5px #06D6E0"></span>
+                <span class="tri-layer-name">Вписанная окружность</span>
+                <span class="tri-layer-hint" style="color:#06D6E0">I, r</span>
+                <span class="tri-toggle" id="tl-incircle"></span>
+              </label>
+              <label class="tri-layer-row" onclick="triToggle('eulerLine',this)">
+                <span class="tri-dot" style="background:rgba(255,255,100,0.8);box-shadow:0 0 5px yellow"></span>
+                <span class="tri-layer-name">Прямая Эйлера</span>
+                <span class="tri-layer-hint" style="color:rgba(255,255,100,0.7)">O<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>G<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>H</span>
+                <span class="tri-toggle" id="tl-eulerLine"></span>
+              </label>
+            </div>
+
+            <div class="gp-section-title" style="margin-bottom:10px">Теоремы</div>
+            <div style="display:flex;flex-direction:column;gap:5px;margin-bottom:10px">
+              <label class="tri-layer-row" onclick="triToggle('sineLaw',this)">
+                <span class="tri-dot" style="background:#60a5fa;box-shadow:0 0 5px #60a5fa"></span>
+                <span class="tri-layer-name">Теорема синусов</span>
+                <span class="tri-layer-hint" style="color:#60a5fa">a/sinA = 2R</span>
+                <span class="tri-toggle" id="tl-sineLaw"></span>
+              </label>
+              <label class="tri-layer-row" onclick="triToggle('cosineLaw',this)">
+                <span class="tri-dot" style="background:#fbbf24;box-shadow:0 0 5px #fbbf24"></span>
+                <span class="tri-layer-name">Теорема косинусов</span>
+                <span class="tri-layer-hint" style="color:#fbbf24">c²=a²+b²−2ab·cosC</span>
+                <span class="tri-toggle" id="tl-cosineLaw"></span>
+              </label>
+              <label class="tri-layer-row" onclick="triToggle('pythagorean',this)">
+                <span class="tri-dot" style="background:#EF476F;box-shadow:0 0 5px #EF476F"></span>
+                <span class="tri-layer-name">Теорема Пифагора</span>
+                <span class="tri-layer-hint" style="color:#EF476F">a²+b² = c²</span>
+                <span class="tri-toggle" id="tl-pythagorean"></span>
+              </label>
+            </div>
+
+            <!-- Stats -->
+            <div class="gp-section-title" style="margin-bottom:8px">Стороны</div>
+            <div class="tri-stats-grid" style="margin-bottom:10px">
+              <span class="tri-stat-k" style="color:#9B5DE5">a</span><span class="tri-stat-v" id="ts-a">—</span>
+              <span class="tri-stat-k" style="color:#06D6E0">b</span><span class="tri-stat-v" id="ts-b">—</span>
+              <span class="tri-stat-k" style="color:#F15BB5">c</span><span class="tri-stat-v" id="ts-c">—</span>
+            </div>
+
+            <div class="gp-section-title" style="margin-bottom:8px">Углы</div>
+            <div class="tri-stats-grid" style="margin-bottom:10px">
+              <span class="tri-stat-k" style="color:#9B5DE5">∠A</span><span class="tri-stat-v" id="ts-A">—</span>
+              <span class="tri-stat-k" style="color:#06D6E0">∠B</span><span class="tri-stat-v" id="ts-B">—</span>
+              <span class="tri-stat-k" style="color:#F15BB5">∠C</span><span class="tri-stat-v" id="ts-C">—</span>
+            </div>
+
+            <div class="gp-section-title" style="margin-bottom:8px">Вычисляемые</div>
+            <div class="tri-stats-grid" style="margin-bottom:10px">
+              <span class="tri-stat-k">S</span><span class="tri-stat-v" id="ts-S">—</span>
+              <span class="tri-stat-k">P</span><span class="tri-stat-v" id="ts-P">—</span>
+              <span class="tri-stat-k">R</span><span class="tri-stat-v" id="ts-R">—</span>
+              <span class="tri-stat-k">r</span><span class="tri-stat-v" id="ts-r">—</span>
+            </div>
+
+            <!-- Type badge -->
+            <div style="margin-top:auto;padding-top:10px">
+              <div style="font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);margin-bottom:6px">Тип</div>
+              <div id="ts-type" style="
+                padding:8px 14px;border-radius:12px;
+                background:rgba(155,93,229,0.12);border:1.5px solid rgba(155,93,229,0.25);
+                font-family:'Manrope',sans-serif;font-size:0.82rem;font-weight:700;
+                color:#9B5DE5;text-align:center;
+              ">—</div>
+              <div style="margin-top:8px;font-size:0.7rem;color:var(--text-3);text-align:center;line-height:1.5">
+                Перетащи вершины<br>A, B, C для изменения
+              </div>
+            </div>
+
+          </div><!-- /.proj-panel -->
+
+          <!-- canvas -->
+          <div class="proj-canvas-outer">
+            <canvas id="tri-canvas"></canvas>
+          </div>
+
+        </div><!-- /.sim-body-wrap -->
+
+        <!-- stats bar -->
+        <div class="proj-stats-bar">
+          <div class="pstat">
+            <div class="pstat-label">Сторона a</div>
+            <div class="pstat-val" id="tbar-a">—</div>
+          </div>
+          <div class="pstat">
+            <div class="pstat-label">Сторона b</div>
+            <div class="pstat-val" id="tbar-b">—</div>
+          </div>
+          <div class="pstat">
+            <div class="pstat-label">Сторона c</div>
+            <div class="pstat-val" id="tbar-c">—</div>
+          </div>
+          <div class="pstat">
+            <div class="pstat-label">Площадь S</div>
+            <div class="pstat-val" id="tbar-S">—</div>
+          </div>
+          <div class="pstat">
+            <div class="pstat-label">Периметр P</div>
+            <div class="pstat-val" id="tbar-P">—</div>
+          </div>
+          <div class="pstat">
+            <div class="pstat-label">R / r</div>
+            <div class="pstat-val" id="tbar-Rr">—</div>
+          </div>
+        </div>
+      </div><!-- /#sim-tri -->
+
+      <!-- ══════════════════════════════════════════════
+           ТРИГОНОМЕТРИЧЕСКАЯ ОКРУЖНОСТЬ
+      ══════════════════════════════════════════════ -->
+      <div id="sim-trigcircle" class="sim-proj-wrap" style="display:none">
+        <div class="sim-body-wrap">
+
+          <!-- left panel -->
+          <div class="proj-panel" style="width:240px;gap:0">
+
+            <!-- Function toggles -->
+            <div class="gp-section-title" style="margin-bottom:10px">Отрезки</div>
+            <div style="display:flex;flex-direction:column;gap:5px;margin-bottom:14px">
+              <label class="tri-layer-row active" onclick="trigToggle('sin',this)">
+                <span class="tri-dot" style="background:#EF476F;box-shadow:0 0 5px #EF476F"></span>
+                <span class="tri-layer-name">sin</span>
+                <span class="tri-layer-hint" style="color:#EF476F">вертикаль</span>
+                <span class="tri-toggle" id="trig-tl-sin"></span>
+              </label>
+              <label class="tri-layer-row active" onclick="trigToggle('cos',this)">
+                <span class="tri-dot" style="background:#06D6E0;box-shadow:0 0 5px #06D6E0"></span>
+                <span class="tri-layer-name">cos</span>
+                <span class="tri-layer-hint" style="color:#06D6E0">горизонталь</span>
+                <span class="tri-toggle" id="trig-tl-cos"></span>
+              </label>
+              <label class="tri-layer-row" onclick="trigToggle('tan',this)">
+                <span class="tri-dot" style="background:#FFD166;box-shadow:0 0 5px #FFD166"></span>
+                <span class="tri-layer-name">tg</span>
+                <span class="tri-layer-hint" style="color:#FFD166">касательная</span>
+                <span class="tri-toggle" id="trig-tl-tan"></span>
+              </label>
+              <label class="tri-layer-row" onclick="trigToggle('cot',this)">
+                <span class="tri-dot" style="background:#7BF5A4;box-shadow:0 0 5px #7BF5A4"></span>
+                <span class="tri-layer-name">ctg</span>
+                <span class="tri-layer-hint" style="color:#7BF5A4">кокасательная</span>
+                <span class="tri-toggle" id="trig-tl-cot"></span>
+              </label>
+            </div>
+
+            <!-- Graph function selector -->
+            <div class="gp-section-title" style="margin-bottom:8px">График</div>
+            <div style="display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px">
+              <button class="trig-fn-btn active" onclick="trigSetGraphFn('sin',this)" style="--fc:#EF476F">sin</button>
+              <button class="trig-fn-btn" onclick="trigSetGraphFn('cos',this)" style="--fc:#06D6E0">cos</button>
+              <button class="trig-fn-btn" onclick="trigSetGraphFn('tan',this)" style="--fc:#FFD166">tg</button>
+              <button class="trig-fn-btn" onclick="trigSetGraphFn('cot',this)" style="--fc:#7BF5A4">ctg</button>
+            </div>
+
+            <!-- Values display -->
+            <div class="gp-section-title" style="margin-bottom:8px">Значения</div>
+            <div class="tri-stats-grid" style="margin-bottom:14px">
+              <span class="tri-stat-k" style="color:#EF476F">sin</span><span class="tri-stat-v" id="trig-v-sin">—</span>
+              <span class="tri-stat-k" style="color:#06D6E0">cos</span><span class="tri-stat-v" id="trig-v-cos">—</span>
+              <span class="tri-stat-k" style="color:#FFD166">tg</span><span class="tri-stat-v" id="trig-v-tan">—</span>
+              <span class="tri-stat-k" style="color:#7BF5A4">ctg</span><span class="tri-stat-v" id="trig-v-cot">—</span>
+            </div>
+
+            <!-- Notable angles -->
+            <div class="gp-section-title" style="margin-bottom:8px">Табличные углы</div>
+            <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:14px">
+              <button class="preset-btn" onclick="trigGoTo(0)">0°</button>
+              <button class="preset-btn" onclick="trigGoTo(Math.PI/6)">30°</button>
+              <button class="preset-btn" onclick="trigGoTo(Math.PI/4)">45°</button>
+              <button class="preset-btn" onclick="trigGoTo(Math.PI/3)">60°</button>
+              <button class="preset-btn" onclick="trigGoTo(Math.PI/2)">90°</button>
+              <button class="preset-btn" onclick="trigGoTo(2*Math.PI/3)">120°</button>
+              <button class="preset-btn" onclick="trigGoTo(Math.PI)">180°</button>
+              <button class="preset-btn" onclick="trigGoTo(3*Math.PI/2)">270°</button>
+            </div>
+
+            <!-- Angle info -->
+            <div style="margin-top:auto;padding-top:10px">
+              <div style="font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);margin-bottom:6px">Угол</div>
+              <div id="trig-angle-badge" style="
+                padding:10px 14px;border-radius:12px;
+                background:rgba(155,93,229,0.12);border:1.5px solid rgba(155,93,229,0.25);
+                font-family:'Manrope',sans-serif;font-size:0.85rem;font-weight:700;
+                color:#9B5DE5;text-align:center;line-height:1.6;
+              ">45° = π/4</div>
+              <div style="margin-top:8px;font-size:0.7rem;color:var(--text-3);text-align:center;line-height:1.5">
+                Перетащи точку по окружности<br>или выбери табличный угол
+              </div>
+            </div>
+
+          </div><!-- /.proj-panel -->
+
+          <!-- canvas -->
+          <div class="proj-canvas-outer">
+            <canvas id="trigcircle-canvas"></canvas>
+          </div>
+
+        </div><!-- /.sim-body-wrap -->
+
+        <!-- stats bar -->
+        <div class="proj-stats-bar">
+          <div class="pstat">
+            <div class="pstat-label">Угол</div>
+            <div class="pstat-val" id="trigbar-angle" style="color:#9B5DE5">45°</div>
+          </div>
+          <div class="pstat">
+            <div class="pstat-label">sin</div>
+            <div class="pstat-val" id="trigbar-sin" style="color:#EF476F">—</div>
+          </div>
+          <div class="pstat">
+            <div class="pstat-label">cos</div>
+            <div class="pstat-val" id="trigbar-cos" style="color:#06D6E0">—</div>
+          </div>
+          <div class="pstat">
+            <div class="pstat-label">tg</div>
+            <div class="pstat-val" id="trigbar-tan" style="color:#FFD166">—</div>
+          </div>
+          <div class="pstat">
+            <div class="pstat-label">ctg</div>
+            <div class="pstat-val" id="trigbar-cot" style="color:#7BF5A4">—</div>
+          </div>
+          <div class="pstat">
+            <div class="pstat-label">Четверть</div>
+            <div class="pstat-val" id="trigbar-quad" style="color:#9B5DE5">—</div>
+          </div>
+        </div>
+      </div><!-- /#sim-trigcircle -->
+
+      <!-- ══════════════════════════════════════════════
+           ИДЕАЛЬНЫЙ ГАЗ
+      ══════════════════════════════════════════════ -->
+      <!-- ══════════════════════════════════════════════
+           МОЛЕКУЛЯРНАЯ ФИЗИКА (газ + броуновское + состояния + диффузия)
+      ══════════════════════════════════════════════ -->
+      <div id="sim-molphys" class="sim-proj-wrap" style="display:none">
+        <div class="sim-body-wrap">
+
+          <div class="proj-panel" style="width:248px;gap:0">
+
+            <!-- Mode selector -->
+            <div style="display:flex;gap:3px;margin-bottom:12px;padding:3px;background:rgba(255,255,255,0.04);border-radius:10px;border:1px solid var(--border)">
+              <button class="mag-mode-btn mol-mode active" id="mol-mode-gas"    onclick="molMode('gas',this)"    style="flex:1;font-size:.63rem;padding:5px 2px">Газ</button>
+              <button class="mag-mode-btn mol-mode" id="mol-mode-brownian"      onclick="molMode('brownian',this)" style="flex:1;font-size:.63rem;padding:5px 2px">Броуновское</button>
+              <button class="mag-mode-btn mol-mode" id="mol-mode-states"        onclick="molMode('states',this)"  style="flex:1;font-size:.63rem;padding:5px 2px">Фазы</button>
+              <button class="mag-mode-btn mol-mode" id="mol-mode-diffusion"     onclick="molMode('diffusion',this)" style="flex:1;font-size:.63rem;padding:5px 2px">Диффузия</button>
+            </div>
+
+            <!-- ── Gas panel ── -->
+            <div id="mol-panel-gas">
+              <div class="gp-section-title" style="margin-bottom:8px">Параметры газа</div>
+              <div class="param-block">
+                <div class="param-header"><span class="param-name">Число молекул N</span><span class="param-val" id="g-N">80</span></div>
+                <input type="range" class="param-slider" id="sl-gN" min="20" max="200" value="80" oninput="gasNChange()">
+              </div>
+              <div class="param-block">
+                <div class="param-header"><span class="param-name">Температура T</span><span class="param-val" id="g-T">1.0 у.е.</span></div>
+                <input type="range" class="param-slider" id="sl-gT" min="2" max="30" value="10" oninput="gasTChange()">
+              </div>
+              <div class="param-block">
+                <div class="param-header"><span class="param-name">Поршень (объём)</span><span class="param-val" id="g-piston">100%</span></div>
+                <input type="range" class="param-slider" id="sl-gPiston" min="30" max="100" value="100" oninput="gasPistonChange()">
+              </div>
+              <div style="margin-bottom:10px">
+                <button class="proj-preset-chip" id="gas-vec-btn" onclick="gasToggleVectors(this)" style="width:100%">Векторы скоростей: Выкл</button>
+              </div>
+              <div class="gp-section-title" style="margin-top:4px;margin-bottom:8px">Состояние</div>
+              <div class="tri-stats-grid" style="grid-template-columns:1fr 1fr;margin-bottom:8px">
+                <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)">Давление P</div>
+                <div class="tri-stat-v" id="gstat-P" style="text-align:center;color:#9B5DE5">—</div>
+                <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)">Объём V</div>
+                <div class="tri-stat-v" id="gstat-V" style="text-align:center;color:#06D6E0">—</div>
+                <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)">PV</div>
+                <div class="tri-stat-v" id="gstat-PV" style="text-align:center;color:#34d399">—</div>
+                <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)">⟨v⟩ средн.</div>
+                <div class="tri-stat-v" id="gstat-v" style="text-align:center;color:#FFD166">—</div>
+              </div>
+              <div style="font-size:.65rem;color:var(--text-3);text-align:center;line-height:1.6;margin-top:auto">Стенки светятся по P · Поршень перетащи мышью</div>
+            </div>
+
+            <!-- ── Brownian panel ── -->
+            <div id="mol-panel-brownian" style="display:none">
+              <div class="gp-section-title" style="margin-bottom:8px">Параметры</div>
+              <div class="param-block">
+                <div class="param-header"><span class="param-name">Молекул газа N</span><span class="param-val" id="br-N">120</span></div>
+                <input type="range" class="param-slider" id="sl-brN" min="30" max="300" value="120" oninput="brownNChange()">
+              </div>
+              <div class="param-block">
+                <div class="param-header"><span class="param-name">Температура T</span><span class="param-val" id="br-T">1.0 у.е.</span></div>
+                <input type="range" class="param-slider" id="sl-brT" min="2" max="20" value="10" oninput="brownTChange()">
+              </div>
+              <div class="gp-section-title" style="margin-top:10px;margin-bottom:8px">Статистика частицы B</div>
+              <div class="tri-stats-grid" style="grid-template-columns:1fr 1fr;margin-bottom:8px">
+                <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)">|Δr| смещение</div>
+                <div class="tri-stat-v" id="brstat-dr" style="text-align:center;color:#FFD166">0</div>
+                <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)">MSD</div>
+                <div class="tri-stat-v" id="brstat-msd" style="text-align:center;color:#9B5DE5">0</div>
+                <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)">Скорость v</div>
+                <div class="tri-stat-v" id="brstat-v" style="text-align:center;color:#06D6E0">0</div>
+                <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)">Шагов</div>
+                <div class="tri-stat-v" id="brstat-steps" style="text-align:center;color:#34d399">0</div>
+              </div>
+              <div style="margin-bottom:10px">
+                <button class="proj-preset-chip" onclick="if(brownSim) brownSim.resetOrigin()" style="width:100%">Сбросить отсчёт (Origin)</button>
+              </div>
+              <div style="font-size:.65rem;color:var(--text-3);text-align:center;line-height:1.6;margin-top:auto">График MSD нарастает линейно — закон диффузии</div>
+            </div>
+
+            <!-- ── States panel ── -->
+            <div id="mol-panel-states" style="display:none">
+              <div class="gp-section-title" style="margin-bottom:8px">Управление</div>
+              <div class="param-block">
+                <div class="param-header"><span class="param-name">Температура T</span><span class="param-val" id="st-T">0.15</span></div>
+                <input type="range" class="param-slider" id="sl-stT" min="1" max="100" value="15" oninput="statesTChange()">
+              </div>
+              <div class="param-block">
+                <div class="param-header"><span class="param-name">Частиц N</span><span class="param-val" id="st-N">64</span></div>
+                <input type="range" class="param-slider" id="sl-stN" min="16" max="100" step="4" value="64" oninput="statesNChange()">
+              </div>
+              <div style="display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap">
+                <button class="proj-preset-chip" onclick="statesPreset(0.05)">Твёрдое</button>
+                <button class="proj-preset-chip" onclick="statesPreset(0.30)">Жидкость</button>
+                <button class="proj-preset-chip" onclick="statesPreset(0.75)">Газ</button>
+              </div>
+              <button id="states-vec-btn" class="proj-preset-chip" style="margin-bottom:10px;width:100%" onclick="statesToggleVectors(this)">Векторы скоростей: Выкл</button>
+              <div class="gp-section-title" style="margin-bottom:8px">Фаза и энергия</div>
+              <div class="tri-stats-grid" style="grid-template-columns:1fr 1fr;margin-bottom:8px">
+                <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)">Фаза</div>
+                <div class="tri-stat-v" id="ststat-phase" style="text-align:center">—</div>
+                <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)">Кин. энергия</div>
+                <div class="tri-stat-v" id="ststat-KE" style="text-align:center;color:#FFD166">—</div>
+                <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)">Пот. энергия</div>
+                <div class="tri-stat-v" id="ststat-PE" style="text-align:center;color:#9B5DE5">—</div>
+                <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)">Давление</div>
+                <div class="tri-stat-v" id="ststat-P" style="text-align:center;color:#EF476F">—</div>
+              </div>
+              <div style="font-size:.65rem;color:var(--text-3);text-align:center;line-height:1.6;margin-top:auto">LJ потенциал · g(r) — структура · цвет = скорость</div>
+            </div>
+
+            <!-- ── Diffusion panel ── -->
+            <div id="mol-panel-diffusion" style="display:none">
+              <div class="gp-section-title" style="margin-bottom:8px">Параметры</div>
+              <div class="param-block">
+                <div class="param-header"><span class="param-name">Молекул каждого вида</span><span class="param-val" id="df-N">60</span></div>
+                <input type="range" class="param-slider" id="sl-dfN" min="20" max="120" value="60" oninput="diffNChange()">
+              </div>
+              <div class="param-block">
+                <div class="param-header"><span class="param-name">Температура T</span><span class="param-val" id="df-T">1.0 у.е.</span></div>
+                <input type="range" class="param-slider" id="sl-dfT" min="2" max="20" value="10" oninput="diffTChange()">
+              </div>
+              <label class="tri-layer-row active" id="df-part-row" onclick="diffPartitionToggle(this)" style="margin-bottom:6px">
+                <span class="tri-dot" style="background:rgba(255,255,255,0.5)"></span>
+                <span class="tri-layer-name">Перегородка</span>
+                <span class="tri-layer-hint" style="color:rgba(255,255,255,.4)">‖</span>
+                <span class="tri-toggle" id="df-part-toggle" style="background:var(--violet)"><span style="display:block;width:12px;height:12px;border-radius:50%;background:#fff;margin:2px;margin-left:14px"></span></span>
+              </label>
+              <label class="tri-layer-row" id="df-pore-row" onclick="diffPoreToggle(this)" style="margin-bottom:10px">
+                <span class="tri-dot" style="background:rgba(255,179,71,0.5)"></span>
+                <span class="tri-layer-name">Пора (щель)</span>
+                <span class="tri-layer-hint" style="color:rgba(255,255,255,.4)">⊙</span>
+                <span class="tri-toggle" id="df-pore-toggle" style="background:rgba(255,255,255,0.15)"><span style="display:block;width:12px;height:12px;border-radius:50%;background:#fff;margin:2px;margin-left:2px"></span></span>
+              </label>
+              <div class="gp-section-title" style="margin-bottom:8px">Концентрации</div>
+              <div class="tri-stats-grid" style="grid-template-columns:1fr 1fr;margin-bottom:8px">
+                <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#06D6E0">Лево A</div>
+                <div class="tri-stat-v" id="dfstat-LA" style="text-align:center;color:#06D6E0">—</div>
+                <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#F15BB5">Лево B</div>
+                <div class="tri-stat-v" id="dfstat-LB" style="text-align:center;color:#F15BB5">—</div>
+                <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#06D6E0">Право A</div>
+                <div class="tri-stat-v" id="dfstat-RA" style="text-align:center;color:#06D6E0">—</div>
+                <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#F15BB5">Право B</div>
+                <div class="tri-stat-v" id="dfstat-RB" style="text-align:center;color:#F15BB5">—</div>
+                <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)">Смешивание</div>
+                <div class="tri-stat-v" id="dfstat-mix" style="text-align:center;color:#34d399">—</div>
+              </div>
+              <div style="font-size:.65rem;color:var(--text-3);text-align:center;line-height:1.6;margin-top:auto">A (cyan) — лево · B (розовый) — право</div>
+            </div>
+
+          </div><!-- /.proj-panel -->
+
+          <div class="proj-canvas-outer">
+            <canvas id="gas-canvas"       style="display:block;position:absolute;top:0;left:0;width:100%;height:100%"></canvas>
+            <canvas id="brownian-canvas"   style="display:none;position:absolute;top:0;left:0;width:100%;height:100%"></canvas>
+            <canvas id="states-canvas"     style="display:none;position:absolute;top:0;left:0;width:100%;height:100%"></canvas>
+            <canvas id="diffusion-canvas"  style="display:none;position:absolute;top:0;left:0;width:100%;height:100%"></canvas>
+          </div>
+
+        </div><!-- /.sim-body-wrap -->
+
+        <div class="proj-stats-bar" id="mol-stats-bar">
+          <div class="pstat"><div class="pstat-label" id="mpbar-l1">—</div><div class="pstat-val" id="mpbar-v1" style="color:#06D6E0">—</div></div>
+          <div class="pstat"><div class="pstat-label" id="mpbar-l2">—</div><div class="pstat-val" id="mpbar-v2" style="color:#FFD166">—</div></div>
+          <div class="pstat"><div class="pstat-label" id="mpbar-l3">—</div><div class="pstat-val" id="mpbar-v3" style="color:#9B5DE5">—</div></div>
+          <div class="pstat"><div class="pstat-label" id="mpbar-l4">—</div><div class="pstat-val" id="mpbar-v4" style="color:#34d399">—</div></div>
+          <div class="pstat"><div class="pstat-label" id="mpbar-l5">—</div><div class="pstat-val" id="mpbar-v5">—</div></div>
+        </div>
+      </div><!-- /#sim-molphys -->
+
+      <!-- ══════════════════════════════════════════════
+           ЗАКОН КУЛОНА
+      ══════════════════════════════════════════════ -->
+      <div id="sim-coulomb" class="sim-proj-wrap" style="display:none">
+        <div class="sim-body-wrap">
+
+          <div class="proj-panel" style="width:240px;gap:0">
+
+            <div class="gp-section-title" style="margin-bottom:8px">Знак заряда</div>
+            <div style="display:flex;gap:6px;margin-bottom:12px">
+              <button class="mag-mode-btn active" id="cbtn-pos" onclick="coulombSign(1)" style="flex:1" title="Добавить положительный заряд">
+                <span style="font-size:1.3rem;font-weight:900;color:#EF476F">+</span> Положит.
+              </button>
+              <button class="mag-mode-btn" id="cbtn-neg" onclick="coulombSign(-1)" style="flex:1" title="Добавить отрицательный заряд">
+                <span style="font-size:1.3rem;font-weight:900;color:#4CC9F0">−</span> Отрицат.
+              </button>
+            </div>
+
+            <div class="gp-section-title" style="margin-bottom:8px">Слои</div>
+            <div style="display:flex;flex-direction:column;gap:5px;margin-bottom:10px">
+              <label class="tri-layer-row active" id="cl-colormap" onclick="coulombLayer('colormap',this)">
+                <span class="tri-dot" style="background:#9B5DE5;box-shadow:0 0 5px #9B5DE5"></span>
+                <span class="tri-layer-name">Карта потенциала</span>
+                <span class="tri-layer-hint" style="color:#9B5DE5">V</span>
+                <span class="tri-toggle" style="background:var(--violet)"><span style="display:block;width:12px;height:12px;border-radius:50%;background:#fff;margin:2px;margin-left:14px"></span></span>
+              </label>
+              <label class="tri-layer-row active" id="cl-fieldlines" onclick="coulombLayer('fieldlines',this)">
+                <span class="tri-dot" style="background:rgba(255,255,255,0.8);box-shadow:0 0 5px rgba(255,255,255,0.6)"></span>
+                <span class="tri-layer-name">Линии поля</span>
+                <span class="tri-layer-hint" style="color:rgba(255,255,255,0.5)">E</span>
+                <span class="tri-toggle" style="background:var(--violet)"><span style="display:block;width:12px;height:12px;border-radius:50%;background:#fff;margin:2px;margin-left:14px"></span></span>
+              </label>
+              <label class="tri-layer-row" id="cl-vectors" onclick="coulombLayer('vectors',this)">
+                <span class="tri-dot" style="background:rgba(255,255,255,0.4)"></span>
+                <span class="tri-layer-name">Векторы E</span>
+                <span class="tri-layer-hint" style="color:rgba(255,255,255,0.3)"><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></span>
+                <span class="tri-toggle"><span style="display:block;width:12px;height:12px;border-radius:50%;background:#fff;margin:2px;margin-left:2px"></span></span>
+              </label>
+              <label class="tri-layer-row active" id="cl-equipotentials" onclick="coulombLayer('equipotentials',this)">
+                <span class="tri-dot" style="background:rgba(255,255,255,0.5)"></span>
+                <span class="tri-layer-name">Эквипотенциали</span>
+                <span class="tri-layer-hint" style="color:rgba(255,255,255,0.3)">V=const</span>
+                <span class="tri-toggle" style="background:var(--violet)"><span style="display:block;width:12px;height:12px;border-radius:50%;background:#fff;margin:2px;margin-left:14px"></span></span>
+              </label>
+              <label class="tri-layer-row" id="cl-forces" onclick="coulombLayer('forces',this)">
+                <span class="tri-dot" style="background:#FFD166;box-shadow:0 0 5px #FFD166"></span>
+                <span class="tri-layer-name">Силы Кулона</span>
+                <span class="tri-layer-hint" style="color:#FFD166">F</span>
+                <span class="tri-toggle"><span style="display:block;width:12px;height:12px;border-radius:50%;background:#fff;margin:2px;margin-left:2px"></span></span>
+              </label>
+            </div>
+
+            <div class="gp-section-title" style="margin-bottom:8px">Пресеты</div>
+            <div style="display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px">
+              <button class="proj-preset-chip" onclick="coulombPreset('dipole')">Диполь ±</button>
+              <button class="proj-preset-chip" onclick="coulombPreset('equal')">Два + заряда</button>
+              <button class="proj-preset-chip" onclick="coulombPreset('quadrupole')">Квадруполь</button>
+              <button class="proj-preset-chip" onclick="coulombPreset('ring')">Кольцо</button>
+            </div>
+
+            <div style="margin-top:auto;display:flex;flex-direction:column;gap:5px">
+              <div class="tri-stats-grid" style="grid-template-columns:auto 1fr">
+                <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)">Зарядов</div>
+                <div class="tri-stat-v" id="cs-total" style="color:#9B5DE5">0</div>
+                <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)">Курсор E</div>
+                <div class="tri-stat-v" id="cs-curE" style="color:rgba(255,255,255,0.6)">—</div>
+                <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)">Курсор V</div>
+                <div class="tri-stat-v" id="cs-curV" style="color:rgba(255,255,255,0.5)">—</div>
+              </div>
+              <div style="font-size:0.68rem;color:var(--text-3);text-align:center;line-height:1.6;margin-top:4px">
+                Клик — добавить &nbsp;·&nbsp; ПКМ — удалить<br>
+                Перетащи заряд для перемещения
+              </div>
+            </div>
+
+          </div><!-- /.proj-panel -->
+
+          <div class="proj-canvas-outer">
+            <canvas id="coulomb-canvas" style="display:block;position:absolute;top:0;left:0;width:100%;height:100%;cursor:crosshair"></canvas>
+          </div>
+
+        </div><!-- /.sim-body-wrap -->
+
+        <div class="proj-stats-bar">
+          <div class="pstat"><div class="pstat-label">Зарядов</div><div class="pstat-val" id="csbar-total">0</div></div>
+          <div class="pstat"><div class="pstat-label">+ Позитивных</div><div class="pstat-val" id="csbar-pos" style="color:#EF476F">0</div></div>
+          <div class="pstat"><div class="pstat-label">− Негативных</div><div class="pstat-val" id="csbar-neg" style="color:#4CC9F0">0</div></div>
+          <div class="pstat"><div class="pstat-label">max |E|</div><div class="pstat-val" id="csbar-maxE">—</div></div>
+          <div class="pstat"><div class="pstat-label">E курсора</div><div class="pstat-val" id="csbar-curE" style="color:rgba(255,255,255,0.7)">—</div></div>
+        </div>
+      </div><!-- /#sim-coulomb -->
+
+      <!-- ══════════════════════════════════════════════
+           ЭЛЕКТРИЧЕСКИЕ ЦЕПИ
+      ══════════════════════════════════════════════ -->
+      <div id="sim-circuit" class="sim-proj-wrap" style="display:none">
+        <div class="sim-body-wrap">
+
+          <div class="proj-panel" style="width:240px;gap:0">
+
+            <div class="gp-section-title" style="margin-bottom:8px">Инструмент</div>
+            <div style="display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px">
+              <button class="proj-preset-chip circ-tool-btn active" id="ptool-wire"      onclick="circTool('wire',this)"      data-tool="wire">Провод</button>
+              <button class="proj-preset-chip circ-tool-btn"        id="ptool-resistor"  onclick="circTool('resistor',this)"  data-tool="resistor">Резистор</button>
+              <button class="proj-preset-chip circ-tool-btn"        id="ptool-battery"   onclick="circTool('battery',this)"   data-tool="battery">Батарея</button>
+              <button class="proj-preset-chip circ-tool-btn"        id="ptool-capacitor" onclick="circTool('capacitor',this)" data-tool="capacitor">Конденсатор</button>
+              <button class="proj-preset-chip circ-tool-btn"        id="ptool-diode"     onclick="circTool('diode',this)"     data-tool="diode">Диод</button>
+              <button class="proj-preset-chip circ-tool-btn"        id="ptool-led"       onclick="circTool('led',this)"       data-tool="led">LED</button>
+              <button class="proj-preset-chip circ-tool-btn"        id="ptool-ac"        onclick="circTool('ac',this)"        data-tool="ac">AC источник</button>
+              <button class="proj-preset-chip circ-tool-btn"        id="ptool-switch"    onclick="circTool('switch',this)"    data-tool="switch">Выключатель</button>
+              <button class="proj-preset-chip circ-tool-btn"        id="ptool-lamp"      onclick="circTool('lamp',this)"      data-tool="lamp">Лампа</button>
+              <button class="proj-preset-chip circ-tool-btn"        id="ptool-ammeter"   onclick="circTool('ammeter',this)"   data-tool="ammeter">Амперметр</button>
+              <button class="proj-preset-chip circ-tool-btn"        id="ptool-voltmeter" onclick="circTool('voltmeter',this)" data-tool="voltmeter">Вольтметр</button>
+              <button class="proj-preset-chip circ-tool-btn"        id="ptool-erase"     onclick="circTool('erase',this)"     data-tool="erase">Ластик</button>
+            </div>
+
+            <div class="gp-section-title" style="margin-bottom:8px">Параметры</div>
+
+            <div class="param-block">
+              <div class="param-header">
+                <span class="param-name">Сопротивление R</span>
+                <span class="param-val" id="circ-R-val">10 Ω</span>
+              </div>
+              <input type="range" class="param-slider" id="sl-circR" min="1" max="100" value="10" oninput="circRChange()">
+            </div>
+
+            <div class="param-block">
+              <div class="param-header">
+                <span class="param-name">Напряжение U</span>
+                <span class="param-val" id="circ-U-val">9 В</span>
+              </div>
+              <input type="range" class="param-slider" id="sl-circU" min="1" max="24" value="9" oninput="circUChange()">
+            </div>
+
+            <div class="param-block">
+              <div class="param-header">
+                <span class="param-name">Ёмкость C</span>
+                <span class="param-val" id="circ-C-val">100 µF</span>
+              </div>
+              <input type="range" class="param-slider" id="sl-circC" min="10" max="1000" value="100" step="10" oninput="circCChange()">
+            </div>
+
+            <div class="param-block">
+              <div class="param-header">
+                <span class="param-name">Частота AC</span>
+                <span class="param-val" id="circ-F-val">2 Гц</span>
+              </div>
+              <input type="range" class="param-slider" id="sl-circF" min="1" max="20" value="2" oninput="circFChange()">
+            </div>
+
+            <div class="gp-section-title" style="margin-bottom:8px;margin-top:4px">Пресеты</div>
+            <div style="display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px">
+              <button class="proj-preset-chip" onclick="circPreset('serial')">Последовательное</button>
+              <button class="proj-preset-chip" onclick="circPreset('parallel')">Параллельное</button>
+              <button class="proj-preset-chip" onclick="circPreset('lamp')">Лампа + выкл</button>
+              <button class="proj-preset-chip" onclick="circPreset('divider')">Делитель V</button>
+              <button class="proj-preset-chip" onclick="circPreset('bridge')">Мост Уитстона</button>
+              <button class="proj-preset-chip" onclick="circPreset('diode')">Диод</button>
+              <button class="proj-preset-chip" onclick="circPreset('led')">LED</button>
+              <button class="proj-preset-chip" onclick="circPreset('rc')">RC-цепь</button>
+              <button class="proj-preset-chip" onclick="circPreset('ac')">AC-цепь</button>
+            </div>
+
+            <div style="margin-top:auto;font-size:0.68rem;color:var(--text-3);text-align:center;line-height:1.7;padding-top:4px">
+              Тяни узлы для рисования · ПКМ — удалить<br>
+              2×клик по выключателю — вкл/выкл · Ctrl+Z отмена
+            </div>
+
+          </div><!-- /.proj-panel -->
+
+          <div class="proj-canvas-outer">
+            <canvas id="circuit-canvas" style="display:block;position:absolute;top:0;left:0;width:100%;height:100%;cursor:crosshair"></canvas>
+          </div>
+
+        </div><!-- /.sim-body-wrap -->
+
+        <div class="proj-stats-bar">
+          <div class="pstat"><div class="pstat-label">Компонентов</div><div class="pstat-val" id="cirbar-comps">0</div></div>
+          <div class="pstat"><div class="pstat-label">Напряжение U</div><div class="pstat-val" id="cirbar-U" style="color:#EF476F">—</div></div>
+          <div class="pstat"><div class="pstat-label">Ток I</div><div class="pstat-val" id="cirbar-I" style="color:#FFD166">—</div></div>
+          <div class="pstat"><div class="pstat-label">Мощность P</div><div class="pstat-val" id="cirbar-P" style="color:#7BF5A4">—</div></div>
+          <div class="pstat"><div class="pstat-label">Статус</div><div class="pstat-val" id="cirbar-status">—</div></div>
+        </div>
+      </div><!-- /#sim-circuit -->
+
+      <!-- ══════════════════════════════════════════════
+           КИНЕТИКА РЕАКЦИЙ
+      ══════════════════════════════════════════════ -->
+      <!-- ══════════════════════════════════════════════
+           ХИМИЯ (unified: кинетика + колба + ОВР + ионный обмен)
+      ══════════════════════════════════════════════ -->
+      <div id="sim-chemistry" class="sim-proj-wrap" style="display:none">
+        <div class="sim-body-wrap">
+
+          <div class="proj-panel" style="width:248px;gap:0">
+
+            <!-- Mode selector -->
+            <div style="display:flex;gap:3px;margin-bottom:12px;padding:3px;background:rgba(255,255,255,0.04);border-radius:10px;border:1px solid var(--border)">
+              <button class="mag-mode-btn chem-mode active" id="chem-mode-kinetics" onclick="chemMode('kinetics',this)" style="flex:1;font-size:.63rem;padding:5px 2px">Кинетика</button>
+              <button class="mag-mode-btn chem-mode" id="chem-mode-flask" onclick="chemMode('flask',this)" style="flex:1;font-size:.63rem;padding:5px 2px">Колба</button>
+              <button class="mag-mode-btn chem-mode" id="chem-mode-redox" onclick="chemMode('redox',this)" style="flex:1;font-size:.63rem;padding:5px 2px">ОВР</button>
+              <button class="mag-mode-btn chem-mode" id="chem-mode-ionex" onclick="chemMode('ionex',this)" style="flex:1;font-size:.63rem;padding:5px 2px">Ионный</button>
+            </div>
+
+            <!-- ── Kinetics panel ── -->
+            <div id="chem-panel-kinetics">
+              <div class="gp-section-title" style="margin-bottom:6px">Параметры</div>
+
+              <div class="param-block" style="margin-bottom:7px">
+                <div class="param-header"><span class="param-name">Молекул N</span><span class="param-val" id="reac-N-val">28</span></div>
+                <input type="range" class="param-slider" id="sl-reacN" min="5" max="60" value="28" oninput="reacNChange()">
+              </div>
+              <div class="param-block" style="margin-bottom:7px">
+                <div class="param-header"><span class="param-name">Температура T</span><span class="param-val" id="reac-T-val">1.2</span></div>
+                <input type="range" class="param-slider" id="sl-reacT" min="2" max="40" value="12" oninput="reacTChange()">
+              </div>
+              <div class="param-block" style="margin-bottom:7px">
+                <div class="param-header"><span class="param-name">Энергия активации Ea</span><span class="param-val" id="reac-Ea-val">2.0</span></div>
+                <input type="range" class="param-slider" id="sl-reacEa" min="5" max="50" value="20" oninput="reacEaChange()">
+              </div>
+
+              <div class="gp-section-title" style="margin-bottom:6px">Режим</div>
+              <div style="display:flex;flex-direction:column;gap:4px;margin-bottom:8px">
+                <button class="proj-preset-chip reac-mode-btn active" id="rmode-forward"    onclick="reacMode('forward',this)"    style="text-align:left"><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> Прямая (A+B<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>C)</button>
+                <button class="proj-preset-chip reac-mode-btn"        id="rmode-reversible" onclick="reacMode('reversible',this)" style="text-align:left">⇌ Обратимая</button>
+                <button class="proj-preset-chip reac-mode-btn"        id="rmode-chain"      onclick="reacMode('chain',this)"      style="text-align:left"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg> Цепная</button>
+              </div>
+
+              <div class="gp-section-title" style="margin-bottom:6px">Пресеты</div>
+              <div style="display:flex;flex-wrap:wrap;gap:5px">
+                <button class="proj-preset-chip" onclick="reacPreset('simple')">Простая</button>
+                <button class="proj-preset-chip" onclick="reacPreset('reversible')">Равновесие</button>
+                <button class="proj-preset-chip" onclick="reacPreset('hot')">Горячая</button>
+                <button class="proj-preset-chip" onclick="reacPreset('cold')">Холодная</button>
+                <button class="proj-preset-chip" onclick="reacPreset('chain')">Цепная</button>
+              </div>
+            </div><!-- /chem-panel-kinetics -->
+
+            <!-- ── Flask panel ── -->
+            <div id="chem-panel-flask" style="display:none">
+              <div class="gp-section-title" style="margin-bottom:8px">Металл</div>
+              <div style="display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px">
+                <button class="proj-preset-chip flask-metal-btn active" id="fmetal-Zn" onclick="flaskMetal('Zn',this)">Zn</button>
+                <button class="proj-preset-chip flask-metal-btn" id="fmetal-Fe" onclick="flaskMetal('Fe',this)">Fe</button>
+                <button class="proj-preset-chip flask-metal-btn" id="fmetal-Mg" onclick="flaskMetal('Mg',this)">Mg</button>
+                <button class="proj-preset-chip flask-metal-btn" id="fmetal-Cu" onclick="flaskMetal('Cu',this)">Cu</button>
+                <button class="proj-preset-chip flask-metal-btn" id="fmetal-Na" onclick="flaskMetal('Na',this)">Na</button>
+                <button class="proj-preset-chip flask-metal-btn" id="fmetal-Al" onclick="flaskMetal('Al',this)">Al</button>
+              </div>
+
+              <div class="gp-section-title" style="margin-bottom:8px">Реагент</div>
+              <div style="display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px">
+                <button class="proj-preset-chip flask-acid-btn active" id="facid-HCl"   onclick="flaskAcid('HCl',this)">HCl</button>
+                <button class="proj-preset-chip flask-acid-btn" id="facid-H2SO4" onclick="flaskAcid('H2SO4',this)">H₂SO₄</button>
+                <button class="proj-preset-chip flask-acid-btn" id="facid-H2O"   onclick="flaskAcid('H2O',this)">H₂O</button>
+              </div>
+
+              <div class="param-block">
+                <div class="param-header"><span class="param-name">Концентрация</span><span class="param-val" id="flask-conc-val">35%</span></div>
+                <input type="range" class="param-slider" id="sl-flask-conc" min="5" max="98" value="35" oninput="flaskConcChange()">
+              </div>
+              <div class="param-block">
+                <div class="param-header"><span class="param-name">Темп. окружения</span><span class="param-val" id="flask-temp-val">20°C</span></div>
+                <input type="range" class="param-slider" id="sl-flask-temp" min="5" max="80" value="20" oninput="flaskTempChange()">
+              </div>
+
+              <div style="display:flex;gap:6px;margin-bottom:10px;margin-top:2px">
+                <button class="proj-preset-chip" style="flex:1;background:rgba(239,71,111,0.18);border-color:rgba(239,71,111,0.4)"
+                        onclick="flaskSim && flaskSim.dropMetal()">⬇ Бросить металл</button>
+                <button class="proj-preset-chip" id="flask-flame-panel" style="flex:0 0 auto"
+                        onclick="flaskToggleFlame()"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle"><path d="M12 2c.5 3.5-1.5 6-1.5 6 1 1.5 3 2 3 5a4 4 0 01-8 0c0-2 .5-3 1.5-4.5C8.5 6.5 7 4.5 7 4.5S9.5 2 12 2z"/></svg></button>
+              </div>
+
+              <div style="font-size:.65rem;color:var(--text-3);text-align:center;line-height:1.7;margin-top:auto;padding-top:4px">
+                Выбери металл + кислоту<br>H₂ накапливается — поднеси огонь!
+              </div>
+            </div><!-- /chem-panel-flask -->
+
+            <!-- ── Redox panel ── -->
+            <div id="chem-panel-redox" style="display:none">
+              <div class="gp-section-title" style="margin-bottom:8px">Реакция</div>
+              <div style="display:flex;flex-direction:column;gap:4px;margin-bottom:12px">
+                <button class="proj-preset-chip redox-rxn-btn active" id="rdxrxn-fe_cu"     onclick="redoxRxn('fe_cu',this)"     style="text-align:left;font-size:.72rem">Fe + CuSO₄ <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> FeSO₄ + Cu<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg></button>
+                <button class="proj-preset-chip redox-rxn-btn"        id="rdxrxn-zn_hcl"    onclick="redoxRxn('zn_hcl',this)"    style="text-align:left;font-size:.72rem">Zn + 2HCl <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> ZnCl₂ + H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg></button>
+                <button class="proj-preset-chip redox-rxn-btn"        id="rdxrxn-cl2_ki"    onclick="redoxRxn('cl2_ki',this)"    style="text-align:left;font-size:.72rem">Cl₂ + 2KI <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> I₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> + 2KCl</button>
+                <button class="proj-preset-chip redox-rxn-btn"        id="rdxrxn-kmno4"     onclick="redoxRxn('kmno4',this)"     style="text-align:left;font-size:.72rem">KMnO₄ + FeSO₄ (кислая)</button>
+                <button class="proj-preset-chip redox-rxn-btn"        id="rdxrxn-cu_fecl3"  onclick="redoxRxn('cu_fecl3',this)"  style="text-align:left;font-size:.72rem">Cu + 2FeCl₃ <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> CuCl₂ + 2FeCl₂</button>
+              </div>
+              <button class="proj-launch-btn" style="margin-bottom:8px" onclick="redoxStart()"><svg class="ic" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg> Начать реакцию</button>
+              <button class="proj-reset-btn" onclick="redoxReset()"><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> Сброс</button>
+              <div style="margin-top:auto;padding-top:6px;font-size:.65rem;color:var(--text-3);line-height:1.7;text-align:center">
+                Синие e⁻ — перенос электронов<br>Цифры — степень окисления
+              </div>
+            </div><!-- /chem-panel-redox -->
+
+            <!-- ── Ion exchange panel ── -->
+            <div id="chem-panel-ionex" style="display:none">
+              <div class="gp-section-title" style="margin-bottom:8px">Реакция</div>
+              <div style="display:flex;flex-direction:column;gap:4px;margin-bottom:12px">
+                <button class="proj-preset-chip ionex-rxn-btn active" id="ioxrxn-ba_so4"  onclick="ionexRxn('ba_so4',this)"  style="text-align:left;font-size:.72rem">BaCl₂ + Na₂SO₄ <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> BaSO₄<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg></button>
+                <button class="proj-preset-chip ionex-rxn-btn"        id="ioxrxn-ag_cl"   onclick="ionexRxn('ag_cl',this)"   style="text-align:left;font-size:.72rem">AgNO₃ + NaCl <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> AgCl<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg></button>
+                <button class="proj-preset-chip ionex-rxn-btn"        id="ioxrxn-co3_hcl" onclick="ionexRxn('co3_hcl',this)" style="text-align:left;font-size:.72rem">Na₂CO₃ + 2HCl <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> CO₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg></button>
+                <button class="proj-preset-chip ionex-rxn-btn"        id="ioxrxn-pb_i"    onclick="ionexRxn('pb_i',this)"    style="text-align:left;font-size:.72rem">Pb(NO₃)₂ + 2KI <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> PbI₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg></button>
+                <button class="proj-preset-chip ionex-rxn-btn"        id="ioxrxn-ca_co3"  onclick="ionexRxn('ca_co3',this)"  style="text-align:left;font-size:.72rem">CaCl₂ + Na₂CO₃ <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> CaCO₃<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg></button>
+              </div>
+              <button class="proj-launch-btn" style="margin-bottom:8px" onclick="ionexStart()"><svg class="ic" viewBox="0 0 24 24"><path d="M9 3h6m-4.5 0v5.5l-4 7.5a1 1 0 0 0 .9 1.5h8.2a1 1 0 0 0 .9-1.5l-4-7.5V3"/></svg> Смешать растворы</button>
+              <button class="proj-reset-btn" onclick="ionexReset()"><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> Сброс</button>
+              <div style="margin-top:auto;padding-top:6px;font-size:.65rem;color:var(--text-3);line-height:1.7;text-align:center">
+                Яркие ионы = реагируют<br>Тусклые = зрители · <svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> осадок · <svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg> газ
+              </div>
+            </div><!-- /chem-panel-ionex -->
+
+          </div><!-- /.proj-panel -->
+
+          <div class="proj-canvas-outer">
+            <canvas id="reactions-canvas"    style="display:block;position:absolute;top:0;left:0;width:100%;height:100%"></canvas>
+            <canvas id="flask-canvas"        style="display:none;position:absolute;top:0;left:0;width:100%;height:100%;cursor:default"></canvas>
+            <canvas id="redox-canvas"        style="display:none;position:absolute;top:0;left:0;width:100%;height:100%;cursor:default"></canvas>
+            <canvas id="ionexchange-canvas"  style="display:none;position:absolute;top:0;left:0;width:100%;height:100%;cursor:default"></canvas>
+          </div>
+
+        </div><!-- /.sim-body-wrap -->
+
+        <div class="proj-stats-bar" id="chem-stats-bar">
+          <div class="pstat"><div class="pstat-label" id="chbar-l1">—</div><div class="pstat-val" id="chbar-v1" style="color:#06D6E0">—</div></div>
+          <div class="pstat"><div class="pstat-label" id="chbar-l2">—</div><div class="pstat-val" id="chbar-v2" style="color:#EF476F">—</div></div>
+          <div class="pstat"><div class="pstat-label" id="chbar-l3">—</div><div class="pstat-val" id="chbar-v3" style="color:#FFD166">—</div></div>
+          <div class="pstat"><div class="pstat-label" id="chbar-l4">—</div><div class="pstat-val" id="chbar-v4">—</div></div>
+          <div class="pstat"><div class="pstat-label" id="chbar-l5">—</div><div class="pstat-val" id="chbar-v5" style="color:#7BF5A4">—</div></div>
+        </div>
+      </div><!-- /#sim-chemistry -->
+
+      <!-- ── DYNAMICS sim body (Newton + Sandbox unified) ── -->
+      <div id="sim-dynamics" class="sim-proj-wrap" style="display:none">
+        <div class="sim-body-wrap">
+
+          <div class="proj-panel" style="width:248px;gap:0">
+
+            <!-- ══ Mode selector ══ -->
+            <div style="display:flex;gap:4px;margin-bottom:12px;padding:3px;background:rgba(255,255,255,0.04);border-radius:10px;border:1px solid var(--border)">
+              <button class="mag-mode-btn dyn-mode active" id="dyn-mode-sandbox" onclick="dynMode('sandbox',this)" style="flex:1;font-size:.68rem;padding:5px 0">Песочница</button>
+              <button class="mag-mode-btn dyn-mode" id="dyn-mode-law1" onclick="dynMode('law1',this)" style="flex:1;font-size:.68rem;padding:5px 0">I закон</button>
+              <button class="mag-mode-btn dyn-mode" id="dyn-mode-law2" onclick="dynMode('law2',this)" style="flex:1;font-size:.68rem;padding:5px 0">II закон</button>
+              <button class="mag-mode-btn dyn-mode" id="dyn-mode-law3" onclick="dynMode('law3',this)" style="flex:1;font-size:.68rem;padding:5px 0">III закон</button>
+            </div>
+
+            <!-- ══ Newton controls (shown in law modes) ══ -->
+            <div id="dyn-newton-panel" style="display:none">
+
+              <!-- Scene selector -->
+              <div class="gp-section-title" style="margin-bottom:8px">Сцена</div>
+              <div style="display:flex;gap:5px;margin-bottom:12px" id="newton-scene-row">
+                <button class="mag-mode-btn nscene-btn active" id="nscn-panel-A" onclick="newtonScene('A',null,this)" style="flex:1;font-size:.72rem">A</button>
+                <button class="mag-mode-btn nscene-btn"        id="nscn-panel-B" onclick="newtonScene('B',null,this)" style="flex:1;font-size:.72rem">B</button>
+                <button class="mag-mode-btn nscene-btn"        id="nscn-panel-C" onclick="newtonScene('C',null,this)" style="flex:1;font-size:.72rem">C</button>
+              </div>
+
+              <!-- Scene description -->
+              <div id="newton-scene-desc" style="font-size:0.71rem;color:var(--text-3);line-height:1.6;margin-bottom:10px;padding:6px 8px;background:rgba(255,255,255,0.03);border-radius:8px;border:1px solid var(--border)">
+                Закон инерции: тело движется равномерно при отсутствии сил.
+              </div>
+
+              <!-- Parameter sliders -->
+              <div id="newton-mu-block" class="param-block">
+                <div class="param-header"><span class="param-name">Коэфф. трения μ</span><span class="param-val" id="newton-mu-val">0.20</span></div>
+                <input type="range" class="param-slider" id="sl-newton-mu" min="0" max="1" step="0.01" value="0.20" oninput="newtonMuChange()">
+              </div>
+              <div id="newton-mass1-block" class="param-block" style="display:none">
+                <div class="param-header"><span class="param-name">Масса m₁ (кг)</span><span class="param-val" id="newton-m1-val">5 кг</span></div>
+                <input type="range" class="param-slider" id="sl-newton-m1" min="1" max="20" value="5" oninput="newtonMass1Change()">
+              </div>
+              <div id="newton-mass2-block" class="param-block" style="display:none">
+                <div class="param-header"><span class="param-name">Масса m₂ (кг)</span><span class="param-val" id="newton-m2-val">5 кг</span></div>
+                <input type="range" class="param-slider" id="sl-newton-m2" min="1" max="20" value="5" oninput="newtonMass2Change()">
+              </div>
+              <div id="newton-force-block" class="param-block" style="display:none">
+                <div class="param-header"><span class="param-name">Сила F (Н)</span><span class="param-val" id="newton-F-val">20 Н</span></div>
+                <input type="range" class="param-slider" id="sl-newton-F" min="1" max="60" value="20" oninput="newtonForceChange()">
+              </div>
+
+              <!-- Presets -->
+              <div class="gp-section-title" style="margin-top:6px">Пресеты</div>
+              <div id="newton-presets" style="display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px">
+                <button class="proj-preset-chip" onclick="newtonPreset('space')">Космос</button>
+                <button class="proj-preset-chip" onclick="newtonPreset('ice')">Лёд</button>
+                <button class="proj-preset-chip" onclick="newtonPreset('asphalt')">Асфальт</button>
+                <button class="proj-preset-chip" onclick="newtonPreset('rubber')">Резина</button>
+              </div>
+
+              <!-- Action -->
+              <div style="margin-top:auto;padding-top:10px;display:flex;flex-direction:column;gap:6px">
+                <button class="proj-launch-btn" id="newton-action-main" onclick="newtonAction()">
+                  <span id="newton-action-label"><svg class="ic" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg> Действие</span>
+                </button>
+                <button class="proj-reset-btn" onclick="_resetNewtonScene()">
+                  <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
+                  Сброс сцены
+                </button>
+              </div>
+
+            </div><!-- /#dyn-newton-panel -->
+
+            <!-- ══ Sandbox controls (shown in sandbox mode) ══ -->
+            <div id="dyn-sandbox-panel">
+
+              <div class="gp-section-title" style="margin-bottom:8px">Инструмент</div>
+              <div style="display:flex;gap:5px;margin-bottom:4px">
+                <button class="mag-mode-btn sb-panel-tool active" id="sbpt-box" onclick="sbTool('box',this)" style="flex:1;font-size:.72rem"><svg class="ic" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/></svg> Блок</button>
+                <button class="mag-mode-btn sb-panel-tool" id="sbpt-ball" onclick="sbTool('ball',this)" style="flex:1;font-size:.72rem"><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="currentColor" stroke="none"/></svg> Шар</button>
+                <button class="mag-mode-btn sb-panel-tool" id="sbpt-erase" onclick="sbTool('erase',this)" style="flex:1;font-size:.72rem"><svg class="ic" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+              </div>
+              <div style="display:flex;gap:5px;margin-bottom:10px">
+                <button class="mag-mode-btn sb-panel-tool" id="sbpt-spring" onclick="sbTool('spring',this)" style="flex:1;font-size:.72rem">〜 Пружина</button>
+                <button class="mag-mode-btn sb-panel-tool" id="sbpt-rope" onclick="sbTool('rope',this)" style="flex:1;font-size:.72rem">— Нить</button>
+                <button class="mag-mode-btn sb-panel-tool" id="sbpt-anchor" onclick="sbTool('anchor',this)" style="flex:1;font-size:.72rem"><svg class="ic" viewBox="0 0 24 24"><path d="M12 2 2 12 12 22 22 12Z"/></svg> Якорь</button>
+              </div>
+
+              <div class="gp-section-title" style="margin-bottom:8px">Режим силы</div>
+              <div style="display:flex;gap:5px;margin-bottom:10px">
+                <button class="mag-mode-btn sb-fmode active" id="sbfm-constant" onclick="sbForceMode('constant',this)" style="flex:1;font-size:.72rem">Постоянная</button>
+                <button class="mag-mode-btn sb-fmode" id="sbfm-impulse" onclick="sbForceMode('impulse',this)" style="flex:1;font-size:.72rem">Импульс</button>
+              </div>
+
+              <div class="param-block">
+                <div class="param-header"><span class="param-name">Масса нового тела</span><span class="param-val" id="sb-mass-val">5 кг</span></div>
+                <input type="range" class="param-slider" id="sl-sb-mass" min="1" max="30" value="5" oninput="sbMassChange()">
+              </div>
+              <div class="param-block">
+                <div class="param-header"><span class="param-name">Упругость</span><span class="param-val" id="sb-rest-val">0.65</span></div>
+                <input type="range" class="param-slider" id="sl-sb-rest" min="0" max="1" step="0.05" value="0.65" oninput="sbRestChange()">
+              </div>
+              <div class="param-block" id="sb-spring-block" style="display:none">
+                <div class="param-header"><span class="param-name">Жёсткость пружины k</span><span class="param-val" id="sb-springk-val">120 Н/м</span></div>
+                <input type="range" class="param-slider" id="sl-sb-springk" min="10" max="600" step="10" value="120" oninput="sbSpringKChange()">
+              </div>
+
+              <div class="gp-section-title" style="margin-top:6px;margin-bottom:6px">Мир</div>
+              <div style="display:flex;flex-direction:column;gap:5px;margin-bottom:10px">
+                <label style="display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--text-2);cursor:pointer"><input type="checkbox" id="sb-gravity" checked onchange="sbWorldToggle()"> Гравитация</label>
+                <label style="display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--text-2);cursor:pointer"><input type="checkbox" id="sb-floor" checked onchange="sbWorldToggle()"> Пол</label>
+                <label style="display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--text-2);cursor:pointer"><input type="checkbox" id="sb-walls" checked onchange="sbWorldToggle()"> Стенки</label>
+                <label style="display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--text-2);cursor:pointer"><input type="checkbox" id="sb-airdrag" onchange="sbWorldToggle()"> Сопротивление воздуха</label>
+                <label style="display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--text-2);cursor:pointer"><input type="checkbox" id="sb-ramp" onchange="sbRampToggle()"> Наклонная плоскость</label>
+              </div>
+              <div id="sb-ramp-block" style="display:none">
+                <div class="param-block">
+                  <div class="param-header"><span class="param-name">Угол α</span><span class="param-val" id="sb-angle-val">30°</span></div>
+                  <input type="range" class="param-slider" id="sl-sb-angle" min="5" max="75" value="30" oninput="sbAngleChange()">
+                </div>
+                <div class="param-block">
+                  <div class="param-header"><span class="param-name">Трение горки μ</span><span class="param-val" id="sb-rampmu-val">0.20</span></div>
+                  <input type="range" class="param-slider" id="sl-sb-rampmu" min="0" max="1" step="0.01" value="0.20" oninput="sbRampMuChange()">
+                </div>
+                <label style="display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--text-2);cursor:pointer;margin-bottom:6px"><input type="checkbox" id="sb-decomp" checked onchange="sbDecompToggle()"> Разложение сил</label>
+              </div>
+              <div class="param-block">
+                <div class="param-header"><span class="param-name">Трение пола μ</span><span class="param-val" id="sb-floormu-val">0.30</span></div>
+                <input type="range" class="param-slider" id="sl-sb-floormu" min="0" max="1" step="0.01" value="0.30" oninput="sbFloorMuChange()">
+              </div>
+
+              <div class="gp-section-title" style="margin-top:6px;margin-bottom:6px">Отображение</div>
+              <div style="display:flex;flex-direction:column;gap:5px;margin-bottom:10px">
+                <label style="display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--text-2);cursor:pointer"><input type="checkbox" id="sb-forces" checked onchange="sbDisplayToggle()"> Силы</label>
+                <label style="display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--text-2);cursor:pointer"><input type="checkbox" id="sb-vel" checked onchange="sbDisplayToggle()"> Скорости</label>
+                <label style="display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--text-2);cursor:pointer"><input type="checkbox" id="sb-fbd" onchange="sbDisplayToggle()"> FBD-диаграмма</label>
+                <label style="display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--text-2);cursor:pointer"><input type="checkbox" id="sb-energy" checked onchange="sbDisplayToggle()"> Энергия</label>
+                <label style="display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--text-2);cursor:pointer"><input type="checkbox" id="sb-trail" checked onchange="sbDisplayToggle()"> Стробоскоп</label>
+              </div>
+
+              <div class="gp-section-title" style="margin-top:2px;margin-bottom:6px">Время</div>
+              <div style="display:flex;gap:5px;margin-bottom:10px">
+                <button class="mag-mode-btn sb-time" onclick="sbTimeScale(0.25,this)" style="flex:1;font-size:.68rem">×0.25</button>
+                <button class="mag-mode-btn sb-time" onclick="sbTimeScale(0.5,this)" style="flex:1;font-size:.68rem">×0.5</button>
+                <button class="mag-mode-btn sb-time active" onclick="sbTimeScale(1,this)" style="flex:1;font-size:.68rem">×1</button>
+                <button class="mag-mode-btn sb-time" onclick="sbTimeScale(2,this)" style="flex:1;font-size:.68rem">×2</button>
+              </div>
+
+              <div class="gp-section-title" style="margin-top:2px">Пресеты</div>
+              <div style="display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px">
+                <button class="proj-preset-chip" onclick="sbPreset('freefall')">Падение</button>
+                <button class="proj-preset-chip" onclick="sbPreset('collision')">Столкновение</button>
+                <button class="proj-preset-chip" onclick="sbPreset('friction')">Трение</button>
+                <button class="proj-preset-chip" onclick="sbPreset('tug')">Перетягивание</button>
+                <button class="proj-preset-chip" onclick="sbPreset('balance')">Равновесие</button>
+                <button class="proj-preset-chip" onclick="sbPreset('ramp_slide')">Горка</button>
+                <button class="proj-preset-chip" onclick="sbPreset('ramp_angle')"><svg class="ic" viewBox="0 0 24 24"><path d="m8 3 4 8 5-5 5 15H2L8 3z"/></svg> Крутой спуск</button>
+                <button class="proj-preset-chip" onclick="sbPreset('ramp_friction')"><svg class="ic" viewBox="0 0 24 24"><rect width="20" height="5" x="2" y="3" rx="1"/><rect width="8" height="5" x="2" y="11" rx="1"/><rect width="8" height="5" x="14" y="11" rx="1"/><rect width="20" height="5" x="2" y="19" rx="1"/></svg> Трение на горке</button>
+                <button class="proj-preset-chip" onclick="sbPreset('spring_bounce')">〜 Пружина</button>
+                <button class="proj-preset-chip" onclick="sbPreset('spring_chain')">〜 Цепочка</button>
+                <button class="proj-preset-chip" onclick="sbPreset('pendulum')">⬤ Маятник</button>
+                <button class="proj-preset-chip" onclick="sbPreset('atwood')"><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93 17.66 6.34M21 12h-2M19.07 19.07l-1.41-1.41M12 21v-2M6.34 17.66 4.93 19.07M3 12h2M4.93 4.93l1.41 1.41M12 3v2"/><circle cx="12" cy="12" r="7"/></svg> Машина Атвуда</button>
+                <button class="proj-preset-chip" onclick="sbPreset('two_body')"><svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="21" x2="12" y2="3"/><polyline points="7 8 12 3 17 8"/><polyline points="17 16 12 21 7 16"/></svg> Два тела</button>
+                <button class="proj-preset-chip" onclick="sbPreset('elastic_collision')"><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>
+                <button class="proj-preset-chip" onclick="sbPreset('inelastic_collision')"><svg class="ic" viewBox="0 0 24 24"><path d="m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3z"/></svg> Неупругий</button>
+                <button class="proj-preset-chip" onclick="sbPreset('newton_cradle')"><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93 17.66 6.34M21 12h-2M19.07 19.07l-1.41-1.41M12 21v-2M6.34 17.66 4.93 19.07M3 12h2M4.93 4.93l1.41 1.41M12 3v2"/><circle cx="12" cy="12" r="7"/></svg> Колыбель Ньютона</button>
+                <button class="proj-preset-chip" onclick="sbPreset('harmonic_oscillator')">〜 Осциллятор</button>
+                <button class="proj-preset-chip" onclick="sbPreset('double_pendulum')">⬤⬤ Двойной маятник</button>
+                <button class="proj-preset-chip" onclick="sbPreset('coupled_oscillators')">〜〜 Связанные</button>
+                <button class="proj-preset-chip" onclick="sbPreset('stacked_boxes')"><svg class="ic" viewBox="0 0 24 24"><rect width="20" height="5" x="2" y="3" rx="1"/><rect width="8" height="5" x="2" y="11" rx="1"/><rect width="8" height="5" x="14" y="11" rx="1"/><rect width="20" height="5" x="2" y="19" rx="1"/></svg> Стопка</button>
+                <button class="proj-preset-chip" onclick="sbPreset('pulley_ramp')"><svg class="ic" viewBox="0 0 24 24"><path d="m8 3 4 8 5-5 5 15H2L8 3z"/></svg> Горка+блок</button>
+                <button class="proj-preset-chip" onclick="sbPreset('circular_motion')">⭕ Круговое</button>
+                <button class="proj-preset-chip" onclick="sbPreset('projectile_angle')"><svg class="ic" viewBox="0 0 24 24"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg> Снаряд 45°</button>
+              </div>
+
+              <div style="font-size:.65rem;color:var(--text-3);line-height:1.5;margin-top:auto;padding:6px 8px;background:rgba(255,255,255,0.03);border-radius:8px;border:1px solid var(--border)">
+                ЛКМ — создать тело · Drag — сила<br>
+                Shift+drag — импульс · ПКМ — удалить<br>
+                DblClick — закрепить / открепить<br>
+                Пружина / Нить — кликни 2 тела
+              </div>
+
+            </div><!-- /#dyn-sandbox-panel -->
+
+          </div><!-- /.proj-panel -->
+
+          <div class="proj-canvas-outer">
+            <canvas id="newton-canvas" style="display:none;position:absolute;top:0;left:0;width:100%;height:100%;cursor:default"></canvas>
+            <canvas id="sandbox-canvas" style="display:block;position:absolute;top:0;left:0;width:100%;height:100%;cursor:crosshair"></canvas>
+          </div>
+
+        </div><!-- /.sim-body-wrap -->
+
+        <div class="proj-stats-bar" id="dyn-stats-bar">
+          <div class="pstat"><div class="pstat-label" id="dbar-l1">Тел</div><div class="pstat-val" id="dbar-v1" style="color:#06D6E0">0</div></div>
+          <div class="pstat"><div class="pstat-label" id="dbar-l2">KE (Дж)</div><div class="pstat-val" id="dbar-v2" style="color:#4CC9F0">0</div></div>
+          <div class="pstat"><div class="pstat-label" id="dbar-l3">PE (Дж)</div><div class="pstat-val" id="dbar-v3" style="color:#7BF5A4">0</div></div>
+          <div class="pstat"><div class="pstat-label" id="dbar-l4">ΣF</div><div class="pstat-val" id="dbar-v4" style="color:#EF476F">—</div></div>
+          <div class="pstat"><div class="pstat-label" id="dbar-l5">Время</div><div class="pstat-val" id="dbar-v5" style="color:#FFD166">0 с</div></div>
+        </div>
+      </div><!-- /#sim-dynamics -->
+
+      <!-- ── PROJECTILE sim body ── -->
+      <div id="sim-proj" class="sim-proj-wrap" style="display:none">
+        <div class="sim-body-wrap">
+
+          <!-- controls panel -->
+          <div class="proj-panel">
+            <div class="gp-section-title">Параметры</div>
+
+            <div class="param-block">
+              <div class="param-header">
+                <span class="param-name">Скорость v₀</span>
+                <span class="param-val" id="p-v0">20 м/с</span>
+              </div>
+              <input type="range" class="param-slider" id="sl-v0" min="1" max="100" value="20" oninput="projParam()">
+            </div>
+
+            <div class="param-block">
+              <div class="param-header">
+                <span class="param-name">Угол θ</span>
+                <span class="param-val" id="p-angle">45°</span>
+              </div>
+              <input type="range" class="param-slider" id="sl-angle" min="0" max="90" value="45" oninput="projParam()">
+            </div>
+
+            <div class="param-block">
+              <div class="param-header">
+                <span class="param-name">Высота h₀</span>
+                <span class="param-val" id="p-h0">2 м</span>
+              </div>
+              <input type="range" class="param-slider" id="sl-h0" min="0" max="50" value="2" oninput="projParam()">
+            </div>
+
+            <div class="param-block">
+              <div class="param-header">
+                <span class="param-name">Сила тяжести g</span>
+                <span class="param-val" id="p-g">9.81 м/с²</span>
+              </div>
+              <input type="range" class="param-slider" id="sl-g" min="1" max="25" step="0.01" value="9.81" oninput="projParam()">
+            </div>
+
+            <!-- Air resistance -->
+            <div class="gp-section-title" style="margin-top:6px">Сопротивление воздуха</div>
+            <label class="tri-layer-row" id="drag-row" onclick="projToggleDrag(this)" style="margin-bottom:6px">
+              <span class="tri-dot" style="background:rgba(239,71,111,0.5)"></span>
+              <span class="tri-layer-name">Воздух</span>
+              <span class="tri-toggle" id="drag-toggle" style="background:rgba(255,255,255,0.12)"><span style="display:block;width:12px;height:12px;border-radius:50%;background:#fff;margin:2px;margin-left:2px"></span></span>
+            </label>
+            <div id="drag-params" style="display:none">
+              <div class="param-block">
+                <div class="param-header">
+                  <span class="param-name">Коэф. Cd</span>
+                  <span class="param-val" id="p-cd">0.30</span>
+                </div>
+                <input type="range" class="param-slider" id="sl-cd" min="1" max="100" value="30" oninput="projCdChange()">
+              </div>
+              <div class="param-block">
+                <div class="param-header">
+                  <span class="param-name">Масса тела m</span>
+                  <span class="param-val" id="p-mass">1 кг</span>
+                </div>
+                <input type="range" class="param-slider" id="sl-mass" min="1" max="20" value="1" oninput="projMassChange()">
+              </div>
+            </div>
+
+            <!-- Wind -->
+            <div class="gp-section-title" style="margin-top:6px">Ветер</div>
+            <div class="param-block">
+              <div class="param-header">
+                <span class="param-name">Скорость ветра</span>
+                <span class="param-val" id="p-wind">0 м/с</span>
+              </div>
+              <input type="range" class="param-slider" id="sl-wind" min="-20" max="20" value="0" step="1" oninput="projWindChange()">
+            </div>
+
+            <!-- Bounce -->
+            <div class="gp-section-title" style="margin-top:6px">Отскок</div>
+            <label class="tri-layer-row" id="bounce-row" onclick="projToggleBounce(this)" style="margin-bottom:6px">
+              <span class="tri-dot" style="background:rgba(123,245,164,0.5)"></span>
+              <span class="tri-layer-name">Отскок при ударе</span>
+              <span class="tri-toggle" id="bounce-toggle" style="background:rgba(255,255,255,0.12)"><span style="display:block;width:12px;height:12px;border-radius:50%;background:#fff;margin:2px;margin-left:2px;transition:margin-left .15s"></span></span>
+            </label>
+            <div id="bounce-params" style="display:none">
+              <div class="param-block">
+                <div class="param-header">
+                  <span class="param-name">Коэф. упругости e</span>
+                  <span class="param-val" id="p-restitution">0.70</span>
+                </div>
+                <input type="range" class="param-slider" id="sl-restitution" min="0" max="100" value="70" oninput="projRestitutionChange()">
+              </div>
+            </div>
+
+            <div class="gp-section-title" style="margin-top:6px">Пресеты</div>
+            <div style="display:flex;flex-wrap:wrap;gap:6px">
+              <button class="proj-preset-chip" onclick="projPreset(20,45,0,9.81)">Земля 45°</button>
+              <button class="proj-preset-chip" onclick="projPreset(20,30,0,9.81)">30°</button>
+              <button class="proj-preset-chip" onclick="projPreset(20,60,0,9.81)">60°</button>
+              <button class="proj-preset-chip" onclick="projPreset(20,45,15,9.81)">С высоты</button>
+              <button class="proj-preset-chip" onclick="projPreset(30,45,0,1.62)">Луна</button>
+              <button class="proj-preset-chip" onclick="projPreset(30,45,0,3.72)">Марс</button>
+              <button class="proj-preset-chip" onclick="projPreset(50,45,0,9.81)">Дальний</button>
+              <button class="proj-preset-chip" onclick="projPreset(20,90,0,9.81)">Вверх</button>
+            </div>
+
+            <!-- Speed -->
+            <div class="gp-section-title" style="margin-top:8px">Скорость симуляции</div>
+            <div style="display:flex;gap:5px;margin-bottom:8px">
+              <button class="mag-mode-btn proj-speed" onclick="projSetSpeed(0.25,this)" style="flex:1;font-size:.68rem">×0.25</button>
+              <button class="mag-mode-btn proj-speed" onclick="projSetSpeed(0.5,this)" style="flex:1;font-size:.68rem">×0.5</button>
+              <button class="mag-mode-btn proj-speed active" onclick="projSetSpeed(1,this)" style="flex:1;font-size:.68rem">×1</button>
+              <button class="mag-mode-btn proj-speed" onclick="projSetSpeed(2,this)" style="flex:1;font-size:.68rem">×2</button>
+              <button class="mag-mode-btn proj-speed" onclick="projSetSpeed(4,this)" style="flex:1;font-size:.68rem">×4</button>
+            </div>
+
+            <!-- Ghost trails -->
+            <div class="gp-section-title" style="margin-top:10px">Сравнение</div>
+            <div style="display:flex;gap:6px;flex-wrap:wrap">
+              <button class="proj-preset-chip" onclick="projSaveGhost()" style="border-color:rgba(255,214,102,.4);color:#FFD166">Зафиксировать</button>
+              <button class="proj-preset-chip" onclick="projClearGhosts()" style="border-color:rgba(255,255,255,.15)"><svg class="ic" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg> Очистить следы</button>
+            </div>
+            <div style="font-size:.6rem;color:var(--text-3);margin-top:4px">Сохрани траекторию, измени параметры и сравни</div>
+
+            <!-- LAUNCH BUTTON -->
+            <div style="margin-top:auto; padding-top:16px; display:flex; flex-direction:column; gap:8px;">
+              <button class="proj-launch-btn" id="proj-launch-main" onclick="projPlayPause()">
+                <svg id="proj-launch-icon" viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
+                  <polygon points="5 3 19 12 5 21 5 3"/>
+                </svg>
+                <span id="proj-launch-label">Запустить</span>
+              </button>
+              <button class="proj-reset-btn" onclick="pSim && pSim.reset(); _projSyncPlayBtn()">
+                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2">
+                  <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/>
+                </svg>
+                Сброс
+              </button>
+            </div>
+          </div>
+
+          <!-- canvas -->
+          <div class="proj-canvas-outer">
+            <canvas id="proj-canvas"></canvas>
+          </div>
+
+        </div><!-- /.sim-body-wrap -->
+
+        <!-- stats bar -->
+        <div class="proj-stats-bar">
+          <div class="pstat">
+            <div class="pstat-label">Дальность</div>
+            <div class="pstat-val" id="ps-range">—</div>
+          </div>
+          <div class="pstat">
+            <div class="pstat-label">Макс. высота</div>
+            <div class="pstat-val" id="ps-hmax">—</div>
+          </div>
+          <div class="pstat">
+            <div class="pstat-label">Время полёта</div>
+            <div class="pstat-val" id="ps-tf">—</div>
+          </div>
+          <div class="pstat">
+            <div class="pstat-label">Скор. удара</div>
+            <div class="pstat-val" id="ps-vland">—</div>
+          </div>
+          <div class="pstat">
+            <div class="pstat-label">Текущее t</div>
+            <div class="pstat-val" id="ps-t">0.00 с</div>
+          </div>
+          <div class="pstat">
+            <div class="pstat-label">Угол посадки</div>
+            <div class="pstat-val" id="ps-land-angle">—</div>
+          </div>
+          <div class="pstat" id="ps-loss-wrap" style="display:none">
+            <div class="pstat-label">Δ дальность</div>
+            <div class="pstat-val" id="ps-loss">—</div>
+          </div>
+        </div>
+      </div><!-- /#sim-proj -->
+
+      <!-- ── COLLISION sim body ── -->
+      <div id="sim-coll" class="sim-proj-wrap" style="display:none">
+        <div class="sim-body-wrap">
+
+          <!-- controls panel -->
+          <div class="proj-panel">
+            <div class="gp-section-title">Параметры</div>
+
+            <div class="param-block">
+              <div class="param-header">
+                <span class="param-name" style="color:#9B5DE5">Масса m₁</span>
+                <span class="param-val" id="c-m1">4 кг</span>
+              </div>
+              <input type="range" class="param-slider" id="sl-m1" min="1" max="20" value="4" oninput="collParam()">
+            </div>
+
+            <div class="param-block">
+              <div class="param-header">
+                <span class="param-name" style="color:#06D6E0">Масса m₂</span>
+                <span class="param-val" id="c-m2">4 кг</span>
+              </div>
+              <input type="range" class="param-slider" id="sl-m2" min="1" max="20" value="4" oninput="collParam()">
+            </div>
+
+            <div class="param-block">
+              <div class="param-header">
+                <span class="param-name" style="color:#9B5DE5">Скорость v₁</span>
+                <span class="param-val" id="c-v1">8 м/с</span>
+              </div>
+              <input type="range" class="param-slider" id="sl-cv1" min="0" max="30" value="8" oninput="collParam()">
+            </div>
+
+            <div class="param-block">
+              <div class="param-header">
+                <span class="param-name" style="color:#06D6E0">Скорость v₂</span>
+                <span class="param-val" id="c-v2">8 м/с</span>
+              </div>
+              <input type="range" class="param-slider" id="sl-cv2" min="0" max="30" value="8" oninput="collParam()">
+            </div>
+
+            <div class="param-block">
+              <div class="param-header">
+                <span class="param-name">Угол v₂</span>
+                <span class="param-val" id="c-angle">0°</span>
+              </div>
+              <input type="range" class="param-slider" id="sl-cangle" min="-60" max="60" value="0" oninput="collParam()">
+            </div>
+
+            <div class="param-block">
+              <div class="param-header">
+                <span class="param-name">Упругость e</span>
+                <span class="param-val" id="c-e">1.00</span>
+              </div>
+              <input type="range" class="param-slider" id="sl-e" min="0" max="1" step="0.01" value="1" oninput="collParam()">
+            </div>
+
+            <div class="param-block">
+              <div class="param-header">
+                <span class="param-name"><svg class="ic" viewBox="0 0 24 24"><polygon points="13 19 22 12 13 5 13 19"/><polygon points="2 19 11 12 2 5 2 19"/></svg> Скорость</span>
+                <span class="param-val" id="c-speed" style="color:#06D6E0">1.00×</span>
+              </div>
+              <input type="range" class="param-slider" id="sl-speed" min="0.1" max="4" step="0.05" value="1"
+                     oninput="collParam()" style="--track-color:#06D6E0">
+            </div>
+
+            <div class="gp-section-title" style="margin-top:6px">Пресеты</div>
+            <div style="display:flex;flex-wrap:wrap;gap:6px">
+              <button class="proj-preset-chip" onclick="collPreset(4,4,8,8,0,1)">Упругий 1:1</button>
+              <button class="proj-preset-chip" onclick="collPreset(4,4,8,8,0,0)">Абс. неупругий</button>
+              <button class="proj-preset-chip" onclick="collPreset(4,4,8,8,0,0.5)">e = 0.5</button>
+              <button class="proj-preset-chip" onclick="collPreset(4,4,12,0,0,1)">Бильярд</button>
+              <button class="proj-preset-chip" onclick="collPreset(2,8,14,0,0,1)">Лёгкий<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>тяжёлый</button>
+              <button class="proj-preset-chip" onclick="collPreset(8,2,6,0,0,1)">Тяжёлый<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>лёгкий</button>
+              <button class="proj-preset-chip" onclick="collPreset(2,14,18,0,0,1)">Большая разница</button>
+              <button class="proj-preset-chip" onclick="collPreset(5,5,8,8,30,1)">Косой 30°</button>
+              <button class="proj-preset-chip" onclick="collPreset(5,5,8,8,50,0.8)">Скользящий</button>
+              <button class="proj-preset-chip" onclick="collPreset(6,6,10,10,0,0)">Слипание</button>
+            </div>
+
+            <!-- launch button -->
+            <div style="margin-top:auto; padding-top:16px; display:flex; flex-direction:column; gap:8px;">
+              <button class="proj-launch-btn" id="coll-launch-main" onclick="collPlayPause()">
+                <svg id="coll-launch-icon" viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
+                  <polygon points="5 3 19 12 5 21 5 3"/>
+                </svg>
+                <span id="coll-launch-label">Запустить</span>
+              </button>
+              <button class="proj-reset-btn" onclick="cSim && cSim.reset(); _collSyncBtn()">
+                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2">
+                  <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/>
+                </svg>
+                Сброс
+              </button>
+            </div>
+          </div>
+
+          <!-- canvas -->
+          <div class="proj-canvas-outer">
+            <canvas id="coll-canvas"></canvas>
+          </div>
+
+        </div><!-- /.sim-body-wrap -->
+
+        <!-- stats bar -->
+        <div class="proj-stats-bar">
+          <div class="pstat">
+            <div class="pstat-label">Импульс до</div>
+            <div class="pstat-val" id="cs-pbefore">—</div>
+          </div>
+          <div class="pstat">
+            <div class="pstat-label">Импульс после</div>
+            <div class="pstat-val" id="cs-pafter">—</div>
+          </div>
+          <div class="pstat">
+            <div class="pstat-label">КЭ до</div>
+            <div class="pstat-val" id="cs-kebefore">—</div>
+          </div>
+          <div class="pstat">
+            <div class="pstat-label">КЭ после</div>
+            <div class="pstat-val" id="cs-keafter">—</div>
+          </div>
+          <div class="pstat">
+            <div class="pstat-label">Столкновений</div>
+            <div class="pstat-val" id="cs-count">0</div>
+          </div>
+        </div>
+      </div><!-- /#sim-coll -->
+
+      <!-- ── CRYSTAL sim body ── -->
+      <div id="sim-crystal" class="sim-body-wrap" style="display:none">
+        <div class="graph-panel">
+          <div class="gp-section-title">Тип решётки</div>
+          <button class="gp-btn crystal-type-btn active" id="crys-nacl" onclick="setCrystal('nacl',this)" style="margin-bottom:6px"><svg class="ic" viewBox="0 0 24 24"><path d="M3 18a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7H3z"/><path d="M3 7V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v2"/><path d="M12 11v4M10 13h4"/></svg> NaCl (ионная)</button>
+          <button class="gp-btn crystal-type-btn" id="crys-diamond" onclick="setCrystal('diamond',this)" style="margin-bottom:6px"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle"><path d="M6 3l-3 7 9 11 9-11-3-7H6z"/><path d="M3 10h18"/><path d="M12 21L6 3"/><path d="M12 21l6-18"/></svg> Алмаз (ковалентная)</button>
+          <button class="gp-btn crystal-type-btn" id="crys-bcc" onclick="setCrystal('bcc',this)" style="margin-bottom:6px">ОЦК (металл)</button>
+          <button class="gp-btn crystal-type-btn" id="crys-fcc" onclick="setCrystal('fcc',this)" style="margin-bottom:6px">ГЦК (металл)</button>
+          <div class="gp-section-title" style="margin-top:12px">Управление</div>
+          <div class="tp-text" style="font-size:0.72rem">Вращение: зажмите и тяните<br>Зум: колёсико мыши</div>
+        </div>
+        <div class="graph-canvas-outer">
+          <div class="graph-canvas-wrap" id="crystal-container"></div>
+        </div>
+      </div>
+
+      <!-- ── ORBITALS sim body ── -->
+      <div id="sim-orbitals" class="sim-body-wrap" style="display:none">
+        <div class="graph-panel">
+          <div class="gp-section-title">Орбиталь</div>
+          <button class="gp-btn orbital-mode-btn active" id="orb-s" onclick="setOrbital('s',this)" style="margin-bottom:6px"<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#4CC9F0;margin-right:4px"></span>s-орбиталь</button>
+          <button class="gp-btn orbital-mode-btn" id="orb-p" onclick="setOrbital('p',this)" style="margin-bottom:6px"<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#06D6A0;margin-right:4px"></span>p-орбитали</button>
+          <button class="gp-btn orbital-mode-btn" id="orb-d" onclick="setOrbital('d',this)" style="margin-bottom:6px"<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#FFD166;margin-right:4px"></span>d-орбитали</button>
+          <div class="gp-section-title" style="margin-top:12px">Молекулы</div>
+          <button class="gp-btn orbital-mode-btn" id="orb-h2" onclick="setOrbital('h2',this)" style="margin-bottom:6px">H₂ (σ-связь)</button>
+          <button class="gp-btn orbital-mode-btn" id="orb-h2o" onclick="setOrbital('h2o',this)" style="margin-bottom:6px">H₂O (угловая)</button>
+          <div class="gp-section-title" style="margin-top:12px">Управление</div>
+          <div class="tp-text" style="font-size:0.72rem">Вращение: зажмите и тяните<br>Зум: колёсико мыши</div>
+        </div>
+        <div class="graph-canvas-outer">
+          <div class="graph-canvas-wrap" id="orbitals-container"></div>
+        </div>
+      </div>
+
+      <!-- ── CHEM SANDBOX sim body ── -->
+      <div id="sim-chemsandbox" class="sim-proj-wrap" style="display:none">
+        <div class="sim-body-wrap">
+          <div class="proj-panel" style="width:220px;gap:0">
+            <!-- Category filter -->
+            <div class="gp-section-title" style="margin-bottom:6px">Реагенты</div>
+            <div style="display:flex;flex-wrap:wrap;gap:3px;margin-bottom:10px">
+              <button class="proj-preset-chip reac-mode-btn chemsand-cat active" onclick="chemSandCat('all',this)">Все</button>
+              <button class="proj-preset-chip reac-mode-btn chemsand-cat" onclick="chemSandCat('acid',this)">Кислоты</button>
+              <button class="proj-preset-chip reac-mode-btn chemsand-cat" onclick="chemSandCat('base',this)">Основания</button>
+              <button class="proj-preset-chip reac-mode-btn chemsand-cat" onclick="chemSandCat('salt',this)">Соли</button>
+              <button class="proj-preset-chip reac-mode-btn chemsand-cat" onclick="chemSandCat('metal',this)">Металлы</button>
+              <button class="proj-preset-chip reac-mode-btn chemsand-cat" onclick="chemSandCat('indicator',this)">Индикаторы</button>
+              <button class="proj-preset-chip reac-mode-btn chemsand-cat" onclick="chemSandCat('other',this)">Другое</button>
+            </div>
+            <!-- Reagent list -->
+            <div id="chemsand-reagents" style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px;max-height:180px;overflow-y:auto"></div>
+            <!-- Presets -->
+            <div class="gp-section-title" style="margin-bottom:6px">Пресеты</div>
+            <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px">
+              <button class="proj-preset-chip" onclick="chemSandPreset('neutralization')">Нейтрализация</button>
+              <button class="proj-preset-chip" onclick="chemSandPreset('gas_evolution')">Газ CO₂</button>
+              <button class="proj-preset-chip" onclick="chemSandPreset('precipitate')">Осадок AgCl</button>
+              <button class="proj-preset-chip" onclick="chemSandPreset('displacement')">Замещение Cu</button>
+              <button class="proj-preset-chip" onclick="chemSandPreset('indicator')">Индикатор</button>
+              <button class="proj-preset-chip" onclick="chemSandPreset('violent')">Na + H₂O</button>
+              <button class="proj-preset-chip" onclick="chemSandPreset('yellow_precip')">PbCrO₄<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg></button>
+              <button class="proj-preset-chip" onclick="chemSandPreset('blue_precip')">Cu(OH)₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg></button>
+            </div>
+            <!-- Sliders -->
+            <div class="gp-section-title" style="margin-bottom:4px;margin-top:4px">Условия</div>
+            <div class="param-block" style="margin-bottom:5px">
+              <div class="param-header"><span class="param-name" style="font-size:.7rem">Концентрация</span><span class="param-val" id="csand-conc-val" style="font-size:.7rem;min-width:40px">35%</span></div>
+              <input type="range" class="param-slider" id="sl-csand-conc" min="5" max="95" value="35" oninput="chemSandConcChange()">
+            </div>
+            <div class="param-block" style="margin-bottom:5px">
+              <div class="param-header"><span class="param-name" style="font-size:.7rem">Температура</span><span class="param-val" id="csand-temp-val" style="font-size:.7rem;min-width:40px">20°C</span></div>
+              <input type="range" class="param-slider" id="sl-csand-temp" min="0" max="100" value="20" oninput="chemSandTempChange()">
+            </div>
+            <!-- Quiz mode -->
+            <div class="pp-group" style="margin-top:8px">
+              <div class="pp-label" style="font-size:.65rem">Режим</div>
+              <div style="display:flex;gap:6px;align-items:center">
+                <button class="proj-preset-chip reac-mode-btn chemsand-mode active" id="csand-mode-free" onclick="chemSandSetMode('free',this)">Свободный</button>
+                <button class="proj-preset-chip reac-mode-btn chemsand-mode" id="csand-mode-quiz" onclick="chemSandSetMode('quiz',this)">Задания</button>
+                <span id="csand-quiz-score" style="font-size:.7rem;color:rgba(255,255,255,.4);margin-left:8px"></span>
+              </div>
+              <div id="csand-quiz-question" style="display:none;margin-top:6px;padding:6px 10px;border-radius:8px;background:rgba(155,93,229,.10);border:1px solid rgba(155,93,229,.25);font-size:.72rem;color:#C9A0FF;line-height:1.3"></div>
+              <div id="csand-quiz-result" style="display:none;margin-top:4px;font-size:.72rem;font-weight:700"></div>
+              <button id="csand-quiz-next" style="display:none;margin-top:4px" class="proj-preset-chip" onclick="chemSandQuizNext()">Следующее задание</button>
+            </div>
+            <!-- Hint -->
+            <div class="tp-text" style="font-size:.65rem;opacity:.4;line-height:1.3">Клик на панели — добавить/убрать · Drag с полки в колбу · ПКМ — сбросить</div>
+          </div>
+          <div class="proj-canvas-outer">
+            <canvas id="chemsandbox-canvas" style="display:block;position:absolute;top:0;left:0;width:100%;height:100%;cursor:default"></canvas>
+          </div>
+        </div>
+        <!-- Stats bar -->
+        <div class="proj-stats-bar" id="chemsand-stats-bar">
+          <div class="pstat"><div class="pstat-label">В зоне</div><div class="pstat-val" id="csbar-v1" style="color:#06D6E0">0</div></div>
+          <div class="pstat"><div class="pstat-label">Тип</div><div class="pstat-val" id="csbar-v3" style="color:#7BF5A4">—</div></div>
+          <div class="pstat"><div class="pstat-label">Уравнение</div><div class="pstat-val" id="csbar-v4" style="color:#EF476F">—</div></div>
+          <div class="pstat"><div class="pstat-label">Сокр. ионное</div><div class="pstat-val" id="csbar-v6" style="color:#9BD4FF">—</div></div>
+          <div class="pstat"><div class="pstat-label">Продукты</div><div class="pstat-val" id="csbar-v5" style="color:#4CC9F0">—</div></div>
+        </div>
+      </div>
+
+      <!-- ── CELL DIVISION sim body ── -->
+      <div id="sim-celldivision" class="sim-proj-wrap" style="display:none">
+        <div class="sim-body-wrap">
+          <div class="proj-panel" style="width:200px;gap:0">
+            <div class="gp-section-title" style="margin-bottom:6px">Режим</div>
+            <div style="display:flex;gap:4px;margin-bottom:12px">
+              <button class="proj-preset-chip reac-mode-btn cd-mode-btn active" onclick="cdSetMode('mitosis',this)">Митоз</button>
+              <button class="proj-preset-chip reac-mode-btn cd-mode-btn" onclick="cdSetMode('meiosis',this)">Мейоз</button>
+            </div>
+            <div class="gp-section-title" style="margin-bottom:6px">Фазы</div>
+            <div id="cd-phase-dots" style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px"></div>
+            <div style="display:flex;gap:4px;margin-bottom:12px">
+              <button class="gp-btn" onclick="cdPrevPhase()" style="flex:1"><svg class="ic" viewBox="0 0 24 24"><polygon points="19 20 9 12 19 4 19 20"/></svg> Назад</button>
+              <button class="gp-btn" onclick="cdNextPhase()" style="flex:1">Далее <svg class="ic" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg></button>
+            </div>
+            <button class="gp-btn" id="cd-auto-btn" onclick="cdAutoPlay(this)" style="width:100%;margin-bottom:10px"><svg class="ic" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg> Авто</button>
+            <div class="pp-hint">Нажми фазу или используй кнопки для пошагового просмотра</div>
+          </div>
+          <div class="proj-canvas-outer">
+            <canvas id="celldiv-canvas" style="display:block;position:absolute;top:0;left:0;width:100%;height:100%"></canvas>
+          </div>
+        </div>
+        <div class="proj-stats-bar" id="cdbar">
+          <div class="pstat"><div class="pstat-label">Фаза</div><div class="pstat-val" id="cdbar-v1" style="color:#7BF5A4">—</div></div>
+          <div class="pstat"><div class="pstat-label">Хромосомы</div><div class="pstat-val" id="cdbar-v2" style="color:#06D6E0">—</div></div>
+          <div class="pstat"><div class="pstat-label">ДНК</div><div class="pstat-val" id="cdbar-v3" style="color:#FFD166">—</div></div>
+          <div class="pstat"><div class="pstat-label">Шаг</div><div class="pstat-val" id="cdbar-v4" style="color:#EF476F">—</div></div>
+          <div class="pstat"><div class="pstat-label">Режим</div><div class="pstat-val" id="cdbar-v5" style="color:#9B5DE5">—</div></div>
+        </div>
+      </div>
+
+      <!-- ── PHOTOSYNTHESIS sim body ── -->
+      <div id="sim-photosynthesis" class="sim-proj-wrap" style="display:none">
+        <div class="sim-body-wrap">
+          <div class="proj-panel" style="width:200px;gap:0">
+            <div class="gp-section-title" style="margin-bottom:6px">Процесс</div>
+            <div style="display:flex;gap:4px;margin-bottom:12px">
+              <button class="proj-preset-chip reac-mode-btn ps-mode-btn active" onclick="psSetMode('photo',this)">Фотосинтез</button>
+              <button class="proj-preset-chip reac-mode-btn ps-mode-btn" onclick="psSetMode('resp',this)">Дыхание</button>
+            </div>
+            <div class="gp-section-title" style="margin-bottom:4px">Интенсивность света</div>
+            <div class="sl-row" style="margin-bottom:10px">
+              <input type="range" id="sl-ps-light" min="0" max="100" value="70" oninput="psLightChange()" style="flex:1">
+              <span class="sl-val" id="ps-light-val">70%</span>
+            </div>
+            <div class="gp-section-title" style="margin-bottom:4px">Концентрация CO₂</div>
+            <div class="sl-row" style="margin-bottom:10px">
+              <input type="range" id="sl-ps-co2" min="0" max="100" value="50" oninput="psCO2Change()" style="flex:1">
+              <span class="sl-val" id="ps-co2-val">50%</span>
+            </div>
+            <button class="gp-btn" onclick="psReset()" style="width:100%;margin-top:4px"><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> Сброс</button>
+            <div class="pp-hint" style="margin-top:10px">Меняй параметры и наблюдай за скоростью реакций</div>
+          </div>
+          <div class="proj-canvas-outer">
+            <canvas id="photosyn-canvas" style="display:block;position:absolute;top:0;left:0;width:100%;height:100%"></canvas>
+          </div>
+        </div>
+        <div class="proj-stats-bar" id="psbar">
+          <div class="pstat"><div class="pstat-label">АТФ/с</div><div class="pstat-val" id="psbar-v1" style="color:#FFD166">0</div></div>
+          <div class="pstat"><div class="pstat-label">O₂ выд.</div><div class="pstat-val" id="psbar-v2" style="color:#7BF5A4">0</div></div>
+          <div class="pstat"><div class="pstat-label">CO₂ усв.</div><div class="pstat-val" id="psbar-v3" style="color:#06D6E0">0</div></div>
+          <div class="pstat"><div class="pstat-label">КПД</div><div class="pstat-val" id="psbar-v4" style="color:#EF476F">—</div></div>
+          <div class="pstat"><div class="pstat-label">Режим</div><div class="pstat-val" id="psbar-v5" style="color:#9B5DE5">—</div></div>
+        </div>
+      </div>
+
+      <!-- ── ANGRY BIRDS sim body ── -->
+      <div id="sim-angrybirds" class="sim-proj-wrap" style="display:none">
+        <div class="sim-body-wrap">
+          <div class="proj-panel" style="width:200px;gap:0">
+            <div class="gp-section-title" style="margin-bottom:6px">Уровень</div>
+            <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px" id="ab-level-btns">
+              <button class="proj-preset-chip reac-mode-btn ab-lvl-btn active" onclick="abLevel(0,this)">1</button>
+              <button class="proj-preset-chip reac-mode-btn ab-lvl-btn" onclick="abLevel(1,this)">2</button>
+              <button class="proj-preset-chip reac-mode-btn ab-lvl-btn" onclick="abLevel(2,this)">3</button>
+              <button class="proj-preset-chip reac-mode-btn ab-lvl-btn" onclick="abLevel(3,this)">4</button>
+              <button class="proj-preset-chip reac-mode-btn ab-lvl-btn" onclick="abLevel(4,this)">5</button>
+              <button class="proj-preset-chip reac-mode-btn ab-lvl-btn" onclick="abLevel(5,this)">6</button>
+            </div>
+            <button onclick="angryBirdsRestart()" style="width:100%;padding:6px 10px;border-radius:8px;border:1.5px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:#e0e0e0;font-size:.76rem;font-weight:700;cursor:pointer;margin-bottom:12px" title="Начать уровень заново"><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> Сначала</button>
+            <div class="gp-section-title" style="margin-bottom:6px">Планеты</div>
+            <div style="display:flex;flex-direction:column;gap:5px;margin-bottom:14px">
+              <div style="display:flex;justify-content:space-between;align-items:center;padding:4px 8px;border-radius:7px;background:rgba(255,255,255,.06)">
+                <span style="font-size:.75rem;color:#e0e0e0"><svg class="ic" viewBox="0 0 24 24"><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> Земля</span><span style="font-size:.72rem;color:#06D6E0;font-weight:700">9.81 м/с²</span>
+              </div>
+              <div style="display:flex;justify-content:space-between;align-items:center;padding:4px 8px;border-radius:7px;background:rgba(255,255,255,.06)">
+                <span style="font-size:.75rem;color:#e0e0e0"><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="currentColor" stroke="none"/></svg> Луна</span><span style="font-size:.72rem;color:#06D6E0;font-weight:700">1.62 м/с²</span>
+              </div>
+              <div style="display:flex;justify-content:space-between;align-items:center;padding:4px 8px;border-radius:7px;background:rgba(255,255,255,.06)">
+                <span style="font-size:.75rem;color:#e0e0e0"><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="currentColor" stroke="none"/></svg> Марс</span><span style="font-size:.72rem;color:#06D6E0;font-weight:700">3.71 м/с²</span>
+              </div>
+              <div style="display:flex;justify-content:space-between;align-items:center;padding:4px 8px;border-radius:7px;background:rgba(255,255,255,.06)">
+                <span style="font-size:.75rem;color:#e0e0e0"><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="currentColor" stroke="none"/></svg> Юпитер</span><span style="font-size:.72rem;color:#06D6E0;font-weight:700">24.8 м/с²</span>
+              </div>
+            </div>
+            <div class="gp-section-title" style="margin-bottom:6px">Птицы</div>
+            <div style="display:flex;flex-direction:column;gap:5px;margin-bottom:14px">
+              <div style="display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:7px;background:rgba(255,255,255,.06)">
+                <span style="width:14px;height:14px;border-radius:50%;background:#e63946;flex-shrink:0;display:inline-block"></span>
+                <span style="font-size:.73rem;color:#e0e0e0">Красная — обычная</span>
+              </div>
+              <div style="display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:7px;background:rgba(255,255,255,.06)">
+                <span style="width:14px;height:14px;border-radius:50%;background:#888;flex-shrink:0;display:inline-block"></span>
+                <span style="font-size:.73rem;color:#e0e0e0">Тяжёлая — высокий урон</span>
+              </div>
+              <div style="display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:7px;background:rgba(255,255,255,.06)">
+                <span style="width:14px;height:14px;border-radius:50%;background:#ffd166;flex-shrink:0;display:inline-block"></span>
+                <span style="font-size:.73rem;color:#e0e0e0">Жёлтая — быстрая</span>
+              </div>
+            </div>
+            <div class="pp-hint">Тяни птицу мышью · отпусти — выстрел</div>
+          </div>
+          <div class="proj-canvas-outer">
+            <canvas id="angrybirds-canvas" style="display:block;position:absolute;top:0;left:0;width:100%;height:100%;cursor:crosshair"></canvas>
+          </div>
+        </div>
+        <div class="proj-stats-bar" id="abbar">
+          <div class="pstat"><div class="pstat-label">Уровень</div><div class="pstat-val" id="abbar-v1" style="color:#06D6E0">1</div></div>
+          <div class="pstat"><div class="pstat-label">Птиц</div><div class="pstat-val" id="abbar-v2" style="color:#ffd166">3</div></div>
+          <div class="pstat"><div class="pstat-label">Свиней</div><div class="pstat-val" id="abbar-v3" style="color:#7bf5a4">1</div></div>
+          <div class="pstat"><div class="pstat-label">Очки</div><div class="pstat-val" id="abbar-v4" style="color:#ef476f">0</div></div>
+          <div class="pstat"><div class="pstat-label">Планета</div><div class="pstat-val" id="abbar-v5" style="color:#9b5de5">Земля <svg class="ic" viewBox="0 0 24 24"><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></div></div>
+        </div>
+      </div>
+
+      <!-- ── QUADRATIC sim body ── -->
+      <div id="sim-quadratic" class="sim-proj-wrap" style="display:none">
+        <div class="sim-body-wrap">
+          <div class="proj-panel" style="width:220px;gap:0">
+            <div class="gp-section-title" style="margin-bottom:8px">Коэффициенты</div>
+            <div class="proj-slider-row" style="margin-bottom:10px">
+              <label style="font-size:.78rem;color:#ccc;width:60px">a = <span id="quad-a-val" style="color:#9B5DE5;font-weight:700">1</span></label>
+              <input type="range" id="sl-quad-a" min="-5" max="5" step="0.1" value="1" oninput="quadParam('a',this.value)" style="flex:1">
+            </div>
+            <div class="proj-slider-row" style="margin-bottom:10px">
+              <label style="font-size:.78rem;color:#ccc;width:60px">b = <span id="quad-b-val" style="color:#06D6E0;font-weight:700">0</span></label>
+              <input type="range" id="sl-quad-b" min="-10" max="10" step="0.1" value="0" oninput="quadParam('b',this.value)" style="flex:1">
+            </div>
+            <div class="proj-slider-row" style="margin-bottom:10px">
+              <label style="font-size:.78rem;color:#ccc;width:60px">c = <span id="quad-c-val" style="color:#F15BB5;font-weight:700">-1</span></label>
+              <input type="range" id="sl-quad-c" min="-10" max="10" step="0.1" value="-1" oninput="quadParam('c',this.value)" style="flex:1">
+            </div>
+            <div style="margin-top:8px"></div>
+            <div class="gp-section-title" style="margin-bottom:6px">Примеры</div>
+            <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px">
+              <button class="preset-btn" onclick="quadPreset(1,0,-4)">x²−4</button>
+              <button class="preset-btn" onclick="quadPreset(1,-2,1)">(x−1)²</button>
+              <button class="preset-btn" onclick="quadPreset(1,0,1)">x²+1</button>
+              <button class="preset-btn" onclick="quadPreset(-1,0,4)">−x²+4</button>
+              <button class="preset-btn" onclick="quadPreset(2,-3,-2)">2x²−3x−2</button>
+              <button class="preset-btn" onclick="quadPreset(0.5,1,-3)">½x²+x−3</button>
+            </div>
+            <div class="pp-hint">Скролл — зум · Тащи — панорама</div>
+          </div>
+          <div class="proj-canvas-outer">
+            <canvas id="quadratic-canvas"></canvas>
+          </div>
+        </div>
+        <div class="proj-stats-bar" id="quadbar">
+          <div class="pstat"><div class="pstat-label">Дискриминант</div><div class="pstat-val" id="qbar-v1" style="color:#FFD166">—</div></div>
+          <div class="pstat"><div class="pstat-label">Корни</div><div class="pstat-val" id="qbar-v2" style="color:#EF476F">—</div></div>
+          <div class="pstat"><div class="pstat-label">Вершина</div><div class="pstat-val" id="qbar-v3" style="color:#06D6E0">—</div></div>
+          <div class="pstat"><div class="pstat-label">Уравнение</div><div class="pstat-val" id="qbar-v4" style="color:#9B5DE5">—</div></div>
+        </div>
+      </div>
+
+      <!-- ── NORMAL DISTRIBUTION sim body ── -->
+      <div id="sim-normaldist" class="sim-proj-wrap" style="display:none">
+        <div class="sim-body-wrap">
+          <div class="proj-panel" style="width:220px;gap:0">
+            <div class="gp-section-title" style="margin-bottom:8px">Параметры</div>
+            <div class="proj-slider-row" style="margin-bottom:10px">
+              <label style="font-size:.78rem;color:#ccc;width:60px">μ = <span id="nd-mu-val" style="color:#06D6E0;font-weight:700">0</span></label>
+              <input type="range" id="sl-nd-mu" min="-5" max="5" step="0.1" value="0" oninput="ndParam('mu',this.value)" style="flex:1">
+            </div>
+            <div class="proj-slider-row" style="margin-bottom:10px">
+              <label style="font-size:.78rem;color:#ccc;width:60px">σ = <span id="nd-sigma-val" style="color:#9B5DE5;font-weight:700">1</span></label>
+              <input type="range" id="sl-nd-sigma" min="0.2" max="4" step="0.1" value="1" oninput="ndParam('sigma',this.value)" style="flex:1">
+            </div>
+            <div style="margin-top:8px"></div>
+            <div class="gp-section-title" style="margin-bottom:6px">Закрасить область</div>
+            <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px">
+              <button class="preset-btn nd-shade-btn active" onclick="ndShade('1s',this)">μ ± 1σ</button>
+              <button class="preset-btn nd-shade-btn" onclick="ndShade('2s',this)">μ ± 2σ</button>
+              <button class="preset-btn nd-shade-btn" onclick="ndShade('3s',this)">μ ± 3σ</button>
+              <button class="preset-btn nd-shade-btn" onclick="ndShade('none',this)">Нет</button>
+            </div>
+            <div style="margin-top:8px"></div>
+            <div class="gp-section-title" style="margin-bottom:6px">Пресеты</div>
+            <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px">
+              <button class="preset-btn" onclick="ndPreset(0,1)">Стандартное</button>
+              <button class="preset-btn" onclick="ndPreset(0,0.5)">Узкое σ=0.5</button>
+              <button class="preset-btn" onclick="ndPreset(0,2)">Широкое σ=2</button>
+              <button class="preset-btn" onclick="ndPreset(3,1)">Сдвиг μ=3</button>
+            </div>
+            <div class="pp-hint">Наведи курсор — Z-score и плотность</div>
+          </div>
+          <div class="proj-canvas-outer">
+            <canvas id="normaldist-canvas"></canvas>
+          </div>
+        </div>
+        <div class="proj-stats-bar" id="ndbar">
+          <div class="pstat"><div class="pstat-label">μ</div><div class="pstat-val" id="ndbar-v1" style="color:#06D6E0">0</div></div>
+          <div class="pstat"><div class="pstat-label">σ</div><div class="pstat-val" id="ndbar-v2" style="color:#9B5DE5">1</div></div>
+          <div class="pstat"><div class="pstat-label">Пик f(μ)</div><div class="pstat-val" id="ndbar-v3" style="color:#FFD166">—</div></div>
+          <div class="pstat"><div class="pstat-label">Область</div><div class="pstat-val" id="ndbar-v4" style="color:#7BF5A4">—</div></div>
+        </div>
+      </div>
+
+      <!-- ── GRAPH TRANSFORM sim body ── -->
+      <div id="sim-graphtransform" class="sim-proj-wrap" style="display:none">
+        <div class="sim-body-wrap">
+          <div class="proj-panel" style="width:230px;gap:0">
+            <div class="gp-section-title" style="margin-bottom:6px">Базовая функция f(x)</div>
+            <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px">
+              <button class="preset-btn gt-base-btn active" onclick="gtBase('sin',this)">sin x</button>
+              <button class="preset-btn gt-base-btn" onclick="gtBase('cos',this)">cos x</button>
+              <button class="preset-btn gt-base-btn" onclick="gtBase('x^2',this)">x²</button>
+              <button class="preset-btn gt-base-btn" onclick="gtBase('x^3',this)">x³</button>
+              <button class="preset-btn gt-base-btn" onclick="gtBase('sqrt',this)">√x</button>
+              <button class="preset-btn gt-base-btn" onclick="gtBase('|x|',this)">|x|</button>
+              <button class="preset-btn gt-base-btn" onclick="gtBase('1/x',this)">1/x</button>
+            </div>
+            <div class="gp-section-title" style="margin-bottom:6px">y = a · f(k·x + b) + c</div>
+            <div class="proj-slider-row" style="margin-bottom:8px">
+              <label style="font-size:.78rem;color:#ccc;width:55px">a = <span id="gt-a-val" style="color:#9B5DE5;font-weight:700">1</span></label>
+              <input type="range" id="sl-gt-a" min="-3" max="3" step="0.1" value="1" oninput="gtParam('a',this.value)" style="flex:1">
+            </div>
+            <div class="proj-slider-row" style="margin-bottom:8px">
+              <label style="font-size:.78rem;color:#ccc;width:55px">k = <span id="gt-k-val" style="color:#06D6E0;font-weight:700">1</span></label>
+              <input type="range" id="sl-gt-k" min="-3" max="3" step="0.1" value="1" oninput="gtParam('k',this.value)" style="flex:1">
+            </div>
+            <div class="proj-slider-row" style="margin-bottom:8px">
+              <label style="font-size:.78rem;color:#ccc;width:55px">b = <span id="gt-b-val" style="color:#FFD166;font-weight:700">0</span></label>
+              <input type="range" id="sl-gt-b" min="-5" max="5" step="0.1" value="0" oninput="gtParam('b',this.value)" style="flex:1">
+            </div>
+            <div class="proj-slider-row" style="margin-bottom:8px">
+              <label style="font-size:.78rem;color:#ccc;width:55px">c = <span id="gt-c-val" style="color:#EF476F;font-weight:700">0</span></label>
+              <input type="range" id="sl-gt-c" min="-5" max="5" step="0.1" value="0" oninput="gtParam('c',this.value)" style="flex:1">
+            </div>
+            <div style="margin-top:8px"></div>
+            <div class="gp-section-title" style="margin-bottom:6px">Эффекты</div>
+            <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px">
+              <button class="preset-btn" onclick="gtEffect(2,1,0,0)">Растяжение <svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="21" x2="12" y2="3"/><polyline points="7 8 12 3 17 8"/><polyline points="17 16 12 21 7 16"/></svg></button>
+              <button class="preset-btn" onclick="gtEffect(1,2,0,0)">Сжатие <svg class="ic" viewBox="0 0 24 24"><line x1="3" y1="12" x2="21" y2="12"/><polyline points="8 17 3 12 8 7"/><polyline points="16 7 21 12 16 17"/></svg></button>
+              <button class="preset-btn" onclick="gtEffect(-1,1,0,0)">Отражение <svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="21" x2="12" y2="3"/><polyline points="7 8 12 3 17 8"/><polyline points="17 16 12 21 7 16"/></svg></button>
+              <button class="preset-btn" onclick="gtEffect(1,-1,0,0)">Отражение <svg class="ic" viewBox="0 0 24 24"><line x1="3" y1="12" x2="21" y2="12"/><polyline points="8 17 3 12 8 7"/><polyline points="16 7 21 12 16 17"/></svg></button>
+              <button class="preset-btn" onclick="gtEffect(1,1,2,0)">Сдвиг <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></button>
+              <button class="preset-btn" onclick="gtEffect(1,1,0,3)">Сдвиг <svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg></button>
+            </div>
+            <button class="preset-btn" onclick="gtEffect(1,1,0,0)" style="width:100%;margin-top:4px">Сброс</button>
+            <div class="pp-hint">Скролл — зум · Тащи — панорама</div>
+          </div>
+          <div class="proj-canvas-outer">
+            <canvas id="graphtransform-canvas"></canvas>
+          </div>
+        </div>
+        <div class="proj-stats-bar" id="gtbar">
+          <div class="pstat"><div class="pstat-label">f(x)</div><div class="pstat-val" id="gtbar-v1" style="color:#06D6E0">sin(x)</div></div>
+          <div class="pstat"><div class="pstat-label">a</div><div class="pstat-val" id="gtbar-v2" style="color:#9B5DE5">1</div></div>
+          <div class="pstat"><div class="pstat-label">k</div><div class="pstat-val" id="gtbar-v3" style="color:#06D6E0">1</div></div>
+          <div class="pstat"><div class="pstat-label">b</div><div class="pstat-val" id="gtbar-v4" style="color:#FFD166">0</div></div>
+          <div class="pstat"><div class="pstat-label">c</div><div class="pstat-val" id="gtbar-v5" style="color:#EF476F">0</div></div>
+        </div>
+      </div>
+
+      <!-- ── PENDULUM sim body ── -->
+      <div id="sim-pendulum" class="sim-proj-wrap" style="display:none">
+        <div class="sim-body-wrap">
+          <div class="proj-panel" style="width:220px;gap:0">
+            <div class="gp-section-title" style="margin-bottom:8px">Параметры</div>
+            <div class="proj-slider-row" style="margin-bottom:8px">
+              <label style="font-size:.78rem;color:#ccc;width:55px">θ = <span id="pend-theta-val" style="color:#9B5DE5;font-weight:700">45</span>°</label>
+              <input type="range" id="sl-pend-theta" min="5" max="170" step="1" value="45" oninput="pendParam('theta',this.value)" style="flex:1">
+            </div>
+            <div class="proj-slider-row" style="margin-bottom:8px">
+              <label style="font-size:.78rem;color:#ccc;width:55px">L = <span id="pend-L-val" style="color:#06D6E0;font-weight:700">200</span></label>
+              <input type="range" id="sl-pend-L" min="60" max="300" step="5" value="200" oninput="pendParam('L',this.value)" style="flex:1">
+            </div>
+            <div class="proj-slider-row" style="margin-bottom:8px">
+              <label style="font-size:.78rem;color:#ccc;width:55px">g = <span id="pend-g-val" style="color:#FFD166;font-weight:700">9.81</span></label>
+              <input type="range" id="sl-pend-g" min="1" max="25" step="0.1" value="9.81" oninput="pendParam('g',this.value)" style="flex:1">
+            </div>
+            <div class="proj-slider-row" style="margin-bottom:8px">
+              <label style="font-size:.78rem;color:#ccc;width:70px">Затух. <span id="pend-damp-val" style="color:#EF476F;font-weight:700">0</span></label>
+              <input type="range" id="sl-pend-damp" min="0" max="2" step="0.05" value="0" oninput="pendParam('damping',this.value)" style="flex:1">
+            </div>
+            <div style="margin-top:8px"></div>
+            <div class="gp-section-title" style="margin-bottom:6px">Пресеты</div>
+            <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px">
+              <button class="preset-btn" onclick="pendPreset(45,200,9.81,0)">Земля</button>
+              <button class="preset-btn" onclick="pendPreset(45,200,1.62,0)">Луна</button>
+              <button class="preset-btn" onclick="pendPreset(170,200,9.81,0)">Большой θ</button>
+              <button class="preset-btn" onclick="pendPreset(45,200,9.81,0.5)">Затухание</button>
+            </div>
+            <div class="pp-hint">Тащи грузик мышью для установки угла</div>
+          </div>
+          <div class="proj-canvas-outer">
+            <canvas id="pendulum-canvas"></canvas>
+          </div>
+        </div>
+        <div class="proj-stats-bar" id="pendbar">
+          <div class="pstat"><div class="pstat-label">Угол</div><div class="pstat-val" id="pendbar-v1" style="color:#9B5DE5">45°</div></div>
+          <div class="pstat"><div class="pstat-label">ω</div><div class="pstat-val" id="pendbar-v2" style="color:#06D6E0">0</div></div>
+          <div class="pstat"><div class="pstat-label">Период T</div><div class="pstat-val" id="pendbar-v3" style="color:#FFD166">—</div></div>
+          <div class="pstat"><div class="pstat-label">Энергия</div><div class="pstat-val" id="pendbar-v4" style="color:#EF476F">—</div></div>
+        </div>
+      </div>
+
+      <!-- ── EQUILIBRIUM sim body ── -->
+      <div id="sim-equilibrium" class="sim-proj-wrap" style="display:none">
+        <div class="sim-body-wrap">
+          <div class="proj-panel" style="width:220px;gap:0">
+            <div class="gp-section-title" style="margin-bottom:8px">Параметры</div>
+            <div class="proj-slider-row" style="margin-bottom:8px">
+              <label style="font-size:.78rem;color:#ccc;width:55px">T = <span id="eq-T-val" style="color:#FFD166;font-weight:700">300</span> K</label>
+              <input type="range" id="sl-eq-T" min="200" max="500" step="10" value="300" oninput="eqParam('T',this.value)" style="flex:1">
+            </div>
+            <div class="proj-slider-row" style="margin-bottom:8px">
+              <label style="font-size:.78rem;color:#ccc;width:55px">Ea<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> <span id="eq-Eaf-val" style="color:#7BF5A4;font-weight:700">50</span></label>
+              <input type="range" id="sl-eq-Eaf" min="20" max="80" step="1" value="50" oninput="eqParam('Ea_f',this.value)" style="flex:1">
+            </div>
+            <div class="proj-slider-row" style="margin-bottom:8px">
+              <label style="font-size:.78rem;color:#ccc;width:55px">Ea<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> <span id="eq-Ear-val" style="color:#EF476F;font-weight:700">55</span></label>
+              <input type="range" id="sl-eq-Ear" min="20" max="80" step="1" value="55" oninput="eqParam('Ea_r',this.value)" style="flex:1">
+            </div>
+            <div style="margin-top:8px"></div>
+            <div class="gp-section-title" style="margin-bottom:6px">Пресеты</div>
+            <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px">
+              <button class="preset-btn" onclick="eqPreset('default')">По умолч.</button>
+              <button class="preset-btn" onclick="eqPreset('exothermic')">Экзо</button>
+              <button class="preset-btn" onclick="eqPreset('endothermic')">Эндо</button>
+              <button class="preset-btn" onclick="eqPreset('excess_A')">Избыток A</button>
+            </div>
+            <div class="pp-hint">A + B ⇌ C + D — принцип Ле Шателье</div>
+          </div>
+          <div class="proj-canvas-outer">
+            <canvas id="equilibrium-canvas"></canvas>
+          </div>
+        </div>
+        <div class="proj-stats-bar" id="eqbar">
+          <div class="pstat"><div class="pstat-label">Keq</div><div class="pstat-val" id="eqbar-v1" style="color:#7BF5A4">—</div></div>
+          <div class="pstat"><div class="pstat-label">Q</div><div class="pstat-val" id="eqbar-v2" style="color:#FFD166">—</div></div>
+          <div class="pstat"><div class="pstat-label">Направление</div><div class="pstat-val" id="eqbar-v3" style="color:#06D6E0">⇌</div></div>
+          <div class="pstat"><div class="pstat-label">A|B|C|D</div><div class="pstat-val" id="eqbar-v4" style="color:#9B5DE5">—</div></div>
+        </div>
+      </div>
+
+      <!-- ── THIN LENS sim body ── -->
+      <div id="sim-thinlens" class="sim-proj-wrap" style="display:none">
+        <div class="sim-body-wrap">
+          <div class="proj-panel" style="width:220px;gap:0">
+            <div class="gp-section-title" style="margin-bottom:8px">Параметры</div>
+            <div class="proj-slider-row" style="margin-bottom:8px">
+              <label style="font-size:.78rem;color:#ccc;width:55px">f = <span id="lens-f-val" style="color:#06D6E0;font-weight:700">100</span></label>
+              <input type="range" id="sl-lens-f" min="-200" max="200" step="5" value="100" oninput="lensParam('f',this.value)" style="flex:1">
+            </div>
+            <div class="proj-slider-row" style="margin-bottom:8px">
+              <label style="font-size:.78rem;color:#ccc;width:55px">d = <span id="lens-d-val" style="color:#9B5DE5;font-weight:700">200</span></label>
+              <input type="range" id="sl-lens-d" min="30" max="400" step="5" value="200" oninput="lensParam('d',this.value)" style="flex:1">
+            </div>
+            <div class="proj-slider-row" style="margin-bottom:8px">
+              <label style="font-size:.78rem;color:#ccc;width:55px">h = <span id="lens-h-val" style="color:#EF476F;font-weight:700">50</span></label>
+              <input type="range" id="sl-lens-h" min="20" max="80" step="2" value="50" oninput="lensParam('h',this.value)" style="flex:1">
+            </div>
+            <div style="margin-top:8px"></div>
+            <div class="gp-section-title" style="margin-bottom:6px">Пресеты</div>
+            <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px">
+              <button class="preset-btn" onclick="lensPreset(100,200,50)">Собирающая</button>
+              <button class="preset-btn" onclick="lensPreset(-100,200,50)">Рассеивающая</button>
+              <button class="preset-btn" onclick="lensPreset(100,100,50)">d = f</button>
+              <button class="preset-btn" onclick="lensPreset(100,60,50)">d &lt; f</button>
+            </div>
+            <div class="pp-hint">Тащи стрелку-предмет или фокус мышью</div>
+          </div>
+          <div class="proj-canvas-outer">
+            <canvas id="thinlens-canvas"></canvas>
+          </div>
+        </div>
+        <div class="proj-stats-bar" id="lensbar">
+          <div class="pstat"><div class="pstat-label">f</div><div class="pstat-val" id="lensbar-v1" style="color:#06D6E0">100</div></div>
+          <div class="pstat"><div class="pstat-label">d'</div><div class="pstat-val" id="lensbar-v2" style="color:#EF476F">—</div></div>
+          <div class="pstat"><div class="pstat-label">M</div><div class="pstat-val" id="lensbar-v3" style="color:#FFD166">—</div></div>
+          <div class="pstat"><div class="pstat-label">Тип</div><div class="pstat-val" id="lensbar-v4" style="color:#9B5DE5">—</div></div>
+        </div>
+      </div>
+
+      <!-- ── MIRRORS sim body ── -->
+      <div id="sim-mirrors" class="sim-proj-wrap" style="display:none">
+        <div class="sim-body-wrap">
+          <div class="proj-panel" style="width:264px;gap:0">
+            <div class="gp-section-title" style="margin-bottom:8px">Тип зеркала</div>
+            <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px">
+              <button class="preset-btn mirror-type-btn" id="mtype-flat"    onclick="mirrorType('flat',this)"    style="font-size:.72rem">Плоское</button>
+              <button class="preset-btn mirror-type-btn active" id="mtype-concave" onclick="mirrorType('concave',this)" style="font-size:.72rem">Вогнутое</button>
+              <button class="preset-btn mirror-type-btn" id="mtype-convex"  onclick="mirrorType('convex',this)"  style="font-size:.72rem">Выпуклое</button>
+            </div>
+            <div class="gp-section-title" style="margin-bottom:8px">Параметры</div>
+            <div class="proj-slider-row" style="margin-bottom:8px" id="mirror-f-row">
+              <label style="font-size:.78rem;color:#ccc;width:60px">f = <span id="mirror-f-val" style="color:#06D6E0;font-weight:700">120</span></label>
+              <input type="range" id="sl-mirror-f" min="30" max="300" step="5" value="120" oninput="mirrorParam('f',this.value)" style="flex:1">
+            </div>
+            <div class="proj-slider-row" style="margin-bottom:8px">
+              <label style="font-size:.78rem;color:#ccc;width:60px">d = <span id="mirror-d-val" style="color:#9B5DE5;font-weight:700">240</span></label>
+              <input type="range" id="sl-mirror-d" min="30" max="500" step="5" value="240" oninput="mirrorParam('d',this.value)" style="flex:1">
+            </div>
+            <div class="proj-slider-row" style="margin-bottom:8px">
+              <label style="font-size:.78rem;color:#ccc;width:60px">h = <span id="mirror-h-val" style="color:#EF476F;font-weight:700">60</span></label>
+              <input type="range" id="sl-mirror-h" min="20" max="80" step="2" value="60" oninput="mirrorParam('h',this.value)" style="flex:1">
+            </div>
+            <div style="display:flex;gap:6px;margin-top:8px;margin-bottom:8px;align-items:center">
+              <button id="mirror-play-btn" onclick="mirrorTogglePlay(this)" style="flex:1;padding:6px 0;border-radius:8px;border:none;background:linear-gradient(135deg,#06D6E0,#9B5DE5);color:#fff;font-size:.78rem;font-weight:700;cursor:pointer">▶ Анимация</button>
+              <div style="display:flex;flex-direction:column;align-items:center;gap:2px">
+                <span style="font-size:.62rem;color:#888">скорость</span>
+                <select id="mirror-speed-sel" onchange="mirrorSetSpeed(this.value)" style="background:#1a1a2e;color:#ccc;border:1px solid #333;border-radius:4px;font-size:.7rem;padding:2px 4px">
+                  <option value="0.25">×¼</option><option value="0.5">×½</option>
+                  <option value="1" selected>×1</option><option value="2">×2</option>
+                </select>
+              </div>
+            </div>
+            <div style="display:flex;gap:4px;margin-bottom:10px">
+              <button onclick="mirrorStepNext()" style="flex:1;padding:5px 0;border-radius:6px;border:1px solid #333;background:#1a1a2e;color:#7BF5A4;font-size:.73rem;cursor:pointer" title="Показать следующий луч">① Пошагово</button>
+              <button onclick="mirrorStepReset()" style="padding:5px 9px;border-radius:6px;border:1px solid #333;background:#1a1a2e;color:#888;font-size:.78rem;cursor:pointer" title="Показать все лучи">↺</button>
+            </div>
+            <div class="gp-section-title" style="margin-bottom:6px">Отображение</div>
+            <div style="display:grid;grid-template-columns:1fr 1fr;gap:3px 10px;margin-bottom:10px">
+              <label style="display:flex;align-items:center;gap:4px;font-size:.72rem;color:#ccc;cursor:pointer"><input type="checkbox" id="mtog-normals" checked onchange="mirrorToggle('normals',this.checked)"> Нормали</label>
+              <label style="display:flex;align-items:center;gap:4px;font-size:.72rem;color:#ccc;cursor:pointer"><input type="checkbox" id="mtog-dims" checked onchange="mirrorToggle('dims',this.checked)"> Размеры</label>
+              <label style="display:flex;align-items:center;gap:4px;font-size:.72rem;color:#ccc;cursor:pointer"><input type="checkbox" id="mtog-angles" checked onchange="mirrorToggle('angles',this.checked)"> Углы θ</label>
+              <label style="display:flex;align-items:center;gap:4px;font-size:.72rem;color:#ccc;cursor:pointer"><input type="checkbox" id="mtog-photons" checked onchange="mirrorToggle('photons',this.checked)"> Фотоны</label>
+              <label style="display:flex;align-items:center;gap:4px;font-size:.72rem;color:#ccc;cursor:pointer"><input type="checkbox" id="mtog-grid" onchange="mirrorToggle('grid',this.checked)"> Сетка</label>
+              <label style="display:flex;align-items:center;gap:4px;font-size:.72rem;color:#ccc;cursor:pointer"><input type="checkbox" id="mtog-zones" checked onchange="mirrorToggle('zones',this.checked)"> Зоны</label>
+              <label style="display:flex;align-items:center;gap:4px;font-size:.72rem;color:#ccc;cursor:pointer;grid-column:span 2"><input type="checkbox" id="mtog-point" onchange="mirrorSetPointMode(this.checked)"> Точечный объект</label>
+            </div>
+            <button onclick="if(mirrorSim)mirrorSim.exportPng()" style="width:100%;padding:5px 0;border-radius:6px;border:1px solid #333;background:#1a1a2e;color:#888;font-size:.72rem;cursor:pointer;margin-bottom:8px">📷 Экспорт PNG</button>
+            <div class="gp-section-title" style="margin-bottom:6px">Пресеты</div>
+            <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px">
+              <button class="preset-btn" onclick="mirrorPreset('flat')">Плоское</button>
+              <button class="preset-btn" onclick="mirrorPreset('far')">d &gt; 2f</button>
+              <button class="preset-btn" onclick="mirrorPreset('2f')">d = 2f</button>
+              <button class="preset-btn" onclick="mirrorPreset('between')">f &lt; d &lt; 2f</button>
+              <button class="preset-btn" onclick="mirrorPreset('near')">d &lt; f</button>
+              <button class="preset-btn" onclick="mirrorPreset('convex')">Выпуклое</button>
+            </div>
+            <div class="pp-hint">Тащи предмет, фокус или изображение мышью</div>
+          </div>
+          <div class="proj-canvas-outer">
+            <canvas id="mirror-canvas"></canvas>
+          </div>
+        </div>
+        <div class="proj-stats-bar" id="mirrorbar">
+          <div class="pstat"><div class="pstat-label">f</div><div class="pstat-val" id="mirrorbar-v1" style="color:#06D6E0">120</div></div>
+          <div class="pstat"><div class="pstat-label">d</div><div class="pstat-val" id="mirrorbar-v5" style="color:#9B5DE5">240</div></div>
+          <div class="pstat"><div class="pstat-label">d'</div><div class="pstat-val" id="mirrorbar-v2" style="color:#EF476F">—</div></div>
+          <div class="pstat"><div class="pstat-label">M</div><div class="pstat-val" id="mirrorbar-v3" style="color:#FFD166">—</div></div>
+          <div class="pstat"><div class="pstat-label">Тип изобр.</div><div class="pstat-val" id="mirrorbar-v4" style="color:#9B5DE5">—</div></div>
+        </div>
+      </div>
+
+      <!-- ── ISOPROCESS sim body ── -->
+      <div id="sim-isoprocess" class="sim-proj-wrap" style="display:none">
+        <div class="sim-body-wrap">
+          <div class="proj-panel" style="width:220px;gap:0">
+            <div class="gp-section-title" style="margin-bottom:8px">Процесс</div>
+            <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px">
+              <button class="preset-btn iso-proc-btn active" id="iproc-isothermal" onclick="isoProc('isothermal',this)" style="font-size:.72rem">Изотерма</button>
+              <button class="preset-btn iso-proc-btn" id="iproc-isochoric"  onclick="isoProc('isochoric',this)"  style="font-size:.72rem">Изохора</button>
+              <button class="preset-btn iso-proc-btn" id="iproc-isobaric"   onclick="isoProc('isobaric',this)"   style="font-size:.72rem">Изобара</button>
+              <button class="preset-btn iso-proc-btn" id="iproc-adiabatic"  onclick="isoProc('adiabatic',this)"  style="font-size:.72rem">Адиабата</button>
+            </div>
+            <div class="gp-section-title" style="margin-bottom:6px">Газ γ</div>
+            <div style="display:flex;gap:4px;margin-bottom:10px">
+              <button class="preset-btn iso-gamma-btn" id="igamma-14" onclick="isoGamma(1.4,this)" style="font-size:.72rem">Двухат. 1.4</button>
+              <button class="preset-btn iso-gamma-btn active" id="igamma-167" onclick="isoGamma(1.667,this)" style="font-size:.72rem">Одноат. 5/3</button>
+            </div>
+            <div class="gp-section-title" style="margin-bottom:8px">Начальное состояние</div>
+            <div class="proj-slider-row" style="margin-bottom:8px">
+              <label style="font-size:.78rem;color:#ccc;width:70px">P₁ = <span id="iso-p1-val" style="color:#9B5DE5;font-weight:700">3.0</span></label>
+              <input type="range" id="sl-iso-p1" min="0.5" max="8" step="0.1" value="3.0" oninput="isoParam('P1',this.value)" style="flex:1">
+            </div>
+            <div class="proj-slider-row" style="margin-bottom:8px">
+              <label style="font-size:.78rem;color:#ccc;width:70px">V₁ = <span id="iso-v1-val" style="color:#9B5DE5;font-weight:700">10</span></label>
+              <input type="range" id="sl-iso-v1" min="2" max="28" step="1" value="10" oninput="isoParam('V1',this.value)" style="flex:1">
+            </div>
+            <div class="gp-section-title" style="margin-bottom:8px">Конечное состояние</div>
+            <div class="proj-slider-row" style="margin-bottom:8px">
+              <label style="font-size:.78rem;color:#ccc;width:70px;white-space:nowrap">Сжат./расш.</label>
+              <input type="range" id="sl-iso-ratio" min="0.01" max="0.99" step="0.01" value="0.5" oninput="isoRatio(this.value)" style="flex:1">
+            </div>
+            <div style="margin-top:6px"></div>
+            <div class="gp-section-title" style="margin-bottom:6px">Пресеты</div>
+            <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px">
+              <button class="preset-btn" onclick="isoPreset('iso_expand')">Изотерма расш.</button>
+              <button class="preset-btn" onclick="isoPreset('iso_comp')">Изотерма сжат.</button>
+              <button class="preset-btn" onclick="isoPreset('heat_iso')">Изохора нагрев</button>
+              <button class="preset-btn" onclick="isoPreset('adiab_exp')">Адиабата расш.</button>
+            </div>
+            <div class="pp-hint">Тащи точки 1 и 2 по диаграмме</div>
+          </div>
+          <div class="proj-canvas-outer">
+            <canvas id="isoprocess-canvas"></canvas>
+          </div>
+        </div>
+        <div class="proj-stats-bar" id="isobar">
+          <div class="pstat"><div class="pstat-label">T₁, K</div><div class="pstat-val" id="isobar-t1" style="color:#9B5DE5">—</div></div>
+          <div class="pstat"><div class="pstat-label">T₂, K</div><div class="pstat-val" id="isobar-t2" style="color:#06D6E0">—</div></div>
+          <div class="pstat"><div class="pstat-label">W, Дж</div><div class="pstat-val" id="isobar-w"  style="color:#7BF5A4">—</div></div>
+          <div class="pstat"><div class="pstat-label">Q, Дж</div><div class="pstat-val" id="isobar-q"  style="color:#FFD166">—</div></div>
+          <div class="pstat"><div class="pstat-label">ΔU, Дж</div><div class="pstat-val" id="isobar-du" style="color:#EF476F">—</div></div>
+        </div>
+      </div>
+
+      <!-- ── TITRATION sim body ── -->
+      <div id="sim-titration" class="sim-proj-wrap" style="display:none">
+        <div class="sim-body-wrap">
+          <div class="proj-panel" style="width:220px;gap:0">
+            <div class="gp-section-title" style="margin-bottom:8px">Параметры</div>
+            <div class="proj-slider-row" style="margin-bottom:8px">
+              <label style="font-size:.78rem;color:#ccc;width:75px">C(кисл) <span id="titr-ac-val" style="color:#EF476F;font-weight:700">0.10</span> М</label>
+              <input type="range" id="sl-titr-ac" min="0.05" max="1" step="0.05" value="0.1" oninput="titrParam('acidConc',this.value)" style="flex:1">
+            </div>
+            <div class="proj-slider-row" style="margin-bottom:8px">
+              <label style="font-size:.78rem;color:#ccc;width:75px">C(осн) <span id="titr-bc-val" style="color:#9B5DE5;font-weight:700">0.10</span> М</label>
+              <input type="range" id="sl-titr-bc" min="0.05" max="1" step="0.05" value="0.1" oninput="titrParam('baseConc',this.value)" style="flex:1">
+            </div>
+            <div class="proj-slider-row" style="margin-bottom:8px">
+              <label style="font-size:.78rem;color:#ccc;width:75px">V(кисл) <span id="titr-vol-val" style="color:#06D6E0;font-weight:700">50</span> мл</label>
+              <input type="range" id="sl-titr-vol" min="25" max="100" step="5" value="50" oninput="titrParam('acidVol',this.value)" style="flex:1">
+            </div>
+            <div style="margin-top:4px;margin-bottom:8px">
+              <div class="gp-section-title" style="margin-bottom:4px">Индикатор</div>
+              <div style="display:flex;flex-wrap:wrap;gap:4px">
+                <button class="preset-btn titr-ind-btn active" onclick="titrIndicator('phenolphthalein',this)" style="font-size:.72rem">Фенолф.</button>
+                <button class="preset-btn titr-ind-btn" onclick="titrIndicator('methyl_orange',this)" style="font-size:.72rem">Метилор.</button>
+                <button class="preset-btn titr-ind-btn" onclick="titrIndicator('litmus',this)" style="font-size:.72rem">Лакмус</button>
+              </div>
+            </div>
+            <div class="gp-section-title" style="margin-bottom:6px">Пресеты</div>
+            <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px">
+              <button class="preset-btn" onclick="titrPreset('strong_strong')">HCl+NaOH</button>
+              <button class="preset-btn" onclick="titrPreset('weak_strong')">CH₃COOH</button>
+              <button class="preset-btn" onclick="titrPreset('concentrated')">Конц.</button>
+            </div>
+            <div class="pp-hint">Нажми <svg class="ic" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg> — основание добавляется каплями</div>
+          </div>
+          <div class="proj-canvas-outer">
+            <canvas id="titration-canvas"></canvas>
+          </div>
+        </div>
+        <div class="proj-stats-bar" id="titrbar">
+          <div class="pstat"><div class="pstat-label">pH</div><div class="pstat-val" id="titrbar-v1" style="color:#EF476F">—</div></div>
+          <div class="pstat"><div class="pstat-label">Добавлено</div><div class="pstat-val" id="titrbar-v2" style="color:#9B5DE5">0.0 мл</div></div>
+          <div class="pstat"><div class="pstat-label">Точка экв.</div><div class="pstat-val" id="titrbar-v3" style="color:#06D6E0">—</div></div>
+          <div class="pstat"><div class="pstat-label">Тип</div><div class="pstat-val" id="titrbar-v4" style="color:#FFD166">—</div></div>
+        </div>
+      </div>
+
+      <!-- ── REFRACTION sim body ── -->
+      <div id="sim-refraction" class="sim-proj-wrap" style="display:none">
+        <div class="sim-body-wrap">
+          <div class="proj-panel" style="width:220px;gap:0">
+            <div class="gp-section-title" style="margin-bottom:8px">Параметры</div>
+            <div class="proj-slider-row" style="margin-bottom:8px">
+              <label style="font-size:.78rem;color:#ccc;width:55px">n₁ = <span id="refr-n1-val" style="color:#9B5DE5;font-weight:700">1.00</span></label>
+              <input type="range" id="sl-refr-n1" min="1" max="2.5" step="0.01" value="1" oninput="refrParam('n1',this.value)" style="flex:1">
+            </div>
+            <div class="proj-slider-row" style="margin-bottom:8px">
+              <label style="font-size:.78rem;color:#ccc;width:55px">n₂ = <span id="refr-n2-val" style="color:#06D6E0;font-weight:700">1.50</span></label>
+              <input type="range" id="sl-refr-n2" min="1" max="2.5" step="0.01" value="1.5" oninput="refrParam('n2',this.value)" style="flex:1">
+            </div>
+            <div class="proj-slider-row" style="margin-bottom:8px">
+              <label style="font-size:.78rem;color:#ccc;width:55px">θ = <span id="refr-angle-val" style="color:#FFD166;font-weight:700">30</span>°</label>
+              <input type="range" id="sl-refr-angle" min="0" max="89" step="1" value="30" oninput="refrParam('angle',this.value)" style="flex:1">
+            </div>
+            <div style="margin-top:8px"></div>
+            <div class="gp-section-title" style="margin-bottom:6px">Пресеты</div>
+            <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px">
+              <button class="preset-btn" onclick="refrPreset(1,1.5,30)">Воздух<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>Стекло</button>
+              <button class="preset-btn" onclick="refrPreset(1.5,1,30)">Стекло<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>Воздух</button>
+              <button class="preset-btn" onclick="refrPreset(1.33,1.5,30)">Вода<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>Стекло</button>
+              <button class="preset-btn" onclick="refrPreset(1,2.42,45)">Алмаз</button>
+            </div>
+            <div class="pp-hint">Тащи луч мышью для изменения угла</div>
+          </div>
+          <div class="proj-canvas-outer">
+            <canvas id="refraction-canvas"></canvas>
+          </div>
+        </div>
+        <div class="proj-stats-bar" id="refrbar">
+          <div class="pstat"><div class="pstat-label">θ₁</div><div class="pstat-val" id="refrbar-v1" style="color:#9B5DE5">30°</div></div>
+          <div class="pstat"><div class="pstat-label">θ₂</div><div class="pstat-val" id="refrbar-v2" style="color:#06D6E0">—</div></div>
+          <div class="pstat"><div class="pstat-label">Крит. угол</div><div class="pstat-val" id="refrbar-v3" style="color:#FFD166">—</div></div>
+          <div class="pstat"><div class="pstat-label">ПВО</div><div class="pstat-val" id="refrbar-v4" style="color:#EF476F">Нет</div></div>
+        </div>
+      </div>
+
+      <!-- ── PROBABILITY sim body ── -->
+      <div id="sim-probability" class="sim-proj-wrap" style="display:none">
+        <div class="sim-body-wrap">
+          <div class="proj-panel" style="width:220px;gap:0">
+            <div class="gp-section-title" style="margin-bottom:8px">Режим</div>
+            <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px">
+              <button class="preset-btn prob-mode-btn active" onclick="probMode('coin',this)">Монета</button>
+              <button class="preset-btn prob-mode-btn" onclick="probMode('dice',this)">Кубик</button>
+              <button class="preset-btn prob-mode-btn" onclick="probMode('dice2',this)">2 кубика</button>
+            </div>
+            <div class="gp-section-title" style="margin-bottom:6px">Пресеты</div>
+            <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px">
+              <button class="preset-btn" onclick="probPreset('coin',100)">100 бросков</button>
+              <button class="preset-btn" onclick="probPreset('coin',1000)">1000</button>
+              <button class="preset-btn" onclick="probPreset('dice',100)">Кубик ×100</button>
+              <button class="preset-btn" onclick="probPreset('dice2',500)">2 куб. ×500</button>
+            </div>
+            <div class="pp-hint">Нажми <svg class="ic" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg> — броски идут автоматически</div>
+          </div>
+          <div class="proj-canvas-outer">
+            <canvas id="probability-canvas"></canvas>
+          </div>
+        </div>
+        <div class="proj-stats-bar" id="probbar">
+          <div class="pstat"><div class="pstat-label">Бросков</div><div class="pstat-val" id="probbar-v1" style="color:#9B5DE5">0</div></div>
+          <div class="pstat"><div class="pstat-label">Макс. отклон.</div><div class="pstat-val" id="probbar-v2" style="color:#EF476F">—</div></div>
+          <div class="pstat"><div class="pstat-label">χ²</div><div class="pstat-val" id="probbar-v3" style="color:#06D6E0">—</div></div>
+          <div class="pstat"><div class="pstat-label">Режим</div><div class="pstat-val" id="probbar-v4" style="color:#FFD166">Монета</div></div>
+        </div>
+      </div>
+
+      <!-- ── BOHR ATOM sim body ── -->
+      <div id="sim-bohratom" class="sim-proj-wrap" style="display:none">
+        <div class="sim-body-wrap">
+          <div class="proj-panel" style="width:220px;gap:0">
+            <div class="gp-section-title" style="margin-bottom:8px">Уровень</div>
+            <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px">
+              <button class="preset-btn" onclick="bohrLevel(1)">n=1</button>
+              <button class="preset-btn" onclick="bohrLevel(2)">n=2</button>
+              <button class="preset-btn" onclick="bohrLevel(3)">n=3</button>
+              <button class="preset-btn" onclick="bohrLevel(4)">n=4</button>
+              <button class="preset-btn" onclick="bohrLevel(5)">n=5</button>
+              <button class="preset-btn" onclick="bohrLevel(6)">n=6</button>
+            </div>
+            <div class="gp-section-title" style="margin-bottom:6px">Переходы</div>
+            <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px">
+              <button class="preset-btn" onclick="bohrTransition(2,1)">2<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>1 (УФ)</button>
+              <button class="preset-btn" onclick="bohrTransition(3,2)">3<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>2 (красн.)</button>
+              <button class="preset-btn" onclick="bohrTransition(4,2)">4<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>2 (голуб.)</button>
+              <button class="preset-btn" onclick="bohrTransition(4,3)">4<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>3 (ИК)</button>
+              <button class="preset-btn" onclick="bohrTransition(1,3)">1<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>3 (поглощ.)</button>
+            </div>
+            <div class="pp-hint">Кликни на уровень для перехода электрона</div>
+          </div>
+          <div class="proj-canvas-outer">
+            <canvas id="bohratom-canvas"></canvas>
+          </div>
+        </div>
+        <div class="proj-stats-bar" id="bohrbar">
+          <div class="pstat"><div class="pstat-label">Уровень n</div><div class="pstat-val" id="bohrbar-v1" style="color:#9B5DE5">1</div></div>
+          <div class="pstat"><div class="pstat-label">E (эВ)</div><div class="pstat-val" id="bohrbar-v2" style="color:#06D6E0">-13.6</div></div>
+          <div class="pstat"><div class="pstat-label">λ (нм)</div><div class="pstat-val" id="bohrbar-v3" style="color:#FFD166">—</div></div>
+          <div class="pstat"><div class="pstat-label">Серия</div><div class="pstat-val" id="bohrbar-v4" style="color:#EF476F">—</div></div>
+        </div>
+      </div>
+
+      <!-- ── ELECTROLYSIS sim body ── -->
+      <div id="sim-electrolysis" class="sim-proj-wrap" style="display:none">
+        <div class="sim-body-wrap">
+          <div class="proj-panel" style="width:220px;gap:0">
+            <div class="gp-section-title" style="margin-bottom:8px">Параметры</div>
+            <div class="proj-slider-row" style="margin-bottom:8px">
+              <label style="font-size:.78rem;color:#ccc;width:55px">U = <span id="elec-V-val" style="color:#FFD166;font-weight:700">6</span> В</label>
+              <input type="range" id="sl-elec-V" min="1" max="12" step="0.5" value="6" oninput="elecParam('voltage',this.value)" style="flex:1">
+            </div>
+            <div style="margin-top:4px;margin-bottom:8px">
+              <div class="gp-section-title" style="margin-bottom:4px">Электролит</div>
+              <div style="display:flex;flex-wrap:wrap;gap:4px">
+                <button class="preset-btn elec-type-btn active" onclick="elecPreset('nacl',this)">NaCl</button>
+                <button class="preset-btn elec-type-btn" onclick="elecPreset('cuso4',this)">CuSO₄</button>
+                <button class="preset-btn elec-type-btn" onclick="elecPreset('h2so4',this)">H₂SO₄</button>
+              </div>
+            </div>
+            <div class="pp-hint">Ионы движутся к электродам, на электродах — газ и осадок</div>
+          </div>
+          <div class="proj-canvas-outer">
+            <canvas id="electrolysis-canvas"></canvas>
+          </div>
+        </div>
+        <div class="proj-stats-bar" id="elecbar">
+          <div class="pstat"><div class="pstat-label">I (А)</div><div class="pstat-val" id="elecbar-v1" style="color:#FFD166">—</div></div>
+          <div class="pstat"><div class="pstat-label">Масса</div><div class="pstat-val" id="elecbar-v2" style="color:#9B5DE5">—</div></div>
+          <div class="pstat"><div class="pstat-label">Газ (мл)</div><div class="pstat-val" id="elecbar-v3" style="color:#06D6E0">—</div></div>
+          <div class="pstat"><div class="pstat-label">Время</div><div class="pstat-val" id="elecbar-v4" style="color:#EF476F">0 с</div></div>
+        </div>
+      </div>
+
+      <!-- ── WAVES sim body ── -->
+      <div id="sim-waves" class="sim-proj-wrap" style="display:none">
+        <div class="sim-body-wrap">
+          <div class="proj-panel" style="width:228px;gap:0;overflow-y:auto">
+
+            <!-- Mode selector -->
+            <div class="gp-section-title" style="margin-bottom:6px">Режим</div>
+            <div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:12px">
+              <button class="wave-mode-btn active" onclick="wavesMode('transverse',this)">Поперечная</button>
+              <button class="wave-mode-btn" onclick="wavesMode('longitudinal',this)">Продольная</button>
+              <button class="wave-mode-btn" onclick="wavesMode('superposition',this)">Суперпозиция</button>
+              <button class="wave-mode-btn" onclick="wavesMode('standing',this)">Стоячая</button>
+            </div>
+
+            <!-- Wave 1 -->
+            <div class="gp-section-title" style="margin-bottom:6px">Волна 1</div>
+            <div class="param-block">
+              <div class="param-header">
+                <span class="param-name">Амплитуда A₁</span>
+                <span class="param-val" id="waves-A1-val" style="color:#9B5DE5">50</span>
+              </div>
+              <input type="range" id="sl-waves-A1" class="param-slider" min="10" max="90" step="2" value="50" oninput="wavesParam('A1',this.value)">
+            </div>
+            <div class="param-block">
+              <div class="param-header">
+                <span class="param-name">Частота f₁</span>
+                <span class="param-val" id="waves-f1-val" style="color:#9B5DE5">1.0 Гц</span>
+              </div>
+              <input type="range" id="sl-waves-f1" class="param-slider" min="0.3" max="4" step="0.1" value="1.0" oninput="wavesParam('f1',this.value)">
+            </div>
+            <div class="param-block">
+              <div class="param-header">
+                <span class="param-name">Фаза φ₁</span>
+                <span class="param-val" id="waves-phi1-val" style="color:#9B5DE5">0</span>
+              </div>
+              <input type="range" id="sl-waves-phi1" class="param-slider" min="0" max="6.28" step="0.1" value="0" oninput="wavesParam('phi1',this.value)">
+            </div>
+
+            <!-- Wave 2 (superposition only) -->
+            <div id="waves-w2-section" style="display:none">
+              <div class="gp-section-title" style="margin-top:4px;margin-bottom:6px">Волна 2</div>
+              <div class="param-block">
+                <div class="param-header">
+                  <span class="param-name">Амплитуда A₂</span>
+                  <span class="param-val" id="waves-A2-val" style="color:#06D6E0">40</span>
+                </div>
+                <input type="range" id="sl-waves-A2" class="param-slider" min="10" max="90" step="2" value="40" oninput="wavesParam('A2',this.value)">
+              </div>
+              <div class="param-block">
+                <div class="param-header">
+                  <span class="param-name">Частота f₂</span>
+                  <span class="param-val" id="waves-f2-val" style="color:#06D6E0">1.5 Гц</span>
+                </div>
+                <input type="range" id="sl-waves-f2" class="param-slider" min="0.3" max="4" step="0.1" value="1.5" oninput="wavesParam('f2',this.value)">
+              </div>
+              <div class="param-block">
+                <div class="param-header">
+                  <span class="param-name">Фаза φ₂</span>
+                  <span class="param-val" id="waves-phi2-val" style="color:#06D6E0">0</span>
+                </div>
+                <input type="range" id="sl-waves-phi2" class="param-slider" min="0" max="6.28" step="0.1" value="0" oninput="wavesParam('phi2',this.value)">
+              </div>
+              <div class="pp-hint" style="margin-bottom:8px">φ₂=0: конструктивная · φ₂=π: деструктивная интерференция</div>
+            </div>
+
+            <!-- Standing wave harmonics -->
+            <div id="waves-n-section" style="display:none">
+              <div class="gp-section-title" style="margin-top:4px;margin-bottom:6px">Гармоника n</div>
+              <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px">
+                <button class="preset-btn wave-n-btn active" onclick="wavesN(1,this)">n=1</button>
+                <button class="preset-btn wave-n-btn" onclick="wavesN(2,this)">n=2</button>
+                <button class="preset-btn wave-n-btn" onclick="wavesN(3,this)">n=3</button>
+                <button class="preset-btn wave-n-btn" onclick="wavesN(4,this)">n=4</button>
+                <button class="preset-btn wave-n-btn" onclick="wavesN(5,this)">n=5</button>
+              </div>
+            </div>
+
+            <!-- Presets -->
+            <div class="gp-section-title" style="margin-top:4px;margin-bottom:6px">Пресеты</div>
+            <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px">
+              <button class="preset-btn" onclick="wavesPreset('constructive')">Конструктивная</button>
+              <button class="preset-btn" onclick="wavesPreset('destructive')">Деструктивная</button>
+              <button class="preset-btn" onclick="wavesPreset('beats')">Биения</button>
+            </div>
+
+            <!-- Speed -->
+            <div class="param-block" style="margin-top:4px">
+              <div class="param-header">
+                <span class="param-name">Скорость анимации</span>
+                <span class="param-val" id="waves-speed-val" style="color:#FFD166">×2.0</span>
+              </div>
+              <input type="range" id="sl-waves-speed" class="param-slider" min="0.3" max="5" step="0.1" value="2.0" oninput="wavesParam('speed',this.value)" style="accent-color:#FFD166">
+            </div>
+
+            <div class="pp-hint" style="margin-top:10px">v = λ·f — основное волновое уравнение</div>
+          </div>
+          <div class="proj-canvas-outer">
+            <canvas id="waves-canvas"></canvas>
+          </div>
+        </div>
+        <div class="proj-stats-bar" id="wavesbar">
+          <div class="pstat"><div class="pstat-label">T (с)</div><div class="pstat-val" id="wavesbar-T" style="color:#9B5DE5">—</div></div>
+          <div class="pstat"><div class="pstat-label">λ (px)</div><div class="pstat-val" id="wavesbar-lam" style="color:#06D6E0">—</div></div>
+          <div class="pstat"><div class="pstat-label">v (px/с)</div><div class="pstat-val" id="wavesbar-v" style="color:#FFD166">—</div></div>
+          <div class="pstat"><div class="pstat-label">f (Гц)</div><div class="pstat-val" id="wavesbar-f" style="color:#F15BB5">—</div></div>
+        </div>
+      </div>
+
+      <!-- ── STEREO sim body ── -->
+      <div id="sim-stereo" class="sim-body-wrap" style="display:none">
+        <div class="graph-panel" style="overflow-y:auto;max-height:100%">
+
+          <div class="gp-section-title">Фигура</div>
+          <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px">
+            <button class="gp-btn stereo-fig-btn active" onclick="setStereoFigure('cube',this)">Куб</button>
+            <button class="gp-btn stereo-fig-btn" onclick="setStereoFigure('parallelepiped',this)">Параллелепипед</button>
+            <button class="gp-btn stereo-fig-btn" onclick="setStereoFigure('pyramid',this)">Пирамида</button>
+            <button class="gp-btn stereo-fig-btn" onclick="setStereoFigure('tetrahedron',this)">Тетраэдр</button>
+            <button class="gp-btn stereo-fig-btn" onclick="setStereoFigure('cylinder',this)">Цилиндр</button>
+            <button class="gp-btn stereo-fig-btn" onclick="setStereoFigure('cone',this)">Конус</button>
+            <button class="gp-btn stereo-fig-btn" onclick="setStereoFigure('trunccone',this)">Усечённый конус</button>
+            <button class="gp-btn stereo-fig-btn" onclick="setStereoFigure('sphere',this)">Сфера</button>
+            <button class="gp-btn stereo-fig-btn" onclick="setStereoFigure('prism',this)">Призма</button>
+          </div>
+
+          <div class="gp-section-title">Параметры</div>
+          <div id="stereo-params">
+            <div class="stereo-sl-row" id="sp-a-row">
+              <label>a <span id="sp-a-val">4</span></label>
+              <input type="range" id="sl-sp-a" min="1" max="10" step="0.5" value="4" oninput="stereoParamChange('a',this.value)">
+            </div>
+            <div class="stereo-sl-row" id="sp-b-row" style="display:none">
+              <label>b <span id="sp-b-val">3</span></label>
+              <input type="range" id="sl-sp-b" min="1" max="10" step="0.5" value="3" oninput="stereoParamChange('b',this.value)">
+            </div>
+            <div class="stereo-sl-row" id="sp-c-row" style="display:none">
+              <label>c <span id="sp-c-val">5</span></label>
+              <input type="range" id="sl-sp-c" min="1" max="10" step="0.5" value="5" oninput="stereoParamChange('c',this.value)">
+            </div>
+            <div class="stereo-sl-row" id="sp-h-row" style="display:none">
+              <label>h <span id="sp-h-val">5</span></label>
+              <input type="range" id="sl-sp-h" min="1" max="12" step="0.5" value="5" oninput="stereoParamChange('h',this.value)">
+            </div>
+            <div class="stereo-sl-row" id="sp-r-row" style="display:none">
+              <label>r <span id="sp-r-val">2</span></label>
+              <input type="range" id="sl-sp-r" min="0.5" max="8" step="0.5" value="2" oninput="stereoParamChange('r',this.value)">
+            </div>
+            <div class="stereo-sl-row" id="sp-R-row" style="display:none">
+              <label>R <span id="sp-R-val">3</span></label>
+              <input type="range" id="sl-sp-R" min="0.5" max="8" step="0.5" value="3" oninput="stereoParamChange('R',this.value)">
+            </div>
+            <div class="stereo-sl-row" id="sp-n-row" style="display:none">
+              <label>n <span id="sp-n-val">4</span></label>
+              <input type="range" id="sl-sp-n" min="3" max="12" step="1" value="4" oninput="stereoParamChange('n',this.value)">
+            </div>
+          </div>
+
+          <div class="stereo-sl-row" style="margin-top:6px">
+            <label>Прозрачность <span id="sp-opacity-val">0.3</span></label>
+            <input type="range" id="sl-sp-opacity" min="0" max="1" step="0.05" value="0.3" oninput="stereoOpacityChange(this.value)">
+          </div>
+
+          <div class="gp-section-title" style="margin-top:10px">Отображение</div>
+          <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px">
+            <button class="gp-btn stereo-toggle active" data-layer="edges" onclick="stereoToggle('edges',this)">Рёбра</button>
+            <button class="gp-btn stereo-toggle active" data-layer="vertices" onclick="stereoToggle('vertices',this)">Вершины</button>
+            <button class="gp-btn stereo-toggle active" data-layer="labels" onclick="stereoToggle('labels',this)">Метки</button>
+            <button class="gp-btn stereo-toggle active" data-layer="axes" onclick="stereoToggle('axes',this)">Оси</button>
+            <button class="gp-btn stereo-toggle active" data-layer="grid" onclick="stereoToggle('grid',this)">Сетка</button>
+          </div>
+
+          <div class="gp-section-title" style="margin-top:8px">Сечение</div>
+          <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px">
+            <button class="gp-btn stereo-sect-btn" id="sect-toggle" onclick="stereoSectionToggle(this)">Показать</button>
+            <button class="gp-btn stereo-sect-type" data-type="horizontal" onclick="stereoSectionType('horizontal',this)">Горизонт.</button>
+            <button class="gp-btn stereo-sect-type" data-type="diagonal" onclick="stereoSectionType('diagonal',this)">Диагональ</button>
+            <button class="gp-btn stereo-sect-type" data-type="custom" onclick="stereoSectionType('custom',this)">По точкам</button>
+          </div>
+          <div class="stereo-sl-row">
+            <label>Высота <span id="sp-sect-val">50%</span></label>
+            <input type="range" id="sl-sp-sect" min="0" max="100" step="1" value="50" oninput="stereoSectionHeight(this.value)">
+          </div>
+          <div class="stereo-sl-row" id="sp-angle-row" style="display:none">
+            <label>Наклон <span id="sp-angle-val">50%</span></label>
+            <input type="range" id="sl-sp-angle" min="0" max="100" step="1" value="50" oninput="stereoSectionAngle(this.value)">
+          </div>
+          <div id="sect-area-display" style="font-size:0.7rem;color:#06D6E0;margin-top:2px;display:none"></div>
+          <div id="sphere-radius-info" style="font-size:0.7rem;color:#F59E0B;margin-top:2px;display:none"></div>
+
+          <div class="gp-section-title" style="margin-top:8px">Точки и линии</div>
+          <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px">
+            <button class="gp-btn" id="stereo-point-btn" onclick="stereoPointMode(this)">Поставить точку</button>
+            <button class="gp-btn" id="stereo-connect-btn" onclick="stereoConnectMode(this)">Соединить</button>
+            <button class="gp-btn" id="stereo-undo-pt-btn" onclick="stereoUndoPoint()">Отменить</button>
+            <button class="gp-btn" id="stereo-clear-pts-btn" onclick="stereoClearPoints()">Очистить</button>
+          </div>
+          <div id="points-info" style="font-size:0.68rem;color:rgba(255,255,255,0.5);margin-bottom:4px"></div>
+
+          <div class="gp-section-title" style="margin-top:8px">Элементы фигуры</div>
+          <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px">
+            <button class="gp-btn" id="stereo-height-btn" onclick="stereoToggleHeight(this)">Высота</button>
+            <button class="gp-btn" id="stereo-apothem-btn" onclick="stereoToggleApothem(this)">Апофема</button>
+            <button class="gp-btn" id="stereo-diag-btn" onclick="stereoToggleDiag(this)">Диагонали</button>
+            <button class="gp-btn" id="stereo-mid-btn" onclick="stereoToggleMid(this)">Середины</button>
+            <button class="gp-btn" id="stereo-inscribed-btn" onclick="stereoInscribed(this)">Вписанная</button>
+            <button class="gp-btn" id="stereo-circumscribed-btn" onclick="stereoCircumscribed(this)">Описанная</button>
+          </div>
+
+          <div class="gp-section-title" style="margin-top:8px">Инструменты</div>
+          <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px">
+            <button class="gp-btn" id="stereo-unfold-btn" onclick="stereoUnfold(this)">Развёртка</button>
+            <button class="gp-btn" id="stereo-measure-btn" onclick="stereoMeasure(this)">Измерение</button>
+          </div>
+
+          <div class="gp-section-title" style="margin-top:8px">Углы и расстояния</div>
+          <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px">
+            <button class="gp-btn" id="stereo-angle-edge-btn" onclick="stereoAngleMode('edge', this)">∠ рёбер</button>
+            <button class="gp-btn" id="stereo-angle-lp-btn" onclick="stereoAngleMode('linePlane', this)">∠ прям.–пл.</button>
+            <button class="gp-btn" id="stereo-angle-dih-btn" onclick="stereoAngleMode('dihedral', this)">∠ двугранный</button>
+            <button class="gp-btn" id="stereo-angle-pp-btn" onclick="stereoAngleMode('pointPlane', this)">d(т<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>пл)</button>
+            <button class="gp-btn" id="stereo-angle-clear-btn" onclick="stereoAngleClear()">Очистить</button>
+          </div>
+          <div id="angle-hint" style="font-size:0.65rem;color:rgba(255,255,255,0.4);margin-bottom:4px"></div>
+
+          <div class="gp-section-title" style="margin-top:10px">Формулы</div>
+          <div id="stereo-formulas" style="font-size:0.72rem;color:rgba(255,255,255,0.7);line-height:1.5"></div>
+
+          <div class="gp-section-title" style="margin-top:10px">Управление</div>
+          <div class="tp-text" style="font-size:0.72rem">
+            Вращение: зажмите и тяните<br>
+            Зум: колёсико мыши<br>
+            Точка: включите режим, кликните на ребро<br>
+            Соединить: кликните 2 точки/вершины<br>
+            По точкам: поставьте 3+ точки <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> сечение<br>
+            ∠ рёбер: 3 точки (A-B-C), угол в вершине B<br>
+            ∠ прям.–пл.: 2 точки (прямая), затем грань<br>
+            ∠ двугранный: 2 точки общего ребра<br>
+            d(т<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>пл): точка, затем грань — перпендикуляр<br>
+            Координаты: наведите на вершину
+          </div>
+        </div>
+        <div class="graph-canvas-outer">
+          <div class="graph-canvas-wrap" id="stereo-container"></div>
+        </div>
+      </div>
+
+      <!-- stats bar for stereo -->
+      <div class="proj-stats-bar" id="stereo-stats" style="display:none">
+        <div class="pstat"><div class="pstat-label">Объём</div><div class="pstat-val" id="stbar-vol">—</div></div>
+        <div class="pstat"><div class="pstat-label">Полная S</div><div class="pstat-val" id="stbar-area">—</div></div>
+        <div class="pstat"><div class="pstat-label">Бок. S</div><div class="pstat-val" id="stbar-side">—</div></div>
+        <div class="pstat"><div class="pstat-label">Высота</div><div class="pstat-val" id="stbar-h">—</div></div>
+        <div class="pstat"><div class="pstat-label">Диагональ</div><div class="pstat-val" id="stbar-d">—</div></div>
+      </div>
+
+      <!-- ── Theory panel (overlay right) ── -->
+      <div class="theory-panel" id="theory-panel">
+        <div class="theory-panel-inner" id="theory-content"></div>
+      </div>
+
+    </div><!-- /#lab-sim -->
+
+  </div><!-- /.sb-content -->
+</div><!-- /.app-layout -->
+
+<script src="/js/api.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/three@0.149.0/build/three.min.js"></script>
+<script src="/js/labs/graph.js"></script>
+<script src="/js/labs/magnetic.js"></script>
+<script src="/js/labs/triangle.js"></script>
+<script src="/js/labs/projectile.js"></script>
+<script src="/js/labs/collision.js"></script>
+<script src="/js/labs/gas.js"></script>
+<script src="/js/labs/states.js"></script>
+<script src="/js/labs/brownian.js"></script>
+<script src="/js/labs/diffusion.js"></script>
+<script src="/js/labs/coulomb.js"></script>
+<script src="/js/labs/circuit.js"></script>
+<script src="/js/labs/reactions.js"></script>
+<script src="/js/labs/flask.js"></script>
+<script src="/js/labs/redox.js"></script>
+<script src="/js/labs/ionexchange.js"></script>
+<script src="/js/labs/stereo.js?v=2"></script>
+<script src="/js/notifications.js"></script>
+<script src="/js/search.js"></script>
+<script src="/js/mobile.js"></script>
+<script>
+  const { user, isTeacher, isAdmin } = LS.initPage();
+  window._simQuizAllowed = true; // default; overridden after permission fetch for students
+  LS.showBoardIfAllowed();
+  if (isTeacher) {
+    document.getElementById('sbl-classes').style.display = '';
+    document.getElementById('sbl-admin').style.display   = '';
+  }
+
+  /* ════════════════════════════════
+     SIM CATALOGUE  (defined after P_* consts below)
+  ════════════════════════════════ */
+
+  let _catFilter = 'all';
+  let _disabledSimIds  = new Set();
+  let _simModuleDisabled = false;
+
+  function filterSims(cat, btn) {
+    _catFilter = cat;
+    document.querySelectorAll('.lab-filter').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    renderSims();
+  }
+
+  function renderSims() {
+    const base = _catFilter === 'all' ? SIMS : SIMS.filter(s => s.cat === _catFilter);
+    const list = base.filter(s => !s.id || !_disabledSimIds.has(s.id));
+    document.getElementById('sim-grid').innerHTML = list.map(s => `
+      <div class="sim-card ${s.id ? '' : 'soon'}" ${s.id ? `onclick="openSim('${s.id}')"` : ''}>
+        ${s.preview}
+        <div class="sim-body">
+          <div class="sim-cat ${s.cat}">${s.cat === 'math' ? '∑ Математика' : s.cat === 'chem' ? '<svg class="ic" viewBox="0 0 24 24"><path d="M9 3h6m-4.5 0v5.5l-4 7.5a1 1 0 0 0 .9 1.5h8.2a1 1 0 0 0 .9-1.5l-4-7.5V3"/></svg> Химия' : s.cat === 'bio' ? '<svg class="ic" viewBox="0 0 24 24"><path d="M2 15c6.667-6 13.333 0 20-6"/><path d="M9 22c1.798-2 2.518-4 2.807-6"/><path d="M15 2c-1.798 2-2.518 4-2.807 6"/><path d="m17 6-2.5-2.5M14 8 13 7M7 18l2.5 2.5M3.5 14.5l.5.5M20 9l.5.5M6.5 12.5l1 1M16.5 10.5l1 1M10 16l1.5 1.5"/></svg> Биология' : s.cat === 'game' ? '<svg class="ic" viewBox="0 0 24 24"><line x1="6" y1="12" x2="10" y2="12"/><line x1="8" y1="10" x2="8" y2="14"/><line x1="15" y1="13" x2="15.01" y2="13"/><line x1="18" y1="11" x2="18.01" y2="11"/><rect x="2" y="6" width="20" height="12" rx="2"/></svg> Игры' : LS.icon('zap',14) + ' Физика'}</div>
+          <div class="sim-title">${s.title}</div>
+          <div class="sim-desc">${s.desc}</div>
+        </div>
+        ${!s.id ? '<div class="sim-soon-badge">Скоро</div>' : ''}
+      </div>`).join('');
+    if (window.lucide) lucide.createIcons();
+  }
+
+  /* ════════════════════════════════
+     CARD PREVIEW SVGs
+  ════════════════════════════════ */
+  function _grid(fg='rgba(255,255,255,0.06)') {
+    return `<g stroke="${fg}" stroke-width="1">
+      <line x1="45" y1="0" x2="45" y2="140"/><line x1="90" y1="0" x2="90" y2="140"/>
+      <line x1="135" y1="0" x2="135" y2="140"/><line x1="180" y1="0" x2="180" y2="140"/>
+      <line x1="225" y1="0" x2="225" y2="140"/>
+      <line x1="0" y1="35" x2="270" y2="35"/><line x1="0" y1="70" x2="270" y2="70"/>
+      <line x1="0" y1="105" x2="270" y2="105"/>
+    </g>`;
+  }
+  function _axes() {
+    return `<line x1="0" y1="70" x2="262" y2="70" stroke="rgba(255,255,255,0.32)" stroke-width="1.5"/>
+    <line x1="135" y1="140" x2="135" y2="6" stroke="rgba(255,255,255,0.32)" stroke-width="1.5"/>
+    <polygon points="265,70 258,67 258,73" fill="rgba(255,255,255,0.32)"/>
+    <polygon points="135,4 132,11 138,11" fill="rgba(255,255,255,0.32)"/>`;
+  }
+  function _svg(body) {
+    return `<svg class="sim-preview" viewBox="0 0 270 140" xmlns="http://www.w3.org/2000/svg">
+      <rect width="270" height="140" fill="#0D0D1A"/>${body}</svg>`;
+  }
+
+  /* 1 — Graph */
+  const P_GRAPH = _svg(`${_grid()}${_axes()}
+    <path d="M 15,132 Q 135,20 255,132" stroke="#9B5DE5" stroke-width="2.5" fill="none"/>
+    <path d="M 0,70 C 34,30 56,30 90,70 C 124,110 146,110 180,70 C 214,30 236,30 270,70"
+          stroke="#06D6E0" stroke-width="2" fill="none" opacity="0.75"/>`);
+
+  /* 2 — Transform: three shifted/scaled sines */
+  const P_TRANSFORM = _svg(`${_grid()}${_axes()}
+    <path d="M 0,70 C 34,30 56,30 90,70 C 124,110 146,110 180,70 C 214,30 236,30 270,70"
+          stroke="#9B5DE5" stroke-width="2" fill="none" opacity="0.9"/>
+    <path d="M 0,53 C 22,24 42,24 67,53 C 92,82 112,82 135,53 C 158,24 178,24 202,53 C 227,82 248,82 270,53"
+          stroke="#06D6E0" stroke-width="2" fill="none" opacity="0.65"/>
+    <path d="M 0,85 C 45,36 80,36 135,85 C 190,134 225,134 270,85"
+          stroke="#F15BB5" stroke-width="2" fill="none" opacity="0.55"/>`);
+
+  /* 3 — Triangle geometry */
+  const P_TRIANGLE = _svg(`${_grid('rgba(255,255,255,0.04)')}
+    <polygon points="60,115 210,115 135,25" fill="rgba(155,93,229,0.1)" stroke="#9B5DE5" stroke-width="2"/>
+    <line x1="60" y1="115" x2="173" y2="70" stroke="rgba(6,214,224,0.5)" stroke-width="1.3" stroke-dasharray="4,3"/>
+    <line x1="210" y1="115" x2="98" y2="70" stroke="rgba(6,214,224,0.5)" stroke-width="1.3" stroke-dasharray="4,3"/>
+    <line x1="135" y1="25" x2="135" y2="115" stroke="rgba(6,214,224,0.5)" stroke-width="1.3" stroke-dasharray="4,3"/>
+    <circle cx="135" cy="78" r="3" fill="#06D6E0"/>
+    <rect x="131" y="111" width="8" height="8" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="1.2"/>`);
+
+  /* 4 — Inscribed/circumscribed circles */
+  const P_CIRCLES = _svg(`${_grid('rgba(255,255,255,0.04)')}
+    <polygon points="80,118 190,118 135,22" fill="rgba(155,93,229,0.08)" stroke="#9B5DE5" stroke-width="1.8"/>
+    <circle cx="135" cy="85" r="33" fill="none" stroke="#06D6E0" stroke-width="1.8" stroke-dasharray="5,3" opacity="0.7"/>
+    <circle cx="135" cy="55" r="52" fill="none" stroke="#F15BB5" stroke-width="1.5" stroke-dasharray="5,3" opacity="0.5"/>
+    <circle cx="135" cy="85" r="3" fill="#06D6E0" opacity="0.8"/>
+    <circle cx="135" cy="55" r="3" fill="#F15BB5" opacity="0.8"/>`);
+
+  /* 5 — Quadratic roots: parabola crossing x-axis */
+  const P_QUADRATIC = _svg(`${_grid()}${_axes()}
+    <path d="M 55,125 Q 135,8 215,125" stroke="#9B5DE5" stroke-width="2.5" fill="none"/>
+    <circle cx="85" cy="70" r="5" fill="#F15BB5" stroke="#fff" stroke-width="1.5"/>
+    <circle cx="185" cy="70" r="5" fill="#F15BB5" stroke="#fff" stroke-width="1.5"/>
+    <line x1="85" y1="68" x2="85" y2="125" stroke="rgba(241,91,181,0.35)" stroke-width="1" stroke-dasharray="3,3"/>
+    <line x1="185" y1="68" x2="185" y2="125" stroke="rgba(241,91,181,0.35)" stroke-width="1" stroke-dasharray="3,3"/>
+    <text x="135" y="136" font-size="9" fill="rgba(255,255,255,0.4)" text-anchor="middle" font-family="Manrope,sans-serif">D = b²− 4ac</text>`);
+
+  /* 6 — 3D geometry: isometric cube */
+  const P_3D = _svg(`${_grid('rgba(255,255,255,0.04)')}
+    <polygon points="135,20 210,58 210,115 135,77" fill="rgba(155,93,229,0.15)" stroke="#9B5DE5" stroke-width="1.8"/>
+    <polygon points="135,20 60,58 60,115 135,77" fill="rgba(155,93,229,0.08)" stroke="#9B5DE5" stroke-width="1.8"/>
+    <polygon points="60,58 135,20 210,58 135,96" fill="rgba(155,93,229,0.22)" stroke="#9B5DE5" stroke-width="1.8"/>
+    <line x1="135" y1="77" x2="135" y2="96" stroke="#9B5DE5" stroke-width="1.8"/>
+    <text x="135" y="132" font-size="9" fill="rgba(255,255,255,0.35)" text-anchor="middle" font-family="Manrope,sans-serif">V = a³</text>`);
+
+  /* 7 — Probability: histogram bars */
+  const P_PROB = _svg(`${_grid()}
+    <line x1="30" y1="15" x2="30" y2="118" stroke="rgba(255,255,255,0.35)" stroke-width="1.5"/>
+    <line x1="28" y1="118" x2="255" y2="118" stroke="rgba(255,255,255,0.35)" stroke-width="1.5"/>
+    <rect x="38"  y="90"  width="24" height="28" fill="rgba(155,93,229,0.6)" rx="2"/>
+    <rect x="68"  y="72"  width="24" height="46" fill="rgba(155,93,229,0.7)" rx="2"/>
+    <rect x="98"  y="44"  width="24" height="74" fill="rgba(155,93,229,0.85)" rx="2"/>
+    <rect x="128" y="32"  width="24" height="86" fill="#9B5DE5" rx="2"/>
+    <rect x="158" y="50"  width="24" height="68" fill="rgba(155,93,229,0.8)" rx="2"/>
+    <rect x="188" y="76"  width="24" height="42" fill="rgba(155,93,229,0.65)" rx="2"/>
+    <rect x="218" y="96"  width="24" height="22" fill="rgba(155,93,229,0.5)" rx="2"/>`);
+
+  /* 8 — Normal distribution: bell curve */
+  const P_NORMAL = _svg(`${_grid()}
+    <line x1="10" y1="118" x2="260" y2="118" stroke="rgba(255,255,255,0.32)" stroke-width="1.5"/>
+    <path d="M 10,116 C 50,115 80,110 100,90 C 115,72 125,35 135,22 C 145,35 155,72 170,90 C 190,110 220,115 260,116"
+          stroke="#9B5DE5" stroke-width="2.5" fill="none"/>
+    <path d="M 100,90 C 115,72 125,35 135,22 C 145,35 155,72 170,90 L 170,118 L 100,118 Z"
+          fill="rgba(155,93,229,0.15)"/>
+    <line x1="135" y1="22" x2="135" y2="118" stroke="rgba(255,255,255,0.2)" stroke-width="1" stroke-dasharray="3,3"/>
+    <text x="135" y="132" font-size="9" fill="rgba(255,255,255,0.4)" text-anchor="middle" font-family="Manrope,sans-serif">μ = 0, σ = 1</text>`);
+
+  /* 8b — Trig circle */
+  const P_TRIGCIRCLE = _svg(`${_grid('rgba(255,255,255,0.04)')}
+    <line x1="30" y1="70" x2="240" y2="70" stroke="rgba(255,255,255,0.25)" stroke-width="1.2"/>
+    <line x1="135" y1="8" x2="135" y2="132" stroke="rgba(255,255,255,0.25)" stroke-width="1.2"/>
+    <circle cx="135" cy="70" r="52" fill="none" stroke="rgba(255,255,255,0.18)" stroke-width="1.8"/>
+    <line x1="135" y1="70" x2="172" y2="33" stroke="rgba(255,255,255,0.45)" stroke-width="1.3"/>
+    <line x1="135" y1="70" x2="172" y2="70" stroke="#06D6E0" stroke-width="2.5"/>
+    <line x1="172" y1="70" x2="172" y2="33" stroke="#EF476F" stroke-width="2.5"/>
+    <circle cx="172" cy="33" r="5" fill="#9B5DE5"/>
+    <path d="M 148,70 A 13,13 0 0,0 144,60" stroke="rgba(155,93,229,0.6)" stroke-width="1.5" fill="none"/>
+    <text x="135" y="136" font-size="9" fill="rgba(255,255,255,0.4)" text-anchor="middle" font-family="Manrope,sans-serif">sin · cos · tg · ctg</text>`);
+
+  /* 9 — Projectile motion */
+  const P_PROJECTILE = _svg(`${_grid('rgba(255,255,255,0.04)')}
+    <line x1="15" y1="118" x2="255" y2="118" stroke="rgba(255,255,255,0.32)" stroke-width="1.5"/>
+    <path d="M 20,118 Q 135,18 250,118" stroke="#06D6E0" stroke-width="2.5" fill="none"/>
+    <circle cx="20" cy="118" r="5" fill="#06D6E0"/>
+    <line x1="20" y1="118" x2="52" y2="80" stroke="rgba(6,214,224,0.8)" stroke-width="1.5"
+          marker-end="url(#arr)"/>
+    <defs><marker id="arr" markerWidth="6" markerHeight="6" refX="3" refY="3" orient="auto">
+      <path d="M0,0 L6,3 L0,6 Z" fill="#06D6E0"/>
+    </marker></defs>
+    <line x1="135" y1="18" x2="135" y2="118" stroke="rgba(255,255,255,0.15)" stroke-width="1" stroke-dasharray="3,3"/>
+    <text x="135" y="132" font-size="9" fill="rgba(255,255,255,0.4)" text-anchor="middle" font-family="Manrope,sans-serif">x = v₀cos(α)·t</text>`);
+
+  /* 10 — Pendulum */
+  const P_PENDULUM = _svg(`${_grid('rgba(255,255,255,0.04)')}
+    <line x1="135" y1="15" x2="165" y2="95" stroke="rgba(255,255,255,0.5)" stroke-width="2"/>
+    <circle cx="165" cy="100" r="12" fill="rgba(6,214,224,0.25)" stroke="#06D6E0" stroke-width="2"/>
+    <line x1="135" y1="15" x2="95" y2="95" stroke="rgba(255,255,255,0.2)" stroke-width="1.5" stroke-dasharray="4,3"/>
+    <circle cx="95" cy="100" r="12" fill="none" stroke="rgba(6,214,224,0.3)" stroke-width="1.5" stroke-dasharray="3,3"/>
+    <path d="M 110,60 A 55,55 0 0 1 160,60" fill="none" stroke="rgba(6,214,224,0.4)" stroke-width="1.2" stroke-dasharray="3,3"/>
+    <circle cx="135" cy="15" r="4" fill="rgba(255,255,255,0.5)"/>
+    <text x="135" y="132" font-size="9" fill="rgba(255,255,255,0.4)" text-anchor="middle" font-family="Manrope,sans-serif">T = 2π√(l/g)</text>`);
+
+  /* 11 — Collision */
+  const P_COLLISION = _svg(`${_grid('rgba(255,255,255,0.04)')}
+    <line x1="15" y1="70" x2="255" y2="70" stroke="rgba(255,255,255,0.15)" stroke-width="1"/>
+    <circle cx="70" cy="70" r="28" fill="rgba(6,214,224,0.15)" stroke="#06D6E0" stroke-width="2"/>
+    <text x="70" y="75" font-size="11" fill="#06D6E0" text-anchor="middle" font-family="Manrope,sans-serif" font-weight="700">m₁</text>
+    <line x1="100" y1="70" x2="120" y2="70" stroke="#06D6E0" stroke-width="2" marker-end="url(#a2)"/>
+    <circle cx="195" cy="70" r="20" fill="rgba(241,91,181,0.15)" stroke="#F15BB5" stroke-width="2"/>
+    <text x="195" y="75" font-size="11" fill="#F15BB5" text-anchor="middle" font-family="Manrope,sans-serif" font-weight="700">m₂</text>
+    <line x1="175" y1="70" x2="155" y2="70" stroke="#F15BB5" stroke-width="2" marker-end="url(#a3)"/>
+    <defs>
+      <marker id="a2" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto"><path d="M0,0 L6,3 L0,6 Z" fill="#06D6E0"/></marker>
+      <marker id="a3" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto"><path d="M0,0 L6,3 L0,6 Z" fill="#F15BB5"/></marker>
+    </defs>`);
+
+
+  /* 13 — Electric circuit */
+  const P_CIRCUIT = _svg(`${_grid('rgba(255,255,255,0.04)')}
+    <rect x="30" y="25" width="210" height="90" fill="none" stroke="rgba(255,255,255,0.25)" stroke-width="1.5" rx="4"/>
+    <line x1="30" y1="70" x2="70" y2="70" stroke="#06D6E0" stroke-width="2"/>
+    <rect x="70" y="58" width="36" height="24" fill="rgba(6,214,224,0.15)" stroke="#06D6E0" stroke-width="1.8" rx="3"/>
+    <text x="88" y="74" font-size="10" fill="#06D6E0" text-anchor="middle" font-family="Manrope,sans-serif" font-weight="700">R₁</text>
+    <line x1="106" y1="70" x2="130" y2="70" stroke="#06D6E0" stroke-width="2"/>
+    <rect x="130" y="58" width="36" height="24" fill="rgba(6,214,224,0.15)" stroke="#06D6E0" stroke-width="1.8" rx="3"/>
+    <text x="148" y="74" font-size="10" fill="#06D6E0" text-anchor="middle" font-family="Manrope,sans-serif" font-weight="700">R₂</text>
+    <line x1="166" y1="70" x2="190" y2="70" stroke="#06D6E0" stroke-width="2"/>
+    <rect x="190" y="56" width="18" height="28" fill="rgba(241,91,181,0.15)" stroke="#F15BB5" stroke-width="1.8" rx="3"/>
+    <line x1="208" y1="70" x2="240" y2="70" stroke="#06D6E0" stroke-width="2"/>
+    <text x="135" y="132" font-size="9" fill="rgba(255,255,255,0.4)" text-anchor="middle" font-family="Manrope,sans-serif">I = U/R</text>`);
+
+  /* 14 — Magnetic field */
+  const P_MAGNETIC = _svg(`
+    <rect width="270" height="140" fill="#05050F"/>
+    ${_grid('rgba(155,93,229,0.06)')}
+    <defs>
+      <radialGradient id="mg1" cx="38%" cy="50%"><stop offset="0%" stop-color="#06D6E0" stop-opacity=".55"/><stop offset="100%" stop-color="#06D6E0" stop-opacity="0"/></radialGradient>
+      <radialGradient id="mg2" cx="62%" cy="50%"><stop offset="0%" stop-color="#F15BB5" stop-opacity=".55"/><stop offset="100%" stop-color="#F15BB5" stop-opacity="0"/></radialGradient>
+    </defs>
+    <rect width="270" height="140" fill="url(#mg1)" opacity=".7"/>
+    <rect width="270" height="140" fill="url(#mg2)" opacity=".7"/>
+    <ellipse cx="95" cy="70" rx="45" ry="45" fill="none" stroke="#06D6E0" stroke-width="1.4" stroke-dasharray="5,3" opacity=".6"/>
+    <ellipse cx="95" cy="70" rx="70" ry="60" fill="none" stroke="#06D6E0" stroke-width="1" stroke-dasharray="4,4" opacity=".3"/>
+    <ellipse cx="175" cy="70" rx="45" ry="45" fill="none" stroke="#F15BB5" stroke-width="1.4" stroke-dasharray="5,3" opacity=".6"/>
+    <ellipse cx="175" cy="70" rx="70" ry="60" fill="none" stroke="#F15BB5" stroke-width="1" stroke-dasharray="4,4" opacity=".3"/>
+    <path d="M95,30 C160,30 110,70 175,70" stroke="rgba(255,255,255,0.25)" stroke-width="1.2" fill="none"/>
+    <path d="M95,110 C160,110 110,70 175,70" stroke="rgba(255,255,255,0.25)" stroke-width="1.2" fill="none"/>
+    <circle cx="95" cy="70" r="11" fill="rgba(5,5,20,0.9)" stroke="#06D6E0" stroke-width="2.2"/>
+    <circle cx="95" cy="70" r="4" fill="#06D6E0"/>
+    <circle cx="175" cy="70" r="11" fill="rgba(5,5,20,0.9)" stroke="#F15BB5" stroke-width="2.2"/>
+    <line x1="170" y1="65" x2="180" y2="75" stroke="#F15BB5" stroke-width="2"/>
+    <line x1="180" y1="65" x2="170" y2="75" stroke="#F15BB5" stroke-width="2"/>
+    <text x="135" y="132" font-size="9" fill="rgba(255,255,255,0.4)" text-anchor="middle" font-family="Manrope,sans-serif">B = μ₀I / 2πr</text>`);
+
+  /* 14 — Electric field lines */
+  const P_FIELD = _svg(`${_grid('rgba(255,255,255,0.04)')}
+    <circle cx="135" cy="70" r="10" fill="rgba(155,93,229,0.3)" stroke="#9B5DE5" stroke-width="2"/>
+    <text x="135" y="74" font-size="10" fill="#9B5DE5" text-anchor="middle" font-family="Manrope,sans-serif" font-weight="800">+</text>
+    <g stroke="#9B5DE5" stroke-width="1.3" fill="none" opacity="0.6">
+      <path d="M135,60 L135,20"/><path d="M135,80 L135,120"/>
+      <path d="M125,63 L95,38"/><path d="M145,63 L175,38"/>
+      <path d="M125,77 L95,102"/><path d="M145,77 L175,102"/>
+      <path d="M122,70 L80,70"/><path d="M148,70 L190,70"/>
+      <path d="M125,64 L102,42"/><path d="M145,64 L168,42"/>
+      <path d="M125,76 L102,98"/><path d="M145,76 L168,98"/>
+    </g>
+    <circle cx="135" cy="20" r="2" fill="#9B5DE5" opacity="0.5"/>
+    <circle cx="135" cy="120" r="2" fill="#9B5DE5" opacity="0.5"/>
+    <circle cx="80" cy="70" r="2" fill="#9B5DE5" opacity="0.5"/>
+    <circle cx="190" cy="70" r="2" fill="#9B5DE5" opacity="0.5"/>`);
+
+  /* 15 — Thin lens */
+  const P_LENS = _svg(`${_grid('rgba(255,255,255,0.04)')}
+    <line x1="10" y1="70" x2="260" y2="70" stroke="rgba(255,255,255,0.25)" stroke-width="1"/>
+    <path d="M 135,20 Q 155,70 135,120 Q 115,70 135,20" fill="rgba(6,214,224,0.12)" stroke="#06D6E0" stroke-width="2"/>
+    <line x1="30" y1="45" x2="135" y2="45" stroke="#9B5DE5" stroke-width="1.8"/>
+    <line x1="135" y1="45" x2="230" y2="90" stroke="#9B5DE5" stroke-width="1.8"/>
+    <line x1="30" y1="70" x2="230" y2="70" stroke="#06D6E0" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.5"/>
+    <line x1="30" y1="95" x2="135" y2="95" stroke="#F15BB5" stroke-width="1.8"/>
+    <line x1="135" y1="95" x2="230" y2="55" stroke="#F15BB5" stroke-width="1.8"/>
+    <circle cx="30" cy="70" r="5" fill="#9B5DE5" opacity="0.7"/>
+    <line x1="30" y1="40" x2="30" y2="100" stroke="rgba(255,255,255,0.4)" stroke-width="1.5"/>`);
+
+  /* 16 — Refraction */
+  const P_REFRACTION = _svg(`
+    <rect width="270" height="70" fill="#0D0D1A"/>
+    <rect y="70" width="270" height="70" fill="rgba(6,214,224,0.07)"/>
+    <line x1="0" y1="70" x2="270" y2="70" stroke="rgba(6,214,224,0.35)" stroke-width="1.5" stroke-dasharray="6,4"/>
+    <line x1="135" y1="10" x2="135" y2="130" stroke="rgba(255,255,255,0.15)" stroke-width="1" stroke-dasharray="3,3"/>
+    <line x1="60" y1="15" x2="135" y2="70" stroke="#9B5DE5" stroke-width="2.5"/>
+    <polygon points="135,70 127,50 143,50" fill="#9B5DE5" opacity="0.7"/>
+    <line x1="135" y1="70" x2="195" y2="125" stroke="#06D6E0" stroke-width="2.5"/>
+    <polygon points="195,125 183,112 196,107" fill="#06D6E0" opacity="0.7"/>
+    <path d="M 135,50 A 22,22 0 0 0 118,70" fill="none" stroke="rgba(155,93,229,0.5)" stroke-width="1.2"/>
+    <path d="M 135,90 A 28,28 0 0 1 157,70" fill="none" stroke="rgba(6,214,224,0.5)" stroke-width="1.2"/>
+    <text x="118" y="63" font-size="9" fill="rgba(155,93,229,0.8)" font-family="Manrope,sans-serif">α</text>
+    <text x="152" y="87" font-size="9" fill="rgba(6,214,224,0.8)" font-family="Manrope,sans-serif">β</text>
+    <text x="135" y="136" font-size="9" fill="rgba(255,255,255,0.35)" text-anchor="middle" font-family="Manrope,sans-serif">n₁sinα = n₂sinβ</text>`);
+
+  /* 17 — Mirrors */
+  const P_MIRROR = _svg(`${_grid('rgba(255,255,255,0.04)')}
+    <line x1="10" y1="70" x2="260" y2="70" stroke="rgba(255,255,255,0.25)" stroke-width="1"/>
+    <path d="M 200,15 Q 184,70 200,125" fill="none" stroke="#06D6E0" stroke-width="2.5"/>
+    <line x1="200" y1="20" x2="210" y2="30" stroke="rgba(6,214,224,0.25)" stroke-width="1.5"/>
+    <line x1="200" y1="45" x2="210" y2="55" stroke="rgba(6,214,224,0.25)" stroke-width="1.5"/>
+    <line x1="200" y1="70" x2="210" y2="80" stroke="rgba(6,214,224,0.25)" stroke-width="1.5"/>
+    <line x1="200" y1="95" x2="210" y2="105" stroke="rgba(6,214,224,0.25)" stroke-width="1.5"/>
+    <line x1="200" y1="118" x2="210" y2="128" stroke="rgba(6,214,224,0.25)" stroke-width="1.5"/>
+    <circle cx="130" cy="70" r="4" fill="#06D6E0" opacity="0.8"/>
+    <text x="130" y="84" text-anchor="middle" font-size="9" fill="#06D6E0" font-family="Manrope,sans-serif">F</text>
+    <line x1="50" y1="70" x2="50" y2="30" stroke="#9B5DE5" stroke-width="2"/>
+    <polygon points="50,30 44,42 56,42" fill="#9B5DE5"/>
+    <line x1="50" y1="30" x2="200" y2="30" stroke="#06D6E0" stroke-width="1.5"/>
+    <line x1="200" y1="30" x2="70" y2="105" stroke="#06D6E0" stroke-width="1.5"/>
+    <line x1="50" y1="30" x2="200" y2="70" stroke="#7BF5A4" stroke-width="1.5"/>
+    <line x1="200" y1="70" x2="70" y2="105" stroke="#7BF5A4" stroke-width="1.5"/>
+    <line x1="70" y1="70" x2="70" y2="105" stroke="#EF476F" stroke-width="2"/>
+    <polygon points="70,105 64,93 76,93" fill="#EF476F"/>`);
+
+  /* 18 — Isoprocesses */
+  const P_ISOPROCESS = _svg(`${_grid('rgba(255,255,255,0.04)')}
+    <line x1="30" y1="10" x2="30" y2="125" stroke="rgba(255,255,255,0.3)" stroke-width="1.5"/>
+    <line x1="30" y1="125" x2="265" y2="125" stroke="rgba(255,255,255,0.3)" stroke-width="1.5"/>
+    <path d="M 50,20 Q 140,60 240,110" fill="none" stroke="#EF476F" stroke-width="2" opacity="0.5" stroke-dasharray="4,3"/>
+    <path d="M 50,20 Q 130,80 230,118" fill="none" stroke="#FFD166" stroke-width="2" opacity="0.5" stroke-dasharray="4,3"/>
+    <line x1="50" y1="20" x2="50" y2="118" stroke="#06D6E0" stroke-width="2" opacity="0.5" stroke-dasharray="4,3"/>
+    <line x1="50" y1="20" x2="230" y2="20" stroke="#7BF5A4" stroke-width="2" opacity="0.5" stroke-dasharray="4,3"/>
+    <path d="M 50,20 Q 120,55 220,108" fill="none" stroke="#EF476F" stroke-width="2.5"/>
+    <circle cx="50" cy="20" r="5" fill="#9B5DE5"/>
+    <circle cx="220" cy="108" r="5" fill="#EF476F"/>
+    <text x="240" y="113" font-size="9" fill="#EF476F" font-family="Manrope,sans-serif">2</text>
+    <text x="40" y="16" font-size="9" fill="#9B5DE5" font-family="Manrope,sans-serif">1</text>
+    <text x="255" y="128" font-size="9" fill="rgba(255,255,255,0.5)" font-family="Manrope,sans-serif">V</text>
+    <text x="18" y="12" font-size="9" fill="rgba(255,255,255,0.5)" font-family="Manrope,sans-serif">P</text>`);
+
+  /* ── Chemistry / Molecular Physics previews ── */
+  const P_GAS = _svg(`
+    <rect width="270" height="140" fill="#0D0D1A"/>
+    <rect x="6" y="6" width="258" height="128" rx="4" fill="none" stroke="rgba(155,93,229,0.4)" stroke-width="2"/>
+    ${[
+      [40,30,'#4CC9F0'],[70,80,'#7BF5A4'],[110,25,'#EF476F'],[150,60,'#FFD166'],[190,30,'#4CC9F0'],
+      [220,90,'#EF476F'],[55,110,'#7BF5A4'],[95,65,'#4CC9F0'],[130,110,'#EF476F'],[170,40,'#FFD166'],
+      [210,115,'#4CC9F0'],[240,55,'#7BF5A4'],[30,70,'#FFD166'],[80,120,'#EF476F'],[165,95,'#4CC9F0']
+    ].map(([x,y,c])=>`<circle cx="${x}" cy="${y}" r="5" fill="${c}" opacity="0.85"/>`).join('')}
+    <rect x="6" y="105" width="258" height="29" rx="3" fill="rgba(0,0,0,0.55)"/>
+    <rect x="18" y="112" width="40" height="12" rx="2" fill="rgba(155,93,229,0.25)"/>
+    <rect x="18" y="112" width="14" height="12" rx="2" fill="rgba(155,93,229,0.6)"/>
+    <rect x="70" y="112" width="40" height="12" rx="2" fill="rgba(155,93,229,0.25)"/>
+    <rect x="70" y="112" width="22" height="12" rx="2" fill="#7BF5A4" opacity="0.7"/>
+    <rect x="122" y="112" width="40" height="12" rx="2" fill="rgba(155,93,229,0.25)"/>
+    <rect x="122" y="112" width="30" height="12" rx="2" fill="#EF476F" opacity="0.7"/>
+    <text x="202" y="121" font-size="8" fill="rgba(255,255,255,0.5)" font-family="Manrope,sans-serif">PV=nRT</text>`);
+
+
+  /* ── Законы Ньютона ── */
+  const P_NEWTON = _svg(`
+    <rect width="270" height="140" fill="#0D0D1A"/>
+    <line x1="0" y1="105" x2="270" y2="105" stroke="rgba(255,255,255,0.22)" stroke-width="2"/>
+    <rect x="80" y="75" width="50" height="30" rx="5" fill="rgba(6,214,224,0.18)" stroke="#06D6E0" stroke-width="2"/>
+    <line x1="130" y1="90" x2="175" y2="90" stroke="#EF476F" stroke-width="2.5" marker-end="url(#na)"/>
+    <defs><marker id="na" markerWidth="7" markerHeight="7" refX="5" refY="3.5" orient="auto"><path d="M0,0 L7,3.5 L0,7 Z" fill="#EF476F"/></marker></defs>
+    <text x="153" y="84" font-size="9" fill="#EF476F" font-family="Manrope,sans-serif" font-weight="700">F</text>
+    <line x1="105" y1="75" x2="105" y2="55" stroke="rgba(255,255,255,0.3)" stroke-width="1.2" stroke-dasharray="3,2"/>
+    <line x1="105" y1="55" x2="175" y2="55" stroke="rgba(255,255,255,0.18)" stroke-width="1" stroke-dasharray="3,3"/>
+    <circle cx="65" cy="90" r="12" fill="rgba(155,93,229,0.2)" stroke="#9B5DE5" stroke-width="1.8"/>
+    <text x="65" y="94" font-size="9" fill="#9B5DE5" text-anchor="middle" font-family="Manrope,sans-serif" font-weight="700">m₂</text>
+    <line x1="195" y1="90" x2="220" y2="90" stroke="#9B5DE5" stroke-width="2" stroke-dasharray="4,3" marker-end="url(#nb)"/>
+    <defs><marker id="nb" markerWidth="7" markerHeight="7" refX="5" refY="3.5" orient="auto"><path d="M0,0 L7,3.5 L0,7 Z" fill="#9B5DE5"/></marker></defs>
+    <text x="135" y="130" font-size="8" fill="rgba(255,255,255,0.4)" text-anchor="middle" font-family="Manrope,sans-serif">a = F/m · III законы Ньютона</text>`);
+
+  /* ── Песочница сил ── */
+  const P_SANDBOX = _svg(`
+    <rect width="270" height="140" fill="#0D0D1A"/>
+    ${_grid('rgba(255,255,255,0.03)')}
+    <line x1="0" y1="115" x2="270" y2="115" stroke="rgba(155,93,229,0.35)" stroke-width="2"/>
+    <rect x="55" y="82" width="44" height="33" rx="6" fill="rgba(239,71,111,0.22)" stroke="#EF476F" stroke-width="1.8"/>
+    <text x="77" y="103" font-size="8" fill="#fff" text-anchor="middle" font-family="monospace" font-weight="700">5кг</text>
+    <circle cx="180" cy="88" r="18" fill="rgba(76,201,240,0.18)" stroke="#4CC9F0" stroke-width="1.8"/>
+    <text x="180" y="92" font-size="8" fill="#fff" text-anchor="middle" font-family="monospace" font-weight="700">8кг</text>
+    <line x1="99" y1="95" x2="140" y2="95" stroke="#FFD166" stroke-width="2.2" marker-end="url(#sa)"/>
+    <line x1="198" y1="88" x2="238" y2="68" stroke="#7BF5A4" stroke-width="2.2" marker-end="url(#sb)"/>
+    <defs>
+      <marker id="sa" markerWidth="7" markerHeight="7" refX="5" refY="3.5" orient="auto"><path d="M0,0 L7,3.5 L0,7 Z" fill="#FFD166"/></marker>
+      <marker id="sb" markerWidth="7" markerHeight="7" refX="5" refY="3.5" orient="auto"><path d="M0,0 L7,3.5 L0,7 Z" fill="#7BF5A4"/></marker>
+    </defs>
+    <text x="120" y="87" font-size="8" fill="#FFD166" font-family="monospace">F₁</text>
+    <text x="225" y="63" font-size="8" fill="#7BF5A4" font-family="monospace">F₂</text>
+    <text x="135" y="133" font-size="8" fill="rgba(255,255,255,0.35)" text-anchor="middle" font-family="Manrope,sans-serif">Песочница сил · F = ma</text>`);
+
+  /* ── coming soon chem previews (simple) ── */
+  const P_KINETICS = _svg(`
+    <rect width="270" height="140" fill="#0D0D1A"/>
+    ${_grid()}
+    <path d="M 20,120 C 60,90 100,50 140,35 S 220,28 260,26" fill="none" stroke="#34d399" stroke-width="2" stroke-linecap="round"/>
+    <path d="M 20,30 C 60,55 100,100 140,112 S 220,118 260,120" fill="none" stroke="#EF476F" stroke-width="2" stroke-linecap="round"/>
+    <circle cx="140" cy="35" r="4" fill="#34d399"/>
+    <circle cx="140" cy="112" r="4" fill="#EF476F"/>
+    <text x="20" y="18" font-size="9" fill="rgba(52,211,153,0.8)" font-family="Manrope,sans-serif">[C] продукт</text>
+    <text x="180" y="130" font-size="9" fill="rgba(239,71,111,0.8)" font-family="Manrope,sans-serif">[A] реагент</text>`);
+
+  const P_EQUILIBRIUM = _svg(`
+    <rect width="270" height="140" fill="#0D0D1A"/>
+    <text x="135" y="30" font-size="11" fill="rgba(255,255,255,0.7)" text-anchor="middle" font-family="Manrope,sans-serif">A + B ⇌ C + D</text>
+    <rect x="30" y="50" width="60" height="70" rx="4" fill="rgba(155,93,229,0.15)" stroke="rgba(155,93,229,0.4)" stroke-width="1.5"/>
+    <rect x="100" y="75" width="70" height="45" rx="4" fill="rgba(6,214,224,0.12)" stroke="rgba(6,214,224,0.35)" stroke-width="1.5"/>
+    <rect x="180" y="55" width="60" height="65" rx="4" fill="rgba(241,91,181,0.12)" stroke="rgba(241,91,181,0.35)" stroke-width="1.5"/>
+    <text x="60" y="90" font-size="9" fill="#9B5DE5" text-anchor="middle" font-family="Manrope,sans-serif">A,B</text>
+    <text x="135" y="101" font-size="8" fill="#06D6E0" text-anchor="middle" font-family="Manrope,sans-serif">K</text>
+    <text x="210" y="91" font-size="9" fill="#F15BB5" text-anchor="middle" font-family="Manrope,sans-serif">C,D</text>`);
+
+  const P_ELECTROLYSIS = _svg(`
+    <rect width="270" height="140" fill="#0D0D1A"/>
+    <rect x="20" y="30" width="230" height="90" rx="6" fill="rgba(6,214,224,0.07)" stroke="rgba(6,214,224,0.2)" stroke-width="1.5"/>
+    <rect x="50" y="20" width="12" height="80" rx="3" fill="#9B5DE5" opacity="0.8"/>
+    <rect x="208" y="20" width="12" height="80" rx="3" fill="#EF476F" opacity="0.8"/>
+    ${[55,58,61,64,67,70].map(x=>`<circle cx="${x}" cy="${110-Math.random()*20|0}" r="2.5" fill="rgba(155,93,229,0.6)"/>`).join('')}
+    ${[210,214,218,222,226].map(x=>`<circle cx="${x}" cy="${100-Math.random()*15|0}" r="2.5" fill="rgba(239,71,111,0.6)"/>`).join('')}
+    <text x="56" y="15" font-size="8" fill="#9B5DE5" text-anchor="middle" font-family="Manrope,sans-serif">−</text>
+    <text x="214" y="15" font-size="8" fill="#EF476F" text-anchor="middle" font-family="Manrope,sans-serif">+</text>`);
+
+  const P_BOHR = _svg(`
+    <rect width="270" height="140" fill="#0D0D1A"/>
+    <circle cx="135" cy="70" r="8" fill="#FFD166" opacity="0.9"/>
+    <ellipse cx="135" cy="70" rx="30" ry="10" fill="none" stroke="rgba(155,93,229,0.4)" stroke-width="1.5"/>
+    <ellipse cx="135" cy="70" rx="55" ry="18" fill="none" stroke="rgba(6,214,224,0.3)" stroke-width="1.5"/>
+    <ellipse cx="135" cy="70" rx="80" ry="27" fill="none" stroke="rgba(241,91,181,0.25)" stroke-width="1.5"/>
+    <circle cx="165" cy="70" r="4" fill="#9B5DE5"/>
+    <circle cx="90" cy="70" r="4" fill="#06D6E0"/>
+    <circle cx="215" cy="70" r="4" fill="#F15BB5"/>
+    <line x1="165" y1="60" x2="190" y2="35" stroke="rgba(255,214,0,0.6)" stroke-width="1.5" stroke-dasharray="3,2"/>
+    <circle cx="190" cy="35" r="3" fill="#FFD166" opacity="0.8"/>`);
+
+  const P_ORBITALS = _svg(`
+    <rect width="270" height="140" fill="#0D0D1A"/>
+    <ellipse cx="135" cy="70" rx="60" ry="25" fill="rgba(155,93,229,0.15)" stroke="rgba(155,93,229,0.5)" stroke-width="1.5"/>
+    <ellipse cx="135" cy="70" rx="25" ry="60" fill="rgba(6,214,224,0.1)" stroke="rgba(6,214,224,0.4)" stroke-width="1.5"/>
+    <circle cx="135" cy="70" r="6" fill="#FFD166" opacity="0.9"/>
+    <circle cx="95" cy="70" r="5" fill="#9B5DE5" opacity="0.8"/>
+    <circle cx="175" cy="70" r="5" fill="#9B5DE5" opacity="0.8"/>`);
+
+  const P_PH = _svg(`
+    <rect width="270" height="140" fill="#0D0D1A"/>
+    ${_grid()}
+    <path d="M 20,110 L 60,108 L 100,105 L 120,90 L 130,30 L 140,75 L 180,40 L 220,35 L 260,32"
+      fill="none" stroke="#34d399" stroke-width="2" stroke-linecap="round"/>
+    <line x1="20" y1="70" x2="260" y2="70" stroke="rgba(255,255,255,0.15)" stroke-width="1" stroke-dasharray="4,3"/>
+    <text x="20" y="18" font-size="9" fill="rgba(255,255,255,0.5)" font-family="Manrope,sans-serif">pH</text>
+    <text x="240" y="130" font-size="9" fill="rgba(255,255,255,0.4)" font-family="Manrope,sans-serif">V</text>`);
+
+  const P_CHEMSANDBOX = _svg(`
+    <rect width="270" height="140" fill="#0D0D1A"/>
+    ${_grid()}
+    <rect x="85" y="20" width="100" height="70" rx="8" fill="none" stroke="rgba(75,205,155,0.4)" stroke-width="1.5"/>
+    <rect x="88" y="55" width="94" height="32" rx="4" fill="rgba(75,205,155,0.15)"/>
+    <circle cx="110" cy="71" r="4" fill="rgba(255,200,60,0.5)"/>
+    <circle cx="130" cy="68" r="3" fill="rgba(255,255,255,0.3)"/>
+    <circle cx="150" cy="73" r="3.5" fill="rgba(90,200,235,0.4)"/>
+    <text x="135" y="105" font-size="9" fill="rgba(255,255,255,0.5)" font-family="Manrope,sans-serif" text-anchor="middle">A + B <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> C + D</text>
+    <rect x="40" y="115" width="28" height="18" rx="4" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/>
+    <rect x="75" y="115" width="28" height="18" rx="4" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/>
+    <rect x="110" y="115" width="28" height="18" rx="4" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/>
+    <rect x="145" y="115" width="28" height="18" rx="4" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/>
+    <rect x="180" y="115" width="28" height="18" rx="4" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/>
+    <circle cx="54" cy="121" r="3" fill="#78D278"/><circle cx="89" cy="121" r="3" fill="#7BF5A4"/>
+    <circle cx="124" cy="121" r="3" fill="#4CC9F0"/><circle cx="159" cy="121" r="3" fill="#9BB8CC"/>
+    <circle cx="194" cy="121" r="3" fill="#FFD166"/>`);
+
+  const P_CRYSTAL = _svg(`
+    <rect width="270" height="140" fill="#0D0D1A"/>
+    ${[
+      [80,40],[135,40],[190,40],
+      [55,75],[110,75],[165,75],[220,75],
+      [80,110],[135,110],[190,110]
+    ].map(([x,y],i)=>`<circle cx="${x}" cy="${y}" r="${i%2===0?7:5}" fill="${i%2===0?'#9B5DE5':'#06D6E0'}" opacity="0.8"/>`).join('')}
+    <line x1="80" y1="40" x2="135" y2="40" stroke="rgba(255,255,255,0.2)" stroke-width="1.5"/>
+    <line x1="135" y1="40" x2="190" y2="40" stroke="rgba(255,255,255,0.2)" stroke-width="1.5"/>
+    <line x1="80" y1="40" x2="55" y2="75" stroke="rgba(255,255,255,0.2)" stroke-width="1.5"/>
+    <line x1="135" y1="40" x2="110" y2="75" stroke="rgba(255,255,255,0.2)" stroke-width="1.5"/>
+    <line x1="190" y1="40" x2="165" y2="75" stroke="rgba(255,255,255,0.2)" stroke-width="1.5"/>
+    <line x1="190" y1="40" x2="220" y2="75" stroke="rgba(255,255,255,0.2)" stroke-width="1.5"/>
+    <line x1="55" y1="75" x2="80" y2="110" stroke="rgba(255,255,255,0.2)" stroke-width="1.5"/>
+    <line x1="110" y1="75" x2="135" y2="110" stroke="rgba(255,255,255,0.2)" stroke-width="1.5"/>
+    <line x1="165" y1="75" x2="190" y2="110" stroke="rgba(255,255,255,0.2)" stroke-width="1.5"/>
+    <line x1="80" y1="110" x2="135" y2="110" stroke="rgba(255,255,255,0.2)" stroke-width="1.5"/>
+    <line x1="135" y1="110" x2="190" y2="110" stroke="rgba(255,255,255,0.2)" stroke-width="1.5"/>`);
+
+  const P_CELLDIVISION = _svg(`
+    <rect width="270" height="140" fill="#0e0e18"/>
+    <ellipse cx="135" cy="70" rx="78" ry="54" fill="rgba(34,211,153,0.07)" stroke="rgba(34,211,153,0.5)" stroke-width="2"/>
+    <ellipse cx="135" cy="70" rx="44" ry="28" fill="rgba(155,93,229,0.08)" stroke="rgba(155,93,229,0.3)" stroke-width="1" stroke-dasharray="4,3"/>
+    <line x1="55" y1="70" x2="215" y2="70" stroke="rgba(255,214,0,0.35)" stroke-width="1.2" stroke-dasharray="3,2"/>
+    <rect x="98" y="57" width="9" height="15" rx="2" fill="#EF476F" opacity="0.9"/>
+    <rect x="112" y="57" width="9" height="15" rx="2" fill="#FF6B35" opacity="0.9"/>
+    <rect x="126" y="57" width="9" height="15" rx="2" fill="#9B5DE5" opacity="0.9"/>
+    <rect x="140" y="57" width="9" height="15" rx="2" fill="#FFD166" opacity="0.9"/>
+    <rect x="154" y="57" width="9" height="15" rx="2" fill="#EF476F" opacity="0.9"/>
+    <rect x="98" y="75" width="9" height="15" rx="2" fill="#EF476F" opacity="0.9"/>
+    <rect x="112" y="75" width="9" height="15" rx="2" fill="#FF6B35" opacity="0.9"/>
+    <rect x="126" y="75" width="9" height="15" rx="2" fill="#9B5DE5" opacity="0.9"/>
+    <rect x="140" y="75" width="9" height="15" rx="2" fill="#FFD166" opacity="0.9"/>
+    <rect x="154" y="75" width="9" height="15" rx="2" fill="#EF476F" opacity="0.9"/>
+    <line x1="135" y1="16" x2="114" y2="57" stroke="rgba(255,214,0,0.4)" stroke-width="1"/>
+    <line x1="135" y1="16" x2="135" y2="57" stroke="rgba(255,214,0,0.4)" stroke-width="1"/>
+    <line x1="135" y1="124" x2="114" y2="90" stroke="rgba(255,214,0,0.4)" stroke-width="1"/>
+    <line x1="135" y1="124" x2="135" y2="90" stroke="rgba(255,214,0,0.4)" stroke-width="1"/>
+    <circle cx="135" cy="15" r="5" fill="rgba(255,214,0,0.7)"/>
+    <circle cx="135" cy="125" r="5" fill="rgba(255,214,0,0.7)"/>
+    <text x="135" y="137" font-size="8" fill="rgba(255,255,255,0.35)" text-anchor="middle" font-family="Manrope,sans-serif">Метафаза · митоз</text>`);
+
+  const P_PHOTOSYNTHESIS = _svg(`
+    <rect width="270" height="140" fill="#0a0e14"/>
+    <ellipse cx="135" cy="72" rx="100" ry="48" fill="rgba(34,211,153,0.07)" stroke="rgba(34,211,153,0.45)" stroke-width="2"/>
+    <rect x="52" y="60" width="166" height="22" rx="7" fill="rgba(34,211,153,0.18)" stroke="rgba(34,211,153,0.5)" stroke-width="1.5"/>
+    <line x1="70" y1="12" x2="79" y2="59" stroke="#FFD166" stroke-width="1.8" stroke-dasharray="3,2" opacity="0.8"/>
+    <line x1="100" y1="8" x2="107" y2="59" stroke="#FFD166" stroke-width="1.8" stroke-dasharray="3,2" opacity="0.8"/>
+    <line x1="135" y1="6" x2="135" y2="59" stroke="#FFD166" stroke-width="1.8" stroke-dasharray="3,2" opacity="0.8"/>
+    <line x1="170" y1="8" x2="163" y2="59" stroke="#FFD166" stroke-width="1.8" stroke-dasharray="3,2" opacity="0.8"/>
+    <circle cx="70" cy="11" r="5" fill="#FFD166" opacity="0.9"/>
+    <circle cx="100" cy="7" r="5" fill="#FFD166" opacity="0.9"/>
+    <circle cx="135" cy="5" r="5" fill="#FFD166" opacity="0.9"/>
+    <circle cx="170" cy="7" r="5" fill="#FFD166" opacity="0.9"/>
+    <text x="52" y="98" font-size="8" fill="rgba(6,214,224,0.8)" font-family="Manrope,sans-serif">H₂O</text>
+    <text x="90" y="106" font-size="8" fill="rgba(255,255,255,0.45)" font-family="Manrope,sans-serif">CO₂</text>
+    <text x="168" y="52" font-size="8" fill="#9B5DE5" font-family="Manrope,sans-serif">ATP</text>
+    <text x="185" y="98" font-size="8" fill="#22d399" font-family="Manrope,sans-serif">G3P</text>
+    <text x="135" y="135" font-size="8" fill="rgba(255,255,255,0.35)" text-anchor="middle" font-family="Manrope,sans-serif">Световые реакции · цикл Кальвина</text>`);
+
+  const P_ANGRYBIRDS = _svg(`
+    <rect width="270" height="140" fill="#0f1923"/>
+    <rect x="0" y="108" width="270" height="32" fill="#3d6b47"/>
+    <line x1="0" y1="108" x2="270" y2="108" stroke="rgba(255,255,255,0.1)" stroke-width="1"/>
+    <rect x="175" y="68" width="22" height="40" fill="#b5651d" stroke="#7a3f0a" stroke-width="1.5"/>
+    <rect x="158" y="56" width="56" height="14" fill="#b5651d" stroke="#7a3f0a" stroke-width="1.5"/>
+    <rect x="168" y="40" width="18" height="18" fill="#a8d8ea" stroke="#5badd4" stroke-width="1.5"/>
+    <rect x="202" y="78" width="16" height="30" fill="#7a7a7a" stroke="#444" stroke-width="1.5"/>
+    <circle cx="232" cy="100" r="10" fill="#22c55e" stroke="#166534" stroke-width="1.5"/>
+    <circle cx="215" cy="99" r="10" fill="#22c55e" stroke="#166534" stroke-width="1.5"/>
+    <path d="M 32,102 Q 90,38 148,98" stroke="#ef476f" stroke-width="2.5" fill="none" stroke-dasharray="4,3"/>
+    <circle cx="32" cy="102" r="9" fill="#e63946"/>
+    <circle cx="36" cy="98" r="2.5" fill="#fff"/>
+    <circle cx="37.5" cy="97.5" r="1.1" fill="#111"/>
+    <line x1="28" y1="94" x2="38" y2="98" stroke="#333" stroke-width="1.5" stroke-linecap="round"/>
+    <circle cx="21" cy="106" r="6.5" fill="#888" opacity="0.7"/>
+    <circle cx="10" cy="106" r="5.5" fill="#ffd166" opacity="0.5"/>
+    <line x1="18" y1="93" x2="22" y2="80" stroke="rgba(255,255,255,0.18)" stroke-width="5" stroke-linecap="round"/>
+    <line x1="22" y1="80" x2="26" y2="93" stroke="rgba(255,255,255,0.18)" stroke-width="5" stroke-linecap="round"/>
+    <text x="135" y="130" font-size="8" fill="rgba(255,255,255,0.35)" text-anchor="middle" font-family="Manrope,sans-serif">Физика полёта · импульс · разрушение</text>`);
+
+  const P_WAVES = _svg(`${_grid()}
+    <line x1="0" y1="70" x2="270" y2="70" stroke="rgba(255,255,255,0.13)" stroke-width="1" stroke-dasharray="4,3"/>
+    <path d="M 0,70 C 17,26 33,26 67,70 C 101,114 117,114 135,70 C 153,26 169,26 202,70 C 236,114 252,114 270,70"
+          stroke="#9B5DE5" stroke-width="2" fill="none" opacity="0.7"/>
+    <path d="M 0,70 C 22,18 44,18 90,70 C 136,122 158,122 180,70 C 202,18 224,18 270,70"
+          stroke="#06D6E0" stroke-width="1.5" fill="none" opacity="0.5"/>
+    <path d="M 0,70 C 12,10 28,8 50,40 C 72,72 88,118 112,85 C 136,52 155,18 180,50 C 205,82 240,108 270,70"
+          stroke="#F15BB5" stroke-width="2.5" fill="none" opacity="0.9"/>
+    <text x="135" y="132" font-size="8" fill="rgba(255,255,255,0.35)" text-anchor="middle" font-family="Manrope,sans-serif">v = \u03bbf \u00b7 y = A sin(\u03c9t \u2212 kx) \u00b7 \u0441\u0442\u043e\u044f\u0447\u0438\u0435 \u0432\u043e\u043b\u043d\u044b</text>`);
+
+  const SIMS = [
+    /* ── Математика ── */
+    { id: 'graph', cat: 'math',
+      title: 'График функции',
+      desc: 'Строй графики функций y = f(x) с параметрами, зумом и курсором координат.',
+      preview: P_GRAPH },
+    { id: 'graphtransform', cat: 'math',
+      title: 'Трансформации графиков',
+      desc: 'Наблюдай, как сдвиги, растяжения и отражения меняют вид функции y = a·f(kx+b)+c.',
+      preview: P_TRANSFORM },
+    { id: 'triangle', cat: 'math',
+      title: 'Геометрия треугольника',
+      desc: 'Интерактивный треугольник: медианы, высоты, биссектрисы, вписанная и описанная окружности.',
+      preview: P_TRIANGLE },
+    { id: 'quadratic', cat: 'math',
+      title: 'Корни квадратного уравнения',
+      desc: 'Задай a, b, c ползунками — смотри дискриминант и корни анимированно на числовой оси.',
+      preview: P_QUADRATIC },
+    { id: 'stereo', cat: 'math',
+      title: 'Стереометрия 3D',
+      desc: 'Вращаемые объёмные фигуры: куб, пирамида, цилиндр, конус с формулами объёма и площади. Сечения, развёртка, вписанные/описанные сферы.',
+      preview: P_3D },
+    { id: 'probability', cat: 'math',
+      title: 'Теория вероятностей',
+      desc: 'Подброс монеты/кубика N раз — гистограмма частот и закон больших чисел в действии.',
+      preview: P_PROB },
+    { id: 'trigcircle', cat: 'math',
+      title: 'Тригонометрическая окружность',
+      desc: 'Единичная окружность с sin, cos, tg, ctg. Перетаскивай точку — все функции обновляются мгновенно. График синхронизирован.',
+      preview: P_TRIGCIRCLE },
+    { id: 'normaldist', cat: 'math',
+      title: 'Нормальное распределение',
+      desc: 'Двигай μ и σ ползунками — колокол Гаусса и площадь под кривой обновляются мгновенно.',
+      preview: P_NORMAL },
+    /* ── Физика ── */
+    { id: 'projectile', cat: 'phys',
+      title: 'Бросок тела',
+      desc: 'Задай начальную скорость и угол — симулируй траекторию, дальность и высоту полёта.',
+      preview: P_PROJECTILE },
+    { id: 'pendulum', cat: 'phys',
+      title: 'Маятник',
+      desc: 'Регулируй длину и угол отклонения — изучай период колебаний и затухание.',
+      preview: P_PENDULUM },
+    { id: 'collision', cat: 'phys',
+      title: 'Столкновение шаров',
+      desc: 'Упругий и неупругий удар двух тел: законы сохранения импульса и энергии.',
+      preview: P_COLLISION },
+    { id: 'magnetic', cat: 'phys',
+      title: 'Магнитное поле токов',
+      desc: 'Размести провода с током — наблюдай суперпозицию полей: карта, силовые линии, вектора. Заряженная частица в поле.',
+      preview: P_MAGNETIC },
+    { id: 'circuit', cat: 'phys',
+      title: 'Электрические цепи',
+      desc: 'Конструктор цепей из резисторов и конденсаторов. Законы Ома и Кирхгофа наглядно.',
+      preview: P_CIRCUIT },
+    { id: 'coulomb', cat: 'phys',
+      title: 'Закон Кулона',
+      desc: 'Силовые линии и эквипотенциальные поверхности для системы точечных зарядов.',
+      preview: P_FIELD },
+    { id: 'dynamics', cat: 'phys',
+      title: 'Динамика',
+      desc: 'Законы Ньютона, песочница сил, наклонная плоскость — всё в одном интерактивном модуле.',
+      preview: P_SANDBOX },
+    { id: 'thinlens', cat: 'phys',
+      title: 'Тонкая линза',
+      desc: 'Двигай объект относительно линзы — формула линзы, мнимое и действительное изображение.',
+      preview: P_LENS },
+    { id: 'refraction', cat: 'phys',
+      title: 'Преломление света',
+      desc: 'Луч на границе двух сред: закон Снеллиуса, угол Брюстера, полное внутреннее отражение.',
+      preview: P_REFRACTION },
+    { id: 'mirrors', cat: 'phys',
+      title: 'Зеркала',
+      desc: 'Плоское, вогнутое и выпуклое зеркало: построение изображения тремя главными лучами.',
+      preview: P_MIRROR },
+    { id: 'isoprocess', cat: 'phys',
+      title: 'Изопроцессы',
+      desc: 'PV-диаграмма для четырёх изопроцессов идеального газа. Расчёт работы, теплоты и внутренней энергии.',
+      preview: P_ISOPROCESS },
+    /* ── Химия / Молекулярная физика ── */
+    { id: 'molphys', cat: 'chem',
+      title: 'Молекулярная физика',
+      desc: 'Идеальный газ, броуновское движение, агрегатные состояния и диффузия — всё в одном модуле.',
+      preview: P_GAS },
+    { id: 'chemistry', cat: 'chem',
+      title: 'Химические реакции',
+      desc: 'Кинетика реакций, металл + кислота в колбе, ОВР с переносом электронов, ионный обмен — всё в одном модуле.',
+      preview: P_KINETICS },
+    { id: 'equilibrium', cat: 'chem',
+      title: 'Химическое равновесие',
+      desc: 'Прямая и обратная реакция, принцип Ле Шателье: изменяй T, P, концентрацию и наблюдай сдвиг.',
+      preview: P_EQUILIBRIUM },
+    { id: 'electrolysis', cat: 'chem',
+      title: 'Электролиз',
+      desc: 'Катод и анод в растворе электролита: движение ионов, выделение газа, закон Фарадея.',
+      preview: P_ELECTROLYSIS },
+    /* ── Скоро: Атомная структура ── */
+    { id: 'bohratom', cat: 'chem',
+      title: 'Атом Бора',
+      desc: 'Электроны на орбитах, квантование энергии, эмиссия и поглощение фотонов при переходах.',
+      preview: P_BOHR },
+    { id: 'orbitals', cat: 'chem',
+      title: 'Молекулярные орбитали',
+      desc: 'H₂, H₂O — ковалентная связь, перекрывание орбиталей, 3D-визуализация электронных облаков.',
+      preview: P_ORBITALS },
+    /* ── Скоро: Визуальная химия ── */
+    { id: 'titration', cat: 'chem',
+      title: 'pH и кривая титрования',
+      desc: 'Добавляй кислоту или щёлочь — наблюдай изменение pH, цвет раствора и кривую нейтрализации.',
+      preview: P_PH },
+    { id: 'chemsandbox', cat: 'chem',
+      title: 'Химическая песочница',
+      desc: 'Смешивай реагенты, наблюдай реакции: осадки, газы, изменение цвета. Свободное экспериментирование.',
+      preview: P_CHEMSANDBOX },
+    { id: 'crystal', cat: 'chem',
+      title: 'Кристаллическая решётка',
+      desc: 'NaCl, алмаз, металл — интерактивная 3D-решётка, типы связей, вращение структуры.',
+      preview: P_CRYSTAL },
+    /* ── Биология ── */
+    { id: 'celldivision', cat: 'bio',
+      title: 'Деление клетки',
+      desc: 'Митоз и мейоз: анимированные фазы, хромосомы, веретено деления, ядерная оболочка.',
+      preview: P_CELLDIVISION },
+    { id: 'photosynthesis', cat: 'bio',
+      title: 'Фотосинтез и дыхание',
+      desc: 'Световые реакции в тилакоидах, цикл Кальвина, митохондриальное дыхание — молекулярная анимация.',
+      preview: P_PHOTOSYNTHESIS },
+
+    /* ── Игры ── */
+    { id: 'angrybirds', cat: 'game',
+      title: 'Angry Birds Physics',
+      desc: 'Запускай птиц из рогатки, разрушай блоки, побеждай свиней. Реальная физика: гравитация, ветер, импульс. 6 уровней.',
+      preview: P_ANGRYBIRDS },
+    /* ── Физика: Волны ── */
+    { id: 'waves', cat: 'phys',
+      title: 'Волны и звук',
+      desc: 'Поперечные и продольные волны, суперпозиция, стоячие волны. Частота, амплитуда, фаза, гармоники.',
+      preview: P_WAVES },
+  ];
+
+  /* ════════════════════════════════
+     GRAPH SIMULATOR
+  ════════════════════════════════ */
+  const FN_COLORS = ['#9B5DE5', '#06D6E0', '#F15BB5'];
+  let gSim = null;
+  let pSim = null;
+  let cSim = null;
+  let tSim = null;
+  let mSim = null;
+  let gasSim = null;
+  let brownSim = null;
+  let statesSim = null;
+  let diffSim = null;
+  let rdxSim  = null;
+  let ioxSim  = null;
+  let chemSandSim = null;
+  let cellDivSim  = null;
+  let photosynSim = null;
+  let quadSim = null;
+  let eqSim = null;
+  let lensSim = null;
+  let titrSim = null;
+  let refrSim = null;
+  let probSim = null;
+  let bohrSim = null;
+  let elecSim = null;
+  let wavesSim = null;
+
+  const ALL_SIM_BODIES = ['sim-graph','sim-proj','sim-coll','sim-tri','sim-trigcircle','sim-mag',
+                          'sim-molphys',
+                          'sim-coulomb','sim-circuit','sim-chemistry','sim-dynamics',
+                          'sim-crystal','sim-orbitals','sim-stereo','sim-chemsandbox',
+                          'sim-celldivision','sim-photosynthesis','sim-angrybirds',
+                          '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'];
+  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'];
+
+  /* ── sim routing ── */
+
+  function openSim(id) {
+    if (_disabledSimIds.has(id.split(':')[0])) return;
+    document.getElementById('lab-home').style.display = 'none';
+    document.getElementById('lab-sim').classList.add('open');
+
+    // hide all inner bodies + controls
+    ALL_SIM_BODIES.forEach(bid => document.getElementById(bid).style.display = 'none');
+    ALL_CTRL_BARS.forEach(bid  => document.getElementById(bid).style.display = 'none');
+
+    // load theory for this sim
+    loadTheory(id.includes(':') ? id.split(':')[0] : id);
+
+    if (id === 'graph')      _openGraph();
+    if (id === 'projectile') _openProjectile();
+    if (id === 'collision')  _openCollision();
+    if (id === 'triangle')   _openTriangle();
+    if (id === 'trigcircle') _openTrigCircle();
+    if (id === 'magnetic')   _openMagnetic();
+    if (id === 'molphys')    _openMolPhys();
+    if (id.startsWith('molphys:')) { _openMolPhys(id.split(':')[1]); }
+    if (id === 'coulomb')    _openCoulomb();
+    if (id === 'circuit')    _openCircuit();
+    if (id === 'chemistry')    _openChemistry();
+    if (id.startsWith('chemistry:')) { _openChemistry(id.split(':')[1]); }
+    if (id === 'dynamics')     _openDynamics();
+    if (id.startsWith('dynamics:')) { _openDynamics(id.split(':')[1]); }
+    if (id === 'crystal')      _openCrystal();
+    if (id === 'orbitals')     _openOrbitals();
+    if (id === 'stereo')       _openStereo();
+    if (id === 'chemsandbox')    _openChemSandbox();
+    if (id === 'celldivision')   _openCellDivision();
+    if (id === 'photosynthesis') _openPhotosynthesis();
+    if (id === 'angrybirds')     _openAngryBirds();
+    if (id === 'quadratic')      _openQuadratic();
+    if (id === 'normaldist')     _openNormalDist();
+    if (id === 'graphtransform') _openGraphTransform();
+    if (id === 'pendulum')       _openPendulum();
+    if (id === 'equilibrium')    _openEquilibrium();
+    if (id === 'thinlens')       _openThinLens();
+    if (id === 'mirrors')        _openMirror();
+    if (id === 'isoprocess')     _openIsoprocess();
+    if (id === 'titration')      _openTitration();
+    if (id === 'refraction')     _openRefraction();
+    if (id === 'probability')    _openProbability();
+    if (id === 'bohratom')       _openBohrAtom();
+    if (id === 'electrolysis')   _openElectrolysis();
+    if (id === 'waves')          _openWaves();
+  }
+
+  function _simShow(elId) {
+    // restore display:flex (overrides the display:none set above)
+    document.getElementById(elId).style.display = 'flex';
+  }
+
+  /* ── Touch-to-mouse bridge + ResizeObserver for canvas simulations ── */
+  function _addTouchSupport(canvas, sim) {
+    let _tx0 = 0, _ty0 = 0, _tyLast = 0, _isScroll = false;
+    function _syn(t) { return { clientX: t.clientX, clientY: t.clientY, button: 0 }; }
+    canvas.addEventListener('touchstart', function(e) {
+      e.preventDefault();
+      const t = e.changedTouches[0];
+      _tx0 = t.clientX; _ty0 = t.clientY; _tyLast = t.clientY; _isScroll = false;
+      if (sim.handleMouseDown) sim.handleMouseDown(_syn(t));
+      // if no drag started (touched empty area), treat as scroll gesture
+      if (!sim._drag) _isScroll = true;
+    }, { passive: false });
+    canvas.addEventListener('touchmove', function(e) {
+      e.preventDefault();
+      const t = e.changedTouches[0];
+      if (_isScroll && sim.handleWheel) {
+        const dy = _tyLast - t.clientY;
+        sim.handleWheel({ clientY: t.clientY, deltaY: dy * 2, preventDefault: function(){} });
+      } else if (sim.handleMouseMove) {
+        sim.handleMouseMove(_syn(t));
+      }
+      _tyLast = t.clientY;
+    }, { passive: false });
+    canvas.addEventListener('touchend', function(e) {
+      e.preventDefault();
+      const t = e.changedTouches[0];
+      const dist = Math.hypot(t.clientX - _tx0, t.clientY - _ty0);
+      if (sim.handleMouseUp) sim.handleMouseUp(_syn(t));
+      if (dist < 10 && sim.handleClick) sim.handleClick(_syn(t));
+      _isScroll = false;
+    }, { passive: false });
+    canvas.addEventListener('touchcancel', function(e) {
+      if (e.changedTouches[0] && sim.handleMouseUp) sim.handleMouseUp(_syn(e.changedTouches[0]));
+      _isScroll = false;
+    }, { passive: false });
+    // ResizeObserver: refit canvas on orientation change / resize
+    if (window.ResizeObserver && sim.fit) {
+      const ro = new ResizeObserver(function() {
+        sim.fit();
+        if (sim.draw) sim.draw();
+      });
+      ro.observe(canvas.parentElement || canvas);
+    }
+  }
+
+  function closeSim() {
+    if (pSim) pSim.pause();
+    if (cSim) cSim.pause();
+    if (mSim && mSim.particleOn) mSim.toggleParticle();
+    if (gasSim)    gasSim.stop();
+    if (brownSim)  brownSim.stop();
+    if (statesSim) statesSim.stop();
+    if (diffSim)   diffSim.stop();
+    if (cirSim)    cirSim.destroy();
+    if (reacSim)  reacSim.stop();
+    if (flaskSim) flaskSim.stop();
+    if (rdxSim)   rdxSim.stop();
+    if (ioxSim)   ioxSim.stop();
+    if (newtonSim)  newtonSim.stop();
+    if (sandboxSim) sandboxSim.destroy();
+    if (crystalSim)   crystalSim.stop();
+    if (orbitalsSim)  orbitalsSim.stop();
+    if (stereoSim)    stereoSim.stop();
+    if (chemSandSim)  chemSandSim.stop();
+    if (cellDivSim)    cellDivSim.stop();
+    if (photosynSim)   photosynSim.stop();
+    if (angryBirdsSim) angryBirdsSim.stop();
+    if (trigSim)      trigSim.stop();
+    if (pendSim)      pendSim.stop();
+    if (eqSim)        eqSim.stop();
+    if (titrSim)      titrSim.stop();
+    if (probSim)      probSim.stop();
+    if (bohrSim)      bohrSim.stop();
+    if (elecSim)      elecSim.stop();
+    if (wavesSim)     wavesSim.stop();
+    // tSim, csSim, quadSim, ndSim, gtSim, lensSim, refrSim have no animation loops — nothing to stop
+    document.getElementById('stereo-stats').style.display = 'none';
+    document.getElementById('lab-sim').classList.remove('open');
+    document.getElementById('lab-home').style.display = '';
+    // close theory panel
+    _theoryOpen = false;
+    document.getElementById('theory-panel').classList.remove('open');
+    if (window.lucide) lucide.createIcons();
+  }
+
+  /* ── graph ── */
+
+  function _openGraph() {
+    document.getElementById('sim-topbar-title').textContent = 'График функции';
+    _simShow('sim-graph');
+    _simShow('ctrl-graph');
+
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      if (!gSim) {
+        gSim = new GraphSim(document.getElementById('graph-canvas'));
+        gSim.onHover = updateInfoBar;
+        if (!document.getElementById('fn0').value.trim()) {
+          document.getElementById('fn0').value = 'sin(x)';
+          renderPreview(0);
+          gSim.fit();
+          gSim.setFn(0, 'sin(x)', FN_COLORS[0]);
+          return;
+        }
+      }
+      gSim.fit();
+      gSim.draw();
+    }));
+  }
+
+  /* ── projectile ── */
+
+  function _openProjectile() {
+    document.getElementById('sim-topbar-title').textContent = 'Бросок тела';
+    _simShow('sim-proj');
+    _simShow('ctrl-proj');
+
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      if (!pSim) {
+        pSim = new ProjectileSim(document.getElementById('proj-canvas'));
+        pSim.onUpdate   = _projUpdateUI;
+        pSim.onPlayPause = projPlayPause;
+      }
+      pSim.fit();
+      projParam();       // sync sliders <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> sim
+      pSim.draw();
+      _projUpdateUI(pSim.stats());
+    }));
+  }
+
+  function projPlayPause() {
+    if (!pSim) return;
+    if (pSim.playing) {
+      pSim.pause();
+    } else {
+      pSim.play();
+    }
+    _projSyncPlayBtn();
+  }
+
+  function _projSyncPlayBtn() {
+    /* small topbar button */
+    const tb = document.getElementById('proj-play-btn');
+    /* big launch button */
+    const lb = document.getElementById('proj-launch-main');
+    const lbl = document.getElementById('proj-launch-label');
+    const lic = document.getElementById('proj-launch-icon');
+    if (!pSim) return;
+
+    const tf      = pSim._curTFlight();
+    const done    = !pSim.playing && pSim.t >= tf && pSim.t > 0;
+    const playing = pSim.playing;
+
+    /* topbar */
+    if (tb) {
+      tb.innerHTML = playing
+        ? '<svg viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>'
+        : '<svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>';
+      tb.title = playing ? 'Пауза' : 'Запустить';
+      tb.classList.toggle('active', playing);
+    }
+
+    /* big button */
+    if (lb && lbl && lic) {
+      lb.classList.toggle('paused', playing);
+      lb.classList.toggle('done',   done && !playing);
+      if (playing) {
+        lic.innerHTML = '<rect x="5" y="3" width="4" height="18"/><rect x="15" y="3" width="4" height="18"/>';
+        lbl.textContent = 'Пауза';
+      } else if (done) {
+        lic.innerHTML = '<polygon points="5 3 19 12 5 21 5 3"/>';
+        lbl.textContent = 'Повторить';
+      } else {
+        lic.innerHTML = '<polygon points="5 3 19 12 5 21 5 3"/>';
+        lbl.textContent = 'Запустить';
+      }
+    }
+  }
+
+  function projParam() {
+    const v0    = +document.getElementById('sl-v0').value;
+    const angle = +document.getElementById('sl-angle').value;
+    const h0    = +document.getElementById('sl-h0').value;
+    const g     = +document.getElementById('sl-g').value;
+
+    document.getElementById('p-v0').textContent    = v0 + ' м/с';
+    document.getElementById('p-angle').textContent = angle + '°';
+    document.getElementById('p-h0').textContent    = h0 + ' м';
+    document.getElementById('p-g').textContent     = g.toFixed(2) + ' м/с²';
+
+    if (pSim) { pSim.setParams({ v0, angle, h0, g }); _projSyncPlayBtn(); }
+  }
+
+  function projPreset(v0, angle, h0, g) {
+    document.getElementById('sl-v0').value    = v0;
+    document.getElementById('sl-angle').value = angle;
+    document.getElementById('sl-h0').value    = h0;
+    document.getElementById('sl-g').value     = g;
+    projParam();
+  }
+
+  function projToggleDrag(rowEl) {
+    if (!pSim) return;
+    pSim.drag = !pSim.drag;
+    const on = pSim.drag;
+    rowEl.classList.toggle('active', on);
+    const tog = document.getElementById('drag-toggle');
+    tog.style.background = on ? 'var(--violet)' : 'rgba(255,255,255,0.12)';
+    tog.querySelector('span').style.marginLeft = on ? '14px' : '2px';
+    document.getElementById('drag-params').style.display = on ? '' : 'none';
+    document.getElementById('ps-loss-wrap').style.display = on ? '' : 'none';
+    if (on) {
+      const cd   = +document.getElementById('sl-cd').value / 100;
+      const mass = +document.getElementById('sl-mass').value;
+      pSim.setParams({ drag: true, Cd: cd, mass });
+    } else {
+      pSim.setParams({ drag: false });
+    }
+  }
+
+  function projCdChange() {
+    const cd = +document.getElementById('sl-cd').value / 100;
+    document.getElementById('p-cd').textContent = cd.toFixed(2);
+    if (pSim) pSim.setParams({ Cd: cd });
+  }
+
+  function projMassChange() {
+    const mass = +document.getElementById('sl-mass').value;
+    document.getElementById('p-mass').textContent = mass + ' кг';
+    if (pSim) pSim.setParams({ mass });
+  }
+
+  function projWindChange() {
+    const wind = +document.getElementById('sl-wind').value;
+    const label = wind === 0 ? '0 м/с' : (wind > 0 ? '<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> +' : '<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> ') + Math.abs(wind) + ' м/с';
+    document.getElementById('p-wind').textContent = label;
+    document.getElementById('ps-loss-wrap').style.display = wind !== 0 ? '' : (pSim && pSim.drag ? '' : 'none');
+    if (pSim) { pSim.setParams({ wind }); _projSyncPlayBtn(); }
+  }
+
+  function projToggleBounce(rowEl) {
+    if (!pSim) return;
+    pSim.bounce = !pSim.bounce;
+    const on = pSim.bounce;
+    rowEl.classList.toggle('active', on);
+    const tog = document.getElementById('bounce-toggle');
+    tog.style.background = on ? 'rgba(123,245,164,0.8)' : 'rgba(255,255,255,0.12)';
+    tog.querySelector('span').style.marginLeft = on ? '14px' : '2px';
+    document.getElementById('bounce-params').style.display = on ? '' : 'none';
+    const e = +document.getElementById('sl-restitution').value / 100;
+    pSim.setParams({ bounce: on, restitution: e });
+  }
+
+  function projRestitutionChange() {
+    const e = +document.getElementById('sl-restitution').value / 100;
+    document.getElementById('p-restitution').textContent = e.toFixed(2);
+    if (pSim) pSim.setParams({ restitution: e });
+  }
+
+  function projSetSpeed(s, el) {
+    if (pSim) pSim.setSpeed(s);
+    document.querySelectorAll('.proj-speed').forEach(b => b.classList.remove('active'));
+    if (el) el.classList.add('active');
+  }
+
+  function projSaveGhost() {
+    if (pSim) pSim.saveGhost();
+  }
+
+  function projClearGhosts() {
+    if (pSim) pSim.clearGhosts();
+  }
+
+  function _projUpdateUI(s) {
+    const fmt = (n, unit) => n < 10000 ? n.toFixed(2) + ' ' + unit : (n/1000).toFixed(2) + ' к' + unit;
+    document.getElementById('ps-range').textContent  = fmt(s.range, 'м');
+    document.getElementById('ps-hmax').textContent   = fmt(s.hMax,  'м');
+    document.getElementById('ps-tf').textContent     = s.tf.toFixed(2) + ' с';
+    document.getElementById('ps-vland').textContent  = fmt(s.vLand, 'м/с');
+    document.getElementById('ps-t').textContent      = s.t.toFixed(2) + ' с';
+    const laEl = document.getElementById('ps-land-angle');
+    if (laEl) laEl.textContent = s.landAngle > 0.5 ? s.landAngle.toFixed(1) + '°' : '—';
+    if (s.hasMod) {
+      const lossEl = document.getElementById('ps-loss');
+      if (lossEl) {
+        const sign = s.rangeLoss > 0 ? '+' : '';
+        lossEl.textContent  = s.rangeLoss !== 0 ? sign + s.rangeLoss + '%' : '0%';
+        lossEl.style.color  = s.rangeLoss < 0 ? '#EF476F' : '#7BF5A4';
+      }
+    }
+    _projSyncPlayBtn();
+  }
+
+  /* ── collision ── */
+
+  function _openCollision() {
+    document.getElementById('sim-topbar-title').textContent = 'Столкновение шаров';
+    _simShow('sim-coll');
+    _simShow('ctrl-coll');
+
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      if (!cSim) {
+        cSim = new CollisionSim(document.getElementById('coll-canvas'));
+        cSim.onUpdate    = _collUpdateUI;
+        cSim.onPlayPause = collPlayPause;
+      }
+      cSim.fit();
+      cSim.setSpeed(+document.getElementById('sl-speed').value);
+      collParam();
+      cSim.draw();
+      _collUpdateUI(cSim.stats());
+    }));
+  }
+
+  function collPlayPause() {
+    if (!cSim) return;
+    if (cSim.playing) { cSim.pause(); } else { cSim.play(); }
+    _collSyncBtn();
+  }
+
+  function _collSyncBtn() {
+    const tb  = document.getElementById('coll-play-btn');
+    const lb  = document.getElementById('coll-launch-main');
+    const lbl = document.getElementById('coll-launch-label');
+    const lic = document.getElementById('coll-launch-icon');
+    if (!cSim) return;
+    const playing = cSim.playing;
+
+    if (tb) {
+      tb.innerHTML = playing
+        ? '<svg viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>'
+        : '<svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>';
+      tb.title = playing ? 'Пауза' : 'Запустить';
+      tb.classList.toggle('active', playing);
+    }
+
+    if (lb && lbl && lic) {
+      lb.classList.toggle('paused', playing);
+      lb.classList.remove('done');
+      if (playing) {
+        lic.innerHTML = '<rect x="5" y="3" width="4" height="18"/><rect x="15" y="3" width="4" height="18"/>';
+        lbl.textContent = 'Пауза';
+      } else {
+        lic.innerHTML = '<polygon points="5 3 19 12 5 21 5 3"/>';
+        lbl.textContent = 'Запустить';
+      }
+    }
+  }
+
+  function collParam() {
+    const m1    = +document.getElementById('sl-m1').value;
+    const m2    = +document.getElementById('sl-m2').value;
+    const v1    = +document.getElementById('sl-cv1').value;
+    const v2    = +document.getElementById('sl-cv2').value;
+    const angle = +document.getElementById('sl-cangle').value;
+    const e     = +document.getElementById('sl-e').value;
+    const spd   = +document.getElementById('sl-speed').value;
+
+    document.getElementById('c-m1').textContent    = m1 + ' кг';
+    document.getElementById('c-m2').textContent    = m2 + ' кг';
+    document.getElementById('c-v1').textContent    = v1 + ' м/с';
+    document.getElementById('c-v2').textContent    = v2 + ' м/с';
+    document.getElementById('c-angle').textContent = angle + '°';
+    document.getElementById('c-e').textContent     = e.toFixed(2);
+    document.getElementById('c-speed').textContent = spd.toFixed(2) + '×';
+
+    if (cSim) {
+      /* speed change doesn't require a reset */
+      const speedChanged = Math.abs(cSim.speed - spd) > 0.001;
+      if (speedChanged) cSim.setSpeed(spd);
+
+      const physChanged = cSim.m1 !== m1 || cSim.m2 !== m2 ||
+                          cSim.v1 !== v1 || cSim.v2 !== v2 ||
+                          cSim.angle !== angle || cSim.e !== e;
+      if (physChanged) cSim.setParams({ m1, m2, v1, v2, angle, e });
+      _collSyncBtn();
+    }
+  }
+
+  function collPreset(m1, m2, v1, v2, angle, e) {
+    document.getElementById('sl-m1').value     = m1;
+    document.getElementById('sl-m2').value     = m2;
+    document.getElementById('sl-cv1').value    = v1;
+    document.getElementById('sl-cv2').value    = v2;
+    document.getElementById('sl-cangle').value = angle;
+    document.getElementById('sl-e').value      = e;
+    collParam();
+  }
+
+  function _collUpdateUI(s) {
+    // before/after are arrays [{m, vx, vy, ke}, ...]
+    function snapKE(arr) { return arr ? arr.reduce((t, b) => t + b.ke, 0) : null; }
+    function snapP(arr)  {
+      if (!arr) return null;
+      return Math.hypot(arr.reduce((t, b) => t + b.m * b.vx, 0),
+                        arr.reduce((t, b) => t + b.m * b.vy, 0));
+    }
+    const bKE = snapKE(s.before), bP = snapP(s.before);
+    const aKE = snapKE(s.after),  aP = snapP(s.after);
+    const f2 = v => v !== null ? v.toFixed(2) : '—';
+
+    document.getElementById('cs-pbefore').textContent  = bP  !== null ? f2(bP)  + ' кг·м/с' : '—';
+    document.getElementById('cs-pafter').textContent   = aP  !== null ? f2(aP)  + ' кг·м/с' : '—';
+    document.getElementById('cs-kebefore').textContent = bKE !== null ? f2(bKE) + ' Дж'      : '—';
+    document.getElementById('cs-keafter').textContent  = aKE !== null ? f2(aKE) + ' Дж'      : '—';
+    document.getElementById('cs-count').textContent    = s.colCount;
+    _collSyncBtn();
+  }
+
+  /* ── magnetic ── */
+
+  function _openMagnetic() {
+    document.getElementById('sim-topbar-title').textContent = 'Магнитное поле токов';
+    _simShow('sim-mag');
+    _simShow('ctrl-mag');
+
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      if (!mSim) {
+        mSim = new MagneticSim(document.getElementById('mag-canvas'));
+        mSim.onUpdate = _magUpdateUI;
+      }
+      mSim.fit();
+      // default preset on first open
+      if (mSim.sources.length === 0) mSim.preset('anti');
+      _magUpdateUI(mSim.info());
+    }));
+  }
+
+  function magMode(dir) {
+    if (!mSim) return;
+    mSim.addMode = dir;
+    document.getElementById('mag-add-out').classList.toggle('active', dir === 'out');
+    document.getElementById('mag-add-in').classList.toggle('active', dir === 'in');
+    document.getElementById('mag-mode-out').classList.toggle('active', dir === 'out');
+    document.getElementById('mag-mode-in').classList.toggle('active', dir === 'in');
+  }
+
+  function magCurrentChange() {
+    const I = +document.getElementById('sl-curI').value;
+    document.getElementById('m-curI').textContent  = I + ' А';
+    document.getElementById('mbar-I').textContent  = I + ' А';
+    if (mSim) mSim.setCurrentAll(I);
+  }
+
+  function magLayer(name, rowEl) {
+    if (!mSim) return;
+    mSim.layers[name] = !mSim.layers[name];
+    rowEl.classList.toggle('active', mSim.layers[name]);
+    mSim._invalidateCache();
+    mSim.draw();
+  }
+
+  function magParticle(rowEl) {
+    if (!mSim) return;
+    mSim.toggleParticle();
+    rowEl.classList.toggle('active', mSim.particleOn);
+    _magUpdateUI(mSim.info());
+  }
+
+  function magCondToggle(rowEl) {
+    if (!mSim) return;
+    mSim.toggleConductor();
+    const on = mSim._cond.on;
+    rowEl.classList.toggle('active', on);
+    document.getElementById('cond-I-block').style.display = on ? '' : 'none';
+    _magUpdateUI(mSim.info());
+  }
+
+  function magCondCurrentChange() {
+    if (!mSim) return;
+    const I = parseFloat(document.getElementById('sl-condI').value);
+    document.getElementById('m-condI').textContent = I + ' А';
+    mSim.setConductorI(I);
+  }
+
+  function magFluxToggle(rowEl) {
+    if (!mSim) return;
+    mSim.toggleFlux();
+    rowEl.classList.toggle('active', mSim._flux.on);
+    _magUpdateUI(mSim.info());
+  }
+
+  function _magUpdateUI(info) {
+    document.getElementById('ms-out').textContent    = info.out;
+    document.getElementById('ms-in').textContent     = info.inn;
+    document.getElementById('mbar-total').textContent = info.total;
+    document.getElementById('mbar-out').textContent  = info.out;
+    document.getElementById('mbar-in').textContent   = info.inn;
+    document.getElementById('mbar-particle').textContent = info.particleOn ? 'вкл' : 'выкл';
+    document.getElementById('mbar-particle').style.color = info.particleOn ? '#ffff50' : '';
+    // Ampere force
+    const fEl = document.getElementById('mbar-ampere');
+    if (info.condOn && info.Fz !== 0) {
+      const dir = info.Fz > 0 ? '⊙' : '⊗';
+      fEl.textContent = dir + ' ' + Math.abs(info.Fz).toFixed(3);
+      fEl.style.color = '#fbbf24';
+    } else {
+      fEl.textContent = '—';
+      fEl.style.color = '#fbbf24';
+    }
+    // Flux
+    const phEl = document.getElementById('mbar-flux');
+    if (info.fluxOn) {
+      phEl.textContent = info.flux.toExponential(2) + ' Вб';
+      phEl.style.color = '#34d399';
+    } else {
+      phEl.textContent = '—';
+      phEl.style.color = '#34d399';
+    }
+  }
+
+  /* ── triangle ── */
+
+  function _openTriangle() {
+    document.getElementById('sim-topbar-title').textContent = 'Геометрия треугольника';
+    _simShow('sim-tri');
+    _simShow('ctrl-tri');
+
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      if (!tSim) {
+        tSim = new TriangleSim(document.getElementById('tri-canvas'));
+        tSim.onUpdate = _triUpdateUI;
+      }
+      tSim.fit();
+      tSim.draw();
+      _triUpdateUI(tSim.stats());
+    }));
+  }
+
+  function triToggle(layer, rowEl) {
+    if (!tSim) return;
+    tSim.toggleLayer(layer);
+    rowEl.classList.toggle('active', tSim.layers[layer]);
+  }
+
+  function _triUpdateUI(s) {
+    const f2 = v => v.toFixed(2);
+    const deg = v => v.toFixed(1) + '°';
+    const unit = v => f2(v) + ' ед';
+
+    // panel
+    document.getElementById('ts-a').textContent = unit(s.a);
+    document.getElementById('ts-b').textContent = unit(s.b);
+    document.getElementById('ts-c').textContent = unit(s.c);
+    document.getElementById('ts-A').textContent = deg(s.A);
+    document.getElementById('ts-B').textContent = deg(s.B);
+    document.getElementById('ts-C').textContent = deg(s.C);
+    document.getElementById('ts-S').textContent = f2(s.S) + ' ед²';
+    document.getElementById('ts-P').textContent = unit(s.perim);
+    document.getElementById('ts-R').textContent = unit(s.R);
+    document.getElementById('ts-r').textContent = unit(s.r);
+    document.getElementById('ts-type').textContent = s.type;
+
+    // stats bar
+    document.getElementById('tbar-a').textContent = unit(s.a);
+    document.getElementById('tbar-b').textContent = unit(s.b);
+    document.getElementById('tbar-c').textContent = unit(s.c);
+    document.getElementById('tbar-S').textContent = f2(s.S) + ' ед²';
+    document.getElementById('tbar-P').textContent = unit(s.perim);
+    document.getElementById('tbar-Rr').textContent = f2(s.R) + ' / ' + f2(s.r);
+  }
+
+  /* ── trig circle ── */
+
+  let trigSim = null;
+
+  function _openTrigCircle() {
+    document.getElementById('sim-topbar-title').textContent = 'Тригонометрическая окружность';
+    _simShow('sim-trigcircle');
+    _simShow('ctrl-trigcircle');
+
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      if (!trigSim) {
+        trigSim = new TrigCircleSim(document.getElementById('trigcircle-canvas'));
+        trigSim.onUpdate = _trigUpdateUI;
+      }
+      trigSim.fit();
+      trigSim.start();
+      _trigUpdateUI(trigSim.stats());
+    }));
+  }
+
+  function trigToggle(layer, rowEl) {
+    if (!trigSim) return;
+    const isActive = rowEl.classList.toggle('active');
+    trigSim.toggleLayer(layer, isActive);
+  }
+
+  function trigSetGraphFn(fn, el) {
+    if (!trigSim) return;
+    document.querySelectorAll('.trig-fn-btn').forEach(b => b.classList.remove('active'));
+    el.classList.add('active');
+    trigSim.setGraphFn(fn);
+  }
+
+  function trigGoTo(rad) {
+    if (!trigSim) return;
+    trigSim.goToAngle(rad);
+  }
+
+  function trigReset() {
+    if (!trigSim) return;
+    trigSim.setAngle(Math.PI / 4);
+  }
+
+  function _trigUpdateUI(s) {
+    const _f = v => {
+      if (v === undefined) return '—';
+      const a = Math.abs(v), sg = v < 0 ? '−' : '';
+      if (a < 5e-4) return '0';
+      if (Math.abs(a - 0.5) < 1e-3)            return sg + '½';
+      if (Math.abs(a - 1) < 1e-3)              return sg + '1';
+      if (Math.abs(a - Math.SQRT2/2) < 1e-3)   return sg + '√2/2';
+      if (Math.abs(a - Math.sqrt(3)/2) < 1e-3) return sg + '√3/2';
+      if (Math.abs(a - Math.sqrt(3)/3) < 1e-3) return sg + '√3/3';
+      if (Math.abs(a - Math.sqrt(3)) < 1e-3)   return sg + '√3';
+      return v.toFixed(4);
+    };
+    const degStr = s.deg.toFixed(1) + '°';
+
+    // Panel values (nice fractions)
+    document.getElementById('trig-v-sin').textContent = _f(s.sin);
+    document.getElementById('trig-v-cos').textContent = _f(s.cos);
+    document.getElementById('trig-v-tan').textContent = _f(s.tan);
+    document.getElementById('trig-v-cot').textContent = _f(s.cot);
+
+    // Angle badge
+    document.getElementById('trig-angle-badge').innerHTML =
+      `${degStr} = ${s.radLabel}<br><span style="font-size:0.72rem;opacity:0.6">${s.angle.toFixed(4)} рад</span>`;
+
+    // Stats bar (nice fractions)
+    document.getElementById('trigbar-angle').textContent = degStr;
+    document.getElementById('trigbar-sin').textContent = _f(s.sin);
+    document.getElementById('trigbar-cos').textContent = _f(s.cos);
+    document.getElementById('trigbar-tan').textContent = _f(s.tan);
+    document.getElementById('trigbar-cot').textContent = _f(s.cot);
+    document.getElementById('trigbar-quad').textContent = ['I', 'II', 'III', 'IV'][s.quadrant - 1];
+  }
+
+  /* ── KaTeX live preview ── */
+
+  /** Convert user ascii expression <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> LaTeX string for KaTeX preview */
+  function toLatex(expr) {
+    if (!expr) return '';
+    return expr
+      // strip leading y= if typed
+      .replace(/^\s*y\s*=\s*/i, '')
+      // inverse trig (before sin/cos/tan)
+      .replace(/\barcsin\b/g, '\\arcsin').replace(/\barccos\b/g, '\\arccos')
+      .replace(/\b(arctan|arctg|atan|acos|asin)\b/g,  (_, w) =>
+        w === 'asin' ? '\\arcsin' : w === 'acos' ? '\\arccos' : '\\arctan')
+      // trig
+      .replace(/\bctg\b/g, '\\cot').replace(/\btg\b/g, '\\tan')
+      .replace(/\b(sin|cos|tan)\b/g, '\\$1')
+      // log / exp
+      .replace(/\bln\b/g, '\\ln').replace(/\blog2\b/g, '\\log_2')
+      .replace(/\blog\b/g, '\\log').replace(/\bexp\b/g, '\\exp')
+      // special functions: f(inner) <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> LaTeX form
+      .replace(/\bsqrt\(([^()]*)\)/g,  '\\sqrt{$1}')
+      .replace(/\babs\(([^()]*)\)/g,   '\\left|$1\\right|')
+      .replace(/\bfloor\(([^()]*)\)/g, '\\lfloor $1 \\rfloor')
+      .replace(/\bceil\(([^()]*)\)/g,  '\\lceil $1 \\rceil')
+      .replace(/\b(round|sign)\b/g,    '\\operatorname{$1}')
+      // constants
+      .replace(/\bpi\b/gi, '\\pi')
+      // power: wrap exponent in braces for multi-char
+      .replace(/\^(-?\d{2,})/g, '^{$1}')
+      // clean up multiplication
+      .replace(/([0-9])\s*\*\s*([a-zA-Z\\])/g, '$1\\,$2')
+      .replace(/\*/g, '\\cdot ');
+  }
+
+  function renderPreview(idx) {
+    const inp  = document.getElementById('fn' + idx);
+    const prev = document.getElementById('fn' + idx + '-prev');
+    const raw  = inp?.value?.trim() || '';
+    if (!raw || typeof katex === 'undefined') {
+      prev.innerHTML = ''; prev.classList.remove('has-content'); return;
+    }
+    try {
+      prev.innerHTML = katex.renderToString(toLatex(raw), {
+        throwOnError: false, strict: false, displayMode: false,
+      });
+      prev.classList.add('has-content');
+    } catch { prev.innerHTML = ''; prev.classList.remove('has-content'); }
+  }
+
+  /* debounced formula update */
+  const _debounce = {};
+  function updateFn(idx) {
+    clearTimeout(_debounce[idx]);
+    renderPreview(idx); // instant preview
+    _debounce[idx] = setTimeout(() => {
+      if (!gSim) return;
+      const raw = document.getElementById('fn' + idx).value;
+      const val = raw.replace(/^\s*y\s*=\s*/i, '');
+      const err = gSim.setFn(idx, val, FN_COLORS[idx]);
+      const errEl = document.getElementById('fn' + idx + '-err');
+      errEl.classList.toggle('show', !!err && !!val.trim());
+    }, 350);
+  }
+
+  function applyPreset(expr) {
+    for (let i = 0; i < 3; i++) {
+      const inp = document.getElementById('fn' + i);
+      if (!inp.value.trim()) {
+        inp.value = expr; updateFn(i); inp.focus(); return;
+      }
+    }
+    document.getElementById('fn0').value = expr; updateFn(0);
+  }
+
+  function clearAll() {
+    for (let i = 0; i < 3; i++) {
+      document.getElementById('fn' + i).value = '';
+      document.getElementById('fn' + i + '-prev').innerHTML = '';
+      document.getElementById('fn' + i + '-prev').classList.remove('has-content');
+      document.getElementById('fn' + i + '-err').classList.remove('show');
+      if (gSim) gSim.setFn(i, '', FN_COLORS[i]);
+    }
+  }
+
+  /* hover info bar */
+  function fmtVal(v) {
+    if (v === null || v === undefined) return '—';
+    if (!isFinite(v)) return '∞';
+    const abs = Math.abs(v);
+    if (abs === 0) return '0';
+    if (abs < 0.001 || abs >= 1e6) return v.toExponential(3);
+    return parseFloat(v.toPrecision(6)).toString();
+  }
+
+  function updateInfoBar(mx, vals) {
+    document.getElementById('info-x').textContent  = mx !== null ? fmtVal(mx) : '—';
+    document.getElementById('info-y0').textContent = vals ? fmtVal(vals[0]) : '—';
+    document.getElementById('info-y1').textContent = vals ? fmtVal(vals[1]) : '—';
+    document.getElementById('info-y2').textContent = vals ? fmtVal(vals[2]) : '—';
+  }
+
+  /* ════════════════════════════════
+     МОЛЕКУЛЯРНАЯ ФИЗИКА (unified: gas + brownian + states + diffusion)
+  ════════════════════════════════ */
+
+  let _molMode = 'gas'; // 'gas' | 'brownian' | 'states' | 'diffusion'
+
+  function _openMolPhys(mode) {
+    document.getElementById('sim-topbar-title').textContent = 'Молекулярная физика';
+    _simShow('sim-molphys');
+    _simShow('ctrl-molphys');
+
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      // lazy-init all sims
+      if (!gasSim) { gasSim = new GasSim(document.getElementById('gas-canvas')); gasSim.onUpdate = _gasUpdateUI; }
+      if (!brownSim) { brownSim = new BrownianSim(document.getElementById('brownian-canvas')); brownSim.onUpdate = _brownUpdateUI; }
+      if (!statesSim) { statesSim = new StatesSim(document.getElementById('states-canvas')); statesSim.onUpdate = _statesUpdateUI; }
+      if (!diffSim) { diffSim = new DiffusionSim(document.getElementById('diffusion-canvas')); diffSim.onUpdate = _diffUpdateUI; }
+
+      molMode(mode || 'gas');
+    }));
+  }
+
+  function molMode(mode, btn) {
+    _molMode = mode;
+    // stop all
+    if (gasSim) gasSim.stop();
+    if (brownSim) brownSim.stop();
+    if (statesSim) statesSim.stop();
+    if (diffSim) diffSim.stop();
+
+    // toggle mode buttons
+    document.querySelectorAll('.mol-mode').forEach(b => b.classList.remove('active'));
+    if (btn) btn.classList.add('active');
+    else { const mb = document.getElementById('mol-mode-' + mode); if (mb) mb.classList.add('active'); }
+
+    // toggle panels
+    const panels = ['gas', 'brownian', 'states', 'diffusion'];
+    panels.forEach(p => {
+      document.getElementById('mol-panel-' + p).style.display = p === mode ? '' : 'none';
+    });
+
+    // toggle canvases
+    document.getElementById('gas-canvas').style.display       = mode === 'gas' ? 'block' : 'none';
+    document.getElementById('brownian-canvas').style.display   = mode === 'brownian' ? 'block' : 'none';
+    document.getElementById('states-canvas').style.display     = mode === 'states' ? 'block' : 'none';
+    document.getElementById('diffusion-canvas').style.display  = mode === 'diffusion' ? 'block' : 'none';
+
+    // toggle topbar diffusion partition button
+    document.getElementById('ctrl-mol-diff').style.display = mode === 'diffusion' ? 'contents' : 'none';
+
+    // start active sim
+    const titles = { gas: 'Молекулярная физика — Газ', brownian: 'Молекулярная физика — Броуновское', states: 'Молекулярная физика — Фазы', diffusion: 'Молекулярная физика — Диффузия' };
+    document.getElementById('sim-topbar-title').textContent = titles[mode] || 'Молекулярная физика';
+
+    if (mode === 'gas')       { gasSim.fit(); gasSim.start(); }
+    if (mode === 'brownian')  { brownSim.fit(); brownSim.start(); }
+    if (mode === 'states')    { statesSim.fit(); statesSim.start(); }
+    if (mode === 'diffusion') { diffSim.fit(); diffSim.start(); }
+  }
+
+  function molReset() {
+    if (_molMode === 'gas' && gasSim) {
+      gasSim.reset();
+      document.getElementById('sl-gPiston').value = 100;
+      document.getElementById('g-piston').textContent = '100%';
+    }
+    if (_molMode === 'brownian' && brownSim) brownSim.reset();
+    if (_molMode === 'states' && statesSim) {
+      statesSim.reset();
+      document.getElementById('sl-stN').value = 64;
+      document.getElementById('st-N').textContent = '64';
+      const vBtn = document.getElementById('states-vec-btn');
+      if (vBtn) { vBtn.textContent = 'Векторы скоростей: Выкл'; vBtn.style.color = ''; }
+    }
+    if (_molMode === 'diffusion' && diffSim) {
+      diffSim.reset();
+      document.getElementById('diffusion-part-btn').textContent = '‖ Раздел';
+      document.getElementById('df-part-row').classList.add('active');
+      document.getElementById('df-pore-row').classList.remove('active');
+    }
+  }
+
+  function gasNChange() {
+    const n = +document.getElementById('sl-gN').value;
+    document.getElementById('g-N').textContent = n;
+    if (gasSim) { gasSim.setN(n); }
+  }
+
+  function gasTChange() {
+    const raw = +document.getElementById('sl-gT').value;
+    const t = raw / 10;
+    document.getElementById('g-T').textContent = t.toFixed(1) + ' у.е.';
+    if (gasSim) gasSim.setT(t);
+  }
+
+  function gasPistonChange() {
+    const v = +document.getElementById('sl-gPiston').value;
+    document.getElementById('g-piston').textContent = v + '%';
+    if (gasSim) gasSim.setPiston(v / 100);
+  }
+
+  function gasToggleVectors(btn) {
+    if (!gasSim) return;
+    gasSim.toggleVectors();
+    btn.textContent = 'Векторы скоростей: ' + (gasSim._showVectors ? 'Вкл' : 'Выкл');
+    btn.style.color = gasSim._showVectors ? '#7BF5A4' : '';
+  }
+
+  function _gasUpdateUI(info) {
+    document.getElementById('gstat-P').textContent  = info.P;
+    document.getElementById('gstat-V').textContent  = info.V;
+    document.getElementById('gstat-PV').textContent = info.PV;
+    document.getElementById('gstat-v').textContent  = info.avgSpeed + ' у.е.';
+    document.getElementById('mpbar-l1').textContent = 'N';
+    document.getElementById('mpbar-v1').textContent = info.N;
+    document.getElementById('mpbar-l2').textContent = 'T';
+    document.getElementById('mpbar-v2').textContent = info.T.toFixed(1);
+    document.getElementById('mpbar-l3').textContent = 'P';
+    document.getElementById('mpbar-v3').textContent = info.P;
+    document.getElementById('mpbar-l4').textContent = 'V';
+    document.getElementById('mpbar-v4').textContent = info.V;
+    document.getElementById('mpbar-l5').textContent = 'PV';
+    document.getElementById('mpbar-v5').textContent = info.PV;
+  }
+
+  function brownNChange() {
+    const n = +document.getElementById('sl-brN').value;
+    document.getElementById('br-N').textContent = n;
+    if (brownSim) brownSim.setN(n);
+  }
+
+  function brownTChange() {
+    const t = +document.getElementById('sl-brT').value / 10;
+    document.getElementById('br-T').textContent = t.toFixed(1) + ' у.е.';
+    if (brownSim) brownSim.setT(t);
+  }
+
+  function _brownUpdateUI(info) {
+    document.getElementById('brstat-dr').textContent    = info.displacement + ' px';
+    document.getElementById('brstat-msd').textContent   = info.msd + ' px²';
+    document.getElementById('brstat-v').textContent     = info.speed;
+    document.getElementById('brstat-steps').textContent = info.steps;
+    document.getElementById('mpbar-l1').textContent = 'Шагов';
+    document.getElementById('mpbar-v1').textContent = info.steps;
+    document.getElementById('mpbar-l2').textContent = '|Δr|';
+    document.getElementById('mpbar-v2').textContent = info.displacement + ' px';
+    document.getElementById('mpbar-l3').textContent = 'MSD';
+    document.getElementById('mpbar-v3').textContent = info.msd + ' px²';
+    document.getElementById('mpbar-l4').textContent = 'v';
+    document.getElementById('mpbar-v4').textContent = info.speed;
+    document.getElementById('mpbar-l5').textContent = 'N';
+    document.getElementById('mpbar-v5').textContent = info.N;
+  }
+
+  function statesTChange() {
+    const raw = +document.getElementById('sl-stT').value;
+    const t = raw / 100;
+    document.getElementById('st-T').textContent = t.toFixed(2);
+    if (statesSim) statesSim.setT(t);
+  }
+
+  function statesPreset(t) {
+    document.getElementById('sl-stT').value = Math.round(t * 100);
+    document.getElementById('st-T').textContent = t.toFixed(2);
+    if (statesSim) statesSim.setT(t);
+  }
+
+  function statesNChange() {
+    const n = +document.getElementById('sl-stN').value;
+    document.getElementById('st-N').textContent = n;
+    if (statesSim) statesSim.setN(n);
+  }
+
+  function statesToggleVectors(btn) {
+    if (!statesSim) return;
+    statesSim.toggleVectors();
+    btn.textContent = 'Векторы скоростей: ' + (statesSim._showVectors ? 'Вкл' : 'Выкл');
+    btn.style.color = statesSim._showVectors ? '#7BF5A4' : '';
+  }
+
+  function _statesUpdateUI(info) {
+    const phaseColors = { solid: '#4CC9F0', liquid: '#7BF5A4', gas: '#EF476F' };
+    const phaseLabels = { solid: 'Твёрдое', liquid: 'Жидкость', gas: 'Газ' };
+    const c = phaseColors[info.phase] || '#fff';
+    document.getElementById('ststat-phase').textContent = phaseLabels[info.phase] || info.phase;
+    document.getElementById('ststat-phase').style.color = c;
+    document.getElementById('ststat-KE').textContent = info.avgKE;
+    document.getElementById('ststat-PE').textContent = info.avgPE;
+    const pEl = document.getElementById('ststat-P');
+    if (pEl) pEl.textContent = info.P !== undefined ? info.P : '—';
+    document.getElementById('mpbar-l1').textContent = 'Фаза';
+    document.getElementById('mpbar-v1').textContent = phaseLabels[info.phase] || info.phase;
+    document.getElementById('mpbar-v1').style.color = c;
+    document.getElementById('mpbar-l2').textContent = 'T';
+    document.getElementById('mpbar-v2').textContent = info.T.toFixed(2);
+    document.getElementById('mpbar-l3').textContent = 'KE';
+    document.getElementById('mpbar-v3').textContent = info.avgKE;
+    document.getElementById('mpbar-l4').textContent = 'PE';
+    document.getElementById('mpbar-v4').textContent = info.avgPE;
+    document.getElementById('mpbar-l5').textContent = 'P';
+    document.getElementById('mpbar-v5').textContent = info.P !== undefined ? info.P : '—';
+  }
+
+  function diffNChange() {
+    const n = +document.getElementById('sl-dfN').value;
+    document.getElementById('df-N').textContent = n;
+    if (diffSim) diffSim.setN(n);
+  }
+
+  function diffTChange() {
+    const t = +document.getElementById('sl-dfT').value / 10;
+    document.getElementById('df-T').textContent = t.toFixed(1) + ' у.е.';
+    if (diffSim) diffSim.setT(t);
+  }
+
+  function diffPartitionToggle(rowEl) {
+    if (!diffSim) return;
+    diffSim.togglePartition();
+    const on = diffSim.partitionOn;
+    rowEl.classList.toggle('active', on);
+    document.getElementById('diffusion-part-btn').innerHTML = on ? '‖ Раздел' : '<svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg> Раздел снят';
+  }
+
+  function diffPartitionBtn() {
+    if (!diffSim) return;
+    const on = diffSim.partitionOn;
+    document.getElementById('diffusion-part-btn').innerHTML = on ? '‖ Раздел' : '<svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg> Раздел снят';
+    document.getElementById('df-part-row').classList.toggle('active', on);
+  }
+
+  function diffPoreToggle(rowEl) {
+    if (!diffSim) return;
+    diffSim.togglePore();
+    const pore = diffSim._poreMode;
+    const on   = diffSim.partitionOn;
+    rowEl.classList.toggle('active', pore);
+    const tog = document.getElementById('df-pore-toggle');
+    if (tog) tog.style.background = pore ? '#FFB347' : 'rgba(255,255,255,0.15)';
+    const span = tog && tog.querySelector('span');
+    if (span) span.style.marginLeft = pore ? '14px' : '2px';
+    // Also sync partition row
+    document.getElementById('df-part-row').classList.toggle('active', on);
+  }
+
+  function _diffUpdateUI(info) {
+    document.getElementById('dfstat-LA').textContent  = info.leftA;
+    document.getElementById('dfstat-LB').textContent  = info.leftB;
+    document.getElementById('dfstat-RA').textContent  = info.rightA;
+    document.getElementById('dfstat-RB').textContent  = info.rightB;
+    document.getElementById('dfstat-mix').textContent = info.mixed + '%';
+    document.getElementById('mpbar-l1').textContent = 'Смешивание';
+    document.getElementById('mpbar-v1').textContent = info.mixed + '%';
+    document.getElementById('mpbar-l2').textContent = 'Лево A/B';
+    document.getElementById('mpbar-v2').textContent = info.leftA + '/' + info.leftB;
+    document.getElementById('mpbar-l3').textContent = 'Право A/B';
+    document.getElementById('mpbar-v3').textContent = info.rightA + '/' + info.rightB;
+    document.getElementById('mpbar-l4').textContent = 'Раздел';
+    const partLabel = !info.partitionOn ? 'снят' : info.poreMode ? 'пора' : 'вкл';
+    document.getElementById('mpbar-v4').textContent = partLabel;
+    document.getElementById('mpbar-v4').style.color = !info.partitionOn ? '#34d399' : info.poreMode ? '#FFB347' : '#fff';
+    document.getElementById('mpbar-l5').textContent = 'Шагов';
+    document.getElementById('mpbar-v5').textContent = info.steps;
+  }
+
+  /* ════════════════════════════════
+     ЗАКОН КУЛОНА
+  ════════════════════════════════ */
+
+  let csSim = null;
+
+  function _openCoulomb() {
+    document.getElementById('sim-topbar-title').textContent = 'Закон Кулона';
+    _simShow('sim-coulomb');
+    _simShow('ctrl-coulomb');
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      const canvas = document.getElementById('coulomb-canvas');
+      if (!csSim) {
+        csSim = new CoulombSim(canvas);
+        csSim.onUpdate = _coulombUpdateUI;
+      }
+      csSim.fit();
+      if (csSim.charges.length === 0) csSim.preset('dipole');
+      _coulombUpdateUI(csSim.info());
+    }));
+  }
+
+  function coulombSign(s) {
+    if (!csSim) return;
+    csSim.setSign(s);
+    document.getElementById('cbtn-pos').classList.toggle('active', s > 0);
+    document.getElementById('cbtn-neg').classList.toggle('active', s < 0);
+    document.getElementById('csign-pos').style.opacity = s > 0 ? '1' : '0.45';
+    document.getElementById('csign-neg').style.opacity = s < 0 ? '1' : '0.45';
+  }
+
+  function coulombLayer(name, rowEl) {
+    if (!csSim) return;
+    csSim.toggleLayer(name);
+    const on = csSim.layers[name];
+    rowEl.classList.toggle('active', on);
+    const tog = rowEl.querySelector('.tri-toggle');
+    if (tog) {
+      tog.style.background = on ? 'var(--violet)' : 'rgba(255,255,255,0.12)';
+      const dot = tog.querySelector('span');
+      if (dot) dot.style.marginLeft = on ? '14px' : '2px';
+    }
+    csSim.draw();
+  }
+
+  function coulombPreset(name) {
+    if (!csSim) return;
+    csSim.preset(name);
+  }
+
+  function _coulombUpdateUI(info) {
+    if (!info) return;
+    document.getElementById('cs-total').textContent   = info.total;
+    document.getElementById('cs-curE').textContent    = info.cursorE;
+    document.getElementById('cs-curV').textContent    = info.cursorV;
+    document.getElementById('csbar-total').textContent = info.total;
+    document.getElementById('csbar-pos').textContent   = info.positive;
+    document.getElementById('csbar-neg').textContent   = info.negative;
+    document.getElementById('csbar-maxE').textContent  = info.maxE;
+    document.getElementById('csbar-curE').textContent  = info.cursorE;
+  }
+
+  /* ════════════════════════════════
+     ЭЛЕКТРИЧЕСКИЕ ЦЕПИ
+  ════════════════════════════════ */
+
+  let cirSim = null;
+  let reacSim = null;
+  let flaskSim = null;
+
+  function _openCircuit() {
+    document.getElementById('sim-topbar-title').textContent = 'Электрические цепи';
+    _simShow('sim-circuit');
+    _simShow('ctrl-circuit');
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      const canvas = document.getElementById('circuit-canvas');
+      if (!cirSim) {
+        cirSim = new CircuitSim(canvas);
+        cirSim.onUpdate = _circUpdateUI;
+        cirSim.onModeChange = (mode) => {
+          document.querySelectorAll('.circ-tool-btn').forEach(b => {
+            b.classList.toggle('active', b.dataset.tool === mode);
+          });
+          document.querySelectorAll('.circ-top-btn').forEach(b => {
+            b.classList.toggle('active', b.id === 'ctool-' + mode);
+          });
+        };
+      } else {
+        cirSim.stop();
+      }
+      cirSim.fit();
+      if (cirSim.components.length === 0) cirSim.preset('serial');
+      cirSim.start();
+      _circUpdateUI(cirSim.info());
+    }));
+  }
+
+  function circTool(tool, el) {
+    if (cirSim) cirSim.addMode = tool;
+    document.querySelectorAll('.circ-tool-btn').forEach(b => b.classList.toggle('active', b.dataset.tool === tool));
+    document.querySelectorAll('.circ-top-btn').forEach(b => b.classList.toggle('active', b.id === 'ctool-' + tool));
+  }
+
+  function circPreset(name) {
+    if (!cirSim) return;
+    cirSim.preset(name);
+  }
+
+  function circRChange() {
+    const v = +document.getElementById('sl-circR').value;
+    document.getElementById('circ-R-val').textContent = v + ' Ω';
+    if (cirSim) cirSim.R_value = v;
+  }
+
+  function circUChange() {
+    const v = +document.getElementById('sl-circU').value;
+    document.getElementById('circ-U-val').textContent = v + ' В';
+    if (cirSim) cirSim.U_value = v;
+  }
+
+  function circCChange() {
+    const v = +document.getElementById('sl-circC').value;
+    document.getElementById('circ-C-val').textContent = v + ' µF';
+    if (cirSim) cirSim.C_value = v;
+  }
+
+  function circFChange() {
+    const v = +document.getElementById('sl-circF').value;
+    document.getElementById('circ-F-val').textContent = v + ' Гц';
+    if (cirSim) cirSim.acFreq = v;
+  }
+
+  function _circUpdateUI(info) {
+    if (!info) return;
+    document.getElementById('cirbar-comps').textContent  = info.components;
+    document.getElementById('cirbar-U').textContent      = info.voltage ? info.voltage + ' В' : '—';
+    document.getElementById('cirbar-I').textContent      = info.current ? info.current + ' А' : '—';
+    document.getElementById('cirbar-P').textContent      = info.power   ? info.power   + ' Вт' : '—';
+    const st = document.getElementById('cirbar-status');
+    st.textContent  = info.solved ? 'Замкнута' : 'Разомкнута';
+    st.style.color  = info.solved ? '#7BF5A4' : '#EF476F';
+  }
+
+  /* ════════════════════════════════
+     ХИМИЯ (unified: кинетика + колба + ОВР + ионный обмен)
+  ════════════════════════════════ */
+
+  let _chemMode = 'kinetics'; // 'kinetics' | 'flask' | 'redox' | 'ionex'
+
+  function _openChemistry(mode) {
+    document.getElementById('sim-topbar-title').textContent = 'Химические реакции';
+    _simShow('sim-chemistry');
+    _simShow('ctrl-chemistry');
+    if (mode) _chemMode = mode;
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      chemMode(_chemMode);
+    }));
+  }
+
+  function chemMode(mode, btn) {
+    _chemMode = mode;
+    const MODES = ['kinetics', 'flask', 'redox', 'ionex'];
+    const CANVASES = { kinetics: 'reactions-canvas', flask: 'flask-canvas', redox: 'redox-canvas', ionex: 'ionexchange-canvas' };
+
+    // toggle mode buttons
+    document.querySelectorAll('.chem-mode').forEach(b => b.classList.remove('active'));
+    const mb = document.getElementById('chem-mode-' + mode);
+    if (mb) mb.classList.add('active');
+
+    // toggle panels
+    MODES.forEach(m => {
+      const p = document.getElementById('chem-panel-' + m);
+      if (p) p.style.display = m === mode ? '' : 'none';
+    });
+
+    // toggle canvases
+    Object.entries(CANVASES).forEach(([m, cid]) => {
+      document.getElementById(cid).style.display = m === mode ? 'block' : 'none';
+    });
+
+    // toggle topbar tool groups
+    const modeToCtrl = { kinetics:'kin', flask:'flask', redox:'redox', ionex:'ionex' };
+    ['kin', 'flask', 'redox', 'ionex'].forEach(k => {
+      const el = document.getElementById('ctrl-chem-' + k);
+      if (el) el.style.display = k === modeToCtrl[mode] ? 'contents' : 'none';
+    });
+
+    // stop all sims
+    if (reacSim)  reacSim.stop();
+    if (flaskSim) flaskSim.stop();
+    if (rdxSim)   rdxSim.stop();
+    if (ioxSim)   ioxSim.stop();
+
+    // start the active one
+    if (mode === 'kinetics') {
+      const c = document.getElementById('reactions-canvas');
+      if (!reacSim) { reacSim = new ReactionSim(c); reacSim.onUpdate = _reacUpdateUI; }
+      reacSim.fit(); reacSim.start();
+      _reacUpdateUI(reacSim.info());
+    } else if (mode === 'flask') {
+      const c = document.getElementById('flask-canvas');
+      if (!flaskSim) { flaskSim = new FlaskSim(c); flaskSim.onUpdate = _flaskUpdateUI; }
+      flaskSim.fit(); flaskSim.start();
+      _flaskUpdateUI(flaskSim.info());
+    } else if (mode === 'redox') {
+      const c = document.getElementById('redox-canvas');
+      if (!rdxSim) { rdxSim = new RedoxSim(c); rdxSim.onUpdate = _redoxUpdateUI; }
+      rdxSim.fit(); rdxSim.draw();
+      _redoxUpdateUI(rdxSim.info());
+    } else if (mode === 'ionex') {
+      const c = document.getElementById('ionexchange-canvas');
+      if (!ioxSim) { ioxSim = new IonExSim(c); ioxSim.onUpdate = _ionexUpdateUI; }
+      ioxSim.fit(); ioxSim.draw();
+      _ionexUpdateUI(ioxSim.info());
+    }
+  }
+
+  function chemReset() {
+    if (_chemMode === 'kinetics' && reacSim)  reacSim.reset();
+    if (_chemMode === 'flask'    && flaskSim) flaskSim.reset();
+    if (_chemMode === 'redox')   redoxReset();
+    if (_chemMode === 'ionex')   ionexReset();
+  }
+
+  // _openReactions is now handled by _openChemistry + chemMode
+
+  function reacNChange() {
+    const v = +document.getElementById('sl-reacN').value;
+    document.getElementById('reac-N-val').textContent = v;
+    if (reacSim) reacSim.setN(v);
+  }
+
+  function reacTChange() {
+    const raw = +document.getElementById('sl-reacT').value;
+    const t = (raw / 10).toFixed(1);
+    document.getElementById('reac-T-val').textContent = t;
+    if (reacSim) reacSim.setT(+t);
+  }
+
+  function reacEaChange() {
+    const raw = +document.getElementById('sl-reacEa').value;
+    const ea = (raw / 10).toFixed(1);
+    document.getElementById('reac-Ea-val').textContent = ea;
+    if (reacSim) reacSim.setEa(+ea);
+  }
+
+  function reacMode(mode, el) {
+    if (reacSim) reacSim.setMode(mode);
+    document.querySelectorAll('.reac-mode-btn').forEach(b => b.classList.remove('active'));
+    if (el) el.classList.add('active');
+  }
+
+  function reacPreset(name) {
+    if (!reacSim) return;
+    reacSim.preset(name);
+    // Sync sliders and mode buttons
+    document.getElementById('sl-reacN').value  = reacSim.N;
+    document.getElementById('reac-N-val').textContent = reacSim.N;
+    document.getElementById('sl-reacT').value  = Math.round(reacSim.T * 10);
+    document.getElementById('reac-T-val').textContent = reacSim.T.toFixed(1);
+    document.getElementById('sl-reacEa').value = Math.round(reacSim.Ea * 10);
+    document.getElementById('reac-Ea-val').textContent = reacSim.Ea.toFixed(1);
+    document.querySelectorAll('.reac-mode-btn').forEach(b => b.classList.remove('active'));
+    const mBtn = document.getElementById('rmode-' + reacSim.mode);
+    if (mBtn) mBtn.classList.add('active');
+    _reacUpdateUI(reacSim.info());
+  }
+
+  function reacTogglePause() {
+    if (!reacSim) return;
+    reacSim.toggleReaction();
+    const btn = document.getElementById('reac-pause-btn');
+    btn.innerHTML = reacSim.reactionOn ? '<svg class="ic" viewBox="0 0 24 24"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg> Пауза' : '<svg class="ic" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg> Реакции';
+  }
+
+  function _reacUpdateUI(info) {
+    if (!info) return;
+    document.getElementById('chbar-l1').textContent = 'A молекул';
+    document.getElementById('chbar-v1').textContent = info.nA;
+    document.getElementById('chbar-l2').textContent = 'B молекул';
+    document.getElementById('chbar-v2').textContent = info.nB;
+    document.getElementById('chbar-l3').textContent = 'C продукт';
+    document.getElementById('chbar-v3').textContent = info.nC;
+    document.getElementById('chbar-l4').textContent = 'Реакций';
+    document.getElementById('chbar-v4').textContent = info.reactions;
+    document.getElementById('chbar-l5').textContent = 'Скорость';
+    document.getElementById('chbar-v5').textContent = info.rate > 0
+      ? (info.rate * 30).toFixed(1) + '/с' : '—';
+  }
+
+  // _openFlask is now handled by _openChemistry('flask')
+
+  function flaskMetal(type, el) {
+    if (flaskSim) { flaskSim.setMetal(type); flaskSim.reset(); }
+    document.querySelectorAll('.flask-metal-btn').forEach(b => b.classList.remove('active'));
+    if (el) el.classList.add('active');
+  }
+
+  function flaskAcid(type, el) {
+    if (flaskSim) flaskSim.setAcid(type);
+    document.querySelectorAll('.flask-acid-btn').forEach(b => b.classList.remove('active'));
+    if (el) el.classList.add('active');
+  }
+
+  function flaskConcChange() {
+    const v = +document.getElementById('sl-flask-conc').value;
+    document.getElementById('flask-conc-val').textContent = v + '%';
+    if (flaskSim) flaskSim.setConc(v / 100);
+  }
+
+  function flaskTempChange() {
+    const v = +document.getElementById('sl-flask-temp').value;
+    document.getElementById('flask-temp-val').textContent = v + '°C';
+    if (flaskSim) flaskSim.setEnvTemp(v);
+  }
+
+  function flaskToggleFlame() {
+    if (!flaskSim) return;
+    flaskSim.toggleFlame();
+    const active = flaskSim._flameOn;
+    document.getElementById('flask-flame-btn').style.opacity     = active ? '1' : '0.5';
+    document.getElementById('flask-flame-panel').style.opacity   = active ? '1' : '0.5';
+    document.getElementById('flask-flame-panel').style.background = active ? 'rgba(239,71,111,0.22)' : '';
+  }
+
+  function flaskTogglePause() {
+    if (!flaskSim) return;
+    flaskSim.togglePause();
+    document.getElementById('flask-pause-btn').innerHTML = flaskSim._paused ? '<svg class="ic" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg>' : '<svg class="ic" viewBox="0 0 24 24"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>';
+  }
+
+  function _flaskUpdateUI(info) {
+    if (!info) return;
+    document.getElementById('chbar-l1').textContent = 'Металл';
+    document.getElementById('chbar-v1').textContent = info.metal;
+    document.getElementById('chbar-l2').textContent = 'Масса';
+    document.getElementById('chbar-v2').textContent = info.mass + ' г';
+    document.getElementById('chbar-l3').textContent = 'T (°C)';
+    document.getElementById('chbar-v3').textContent = info.temp + '°C';
+    document.getElementById('chbar-l4').textContent = 'pH';
+    document.getElementById('chbar-v4').textContent = info.pH;
+    document.getElementById('chbar-l5').textContent = 'H₂ (%)';
+    document.getElementById('chbar-v5').textContent = info.h2pct + '%';
+  }
+
+  // _openRedox is now handled by _openChemistry('redox')
+
+  function redoxRxn(id, el) {
+    document.querySelectorAll('.redox-rxn-btn').forEach(b => b.classList.remove('active'));
+    if (el) el.classList.add('active');
+    if (rdxSim) { rdxSim.setReaction(id); }
+  }
+
+  function redoxStart() {
+    if (rdxSim) rdxSim.start();
+  }
+
+  function redoxReset() {
+    if (rdxSim) rdxSim.reset();
+  }
+
+  function _redoxUpdateUI(info) {
+    if (!info) return;
+    const phaseMap = { idle: 'ожидание', mixing: 'смешивание', reacting: 'реакция', done: 'завершена' };
+    document.getElementById('chbar-l1').textContent = 'Реакция';
+    document.getElementById('chbar-v1').textContent = info.rxn || '—';
+    document.getElementById('chbar-l2').textContent = 'Фаза';
+    document.getElementById('chbar-v2').textContent = phaseMap[info.phase] || info.phase;
+    document.getElementById('chbar-l3').textContent = 'Прогресс';
+    document.getElementById('chbar-v3').textContent = info.phase === 'done' ? '100%' : info.prog + '%';
+    document.getElementById('chbar-l4').textContent = 'Электронов';
+    document.getElementById('chbar-v4').textContent = info.e + ' e⁻';
+    document.getElementById('chbar-l5').textContent = 'Тип';
+    document.getElementById('chbar-v5').innerHTML = info.phase === 'done' ? '<svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>' : '—';
+  }
+
+  // _openIonExchange is now handled by _openChemistry('ionex')
+
+  function ionexRxn(id, el) {
+    document.querySelectorAll('.ionex-rxn-btn').forEach(b => b.classList.remove('active'));
+    if (el) el.classList.add('active');
+    if (ioxSim) { ioxSim.setReaction(id); }
+  }
+
+  function ionexStart() {
+    if (ioxSim) ioxSim.start();
+  }
+
+  function ionexReset() {
+    if (ioxSim) ioxSim.reset();
+  }
+
+  function _ionexUpdateUI(info) {
+    if (!info) return;
+    const phaseMap = { idle: 'ожидание', mixing: 'смешивание', pairing: 'реакция', done: 'завершена' };
+    const rxn = IonExSim.RXN[ioxSim.rxnId];
+    document.getElementById('chbar-l1').textContent = 'Реакция';
+    document.getElementById('chbar-v1').textContent = info.rxn || '—';
+    document.getElementById('chbar-l2').textContent = 'Фаза';
+    document.getElementById('chbar-v2').textContent = phaseMap[info.phase] || info.phase;
+    document.getElementById('chbar-l3').textContent = 'Прогресс';
+    document.getElementById('chbar-v3').textContent = info.phase === 'done' ? '100%' : info.prog + '%';
+    document.getElementById('chbar-l4').textContent = 'Осадок';
+    document.getElementById('chbar-v4').textContent = info.precip > 0 ? info.precip + ' ч.' : '—';
+    document.getElementById('chbar-l5').textContent = 'Продукт';
+    document.getElementById('chbar-v5').textContent = rxn ? (rxn.sign || '—') : '—';
+  }
+
+  /* ════════════════════════════════
+     ЗАКОНЫ НЬЮТОНА
+  ════════════════════════════════ */
+
+  /* ══════════════════════════════
+     DYNAMICS (unified Newton + Sandbox)
+     ══════════════════════════════ */
+
+  let newtonSim = null;
+  let sandboxSim = null;
+  let _dynMode = 'sandbox'; // current mode: 'sandbox' | 'law1' | 'law2' | 'law3'
+
+  function _openDynamics(preset) {
+    document.getElementById('sim-topbar-title').textContent = 'Динамика';
+    _simShow('sim-dynamics');
+    _simShow('ctrl-dynamics');
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      // init sandbox
+      const sbCanvas = document.getElementById('sandbox-canvas');
+      if (!sandboxSim) {
+        sandboxSim = new ForceSandboxSim(sbCanvas);
+        sandboxSim.onUpdate = _sbUpdateUI;
+      }
+      // init newton
+      const nwCanvas = document.getElementById('newton-canvas');
+      if (!newtonSim) {
+        newtonSim = new NewtonSim(nwCanvas);
+        newtonSim.onUpdate = _newtonUpdateUI;
+      }
+      // activate current mode
+      dynMode(_dynMode);
+      if (preset) setTimeout(() => sbPreset(preset), 120);
+    }));
+  }
+
+  function dynMode(mode, btn) {
+    _dynMode = mode;
+    const isSandbox = mode === 'sandbox';
+
+    // toggle mode buttons
+    document.querySelectorAll('.dyn-mode').forEach(b => b.classList.remove('active'));
+    const modeBtn = document.getElementById('dyn-mode-' + mode);
+    if (modeBtn) modeBtn.classList.add('active');
+
+    // toggle panels
+    document.getElementById('dyn-sandbox-panel').style.display = isSandbox ? '' : 'none';
+    document.getElementById('dyn-newton-panel').style.display  = isSandbox ? 'none' : '';
+
+    // toggle canvases
+    document.getElementById('sandbox-canvas').style.display = isSandbox ? 'block' : 'none';
+    document.getElementById('newton-canvas').style.display  = isSandbox ? 'none' : 'block';
+
+    // toggle topbar tool groups
+    document.getElementById('ctrl-dyn-sb').style.display = isSandbox ? 'contents' : 'none';
+    document.getElementById('ctrl-dyn-nw').style.display = isSandbox ? 'none' : 'contents';
+
+    if (isSandbox) {
+      // stop newton, start sandbox
+      if (newtonSim) newtonSim.stop();
+      if (sandboxSim) { sandboxSim.fit(); sandboxSim.start(); }
+      _sbUpdateUI(sandboxSim ? sandboxSim.info() : null);
+    } else {
+      // stop sandbox, switch newton law
+      if (sandboxSim) sandboxSim.stop();
+      const lawN = mode === 'law1' ? 1 : mode === 'law2' ? 2 : 3;
+      if (newtonSim) {
+        newtonSim.setLaw(lawN);
+        newtonSim.fit();
+        newtonSim.start();
+        _newtonSyncUI();
+        _newtonUpdateUI(newtonSim.info());
+      }
+    }
+  }
+
+  function dynPause() {
+    if (_dynMode === 'sandbox') {
+      if (sandboxSim) sandboxSim.togglePause();
+    } else {
+      if (newtonSim) newtonSim.togglePause();
+    }
+  }
+
+  function dynReset() {
+    if (_dynMode === 'sandbox') {
+      sbReset();
+    } else {
+      _resetNewtonScene();
+    }
+  }
+
+  const _NEWTON_SCENES = {
+    1: {
+      A: { desc: 'Закон инерции: тело скользит по поверхности. Нажми на canvas — толкни блок.', action: null },
+      B: { desc: 'Инерция в орбите: шар вращается на нити. Отруби нить — полетит по касательной!', action: '<svg class="ic" viewBox="0 0 24 24"><circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><line x1="20" y1="4" x2="8.12" y2="15.88"/><line x1="14.47" y1="14.48" x2="20" y2="20"/><line x1="8.12" y1="8.12" x2="12" y2="12"/></svg> Отрубить нить' },
+      C: { desc: 'Инерция в космосе: тело движется равномерно, нет сил — нет ускорения.', action: null },
+    },
+    2: {
+      A: { desc: 'Второй закон: F = ma. Прикладывай силу и следи за ускорением и скоростью.', action: '<svg class="ic" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg> Запустить' },
+      B: { desc: 'Два тела, разные массы — одинаковая сила. Сравни ускорения!', action: '<svg class="ic" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg> Запустить' },
+      C: { desc: 'Второй закон: изменяй силу и массу ползунками, наблюдай в реальном времени.', action: '<svg class="ic" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg> Запустить' },
+    },
+    3: {
+      A: { desc: 'Третий закон: пушка выстрелила — отдача. Импульс сохраняется!', action: 'Выстрел' },
+      B: { desc: 'Третий закон: два шара сталкиваются — силы равны и противоположны.', action: '<svg class="ic" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg> Столкнуть' },
+      C: { desc: 'Реактивное движение: ракета выбрасывает газ — летит в обратную сторону.', action: 'Двигатель' },
+    },
+  };
+
+  const _NEWTON_PRESETS = {
+    1: [
+      { label: 'Космос',  fn: 'space' },
+      { label: 'Лёд',    fn: 'ice' },
+      { label: 'Асфальт', fn: 'asphalt' },
+      { label: 'Резина',  fn: 'rubber' },
+    ],
+    2: [
+      { label: 'Лёгкий',  fn: 'light' },
+      { label: 'Тяжёлый', fn: 'heavy' },
+      { label: 'Сравнить', fn: 'compare' },
+    ],
+    3: [
+      { label: 'Большая пушка', fn: 'big_cannon' },
+      { label: 'Маленькая',    fn: 'small_cannon' },
+      { label: 'Равные шары',  fn: 'equal_balls' },
+    ],
+  };
+
+  // _openNewton is now handled by _openDynamics + dynMode
+
+  // newtonLaw is now handled by dynMode('law1'/'law2'/'law3')
+
+  function newtonScene(s, topBtn, panelBtn) {
+    if (!newtonSim) return;
+    newtonSim.setScene(s);
+    document.querySelectorAll('.nscene-btn').forEach(b => {
+      b.classList.toggle('active', b.id === 'nscn-' + s || b.id === 'nscn-panel-' + s);
+    });
+    _newtonSyncUI();
+    _newtonUpdateUI(newtonSim.info());
+  }
+
+  function _newtonSyncUI() {
+    if (!newtonSim) return;
+    const law = newtonSim.law;
+    const scene = newtonSim.scene;
+    const sceneData = (_NEWTON_SCENES[law] || {})[scene] || {};
+
+    // description
+    const desc = document.getElementById('newton-scene-desc');
+    if (desc) desc.textContent = sceneData.desc || '';
+
+    // action button label
+    const lbl = sceneData.action || (law === 1 ? '<svg class="ic" viewBox="0 0 24 24"><circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><line x1="20" y1="4" x2="8.12" y2="15.88"/><line x1="14.47" y1="14.48" x2="20" y2="20"/><line x1="8.12" y1="8.12" x2="12" y2="12"/></svg> Нить' : '<svg class="ic" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg> Действие');
+    document.getElementById('newton-action-label').textContent = lbl;
+    document.getElementById('newton-action-top').textContent = lbl;
+
+    // show/hide sliders
+    document.getElementById('newton-mu-block').style.display    = law === 1 && scene === 'A' ? '' : 'none';
+    document.getElementById('newton-mass1-block').style.display = (law === 2 || law === 3) ? '' : 'none';
+    document.getElementById('newton-mass2-block').style.display = law === 3 ? '' : 'none';
+    document.getElementById('newton-force-block').style.display = law === 2 ? '' : 'none';
+
+    // sync slider values from sim
+    document.getElementById('sl-newton-mu').value   = newtonSim.mu;
+    document.getElementById('newton-mu-val').textContent = newtonSim.mu.toFixed(2);
+    document.getElementById('sl-newton-m1').value   = newtonSim.mass1;
+    document.getElementById('newton-m1-val').textContent = newtonSim.mass1 + ' кг';
+    document.getElementById('sl-newton-m2').value   = newtonSim.mass2;
+    document.getElementById('newton-m2-val').textContent = newtonSim.mass2 + ' кг';
+    document.getElementById('sl-newton-F').value    = newtonSim.force;
+    document.getElementById('newton-F-val').textContent  = newtonSim.force + ' Н';
+
+    // sync scene highlight buttons in both topbar and panel
+    ['A','B','C'].forEach(s => {
+      const tb = document.getElementById('nscn-' + s);
+      const pb = document.getElementById('nscn-panel-' + s);
+      const on = s === scene;
+      if (tb) tb.classList.toggle('active', on);
+      if (pb) pb.classList.toggle('active', on);
+    });
+
+    // presets
+    const presetsEl = document.getElementById('newton-presets');
+    const presets = _NEWTON_PRESETS[law] || [];
+    presetsEl.innerHTML = presets.map(p =>
+      `<button class="proj-preset-chip" onclick="newtonPreset('${p.fn}')">${p.label}</button>`
+    ).join('');
+
+    // scene B/C visibility for law I (B = orbital, C = space — but law I only has A,B)
+    // scene C doesn't exist for law I/II panel scene picker visibility
+    const cBtn = document.getElementById('nscn-panel-C');
+    const cTopBtn = document.getElementById('nscn-C');
+    const showC = law === 3;
+    if (cBtn)    cBtn.style.display = showC ? '' : 'none';
+    if (cTopBtn) cTopBtn.style.display = showC ? '' : 'none';
+    const bBtn = document.getElementById('nscn-panel-B');
+    const bTopBtn = document.getElementById('nscn-B');
+    const showB = law !== 2 || true; // law 2 has compare scene B
+    if (bBtn)    bBtn.style.display = '';
+    if (bTopBtn) bTopBtn.style.display = '';
+  }
+
+  function newtonAction() {
+    if (!newtonSim) return;
+    const law = newtonSim.law;
+    const scene = newtonSim.scene;
+    if (law === 1 && scene === 'B') newtonSim.cutString();
+    else if (law === 2) newtonSim.startL2();
+    else if (law === 3 && scene === 'A') newtonSim.fireCannon();
+    else if (law === 3 && scene === 'B') newtonSim._reset3B ? newtonSim._reset3B() : null;
+    else if (law === 3 && scene === 'C') newtonSim.toggleRocket();
+    _newtonUpdateUI(newtonSim.info());
+  }
+
+  function _resetNewtonScene() {
+    if (!newtonSim) return;
+    const law = newtonSim.law;
+    const scene = newtonSim.scene;
+    if (law === 1 && scene === 'A') newtonSim.preset('ice');
+    else if (law === 1) newtonSim.setScene(scene);
+    else if (law === 2) newtonSim.resetL2 ? newtonSim.resetL2() : newtonSim.setScene(scene);
+    else newtonSim.setScene(scene);
+    _newtonUpdateUI(newtonSim.info());
+  }
+
+  function newtonMuChange() {
+    const v = +document.getElementById('sl-newton-mu').value;
+    document.getElementById('newton-mu-val').textContent = v.toFixed(2);
+    if (newtonSim) newtonSim.setMu(v);
+  }
+
+  function newtonMass1Change() {
+    const v = +document.getElementById('sl-newton-m1').value;
+    document.getElementById('newton-m1-val').textContent = v + ' кг';
+    if (newtonSim) newtonSim.setMass1(v);
+  }
+
+  function newtonMass2Change() {
+    const v = +document.getElementById('sl-newton-m2').value;
+    document.getElementById('newton-m2-val').textContent = v + ' кг';
+    if (newtonSim) newtonSim.setMass2(v);
+  }
+
+  function newtonForceChange() {
+    const v = +document.getElementById('sl-newton-F').value;
+    document.getElementById('newton-F-val').textContent = v + ' Н';
+    if (newtonSim) newtonSim.setForce(v);
+  }
+
+  function newtonPreset(name) {
+    if (!newtonSim) return;
+    newtonSim.preset(name);
+    _newtonSyncUI();
+    _newtonUpdateUI(newtonSim.info());
+  }
+
+  function _newtonUpdateUI(info) {
+    if (!info) return;
+    const law = info.law;
+    const scene = info.scene;
+
+    if (law === 1 && scene === 'A') {
+      document.getElementById('dbar-l1').textContent = 'Закон I-A';
+      document.getElementById('dbar-v1').textContent = 'Скольжение';
+      document.getElementById('dbar-l2').textContent = 'Скорость';
+      document.getElementById('dbar-v2').textContent = info.v + ' м/с';
+      document.getElementById('dbar-l3').textContent = 'Сила трения';
+      document.getElementById('dbar-v3').textContent = info.fFr + ' Н';
+      document.getElementById('dbar-l4').textContent = 'Масса';
+      document.getElementById('dbar-v4').textContent = info.m + ' кг';
+      document.getElementById('dbar-l5').textContent = 'μ';
+      document.getElementById('dbar-v5').textContent = info.mu;
+    } else if (law === 1) {
+      document.getElementById('dbar-l1').textContent = 'Закон I-B';
+      document.getElementById('dbar-v1').textContent = info.cut ? 'Нить срублена' : 'Вращение';
+      document.getElementById('dbar-l2').textContent = 'Скорость';
+      document.getElementById('dbar-v2').textContent = info.v + ' м/с';
+      document.getElementById('dbar-l3').textContent = '';
+      document.getElementById('dbar-v3').textContent = '—';
+      document.getElementById('dbar-l4').textContent = '';
+      document.getElementById('dbar-v4').textContent = '—';
+      document.getElementById('dbar-l5').textContent = '';
+      document.getElementById('dbar-v5').textContent = '—';
+    } else if (law === 2) {
+      document.getElementById('dbar-l1').textContent = 'Закон II';
+      document.getElementById('dbar-v1').textContent = 'F = ma';
+      document.getElementById('dbar-l2').textContent = 'Сила F';
+      document.getElementById('dbar-v2').textContent = info.F + ' Н';
+      document.getElementById('dbar-l3').textContent = 'Масса m';
+      document.getElementById('dbar-v3').textContent = info.m + ' кг';
+      document.getElementById('dbar-l4').textContent = 'Ускор. a';
+      document.getElementById('dbar-v4').textContent = info.a + ' м/с²';
+      document.getElementById('dbar-l5').textContent = 'Скорость';
+      document.getElementById('dbar-v5').textContent = info.v + ' м/с';
+    } else if (scene === 'A') {
+      document.getElementById('dbar-l1').textContent = 'Закон III-A';
+      document.getElementById('dbar-v1').textContent = 'Пушка';
+      document.getElementById('dbar-l2').textContent = 'v снаряда';
+      document.getElementById('dbar-v2').textContent = info.vBall !== '—' ? info.vBall + ' м/с' : '—';
+      document.getElementById('dbar-l3').textContent = 'v пушки';
+      document.getElementById('dbar-v3').textContent = info.vCannon + ' м/с';
+      document.getElementById('dbar-l4').textContent = 'm снаряда';
+      document.getElementById('dbar-v4').textContent = info.m1 + ' кг';
+      document.getElementById('dbar-l5').textContent = 'm пушки';
+      document.getElementById('dbar-v5').textContent = info.m2 + ' кг';
+    } else if (scene === 'B') {
+      document.getElementById('dbar-l1').textContent = 'Закон III-B';
+      document.getElementById('dbar-v1').textContent = 'Удар';
+      document.getElementById('dbar-l2').textContent = 'p₁';
+      document.getElementById('dbar-v2').textContent = info.p1 + ' кг·м/с';
+      document.getElementById('dbar-l3').textContent = 'p₂';
+      document.getElementById('dbar-v3').textContent = info.p2 + ' кг·м/с';
+      document.getElementById('dbar-l4').textContent = 'p суммарный';
+      document.getElementById('dbar-v4').textContent = info.pt + ' кг·м/с';
+      document.getElementById('dbar-l5').textContent = '';
+      document.getElementById('dbar-v5').textContent = '—';
+    } else {
+      document.getElementById('dbar-l1').textContent = 'Закон III-C';
+      document.getElementById('dbar-v1').textContent = 'Ракета';
+      document.getElementById('dbar-l2').textContent = 'Ускорение';
+      document.getElementById('dbar-v2').textContent = info.a + ' м/с²';
+      document.getElementById('dbar-l3').textContent = 'Скорость';
+      document.getElementById('dbar-v3').textContent = info.v + ' м/с';
+      document.getElementById('dbar-l4').textContent = 'Масса';
+      document.getElementById('dbar-v4').textContent = info.m + ' кг';
+      document.getElementById('dbar-l5').textContent = 'Топливо';
+      document.getElementById('dbar-v5').textContent = info.fuel + '%';
+    }
+  }
+
+  // _openSandbox is now handled by _openDynamics + dynMode
+
+  function sbTool(t, btn) {
+    if (!sandboxSim) return;
+    sandboxSim.tool = t;
+    sandboxSim._springStart = null;
+    sandboxSim._ropeStart   = null;
+    document.querySelectorAll('.sb-tool-btn').forEach(b => b.classList.toggle('active', b.id === 'sbt-' + t));
+    document.querySelectorAll('.sb-panel-tool').forEach(b => b.classList.toggle('active', b.id === 'sbpt-' + t));
+    const canvas = document.getElementById('sandbox-canvas');
+    canvas.style.cursor = t === 'erase' ? 'not-allowed'
+                        : (t === 'spring' || t === 'rope') ? 'cell'
+                        : t === 'anchor' ? 'copy'
+                        : 'crosshair';
+    document.getElementById('sb-spring-block').style.display = t === 'spring' ? '' : 'none';
+  }
+
+  function sbSpringKChange() {
+    const v = +document.getElementById('sl-sb-springk').value;
+    document.getElementById('sb-springk-val').textContent = v + ' Н/м';
+    if (sandboxSim) sandboxSim.newSpringK = v;
+  }
+
+  function sbForceMode(m, btn) {
+    if (!sandboxSim) return;
+    sandboxSim.forceMode = m;
+    document.querySelectorAll('.sb-fmode').forEach(b => b.classList.toggle('active', b.id === 'sbfm-' + m));
+  }
+
+  function sbMassChange() {
+    const v = +document.getElementById('sl-sb-mass').value;
+    document.getElementById('sb-mass-val').textContent = v + ' кг';
+    if (sandboxSim) sandboxSim.newMass = v;
+  }
+
+  function sbRestChange() {
+    const v = +document.getElementById('sl-sb-rest').value;
+    document.getElementById('sb-rest-val').textContent = v.toFixed(2);
+    if (sandboxSim) sandboxSim.newRestitution = v;
+  }
+
+  function sbFloorMuChange() {
+    const v = +document.getElementById('sl-sb-floormu').value;
+    document.getElementById('sb-floormu-val').textContent = v.toFixed(2);
+    if (sandboxSim) sandboxSim.floorMu = v;
+  }
+
+  function sbWorldToggle() {
+    if (!sandboxSim) return;
+    sandboxSim.gravity  = document.getElementById('sb-gravity').checked;
+    sandboxSim.hasFloor = document.getElementById('sb-floor').checked;
+    sandboxSim.hasWalls = document.getElementById('sb-walls').checked;
+    sandboxSim.airDrag  = document.getElementById('sb-airdrag').checked;
+  }
+
+  function sbRampToggle() {
+    if (!sandboxSim) return;
+    const on = document.getElementById('sb-ramp').checked;
+    sandboxSim.setRamp(on);
+    document.getElementById('sb-ramp-block').style.display = on ? '' : 'none';
+  }
+
+  function sbAngleChange() {
+    const v = +document.getElementById('sl-sb-angle').value;
+    document.getElementById('sb-angle-val').textContent = v + '°';
+    if (sandboxSim) sandboxSim.setRampAngle(v);
+  }
+
+  function sbRampMuChange() {
+    const v = +document.getElementById('sl-sb-rampmu').value;
+    document.getElementById('sb-rampmu-val').textContent = v.toFixed(2);
+    if (sandboxSim) sandboxSim.setRampMu(v);
+  }
+
+  function sbDecompToggle() {
+    if (!sandboxSim) return;
+    sandboxSim.showDecomp = document.getElementById('sb-decomp').checked;
+  }
+
+  function sbDisplayToggle() {
+    if (!sandboxSim) return;
+    sandboxSim.showForces   = document.getElementById('sb-forces').checked;
+    sandboxSim.showVelocity = document.getElementById('sb-vel').checked;
+    sandboxSim.showFBD      = document.getElementById('sb-fbd').checked;
+    sandboxSim.showEnergy   = document.getElementById('sb-energy').checked;
+    sandboxSim.showTrail    = document.getElementById('sb-trail').checked;
+  }
+
+  function sbTimeScale(v, btn) {
+    if (!sandboxSim) return;
+    sandboxSim.timeScale = v;
+    document.querySelectorAll('.sb-time').forEach(b => b.classList.remove('active'));
+    if (btn) btn.classList.add('active');
+  }
+
+  function sbPreset(name) {
+    if (!sandboxSim) return;
+    sandboxSim.preset(name);
+    // sync world checkboxes
+    document.getElementById('sb-gravity').checked  = sandboxSim.gravity;
+    document.getElementById('sb-floor').checked    = sandboxSim.hasFloor;
+    document.getElementById('sb-walls').checked    = sandboxSim.hasWalls;
+    document.getElementById('sb-airdrag').checked  = sandboxSim.airDrag;
+    document.getElementById('sl-sb-floormu').value = sandboxSim.floorMu;
+    document.getElementById('sb-floormu-val').textContent = sandboxSim.floorMu.toFixed(2);
+    // sync ramp
+    document.getElementById('sb-ramp').checked = sandboxSim.ramp;
+    document.getElementById('sb-ramp-block').style.display = sandboxSim.ramp ? '' : 'none';
+    document.getElementById('sl-sb-angle').value = sandboxSim.rampAngle;
+    document.getElementById('sb-angle-val').textContent = sandboxSim.rampAngle + '°';
+    document.getElementById('sl-sb-rampmu').value = sandboxSim.rampMu;
+    document.getElementById('sb-rampmu-val').textContent = sandboxSim.rampMu.toFixed(2);
+    _sbUpdateUI(sandboxSim.info());
+  }
+
+  function sbReset() {
+    if (!sandboxSim) return;
+    sandboxSim.reset();
+    _sbUpdateUI(sandboxSim.info());
+  }
+
+  function _sbUpdateUI(info) {
+    if (!info) return;
+    document.getElementById('dbar-l1').textContent = 'Тел / связей';
+    document.getElementById('dbar-v1').textContent = info.bodies + ' / ' + (info.springs + info.ropes);
+    document.getElementById('dbar-l2').textContent = 'KE (Дж)';
+    document.getElementById('dbar-v2').textContent = info.KE;
+    document.getElementById('dbar-l3').textContent = 'PE (Дж)';
+    document.getElementById('dbar-v3').textContent = info.PE;
+    document.getElementById('dbar-l4').textContent = 'ΣF';
+    document.getElementById('dbar-v4').textContent = info.netF;
+    document.getElementById('dbar-l5').textContent = 'Время';
+    document.getElementById('dbar-v5').textContent = info.time + ' с';
+  }
+
+  /* ── chem sandbox ── */
+
+  function _openChemSandbox() {
+    document.getElementById('sim-topbar-title').textContent = 'Химическая песочница';
+    _simShow('sim-chemsandbox');
+    _simShow('ctrl-chemsandbox');
+
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      const c = document.getElementById('chemsandbox-canvas');
+      if (!chemSandSim) {
+        chemSandSim = new ChemSandboxSim(c);
+        chemSandSim.onUpdate = _chemSandUpdateUI;
+        chemSandSim.onQuizUpdate = _chemSandQuizUI;
+        c.addEventListener('click', e => chemSandSim.handleClick(e));
+        c.addEventListener('mousedown', e => chemSandSim.handleMouseDown(e));
+        c.addEventListener('mousemove', e => chemSandSim.handleMouseMove(e));
+        c.addEventListener('mouseup', e => chemSandSim.handleMouseUp(e));
+        c.addEventListener('wheel', e => chemSandSim.handleWheel(e), { passive: false });
+        c.addEventListener('contextmenu', e => chemSandSim.handleContextMenu(e));
+        _addTouchSupport(c, chemSandSim);
+        _chemSandBuildReagents('all');
+      }
+      chemSandSim.fit();
+      chemSandSim.start();
+      chemSandSim.draw();
+    }));
+  }
+
+  function chemSandCat(cat, el) {
+    document.querySelectorAll('.chemsand-cat').forEach(b => b.classList.remove('active'));
+    el.classList.add('active');
+    if (chemSandSim) chemSandSim.setCategory(cat);
+    _chemSandBuildReagents(cat);
+    if (chemSandSim) chemSandSim.draw();
+  }
+
+  function chemSandPreset(name) { if (chemSandSim) { chemSandSim.preset(name); _chemSandBuildReagents(chemSandSim.filterCat); } }
+  function chemSandReset()         { if (chemSandSim) { chemSandSim.reset(); _chemSandBuildReagents(chemSandSim.filterCat); } }
+  function chemSandResetReaction() { if (chemSandSim) { chemSandSim.resetReaction(); _chemSandBuildReagents(chemSandSim.filterCat); } }
+
+  function chemSandConcChange() {
+    const v = +document.getElementById('sl-csand-conc').value;
+    document.getElementById('csand-conc-val').textContent = v + '%';
+  }
+  function chemSandTempChange() {
+    const v = +document.getElementById('sl-csand-temp').value;
+    document.getElementById('csand-temp-val').textContent = v + '°C';
+  }
+
+  function chemSandAdd(formula) {
+    if (!chemSandSim) return;
+    // toggle: if already in mix — remove, else add
+    if (chemSandSim.mixContents.includes(formula)) {
+      chemSandSim.removeFromMix(formula);
+    } else {
+      chemSandSim.addToMix(formula);
+    }
+    _chemSandBuildReagents(chemSandSim.filterCat);
+  }
+
+  function _chemSandBuildReagents(cat) {
+    const box = document.getElementById('chemsand-reagents');
+    if (!box) return;
+    const subs = ChemSandboxSim.SUBSTANCES;
+    const keys = Object.keys(subs).filter(k => cat === 'all' || subs[k].cat === cat);
+    const inMix = chemSandSim ? chemSandSim.mixContents : [];
+    box.innerHTML = keys.map(k => {
+      const s = subs[k];
+      const active = inMix.includes(k);
+      const cls = active ? 'proj-preset-chip reac-mode-btn active' : 'proj-preset-chip reac-mode-btn';
+      const sf = chemSandSim ? chemSandSim._shortFormula(k) : k;
+      const removeHint = active ? ' (клик — убрать)' : '';
+      return `<button class="${cls}" onclick="chemSandAdd('${k}')" title="${s.name}${removeHint}" style="font-size:.68rem;padding:4px 7px">
+        <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:${s.color};margin-right:3px;vertical-align:middle"></span>${sf}${active ? ' ×' : ''}</button>`;
+    }).join('');
+  }
+
+  function chemSandSetMode(mode, el) {
+    document.querySelectorAll('.chemsand-mode').forEach(b => b.classList.remove('active'));
+    if (el) el.classList.add('active');
+    if (!chemSandSim) return;
+    if (mode === 'quiz') {
+      if (window._simQuizAllowed === false) {
+        LS.toast('Режим заданий недоступен — администратор ограничил доступ', 'error');
+        // revert button state
+        document.querySelectorAll('.chemsand-mode').forEach(b => b.classList.remove('active'));
+        document.getElementById('csand-mode-free')?.classList.add('active');
+        return;
+      }
+      chemSandSim.startQuiz();
+      // reset category filter to 'all' so all reagents are accessible
+      document.querySelectorAll('.chemsand-cat').forEach(b => b.classList.remove('active'));
+      const allBtn = document.querySelector('.chemsand-cat');
+      if (allBtn) allBtn.classList.add('active');
+      _chemSandBuildReagents('all');
+    } else {
+      chemSandSim.stopQuiz();
+      document.getElementById('csand-quiz-question').style.display = 'none';
+      document.getElementById('csand-quiz-result').style.display = 'none';
+      document.getElementById('csand-quiz-next').style.display = 'none';
+      document.getElementById('csand-quiz-score').textContent = '';
+    }
+  }
+
+  function chemSandQuizNext() {
+    if (chemSandSim && chemSandSim._quizMode) {
+      chemSandSim._nextQuizTask();
+      _chemSandBuildReagents(chemSandSim.filterCat);
+    }
+  }
+
+  function _chemSandQuizUI(qi) {
+    const qEl = document.getElementById('csand-quiz-question');
+    const rEl = document.getElementById('csand-quiz-result');
+    const nEl = document.getElementById('csand-quiz-next');
+    const sEl = document.getElementById('csand-quiz-score');
+    if (!qi.active) {
+      qEl.style.display = 'none'; rEl.style.display = 'none'; nEl.style.display = 'none';
+      sEl.textContent = '';
+      return;
+    }
+    qEl.style.display = 'block';
+    qEl.textContent = qi.question || '';
+    sEl.textContent = qi.total > 0 ? `${qi.score}/${qi.total}` : '';
+    if (qi.result) {
+      rEl.style.display = 'block';
+      rEl.style.color = qi.result === 'correct' ? '#7BF5A4' : '#EF476F';
+      rEl.textContent = qi.result === 'correct' ? 'Верно!' : 'Неверно — ' + (qi.answer || '');
+      nEl.style.display = qi.result === 'wrong' ? 'inline-block' : 'none';
+    } else {
+      rEl.style.display = 'none'; nEl.style.display = 'none';
+    }
+  }
+
+  let _lastReportedEquation = null;
+  function _chemSandUpdateUI(info) {
+    document.getElementById('csbar-v1').textContent = info.mixed;
+    document.getElementById('csbar-v3').textContent = info.type || '—';
+    const eqEl = document.getElementById('csbar-v4');
+    eqEl.innerHTML = info.equation || '—';
+    eqEl.title = (info.equation || '').replace(/<[^>]*>/g, '');
+    document.getElementById('csbar-v5').textContent = info.products || '—';
+    const ionEl = document.getElementById('csbar-v6');
+    ionEl.innerHTML = info.ionNet || '—';
+    ionEl.title = (info.ionNet || '').replace(/<[^>]*>/g, '');
+    // rebuild reagent buttons to reflect active state
+    _chemSandBuildReagents(chemSandSim ? chemSandSim.filterCat : 'all');
+    // Report lab activity for gamification (once per unique reaction)
+    if (info.reaction && info.equation && info.equation !== _lastReportedEquation) {
+      _lastReportedEquation = info.equation;
+      if (window.LS?.reportLabActivity) LS.reportLabActivity(1).catch(() => {});
+    }
+  }
+
+  /* ── Cell Division ── */
+  function _openCellDivision(mode) {
+    document.getElementById('sim-topbar-title').textContent = 'Деление клетки';
+    _simShow('sim-celldivision');
+    _simShow('ctrl-celldivision');
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      const canvas = document.getElementById('celldiv-canvas');
+      if (!cellDivSim) {
+        cellDivSim = new CellDivisionSim(canvas);
+        cellDivSim.onUpdate = _cdUpdateUI;
+      }
+      cellDivSim.fit();
+      cellDivSim.setMode(mode || 'mitosis');
+      cellDivSim.start();
+      _cdBuildDots(cellDivSim._phaseIdx);
+      // sync auto button state
+      const autoBtn = document.getElementById('cd-auto-btn');
+      if (autoBtn) { autoBtn.innerHTML = cellDivSim._autoPlay ? '<svg class="ic" viewBox="0 0 24 24"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg> Пауза' : '<svg class="ic" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg> Авто'; }
+      _cdUpdateUI(cellDivSim.info());
+    }));
+  }
+
+  function _cdBuildDots(activeIdx) {
+    const box = document.getElementById('cd-phase-dots');
+    if (!box || !cellDivSim) return;
+    const phases = cellDivSim._phases();
+    box.innerHTML = phases.map((p, i) =>
+      `<div class="cd-phase-dot${i === activeIdx ? ' active' : ''}" onclick="cdJumpPhase(${i})" title="${p.label}"></div>`
+    ).join('');
+  }
+
+  function cdSetMode(mode, btn) {
+    document.querySelectorAll('.cd-mode-btn').forEach(b => b.classList.remove('active'));
+    if (btn) btn.classList.add('active');
+    if (!cellDivSim) return;
+    cellDivSim.setMode(mode);
+    _cdBuildDots(cellDivSim._phaseIdx);
+    _cdUpdateUI(cellDivSim.info());
+  }
+
+  function cdAutoPlay(btn) {
+    if (!cellDivSim) return;
+    cellDivSim.toggleAutoPlay();
+    btn.classList.toggle('active', cellDivSim._autoPlay);
+    btn.innerHTML = cellDivSim._autoPlay ? '<svg class="ic" viewBox="0 0 24 24"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg> Пауза' : '<svg class="ic" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg> Авто';
+  }
+
+  function cdPrevPhase() {
+    if (!cellDivSim) return;
+    cellDivSim.prevPhase();
+    _cdBuildDots(cellDivSim._phaseIdx);
+  }
+
+  function cdNextPhase() {
+    if (!cellDivSim) return;
+    cellDivSim.nextPhase();
+    _cdBuildDots(cellDivSim._phaseIdx);
+  }
+
+  function cdJumpPhase(idx) {
+    if (!cellDivSim) return;
+    cellDivSim.jumpToPhase(idx);
+    _cdBuildDots(idx);
+  }
+
+  function _cdUpdateUI(info) {
+    const v = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };
+    v('cdbar-v1', info.phase || '—');
+    v('cdbar-v2', info.chromN || '—');
+    v('cdbar-v3', info.dna || '—');
+    v('cdbar-v4', (info.index + 1) + ' / ' + info.total);
+    v('cdbar-v5', info.mode === 'mitosis' ? 'Митоз' : 'Мейоз');
+    _cdBuildDots(info.index);
+  }
+
+  /* ── Photosynthesis / Respiration ── */
+  function _openPhotosynthesis(mode) {
+    document.getElementById('sim-topbar-title').textContent = 'Фотосинтез и дыхание';
+    _simShow('sim-photosynthesis');
+    _simShow('ctrl-photosynthesis');
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      const canvas = document.getElementById('photosyn-canvas');
+      if (!photosynSim) {
+        photosynSim = new PhotosynthesisSim(canvas);
+        photosynSim.onUpdate = _psUpdateUI;
+      }
+      photosynSim.fit();
+      photosynSim.setMode(mode || 'photo');
+      photosynSim.start();
+    }));
+  }
+
+  function psSetMode(mode, btn) {
+    document.querySelectorAll('.ps-mode-btn').forEach(b => b.classList.remove('active'));
+    if (btn) btn.classList.add('active');
+    if (photosynSim) photosynSim.setMode(mode);
+  }
+
+  function psLightChange() {
+    const v = +document.getElementById('sl-ps-light').value;
+    document.getElementById('ps-light-val').textContent = v + '%';
+    if (photosynSim) photosynSim.setLightIntensity(v);
+  }
+
+  function psCO2Change() {
+    const v = +document.getElementById('sl-ps-co2').value;
+    document.getElementById('ps-co2-val').textContent = v + '%';
+    if (photosynSim) photosynSim.setCO2(v);
+  }
+
+  function psReset() {
+    if (photosynSim) photosynSim.reset();
+  }
+
+  function _psUpdateUI(info) {
+    const v = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };
+    v('psbar-v1', info.atpRate || '0');
+    v('psbar-v2', info.o2 || '0');
+    v('psbar-v3', info.co2 || '0');
+    v('psbar-v4', info.efficiency ? info.efficiency + '%' : '—');
+    v('psbar-v5', info.mode === 'photo' ? 'Фотосинтез' : 'Дыхание');
+  }
+
+  /* ── Angry Birds ── */
+  let angryBirdsSim = null;
+
+  function _openAngryBirds() {
+    document.getElementById('sim-topbar-title').textContent = 'Angry Birds Physics';
+    _simShow('sim-angrybirds');
+    _simShow('ctrl-angrybirds');
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      const c = document.getElementById('angrybirds-canvas');
+      if (!angryBirdsSim) {
+        angryBirdsSim = new AngryBirdsSim(c);
+        angryBirdsSim.onUpdate = _abUpdateUI;
+        c.addEventListener('mousedown', e => angryBirdsSim.handleMouseDown(e));
+        c.addEventListener('mousemove', e => angryBirdsSim.handleMouseMove(e));
+        c.addEventListener('mouseup',   e => angryBirdsSim.handleMouseUp(e));
+        c.addEventListener('mouseleave', e => angryBirdsSim.handleMouseUp(e));
+        _addTouchSupport(c, angryBirdsSim);
+      }
+      angryBirdsSim.fit();
+      angryBirdsSim.start();
+    }));
+  }
+
+  function abLevel(n, btn) {
+    document.querySelectorAll('.ab-lvl-btn').forEach(b => b.classList.remove('active'));
+    if (btn) btn.classList.add('active');
+    if (angryBirdsSim) angryBirdsSim.loadLevel(n);
+  }
+
+  function angryBirdsRestart() {
+    if (angryBirdsSim) angryBirdsSim.restart();
+  }
+
+  function _abUpdateUI(info) {
+    const v = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };
+    v('abbar-v1', info.level);
+    v('abbar-v2', info.birds);
+    v('abbar-v3', info.pigs);
+    v('abbar-v4', info.score.toLocaleString('ru'));
+    v('abbar-v5', info.planet);
+    /* sync level button highlight */
+    document.querySelectorAll('.ab-lvl-btn').forEach((b, i) => {
+      b.classList.toggle('active', i === (info.level - 1));
+    });
+  }
+
+  /* ── quadratic ── */
+
+  function _openQuadratic() {
+    document.getElementById('sim-topbar-title').textContent = 'Корни квадратного уравнения';
+    _simShow('sim-quadratic');
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      if (!quadSim) {
+        quadSim = new QuadraticSim(document.getElementById('quadratic-canvas'));
+        quadSim.onUpdate = _quadUpdateUI;
+      }
+      quadSim.fit();
+      quadSim.draw();
+      quadSim._emit();
+    }));
+  }
+
+  function quadParam(name, val) {
+    const v = parseFloat(val);
+    document.getElementById('quad-' + name + '-val').textContent = v % 1 === 0 ? v : v.toFixed(1);
+    if (quadSim) quadSim.setParams({ [name]: v });
+  }
+
+  function quadPreset(a, b, c) {
+    document.getElementById('sl-quad-a').value = a; document.getElementById('quad-a-val').textContent = a;
+    document.getElementById('sl-quad-b').value = b; document.getElementById('quad-b-val').textContent = b;
+    document.getElementById('sl-quad-c').value = c; document.getElementById('quad-c-val').textContent = c;
+    if (quadSim) quadSim.setParams({ a, b, c });
+  }
+
+  function _quadUpdateUI(info) {
+    const v = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };
+    v('qbar-v1', 'D = ' + info.D);
+    v('qbar-v2', info.roots);
+    v('qbar-v3', info.vertex);
+    v('qbar-v4', info.equation);
+  }
+
+  /* ── normal distribution ── */
+  let ndSim = null;
+
+  function _openNormalDist() {
+    document.getElementById('sim-topbar-title').textContent = 'Нормальное распределение';
+    _simShow('sim-normaldist');
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      if (!ndSim) {
+        ndSim = new NormalDistSim(document.getElementById('normaldist-canvas'));
+        ndSim.onUpdate = _ndUpdateUI;
+      }
+      ndSim.fit();
+      ndSim.draw();
+      ndSim._emit();
+    }));
+  }
+
+  function ndParam(name, val) {
+    const v = parseFloat(val);
+    const elId = name === 'mu' ? 'nd-mu-val' : 'nd-sigma-val';
+    document.getElementById(elId).textContent = v % 1 === 0 ? v : v.toFixed(1);
+    if (ndSim) ndSim.setParams({ [name]: v });
+  }
+
+  function ndShade(mode, btn) {
+    document.querySelectorAll('.nd-shade-btn').forEach(b => b.classList.remove('active'));
+    if (btn) btn.classList.add('active');
+    if (ndSim) ndSim.setParams({ shade: mode });
+  }
+
+  function ndPreset(mu, sigma) {
+    document.getElementById('sl-nd-mu').value = mu;     document.getElementById('nd-mu-val').textContent = mu;
+    document.getElementById('sl-nd-sigma').value = sigma; document.getElementById('nd-sigma-val').textContent = sigma;
+    if (ndSim) ndSim.setParams({ mu, sigma });
+  }
+
+  function _ndUpdateUI(info) {
+    const v = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };
+    v('ndbar-v1', info.mu);
+    v('ndbar-v2', info.sigma);
+    v('ndbar-v3', info.peak);
+    v('ndbar-v4', info.area);
+  }
+
+  /* ── graph transform ── */
+  let gtSim = null;
+
+  function _openGraphTransform() {
+    document.getElementById('sim-topbar-title').textContent = 'Трансформации графиков';
+    _simShow('sim-graphtransform');
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      if (!gtSim) {
+        gtSim = new GraphTransformSim(document.getElementById('graphtransform-canvas'));
+        gtSim.onUpdate = _gtUpdateUI;
+      }
+      gtSim.fit();
+      gtSim.draw();
+      gtSim._emit();
+    }));
+  }
+
+  function gtParam(name, val) {
+    const v = parseFloat(val);
+    document.getElementById('gt-' + name + '-val').textContent = v % 1 === 0 ? v : v.toFixed(1);
+    if (gtSim) gtSim.setParams({ [name]: v });
+  }
+
+  function gtBase(name, btn) {
+    document.querySelectorAll('.gt-base-btn').forEach(b => b.classList.remove('active'));
+    if (btn) btn.classList.add('active');
+    if (gtSim) gtSim.setBase(name);
+  }
+
+  function gtEffect(a, k, b, c) {
+    document.getElementById('sl-gt-a').value = a; document.getElementById('gt-a-val').textContent = a;
+    document.getElementById('sl-gt-k').value = k; document.getElementById('gt-k-val').textContent = k;
+    document.getElementById('sl-gt-b').value = b; document.getElementById('gt-b-val').textContent = b;
+    document.getElementById('sl-gt-c').value = c; document.getElementById('gt-c-val').textContent = c;
+    if (gtSim) gtSim.setParams({ a, k, b, c });
+  }
+
+  function _gtUpdateUI(info) {
+    const v = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };
+    v('gtbar-v1', info.base);
+    v('gtbar-v2', info.a);
+    v('gtbar-v3', info.k);
+    v('gtbar-v4', info.b);
+    v('gtbar-v5', info.c);
+  }
+
+  /* ── pendulum ── */
+  let pendSim = null;
+
+  function _openPendulum() {
+    document.getElementById('sim-topbar-title').textContent = 'Маятник';
+    _simShow('sim-pendulum');
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      if (!pendSim) {
+        pendSim = new PendulumSim(document.getElementById('pendulum-canvas'));
+        pendSim.onUpdate = _pendUpdateUI;
+      }
+      pendSim.fit();
+      pendSim.play();
+    }));
+  }
+
+  function pendParam(name, val) {
+    const v = parseFloat(val);
+    const ids = { theta: 'pend-theta-val', L: 'pend-L-val', g: 'pend-g-val', damping: 'pend-damp-val' };
+    const el = document.getElementById(ids[name]);
+    if (el) el.textContent = v % 1 === 0 ? v : v.toFixed(name === 'g' ? 2 : 1);
+    if (pendSim) pendSim.setParams({ [name]: v });
+  }
+
+  function pendPreset(theta, L, g, damp) {
+    document.getElementById('sl-pend-theta').value = theta; document.getElementById('pend-theta-val').textContent = theta;
+    document.getElementById('sl-pend-L').value = L;         document.getElementById('pend-L-val').textContent = L;
+    document.getElementById('sl-pend-g').value = g;         document.getElementById('pend-g-val').textContent = g;
+    document.getElementById('sl-pend-damp').value = damp;   document.getElementById('pend-damp-val').textContent = damp;
+    if (pendSim) {
+      pendSim.setParams({ theta, L, g, damping: damp });
+      pendSim.play();
+    }
+  }
+
+  function _pendUpdateUI(info) {
+    const v = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };
+    v('pendbar-v1', info.angle);
+    v('pendbar-v2', info.omega);
+    v('pendbar-v3', info.period);
+    v('pendbar-v4', info.energy);
+  }
+
+  /* ── equilibrium ── */
+
+  function _openEquilibrium() {
+    document.getElementById('sim-topbar-title').textContent = 'Химическое равновесие';
+    _simShow('sim-equilibrium');
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      if (!eqSim) {
+        eqSim = new EquilibriumSim(document.getElementById('equilibrium-canvas'));
+        eqSim.onUpdate = _eqUpdateUI;
+      }
+      eqSim.fit();
+      eqSim.reset();
+      eqSim.play();
+    }));
+  }
+
+  function eqParam(name, val) {
+    const v = parseFloat(val);
+    const ids = { T: 'eq-T-val', Ea_f: 'eq-Eaf-val', Ea_r: 'eq-Ear-val' };
+    const el = document.getElementById(ids[name]);
+    if (el) el.textContent = v;
+    if (eqSim) eqSim.setParams({ [name]: v });
+  }
+
+  function eqPreset(name) {
+    if (eqSim) { eqSim.preset(name); eqSim.play(); }
+    const defs = { default: [300,50,55], exothermic: [280,35,65], endothermic: [350,65,35], excess_A: [300,50,55] };
+    const d = defs[name] || defs.default;
+    document.getElementById('sl-eq-T').value = d[0]; document.getElementById('eq-T-val').textContent = d[0];
+    document.getElementById('sl-eq-Eaf').value = d[1]; document.getElementById('eq-Eaf-val').textContent = d[1];
+    document.getElementById('sl-eq-Ear').value = d[2]; document.getElementById('eq-Ear-val').textContent = d[2];
+  }
+
+  function _eqUpdateUI(info) {
+    const v = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };
+    v('eqbar-v1', info.keq);
+    v('eqbar-v2', info.Q);
+    v('eqbar-v3', info.direction);
+    v('eqbar-v4', info.nA + '|' + info.nB + '|' + info.nC + '|' + info.nD);
+  }
+
+  /* ── thin lens ── */
+
+  function _openThinLens() {
+    document.getElementById('sim-topbar-title').textContent = 'Тонкая линза';
+    _simShow('sim-thinlens');
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      if (!lensSim) {
+        lensSim = new ThinLensSim(document.getElementById('thinlens-canvas'));
+        lensSim.onUpdate = _lensUpdateUI;
+      }
+      lensSim.fit();
+      lensSim.draw();
+      lensSim._emit();
+    }));
+  }
+
+  function lensParam(name, val) {
+    const v = parseFloat(val);
+    const ids = { f: 'lens-f-val', d: 'lens-d-val', h: 'lens-h-val' };
+    const el = document.getElementById(ids[name]);
+    if (el) el.textContent = v;
+    if (lensSim) lensSim.setParams({ [name]: v });
+  }
+
+  function lensPreset(f, d, h) {
+    document.getElementById('sl-lens-f').value = f; document.getElementById('lens-f-val').textContent = f;
+    document.getElementById('sl-lens-d').value = d; document.getElementById('lens-d-val').textContent = d;
+    document.getElementById('sl-lens-h').value = h; document.getElementById('lens-h-val').textContent = h;
+    if (lensSim) lensSim.setParams({ f, d, h });
+  }
+
+  function _lensUpdateUI(info) {
+    const v = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };
+    v('lensbar-v1', info.f);
+    v('lensbar-v2', info.dPrime === Infinity ? '∞' : info.dPrime);
+    v('lensbar-v3', info.M === Infinity ? '∞' : info.M);
+    v('lensbar-v4', info.imageType);
+  }
+
+  /* ── mirrors ── */
+
+  let mirrorSim = null;
+
+  function _openMirror() {
+    document.getElementById('sim-topbar-title').textContent = 'Зеркала';
+    _simShow('sim-mirrors');
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      if (!mirrorSim) {
+        mirrorSim = new MirrorSim(document.getElementById('mirror-canvas'));
+        mirrorSim.onUpdate = _mirrorUpdateUI;
+        mirrorSim.onAnimate = (d) => {
+          const sl = document.getElementById('sl-mirror-d');
+          const lbl = document.getElementById('mirror-d-val');
+          if (sl) sl.value = Math.round(d);
+          if (lbl) lbl.textContent = Math.round(d);
+        };
+      }
+      mirrorSim.fit();
+      mirrorSim.draw();
+      mirrorSim._emit();
+      if (mirrorSim._showPhotons && !mirrorSim._photonRaf) mirrorSim._startPhotons();
+    }));
+  }
+
+  function mirrorType(type, el) {
+    document.querySelectorAll('.mirror-type-btn').forEach(b => b.classList.remove('active'));
+    if (el) el.classList.add('active');
+    const fRow = document.getElementById('mirror-f-row');
+    if (fRow) fRow.style.display = type === 'flat' ? 'none' : 'flex';
+    if (mirrorSim) mirrorSim.setType(type);
+    const pb = document.getElementById('mirror-play-btn');
+    if (pb) { pb.textContent = '▶ Анимация'; }
+    const sl = document.getElementById('sl-mirror-d');
+    if (sl) sl.disabled = false;
+  }
+
+  function mirrorParam(name, val) {
+    const v = parseFloat(val);
+    const ids = { f: 'mirror-f-val', d: 'mirror-d-val', h: 'mirror-h-val' };
+    const el = document.getElementById(ids[name]);
+    if (el) el.textContent = v;
+    if (mirrorSim) mirrorSim.setParams({ [name]: v });
+  }
+
+  function mirrorPreset(name) {
+    const P = {
+      flat:    { type: 'flat',    f: 120, d: 200, h: 60 },
+      far:     { type: 'concave', f: 100, d: 280, h: 60 },
+      '2f':    { type: 'concave', f: 100, d: 200, h: 60 },
+      between: { type: 'concave', f: 100, d: 140, h: 60 },
+      near:    { type: 'concave', f: 100, d: 60,  h: 60 },
+      convex:  { type: 'convex',  f: 100, d: 200, h: 60 },
+    };
+    const p = P[name]; if (!p) return;
+    document.querySelectorAll('.mirror-type-btn').forEach(b => b.classList.remove('active'));
+    const tb = document.getElementById(`mtype-${p.type}`);
+    if (tb) tb.classList.add('active');
+    const fRow = document.getElementById('mirror-f-row');
+    if (fRow) fRow.style.display = p.type === 'flat' ? 'none' : 'flex';
+    document.getElementById('sl-mirror-f').value = p.f; document.getElementById('mirror-f-val').textContent = p.f;
+    document.getElementById('sl-mirror-d').value = p.d; document.getElementById('mirror-d-val').textContent = p.d;
+    document.getElementById('sl-mirror-h').value = p.h; document.getElementById('mirror-h-val').textContent = p.h;
+    if (mirrorSim) { mirrorSim.setType(p.type); mirrorSim.setParams({ f: p.f, d: p.d, h: p.h }); }
+  }
+
+  function mirrorTogglePlay(btn) {
+    if (!mirrorSim) return;
+    mirrorSim.togglePlay();
+    const playing = mirrorSim._playing;
+    if (btn) btn.textContent = playing ? '⏸ Стоп' : '▶ Анимация';
+    const sl = document.getElementById('sl-mirror-d');
+    if (sl) sl.disabled = playing;
+  }
+
+  function mirrorSetSpeed(val)       { if (mirrorSim) mirrorSim.setAnimSpeed(parseFloat(val)); }
+  function mirrorToggle(name, val)   { if (mirrorSim) mirrorSim.setToggle(name, val); }
+  function mirrorStepNext()          { if (mirrorSim) mirrorSim.stepNext(); }
+  function mirrorStepReset()         { if (mirrorSim) mirrorSim.stepReset(); }
+  function mirrorSetPointMode(val)   { if (mirrorSim) mirrorSim.setPointMode(val); }
+
+  function _mirrorUpdateUI(info) {
+    const v = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };
+    v('mirrorbar-v1', info.f);
+    v('mirrorbar-v5', Math.round(info.d));
+    v('mirrorbar-v2', info.dPrime === Infinity ? '∞' : info.dPrime);
+    v('mirrorbar-v3', info.M === Infinity ? '∞' : info.M);
+    v('mirrorbar-v4', info.imageType);
+  }
+
+  /* ── isoprocesses ── */
+
+  let isoSim = null;
+
+  function _openIsoprocess() {
+    document.getElementById('sim-topbar-title').textContent = 'Изопроцессы';
+    _simShow('sim-isoprocess');
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      if (!isoSim) {
+        isoSim = new IsoprocessSim(document.getElementById('isoprocess-canvas'));
+        isoSim.onUpdate = _isoUpdateUI;
+        isoSim.setGamma(1.667);
+      }
+      isoSim.fit();
+      isoSim.draw();
+      isoSim._emit();
+    }));
+  }
+
+  function isoProc(proc, el) {
+    document.querySelectorAll('.iso-proc-btn').forEach(b => b.classList.remove('active'));
+    if (el) el.classList.add('active');
+    if (isoSim) isoSim.setProcess(proc);
+  }
+
+  function isoGamma(g, el) {
+    document.querySelectorAll('.iso-gamma-btn').forEach(b => b.classList.remove('active'));
+    if (el) el.classList.add('active');
+    if (isoSim) isoSim.setGamma(g);
+  }
+
+  function isoParam(name, val) {
+    const v = parseFloat(val);
+    if (name === 'P1') { document.getElementById('iso-p1-val').textContent = v.toFixed(1); if (isoSim) isoSim.setParams({ P1: v }); }
+    if (name === 'V1') { document.getElementById('iso-v1-val').textContent = v;             if (isoSim) isoSim.setParams({ V1: v }); }
+  }
+
+  function isoRatio(val) { if (isoSim) isoSim.setRatio(parseFloat(val)); }
+
+  function isoPreset(name) {
+    const P = {
+      iso_expand: { proc:'isothermal', P1:4,   V1:8,  ratio:0.75, gamma:1.4 },
+      iso_comp:   { proc:'isothermal', P1:1.5, V1:20, ratio:0.25, gamma:1.4 },
+      heat_iso:   { proc:'isochoric',  P1:2,   V1:10, ratio:0.72, gamma:1.667 },
+      adiab_exp:  { proc:'adiabatic',  P1:5,   V1:6,  ratio:0.7,  gamma:1.667 },
+    };
+    const p = P[name]; if (!p) return;
+    document.querySelectorAll('.iso-proc-btn').forEach(b => b.classList.remove('active'));
+    const pb = document.getElementById(`iproc-${p.proc}`); if (pb) pb.classList.add('active');
+    document.querySelectorAll('.iso-gamma-btn').forEach(b => b.classList.remove('active'));
+    const gb = document.getElementById(p.gamma === 1.4 ? 'igamma-14' : 'igamma-167'); if (gb) gb.classList.add('active');
+    document.getElementById('sl-iso-p1').value   = p.P1;    document.getElementById('iso-p1-val').textContent   = p.P1.toFixed(1);
+    document.getElementById('sl-iso-v1').value   = p.V1;    document.getElementById('iso-v1-val').textContent   = p.V1;
+    document.getElementById('sl-iso-ratio').value = p.ratio;
+    if (isoSim) { isoSim.setGamma(p.gamma); isoSim.setProcess(p.proc); isoSim.setParams({ P1: p.P1, V1: p.V1 }); isoSim.setRatio(p.ratio); }
+  }
+
+  function _isoUpdateUI(info) {
+    const v = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };
+    v('isobar-t1', info.T1);
+    v('isobar-t2', info.T2);
+    v('isobar-w',  info.W);
+    v('isobar-q',  info.Q);
+    v('isobar-du', info.dU);
+  }
+
+  /* ── titration ── */
+
+  function _openTitration() {
+    document.getElementById('sim-topbar-title').textContent = 'pH и кривая титрования';
+    _simShow('sim-titration');
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      if (!titrSim) {
+        titrSim = new TitrationSim(document.getElementById('titration-canvas'));
+        titrSim.onUpdate = _titrUpdateUI;
+      }
+      titrSim.fit();
+      titrSim.reset();
+      titrSim.play();
+    }));
+  }
+
+  function titrParam(name, val) {
+    const v = parseFloat(val);
+    const ids = { acidConc: 'titr-ac-val', baseConc: 'titr-bc-val', acidVol: 'titr-vol-val' };
+    const el = document.getElementById(ids[name]);
+    if (el) el.textContent = name === 'acidVol' ? v : v.toFixed(2);
+    if (titrSim) titrSim.setParams({ [name]: v });
+  }
+
+  function titrIndicator(name, btn) {
+    document.querySelectorAll('.titr-ind-btn').forEach(b => b.classList.remove('active'));
+    if (btn) btn.classList.add('active');
+    if (titrSim) titrSim.setParams({ indicator: name });
+  }
+
+  function titrPreset(name) {
+    if (titrSim) { titrSim.preset(name); titrSim.play(); }
+    const defs = { strong_strong: [0.1,0.1,50], weak_strong: [0.1,0.1,50], concentrated: [0.5,0.5,25] };
+    const d = defs[name] || defs.strong_strong;
+    document.getElementById('sl-titr-ac').value = d[0]; document.getElementById('titr-ac-val').textContent = d[0].toFixed(2);
+    document.getElementById('sl-titr-bc').value = d[1]; document.getElementById('titr-bc-val').textContent = d[1].toFixed(2);
+    document.getElementById('sl-titr-vol').value = d[2]; document.getElementById('titr-vol-val').textContent = d[2];
+  }
+
+  function _titrUpdateUI(info) {
+    const v = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };
+    v('titrbar-v1', info.pH);
+    v('titrbar-v2', info.baseAdded + ' мл');
+    v('titrbar-v3', info.eqPoint + ' мл');
+    const indNames = { phenolphthalein: 'Фенолф.', methyl_orange: 'Метилор.', litmus: 'Лакмус' };
+    v('titrbar-v4', indNames[info.indicator] || info.indicator);
+  }
+
+  /* ── refraction ── */
+
+  function _openRefraction() {
+    document.getElementById('sim-topbar-title').textContent = 'Преломление света';
+    _simShow('sim-refraction');
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      if (!refrSim) {
+        refrSim = new RefractionSim(document.getElementById('refraction-canvas'));
+        refrSim.onUpdate = _refrUpdateUI;
+      }
+      refrSim.fit();
+      refrSim.draw();
+      refrSim._emit();
+    }));
+  }
+
+  function refrParam(name, val) {
+    const v = parseFloat(val);
+    const ids = { n1: 'refr-n1-val', n2: 'refr-n2-val', angle: 'refr-angle-val' };
+    const el = document.getElementById(ids[name]);
+    if (el) el.textContent = name === 'angle' ? v : v.toFixed(2);
+    if (refrSim) refrSim.setParams({ [name]: v });
+  }
+
+  function refrPreset(n1, n2, angle) {
+    document.getElementById('sl-refr-n1').value = n1; document.getElementById('refr-n1-val').textContent = n1.toFixed(2);
+    document.getElementById('sl-refr-n2').value = n2; document.getElementById('refr-n2-val').textContent = n2.toFixed(2);
+    document.getElementById('sl-refr-angle').value = angle; document.getElementById('refr-angle-val').textContent = angle;
+    if (refrSim) refrSim.setParams({ n1, n2, angle });
+  }
+
+  function _refrUpdateUI(info) {
+    const v = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };
+    v('refrbar-v1', info.angle1 + '°');
+    v('refrbar-v2', info.isTIR ? 'ПВО' : info.angle2 + '°');
+    v('refrbar-v3', info.criticalAngle !== null ? info.criticalAngle + '°' : '—');
+    v('refrbar-v4', info.isTIR ? 'Да' : 'Нет');
+  }
+
+  /* ── probability ── */
+
+  function _openProbability() {
+    document.getElementById('sim-topbar-title').textContent = 'Теория вероятностей';
+    _simShow('sim-probability');
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      if (!probSim) {
+        probSim = new ProbabilitySim(document.getElementById('probability-canvas'));
+        probSim.onUpdate = _probUpdateUI;
+      }
+      probSim.fit();
+      probSim.reset();
+      probSim.play();
+    }));
+  }
+
+  function probMode(mode, btn) {
+    document.querySelectorAll('.prob-mode-btn').forEach(b => b.classList.remove('active'));
+    if (btn) btn.classList.add('active');
+    if (probSim) { probSim.setParams({ mode }); probSim.reset(); probSim.play(); }
+  }
+
+  function probPreset(mode, trials) {
+    document.querySelectorAll('.prob-mode-btn').forEach(b => {
+      b.classList.toggle('active', b.textContent.toLowerCase().includes(mode === 'coin' ? 'монет' : mode === 'dice2' ? '2 куб' : 'кубик'));
+    });
+    if (probSim) { probSim.setParams({ mode, trials }); probSim.reset(); probSim.play(); }
+  }
+
+  function _probUpdateUI(info) {
+    const v = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };
+    v('probbar-v1', info.totalTrials);
+    v('probbar-v2', typeof info.maxDeviation === 'number' ? (info.maxDeviation * 100).toFixed(1) + '%' : '—');
+    v('probbar-v3', typeof info.chiSquare === 'number' ? info.chiSquare.toFixed(2) : '—');
+    const modeNames = { coin: 'Монета', dice: 'Кубик', dice2: '2 кубика' };
+    v('probbar-v4', modeNames[info.mode] || info.mode);
+  }
+
+  /* ── bohr atom ── */
+
+  function _openBohrAtom() {
+    document.getElementById('sim-topbar-title').textContent = 'Атом Бора';
+    _simShow('sim-bohratom');
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      if (!bohrSim) {
+        bohrSim = new BohrAtomSim(document.getElementById('bohratom-canvas'));
+        bohrSim.onUpdate = _bohrUpdateUI;
+      }
+      bohrSim.fit();
+      bohrSim.play();
+    }));
+  }
+
+  function bohrLevel(n) {
+    if (bohrSim) {
+      const from = bohrSim.info().level;
+      if (from !== n) bohrSim.transition(from, n);
+    }
+  }
+
+  function bohrTransition(from, to) {
+    if (bohrSim) bohrSim.transition(from, to);
+  }
+
+  function _bohrUpdateUI(info) {
+    const v = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };
+    v('bohrbar-v1', info.level);
+    v('bohrbar-v2', info.energy.toFixed(2));
+    if (info.lastTransition) {
+      v('bohrbar-v3', info.lastTransition.wavelength.toFixed(0));
+      v('bohrbar-v4', info.lastTransition.series || '—');
+    }
+  }
+
+  /* ── electrolysis ── */
+
+  function _openElectrolysis() {
+    document.getElementById('sim-topbar-title').textContent = 'Электролиз';
+    _simShow('sim-electrolysis');
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      if (!elecSim) {
+        elecSim = new ElectrolysisSim(document.getElementById('electrolysis-canvas'));
+        elecSim.onUpdate = _elecUpdateUI;
+      }
+      elecSim.fit();
+      elecSim.reset();
+      elecSim.play();
+    }));
+  }
+
+  function elecParam(name, val) {
+    const v = parseFloat(val);
+    if (name === 'voltage') document.getElementById('elec-V-val').textContent = v;
+    if (elecSim) elecSim.setParams({ [name]: v });
+  }
+
+  function elecPreset(name, btn) {
+    document.querySelectorAll('.elec-type-btn').forEach(b => b.classList.remove('active'));
+    if (btn) btn.classList.add('active');
+    const voltages = { nacl: 6, cuso4: 4, h2so4: 3 };
+    const vt = voltages[name] || 6;
+    document.getElementById('sl-elec-V').value = vt; document.getElementById('elec-V-val').textContent = vt;
+    if (elecSim) { elecSim.setParams({ electrolyte: name, voltage: vt }); elecSim.reset(); elecSim.play(); }
+  }
+
+  function _elecUpdateUI(info) {
+    const v = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };
+    v('elecbar-v1', typeof info.current === 'number' ? info.current.toFixed(2) : '—');
+    v('elecbar-v2', typeof info.massDeposited === 'number' ? info.massDeposited.toFixed(3) + ' г' : '—');
+    v('elecbar-v3', typeof info.gasVolume === 'number' ? info.gasVolume.toFixed(1) : '—');
+    v('elecbar-v4', typeof info.time === 'number' ? info.time.toFixed(0) + ' с' : '—');
+  }
+
+  /* ── waves ── */
+  function _openWaves() {
+    document.getElementById('sim-topbar-title').textContent = 'Волны и звук';
+    document.getElementById('ctrl-waves').style.display = '';
+    _simShow('sim-waves');
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      if (!wavesSim) {
+        wavesSim = new WavesSim(document.getElementById('waves-canvas'));
+        wavesSim.onUpdate = _wavesUpdateUI;
+      }
+      wavesSim.fit();
+      wavesSim.reset();
+      wavesSim.play();
+      _wavesUpdateUI(wavesSim.info());
+    }));
+  }
+
+  function wavesMode(mode, btn) {
+    document.querySelectorAll('.wave-mode-btn').forEach(b => b.classList.remove('active'));
+    if (btn) btn.classList.add('active');
+    document.getElementById('waves-w2-section').style.display = mode === 'superposition' ? '' : 'none';
+    document.getElementById('waves-n-section').style.display  = mode === 'standing'      ? '' : 'none';
+    if (wavesSim) wavesSim.setMode(mode);
+  }
+
+  function wavesParam(name, val) {
+    const v = parseFloat(val);
+    const el = (id, txt) => { const e = document.getElementById(id); if (e) e.textContent = txt; };
+    if (name === 'A1')    el('waves-A1-val',    v);
+    if (name === 'f1')    el('waves-f1-val',    v.toFixed(1) + ' Гц');
+    if (name === 'phi1')  el('waves-phi1-val',  v.toFixed(1));
+    if (name === 'A2')    el('waves-A2-val',    v);
+    if (name === 'f2')    el('waves-f2-val',    v.toFixed(1) + ' Гц');
+    if (name === 'phi2')  el('waves-phi2-val',  v.toFixed(1));
+    if (name === 'speed') el('waves-speed-val', '\u00d7' + v.toFixed(1));
+    if (wavesSim) wavesSim.setParams({ [name]: v });
+  }
+
+  function wavesN(n, btn) {
+    document.querySelectorAll('.wave-n-btn').forEach(b => b.classList.remove('active'));
+    if (btn) btn.classList.add('active');
+    if (wavesSim) wavesSim.setParams({ n });
+  }
+
+  function wavesPreset(name) {
+    const presets = {
+      constructive: { A1: 50, f1: 1.0, phi1: 0, A2: 50, f2: 1.0, phi2: 0 },
+      destructive:  { A1: 50, f1: 1.0, phi1: 0, A2: 50, f2: 1.0, phi2: 3.14 },
+      beats:        { A1: 50, f1: 1.0, phi1: 0, A2: 50, f2: 1.3, phi2: 0 },
+    };
+    const p = presets[name]; if (!p) return;
+    document.getElementById('sl-waves-A1').value   = p.A1;
+    document.getElementById('sl-waves-f1').value   = p.f1;
+    document.getElementById('sl-waves-phi1').value = p.phi1;
+    document.getElementById('sl-waves-A2').value   = p.A2;
+    document.getElementById('sl-waves-f2').value   = p.f2;
+    document.getElementById('sl-waves-phi2').value = p.phi2;
+    document.getElementById('waves-A1-val').textContent   = p.A1;
+    document.getElementById('waves-f1-val').textContent   = p.f1.toFixed(1) + ' Гц';
+    document.getElementById('waves-phi1-val').textContent = p.phi1.toFixed(1);
+    document.getElementById('waves-A2-val').textContent   = p.A2;
+    document.getElementById('waves-f2-val').textContent   = p.f2.toFixed(1) + ' Гц';
+    document.getElementById('waves-phi2-val').textContent = p.phi2.toFixed(1);
+    if (wavesSim) wavesSim.setParams({ A1: p.A1, f1: p.f1, phi1: p.phi1, A2: p.A2, f2: p.f2, phi2: p.phi2 });
+  }
+
+  function wavesPlayPause() {
+    if (!wavesSim) return;
+    const btn = document.getElementById('waves-play-btn');
+    if (wavesSim._paused) {
+      wavesSim.play();
+      btn.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>';
+    } else {
+      wavesSim.pause();
+      btn.innerHTML = '<svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>';
+    }
+  }
+
+  function _wavesUpdateUI(info) {
+    const v = (id, val) => { const e = document.getElementById(id); if (e) e.textContent = val; };
+    v('wavesbar-T',   info.T);
+    v('wavesbar-lam', info.lambda);
+    v('wavesbar-v',   info.v);
+    v('wavesbar-f',   (+info.f1).toFixed(1));
+  }
+
+  /* ── crystal lattice (3D) ── */
+  let crystalSim = null;
+  function _openCrystal() {
+    document.getElementById('sim-topbar-title').textContent = 'Кристаллическая решётка';
+    _simShow('sim-crystal');
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      if (!crystalSim) {
+        crystalSim = new CrystalSim(document.getElementById('crystal-container'));
+      } else {
+        crystalSim.fit();
+        crystalSim.play();
+      }
+    }));
+  }
+  function setCrystal(type, btn) {
+    document.querySelectorAll('.crystal-type-btn').forEach(b => { b.classList.remove('active'); b.style.borderColor = ''; b.style.color = ''; });
+    btn.classList.add('active');
+    btn.style.borderColor = '#9B5DE5'; btn.style.color = '#9B5DE5';
+    if (crystalSim) crystalSim.setLattice(type);
+  }
+
+  /* ── molecular orbitals (3D) ── */
+  let orbitalsSim = null;
+  function _openOrbitals() {
+    document.getElementById('sim-topbar-title').textContent = 'Молекулярные орбитали';
+    _simShow('sim-orbitals');
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      if (!orbitalsSim) {
+        orbitalsSim = new OrbitalsSim(document.getElementById('orbitals-container'));
+      } else {
+        orbitalsSim.fit();
+        orbitalsSim.play();
+      }
+    }));
+  }
+  function setOrbital(mode, btn) {
+    document.querySelectorAll('.orbital-mode-btn').forEach(b => { b.classList.remove('active'); b.style.borderColor = ''; b.style.color = ''; });
+    btn.classList.add('active');
+    btn.style.borderColor = '#9B5DE5'; btn.style.color = '#9B5DE5';
+    if (orbitalsSim) orbitalsSim.setMode(mode);
+  }
+
+  /* ── stereometry 3D ── */
+  let stereoSim = null;
+
+  // which params are relevant per figure type
+  const STEREO_PARAM_MAP = {
+    cube:           ['a'],
+    parallelepiped: ['a','b','c'],
+    pyramid:        ['a','h'],
+    tetrahedron:    ['a'],
+    cylinder:       ['r','h'],
+    cone:           ['r','h'],
+    trunccone:      ['R','r','h'],
+    sphere:         ['r'],
+    prism:          ['a','n','h'],
+  };
+
+  function _openStereo() {
+    document.getElementById('sim-topbar-title').textContent = 'Стереометрия 3D';
+    _simShow('sim-stereo');
+    document.getElementById('stereo-stats').style.display = '';
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      if (!stereoSim) {
+        stereoSim = new StereoSim(document.getElementById('stereo-container'));
+        stereoSim.onUpdate = _stereoUpdateUI;
+      } else {
+        stereoSim.fit();
+        stereoSim.play();
+      }
+      _stereoShowParams(stereoSim.figureType || 'cube');
+      _stereoUpdateUI(stereoSim.info());
+      _stereoUpdateFormulas();
+    }));
+  }
+
+  function setStereoFigure(type, btn) {
+    document.querySelectorAll('.stereo-fig-btn').forEach(b => b.classList.remove('active'));
+    if (btn) btn.classList.add('active');
+    if (stereoSim) {
+      stereoSim.setFigure(type);
+      _stereoShowParams(type);
+      _stereoUpdateFormulas();
+      // reset section/unfold/sphere buttons
+      document.getElementById('sect-toggle').classList.remove('active');
+      document.getElementById('stereo-unfold-btn').classList.remove('active');
+      document.getElementById('stereo-measure-btn').classList.remove('active');
+      document.getElementById('stereo-inscribed-btn').classList.remove('active');
+      document.getElementById('stereo-circumscribed-btn').classList.remove('active');
+      document.getElementById('stereo-height-btn').classList.remove('active');
+      document.getElementById('stereo-apothem-btn').classList.remove('active');
+      document.getElementById('stereo-diag-btn').classList.remove('active');
+      document.getElementById('stereo-mid-btn').classList.remove('active');
+      _stereoDeactivateTools();
+    }
+  }
+
+  function _stereoShowParams(type) {
+    const show = STEREO_PARAM_MAP[type] || ['a'];
+    ['a','b','c','h','r','R','n'].forEach(k => {
+      document.getElementById('sp-' + k + '-row').style.display = show.includes(k) ? '' : 'none';
+    });
+  }
+
+  function stereoParamChange(key, val) {
+    val = +val;
+    const label = document.getElementById('sp-' + key + '-val');
+    if (label) label.textContent = val;
+    if (stereoSim) {
+      stereoSim.setParam(key, val);
+      _stereoUpdateFormulas();
+    }
+  }
+
+  function stereoOpacityChange(val) {
+    val = +val;
+    document.getElementById('sp-opacity-val').textContent = val.toFixed(2);
+    if (stereoSim) stereoSim.setOpacity(val);
+  }
+
+  function stereoToggle(layer, btn) {
+    const on = !btn.classList.contains('active');
+    btn.classList.toggle('active', on);
+    if (!stereoSim) return;
+    if (layer === 'edges')    stereoSim.toggleEdges(on);
+    if (layer === 'vertices') stereoSim.toggleVertices(on);
+    if (layer === 'labels')   stereoSim.toggleLabels(on);
+    if (layer === 'axes')     stereoSim.toggleAxes(on);
+    if (layer === 'grid')     stereoSim.toggleGrid(on);
+  }
+
+  function stereoSectionToggle(btn) {
+    const on = !btn.classList.contains('active');
+    btn.classList.toggle('active', on);
+    if (stereoSim) stereoSim.toggleSection(on);
+  }
+
+  function stereoSectionType(t, btn) {
+    document.querySelectorAll('.stereo-sect-type').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    // Show/hide angle slider for diagonal
+    document.getElementById('sp-angle-row').style.display = t === 'diagonal' ? '' : 'none';
+    if (stereoSim) stereoSim.setSectionType(t);
+  }
+
+  function stereoSectionHeight(val) {
+    document.getElementById('sp-sect-val').textContent = val + '%';
+    if (stereoSim) stereoSim.setSectionHeight(+val / 100);
+  }
+
+  function stereoSectionAngle(val) {
+    document.getElementById('sp-angle-val').textContent = val + '%';
+    if (stereoSim) stereoSim.setSectionAngle(+val / 100);
+  }
+
+  function stereoUnfold(btn) {
+    const on = !btn.classList.contains('active');
+    btn.classList.toggle('active', on);
+    if (stereoSim) stereoSim.toggleUnfold(on);
+  }
+
+  function _stereoDeactivateTools() {
+    ['stereo-measure-btn','stereo-point-btn','stereo-connect-btn',
+     'stereo-angle-edge-btn','stereo-angle-lp-btn','stereo-angle-dih-btn','stereo-angle-pp-btn'].forEach(id => {
+      document.getElementById(id)?.classList.remove('active');
+    });
+    if (stereoSim) {
+      stereoSim.toggleMeasure(false);
+      stereoSim.togglePointMode(false);
+      stereoSim.toggleConnectMode(false);
+      stereoSim.setAngleMode(null);
+    }
+    const hint = document.getElementById('angle-hint');
+    if (hint) hint.textContent = '';
+  }
+
+  function stereoMeasure(btn) {
+    const on = !btn.classList.contains('active');
+    _stereoDeactivateTools();
+    btn.classList.toggle('active', on);
+    if (stereoSim) stereoSim.toggleMeasure(on);
+  }
+
+  function stereoToggleHeight(btn) {
+    const on = !btn.classList.contains('active');
+    btn.classList.toggle('active', on);
+    if (stereoSim) stereoSim.toggleHeight(on);
+  }
+
+  function stereoToggleApothem(btn) {
+    const on = !btn.classList.contains('active');
+    btn.classList.toggle('active', on);
+    if (stereoSim) stereoSim.toggleApothem(on);
+  }
+
+  function stereoToggleDiag(btn) {
+    const on = !btn.classList.contains('active');
+    btn.classList.toggle('active', on);
+    if (stereoSim) stereoSim.toggleDiagonals(on);
+  }
+
+  function stereoToggleMid(btn) {
+    const on = !btn.classList.contains('active');
+    btn.classList.toggle('active', on);
+    if (stereoSim) stereoSim.toggleMidpoints(on);
+  }
+
+  const ANGLE_HINTS = {
+    edge: 'Кликните 3 точки: A, B (вершина угла), C',
+    linePlane: 'Кликните 2 точки (прямая), затем — грань',
+    dihedral: 'Кликните 2 точки общего ребра двух граней',
+    pointPlane: 'Кликните точку, затем — грань',
+  };
+
+  function stereoAngleMode(mode, btn) {
+    const on = !btn.classList.contains('active');
+    _stereoDeactivateTools();
+    btn.classList.toggle('active', on);
+    if (stereoSim) stereoSim.setAngleMode(on ? mode : null);
+    const hint = document.getElementById('angle-hint');
+    if (hint) hint.textContent = on ? ANGLE_HINTS[mode] : '';
+  }
+
+  function stereoAngleClear() {
+    _stereoDeactivateTools();
+    if (stereoSim) {
+      stereoSim.setAngleMode(null);
+      stereoSim._clearGroup(stereoSim._angleGroup);
+    }
+  }
+
+  function stereoPointMode(btn) {
+    const on = !btn.classList.contains('active');
+    _stereoDeactivateTools();
+    btn.classList.toggle('active', on);
+    if (stereoSim) stereoSim.togglePointMode(on);
+  }
+
+  function stereoConnectMode(btn) {
+    const on = !btn.classList.contains('active');
+    _stereoDeactivateTools();
+    btn.classList.toggle('active', on);
+    if (stereoSim) stereoSim.toggleConnectMode(on);
+  }
+
+  function stereoUndoPoint() {
+    if (stereoSim) stereoSim.removeLastPoint();
+  }
+
+  function stereoClearPoints() {
+    if (stereoSim) stereoSim.clearCustomPoints();
+    _stereoUpdatePointsInfo();
+  }
+
+  function stereoInscribed(btn) {
+    const on = !btn.classList.contains('active');
+    btn.classList.toggle('active', on);
+    if (stereoSim) stereoSim.toggleInscribed(on);
+  }
+
+  function stereoCircumscribed(btn) {
+    const on = !btn.classList.contains('active');
+    btn.classList.toggle('active', on);
+    if (stereoSim) stereoSim.toggleCircumscribed(on);
+  }
+
+  function _stereoUpdateFormulas() {
+    if (!stereoSim) return;
+    const f = stereoSim.getFormulas();
+    const el = document.getElementById('stereo-formulas');
+    if (!f || !f.formulas) { el.innerHTML = ''; return; }
+    const colors = ['#7BF5A4','#60a5fa','#c4b5fd','#fbbf24','#f9a8d4','#F59E0B','#EF476F'];
+    el.innerHTML = f.formulas.map((s, i) =>
+      '<div style="color:' + (colors[i % colors.length]) + '">' + s + '</div>'
+    ).join('');
+  }
+
+  function _stereoUpdateUI(info) {
+    if (!info) return;
+    document.getElementById('stbar-vol').textContent  = info.V !== undefined ? info.V.toFixed(2) : '—';
+    document.getElementById('stbar-area').textContent  = info.S !== undefined ? info.S.toFixed(2) : '—';
+    document.getElementById('stbar-side').textContent  = info.S_side !== undefined ? info.S_side.toFixed(2) : '—';
+    document.getElementById('stbar-h').textContent     = info.h !== undefined ? info.h.toFixed(2) : '—';
+    document.getElementById('stbar-d').textContent     = info.d !== undefined && info.d > 0 ? info.d.toFixed(2) : '—';
+
+    // Section area
+    const sectEl = document.getElementById('sect-area-display');
+    if (info.sectionArea && info.sectionArea > 0) {
+      sectEl.style.display = '';
+      sectEl.textContent = 'S сечения = ' + info.sectionArea.toFixed(2);
+    } else {
+      sectEl.style.display = 'none';
+    }
+
+    // Inscribed / Circumscribed radius info
+    const rInfo = document.getElementById('sphere-radius-info');
+    if (rInfo) {
+      const parts = [];
+      if (info.inscribedR != null) parts.push('r_вп = ' + info.inscribedR.toFixed(2));
+      if (info.circumscribedR != null) parts.push('R_оп = ' + info.circumscribedR.toFixed(2));
+      rInfo.textContent = parts.join('  ·  ');
+      rInfo.style.display = parts.length ? '' : 'none';
+    }
+
+    // Points info
+    _stereoUpdatePointsInfo(info);
+  }
+
+  function _stereoUpdatePointsInfo(info) {
+    const el = document.getElementById('points-info');
+    if (!el) return;
+    if (!info) info = stereoSim?.info();
+    if (!info) { el.textContent = ''; return; }
+    let txt = '';
+    if (info.customPoints > 0) txt += `Точек: ${info.customPoints}`;
+    if (info.connections > 0) txt += ` · Линий: ${info.connections}`;
+    el.textContent = txt;
+  }
+
+  /* ── theory panel ── */
+  const THEORY = {
+    graph: {
+      title: 'График функции',
+      sections: [
+        { head: 'Линейная функция', formula: 'y = kx + b', text: 'k — угловой коэффициент (наклон), b — свободный член (сдвиг по оси Y).' },
+        { head: 'Квадратичная функция', formula: 'y = ax^2 + bx + c', text: 'Парабола. Ветви вверх при a>0, вниз при a<0. Вершина: x = -b/(2a).' },
+        { head: 'Тригонометрия', formula: 'y = A\\sin(\\omega x + \\varphi)', vars: [['A','амплитуда'],['ω','частота'],['φ','начальная фаза']] },
+      ]
+    },
+    projectile: {
+      title: 'Бросок тела',
+      sections: [
+        { head: 'Координаты', formula: 'x = v_0 \\cos\\alpha \\cdot t', text: '' },
+        { formula: 'y = h_0 + v_0 \\sin\\alpha \\cdot t - \\frac{g t^2}{2}' },
+        { head: 'Дальность', formula: 'L = \\frac{v_0^2 \\sin 2\\alpha}{g}', text: 'Максимальная дальность при α = 45° (без воздуха).' },
+        { head: 'Макс. высота', formula: 'H = h_0 + \\frac{v_0^2 \\sin^2\\alpha}{2g}' },
+        { head: 'Сила сопротивления', formula: 'F_{drag} = \\frac{1}{2} C_d \\rho A v^2', vars: [['Cd','коэф. лобового сопротивления'],['ρ','плотность воздуха, 1.225 кг/м³'],['A','площадь сечения'],['v','скорость']] },
+        { text: 'С воздухом траектория асимметрична: снижение дальности, более крутой спуск.' },
+        { head: 'Переменные', vars: [['v₀','начальная скорость, м/с'],['α','угол броска'],['h₀','начальная высота, м'],['g','ускорение свободного падения, 9.81 м/с²']] },
+      ]
+    },
+    collision: {
+      title: 'Столкновение шаров',
+      sections: [
+        { head: 'Закон сохранения импульса', formula: 'm_1 v_1 + m_2 v_2 = m_1 v_1\' + m_2 v_2\'' },
+        { head: 'Закон сохранения энергии (упругий)', formula: '\\frac{m_1 v_1^2}{2} + \\frac{m_2 v_2^2}{2} = \\frac{m_1 v_1\'^2}{2} + \\frac{m_2 v_2\'^2}{2}' },
+        { head: 'Коэффициент восстановления', formula: 'e = \\frac{v_2\' - v_1\'}{v_1 - v_2}', text: 'e=1 — упругий, e=0 — абсолютно неупругий удар.' },
+      ]
+    },
+    magnetic: {
+      title: 'Магнитное поле',
+      sections: [
+        { head: 'Поле прямого тока', formula: 'B = \\frac{\\mu_0 I}{2\\pi r}', vars: [['μ₀','4π·10⁻⁷ Тл·м/А'],['I','сила тока, А'],['r','расстояние от провода, м']] },
+        { head: 'Суперпозиция', formula: '\\vec{B} = \\sum_i \\vec{B}_i', text: 'Результирующее поле — векторная сумма полей всех проводов.' },
+        { head: 'Сила Лоренца', formula: '\\vec{F} = q\\vec{v} \\times \\vec{B}', text: 'Заряженная частица движется по окружности в однородном поле.' },
+      ]
+    },
+    coulomb: {
+      title: 'Закон Кулона',
+      sections: [
+        { head: 'Сила взаимодействия', formula: 'F = k \\frac{|q_1 q_2|}{r^2}', vars: [['k','8.99·10⁹ Н·м²/Кл²'],['q','заряд, Кл'],['r','расстояние, м']] },
+        { head: 'Напряжённость поля', formula: '\\vec{E} = k \\frac{q}{r^2} \\hat{r}', text: 'Вектор направлен от «+» и к «−» заряду.' },
+        { head: 'Потенциал', formula: '\\varphi = k \\frac{q}{r}', text: 'Эквипотенциальные линии — окружности вокруг заряда.' },
+      ]
+    },
+    circuit: {
+      title: 'Электрические цепи',
+      sections: [
+        { head: 'Закон Ома', formula: 'I = \\frac{U}{R}', vars: [['I','ток, А'],['U','напряжение, В'],['R','сопротивление, Ом']] },
+        { head: 'Последовательное', formula: 'R_{\\Sigma} = R_1 + R_2 + \\ldots' },
+        { head: 'Параллельное', formula: '\\frac{1}{R_{\\Sigma}} = \\frac{1}{R_1} + \\frac{1}{R_2} + \\ldots' },
+        { head: 'Закон Кирхгофа (токи)', formula: '\\sum I_{вх} = \\sum I_{вых}', text: 'Алгебраическая сумма токов в узле равна нулю.' },
+        { head: 'Ёмкость конденсатора', formula: 'Q = CU', vars: [['C','ёмкость, Ф'],['Q','заряд, Кл']] },
+      ]
+    },
+    dynamics: {
+      title: 'Динамика',
+      sections: [
+        { head: 'I закон Ньютона (инерция)', text: 'Тело сохраняет состояние покоя или прямолинейного движения, пока на него не действуют внешние силы.' },
+        { head: 'II закон Ньютона', formula: '\\vec{F} = m\\vec{a}', text: 'Ускорение тела прямо пропорционально силе и обратно пропорционально массе.' },
+        { head: 'III закон Ньютона', formula: '\\vec{F}_{12} = -\\vec{F}_{21}', text: 'Тела действуют друг на друга с силами, равными по модулю и противоположными по направлению.' },
+        { head: 'Импульс', formula: '\\vec{p} = m\\vec{v}', text: 'Закон сохранения: суммарный импульс замкнутой системы постоянен.' },
+        { head: 'Сила трения', formula: 'F_{\\text{тр}} = \\mu N', text: 'Направлена против движения. N — сила нормальной реакции опоры.' },
+        { head: 'Кинетическая энергия', formula: 'E_к = \\frac{1}{2}mv^2', text: 'Энергия движущегося тела.' },
+        { head: 'Потенциальная энергия', formula: 'E_п = mgh', text: 'Энергия тела в поле тяжести относительно опоры.' },
+        { head: 'Закон сохранения энергии', formula: 'E_к + E_п + Q = \\text{const}', text: 'Полная энергия системы сохраняется. Q — потери на трение и неупругие удары.' },
+        { head: 'Наклонная плоскость', formula: 'a = g(\\sin\\alpha - \\mu\\cos\\alpha)', text: 'Тело скользит вниз, если mg·sinα > μ·mg·cosα. Иначе трение удерживает.' },
+        { head: 'Разложение сил на горке', formula: 'F_{\\parallel} = mg\\sin\\alpha,\\quad N = mg\\cos\\alpha', text: 'Сила тяжести раскладывается на составляющую вдоль склона и нормальную.' },
+      ]
+    },
+    triangle: {
+      title: 'Геометрия треугольника',
+      sections: [
+        { head: 'Медиана', text: 'Отрезок от вершины до середины противоположной стороны. Три медианы пересекаются в центроиде (делят друг друга 2:1).' },
+        { head: 'Высота', text: 'Перпендикуляр из вершины к противоположной стороне. Пересечение — ортоцентр.' },
+        { head: 'Описанная окружность', formula: 'R = \\frac{abc}{4S}', text: 'Проходит через все три вершины. Центр — пересечение серединных перпендикуляров.' },
+        { head: 'Вписанная окружность', formula: 'r = \\frac{S}{p}', vars: [['S','площадь'],['p','полупериметр']] },
+        { head: 'Теорема синусов', formula: '\\frac{a}{\\sin A} = \\frac{b}{\\sin B} = \\frac{c}{\\sin C} = 2R', text: 'Отношение стороны к синусу противолежащего угла одинаково и равно диаметру описанной окружности.' },
+        { head: 'Теорема косинусов', formula: 'c^2 = a^2 + b^2 - 2ab\\cos C', text: 'Обобщение теоремы Пифагора на произвольный треугольник.' },
+        { head: 'Теорема Пифагора', formula: 'a^2 + b^2 = c^2', text: 'В прямоугольном треугольнике квадрат гипотенузы равен сумме квадратов катетов.' },
+      ]
+    },
+    molphys: {
+      title: 'Молекулярная физика',
+      sections: [
+        { head: 'Уравнение состояния', formula: 'PV = nRT', vars: [['P','давление, Па'],['V','объём, м³'],['n','количество вещества, моль'],['R','8.314 Дж/(моль·К)'],['T','температура, К']] },
+        { head: 'Средняя кинетическая энергия', formula: '\\langle E_к \\rangle = \\frac{3}{2} k_B T', text: 'kB = 1.38·10⁻²³ Дж/К — постоянная Больцмана.' },
+        { head: 'Распределение Максвелла', text: 'С ростом T максимум кривой распределения скоростей сдвигается вправо и уширяется.' },
+        { head: 'Среднеквадратичное смещение', formula: '\\langle r^2 \\rangle = 2dDt', vars: [['d','размерность (2 для 2D)'],['D','коэф. диффузии'],['t','время']] },
+        { head: 'Формула Эйнштейна', formula: 'D = \\frac{k_B T}{6\\pi \\eta R}', vars: [['η','вязкость среды'],['R','радиус частицы']] },
+        { head: 'Потенциал Леннарда-Джонса', formula: 'U(r) = 4\\varepsilon \\left[\\left(\\frac{\\sigma}{r}\\right)^{12} - \\left(\\frac{\\sigma}{r}\\right)^{6}\\right]', text: 'ε — глубина ямы, σ — эффективный размер частицы.' },
+        { head: 'Фазовые переходы', text: 'При повышении T: кристалл <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> жидкость (плавление) <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> газ (испарение). Обратно — конденсация, кристаллизация.' },
+        { head: 'Закон Фика', formula: 'J = -D \\frac{\\partial c}{\\partial x}', vars: [['J','поток вещества'],['D','коэф. диффузии'],['c','концентрация']] },
+        { head: 'Энтропия', formula: 'S = k_B \\ln W', text: 'Смешивание газов — необратимый процесс, энтропия растёт.' },
+      ]
+    },
+    chemistry: {
+      title: 'Химические реакции',
+      sections: [
+        { head: 'Закон действующих масс', formula: 'v = k [A]^a [B]^b', vars: [['k','константа скорости'],['[A],[B]','концентрации'],['a,b','порядки реакции']] },
+        { head: 'Уравнение Аррениуса', formula: 'k = A \\cdot e^{-E_a / RT}', vars: [['Eₐ','энергия активации, Дж/моль'],['A','предэкспоненциальный множитель']] },
+        { head: 'Реакция металл + кислота', formula: 'Zn + 2HCl \\to ZnCl_2 + H_2\\uparrow' },
+        { head: 'Ряд активности', text: 'Li > K > Ca > Na > Mg > Al > Zn > Fe > Ni > Sn > Pb > H₂ > Cu > Ag > Au' },
+        { head: 'Окисление', formula: 'Red \\to Ox + ne^-', text: 'Восстановитель отдаёт электроны, степень окисления растёт.' },
+        { head: 'Восстановление', formula: 'Ox + ne^- \\to Red', text: 'Окислитель принимает электроны, степень окисления падает.' },
+        { head: 'Электронный баланс', text: 'Число отданных e⁻ = числу принятых e⁻.' },
+        { head: 'Ионный обмен', text: 'Реакция идёт до конца, если образуется: осадок (<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>), газ (<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>) или слабый электролит (H₂O).' },
+        { head: 'Полное ионное уравнение', text: 'Все сильные электролиты записываются в виде ионов. Краткое — без ионов-наблюдателей.' },
+      ]
+    },
+    crystal: {
+      title: 'Кристаллическая решётка',
+      sections: [
+        { head: 'Ионная решётка (NaCl)', text: 'В узлах — катионы Na⁺ и анионы Cl⁻. Электростатическое притяжение. Высокая температура плавления.' },
+        { head: 'Ковалентная (алмаз)', text: 'Каждый атом C связан с четырьмя соседями sp³-гибридизацией. Самый твёрдый минерал.' },
+        { head: 'ОЦК (металл)', text: 'Объёмно-центрированная кубическая. 8 атомов в вершинах + 1 в центре куба. Fe, Cr, W.' },
+        { head: 'ГЦК (металл)', text: 'Гранецентрированная кубическая. 8 в вершинах + 6 в центрах граней. Cu, Al, Au, Ag.' },
+        { head: 'Координационное число', vars: [['NaCl','6'],['Алмаз','4'],['ОЦК','8'],['ГЦК','12']] },
+      ]
+    },
+    orbitals: {
+      title: 'Молекулярные орбитали',
+      sections: [
+        { head: 's-орбиталь', text: 'Сферическая форма. Электрон с равной вероятностью находится на любом расстоянии от ядра.' },
+        { head: 'p-орбитали', text: 'Три гантелеобразные орбитали (px, py, pz) взаимно перпендикулярны. В каждой — до 2 электронов.' },
+        { head: 'd-орбитали', text: 'Пять орбиталей сложной формы (четырёхлепестковые и с «поясом»). Заполняются в d-элементах.' },
+        { head: 'σ-связь', formula: '\\psi_{\\sigma} = c_1 \\psi_A + c_2 \\psi_B', text: 'Перекрывание орбиталей вдоль линии связи. H₂ — простейший пример.' },
+        { head: 'Молекула H₂O', text: 'Угол связи 104.5°. Кислород: 2 связывающие пары (O-H) и 2 неподелённые пары.' },
+      ]
+    },
+    stereo: {
+      title: 'Стереометрия',
+      sections: [
+        { head: 'Куб', formula: 'V = a^3,\\; S = 6a^2', text: 'Все грани — квадраты, все рёбра равны. Диагональ: d = a√3.' },
+        { head: 'Параллелепипед', formula: 'V = abc,\\; S = 2(ab+bc+ac)', text: 'Три измерения a, b, c. Диагональ: d = √(a²+b²+c²).' },
+        { head: 'Пирамида', formula: 'V = \\frac{1}{3} S_{\\text{осн}} \\cdot h', text: 'Объём — треть произведения площади основания на высоту.' },
+        { head: 'Тетраэдр', formula: 'V = \\frac{a^3\\sqrt{2}}{12}', text: 'Правильный тетраэдр: все 4 грани — равносторонние треугольники.' },
+        { head: 'Цилиндр', formula: 'V = \\pi r^2 h,\\; S_{\\text{бок}} = 2\\pi r h', text: 'Боковая поверхность при развёртке — прямоугольник.' },
+        { head: 'Конус', formula: 'V = \\frac{1}{3}\\pi r^2 h,\\; l = \\sqrt{r^2+h^2}', text: 'l — образующая. Боковая поверхность: πrl.' },
+        { head: 'Сечение', text: 'Плоскость пересекает тело, образуя многоугольник. Площадь сечения зависит от положения секущей плоскости.' },
+        { head: 'Сфера', formula: 'V = \\frac{4}{3}\\pi R^3,\\; S = 4\\pi R^2', text: 'Вписанная сфера касается всех граней, описанная проходит через все вершины.' },
+      ]
+    },
+    pendulum: {
+      title: 'Маятник',
+      sections: [
+        { head: 'Уравнение движения', formula: '\\ddot{\\theta} = -\\frac{g}{L}\\sin\\theta', text: 'Нелинейное уравнение. Для малых углов sin θ ≈ θ — гармонические колебания.' },
+        { head: 'Период (малые θ)', formula: 'T = 2\\pi\\sqrt{\\frac{L}{g}}', text: 'Не зависит от амплитуды и массы (при малых углах).' },
+        { head: 'Кинетическая энергия', formula: 'E_к = \\frac{1}{2}mL^2\\dot{\\theta}^2', text: 'Максимальна в нижней точке.' },
+        { head: 'Потенциальная энергия', formula: 'E_п = mgL(1 - \\cos\\theta)', text: 'Максимальна в крайних точках.' },
+        { head: 'Затухание', formula: '\\ddot{\\theta} = -\\frac{g}{L}\\sin\\theta - \\gamma\\dot{\\theta}', text: 'γ — коэффициент затухания. Амплитуда экспоненциально убывает.' },
+      ]
+    },
+    graphtransform: {
+      title: 'Трансформации графиков',
+      sections: [
+        { head: 'Вертикальное растяжение', formula: 'y = a \\cdot f(x)', text: '|a| > 1 — растяжение, 0 < |a| < 1 — сжатие по вертикали. a < 0 — отражение относительно оси x.' },
+        { head: 'Горизонтальное сжатие', formula: 'y = f(kx)', text: '|k| > 1 — сжатие, 0 < |k| < 1 — растяжение по горизонтали. k < 0 — отражение относительно оси y.' },
+        { head: 'Горизонтальный сдвиг', formula: 'y = f(x + b)', text: 'b > 0 — сдвиг влево, b < 0 — сдвиг вправо. Противоинтуитивно: знак b противоположен направлению сдвига.' },
+        { head: 'Вертикальный сдвиг', formula: 'y = f(x) + c', text: 'c > 0 — сдвиг вверх, c < 0 — сдвиг вниз.' },
+        { head: 'Общая формула', formula: 'y = a \\cdot f(k(x - x_0)) + y_0', text: 'Порядок преобразований: сначала горизонтальные (внутри аргумента), затем вертикальные (снаружи).' },
+      ]
+    },
+    normaldist: {
+      title: 'Нормальное распределение',
+      sections: [
+        { head: 'Плотность', formula: 'f(x) = \\frac{1}{\\sigma\\sqrt{2\\pi}} e^{-\\frac{(x-\\mu)^2}{2\\sigma^2}}', vars: [['μ','математическое ожидание'],['σ','стандартное отклонение']] },
+        { head: 'Правило трёх сигм', text: '68.27% значений лежат в μ ± 1σ, 95.45% в μ ± 2σ, 99.73% в μ ± 3σ.' },
+        { head: 'Z-оценка', formula: 'z = \\frac{x - \\mu}{\\sigma}', text: 'Стандартизованное отклонение от среднего. Z = 0 в точке μ.' },
+        { head: 'Дисперсия', formula: 'D = \\sigma^2 = \\frac{1}{n}\\sum(x_i - \\mu)^2' },
+        { head: 'Свойства', text: 'Симметрична относительно μ. Площадь под всей кривой = 1. Максимум в точке x = μ.' },
+      ]
+    },
+    quadratic: {
+      title: 'Квадратное уравнение',
+      sections: [
+        { head: 'Общий вид', formula: 'ax^2 + bx + c = 0', text: 'a ≠ 0 — старший коэффициент, b — средний, c — свободный член.' },
+        { head: 'Дискриминант', formula: 'D = b^2 - 4ac', text: 'D > 0 — два корня, D = 0 — один корень, D < 0 — нет действительных корней.' },
+        { head: 'Формула корней', formula: 'x_{1,2} = \\frac{-b \\pm \\sqrt{D}}{2a}' },
+        { head: 'Теорема Виета', formula: 'x_1 + x_2 = -\\frac{b}{a},\\quad x_1 \\cdot x_2 = \\frac{c}{a}' },
+        { head: 'Вершина параболы', formula: 'x_в = -\\frac{b}{2a},\\quad y_в = -\\frac{D}{4a}', text: 'При a > 0 — минимум, при a < 0 — максимум.' },
+        { head: 'Ось симметрии', formula: 'x = -\\frac{b}{2a}', text: 'Парабола симметрична относительно вертикальной прямой через вершину.' },
+      ]
+    },
+    trigcircle: {
+      title: 'Тригонометрическая окружность',
+      sections: [
+        { head: 'Единичная окружность', formula: 'x^2 + y^2 = 1', text: 'Окружность радиуса 1 с центром в начале координат. Точка на окружности: (cos α, sin α).' },
+        { head: 'Синус и косинус', formula: '\\sin\\alpha = y,\\quad \\cos\\alpha = x', text: 'Синус — ордината, косинус — абсцисса точки на единичной окружности.' },
+        { head: 'Тангенс и котангенс', formula: '\\tan\\alpha = \\frac{\\sin\\alpha}{\\cos\\alpha},\\quad \\cot\\alpha = \\frac{\\cos\\alpha}{\\sin\\alpha}' },
+        { head: 'Основное тождество', formula: '\\sin^2\\alpha + \\cos^2\\alpha = 1' },
+        { head: 'Формулы приведения', text: 'sin(π−α) = sin α, cos(π−α) = −cos α. Функция «меняется» при π/2 ± α, «не меняется» при π ± α.' },
+        { head: 'Чётность', text: 'cos(−α) = cos α (чётная), sin(−α) = −sin α (нечётная), tan(−α) = −tan α (нечётная).' },
+        { head: 'Период', formula: 'T_{\\sin,\\cos} = 2\\pi,\\quad T_{\\tan,\\cot} = \\pi' },
+      ]
+    },
+    celldivision: {
+      title: 'Деление клетки',
+      sections: [
+        { head: 'Клеточный цикл', text: 'G₁ <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> S (репликация ДНК) <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> G₂ <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> M (митоз). Интерфаза = G₁ + S + G₂ — подготовка к делению.' },
+        { head: 'Митоз', text: 'Профаза <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> Метафаза <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> Анафаза <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> Телофаза. Результат: 2 дочерние клетки с идентичным набором хромосом (2n).' },
+        { head: 'Профаза', text: 'Хромосомы конденсируются, ядерная оболочка разрушается, формируется веретено деления.' },
+        { head: 'Метафаза', text: 'Хромосомы выстраиваются в экваториальной плоскости. Кинетохоры присоединяются к нитям веретена.' },
+        { head: 'Анафаза', text: 'Центромеры делятся, хроматиды расходятся к полюсам клетки.' },
+        { head: 'Мейоз', text: 'Два последовательных деления. Результат: 4 гаплоидные клетки (n). Кроссинговер обеспечивает генетическое разнообразие.' },
+        { head: 'Формула', formula: '2n \\xrightarrow{\\text{мейоз I}} n \\xrightarrow{\\text{мейоз II}} n', text: 'Первое деление — редукционное (уменьшение числа хромосом вдвое).' },
+      ]
+    },
+    photosynthesis: {
+      title: 'Фотосинтез и дыхание',
+      sections: [
+        { head: 'Суммарное уравнение', formula: '6CO_2 + 6H_2O \\xrightarrow{h\\nu} C_6H_{12}O_6 + 6O_2' },
+        { head: 'Световая фаза', text: 'Происходит в тилакоидах. Фотосистемы I и II поглощают свет, расщепляют воду (фотолиз), выделяют O₂. Образуются АТФ и НАДФН.' },
+        { head: 'Темновая фаза (цикл Кальвина)', text: 'В строме хлоропласта. CO₂ фиксируется ферментом РуБисКО. АТФ и НАДФН восстанавливают C₃ до Г3Ф <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> глюкоза.' },
+        { head: 'Клеточное дыхание', formula: 'C_6H_{12}O_6 + 6O_2 \\to 6CO_2 + 6H_2O + 38\\text{АТФ}' },
+        { head: 'Гликолиз', text: 'Цитоплазма. Глюкоза <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> 2 пирувата + 2 АТФ + 2 НАДН. Анаэробный процесс.' },
+        { head: 'Цикл Кребса', text: 'Матрикс митохондрий. Ацетил-КоА <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> CO₂ + НАДН + ФАДН₂ + ГТФ.' },
+        { head: 'Окислительное фосфорилирование', text: 'Электрон-транспортная цепь на внутренней мембране митохондрий. Основной выход АТФ (~34).' },
+      ]
+    },
+    chemsandbox: {
+      title: 'Химическая песочница',
+      sections: [
+        { head: 'Реакция нейтрализации', formula: '\\text{Кислота} + \\text{Основание} \\to \\text{Соль} + H_2O', text: 'Экзотермическая реакция. pH раствора стремится к 7.' },
+        { head: 'Осадок (<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>)', text: 'Нерастворимое вещество выпадает из раствора. Правила растворимости: все нитраты растворимы, хлориды — кроме AgCl, PbCl₂.' },
+        { head: 'Газовыделение (<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>)', text: 'Признак реакции: карбонаты + кислота <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> CO₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>, активные металлы + кислота <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> H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>.' },
+        { head: 'Ряд активности металлов', text: 'Li K Ca Na Mg Al Zn Fe Ni Sn Pb (H₂) Cu Hg Ag Pt Au. Металл вытесняет из раствора все металлы правее него.' },
+        { head: 'Индикаторы', text: 'Фенолфталеин: бесцветный <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> малиновый в щёлочи. Лакмус: красный в кислоте, синий в щёлочи.' },
+      ]
+    },
+    angrybirds: {
+      title: 'Физика полёта',
+      sections: [
+        { head: 'Баллистическая траектория', formula: 'y = x\\tan\\alpha - \\frac{gx^2}{2v_0^2\\cos^2\\alpha}', text: 'Параболическая траектория без сопротивления воздуха.' },
+        { head: 'Дальность полёта', formula: 'L = \\frac{v_0^2 \\sin 2\\alpha}{g}', text: 'Максимум при α = 45°.' },
+        { head: 'Импульс', formula: '\\vec{p} = m\\vec{v}', text: 'При ударе передаётся импульс. Чем больше масса и скорость, тем сильнее удар.' },
+        { head: 'Кинетическая энергия', formula: 'E_к = \\frac{1}{2}mv^2', text: 'Энергия разрушения зависит от скорости в момент столкновения.' },
+        { head: 'Сопротивление воздуха', formula: 'F_{\\text{drag}} = \\frac{1}{2}C_d \\rho A v^2', text: 'Снижает дальность полёта. Ветер изменяет горизонтальную составляющую.' },
+      ]
+    },
+    equilibrium: {
+      title: 'Химическое равновесие',
+      sections: [
+        { head: 'Закон действующих масс', formula: 'K_{eq} = \\frac{[C]^c[D]^d}{[A]^a[B]^b}', text: 'Константа равновесия — отношение произведений концентраций продуктов к реагентам.' },
+        { head: 'Коэффициент реакции', formula: 'Q = \\frac{[C][D]}{[A][B]}', text: 'Q < Keq — реакция идёт вправо, Q > Keq — влево, Q = Keq — равновесие.' },
+        { head: 'Принцип Ле Шателье', text: 'Если внешнее воздействие выводит систему из равновесия, система смещается так, чтобы ослабить это воздействие.' },
+        { head: 'Влияние температуры', text: 'Повышение T сдвигает равновесие в сторону эндотермической реакции. Понижение — в сторону экзотермической.' },
+        { head: 'Энергия активации', formula: 'k = A \\cdot e^{-E_a / RT}', text: 'Уравнение Аррениуса. Чем ниже Ea, тем быстрее реакция.' },
+      ]
+    },
+    thinlens: {
+      title: 'Тонкая линза',
+      sections: [
+        { head: 'Формула тонкой линзы', formula: '\\frac{1}{f} = \\frac{1}{d} + \\frac{1}{d\'}', vars: [['f','фокусное расстояние'],['d','расстояние до предмета'],["d'",'расстояние до изображения']] },
+        { head: 'Увеличение', formula: 'M = -\\frac{d\'}{d} = \\frac{h\'}{h}', text: '|M| > 1 — увеличенное, |M| < 1 — уменьшенное. M < 0 — перевёрнутое.' },
+        { head: 'Собирающая линза (f > 0)', text: 'd > 2f — уменьшенное действительное. d = 2f — равное. f < d < 2f — увеличенное действительное. d < f — увеличенное мнимое.' },
+        { head: 'Рассеивающая линза (f < 0)', text: 'Всегда даёт уменьшенное мнимое прямое изображение.' },
+        { head: 'Оптическая сила', formula: 'D = \\frac{1}{f}\\text{ (дптр)}', text: 'Измеряется в диоптриях. D > 0 — собирающая, D < 0 — рассеивающая.' },
+      ]
+    },
+    titration: {
+      title: 'Титрование и pH',
+      sections: [
+        { head: 'Водородный показатель', formula: 'pH = -\\lg[H^+]', text: 'pH < 7 — кислая среда, pH = 7 — нейтральная, pH > 7 — щелочная.' },
+        { head: 'Сильная кислота + сильное основание', formula: 'HCl + NaOH \\to NaCl + H_2O', text: 'Точка эквивалентности при pH = 7. Резкий скачок pH вблизи неё.' },
+        { head: 'Слабая кислота', formula: 'pH = pK_a + \\lg\\frac{[A^-]}{[HA]}', text: 'Уравнение Хендерсона — Хассельбальха. В точке полунейтрализации pH = pKa.' },
+        { head: 'Точка эквивалентности', formula: 'V_{экв} = \\frac{C_к \\cdot V_к}{C_о}', text: 'Объём основания, при котором кислота полностью нейтрализована.' },
+        { head: 'Индикаторы', text: 'Фенолфталеин: бесцветный <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> малиновый (pH 8.2–10). Метилоранж: красный <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> жёлтый (pH 3.1–4.4). Лакмус: красный <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> синий (pH 5–8).' },
+      ]
+    },
+    isoprocess: {
+      title: 'Изопроцессы',
+      sections: [
+        { head: 'Уравнение состояния', formula: 'PV = nRT', vars: [['P','давление (Па)'],['V','объём (м³)'],['T','температура (К)'],['n','количество вещества'],['R','8.314 Дж/(моль·К)']] },
+        { head: 'Изотермический (T=const)', formula: 'P_1V_1 = P_2V_2', text: 'Закон Бойля — Мариотта. ΔU = 0. Работа W = nRT·ln(V₂/V₁) = Q.' },
+        { head: 'Изохорный (V=const)', formula: '\\frac{P_1}{T_1} = \\frac{P_2}{T_2}', text: 'Закон Гей-Люссака (второй). W = 0. Q = ΔU = νCᵥΔT.' },
+        { head: 'Изобарный (P=const)', formula: '\\frac{V_1}{T_1} = \\frac{V_2}{T_2}', text: 'Закон Гей-Люссака (первый). W = PΔV. Q = νCpΔT = ΔU + W.' },
+        { head: 'Адиабатный (Q=0)', formula: 'PV^\\gamma = \\text{const}', text: 'Показатель γ = Cp/Cv: 5/3 — одноатомный газ, 7/5 — двухатомный. Q = 0, W = −ΔU.' },
+        { head: 'Начало термодинамики', formula: 'Q = \\Delta U + W', text: 'Теплота, сообщённая газу, расходуется на увеличение внутренней энергии и совершение работы.' },
+      ]
+    },
+    mirrors: {
+      title: 'Зеркала',
+      sections: [
+        { head: 'Формула зеркала', formula: '\\frac{1}{f} = \\frac{1}{d} + \\frac{1}{d\'}', vars: [['f','фокусное расстояние'],['d','расстояние от предмета до зеркала'],["d'",'расстояние до изображения']] },
+        { head: 'Увеличение', formula: 'M = -\\frac{d\'}{d} = \\frac{h\'}{h}', text: 'M < 0 — перевёрнутое (действительное). |M| > 1 — увеличенное, |M| < 1 — уменьшенное.' },
+        { head: 'Вогнутое зеркало (f > 0)', text: 'd > 2f: уменьшенное действительное. d = 2f: равное действительное. f < d < 2f: увеличенное действительное. d < f: увеличенное мнимое (прямое).' },
+        { head: 'Выпуклое зеркало (f < 0)', text: 'Всегда даёт уменьшенное мнимое прямое изображение. Широкий угол обзора — применяется в автомобилях и видеонаблюдении.' },
+        { head: 'Плоское зеркало (f = ∞)', formula: "d' = -d,\\quad M = +1", text: 'Изображение мнимое, прямое, равное предмету — расположено на таком же расстоянии за зеркалом.' },
+      ]
+    },
+    refraction: {
+      title: 'Преломление света',
+      sections: [
+        { head: 'Закон Снеллиуса', formula: 'n_1 \\sin\\theta_1 = n_2 \\sin\\theta_2', text: 'Угол преломления зависит от соотношения показателей преломления двух сред.' },
+        { head: 'Показатель преломления', formula: 'n = \\frac{c}{v}', text: 'Отношение скорости света в вакууме к скорости в среде. Воздух ≈ 1, вода = 1.33, стекло ≈ 1.5, алмаз = 2.42.' },
+        { head: 'Полное внутреннее отражение', formula: '\\theta_c = \\arcsin\\frac{n_2}{n_1}', text: 'Возникает при переходе из оптически более плотной среды в менее плотную (n₁ > n₂) при θ > θc.' },
+        { head: 'Коэффициент отражения', formula: 'R = \\left(\\frac{n_1\\cos\\theta_1 - n_2\\cos\\theta_2}{n_1\\cos\\theta_1 + n_2\\cos\\theta_2}\\right)^2', text: 'Формула Френеля (s-поляризация). Определяет долю отражённой интенсивности.' },
+        { head: 'Дисперсия', text: 'Показатель преломления зависит от длины волны. Фиолетовый свет преломляется сильнее красного <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> разложение белого света в спектр.' },
+      ]
+    },
+    probability: {
+      title: 'Теория вероятностей',
+      sections: [
+        { head: 'Вероятность', formula: 'P(A) = \\frac{m}{n}', text: 'm — число благоприятных исходов, n — общее число равновозможных исходов.' },
+        { head: 'Закон больших чисел', text: 'При большом числе испытаний частота события стремится к его вероятности: f(A) <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> P(A) при n <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> ∞.' },
+        { head: 'Биномиальное распределение', formula: 'P(k) = C_n^k p^k (1-p)^{n-k}', text: 'Вероятность ровно k успехов в n независимых испытаниях с вероятностью p.' },
+        { head: 'Матожидание', formula: 'M(X) = np', text: 'Среднее число успехов в n испытаниях.' },
+        { head: 'Критерий χ²', formula: '\\chi^2 = \\sum\\frac{(O_i - E_i)^2}{E_i}', text: 'Мера отклонения наблюдаемых частот O от ожидаемых E. Чем меньше χ², тем лучше согласие.' },
+      ]
+    },
+    bohratom: {
+      title: 'Атом Бора',
+      sections: [
+        { head: 'Энергия уровня', formula: 'E_n = -\\frac{13.6}{n^2}\\text{ эВ}', text: 'n = 1 — основное состояние (-13.6 эВ), n <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> ∞ — ионизация (0 эВ).' },
+        { head: 'Энергия фотона', formula: '\\Delta E = |E_f - E_i| = h\\nu', text: 'При переходе электрона между уровнями излучается или поглощается фотон.' },
+        { head: 'Длина волны', formula: '\\lambda = \\frac{hc}{\\Delta E} = \\frac{1240}{\\Delta E\\text{ (эВ)}}\\text{ нм}' },
+        { head: 'Серия Лаймана', text: 'Переходы на n=1. УФ-излучение (λ < 122 нм).' },
+        { head: 'Серия Бальмера', text: 'Переходы на n=2. Видимый свет: Hα=656нм (красный), Hβ=486нм (голубой), Hγ=434нм (фиолетовый).' },
+        { head: 'Серия Пашена', text: 'Переходы на n=3. Инфракрасное излучение.' },
+      ]
+    },
+    electrolysis: {
+      title: 'Электролиз',
+      sections: [
+        { head: 'Первый закон Фарадея', formula: 'm = \\frac{M \\cdot I \\cdot t}{n \\cdot F}', vars: [['M','молярная масса'],['I','сила тока'],['t','время'],['n','число электронов'],['F','96485 Кл/моль']] },
+        { head: 'Катод (−)', text: 'Восстановление: катионы принимают электроны. Cu²⁺ + 2e⁻ <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> Cu. 2H⁺ + 2e⁻ <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> H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>.' },
+        { head: 'Анод (+)', text: 'Окисление: анионы отдают электроны. 2Cl⁻ − 2e⁻ <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> Cl₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>. 2H₂O − 4e⁻ <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> O₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg> + 4H⁺.' },
+        { head: 'Электролит NaCl', text: 'Катод: 2H₂O + 2e⁻ <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> H₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg> + 2OH⁻. Анод: 2Cl⁻ − 2e⁻ <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> Cl₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>.' },
+        { head: 'Электролит CuSO₄', text: 'Катод: Cu²⁺ + 2e⁻ <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> Cu<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg> (осадок). Анод: 2H₂O − 4e⁻ <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> O₂<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg> + 4H⁺.' },
+      ]
+    },
+    waves: {
+      title: 'Волны и звук',
+      sections: [
+        { head: 'Уравнение бегущей волны', formula: 'y(x,t) = A\\sin(\\omega t - kx)', vars: [['A','амплитуда (м)'],['\\omega = 2\\pi f','циклическая частота (рад/с)'],['k = 2\\pi/\\lambda','волновое число (1/м)']] },
+        { head: 'Связь параметров волны', formula: 'v = \\lambda f = \\frac{\\omega}{k}', vars: [['v','фазовая скорость'],['\\lambda','длина волны'],['f','частота (Гц)'],['T = 1/f','период (с)']] },
+        { head: 'Стоячая волна', formula: 'y = 2A\\sin(kx)\\cos(\\omega t)', text: 'Возникает при сложении двух волн одинаковой частоты, распространяющихся навстречу. Узлы — y\u22610 всегда. Пучности — |y|=max.' },
+        { head: 'Гармоники струны', formula: '\\lambda_n = \\frac{2L}{n},\\quad f_n = n\\frac{v}{2L}', text: 'Для струны длиной L, закреплённой на концах: n=1 — основной тон (1 пучность), n=2,3,... — обертоны.' },
+        { head: 'Принцип суперпозиции', text: 'При наложении волн смещения складываются: y = y\u2081 + y\u2082. Конструктивная интерференция (\u0394\u03c6=0): A = A\u2081+A\u2082. Деструктивная (\u0394\u03c6=\u03c0): A = |A\u2081\u2212A\u2082|.' },
+        { head: 'Биения', text: 'Если f\u2081 \u2260 f\u2082, результирующая амплитуда периодически меняется с частотой |f\u2081\u2212f\u2082|. Применяется в акустике для настройки инструментов.' },
+      ]
+    },
+  };
+
+  let _theoryOpen = false;
+  function toggleTheory() {
+    _theoryOpen = !_theoryOpen;
+    document.getElementById('theory-panel').classList.toggle('open', _theoryOpen);
+    const btn = document.getElementById('theory-toggle');
+    btn.style.background = _theoryOpen ? 'rgba(155,93,229,0.15)' : '';
+    btn.style.borderColor = _theoryOpen ? '#9B5DE5' : '';
+    btn.style.color = _theoryOpen ? '#9B5DE5' : '';
+  }
+
+  function loadTheory(simId) {
+    const t = THEORY[simId];
+    const el = document.getElementById('theory-content');
+    if (!t) { el.innerHTML = '<div class="tp-text" style="text-align:center;padding:40px 0;color:var(--text-3)">Теория для этой симуляции пока не добавлена</div>'; return; }
+    let html = `<div class="tp-title">${LS.icon('book-open',16)} ${t.title}</div>`;
+    for (const s of t.sections) {
+      html += '<div class="tp-section">';
+      if (s.head)    html += `<div class="tp-section-head">${s.head}</div>`;
+      if (s.formula) html += `<div class="tp-formula" data-formula="${s.formula.replace(/"/g,'&quot;')}"></div>`;
+      if (s.text)    html += `<div class="tp-text">${s.text}</div>`;
+      if (s.vars)    html += `<div class="tp-var-list">${s.vars.map(([v,d]) => `<div class="tp-var"><b>${v}</b> — ${d}</div>`).join('')}</div>`;
+      html += '</div>';
+    }
+    el.innerHTML = html;
+    // render KaTeX formulas
+    el.querySelectorAll('.tp-formula[data-formula]').forEach(div => {
+      try { katex.render(div.dataset.formula, div, { displayMode: true, throwOnError: false }); }
+      catch(e) { div.textContent = div.dataset.formula; }
+    });
+  }
+
+  /* ── embed mode + auto-open from ?sim= ── */
+  const _qp = new URLSearchParams(location.search);
+  const _embedMode = _qp.get('embed') === '1';
+  const _autoSim   = _qp.get('sim');
+
+  if (_embedMode) {
+    document.querySelector('.sidebar').style.display = 'none';
+    document.querySelector('.sb-content').style.marginLeft = '0';
+    document.querySelector('.app-layout').classList.add('embed-mode');
+    document.getElementById('lab-home').style.display = 'none';
+    document.getElementById('theory-toggle').style.display = 'none';
+    if (_autoSim) {
+      document.getElementById('lab-sim').classList.add('open');
+      document.querySelector('.sim-topbar').style.display = 'none';
+      openSim(_autoSim);
+    }
+  } else {
+    /* init — fetch sim settings + permissions in parallel, then render */
+    const _permFetch = (!isTeacher && !isAdmin)
+      ? LS.api('/api/permissions/me').catch(() => null)
+      : Promise.resolve(null);
+
+    Promise.all([
+      LS.api('/api/settings/sims').catch(() => ({})),
+      _permFetch,
+    ]).then(([cfg, permData]) => {
+      _simModuleDisabled = cfg.module_disabled || false;
+      _disabledSimIds    = new Set(cfg.disabled_ids || []);
+
+      // check simulations.access for students
+      if (!isTeacher && !isAdmin && permData) {
+        const p = permData.permissions?.find(p => p.key === 'simulations.access');
+        if (p && p.effective === false) {
+          document.getElementById('sim-grid').innerHTML =
+            `<div style="grid-column:1/-1;padding:60px 0;text-align:center;color:#8898AA">
+              <div style="font-size:2rem;margin-bottom:12px"><svg class="ic" viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></div>
+              <div style="font-family:'Unbounded',sans-serif;font-size:1rem;font-weight:800;color:#0F172A;margin-bottom:6px">Доступ к симуляциям закрыт</div>
+              <div style="font-size:.88rem">Администратор ограничил доступ к лаборатории</div>
+            </div>`;
+          return;
+        }
+        // store quiz permission for later use
+        const qp = permData.permissions?.find(p => p.key === 'simulations.quiz');
+        window._simQuizAllowed = !qp || qp.effective !== false;
+      } else {
+        window._simQuizAllowed = true;
+      }
+
+      if (_simModuleDisabled) {
+        document.getElementById('sim-grid').innerHTML =
+          `<div style="grid-column:1/-1;padding:60px 0;text-align:center;color:#8898AA">
+            <div style="font-size:2rem;margin-bottom:12px"><svg class="ic" viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></div>
+            <div style="font-family:'Unbounded',sans-serif;font-size:1rem;font-weight:800;color:#0F172A;margin-bottom:6px">Модуль симуляций отключён</div>
+            <div style="font-size:.88rem">Администратор временно отключил лабораторию</div>
+          </div>`;
+      } else {
+        renderSims();
+        if (_autoSim) openSim(_autoSim);
+      }
+    });
+    lucide.createIcons();
+    LS.notif.init();
+  }
+</script>
+<script src="/js/labs/newton.js"></script>
+<script src="/js/labs/forcesandbox.js"></script>
+<script src="/js/labs/angrybirds.js"></script>
+<script src="/js/labs/waves.js"></script>
+<script src="/js/labs/chemsandbox.js"></script>
+<script src="/js/labs/celldivision.js"></script>
+<script src="/js/labs/photosynthesis.js"></script>
+<script src="/js/labs/crystal.js"></script>
+<script src="/js/labs/orbitals.js"></script>
+<script src="/js/labs/trigcircle.js"></script>
+<script src="/js/labs/_util.js"></script>
+<script src="/js/labs/quadratic.js"></script>
+<script src="/js/labs/normaldist.js"></script>
+<script src="/js/labs/graphtransform.js"></script>
+<script src="/js/labs/pendulum.js"></script>
+<script src="/js/labs/equilibrium.js"></script>
+<script src="/js/labs/thinlens.js"></script>
+<script src="/js/labs/mirror.js"></script>
+<script src="/js/labs/isoprocess.js"></script>
+<script src="/js/labs/titration.js"></script>
+<script src="/js/labs/refraction.js"></script>
+<script src="/js/labs/probability.js"></script>
+<script src="/js/labs/bohratom.js"></script>
+<script src="/js/labs/electrolysis.js"></script>
+</body>
+</html>
diff --git a/frontend/lesson-editor.html b/frontend/lesson-editor.html
new file mode 100644
index 0000000..d79bb46
--- /dev/null
+++ b/frontend/lesson-editor.html
@@ -0,0 +1,3428 @@
+<!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" />
+  <!-- KaTeX preview -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" />
+  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"
+          onload="window._katexLoaded=true;window._katexCb&&window._katexCb()"></script>
+  <!-- Highlight.js -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/atom-one-dark.min.css" />
+  <script defer src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"
+          onload="window._hljsLoaded=true"></script>
+  <!-- Mermaid diagrams -->
+  <script defer src="https://cdn.jsdelivr.net/npm/mermaid@10.9.0/dist/mermaid.min.js"
+          onload="mermaid.initialize({startOnLoad:false,theme:'neutral'});window._mermaidLoaded=true"></script>
+  <script src="https://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+  <style>
+    html, body { height: 100%; }
+    body { background: #f4f5f8; }
+
+    /* ── topbar ── */
+    .editor-topbar {
+      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
+      background: #fff; border-bottom: 1px solid rgba(15,23,42,0.09);
+      height: 54px; display: flex; align-items: center; padding: 0 16px;
+      gap: 10px;
+    }
+    .etb-back {
+      display: flex; align-items: center; gap: 6px; text-decoration: none;
+      font-size: 0.8rem; font-weight: 700; color: #8898AA; transition: color 0.15s;
+      flex-shrink: 0;
+    }
+    .etb-back:hover { color: var(--violet); }
+    .etb-title {
+      font-family: 'Unbounded', sans-serif; font-size: 0.85rem; font-weight: 800;
+      color: #0F172A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+      max-width: 220px; flex-shrink: 1;
+    }
+    .etb-section-wrap {
+      display: flex; align-items: center; gap: 6px; flex-shrink: 0;
+    }
+    .etb-select {
+      padding: 5px 8px; border: 1.5px solid rgba(15,23,42,0.12); border-radius: 8px;
+      font-family: 'Manrope', sans-serif; font-size: 0.78rem; color: #3D4F6B;
+      background: #f8f9fc; outline: none; cursor: pointer;
+      transition: border-color 0.15s;
+    }
+    .etb-select:focus { border-color: var(--violet); }
+    .etb-spacer { flex: 1; }
+    .etb-word-count {
+      font-size: 0.74rem; color: #8898AA; font-weight: 600; white-space: nowrap;
+      background: rgba(15,23,42,0.04); border-radius: 8px; padding: 4px 9px;
+      flex-shrink: 0;
+    }
+    .etb-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
+    .etb-status {
+      font-size: 0.76rem; color: #8898AA; font-weight: 600;
+      transition: color 0.3s; white-space: nowrap;
+    }
+    .etb-status.saved { color: #059652; }
+    .etb-icon-btn {
+      width: 30px; height: 30px; border: 1.5px solid rgba(15,23,42,0.1); border-radius: 8px;
+      background: #f8f9fc; color: #8898AA; cursor: pointer;
+      display: flex; align-items: center; justify-content: center;
+      transition: all 0.12s; flex-shrink: 0;
+    }
+    .etb-icon-btn:hover:not(:disabled) { background: rgba(155,93,229,0.07); color: var(--violet); border-color: rgba(155,93,229,0.25); }
+    .etb-icon-btn:disabled { opacity: 0.35; cursor: default; }
+    .btn-save {
+      padding: 8px 18px; border: none; border-radius: 999px;
+      background: var(--violet); color: #fff;
+      font-family: 'Manrope', sans-serif; font-size: 0.84rem; font-weight: 700;
+      cursor: pointer; box-shadow: 0 2px 8px rgba(155,93,229,0.3);
+      display: flex; align-items: center; gap: 7px; transition: all 0.15s;
+      flex-shrink: 0;
+    }
+    .btn-save:hover { background: #8a47d8; }
+    .btn-save:disabled { opacity: 0.45; cursor: default; }
+    .btn-preview {
+      padding: 8px 14px; border: 1.5px solid rgba(155,93,229,0.25); border-radius: 999px;
+      background: rgba(155,93,229,0.06); color: var(--violet);
+      font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 700;
+      cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.15s;
+      flex-shrink: 0;
+    }
+    .btn-preview:hover { background: rgba(155,93,229,0.12); }
+    .btn-pub {
+      padding: 8px 14px; border: 1.5px solid rgba(6,214,160,0.3); border-radius: 999px;
+      background: rgba(6,214,160,0.07); color: #047857;
+      font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 700;
+      cursor: pointer; transition: all 0.15s; flex-shrink: 0;
+    }
+    .btn-pub:hover { background: rgba(6,214,160,0.14); border-color: #06D6A0; }
+    .btn-pub.published { background: rgba(6,214,160,0.12); border-color: #06D6A0; color: #047857; }
+    .btn-pub-all {
+      padding: 8px 14px; border: 1.5px solid rgba(99,102,241,0.25); border-radius: 999px;
+      background: rgba(99,102,241,0.07); color: #4338CA;
+      font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 700;
+      cursor: pointer; transition: all 0.15s; flex-shrink: 0;
+    }
+    .btn-pub-all:hover { background: rgba(99,102,241,0.14); border-color: #6366F1; }
+
+    /* ── layout ── */
+    .editor-wrap {
+      margin-top: 54px;
+      display: flex; min-height: calc(100vh - 54px);
+    }
+
+    /* ── block palette (left) ── */
+    .block-palette {
+      width: 200px; flex-shrink: 0;
+      background: #fff; border-right: 1px solid rgba(15,23,42,0.07);
+      padding: 20px 12px; position: sticky; top: 54px; height: calc(100vh - 54px);
+      overflow-y: auto;
+    }
+    .palette-section { margin-bottom: 20px; }
+    .palette-search {
+      width: 100%; box-sizing: border-box;
+      border: 1.5px solid rgba(15,23,42,0.1); border-radius: 10px;
+      padding: 7px 10px; font-family: 'Manrope', sans-serif; font-size: 0.82rem;
+      color: #1E293B; background: #f8f9fc; outline: none; margin-bottom: 14px;
+      transition: border-color 0.15s;
+    }
+    .palette-search:focus { border-color: var(--violet); background: #fff; }
+    .palette-label {
+      font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
+      color: #8898AA; margin-bottom: 8px; padding: 0 4px;
+    }
+    .palette-btn {
+      width: 100%; padding: 8px 10px; border-radius: 10px;
+      border: 1.5px solid transparent; background: transparent;
+      font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 600; color: #3D4F6B;
+      cursor: pointer; display: flex; align-items: center; gap: 8px;
+      transition: all 0.12s; text-align: left; margin-bottom: 4px;
+    }
+    .palette-btn:hover { background: rgba(155,93,229,0.06); color: var(--violet); border-color: rgba(155,93,229,0.15); }
+    .palette-btn-icon { width: 22px; height: 22px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; flex-shrink: 0; }
+    .pbi-heading  { background: rgba(15,23,42,0.08); }
+    .pbi-text     { background: rgba(15,23,42,0.06); }
+    .pbi-formula  { background: rgba(155,93,229,0.12); color: var(--violet); }
+    .pbi-image    { background: rgba(6,214,160,0.1); color: #047857; }
+    .pbi-quiz     { background: rgba(241,91,181,0.1); color: #be185d; }
+    .pbi-code     { background: rgba(15,23,42,0.08); }
+    .pbi-div      { background: rgba(15,23,42,0.04); }
+    .pbi-callout  { background: rgba(251,191,36,0.15); color: #92400e; }
+    .pbi-video    { background: rgba(239,68,68,0.1); color: #b91c1c; }
+    .pbi-table    { background: rgba(59,130,246,0.1); color: #1d4ed8; }
+    .pbi-flash    { background: rgba(16,185,129,0.1); color: #065f46; }
+    .pbi-sim      { background: rgba(139,92,246,0.12); color: #5b21b6; }
+
+    /* ── editor canvas (center) ── */
+    .editor-canvas {
+      flex: 1; min-width: 0; padding: 32px 28px 80px;
+      max-width: 800px; margin: 0 auto;
+    }
+
+    /* ── lesson title editor ── */
+    .lesson-title-input {
+      width: 100%; border: none; outline: none;
+      font-family: 'Unbounded', sans-serif; font-size: 1.5rem; font-weight: 800;
+      color: #0F172A; background: transparent; resize: none;
+      line-height: 1.3; padding: 0; margin-bottom: 28px;
+    }
+    .lesson-title-input::placeholder { color: rgba(15,23,42,0.25); }
+
+    /* ── block card ── */
+    .block-card {
+      background: #fff; border: 1.5px solid rgba(15,23,42,0.07);
+      border-radius: 16px; margin-bottom: 12px;
+      transition: border-color 0.15s, box-shadow 0.15s;
+      position: relative;
+    }
+    .block-card:hover { border-color: rgba(155,93,229,0.2); box-shadow: 0 2px 10px rgba(15,23,42,0.06); }
+    .block-card.dragging { opacity: 0.4; }
+    .block-card.drag-over { border-color: var(--violet); box-shadow: 0 0 0 2px rgba(155,93,229,0.2); }
+
+    .block-header {
+      display: flex; align-items: center; gap: 8px;
+      padding: 10px 14px 0; color: #8898AA;
+    }
+    .block-drag-handle {
+      cursor: grab; color: #CBD5E1; padding: 2px; flex-shrink: 0;
+      touch-action: none;
+    }
+    .block-drag-handle:active { cursor: grabbing; }
+    .block-type-label {
+      font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
+      letter-spacing: 0.07em; color: #8898AA; flex: 1;
+    }
+    .block-actions { display: flex; gap: 4px; }
+    .block-action-btn {
+      width: 24px; height: 24px; border: none; background: none;
+      color: #CBD5E1; cursor: pointer; border-radius: 6px;
+      display: flex; align-items: center; justify-content: center;
+      transition: all 0.12s;
+    }
+    .block-action-btn:hover { background: rgba(15,23,42,0.06); color: #6B7A8E; }
+    .block-action-btn.danger:hover { background: rgba(239,71,111,0.08); color: #EF476F; }
+    .block-action-btn.dup:hover { background: rgba(155,93,229,0.08); color: var(--violet); }
+
+    .block-body { padding: 8px 14px 14px; }
+    .block-card.collapsed .block-body { display: none; }
+    .block-card.collapsed .block-header { padding-bottom: 10px; }
+    .block-collapse-btn { transition: transform 0.15s; }
+    .block-card.collapsed .block-collapse-btn { transform: rotate(-90deg); }
+
+    /* ── block inputs ── */
+    .block-textarea {
+      width: 100%; border: none; outline: none; resize: none;
+      font-family: 'Manrope', sans-serif; font-size: 0.95rem; color: #1E293B;
+      background: transparent; line-height: 1.7; padding: 0;
+      min-height: 60px; field-sizing: content;
+    }
+    .block-textarea::placeholder { color: rgba(15,23,42,0.25); }
+    .block-input {
+      width: 100%; border: 1.5px solid rgba(15,23,42,0.1); border-radius: 10px;
+      padding: 9px 12px; font-family: 'Manrope', sans-serif; font-size: 0.88rem;
+      color: #1E293B; background: #f8f9fc; outline: none; transition: border-color 0.15s;
+      box-sizing: border-box;
+    }
+    .block-input:focus { border-color: var(--violet); background: #fff; }
+    .block-row { display: flex; gap: 10px; align-items: flex-start; }
+    .block-row .block-input { flex: 1; }
+    .block-row-label {
+      font-size: 0.74rem; font-weight: 700; color: #6B7A8E; margin-bottom: 5px;
+    }
+    .block-field { margin-bottom: 10px; }
+    .block-field:last-child { margin-bottom: 0; }
+
+    /* ── formula preview ── */
+    .formula-preview {
+      margin-top: 8px; padding: 10px 14px;
+      background: rgba(155,93,229,0.04); border-radius: 10px;
+      border: 1px solid rgba(155,93,229,0.1);
+      font-size: 1rem; overflow-x: auto;
+      min-height: 38px;
+    }
+
+    /* ── formula symbol picker ── */
+    .sym-picker { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 7px; }
+    .sym-btn    { padding: 3px 6px; border-radius: 5px; border: 1px solid rgba(15,23,42,0.1);
+                  background: #fff; cursor: pointer; font-size: 0.8rem; font-family: 'KaTeX_Math', 'Latin Modern Math', serif;
+                  color: #3D4F6B; transition: .12s; line-height: 1.4; }
+    .sym-btn:hover { background: rgba(155,93,229,0.12); border-color: rgba(155,93,229,0.3); color: #9B5DE5; }
+    .sym-cat-row { display: flex; gap: 4px; margin-bottom: 5px; flex-wrap: wrap; }
+    .sym-cat-btn { padding: 2px 8px; border-radius: 5px; border: 1px solid rgba(15,23,42,0.1);
+                   background: none; cursor: pointer; font-size: .72rem; font-weight: 600;
+                   color: #8898AA; transition: .12s; }
+    .sym-cat-btn.active { background: rgba(155,93,229,0.1); border-color: rgba(155,93,229,0.3); color: #9B5DE5; }
+
+    /* ── heading level selector ── */
+    .heading-level-select {
+      width: 70px; padding: 6px 8px; border: 1.5px solid rgba(15,23,42,0.1); border-radius: 8px;
+      font-family: 'Manrope', sans-serif; font-size: 0.82rem; color: #3D4F6B;
+      background: #f8f9fc; outline: none; cursor: pointer; flex-shrink: 0;
+    }
+
+    /* ── quiz builder ── */
+    .quiz-option-row {
+      display: flex; align-items: center; gap: 8px; margin-bottom: 7px;
+    }
+    .quiz-opt-radio { flex-shrink: 0; cursor: pointer; accent-color: var(--violet); width: 16px; height: 16px; }
+    .quiz-opt-input { flex: 1; }
+    .quiz-opt-del { width: 24px; height: 24px; flex-shrink: 0; }
+    .btn-add-opt {
+      padding: 5px 12px; border: 1.5px dashed rgba(155,93,229,0.25); border-radius: 8px;
+      background: none; color: var(--violet); font-family: 'Manrope', sans-serif;
+      font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: all 0.12s;
+    }
+    .btn-add-opt:hover { background: rgba(155,93,229,0.06); border-color: var(--violet); }
+    .quiz-mode-toggle { display:flex; align-items:center; gap:7px; margin-bottom:8px; font-size:0.82rem; color:#6B7A8E; cursor:pointer; user-select:none; }
+    .quiz-mode-toggle input { accent-color:var(--violet); width:14px; height:14px; cursor:pointer; }
+    .quiz-explanation { margin-top:10px; }
+    .quiz-explanation .block-row-label { margin-bottom:4px; }
+
+    /* ── empty canvas hint ── */
+    .canvas-hint {
+      text-align: center; padding: 60px 28px;
+      border: 2px dashed rgba(155,93,229,0.15); border-radius: 20px;
+      color: #8898AA; font-size: 0.88rem; line-height: 1.8;
+    }
+    .canvas-hint-title { font-family: 'Unbounded', sans-serif; font-size: 0.95rem; font-weight: 800; color: #0F172A; margin-bottom: 8px; }
+
+    /* ── callout block ── */
+    .callout-style-btns { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
+    .callout-style-btn {
+      padding: 4px 10px; border-radius: 7px; border: 1.5px solid transparent;
+      font-family: 'Manrope', sans-serif; font-size: 0.78rem; font-weight: 700;
+      cursor: pointer; background: #f8f9fc; color: #6B7A8E; transition: all 0.12s;
+    }
+    .callout-style-btn.active { border-color: currentColor; }
+    .callout-style-btn.cs-info    { color: #1d4ed8; }
+    .callout-style-btn.cs-warning { color: #92400e; }
+    .callout-style-btn.cs-success { color: #065f46; }
+    .callout-style-btn.cs-error   { color: #991b1b; }
+    .callout-style-btn.cs-info.active    { background: rgba(59,130,246,0.08); }
+    .callout-style-btn.cs-warning.active { background: rgba(251,191,36,0.12); }
+    .callout-style-btn.cs-success.active { background: rgba(16,185,129,0.08); }
+    .callout-style-btn.cs-error.active   { background: rgba(239,68,68,0.08); }
+
+    /* ── video embed ── */
+    .video-preview {
+      margin-top: 10px; border-radius: 12px; overflow: hidden;
+      aspect-ratio: 16/9; background: #0F172A;
+    }
+    .video-preview iframe { width: 100%; height: 100%; border: none; }
+
+    /* ── table editor ── */
+    .table-editor { overflow-x: auto; margin-bottom: 8px; }
+    .table-editor table { border-collapse: collapse; width: 100%; min-width: 280px; }
+    .table-editor td, .table-editor th {
+      border: 1.5px solid rgba(15,23,42,0.12); padding: 6px 10px;
+      font-family: 'Manrope', sans-serif; font-size: 0.88rem; color: #1E293B;
+      min-width: 80px; outline: none;
+    }
+    .table-editor th {
+      background: rgba(155,93,229,0.06); font-weight: 700;
+    }
+    .table-editor td:focus, .table-editor th:focus {
+      outline: 2px solid rgba(155,93,229,0.4); outline-offset: -2px;
+      background: rgba(155,93,229,0.03);
+    }
+    .table-btns { display: flex; gap: 6px; flex-wrap: wrap; }
+    .table-btn {
+      padding: 4px 10px; border: 1.5px solid rgba(15,23,42,0.12); border-radius: 7px;
+      background: #f8f9fc; font-family: 'Manrope', sans-serif; font-size: 0.76rem;
+      font-weight: 700; color: #6B7A8E; cursor: pointer; transition: all 0.12s;
+    }
+    .table-btn:hover { border-color: var(--violet); color: var(--violet); background: rgba(155,93,229,0.05); }
+
+    /* ── flashcard editor ── */
+    .flashcard-editor {
+      display: flex; gap: 12px;
+    }
+    .flashcard-side { flex: 1; }
+    .flashcard-side-label {
+      font-size: 0.74rem; font-weight: 700; color: #6B7A8E; margin-bottom: 5px;
+      display: flex; align-items: center; gap: 4px;
+    }
+
+    /* ── matching editor ── */
+    .matching-pair-row {
+      display: flex; align-items: center; gap: 8px; margin-bottom: 7px;
+    }
+    .matching-pair-row .block-input { flex: 1; }
+
+    /* ── ordering editor ── */
+    .ordering-item-row {
+      display: flex; align-items: center; gap: 8px; margin-bottom: 7px;
+    }
+    .ordering-item-row .block-input { flex: 1; }
+
+    /* ── fill-blank preview ── */
+    .fill-blank-preview {
+      padding: 10px 14px; background: rgba(155,93,229,0.04);
+      border: 1px solid rgba(155,93,229,0.1); border-radius: 10px;
+      font-size: 0.92rem; line-height: 1.8; color: #1E293B;
+    }
+
+    /* ── rich text editor ── */
+    .rich-toolbar {
+      display: flex; gap: 3px; padding: 4px 6px;
+      background: #f4f5f8; border-radius: 8px 8px 0 0;
+      border: 1.5px solid rgba(15,23,42,0.1); border-bottom: none;
+      opacity: 0; pointer-events: none; transition: opacity 0.15s;
+    }
+    .rich-toolbar.visible { opacity: 1; pointer-events: all; }
+    .rich-toolbar-btn {
+      width: 26px; height: 26px; border: none; border-radius: 6px;
+      background: none; cursor: pointer; font-family: 'Manrope', sans-serif;
+      font-size: 0.82rem; font-weight: 700; color: #6B7A8E;
+      display: flex; align-items: center; justify-content: center;
+      transition: all 0.12s;
+    }
+    .rich-toolbar-btn:hover { background: rgba(155,93,229,0.1); color: var(--violet); }
+    .rich-editor {
+      min-height: 80px; outline: none;
+      font-family: 'Manrope', sans-serif; font-size: 0.95rem; color: #1E293B;
+      line-height: 1.7; padding: 10px 12px;
+      border: 1.5px solid rgba(15,23,42,0.1); border-radius: 0 0 10px 10px;
+      background: #fff; transition: border-color 0.15s;
+    }
+    .rich-editor:focus { border-color: var(--violet); }
+    .rich-editor:empty::before { content: attr(data-placeholder); color: rgba(15,23,42,0.25); }
+    .rich-editor code { background: rgba(155,93,229,0.08); padding: 1px 5px; border-radius: 4px; font-family: monospace; font-size: 0.88em; }
+
+    /* ── sim block ── */
+    .sim-preview {
+      margin-top: 8px; padding: 14px; border-radius: 10px;
+      background: rgba(139,92,246,0.06); border: 1.5px solid rgba(139,92,246,0.15);
+      font-family: 'Manrope', sans-serif; font-size: 0.88rem; color: #5b21b6;
+      display: flex; align-items: center; gap: 8px;
+    }
+
+    /* ── accordion editor ── */
+    .accordion-preview {
+      margin-top: 8px; border: 1.5px solid rgba(99,102,241,0.15); border-radius: 12px; overflow: hidden;
+    }
+    .accordion-preview-header {
+      padding: 12px 16px; background: rgba(99,102,241,0.05);
+      display: flex; align-items: center; justify-content: space-between;
+      font-weight: 700; font-size: 0.88rem; color: #4338CA; cursor: pointer;
+    }
+    .accordion-preview-body {
+      padding: 12px 16px; font-size: 0.88rem; color: #1E293B; line-height: 1.6;
+      border-top: 1px solid rgba(99,102,241,0.1);
+    }
+
+    /* ── timeline editor ── */
+    .timeline-item-row {
+      display: flex; gap: 8px; margin-bottom: 10px; align-items: flex-start;
+    }
+    .timeline-dot {
+      width: 12px; height: 12px; border-radius: 50%; background: #0EA5E9;
+      flex-shrink: 0; margin-top: 10px;
+    }
+    .timeline-fields { flex: 1; display: flex; flex-direction: column; gap: 6px; }
+
+    /* ── diagram editor ── */
+    .diagram-preview {
+      margin-top: 10px; padding: 16px; border-radius: 12px;
+      background: #fff; border: 1.5px solid rgba(168,85,247,0.15);
+      text-align: center; overflow-x: auto;
+    }
+
+    /* ── geogebra editor ── */
+    .geogebra-preview {
+      margin-top: 10px; border-radius: 12px; overflow: hidden;
+      aspect-ratio: 16/10; background: #f8f9fc;
+      border: 1.5px solid rgba(34,197,94,0.15);
+    }
+    .geogebra-preview iframe { width: 100%; height: 100%; border: none; }
+
+    /* ── audio editor ── */
+    .audio-preview {
+      margin-top: 10px;
+    }
+    .audio-preview audio { width: 100%; border-radius: 10px; }
+
+    /* ── palette drag ── */
+    .palette-btn.dragging { opacity: 0.5; }
+    .block-drop-zone {
+      height: 4px; margin: -2px 0; border-radius: 4px;
+      transition: height 0.15s, background 0.15s, margin 0.15s;
+    }
+    .block-drop-zone.active {
+      height: 40px; margin: 6px 0;
+      background: rgba(155,93,229,0.08); border: 2px dashed rgba(155,93,229,0.3);
+      border-radius: 12px;
+    }
+
+    /* ── image upload ── */
+    .img-upload-row { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
+    .img-upload-btn {
+      padding: 7px 14px; border: 1.5px solid rgba(6,214,160,0.3); border-radius: 10px;
+      background: rgba(6,214,160,0.06); color: #047857;
+      font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 700;
+      cursor: pointer; transition: all 0.15s; display: flex; align-items: center; gap: 6px;
+    }
+    .img-upload-btn:hover { background: rgba(6,214,160,0.14); border-color: #06D6A0; }
+    .img-upload-progress {
+      font-size: 0.78rem; color: #8898AA; font-weight: 600;
+    }
+
+    /* ── code preview ── */
+    .code-preview {
+      margin-top: 8px; border-radius: 10px; overflow: hidden;
+    }
+    .code-preview pre {
+      margin: 0; padding: 14px 16px; font-size: 0.84rem; line-height: 1.6;
+      border-radius: 10px; overflow-x: auto;
+    }
+    .code-preview code { font-family: 'Fira Code', 'JetBrains Mono', monospace; }
+
+    /* ── inline preview ── */
+    .editor-canvas.preview-mode .block-card {
+      border-color: transparent; box-shadow: none; background: transparent;
+    }
+    .editor-canvas.preview-mode .block-header { display: none; }
+    .editor-canvas.preview-mode .block-body { padding: 4px 0; }
+    .editor-canvas.preview-mode .block-drop-zone { display: none; }
+    .preview-block { margin-bottom: 16px; }
+    .preview-block h2 {
+      font-family: 'Unbounded', sans-serif; font-size: 1.3rem; font-weight: 800;
+      color: #0F172A; margin: 24px 0 12px; border-bottom: 2px solid rgba(155,93,229,0.15);
+      padding-bottom: 8px;
+    }
+    .preview-block h3 {
+      font-family: 'Unbounded', sans-serif; font-size: 1rem; font-weight: 800;
+      color: #0F172A; margin: 20px 0 10px;
+    }
+    .preview-block p { font-size: 0.95rem; line-height: 1.8; color: #1E293B; margin: 0 0 12px; }
+    .preview-block .pv-formula {
+      padding: 14px 18px; background: rgba(155,93,229,0.04);
+      border-left: 3px solid var(--violet); border-radius: 0 10px 10px 0;
+      margin: 12px 0; font-size: 1.05rem;
+    }
+    .preview-block .pv-callout {
+      padding: 14px 18px; border-radius: 12px; margin: 12px 0;
+      font-size: 0.9rem; line-height: 1.7;
+    }
+    .pv-callout.pv-info    { background: rgba(59,130,246,0.06); border-left: 3px solid #3B82F6; }
+    .pv-callout.pv-warning { background: rgba(251,191,36,0.08); border-left: 3px solid #F59E0B; }
+    .pv-callout.pv-success { background: rgba(16,185,129,0.06); border-left: 3px solid #10B981; }
+    .pv-callout.pv-error   { background: rgba(239,68,68,0.06); border-left: 3px solid #EF4444; }
+    .preview-block .pv-img-wrap { display: flex; margin: 12px 0; }
+    .preview-block .pv-img-wrap.align-left   { justify-content: flex-start; }
+    .preview-block .pv-img-wrap.align-center { justify-content: center; }
+    .preview-block .pv-img-wrap.align-right  { justify-content: flex-end; }
+    .preview-block .pv-img-wrap.align-full   { display: block; }
+    .preview-block .pv-image { border-radius: 12px; max-width: 100%; }
+    .preview-block .pv-img-wrap.align-left .pv-image,
+    .preview-block .pv-img-wrap.align-right .pv-image { max-width: 55%; }
+    .preview-block .pv-img-wrap.align-full  .pv-image { width: 100%; }
+    .preview-block .pv-image-caption {
+      text-align: center; font-size: 0.82rem; color: #8898AA; margin-top: 6px;
+    }
+    .align-btns { display: flex; gap: 4px; margin-bottom: 10px; }
+    .align-btn {
+      padding: 5px 10px; border-radius: 8px; border: 1.5px solid rgba(15,23,42,0.1);
+      background: #f8f9fc; cursor: pointer; transition: all 0.12s; line-height: 1;
+      display: flex; align-items: center; gap: 4px; font-size: 0.78rem; font-weight: 600;
+      color: #6B7A8E;
+    }
+    .align-btn.active, .align-btn:hover { border-color: var(--violet); background: rgba(155,93,229,0.07); color: var(--violet); }
+    .preview-block .pv-divider { height: 1.5px; background: rgba(15,23,42,0.08); margin: 20px 0; }
+    .preview-block .pv-code pre {
+      background: #282c34; color: #abb2bf; padding: 16px 18px;
+      border-radius: 12px; font-size: 0.84rem; overflow-x: auto;
+    }
+    .preview-block table {
+      width: 100%; border-collapse: collapse; margin: 12px 0;
+    }
+    .preview-block th, .preview-block td {
+      border: 1.5px solid rgba(15,23,42,0.1); padding: 8px 12px;
+      font-size: 0.88rem; text-align: left;
+    }
+    .preview-block th { background: rgba(155,93,229,0.05); font-weight: 700; }
+    .preview-block .pv-quiz {
+      background: rgba(241,91,181,0.04); border: 1.5px solid rgba(241,91,181,0.12);
+      border-radius: 14px; padding: 16px 18px; margin: 12px 0;
+    }
+    .preview-block .pv-quiz-q { font-weight: 700; margin-bottom: 10px; }
+    .preview-block .pv-quiz-opt {
+      padding: 7px 12px; margin: 4px 0; border-radius: 8px;
+      background: rgba(15,23,42,0.03); font-size: 0.88rem;
+    }
+    .preview-block .pv-quiz-opt.correct {
+      background: rgba(6,214,160,0.1); border: 1px solid rgba(6,214,160,0.3);
+    }
+    /* ── flashcard flip ── */
+    .pv-flip-wrap {
+      perspective: 900px; cursor: pointer; margin: 12px 0; user-select: none;
+      touch-action: manipulation; -webkit-tap-highlight-color: transparent;
+    }
+    .pv-fc-card {
+      position: relative; width: 100%; min-height: 150px;
+      transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(.4,.2,.2,1);
+    }
+    .pv-fc-card.flipped { transform: rotateY(180deg); }
+    .pv-fc-front, .pv-fc-back {
+      position: absolute; inset: 0; padding: 22px 20px; min-height: 150px;
+      backface-visibility: hidden; -webkit-backface-visibility: hidden;
+      border-radius: 14px; display: flex; flex-direction: column;
+      justify-content: center; align-items: center; text-align: center;
+      box-sizing: border-box;
+    }
+    .pv-fc-front {
+      background: linear-gradient(135deg,rgba(155,93,229,0.07),rgba(155,93,229,0.03));
+      border: 1.5px solid rgba(155,93,229,0.2);
+    }
+    .pv-fc-back {
+      background: linear-gradient(135deg,rgba(6,214,160,0.07),rgba(6,214,160,0.03));
+      border: 1.5px solid rgba(6,214,160,0.2);
+      transform: rotateY(180deg);
+    }
+    .pv-fc-label {
+      font-size: 0.65rem; font-weight: 800; color: #8898AA; text-transform: uppercase;
+      letter-spacing: 0.08em; margin-bottom: 10px;
+    }
+    .pv-fc-text { font-size: 1rem; font-weight: 700; color: #0F172A; line-height: 1.55; }
+    .pv-fc-hint { font-size: 0.7rem; color: #CBD5E1; margin-top: 14px; }
+    .btn-preview-mode {
+      padding: 8px 14px; border: 1.5px solid rgba(6,214,224,0.3); border-radius: 999px;
+      background: rgba(6,214,224,0.06); color: #0891B2;
+      font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 700;
+      cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.15s;
+      flex-shrink: 0;
+    }
+    .btn-preview-mode:hover { background: rgba(6,214,224,0.14); }
+    .btn-preview-mode.active { background: rgba(6,214,224,0.18); border-color: #06D6E0; color: #0E7490; }
+    /* ── MOBILE ADAPTATION ── */
+    @media (max-width: 768px) {
+      /* Topbar: hide non-essential items */
+      .block-palette         { display: none; }
+      .etb-section-wrap      { display: none !important; }
+      .etb-word-count        { display: none; }
+      .etb-status            { display: none; }
+      .btn-pub-all           { display: none; }
+      .btn-pub               { display: none; }
+      .btn-preview           { display: none; }
+      #btn-undo, #btn-redo   { display: none; }
+      .etb-icon-btn[onclick*="SaveTpl"],
+      .etb-icon-btn[onclick*="LoadTpl"] { display: none; }
+      .etb-title             { max-width: 130px; font-size: 0.75rem; }
+      /* Icon-only buttons in topbar (font-size:0 hides text, icons use px dimensions) */
+      .btn-preview-mode { padding: 0 10px; min-height: 34px; font-size: 0; gap: 0; }
+      .btn-save         { padding: 0 12px; min-height: 34px; font-size: 0; gap: 0; }
+
+      /* Canvas: compact on mobile */
+      .editor-canvas { padding: 16px 10px 80px; }
+      .lesson-title-input { font-size: 1.1rem; margin-bottom: 18px; }
+
+      /* Block header: hide drag handle + dup to free up space */
+      .block-drag-handle { display: none; }
+      .block-action-btn.dup { display: none; }
+      .block-type-select { max-width: 90px; font-size: 0.62rem; }
+      /* All side-by-side flex rows <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> wrap on mobile */
+      .block-row { flex-wrap: wrap; }
+      /* Flashcard: stack two sides vertically */
+      .flashcard-editor { flex-direction: column; }
+      /* Columns editor: force single column */
+      .columns-editor-grid { grid-template-columns: 1fr !important; }
+      /* Style/align button groups: wrap when they overflow */
+      .align-btns { flex-wrap: wrap; }
+      /* Callout style buttons already have flex-wrap, just ensure consistent sizing */
+      .callout-style-btn { flex: 1; text-align: center; }
+      /* Image alt/caption pair: each takes full width */
+      .block-row .block-field { min-width: 0; }
+      /* Formula symbol picker: slightly smaller */
+      .sym-btn { padding: 2px 5px; font-size: 0.75rem; }
+      /* Table: ensure cells don't get too tiny */
+      .table-editor td, .table-editor th { min-width: 60px; font-size: 0.82rem; }
+
+      /* Outline panel: full-width dropdown below topbar instead of sticky sidebar */
+      .outline-panel {
+        position: fixed; top: 54px; left: 0; right: 0;
+        width: 100%; height: auto; max-height: 50vh;
+        border-left: none; border-bottom: 1px solid rgba(15,23,42,0.1);
+        z-index: 90; box-shadow: 0 4px 20px rgba(15,23,42,0.12);
+      }
+
+      /* Modals: full width */
+      .tpl-modal { padding: 8px; }
+      .modal { max-width: calc(100vw - 16px) !important; padding: 18px !important; }
+
+      /* Preview tables: horizontal scroll, text still wraps in cells */
+      .preview-block table { display: block; overflow-x: auto; }
+      .preview-block th, .preview-block td { padding: 5px 8px; font-size: 0.82rem; word-break: break-word; }
+
+      /* Quiz buttons: larger tap target */
+      .pv-quiz-opt-btn  { padding: 11px 14px; min-height: 44px; }
+      .pv-quiz-check-btn { padding: 11px 20px; min-height: 44px; }
+
+      /* Rich toolbar: larger touch targets */
+      .rich-toolbar-btn  { width: 34px; height: 34px; }
+      .mini-toolbar .rich-toolbar-btn { width: 32px; height: 32px; }
+
+      /* Image align: left/right <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> full width on mobile */
+      .pv-img-wrap.align-left .pv-image,
+      .pv-img-wrap.align-right .pv-image { max-width: 100%; }
+
+      /* Flashcard: use min-height based on content, not fixed absolute */
+      .pv-fc-card { min-height: 120px; }
+      .pv-fc-front, .pv-fc-back { min-height: 120px; padding: 16px 14px; }
+      .pv-fc-text { font-size: 0.9rem; }
+
+      /* Timeline date input: no max-width constraint on mobile */
+      .timeline-item-row input[style*="max-width:200px"] { max-width: 100% !important; }
+    }
+
+    /* Mobile FAB for adding blocks */
+    .mob-add-fab {
+      display: none;
+    }
+    @media (max-width: 768px) {
+      .mob-add-fab {
+        display: flex; position: fixed; bottom: 22px; right: 18px; z-index: 95;
+        width: 52px; height: 52px; border-radius: 50%;
+        background: var(--violet); color: #fff; border: none;
+        font-size: 1.5rem; line-height: 1; cursor: pointer;
+        align-items: center; justify-content: center;
+        box-shadow: 0 4px 16px rgba(155,93,229,0.45);
+        transition: transform 0.15s;
+      }
+      .mob-add-fab:active { transform: scale(0.92); }
+
+      /* Mobile block palette sheet */
+      .mob-palette-sheet {
+        position: fixed; bottom: 0; left: 0; right: 0; z-index: 94;
+        background: #fff; border-radius: 20px 20px 0 0;
+        box-shadow: 0 -4px 30px rgba(15,23,42,0.14);
+        padding: 8px 12px 28px; max-height: 55vh; overflow-y: auto;
+        transform: translateY(100%); transition: transform 0.25s cubic-bezier(.4,.2,.2,1);
+      }
+      .mob-palette-sheet.open { transform: translateY(0); }
+      .mob-palette-sheet-handle {
+        width: 40px; height: 4px; border-radius: 2px;
+        background: rgba(15,23,42,0.12); margin: 6px auto 12px;
+      }
+      .mob-palette-sheet .palette-section { margin-bottom: 14px; }
+      .mob-palette-sheet .palette-btn {
+        display: inline-flex; width: auto; padding: 7px 12px; margin: 3px;
+      }
+      .mob-backdrop {
+        display: none; position: fixed; inset: 0; z-index: 93;
+        background: rgba(0,0,0,0.25);
+      }
+      .mob-backdrop.show { display: block; }
+    }
+
+    /* ── C1: quote ── */
+    .preview-block .pv-quote {
+      border-left: 4px solid var(--violet); padding: 14px 20px; margin: 12px 0;
+      background: rgba(155,93,229,0.04); border-radius: 0 12px 12px 0;
+    }
+    .preview-block .pv-quote-text { font-size: 1.05rem; font-style: italic; color: #1E293B; line-height: 1.7; }
+    .preview-block .pv-quote-author { font-size: 0.82rem; font-weight: 700; color: #8898AA; margin-top: 8px; }
+
+    /* ── C2: checklist ── */
+    .checklist-item-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
+    .checklist-item-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--violet); flex-shrink: 0; cursor: pointer; }
+    .preview-block .pv-checklist { padding: 4px 0; }
+    .preview-block .pv-checklist-item {
+      display: flex; align-items: center; gap: 10px; padding: 7px 4px;
+      font-size: 0.9rem; border-bottom: 1px solid rgba(15,23,42,0.05); cursor: pointer;
+    }
+    .preview-block .pv-checklist-item:last-child { border-bottom: none; }
+    .preview-block .pv-checklist-item.checked { color: #8898AA; text-decoration: line-through; }
+    .preview-block .pv-checklist-cb { width: 17px; height: 17px; accent-color: var(--violet); cursor: pointer; flex-shrink: 0; }
+
+    /* ── C3: button/CTA ── */
+    .preview-block .pv-btn-cta-wrap { margin: 14px 0; }
+    .preview-block .pv-btn-cta-wrap.align-left   { text-align: left; }
+    .preview-block .pv-btn-cta-wrap.align-center { text-align: center; }
+    .preview-block .pv-btn-cta-wrap.align-right  { text-align: right; }
+    .preview-block .pv-btn-cta {
+      display: inline-block; padding: 11px 28px; border-radius: 10px;
+      font-family: 'Manrope', sans-serif; font-size: 0.9rem; font-weight: 700;
+      text-decoration: none; transition: all 0.15s;
+    }
+    .pv-btn-cta.style-primary   { background: var(--violet); color: #fff; box-shadow: 0 2px 8px rgba(155,93,229,0.3); }
+    .pv-btn-cta.style-secondary { background: rgba(155,93,229,0.1); color: var(--violet); border: 1.5px solid rgba(155,93,229,0.25); }
+    .pv-btn-cta.style-outline   { background: transparent; color: var(--violet); border: 2px solid var(--violet); }
+
+    /* ── C5: outline panel ── */
+    .outline-panel {
+      width: 210px; flex-shrink: 0;
+      background: #fff; border-left: 1px solid rgba(15,23,42,0.07);
+      padding: 16px 10px; position: sticky; top: 54px; height: calc(100vh - 54px);
+      overflow-y: auto; display: none;
+    }
+    .outline-panel.open { display: block; }
+    .outline-panel-title {
+      font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
+      color: #8898AA; margin-bottom: 10px; padding: 0 4px;
+    }
+    .outline-item {
+      display: block; width: 100%; text-align: left; border: none; background: none;
+      padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 0.8rem;
+      color: #3D4F6B; font-family: 'Manrope', sans-serif; font-weight: 600;
+      transition: all 0.12s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+      margin-bottom: 2px;
+    }
+    .outline-item:hover { background: rgba(155,93,229,0.06); color: var(--violet); }
+    .outline-item.h3 { padding-left: 20px; font-size: 0.74rem; font-weight: 500; color: #6B7A8E; }
+    .outline-empty { font-size: 0.78rem; color: #CBD5E1; padding: 6px; }
+
+    /* ── E3: interactive quiz in preview ── */
+    .pv-quiz-opt-btn {
+      display: block; width: 100%; text-align: left;
+      padding: 8px 12px; margin: 4px 0; border-radius: 8px;
+      background: rgba(15,23,42,0.03); border: 1.5px solid transparent;
+      font-family: 'Manrope', sans-serif; font-size: 0.88rem; cursor: pointer;
+      transition: all 0.15s;
+    }
+    .pv-quiz-opt-btn:hover:not(:disabled) { background: rgba(155,93,229,0.06); border-color: rgba(155,93,229,0.2); }
+    .pv-quiz-opt-btn.selected { background: rgba(155,93,229,0.08); border-color: rgba(155,93,229,0.3); color: var(--violet); }
+    .pv-quiz-opt-btn.right  { background: rgba(6,214,160,0.1); border-color: rgba(6,214,160,0.4); color: #047857; }
+    .pv-quiz-opt-btn.wrong  { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.3); color: #DC2626; }
+    .pv-quiz-opt-btn:disabled { cursor: default; }
+    .pv-quiz-check-btn {
+      margin-top: 8px; padding: 7px 16px; border-radius: 8px; border: none;
+      background: var(--violet); color: #fff;
+      font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 700; cursor: pointer;
+    }
+    .pv-quiz-check-btn:disabled { opacity: 0.45; cursor: default; }
+    .pv-quiz-expl { margin-top: 8px; font-size: 0.82rem; color: #6B7A8E; display: none; }
+    .pv-quiz-expl.show { display: block; }
+
+    /* ── E1: mini rich editor ── */
+    .mini-rich-wrap { position: relative; }
+    .mini-toolbar {
+      display: flex; gap: 3px; margin-bottom: 5px; opacity: 0;
+      transition: opacity 0.15s; pointer-events: none;
+    }
+    .mini-rich-wrap:focus-within .mini-toolbar { opacity: 1; pointer-events: auto; }
+    .mini-rich-editor {
+      min-height: 60px; width: 100%; outline: none; line-height: 1.7;
+      font-family: 'Manrope', sans-serif; font-size: 0.92rem; color: #1E293B;
+      padding: 0; background: transparent;
+    }
+    .mini-rich-editor:empty:before {
+      content: attr(data-placeholder); color: rgba(15,23,42,0.25); pointer-events: none;
+    }
+
+    /* ── E5: block type select ── */
+    .block-type-select {
+      font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
+      color: #8898AA; background: none; border: none; cursor: pointer;
+      font-family: 'Manrope', sans-serif; padding: 2px 4px; border-radius: 4px;
+      flex: 1; max-width: 110px;
+    }
+    .block-type-select:focus { outline: 1px solid rgba(155,93,229,0.3); color: var(--violet); }
+  </style>
+</head>
+<body>
+
+<!-- Topbar -->
+<div class="editor-topbar">
+  <a href="#" id="etb-back" class="etb-back">
+    <i data-lucide="arrow-left" style="width:15px;height:15px"></i> Назад
+  </a>
+  <div class="etb-title" id="etb-title">Загрузка…</div>
+
+  <div class="etb-section-wrap" id="etb-section-wrap" style="display:none">
+    <label style="font-size:0.74rem;color:#8898AA;font-weight:600">Раздел:</label>
+    <select id="section-select" class="etb-select" onchange="assignSection(this.value)">
+      <option value="">— без раздела —</option>
+    </select>
+  </div>
+
+  <div class="etb-spacer"></div>
+  <span id="word-count-display" class="etb-word-count"></span>
+
+  <div class="etb-actions">
+    <button class="etb-icon-btn" id="btn-undo" onclick="undo()" title="Отменить (Ctrl+Z)" disabled>
+      <i data-lucide="undo-2" style="width:15px;height:15px"></i>
+    </button>
+    <button class="etb-icon-btn" id="btn-redo" onclick="redo()" title="Повторить (Ctrl+Y)" disabled>
+      <i data-lucide="redo-2" style="width:15px;height:15px"></i>
+    </button>
+    <button class="etb-icon-btn" id="btn-outline" onclick="toggleOutline()" title="Структура урока">
+      <i data-lucide="list" style="width:15px;height:15px"></i>
+    </button>
+    <button class="etb-icon-btn" onclick="openSaveTplModal()" title="Сохранить как шаблон">
+      <i data-lucide="bookmark-plus" style="width:15px;height:15px"></i>
+    </button>
+    <button class="etb-icon-btn" onclick="openLoadTplModal()" title="Загрузить из шаблона">
+      <i data-lucide="folder-open" style="width:15px;height:15px"></i>
+    </button>
+    <span class="etb-status" id="etb-status"></span>
+    <button class="btn-pub-all" id="btn-pub-all" onclick="publishAllLessons()" title="Опубликовать все уроки курса сразу">Опубликовать всё</button>
+    <button class="btn-pub" id="btn-pub" onclick="togglePublish()">Опубликовать</button>
+    <button class="btn-preview-mode" id="btn-preview-mode" onclick="togglePreviewMode()">
+      <i data-lucide="monitor" style="width:14px;height:14px"></i> Превью
+    </button>
+    <button class="btn-preview" onclick="goPreview()">
+      <i data-lucide="external-link" style="width:14px;height:14px"></i> Открыть
+    </button>
+    <button class="etb-icon-btn" onclick="exportPDF()" title="Экспорт в PDF" style="border-color:rgba(155,93,229,0.25);color:var(--violet)">
+      <i data-lucide="file-down" style="width:15px;height:15px"></i>
+    </button>
+    <button class="btn-save" id="btn-save" onclick="saveLesson()">
+      <i data-lucide="save" style="width:14px;height:14px"></i> Сохранить
+    </button>
+  </div>
+</div>
+
+<div class="editor-wrap">
+  <!-- Block palette -->
+  <div class="block-palette">
+    <input type="text" class="palette-search" id="palette-search"
+           placeholder="Поиск блоков..."
+           oninput="filterPalette(this.value)" />
+    <div class="palette-section">
+      <div class="palette-label">Текст</div>
+      <button class="palette-btn" onclick="addBlock('heading')">
+        <div class="palette-btn-icon pbi-heading">H</div> Заголовок
+      </button>
+      <button class="palette-btn" onclick="addBlock('text')">
+        <div class="palette-btn-icon pbi-text">¶</div> Параграф
+      </button>
+      <button class="palette-btn" onclick="addBlock('callout')">
+        <div class="palette-btn-icon pbi-callout"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle"><path d="M9 18h6m-5 2h4M12 2a7 7 0 00-4 12.7V17h8v-2.3A7 7 0 0012 2z"/></svg></div> Выноска
+      </button>
+      <button class="palette-btn" onclick="addBlock('quote')">
+        <div class="palette-btn-icon" style="background:rgba(155,93,229,0.1);color:var(--violet);font-size:1rem;font-weight:900">"</div> Цитата
+      </button>
+      <button class="palette-btn" onclick="addBlock('checklist')">
+        <div class="palette-btn-icon" style="background:rgba(6,214,160,0.1);color:#06D6A0"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg></div> Чеклист
+      </button>
+    </div>
+    <div class="palette-section">
+      <div class="palette-label">Медиа</div>
+      <button class="palette-btn" onclick="addBlock('image')">
+        <div class="palette-btn-icon pbi-image"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg></div> Изображение
+      </button>
+      <button class="palette-btn" onclick="addBlock('video')">
+        <div class="palette-btn-icon pbi-video"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle"><rect x="2" y="5" width="14" height="14" rx="2"/><path d="M22 7l-6 4 6 4V7z"/></svg></div> Видео
+      </button>
+    </div>
+    <div class="palette-section">
+      <div class="palette-label">Контент</div>
+      <button class="palette-btn" onclick="addBlock('formula')">
+        <div class="palette-btn-icon pbi-formula">∑</div> Формула
+      </button>
+      <button class="palette-btn" onclick="addBlock('code')">
+        <div class="palette-btn-icon pbi-code">&lt;/&gt;</div> Код
+      </button>
+      <button class="palette-btn" onclick="addBlock('table')">
+        <div class="palette-btn-icon pbi-table">⊞</div> Таблица
+      </button>
+    </div>
+    <div class="palette-section">
+      <div class="palette-label">Интерактив</div>
+      <button class="palette-btn" onclick="addBlock('quiz')">
+        <div class="palette-btn-icon pbi-quiz">?</div> Вопрос
+      </button>
+      <button class="palette-btn" onclick="addBlock('flashcard')">
+        <div class="palette-btn-icon pbi-flash"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle"><rect x="2" y="3" width="20" height="18" rx="2"/><path d="M8 3v18"/></svg></div> Карточка
+      </button>
+      <button class="palette-btn" onclick="addBlock('sim')">
+        <div class="palette-btn-icon pbi-sim"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle"><circle cx="12" cy="12" r="2"/><ellipse cx="12" cy="12" rx="10" ry="4"/><ellipse cx="12" cy="12" rx="10" ry="4" transform="rotate(60 12 12)"/><ellipse cx="12" cy="12" rx="10" ry="4" transform="rotate(120 12 12)"/></svg></div> Симуляция
+      </button>
+      <button class="palette-btn" onclick="addBlock('matching')">
+        <div class="palette-btn-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle"><path d="M16 3h5v5M4 20L21 3M21 16v5h-5M15 15l6 6M4 4l5 5"/></svg></div> Сопоставление
+      </button>
+      <button class="palette-btn" onclick="addBlock('fill-blank')">
+        <div class="palette-btn-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z"/><path d="M14 2v6h6M16 13H8m8 4H8m2-8H8"/></svg></div> Пропуски
+      </button>
+      <button class="palette-btn" onclick="addBlock('ordering')">
+        <div class="palette-btn-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle"><path d="M12 5v14m7-7l-7 7-7-7"/></svg></div> Порядок
+      </button>
+    </div>
+    <div class="palette-section">
+      <div class="palette-label">Расширенные</div>
+      <button class="palette-btn" onclick="addBlock('accordion')">
+        <div class="palette-btn-icon" style="background:rgba(99,102,241,0.1);color:#6366F1"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg></div> Аккордеон
+      </button>
+      <button class="palette-btn" onclick="addBlock('timeline')">
+        <div class="palette-btn-icon" style="background:rgba(14,165,233,0.1);color:#0EA5E9"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg></div> Хронология
+      </button>
+      <button class="palette-btn" onclick="addBlock('diagram')">
+        <div class="palette-btn-icon" style="background:rgba(168,85,247,0.1);color:#A855F7"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="8" y="14" width="7" height="7"/><path d="M6.5 10v4M17.5 10v2.5H15m-3.5 1.5V10"/></svg></div> Диаграмма
+      </button>
+      <button class="palette-btn" onclick="addBlock('geogebra')">
+        <div class="palette-btn-icon" style="background:rgba(34,197,94,0.1);color:#22C55E"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg></div> GeoGebra
+      </button>
+      <button class="palette-btn" onclick="addBlock('audio')">
+        <div class="palette-btn-icon" style="background:rgba(249,115,22,0.1);color:#F97316"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg></div> Аудио
+      </button>
+      <button class="palette-btn" onclick="addBlock('columns')">
+        <div class="palette-btn-icon" style="background:rgba(59,130,246,0.1);color:#3B82F6"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="18" rx="1"/><rect x="14" y="3" width="7" height="18" rx="1"/></svg></div> Колонки
+      </button>
+      <button class="palette-btn" onclick="addBlock('alert')">
+        <div class="palette-btn-icon" style="background:rgba(239,71,111,0.1);color:#EF476F"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" y1="22" x2="4" y2="15"/></svg></div> Баннер
+      </button>
+    </div>
+    <div class="palette-section">
+      <div class="palette-label">Прочее</div>
+      <button class="palette-btn" onclick="addBlock('button')">
+        <div class="palette-btn-icon" style="background:rgba(155,93,229,0.1);color:var(--violet)"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="10" rx="5"/></svg></div> Кнопка
+      </button>
+      <button class="palette-btn" onclick="addBlock('divider')">
+        <div class="palette-btn-icon pbi-div">—</div> Разделитель
+      </button>
+    </div>
+  </div>
+
+  <!-- Editor canvas -->
+  <div class="editor-canvas">
+    <!-- Lesson title -->
+    <textarea class="lesson-title-input" id="lesson-title"
+              placeholder="Название урока…" rows="1"
+              oninput="autoResize(this);markDirty()"></textarea>
+
+    <!-- Blocks -->
+    <div id="blocks-container"></div>
+  </div>
+
+  <!-- Outline panel (C5) -->
+  <div class="outline-panel" id="outline-panel">
+    <div class="outline-panel-title">Структура</div>
+    <div id="outline-list"></div>
+  </div>
+</div>
+
+<!-- Mobile: FAB + palette sheet -->
+<button class="mob-add-fab" id="mob-add-fab" onclick="toggleMobPalette()" title="Добавить блок">+</button>
+<div class="mob-backdrop" id="mob-backdrop" onclick="closeMobPalette()"></div>
+<div class="mob-palette-sheet" id="mob-palette-sheet">
+  <div class="mob-palette-sheet-handle"></div>
+  <div id="mob-palette-inner"></div>
+</div>
+
+<script src="/js/api.js"></script>
+<script>
+  if (!LS.requireAuth()) throw new Error();
+  const user = LS.getUser();
+  if (!['admin','teacher'].includes(user?.role)) {
+    location.href = '/theory';
+  }
+  lucide.createIcons();
+
+  /* ── state ── */
+  const lessonId = new URLSearchParams(location.search).get('id');
+  if (!lessonId) location.href = '/theory';
+
+  let lesson = null;
+  let blocks = [];   // [{id, type, orderIndex, data}] — live state
+  let _nextId = 1;   // local temp ids for new blocks
+  let _dirty  = false;
+  let _saving = false;
+
+  /* ── undo/redo ── */
+  let _history    = [];
+  let _historyIdx = -1;
+  const HISTORY_MAX = 50;
+
+  function pushHistory() {
+    const snap = JSON.stringify(blocks);
+    // drop redoable future
+    if (_historyIdx < _history.length - 1) {
+      _history = _history.slice(0, _historyIdx + 1);
+    }
+    _history.push(snap);
+    if (_history.length > HISTORY_MAX) _history.shift();
+    _historyIdx = _history.length - 1;
+    updateUndoRedoBtns();
+  }
+
+  function updateUndoRedoBtns() {
+    document.getElementById('btn-undo').disabled = (_historyIdx <= 0);
+    document.getElementById('btn-redo').disabled = (_historyIdx >= _history.length - 1);
+  }
+
+  function undo() {
+    if (_historyIdx <= 0) return;
+    _historyIdx--;
+    blocks = JSON.parse(_history[_historyIdx]);
+    renderBlocks();
+    markDirty();
+    updateUndoRedoBtns();
+  }
+
+  function redo() {
+    if (_historyIdx >= _history.length - 1) return;
+    _historyIdx++;
+    blocks = JSON.parse(_history[_historyIdx]);
+    renderBlocks();
+    markDirty();
+    updateUndoRedoBtns();
+  }
+
+  function markDirty() {
+    _dirty = true;
+    setStatus('');
+    updateWordCount();
+    if (document.getElementById('outline-panel')?.classList.contains('open')) updateOutline();
+  }
+  function setStatus(msg, ok) {
+    const el = document.getElementById('etb-status');
+    el.textContent = msg;
+    el.className   = 'etb-status' + (ok ? ' saved' : '');
+  }
+
+  /* ── auto-save on blur / keyboard ── */
+  let _autoSaveTimer = null;
+  function scheduleAutoSave() {
+    clearTimeout(_autoSaveTimer);
+    _autoSaveTimer = setTimeout(() => { if (_dirty) saveLesson(true); }, 2000);
+  }
+
+  /* ── load ── */
+  async function loadLesson() {
+    try {
+      lesson = await LS.api('/api/lessons/' + lessonId);
+    } catch {
+      document.getElementById('etb-title').textContent = 'Урок не найден';
+      return;
+    }
+    document.title = 'Редактор: ' + lesson.title + ' — LearnSpace';
+    document.getElementById('etb-title').textContent = lesson.title;
+    document.getElementById('lesson-title').value    = lesson.title;
+    autoResize(document.getElementById('lesson-title'));
+
+    const back = document.getElementById('etb-back');
+    back.href = '/course?id=' + lesson.courseId;
+
+    const pubBtn = document.getElementById('btn-pub');
+    pubBtn.textContent = lesson.isPublished ? 'Снять с публикации' : 'Опубликовать';
+    if (lesson.isPublished) pubBtn.classList.add('published');
+
+    blocks = (lesson.blocks || []).map(b => ({ ...b, _id: b.id || ('n' + _nextId++) }));
+
+    // push initial history snapshot
+    pushHistory();
+
+    renderBlocks();
+
+    // load sections if courseId is known
+    if (lesson.courseId) {
+      loadSections(lesson.courseId, lesson.sectionId);
+    }
+  }
+
+  /* ── sections ── */
+  async function loadSections(courseId, currentSectionId) {
+    try {
+      const sections = await LS.api('/api/courses/' + courseId + '/sections');
+      if (!sections || !sections.length) return;
+      const wrap = document.getElementById('etb-section-wrap');
+      const sel  = document.getElementById('section-select');
+      sections.forEach(s => {
+        const opt = document.createElement('option');
+        opt.value = s.id;
+        opt.textContent = s.title || s.name || ('Раздел ' + s.id);
+        if (currentSectionId && String(s.id) === String(currentSectionId)) opt.selected = true;
+        sel.appendChild(opt);
+      });
+      wrap.style.display = 'flex';
+    } catch { /* sections endpoint may not exist yet */ }
+  }
+
+  async function assignSection(sectionId) {
+    try {
+      await LS.api('/api/lessons/' + lessonId, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ sectionId: sectionId || null }),
+      });
+      if (lesson) lesson.sectionId = sectionId || null;
+      setStatus('Раздел обновлён', true);
+      setTimeout(() => setStatus(''), 2000);
+    } catch (e) { LS.toast(e.message || 'Ошибка обновления раздела', 'error'); }
+  }
+
+  /* ── KaTeX helper ── */
+  function renderKatexIn(el) {
+    if (!el) return;
+    const doRender = () => {
+      try {
+        renderMathInElement(el, {
+          delimiters: [
+            { left:'$$', right:'$$', display:true },
+            { left:'$',  right:'$',  display:false },
+          ], throwOnError: false,
+        });
+      } catch {}
+    };
+    if (window._katexLoaded && window.renderMathInElement) doRender();
+    else { window._katexCb = doRender; }
+  }
+
+  /* ── block defaults ── */
+  const BLOCK_DEFAULTS = {
+    heading:   { level: 2, text: '' },
+    text:      { html: '' },
+    formula:   { tex: '', label: '' },
+    image:     { url: '', alt: '', caption: '' },
+    code:      { code: '', lang: 'js' },
+    quiz:      { question: '', options: ['', ''], correctIndex: 0 },
+    divider:   {},
+    callout:   { style: 'info', text: '' },
+    video:     { url: '', caption: '' },
+    table:     { rows: [['', ''], ['', '']], headers: true },
+    flashcard: { front: '', back: '' },
+    sim:       { simId: '', caption: '' },
+    matching:  { question: '', pairs: [{left:'', right:''}] },
+    'fill-blank': { text: 'Столица Франции — {Париж}.', blanks: [] },
+    ordering:  { question: '', items: ['Шаг 1','Шаг 2','Шаг 3'] },
+    accordion: { title: 'Подробнее…', content: '' },
+    timeline:  { items: [{ date: '', title: '', text: '' }] },
+    diagram:   { code: 'graph TD\n  A[Начало] --> B{Условие}\n  B -->|Да| C[Действие]\n  B -->|Нет| D[Конец]', caption: '' },
+    geogebra:  { materialId: '', caption: '' },
+    audio:     { url: '', caption: '' },
+    columns:   { cols: [{ content: '' }, { content: '' }] },
+    alert:     { style: 'exam', text: '' },
+    quote:     { text: '', author: '' },
+    checklist: { items: [{ text: '', checked: false }] },
+    button:    { label: 'Нажмите здесь', url: '', style: 'primary', align: 'center' },
+  };
+  const BLOCK_LABELS = {
+    heading: 'Заголовок', text: 'Параграф', formula: 'Формула',
+    image: 'Изображение', code: 'Код', quiz: 'Вопрос', divider: 'Разделитель',
+    callout: 'Выноска', video: 'Видео', table: 'Таблица',
+    flashcard: 'Карточка', sim: 'Симуляция',
+    matching: 'Сопоставление', 'fill-blank': 'Пропуски', ordering: 'Порядок',
+    accordion: 'Аккордеон', timeline: 'Хронология', diagram: 'Диаграмма',
+    geogebra: 'GeoGebra', audio: 'Аудио',
+    columns: 'Колонки', alert: 'Баннер',
+    quote: 'Цитата', checklist: 'Чеклист', button: 'Кнопка',
+  };
+
+  function addBlock(type, data, afterId) {
+    pushHistory();
+    const id = 'n' + _nextId++;
+    // deep-clone defaults
+    const defaults = JSON.parse(JSON.stringify(BLOCK_DEFAULTS[type] || {}));
+    const newBlock = {
+      _id: id, type,
+      orderIndex: blocks.length,
+      data: Object.assign(defaults, data || {}),
+    };
+    if (afterId) {
+      const idx = blocks.findIndex(b => b._id === afterId);
+      blocks.splice(idx + 1, 0, newBlock);
+    } else {
+      blocks.push(newBlock);
+    }
+    renderBlocks();
+    markDirty();
+    // focus the new block's first input
+    setTimeout(() => {
+      const card = document.querySelector(`.block-card[data-bid="${id}"]`);
+      if (card) {
+        const inp = card.querySelector('textarea,input[type=text],[contenteditable]');
+        if (inp) inp.focus();
+      }
+    }, 40);
+  }
+
+  function removeBlock(id) {
+    pushHistory();
+    blocks = blocks.filter(b => b._id !== id);
+    renderBlocks();
+    markDirty();
+  }
+
+  function moveBlock(id, dir) {
+    pushHistory();
+    const idx = blocks.findIndex(b => b._id === id);
+    if (idx < 0) return;
+    const swapIdx = idx + dir;
+    if (swapIdx < 0 || swapIdx >= blocks.length) return;
+    [blocks[idx], blocks[swapIdx]] = [blocks[swapIdx], blocks[idx]];
+    renderBlocks();
+    markDirty();
+  }
+
+  function duplicateBlock(id) {
+    pushHistory();
+    const idx = blocks.findIndex(b => b._id === id);
+    if (idx < 0) return;
+    const orig = blocks[idx];
+    const copy = {
+      _id: 'n' + _nextId++,
+      type: orig.type,
+      orderIndex: orig.orderIndex,
+      data: JSON.parse(JSON.stringify(orig.data)),
+    };
+    blocks.splice(idx + 1, 0, copy);
+    renderBlocks();
+    markDirty();
+  }
+
+  /* ── render all blocks ── */
+  function renderBlocks() {
+    updateWordCount();
+    if (document.getElementById('outline-panel')?.classList.contains('open')) updateOutline();
+    const container = document.getElementById('blocks-container');
+    if (!blocks.length) {
+      container.innerHTML = `<div class="canvas-hint">
+        <div class="canvas-hint-title">Добавьте первый блок</div>
+        Выберите тип блока из палитры слева или нажмите кнопку ниже.<br>
+        Каждый блок можно перетащить, переместить или удалить.
+      </div>`;
+      return;
+    }
+
+    container.innerHTML = blocks.map((b, i) => renderBlockCard(b, i)).join('');
+
+    // wire events
+    container.querySelectorAll('.block-card').forEach(card => {
+      const bid = card.dataset.bid;
+      // drag and drop
+      card.setAttribute('draggable', 'true');
+      card.addEventListener('dragstart', e => {
+        e.dataTransfer.setData('text/plain', bid);
+        card.classList.add('dragging');
+      });
+      card.addEventListener('dragend', () => card.classList.remove('dragging'));
+      card.addEventListener('dragover', e => { e.preventDefault(); card.classList.add('drag-over'); });
+      card.addEventListener('dragleave', () => card.classList.remove('drag-over'));
+      card.addEventListener('drop', e => {
+        e.preventDefault(); card.classList.remove('drag-over');
+        const fromId = e.dataTransfer.getData('text/plain');
+        if (fromId === bid) return;
+        pushHistory();
+        const fromIdx = blocks.findIndex(b => b._id === fromId);
+        const toIdx   = blocks.findIndex(b => b._id === bid);
+        const [moved] = blocks.splice(fromIdx, 1);
+        blocks.splice(toIdx, 0, moved);
+        renderBlocks(); markDirty();
+      });
+    });
+
+    // wire rich-text editors (contenteditable)
+    container.querySelectorAll('.rich-editor').forEach(el => {
+      const bid = el.dataset.bid;
+      const toolbar = el.previousElementSibling;
+      el.addEventListener('focus', () => { if (toolbar) toolbar.classList.add('visible'); });
+      el.addEventListener('blur',  () => {
+        setTimeout(() => {
+          if (!toolbar.contains(document.activeElement)) toolbar.classList.remove('visible');
+        }, 150);
+        const b = blocks.find(x => x._id === bid);
+        if (b) { b.data.html = el.innerHTML; markDirty(); scheduleAutoSave(); }
+      });
+      el.addEventListener('input', () => {
+        const b = blocks.find(x => x._id === bid);
+        if (b) { b.data.html = el.innerHTML; markDirty(); scheduleAutoSave(); }
+      });
+    });
+
+    // wire mini rich editors
+    container.querySelectorAll('.mini-rich-editor').forEach(el => {
+      const ibid = el.dataset.bid;
+      const key  = el.dataset.key;
+      const syncMini = () => {
+        const b = blocks.find(x => x._id === ibid);
+        if (!b) return;
+        if (key.startsWith('col:')) {
+          const ci = parseInt(key.slice(4), 10);
+          if (Array.isArray(b.data.cols)) b.data.cols[ci].content = el.innerHTML;
+        } else {
+          b.data[key] = el.innerHTML;
+        }
+      };
+      el.addEventListener('input', () => { syncMini(); markDirty(); scheduleAutoSave(); });
+      el.addEventListener('blur',  () => { syncMini(); markDirty(); scheduleAutoSave(); });
+    });
+
+    // wire table editors
+    container.querySelectorAll('.table-editor table').forEach(table => {
+      const bid = table.dataset.bid;
+      table.querySelectorAll('td,th').forEach(cell => {
+        cell.addEventListener('input', () => syncTableData(bid, table));
+        cell.addEventListener('blur',  () => { syncTableData(bid, table); markDirty(); scheduleAutoSave(); });
+      });
+    });
+
+    lucide.createIcons();
+
+    // Highlight code blocks
+    if (window.hljs) {
+      container.querySelectorAll('.code-preview pre code').forEach(el => hljs.highlightElement(el));
+    }
+
+    // Mermaid diagrams
+    if (window.mermaid) {
+      try { mermaid.run({ nodes: container.querySelectorAll('.mermaid') }); } catch {}
+    }
+  }
+
+  /* ── formula symbol picker ── */
+  const SYM_CATS = {
+    'Греческие': [
+      ['\\alpha','α'],['\\beta','β'],['\\gamma','γ'],['\\delta','δ'],['\\epsilon','ε'],
+      ['\\zeta','ζ'],['\\eta','η'],['\\theta','θ'],['\\iota','ι'],['\\kappa','κ'],
+      ['\\lambda','λ'],['\\mu','μ'],['\\nu','ν'],['\\xi','ξ'],['\\pi','π'],
+      ['\\rho','ρ'],['\\sigma','σ'],['\\tau','τ'],['\\phi','φ'],['\\chi','χ'],
+      ['\\psi','ψ'],['\\omega','ω'],
+      ['\\Gamma','Γ'],['\\Delta','Δ'],['\\Theta','Θ'],['\\Lambda','Λ'],['\\Xi','Ξ'],
+      ['\\Pi','Π'],['\\Sigma','Σ'],['\\Phi','Φ'],['\\Psi','Ψ'],['\\Omega','Ω'],
+    ],
+    'Операции': [
+      ['\\frac{a}{b}','a/b'],['\\sqrt{x}','√'],['\\sqrt[n]{x}','ⁿ√'],
+      ['\\sum','∑'],['\\prod','∏'],['\\int','∫'],['\\iint','∬'],['\\oint','∮'],
+      ['\\lim','lim'],['\\infty','∞'],['\\partial','∂'],['\\nabla','∇'],
+      ['\\pm','±'],['\\mp','∓'],['\\times','×'],['\\div','÷'],['\\cdot','·'],
+    ],
+    'Степени': [
+      ['^{2}','x²'],['^{3}','x³'],['_{n}','xₙ'],['_{i}','xᵢ'],
+      ['e^{x}','eˣ'],['10^{n}','10ⁿ'],
+    ],
+    'Отношения': [
+      ['\\leq','≤'],['\\geq','≥'],['\\neq','≠'],['\\approx','≈'],['\\equiv','≡'],
+      ['\\sim','∼'],['\\propto','∝'],['\\ll','≪'],['\\gg','≫'],
+    ],
+    'Стрелки': [
+      ['\\to','<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>'],['\\leftarrow','<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>'],['\\Rightarrow','<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>'],['\\Leftrightarrow','<svg class="ic" viewBox="0 0 24 24"><line x1="3" y1="12" x2="21" y2="12"/><polyline points="8 17 3 12 8 7"/><polyline points="16 7 21 12 16 17"/></svg>'],
+      ['\\uparrow','<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>'],['\\downarrow','<svg class="ic" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>'],
+    ],
+    'Скобки': [
+      ['\\left( \\right)','(…)'],['\\left[ \\right]','[…]'],['\\left\\{ \\right\\}','{…}'],
+      ['\\left| \\right|','|…|'],['\\left\\| \\right\\|','‖…‖'],
+    ],
+    'Физика': [
+      ['\\vec{F}','F⃗'],['\\hat{x}','x̂'],['\\hbar','ℏ'],['\\Delta t','Δt'],
+      ['\\mathbf{E}','E'],['\\mathbf{B}','B'],
+    ],
+  };
+  let _symCurrentCat = 'Греческие';
+
+  function _buildSymPicker(bid) {
+    const cats = Object.keys(SYM_CATS);
+    const catBtns = cats.map(c =>
+      `<button class="sym-cat-btn${c===_symCurrentCat?' active':''}"
+               onclick="_symSetCat('${bid}','${c}',this)">${c}</button>`
+    ).join('');
+    const syms = (SYM_CATS[_symCurrentCat]||[]).map(([latex, display]) =>
+      `<button class="sym-btn" title="${latex}" onclick="insertSym('${bid}','${latex.replace(/'/g,"\\'")}')">` +
+      `${display}</button>`
+    ).join('');
+    return `<div class="sym-cat-row">${catBtns}</div><div class="sym-picker">${syms}</div>`;
+  }
+
+  function _symSetCat(bid, cat, btn) {
+    _symCurrentCat = cat;
+    const picker = document.getElementById('sym-picker-' + bid);
+    if (!picker) return;
+    picker.querySelectorAll('.sym-cat-btn').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    picker.querySelector('.sym-picker').innerHTML =
+      (SYM_CATS[cat]||[]).map(([latex, display]) =>
+        `<button class="sym-btn" title="${latex}" onclick="insertSym('${bid}','${latex.replace(/'/g,"\\'")}')">` +
+        `${display}</button>`
+      ).join('');
+  }
+
+  function toggleSymPicker(bid) {
+    const el = document.getElementById('sym-picker-' + bid);
+    if (!el) return;
+    if (el.style.display === 'none') {
+      el.innerHTML = _buildSymPicker(bid);
+      el.style.display = 'block';
+    } else {
+      el.style.display = 'none';
+    }
+  }
+
+  function insertSym(bid, latex) {
+    const ta = document.getElementById('ftex-' + bid);
+    if (!ta) return;
+    const start = ta.selectionStart, end = ta.selectionEnd;
+    const val = ta.value;
+    ta.value = val.slice(0, start) + latex + val.slice(end);
+    ta.selectionStart = ta.selectionEnd = start + latex.length;
+    ta.dispatchEvent(new Event('input', { bubbles: true }));
+    ta.focus();
+  }
+
+  /* ── render single block card ── */
+  function renderBlockCard(b, i) {
+    const isCollapsed = !!b._collapsed;
+    const typeOptions = Object.keys(BLOCK_LABELS).map(t =>
+      `<option value="${t}" ${t === b.type ? 'selected' : ''}>${BLOCK_LABELS[t]}</option>`
+    ).join('');
+    return `<div class="block-card${isCollapsed ? ' collapsed' : ''}" data-bid="${b._id}">
+      <div class="block-header">
+        <span class="block-drag-handle" title="Перетащить"><i data-lucide="grip-vertical" style="width:14px;height:14px"></i></span>
+        <select class="block-type-select" title="Изменить тип блока"
+                onchange="changeBlockType('${b._id}',this.value)">${typeOptions}</select>
+        <div class="block-actions">
+          <button class="block-action-btn block-collapse-btn" title="${isCollapsed ? 'Развернуть' : 'Свернуть'}" onclick="toggleBlockCollapse('${b._id}')">
+            <i data-lucide="chevron-down" style="width:13px;height:13px"></i>
+          </button>
+          <button class="block-action-btn" title="Вверх" onclick="moveBlock('${b._id}',-1)">
+            <i data-lucide="chevron-up" style="width:13px;height:13px"></i>
+          </button>
+          <button class="block-action-btn" title="Вниз" onclick="moveBlock('${b._id}',1)">
+            <i data-lucide="chevron-down" style="width:13px;height:13px"></i>
+          </button>
+          <button class="block-action-btn dup" title="Дублировать" onclick="duplicateBlock('${b._id}')">
+            <i data-lucide="copy" style="width:13px;height:13px"></i>
+          </button>
+          <button class="block-action-btn danger" title="Удалить" onclick="removeBlock('${b._id}')">
+            <i data-lucide="trash-2" style="width:13px;height:13px"></i>
+          </button>
+        </div>
+      </div>
+      <div class="block-body">${renderBlockEditor(b)}</div>
+    </div>`;
+  }
+
+  function renderBlockEditor(b) {
+    const d = b.data;
+    const bid = b._id;
+    switch (b.type) {
+
+      case 'heading':
+        return `<div class="block-row">
+          <select class="heading-level-select" onchange="updateBlockData('${bid}','level',parseInt(this.value));markDirty()">
+            <option value="2" ${d.level!==3?'selected':''}>H2</option>
+            <option value="3" ${d.level===3?'selected':''}>H3</option>
+          </select>
+          <input class="block-input" type="text" value="${escAttr(d.text||'')}"
+                 placeholder="Текст заголовка…"
+                 oninput="updateBlockData('${bid}','text',this.value);markDirty();scheduleAutoSave()" />
+        </div>`;
+
+      case 'text': {
+        // backward compat: if only data.text exists (old format), use as plaintext
+        const htmlContent = d.html != null ? d.html : esc(d.text || '');
+        return `<div>
+          <div class="rich-toolbar" id="rt-${bid}">
+            <button class="rich-toolbar-btn" title="Жирный" onmousedown="event.preventDefault();document.execCommand('bold')"><b>B</b></button>
+            <button class="rich-toolbar-btn" title="Курсив" onmousedown="event.preventDefault();document.execCommand('italic')"><i>I</i></button>
+            <button class="rich-toolbar-btn" title="Код" onmousedown="event.preventDefault();wrapCode('${bid}')"><code style="font-size:0.78rem">&lt;/&gt;</code></button>
+            <button class="rich-toolbar-btn" title="Ссылка" onmousedown="event.preventDefault();insertLink()"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle"><path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71m4.54 5.07a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/></svg></button>
+          </div>
+          <div class="rich-editor" contenteditable="true" data-bid="${bid}"
+               data-placeholder="Введите текст параграфа…">${htmlContent}</div>
+        </div>`;
+      }
+
+      case 'formula':
+        return `<div>
+          <div class="block-field">
+            <div class="block-row-label">Метка (необязательно)</div>
+            <input class="block-input" type="text" placeholder="Закон Кулона" value="${escAttr(d.label||'')}"
+                   oninput="updateBlockData('${bid}','label',this.value);markDirty()" />
+          </div>
+          <div class="block-field">
+            <div class="block-row-label" style="display:flex;align-items:center;justify-content:space-between">
+              <span>LaTeX-формула</span>
+              <button style="background:none;border:none;cursor:pointer;font-size:.72rem;color:#9B5DE5;padding:0"
+                      onclick="toggleSymPicker('${bid}')">𝛴 символы</button>
+            </div>
+            <div id="sym-picker-${bid}" style="display:none;margin-bottom:6px">
+              ${_buildSymPicker(bid)}
+            </div>
+            <textarea class="block-textarea" rows="2" id="ftex-${bid}"
+                      placeholder="F = k \\frac{q_1 q_2}{r^2}"
+                      oninput="autoResize(this);updateBlockData('${bid}','tex',this.value);updateFormulaPreview('${bid}');markDirty();scheduleAutoSave()"
+                    >${esc(d.tex||'')}</textarea>
+          </div>
+          <div class="formula-preview" id="fp-${bid}">$$${esc(d.tex||'')}$$</div>
+        </div>`;
+
+      case 'image': {
+        const imgAlign = d.align || 'center';
+        const alignOpts = [
+          { val: 'left',   icon: 'align-left',   label: 'Лево' },
+          { val: 'center', icon: 'align-center',  label: 'Центр' },
+          { val: 'right',  icon: 'align-right',   label: 'Право' },
+          { val: 'full',   icon: 'maximize-2',    label: 'Во всю' },
+        ];
+        return `<div>
+          <div class="align-btns">
+            ${alignOpts.map(a => `<button class="align-btn${imgAlign===a.val?' active':''}"
+              onclick="updateBlockData('${bid}','align','${a.val}');markDirty();rerenderBlock('${bid}')"
+              title="${a.label}">
+              <i data-lucide="${a.icon}" style="width:13px;height:13px"></i>${a.label}
+            </button>`).join('')}
+          </div>
+          <div class="block-field">
+            <div class="block-row-label">URL изображения</div>
+            <input class="block-input" type="text" placeholder="https://…" value="${escAttr(d.url||'')}"
+                   oninput="updateBlockData('${bid}','url',this.value);markDirty()" />
+          </div>
+          <div class="img-upload-row">
+            <input type="file" id="img-file-${bid}" accept="image/*" style="display:none"
+                   onchange="uploadImage('${bid}')" />
+            <button class="img-upload-btn" onclick="document.getElementById('img-file-${bid}').click()">
+              <i data-lucide="upload" style="width:14px;height:14px"></i> Загрузить файл
+            </button>
+            <span class="img-upload-progress" id="img-status-${bid}"></span>
+          </div>
+          <div class="block-row">
+            <div class="block-field" style="flex:1">
+              <div class="block-row-label">Alt-текст</div>
+              <input class="block-input" type="text" placeholder="Описание изображения" value="${escAttr(d.alt||'')}"
+                     oninput="updateBlockData('${bid}','alt',this.value);markDirty()" />
+            </div>
+            <div class="block-field" style="flex:1">
+              <div class="block-row-label">Подпись</div>
+              <input class="block-input" type="text" placeholder="Рис. 1" value="${escAttr(d.caption||'')}"
+                     oninput="updateBlockData('${bid}','caption',this.value);markDirty()" />
+            </div>
+          </div>
+          ${d.url ? `<img src="${escAttr(d.url)}" style="max-height:120px;border-radius:8px;margin-top:8px;object-fit:cover" alt="" />` : ''}
+        </div>`;
+      }
+
+      case 'code':
+        return `<div>
+          <div class="block-field">
+            <div class="block-row-label">Язык</div>
+            <select class="block-input" style="max-width:160px"
+                    onchange="updateBlockData('${bid}','lang',this.value);updateCodePreview('${bid}');markDirty()">
+              ${['','js','python','java','cpp','c','csharp','html','css','sql','json','bash','typescript','php','ruby','go','rust','kotlin','swift'].map(l =>
+                `<option value="${l}" ${(d.lang||'')=== l?'selected':''}>${l||'— авто —'}</option>`
+              ).join('')}
+            </select>
+          </div>
+          <textarea class="block-textarea" rows="4" style="font-family:'Fira Code','JetBrains Mono',monospace;font-size:0.84rem"
+                    placeholder="// код здесь…"
+                    oninput="autoResize(this);updateBlockData('${bid}','code',this.value);updateCodePreview('${bid}');markDirty();scheduleAutoSave()"
+                  >${esc(d.code||'')}</textarea>
+          <div class="code-preview" id="code-preview-${bid}">
+            <pre><code class="${d.lang?'language-'+escAttr(d.lang):''}">${esc(d.code||'')}</code></pre>
+          </div>
+        </div>`;
+
+      case 'quiz':
+        return renderQuizEditor(b);
+
+      case 'divider':
+        return `<div style="height:1.5px;background:rgba(15,23,42,0.08);border-radius:99px;margin:4px 0"></div>`;
+
+      case 'callout':
+        return renderCalloutEditor(b);
+
+      case 'video':
+        return renderVideoEditor(b);
+
+      case 'table':
+        return renderTableEditor(b);
+
+      case 'flashcard':
+        return renderFlashcardEditor(b);
+
+      case 'sim':
+        return renderSimEditor(b);
+
+      case 'matching':
+        return renderMatchingEditor(b);
+
+      case 'fill-blank':
+        return renderFillBlankEditor(b);
+
+      case 'ordering':
+        return renderOrderingEditor(b);
+
+      case 'accordion':
+        return renderAccordionEditor(b);
+
+      case 'timeline':
+        return renderTimelineEditor(b);
+
+      case 'diagram':
+        return renderDiagramEditor(b);
+
+      case 'geogebra':
+        return renderGeoGebraEditor(b);
+
+      case 'audio':
+        return renderAudioEditor(b);
+
+      case 'columns':
+        return renderColumnsEditor(b);
+
+      case 'alert':
+        return renderAlertEditor(b);
+
+      case 'quote':
+        return renderQuoteEditor(b);
+
+      case 'checklist':
+        return renderChecklistEditor(b);
+
+      case 'button':
+        return renderButtonEditor(b);
+
+      default: return '<span style="color:#8898AA;font-size:0.82rem">Неизвестный тип блока</span>';
+    }
+  }
+
+  /* ── quiz ── */
+  function renderQuizEditor(b) {
+    const d = b.data;
+    const bid = b._id;
+    const opts = Array.isArray(d.options) ? d.options : ['', ''];
+    const isMulti = !!d.multi;
+    const correctSet = isMulti
+      ? new Set(Array.isArray(d.correctIndices) ? d.correctIndices : [d.correctIndex ?? 0])
+      : null;
+    return `<div id="quiz-body-${bid}">
+      <div class="block-field">
+        <div class="block-row-label">Вопрос</div>
+        <input class="block-input" type="text" placeholder="Что является…" value="${escAttr(d.question||'')}"
+               oninput="updateBlockData('${bid}','question',this.value);markDirty()" />
+      </div>
+      <label class="quiz-mode-toggle">
+        <input type="checkbox" ${isMulti ? 'checked' : ''}
+               onchange="toggleQuizMode('${bid}',this.checked)">
+        Несколько верных ответов
+      </label>
+      <div class="block-row-label">Варианты ответа (${isMulti ? '<svg class="ic" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><polyline points="9 11 12 14 22 4"/></svg>=верные' : '<svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="currentColor" stroke="none"/></svg>=верный'})</div>
+      <div id="quiz-opts-${bid}">
+        ${opts.map((o, i) => renderQuizOptRow(bid, i, o, isMulti ? correctSet.has(i) : i === (d.correctIndex ?? 0), isMulti)).join('')}
+      </div>
+      <button class="btn-add-opt" onclick="addQuizOption('${bid}')">+ добавить вариант</button>
+      <div class="quiz-explanation">
+        <div class="block-row-label">Объяснение (необязательно)</div>
+        <textarea class="block-textarea" rows="2"
+                  placeholder="Правильный ответ, потому что…"
+                  oninput="autoResize(this);updateBlockData('${bid}','explanation',this.value);markDirty();scheduleAutoSave()"
+                >${esc(d.explanation||'')}</textarea>
+      </div>
+    </div>`;
+  }
+
+  function renderQuizOptRow(bid, i, val, isCorrect, isMulti) {
+    if (isMulti) {
+      return `<div class="quiz-option-row" id="qrow-${bid}-${i}">
+        <input type="checkbox" class="quiz-opt-radio"
+               ${isCorrect ? 'checked' : ''}
+               onchange="toggleQuizCorrect('${bid}',${i},this.checked)" />
+        <input class="block-input quiz-opt-input" type="text" placeholder="Вариант ${i+1}" value="${escAttr(val)}"
+               oninput="updateQuizOption('${bid}',${i},this.value)" />
+        <button class="block-action-btn danger quiz-opt-del" onclick="removeQuizOption('${bid}',${i})">
+          <i data-lucide="x" style="width:12px;height:12px"></i>
+        </button>
+      </div>`;
+    }
+    return `<div class="quiz-option-row" id="qrow-${bid}-${i}">
+      <input type="radio" class="quiz-opt-radio" name="correct-${bid}"
+             ${isCorrect ? 'checked' : ''}
+             onchange="updateBlockData('${bid}','correctIndex',${i});markDirty()" />
+      <input class="block-input quiz-opt-input" type="text" placeholder="Вариант ${i+1}" value="${escAttr(val)}"
+             oninput="updateQuizOption('${bid}',${i},this.value)" />
+      <button class="block-action-btn danger quiz-opt-del" onclick="removeQuizOption('${bid}',${i})">
+        <i data-lucide="x" style="width:12px;height:12px"></i>
+      </button>
+    </div>`;
+  }
+
+  function addQuizOption(bid) {
+    const b = blocks.find(x => x._id === bid);
+    if (!b) return;
+    if (!Array.isArray(b.data.options)) b.data.options = [];
+    b.data.options.push('');
+    const qb = document.getElementById('quiz-body-' + bid);
+    if (qb) qb.outerHTML = renderQuizEditor(b);
+    else renderBlocks();
+    lucide.createIcons();
+    markDirty();
+  }
+
+  function removeQuizOption(bid, i) {
+    const b = blocks.find(x => x._id === bid);
+    if (!b || !Array.isArray(b.data.options) || b.data.options.length <= 2) return;
+    b.data.options.splice(i, 1);
+    if (b.data.multi) {
+      b.data.correctIndices = (b.data.correctIndices || [])
+        .filter(ci => ci !== i).map(ci => ci > i ? ci - 1 : ci);
+      if (!b.data.correctIndices.length) b.data.correctIndices = [0];
+    } else {
+      if (b.data.correctIndex >= b.data.options.length)
+        b.data.correctIndex = b.data.options.length - 1;
+    }
+    const qb = document.getElementById('quiz-body-' + bid);
+    if (qb) qb.outerHTML = renderQuizEditor(b);
+    else renderBlocks();
+    lucide.createIcons();
+    markDirty();
+  }
+
+  function updateQuizOption(bid, i, val) {
+    const b = blocks.find(x => x._id === bid);
+    if (!b || !Array.isArray(b.data.options)) return;
+    b.data.options[i] = val;
+    markDirty();
+    scheduleAutoSave();
+  }
+
+  function toggleQuizMode(bid, isMulti) {
+    const b = blocks.find(x => x._id === bid);
+    if (!b) return;
+    b.data.multi = isMulti;
+    if (isMulti) {
+      b.data.correctIndices = [b.data.correctIndex ?? 0];
+    } else {
+      b.data.correctIndex = (b.data.correctIndices || [])[0] ?? 0;
+      delete b.data.correctIndices;
+    }
+    const qb = document.getElementById('quiz-body-' + bid);
+    if (qb) qb.outerHTML = renderQuizEditor(b);
+    else renderBlocks();
+    lucide.createIcons();
+    markDirty();
+  }
+
+  function toggleQuizCorrect(bid, i, checked) {
+    const b = blocks.find(x => x._id === bid);
+    if (!b) return;
+    if (!Array.isArray(b.data.correctIndices)) b.data.correctIndices = [];
+    if (checked) {
+      if (!b.data.correctIndices.includes(i)) b.data.correctIndices.push(i);
+    } else {
+      b.data.correctIndices = b.data.correctIndices.filter(ci => ci !== i);
+      if (!b.data.correctIndices.length) b.data.correctIndices = [i]; // keep at least one
+    }
+    markDirty();
+    scheduleAutoSave();
+  }
+
+  /* ── callout ── */
+  const CALLOUT_META = {
+    info:    { emoji: LS.icon('lightbulb',16), label: 'Info',    cls: 'cs-info' },
+    warning: { emoji: LS.icon('warning',16), label: 'Warning', cls: 'cs-warning' },
+    success: { emoji: LS.icon('check-circle',16), label: 'Success', cls: 'cs-success' },
+    error:   { emoji: LS.icon('x-close',16), label: 'Error',   cls: 'cs-error' },
+  };
+
+  function renderCalloutEditor(b) {
+    const d = b.data;
+    const bid = b._id;
+    const style = d.style || 'info';
+    const btns = Object.entries(CALLOUT_META).map(([key, m]) =>
+      `<button class="callout-style-btn ${m.cls}${key === style ? ' active' : ''}"
+               onclick="setCalloutStyle('${bid}','${key}')">${m.emoji} ${m.label}</button>`
+    ).join('');
+    return `<div>
+      <div class="callout-style-btns">${btns}</div>
+      <input class="block-input" type="text"
+             placeholder="Заголовок (необязательно)…"
+             value="${esc(d.title||'')}"
+             oninput="updateBlockData('${bid}','title',this.value);markDirty();scheduleAutoSave()">
+      ${renderMiniRich(bid, 'text', d.text||'', 'Текст выноски…')}
+    </div>`;
+  }
+
+  function setCalloutStyle(bid, style) {
+    const b = blocks.find(x => x._id === bid);
+    if (!b) return;
+    b.data.style = style;
+    // re-render just this block body
+    const card = document.querySelector(`.block-card[data-bid="${bid}"]`);
+    if (card) {
+      card.querySelector('.block-body').innerHTML = renderCalloutEditor(b);
+    }
+    markDirty();
+  }
+
+  /* ── video ── */
+  function renderVideoEditor(b) {
+    const d = b.data;
+    const bid = b._id;
+    const embedUrl = getEmbedUrl(d.url || '');
+    const isFile = d.url && !d.url.startsWith('http') || (d.url && d.url.startsWith('blob:'));
+    const showPlayer = d.url && !getEmbedUrl(d.url) && (d.url.startsWith('/') || d.url.startsWith('blob:'));
+    return `<div>
+      <div class="block-field">
+        <div class="block-row-label">URL видео (YouTube, Rutube или прямая ссылка)</div>
+        <input class="block-input" id="vurl-${bid}" type="text" placeholder="https://youtube.com/watch?v=… или rutube.ru/video/…" value="${escAttr(d.url||'')}"
+               oninput="updateBlockData('${bid}','url',this.value);updateVideoPreview('${bid}',this.value,null);markDirty()" />
+      </div>
+      <div class="block-field">
+        <div class="block-row-label">Или загрузить видеофайл (MP4, WebM, OGG)</div>
+        <div style="display:flex;gap:8px;align-items:center">
+          <input type="file" id="vfile-${bid}" accept="video/mp4,video/webm,video/ogg,.mp4,.webm,.ogg"
+                 style="display:none" onchange="uploadVideoFile('${bid}',this)" />
+          <button class="btn-add-item" onclick="document.getElementById('vfile-${bid}').click()">
+            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="display:inline-block;vertical-align:middle;margin-right:4px"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>Загрузить файл
+          </button>
+          <span id="vfile-name-${bid}" style="font-size:0.78rem;color:#8898AA"></span>
+        </div>
+      </div>
+      <div class="block-row">
+        <div class="block-field" style="flex:1">
+          <div class="block-row-label">Подпись</div>
+          <input class="block-input" type="text" placeholder="Название видео" value="${escAttr(d.caption||'')}"
+                 oninput="updateBlockData('${bid}','caption',this.value);markDirty()" />
+        </div>
+        <div class="block-field" style="width:130px;flex-shrink:0">
+          <div class="block-row-label">Старт (сек)</div>
+          <input class="block-input" type="number" min="0" placeholder="0" value="${escAttr(d.startSec!=null?String(d.startSec):'')}"
+                 oninput="updateBlockData('${bid}','startSec',this.value?parseInt(this.value):null);updateVideoPreview('${bid}',document.getElementById('vurl-${bid}').value,this.value?parseInt(this.value):null);markDirty()" />
+        </div>
+      </div>
+      <div id="video-preview-${bid}">
+        ${embedUrl ? `<div class="video-preview"><iframe src="${escAttr(embedUrl)}" allowfullscreen></iframe></div>` : (d.url && !embedUrl ? `<video controls src="${escAttr(d.url)}" style="width:100%;border-radius:10px;margin-top:8px"></video>` : '')}
+      </div>
+    </div>`;
+  }
+
+  function uploadVideoFile(bid, input) {
+    const file = input.files[0];
+    if (!file) return;
+    const nameEl = document.getElementById('vfile-name-' + bid);
+    if (nameEl) nameEl.textContent = file.name;
+    const formData = new FormData();
+    formData.append('file', file);
+    const btn = input.previousElementSibling;
+    if (btn) { btn.disabled = true; btn.textContent = 'Загрузка…'; }
+    fetch('/api/files/upload', { method: 'POST', body: formData })
+      .then(r => r.json())
+      .then(res => {
+        if (res.url) {
+          updateBlockData(bid, 'url', res.url);
+          const urlInput = document.getElementById('vurl-' + bid);
+          if (urlInput) urlInput.value = res.url;
+          const preview = document.getElementById('video-preview-' + bid);
+          if (preview) preview.innerHTML = `<video controls src="${res.url}" style="width:100%;border-radius:10px;margin-top:8px"></video>`;
+          markDirty();
+          LS.toast('Видео загружено', 'success');
+        } else {
+          LS.toast(res.error || 'Ошибка загрузки', 'error');
+        }
+      })
+      .catch(() => LS.toast('Ошибка загрузки видео', 'error'))
+      .finally(() => { if (btn) { btn.disabled = false; btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="display:inline-block;vertical-align:middle;margin-right:4px"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>Загрузить файл'; } });
+  }
+
+  function getEmbedUrl(url) {
+    if (!url) return '';
+    // already embed
+    if (url.includes('youtube.com/embed/') || url.includes('player.vimeo.com') ||
+        url.includes('rutube.ru/play/embed/')) return url;
+    // youtube watch (with optional timestamp t= / start=)
+    const m = url.match(/[?&]v=([^&]+)/);
+    if (m) {
+      const ts = url.match(/[?&](?:t|start)=([^&]+)/);
+      const base = 'https://www.youtube.com/embed/' + m[1];
+      return ts ? base + '?start=' + parseInt(ts[1]) : base;
+    }
+    // youtu.be short
+    const m2 = url.match(/youtu\.be\/([^?]+)/);
+    if (m2) {
+      const ts = url.match(/[?&]t=([^&]+)/);
+      const base = 'https://www.youtube.com/embed/' + m2[1];
+      return ts ? base + '?start=' + parseInt(ts[1]) : base;
+    }
+    // rutube.ru/video/ID/
+    const mr = url.match(/rutube\.ru\/video\/([a-f0-9]+)/i);
+    if (mr) {
+      const ts = url.match(/[?&]t=([^&]+)/);
+      const base = 'https://rutube.ru/play/embed/' + mr[1];
+      return ts ? base + '?t=' + parseInt(ts[1]) : base;
+    }
+    return url;
+  }
+
+  function updateVideoPreview(bid, url, startSec) {
+    const el = document.getElementById('video-preview-' + bid);
+    if (!el) return;
+    let embedUrl = getEmbedUrl(url);
+    // apply startSec override if provided and URL has no t= already
+    if (embedUrl && startSec != null && startSec > 0) {
+      const sep = embedUrl.includes('?') ? '&' : '?';
+      const param = embedUrl.includes('rutube') ? 't' : 'start';
+      if (!embedUrl.includes('start=') && !embedUrl.match(/[?&]t=/))
+        embedUrl += sep + param + '=' + startSec;
+    }
+    el.innerHTML = embedUrl
+      ? `<div class="video-preview"><iframe src="${escAttr(embedUrl)}" allowfullscreen></iframe></div>`
+      : '';
+  }
+
+  /* ── table ── */
+  function renderTableEditor(b) {
+    const d = b.data;
+    const bid = b._id;
+    const rows = Array.isArray(d.rows) && d.rows.length ? d.rows : [['',''],['','']];
+    const hasHeaders = d.headers !== false;
+
+    let tableHtml = `<table data-bid="${bid}">`;
+    rows.forEach((row, ri) => {
+      tableHtml += '<tr>';
+      row.forEach((cell, ci) => {
+        const tag = (ri === 0 && hasHeaders) ? 'th' : 'td';
+        tableHtml += `<${tag} contenteditable="true" data-row="${ri}" data-col="${ci}">${esc(String(cell||''))}</${tag}>`;
+      });
+      tableHtml += '</tr>';
+    });
+    tableHtml += '</table>';
+
+    return `<div>
+      <div class="table-editor">${tableHtml}</div>
+      <div class="table-btns">
+        <label style="display:flex;align-items:center;gap:5px;font-size:0.78rem;font-weight:700;color:#6B7A8E;cursor:pointer">
+          <input type="checkbox" ${hasHeaders?'checked':''} onchange="updateBlockData('${bid}','headers',this.checked);rerenderBlock('${bid}');markDirty()" />
+          Заголовки
+        </label>
+        <button class="table-btn" onclick="tableAddRow('${bid}')">+ строка</button>
+        <button class="table-btn" onclick="tableRemoveRow('${bid}')">− строка</button>
+        <button class="table-btn" onclick="tableAddCol('${bid}')">+ столбец</button>
+        <button class="table-btn" onclick="tableRemoveCol('${bid}')">− столбец</button>
+      </div>
+    </div>`;
+  }
+
+  function syncTableData(bid, table) {
+    const b = blocks.find(x => x._id === bid);
+    if (!b) return;
+    const rows = [];
+    table.querySelectorAll('tr').forEach(tr => {
+      const row = [];
+      tr.querySelectorAll('td,th').forEach(cell => row.push(cell.textContent));
+      rows.push(row);
+    });
+    b.data.rows = rows;
+  }
+
+  function tableAddRow(bid) {
+    const b = blocks.find(x => x._id === bid);
+    if (!b) return;
+    const cols = b.data.rows[0] ? b.data.rows[0].length : 2;
+    b.data.rows.push(Array(cols).fill(''));
+    rerenderBlock(bid); markDirty();
+  }
+
+  function tableRemoveRow(bid) {
+    const b = blocks.find(x => x._id === bid);
+    if (!b || b.data.rows.length <= 1) return;
+    b.data.rows.pop();
+    rerenderBlock(bid); markDirty();
+  }
+
+  function tableAddCol(bid) {
+    const b = blocks.find(x => x._id === bid);
+    if (!b) return;
+    b.data.rows = b.data.rows.map(r => [...r, '']);
+    rerenderBlock(bid); markDirty();
+  }
+
+  function tableRemoveCol(bid) {
+    const b = blocks.find(x => x._id === bid);
+    if (!b) return;
+    if (b.data.rows[0] && b.data.rows[0].length <= 1) return;
+    b.data.rows = b.data.rows.map(r => r.slice(0, -1));
+    rerenderBlock(bid); markDirty();
+  }
+
+  /* ── flashcard ── */
+  function renderFlashcardEditor(b) {
+    const d = b.data;
+    const bid = b._id;
+    return `<div class="flashcard-editor">
+      <div class="flashcard-side">
+        <div class="flashcard-side-label">Лицевая сторона</div>
+        ${renderMiniRich(bid, 'front', d.front||'', 'Вопрос / понятие…')}
+      </div>
+      <div class="flashcard-side">
+        <div class="flashcard-side-label"><svg class="ic" viewBox="0 0 24 24"><polyline points="9 14 4 9 9 4"/><path d="M20 20v-7a4 4 0 0 0-4-4H4"/></svg> Обратная сторона</div>
+        ${renderMiniRich(bid, 'back', d.back||'', 'Ответ / определение…')}
+      </div>
+    </div>`;
+  }
+
+  /* ── sim ── */
+  function renderSimEditor(b) {
+    const d = b.data;
+    const bid = b._id;
+    return `<div>
+      <div class="block-field">
+        <div class="block-row-label">ID симуляции (напр. coulomb, mag, waves)</div>
+        <input class="block-input" type="text" placeholder="coulomb" value="${escAttr(d.simId||'')}"
+               oninput="updateBlockData('${bid}','simId',this.value);updateSimPreview('${bid}',this.value);markDirty()" />
+      </div>
+      <div class="block-field">
+        <div class="block-row-label">Подпись</div>
+        <input class="block-input" type="text" placeholder="Описание симуляции" value="${escAttr(d.caption||'')}"
+               oninput="updateBlockData('${bid}','caption',this.value);markDirty()" />
+      </div>
+      <div id="sim-preview-${bid}">
+        ${d.simId ? `<div class="sim-preview">${LS.icon('atom',14)} Симуляция: <strong>${escAttr(d.simId)}</strong></div>` : ''}
+      </div>
+    </div>`;
+  }
+
+  function updateSimPreview(bid, simId) {
+    const el = document.getElementById('sim-preview-' + bid);
+    if (!el) return;
+    el.innerHTML = simId
+      ? `<div class="sim-preview">${LS.icon('atom',14)} Симуляция: <strong>${escAttr(simId)}</strong></div>`
+      : '';
+  }
+
+  /* ── matching editor ── */
+  function renderMatchingEditor(b) {
+    const d = b.data;
+    const bid = b._id;
+    const pairs = Array.isArray(d.pairs) ? d.pairs : [{left:'', right:''}];
+    return `<div id="matching-body-${bid}">
+      <div class="block-field">
+        <div class="block-row-label">Вопрос</div>
+        <input class="block-input" type="text" placeholder="Сопоставьте элементы…" value="${escAttr(d.question||'')}"
+               oninput="updateBlockData('${bid}','question',this.value);markDirty()" />
+      </div>
+      <div class="block-row-label" style="margin-top:6px">Пары (левая часть <svg class="ic" viewBox="0 0 24 24"><line x1="3" y1="12" x2="21" y2="12"/><polyline points="8 17 3 12 8 7"/><polyline points="16 7 21 12 16 17"/></svg> правая часть)</div>
+      <div id="matching-pairs-${bid}">
+        ${pairs.map((p, i) => `<div class="matching-pair-row">
+          <input class="block-input" type="text" placeholder="Левая ${i+1}" value="${escAttr(p.left||'')}"
+                 oninput="updateMatchingPair('${bid}',${i},'left',this.value)" />
+          <span style="color:#8898AA;font-weight:700;flex-shrink:0"><svg class="ic" viewBox="0 0 24 24"><line x1="3" y1="12" x2="21" y2="12"/><polyline points="8 17 3 12 8 7"/><polyline points="16 7 21 12 16 17"/></svg></span>
+          <input class="block-input" type="text" placeholder="Правая ${i+1}" value="${escAttr(p.right||'')}"
+                 oninput="updateMatchingPair('${bid}',${i},'right',this.value)" />
+          <button class="block-action-btn danger" onclick="removeMatchingPair('${bid}',${i})" title="Удалить пару">
+            <i data-lucide="x" style="width:12px;height:12px"></i>
+          </button>
+        </div>`).join('')}
+      </div>
+      <button class="btn-add-opt" onclick="addMatchingPair('${bid}')">+ добавить пару</button>
+    </div>`;
+  }
+
+  function updateMatchingPair(bid, i, side, val) {
+    const b = blocks.find(x => x._id === bid);
+    if (!b || !Array.isArray(b.data.pairs)) return;
+    b.data.pairs[i][side] = val;
+    markDirty(); scheduleAutoSave();
+  }
+
+  function addMatchingPair(bid) {
+    const b = blocks.find(x => x._id === bid);
+    if (!b) return;
+    if (!Array.isArray(b.data.pairs)) b.data.pairs = [];
+    b.data.pairs.push({left:'', right:''});
+    rerenderBlock(bid);
+    markDirty();
+  }
+
+  function removeMatchingPair(bid, i) {
+    const b = blocks.find(x => x._id === bid);
+    if (!b || !Array.isArray(b.data.pairs) || b.data.pairs.length <= 1) return;
+    b.data.pairs.splice(i, 1);
+    rerenderBlock(bid);
+    markDirty();
+  }
+
+  /* ── fill-blank editor ── */
+  function renderFillBlankEditor(b) {
+    const d = b.data;
+    const bid = b._id;
+    const preview = (d.text||'').replace(/\{([^}]+)\}/g, '<span style="border-bottom:2px solid var(--violet);padding:0 12px;color:var(--violet);font-weight:700">______</span>');
+    return `<div>
+      <div class="block-field">
+        <div class="block-row-label">Текст с пропусками</div>
+        <div style="font-size:0.74rem;color:#8898AA;margin-bottom:6px">Оберните ответы в фигурные скобки: <code style="background:rgba(155,93,229,0.1);padding:1px 5px;border-radius:4px;font-size:0.74rem">{ответ}</code></div>
+        <button class="btn-add-opt" style="margin-bottom:6px"
+                onmousedown="event.preventDefault()"
+                onclick="wrapFillBlank('${bid}')">
+          <i data-lucide="braces" style="width:12px;height:12px;vertical-align:middle"></i>
+          {&nbsp;} Сделать пропуском
+        </button>
+        <textarea class="block-textarea" rows="3" id="fb-text-${bid}"
+                  placeholder="Столица Франции — {Париж}."
+                  oninput="autoResize(this);updateBlockData('${bid}','text',this.value);updateFillBlankPreview('${bid}');markDirty();scheduleAutoSave()"
+                >${esc(d.text||'')}</textarea>
+      </div>
+      <div class="block-field" style="margin-top:8px">
+        <div class="block-row-label">Предпросмотр</div>
+        <div class="fill-blank-preview" id="fbp-${bid}">${preview}</div>
+      </div>
+    </div>`;
+  }
+
+  function wrapFillBlank(bid) {
+    const ta = document.getElementById('fb-text-' + bid);
+    if (!ta) return;
+    const start = ta.selectionStart, end = ta.selectionEnd;
+    if (start === end) { LS.toast('Выделите слово или фразу, чтобы сделать пропуском', 'info'); return; }
+    const val = ta.value;
+    ta.value = val.slice(0, start) + '{' + val.slice(start, end) + '}' + val.slice(end);
+    ta.selectionStart = start;
+    ta.selectionEnd = end + 2;
+    ta.dispatchEvent(new Event('input', { bubbles: true }));
+    ta.focus();
+  }
+
+  function updateFillBlankPreview(bid) {
+    const b = blocks.find(x => x._id === bid);
+    const el = document.getElementById('fbp-' + bid);
+    if (!el || !b) return;
+    el.innerHTML = (b.data.text||'').replace(/\{([^}]+)\}/g, '<span style="border-bottom:2px solid var(--violet);padding:0 12px;color:var(--violet);font-weight:700">______</span>');
+  }
+
+  /* ── ordering editor ── */
+  function renderOrderingEditor(b) {
+    const d = b.data;
+    const bid = b._id;
+    const items = Array.isArray(d.items) ? d.items : ['Шаг 1','Шаг 2','Шаг 3'];
+    return `<div id="ordering-body-${bid}">
+      <div class="block-field">
+        <div class="block-row-label">Вопрос</div>
+        <input class="block-input" type="text" placeholder="Расставьте в правильном порядке…" value="${escAttr(d.question||'')}"
+               oninput="updateBlockData('${bid}','question',this.value);markDirty()" />
+      </div>
+      <div class="block-row-label" style="margin-top:6px">Элементы (текущий порядок = правильный)</div>
+      <div class="ordering-hint" style="font-size:0.74rem;color:#8898AA;margin-bottom:6px">Элементы будут перемешаны для ученика.</div>
+      <div id="ordering-items-${bid}">
+        ${items.map((item, i) => `<div class="ordering-item-row">
+          <span style="color:#8898AA;font-weight:700;font-size:0.8rem;width:22px;text-align:center;flex-shrink:0">${i+1}</span>
+          <input class="block-input" type="text" placeholder="Элемент ${i+1}" value="${escAttr(item||'')}"
+                 oninput="updateOrderingItem('${bid}',${i},this.value)" />
+          <button class="block-action-btn danger" onclick="removeOrderingItem('${bid}',${i})" title="Удалить">
+            <i data-lucide="x" style="width:12px;height:12px"></i>
+          </button>
+        </div>`).join('')}
+      </div>
+      <button class="btn-add-opt" onclick="addOrderingItem('${bid}')">+ добавить элемент</button>
+    </div>`;
+  }
+
+  function updateOrderingItem(bid, i, val) {
+    const b = blocks.find(x => x._id === bid);
+    if (!b || !Array.isArray(b.data.items)) return;
+    b.data.items[i] = val;
+    markDirty(); scheduleAutoSave();
+  }
+
+  function addOrderingItem(bid) {
+    const b = blocks.find(x => x._id === bid);
+    if (!b) return;
+    if (!Array.isArray(b.data.items)) b.data.items = [];
+    b.data.items.push('');
+    rerenderBlock(bid);
+    markDirty();
+  }
+
+  function removeOrderingItem(bid, i) {
+    const b = blocks.find(x => x._id === bid);
+    if (!b || !Array.isArray(b.data.items) || b.data.items.length <= 2) return;
+    b.data.items.splice(i, 1);
+    rerenderBlock(bid);
+    markDirty();
+  }
+
+  /* ── accordion editor ── */
+  function renderAccordionEditor(b) {
+    const d = b.data;
+    const bid = b._id;
+    return `<div>
+      <div class="block-field">
+        <div class="block-row-label">Заголовок (видимый)</div>
+        <input class="block-input" type="text" placeholder="Нажмите, чтобы раскрыть…" value="${escAttr(d.title||'')}"
+               oninput="updateBlockData('${bid}','title',this.value);markDirty();scheduleAutoSave()" />
+      </div>
+      <div class="block-field">
+        <div class="block-row-label">Скрытое содержимое</div>
+        ${renderMiniRich(bid, 'content', d.content||'', 'Текст, который появится при раскрытии…')}
+      </div>
+      <div class="accordion-preview">
+        <div class="accordion-preview-header">${esc(d.title||'Подробнее…')} <svg class="ic" viewBox="0 0 24 24"><polyline points="2 9 12 21 22 9"/></svg></div>
+        <div class="accordion-preview-body">${d.content||'…'}</div>
+      </div>
+    </div>`;
+  }
+
+  /* ── timeline editor ── */
+  function renderTimelineEditor(b) {
+    const d = b.data;
+    const bid = b._id;
+    const items = Array.isArray(d.items) ? d.items : [{ date:'', title:'', text:'' }];
+    return `<div id="timeline-body-${bid}">
+      <div id="timeline-items-${bid}">
+        ${items.map((it, i) => `<div class="timeline-item-row">
+          <div class="timeline-dot"></div>
+          <div class="timeline-fields">
+            <input class="block-input" type="text" placeholder="Дата / период" value="${escAttr(it.date||'')}"
+                   style="max-width:200px;font-weight:700"
+                   oninput="updateTimelineItem('${bid}',${i},'date',this.value)" />
+            <input class="block-input" type="text" placeholder="Событие" value="${escAttr(it.title||'')}"
+                   oninput="updateTimelineItem('${bid}',${i},'title',this.value)" />
+            <input class="block-input" type="text" placeholder="Описание (необязательно)" value="${escAttr(it.text||'')}"
+                   style="font-size:0.82rem;color:#6B7A8E"
+                   oninput="updateTimelineItem('${bid}',${i},'text',this.value)" />
+          </div>
+          <button class="block-action-btn danger" onclick="removeTimelineItem('${bid}',${i})" title="Удалить">
+            <i data-lucide="x" style="width:12px;height:12px"></i>
+          </button>
+        </div>`).join('')}
+      </div>
+      <button class="btn-add-opt" onclick="addTimelineItem('${bid}')">+ добавить событие</button>
+    </div>`;
+  }
+
+  function updateTimelineItem(bid, i, key, val) {
+    const b = blocks.find(x => x._id === bid);
+    if (!b || !Array.isArray(b.data.items)) return;
+    b.data.items[i][key] = val;
+    markDirty(); scheduleAutoSave();
+  }
+  function addTimelineItem(bid) {
+    const b = blocks.find(x => x._id === bid);
+    if (!b) return;
+    if (!Array.isArray(b.data.items)) b.data.items = [];
+    b.data.items.push({ date:'', title:'', text:'' });
+    rerenderBlock(bid); markDirty();
+  }
+  function removeTimelineItem(bid, i) {
+    const b = blocks.find(x => x._id === bid);
+    if (!b || !Array.isArray(b.data.items) || b.data.items.length <= 1) return;
+    b.data.items.splice(i, 1);
+    rerenderBlock(bid); markDirty();
+  }
+
+  /* ── diagram editor (Mermaid) ── */
+  function renderDiagramEditor(b) {
+    const d = b.data;
+    const bid = b._id;
+    return `<div>
+      <div class="block-field">
+        <div class="block-row-label">Mermaid-код диаграммы</div>
+        <div style="font-size:0.74rem;color:#8898AA;margin-bottom:6px">
+          Синтаксис: <a href="https://mermaid.js.org/syntax/flowchart.html" target="_blank" style="color:var(--violet)">mermaid.js.org</a>
+        </div>
+        <textarea class="block-textarea" rows="6" style="font-family:monospace;font-size:0.84rem"
+                  placeholder="graph TD\n  A --> B"
+                  oninput="autoResize(this);updateBlockData('${bid}','code',this.value);updateDiagramPreview('${bid}');markDirty();scheduleAutoSave()"
+                >${esc(d.code||'')}</textarea>
+      </div>
+      <div class="block-field">
+        <div class="block-row-label">Подпись</div>
+        <input class="block-input" type="text" placeholder="Блок-схема алгоритма" value="${escAttr(d.caption||'')}"
+               oninput="updateBlockData('${bid}','caption',this.value);markDirty()" />
+      </div>
+      <div class="diagram-preview" id="diagram-preview-${bid}">
+        <div class="mermaid">${esc(d.code||'')}</div>
+      </div>
+    </div>`;
+  }
+
+  function updateDiagramPreview(bid) {
+    const b = blocks.find(x => x._id === bid);
+    const el = document.getElementById('diagram-preview-' + bid);
+    if (!el || !b) return;
+    el.innerHTML = '<div class="mermaid">' + esc(b.data.code || '') + '</div>';
+    if (window.mermaid) {
+      try { mermaid.run({ nodes: el.querySelectorAll('.mermaid') }); } catch {}
+    }
+  }
+
+  /* ── geogebra editor ── */
+  function renderGeoGebraEditor(b) {
+    const d = b.data;
+    const bid = b._id;
+    return `<div>
+      <div class="block-field">
+        <div class="block-row-label">ID материала GeoGebra</div>
+        <div style="font-size:0.74rem;color:#8898AA;margin-bottom:6px">
+          Введите ID из URL: geogebra.org/m/<b>abc123</b>
+        </div>
+        <input class="block-input" type="text" placeholder="abc123" value="${escAttr(d.materialId||'')}"
+               oninput="updateBlockData('${bid}','materialId',this.value);updateGeoGebraPreview('${bid}');markDirty()" />
+      </div>
+      <div class="block-field">
+        <div class="block-row-label">Подпись</div>
+        <input class="block-input" type="text" placeholder="Интерактивная модель" value="${escAttr(d.caption||'')}"
+               oninput="updateBlockData('${bid}','caption',this.value);markDirty()" />
+      </div>
+      <div id="geogebra-preview-${bid}">
+        ${d.materialId ? `<div class="geogebra-preview"><iframe src="https://www.geogebra.org/material/iframe/id/${escAttr(d.materialId)}/width/800/height/500/border/888888/sfsb/true/smb/false/stb/false/stbh/false/ai/false/asb/false/sri/false/rc/false/ld/false/sdz/false/ctl/false" allowfullscreen></iframe></div>` : ''}
+      </div>
+    </div>`;
+  }
+
+  function updateGeoGebraPreview(bid) {
+    const b = blocks.find(x => x._id === bid);
+    const el = document.getElementById('geogebra-preview-' + bid);
+    if (!el || !b) return;
+    const mid = b.data.materialId || '';
+    el.innerHTML = mid
+      ? `<div class="geogebra-preview"><iframe src="https://www.geogebra.org/material/iframe/id/${escAttr(mid)}/width/800/height/500/border/888888/sfsb/true/smb/false/stb/false/stbh/false/ai/false/asb/false/sri/false/rc/false/ld/false/sdz/false/ctl/false" allowfullscreen></iframe></div>`
+      : '';
+  }
+
+  /* ── audio editor ── */
+  function renderAudioEditor(b) {
+    const d = b.data;
+    const bid = b._id;
+    return `<div>
+      <div class="block-field">
+        <div class="block-row-label">URL аудиофайла</div>
+        <input class="block-input" type="text" placeholder="https://… (.mp3, .ogg, .wav)" value="${escAttr(d.url||'')}"
+               oninput="updateBlockData('${bid}','url',this.value);updateAudioPreview('${bid}');markDirty()" />
+      </div>
+      <div class="img-upload-row">
+        <input type="file" id="audio-file-${bid}" accept="audio/*" style="display:none"
+               onchange="uploadAudio('${bid}')" />
+        <button class="img-upload-btn" onclick="document.getElementById('audio-file-${bid}').click()">
+          <i data-lucide="upload" style="width:14px;height:14px"></i> Загрузить аудио
+        </button>
+        <span class="img-upload-progress" id="audio-status-${bid}"></span>
+      </div>
+      <div class="block-field">
+        <div class="block-row-label">Подпись</div>
+        <input class="block-input" type="text" placeholder="Название аудио" value="${escAttr(d.caption||'')}"
+               oninput="updateBlockData('${bid}','caption',this.value);markDirty()" />
+      </div>
+      <div class="audio-preview" id="audio-preview-${bid}">
+        ${d.url ? `<audio controls src="${escAttr(d.url)}"></audio>` : ''}
+      </div>
+    </div>`;
+  }
+
+  function updateAudioPreview(bid) {
+    const b = blocks.find(x => x._id === bid);
+    const el = document.getElementById('audio-preview-' + bid);
+    if (!el || !b) return;
+    el.innerHTML = b.data.url ? `<audio controls src="${escAttr(b.data.url)}"></audio>` : '';
+  }
+
+  async function uploadAudio(bid) {
+    const input = document.getElementById('audio-file-' + bid);
+    if (!input || !input.files.length) return;
+    const file = input.files[0];
+    if (!file.type.startsWith('audio/')) { LS.toast('Выберите аудиофайл', 'error'); return; }
+    if (file.size > 50 * 1024 * 1024) { LS.toast('Максимум 50 МБ', 'error'); return; }
+
+    const statusEl = document.getElementById('audio-status-' + bid);
+    if (statusEl) statusEl.textContent = 'Загрузка…';
+
+    const fd = new FormData();
+    fd.append('file', file);
+    try {
+      const res = await LS.uploadFile(fd);
+      const url = LS.downloadFileUrl(res.id);
+      updateBlockData(bid, 'url', url);
+      rerenderBlock(bid);
+      markDirty();
+    } catch (e) {
+      if (statusEl) statusEl.textContent = 'Ошибка: ' + (e.message || '');
+    }
+  }
+
+  /* ── columns editor ── */
+  function renderColumnsEditor(b) {
+    const d = b.data;
+    const bid = b._id;
+    const cols = Array.isArray(d.cols) ? d.cols : [{ content: '' }, { content: '' }];
+    return `<div>
+      <div class="block-field" style="display:flex;gap:8px;align-items:center;margin-bottom:10px">
+        <div class="block-row-label" style="margin-bottom:0">Колонок:</div>
+        <select class="block-input" style="width:auto" onchange="updateColumnCount('${bid}',+this.value);markDirty()">
+          <option value="2" ${cols.length===2?'selected':''}>2</option>
+          <option value="3" ${cols.length===3?'selected':''}>3</option>
+        </select>
+      </div>
+      <div class="columns-editor-grid" style="display:grid;grid-template-columns:repeat(${cols.length},1fr);gap:10px">
+        ${cols.map((c, i) => `<div class="columns-editor-col">
+          <div class="block-row-label" style="font-size:0.7rem">Колонка ${i+1}</div>
+          ${renderMiniRich(bid, 'col:' + i, c.content||'', 'Текст, формулы, HTML…')}
+        </div>`).join('')}
+      </div>
+    </div>`;
+  }
+
+  function updateColumnCount(bid, count) {
+    const b = blocks.find(x => x._id === bid);
+    if (!b) return;
+    const cols = Array.isArray(b.data.cols) ? b.data.cols : [];
+    while (cols.length < count) cols.push({ content: '' });
+    while (cols.length > count) cols.pop();
+    b.data.cols = cols;
+    rerenderBlock(bid);
+  }
+
+  function updateColumnContent(bid, idx, val) {
+    const b = blocks.find(x => x._id === bid);
+    if (!b) return;
+    if (!Array.isArray(b.data.cols)) b.data.cols = [{ content: '' }, { content: '' }];
+    if (b.data.cols[idx]) b.data.cols[idx].content = val;
+  }
+
+  /* ── alert/banner editor ── */
+  function renderAlertEditor(b) {
+    const d = b.data;
+    const bid = b._id;
+    const styles = [
+      { val: 'exam', label: 'К экзамену', icon: '<svg class="ic" viewBox="0 0 24 24"><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.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>' },
+      { val: 'homework', label: 'Домашнее задание', icon: '<svg class="ic" viewBox="0 0 24 24"><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" ry="1"/></svg>' },
+      { val: 'important', label: 'Важно', icon: '<svg class="ic" viewBox="0 0 24 24"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>️' },
+      { val: 'tip', label: 'Совет', icon: '<svg class="ic" viewBox="0 0 24 24"><line x1="9" y1="18" x2="15" y2="18"/><line x1="10" y1="22" x2="14" y2="22"/><path d="M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14"/></svg>' },
+      { val: 'celebrate', label: 'Поздравление', icon: '<svg class="ic" viewBox="0 0 24 24"><path d="m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3z"/></svg>' },
+    ];
+    return `<div>
+      <div class="block-field">
+        <div class="block-row-label">Стиль</div>
+        <select class="block-input" onchange="updateBlockData('${bid}','style',this.value);rerenderBlock('${bid}');markDirty()">
+          ${styles.map(s => `<option value="${s.val}" ${d.style===s.val?'selected':''}>${s.icon} ${s.label}</option>`).join('')}
+        </select>
+      </div>
+      <div class="block-field">
+        <div class="block-row-label">Текст баннера</div>
+        <textarea class="block-input" rows="2" placeholder="Текст сообщения…" style="resize:vertical"
+                  oninput="updateBlockData('${bid}','text',this.value);markDirty()">${esc(d.text||'')}</textarea>
+      </div>
+      <div class="alert-editor-preview" style="margin-top:10px">${renderAlertPreviewHTML(d)}</div>
+    </div>`;
+  }
+
+  function renderAlertPreviewHTML(d) {
+    const map = {
+      exam:      { bg: 'linear-gradient(135deg,#9B5DE5 0%,#6366F1 100%)', icon: '<svg class="ic" viewBox="0 0 24 24"><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.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>', label: 'К экзамену' },
+      homework:  { bg: 'linear-gradient(135deg,#06B6D4 0%,#0EA5E9 100%)', icon: '<svg class="ic" viewBox="0 0 24 24"><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" ry="1"/></svg>', label: 'Домашнее задание' },
+      important: { bg: 'linear-gradient(135deg,#EF476F 0%,#F97316 100%)', icon: '<svg class="ic" viewBox="0 0 24 24"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>️', label: 'Важно' },
+      tip:       { bg: 'linear-gradient(135deg,#06D6A0 0%,#22C55E 100%)', icon: '<svg class="ic" viewBox="0 0 24 24"><line x1="9" y1="18" x2="15" y2="18"/><line x1="10" y1="22" x2="14" y2="22"/><path d="M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14"/></svg>', label: 'Совет' },
+      celebrate: { bg: 'linear-gradient(135deg,#FFD166 0%,#F59E0B 100%)', icon: '<svg class="ic" viewBox="0 0 24 24"><path d="m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3z"/></svg>', label: 'Поздравление' },
+    };
+    const s = map[d.style] || map.important;
+    return `<div style="background:${s.bg};border-radius:14px;padding:16px 20px;color:#fff;font-weight:700;font-size:0.88rem;display:flex;align-items:center;gap:10px">
+      <span style="font-size:1.3rem">${s.icon}</span>
+      <div><div style="font-size:0.68rem;text-transform:uppercase;letter-spacing:0.06em;opacity:0.8;margin-bottom:2px">${s.label}</div><div>${esc(d.text||'Текст баннера…')}</div></div>
+    </div>`;
+  }
+
+  /* ── rich text helpers ── */
+  function wrapCode(bid) {
+    const sel = window.getSelection();
+    if (!sel || sel.isCollapsed) return;
+    const range = sel.getRangeAt(0);
+    const code = document.createElement('code');
+    range.surroundContents(code);
+    sel.removeAllRanges();
+    // update data
+    const el = document.querySelector(`.rich-editor[data-bid="${bid}"]`);
+    if (el) {
+      const b = blocks.find(x => x._id === bid);
+      if (b) { b.data.html = el.innerHTML; markDirty(); }
+    }
+  }
+
+  /* ── C1: quote editor ── */
+  function renderQuoteEditor(b) {
+    const d = b.data, bid = b._id;
+    return `<div>
+      <div class="block-field">
+        <div class="block-row-label">Текст цитаты</div>
+        ${renderMiniRich(bid, 'text', d.text||'', 'Текст цитаты…')}
+      </div>
+      <div class="block-field">
+        <div class="block-row-label">Автор (необязательно)</div>
+        <input class="block-input" type="text" placeholder="Имя автора…" value="${escAttr(d.author||'')}"
+               oninput="updateBlockData('${bid}','author',this.value);markDirty();scheduleAutoSave()" />
+      </div>
+    </div>`;
+  }
+
+  /* ── C2: checklist editor ── */
+  function renderChecklistEditor(b) {
+    const d = b.data, bid = b._id;
+    const items = Array.isArray(d.items) ? d.items : [];
+    const rows = items.map((it, i) => `
+      <div class="checklist-item-row" id="citem-${bid}-${i}">
+        <input type="checkbox" ${it.checked ? 'checked' : ''}
+               onchange="toggleChecklistItem('${bid}',${i},this.checked)" />
+        <input class="block-input" style="flex:1" type="text" placeholder="Пункт…" value="${escAttr(it.text||'')}"
+               oninput="updateChecklistItemText('${bid}',${i},this.value)" />
+        <button class="block-action-btn" onclick="removeChecklistItem('${bid}',${i})" title="Удалить">
+          <i data-lucide="x" style="width:13px;height:13px"></i>
+        </button>
+      </div>`).join('');
+    return `<div id="cl-body-${bid}">
+      ${rows}
+      <button class="btn-add-item" onclick="addChecklistItem('${bid}')">
+        <i data-lucide="plus" style="width:13px;height:13px;display:inline-block;vertical-align:middle;margin-right:4px"></i>Добавить пункт
+      </button>
+    </div>`;
+  }
+
+  function addChecklistItem(bid) {
+    const b = blocks.find(x => x._id === bid); if (!b) return;
+    if (!Array.isArray(b.data.items)) b.data.items = [];
+    b.data.items.push({ text: '', checked: false });
+    rerenderBlock(bid); lucide.createIcons(); markDirty();
+  }
+  function removeChecklistItem(bid, i) {
+    const b = blocks.find(x => x._id === bid); if (!b) return;
+    b.data.items.splice(i, 1);
+    rerenderBlock(bid); lucide.createIcons(); markDirty();
+  }
+  function updateChecklistItemText(bid, i, val) {
+    const b = blocks.find(x => x._id === bid); if (!b) return;
+    if (b.data.items[i]) b.data.items[i].text = val;
+    markDirty(); scheduleAutoSave();
+  }
+  function toggleChecklistItem(bid, i, checked) {
+    const b = blocks.find(x => x._id === bid); if (!b) return;
+    if (b.data.items[i]) b.data.items[i].checked = checked;
+    markDirty(); scheduleAutoSave();
+  }
+
+  /* ── C3: button/CTA editor ── */
+  function renderButtonEditor(b) {
+    const d = b.data, bid = b._id;
+    const styles = [
+      { val:'primary', label:'Primary' },
+      { val:'secondary', label:'Secondary' },
+      { val:'outline', label:'Outline' },
+    ];
+    const aligns = [
+      { val:'left', icon:'align-left' },
+      { val:'center', icon:'align-center' },
+      { val:'right', icon:'align-right' },
+    ];
+    const styleBtns = styles.map(s => `<button class="align-btn${d.style===s.val?' active':''}" onclick="updateBlockData('${bid}','style','${s.val}');markDirty();rerenderBlock('${bid}')">${s.label}</button>`).join('');
+    const alignBtns = aligns.map(a => `<button class="align-btn${(d.align||'center')===a.val?' active':''}" onclick="updateBlockData('${bid}','align','${a.val}');markDirty();rerenderBlock('${bid}')" title="${a.val}"><i data-lucide="${a.icon}" style="width:13px;height:13px"></i></button>`).join('');
+    return `<div>
+      <div class="block-field">
+        <div class="block-row-label">Текст кнопки</div>
+        <input class="block-input" type="text" placeholder="Нажмите здесь" value="${escAttr(d.label||'')}"
+               oninput="updateBlockData('${bid}','label',this.value);markDirty();scheduleAutoSave()" />
+      </div>
+      <div class="block-field">
+        <div class="block-row-label">URL (необязательно)</div>
+        <input class="block-input" type="text" placeholder="https://…" value="${escAttr(d.url||'')}"
+               oninput="updateBlockData('${bid}','url',this.value);markDirty();scheduleAutoSave()" />
+      </div>
+      <div class="block-row" style="gap:16px">
+        <div class="block-field">
+          <div class="block-row-label">Стиль</div>
+          <div class="align-btns">${styleBtns}</div>
+        </div>
+        <div class="block-field">
+          <div class="block-row-label">Выравнивание</div>
+          <div class="align-btns">${alignBtns}</div>
+        </div>
+      </div>
+    </div>`;
+  }
+
+  /* ── C5: outline panel ── */
+  function updateOutline() {
+    const list = document.getElementById('outline-list');
+    if (!list) return;
+    const headings = blocks.filter(b => b.type === 'heading');
+    if (!headings.length) {
+      list.innerHTML = '<div class="outline-empty">Нет заголовков</div>';
+      return;
+    }
+    list.innerHTML = headings.map(b => {
+      const lvl = b.data.level || 2;
+      const txt = b.data.text || '(без текста)';
+      return `<button class="outline-item${lvl>=3?' h3':''}" onclick="scrollToBlock('${b._id}')" title="${escAttr(txt)}">${esc(txt)}</button>`;
+    }).join('');
+  }
+
+  function scrollToBlock(bid) {
+    const card = document.querySelector(`.block-card[data-bid="${bid}"]`);
+    if (card) {
+      card.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      // On mobile, close the outline panel after navigating
+      if (window.innerWidth <= 768) toggleOutline();
+    }
+  }
+
+  function toggleOutline() {
+    const panel = document.getElementById('outline-panel');
+    const btn = document.getElementById('btn-outline');
+    if (!panel) return;
+    const open = panel.classList.toggle('open');
+    if (btn) btn.style.color = open ? 'var(--violet)' : '';
+    if (open) updateOutline();
+  }
+
+  function insertLink() {
+    const url = prompt('Введите URL ссылки:');
+    if (!url) return;
+    document.execCommand('createLink', false, url);
+    // make links open in new tab
+    document.querySelectorAll('.rich-editor a, .mini-rich-editor a').forEach(a => a.target = '_blank');
+  }
+
+  /* ── collapse / expand block ── */
+  function toggleBlockCollapse(bid) {
+    const b = blocks.find(x => x._id === bid);
+    if (!b) return;
+    b._collapsed = !b._collapsed;
+    const card = document.querySelector(`.block-card[data-bid="${bid}"]`);
+    if (!card) return;
+    card.classList.toggle('collapsed', b._collapsed);
+    const colBtn = card.querySelector('.block-collapse-btn');
+    if (colBtn) colBtn.title = b._collapsed ? 'Развернуть' : 'Свернуть';
+  }
+
+  /* ── rerender single block ── */
+  function rerenderBlock(bid) {
+    const b = blocks.find(x => x._id === bid);
+    if (!b) return;
+    const card = document.querySelector(`.block-card[data-bid="${bid}"]`);
+    if (!card) { renderBlocks(); return; }
+    card.querySelector('.block-body').innerHTML = renderBlockEditor(b);
+    // re-wire table if needed
+    const table = card.querySelector('.table-editor table');
+    if (table) {
+      table.querySelectorAll('td,th').forEach(cell => {
+        cell.addEventListener('input', () => syncTableData(bid, table));
+        cell.addEventListener('blur',  () => { syncTableData(bid, table); markDirty(); scheduleAutoSave(); });
+      });
+    }
+    // re-wire rich editor
+    const richEl = card.querySelector('.rich-editor');
+    if (richEl) {
+      const toolbar = richEl.previousElementSibling;
+      richEl.addEventListener('focus', () => { if (toolbar) toolbar.classList.add('visible'); });
+      richEl.addEventListener('blur',  () => {
+        setTimeout(() => {
+          if (!toolbar || !toolbar.contains(document.activeElement)) toolbar && toolbar.classList.remove('visible');
+        }, 150);
+        const bk = blocks.find(x => x._id === bid);
+        if (bk) { bk.data.html = richEl.innerHTML; markDirty(); scheduleAutoSave(); }
+      });
+      richEl.addEventListener('input', () => {
+        const bk = blocks.find(x => x._id === bid);
+        if (bk) { bk.data.html = richEl.innerHTML; markDirty(); scheduleAutoSave(); }
+      });
+    }
+    // re-wire mini rich editors
+    card.querySelectorAll('.mini-rich-editor').forEach(el => {
+      const ibid = el.dataset.bid;
+      const key  = el.dataset.key;
+      const syncMini = () => {
+        const bk = blocks.find(x => x._id === ibid);
+        if (!bk) return;
+        if (key.startsWith('col:')) {
+          const ci = parseInt(key.slice(4), 10);
+          if (Array.isArray(bk.data.cols)) bk.data.cols[ci].content = el.innerHTML;
+        } else {
+          bk.data[key] = el.innerHTML;
+        }
+      };
+      el.addEventListener('input', () => { syncMini(); markDirty(); scheduleAutoSave(); });
+      el.addEventListener('blur',  () => { syncMini(); markDirty(); scheduleAutoSave(); });
+    });
+    lucide.createIcons();
+  }
+
+  /* ── update block data field ── */
+  function updateBlockData(bid, key, val) {
+    const b = blocks.find(x => x._id === bid);
+    if (!b) return;
+    b.data[key] = val;
+  }
+
+  /* ── word count / read time ── */
+  function updateWordCount() {
+    const el = document.getElementById('word-count-display');
+    if (!el) return;
+    const stripTags = s => s.replace(/<[^>]*>/g, ' ');
+    const countWords = s => (s.match(/\S+/g) || []).length;
+    let total = 0;
+    const titleEl = document.getElementById('lesson-title');
+    if (titleEl) total += countWords(titleEl.value || '');
+    for (const b of blocks) {
+      const d = b.data;
+      switch (b.type) {
+        case 'heading':   total += countWords(d.text || ''); break;
+        case 'text':      total += countWords(stripTags(d.html || d.text || '')); break;
+        case 'callout':   total += countWords((d.title || '') + ' ' + (d.text || '')); break;
+        case 'quiz':      total += countWords((d.question || '') + ' ' + (d.options || []).join(' ') + ' ' + (d.explanation || '')); break;
+        case 'fill-blank':total += countWords(d.text || ''); break;
+        case 'accordion': (d.items || []).forEach(it => { total += countWords((it.title || '') + ' ' + (it.body || '')); }); break;
+        case 'timeline':  (d.items || []).forEach(it => { total += countWords((it.date || '') + ' ' + (it.text || '')); }); break;
+        case 'table':     (d.rows || []).forEach(row => row.forEach(c => { total += countWords(String(c || '')); })); break;
+      }
+    }
+    const mins = Math.max(1, Math.round(total / 200));
+    el.textContent = `${total} сл · ~${mins} мин`;
+  }
+
+  /* ── palette search ── */
+  function filterPalette(q) {
+    const qn = q.trim().toLowerCase();
+    document.querySelectorAll('.palette-section').forEach(sec => {
+      let anyVisible = false;
+      sec.querySelectorAll('.palette-btn').forEach(btn => {
+        const match = !qn || btn.textContent.trim().toLowerCase().includes(qn);
+        btn.style.display = match ? '' : 'none';
+        if (match) anyVisible = true;
+      });
+      sec.style.display = anyVisible ? '' : 'none';
+    });
+  }
+
+  /* ── formula preview ── */
+  function updateFormulaPreview(bid) {
+    const b = blocks.find(x => x._id === bid);
+    const el = document.getElementById('fp-' + bid);
+    if (!el || !b) return;
+    el.textContent = '$$' + (b.data.tex || '') + '$$';
+    renderKatexIn(el);
+  }
+
+  /* ── save ── */
+  async function saveLesson(auto) {
+    if (_saving) return;
+    _saving = true;
+    const btn = document.getElementById('btn-save');
+    btn.disabled = true;
+    if (!auto) setStatus('Сохраняю…');
+
+    // sync any active rich editors
+    document.querySelectorAll('.rich-editor').forEach(el => {
+      const bid = el.dataset.bid;
+      const b = blocks.find(x => x._id === bid);
+      if (b) b.data.html = el.innerHTML;
+    });
+    document.querySelectorAll('.mini-rich-editor').forEach(el => {
+      const bid = el.dataset.bid;
+      const key = el.dataset.key;
+      const b = blocks.find(x => x._id === bid);
+      if (!b) return;
+      if (key.startsWith('col:')) {
+        const ci = parseInt(key.slice(4), 10);
+        if (Array.isArray(b.data.cols)) b.data.cols[ci].content = el.innerHTML;
+      } else {
+        b.data[key] = el.innerHTML;
+      }
+    });
+
+    // update title
+    const titleEl = document.getElementById('lesson-title');
+    const newTitle = titleEl.value.trim() || lesson.title;
+
+    try {
+      // 1. update title if changed
+      if (newTitle !== lesson.title) {
+        await LS.api('/api/lessons/' + lessonId, {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ title: newTitle }),
+        });
+        lesson.title = newTitle;
+        document.getElementById('etb-title').textContent = newTitle;
+      }
+
+      // 2. save blocks
+      const payload = blocks.map((b, i) => ({
+        orderIndex: i,
+        type: b.type,
+        data: b.data,
+      }));
+      await LS.api('/api/lessons/' + lessonId + '/blocks', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ blocks: payload }),
+      });
+
+      _dirty = false;
+      setStatus('Сохранено', true);
+    } catch (e) {
+      setStatus('Ошибка сохранения');
+      if (!auto) LS.toast(e.message || 'Ошибка сохранения', 'error');
+    } finally {
+      _saving = false;
+      btn.disabled = false;
+    }
+  }
+
+  /* ── publish toggle ── */
+  async function togglePublish() {
+    try {
+      const newPub = !lesson.isPublished;
+      await LS.api('/api/lessons/' + lessonId, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ isPublished: newPub }),
+      });
+      lesson.isPublished = newPub;
+      const btn = document.getElementById('btn-pub');
+      btn.textContent = newPub ? 'Снять с публикации' : 'Опубликовать';
+      btn.classList.toggle('published', newPub);
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+
+  /* ── publish all lessons in the course ── */
+  async function publishAllLessons() {
+    if (!lesson.courseId) return;
+    const btn = document.getElementById('btn-pub-all');
+    btn.disabled = true;
+    try {
+      const r = await LS.api('/api/courses/' + lesson.courseId + '/publish-all', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ publish: true }),
+      });
+      LS.toast(`Опубликовано уроков: ${r.lessonsUpdated}`, 'success');
+      // reflect current lesson as published
+      lesson.isPublished = true;
+      const pubBtn = document.getElementById('btn-pub');
+      pubBtn.textContent = 'Снять с публикации';
+      pubBtn.classList.add('published');
+    } catch (e) {
+      LS.toast(e.message || 'Ошибка публикации', 'error');
+    } finally {
+      btn.disabled = false;
+    }
+  }
+
+  /* ── preview ── */
+  function goPreview() {
+    if (_dirty) {
+      saveLesson().then(() => window.open('/lesson?id=' + lessonId, '_blank'));
+    } else {
+      window.open('/lesson?id=' + lessonId, '_blank');
+    }
+  }
+
+  /* ── Export PDF ── */
+  function exportPDF() {
+    if (_dirty) {
+      saveLesson().then(() => window.open('/lesson?id=' + lessonId + '&print=1', '_blank'));
+    } else {
+      window.open('/lesson?id=' + lessonId + '&print=1', '_blank');
+    }
+  }
+
+  /* ── keyboard shortcuts ── */
+  document.addEventListener('keydown', e => {
+    if ((e.ctrlKey || e.metaKey) && e.key === 's') { e.preventDefault(); saveLesson(); }
+    if ((e.ctrlKey || e.metaKey) && !e.shiftKey && e.key === 'z') { e.preventDefault(); undo(); }
+    if ((e.ctrlKey || e.metaKey) && (e.key === 'y' || (e.shiftKey && e.key === 'z'))) { e.preventDefault(); redo(); }
+  });
+
+  /* ── beforeunload ── */
+  window.addEventListener('beforeunload', e => {
+    if (_dirty) { e.preventDefault(); e.returnValue = ''; }
+  });
+
+  /* ── helpers ── */
+  function autoResize(el) {
+    el.style.height = 'auto';
+    el.style.height = el.scrollHeight + 'px';
+  }
+  function escAttr(s) { return String(s||'').replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
+
+  /* ══════════════════════════════════════════════════════════════════
+     FEATURE: Drag from palette
+     ══════════════════════════════════════════════════════════════════ */
+  (function initPaletteDrag() {
+    // Extract block type from onclick="addBlock('xxx')"
+    document.querySelectorAll('.palette-btn').forEach(btn => {
+      const m = btn.getAttribute('onclick')?.match(/addBlock\('([^']+)'\)/);
+      if (!m) return;
+      const type = m[1];
+      btn.setAttribute('draggable', 'true');
+      btn.addEventListener('dragstart', e => {
+        e.dataTransfer.setData('application/block-type', type);
+        e.dataTransfer.effectAllowed = 'copy';
+        btn.classList.add('dragging');
+      });
+      btn.addEventListener('dragend', () => btn.classList.remove('dragging'));
+    });
+
+    // Canvas accepts drops from palette
+    const canvas = document.querySelector('.editor-canvas');
+    canvas.addEventListener('dragover', e => {
+      if (e.dataTransfer.types.includes('application/block-type')) {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'copy';
+      }
+    });
+    canvas.addEventListener('drop', e => {
+      const type = e.dataTransfer.getData('application/block-type');
+      if (!type) return;
+      e.preventDefault();
+      // Find the block closest to drop point
+      const cards = [...document.querySelectorAll('.block-card')];
+      let afterId = null;
+      for (const card of cards) {
+        const rect = card.getBoundingClientRect();
+        if (e.clientY > rect.top + rect.height / 2) afterId = card.dataset.bid;
+      }
+      addBlock(type, null, afterId);
+    });
+  })();
+
+  /* ══════════════════════════════════════════════════════════════════
+     FEATURE: Image upload
+     ══════════════════════════════════════════════════════════════════ */
+  async function uploadImage(bid) {
+    const input = document.getElementById('img-file-' + bid);
+    if (!input || !input.files.length) return;
+    const file = input.files[0];
+    if (!file.type.startsWith('image/')) { LS.toast('Выберите изображение', 'error'); return; }
+    if (file.size > 10 * 1024 * 1024) { LS.toast('Максимум 10 МБ', 'error'); return; }
+
+    const statusEl = document.getElementById('img-status-' + bid);
+    if (statusEl) statusEl.textContent = 'Загрузка…';
+
+    const fd = new FormData();
+    fd.append('file', file);
+    try {
+      const res = await LS.uploadFile(fd);
+      const url = LS.downloadFileUrl(res.id);
+      updateBlockData(bid, 'url', url);
+      rerenderBlock(bid);
+      markDirty();
+    } catch (e) {
+      if (statusEl) statusEl.textContent = 'Ошибка: ' + (e.message || '');
+    }
+  }
+
+  /* ══════════════════════════════════════════════════════════════════
+     FEATURE: Code syntax highlighting
+     ══════════════════════════════════════════════════════════════════ */
+  function highlightCodeBlock(bid) {
+    if (!window._hljsLoaded || !window.hljs) return;
+    const el = document.getElementById('code-preview-' + bid);
+    if (!el) return;
+    const b = blocks.find(x => x._id === bid);
+    if (!b) return;
+    const codeEl = el.querySelector('code');
+    if (!codeEl) return;
+    codeEl.textContent = b.data.code || '';
+    if (b.data.lang) codeEl.className = 'language-' + b.data.lang;
+    hljs.highlightElement(codeEl);
+  }
+
+  function updateCodePreview(bid) {
+    const b = blocks.find(x => x._id === bid);
+    if (!b) return;
+    const el = document.getElementById('code-preview-' + bid);
+    if (!el) return;
+    const codeEl = el.querySelector('code');
+    if (!codeEl) return;
+    codeEl.textContent = b.data.code || '';
+    if (b.data.lang) codeEl.className = 'language-' + b.data.lang;
+    else codeEl.className = '';
+    if (window.hljs) hljs.highlightElement(codeEl);
+  }
+
+  /* ══════════════════════════════════════════════════════════════════
+     FEATURE: Inline preview mode
+     ══════════════════════════════════════════════════════════════════ */
+  let _previewMode = false;
+
+  function togglePreviewMode() {
+    _previewMode = !_previewMode;
+    const btn = document.getElementById('btn-preview-mode');
+    const canvas = document.querySelector('.editor-canvas');
+    const palette = document.querySelector('.block-palette');
+    btn.classList.toggle('active', _previewMode);
+
+    if (_previewMode) {
+      // Sync rich editors before preview
+      document.querySelectorAll('.rich-editor').forEach(el => {
+        const bid = el.dataset.bid;
+        const b = blocks.find(x => x._id === bid);
+        if (b) b.data.html = el.innerHTML;
+      });
+      canvas.classList.add('preview-mode');
+      palette.style.display = 'none';
+      renderPreview();
+    } else {
+      canvas.classList.remove('preview-mode');
+      palette.style.display = '';
+      renderBlocks();
+    }
+  }
+
+  function renderPreview() {
+    const container = document.getElementById('blocks-container');
+    container.innerHTML = blocks.map(b => renderPreviewBlock(b)).join('');
+    // KaTeX
+    container.querySelectorAll('.pv-formula').forEach(el => renderKatexIn(el));
+    // Highlight.js
+    if (window.hljs) {
+      container.querySelectorAll('pre code').forEach(el => hljs.highlightElement(el));
+    }
+    // Mermaid
+    if (window.mermaid) {
+      try { mermaid.run({ nodes: container.querySelectorAll('.mermaid') }); } catch {}
+    }
+    lucide.createIcons();
+  }
+
+  function renderPreviewBlock(b) {
+    const d = b.data;
+    switch (b.type) {
+      case 'heading':
+        return `<div class="preview-block"><h${d.level||2}>${esc(d.text||'')}</h${d.level||2}></div>`;
+      case 'text':
+        return `<div class="preview-block"><p>${d.html || esc(d.text||'')}</p></div>`;
+      case 'formula':
+        return `<div class="preview-block"><div class="pv-formula">${d.label ? '<div style="font-size:0.78rem;font-weight:700;color:var(--violet);margin-bottom:4px">'+esc(d.label)+'</div>' : ''}$$${esc(d.tex||'')}$$</div></div>`;
+      case 'image': {
+        const ia = d.align || 'center';
+        return `<div class="preview-block"><div class="pv-img-wrap align-${escAttr(ia)}">${d.url ? `<img class="pv-image" src="${escAttr(d.url)}" alt="${escAttr(d.alt||'')}" />` : ''}</div>${d.caption ? `<div class="pv-image-caption">${esc(d.caption)}</div>` : ''}</div>`;
+      }
+      case 'divider':
+        return `<div class="preview-block"><div class="pv-divider"></div></div>`;
+      case 'code':
+        return `<div class="preview-block pv-code"><pre><code class="${d.lang ? 'language-'+escAttr(d.lang) : ''}">${esc(d.code||'')}</code></pre></div>`;
+      case 'callout':
+        return `<div class="preview-block"><div class="pv-callout pv-${d.style||'info'}">${d.title?`<strong>${esc(d.title)}</strong><br>`:''}${d.text||''}</div></div>`;
+      case 'video': {
+        const embed = getEmbedUrl(d.url||'');
+        return `<div class="preview-block">${embed ? `<div style="aspect-ratio:16/9;border-radius:12px;overflow:hidden"><iframe src="${escAttr(embed)}" style="width:100%;height:100%;border:none" allowfullscreen></iframe></div>` : ''}${d.caption ? `<div style="font-size:0.82rem;color:#8898AA;margin-top:6px">${esc(d.caption)}</div>` : ''}</div>`;
+      }
+      case 'table': {
+        const rows = Array.isArray(d.rows) ? d.rows : [];
+        const hasH = d.headers !== false;
+        let html = '<div class="preview-block"><table>';
+        rows.forEach((r, ri) => {
+          html += '<tr>';
+          r.forEach(c => { const t = (ri===0&&hasH)?'th':'td'; html += `<${t}>${esc(String(c||''))}</${t}>`; });
+          html += '</tr>';
+        });
+        return html + '</table></div>';
+      }
+      case 'quiz': {
+        const opts = Array.isArray(d.options) ? d.options : [];
+        const ci = d.correctIndex ?? 0;
+        const correctJson = d.multi
+          ? escAttr(JSON.stringify(Array.isArray(d.correctIndices) ? d.correctIndices : [ci]))
+          : '';
+        const btns = opts.map((o, i) => {
+          const txt = esc(typeof o === 'object' ? (o.text||'') : o);
+          if (d.multi) return `<button class="pv-quiz-opt-btn" onclick="pvToggle(this)">${txt}</button>`;
+          return `<button class="pv-quiz-opt-btn" onclick="pvAnswer(this,${i},${ci})">${txt}</button>`;
+        }).join('');
+        const checkBtn = d.multi ? `<button class="pv-quiz-check-btn" onclick="pvCheck(this)">Проверить</button>` : '';
+        return `<div class="preview-block"><div class="pv-quiz"><div class="pv-quiz-q">${esc(d.question||'')}</div><div class="pv-quiz-opts"${d.multi?` data-correct="${correctJson}" data-multi="1"`:''}>` +
+          btns + checkBtn + `</div>${d.explanation?`<div class="pv-quiz-expl">${esc(d.explanation)}</div>`:''}</div></div>`;
+      }
+      case 'flashcard':
+        return `<div class="preview-block"><div class="pv-flip-wrap" onclick="this.querySelector('.pv-fc-card').classList.toggle('flipped')"><div class="pv-fc-card"><div class="pv-fc-front"><div class="pv-fc-label">Вопрос</div><div class="pv-fc-text">${d.front||''}</div><div class="pv-fc-hint">Нажмите, чтобы увидеть ответ <svg class="ic" viewBox="0 0 24 24"><polyline points="9 14 4 9 9 4"/><path d="M20 20v-7a4 4 0 0 0-4-4H4"/></svg></div></div><div class="pv-fc-back"><div class="pv-fc-label">Ответ</div><div class="pv-fc-text">${d.back||''}</div><div class="pv-fc-hint">Нажмите, чтобы вернуться <svg class="ic" viewBox="0 0 24 24"><polyline points="9 14 4 9 9 4"/><path d="M20 20v-7a4 4 0 0 0-4-4H4"/></svg></div></div></div></div></div>`;
+      case 'sim':
+        return `<div class="preview-block"><div class="sim-preview">${LS.icon('atom',14)} Симуляция: <strong>${esc(d.simId||'')}</strong></div></div>`;
+      case 'matching': {
+        const pairs = Array.isArray(d.pairs) ? d.pairs : [];
+        return `<div class="preview-block"><div class="pv-quiz"><div class="pv-quiz-q">${esc(d.question||'')}</div>${pairs.map(p => `<div class="pv-quiz-opt">${esc(p.left||'')} <svg class="ic" viewBox="0 0 24 24"><line x1="3" y1="12" x2="21" y2="12"/><polyline points="8 17 3 12 8 7"/><polyline points="16 7 21 12 16 17"/></svg> ${esc(p.right||'')}</div>`).join('')}</div></div>`;
+      }
+      case 'fill-blank':
+        return `<div class="preview-block"><div class="pv-quiz">${(d.text||'').replace(/\{([^}]+)\}/g, '<span style="border-bottom:2px solid var(--violet);padding:0 12px;color:var(--violet);font-weight:700">______</span>')}</div></div>`;
+      case 'ordering': {
+        const items = Array.isArray(d.items) ? d.items : [];
+        return `<div class="preview-block"><div class="pv-quiz"><div class="pv-quiz-q">${esc(d.question||'')}</div>${items.map((it,i) => `<div class="pv-quiz-opt">${i+1}. ${esc(it)}</div>`).join('')}</div></div>`;
+      }
+      case 'accordion':
+        return `<div class="preview-block"><div class="accordion-preview"><div class="accordion-preview-header" onclick="this.nextElementSibling.style.display=this.nextElementSibling.style.display==='none'?'':'none'">${esc(d.title||'Подробнее…')} <svg class="ic" viewBox="0 0 24 24"><polyline points="2 9 12 21 22 9"/></svg></div><div class="accordion-preview-body">${d.content||''}</div></div></div>`;
+      case 'timeline': {
+        const items = Array.isArray(d.items) ? d.items : [];
+        return `<div class="preview-block">${items.map(it => `<div style="display:flex;gap:12px;margin-bottom:14px"><div style="display:flex;flex-direction:column;align-items:center"><div style="width:12px;height:12px;border-radius:50%;background:#0EA5E9;flex-shrink:0"></div><div style="width:2px;flex:1;background:rgba(14,165,233,0.2)"></div></div><div><div style="font-size:0.78rem;font-weight:700;color:#0EA5E9">${esc(it.date||'')}</div><div style="font-weight:700;color:#0F172A">${esc(it.title||'')}</div>${it.text?`<div style="font-size:0.85rem;color:#6B7A8E;margin-top:2px">${esc(it.text)}</div>`:''}</div></div>`).join('')}</div>`;
+      }
+      case 'diagram':
+        return `<div class="preview-block"><div class="diagram-preview"><div class="mermaid">${esc(d.code||'')}</div></div>${d.caption?`<div style="text-align:center;font-size:0.82rem;color:#8898AA;margin-top:6px">${esc(d.caption)}</div>`:''}</div>`;
+      case 'geogebra':
+        return `<div class="preview-block">${d.materialId?`<div class="geogebra-preview"><iframe src="https://www.geogebra.org/material/iframe/id/${escAttr(d.materialId)}/width/800/height/500/border/888888/sfsb/true/smb/false/stb/false/stbh/false/ai/false/asb/false/sri/false/rc/false/ld/false/sdz/false/ctl/false" allowfullscreen></iframe></div>`:'<div style="color:#8898AA;text-align:center;padding:20px">Не указан ID материала GeoGebra</div>'}${d.caption?`<div style="text-align:center;font-size:0.82rem;color:#8898AA;margin-top:6px">${esc(d.caption)}</div>`:''}</div>`;
+      case 'audio':
+        return `<div class="preview-block">${d.url?`<audio controls src="${escAttr(d.url)}" style="width:100%"></audio>`:''}${d.caption?`<div style="font-size:0.82rem;color:#8898AA;margin-top:6px">${esc(d.caption)}</div>`:''}</div>`;
+      case 'columns': {
+        const cols = Array.isArray(d.cols) ? d.cols : [];
+        return `<div class="preview-block"><div style="display:grid;grid-template-columns:repeat(${cols.length},1fr);gap:16px">${cols.map(c => `<div style="font-size:0.88rem;line-height:1.7;color:#3D4F6B">${c.content||'<span style="color:#ccc">Пусто</span>'}</div>`).join('')}</div></div>`;
+      }
+      case 'alert':
+        return `<div class="preview-block">${renderAlertPreviewHTML(d)}</div>`;
+      case 'quote':
+        return `<div class="preview-block"><div class="pv-quote"><div class="pv-quote-text">${d.text||''}</div>${d.author?`<div class="pv-quote-author">— ${esc(d.author)}</div>`:''}</div></div>`;
+      case 'checklist': {
+        const items = Array.isArray(d.items) ? d.items : [];
+        const rows = items.map((it, i) => {
+          const checked = it.checked ? ' checked' : '';
+          const cls = it.checked ? ' class="pv-checklist-item checked"' : ' class="pv-checklist-item"';
+          return `<label${cls} style="cursor:pointer"><input type="checkbox" class="pv-checklist-cb"${checked} onchange="this.closest('label').classList.toggle('checked',this.checked)">${esc(it.text||'')}</label>`;
+        }).join('');
+        return `<div class="preview-block"><div class="pv-checklist">${rows}</div></div>`;
+      }
+      case 'button': {
+        const align = d.align || 'center';
+        const style = d.style || 'primary';
+        const label = esc(d.label || 'Кнопка');
+        const href = d.url ? `href="${escAttr(d.url)}" target="_blank" rel="noopener"` : 'href="#" onclick="return false"';
+        return `<div class="preview-block"><div class="pv-btn-cta-wrap align-${escAttr(align)}"><a ${href} class="pv-btn-cta style-${escAttr(style)}">${label}</a></div></div>`;
+      }
+      default: return '';
+    }
+  }
+
+  /* ══════════════════════════════════════════════════════════════════
+     TEMPLATE: Save / Load lesson templates
+     ══════════════════════════════════════════════════════════════════ */
+
+  // inject template modals
+  document.body.insertAdjacentHTML('beforeend', `
+    <!-- Save lesson as template modal -->
+    <div class="tpl-modal" id="save-tpl-modal" onclick="if(event.target===this)closeSaveTplModal()">
+      <div class="modal" style="max-width:420px">
+        <div class="modal-title">${LS.icon('bookmark-plus',18)} Сохранить как шаблон</div>
+        <div class="form-group">
+          <label class="form-label">Название шаблона</label>
+          <input class="form-input" id="tpl-save-title" placeholder="Например: Урок-лекция" />
+        </div>
+        <div class="form-group">
+          <label class="form-label">Категория</label>
+          <select class="form-input" id="tpl-save-cat">
+            <option value="general">Общее</option>
+            <option value="lecture">Лекция</option>
+            <option value="practice">Практика</option>
+            <option value="lab">Лабораторная</option>
+            <option value="test">Контроль</option>
+          </select>
+        </div>
+        <div class="modal-footer">
+          <button class="btn-cancel" onclick="closeSaveTplModal()">Отмена</button>
+          <button class="btn-primary" id="btn-do-save-tpl" onclick="doSaveTpl()">Сохранить</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Load lesson template modal -->
+    <div class="tpl-modal" id="load-tpl-modal" onclick="if(event.target===this)closeLoadTplModal()">
+      <div class="modal" style="max-width:640px;padding:28px">
+        <div class="modal-title">${LS.icon('folder-open',18)} Загрузить из шаблона</div>
+        <div id="tpl-list" style="max-height:420px;overflow-y:auto">
+          <div class="spinner"></div>
+        </div>
+      </div>
+    </div>
+  `);
+
+  // inject styles
+  document.head.insertAdjacentHTML('beforeend', '<style>' +
+    '.tpl-modal{position:fixed;inset:0;background:rgba(15,23,42,0.4);backdrop-filter:blur(6px);z-index:200;display:none;align-items:center;justify-content:center;padding:20px;}' +
+    '.tpl-modal.open{display:flex;}' +
+    '.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:12px;}' +
+    '.tpl-card{background:#f8f9fc;border:1.5px solid rgba(15,23,42,0.08);border-radius:14px;padding:14px 16px;cursor:pointer;transition:all .15s;}' +
+    '.tpl-card:hover{border-color:rgba(155,93,229,0.3);background:rgba(155,93,229,0.04);transform:translateY(-2px);box-shadow:0 4px 16px rgba(15,23,42,0.08);}' +
+    '.tpl-card-title{font-size:0.88rem;font-weight:700;color:#0F172A;margin-bottom:4px;display:flex;align-items:center;gap:6px;}' +
+    '.tpl-card-meta{font-size:0.72rem;color:#8898AA;display:flex;align-items:center;gap:8px;}' +
+    '.tpl-card-cat{font-size:0.66rem;font-weight:700;padding:2px 8px;border-radius:99px;background:rgba(155,93,229,0.08);color:var(--violet);}' +
+    '.tpl-card-actions{display:flex;gap:4px;margin-top:8px;}' +
+    '.tpl-card-btn{padding:5px 12px;border:1.5px solid rgba(155,93,229,0.2);border-radius:99px;background:rgba(155,93,229,0.06);color:var(--violet);font-family:"Manrope",sans-serif;font-size:0.74rem;font-weight:700;cursor:pointer;transition:all .12s;}' +
+    '.tpl-card-btn:hover{background:var(--violet);color:#fff;}' +
+    '.tpl-card-btn.danger{border-color:rgba(241,91,181,0.2);background:rgba(241,91,181,0.06);color:#E0335E;}' +
+    '.tpl-card-btn.danger:hover{background:#E0335E;color:#fff;}' +
+    '.tpl-empty{text-align:center;padding:32px;color:#8898AA;font-size:0.86rem;}' +
+  '</style>');
+
+  const CAT_LABELS = { general:'Общее', lecture:'Лекция', practice:'Практика', lab:'Лабораторная', test:'Контроль' };
+
+  function openSaveTplModal() {
+    document.getElementById('tpl-save-title').value = lesson?.title || '';
+    document.getElementById('save-tpl-modal').classList.add('open');
+    setTimeout(() => document.getElementById('tpl-save-title').focus(), 50);
+  }
+  function closeSaveTplModal() {
+    document.getElementById('save-tpl-modal').classList.remove('open');
+  }
+
+  async function doSaveTpl() {
+    const title = document.getElementById('tpl-save-title').value.trim();
+    if (!title) { document.getElementById('tpl-save-title').focus(); return; }
+    const btn = document.getElementById('btn-do-save-tpl');
+    btn.disabled = true;
+    try {
+      await LS.saveLessonTemplate({
+        title,
+        category: document.getElementById('tpl-save-cat').value,
+        lessonId: parseInt(lessonId),
+      });
+      closeSaveTplModal();
+      LS.toast('Шаблон сохранён', 'success');
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+    finally { btn.disabled = false; }
+  }
+
+  function openLoadTplModal() {
+    document.getElementById('load-tpl-modal').classList.add('open');
+    loadTplList();
+  }
+  function closeLoadTplModal() {
+    document.getElementById('load-tpl-modal').classList.remove('open');
+  }
+
+  async function loadTplList() {
+    const wrap = document.getElementById('tpl-list');
+    wrap.innerHTML = '<div class="spinner"></div>';
+    try {
+      const list = await LS.getLessonTemplates();
+      if (!list.length) {
+        wrap.innerHTML = '<div class="tpl-empty">' + LS.icon('file-text', 32) + '<br>Нет доступных шаблонов</div>';
+        return;
+      }
+      wrap.innerHTML = '<div class="tpl-grid">' + list.map(t => {
+        const blockCount = Array.isArray(t.blocks) ? t.blocks.length : 0;
+        const canDelete = t.createdBy === user.id || user.role === 'admin';
+        return '<div class="tpl-card">' +
+          '<div class="tpl-card-title">' + LS.icon('file-text', 14) + ' ' + esc(t.title) + '</div>' +
+          '<div class="tpl-card-meta">' +
+            '<span class="tpl-card-cat">' + esc(CAT_LABELS[t.category] || t.category) + '</span>' +
+            '<span>' + blockCount + ' блоков</span>' +
+            '<span>' + esc(t.creatorName) + '</span>' +
+          '</div>' +
+          '<div class="tpl-card-actions">' +
+            '<button class="tpl-card-btn" onclick="useLessonTpl(' + t.id + ')">Вставить</button>' +
+            (canDelete ? '<button class="tpl-card-btn danger" onclick="delLessonTpl(' + t.id + ')">'+LS.icon('trash',12)+'</button>' : '') +
+          '</div>' +
+        '</div>';
+      }).join('') + '</div>';
+    } catch (e) {
+      wrap.innerHTML = '<div class="tpl-empty">Ошибка загрузки</div>';
+    }
+  }
+
+  async function useLessonTpl(tplId) {
+    if (!lesson) return;
+    try {
+      const res = await LS.createFromLessonTemplate(tplId, {
+        courseId: lesson.courseId,
+        sectionId: lesson.sectionId || null,
+        title: lesson.title + ' (из шаблона)',
+      });
+      closeLoadTplModal();
+      LS.toast('Урок создан из шаблона', 'success');
+      location.href = '/lesson-editor?id=' + res.id;
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+
+  async function delLessonTpl(tplId) {
+    const ok = await LS.confirm('Удалить этот шаблон урока?', { title:'Удаление шаблона', confirmText:'Удалить', danger:true });
+    if (!ok) return;
+    try {
+      await LS.deleteLessonTemplate(tplId);
+      LS.toast('Шаблон удалён', 'success');
+      loadTplList();
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+
+  /* ══════════════════════════════════════════════════════════════════
+     E1: Mini rich editor helper
+     ══════════════════════════════════════════════════════════════════ */
+  const _MINI_RICH_ICON_LINK = `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle"><path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71m4.54 5.07a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/></svg>`;
+
+  function renderMiniRich(bid, key, value, placeholder) {
+    return `<div class="mini-rich-wrap">
+      <div class="mini-toolbar">
+        <button class="rich-toolbar-btn" title="Жирный" onmousedown="event.preventDefault();document.execCommand('bold')"><b>B</b></button>
+        <button class="rich-toolbar-btn" title="Курсив" onmousedown="event.preventDefault();document.execCommand('italic')"><i>I</i></button>
+        <button class="rich-toolbar-btn" title="Ссылка" onmousedown="event.preventDefault();insertLink()">${_MINI_RICH_ICON_LINK}</button>
+      </div>
+      <div class="mini-rich-editor" contenteditable="true"
+           data-bid="${bid}" data-key="${escAttr(key)}"
+           data-placeholder="${escAttr(placeholder)}">${value}</div>
+    </div>`;
+  }
+
+  /* ══════════════════════════════════════════════════════════════════
+     E3: Interactive quiz answer handlers
+     ══════════════════════════════════════════════════════════════════ */
+  function pvAnswer(btn, idx, correctIdx) {
+    const opts = btn.closest('.pv-quiz-opts');
+    if (opts.dataset.answered) return;
+    opts.dataset.answered = '1';
+    [...opts.querySelectorAll('.pv-quiz-opt-btn')].forEach((b, i) => {
+      b.disabled = true;
+      if (i === correctIdx) b.classList.add('right');
+    });
+    if (idx !== correctIdx) btn.classList.add('wrong');
+    const expl = opts.parentElement.querySelector('.pv-quiz-expl');
+    if (expl) expl.classList.add('show');
+  }
+
+  function pvToggle(btn) {
+    if (btn.disabled) return;
+    btn.classList.toggle('selected');
+  }
+
+  function pvCheck(checkBtn) {
+    const opts = checkBtn.closest('.pv-quiz-opts');
+    if (opts.dataset.answered) return;
+    opts.dataset.answered = '1';
+    const correctSet = new Set(JSON.parse(opts.dataset.correct || '[]'));
+    [...opts.querySelectorAll('.pv-quiz-opt-btn')].forEach((b, i) => {
+      b.disabled = true;
+      const sel = b.classList.contains('selected');
+      const ok  = correctSet.has(i);
+      if (ok) b.classList.add('right');
+      else if (sel) b.classList.add('wrong');
+    });
+    checkBtn.disabled = true;
+    const expl = opts.parentElement.querySelector('.pv-quiz-expl');
+    if (expl) expl.classList.add('show');
+  }
+
+  /* ══════════════════════════════════════════════════════════════════
+     E5: Change block type
+     ══════════════════════════════════════════════════════════════════ */
+  function changeBlockType(bid, newType) {
+    const b = blocks.find(x => x._id === bid);
+    if (!b || b.type === newType) return;
+    pushHistory();
+    const old = b.data;
+    // migrate common text fields
+    const defaults = JSON.parse(JSON.stringify(BLOCK_DEFAULTS[newType] || {}));
+    const src = old.html || old.text || old.question || old.content || old.front || '';
+    if ('html' in defaults)     defaults.html = src;
+    if ('text' in defaults)     defaults.text = src;
+    if ('question' in defaults) defaults.question = src;
+    if ('content' in defaults)  defaults.content = old.content || src;
+    if ('title' in defaults)    defaults.title = old.title || '';
+    if ('front' in defaults)    defaults.front = old.front || src;
+    if ('back' in defaults)     defaults.back  = old.back  || '';
+    b.type = newType;
+    b.data = defaults;
+    renderBlocks();
+    markDirty();
+  }
+
+  loadLesson();
+
+  /* ── Mobile palette sheet ── */
+  function toggleMobPalette() {
+    const sheet = document.getElementById('mob-palette-sheet');
+    const backdrop = document.getElementById('mob-backdrop');
+    if (sheet.classList.contains('open')) {
+      closeMobPalette();
+    } else {
+      const inner = document.getElementById('mob-palette-inner');
+      if (inner && !inner.children.length) {
+        const palette = document.querySelector('.block-palette');
+        if (palette) {
+          inner.innerHTML = palette.innerHTML;
+          const search = inner.querySelector('.palette-search');
+          if (search) search.remove();
+          // Wrap each onclick to also close the sheet
+          inner.querySelectorAll('.palette-btn').forEach(btn => {
+            const orig = btn.getAttribute('onclick') || '';
+            btn.setAttribute('onclick', orig + ';closeMobPalette()');
+          });
+        }
+      }
+      sheet.classList.add('open');
+      backdrop.classList.add('show');
+    }
+  }
+
+  function closeMobPalette() {
+    document.getElementById('mob-palette-sheet')?.classList.remove('open');
+    document.getElementById('mob-backdrop')?.classList.remove('show');
+  }
+</script>
+</body>
+</html>
diff --git a/frontend/lesson.html b/frontend/lesson.html
new file mode 100644
index 0000000..164e51b
--- /dev/null
+++ b/frontend/lesson.html
@@ -0,0 +1,1831 @@
+<!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" />
+  <!-- KaTeX -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" />
+  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"
+          onload="if(window._katexReady) window._katexReady()"></script>
+  <!-- Highlight.js -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/atom-one-dark.min.css" />
+  <script defer src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"
+          onload="window._hljsLoaded=true;document.querySelectorAll('.block-code pre code').forEach(el=>hljs.highlightElement(el))"></script>
+  <!-- Mermaid diagrams -->
+  <script defer src="https://cdn.jsdelivr.net/npm/mermaid@10.9.0/dist/mermaid.min.js"
+          onload="mermaid.initialize({startOnLoad:false,theme:'neutral'});window._mermaidLoaded=true;try{mermaid.run({nodes:document.querySelectorAll('.mermaid')})}catch{}"></script>
+  <script src="https://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+  <style>
+    .sb-content { background: #f4f5f8; }
+
+    /* ── lesson reader layout ── */
+    .lesson-layout {
+      display: flex; gap: 0;
+      min-height: calc(100vh - 0px);
+    }
+    .lesson-main {
+      flex: 1; min-width: 0;
+      padding: 0 0 80px;
+    }
+    .lesson-sidebar-toc {
+      width: 220px; flex-shrink: 0;
+      position: sticky; top: 0; height: 100vh; overflow-y: auto;
+      border-left: 1px solid rgba(15,23,42,0.07);
+      background: #fff; padding: 24px 16px;
+      display: none; /* shown on wide screens */
+    }
+    @media (min-width: 1100px) {
+      .lesson-sidebar-toc { display: block; }
+    }
+
+    /* ── lesson top bar ── */
+    .lesson-topbar {
+      background: #fff; border-bottom: 1px solid rgba(15,23,42,0.08);
+      padding: 14px 28px;
+      display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
+      position: sticky; top: 0; z-index: 50;
+    }
+    .lesson-topbar-back {
+      display: flex; align-items: center; gap: 6px;
+      text-decoration: none; color: #8898AA; font-size: 0.8rem; font-weight: 700;
+      transition: color 0.15s; flex-shrink: 0;
+    }
+    .lesson-topbar-back:hover { color: var(--violet); }
+    .lesson-topbar-title {
+      flex: 1; font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 800;
+      color: #0F172A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+    }
+    .lesson-topbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
+    .lesson-edit-btn {
+      padding: 6px 14px; border: 1.5px solid rgba(155,93,229,0.25); border-radius: 999px;
+      background: rgba(155,93,229,0.06); color: var(--violet);
+      font-family: 'Manrope', sans-serif; font-size: 0.78rem; font-weight: 700;
+      cursor: pointer; display: flex; align-items: center; gap: 5px;
+      transition: all 0.15s;
+    }
+    .lesson-edit-btn:hover { background: rgba(155,93,229,0.12); border-color: var(--violet); }
+    .lesson-bm-btn {
+      padding: 6px 10px; border: 1.5px solid rgba(15,23,42,0.12); border-radius: 999px;
+      background: transparent; color: #8898AA; cursor: pointer; display: flex; align-items: center; gap: 4px;
+      font-family: 'Manrope', sans-serif; font-size: 0.78rem; font-weight: 700; transition: all 0.15s;
+    }
+    .lesson-bm-btn:hover { border-color: #FFD166; color: #FFD166; }
+    .lesson-bm-btn.active { border-color: #FFD166; color: #FFD166; background: rgba(255,209,102,0.08); }
+    .lesson-progress-bar-wrap {
+      position: absolute; bottom: -1px; left: 0; right: 0; height: 2px;
+      background: rgba(15,23,42,0.05);
+    }
+    .lesson-progress-bar-fill { height: 100%; background: var(--violet); transition: width 0.3s; width: 0%; }
+
+    /* ── lesson content ── */
+    .lesson-body {
+      max-width: 720px; margin: 0 auto; padding: 40px 28px 0;
+    }
+    .lesson-heading-block { margin-bottom: 36px; }
+    .lesson-heading-block h1 {
+      font-family: 'Unbounded', sans-serif; font-size: 1.6rem; font-weight: 800;
+      color: #0F172A; letter-spacing: -0.03em; line-height: 1.25; margin-bottom: 10px;
+    }
+    .lesson-course-crumb {
+      font-size: 0.78rem; color: #8898AA; display: flex; align-items: center; gap: 6px;
+    }
+    .lesson-course-crumb a { color: var(--violet); text-decoration: none; }
+    .lesson-course-crumb a:hover { text-decoration: underline; }
+
+    /* ── blocks ── */
+    .lesson-block { margin-bottom: 22px; }
+
+    .block-heading h2 {
+      font-family: 'Unbounded', sans-serif; font-size: 1.15rem; font-weight: 800;
+      color: #0F172A; margin: 32px 0 12px; padding-bottom: 10px;
+      border-bottom: 2px solid rgba(155,93,229,0.15);
+    }
+    .block-heading h3 {
+      font-family: 'Unbounded', sans-serif; font-size: 0.95rem; font-weight: 800;
+      color: #1E293B; margin: 24px 0 10px;
+    }
+
+    .block-text p {
+      font-size: 1rem; line-height: 1.8; color: #1E293B; margin: 0;
+    }
+    .block-text p + p { margin-top: 14px; }
+
+    .block-formula {
+      background: rgba(155,93,229,0.04); border: 1px solid rgba(155,93,229,0.12);
+      border-left: 3px solid var(--violet);
+      border-radius: 0 12px 12px 0; padding: 16px 20px;
+      overflow-x: auto;
+      font-size: 1.1rem;
+    }
+    .block-formula-label {
+      font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
+      letter-spacing: 0.08em; color: var(--violet); margin-bottom: 8px;
+    }
+
+    .block-image { border-radius: 16px; overflow: hidden; }
+    .block-image img {
+      width: 100%; display: block; border-radius: 16px;
+      border: 1px solid rgba(15,23,42,0.08);
+    }
+    .block-image-caption {
+      text-align: center; font-size: 0.76rem; color: #8898AA;
+      margin-top: 8px; font-style: italic;
+    }
+
+    .block-divider hr {
+      border: none; border-top: 1.5px solid rgba(15,23,42,0.08); margin: 10px 0;
+    }
+
+    .block-code pre {
+      background: #282c34; color: #abb2bf; border-radius: 14px; padding: 18px 20px;
+      font-family: 'Fira Code', 'JetBrains Mono', 'Courier New', monospace; font-size: 0.87rem;
+      line-height: 1.65; overflow-x: auto; margin: 0;
+    }
+    .block-code pre code { font-family: inherit; }
+
+    /* ── accordion block ── */
+    .block-accordion {
+      border: 1.5px solid rgba(99,102,241,0.15); border-radius: 14px; overflow: hidden;
+    }
+    .accordion-header {
+      padding: 14px 18px; background: rgba(99,102,241,0.04);
+      display: flex; align-items: center; justify-content: space-between;
+      cursor: pointer; transition: background 0.15s; user-select: none;
+    }
+    .accordion-header:hover { background: rgba(99,102,241,0.08); }
+    .accordion-title { font-weight: 700; font-size: 0.92rem; color: #4338CA; }
+    .accordion-chevron { color: #6366F1; transition: transform 0.25s; flex-shrink: 0; }
+    .block-accordion.open .accordion-chevron { transform: rotate(180deg); }
+    .accordion-body {
+      max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s;
+      padding: 0 18px; font-size: 0.9rem; line-height: 1.7; color: #1E293B;
+    }
+    .block-accordion.open .accordion-body {
+      max-height: 600px; padding: 14px 18px; border-top: 1px solid rgba(99,102,241,0.1);
+    }
+
+    /* ── timeline block ── */
+    .block-timeline { padding: 8px 0; }
+    .timeline-track { display: flex; flex-direction: column; }
+    .timeline-entry { display: flex; gap: 16px; }
+    .timeline-node { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 20px; }
+    .timeline-dot-v { width: 12px; height: 12px; border-radius: 50%; background: #0EA5E9; flex-shrink: 0; }
+    .timeline-line-v { width: 2px; flex: 1; background: rgba(14,165,233,0.2); min-height: 20px; }
+    .timeline-content { padding-bottom: 20px; }
+    .timeline-date { font-size: 0.78rem; font-weight: 700; color: #0EA5E9; }
+    .timeline-event-title { font-size: 0.95rem; font-weight: 700; color: #0F172A; margin-top: 2px; }
+    .timeline-event-text { font-size: 0.85rem; color: #6B7A8E; margin-top: 3px; line-height: 1.5; }
+
+    /* ── diagram block ── */
+    .block-diagram { text-align: center; }
+    .diagram-render {
+      padding: 16px; background: #fff; border-radius: 14px;
+      border: 1.5px solid rgba(168,85,247,0.12); overflow-x: auto;
+    }
+    .diagram-caption { font-size: 0.82rem; color: #8898AA; margin-top: 8px; }
+
+    /* ── geogebra block ── */
+    .geogebra-embed {
+      aspect-ratio: 16/10; border-radius: 14px; overflow: hidden;
+      border: 1.5px solid rgba(34,197,94,0.15);
+    }
+    .geogebra-embed iframe { width: 100%; height: 100%; border: none; }
+    .geogebra-caption { font-size: 0.82rem; color: #8898AA; margin-top: 8px; text-align: center; }
+
+    /* ── audio block ── */
+    .block-audio audio {
+      width: 100%; border-radius: 10px;
+    }
+    .audio-caption { font-size: 0.82rem; color: #8898AA; margin-top: 6px; }
+
+    /* ── columns block ── */
+    .block-columns {
+      display: grid; gap: 20px;
+    }
+    .block-columns.cols-2 { grid-template-columns: 1fr 1fr; }
+    .block-columns.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
+    @media (max-width: 600px) {
+      .block-columns.cols-2,
+      .block-columns.cols-3 { grid-template-columns: 1fr; }
+    }
+    .block-col {
+      font-size: 1rem; line-height: 1.8; color: #1E293B;
+    }
+    .block-col img { max-width: 100%; border-radius: 10px; }
+
+    /* ── alert/banner block ── */
+    .block-alert {
+      border-radius: 16px; padding: 18px 22px; color: #fff;
+      font-weight: 600; font-size: 0.92rem; line-height: 1.5;
+      display: flex; align-items: flex-start; gap: 12px;
+    }
+    .block-alert-exam       { background: linear-gradient(135deg, #9B5DE5 0%, #6366F1 100%); }
+    .block-alert-homework   { background: linear-gradient(135deg, #06B6D4 0%, #0EA5E9 100%); }
+    .block-alert-important  { background: linear-gradient(135deg, #EF476F 0%, #F97316 100%); }
+    .block-alert-tip        { background: linear-gradient(135deg, #06D6A0 0%, #22C55E 100%); }
+    .block-alert-celebrate  { background: linear-gradient(135deg, #FFD166 0%, #F59E0B 100%); color: #422006; }
+    .block-alert-icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1; }
+    .block-alert-label {
+      font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
+      letter-spacing: 0.06em; opacity: 0.8; margin-bottom: 3px;
+    }
+    .block-alert-text { font-weight: 600; }
+
+    /* ── inline quiz block ── */
+    .block-quiz {
+      background: #fff; border: 1.5px solid rgba(15,23,42,0.08);
+      border-radius: 16px; padding: 20px 22px;
+      box-shadow: 0 2px 8px rgba(15,23,42,0.05);
+    }
+    .quiz-question {
+      font-weight: 700; font-size: 0.95rem; color: #0F172A; margin-bottom: 14px;
+    }
+    .quiz-options { display: flex; flex-direction: column; gap: 8px; }
+    .quiz-opt {
+      padding: 10px 16px; border: 1.5px solid rgba(15,23,42,0.1); border-radius: 12px;
+      cursor: pointer; font-size: 0.88rem; color: #3D4F6B; font-weight: 600;
+      transition: all 0.15s; background: #f8f9fc; text-align: left;
+    }
+    .quiz-opt:hover { border-color: var(--violet); color: var(--violet); background: rgba(155,93,229,0.04); }
+    .quiz-opt.correct  { border-color: #06D6A0 !important; background: rgba(6,214,160,0.07) !important; color: #047857 !important; }
+    .quiz-opt.wrong    { border-color: #EF476F !important; background: rgba(239,71,111,0.07) !important; color: #be123c !important; }
+    .quiz-feedback { margin-top: 12px; font-size: 0.84rem; font-weight: 600; display: none; }
+    .quiz-feedback.show { display: block; }
+    .quiz-feedback.ok  { color: #047857; }
+    .quiz-feedback.bad { color: #be123c; }
+
+    /* ── navigation ── */
+    .lesson-nav {
+      max-width: 720px; margin: 0 auto; padding: 32px 28px 0;
+      display: flex; gap: 12px; justify-content: space-between; align-items: stretch;
+    }
+    .lesson-nav-btn {
+      flex: 1; max-width: 240px; padding: 14px 18px; border-radius: 16px;
+      border: 1.5px solid rgba(15,23,42,0.09); background: #fff;
+      font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 700;
+      cursor: pointer; text-decoration: none; color: #3D4F6B;
+      display: flex; align-items: center; gap: 8px; transition: all 0.15s;
+      box-shadow: 0 1px 4px rgba(15,23,42,0.04);
+    }
+    .lesson-nav-btn:hover { border-color: var(--violet); color: var(--violet); box-shadow: 0 4px 14px rgba(15,23,42,0.09); }
+    .lesson-nav-btn-prev { justify-content: flex-start; }
+    .lesson-nav-btn-next { justify-content: flex-end; margin-left: auto; }
+    .lesson-nav-btn-label { font-size: 0.7rem; font-weight: 600; color: #8898AA; display: block; }
+    .lesson-nav-btn-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
+
+    /* ── complete button ── */
+    .lesson-complete-wrap {
+      max-width: 720px; margin: 28px auto 0; padding: 0 28px;
+      display: flex; justify-content: center;
+    }
+    .btn-complete {
+      padding: 13px 36px; border: none; border-radius: 999px;
+      background: linear-gradient(135deg, var(--violet), #06D6A0);
+      color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.95rem; font-weight: 800;
+      cursor: pointer; box-shadow: 0 4px 20px rgba(155,93,229,0.35);
+      display: flex; align-items: center; gap: 9px; transition: all 0.2s;
+    }
+    .btn-complete:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(155,93,229,0.45); }
+    .btn-complete:disabled { opacity: 0.6; cursor: default; transform: none; }
+    .btn-complete.done {
+      background: linear-gradient(135deg, #06D6A0, #059652);
+      box-shadow: 0 4px 20px rgba(6,214,160,0.3);
+    }
+
+    /* ── callout block ── */
+    .block-callout {
+      border-radius: 14px; padding: 14px 18px;
+      display: flex; gap: 12px; align-items: flex-start;
+      font-size: 0.92rem; line-height: 1.65;
+    }
+    .block-callout-info    { background: rgba(6,182,212,0.08);  border: 1.5px solid rgba(6,182,212,0.2);  color: #0e7490; }
+    .block-callout-warning { background: rgba(245,158,11,0.08); border: 1.5px solid rgba(245,158,11,0.2); color: #92400e; }
+    .block-callout-success { background: rgba(6,214,160,0.08);  border: 1.5px solid rgba(6,214,160,0.2);  color: #065f46; }
+    .block-callout-error   { background: rgba(239,71,111,0.08); border: 1.5px solid rgba(239,71,111,0.2); color: #9f1239; }
+    .callout-icon { font-size: 1.15rem; flex-shrink: 0; line-height: 1.6; }
+    .callout-text { flex: 1; }
+
+    /* ── video block ── */
+    .block-video { border-radius: 16px; overflow: hidden; background: #0F172A; }
+    .block-video iframe { width: 100%; aspect-ratio: 16/9; border: none; display: block; }
+    .block-video-caption { text-align: center; font-size: 0.76rem; color: #8898AA; margin-top: 8px; font-style: italic; }
+
+    /* ── table block ── */
+    .block-table { overflow-x: auto; border-radius: 14px; border: 1.5px solid rgba(15,23,42,0.09); }
+    .block-table table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
+    .block-table th {
+      background: rgba(15,23,42,0.04); font-weight: 700; color: #0F172A;
+      padding: 10px 14px; border-bottom: 1.5px solid rgba(15,23,42,0.09);
+      text-align: left;
+    }
+    .block-table td { padding: 9px 14px; border-bottom: 1px solid rgba(15,23,42,0.06); color: #1E293B; }
+    .block-table tr:last-child td { border-bottom: none; }
+
+    /* ── flashcard block ── */
+    .block-flashcard { perspective: 800px; }
+    .flashcard-inner {
+      position: relative; width: 100%; transition: transform 0.5s;
+      transform-style: preserve-3d; cursor: pointer; min-height: 120px;
+    }
+    .flashcard-inner.flipped { transform: rotateY(180deg); }
+    .flashcard-face {
+      border-radius: 16px; padding: 28px 24px; min-height: 120px;
+      display: flex; align-items: center; justify-content: center;
+      text-align: center; font-size: 0.96rem; font-weight: 600;
+      backface-visibility: hidden; -webkit-backface-visibility: hidden;
+    }
+    .flashcard-front {
+      background: linear-gradient(135deg, #f8f9fc, #eef0f5);
+      border: 1.5px solid rgba(15,23,42,0.1);
+      color: #0F172A;
+    }
+    .flashcard-back {
+      background: linear-gradient(135deg, rgba(155,93,229,0.08), rgba(6,182,212,0.06));
+      border: 1.5px solid rgba(155,93,229,0.2);
+      color: #1E293B;
+      position: absolute; inset: 0;
+      transform: rotateY(180deg);
+    }
+    .flashcard-hint {
+      text-align: center; font-size: 0.7rem; color: #8898AA; margin-top: 8px;
+      display: flex; align-items: center; justify-content: center; gap: 4px;
+    }
+
+    /* ── sim block (inline embed) ── */
+    .block-sim {
+      background: linear-gradient(135deg, rgba(15,23,42,0.03), rgba(155,93,229,0.04));
+      border: 1.5px solid rgba(155,93,229,0.18); border-radius: 16px;
+      overflow: hidden;
+    }
+    .sim-embed-frame {
+      width: 100%; height: 480px; border: none; display: block;
+      border-radius: 16px 16px 0 0; background: #0D0D1A;
+    }
+    .sim-embed-bar {
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 10px 16px; background: rgba(15,23,42,0.03);
+      border-top: 1px solid rgba(155,93,229,0.1);
+    }
+    .sim-caption { font-size: 0.78rem; color: #8898AA; font-weight: 600; }
+    .sim-fullscreen-btn {
+      display: inline-flex; align-items: center; gap: 6px;
+      padding: 6px 14px; border-radius: 999px; border: 1.5px solid rgba(155,93,229,0.25);
+      background: transparent; color: var(--violet);
+      font-family: 'Manrope', sans-serif; font-size: 0.78rem; font-weight: 700;
+      cursor: pointer; transition: all 0.18s; text-decoration: none;
+    }
+    .sim-fullscreen-btn:hover { background: rgba(155,93,229,0.08); border-color: var(--violet); }
+
+    /* ── notes panel ── */
+    .notes-panel {
+      max-width: 720px; margin: 28px auto 0; padding: 0 28px;
+    }
+    .notes-toggle {
+      display: flex; align-items: center; gap: 8px;
+      font-size: 0.8rem; font-weight: 700; color: #8898AA;
+      cursor: pointer; background: none; border: none;
+      padding: 8px 0; transition: color 0.15s; font-family: 'Manrope', sans-serif;
+    }
+    .notes-toggle:hover { color: var(--violet); }
+    .notes-area-wrap { display: none; margin-top: 10px; }
+    .notes-area-wrap.open { display: block; }
+    .notes-textarea {
+      width: 100%; min-height: 120px; padding: 14px 16px;
+      border: 1.5px solid rgba(15,23,42,0.12); border-radius: 14px;
+      font-family: 'Manrope', sans-serif; font-size: 0.9rem; color: #1E293B;
+      background: #fff; resize: vertical; box-sizing: border-box;
+      transition: border-color 0.2s;
+    }
+    .notes-textarea:focus { outline: none; border-color: var(--violet); }
+    .notes-save-row { display: flex; justify-content: flex-end; margin-top: 8px; }
+    .notes-save-btn {
+      padding: 7px 18px; border: none; border-radius: 999px;
+      background: var(--violet); color: #fff;
+      font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 700;
+      cursor: pointer; transition: all 0.15s;
+    }
+    .notes-save-btn:hover { background: #8a47d8; }
+    .notes-save-btn:disabled { opacity: 0.5; cursor: default; }
+    .notes-saved-lbl { font-size: 0.75rem; color: #06D6A0; align-self: center; margin-right: 10px; display: none; }
+
+    /* ── read time in topbar ── */
+    .topbar-read-time {
+      font-size: 0.74rem; color: #8898AA; display: flex; align-items: center; gap: 4px;
+    }
+
+    /* ── toc ── */
+    .toc-title {
+      font-family: 'Unbounded', sans-serif; font-size: 0.67rem; font-weight: 800;
+      color: #8898AA; text-transform: uppercase; letter-spacing: 0.08em;
+      padding: 0 16px; margin-bottom: 14px;
+      display: flex; align-items: center; gap: 8px;
+    }
+    .toc-title-bar {
+      display: block; width: 3px; height: 14px;
+      border-radius: 99px; background: var(--violet); flex-shrink: 0;
+    }
+    .toc-item {
+      display: block; padding: 6px 16px 6px 13px;
+      border-left: 3px solid transparent;
+      text-decoration: none; font-size: 0.79rem; color: #6B7A8E; font-weight: 600;
+      line-height: 1.45; transition: all 0.12s; margin-bottom: 1px;
+    }
+    .toc-item.h3 { padding-left: 28px; font-size: 0.75rem; color: #8898AA; font-weight: 500; }
+    .toc-item:hover { color: var(--violet); border-left-color: rgba(155,93,229,0.3); background: rgba(155,93,229,0.04); }
+    .toc-item.active { color: var(--violet); border-left-color: var(--violet); background: rgba(155,93,229,0.06); font-weight: 700; }
+
+    /* ── nav active ── */
+    .nav-active { background: rgba(155,93,229,0.08) !important; border-color: var(--violet) !important; color: var(--violet) !important; cursor: default; pointer-events: none; }
+    /* ── notif ── */
+    .notif-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; background: var(--pink); color: #fff; border-radius: 99px; font-size: 0.65rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
+    .notif-drop-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid var(--border); }
+    .notif-drop-title { font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800; }
+    .notif-read-all { background: none; border: none; font-size: 0.74rem; color: var(--violet); cursor: pointer; font-family: 'Manrope', sans-serif; font-weight: 600; }
+    .notif-item { display: flex; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background var(--tr); text-decoration: none; color: inherit; }
+    .notif-item:last-child { border-bottom: none; }
+    .notif-item:hover { background: rgba(155,93,229,0.04); }
+    .notif-item.unread { background: rgba(155,93,229,0.05); }
+    .notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); flex-shrink: 0; margin-top: 5px; }
+    .notif-dot.read { background: transparent; border: 1.5px solid var(--border-h); }
+    .notif-msg { font-size: 0.80rem; line-height: 1.45; flex: 1; }
+    .notif-time { font-size: 0.70rem; color: var(--text-3); margin-top: 2px; }
+    .notif-empty { padding: 28px 16px; text-align: center; color: var(--text-3); font-size: 0.84rem; }
+
+    /* ── matching block ── */
+    .block-matching {
+      background: #fff; border: 1.5px solid rgba(15,23,42,0.08);
+      border-radius: 16px; padding: 20px 22px;
+      box-shadow: 0 2px 8px rgba(15,23,42,0.05);
+    }
+    .matching-question {
+      font-weight: 700; font-size: 0.95rem; color: #0F172A; margin-bottom: 16px;
+    }
+    .matching-game {
+      display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px;
+    }
+    .matching-left, .matching-right {
+      display: flex; flex-direction: column; gap: 8px;
+    }
+    .match-item {
+      padding: 10px 16px; border: 1.5px solid rgba(15,23,42,0.1); border-radius: 12px;
+      font-size: 0.88rem; font-weight: 600; color: #3D4F6B;
+      background: #f8f9fc; transition: all 0.15s; text-align: center;
+      user-select: none;
+    }
+    .match-item.match-left {
+      background: rgba(155,93,229,0.05); border-color: rgba(155,93,229,0.15);
+      color: #4c2889; cursor: default;
+    }
+    .match-item.match-right {
+      cursor: grab; background: #fff;
+    }
+    .match-item.match-right:active { cursor: grabbing; }
+    .match-item.match-right.drag-over {
+      border-color: var(--violet); background: rgba(155,93,229,0.08);
+    }
+    .match-item.match-right.dragging { opacity: 0.4; }
+    .match-item.correct {
+      border-color: #06D6A0 !important; background: rgba(6,214,160,0.07) !important; color: #047857 !important;
+    }
+    .match-item.wrong {
+      border-color: #EF476F !important; background: rgba(239,71,111,0.07) !important; color: #be123c !important;
+    }
+    .match-check-btn {
+      padding: 9px 22px; border: none; border-radius: 999px;
+      background: var(--violet); color: #fff;
+      font-family: 'Manrope', sans-serif; font-size: 0.84rem; font-weight: 700;
+      cursor: pointer; transition: all 0.15s;
+    }
+    .match-check-btn:hover { background: #8a47d8; }
+    .match-check-btn:disabled { opacity: 0.5; cursor: default; }
+    .match-feedback { margin-top: 12px; font-size: 0.84rem; font-weight: 600; }
+    .match-feedback.ok  { color: #047857; }
+    .match-feedback.bad { color: #be123c; }
+
+    /* ── fill-blank block ── */
+    .block-fill-blank {
+      background: #fff; border: 1.5px solid rgba(15,23,42,0.08);
+      border-radius: 16px; padding: 20px 22px;
+      box-shadow: 0 2px 8px rgba(15,23,42,0.05);
+    }
+    .fill-blank-text {
+      font-size: 0.95rem; line-height: 2; color: #1E293B;
+    }
+    .blank-input {
+      border: none; border-bottom: 2px solid rgba(155,93,229,0.35);
+      background: transparent; color: #0F172A;
+      font-family: 'Manrope', sans-serif; font-size: 0.92rem; font-weight: 600;
+      padding: 2px 6px; min-width: 80px; width: 120px;
+      outline: none; transition: border-color 0.2s;
+      text-align: center;
+    }
+    .blank-input:focus { border-bottom-color: var(--violet); }
+    .blank-input.correct {
+      border-bottom-color: #06D6A0 !important; color: #047857 !important;
+      background: rgba(6,214,160,0.06);
+    }
+    .blank-input.wrong {
+      border-bottom-color: #EF476F !important; color: #be123c !important;
+      background: rgba(239,71,111,0.06);
+    }
+    .fill-blank-actions { margin-top: 16px; }
+    .fill-blank-feedback { margin-top: 12px; font-size: 0.84rem; font-weight: 600; }
+    .fill-blank-feedback.ok  { color: #047857; }
+    .fill-blank-feedback.bad { color: #be123c; }
+
+    /* ── ordering block ── */
+    .block-ordering {
+      background: #fff; border: 1.5px solid rgba(15,23,42,0.08);
+      border-radius: 16px; padding: 20px 22px;
+      box-shadow: 0 2px 8px rgba(15,23,42,0.05);
+    }
+    .ordering-question {
+      font-weight: 700; font-size: 0.95rem; color: #0F172A; margin-bottom: 16px;
+    }
+    .ordering-list {
+      display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px;
+    }
+    .ordering-item {
+      display: flex; align-items: center; gap: 10px;
+      padding: 10px 16px; border: 1.5px solid rgba(15,23,42,0.1); border-radius: 12px;
+      font-size: 0.88rem; font-weight: 600; color: #3D4F6B;
+      background: #fff; cursor: grab; transition: all 0.15s;
+      user-select: none;
+    }
+    .ordering-item:active { cursor: grabbing; }
+    .ordering-item.drag-over {
+      border-color: var(--violet); background: rgba(155,93,229,0.08);
+    }
+    .ordering-item.dragging { opacity: 0.4; }
+    .ordering-grip {
+      color: #8898AA; flex-shrink: 0; display: flex; align-items: center;
+    }
+    .ordering-item.correct {
+      border-color: #06D6A0 !important; background: rgba(6,214,160,0.07) !important; color: #047857 !important;
+    }
+    .ordering-item.wrong {
+      border-color: #EF476F !important; background: rgba(239,71,111,0.07) !important; color: #be123c !important;
+    }
+    .ordering-check-btn {
+      padding: 9px 22px; border: none; border-radius: 999px;
+      background: var(--violet); color: #fff;
+      font-family: 'Manrope', sans-serif; font-size: 0.84rem; font-weight: 700;
+      cursor: pointer; transition: all 0.15s;
+    }
+    .ordering-check-btn:hover { background: #8a47d8; }
+    .ordering-check-btn:disabled { opacity: 0.5; cursor: default; }
+    .ordering-feedback { margin-top: 12px; font-size: 0.84rem; font-weight: 600; }
+    .ordering-feedback.ok  { color: #047857; }
+    .ordering-feedback.bad { color: #be123c; }
+
+    /* ── comments section ── */
+    .comments-section {
+      max-width: 720px; margin: 0 auto; padding: 0 28px 60px;
+    }
+    .comments-title {
+      font-family: 'Unbounded', sans-serif; font-size: 0.88rem; font-weight: 800;
+      color: #0F172A; margin-bottom: 18px; display: flex; align-items: center; gap: 8px;
+      padding-top: 24px; border-top: 1.5px solid rgba(15,23,42,0.07);
+    }
+    .comments-count {
+      font-family: 'Manrope', sans-serif; font-size: 0.72rem; font-weight: 700;
+      color: #8898AA; background: rgba(15,23,42,0.06); padding: 2px 8px; border-radius: 99px;
+    }
+    /* compose */
+    .comment-compose {
+      display: flex; gap: 12px; margin-bottom: 24px; align-items: flex-start;
+    }
+    .comment-avatar {
+      width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 0.72rem; font-weight: 800; color: #fff;
+      background: var(--violet);
+    }
+    .comment-compose-body { flex: 1; }
+    .comment-textarea {
+      width: 100%; min-height: 60px; padding: 10px 14px;
+      border: 1.5px solid rgba(15,23,42,0.12); border-radius: 12px;
+      font-family: 'Manrope', sans-serif; font-size: 0.86rem; color: #1E293B;
+      background: #f8f9fc; resize: vertical; box-sizing: border-box;
+      transition: border-color 0.15s;
+    }
+    .comment-textarea:focus { outline: none; border-color: var(--violet); background: #fff; }
+    .comment-submit-row {
+      display: flex; justify-content: flex-end; margin-top: 8px;
+    }
+    .comment-submit-btn {
+      padding: 7px 18px; border: none; border-radius: 999px;
+      background: var(--violet); color: #fff;
+      font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 700;
+      cursor: pointer; transition: all 0.15s;
+    }
+    .comment-submit-btn:hover { background: #8a47d8; }
+    .comment-submit-btn:disabled { opacity: 0.45; cursor: default; }
+    /* comment items */
+    .comment-list { display: flex; flex-direction: column; gap: 0; }
+    .comment-item {
+      display: flex; gap: 12px; padding: 14px 0;
+      border-bottom: 1px solid rgba(15,23,42,0.06);
+    }
+    .comment-item:last-child { border-bottom: none; }
+    .ci-avatar {
+      width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 0.68rem; font-weight: 800;
+    }
+    .ci-avatar-student { background: rgba(155,93,229,0.12); color: var(--violet); }
+    .ci-avatar-teacher { background: rgba(6,214,160,0.12); color: #059652; }
+    .ci-body { flex: 1; min-width: 0; }
+    .ci-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
+    .ci-name { font-size: 0.82rem; font-weight: 700; color: #0F172A; }
+    .ci-role {
+      font-size: 0.65rem; font-weight: 700; padding: 1px 6px; border-radius: 99px;
+    }
+    .ci-role-teacher { background: rgba(6,214,160,0.12); color: #059652; }
+    .ci-role-admin   { background: rgba(239,71,111,0.1); color: #EF476F; }
+    .ci-time { font-size: 0.7rem; color: #8898AA; }
+    .ci-text { font-size: 0.86rem; line-height: 1.6; color: #3D4F6B; white-space: pre-wrap; word-wrap: break-word; }
+    .ci-actions { display: flex; gap: 12px; margin-top: 6px; }
+    .ci-action-btn {
+      background: none; border: none; font-size: 0.74rem; font-weight: 600;
+      color: #8898AA; cursor: pointer; padding: 0;
+      font-family: 'Manrope', sans-serif; transition: color 0.12s;
+    }
+    .ci-action-btn:hover { color: var(--violet); }
+    .ci-action-btn.danger:hover { color: #EF476F; }
+    /* replies */
+    .ci-replies {
+      margin-top: 10px; margin-left: 0; padding-left: 16px;
+      border-left: 2px solid rgba(155,93,229,0.12);
+    }
+    .ci-replies .comment-item { padding: 10px 0; }
+    .ci-reply-compose {
+      display: flex; gap: 8px; margin-top: 8px; padding-left: 16px;
+      border-left: 2px solid rgba(155,93,229,0.12);
+    }
+    .ci-reply-textarea {
+      flex: 1; min-height: 36px; padding: 8px 12px;
+      border: 1.5px solid rgba(15,23,42,0.12); border-radius: 10px;
+      font-family: 'Manrope', sans-serif; font-size: 0.82rem; color: #1E293B;
+      background: #f8f9fc; resize: none; box-sizing: border-box;
+    }
+    .ci-reply-textarea:focus { outline: none; border-color: var(--violet); }
+    .ci-reply-send {
+      padding: 6px 14px; border: none; border-radius: 999px;
+      background: var(--violet); color: #fff;
+      font-family: 'Manrope', sans-serif; font-size: 0.76rem; font-weight: 700;
+      cursor: pointer; align-self: flex-end; white-space: nowrap;
+    }
+    .ci-reply-send:disabled { opacity: 0.4; }
+    .comments-empty {
+      text-align: center; padding: 28px; color: #8898AA; font-size: 0.84rem;
+    }
+
+    /* ── Mobile responsive ── */
+    @media (max-width: 768px) {
+      /* Topbar */
+      .lesson-topbar { padding: 10px 12px; gap: 8px; }
+      .topbar-read-time { display: none; }
+      .lesson-topbar-title { font-size: 0.72rem; }
+      .lesson-edit-btn span:not([data-lucide]) { display: none; }
+
+      /* Lesson body — tighter padding, smaller heading */
+      .lesson-body { padding: 20px 14px 0; }
+      .lesson-heading-block h1 { font-size: 1.2rem; }
+      .lesson-heading-block { margin-bottom: 24px; }
+
+      /* Nav buttons */
+      .lesson-nav { padding: 20px 14px 0; }
+      .lesson-nav-btn { padding: 12px 12px; font-size: 0.78rem; }
+      .lesson-nav-btn-title { max-width: 110px; }
+
+      /* Sections with 28px padding <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> 14px */
+      .lesson-complete-wrap { padding: 0 14px; }
+      .notes-panel { padding: 0 14px; }
+      .comments-section { padding: 0 14px 60px; }
+
+      /* Matching block: side-by-side <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> stacked */
+      .matching-game { grid-template-columns: 1fr; gap: 10px; }
+
+      /* Sim embed: reduce height */
+      .sim-embed-frame { height: 280px; }
+
+      /* Formula: smaller font */
+      .block-formula { font-size: 0.95rem; }
+
+      /* Code block */
+      .block-code pre { font-size: 0.78rem; padding: 14px 12px; }
+
+      /* Flashcard: smaller min-height */
+      .flashcard-face { min-height: 90px; padding: 18px 16px; font-size: 0.88rem; }
+
+      /* Reply compose on narrow screens */
+      .ci-reply-compose { padding-left: 8px; gap: 6px; }
+      .ci-reply-send { padding: 6px 10px; font-size: 0.72rem; }
+    }
+
+    @media (max-width: 480px) {
+      .lesson-body { padding: 14px 10px 0; }
+      .lesson-nav { padding: 16px 10px 0; }
+      .lesson-complete-wrap, .notes-panel, .comments-section { padding-left: 10px; padding-right: 10px; }
+      .lesson-heading-block h1 { font-size: 1.05rem; }
+      .lesson-nav-btn { padding: 10px 8px; font-size: 0.74rem; }
+      .lesson-nav-btn-title { max-width: 80px; }
+    }
+
+    /* ── Print / PDF ── */
+    @media print {
+      .sidebar, .mob-bar, .sb-backdrop, .notif-drop,
+      .lesson-topbar, .lesson-sidebar-toc, .lesson-nav,
+      .lesson-complete-wrap, .notes-panel, .comments-section,
+      .block-quiz .quiz-opt, .block-quiz .quiz-feedback { break-inside: avoid; }
+
+      .sidebar, .mob-bar, .sb-backdrop, .notif-drop { display: none !important; }
+      .lesson-topbar { display: none !important; }
+      .lesson-sidebar-toc { display: none !important; }
+      .lesson-nav { display: none !important; }
+      .lesson-complete-wrap { display: none !important; }
+      .notes-panel { display: none !important; }
+      .comments-section { display: none !important; }
+
+      .app-layout { display: block !important; }
+      .sb-content { padding: 0 !important; }
+      .lesson-layout { display: block !important; }
+      .lesson-main { padding: 0 !important; }
+      .lesson-body { max-width: none; padding: 0 20px; }
+      .lesson-heading-block { margin-bottom: 24px; }
+
+      .lesson-block { break-inside: avoid; }
+      .block-code pre { white-space: pre-wrap; word-break: break-word; }
+      .block-image img { max-height: 400px; object-fit: contain; }
+
+      body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+    }
+  </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" onclick="toggleSidebar()" 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 active"><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="/hangman"       class="sb-link"><i data-lucide="gamepad-2"  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>
+      <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="toggleNotifDrop()">
+          <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>
+    </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>
+          <span class="sb-logout" style="pointer-events:none">Мой профиль</span>
+        </div>
+      </a>
+    </div>
+  </aside>
+  <div class="notif-drop" id="notif-drop"></div>
+  <div class="sb-content">
+    <div class="lesson-layout">
+
+      <!-- Main lesson content -->
+      <div class="lesson-main" id="lesson-main">
+
+        <!-- Topbar -->
+        <div class="lesson-topbar">
+          <a href="#" id="topbar-back" class="lesson-topbar-back">
+            <i data-lucide="arrow-left" style="width:14px;height:14px"></i>
+            <span id="topbar-course">Курс</span>
+          </a>
+          <div class="lesson-topbar-title" id="topbar-title">Загрузка…</div>
+          <div class="lesson-topbar-actions">
+            <span class="topbar-read-time" id="topbar-read-time" style="display:none">
+              <i data-lucide="clock" style="width:12px;height:12px"></i>
+              <span id="topbar-read-time-val"></span>
+            </span>
+            <button class="lesson-bm-btn" id="btn-bookmark" onclick="toggleBookmark()" title="В закладки">
+              <i data-lucide="bookmark" style="width:14px;height:14px" id="bm-icon"></i>
+            </button>
+            <button class="lesson-edit-btn" id="btn-edit-lesson" style="display:none"
+                    onclick="goToEditor()">
+              <i data-lucide="pencil" style="width:13px;height:13px"></i> Редактировать
+            </button>
+          </div>
+          <div class="lesson-progress-bar-wrap">
+            <div class="lesson-progress-bar-fill" id="read-progress"></div>
+          </div>
+        </div>
+
+        <!-- Body -->
+        <div class="lesson-body" id="lesson-body">
+          <div class="spinner"></div>
+        </div>
+
+        <!-- Complete + Navigation (populated after load) -->
+        <div id="lesson-footer"></div>
+
+        <!-- Comments section -->
+        <div class="comments-section" id="comments-section" style="display:none">
+          <div class="comments-title" id="comments-anchor">
+            <i data-lucide="message-circle" style="width:16px;height:16px;opacity:0.5"></i>
+            Обсуждение
+            <span class="comments-count" id="comments-count">0</span>
+          </div>
+          <div id="comment-compose-wrap"></div>
+          <div class="comment-list" id="comment-list"></div>
+        </div>
+
+      </div><!-- /lesson-main -->
+
+      <!-- TOC sidebar -->
+      <div class="lesson-sidebar-toc" id="toc-sidebar"></div>
+
+    </div><!-- /lesson-layout -->
+  </div><!-- /sb-content -->
+</div><!-- /app-layout -->
+
+<script src="/js/api.js"></script>
+<script>
+  if (!LS.requireAuth()) throw new Error();
+
+  const user = LS.getUser();
+  document.getElementById('nav-user').textContent   = user?.name || user?.email || '';
+  document.getElementById('nav-avatar').textContent =
+    (user?.name || 'LS').split(' ').slice(0,2).map(w => w[0]?.toUpperCase() || '').join('') || 'LS';
+
+  const isTeacher = ['admin','teacher'].includes(user?.role);
+  LS.showBoardIfAllowed();
+  LS.applyRoleSidebar(user);
+  if (isTeacher) {
+    document.getElementById('btn-classes').style.display = '';
+    document.getElementById('btn-admin').style.display   = '';
+    document.getElementById('btn-edit-lesson').style.display = '';
+  }
+  lucide.createIcons();
+
+  /* ── sidebar collapse ── */
+  function toggleSidebar() {
+    const layout = document.querySelector('.app-layout');
+    const collapsed = layout.classList.toggle('sb-collapsed');
+    localStorage.setItem('ls_sb_collapsed', collapsed ? '1' : '');
+    lucide.createIcons();
+  }
+  if (localStorage.getItem('ls_sb_collapsed'))
+    document.querySelector('.app-layout').classList.add('sb-collapsed');
+
+  /* ── notif ── */
+  function toggleNotifDrop() {
+    const btn = document.getElementById('notif-btn');
+    const drop = document.getElementById('notif-drop');
+    const r = btn.getBoundingClientRect();
+    drop.style.left = (r.right + 8) + 'px';
+    drop.style.top  = r.top + 'px';
+    if (drop.classList.toggle('open')) loadNotifs();
+  }
+  async function loadNotifs() {
+    const drop = document.getElementById('notif-drop');
+    drop.innerHTML = '<div class="notif-drop-header"><span class="notif-drop-title">Уведомления</span><button class="notif-read-all" onclick="readAllNotifs()">Прочитать все</button></div><div class="notif-empty">Загрузка…</div>';
+    try {
+      const data = await LS.api('/api/notifications?limit=20');
+      const items = data.items || [];
+      const badge = document.getElementById('notif-badge');
+      const unread = items.filter(n => !n.is_read).length;
+      badge.textContent = unread; badge.style.display = unread ? '' : 'none';
+      if (!items.length) { drop.querySelector('.notif-empty').textContent = 'Нет уведомлений'; return; }
+      drop.innerHTML = '<div class="notif-drop-header"><span class="notif-drop-title">Уведомления</span><button class="notif-read-all" onclick="readAllNotifs()">Прочитать все</button></div>' +
+        items.map(n => `<a class="notif-item${n.is_read ? '' : ' unread'}" href="${LS.safeHref(n.link)}" onclick="markRead(${n.id})">
+          <div class="notif-dot${n.is_read ? ' read' : ''}"></div>
+          <div><div class="notif-msg">${esc(n.message)}</div><div class="notif-time">${fmtTime(n.created_at)}</div></div>
+        </a>`).join('');
+    } catch {}
+  }
+  async function markRead(id) { try { await LS.api('/api/notifications/' + id + '/read', { method:'POST' }); } catch {} }
+  async function readAllNotifs() { try { await LS.api('/api/notifications/read-all', { method:'POST' }); loadNotifs(); } catch {} }
+  document.addEventListener('click', e => {
+    const drop = document.getElementById('notif-drop');
+    if (drop.classList.contains('open') && !drop.contains(e.target) && !document.getElementById('notif-btn').contains(e.target))
+      drop.classList.remove('open');
+  });
+
+  /* ── helpers ── */
+  function escAll(s) { return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
+  function fmtTime(s) {
+    const d = new Date(s && s.includes('T') ? s : (s||'').replace(' ','T')+'Z');
+    const diff = Date.now() - d.getTime();
+    if (diff < 60000) return 'только что';
+    if (diff < 3600000) return Math.floor(diff/60000) + ' мин назад';
+    return d.toLocaleDateString('ru', { day:'numeric', month:'short' });
+  }
+
+  /* ── KaTeX render ── */
+  let _katexQueue = null;
+  window._katexReady = function() {
+    if (_katexQueue) { _renderKatex(_katexQueue); _katexQueue = null; }
+  };
+  function renderMath(el) {
+    if (window.renderMathInElement) {
+      _renderKatex(el);
+    } else {
+      _katexQueue = el;
+    }
+  }
+  function _renderKatex(el) {
+    try {
+      renderMathInElement(el, {
+        delimiters: [
+          { left: '$$', right: '$$', display: true },
+          { left: '$', right: '$', display: false },
+          { left: '\\[', right: '\\]', display: true },
+          { left: '\\(', right: '\\)', display: false },
+        ],
+        throwOnError: false,
+      });
+    } catch {}
+  }
+
+  /* ── read-progress scroll bar ── */
+  function updateReadProgress() {
+    const main = document.getElementById('lesson-main');
+    const scrollTop  = main.scrollTop || document.documentElement.scrollTop;
+    const scrollHeight = (main.scrollHeight || document.documentElement.scrollHeight) - window.innerHeight;
+    const pct = scrollHeight > 0 ? Math.min(100, (scrollTop / scrollHeight) * 100) : 0;
+    document.getElementById('read-progress').style.width = pct + '%';
+  }
+  window.addEventListener('scroll', updateReadProgress, { passive: true });
+
+  /* ── quiz handling ── */
+  function answerQuiz(blockId, optIdx, correctIdx) {
+    const block = document.querySelector(`.block-quiz[data-bid="${blockId}"]`);
+    if (!block || block.dataset.answered) return;
+    block.dataset.answered = '1';
+    const opts = block.querySelectorAll('.quiz-opt');
+    opts.forEach((o, i) => {
+      o.disabled = true;
+      if (i === correctIdx) o.classList.add('correct');
+      if (i === optIdx && optIdx !== correctIdx) o.classList.add('wrong');
+    });
+    const fb = block.querySelector('.quiz-feedback');
+    if (fb) {
+      fb.classList.add('show');
+      if (optIdx === correctIdx) { fb.innerHTML = '<svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg> Верно!'; fb.classList.add('ok'); }
+      else { fb.innerHTML = '<svg class="ic" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg> Неверно. Правильный ответ выделен.'; fb.classList.add('bad'); }
+    }
+  }
+
+  /* ── matching drag-and-drop ── */
+  function initMatchingDnD() {
+    document.querySelectorAll('.block-matching').forEach(block => {
+      if (block.dataset.answered) return;
+      const rightCol = block.querySelector('.matching-right');
+      if (!rightCol) return;
+      const items = rightCol.querySelectorAll('.match-right');
+      items.forEach(item => {
+        item.addEventListener('dragstart', e => {
+          e.dataTransfer.setData('text/plain', '');
+          item.classList.add('dragging');
+        });
+        item.addEventListener('dragend', () => item.classList.remove('dragging'));
+        item.addEventListener('dragover', e => {
+          e.preventDefault();
+          item.classList.add('drag-over');
+        });
+        item.addEventListener('dragleave', () => item.classList.remove('drag-over'));
+        item.addEventListener('drop', e => {
+          e.preventDefault();
+          item.classList.remove('drag-over');
+          const dragging = rightCol.querySelector('.dragging');
+          if (!dragging || dragging === item) return;
+          // swap positions
+          const parent = rightCol;
+          const children = [...parent.children];
+          const fromIdx = children.indexOf(dragging);
+          const toIdx = children.indexOf(item);
+          if (fromIdx < toIdx) {
+            parent.insertBefore(dragging, item.nextSibling);
+          } else {
+            parent.insertBefore(dragging, item);
+          }
+        });
+      });
+    });
+  }
+
+  function checkMatching(bid) {
+    const block = document.querySelector(`.block-matching[data-bid="${bid}"]`);
+    if (!block || block.dataset.answered) return;
+    block.dataset.answered = '1';
+    const rightItems = block.querySelectorAll('.matching-right .match-right');
+    const leftItems = block.querySelectorAll('.matching-left .match-left');
+    let allCorrect = true;
+    rightItems.forEach((item, i) => {
+      const origIdx = parseInt(item.dataset.orig);
+      if (origIdx === i) {
+        item.classList.add('correct');
+        leftItems[i]?.classList.add('correct');
+      } else {
+        item.classList.add('wrong');
+        leftItems[i]?.classList.add('wrong');
+        allCorrect = false;
+      }
+      item.removeAttribute('draggable');
+      item.style.cursor = 'default';
+    });
+    const fb = document.getElementById('mfb-' + bid);
+    if (fb) {
+      fb.className = 'match-feedback ' + (allCorrect ? 'ok' : 'bad');
+      fb.innerHTML = allCorrect ? '<svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg> Все пары верны!' : '<svg class="ic" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg> Есть ошибки. Верные пары выделены зелёным.';
+    }
+    block.querySelector('.match-check-btn').disabled = true;
+  }
+
+  /* ── fill-blank check ── */
+  function checkFillBlanks(bid) {
+    const block = document.querySelector(`.block-fill-blank[data-bid="${bid}"]`);
+    if (!block || block.dataset.answered) return;
+    block.dataset.answered = '1';
+    const inputs = block.querySelectorAll('.blank-input');
+    let allCorrect = true;
+    inputs.forEach(inp => {
+      const expected = inp.dataset.answer.trim().toLowerCase();
+      const given = inp.value.trim().toLowerCase();
+      if (given === expected) {
+        inp.classList.add('correct');
+      } else {
+        inp.classList.add('wrong');
+        allCorrect = false;
+      }
+      inp.disabled = true;
+    });
+    const fb = document.getElementById('ffb-' + bid);
+    if (fb) {
+      fb.className = 'fill-blank-feedback ' + (allCorrect ? 'ok' : 'bad');
+      fb.innerHTML = allCorrect ? '<svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg> Все пропуски заполнены верно!' : '<svg class="ic" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg> Есть ошибки. Верные ответы выделены зелёным.';
+    }
+    block.querySelector('.match-check-btn').disabled = true;
+  }
+
+  /* ── ordering drag-and-drop ── */
+  function initOrderingDnD() {
+    document.querySelectorAll('.block-ordering').forEach(block => {
+      if (block.dataset.answered) return;
+      const list = block.querySelector('.ordering-list');
+      if (!list) return;
+      const items = list.querySelectorAll('.ordering-item');
+      items.forEach(item => {
+        item.addEventListener('dragstart', e => {
+          e.dataTransfer.setData('text/plain', '');
+          item.classList.add('dragging');
+        });
+        item.addEventListener('dragend', () => item.classList.remove('dragging'));
+        item.addEventListener('dragover', e => {
+          e.preventDefault();
+          item.classList.add('drag-over');
+        });
+        item.addEventListener('dragleave', () => item.classList.remove('drag-over'));
+        item.addEventListener('drop', e => {
+          e.preventDefault();
+          item.classList.remove('drag-over');
+          const dragging = list.querySelector('.dragging');
+          if (!dragging || dragging === item) return;
+          const children = [...list.children];
+          const fromIdx = children.indexOf(dragging);
+          const toIdx = children.indexOf(item);
+          if (fromIdx < toIdx) {
+            list.insertBefore(dragging, item.nextSibling);
+          } else {
+            list.insertBefore(dragging, item);
+          }
+        });
+      });
+    });
+  }
+
+  function checkOrdering(bid) {
+    const block = document.querySelector(`.block-ordering[data-bid="${bid}"]`);
+    if (!block || block.dataset.answered) return;
+    block.dataset.answered = '1';
+    const items = block.querySelectorAll('.ordering-item');
+    let allCorrect = true;
+    items.forEach((item, i) => {
+      const origIdx = parseInt(item.dataset.orig);
+      if (origIdx === i) {
+        item.classList.add('correct');
+      } else {
+        item.classList.add('wrong');
+        allCorrect = false;
+      }
+      item.removeAttribute('draggable');
+      item.style.cursor = 'default';
+    });
+    const fb = document.getElementById('ofb-' + bid);
+    if (fb) {
+      fb.className = 'ordering-feedback ' + (allCorrect ? 'ok' : 'bad');
+      fb.innerHTML = allCorrect ? '<svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg> Правильный порядок!' : '<svg class="ic" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg> Порядок неверный. Верные позиции выделены зелёным.';
+    }
+    block.querySelector('.ordering-check-btn').disabled = true;
+  }
+
+  /* ── block renderer ── */
+  function renderBlock(b, idx) {
+    const d = b.data || {};
+    switch (b.type) {
+
+      case 'heading':
+        return `<div class="lesson-block block-heading" id="h${idx}">
+          <h${d.level === 3 ? '3' : '2'}>${esc(d.text || '')}</h${d.level === 3 ? '3' : '2'}>
+        </div>`;
+
+      case 'text':
+        // Split by \n\n into paragraphs
+        return `<div class="lesson-block block-text">
+          ${(d.text || '').split('\n\n').filter(Boolean).map(p =>
+            `<p>${esc(p).replace(/\n/g, '<br>')}</p>`
+          ).join('')}
+        </div>`;
+
+      case 'formula':
+        return `<div class="lesson-block block-formula">
+          ${d.label ? `<div class="block-formula-label">${esc(d.label)}</div>` : ''}
+          <div class="formula-content">$$${d.tex || ''}$$</div>
+        </div>`;
+
+      case 'image':
+        return `<div class="lesson-block block-image">
+          <img src="${escAll(d.url || '')}" alt="${escAll(d.alt || '')}" loading="lazy" />
+          ${d.caption ? `<div class="block-image-caption">${esc(d.caption)}</div>` : ''}
+        </div>`;
+
+      case 'divider':
+        return `<div class="lesson-block block-divider"><hr /></div>`;
+
+      case 'code':
+        return `<div class="lesson-block block-code">
+          <pre><code class="${d.lang ? 'language-'+escAll(d.lang) : ''}">${esc(d.code || '')}</code></pre>
+        </div>`;
+
+      case 'quiz': {
+        const opts = d.options || [];
+        const cIdx = d.correctIndex ?? 0;
+        return `<div class="lesson-block block-quiz" data-bid="${b.id}">
+          <div class="quiz-question">${esc(d.question || 'Вопрос')}</div>
+          <div class="quiz-options">
+            ${opts.map((opt, oi) =>
+              `<button class="quiz-opt" onclick="answerQuiz('${b.id}',${oi},${cIdx})">${esc(opt)}</button>`
+            ).join('')}
+          </div>
+          <div class="quiz-feedback"></div>
+        </div>`;
+      }
+
+      case 'callout': {
+        const style = d.style || 'info';
+        const icons = { info: LS.icon('info',16), warning: LS.icon('warning',16), success: LS.icon('check-circle',16), error: LS.icon('x-close',16) };
+        return `<div class="lesson-block block-callout block-callout-${style}">
+          <span class="callout-icon">${icons[style] || LS.icon('info',16)}</span>
+          <div class="callout-text">${esc(d.text || '')}</div>
+        </div>`;
+      }
+
+      case 'video': {
+        const url = d.url || '';
+        const startSec = d.startSec || 0;
+        let embedUrl = '';
+        // YouTube
+        const ytId = url.match(/(?:youtu\.be\/|[?&]v=|embed\/)([A-Za-z0-9_-]{11})/)?.[1];
+        if (ytId) {
+          const ts = url.match(/[?&](?:t|start)=([^&]+)/);
+          const base = 'https://www.youtube.com/embed/' + ytId;
+          const sec = startSec || (ts ? parseInt(ts[1]) : 0);
+          embedUrl = sec ? base + '?start=' + sec : base;
+        }
+        // Rutube
+        if (!embedUrl) {
+          const rtId = url.match(/rutube\.ru\/(?:video|play\/embed)\/([a-f0-9]+)/i)?.[1];
+          if (rtId) {
+            const ts = url.match(/[?&]t=([^&]+)/);
+            const base = 'https://rutube.ru/play/embed/' + rtId;
+            const sec = startSec || (ts ? parseInt(ts[1]) : 0);
+            embedUrl = sec ? base + '?t=' + sec : base;
+          }
+        }
+        // already embed or direct
+        if (!embedUrl && (url.includes('/embed/') || url.includes('player.'))) embedUrl = url;
+        if (!embedUrl) return `<div class="lesson-block block-sim"><div style="color:#8898AA;font-size:0.84rem">Видео: ${esc(url)}</div></div>`;
+        return `<div class="lesson-block block-video">
+          <iframe src="${esc(embedUrl)}" allowfullscreen loading="lazy"></iframe>
+          ${d.caption ? `<div class="block-video-caption">${esc(d.caption)}</div>` : ''}
+        </div>`;
+      }
+
+      case 'table': {
+        const rows = d.rows || [];
+        const header = d.header || [];
+        let tableHtml = '<table>';
+        if (header.length) {
+          tableHtml += '<thead><tr>' + header.map(c => `<th>${esc(c)}</th>`).join('') + '</tr></thead>';
+        }
+        if (rows.length) {
+          tableHtml += '<tbody>' + rows.map(r =>
+            '<tr>' + (r || []).map(c => `<td>${esc(c)}</td>`).join('') + '</tr>'
+          ).join('') + '</tbody>';
+        }
+        tableHtml += '</table>';
+        return `<div class="lesson-block block-table">${tableHtml}</div>`;
+      }
+
+      case 'flashcard': {
+        const fid = 'fc' + idx;
+        return `<div class="lesson-block block-flashcard">
+          <div class="flashcard-inner" id="${fid}" onclick="document.getElementById('${fid}').classList.toggle('flipped')">
+            <div class="flashcard-face flashcard-front">${esc(d.front || 'Вопрос')}</div>
+            <div class="flashcard-face flashcard-back">${esc(d.back || 'Ответ')}</div>
+          </div>
+          <div class="flashcard-hint"><i data-lucide="refresh-cw" style="width:11px;height:11px"></i> Нажмите, чтобы перевернуть</div>
+        </div>`;
+      }
+
+      case 'sim': {
+        const simId = d.simId || '';
+        const caption = d.caption || '';
+        const embedUrl = simId ? `/lab?sim=${encodeURIComponent(simId)}&embed=1` : '';
+        const fullUrl  = simId ? `/lab?sim=${encodeURIComponent(simId)}` : '/lab';
+        return `<div class="lesson-block block-sim">
+          ${embedUrl
+            ? `<iframe class="sim-embed-frame" src="${embedUrl}" loading="lazy" allow="fullscreen"></iframe>`
+            : `<div style="height:200px;display:flex;align-items:center;justify-content:center;color:#8898AA">Симуляция не указана</div>`}
+          <div class="sim-embed-bar">
+            <span class="sim-caption">${caption ? esc(caption) : (simId ? '<svg class="ic" viewBox="0 0 24 24"><path d="M6 18h8"/><path d="M3 22h18"/><path d="M14 22a7 7 0 1 0 0-14h-1"/><path d="M9 14l2-7"/><path d="M12 14l2-7"/></svg> Интерактивная симуляция' : '')}</span>
+            <a class="sim-fullscreen-btn" href="${fullUrl}" target="_blank">
+              <i data-lucide="maximize-2" style="width:13px;height:13px"></i> На весь экран
+            </a>
+          </div>
+        </div>`;
+      }
+
+      case 'matching': {
+        const pairs = d.pairs || [];
+        // shuffle right side
+        const shuffled = pairs.map((p, i) => ({ right: p.right, _origIdx: i }));
+        for (let i = shuffled.length - 1; i > 0; i--) {
+          const j = Math.floor(Math.random() * (i + 1));
+          [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+        }
+        const bid = b.id || ('mb' + idx);
+        return `<div class="lesson-block block-matching" data-bid="${bid}" data-correct='${JSON.stringify(pairs.map((_,i)=>i))}'>
+          ${d.question ? `<div class="matching-question">${esc(d.question)}</div>` : ''}
+          <div class="matching-game">
+            <div class="matching-left">
+              ${pairs.map((p, i) => `<div class="match-item match-left" data-idx="${i}">${esc(p.left)}</div>`).join('')}
+            </div>
+            <div class="matching-right" id="mr-${bid}">
+              ${shuffled.map(p => `<div class="match-item match-right" draggable="true" data-orig="${p._origIdx}">${esc(p.right)}</div>`).join('')}
+            </div>
+          </div>
+          <button class="match-check-btn" onclick="checkMatching('${bid}')">Проверить</button>
+          <div class="match-feedback" id="mfb-${bid}"></div>
+        </div>`;
+      }
+
+      case 'fill-blank': {
+        const bid = b.id || ('fb' + idx);
+        const txt = d.text || '';
+        let blankIdx = 0;
+        const rendered = esc(txt).replace(/\{([^}]+)\}/g, (_, answer) => {
+          const i = blankIdx++;
+          return `<input class="blank-input" type="text" data-answer="${escAll(answer)}" data-idx="${i}" placeholder="…" autocomplete="off" />`;
+        });
+        return `<div class="lesson-block block-fill-blank" data-bid="${bid}">
+          <div class="fill-blank-text">${rendered}</div>
+          <div class="fill-blank-actions">
+            <button class="match-check-btn" onclick="checkFillBlanks('${bid}')">Проверить</button>
+          </div>
+          <div class="fill-blank-feedback" id="ffb-${bid}"></div>
+        </div>`;
+      }
+
+      case 'ordering': {
+        const items = d.items || [];
+        const bid = b.id || ('ob' + idx);
+        // shuffle
+        const shuffled = items.map((item, i) => ({ text: item, _origIdx: i }));
+        for (let i = shuffled.length - 1; i > 0; i--) {
+          const j = Math.floor(Math.random() * (i + 1));
+          [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+        }
+        return `<div class="lesson-block block-ordering" data-bid="${bid}">
+          ${d.question ? `<div class="ordering-question">${esc(d.question)}</div>` : ''}
+          <div class="ordering-list" id="ol-${bid}">
+            ${shuffled.map(s => `<div class="ordering-item" draggable="true" data-orig="${s._origIdx}">
+              <span class="ordering-grip"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle"><circle cx="9" cy="5" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="9" cy="12" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="19" r="1"/></svg></span>
+              <span>${esc(s.text)}</span>
+            </div>`).join('')}
+          </div>
+          <button class="ordering-check-btn" onclick="checkOrdering('${bid}')">Проверить</button>
+          <div class="ordering-feedback" id="ofb-${bid}"></div>
+        </div>`;
+      }
+
+      case 'accordion': {
+        const bid = b.id || ('acc' + idx);
+        return `<div class="lesson-block block-accordion" id="acc-${bid}">
+          <div class="accordion-header" onclick="this.parentElement.classList.toggle('open')">
+            <span class="accordion-title">${esc(d.title || 'Подробнее…')}</span>
+            <svg class="accordion-chevron" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
+          </div>
+          <div class="accordion-body">${esc(d.content || '')}</div>
+        </div>`;
+      }
+
+      case 'timeline': {
+        const items = Array.isArray(d.items) ? d.items : [];
+        return `<div class="lesson-block block-timeline">
+          <div class="timeline-track">
+            ${items.map((it, i) => `<div class="timeline-entry">
+              <div class="timeline-node">
+                <div class="timeline-dot-v"></div>
+                ${i < items.length - 1 ? '<div class="timeline-line-v"></div>' : ''}
+              </div>
+              <div class="timeline-content">
+                <div class="timeline-date">${esc(it.date || '')}</div>
+                <div class="timeline-event-title">${esc(it.title || '')}</div>
+                ${it.text ? `<div class="timeline-event-text">${esc(it.text)}</div>` : ''}
+              </div>
+            </div>`).join('')}
+          </div>
+        </div>`;
+      }
+
+      case 'diagram': {
+        const bid = b.id || ('dg' + idx);
+        return `<div class="lesson-block block-diagram">
+          <div class="diagram-render" id="diagram-${bid}"><div class="mermaid">${esc(d.code || '')}</div></div>
+          ${d.caption ? `<div class="diagram-caption">${esc(d.caption)}</div>` : ''}
+        </div>`;
+      }
+
+      case 'geogebra': {
+        const mid = d.materialId || '';
+        return `<div class="lesson-block block-geogebra">
+          ${mid ? `<div class="geogebra-embed"><iframe src="https://www.geogebra.org/material/iframe/id/${escAll(mid)}/width/800/height/500/border/888888/sfsb/true/smb/false/stb/false/stbh/false/ai/false/asb/false/sri/false/rc/false/ld/false/sdz/false/ctl/false" allowfullscreen></iframe></div>` : '<div style="text-align:center;padding:20px;color:#8898AA">Не указан ID материала GeoGebra</div>'}
+          ${d.caption ? `<div class="geogebra-caption">${esc(d.caption)}</div>` : ''}
+        </div>`;
+      }
+
+      case 'audio':
+        return `<div class="lesson-block block-audio">
+          ${d.url ? `<audio controls src="${escAll(d.url)}" style="width:100%"></audio>` : ''}
+          ${d.caption ? `<div class="audio-caption">${esc(d.caption)}</div>` : ''}
+        </div>`;
+
+      case 'columns': {
+        const cols = Array.isArray(d.cols) ? d.cols : [];
+        return `<div class="lesson-block block-columns cols-${cols.length}">
+          ${cols.map(c => `<div class="block-col">${c.content || ''}</div>`).join('')}
+        </div>`;
+      }
+
+      case 'alert': {
+        const alertMap = {
+          exam:      { icon: '<svg class="ic" viewBox="0 0 24 24"><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.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>', label: 'К экзамену' },
+          homework:  { icon: '<svg class="ic" viewBox="0 0 24 24"><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" ry="1"/></svg>', label: 'Домашнее задание' },
+          important: { icon: '<svg class="ic" viewBox="0 0 24 24"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>️', label: 'Важно' },
+          tip:       { icon: '<svg class="ic" viewBox="0 0 24 24"><line x1="9" y1="18" x2="15" y2="18"/><line x1="10" y1="22" x2="14" y2="22"/><path d="M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14"/></svg>', label: 'Совет' },
+          celebrate: { icon: '<svg class="ic" viewBox="0 0 24 24"><path d="m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3z"/></svg>', label: 'Поздравление' },
+        };
+        const a = alertMap[d.style] || alertMap.important;
+        return `<div class="lesson-block block-alert block-alert-${d.style || 'important'}">
+          <span class="block-alert-icon">${a.icon}</span>
+          <div>
+            <div class="block-alert-label">${a.label}</div>
+            <div class="block-alert-text">${esc(d.text || '')}</div>
+          </div>
+        </div>`;
+      }
+
+      default:
+        return '';
+    }
+  }
+
+  /* ── TOC builder ── */
+  function buildToc(blocks) {
+    const headings = blocks.filter(b => b.type === 'heading' && b.data?.text);
+    if (headings.length < 2) return;
+    const toc = document.getElementById('toc-sidebar');
+    toc.innerHTML =
+      `<div class="toc-title"><span class="toc-title-bar"></span>Содержание</div>` +
+      headings.map(h => {
+        const idx = blocks.indexOf(h);
+        const cls = h.data.level === 3 ? ' h3' : '';
+        return `<a class="toc-item${cls}" href="#h${idx}">${esc(h.data.text)}</a>`;
+      }).join('');
+
+    // Highlight active section while scrolling
+    const items = toc.querySelectorAll('.toc-item');
+    const headingEls = headings.map(h => document.getElementById('h' + blocks.indexOf(h)));
+    const obs = new IntersectionObserver(entries => {
+      entries.forEach(e => {
+        if (e.isIntersecting) {
+          const id = e.target.id;
+          items.forEach(a => a.classList.toggle('active', a.getAttribute('href') === '#' + id));
+        }
+      });
+    }, { rootMargin: '-8% 0px -78% 0px' });
+    headingEls.forEach(el => { if (el) obs.observe(el); });
+  }
+
+  /* ── load lesson ── */
+  const lessonId = new URLSearchParams(location.search).get('id');
+  if (!lessonId) location.href = '/theory';
+  let lesson = null;
+
+  function goToEditor() {
+    if (lesson) location.href = '/lesson-editor?id=' + lesson.id;
+  }
+
+  /* ── bookmark ── */
+  let _bmId = null;
+  async function checkBookmarkState() {
+    try {
+      const r = await LS.checkBookmark('lesson', lessonId);
+      _bmId = r.id;
+      const btn = document.getElementById('btn-bookmark');
+      if (btn) btn.classList.toggle('active', r.bookmarked);
+    } catch {}
+  }
+  async function toggleBookmark() {
+    const btn = document.getElementById('btn-bookmark');
+    if (!btn) return;
+    try {
+      if (_bmId) {
+        await LS.removeBookmark(_bmId);
+        _bmId = null;
+        btn.classList.remove('active');
+        LS.toast('Убрано из закладок', 'info');
+      } else {
+        const r = await LS.addBookmark('lesson', Number(lessonId));
+        _bmId = r.id;
+        btn.classList.add('active');
+        LS.toast('Добавлено в закладки', 'success');
+      }
+    } catch (e) {
+      if (e.status === 409) { btn.classList.add('active'); LS.toast('Уже в закладках', 'info'); }
+      else LS.toast(e.message || 'Ошибка', 'error');
+    }
+  }
+
+  async function loadLesson() {
+    try {
+      lesson = await LS.api('/api/lessons/' + lessonId);
+    } catch (e) {
+      document.getElementById('lesson-body').innerHTML = '<div style="text-align:center;padding:60px;color:#8898AA">Урок не найден</div>';
+      return;
+    }
+
+    document.title = lesson.title + ' — LearnSpace';
+    document.getElementById('topbar-title').textContent = lesson.title;
+    document.getElementById('topbar-course').textContent = lesson.courseTitle || 'Курс';
+    document.getElementById('topbar-back').href = '/course?id=' + lesson.courseId;
+
+    // Read time
+    if (lesson.readTime > 0) {
+      document.getElementById('topbar-read-time-val').textContent = lesson.readTime + ' мин';
+      document.getElementById('topbar-read-time').style.display = '';
+    }
+
+    // Render blocks
+    const body = document.getElementById('lesson-body');
+    body.innerHTML = `
+      <div class="lesson-heading-block">
+        <div class="lesson-course-crumb">
+          <a href="/course?id=${lesson.courseId}">${esc(lesson.courseTitle || 'Курс')}</a>
+          <i data-lucide="chevron-right" style="width:12px;height:12px;opacity:0.4"></i>
+          <span>${esc(lesson.title)}</span>
+        </div>
+        <h1>${esc(lesson.title)}</h1>
+      </div>
+      ${(lesson.blocks || []).map((b, i) => renderBlock(b, i)).join('')}
+    `;
+    lucide.createIcons();
+
+    // Syntax highlighting
+    if (window.hljs) {
+      document.querySelectorAll('.block-code pre code').forEach(el => hljs.highlightElement(el));
+    }
+
+    // Mermaid diagrams
+    if (window.mermaid) {
+      try { mermaid.run({ nodes: document.querySelectorAll('.mermaid') }); } catch {}
+    }
+
+    // Init drag-and-drop for interactive blocks
+    initMatchingDnD();
+    initOrderingDnD();
+
+    // KaTeX
+    renderMath(body);
+
+    // Notify print hook
+    if (window._onLessonRendered) setTimeout(() => window._onLessonRendered(), 200);
+
+    // TOC
+    buildToc(lesson.blocks || []);
+
+    // Footer
+    const footer = document.getElementById('lesson-footer');
+    const prevBtn = lesson.prev
+      ? `<a class="lesson-nav-btn lesson-nav-btn-prev" href="/lesson?id=${lesson.prev.id}">
+           <i data-lucide="arrow-left" style="width:15px;height:15px;flex-shrink:0"></i>
+           <div><span class="lesson-nav-btn-label">Предыдущий</span><span class="lesson-nav-btn-title">${esc(lesson.prev.title)}</span></div>
+         </a>`
+      : '<div></div>';
+    const nextBtn = lesson.next
+      ? `<a class="lesson-nav-btn lesson-nav-btn-next" href="/lesson?id=${lesson.next.id}">
+           <div style="text-align:right"><span class="lesson-nav-btn-label">Следующий</span><span class="lesson-nav-btn-title">${esc(lesson.next.title)}</span></div>
+           <i data-lucide="arrow-right" style="width:15px;height:15px;flex-shrink:0"></i>
+         </a>`
+      : '<div></div>';
+
+    footer.innerHTML = `
+      <div class="lesson-complete-wrap">
+        <button class="btn-complete${lesson.completed ? ' done' : ''}" id="btn-complete"
+                onclick="markComplete()" ${lesson.completed ? 'disabled' : ''}>
+          <i data-lucide="${lesson.completed ? 'check-circle' : 'check'}" style="width:18px;height:18px"></i>
+          ${lesson.completed ? 'Урок пройден' : 'Отметить как пройденный'}
+        </button>
+      </div>
+      <div class="notes-panel">
+        <button class="notes-toggle" onclick="toggleNotes()">
+          <i data-lucide="pencil-line" style="width:14px;height:14px"></i>
+          Заметки к уроку
+          <i data-lucide="chevron-down" style="width:13px;height:13px" id="notes-chevron"></i>
+        </button>
+        <div class="notes-area-wrap${lesson.note ? ' open' : ''}" id="notes-area-wrap">
+          <textarea class="notes-textarea" id="notes-textarea" placeholder="Запишите свои мысли, ключевые моменты…">${esc(lesson.note || '')}</textarea>
+          <div class="notes-save-row">
+            <span class="notes-saved-lbl" id="notes-saved-lbl"><svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg> Сохранено</span>
+            <button class="notes-save-btn" onclick="saveNote()">Сохранить</button>
+          </div>
+        </div>
+      </div>
+      <div class="lesson-nav">${prevBtn}${nextBtn}</div>
+    `;
+    lucide.createIcons();
+
+    // auto-save notes on input (debounced)
+    let _notesTimer = null;
+    document.getElementById('notes-textarea').addEventListener('input', () => {
+      clearTimeout(_notesTimer);
+      _notesTimer = setTimeout(saveNote, 2000);
+    });
+
+    // Load comments
+    loadComments();
+    // Check bookmark
+    checkBookmarkState();
+  }
+
+  /* ── notes ── */
+  function toggleNotes() {
+    const wrap = document.getElementById('notes-area-wrap');
+    const chevron = document.getElementById('notes-chevron');
+    if (wrap) wrap.classList.toggle('open');
+    if (chevron) chevron.style.transform = wrap?.classList.contains('open') ? 'rotate(180deg)' : '';
+  }
+
+  async function saveNote() {
+    const ta = document.getElementById('notes-textarea');
+    if (!ta || !lessonId) return;
+    const btn = document.querySelector('.notes-save-btn');
+    const lbl = document.getElementById('notes-saved-lbl');
+    if (btn) btn.disabled = true;
+    try {
+      await LS.api('/api/lessons/' + lessonId + '/note', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ text: ta.value }),
+      });
+      if (lbl) { lbl.style.display = ''; setTimeout(() => { if (lbl) lbl.style.display = 'none'; }, 2000); }
+    } catch (e) {
+      LS.toast(e.message || 'Ошибка сохранения', 'error');
+    } finally {
+      if (btn) btn.disabled = false;
+    }
+  }
+
+  /* ── mark complete ── */
+  async function markComplete() {
+    const btn = document.getElementById('btn-complete');
+    if (!btn || btn.disabled) return;
+    btn.disabled = true;
+    try {
+      const res = await LS.api('/api/lessons/' + lessonId + '/complete', { method: 'POST' });
+      btn.className = 'btn-complete done';
+      btn.innerHTML = '<i data-lucide="check-circle" style="width:18px;height:18px"></i> Урок пройден';
+      lucide.createIcons();
+      if (res.courseComplete) {
+        setTimeout(() => LS.toast('Поздравляем! Вы прошли весь курс!', 'success'), 400);
+      }
+    } catch (e) {
+      btn.disabled = false;
+      LS.toast(e.message || 'Ошибка', 'error');
+    }
+  }
+
+  /* ── comments ── */
+  const userInitials = (user?.name || 'LS').split(' ').slice(0,2).map(w => w[0]?.toUpperCase() || '').join('') || 'LS';
+  let _replyingTo = null;
+
+  async function loadComments() {
+    if (!lessonId) return;
+    const section = document.getElementById('comments-section');
+    section.style.display = '';
+
+    // compose box
+    document.getElementById('comment-compose-wrap').innerHTML = `
+      <div class="comment-compose">
+        <div class="comment-avatar">${esc(userInitials)}</div>
+        <div class="comment-compose-body">
+          <textarea class="comment-textarea" id="comment-input" placeholder="Задайте вопрос или оставьте комментарий…"></textarea>
+          <div class="comment-submit-row">
+            <button class="comment-submit-btn" id="comment-send-btn" onclick="submitComment()">Отправить</button>
+          </div>
+        </div>
+      </div>`;
+
+    try {
+      const comments = await LS.api('/api/lessons/' + lessonId + '/comments');
+      const list = document.getElementById('comment-list');
+      const totalCount = comments.reduce((n, c) => n + 1 + (c.replies?.length || 0), 0);
+      document.getElementById('comments-count').textContent = totalCount;
+
+      if (!comments.length) {
+        list.innerHTML = '<div class="comments-empty">Комментариев пока нет. Будьте первым!</div>';
+        return;
+      }
+
+      list.innerHTML = comments.map(c => renderComment(c)).join('');
+      lucide.createIcons();
+    } catch {
+      document.getElementById('comment-list').innerHTML = '';
+    }
+  }
+
+  function renderComment(c) {
+    const initials = (c.userName || '??').split(' ').slice(0,2).map(w => w[0]?.toUpperCase() || '').join('');
+    const avatarCls = ['teacher','admin'].includes(c.userRole) ? 'ci-avatar-teacher' : 'ci-avatar-student';
+    const roleTag = c.userRole === 'teacher' ? '<span class="ci-role ci-role-teacher">Учитель</span>'
+      : c.userRole === 'admin' ? '<span class="ci-role ci-role-admin">Админ</span>' : '';
+    const canDelete = c.userId === user?.id || isTeacher;
+
+    let html = `<div class="comment-item" data-cid="${c.id}">
+      <div class="ci-avatar ${avatarCls}">${esc(initials)}</div>
+      <div class="ci-body">
+        <div class="ci-header">
+          <span class="ci-name">${esc(c.userName)}</span>
+          ${roleTag}
+          <span class="ci-time">${fmtTime(c.createdAt)}</span>
+        </div>
+        <div class="ci-text">${esc(c.text)}</div>
+        <div class="ci-actions">
+          <button class="ci-action-btn" onclick="showReplyBox(${c.id})">Ответить</button>
+          ${canDelete ? `<button class="ci-action-btn danger" onclick="deleteComment(${c.id})">Удалить</button>` : ''}
+        </div>
+        <div id="reply-box-${c.id}"></div>`;
+
+    // replies
+    if (c.replies?.length) {
+      html += `<div class="ci-replies">`;
+      c.replies.forEach(r => {
+        const ri = (r.userName || '??').split(' ').slice(0,2).map(w => w[0]?.toUpperCase() || '').join('');
+        const raCls = ['teacher','admin'].includes(r.userRole) ? 'ci-avatar-teacher' : 'ci-avatar-student';
+        const rRole = r.userRole === 'teacher' ? '<span class="ci-role ci-role-teacher">Учитель</span>'
+          : r.userRole === 'admin' ? '<span class="ci-role ci-role-admin">Админ</span>' : '';
+        const rDel = r.userId === user?.id || isTeacher;
+        html += `<div class="comment-item" data-cid="${r.id}">
+          <div class="ci-avatar ${raCls}" style="width:26px;height:26px;font-size:0.6rem">${esc(ri)}</div>
+          <div class="ci-body">
+            <div class="ci-header">
+              <span class="ci-name">${esc(r.userName)}</span>
+              ${rRole}
+              <span class="ci-time">${fmtTime(r.createdAt)}</span>
+            </div>
+            <div class="ci-text">${esc(r.text)}</div>
+            <div class="ci-actions">
+              ${rDel ? `<button class="ci-action-btn danger" onclick="deleteComment(${r.id})">Удалить</button>` : ''}
+            </div>
+          </div>
+        </div>`;
+      });
+      html += `</div>`;
+    }
+
+    html += `</div></div>`;
+    return html;
+  }
+
+  function showReplyBox(parentId) {
+    // remove any existing reply box
+    const old = document.querySelector('.ci-reply-compose');
+    if (old) old.remove();
+
+    const box = document.getElementById('reply-box-' + parentId);
+    if (!box) return;
+    box.innerHTML = `
+      <div class="ci-reply-compose">
+        <textarea class="ci-reply-textarea" id="reply-input-${parentId}" placeholder="Ваш ответ…"></textarea>
+        <button class="ci-reply-send" onclick="submitReply(${parentId})">Ответить</button>
+      </div>`;
+    document.getElementById('reply-input-' + parentId).focus();
+  }
+
+  async function submitComment() {
+    const input = document.getElementById('comment-input');
+    const text = (input?.value || '').trim();
+    if (!text) return;
+    const btn = document.getElementById('comment-send-btn');
+    btn.disabled = true;
+    try {
+      await LS.api('/api/lessons/' + lessonId + '/comments', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ text }),
+      });
+      input.value = '';
+      loadComments();
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+    finally { btn.disabled = false; }
+  }
+
+  async function submitReply(parentId) {
+    const input = document.getElementById('reply-input-' + parentId);
+    const text = (input?.value || '').trim();
+    if (!text) return;
+    const btn = input.nextElementSibling;
+    if (btn) btn.disabled = true;
+    try {
+      await LS.api('/api/lessons/' + lessonId + '/comments', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ text, parentId }),
+      });
+      loadComments();
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+
+  async function deleteComment(commentId) {
+    const ok = await LS.confirm('Удалить комментарий?', { title: 'Удаление', confirmText: 'Удалить', danger: true });
+    if (!ok) return;
+    try {
+      await LS.api('/api/lessons/' + lessonId + '/comments/' + commentId, { method: 'DELETE' });
+      loadComments();
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+
+  loadLesson();
+
+  // Auto-print when opened with ?print=1 (from editor PDF export)
+  if (new URLSearchParams(location.search).get('print') === '1') {
+    // Wait for content + KaTeX + hljs to render
+    const _origLoad = window._onLessonRendered || null;
+    window._onLessonRendered = () => {
+      if (_origLoad) _origLoad();
+      setTimeout(() => window.print(), 800);
+    };
+    // Fallback if _onLessonRendered isn't called
+    setTimeout(() => window.print(), 3000);
+  }
+</script>
+<script src="/js/notifications.js"></script>
+<script src="/js/search.js"></script>
+<script src="/js/mobile.js"></script>
+</body>
+</html>
diff --git a/frontend/library.html b/frontend/library.html
new file mode 100644
index 0000000..10d89d0
--- /dev/null
+++ b/frontend/library.html
@@ -0,0 +1,1174 @@
+<!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 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" />
+  <style>
+    .btn-upload { padding: 8px 20px; border: none; border-radius: var(--r-pill); background: var(--grad-1); color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: opacity var(--tr); }
+    .btn-upload:hover { opacity: 0.88; }
+
+    .container { max-width: 1100px; margin: 0 auto; padding: 36px 20px 80px; }
+    .page-title { font-family: 'Unbounded', sans-serif; font-size: 1.4rem; font-weight: 800; margin-bottom: 4px; }
+    .page-sub   { font-size: 0.9rem; color: var(--text-2); margin-bottom: 24px; }
+
+    /* ── breadcrumb ── */
+    .lib-bc { display: none; align-items: center; gap: 6px; margin-bottom: 20px; font-size: 0.88rem; }
+    .lib-bc.visible { display: flex; }
+    .lib-bc-link { color: var(--violet); cursor: pointer; font-weight: 600; background: none; border: none; font-family: 'Manrope', sans-serif; font-size: inherit; padding: 0; display: inline-flex; align-items: center; gap: 4px; }
+    .lib-bc-link:hover { text-decoration: underline; }
+    .lib-bc-sep  { color: var(--text-3); font-size: 0.75rem; }
+    .lib-bc-curr { font-weight: 700; color: var(--text); }
+
+    /* toolbar */
+    .toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
+    .t-select { padding: 8px 14px; border: 1.5px solid var(--border-h); border-radius: var(--r-pill); font-family: 'Manrope', sans-serif; font-size: 0.85rem; font-weight: 600; background: var(--surface); color: var(--text); cursor: pointer; }
+    .t-select:focus { outline: none; border-color: var(--violet); }
+    .t-input { padding: 8px 14px; border: 1.5px solid var(--border-h); border-radius: var(--r-pill); font-family: 'Manrope', sans-serif; font-size: 0.85rem; background: var(--surface); color: var(--text); width: 220px; }
+    .t-input:focus { outline: none; border-color: var(--violet); }
+    .t-count { font-size: 0.82rem; color: var(--text-3); margin-left: auto; }
+
+    /* section labels */
+    .section-label {
+      font-family: 'Unbounded', sans-serif; font-size: 0.68rem; font-weight: 700;
+      color: var(--text-3); text-transform: uppercase; letter-spacing: 0.07em;
+      display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
+    }
+    .section-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }
+
+    /* ── folder grid ── */
+    .folder-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
+    .folder-card {
+      display: flex; align-items: center; gap: 10px;
+      padding: 12px 14px 12px 16px;
+      background: var(--surface); backdrop-filter: var(--blur);
+      border: 1.5px solid var(--border); border-radius: 14px;
+      cursor: pointer; transition: all var(--tr);
+      min-width: 160px; max-width: 240px;
+      position: relative;
+    }
+    .folder-card:hover { border-color: var(--violet); box-shadow: var(--shadow); }
+    .folder-card-icon { font-size: 1.3rem; flex-shrink: 0; line-height: 1; }
+    .folder-card-info { flex: 1; min-width: 0; }
+    .folder-card-name { font-size: 0.87rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .folder-card-count { font-size: 0.7rem; color: var(--text-3); margin-top: 1px; }
+    .folder-card-acts { display: none; align-items: center; gap: 2px; flex-shrink: 0; }
+    .folder-card:hover .folder-card-acts { display: flex; }
+    .btn-fol-act {
+      width: 24px; height: 24px; border-radius: 6px; border: none;
+      background: rgba(15,23,42,0.06); color: var(--text-3);
+      cursor: pointer; display: flex; align-items: center; justify-content: center;
+      transition: all var(--tr); padding: 0; flex-shrink: 0;
+    }
+    .btn-fol-act:hover { background: rgba(155,93,229,0.1); color: var(--violet); }
+    .btn-fol-del:hover { background: rgba(241,91,181,0.1) !important; color: var(--pink) !important; }
+    .btn-fol-act svg { width: 12px; height: 12px; stroke-width: 2.2; pointer-events: none; }
+    .folder-locked-badge {
+      position: absolute; top: -5px; right: -5px;
+      width: 16px; height: 16px; border-radius: 50%;
+      background: var(--violet); display: flex; align-items: center; justify-content: center;
+    }
+    .folder-locked-badge svg { width: 9px; height: 9px; stroke: #fff; stroke-width: 2.5; pointer-events: none; }
+
+    /* student picker */
+    .student-pick-list { max-height: 170px; overflow-y: auto; border: 1.5px solid rgba(15,23,42,0.16); border-radius: 10px; background: #f8f9ff; margin-top: 6px; }
+    .student-pick-item { padding: 8px 12px; cursor: pointer; font-size: 0.85rem; transition: background 0.15s; border-bottom: 1px solid rgba(15,23,42,0.05); display: flex; align-items: center; gap: 8px; }
+    .student-pick-item:last-child { border-bottom: none; }
+    .student-pick-item:hover { background: rgba(155,93,229,0.07); }
+    .student-pick-item.sp-selected { background: rgba(155,93,229,0.12); }
+    .sp-check { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(155,93,229,0.3); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
+    .student-pick-item.sp-selected .sp-check { background: var(--violet); border-color: var(--violet); }
+    .student-pick-item.sp-selected .sp-check::after { content: ''; width: 8px; height: 8px; background: #fff; border-radius: 50%; }
+    .sp-info { flex: 1; min-width: 0; }
+    .sp-name  { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .sp-email { font-size: 0.72rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+    /* access status bar */
+    .fa-status-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: 12px; margin-bottom: 18px; gap: 10px; border: 1.5px solid; transition: all 0.2s; }
+    .fa-status-bar.public   { background: rgba(6,214,100,0.07);   border-color: rgba(6,214,100,0.25); }
+    .fa-status-bar.restrict { background: rgba(155,93,229,0.06);  border-color: rgba(155,93,229,0.2); }
+    .fa-status-text { font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; gap: 7px; }
+    .btn-clear-access { padding: 5px 14px; border: 1.5px solid rgba(6,214,100,0.4); border-radius: 99px; background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.78rem; font-weight: 700; color: var(--green); cursor: pointer; white-space: nowrap; transition: all 0.18s; }
+    .btn-clear-access:hover { background: rgba(6,214,100,0.1); }
+
+    /* ── file grid ── */
+    .file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
+    .file-card { background: var(--surface); backdrop-filter: var(--blur); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; display: flex; flex-direction: column; gap: 12px; transition: border-color var(--tr), box-shadow var(--tr); }
+    .file-card:hover { border-color: var(--border-h); box-shadow: var(--shadow); }
+    .file-head { display: flex; align-items: flex-start; gap: 14px; }
+    .file-icon { font-size: 2.2rem; flex-shrink: 0; line-height: 1; }
+    .file-meta { flex: 1; min-width: 0; }
+    .file-title { font-size: 0.95rem; font-weight: 700; line-height: 1.35; margin-bottom: 4px; word-break: break-word; }
+    .file-desc  { font-size: 0.8rem; color: var(--text-3); line-height: 1.45; word-break: break-word; }
+    .file-folder-tag { font-size: 0.7rem; color: var(--text-3); margin-top: 2px; display: flex; align-items: center; gap: 4px; }
+    .file-tags  { display: flex; gap: 6px; flex-wrap: wrap; }
+    .tag { display: inline-block; padding: 2px 9px; border-radius: var(--r-pill); font-size: 0.68rem; font-weight: 700; }
+    .tag-subj   { background: rgba(155,93,229,0.1); color: var(--violet); }
+    .tag-type   { background: rgba(15,23,42,0.06); color: var(--text-3); }
+    .tag-private{ background: rgba(241,91,181,0.1); color: var(--pink); }
+    .tag-public { background: rgba(6,214,100,0.1);  color: var(--green); }
+    .file-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
+    .file-size  { font-size: 0.75rem; color: var(--text-3); }
+    .file-actions { display: flex; gap: 6px; }
+    .btn-dl  { padding: 6px 16px; border: none; border-radius: var(--r-pill); background: var(--grad-1); color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 700; cursor: pointer; text-decoration: none; transition: opacity var(--tr); }
+    .btn-dl:hover { opacity: 0.85; }
+    .btn-del    { padding: 6px 12px; border: 1.5px solid transparent; border-radius: var(--r-pill); background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 600; color: var(--text-3); cursor: pointer; transition: all var(--tr); }
+    .btn-del:hover { border-color: var(--pink); color: var(--pink); }
+    .btn-assign { padding: 6px 12px; border: 1.5px solid transparent; border-radius: var(--r-pill); background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 600; color: var(--text-3); cursor: pointer; transition: all var(--tr); }
+    .btn-assign:hover { border-color: var(--violet); color: var(--violet); }
+    .btn-move   { padding: 6px 12px; border: 1.5px solid transparent; border-radius: var(--r-pill); background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 600; color: var(--text-3); cursor: pointer; transition: all var(--tr); }
+    .btn-move:hover { border-color: var(--cyan); color: #0aa6b0; }
+
+    /* assign modal */
+    .src-toggle { display: flex; gap: 6px; margin-bottom: 16px; }
+    .src-btn { padding: 7px 16px; border: 1.5px solid var(--border-h); border-radius: var(--r-pill); background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 600; color: var(--text-3); cursor: pointer; transition: all 0.18s; }
+    .src-btn.active { border-color: var(--violet); color: var(--violet); background: rgba(155,93,229,0.07); }
+    .assign-list-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
+    .assign-list-item:last-child { border-bottom: none; }
+    .assign-list-name { flex: 1; }
+    .assign-list-type { font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: rgba(155,93,229,0.1); color: var(--violet); }
+    .btn-rm-assign { padding: 4px 10px; border: 1.5px solid transparent; border-radius: 99px; background: transparent; font-size: 0.76rem; font-weight: 600; color: var(--text-3); cursor: pointer; transition: all 0.18s; }
+    .btn-rm-assign:hover { border-color: var(--pink); color: var(--pink); }
+    .uploader { font-size: 0.72rem; color: var(--text-3); }
+
+    .spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--violet); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 60px auto; display: block; }
+    .empty { text-align: center; padding: 60px 20px; color: var(--text-3); }
+    .empty-icon { font-size: 3rem; margin-bottom: 12px; }
+    .empty-text { font-size: 0.9rem; }
+    .error-msg { color: var(--pink); font-size: 0.85rem; text-align: center; padding: 20px; }
+
+    /* modal */
+    .modal-overlay { position: fixed; inset: 0; z-index: 400; display: none; align-items: flex-start; justify-content: center; padding: 40px 20px 60px; background: rgba(15,23,42,0.5); backdrop-filter: blur(10px); overflow-y: auto; }
+    .modal-overlay.open { display: flex; }
+    .modal-box { background: #fff; border-radius: 24px; padding: 36px; width: 100%; max-width: 560px; box-shadow: 0 40px 100px rgba(15,23,42,0.24); }
+    .modal-title { font-family: 'Unbounded', sans-serif; font-size: 1rem; font-weight: 800; margin-bottom: 24px; }
+    .form-row { margin-bottom: 16px; }
+    .form-label { display: block; font-size: 0.72rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
+    .form-ctrl { width: 100%; padding: 10px 14px; border: 1.5px solid rgba(15,23,42,0.16); border-radius: 10px; font-family: 'Manrope', sans-serif; font-size: 0.9rem; color: var(--text); background: #f8f9ff; transition: border-color 0.2s; resize: vertical; }
+    .form-ctrl:focus { outline: none; border-color: var(--violet); background: #fff; }
+    .file-drop { border: 2px dashed rgba(15,23,42,0.18); border-radius: 14px; padding: 32px; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
+    .file-drop:hover, .file-drop.dragover { border-color: var(--violet); background: rgba(155,93,229,0.04); }
+    .file-drop-icon { font-size: 2.5rem; margin-bottom: 8px; }
+    .file-drop-text { font-size: 0.88rem; color: var(--text-3); line-height: 1.5; }
+    .file-drop-name { font-size: 0.88rem; font-weight: 700; color: var(--violet); margin-top: 6px; }
+    .toggle-row { display: flex; align-items: center; gap: 12px; }
+    .toggle-label { font-size: 0.88rem; font-weight: 600; }
+    .toggle { position: relative; width: 44px; height: 24px; }
+    .toggle input { opacity: 0; width: 0; height: 0; }
+    .toggle-track { position: absolute; inset: 0; border-radius: 12px; background: rgba(15,23,42,0.15); transition: background 0.2s; cursor: pointer; }
+    .toggle input:checked + .toggle-track { background: var(--green); }
+    .toggle-track::after { content:''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.2s; }
+    .toggle input:checked + .toggle-track::after { transform: translateX(20px); }
+    .modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; border-top: 1px solid rgba(15,23,42,0.08); padding-top: 20px; }
+    .btn-cancel { padding: 10px 22px; border: 1.5px solid rgba(15,23,42,0.2); border-radius: 999px; background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.88rem; font-weight: 600; color: var(--text-3); cursor: pointer; }
+    .btn-save { padding: 10px 28px; border: none; border-radius: 999px; background: var(--grad-1); color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.88rem; font-weight: 700; cursor: pointer; min-width: 120px; }
+    .btn-save:disabled { opacity: 0.5; cursor: not-allowed; }
+    .form-error { font-size: 0.82rem; color: var(--pink); margin-top: 8px; min-height: 18px; }
+
+    /* ── Mobile responsive ── */
+    @media (max-width: 768px) {
+      .container { padding: 20px 14px 80px; }
+      .file-grid { grid-template-columns: 1fr; gap: 12px; }
+      .folder-grid { gap: 8px; }
+      .folder-card { min-width: 140px; }
+      .t-input { width: 100%; flex: 1 1 140px; }
+      .t-select { flex: 1 1 120px; min-width: 0; }
+      .toolbar { gap: 8px; }
+      .modal-overlay { align-items: flex-end; padding: 0; }
+      .modal-box { border-radius: 22px 22px 0 0; max-height: 90vh; overflow-y: auto; padding: 28px 20px 36px; }
+    }
+    @media (max-width: 480px) {
+      .container { padding: 16px 12px 80px; }
+      .folder-card { max-width: 100%; width: 100%; }
+      .t-select, .t-input { font-size: 16px; }
+      .btn-upload { width: 100%; text-align: center; }
+    }
+  </style>
+  <script src="https://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+</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="sbl-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="sbl-classes" style="display:none"><i data-lucide="graduation-cap" class="sb-icon"></i><span class="sb-lbl">Классы</span></a>
+      <span class="sb-link active"><i data-lucide="book-open" class="sb-icon"></i><span class="sb-lbl">Библиотека</span></span>
+      <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>
+      <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="sbl-admin" style="display:none"><i data-lucide="settings" class="sb-icon"></i><span class="sb-lbl">Управление</span></a>
+    </nav>
+    <div style="padding: 4px 2px">
+      <button class="sb-link" id="btn-upload-nav" style="display:none" onclick="openUpload()">
+        <i data-lucide="upload" class="sb-icon"></i><span class="sb-lbl">Загрузить файл</span>
+      </button>
+    </div>
+    <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>
+    <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>
+          <span class="sb-logout" style="pointer-events:none">Мой профиль</span>
+        </div>
+      </a>
+    </div>
+  </aside>
+  <div class="notif-drop" id="notif-drop"></div>
+  <div class="sb-content">
+
+  <div class="container">
+    <div class="page-title"><i data-lucide="book-open" style="width:22px;height:22px;vertical-align:-4px;margin-right:6px"></i>Библиотека материалов</div>
+    <div class="page-sub">Методички, конспекты, задачники и другие учебные материалы</div>
+
+    <!-- Breadcrumb (shown inside folder) -->
+    <div class="lib-bc" id="lib-bc">
+      <button class="lib-bc-link" onclick="openRoot()">
+        <i data-lucide="book-open" style="width:13px;height:13px"></i> Библиотека
+      </button>
+      <span class="lib-bc-sep">/</span>
+      <span class="lib-bc-curr" id="lib-bc-name"></span>
+    </div>
+
+    <!-- Toolbar -->
+    <div class="toolbar">
+      <select class="t-select" id="f-subject" onchange="loadAll()">
+        <option value="">Все предметы</option>
+        <option value="bio">Биология</option>
+        <option value="chem">Химия</option>
+        <option value="math">Математика</option>
+        <option value="phys">Физика</option>
+        <option value="other">Другое</option>
+      </select>
+      <select class="t-select" id="f-type" onchange="render()">
+        <option value="">Все форматы</option>
+        <option value="pdf">PDF</option>
+        <option value="image">Изображения</option>
+        <option value="doc">Word / PPT</option>
+      </select>
+      <input class="t-input" id="f-search" type="text" placeholder="Поиск по названию…" oninput="render()" />
+      <span class="t-count" id="f-count"></span>
+      <button class="btn-upload" id="btn-new-folder" style="display:none;background:rgba(155,93,229,0.1);color:var(--violet);border:1.5px solid rgba(155,93,229,0.2)" onclick="openFolderModal()">
+        <i data-lucide="folder-plus" style="width:13px;height:13px;vertical-align:-2px"></i> Папка
+      </button>
+      <button class="btn-upload" id="btn-upload-main" style="display:none" onclick="openUpload()">
+        <i data-lucide="upload" style="width:13px;height:13px;vertical-align:-2px"></i> Загрузить
+      </button>
+    </div>
+
+    <!-- Folders section (hidden inside a folder) -->
+    <div id="folders-section">
+      <div class="section-label" id="folders-label" style="display:none">Папки</div>
+      <div class="folder-grid" id="folder-grid"></div>
+    </div>
+
+    <!-- Files section -->
+    <div class="section-label" id="files-label" style="display:none">Файлы</div>
+    <div id="f-grid"><div class="spinner"></div></div>
+  </div>
+
+  <!-- ─── Folder Modal (create / rename) ─────────────────────────────── -->
+  <div class="modal-overlay" id="folder-modal" onclick="if(event.target===this)closeFolderModal()">
+    <div class="modal-box" style="max-width:420px">
+      <div class="modal-title" id="fm-title">Новая папка</div>
+      <div class="form-row">
+        <label class="form-label">Название папки</label>
+        <input type="text" class="form-ctrl" id="fm-name" placeholder="Например: Биология 10 класс" maxlength="80" />
+      </div>
+      <div class="form-error" id="fm-error"></div>
+      <div class="modal-footer">
+        <button class="btn-cancel" onclick="closeFolderModal()">Отмена</button>
+        <button class="btn-save" id="fm-save" onclick="saveFolderModal()">Создать</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- ─── Move File Modal ─────────────────────────────────────────────── -->
+  <div class="modal-overlay" id="move-modal" onclick="if(event.target===this)closeMoveModal()">
+    <div class="modal-box" style="max-width:400px">
+      <div class="modal-title">Переместить файл</div>
+      <div class="form-row">
+        <label class="form-label">Папка назначения</label>
+        <select class="form-ctrl" id="mv-folder">
+          <option value="">— Корневая папка —</option>
+        </select>
+      </div>
+      <div class="form-error" id="mv-error"></div>
+      <div class="modal-footer">
+        <button class="btn-cancel" onclick="closeMoveModal()">Отмена</button>
+        <button class="btn-save" id="mv-save" onclick="doMoveFile()">Переместить</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- ─── Folder Access Modal ─────────────────────────────────────────── -->
+  <div class="modal-overlay" id="folder-access-modal" onclick="if(event.target===this)closeFolderAccess()">
+    <div class="modal-box">
+      <div class="modal-title">
+        <i data-lucide="lock" style="width:16px;height:16px;vertical-align:-3px;margin-right:6px"></i>Доступ:
+        <span id="fa-folder-name" style="color:var(--violet)"></span>
+      </div>
+
+      <!-- Status bar -->
+      <div class="fa-status-bar public" id="fa-status-bar">
+        <div class="fa-status-text" id="fa-status-text">
+          <span style="color:var(--green)"><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="currentColor" stroke="none"/></svg></span> Открыта всем
+        </div>
+        <button class="btn-clear-access" id="fa-clear-btn" style="display:none" onclick="doClearFolderAccess()">
+          <i data-lucide="unlock" style="width:11px;height:11px;vertical-align:-1px"></i> Открыть всем
+        </button>
+      </div>
+
+      <!-- Add access section -->
+      <div style="font-size:0.72rem;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px">Добавить доступ</div>
+
+      <div class="src-toggle">
+        <button class="src-btn active" id="fasrc-class" onclick="setFolderAccessType('class')">
+          <i data-lucide="users" style="width:13px;height:13px;vertical-align:-2px"></i> Классу
+        </button>
+        <button class="src-btn" id="fasrc-user" onclick="setFolderAccessType('user')">
+          <i data-lucide="user" style="width:13px;height:13px;vertical-align:-2px"></i> Ученику
+        </button>
+      </div>
+
+      <div id="fa-class-block">
+        <div class="form-row">
+          <label class="form-label">Выберите класс</label>
+          <select class="form-ctrl" id="fa-class-sel"></select>
+        </div>
+      </div>
+
+      <div id="fa-user-block" style="display:none">
+        <div class="form-row">
+          <label class="form-label">Поиск ученика</label>
+          <input type="text" class="form-ctrl" id="fa-student-filter" placeholder="Имя или email…" oninput="filterStudentList()" autocomplete="off" />
+          <div class="student-pick-list" id="fa-student-list">
+            <div style="padding:12px;font-size:0.82rem;color:var(--text-3);text-align:center">Загрузка…</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="form-error" id="fa-error"></div>
+      <div class="modal-footer">
+        <button class="btn-cancel" onclick="closeFolderAccess()">Закрыть</button>
+        <button class="btn-save" id="fa-save" onclick="doFolderAssign()">Добавить</button>
+      </div>
+
+      <!-- Current access list -->
+      <div style="margin-top:20px;border-top:1px solid rgba(15,23,42,0.08);padding-top:16px">
+        <div style="font-size:0.72rem;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px">Текущий доступ</div>
+        <div id="fa-current"></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- ─── Assign Modal ─────────────────────────────────────────────────── -->
+  <div class="modal-overlay" id="assign-modal" onclick="if(event.target===this)closeAssign()">
+    <div class="modal-box">
+      <div class="modal-title">Назначить доступ к файлу</div>
+
+      <div class="src-toggle">
+        <button class="src-btn active" id="asrc-class" onclick="setAssignType('class')"><i data-lucide="users" style="width:13px;height:13px;vertical-align:-2px"></i> Классу</button>
+        <button class="src-btn" id="asrc-user" onclick="setAssignType('user')"><i data-lucide="user" style="width:13px;height:13px;vertical-align:-2px"></i> Ученику</button>
+      </div>
+
+      <div id="assign-class-block">
+        <div class="form-row">
+          <label class="form-label">Выберите класс</label>
+          <select class="form-ctrl" id="assign-class-sel"></select>
+        </div>
+      </div>
+
+      <div id="assign-user-block" style="display:none">
+        <div class="form-row">
+          <label class="form-label">Email ученика</label>
+          <input type="email" class="form-ctrl" id="assign-email" placeholder="student@example.com" />
+        </div>
+      </div>
+
+      <div class="form-error" id="assign-error"></div>
+      <div class="modal-footer">
+        <button class="btn-cancel" onclick="closeAssign()">Закрыть</button>
+        <button class="btn-save" id="assign-save" onclick="doAssign()">Назначить</button>
+      </div>
+
+      <div style="margin-top:20px;border-top:1px solid rgba(15,23,42,0.08);padding-top:16px">
+        <div style="font-size:0.72rem;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px">Текущий доступ</div>
+        <div id="assign-current"></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- ─── Upload Modal ─────────────────────────────────────────────────── -->
+  <div class="modal-overlay" id="upload-modal" onclick="if(event.target===this)closeUpload()">
+    <div class="modal-box">
+      <div class="modal-title">Загрузить материал</div>
+
+      <div class="file-drop" id="drop-zone" onclick="document.getElementById('file-input').click()"
+           ondragover="event.preventDefault();this.classList.add('dragover')"
+           ondragleave="this.classList.remove('dragover')"
+           ondrop="onDrop(event)">
+        <div class="file-drop-icon"><i data-lucide="upload-cloud" style="width:40px;height:40px;stroke:var(--violet);stroke-width:1.4"></i></div>
+        <div class="file-drop-text">Нажмите или перетащите файл сюда<br><small>PDF, Word, PPT, Excel, изображения · до 50 МБ</small></div>
+        <div class="file-drop-name" id="drop-name" style="display:none"></div>
+        <input type="file" id="file-input" style="display:none" accept=".pdf,.doc,.docx,.ppt,.pptx,.xls,.xlsx,.png,.jpg,.jpeg,.gif,.webp,.txt" onchange="onFileSelect(this)" />
+      </div>
+
+      <div class="form-row" style="margin-top:18px">
+        <label class="form-label">Название *</label>
+        <input type="text" class="form-ctrl" id="uf-title" placeholder="Например: Конспект — Клетка и её строение" />
+      </div>
+
+      <div class="form-row">
+        <label class="form-label">Описание</label>
+        <textarea class="form-ctrl" id="uf-desc" rows="2" placeholder="Краткое описание содержимого…"></textarea>
+      </div>
+
+      <div class="form-row">
+        <label class="form-label">Предмет</label>
+        <select class="form-ctrl" id="uf-subject">
+          <option value="">Без предмета</option>
+          <option value="bio">Биология</option>
+          <option value="chem">Химия</option>
+          <option value="math">Математика</option>
+          <option value="phys">Физика</option>
+          <option value="other">Другое</option>
+        </select>
+      </div>
+
+      <div class="form-row">
+        <label class="form-label">Папка</label>
+        <select class="form-ctrl" id="uf-folder">
+          <option value="">— Корневая папка —</option>
+        </select>
+      </div>
+
+      <div class="form-row">
+        <div class="toggle-row">
+          <label class="toggle">
+            <input type="checkbox" id="uf-public" checked />
+            <span class="toggle-track"></span>
+          </label>
+          <span class="toggle-label">Доступен всем</span>
+          <span style="font-size:0.78rem;color:var(--text-3)">(снимите галочку — только учителя/администратор)</span>
+        </div>
+      </div>
+
+      <div class="form-error" id="uf-error"></div>
+      <div class="modal-footer">
+        <button class="btn-cancel" onclick="closeUpload()">Отмена</button>
+        <button class="btn-save" id="uf-save" onclick="doUpload()">Загрузить</button>
+      </div>
+    </div>
+  </div>
+
+  <script src="/js/api.js"></script>
+  <script src="/js/notifications.js"></script>
+  <script src="/js/search.js"></script>
+  <script src="/js/mobile.js"></script>
+  <script>
+    const { user, isTeacher, isAdmin } = LS.initPage();
+
+    LS.showBoardIfAllowed();
+    if (isTeacher) {
+      document.getElementById('btn-upload-nav').style.display = '';
+      document.getElementById('btn-upload-main').style.display = '';
+      document.getElementById('btn-new-folder').style.display = '';
+      document.getElementById('sbl-classes').style.display = '';
+      document.getElementById('sbl-admin').style.display = '';
+    }
+
+    /* ── constants ── */
+    const SUBJ_NAMES = { bio:'Биология', chem:'Химия', math:'Математика', phys:'Физика', other:'Другое' };
+    const TYPE_ICONS = {
+      'application/pdf': 'file-text',
+      'image/png':'image','image/jpeg':'image','image/gif':'image','image/webp':'image',
+      'application/msword':'file-type-2',
+      'application/vnd.openxmlformats-officedocument.wordprocessingml.document':'file-type-2',
+      'application/vnd.ms-powerpoint':'presentation',
+      'application/vnd.openxmlformats-officedocument.presentationml.presentation':'presentation',
+      'application/vnd.ms-excel':'table-2',
+      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':'table-2',
+      'text/plain':'file',
+    };
+    const TYPE_LABELS = {
+      'application/pdf':'PDF',
+      'image/png':'PNG','image/jpeg':'JPEG','image/gif':'GIF','image/webp':'WebP',
+      'application/msword':'Word','application/vnd.openxmlformats-officedocument.wordprocessingml.document':'Word',
+      'application/vnd.ms-powerpoint':'PPT','application/vnd.openxmlformats-officedocument.presentationml.presentation':'PPT',
+      'application/vnd.ms-excel':'Excel','application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':'Excel',
+      'text/plain':'TXT',
+    };
+
+    function typeIcon(mime) {
+      const name = TYPE_ICONS[mime] || 'file';
+      return `<i data-lucide="${name}" style="width:28px;height:28px;stroke:var(--violet);stroke-width:1.5"></i>`;
+    }
+    function typeGroup(mime) {
+      if (!mime) return 'other';
+      if (mime === 'application/pdf') return 'pdf';
+      if (mime.startsWith('image/')) return 'image';
+      if (mime.includes('word') || mime.includes('presentation') || mime.includes('sheet') || mime.includes('powerpoint') || mime.includes('excel')) return 'doc';
+      return 'other';
+    }
+    function fmtSize(bytes) {
+      if (!bytes) return '';
+      if (bytes < 1024) return bytes + ' Б';
+      if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(0) + ' КБ';
+      return (bytes / 1024 / 1024).toFixed(1) + ' МБ';
+    }
+    function fmtDate(d) { return new Date(d).toLocaleDateString('ru',{day:'numeric',month:'short',year:'numeric'}); }
+
+    /* ── state ── */
+    let allFiles   = [];
+    let allFolders = [];
+    let currentFolder = null; // null = root view
+
+    /* ── load ── */
+    async function loadAll() {
+      document.getElementById('f-grid').innerHTML = '<div class="spinner"></div>';
+      document.getElementById('folder-grid').innerHTML = '';
+      try {
+        const subject = document.getElementById('f-subject').value || undefined;
+        [allFiles, allFolders] = await Promise.all([
+          LS.getFiles({ subject }),
+          LS.getFolders(),
+        ]);
+        render();
+      } catch (e) {
+        document.getElementById('f-grid').innerHTML = `<div class="error-msg">Ошибка загрузки: ${esc(e.message)}</div>`;
+      }
+    }
+
+    /* ── navigation ── */
+    function openFolder(id, name) {
+      currentFolder = id;
+      document.getElementById('lib-bc').classList.add('visible');
+      document.getElementById('lib-bc-name').textContent = name;
+      document.getElementById('folders-section').style.display = 'none';
+      document.getElementById('files-label').style.display = '';
+      render();
+    }
+
+    function openRoot() {
+      currentFolder = null;
+      document.getElementById('lib-bc').classList.remove('visible');
+      document.getElementById('folders-section').style.display = '';
+      render();
+    }
+
+    /* ── render ── */
+    function render() {
+      renderFolders();
+      renderFiles();
+    }
+
+    function renderFolders() {
+      if (currentFolder !== null) return; // inside folder — don't show folder grid
+
+      const search = document.getElementById('f-search').value.toLowerCase();
+      const subject = document.getElementById('f-subject').value;
+
+      // Count files per folder (respecting subject filter)
+      const foldersWithCount = allFolders.map(fo => {
+        const count = allFiles.filter(f => {
+          if (f.folder_id !== fo.id) return false;
+          if (subject && f.subject_slug !== subject) return false;
+          return true;
+        }).length;
+        return { ...fo, count };
+      });
+
+      const grid = document.getElementById('folder-grid');
+      const label = document.getElementById('folders-label');
+
+      if (!foldersWithCount.length) {
+        grid.innerHTML = '';
+        label.style.display = 'none';
+        return;
+      }
+
+      label.style.display = '';
+
+      // Highlight matching folders when searching
+      const visibleFolders = search
+        ? foldersWithCount.filter(fo => fo.name.toLowerCase().includes(search) || fo.count > 0)
+        : foldersWithCount;
+
+      if (!visibleFolders.length) { grid.innerHTML = ''; label.style.display = 'none'; return; }
+
+      label.style.display = '';
+      grid.innerHTML = visibleFolders.map(fo => `
+        <div class="folder-card stagger-item" style="--i:${visibleFolders.indexOf(fo)}" onclick="openFolder(${fo.id}, '${esc(fo.name).replace(/'/g,"\\'")}')">
+          <div class="folder-card-icon">
+            <i data-lucide="folder" style="width:22px;height:22px;stroke:var(--amber);stroke-width:1.6;fill:rgba(255,179,71,0.15)"></i>
+          </div>
+          <div class="folder-card-info">
+            <div class="folder-card-name">${esc(fo.name)}</div>
+            <div class="folder-card-count">${fo.count} ${pluralFiles(fo.count)}</div>
+          </div>
+              ${isTeacher ? `
+          <div class="folder-card-acts" onclick="event.stopPropagation()">
+            <button class="btn-fol-act" title="Управление доступом" onclick="openFolderAccess(${fo.id}, '${esc(fo.name).replace(/'/g,"\\'")}')">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+            </button>
+            <button class="btn-fol-act" title="Переименовать" onclick="openRenameFolder(${fo.id}, '${esc(fo.name).replace(/'/g,"\\'")}')">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
+            </button>
+            <button class="btn-fol-act btn-fol-del" title="Удалить папку" onclick="doDeleteFolder(${fo.id}, '${esc(fo.name).replace(/'/g,"\\'")}')">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6M14 11v6"/><path d="M9 6V4h6v2"/></svg>
+            </button>
+          </div>
+          ${fo.access_count > 0 ? `<div class="folder-locked-badge" title="Ограниченный доступ"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></div>` : ''}
+          ` : ''}
+        </div>`).join('');
+      if (window.lucide) lucide.createIcons();
+    }
+
+    function pluralFiles(n) {
+      if (n % 10 === 1 && n % 100 !== 11) return 'файл';
+      if ([2,3,4].includes(n % 10) && ![12,13,14].includes(n % 100)) return 'файла';
+      return 'файлов';
+    }
+
+    function renderFiles() {
+      const typeF   = document.getElementById('f-type').value;
+      const searchF = document.getElementById('f-search').value.toLowerCase();
+      const subject = document.getElementById('f-subject').value;
+
+      let filtered = allFiles.filter(f => {
+        // folder filter
+        if (currentFolder !== null && f.folder_id !== currentFolder) return false;
+        if (currentFolder === null && searchF === '' && f.folder_id !== null) return false; // root: hide filed files (show them in folder), unless searching
+        // type filter
+        if (typeF && typeGroup(f.mimetype) !== typeF) return false;
+        // search
+        if (searchF && !f.title.toLowerCase().includes(searchF) && !(f.description||'').toLowerCase().includes(searchF)) return false;
+        return true;
+      });
+
+      // When searching globally, show all matching files regardless of folder
+      if (searchF && currentFolder === null) {
+        filtered = allFiles.filter(f => {
+          if (subject && f.subject_slug !== subject) return false;
+          if (typeF && typeGroup(f.mimetype) !== typeF) return false;
+          if (!f.title.toLowerCase().includes(searchF) && !(f.description||'').toLowerCase().includes(searchF)) return false;
+          return true;
+        });
+      }
+
+      const filesLabel = document.getElementById('files-label');
+      if (currentFolder !== null || searchF) {
+        filesLabel.style.display = filtered.length ? '' : 'none';
+      } else {
+        filesLabel.style.display = filtered.length ? '' : 'none';
+      }
+
+      document.getElementById('f-count').textContent = filtered.length ? `${filtered.length} ${pluralFiles(filtered.length)}` : '';
+
+      if (!filtered.length) {
+        const emptyText = isTeacher && currentFolder === null
+          ? 'Материалов не найдено<br><button class="btn-upload" style="margin-top:16px" onclick="openUpload()">Загрузить первый</button>'
+          : currentFolder !== null ? 'Папка пуста' : 'Нет доступных материалов';
+        document.getElementById('f-grid').innerHTML = `
+          <div class="empty">
+            <div class="empty-icon"><i data-lucide="inbox" style="width:48px;height:48px;stroke:var(--text-3);stroke-width:1.2"></i></div>
+            <div class="empty-text">${emptyText}</div>
+          </div>`;
+        if (window.lucide) lucide.createIcons();
+        return;
+      }
+
+      document.getElementById('f-grid').innerHTML = `<div class="file-grid">${filtered.map((f, idx) => {
+        const icon  = typeIcon(f.mimetype);
+        const label = TYPE_LABELS[f.mimetype] || 'Файл';
+        const folderName = f.folder_id ? (allFolders.find(fo => fo.id === f.folder_id)?.name || '') : '';
+        return `<div class="file-card stagger-item" style="--i:${idx}">
+          <div class="file-head">
+            <div class="file-icon">${icon}</div>
+            <div class="file-meta">
+              <div class="file-title">${esc(f.title)}</div>
+              ${f.description ? `<div class="file-desc">${esc(f.description)}</div>` : ''}
+              ${searchF && folderName && currentFolder === null ? `<div class="file-folder-tag"><i data-lucide="folder" style="width:10px;height:10px;stroke:var(--amber);stroke-width:2"></i> ${esc(folderName)}</div>` : ''}
+            </div>
+          </div>
+          <div class="file-tags">
+            ${f.subject_slug ? `<span class="tag tag-subj">${SUBJ_NAMES[f.subject_slug]||f.subject_slug}</span>` : ''}
+            <span class="tag tag-type">${label}</span>
+            <span class="tag ${f.is_public ? 'tag-public' : 'tag-private'}">${f.is_public ? '<i data-lucide="globe" style="width:10px;height:10px;vertical-align:-1px"></i> Публичный' : '<i data-lucide="lock" style="width:10px;height:10px;vertical-align:-1px"></i> Приватный'}</span>
+          </div>
+          <div class="file-footer">
+            <div>
+              <div class="file-size">${fmtSize(f.size)} · ${fmtDate(f.created_at)}</div>
+              <div class="uploader">Загрузил: ${esc(f.uploader_name)}</div>
+            </div>
+            <div class="file-actions">
+              <a class="btn-dl" href="${LS.downloadFileUrl(f.id)}" target="_blank" download="${esc(f.original_name)}"><i data-lucide="external-link" style="width:12px;height:12px;vertical-align:-1px"></i> Открыть</a>
+              ${isTeacher ? `<button class="btn-move" onclick="openMoveModal(${f.id})" title="Переместить в папку"><i data-lucide="folder-open" style="width:13px;height:13px"></i></button>` : ''}
+              ${isTeacher ? `<button class="btn-assign" onclick="openAssign(${f.id})" title="Назначить"><i data-lucide="send" style="width:13px;height:13px"></i></button>` : ''}
+              ${isTeacher ? `<button class="btn-del" onclick="deleteF(${f.id}, '${esc(f.title).replace(/'/g,"\\'")}')"><i data-lucide="x" style="width:13px;height:13px"></i></button>` : ''}
+            </div>
+          </div>
+        </div>`;
+      }).join('')}</div>`;
+      if (window.lucide) lucide.createIcons();
+    }
+
+    async function deleteF(id, title) {
+      if (!await LS.confirm(`Удалить файл «${title}»?`, { title: 'Удалить файл', confirmText: 'Удалить' })) return;
+      try {
+        await LS.deleteFile(id);
+        allFiles = allFiles.filter(f => f.id !== id);
+        render();
+      } catch (e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+    }
+
+    /* ─── Folder modal (create / rename) ─── */
+    let _editingFolderId = null;
+
+    function openFolderModal() {
+      _editingFolderId = null;
+      document.getElementById('fm-title').textContent = 'Новая папка';
+      document.getElementById('fm-save').textContent  = 'Создать';
+      document.getElementById('fm-name').value = '';
+      document.getElementById('fm-error').textContent = '';
+      document.getElementById('folder-modal').classList.add('open');
+      setTimeout(() => document.getElementById('fm-name').focus(), 80);
+    }
+
+    function openRenameFolder(id, name) {
+      _editingFolderId = id;
+      document.getElementById('fm-title').textContent = 'Переименовать папку';
+      document.getElementById('fm-save').textContent  = 'Сохранить';
+      document.getElementById('fm-name').value = name;
+      document.getElementById('fm-error').textContent = '';
+      document.getElementById('folder-modal').classList.add('open');
+      setTimeout(() => { const n = document.getElementById('fm-name'); n.focus(); n.select(); }, 80);
+    }
+
+    function closeFolderModal() {
+      document.getElementById('folder-modal').classList.remove('open');
+    }
+
+    async function saveFolderModal() {
+      const name = document.getElementById('fm-name').value.trim();
+      const errEl = document.getElementById('fm-error');
+      errEl.textContent = '';
+      if (!name) { errEl.textContent = 'Введите название папки'; return; }
+
+      const btn = document.getElementById('fm-save');
+      btn.disabled = true;
+      try {
+        if (_editingFolderId) {
+          await LS.renameFolder(_editingFolderId, name);
+          const fo = allFolders.find(f => f.id === _editingFolderId);
+          if (fo) fo.name = name;
+          // update breadcrumb if we're inside this folder
+          if (currentFolder === _editingFolderId) {
+            document.getElementById('lib-bc-name').textContent = name;
+          }
+        } else {
+          const { id } = await LS.createFolder(name);
+          allFolders.push({ id, name, file_count: 0 });
+        }
+        closeFolderModal();
+        render();
+      } catch (e) {
+        errEl.textContent = e.message;
+      } finally {
+        btn.disabled = false;
+      }
+    }
+
+    // Allow Enter key in folder name input
+    document.addEventListener('DOMContentLoaded', () => {
+      document.getElementById('fm-name').addEventListener('keydown', e => {
+        if (e.key === 'Enter') saveFolderModal();
+      });
+    });
+
+    async function doDeleteFolder(id, name) {
+      if (!await LS.confirm(`Удалить папку «${name}»? Файлы внутри переместятся в корневую папку.`, { title: 'Удалить папку', confirmText: 'Удалить' })) return;
+      try {
+        await LS.deleteFolder(id);
+        allFolders = allFolders.filter(f => f.id !== id);
+        allFiles.forEach(f => { if (f.folder_id === id) f.folder_id = null; });
+        if (currentFolder === id) openRoot();
+        else render();
+      } catch (e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+    }
+
+    /* ─── Folder Access ─── */
+    let _folderAccessId = null, _folderAccessType = 'class';
+    let _folderClasses = [], _allStudents = [], _selectedStudentId = null;
+
+    async function openFolderAccess(folderId, folderName) {
+      _folderAccessId   = folderId;
+      _selectedStudentId = null;
+      document.getElementById('fa-folder-name').textContent = folderName;
+      document.getElementById('fa-error').textContent = '';
+      document.getElementById('fa-student-filter').value = '';
+      setFolderAccessType('class');
+      document.getElementById('folder-access-modal').classList.add('open');
+
+      // Load classes + students in parallel
+      try {
+        const [classes, students] = await Promise.all([
+          LS.getClasses(),
+          _allStudents.length ? Promise.resolve(_allStudents) : LS.getStudentsList(),
+        ]);
+        _folderClasses = classes;
+        if (!_allStudents.length) _allStudents = students.slice().sort((a, b) => a.name.localeCompare(b.name, 'ru'));
+
+        const sel = document.getElementById('fa-class-sel');
+        sel.innerHTML = _folderClasses.length
+          ? _folderClasses.map(c => `<option value="${c.id}">${esc(c.name)}</option>`).join('')
+          : '<option value="">Нет доступных классов</option>';
+
+        renderStudentList(_allStudents);
+      } catch {}
+
+      renderFolderAccessCurrent(folderId);
+    }
+
+    function closeFolderAccess() {
+      document.getElementById('folder-access-modal').classList.remove('open');
+    }
+
+    function setFolderAccessType(t) {
+      _folderAccessType = t;
+      document.getElementById('fasrc-class').classList.toggle('active', t === 'class');
+      document.getElementById('fasrc-user').classList.toggle('active',  t === 'user');
+      document.getElementById('fa-class-block').style.display = t === 'class' ? '' : 'none';
+      document.getElementById('fa-user-block').style.display  = t === 'user'  ? '' : 'none';
+    }
+
+    /* Student list */
+    function filterStudentList() {
+      const q = document.getElementById('fa-student-filter').value.toLowerCase();
+      const filtered = q
+        ? _allStudents.filter(s => s.name.toLowerCase().includes(q) || s.email.toLowerCase().includes(q))
+        : _allStudents;
+      renderStudentList(filtered);
+    }
+
+    function renderStudentList(students) {
+      const el = document.getElementById('fa-student-list');
+      if (!students.length) {
+        el.innerHTML = '<div style="padding:12px;font-size:0.82rem;color:var(--text-3);text-align:center">Ученики не найдены</div>';
+        return;
+      }
+      el.innerHTML = students.map(s => `
+        <div class="student-pick-item ${s.id === _selectedStudentId ? 'sp-selected' : ''}" onclick="selectStudent(${s.id})">
+          <div class="sp-check"></div>
+          <div class="sp-info">
+            <div class="sp-name">${esc(s.name)}</div>
+            <div class="sp-email">${esc(s.email)}</div>
+          </div>
+        </div>`).join('');
+    }
+
+    function selectStudent(id) {
+      _selectedStudentId = _selectedStudentId === id ? null : id;
+      filterStudentList();
+    }
+
+    /* Status bar */
+    function updateFolderStatusBar(count) {
+      const bar  = document.getElementById('fa-status-bar');
+      const text = document.getElementById('fa-status-text');
+      const btn  = document.getElementById('fa-clear-btn');
+      if (count === 0) {
+        bar.className  = 'fa-status-bar public';
+        text.innerHTML = '<span style="color:var(--green)"><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="currentColor" stroke="none"/></svg></span> Открыта всем — без ограничений';
+        btn.style.display = 'none';
+      } else {
+        const w = count === 1 ? 'запись' : count < 5 ? 'записи' : 'записей';
+        bar.className  = 'fa-status-bar restrict';
+        text.innerHTML = `<span style="color:var(--violet)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" width="13" height="13" stroke-width="2.5" style="vertical-align:-2px"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></span> Ограниченный доступ — ${count} ${w}`;
+        btn.style.display = '';
+      }
+    }
+
+    async function renderFolderAccessCurrent(folderId) {
+      const el = document.getElementById('fa-current');
+      el.innerHTML = '<div style="font-size:0.8rem;color:var(--text-3)">Загрузка…</div>';
+      try {
+        const rows = await LS.getFolderAccess(folderId);
+        updateFolderStatusBar(rows.length);
+        if (!rows.length) {
+          el.innerHTML = '<div style="font-size:0.82rem;color:var(--text-3)">Нет ограничений — папка видна всем</div>';
+        } else {
+          el.innerHTML = rows.map(r => `
+            <div class="assign-list-item">
+              <span class="assign-list-type">${r.type === 'class' ? 'Класс' : 'Ученик'}</span>
+              <span class="assign-list-name">${esc(r.target_name || String(r.target_id))}</span>
+              <button class="btn-rm-assign" onclick="doFolderUnassign('${r.type}',${r.target_id})"><svg class="ic" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+            </div>`).join('');
+        }
+        const fo = allFolders.find(f => f.id === folderId);
+        if (fo) { fo.access_count = rows.length; render(); }
+      } catch { el.innerHTML = ''; }
+    }
+
+    async function doFolderAssign() {
+      const errEl = document.getElementById('fa-error');
+      errEl.textContent = '';
+      const data = { type: _folderAccessType };
+      if (_folderAccessType === 'class') {
+        data.target_id = Number(document.getElementById('fa-class-sel').value);
+        if (!data.target_id) { errEl.textContent = 'Выберите класс'; return; }
+      } else {
+        if (!_selectedStudentId) { errEl.textContent = 'Выберите ученика из списка'; return; }
+        data.target_id = _selectedStudentId;
+      }
+      const btn = document.getElementById('fa-save');
+      btn.disabled = true;
+      try {
+        await LS.assignFolder(_folderAccessId, data);
+        _selectedStudentId = null;
+        filterStudentList();
+        await renderFolderAccessCurrent(_folderAccessId);
+      } catch (e) { errEl.textContent = e.message; }
+      finally { btn.disabled = false; }
+    }
+
+    async function doFolderUnassign(type, targetId) {
+      try {
+        await LS.unassignFolder(_folderAccessId, type, targetId);
+        await renderFolderAccessCurrent(_folderAccessId);
+      } catch (e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+    }
+
+    async function doClearFolderAccess() {
+      if (!await LS.confirm('Снять все ограничения? Папка станет видна всем пользователям.', { title: 'Открыть всем', confirmText: 'Открыть' })) return;
+      try {
+        await LS.clearFolderAccess(_folderAccessId);
+        await renderFolderAccessCurrent(_folderAccessId);
+      } catch (e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+    }
+
+    /* ─── Move file modal ─── */
+    let _movingFileId = null;
+
+    function openMoveModal(fileId) {
+      _movingFileId = fileId;
+      document.getElementById('mv-error').textContent = '';
+      const sel = document.getElementById('mv-folder');
+      const currentFolderId = allFiles.find(f => f.id === fileId)?.folder_id || '';
+      sel.innerHTML = `<option value="">— Корневая папка —</option>` +
+        allFolders.map(fo => `<option value="${fo.id}" ${fo.id === currentFolderId ? 'selected' : ''}>${esc(fo.name)}</option>`).join('');
+      document.getElementById('move-modal').classList.add('open');
+    }
+
+    function closeMoveModal() {
+      document.getElementById('move-modal').classList.remove('open');
+    }
+
+    async function doMoveFile() {
+      const folderId = document.getElementById('mv-folder').value || null;
+      const btn = document.getElementById('mv-save');
+      btn.disabled = true;
+      try {
+        await LS.moveFile(_movingFileId, folderId ? Number(folderId) : null);
+        const f = allFiles.find(f => f.id === _movingFileId);
+        if (f) f.folder_id = folderId ? Number(folderId) : null;
+        closeMoveModal();
+        render();
+        LS.toast('Файл перемещён', 'success');
+      } catch (e) {
+        document.getElementById('mv-error').textContent = e.message;
+      } finally {
+        btn.disabled = false;
+      }
+    }
+
+    /* ─── Upload ─── */
+    let selectedFile = null;
+
+    function openUpload() {
+      selectedFile = null;
+      document.getElementById('uf-title').value   = '';
+      document.getElementById('uf-desc').value    = '';
+      document.getElementById('uf-subject').value = '';
+      document.getElementById('uf-public').checked = true;
+      document.getElementById('uf-error').textContent = '';
+      document.getElementById('drop-name').style.display = 'none';
+      document.getElementById('file-input').value = '';
+
+      // Populate folder selector
+      const sel = document.getElementById('uf-folder');
+      sel.innerHTML = `<option value="">— Корневая папка —</option>` +
+        allFolders.map(fo => `<option value="${fo.id}" ${fo.id === currentFolder ? 'selected' : ''}>${esc(fo.name)}</option>`).join('');
+
+      document.getElementById('upload-modal').classList.add('open');
+    }
+
+    function closeUpload() {
+      document.getElementById('upload-modal').classList.remove('open');
+    }
+
+    function onFileSelect(input) {
+      if (!input.files[0]) return;
+      selectedFile = input.files[0];
+      const nameEl = document.getElementById('drop-name');
+      nameEl.textContent = selectedFile.name;
+      nameEl.style.display = '';
+      if (!document.getElementById('uf-title').value) {
+        document.getElementById('uf-title').value = selectedFile.name.replace(/\.[^.]+$/, '');
+      }
+    }
+
+    function onDrop(e) {
+      e.preventDefault();
+      document.getElementById('drop-zone').classList.remove('dragover');
+      const file = e.dataTransfer.files[0];
+      if (!file) return;
+      selectedFile = file;
+      const nameEl = document.getElementById('drop-name');
+      nameEl.textContent = file.name;
+      nameEl.style.display = '';
+      if (!document.getElementById('uf-title').value) {
+        document.getElementById('uf-title').value = file.name.replace(/\.[^.]+$/, '');
+      }
+    }
+
+    async function doUpload() {
+      const title    = document.getElementById('uf-title').value.trim();
+      const desc     = document.getElementById('uf-desc').value.trim();
+      const subject  = document.getElementById('uf-subject').value;
+      const folderId = document.getElementById('uf-folder').value;
+      const isPublic = document.getElementById('uf-public').checked;
+      const errEl    = document.getElementById('uf-error');
+      errEl.textContent = '';
+
+      if (!selectedFile) { errEl.textContent = 'Выберите файл'; return; }
+      if (!title)         { errEl.textContent = 'Введите название'; return; }
+
+      const fd = new FormData();
+      fd.append('file',         selectedFile);
+      fd.append('title',        title);
+      fd.append('description',  desc);
+      fd.append('subject_slug', subject);
+      fd.append('is_public',    isPublic ? '1' : '0');
+      if (folderId) fd.append('folder_id', folderId);
+
+      const btn = document.getElementById('uf-save');
+      btn.disabled = true; btn.textContent = 'Загрузка…';
+      try {
+        await LS.uploadFile(fd);
+        closeUpload();
+        loadAll();
+      } catch (e) {
+        errEl.textContent = 'Ошибка: ' + e.message;
+      } finally {
+        btn.disabled = false; btn.textContent = 'Загрузить';
+      }
+    }
+
+    /* ─── Assign ─── */
+    let _assignFileId = null, _assignType = 'class', _assignClasses = [];
+
+    async function openAssign(fileId) {
+      _assignFileId = fileId;
+      _assignType   = 'class';
+      document.getElementById('assign-error').textContent = '';
+      document.getElementById('assign-email').value = '';
+      setAssignType('class');
+      document.getElementById('assign-modal').classList.add('open');
+      try {
+        _assignClasses = await LS.getClasses();
+        const sel = document.getElementById('assign-class-sel');
+        sel.innerHTML = _assignClasses.length
+          ? _assignClasses.map(c => `<option value="${c.id}">${esc(c.name)}</option>`).join('')
+          : '<option value="">Нет доступных классов</option>';
+      } catch {}
+      renderAssignCurrent(fileId);
+    }
+
+    async function renderAssignCurrent(fileId) {
+      const el = document.getElementById('assign-current');
+      el.innerHTML = '<div style="font-size:0.8rem;color:var(--text-3)">Загрузка…</div>';
+      try {
+        const rows = await LS.getFileAccess(fileId);
+        if (!rows.length) { el.innerHTML = '<div style="font-size:0.82rem;color:var(--text-3)">Нет назначений</div>'; return; }
+        el.innerHTML = rows.map(r => `
+          <div class="assign-list-item">
+            <span class="assign-list-type">${r.type === 'class' ? 'Класс' : 'Ученик'}</span>
+            <span class="assign-list-name">${esc(r.target_name || r.target_id)}</span>
+            <button class="btn-rm-assign" onclick="doUnassign('${r.type}',${r.target_id})"><svg class="ic" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+          </div>`).join('');
+      } catch { el.innerHTML = ''; }
+    }
+
+    function setAssignType(t) {
+      _assignType = t;
+      document.getElementById('asrc-class').classList.toggle('active', t === 'class');
+      document.getElementById('asrc-user').classList.toggle('active',  t === 'user');
+      document.getElementById('assign-class-block').style.display = t === 'class' ? '' : 'none';
+      document.getElementById('assign-user-block').style.display  = t === 'user'  ? '' : 'none';
+    }
+
+    function closeAssign() { document.getElementById('assign-modal').classList.remove('open'); }
+
+    async function doAssign() {
+      const errEl = document.getElementById('assign-error');
+      errEl.textContent = '';
+      const data = { type: _assignType };
+      if (_assignType === 'class') {
+        data.target_id = Number(document.getElementById('assign-class-sel').value);
+        if (!data.target_id) { errEl.textContent = 'Выберите класс'; return; }
+      } else {
+        data.email = document.getElementById('assign-email').value.trim();
+        if (!data.email) { errEl.textContent = 'Введите email'; return; }
+      }
+      const btn = document.getElementById('assign-save');
+      btn.disabled = true;
+      try {
+        await LS.assignFile(_assignFileId, data);
+        await renderAssignCurrent(_assignFileId);
+        document.getElementById('assign-email').value = '';
+      } catch (e) { errEl.textContent = e.message; }
+      finally { btn.disabled = false; }
+    }
+
+    async function doUnassign(type, targetId) {
+      try {
+        await LS.unassignFile(_assignFileId, type, targetId);
+        await renderAssignCurrent(_assignFileId);
+      } catch (e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+    }
+
+    loadAll();
+    if (window.lucide) lucide.createIcons();
+    LS.notif.init();
+  </script>
+  </div>
+</div>
+</body>
+</html>
diff --git a/frontend/live-quiz.html b/frontend/live-quiz.html
new file mode 100644
index 0000000..331b170
--- /dev/null
+++ b/frontend/live-quiz.html
@@ -0,0 +1,853 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Live-квиз — 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://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+  <style>
+    .sb-content { background: #f4f5f8; overflow: hidden; display: flex; flex-direction: column; }
+
+    /* ── page header ── */
+    .lq-header {
+      background: linear-gradient(140deg, #0a0220 0%, #1a0a3c 60%, #080818 100%);
+      padding: 24px 28px 20px; position: relative; overflow: hidden; flex-shrink: 0;
+    }
+    .lq-header-dots {
+      position: absolute; inset: 0;
+      background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
+      background-size: 22px 22px; pointer-events: none;
+    }
+    .lq-header-inner { position: relative; z-index: 1; }
+    .lq-title {
+      font-family: 'Unbounded', sans-serif; font-size: 1.2rem; font-weight: 800;
+      color: #fff; display: flex; align-items: center; gap: 10px;
+    }
+    .lq-session-chip {
+      display: inline-flex; align-items: center; gap: 6px;
+      padding: 5px 14px; border-radius: 999px;
+      background: rgba(6,214,160,0.15); border: 1.5px solid rgba(6,214,160,0.3);
+      font-size: 0.74rem; font-weight: 700; color: #06D6A0;
+      font-family: 'Unbounded', sans-serif; margin-top: 10px;
+    }
+    .lq-session-chip .dot {
+      width: 7px; height: 7px; border-radius: 50%; background: #06D6A0;
+      animation: pulse-dot 1.5s ease infinite;
+    }
+    @keyframes pulse-dot {
+      0%, 100% { opacity: 1; transform: scale(1); }
+      50% { opacity: 0.5; transform: scale(0.7); }
+    }
+
+    /* ── body ── */
+    .lq-body {
+      flex: 1; display: flex; gap: 0; overflow: hidden; min-height: 0;
+    }
+
+    /* ── left panel ── */
+    .lq-left {
+      width: 300px; flex-shrink: 0;
+      background: #fff; border-right: 1.5px solid rgba(15,23,42,0.08);
+      overflow-y: auto; display: flex; flex-direction: column;
+    }
+    .lq-panel-head {
+      padding: 16px 18px 12px;
+      border-bottom: 1px solid rgba(15,23,42,0.07);
+      font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800;
+      color: #0F172A; display: flex; align-items: center; gap: 8px;
+    }
+    .class-list { padding: 10px 10px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
+    .class-card {
+      border: 1.5px solid rgba(15,23,42,0.08); border-radius: 14px;
+      padding: 13px 14px; cursor: pointer; transition: all 0.15s;
+      display: flex; align-items: center; gap: 12px;
+    }
+    .class-card:hover { border-color: rgba(155,93,229,0.25); background: rgba(155,93,229,0.03); }
+    .class-card.active {
+      border-color: rgba(155,93,229,0.4); background: rgba(155,93,229,0.06);
+      box-shadow: 0 2px 10px rgba(155,93,229,0.1);
+    }
+    .class-card-icon {
+      width: 38px; height: 38px; border-radius: 10px;
+      background: linear-gradient(135deg, #9B5DE5, #06D6E0);
+      display: flex; align-items: center; justify-content: center;
+      font-family: 'Unbounded', sans-serif; font-size: 0.72rem; font-weight: 800; color: #fff;
+      flex-shrink: 0;
+    }
+    .class-card-name { font-size: 0.85rem; font-weight: 700; color: #0F172A; }
+    .class-card-meta { font-size: 0.72rem; color: #8898AA; margin-top: 2px; }
+
+    .lq-session-area { padding: 14px 12px; border-top: 1px solid rgba(15,23,42,0.07); }
+    .btn-start {
+      width: 100%; padding: 12px; border: none; border-radius: 12px;
+      background: linear-gradient(135deg, #06D6E0, #9B5DE5);
+      font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800;
+      color: #fff; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;
+      display: flex; align-items: center; justify-content: center; gap: 8px;
+    }
+    .btn-start:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(155,93,229,0.3); }
+    .btn-start:disabled { opacity: 0.5; cursor: default; transform: none; box-shadow: none; }
+    .btn-end {
+      width: 100%; padding: 10px; border: 1.5px solid rgba(239,71,111,0.3); border-radius: 12px;
+      background: rgba(239,71,111,0.06);
+      font-family: 'Unbounded', sans-serif; font-size: 0.76rem; font-weight: 800;
+      color: #EF476F; cursor: pointer; transition: all 0.15s; margin-top: 8px;
+      display: flex; align-items: center; justify-content: center; gap: 6px;
+    }
+    .btn-end:hover { background: rgba(239,71,111,0.12); border-color: #EF476F; }
+    .active-status {
+      padding: 10px 12px; border-radius: 12px;
+      background: rgba(6,214,160,0.08); border: 1.5px solid rgba(6,214,160,0.25);
+      margin-bottom: 8px;
+    }
+    .as-label { font-size: 0.7rem; font-weight: 700; color: #8898AA; margin-bottom: 3px; }
+    .as-val {
+      font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 800;
+      color: #059652; display: flex; align-items: center; gap: 6px;
+    }
+    .as-dot { width: 7px; height: 7px; border-radius: 50%; background: #06D6A0; animation: pulse-dot 1.5s ease infinite; }
+
+    /* ── right panel ── */
+    .lq-right { flex: 1; overflow-y: auto; padding: 20px 24px 60px; min-width: 0; }
+
+    /* question search */
+    .lq-search-wrap { position: relative; margin-bottom: 16px; }
+    .lq-search {
+      width: 100%; padding: 10px 14px 10px 40px;
+      border: 1.5px solid rgba(15,23,42,0.12); border-radius: 12px;
+      font-family: 'Manrope', sans-serif; font-size: 0.86rem; font-weight: 500;
+      color: #0F172A; background: #fff; outline: none; transition: border-color 0.15s;
+    }
+    .lq-search:focus { border-color: var(--violet); }
+    .lq-search-icon {
+      position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
+      color: #8898AA; pointer-events: none; width: 16px; height: 16px;
+    }
+
+    /* section header */
+    .lq-section-title {
+      font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800;
+      color: #0F172A; margin: 0 0 12px; display: flex; align-items: center; gap: 8px;
+    }
+
+    /* question pick cards */
+    .lq-q-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
+    .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;
+      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); }
+    .lq-q-card.launched { border-color: rgba(6,214,160,0.4); background: rgba(6,214,160,0.03); }
+    .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;
+    }
+    .lq-q-meta { font-size: 0.7rem; color: #8898AA; margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; }
+    .btn-launch {
+      padding: 7px 16px; border: none; border-radius: 999px;
+      background: var(--grad-1); color: #fff;
+      font-family: 'Manrope', sans-serif; font-size: 0.78rem; font-weight: 800;
+      cursor: pointer; transition: transform 0.12s, box-shadow 0.12s; flex-shrink: 0;
+      display: flex; align-items: center; gap: 5px;
+    }
+    .btn-launch:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(155,93,229,0.3); }
+    .btn-launch:disabled { opacity: 0.5; cursor: default; transform: none; box-shadow: none; }
+
+    /* ── active question display ── */
+    .lq-active-wrap {
+      background: #fff; border: 1.5px solid rgba(155,93,229,0.25);
+      border-radius: 20px; padding: 22px 24px;
+      box-shadow: 0 4px 16px rgba(155,93,229,0.08); margin-bottom: 20px;
+    }
+    .lq-active-label {
+      font-size: 0.68rem; font-weight: 700; color: var(--violet);
+      text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px;
+      display: flex; align-items: center; gap: 6px;
+    }
+    .lq-active-text {
+      font-size: 0.96rem; font-weight: 700; color: #0F172A;
+      line-height: 1.55; margin-bottom: 16px;
+    }
+    .lq-active-options { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
+    .lq-active-opt {
+      padding: 8px 14px; border-radius: 10px;
+      border: 1.5px solid rgba(15,23,42,0.08);
+      font-size: 0.82rem; font-weight: 500; color: #3D4F6B;
+      display: flex; align-items: center; gap: 10px;
+    }
+    .lq-active-opt.correct {
+      border-color: rgba(6,214,160,0.4); background: rgba(6,214,160,0.06);
+      color: #059652; font-weight: 700;
+    }
+    .lq-opt-letter {
+      width: 22px; height: 22px; border-radius: 6px;
+      background: rgba(15,23,42,0.07); flex-shrink: 0;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 0.72rem; font-weight: 800; color: #8898AA;
+    }
+    .lq-active-opt.correct .lq-opt-letter { background: #06D6A0; color: #fff; }
+
+    /* answer counter */
+    .lq-counter {
+      display: flex; align-items: center; gap: 16px;
+      padding: 14px 18px; background: rgba(155,93,229,0.05);
+      border-radius: 14px; margin-bottom: 14px;
+    }
+    .lq-counter-val {
+      font-family: 'Unbounded', sans-serif; font-size: 1.4rem; font-weight: 900;
+      color: var(--violet);
+    }
+    .lq-counter-label { font-size: 0.78rem; color: #8898AA; font-weight: 600; }
+    .lq-counter-bar-wrap {
+      flex: 1; height: 8px; background: rgba(155,93,229,0.1); border-radius: 999px; overflow: hidden;
+    }
+    .lq-counter-bar {
+      height: 100%; background: linear-gradient(90deg, #9B5DE5, #06D6E0);
+      border-radius: 999px; transition: width 0.4s ease;
+    }
+
+    .btn-show-results {
+      padding: 10px 24px; border: none; border-radius: 999px;
+      background: linear-gradient(135deg, #06D6E0, #9B5DE5);
+      font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800;
+      color: #fff; cursor: pointer; transition: transform 0.12s, box-shadow 0.12s;
+      display: flex; align-items: center; gap: 7px;
+    }
+    .btn-show-results:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(155,93,229,0.3); }
+
+    /* ── results chart ── */
+    .lq-results-wrap {
+      background: #fff; border: 1.5px solid rgba(15,23,42,0.07);
+      border-radius: 20px; padding: 20px 22px; margin-top: 14px;
+    }
+    .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;
+    }
+    .result-bars { display: flex; flex-direction: column; gap: 10px; }
+    .result-bar-row { display: flex; align-items: center; gap: 10px; }
+    .result-bar-label {
+      min-width: 120px; font-size: 0.78rem; font-weight: 600; color: #3D4F6B;
+      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+      display: flex; align-items: center; gap: 6px;
+    }
+    .result-bar-label.correct-lbl { color: #059652; font-weight: 700; }
+    .rb-correct-marker { color: #06D6A0; }
+    .result-bar-track { flex: 1; height: 18px; background: rgba(15,23,42,0.05); border-radius: 999px; overflow: hidden; position: relative; }
+    .result-bar-fill {
+      height: 100%; border-radius: 999px; transition: width 0.5s ease;
+      background: rgba(155,93,229,0.35);
+    }
+    .result-bar-fill.correct-fill { background: linear-gradient(90deg, #06D6A0, #06D6E0); }
+    .result-bar-count {
+      min-width: 36px; text-align: right;
+      font-family: 'Unbounded', sans-serif; font-size: 0.72rem; font-weight: 800; color: #0F172A;
+    }
+
+    /* no session state */
+    .lq-no-session {
+      text-align: center; padding: 80px 20px; color: #8898AA;
+    }
+    .lq-no-session-icon { margin-bottom: 14px; opacity: 0.2; }
+
+    /* badges */
+    .badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 0.66rem; font-weight: 700; }
+    .badge-diff-1 { background: rgba(6,214,160,0.12); color: #059652; }
+    .badge-diff-2 { background: rgba(255,179,71,0.15); color: #B8860B; }
+    .badge-diff-3 { background: rgba(239,71,111,0.12); color: #EF476F; }
+    .badge-type   { background: rgba(6,214,224,0.12); color: #0891B2; }
+
+    /* ── nav ── */
+    .nav-active {
+      background: rgba(155,93,229,0.08) !important;
+      border-color: var(--violet) !important;
+      color: var(--violet) !important;
+      cursor: default; pointer-events: none;
+    }
+    .notif-drop-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid var(--border); }
+    .notif-drop-title { font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800; }
+    .notif-read-all { background: none; border: none; font-size: 0.74rem; color: var(--violet); cursor: pointer; font-family: 'Manrope', sans-serif; font-weight: 600; }
+    .notif-item { display: flex; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background var(--tr); text-decoration: none; color: inherit; }
+    .notif-item:last-child { border-bottom: none; }
+    .notif-item:hover { background: rgba(155,93,229,0.04); }
+    .notif-item.unread { background: rgba(155,93,229,0.05); }
+    .notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); flex-shrink: 0; margin-top: 5px; }
+    .notif-dot.read { background: transparent; border: 1.5px solid var(--border-h); }
+    .notif-msg { font-size: 0.80rem; line-height: 1.45; flex: 1; }
+    .notif-time { font-size: 0.70rem; color: var(--text-3); margin-top: 2px; }
+    .notif-empty { padding: 28px 16px; text-align: center; color: var(--text-3); font-size: 0.84rem; }
+
+    @media (max-width: 768px) {
+      .lq-body { flex-direction: column; }
+      .lq-left { width: 100%; max-height: 220px; border-right: none; border-bottom: 1.5px solid rgba(15,23,42,0.08); }
+      .lq-right { padding: 14px 12px 60px; }
+    }
+  </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" onclick="toggleSidebar()" 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"><i data-lucide="layout-dashboard" class="sb-icon"></i><span class="sb-lbl">Доска</span></a>
+      <a href="/classes"       class="sb-link"><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>
+      <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>
+      <a href="/live-quiz"     class="sb-link nav-active"><i data-lucide="radio" class="sb-icon"></i><span class="sb-lbl">Live-квиз</span></a>
+      <a href="/gradebook"     class="sb-link"><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="toggleNotifDrop()">
+          <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>
+    </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>
+          <span class="sb-logout" style="pointer-events:none">Мой профиль</span>
+        </div>
+      </a>
+    </div>
+  </aside>
+  <div class="notif-drop" id="notif-drop"></div>
+  <div class="sb-content">
+
+    <!-- Header -->
+    <div class="lq-header">
+      <div class="lq-header-dots"></div>
+      <div class="lq-header-inner">
+        <div class="lq-title"><i data-lucide="radio" style="width:22px;height:22px;opacity:0.5"></i> Live-квиз</div>
+        <div id="session-header-chip" style="display:none" class="lq-session-chip">
+          <div class="dot"></div>
+          <span id="session-header-label">Сессия активна</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Body -->
+    <div class="lq-body">
+
+      <!-- Left: class selector + session control -->
+      <div class="lq-left">
+        <div class="lq-panel-head">
+          <i data-lucide="graduation-cap" style="width:14px;height:14px;opacity:0.5"></i>
+          Выберите класс
+        </div>
+        <div class="class-list" id="class-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>
+        <div class="lq-session-area" id="session-area">
+          <div id="active-status-wrap" style="display:none">
+            <div class="active-status">
+              <div class="as-label">Статус сессии</div>
+              <div class="as-val"><div class="as-dot"></div> <span id="as-students-text">Активна</span></div>
+            </div>
+          </div>
+          <button class="btn-start" id="btn-start" onclick="startSession()" disabled>
+            <i data-lucide="play" style="width:14px;height:14px"></i>
+            Начать сессию
+          </button>
+          <button class="btn-end" id="btn-end" onclick="endSession()" style="display:none">
+            <i data-lucide="square" style="width:14px;height:14px"></i>
+            Завершить сессию
+          </button>
+        </div>
+      </div>
+
+      <!-- Right: question launcher + active question -->
+      <div class="lq-right">
+
+        <!-- No session state -->
+        <div id="no-session-state">
+          <div class="lq-no-session">
+            <div class="lq-no-session-icon"><i data-lucide="radio" style="width:64px;height:64px"></i></div>
+            <div style="font-family:'Unbounded',sans-serif;font-weight:800;font-size:1rem;color:#0F172A;margin-bottom:8px">Нет активной сессии</div>
+            <div style="font-size:0.84rem">Выберите класс и нажмите «Начать сессию»,<br>чтобы запустить Live-квиз</div>
+          </div>
+        </div>
+
+        <!-- Session active state -->
+        <div id="session-state" style="display:none">
+
+          <!-- Active question -->
+          <div id="active-q-wrap" style="display:none">
+            <div class="lq-section-title" style="margin-bottom:10px">
+              <i data-lucide="zap" style="width:14px;height:14px;color:#FFB347"></i>
+              Активный вопрос
+            </div>
+            <div class="lq-active-wrap" id="active-q-card">
+              <!-- filled by JS -->
+            </div>
+          </div>
+
+          <!-- Question search & list -->
+          <div class="lq-section-title">
+            <i data-lucide="list" style="width:14px;height:14px;opacity:0.5"></i>
+            Вопросы для запуска
+          </div>
+          <div class="lq-search-wrap">
+            <i data-lucide="search" class="lq-search-icon"></i>
+            <input class="lq-search" id="q-search" type="text" placeholder="Поиск вопросов…" />
+          </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>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script src="/js/api.js"></script>
+<script>
+  if (!LS.requireAuth()) throw new Error();
+
+  const user = LS.getUser();
+  document.getElementById('nav-user').textContent = user?.name || user?.email || '';
+  document.getElementById('nav-avatar').textContent =
+    (user?.name || 'LS').split(' ').slice(0, 2).map(w => w[0]?.toUpperCase() || '').join('') || 'LS';
+
+  const isTeacher = ['admin', 'teacher'].includes(user?.role);
+  if (!isTeacher) { location.href = '/dashboard'; throw new Error(); }
+  if (user?.role === 'admin') document.getElementById('btn-admin').style.display = '';
+
+  /* ── helpers ── */
+  function fmtTime(s) {
+    const d = new Date(s && s.includes('T') ? s : (s || '').replace(' ', 'T') + 'Z');
+    const diff = Date.now() - d.getTime();
+    if (diff < 60000) return 'только что';
+    if (diff < 3600000) return Math.floor(diff / 60000) + ' мин назад';
+    return d.toLocaleDateString('ru', { day: 'numeric', month: 'short' });
+  }
+  const TYPE_LABELS = {
+    single: 'Один ответ', multi: 'Несколько', true_false: 'Да/Нет',
+    short_answer: 'Краткий ответ', matching: 'Соответствие',
+    'fill-blank': 'Заполни пробел', ordering: 'Порядок',
+  };
+
+  /* ── sidebar ── */
+  function toggleSidebar() {
+    const layout = document.querySelector('.app-layout');
+    const collapsed = layout.classList.toggle('sb-collapsed');
+    localStorage.setItem('ls_sb_collapsed', collapsed ? '1' : '');
+    lucide.createIcons();
+  }
+  if (localStorage.getItem('ls_sb_collapsed'))
+    document.querySelector('.app-layout').classList.add('sb-collapsed');
+
+  /* ── notifications ── */
+  function toggleNotifDrop() {
+    const btn = document.getElementById('notif-btn');
+    const drop = document.getElementById('notif-drop');
+    const r = btn.getBoundingClientRect();
+    drop.style.left = (r.right + 8) + 'px';
+    drop.style.top = r.top + 'px';
+    if (drop.classList.toggle('open')) loadNotifs();
+  }
+  async function loadNotifs() {
+    const drop = document.getElementById('notif-drop');
+    drop.innerHTML = '<div class="notif-drop-header"><span class="notif-drop-title">Уведомления</span><button class="notif-read-all" onclick="readAllNotifs()">Прочитать все</button></div><div class="notif-empty">Загрузка…</div>';
+    try {
+      const data = await LS.api('/api/notifications?limit=20');
+      const items = data.items || [];
+      const badge = document.getElementById('notif-badge');
+      const unread = items.filter(n => !n.is_read).length;
+      badge.textContent = unread; badge.style.display = unread ? '' : 'none';
+      if (!items.length) { drop.querySelector('.notif-empty').textContent = 'Нет уведомлений'; return; }
+      drop.innerHTML = '<div class="notif-drop-header"><span class="notif-drop-title">Уведомления</span><button class="notif-read-all" onclick="readAllNotifs()">Прочитать все</button></div>' +
+        items.map(n => `<a class="notif-item${n.is_read ? '' : ' unread'}" href="${n.link || '#'}" onclick="markRead(${n.id})">
+          <div class="notif-dot${n.is_read ? ' read' : ''}"></div>
+          <div><div class="notif-msg">${esc(n.message)}</div><div class="notif-time">${fmtTime(n.created_at)}</div></div>
+        </a>`).join('');
+    } catch {}
+  }
+  async function markRead(id) { try { await LS.api('/api/notifications/' + id + '/read', { method: 'POST' }); } catch {} }
+  async function readAllNotifs() { try { await LS.api('/api/notifications/read-all', { method: 'POST' }); loadNotifs(); } catch {} }
+  document.addEventListener('click', e => {
+    const drop = document.getElementById('notif-drop');
+    if (drop.classList.contains('open') && !drop.contains(e.target) && !document.getElementById('notif-btn').contains(e.target))
+      drop.classList.remove('open');
+  });
+
+  /* ── state ── */
+  let selectedClass = null;
+  let activeSession = null;
+  let currentQuestion = null;
+  let memberCount = 0;
+  let answerCount = 0;
+  let sseSource = null;
+  let allQuestions = [];
+  let filteredQuestions = [];
+  let searchTimeout = null;
+
+  /* ── load classes ── */
+  async function loadClasses() {
+    try {
+      const classes = await LS.api('/api/classes');
+      const list = document.getElementById('class-list');
+      if (!(classes || []).length) {
+        list.innerHTML = '<div style="padding:30px;text-align:center;color:#8898AA;font-size:0.82rem">Нет доступных классов</div>';
+        lucide.createIcons();
+        return;
+      }
+      let html = '';
+      (classes || []).forEach(c => {
+        const initials = (c.name || '?').split(' ').slice(0, 2).map(w => w[0]?.toUpperCase() || '').join('') || '?';
+        html += `<div class="class-card" id="cc-${c.id}" onclick="selectClass(${c.id}, '${esc(c.name)}', ${c.members_count || 0})">
+          <div class="class-card-icon">${initials}</div>
+          <div>
+            <div class="class-card-name">${esc(c.name)}</div>
+            <div class="class-card-meta">${c.members_count || 0} учеников</div>
+          </div>
+        </div>`;
+      });
+      list.innerHTML = html;
+      lucide.createIcons();
+    } catch {
+      document.getElementById('class-list').innerHTML = '<div style="padding:20px;text-align:center;color:#8898AA;font-size:0.82rem">Ошибка загрузки</div>';
+    }
+  }
+
+  async function selectClass(id, name, members) {
+    if (activeSession) {
+      if (!await LS.confirm('Выбрать другой класс?', { title: 'Завершить текущую сессию?', confirmText: 'Завершить', danger: true })) return;
+      endSession(true);
+    }
+    selectedClass = { id, name, members };
+    memberCount = members;
+
+    document.querySelectorAll('.class-card').forEach(el => el.classList.remove('active'));
+    const card = document.getElementById('cc-' + id);
+    if (card) card.classList.add('active');
+
+    document.getElementById('btn-start').disabled = false;
+    lucide.createIcons();
+  }
+
+  /* ── start session ── */
+  async function startSession() {
+    if (!selectedClass || activeSession) return;
+    const btn = document.getElementById('btn-start');
+    btn.disabled = true;
+    btn.innerHTML = '<div class="spinner" style="width:16px;height:16px;margin:0"></div> Создаём…';
+    try {
+      const session = await LS.api('/api/live', {
+        method: 'POST',
+        body: JSON.stringify({ class_id: selectedClass.id }),
+      });
+      activeSession = session;
+      onSessionActive();
+      loadQuestions();
+      startSSE();
+    } catch (e) {
+      LS.toast(e.message || 'Ошибка создания сессии', 'error');
+      btn.disabled = false;
+      btn.innerHTML = '<i data-lucide="play" style="width:14px;height:14px"></i> Начать сессию';
+      lucide.createIcons();
+    }
+  }
+
+  function onSessionActive() {
+    document.getElementById('no-session-state').style.display = 'none';
+    document.getElementById('session-state').style.display = '';
+    document.getElementById('active-status-wrap').style.display = '';
+    document.getElementById('btn-start').style.display = 'none';
+    document.getElementById('btn-end').style.display = '';
+    document.getElementById('session-header-chip').style.display = '';
+    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);
+    lucide.createIcons();
+  }
+
+  function updateStudentCounter(count) {
+    answerCount = count;
+    document.getElementById('as-students-text').textContent =
+      'Ответили: ' + count + ' / ' + memberCount;
+  }
+
+  /* ── end session ── */
+  async function endSession(silent = false) {
+    if (!activeSession) return;
+    if (!silent && !await LS.confirm('Все участники увидят, что сессия завершена.', { title: 'Завершить Live-квиз?', confirmText: 'Завершить', danger: true })) return;
+    const id = activeSession.id;
+    activeSession = null;
+    currentQuestion = null;
+    if (sseSource) { sseSource.close(); sseSource = null; }
+
+    document.getElementById('no-session-state').style.display = '';
+    document.getElementById('session-state').style.display = 'none';
+    document.getElementById('active-q-wrap').style.display = 'none';
+    document.getElementById('active-status-wrap').style.display = 'none';
+    document.getElementById('btn-start').style.display = '';
+    document.getElementById('btn-end').style.display = 'none';
+    document.getElementById('session-header-chip').style.display = 'none';
+    const btn = document.getElementById('btn-start');
+    btn.disabled = !selectedClass;
+    btn.innerHTML = '<i data-lucide="play" style="width:14px;height:14px"></i> Начать сессию';
+    lucide.createIcons();
+
+    try { await LS.api('/api/live/' + id, { method: 'DELETE' }); } catch {}
+  }
+
+  /* ── SSE for real-time answer count ── */
+  function startSSE() {
+    const token = localStorage.getItem('ls_token');
+    if (!token) return;
+    try {
+      sseSource = new EventSource('/api/notifications/stream?token=' + encodeURIComponent(token));
+      sseSource.onmessage = (ev) => {
+        try {
+          const msg = JSON.parse(ev.data);
+          if (msg.type === 'live_answer_count' && activeSession && msg.liveId === activeSession.id) {
+            updateStudentCounter(msg.count || 0);
+            // update counter in active-q-card if visible
+            const counterEl = document.getElementById('lq-answer-count');
+            if (counterEl) counterEl.textContent = (msg.count || 0) + ' / ' + memberCount;
+            const barEl = document.getElementById('lq-answer-bar');
+            if (barEl) {
+              const pct = memberCount > 0 ? Math.round(((msg.count || 0) / memberCount) * 100) : 0;
+              barEl.style.width = pct + '%';
+            }
+          }
+        } catch {}
+      };
+      sseSource.onerror = () => {
+        sseSource.close();
+        sseSource = null;
+        // retry after 5s if session still active
+        if (activeSession) setTimeout(startSSE, 5000);
+      };
+    } catch {}
+  }
+
+  /* ── 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>';
+    try {
+      const data = await LS.api('/api/questions?limit=50');
+      allQuestions = data.rows || [];
+      filteredQuestions = allQuestions;
+      renderQuestionList();
+    } catch {
+      document.getElementById('q-list').innerHTML = '<div style="padding:20px;text-align:center;color:#8898AA;font-size:0.82rem">Ошибка загрузки вопросов</div>';
+    }
+  }
+
+  function renderQuestionList() {
+    const list = document.getElementById('q-list');
+    if (!filteredQuestions.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 => {
+      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-meta">
+            <span class="badge ${diffCls}">${diffLabel}</span>
+            ${typeLabel ? `<span class="badge badge-type">${esc(typeLabel)}</span>` : ''}
+            ${q.topic ? `<span>${esc(q.topic)}</span>` : ''}
+          </div>
+        </div>
+        <button class="btn-launch" onclick="launchQuestion(${q.id})" ${isLaunched ? 'disabled' : ''}>
+          ${isLaunched ? '<i data-lucide="check" style="width:13px;height:13px"></i> Запущен' : '<i data-lucide="zap" style="width:13px;height:13px"></i> Запустить'}
+        </button>
+      </div>`;
+    });
+    list.innerHTML = html;
+    lucide.createIcons();
+  }
+
+  /* search questions */
+  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);
+  });
+
+  /* ── 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', {
+        method: 'PUT',
+        body: JSON.stringify({ question_id: questionId }),
+      });
+      currentQuestion = q;
+      answerCount = 0;
+      updateStudentCounter(0);
+      renderActiveQuestion(q);
+      renderQuestionList();
+    } catch (e) {
+      LS.toast(e.message || 'Ошибка запуска вопроса', 'error');
+    }
+  }
+
+  function renderActiveQuestion(q) {
+    const wrap = document.getElementById('active-q-wrap');
+    const card = document.getElementById('active-q-card');
+    wrap.style.display = '';
+
+    const diffCls = 'badge-diff-' + (q.difficulty || 1);
+    const diffLabel = q.difficulty === 1 ? 'Лёгкий' : q.difficulty === 2 ? 'Средний' : 'Сложный';
+    const typeLabel = TYPE_LABELS[q.type] || q.type || '';
+    const pct = memberCount > 0 ? Math.round((answerCount / memberCount) * 100) : 0;
+
+    let optionsHtml = '';
+    if ((q.options || []).length) {
+      optionsHtml = '<div class="lq-active-options">';
+      q.options.forEach((opt, idx) => {
+        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>
+        </div>`;
+      });
+      optionsHtml += '</div>';
+    }
+
+    card.innerHTML = `
+      <div class="lq-active-label">
+        <div class="dot" style="width:7px;height:7px;border-radius:50%;background:#FFB347;animation:pulse-dot 1.5s ease infinite"></div>
+        В эфире · <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>
+      ${optionsHtml}
+      <div class="lq-counter">
+        <div>
+          <div class="lq-counter-val" id="lq-answer-count">${answerCount} / ${memberCount}</div>
+          <div class="lq-counter-label">студентов ответили</div>
+        </div>
+        <div class="lq-counter-bar-wrap">
+          <div class="lq-counter-bar" id="lq-answer-bar" style="width:${pct}%"></div>
+        </div>
+      </div>
+      <button class="btn-show-results" onclick="showResults()">
+        <i data-lucide="bar-chart-2" style="width:14px;height:14px"></i>
+        Показать результаты
+      </button>
+      <div id="results-area"></div>
+    `;
+    lucide.createIcons();
+    wrap.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  }
+
+  /* ── show results ── */
+  async function showResults() {
+    if (!activeSession || !currentQuestion) return;
+    const resultsArea = document.getElementById('results-area');
+    if (!resultsArea) return;
+    resultsArea.innerHTML = '<div class="spinner" style="margin:20px auto"></div>';
+    try {
+      const data = await LS.api('/api/live/' + activeSession.id + '/results');
+      renderResults(data, resultsArea);
+    } catch (e) {
+      resultsArea.innerHTML = `<div style="padding:20px;text-align:center;color:#8898AA;font-size:0.84rem">${esc(e.message || 'Ошибка загрузки результатов')}</div>`;
+    }
+  }
+
+  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 || []);
+
+    if (!opts.length) {
+      container.innerHTML = '<div style="padding:16px;text-align:center;color:#8898AA;font-size:0.84rem">Нет данных о вариантах ответа</div>';
+      return;
+    }
+
+    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="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 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>
+        </div>
+        <div class="result-bar-track">
+          <div class="result-bar-fill${isCorrect ? ' correct-fill' : ''}" style="width:${pct}%"></div>
+        </div>
+        <div class="result-bar-count">${count}</div>
+      </div>`;
+    });
+
+    html += '</div></div>';
+    container.innerHTML = html;
+    lucide.createIcons();
+  }
+
+  lucide.createIcons();
+  loadClasses();
+</script>
+<script src="/js/notifications.js"></script>
+<script src="/js/search.js"></script>
+<script src="/js/mobile.js"></script>
+</body>
+</html>
diff --git a/frontend/login.html b/frontend/login.html
new file mode 100644
index 0000000..e939faa
--- /dev/null
+++ b/frontend/login.html
@@ -0,0 +1,1016 @@
+<!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" />
+  <style>
+    /* ── Layout ── */
+    .login-layout { display: flex; min-height: 100vh; }
+
+    /* ── Left panel ── */
+    .login-left {
+      flex: 1;
+      background: linear-gradient(145deg, #0b0920 0%, #160d3a 45%, #1e1250 100%);
+      position: relative; overflow: hidden;
+      display: flex; align-items: center;
+      padding: 60px 56px;
+    }
+    .login-left::before {
+      content: '';
+      position: absolute; inset: 0;
+      background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
+      background-size: 24px 24px;
+    }
+    /* animated glow blobs */
+    .ll-blob { position: absolute; border-radius: 50%; pointer-events: none; animation: blobFloat 8s ease-in-out infinite; }
+    .ll-blob1 { width: 560px; height: 560px; background: radial-gradient(circle, rgba(155,93,229,0.28), transparent 68%); top: -180px; right: -120px; animation-delay: 0s; }
+    .ll-blob2 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(6,214,224,0.18), transparent 68%); bottom: -120px; left: 10%; animation-delay: -3s; }
+    .ll-blob3 { width: 240px; height: 240px; background: radial-gradient(circle, rgba(241,91,181,0.14), transparent 68%); top: 40%; left: -80px; animation-delay: -5s; }
+    @keyframes blobFloat {
+      0%, 100% { transform: translate(0, 0) scale(1); }
+      33%       { transform: translate(20px, -30px) scale(1.04); }
+      66%       { transform: translate(-15px, 20px) scale(0.97); }
+    }
+
+    .ll-inner { position: relative; z-index: 1; max-width: 440px; }
+
+    .ll-logo {
+      font-family: 'Unbounded', sans-serif;
+      font-size: 1.3rem; font-weight: 800;
+      color: #fff; margin-bottom: 56px;
+      display: flex; align-items: center; gap: 10px;
+    }
+    .ll-logo-mark {
+      width: 36px; height: 36px; border-radius: 10px;
+      background: linear-gradient(135deg, #06D6E0, #9B5DE5);
+      display: flex; align-items: center; justify-content: center;
+      font-size: 1rem;
+    }
+    .ll-logo span { background: var(--grad-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
+
+    .ll-headline {
+      font-family: 'Unbounded', sans-serif;
+      font-size: 1.85rem; font-weight: 800; line-height: 1.28;
+      color: #fff; margin-bottom: 16px;
+    }
+    .ll-headline em { font-style: normal; background: var(--grad-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
+
+    .ll-tagline { font-size: 0.875rem; color: rgba(255,255,255,0.5); font-weight: 500; margin-bottom: 44px; line-height: 1.7; }
+
+    /* stats row */
+    .ll-stats { display: flex; gap: 20px; margin-bottom: 36px; }
+    .ll-stat {
+      flex: 1; padding: 14px 16px;
+      background: rgba(255,255,255,0.06);
+      border: 1px solid rgba(255,255,255,0.09);
+      border-radius: 14px;
+    }
+    .ll-stat-val { font-family: 'Unbounded', sans-serif; font-size: 1.3rem; font-weight: 800; color: #fff; }
+    .ll-stat-val span { background: var(--grad-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
+    .ll-stat-lbl { font-size: 0.75rem; color: rgba(255,255,255,0.45); font-weight: 500; margin-top: 2px; }
+
+    /* feature list */
+    .ll-features { display: flex; flex-direction: column; gap: 9px; }
+    .ll-feat {
+      display: flex; align-items: center; gap: 12px;
+      font-size: 0.84rem; color: rgba(255,255,255,0.78); font-weight: 600;
+      padding: 11px 16px;
+      background: rgba(255,255,255,0.055);
+      border: 1px solid rgba(255,255,255,0.08);
+      border-radius: 12px;
+      transition: background .2s, border-color .2s;
+    }
+    .ll-feat:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.14); }
+    .ll-feat-icon {
+      width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 0.9rem;
+    }
+    .ll-feat-icon.v { background: rgba(155,93,229,0.22); }
+    .ll-feat-icon.c { background: rgba(6,214,224,0.18); }
+    .ll-feat-icon.g { background: rgba(6,214,100,0.18); }
+    .ll-feat-icon.p { background: rgba(241,91,181,0.18); }
+
+    /* ── Right panel ── */
+    .login-right {
+      width: 480px; flex-shrink: 0;
+      display: flex; align-items: center; justify-content: center;
+      padding: 48px 52px;
+      background: linear-gradient(145deg, #0e0824 0%, #1a0d38 55%, #160e3a 100%);
+      position: relative;
+    }
+    .login-right::before {
+      content: '';
+      position: absolute; top: 0; bottom: 0; left: -28px;
+      width: 56px; background: inherit;
+      clip-path: polygon(28px 0, 56px 0, 56px 100%, 0 100%);
+      z-index: 0;
+    }
+
+    .auth-wrap {
+      width: 100%; max-width: 380px;
+      position: relative; z-index: 1;
+      animation: slideUp .45s cubic-bezier(.4,0,.2,1) both;
+    }
+    @keyframes slideUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
+
+    /* ── Лого-метка ── */
+    .auth-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 32px; }
+    .auth-logo-mark {
+      width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
+      background: linear-gradient(135deg, #06D6E0, #9B5DE5);
+      display: flex; align-items: center; justify-content: center;
+    }
+    .auth-logo-mark svg { width: 17px; height: 17px; stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
+    .auth-logo-name { font-family: 'Unbounded', sans-serif; font-size: 0.88rem; font-weight: 800; color: #fff; letter-spacing: -.01em; }
+    .auth-logo-name span { background: var(--grad-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
+
+    /* ── Заголовок ── */
+    .auth-header { margin-bottom: 30px; }
+    .auth-hello {
+      font-family: 'Unbounded', sans-serif; font-size: 1.55rem; font-weight: 800; line-height: 1.2;
+      background: linear-gradient(135deg, #fff 30%, rgba(155,93,229,0.85) 100%);
+      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
+    }
+    .auth-sub { font-size: 0.84rem; color: rgba(255,255,255,0.38); margin-top: 8px; font-weight: 500; }
+
+    /* ── Табы — underline ── */
+    .auth-tabs {
+      display: flex;
+      border-bottom: 1.5px solid rgba(255,255,255,0.08);
+      margin-bottom: 30px;
+      position: relative;
+      background: none; padding: 0;
+    }
+    .auth-tab {
+      flex: 1; padding: 0 4px 14px;
+      border: none; background: transparent;
+      font-family: 'Manrope', sans-serif;
+      font-size: 0.88rem; font-weight: 700;
+      color: rgba(255,255,255,0.32); cursor: pointer;
+      transition: color .22s; position: relative; z-index: 1;
+    }
+    .auth-tab.active { color: #fff; }
+    .auth-tab-slider {
+      position: absolute; bottom: -1.5px; left: 0;
+      width: 50%; height: 2px;
+      background: linear-gradient(90deg, #9B5DE5, #06D6E0);
+      border-radius: 2px;
+      box-shadow: 0 0 12px rgba(155,93,229,0.7);
+      transition: transform .28s cubic-bezier(.4,0,.2,1);
+    }
+    .auth-tabs.on-reg .auth-tab-slider { transform: translateX(100%); }
+
+    /* ── Форма ── */
+    .auth-form { display: flex; flex-direction: column; gap: 22px; }
+    .auth-form.hidden { display: none; }
+
+    .auth-field { display: flex; flex-direction: column; }
+    .auth-label {
+      font-size: 0.7rem; font-weight: 700; color: rgba(255,255,255,0.38);
+      letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px;
+    }
+
+    /* инпут — только нижняя линия */
+    .auth-input-wrap { position: relative; }
+    .auth-input-icon {
+      position: absolute; left: 0; top: 50%; transform: translateY(-50%);
+      color: rgba(255,255,255,0.22); pointer-events: none; display: flex;
+      transition: color .2s;
+    }
+    .auth-input-wrap:focus-within .auth-input-icon { color: rgba(155,93,229,0.75); }
+    .auth-input {
+      width: 100%;
+      padding: 10px 30px 10px 26px;
+      border: none;
+      border-bottom: 1.5px solid rgba(255,255,255,0.12);
+      border-radius: 0;
+      background: transparent;
+      font-family: 'Manrope', sans-serif;
+      font-size: 0.92rem; font-weight: 500; color: #fff;
+      outline: none;
+      transition: border-color .2s;
+    }
+    .auth-input::placeholder { color: rgba(255,255,255,0.18); }
+    .auth-input:focus { border-color: transparent; }
+    /* анимированная линия фокуса */
+    .auth-input-wrap::after {
+      content: '';
+      position: absolute; bottom: 0; left: 0;
+      width: 0; height: 2px;
+      background: linear-gradient(90deg, #9B5DE5, #06D6E0);
+      border-radius: 2px;
+      box-shadow: 0 0 8px rgba(155,93,229,0.5);
+      transition: width .28s cubic-bezier(.4,0,.2,1);
+    }
+    .auth-input-wrap:focus-within::after { width: 100%; }
+    /* кнопка пароля */
+    .auth-eye {
+      position: absolute; right: 0; top: 50%; transform: translateY(-50%);
+      background: none; border: none; cursor: pointer; padding: 4px;
+      color: rgba(255,255,255,0.22); display: flex; border-radius: 6px;
+      transition: color .2s;
+    }
+    .auth-eye:hover { color: rgba(155,93,229,0.85); }
+    .auth-input.has-eye { padding-right: 30px; }
+
+    /* ── Ошибка — левый акцент ── */
+    .auth-error {
+      display: flex; align-items: flex-start; gap: 9px;
+      padding: 11px 14px;
+      background: rgba(249,65,68,0.09);
+      border-left: 3px solid #F94144;
+      border-radius: 0 10px 10px 0;
+      font-size: 0.81rem; color: #ff8090; font-weight: 600;
+      display: none;
+    }
+    .auth-error.visible { display: flex; }
+    .auth-error-icon { flex-shrink: 0; margin-top: 1px; color: #F94144; }
+
+    /* ── Кнопка ── */
+    .auth-btn {
+      margin-top: 6px;
+      padding: 14px;
+      border: none; border-radius: 14px;
+      background: linear-gradient(100deg, #7c3aed 0%, #9B5DE5 45%, #06D6E0 100%);
+      background-size: 200% 100%; background-position: 0% 0%;
+      color: #fff;
+      font-family: 'Manrope', sans-serif;
+      font-size: 0.95rem; font-weight: 700; letter-spacing: .01em;
+      cursor: pointer; position: relative; overflow: hidden;
+      transition: background-position .45s ease, transform .15s, box-shadow .15s;
+    }
+    .auth-btn::before {
+      content: '';
+      position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.13), transparent);
+      transition: left .55s ease;
+    }
+    .auth-btn:hover:not(:disabled) { background-position: 100% 0%; transform: translateY(-1px); box-shadow: 0 10px 32px rgba(124,58,237,0.5); }
+    .auth-btn:hover:not(:disabled)::before { left: 130%; }
+    .auth-btn:active:not(:disabled) { transform: translateY(0); }
+    .auth-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+    .auth-btn-inner { display: flex; align-items: center; justify-content: center; gap: 8px; }
+    .auth-spinner {
+      width: 16px; height: 16px;
+      border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff;
+      border-radius: 50%; animation: spin .7s linear infinite; display: none;
+    }
+    .auth-btn.loading .auth-spinner { display: block; }
+    @keyframes spin { to { transform: rotate(360deg); } }
+
+    /* ── Футер ── */
+    .auth-footer { margin-top: 28px; text-align: center; }
+    .auth-footer a {
+      display: inline-flex; align-items: center; gap: 6px;
+      font-size: 0.79rem; font-weight: 600;
+      color: rgba(255,255,255,0.3); text-decoration: none;
+      transition: color .2s;
+    }
+    .auth-footer a:hover { color: #c084fc; }
+    .auth-footer a svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
+
+    /* ── Разделитель ── */
+    .auth-divider {
+      display: flex; align-items: center; gap: 10px;
+      color: rgba(255,255,255,0.18); font-size: 0.74rem; font-weight: 600;
+    }
+    .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.07); }
+
+    /* ── Password strength ── */
+    .pw-strength { display: flex; align-items: center; gap: 9px; margin-top: 8px; }
+    .pw-bars { display: flex; gap: 4px; flex: 1; }
+    .pw-seg { flex: 1; height: 2px; border-radius: 99px; background: rgba(255,255,255,0.1); transition: background .25s; }
+    .pw-seg.lit.s1 { background: #ef4444; }
+    .pw-seg.lit.s2 { background: #f59e0b; }
+    .pw-seg.lit.s3 { background: #22c55e; }
+    .pw-seg.lit.s4 { background: #06d6a0; }
+    .pw-lbl { font-size: 0.7rem; font-weight: 700; color: rgba(255,255,255,0.3); min-width: 52px; text-align: right; transition: color .25s; }
+    .pw-lbl.s1 { color: #ef4444; } .pw-lbl.s2 { color: #f59e0b; } .pw-lbl.s3 { color: #22c55e; } .pw-lbl.s4 { color: #06d6a0; }
+
+    /* ── Shake on error ── */
+    @keyframes authShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
+    .auth-form.shake { animation: authShake .35s ease; }
+
+    /* ── Input error state ── */
+    .auth-input.invalid { border-color: rgba(249,65,68,0.6); }
+
+    /* ── Progress bar ── */
+    #auth-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%;
+      background: linear-gradient(90deg, #9B5DE5, #06D6E0, #F9C74F);
+      z-index: 9999; border-radius: 0 2px 2px 0;
+      transition: width .25s ease; pointer-events: none; display: none; }
+
+    /* ── Success button ── */
+    .auth-btn.success { background: linear-gradient(135deg, #22c55e, #06d6a0) !important; }
+    .auth-btn.success:hover { box-shadow: 0 10px 32px rgba(34,197,94,0.4); }
+
+    /* ── Remember me ── */
+    .auth-remember { display: flex; align-items: center; gap: 9px; margin-top: -6px; }
+    .auth-remember input[type=checkbox] { width: 14px; height: 14px; accent-color: #9B5DE5; cursor: pointer; flex-shrink: 0; }
+    .auth-remember label { font-size: 0.79rem; color: rgba(255,255,255,0.35); cursor: pointer; user-select: none; }
+
+    /* ── Caps lock warning ── */
+    .caps-warn { display: none; align-items: center; gap: 5px;
+      font-size: 0.72rem; font-weight: 700; color: #fbbf24;
+      padding: 4px 0; margin-top: 4px; }
+    .caps-warn.show { display: flex; }
+
+    /* ── Input icon transition ── */
+    .auth-input-icon { transition: color .2s; }
+
+    /* ── Canvas in left panel ── */
+    #ll-canvas { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
+
+    /* responsive */
+    @media (max-width: 860px) {
+      .login-left { padding: 40px 28px; }
+      .login-right { width: 100%; padding: 36px 24px; }
+      .ll-headline { font-size: 1.4rem; }
+      .ll-stats { gap: 12px; }
+    }
+    @media (max-width: 640px) {
+      .login-layout { flex-direction: column; }
+      .login-left { min-height: auto; padding: 36px 24px 32px; }
+      .ll-stats, .ll-features { display: none; }
+      .ll-tagline { margin-bottom: 0; }
+      .ll-headline { font-size: 1.25rem; }
+      .login-right { padding: 32px 20px 40px; }
+    }
+    @media (max-width: 400px) {
+      .login-left { display: none; }
+      .login-right { min-height: 100vh; align-items: flex-start; padding-top: 32px; }
+    }
+  </style>
+</head>
+<body>
+<div class="login-layout">
+
+  <!-- ── Left panel ── -->
+  <div class="login-left">
+    <canvas id="ll-canvas"></canvas>
+    <div class="ll-blob ll-blob1"></div>
+    <div class="ll-blob ll-blob2"></div>
+    <div class="ll-blob ll-blob3"></div>
+    <div class="ll-inner">
+      <div class="ll-logo">
+        <div class="ll-logo-mark"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg></div>
+        Learn<span>Space</span>
+      </div>
+      <h1 class="ll-headline">Платформа<br>нового поколения<br>для <em>подготовки к ЦТ</em></h1>
+      <p class="ll-tagline">Умные задания · Прогресс в реальном времени<br>Аналитика для учителей</p>
+
+      <div class="ll-stats">
+        <div class="ll-stat">
+          <div class="ll-stat-val"><span id="stat-q">1000+</span></div>
+          <div class="ll-stat-lbl">вопросов в банке</div>
+        </div>
+        <div class="ll-stat">
+          <div class="ll-stat-val"><span id="stat-s">4</span></div>
+          <div class="ll-stat-lbl">предмета ЦТ/ЦЭ</div>
+        </div>
+        <div class="ll-stat">
+          <div class="ll-stat-val"><span>∞</span></div>
+          <div class="ll-stat-lbl">попыток</div>
+        </div>
+      </div>
+
+      <div class="ll-features">
+        <div class="ll-feat">
+          <div class="ll-feat-icon v"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg></div>
+          Персональные задания по каждому предмету
+        </div>
+        <div class="ll-feat">
+          <div class="ll-feat-icon c"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle"><path d="M12 20V10M18 20V4M6 20v-4"/></svg></div>
+          Детальная аналитика прогресса ученика
+        </div>
+        <div class="ll-feat">
+          <div class="ll-feat-icon g"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle"><path d="M3 21V9l9-6 9 6v12"/><path d="M9 21V12h6v9"/></svg></div>
+          Управление классами и заданиями
+        </div>
+        <div class="ll-feat">
+          <div class="ll-feat-icon p"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle"><path d="M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2"/><rect x="8" y="2" width="8" height="4" rx="1"/></svg></div>
+          Доска активности и объявлений класса
+        </div>
+      </div>
+
+    </div>
+  </div>
+
+  <!-- ── Right panel ── -->
+  <div class="login-right">
+    <div class="auth-wrap">
+
+      <div class="auth-logo">
+        <div class="auth-logo-mark">
+          <svg viewBox="0 0 24 24"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
+        </div>
+        <div class="auth-logo-name">Learn<span>Space</span></div>
+      </div>
+
+      <div class="auth-header">
+        <div class="auth-hello" id="auth-hello">С возвращением!</div>
+        <div class="auth-sub" id="auth-sub">Войдите в свой аккаунт</div>
+      </div>
+
+      <div class="auth-tabs" id="auth-tabs">
+        <div class="auth-tab-slider"></div>
+        <button class="auth-tab active" data-tab="login"    onclick="switchTab('login')">Войти</button>
+        <button class="auth-tab"        data-tab="register" onclick="switchTab('register')">Регистрация</button>
+      </div>
+
+      <!-- ── Вход ── -->
+      <form class="auth-form" id="form-login" autocomplete="on">
+        <div class="auth-error" id="err-login">
+          <span class="auth-error-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></span>
+          <span id="err-login-text"></span>
+        </div>
+        <div class="auth-field">
+          <label class="auth-label" for="login-email">Email</label>
+          <div class="auth-input-wrap">
+            <span class="auth-input-icon">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
+            </span>
+            <input class="auth-input" type="email" id="login-email" name="email" placeholder="you@example.com" autocomplete="email" required />
+          </div>
+        </div>
+        <div class="auth-field">
+          <label class="auth-label" for="login-pass">Пароль</label>
+          <div class="auth-input-wrap">
+            <span class="auth-input-icon">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+            </span>
+            <input class="auth-input has-eye" type="password" id="login-pass" name="password" placeholder="••••••••" autocomplete="current-password" required />
+            <button type="button" class="auth-eye" onclick="toggleEye('login-pass', this)" aria-label="Показать пароль">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>
+            </button>
+          </div>
+          <div class="caps-warn" id="caps-login-pass">
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+            Caps Lock включён
+          </div>
+        </div>
+        <div class="auth-remember">
+          <input type="checkbox" id="remember-me" />
+          <label for="remember-me">Запомнить меня</label>
+        </div>
+        <button class="auth-btn" type="submit" id="btn-login">
+          <div class="auth-btn-inner">
+            <div class="auth-spinner"></div>
+            <span class="auth-btn-lbl">Войти</span>
+          </div>
+        </button>
+      </form>
+
+      <!-- ── Регистрация ── -->
+      <form class="auth-form hidden" id="form-register" autocomplete="on">
+        <div class="auth-error" id="err-reg">
+          <span class="auth-error-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></span>
+          <span id="err-reg-text"></span>
+        </div>
+        <div class="auth-field">
+          <label class="auth-label" for="reg-name">Имя и фамилия</label>
+          <div class="auth-input-wrap">
+            <span class="auth-input-icon">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/></svg>
+            </span>
+            <input class="auth-input" type="text" id="reg-name" name="name" placeholder="Иван Иванов" autocomplete="name" required />
+          </div>
+        </div>
+        <div class="auth-field">
+          <label class="auth-label" for="reg-email">Email</label>
+          <div class="auth-input-wrap">
+            <span class="auth-input-icon">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
+            </span>
+            <input class="auth-input" type="email" id="reg-email" name="email" placeholder="you@example.com" autocomplete="email" required />
+          </div>
+        </div>
+        <div class="auth-field">
+          <label class="auth-label" for="reg-pass">Пароль</label>
+          <div class="auth-input-wrap">
+            <span class="auth-input-icon">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+            </span>
+            <input class="auth-input has-eye" type="password" id="reg-pass" name="password" placeholder="Минимум 6 символов" autocomplete="new-password" required minlength="6" />
+            <button type="button" class="auth-eye" onclick="toggleEye('reg-pass', this)" aria-label="Показать пароль">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>
+            </button>
+          </div>
+          <div class="caps-warn" id="caps-reg-pass">
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+            Caps Lock включён
+          </div>
+          <div class="pw-strength" id="pw-strength" style="visibility:hidden">
+            <div class="pw-bars">
+              <div class="pw-seg" id="pw-s1"></div>
+              <div class="pw-seg" id="pw-s2"></div>
+              <div class="pw-seg" id="pw-s3"></div>
+              <div class="pw-seg" id="pw-s4"></div>
+            </div>
+            <span class="pw-lbl" id="pw-lbl"></span>
+          </div>
+        </div>
+        <button class="auth-btn" type="submit" id="btn-reg">
+          <div class="auth-btn-inner">
+            <div class="auth-spinner"></div>
+            <span class="auth-btn-lbl">Создать аккаунт</span>
+          </div>
+        </button>
+      </form>
+
+      <div class="auth-footer">
+        <a href="/">
+          <svg viewBox="0 0 24 24"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
+          На главную
+        </a>
+      </div>
+
+    </div>
+  </div>
+</div>
+
+<div id="auth-progress"></div>
+<script src="/js/api.js"></script>
+<script>
+  if (LS.isLoggedIn()) window.location.href = '/dashboard';
+
+  let _tab = 'login';
+
+  // ── Remember Me ──
+  const RM_KEY = 'ls_remember_email';
+  const savedEmail = localStorage.getItem(RM_KEY);
+  if (savedEmail) {
+    document.getElementById('login-email').value = savedEmail;
+    document.getElementById('remember-me').checked = true;
+  }
+
+  // ── Count-up animation ──
+  function countUp(el, target, suffix) {
+    const start = Date.now();
+    const dur = 1200;
+    function tick() {
+      const t = Math.min(1, (Date.now() - start) / dur);
+      const ease = t < 0.5 ? 4*t*t*t : 1 - Math.pow(-2*t+2,3)/2;
+      el.textContent = Math.round(ease * target) + suffix;
+      if (t < 1) requestAnimationFrame(tick);
+    }
+    requestAnimationFrame(tick);
+  }
+  const statQ = document.getElementById('stat-q');
+  const statS = document.getElementById('stat-s');
+  if (statQ) countUp(statQ, 1000, '+');
+  if (statS) countUp(statS, 4, '');
+
+  // ── Progress bar ──
+  let _progTimer = null;
+  function startProgress() {
+    const bar = document.getElementById('auth-progress');
+    bar.style.display = 'block';
+    bar.style.width = '0%';
+    bar.style.transition = 'none';
+    requestAnimationFrame(() => {
+      bar.style.transition = 'width 2.5s cubic-bezier(.1,0,.05,1)';
+      bar.style.width = '80%';
+    });
+  }
+  function finishProgress() {
+    const bar = document.getElementById('auth-progress');
+    bar.style.transition = 'width .2s ease';
+    bar.style.width = '100%';
+    setTimeout(() => { bar.style.display = 'none'; bar.style.width = '0%'; }, 300);
+  }
+
+  // ── Success button ──
+  function showBtnSuccess(btnId, label) {
+    const btn = document.getElementById(btnId);
+    btn.classList.remove('loading');
+    btn.classList.add('success');
+    btn.querySelector('.auth-btn-lbl').textContent = '✓ ' + label;
+  }
+
+  const HELLO = { login: 'С возвращением!', register: 'Создать аккаунт' };
+  const SUB   = { login: 'Войдите в свой аккаунт', register: 'Регистрация займёт 30 секунд' };
+
+  function switchTab(tab) {
+    if (_tab === tab) return;
+    _tab = tab;
+    document.getElementById('auth-hello').textContent = HELLO[tab];
+    document.getElementById('auth-sub').textContent   = SUB[tab];
+    document.querySelectorAll('.auth-tab').forEach(b => b.classList.toggle('active', b.dataset.tab === tab));
+    document.getElementById('auth-tabs').classList.toggle('on-reg', tab === 'register');
+    // Slide transition
+    const formOut = document.getElementById(tab === 'login' ? 'form-register' : 'form-login');
+    const formIn  = document.getElementById('form-' + tab);
+    formOut.classList.add('hidden');
+    formIn.classList.remove('hidden');
+    formIn.style.opacity = '0';
+    formIn.style.transform = 'translateX(' + (tab === 'login' ? '-12px' : '12px') + ')';
+    requestAnimationFrame(() => {
+      formIn.style.transition = 'opacity .22s ease, transform .22s ease';
+      formIn.style.opacity = '1';
+      formIn.style.transform = 'translateX(0)';
+    });
+    hideError('err-login'); hideError('err-reg');
+    const f = document.querySelector('#form-' + tab + ' .auth-input');
+    if (f) setTimeout(() => f.focus(), 60);
+  }
+
+  function showError(id, msg) {
+    const el = document.getElementById(id);
+    document.getElementById(id + '-text').textContent = msg;
+    el.classList.add('visible');
+    const form = el.closest('.auth-form');
+    if (form) {
+      form.classList.remove('shake');
+      void form.offsetWidth;
+      form.classList.add('shake');
+      form.addEventListener('animationend', () => form.classList.remove('shake'), { once: true });
+    }
+    form?.querySelectorAll('.auth-input').forEach(inp => inp.classList.add('invalid'));
+  }
+  function hideError(id) {
+    document.getElementById(id).classList.remove('visible');
+    document.getElementById(id)?.closest('.auth-form')?.querySelectorAll('.auth-input.invalid').forEach(inp => inp.classList.remove('invalid'));
+  }
+
+  function setLoading(btnId, loading) {
+    const btn = document.getElementById(btnId);
+    btn.disabled = loading;
+    btn.classList.toggle('loading', loading);
+    if (loading) btn.classList.remove('success');
+  }
+
+  function toggleEye(inputId, btn) {
+    const inp = document.getElementById(inputId);
+    const isText = inp.type === 'text';
+    inp.type = isText ? 'password' : 'text';
+    btn.innerHTML = isText
+      ? `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>`
+      : `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>`;
+    btn.style.color = isText ? '' : 'var(--violet)';
+  }
+
+  // ── Caps Lock detection ──
+  function watchCaps(inputId, warnId) {
+    const inp  = document.getElementById(inputId);
+    const warn = document.getElementById(warnId);
+    if (!inp || !warn) return;
+    inp.addEventListener('keyup', e => {
+      warn.classList.toggle('show', e.getModifierState && e.getModifierState('CapsLock'));
+    });
+    inp.addEventListener('blur', () => warn.classList.remove('show'));
+  }
+  watchCaps('login-pass', 'caps-login-pass');
+  watchCaps('reg-pass',   'caps-reg-pass');
+
+  // ── Email icon validation ──
+  function watchEmail(inputId) {
+    const inp  = document.getElementById(inputId);
+    if (!inp) return;
+    const icon = inp.closest('.auth-input-wrap')?.querySelector('.auth-input-icon');
+    if (!icon) return;
+    inp.addEventListener('input', () => {
+      const valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(inp.value);
+      icon.style.color = inp.value.length > 3 ? (valid ? '#22c55e' : '#ef4444') : '';
+    });
+  }
+  watchEmail('login-email');
+  watchEmail('reg-email');
+
+  // ── Login ──
+  document.getElementById('form-login').addEventListener('submit', async e => {
+    e.preventDefault();
+    hideError('err-login');
+    setLoading('btn-login', true);
+    startProgress();
+    try {
+      const email = document.getElementById('login-email').value;
+      const pass  = document.getElementById('login-pass').value;
+      if (document.getElementById('remember-me').checked) {
+        localStorage.setItem(RM_KEY, email);
+      } else {
+        localStorage.removeItem(RM_KEY);
+      }
+      await LS.login(email, pass);
+      finishProgress();
+      showBtnSuccess('btn-login', 'Входим...');
+      const u = LS.getUser();
+      setTimeout(() => {
+        window.location.href = ['teacher', 'admin'].includes(u?.role) ? '/classes' : '/dashboard';
+      }, 400);
+    } catch (err) {
+      finishProgress();
+      showError('err-login', err.message);
+      setLoading('btn-login', false);
+    }
+  });
+
+  // ── Register ──
+  document.getElementById('form-register').addEventListener('submit', async e => {
+    e.preventDefault();
+    hideError('err-reg');
+    setLoading('btn-reg', true);
+    startProgress();
+    try {
+      await LS.register(
+        document.getElementById('reg-email').value,
+        document.getElementById('reg-pass').value,
+        document.getElementById('reg-name').value
+      );
+      finishProgress();
+      showBtnSuccess('btn-reg', 'Аккаунт создан!');
+      const u = LS.getUser();
+      setTimeout(() => { window.location.href = ['teacher', 'admin'].includes(u?.role) ? '/classes' : '/dashboard'; }, 500);
+    } catch (err) {
+      finishProgress();
+      showError('err-reg', err.message);
+      setLoading('btn-reg', false);
+    }
+  });
+
+  // ── Password strength ──
+  const STRENGTH_LABELS = ['', 'Слабый', 'Средний', 'Хороший', 'Надёжный'];
+  function calcStrength(pw) {
+    if (!pw) return 0;
+    let s = 0;
+    if (pw.length >= 6) s++;
+    if (pw.length >= 10) s++;
+    if (/[A-Z]/.test(pw) && /[a-z]/.test(pw)) s++;
+    if (/[\d!@#$%^&*()_\-+=[\]{};:'",.<>?/\\|`~]/.test(pw)) s++;
+    return s;
+  }
+
+  document.getElementById('reg-pass').addEventListener('input', function() {
+    const pw = this.value;
+    const str = calcStrength(pw);
+    const wrap = document.getElementById('pw-strength');
+    wrap.style.visibility = pw ? 'visible' : 'hidden';
+    for (let i = 1; i <= 4; i++) {
+      const seg = document.getElementById(`pw-s${i}`);
+      seg.className = `pw-seg${i <= str ? ` lit s${str}` : ''}`;
+    }
+    const lbl = document.getElementById('pw-lbl');
+    lbl.className = `pw-lbl${str ? ` s${str}` : ''}`;
+    lbl.textContent = pw ? STRENGTH_LABELS[str] : '';
+  });
+
+  // Clear invalid on typing
+  document.querySelectorAll('.auth-input').forEach(inp => {
+    inp.addEventListener('input', () => inp.classList.remove('invalid'));
+  });
+
+  // ── Neural Network canvas ──
+  (function() {
+    const canvas = document.getElementById('ll-canvas');
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    let W, H, mouse = { x: -999, y: -999 }, tick = 0;
+
+    const COLORS   = ['155,93,229', '6,214,224', '241,91,181', '56,189,248'];
+    const CONN_D   = 145;
+    const N_NODES  = 90;
+    const nodes    = [];
+    const signals  = [];    // pulses traveling along edges
+
+    function resize() {
+      const p = canvas.parentElement;
+      W = canvas.width  = p.clientWidth  || p.offsetWidth  || 800;
+      H = canvas.height = p.clientHeight || p.offsetHeight || 600;
+    }
+    resize();
+    new ResizeObserver(resize).observe(canvas.parentElement);
+
+    function mkNode(x, y, burst) {
+      const hub = !burst && Math.random() < 0.13;
+      return {
+        x: x ?? Math.random() * W,
+        y: y ?? Math.random() * H,
+        vx: (Math.random() - 0.5) * (burst ? 2.0 : 0.45),
+        vy: (Math.random() - 0.5) * (burst ? 2.0 : 0.45),
+        r:  hub ? 3.8 + Math.random() * 1.4 : 1.4 + Math.random() * 1.6,
+        hub,
+        color: COLORS[Math.floor(Math.random() * COLORS.length)],
+        pulse: Math.random() * Math.PI * 2,
+        life:  burst ? 1 : null
+      };
+    }
+    for (let i = 0; i < N_NODES; i++) nodes.push(mkNode());
+
+    const par = canvas.parentElement;
+    par.addEventListener('mousemove', e => {
+      const r = canvas.getBoundingClientRect();
+      mouse.x = e.clientX - r.left; mouse.y = e.clientY - r.top;
+    });
+    par.addEventListener('mouseleave', () => { mouse.x = -999; mouse.y = -999; });
+    par.addEventListener('click', e => {
+      const r = canvas.getBoundingClientRect();
+      const cx = e.clientX - r.left, cy = e.clientY - r.top;
+      for (let i = 0; i < 8; i++) {
+        const n = mkNode(cx, cy, true);
+        const a = (i / 8) * Math.PI * 2;
+        n.vx = Math.cos(a) * (1.6 + Math.random());
+        n.vy = Math.sin(a) * (1.6 + Math.random());
+        nodes.push(n);
+      }
+    });
+
+    const TAIL_LEN = 10; // comet tail steps
+
+    function spawnSignal(ax, ay, bx, by, color, nodeB) {
+      signals.push({
+        ax, ay, bx, by,
+        t: 0,
+        spd: 0.007 + Math.random() * 0.007,
+        color,
+        nodeB,        // destination node ref for flash (B)
+        tail: [],     // comet tail history (A)
+        edgeActive: false
+      });
+    }
+
+    // active edge map: "i,j" → brightness boost (C)
+    const activeEdges = new Map();
+
+    function draw() {
+      ctx.clearRect(0, 0, W, H);
+      tick++;
+
+      // ── update nodes ──
+      for (let i = nodes.length - 1; i >= 0; i--) {
+        const n = nodes[i];
+        n.pulse += 0.02;
+        if (n.flash > 0) n.flash -= 0.06; // B: decay flash
+
+        const mdx = mouse.x - n.x, mdy = mouse.y - n.y;
+        const md  = Math.sqrt(mdx * mdx + mdy * mdy) || 1;
+        if (md < 190) {
+          const f = (190 - md) / 190;
+          if (md < 65) { n.vx -= (mdx / md) * f * 0.042; n.vy -= (mdy / md) * f * 0.042; }
+          else         { n.vx += (mdx / md) * f * 0.020; n.vy += (mdy / md) * f * 0.020; }
+        }
+
+        n.vx *= 0.986; n.vy *= 0.986;
+        n.x += n.vx;   n.y += n.vy;
+        if (n.x < 0) { n.x = 0; n.vx =  Math.abs(n.vx); }
+        if (n.x > W) { n.x = W; n.vx = -Math.abs(n.vx); }
+        if (n.y < 0) { n.y = 0; n.vy =  Math.abs(n.vy); }
+        if (n.y > H) { n.y = H; n.vy = -Math.abs(n.vy); }
+
+        if (n.life !== null) {
+          n.life -= 0.018;
+          if (n.life <= 0) { nodes.splice(i, 1); continue; }
+        }
+      }
+
+      // ── build active edge set from signals (C) ──
+      activeEdges.clear();
+      for (const s of signals) {
+        if (s._edgeKey) activeEdges.set(s._edgeKey, Math.max(activeEdges.get(s._edgeKey) || 0, 1 - Math.abs(s.t - 0.5) * 2));
+      }
+
+      // ── draw edges + collect pairs ──
+      const pairs = [];
+      for (let i = 0; i < nodes.length; i++) {
+        for (let j = i + 1; j < nodes.length; j++) {
+          const a = nodes[i], b = nodes[j];
+          if (a.life !== null || b.life !== null) continue;
+          const dx = a.x - b.x, dy = a.y - b.y;
+          const d  = Math.sqrt(dx * dx + dy * dy);
+          if (d < CONN_D) {
+            pairs.push([a, b, i, j]);
+            const key = i + ',' + j;
+            const boost = activeEdges.get(key) || 0;  // C: active boost
+            const baseAlpha = (1 - d / CONN_D) * (a.hub || b.hub ? 0.28 : 0.16);
+            const alpha = baseAlpha + boost * 0.38;
+            const lw    = (a.hub || b.hub ? 1.1 : 0.65) + boost * 0.8;
+            ctx.beginPath();
+            ctx.moveTo(a.x, a.y);
+            ctx.lineTo(b.x, b.y);
+            ctx.strokeStyle = boost > 0.05
+              ? `rgba(${a.color},${Math.min(alpha, 0.7)})`
+              : `rgba(155,93,229,${alpha})`;
+            ctx.lineWidth = lw;
+            ctx.stroke();
+          }
+        }
+      }
+
+      // ── spawn signals ──
+      if (tick % 16 === 0 && signals.length < 30 && pairs.length > 0) {
+        const idx = Math.floor(Math.random() * pairs.length);
+        const [a, b, ni, nj] = pairs[idx];
+        const color = Math.random() < 0.5 ? a.color : b.color;
+        const sig = { ax: a.x, ay: a.y, bx: b.x, by: b.y,
+          t: 0, spd: 0.007 + Math.random() * 0.007,
+          color, nodeB: b, tail: [], _edgeKey: ni + ',' + nj };
+        signals.push(sig);
+      }
+
+      // ── draw signals: comet tail + head ──
+      for (let i = signals.length - 1; i >= 0; i--) {
+        const s = signals[i];
+        s.t += s.spd;
+
+        // B: flash destination node on arrival
+        if (s.t >= 1) {
+          if (s.nodeB && s.nodeB.flash === undefined) s.nodeB.flash = 0;
+          if (s.nodeB) s.nodeB.flash = 1.0;
+          signals.splice(i, 1);
+          continue;
+        }
+
+        const x = s.ax + (s.bx - s.ax) * s.t;
+        const y = s.ay + (s.by - s.ay) * s.t;
+        const fade = s.t < 0.12 ? s.t / 0.12 : s.t > 0.88 ? (1 - s.t) / 0.12 : 1;
+
+        // A: push tail, limit length
+        s.tail.push({ x, y });
+        if (s.tail.length > TAIL_LEN) s.tail.shift();
+
+        // A: draw comet tail
+        for (let k = 0; k < s.tail.length - 1; k++) {
+          const tf = (k / TAIL_LEN) * fade;
+          ctx.beginPath();
+          ctx.moveTo(s.tail[k].x, s.tail[k].y);
+          ctx.lineTo(s.tail[k + 1].x, s.tail[k + 1].y);
+          ctx.strokeStyle = `rgba(${s.color},${tf * 0.55})`;
+          ctx.lineWidth = 1.5 * (k / TAIL_LEN);
+          ctx.stroke();
+        }
+
+        // head outer glow
+        const g = ctx.createRadialGradient(x, y, 0, x, y, 9);
+        g.addColorStop(0, `rgba(${s.color},${0.8 * fade})`);
+        g.addColorStop(1, `rgba(${s.color},0)`);
+        ctx.beginPath();
+        ctx.arc(x, y, 9, 0, Math.PI * 2);
+        ctx.fillStyle = g;
+        ctx.fill();
+
+        // head core
+        ctx.beginPath();
+        ctx.arc(x, y, 2.5, 0, Math.PI * 2);
+        ctx.fillStyle = `rgba(255,255,255,${0.97 * fade})`;
+        ctx.fill();
+      }
+
+      // ── draw nodes ──
+      for (const n of nodes) {
+        const flash  = Math.max(0, n.flash || 0);   // B
+        const baseA  = n.life !== null ? n.life * 0.9 : 0.5 + Math.sin(n.pulse) * 0.12 + flash * 0.5;
+        const radius = n.r * (0.93 + Math.sin(n.pulse) * 0.07 + flash * 0.5);
+        const glowR  = radius * (n.hub ? 5.5 : 4) * (1 + flash * 0.8);
+
+        // glow halo (brighter on flash)
+        const g = ctx.createRadialGradient(n.x, n.y, 0, n.x, n.y, glowR);
+        g.addColorStop(0, `rgba(${n.color},${Math.min(baseA * 0.38 + flash * 0.4, 0.9)})`);
+        g.addColorStop(1, `rgba(${n.color},0)`);
+        ctx.beginPath();
+        ctx.arc(n.x, n.y, glowR, 0, Math.PI * 2);
+        ctx.fillStyle = g;
+        ctx.fill();
+
+        // B: flash ring
+        if (flash > 0.05) {
+          ctx.beginPath();
+          ctx.arc(n.x, n.y, radius + flash * 10, 0, Math.PI * 2);
+          ctx.strokeStyle = `rgba(${n.color},${flash * 0.6})`;
+          ctx.lineWidth = flash * 2;
+          ctx.stroke();
+        }
+
+        // core dot
+        ctx.beginPath();
+        ctx.arc(n.x, n.y, radius, 0, Math.PI * 2);
+        ctx.fillStyle = `rgba(${n.color},${Math.min(baseA, 1)})`;
+        ctx.fill();
+
+        // hub: outer ring
+        if (n.hub) {
+          ctx.beginPath();
+          ctx.arc(n.x, n.y, radius + 3, 0, Math.PI * 2);
+          ctx.strokeStyle = `rgba(${n.color},${baseA * 0.38})`;
+          ctx.lineWidth = 1;
+          ctx.stroke();
+        }
+      }
+
+      requestAnimationFrame(draw);
+    }
+    draw();
+  })();
+
+  // auto-focus: if email was pre-filled, focus password
+  if (savedEmail) {
+    document.getElementById('login-pass').focus();
+  } else {
+    document.getElementById('login-email').focus();
+  }
+</script>
+</body>
+</html>
diff --git a/frontend/parent.html b/frontend/parent.html
new file mode 100644
index 0000000..4a922b6
--- /dev/null
+++ b/frontend/parent.html
@@ -0,0 +1,828 @@
+<!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" />
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    :root {
+      --violet: #9B5DE5; --cyan: #06D6E0; --bg: #F8F9FB; --text: #0F172A;
+      --text-2: #475569; --text-3: #8898AA; --border: #E8EBF0;
+      --card: #fff; --shadow: 0 2px 16px rgba(15,23,42,0.06);
+      --green: #22c55e; --amber: #f59e0b; --red: #ef4444; --blue: #3b82f6;
+    }
+    body {
+      font-family: 'Manrope', system-ui, sans-serif;
+      background: var(--bg); color: var(--text); min-height: 100vh;
+      background-image: radial-gradient(circle, rgba(155,93,229,0.03) 1px, transparent 1px);
+      background-size: 24px 24px;
+    }
+    .ic { display:inline-block; width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; }
+
+    /* ── Animations ── */
+    @keyframes spin { to { transform: rotate(360deg); } }
+    @keyframes fadeUp {
+      from { opacity: 0; transform: translateY(20px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    @keyframes pulseRing {
+      0%,100% { box-shadow: 0 0 0 0 rgba(155,93,229,0.3); }
+      50%     { box-shadow: 0 0 0 8px rgba(155,93,229,0); }
+    }
+    .anim { opacity: 0; animation: fadeUp .5s cubic-bezier(.4,0,.2,1) forwards; }
+
+    /* ── Header ── */
+    .ph {
+      position: sticky; top: 0; z-index: 100;
+      background: rgba(255,255,255,0.88); backdrop-filter: blur(16px);
+      border-bottom: 1px solid var(--border);
+      padding: 0 24px; height: 60px;
+      display: flex; align-items: center; gap: 14px;
+    }
+    .ph::after {
+      content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px;
+      background: linear-gradient(90deg, var(--violet), var(--cyan), var(--violet));
+      background-size: 200% 100%;
+      animation: shimmerLine 3s linear infinite;
+    }
+    @keyframes shimmerLine { to { background-position: -200% 0; } }
+    .ph-logo {
+      font-family: 'Unbounded', sans-serif; font-size: 0.9rem; font-weight: 800;
+      color: var(--violet); text-decoration: none; flex-shrink: 0;
+    }
+    .ph-logo span { color: var(--cyan); }
+    .ph-sep { width: 1px; height: 24px; background: var(--border); flex-shrink: 0; }
+    .ph-title {
+      flex: 1; font-size: 0.82rem; font-weight: 600; color: var(--text-2);
+      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+    }
+    .ph-refresh {
+      width: 36px; height: 36px; border-radius: 10px;
+      border: 1.5px solid var(--border); background: #fff; cursor: pointer;
+      display: flex; align-items: center; justify-content: center;
+      color: var(--text-3); transition: all .2s;
+    }
+    .ph-refresh:hover { border-color: var(--cyan); color: var(--cyan); transform: rotate(90deg); }
+    .ph-notif {
+      position: relative; width: 36px; height: 36px; border-radius: 10px;
+      border: 1.5px solid var(--border); background: #fff; cursor: pointer;
+      display: flex; align-items: center; justify-content: center;
+      color: var(--text-3); transition: all .2s;
+    }
+    .ph-notif:hover { border-color: var(--violet); color: var(--violet); }
+    .ph-notif-badge {
+      position: absolute; top: -5px; right: -5px;
+      min-width: 18px; height: 18px; border-radius: 99px; padding: 0 5px;
+      background: linear-gradient(135deg, var(--red), #dc2626); color: #fff;
+      font-size: 0.6rem; font-weight: 800;
+      display: none; align-items: center; justify-content: center;
+      font-family: 'Unbounded', sans-serif; border: 2px solid #fff;
+    }
+    .ph-logout {
+      padding: 7px 16px; border: 1.5px solid var(--border); border-radius: 10px;
+      background: #fff; font-family: 'Manrope', sans-serif; font-size: 0.78rem;
+      font-weight: 600; color: var(--text-3); cursor: pointer; transition: all .2s;
+    }
+    .ph-logout:hover { border-color: var(--red); color: var(--red); background: rgba(239,68,68,0.04); }
+
+    /* ── Main ── */
+    .pm { max-width: 1100px; margin: 0 auto; padding: 24px 24px 80px; }
+
+    /* ══ Student Hero Card ══ */
+    .ps-card {
+      background: linear-gradient(135deg, #0d0b28 0%, #1a1248 40%, #0f1635 100%);
+      border-radius: 24px; padding: 32px 28px; margin-bottom: 24px;
+      position: relative; overflow: hidden; color: #fff;
+    }
+    .ps-card::before {
+      content: ''; position: absolute; inset: 0; pointer-events: none;
+      background-image: radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px);
+      background-size: 20px 20px;
+    }
+    .ps-blob1 {
+      position: absolute; width: 280px; height: 280px; border-radius: 50%;
+      background: radial-gradient(circle, rgba(155,93,229,0.3) 0%, transparent 70%);
+      top: -100px; right: -60px; pointer-events: none;
+    }
+    .ps-blob2 {
+      position: absolute; width: 180px; height: 180px; border-radius: 50%;
+      background: radial-gradient(circle, rgba(6,214,224,0.15) 0%, transparent 70%);
+      bottom: -50px; left: -30px; pointer-events: none;
+    }
+    .ps-blob3 {
+      position: absolute; width: 100px; height: 100px; border-radius: 50%;
+      background: radial-gradient(circle, rgba(255,209,102,0.1) 0%, transparent 70%);
+      top: 20px; left: 40%; pointer-events: none;
+    }
+    .ps-inner { position: relative; z-index: 1; }
+    .ps-top { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
+    .ps-avatar-wrap { position: relative; width: 72px; height: 72px; flex-shrink: 0; }
+    .ps-avatar-ring {
+      position: absolute; inset: -4px; border-radius: 50%;
+      background: conic-gradient(var(--violet) 0%, var(--cyan) 50%, var(--violet) 100%);
+      animation: pulseRing 2.5s ease infinite;
+    }
+    .ps-avatar-ring-inner {
+      position: absolute; inset: 2px; border-radius: 50%; background: #1a1248;
+    }
+    .ps-avatar {
+      position: absolute; inset: 4px; border-radius: 50%;
+      background: linear-gradient(135deg, rgba(155,93,229,0.6), rgba(6,214,224,0.4));
+      display: flex; align-items: center; justify-content: center;
+      font-family: 'Unbounded', sans-serif; font-size: 1.2rem; font-weight: 800;
+    }
+    .ps-info { flex: 1; min-width: 0; }
+    .ps-name {
+      font-family: 'Unbounded', sans-serif; font-size: 1.1rem; font-weight: 800;
+      margin-bottom: 6px; line-height: 1.2;
+    }
+    .ps-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+    .ps-level-badge {
+      display: inline-flex; align-items: center; gap: 5px;
+      padding: 4px 12px; border-radius: 99px;
+      background: linear-gradient(135deg, rgba(155,93,229,0.3), rgba(6,214,224,0.15));
+      font-size: 0.7rem; font-weight: 700; color: rgba(255,255,255,0.9);
+      letter-spacing: 0.04em; border: 1px solid rgba(155,93,229,0.3);
+    }
+    .ps-activity-tag {
+      font-size: 0.7rem; color: rgba(255,255,255,0.5); font-weight: 600;
+    }
+    .ps-activity-tag b { color: rgba(255,255,255,0.85); }
+
+    /* XP bar */
+    .ps-xp { margin-bottom: 20px; }
+    .ps-xp-top { display: flex; justify-content: space-between; margin-bottom: 6px; }
+    .ps-xp-lbl { font-size: 0.65rem; font-weight: 700; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.06em; }
+    .ps-xp-val { font-size: 0.65rem; font-weight: 800; font-family: 'Unbounded', sans-serif; color: rgba(255,255,255,0.7); }
+    .ps-xp-bar { height: 6px; background: rgba(255,255,255,0.08); border-radius: 99px; overflow: hidden; }
+    .ps-xp-fill {
+      height: 100%; border-radius: 99px;
+      background: linear-gradient(90deg, var(--violet), var(--cyan));
+      transition: width 1s cubic-bezier(.4,0,.2,1);
+    }
+
+    /* Chips row */
+    .ps-chips { display: flex; gap: 10px; flex-wrap: wrap; }
+    .ps-chip {
+      flex: 1; min-width: 80px; padding: 12px 14px; border-radius: 14px;
+      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
+      display: flex; align-items: center; gap: 10px;
+      transition: background .2s;
+    }
+    .ps-chip:hover { background: rgba(255,255,255,0.1); }
+    .ps-chip-ic {
+      width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 0.85rem;
+    }
+    .ps-chip-ic.xp   { background: rgba(155,93,229,0.2); color: #c4a5f0; }
+    .ps-chip-ic.str  { background: rgba(255,152,0,0.15); color: #ffb74d; }
+    .ps-chip-ic.coin { background: rgba(255,209,102,0.15); color: #FFD166; }
+    .ps-chip-ic.sess { background: rgba(6,214,224,0.15); color: #06D6E0; }
+    .ps-chip-body {}
+    .ps-chip-val {
+      font-family: 'Unbounded', sans-serif; font-size: 0.95rem; font-weight: 800; line-height: 1;
+    }
+    .ps-chip-lbl { font-size: 0.58rem; color: rgba(255,255,255,0.45); margin-top: 3px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
+
+    /* ══ Alerts ══ */
+    .pa-alerts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
+    .pa-alert {
+      display: flex; align-items: center; gap: 14px;
+      padding: 16px 20px; border-radius: 16px; font-size: 0.85rem; font-weight: 600;
+      backdrop-filter: blur(4px);
+    }
+    .pa-alert-ic {
+      width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
+      display: flex; align-items: center; justify-content: center;
+    }
+    .pa-alert.warn { background: rgba(245,158,11,0.06); color: #92400e; border: 1px solid rgba(245,158,11,0.15); }
+    .pa-alert.warn .pa-alert-ic { background: rgba(245,158,11,0.12); color: var(--amber); }
+    .pa-alert.danger { background: rgba(239,68,68,0.06); color: #991b1b; border: 1px solid rgba(239,68,68,0.15); }
+    .pa-alert.danger .pa-alert-ic { background: rgba(239,68,68,0.12); color: var(--red); }
+
+    /* ══ Stats Chips ══ */
+    .pg-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
+    .pg-chip {
+      background: var(--card); border: 1.5px solid var(--border);
+      border-radius: 18px; padding: 20px 18px;
+      box-shadow: var(--shadow); transition: all .25s;
+      position: relative; overflow: hidden;
+    }
+    .pg-chip::before {
+      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
+      border-radius: 18px 18px 0 0;
+    }
+    .pg-chip:nth-child(1)::before { background: linear-gradient(90deg, var(--violet), #c084fc); }
+    .pg-chip:nth-child(2)::before { background: linear-gradient(90deg, var(--green), #86efac); }
+    .pg-chip:nth-child(3)::before { background: linear-gradient(90deg, var(--amber), #fcd34d); }
+    .pg-chip:nth-child(4)::before { background: linear-gradient(90deg, var(--cyan), #67e8f9); }
+    .pg-chip:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(15,23,42,0.1); }
+    .pg-chip-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
+    .pg-chip-ic {
+      width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
+      display: flex; align-items: center; justify-content: center;
+    }
+    .pg-chip:nth-child(1) .pg-chip-ic { background: rgba(155,93,229,0.1); color: var(--violet); }
+    .pg-chip:nth-child(2) .pg-chip-ic { background: rgba(34,197,94,0.1); color: var(--green); }
+    .pg-chip:nth-child(3) .pg-chip-ic { background: rgba(245,158,11,0.1); color: var(--amber); }
+    .pg-chip:nth-child(4) .pg-chip-ic { background: rgba(6,214,224,0.1); color: var(--cyan); }
+    .pg-chip-val {
+      font-family: 'Unbounded', sans-serif; font-size: 1.5rem; font-weight: 800;
+      color: var(--text); line-height: 1;
+    }
+    .pg-chip-lbl { font-size: 0.7rem; color: var(--text-3); font-weight: 600; }
+
+    /* ══ Grid ══ */
+    .pg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 24px; }
+
+    /* ══ Widget ══ */
+    .pw {
+      background: var(--card); border: 1.5px solid var(--border);
+      border-radius: 20px; padding: 22px 24px;
+      box-shadow: var(--shadow); transition: box-shadow .2s;
+    }
+    .pw:hover { box-shadow: 0 6px 28px rgba(15,23,42,0.08); }
+    .pw-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
+    .pw-icon {
+      width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
+      display: flex; align-items: center; justify-content: center;
+    }
+    .pw-title {
+      font-family: 'Unbounded', sans-serif; font-size: 0.72rem; font-weight: 800;
+      color: var(--text); letter-spacing: 0.03em;
+    }
+    .pw-subtitle { font-size: 0.7rem; color: var(--text-3); margin-top: 1px; }
+    .pw-empty { text-align: center; padding: 28px 16px; color: var(--text-3); font-size: 0.85rem; font-weight: 600; }
+
+    /* Widget icon colors */
+    .pw-ic-violet { background: linear-gradient(135deg, rgba(155,93,229,0.12), rgba(155,93,229,0.06)); color: var(--violet); }
+    .pw-ic-red    { background: linear-gradient(135deg, rgba(239,68,68,0.12), rgba(239,68,68,0.06)); color: var(--red); }
+    .pw-ic-blue   { background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(59,130,246,0.06)); color: var(--blue); }
+    .pw-ic-green  { background: linear-gradient(135deg, rgba(34,197,94,0.12), rgba(34,197,94,0.06)); color: var(--green); }
+    .pw-ic-amber  { background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(245,158,11,0.06)); color: var(--amber); }
+    .pw-ic-cyan   { background: linear-gradient(135deg, rgba(6,214,224,0.12), rgba(6,214,224,0.06)); color: var(--cyan); }
+
+    /* ── Subject bars ── */
+    .psb-row { margin-bottom: 14px; }
+    .psb-row:last-child { margin-bottom: 0; }
+    .psb-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
+    .psb-name { font-size: 0.8rem; font-weight: 600; color: var(--text-2); }
+    .psb-pct { font-size: 0.8rem; font-weight: 800; font-family: 'Unbounded', sans-serif; }
+    .psb-bar { height: 8px; background: rgba(15,23,42,0.05); border-radius: 99px; overflow: hidden; }
+    .psb-fill { height: 100%; border-radius: 99px; transition: width .8s cubic-bezier(.4,0,.2,1); }
+
+    /* ── Weak topics ── */
+    .pwt-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(15,23,42,0.05); }
+    .pwt-row:last-child { border: none; }
+    .pwt-num {
+      width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 0.65rem; font-weight: 800; color: #fff;
+      font-family: 'Unbounded', sans-serif;
+    }
+    .pwt-info { flex: 1; }
+    .pwt-name { font-size: 0.82rem; font-weight: 600; color: var(--text); }
+    .pwt-subj { font-size: 0.68rem; color: var(--text-3); margin-top: 1px; }
+    .pwt-pct { font-size: 0.82rem; font-weight: 800; font-family: 'Unbounded', sans-serif; }
+
+    /* ── Deadlines ── */
+    .pd-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(15,23,42,0.05); }
+    .pd-row:last-child { border: none; }
+    .pd-icon-wrap {
+      width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
+      display: flex; align-items: center; justify-content: center;
+    }
+    .pd-icon-wrap.done   { background: rgba(34,197,94,0.1); color: var(--green); }
+    .pd-icon-wrap.missed { background: rgba(239,68,68,0.1); color: var(--red); }
+    .pd-icon-wrap.pending { background: rgba(59,130,246,0.1); color: var(--blue); }
+    .pd-info { flex: 1; }
+    .pd-title { font-size: 0.82rem; font-weight: 600; color: var(--text); }
+    .pd-date { font-size: 0.7rem; color: var(--text-3); margin-top: 2px; }
+
+    /* ── Submissions ── */
+    .psu-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(15,23,42,0.05); }
+    .psu-row:last-child { border: none; }
+    .psu-info { flex: 1; min-width: 0; }
+    .psu-title { font-size: 0.82rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .psu-date { font-size: 0.7rem; color: var(--text-3); margin-top: 2px; }
+    .psu-badge {
+      padding: 4px 11px; border-radius: 99px; font-size: 0.63rem; font-weight: 700;
+      text-transform: uppercase; letter-spacing: 0.05em; flex-shrink: 0;
+    }
+    .psu-badge.new        { background: rgba(59,130,246,0.08); color: var(--blue); }
+    .psu-badge.resubmitted{ background: rgba(245,158,11,0.08); color: var(--amber); }
+    .psu-badge.reviewed   { background: rgba(155,93,229,0.08); color: var(--violet); }
+    .psu-badge.accepted   { background: rgba(34,197,94,0.08); color: var(--green); }
+    .psu-badge.revision   { background: rgba(239,68,68,0.08); color: var(--red); }
+    .psu-grade {
+      font-family: 'Unbounded', sans-serif; font-size: 0.9rem; font-weight: 800; flex-shrink: 0;
+      width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
+    }
+
+    /* ── Course progress ── */
+    .pcp-row { margin-bottom: 14px; }
+    .pcp-row:last-child { margin-bottom: 0; }
+    .pcp-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
+    .pcp-name { font-size: 0.8rem; font-weight: 600; color: var(--text-2); }
+    .pcp-pct { font-size: 0.72rem; font-weight: 700; color: var(--text-3); }
+    .pcp-bar { height: 8px; background: rgba(15,23,42,0.05); border-radius: 99px; overflow: hidden; }
+    .pcp-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--violet), var(--cyan)); transition: width .8s; }
+
+    /* ── Heatmap ── */
+    .phm { display: flex; flex-wrap: wrap; gap: 3px; }
+    .phm-cell {
+      width: 14px; height: 14px; border-radius: 3px;
+      background: rgba(155,93,229,0.06); transition: all .15s;
+    }
+    .phm-cell:hover { transform: scale(1.4); }
+    .phm-cell.l1 { background: rgba(155,93,229,0.15); }
+    .phm-cell.l2 { background: rgba(155,93,229,0.3); }
+    .phm-cell.l3 { background: rgba(155,93,229,0.5); }
+    .phm-cell.l4 { background: rgba(155,93,229,0.75); }
+    .phm-legend { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 0.65rem; color: var(--text-3); }
+    .phm-legend-cell { width: 12px; height: 12px; border-radius: 2px; }
+
+    /* ── Weekly chart ── */
+    .pw-chart { width: 100%; height: 200px; }
+
+    /* ── Notifications ── */
+    .pn-drop {
+      position: fixed; top: 56px; right: 24px; width: 360px; max-height: 440px;
+      background: #fff; border: 1.5px solid var(--border); border-radius: 18px;
+      box-shadow: 0 16px 48px rgba(15,23,42,0.18); overflow: hidden;
+      display: none; z-index: 200; flex-direction: column;
+    }
+    .pn-drop.open { display: flex; }
+    .pn-drop-head {
+      padding: 16px 20px; font-family: 'Unbounded', sans-serif; font-size: 0.75rem;
+      font-weight: 800; border-bottom: 1px solid var(--border);
+      display: flex; align-items: center; gap: 8px;
+    }
+    .pn-drop-list { overflow-y: auto; flex: 1; max-height: 380px; }
+    .pn-item {
+      display: flex; align-items: flex-start; gap: 12px; padding: 14px 20px;
+      border-bottom: 1px solid rgba(15,23,42,0.04); cursor: pointer; transition: background .15s;
+    }
+    .pn-item:hover { background: rgba(155,93,229,0.03); }
+    .pn-item.unread { background: rgba(155,93,229,0.04); }
+    .pn-item-dot {
+      width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0;
+      background: linear-gradient(135deg, var(--violet), var(--cyan));
+    }
+    .pn-item.unread .pn-item-dot { display: block; }
+    .pn-item:not(.unread) .pn-item-dot { display: none; }
+    .pn-item-msg { font-size: 0.82rem; color: var(--text); line-height: 1.45; }
+    .pn-item-time { font-size: 0.68rem; color: var(--text-3); margin-top: 4px; }
+    .pn-empty { padding: 40px 20px; text-align: center; color: var(--text-3); font-size: 0.85rem; }
+
+    /* ── Loading / Error ── */
+    .pm-loading { text-align: center; padding: 100px 20px; }
+    .pm-loading-spinner {
+      width: 48px; height: 48px; border: 3px solid rgba(155,93,229,0.15);
+      border-top-color: var(--violet); border-radius: 50%;
+      animation: spin .8s linear infinite; margin: 0 auto 16px;
+    }
+    .pm-error { text-align: center; padding: 100px 20px; }
+    .pm-error-icon {
+      width: 64px; height: 64px; border-radius: 16px;
+      background: linear-gradient(135deg, rgba(155,93,229,0.1), rgba(6,214,224,0.06));
+      display: flex; align-items: center; justify-content: center;
+      margin: 0 auto 16px; color: var(--violet);
+    }
+    .pm-error-title {
+      font-family: 'Unbounded', sans-serif; font-size: 1rem; font-weight: 800;
+      color: var(--text); margin-bottom: 8px;
+    }
+    .pm-error-sub { font-size: 0.85rem; color: var(--text-3); line-height: 1.7; max-width: 380px; margin: 0 auto; }
+
+    /* ── Responsive ── */
+    @media (max-width: 768px) {
+      .pg-chips { grid-template-columns: 1fr 1fr; }
+      .pg-grid { grid-template-columns: 1fr; }
+      .ps-top { flex-direction: column; align-items: flex-start; }
+      .ps-chips { width: 100%; }
+      .ps-chip { min-width: 0; }
+      .pn-drop { right: 10px; left: 10px; width: auto; top: 60px; }
+      .phm-cell { width: 11px; height: 11px; }
+    }
+    @media (max-width: 480px) {
+      .pm { padding: 16px 14px 80px; }
+      .ph { padding: 0 16px; }
+      .ps-card { padding: 22px 18px; border-radius: 20px; }
+      .pg-chip { padding: 16px 14px; }
+      .pg-chip-val { font-size: 1.2rem; }
+      .ps-chips { gap: 8px; }
+      .ps-chip { padding: 10px 12px; }
+    }
+  </style>
+  <script src="https://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+</head>
+<body>
+
+<header class="ph">
+  <div class="ph-logo">Learn<span>Space</span></div>
+  <div class="ph-sep"></div>
+  <div class="ph-title" id="ph-title">Родительский кабинет</div>
+  <button class="ph-refresh" onclick="location.reload()" title="Обновить данные">
+    <svg class="ic" viewBox="0 0 24 24" style="width:16px;height:16px"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
+  </button>
+  <button class="ph-notif" id="btn-notif" onclick="toggleNotifs()">
+    <svg class="ic" viewBox="0 0 24 24" style="width:17px;height:17px"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
+    <span class="ph-notif-badge" id="notif-badge">0</span>
+  </button>
+  <button class="ph-logout" onclick="parentLogout()">Выйти</button>
+</header>
+
+<div class="pn-drop" id="pn-drop">
+  <div class="pn-drop-head">
+    <svg class="ic" viewBox="0 0 24 24" style="width:15px;height:15px;color:var(--violet)"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
+    Уведомления
+  </div>
+  <div class="pn-drop-list" id="pn-list"></div>
+</div>
+
+<main class="pm" id="main-content">
+  <div class="pm-loading">
+    <div class="pm-loading-spinner"></div>
+    <div style="font-size:0.88rem;color:var(--text-3);font-weight:600">Загрузка данных...</div>
+  </div>
+</main>
+
+<script>
+(async function() {
+  const API = window.location.origin + '/api';
+  let _delay = 0;
+  function ad() { return `animation-delay:${(_delay++) * 60}ms`; }
+
+  /* ── Auth ── */
+  const params = new URLSearchParams(location.search);
+  const linkToken = params.get('t');
+  if (linkToken) {
+    try {
+      const res = await fetch(API + '/parent/auth', {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ token: linkToken }),
+      });
+      if (!res.ok) throw new Error((await res.json().catch(() => ({}))).error || 'err');
+      const d = await res.json();
+      localStorage.setItem('ls_parent_token', d.jwt);
+      localStorage.setItem('ls_parent_student', JSON.stringify(d.student));
+      history.replaceState(null, '', '/parent');
+    } catch { showError('Ссылка недействительна', 'Возможно, она была отключена или удалена учеником. Попросите новую ссылку.'); return; }
+  }
+
+  const jwt = localStorage.getItem('ls_parent_token');
+  if (!jwt) { showError('Нет доступа', 'Для просмотра прогресса ученика откройте ссылку, полученную от ребёнка.'); return; }
+
+  async function preq(path) {
+    const res = await fetch(API + path, { headers: { 'Authorization': 'Bearer ' + jwt } });
+    if (res.status === 401) { localStorage.removeItem('ls_parent_token'); localStorage.removeItem('ls_parent_student'); showError('Сессия истекла', 'Откройте ссылку от ученика заново.'); return null; }
+    if (!res.ok) throw new Error('fail');
+    return res.json();
+  }
+
+  let data;
+  try { data = await preq('/parent/dashboard'); if (!data) return; }
+  catch { showError('Ошибка загрузки', 'Не удалось получить данные. Попробуйте обновить страницу.'); return; }
+
+  document.getElementById('ph-title').textContent = 'Прогресс: ' + esc(data.student.name);
+  if (data.unreadNotifs > 0) { const b = document.getElementById('notif-badge'); b.textContent = data.unreadNotifs; b.style.display = 'flex'; }
+
+  const main = document.getElementById('main-content');
+  main.innerHTML = '';
+  const s = data.student;
+  const t = data.totals;
+
+  /* ── Student Hero ── */
+  const initials = (s.name||'LS').split(' ').slice(0,2).map(w=>w[0]?.toUpperCase()||'').join('')||'LS';
+  const lvl = s.level || 1;
+  const xpMin = (lvl-1)*(lvl-1)*100;
+  const xpMax = lvl*lvl*100;
+  const xpPct = xpMax > xpMin ? Math.min(100, Math.round((s.xp - xpMin) / (xpMax - xpMin) * 100)) : 0;
+  const lastAct = data.recentActivity?.lastSessionDate;
+  const lastActStr = lastAct ? timeAgo(lastAct) : 'нет данных';
+
+  main.innerHTML += `
+    <div class="ps-card anim" style="${ad()}">
+      <div class="ps-blob1"></div><div class="ps-blob2"></div><div class="ps-blob3"></div>
+      <div class="ps-inner">
+        <div class="ps-top">
+          <div class="ps-avatar-wrap">
+            <div class="ps-avatar-ring"></div><div class="ps-avatar-ring-inner"></div>
+            <div class="ps-avatar">${esc(initials)}</div>
+          </div>
+          <div class="ps-info">
+            <div class="ps-name">${esc(s.name)}</div>
+            <div class="ps-meta">
+              <span class="ps-level-badge">
+                <svg class="ic" viewBox="0 0 24 24" style="width:11px;height:11px"><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>
+                Уровень ${lvl}
+              </span>
+              <span class="ps-activity-tag">Активность: <b>${lastActStr}</b></span>
+            </div>
+          </div>
+        </div>
+        <div class="ps-xp">
+          <div class="ps-xp-top">
+            <span class="ps-xp-lbl">Опыт</span>
+            <span class="ps-xp-val">${s.xp} / ${xpMax} XP</span>
+          </div>
+          <div class="ps-xp-bar"><div class="ps-xp-fill" style="width:${xpPct}%"></div></div>
+        </div>
+        <div class="ps-chips">
+          <div class="ps-chip">
+            <div class="ps-chip-ic xp"><svg class="ic" viewBox="0 0 24 24" style="width:16px;height:16px"><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></div>
+            <div class="ps-chip-body"><div class="ps-chip-val">${s.xp||0}</div><div class="ps-chip-lbl">XP</div></div>
+          </div>
+          <div class="ps-chip">
+            <div class="ps-chip-ic str"><svg class="ic" viewBox="0 0 24 24" style="width:16px;height:16px"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/></svg></div>
+            <div class="ps-chip-body"><div class="ps-chip-val">${s.streak_current||0}</div><div class="ps-chip-lbl">Стрик</div></div>
+          </div>
+          <div class="ps-chip">
+            <div class="ps-chip-ic coin"><svg class="ic" viewBox="0 0 24 24" style="width:16px;height:16px"><circle cx="12" cy="12" r="8"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg></div>
+            <div class="ps-chip-body"><div class="ps-chip-val">${s.coins||0}</div><div class="ps-chip-lbl">Монет</div></div>
+          </div>
+          <div class="ps-chip">
+            <div class="ps-chip-ic sess"><svg class="ic" viewBox="0 0 24 24" style="width:16px;height:16px"><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></div>
+            <div class="ps-chip-body"><div class="ps-chip-val">${data.recentActivity?.sessionsThisWeek||0}</div><div class="ps-chip-lbl">За неделю</div></div>
+          </div>
+        </div>
+      </div>
+    </div>`;
+
+  /* ── Alerts ── */
+  if (data.alerts?.length) {
+    let h = '<div class="pa-alerts">';
+    for (const a of data.alerts) {
+      const cls = a.type === 'deadline_missed' ? 'danger' : 'warn';
+      const ic = a.icon === 'clock'
+        ? '<svg class="ic" viewBox="0 0 24 24" style="width:17px;height:17px"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>'
+        : '<svg class="ic" viewBox="0 0 24 24" style="width:17px;height:17px"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>';
+      h += `<div class="pa-alert ${cls} anim" style="${ad()}"><div class="pa-alert-ic">${ic}</div> ${esc(a.message)}</div>`;
+    }
+    main.innerHTML += h + '</div>';
+  }
+
+  /* ── Stats chips ── */
+  main.innerHTML += `
+    <div class="pg-chips">
+      <div class="pg-chip anim" style="${ad()}">
+        <div class="pg-chip-top"><div class="pg-chip-ic"><svg class="ic" viewBox="0 0 24 24" style="width:17px;height:17px"><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="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg></div></div>
+        <div class="pg-chip-val">${t.sessions}</div><div class="pg-chip-lbl">Тестов пройдено</div>
+      </div>
+      <div class="pg-chip anim" style="${ad()}">
+        <div class="pg-chip-top"><div class="pg-chip-ic"><svg class="ic" viewBox="0 0 24 24" style="width:17px;height:17px"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg></div></div>
+        <div class="pg-chip-val">${t.avgPct}%</div><div class="pg-chip-lbl">Средний балл</div>
+      </div>
+      <div class="pg-chip anim" style="${ad()}">
+        <div class="pg-chip-top"><div class="pg-chip-ic"><svg class="ic" viewBox="0 0 24 24" style="width:17px;height:17px"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/></svg></div></div>
+        <div class="pg-chip-val">${s.streak_current}</div><div class="pg-chip-lbl">Текущий стрик</div>
+      </div>
+      <div class="pg-chip anim" style="${ad()}">
+        <div class="pg-chip-top"><div class="pg-chip-ic"><svg class="ic" viewBox="0 0 24 24" style="width:17px;height:17px"><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></div></div>
+        <div class="pg-chip-val">${t.questions}</div><div class="pg-chip-lbl">Вопросов</div>
+      </div>
+    </div>`;
+
+  /* ── Grid ── */
+  const SUBJ_COLORS = { bio:'#22c55e', chem:'#f59e0b', math:'#3b82f6', phys:'#9B5DE5', other:'#8898AA' };
+  let gridHtml = '<div class="pg-grid">';
+
+  // Subjects
+  if (data.bySubject?.length) {
+    let h = `<div class="pw anim" style="${ad()}"><div class="pw-head"><div class="pw-icon pw-ic-violet"><svg class="ic" viewBox="0 0 24 24" style="width:16px;height:16px"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg></div><div><div class="pw-title">Предметы</div><div class="pw-subtitle">Средний балл по предметам</div></div></div>`;
+    const mx = Math.max(...data.bySubject.map(s=>s.avgPct),1);
+    for (const subj of data.bySubject) {
+      const col = SUBJ_COLORS[subj.slug]||'#9B5DE5';
+      h += `<div class="psb-row"><div class="psb-top"><span class="psb-name">${esc(subj.name)}</span><span class="psb-pct" style="color:${col}">${subj.avgPct}%</span></div><div class="psb-bar"><div class="psb-fill" style="width:${Math.round(subj.avgPct/mx*100)}%;background:${col}"></div></div></div>`;
+    }
+    gridHtml += h + '</div>';
+  }
+
+  // Weak topics
+  if (data.weakTopics?.length) {
+    let h = `<div class="pw anim" style="${ad()}"><div class="pw-head"><div class="pw-icon pw-ic-red"><svg class="ic" viewBox="0 0 24 24" style="width:16px;height:16px"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></div><div><div class="pw-title">Слабые темы</div><div class="pw-subtitle">Темы с наибольшим % ошибок</div></div></div>`;
+    data.weakTopics.forEach((wt,i)=>{
+      const p = wt.errorPct;
+      const col = p>=70?'var(--red)':p>=40?'var(--amber)':'var(--green)';
+      h += `<div class="pwt-row"><div class="pwt-num" style="background:${col}">${i+1}</div><div class="pwt-info"><div class="pwt-name">${esc(wt.topic)}</div><div class="pwt-subj">${esc(wt.subject||'')}</div></div><div class="pwt-pct" style="color:${col}">${p}%</div></div>`;
+    });
+    gridHtml += h + '</div>';
+  }
+
+  // Deadlines
+  if (data.deadlines?.length) {
+    let h = `<div class="pw anim" style="${ad()}"><div class="pw-head"><div class="pw-icon pw-ic-blue"><svg class="ic" viewBox="0 0 24 24" style="width:16px;height:16px"><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></div><div><div class="pw-title">Задания</div><div class="pw-subtitle">Ближайшие дедлайны</div></div></div>`;
+    for (const d of data.deadlines) {
+      const past = new Date(d.deadline)<new Date();
+      const cls = d.done?'done':(past?'missed':'pending');
+      const ic = d.done
+        ? '<svg class="ic" viewBox="0 0 24 24" style="width:15px;height:15px"><polyline points="20 6 9 17 4 12"/></svg>'
+        : '<svg class="ic" viewBox="0 0 24 24" style="width:15px;height:15px"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>';
+      const dl = new Date(d.deadline);
+      const dlStr = dl.toLocaleDateString('ru',{day:'numeric',month:'short'});
+      h += `<div class="pd-row"><div class="pd-icon-wrap ${cls}">${ic}</div><div class="pd-info"><div class="pd-title">${esc(d.title)}</div><div class="pd-date">${d.done?'Выполнено':(past?'Просрочено':'До '+dlStr)}</div></div></div>`;
+    }
+    gridHtml += h + '</div>';
+  }
+
+  // Submissions
+  if (data.submissions?.length) {
+    const SL = {new:'Новая',resubmitted:'Повторная',reviewed:'Проверена',accepted:'Принята',revision:'Доработка'};
+    let h = `<div class="pw anim" style="${ad()}"><div class="pw-head"><div class="pw-icon pw-ic-amber"><svg class="ic" viewBox="0 0 24 24" style="width:16px;height:16px"><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></div><div><div class="pw-title">Работы</div><div class="pw-subtitle">Последние сданные работы</div></div></div>`;
+    for (const sub of data.submissions) {
+      const bc = sub.status||'new';
+      const title = sub.assignment||sub.name||'';
+      const ds = new Date(sub.date).toLocaleDateString('ru',{day:'numeric',month:'short'});
+      let gradeHtml = '';
+      if (sub.grade!=null && sub.grade!==undefined) {
+        const gc = sub.grade>=70?'var(--green)':sub.grade>=40?'var(--amber)':'var(--red)';
+        const gbg = sub.grade>=70?'rgba(34,197,94,0.08)':sub.grade>=40?'rgba(245,158,11,0.08)':'rgba(239,68,68,0.08)';
+        gradeHtml = `<span class="psu-grade" style="color:${gc};background:${gbg}">${sub.grade}</span>`;
+      }
+      h += `<div class="psu-row"><div class="psu-info"><div class="psu-title">${esc(title)}</div><div class="psu-date">${ds}</div></div><span class="psu-badge ${bc}">${SL[sub.status]||sub.status}</span>${gradeHtml}</div>`;
+    }
+    gridHtml += h + '</div>';
+  }
+
+  gridHtml += '</div>';
+  main.innerHTML += gridHtml;
+
+  // Full-width row: courses + heatmap
+  let fullRow = '<div class="pg-grid">';
+
+  // Courses
+  if (data.courseProgress?.length) {
+    let h = `<div class="pw anim" style="${ad()}"><div class="pw-head"><div class="pw-icon pw-ic-green"><svg class="ic" viewBox="0 0 24 24" style="width:16px;height:16px"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg></div><div><div class="pw-title">Курсы</div><div class="pw-subtitle">Прогресс по курсам</div></div></div>`;
+    for (const c of data.courseProgress) {
+      h += `<div class="pcp-row"><div class="pcp-top"><span class="pcp-name">${esc(c.title)}</span><span class="pcp-pct">${c.pct}%</span></div><div class="pcp-bar"><div class="pcp-fill" style="width:${c.pct}%"></div></div></div>`;
+    }
+    fullRow += h + '</div>';
+  }
+
+  // Heatmap
+  if (data.heatmap?.length) {
+    let h = `<div class="pw anim" style="${ad()}"><div class="pw-head"><div class="pw-icon pw-ic-cyan"><svg class="ic" viewBox="0 0 24 24" style="width:16px;height:16px"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg></div><div><div class="pw-title">Активность</div><div class="pw-subtitle">Последние 90 дней</div></div></div>`;
+    const hmap = {};
+    for (const d of data.heatmap) hmap[d.day] = d.count;
+    h += '<div class="phm">';
+    const now = new Date();
+    for (let i = 89; i >= 0; i--) {
+      const d = new Date(now); d.setDate(d.getDate()-i);
+      const key = d.toISOString().slice(0,10);
+      const cnt = hmap[key]||0;
+      const lvl = cnt===0?'':cnt<=1?'l1':cnt<=2?'l2':cnt<=4?'l3':'l4';
+      h += `<div class="phm-cell ${lvl}" title="${key}: ${cnt} тестов"></div>`;
+    }
+    h += '</div>';
+    h += '<div class="phm-legend">Меньше <div class="phm-legend-cell" style="background:rgba(155,93,229,0.06)"></div><div class="phm-legend-cell" style="background:rgba(155,93,229,0.15)"></div><div class="phm-legend-cell" style="background:rgba(155,93,229,0.3)"></div><div class="phm-legend-cell" style="background:rgba(155,93,229,0.5)"></div><div class="phm-legend-cell" style="background:rgba(155,93,229,0.75)"></div> Больше</div>';
+    fullRow += h + '</div>';
+  }
+
+  fullRow += '</div>';
+  main.innerHTML += fullRow;
+
+  // Weekly chart
+  if (data.weeklyStats?.length > 1) {
+    main.innerHTML += `<div class="pw anim" style="${ad()};margin-bottom:24px"><div class="pw-head"><div class="pw-icon pw-ic-violet"><svg class="ic" viewBox="0 0 24 24" style="width:16px;height:16px"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg></div><div><div class="pw-title">Недельная динамика</div><div class="pw-subtitle">Средний балл по неделям</div></div></div><canvas class="pw-chart" id="weekly-chart"></canvas></div>`;
+    requestAnimationFrame(() => drawWeeklyChart(data.weeklyStats));
+  }
+
+  if (window.lucide) lucide.createIcons();
+
+  /* ── Chart ── */
+  function drawWeeklyChart(weeks) {
+    const canvas = document.getElementById('weekly-chart');
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    const dpr = window.devicePixelRatio||1;
+    const rect = canvas.getBoundingClientRect();
+    canvas.width = rect.width*dpr; canvas.height = rect.height*dpr;
+    ctx.scale(dpr,dpr);
+    const W=rect.width, H=rect.height;
+    const pad={t:14,r:14,b:32,l:44};
+    const cw=W-pad.l-pad.r, ch=H-pad.t-pad.b;
+    const n=weeks.length, barW=Math.min(44,cw/n*0.55);
+    const gap=(cw-barW*n)/(n+1);
+    const maxVal=Math.max(...weeks.map(w=>w.avgPct),10);
+
+    // Grid
+    ctx.strokeStyle='rgba(15,23,42,0.05)'; ctx.lineWidth=1;
+    for(let i=0;i<=4;i++){
+      const y=pad.t+ch-(ch*i/4);
+      ctx.beginPath(); ctx.moveTo(pad.l,y); ctx.lineTo(W-pad.r,y); ctx.stroke();
+      ctx.fillStyle='#94A3B8'; ctx.font='500 10px Manrope'; ctx.textAlign='right'; ctx.textBaseline='middle';
+      ctx.fillText(Math.round(maxVal*i/4)+'%',pad.l-8,y);
+    }
+
+    const grad=ctx.createLinearGradient(0,pad.t,0,H-pad.b);
+    grad.addColorStop(0,'#9B5DE5'); grad.addColorStop(1,'#06D6E0');
+    const gradShadow=ctx.createLinearGradient(0,pad.t,0,H-pad.b);
+    gradShadow.addColorStop(0,'rgba(155,93,229,0.15)'); gradShadow.addColorStop(1,'rgba(6,214,224,0.05)');
+
+    weeks.forEach((w,i)=>{
+      const x=pad.l+gap+i*(barW+gap);
+      const barH=(w.avgPct/maxVal)*ch;
+      const y=pad.t+ch-barH;
+      const r=Math.min(6,barW/2);
+
+      // Shadow
+      ctx.fillStyle=gradShadow;
+      ctx.beginPath();
+      ctx.moveTo(x+2,y+r+2); ctx.arcTo(x+2,y+2,x+barW+2,y+2,r); ctx.arcTo(x+barW+2,y+2,x+barW+2,y+barH+2,r);
+      ctx.lineTo(x+barW+2,pad.t+ch+2); ctx.lineTo(x+2,pad.t+ch+2); ctx.closePath(); ctx.fill();
+
+      // Bar
+      ctx.fillStyle=grad;
+      ctx.beginPath();
+      ctx.moveTo(x,y+r); ctx.arcTo(x,y,x+barW,y,r); ctx.arcTo(x+barW,y,x+barW,y+barH,r);
+      ctx.lineTo(x+barW,pad.t+ch); ctx.lineTo(x,pad.t+ch); ctx.closePath(); ctx.fill();
+
+      // Value on top
+      if (barH > 20) {
+        ctx.fillStyle='rgba(255,255,255,0.9)'; ctx.font='700 9px Unbounded';
+        ctx.textAlign='center'; ctx.textBaseline='bottom';
+        ctx.fillText(w.avgPct+'%',x+barW/2,y+14);
+      }
+
+      // Label
+      ctx.fillStyle='#94A3B8'; ctx.font='500 9px Manrope'; ctx.textAlign='center'; ctx.textBaseline='top';
+      ctx.fillText('Н'+(w.week?w.week.split('-')[1]||'':''),x+barW/2,pad.t+ch+10);
+    });
+  }
+
+  /* ── Notifications ── */
+  let _notifsLoaded = false;
+  window.toggleNotifs = async function() {
+    const drop = document.getElementById('pn-drop');
+    if (drop.classList.contains('open')) { drop.classList.remove('open'); return; }
+    drop.classList.add('open');
+    if (!_notifsLoaded) {
+      _notifsLoaded = true;
+      try {
+        const notifs = await preq('/parent/notifications');
+        if (!notifs) return;
+        const list = document.getElementById('pn-list');
+        if (!notifs.length) { list.innerHTML = '<div class="pn-empty">Уведомлений пока нет</div>'; return; }
+        list.innerHTML = notifs.map(n => {
+          const cls = n.is_read ? '' : ' unread';
+          const d = new Date(n.created_at);
+          const ds = d.toLocaleDateString('ru',{day:'numeric',month:'short',hour:'2-digit',minute:'2-digit'});
+          return `<div class="pn-item${cls}" onclick="markNotifRead(${n.id},this)"><div class="pn-item-dot"></div><div><div class="pn-item-msg">${esc(n.message)}</div><div class="pn-item-time">${ds}</div></div></div>`;
+        }).join('');
+      } catch { document.getElementById('pn-list').innerHTML = '<div class="pn-empty">Ошибка загрузки</div>'; }
+    }
+  };
+
+  window.markNotifRead = async function(id, el) {
+    if (!el.classList.contains('unread')) return;
+    try {
+      await fetch(API+'/parent/notifications/'+id+'/read',{method:'PATCH',headers:{'Authorization':'Bearer '+jwt}});
+      el.classList.remove('unread');
+      const b=document.getElementById('notif-badge'), cur=parseInt(b.textContent)||0;
+      if(cur>1){b.textContent=cur-1;}else{b.style.display='none';}
+    } catch {}
+  };
+
+  document.addEventListener('click',e=>{
+    const drop=document.getElementById('pn-drop'), btn=document.getElementById('btn-notif');
+    if(drop.classList.contains('open')&&!drop.contains(e.target)&&!btn.contains(e.target))drop.classList.remove('open');
+  });
+})();
+
+function esc(s){return s?String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'):'';}
+
+function timeAgo(dateStr) {
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const mins = Math.floor(diff/60000);
+  if (mins < 1) return 'только что';
+  if (mins < 60) return mins + ' мин назад';
+  const hrs = Math.floor(mins/60);
+  if (hrs < 24) return hrs + ' ч назад';
+  const days = Math.floor(hrs/24);
+  if (days === 1) return 'вчера';
+  if (days < 7) return days + ' дн назад';
+  return new Date(dateStr).toLocaleDateString('ru',{day:'numeric',month:'short'});
+}
+
+function showError(title, sub) {
+  document.getElementById('main-content').innerHTML = `
+    <div class="pm-error">
+      <div class="pm-error-icon"><svg class="ic" viewBox="0 0 24 24" style="width:28px;height:28px"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg></div>
+      <div class="pm-error-title">${esc(title)}</div>
+      <div class="pm-error-sub">${esc(sub)}</div>
+    </div>`;
+}
+
+function parentLogout() {
+  localStorage.removeItem('ls_parent_token');
+  localStorage.removeItem('ls_parent_student');
+  location.reload();
+}
+</script>
+</body>
+</html>
diff --git a/frontend/pet.html b/frontend/pet.html
new file mode 100644
index 0000000..e595588
--- /dev/null
+++ b/frontend/pet.html
@@ -0,0 +1,1755 @@
+<!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" />
+  <style>
+    .sb-content { padding: 0; }
+    .pet-wrap { min-height: 100vh; padding: 24px 20px 60px; max-width: 1020px; margin: 0 auto; }
+
+    /* ── Header ── */
+    .pet-header { display:flex; align-items:center; gap:14px; margin-bottom:24px; }
+    .pet-header-icon {
+      width:48px; height:48px; border-radius:13px; flex-shrink:0;
+      background: linear-gradient(135deg,rgba(249,199,79,.22),rgba(249,65,68,.14));
+      border:1.5px solid rgba(255,255,255,.1);
+      display:flex; align-items:center; justify-content:center;
+    }
+    .pet-header-icon svg { width:26px; height:26px; fill:none; stroke:#F9C74F; stroke-width:1.8; }
+    .pet-h-title { font-family:'Unbounded',sans-serif; font-size:1.25rem; font-weight:800; }
+    .pet-h-sub   { font-size:.8rem; color:var(--text-2); margin-top:2px; }
+
+    /* ── Hero grid ── */
+    .pet-hero { display:grid; grid-template-columns:300px 1fr; gap:18px; margin-bottom:18px; }
+
+    /* ── Stage card ── */
+    .pet-stage {
+      background: var(--surface); border:1.5px solid rgba(255,255,255,.08);
+      border-radius:22px; padding:22px 18px 20px;
+      display:flex; flex-direction:column; align-items:center; gap:11px;
+      position:relative; overflow:hidden;
+    }
+    .pet-stage::before {
+      content:''; position:absolute; inset:0; border-radius:22px;
+      pointer-events:none; opacity:0; transition:opacity .8s, background .8s;
+    }
+    .pet-stage.glow-ecstatic::before { opacity:1; background:radial-gradient(ellipse at 50% 60%, rgba(249,199,79,.18) 0%, transparent 68%); }
+    .pet-stage.glow-happy::before    { opacity:1; background:radial-gradient(ellipse at 50% 60%, rgba(56,217,90,.14) 0%, transparent 68%); }
+    .pet-stage.glow-neutral::before  { opacity:1; background:radial-gradient(ellipse at 50% 60%, rgba(6,214,224,.1) 0%, transparent 68%); }
+    .pet-stage.glow-sad::before      { opacity:1; background:radial-gradient(ellipse at 50% 60%, rgba(100,149,237,.12) 0%, transparent 68%); }
+    .pet-stage.glow-hungry::before   { opacity:1; background:radial-gradient(ellipse at 50% 60%, rgba(249,130,49,.14) 0%, transparent 68%); }
+    .pet-stage.glow-sleeping::before { opacity:1; background:radial-gradient(ellipse at 50% 60%, rgba(155,93,229,.16) 0%, transparent 68%); }
+
+    /* Evolution burst */
+    @keyframes evoBurst {
+      0%{transform:scale(1)} 20%{transform:scale(1.06)} 50%{transform:scale(0.97)} 75%{transform:scale(1.03)} 100%{transform:scale(1)}
+    }
+    .evo-burst { animation:evoBurst .9s cubic-bezier(.34,1.56,.64,1); }
+
+    /* Speech bubble */
+    .pet-bubble {
+      background:rgba(255,255,255,.07); border:1.5px solid rgba(255,255,255,.12);
+      border-radius:14px; padding:9px 14px;
+      font-size:.82rem; color:var(--text); line-height:1.5; text-align:center;
+      width:100%; box-sizing:border-box; position:relative; z-index:1;
+      animation: bubIn .4s cubic-bezier(.34,1.56,.64,1);
+    }
+    .pet-bubble::after {
+      content:''; position:absolute; bottom:-9px; left:50%; transform:translateX(-50%);
+      border:5px solid transparent; border-top-color:rgba(255,255,255,.12);
+    }
+    @keyframes bubIn { from{opacity:0;transform:scale(.9) translateY(-4px)} to{opacity:1;transform:none} }
+
+    /* Pet scene */
+    .pet-scene { position:relative; width:200px; height:200px; margin:0 auto; z-index:1; transition:transform .25s ease; border-radius:50%; }
+    .pet-svg-wrap { width:200px; height:200px; filter:drop-shadow(0 10px 28px rgba(0,0,0,.3)); }
+
+    /* A1 — Breathing */
+    @keyframes breathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.013,1.022)} }
+    .pet-svg-wrap svg { animation:breathe 3s ease-in-out infinite; transform-box:fill-box; transform-origin:50% 75%; }
+    .mood-sleeping .pet-svg-wrap svg { animation-duration:5s; }
+    .mood-ecstatic .pet-svg-wrap svg { animation-duration:1.7s; }
+
+    /* A3 — Weather particles */
+    .pet-weather { position:absolute; inset:0; pointer-events:none; overflow:hidden; border-radius:50%; z-index:0; }
+    @keyframes wxRain     { 0%{transform:translateY(-10px);opacity:0} 10%{opacity:.7} 90%{opacity:.55} 100%{transform:translateY(220px);opacity:0} }
+    @keyframes wxSparkle  { 0%{transform:translate(0,50px) scale(0);opacity:0} 18%{opacity:.9;transform:translate(0,30px) scale(1)} 100%{transform:translate(var(--wx,0px),-30px) scale(.2);opacity:0} }
+    @keyframes wxFog      { 0%,100%{opacity:.1;transform:translateX(0)} 50%{opacity:.22;transform:translateX(9px)} }
+    @keyframes wxTwinkle  { 0%,100%{opacity:1} 50%{opacity:.15} }
+
+    /* A4 — Time of day scene backgrounds */
+    .pet-scene[data-tod="dawn"]  { background:radial-gradient(ellipse at 50% 100%, rgba(255,100,60,.2) 0%, transparent 65%), linear-gradient(155deg,#1a0a2e,#4a1830); }
+    .pet-scene[data-tod="day"]   { background:radial-gradient(ellipse at 50% 100%, rgba(155,93,229,.2) 0%, transparent 65%), linear-gradient(155deg,#0d0d1f,#1a1040); }
+    .pet-scene[data-tod="dusk"]  { background:radial-gradient(ellipse at 50% 100%, rgba(249,100,50,.2) 0%, transparent 65%), linear-gradient(155deg,#1a0a2e,#5d1e10); }
+    .pet-scene[data-tod="night"] { background:radial-gradient(ellipse at 50% 100%, rgba(6,214,224,.1) 0%, transparent 65%), linear-gradient(155deg,#04040f,#0a0a20); }
+
+    /* B1 — Star mini-game */
+    .pet-star-game { position:absolute; pointer-events:none; z-index:12; transform:translate(-50%,-50%); }
+    .pet-star-game.active { pointer-events:auto; }
+    @keyframes starAppear { 0%{opacity:0;transform:scale(0) rotate(-30deg)} 25%{opacity:1;transform:scale(1.15) rotate(5deg)} 100%{transform:scale(1) rotate(0deg);opacity:1} }
+    @keyframes starPulse  { 0%,100%{filter:drop-shadow(0 0 5px #F9C74F);transform:scale(1) rotate(0deg)} 50%{filter:drop-shadow(0 0 14px #F9C74F);transform:scale(1.18) rotate(18deg)} }
+    .pet-star-btn { background:none; border:none; cursor:pointer; padding:0; animation:starPulse 1.1s ease-in-out infinite; display:block; }
+    .pet-star-btn:active { transform:scale(0.8) !important; }
+    .pet-star-wrap { animation:starAppear .35s cubic-bezier(.34,1.56,.64,1) forwards; }
+
+    /* B4 — XP / coin floats */
+    @keyframes xpFloat { 0%{transform:translateY(0) scale(1);opacity:1} 100%{transform:translateY(-72px) scale(.75);opacity:0} }
+    .pet-xp-float { position:absolute; font-family:'Unbounded',sans-serif; font-size:.72rem; font-weight:800; pointer-events:none; z-index:20; animation:xpFloat 1.6s ease-out forwards; white-space:nowrap; }
+    .pet-float          { animation:petFloat 3s ease-in-out infinite; }
+    .mood-ecstatic .pet-float { animation:petBounce .5s ease-in-out infinite alternate; }
+    .mood-sleeping .pet-float { animation:petSway 4s ease-in-out infinite; }
+    .mood-hungry   .pet-float { animation:petFloat 6s ease-in-out infinite; }
+    @keyframes petFloat  { 0%,100%{transform:translateY(0)}    50%{transform:translateY(-12px)} }
+    @keyframes petBounce { 0%{transform:translateY(0) scale(1)} 100%{transform:translateY(-16px) scale(1.05)} }
+    @keyframes petSway   { 0%,100%{transform:rotate(0deg)} 50%{transform:rotate(3deg)} }
+    @keyframes petPet    { 0%{transform:scale(1)} 30%{transform:scale(1.18) rotate(-6deg)} 60%{transform:scale(1.1) rotate(4deg)} 100%{transform:scale(1)} }
+    .pet-svg-wrap.petting { animation:petPet .5s ease-out forwards !important; }
+
+    @keyframes blink {
+      0%, 88%, 100% { transform: scaleY(1); }
+      94%            { transform: scaleY(0.06); }
+    }
+    .pet-eye-blink  { animation: blink 3.5s ease-in-out infinite;       transform-box: fill-box; transform-origin: center; }
+    .pet-eye-blink2 { animation: blink 3.5s ease-in-out 0.08s infinite; transform-box: fill-box; transform-origin: center; }
+
+    @keyframes floatHeart {
+      0%  { opacity:1; transform:translate(0,0) scale(1); }
+      100%{ opacity:0; transform:translate(var(--tx,0px),var(--ty,-60px)) scale(1.4); }
+    }
+
+    /* ZZZ */
+    .pet-zzz { position:absolute; top:10px; right:10px; display:none; flex-direction:column; align-items:flex-end; gap:2px; }
+    .mood-sleeping .pet-zzz { display:flex; }
+    .pet-zzz span { font-family:'Unbounded',sans-serif; font-weight:800; color:rgba(155,93,229,.65); animation:zzzFloat 2s ease-in-out infinite; }
+    .pet-zzz span:nth-child(1) { font-size:.65rem; animation-delay:0s; }
+    .pet-zzz span:nth-child(2) { font-size:.85rem; animation-delay:.5s; }
+    .pet-zzz span:nth-child(3) { font-size:1.05rem; animation-delay:1s; }
+    @keyframes zzzFloat { 0%,100%{opacity:.4;transform:translateY(0)} 50%{opacity:1;transform:translateY(-7px)} }
+
+    /* Hearts ambient */
+    .pet-hearts { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; display:none; }
+    .mood-ecstatic .pet-hearts, .mood-happy .pet-hearts { display:block; }
+    .pet-heart { position:absolute; animation:heartPop 1.5s ease-out infinite; opacity:0; }
+    .pet-heart:nth-child(1) { left:8%;  top:20%; animation-delay:0s; }
+    .pet-heart:nth-child(2) { left:72%; top:14%; animation-delay:.5s; }
+    .pet-heart:nth-child(3) { left:46%; top:2%;  animation-delay:1s; }
+    @keyframes heartPop { 0%{opacity:0;transform:scale(0)} 30%{opacity:1;transform:scale(1.2) translateY(-8px)} 100%{opacity:0;transform:scale(.8) translateY(-26px)} }
+
+    /* Name / rename */
+    .pet-name-wrap { display:flex; align-items:center; gap:6px; z-index:1; }
+    .pet-name { font-family:'Unbounded',sans-serif; font-size:1.1rem; font-weight:800; color:var(--text); }
+    .pet-rename-btn { background:transparent; border:none; cursor:pointer; padding:4px; border-radius:6px; color:var(--text-2); transition:color .15s; }
+    .pet-rename-btn:hover { color:#9B5DE5; }
+    .pet-rename-btn svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; }
+    .pet-rename-form { display:none; flex-direction:column; gap:8px; width:100%; z-index:1; }
+    .pet-rename-form.visible { display:flex; }
+    .pet-rename-input {
+      padding:8px 14px; border-radius:10px; border:1.5px solid rgba(155,93,229,.4);
+      background:rgba(155,93,229,.1); color:var(--text); font-family:'Manrope',sans-serif;
+      font-size:.9rem; font-weight:600; outline:none; text-align:center;
+    }
+    .pet-rename-input:focus { border-color:#9B5DE5; }
+    .pet-rename-actions { display:flex; gap:8px; justify-content:center; }
+    .pet-btn { padding:6px 16px; border-radius:99px; font-family:'Manrope',sans-serif; font-size:.8rem; font-weight:700; cursor:pointer; border:1.5px solid rgba(255,255,255,.15); background:transparent; color:var(--text); transition:all .15s; }
+    .pet-btn.primary { background:#9B5DE5; border-color:#9B5DE5; color:#fff; }
+    .pet-btn.primary:hover { background:#8347d4; }
+    .pet-btn:hover { background:rgba(255,255,255,.08); }
+
+    /* Mood badge */
+    .pet-mood { padding:5px 14px; border-radius:99px; font-size:.76rem; font-weight:700; display:inline-flex; align-items:center; gap:5px; z-index:1; }
+    .mood-ecstatic-badge { background:rgba(249,199,79,.15); color:#F9C74F; border:1px solid rgba(249,199,79,.3); }
+    .mood-happy-badge    { background:rgba(56,217,90,.15);  color:#38D95A; border:1px solid rgba(56,217,90,.3); }
+    .mood-neutral-badge  { background:rgba(6,214,224,.12);  color:#06D6E0; border:1px solid rgba(6,214,224,.25); }
+    .mood-sad-badge      { background:rgba(249,65,68,.12);  color:#F94144; border:1px solid rgba(249,65,68,.25); }
+    .mood-hungry-badge   { background:rgba(249,130,49,.15); color:#F98231; border:1px solid rgba(249,130,49,.3); }
+    .mood-sleeping-badge { background:rgba(155,93,229,.12); color:#9B5DE5; border:1px solid rgba(155,93,229,.25); }
+
+    /* Evolution */
+    .pet-evo { display:flex; flex-direction:column; align-items:center; gap:4px; z-index:1; }
+    .pet-evo-lbl  { font-size:.63rem; font-weight:700; color:var(--text-2); text-transform:uppercase; letter-spacing:.06em; }
+    .pet-evo-name { font-family:'Unbounded',sans-serif; font-size:.73rem; font-weight:800; }
+    .pet-lvl-dots { display:flex; gap:5px; margin-top:2px; }
+
+    /* Color picker */
+    .pet-color-row { display:flex; align-items:center; gap:10px; z-index:1; }
+    .pet-color-lbl { font-size:.64rem; font-weight:700; color:var(--text-2); text-transform:uppercase; letter-spacing:.05em; }
+    .pet-color-picker { display:flex; gap:7px; }
+    .pet-color-dot {
+      width:18px; height:18px; border-radius:50%; cursor:pointer;
+      border:2.5px solid transparent; transition:all .18s; flex-shrink:0;
+    }
+    .pet-color-dot.active { border-color:rgba(255,255,255,.85); transform:scale(1.25); }
+    .pet-color-dot:hover:not(.active) { transform:scale(1.12); }
+
+    /* Accessories */
+    .pet-accessories { display:flex; gap:5px; flex-wrap:wrap; justify-content:center; z-index:1; }
+    .pet-acc-badge { padding:3px 10px; border-radius:99px; font-size:.7rem; font-weight:700; background:rgba(249,199,79,.12); color:#F9C74F; border:1px solid rgba(249,199,79,.2); }
+
+    /* Petting button */
+    .pet-action-btn {
+      padding:8px 22px; border-radius:99px; font-family:'Manrope',sans-serif; font-size:.84rem; font-weight:700;
+      cursor:pointer; border:1.5px solid rgba(249,199,79,.35); background:rgba(249,199,79,.1); color:#F9C74F;
+      transition:all .18s; z-index:1; display:flex; align-items:center; gap:6px;
+    }
+    .pet-action-btn:hover:not(:disabled) { background:rgba(249,199,79,.2); border-color:rgba(249,199,79,.5); }
+    .pet-action-btn:disabled { opacity:.5; cursor:not-allowed; }
+
+    /* ── Right column ── */
+    .pet-right { display:flex; flex-direction:column; gap:12px; }
+
+    /* Mini stats 2×2 */
+    .pet-stats-row { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
+    .pet-mini { background:var(--surface); border:1.5px solid rgba(255,255,255,.08); border-radius:14px; padding:12px 10px; display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; }
+    .pet-mini-ico { width:22px; height:22px; display:flex; align-items:center; justify-content:center; }
+    .pet-mini-val { font-family:'Unbounded',sans-serif; font-size:.95rem; font-weight:800; }
+    .pet-mini-lbl { font-size:.62rem; color:var(--text-2); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
+
+    /* Card generic */
+    .pet-card { background:var(--surface); border:1.5px solid rgba(255,255,255,.08); border-radius:14px; padding:14px 16px; }
+    .pet-card-title { font-size:.67rem; font-weight:800; color:var(--text-2); text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; display:flex; align-items:center; gap:5px; }
+    .pet-card-title svg { flex-shrink:0; opacity:.7; }
+
+    /* Quests */
+    .quest-item { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.05); }
+    .quest-item:last-child { border-bottom:none; }
+    .quest-ico  { width:18px; height:18px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
+    .quest-body { flex:1; }
+    .quest-label { font-size:.77rem; font-weight:600; }
+    .quest-bar  { height:4px; border-radius:99px; background:rgba(255,255,255,.1); margin-top:4px; overflow:hidden; }
+    .quest-fill { height:100%; border-radius:99px; background:linear-gradient(90deg,#9B5DE5,#06D6E0); transition:width .6s cubic-bezier(.34,1.56,.64,1); }
+    .quest-check { width:20px; height:20px; border-radius:50%; border:1.5px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; font-size:.72rem; color:transparent; flex-shrink:0; transition:all .3s; }
+    .quest-item.done .quest-check { background:#38D95A; border-color:#38D95A; color:#fff; }
+    .quest-item.done .quest-label { color:var(--text-2); opacity:.6; }
+
+    /* XP bar */
+    .pet-xp-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
+    .pet-xp-lvl { font-family:'Unbounded',sans-serif; font-size:.88rem; font-weight:800; }
+    .pet-xp-nums { font-size:.74rem; color:var(--text-2); }
+    .pet-xp-nums span { color:#9B5DE5; font-weight:700; }
+    .pet-bar { height:8px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; }
+    .pet-bar-fill { height:100%; border-radius:99px; transition:width .8s cubic-bezier(.34,1.56,.64,1); }
+
+    /* Hunger */
+    .pet-hunger-row { display:flex; align-items:center; gap:8px; }
+    .pet-hunger { display:flex; gap:4px; }
+    .pet-hunger-heart { width:18px; height:18px; flex-shrink:0; }
+    .pet-hunger-heart.filled { filter:drop-shadow(0 0 4px currentColor); }
+    .pet-hunger-heart.empty  { opacity:.18; }
+    .pet-hunger-msg { font-size:.76rem; color:var(--text-2); margin-left:auto; }
+
+    /* Mood tip */
+    .pet-tip { display:flex; gap:10px; align-items:flex-start; }
+    .pet-tip-ico { width:24px; height:24px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--text-2); }
+    .pet-tip-title { font-size:.77rem; font-weight:700; margin-bottom:3px; }
+    .pet-tip-text  { font-size:.74rem; color:var(--text-2); line-height:1.55; }
+    .pet-tip-forecast { font-size:.72rem; color:#F9C74F; margin-top:5px; font-weight:600; display:none; }
+
+    /* ── Bottom ── */
+    .pet-bottom { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
+    .pet-bottom-left, .pet-bottom-right { display:flex; flex-direction:column; gap:14px; }
+
+    /* XP chart */
+    .pet-chart-title { font-size:.67rem; font-weight:800; color:var(--text-2); text-transform:uppercase; letter-spacing:.06em; margin-bottom:12px; display:flex; align-items:center; gap:5px; }
+    .chart-bars { display:flex; gap:5px; align-items:flex-end; height:72px; }
+    .chart-col { display:flex; flex-direction:column; align-items:center; gap:3px; flex:1; }
+    .chart-val { font-size:.58rem; color:var(--text-2); font-weight:600; height:13px; display:flex; align-items:flex-end; }
+    .chart-bar-wrap { width:100%; flex:1; display:flex; align-items:flex-end; }
+    .chart-fill { width:100%; border-radius:4px 4px 0 0; background:linear-gradient(180deg,#9B5DE5,rgba(155,93,229,.35)); min-height:3px; transition:height .6s ease; }
+    .chart-col.today .chart-fill { background:linear-gradient(180deg,#06D6E0,rgba(6,214,224,.35)); }
+    .chart-day { font-size:.62rem; color:var(--text-2); font-weight:600; white-space:nowrap; }
+    .chart-col.today .chart-day { color:#06D6E0; font-weight:800; }
+
+    /* Activity feed */
+    .pet-feed-title { font-size:.67rem; font-weight:800; color:var(--text-2); text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; display:flex; align-items:center; gap:5px; }
+    .pet-feed-item { display:flex; align-items:center; gap:10px; padding:5px 0; border-bottom:1px solid rgba(255,255,255,.05); }
+    .pet-feed-item:last-child { border-bottom:none; }
+    .pet-feed-xp { font-family:'Unbounded',sans-serif; font-size:.76rem; font-weight:800; color:#38D95A; min-width:36px; }
+    .pet-feed-lbl { font-size:.76rem; font-weight:600; flex:1; }
+    .pet-feed-time { font-size:.68rem; color:var(--text-2); white-space:nowrap; }
+    .pet-feed-empty { font-size:.8rem; color:var(--text-2); text-align:center; padding:18px 0; }
+
+    /* Quick links */
+    .pet-quick-title { font-size:.67rem; font-weight:800; color:var(--text-2); text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; display:flex; align-items:center; gap:5px; }
+    .pet-quick-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
+    .pet-quick-card { background:rgba(255,255,255,.04); border:1.5px solid rgba(255,255,255,.07); border-radius:11px; padding:9px 11px; display:flex; align-items:center; gap:8px; text-decoration:none; color:inherit; transition:all .15s; }
+    .pet-quick-card:hover { background:rgba(255,255,255,.08); transform:translateY(-1px); }
+    .pet-quick-ico { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
+    .pet-quick-name { font-size:.76rem; font-weight:700; }
+    .pet-quick-xp   { font-size:.64rem; color:var(--text-2); }
+
+    /* B2 — Scene backgrounds (vivid) */
+    .pet-scene.bg-space  { background:radial-gradient(ellipse at 25% 20%,rgba(155,93,229,.75) 0%,transparent 40%),radial-gradient(ellipse at 80% 75%,rgba(80,50,220,.55) 0%,transparent 38%),radial-gradient(ellipse at 55% 55%,rgba(20,5,90,.85) 0%,transparent 70%),linear-gradient(170deg,#01010e,#060228,#0a0318) !important; }
+    .pet-scene.bg-forest { background:radial-gradient(ellipse at 50% 100%,rgba(56,217,90,.8) 0%,transparent 50%),radial-gradient(ellipse at 15% 60%,rgba(10,160,40,.5) 0%,transparent 40%),radial-gradient(ellipse at 85% 35%,rgba(80,200,60,.35) 0%,transparent 35%),linear-gradient(170deg,#010701,#041203,#082007) !important; }
+    .pet-scene.bg-aqua   { background:radial-gradient(ellipse at 50% 100%,rgba(6,214,224,.8) 0%,transparent 50%),radial-gradient(ellipse at 80% 25%,rgba(6,170,220,.5) 0%,transparent 40%),radial-gradient(ellipse at 20% 50%,rgba(0,100,180,.4) 0%,transparent 35%),linear-gradient(170deg,#010810,#021422,#03203a) !important; }
+    .pet-scene.bg-sunset { background:radial-gradient(ellipse at 50% 95%,rgba(249,100,20,.9) 0%,transparent 50%),radial-gradient(ellipse at 30% 50%,rgba(249,160,20,.55) 0%,transparent 40%),radial-gradient(ellipse at 75% 30%,rgba(200,50,10,.45) 0%,transparent 35%),linear-gradient(170deg,#100201,#250602,#1e0404) !important; }
+
+    /* B2 — BgFX particle container + keyframes */
+    .pet-bgfx { position:absolute; inset:0; pointer-events:none; overflow:hidden; border-radius:50%; z-index:1; }
+    @keyframes bgStarTwink { 0%,100%{opacity:1;transform:scale(1)}  50%{opacity:.05;transform:scale(.4)} }
+    @keyframes bgFirefly   { 0%,100%{opacity:.08;transform:translate(0,0)} 50%{opacity:1;transform:translate(var(--fx,3px),var(--fy,-4px))} }
+    @keyframes bgBubble    { 0%{transform:translateY(0) scale(1);opacity:.75} 100%{transform:translateY(-140px) scale(1.5);opacity:0} }
+    @keyframes bgEmber     { 0%{transform:translate(0,0);opacity:1} 60%{opacity:.65} 100%{transform:translate(var(--ex,5px),-130px);opacity:0} }
+
+    /* B2 — Shop modal */
+    .pet-shop-overlay { position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:1000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px); }
+    .pet-shop-modal { background:var(--surface);border:1.5px solid rgba(255,255,255,.1);border-radius:20px;padding:22px;width:440px;max-width:95vw;box-shadow:0 24px 80px rgba(0,0,0,.5); }
+    .pet-shop-head { display:flex;justify-content:space-between;align-items:center;margin-bottom:16px; }
+    .pet-shop-title { font-family:'Unbounded',sans-serif;font-size:.85rem;font-weight:800; }
+    .pet-shop-coins { font-size:.75rem;color:#F9C74F;font-weight:700;display:flex;align-items:center;gap:5px; }
+    .pet-shop-close { background:none;border:none;cursor:pointer;color:var(--text-2);font-size:1.1rem;padding:2px 7px;border-radius:6px;transition:color .15s; }
+    .pet-shop-close:hover { color:var(--text); }
+    .pet-shop-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:12px; }
+    .pet-bg-card { border-radius:12px;overflow:hidden;cursor:pointer;border:2px solid rgba(255,255,255,.1);transition:all .2s; }
+    .pet-bg-card:hover { border-color:rgba(155,93,229,.5);transform:translateY(-2px); }
+    .pet-bg-card.active { border-color:#9B5DE5;box-shadow:0 0 14px rgba(155,93,229,.4); }
+    .pet-bg-preview { height:62px; }
+    .pet-bg-info { padding:6px 8px;background:rgba(255,255,255,.04); }
+    .pet-bg-name { font-size:.72rem;font-weight:700;margin-bottom:2px; }
+    .pet-bg-status { font-size:.62rem;color:var(--text-2); }
+    .pet-bg-card.active .pet-bg-status { color:#9B5DE5; }
+
+    /* B3 — Rainbow collar keyframe */
+    @keyframes rbRot { to { transform:rotate(360deg); } }
+
+    @media(max-width:768px) {
+      .pet-hero   { grid-template-columns:1fr; }
+      .pet-bottom { grid-template-columns:1fr; }
+      .pet-scene  { width:170px; height:170px; }
+      .pet-svg-wrap { width:170px; height:170px; }
+      .pet-stats-row { grid-template-columns:repeat(4,1fr); }
+    }
+    @media(max-width:480px) {
+      .pet-stats-row { grid-template-columns:repeat(2,1fr); }
+      .pet-quick-grid{ grid-template-columns:1fr; }
+    }
+  </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="sbl-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="sbl-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>
+      <span class="sb-link active"><i data-lucide="heart" class="sb-icon"></i><span class="sb-lbl">Питомец</span></span>
+      <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>
+      <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="sbl-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>
+    </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>
+          <span class="sb-logout" style="pointer-events:none">Мой профиль</span>
+        </div>
+      </a>
+    </div>
+  </aside>
+  <div class="notif-drop" id="notif-drop"></div>
+
+  <div class="sb-content">
+  <div class="pet-wrap">
+
+    <div class="pet-header">
+      <div class="pet-header-icon">
+        <svg viewBox="0 0 24 24"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
+      </div>
+      <div>
+        <div class="pet-h-title">Мой питомец</div>
+        <div class="pet-h-sub">Заботься о нём — учись каждый день!</div>
+      </div>
+    </div>
+
+    <div class="pet-hero">
+      <!-- ── Left: stage ── -->
+      <div class="pet-stage" id="pet-stage">
+
+        <div class="pet-bubble" id="pet-bubble">…</div>
+
+        <div class="pet-scene" id="pet-scene">
+          <div class="pet-weather" id="pet-weather"></div>
+          <div class="pet-bgfx" id="pet-bgfx"></div>
+          <div class="pet-svg-wrap pet-float" id="pet-svg-wrap"></div>
+          <div class="pet-zzz"><span>z</span><span>z</span><span>Z</span></div>
+          <div class="pet-hearts">
+            <div class="pet-heart"><svg width="13" height="13" viewBox="0 0 24 24" fill="#F94144" stroke="none"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg></div>
+            <div class="pet-heart"><svg width="10" height="10" viewBox="0 0 24 24" fill="#F9C74F" stroke="none"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg></div>
+            <div class="pet-heart"><svg width="8"  height="8"  viewBox="0 0 24 24" fill="#9B5DE5" stroke="none"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg></div>
+          </div>
+          <div class="pet-star-game" id="pet-star-game"></div>
+        </div>
+
+        <div class="pet-name-wrap">
+          <div class="pet-name" id="pet-name">…</div>
+          <button class="pet-rename-btn" onclick="toggleRename()" title="Переименовать">
+            <svg viewBox="0 0 24 24"><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>
+          </button>
+        </div>
+        <div class="pet-rename-form" id="rename-form">
+          <input class="pet-rename-input" id="rename-input" maxlength="24" placeholder="Имя питомца…" />
+          <div class="pet-rename-actions">
+            <button class="pet-btn primary" onclick="saveName()">Сохранить</button>
+            <button class="pet-btn" onclick="toggleRename()">Отмена</button>
+          </div>
+        </div>
+
+        <div class="pet-mood" id="pet-mood-badge">…</div>
+
+        <div class="pet-evo">
+          <div class="pet-evo-lbl">Эволюция</div>
+          <div class="pet-evo-name" id="pet-evo-name">—</div>
+          <div class="pet-lvl-dots" id="pet-lvl-dots"></div>
+        </div>
+
+        <!-- Color picker + shop -->
+        <div class="pet-color-row">
+          <div class="pet-color-lbl">Цвет</div>
+          <div class="pet-color-picker" id="color-picker"></div>
+          <button class="pet-btn" onclick="openPetShop()" style="font-size:.62rem;padding:3px 9px;margin-left:2px;display:inline-flex;align-items:center;gap:4px" title="Фоны сцены">
+            <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="m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7"/><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><path d="M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4"/><path d="M2 7h20"/><path d="M22 7v3a2 2 0 0 1-2 2a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12a2 2 0 0 1-2-2V7"/></svg>
+            Фоны
+          </button>
+        </div>
+
+        <div class="pet-accessories" id="pet-accessories"></div>
+
+        <button class="pet-action-btn" id="btn-pet" onclick="petThePet()">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 11V6a2 2 0 0 0-4 0v0"/><path d="M14 10V4a2 2 0 0 0-4 0v2"/><path d="M10 10.5V6a2 2 0 0 0-4 0v8"/><path d="M6 14v0a2 2 0 0 0-2-2H2v5l6.5 6.5a2 2 0 0 0 2.8 0l3.7-3.7a2 2 0 0 0 0-2.8L18 18"/></svg>
+          Погладить
+        </button>
+        <button class="pet-action-btn" id="btn-feed" onclick="openFeedGame()" style="background:linear-gradient(135deg,rgba(249,199,79,.18),rgba(249,65,68,.1));border-color:rgba(249,199,79,.3)">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#F9C74F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2"/><path d="M7 2v20"/><path d="M21 15V2v0a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7"/></svg>
+          Покормить
+        </button>
+      </div>
+
+      <!-- ── Right column ── -->
+      <div class="pet-right">
+
+        <!-- Mini stats 2×2 -->
+        <div class="pet-stats-row">
+          <div class="pet-mini">
+            <div class="pet-mini-ico"><i data-lucide="flame" width="18" height="18"></i></div>
+            <div class="pet-mini-val" id="stat-streak">—</div>
+            <div class="pet-mini-lbl">Серия</div>
+          </div>
+          <div class="pet-mini">
+            <div class="pet-mini-ico"><i data-lucide="trophy" width="18" height="18"></i></div>
+            <div class="pet-mini-val" id="stat-streak-best">—</div>
+            <div class="pet-mini-lbl">Рекорд</div>
+          </div>
+          <div class="pet-mini">
+            <div class="pet-mini-ico"><i data-lucide="coins" width="18" height="18"></i></div>
+            <div class="pet-mini-val" id="stat-coins">—</div>
+            <div class="pet-mini-lbl">Монеты</div>
+          </div>
+          <div class="pet-mini">
+            <div class="pet-mini-ico"><i data-lucide="heart-handshake" width="18" height="18"></i></div>
+            <div class="pet-mini-val" id="stat-petting">—</div>
+            <div class="pet-mini-lbl">Поглажен</div>
+          </div>
+        </div>
+
+        <!-- Daily quests -->
+        <div class="pet-card">
+          <div class="pet-card-title"><i data-lucide="target" width="12" height="12"></i> Задания питомца</div>
+          <div id="pet-quests"><div style="color:var(--text-2);font-size:.8rem">Загрузка…</div></div>
+        </div>
+
+        <!-- XP -->
+        <div class="pet-card">
+          <div class="pet-card-title"><i data-lucide="zap" width="12" height="12"></i> Опыт</div>
+          <div class="pet-xp-row">
+            <div class="pet-xp-lvl" id="stat-level">Ур. —</div>
+            <div class="pet-xp-nums"><span id="xp-curr">0</span> / <span id="xp-next-val">—</span> XP</div>
+          </div>
+          <div class="pet-bar"><div class="pet-bar-fill" id="xp-bar" style="width:0%;background:linear-gradient(90deg,#9B5DE5,#06D6E0)"></div></div>
+        </div>
+
+        <!-- Hunger -->
+        <div class="pet-card">
+          <div class="pet-card-title"><i data-lucide="heart" width="12" height="12"></i> Сытость</div>
+          <div class="pet-hunger-row">
+            <div class="pet-hunger" id="pet-hunger-dots"></div>
+            <div class="pet-hunger-msg" id="hunger-msg"></div>
+          </div>
+        </div>
+
+        <!-- Mood tip + forecast -->
+        <div class="pet-card">
+          <div class="pet-tip">
+            <div class="pet-tip-ico" id="tip-ico"><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="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg></div>
+            <div>
+              <div class="pet-tip-title" id="tip-title">Совет</div>
+              <div class="pet-tip-text"  id="tip-text">Загрузка…</div>
+              <div class="pet-tip-forecast" id="tip-forecast"></div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+    <!-- ── Bottom ── -->
+    <div class="pet-bottom">
+
+      <div class="pet-bottom-left">
+        <!-- XP chart -->
+        <div class="pet-card">
+          <div class="pet-chart-title"><i data-lucide="trending-up" width="12" height="12"></i> Активность за 7 дней</div>
+          <div class="chart-bars" id="xp-chart">
+            <div style="color:var(--text-2);font-size:.8rem;align-self:center">Загрузка…</div>
+          </div>
+        </div>
+        <!-- Activity feed -->
+        <div class="pet-card">
+          <div class="pet-feed-title"><i data-lucide="clock" width="12" height="12"></i> Последняя активность</div>
+          <div id="pet-feed-list"><div class="pet-feed-empty">Нет активности</div></div>
+        </div>
+      </div>
+
+      <div class="pet-bottom-right">
+        <!-- Quick links -->
+        <div class="pet-card">
+          <div class="pet-quick-title"><i data-lucide="utensils" width="12" height="12"></i> Накорми питомца</div>
+          <div class="pet-quick-grid">
+            <a href="/hangman" class="pet-quick-card">
+              <div class="pet-quick-ico" style="background:rgba(249,65,68,.12)"><i data-lucide="gamepad-2" width="18" height="18" style="color:#F94144"></i></div>
+              <div><div class="pet-quick-name">Виселица</div><div class="pet-quick-xp">+до 15 XP</div></div>
+            </a>
+            <a href="/crossword" class="pet-quick-card">
+              <div class="pet-quick-ico" style="background:rgba(6,214,224,.12)"><i data-lucide="grid-3x3" width="18" height="18" style="color:#06D6E0"></i></div>
+              <div><div class="pet-quick-name">Кроссворд</div><div class="pet-quick-xp">+до 20 XP</div></div>
+            </a>
+            <a href="/dashboard" class="pet-quick-card">
+              <div class="pet-quick-ico" style="background:rgba(155,93,229,.12)"><i data-lucide="file-text" width="18" height="18" style="color:#9B5DE5"></i></div>
+              <div><div class="pet-quick-name">Тест</div><div class="pet-quick-xp">XP за ответы</div></div>
+            </a>
+            <a href="/theory" class="pet-quick-card">
+              <div class="pet-quick-ico" style="background:rgba(249,199,79,.12)"><i data-lucide="book-open" width="18" height="18" style="color:#F9C74F"></i></div>
+              <div><div class="pet-quick-name">Теория</div><div class="pet-quick-xp">Читай уроки</div></div>
+            </a>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+  </div>
+  </div>
+</div>
+
+<!-- ── Feed mini-game overlay ── -->
+<div id="feed-overlay" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:1000;align-items:center;justify-content:center;backdrop-filter:blur(6px)">
+  <div style="background:var(--surface);border:1.5px solid rgba(255,255,255,.1);border-radius:22px;padding:28px 26px;width:380px;max-width:94vw;box-shadow:0 24px 80px rgba(0,0,0,.5)">
+    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:18px">
+      <div style="font-family:'Unbounded',sans-serif;font-size:.95rem;font-weight:800">Покорми питомца</div>
+      <button onclick="closeFeedGame()" style="background:none;border:none;cursor:pointer;color:var(--text-3);padding:4px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" 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 style="font-size:.78rem;color:var(--text-3);margin-bottom:14px">Ответь правильно, чтобы накормить питомца! <span style="color:#F9C74F;font-weight:700">+15 XP</span></div>
+    <div id="feed-q-text" style="font-size:.95rem;font-weight:700;color:var(--text);margin-bottom:16px;line-height:1.5"></div>
+    <div id="feed-opts" style="display:flex;flex-direction:column;gap:8px"></div>
+    <div id="feed-result" style="display:none;margin-top:14px;padding:12px 14px;border-radius:12px;font-size:.87rem;font-weight:700;text-align:center"></div>
+    <div id="feed-timer-bar" style="height:3px;background:#e0e6f0;border-radius:99px;margin-top:16px;overflow:hidden"><div id="feed-timer-fill" style="height:100%;border-radius:99px;background:linear-gradient(90deg,#F9C74F,#F94144);transition:width .25s linear;width:100%"></div></div>
+  </div>
+</div>
+
+<script src="/js/api.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+<script>
+/* ── Constants ── */
+const EVO_COLORS  = ['','#38D95A','#06D6E0','#9B5DE5','#F9C74F','#F94144','#FF6B6B','#C084FC','#FFD700'];
+const EVO_STAGES  = ['','Яйцо','Малыш','Подросток','Взрослый','Легенда','Архонт','Астрал','Вечный'];
+const PET_PALETTES = {
+  purple:'#9B5DE5', cyan:'#06D6E0', gold:'#F9C74F',
+  red:'#F94144',    green:'#38D95A', blue:'#4A90D9',
+};
+const PALETTE_LABELS = {
+  purple:'Фиолетовый', cyan:'Голубой', gold:'Золотой',
+  red:'Красный', green:'Зелёный', blue:'Синий',
+};
+const MOOD_LABELS = {
+  ecstatic:['Восторг!', 'mood-ecstatic-badge'],
+  happy:   ['Счастлив', 'mood-happy-badge'],
+  neutral: ['Спокоен',  'mood-neutral-badge'],
+  sad:     ['Грустит',  'mood-sad-badge'],
+  hungry:  ['Голодает', 'mood-hungry-badge'],
+  sleeping:['Спит',     'mood-sleeping-badge'],
+};
+const BUBBLES = {
+  ecstatic:['Ура! Ты лучший! Так держать!','Я в восторге! Ты суперзвезда!','Wow! Продолжай учиться!'],
+  happy:   ['Привет! Я рад тебя видеть!','Сегодня хороший день!','Ты молодец! Так держать!'],
+  neutral: ['Привет! Как дела?','Всё спокойно... Пройдём тест?','Хочется чего-нибудь интересного!'],
+  sad:     ['Скучаю по тебе...','Где ты был? Я тебя ждал...','Заходи почаще!'],
+  hungry:  ['Хочу есть... Сыграй в игру!','Живот урчит... учись скорее!','Голоден! Помоги мне — пройди тест!'],
+  sleeping:['Zzz... Zzz...','Давно не видел тебя... Zzz...','Просыпаюсь... ты наконец здесь?'],
+};
+const _svg = (d, s=20) => `<svg width="${s}" height="${s}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${d}</svg>`;
+const MOOD_TIPS = {
+  ecstatic:{ico:_svg('<path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/>'),title:'Питомец счастлив!',text:'Серия дней отличная! Поддерживай ежедневную активность.'},
+  happy:   {ico:_svg('<circle cx="12" cy="12" r="10"/><path d="M8 13s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/>'),title:'Всё хорошо!',text:'Продолжай заходить каждый день и набирать XP в играх.'},
+  neutral: {ico:_svg('<path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/>'),title:'Можно лучше!',text:'Пройди тест или сыграй в игру. Серия дней улучшает настроение!'},
+  sad:     {ico:_svg('<circle cx="12" cy="12" r="10"/><path d="M16 16s-1.5-2-4-2-4 2-4 2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/>'),title:'Питомец грустит',text:'Войди хотя бы раз в день — серия дней поднимет настроение.'},
+  hungry:  {ico:_svg('<path d="M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2"/><path d="M7 2v20"/><path d="M21 15V2v0a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7"/>'),title:'Питомец голодает!',text:'Прошло 3+ дня без активности. Виселица или Кроссворд дадут XP быстро.'},
+  sleeping:{ico:_svg('<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>'),title:'Питомец спит...',text:'Очень долгое отсутствие. Начни с простой игры — всего 5 минут!'},
+};
+const HUNGER_MSGS  = ['Сыт!','Немного голоден','Хочет есть','Очень голоден!','Умирает!'];
+const HAPPY_PHRASES = ['Мяу! Ещё, ещё!','Щекотно! Хи-хи!','Я тебя люблю!','Обними меня крепче!'];
+
+/* ── Button SVG helpers ── */
+const SVG_HAND  = `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 11V6a2 2 0 0 0-4 0v0"/><path d="M14 10V4a2 2 0 0 0-4 0v2"/><path d="M10 10.5V6a2 2 0 0 0-4 0v8"/><path d="M6 14v0a2 2 0 0 0-2-2H2v5l6.5 6.5a2 2 0 0 0 2.8 0l3.7-3.7a2 2 0 0 0 0-2.8L18 18"/></svg>`;
+const SVG_CLOCK = `<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="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>`;
+const SVG_TIMER_ICO = `<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="M10 2h4"/><path d="M12 14v-4"/><circle cx="12" cy="14" r="8"/></svg>`;
+
+/* ── Quest icon SVGs ── */
+const QUEST_ICONS = {
+  xp30:    _svg('<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"/>', 16),
+  test1:   _svg('<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="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/>', 16),
+  streak2: _svg('<path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/>', 16),
+};
+
+let _petData = null;
+let _petCooldown = false;
+let _petCooldownTimer = null;
+
+/* ── Init ── */
+(async () => {
+  if (!LS.requireAuth()) return;
+  const user = LS.getUser();
+  LS.applyRoleSidebar(user);
+  if (user) {
+    document.getElementById('nav-avatar').textContent =
+      (user.name||'LS').split(' ').slice(0,2).map(w=>w[0]?.toUpperCase()||'').join('')||'LS';
+    document.getElementById('nav-user').textContent = user.name || '—';
+    if (user.role === 'admin')    document.getElementById('sbl-admin').style.display   = '';
+    LS.showBoardIfAllowed();
+    if (user.role !== 'student') {
+      document.getElementById('sbl-classes').style.display = '';
+    }
+  }
+  LS.sidebar?.init();
+  lucide.createIcons();
+
+  const feats = await LS.loadFeatures();
+  if (feats.pet === false) {
+    document.querySelector('.pet-wrap').innerHTML =
+      '<div style="color:var(--text-2);text-align:center;padding:80px 20px">Питомец отключён администратором.</div>';
+    LS.hideDisabledFeatures();
+    return;
+  }
+  LS.hideDisabledFeatures();
+
+  // Eye tracking
+  const stage = document.getElementById('pet-stage');
+  stage.addEventListener('mousemove', onStageMouse);
+  stage.addEventListener('mouseleave', () => {
+    applyPupilOffset(0, 0);
+    const scene = document.getElementById('pet-scene');
+    if (scene) scene.style.transform = '';
+  });
+
+  applyTimeOfDay();
+  scheduleNextStar();
+  loadPet();
+})();
+
+/* ── A4 Time of day ── */
+function applyTimeOfDay() {
+  const h = new Date().getHours();
+  const tod = h >= 5 && h < 9 ? 'dawn' : h >= 9 && h < 18 ? 'day' : h >= 18 && h < 21 ? 'dusk' : 'night';
+  const scene = document.getElementById('pet-scene');
+  if (!scene) return;
+  scene.dataset.tod = tod;
+  if (tod === 'night') {
+    const ns = document.createElement('div');
+    ns.style.cssText = 'position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:50%;z-index:0;';
+    for (let i = 0; i < 14; i++) {
+      const s = document.createElement('div');
+      const sz = 1 + Math.random() * 1.5;
+      s.style.cssText = `position:absolute;left:${Math.random()*90}%;top:${Math.random()*55}%;width:${sz}px;height:${sz}px;border-radius:50%;background:white;animation:wxTwinkle ${2+Math.random()*3}s ${Math.random()*4}s ease-in-out infinite;`;
+      ns.appendChild(s);
+    }
+    scene.prepend(ns);
+  }
+}
+
+/* ── A3 Weather particles ── */
+function applyWeather(mood) {
+  const w = document.getElementById('pet-weather');
+  if (!w) return;
+  w.innerHTML = '';
+  if (mood === 'ecstatic' || mood === 'happy') {
+    for (let i = 0; i < 9; i++) {
+      const p = document.createElement('div');
+      p.style.cssText = `position:absolute;left:${8+Math.random()*82}%;bottom:${5+Math.random()*20}%;--wx:${(Math.random()-.5)*28}px;animation:wxSparkle ${2.2+Math.random()*2}s ${Math.random()*4}s ease-out infinite;`;
+      const sz = 4 + Math.random() * 4;
+      p.innerHTML = `<svg width="${sz}" height="${sz}" viewBox="0 0 24 24"><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" fill="#F9C74F" opacity=".8"/></svg>`;
+      w.appendChild(p);
+    }
+  } else if (mood === 'sad' || mood === 'hungry') {
+    for (let i = 0; i < 15; i++) {
+      const p = document.createElement('div');
+      const h = 7 + Math.random() * 7;
+      p.style.cssText = `position:absolute;left:${Math.random()*95}%;top:0;animation:wxRain ${1+Math.random()*.8}s ${Math.random()*3}s linear infinite;`;
+      p.innerHTML = `<svg width="2" height="${h}" viewBox="0 0 2 ${h}"><line x1="1" y1="0" x2="1" y2="${h}" stroke="rgba(120,180,255,.55)" stroke-width="1.5" stroke-linecap="round"/></svg>`;
+      w.appendChild(p);
+    }
+  } else if (mood === 'sleeping') {
+    for (let i = 0; i < 5; i++) {
+      const p = document.createElement('div');
+      const sz = 35 + Math.random() * 45;
+      p.style.cssText = `position:absolute;left:${Math.random()*75}%;top:${15+Math.random()*55}%;animation:wxFog ${4+Math.random()*3}s ${Math.random()*3}s ease-in-out infinite;`;
+      p.innerHTML = `<svg width="${sz}" height="${sz*.4}" viewBox="0 0 60 24"><ellipse cx="30" cy="12" rx="30" ry="12" fill="rgba(155,93,229,.13)"/></svg>`;
+      w.appendChild(p);
+    }
+  }
+}
+
+/* ── B2 BgFX particles ── */
+function applyBgFX(bgId) {
+  const c = document.getElementById('pet-bgfx');
+  if (!c) return;
+  c.innerHTML = '';
+  if (!bgId || bgId === 'default') return;
+  const rnd = (a, b) => (Math.random() * (b - a) + a).toFixed(1);
+  const rndI = (a, b) => Math.floor(Math.random() * (b - a) + a);
+  if (bgId === 'space') {
+    // 24 twinkling stars
+    for (let i = 0; i < 24; i++) {
+      const d = document.createElement('div');
+      const s = rnd(0.8, 3);
+      d.style.cssText = `position:absolute;left:${rnd(3,95)}%;top:${rnd(3,92)}%;width:${s}px;height:${s}px;border-radius:50%;background:#fff;animation:bgStarTwink ${rnd(1,3.5)}s ${rnd(0,4)}s ease-in-out infinite`;
+      c.appendChild(d);
+    }
+    // 2 nebula blobs
+    [{l:18,t:15,w:42,h:24,col:'rgba(155,93,229,.4)'},{l:62,t:62,w:36,h:20,col:'rgba(60,40,200,.35)'}].forEach(n=>{
+      const d = document.createElement('div');
+      d.style.cssText = `position:absolute;left:${n.l}%;top:${n.t}%;width:${n.w}px;height:${n.h}px;border-radius:50%;background:${n.col};filter:blur(9px)`;
+      c.appendChild(d);
+    });
+  } else if (bgId === 'forest') {
+    // 14 fireflies
+    for (let i = 0; i < 14; i++) {
+      const d = document.createElement('div');
+      const col = Math.random() > .5 ? '#90EE90' : '#CCFF44';
+      const fx = rndI(-6,7), fy = rndI(-7,1);
+      d.style.cssText = `position:absolute;left:${rnd(8,88)}%;top:${rnd(5,88)}%;width:3px;height:3px;border-radius:50%;background:${col};box-shadow:0 0 5px ${col};--fx:${fx}px;--fy:${fy}px;animation:bgFirefly ${rnd(0.8,2.5)}s ${rnd(0,5)}s ease-in-out infinite`;
+      c.appendChild(d);
+    }
+  } else if (bgId === 'aqua') {
+    // 11 rising bubbles
+    for (let i = 0; i < 11; i++) {
+      const d = document.createElement('div');
+      const s = rnd(4, 14);
+      d.style.cssText = `position:absolute;left:${rnd(8,88)}%;bottom:-14px;width:${s}px;height:${s}px;border-radius:50%;border:1.5px solid rgba(6,214,224,.75);animation:bgBubble ${rnd(2,4.5)}s ${rnd(0,6)}s ease-out infinite`;
+      c.appendChild(d);
+    }
+  } else if (bgId === 'sunset') {
+    // 13 rising embers
+    for (let i = 0; i < 13; i++) {
+      const d = document.createElement('div');
+      const s = rnd(1.5, 4.5);
+      const col = Math.random() > .5 ? '#F9C74F' : '#F97140';
+      const ex = rndI(-10,11);
+      d.style.cssText = `position:absolute;left:${rnd(8,88)}%;bottom:4%;width:${s}px;height:${s}px;border-radius:50%;background:${col};box-shadow:0 0 6px ${col};--ex:${ex}px;animation:bgEmber ${rnd(1.5,3)}s ${rnd(0,5)}s ease-out infinite`;
+      c.appendChild(d);
+    }
+  }
+}
+
+/* ── B1 Star mini-game ── */
+let _starActive = false, _starMissTimeout = null;
+function scheduleNextStar() {
+  const last = parseInt(localStorage.getItem('ls_last_star') || '0');
+  const elapsed = Date.now() - last;
+  const cooldown = 60 * 60 * 1000;
+  setTimeout(spawnStar, elapsed > cooldown ? 8000 : cooldown - elapsed + 3000);
+}
+function spawnStar() {
+  if (_starActive) return;
+  _starActive = true;
+  const g = document.getElementById('pet-star-game');
+  g.style.left = (18 + Math.random() * 62) + '%';
+  g.style.top  = (18 + Math.random() * 55) + '%';
+  g.className = 'pet-star-game active';
+  g.innerHTML = `<div class="pet-star-wrap">
+    <button class="pet-star-btn" onclick="catchStar()" title="+5 монет — поймай звезду!">
+      <svg width="34" height="34" viewBox="0 0 24 24" fill="#F9C74F" stroke="#d4920a" stroke-width=".8"><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>
+  </div>`;
+  _starMissTimeout = setTimeout(missedStar, 4500);
+}
+async function catchStar() {
+  if (!_starActive) return;
+  _starActive = false;
+  clearTimeout(_starMissTimeout);
+  localStorage.setItem('ls_last_star', Date.now());
+  const g = document.getElementById('pet-star-game');
+  g.className = 'pet-star-game'; g.innerHTML = '';
+  const res = await LS.api('/api/pet/star', {method:'POST'}).catch(() => null);
+  const earned = res?.coins ?? 5;
+  if (_petData) { _petData.coins = (_petData.coins || 0) + earned; document.getElementById('stat-coins').textContent = _petData.coins; }
+  floatLabel(`+${earned} монет`, '#F9C74F', '38%');
+  spawnHearts();
+  scheduleNextStar();
+}
+function missedStar() {
+  _starActive = false;
+  const g = document.getElementById('pet-star-game');
+  g.className = 'pet-star-game'; g.innerHTML = '';
+  scheduleNextStar();
+}
+
+/* ── B4 XP / coin floats ── */
+function floatLabel(text, color, left) {
+  const scene = document.getElementById('pet-scene');
+  if (!scene) return;
+  const el = document.createElement('div');
+  el.className = 'pet-xp-float';
+  el.textContent = text;
+  el.style.cssText = `left:${left || (30+Math.random()*38)+'%'};bottom:28%;color:${color||'#38D95A'};text-shadow:0 0 8px ${color||'#38D95A'}88;`;
+  scene.appendChild(el);
+  setTimeout(() => el.remove(), 1700);
+}
+
+/* ── B2 Pet backgrounds shop ── */
+const BG_PREVIEWS = {
+  default: 'linear-gradient(155deg,#0d0d1f,#1a1040)',
+  space:   'radial-gradient(ellipse at 25% 20%,rgba(155,93,229,.75) 0%,transparent 55%),linear-gradient(155deg,#01010e,#060228)',
+  forest:  'radial-gradient(ellipse at 50% 100%,rgba(56,217,90,.8) 0%,transparent 55%),linear-gradient(155deg,#010701,#082007)',
+  aqua:    'radial-gradient(ellipse at 50% 100%,rgba(6,214,224,.8) 0%,transparent 55%),linear-gradient(155deg,#010810,#03203a)',
+  sunset:  'radial-gradient(ellipse at 50% 100%,rgba(249,100,20,.9) 0%,transparent 55%),linear-gradient(155deg,#100201,#1e0404)',
+};
+const BG_NAMES = { default:'Стандарт', space:'Космос', forest:'Лес', aqua:'Океан', sunset:'Закат' };
+
+async function openPetShop() {
+  const data = await LS.api('/api/pet/shop').catch(() => null);
+  if (!data) return;
+  const items = [{ id:'default', name:'Стандарт', price:0, owned:true }, ...data.items];
+  const el = document.createElement('div');
+  el.className = 'pet-shop-overlay';
+  el.innerHTML = `
+    <div class="pet-shop-modal">
+      <div class="pet-shop-head">
+        <div class="pet-shop-title">Фоны сцены</div>
+        <div style="display:flex;align-items:center;gap:14px">
+          <div class="pet-shop-coins">
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="#F9C74F" stroke="none"><circle cx="12" cy="12" r="10"/><text x="12" y="16" text-anchor="middle" font-size="10" fill="#111" font-weight="bold">₿</text></svg>
+            <span id="shop-coins-val">${data.coins}</span> монет
+          </div>
+          <button class="pet-shop-close" onclick="this.closest('.pet-shop-overlay').remove()"><svg class="ic" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+        </div>
+      </div>
+      <div class="pet-shop-grid" id="shop-grid">
+        ${items.map(item => {
+          const isActive = data.currentBg === item.id;
+          const isOwned  = item.owned || item.price === 0;
+          return `<div class="pet-bg-card${isActive?' active':''}" data-id="${item.id}" onclick="selectBg('${item.id}',${item.price||0},${isOwned},this)">
+            <div class="pet-bg-preview" style="background:${BG_PREVIEWS[item.id]||BG_PREVIEWS.default}"></div>
+            <div class="pet-bg-info">
+              <div class="pet-bg-name">${item.name}</div>
+              <div class="pet-bg-status">${isActive ? 'Активен' : isOwned ? 'Куплено' : item.price+' монет'}</div>
+            </div>
+          </div>`;
+        }).join('')}
+      </div>
+    </div>`;
+  document.body.appendChild(el);
+  el.addEventListener('click', e => { if (e.target === el) el.remove(); });
+}
+
+async function selectBg(id, price, owned, card) {
+  const modal = card.closest('.pet-shop-overlay');
+  const endpoint = owned ? '/api/pet/bg' : '/api/pet/shop/buy';
+  const res = await LS.api(endpoint, { method: owned ? 'PATCH' : 'POST', body: JSON.stringify({ id }) }).catch(e => {
+    if (e.data?.error === 'insufficient_coins') LS.toast?.('Недостаточно монет', 'error');
+    return null;
+  });
+  if (!res?.ok) return;
+
+  // Update scene bg
+  const scene = document.getElementById('pet-scene');
+  scene.className = scene.className.replace(/\bbg-\S+/g, '') + (id !== 'default' ? ` bg-${id}` : '');
+  if (_petData) _petData.petBg = id;
+  applyBgFX(id);
+
+  // Update coins display
+  if (res.coins !== undefined) {
+    const cv = document.getElementById('shop-coins-val');
+    if (cv) cv.textContent = res.coins;
+    document.getElementById('stat-coins').textContent = res.coins;
+    if (_petData) _petData.coins = res.coins;
+  }
+
+  // Update card states in modal
+  modal.querySelectorAll('.pet-bg-card').forEach(c => {
+    const isThis = c.dataset.id === id;
+    c.classList.toggle('active', isThis);
+    c.querySelector('.pet-bg-status').textContent = isThis ? 'Активен' : (c.dataset.id === 'default' || owned ? 'Куплено' : '');
+    // mark newly bought as owned
+    if (isThis && !owned) { c.querySelector('.pet-bg-status').textContent = 'Активен'; }
+  });
+  // mark all previously-owned cards
+  if (!owned) {
+    card.onclick = () => selectBg(id, 0, true, card);
+  }
+}
+
+/* ── Eye tracking + A2 Parallax ── */
+function onStageMouse(e) {
+  const wrap = document.getElementById('pet-svg-wrap');
+  if (!wrap) return;
+  const rect = wrap.getBoundingClientRect();
+  const cx = rect.left + rect.width  / 2;
+  const cy = rect.top  + rect.height / 2;
+  const dx = Math.max(-4, Math.min(4, (e.clientX - cx) / rect.width  * 16));
+  const dy = Math.max(-3, Math.min(3, (e.clientY - cy) / rect.height * 12));
+  applyPupilOffset(dx, dy);
+  const scene = document.getElementById('pet-scene');
+  if (scene) scene.style.transform = `perspective(600px) rotateX(${-dy * .45}deg) rotateY(${dx * .45}deg)`;
+}
+function applyPupilOffset(dx, dy) {
+  document.getElementById('pet-svg-wrap')?.querySelectorAll('.pet-pupil').forEach(el => {
+    el.style.transform = `translate(${dx}px,${dy}px)`;
+  });
+}
+
+/* ── Load ── */
+async function loadPet() {
+  const d = await LS.api('/api/pet').catch(() => null);
+  if (!d) return;
+  _petData = d;
+  renderPet(d);
+}
+
+/* ── Render ── */
+function renderPet(d) {
+  // Mood glow on stage
+  const stage = document.getElementById('pet-stage');
+  stage.className = `pet-stage glow-${d.mood}`;
+
+  // Evolution burst (level-up detection)
+  const stored = parseInt(localStorage.getItem('ls_pet_level') || '0');
+  localStorage.setItem('ls_pet_level', d.petLevel);
+  if (stored > 0 && d.petLevel > stored) triggerEvoBurst(d.petLevel);
+
+  // Pet SVG (B3: pass streak for rainbow collar)
+  const wrap = document.getElementById('pet-svg-wrap');
+  wrap.className = `pet-svg-wrap pet-float mood-${d.mood}`;
+  wrap.innerHTML = renderPetSVG(d.petLevel, d.mood, d.accessories, d.petColor || 'purple', d.streakCurrent || 0);
+
+  // Scene mood class + weather + tod + B2 background
+  const scene = document.getElementById('pet-scene');
+  const prevTod = scene.dataset.tod;
+  scene.className = `pet-scene mood-${d.mood}`;
+  if (prevTod) scene.dataset.tod = prevTod;
+  if (d.petBg && d.petBg !== 'default') scene.classList.add(`bg-${d.petBg}`);
+  applyWeather(d.mood);
+  applyBgFX(d.petBg || 'default');
+
+  // B4: XP float if XP increased since last visit
+  const cachedXP = parseInt(localStorage.getItem('ls_pet_xp') || '0');
+  if (cachedXP > 0 && d.xp > cachedXP) setTimeout(() => floatLabel(`+${d.xp - cachedXP} XP`, '#38D95A'), 900);
+  localStorage.setItem('ls_pet_xp', d.xp);
+
+  // Speech bubble
+  const lines = BUBBLES[d.mood] || BUBBLES.neutral;
+  document.getElementById('pet-bubble').textContent = lines[Math.floor(Math.random()*lines.length)];
+
+  // Name
+  document.getElementById('pet-name').textContent = d.petName || 'Квантик';
+
+  // Mood badge
+  const mbd = document.getElementById('pet-mood-badge');
+  const [lbl, cls] = MOOD_LABELS[d.mood] || ['—',''];
+  mbd.textContent = lbl; mbd.className = `pet-mood ${cls}`;
+
+  // Evolution
+  const evoName = document.getElementById('pet-evo-name');
+  evoName.textContent = EVO_STAGES[d.petLevel] || '—';
+  evoName.style.color = EVO_COLORS[d.petLevel] || '#9B5DE5';
+
+  // Level dots (up to 8 levels, shown in two rows)
+  const dots = document.getElementById('pet-lvl-dots');
+  dots.innerHTML = '';
+  dots.style.flexWrap = 'wrap';
+  for (let i = 1; i <= 8; i++) {
+    const dot = document.createElement('div');
+    const active = i <= d.petLevel;
+    const col    = EVO_COLORS[Math.min(d.petLevel, EVO_COLORS.length - 1)];
+    dot.style.cssText = `width:9px;height:9px;border-radius:50%;transition:all .3s;
+      background:${active ? col : 'rgba(255,255,255,.1)'};
+      ${active ? `box-shadow:0 0 6px ${col}90` : ''}`;
+    dots.appendChild(dot);
+  }
+
+  // Color picker
+  renderColorPicker(d.petColor || 'purple');
+
+  // Accessories
+  const accEl = document.getElementById('pet-accessories');
+  const ACC   = { hat:'Шляпа', glasses:'Очки', crown:'Корона', star:'Звезда' };
+  accEl.innerHTML = d.accessories.length
+    ? d.accessories.map(a => `<span class="pet-acc-badge">${ACC[a]||a}</span>`).join('') : '';
+
+  // Stats
+  document.getElementById('stat-streak').textContent      = d.streakCurrent + ' дн.';
+  document.getElementById('stat-streak-best').textContent = d.streakBest    + ' дн.';
+  document.getElementById('stat-coins').textContent       = d.coins;
+  document.getElementById('stat-petting').textContent     = (d.pettingStreak || 0) + ' дн.';
+
+  // XP
+  document.getElementById('stat-level').textContent = 'Ур. ' + d.level;
+  document.getElementById('xp-curr').textContent    = d.xp;
+  if (d.xpForNextLevel) {
+    const pct = Math.min(100, Math.round((d.xp - d.xpForCurrLevel) / (d.xpForNextLevel - d.xpForCurrLevel) * 100));
+    document.getElementById('xp-next-val').textContent = d.xpForNextLevel;
+    document.getElementById('xp-bar').style.width = pct + '%';
+  } else {
+    document.getElementById('xp-next-val').textContent = 'MAX';
+    document.getElementById('xp-bar').style.width = '100%';
+  }
+
+  // Hunger hearts
+  const hunger = Math.min(4, d.daysSinceLogin);
+  const fullH  = 5 - hunger;
+  const hCols  = ['#38D95A','#06D6E0','#F9C74F','#F98231','#F94144'];
+  const hC     = hCols[hunger];
+  const hPath  = 'M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z';
+  const hEl    = document.getElementById('pet-hunger-dots');
+  hEl.innerHTML = '';
+  for (let i = 0; i < 5; i++) {
+    const svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
+    svg.setAttribute('viewBox','0 0 24 24');
+    svg.setAttribute('class','pet-hunger-heart '+(i<fullH?'filled':'empty'));
+    const p = document.createElementNS('http://www.w3.org/2000/svg','path');
+    p.setAttribute('d', hPath);
+    p.setAttribute('fill',  i<fullH ? hC : 'rgba(255,255,255,.5)');
+    p.setAttribute('stroke',i<fullH ? hC : 'rgba(255,255,255,.35)');
+    p.setAttribute('stroke-width','1');
+    svg.style.color = hC;
+    svg.appendChild(p); hEl.appendChild(svg);
+  }
+  document.getElementById('hunger-msg').textContent = HUNGER_MSGS[Math.min(hunger,4)];
+
+  // Mood tip + forecast
+  const tip = MOOD_TIPS[d.mood] || MOOD_TIPS.neutral;
+  document.getElementById('tip-ico').innerHTML = tip.ico;
+  document.getElementById('tip-title').textContent = tip.title;
+  document.getElementById('tip-text').textContent  = tip.text;
+  const fc = document.getElementById('tip-forecast');
+  if (d.moodForecast) {
+    const mn = d.moodForecast.mood === 'sad' ? 'грустить' : 'голодать';
+    const msg = d.moodForecast.inDays === 0
+      ? 'Питомец скоро почувствует себя хуже — зайди сегодня!'
+      : `Через ${d.moodForecast.inDays} дн. питомец начнёт ${mn}`;
+    fc.innerHTML = `${SVG_TIMER_ICO} ${msg}`;
+    fc.style.display = 'flex';
+    fc.style.alignItems = 'center';
+    fc.style.gap = '4px';
+  } else {
+    fc.style.display = 'none';
+  }
+
+  // Quests
+  renderQuests(d.quests || []);
+
+  // XP chart
+  renderChart(d.weeklyXP || []);
+
+  // Activity feed
+  const feed = document.getElementById('pet-feed-list');
+  if (d.recentActivity?.length) {
+    feed.innerHTML = d.recentActivity.map(ev => `
+      <div class="pet-feed-item">
+        <div class="pet-feed-xp">+${ev.xp}</div>
+        <div class="pet-feed-lbl">${escHtml(ev.label)}</div>
+        <div class="pet-feed-time">${fmtAgo(ev.at)}</div>
+      </div>`).join('');
+  } else {
+    feed.innerHTML = '<div class="pet-feed-empty">Нет активности</div>';
+  }
+
+  // Petting cooldown from server
+  if (d.pettingCooldown > 0) {
+    _petCooldown = true;
+    startCooldown(d.pettingCooldown);
+  }
+  // Feed cooldown from server
+  if (d.feedCooldown > 0) startFeedCooldown(d.feedCooldown);
+}
+
+/* ── Quests ── */
+function renderQuests(quests) {
+  const el = document.getElementById('pet-quests');
+  if (!quests.length) { el.innerHTML = '<div style="color:var(--text-2);font-size:.8rem">Нет заданий</div>'; return; }
+  el.innerHTML = quests.map(q => {
+    const bar = q.goal !== undefined
+      ? `<div class="quest-bar"><div class="quest-fill" style="width:${Math.round((q.progress||0)/q.goal*100)}%"></div></div>` : '';
+    return `<div class="quest-item${q.done?' done':''}">
+      <div class="quest-ico">${QUEST_ICONS[q.id] || ''}</div>
+      <div class="quest-body"><div class="quest-label">${q.label}</div>${bar}</div>
+      <div class="quest-check"><svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div>
+    </div>`;
+  }).join('');
+}
+
+/* ── Weekly XP chart ── */
+function renderChart(data) {
+  const chart = document.getElementById('xp-chart');
+  if (!data || !data.length) {
+    chart.innerHTML = '<div style="color:var(--text-2);font-size:.8rem;align-self:center">Нет данных</div>';
+    return;
+  }
+  const max = Math.max(...data.map(d => d.xp), 1);
+  chart.innerHTML = data.map((d, i) => {
+    const pct = Math.max(3, Math.round(d.xp / max * 100));
+    const isToday = i === data.length - 1;
+    return `<div class="chart-col${isToday?' today':''}">
+      <div class="chart-val">${d.xp > 0 ? d.xp : ''}</div>
+      <div class="chart-bar-wrap"><div class="chart-fill" style="height:${pct}%"></div></div>
+      <div class="chart-day">${d.day}</div>
+    </div>`;
+  }).join('');
+}
+
+/* ── Color picker ── */
+function renderColorPicker(currentColor) {
+  const picker = document.getElementById('color-picker');
+  picker.innerHTML = Object.entries(PET_PALETTES).map(([key, hex]) =>
+    `<div class="pet-color-dot${currentColor === key ? ' active' : ''}"
+          style="background:${hex}" data-color="${key}"
+          title="${PALETTE_LABELS[key] || key}"></div>`
+  ).join('');
+  picker.querySelectorAll('.pet-color-dot').forEach(dot =>
+    dot.addEventListener('click', () => selectColor(dot.dataset.color))
+  );
+}
+async function selectColor(colorKey) {
+  if (!_petData || _petData.petColor === colorKey) return;
+  const res = await LS.api('/api/pet/color', {method:'PATCH', body: JSON.stringify({color:colorKey})}).catch(()=>null);
+  if (!res?.ok) return;
+  _petData.petColor = colorKey;
+  document.getElementById('pet-svg-wrap').innerHTML =
+    renderPetSVG(_petData.petLevel, _petData.mood, _petData.accessories, colorKey);
+  document.querySelectorAll('.pet-color-dot').forEach(d =>
+    d.classList.toggle('active', d.dataset.color === colorKey)
+  );
+}
+
+/* ── Petting ── */
+async function petThePet() {
+  if (_petCooldown) return;
+  const btn = document.getElementById('btn-pet');
+  btn.disabled = true;
+
+  const res = await LS.api('/api/pet/pet', {method:'POST'}).catch(() => null);
+  if (!res?.ok) {
+    if (res?.remaining) startCooldown(res.remaining);
+    else btn.disabled = false;
+    return;
+  }
+
+  // Animate pet
+  const wrap = document.getElementById('pet-svg-wrap');
+  wrap.classList.add('petting');
+  setTimeout(() => wrap.classList.remove('petting'), 600);
+
+  // Scatter hearts
+  spawnHearts();
+
+  // Update counters
+  if (_petData) {
+    _petData.pettingStreak = res.pettingStreak;
+    _petData.coins = (_petData.coins || 0) + res.coins;
+    document.getElementById('stat-coins').textContent   = _petData.coins;
+    document.getElementById('stat-petting').textContent = res.pettingStreak + ' дн.';
+  }
+
+  // B4: coin float
+  floatLabel(`+${res.coins} монет`, '#F9C74F');
+
+  // Happy bubble
+  document.getElementById('pet-bubble').textContent = HAPPY_PHRASES[Math.floor(Math.random()*HAPPY_PHRASES.length)];
+
+  startCooldown(60);
+}
+
+function startCooldown(secs) {
+  _petCooldown = true;
+  const btn = document.getElementById('btn-pet');
+  btn.disabled = true;
+  btn.innerHTML = `${SVG_CLOCK} ${secs}с`;
+  clearInterval(_petCooldownTimer);
+  _petCooldownTimer = setInterval(() => {
+    secs--;
+    if (secs <= 0) {
+      clearInterval(_petCooldownTimer);
+      btn.disabled = false;
+      btn.innerHTML = `${SVG_HAND} Погладить`;
+      _petCooldown = false;
+      if (_petData) {
+        const lines = BUBBLES[_petData.mood] || BUBBLES.neutral;
+        document.getElementById('pet-bubble').textContent = lines[Math.floor(Math.random()*lines.length)];
+      }
+    } else {
+      btn.innerHTML = `${SVG_CLOCK} ${secs}с`;
+    }
+  }, 1000);
+}
+
+/* ── Feed mini-game ──────────────────────────────────────────────────── */
+const FEED_QUESTIONS = [
+  { q: 'Химическая формула воды', a: 'H₂O',     opts: ['H₂O', 'CO₂', 'NaCl', 'H₂SO₄'] },
+  { q: 'Формула углекислого газа', a: 'CO₂',    opts: ['CO₂', 'O₂', 'CH₄', 'N₂O'] },
+  { q: 'Молекула кислорода', a: 'O₂',            opts: ['O₂', 'O₃', 'H₂O₂', 'OH'] },
+  { q: 'Хлорид натрия (поваренная соль)', a: 'NaCl', opts: ['NaCl', 'KCl', 'CaCl₂', 'MgCl₂'] },
+  { q: 'Серная кислота', a: 'H₂SO₄',            opts: ['H₂SO₄', 'HCl', 'HNO₃', 'H₃PO₄'] },
+  { q: 'Аммиак', a: 'NH₃',                       opts: ['NH₃', 'NO₂', 'N₂H₄', 'NH₄OH'] },
+  { q: 'Глюкоза', a: 'C₆H₁₂O₆',               opts: ['C₆H₁₂O₆', 'C₁₂H₂₂O₁₁', 'C₅H₁₀O₅', 'C₂H₅OH'] },
+  { q: 'Метан (природный газ)', a: 'CH₄',       opts: ['CH₄', 'C₂H₆', 'C₃H₈', 'C₄H₁₀'] },
+  { q: 'Озон', a: 'O₃',                          opts: ['O₃', 'O₂', 'O₄', 'OH'] },
+  { q: 'Перекись водорода', a: 'H₂O₂',         opts: ['H₂O₂', 'H₂O', 'H₂SO₄', 'HOH'] },
+  { q: 'Этиловый спирт', a: 'C₂H₅OH',          opts: ['C₂H₅OH', 'CH₃OH', 'C₃H₇OH', 'C₄H₉OH'] },
+  { q: 'Соляная кислота', a: 'HCl',              opts: ['HCl', 'HBr', 'HF', 'HI'] },
+  { q: 'Гидроксид натрия (щёлочь)', a: 'NaOH', opts: ['NaOH', 'KOH', 'Ca(OH)₂', 'Mg(OH)₂'] },
+  { q: 'АТФ — основа энергии клетки', a: 'C₁₀H₁₆N₅O₁₃P₃', opts: ['C₁₀H₁₆N₅O₁₃P₃', 'C₅H₁₀O₅', 'C₆H₁₂O₆', 'C₃H₇NO₂'] },
+  { q: 'Азотная кислота', a: 'HNO₃',            opts: ['HNO₃', 'H₂SO₄', 'HCl', 'H₃PO₄'] },
+  { q: 'Ацетилсалициловая кислота (аспирин)', a: 'C₉H₈O₄', opts: ['C₉H₈O₄', 'C₇H₆O₃', 'C₁₁H₁₂O₄', 'C₈H₉NO₂'] },
+];
+
+let _feedTimerInterval = null, _feedTimerSecs = 0, _feedAnswered = false;
+let _feedCooldownTimer = null;
+
+function openFeedGame() {
+  const btn = document.getElementById('btn-feed');
+  if (btn.disabled) return;
+  if (_petData && _petData.feedCooldown > 0) { startFeedCooldown(_petData.feedCooldown); return; }
+  _feedAnswered = false;
+  const q = FEED_QUESTIONS[Math.floor(Math.random() * FEED_QUESTIONS.length)];
+  document.getElementById('feed-q-text').textContent = q.q;
+  document.getElementById('feed-result').style.display = 'none';
+  // shuffle opts
+  const opts = [...q.opts].sort(() => Math.random() - 0.5);
+  const optsEl = document.getElementById('feed-opts');
+  optsEl.innerHTML = opts.map(o => `
+    <button onclick="feedAnswer(this,${JSON.stringify(o).replace(/"/g,'&quot;')},${JSON.stringify(q.a).replace(/"/g,'&quot;')})"
+      style="padding:10px 14px;border:1.5px solid var(--border-h);border-radius:12px;background:transparent;font-family:'Manrope',sans-serif;font-size:.88rem;font-weight:600;color:var(--text);cursor:pointer;text-align:left;transition:all .2s"
+      onmouseover="this.style.borderColor='var(--violet)'" onmouseout="this.style.borderColor='var(--border-h)'">
+      ${escHtml(o)}
+    </button>`).join('');
+  const overlay = document.getElementById('feed-overlay');
+  overlay.style.display = 'flex';
+  // timer: 15 seconds
+  _feedTimerSecs = 15;
+  document.getElementById('feed-timer-fill').style.width = '100%';
+  clearInterval(_feedTimerInterval);
+  _feedTimerInterval = setInterval(() => {
+    _feedTimerSecs--;
+    document.getElementById('feed-timer-fill').style.width = (_feedTimerSecs / 15 * 100) + '%';
+    if (_feedTimerSecs <= 0) {
+      clearInterval(_feedTimerInterval);
+      if (!_feedAnswered) showFeedResult(false, null);
+    }
+  }, 1000);
+}
+
+function closeFeedGame() {
+  clearInterval(_feedTimerInterval);
+  document.getElementById('feed-overlay').style.display = 'none';
+}
+
+async function feedAnswer(btn, chosen, correct) {
+  if (_feedAnswered) return;
+  _feedAnswered = true;
+  clearInterval(_feedTimerInterval);
+  document.getElementById('feed-opts').querySelectorAll('button').forEach(b => b.disabled = true);
+  const isRight = chosen === correct;
+  if (isRight) {
+    btn.style.cssText += ';border-color:#38D95A;background:rgba(56,217,90,.1);color:#38D95A';
+    const res = await LS.api('/api/pet/feed', {method:'POST'}).catch(() => null);
+    if (res?.ok) {
+      if (_petData) { _petData.xp = res.xp; _petData.coins = res.coins; _petData.feedCooldown = 1800; }
+      showFeedResult(true, res.xpAwarded || 15);
+    } else if (res?.remaining) {
+      showFeedResult(null, 0, 'Подожди ' + Math.ceil(res.remaining / 60) + ' мин. — питомец ещё сыт!');
+      startFeedCooldown(res.remaining);
+    } else {
+      showFeedResult(true, 15);
+    }
+  } else {
+    btn.style.cssText += ';border-color:#F94144;background:rgba(249,65,68,.08);color:#F94144';
+    // Highlight correct
+    document.getElementById('feed-opts').querySelectorAll('button').forEach(b => {
+      if (b.textContent.trim() === correct) b.style.cssText += ';border-color:#38D95A;background:rgba(56,217,90,.1);color:#38D95A';
+    });
+    showFeedResult(false, null);
+  }
+}
+
+function showFeedResult(correct, xp, customMsg) {
+  const el = document.getElementById('feed-result');
+  if (correct === null) {
+    el.style.cssText = 'display:block;padding:12px 14px;border-radius:12px;background:rgba(155,93,229,.1);border:1.5px solid rgba(155,93,229,.25);font-size:.87rem;font-weight:700;text-align:center;color:#9B5DE5';
+    el.textContent = customMsg || 'Время вышло!';
+  } else if (correct) {
+    el.style.cssText = 'display:block;padding:12px 14px;border-radius:12px;background:rgba(56,217,90,.1);border:1.5px solid rgba(56,217,90,.25);font-size:.87rem;font-weight:700;text-align:center;color:#38D95A';
+    el.textContent = `Правильно! +${xp} XP — питомец доволен!`;
+    floatLabel(`+${xp} XP`, '#38D95A');
+    document.getElementById('pet-bubble').textContent = '😋 Вкуснятина!';
+    setTimeout(() => { closeFeedGame(); startFeedCooldown(1800); }, 1800);
+  } else {
+    el.style.cssText = 'display:block;padding:12px 14px;border-radius:12px;background:rgba(249,65,68,.08);border:1.5px solid rgba(249,65,68,.2);font-size:.87rem;font-weight:700;text-align:center;color:#F94144';
+    el.textContent = 'Неверно — питомец остался голодным 😢';
+    setTimeout(closeFeedGame, 1800);
+  }
+}
+
+const SVG_FOOD = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#F9C74F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2"/><path d="M7 2v20"/><path d="M21 15V2v0a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7"/></svg>`;
+
+function startFeedCooldown(secs) {
+  const btn = document.getElementById('btn-feed');
+  btn.disabled = true;
+  btn.innerHTML = `${SVG_CLOCK} ${Math.ceil(secs / 60)}м`;
+  clearInterval(_feedCooldownTimer);
+  _feedCooldownTimer = setInterval(() => {
+    secs -= 10;
+    if (secs <= 0) {
+      clearInterval(_feedCooldownTimer);
+      btn.disabled = false;
+      btn.innerHTML = `${SVG_FOOD} Покормить`;
+      if (_petData) _petData.feedCooldown = 0;
+    } else {
+      btn.innerHTML = `${SVG_CLOCK} ${Math.ceil(secs / 60)}м`;
+    }
+  }, 10000);
+}
+
+/* ── Scatter hearts (petting) ── */
+function spawnHearts() {
+  const scene  = document.getElementById('pet-scene');
+  const hearts = [
+    '<svg width="1em" height="1em" viewBox="0 0 24 24" fill="#F94144" stroke="none"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>',
+    '<svg width="1em" height="1em" viewBox="0 0 24 24" fill="#FF6B9D" stroke="none"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>',
+    '<svg width="1em" height="1em" viewBox="0 0 24 24" fill="#F9C74F" stroke="none"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>',
+    '<svg width="1em" height="1em" viewBox="0 0 24 24" fill="#9B5DE5" stroke="none"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>',
+    '<svg width="1em" height="1em" viewBox="0 0 24 24" fill="#F94144" stroke="none"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>',
+    '<svg width="1em" height="1em" viewBox="0 0 24 24" fill="#06D6A0" stroke="none"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>',
+  ];
+  for (let i = 0; i < 5; i++) {
+    setTimeout(() => {
+      const el    = document.createElement('div');
+      const angle = (i / 5) * Math.PI * 2 + Math.random() * 0.5;
+      const dist  = 38 + Math.random() * 28;
+      const tx    = Math.cos(angle) * dist;
+      const ty    = Math.sin(angle) * dist - 20;
+      el.style.cssText = `
+        position:absolute; font-size:${1+Math.random()*.5}rem;
+        top:50%; left:50%; margin:-10px 0 0 -10px;
+        pointer-events:none; z-index:10;
+        --tx:${tx}px; --ty:${ty}px;
+        animation:floatHeart 1s ease-out forwards;`;
+      el.innerHTML = hearts[i % hearts.length];
+      scene.appendChild(el);
+      setTimeout(() => el.remove(), 1100);
+    }, i * 110);
+  }
+}
+
+/* ── Evolution burst ── */
+function triggerEvoBurst(newLevel) {
+  const stage    = document.getElementById('pet-stage');
+  const scene    = document.getElementById('pet-scene');
+  stage.classList.add('evo-burst');
+  setTimeout(() => stage.classList.remove('evo-burst'), 1000);
+
+  const sparkles = [
+    '<svg width="1em" height="1em" viewBox="0 0 24 24" fill="#F9C74F" stroke="none"><path d="m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3z"/></svg>',
+    '<svg width="1em" height="1em" viewBox="0 0 24 24" fill="#FFD166" stroke="none"><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>',
+    '<svg width="1em" height="1em" viewBox="0 0 24 24" fill="#9B5DE5" stroke="none"><path d="m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3z"/></svg>',
+    '<svg width="1em" height="1em" viewBox="0 0 24 24" fill="#06D6E0" stroke="none"><path d="m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3z"/></svg>',
+    '<svg width="1em" height="1em" viewBox="0 0 24 24" fill="#F9C74F" stroke="none"><path d="m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3z"/></svg>',
+    '<svg width="1em" height="1em" viewBox="0 0 24 24" fill="#FFD166" stroke="none"><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>',
+  ];
+  for (let i = 0; i < 10; i++) {
+    setTimeout(() => {
+      const el    = document.createElement('div');
+      const angle = (i / 10) * Math.PI * 2 + Math.random() * 0.3;
+      const dist  = 55 + Math.random() * 35;
+      el.style.cssText = `
+        position:absolute; font-size:${0.9+Math.random()*.5}rem;
+        top:50%; left:50%; margin:-10px 0 0 -10px;
+        pointer-events:none; z-index:20;
+        --tx:${Math.cos(angle)*dist}px; --ty:${Math.sin(angle)*dist}px;
+        animation:floatHeart 1.3s ease-out forwards;`;
+      el.innerHTML = sparkles[i % sparkles.length];
+      scene.appendChild(el);
+      setTimeout(() => el.remove(), 1400);
+    }, i * 70);
+  }
+}
+
+/* ── Rename ── */
+function toggleRename() {
+  const form = document.getElementById('rename-form');
+  if (form.classList.contains('visible')) {
+    form.classList.remove('visible');
+  } else {
+    document.getElementById('rename-input').value = _petData?.petName || '';
+    form.classList.add('visible');
+    document.getElementById('rename-input').focus();
+  }
+}
+async function saveName() {
+  const name = document.getElementById('rename-input').value.trim();
+  if (!name) return;
+  const res = await LS.api('/api/pet/name', {method:'PATCH', body:{name}}).catch(()=>null);
+  if (res?.ok) {
+    document.getElementById('pet-name').textContent = name;
+    if (_petData) _petData.petName = name;
+    document.getElementById('rename-form').classList.remove('visible');
+  }
+}
+
+/* ── Helpers ── */
+function escHtml(s) { return (s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
+function fmtAgo(dateStr) {
+  if (!dateStr) return '';
+  const diff = (Date.now() - new Date(dateStr)) / 1000;
+  if (diff < 60)    return 'только что';
+  if (diff < 3600)  return Math.floor(diff/60) + ' мин.';
+  if (diff < 86400) return Math.floor(diff/3600) + ' ч.';
+  const d = Math.floor(diff/86400);
+  return d === 1 ? 'вчера' : d + ' дн.';
+}
+function shadeColor(hex, pct) {
+  const n = parseInt(hex.slice(1), 16);
+  const r = Math.min(255,Math.max(0,(n>>16)+pct));
+  const g = Math.min(255,Math.max(0,((n>>8)&0xff)+pct));
+  const b = Math.min(255,Math.max(0,(n&0xff)+pct));
+  return `rgb(${r},${g},${b})`;
+}
+
+/* ── Pet SVG renderer ── */
+function renderPetSVG(level, mood, accessories = [], colorKey = 'purple', streak = 0) {
+  const col   = PET_PALETTES[colorKey] || '#9B5DE5';
+  const dark  = shadeColor(col, -45);
+  const light = shadeColor(col,  52);
+  const uid   = `pg${level}${mood[0]}${colorKey[0]}`;
+
+  const bodyPath = 'M55,22 C70,22 86,37 87,56 C89,75 78,94 55,97 C32,94 21,75 23,56 C24,37 40,22 55,22 Z';
+  const eyeY = 52, eyeX1 = 40, eyeX2 = 70;
+
+  /* ── Eyebrows ── */
+  let eyebrows = '';
+  if (mood !== 'sleeping') {
+    if (mood === 'ecstatic') {
+      eyebrows = `<path d="M33,46 C37,42 43,42 47,46" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
+                  <path d="M63,46 C67,42 73,42 77,46" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round"/>`;
+    } else if (mood === 'sad' || mood === 'hungry') {
+      eyebrows = `<path d="M33,47 C37,51 43,51 47,47" fill="none" stroke="white" stroke-width="2" stroke-linecap="round"/>
+                  <path d="M63,47 C67,51 73,51 77,47" fill="none" stroke="white" stroke-width="2" stroke-linecap="round"/>`;
+    } else {
+      eyebrows = `<path d="M33,47 Q40,45 47,47" fill="none" stroke="white" stroke-width="2" stroke-linecap="round"/>
+                  <path d="M63,47 Q70,45 77,47" fill="none" stroke="white" stroke-width="2" stroke-linecap="round"/>`;
+    }
+  }
+
+  /* ── Eyes ── */
+  let eyeGroups = '', cheeks = '', extras = '';
+  if (mood === 'sleeping') {
+    eyeGroups = `<path d="M${eyeX1-8},${eyeY} Q${eyeX1},${eyeY-8} ${eyeX1+8},${eyeY}" stroke="white" stroke-width="2.5" fill="none" stroke-linecap="round"/>
+                 <path d="M${eyeX2-8},${eyeY} Q${eyeX2},${eyeY-8} ${eyeX2+8},${eyeY}" stroke="white" stroke-width="2.5" fill="none" stroke-linecap="round"/>`;
+  } else {
+    const ry1  = mood === 'ecstatic' ? 13 : mood === 'happy' ? 12 : 10.5;
+    const prx  = mood === 'ecstatic' ? 7  : mood === 'happy' ? 6.5 : 5.5;
+    const pry  = mood === 'ecstatic' ? 8  : mood === 'happy' ? 7.5 : 6.5;
+    const pOff = (mood === 'sad' || mood === 'hungry') ? 3 : 2;
+    eyeGroups = `
+      <g class="pet-eye-blink" style="transform-box:fill-box;transform-origin:center">
+        <ellipse cx="${eyeX1}" cy="${eyeY}" rx="10" ry="${ry1}" fill="white"/>
+        <ellipse class="pet-pupil" cx="${eyeX1+1}" cy="${eyeY+pOff}" rx="${prx}" ry="${pry}" fill="#111"/>
+        <circle cx="${eyeX1-3}" cy="${eyeY-3}" r="2" fill="white" opacity=".9"/>
+      </g>
+      <g class="pet-eye-blink2" style="transform-box:fill-box;transform-origin:center">
+        <ellipse cx="${eyeX2}" cy="${eyeY}" rx="10" ry="${ry1}" fill="white"/>
+        <ellipse class="pet-pupil" cx="${eyeX2+1}" cy="${eyeY+pOff}" rx="${prx}" ry="${pry}" fill="#111"/>
+        <circle cx="${eyeX2-3}" cy="${eyeY-3}" r="2" fill="white" opacity=".9"/>
+      </g>`;
+  }
+
+  /* ── Nose ── */
+  const nose = mood !== 'sleeping'
+    ? `<ellipse cx="55" cy="62" rx="3.5" ry="2.5" fill="${dark}" opacity=".45"/>` : '';
+
+  /* ── Mouth + cheeks ── */
+  let mouth = '';
+  if (mood === 'sleeping') {
+    mouth = `<path d="M47,68 Q55,72 63,68" stroke="white" stroke-width="2.5" fill="none" stroke-linecap="round"/>`;
+  } else if (mood === 'ecstatic') {
+    mouth  = `<path d="M43,67 Q55,82 67,67" stroke="white" stroke-width="2.5" fill="none" stroke-linecap="round"/>`;
+    cheeks = `<ellipse cx="24" cy="62" rx="9" ry="6" fill="${col}" opacity=".4"/>
+              <ellipse cx="86" cy="62" rx="9" ry="6" fill="${col}" opacity=".4"/>`;
+  } else if (mood === 'happy') {
+    mouth  = `<path d="M44,68 Q55,80 66,68" stroke="white" stroke-width="2.5" fill="none" stroke-linecap="round"/>`;
+    cheeks = `<ellipse cx="25" cy="62" rx="8" ry="5.5" fill="${col}" opacity=".32"/>
+              <ellipse cx="85" cy="62" rx="8" ry="5.5" fill="${col}" opacity=".32"/>`;
+  } else if (mood === 'sad' || mood === 'hungry') {
+    mouth  = `<path d="M44,72 Q55,64 66,72" stroke="white" stroke-width="2.5" fill="none" stroke-linecap="round"/>`;
+    if (mood === 'hungry')
+      extras = `<ellipse cx="78" cy="59" rx="2.5" ry="3.5" fill="rgba(130,195,255,.8)"/>`;
+  } else {
+    mouth = `<path d="M44,68 Q55,74 66,68" stroke="white" stroke-width="2.5" fill="none" stroke-linecap="round"/>`;
+  }
+
+  /* ── Animated tail (all levels) ── */
+  const tail = `<g>
+    <path d="M68,91 C78,88 92,86 90,101 C88,110 76,110 72,103 C68,97 66,95 68,91 Z" fill="${col}" stroke="${dark}" stroke-width="1.2"/>
+    <animateTransform attributeName="transform" type="rotate" values="-7 68 91; 7 68 91; -7 68 91" dur="0.75s" repeatCount="indefinite"/>
+  </g>`;
+
+  /* ── Ears (level 2+) ── */
+  let ears = '';
+  if (level >= 2) {
+    ears = `<ellipse cx="32" cy="34" rx="9" ry="12" fill="${col}" transform="rotate(-15 32 34)"/>
+            <ellipse cx="32" cy="35" rx="6" ry="8"  fill="${light}" opacity=".4" transform="rotate(-15 32 35)"/>
+            <ellipse cx="78" cy="34" rx="9" ry="12" fill="${col}" transform="rotate(15 78 34)"/>
+            <ellipse cx="78" cy="35" rx="6" ry="8"  fill="${light}" opacity=".4" transform="rotate(15 78 35)"/>`;
+  }
+
+  /* ── Antennae (level 3+) ── */
+  let antennae = '';
+  if (level >= 3) {
+    antennae = `<line x1="44" y1="27" x2="34" y2="11" stroke="${col}" stroke-width="2.5" stroke-linecap="round"/>
+                <circle cx="33" cy="9" r="5" fill="${col}"/>
+                <circle cx="31" cy="7" r="2" fill="white" opacity=".7"/>
+                <line x1="66" y1="27" x2="76" y2="11" stroke="${col}" stroke-width="2.5" stroke-linecap="round"/>
+                <circle cx="77" cy="9" r="5" fill="${col}"/>
+                <circle cx="75" cy="7" r="2" fill="white" opacity=".7"/>`;
+  }
+
+  /* ── Wings with flutter (level 4+) ── */
+  let wings = '';
+  if (level >= 4) {
+    wings = `<g>
+      <path d="M14,62 C2,46 2,30 16,38 C26,44 22,59 18,65 Z" fill="${light}" opacity=".65"/>
+      <path d="M16,62 C6,50 8,38 18,42 C26,46 24,57 20,62 Z" fill="white" opacity=".15"/>
+      <animateTransform attributeName="transform" type="rotate" values="0 14 62; -10 14 62; 0 14 62" dur="0.45s" repeatCount="indefinite"/>
+    </g>
+    <g>
+      <path d="M96,62 C108,46 108,30 94,38 C84,44 88,59 92,65 Z" fill="${light}" opacity=".65"/>
+      <path d="M94,62 C104,50 102,38 92,42 C84,46 86,57 90,62 Z" fill="white" opacity=".15"/>
+      <animateTransform attributeName="transform" type="rotate" values="0 96 62; 10 96 62; 0 96 62" dur="0.45s" repeatCount="indefinite"/>
+    </g>`;
+  }
+
+  /* ── Paws with fingers ── */
+  const paws = `
+    <ellipse cx="14" cy="76" rx="12" ry="8" fill="url(#${uid})" transform="rotate(-25 14 76)"/>
+    <circle cx="8"  cy="82" r="2.8" fill="${dark}" opacity=".45"/>
+    <circle cx="13" cy="84" r="2.8" fill="${dark}" opacity=".45"/>
+    <circle cx="18" cy="83" r="2.8" fill="${dark}" opacity=".45"/>
+    <ellipse cx="96" cy="76" rx="12" ry="8" fill="url(#${uid})" transform="rotate(25 96 76)"/>
+    <circle cx="102" cy="82" r="2.8" fill="${dark}" opacity=".45"/>
+    <circle cx="97"  cy="84" r="2.8" fill="${dark}" opacity=".45"/>
+    <circle cx="92"  cy="83" r="2.8" fill="${dark}" opacity=".45"/>`;
+
+  /* ── Accessories ── */
+  let accSvg = '';
+  if (accessories.includes('hat')) {
+    accSvg += `<rect x="36" y="22" width="38" height="6" rx="3" fill="#2a2a2a"/>
+               <rect x="42" y="6"  width="26" height="17" rx="4" fill="#1a1a1a"/>
+               <rect x="42" y="6"  width="26" height="5"  rx="2" fill="#333" opacity=".6"/>`;
+  }
+  if (accessories.includes('glasses')) {
+    accSvg += `<circle cx="${eyeX1}" cy="${eyeY}" r="14" fill="none" stroke="rgba(255,255,255,.65)" stroke-width="2"/>
+               <circle cx="${eyeX2}" cy="${eyeY}" r="14" fill="none" stroke="rgba(255,255,255,.65)" stroke-width="2"/>
+               <line x1="54" y1="${eyeY}" x2="56" y2="${eyeY}" stroke="rgba(255,255,255,.65)" stroke-width="2"/>
+               <line x1="19" y1="${eyeY-3}" x2="26" y2="${eyeY}" stroke="rgba(255,255,255,.45)" stroke-width="1.5"/>
+               <line x1="91" y1="${eyeY-3}" x2="84" y2="${eyeY}" stroke="rgba(255,255,255,.45)" stroke-width="1.5"/>`;
+  }
+  if (accessories.includes('crown') || level >= 5) {
+    accSvg += `<path d="M33,26 L41,10 L55,22 L69,10 L77,26 L78,32 L32,32 Z" fill="#F9C74F"/>
+               <rect x="32" y="28" width="46" height="6" rx="2" fill="#F9C74F"/>
+               <circle cx="41" cy="11" r="4" fill="#F94144"/>
+               <circle cx="55" cy="23" r="4" fill="#06D6E0"/>
+               <circle cx="69" cy="11" r="4" fill="#9B5DE5"/>`;
+  }
+  if (accessories.includes('star') && level < 5) {
+    accSvg += `<polygon points="98,18 100,24 106,24 101,28 103,34 98,30 93,34 95,28 90,24 96,24" fill="#F9C74F"/>`;
+  }
+
+  /* ── Aura ring (level 4+) ── */
+  let aura = '';
+  if (level >= 4) {
+    aura = `<g>
+      <circle cx="55" cy="60" r="47" fill="none" stroke="${col}" stroke-width="2.5" stroke-dasharray="9 6">
+        <animate attributeName="opacity" values=".35;.55;.35" dur="2.5s" repeatCount="indefinite"/>
+      </circle>
+      <animateTransform attributeName="transform" type="rotate" from="0 55 60" to="360 55 60" dur="9s" repeatCount="indefinite"/>
+    </g>`;
+  }
+
+  /* ── B3 Rainbow collar (streak ≥ 7) ── */
+  let rainbowCollar = '';
+  if (streak >= 7) {
+    rainbowCollar = `<g style="animation:rbRot 3s linear infinite;transform-box:fill-box;transform-origin:55px 38px">
+      <defs>
+        <linearGradient id="${uid}rb" x1="0%" y1="0%" x2="100%" y2="0%">
+          <stop offset="0%"   stop-color="#F94144"/>
+          <stop offset="20%"  stop-color="#F9C74F"/>
+          <stop offset="40%"  stop-color="#38D95A"/>
+          <stop offset="60%"  stop-color="#06D6E0"/>
+          <stop offset="80%"  stop-color="#9B5DE5"/>
+          <stop offset="100%" stop-color="#F94144"/>
+        </linearGradient>
+      </defs>
+      <ellipse cx="55" cy="38" rx="22" ry="8" fill="none" stroke="url(#${uid}rb)" stroke-width="3.5" opacity=".88"/>
+    </g>`;
+  }
+
+  /* ── Orbital particles (level 5+) ── */
+  let orbitals = '';
+  if (level >= 5) {
+    const oData = [
+      { start: 0,   dur: 2.8, r: 46, size: 4,   fill: col,    op: .85 },
+      { start: 120, dur: 3.6, r: 43, size: 3,   fill: light,  op: .7  },
+      { start: 240, dur: 2.2, r: 48, size: 3.5, fill: 'white', op: .6 },
+    ];
+    // Extra orbitals for level 6+
+    if (level >= 6) {
+      oData.push(
+        { start: 60,  dur: 1.9, r: 51, size: 2.5, fill: light, op: .65 },
+        { start: 180, dur: 4.1, r: 40, size: 2,   fill: col,   op: .55 },
+        { start: 300, dur: 3.0, r: 54, size: 3,   fill: 'white', op: .5 },
+      );
+    }
+    // Even more for level 8
+    if (level >= 8) {
+      oData.push(
+        { start: 45,  dur: 1.5, r: 56, size: 3.5, fill: '#FFD700', op: .9  },
+        { start: 225, dur: 2.4, r: 38, size: 2.5, fill: '#FFD700', op: .75 },
+      );
+    }
+    orbitals = oData.map(o => `<g>
+      <circle cx="55" cy="${60 - o.r}" r="${o.size}" fill="${o.fill}" opacity="${o.op}"/>
+      <animateTransform attributeName="transform" type="rotate"
+        from="${o.start} 55 60" to="${o.start + 360} 55 60" dur="${o.dur}s" repeatCount="indefinite"/>
+    </g>`).join('\n');
+  }
+
+  /* ── Second aura ring (level 6+) ── */
+  if (level >= 6) {
+    aura += `<g>
+      <circle cx="55" cy="60" r="53" fill="none" stroke="${col}" stroke-width="1.5" stroke-dasharray="5 9" opacity="0.4">
+        <animate attributeName="opacity" values=".25;.45;.25" dur="3.2s" repeatCount="indefinite"/>
+      </circle>
+      <animateTransform attributeName="transform" type="rotate" from="360 55 60" to="0 55 60" dur="14s" repeatCount="indefinite"/>
+    </g>`;
+  }
+
+  /* ── Crystal halo (level 7+) ── */
+  let halo = '';
+  if (level >= 7) {
+    halo = `<g>
+      <ellipse cx="55" cy="18" rx="20" ry="5" fill="none" stroke="${col}" stroke-width="2.5" opacity=".75">
+        <animate attributeName="opacity" values=".55;.85;.55" dur="2s" repeatCount="indefinite"/>
+      </ellipse>
+      <ellipse cx="55" cy="18" rx="14" ry="3" fill="none" stroke="white" stroke-width="1" opacity=".4"/>
+    </g>`;
+  }
+
+  /* ── Second wing pair (level 7+) ── */
+  if (level >= 7) {
+    wings += `<g>
+      <path d="M18,55 C8,43 10,33 20,37 C27,40 25,50 22,55 Z" fill="${light}" opacity=".45"/>
+      <animateTransform attributeName="transform" type="rotate" values="0 18 55; -12 18 55; 0 18 55" dur="0.35s" repeatCount="indefinite"/>
+    </g>
+    <g>
+      <path d="M92,55 C102,43 100,33 90,37 C83,40 85,50 88,55 Z" fill="${light}" opacity=".45"/>
+      <animateTransform attributeName="transform" type="rotate" values="0 92 55; 12 92 55; 0 92 55" dur="0.35s" repeatCount="indefinite"/>
+    </g>`;
+  }
+
+  /* ── Third aura + body shimmer (level 8) ── */
+  let shimmer = '';
+  if (level >= 8) {
+    aura += `<g>
+      <circle cx="55" cy="60" r="58" fill="none" stroke="#FFD700" stroke-width="1" stroke-dasharray="3 12" opacity="0.35">
+        <animate attributeName="opacity" values=".2;.5;.2" dur="4s" repeatCount="indefinite"/>
+      </circle>
+      <animateTransform attributeName="transform" type="rotate" from="0 55 60" to="360 55 60" dur="20s" repeatCount="indefinite"/>
+    </g>`;
+    shimmer = `<ellipse cx="55" cy="58" rx="30" ry="35" fill="url(#${uid}sh)" opacity="0.18"/>`;
+  }
+
+  return `<svg viewBox="0 0 110 115" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <radialGradient id="${uid}" cx="38%" cy="28%" r="70%">
+        <stop offset="0%"   stop-color="${light}"/>
+        <stop offset="55%"  stop-color="${col}"/>
+        <stop offset="100%" stop-color="${dark}"/>
+      </radialGradient>
+      <radialGradient id="${uid}b" cx="50%" cy="55%" r="50%">
+        <stop offset="0%"   stop-color="white" stop-opacity="0.22"/>
+        <stop offset="100%" stop-color="white" stop-opacity="0"/>
+      </radialGradient>
+      <radialGradient id="${uid}sh" cx="50%" cy="40%" r="60%">
+        <stop offset="0%"   stop-color="#FFD700" stop-opacity="1"/>
+        <stop offset="100%" stop-color="#FFD700" stop-opacity="0"/>
+      </radialGradient>
+    </defs>
+    <ellipse cx="55" cy="111" rx="28" ry="4" fill="rgba(0,0,0,.18)"/>
+    ${aura}
+    ${halo}
+    ${tail}
+    ${wings}
+    ${ears}
+    ${antennae}
+    ${paws}
+    <path d="${bodyPath}" fill="url(#${uid})"/>
+    ${shimmer}
+    <ellipse cx="55" cy="70" rx="18" ry="12" fill="url(#${uid}b)"/>
+    ${cheeks}${eyebrows}${eyeGroups}${nose}${mouth}${extras}
+    ${rainbowCollar}
+    ${accSvg}
+    ${orbitals}
+  </svg>`;
+}
+</script>
+<script src="/js/notifications.js"></script>
+<script src="/js/search.js"></script>
+<script src="/js/mobile.js"></script>
+</body>
+</html>
diff --git a/frontend/profile.html b/frontend/profile.html
new file mode 100644
index 0000000..67b5c1a
--- /dev/null
+++ b/frontend/profile.html
@@ -0,0 +1,1381 @@
+<!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" />
+  <style>
+    html, body { height: 100%; overflow: hidden; }
+    .app-layout { height: 100vh; overflow: hidden; }
+    .sb-content  { height: 100vh; overflow: hidden; display: flex; align-items: stretch; }
+
+    .profile-layout {
+      display: flex; flex: 1; gap: 0; overflow: hidden;
+      padding: 20px 20px 20px 0;
+    }
+
+    /* ══════════ LEFT PANEL ══════════ */
+    .p-left {
+      width: 290px; flex-shrink: 0;
+      background: linear-gradient(170deg, #0d0b28 0%, #1a1248 45%, #0f1635 100%);
+      border-radius: 22px;
+      display: flex; flex-direction: column;
+      position: relative; overflow: hidden;
+    }
+
+    /* decorative blobs */
+    .p-left-blob1 {
+      position: absolute; width: 300px; height: 300px; border-radius: 50%;
+      background: radial-gradient(circle, rgba(155,93,229,0.35) 0%, transparent 70%);
+      top: -80px; right: -80px; pointer-events: none;
+    }
+    .p-left-blob2 {
+      position: absolute; width: 200px; height: 200px; border-radius: 50%;
+      background: radial-gradient(circle, rgba(6,214,224,0.15) 0%, transparent 70%);
+      bottom: 40px; left: -40px; pointer-events: none;
+    }
+    .p-left-dots {
+      position: absolute; inset: 0; pointer-events: none;
+      background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
+      background-size: 18px 18px;
+    }
+
+    /* top accent line */
+    .p-left-accent {
+      position: absolute; top: 0; left: 0; right: 0; height: 3px;
+      background: linear-gradient(90deg, #9B5DE5, #06D6E0);
+      border-radius: 22px 22px 0 0;
+    }
+
+    /* inner scroll area */
+    .p-left-inner {
+      position: relative; z-index: 1;
+      display: flex; flex-direction: column;
+      padding: 28px 22px 22px; flex: 1; overflow: hidden;
+    }
+
+    /* ── Avatar ── */
+    .p-avatar-wrap {
+      position: relative; width: 80px; height: 80px; flex-shrink: 0; margin-bottom: 16px;
+    }
+    .p-avatar-ring {
+      position: absolute; inset: -3px; border-radius: 50%;
+      background: linear-gradient(135deg, #9B5DE5, #06D6E0);
+      padding: 3px; border-radius: 50%;
+    }
+    .p-avatar-ring-inner {
+      width: 100%; height: 100%; border-radius: 50%;
+      background: #1a1248;
+    }
+    .p-avatar {
+      position: absolute; inset: 3px; border-radius: 50%;
+      background: linear-gradient(135deg, rgba(155,93,229,0.6), rgba(6,214,224,0.4));
+      display: flex; align-items: center; justify-content: center;
+      font-family: 'Unbounded', sans-serif; font-size: 1.3rem; font-weight: 800; color: #fff;
+    }
+
+    .p-name  {
+      font-family: 'Unbounded', sans-serif; font-size: 0.92rem; font-weight: 800;
+      color: #fff; line-height: 1.3; margin-bottom: 3px; word-break: break-word;
+    }
+    .p-email { font-size: 0.72rem; color: rgba(255,255,255,0.45); margin-bottom: 10px; word-break: break-all; }
+    .p-badge {
+      display: inline-flex; align-items: center; gap: 5px;
+      padding: 4px 11px; border-radius: 99px;
+      background: linear-gradient(135deg, rgba(155,93,229,0.25), rgba(6,214,224,0.15));
+      color: rgba(255,255,255,0.85); font-size: 0.67rem; font-weight: 700;
+      letter-spacing: 0.05em; text-transform: uppercase;
+      border: 1px solid rgba(155,93,229,0.4); margin-bottom: 5px;
+    }
+    .p-badge-dot {
+      width: 5px; height: 5px; border-radius: 50%;
+      background: linear-gradient(135deg, #9B5DE5, #06D6E0);
+    }
+    .p-since { font-size: 0.67rem; color: rgba(255,255,255,0.3); }
+
+    /* ── Divider ── */
+    .p-div { height: 1px; background: rgba(255,255,255,0.08); margin: 18px 0; flex-shrink: 0; }
+
+    /* ── Stats grid ── */
+    .p-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex-shrink: 0; }
+    .p-stat {
+      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
+      border-radius: 12px; padding: 10px 6px; text-align: center;
+      transition: background .2s;
+    }
+    .p-stat-val {
+      font-family: 'Unbounded', sans-serif; font-size: 1rem; font-weight: 900;
+      color: #fff; line-height: 1;
+    }
+    .p-stat-val.grad {
+      background: linear-gradient(135deg, #9B5DE5, #06D6E0);
+      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+    }
+    .p-stat-lbl { font-size: 0.58rem; color: rgba(255,255,255,0.4); font-weight: 600; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
+
+    /* ── Subject bars ── */
+    .p-subjects { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
+    .p-subj-row { display: flex; flex-direction: column; gap: 4px; }
+    .p-subj-top { display: flex; justify-content: space-between; align-items: baseline; }
+    .p-subj-name { font-size: 0.7rem; font-weight: 600; color: rgba(255,255,255,0.65); }
+    .p-subj-pct  { font-size: 0.7rem; font-weight: 800; font-family: 'Unbounded', sans-serif; color: rgba(255,255,255,0.85); }
+    .p-subj-bar  { height: 5px; background: rgba(255,255,255,0.08); border-radius: 99px; overflow: hidden; }
+    .p-subj-fill { height: 100%; border-radius: 99px; transition: width .7s cubic-bezier(.4,0,.2,1); }
+
+    /* ── Teacher classes ── */
+    .p-classes { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 6px; }
+    .p-class-row {
+      padding: 9px 11px; background: rgba(255,255,255,0.06);
+      border-radius: 12px; border: 1px solid rgba(255,255,255,0.09);
+      transition: background .2s;
+    }
+    .p-class-row:hover { background: rgba(255,255,255,0.10); }
+    .p-class-name { font-size: 0.77rem; font-weight: 700; color: rgba(255,255,255,0.9); margin-bottom: 2px; }
+    .p-class-meta { font-size: 0.64rem; color: rgba(255,255,255,0.4); }
+
+    /* ══════════ RIGHT PANEL ══════════ */
+    .p-right {
+      flex: 1; display: flex; flex-direction: column;
+      padding-left: 20px; overflow: hidden; min-width: 0;
+    }
+
+    /* page title */
+    .p-page-title {
+      font-family: 'Unbounded', sans-serif; font-size: 1rem; font-weight: 800;
+      color: var(--text); margin-bottom: 16px; flex-shrink: 0;
+    }
+
+    /* ── Tabs ── */
+    .p-tabs {
+      display: flex; gap: 2px; background: rgba(15,23,42,0.06);
+      border-radius: 13px; padding: 3px; margin-bottom: 18px;
+      flex-shrink: 0; width: fit-content;
+    }
+    .p-tab {
+      padding: 7px 20px; border: none; border-radius: 10px;
+      background: transparent; font-family: 'Manrope', sans-serif;
+      font-size: 0.83rem; font-weight: 600; color: var(--text-3);
+      cursor: pointer; transition: all .2s; white-space: nowrap;
+    }
+    .p-tab:hover:not(.active) { color: var(--text-2); background: rgba(15,23,42,0.04); }
+    .p-tab.active {
+      background: #fff; color: var(--text);
+      box-shadow: 0 1px 6px rgba(15,23,42,0.10);
+    }
+
+    /* ── Tab panes ── */
+    .p-pane { display: none; flex: 1; flex-direction: column; gap: 14px; overflow: hidden; }
+    .p-pane.active { display: flex; }
+    #tab-achievements { overflow-y: auto; padding-right: 4px; }
+    #tab-bookmarks    { overflow-y: auto; padding-right: 4px; }
+
+    /* ── Cards ── */
+    .p-card {
+      background: #fff; border: 1.5px solid var(--border);
+      border-radius: 18px; padding: 20px 22px; flex-shrink: 0;
+      box-shadow: 0 2px 12px rgba(15,23,42,0.05);
+      transition: box-shadow .2s;
+    }
+    .p-card:hover { box-shadow: 0 4px 20px rgba(15,23,42,0.08); }
+    .p-card-header {
+      display: flex; align-items: center; gap: 8px; margin-bottom: 18px;
+    }
+    .p-card-icon {
+      width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
+      display: flex; align-items: center; justify-content: center;
+      background: linear-gradient(135deg, rgba(155,93,229,0.12), rgba(6,214,224,0.08));
+    }
+    .p-card-icon i { color: var(--violet); }
+    .p-card-title {
+      font-family: 'Unbounded', sans-serif; font-size: 0.7rem; font-weight: 800;
+      color: var(--text); letter-spacing: 0.03em;
+    }
+    .p-card-sub { font-size: 0.72rem; color: var(--text-3); margin-top: 1px; }
+
+    /* ── bookmarks ── */
+    .bm-filter {
+      padding: 5px 14px; border-radius: 999px; border: 1.5px solid rgba(15,23,42,0.1);
+      background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.75rem;
+      font-weight: 600; color: #8898AA; cursor: pointer; transition: all .15s;
+    }
+    .bm-filter:hover { border-color: var(--violet); color: var(--violet); }
+    .bm-filter.active { background: rgba(155,93,229,0.08); border-color: var(--violet); color: var(--violet); }
+    .bm-item {
+      display: flex; align-items: center; gap: 14px; padding: 12px 14px;
+      border-radius: 14px; border: 1px solid rgba(15,23,42,0.06); margin-bottom: 8px;
+      background: rgba(255,255,255,0.5); transition: all .15s; cursor: pointer;
+    }
+    .bm-item:hover { background: rgba(155,93,229,0.04); border-color: rgba(155,93,229,0.15); }
+    .bm-item-icon {
+      width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center;
+      justify-content: center; font-size: 0.9rem; flex-shrink: 0;
+    }
+    .bm-item-icon-lesson { background: rgba(155,93,229,0.1); color: #9B5DE5; }
+    .bm-item-icon-course { background: rgba(6,214,160,0.1); color: #06D6A0; }
+    .bm-item-icon-file   { background: rgba(6,214,224,0.1); color: #06D6E0; }
+    .bm-item-body { flex: 1; min-width: 0; }
+    .bm-item-title { font-size: 0.85rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .bm-item-sub { font-size: 0.72rem; color: var(--text-3); margin-top: 2px; }
+    .bm-item-del {
+      width: 28px; height: 28px; border-radius: 8px; border: none; background: transparent;
+      color: #ccc; cursor: pointer; display: flex; align-items: center; justify-content: center;
+      transition: all .15s; flex-shrink: 0;
+    }
+    .bm-item-del:hover { background: rgba(239,71,111,0.08); color: #EF476F; }
+
+    /* ── Form ── */
+    .form-group { margin-bottom: 12px; }
+    .form-group:last-of-type { margin-bottom: 0; }
+    .form-label {
+      display: block; font-size: 0.67rem; font-weight: 700; color: var(--text-3);
+      text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 5px;
+    }
+    .form-input {
+      width: 100%; padding: 10px 13px;
+      border: 1.5px solid rgba(15,23,42,0.11); border-radius: 11px;
+      font-family: 'Manrope', sans-serif; font-size: 0.88rem; color: var(--text);
+      background: var(--bg); transition: border-color .2s, box-shadow .2s, background .2s;
+      box-sizing: border-box;
+    }
+    .form-input:focus {
+      outline: none; border-color: var(--violet); background: #fff;
+      box-shadow: 0 0 0 3px rgba(155,93,229,0.12);
+    }
+    .form-footer { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
+    .btn-save {
+      padding: 9px 22px; border: none; border-radius: 99px;
+      background: linear-gradient(135deg, #9B5DE5, #06D6E0);
+      color: #fff; font-family: 'Manrope', sans-serif;
+      font-size: 0.82rem; font-weight: 700; cursor: pointer;
+      transition: all .2s; position: relative; overflow: hidden;
+    }
+    .btn-save::after {
+      content: ''; position: absolute; inset: 0;
+      background: rgba(255,255,255,0); transition: background .2s;
+    }
+    .btn-save:hover::after { background: rgba(255,255,255,0.1); }
+    .btn-save:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(155,93,229,0.32); }
+    .btn-save:active { transform: none; }
+    .btn-save:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
+    .form-msg { font-size: 0.78rem; font-weight: 600; }
+    .form-msg.ok  { color: var(--green); }
+    .form-msg.err { color: var(--pink); }
+
+    /* ── Spacer ── */
+    .p-spacer { flex: 1; min-height: 8px; }
+
+    /* ── Logout row ── */
+    .p-logout-row {
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 14px 18px;
+      background: rgba(241,91,181,0.04);
+      border: 1.5px solid rgba(241,91,181,0.15);
+      border-radius: 15px; flex-shrink: 0;
+      transition: background .2s;
+    }
+    .p-logout-row:hover { background: rgba(241,91,181,0.07); }
+    .p-logout-info {}
+    .p-logout-label { font-size: 0.79rem; font-weight: 700; color: var(--text-2); margin-bottom: 1px; }
+    .p-logout-sub   { font-size: 0.68rem; color: var(--text-3); }
+    .btn-logout {
+      padding: 8px 18px; border: 1.5px solid var(--pink); border-radius: 99px;
+      background: transparent; color: var(--pink);
+      font-family: 'Manrope', sans-serif; font-size: 0.79rem; font-weight: 700;
+      cursor: pointer; transition: all .2s; white-space: nowrap; flex-shrink: 0;
+    }
+    .btn-logout:hover { background: var(--pink); color: #fff; box-shadow: 0 4px 14px rgba(241,91,181,0.3); }
+
+    /* ── Info block ── */
+    .p-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+    .p-info-item {
+      background: var(--bg); border: 1.5px solid var(--border);
+      border-radius: 12px; padding: 11px 14px;
+    }
+    .p-info-lbl { font-size: 0.64rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
+    .p-info-val { font-size: 0.86rem; font-weight: 600; color: var(--text); }
+
+    /* ── Achievements ── */
+    .ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
+    .ach-item {
+      display: flex; align-items: center; gap: 12px;
+      padding: 14px 16px; border-radius: 14px;
+      background: var(--bg); border: 1.5px solid var(--border);
+      transition: all 0.18s;
+    }
+    .ach-item.unlocked { border-color: rgba(155,93,229,0.25); background: rgba(155,93,229,0.04); }
+    .ach-item.locked   { opacity: 0.55; filter: grayscale(0.4); }
+    .ach-icon {
+      width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
+      display: flex; align-items: center; justify-content: center;
+      background: rgba(155,93,229,0.12); color: var(--violet);
+    }
+    .ach-item[data-cat="streak"] .ach-icon  { background: rgba(255,107,53,0.1);  color: #FF6B35; }
+    .ach-item[data-cat="volume"] .ach-icon  { background: rgba(6,214,224,0.1);   color: #06D6E0; }
+    .ach-item[data-cat="mastery"] .ach-icon { background: rgba(255,209,102,0.1); color: #FFB347; }
+    .ach-item[data-cat="level"] .ach-icon   { background: rgba(34,197,94,0.1);   color: #22c55e; }
+    .ach-item[data-cat="xp"] .ach-icon      { background: rgba(99,102,241,0.1);  color: #6366f1; }
+    .ach-body { flex: 1; min-width: 0; }
+    .ach-title { font-size: 0.82rem; font-weight: 700; color: var(--text); }
+    .ach-desc  { font-size: 0.7rem; color: var(--text-3); margin-top: 2px; }
+    .ach-date  { font-size: 0.62rem; color: var(--violet); font-weight: 600; margin-top: 3px; }
+    .ach-xp-bar {
+      display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
+      padding: 14px 18px; border-radius: 14px;
+      background: linear-gradient(135deg, rgba(155,93,229,0.08), rgba(6,214,224,0.05));
+      border: 1.5px solid rgba(155,93,229,0.12);
+      flex-shrink: 0;
+    }
+    .ach-xp-lvl {
+      width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
+      background: linear-gradient(135deg, #9B5DE5, #06D6E0);
+      display: flex; flex-direction: column; align-items: center; justify-content: center;
+      color: #fff; line-height: 1;
+    }
+    .ach-xp-lvl-num { font-family: 'Unbounded', sans-serif; font-size: 1rem; font-weight: 900; }
+    .ach-xp-lvl-lbl { font-size: 0.5rem; font-weight: 700; opacity: 0.85; }
+    .ach-xp-info { flex: 1; }
+    .ach-xp-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
+    .ach-xp-rank { font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 800; color: var(--text); }
+    .ach-xp-text { font-size: 0.72rem; color: var(--text-3); font-weight: 600; }
+    .ach-xp-progress { height: 7px; border-radius: 99px; background: rgba(15,23,42,0.07); overflow: hidden; }
+    .ach-xp-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #9B5DE5, #06D6E0); transition: width 0.6s; }
+    .ach-summary { display: flex; gap: 8px; margin-bottom: 14px; flex-shrink: 0; flex-wrap: wrap; }
+    .ach-sum-chip {
+      padding: 5px 12px; border-radius: 99px; font-size: 0.72rem; font-weight: 700;
+      background: rgba(155,93,229,0.08); color: var(--violet);
+    }
+
+    /* ── Avatar Frames ── */
+    .frames-section { margin-bottom: 18px; flex-shrink: 0; }
+    .frames-grid { display: flex; flex-wrap: wrap; gap: 10px; }
+    .frame-item {
+      display: flex; flex-direction: column; align-items: center; gap: 6px;
+      padding: 10px 12px; border-radius: 14px; cursor: pointer;
+      border: 2px solid transparent; transition: all 0.18s; min-width: 72px;
+    }
+    .frame-item:hover { background: rgba(155,93,229,0.04); }
+    .frame-item.selected { border-color: #9B5DE5; background: rgba(155,93,229,0.06); }
+    .frame-item.locked { opacity: 0.35; cursor: not-allowed; filter: grayscale(0.5); }
+    .frame-preview {
+      width: 44px; height: 44px; border-radius: 50%;
+      background: linear-gradient(135deg, #9B5DE5, #06D6E0);
+      display: flex; align-items: center; justify-content: center;
+      font-family: 'Unbounded', sans-serif; font-size: 0.7rem; font-weight: 800; color: #fff;
+    }
+    .frame-name { font-size: 0.62rem; font-weight: 700; color: var(--text-3); text-align: center; }
+    .frame-unlock-hint { font-size: 0.56rem; color: var(--text-3); text-align: center; max-width: 80px; }
+
+    /* ── Shop ── */
+    .shop-header {
+      display: flex; align-items: center; justify-content: space-between;
+      margin-bottom: 16px; flex-shrink: 0;
+    }
+    .shop-title {
+      font-family: 'Unbounded', sans-serif; font-size: 0.92rem; font-weight: 800;
+      color: var(--text); margin: 0;
+    }
+    .shop-balance {
+      display: inline-flex; align-items: center; gap: 6px;
+      padding: 7px 16px; border-radius: 99px;
+      background: rgba(255,209,102,0.1); border: 1.5px solid rgba(255,209,102,0.3);
+      font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 700;
+      color: #FFD166;
+    }
+    .shop-filters {
+      display: flex; gap: 2px; background: rgba(15,23,42,0.06);
+      border-radius: 13px; padding: 3px; margin-bottom: 18px;
+      flex-shrink: 0; width: fit-content;
+    }
+    .shop-filter {
+      padding: 6px 16px; border: none; border-radius: 10px;
+      background: transparent; font-family: 'Manrope', sans-serif;
+      font-size: 0.78rem; font-weight: 600; color: var(--text-3);
+      cursor: pointer; transition: all .2s; white-space: nowrap;
+    }
+    .shop-filter:hover:not(.active) { color: var(--text-2); background: rgba(15,23,42,0.04); }
+    .shop-filter.active {
+      background: #fff; color: var(--text);
+      box-shadow: 0 1px 6px rgba(15,23,42,0.10);
+    }
+    .shop-grid {
+      display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+      gap: 14px; overflow-y: auto; flex: 1; padding-bottom: 12px;
+      align-content: start;
+    }
+    .shop-item {
+      background: #fff; border: 1.5px solid var(--border);
+      border-radius: 16px; padding: 16px 14px; text-align: center;
+      display: flex; flex-direction: column; align-items: center; gap: 6px;
+      transition: all .2s;
+      box-shadow: 0 2px 12px rgba(15,23,42,0.05);
+    }
+    .shop-item:hover { box-shadow: 0 4px 20px rgba(15,23,42,0.08); transform: translateY(-2px); }
+    .shop-item.owned { border-color: rgba(34,197,94,0.4); background: rgba(34,197,94,0.03); }
+    .shop-item.disabled:not(.owned) { opacity: 0.5; }
+    .shop-item-icon { color: var(--violet); margin-bottom: 4px; }
+    .shop-item-name {
+      font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800;
+      color: var(--text); line-height: 1.3;
+    }
+    .shop-item-desc {
+      font-size: 0.7rem; color: var(--text-3); line-height: 1.4;
+    }
+    .shop-item-price {
+      display: inline-flex; align-items: center; gap: 4px;
+      font-family: 'Unbounded', sans-serif; font-size: 0.75rem; font-weight: 700;
+      color: #FFD166; margin-top: 4px;
+    }
+    .shop-buy-btn {
+      padding: 8px 20px; border: none; border-radius: 99px;
+      background: linear-gradient(135deg, #FFD166, #FF9F1C);
+      color: #fff; font-family: 'Manrope', sans-serif;
+      font-size: 0.78rem; font-weight: 700; cursor: pointer;
+      transition: all .2s; margin-top: 4px;
+    }
+    .shop-buy-btn:hover:not(:disabled) { opacity: 0.88; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(255,209,102,0.4); }
+    .shop-buy-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
+    .shop-buy-btn.owned {
+      background: linear-gradient(135deg, #22c55e, #16a34a);
+      cursor: default;
+    }
+    .shop-activate-btn {
+      background: linear-gradient(135deg, #9B5DE5, #7C3AED) !important;
+      cursor: pointer !important;
+    }
+    .shop-active-btn {
+      background: linear-gradient(135deg, #06D6E0, #0891B2) !important;
+      cursor: pointer !important;
+      position: relative;
+    }
+    .shop-active-btn::before {
+      content: ''; display: inline-block; width: 6px; height: 6px;
+      border-radius: 50%; background: #fff; margin-right: 6px;
+      animation: ls-dot-pulse 1.5s infinite;
+    }
+    @keyframes ls-dot-pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
+    .shop-item.active { border-color: rgba(6,214,224,0.4); background: rgba(6,214,224,0.04); }
+    .shop-empty {
+      grid-column: 1 / -1; text-align: center; padding: 40px 20px;
+      font-size: 0.88rem; color: var(--text-3); font-weight: 600;
+    }
+
+    /* ── Mobile responsive ── */
+    @media (max-width: 768px) {
+      .profile-layout { flex-direction: column; overflow: visible; padding: 16px 14px 80px 14px; gap: 16px; }
+      .p-left { width: 100% !important; height: auto; position: static; }
+      .p-left-inner { padding: 24px 18px 20px !important; }
+      .p-stats { grid-template-columns: repeat(3, 1fr); }
+      .p-right { overflow: visible; }
+      .p-info-grid { grid-template-columns: 1fr; }
+    }
+    @media (max-width: 768px) {
+      .shop-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
+      .shop-header { flex-direction: column; gap: 10px; align-items: flex-start; }
+      .shop-filters { flex-wrap: wrap; }
+    }
+    @media (max-width: 480px) {
+      .p-stats { grid-template-columns: 1fr 1fr; }
+      .profile-layout { padding: 12px 12px 80px; }
+      .shop-grid { grid-template-columns: 1fr; }
+    }
+
+    /* ── Parent links ── */
+    .pl-list { display: flex; flex-direction: column; gap: 10px; }
+    .pl-row {
+      display: flex; align-items: center; gap: 12px;
+      padding: 12px 14px; background: rgba(15,23,42,0.02);
+      border: 1.5px solid var(--border); border-radius: 14px;
+      transition: all .2s;
+    }
+    .pl-row:hover { border-color: rgba(155,93,229,0.3); }
+    .pl-row.inactive { opacity: 0.5; }
+    .pl-icon {
+      width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
+      display: flex; align-items: center; justify-content: center;
+      background: linear-gradient(135deg, rgba(155,93,229,0.12), rgba(6,214,224,0.08));
+      color: var(--violet);
+    }
+    .pl-info { flex: 1; min-width: 0; }
+    .pl-label { font-size: 0.85rem; font-weight: 700; color: var(--text); }
+    .pl-meta { font-size: 0.7rem; color: var(--text-3); margin-top: 2px; }
+    .pl-actions { display: flex; gap: 6px; flex-shrink: 0; }
+    .pl-btn {
+      width: 32px; height: 32px; border: 1.5px solid var(--border);
+      border-radius: 9px; background: #fff; cursor: pointer;
+      display: flex; align-items: center; justify-content: center;
+      transition: all .15s; color: var(--text-3);
+    }
+    .pl-btn:hover { border-color: var(--violet); color: var(--violet); }
+    .pl-btn.danger:hover { border-color: #ef4444; color: #ef4444; }
+    .pl-create-row {
+      display: flex; gap: 10px; align-items: center; margin-top: 6px;
+    }
+    .pl-create-row .form-input { flex: 1; margin: 0; }
+    .pl-url-box {
+      margin-top: 12px; padding: 12px 14px;
+      background: rgba(155,93,229,0.06); border: 1.5px dashed rgba(155,93,229,0.3);
+      border-radius: 12px; display: none;
+    }
+    .pl-url-text {
+      font-size: 0.75rem; color: var(--text-2); word-break: break-all;
+      font-family: monospace; line-height: 1.5;
+    }
+    .pl-limit { font-size: 0.72rem; color: var(--text-3); margin-top: 10px; }
+  </style>
+  <script src="https://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+</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="sbl-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="sbl-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>
+      <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="sbl-admin" style="display:none"><i data-lucide="settings" class="sb-icon"></i><span class="sb-lbl">Управление</span></a>
+    </nav>
+    <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>
+          <span class="sb-logout" style="pointer-events:none">Мой профиль</span>
+        </div>
+      </a>
+    </div>
+  </aside>
+
+  <div class="sb-content">
+    <div class="profile-layout">
+
+      <!-- ══ LEFT ══ -->
+      <div class="p-left">
+        <div class="p-left-blob1"></div>
+        <div class="p-left-blob2"></div>
+        <div class="p-left-dots"></div>
+        <div class="p-left-accent"></div>
+
+        <div class="p-left-inner">
+          <!-- Avatar -->
+          <div class="p-avatar-wrap">
+            <div class="p-avatar-ring"><div class="p-avatar-ring-inner"></div></div>
+            <div class="p-avatar" id="big-avatar">LS</div>
+          </div>
+
+          <div class="p-name"  id="profile-name">—</div>
+          <div class="p-email" id="profile-email">—</div>
+          <span class="p-badge"><span class="p-badge-dot"></span><span id="profile-role">—</span></span>
+          <div class="p-since" id="profile-since"></div>
+
+          <div class="p-div"></div>
+
+          <!-- Student stats -->
+          <div class="p-stats" id="p-stats" style="display:none">
+            <div class="p-stat">
+              <div class="p-stat-val" id="ps-count">—</div>
+              <div class="p-stat-lbl">Тестов</div>
+            </div>
+            <div class="p-stat">
+              <div class="p-stat-val grad" id="ps-avg">—</div>
+              <div class="p-stat-lbl">Средний</div>
+            </div>
+            <div class="p-stat">
+              <div class="p-stat-val" id="ps-streak">—</div>
+              <div class="p-stat-lbl">Дней</div>
+            </div>
+          </div>
+
+          <!-- Coins display -->
+          <div id="p-coins-row" style="display:none;margin-top:10px">
+            <div class="p-stat" style="grid-column:span 3;background:rgba(255,209,102,0.1);border-color:rgba(255,209,102,0.25)">
+              <div class="p-stat-val" style="color:#FFD166" id="ps-coins">0</div>
+              <div class="p-stat-lbl" style="color:rgba(255,209,102,0.7)">Монет</div>
+            </div>
+          </div>
+
+          <!-- Teacher stats -->
+          <div class="p-stats" id="t-stats" style="display:none">
+            <div class="p-stat">
+              <div class="p-stat-val" id="ts-classes">—</div>
+              <div class="p-stat-lbl">Классов</div>
+            </div>
+            <div class="p-stat">
+              <div class="p-stat-val grad" id="ts-students">—</div>
+              <div class="p-stat-lbl">Учеников</div>
+            </div>
+            <div class="p-stat">
+              <div class="p-stat-val" id="ts-assigns">—</div>
+              <div class="p-stat-lbl">Заданий</div>
+            </div>
+          </div>
+
+          <div class="p-div"></div>
+
+          <!-- Student: subject bars -->
+          <div class="p-subjects" id="p-subjects" style="display:none"></div>
+          <!-- Teacher: class list -->
+          <div class="p-classes" id="p-classes" style="display:none"></div>
+        </div>
+      </div>
+
+      <!-- ══ RIGHT ══ -->
+      <div class="p-right">
+        <div class="p-page-title">Мой профиль</div>
+
+        <div class="p-tabs">
+          <button class="p-tab active" onclick="switchTab(this,'tab-account')">Аккаунт</button>
+          <button class="p-tab" id="tab-btn-achievements" onclick="switchTab(this,'tab-achievements')">Достижения</button>
+          <button class="p-tab" id="tab-btn-shop"         onclick="switchTab(this,'tab-shop')">Магазин</button>
+          <button class="p-tab"        onclick="switchTab(this,'tab-bookmarks')">Закладки</button>
+          <button class="p-tab"        onclick="switchTab(this,'tab-security')">Безопасность</button>
+        </div>
+
+        <!-- Tab: Аккаунт -->
+        <div class="p-pane active" id="tab-account">
+
+          <!-- Info grid -->
+          <div class="p-card">
+            <div class="p-card-header">
+              <div class="p-card-icon"><i data-lucide="user" style="width:15px;height:15px"></i></div>
+              <div>
+                <div class="p-card-title">Информация</div>
+                <div class="p-card-sub">Ваши данные в системе</div>
+              </div>
+            </div>
+            <div class="p-info-grid">
+              <div class="p-info-item">
+                <div class="p-info-lbl">Имя</div>
+                <div class="p-info-val" id="info-name">—</div>
+              </div>
+              <div class="p-info-item">
+                <div class="p-info-lbl">Роль</div>
+                <div class="p-info-val" id="info-role">—</div>
+              </div>
+              <div class="p-info-item" style="grid-column: span 2">
+                <div class="p-info-lbl">Email</div>
+                <div class="p-info-val" id="info-email" style="font-size:.8rem">—</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Change name -->
+          <div class="p-card">
+            <div class="p-card-header">
+              <div class="p-card-icon"><i data-lucide="pencil" style="width:15px;height:15px"></i></div>
+              <div>
+                <div class="p-card-title">Отображаемое имя</div>
+                <div class="p-card-sub">Изменить имя в профиле</div>
+              </div>
+            </div>
+            <div class="form-group">
+              <label class="form-label">Новое имя</label>
+              <input class="form-input" id="inp-name" type="text" placeholder="Ваше имя" />
+            </div>
+            <div class="form-footer">
+              <button class="btn-save" id="btn-save-name" onclick="saveName()">Сохранить</button>
+              <span class="form-msg" id="msg-name"></span>
+            </div>
+          </div>
+
+          <div class="p-spacer"></div>
+
+          <div class="p-logout-row">
+            <div class="p-logout-info">
+              <div class="p-logout-label">Выход из аккаунта</div>
+              <div class="p-logout-sub">Завершить текущую сессию</div>
+            </div>
+            <button class="btn-logout" onclick="LS.logout()">Выйти</button>
+          </div>
+        </div>
+
+        <!-- Tab: Достижения -->
+        <div class="p-pane" id="tab-achievements">
+          <div class="ach-xp-bar" id="ach-xp-bar" style="display:none">
+            <div class="ach-xp-lvl">
+              <div class="ach-xp-lvl-num" id="ach-lvl">1</div>
+              <div class="ach-xp-lvl-lbl">LVL</div>
+            </div>
+            <div class="ach-xp-info">
+              <div class="ach-xp-top">
+                <div class="ach-xp-rank" id="ach-rank">Новичок</div>
+                <div class="ach-xp-text" id="ach-xp-text">0 XP</div>
+              </div>
+              <div class="ach-xp-progress"><div class="ach-xp-fill" id="ach-xp-fill" style="width:0%"></div></div>
+            </div>
+          </div>
+          <div class="ach-summary" id="ach-summary"></div>
+          <!-- Avatar frames -->
+          <div class="frames-section" id="frames-section" style="display:none">
+            <div style="font-family:'Unbounded',sans-serif;font-size:0.82rem;font-weight:800;color:#0F172A;margin-bottom:10px">Рамки аватара</div>
+            <div class="frames-grid" id="frames-grid"></div>
+          </div>
+          <div class="ach-grid" id="ach-grid"></div>
+        </div>
+
+        <!-- Tab: Магазин -->
+        <div class="p-pane" id="tab-shop">
+          <div class="shop-header">
+            <h3 class="shop-title">Магазин наград</h3>
+            <div class="shop-balance" id="shop-balance">
+              <span id="shop-coins">0</span> монет
+            </div>
+          </div>
+          <div class="shop-filters">
+            <button class="shop-filter active" data-type="all" onclick="shopFilter('all',this)">Все</button>
+            <button class="shop-filter" data-type="frame" onclick="shopFilter('frame',this)">Рамки</button>
+            <button class="shop-filter" data-type="title" onclick="shopFilter('title',this)">Титулы</button>
+            <button class="shop-filter" data-type="effect" onclick="shopFilter('effect',this)">Эффекты</button>
+          </div>
+          <div class="shop-grid" id="shop-grid"></div>
+        </div>
+
+        <!-- Tab: Закладки -->
+        <div class="p-pane" id="tab-bookmarks">
+          <div class="p-card">
+            <div class="p-card-header">
+              <div class="p-card-icon"><i data-lucide="bookmark" style="width:15px;height:15px"></i></div>
+              <div>
+                <div class="p-card-title">Мои закладки</div>
+                <div class="p-card-sub">Сохранённые уроки, курсы и файлы</div>
+              </div>
+            </div>
+            <div class="bm-filters" style="display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap">
+              <button class="bm-filter active" onclick="filterBookmarks(null,this)">Все</button>
+              <button class="bm-filter" onclick="filterBookmarks('lesson',this)">Уроки</button>
+              <button class="bm-filter" onclick="filterBookmarks('course',this)">Курсы</button>
+              <button class="bm-filter" onclick="filterBookmarks('file',this)">Файлы</button>
+            </div>
+            <div id="bookmarks-list"></div>
+          </div>
+        </div>
+
+        <!-- Tab: Доступ для родителей (students only) -->
+        <div class="p-pane" id="tab-parent" style="overflow-y:auto">
+          <div class="p-card">
+            <div class="p-card-header">
+              <div class="p-card-icon"><i data-lucide="users" style="width:15px;height:15px"></i></div>
+              <div>
+                <div class="p-card-title">Доступ для родителей</div>
+                <div class="p-card-sub">Создайте ссылку, чтобы родители видели ваш прогресс</div>
+              </div>
+            </div>
+            <div class="pl-list" id="pl-list"></div>
+            <div class="pl-create-row" id="pl-create-row">
+              <input class="form-input" id="pl-label-input" type="text" placeholder="Имя (Мама, Папа...)" maxlength="50" />
+              <button class="btn-save" onclick="parentCreateLink()">Создать</button>
+            </div>
+            <div class="pl-url-box" id="pl-url-box">
+              <div style="font-size:0.72rem;font-weight:700;color:var(--text);margin-bottom:6px">Ссылка создана! Скопируйте и отправьте родителю:</div>
+              <div class="pl-url-text" id="pl-url-text"></div>
+              <button class="btn-save" style="margin-top:10px;font-size:0.78rem" onclick="parentCopyUrl()">Копировать ссылку</button>
+            </div>
+            <div class="pl-limit" id="pl-limit"></div>
+          </div>
+        </div>
+
+        <!-- Tab: Безопасность -->
+        <div class="p-pane" id="tab-security">
+          <div class="p-card">
+            <div class="p-card-header">
+              <div class="p-card-icon"><i data-lucide="lock" style="width:15px;height:15px"></i></div>
+              <div>
+                <div class="p-card-title">Смена пароля</div>
+                <div class="p-card-sub">Рекомендуем использовать надёжный пароль</div>
+              </div>
+            </div>
+            <div class="form-group">
+              <label class="form-label">Текущий пароль</label>
+              <input class="form-input" id="inp-cur-pwd" type="password" placeholder="Введите текущий пароль" />
+            </div>
+            <div class="form-group">
+              <label class="form-label">Новый пароль</label>
+              <input class="form-input" id="inp-new-pwd" type="password" placeholder="Минимум 6 символов" />
+            </div>
+            <div class="form-group">
+              <label class="form-label">Подтверждение</label>
+              <input class="form-input" id="inp-conf-pwd" type="password" placeholder="Повторите новый пароль" />
+            </div>
+            <div class="form-footer">
+              <button class="btn-save" id="btn-save-pwd" onclick="savePassword()">Сменить пароль</button>
+              <span class="form-msg" id="msg-pwd"></span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</div>
+
+<script src="/js/api.js"></script>
+<script>
+  const { user, isTeacher, isAdmin } = LS.initPage();
+  LS.showBoardIfAllowed();
+  if (isTeacher) {
+    document.getElementById('sbl-classes').style.display = '';
+    if (isAdmin) document.getElementById('sbl-admin').style.display = '';
+  }
+
+
+  const ROLE_LABELS = { student:'Ученик', teacher:'Учитель', admin:'Администратор' };
+  const SUBJ_META   = {
+    bio:  { name:'Биология',   color:'#22c55e' },
+    chem: { name:'Химия',      color:'#f59e0b' },
+    math: { name:'Математика', color:'#3b82f6' },
+    phys: { name:'Физика',     color:'#9B5DE5' },
+  };
+
+  /* ── Tabs ── */
+  function switchTab(btn, id) {
+    document.querySelectorAll('.p-tab').forEach(b => b.classList.remove('active'));
+    document.querySelectorAll('.p-pane').forEach(p => p.classList.remove('active'));
+    btn.classList.add('active');
+    document.getElementById(id).classList.add('active');
+    if (id === 'tab-shop') loadShop();
+    if (id === 'tab-bookmarks') loadBookmarks();
+  }
+
+  /* ── Load profile ── */
+  async function loadProfile() {
+    try {
+      const u = await LS.fetchMe();
+      const initials = (u.name||'LS').split(' ').slice(0,2).map(w=>w[0]?.toUpperCase()||'').join('')||'LS';
+      document.getElementById('big-avatar').textContent   = initials;
+      document.getElementById('profile-name').textContent = u.name||'—';
+      document.getElementById('profile-email').textContent= u.email||'—';
+      document.getElementById('profile-role').textContent = ROLE_LABELS[u.role]||u.role;
+      document.getElementById('inp-name').value           = u.name||'';
+      // Info grid
+      document.getElementById('info-name').textContent  = u.name||'—';
+      document.getElementById('info-email').textContent = u.email||'—';
+      document.getElementById('info-role').textContent  = ROLE_LABELS[u.role]||u.role;
+
+      if (u.created_at) {
+        const d = parseDate(u.created_at);
+        document.getElementById('profile-since').textContent =
+          'В системе с ' + d.toLocaleDateString('ru', { day:'numeric', month:'short', year:'numeric' });
+      }
+      if (u.role === 'student') {
+        loadStudentStats();
+        loadCoinsDisplay();
+      } else loadTeacherStats();
+    } catch {}
+  }
+
+  /* ── Student ── */
+  async function loadStudentStats() {
+    try {
+      const data = await LS.getHistory(1, 100);
+      const rows = data.rows || [];
+      const done = rows.filter(r => r.score !== null && r.total > 0);
+      const avg  = done.length ? Math.round(done.reduce((s,r) => s + r.score/r.total*100, 0) / done.length) : 0;
+
+      const dayKeys = new Set(rows.map(r => {
+        const d = parseDate(r.started_at); d.setHours(0,0,0,0);
+        return d.toISOString().slice(0,10);
+      }));
+      let streak = 0;
+      const now = new Date();
+      for (let i = 0; i <= 60; i++) {
+        const d = new Date(now); d.setDate(d.getDate() - i);
+        if (dayKeys.has(d.toISOString().slice(0,10))) streak++;
+        else if (i > 0) break;
+      }
+
+      document.getElementById('ps-count').textContent  = data.total || 0;
+      document.getElementById('ps-avg').textContent    = avg + '%';
+      document.getElementById('ps-streak').textContent = streak;
+      document.getElementById('p-stats').style.display = '';
+
+      const bySubj = {};
+      done.forEach(r => {
+        if (!r.subject_slug) return;
+        if (!bySubj[r.subject_slug]) bySubj[r.subject_slug] = { sum:0, cnt:0 };
+        bySubj[r.subject_slug].sum += Math.round(r.score/r.total*100);
+        bySubj[r.subject_slug].cnt++;
+      });
+      const entries = Object.entries(bySubj);
+      if (entries.length) {
+        const max = Math.max(...entries.map(([,v]) => Math.round(v.sum/v.cnt)), 1);
+        document.getElementById('p-subjects').style.display = '';
+        document.getElementById('p-subjects').innerHTML = entries.map(([sl, v]) => {
+          const pct = Math.round(v.sum/v.cnt);
+          const m   = SUBJ_META[sl] || { name:sl, color:'#9B5DE5' };
+          return `<div class="p-subj-row">
+            <div class="p-subj-top">
+              <div class="p-subj-name">${m.name}</div>
+              <div class="p-subj-pct">${pct}%</div>
+            </div>
+            <div class="p-subj-bar"><div class="p-subj-fill" style="width:${Math.round(pct/max*100)}%;background:${m.color}"></div></div>
+          </div>`;
+        }).join('');
+      }
+    } catch {}
+  }
+
+  /* ── Teacher ── */
+  async function loadTeacherStats() {
+    try {
+      const classes = await LS.getClasses();
+      const totalS  = classes.reduce((s,c) => s + (c.member_count||0), 0);
+      const totalA  = classes.reduce((s,c) => s + (c.assignment_count||0), 0);
+      document.getElementById('ts-classes').textContent  = classes.length;
+      document.getElementById('ts-students').textContent = totalS;
+      document.getElementById('ts-assigns').textContent  = totalA;
+      document.getElementById('t-stats').style.display   = '';
+      if (classes.length) {
+        document.getElementById('p-classes').style.display = '';
+        document.getElementById('p-classes').innerHTML = classes.map(c => `
+          <div class="p-class-row">
+            <div class="p-class-name">${esc(c.name)}</div>
+            <div class="p-class-meta">${c.member_count} учеников · ${c.assignment_count} заданий</div>
+          </div>`).join('');
+      }
+    } catch {}
+  }
+
+  /* ── Coins in sidebar ── */
+  async function loadCoinsDisplay() {
+    try {
+      const data = await LS.getCoins();
+      const coins = data.coins || 0;
+      document.getElementById('ps-coins').textContent = coins;
+      document.getElementById('p-coins-row').style.display = '';
+    } catch {}
+  }
+
+  /* ── Save name ── */
+  async function saveName() {
+    const name = document.getElementById('inp-name').value.trim();
+    const btn  = document.getElementById('btn-save-name');
+    const msg  = document.getElementById('msg-name');
+    if (!name) { showMsg(msg,'Введите имя','err'); return; }
+    btn.disabled = true;
+    try {
+      await LS.updateProfile({ name });
+      showMsg(msg,'Сохранено <svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>','ok');
+      document.getElementById('profile-name').textContent = name;
+      document.getElementById('info-name').textContent    = name;
+      document.getElementById('nav-user').textContent     = name;
+      const ini = name.split(' ').slice(0,2).map(w=>w[0]?.toUpperCase()||'').join('')||'LS';
+      document.getElementById('big-avatar').textContent = ini;
+      document.getElementById('nav-avatar').textContent  = ini;
+    } catch(e) { showMsg(msg, e.message||'Ошибка','err'); }
+    finally { btn.disabled = false; }
+  }
+
+  /* ── Save password ── */
+  async function savePassword() {
+    const cur  = document.getElementById('inp-cur-pwd').value;
+    const nw   = document.getElementById('inp-new-pwd').value;
+    const conf = document.getElementById('inp-conf-pwd').value;
+    const btn  = document.getElementById('btn-save-pwd');
+    const msg  = document.getElementById('msg-pwd');
+    if (!cur||!nw)   { showMsg(msg,'Заполните все поля','err'); return; }
+    if (nw!==conf)   { showMsg(msg,'Пароли не совпадают','err'); return; }
+    if (nw.length<6) { showMsg(msg,'Минимум 6 символов','err'); return; }
+    btn.disabled = true;
+    try {
+      await LS.updateProfile({ currentPassword:cur, newPassword:nw });
+      showMsg(msg,'Пароль изменён <svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>','ok');
+      ['inp-cur-pwd','inp-new-pwd','inp-conf-pwd'].forEach(id => document.getElementById(id).value='');
+    } catch(e) { showMsg(msg, e.message||'Ошибка','err'); }
+    finally { btn.disabled = false; }
+  }
+
+  function showMsg(el, text, type) {
+    el.innerHTML = text; el.className = 'form-msg ' + type;
+    setTimeout(() => { if (el.innerHTML===text) { el.innerHTML=''; el.className='form-msg'; } }, 3500);
+  }
+
+  /* ── Shop ── */
+  let _shopItems = [];
+  let _shopCoins = 0;
+  let _shopLoaded = false;
+  let _activeCosmetics = {}; // {frame, title, theme, effect} from server
+
+  async function loadShop() {
+    if (_shopLoaded) return;
+    try {
+      const [data, active] = await Promise.all([
+        LS.getShopItems(),
+        LS.getMyActiveCosmetics().catch(() => ({}))
+      ]);
+      _shopItems = data.items || [];
+      _shopCoins = data.coins || 0;
+      _activeCosmetics = active || {};
+      document.getElementById('shop-coins').textContent = _shopCoins;
+      renderShopGrid('all');
+      _shopLoaded = true;
+    } catch (e) {
+      document.getElementById('shop-grid').innerHTML = '<div class="shop-empty">Не удалось загрузить магазин</div>';
+    }
+  }
+
+  function shopFilter(type, el) {
+    document.querySelectorAll('.shop-filter').forEach(b => b.classList.remove('active'));
+    el.classList.add('active');
+    renderShopGrid(type);
+  }
+
+  function _isItemActive(item) {
+    if (item.type === 'title'  && _activeCosmetics.title)  return true;
+    if (item.type === 'effect' && _activeCosmetics.effect) return true;
+    if (item.type === 'frame'  && _activeCosmetics.frame)  return true;
+    // Check by item id stored in active_* columns
+    try {
+      if (item.type === 'title')  return _activeCosmetics.title  && JSON.stringify(_activeCosmetics.title)  === item.data;
+      if (item.type === 'effect') return _activeCosmetics.effect && JSON.stringify(_activeCosmetics.effect) === item.data;
+    } catch {}
+    return false;
+  }
+
+  function renderShopGrid(filter) {
+    const items = filter === 'all' ? _shopItems : _shopItems.filter(i => i.type === filter);
+    const grid = document.getElementById('shop-grid');
+    if (!items.length) {
+      grid.innerHTML = '<div class="shop-empty">Нет товаров в этой категории</div>';
+      return;
+    }
+    grid.innerHTML = items.map(item => {
+      const owned = !!item.owned;
+      const canBuy = _shopCoins >= item.price && !owned;
+      const active = owned && _isItemActive(item);
+      let btn = '';
+      if (owned && active) {
+        btn = `<button class="shop-buy-btn shop-active-btn" onclick="deactivateItem('${item.type}')">Активно</button>`;
+      } else if (owned) {
+        btn = `<button class="shop-buy-btn shop-activate-btn" onclick="activateItem(${item.id},'${item.type}')">Применить</button>`;
+      } else {
+        btn = `<button class="shop-buy-btn ${canBuy ? '' : 'disabled'}" onclick="buyItem(${item.id})" ${canBuy ? '' : 'disabled'}>Купить</button>`;
+      }
+      return `<div class="shop-item ${owned ? 'owned' : ''} ${active ? 'active' : ''} ${!canBuy && !owned ? 'disabled' : ''}">
+        <div class="shop-item-icon">${LS.icon(item.icon || 'star', 28)}</div>
+        <div class="shop-item-name">${esc(item.name)}</div>
+        <div class="shop-item-desc">${esc(item.description || '')}</div>
+        <div class="shop-item-price">${LS.icon('coins', 14)} ${item.price}</div>
+        ${btn}
+      </div>`;
+    }).join('');
+  }
+
+  async function buyItem(id) {
+    if (!await LS.confirm('Купить этот предмет?', { title: 'Покупка', confirmText: 'Купить', danger: false })) return;
+    try {
+      const res = await LS.purchaseItem(id);
+      _shopCoins = res.coins;
+      document.getElementById('shop-coins').textContent = _shopCoins;
+      const psCoins = document.getElementById('ps-coins');
+      if (psCoins) psCoins.textContent = _shopCoins;
+      const item = _shopItems.find(i => i.id === id);
+      if (item) item.owned = 1;
+      _reRenderShop();
+      LS.toast('Покупка успешна!', 'success');
+    } catch (e) {
+      LS.toast(e.message || 'Ошибка покупки', 'error');
+    }
+  }
+
+  async function activateItem(id, type) {
+    try {
+      const res = await LS.activateShopItem(id, type);
+      if (res.data) _activeCosmetics[type] = res.data;
+      _reRenderShop();
+      LS.toast('Применено!', 'success');
+      LS.applyCosmetics(); // re-apply visuals live
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+
+  async function deactivateItem(type) {
+    try {
+      await LS.activateShopItem(null, type);
+      _activeCosmetics[type] = null;
+      _reRenderShop();
+      LS.toast('Снято', 'info');
+      location.reload(); // clean up effects
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+
+  function _reRenderShop() {
+    const activeFilter = document.querySelector('.shop-filter.active');
+    renderShopGrid(activeFilter ? (activeFilter.dataset.type || 'all') : 'all');
+  }
+
+  /* ── Achievements ── */
+  async function loadAchievements() {
+    try {
+      const [achs, gam] = await Promise.all([LS.getGamAchievements(), LS.getGamificationMe()]);
+      // XP bar
+      if (gam) {
+        document.getElementById('ach-xp-bar').style.display = '';
+        document.getElementById('ach-lvl').textContent = gam.level || 1;
+        document.getElementById('ach-rank').textContent = gam.rank || 'Новичок';
+        const xp = gam.xp || 0, min = gam.levelMin || 0, max = gam.levelMax || 100;
+        const pct = max > min ? Math.round((xp - min) / (max - min) * 100) : 0;
+        document.getElementById('ach-xp-text').textContent = `${xp} XP`;
+        document.getElementById('ach-xp-fill').style.width = Math.min(100, pct) + '%';
+      }
+      // Summary chips
+      const unlocked = achs.filter(a => a.unlocked).length;
+      const total = achs.length;
+      document.getElementById('ach-summary').innerHTML =
+        `<div class="ach-sum-chip">${unlocked} / ${total} получено</div>` +
+        (gam?.streak ? `<div class="ach-sum-chip">${lsIcon('flame', 14)} ${gam.streak} дн. стрик</div>` : '');
+      // Grid
+      document.getElementById('ach-grid').innerHTML = achs.map(a => {
+        const cls = a.unlocked ? 'unlocked' : 'locked';
+        const dateStr = a.unlocked_at
+          ? `<div class="ach-date">${parseDate(a.unlocked_at).toLocaleDateString('ru', { day:'numeric', month:'short' })}</div>`
+          : '';
+        return `<div class="ach-item ${cls}" data-cat="${a.category || 'start'}">
+          <div class="ach-icon">${(lsIcon(a.icon || 'star', 22) || lsIcon('star', 22)).replace('fill="none"','fill="currentColor"').replace('stroke-width="2"','stroke-width="0"')}</div>
+          <div class="ach-body">
+            <div class="ach-title">${esc(a.title)}</div>
+            <div class="ach-desc">${esc(a.description)}</div>
+            ${dateStr}
+          </div>
+        </div>`;
+      }).join('');
+    } catch {}
+  }
+
+  /* ── Avatar Frames ── */
+  async function loadFrames() {
+    try {
+      const data = await LS.getFrames();
+      if (!data || !data.frames) return;
+      const grid = document.getElementById('frames-grid');
+      grid.innerHTML = data.frames.map(f => {
+        const cls = f.selected ? 'selected' : (!f.unlocked ? 'locked' : '');
+        const style = f.css ? `style="${f.css}"` : '';
+        return `<div class="frame-item ${cls}" onclick="selectFrame('${f.id}',${f.unlocked},this)" title="${f.name}${f.unlock ? ' ('+f.unlock+')' : ''}">
+          <div class="frame-preview" ${style}>LS</div>
+          <div class="frame-name">${esc(f.name)}</div>
+          ${!f.unlocked ? '<div class="frame-unlock-hint">' + lsIcon('lock', 12) + '</div>' : ''}
+        </div>`;
+      }).join('');
+      document.getElementById('frames-section').style.display = '';
+    } catch {}
+  }
+  async function selectFrame(id, unlocked, el) {
+    if (!unlocked) { LS.toast('Рамка ещё не разблокирована', 'warn'); return; }
+    try {
+      await LS.setFrame(id);
+      document.querySelectorAll('.frame-item').forEach(f => f.classList.remove('selected'));
+      el.classList.add('selected');
+      LS.toast('Рамка установлена!', 'success', 2000);
+    } catch (e) { LS.toast(e.message, 'error'); }
+  }
+
+  /* ── bookmarks ── */
+  let _allBookmarks = [];
+  let _bmFilter = null;
+
+  async function loadBookmarks() {
+    const list = document.getElementById('bookmarks-list');
+    if (!list) return;
+    list.innerHTML = LS.skeleton(3, 'row');
+    try {
+      _allBookmarks = await LS.getBookmarks();
+      renderBookmarks();
+    } catch {
+      list.innerHTML = '<div style="color:#8898AA;font-size:.85rem;padding:12px">Не удалось загрузить закладки</div>';
+    }
+  }
+
+  function filterBookmarks(type, btn) {
+    _bmFilter = type;
+    document.querySelectorAll('.bm-filter').forEach(b => b.classList.remove('active'));
+    if (btn) btn.classList.add('active');
+    renderBookmarks();
+  }
+
+  function renderBookmarks() {
+    const list = document.getElementById('bookmarks-list');
+    const filtered = _bmFilter ? _allBookmarks.filter(b => b.entity_type === _bmFilter) : _allBookmarks;
+    if (!filtered.length) {
+      list.innerHTML = '<div style="text-align:center;padding:32px 0;color:#8898AA;font-size:.85rem">Закладок пока нет</div>';
+      return;
+    }
+    const ICONS = { lesson: 'book-open', course: 'graduation-cap', file: 'file-text', question: 'help-circle' };
+    const LABELS = { lesson: 'Урок', course: 'Курс', file: 'Файл', question: 'Вопрос' };
+    list.innerHTML = filtered.map(b => {
+      const iconName = ICONS[b.entity_type] || 'bookmark';
+      const sub = b.entity_type === 'lesson' && b.courseTitle ? b.courseTitle : LABELS[b.entity_type] || '';
+      const href = b.entity_type === 'lesson' ? `/lesson?id=${b.entity_id}`
+                 : b.entity_type === 'course' ? `/course?id=${b.entity_id}`
+                 : b.entity_type === 'file'   ? `/library`
+                 : '#';
+      return `<div class="bm-item" onclick="location.href='${href}'">
+        <div class="bm-item-icon bm-item-icon-${b.entity_type}">
+          <i data-lucide="${iconName}" style="width:16px;height:16px"></i>
+        </div>
+        <div class="bm-item-body">
+          <div class="bm-item-title">${esc(b.title)}</div>
+          <div class="bm-item-sub">${esc(sub)}</div>
+        </div>
+        <button class="bm-item-del" onclick="event.stopPropagation();removeBookmark(${b.id})" title="Убрать">
+          <i data-lucide="x" style="width:14px;height:14px"></i>
+        </button>
+      </div>`;
+    }).join('');
+    lucide.createIcons();
+  }
+
+  async function removeBookmark(id) {
+    try {
+      await LS.removeBookmark(id);
+      _allBookmarks = _allBookmarks.filter(b => b.id !== id);
+      renderBookmarks();
+      LS.toast('Убрано из закладок', 'info');
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+
+  /* ── Parent links (student only) ── */
+  if (user?.role === 'student' || user?.role === 'free_student') {
+    // Insert tab button before "Безопасность"
+    const secBtn = document.querySelector('.p-tabs').lastElementChild;
+    const parentBtn = document.createElement('button');
+    parentBtn.className = 'p-tab';
+    parentBtn.textContent = 'Родители';
+    parentBtn.onclick = function() { switchTab(this, 'tab-parent'); loadParentLinks(); };
+    secBtn.parentNode.insertBefore(parentBtn, secBtn);
+  }
+
+  let _parentLinksLoaded = false;
+  let _parentLinksData = null;
+  async function loadParentLinks() {
+    if (_parentLinksLoaded) return;
+    _parentLinksLoaded = true;
+    const list = document.getElementById('pl-list');
+    list.innerHTML = LS.skeleton(2, 'row');
+    try {
+      const links = await LS.parentGetLinks();
+      _parentLinksData = links;
+      renderParentLinks(links);
+    } catch (e) {
+      list.innerHTML = '<div style="color:#8898AA;font-size:.85rem;padding:12px">Не удалось загрузить</div>';
+    }
+  }
+
+  function renderParentLinks(links) {
+    const list = document.getElementById('pl-list');
+    if (!links.length) {
+      list.innerHTML = '<div style="text-align:center;padding:24px 0;color:var(--text-3);font-size:.85rem">Ссылок пока нет. Создайте первую!</div>';
+    } else {
+      list.innerHTML = links.map(l => {
+        const active = l.is_active ? '' : ' inactive';
+        const lastUsed = l.last_used ? 'Посещено ' + LS.fmtRelTime(l.last_used) : 'Ещё не посещали';
+        const toggleIcon = l.is_active ? 'toggle-right' : 'toggle-left';
+        const toggleColor = l.is_active ? 'color:#22c55e' : '';
+        const linkUrl = `${location.origin}/parent?t=${l.token}`;
+        return `<div class="pl-row${active}" data-id="${l.id}" data-url="${esc(linkUrl)}">
+          <div class="pl-icon"><i data-lucide="user-check" style="width:16px;height:16px"></i></div>
+          <div class="pl-info">
+            <div class="pl-label">${esc(l.label || 'Родитель')}</div>
+            <div class="pl-meta">${lastUsed}</div>
+          </div>
+          <div class="pl-actions">
+            <button class="pl-btn" title="Копировать ссылку" onclick="parentCopyLink(this)">
+              <i data-lucide="copy" style="width:14px;height:14px"></i>
+            </button>
+            <button class="pl-btn" title="${l.is_active ? 'Отключить' : 'Включить'}" onclick="parentToggle(${l.id},${l.is_active?0:1})">
+              <i data-lucide="${toggleIcon}" style="width:16px;height:16px;${toggleColor}"></i>
+            </button>
+            <button class="pl-btn danger" title="Удалить" onclick="parentDelete(${l.id})">
+              <i data-lucide="trash-2" style="width:14px;height:14px"></i>
+            </button>
+          </div>
+        </div>`;
+      }).join('');
+    }
+    const cnt = links.length;
+    document.getElementById('pl-limit').textContent = `${cnt} из 3 ссылок`;
+    document.getElementById('pl-create-row').style.display = cnt >= 3 ? 'none' : '';
+    lucide.createIcons();
+  }
+
+  async function parentCreateLink() {
+    const inp = document.getElementById('pl-label-input');
+    const label = inp.value.trim() || 'Родитель';
+    try {
+      const r = await LS.parentCreateLink(label);
+      inp.value = '';
+      // Build URL on client side (more reliable than server-side req.protocol)
+      const url = r.url || `${location.origin}/parent?t=${r.token}`;
+      // Show URL
+      const box = document.getElementById('pl-url-box');
+      document.getElementById('pl-url-text').textContent = url;
+      box.style.display = '';
+      box.dataset.url = url;
+      _parentLinksLoaded = false;
+      loadParentLinks();
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+
+  function parentCopyUrl() {
+    const url = document.getElementById('pl-url-box').dataset.url;
+    navigator.clipboard.writeText(url).then(() => LS.toast('Скопировано!', 'success', 1500));
+  }
+
+  function parentCopyLink(btn) {
+    const row = btn.closest('.pl-row');
+    const url = row?.dataset?.url;
+    if (!url) { LS.toast('Ссылка не найдена', 'error'); return; }
+    navigator.clipboard.writeText(url).then(() => LS.toast('Ссылка скопирована!', 'success', 1500));
+  }
+
+  async function parentToggle(id, newActive) {
+    try {
+      await LS.parentUpdateLink(id, { is_active: !!newActive });
+      _parentLinksLoaded = false;
+      loadParentLinks();
+      LS.toast(newActive ? 'Ссылка включена' : 'Ссылка отключена', 'info', 1500);
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+
+  async function parentDelete(id) {
+    if (!await LS.confirm('Удалить ссылку? Родитель потеряет доступ.')) return;
+    try {
+      await LS.parentDeleteLink(id);
+      _parentLinksLoaded = false;
+      loadParentLinks();
+      document.getElementById('pl-url-box').style.display = 'none';
+      LS.toast('Ссылка удалена', 'info', 1500);
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+
+  loadAchievements();
+  loadFrames();
+  loadBookmarks();
+
+  loadProfile();
+  if (window.lucide) lucide.createIcons();
+</script>
+<script src="/js/search.js"></script>
+<script src="/js/mobile.js"></script>
+</body>
+</html>
diff --git a/frontend/question-bank.html b/frontend/question-bank.html
new file mode 100644
index 0000000..9c4e69c
--- /dev/null
+++ b/frontend/question-bank.html
@@ -0,0 +1,633 @@
+<!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://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+  <style>
+    .sb-content { background: #f4f5f8; overflow: hidden; display: flex; flex-direction: column; }
+
+    /* ── page header ── */
+    .qb-header {
+      background: linear-gradient(140deg, #0a0220 0%, #1a0a3c 60%, #080818 100%);
+      padding: 24px 28px 20px; position: relative; overflow: hidden; flex-shrink: 0;
+    }
+    .qb-header-dots {
+      position: absolute; inset: 0;
+      background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
+      background-size: 22px 22px; pointer-events: none;
+    }
+    .qb-header-inner { position: relative; z-index: 1; }
+    .qb-title-row { display: flex; align-items: center; gap: 12px; }
+    .qb-title {
+      font-family: 'Unbounded', sans-serif; font-size: 1.2rem; font-weight: 800;
+      color: #fff; display: flex; align-items: center; gap: 10px;
+    }
+    .qb-count-chip {
+      padding: 4px 12px; background: rgba(255,255,255,0.1); border-radius: 999px;
+      font-size: 0.74rem; font-weight: 700; color: rgba(255,255,255,0.7);
+      font-family: 'Unbounded', sans-serif;
+    }
+
+    /* ── layout ── */
+    .qb-body {
+      flex: 1; display: flex; overflow: hidden; min-height: 0;
+    }
+
+    /* ── filters sidebar ── */
+    .qb-filters {
+      width: 280px; flex-shrink: 0;
+      background: #fff; border-right: 1.5px solid rgba(15,23,42,0.08);
+      overflow-y: auto; padding: 20px 16px;
+      display: flex; flex-direction: column; gap: 20px;
+    }
+    .filter-section { display: flex; flex-direction: column; gap: 8px; }
+    .filter-label {
+      font-size: 0.7rem; font-weight: 700; color: #8898AA;
+      text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px;
+    }
+    .filter-search {
+      width: 100%; padding: 9px 12px; border: 1.5px solid rgba(15,23,42,0.12);
+      border-radius: 10px; font-family: 'Manrope', sans-serif; font-size: 0.84rem;
+      font-weight: 500; color: #0F172A; background: #f8f9fc; transition: border-color 0.15s;
+      outline: none;
+    }
+    .filter-search:focus { border-color: var(--violet); background: #fff; }
+    .filter-select {
+      width: 100%; padding: 9px 12px; border: 1.5px solid rgba(15,23,42,0.12);
+      border-radius: 10px; font-family: 'Manrope', sans-serif; font-size: 0.84rem;
+      font-weight: 500; color: #0F172A; background: #f8f9fc; cursor: pointer;
+      outline: none; 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.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+      background-repeat: no-repeat; background-position: right 12px center;
+      padding-right: 32px;
+    }
+    .filter-select:focus { border-color: var(--violet); }
+    .filter-checkboxes { display: flex; flex-direction: column; gap: 6px; }
+    .filter-cb-row {
+      display: flex; align-items: center; gap: 8px;
+      padding: 6px 10px; border-radius: 8px; cursor: pointer;
+      transition: background 0.12s;
+    }
+    .filter-cb-row:hover { background: rgba(155,93,229,0.05); }
+    .filter-cb-row input[type="checkbox"] { accent-color: var(--violet); width: 14px; height: 14px; cursor: pointer; }
+    .filter-cb-label { font-size: 0.82rem; font-weight: 600; color: #3D4F6B; cursor: pointer; user-select: none; }
+    .filter-cb-badge {
+      margin-left: auto; padding: 1px 7px; border-radius: 999px;
+      font-size: 0.65rem; font-weight: 700;
+    }
+    .btn-reset {
+      width: 100%; padding: 9px; border: 1.5px solid rgba(155,93,229,0.2);
+      border-radius: 10px; background: rgba(155,93,229,0.05); color: var(--violet);
+      font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 700;
+      cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: center; gap: 6px;
+    }
+    .btn-reset:hover { background: rgba(155,93,229,0.12); border-color: var(--violet); }
+
+    /* ── main area ── */
+    .qb-main { flex: 1; overflow-y: auto; padding: 20px 24px 60px; min-width: 0; }
+
+    /* ── result header ── */
+    .qb-result-header {
+      display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
+    }
+    .qb-found {
+      font-family: 'Unbounded', sans-serif; font-size: 0.8rem; font-weight: 800; color: #0F172A; flex: 1;
+    }
+    .qb-found span { color: var(--violet); }
+
+    /* ── card grid ── */
+    .qb-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 14px; margin-bottom: 24px;
+    }
+    @media (max-width: 1100px) { .qb-grid { grid-template-columns: repeat(2, 1fr); } }
+    @media (max-width: 700px)  { .qb-grid { grid-template-columns: 1fr; } }
+
+    .qc {
+      background: #fff; border: 1.5px solid rgba(15,23,42,0.07);
+      border-radius: 16px; padding: 16px 18px;
+      box-shadow: 0 2px 8px rgba(15,23,42,0.04);
+      cursor: pointer; transition: all 0.18s; display: flex; flex-direction: column; gap: 10px;
+    }
+    .qc:hover { border-color: rgba(155,93,229,0.3); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(155,93,229,0.08); }
+    .qc.expanded { border-color: var(--violet); box-shadow: 0 6px 24px rgba(155,93,229,0.12); }
+    .qc-top { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
+    .qc-text {
+      font-size: 0.84rem; font-weight: 600; color: #0F172A; line-height: 1.5;
+      display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
+    }
+    .qc-footer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+    .qc-topic {
+      font-size: 0.7rem; font-weight: 700; color: #8898AA;
+      display: flex; align-items: center; gap: 4px;
+    }
+    .qc-opts-count {
+      margin-left: auto; font-size: 0.7rem; color: #8898AA; font-weight: 600;
+      display: flex; align-items: center; gap: 3px;
+    }
+
+    /* badges */
+    .badge {
+      display: inline-flex; align-items: center;
+      padding: 3px 9px; border-radius: 999px;
+      font-size: 0.68rem; font-weight: 700; white-space: nowrap;
+    }
+    .badge-diff-1 { background: rgba(6,214,160,0.12); color: #059652; }
+    .badge-diff-2 { background: rgba(255,179,71,0.15); color: #B8860B; }
+    .badge-diff-3 { background: rgba(239,71,111,0.12); color: #EF476F; }
+    .badge-type   { background: rgba(6,214,224,0.12); color: #0891B2; }
+
+    /* ── expanded preview ── */
+    .qc-preview {
+      margin-top: 4px; border-top: 1.5px solid rgba(15,23,42,0.07);
+      padding-top: 14px; display: flex; flex-direction: column; gap: 8px;
+    }
+    .qc-preview-text { font-size: 0.84rem; font-weight: 600; color: #0F172A; line-height: 1.55; }
+    .qc-options { display: flex; flex-direction: column; gap: 6px; }
+    .qc-option {
+      display: flex; align-items: center; gap: 8px;
+      padding: 7px 10px; border-radius: 8px;
+      border: 1.5px solid rgba(15,23,42,0.07); font-size: 0.8rem; font-weight: 500;
+    }
+    .qc-option.correct {
+      border-color: rgba(6,214,160,0.4); background: rgba(6,214,160,0.06);
+      color: #059652; font-weight: 700;
+    }
+    .qc-option-marker {
+      width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(15,23,42,0.15);
+      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
+      font-size: 0.6rem; font-weight: 800;
+    }
+    .qc-option.correct .qc-option-marker {
+      background: #06D6A0; border-color: #06D6A0; color: #fff;
+    }
+    .qc-explanation {
+      font-size: 0.78rem; color: #8898AA; font-style: italic; line-height: 1.5;
+      background: rgba(155,93,229,0.04); border-left: 3px solid rgba(155,93,229,0.3);
+      padding: 8px 12px; border-radius: 0 8px 8px 0;
+    }
+
+    /* ── pagination ── */
+    .qb-pagination {
+      display: flex; align-items: center; gap: 10px; justify-content: center;
+    }
+    .pag-btn {
+      padding: 8px 18px; border-radius: 999px;
+      border: 1.5px solid rgba(15,23,42,0.12); background: #fff;
+      font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 700;
+      color: #3D4F6B; cursor: pointer; transition: all 0.15s;
+      display: flex; align-items: center; gap: 6px;
+    }
+    .pag-btn:hover:not(:disabled) { border-color: var(--violet); color: var(--violet); }
+    .pag-btn:disabled { opacity: 0.4; cursor: default; }
+    .pag-info { font-size: 0.82rem; font-weight: 600; color: #8898AA; }
+
+    /* ── empty state ── */
+    .qb-empty {
+      text-align: center; padding: 80px 20px; color: #8898AA; font-size: 0.9rem;
+    }
+    .qb-empty-icon { margin-bottom: 14px; opacity: 0.25; }
+
+    /* ── nav ── */
+    .nav-active {
+      background: rgba(155,93,229,0.08) !important;
+      border-color: var(--violet) !important;
+      color: var(--violet) !important;
+      cursor: default; pointer-events: none;
+    }
+    .notif-drop-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid var(--border); }
+    .notif-drop-title { font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800; }
+    .notif-read-all { background: none; border: none; font-size: 0.74rem; color: var(--violet); cursor: pointer; font-family: 'Manrope', sans-serif; font-weight: 600; }
+    .notif-item { display: flex; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background var(--tr); text-decoration: none; color: inherit; }
+    .notif-item:last-child { border-bottom: none; }
+    .notif-item:hover { background: rgba(155,93,229,0.04); }
+    .notif-item.unread { background: rgba(155,93,229,0.05); }
+    .notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); flex-shrink: 0; margin-top: 5px; }
+    .notif-dot.read { background: transparent; border: 1.5px solid var(--border-h); }
+    .notif-msg { font-size: 0.80rem; line-height: 1.45; flex: 1; }
+    .notif-time { font-size: 0.70rem; color: var(--text-3); margin-top: 2px; }
+    .notif-empty { padding: 28px 16px; text-align: center; color: var(--text-3); font-size: 0.84rem; }
+
+    @media (max-width: 768px) {
+      .qb-filters { display: none; }
+      .qb-main { padding: 14px 12px 60px; }
+    }
+  </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" onclick="toggleSidebar()" 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"><i data-lucide="layout-dashboard" class="sb-icon"></i><span class="sb-lbl">Доска</span></a>
+      <a href="/classes"       class="sb-link"><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>
+      <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>
+      <a href="/live-quiz"     class="sb-link"><i data-lucide="radio"            class="sb-icon"></i><span class="sb-lbl">Live-квиз</span></a>
+      <a href="/gradebook"     class="sb-link"><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="toggleNotifDrop()">
+          <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>
+    </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>
+          <span class="sb-logout" style="pointer-events:none">Мой профиль</span>
+        </div>
+      </a>
+    </div>
+  </aside>
+  <div class="notif-drop" id="notif-drop"></div>
+  <div class="sb-content">
+
+    <!-- Header -->
+    <div class="qb-header">
+      <div class="qb-header-dots"></div>
+      <div class="qb-header-inner">
+        <div class="qb-title-row">
+          <div class="qb-title"><i data-lucide="database" style="width:22px;height:22px;opacity:0.5"></i> Банк вопросов</div>
+          <div class="qb-count-chip" id="hdr-count">0</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Body: filters + main -->
+    <div class="qb-body">
+
+      <!-- Filters -->
+      <div class="qb-filters">
+        <div class="filter-section">
+          <div class="filter-label">Поиск</div>
+          <input class="filter-search" id="f-search" type="text" placeholder="Текст вопроса…" />
+        </div>
+
+        <div class="filter-section">
+          <div class="filter-label">Предмет</div>
+          <select class="filter-select" id="f-subject">
+            <option value="">Все предметы</option>
+            <option value="bio">Биология</option>
+            <option value="chem">Химия</option>
+            <option value="math">Математика</option>
+            <option value="phys">Физика</option>
+            <option value="other">Другое</option>
+          </select>
+        </div>
+
+        <div class="filter-section">
+          <div class="filter-label">Тема</div>
+          <select class="filter-select" id="f-topic">
+            <option value="">Все темы</option>
+          </select>
+        </div>
+
+        <div class="filter-section">
+          <div class="filter-label">Сложность</div>
+          <div class="filter-checkboxes">
+            <label class="filter-cb-row">
+              <input type="checkbox" id="diff-1" value="1" onchange="onFilterChange()" />
+              <span class="filter-cb-label">Лёгкий</span>
+              <span class="filter-cb-badge badge badge-diff-1">1</span>
+            </label>
+            <label class="filter-cb-row">
+              <input type="checkbox" id="diff-2" value="2" onchange="onFilterChange()" />
+              <span class="filter-cb-label">Средний</span>
+              <span class="filter-cb-badge badge badge-diff-2">2</span>
+            </label>
+            <label class="filter-cb-row">
+              <input type="checkbox" id="diff-3" value="3" onchange="onFilterChange()" />
+              <span class="filter-cb-label">Сложный</span>
+              <span class="filter-cb-badge badge badge-diff-3">3</span>
+            </label>
+          </div>
+        </div>
+
+        <div class="filter-section">
+          <div class="filter-label">Тип вопроса</div>
+          <select class="filter-select" id="f-type" onchange="onFilterChange()">
+            <option value="">Все типы</option>
+            <option value="single">Один ответ</option>
+            <option value="multi">Несколько</option>
+            <option value="true_false">Да/Нет</option>
+            <option value="short_answer">Краткий ответ</option>
+            <option value="matching">Соответствие</option>
+            <option value="fill-blank">Заполни пробел</option>
+            <option value="ordering">Порядок</option>
+          </select>
+        </div>
+
+        <div class="filter-section">
+          <div class="filter-label">Сортировка</div>
+          <select class="filter-select" id="f-sort" onchange="onFilterChange()">
+            <option value="newest">Новые</option>
+            <option value="oldest">Старые</option>
+            <option value="easy">Лёгкие <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> Сложные</option>
+            <option value="hard">Сложные <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> Лёгкие</option>
+          </select>
+        </div>
+
+        <button class="btn-reset" onclick="resetFilters()">
+          <i data-lucide="rotate-ccw" style="width:14px;height:14px"></i> Сбросить
+        </button>
+      </div>
+
+      <!-- Main -->
+      <div class="qb-main" id="qb-main">
+        <div class="qb-result-header">
+          <div class="qb-found">Найдено: <span id="found-count">0</span> вопросов</div>
+        </div>
+        <div id="qb-grid" class="qb-grid"></div>
+        <div class="qb-pagination" id="qb-pagination" style="display:none">
+          <button class="pag-btn" id="pag-prev" onclick="prevPage()">
+            <i data-lucide="chevron-left" style="width:14px;height:14px"></i> Назад
+          </button>
+          <div class="pag-info" id="pag-info">1 / 1</div>
+          <button class="pag-btn" id="pag-next" onclick="nextPage()">
+            Далее <i data-lucide="chevron-right" style="width:14px;height:14px"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script src="/js/api.js"></script>
+<script>
+  if (!LS.requireAuth()) throw new Error();
+
+  const user = LS.getUser();
+  document.getElementById('nav-user').textContent = user?.name || user?.email || '';
+  document.getElementById('nav-avatar').textContent =
+    (user?.name || 'LS').split(' ').slice(0, 2).map(w => w[0]?.toUpperCase() || '').join('') || 'LS';
+
+  const isTeacher = ['admin', 'teacher'].includes(user?.role);
+  if (!isTeacher) { location.href = '/dashboard'; throw new Error(); }
+  if (user?.role === 'admin') document.getElementById('btn-admin').style.display = '';
+
+  /* ── helpers ── */
+  function fmtTime(s) {
+    const d = new Date(s && s.includes('T') ? s : (s || '').replace(' ', 'T') + 'Z');
+    const diff = Date.now() - d.getTime();
+    if (diff < 60000) return 'только что';
+    if (diff < 3600000) return Math.floor(diff / 60000) + ' мин назад';
+    return d.toLocaleDateString('ru', { day: 'numeric', month: 'short' });
+  }
+  const TYPE_LABELS = {
+    single: 'Один ответ', multi: 'Несколько', true_false: 'Да/Нет',
+    short_answer: 'Краткий ответ', matching: 'Соответствие',
+    'fill-blank': 'Заполни пробел', ordering: 'Порядок',
+  };
+  const SUBJECT_NAMES = { bio: 'Биология', chem: 'Химия', math: 'Математика', phys: 'Физика', other: 'Другое' };
+
+  /* ── sidebar ── */
+  function toggleSidebar() {
+    const layout = document.querySelector('.app-layout');
+    const collapsed = layout.classList.toggle('sb-collapsed');
+    localStorage.setItem('ls_sb_collapsed', collapsed ? '1' : '');
+    lucide.createIcons();
+  }
+  if (localStorage.getItem('ls_sb_collapsed'))
+    document.querySelector('.app-layout').classList.add('sb-collapsed');
+
+  /* ── notifications ── */
+  function toggleNotifDrop() {
+    const btn = document.getElementById('notif-btn');
+    const drop = document.getElementById('notif-drop');
+    const r = btn.getBoundingClientRect();
+    drop.style.left = (r.right + 8) + 'px';
+    drop.style.top = r.top + 'px';
+    if (drop.classList.toggle('open')) loadNotifs();
+  }
+  async function loadNotifs() {
+    const drop = document.getElementById('notif-drop');
+    drop.innerHTML = '<div class="notif-drop-header"><span class="notif-drop-title">Уведомления</span><button class="notif-read-all" onclick="readAllNotifs()">Прочитать все</button></div><div class="notif-empty">Загрузка…</div>';
+    try {
+      const data = await LS.api('/api/notifications?limit=20');
+      const items = data.items || [];
+      const badge = document.getElementById('notif-badge');
+      const unread = items.filter(n => !n.is_read).length;
+      badge.textContent = unread; badge.style.display = unread ? '' : 'none';
+      if (!items.length) { drop.querySelector('.notif-empty').textContent = 'Нет уведомлений'; return; }
+      drop.innerHTML = '<div class="notif-drop-header"><span class="notif-drop-title">Уведомления</span><button class="notif-read-all" onclick="readAllNotifs()">Прочитать все</button></div>' +
+        items.map(n => `<a class="notif-item${n.is_read ? '' : ' unread'}" href="${LS.safeHref(n.link)}" onclick="markRead(${n.id})">
+          <div class="notif-dot${n.is_read ? ' read' : ''}"></div>
+          <div><div class="notif-msg">${esc(n.message)}</div><div class="notif-time">${fmtTime(n.created_at)}</div></div>
+        </a>`).join('');
+    } catch {}
+  }
+  async function markRead(id) { try { await LS.api('/api/notifications/' + id + '/read', { method: 'POST' }); } catch {} }
+  async function readAllNotifs() { try { await LS.api('/api/notifications/read-all', { method: 'POST' }); loadNotifs(); } catch {} }
+  document.addEventListener('click', e => {
+    const drop = document.getElementById('notif-drop');
+    if (drop.classList.contains('open') && !drop.contains(e.target) && !document.getElementById('notif-btn').contains(e.target))
+      drop.classList.remove('open');
+  });
+
+  /* ── filter state ── */
+  let currentPage = 1;
+  const LIMIT = 24;
+  let expandedId = null;
+  let searchTimeout = null;
+
+  function getFilters() {
+    const diffs = [1, 2, 3].filter(d => document.getElementById('diff-' + d)?.checked);
+    return {
+      q: document.getElementById('f-search').value.trim(),
+      subject: document.getElementById('f-subject').value,
+      topic_id: document.getElementById('f-topic').value,
+      difficulty: diffs.length === 1 ? diffs[0] : (diffs.length === 0 ? '' : diffs.join(',')),
+      type: document.getElementById('f-type').value,
+      sort: document.getElementById('f-sort').value,
+    };
+  }
+
+  function onFilterChange() { currentPage = 1; expandedId = null; loadQuestions(); }
+
+  /* debounce search input */
+  document.getElementById('f-search').addEventListener('input', () => {
+    clearTimeout(searchTimeout);
+    searchTimeout = setTimeout(() => onFilterChange(), 380);
+  });
+  document.getElementById('f-subject').addEventListener('change', () => {
+    loadTopics();
+    onFilterChange();
+  });
+
+  function resetFilters() {
+    document.getElementById('f-search').value = '';
+    document.getElementById('f-subject').value = '';
+    document.getElementById('f-topic').value = '';
+    document.getElementById('f-type').value = '';
+    document.getElementById('f-sort').value = 'newest';
+    [1, 2, 3].forEach(d => { const cb = document.getElementById('diff-' + d); if (cb) cb.checked = false; });
+    document.getElementById('f-topic').innerHTML = '<option value="">Все темы</option>';
+    onFilterChange();
+  }
+
+  /* ── load topics after subject change ── */
+  async function loadTopics() {
+    const subject = document.getElementById('f-subject').value;
+    const topicSel = document.getElementById('f-topic');
+    topicSel.innerHTML = '<option value="">Все темы</option>';
+    if (!subject) return;
+    try {
+      const data = await LS.api('/api/questions?subject=' + subject + '&limit=200');
+      const rows = data.rows || [];
+      const topicMap = new Map();
+      rows.forEach(q => { if (q.topic_id && q.topic) topicMap.set(q.topic_id, q.topic); });
+      topicMap.forEach((name, id) => {
+        const opt = document.createElement('option');
+        opt.value = id;
+        opt.textContent = name;
+        topicSel.appendChild(opt);
+      });
+    } catch {}
+  }
+
+  /* ── load questions ── */
+  async function loadQuestions() {
+    const f = getFilters();
+    const params = new URLSearchParams({ page: currentPage, limit: LIMIT });
+    if (f.q) params.set('q', f.q);
+    if (f.subject) params.set('subject', f.subject);
+    if (f.topic_id) params.set('topic_id', f.topic_id);
+    if (f.difficulty) params.set('difficulty', f.difficulty);
+    if (f.type) params.set('type', f.type);
+    if (f.sort === 'oldest') params.set('sort', 'oldest');
+    else if (f.sort === 'easy') params.set('sort', 'difficulty_asc');
+    else if (f.sort === 'hard') params.set('sort', 'difficulty_desc');
+
+    document.getElementById('qb-grid').innerHTML = '<div style="grid-column:1/-1"><div class="spinner" style="margin:60px auto"></div></div>';
+    document.getElementById('qb-pagination').style.display = 'none';
+
+    try {
+      const data = await LS.api('/api/questions?' + params.toString());
+      renderQuestions(data);
+    } catch (e) {
+      document.getElementById('qb-grid').innerHTML = `<div style="grid-column:1/-1" class="qb-empty"><div class="qb-empty-icon"><i data-lucide="alert-circle" style="width:48px;height:48px"></i></div>${esc(e.message || 'Ошибка загрузки')}</div>`;
+      lucide.createIcons();
+    }
+  }
+
+  function renderQuestions(data) {
+    const { rows = [], total = 0, page = 1, limit = LIMIT } = data;
+    const totalPages = Math.max(1, Math.ceil(total / limit));
+
+    document.getElementById('found-count').textContent = total;
+    document.getElementById('hdr-count').textContent = total;
+
+    if (!rows.length) {
+      document.getElementById('qb-grid').innerHTML = `
+        <div style="grid-column:1/-1" class="qb-empty">
+          <div class="qb-empty-icon"><i data-lucide="search-x" style="width:52px;height:52px"></i></div>
+          <div style="font-family:'Unbounded',sans-serif;font-weight:800;font-size:0.95rem;color:#0F172A;margin-bottom:6px">Ничего не найдено</div>
+          Попробуйте изменить фильтры или сбросить их
+        </div>`;
+      lucide.createIcons();
+      return;
+    }
+
+    let html = '';
+    rows.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 isExpanded = expandedId === q.id;
+      const optsCount = (q.options || []).length;
+
+      html += `<div class="qc${isExpanded ? ' expanded' : ''}" id="qcard-${q.id}" onclick="toggleExpand(${q.id})">
+        <div class="qc-top">
+          <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-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>` : ''}
+        </div>`;
+
+      if (isExpanded) {
+        html += `<div class="qc-preview">
+          <div class="qc-preview-text">${esc(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>
+            </div>`;
+          });
+          html += '</div>';
+        }
+        if (q.explanation) {
+          html += `<div class="qc-explanation"><strong>Пояснение:</strong> ${esc(q.explanation)}</div>`;
+        }
+        html += '</div>';
+      }
+
+      html += '</div>';
+    });
+
+    document.getElementById('qb-grid').innerHTML = html;
+
+    // pagination
+    const pagWrap = document.getElementById('qb-pagination');
+    if (totalPages > 1) {
+      pagWrap.style.display = '';
+      document.getElementById('pag-prev').disabled = page <= 1;
+      document.getElementById('pag-next').disabled = page >= totalPages;
+      document.getElementById('pag-info').textContent = page + ' / ' + totalPages;
+    } else {
+      pagWrap.style.display = 'none';
+    }
+
+    lucide.createIcons();
+  }
+
+  function toggleExpand(id) {
+    expandedId = expandedId === id ? null : id;
+    loadQuestions();
+  }
+
+  function prevPage() { if (currentPage > 1) { currentPage--; loadQuestions(); } }
+  function nextPage() { currentPage++; loadQuestions(); }
+
+  lucide.createIcons();
+  loadQuestions();
+</script>
+<script src="/js/notifications.js"></script>
+<script src="/js/search.js"></script>
+<script src="/js/mobile.js"></script>
+</body>
+</html>
diff --git a/frontend/red-book-biomes.html b/frontend/red-book-biomes.html
new file mode 100644
index 0000000..fe2ed79
--- /dev/null
+++ b/frontend/red-book-biomes.html
@@ -0,0 +1,884 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Биомы — Красная книга РБ</title>
+  <link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@400;700;900&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet"/>
+  <link rel="stylesheet" href="/css/ls.css"/>
+  <style>
+    :root {
+      --rb-bg: #0a1a0d; --rb-surface: #111d13; --rb-border: #1e3523;
+      --rb-accent: #4ade80; --rb-text: #e2f5e8; --rb-muted: #6b9a74;
+    }
+    body { background: var(--rb-bg); color: var(--rb-text); font-family: 'Manrope', sans-serif; margin: 0; }
+    .app-layout { background: var(--rb-bg); }
+    .sb-content { padding: 0; overflow: hidden; }
+    /* ── RB Sidebar ─────────────────────────────────────────────────────── */
+    .app-layout > .sidebar { background: var(--rb-surface) !important; border-right: 1px solid var(--rb-border) !important; }
+    .sb-brand { border-bottom: 1px solid var(--rb-border); padding: 16px 12px 12px; }
+    .sb-link, a.sb-link, button.sb-link { color: var(--rb-muted) !important; }
+    .sb-link:hover { background: rgba(74,222,128,.08) !important; color: var(--rb-text) !important; }
+    .sb-link.active { background: rgba(74,222,128,.14) !important; color: var(--rb-accent) !important; font-weight: 700; }
+    .sb-link.active::before { background: var(--rb-accent) !important; }
+    .sb-toggle { color: var(--rb-muted) !important; border-color: var(--rb-border) !important; background: transparent !important; }
+    .sb-toggle:hover { background: rgba(74,222,128,.12) !important; color: var(--rb-accent) !important; border-color: var(--rb-accent) !important; }
+    .nav-user-chip { border-color: var(--rb-border) !important; }
+    .nav-user-chip:hover { background: rgba(74,222,128,.08) !important; }
+    .nav-avatar { background: linear-gradient(135deg, #166534, #15803d) !important; }
+    .nav-user-name { color: var(--rb-muted) !important; }
+    .rb-brand-link { display: flex; align-items: center; gap: 9px; text-decoration: none; flex: 1; min-width: 0; overflow: hidden; }
+    .rb-brand-icon { font-size: 24px; line-height: 1; flex-shrink: 0; }
+    .rb-brand-text { font-family: 'Unbounded', sans-serif; font-size: 10px; font-weight: 700; color: var(--rb-accent); line-height: 1.4; white-space: nowrap; }
+    .rb-sb-section { font-size: 9px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--rb-muted); padding: 14px 12px 4px; margin: 0; opacity: 0.55; }
+    .app-layout.sb-collapsed .rb-sb-section { display: none; }
+    .rb-sb-divider { border: none; border-top: 1px solid var(--rb-border); margin: 8px 4px; }
+    .rb-back-link { opacity: 0.65; font-size: 0.82rem !important; }
+    .rb-back-link:hover { opacity: 1 !important; }
+
+    .biome-main { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
+
+    /* Topbar */
+    .bio-topbar {
+      display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
+      padding: 12px 20px; border-bottom: 1px solid var(--rb-border);
+      background: var(--rb-surface); flex-shrink: 0; z-index: 10;
+    }
+    .bio-topbar h1 { font-family: 'Unbounded', sans-serif; font-size: 15px; font-weight: 700; margin: 0; }
+    .biome-tabs { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
+    .biome-tab {
+      display: flex; align-items: center; gap: 6px;
+      padding: 7px 14px; border-radius: 10px; cursor: pointer;
+      font-size: 12px; font-weight: 600; border: 1px solid var(--rb-border);
+      color: var(--rb-muted); transition: all .2s;
+    }
+    .biome-tab:hover { border-color: var(--rb-accent); color: var(--rb-text); }
+    .biome-tab.active { border-color: var(--rb-accent); background: rgba(74,222,128,.12); color: var(--rb-accent); }
+    .biome-tab .tab-icon { font-size: 16px; }
+
+    /* Canvas + overlay */
+    .bio-body { flex: 1; position: relative; overflow: hidden; }
+    #bio-canvas { width: 100%; height: 100%; display: block; }
+
+    /* Species orbs HUD */
+    .bio-orbs {
+      position: absolute; right: 0; top: 0; bottom: 0; width: 280px;
+      background: linear-gradient(to left, rgba(10,26,13,.95), transparent);
+      display: flex; flex-direction: column; justify-content: center;
+      padding: 20px 20px 20px 40px; gap: 10px; overflow-y: auto;
+      pointer-events: none;
+    }
+    .bio-orbs.visible { pointer-events: auto; }
+    .orb-card {
+      background: rgba(17,29,19,.9); border: 1px solid var(--rb-border);
+      border-radius: 12px; padding: 12px; cursor: pointer;
+      transition: all .2s; display: flex; align-items: center; gap: 10px;
+    }
+    .orb-card:hover { border-color: var(--rb-accent); transform: translateX(-4px); }
+    .orb-icon { font-size: 24px; flex-shrink: 0; }
+    .orb-info { flex: 1; min-width: 0; }
+    .orb-name { font-size: 12px; font-weight: 700; color: #fff; }
+    .orb-lat  { font-size: 10px; color: var(--rb-muted); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .orb-cat  { font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 5px; }
+    .cat-CR { background: rgba(239,68,68,.2); color: #ef4444; }
+    .cat-EN { background: rgba(249,115,22,.2); color: #f97316; }
+    .cat-VU { background: rgba(234,179,8,.2); color: #eab308; }
+    .cat-NT { background: rgba(34,197,94,.2); color: #22c55e; }
+    .cat-LC { background: rgba(59,130,246,.2); color: #3b82f6; }
+
+    /* Biome description overlay */
+    .bio-info-overlay {
+      position: absolute; left: 20px; bottom: 24px;
+      background: rgba(17,29,19,.92); border: 1px solid var(--rb-border);
+      border-radius: 14px; padding: 16px 20px; max-width: 360px;
+      backdrop-filter: blur(8px);
+    }
+    .bio-info-overlay h3 { font-family: 'Unbounded', sans-serif; font-size: 16px; margin: 0 0 6px; color: var(--rb-accent); }
+    .bio-info-overlay p  { font-size: 12px; color: var(--rb-muted); margin: 0 0 10px; line-height: 1.6; }
+    .bio-species-count { font-size: 12px; font-weight: 700; color: var(--rb-text); }
+
+    /* Species popup */
+    .bio-popup {
+      position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
+      background: var(--rb-surface); border: 1px solid var(--rb-border);
+      border-radius: 16px; padding: 24px; max-width: 320px; width: 90%;
+      z-index: 20; display: none; animation: popIn .2s both;
+    }
+    @keyframes popIn { from { opacity:0; transform:translate(-50%,-50%) scale(.9); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }
+    .bio-popup.open { display: block; }
+    .popup-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
+    .popup-icon { font-size: 40px; }
+    .popup-name { font-weight: 800; font-size: 15px; color: #fff; }
+    .popup-lat  { font-style: italic; font-size: 11px; color: var(--rb-muted); }
+    .popup-desc { font-size: 12px; color: #c8e6ce; line-height: 1.7; margin-bottom: 14px; }
+    .popup-fact { background: rgba(74,222,128,.08); border-left: 3px solid var(--rb-accent); padding: 10px 12px; border-radius: 0 8px 8px 0; font-size: 12px; color: var(--rb-accent); margin-bottom: 14px; }
+    .popup-btns { display: flex; gap: 8px; }
+    .popup-btn-primary { flex: 1; background: var(--rb-accent); color: #0a1a0d; font-weight: 700; font-size: 12px; padding: 9px; border: none; border-radius: 8px; cursor: pointer; }
+    .popup-btn-close   { background: transparent; border: 1px solid var(--rb-border); color: var(--rb-muted); font-size: 12px; padding: 9px 14px; border-radius: 8px; cursor: pointer; }
+
+    /* ── Mobile ── */
+    @media (max-width: 768px) {
+      .sb-content { overflow: auto; }
+      .bio-info-overlay { max-width: calc(100vw - 80px); left: 10px; bottom: 10px; padding: 12px 14px; }
+      .bio-info-overlay h3 { font-size: 14px; }
+      .bio-popup { max-width: 90vw; padding: 18px; }
+      .bio-scene-wrap { min-height: 45vw; }
+    }
+    @media (max-width: 480px) {
+      .bio-info-overlay { bottom: 8px; left: 8px; }
+      .popup-icon { font-size: 30px; }
+      .popup-btns { flex-direction: column; }
+      .popup-btn-primary, .popup-btn-close { width: 100%; text-align: center; }
+    }
+  </style>
+</head>
+<body>
+<div class="app-layout" id="app">
+  <!-- Red Book sidebar -->
+  <nav class="sidebar">
+    <div class="sb-brand">
+      <a href="/red-book.html" class="rb-brand-link">
+        <span class="rb-brand-icon"><svg class="ic" viewBox="0 0 24 24"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z"/><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"/></svg></span>
+        <span class="sb-lbl rb-brand-text">Красная<br>книга РБ</span>
+      </a>
+      <button class="sb-toggle" onclick="toggleSidebar()"><i data-lucide="panel-left-close"></i></button>
+    </div>
+    <nav class="sb-nav">
+      <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="/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 active"><i data-lucide="trees"     class="sb-icon"></i><span class="sb-lbl">Биомы</span></a>
+      <a href="/red-book-games.html"    class="sb-link"><i data-lucide="gamepad-2"        class="sb-icon"></i><span class="sb-lbl">Игры</span></a>
+      <hr class="rb-sb-divider">
+      <a href="/dashboard.html" class="sb-link rb-back-link"><i data-lucide="chevron-left" class="sb-icon"></i><span class="sb-lbl">Назад</span></a>
+      <a href="/profile.html"   class="sb-link"><i data-lucide="user"                     class="sb-icon"></i><span class="sb-lbl">Профиль</span></a>
+    </nav>
+    <div class="sb-footer">
+      <div class="nav-user-chip" onclick="location.href='/profile.html'">
+        <div class="nav-avatar" id="nav-avatar">LS</div>
+        <span class="nav-user-name" id="nav-user">—</span>
+      </div>
+    </div>
+  </nav>
+
+  <main class="sb-content">
+    <div class="biome-main">
+      <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>
+        <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>
+        <button id="daynight-btn" onclick="toggleDayNight()" title="День/Ночь" style="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"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></svg>️ День</button>
+        <button id="weather-btn" onclick="toggleRain()" title="Дождь" style="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"><path d="M4 14.9A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.24"/><path d="M8 19v1M8 14v1M16 19v1M16 14v1M12 21v1M12 16v1"/></svg> Дождь</button>
+      </div>
+
+      <div class="bio-body">
+        <canvas id="bio-canvas"></canvas>
+
+        <!-- Species list sidebar -->
+        <div class="bio-orbs visible" id="bio-orbs"></div>
+
+        <!-- Biome info -->
+        <div class="bio-info-overlay" id="bio-info">
+          <h3 id="bio-name">Загрузка...</h3>
+          <p id="bio-desc">Выберите биом выше для исследования.</p>
+          <div class="bio-species-count" id="bio-species-count"></div>
+        </div>
+
+        <!-- Species popup -->
+        <div class="bio-popup" id="bio-popup">
+          <div class="popup-header">
+            <span class="popup-icon" id="pp-icon"><svg class="ic" viewBox="0 0 24 24"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z"/><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"/></svg></span>
+            <div>
+              <div class="popup-name" id="pp-name">—</div>
+              <div class="popup-lat"  id="pp-lat"></div>
+              <span class="orb-cat" id="pp-cat"></span>
+            </div>
+          </div>
+          <div class="popup-fact" id="pp-fact"></div>
+          <div class="popup-desc" id="pp-desc"></div>
+          <div class="popup-btns">
+            <button class="popup-btn-primary" id="pp-collect" onclick="collectFromPopup()"><svg class="ic" viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 9.9-1"/></svg> Открыть</button>
+            <button class="popup-btn-close" onclick="closePopup()">Закрыть</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/three@0.149.0/build/three.min.js"></script>
+<script src="/js/api.js"></script>
+<script>
+/* ══════════════════════════════════════════════════════════════════════════
+   Biome definitions
+   ══════════════════════════════════════════════════════════════════════════ */
+const BIOMES = [
+  { id: 1, name: 'Широколиственный лес', icon: '<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>', type: 'forest',
+    skyColor: 0x071a09, fogColor: 0x0d2e10, fogDensity: 0.025,
+    groundColor: 0x071209, ambientColor: 0x1a4a20, sunColor: 0x88ffaa },
+  { id: 2, name: 'Хвойный лес', icon: '<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>', type: 'conifer',
+    skyColor: 0x060f0a, fogColor: 0x0a1a0d, fogDensity: 0.03,
+    groundColor: 0x050d07, ambientColor: 0x0d3015, sunColor: 0x66cc88 },
+  { id: 3, name: 'Болото', icon: '<svg class="ic" viewBox="0 0 24 24"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z"/><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"/></svg>', type: 'wetland',
+    skyColor: 0x050e10, fogColor: 0x0a1e22, fogDensity: 0.04,
+    groundColor: 0x071510, ambientColor: 0x103020, sunColor: 0x44aacc },
+  { id: 4, name: 'Река и озеро', icon: '<svg class="ic" viewBox="0 0 24 24"><path d="M2 6c.6.5 1.2 1 2.5 1C7 7 7 5 9.5 5c2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1M2 12c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1M2 18c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/></svg>', type: 'river',
+    skyColor: 0x060d14, fogColor: 0x0a1a2e, fogDensity: 0.02,
+    groundColor: 0x050d1a, ambientColor: 0x0a2040, sunColor: 0x4488ff },
+  { id: 5, name: 'Луг и поле', icon: '<svg class="ic" viewBox="0 0 24 24"><path d="M2 22 16 8"/><path d="M3.47 12.53 5 11l1.53 1.53a3.5 3.5 0 0 1 0 4.94L5 19l-1.53-1.53a3.5 3.5 0 0 1 0-4.94z"/><path d="M7.47 8.53 9 7l1.53 1.53a3.5 3.5 0 0 1 0 4.94L9 15l-1.53-1.53a3.5 3.5 0 0 1 0-4.94z"/><path d="M11.47 4.53 13 3l1.53 1.53a3.5 3.5 0 0 1 0 4.94L13 11l-1.53-1.53a3.5 3.5 0 0 1 0-4.94z"/><path d="M20 2h2v2a4 4 0 0 1-4 4h-2V6a4 4 0 0 1 4-4z"/></svg>', type: 'meadow',
+    skyColor: 0x0a100a, fogColor: 0x101a10, fogDensity: 0.015,
+    groundColor: 0x071407, ambientColor: 0x1a3010, sunColor: 0xaadd44 },
+];
+
+let habitats = [];
+let currentBiomeIdx = 0;
+let speciesList = [];
+let currentSpecies = null;
+let orbMeshes = [];
+
+/* ══════════════════════════════════════════════════════════════════════════
+   Three.js
+   ══════════════════════════════════════════════════════════════════════════ */
+const canvas   = document.getElementById('bio-canvas');
+const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
+renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
+renderer.setClearColor(0x071209);
+
+const scene  = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera(55, 1, 0.1, 300);
+camera.position.set(0, 3, 22);
+camera.lookAt(0, 1, 0);
+
+function resize() {
+  const w = canvas.parentElement.clientWidth, h = canvas.parentElement.clientHeight;
+  renderer.setSize(w, h, false);
+  camera.aspect = w / h;
+  camera.updateProjectionMatrix();
+}
+window.addEventListener('resize', resize);
+resize();
+
+const ambient = new THREE.AmbientLight(0x1a4a20, 1.5);
+scene.add(ambient);
+const sun = new THREE.DirectionalLight(0x88ffaa, 1.2);
+sun.position.set(8, 12, 5);
+scene.add(sun);
+
+// Ground
+const groundMat = new THREE.MeshLambertMaterial({ color: 0x071209 });
+const ground    = new THREE.Mesh(new THREE.PlaneGeometry(100, 100), groundMat);
+ground.rotation.x = -Math.PI / 2;
+scene.add(ground);
+
+// Particles (fireflies/spores)
+const PC = 400;
+const pPos = new Float32Array(PC * 3);
+const pPhase = new Float32Array(PC);
+for (let i = 0; i < PC; i++) {
+  pPos[i*3]   = (Math.random() - 0.5) * 40;
+  pPos[i*3+1] = Math.random() * 8;
+  pPos[i*3+2] = (Math.random() - 0.5) * 30 - 5;
+  pPhase[i]   = Math.random() * Math.PI * 2;
+}
+const pgeo  = new THREE.BufferGeometry();
+pgeo.setAttribute('position', new THREE.BufferAttribute(pPos.slice(), 3));
+const pmat  = new THREE.PointsMaterial({ color: 0x88ffaa, size: 0.1, transparent: true, opacity: 0.5 });
+const particles = new THREE.Points(pgeo, pmat);
+scene.add(particles);
+
+// Trees group (replaced per biome)
+let treesGroup = new THREE.Group();
+scene.add(treesGroup);
+
+// Species orb group
+let orbGroup = new THREE.Group();
+scene.add(orbGroup);
+
+/* Build biome scene */
+function buildBiomeScene(biome) {
+  renderer.setClearColor(biome.skyColor);
+  scene.fog = new THREE.FogExp2(biome.fogColor, biome.fogDensity);
+  groundMat.color.setHex(biome.groundColor);
+  ambient.color.setHex(biome.ambientColor);
+  sun.color.setHex(biome.sunColor);
+
+  // Remove old trees
+  while (treesGroup.children.length) treesGroup.remove(treesGroup.children[0]);
+
+  if (biome.type === 'forest' || biome.type === 'conifer') buildForest(biome);
+  else if (biome.type === 'wetland') buildWetland(biome);
+  else if (biome.type === 'river')   buildRiver(biome);
+  else if (biome.type === 'meadow')  buildMeadow(biome);
+
+  // Particle color
+  const pColors = { forest:'#88ffaa', conifer:'#44cc77', wetland:'#aaddcc', river:'#4488ff', meadow:'#aadd55' };
+  pmat.color.setStyle(pColors[biome.type] || '#88ffaa');
+}
+
+function buildForest(biome) {
+  const isConifer = biome.type === 'conifer';
+  const treeColor = isConifer ? 0x0d2e12 : 0x1a4a1a;
+  const trunkCol  = isConifer ? 0x3b1e08 : 0x5c3010;
+  for (let i = 0; i < 60; i++) {
+    const angle = Math.random() * Math.PI * 2;
+    const r     = 4 + Math.random() * 20;
+    const sc    = 0.5 + Math.random() * 1.5;
+    const g     = new THREE.Group();
+    const th    = (0.8 + Math.random() * 0.5) * sc;
+    const trunk = new THREE.Mesh(
+      new THREE.CylinderGeometry(0.08*sc, 0.12*sc, th, 6),
+      new THREE.MeshLambertMaterial({ color: trunkCol })
+    );
+    trunk.position.y = th/2;
+    g.add(trunk);
+    const levels = isConifer ? 4 : 2;
+    for (let l = 0; l < levels; l++) {
+      const cr = isConifer ? (0.5 - l*0.1)*sc : (0.6 - l*0.15)*sc;
+      const ch = (0.6 - l*0.05)*sc;
+      const geo = isConifer ? new THREE.ConeGeometry(cr, ch, 7) : new THREE.SphereGeometry(cr, 8, 6);
+      const col = new THREE.Color(treeColor).offsetHSL(0, 0, l * 0.04);
+      const mesh = new THREE.Mesh(geo, new THREE.MeshLambertMaterial({ color: col }));
+      mesh.position.y = th + (isConifer ? ch*0.4 + l*ch*0.5 : cr*0.7 + l*cr*0.3);
+      g.add(mesh);
+    }
+    g.position.set(Math.cos(angle)*r, 0, Math.sin(angle)*r - 3);
+    treesGroup.add(g);
+  }
+}
+
+function buildWetland(biome) {
+  groundMat.color.setHex(0x061410);
+  // Reeds
+  for (let i = 0; i < 80; i++) {
+    const x = (Math.random()-0.5)*30, z = Math.random()*15-12;
+    const h = 1 + Math.random()*2;
+    const reed = new THREE.Mesh(
+      new THREE.CylinderGeometry(0.04, 0.04, h, 4),
+      new THREE.MeshLambertMaterial({ color: 0x5a7a2a })
+    );
+    reed.position.set(x, h/2, z);
+    reed.rotation.z = (Math.random()-0.5)*0.2;
+    treesGroup.add(reed);
+  }
+  // Water plane
+  const water = new THREE.Mesh(
+    new THREE.PlaneGeometry(50, 15),
+    new THREE.MeshLambertMaterial({ color: 0x0d2e3a, transparent: true, opacity: 0.7 })
+  );
+  water.rotation.x = -Math.PI/2;
+  water.position.set(0, 0.01, 0);
+  treesGroup.add(water);
+}
+
+function buildRiver(biome) {
+  // Water
+  const water = new THREE.Mesh(
+    new THREE.PlaneGeometry(8, 50),
+    new THREE.MeshLambertMaterial({ color: 0x0a2040, transparent: true, opacity: 0.8 })
+  );
+  water.rotation.x = -Math.PI/2;
+  water.position.set(0, 0.01, 0);
+  treesGroup.add(water);
+  // Banks with trees
+  for (let i = 0; i < 30; i++) {
+    const side = Math.random() > 0.5 ? 1 : -1;
+    const x = side * (5 + Math.random() * 10);
+    const z = (Math.random()-0.5)*30;
+    const sc = 0.5 + Math.random();
+    const g  = new THREE.Group();
+    const h  = 1.2*sc;
+    g.add(new THREE.Mesh(new THREE.CylinderGeometry(0.1*sc, 0.15*sc, h, 6),
+      new THREE.MeshLambertMaterial({ color: 0x4a2a10 })));
+    const crown = new THREE.Mesh(new THREE.SphereGeometry(0.7*sc, 8, 6),
+      new THREE.MeshLambertMaterial({ color: 0x1a5520 }));
+    crown.position.y = h + 0.5*sc;
+    g.children[0].position.y = h/2;
+    g.add(crown);
+    g.position.set(x, 0, z);
+    treesGroup.add(g);
+  }
+}
+
+function buildMeadow(biome) {
+  groundMat.color.setHex(0x0d1f08);
+  // Grass tufts
+  for (let i = 0; i < 120; i++) {
+    const x = (Math.random()-0.5)*40, z = (Math.random()-0.5)*30;
+    const h = 0.2 + Math.random()*0.5;
+    const blades = 4;
+    for (let b = 0; b < blades; b++) {
+      const blade = new THREE.Mesh(
+        new THREE.CylinderGeometry(0.01, 0.02, h, 3),
+        new THREE.MeshLambertMaterial({ color: 0x2a5a10 })
+      );
+      blade.position.set(x + (Math.random()-0.5)*0.3, h/2, z + (Math.random()-0.5)*0.3);
+      blade.rotation.z = (Math.random()-0.5)*0.5;
+      treesGroup.add(blade);
+    }
+  }
+  // Flowers
+  for (let i = 0; i < 30; i++) {
+    const x = (Math.random()-0.5)*30, z = (Math.random()-0.5)*20;
+    const colors = [0xff4488, 0xffcc22, 0xaa44ff, 0xff6644];
+    const flower = new THREE.Mesh(
+      new THREE.SphereGeometry(0.12, 6, 6),
+      new THREE.MeshLambertMaterial({ color: colors[Math.floor(Math.random()*colors.length)] })
+    );
+    flower.position.set(x, 0.5+Math.random()*0.3, z);
+    treesGroup.add(flower);
+  }
+}
+
+/* Species orbs in 3D */
+function buildSpeciesOrbs(species) {
+  while (orbGroup.children.length) orbGroup.remove(orbGroup.children[0]);
+  orbMeshes = [];
+
+  const CAT_COL = { CR: 0xef4444, EN: 0xf97316, VU: 0xeab308, NT: 0x22c55e, LC: 0x3b82f6 };
+
+  species.forEach((sp, i) => {
+    const angle = (i / species.length) * Math.PI * 2;
+    const r     = 5 + Math.random() * 4;
+    const h     = 1 + Math.random() * 5;
+    const color = CAT_COL[sp.category] || 0x22c55e;
+
+    const orb = new THREE.Mesh(
+      new THREE.SphereGeometry(0.35, 12, 12),
+      new THREE.MeshStandardMaterial({ color, emissive: color, emissiveIntensity: 0.5, roughness: 0.3, metalness: 0.1 })
+    );
+    const cx = Math.cos(angle) * r;
+    const cz = Math.sin(angle) * r - 2;
+    orb.position.set(cx, h, cz);
+    orb.userData = {
+      sp, idx: i, phase: Math.random() * Math.PI * 2,
+      // Gentle orbit path
+      orbit: { cx, cz, r: 0.8 + Math.random() * 0.5, t: Math.random() * Math.PI * 2 },
+    };
+    orbGroup.add(orb);
+    orbMeshes.push(orb);
+  });
+}
+
+/* Raycasting for orb click */
+const ray2d = new THREE.Vector2();
+const rayc  = new THREE.Raycaster();
+canvas.addEventListener('click', e => {
+  const rect = canvas.getBoundingClientRect();
+  ray2d.x =  ((e.clientX - rect.left) / rect.width)  * 2 - 1;
+  ray2d.y = -((e.clientY - rect.top)  / rect.height) * 2 + 1;
+  rayc.setFromCamera(ray2d, camera);
+  const hits = rayc.intersectObjects(orbMeshes);
+  if (hits.length) openSpeciesPopup(hits[0].object.userData.sp);
+});
+
+function openSpeciesPopup(sp) {
+  currentSpecies = sp;
+  document.getElementById('pp-icon').innerHTML = sp.icon || '<svg class="ic" viewBox="0 0 24 24"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z"/><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"/></svg>';
+  document.getElementById('pp-name').textContent = sp.name_ru;
+  document.getElementById('pp-lat').textContent  = sp.name_lat || '';
+  const catEl = document.getElementById('pp-cat');
+  catEl.textContent = sp.category;
+  catEl.className   = `orb-cat cat-${sp.category}`;
+  document.getElementById('pp-fact').textContent = sp.interesting_fact || '';
+  document.getElementById('pp-desc').textContent = sp.description ? sp.description.slice(0, 180) + '…' : '';
+  document.getElementById('bio-popup').classList.add('open');
+}
+function closePopup() {
+  document.getElementById('bio-popup').classList.remove('open');
+  currentSpecies = null;
+}
+async function collectFromPopup() {
+  if (!currentSpecies) return;
+  const res = await LS.post(`/api/red-book/species/${currentSpecies.id}/collect`, { method: 'biome' }).catch(() => null);
+  if (res) {
+    const btn = document.getElementById('pp-collect');
+    btn.innerHTML = `<svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg> +${res.xp_earned||20} XP`;
+    btn.disabled = true;
+  }
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   Biome tabs
+   ══════════════════════════════════════════════════════════════════════════ */
+function renderTabs() {
+  const el = document.getElementById('biome-tabs');
+  el.innerHTML = BIOMES.map((b, i) =>
+    `<div class="biome-tab ${i === currentBiomeIdx ? 'active' : ''}" onclick="selectBiome(${i})">
+      <span class="tab-icon">${b.icon}</span>${b.name}
+    </div>`
+  ).join('');
+}
+
+async function selectBiome(idx) {
+  currentBiomeIdx = idx;
+  renderTabs();
+  const biome = BIOMES[idx];
+  buildBiomeScene(biome);
+  // Ambient sound
+  if (soundEnabled) playBiomeSound(biome.type);
+  // Re-apply night if active
+  if (isNight) {
+    ambient.intensity = 0.3; sun.intensity = 0.1;
+    renderer.setClearColor(0x030810);
+    scene.fog = new THREE.FogExp2(0x050c14, biome.fogDensity * 1.5);
+  }
+  // Re-apply rain if active
+  if (rainEnabled) initRain();
+
+  // Load species for this habitat
+  const habitat = habitats.find(h => h.type === biome.type);
+  let species = [];
+  if (habitat) {
+    const data = await LS.get(`/api/red-book/biome/${habitat.id}`).catch(() => []);
+    species = Array.isArray(data) ? data : [];
+  }
+  speciesList = species;
+
+  // Update info overlay
+  document.getElementById('bio-name').textContent = biome.name;
+  document.getElementById('bio-desc').textContent = habitat?.description || 'Биом Беларуси';
+  document.getElementById('bio-species-count').textContent = `${species.length} видов`;
+
+  // Build 3D orbs
+  buildSpeciesOrbs(species);
+
+  // Build HTML orb list
+  const orbsEl = document.getElementById('bio-orbs');
+  orbsEl.innerHTML = species.length ? species.map(sp =>
+    `<div class="orb-card" onclick='openSpeciesPopup(${JSON.stringify(sp).replace(/'/g, "&#39;")})'>
+      <span class="orb-icon">${sp.icon || '<svg class="ic" viewBox="0 0 24 24"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z"/><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"/></svg>'}</span>
+      <div class="orb-info">
+        <div class="orb-name">${sp.name_ru}</div>
+        <div class="orb-lat">${sp.name_lat || ''}</div>
+      </div>
+      <span class="orb-cat cat-${sp.category}">${sp.category}</span>
+    </div>`
+  ).join('')
+  : '<div style="color:var(--rb-muted);font-size:12px;padding:10px">Нет данных о видах этого биома</div>';
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   Render loop
+   ══════════════════════════════════════════════════════════════════════════ */
+/* ── Day/Night cycle ── */
+let isNight = false;
+
+function toggleDayNight() {
+  isNight = !isNight;
+  const btn = document.getElementById('daynight-btn');
+  const biome = BIOMES[currentBiomeIdx];
+  if (isNight) {
+    btn.innerHTML = '<svg class="ic" viewBox="0 0 24 24"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg> Ночь';
+    btn.style.borderColor = '#818cf8';
+    btn.style.color = '#818cf8';
+    // Dim lights
+    ambient.intensity = 0.3;
+    sun.intensity = 0.1;
+    sun.color.setHex(0x112244);
+    // Darken sky and fog
+    renderer.setClearColor(0x030810);
+    scene.fog = new THREE.FogExp2(0x050c14, biome.fogDensity * 1.5);
+    // Brighter particles (stars/fireflies)
+    pmat.size = 0.18;
+    pmat.opacity = 0.85;
+    pmat.color.setStyle('#aaccff');
+  } else {
+    btn.innerHTML = '<svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></svg>️ День';
+    btn.style.borderColor = 'var(--rb-border)';
+    btn.style.color = 'var(--rb-muted)';
+    // Restore biome lighting
+    ambient.intensity = 1.5;
+    sun.intensity = 1.2;
+    buildBiomeScene(biome); // resets all colors
+    if (soundEnabled) playBiomeSound(biome.type);
+  }
+}
+
+/* ── Rain system ── */
+let rainEnabled = false;
+let rainGeo, rainMat, rainMesh;
+
+function toggleRain() {
+  rainEnabled = !rainEnabled;
+  const btn = document.getElementById('weather-btn');
+  if (rainEnabled) {
+    btn.innerHTML = '<svg class="ic" viewBox="0 0 24 24"><path d="M4 14.9A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.24"/><path d="M16 14v6a2 2 0 0 1-4 0"/></svg> Ливень';
+    btn.style.borderColor = '#60a5fa';
+    btn.style.color = '#60a5fa';
+    initRain();
+  } else {
+    btn.innerHTML = '<svg class="ic" viewBox="0 0 24 24"><path d="M4 14.9A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.24"/><path d="M8 19v1M8 14v1M16 19v1M16 14v1M12 21v1M12 16v1"/></svg> Дождь';
+    btn.style.borderColor = 'var(--rb-border)';
+    btn.style.color = 'var(--rb-muted)';
+    if (rainMesh) { scene.remove(rainMesh); rainMesh = null; }
+    // Reduce fog
+    const biome = BIOMES[currentBiomeIdx];
+    scene.fog = new THREE.FogExp2(biome.fogColor, biome.fogDensity);
+  }
+}
+
+function initRain() {
+  if (rainMesh) scene.remove(rainMesh);
+  const RC = 1500;
+  const rPos = new Float32Array(RC * 3);
+  for (let i = 0; i < RC; i++) {
+    rPos[i*3]   = (Math.random() - 0.5) * 50;
+    rPos[i*3+1] = Math.random() * 20;
+    rPos[i*3+2] = (Math.random() - 0.5) * 40 - 5;
+  }
+  rainGeo = new THREE.BufferGeometry();
+  rainGeo.setAttribute('position', new THREE.BufferAttribute(rPos, 3));
+  rainMat = new THREE.PointsMaterial({ color: 0x88aaff, size: 0.06, transparent: true, opacity: 0.5 });
+  rainMesh = new THREE.Points(rainGeo, rainMat);
+  scene.add(rainMesh);
+  // Increase fog for rain atmosphere
+  const biome = BIOMES[currentBiomeIdx];
+  scene.fog = new THREE.FogExp2(biome.fogColor, biome.fogDensity * 2.5);
+}
+
+function updateRain() {
+  if (!rainEnabled || !rainMesh) return;
+  const pos = rainGeo.attributes.position;
+  for (let i = 0; i < 1500; i++) {
+    pos.array[i*3+1] -= 0.18; // fall down
+    pos.array[i*3]   -= 0.03; // slight wind
+    if (pos.array[i*3+1] < 0) {
+      pos.array[i*3+1] = 20;
+      pos.array[i*3]   = (Math.random() - 0.5) * 50;
+    }
+  }
+  pos.needsUpdate = true;
+}
+
+let t = 0, camTheta = 0;
+canvas.addEventListener('mousedown', e => { _drag = true; _px = e.clientX; });
+window.addEventListener('mouseup', () => { _drag = false; });
+let _drag = false, _px = 0;
+window.addEventListener('mousemove', e => {
+  if (!_drag) return;
+  camTheta -= (e.clientX - _px) * 0.005;
+  _px = e.clientX;
+});
+
+function animate() {
+  requestAnimationFrame(animate);
+  t += 0.008;
+  if (!_drag) camTheta += 0.002;
+  camera.position.x = 22 * Math.sin(camTheta);
+  camera.position.z = 22 * Math.cos(camTheta);
+  camera.lookAt(0, 1, 0);
+
+  // Animate particles
+  const pos = pgeo.attributes.position;
+  for (let i = 0; i < PC; i++) {
+    pos.array[i*3+1] += Math.sin(t*1.5 + pPhase[i]) * 0.003;
+    pos.array[i*3]   += Math.cos(t + pPhase[i]*0.7) * 0.002;
+  }
+  pos.needsUpdate = true;
+  pmat.opacity = 0.35 + Math.sin(t*2)*0.15;
+
+  // Animate orbs
+  orbMeshes.forEach(orb => {
+    orb.position.y += Math.sin(t*1.5 + orb.userData.phase) * 0.005;
+    orb.material.emissiveIntensity = 0.4 + Math.sin(t*2 + orb.userData.phase)*0.25;
+    // Animate orbit path
+    if (orb.userData.orbit) {
+      orb.userData.orbit.t = (orb.userData.orbit.t || 0) + 0.003;
+      const ot = orb.userData.orbit.t;
+      orb.position.x = orb.userData.orbit.cx + Math.cos(ot) * orb.userData.orbit.r;
+      orb.position.z = orb.userData.orbit.cz + Math.sin(ot) * orb.userData.orbit.r;
+    }
+  });
+
+  updateRain();
+  renderer.render(scene, camera);
+}
+animate();
+
+/* ══════════════════════════════════════════════════════════════════════════
+   Boot
+   ══════════════════════════════════════════════════════════════════════════ */
+function toggleSidebar() {
+  document.getElementById('app').classList.toggle('sb-collapsed');
+  localStorage.setItem('ls_sb_collapsed', document.getElementById('app').classList.contains('sb-collapsed') ? '1' : '0');
+  lucide.createIcons();
+  setTimeout(resize, 300);
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   Ambient Sound Engine (Web Audio API synthesis — no files needed)
+   ══════════════════════════════════════════════════════════════════════════ */
+let audioCtx = null;
+let soundEnabled = false;
+let activeNodes = [];
+
+// Biome sound profiles: { wind, waterFreq, birdRate, frogRate, insectFreq }
+const SOUND_PROFILES = {
+  forest:  { windFreq: 300, windGain: 0.06, birdRate: 2.5, waterFreq: 0,    frogRate: 0,   insectFreq: 0    },
+  conifer: { windFreq: 200, windGain: 0.09, birdRate: 1.0, waterFreq: 0,    frogRate: 0,   insectFreq: 0    },
+  wetland: { windFreq: 400, windGain: 0.04, birdRate: 0.5, waterFreq: 800,  frogRate: 0.8, insectFreq: 4000 },
+  river:   { windFreq: 500, windGain: 0.03, birdRate: 1.5, waterFreq: 1200, frogRate: 0,   insectFreq: 0    },
+  meadow:  { windFreq: 600, windGain: 0.05, birdRate: 3.0, waterFreq: 0,    frogRate: 0,   insectFreq: 2800 },
+};
+
+function ensureAudio() {
+  if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+  if (audioCtx.state === 'suspended') audioCtx.resume();
+}
+
+function stopAllSound() {
+  activeNodes.forEach(n => { try { n.stop?.(); n.disconnect?.(); } catch {} });
+  activeNodes = [];
+}
+
+function makeNoise(ctx) {
+  const bufSize = ctx.sampleRate * 2;
+  const buf = ctx.createBuffer(1, bufSize, ctx.sampleRate);
+  const data = buf.getChannelData(0);
+  for (let i = 0; i < bufSize; i++) data[i] = Math.random() * 2 - 1;
+  const src = ctx.createBufferSource();
+  src.buffer = buf;
+  src.loop = true;
+  return src;
+}
+
+function playBiomeSound(biomeType) {
+  if (!soundEnabled) return;
+  ensureAudio();
+  stopAllSound();
+  const ctx  = audioCtx;
+  const prof = SOUND_PROFILES[biomeType] || SOUND_PROFILES.forest;
+
+  // Wind: filtered white noise
+  if (prof.windGain > 0) {
+    const noise  = makeNoise(ctx);
+    const filter = ctx.createBiquadFilter();
+    filter.type = 'bandpass';
+    filter.frequency.value = prof.windFreq;
+    filter.Q.value = 0.5;
+    const gain = ctx.createGain();
+    gain.gain.value = prof.windGain;
+    // slow LFO on gain for natural breathing
+    const lfo = ctx.createOscillator();
+    lfo.frequency.value = 0.15;
+    const lfoGain = ctx.createGain();
+    lfoGain.gain.value = prof.windGain * 0.4;
+    lfo.connect(lfoGain);
+    lfoGain.connect(gain.gain);
+    noise.connect(filter); filter.connect(gain); gain.connect(ctx.destination);
+    noise.start(); lfo.start();
+    activeNodes.push(noise, lfo);
+  }
+
+  // Water: higher-pitched filtered noise
+  if (prof.waterFreq > 0) {
+    const noise  = makeNoise(ctx);
+    const filter = ctx.createBiquadFilter();
+    filter.type = 'highpass';
+    filter.frequency.value = prof.waterFreq;
+    const gain = ctx.createGain();
+    gain.gain.value = 0.07;
+    noise.connect(filter); filter.connect(gain); gain.connect(ctx.destination);
+    noise.start();
+    activeNodes.push(noise);
+  }
+
+  // Insects: high-pitched drone
+  if (prof.insectFreq > 0) {
+    const osc = ctx.createOscillator();
+    osc.type = 'sawtooth';
+    osc.frequency.value = prof.insectFreq;
+    const filter = ctx.createBiquadFilter();
+    filter.type = 'lowpass';
+    filter.frequency.value = prof.insectFreq + 200;
+    const gain = ctx.createGain();
+    gain.gain.value = 0.02;
+    osc.connect(filter); filter.connect(gain); gain.connect(ctx.destination);
+    osc.start();
+    activeNodes.push(osc);
+  }
+
+  // Birds: periodic chirps
+  if (prof.birdRate > 0) {
+    function chirp() {
+      if (!soundEnabled) return;
+      const t = ctx.currentTime;
+      const freq  = 1800 + Math.random() * 1200;
+      const osc   = ctx.createOscillator();
+      osc.type = 'sine';
+      osc.frequency.setValueAtTime(freq, t);
+      osc.frequency.linearRampToValueAtTime(freq * 1.3, t + 0.05);
+      osc.frequency.linearRampToValueAtTime(freq,       t + 0.1);
+      const env = ctx.createGain();
+      env.gain.setValueAtTime(0, t);
+      env.gain.linearRampToValueAtTime(0.08, t + 0.02);
+      env.gain.linearRampToValueAtTime(0,    t + 0.12);
+      osc.connect(env); env.connect(ctx.destination);
+      osc.start(t); osc.stop(t + 0.15);
+      const next = (1 / prof.birdRate) + Math.random() * 2;
+      setTimeout(chirp, next * 1000);
+    }
+    setTimeout(chirp, 500 + Math.random() * 2000);
+  }
+
+  // Frogs: low pulse
+  if (prof.frogRate > 0) {
+    function croak() {
+      if (!soundEnabled) return;
+      const t = ctx.currentTime;
+      const osc = ctx.createOscillator();
+      osc.type = 'square';
+      osc.frequency.value = 180 + Math.random() * 40;
+      const env = ctx.createGain();
+      env.gain.setValueAtTime(0, t);
+      env.gain.linearRampToValueAtTime(0.06, t + 0.03);
+      env.gain.linearRampToValueAtTime(0,    t + 0.2);
+      osc.connect(env); env.connect(ctx.destination);
+      osc.start(t); osc.stop(t + 0.25);
+      const next = (1 / prof.frogRate) + Math.random() * 1.5;
+      setTimeout(croak, next * 1000);
+    }
+    setTimeout(croak, Math.random() * 1500);
+  }
+}
+
+function toggleSound() {
+  ensureAudio();
+  soundEnabled = !soundEnabled;
+  const btn = document.getElementById('sound-btn');
+  if (soundEnabled) {
+    btn.innerHTML = '<svg class="ic" viewBox="0 0 24 24"><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.14M15.54 8.46a5 5 0 0 1 0 7.07"/></svg> Звук';
+    btn.style.borderColor = 'var(--rb-accent)';
+    btn.style.color = 'var(--rb-accent)';
+    const biome = BIOMES[currentBiomeIdx];
+    playBiomeSound(biome.type);
+  } else {
+    btn.innerHTML = '<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> Звук';
+    btn.style.borderColor = 'var(--rb-border)';
+    btn.style.color = 'var(--rb-muted)';
+    stopAllSound();
+  }
+}
+
+async function init() {
+  LS.hideDisabledFeatures?.();
+  lucide.createIcons();
+  if (localStorage.getItem('ls_sb_collapsed') === '1') document.getElementById('app').classList.add('sb-collapsed');
+  const user = LS.getUser?.();
+  if (user) {
+    document.getElementById('nav-user').textContent  = user.name?.split(' ')[0] || '—';
+    document.getElementById('nav-avatar').textContent = (user.name||'LS').split(' ').slice(0,2).map(w=>w[0]?.toUpperCase()||'').join('')||'LS';
+  }
+  habitats = await LS.get('/api/red-book/habitats').catch(() => []);
+  renderTabs();
+  selectBiome(0);
+}
+init();
+</script>
+<script src="/js/mobile.js"></script>
+</body>
+</html>
diff --git a/frontend/red-book-ecosystem.html b/frontend/red-book-ecosystem.html
new file mode 100644
index 0000000..28eaf92
--- /dev/null
+++ b/frontend/red-book-ecosystem.html
@@ -0,0 +1,807 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Экосистемы — Красная книга РБ</title>
+  <link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@400;700;900&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet"/>
+  <link rel="stylesheet" href="/css/ls.css"/>
+  <style>
+    :root {
+      --rb-bg: #0a1a0d; --rb-surface: #111d13; --rb-border: #1e3523;
+      --rb-cr: #ef4444; --rb-en: #f97316; --rb-vu: #eab308; --rb-nt: #22c55e; --rb-lc: #3b82f6;
+      --rb-accent: #4ade80; --rb-text: #e2f5e8; --rb-muted: #6b9a74;
+    }
+    body { background: var(--rb-bg); color: var(--rb-text); font-family: 'Manrope', sans-serif; margin: 0; }
+    .app-layout { background: var(--rb-bg); }
+    /* ── RB Sidebar ─────────────────────────────────────────────────────── */
+    .app-layout > .sidebar { background: var(--rb-surface) !important; border-right: 1px solid var(--rb-border) !important; }
+    .sb-brand { border-bottom: 1px solid var(--rb-border); padding: 16px 12px 12px; }
+    .sb-link, a.sb-link, button.sb-link { color: var(--rb-muted) !important; }
+    .sb-link:hover { background: rgba(74,222,128,.08) !important; color: var(--rb-text) !important; }
+    .sb-link.active { background: rgba(74,222,128,.14) !important; color: var(--rb-accent) !important; font-weight: 700; }
+    .sb-link.active::before { background: var(--rb-accent) !important; }
+    .sb-toggle { color: var(--rb-muted) !important; border-color: var(--rb-border) !important; background: transparent !important; }
+    .sb-toggle:hover { background: rgba(74,222,128,.12) !important; color: var(--rb-accent) !important; border-color: var(--rb-accent) !important; }
+    .nav-user-chip { border-color: var(--rb-border) !important; }
+    .nav-user-chip:hover { background: rgba(74,222,128,.08) !important; }
+    .nav-avatar { background: linear-gradient(135deg, #166534, #15803d) !important; }
+    .nav-user-name { color: var(--rb-muted) !important; }
+    .rb-brand-link { display: flex; align-items: center; gap: 9px; text-decoration: none; flex: 1; min-width: 0; overflow: hidden; }
+    .rb-brand-icon { font-size: 24px; line-height: 1; flex-shrink: 0; }
+    .rb-brand-text { font-family: 'Unbounded', sans-serif; font-size: 10px; font-weight: 700; color: var(--rb-accent); line-height: 1.4; white-space: nowrap; }
+    .rb-sb-section { font-size: 9px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--rb-muted); padding: 14px 12px 4px; margin: 0; opacity: 0.55; }
+    .app-layout.sb-collapsed .rb-sb-section { display: none; }
+    .rb-sb-divider { border: none; border-top: 1px solid var(--rb-border); margin: 8px 4px; }
+    .rb-back-link { opacity: 0.65; font-size: 0.82rem !important; }
+    .rb-back-link:hover { opacity: 1 !important; }
+
+    .eco-main { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
+
+    /* Top bar */
+    .eco-topbar {
+      display: flex; align-items: center; gap: 16px;
+      padding: 14px 24px; border-bottom: 1px solid var(--rb-border);
+      background: var(--rb-surface); flex-shrink: 0;
+    }
+    .eco-topbar h1 { font-family: 'Unbounded', sans-serif; font-size: 16px; font-weight: 700; margin: 0; }
+    .eco-back {
+      display: flex; align-items: center; gap: 6px;
+      color: var(--rb-muted); font-size: 13px; text-decoration: none;
+      background: transparent; border: 1px solid var(--rb-border); padding: 6px 14px;
+      border-radius: 8px; cursor: pointer; transition: all .15s;
+    }
+    .eco-back:hover { color: var(--rb-accent); border-color: var(--rb-accent); }
+
+    /* Body: canvas + panel */
+    .eco-body { flex: 1; display: flex; overflow: hidden; min-width: 0; }
+    #eco-canvas { flex: 1; display: block; min-width: 0; width: 0; }
+
+    /* Side panel */
+    .eco-panel {
+      width: 260px; flex-shrink: 0; background: var(--rb-surface);
+      border-left: 1px solid var(--rb-border); overflow-y: auto;
+      display: flex; flex-direction: column; max-height: 100%;
+    }
+    .panel-section { padding: 18px; border-bottom: 1px solid var(--rb-border); }
+    .panel-section h3 { font-size: 12px; font-weight: 700; text-transform: uppercase;
+      letter-spacing: 1px; color: var(--rb-muted); margin: 0 0 12px; }
+
+    /* Simulation controls */
+    .sim-slider-wrap { margin-bottom: 12px; }
+    .sim-slider-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--rb-muted); margin-bottom: 4px; }
+    .sim-slider { width: 100%; accent-color: var(--rb-cr); cursor: pointer; }
+    .btn-simulate {
+      width: 100%; background: var(--rb-accent); color: #0a1a0d;
+      font-weight: 700; font-size: 13px; padding: 10px;
+      border: none; border-radius: 10px; cursor: pointer; transition: all .2s;
+    }
+    .btn-simulate:hover { filter: brightness(1.1); }
+    .btn-simulate.running { background: var(--rb-cr); color: #fff; }
+    .btn-reset {
+      width: 100%; margin-top: 8px; background: transparent;
+      border: 1px solid var(--rb-border); color: var(--rb-muted);
+      font-size: 12px; padding: 8px; border-radius: 8px; cursor: pointer;
+    }
+    .btn-reset:hover { border-color: var(--rb-muted); color: var(--rb-text); }
+
+    /* Scenario chips */
+    .scenario-list { display: flex; flex-direction: column; gap: 6px; }
+    .scenario-chip {
+      padding: 10px 12px; background: rgba(255,255,255,.04);
+      border: 1px solid var(--rb-border); border-radius: 8px;
+      cursor: pointer; font-size: 12px; transition: all .15s;
+    }
+    .scenario-chip:hover { border-color: var(--rb-accent); color: var(--rb-accent); }
+    .scenario-chip.active { border-color: var(--rb-accent); background: rgba(74,222,128,.1); color: var(--rb-accent); }
+    .scenario-chip strong { display: block; margin-bottom: 2px; font-size: 13px; }
+
+    /* Info card */
+    .node-info {
+      padding: 16px 18px; background: rgba(74,222,128,.05);
+      border-bottom: 1px solid var(--rb-border);
+    }
+    .node-info-name { font-weight: 700; font-size: 15px; color: #fff; margin-bottom: 4px; }
+    .node-info-lat  { font-style: italic; font-size: 11px; color: var(--rb-muted); margin-bottom: 8px; }
+    .node-info-stat { font-size: 12px; color: var(--rb-muted); }
+
+    /* Legend */
+    .legend { display: flex; flex-wrap: wrap; gap: 8px; }
+    .legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--rb-muted); }
+    .legend-circle { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
+
+    /* Result box */
+    .sim-result {
+      padding: 14px 18px; background: rgba(239,68,68,.08);
+      border-bottom: 1px solid var(--rb-border); font-size: 12px; color: #fca5a5;
+      display: none; line-height: 1.6;
+    }
+    .sim-result.show { display: block; }
+    .sim-result strong { display: block; color: var(--rb-cr); margin-bottom: 6px; font-size: 13px; }
+
+    /* ── Mobile ── */
+    @media (max-width: 768px) {
+      main.sb-content { overflow: auto; width: 100% !important; flex: 1; }
+      .eco-layout { flex-direction: column !important; }
+      .eco-sidebar { width: 100% !important; max-height: 45vh; border-right: none !important; border-bottom: 1px solid var(--rb-border); overflow-y: auto; }
+      .eco-canvas { min-height: 55vw; }
+      .scenario-chips { flex-wrap: wrap; }
+    }
+    @media (max-width: 480px) {
+      .eco-canvas { min-height: 260px; }
+      .scenario-chip { font-size: 11px; padding: 6px 10px; }
+    }
+  </style>
+</head>
+<body>
+<div class="app-layout" id="app">
+  <!-- Red Book sidebar -->
+  <nav class="sidebar">
+    <div class="sb-brand">
+      <a href="/red-book.html" class="rb-brand-link">
+        <span class="rb-brand-icon"><svg class="ic" viewBox="0 0 24 24"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z"/><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"/></svg></span>
+        <span class="sb-lbl rb-brand-text">Красная<br>книга РБ</span>
+      </a>
+      <button class="sb-toggle" onclick="toggleSidebar()"><i data-lucide="panel-left-close"></i></button>
+    </div>
+    <nav class="sb-nav">
+      <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="/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 active"><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>
+      <a href="/red-book-games.html"    class="sb-link"><i data-lucide="gamepad-2"        class="sb-icon"></i><span class="sb-lbl">Игры</span></a>
+      <hr class="rb-sb-divider">
+      <a href="/dashboard.html" class="sb-link rb-back-link"><i data-lucide="chevron-left" class="sb-icon"></i><span class="sb-lbl">Назад</span></a>
+      <a href="/profile.html"   class="sb-link"><i data-lucide="user"                     class="sb-icon"></i><span class="sb-lbl">Профиль</span></a>
+    </nav>
+    <div class="sb-footer">
+      <div class="nav-user-chip" onclick="location.href='/profile.html'">
+        <div class="nav-avatar" id="nav-avatar">LS</div>
+        <span class="nav-user-name" id="nav-user">—</span>
+      </div>
+    </div>
+  </nav>
+
+  <main class="sb-content" style="overflow:hidden; padding:0; min-width:0; width:0; flex:1;">
+    <div class="eco-main" style="width:100%;">
+
+      <!-- Topbar -->
+      <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>
+        <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>
+        <button onclick="saveSnapshot()" 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"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg> Снимок</button>
+      </div>
+
+      <!-- Body -->
+      <div class="eco-body">
+        <canvas id="eco-canvas"></canvas>
+
+        <div class="eco-panel">
+          <!-- Selected node info -->
+          <div class="node-info" id="node-info" style="display:none">
+            <div class="node-info-name" id="ni-name"></div>
+            <div class="node-info-lat"  id="ni-lat"></div>
+            <div class="node-info-stat" id="ni-stat"></div>
+          </div>
+
+          <!-- Simulation result -->
+          <div class="sim-result" id="sim-result">
+            <strong><svg class="ic" viewBox="0 0 24 24"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg> Результат симуляции</strong>
+            <span id="sim-result-text"></span>
+          </div>
+
+          <!-- Simulation -->
+          <div class="panel-section">
+            <h3>Симулятор воздействия</h3>
+            <div class="sim-slider-wrap" id="slider-wrap" style="display:none">
+              <div class="sim-slider-label">
+                <span id="slider-label">Браконьерство</span>
+                <span id="slider-val">0%</span>
+              </div>
+              <input type="range" class="sim-slider" id="pressure-slider" min="0" max="100" value="0"
+                oninput="updateSlider(this.value)"/>
+            </div>
+            <button class="btn-simulate" id="btn-simulate" onclick="runSimulation()"><svg class="ic" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg> Запустить симуляцию</button>
+            <button class="btn-reset" onclick="resetSimulation()"><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> Сбросить</button>
+          </div>
+
+          <!-- Scenarios -->
+          <div class="panel-section">
+            <h3>Сценарии</h3>
+            <div class="scenario-list">
+              <div class="scenario-chip" onclick="applyScenario('wolf', this)">
+                <strong>Исчезновение рыси</strong>Что если хищник исчезнет?
+              </div>
+              <div class="scenario-chip" onclick="applyScenario('wetland', this)">
+                <strong>Осушение болот</strong>Потеря 70% болотных видов
+              </div>
+              <div class="scenario-chip" onclick="applyScenario('poaching', this)">
+                <strong>Браконьерство</strong>Давление на крупных млекопитающих
+              </div>
+              <div class="scenario-chip" onclick="applyScenario('restore', this)">
+                <strong>Восстановление бобра</strong>Положительный эффект
+              </div>
+            </div>
+          </div>
+
+          <!-- Legend -->
+          <div class="panel-section">
+            <h3>Легенда</h3>
+            <div class="legend">
+              <div class="legend-item"><div class="legend-circle" style="background:var(--rb-cr)"></div>CR</div>
+              <div class="legend-item"><div class="legend-circle" style="background:var(--rb-en)"></div>EN</div>
+              <div class="legend-item"><div class="legend-circle" style="background:var(--rb-vu)"></div>VU</div>
+              <div class="legend-item"><div class="legend-circle" style="background:var(--rb-nt)"></div>NT</div>
+              <div class="legend-item"><div class="legend-circle" style="background:var(--rb-lc)"></div>LC</div>
+            </div>
+            <p style="font-size:11px;color:var(--rb-muted);margin-top:10px;">
+              Размер узла = биомасса. Стрелки = «хищник <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> жертва».<br>
+              Нажмите на узел для выбора.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/three@0.149.0/build/three.min.js"></script>
+<script src="/js/api.js"></script>
+<script>
+/* ══════════════════════════════════════════════════════════════════════════
+   State & constants
+   ══════════════════════════════════════════════════════════════════════════ */
+const CAT_COLOR = { CR: 0xef4444, EN: 0xf97316, VU: 0xeab308, NT: 0x22c55e, LC: 0x3b82f6 };
+const CAT_HEX   = { CR: '#ef4444', EN: '#f97316', VU: '#eab308', NT: '#22c55e', LC: '#3b82f6' };
+
+let graph = { nodes: [], links: [] };
+let nodeObjects = {};
+let lineObjects = [];
+let selectedNode = null;
+let simRunning   = false;
+let originalScales = {};
+
+/* ══════════════════════════════════════════════════════════════════════════
+   Three.js setup
+   ══════════════════════════════════════════════════════════════════════════ */
+const canvas = document.getElementById('eco-canvas');
+const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: false });
+renderer.setClearColor(0x0a1a0d);
+renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
+
+const scene  = new THREE.Scene();
+scene.fog    = new THREE.FogExp2(0x071209, 0.012);
+
+const camera = new THREE.PerspectiveCamera(50, 1, 0.1, 500);
+camera.position.set(0, 0, 80);
+
+// Resize
+function resize() {
+  const w = canvas.parentElement.clientWidth, h = canvas.parentElement.clientHeight;
+  renderer.setSize(w, h, false);
+  camera.aspect = w / h;
+  camera.updateProjectionMatrix();
+}
+window.addEventListener('resize', resize);
+resize();
+
+// Lights
+scene.add(new THREE.AmbientLight(0xffffff, 0.6));
+const dir = new THREE.DirectionalLight(0x88ffcc, 1);
+dir.position.set(10, 20, 10);
+scene.add(dir);
+
+// Mouse for orbit + click
+let isDragging = false, prevMouse = { x: 0, y: 0 }, mouseDownPos = { x: 0, y: 0 };
+let cameraTheta = 0, cameraPhi = 0, cameraRadius = 80;
+canvas.addEventListener('mousedown', e => {
+  isDragging = true;
+  prevMouse = mouseDownPos = { x: e.clientX, y: e.clientY };
+});
+window.addEventListener('mouseup', () => { isDragging = false; });
+window.addEventListener('mousemove', e => {
+  if (!isDragging) return;
+  const dx = e.clientX - prevMouse.x, dy = e.clientY - prevMouse.y;
+  cameraTheta -= dx * 0.005;
+  cameraPhi    = Math.max(-1.2, Math.min(1.2, cameraPhi - dy * 0.005));
+  prevMouse = { x: e.clientX, y: e.clientY };
+  updateCamera();
+});
+canvas.addEventListener('wheel', e => {
+  cameraRadius = Math.max(20, Math.min(200, cameraRadius + e.deltaY * 0.05));
+  updateCamera();
+}, { passive: true });
+function updateCamera() {
+  camera.position.set(
+    cameraRadius * Math.sin(cameraTheta) * Math.cos(cameraPhi),
+    cameraRadius * Math.sin(cameraPhi),
+    cameraRadius * Math.cos(cameraTheta) * Math.cos(cameraPhi)
+  );
+  camera.lookAt(0, 0, 0);
+}
+
+// Raycaster for node click
+const raycaster = new THREE.Raycaster();
+raycaster.params.Points.threshold = 1;
+const mouse2d   = new THREE.Vector2();
+canvas.addEventListener('click', e => {
+  // Ignore if user dragged (orbiting), not a true click
+  const ddx = e.clientX - mouseDownPos.x, ddy = e.clientY - mouseDownPos.y;
+  if (Math.sqrt(ddx * ddx + ddy * ddy) > 6) return;
+
+  const rect = canvas.getBoundingClientRect();
+  mouse2d.x  = ((e.clientX - rect.left) / rect.width)  * 2 - 1;
+  mouse2d.y  = -((e.clientY - rect.top)  / rect.height) * 2 + 1;
+  raycaster.setFromCamera(mouse2d, camera);
+  const meshes = Object.values(nodeObjects).map(n => n.mesh);
+  const hits = raycaster.intersectObjects(meshes);
+  if (hits.length) {
+    selectNode(hits[0].object.userData.id);
+  } else {
+    deselectNode();
+  }
+});
+
+/* ══════════════════════════════════════════════════════════════════════════
+   Load graph data
+   ══════════════════════════════════════════════════════════════════════════ */
+async function loadGraph() {
+  const data = await LS.get('/api/red-book/food-web').catch(() => ({ nodes: [], links: [] }));
+  graph = data;
+  document.getElementById('node-count').textContent = `${graph.nodes.length} видов · ${graph.links.length} связей`;
+  buildGraph();
+}
+
+function buildGraph() {
+  // Clear old
+  Object.values(nodeObjects).forEach(n => scene.remove(n.mesh, n.label));
+  lineObjects.forEach(l => scene.remove(l));
+  nodeObjects = {};
+  lineObjects  = [];
+
+  // Layout: force-directed simulation (simplified 2D projected to 3D sphere)
+  const N = graph.nodes.length;
+  const positions = {};
+
+  // Biome cluster centers (staggered on sphere surface)
+  const BIOME_CENTERS = {
+    forest:  new THREE.Vector3(25, 10, 10),
+    conifer: new THREE.Vector3(-25, 10, 10),
+    wetland: new THREE.Vector3(0, -25, 10),
+    river:   new THREE.Vector3(10, 10, -25),
+    meadow:  new THREE.Vector3(-10, -10, 25),
+  };
+
+  // Initialise near biome cluster centers
+  graph.nodes.forEach((node, i) => {
+    const center = BIOME_CENTERS[node.habitat_type] || null;
+    if (center) {
+      positions[node.id] = center.clone().add(new THREE.Vector3(
+        (Math.random() - 0.5) * 12,
+        (Math.random() - 0.5) * 12,
+        (Math.random() - 0.5) * 12,
+      ));
+    } else {
+      const theta = (i / N) * Math.PI * 2;
+      const phi   = (Math.random() - 0.5) * Math.PI;
+      const r     = 30;
+      positions[node.id] = new THREE.Vector3(
+        r * Math.cos(theta) * Math.cos(phi),
+        r * Math.sin(phi),
+        r * Math.sin(theta) * Math.cos(phi)
+      );
+    }
+  });
+
+  // Simple force iterations
+  for (let iter = 0; iter < 80; iter++) {
+    // Repulsion
+    for (let i = 0; i < graph.nodes.length; i++) {
+      for (let j = i + 1; j < graph.nodes.length; j++) {
+        const a = graph.nodes[i], b = graph.nodes[j];
+        const diff = positions[a.id].clone().sub(positions[b.id]);
+        const dist = Math.max(diff.length(), 0.1);
+        const force = diff.normalize().multiplyScalar(200 / (dist * dist));
+        positions[a.id].add(force);
+        positions[b.id].sub(force);
+      }
+    }
+    // Attraction along links
+    graph.links.forEach(link => {
+      const a = positions[link.source], b = positions[link.target];
+      if (!a || !b) return;
+      const diff  = b.clone().sub(a);
+      const dist  = diff.length();
+      const force = diff.normalize().multiplyScalar((dist - 15) * 0.05 * (link.strength || 0.5));
+      a.add(force);
+      b.sub(force);
+    });
+    // Biome cluster attraction (gentle)
+    graph.nodes.forEach(node => {
+      const center = BIOME_CENTERS[node.habitat_type];
+      if (!center) return;
+      const p    = positions[node.id];
+      const diff = center.clone().sub(p);
+      p.add(diff.multiplyScalar(0.02));
+    });
+    // Damping toward sphere
+    graph.nodes.forEach(node => {
+      const p = positions[node.id];
+      const len = p.length();
+      if (len > 0) p.multiplyScalar(30 / len * 0.05 + 0.95);
+    });
+  }
+
+  // Create meshes
+  graph.nodes.forEach(node => {
+    const radius = Math.max(0.6, Math.min(3, 0.5 + Math.log(1 + (node.biomass_kg || 1)) * 0.3));
+    const color  = CAT_COLOR[node.category] || 0x22c55e;
+    const geo    = new THREE.SphereGeometry(radius, 16, 16);
+    const mat    = new THREE.MeshStandardMaterial({ color, roughness: 0.3, metalness: 0.2, emissive: color, emissiveIntensity: 0.2 });
+    const mesh   = new THREE.Mesh(geo, mat);
+    mesh.position.copy(positions[node.id]);
+    mesh.userData  = { id: node.id, node };
+    scene.add(mesh);
+    nodeObjects[node.id] = { mesh, radius, origColor: color };
+    originalScales[node.id] = 1;
+  });
+
+  // Create arrow lines
+  graph.links.forEach(link => {
+    const a = positions[link.source], b = positions[link.target];
+    if (!a || !b) return;
+    const pts = [a, b];
+    const geo = new THREE.BufferGeometry().setFromPoints(pts);
+    const mat = new THREE.LineBasicMaterial({ color: 0x2d5238, transparent: true, opacity: 0.5 });
+    const line = new THREE.Line(geo, mat);
+    line.userData = { source: link.source, target: link.target };
+    scene.add(line);
+    lineObjects.push(line);
+  });
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   Select node
+   ══════════════════════════════════════════════════════════════════════════ */
+function selectNode(id) {
+  selectedNode = id;
+  const node = graph.nodes.find(n => n.id === id);
+  if (!node) return;
+
+  // Highlight connected links
+  lineObjects.forEach(l => {
+    const connected = l.userData.source === id || l.userData.target === id;
+    l.material.opacity = connected ? 0.9 : 0.2;
+    l.material.color.setHex(connected ? 0x4ade80 : 0x2d5238);
+  });
+
+  // Show info panel
+  const preys   = graph.links.filter(l => l.source === id).map(l => graph.nodes.find(n => n.id === l.target)?.name_ru).filter(Boolean);
+  const predators = graph.links.filter(l => l.target === id).map(l => graph.nodes.find(n => n.id === l.source)?.name_ru).filter(Boolean);
+  document.getElementById('node-info').style.display = 'block';
+  document.getElementById('ni-name').innerHTML = `${node.icon || '<svg class="ic" viewBox="0 0 24 24"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z"/><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"/></svg>'} ${node.name_ru}`;
+  document.getElementById('ni-lat').textContent  = node.name_lat || '';
+  document.getElementById('ni-stat').innerHTML   =
+    `<span style="color:${CAT_HEX[node.category]||'#22c55e'};font-weight:700">${node.category}</span>` +
+    (node.description ? `<br><span style="color:#a8d5b0;font-size:11px;line-height:1.5">${node.description.slice(0, 100)}…</span>` : '') +
+    (preys.length    ? `<br><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="currentColor" stroke="none"/></svg> Охотится: ${preys.slice(0,3).join(', ')}` : '') +
+    (predators.length? `<br><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="currentColor" stroke="none"/></svg> Хищники: ${predators.slice(0,3).join(', ')}` : '');
+
+  // Show slider
+  document.getElementById('slider-wrap').style.display = 'block';
+  document.getElementById('slider-label').textContent = `Давление на «${node.name_ru.split(' ')[0]}»`;
+}
+
+function deselectNode() {
+  selectedNode = null;
+  lineObjects.forEach(l => { l.material.opacity = 0.5; l.material.color.setHex(0x2d5238); });
+  document.getElementById('node-info').style.display = 'none';
+  document.getElementById('slider-wrap').style.display = 'none';
+}
+
+function updateSlider(v) {
+  document.getElementById('slider-val').textContent = v + '%';
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   Lotka-Volterra multi-step simulation
+   ══════════════════════════════════════════════════════════════════════════ */
+let growMode = false; // true = restore scenario (population grows)
+
+function runLotkaVolterra(startId, pressure, grow) {
+  // Population vector: each species starts at 1.0
+  const pop = {};
+  graph.nodes.forEach(n => pop[n.id] = 1.0);
+
+  // Apply initial perturbation
+  pop[startId] = grow ? 1.0 + pressure * 0.8 : Math.max(0.05, 1.0 - pressure * 0.85);
+
+  // Build adjacency: links are predator -> prey
+  // predators[id] = [{ id, strength }], prey[id] = [{ id, strength }]
+  const predators = {}, preys = {};
+  graph.nodes.forEach(n => { predators[n.id] = []; preys[n.id] = []; });
+  graph.links.forEach(l => {
+    preys[l.source].push({ id: l.target, s: l.strength || 0.5 });
+    predators[l.target].push({ id: l.source, s: l.strength || 0.5 });
+  });
+
+  // Iterate simplified LV equations: dp/dt = p * (gain - loss)
+  const dt = 0.15;
+  const STEPS = 25;
+  for (let step = 0; step < STEPS; step++) {
+    const delta = {};
+    graph.nodes.forEach(n => {
+      if (n.id === startId) return; // fixed
+      // gain = from prey being available (predator perspective)
+      // loss = from predators eating you
+      let gain = 0, loss = 0;
+      preys[n.id].forEach(({ id: pid, s }) => { gain += s * pop[pid] * 0.3; });
+      predators[n.id].forEach(({ id: hid, s }) => { loss += s * pop[hid] * 0.4; });
+      // natural return force toward 1.0
+      const returnForce = (1.0 - pop[n.id]) * 0.15;
+      delta[n.id] = pop[n.id] * (gain - loss) * dt + returnForce * dt;
+    });
+    graph.nodes.forEach(n => {
+      if (n.id !== startId) {
+        pop[n.id] = Math.max(0.05, Math.min(3.0, pop[n.id] + (delta[n.id] || 0)));
+      }
+    });
+  }
+  return pop;
+}
+
+function runSimulation() {
+  if (!selectedNode) { LS.toast('Выберите вид на графе для симуляции', 'warn'); return; }
+  simRunning = true;
+  const pressure = parseInt(document.getElementById('pressure-slider').value) / 100;
+  if (pressure === 0) {
+    LS.toast('Установите ненулевое давление на слайдере', 'warn');
+    simRunning = false;
+    return;
+  }
+  const btn = document.getElementById('btn-simulate');
+  btn.className = 'btn-simulate running';
+  btn.innerHTML = '<svg class="ic" viewBox="0 0 24 24"><path d="M5 22h14M5 2h14M17 22v-4.17a2 2 0 0 0-.59-1.41L12 12l-4.41 4.42A2 2 0 0 0 7 17.83V22M7 2v4.17a2 2 0 0 0 .59 1.41L12 12l4.41-4.42A2 2 0 0 0 17 6.17V2"/></svg> Симуляция...';
+
+  // Run Lotka-Volterra simulation
+  const lvPop = runLotkaVolterra(selectedNode, pressure, growMode);
+
+  // Apply direct effect instantly
+  const selObj = nodeObjects[selectedNode];
+  if (selObj) {
+    const targetScale = growMode ? 1 + pressure * 0.8 : Math.max(0.1, 1 - pressure * 0.85);
+    animateScale(selectedNode, targetScale, 600);
+    selObj.mesh.material.emissiveIntensity = 0.7;
+    selObj.mesh.material.emissive.setHex(growMode ? 0x4ade80 : 0xef4444);
+  }
+
+  // Animate all other nodes with LV results (staggered)
+  const sorted = graph.nodes
+    .filter(n => n.id !== selectedNode)
+    .sort((a, b) => Math.abs(lvPop[b.id] - 1) - Math.abs(lvPop[a.id] - 1));
+
+  sorted.forEach((n, i) => {
+    setTimeout(() => {
+      const pop   = lvPop[n.id];
+      const obj   = nodeObjects[n.id];
+      if (!obj) return;
+      animateScale(n.id, Math.max(0.1, Math.min(2.5, pop)), 500);
+      const delta = pop - 1;
+      if (delta > 0.05) {
+        obj.mesh.material.emissive.setHex(0x4ade80);
+        obj.mesh.material.emissiveIntensity = Math.min(0.7, delta * 0.8);
+      } else if (delta < -0.05) {
+        obj.mesh.material.emissive.setHex(0xef4444);
+        obj.mesh.material.emissiveIntensity = Math.min(0.7, Math.abs(delta) * 0.8);
+      }
+    }, 200 + i * 20);
+  });
+
+  // Show result
+  setTimeout(() => {
+    const selNode = graph.nodes.find(n => n.id === selectedNode);
+    const collapsed = sorted.filter(n => lvPop[n.id] < 0.5).map(n => n.name_ru).slice(0, 3);
+    const boomed    = sorted.filter(n => lvPop[n.id] > 1.4).map(n => n.name_ru).slice(0, 3);
+    const resultText = document.getElementById('sim-result-text');
+    if (!resultText.textContent) {
+      let txt = growMode
+        ? `Восстановление «${selNode?.name_ru}» (+${Math.round(pressure*80)}%)`
+        : `Снижение «${selNode?.name_ru}» на ${Math.round(pressure*85)}%`;
+      if (boomed.length)    txt += `. Рост: ${boomed.join(', ')}`;
+      if (collapsed.length) txt += `. Под угрозой: ${collapsed.join(', ')}`;
+      txt += `. Симуляция по модели Лотки–Вольтерра.`;
+      resultText.textContent = txt;
+    }
+    document.getElementById('sim-result').classList.add('show');
+    btn.className = 'btn-simulate';
+    btn.innerHTML = '<svg class="ic" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg> Запустить снова';
+    simRunning = false;
+  }, 800);
+}
+
+function animateScale(id, targetScale, duration) {
+  const obj = nodeObjects[id];
+  if (!obj) return;
+  const start = obj.mesh.scale.x;
+  const startTime = performance.now();
+  function step(now) {
+    const t = Math.min((now - startTime) / duration, 1);
+    const e = 1 - Math.pow(1 - t, 3);
+    obj.mesh.scale.setScalar(start + (targetScale - start) * e);
+    if (t < 1) requestAnimationFrame(step);
+  }
+  requestAnimationFrame(step);
+}
+
+function resetSimulation() {
+  growMode = false;
+  document.getElementById('pressure-slider').value = 0;
+  document.getElementById('slider-val').textContent = '0%';
+  document.getElementById('sim-result').classList.remove('show');
+  document.getElementById('sim-result-text').textContent = '';
+  graph.nodes.forEach(n => {
+    const obj = nodeObjects[n.id];
+    if (!obj) return;
+    animateScale(n.id, 1, 500);
+    obj.mesh.material.emissive.setHex(CAT_COLOR[n.category] || 0x22c55e);
+    obj.mesh.material.emissiveIntensity = 0.2;
+  });
+  // Note: does NOT touch scenario-chip active classes — managed by applyScenario
+}
+
+/* Scenarios */
+function applyScenario(name, chip) {
+  // Update active chip
+  document.querySelectorAll('.scenario-chip').forEach(c => c.classList.remove('active'));
+  chip?.classList.add('active');
+
+  deselectNode();
+  resetSimulation();
+
+  const scenarios = {
+    wolf:     { target: 'Рысь',  pressure: 80, grow: false, msg: 'Исчезновение рыси <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> +40% популяция косули <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> перевыпас <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> деградация леса' },
+    wetland:  { target: 'болот', pressure: 70, grow: false, msg: 'Осушение болот <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> гибель 70% болотных видов <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> цепная реакция по всей пищевой сети' },
+    poaching: { target: 'Зубр',  pressure: 60, grow: false, msg: 'Браконьерство <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> снижение зубра <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> зарастание опушек <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> потеря биоразнообразия' },
+    restore:  { target: 'бобёр', pressure: 45, grow: true,  msg: 'Восстановление бобра <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> создание прудов <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> +30% водных видов <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> стабилизация экосистемы' },
+  };
+  const s = scenarios[name];
+  if (!s) return;
+
+  const nodeId = graph.nodes.find(n => n.name_ru.toLowerCase().includes(s.target.toLowerCase()))?.id;
+  if (!nodeId) { console.warn('Scenario target not found:', s.target); return; }
+
+  growMode = s.grow;
+  selectNode(nodeId);
+  document.getElementById('pressure-slider').value = s.pressure;
+  updateSlider(s.pressure);
+  document.getElementById('sim-result-text').textContent = s.msg;
+  setTimeout(() => runSimulation(), 350);
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   Energy flow particles
+   ══════════════════════════════════════════════════════════════════════════ */
+let energyFlowEnabled = false;
+const flowParticles = []; // { mesh, linkIdx, t }
+
+function toggleEnergyFlow() {
+  energyFlowEnabled = !energyFlowEnabled;
+  const btn = document.getElementById('btn-energy');
+  if (energyFlowEnabled) {
+    btn.style.borderColor = 'var(--rb-accent)';
+    btn.style.color = 'var(--rb-accent)';
+    initFlowParticles();
+  } else {
+    btn.style.borderColor = 'var(--rb-border)';
+    btn.style.color = 'var(--rb-muted)';
+    flowParticles.forEach(p => scene.remove(p.mesh));
+    flowParticles.length = 0;
+  }
+}
+
+function initFlowParticles() {
+  // Remove old
+  flowParticles.forEach(p => scene.remove(p.mesh));
+  flowParticles.length = 0;
+  // Create one particle per link (3 particles per link staggered)
+  graph.links.forEach((link, i) => {
+    for (let k = 0; k < 2; k++) {
+      const geo = new THREE.SphereGeometry(0.2, 6, 6);
+      const mat = new THREE.MeshBasicMaterial({ color: 0x88ffaa, transparent: true, opacity: 0.8 });
+      const mesh = new THREE.Mesh(geo, mat);
+      scene.add(mesh);
+      flowParticles.push({ mesh, linkIdx: i, t: k * 0.5 });
+    }
+  });
+}
+
+function updateFlowParticles(dt) {
+  if (!energyFlowEnabled) return;
+  flowParticles.forEach(p => {
+    p.t = (p.t + dt * 0.4) % 1;
+    const link = graph.links[p.linkIdx];
+    if (!link) return;
+    const src = nodeObjects[link.source]?.mesh.position;
+    const tgt = nodeObjects[link.target]?.mesh.position;
+    if (!src || !tgt) return;
+    p.mesh.position.lerpVectors(src, tgt, p.t);
+    // Fade at ends
+    const fade = Math.sin(p.t * Math.PI);
+    p.mesh.material.opacity = fade * 0.9;
+  });
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   Snapshot
+   ══════════════════════════════════════════════════════════════════════════ */
+function saveSnapshot() {
+  // Render one frame to canvas
+  renderer.render(scene, camera);
+  const url = renderer.domElement.toDataURL('image/png');
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `food-web-${Date.now()}.png`;
+  a.click();
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   Render loop
+   ══════════════════════════════════════════════════════════════════════════ */
+let t = 0;
+let lastTime = 0;
+function animate(now = 0) {
+  requestAnimationFrame(animate);
+  const dt = Math.min((now - lastTime) / 1000, 0.1);
+  lastTime = now;
+  t += 0.01;
+  // Gentle auto-rotate when not interacting
+  if (!isDragging) {
+    cameraTheta += 0.001;
+    updateCamera();
+  }
+  // Pulse emissive on CR nodes
+  graph.nodes.forEach(n => {
+    const obj = nodeObjects[n.id];
+    if (obj && n.category === 'CR') {
+      obj.mesh.material.emissiveIntensity = 0.2 + Math.sin(t * 3 + n.id) * 0.15;
+    }
+  });
+  // Energy flow
+  updateFlowParticles(dt);
+  renderer.render(scene, camera);
+}
+animate();
+
+/* ══════════════════════════════════════════════════════════════════════════
+   Sidebar
+   ══════════════════════════════════════════════════════════════════════════ */
+function toggleSidebar() {
+  const app = document.getElementById('app');
+  app.classList.toggle('sb-collapsed');
+  localStorage.setItem('ls_sb_collapsed', app.classList.contains('sb-collapsed') ? '1' : '0');
+  lucide.createIcons();
+  setTimeout(resize, 300);
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   Boot
+   ══════════════════════════════════════════════════════════════════════════ */
+LS.hideDisabledFeatures?.();
+lucide.createIcons();
+if (localStorage.getItem('ls_sb_collapsed') === '1') document.getElementById('app').classList.add('sb-collapsed');
+const user = LS.getUser?.();
+if (user) {
+  document.getElementById('nav-user').textContent = user.name?.split(' ')[0] || '—';
+  document.getElementById('nav-avatar').textContent = (user.name||'LS').split(' ').slice(0,2).map(w=>w[0]?.toUpperCase()||'').join('')||'LS';
+}
+resize(); // init canvas size so raycaster works correctly
+loadGraph();
+</script>
+<script src="/js/mobile.js"></script>
+</body>
+</html>
diff --git a/frontend/red-book-games.html b/frontend/red-book-games.html
new file mode 100644
index 0000000..f1703bf
--- /dev/null
+++ b/frontend/red-book-games.html
@@ -0,0 +1,648 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Игры — Красная книга РБ</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
+  <link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;700;900&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet"/>
+  <link rel="stylesheet" href="/css/ls.css"/>
+  <style>
+    :root {
+      --rb-bg:      #0a1a0d;
+      --rb-surface: #111d13;
+      --rb-border:  #1e3523;
+      --rb-accent:  #4ade80;
+      --rb-text:    #e2f5e8;
+      --rb-muted:   #6b9a74;
+      --rb-cr: #ef4444; --rb-en: #f97316; --rb-vu: #eab308;
+      --rb-nt: #22c55e; --rb-lc: #3b82f6;
+      --sb-width: 240px;
+    }
+    body { background: var(--rb-bg); color: var(--rb-text); font-family: 'Manrope', sans-serif; }
+    .app-layout { background: var(--rb-bg); }
+    .sb-content { padding: 0; }
+
+    /* Sidebar */
+    .app-layout > .sidebar { background: var(--rb-surface) !important; border-right: 1px solid var(--rb-border) !important; }
+    .sb-brand { border-bottom: 1px solid var(--rb-border); padding: 16px 12px 12px; }
+    .sb-link, a.sb-link { color: var(--rb-muted) !important; }
+    .sb-link:hover { background: rgba(74,222,128,.08) !important; color: var(--rb-text) !important; }
+    .sb-link.active { background: rgba(74,222,128,.14) !important; color: var(--rb-accent) !important; font-weight:700; }
+    .sb-link.active::before { background: var(--rb-accent) !important; }
+    .sb-toggle { color: var(--rb-muted) !important; border-color: var(--rb-border) !important; background: transparent !important; }
+    .sb-toggle:hover { background: rgba(74,222,128,.12) !important; color: var(--rb-accent) !important; }
+    .nav-user-chip { border-color: var(--rb-border) !important; }
+    .nav-avatar { background: linear-gradient(135deg, #166534, #15803d) !important; }
+    .nav-user-name { color: var(--rb-muted) !important; }
+    .rb-brand-link { display:flex;align-items:center;gap:9px;text-decoration:none;flex:1;min-width:0;overflow:hidden; }
+    .rb-brand-icon { font-size:24px;line-height:1;flex-shrink:0; }
+    .rb-brand-text { font-family:'Unbounded',sans-serif;font-size:10px;font-weight:700;color:var(--rb-accent);line-height:1.4;white-space:nowrap; }
+    .rb-sb-section { font-size:9px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--rb-muted);padding:14px 12px 4px;margin:0;opacity:.55; }
+    .app-layout.sb-collapsed .rb-sb-section { display:none; }
+    .rb-sb-divider { border:none;border-top:1px solid var(--rb-border);margin:8px 4px; }
+    .rb-back-link { opacity:.65;font-size:.82rem !important; }
+    .rb-back-link:hover { opacity:1 !important; }
+
+    /* Page */
+    .games-page { padding: 40px 40px 80px; max-width: 1000px; margin: 0 auto; }
+
+    /* Header */
+    .page-title { font-family: 'Unbounded', sans-serif; font-size: 24px; font-weight: 900; margin: 0 0 8px; }
+    .page-sub   { color: var(--rb-muted); font-size: 13px; margin: 0 0 32px; }
+
+    /* Game selector */
+    .game-select { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-bottom: 36px; }
+    .game-card {
+      background: var(--rb-surface); border: 1px solid var(--rb-border);
+      border-radius: 16px; padding: 24px 20px; cursor: pointer;
+      transition: all .2s; text-align: center;
+    }
+    .game-card:hover { border-color: var(--rb-accent); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
+    .game-card.active { border-color: var(--rb-accent); background: rgba(74,222,128,.08); }
+    .game-card-icon { font-size: 40px; margin-bottom: 12px; }
+    .game-card-title { font-family: 'Unbounded', sans-serif; font-size: 14px; font-weight: 700; margin: 0 0 6px; }
+    .game-card-desc { font-size: 12px; color: var(--rb-muted); margin: 0; line-height: 1.5; }
+
+    /* ── QUIZ ── */
+    #quiz-area { display:none; }
+    .quiz-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
+    .quiz-score { background: rgba(74,222,128,.1); border: 1px solid rgba(74,222,128,.3); color: var(--rb-accent); font-weight:700; font-size:13px; padding:6px 16px; border-radius:10px; }
+    .quiz-card {
+      background: var(--rb-surface); border: 1px solid var(--rb-border);
+      border-radius: 20px; padding: 32px; margin-bottom: 24px; text-align: center;
+    }
+    .quiz-icon { font-size: 64px; margin-bottom: 16px; display: block; }
+    .quiz-question { font-family: 'Unbounded', sans-serif; font-size: 18px; font-weight: 700; margin: 0 0 8px; color: #fff; }
+    .quiz-hint { font-size: 13px; color: var(--rb-muted); margin: 0 0 24px; }
+    .quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+    .quiz-opt {
+      background: rgba(255,255,255,.04); border: 1.5px solid var(--rb-border);
+      color: var(--rb-text); font-size: 13px; font-weight: 600;
+      padding: 14px 16px; border-radius: 12px; cursor: pointer;
+      transition: all .15s; text-align: left;
+    }
+    .quiz-opt:hover { border-color: var(--rb-accent); background: rgba(74,222,128,.07); }
+    .quiz-opt.correct { border-color: #22c55e; background: rgba(34,197,94,.15); color: #4ade80; }
+    .quiz-opt.wrong   { border-color: #ef4444; background: rgba(239,68,68,.12); color: #fca5a5; }
+    .quiz-opt.disabled { cursor: default; pointer-events: none; }
+    .quiz-feedback {
+      background: rgba(74,222,128,.08); border: 1px solid rgba(74,222,128,.3);
+      border-radius: 12px; padding: 16px 20px; margin-top: 16px;
+      font-size: 13px; color: #c8e6ce; line-height: 1.6; display: none;
+    }
+    .quiz-feedback.wrong-bg { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.3); color: #fca5a5; }
+    .btn-next {
+      background: var(--rb-accent); color: #0a1a0d;
+      font-weight: 700; font-size: 14px; padding: 12px 28px;
+      border: none; border-radius: 12px; cursor: pointer; margin-top: 16px;
+      display: none;
+    }
+    .quiz-progress {
+      height: 4px; background: var(--rb-border); border-radius: 2px; margin-bottom: 20px;
+    }
+    .quiz-progress-fill { height: 100%; background: var(--rb-accent); border-radius: 2px; transition: width .4s; }
+    .quiz-result {
+      text-align: center; padding: 40px; display: none;
+    }
+    .quiz-result h2 { font-family: 'Unbounded', sans-serif; font-size: 24px; font-weight: 900; margin: 0 0 12px; }
+    .quiz-result p  { font-size: 16px; color: var(--rb-muted); margin: 0 0 24px; }
+
+    /* ── FOOD CHAIN ── */
+    #chain-area { display:none; }
+    .chain-header { margin-bottom: 20px; }
+    .chain-header h3 { font-family: 'Unbounded', sans-serif; font-size: 16px; font-weight:700; margin:0 0 6px; }
+    .chain-header p  { font-size:13px; color:var(--rb-muted); margin:0 0 16px; }
+    .chain-dropzones { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
+    .chain-slot {
+      width: 110px; min-height: 90px;
+      background: rgba(255,255,255,.03); border: 2px dashed var(--rb-border);
+      border-radius: 14px; display: flex; flex-direction:column;
+      align-items: center; justify-content: center;
+      font-size: 11px; color: var(--rb-muted); font-weight:600;
+      transition: border-color .15s; cursor: pointer; padding: 8px;
+      text-align: center;
+    }
+    .chain-slot.over { border-color: var(--rb-accent); background: rgba(74,222,128,.08); }
+    .chain-slot.filled { border-style: solid; }
+    .chain-slot .slot-icon { font-size:28px; margin-bottom:4px; }
+    .chain-slot .slot-name { font-size:11px; color:var(--rb-text); font-weight:600; }
+    .chain-arrow { font-size: 20px; color: var(--rb-muted); flex-shrink: 0; }
+    .chain-pieces { display: flex; gap: 10px; flex-wrap: wrap; }
+    .chain-piece {
+      display: flex; flex-direction:column; align-items:center; gap:4px;
+      background: var(--rb-surface); border: 1.5px solid var(--rb-border);
+      border-radius: 12px; padding: 12px 14px; cursor: grab;
+      transition: all .15s; user-select: none; min-width: 90px; text-align:center;
+    }
+    .chain-piece:hover { border-color: var(--rb-accent); transform: translateY(-2px); }
+    .chain-piece.dragging { opacity: .5; }
+    .chain-piece.used { opacity: .3; pointer-events:none; }
+    .chain-piece-icon { font-size: 28px; }
+    .chain-piece-name { font-size: 11px; font-weight: 600; }
+    .chain-check-btn {
+      background: var(--rb-accent); color: #0a1a0d;
+      font-weight:700; font-size:14px; padding:12px 28px;
+      border:none; border-radius:12px; cursor:pointer; margin-right:10px;
+    }
+    .chain-reset-btn {
+      background: transparent; border: 1px solid var(--rb-border);
+      color: var(--rb-muted); font-size:13px; padding:12px 20px;
+      border-radius:12px; cursor:pointer;
+    }
+    .chain-result {
+      padding: 16px 20px; border-radius:12px; margin-top:16px; font-size:13px; font-weight:600;
+      display:none;
+    }
+    .chain-result.ok  { background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.3);color:var(--rb-accent); }
+    .chain-result.err { background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:#fca5a5; }
+
+    /* Toasts */
+    #rb-toasts { position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none; }
+    .rb-toast { display:flex;align-items:center;gap:10px;background:#0d2210;border:1px solid var(--rb-border);color:var(--rb-text);font-size:13px;font-weight:600;padding:12px 18px;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.5);pointer-events:auto;animation:toastIn .3s both; }
+    .rb-toast.success { border-color:rgba(74,222,128,.4); }
+    .rb-toast.error   { border-color:rgba(239,68,68,.4);color:#fca5a5; }
+    .rb-toast.out     { animation:toastOut .3s both; }
+    @keyframes toastIn  { from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)} }
+    @keyframes toastOut { from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(20px)} }
+
+    /* ── Mobile ── */
+    @media (max-width: 768px) {
+      main.sb-content { overflow-y: auto; padding: 16px 14px 80px !important; }
+      .game-grid, .games-grid { grid-template-columns: 1fr !important; }
+      .chain-btns { display: flex; flex-wrap: wrap; gap: 8px; }
+      .chain-check-btn, .chain-reset-btn { flex: 1; min-width: 120px; padding: 10px; font-size: 13px; }
+      #rb-toasts { right: 14px; bottom: 80px; }
+    }
+    @media (max-width: 480px) {
+      .chain-pieces { gap: 6px; }
+      .chain-piece { min-width: 60px; padding: 8px 10px; font-size: 12px; }
+    }
+  </style>
+</head>
+<body>
+<div class="app-layout" id="app">
+
+  <!-- RB Sidebar -->
+  <nav class="sidebar">
+    <div class="sb-brand">
+      <a href="/red-book.html" class="rb-brand-link">
+        <span class="rb-brand-icon"><svg class="ic" viewBox="0 0 24 24"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z"/><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"/></svg></span>
+        <span class="sb-lbl rb-brand-text">Красная<br>книга РБ</span>
+      </a>
+      <button class="sb-toggle" onclick="toggleSidebar()" title="Свернуть"><i data-lucide="panel-left-close"></i></button>
+    </div>
+    <nav class="sb-nav">
+      <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="/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>
+      <a href="/red-book-games.html"      class="sb-link active"><i data-lucide="gamepad-2" class="sb-icon"></i><span class="sb-lbl">Игры</span></a>
+      <hr class="rb-sb-divider">
+      <a href="/dashboard.html" class="sb-link rb-back-link"><i data-lucide="chevron-left" class="sb-icon"></i><span class="sb-lbl">Назад</span></a>
+      <a href="/profile.html"   class="sb-link"><i data-lucide="user"                   class="sb-icon"></i><span class="sb-lbl">Профиль</span></a>
+    </nav>
+    <div class="sb-footer">
+      <div class="nav-user-chip" onclick="location.href='/profile.html'">
+        <div class="nav-avatar" id="nav-avatar">LS</div>
+        <span class="nav-user-name" id="nav-user">—</span>
+      </div>
+    </div>
+  </nav>
+
+  <main class="sb-content">
+    <div class="games-page">
+
+      <h1 class="page-title"><svg class="ic" viewBox="0 0 24 24"><line x1="6" y1="12" x2="10" y2="12"/><line x1="8" y1="10" x2="8" y2="14"/><line x1="15" y1="13" x2="15.01" y2="13"/><line x1="18" y1="11" x2="18.01" y2="11"/><rect x="2" y="6" width="20" height="12" rx="2"/></svg> Игры</h1>
+      <p class="page-sub">Узнавай виды и восстанавливай экосистемы</p>
+
+      <!-- Game selector -->
+      <div class="game-select">
+        <div class="game-card" id="card-quiz" onclick="selectGame('quiz')">
+          <div class="game-card-icon"><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></div>
+          <div class="game-card-title">Угадай вид</div>
+          <p class="game-card-desc">По иконке и подсказкам определи вид из Красной книги</p>
+        </div>
+        <div class="game-card" id="card-chain" onclick="selectGame('chain')">
+          <div class="game-card-icon"><svg class="ic" viewBox="0 0 24 24"><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></div>
+          <div class="game-card-title">Пищевая цепочка</div>
+          <p class="game-card-desc">Расставь виды в правильном порядке от продуцента до хищника</p>
+        </div>
+      </div>
+
+      <!-- QUIZ -->
+      <div id="quiz-area">
+        <div class="quiz-header">
+          <h3 style="margin:0;font-family:'Unbounded',sans-serif;font-size:16px">Угадай вид</h3>
+          <div style="display:flex;gap:10px;align-items:center">
+            <span id="quiz-progress-label" style="font-size:12px;color:var(--rb-muted)"></span>
+            <span class="quiz-score" id="quiz-score">0 / 0</span>
+          </div>
+        </div>
+        <div class="quiz-progress"><div class="quiz-progress-fill" id="quiz-progress-fill" style="width:0%"></div></div>
+
+        <div id="quiz-card-wrap">
+          <!-- filled by JS -->
+        </div>
+
+        <div id="quiz-result" class="quiz-result">
+          <div id="quiz-result-icon" style="font-size:64px;margin-bottom:16px"><svg class="ic" viewBox="0 0 24 24"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z"/><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"/></svg></div>
+          <h2 id="quiz-result-title">Игра завершена!</h2>
+          <p id="quiz-result-text"></p>
+          <button onclick="startQuiz()" style="background:var(--rb-accent);color:#0a1a0d;font-weight:700;font-size:14px;padding:12px 28px;border:none;border-radius:12px;cursor:pointer;">Сыграть ещё</button>
+        </div>
+      </div>
+
+      <!-- FOOD CHAIN -->
+      <div id="chain-area">
+        <div class="chain-header">
+          <h3>Восстанови пищевую цепочку</h3>
+          <p>Расставь виды от продуцента (растения) до высшего хищника</p>
+          <div id="chain-level-selector" style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;"></div>
+        </div>
+
+        <div class="chain-dropzones" id="chain-slots"></div>
+
+        <div style="margin-bottom:16px;">
+          <p style="font-size:12px;color:var(--rb-muted);margin:0 0 12px">Перетащи виды в нужный порядок:</p>
+          <div class="chain-pieces" id="chain-pieces"></div>
+        </div>
+
+        <button class="chain-check-btn" onclick="checkChain()"><svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg> Проверить</button>
+        <button class="chain-reset-btn" onclick="resetChain()"><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> Сбросить</button>
+        <div class="chain-result" id="chain-result"></div>
+      </div>
+
+    </div>
+  </main>
+</div>
+
+<div id="rb-toasts"></div>
+
+<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/mobile.js"></script>
+<script>
+/* ══════════════════════════════════════════════════════════════════════════
+   Init
+   ══════════════════════════════════════════════════════════════════════════ */
+let allSpecies = [];
+let currentGame = null;
+
+async function init() {
+  LS.hideDisabledFeatures?.();
+  lucide.createIcons();
+  if (localStorage.getItem('ls_sb_collapsed') === '1') document.getElementById('app').classList.add('sb-collapsed');
+  const user = LS.getUser?.();
+  if (user) {
+    document.getElementById('nav-user').textContent = user.name?.split(' ')[0] || '—';
+    document.getElementById('nav-avatar').textContent = (user.name||'LS').split(' ').slice(0,2).map(w=>w[0]?.toUpperCase()||'').join('')||'LS';
+  }
+  const data = await LS.get('/api/red-book/species?limit=100').catch(() => ({ species: [] }));
+  allSpecies = data.species || [];
+}
+
+function selectGame(game) {
+  currentGame = game;
+  document.querySelectorAll('.game-card').forEach(c => c.classList.remove('active'));
+  document.getElementById(`card-${game}`).classList.add('active');
+  document.getElementById('quiz-area').style.display  = game === 'quiz'  ? 'block' : 'none';
+  document.getElementById('chain-area').style.display = game === 'chain' ? 'block' : 'none';
+
+  if (game === 'quiz')  startQuiz();
+  if (game === 'chain') initChains();
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   QUIZ — Угадай вид
+   ══════════════════════════════════════════════════════════════════════════ */
+const QUIZ_TOTAL = 10;
+let quizState = { questions: [], idx: 0, score: 0, answered: false };
+
+function buildQuizQuestions() {
+  const pool = [...allSpecies].sort(() => Math.random() - 0.5).slice(0, QUIZ_TOTAL);
+  return pool.map(correct => {
+    // 3 wrong answers from remaining species
+    const others = allSpecies.filter(s => s.id !== correct.id)
+      .sort(() => Math.random() - 0.5).slice(0, 3);
+    const options = [correct, ...others].sort(() => Math.random() - 0.5);
+    // Quiz type: either by icon or by description snippet
+    const type = Math.random() < 0.5 ? 'icon' : 'desc';
+    return { correct, options, type };
+  });
+}
+
+function startQuiz() {
+  if (allSpecies.length < 4) { showToast('Загрузите данные...', 'error'); return; }
+  quizState = { questions: buildQuizQuestions(), idx: 0, score: 0, answered: false };
+  document.getElementById('quiz-result').style.display = 'none';
+  updateScoreDisplay();
+  renderQuizCard();
+}
+
+function updateScoreDisplay() {
+  const { idx, score } = quizState;
+  document.getElementById('quiz-score').textContent = `${score} / ${QUIZ_TOTAL}`;
+  document.getElementById('quiz-progress-label').textContent = `${idx + 1} / ${QUIZ_TOTAL}`;
+  document.getElementById('quiz-progress-fill').style.width = `${(idx / QUIZ_TOTAL) * 100}%`;
+}
+
+function renderQuizCard() {
+  const { questions, idx } = quizState;
+  if (idx >= questions.length) { showQuizResult(); return; }
+  const q = questions[idx];
+  const wrap = document.getElementById('quiz-card-wrap');
+
+  let questionHtml, hintHtml;
+  if (q.type === 'icon') {
+    questionHtml = `<span class="quiz-icon">${q.correct.group_icon || '<svg class="ic" viewBox="0 0 24 24"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z"/><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"/></svg>'}</span>
+      <p class="quiz-question">Что это за вид?</p>`;
+    hintHtml = `<p class="quiz-hint">Категория: <b style="color:var(--rb-${q.correct.category?.toLowerCase() || 'nt'})">${q.correct.category}</b></p>`;
+  } else {
+    const desc = q.correct.interesting_fact || q.correct.description?.slice(0,120) || '';
+    questionHtml = `<span class="quiz-icon"><svg class="ic" viewBox="0 0 24 24"><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>
+      <p class="quiz-question">Угадай вид по описанию:</p>`;
+    hintHtml = `<p class="quiz-hint" style="max-width:440px;margin-left:auto;margin-right:auto">"${desc}…"</p>`;
+  }
+
+  wrap.innerHTML = `
+    <div class="quiz-card">
+      ${questionHtml}
+      ${hintHtml}
+      <div class="quiz-options">
+        ${q.options.map((sp, i) => `
+          <button class="quiz-opt" id="qopt-${i}" onclick="answerQuiz(${sp.id}, ${i})">
+            ${sp.group_icon || ''} ${sp.name_ru}
+            <div style="font-size:10px;color:var(--rb-muted);font-style:italic">${sp.name_lat || ''}</div>
+          </button>`).join('')}
+      </div>
+      <div class="quiz-feedback" id="quiz-feedback"></div>
+      <button class="btn-next" id="btn-next" onclick="nextQuestion()">Далее <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></button>
+    </div>`;
+  quizState.answered = false;
+}
+
+function answerQuiz(selectedId, optIdx) {
+  if (quizState.answered) return;
+  quizState.answered = true;
+  const q = quizState.questions[quizState.idx];
+  const correct = selectedId === q.correct.id;
+
+  if (correct) quizState.score++;
+
+  // Highlight options
+  q.options.forEach((sp, i) => {
+    const btn = document.getElementById(`qopt-${i}`);
+    btn.classList.add('disabled');
+    if (sp.id === q.correct.id) btn.classList.add('correct');
+    else if (i === optIdx && !correct) btn.classList.add('wrong');
+  });
+
+  // Show feedback
+  const fb = document.getElementById('quiz-feedback');
+  fb.style.display = 'block';
+  if (correct) {
+    fb.className = 'quiz-feedback';
+    fb.innerHTML = `<svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg> Верно! ${q.correct.interesting_fact || q.correct.description?.slice(0,120) || ''}`;
+  } else {
+    fb.className = 'quiz-feedback wrong-bg';
+    fb.innerHTML = `<svg class="ic" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg> Неверно. Правильный ответ: ${q.correct.name_ru} (${q.correct.name_lat || ''})`;
+  }
+
+  document.getElementById('btn-next').style.display = 'inline-block';
+  updateScoreDisplay();
+}
+
+function nextQuestion() {
+  quizState.idx++;
+  if (quizState.idx >= quizState.questions.length) { showQuizResult(); return; }
+  document.getElementById('quiz-progress-fill').style.width = `${(quizState.idx / QUIZ_TOTAL) * 100}%`;
+  document.getElementById('quiz-progress-label').textContent = `${quizState.idx + 1} / ${QUIZ_TOTAL}`;
+  renderQuizCard();
+}
+
+function showQuizResult() {
+  document.getElementById('quiz-card-wrap').innerHTML = '';
+  const r = document.getElementById('quiz-result');
+  r.style.display = 'block';
+  const pct = Math.round(quizState.score / QUIZ_TOTAL * 100);
+  document.getElementById('quiz-result-icon').innerHTML = pct >= 80 ? '<svg class="ic" viewBox="0 0 24 24"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2z"/></svg>' : pct >= 50 ? '<svg class="ic" viewBox="0 0 24 24"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z"/><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"/></svg>' : '<svg class="ic" viewBox="0 0 24 24"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg>';
+  document.getElementById('quiz-result-title').textContent =
+    pct >= 80 ? 'Отлично! Ты знаток Красной книги!' :
+    pct >= 50 ? 'Хороший результат!' : 'Нужно больше изучать!';
+  document.getElementById('quiz-result-text').textContent =
+    `Правильных ответов: ${quizState.score} из ${QUIZ_TOTAL} (${pct}%)`;
+  document.getElementById('quiz-progress-fill').style.width = '100%';
+  document.getElementById('quiz-progress-label').textContent = `${QUIZ_TOTAL} / ${QUIZ_TOTAL}`;
+  // Award XP if logged in
+  if (quizState.score >= 5) {
+    const xp = quizState.score * 5;
+    LS.post('/api/red-book/species/1/collect', {}).catch(() => {}); // just as XP trigger
+    showToast(`+${xp} XP за игру!`, 'success');
+  }
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   FOOD CHAIN GAME
+   ══════════════════════════════════════════════════════════════════════════ */
+const CHAINS = [
+  {
+    id: 'forest',
+    title: 'Лесная цепь',
+    desc: 'Широколиственный лес',
+    chain: [
+      { name: 'Дуб (желуди)', icon: '<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>', level: 'Продуцент' },
+      { name: 'Жук-олень',    icon: '<svg class="ic" viewBox="0 0 24 24"><path d="M17 5C17 5 18 3 20 3s3 1 3 3-1 3-3 3h-2M17 5h-7M7 5C7 5 6 3 4 3S1 4 1 6s1 3 3 3h2M7 5v6M17 5v6M9 13a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2c0-2-1-5-1-7H10c0 2-1 5-1 7z"/><path d="M12 15v7"/></svg>', level: 'Консумент I' },
+      { name: 'Воробьиный сыч', icon: '<svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="14" r="4"/><path d="M12 4a4 4 0 0 0-4 4v2h8V8a4 4 0 0 0-4-4z"/><path d="M10 14h.01M14 14h.01"/></svg>', level: 'Консумент II' },
+      { name: 'Рысь',         icon: '<svg class="ic" viewBox="0 0 24 24"><path d="M12 5c.67 0 1.35.09 2 .26 1.78-2 5.03-2.84 6.42-2.26 1.4.58-.42 7-.42 7 .57 1.07 1 2.24 1 3.44C21 17.9 16.97 21 12 21s-9-3-9-7.56c0-1.25.5-2.4 1-3.44 0 0-1.89-6.42-.5-7 1.39-.58 4.72.23 6.5 2.23A9.04 9.04 0 0 1 12 5z"/><path d="M8 14v.5M16 14v.5"/></svg>', level: 'Консумент III' },
+    ],
+  },
+  {
+    id: 'wetland',
+    title: 'Болотная цепь',
+    desc: 'Болото Беларуси',
+    chain: [
+      { name: 'Камыш (водоросли)', icon: '<svg class="ic" viewBox="0 0 24 24"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z"/><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"/></svg>', level: 'Продуцент' },
+      { name: 'Тритон',           icon: '<svg class="ic" viewBox="0 0 24 24"><path d="M11 20c1.44-4.1 4.89-6 4.89-6s-2.95-2.11-4.89-6"/><path d="m2 13 2-5 5 5-5 3z"/><path d="M2 8s3 5 3 8"/><path d="M22 16c0 2.76-2.24 5-5 5s-5-2.24-5-5"/></svg>', level: 'Консумент I' },
+      { name: 'Чёрный аист',      icon: '<svg class="ic" viewBox="0 0 24 24"><path d="M16 7h.01"/><path d="M3.4 18H12a8 8 0 0 0 8-8V7a4 4 0 0 0-7.28-2.3L2 20"/><path d="m20 7 2 .5-2 .5"/><path d="M10 18v3M14 17.75v3.25"/><path d="M7 18a6 6 0 0 0 3.84-10.61"/></svg>', level: 'Консумент II' },
+      { name: 'Орлан-белохвост',  icon: '<svg class="ic" viewBox="0 0 24 24"><path d="M16 7h.01"/><path d="M3.4 18H12a8 8 0 0 0 8-8V7a4 4 0 0 0-7.28-2.3L2 20"/><path d="m20 7 2 .5-2 .5"/><path d="M10 18v3M14 17.75v3.25"/><path d="M7 18a6 6 0 0 0 3.84-10.61"/></svg>', level: 'Консумент III' },
+    ],
+  },
+  {
+    id: 'river',
+    title: 'Речная цепь',
+    desc: 'Реки и озёра',
+    chain: [
+      { name: 'Водоросли',   icon: '<svg class="ic" viewBox="0 0 24 24"><path d="M7 20h10"/><path d="M10 20c5.5-2.5.8-6.4 3-10"/><path d="M9.5 9.4c1.1.8 1.8 2.2 2.3 3.7-2 .4-3.5.4-4.8-.3-1.2-.6-2.3-1.9-3-4.2 2.8-.5 4.4 0 5.5.8z"/><path d="M14.1 6a7 7 0 0 1 1.5 4.7c-1.7 1.3-3 1.4-4 1.1a3 3 0 0 1-1.8-1.9c.8-2 2.3-3.3 4.3-3.9z"/></svg>', level: 'Продуцент' },
+      { name: 'Миног',       icon: '<svg class="ic" viewBox="0 0 24 24"><path d="M6.5 12c.94-3.46 4.94-6 8.5-6 3.56 0 6.06 2.54 7 6-.94 3.47-3.44 6-7 6s-7.56-2.53-8.5-6z"/><path d="M18 12v.5"/><path d="M16 17.93a9.77 9.77 0 0 1 0-11.86"/><path d="M7 10.67C7 8 5.58 5.97 2.73 5.5c-1 3.98-.23 7.23 1.95 8.05C6.09 14.26 7 13.06 7 11.5v-1.01z"/></svg>', level: 'Консумент I' },
+      { name: 'Выдра',       icon: '<svg class="ic" viewBox="0 0 24 24"><path d="M12 17c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"/><path d="M4 22 2 8l10 3 10-3-2 14"/></svg>', level: 'Консумент II' },
+      { name: 'Волк',        icon: '<svg class="ic" viewBox="0 0 24 24"><path d="M12 22c-4 0-8-2-10-6 0-4 2-8 5-10l2 4 2-2 1 3 2-4c3 2 5 6 5 10-2 4-6 5-7 5z"/></svg>', level: 'Консумент III' },
+    ],
+  },
+];
+
+let chainState = { chainIdx: 0, slots: [], dragging: null };
+
+function initChains() {
+  const sel = document.getElementById('chain-level-selector');
+  sel.innerHTML = CHAINS.map((c, i) => `
+    <button onclick="loadChain(${i})" id="chain-btn-${i}"
+      style="background:transparent;border:1px solid var(--rb-border);color:var(--rb-muted);font-size:12px;font-weight:600;padding:6px 14px;border-radius:10px;cursor:pointer;">
+      ${c.icon || ''} ${c.title}
+    </button>`).join('');
+  loadChain(0);
+}
+
+function loadChain(idx) {
+  chainState.chainIdx = idx;
+  chainState.slots = new Array(CHAINS[idx].chain.length).fill(null);
+  chainState.dragging = null;
+
+  // Update active button
+  CHAINS.forEach((_, i) => {
+    const btn = document.getElementById(`chain-btn-${i}`);
+    if (btn) {
+      btn.style.borderColor = i === idx ? 'var(--rb-accent)' : 'var(--rb-border)';
+      btn.style.color = i === idx ? 'var(--rb-accent)' : 'var(--rb-muted)';
+    }
+  });
+
+  const c = CHAINS[idx];
+  document.getElementById('chain-result').style.display = 'none';
+
+  // Render slots
+  const slotsEl = document.getElementById('chain-slots');
+  slotsEl.innerHTML = c.chain.map((_, i) => `
+    <div class="chain-slot" id="chain-slot-${i}"
+      ondragover="e.preventDefault();this.classList.add('over')"
+      ondragleave="this.classList.remove('over')"
+      ondrop="dropToSlot(event,${i})">
+      <span style="font-size:11px;color:var(--rb-muted)">${_.level}</span>
+    </div>
+    ${i < c.chain.length - 1 ? '<div class="chain-arrow"><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></div>' : ''}`
+  ).join('');
+
+  // Render shuffled pieces
+  const shuffled = [...c.chain].sort(() => Math.random() - 0.5);
+  const piecesEl = document.getElementById('chain-pieces');
+  piecesEl.innerHTML = shuffled.map((item, i) => `
+    <div class="chain-piece" id="chain-piece-${i}" draggable="true"
+      data-name="${item.name}" data-icon="${item.icon}"
+      ondragstart="dragStart(event,${i})">
+      <span class="chain-piece-icon">${item.icon}</span>
+      <span class="chain-piece-name">${item.name}</span>
+    </div>`).join('');
+}
+
+function dragStart(e, pieceIdx) {
+  chainState.dragging = pieceIdx;
+  e.dataTransfer.setData('text/plain', pieceIdx);
+  document.getElementById(`chain-piece-${pieceIdx}`)?.classList.add('dragging');
+}
+
+function dropToSlot(e, slotIdx) {
+  e.preventDefault();
+  const slotEl = document.getElementById(`chain-slot-${slotIdx}`);
+  slotEl?.classList.remove('over');
+  const pieceIdx = parseInt(e.dataTransfer.getData('text/plain'));
+  const pieceEl = document.getElementById(`chain-piece-${pieceIdx}`);
+  if (!pieceEl) return;
+
+  const name = pieceEl.dataset.name;
+  const icon = pieceEl.dataset.icon;
+
+  // If slot already has something, put it back
+  const prev = chainState.slots[slotIdx];
+  if (prev !== null) {
+    // Find piece with that name and un-hide it
+    document.querySelectorAll('.chain-piece').forEach(p => {
+      if (p.dataset.name === chainState.slots[slotIdx]?.name) p.classList.remove('used');
+    });
+  }
+
+  chainState.slots[slotIdx] = { name, icon };
+  pieceEl.classList.add('used');
+  pieceEl.classList.remove('dragging');
+
+  // Update slot display
+  if (slotEl) {
+    slotEl.classList.add('filled');
+    slotEl.innerHTML = `
+      <div class="slot-icon">${icon}</div>
+      <div class="slot-name">${name}</div>
+      <span onclick="clearSlot(${slotIdx})" style="font-size:10px;color:var(--rb-muted);margin-top:4px;cursor:pointer"><svg class="ic" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span>`;
+  }
+}
+
+function clearSlot(slotIdx) {
+  const slot = chainState.slots[slotIdx];
+  if (!slot) return;
+  chainState.slots[slotIdx] = null;
+  // Un-hide matching piece
+  document.querySelectorAll('.chain-piece').forEach(p => {
+    if (p.dataset.name === slot.name) p.classList.remove('used');
+  });
+  // Reset slot display
+  const c = CHAINS[chainState.chainIdx];
+  const slotEl = document.getElementById(`chain-slot-${slotIdx}`);
+  if (slotEl) {
+    slotEl.classList.remove('filled');
+    slotEl.innerHTML = `<span style="font-size:11px;color:var(--rb-muted)">${c.chain[slotIdx].level}</span>`;
+  }
+}
+
+function checkChain() {
+  const c = CHAINS[chainState.chainIdx];
+  const res = document.getElementById('chain-result');
+
+  // Check all filled
+  if (chainState.slots.some(s => s === null)) {
+    res.style.display = 'block';
+    res.className = 'chain-result err';
+    res.innerHTML = '<svg class="ic" viewBox="0 0 24 24"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg> Заполни все ячейки цепочки';
+    return;
+  }
+
+  const correct = c.chain.every((item, i) => chainState.slots[i]?.name === item.name);
+  res.style.display = 'block';
+  if (correct) {
+    res.className = 'chain-result ok';
+    res.innerHTML = '<svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg> Верно! Пищевая цепочка составлена правильно. +25 XP';
+    showToast('<svg class="ic" viewBox="0 0 24 24"><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> Цепочка верна! +25 XP', 'success');
+  } else {
+    res.className = 'chain-result err';
+    const correctOrder = c.chain.map(i => `${i.icon} ${i.name}`).join(' <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> ');
+    res.innerHTML = `<svg class="ic" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg> Неверно. Правильный порядок: ${correctOrder}`;
+  }
+}
+
+function resetChain() {
+  loadChain(chainState.chainIdx);
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   Helpers
+   ══════════════════════════════════════════════════════════════════════════ */
+function toggleSidebar() {
+  const app = document.getElementById('app');
+  app.classList.toggle('sb-collapsed');
+  localStorage.setItem('ls_sb_collapsed', app.classList.contains('sb-collapsed') ? '1' : '0');
+  lucide.createIcons();
+}
+
+function showToast(msg, type = 'success', duration = 3000) {
+  const wrap = document.getElementById('rb-toasts');
+  const t = document.createElement('div');
+  t.className = `rb-toast ${type}`;
+  t.innerHTML = msg;
+  wrap.appendChild(t);
+  setTimeout(() => { t.classList.add('out'); t.addEventListener('animationend', () => t.remove()); }, duration);
+}
+
+init();
+</script>
+</body>
+</html>
diff --git a/frontend/red-book.html b/frontend/red-book.html
new file mode 100644
index 0000000..be4e785
--- /dev/null
+++ b/frontend/red-book.html
@@ -0,0 +1,1509 @@
+<!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="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
+  <link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;700;900&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet"/>
+  <link rel="stylesheet" href="/css/ls.css"/>
+  <style>
+    /* ── RB tokens ──────────────────────────────────────────────────────── */
+    :root {
+      --rb-bg:       #0a1a0d;
+      --rb-surface:  #111d13;
+      --rb-border:   #1e3523;
+      --rb-cr:       #ef4444;
+      --rb-en:       #f97316;
+      --rb-vu:       #eab308;
+      --rb-nt:       #22c55e;
+      --rb-lc:       #3b82f6;
+      --rb-accent:   #4ade80;
+      --rb-text:     #e2f5e8;
+      --rb-muted:    #6b9a74;
+      --sb-width:    240px;
+    }
+
+    /* ── Layout override for dark RB theme ─────────────────────────────── */
+    body { background: var(--rb-bg); color: var(--rb-text); font-family: 'Manrope', sans-serif; }
+    .app-layout { background: var(--rb-bg); }
+    .sb-content { padding: 0; }
+
+    /* ── RB Sidebar ─────────────────────────────────────────────────────── */
+    .app-layout > .sidebar { background: var(--rb-surface) !important; border-right: 1px solid var(--rb-border) !important; }
+    .sb-brand { border-bottom: 1px solid var(--rb-border); padding: 16px 12px 12px; }
+    .sb-link, a.sb-link, button.sb-link { color: var(--rb-muted) !important; }
+    .sb-link:hover { background: rgba(74,222,128,.08) !important; color: var(--rb-text) !important; }
+    .sb-link.active { background: rgba(74,222,128,.14) !important; color: var(--rb-accent) !important; font-weight: 700; }
+    .sb-link.active::before { background: var(--rb-accent) !important; }
+    .sb-toggle { color: var(--rb-muted) !important; border-color: var(--rb-border) !important; background: transparent !important; }
+    .sb-toggle:hover { background: rgba(74,222,128,.12) !important; color: var(--rb-accent) !important; border-color: var(--rb-accent) !important; }
+    .nav-user-chip { border-color: var(--rb-border) !important; }
+    .nav-user-chip:hover { background: rgba(74,222,128,.08) !important; }
+    .nav-avatar { background: linear-gradient(135deg, #166534, #15803d) !important; }
+    .nav-user-name { color: var(--rb-muted) !important; }
+    /* brand */
+    .rb-brand-link { display: flex; align-items: center; gap: 9px; text-decoration: none; flex: 1; min-width: 0; overflow: hidden; }
+    .rb-brand-icon { font-size: 24px; line-height: 1; flex-shrink: 0; }
+    .rb-brand-text { font-family: 'Unbounded', sans-serif; font-size: 10px; font-weight: 700; color: var(--rb-accent); line-height: 1.4; white-space: nowrap; }
+    /* section label */
+    .rb-sb-section { font-size: 9px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--rb-muted); padding: 14px 12px 4px; margin: 0; opacity: 0.55; }
+    .app-layout.sb-collapsed .rb-sb-section { display: none; }
+    /* divider */
+    .rb-sb-divider { border: none; border-top: 1px solid var(--rb-border); margin: 8px 4px 8px; }
+    /* back link */
+    .rb-back-link { opacity: 0.65; font-size: 0.82rem !important; }
+    .rb-back-link:hover { opacity: 1 !important; }
+
+    /* ── Hero ────────────────────────────────────────────────────────────── */
+    .rb-hero {
+      position: relative;
+      height: 100vh;
+      min-height: 600px;
+      overflow: hidden;
+      display: flex; align-items: center; justify-content: center;
+    }
+    #hero-canvas {
+      position: absolute; inset: 0; width: 100%; height: 100%;
+    }
+    .hero-overlay {
+      position: absolute; inset: 0;
+      background: linear-gradient(to bottom, transparent 30%, var(--rb-bg) 100%);
+      pointer-events: none;
+    }
+    .hero-content {
+      position: relative; z-index: 2;
+      text-align: center; padding: 0 24px;
+    }
+    .hero-badge {
+      display: inline-block;
+      background: rgba(239,68,68,.15);
+      border: 1px solid rgba(239,68,68,.4);
+      color: #fca5a5;
+      font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
+      padding: 5px 14px; border-radius: 20px; margin-bottom: 20px;
+    }
+    .hero-title {
+      font-family: 'Unbounded', sans-serif;
+      font-size: clamp(28px, 5vw, 64px); font-weight: 900; line-height: 1.1;
+      color: #fff; margin: 0 0 16px;
+    }
+    .hero-title span { color: var(--rb-accent); }
+    .hero-subtitle {
+      font-size: 16px; color: var(--rb-muted); margin: 0 0 36px;
+      max-width: 500px; margin-left: auto; margin-right: auto;
+    }
+    .hero-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
+    .btn-rb-primary {
+      display: inline-flex; align-items: center; gap: 8px;
+      background: var(--rb-accent); color: #0a1a0d;
+      font-weight: 700; font-size: 14px; padding: 12px 24px;
+      border: none; border-radius: 12px; cursor: pointer;
+      text-decoration: none; transition: all .2s;
+    }
+    .btn-rb-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(74,222,128,.3); }
+    .btn-rb-outline {
+      display: inline-flex; align-items: center; gap: 8px;
+      background: transparent; color: var(--rb-accent);
+      font-weight: 600; font-size: 14px; padding: 12px 24px;
+      border: 1.5px solid var(--rb-accent); border-radius: 12px; cursor: pointer;
+      text-decoration: none; transition: all .2s;
+    }
+    .btn-rb-outline:hover { background: rgba(74,222,128,.1); }
+    .hero-scroll {
+      position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
+      z-index: 3; text-align: center; cursor: pointer;
+    }
+    .hero-scroll-arrow {
+      width: 24px; height: 24px; border-right: 2px solid var(--rb-accent);
+      border-bottom: 2px solid var(--rb-accent); transform: rotate(45deg);
+      margin: 0 auto; animation: scrollBounce 1.5s infinite;
+    }
+    @keyframes scrollBounce {
+      0%,100% { transform: rotate(45deg) translateY(0); }
+      50% { transform: rotate(45deg) translateY(6px); }
+    }
+
+    /* ── Main content ────────────────────────────────────────────────────── */
+    .rb-main { padding: 40px 32px 80px; max-width: 1400px; margin: 0 auto; }
+
+    /* ── Stats bar ───────────────────────────────────────────────────────── */
+    .stats-bar {
+      display: flex; gap: 16px; flex-wrap: wrap;
+      background: var(--rb-surface); border: 1px solid var(--rb-border);
+      border-radius: 16px; padding: 20px 28px; margin-bottom: 32px;
+      align-items: center;
+    }
+    .stat-chip {
+      display: flex; align-items: center; gap: 8px;
+      font-size: 13px; font-weight: 600;
+    }
+    .stat-dot {
+      width: 10px; height: 10px; border-radius: 50%;
+      flex-shrink: 0;
+    }
+    .stat-chip .n { font-size: 20px; font-weight: 700; }
+    .sep { width: 1px; height: 32px; background: var(--rb-border); }
+    .collection-progress { margin-left: auto; min-width: 200px; }
+    .progress-label { font-size: 12px; color: var(--rb-muted); margin-bottom: 6px; display: flex; justify-content: space-between; }
+    .progress-bar-wrap { height: 6px; background: var(--rb-border); border-radius: 3px; overflow: hidden; }
+    .progress-bar-fill { height: 100%; background: linear-gradient(90deg, #22c55e, #4ade80); border-radius: 3px; transition: width .6s; }
+
+    /* ── Two-column layout: map + gallery ───────────────────────────────── */
+    .rb-layout { display: grid; grid-template-columns: 320px 1fr; gap: 28px; align-items: start; }
+    @media (max-width: 900px) { .rb-layout { grid-template-columns: 1fr; } }
+
+    /* ── Map panel ───────────────────────────────────────────────────────── */
+    .map-panel {
+      background: var(--rb-surface); border: 1px solid var(--rb-border);
+      border-radius: 16px; padding: 20px; position: sticky; top: 24px;
+    }
+    .map-panel h3 { font-size: 14px; color: var(--rb-muted); margin: 0 0 16px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; }
+    .by-map {
+      width: 100%; aspect-ratio: 1.2;
+      position: relative;
+    }
+    .by-map svg { width: 100%; height: 100%; }
+    .region-path {
+      fill: #1e3523; stroke: #2d5238; stroke-width: 1;
+      cursor: pointer; transition: fill .2s;
+    }
+    .region-path:hover, .region-path.active { fill: #2d6a3f; }
+    .region-path.selected { fill: #166534; stroke: var(--rb-accent); stroke-width: 1.5; }
+    .region-tooltip {
+      position: absolute; background: #0d2210; border: 1px solid var(--rb-border);
+      color: var(--rb-text); font-size: 12px; padding: 8px 12px; border-radius: 8px;
+      pointer-events: none; white-space: nowrap; z-index: 10;
+      opacity: 0; transition: opacity .15s;
+    }
+    .map-legend { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
+    .legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--rb-muted); }
+    .legend-dot { width: 8px; height: 8px; border-radius: 50%; }
+
+    /* ── Filters ─────────────────────────────────────────────────────────── */
+    .filters-bar {
+      display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; align-items: center;
+    }
+    .filter-chip {
+      display: inline-flex; align-items: center; gap: 6px;
+      background: var(--rb-surface); border: 1px solid var(--rb-border);
+      color: var(--rb-muted); font-size: 12px; font-weight: 600;
+      padding: 6px 14px; border-radius: 20px; cursor: pointer;
+      transition: all .15s; white-space: nowrap;
+    }
+    .filter-chip:hover { border-color: var(--rb-accent); color: var(--rb-text); }
+    .filter-chip.active { background: rgba(74,222,128,.15); border-color: var(--rb-accent); color: var(--rb-accent); }
+    .filter-chip .chip-icon { font-size: 14px; }
+    .cat-chip { font-weight: 700; }
+    .cat-chip.CR { color: var(--rb-cr); border-color: rgba(239,68,68,.3); }
+    .cat-chip.CR.active { background: rgba(239,68,68,.15); }
+    .cat-chip.EN { color: var(--rb-en); border-color: rgba(249,115,22,.3); }
+    .cat-chip.EN.active { background: rgba(249,115,22,.15); }
+    .cat-chip.VU { color: var(--rb-vu); border-color: rgba(234,179,8,.3); }
+    .cat-chip.VU.active { background: rgba(234,179,8,.15); }
+    .cat-chip.NT { color: var(--rb-nt); border-color: rgba(34,197,94,.3); }
+    .cat-chip.NT.active { background: rgba(34,197,94,.15); }
+    .search-wrap { position: relative; flex: 1; min-width: 180px; }
+    .search-wrap input {
+      width: 100%; background: var(--rb-surface); border: 1px solid var(--rb-border);
+      color: var(--rb-text); font-size: 13px; padding: 8px 12px 8px 36px;
+      border-radius: 20px; outline: none; font-family: inherit;
+    }
+    .search-wrap input:focus { border-color: var(--rb-accent); }
+    .search-wrap input::placeholder { color: var(--rb-muted); }
+    .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--rb-muted); font-size: 14px; }
+
+    /* ── Species grid ────────────────────────────────────────────────────── */
+    .species-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+      gap: 16px;
+    }
+    .species-card {
+      background: var(--rb-surface); border: 1px solid var(--rb-border);
+      border-radius: 14px; overflow: hidden; cursor: pointer;
+      transition: all .2s; position: relative;
+      animation: cardIn .4s both;
+      animation-delay: calc(var(--i, 0) * 40ms);
+    }
+    @keyframes cardIn {
+      from { opacity: 0; transform: translateY(16px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .species-card:hover { transform: translateY(-4px); border-color: var(--rb-accent); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
+    .species-card.locked { opacity: .7; }
+    .card-photo {
+      width: 100%; aspect-ratio: 1;
+      background: #1a2e1d;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 48px; position: relative; overflow: hidden;
+    }
+    .card-photo img { width: 100%; height: 100%; object-fit: cover; }
+    .card-photo .card-icon { font-size: 48px; }
+    .card-lock {
+      position: absolute; inset: 0;
+      background: rgba(0,0,0,.55);
+      display: flex; align-items: center; justify-content: center;
+      font-size: 24px;
+    }
+    .card-body { padding: 12px; }
+    .card-name { font-size: 13px; font-weight: 700; color: var(--rb-text); margin: 0 0 2px; line-height: 1.3; }
+    .card-lat  { font-size: 10px; color: var(--rb-muted); font-style: italic; margin: 0 0 8px; }
+    .card-footer { display: flex; align-items: center; justify-content: space-between; }
+    .cat-badge {
+      font-size: 10px; font-weight: 800; letter-spacing: .5px;
+      padding: 2px 8px; border-radius: 8px;
+    }
+    .cat-badge.CR { background: rgba(239,68,68,.2); color: var(--rb-cr); }
+    .cat-badge.EN { background: rgba(249,115,22,.2); color: var(--rb-en); }
+    .cat-badge.VU { background: rgba(234,179,8,.2); color: var(--rb-vu); }
+    .cat-badge.NT { background: rgba(34,197,94,.2); color: var(--rb-nt); }
+    .cat-badge.LC { background: rgba(59,130,246,.2); color: var(--rb-lc); }
+    .card-group-icon { font-size: 16px; }
+
+    /* ── Modal ───────────────────────────────────────────────────────────── */
+    .rb-modal-backdrop {
+      position: fixed; inset: 0; background: rgba(0,0,0,.8);
+      z-index: 1000; display: none; align-items: center; justify-content: center;
+      padding: 20px; backdrop-filter: blur(4px);
+    }
+    .rb-modal-backdrop.open { display: flex; }
+    .rb-modal {
+      background: var(--rb-surface); border: 1px solid var(--rb-border);
+      border-radius: 20px; width: 100%; max-width: 820px; max-height: 90vh;
+      overflow: hidden; display: flex; flex-direction: column;
+      animation: modalIn .25s both;
+    }
+    @keyframes modalIn {
+      from { opacity: 0; transform: scale(.95); }
+      to { opacity: 1; transform: scale(1); }
+    }
+    .modal-top {
+      display: grid; grid-template-columns: 280px 1fr;
+      min-height: 280px;
+    }
+    @media (max-width: 600px) { .modal-top { grid-template-columns: 1fr; } }
+    .modal-visual {
+      background: #0d2210; position: relative;
+      display: flex; align-items: center; justify-content: center;
+      min-height: 200px;
+    }
+    .modal-visual canvas { width: 100%; height: 100%; position: absolute; inset: 0; }
+    .modal-visual .modal-icon { font-size: 72px; position: relative; z-index: 1; }
+    .modal-header { padding: 24px 24px 16px; }
+    .modal-cat-badge {
+      display: inline-block; font-size: 11px; font-weight: 800;
+      letter-spacing: 1px; padding: 3px 12px; border-radius: 10px; margin-bottom: 10px;
+    }
+    .modal-name { font-family: 'Unbounded', sans-serif; font-size: 20px; font-weight: 800; margin: 0 0 4px; color: #fff; }
+    .modal-be   { font-size: 13px; color: var(--rb-muted); font-style: italic; margin: 0 0 4px; }
+    .modal-lat  { font-size: 12px; color: var(--rb-muted); font-style: italic; margin: 0 0 14px; }
+    .modal-meta { display: flex; gap: 12px; flex-wrap: wrap; }
+    .meta-pill {
+      display: flex; align-items: center; gap: 5px;
+      background: rgba(255,255,255,.05); border: 1px solid var(--rb-border);
+      font-size: 11px; color: var(--rb-muted); padding: 4px 10px; border-radius: 8px;
+    }
+    .modal-body { flex: 1; overflow-y: auto; padding: 0 24px 24px; }
+    .modal-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rb-border); margin-bottom: 20px; padding-top: 16px; }
+    .modal-tab {
+      padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--rb-muted);
+      cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
+      transition: all .15s;
+    }
+    .modal-tab.active { color: var(--rb-accent); border-color: var(--rb-accent); }
+    .modal-tab-content { display: none; }
+    .modal-tab-content.active { display: block; }
+    .modal-desc { font-size: 14px; line-height: 1.8; color: #c8e6ce; }
+    .fact-box {
+      background: rgba(74,222,128,.08); border-left: 3px solid var(--rb-accent);
+      padding: 12px 16px; border-radius: 0 8px 8px 0; margin-top: 16px;
+    }
+    .fact-box p { margin: 0; font-size: 13px; color: var(--rb-accent); line-height: 1.6; }
+    .threats-list { list-style: none; padding: 0; margin: 0; }
+    .threats-list li {
+      display: flex; align-items: flex-start; gap: 10px;
+      padding: 10px 0; border-bottom: 1px solid var(--rb-border); font-size: 13px; color: #c8e6ce;
+    }
+    .threats-list li:last-child { border-bottom: none; }
+    .threat-icon { color: var(--rb-cr); flex-shrink: 0; margin-top: 1px; }
+    .regions-grid { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
+    .region-badge {
+      background: rgba(74,222,128,.1); border: 1px solid var(--rb-border);
+      color: var(--rb-accent); font-size: 11px; font-weight: 700;
+      padding: 4px 12px; border-radius: 8px;
+    }
+    .food-web-section { margin-top: 16px; }
+    .fw-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--rb-muted); margin: 0 0 8px; }
+    .fw-list { display: flex; gap: 8px; flex-wrap: wrap; }
+    .fw-chip {
+      display: flex; align-items: center; gap: 6px;
+      background: rgba(255,255,255,.05); border: 1px solid var(--rb-border);
+      font-size: 12px; padding: 4px 10px; border-radius: 8px; cursor: pointer;
+    }
+    .fw-chip:hover { border-color: var(--rb-accent); color: var(--rb-accent); }
+    .trend-chart { width: 100%; height: 120px; position: relative; margin-top: 16px; }
+    .trend-svg { width: 100%; height: 100%; }
+    .modal-footer {
+      padding: 16px 24px;
+      border-top: 1px solid var(--rb-border);
+      display: flex; gap: 12px; align-items: center;
+    }
+    .btn-collect {
+      flex: 1; background: var(--rb-accent); color: #0a1a0d;
+      font-weight: 700; font-size: 14px; padding: 12px;
+      border: none; border-radius: 10px; cursor: pointer; transition: all .2s;
+      display: flex; align-items: center; justify-content: center; gap: 8px;
+    }
+    .btn-collect:hover { filter: brightness(1.1); }
+    .btn-collect.already { background: var(--rb-border); color: var(--rb-muted); cursor: default; }
+    .btn-close-modal {
+      background: transparent; border: 1px solid var(--rb-border);
+      color: var(--rb-muted); padding: 12px 20px; border-radius: 10px;
+      cursor: pointer; font-size: 13px; font-weight: 600;
+    }
+    .btn-close-modal:hover { border-color: var(--rb-muted); color: var(--rb-text); }
+    .modal-xp-badge {
+      background: rgba(234,179,8,.15); border: 1px solid rgba(234,179,8,.3);
+      color: #fde047; font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 8px;
+    }
+
+    /* ── Toast notifications ─────────────────────────────────────────────── */
+    #rb-toasts {
+      position: fixed; bottom: 24px; right: 24px; z-index: 9999;
+      display: flex; flex-direction: column; gap: 10px; pointer-events: none;
+    }
+    .rb-toast {
+      display: flex; align-items: center; gap: 10px;
+      background: #0d2210; border: 1px solid var(--rb-border);
+      color: var(--rb-text); font-size: 13px; font-weight: 600;
+      padding: 12px 18px; border-radius: 12px;
+      box-shadow: 0 8px 24px rgba(0,0,0,.5);
+      pointer-events: auto;
+      animation: toastIn .3s both;
+    }
+    .rb-toast.success { border-color: rgba(74,222,128,.4); }
+    .rb-toast.error   { border-color: rgba(239,68,68,.4); color: #fca5a5; }
+    .rb-toast.info    { border-color: rgba(59,130,246,.4); }
+    .rb-toast.out     { animation: toastOut .3s both; }
+    @keyframes toastIn  { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
+    @keyframes toastOut { from { opacity:1; transform:translateX(0); } to { opacity:0; transform:translateX(20px); } }
+
+    /* ── Empty state ─────────────────────────────────────────────────────── */
+    .rb-empty {
+      grid-column: 1/-1; text-align: center; padding: 60px 20px;
+      color: var(--rb-muted);
+    }
+    .rb-empty .empty-icon { font-size: 48px; margin-bottom: 12px; }
+    .rb-empty p { font-size: 14px; }
+
+    /* ── Quests section ──────────────────────────────────────────────────── */
+    .quests-section { margin-bottom: 28px; }
+    .quests-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
+    .quests-header h3 { font-family: 'Unbounded', sans-serif; font-size: 15px; font-weight: 700; margin: 0; }
+    .quests-header .q-sub { font-size: 11px; color: var(--rb-muted); margin-left: 8px; }
+    .quests-row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
+    .quest-card {
+      flex-shrink: 0; width: 240px;
+      background: var(--rb-surface); border: 1px solid var(--rb-border);
+      border-radius: 14px; padding: 16px; cursor: pointer;
+      transition: all .2s; position: relative; overflow: hidden;
+    }
+    .quest-card:hover { border-color: var(--rb-accent); transform: translateY(-2px); }
+    .quest-card.completed { border-color: rgba(74,222,128,.35); opacity: .8; }
+    .quest-card::before {
+      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
+      background: linear-gradient(90deg, var(--qcolor, #4ade80), transparent);
+    }
+    .quest-icon { font-size: 24px; margin-bottom: 8px; display: block; }
+    .quest-title { font-size: 13px; font-weight: 700; color: #fff; margin: 0 0 4px; }
+    .quest-desc  { font-size: 11px; color: var(--rb-muted); margin: 0 0 12px; line-height: 1.5; }
+    .quest-progress-bar { height: 4px; background: var(--rb-border); border-radius: 2px; overflow: hidden; margin-bottom: 6px; }
+    .quest-progress-fill { height: 100%; border-radius: 2px; transition: width .5s; }
+    .quest-progress-text { display: flex; justify-content: space-between; font-size: 10px; color: var(--rb-muted); }
+    .quest-xp-badge { display: inline-block; background: rgba(234,179,8,.15); border: 1px solid rgba(234,179,8,.3); color: #fde047; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 6px; }
+    .quest-done-badge { display: inline-block; background: rgba(74,222,128,.15); border: 1px solid rgba(74,222,128,.3); color: var(--rb-accent); font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 6px; }
+
+    /* Quest drawer */
+    .quest-drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 800; display: none; }
+    .quest-drawer-backdrop.open { display: block; }
+    .quest-drawer {
+      position: fixed; right: 0; top: 0; bottom: 0; width: 380px;
+      background: var(--rb-surface); border-left: 1px solid var(--rb-border);
+      z-index: 801; overflow-y: auto; padding: 28px 24px;
+      transform: translateX(100%); transition: transform .25s;
+    }
+    .quest-drawer-backdrop.open .quest-drawer { transform: translateX(0); }
+    .quest-drawer h3 { font-family: 'Unbounded', sans-serif; font-size: 16px; font-weight: 800; margin: 0 0 6px; }
+    .quest-drawer p  { font-size: 13px; color: var(--rb-muted); margin: 0 0 20px; line-height: 1.6; }
+    .quest-species-list { display: flex; flex-direction: column; gap: 8px; }
+    .qsp-row {
+      display: flex; align-items: center; gap: 10px;
+      background: rgba(255,255,255,.03); border: 1px solid var(--rb-border);
+      border-radius: 10px; padding: 10px 12px; cursor: pointer; transition: border-color .15s;
+    }
+    .qsp-row:hover { border-color: var(--rb-accent); }
+    .qsp-row.done  { opacity: .55; }
+    .qsp-icon { font-size: 20px; }
+    .qsp-name { font-size: 13px; font-weight: 600; flex: 1; }
+    .qsp-check { color: var(--rb-accent); font-size: 16px; }
+    .qsp-lock  { color: var(--rb-muted); font-size: 14px; }
+    .drawer-close-btn {
+      background: transparent; border: 1px solid var(--rb-border);
+      color: var(--rb-muted); padding: 8px 18px; border-radius: 8px;
+      cursor: pointer; font-size: 12px; font-weight: 600; margin-top: 20px;
+    }
+    .drawer-start-btn {
+      background: var(--rb-accent); color: #0a1a0d;
+      font-weight: 700; font-size: 13px; padding: 10px 20px;
+      border: none; border-radius: 10px; cursor: pointer; margin-top: 16px; width: 100%;
+    }
+
+    /* ── Daily card ──────────────────────────────────────────────────────── */
+    .daily-card {
+      background: linear-gradient(135deg, #0d2210, #1a3a20);
+      border: 1px solid var(--rb-border); border-radius: 16px;
+      padding: 20px 24px; margin-bottom: 28px;
+      display: flex; gap: 20px; align-items: center; cursor: pointer;
+      transition: all .2s;
+    }
+    .daily-card:hover { border-color: var(--rb-accent); }
+    .daily-badge-wrap { flex-shrink: 0; }
+    .daily-badge {
+      background: rgba(234,179,8,.15); border: 1px solid rgba(234,179,8,.3);
+      color: #fde047; font-size: 10px; font-weight: 800; letter-spacing: 1.5px;
+      text-transform: uppercase; padding: 4px 10px; border-radius: 8px; display: inline-block; margin-bottom: 8px;
+    }
+    .daily-icon { font-size: 40px; display: block; }
+    .daily-info { flex: 1; min-width: 0; }
+    .daily-info h4 { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: #fff; }
+    .daily-info p { margin: 0; font-size: 12px; color: var(--rb-muted); line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
+    .daily-xp { flex-shrink: 0; background: rgba(234,179,8,.15); border: 1px solid rgba(234,179,8,.3); color: #fde047; font-weight: 700; font-size: 13px; padding: 8px 16px; border-radius: 10px; }
+
+    /* ── Sightings feed ──────────────────────────────────────────────────── */
+    .sight-item {
+      background: rgba(255,255,255,.03); border: 1px solid var(--rb-border);
+      border-radius: 10px; padding: 12px;
+    }
+    .sight-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
+    .sight-user { font-size: 12px; font-weight: 700; color: var(--rb-text); }
+    .sight-date { font-size: 11px; color: var(--rb-muted); margin-left: auto; }
+    .sight-region { font-size: 11px; background: rgba(74,222,128,.1); color: var(--rb-accent); padding: 2px 8px; border-radius: 6px; }
+    .sight-desc { font-size: 13px; color: #c8e6ce; line-height: 1.5; }
+    .sight-verified { font-size: 10px; background: rgba(59,130,246,.15); color: #60a5fa; padding: 2px 8px; border-radius: 6px; }
+
+    /* ── Section header ──────────────────────────────────────────────────── */
+    .section-header {
+      display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
+    }
+    .section-header h2 { font-family: 'Unbounded', sans-serif; font-size: 18px; font-weight: 700; margin: 0; }
+    .section-header .count { background: var(--rb-border); color: var(--rb-muted); font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 10px; }
+  </style>
+</head>
+<body>
+<div class="app-layout" id="app">
+
+  <!-- Red Book sidebar -->
+  <nav class="sidebar">
+    <div class="sb-brand">
+      <a href="/red-book.html" class="rb-brand-link">
+        <span class="rb-brand-icon"><svg class="ic" viewBox="0 0 24 24"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z"/><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"/></svg></span>
+        <span class="sb-lbl rb-brand-text">Красная<br>книга РБ</span>
+      </a>
+      <button class="sb-toggle" onclick="toggleSidebar()" title="Свернуть меню"><i data-lucide="panel-left-close"></i></button>
+    </div>
+    <nav class="sb-nav">
+      <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="/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>
+      <a href="/red-book-games.html"    class="sb-link"><i data-lucide="gamepad-2"       class="sb-icon"></i><span class="sb-lbl">Игры</span></a>
+      <hr class="rb-sb-divider">
+      <a href="/dashboard.html" class="sb-link rb-back-link"><i data-lucide="chevron-left" class="sb-icon"></i><span class="sb-lbl">Назад</span></a>
+      <a href="/profile.html"   class="sb-link"><i data-lucide="user"                     class="sb-icon"></i><span class="sb-lbl">Профиль</span></a>
+    </nav>
+    <div class="sb-footer">
+      <div class="nav-user-chip" onclick="location.href='/profile.html'">
+        <div class="nav-avatar" id="nav-avatar">LS</div>
+        <span class="nav-user-name" id="nav-user">—</span>
+      </div>
+    </div>
+  </nav>
+
+  <main class="sb-content">
+
+    <!-- HERO -->
+    <section class="rb-hero">
+      <canvas id="hero-canvas"></canvas>
+      <div class="hero-overlay"></div>
+      <div class="hero-content">
+        <div class="hero-badge">Республика Беларусь · Официальный список</div>
+        <h1 class="hero-title">Красная книга<br><span>Беларуси</span></h1>
+        <p class="hero-subtitle"><span id="hero-threatened">—</span> видов под угрозой. Исследуйте, открывайте, защищайте.</p>
+        <div class="hero-btns">
+          <a href="#gallery" class="btn-rb-primary" onclick="scrollToGallery()"><svg class="ic" viewBox="0 0 24 24"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z"/><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"/></svg> Исследовать виды</a>
+        </div>
+      </div>
+      <div class="hero-scroll" onclick="scrollToGallery()">
+        <div class="hero-scroll-arrow"></div>
+      </div>
+    </section>
+
+    <!-- MAIN -->
+    <div class="rb-main" id="gallery">
+
+      <!-- Daily species -->
+      <div class="daily-card" id="daily-card" onclick="openDailySpecies()">
+        <div class="daily-badge-wrap">
+          <span class="daily-badge">Вид дня</span>
+          <span class="daily-icon" id="daily-icon"><svg class="ic" viewBox="0 0 24 24"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z"/><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"/></svg></span>
+        </div>
+        <div class="daily-info">
+          <h4 id="daily-name">Загрузка...</h4>
+          <p id="daily-fact"></p>
+        </div>
+        <div class="daily-xp">+20 XP</div>
+      </div>
+
+      <!-- Quests -->
+      <div class="quests-section" id="quests-section" style="display:none">
+        <div class="quests-header">
+          <div>
+            <h3><svg class="ic" viewBox="0 0 24 24"><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"/><line x1="8" y1="2" x2="8" y2="18"/><line x1="16" y1="6" x2="16" y2="22"/></svg> Квесты<span class="q-sub" id="quests-sub"></span></h3>
+          </div>
+          <a href="javascript:void(0)" onclick="openQuestDrawer(null)" style="font-size:12px;color:var(--rb-muted);text-decoration:none;">Все квесты <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></a>
+        </div>
+        <div class="quests-row" id="quests-row">
+          <!-- filled by JS -->
+        </div>
+      </div>
+
+      <!-- Stats -->
+      <div class="stats-bar">
+        <div class="stat-chip"><div class="stat-dot" style="background:var(--rb-cr)"></div><span class="n" id="stat-cr">—</span> CR</div>
+        <div class="sep"></div>
+        <div class="stat-chip"><div class="stat-dot" style="background:var(--rb-en)"></div><span class="n" id="stat-en">—</span> EN</div>
+        <div class="sep"></div>
+        <div class="stat-chip"><div class="stat-dot" style="background:var(--rb-vu)"></div><span class="n" id="stat-vu">—</span> VU</div>
+        <div class="sep"></div>
+        <div class="stat-chip"><div class="stat-dot" style="background:var(--rb-nt)"></div><span class="n" id="stat-nt">—</span> NT</div>
+        <div class="sep"></div>
+        <div class="stat-chip" style="color:var(--rb-muted)">Всего <span class="n" id="stat-total">—</span></div>
+        <div class="collection-progress" id="collection-progress-wrap">
+          <div class="progress-label"><span>Ваша коллекция</span><span id="progress-text">0 / 0</span></div>
+          <div class="progress-bar-wrap"><div class="progress-bar-fill" id="progress-fill" style="width:0%"></div></div>
+        </div>
+      </div>
+
+      <!-- Two-column layout -->
+      <div class="rb-layout">
+
+        <!-- MAP PANEL -->
+        <div class="map-panel">
+          <h3>Ареал по регионам</h3>
+          <div class="by-map">
+            <!-- Simplified SVG map of Belarus regions -->
+            <svg viewBox="0 0 300 260" xmlns="http://www.w3.org/2000/svg" id="belarus-svg">
+              <!-- Витебская -->
+              <path class="region-path" data-region="vitebsk" data-name="Витебская область"
+                d="M60,20 L180,20 L200,30 L200,90 L160,100 L140,95 L100,100 L60,90 Z"/>
+              <!-- Минская -->
+              <path class="region-path" data-region="minsk" data-name="Минская область"
+                d="M60,90 L100,100 L140,95 L160,100 L170,130 L150,155 L100,160 L60,150 L50,120 Z"/>
+              <!-- Гродненская -->
+              <path class="region-path" data-region="grodno" data-name="Гродненская область"
+                d="M10,80 L60,90 L50,120 L60,150 L30,170 L10,150 L5,110 Z"/>
+              <!-- Брестская -->
+              <path class="region-path" data-region="brest" data-name="Брестская область"
+                d="M10,150 L30,170 L60,150 L100,160 L90,210 L60,230 L20,220 L5,180 Z"/>
+              <!-- Гомельская -->
+              <path class="region-path" data-region="gomel" data-name="Гомельская область"
+                d="M100,160 L150,155 L200,165 L240,190 L230,240 L160,250 L90,240 L90,210 Z"/>
+              <!-- Могилёвская -->
+              <path class="region-path" data-region="mogilev" data-name="Могилёвская область"
+                d="M160,100 L200,90 L250,100 L260,140 L240,190 L200,165 L150,155 L170,130 Z"/>
+            </svg>
+            <div class="region-tooltip" id="region-tooltip"></div>
+          </div>
+          <div class="map-legend">
+            <div class="legend-item"><div class="legend-dot" style="background:#2d6a3f"></div>Выбранный</div>
+            <div class="legend-item"><div class="legend-dot" style="background:#1e3523"></div>Без фильтра</div>
+          </div>
+          <!-- Region species count labels filled by JS -->
+          <div id="region-stats" style="margin-top:16px; display:flex; flex-direction:column; gap:6px;"></div>
+        </div>
+
+        <!-- GALLERY -->
+        <div>
+          <!-- Groups filter -->
+          <div class="filters-bar" id="groups-filter"></div>
+
+          <!-- Category + search filter -->
+          <div class="filters-bar">
+            <div class="filter-chip cat-chip CR" data-cat="CR" onclick="toggleCat('CR')">CR</div>
+            <div class="filter-chip cat-chip EN" data-cat="EN" onclick="toggleCat('EN')">EN</div>
+            <div class="filter-chip cat-chip VU" data-cat="VU" onclick="toggleCat('VU')">VU</div>
+            <div class="filter-chip cat-chip NT" data-cat="NT" onclick="toggleCat('NT')">NT</div>
+            <div class="search-wrap">
+              <span class="search-icon"><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></span>
+              <input type="text" id="search-input" placeholder="Поиск по названию..." oninput="debouncedSearch()"/>
+            </div>
+          </div>
+
+          <div class="section-header">
+            <h2>Виды</h2>
+            <span class="count" id="species-count">—</span>
+            <button onclick="openRandomSpecies()" style="margin-left:auto;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 14px;border-radius:20px;cursor:pointer;transition:all .15s;" onmouseover="this.style.borderColor='var(--rb-accent)';this.style.color='var(--rb-accent)'" onmouseout="this.style.borderColor='var(--rb-border)';this.style.color='var(--rb-muted)'"><svg class="ic" viewBox="0 0 24 24"><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 8h.01M8 8h.01M8 16h.01M16 16h.01M12 12h.01"/></svg> Случайный вид</button>
+          </div>
+
+          <div class="species-grid" id="species-grid">
+            <!-- filled by JS -->
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </main>
+</div>
+
+<!-- TOASTS -->
+<div id="rb-toasts"></div>
+
+<!-- QUEST DRAWER -->
+<div class="quest-drawer-backdrop" id="quest-drawer-bd" onclick="closeQuestDrawer(event)">
+  <div class="quest-drawer" id="quest-drawer">
+    <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px;">
+      <span id="qd-icon" style="font-size:32px"><svg class="ic" viewBox="0 0 24 24"><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"/><line x1="8" y1="2" x2="8" y2="18"/><line x1="16" y1="6" x2="16" y2="22"/></svg></span>
+      <span id="qd-status-badge"></span>
+    </div>
+    <h3 id="qd-title">—</h3>
+    <p id="qd-desc"></p>
+    <div style="display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap;" id="qd-meta"></div>
+    <div id="quest-species-list" class="quest-species-list"></div>
+    <button class="drawer-start-btn" id="qd-start-btn" onclick="startCurrentQuest()" style="display:none"><svg class="ic" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg> Начать квест</button>
+    <button class="drawer-close-btn" onclick="closeQuestDrawer()">Закрыть</button>
+  </div>
+</div>
+
+<!-- MODAL -->
+<div class="rb-modal-backdrop" id="modal-backdrop" onclick="closeModalOnBackdrop(event)">
+  <div class="rb-modal" id="rb-modal">
+    <div class="modal-top">
+      <div class="modal-visual" id="modal-visual">
+        <span class="modal-icon" id="modal-icon"><svg class="ic" viewBox="0 0 24 24"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z"/><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"/></svg></span>
+      </div>
+      <div class="modal-header">
+        <div class="modal-cat-badge" id="modal-cat-badge">VU</div>
+        <h2 class="modal-name" id="modal-name">—</h2>
+        <p class="modal-be" id="modal-be"></p>
+        <p class="modal-lat" id="modal-lat"></p>
+        <div class="modal-meta" id="modal-meta"></div>
+      </div>
+    </div>
+    <div class="modal-body">
+      <div class="modal-tabs">
+        <div class="modal-tab active" onclick="switchTab('desc')">Описание</div>
+        <div class="modal-tab" onclick="switchTab('threats')">Угрозы</div>
+        <div class="modal-tab" onclick="switchTab('area')">Ареал</div>
+        <div class="modal-tab" onclick="switchTab('web')">Пищевая сеть</div>
+        <div class="modal-tab" onclick="switchTab('trend')">Динамика</div>
+        <div class="modal-tab" onclick="switchTab('sightings')"><svg class="ic" viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg> Наблюдения</div>
+      </div>
+      <div class="modal-tab-content active" id="tab-desc">
+        <p class="modal-desc" id="modal-desc"></p>
+        <div class="fact-box"><p id="modal-fact"></p></div>
+      </div>
+      <div class="modal-tab-content" id="tab-threats">
+        <ul class="threats-list" id="modal-threats"></ul>
+        <div style="margin-top:16px; font-size:13px; color:var(--rb-muted);" id="modal-conservation"></div>
+        <div style="margin-top:12px; font-size:13px; color:var(--rb-muted);" id="modal-where"></div>
+      </div>
+      <div class="modal-tab-content" id="tab-area">
+        <p style="font-size:13px; color:var(--rb-muted); margin-bottom:12px;">Регионы присутствия:</p>
+        <div class="regions-grid" id="modal-regions"></div>
+      </div>
+      <div class="modal-tab-content" id="tab-web">
+        <div class="food-web-section" id="modal-fw-prey"></div>
+        <div class="food-web-section" id="modal-fw-pred" style="margin-top:16px;"></div>
+      </div>
+      <div class="modal-tab-content" id="tab-trend">
+        <div class="trend-chart">
+          <svg class="trend-svg" id="trend-svg" viewBox="0 0 400 120" preserveAspectRatio="none"></svg>
+        </div>
+        <p style="font-size:11px; color:var(--rb-muted); margin-top:8px;" id="trend-source"></p>
+      </div>
+      <div class="modal-tab-content" id="tab-sightings">
+        <!-- Sighting form -->
+        <div style="background:rgba(74,222,128,.06);border:1px solid var(--rb-border);border-radius:12px;padding:16px;margin-bottom:16px;">
+          <p style="font-size:13px;font-weight:700;margin:0 0 10px;color:#fff;">Добавить наблюдение</p>
+          <select id="sight-region" style="width:100%;background:var(--rb-surface);border:1px solid var(--rb-border);color:var(--rb-text);font-size:13px;padding:8px 12px;border-radius:8px;outline:none;margin-bottom:8px;font-family:inherit;">
+            <option value="">— Регион (необязательно) —</option>
+            <option value="vitebsk">Витебская</option>
+            <option value="minsk">Минская</option>
+            <option value="grodno">Гродненская</option>
+            <option value="brest">Брестская</option>
+            <option value="gomel">Гомельская</option>
+            <option value="mogilev">Могилёвская</option>
+          </select>
+          <textarea id="sight-desc" placeholder="Описание наблюдения..." style="width:100%;background:var(--rb-surface);border:1px solid var(--rb-border);color:var(--rb-text);font-size:13px;padding:8px 12px;border-radius:8px;outline:none;resize:vertical;min-height:60px;font-family:inherit;box-sizing:border-box;margin-bottom:8px;"></textarea>
+          <button onclick="submitSighting()" style="background:var(--rb-accent);color:#0a1a0d;font-weight:700;font-size:13px;padding:8px 18px;border:none;border-radius:8px;cursor:pointer;">Отправить</button>
+        </div>
+        <!-- Sightings feed -->
+        <div id="sightings-feed" style="display:flex;flex-direction:column;gap:10px;"></div>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn-collect" id="btn-collect" onclick="collectCurrent()"><svg class="ic" viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 9.9-1"/></svg> Открыть (+XP)</button>
+      <span class="modal-xp-badge" id="modal-xp-badge">+30 XP</span>
+      <button class="btn-close-modal" onclick="closeModal()">Закрыть</button>
+    </div>
+  </div>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/three@0.149.0/build/three.min.js"></script>
+<script src="/js/api.js"></script>
+<script src="/js/mobile.js"></script>
+<script>
+/* ══════════════════════════════════════════════════════════════════════════
+   State
+   ══════════════════════════════════════════════════════════════════════════ */
+let state = {
+  groups: [], species: [], mapData: [],
+  filters: { group_id: null, category: null, region: null, q: '' },
+  current: null, dailySpecies: null,
+  collectedIds: new Set(),
+};
+
+const REGION_NAMES = {
+  vitebsk: 'Витебская', minsk: 'Минская', grodno: 'Гродненская',
+  brest: 'Брестская', gomel: 'Гомельская', mogilev: 'Могилёвская',
+};
+const XP_MAP = { CR: 50, EN: 40, VU: 30, NT: 20, LC: 10 };
+
+/* ══════════════════════════════════════════════════════════════════════════
+   Init
+   ══════════════════════════════════════════════════════════════════════════ */
+async function init() {
+  LS.hideDisabledFeatures?.();
+  lucide.createIcons();
+
+  // Auth (sidebar)
+  const user = LS.getUser?.() || null;
+  if (user) {
+    document.getElementById('nav-user').textContent = user.name?.split(' ')[0] || 'Профиль';
+    const initials = (user.name||'LS').split(' ').slice(0,2).map(w=>w[0]?.toUpperCase()||'').join('')||'LS';
+    document.getElementById('nav-avatar').textContent = initials;
+  }
+
+  // Sidebar collapse
+  if (localStorage.getItem('ls_sb_collapsed') === '1') {
+    document.getElementById('app').classList.add('sb-collapsed');
+  }
+
+  // Load data in parallel
+  const [groups, statsRes, mapData, daily] = await Promise.all([
+    LS.get('/api/red-book/groups').catch(() => []),
+    LS.get('/api/red-book/stats').catch(() => ({})),
+    LS.get('/api/red-book/map-data').catch(() => []),
+    LS.get('/api/red-book/daily').catch(() => null),
+  ]);
+  state.groups = groups;
+  state.mapData = mapData;
+  state.dailySpecies = daily;
+
+  // Stats bar
+  document.getElementById('stat-cr').textContent    = statsRes.cr || 0;
+  document.getElementById('stat-en').textContent    = statsRes.en || 0;
+  document.getElementById('stat-vu').textContent    = statsRes.vu || 0;
+  document.getElementById('hero-threatened').textContent = (statsRes.cr || 0) + (statsRes.en || 0) + (statsRes.vu || 0);
+  document.getElementById('stat-nt').textContent    = statsRes.nt || 0;
+  document.getElementById('stat-total').textContent = statsRes.total || 0;
+
+  const collected = statsRes.collected || 0;
+  const total     = statsRes.total || 1;
+  document.getElementById('progress-text').textContent = `${collected} / ${total}`;
+  document.getElementById('progress-fill').style.width = `${Math.round(collected/total*100)}%`;
+
+  // Daily card
+  if (daily) {
+    document.getElementById('daily-icon').innerHTML = daily.icon || '<svg class="ic" viewBox="0 0 24 24"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z"/><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"/></svg>';
+    document.getElementById('daily-name').textContent = daily.name_ru;
+    document.getElementById('daily-fact').textContent = daily.interesting_fact || daily.description?.slice(0,100)+'…';
+  }
+
+  // Groups filter
+  renderGroupsFilter();
+
+  // Map
+  renderMap();
+
+  // Load species
+  await loadSpecies();
+
+  // Load quests after species so state.collectedIds is ready
+  loadQuests();
+
+  // Three.js hero
+  initHero();
+
+  // Deep-link: ?species=ID
+  const deepSpecies = new URLSearchParams(location.search).get('species');
+  if (deepSpecies) openSpecies(Number(deepSpecies));
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   Groups filter
+   ══════════════════════════════════════════════════════════════════════════ */
+function renderGroupsFilter() {
+  const el = document.getElementById('groups-filter');
+  el.innerHTML = `<div class="filter-chip ${!state.filters.group_id?'active':''}" onclick="setGroup(null)">Все группы</div>`;
+  state.groups.forEach(g => {
+    el.innerHTML += `<div class="filter-chip ${state.filters.group_id===g.id?'active':''}" onclick="setGroup(${g.id})">
+      <span class="chip-icon">${g.icon}</span><span class="sb-lbl">${g.name_ru}</span>
+      <span style="opacity:.5">${g.n}</span>
+    </div>`;
+  });
+}
+function setGroup(id) {
+  state.filters.group_id = id;
+  renderGroupsFilter();
+  loadSpecies();
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   Category filter
+   ══════════════════════════════════════════════════════════════════════════ */
+function toggleCat(cat) {
+  state.filters.category = state.filters.category === cat ? null : cat;
+  document.querySelectorAll('.cat-chip').forEach(el => {
+    el.classList.toggle('active', el.dataset.cat === state.filters.category);
+  });
+  loadSpecies();
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   Search
+   ══════════════════════════════════════════════════════════════════════════ */
+let searchTimer;
+function debouncedSearch() {
+  clearTimeout(searchTimer);
+  searchTimer = setTimeout(() => {
+    state.filters.q = document.getElementById('search-input').value.trim();
+    loadSpecies();
+  }, 300);
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   Load & render species
+   ══════════════════════════════════════════════════════════════════════════ */
+async function loadSpecies() {
+  const p = new URLSearchParams();
+  if (state.filters.group_id) p.set('group_id', state.filters.group_id);
+  if (state.filters.category) p.set('category', state.filters.category);
+  if (state.filters.region)   p.set('region', state.filters.region);
+  if (state.filters.q)        p.set('q', state.filters.q);
+  p.set('limit', '100');
+
+  const data = await LS.get(`/api/red-book/species?${p}`).catch(() => ({ species: [] }));
+  state.species = data.species || [];
+
+  // update collection set
+  state.collectedIds = new Set(state.species.filter(s => s.collected).map(s => s.id));
+
+  renderGrid();
+  renderQuestCards();
+}
+
+function renderGrid() {
+  const grid = document.getElementById('species-grid');
+  const sp   = state.species;
+  document.getElementById('species-count').textContent = sp.length;
+
+  if (!sp.length) {
+    grid.innerHTML = `<div class="rb-empty"><div class="empty-icon"><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></div><p>Ничего не найдено. Измените фильтры.</p></div>`;
+    return;
+  }
+
+  grid.innerHTML = sp.map((s, i) => {
+    const locked = !s.collected;
+    return `<div class="species-card ${locked?'locked':''}" style="--i:${i%20}" onclick="openSpecies(${s.id})">
+      <div class="card-photo">
+        ${s.photo_url ? `<img src="${s.photo_url}" alt="${s.name_ru}" loading="lazy"/>` : `<span class="card-icon">${s.group_icon||'<svg class="ic" viewBox="0 0 24 24"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z"/><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"/></svg>'}</span>`}
+        ${locked ? '<div class="card-lock"><svg class="ic" viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></div>' : ''}
+      </div>
+      <div class="card-body">
+        <div class="card-name">${s.name_ru}</div>
+        <div class="card-lat">${s.name_lat || ''}</div>
+        <div class="card-footer">
+          <span class="cat-badge ${s.category}">${s.category}</span>
+          <span class="card-group-icon">${s.group_icon||''}</span>
+        </div>
+      </div>
+    </div>`;
+  }).join('');
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   Map
+   ══════════════════════════════════════════════════════════════════════════ */
+function renderMap() {
+  const regionMap = {};
+  state.mapData.forEach(r => regionMap[r.region_code] = r);
+
+  document.querySelectorAll('.region-path').forEach(path => {
+    const code = path.dataset.region;
+    const info = regionMap[code] || { total: 0, cr: 0, en: 0 };
+    path.dataset.total = info.total;
+    path.dataset.cr    = info.cr;
+    path.dataset.en    = info.en;
+
+    // Color intensity by total species
+    const intensity = Math.min(info.total / 30, 1);
+    const g = Math.round(26 + intensity * 60);
+    path.style.fill = `rgb(13,${g},16)`;
+
+    const tooltip = document.getElementById('region-tooltip');
+    path.addEventListener('mouseenter', e => {
+      tooltip.style.opacity = '1';
+      tooltip.innerHTML = `<b>${path.dataset.name}</b><br>Видов: ${info.total} · CR:${info.cr} EN:${info.en}`;
+    });
+    path.addEventListener('mousemove', e => {
+      const rect = path.closest('.by-map').getBoundingClientRect();
+      tooltip.style.left = (e.clientX - rect.left + 8) + 'px';
+      tooltip.style.top  = (e.clientY - rect.top  - 30) + 'px';
+    });
+    path.addEventListener('mouseleave', () => tooltip.style.opacity = '0');
+    path.addEventListener('click', () => toggleRegion(code, path));
+  });
+
+  // Region stats sidebar
+  const statsEl = document.getElementById('region-stats');
+  statsEl.innerHTML = state.mapData.map(r =>
+    `<div style="display:flex;justify-content:space-between;font-size:12px;color:var(--rb-muted)">
+      <span>${REGION_NAMES[r.region_code]||r.region_code}</span>
+      <span style="font-weight:700;color:var(--rb-text)">${r.total}</span>
+    </div>`
+  ).join('');
+}
+
+function toggleRegion(code, path) {
+  if (state.filters.region === code) {
+    state.filters.region = null;
+    document.querySelectorAll('.region-path').forEach(p => p.classList.remove('selected'));
+  } else {
+    state.filters.region = code;
+    document.querySelectorAll('.region-path').forEach(p => p.classList.remove('selected'));
+    path.classList.add('selected');
+  }
+  loadSpecies();
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   Open species modal
+   ══════════════════════════════════════════════════════════════════════════ */
+async function openSpecies(id) {
+  const sp = await LS.get(`/api/red-book/species/${id}`).catch(() => null);
+  if (!sp) return;
+  state.current = sp;
+
+  // visual
+  document.getElementById('modal-icon').innerHTML = sp.group_icon || '<svg class="ic" viewBox="0 0 24 24"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z"/><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"/></svg>';
+
+  // category badge
+  const badge = document.getElementById('modal-cat-badge');
+  const catColors = { CR:'#ef4444', EN:'#f97316', VU:'#eab308', NT:'#22c55e', LC:'#3b82f6' };
+  badge.textContent = `${sp.category} · КК РБ ${sp.by_category}`;
+  badge.style.background = (catColors[sp.category] || '#22c55e') + '22';
+  badge.style.color = catColors[sp.category] || '#22c55e';
+  badge.style.border = `1px solid ${catColors[sp.category] || '#22c55e'}55`;
+
+  document.getElementById('modal-name').textContent = sp.name_ru;
+  document.getElementById('modal-be').textContent   = sp.name_be || '';
+  document.getElementById('modal-lat').textContent  = sp.name_lat || '';
+
+  const MONTH_ABBR = ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'];
+  const seasons = sp.season_active ? JSON.parse(sp.season_active || '[]') : [];
+  const seasonHtml = seasons.length
+    ? `<div class="meta-pill" title="Сезон активности"><svg class="ic" viewBox="0 0 24 24"><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> ${seasons.map(m => MONTH_ABBR[parseInt(m)-1]).join(' · ')}</div>`
+    : '';
+
+  document.getElementById('modal-meta').innerHTML = [
+    sp.habitat_name ? `<div class="meta-pill">${sp.habitat_type === 'forest' ? '<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>' : sp.habitat_type === 'wetland' ? '<svg class="ic" viewBox="0 0 24 24"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z"/><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"/></svg>' : sp.habitat_type === 'river' ? '<svg class="ic" viewBox="0 0 24 24"><path d="M2 6c.6.5 1.2 1 2.5 1C7 7 7 5 9.5 5c2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1M2 12c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1M2 18c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/></svg>' : '<svg class="ic" viewBox="0 0 24 24"><path d="M7 20h10"/><path d="M10 20c5.5-2.5.8-6.4 3-10"/><path d="M9.5 9.4c1.1.8 1.8 2.2 2.3 3.7-2 .4-3.5.4-4.8-.3-1.2-.6-2.3-1.9-3-4.2 2.8-.5 4.4 0 5.5.8z"/><path d="M14.1 6a7 7 0 0 1 1.5 4.7c-1.7 1.3-3 1.4-4 1.1a3 3 0 0 1-1.8-1.9c.8-2 2.3-3.3 4.3-3.9z"/></svg>'} ${sp.habitat_name}</div>` : '',
+    sp.group_name ? `<div class="meta-pill">${sp.group_icon} ${sp.group_name}</div>` : '',
+    sp.biomass_kg ? `<div class="meta-pill"><svg class="ic" viewBox="0 0 24 24"><path d="m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1z"/><path d="m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1z"/><path d="M7 21h10M12 3v18M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2"/></svg> ${sp.biomass_kg >= 1 ? sp.biomass_kg + ' кг' : (sp.biomass_kg*1000).toFixed(0) + ' г'}</div>` : '',
+    seasonHtml,
+  ].join('');
+
+  // tabs content
+  document.getElementById('modal-desc').textContent = sp.description || '';
+  document.getElementById('modal-fact').textContent = sp.interesting_fact || '';
+
+  // threats
+  const threats = sp.threats || [];
+  document.getElementById('modal-threats').innerHTML = threats.map(t =>
+    `<li><span class="threat-icon"><svg class="ic" viewBox="0 0 24 24"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></span>${t}</li>`
+  ).join('') || '<li><span class="threat-icon">—</span>Данные отсутствуют</li>';
+  document.getElementById('modal-conservation').innerHTML = sp.conservation ? '<svg class="ic" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg> ' + sp.conservation : '';
+  document.getElementById('modal-where').innerHTML        = sp.where_to_see  ? '<svg class="ic" viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg> ' + sp.where_to_see  : '';
+
+  // regions
+  document.getElementById('modal-regions').innerHTML = (sp.regions || []).map(r =>
+    `<span class="region-badge">${REGION_NAMES[r] || r}</span>`
+  ).join('') || '<span style="color:var(--rb-muted)">Данные отсутствуют</span>';
+
+  // food web
+  const preyEl = document.getElementById('modal-fw-prey');
+  if (sp.prey?.length) {
+    preyEl.innerHTML = `<p class="fw-label">Охотится на</p><div class="fw-list">${sp.prey.map(p => `<div class="fw-chip" onclick="closeModal();openSpecies(${p.id})">${p.group_icon||''}${p.name_ru}</div>`).join('')}</div>`;
+  } else { preyEl.innerHTML = ''; }
+  const predEl = document.getElementById('modal-fw-pred');
+  if (sp.predators?.length) {
+    predEl.innerHTML = `<p class="fw-label">Хищники</p><div class="fw-list">${sp.predators.map(p => `<div class="fw-chip" onclick="closeModal();openSpecies(${p.id})">${p.group_icon||''}${p.name_ru}</div>`).join('')}</div>`;
+  } else { predEl.innerHTML = ''; }
+
+  // trend chart
+  renderTrendChart(sp.population_trend || sp.population_data || []);
+
+  // collect button
+  const btnCollect = document.getElementById('btn-collect');
+  const xp = XP_MAP[sp.category] || 20;
+  document.getElementById('modal-xp-badge').textContent = `+${xp} XP`;
+  if (sp.collected || state.collectedIds.has(sp.id)) {
+    btnCollect.className = 'btn-collect already';
+    btnCollect.innerHTML = '<svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg> Уже в коллекции';
+    btnCollect.disabled = true;
+  } else {
+    btnCollect.className = 'btn-collect';
+    btnCollect.innerHTML = `<svg class="ic" viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 9.9-1"/></svg> Открыть (+${xp} XP)`;
+    btnCollect.disabled = false;
+  }
+
+  // Switch to first tab
+  switchTab('desc');
+  document.getElementById('modal-backdrop').classList.add('open');
+}
+
+function renderTrendChart(data) {
+  const svg = document.getElementById('trend-svg');
+  const pts  = Array.isArray(data) ? data : [];
+  if (!pts.length) { svg.innerHTML = '<text x="200" y="60" text-anchor="middle" fill="#6b9a74" font-size="12">Нет данных</text>'; return; }
+  const years   = pts.map(p => p.year || p.year);
+  const counts  = pts.map(p => p.count || p.count_estimate || 0);
+  const minY = Math.min(...counts), maxY = Math.max(...counts) || 1;
+  const minX = Math.min(...years),  maxX = Math.max(...years) || minX + 1;
+  const W = 400, H = 100, PAD = 20;
+
+  const px = y => PAD + (y - minX) / (maxX - minX) * (W - PAD*2);
+  const py = c => (H - PAD) - (c - minY) / (maxY - minY) * (H - PAD*2);
+
+  const polyline = pts.map((p,i) => `${px(p.year||years[i])},${py(p.count||p.count_estimate||0)}`).join(' ');
+  const fill     = pts.map((p,i) => `${px(p.year||years[i])},${py(p.count||p.count_estimate||0)}`).join(' ')
+    + ` ${px(maxX)},${H-PAD} ${px(minX)},${H-PAD}`;
+
+  const color = counts[counts.length-1] > counts[0] ? '#4ade80' : '#ef4444';
+  svg.innerHTML = `
+    <polygon points="${fill}" fill="${color}22"/>
+    <polyline points="${polyline}" fill="none" stroke="${color}" stroke-width="2"/>
+    ${pts.map((p,i) => `<circle cx="${px(p.year||years[i])}" cy="${py(p.count||p.count_estimate||0)}" r="3" fill="${color}"/>
+      <text x="${px(p.year||years[i])}" y="${H}" fill="#6b9a74" font-size="9" text-anchor="middle">${p.year||years[i]}</text>
+    `).join('')}
+  `;
+  document.getElementById('trend-source').textContent = pts[pts.length-1]?.source ? `Источник: ${pts[pts.length-1].source}` : '';
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   Toast
+   ══════════════════════════════════════════════════════════════════════════ */
+function showToast(msg, type = 'success', duration = 3000) {
+  const wrap = document.getElementById('rb-toasts');
+  const t = document.createElement('div');
+  t.className = `rb-toast ${type}`;
+  t.innerHTML = msg;
+  wrap.appendChild(t);
+  setTimeout(() => {
+    t.classList.add('out');
+    t.addEventListener('animationend', () => t.remove());
+  }, duration);
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   Random species
+   ══════════════════════════════════════════════════════════════════════════ */
+function openRandomSpecies() {
+  const sp = state.species;
+  if (!sp.length) return;
+  const s = sp[Math.floor(Math.random() * sp.length)];
+  openSpecies(s.id);
+}
+
+async function collectCurrent() {
+  if (!state.current) return;
+  const sp = state.current;
+  if (sp.collected || state.collectedIds.has(sp.id)) return;
+
+  const token = LS.getToken?.() || localStorage.getItem('ls_token');
+  if (!token) { showToast('Войдите в систему, чтобы открывать виды', 'error'); return; }
+
+  const res = await LS.post(`/api/red-book/species/${sp.id}/collect`, { method: 'explore' }).catch(e => ({ error: e.message }));
+  if (res.error && !res.collected) { showToast(res.error, 'error'); return; }
+
+  state.collectedIds.add(sp.id);
+  sp.collected = true;
+  const btn = document.getElementById('btn-collect');
+  btn.className = 'btn-collect already';
+  btn.innerHTML = `<svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg> Открыто! +${res.xp_earned || 20} XP`;
+  btn.disabled = true;
+  showToast(`<svg class="ic" viewBox="0 0 24 24"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z"/><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"/></svg> ${sp.name_ru} добавлен в коллекцию! +${res.xp_earned || 20} XP`, 'success');
+  // Server-side completed quests
+  (res.completed_quests || []).forEach(q => {
+    showToast(`<svg class="ic" viewBox="0 0 24 24"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2z"/></svg> Квест выполнен: «${q.title}»! +${q.xp_reward} XP`, 'success', 5000);
+  });
+  if (res.completed_quests?.length) await loadQuests();
+  else checkQuestProgress();
+  // Update grid card
+  loadSpecies();
+}
+
+function openDailySpecies() {
+  if (state.dailySpecies?.id) openSpecies(state.dailySpecies.id);
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   Quests
+   ══════════════════════════════════════════════════════════════════════════ */
+let questState = { quests: [], drawerQuest: null };
+const QUEST_ICONS = ['<svg class="ic" viewBox="0 0 24 24"><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"/><line x1="8" y1="2" x2="8" y2="18"/><line x1="16" y1="6" x2="16" y2="22"/></svg>','<svg class="ic" viewBox="0 0 24 24"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z"/><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"/></svg>','<svg class="ic" viewBox="0 0 24 24"><path d="M16 7h.01"/><path d="M3.4 18H12a8 8 0 0 0 8-8V7a4 4 0 0 0-7.28-2.3L2 20"/><path d="m20 7 2 .5-2 .5"/><path d="M10 18v3M14 17.75v3.25"/><path d="M7 18a6 6 0 0 0 3.84-10.61"/></svg>','<svg class="ic" viewBox="0 0 24 24"><path d="M12 22c-4 0-8-2-10-6 0-4 2-8 5-10l2 4 2-2 1 3 2-4c3 2 5 6 5 10-2 4-6 5-7 5z"/></svg>','<svg class="ic" viewBox="0 0 24 24"><path d="M2 6c.6.5 1.2 1 2.5 1C7 7 7 5 9.5 5c2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1M2 12c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1M2 18c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/></svg>','<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>','<svg class="ic" viewBox="0 0 24 24"><path d="M4.5 13.5C4 18.538 7.582 21 12 21s8-2.462 8-5.5"/><path d="M4.5 13.5c-1.62-2.808-.16-6.83 3.5-8.5M19.5 13.5c1.62-2.808.16-6.83-3.5-8.5"/><circle cx="8" cy="8" r="2"/><circle cx="16" cy="8" r="2"/></svg>','<svg class="ic" viewBox="0 0 24 24"><path d="M17 9c-2 1-3 3-3 5v4M7 9c2 1 3 3 3 5v4M5 9C2 9 2 7 2 6s1-3 3-3h14c2 0 3 2 3 3s0 3-3 3M7 21h10"/></svg>'];
+const QUEST_COLORS = ['#4ade80','#f97316','#3b82f6','#a855f7','#22d3ee','#eab308'];
+
+async function loadQuests() {
+  const quests = await LS.get('/api/red-book/quests').catch(() => []);
+  questState.quests = quests;
+
+  const section = document.getElementById('quests-section');
+  if (!quests.length) { section.style.display = 'none'; return; }
+  section.style.display = 'block';
+
+  const active    = quests.filter(q => q.user_status === 'active').length;
+  const completed = quests.filter(q => q.user_status === 'completed').length;
+  document.getElementById('quests-sub').textContent = ` · ${completed}/${quests.length} выполнено`;
+
+  renderQuestCards();
+}
+
+function renderQuestCards() {
+  const row  = document.getElementById('quests-row');
+  const qs   = questState.quests;
+  row.innerHTML = qs.map((q, i) => {
+    const ids      = q.species_ids || [];
+    const collectedInQ = ids.filter(id => state.collectedIds.has(id)).length;
+    const pct      = ids.length ? Math.round(collectedInQ / ids.length * 100) : 0;
+    const color    = QUEST_COLORS[i % QUEST_COLORS.length];
+    const icon     = QUEST_ICONS[i % QUEST_ICONS.length];
+    const done     = q.user_status === 'completed';
+    return `<div class="quest-card ${done?'completed':''}" style="--qcolor:${color}" onclick="openQuestDrawer(${q.id})">
+      <span class="quest-icon">${icon}</span>
+      <div class="quest-title">${q.title}</div>
+      <div class="quest-desc">${q.description}</div>
+      <div class="quest-progress-bar"><div class="quest-progress-fill" style="width:${pct}%;background:${color}"></div></div>
+      <div class="quest-progress-text">
+        <span>${collectedInQ} / ${ids.length} видов</span>
+        ${done ? '<span class="quest-done-badge"><svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg> Выполнен</span>' : `<span class="quest-xp-badge">+${q.xp_reward} XP</span>`}
+      </div>
+    </div>`;
+  }).join('');
+}
+
+function openQuestDrawer(questId) {
+  const q = questId ? questState.quests.find(q => q.id === questId) : questState.quests[0];
+  if (!q) return;
+  questState.drawerQuest = q;
+
+  const ids   = q.species_ids || [];
+  const i     = questState.quests.indexOf(q);
+  const color = QUEST_COLORS[i % QUEST_COLORS.length];
+  const icon  = QUEST_ICONS[i % QUEST_ICONS.length];
+
+  document.getElementById('qd-icon').innerHTML = icon;
+  document.getElementById('qd-title').textContent = q.title;
+  document.getElementById('qd-desc').textContent  = q.description;
+
+  const done = q.user_status === 'completed';
+  const statusBadge = document.getElementById('qd-status-badge');
+  statusBadge.innerHTML = done
+    ? '<span style="background:rgba(74,222,128,.15);border:1px solid rgba(74,222,128,.3);color:#4ade80;font-size:11px;font-weight:700;padding:3px 10px;border-radius:8px"><svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg> Выполнен</span>'
+    : q.user_status === 'active'
+      ? '<span style="background:rgba(59,130,246,.15);border:1px solid rgba(59,130,246,.3);color:#60a5fa;font-size:11px;font-weight:700;padding:3px 10px;border-radius:8px">В прогрессе</span>'
+      : '';
+
+  document.getElementById('qd-meta').innerHTML = `
+    <div style="background:rgba(234,179,8,.15);border:1px solid rgba(234,179,8,.3);color:#fde047;font-size:11px;font-weight:700;padding:4px 12px;border-radius:8px">+${q.xp_reward} XP</div>
+    <div style="background:rgba(255,255,255,.05);border:1px solid var(--rb-border);font-size:11px;color:var(--rb-muted);padding:4px 12px;border-radius:8px">${ids.length} видов</div>
+  `;
+
+  const startBtn = document.getElementById('qd-start-btn');
+  startBtn.style.display = (q.user_status === 'locked' || q.user_status === 'unknown') ? 'block' : 'none';
+
+  // Species list
+  const listEl = document.getElementById('quest-species-list');
+  if (ids.length) {
+    // Try to match with known species
+    const speciesMap = {};
+    state.species.forEach(s => speciesMap[s.id] = s);
+    listEl.innerHTML = ids.map(id => {
+      const sp = speciesMap[id];
+      const done = state.collectedIds.has(id);
+      return `<div class="qsp-row ${done?'done':''}" onclick="closeQuestDrawer();openSpecies(${id})">
+        <span class="qsp-icon">${sp?.group_icon || '<svg class="ic" viewBox="0 0 24 24"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z"/><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"/></svg>'}</span>
+        <span class="qsp-name">${sp?.name_ru || `Вид #${id}`}</span>
+        ${done ? '<span class="qsp-check"><svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>' : '<span class="qsp-lock"><svg class="ic" viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></span>'}
+      </div>`;
+    }).join('');
+  } else {
+    listEl.innerHTML = '<p style="color:var(--rb-muted);font-size:13px">Нет видов в квесте</p>';
+  }
+
+  document.getElementById('quest-drawer-bd').classList.add('open');
+}
+
+function closeQuestDrawer(e) {
+  if (e && e.target !== document.getElementById('quest-drawer-bd')) return;
+  document.getElementById('quest-drawer-bd').classList.remove('open');
+  questState.drawerQuest = null;
+}
+
+async function startCurrentQuest() {
+  const q = questState.drawerQuest;
+  if (!q) return;
+  await LS.post(`/api/red-book/quests/${q.id}/start`, {}).catch(() => {});
+  q.user_status = 'active';
+  document.getElementById('qd-start-btn').style.display = 'none';
+  const _badge = document.getElementById('qd-status-badge');
+  if (_badge) _badge.innerHTML = '<span style="background:rgba(59,130,246,.15);border:1px solid rgba(59,130,246,.3);color:#60a5fa;font-size:11px;font-weight:700;padding:3px 10px;border-radius:8px">В прогрессе</span>';
+  renderQuestCards();
+  showToast('<svg class="ic" viewBox="0 0 24 24"><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"/><line x1="8" y1="2" x2="8" y2="18"/><line x1="16" y1="6" x2="16" y2="22"/></svg> Квест начат!', 'success');
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   Sightings
+   ══════════════════════════════════════════════════════════════════════════ */
+const REGION_LABELS = {
+  vitebsk: 'Витебская', minsk: 'Минская', grodno: 'Гродненская',
+  brest: 'Брестская', gomel: 'Гомельская', mogilev: 'Могилёвская',
+};
+
+async function loadSightings(speciesId) {
+  const feed = document.getElementById('sightings-feed');
+  feed.innerHTML = '<p style="color:var(--rb-muted);font-size:13px">Загрузка...</p>';
+  const list = await LS.get(`/api/red-book/sightings?species_id=${speciesId}`).catch(() => []);
+  if (!list.length) {
+    feed.innerHTML = '<p style="color:var(--rb-muted);font-size:13px">Наблюдений пока нет. Будьте первым!</p>';
+    return;
+  }
+  const fmt = dt => new Date(dt).toLocaleDateString('ru', { day:'2-digit', month:'short', year:'numeric' });
+  feed.innerHTML = list.map(s => `
+    <div class="sight-item">
+      <div class="sight-header">
+        <span class="sight-user"><svg class="ic" viewBox="0 0 24 24"><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> ${s.user_name}</span>
+        ${s.region_code ? `<span class="sight-region">${REGION_LABELS[s.region_code] || s.region_code}</span>` : ''}
+        ${s.confirmed_by_teacher ? '<span class="sight-verified"><svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg> Подтверждено</span>' : ''}
+        <span class="sight-date">${fmt(s.created_at)}</span>
+      </div>
+      ${s.description ? `<div class="sight-desc">${s.description}</div>` : ''}
+    </div>`).join('');
+}
+
+async function submitSighting() {
+  if (!state.current) return;
+  const token = LS.getToken?.() || localStorage.getItem('ls_token');
+  if (!token) { showToast('Войдите в систему', 'error'); return; }
+
+  const region  = document.getElementById('sight-region').value;
+  const desc    = document.getElementById('sight-desc').value.trim();
+  const res = await LS.post('/api/red-book/sightings', {
+    species_id: state.current.id,
+    region_code: region,
+    description: desc,
+  }).catch(e => ({ error: e.message }));
+
+  if (res.error) { showToast(res.error, 'error'); return; }
+  document.getElementById('sight-desc').value = '';
+  document.getElementById('sight-region').value = '';
+  showToast('<svg class="ic" viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg> Наблюдение добавлено!', 'success');
+  loadSightings(state.current.id);
+}
+
+function checkQuestProgress() {
+  questState.quests.forEach(q => {
+    if (q.user_status !== 'active') return;
+    const ids = q.species_ids || [];
+    const done = ids.every(id => state.collectedIds.has(id));
+    if (done && q.user_status !== 'completed') {
+      q.user_status = 'completed';
+      showToast(`<svg class="ic" viewBox="0 0 24 24"><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"/><line x1="8" y1="2" x2="8" y2="18"/><line x1="16" y1="6" x2="16" y2="22"/></svg> Квест выполнен: «${q.title}»! +${q.xp_reward} XP`, 'success', 5000);
+    }
+  });
+  renderQuestCards();
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   Modal tabs
+   ══════════════════════════════════════════════════════════════════════════ */
+function switchTab(name) {
+  document.querySelectorAll('.modal-tab').forEach((t,i) => {
+    const tabNames = ['desc','threats','area','web','trend','sightings'];
+    t.classList.toggle('active', tabNames[i] === name);
+  });
+  document.querySelectorAll('.modal-tab-content').forEach(c => {
+    c.classList.toggle('active', c.id === 'tab-'+name);
+  });
+  if (name === 'sightings' && state.current) loadSightings(state.current.id);
+}
+function closeModal() {
+  document.getElementById('modal-backdrop').classList.remove('open');
+  state.current = null;
+}
+function closeModalOnBackdrop(e) {
+  if (e.target === document.getElementById('modal-backdrop')) closeModal();
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   Scroll helper
+   ══════════════════════════════════════════════════════════════════════════ */
+function scrollToGallery() {
+  document.getElementById('gallery').scrollIntoView({ behavior: 'smooth' });
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   Sidebar toggle
+   ══════════════════════════════════════════════════════════════════════════ */
+function toggleSidebar() {
+  const app = document.getElementById('app');
+  app.classList.toggle('sb-collapsed');
+  localStorage.setItem('ls_sb_collapsed', app.classList.contains('sb-collapsed') ? '1' : '0');
+  lucide.createIcons();
+}
+
+/* ══════════════════════════════════════════════════════════════════════════
+   Three.js Hero Forest Scene
+   ══════════════════════════════════════════════════════════════════════════ */
+function initHero() {
+  const canvas = document.getElementById('hero-canvas');
+  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: false });
+  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+  renderer.setClearColor(0x0a1a0d);
+
+  const scene  = new THREE.Scene();
+  scene.fog    = new THREE.FogExp2(0x071209, 0.035);
+
+  const camera = new THREE.PerspectiveCamera(60, canvas.clientWidth / canvas.clientHeight, 0.1, 200);
+  camera.position.set(0, 2, 18);
+
+  // Resize
+  function onResize() {
+    const w = canvas.parentElement.clientWidth, h = canvas.parentElement.clientHeight;
+    renderer.setSize(w, h, false);
+    camera.aspect = w / h;
+    camera.updateProjectionMatrix();
+  }
+  window.addEventListener('resize', onResize);
+  onResize();
+
+  // Lighting
+  const ambient = new THREE.AmbientLight(0x0d2e10, 2);
+  scene.add(ambient);
+  const sun = new THREE.DirectionalLight(0x88ffaa, 1.5);
+  sun.position.set(5, 10, 5);
+  scene.add(sun);
+  const fill = new THREE.PointLight(0x0066ff, 0.3, 50);
+  fill.position.set(-10, 5, 0);
+  scene.add(fill);
+
+  // Ground
+  const groundGeo  = new THREE.PlaneGeometry(80, 80, 1, 1);
+  const groundMat  = new THREE.MeshLambertMaterial({ color: 0x071a09 });
+  const ground     = new THREE.Mesh(groundGeo, groundMat);
+  ground.rotation.x = -Math.PI / 2;
+  scene.add(ground);
+
+  // Trees
+  function makeTree(x, z, scale) {
+    const g = new THREE.Group();
+    const trunkH = (0.8 + Math.random() * 0.4) * scale;
+    const trunk  = new THREE.Mesh(
+      new THREE.CylinderGeometry(0.06*scale, 0.1*scale, trunkH, 6),
+      new THREE.MeshLambertMaterial({ color: 0x3b2010 })
+    );
+    trunk.position.y = trunkH / 2;
+    g.add(trunk);
+    const levels = 3 + Math.floor(Math.random() * 2);
+    for (let i = 0; i < levels; i++) {
+      const r   = (0.7 - i * 0.15) * scale;
+      const h   = (0.7 - i * 0.08) * scale;
+      const col = new THREE.Color().setHSL(0.33, 0.6, 0.1 + i * 0.04);
+      const cone = new THREE.Mesh(
+        new THREE.ConeGeometry(r, h, 7),
+        new THREE.MeshLambertMaterial({ color: col })
+      );
+      cone.position.y = trunkH + h * 0.4 + i * h * 0.55;
+      g.add(cone);
+    }
+    g.position.set(x, 0, z);
+    g.rotation.y = Math.random() * Math.PI * 2;
+    return g;
+  }
+
+  for (let i = 0; i < 80; i++) {
+    const angle  = Math.random() * Math.PI * 2;
+    const radius = 6 + Math.random() * 25;
+    const scale  = 0.6 + Math.random() * 1.4;
+    scene.add(makeTree(Math.cos(angle) * radius, Math.sin(angle) * radius, scale));
+  }
+
+  // Firefly particles
+  const COUNT = 300;
+  const positions = new Float32Array(COUNT * 3);
+  const phases    = new Float32Array(COUNT);
+  for (let i = 0; i < COUNT; i++) {
+    positions[i*3]   = (Math.random() - 0.5) * 40;
+    positions[i*3+1] = Math.random() * 8;
+    positions[i*3+2] = (Math.random() - 0.5) * 40;
+    phases[i]        = Math.random() * Math.PI * 2;
+  }
+  const pgeo = new THREE.BufferGeometry();
+  pgeo.setAttribute('position', new THREE.BufferAttribute(positions.slice(), 3));
+  const pmat = new THREE.PointsMaterial({ color: 0x88ffaa, size: 0.12, transparent: true, opacity: 0.6 });
+  const particles = new THREE.Points(pgeo, pmat);
+  scene.add(particles);
+
+  // Animate
+  let t = 0;
+  function animate() {
+    requestAnimationFrame(animate);
+    t += 0.008;
+    // Slow camera drift
+    camera.position.x = Math.sin(t * 0.15) * 2;
+    camera.position.y = 2 + Math.sin(t * 0.1) * 0.3;
+    camera.lookAt(0, 3, 0);
+
+    // Firefly flicker + drift
+    const pos = pgeo.attributes.position;
+    for (let i = 0; i < COUNT; i++) {
+      pos.array[i*3+1] += Math.sin(t * 2 + phases[i]) * 0.003;
+      pos.array[i*3]   += Math.cos(t + phases[i] * 0.5) * 0.002;
+    }
+    pos.needsUpdate = true;
+    pmat.opacity = 0.4 + Math.sin(t * 3) * 0.2;
+
+    renderer.render(scene, camera);
+  }
+  animate();
+}
+
+init();
+</script>
+</body>
+</html>
diff --git a/frontend/test-result.html b/frontend/test-result.html
new file mode 100644
index 0000000..f9580d5
--- /dev/null
+++ b/frontend/test-result.html
@@ -0,0 +1,377 @@
+<!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" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css" crossorigin="anonymous" />
+  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js" crossorigin="anonymous"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js" crossorigin="anonymous"
+    onload="window._katexReady=true; if(window._katexCb){window._katexCb(); window._katexCb=null;}"></script>
+  <style>
+
+    .container { max-width: 820px; margin: 0 auto; padding: 40px 20px 80px; }
+
+    /* ── Score card ── */
+    .score-card { background: var(--surface); backdrop-filter: var(--blur); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 40px; text-align: center; box-shadow: var(--shadow); margin-bottom: 32px; position: relative; overflow: hidden; }
+    .score-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(6,214,224,0.05), rgba(155,93,229,0.05)); pointer-events: none; }
+    .score-emoji { font-size: 3rem; margin-bottom: 12px; }
+    .score-title { font-family: 'Unbounded', sans-serif; font-size: 1.2rem; font-weight: 800; margin-bottom: 8px; }
+    .score-big { font-family: 'Unbounded', sans-serif; font-size: 3.5rem; font-weight: 900; background: var(--grad-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; margin: 16px 0; }
+    .score-meta { font-size: 0.9rem; color: var(--text-2); margin-bottom: 28px; }
+    .score-stats { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; margin-bottom: 28px; }
+    .score-stat { text-align: center; }
+    .score-stat-val { font-family: 'Unbounded', sans-serif; font-size: 1.4rem; font-weight: 700; color: var(--text); }
+    .score-stat-val.correct { color: var(--green); }
+    .score-stat-val.wrong   { color: var(--pink); }
+    .score-stat-label { font-size: 0.75rem; color: var(--text-3); margin-top: 2px; }
+    .score-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
+    /* ── XP Animation ── */
+    .xp-anim-wrap { margin-top: 24px; text-align: center; position: relative; min-height: 80px; }
+    .xp-anim-total {
+      font-family: 'Unbounded', sans-serif; font-size: 1.8rem; font-weight: 900;
+      background: linear-gradient(135deg, #9B5DE5, #06D6E0); -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent; background-clip: text;
+      opacity: 0; transform: scale(0.5); transition: all 0.5s cubic-bezier(0.34,1.56,0.64,1);
+    }
+    .xp-anim-total.show { opacity: 1; transform: scale(1); }
+    .xp-anim-breakdown {
+      display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
+      margin-top: 12px;
+    }
+    .xp-chip {
+      display: inline-flex; align-items: center; gap: 6px;
+      padding: 6px 14px; border-radius: 99px;
+      font-family: 'Unbounded', sans-serif; font-size: 0.7rem; font-weight: 800;
+      opacity: 0; transform: translateY(16px);
+      transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
+    }
+    .xp-chip.show { opacity: 1; transform: translateY(0); }
+    .xp-chip.base { background: rgba(155,93,229,0.1); border: 1px solid rgba(155,93,229,0.2); color: #9B5DE5; }
+    .xp-chip.correct { background: rgba(6,214,100,0.08); border: 1px solid rgba(6,214,100,0.2); color: #059652; }
+    .xp-chip.bonus { background: rgba(6,214,224,0.08); border: 1px solid rgba(6,214,224,0.2); color: #06B6D4; }
+    .xp-chip.perfect { background: linear-gradient(135deg, rgba(255,215,0,0.12), rgba(255,165,0,0.08)); border: 1px solid rgba(255,215,0,0.3); color: #D97706; }
+    .xp-float {
+      position: absolute; left: 50%; font-family: 'Unbounded', sans-serif;
+      font-size: 1rem; font-weight: 900; color: #9B5DE5; pointer-events: none;
+      animation: xpFloat 1.2s ease-out forwards;
+    }
+    @keyframes xpFloat {
+      0%   { opacity: 1; transform: translate(-50%, 0) scale(0.6); }
+      30%  { opacity: 1; transform: translate(-50%, -20px) scale(1.1); }
+      100% { opacity: 0; transform: translate(-50%, -60px) scale(0.8); }
+    }
+    .xp-lvl-up {
+      display: block; text-align: center; margin-top: 10px;
+      font-size: 0.75rem; font-weight: 700; color: #06D6E0;
+      opacity: 0; transition: opacity 0.5s ease;
+    }
+    .xp-lvl-up.show { opacity: 1; animation: xpPulse 1.5s ease infinite; }
+    @keyframes xpPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
+    .btn-primary { padding: 12px 28px; border: none; border-radius: var(--r-pill); background: var(--grad-1); color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.9rem; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-block; transition: transform var(--tr), box-shadow var(--tr); }
+    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(6,214,224,0.4); }
+    .btn-ghost { padding: 12px 28px; border: 1.5px solid var(--border-h); border-radius: var(--r-pill); background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.9rem; font-weight: 600; color: var(--text); cursor: pointer; text-decoration: none; display: inline-block; transition: all var(--tr); }
+    .btn-ghost:hover { border-color: var(--violet); color: var(--violet); }
+
+    /* ── Review ── */
+    .review-title { font-family: 'Unbounded', sans-serif; font-size: 1rem; font-weight: 700; margin-bottom: 20px; }
+    .review-item { background: var(--surface); backdrop-filter: var(--blur); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px 28px; margin-bottom: 16px; box-shadow: 0 2px 12px rgba(15,23,42,0.06); }
+    .review-item.correct { border-left: 3px solid var(--green); }
+    .review-item.wrong   { border-left: 3px solid var(--pink); }
+    .review-item.skipped { border-left: 3px solid var(--text-3); }
+    .review-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
+    .review-badge { padding: 3px 10px; border-radius: var(--r-pill); font-size: 0.72rem; font-weight: 700; }
+    .review-badge.correct { background: rgba(6,214,100,0.1); color: var(--green); }
+    .review-badge.wrong   { background: rgba(241,91,181,0.1); color: var(--pink); }
+    .review-badge.skipped { background: rgba(15,23,42,0.06); color: var(--text-3); }
+    .review-qnum { font-size: 0.78rem; color: var(--text-3); font-weight: 600; }
+    .review-text { font-size: 0.92rem; line-height: 1.6; margin-bottom: 14px; }
+    .review-opts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
+    .review-opt { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; font-size: 0.85rem; }
+    .review-opt.correct-opt { background: rgba(6,214,100,0.08); color: var(--green); font-weight: 600; }
+    .review-opt.chosen-wrong { background: rgba(241,91,181,0.08); color: var(--pink); }
+    .review-opt.chosen-correct { background: rgba(6,214,100,0.08); color: var(--green); font-weight: 600; }
+    .review-opt-icon { font-size: 0.9rem; width: 18px; text-align: center; flex-shrink: 0; }
+    .review-answer { padding: 10px 14px; border-radius: 10px; font-size: 0.85rem; margin-bottom: 14px; }
+    .review-answer.correct { background: rgba(6,214,100,0.08); color: var(--green); }
+    .review-answer.wrong   { background: rgba(241,91,181,0.08); color: var(--pink); }
+    .review-answer.skipped { background: rgba(15,23,42,0.04); color: var(--text-3); }
+    .review-answer-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; margin-bottom: 4px; }
+    .review-match-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; margin-bottom: 14px; }
+    .review-match-table th { text-align: left; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3); padding: 4px 8px; }
+    .review-match-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
+    .review-match-table .match-correct { color: var(--green); }
+    .review-match-table .match-wrong   { color: var(--pink); }
+    .review-explanation { font-size: 0.83rem; color: var(--text-2); background: rgba(155,93,229,0.05); border: 1px solid rgba(155,93,229,0.12); border-radius: 10px; padding: 10px 14px; line-height: 1.6; }
+    .review-explanation strong { color: var(--violet); }
+
+    .state-screen { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; }
+    .spinner { width: 40px; height: 40px; border: 3px solid var(--border); border-top-color: var(--violet); border-radius: 50%; animation: spin 0.8s linear infinite; }
+    @keyframes spin { to { transform: rotate(360deg); } }
+    @media (max-width: 768px) {
+      .container { padding: 20px 14px 60px; }
+      .score-card { padding: 24px 18px; }
+      .score-big { font-size: 2.8rem; }
+      .score-stats { gap: 18px; }
+      .review-item { padding: 16px 14px; }
+      .score-actions { gap: 8px; }
+      .score-actions .btn-primary, .score-actions .btn-ghost { padding: 11px 20px; font-size: 0.85rem; }
+    }
+    @media (max-width: 480px) {
+      .container { padding: 12px 10px 60px; }
+      .score-card { padding: 20px 14px; }
+      .score-big { font-size: 2.2rem; }
+      .score-stats { gap: 12px; }
+      .score-stat-val { font-size: 1.1rem; }
+      .xp-anim-total { font-size: 1.3rem; }
+      .score-actions { flex-direction: column; align-items: stretch; }
+      .score-actions .btn-primary, .score-actions .btn-ghost { text-align: center; }
+    }
+  </style>
+</head>
+<body>
+  <nav class="nav">
+    <a href="/dashboard" class="nav-logo">Learn<span>Space</span></a>
+  </nav>
+
+  <div class="state-screen" id="screen-loading">
+    <div class="spinner"></div>
+  </div>
+
+  <div class="container" id="screen-result" style="display:none">
+
+    <!-- Score -->
+    <div class="score-card" id="score-card"></div>
+
+    <!-- Review -->
+    <div class="review-title">Разбор ответов</div>
+    <div id="review-list"></div>
+
+  </div>
+
+  <script src="/js/api.js"></script>
+  <script>
+    if (!LS.requireAuth()) throw new Error();
+
+    const KATEX_OPTS = {
+      delimiters: [
+        { left: '\\(', right: '\\)', display: false },
+        { left: '\\[', right: '\\]', display: true  },
+      ],
+      throwOnError: false,
+    };
+    function renderMath(el) {
+      if (!el) return;
+      const run = () => { if (window.renderMathInElement) renderMathInElement(el, KATEX_OPTS); };
+      if (window._katexReady) run(); else window._katexCb = run;
+    }
+
+    const session_id = Number(new URLSearchParams(location.search).get('session'));
+    if (!session_id) window.location.href = '/dashboard';
+
+    function emoji(pct) {
+      if (pct >= 90) return lsIcon('trophy', 36);
+      if (pct >= 75) return lsIcon('party', 36);
+      if (pct >= 60) return lsIcon('thumbs-up', 36);
+      if (pct >= 40) return lsIcon('muscle', 36);
+      return lsIcon('books', 36);
+    }
+
+    function fmt(sec) {
+      const m = Math.floor(sec / 60), s = sec % 60;
+      return m ? `${m} мин ${s} сек` : `${s} сек`;
+    }
+
+    async function load() {
+      try {
+        const d = await LS.getResult(session_id);
+
+        // Score card
+        const pct = d.percent;
+        const correct = d.review.filter(q => q.is_correct).length;
+        const skipped = d.review.filter(q => q.is_correct === null || q.is_correct === undefined).length;
+        const wrong   = d.review.length - correct - skipped;
+
+        document.getElementById('score-card').innerHTML = `
+          <div class="score-emoji">${emoji(pct)}</div>
+          <div class="score-title">Тест завершён!</div>
+          <div class="score-big">${pct}%</div>
+          <div class="score-meta">${d.score} из ${d.total} правильных ответов</div>
+          <div class="score-stats">
+            <div class="score-stat"><div class="score-stat-val correct">${correct}</div><div class="score-stat-label">Правильно</div></div>
+            <div class="score-stat"><div class="score-stat-val wrong">${wrong}</div><div class="score-stat-label">Неверно</div></div>
+            <div class="score-stat"><div class="score-stat-val">${skipped}</div><div class="score-stat-label">Пропущено</div></div>
+          </div>
+          <div class="score-actions">
+            <a href="/library" class="btn-primary">К тестам</a>
+            <a href="/dashboard" class="btn-ghost">В кабинет</a>
+          </div>
+          <div id="xp-slot"></div>`;
+
+        // XP earned — animated breakdown
+        try {
+          const gam = await LS.getGamificationMe();
+          if (gam) {
+            const bonuses = [];
+            bonuses.push({ label: 'Прохождение', xp: 50, cls: 'base' });
+            if (correct > 0) bonuses.push({ label: `${correct} верных`, xp: correct * 10, cls: 'correct' });
+            if (pct >= 90) bonuses.push({ label: 'Отличный результат', xp: 100, cls: 'bonus' });
+            if (pct >= 100) bonuses.push({ label: 'Идеально!', xp: 200, cls: 'perfect' });
+            // Combo bonus
+            const mc = d.maxCombo || 0;
+            if (mc >= 10) bonuses.push({ label: `Комбо x${mc}`, xp: 75, cls: 'perfect' });
+            else if (mc >= 5) bonuses.push({ label: `Комбо x${mc}`, xp: 30, cls: 'bonus' });
+            else if (mc >= 3) bonuses.push({ label: `Комбо x${mc}`, xp: 15, cls: 'bonus' });
+            const totalXP = bonuses.reduce((s, b) => s + b.xp, 0);
+
+            const xpSlot = document.getElementById('xp-slot');
+            xpSlot.innerHTML = `
+              <div class="xp-anim-wrap" id="xp-anim-wrap">
+                <div class="xp-anim-total" id="xp-total">+0 XP</div>
+                <div class="xp-anim-breakdown" id="xp-chips">
+                  ${bonuses.map(b => `<div class="xp-chip ${b.cls}" data-xp="${b.xp}">${lsIcon('zap', 14)} ${b.label}: +${b.xp}</div>`).join('')}
+                </div>
+                <div class="xp-lvl-up" id="xp-lvl-info">Уровень ${gam.level} · ${gam.rank}</div>
+              </div>`;
+
+            // Animate chips one by one, then total
+            const chips = xpSlot.querySelectorAll('.xp-chip');
+            const wrap = document.getElementById('xp-anim-wrap');
+            const totalEl = document.getElementById('xp-total');
+            let runningXP = 0;
+
+            for (let i = 0; i < chips.length; i++) {
+              await new Promise(r => setTimeout(r, 350));
+              chips[i].classList.add('show');
+              const chipXP = Number(chips[i].dataset.xp);
+              // Float particle
+              const fl = document.createElement('div');
+              fl.className = 'xp-float';
+              fl.textContent = `+${chipXP}`;
+              fl.style.top = '0px';
+              fl.style.marginLeft = `${(Math.random() - 0.5) * 60}px`;
+              wrap.appendChild(fl);
+              setTimeout(() => fl.remove(), 1200);
+              // Count up total
+              const from = runningXP, to = runningXP + chipXP;
+              const start = performance.now();
+              totalEl.classList.add('show');
+              await new Promise(resolve => {
+                function tick(now) {
+                  const t = Math.min(1, (now - start) / 400);
+                  const ease = 1 - Math.pow(1 - t, 3);
+                  const cur = Math.round(from + (to - from) * ease);
+                  totalEl.textContent = `+${cur} XP`;
+                  if (t < 1) requestAnimationFrame(tick); else resolve();
+                }
+                requestAnimationFrame(tick);
+              });
+              runningXP = to;
+            }
+
+            // Show level info
+            if (gam.level > 1) {
+              await new Promise(r => setTimeout(r, 200));
+              document.getElementById('xp-lvl-info').classList.add('show');
+            }
+          }
+        } catch {}
+
+        // Review
+        const list = document.getElementById('review-list');
+        d.review.forEach((q, i) => {
+          const type = q.type || 'single';
+          const hasAnswer = q.chosen_option_id || q.answer_text;
+          const status = !hasAnswer ? 'skipped' : q.is_correct ? 'correct' : 'wrong';
+          const badgeText = { correct: `${lsIcon('check', 14)} Верно`, wrong: `${lsIcon('x', 14)} Неверно`, skipped: '— Пропущено' };
+
+          let bodyHtml = '';
+
+          if (type === 'short_answer') {
+            const userAns = q.answer_text || '';
+            const correctAns = q.correct_text || '';
+            bodyHtml = `<div class="review-answer ${status}">
+              <div class="review-answer-label">Ваш ответ</div>
+              ${userAns ? esc(userAns) : '<em>Нет ответа</em>'}
+            </div>`;
+            if (!q.is_correct && correctAns) {
+              bodyHtml += `<div class="review-answer correct">
+                <div class="review-answer-label">Правильный ответ</div>
+                ${esc(correctAns)}
+              </div>`;
+            }
+          } else if (type === 'multi') {
+            const chosen = (() => { try { return JSON.parse(q.answer_text || '[]'); } catch { return []; } })();
+            bodyHtml = '<div class="review-opts">' + q.options.map(o => {
+              const isCorrect = o.is_correct;
+              const isChosen  = chosen.includes(o.id);
+              let cls = '', icon = '<svg class="ic" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/></svg>';
+              if (isCorrect && isChosen) { cls = 'chosen-correct'; icon = lsIcon('check', 14); }
+              else if (isCorrect) { cls = 'correct-opt'; icon = lsIcon('check', 14); }
+              else if (isChosen) { cls = 'chosen-wrong'; icon = lsIcon('x', 14); }
+              return `<div class="review-opt ${cls}"><span class="review-opt-icon">${icon}</span>${esc(o.text)}</div>`;
+            }).join('') + '</div>';
+          } else if (type === 'matching') {
+            const pairs = (() => { try { return JSON.parse(q.answer_text || '{}'); } catch { return {}; } })();
+            bodyHtml = `<table class="review-match-table"><thead><tr><th>Элемент</th><th>Ваш ответ</th><th>Правильно</th></tr></thead><tbody>` +
+              q.options.map(o => {
+                const userPair = pairs[String(o.id)] || '';
+                const isRight = userPair === o.match_pair;
+                return `<tr>
+                  <td>${esc(o.text)}</td>
+                  <td class="${isRight ? 'match-correct' : 'match-wrong'}">${userPair ? esc(userPair) : '<em>—</em>'}</td>
+                  <td class="match-correct">${esc(o.match_pair || '')}</td>
+                </tr>`;
+              }).join('') + '</tbody></table>';
+          } else {
+            // single / true_false
+            bodyHtml = '<div class="review-opts">' + q.options.map(o => {
+              const isCorrect = o.is_correct;
+              const isChosen  = o.id === q.chosen_option_id;
+              let cls = '', icon = '<svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg>';
+              if (isCorrect) { cls = 'correct-opt'; icon = lsIcon('check', 14); }
+              else if (isChosen && !isCorrect) { cls = 'chosen-wrong'; icon = lsIcon('x', 14); }
+              return `<div class="review-opt ${cls}"><span class="review-opt-icon">${icon}</span>${esc(o.text)}</div>`;
+            }).join('') + '</div>';
+          }
+
+          const expl = q.explanation
+            ? `<div class="review-explanation"><strong>Пояснение:</strong> ${esc(q.explanation)}</div>`
+            : '';
+
+          list.innerHTML += `
+            <div class="review-item ${status}">
+              <div class="review-header">
+                <span class="review-qnum">Вопрос ${i + 1}</span>
+                <span class="review-badge ${status}">${badgeText[status]}</span>
+              </div>
+              <div class="review-text">${esc(q.text)}</div>
+              ${bodyHtml}
+              ${expl}
+            </div>`;
+        });
+
+        renderMath(list);
+
+        // Show/hide review based on test setting
+        if (d.show_answers === 0) {
+          document.querySelector('.review-title').style.display = 'none';
+          list.style.display = 'none';
+        }
+
+        document.getElementById('screen-loading').style.display = 'none';
+        document.getElementById('screen-result').style.display  = '';
+      } catch (err) {
+        document.getElementById('screen-loading').innerHTML =
+          `<div style="color:var(--pink);font-weight:600">${esc(err.message)}</div>
+           <a href="/dashboard" class="btn-primary" style="margin-top:12px">На главную</a>`;
+      }
+    }
+
+    load();
+  </script>
+</body>
+</html>
diff --git a/frontend/test-run.html b/frontend/test-run.html
new file mode 100644
index 0000000..009ee35
--- /dev/null
+++ b/frontend/test-run.html
@@ -0,0 +1,818 @@
+<!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" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css" crossorigin="anonymous" />
+  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js" crossorigin="anonymous"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js" crossorigin="anonymous"
+    onload="window._katexReady = true; if(window._katexReadyCb) window._katexReadyCb()"></script>
+  <style>
+    .nav-timer { font-family: 'Unbounded', sans-serif; font-size: 1rem; font-weight: 700; color: var(--text); }
+    .nav-timer.warning { color: var(--pink); }
+
+    /* ── layout ── */
+    .layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; max-width: 1100px; margin: 0 auto; padding: 28px 20px 60px; }
+    @media (max-width: 768px) {
+      .layout { grid-template-columns: 1fr; padding: 16px 14px 60px; }
+      .sidebar { order: 2; }
+      .q-card { padding: 20px 18px; }
+      .q-text { font-size: 0.95rem; }
+      .confirm-box { padding: 28px 20px; }
+      .confirm-actions { flex-wrap: wrap; }
+      .confirm-cancel, .confirm-ok { flex: 1; }
+    }
+    @media (max-width: 480px) {
+      .layout { padding: 12px 10px 60px; gap: 14px; }
+      .q-card { padding: 16px 14px; }
+      .dot { width: 24px; height: 24px; font-size: 0.64rem; border-radius: 6px; }
+      .q-opt { padding: 10px 12px; gap: 10px; }
+      .q-text { font-size: 0.9rem; }
+      .q-match-row { flex-direction: column; gap: 8px; }
+      .q-match-sel { width: 100%; }
+    }
+
+    /* ── sidebar ── */
+    .sidebar { display: flex; flex-direction: column; gap: 16px; }
+    .card { background: var(--surface); backdrop-filter: var(--blur); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow); }
+    .card-label { font-size: 0.75rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
+    .progress-bar { height: 6px; background: var(--border); border-radius: 99px; overflow: hidden; margin-bottom: 8px; }
+    .progress-fill { height: 100%; background: var(--grad-1); border-radius: 99px; transition: width 0.4s ease; }
+    .progress-text { font-size: 0.82rem; color: var(--text-2); }
+    .dots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
+    .dot { width: 28px; height: 28px; border-radius: 8px; border: 1.5px solid var(--border-h); background: transparent; font-size: 0.7rem; font-weight: 700; color: var(--text-3); cursor: pointer; transition: all var(--tr); display: flex; align-items: center; justify-content: center; }
+    .dot.answered { background: rgba(6,214,224,0.12); border-color: var(--cyan); color: var(--text); }
+    .dot.current { background: var(--violet); border-color: var(--violet); color: #fff; }
+    .btn-finish { width: 100%; padding: 13px; border: none; border-radius: var(--r-pill); background: var(--grad-1); color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: transform var(--tr), box-shadow var(--tr); }
+    .btn-finish:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(6,214,224,0.4); }
+    .btn-finish:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
+
+    /* ── question ── */
+    .q-area { display: flex; flex-direction: column; gap: 0; }
+    .q-card { background: var(--surface); backdrop-filter: var(--blur); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px 32px; box-shadow: var(--shadow); display: none; }
+    .q-card.active { display: block; }
+    .q-num-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 16px; }
+    .q-num-badge span { background: var(--grad-1); color: #fff; padding: 3px 10px; border-radius: var(--r-pill); font-size: 0.72rem; }
+    .q-type-hint { display: inline-block; font-size: 0.72rem; color: var(--text-3); background: rgba(15,23,42,0.05); padding: 2px 8px; border-radius: var(--r-pill); margin-left: 8px; }
+    .q-text { font-size: 1rem; line-height: 1.7; color: var(--text); margin-bottom: 24px; }
+    .q-options { display: flex; flex-direction: column; gap: 10px; }
+    .q-opt { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border: 1.5px solid var(--border-h); border-radius: 14px; cursor: pointer; transition: all var(--tr); user-select: none; }
+    .q-opt:hover { border-color: var(--violet); background: rgba(155,93,229,0.04); }
+    .q-opt.selected { border-color: var(--cyan); background: rgba(6,214,224,0.06); }
+    .q-opt-key { width: 28px; height: 28px; border-radius: 8px; background: rgba(15,23,42,0.06); display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; color: var(--text-3); flex-shrink: 0; transition: all var(--tr); }
+    .q-opt.selected .q-opt-key { background: var(--cyan); color: #fff; }
+    .q-opt-text { font-size: 0.9rem; color: var(--text); }
+
+    /* ── short answer ── */
+    .q-short-wrap { padding: 4px 0 16px; }
+    .q-text-input { width: 100%; padding: 13px 16px; border: 1.5px solid var(--border-h); border-radius: 14px; font-family: 'Manrope', sans-serif; font-size: 0.95rem; color: var(--text); background: #f8f9ff; outline: none; transition: border-color 0.2s, background 0.2s; }
+    .q-text-input:focus { border-color: var(--violet); background: #fff; }
+    .q-hint { font-size: 0.78rem; color: var(--text-3); margin-top: 8px; }
+    .q-match-wrap { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 16px; }
+    .q-match-hint { font-size: 0.78rem; color: var(--text-3); margin-bottom: 4px; }
+    .q-match-row { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border: 1.5px solid var(--border-h); border-radius: 12px; transition: border-color var(--tr); }
+    .q-match-row:has(.q-match-sel:not([value=""])) { border-color: rgba(6,214,224,0.5); background: rgba(6,214,224,0.04); }
+    .q-match-left { flex: 1; font-size: 0.9rem; font-weight: 600; min-width: 100px; }
+    .q-match-sel { flex: 1; padding: 8px 12px; border: 1.5px solid var(--border-h); border-radius: 10px; font-family: 'Manrope', sans-serif; font-size: 0.88rem; color: var(--text); background: #f8f9ff; outline: none; transition: border-color 0.2s; cursor: pointer; }
+    .q-match-sel:focus { border-color: var(--cyan); }
+
+    /* ── navigation ── */
+    .q-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; }
+    .btn-nav { padding: 10px 22px; border: 1.5px solid var(--border-h); border-radius: var(--r-pill); background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.85rem; font-weight: 600; color: var(--text); cursor: pointer; transition: all var(--tr); }
+    .btn-nav:hover { border-color: var(--violet); color: var(--violet); }
+    .btn-nav:disabled { opacity: 0.3; cursor: not-allowed; }
+
+    /* ── loading/error ── */
+    .state-screen { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 40px; }
+    .spinner { width: 40px; height: 40px; border: 3px solid var(--border); border-top-color: var(--violet); border-radius: 50%; animation: spin 0.8s linear infinite; }
+    @keyframes spin { to { transform: rotate(360deg); } }
+    .state-title { font-family: 'Unbounded', sans-serif; font-size: 1.1rem; font-weight: 700; }
+    .state-desc { font-size: 0.9rem; color: var(--text-2); }
+    .btn-primary { padding: 12px 28px; border: none; border-radius: var(--r-pill); background: var(--grad-1); color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.9rem; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-block; }
+
+    /* ── auto-advance progress ring on selected option ── */
+    .q-opt.auto-advancing { border-color: var(--cyan); background: rgba(6,214,224,0.08); }
+    .q-opt.auto-advancing .q-opt-key { background: var(--cyan); color: #fff; }
+    @keyframes ring-fill { from { stroke-dashoffset: 56.5; } to { stroke-dashoffset: 0; } }
+    .advance-ring { position: absolute; top: 50%; right: 18px; transform: translateY(-50%); width: 22px; height: 22px; }
+    .advance-ring circle { fill: none; stroke: var(--cyan); stroke-width: 2.5; stroke-dasharray: 56.5; stroke-dashoffset: 56.5; stroke-linecap: round; animation: ring-fill 0.65s linear forwards; transform-origin: center; transform: rotate(-90deg); }
+    .q-opt { position: relative; }
+
+    /* ── confirm modal ── */
+    .confirm-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.4); backdrop-filter: blur(6px); z-index: 300; display: none; align-items: center; justify-content: center; padding: 20px; }
+    .confirm-overlay.open { display: flex; }
+    .confirm-box { background: #fff; border-radius: 20px; padding: 36px 32px; width: 100%; max-width: 400px; box-shadow: 0 24px 80px rgba(15,23,42,0.2); text-align: center; }
+    .confirm-icon { font-size: 2.4rem; margin-bottom: 12px; }
+    .confirm-title { font-family: 'Unbounded', sans-serif; font-size: 1rem; font-weight: 800; margin-bottom: 10px; }
+    .confirm-desc { font-size: 0.88rem; color: var(--text-2); line-height: 1.6; margin-bottom: 24px; }
+    .confirm-skipped { display: inline-block; margin: 8px 0 4px; padding: 6px 16px; border-radius: var(--r-pill); background: rgba(255,179,71,0.12); color: #c47f00; font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 700; }
+    .confirm-actions { display: flex; gap: 10px; justify-content: center; }
+    .confirm-cancel { padding: 11px 26px; border: 1.5px solid var(--border-h); border-radius: var(--r-pill); background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.88rem; font-weight: 600; color: var(--text-3); cursor: pointer; transition: all var(--tr); }
+    .confirm-cancel:hover { border-color: var(--violet); color: var(--violet); }
+    .confirm-ok { padding: 11px 26px; border: none; border-radius: var(--r-pill); background: var(--grad-1); color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.88rem; font-weight: 700; cursor: pointer; transition: transform var(--tr); }
+    .confirm-ok:hover { transform: translateY(-1px); }
+
+    /* ── btn-finish counter ── */
+    .btn-finish-count { font-size: 0.72rem; opacity: 0.75; font-weight: 600; display: block; margin-top: 2px; }
+
+    /* ── flag button ── */
+    .q-card { position: relative; }
+    .btn-flag { position: absolute; top: 16px; right: 20px; width: 34px; height: 34px; border-radius: 10px; border: 1.5px solid var(--border-h); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--tr); color: var(--text-3); }
+    .btn-flag:hover { border-color: #f59e0b; color: #f59e0b; background: rgba(245,158,11,0.08); }
+    .btn-flag.flagged { border-color: #f59e0b; color: #f59e0b; background: rgba(245,158,11,0.12); }
+    .dot.flagged { border-color: #f59e0b !important; }
+    .dot.flagged:not(.answered) { color: #f59e0b; }
+    .dot.current.flagged { background: #f59e0b; border-color: #f59e0b; color: #fff; }
+    .dot.answered.flagged { background: rgba(245,158,11,0.18); }
+
+    /* ── Combo system ── */
+    .combo-toast {
+      position: fixed; top: 18px; left: 50%; transform: translateX(-50%) scale(0.7);
+      z-index: 500; pointer-events: none;
+      display: flex; align-items: center; gap: 10px;
+      padding: 10px 22px; border-radius: 99px;
+      font-family: 'Unbounded', sans-serif; font-weight: 900;
+      opacity: 0; transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
+    }
+    .combo-toast.show { opacity: 1; transform: translateX(-50%) scale(1); }
+    .combo-toast.hide { opacity: 0; transform: translateX(-50%) scale(0.7) translateY(-10px); }
+    .combo-toast.c3 { background: linear-gradient(135deg, rgba(6,214,224,0.15), rgba(6,214,100,0.1)); border: 2px solid rgba(6,214,224,0.3); color: #06B6D4; font-size: 0.82rem; }
+    .combo-toast.c5 { background: linear-gradient(135deg, rgba(155,93,229,0.15), rgba(6,214,224,0.1)); border: 2px solid rgba(155,93,229,0.35); color: #9B5DE5; font-size: 0.92rem; }
+    .combo-toast.c10 { background: linear-gradient(135deg, rgba(255,215,0,0.18), rgba(255,165,0,0.12)); border: 2px solid rgba(255,215,0,0.4); color: #D97706; font-size: 1.05rem; }
+    .combo-icon { font-size: 1.3em; }
+    .combo-break {
+      position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
+      z-index: 500; pointer-events: none;
+      padding: 6px 16px; border-radius: 99px;
+      background: rgba(241,91,181,0.1); border: 1.5px solid rgba(241,91,181,0.25);
+      font-family: 'Unbounded', sans-serif; font-size: 0.72rem; font-weight: 800; color: #F15BB5;
+      opacity: 0; transition: all 0.3s ease;
+    }
+    .combo-break.show { opacity: 1; }
+    .combo-break.hide { opacity: 0; transform: translateX(-50%) translateY(-8px); }
+  </style>
+</head>
+<body>
+
+  <nav class="nav">
+    <a href="/dashboard" class="nav-logo">Learn<span>Space</span></a>
+    <div class="nav-right">
+      <span id="nav-subject">Тест</span>
+      <span id="nav-mode" style="font-size:0.68rem;padding:3px 10px;border-radius:99px;font-weight:700;display:none"></span>
+      <span class="nav-timer" id="nav-timer">—</span>
+    </div>
+  </nav>
+
+  <!-- Загрузка -->
+  <div class="state-screen" id="screen-loading">
+    <div class="spinner"></div>
+    <div class="state-title">Загружаем тест...</div>
+  </div>
+
+  <!-- Ошибка -->
+  <div class="state-screen" id="screen-error" style="display:none">
+    <div class="state-title">Ошибка загрузки</div>
+    <div class="state-desc" id="error-msg"></div>
+    <a href="/dashboard" class="btn-primary">На главную</a>
+  </div>
+
+  <!-- Тест -->
+  <div class="layout" id="screen-test" style="display:none">
+    <aside class="sidebar">
+      <div class="card">
+        <div class="card-label" id="sidebar-label">Прогресс</div>
+        <div class="progress-bar"><div class="progress-fill" id="prog-fill" style="width:0%"></div></div>
+        <div class="progress-text"><span id="prog-answered">0</span> / <span id="prog-total">0</span> отвечено</div>
+        <div class="dots" id="dots"></div>
+      </div>
+      <div class="card">
+        <button class="btn-finish" id="btn-finish">Завершить тест</button>
+      </div>
+      <label style="display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:0.74rem;color:var(--text-2);cursor:pointer;user-select:none">
+        <input type="checkbox" id="auto-adv-toggle" style="accent-color:var(--violet)" /> Автопереход
+      </label>
+    </aside>
+
+    <div class="q-area" id="q-area"></div>
+  </div>
+
+  <!-- Confirm finish modal -->
+  <div class="confirm-overlay" id="confirm-overlay" onclick="if(event.target===this)closeConfirm()">
+    <div class="confirm-box">
+      <div class="confirm-icon" id="confirm-icon"></div>
+      <div class="confirm-title">Завершить тест?</div>
+      <div class="confirm-desc" id="confirm-desc"></div>
+      <div class="confirm-actions">
+        <button class="confirm-cancel" onclick="closeConfirm()">Вернуться</button>
+        <button class="confirm-ok" onclick="doFinish()">Завершить</button>
+      </div>
+    </div>
+  </div>
+
+  <script src="/js/api.js"></script>
+  <script>
+    if (!LS.requireAuth()) throw new Error('Not logged in');
+
+    // Set confirm modal icon via lsIcon
+    document.getElementById('confirm-icon').innerHTML = lsIcon('clipboard', 36);
+
+    const params          = new URLSearchParams(location.search);
+    const subject         = params.get('subject') || 'bio';
+    const mode            = params.get('mode')    || 'exam';
+    const count           = Number(params.get('count') || 25);
+    const topic_id        = params.get('topic')   || null;
+    const test_id         = params.get('test')    || null;
+    const assignmentMode  = params.get('assignment_mode') || null; // 'exam' | 'repeat' | 'ct'
+
+    // Whether timer should run: exam mode or ct mode
+    const useTimer  = !assignmentMode || assignmentMode === 'exam' || assignmentMode === 'ct';
+    // ct mode: split questions into Part A (single/true_false) and Part B (multi/short_answer)
+    const isCTMode  = assignmentMode === 'ct';
+
+    let session_id, questions, currentIdx = 0;
+    let sessionMode  = mode;
+    // answers[q.id] = option_id (single/true_false) | [opt_id,...] (multi) | "text" (short_answer)
+    let answers    = {};
+    let flags      = {};   // flags[q.id] = true → marked for review
+    let startTimes = {};
+    let timerInterval, secondsLeft;
+    let ctPartBStart = 0; // index where Part B begins in ct mode
+    const _matchShuffles = {}; // cache shuffled right-side values per question id
+
+    /* ── SessionStorage persistence ──────────────────────────────────── */
+    function _ssKey() { return `ls_test_${session_id}`; }
+    function saveToSession() {
+      if (!session_id) return;
+      try { sessionStorage.setItem(_ssKey(), JSON.stringify({ answers, flags, currentIdx })); } catch {}
+    }
+    function restoreFromSession() {
+      try {
+        const raw = sessionStorage.getItem(_ssKey());
+        if (!raw) return;
+        const d = JSON.parse(raw);
+        if (d.answers)    answers    = d.answers;
+        if (d.flags)      flags      = d.flags;
+        if (typeof d.currentIdx === 'number') currentIdx = d.currentIdx;
+      } catch {}
+    }
+    function clearSession() {
+      try { sessionStorage.removeItem(_ssKey()); } catch {}
+    }
+
+    const SUBJECT_NAMES = { bio: 'Биология', chem: 'Химия', math: 'Математика', phys: 'Физика' };
+
+
+    /* ── Инициализация ──────────────────────────────────────────────── */
+    async function init() {
+      try {
+        const existingSession = params.get('session');
+        const data = existingSession
+          ? await LS.getSessionQuestions(existingSession)
+          : await LS.startSession(subject, mode, count, topic_id, test_id);
+        sessionMode = data.mode || mode;
+        document.getElementById('nav-subject').textContent =
+          SUBJECT_NAMES[data.subject_slug] || SUBJECT_NAMES[subject] || 'Тест';
+        // Show mode indicator
+        const modeBadge = document.getElementById('nav-mode');
+        const modeInfo = { practice: { label: 'Практика', bg: 'rgba(6,214,100,0.15)', color: '#059652' }, exam: { label: 'Экзамен', bg: 'rgba(241,91,181,0.12)', color: '#F15BB5' }, ct: { label: 'ЦТ/ЦЭ', bg: 'rgba(155,93,229,0.15)', color: '#9B5DE5' }, repeat: { label: 'Повтор', bg: 'rgba(6,214,224,0.15)', color: '#06B6D4' } };
+        const mi = modeInfo[sessionMode] || modeInfo[assignmentMode];
+        if (mi && modeBadge) { modeBadge.textContent = mi.label; modeBadge.style.background = mi.bg; modeBadge.style.color = mi.color; modeBadge.style.display = ''; }
+        session_id = data.session_id;
+        questions  = data.questions;
+        restoreFromSession();
+
+        document.getElementById('prog-total').textContent = questions.length;
+
+        // For ct mode: count Part A / Part B boundary
+        if (isCTMode) {
+          ctPartBStart = questions.findIndex(q => !['single','true_false'].includes(q.type || 'single'));
+          if (ctPartBStart === -1) ctPartBStart = questions.length; // all Part A
+          const lbl = document.getElementById('sidebar-label');
+          if (lbl) lbl.innerHTML = `ЦТ/ЦЭ &nbsp;<span style="font-size:0.65rem;color:var(--violet)">А: ${ctPartBStart} / Б: ${questions.length - ctPartBStart}</span>`;
+        }
+
+        renderDots();
+        renderQuestion(currentIdx);
+
+        if (useTimer) {
+          let timerSec = data.time_limit_sec || questions.length * 90;
+          if (data.started_at && data.time_limit_sec) {
+            const elapsed = Math.round((Date.now() - new Date(data.started_at).getTime()) / 1000);
+            timerSec = Math.max(1, data.time_limit_sec - elapsed);
+          }
+          startTimer(timerSec);
+        }
+
+        show('screen-test');
+      } catch (err) {
+        document.getElementById('error-msg').textContent = err.message;
+        show('screen-error');
+      }
+      hide('screen-loading');
+    }
+
+    /* ── Таймер ─────────────────────────────────────────────────────── */
+    function startTimer(seconds) {
+      secondsLeft = seconds;
+      updateTimerDisplay();
+      timerInterval = setInterval(() => {
+        secondsLeft--;
+        updateTimerDisplay();
+        if (secondsLeft <= 0) { clearInterval(timerInterval); doFinish(); }
+        if (secondsLeft <= 120) document.getElementById('nav-timer').classList.add('warning');
+      }, 1000);
+    }
+
+    function updateTimerDisplay() {
+      const m = String(Math.floor(secondsLeft / 60)).padStart(2, '0');
+      const s = String(secondsLeft % 60).padStart(2, '0');
+      document.getElementById('nav-timer').textContent = `${m}:${s}`;
+    }
+
+    /* ── KaTeX ──────────────────────────────────────────────────────── */
+    function renderMath(el) {
+      if (!el) return;
+      const run = () => {
+        if (window.renderMathInElement) {
+          renderMathInElement(el, {
+            delimiters: [
+              { left: '\\(', right: '\\)', display: false },
+              { left: '\\[', right: '\\]', display: true  },
+            ],
+            throwOnError: false,
+          });
+        }
+      };
+      if (window._katexReady) run(); else window._katexReadyCb = run;
+    }
+
+    /* ── Проверка: есть ли ответ на вопрос ─────────────────────────── */
+    function isAnswered(q) {
+      const a = answers[q.id];
+      if (q.type === 'short_answer') return !!(a && String(a).trim());
+      if (q.type === 'multi')        return !!(Array.isArray(a) && a.length > 0);
+      if (q.type === 'matching') {
+        if (!a || typeof a !== 'object') return false;
+        return q.options.every(opt => a[opt.id] && a[opt.id] !== '');
+      }
+      return !!a;
+    }
+
+    /* ── Рендер вопроса ─────────────────────────────────────────────── */
+    function renderQuestion(idx) {
+      currentIdx = idx;
+      const q    = questions[idx];
+      startTimes[q.id] = startTimes[q.id] || Date.now();
+      const type = q.type || 'single';
+
+      // Build options HTML
+      let bodyHtml = '';
+      if (type === 'matching') {
+        // Shuffle right-side values once per question (cached)
+        if (!_matchShuffles[q.id]) _matchShuffles[q.id] = q.options.map(o => o.match_pair).sort(() => Math.random() - 0.5);
+        const rightVals = _matchShuffles[q.id];
+        const curPairs  = answers[q.id] || {};
+        bodyHtml = `
+          <div class="q-match-wrap">
+            <div class="q-match-hint">Выберите пару для каждого элемента</div>
+            ${q.options.map(opt => `
+              <div class="q-match-row">
+                <div class="q-match-left">${esc(opt.text)}</div>
+                <select class="q-match-sel" data-opt-id="${opt.id}" onchange="onMatchChange(${q.id},${opt.id},this.value)">
+                  <option value="">— выбрать —</option>
+                  ${rightVals.map(v => `<option value="${esc(v)}"${curPairs[opt.id]===v?' selected':''}>${esc(v)}</option>`).join('')}
+                </select>
+              </div>`).join('')}
+          </div>`;
+      } else if (type === 'short_answer') {
+        const curVal = typeof answers[q.id] === 'string' ? esc(answers[q.id]) : '';
+        bodyHtml = `
+          <div class="q-short-wrap">
+            <input type="text" class="q-text-input" id="q-input-${q.id}"
+                   placeholder="Введите ваш ответ…" value="${curVal}" autocomplete="off" />
+            <div class="q-hint">Сравнение без учёта регистра и пробелов по краям</div>
+          </div>`;
+      } else {
+        const isMulti = type === 'multi';
+        const optHtml = q.options.map((opt, i) => {
+          const sel = isMulti
+            ? (Array.isArray(answers[q.id]) && answers[q.id].includes(opt.id))
+            : answers[q.id] === opt.id;
+          const keyLabel = isMulti ? (sel ? lsIcon('check', 14) : lsIcon('square', 14)) : String.fromCharCode(65 + i);
+          return `<div class="q-opt${sel ? ' selected' : ''}" data-opt-id="${opt.id}" data-i="${i}">
+            <div class="q-opt-key">${keyLabel}</div>
+            <div class="q-opt-text">${esc(opt.text)}</div>
+          </div>`;
+        }).join('');
+        bodyHtml = `<div class="q-options" id="opts">${optHtml}</div>`;
+        if (isMulti) {
+          bodyHtml += `<div class="q-hint" style="margin-top:10px">Можно выбрать несколько вариантов</div>`;
+        }
+      }
+
+      const typeLabel = { single:'Один ответ', multi:'Несколько ответов', true_false:'Верно / Неверно', short_answer:'Краткий ответ', matching:'Сопоставление' }[type] || '';
+      const ctSection = isCTMode
+        ? (idx < ctPartBStart ? '<span style="font-size:0.75rem;font-weight:800;color:var(--violet);margin-right:6px">Часть А</span>' : '<span style="font-size:0.75rem;font-weight:800;color:var(--amber);margin-right:6px">Часть Б</span>')
+        : '';
+
+      document.getElementById('q-area').innerHTML = `
+        <div class="q-card active">
+          <button class="btn-flag${flags[q.id] ? ' flagged' : ''}" id="btn-flag-${q.id}" title="Отметить для проверки" onclick="toggleFlag(${q.id})">
+            <svg viewBox="0 0 24 24" width="16" height="16" fill="${flags[q.id] ? '#f59e0b' : 'none'}" stroke="${flags[q.id] ? '#f59e0b' : 'currentColor'}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" y1="22" x2="4" y2="15"/></svg>
+          </button>
+          <div class="q-num-badge">
+            ${ctSection}Вопрос <span>${idx + 1} / ${questions.length}</span>
+            ${typeLabel ? `<span class="q-type-hint">${typeLabel}</span>` : ''}
+            ${flags[q.id] ? '<span style="font-size:0.7rem;color:#f59e0b;font-weight:700;margin-left:4px">отмечен</span>' : ''}
+          </div>
+          ${q.image ? `<img src="${esc(q.image)}" alt="" style="max-width:100%;max-height:260px;border-radius:10px;margin-bottom:12px;display:block" />` : ''}
+          <p class="q-text">${esc(q.text)}</p>
+          ${bodyHtml}
+          <div class="q-nav">
+            <button class="btn-nav" id="btn-prev" ${idx === 0 ? 'disabled' : ''}><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> Назад</button>
+            <button class="btn-nav" id="btn-next">${idx === questions.length - 1 ? 'Завершить' : 'Вперёд <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>'}</button>
+          </div>
+        </div>`;
+
+      // Wire events
+      if (type === 'short_answer') {
+        const inp = document.getElementById(`q-input-${q.id}`);
+        inp.addEventListener('input', () => {
+          answers[q.id] = inp.value;
+          updateDots();
+          updateProgress();
+        });
+        inp.addEventListener('blur', () => {
+          if (String(answers[q.id] || '').trim()) sendAnswerAsync(q);
+        });
+        inp.focus();
+      } else if (type === 'matching') {
+        // matching: handled via onMatchChange inline (see function below)
+      } else {
+        const isMulti = type === 'multi';
+        document.querySelectorAll('.q-opt').forEach(el => {
+          el.addEventListener('click', () => {
+            const optId = Number(el.dataset.optId);
+            if (isMulti) toggleMultiOpt(q, optId);
+            else selectSingleOpt(q, optId);
+          });
+        });
+      }
+
+      document.getElementById('btn-prev').addEventListener('click', () => {
+        cancelAutoAdvance();
+        flushShortAnswer(q);
+        renderQuestion(idx - 1);
+      });
+      document.getElementById('btn-next').addEventListener('click', () => {
+        cancelAutoAdvance();
+        flushShortAnswer(q);
+        if (idx === questions.length - 1) tryFinish();
+        else renderQuestion(idx + 1);
+      });
+
+      updateDots();
+      renderMath(document.getElementById('q-area'));
+      saveToSession();
+    }
+
+    /* ── Matching ── */
+    function onMatchChange(qid, optId, val) {
+      const q = questions.find(q => q.id === qid);
+      if (!q) return;
+      if (!answers[qid] || typeof answers[qid] !== 'object') answers[qid] = {};
+      answers[qid][optId] = val;
+      updateDots();
+      updateProgress();
+      if (isAnswered(q)) sendAnswerAsync(q);
+    }
+
+    /* send short_answer to server if not yet sent */
+    const _sentAnswers = new Set();
+    function flushShortAnswer(q) {
+      if ((q.type || 'single') !== 'short_answer') return;
+      const text = String(answers[q.id] || '').trim();
+      if (text && !_sentAnswers.has(q.id)) sendAnswerAsync(q);
+    }
+
+    /* ── Авто-переход ────────────────────────────────────────────────── */
+    let _autoAdvanceTimer = null;
+
+    function cancelAutoAdvance() {
+      if (_autoAdvanceTimer) { clearTimeout(_autoAdvanceTimer); _autoAdvanceTimer = null; }
+      // remove ring from all options
+      document.querySelectorAll('.advance-ring').forEach(r => r.remove());
+      document.querySelectorAll('.q-opt.auto-advancing').forEach(el => el.classList.remove('auto-advancing'));
+    }
+
+    /* ── Выбор ответа — одиночный ───────────────────────────────────── */
+    function selectSingleOpt(q, option_id) {
+      cancelAutoAdvance();
+      const timeSpent = Math.round((Date.now() - (startTimes[q.id] || Date.now())) / 1000);
+      answers[q.id] = option_id;
+
+      document.querySelectorAll('.q-opt').forEach((el, i) => {
+        const sel = q.options[i].id === option_id;
+        el.classList.toggle('selected', sel);
+        el.querySelector('.q-opt-key').innerHTML = sel ? lsIcon('check', 14) : String.fromCharCode(65 + i);
+        if (sel) {
+          // attach progress ring svg
+          el.classList.add('auto-advancing');
+          const svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
+          svg.setAttribute('class','advance-ring');
+          svg.setAttribute('viewBox','0 0 22 22');
+          const circle = document.createElementNS('http://www.w3.org/2000/svg','circle');
+          circle.setAttribute('cx','11'); circle.setAttribute('cy','11'); circle.setAttribute('r','9');
+          svg.appendChild(circle);
+          el.appendChild(svg);
+        }
+      });
+
+      updateDots();
+      updateProgress();
+      LS.sendAnswer(session_id, q.id, option_id, timeSpent)
+        .then(r => { if (r && typeof r.is_correct === 'boolean' && sessionMode === 'practice') _handleAnswerResult(r.is_correct); })
+        .catch(console.error);
+
+      // auto-advance to next question (not on last question, can be disabled)
+      if (currentIdx < questions.length - 1 && localStorage.getItem('ls_auto_advance') !== '0') {
+        _autoAdvanceTimer = setTimeout(() => {
+          _autoAdvanceTimer = null;
+          if (answers[q.id] === option_id) renderQuestion(currentIdx + 1);
+        }, 1200);
+      }
+    }
+
+    /* ── Выбор ответа — множественный ───────────────────────────────── */
+    function toggleMultiOpt(q, option_id) {
+      if (!Array.isArray(answers[q.id])) answers[q.id] = [];
+      const arr = answers[q.id];
+      const idx = arr.indexOf(option_id);
+      if (idx === -1) arr.push(option_id); else arr.splice(idx, 1);
+
+      document.querySelectorAll('.q-opt').forEach(el => {
+        const id  = Number(el.dataset.optId);
+        const sel = arr.includes(id);
+        el.classList.toggle('selected', sel);
+        el.querySelector('.q-opt-key').innerHTML = sel ? lsIcon('check', 14) : lsIcon('square', 14);
+      });
+
+      updateDots();
+      updateProgress();
+
+      // debounce multi send (avoid hammering on rapid toggles)
+      clearTimeout(toggleMultiOpt._t);
+      toggleMultiOpt._t = setTimeout(() => sendAnswerAsync(q), 500);
+    }
+
+    /* ── Отправка ответа ─────────────────────────────────────────────── */
+    function sendAnswerAsync(q) {
+      const timeSpent = Math.round((Date.now() - (startTimes[q.id] || Date.now())) / 1000);
+      const type = q.type || 'single';
+      let option_id = null, answer_text = null, chosen_options = null;
+      if (type === 'short_answer') {
+        answer_text = String(answers[q.id] || '').trim();
+        _sentAnswers.add(q.id);
+      } else if (type === 'multi') {
+        chosen_options = answers[q.id] || [];
+      } else if (type === 'matching') {
+        answer_text = JSON.stringify(answers[q.id] || {});
+      } else {
+        option_id = answers[q.id];
+      }
+      LS.sendAnswer(session_id, q.id, option_id, timeSpent, answer_text, chosen_options)
+        .then(r => { if (r && typeof r.is_correct === 'boolean' && sessionMode === 'practice') _handleAnswerResult(r.is_correct); })
+        .catch(() => { LS.toast('Ответ не сохранён — нет связи с сервером', 'error'); });
+    }
+
+    /* ── Завершить ──────────────────────────────────────────────────── */
+    function tryFinish() {
+      cancelAutoAdvance();
+      if (questions[currentIdx]) flushShortAnswer(questions[currentIdx]);
+
+      const answered  = questions.filter(isAnswered).length;
+      const total     = questions.length;
+      const skipped   = total - answered;
+
+      if (skipped > 0) {
+        const desc = document.getElementById('confirm-desc');
+        desc.innerHTML = skipped === total
+          ? `Вы не ответили ни на один вопрос.<br>Результат будет нулевым.`
+          : `<span class="confirm-skipped">${lsIcon('warning', 16)} ${skipped} ${skipped === 1 ? 'вопрос без ответа' : skipped < 5 ? 'вопроса без ответа' : 'вопросов без ответа'}</span><br>Пропущенные вопросы будут засчитаны как неверные.`;
+        document.getElementById('confirm-overlay').classList.add('open');
+        return;
+      }
+
+      doFinish();
+    }
+
+    function closeConfirm() {
+      document.getElementById('confirm-overlay').classList.remove('open');
+    }
+
+    async function doFinish() {
+      closeConfirm();
+      clearInterval(timerInterval);
+      clearSession();
+      _finishing = true;
+      const btn = document.getElementById('btn-finish');
+      btn.disabled = true;
+      btn.innerHTML = 'Завершаем…';
+      try {
+        await LS.finishSession(session_id);
+        window.location.href = `/test-result?session=${session_id}`;
+      } catch (err) {
+        LS.toast('Ошибка: ' + err.message, 'error');
+        btn.disabled = false;
+        updateFinishBtn();
+      }
+    }
+
+    function updateFinishBtn() {
+      const answered = questions.filter(isAnswered).length;
+      const total    = questions.length;
+      const btn      = document.getElementById('btn-finish');
+      if (!btn) return;
+      if (answered === total) {
+        btn.innerHTML = 'Завершить тест ' + lsIcon('check', 14);
+      } else {
+        btn.innerHTML = `Завершить тест<span class="btn-finish-count">${answered} / ${total} отвечено</span>`;
+      }
+    }
+
+    /* ── Combo system ────────────────────────────────────────────────── */
+    let _combo = 0, _maxCombo = 0, _comboEl = null, _comboTimer = null;
+
+    function _showCombo(count) {
+      _clearComboEl();
+      const el = document.createElement('div');
+      let cls = '', icon = '', text = '';
+      if (count >= 10) { cls = 'c10'; icon = lsIcon('flame', 20); text = `COMBO x${count}! +бонус XP`; }
+      else if (count >= 5) { cls = 'c5'; icon = lsIcon('zap', 20); text = `Combo x${count}!`; }
+      else if (count >= 3) { cls = 'c3'; icon = lsIcon('sparkles', 20); text = `Combo x${count}`; }
+      else return;
+      el.className = `combo-toast ${cls}`;
+      el.innerHTML = `<span class="combo-icon">${icon}</span>${text}`;
+      document.body.appendChild(el);
+      _comboEl = el;
+      requestAnimationFrame(() => requestAnimationFrame(() => el.classList.add('show')));
+      _comboTimer = setTimeout(() => {
+        el.classList.remove('show');
+        el.classList.add('hide');
+        setTimeout(() => el.remove(), 350);
+        if (_comboEl === el) _comboEl = null;
+      }, 1800);
+    }
+
+    function _showComboBreak(was) {
+      if (was < 3) return;
+      _clearComboEl();
+      const el = document.createElement('div');
+      el.className = 'combo-break';
+      el.textContent = `Комбо x${was} прервано`;
+      document.body.appendChild(el);
+      _comboEl = el;
+      requestAnimationFrame(() => requestAnimationFrame(() => el.classList.add('show')));
+      setTimeout(() => {
+        el.classList.remove('show');
+        el.classList.add('hide');
+        setTimeout(() => el.remove(), 300);
+        if (_comboEl === el) _comboEl = null;
+      }, 1200);
+    }
+
+    function _clearComboEl() {
+      if (_comboTimer) { clearTimeout(_comboTimer); _comboTimer = null; }
+      if (_comboEl) { _comboEl.remove(); _comboEl = null; }
+    }
+
+    function _handleAnswerResult(isCorrect) {
+      if (isCorrect) {
+        _combo++;
+        if (_combo > _maxCombo) _maxCombo = _combo;
+        _showCombo(_combo);
+      } else {
+        const was = _combo;
+        _combo = 0;
+        _showComboBreak(was);
+      }
+    }
+
+    /* ── Навигационные точки ────────────────────────────────────────── */
+    function renderDots() {
+      const el = document.getElementById('dots');
+      el.innerHTML = '';
+      questions.forEach((q, i) => {
+        if (isCTMode && i === 0 && ctPartBStart > 0) {
+          const lbl = document.createElement('div');
+          lbl.style.cssText = 'width:100%;font-size:0.65rem;font-weight:800;color:var(--text-3);text-transform:uppercase;letter-spacing:0.07em;margin-top:4px';
+          lbl.textContent = 'Часть А';
+          el.appendChild(lbl);
+        }
+        if (isCTMode && i === ctPartBStart && ctPartBStart > 0 && ctPartBStart < questions.length) {
+          const lbl = document.createElement('div');
+          lbl.style.cssText = 'width:100%;font-size:0.65rem;font-weight:800;color:var(--amber);text-transform:uppercase;letter-spacing:0.07em;margin-top:8px';
+          lbl.textContent = 'Часть Б';
+          el.appendChild(lbl);
+        }
+        const dot = document.createElement('button');
+        dot.className = 'dot';
+        dot.textContent = i + 1;
+        dot.addEventListener('click', () => { cancelAutoAdvance(); renderQuestion(i); });
+        el.appendChild(dot);
+      });
+    }
+
+    function updateDots() {
+      document.querySelectorAll('.dot').forEach((dot, i) => {
+        dot.classList.toggle('current',  i === currentIdx);
+        dot.classList.toggle('answered', isAnswered(questions[i]));
+        dot.classList.toggle('flagged',  !!flags[questions[i].id]);
+      });
+    }
+
+    /* ── Flag toggle ─────────────────────────────────────────────────── */
+    function toggleFlag(qid) {
+      flags[qid] = !flags[qid];
+      // Update flag button
+      const btn = document.getElementById(`btn-flag-${qid}`);
+      if (btn) {
+        btn.classList.toggle('flagged', flags[qid]);
+        btn.querySelector('svg').setAttribute('fill', flags[qid] ? '#f59e0b' : 'none');
+        btn.querySelector('svg').setAttribute('stroke', flags[qid] ? '#f59e0b' : 'currentColor');
+      }
+      // Update badge label
+      const badge = document.querySelector('.q-num-badge');
+      if (badge) {
+        const existing = badge.querySelector('.flag-label');
+        if (existing) existing.remove();
+        if (flags[qid]) {
+          const lbl = document.createElement('span');
+          lbl.className = 'flag-label';
+          lbl.style.cssText = 'font-size:0.7rem;color:#f59e0b;font-weight:700;margin-left:4px';
+          lbl.textContent = 'отмечен';
+          badge.appendChild(lbl);
+        }
+      }
+      updateDots();
+      saveToSession();
+    }
+
+    function updateProgress() {
+      const n = questions.filter(isAnswered).length;
+      document.getElementById('prog-answered').textContent = n;
+      document.getElementById('prog-fill').style.width = `${(n / questions.length) * 100}%`;
+      updateFinishBtn();
+      saveToSession();
+    }
+
+    /* ── utils ──────────────────────────────────────────────────────── */
+    function show(id) { document.getElementById(id).style.display = ''; }
+    function hide(id) { document.getElementById(id).style.display = 'none'; }
+
+    document.getElementById('btn-finish')?.addEventListener('click', tryFinish);
+
+    // Auto-advance toggle
+    const _aaToggle = document.getElementById('auto-adv-toggle');
+    _aaToggle.checked = localStorage.getItem('ls_auto_advance') !== '0';
+    _aaToggle.addEventListener('change', () => {
+      localStorage.setItem('ls_auto_advance', _aaToggle.checked ? '1' : '0');
+      if (!_aaToggle.checked) cancelAutoAdvance();
+    });
+
+    /* ── Leave-page warning ──────────────────────────────────────────── */
+    let _finishing = false;
+    window.addEventListener('beforeunload', e => {
+      if (_finishing) return;
+      if (questions && questions.some(isAnswered)) {
+        e.preventDefault();
+        e.returnValue = 'Тест не завершён. Ваши ответы сохранены. Выйти?';
+      }
+    });
+
+    // Keyboard shortcuts: 1-4 / A-D to select answer options
+    document.addEventListener('keydown', e => {
+      if (!questions.length || e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+      const q = questions[currentIdx];
+      if (!q || (q.type && q.type !== 'single' && q.type !== 'true_false')) return;
+      let idx = -1;
+      if (e.key >= '1' && e.key <= '4') idx = parseInt(e.key) - 1;
+      else if (e.key.toLowerCase() >= 'a' && e.key.toLowerCase() <= 'd') idx = e.key.toLowerCase().charCodeAt(0) - 97;
+      if (idx === -1) return;
+      const opts = document.querySelectorAll('#q-area .q-opt');
+      if (opts[idx]) opts[idx].click();
+    });
+
+    // Prevent bfcache from restoring a completed test when user presses Back
+    window.addEventListener('pageshow', e => {
+      if (e.persisted) window.location.replace('/dashboard');
+    });
+
+    init();
+  </script>
+</body>
+</html>
diff --git a/frontend/theory.html b/frontend/theory.html
new file mode 100644
index 0000000..1cd0072
--- /dev/null
+++ b/frontend/theory.html
@@ -0,0 +1,778 @@
+<!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://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+  <style>
+    .sb-content { background: #f4f5f8; }
+
+    /* ── page header ── */
+    .page-header {
+      background: linear-gradient(140deg, #0a0818 0%, #1a1040 50%, #0d1a30 100%);
+      padding: 40px 28px 36px;
+      position: relative; overflow: hidden;
+    }
+    .page-header::before {
+      content: '';
+      position: absolute; inset: 0;
+      background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
+      background-size: 22px 22px; pointer-events: none;
+    }
+    .page-header::after {
+      content: '';
+      position: absolute; width: 400px; height: 400px; border-radius: 50%;
+      background: radial-gradient(circle, rgba(155,93,229,0.25), transparent 65%);
+      top: -180px; right: -60px; pointer-events: none;
+    }
+    .ph-inner {
+      position: relative; z-index: 1;
+      max-width: 960px; margin: 0 auto;
+      display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap;
+    }
+    .ph-title {
+      font-family: 'Unbounded', sans-serif; font-size: 1.6rem; font-weight: 800;
+      color: #fff; letter-spacing: -0.03em; margin-bottom: 6px;
+    }
+    .ph-sub { font-size: 0.88rem; color: rgba(255,255,255,0.5); font-weight: 500; }
+    .btn-new-course {
+      padding: 10px 22px; border: none; border-radius: 999px;
+      background: var(--violet); color: #fff;
+      font-family: 'Manrope', sans-serif; font-size: 0.88rem; font-weight: 700;
+      cursor: pointer; display: flex; align-items: center; gap: 8px;
+      box-shadow: 0 4px 18px rgba(155,93,229,0.4);
+      transition: all 0.18s; flex-shrink: 0;
+    }
+    .btn-new-course:hover { background: #8a47d8; box-shadow: 0 6px 24px rgba(155,93,229,0.5); }
+
+    /* ── content ── */
+    .container { max-width: 960px; margin: 0 auto; padding: 28px 24px 80px; }
+
+    /* ── subject filter ── */
+    .subj-filter {
+      display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px;
+    }
+    .sf-btn {
+      padding: 8px 18px; border-radius: 999px;
+      border: 1.5px solid rgba(15,23,42,0.1);
+      background: #fff; color: #6B7A8E;
+      font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 700;
+      cursor: pointer; transition: all 0.15s;
+      display: flex; align-items: center; gap: 6px;
+    }
+    .sf-btn:hover { border-color: var(--violet); color: var(--violet); }
+    .sf-btn.active { background: var(--violet); color: #fff; border-color: var(--violet); }
+
+    /* ── course card grid ── */
+    .courses-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+      gap: 20px;
+    }
+    .course-card {
+      background: #fff;
+      border: 1.5px solid rgba(15,23,42,0.07);
+      border-radius: 20px;
+      overflow: hidden;
+      cursor: pointer;
+      text-decoration: none; color: inherit;
+      transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
+      display: flex; flex-direction: column;
+      box-shadow: 0 2px 8px rgba(15,23,42,0.05);
+    }
+    .course-card:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 12px 36px rgba(15,23,42,0.12);
+      border-color: rgba(155,93,229,0.2);
+    }
+    .cc-banner {
+      height: 80px;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 2.8rem;
+      position: relative;
+    }
+    .cc-banner-bio   { background: linear-gradient(135deg, #1a0a3c 0%, #2d0856 100%); }
+    .cc-banner-chem  { background: linear-gradient(135deg, #062a20 0%, #064a38 100%); }
+    .cc-banner-math  { background: linear-gradient(135deg, #061828 0%, #062848 100%); }
+    .cc-banner-phys  { background: linear-gradient(135deg, #1c1400 0%, #3a2800 100%); }
+    .cc-banner-other { background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%); }
+    .cc-draft-badge {
+      position: absolute; top: 8px; right: 10px;
+      font-size: 0.64rem; font-weight: 700; font-family: 'Manrope', sans-serif;
+      color: rgba(255,255,255,0.5);
+      background: rgba(0,0,0,0.35); padding: 2px 8px; border-radius: 99px;
+    }
+    .cc-del-btn {
+      position: absolute; top: 8px; left: 10px; z-index: 2;
+      width: 28px; height: 28px; border-radius: 8px; border: none;
+      background: rgba(0,0,0,0.35); color: rgba(255,255,255,0.5);
+      cursor: pointer; display: flex; align-items: center; justify-content: center;
+      opacity: 0; transition: all 0.15s;
+    }
+    .course-card:hover .cc-del-btn { opacity: 1; }
+    .cc-del-btn:hover { background: rgba(239,71,111,0.7); color: #fff; }
+    .cc-body { padding: 18px 18px 16px; flex: 1; display: flex; flex-direction: column; }
+    .cc-subj {
+      font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
+      margin-bottom: 6px;
+    }
+    .cc-subj-bio   { color: #9B5DE5; }
+    .cc-subj-chem  { color: #06D6A0; }
+    .cc-subj-math  { color: #06B6D4; }
+    .cc-subj-phys  { color: #F59E0B; }
+    .cc-subj-other { color: #8898AA; }
+    .cc-title {
+      font-family: 'Unbounded', sans-serif; font-size: 0.92rem; font-weight: 800;
+      color: #0F172A; margin-bottom: 8px; line-height: 1.35;
+    }
+    .cc-desc {
+      font-size: 0.8rem; color: #6B7A8E; line-height: 1.6;
+      flex: 1; margin-bottom: 14px;
+      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+    }
+    .cc-footer {
+      display: flex; align-items: center; justify-content: space-between;
+      border-top: 1px solid rgba(15,23,42,0.07); padding-top: 12px;
+    }
+    .cc-meta { font-size: 0.76rem; color: #8898AA; display: flex; align-items: center; gap: 5px; }
+    .cc-progress-bar {
+      height: 4px; border-radius: 99px;
+      background: rgba(15,23,42,0.07); flex: 1; max-width: 80px;
+    }
+    .cc-progress-fill { height: 100%; border-radius: 99px; background: var(--violet); transition: width 0.4s; }
+    .cc-pct { font-size: 0.72rem; font-weight: 700; color: var(--violet); }
+
+    /* ── nav active ── */
+    .nav-active {
+      background: rgba(155,93,229,0.08) !important;
+      border-color: var(--violet) !important;
+      color: var(--violet) !important;
+      cursor: default; pointer-events: none;
+    }
+
+    /* ── notif ── */
+    .notif-bell { position: relative; }
+    .notif-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; background: var(--pink); color: #fff; border-radius: 99px; font-size: 0.65rem; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; }
+    .notif-drop-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid var(--border); }
+    .notif-drop-title { font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800; }
+    .notif-read-all { background: none; border: none; font-size: 0.74rem; color: var(--violet); cursor: pointer; font-family: 'Manrope', sans-serif; font-weight: 600; }
+    .notif-item { display: flex; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background var(--tr); text-decoration: none; color: inherit; }
+    .notif-item:last-child { border-bottom: none; }
+    .notif-item:hover { background: rgba(155,93,229,0.04); }
+    .notif-item.unread { background: rgba(155,93,229,0.05); }
+    .notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); flex-shrink: 0; margin-top: 5px; }
+    .notif-dot.read { background: transparent; border: 1.5px solid var(--border-h); }
+    .notif-msg { font-size: 0.80rem; line-height: 1.45; flex: 1; }
+    .notif-time { font-size: 0.70rem; color: var(--text-3); margin-top: 2px; }
+    .notif-empty { padding: 28px 16px; text-align: center; color: var(--text-3); font-size: 0.84rem; }
+
+    /* ── new course modal ── */
+    .modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.4); backdrop-filter: blur(6px); z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; }
+    .modal-overlay.open { display: flex; }
+    .modal { background: #fff; border-radius: 24px; padding: 36px; width: 100%; max-width: 460px; box-shadow: 0 32px 80px rgba(15,23,42,0.22); }
+    .modal-title { font-family: 'Unbounded', sans-serif; font-size: 1rem; font-weight: 800; margin-bottom: 22px; }
+    .form-group { margin-bottom: 16px; }
+    .form-label { display: block; font-size: 0.8rem; font-weight: 700; color: #3D4F6B; margin-bottom: 6px; }
+    .form-input { width: 100%; padding: 11px 14px; border: 1.5px solid rgba(15,23,42,0.15); border-radius: 12px; font-family: 'Manrope', sans-serif; font-size: 0.92rem; color: var(--text); background: #f8f9fc; transition: border-color 0.2s; box-sizing: border-box; }
+    .form-input:focus { outline: none; border-color: var(--violet); background: #fff; }
+    select.form-input { cursor: pointer; }
+    .modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }
+    .btn-cancel { padding: 10px 22px; border: 1.5px solid rgba(15,23,42,0.15); border-radius: 999px; background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.88rem; font-weight: 600; color: #8898AA; cursor: pointer; transition: all 0.18s; }
+    .btn-cancel:hover { border-color: rgba(15,23,42,0.3); color: var(--text); }
+    .btn-primary { padding: 10px 28px; border: none; border-radius: 999px; background: var(--violet); color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.88rem; font-weight: 700; cursor: pointer; box-shadow: 0 2px 10px rgba(155,93,229,0.3); transition: all 0.18s; }
+    .btn-primary:hover { background: #8a47d8; }
+    .btn-primary:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
+
+    /* ── search ── */
+    .search-wrap {
+      position: relative; max-width: 400px;
+    }
+    .search-input {
+      width: 100%; padding: 9px 16px 9px 38px;
+      border: 1.5px solid rgba(255,255,255,0.15); border-radius: 999px;
+      background: rgba(255,255,255,0.09); color: #fff;
+      font-family: 'Manrope', sans-serif; font-size: 0.88rem;
+      backdrop-filter: blur(10px); box-sizing: border-box;
+      transition: border-color 0.2s, background 0.2s;
+    }
+    .search-input::placeholder { color: rgba(255,255,255,0.35); }
+    .search-input:focus { outline: none; border-color: rgba(155,93,229,0.6); background: rgba(255,255,255,0.13); }
+    .search-icon {
+      position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
+      pointer-events: none; color: rgba(255,255,255,0.35);
+    }
+    .search-results-count {
+      font-size: 0.76rem; color: rgba(255,255,255,0.4); margin-top: 6px;
+    }
+
+    /* ── continue banner ── */
+    .continue-banner {
+      background: linear-gradient(135deg, rgba(155,93,229,0.12), rgba(6,182,212,0.08));
+      border: 1.5px solid rgba(155,93,229,0.2); border-radius: 18px;
+      padding: 18px 20px; margin-bottom: 24px;
+      display: flex; align-items: center; gap: 16px;
+      text-decoration: none; color: inherit;
+      transition: border-color 0.15s, box-shadow 0.15s;
+    }
+    .continue-banner:hover { border-color: rgba(155,93,229,0.4); box-shadow: 0 4px 20px rgba(155,93,229,0.12); }
+    .cb-icon {
+      width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
+      background: linear-gradient(135deg, var(--violet), #06B6D4);
+      display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
+    }
+    .cb-body { flex: 1; }
+    .cb-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--violet); margin-bottom: 3px; }
+    .cb-title { font-size: 0.92rem; font-weight: 700; color: #0F172A; }
+    .cb-course { font-size: 0.76rem; color: #6B7A8E; margin-top: 2px; }
+    .cb-arrow { color: #CBD5E1; }
+    .continue-banner:hover .cb-arrow { color: var(--violet); }
+
+    /* ── Mobile adaptation ── */
+    @media (max-width: 768px) {
+      /* Page header: compact padding, smaller title */
+      .page-header { padding: 20px 16px 20px; }
+      .ph-title { font-size: 1.15rem; }
+      .ph-sub { font-size: 0.8rem; }
+      .ph-inner { gap: 12px; }
+
+      /* Search: full width below title */
+      .search-wrap { max-width: 100%; }
+      .search-input { font-size: 0.82rem; }
+
+      /* Header buttons: icon-only to save space */
+      .btn-new-course { padding: 8px 14px; font-size: 0.8rem; gap: 6px; }
+
+      /* Container: tighter padding */
+      .container { padding: 18px 12px 80px; }
+
+      /* Course grid: 1 column on small screens */
+      .courses-grid { grid-template-columns: 1fr; gap: 12px; }
+
+      /* Continue banner: allow body to shrink */
+      .cb-body { min-width: 0; overflow: hidden; }
+      .cb-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+      .cb-icon { width: 36px; height: 36px; font-size: 1rem; }
+
+      /* Modal: less padding, full width */
+      .modal { padding: 22px 18px; border-radius: 18px; }
+      .modal-title { font-size: 0.9rem; margin-bottom: 16px; }
+      .modal-footer { flex-wrap: wrap; }
+      .modal-footer .btn-cancel,
+      .modal-footer .btn-primary { flex: 1; text-align: center; justify-content: center; }
+
+      /* Subject filter: smaller pills */
+      .sf-btn { padding: 6px 13px; font-size: 0.78rem; }
+
+      /* Empty state: reduce padding */
+      .empty-state { padding: 36px 20px; }
+    }
+
+    /* ── empty ── */
+    .empty-state {
+      text-align: center; padding: 60px 28px;
+      background: #fff; border: 2px dashed rgba(155,93,229,0.15);
+      border-radius: 24px;
+    }
+    .empty-state-icon { font-size: 3.5rem; margin-bottom: 12px; }
+    .empty-state-title { font-family: 'Unbounded', sans-serif; font-size: 1rem; font-weight: 800; color: #0F172A; margin-bottom: 8px; }
+    .empty-state-desc { font-size: 0.86rem; color: #6B7A8E; max-width: 300px; margin: 0 auto; line-height: 1.7; }
+  </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>
+      <span class="sb-link active"><i data-lucide="brain"                          class="sb-icon"></i><span class="sb-lbl">Теория</span></span>
+      <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>
+      <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>
+    </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>
+          <span class="sb-logout" style="pointer-events:none">Мой профиль</span>
+        </div>
+      </a>
+    </div>
+  </aside>
+  <div class="notif-drop" id="notif-drop"></div>
+  <div class="sb-content">
+
+    <!-- Page header -->
+    <div class="page-header">
+      <div class="ph-inner">
+        <div>
+          <div class="ph-title">Теория</div>
+          <div class="ph-sub">Изучай курсы и прокачивай знания</div>
+        </div>
+        <div style="display:flex;gap:12px;align-items:center;flex-wrap:wrap">
+          <div class="search-wrap">
+            <i data-lucide="search" class="search-icon" style="width:15px;height:15px"></i>
+            <input class="search-input" id="search-input" placeholder="Поиск курсов и уроков…"
+                   oninput="onSearchInput(this.value)" />
+          </div>
+          <button class="btn-new-course" id="btn-from-tpl" style="display:none;background:transparent;border:1.5px solid rgba(255,255,255,0.2);box-shadow:none;color:rgba(255,255,255,0.7)" onclick="openTplBrowser()">
+            <i data-lucide="clipboard" style="width:16px;height:16px"></i> Из шаблона
+          </button>
+          <button class="btn-new-course" id="btn-new-course" style="display:none" onclick="openNewCourseModal()">
+            <i data-lucide="plus" style="width:16px;height:16px"></i> Новый курс
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="container">
+
+      <!-- Continue reading banner -->
+      <div id="continue-wrap" style="display:none"></div>
+
+      <!-- Subject filter -->
+      <div class="subj-filter" id="subj-filter">
+        <button class="sf-btn active" data-subj="" onclick="setFilter(this,'')">Все</button>
+        <button class="sf-btn" data-subj="bio"  onclick="setFilter(this,'bio')">Биология</button>
+        <button class="sf-btn" data-subj="chem" onclick="setFilter(this,'chem')">Химия</button>
+        <button class="sf-btn" data-subj="math" onclick="setFilter(this,'math')">Математика</button>
+        <button class="sf-btn" data-subj="phys" onclick="setFilter(this,'phys')"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg> Физика</button>
+      </div>
+
+      <!-- Search results count -->
+      <div id="search-results-info" style="display:none;margin-bottom:12px" class="search-results-count"></div>
+
+      <!-- Courses grid -->
+      <div class="courses-grid" id="courses-grid">
+        <div style="grid-column:1/-1">
+          <div class="spinner"></div>
+        </div>
+      </div>
+
+    </div><!-- /container -->
+  </div><!-- /sb-content -->
+</div><!-- /app-layout -->
+
+<!-- New course modal -->
+<div class="modal-overlay" id="new-course-modal" onclick="if(event.target===this)closeNewCourseModal()">
+  <div class="modal">
+    <div class="modal-title">Новый курс</div>
+    <div class="form-group">
+      <label class="form-label">Предмет</label>
+      <select class="form-input" id="nc-subject">
+        <option value="bio">Биология</option>
+        <option value="chem">Химия</option>
+        <option value="math">Математика</option>
+        <option value="phys">Физика</option>
+      </select>
+    </div>
+    <div class="form-group">
+      <label class="form-label">Название</label>
+      <input class="form-input" id="nc-title" placeholder="Например: Молекулярная биология" />
+    </div>
+    <div class="form-group">
+      <label class="form-label">Описание (необязательно)</label>
+      <textarea class="form-input" id="nc-desc" rows="2" placeholder="Кратко о курсе…" style="resize:vertical"></textarea>
+    </div>
+    <div class="form-group">
+      <label class="form-label">Эмодзи обложки</label>
+      <input class="form-input" id="nc-emoji" placeholder="" maxlength="4" style="max-width:90px" />
+    </div>
+    <div class="modal-footer">
+      <button class="btn-cancel" onclick="closeNewCourseModal()">Отмена</button>
+      <button class="btn-primary" id="btn-do-create" onclick="doCreateCourse()">Создать</button>
+    </div>
+  </div>
+</div>
+
+<script src="/js/api.js"></script>
+<script src="/js/notifications.js"></script>
+<script>
+  const { user, isTeacher, isAdmin } = LS.initPage();
+  LS.showBoardIfAllowed();
+  if (isTeacher || isAdmin) {
+    document.getElementById('btn-classes').style.display = '';
+    document.getElementById('btn-new-course').style.display = '';
+    document.getElementById('btn-from-tpl').style.display = '';
+  }
+  if (isAdmin) {
+    document.getElementById('btn-admin').style.display   = '';
+  }
+
+  lucide.createIcons();
+  LS.notif.init();
+
+  /* ── filter + search ── */
+  let currentFilter = '';
+  let allCourses = [];
+  let searchQuery = '';
+  let _searchTimer = null;
+
+  function setFilter(btn, subj) {
+    document.querySelectorAll('.sf-btn').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    currentFilter = subj;
+    searchQuery = '';
+    document.getElementById('search-input').value = '';
+    document.getElementById('search-results-info').style.display = 'none';
+    renderCourses();
+  }
+
+  function onSearchInput(val) {
+    clearTimeout(_searchTimer);
+    searchQuery = val.trim();
+    if (!searchQuery) {
+      document.getElementById('search-results-info').style.display = 'none';
+      renderCourses();
+      return;
+    }
+    _searchTimer = setTimeout(doSearch, 350);
+  }
+
+  async function doSearch() {
+    if (!searchQuery) return;
+    const grid = document.getElementById('courses-grid');
+    const info = document.getElementById('search-results-info');
+    grid.innerHTML = '<div style="grid-column:1/-1"><div class="spinner"></div></div>';
+    try {
+      const res = await LS.api('/api/courses/search?q=' + encodeURIComponent(searchQuery));
+      const courses = res.courses || [];
+      const lessons = res.lessons || [];
+      info.textContent = `Найдено: ${courses.length} курс(ов), ${lessons.length} урок(ов)`;
+      info.style.display = '';
+
+      let html = courses.map((c, i) => renderCourseCard(c, i)).join('');
+      if (lessons.length) {
+        html += `<div style="grid-column:1/-1;margin-top:8px;margin-bottom:2px">
+          <div style="font-family:'Unbounded',sans-serif;font-size:0.72rem;font-weight:800;color:#8898AA;text-transform:uppercase;letter-spacing:0.07em">Уроки</div>
+        </div>`;
+        html += lessons.map((l, i) => `
+          <a class="course-card stagger-item" href="/lesson?id=${l.id}" style="--i:${i};flex-direction:row;padding:16px;gap:14px;border-radius:16px">
+            <div style="width:36px;height:36px;border-radius:10px;background:rgba(155,93,229,0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1rem"><svg class="ic" viewBox="0 0 24 24"><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="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg></div>
+            <div style="flex:1">
+              <div style="font-size:0.88rem;font-weight:700;color:#0F172A">${esc(l.title)}</div>
+              <div style="font-size:0.74rem;color:#8898AA;margin-top:3px">${esc(l.courseTitle || l.course_title || '')}</div>
+            </div>
+            <i data-lucide="chevron-right" style="width:15px;height:15px;color:#CBD5E1;align-self:center;flex-shrink:0"></i>
+          </a>`).join('');
+      }
+
+      if (!html) {
+        grid.innerHTML = `<div style="grid-column:1/-1">
+          <div class="empty-state">
+            <div class="empty-state-icon"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg></div>
+            <div class="empty-state-title">Ничего не найдено</div>
+            <div class="empty-state-desc">Попробуйте другой запрос</div>
+          </div>
+        </div>`;
+      } else {
+        grid.innerHTML = html;
+      }
+      lucide.createIcons();
+    } catch {
+      grid.innerHTML = '<div style="grid-column:1/-1;text-align:center;color:#8898AA;padding:40px">Ошибка поиска</div>';
+    }
+  }
+
+  /* ── render ── */
+  const SUBJ_LABEL = { bio:'Биология', chem:'Химия', math:'Математика', phys:'Физика' };
+  const BANNER_CLASS = { bio:'cc-banner-bio', chem:'cc-banner-chem', math:'cc-banner-math', phys:'cc-banner-phys' };
+  const SUBJ_CLASS   = { bio:'cc-subj-bio',   chem:'cc-subj-chem',   math:'cc-subj-math',   phys:'cc-subj-phys' };
+
+  function renderCourseCard(c, i) {
+    const bannerClass = BANNER_CLASS[c.subjectSlug] || 'cc-banner-other';
+    const subjClass   = SUBJ_CLASS[c.subjectSlug]   || 'cc-subj-other';
+    const subjLabel   = SUBJ_LABEL[c.subjectSlug]   || c.subjectSlug;
+    const pct = c.lessonCount > 0 ? Math.round(c.doneCount / c.lessonCount * 100) : 0;
+    return `<a class="course-card stagger-item" href="/course?id=${c.id}" style="--i:${i}">
+      <div class="cc-banner ${bannerClass}">
+        ${c.coverEmoji || LS.icon('book-open',20)}
+        ${!c.isPublished && isTeacher ? '<span class="cc-draft-badge">Черновик</span>' : ''}
+        ${isTeacher ? `<button class="cc-del-btn" onclick="delCourse(event,${c.id},'${esc(c.title).replace(/'/g, "\\'")}')" title="Удалить курс">${LS.icon('trash-2',14)}</button>` : ''}
+      </div>
+      <div class="cc-body">
+        <div class="cc-subj ${subjClass}">${esc(subjLabel)}</div>
+        <div class="cc-title">${esc(c.title)}</div>
+        ${c.description ? `<div class="cc-desc">${esc(c.description)}</div>` : '<div class="cc-desc" style="opacity:0.4">Нет описания</div>'}
+        <div class="cc-footer">
+          <div class="cc-meta"><i data-lucide="book-open" style="width:13px;height:13px"></i> ${c.lessonCount} уроков</div>
+          ${c.lessonCount > 0 ? `
+          <div style="display:flex;align-items:center;gap:7px">
+            <div class="cc-progress-bar"><div class="cc-progress-fill" style="width:${pct}%"></div></div>
+            <span class="cc-pct">${pct}%</span>
+          </div>` : ''}
+        </div>
+      </div>
+    </a>`;
+  }
+
+  function renderCourses() {
+    const grid = document.getElementById('courses-grid');
+    const filtered = currentFilter ? allCourses.filter(c => c.subjectSlug === currentFilter) : allCourses;
+
+    if (!filtered.length) {
+      grid.innerHTML = `<div style="grid-column:1/-1">
+        <div class="empty-state">
+          <div class="empty-state-icon"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle"><path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2V3zm20 0h-6a4 4 0 00-4 4v14a3 3 0 013-3h7V3z"/></svg></div>
+          <div class="empty-state-title">Курсов пока нет</div>
+          <div class="empty-state-desc">${isTeacher ? 'Создайте первый курс нажав кнопку «Новый курс»' : 'Здесь появятся курсы, когда учитель их добавит'}</div>
+        </div>
+      </div>`;
+      return;
+    }
+
+    grid.innerHTML = filtered.map((c, i) => renderCourseCard(c, i)).join('');
+    lucide.createIcons();
+  }
+
+  /* ── continue reading ── */
+  async function loadContinue() {
+    try {
+      const res = await LS.api('/api/courses/continue');
+      if (!res || !res.lessonId) return;
+      const wrap = document.getElementById('continue-wrap');
+      wrap.innerHTML = `
+        <a class="continue-banner" href="/lesson?id=${res.lessonId}">
+          <div class="cb-icon"><svg class="ic" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg></div>
+          <div class="cb-body">
+            <div class="cb-label">Продолжить обучение</div>
+            <div class="cb-title">${esc(res.lessonTitle || 'Урок')}</div>
+            <div class="cb-course">${esc(res.courseTitle || '')}</div>
+          </div>
+          <i data-lucide="arrow-right" class="cb-arrow" style="width:18px;height:18px;flex-shrink:0"></i>
+        </a>`;
+      wrap.style.display = '';
+      lucide.createIcons();
+    } catch {}
+  }
+
+  /* ── delete course ── */
+  async function delCourse(e, id, title) {
+    e.preventDefault();
+    e.stopPropagation();
+    const ok = await LS.confirm('Удалить курс «' + title + '» и все его уроки?', { title:'Удаление курса', confirmText:'Удалить', danger:true });
+    if (!ok) return;
+    try {
+      await LS.api('/api/courses/' + id, { method: 'DELETE' });
+      loadCourses();
+    } catch (err) { LS.toast(err.message || 'Ошибка', 'error'); }
+  }
+
+  /* ── load courses ── */
+  async function loadCourses() {
+    try {
+      allCourses = await LS.api('/api/courses');
+      renderCourses();
+    } catch (e) {
+      document.getElementById('courses-grid').innerHTML =
+        '<div style="grid-column:1/-1;text-align:center;color:#8898AA;padding:40px">Ошибка загрузки</div>';
+    }
+  }
+  loadCourses();
+  loadContinue();
+
+  /* ── modal ── */
+  function openNewCourseModal() {
+    document.getElementById('nc-title').value = '';
+    document.getElementById('nc-desc').value  = '';
+    document.getElementById('nc-emoji').value = '';
+    document.getElementById('new-course-modal').classList.add('open');
+    setTimeout(() => document.getElementById('nc-title').focus(), 50);
+  }
+  function closeNewCourseModal() {
+    document.getElementById('new-course-modal').classList.remove('open');
+  }
+  async function doCreateCourse() {
+    const title = document.getElementById('nc-title').value.trim();
+    if (!title) { document.getElementById('nc-title').focus(); return; }
+    const btn = document.getElementById('btn-do-create');
+    btn.disabled = true;
+    try {
+      const res = await LS.api('/api/courses', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          subjectSlug: document.getElementById('nc-subject').value,
+          title,
+          description: document.getElementById('nc-desc').value.trim() || null,
+          coverEmoji:  document.getElementById('nc-emoji').value.trim() || '',
+        }),
+      });
+      closeNewCourseModal();
+      location.href = '/course?id=' + res.id;
+    } catch (e) {
+      LS.toast(e.message || 'Ошибка', 'error');
+    } finally { btn.disabled = false; }
+  }
+  document.getElementById('nc-title').addEventListener('keydown', e => {
+    if (e.key === 'Enter') doCreateCourse();
+  });
+
+  /* ══════════════════════════════════════════════════════════════════
+     TEMPLATE BROWSER
+     ══════════════════════════════════════════════════════════════════ */
+  function openTplBrowser() {
+    document.getElementById('tpl-browser-modal').classList.add('open');
+    loadCourseTpls();
+  }
+  function closeTplBrowser() {
+    document.getElementById('tpl-browser-modal').classList.remove('open');
+  }
+
+  let _tplFilter = '';
+  function setTplFilter(btn, val) {
+    document.querySelectorAll('.tpl-filter-btn').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    _tplFilter = val;
+    loadCourseTpls();
+  }
+
+  async function loadCourseTpls() {
+    const grid = document.getElementById('tpl-grid');
+    grid.innerHTML = '<div style="grid-column:1/-1"><div class="spinner"></div></div>';
+    try {
+      const params = {};
+      if (_tplFilter) params.subject = _tplFilter;
+      const list = await LS.getCourseTemplates(params);
+      if (!list.length) {
+        grid.innerHTML = '<div style="grid-column:1/-1" class="tpl-empty">' + LS.icon('clipboard', 32) + '<br>Нет доступных шаблонов курсов</div>';
+        return;
+      }
+      grid.innerHTML = list.map(t => {
+        const structure = t.structure || {};
+        const secCount = (structure.sections || []).length;
+        const lesCount = (structure.sections || []).reduce((sum, s) => sum + (s.lessons || []).length, 0);
+        const subjLabel = SUBJ_LABEL[t.subjectSlug] || t.subjectSlug || '';
+        const canDelete = t.createdBy === user.id || user.role === 'admin';
+        return '<div class="tpl-card">' +
+          '<div class="tpl-card-banner ' + (t.subjectSlug ? 'tpl-banner-' + t.subjectSlug : '') + '">' +
+            LS.icon('clipboard', 24) +
+          '</div>' +
+          '<div class="tpl-card-body">' +
+            (subjLabel ? '<div class="tpl-card-subj">' + esc(subjLabel) + '</div>' : '') +
+            '<div class="tpl-card-title">' + esc(t.title) + '</div>' +
+            (t.description ? '<div class="tpl-card-desc">' + esc(t.description) + '</div>' : '') +
+            '<div class="tpl-card-meta">' +
+              '<span>' + secCount + ' разд.</span>' +
+              '<span>' + lesCount + ' уроков</span>' +
+              '<span>' + esc(t.creatorName) + '</span>' +
+            '</div>' +
+            '<div class="tpl-card-actions">' +
+              '<button class="tpl-use-btn" onclick="useCourseTpl(' + t.id + ')">Использовать</button>' +
+              (canDelete ? '<button class="tpl-del-btn" onclick="delCourseTpl(event,' + t.id + ')" title="Удалить">' + LS.icon('trash',13) + '</button>' : '') +
+            '</div>' +
+          '</div>' +
+        '</div>';
+      }).join('');
+    } catch (e) {
+      grid.innerHTML = '<div style="grid-column:1/-1" class="tpl-empty">Ошибка загрузки</div>';
+    }
+  }
+
+  async function useCourseTpl(tplId) {
+    try {
+      const res = await LS.createFromCourseTemplate(tplId, {});
+      closeTplBrowser();
+      LS.toast('Курс создан из шаблона', 'success');
+      location.href = '/course?id=' + res.id;
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+
+  async function delCourseTpl(e, tplId) {
+    e.stopPropagation();
+    const ok = await LS.confirm('Удалить этот шаблон курса?', { title:'Удаление шаблона', confirmText:'Удалить', danger:true });
+    if (!ok) return;
+    try {
+      await LS.deleteCourseTemplate(tplId);
+      LS.toast('Шаблон удалён', 'success');
+      loadCourseTpls();
+    } catch (e2) { LS.toast(e2.message || 'Ошибка', 'error'); }
+  }
+</script>
+
+<!-- Template browser modal -->
+<style>
+  .tpl-modal{position:fixed;inset:0;background:rgba(15,23,42,0.4);backdrop-filter:blur(6px);z-index:200;display:none;align-items:center;justify-content:center;padding:20px;}
+  .tpl-modal.open{display:flex;}
+  .tpl-browser{background:#fff;border-radius:24px;padding:28px 32px;width:100%;max-width:780px;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 32px 80px rgba(15,23,42,0.22);}
+  .tpl-browser-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
+  .tpl-browser-title{font-family:'Unbounded',sans-serif;font-size:1rem;font-weight:800;color:#0F172A;}
+  .tpl-filter-bar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
+  .tpl-filter-btn{padding:6px 14px;border-radius:999px;border:1.5px solid rgba(15,23,42,0.1);background:#fff;color:#6B7A8E;font-family:'Manrope',sans-serif;font-size:0.78rem;font-weight:700;cursor:pointer;transition:all .15s;}
+  .tpl-filter-btn:hover{border-color:var(--violet);color:var(--violet);}
+  .tpl-filter-btn.active{background:var(--violet);color:#fff;border-color:var(--violet);}
+  .tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;overflow-y:auto;flex:1;padding-right:4px;}
+  .tpl-card{background:#fff;border:1.5px solid rgba(15,23,42,0.07);border-radius:18px;overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s;display:flex;flex-direction:column;box-shadow:0 2px 8px rgba(15,23,42,0.05);}
+  .tpl-card:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(15,23,42,0.1);border-color:rgba(155,93,229,0.2);}
+  .tpl-card-banner{height:56px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0a0a1a 0%,#1a1a2e 100%);color:rgba(255,255,255,0.4);}
+  .tpl-banner-bio{background:linear-gradient(135deg,#1a0a3c 0%,#2d0856 100%);}
+  .tpl-banner-chem{background:linear-gradient(135deg,#062a20 0%,#064a38 100%);}
+  .tpl-banner-math{background:linear-gradient(135deg,#061828 0%,#062848 100%);}
+  .tpl-banner-phys{background:linear-gradient(135deg,#1c1400 0%,#3a2800 100%);}
+  .tpl-card-body{padding:14px 16px 12px;flex:1;display:flex;flex-direction:column;}
+  .tpl-card-subj{font-size:0.66rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--violet);margin-bottom:4px;}
+  .tpl-card-title{font-family:'Unbounded',sans-serif;font-size:0.82rem;font-weight:800;color:#0F172A;margin-bottom:6px;line-height:1.35;}
+  .tpl-card-desc{font-size:0.76rem;color:#6B7A8E;line-height:1.5;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
+  .tpl-card-meta{font-size:0.7rem;color:#8898AA;display:flex;gap:8px;margin-bottom:10px;}
+  .tpl-card-actions{display:flex;gap:6px;margin-top:auto;}
+  .tpl-use-btn{flex:1;padding:7px 14px;border:none;border-radius:999px;background:var(--violet);color:#fff;font-family:'Manrope',sans-serif;font-size:0.78rem;font-weight:700;cursor:pointer;transition:all .15s;}
+  .tpl-use-btn:hover{background:#8a47d8;}
+  .tpl-del-btn{width:30px;height:30px;border:1.5px solid rgba(241,91,181,0.2);border-radius:999px;background:rgba(241,91,181,0.06);color:#E0335E;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s;flex-shrink:0;}
+  .tpl-del-btn:hover{background:#E0335E;color:#fff;}
+  .tpl-empty{text-align:center;padding:40px;color:#8898AA;font-size:0.86rem;}
+</style>
+
+<div class="tpl-modal" id="tpl-browser-modal" onclick="if(event.target===this)closeTplBrowser()">
+  <div class="tpl-browser">
+    <div class="tpl-browser-header">
+      <div class="tpl-browser-title">Шаблоны курсов</div>
+      <button class="btn-cancel" onclick="closeTplBrowser()" style="padding:6px 16px">Закрыть</button>
+    </div>
+    <div class="tpl-filter-bar">
+      <button class="tpl-filter-btn active" onclick="setTplFilter(this,'')">Все</button>
+      <button class="tpl-filter-btn" onclick="setTplFilter(this,'bio')">Биология</button>
+      <button class="tpl-filter-btn" onclick="setTplFilter(this,'chem')">Химия</button>
+      <button class="tpl-filter-btn" onclick="setTplFilter(this,'math')">Математика</button>
+      <button class="tpl-filter-btn" onclick="setTplFilter(this,'phys')">Физика</button>
+    </div>
+    <div class="tpl-grid" id="tpl-grid">
+      <div style="grid-column:1/-1"><div class="spinner"></div></div>
+    </div>
+  </div>
+</div>
+
+<script src="/js/search.js"></script>
+<script src="/js/mobile.js"></script>
+</body>
+</html>
diff --git a/js/api.js b/js/api.js
new file mode 100644
index 0000000..9eb7851
--- /dev/null
+++ b/js/api.js
@@ -0,0 +1,1175 @@
+const API = '/api';
+
+/* ── токен ────────────────────────────────────────────────────────────── */
+function getToken()        { return localStorage.getItem('ls_token'); }
+function setToken(t)       { localStorage.setItem('ls_token', t); }
+function removeToken()     { localStorage.removeItem('ls_token'); }
+function getUser()         { return JSON.parse(localStorage.getItem('ls_user') || 'null'); }
+function setUser(u)        { localStorage.setItem('ls_user', JSON.stringify(u)); }
+function removeUser()      { localStorage.removeItem('ls_user'); }
+
+function isLoggedIn()      { return !!getToken(); }
+
+function logout() {
+  removeToken();
+  removeUser();
+  window.location.href = '/login';
+}
+
+/* ── базовый fetch ────────────────────────────────────────────────────── */
+async function req(method, path, body) {
+  const headers = { 'Content-Type': 'application/json' };
+  const token = getToken();
+  if (token) headers['Authorization'] = `Bearer ${token}`;
+
+  const res = await fetch(API + path, {
+    method,
+    headers,
+    body: body ? JSON.stringify(body) : undefined,
+  });
+
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok) {
+    if (res.status === 401) {
+      localStorage.removeItem('ls_token'); localStorage.removeItem('ls_user');
+      if (window.location.pathname !== '/login') { window.location.href = '/login'; return; }
+      throw Object.assign(new Error(data.error || 'Unauthorized'), { status: 401, data });
+    }
+    if (res.status === 403) {
+      if (typeof LS !== 'undefined' && LS.toast) LS.toast('Нет доступа', 'error');
+      throw Object.assign(new Error(data.error || 'Forbidden'), { status: 403, data });
+    }
+    throw Object.assign(new Error(data.error || 'Request failed'), { status: res.status, data });
+  }
+  return data;
+}
+
+/* ── auth ─────────────────────────────────────────────────────────────── */
+async function register(email, password, name) {
+  const data = await req('POST', '/auth/register', { email, password, name });
+  setToken(data.token);
+  setUser(data.user);
+  return data;
+}
+
+async function login(email, password) {
+  const data = await req('POST', '/auth/login', { email, password });
+  setToken(data.token);
+  setUser(data.user);
+  return data;
+}
+
+async function fetchMe() {
+  return req('GET', '/auth/me');
+}
+
+async function updateProfile(data) {
+  const result = await req('PATCH', '/auth/profile', data);
+  if (result.token) setToken(result.token);
+  if (result.user)  setUser(result.user);
+  return result;
+}
+
+/* ── subjects ─────────────────────────────────────────────────────────── */
+async function getSubjects()             { return req('GET',   '/subjects'); }
+async function updateSubject(slug, data) { return req('PATCH', `/subjects/${slug}`, data); }
+async function getTopics(slug)           { return req('GET',   `/subjects/${slug}/topics`); }
+
+/* ── sessions ─────────────────────────────────────────────────────────── */
+async function startSession(subject_slug, mode = 'exam', count = 25, topic_id = null, test_id = null) {
+  return req('POST', '/sessions', { subject_slug, mode, count, topic_id, test_id });
+}
+
+async function sendAnswer(session_id, question_id, option_id, time_spent_sec, answer_text, chosen_options) {
+  return req('POST', `/sessions/${session_id}/answer`, { question_id, option_id, time_spent_sec, answer_text, chosen_options });
+}
+
+async function finishSession(session_id) {
+  return req('POST', `/sessions/${session_id}/finish`);
+}
+
+async function getResult(session_id) {
+  return req('GET', `/sessions/${session_id}/result`);
+}
+
+async function getHistory(page = 1, limit = 20) {
+  return req('GET', `/sessions/history?page=${page}&limit=${limit}`);
+}
+
+async function getSessionQuestions(id) {
+  return req('GET', `/sessions/${id}/questions`);
+}
+
+async function getWeakTopics() {
+  return req('GET', '/sessions/weak-topics');
+}
+async function getStudentStats() {
+  return req('GET', '/sessions/stats');
+}
+
+/* ── questions ────────────────────────────────────────────────────────── */
+async function getQuestions(subject, topic_id, sort, page, limit) {
+  const p = new URLSearchParams();
+  if (subject)  p.set('subject',  subject);
+  if (topic_id) p.set('topic_id', topic_id);
+  if (sort)     p.set('sort',     sort);
+  if (page)     p.set('page',     page);
+  if (limit)    p.set('limit',    limit);
+  const data = await req('GET', `/questions?${p}`);
+  // API returns { rows, total, page, limit } — extract rows for compat
+  return Array.isArray(data) ? data : data.rows;
+}
+async function createQuestion(data)      { return req('POST',   '/questions',            data); }
+async function duplicateQuestion(id)     { return req('POST',   `/questions/${id}/copy`, {}); }
+async function updateQuestion(id, data)  { return req('PUT',    `/questions/${id}`,      data); }
+async function deleteQuestion(id)        { return req('DELETE', `/questions/${id}`); }
+async function importQuestions(formData) {
+  const token = getToken();
+  const headers = {};
+  if (token) headers['Authorization'] = `Bearer ${token}`;
+  const res  = await fetch(API + '/questions/import', { method: 'POST', headers, body: formData });
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok) throw Object.assign(new Error(data.error || 'Request failed'), { status: res.status, data });
+  return data;
+}
+
+/* ── admin ────────────────────────────────────────────────────────────── */
+async function adminGetStats()              { return req('GET',   '/admin/stats'); }
+async function adminGetUsers(params = {})   {
+  const p = new URLSearchParams();
+  if (params.page)  p.set('page',  params.page);
+  if (params.limit) p.set('limit', params.limit);
+  if (params.role)  p.set('role',  params.role);
+  if (params.q)     p.set('q',     params.q);
+  const data = await req('GET', `/admin/users?${p}`);
+  // API returns { users, total, page, limit } — extract users for compat
+  return Array.isArray(data) ? data : data.users;
+}
+async function adminUpdateRole(id, role)    { return req('PATCH', `/admin/users/${id}/role`, { role }); }
+async function adminGetUserSessions(id)     { return req('GET',   `/admin/users/${id}/sessions`); }
+async function adminGetSessions(params = {}) {
+  const p = new URLSearchParams();
+  if (params.subject)  p.set('subject',  params.subject);
+  if (params.user_id)  p.set('user_id',  params.user_id);
+  if (params.limit)    p.set('limit',    params.limit);
+  if (params.offset)   p.set('offset',   params.offset);
+  return req('GET', `/admin/sessions?${p}`);
+}
+async function adminGetSessionDetail(id)    { return req('GET',   `/admin/sessions/${id}`); }
+async function adminClearUserSessions(id)  { return req('POST', `/admin/users/${id}/sessions/clear`); }
+async function adminUpdateUser(id, data)   { return req('PATCH',  `/admin/users/${id}`, data); }
+async function adminBanUser(id, banned)    { return req('PATCH',  `/admin/users/${id}/ban`, { banned }); }
+async function adminDeleteUser(id)         { return req('DELETE', `/admin/users/${id}`); }
+
+/* ── classes (teacher/admin) ──────────────────────────────────────────── */
+async function getClasses()                    { return req('GET',    '/classes'); }
+async function createClass(data)               { return req('POST',   '/classes', data); }
+async function getClassDetail(id)              { return req('GET',    `/classes/${id}`); }
+async function updateClass(id, data)           { return req('PATCH',  `/classes/${id}`, data); }
+async function deleteClass(id)                 { return req('DELETE', `/classes/${id}`); }
+async function kickMember(classId, userId)     { return req('DELETE', `/classes/${classId}/members/${userId}`); }
+async function regenerateInviteCode(classId)   { return req('POST',   `/classes/${classId}/new-code`); }
+async function classJournal(classId)           { return req('GET',    `/classes/${classId}/journal`); }
+async function createAssignment(classId, data)  { return req('POST',   `/classes/${classId}/assignments`, data); }
+async function createDirectAssignment(data)     { return req('POST',   '/assignments', data); }
+async function updateAssignment(id, data)       { return req('PUT',    `/assignments/${id}`,  data); }
+async function deleteAssignment(id)             { return req('DELETE', `/assignments/${id}`); }
+
+/* ── classes (student) ────────────────────────────────────────────────── */
+async function joinClass(invite_code)          { return req('POST',   '/classes/join', { invite_code }); }
+async function myClasses()                     { return req('GET',    '/classes/student/my'); }
+async function getStudents()                   { return req('GET',    '/classes/students'); }
+async function classFeed(classId)              { return req('GET',    `/classes/${classId}/feed`); }
+
+/* ── assignments (student) ────────────────────────────────────────────── */
+async function myAssignments()                 { return req('GET',    '/assignments/my'); }
+async function teacherAssignments()            { return req('GET',    '/assignments/teacher'); }
+async function startAssignment(id)             { return req('POST',   `/assignments/${id}/start`); }
+async function assignmentResults(id)           { return req('GET',    `/assignments/${id}/results`); }
+async function assignmentSessionReview(assignment_id, session_id) {
+  return req('GET', `/assignments/${assignment_id}/sessions/${session_id}/review`);
+}
+async function assignmentQuestionStats(id)         { return req('GET', `/assignments/${id}/question-stats`); }
+
+/* ── tests ────────────────────────────────────────────────────────────── */
+async function getTests(subject) {
+  const p = subject ? `?subject=${subject}` : '';
+  return req('GET', `/tests${p}`);
+}
+async function createTest(data)                    { return req('POST',   '/tests', data); }
+async function getTest(id)                         { return req('GET',    `/tests/${id}`); }
+async function updateTest(id, data)                { return req('PUT',    `/tests/${id}`, data); }
+async function deleteTest(id)                      { return req('DELETE', `/tests/${id}`); }
+async function addQuestionsToTest(id, question_ids){ return req('POST',   `/tests/${id}/questions`, { question_ids }); }
+async function removeQFromTest(tid, qid)           { return req('DELETE', `/tests/${tid}/questions/${qid}`); }
+
+/* ── gamification ────────────────────────────────────────────────────── */
+async function getGamificationMe()        { return req('GET', '/gamification/me'); }
+async function getGamAchievements()       { return req('GET', '/gamification/achievements'); }
+async function getLeaderboard(params = {}) {
+  const p = new URLSearchParams();
+  if (params.class_id) p.set('class_id', params.class_id);
+  if (params.period)   p.set('period',   params.period);
+  return req('GET', `/gamification/leaderboard?${p}`);
+}
+async function getXPHistory(limit)        { return req('GET', `/gamification/xp-history?limit=${limit || 20}`); }
+async function getChallenges()            { return req('GET', '/gamification/challenges'); }
+async function claimChallenge(id)         { return req('POST', `/gamification/challenges/${id}/claim`); }
+async function setGoalTier(tier)          { return req('POST', '/gamification/goal-tier', { tier }); }
+async function getFrames()                { return req('GET', '/gamification/frames'); }
+async function setFrame(frame)            { return req('POST', '/gamification/frame', { frame }); }
+async function reportLabActivity(reactionsDiscovered) { return req('POST', '/gamification/lab-activity', { reactionsDiscovered: reactionsDiscovered || 0 }); }
+
+/* ── утилиты ──────────────────────────────────────────────────────────── */
+function escapeHtml(str) {
+  if (typeof str !== 'string') return str;
+  return str.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+}
+const esc = escapeHtml;
+
+function parseDate(dateStr) {
+  if (!dateStr) return new Date(0);
+  return new Date(dateStr.replace(' ', 'T') + (dateStr.includes('Z') || dateStr.includes('+') ? '' : 'Z'));
+}
+
+function fmtRelTime(dateStr) {
+  const d = parseDate(dateStr);
+  const m = Math.floor((Date.now() - d.getTime()) / 60000);
+  if (m < 1) return 'только что';
+  if (m < 60) return `${m} мин назад`;
+  const h = Math.floor(m / 60);
+  if (h < 24) return `${h} ч назад`;
+  return d.toLocaleDateString('ru', { day: 'numeric', month: 'short' });
+}
+
+function safeHref(link) { return link && /^\/[a-z]/.test(link) ? link : '#'; }
+
+function requireAuth() {
+  if (!isLoggedIn()) {
+    window.location.href = '/login';
+    return false;
+  }
+  return true;
+}
+
+/* ── SVG-иконки ──────────────────────────────────────────────────────── */
+const _ICONS = {
+  trophy:     '<path d="M6 9H4V5h16v4h-2"/><path d="M6 9a6 6 0 006 6 6 6 0 006-6"/><path d="M12 15v3m-4 3h8" stroke-linecap="round"/>',
+  target:     '<circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/>',
+  flame:      '<path d="M12 2c.5 3.5-1.5 6-1.5 6 1 1.5 3 2 3 5a4 4 0 01-8 0c0-2 .5-3 1.5-4.5C8.5 6.5 7 4.5 7 4.5S9.5 2 12 2z"/>',
+  zap:        '<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>',
+  sparkles:   '<path d="M12 2l1.5 4.5L18 8l-4.5 1.5L12 14l-1.5-4.5L6 8l4.5-1.5L12 2zm6 10l1 2.5L21.5 16 19 17l-1 2.5-1-2.5L14.5 16 17 15l1-2.5zM4 16l.75 2L7 18.75 4.75 19.5 4 22l-.75-2.5L1 18.75 3.25 18 4 16z" fill="currentColor" stroke="none"/>',
+  diamond:    '<path d="M2.7 9l4-6h10.6l4 6L12 22 2.7 9z"/><path d="M2.7 9h18.6" stroke-linecap="round"/>',
+  'book-open':'<path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2V3zm20 0h-6a4 4 0 00-4 4v14a3 3 0 013-3h7V3z"/>',
+  running:    '<circle cx="14" cy="4" r="2" fill="currentColor" stroke="none"/><path d="M18 9l-4.35 2.17-2.18-2.58L7 12l1.5 1.5 2.5-2 1.73 2.05L10 17l-3 4m7-8l2 4h3"/>',
+  'check-circle':'<path d="M22 11.08V12a10 10 0 11-5.93-9.14M22 4L12 14.01l-3-3"/>',
+  hundred:    '<text x="12" y="16" text-anchor="middle" font-size="14" font-weight="bold" fill="currentColor" stroke="none" font-family="sans-serif">100</text>',
+  school:     '<path d="M2 10l10-6 10 6-10 6z"/><path d="M6 13v5c0 1.5 2.7 3 6 3s6-1.5 6-3v-5"/><path d="M22 10v6" stroke-linecap="round"/>',
+  'file-text':'<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z"/><path d="M14 2v6h6M16 13H8m8 4H8m2-8H8"/>',
+  books:      '<rect x="2" y="4" width="6" height="16" rx="1"/><rect x="10" y="2" width="6" height="18" rx="1"/><path d="M18 5l3.5 15.5-1 .2L17 5.5l1-.5z"/>',
+  star:       '<path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.27 5.82 21 7 14.14 2 9.27l6.91-1.01L12 2z"/>',
+  crown:      '<path d="M2 17l3-10 4 4 3-6 3 6 4-4 3 10z" fill="currentColor" stroke="none"/><rect x="2" y="17" width="20" height="3" rx="1" fill="currentColor" stroke="none"/>',
+  brain:      '<path d="M9.5 2a4.5 4.5 0 00-3.8 6.9A4 4 0 004 13a4 4 0 003 3.87V21h2v-4.13A4 4 0 0012 13v-1m2.5-10a4.5 4.5 0 013.8 6.9A4 4 0 0020 13a4 4 0 00-3 3.87V21h-2v-4.13A4 4 0 0012 13v-1"/>',
+  party:      '<path d="M5.8 11.3L2 22l10.7-3.8M5.8 11.3l4.8 4.8m-4.8-4.8L12 2l1.2 5.3m-2.4 8.6L22 12l-5.3-1.2M15 4l2 2m-8 8l2 2"/>',
+  'thumbs-up':'<path d="M14 9V5a3 3 0 00-6 0v1l-2 6v7a1 1 0 001 1h9.28a2 2 0 001.94-1.57l1.56-7A2 2 0 0017.86 9H14z"/>',
+  muscle:     '<path d="M7 11c0-2 1-4 3-4s3 2 3 2 1-2 3-2 3 2 3 4v4a6 6 0 01-6 6H9a6 6 0 01-6-6v-2c0-2 1-3 2-3s2 1 2 3"/>',
+  trash:      '<path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14zM10 11v6m4-6v6"/>',
+  'help-circle':'<circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3m.08 4h.01"/>',
+  clipboard:  '<path d="M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2"/><rect x="8" y="2" width="8" height="4" rx="1"/>',
+  lock:       '<rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/>',
+  check:      '<path d="M20 6L9 17l-5-5"/>',
+  x:          '<path d="M18 6L6 18M6 6l12 12"/>',
+  'x-close':  '<path d="M18 6L6 18M6 6l12 12"/>',
+  square:     '<rect x="3" y="3" width="18" height="18" rx="2"/>',
+  'alert-tri':'<path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><path d="M12 9v4m0 4h.01"/>',
+  info:       '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4m0-4h.01"/>',
+  warning:    '<path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><path d="M12 9v4m0 4h.01"/>',
+  'check-sq': '<path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/>',
+  'bar-chart':'<path d="M12 20V10M18 20V4M6 20v-4"/>',
+  lightbulb:  '<path d="M9 18h6m-5 2h4M12 2a7 7 0 00-4 12.7V17h8v-2.3A7 7 0 0012 2z"/>',
+  image:      '<rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/>',
+  link:       '<path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71m4.54 5.07a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/>',
+  pin:        '<path d="M12 2a7 7 0 00-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 00-7-7z"/><circle cx="12" cy="9" r="2.5"/>',
+  video:      '<rect x="2" y="5" width="14" height="14" rx="2"/><path d="M22 7l-6 4 6 4V7z"/>',
+  explosion:  '<path d="M12 2l2 6 6-2-4 5 5 3-6 1 1 6-4-4-4 4 1-6-6-1 5-3-4-5 6 2z"/>',
+  clock:      '<circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>',
+  atom:       '<circle cx="12" cy="12" r="2"/><ellipse cx="12" cy="12" rx="10" ry="4" fill="none"/><ellipse cx="12" cy="12" rx="10" ry="4" fill="none" transform="rotate(60 12 12)"/><ellipse cx="12" cy="12" rx="10" ry="4" fill="none" transform="rotate(120 12 12)"/>',
+  droplet:    '<path d="M12 2.69l5.66 5.66a8 8 0 11-11.31 0z"/>',
+  compass:    '<circle cx="12" cy="12" r="10"/><path d="M16.24 7.76l-2.12 6.36-6.36 2.12 2.12-6.36z"/>',
+  moon:       '<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>',
+  'grip-v':   '<circle cx="9" cy="5" r="1" fill="currentColor" stroke="none"/><circle cx="15" cy="5" r="1" fill="currentColor" stroke="none"/><circle cx="9" cy="12" r="1" fill="currentColor" stroke="none"/><circle cx="15" cy="12" r="1" fill="currentColor" stroke="none"/><circle cx="9" cy="19" r="1" fill="currentColor" stroke="none"/><circle cx="15" cy="19" r="1" fill="currentColor" stroke="none"/>',
+  'arrow-up': '<path d="M12 19V5m-7 7l7-7 7 7"/>',
+  'arrow-down':'<path d="M12 5v14m7-7l-7 7-7-7"/>',
+  shuffle:    '<path d="M16 3h5v5M4 20L21 3M21 16v5h-5M15 15l6 6M4 4l5 5"/>',
+  coins:      '<circle cx="8" cy="14" r="6"/><path d="M18 8a6 6 0 00-6 6"/><circle cx="16" cy="10" r="6"/>',
+  'shopping-bag':'<path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4H6zM3 6h18M16 10a4 4 0 01-8 0"/>',
+  gift:       '<path d="M20 12v10H4V12M2 7h20v5H2V7z"/><path d="M12 22V7m0 0a4 3 0 10-4-3m4 3a4 3 0 114-3"/>',
+  dna:        '<path d="M2 15c6.667-6 13.333 0 20-6M2 9c6.667 6 13.333 0 20 6M7 21c0-4 4-4 4-8s-4-4-4-8M17 21c0-4-4-4-4-8s4-4 4-8"/>',
+};
+
+function lsIcon(name, size = 18, cls = '') {
+  const d = _ICONS[name];
+  if (!d) return '';
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"${cls ? ` class="${cls}"` : ''} style="display:inline-block;vertical-align:middle;flex-shrink:0">${d}</svg>`;
+}
+
+/* ── Toast-уведомления ────────────────────────────────────────────────── */
+function lsToast(message, type = 'info', duration = 3500) {
+  if (!document.getElementById('ls-toast-style')) {
+    const s = document.createElement('style');
+    s.id = 'ls-toast-style';
+    s.textContent = `
+      #ls-toast-wrap{position:fixed;bottom:24px;right:24px;z-index:99999;display:flex;flex-direction:column;gap:10px;pointer-events:none;}
+      .ls-toast{display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:14px;min-width:220px;max-width:360px;
+        font-family:'Manrope',sans-serif;font-size:0.875rem;font-weight:600;color:#fff;pointer-events:auto;
+        box-shadow:0 8px 32px rgba(15,23,42,0.22);transform:translateX(120%);opacity:0;
+        transition:transform .28s cubic-bezier(.34,1.56,.64,1),opacity .22s ease;}
+      .ls-toast.show{transform:translateX(0);opacity:1;}
+      .ls-toast.hide{transform:translateX(120%);opacity:0;}
+      .ls-toast.success{background:linear-gradient(135deg,#00C87A,#06B96E);}
+      .ls-toast.error  {background:linear-gradient(135deg,#F15BB5,#E0335E);}
+      .ls-toast.info   {background:linear-gradient(135deg,#06D6E0,#9B5DE5);}
+      .ls-toast.warn   {background:linear-gradient(135deg,#FF9F1C,#E07A00);}
+      .ls-toast-icon{font-size:1.1rem;flex-shrink:0;}
+      .ls-toast-msg{flex:1;line-height:1.4;}
+      .ls-toast-close{background:none;border:none;color:rgba(255,255,255,0.7);font-size:1rem;cursor:pointer;padding:0 2px;flex-shrink:0;line-height:1;}
+      .ls-toast-close:hover{color:#fff;}
+    `;
+    document.head.appendChild(s);
+  }
+  let wrap = document.getElementById('ls-toast-wrap');
+  if (!wrap) { wrap = document.createElement('div'); wrap.id = 'ls-toast-wrap'; document.body.appendChild(wrap); }
+
+  const _tIcons = { success: 'check-circle', error: 'x-close', info: 'info', warn: 'warning' };
+  const el = document.createElement('div');
+  el.className = `ls-toast ${type}`;
+  el.innerHTML = `<span class="ls-toast-icon">${lsIcon(_tIcons[type] || 'info', 18)}</span><span class="ls-toast-msg"></span><button class="ls-toast-close" onclick="this.closest('.ls-toast').remove()">${lsIcon('x-close', 14)}</button>`;
+  el.querySelector('.ls-toast-msg').textContent = message;
+  wrap.appendChild(el);
+  requestAnimationFrame(() => requestAnimationFrame(() => el.classList.add('show')));
+
+  const hide = () => {
+    el.classList.add('hide');
+    setTimeout(() => el.remove(), 320);
+  };
+  const timer = setTimeout(hide, duration);
+  el.querySelector('.ls-toast-close').addEventListener('click', () => clearTimeout(timer));
+}
+
+/* ── Skeleton-заглушки ────────────────────────────────────────────────── */
+function lsSkeleton(count = 3, variant = 'card') {
+  if (!document.getElementById('ls-skeleton-style')) {
+    const s = document.createElement('style');
+    s.id = 'ls-skeleton-style';
+    s.textContent = `
+      @keyframes ls-shimmer{from{background-position:-600px 0}to{background-position:600px 0}}
+      .ls-sk{
+        border-radius:12px;
+        background:linear-gradient(90deg,rgba(155,93,229,0.06) 20%,rgba(155,93,229,0.15) 40%,rgba(255,255,255,0.65) 50%,rgba(155,93,229,0.15) 60%,rgba(155,93,229,0.06) 80%);
+        background-size:1200px 100%;
+        animation:ls-shimmer 1.8s infinite ease-in-out;
+      }
+      .ls-sk-card{display:flex;align-items:center;gap:18px;padding:18px 20px;border:1.5px solid rgba(155,93,229,0.08);border-radius:18px;margin-bottom:10px;background:rgba(255,255,255,0.7);}
+      .ls-sk-icon{width:48px;height:48px;border-radius:12px;flex-shrink:0;}
+      .ls-sk-body{flex:1;display:flex;flex-direction:column;gap:8px;}
+      .ls-sk-title{height:14px;border-radius:6px;width:55%;}
+      .ls-sk-meta{height:10px;border-radius:6px;width:80%;}
+      .ls-sk-right{width:56px;display:flex;flex-direction:column;gap:8px;align-items:flex-end;}
+      .ls-sk-pct{width:42px;height:22px;border-radius:8px;}
+      .ls-sk-btn{width:80px;height:32px;border-radius:999px;}
+      .ls-sk-row{height:48px;border-radius:12px;margin-bottom:10px;}
+    `;
+    document.head.appendChild(s);
+  }
+  if (variant === 'row') {
+    return Array.from({ length: count }, () =>
+      `<div class="ls-sk ls-sk-row"></div>`
+    ).join('');
+  }
+  return Array.from({ length: count }, () => `
+    <div class="ls-sk-card">
+      <div class="ls-sk ls-sk-icon"></div>
+      <div class="ls-sk-body">
+        <div class="ls-sk ls-sk-title"></div>
+        <div class="ls-sk ls-sk-meta"></div>
+      </div>
+      <div class="ls-sk-right">
+        <div class="ls-sk ls-sk-pct"></div>
+        <div class="ls-sk ls-sk-btn"></div>
+      </div>
+    </div>`).join('');
+}
+
+/* ── Красивый диалог подтверждения ───────────────────────────────────── */
+function lsConfirm(message, { title = 'Подтверждение', confirmText = 'Подтвердить', danger = true } = {}) {
+  return new Promise(resolve => {
+    if (!document.getElementById('ls-confirm-style')) {
+      const s = document.createElement('style');
+      s.id = 'ls-confirm-style';
+      s.textContent = `
+        .ls-ov{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:20px;
+          background:rgba(15,23,42,0.45);backdrop-filter:blur(12px);opacity:0;transition:opacity .2s ease;}
+        .ls-ov.open{opacity:1;}
+        .ls-box{background:#fff;border-radius:24px;padding:36px 40px;width:100%;max-width:420px;text-align:center;
+          box-shadow:0 40px 100px rgba(15,23,42,0.24);transform:scale(.9) translateY(12px);transition:transform .22s ease;}
+        .ls-ov.open .ls-box{transform:scale(1) translateY(0);}
+        .ls-icon{font-size:2.4rem;margin-bottom:12px;}
+        .ls-title{font-family:'Unbounded',sans-serif;font-size:1rem;font-weight:800;color:#0F172A;margin-bottom:10px;}
+        .ls-msg{font-size:0.88rem;color:#3D4F6B;line-height:1.65;white-space:pre-line;margin-bottom:28px;}
+        .ls-btns{display:flex;gap:10px;justify-content:center;}
+        .ls-cancel{padding:10px 26px;border:1.5px solid rgba(15,23,42,0.2);border-radius:999px;background:transparent;
+          font-family:'Manrope',sans-serif;font-size:0.88rem;font-weight:600;color:#8898AA;cursor:pointer;transition:all .2s;}
+        .ls-cancel:hover{border-color:#9B5DE5;color:#9B5DE5;}
+        .ls-ok{padding:10px 28px;border:none;border-radius:999px;color:#fff;
+          font-family:'Manrope',sans-serif;font-size:0.88rem;font-weight:700;cursor:pointer;transition:opacity .2s;
+          background:linear-gradient(135deg,#06D6E0,#9B5DE5);}
+        .ls-ok.danger{background:linear-gradient(135deg,#F15BB5,#9B5DE5);}
+        .ls-ok:hover{opacity:.88;}
+      `;
+      document.head.appendChild(s);
+    }
+
+    const el = document.createElement('div');
+    el.className = 'ls-ov';
+    el.setAttribute('tabindex', '-1');
+    el.innerHTML = `
+      <div class="ls-box">
+        <div class="ls-icon">${danger ? lsIcon('trash', 36) : lsIcon('help-circle', 36)}</div>
+        <div class="ls-title"></div>
+        <div class="ls-msg"></div>
+        <div class="ls-btns">
+          <button class="ls-cancel">Отмена</button>
+          <button class="ls-ok${danger ? ' danger' : ''}"></button>
+        </div>
+      </div>`;
+    el.querySelector('.ls-title').textContent = title;
+    el.querySelector('.ls-msg').textContent   = message;
+    el.querySelector('.ls-ok').textContent    = confirmText;
+    document.body.appendChild(el);
+    requestAnimationFrame(() => el.classList.add('open'));
+
+    const done = result => {
+      el.classList.remove('open');
+      setTimeout(() => el.remove(), 230);
+      resolve(result);
+    };
+
+    el.querySelector('.ls-cancel').onclick = () => done(false);
+    el.querySelector('.ls-ok').onclick     = () => done(true);
+    el.addEventListener('click', e => { if (e.target === el) done(false); });
+    el.addEventListener('keydown', e => {
+      if (e.key === 'Enter')  done(true);
+      if (e.key === 'Escape') done(false);
+    });
+    setTimeout(() => el.focus(), 10);
+  });
+}
+
+/* ── applyRoleSidebar — reveal teacher/admin sidebar items ───────────── */
+function applyRoleSidebar(user) {
+  if (!user) return;
+  if (['teacher', 'admin'].includes(user.role)) {
+    document.querySelectorAll('.sb-teacher-only').forEach(el => el.style.display = '');
+  }
+}
+
+/* ── initPage — consolidates page init boilerplate ─────────────────── */
+function initPage({ requireLogin = true } = {}) {
+  if (requireLogin && !requireAuth()) return null;
+  const user = getUser();
+  const isTeacher = user && ['teacher', 'admin'].includes(user.role);
+  const isAdmin = user?.role === 'admin';
+
+  // Nav avatar
+  const navUser = document.getElementById('nav-user');
+  const navAvatar = document.getElementById('nav-avatar');
+  if (navUser) navUser.textContent = user?.name || user?.email || '';
+  if (navAvatar) navAvatar.textContent = (user?.name || 'LS').split(' ').slice(0, 2).map(w => w[0]?.toUpperCase() || '').join('') || 'LS';
+
+  // Sidebar collapsed state
+  if (localStorage.getItem('ls_sb_collapsed') === '1') {
+    document.querySelector('.app-layout')?.classList.add('sb-collapsed');
+  }
+
+  // Sidebar toggle wiring
+  const togBtn = document.querySelector('.sb-toggle');
+  if (togBtn) togBtn.addEventListener('click', () => {
+    const layout = document.querySelector('.app-layout');
+    const collapsed = layout.classList.toggle('sb-collapsed');
+    localStorage.setItem('ls_sb_collapsed', collapsed ? '1' : '0');
+  });
+
+  // Sidebar active link
+  const currentPath = location.pathname.replace(/\.html$/, '').replace(/^\//, '') || 'dashboard';
+  document.querySelectorAll('.sidebar .sb-item').forEach(a => {
+    const href = a.getAttribute('href')?.replace(/^\//, '').replace(/\.html$/, '') || '';
+    if (href === currentPath) a.classList.add('active');
+  });
+
+  // Cosmetics
+  applyCosmetics();
+
+  // Hide disabled game features in sidebar
+  hideDisabledFeatures();
+
+  // Board link — показываем всем залогиненным пользователям
+  const boardEl = document.getElementById('btn-board') || document.getElementById('sbl-board');
+  if (boardEl) boardEl.style.display = '';
+
+  // Teacher-only sidebar items
+  applyRoleSidebar(user);
+
+  return { user, isTeacher, isAdmin };
+}
+
+/* ── Feature flags (cached per page load, bust on demand) ───────────── */
+let _featuresCache = null;
+async function loadFeatures() {
+  if (_featuresCache) return _featuresCache;
+  try {
+    _featuresCache = await apiFetch('/api/features');
+  } catch { _featuresCache = {}; }
+  return _featuresCache;
+}
+function clearFeaturesCache() { _featuresCache = null; }
+
+/**
+ * Show board sidebar link only for teachers/admins and students in a class.
+ * Call after LS.initPage(). Uses features cache (_no_class flag).
+ */
+async function showBoardIfAllowed() {
+  const el = document.getElementById('btn-board') || document.getElementById('sbl-board');
+  if (!el) return;
+  const user = getUser();
+  if (!user) return;
+  if (user.role === 'teacher' || user.role === 'admin') { el.style.display = ''; return; }
+  // Student: check if in a class
+  const feats = await loadFeatures();
+  if (!feats._no_class) el.style.display = '';
+}
+
+async function hideDisabledFeatures() {
+  const feats = await loadFeatures();
+  const map = {
+    hangman:       ['/hangman'],
+    crossword:     ['/crossword'],
+    pet:           ['/pet'],
+    red_book:      ['/red-book.html', '/red-book-ecosystem.html', '/red-book-biomes.html'],
+    collection:    ['/collection.html', '/collection'],
+    lab:           ['/lab'],
+    knowledge_map: ['/knowledge-map'],
+    flashcards:    ['/flashcards'],
+    board:         ['/board'],
+    biochem:       ['/biochem', '/biochem-library', '/biochem-reactions'],
+    live_quiz:     ['/live-quiz'],
+  };
+  for (const [key, hrefs] of Object.entries(map)) {
+    if (feats[key] === false) {
+      hrefs.forEach(href => {
+        document.querySelectorAll(`[href="${href}"]`).forEach(el => el.style.display = 'none');
+      });
+      // Redirect away if currently on a disabled page
+      const cur = window.location.pathname;
+      if (hrefs.some(h => cur === h || cur === h.replace('.html', ''))) {
+        window.location.href = '/dashboard.html';
+      }
+    }
+  }
+  if (feats.gamification === false) {
+    document.body.classList.add('no-gamification');
+    // If student is already viewing achievements or shop tab, redirect to account tab
+    const active = document.querySelector('#tab-achievements.active, #tab-shop.active');
+    if (active) {
+      document.querySelector('[onclick*="tab-account"]')?.click();
+    }
+  }
+
+  // Student with no class — restrict to dashboard, homework, library, theory
+  if (feats._no_class) {
+    const classOnlyHrefs = [
+      '/board', '/lab', '/hangman', '/crossword', '/pet',
+      '/collection', '/collection.html', '/knowledge-map',
+      '/red-book.html', '/red-book-ecosystem.html', '/red-book-biomes.html',
+      '/flashcards', '/live-quiz',
+    ];
+    classOnlyHrefs.forEach(href => {
+      document.querySelectorAll(`[href="${href}"]`).forEach(el => el.style.display = 'none');
+    });
+    // Redirect if currently on a class-required page
+    const cur = window.location.pathname;
+    const classOnlyPaths = [
+      '/board', '/lab', '/hangman', '/crossword', '/pet',
+      '/collection', '/collection-rb', '/knowledge-map',
+      '/red-book', '/red-book-ecosystem', '/red-book-biomes', '/red-book-games',
+      '/flashcards', '/live-quiz',
+    ];
+    if (classOnlyPaths.some(h => cur === h || cur === h + '.html')) {
+      window.location.href = '/dashboard';
+    }
+    document.body.classList.add('no-class');
+    document.body.classList.add('no-gamification'); // no class <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> no gamification
+  }
+}
+
+/* ── generic authenticated fetch (full path like /api/courses) ─────── */
+async function apiFetch(path, options = {}) {
+  const token = getToken();
+  const headers = { 'Content-Type': 'application/json', ...(options.headers || {}) };
+  if (token) headers['Authorization'] = `Bearer ${token}`;
+  const res = await fetch(path, { ...options, headers });
+  if (res.status === 401) {
+    removeToken(); removeUser();
+    window.location.href = '/login';
+    throw new Error('Session expired');
+  }
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok) throw Object.assign(new Error(data.error || 'Request failed'), { status: res.status, data });
+  return data;
+}
+
+/* ── Biochemistry API ────────────────────────────────────────────────── */
+async function biochemGetElements()      { return req('GET', '/biochem/elements'); }
+async function biochemGetMolecules(p={}) { return req('GET', `/biochem/molecules?${new URLSearchParams(p)}`); }
+async function biochemGetMolecule(id)    { return req('GET', `/biochem/molecules/${id}`); }
+async function biochemValidate(atoms,bonds){ return req('POST','/biochem/validate',{atoms,bonds}); }
+async function biochemGetReactions()     { return req('GET', '/biochem/reactions'); }
+async function biochemGetChallenges()    { return req('GET', '/biochem/challenges'); }
+async function biochemSolveChallenge(id,payload)    { return req('POST',`/biochem/challenges/${id}/solve`,payload); }
+async function biochemGetSaved()         { return req('GET', '/biochem/saved'); }
+async function biochemSave(atoms,bonds,name){ return req('POST','/biochem/saved',{atoms,bonds,name}); }
+async function biochemDeleteSaved(id)    { return req('DELETE',`/biochem/saved/${id}`); }
+
+window.LS = {
+  getToken, setToken, removeToken,
+  getUser, setUser, removeUser,
+  isLoggedIn, logout, requireAuth,
+  register, login, fetchMe, updateProfile,
+  getSubjects, updateSubject, getTopics,
+  startSession, sendAnswer, finishSession, getResult, getHistory, getWeakTopics, getStudentStats, getSessionQuestions,
+  adminGetStats, adminGetUsers, adminUpdateRole, adminGetUserSessions, adminGetSessions, adminGetSessionDetail, adminClearUserSessions, adminUpdateUser, adminBanUser, adminDeleteUser,
+  getQuestions, createQuestion, duplicateQuestion, updateQuestion, deleteQuestion, importQuestions,
+  getClasses, createClass, getClassDetail, updateClass, deleteClass, kickMember, addClassMember, createAssignment, createDirectAssignment, updateAssignment, deleteAssignment,
+  regenerateInviteCode, classJournal,
+  joinClass, myClasses, getStudents, classFeed,
+  getAnnouncements, createAnnouncement, deleteAnnouncement,
+  getNotifications, markNotifRead, markAllNotifsRead, connectSSE,
+  listTemplates, saveTemplate, deleteTemplate, bulkCreateAssignment,
+  myAssignments, teacherAssignments, startAssignment, assignmentResults, assignmentSessionReview, assignmentQuestionStats,
+  getTests, createTest, getTest, updateTest, deleteTest, addQuestionsToTest, removeQFromTest,
+  getGamificationMe, getGamAchievements, getLeaderboard, getXPHistory, getChallenges, claimChallenge, setGoalTier, getFrames, setFrame, reportLabActivity,
+  getFiles, uploadFile, downloadFileUrl, deleteFile, getFileAccess, assignFile, unassignFile,
+  getFolders, createFolder, renameFolder, deleteFolder, moveFile,
+  getFolderAccess, clearFolderAccess, assignFolder, unassignFolder, getStudentsList,
+  submitWork, resubmitWork, getMySubmissions, getClassSubmissions, reviewSubmission, deleteSubmission, submissionDownloadUrl,
+  getPermissions, setPermission, getUserPermissions, setUserPermission, resetUserPermissions,
+  getCourseTemplates, saveCourseTemplate, createFromCourseTemplate, deleteCourseTemplate,
+  getLessonTemplates, saveLessonTemplate, createFromLessonTemplate, deleteLessonTemplate,
+  getBookmarks, addBookmark, removeBookmark, removeBookmarkByEntity, checkBookmark,
+  globalSearch,
+  getShopItems, purchaseItem, getUserPurchases, getCoins, getMyActiveCosmetics, activateShopItem,
+  adminShopGetItems, adminShopCreateItem, adminShopUpdateItem, adminShopDeleteItem, adminShopAwardCoins, adminShopStats,
+  adminGamAward, adminGamReset, adminGamStats, adminGamGetUser,
+  parentGetLinks, parentCreateLink, parentUpdateLink, parentDeleteLink,
+  crCreateSession, crGetSession, crEndSession, crGetActiveByClass, crGetMyActive,
+  crJoin, crLeave, crSendChat, crGetChat, crGetAttendance, crSignal, crGetOnlineStudents, crGetMySession,
+  escapeHtml, esc,
+  parseDate, fmtRelTime, safeHref,
+  initPage,
+  applyRoleSidebar,
+  icon: lsIcon,
+  confirm: lsConfirm,
+  toast: lsToast,
+  skeleton: lsSkeleton,
+  api: apiFetch,
+  get:  (path) => apiFetch(path, { method: 'GET' }),
+  post: (path, body) => apiFetch(path, { method: 'POST', body: JSON.stringify(body) }),
+  put:  (path, body) => apiFetch(path, { method: 'PUT',  body: JSON.stringify(body) }),
+  del:   (path) => apiFetch(path, { method: 'DELETE' }),
+  patch: (path, body) => apiFetch(path, { method: 'PATCH', body: JSON.stringify(body) }),
+  applyCosmetics: applyCosmetics,
+  loadFeatures,
+  clearFeaturesCache,
+  hideDisabledFeatures,
+  showBoardIfAllowed,
+  biochemGetElements, biochemGetMolecules, biochemGetMolecule, biochemValidate,
+  biochemGetReactions, biochemGetChallenges, biochemSolveChallenge,
+  biochemGetSaved, biochemSave, biochemDeleteSaved,
+};
+
+/* ═══════════════════════════════════════════════════════════════════════
+   Global Cosmetics Applier — call on any page after auth
+   ═══════════════════════════════════════════════════════════════════════ */
+async function applyCosmetics() {
+  if (!isLoggedIn()) return;
+  try {
+    const c = await getMyActiveCosmetics();
+    if (!c) return;
+
+    // ── Title: show under nav username ──
+    if (c.title && c.title.text) {
+      const nameEl = document.getElementById('nav-user');
+      if (nameEl && !document.getElementById('nav-title-badge')) {
+        const badge = document.createElement('div');
+        badge.id = 'nav-title-badge';
+        badge.textContent = c.title.text;
+        badge.style.cssText = `font-size:0.55rem;font-weight:700;color:${c.title.color || '#9B5DE5'};margin-top:-2px;letter-spacing:0.5px;text-transform:uppercase;`;
+        nameEl.after(badge);
+      }
+    }
+
+    // ── Effect: particle animation on avatar ──
+    if (c.effect && c.effect.effect) {
+      _applyEffect(c.effect.effect);
+    }
+  } catch {}
+}
+
+
+function _applyEffect(name) {
+  const avatar = document.getElementById('nav-avatar');
+  if (!avatar) return;
+  avatar.style.position = 'relative';
+
+  if (name === 'pulse') {
+    if (!document.getElementById('ls-pulse-style')) {
+      const s = document.createElement('style');
+      s.id = 'ls-pulse-style';
+      s.textContent = `@keyframes ls-pulse{0%,100%{box-shadow:0 0 0 0 rgba(155,93,229,0.5)}50%{box-shadow:0 0 0 8px rgba(155,93,229,0)}} .ls-effect-pulse{animation:ls-pulse 2s infinite}`;
+      document.head.appendChild(s);
+    }
+    avatar.classList.add('ls-effect-pulse');
+  }
+
+  if (name === 'sparkle') {
+    if (!document.getElementById('ls-sparkle-style')) {
+      const s = document.createElement('style');
+      s.id = 'ls-sparkle-style';
+      s.textContent = `
+.ls-sparkle-wrap{position:relative;display:inline-flex}
+.ls-sparkle{position:absolute;width:4px;height:4px;border-radius:50%;background:#FFD166;pointer-events:none;animation:ls-sparkle-fly 1.4s ease-out infinite}
+@keyframes ls-sparkle-fly{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(0)}}`;
+      document.head.appendChild(s);
+    }
+    const wrap = document.createElement('span');
+    wrap.className = 'ls-sparkle-wrap';
+    avatar.parentNode.insertBefore(wrap, avatar);
+    wrap.appendChild(avatar);
+    for (let i = 0; i < 5; i++) {
+      const sp = document.createElement('span');
+      sp.className = 'ls-sparkle';
+      const angle = (i / 5) * Math.PI * 2;
+      sp.style.cssText = `--sx:${Math.cos(angle) * 16}px;--sy:${Math.sin(angle) * 16}px;animation-delay:${i * 0.28}s;top:50%;left:50%;margin:-2px`;
+      wrap.appendChild(sp);
+    }
+  }
+
+  if (name === 'snow') {
+    if (!document.getElementById('ls-snow-style')) {
+      const s = document.createElement('style');
+      s.id = 'ls-snow-style';
+      s.textContent = `
+.ls-snow-wrap{position:relative;display:inline-flex;overflow:visible}
+.ls-snowflake{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;pointer-events:none;opacity:0.7;animation:ls-snow-fall 2s linear infinite}
+@keyframes ls-snow-fall{0%{opacity:0.8;transform:translateY(-10px) translateX(0)}50%{transform:translateY(6px) translateX(4px)}100%{opacity:0;transform:translateY(18px) translateX(-2px)}}`;
+      document.head.appendChild(s);
+    }
+    const wrap = document.createElement('span');
+    wrap.className = 'ls-snow-wrap';
+    avatar.parentNode.insertBefore(wrap, avatar);
+    wrap.appendChild(avatar);
+    for (let i = 0; i < 6; i++) {
+      const fl = document.createElement('span');
+      fl.className = 'ls-snowflake';
+      fl.style.cssText = `left:${4 + i * 4}px;top:-4px;animation-delay:${i * 0.33}s`;
+      wrap.appendChild(fl);
+    }
+  }
+}
+
+/* ── files (library) ──────────────────────────────────────────────────── */
+async function getFiles(params = {}) {
+  const p = new URLSearchParams();
+  if (params.subject) p.set('subject', params.subject);
+  if (params.my)      p.set('my', '1');
+  return req('GET', `/files?${p}`);
+}
+async function uploadFile(formData) {
+  const token = getToken();
+  const res = await fetch(API + '/files', {
+    method: 'POST',
+    headers: token ? { 'Authorization': `Bearer ${token}` } : {},
+    body: formData,
+  });
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok) throw Object.assign(new Error(data.error || 'Upload failed'), { status: res.status });
+  return data;
+}
+function downloadFileUrl(id) { return `${API}/files/${id}/download`; }
+async function deleteFile(id)                        { return req('DELETE', `/files/${id}`); }
+async function getFileAccess(id)                     { return req('GET',    `/files/${id}/access`); }
+async function assignFile(id, data)                  { return req('POST',   `/files/${id}/assign`, data); }
+async function unassignFile(id, type, targetId)      { return req('DELETE', `/files/${id}/assign/${encodeURIComponent(type)}/${targetId}`); }
+async function getFolders()                          { return req('GET',    '/files/folders'); }
+async function createFolder(name)                    { return req('POST',   '/files/folders', { name }); }
+async function renameFolder(id, name)                { return req('PUT',    `/files/folders/${id}`, { name }); }
+async function deleteFolder(id)                      { return req('DELETE', `/files/folders/${id}`); }
+async function moveFile(id, folder_id)               { return req('PATCH',  `/files/${id}/move`, { folder_id }); }
+async function getFolderAccess(id)                   { return req('GET',    `/files/folders/${id}/access`); }
+async function clearFolderAccess(id)                 { return req('DELETE', `/files/folders/${id}/access`); }
+async function assignFolder(id, data)                { return req('POST',   `/files/folders/${id}/assign`, data); }
+async function unassignFolder(id, type, targetId)    { return req('DELETE', `/files/folders/${id}/assign/${encodeURIComponent(type)}/${targetId}`); }
+async function getStudentsList()                     { const d = await req('GET', '/admin/users?role=student&limit=500'); return d.users || []; }
+
+/* ── class members (admin/teacher) ──────────────────────────────────────── */
+async function addClassMember(classId, email, user_id) { return req('POST', `/classes/${classId}/members`, user_id ? { user_id } : { email }); }
+
+/* ── announcements ───────────────────────────────────────────────────────── */
+async function getAnnouncements(classId)        { return req('GET',    `/classes/${classId}/announcements`); }
+async function createAnnouncement(classId, text){ return req('POST',   `/classes/${classId}/announcements`, { text }); }
+async function deleteAnnouncement(classId, id)  { return req('DELETE', `/classes/${classId}/announcements/${id}`); }
+
+/* ── submissions ─────────────────────────────────────────────────────────── */
+async function submitWork(formData) {
+  const token = getToken();
+  const res = await fetch(API + '/submissions', {
+    method: 'POST',
+    headers: token ? { 'Authorization': `Bearer ${token}` } : {},
+    body: formData,
+  });
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok) throw Object.assign(new Error(data.error || 'Upload failed'), { status: res.status });
+  return data;
+}
+async function resubmitWork(id, formData) {
+  const token = getToken();
+  const res = await fetch(API + `/submissions/${id}/resubmit`, {
+    method: 'POST',
+    headers: token ? { 'Authorization': `Bearer ${token}` } : {},
+    body: formData,
+  });
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok) throw Object.assign(new Error(data.error || 'Upload failed'), { status: res.status });
+  return data;
+}
+async function getMySubmissions()           { return req('GET',   '/submissions/my'); }
+async function getClassSubmissions(classId) { return req('GET',   `/submissions?class_id=${classId}`); }
+async function reviewSubmission(id, data)   { return req('PATCH', `/submissions/${id}`, data); }
+async function deleteSubmission(id)         { return req('DELETE',`/submissions/${id}`); }
+function submissionDownloadUrl(id)          { return `${API}/submissions/${id}/download`; }
+
+/* ── permissions (admin only) ────────────────────────────────────────────── */
+async function getPermissions()                            { return req('GET',    '/permissions'); }
+async function setPermission(role, permission, enabled)    { return req('POST',   '/permissions', { role, permission, enabled }); }
+async function getUserPermissions(uid)                     { return req('GET',    `/permissions/users/${uid}`); }
+async function setUserPermission(uid, permission, enabled) { return req('POST',   `/permissions/users/${uid}`, { permission, enabled }); }
+async function resetUserPermissions(uid, permission)       { return req('DELETE', `/permissions/users/${uid}/reset`, permission ? { permission } : undefined); }
+
+/* ── notifications ───────────────────────────────────────────────────────── */
+async function getNotifications()   { return req('GET',  '/notifications'); }
+async function markNotifRead(id)    { return req('PATCH',`/notifications/${id}/read`); }
+async function markAllNotifsRead()  { return req('POST', '/notifications/read-all'); }
+
+/* ── SSE real-time notifications ─────────────────────────────────────────── */
+/* ── Shared SSE singleton — all listeners share one EventSource ─────── */
+let _sseShared = null;
+let _sseRetryMs = 2000;
+let _sseEverConnected = false;   // tracks whether SSE has successfully opened before
+const _sseListeners = new Set();
+
+function _sseConnect() {
+  const token = getToken();
+  if (!token) return;
+  const url = `${API}/notifications/stream?token=${encodeURIComponent(token)}`;
+  const es = new EventSource(url);
+  _sseShared = es;
+  es.onopen = () => {
+    const isReconnect = _sseEverConnected;
+    _sseEverConnected = true;
+    _sseRetryMs = 2000;
+    // Notify listeners of reconnect so they can re-sync missed state
+    if (isReconnect) {
+      for (const fn of _sseListeners) try { fn({ type: '_sse_reconnect' }); } catch {}
+    }
+  };
+  es.onmessage = e => {
+    let data; try { data = JSON.parse(e.data); } catch { return; }
+    for (const fn of _sseListeners) try { fn(data); } catch {}
+  };
+  es.onerror = () => {
+    es.close();
+    _sseShared = null;
+    const delay = Math.min(_sseRetryMs, 30000);
+    _sseRetryMs = Math.min(_sseRetryMs * 2, 30000);
+    setTimeout(_sseConnect, delay);
+  };
+}
+
+function connectSSE(onEvent) {
+  if (!getToken()) return null;
+  _sseListeners.add(onEvent);
+  if (!_sseShared) _sseConnect();
+  return { close: () => _sseListeners.delete(onEvent) };
+}
+
+// Proactively close SSE when navigating away to prevent HTTP/1.1
+// connection pool exhaustion during View Transition (old page stays alive ~260ms)
+window.addEventListener('pagehide', () => {
+  if (_sseShared) { _sseShared.close(); _sseShared = null; }
+  _sseListeners.clear();
+});
+
+/* ── assignment templates ─────────────────────────────────────────────────── */
+async function listTemplates()           { return req('GET',    '/assignments/templates'); }
+async function saveTemplate(data)        { return req('POST',   '/assignments/templates', data); }
+async function deleteTemplate(id)        { return req('DELETE', `/assignments/templates/${id}`); }
+async function bulkCreateAssignment(data){ return req('POST',   '/assignments/bulk', data); }
+
+/* ── templates (course & lesson) ───────────────────────────────────────── */
+async function getCourseTemplates(params = {})   { const p = new URLSearchParams(); if (params.subject) p.set('subject', params.subject); if (params.my) p.set('my', '1'); return req('GET', `/templates/courses?${p}`); }
+async function saveCourseTemplate(data)          { return req('POST',  '/templates/courses', data); }
+async function createFromCourseTemplate(id, d)   { return req('POST',  `/templates/courses/${id}/create`, d); }
+async function deleteCourseTemplate(id)          { return req('DELETE', `/templates/courses/${id}`); }
+async function getLessonTemplates(params = {})    { const p = new URLSearchParams(); if (params.category) p.set('category', params.category); if (params.my) p.set('my', '1'); return req('GET', `/templates/lessons?${p}`); }
+async function saveLessonTemplate(data)          { return req('POST',  '/templates/lessons', data); }
+async function createFromLessonTemplate(id, d)   { return req('POST',  `/templates/lessons/${id}/create`, d); }
+async function deleteLessonTemplate(id)          { return req('DELETE', `/templates/lessons/${id}`); }
+
+/* ── shop ──────────────────────────────────────────────────────────────── */
+async function getShopItems()                    { return req('GET',  '/shop/items'); }
+async function purchaseItem(itemId)              { return req('POST', `/shop/items/${itemId}/purchase`); }
+async function getUserPurchases()                { return req('GET',  '/shop/purchases'); }
+async function getCoins()                        { return req('GET',  '/shop/coins'); }
+async function getMyActiveCosmetics()            { return req('GET',  '/shop/my-active'); }
+async function activateShopItem(itemId, type)    { return req('POST', '/shop/activate', { itemId, type }); }
+
+/* ── shop admin ────────────────────────────────────────────────────────── */
+async function adminShopGetItems()               { return req('GET',    '/shop/admin/items'); }
+async function adminShopCreateItem(data)         { return req('POST',   '/shop/admin/items', data); }
+async function adminShopUpdateItem(id, data)     { return req('PUT',    `/shop/admin/items/${id}`, data); }
+async function adminShopDeleteItem(id)           { return req('DELETE', `/shop/admin/items/${id}`); }
+async function adminShopAwardCoins(data)         { return req('POST',   '/shop/admin/award-coins', data); }
+async function adminShopStats()                  { return req('GET',    '/shop/admin/stats'); }
+
+/* ── bookmarks ────────────────────────────────────────────────────────── */
+async function getBookmarks(type)                     { const p = type ? `?type=${type}` : ''; return req('GET', `/bookmarks${p}`); }
+async function addBookmark(entityType, entityId)      { return req('POST', '/bookmarks', { entityType, entityId }); }
+async function removeBookmark(id)                     { return req('DELETE', `/bookmarks/${id}`); }
+async function removeBookmarkByEntity(type, entityId) { return req('DELETE', `/bookmarks/entity/${type}/${entityId}`); }
+async function checkBookmark(type, entityId)          { return req('GET', `/bookmarks/check/${type}/${entityId}`); }
+
+/* ── search ───────────────────────────────────────────────────────────── */
+async function globalSearch(q, type, limit) {
+  const p = new URLSearchParams({ q });
+  if (type)  p.set('type', type);
+  if (limit) p.set('limit', limit);
+  return req('GET', `/search?${p}`);
+}
+
+/* ── parent link management (student side) ─────────────────────────────── */
+async function parentGetLinks()          { return req('GET',    '/parent/my-links'); }
+async function parentCreateLink(label)   { return req('POST',   '/parent/links', { label }); }
+async function parentUpdateLink(id, d)   { return req('PATCH',  `/parent/links/${id}`, d); }
+async function parentDeleteLink(id)      { return req('DELETE', `/parent/links/${id}`); }
+
+/* ── classroom (online lesson) ─────────────────────────────────────────── */
+async function crCreateSession(data)         { return req('POST',   '/classroom', data); }
+async function crGetSession(id)              { return req('GET',    `/classroom/${id}`); }
+async function crEndSession(id)              { return req('DELETE', `/classroom/${id}`); }
+async function crGetActiveByClass(classId)   { return req('GET',    `/classroom/class/${classId}/active`); }
+async function crGetMyActive()               { return req('GET',    '/classroom/my/active'); }
+async function crGetMySession()              { return req('GET',    '/classroom/my/session'); }
+async function crJoin(id)                    { return req('POST',   `/classroom/${id}/join`); }
+async function crLeave(id)                   { return req('POST',   `/classroom/${id}/leave`); }
+async function crSendChat(id, message)       { return req('POST',   `/classroom/${id}/chat`, { message }); }
+async function crGetChat(id)                 { return req('GET',    `/classroom/${id}/chat`); }
+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'); }
+
+/* ── gamification admin ────────────────────────────────────────────────── */
+async function adminGamAward(data)               { return req('POST',   '/gamification/admin/award', data); }
+async function adminGamReset(data)               { return req('POST',   '/gamification/admin/reset', data); }
+async function adminGamStats()                   { return req('GET',    '/gamification/admin/stats'); }
+async function adminGamGetUser(id)               { return req('GET',    `/gamification/admin/user/${id}`); }
+
+/* ── Live Quiz Student Overlay ──────────────────────────────────────────── */
+(function initLiveOverlay() {
+  const token = getToken();
+  if (!token) return;
+  let payload; try { payload = JSON.parse(atob(token.split('.')[1])); } catch { return; }
+  if (!payload || payload.role === 'teacher' || payload.role === 'admin') return;
+
+  const STYLE = `
+  #ls-live-overlay{position:fixed;inset:0;z-index:9000;background:rgba(10,2,32,0.92);
+    backdrop-filter:blur(12px);display:none;align-items:center;justify-content:center;padding:20px;}
+  #ls-live-overlay.open{display:flex;}
+  .ls-live-box{background:#fff;border-radius:24px;padding:32px 28px;width:100%;max-width:520px;
+    box-shadow:0 40px 120px rgba(0,0,0,0.5);position:relative;}
+  .ls-live-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:99px;
+    background:rgba(155,93,229,0.1);color:#9B5DE5;font-size:0.72rem;font-weight:800;
+    text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px;}
+  .ls-live-badge::before{content:'';width:7px;height:7px;border-radius:50%;
+    background:#9B5DE5;animation:ls-live-pulse 1s ease infinite;}
+  @keyframes ls-live-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}
+  .ls-live-q{font-size:1rem;line-height:1.65;color:#0F172A;margin-bottom:20px;font-weight:500;}
+  .ls-live-opts{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
+  .ls-live-opt{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1.5px solid #E2E8F0;
+    border-radius:14px;cursor:pointer;transition:all .15s;font-size:.9rem;}
+  .ls-live-opt:hover{border-color:#9B5DE5;background:rgba(155,93,229,.04);}
+  .ls-live-opt.selected{border-color:#06D6E0;background:rgba(6,214,224,.07);}
+  .ls-live-opt.correct{border-color:#06D6A0!important;background:rgba(6,214,160,.1)!important;color:#059652;}
+  .ls-live-opt.wrong{border-color:#EF476F!important;background:rgba(239,71,111,.06)!important;color:#EF476F;}
+  .ls-live-opt-key{width:28px;height:28px;border-radius:8px;background:#F1F5F9;
+    display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;
+    color:#64748B;flex-shrink:0;transition:.15s;}
+  .ls-live-opt.selected .ls-live-opt-key{background:#06D6E0;color:#fff;}
+  .ls-live-opt.correct .ls-live-opt-key{background:#06D6A0;color:#fff;}
+  .ls-live-opt.wrong   .ls-live-opt-key{background:#EF476F;color:#fff;}
+  .ls-live-status{text-align:center;font-size:.84rem;color:#8898AA;padding:8px 0;}
+  .ls-live-result-bar-wrap{margin:4px 0;}
+  .ls-live-result-bar{height:8px;border-radius:99px;background:#E2E8F0;margin-top:4px;overflow:hidden;}
+  .ls-live-result-fill{height:100%;border-radius:99px;background:#9B5DE5;transition:width .6s ease;}
+  .ls-live-result-fill.correct-fill{background:#06D6A0;}
+  .ls-live-result-pct{font-size:.72rem;font-weight:700;color:#64748B;float:right;}
+  `;
+
+  const el = document.createElement('div');
+  el.id = 'ls-live-overlay';
+  el.innerHTML = `<div class="ls-live-box">
+    <div class="ls-live-badge"><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> Live Quiz</div>
+    <div class="ls-live-q" id="lslq-text"></div>
+    <div class="ls-live-opts" id="lslq-opts"></div>
+    <div class="ls-live-status" id="lslq-status"></div>
+  </div>`;
+
+  const styleEl = document.createElement('style');
+  styleEl.textContent = STYLE;
+
+  document.addEventListener('DOMContentLoaded', () => {
+    document.head.appendChild(styleEl);
+    document.body.appendChild(el);
+  });
+
+  let currentLiveId = null;
+  let answered      = false;
+
+  function openOverlay(liveId, question, options) {
+    currentLiveId = liveId;
+    answered      = false;
+    document.getElementById('lslq-text').textContent = 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>
+      </div>`).join('');
+    document.getElementById('lslq-status').textContent = 'Выберите ответ';
+    document.getElementById('ls-live-overlay').classList.add('open');
+  }
+
+  function showResults(options, stats) {
+    const total = stats?.total || 1;
+    document.getElementById('lslq-status').textContent =
+      `Ответили: ${stats?.total || 0} · Правильно: ${stats?.correct || 0}`;
+    document.querySelectorAll('.ls-live-opt').forEach(el => { el.onclick = null; el.style.cursor = 'default'; });
+    const keys = 'АБВГДЕ';
+    document.getElementById('lslq-opts').innerHTML = (options || []).map((o, i) => {
+      const pct = total ? Math.round((o.chosen_count || 0) * 100 / total) : 0;
+      const cls = o.is_correct ? 'correct' : '';
+      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 class="ls-live-result-pct">${pct}%</span>
+        </div>
+        <div class="ls-live-result-bar" style="width:100%">
+          <div class="ls-live-result-fill ${o.is_correct?'correct-fill':''}" style="width:${pct}%"></div>
+        </div>
+      </div>`;
+    }).join('');
+  }
+
+  window._lsLiveAnswer = async function(liveId, optionId, el) {
+    if (answered) return;
+    answered = true;
+    document.querySelectorAll('.ls-live-opt').forEach(o => { o.onclick = null; o.style.cursor = 'default'; });
+    el.classList.add('selected');
+    document.getElementById('lslq-status').innerHTML = 'Ответ отправлен <svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>';
+    try {
+      const r = await apiFetch(`/api/live/${liveId}/answer`, { method: 'POST', body: JSON.stringify({ option_id: optionId }) });
+      if (r.is_correct === 1)  el.classList.replace('selected','correct');
+      else if (r.is_correct === 0) el.classList.replace('selected','wrong');
+    } catch {}
+  };
+
+  document.addEventListener('DOMContentLoaded', () => {
+    connectSSE(d => {
+      if (d.type === 'live_question') {
+        openOverlay(d.liveId, d.question, d.question?.options);
+      } else if (d.type === 'live_results') {
+        showResults(d.options, d.stats);
+      } else if (d.type === 'live_ended') {
+        setTimeout(() => document.getElementById('ls-live-overlay')?.classList.remove('open'), 2000);
+        document.getElementById('lslq-status').textContent = 'Сессия завершена';
+      }
+    });
+  });
+})();
+
+/* ── Classroom started notification (students on any page) ─────────────── */
+(function initClassroomNotify() {
+  const token = getToken();
+  if (!token) return;
+  let payload; try { payload = JSON.parse(atob(token.split('.')[1])); } catch { return; }
+  // Only show for students (teachers navigate manually)
+  if (!payload || payload.role === 'teacher' || payload.role === 'admin') return;
+
+  // Don't show if already on classroom page
+  if (window.location.pathname === '/classroom') return;
+
+  const STYLE = `
+  #ls-cr-notify{position:fixed;bottom:24px;right:24px;z-index:8000;
+    background:#0F172A;border:1.5px solid rgba(155,93,229,.4);border-radius:18px;
+    padding:18px 20px;max-width:320px;box-shadow:0 20px 60px rgba(0,0,0,.5);
+    display:none;animation:ls-cr-in .3s cubic-bezier(.34,1.56,.64,1);}
+  #ls-cr-notify.open{display:block;}
+  @keyframes ls-cr-in{from{opacity:0;transform:translateY(16px) scale(.95)}to{opacity:1;transform:none}}
+  .ls-cr-ntop{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
+  .ls-cr-ndot{width:8px;height:8px;border-radius:50%;background:#9B5DE5;flex-shrink:0;
+    animation:ls-live-pulse 1s ease infinite;}
+  .ls-cr-nbadge{font-size:.7rem;font-weight:800;color:#9B5DE5;text-transform:uppercase;letter-spacing:.06em;}
+  .ls-cr-nteacher{font-size:.82rem;color:#94A3B8;margin-bottom:12px;}
+  .ls-cr-nbtn{display:block;width:100%;padding:10px;border-radius:12px;
+    background:linear-gradient(135deg,#9B5DE5,#7C3ACD);color:#fff;
+    font-size:.88rem;font-weight:700;text-align:center;text-decoration:none;
+    transition:opacity .15s;cursor:pointer;border:none;}
+  .ls-cr-nbtn:hover{opacity:.9;}
+  .ls-cr-nclose{position:absolute;top:10px;right:12px;background:none;border:none;
+    color:#475569;cursor:pointer;font-size:1rem;line-height:1;padding:4px;}
+  `;
+
+  const el = document.createElement('div');
+  el.id = 'ls-cr-notify';
+  el.innerHTML = `
+    <button class="ls-cr-nclose" onclick="document.getElementById('ls-cr-notify').classList.remove('open')">&times;</button>
+    <div class="ls-cr-ntop"><span class="ls-cr-ndot"></span><span class="ls-cr-nbadge">Онлайн-урок</span></div>
+    <div class="ls-cr-nteacher" id="ls-cr-nteacher"></div>
+    <a href="/classroom" class="ls-cr-nbtn">Присоединиться</a>`;
+
+  const styleEl = document.createElement('style');
+  styleEl.textContent = STYLE;
+
+  document.addEventListener('DOMContentLoaded', () => {
+    document.head.appendChild(styleEl);
+    document.body.appendChild(el);
+    connectSSE(d => {
+      if (d.type === 'classroom_started') {
+        document.getElementById('ls-cr-nteacher').textContent =
+          `${d.teacherName || 'Учитель'} начал урок${d.title ? ': ' + d.title : ''}`;
+        el.classList.add('open');
+      } else if (d.type === 'classroom_ended') {
+        el.classList.remove('open');
+      }
+    });
+  });
+})();
diff --git a/js/mobile.js b/js/mobile.js
new file mode 100644
index 0000000..88008ec
--- /dev/null
+++ b/js/mobile.js
@@ -0,0 +1,155 @@
+/* ═══════════════════════════════════════════════════════
+   LearnSpace — Mobile Drawer & Topbar
+   Injected into all sidebar-layout pages
+   ═══════════════════════════════════════════════════════ */
+
+(function () {
+  const MOBILE_BP = 768;
+
+  function isMobile() { return window.innerWidth <= MOBILE_BP; }
+
+  /* ── Inject mob-bar and backdrop ── */
+  function injectMobBar() {
+    if (document.getElementById('ls-mob-bar')) return;
+    const layout = document.querySelector('.app-layout');
+    if (!layout) return;
+
+    /* Backdrop overlay */
+    const backdrop = document.createElement('div');
+    backdrop.className = 'sb-backdrop';
+    backdrop.id = 'ls-sb-backdrop';
+    document.body.appendChild(backdrop);
+
+    /* Top bar */
+    const bar = document.createElement('div');
+    bar.className = 'mob-bar';
+    bar.id = 'ls-mob-bar';
+    bar.innerHTML = `
+      <a href="/" class="mob-bar-logo">Learn<span>Space</span></a>
+      <div class="mob-bar-actions">
+        <button class="mob-icon-btn" id="mob-notif-btn" title="Уведомления" style="display:none">
+          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <span class="mob-notif-dot" id="mob-notif-dot" style="display:none;position:absolute;top:5px;right:5px;width:8px;height:8px;border-radius:50%;background:#F15BB5;border:2px solid #EEF2FF;"></span>
+        </button>
+        <button class="mob-icon-btn" id="mob-hamburger" title="Меню">
+          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M4 6h16M4 12h16M4 18h16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+          </svg>
+        </button>
+      </div>
+    `;
+    document.body.insertBefore(bar, document.body.firstChild);
+  }
+
+  /* ── Open / Close drawer ── */
+  function openDrawer() {
+    const layout = document.querySelector('.app-layout');
+    const backdrop = document.getElementById('ls-sb-backdrop');
+    if (!layout) return;
+    layout.classList.add('sb-open');
+    if (backdrop) backdrop.classList.add('open');
+    document.body.style.overflow = 'hidden';
+  }
+
+  function closeDrawer() {
+    const layout = document.querySelector('.app-layout');
+    const backdrop = document.getElementById('ls-sb-backdrop');
+    if (!layout) return;
+    layout.classList.remove('sb-open');
+    if (backdrop) backdrop.classList.remove('open');
+    document.body.style.overflow = '';
+  }
+
+  /* ── Wire up events ── */
+  function wireEvents() {
+    /* Hamburger */
+    document.addEventListener('click', function (e) {
+      if (e.target.closest('#mob-hamburger')) {
+        const layout = document.querySelector('.app-layout');
+        if (layout && layout.classList.contains('sb-open')) {
+          closeDrawer();
+        } else {
+          openDrawer();
+        }
+        return;
+      }
+
+      /* Backdrop tap */
+      if (e.target.id === 'ls-sb-backdrop') {
+        closeDrawer();
+        return;
+      }
+
+      /* Sidebar nav link tap — close drawer */
+      if (isMobile() && e.target.closest('.sb-link')) {
+        setTimeout(closeDrawer, 80);
+        return;
+      }
+
+      /* Mob notif button — delegate to LS.notif.toggle or legacy toggleNotifDrop */
+      if (e.target.closest('#mob-notif-btn')) {
+        if (typeof LS !== 'undefined' && LS.notif && LS.notif.toggle) {
+          LS.notif.toggle();
+        } else if (typeof toggleNotifDrop === 'function') {
+          toggleNotifDrop();
+        }
+        return;
+      }
+    });
+
+    /* Escape key */
+    document.addEventListener('keydown', function (e) {
+      if (e.key === 'Escape') closeDrawer();
+    });
+
+    /* Close drawer on resize to desktop */
+    window.addEventListener('resize', function () {
+      if (!isMobile()) closeDrawer();
+    });
+
+    /* Close drawer on orientation change */
+    window.addEventListener('orientationchange', function () {
+      setTimeout(function () {
+        if (!isMobile()) closeDrawer();
+      }, 150);
+    });
+  }
+
+  /* ── Sync mob notif button visibility with page's notif button ── */
+  function syncNotifBtn() {
+    const mobBtn = document.getElementById('mob-notif-btn');
+    if (!mobBtn) return;
+    /* Look for existing notif button in sidebar */
+    const sbNotif = document.querySelector('.sb-link[onclick*="Notif"], .sb-link[onclick*="notif"], #notif-btn, [data-notif]');
+    if (sbNotif) {
+      mobBtn.style.display = 'flex';
+      /* Mirror badge count */
+      const badge = sbNotif.querySelector('.sb-badge');
+      const dot = document.getElementById('mob-notif-dot');
+      if (badge && dot) {
+        const observer = new MutationObserver(function () {
+          dot.style.display = (badge.textContent.trim() !== '0' && badge.style.display !== 'none') ? 'block' : 'none';
+        });
+        observer.observe(badge, { childList: true, attributes: true, attributeFilter: ['style'] });
+      }
+    }
+  }
+
+  /* ── Init ── */
+  function init() {
+    if (window._lsMobileInited) return;
+    window._lsMobileInited = true;
+    injectMobBar();
+    wireEvents();
+    /* Defer notif sync until page JS has run */
+    setTimeout(syncNotifBtn, 600);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();
diff --git a/js/notifications.js b/js/notifications.js
new file mode 100644
index 0000000..b660d7a
--- /dev/null
+++ b/js/notifications.js
@@ -0,0 +1,89 @@
+/* ── Shared notification dropdown module ──────────────────────────── */
+(function() {
+  let _notifOpen = false;
+  let _sse = null;
+
+  function renderNotifDrop(data) {
+    const drop  = document.getElementById('notif-drop');
+    const badge = document.getElementById('notif-badge');
+    if (!drop || !badge) return;
+    if (data.unread > 0) { badge.textContent = data.unread > 9 ? '9+' : data.unread; badge.style.display = ''; }
+    else badge.style.display = 'none';
+    drop.innerHTML = `
+      <div class="notif-drop-header">
+        <span class="notif-drop-title">Уведомления</span>
+        ${data.unread > 0 ? `<button class="notif-read-all" onclick="LS.notif.markAllRead()">Отметить все прочитанными</button>` : ''}
+      </div>
+      ${data.notifications.length ? data.notifications.map(n => `
+        <a class="notif-item${n.is_read ? '' : ' unread'}" href="${LS.safeHref(n.link)}" onclick="LS.notif.click(event,${n.id},'${LS.safeHref(n.link)}')">
+          <div class="notif-dot${n.is_read ? ' read' : ''}"></div>
+          <div><div class="notif-msg">${LS.esc(n.message)}</div><div class="notif-time">${LS.fmtRelTime(n.created_at)}</div></div>
+        </a>`).join('') : '<div class="notif-empty">Уведомлений нет</div>'}`;
+  }
+
+  async function load() {
+    try { renderNotifDrop(await LS.getNotifications()); } catch {}
+  }
+
+  function toggle() {
+    const drop = document.getElementById('notif-drop');
+    if (!drop) return;
+    _notifOpen = !_notifOpen;
+    if (_notifOpen) {
+      const btn = document.getElementById('notif-btn');
+      if (btn) {
+        const r = btn.getBoundingClientRect();
+        const vh = window.innerHeight;
+        // Anchor bottom of dropdown to button bottom, but don't go above viewport
+        const bottom = vh - r.bottom;
+        drop.style.top  = 'auto';
+        drop.style.bottom = Math.max(8, bottom) + 'px';
+        drop.style.left = (r.right + 8) + 'px';
+      }
+      drop.style.display = 'block';
+      load();
+    } else {
+      drop.style.display = 'none';
+    }
+  }
+
+  async function clickNotif(e, id, link) {
+    e.preventDefault();
+    await LS.markNotifRead(id).catch(() => {});
+    await load();
+    if (link && link !== '#') window.location.href = link;
+  }
+
+  async function markAllRead() {
+    await LS.markAllNotifsRead().catch(() => {});
+    await load();
+  }
+
+  let _inited = false;
+  function init() {
+    if (_inited) return;
+    _inited = true;
+    // Note: button already has onclick="LS.notif.toggle()" in HTML
+    // Close on outside click
+    document.addEventListener('click', e => {
+      const drop = document.getElementById('notif-drop');
+      if (!drop || !_notifOpen) return;
+      if (!e.target.closest('#notif-drop') && !e.target.closest('#notif-btn')) {
+        _notifOpen = false;
+        drop.style.display = 'none';
+      }
+    });
+
+    // SSE real-time
+    _sse = LS.connectSSE(ev => {
+      if (ev.type) load();
+    });
+
+    // Initial load
+    load();
+  }
+
+  // Expose as LS.notif
+  window.LS = window.LS || {};
+  LS.notif = { init, toggle, load, click: clickNotif, markAllRead };
+})();
diff --git a/js/search.js b/js/search.js
new file mode 100644
index 0000000..f4e9d4e
--- /dev/null
+++ b/js/search.js
@@ -0,0 +1,176 @@
+/* ═══════════════════════════════════════════════════════════════
+   LearnSpace Global Search  —  /js/search.js
+   Include on any sidebar page after api.js.
+   Opens with Ctrl+K or click on search button in sidebar.
+   ═══════════════════════════════════════════════════════════════ */
+(function () {
+  if (!window.LS) return;
+
+  const ICONS = {
+    lesson:   'book-open',
+    course:   'graduation-cap',
+    file:     'file-text',
+    question: 'help-circle',
+  };
+  const LABELS = {
+    lesson:   'Уроки',
+    course:   'Курсы',
+    file:     'Файлы',
+    question: 'Вопросы',
+  };
+
+  let _overlay = null;
+  let _input   = null;
+  let _results = null;
+  let _timer   = null;
+  let _items   = [];
+  let _activeIdx = -1;
+
+  function esc(s) {
+    return String(s || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  }
+
+  function build() {
+    if (_overlay) return;
+    _overlay = document.createElement('div');
+    _overlay.className = 'gs-overlay';
+    _overlay.innerHTML = `
+      <div class="gs-box">
+        <div class="gs-input-wrap">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.3-4.3"/></svg>
+          <input class="gs-input" placeholder="Поиск уроков, курсов, файлов…" autocomplete="off" />
+          <span class="gs-kbd">ESC</span>
+        </div>
+        <div class="gs-results">
+          <div class="gs-empty">Начните вводить для поиска</div>
+        </div>
+      </div>`;
+    document.body.appendChild(_overlay);
+
+    _input   = _overlay.querySelector('.gs-input');
+    _results = _overlay.querySelector('.gs-results');
+
+    // Close on backdrop click
+    _overlay.addEventListener('click', e => { if (e.target === _overlay) close(); });
+
+    // Event delegation for result clicks — один listener вместо N
+    _results.addEventListener('click', e => {
+      const item = e.target.closest('.gs-item');
+      if (item) window.location.href = item.dataset.url;
+    });
+
+    // Input handling
+    _input.addEventListener('input', () => {
+      clearTimeout(_timer);
+      _timer = setTimeout(doSearch, 250);
+    });
+
+    // Keyboard nav
+    _input.addEventListener('keydown', e => {
+      if (e.key === 'Escape') { close(); return; }
+      if (e.key === 'ArrowDown') { e.preventDefault(); navigate(1); return; }
+      if (e.key === 'ArrowUp')   { e.preventDefault(); navigate(-1); return; }
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        const active = _items[_activeIdx];
+        if (active) window.location.href = active.url;
+        return;
+      }
+    });
+  }
+
+  async function doSearch() {
+    const q = _input.value.trim();
+    if (q.length < 2) {
+      _results.innerHTML = '<div class="gs-empty">Начните вводить для поиска</div>';
+      _items = [];
+      _activeIdx = -1;
+      return;
+    }
+
+    try {
+      const data = await LS.globalSearch(q);
+      _items = data.results || [];
+      _activeIdx = -1;
+      render();
+    } catch {
+      _results.innerHTML = '<div class="gs-empty">Ошибка поиска</div>';
+    }
+  }
+
+  function render() {
+    if (!_items.length) {
+      _results.innerHTML = '<div class="gs-empty">Ничего не найдено</div>';
+      return;
+    }
+
+    // Group by type
+    const groups = {};
+    for (const item of _items) {
+      if (!groups[item.type]) groups[item.type] = [];
+      groups[item.type].push(item);
+    }
+
+    let html = '';
+    let idx = 0;
+    for (const [type, items] of Object.entries(groups)) {
+      html += `<div class="gs-group-label">${LABELS[type] || type}</div>`;
+      for (const item of items) {
+        const iconCls = `gs-icon-${type}`;
+        const iconName = ICONS[type] || 'bookmark';
+        html += `<div class="gs-item${idx === _activeIdx ? ' active' : ''}" data-idx="${idx}" data-url="${esc(item.url)}">
+          <div class="gs-item-icon ${iconCls}">
+            <i data-lucide="${iconName}" style="width:16px;height:16px"></i>
+          </div>
+          <div class="gs-item-body">
+            <div class="gs-item-title">${esc(item.title)}</div>
+            ${item.subtitle ? `<div class="gs-item-sub">${esc(item.subtitle)}</div>` : ''}
+          </div>
+          <svg class="gs-item-arrow" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+        </div>`;
+        idx++;
+      }
+    }
+    _results.innerHTML = html;
+
+    // Lucide icons
+    if (window.lucide) lucide.createIcons({ nodes: _results.querySelectorAll('[data-lucide]') });
+  }
+
+  function navigate(dir) {
+    const total = _items.length;
+    if (!total) return;
+    const prev = _results.querySelector('.gs-item.active');
+    if (prev) prev.classList.remove('active');
+    _activeIdx = (_activeIdx + dir + total) % total;
+    const next = _results.querySelector(`.gs-item[data-idx="${_activeIdx}"]`);
+    if (next) { next.classList.add('active'); next.scrollIntoView({ block: 'nearest' }); }
+  }
+
+  function open() {
+    build();
+    _overlay.classList.add('open');
+    _input.value = '';
+    _results.innerHTML = '<div class="gs-empty">Начните вводить для поиска</div>';
+    _items = [];
+    _activeIdx = -1;
+    setTimeout(() => _input.focus(), 50);
+  }
+
+  function close() {
+    if (_overlay) _overlay.classList.remove('open');
+  }
+
+  // Global shortcut: Ctrl+K
+  document.addEventListener('keydown', e => {
+    if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+      e.preventDefault();
+      if (_overlay?.classList.contains('open')) close();
+      else open();
+    }
+  });
+
+  // Expose
+  window.lsSearchOpen  = open;
+  window.lsSearchClose = close;
+})();