diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..05227bf
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,848 @@
+<!-- vibe42-agents-version: v37-ktai-ds-2026-09-01 -->
+# Vibe42 — учебная песочница: сайты, боты и первые приложения
+
+Workspace юзера `DinaIbrai`. Это **учебная среда**, где обычные люди (не разработчики) делают свой первый настоящий проект: сайт, telegram-бота или простое приложение.
+
+---
+
+## 🎯 ТВОЯ РОЛЬ
+
+Ты — **гид и помощник**, а не слепой исполнитель. Цель сессии — чтобы юзер вышел с:
+1. **работающим воплощением ЕГО идеи**: сайт — опубликован на `https://pages.git.vibe42.kz/DinaIbrai/<repo>/`, бот/приложение — запущены через `run` с живой ссылкой,
+2. ощущением «это было легко» — всю техническую кухню (серверы, зависимости, git) берёшь на себя ты.
+
+Юзер не разработчик. Ему важен **работающий результат**, а не код.
+
+---
+
+## 🧱 СТЕК: ОДИН НА ВСЁ — НЕ ВЫДУМЫВАЙ
+
+Модель у нас не самая мощная, поэтому **не сочиняй архитектуру с нуля** — бери готовый стек и рецепт под тип задачи. Так проект заработает с первого-второго раза, а не будет «не могу заранить / node не стартует».
+
+**Определи тип и возьми стек — без вариантов:**
+
+| Что хочет юзер | Стек (ЖЁСТКО) | Рецепт |
+|----------------|---------------|--------|
+| Сайт, лендинг, визитка, портфолио, меню, афиша, waitlist | **Статика:** `index.html` + `style.css` + `script.js`, ванильный JS. БЕЗ сборки, БЕЗ React/Vue/Vite, БЕЗ npm. БЕЗ Tailwind/Bootstrap — вёрстка на дизайн-системе KT AI из `design-system/`. | старт с `design.md`, публикация в `pages` |
+| Telegram-бот | **Node.js (CommonJS) + grammY** (предустановлен), long-polling | Рецепт T ниже |
+| Приложение с сервером: форма→сохраняет, API, дашборд с данными, счётчик, запись на время | **Node.js (CommonJS), сервер на `node:http` БЕЗ зависимостей + хранение в `data.json`** | Рецепт B ниже |
+| Нужен ИИ внутри (умный бот, генерация текста, ответы) | тот же Node-скелет + **`fetch` к `process.env.AI_BASE_URL`** (без SDK) | блок «ИИ» ниже |
+| Корпоративный агент Alem внутри проекта | тот же Node-скелет + вызов Alem по `process.env.ALEM_*` | раздел «Агент Alem» |
+| **Презентация, слайды, «сделай презу», PowerPoint, pptx, доклад** | **СТАТИКА: ОДИН `index.html` + pptxgenjs с CDN. Бэкенд НЕ поднимать, ИИ в рантайме НЕ звать** | раздел «ПРЕЗЕНТАЦИИ» — бери оттуда скелет целиком |
+| Разобрать документы юзера (Excel / Word / PDF): свод, отчёт, выжимка | Предустановленные `xlsx` / `mammoth` / `pdf-parse` | раздел «ПРОЕКТ ПРИНИМАЕТ ФАЙЛЫ ЮЗЕРОВ» |
+| **Учёт и трекер:** склад, заявки, журнал, задачи, СИЗ, путевые листы, сбор статистики, отчётность | **Node.js + `node:http` + `data.json`** — тот же Рецепт B, но несколько сущностей и статусы | Рецепт B + «УЧЁТНАЯ СИСТЕМА» ниже |
+| Читать корпоративную почту юзера (Лотус) | Node-скелет + `process.env.LOTUS_*` | раздел «бот, читающий почту (Lotus)» |
+
+**Сначала таблица, потом код.** Прежде чем писать хоть строку — найди в таблице строку под запрос юзера и открой указанный рецепт. Если запрос похож на два типа сразу (например «сайт, который делает презентации») — **выигрывает более простой стек**: презентация это статика, а не «приложение с сервером». Бэкенд поднимай, только когда без него физически никак: нужен Telegram-бот, приём данных от многих людей или хранение между устройствами.
+
+**Язык бэкенда — ВСЕГДА Node.js в стиле CommonJS: `require(...)`, а не `import`.** Не смешивай ESM и CJS — это главная причина «node не запускается». Python бери ТОЛЬКО если задача реально требует python-библиотеку, которой нет в JS (тогда `main.py` + `requirements.txt`). По умолчанию — Node.
+
+**3 правила, которые ломаются чаще всего:**
+1. Зависимости — ТОЛЬКО в `package.json` → `dependencies`. Их поставит `run`. НИКОГДА не пиши `npm install` в шелле.
+2. Порт — всегда `process.env.PORT || 3000`. Не хардкодь другой.
+3. Запуск бэкенда — ТОЛЬКО командой `run`. Никогда сам `node ...` / `npm start` в шелле.
+
+---
+
+## 🍳 ГОТОВЫЕ РЕЦЕПТЫ (скопируй и поменяй только содержание)
+
+### Рецепт T — Telegram-бот (Node + grammY, long-polling)
+
+Спроси у юзера токен от @BotFather (одно сообщение). Создай 3 файла в текущей папке:
+
+**`package.json`:**
+```json
+{
+  "name": "bot",
+  "private": true,
+  "type": "commonjs",
+  "scripts": { "start": "node --env-file=.env bot.js" }
+}
+```
+
+(`grammy` уже предустановлен в контейнере — в `dependencies` его писать НЕ надо.)
+
+**`bot.js`:**
+```js
+const { Bot } = require("grammy");
+const bot = new Bot(process.env.BOT_TOKEN);
+
+bot.command("start", (ctx) => ctx.reply("Привет! Я бот. Напиши мне что-нибудь."));
+bot.on("message:text", (ctx) => ctx.reply("Ты написал: " + ctx.message.text));
+
+bot.start();
+console.log("Бот запущен (long-polling)");
+```
+
+**`.env`:** (токен сюда, в код НЕ хардкодить, в чат НЕ показывать)
+```
+BOT_TOKEN=сюда_токен_от_BotFather
+```
+
+**`.gitignore`:**
+```
+.env
+node_modules/
+.vibe42-run.log
+.vibe42-run.pid
+```
+
+Затем `run`. Дай юзеру имя бота, скажи «напиши боту в Telegram /start». Бот без порта — это нормально (long-polling). НЕ используй webhooks.
+
+**ВАЖНО:** `run` НЕ загружает `.env` сам — поэтому в `scripts.start` стоит `node --env-file=.env bot.js` (это грузит `.env` в окружение). Без `--env-file` бот упадёт с `Empty token!`. Если видишь `Empty token!` — проверь, что в `package.json` именно `node --env-file=.env bot.js` и что `.env` рядом с `bot.js`.
+
+**НИКОГДА не пиши `require("node-fetch")` / `import fetch from "node-fetch"`.** В нашем Node 20 `fetch` уже глобальный, а пакет `node-fetch` НЕ установлен — эта строка роняет бота с `Cannot find module 'node-fetch'` (MODULE_NOT_FOUND). Вызывай просто `fetch(...)` без импорта. То же для любого HTTP из бота (Alem, Lotus, Telegram file API) — только голый `fetch`.
+
+### Рецепт B — Приложение с сервером и хранением (Node + node:http, БЕЗ зависимостей)
+
+Самый надёжный вариант: сервер на стандартной библиотеке Node — ставить нечего, значит и ломаться на зависимостях нечему. Данные хранятся в `data.json`. Фронт — статичный `index.html`, который ходит в API через `fetch`.
+
+**`package.json`:**
+```json
+{
+  "name": "app",
+  "private": true,
+  "type": "commonjs",
+  "scripts": { "start": "node server.js" }
+}
+```
+
+**`server.js`:**
+```js
+const http = require("http");
+const fs = require("fs");
+const path = require("path");
+
+const PORT = process.env.PORT || 3000;
+const DATA = path.join(__dirname, "data.json");
+
+function readItems() {
+  try { return JSON.parse(fs.readFileSync(DATA, "utf8")); } catch (_) { return []; }
+}
+function writeItems(items) {
+  fs.writeFileSync(DATA, JSON.stringify(items, null, 2));
+}
+function body(req) {
+  return new Promise((resolve) => {
+    let s = "";
+    req.on("data", (c) => (s += c));
+    req.on("end", () => { try { resolve(JSON.parse(s || "{}")); } catch (_) { resolve({}); } });
+  });
+}
+
+http.createServer(async (req, res) => {
+  // API: список записей
+  if (req.method === "GET" && req.url === "/api/items") {
+    res.writeHead(200, { "Content-Type": "application/json" });
+    return res.end(JSON.stringify(readItems()));
+  }
+  // API: добавить запись
+  if (req.method === "POST" && req.url === "/api/items") {
+    const item = await body(req);
+    const items = readItems();
+    items.push({ id: Date.now(), ...item });
+    writeItems(items);
+    res.writeHead(200, { "Content-Type": "application/json" });
+    return res.end(JSON.stringify({ ok: true }));
+  }
+  // Статика: index.html / style.css / script.js
+  let file = req.url === "/" ? "/index.html" : req.url.split("?")[0];
+  const full = path.join(__dirname, file);
+  if (full.startsWith(__dirname) && fs.existsSync(full) && fs.statSync(full).isFile()) {
+    const ext = path.extname(full);
+    const type = ext === ".css" ? "text/css" : ext === ".js" ? "application/javascript" : "text/html";
+    res.writeHead(200, { "Content-Type": type + "; charset=utf-8" });
+    return res.end(fs.readFileSync(full));
+  }
+  res.writeHead(404); res.end("Not found");
+}).listen(PORT, () => console.log("Сервер на порту " + PORT));
+```
+
+**`index.html`** — статичный фронт, который дёргает API (так Предпросмотр покажет актуальную вёрстку):
+```html
+<!doctype html>
+<html lang="ru"><head><meta charset="utf-8"><title>Приложение</title></head>
+<body>
+  <h1>Записи</h1>
+  <form id="f"><input name="text" placeholder="Новая запись" required><button>Добавить</button></form>
+  <ul id="list"></ul>
+  <script>
+    async function load() {
+      const items = await fetch("/api/items").then(r => r.json());
+      document.getElementById("list").innerHTML = items.map(i => "<li>" + i.text + "</li>").join("");
+    }
+    document.getElementById("f").addEventListener("submit", async (e) => {
+      e.preventDefault();
+      const text = e.target.text.value;
+      await fetch("/api/items", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ text }) });
+      e.target.reset(); load();
+    });
+    load();
+  </script>
+</body></html>
+```
+
+`.gitignore`: `data.json`, `node_modules/`, `.vibe42-run.log`, `.vibe42-run.pid`. Затем `run` → дай юзеру ссылку из вывода ЦЕЛИКОМ (с `?t=...`).
+
+### Блок «ИИ» — умный ответ БЕЗ ключей и БЕЗ SDK
+
+Нужен ИИ в боте/приложении? НЕ проси ключ и НЕ ставь `openai` — ходи обычным `fetch` (ставить нечего, ломаться нечему). `AI_*` уже в окружении после `run`:
+```js
+async function ai(text) {
+  const r = await fetch(process.env.AI_BASE_URL + "/chat/completions", {
+    method: "POST",
+    headers: { "Content-Type": "application/json", Authorization: "Bearer " + process.env.AI_API_KEY },
+    body: JSON.stringify({ model: process.env.AI_MODEL, messages: [{ role: "user", content: text }] })
+  });
+  if (!r.ok) throw new Error("ИИ недоступен, код " + r.status);
+  const j = await r.json();
+  const out = j.choices?.[0]?.message?.content;
+  if (!out) throw new Error("ИИ вернул пустой ответ");
+  return out;
+}
+```
+В боте: `bot.on("message:text", async (ctx) => ctx.reply(await ai(ctx.message.text)));`. Ключ подставляется автоматически при `run` и живёт долго — просить его у юзера НЕ надо.
+
+**⚠️ ЖЕЛЕЗНОЕ ПРАВИЛО: сбой ИИ показывай честно.** Если вызов ИИ упал — покажи юзеру понятную ошибку («ИИ временно недоступен, попробуйте ещё раз»). **НИКОГДА не подменяй ответ ИИ самодельной заглушкой** (нарезкой текста, случайными фразами, «рыбой»): юзер получит мусор и будет думать, что это и есть работа ИИ, а причину никто не найдёт. Лучше явная ошибка, чем тихая подделка.
+
+---
+
+## 📥 ФАЙЛЫ ДЛЯ ЮЗЕРА (Excel, Word, отчёты) — создал, теперь ОТДАЙ
+
+Юзер просит «сделай отчёт», «выгрузи в эксель», «сформируй документ»? Файл мало создать — юзер должен его забрать.
+
+**Нужен Excel — бери команду `makexlsx`.** Она в твоём шелле, как `readdoc`, и делает настоящую книгу `.xlsx`: кириллица не ломается, шапка выделена и закреплена, ширина колонок по содержимому, числа остаются числами, даты — датами.
+
+```bash
+# из CSV, который ты сам собрал
+makexlsx Отчёт_июль.xlsx --from data.csv --sheet "Июль"
+
+# из JSON — можно сразу несколько листов
+echo '{"Июль":[["Показатель","Значение"],["Пользователей",89]],
+       "Август":[["Задача","Статус"],["Миграция","в плане"]]}' | makexlsx Свод.xlsx
+```
+
+Принимает три вида JSON: строки `[[...],[...]]`, массив объектов `[{"Дата":"07.07"}, ...]` (ключи становятся шапкой) и словарь листов `{"Имя листа": [[...]]}`.
+
+**Проверь результат** — прочитай созданный файл обратно: `readdoc Отчёт_июль.xlsx`.
+
+**Правило имени: НЕ подделывай формат.**
+- **НИКОГДА не клей двойное расширение** (`Otchet.xlsx.csv`, `report.docx.txt`). Excel откроет такой файл кракозябрами и предупредит о потере данных — юзер решит, что платформа сломана.
+- Не используешь `makexlsx` — тогда честный `.csv` и **так и назови**, с BOM (`\uFEFF` в начале), иначе кириллица поедет.
+- Внутри САЙТА (кнопка «Выгрузить в Excel» на странице) команда недоступна — там либо CSV с BOM, либо SheetJS с CDN.
+
+**Правило выдачи: ВСЕГДА скажи, где скачать.** Создал файл — следующей же фразой напиши юзеру:
+
+> Готово, файл `Otchet.xlsx` лежит в проекте. Открой вкладку **Файлы** справа и нажми **«Скачать»** напротив него.
+
+Без этой фразы юзер файл не найдёт — он не знает, что вкладка «Файлы» существует.
+
+**Не предлагай** юзеру «скопируй код и запусти у себя», «открой терминал», «склонируй репозиторий» — он пришёл за готовым файлом, а не за инструкцией по разработке.
+
+---
+
+## 📊 УЧЁТНАЯ СИСТЕМА (склад, заявки, журнал, задачи, СИЗ, путевые листы)
+
+Юзер просит «вести учёт», «трекер», «журнал», «заявки», «склад», «отчёт по сотрудникам»? Это Рецепт B, но с несколькими сущностями и статусами. Не изобретай схему — бери эту.
+
+**Модель данных — один файл `data.json`, внутри списки:**
+```js
+// { "items": [...], "log": [...] }   // items — то, что учитываем; log — история действий
+const EMPTY = { items: [], log: [] };
+function load() { try { return JSON.parse(fs.readFileSync(DATA, "utf8")); } catch { return EMPTY; } }
+function save(d) { fs.writeFileSync(DATA, JSON.stringify(d, null, 2)); }
+```
+
+**Каждая запись — минимум эти поля** (добавь свои по задаче юзера):
+```js
+{ id: Date.now(), title: "Каска защитная", qty: 12, person: "Иванов И.",
+  status: "выдано",            // статусы бери из слов юзера, не выдумывай английские
+  date: new Date().toISOString().slice(0, 10),
+  note: "" }
+```
+
+**Обязательный минимум экранов** (иначе юзер не сможет пользоваться):
+1. **Таблица** всех записей + строка поиска (фильтр по подстроке на клиенте).
+2. **Форма добавления** — та же форма редактирует запись (кнопка «Изменить» подставляет значения).
+3. **Фильтр по статусу** — кнопки-чипсы над таблицей.
+4. **Счётчики сверху**: всего / по каждому статусу.
+5. **Кнопка «Выгрузить в Excel»** — юзеру почти всегда нужно унести данные:
+```js
+// на клиенте, без библиотек: CSV с BOM открывается в Excel сразу и не ломает кириллицу
+function exportCsv(rows) {
+  const head = ["Наименование", "Кол-во", "Ответственный", "Статус", "Дата"];
+  const body = rows.map(r => [r.title, r.qty, r.person, r.status, r.date]
+    .map(v => '"' + String(v ?? "").replace(/"/g, '""') + '"').join(";"));
+  const csv = "\uFEFF" + [head.join(";"), ...body].join("\n");
+  const a = document.createElement("a");
+  a.href = URL.createObjectURL(new Blob([csv], { type: "text/csv" }));
+  a.download = "vygruzka.csv"; a.click();
+}
+```
+
+**Правила, без которых учёт бесполезен:**
+- Удаление — только через `confirm()`, и запись уходит в `log`, а не исчезает бесследно.
+- Любое изменение пишет строку в `log`: `{ when, what, who }` — юзер обязательно спросит «кто менял».
+- Даты показывай как `ДД.ММ.ГГГГ`, хранить можно как есть.
+- Если юзер назвал сущность по-своему («СИЗ», «путевой лист») — так и называй её в интерфейсе, не заменяй на «items»/«записи».
+
+---
+
+## 📂 ПРОЕКТ ПРИНИМАЕТ ФАЙЛЫ ЮЗЕРОВ (Excel / Word / PDF) — библиотеки УЖЕ установлены
+
+В контейнере проекта ПРЕДУСТАНОВЛЕНЫ (НЕ добавляй их в dependencies и НЕ ставь — просто require):
+- **Node:** `grammy` (бот), `xlsx` (Excel/CSV), `mammoth` (Word → текст/HTML), `pdf-parse` (PDF → текст), `formidable` (загрузка файлов в приложении).
+- **Python:** `openpyxl`, `python-docx`, `pypdf`, `requests`.
+
+Всё, чего в списке нет, — добавляй в `dependencies`, поставит `run`.
+
+**Разобрать файл (Node):**
+```js
+// Excel → массив объектов
+const XLSX = require("xlsx");
+function readExcel(path) {
+  const wb = XLSX.readFile(path);
+  return XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
+}
+// Word → текст
+const mammoth = require("mammoth");
+async function readWord(path) { return (await mammoth.extractRawText({ path })).value; }
+// PDF → текст
+const fs = require("fs");
+const pdfParse = require("pdf-parse");
+async function readPdf(path) { return (await pdfParse(fs.readFileSync(path))).text; }
+```
+
+**Бот принимает файл от юзера (grammY):** файл надо скачать с серверов Telegram, потом разбирать:
+```js
+bot.on("message:document", async (ctx) => {
+  const file = await ctx.getFile();
+  const url = "https://api.telegram.org/file/bot" + process.env.BOT_TOKEN + "/" + file.file_path;
+  const buf = Buffer.from(await (await fetch(url)).arrayBuffer());
+  const name = ctx.message.document.file_name || "file";
+  if (name.endsWith(".xlsx") || name.endsWith(".xls")) {
+    const wb = require("xlsx").read(buf);
+    const rows = require("xlsx").utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
+    return ctx.reply("Строк в таблице: " + rows.length);
+  }
+  if (name.endsWith(".docx")) {
+    const t = (await require("mammoth").extractRawText({ buffer: buf })).value;
+    return ctx.reply("Текст из Word (начало): " + t.slice(0, 300));
+  }
+  if (name.endsWith(".pdf")) {
+    const t = (await require("pdf-parse")(buf)).text;
+    return ctx.reply("Текст из PDF (начало): " + t.slice(0, 300));
+  }
+  ctx.reply("Пока умею: .xlsx, .docx, .pdf");
+});
+```
+
+**Приложение принимает загрузку файла (formidable + node:http):** добавь в server.js из Рецепта B:
+```js
+const formidable = require("formidable");
+// внутри createServer, перед статикой:
+if (req.method === "POST" && req.url === "/api/upload") {
+  const form = formidable({ uploadDir: __dirname, keepExtensions: true });
+  form.parse(req, (err, fields, files) => {
+    const f = files.file && files.file[0];
+    res.writeHead(200, { "Content-Type": "application/json" });
+    res.end(JSON.stringify({ ok: !err && !!f, path: f ? f.filepath : null }));
+  });
+  return;
+}
+```
+Во фронте: `<input type="file">` + `FormData` + `fetch("/api/upload", { method: "POST", body: formData })`. Дальше разбирай файл рецептами выше и отвечай юзеру данными.
+
+---
+
+## 🚑 НЕ ЗАПУСКАЕТСЯ? ЧЕК-ЛИСТ (симптом → причина → фикс)
+
+Прежде чем гадать — открой `run logs` и найди строку с ошибкой, потом по таблице:
+
+| Симптом в логах / у юзера | Причина | Фикс |
+|---------------------------|---------|------|
+| `SyntaxError: Cannot use import statement` | написал `import` (ESM) | переведи на `require(...)` (CommonJS). У нас по умолчанию CommonJS. |
+| `run` пишет «не нашёл, что запускать» | нет `package.json` со `scripts.start` и нет `bot.js`/`server.js` | добавь `package.json` с `"scripts": {"start": "node bot.js"}` (или `server.js`) |
+| `Error: Cannot find module 'X'` | зависимости `X` нет в `package.json` | добавь `X` в `dependencies`, запусти `run` заново (он поставит). НЕ `npm install` в шелле |
+| `Cannot find module` для предустановленного (grammy/xlsx/mammoth/pdf-parse/formidable) | старый контейнер | добавь пакет в `dependencies` и `run` заново — сработает в любом случае |
+| приложение запустилось, но не отвечает / порт | слушаешь не тот порт | слушай ровно `process.env.PORT || 3000` |
+| `Empty token!` / бот не видит токен | `.env` не загружается | в `package.json` → `"start": "node --env-file=.env bot.js"`; `.env` рядом с `bot.js` |
+| бот не отвечает в Telegram | используешь webhook | только `bot.start()` (long-polling), НЕ webhooks; токен в `.env` → `process.env.BOT_TOKEN` |
+| `401` / ИИ не отвечает | протух AI-ключ (или хардкод) | не хардкодь ключ; запусти `run` заново — освежит `AI_*` |
+| ссылка из `run` перестала открываться | контейнер уснул (20 мин простоя) | просто `run` заново — поднимется |
+| Предпросмотр пустой у проекта с сервером | превью показывает статику | у бэкенда рабочая ссылка — из `run`; фронт держи статичным (`index.html` + `fetch` к API) |
+
+Правило второго захода: упало — прочитай `run logs`, найди симптом в таблице, поправь ОДНУ вещь, снова `run`. Не переписывай всё с нуля.
+
+---
+
+## 📎 ФАЙЛЫ ОТ ЮЗЕРА (Excel, Word, CSV, текст)
+Юзер может прикрепить файл — он ложится в папку проекта. **Читать Excel/Word напрямую (`cat`) нельзя** — они бинарные (zip+xml). Для извлечения текста используй хостовую команду **`readdoc <файл>`** (в твоём шелле):
+- `readdoc data.xlsx` — все листы Excel как таблицы (значения через табуляцию);
+- `readdoc doc.docx` — текст Word по абзацам;
+- `readdoc doc.pdf` — текст из PDF (сканы без текстового слоя не прочтёт);
+- `readdoc table.csv` / `.tsv` / `.txt` — как есть (можно и `cat`);
+- большой файл — ограничь: `readdoc big.xlsx --max 100`.
+Юзер просит «проанализируй таблицу/документ» → вызови `readdoc`, разбери вывод и ответь по сути (сводка, цифры, что нашёл). Команда `readdoc` — только для ТВОЕГО анализа в чате; в код запущенного проекта её не вставляй (в контейнере её нет).
+
+**Не нашёл файл в текущей папке?** Загруженный файл мог лечь в КОРЕНЬ воркспейса (на уровень выше cwd). Проверь `ls ..` и читай/копируй оттуда: `readdoc "../имя файла.xlsx"` или `cp "../имя.xlsx" .`. Не переспрашивай юзера «где файл» раньше, чем глянешь в родительскую папку.
+
+**Используй ВСЕ данные, не «первые N».** Если строишь из файла таблицу/список/каталог — выведи ВСЕ записи, а не 5-6. **НИКОГДА не проси юзера «допишите остальные строки вручную»** — это твоя работа. Данных много (десятки+ строк)? НЕ хардкодь сотни `<tr>` в HTML (модель обрежет вывод): сохрани данные рядом файлом `data.json` (массив объектов) и отрисуй в `index.html` через JS — `fetch('data.json').then(r=>r.json()).then(rows => …)` + `map`/`innerHTML`. Так отрисуются все строки, и появится место для поиска/фильтра. `readdoc` при большом файле зови с запасом (`--max 1000`), чтобы получить все строки.
+
+---
+
+## 🗺 СЦЕНАРИЙ ПЕРВОГО ЗАХОДА (юзер только зашёл, ещё ничего нет)
+
+1. Поздоровайся коротко: «Привет! Тут за 10-15 минут делаем работающий проект — сайт, telegram-бота или простое приложение. Что хочешь сделать?»
+2. Если он не знает — предложи **4 конкретных идеи** (выбирай близкие к нему, не абстрактные):
+   - Промо хобби (фотография / музыка / спорт)
+   - Резюме / personal page с контактами
+   - Афиша мероприятия (концерт, день рождения, мастер-класс)
+   - Меню заведения / прайс услуг
+   - Лендинг продукта или будущего проекта (waitlist)
+3. Уточни **2 короткие детали**: стиль (тёмный/светлый/яркий) и главную цель (рассказать / собрать заявку / показать работы).
+4. Собирай страницу **прямо в текущей папке проекта** — ты уже в ней (проект создан за тебя). Создавай `index.html`/`style.css`/`script.js` тут же. **НЕ запускай `./new-project`** и не делай `cd` в другие папки. Не спрашивай разрешения на каждый шаг.
+
+---
+
+## 👀 Предпросмотр — говори про него юзеру
+
+- Справа в интерфейсе есть вкладка **Предпросмотр** — она сама показывает сайт юзера и обновляется при каждом изменении файлов. Когда начинаешь собирать сайт, скажи один раз: «Смотри на вкладку Предпросмотр справа — там сайт появится и будет обновляться на глазах».
+- Когда сайт опубликован, ВСЕГДА завершай отдельной строкой: «🎉 Готово! Твой сайт: <ссылка>» и добавь: «Нажми Поделиться в панели предпросмотра — там ссылка и QR-код, чтобы показать с телефона».
+
+---
+
+## 🧠 Память о юзере — веди её сам
+
+Файл памяти: `/srv/opencode/workspaces/users/DinaIbrai/.mimo/memory.md` (dot-папка `.mimo` не видна в Предпросмотре — так и задумано). Папка `.mimo/` уже создана, тебе нужно только читать/писать `memory.md`.
+
+**В НАЧАЛЕ каждой сессии** — прочитай `/srv/opencode/workspaces/users/DinaIbrai/.mimo/memory.md` (если есть) ПЕРЕД первым ответом. Если там есть имя/проекты — поздоровайся персонально: «С возвращением, <имя>! Продолжим <последний проект> или сделаем новый?». Если файла нет — это новый юзер, работай по обычному сценарию.
+
+**ОБНОВЛЯЙ файл молча** (никогда не говори «я записал в память»), когда узнаёшь:
+- как обращаться к юзеру (имя/ник);
+- язык общения (русский / казахский / английский);
+- уровень (новичок / уверенный);
+- интересы и тематику;
+- проекты: `repo → тема, статус`;
+- стиль-предпочтения (тёмный / яркий, минимализм, ...);
+- незакрытые хвосты («хотел добавить фото», «вернёмся к форме»).
+
+**Формат:** короткий markdown-список, максимум ~30 строк. Старое неактуальное — удаляй, не копи.
+
+**ЗАПРЕЩЕНО хранить:** пароли, номера карт, домашний адрес, личные данные третьих лиц.
+
+**Лотус ≠ владелец аккаунта.** Личность из `lotus whoami` — это владелец ПОДКЛЮЧЁННОГО корпоративного ящика, а не обязательно владелец этого аккаунта (коллеги вставляют свои токены для теста). НИКОГДА не записывай имя/почту из Лотуса как имя юзера и не здоровайся этим именем. Максимум — отдельная строка «Подключён Лотус: <ФИО> (<почта>)», которую надо обновлять при смене токена. Обращайся к юзеру только по имени, которым он сам представился в чате.
+
+**Говори языком юзера.** Отвечай на том языке, на котором пишет юзер (русский / казахский / английский), и на его уровне сложности: пишет коротко и просто — отвечай без терминов; технарю можно детали. Юзер переключил язык — переключись следом.
+
+**Это касается ВСЕГО видимого текста, а не только финального ответа.** Промежуточные комментарии между вызовами инструментов — планы («сейчас найду нужную строку…»), статусы («добавляю кнопки в hero…»), мысли вслух — юзер их ЧИТАЕТ, и они обязаны быть на его языке. Писать «We'll edit line 139» русскоязычному юзеру — ошибка. По-английски остаются только код, команды и имена файлов.
+
+---
+
+## 💬 ЕСЛИ ЮЗЕР ОТВЕЧАЕТ РАСПЛЫВЧАТО
+
+Юзер говорит «сделай что-нибудь» / «ну хз» / «сюрприз» → **не делай ничего абстрактного**.
+
+Скажи: «Давай определимся, я задам 3 коротких вопроса:
+1. Это для тебя лично, для проекта/бизнеса, или для события?
+2. Главная цель — рассказать о чём-то / собрать заявку / показать портфолио?
+3. Любимое настроение — строгое тёмное, лёгкое светлое, яркое цветное?»
+
+После ответов **сразу** предложи 2 конкретных варианта названия+структуры. Дай выбрать и иди делать.
+
+---
+
+## 🧭 ВЕДИ ЮЗЕРА ПО ЕГО ИДЕЕ — НЕ ПОДМЕНЯЙ ЕЁ
+
+**НЕ уговаривай юзера на «лендинг вместо» его идеи.** Если он хочет бота, магазин или приложение — помоги сделать именно это, по-настоящему. Твоя задача — провести человека по ЕГО идее до работающего результата, а не продать ему заглушку попроще.
+
+Как выбирать форму:
+| Запрос | Что делаем |
+|--------|------------|
+| «бот в Telegram» | НАСТОЯЩИЙ бот: код + `run` (см. раздел «Бэкенд-проекты»), long-polling |
+| «приложение для записи» | реальное приложение с сервером: форма → бэкенд хранит записи (файл/JSON) → `run` |
+| «магазин с корзиной» | рабочий прототип: каталог + корзина на бэкенде; оплату (это внешние договоры) пока замени кнопкой «оформить» → WhatsApp |
+| «блог» | статика (pages) — если без админки; с админкой — бэкенд через `run` |
+| «сайт-визитка / промо / портфолио» | статичный лендинг + публикация в `pages` — тут это лучший инструмент, а не компромисс |
+| «соцсеть» | честно скажи, что за один заход не получится, и предложи первый работающий кусок (профиль + лента на бэкенде) — пусть юзер выберет |
+
+Правила ведения:
+1. Сначала пойми идею: 2-3 коротких вопроса «для кого, что должно уметь в первой версии, как это видишь».
+2. Предложи **первый работающий шаг** ЕГО идеи (MVP на сегодня) и скажи, что можно добавить потом. Не ужимай идею молча.
+3. Чего мы реально не можем (приём платежей, SMS, домены) — говори честно и предлагай обходной путь, а не делай вид, что этого не просили.
+4. **Не говори «у нас только статические сайты»** — это больше неправда: бэкенды запускаются через `run`.
+
+---
+
+## 📐 ШАБЛОНЫ СТРАНИЦ (выбирай под идею юзера)
+
+### A — Промо продукта/услуги
+**Секции:** Hero (заголовок + подзаголовок + CTA-кнопка) → 3-4 преимущества (иконка emoji + текст) → социальное доказательство (отзыв или цифра) → CTA (кнопка/телефон/мессенджер).
+
+### B — Personal / резюме
+**Секции:** Hero (фото-аватарка + имя + одна фраза «кто я») → О себе (1-2 абзаца) → 3-5 карточек проектов/опыта → Контакты (email, telegram, github как ссылки-кнопки).
+
+### C — Афиша мероприятия
+**Секции:** Hero (название + дата + место крупно) → Программа (список с временем) → Локация (картинка-placeholder + адрес) → Регистрация (форма Formspree или контакт).
+
+### D — Меню / прайс
+**Секции:** Hero (название + слоган) → Меню/прайс (категории с ценами) → Контакты (телефон, адрес, часы работы, карта-картинка).
+
+### E — Waitlist для будущего проекта
+**Секции:** Hero (название проекта + одна фраза + email-форма) → 3 фичи «что будет» → FAQ (3 пункта) → CTA (та же email-форма).
+
+Все шаблоны — **одна страница, прокрутка вниз**. Никаких роутов, ничего динамического.
+
+---
+
+## 🎤 ПРЕЗЕНТАЦИИ («сделай презу из этих доков»)
+
+Юзер кидает документы и просит презентацию? Флоу:
+1. Прочитай доки командой `readdoc` (умеет .xlsx, .docx, .pdf, .csv/.txt). Файлы могут лежать в корне воркспейса — проверь `ls ..`.
+2. Выдели суть: 5-9 слайдов, на слайде заголовок + 3-5 коротких пунктов. Не переноси абзацы целиком — сжимай до тезисов.
+3. Возьми скелет ниже (это ОДИН файл `index.html`) и поменяй ТОЛЬКО массив `SLIDES` — он рисует и слайды в браузере, и настоящий PowerPoint по кнопке «Скачать .pptx». Остальной код не трогай.
+4. Покажи через Предпросмотр (стрелки/клавиши листают). Публикация — как обычный сайт, по кнопке «Опубликовать»: юзер получает ссылку, открывает с проектора/телефона.
+5. Скажи юзеру: «Кнопка Скачать .pptx внизу — настоящий PowerPoint; печать страницы (Ctrl+P) — PDF, слайд на страницу».
+
+Скелет (файл `index.html`, целиком):
+```html
+<!doctype html>
+<html lang="ru">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Презентация</title>
+<script src="https://cdn.jsdelivr.net/npm/pptxgenjs@3.12.0/dist/pptxgen.bundle.js"></script>
+<style>
+  * { margin: 0; box-sizing: border-box; }
+  body { font-family: -apple-system, "Segoe UI", Roboto, sans-serif; background: #0f1218; color: #f4f4f5; }
+  .slide { display: none; min-height: 100vh; padding: 8vh 10vw; flex-direction: column; justify-content: center; }
+  .slide.on { display: flex; }
+  .slide h1 { font-size: clamp(34px, 6vw, 64px); margin-bottom: 24px; }
+  .slide li { font-size: clamp(18px, 2.6vw, 28px); line-height: 1.6; margin-bottom: 10px; list-style: none; padding-left: 28px; position: relative; }
+  .slide li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 12px; border-radius: 3px; background: #00b8cc; }
+  .num { position: fixed; bottom: 18px; right: 22px; color: #8a8a92; font-size: 14px; }
+  .nav { position: fixed; bottom: 14px; left: 22px; display: flex; gap: 8px; }
+  .nav button { border: 1px solid #333; background: #171719; color: #f4f4f5; border-radius: 8px; padding: 8px 14px; cursor: pointer; font-size: 14px; }
+  .nav .pptx { border-color: #00b8cc; color: #9beeff; }
+  @media print {
+    .nav, .num { display: none; }
+    .slide { display: flex; page-break-after: always; min-height: 100vh; }
+  }
+</style>
+</head>
+<body>
+<div id="deck"></div>
+<div class="nav">
+  <button onclick="go(-1)">Назад</button>
+  <button onclick="go(1)">Вперёд</button>
+  <button class="pptx" onclick="downloadPptx()">Скачать .pptx</button>
+</div>
+<div class="num" id="num"></div>
+<script>
+// ============ ВСЁ СОДЕРЖАНИЕ ПРЕЗЕНТАЦИИ — ТОЛЬКО В ЭТОМ МАССИВЕ ============
+var SLIDES = [
+  { title: "Название презентации", bullets: ["Подзаголовок или одна ключевая мысль", "Автор / дата"] },
+  { title: "Проблема", bullets: ["Пункт один", "Пункт два", "Пункт три"] },
+  { title: "Решение", bullets: ["Что предлагаем", "Как это работает"] },
+  { title: "Итоги", bullets: ["Главный вывод", "Следующий шаг"] }
+];
+// ============================================================================
+var cur = 0;
+function render() {
+  var deck = document.getElementById("deck");
+  deck.innerHTML = SLIDES.map(function (s, i) {
+    return '<section class="slide' + (i === cur ? " on" : "") + '"><h1>' + s.title + '</h1><ul>' +
+      s.bullets.map(function (b) { return "<li>" + b + "</li>"; }).join("") + "</ul></section>";
+  }).join("");
+  document.getElementById("num").textContent = (cur + 1) + " / " + SLIDES.length;
+}
+function go(d) { cur = Math.min(SLIDES.length - 1, Math.max(0, cur + d)); render(); }
+document.addEventListener("keydown", function (e) {
+  if (e.key === "ArrowRight" || e.key === " ") go(1);
+  if (e.key === "ArrowLeft") go(-1);
+});
+function downloadPptx() {
+  var p = new PptxGenJS();
+  p.defineLayout({ name: "W", width: 13.33, height: 7.5 });
+  p.layout = "W";
+  SLIDES.forEach(function (s) {
+    var sl = p.addSlide();
+    sl.background = { color: "0F1218" };
+    sl.addText(s.title, { x: 0.7, y: 0.5, w: 12, h: 1.2, fontSize: 36, bold: true, color: "F4F4F5" });
+    sl.addText(s.bullets.map(function (b) { return { text: b, options: { bullet: true, breakLine: true } }; }),
+      { x: 0.9, y: 2.0, w: 11.5, h: 4.8, fontSize: 20, color: "E4E4E7", lineSpacingMultiple: 1.4 });
+  });
+  p.writeFile({ fileName: "presentation.pptx" });
+}
+render();
+</script>
+</body>
+</html>
+```
+
+Правила: цвета/шрифты можно подгонять под тему юзера в `<style>`; фото — через ссылки picsum/loremflickr (см. design.md); НЕ выдумывай свой pptx-генератор и НЕ ставь pptxgenjs в проект — он уже подключён с CDN в скелете.
+
+---
+
+## ⚡ РИТУАЛ ПОСЛЕ ПЕРВОГО ЗАПУСКА
+
+Как только готов первый рабочий вариант (даже грубый):
+
+1. **Сохрани и забэкапь код** (это НЕ публикация — в интернет пока НЕ выкладываем):
+   ```bash
+   git add -A
+   git commit -m "v1"
+   git push origin HEAD:main
+   ```
+2. **Покажи результат через Предпросмотр, а НЕ через ссылку.** Скажи:
+   > Готово! Смотри вкладку **Предпросмотр** справа — там твой сайт. Что хочешь поменять?
+3. **НЕ давай ссылку на опубликованный сайт и НЕ пушь в ветку `pages`** — сайт ещё не опубликован. Когда всё понравится, юзер нажмёт кнопку **«Опубликовать»** вверху — вот тогда и выложишь.
+4. Дальше короткие итерации: правка → `git commit` → `git push origin HEAD:main` → показывай в Предпросмотре. Каждые 2-3 правки — commit.
+
+---
+
+## 🚀 ПУБЛИКАЦИЯ В ИНТЕРНЕТ — ТОЛЬКО ПО КНОПКЕ «Опубликовать»
+
+**Публикуй (push в ветку `pages`) ТОЛЬКО когда юзер явно просит опубликовать.** Он нажимает кнопку **«Опубликовать»** вверху — тебе приходит сообщение вида «Опубликуй текущий проект…». САМ, без такой просьбы, в `pages` НИКОГДА не пушь — как бы хорошо сайт ни выглядел.
+
+Когда юзер попросил опубликовать:
+```bash
+git add -A
+git commit -m "publish"
+git push origin HEAD:pages
+```
+Затем **ОБЯЗАТЕЛЬНО** дай ссылку **жирно**:
+> 🎉 Готово! Твой сайт в интернете: **https://pages.git.vibe42.kz/DinaIbrai/<repo>/**
+
+и добавь: «Нажми Поделиться в панели предпросмотра — там ссылка и QR-код».
+
+---
+
+## ⚠️ ЖЕЛЕЗНЫЕ ПРАВИЛА (НЕ нарушать никогда)
+
+1. **Дефолт — статика (HTML + CSS + JS).** Сайты и лендинги собирай статикой, публикация через `pages`.
+2. **Бэкенд разрешён ТОЛЬКО через команду `run`** (раздел ниже). НИКОГДА не запускай серверы сам в шелле (`node server.js`, `npm start`, `python bot.py`) — шелл живёт на общем хосте: процесс убьют, а твоя сессия повиснет.
+3. **Никакой аутентификации / OAuth / JWT.**
+4. **Никакого Docker, nginx, sudo, системных настроек.**
+5. **Никаких `npm install` / `pip install` в шелле** — зависимости ставит `run` внутри контейнера юзера. Для лендингов Tailwind — только через CDN.
+6. **НИКОГДА `git init` в workspace root (`/srv/opencode/workspaces/users/DinaIbrai`)** — это папка-контейнер юзера, не репозиторий.
+
+---
+
+## ⚙️ БЭКЕНД-ПРОЕКТЫ (telegram-бот, API, динамика) — команда `run`
+
+Юзер хочет бота или приложение с сервером? Это МОЖНО. Не отговаривай и не подменяй лендингом-визиткой. Флоу:
+
+1. Пиши код в текущей папке проекта. Node: `package.json` (со `scripts.start`) + `server.js`; Python: `bot.py`/`main.py` + `requirements.txt`. Слушай порт `process.env.PORT || 3000`.
+2. Запусти командой **`run`** (просто `run` в шелле). Она сама поставит зависимости и запустит процесс в изолированном контейнере юзера (2 ГБ RAM). Первая установка может идти пару минут — предупреди юзера.
+3. Из вывода `run` возьми ссылку и дай юзеру **ЦЕЛИКОМ, включая `?t=...`**. Сам ссылку НЕ конструируй: нет вывода `run` — нет ссылки.
+4. Отладка: `run logs` (лог приложения), `run status`, `run stop`. Упало — читай `run logs`, чини, снова `run`.
+5. Процесс засыпает после ~20 минут простоя. Это нормально: файлы сохраняются, повторный `run` поднимает всё снова. Скажи юзеру об этом честно.
+6. **Telegram-бот:** только long-polling через **grammY** (готовый скелет — Рецепт T выше), НЕ вебхуки. Попроси у юзера токен от @BotFather, положи в `.env`, читай из `process.env` — токен НИКОГДА не коммить и не показывать в чате.
+7. Добавь в `.gitignore`: `.env`, `.vibe42-run.log`, `.vibe42-run.pid`, `node_modules/`.
+8. Вкладка Предпросмотр показывает только статические файлы — для бэкенда живая ссылка приходит из `run`, публикация в `pages` для бэкенда не нужна.
+9. **Команды `lotus` / `vibe42` / `run` доступны ТОЛЬКО в ТВОЁМ шелле (ИИ-сессии), НЕ внутри запущенного проекта.** Код бота/приложения крутится в изолированном контейнере, где этих команд НЕТ — вызов `lotus`/`vibe42` через `exec`/`child_process`/`subprocess` даст `command not found` и сломает бота. Данные из Лотуса/корп-сервисов внутри юзерского бота пока НЕ поддерживаются — не обещай их и не шелли туда, делай бота на том, что реально доступно (ИИ через `process.env.AI_*`, публичные API).
+
+### 🤖 ИИ внутри проекта юзера — БЕЗ ключей, автоматически
+Если бот/приложение юзера должен обращаться к ИИ — **НЕ проси у юзера никакой ключ** (ни OpenAI `sk-…`, ни из «Интеграции»). При запуске через `run` в окружении проекта УЖЕ есть свежий доступ — подставляется сам:
+- `process.env.AI_BASE_URL`, `process.env.AI_API_KEY`, `process.env.AI_MODEL` — уже в окружении, обновляются при каждом `run`.
+- Подключай любым OpenAI-SDK: `new OpenAI({ baseURL: process.env.AI_BASE_URL, apiKey: process.env.AI_API_KEY })`, модель `process.env.AI_MODEL`. Python — так же (`OpenAI(base_url=..., api_key=...)`).
+- **НЕ пиши `AI_*` в `.env` и НЕ спрашивай ключ у юзера** — они придут из окружения при `run`. Не хардкодь, не логируй. Если в `.env` уже что-то есть — не трогай, `run` всё равно перекроет свежим.
+- Ключ подставляется автоматически при `run` и живёт долго — просить его у юзера НЕ надо.
+
+**⚠️ ЖЕЛЕЗНОЕ ПРАВИЛО: сбой ИИ показывай честно.** Если вызов ИИ упал — покажи юзеру понятную ошибку («ИИ временно недоступен, попробуйте ещё раз»). **НИКОГДА не подменяй ответ ИИ самодельной заглушкой** (нарезкой текста, случайными фразами, «рыбой»): юзер получит мусор и будет думать, что это и есть работа ИИ, а причину никто не найдёт. Лучше явная ошибка, чем тихая подделка.
+
+### 🧠 Агент Alem (корпоративный ИИ-агент)
+**Alem** — корпоративная платформа КТ, где юзер сам создаёт, проверяет и публикует ИИ-агента под свою задачу. Опубликованного агента можно подключить к продукту, собранному в Vibe42, и вызывать как ИИ-функцию внутри продукта (чат, кнопка, после формы, шаг процесса, черновик/проверка/рекомендация). **Vibe42 НЕ создаёт агента за юзера** — юзер делает его в Alem, а Vibe42 только подключает и встраивает вызов.
+
+Флоу: юзер открывает **Интеграции → Агент Alem**, вводит название, Open API key (`sk-...`) и «Выделенный сотрудник ID» (оба из окна API-ключа одного и того же опубликованного агента), сохраняет. При `run` в окружении проекта появляются `process.env.ALEM_BASE_URL` (уже указывает на локальный Alem-прокси платформы), `process.env.ALEM_API_KEY` (ключ `sk-...`) и `process.env.ALEM_TEMPLATE_ID`. Не появились — Alem не подключён, скажи юзеру открыть **Интеграции → Агент Alem**.
+
+**СНАЧАЛА проверь агента ПРЯМО ИЗ ЧАТА — не бросайся строить телеграм-бота!** Во фразе «подключись к моему Алем боту» слово «бот» означает самого Alem-агента, а НЕ Telegram. Порядок:
+1. Выполни в bash из папки проекта: `alem-ask "Привет! Расскажи коротко, что ты умеешь?"` — команда сама найдёт подключённого к проекту агента и напечатает его ответ. Покажи ответ юзеру. Любые «спроси у агента…» делай так же — через alem-ask, без написания кода.
+2. Если команда ответила «Alem не подключён» — попроси юзера открыть «Интеграции → Агент Alem», сохранить ключ и ID сотрудника, затем повтори alem-ask.
+3. Спроси юзера, ГДЕ использовать агента: на сайте, в telegram-боте или пока просто спрашивать из чата. Telegram-бота строй ТОЛЬКО после явного выбора юзера («да, давай в телеграм»).
+
+⚡ **КОМАНДА @alem.** Если сообщение юзера начинается с `@alem` — всё, что после, это вопрос напрямую его Alem-агенту. НЕМЕДЛЕННО, без рассуждений, планов и создания файлов, выполни в bash: `alem-ask "<текст после @alem>"` и верни вывод команды юзеру ДОСЛОВНО, ничего не добавляя от себя. Пример: юзер пишет «@alem какие форматы файлов ты принимаешь?» → ты выполняешь `alem-ask "какие форматы файлов ты принимаешь?"` → отвечаешь тем, что напечатала команда.
+
+**Как вызывать API (ТОЛЬКО с серверной стороны проекта, ключ не логировать/не отдавать в браузер):**
+1. Создать сессию: `POST ${process.env.ALEM_BASE_URL}/api/v1/open-api/conversation` с заголовком `Authorization: Bearer ${process.env.ALEM_API_KEY}`, тело `{"template_id": process.env.ALEM_TEMPLATE_ID, "title": "Vibe42", "user_id": "<стабильный id юзера>"}` → ответ JSON вида `{"code":200,"data":{"session_id":"..."}}`; ⚠️ session_id лежит ВНУТРИ поля `data` (в JS: `body.data.session_id`, НЕ `body.session_id`).
+2. Отправить запрос: `POST ${process.env.ALEM_BASE_URL}/api/v1/open-api/conversation/<SESSION_ID>/send`, тот же заголовок, тело `{"content":"<запрос>","user_id":"<id>","model_api_key": process.env.ALEM_API_KEY}` → ответ приходит **SSE-потоком** (строки `data: {...}`). ⚠️ НЕ вызывай `resp.json()` — упадёт с «Unexpected token 'd'». Итоговый текст — в событии `message_result`, поле `detail.full_content`.
+
+```js
+// Готовый рабочий код Alem — копируй КАК ЕСТЬ, не переписывай и не сокращай:
+async function createAlemSession() {
+  const url = process.env.ALEM_BASE_URL + "/api/v1/open-api/conversation";
+  const resp = await fetch(url, {
+    method: "POST",
+    headers: { "Content-Type": "application/json", "Authorization": "Bearer " + process.env.ALEM_API_KEY },
+    body: JSON.stringify({ template_id: process.env.ALEM_TEMPLATE_ID, title: "Vibe42", user_id: "vibe42_user" })
+  });
+  if (!resp.ok) throw new Error("Alem create " + resp.status + ": " + (await resp.text()));
+  const body = await resp.json();
+  const sid = body && body.data && body.data.session_id; // session_id ВНУТРИ поля data!
+  if (!sid) throw new Error("Alem не вернул session_id: " + JSON.stringify(body).slice(0, 200));
+  return sid;
+}
+
+async function askAlem(sessionId, message) {
+  const url = process.env.ALEM_BASE_URL + "/api/v1/open-api/conversation/" + sessionId + "/send";
+  const resp = await fetch(url, {
+    method: "POST",
+    headers: { "Content-Type": "application/json", "Authorization": "Bearer " + process.env.ALEM_API_KEY },
+    body: JSON.stringify({ content: message, user_id: "vibe42_user", model_api_key: process.env.ALEM_API_KEY })
+  });
+  if (!resp.ok) throw new Error("Alem " + resp.status + ": " + (await resp.text()));
+  const raw = await resp.text(); // SSE-поток: resp.json() здесь СЛОМАЕТСЯ
+  let answer = null;
+  for (const line of raw.split("\n")) {
+    const s = line.trim();
+    if (!s.startsWith("data:")) continue;
+    const payload = s.slice(5).trim();
+    if (!payload || payload === "[DONE]") continue;
+    try {
+      const ev = JSON.parse(payload);
+      if (ev && ev.detail && typeof ev.detail.full_content === "string" && ev.detail.full_content) {
+        answer = ev.detail.full_content;
+      }
+    } catch (e) {}
+  }
+  return answer || "Нет ответа";
+}
+
+// Обычно нужно именно это: создать сессию и спросить.
+async function runAlem(prompt) {
+  return askAlem(await createAlemSession(), prompt);
+}
+```
+
+Этот код проверен вживую и работает — не изобретай свой разбор ответа.
+
+Ошибки: `403 OpenAPI key has no permission for this resource` — ключ и «Выделенный сотрудник ID» от РАЗНЫХ агентов, возьми оба из одного опубликованного агента; `model_api_key is required` — передай `model_api_key` в теле `send`; НЕ используй старые пути `/api/v1/published/...` — они больше не работают.
+
+Правила: используй только подключённого к ЭТОМУ проекту агента; ключ никогда не показывай в коде/логах/предпросмотре; рискованные действия от имени юзера — только по явному сценарию. Для создания агента направляй юзера на https://wiki.ai-kt.kz.
+
+### 📧 РЕЦЕПТ: бот, читающий почту юзера (Lotus)
+Юзер просит бота, который читает его письма — делай СТРОГО по шагам, порядок важен:
+
+**Шаг 1 — сперва подключение, потом код.** Ответь: «Сделаю! Сначала подключи почту: вверху **Интеграции → Лотус**, вставь токен, нажми «Подключить». Как подключишь — напиши «готово».» И ЖДИ подтверждения. НЕ пиши бота и НЕ запускай, пока юзер не подтвердил — иначе бот стартует без доступа к почте.
+
+**Шаг 2 — после «готово».** Спроси токен Telegram-бота у @BotFather (если ещё не давал), положи в `.env`. Затем напиши бота. Почту читай ТОЛЬКО HTTP-запросом к нашему прокси — команду `lotus` из кода НЕ вызывай (её в контейнере нет). Готовый паттерн `/inbox` (node, скопируй и адаптируй):
+```js
+async function inbox() {
+  if (!process.env.LOTUS_BASE_URL) return 'Почта не подключена — открой «Интеграции → Лотус».';
+  const res = await fetch(process.env.LOTUS_BASE_URL + '/emails?folder=inbox&count=5', {
+    headers: { Authorization: 'Bearer ' + process.env.LOTUS_API_KEY } });
+  const j = await res.json();
+  if (!j.ok) return 'Не удалось получить письма: ' + (j.error || 'ошибка');
+  return 'Последние письма:\n' + (j.data || []).slice(0,5).map(m =>
+    (m.read === false ? '🔵 ' : '') + (m.date||'').slice(0,10) +
+    (m.from?.displayName ? ' — ' + m.from.displayName : '') + ': ' + (m.subject||'(без темы)').trim()
+  ).join('\n');
+}
+```
+Другие маршруты того же прокси (заголовок тот же): `/email/<unid>` (одно письмо), `/folders`, `/whoami`, `/contacts?q=имя`. Только ЧТЕНИЕ. `LOTUS_API_KEY`/`LOTUS_BASE_URL` берутся ИЗ ОКРУЖЕНИЯ — токен у юзера текстом НЕ спрашивай и в код не хардкодь.
+
+**Шаг 3 — запуск.** `run`, дай юзеру имя бота, скажи «напиши боту /inbox». Если в логах `LOTUS_BASE_URL` пуст — значит Лотус не подключён: попроси подключить в «Интеграции» и запусти `run` ЗАНОВО (env подхватывается при запуске).
+
+---
+
+## 🏗 СТРОЙ ФАЗАМИ — план, красивый фронт, потом остальное
+
+**Шаг 0 — блюпринт.** Перед первой правкой напиши юзеру короткий план: 3-6 строк, какие фазы и какие файлы. Подтверждения НЕ жди — сразу строй.
+
+**Фаза 1 — ВСЕГДА красивый работающий фронт с мок-данными.** Свёрстанный index.html + style.css + script.js, данные захардкодь прямо в код (массив объектов). Фаза закончена = юзер открыл Предпросмотр и увидел КРАСИВУЮ работающую страницу. Не начинай бэкенд, пока фронт не смотрится достойно.
+
+**Фазы 2+ — по одной за раз:** бэкенд (server.js вместо мок-данных), интеграции, доп-страницы. После каждой фазы коротко скажи юзеру, что готово и что дальше.
+
+**Сколько фаз:** простая задача (визитка, лендинг, одна страница) = 1 фаза, НЕ раздувай. Сложная (приложение с данными/ботом) = 2-4. Больше 4 не планируй.
+
+**✅ ЧЕК-ЛИСТ СДАЧИ ФАЗЫ (обязателен, прогоняй молча перед «готово»):**
+1. Каждый созданный/правленный .js прогнан через `node --check <файл>` (bash). Ошибка — почини до сдачи.
+2. Фронт и бэк СОГЛАСОВАНЫ буквально: пути fetch совпадают с роутами server.js, имена полей JSON одинаковые с обеих сторон (открой оба файла и сверь глазами — несовпадение поля это самый частый твой баг).
+3. Каждый id/класс из script.js реально есть в index.html.
+4. В server.js путь запроса очищай от query: сравнивай `req.url.split("?")[0]`, а не весь req.url — иначе ссылка с параметрами отдаст 404.
+5. Если есть бэкенд — запусти `run` и ДОЧИТАЙ лог до конца: ошибка в логе = фаза не сдана. Если только статика — посмотри вкладку Предпросмотр.
+6. Никаких выдуманных CDN-адресов и библиотек: используй только то, что перечислено в рецептах ниже.
+
+## 📁 ТЫ УЖЕ ВНУТРИ ПАПКИ ПРОЕКТА — собирай сайт ЗДЕСЬ
+
+Твоя рабочая директория (cwd) — это **папка проекта юзера** (`.../users/<username>/<project>/`). Проект уже создан за тебя в тот момент, когда юзер написал идею на главной. Проверь: `pwd` — папка проекта, `ls` — там лежат AGENTS.md/design.md/README.md.
+
+**Собирай сайт ПРЯМО В ТЕКУЩЕЙ папке:** создавай `index.html`, `style.css`, `script.js` здесь же, в cwd.
+
+❌ **НЕ запускай `./new-project`.** ❌ **НЕ делай `cd` в другие папки / в корень воркспейса.** Если создашь новый проект или уйдёшь в корень — сайт окажется НЕ в том проекте, а юзер увидит пустой Предпросмотр своего проекта и спросит «а где сайт?». Именно так это ломается.
+
+❌ **НИКОГДА не пиши файлы по АБСОЛЮТНОМУ пути и не конструируй путь из названия проекта** (`/srv/.../<имя>/index.html`). Только ОТНОСИТЕЛЬНЫЕ пути в cwd: `index.html`, `data.json`, `./style.css`. Абсолютный/угаданный путь создаёт папку-двойник (особенно если в названии кириллица) → файл уходит мимо проекта, Предпросмотр пустой. Не уверен, где ты — сделай `pwd` и `ls`, а не угадывай.
+
+### Когда `./new-project` всё-таки нужен
+Только если юзер ЯВНО просит **отдельный НОВЫЙ проект** («создай ещё один проект», «сделай новый сайт отдельно») — и только тогда, когда в текущей папке реально есть скрипт `new-project` (значит ты в корне воркспейса). В обычном сценарии «сделай мне лендинг» — НЕ нужен, собирай в текущей папке.
+
+---
+
+## 🌐 Git и публикация
+
+**НЕТ GitHub.** Self-hosted git: **https://git.vibe42.kz**
+
+- Профиль юзера: https://git.vibe42.kz/DinaIbrai
+- Pages (живые лендинги): https://pages.git.vibe42.kz/DinaIbrai/<repo>/
+- Креды уже в `/srv/opencode/workspaces/users/DinaIbrai/.git-credentials` — git push/clone работают без пароля
+- **НЕ спрашивай юзера про GitHub URL / токен** — их не нужно
+
+### Опубликовать лендинг (ТОЛЬКО по кнопке «Опубликовать»)
+
+```bash
+git add -A
+git commit -m "site"
+git push origin HEAD:pages
+```
+
+Ветка **`pages`** (Caddy её обслуживает; `gh-pages` тоже работает как fallback). Push → лендинг доступен мгновенно. **Но пушь в `pages` только когда юзер попросил опубликовать (нажал кнопку). Пока не просил — коммить и пушь только в `main`, показывай через Предпросмотр.**
+
+**Если push отклонён («permission denied for writing» и т.п.)** — это проблема git-кредов, она чинится сама при перезаходе. Скажи юзеру ровно это: «Перезайди на платформу (выйди и войди) и нажми "Опубликовать" ещё раз». НИКОГДА не связывай ошибки git/публикации с Лотусом — Лотус это ТОЛЬКО корпоративная почта, к репозиториям и публикации он отношения не имеет. Не выдумывай причин, которых не видишь в выводе команды.
+
+---
+
+## 🔧 Когда что-то идёт не так
+
+- **Pages 404** → запушь ветку `pages` снова: `git push origin HEAD:pages -f`
+
+### ⚠️ Проекты с бэкендом (server.js / run) и статика — НЕ путай юзера
+Вкладка **Превью** и публикация в Pages показывают ТОЛЬКО статические файлы — server.js там НЕ работает: формы method=POST и запросы к твоему серверу будут мертвы. Поэтому:
+- Прежде чем переделывать работающий статический index.html на серверный рендер (форма POST, шаблоны из server.js) — ПРЕДУПРЕДИ юзера: «после этого Превью и Опубликовать перестанут показывать живую версию, рабочая ссылка будет только через run». Меняй только после его согласия.
+- Если проект уже с бэкендом: держи index.html статическим фронтом (разметка + fetch к API бэкенда), а не серверным шаблоном — тогда Превью хотя бы показывает актуальную вёрстку. Юзеру давай run-ссылку как основную и прямо говори, что «Опубликовать» выложит только статическую часть.
+- run-контейнер засыпает после ~20 минут простоя — ссылка перестанет открываться, это нормально: пусть юзер попросит тебя снова сделать `run`.
+- После существенных правок уже опубликованного сайта НАПОМНИ юзеру нажать «Опубликовать» ещё раз — иначе на сайте останется старая версия.
+- **Не дёргай Gitea API типа `/repos/.../pages`, `/settings/pages`, `/deploy_keys`** — их нет
+- **Не пытайся «настроить Pages через UI Gitea»** — Pages у нас работают только через push в ветку `pages`
+- Запуталось — сделай новый чистый проект через `./new-project NAME-v2`, перенеси туда работающий index.html
+
+---
+
+## ❌ Чего НЕ делать НИКОГДА
+
+- ❌ `git init` в workspace root
+- ❌ `npm install` с прод-зависимостями (express/mongoose/pg/prisma/next/nuxt)
+- ❌ Поднимать бэкенд там, где хватает статики (лендинг, визитка, презентация) — сверься с таблицей стека
+- ❌ Ставить прод-фреймворки (express / nest / next / django) — сервер только на `node:http`
+- ❌ Использовать `gh` CLI или GitHub API
+- ❌ Вызывать Gitea Pages-API (его нет)
+- ❌ Долгое отлаживание Pages — почти всегда решение «push HEAD:pages»
+- ❌ Просить юзера ввести токен/URL/пароль — всё уже настроено
+- ❌ Задавать юзеру 10 вопросов подряд (максимум 2-3 за раз)
+- ❌ **Публиковать сам (push в `pages`) без просьбы юзера / кнопки «Опубликовать»** — до публикации показывай результат только через Предпросмотр
+- ❌ **Запускать `./new-project` или уходить `cd` из текущей папки проекта** на обычный запрос «сделай сайт» — ты УЖЕ в папке проекта, собирай тут; иначе сайт уедет не в тот проект
+- ❌ Показывать юзеру голый код больше 1 раза — ему важен результат, а не как написано
+- ❌ Предлагать «давай сначала дизайн в Figma» — мы делаем сразу в HTML
+- ❌ Говорить «это сложно» — переформулируй в простое
+- ❌ Зависать в обсуждениях — сделай первый вариант грубо, потом итерируй
+
+---
+
+## 🎨 design.md + дизайн-система KT AI
+
+Рядом лежит `design.md` — **прочитай его перед первой строкой вёрстки**. В нём каркас `index.html`, классы блоков лендинга и токены дизайн-системы KT AI, которая уже лежит в проекте папкой `design-system/`.
+
+Правило простое: **весь UI собирается из классов и токенов ДС**. Свои цвета, шрифты и чужие CSS-фреймворки (Bootstrap, Tailwind, Material, Font Awesome, Google Fonts) — не подключаем: в ДС уже всё есть, включая шрифт Inter.
+
+Папку `design-system/` коммить вместе с проектом — иначе опубликованная на Pages страница останется без стилей.
diff --git a/design-system/AGENTS.md b/design-system/AGENTS.md
new file mode 100644
index 0000000..222f726
--- /dev/null
+++ b/design-system/AGENTS.md
@@ -0,0 +1,60 @@
+# AGENTS.md — применить дизайн-систему KT AI (инструкция для ИИ-агента)
+
+Это инструкция для ИИ-агента (Claude Code / Codex). **Если пользователь просит «примени эту дизайн-систему», «собери продукт по этой ДС», «используй KT AI DS» — прочитай этот файл ЦЕЛИКОМ и следуй ему.** Папка этой ДС далее — `DS/` (папка, где лежит этот файл).
+
+## Железное правило (Definition of Done)
+Экран продукта НЕ готов, пока он:
+1. построен на **ките/токенах KT AI** (не вёрстка с нуля);
+2. для списков / дашбордов / очередей / сравнений / чата — собран **через продуктовый контракт**, а не руками;
+3. прошёл **гейт**: `validate_product.py --strict` = `0/0` И проход по `DS/CHECKLIST.md` глазами.
+
+«Зелёный валидатор» ≠ «готово». **Не объявляй экран готовым без прохода CHECKLIST.**
+
+## ⚠️ Если в проекте УЖЕ есть экран/прототип (частая ошибка!)
+**Не «перекрашивай» старый экран — ПЕРЕСТРОЙ главный экран через контракт.** Подключение токенов к существующему кастому даёт «смешанный» результат: старая структура остаётся (10 фильтр-табов, 8–9 колонок, build/model-строки, «ИИ не разобрал»/«обрабатывается» в каждой строке, кастомные дропдауны/тогглы), меняются только цвета. **Это НЕ применённая ДС — это перекраска.**
+
+Правильно для главного экрана данных:
+1. собери `config.json` по контракту (`DS/docs/PRODUCT_CONTRACT.md`) из реальных данных проекта;
+2. отрендери `<KTAIShell><KTScreen contract={config}/></KTAIShell>`;
+3. **удали старый компонент экрана** — не патчь его. Старые tab-наборы, лишние колонки и кастомные контролы (build-строка, «ручной режим», «Таблица»-тоггл, дропдаун сортировки, ⟳-кнопки) НЕ переноси — их заменяет ДС.
+
+Не оставляй два «дизайна» рядом. Если экран не построен через контракт — он не прошёл п.2 Железного правила.
+
+## Шаг 1 — прочитай канон (в этом порядке)
+`DS/README.md` → `DS/docs/GOAL.md` → `DS/docs/PRINCIPLES.md` + `DS/docs/ELEVENLABS_DESIGN.md` (почему так) → `DS/docs/DESIGN.md` + `DS/COMPONENTS.md` (чем строить) → `DS/docs/PRODUCT_CONTRACT.md` + `DS/docs/ARCHETYPES.md` (контракт) → `DS/CHECKLIST.md` (гейт, по которому принимаешь).
+
+## Шаг 2 — выбери РАНТАЙМ под стек проекта (ДС двухрантаймовая!)
+Один контракт — два рантайма. **Сначала определи стек проекта, потом бери рантайм:**
+
+- **React / Next.js / npm → React-кит** (`DS/templates/kt-ai-shadcn/`). Установка (см. `DS/templates/kt-ai-shadcn/PROTOTYPING_WORKFLOW.md`): из папки кита `python3 -m http.server 4188`, в проекте `npx shadcn@latest add http://127.0.0.1:4188/r/kt-ai-starter.json`. Даёт токены/тему, типы, `KTScreen`+`KTAIShell`, иконки. Рендер: `<KTAIShell><KTScreen contract={config}/></KTAIShell>`.
+
+- **Vanilla JS / FastAPI / Flask / Django / PHP / любой не-React → HTML-рантайм** (`DS/templates/kt-ai-app-shell.html`). Это самодостаточный HTML/CSS/JS-app-shell, **гидрируется JSON-конфигом**: контракт кладётся в `<script id="kt-app-config" type="application/json">…</script>`, скрипт сам читает `CFG = JSON.parse(...)` и рендерит весь экран (очередь, KPI, drawer, темы). React/npm НЕ нужны.
+  - Серверная интеграция: бэкенд строит контракт-JSON из данных → **инжектит его в тег `#kt-app-config`** app-shell → отдаёт страницу. Логику инжекта можно взять из `DS/scripts/build_prototype.py` (он делает ровно это).
+  - CSS/спрайт/feedback.js инлайнятся в app-shell один раз (как делает `build_prototype.py`), дальше per-request меняется только конфиг.
+
+В обоих случаях источник правды — один и тот же `config.json` по `DS/docs/PRODUCT_CONTRACT.md`.
+
+## Шаг 3 — строй экраны через контракт
+- **Список / дашборд / очередь / сравнение / чат → собери `config.json`** по `DS/docs/PRODUCT_CONTRACT.md` (+ `DS/product.schema.json`), выбери архетип по `DS/docs/ARCHETYPES.md`. Отрендери выбранным рантаймом (React `<KTScreen>` или HTML-инжект конфига). Структура, поведение и стиль приходят разом — не верстаешь руками.
+- **Нестандартный экран → на компонентах/токенах** по `DS/docs/DESIGN.md` + `DS/COMPONENTS.md`.
+
+## Шаг 4 — гейт (обязателен на КАЖДОМ экране)
+- Есть контракт → `python3 DS/scripts/validate_product.py <config>.json --strict` → должно быть `0/0`.
+- Всегда → пройди `DS/CHECKLIST.md` (G0–G8) глазами в обеих темах и на узком экране.
+
+## Жёсткие правила (то, что чаще всего ломают)
+- Цвета/размеры — только `var(--kt-ai-*)`, **не сырой hex**. Значения правятся в `DS/tokens.json`.
+- **Никаких служебных строк в UI**: build/env/commit/model-строки (`build server-env-…`, `gemla-…`, `FP8…`), `fallback`, `JSON`, `prompt`, debug-формулировки.
+- **Первичных фильтр-табов ≤ 4 + «Все»** (закон Хика). 10 табов (`Срочные/Крупные/К проверке/Удержание/Эскалированы/…`) — это не ДС; оставь рабочий минимум, остальное в drawer/фильтр.
+- **Колонок мало и по делу** (обычно 5–6, не 8–9). **Колонка не может быть «одно и то же значение во всех строках»** — «ИИ не разобрал»/«обрабатывается» в каждой строке = убери или покажи реальный сигнал (релевантность/скоринг).
+- **Один сигнал-столбец**, не три (Статус + ИИ-вердикт + Балл — это дубль; сведи к статусу-пилюле + одному скор-числу).
+- **Даты** — `ДД.ММ.ГГГГ`, время `чч:мм`; не сырой ISO, без мусорных `00:00:00`/`09:00:00`.
+- **Дубли строк** — дедуп. **Один primary** на экран. **Статус — пилюлей**, не цветом текста. **Create-кнопки** с ведущим «+».
+- Только подтверждённые данные; ПДн маскированы; **никаких дисклеймеров/нравоучений** в UI.
+- Один фильтрующий поиск на экран; AI-кнопка Төре — в топбаре у поиска.
+
+## Чтобы применялось в КАЖДОЙ сессии автоматически
+Добавь в `CLAUDE.md` проекта пользователя одну строку:
+> UI собирается по дизайн-системе KT AI: следуй `design-system/AGENTS.md`. Экран не готов без `validate_product.py --strict` (0/0) и прохода `CHECKLIST.md`.
+
+Тогда правила в контексте каждой сессии Claude Code, без напоминаний.
diff --git a/design-system/CHECKLIST.md b/design-system/CHECKLIST.md
new file mode 100644
index 0000000..c9c7ba1
--- /dev/null
+++ b/design-system/CHECKLIST.md
@@ -0,0 +1,115 @@
+# KT AI — Definition of Done (единый гейт качества)
+
+**Это — единственный чек-лист системы.** Прогоняй его при ЛЮБОМ изменении UI, а не только при новом прототипе.
+Раньше чек-листы жили в трёх местах (`docs/PRINCIPLES.md`, `docs/DESIGN.md`, `docs/ELEVENLABS_DESIGN.md`) и расходились — теперь
+канон тут, остальные доки ссылаются сюда. «Почему так» — `docs/PRINCIPLES.md` + `docs/ELEVENLABS_DESIGN.md`; «чем строить» — `docs/DESIGN.md` + `COMPONENTS.md`.
+
+`[auto]` = проверяет `scripts/validate_product.py` или сборка (машина не забывает — это и есть «соблюдается каждый раз»).
+`[review]` = глазами/в showcase (машина пока не ловит; см. «Что нельзя автоматизировать» внизу).
+
+## Когда что прогонять
+
+| Момент | Что прогнать |
+|---|---|
+| **Новый продукт из материалов** | весь чек-лист (G0–G8); **G8 обязателен** — сверка с источником |
+| **Новая фича** | G7 (машинный гейт) + гейты затронутых поверхностей + «Красные флаги»; добавляет сущность/выход → ещё G8 |
+| **Правка существующего** | затронутый гейт + G0 (токены/темы) + «Красные флаги»; трогал оба рантайма → ещё G7-паритет |
+
+---
+
+## G0 · Токены и темы (фундамент)
+- [ ] `[review]` Нет сырых hex в продуктовом CSS/JSX — только `var(--kt-ai-*)` (декоративный orb-canvas — единственное намеренное исключение, помечено в коде).
+- [ ] `[review]` Геометрия не зависит от темы: темы меняют ТОЛЬКО цвет, не радиусы/отступы/размеры.
+- [ ] `[auto]` Контраст — `python3 scripts/build_tokens.py` (гейт падает и называет пары). Пороги: текст ≥7:1, приглушённый ≥4.5:1, фокус и заливка состояния ≥3:1. Раньше пункт стоял с меткой `[review]`, и три нарушения прожили несколько мажорных версий: 2,8:1 на кегле 11px глаз читает не как «нечитаемо», а как «тихо».
+- [ ] `[review]` Обе темы проверены переключателем в `showcase.html` — глазами проверяется соразмерность и иерархия, а не контраст.
+- [ ] `[auto]` Менял `tokens.json`/`kt-ai-components.css` → прогнал `python3 scripts/build_tokens.py` (+ `scripts/visual_check.mjs` при наличии chromium).
+- [ ] `[auto]` Статика адресуется `ktAsset()` (в HTML-рантайме — `ktAiAsset()`), а не путём от корня сайта. Под префиксом развёртывания (`/cons`) путь `/kt-ai-orb.js` уходит мимо приложения; ломается только на развёртывании, в корне домена всё работает. Гейт 18 в `doctor.py`.
+
+## G1 · Высота и иерархия
+- [ ] `[auto]` Один primary на зону (`scenario.control`); `[review]` кнопки названы глаголами действия, не «Да/ОК».
+- [ ] `[review]` Page-title 24–26px semibold БЕЗ лого + muted-подпись; лого живёт в сайдбаре.
+- [ ] `[auto]` KPI отвечают на вопрос пользователя на экране; на `view: operational` — без ROI/FTE/экономии (это management-view).
+- [ ] `[auto]` Лейблы коротко: filter ≤2 слов, status ≤4, header колонки ≤2–3; `[review]` детали — в drawer/help, не в лейбле.
+- [ ] `[review]` Размер/вес/цвет ведут глаз: title → секции → body → meta; один акцент на зону.
+- [ ] `[review]` KPI-плашка читается четырьмя уровнями сверху вниз: подпись → значение → `.hint` (знаменатель, доля, период) → `.note` (оговорка: чем число НЕ является). Значение идёт сразу под подписью и НЕ прижимается к низу; полоса выравнивает карточки по верху — иначе в соседних карточках с уточнением и без числа встают на разной высоте.
+- [ ] `[auto]` Три места для трёх разных текстов, и они не путаются: `banner` — из-за чего число соврёт (до чисел), `kpis[].note` — что число значит (у самого числа), `conclusion` — что из чисел следует (после таблицы). Валидатор предупреждает, когда баннер длиннее 200 знаков: это абзац до первого числа, и почти всегда там лежит чужой текст.
+- [ ] `[review]` Текста на экране столько, сколько нужно для решения. Поясняющая строка, оговорка и подзаголовок сперва пробуются как свойство самого элемента (подпись пилюли, подсказка у метки, название колонки) и живут рядом с ним, а не отдельной строкой над списком. **Строка, которая не меняется от данных, — кандидат на удаление**; если она нужна для честности (непроверенное правило, тестовые данные, пробел в данных), она остаётся, но переезжает к элементу.
+- [ ] `[review]` Ориентация: экран отвечает где я / куда пойти / что здесь / как выйти (крошка, активный nav, заголовок, Esc). Лейблы конкретны (nav по содержимому, не «зонтик»); контролу не нужен поясняющий лейбл.
+- [ ] `[auto]` Подпись сочетания стоит там, где сочетание работает, и называет клавишу этой машины (⌘K / Ctrl K). Подпись без обработчика — обещание, обработчик без подписи — незаявленная горячая клавиша; включаются одним полем. Гейт 19.
+- [ ] `[auto]` У подписи поля есть `for=` или обёртка `<label class="kt-ai-field">`. Подпись рядом с контролом выглядит подписью, но без связи диктор объявляет поле безымянным, а щелчок по подписи не ставит фокус. Гейт 22.
+- [ ] `[auto]` Кит показывает контракт целиком: `npm run kit:render` (гейт 23). Типы и гейты читают код и не ловят главное — когда рантайм молча не читает блок контракта. Проверка рендерит кит в строку и сверяет содержимое с контрактом.
+- [ ] `[auto]` Архетип реализован в том рантайме, где вы строите: `runtimes` в `archetypes/registry.json`. `status: stable` про рантайм не говорит. Гейт 21 + заметка валидатора.
+- [ ] `[auto]` id разметки не совпадают с id символов вшитого спрайта: спрайт стоит выше, и `getElementById` вернёт `<symbol>` — элемент останется мёртвым молча, без единой ошибки. Гейт 20.
+- [ ] `[review]` Кнопки create/«Новый X» начинаются с ведущего «+». Один фильтрующий поиск на экран (глобальная ⌘K-палитра и табличный фильтр — разные роли, но два одинаково фильтрующих поля — нет). AI-кнопка Төре — в топбаре рядом с поиском. Не добавляй input/селект, если прямой кнопки достаточно.
+
+## G2 · Язык ElevenLabs (эстетика и плотность)
+- [ ] `[review]` Структуру задают hairline-границы 1px, а не тени; тени — шёпот (карточки приподняты, не парят).
+- [ ] `[review]` Поверхности нейтральные (white/near-white/near-black); цвет — только статус/ошибка/акцент, не украшение.
+- [ ] `[review]` Статус = пилюля со скруглением `radius-tag` (5px) и тоном; число/текст остаются нейтральными (не цвет текста).
+- [ ] `[review]` Радиусы 8–12px для карточек/кнопок/инпутов; полный радиус — только pill/toggle/chip.
+- [ ] `[review]` Контент важнее хрома: сайдбар/топбар тонкие и тихие, рабочая область доминирует.
+- [ ] `[auto]` Ширина колонок — по содержимому (`colw`/`ktColWidth`), не «на глаз»; короткие колонки не растянуты, длинные не зажаты.
+- [ ] `[review]` Нет карточки-в-карточке (две рамки спорят за группировку).
+- [ ] `[review]` **Ритм блоков — из шкалы, и он группирует**: регионы экрана (шапка / баннер / содержимое) — `stack-group` (24); панель управления ближе к тому, чем управляет — `stack-block` (16); внутри группы (фильтры ↔ вкладки, карточка ↔ карточка) — `stack-tight` (12); интерьер карточки — `pad-card` (20); поля области и отрыв от топбара — `stack-region` (32). Выражается `kt-ai-v[data-gap]`; собственный `app-stack-*` в продукте — сигнал, что группировку обошли.
+- [ ] `[review]` **Проверка ритма**: пройди по вертикали и назови каждый зазор. Все числа разные (три и больше на отношение «блок ↔ блок») — фейл, читается как небрежность. **Все числа одинаковые — фейл ровно такой же**: экран плоский, группы не читаются. Чисел должно быть столько, сколько уровней вложенности.
+
+## G3 · Состояния и обратная связь
+- [ ] `[review]` Каждое действие даёт отклик ≤100мс (toast / смена статуса / состояние кнопки); лоадер на всём, что дольше 300мс — skeleton, не спиннер.
+- [ ] `[review]` Нарисованы empty / loading / error; пустота — осознанный empty-state («что здесь будет»), не голая белизна.
+- [ ] `[review]` Лестница состояний контрола: default → hover → active/selected → focus-visible → disabled; у инпута — focus + error.
+- [ ] `[review]` Микроинтеракция подтверждает результат (copy → чип «скопировано», не только hover).
+- [ ] `[review]` Движение: отклик на pointer-down (не на отпускании); появление от `scale(.95)`, не из ниоткуда; переходы прерываемы/обратимы; overlay растёт из триггера и уходит тем же путём; анимируются только `transform`/`opacity`. Подробно — `docs/DESIGN.md §Движение`.
+
+## G4 · Честность данных и копирайт
+- [ ] `[review]` Только подтверждённые материалами факты; цифр «с потолка» нет; ПДн маскированы (`ИИН •••4821`, без реальных ФИО).
+- [ ] `[auto]` Нет debug-языка генерации в UI (`fallback`, `модель вернула`, `JSON`, `prompt`, `shell`, `не проходит дизайн-систему`).
+- [ ] `[review]` Поля поиска пусты по умолчанию — не префилл произвольными примерами.
+- [ ] `[auto]` Статусы строк — только из объявленных в `statuses`; `scenario`/`drawer`/`chart` ссылаются на существующие ключи.
+- [ ] `[review]` AI-контент атрибутирован («Сгенерировано ИИ» / орб) там, где это генерация.
+- [ ] `[auto]` Без дисклеймеров и нравоучений в UI («это прототип», «данные иллюстративны», «AI не действует сам», «решение подтверждает человек») — решение показывают контролы, а не объяснения. `[review]` Лейблы-секции — нейтральные существительные, не лозунги капсом («Решение», не «РЕШЕНИЕ — ЗА ВАМИ»). Продукт-специфичный текст живёт в контракте (`scenario.aiSummary`), а НЕ зашит в shell.
+
+## G5 · Законы взаимодействия
+- [ ] `[review]` Выход из любого состояния: Esc / назад / закрытие работают; деструктив — глаголом + подтверждением, необратимое — вводом имени объекта.
+- [ ] `[auto]` Первичные фильтры ≤4 + «Все», только workflow-status (не confidence/risk-type/системы); `[review]` остальное — прогрессивным раскрытием.
+- [ ] `[review]` Прогрессивное раскрытие: детали в drawer/modal, редкие действия — в hover/popover/kebab, не вшиты в UI навсегда.
+- [ ] `[review]` Shell неприкосновенен: sidebar, topbar, theme-toggle, AI-кнопка Төре — системный контракт, не творческая зона.
+
+## G6 · Адаптивность и локализация
+- [ ] `[review]` <lg → icon-rail, <md → sidebar-drawer; на 360/390/393px нет горизонтального скролла (`documentElement.scrollWidth ≤ clientWidth`) и топбар влезает.
+- [ ] `[review]` **Сенсорная цель ≥44px на ≤768px.** Порог задаёт ДС: токен `--kt-ai-control-h-touch` и правило-порог в `kt-ai-components.css` (условие `(pointer: coarse), (max-width: 767.98px)`). Своими руками высоты не поднимай — проверь, что элемент попадает под правило: компоненты через классы `.kt-ai-*`, разметка кита — через `[data-kt-ai-kit]`. Осознанно меньший контрол помечается `data-kt-touch="off"`; молча — нельзя.
+- [ ] `[review]` Колонка не шире отведённого: у прямых детей сеток (`.kt-ai-cols` это делает сам) `min-width: 0`. Без него `1fr` = `minmax(auto,1fr)` и одна длинная строка распирает страницу — сворот в одну колонку это НЕ лечит.
+- [ ] `[review]` Длинные казахские строки (≈+20%) — truncate + tooltip; фикс-ширины под текст кнопок/чипов/пунктов запрещены.
+- [ ] `[auto]` Icon-only кнопка — с tooltip и aria-label (гейт 16 в `doctor.py`; `title` за имя не считается — диктор его не обязан читать). У кнопки-переключателя подпись зависит от состояния: «Свернуть меню» в свёрнутом виде — ложь.
+- [ ] `[review]` Кнопка, за которой слой, сообщает состояние: `aria-expanded`, `aria-haspopup`, `aria-controls`. Фокус виден с клавиатуры на всём пути.
+- [ ] `[review]` Модальный слой закрывается по Esc — через общий хук кита `useKTEscape`, а не своей копией слушателя: копий было две, и они успели разойтись (`window` против `document`), а два слоя Esc не имели вовсе.
+- [ ] `[review]` Учтены `prefers-reduced-motion` (обнуление длительностей), `prefers-contrast: more` (толще фокус/границы) и `prefers-reduced-transparency` (blur снят, фон плотный).
+
+## G7 · Контракт и паритет (машинный гейт)
+- [ ] `[auto]` `python3 scripts/validate_product.py "<config>.json" --strict` → `0 ошибок, 0 предупреждений`.
+- [ ] `[review]` HTML ↔ React выглядят и ведут себя идентично (если трогал оба рантайма) — один контракт, одно поведение.
+- [ ] `[auto]` Прототип собран `python3 scripts/build_prototype.py` — НЕ инлайнен руками.
+- [ ] `[auto]` Менял `DS/` → синхронизировал Töре + `integrity.test` без падений (0 failed; число тестов не фиксируем — оно растёт).
+- [ ] `[review]` Правил гейт в `doctor.py` → **сломай его намеренно снова** и убедись, что он падает. Одной проверки при написании мало: рефакторинг 5.9.1 молча вырезал тело гейта 16, и `doctor.py` остался зелёным.
+- [ ] `[auto]` Добавил компоненту рантайм-ресурс (`<script src="/…">`, спрайт, шрифт) → он лежит в бандле как `public/…`. Проверяет гейт 15 в `doctor.py`: компонент без своего файла собирается и типизируется чисто, а у потребителя даёт 404 и пустое место.
+
+## G8 · Соответствие источнику (сборка из материалов / Төре-интервью)
+Закрывает разрыв «UI ≠ то, что обещали материалы». Не про пиксели — про содержание. Обязателен, когда продукт собран из PRD/ТЗ или из интервью Төре.
+- [ ] `[review]` Есть **карта источника** (`source-map`): выписаны ВСЕ сущности, **выходные артефакты** (документы, которые продукт производит: ТС, отчёт, СЗ…), роли, сценарии (S-xx) и критерии приёмки (A-xx) из материалов.
+- [ ] `[review]` **Трассировка:** каждый пункт карты → UI-дом (nav-секция / поле или артефакт в drawer / явный «вне v1»). Правило: **представлен или осознанно отложен — никогда молча не выброшен.**
+- [ ] `[review]` Каждый **named output** из PRD (раздел «первая версия» / «данные» / «сценарии») имеет видимое место в UI — не зарыт в `_flags`.
+- [ ] `[review]` Роли из материалов отражены (кто решает, кто согласует, кто получает) — экран собран под пользователя, принимающего решение.
+- [ ] `[review]` Доменные термины (ТС, ОБ/БКВ, СЗ, ЕНС ТРУ…) — как первоклассные сущности/артефакты, а не обезличенный текст.
+
+---
+
+## Красные флаги (мгновенный фейл ревью)
+Лого в page-header · заголовок 30–32px bold (надо 24–26 semibold) · два тоггла сворачивания · гигантская пустота над/под контентом ·
+вертикальные сепараторы в таблице · статус сырым текстом/цветом вместо пилюли · сырой hex вместо `var(--kt-ai-*)` · карточка-в-карточке ·
+спиннер вместо skeleton · >1 primary в зоне · разнобой отбивок между блоками (три и больше значений на одно отношение) · один зазор на всё — плоский экран без групп · плотный экран, растянутый во всю ширину монитора (нет `content-table`-клампа) · цвет ради украшения · синий как заливка primary-кнопки · ROI/FTE на рабочем экране ·
+debug-язык генерации в UI · самодельные глифы вместо иконок спрайта · разная геометрия в темах ·
+дисклеймер/мета-копирайт («это прототип», «данные иллюстративны») · нравоучение про human-in-the-loop («AI не действует сам», «решение подтверждает человек») ·
+лозунг-лейбл капсом («РЕШЕНИЕ — ЗА ВАМИ») · продукт-специфичный текст зашит в shell вместо контракта · два одинаково фильтрующих поиска · кнопка create без ведущего «+».
+
+## Что нельзя автоматизировать (всегда `[review]`)
+Валидатор ловит структуру и честность контракта (статусы, один primary, ROI на operational, debug-язык, длину лейблов, иконки, chart, паритет схемы).
+Он НЕ видит пиксели: иерархию, ритм отступов, тени-vs-hairline, состояния hover/empty/error, паритет тем, адаптив. Это — обязательный глазами-проход в `showcase.html`/preview. «Зелёный валидатор» ≠ «прошло DoD».
diff --git a/design-system/COMPONENTS.md b/design-system/COMPONENTS.md
new file mode 100644
index 0000000..7ee13cb
--- /dev/null
+++ b/design-system/COMPONENTS.md
@@ -0,0 +1,593 @@
+# KT AI – нормативная анатомия компонентов
+
+Канон значений — `tokens.json`, канон правил — `docs/DESIGN.md`, этот файл — анатомия сложных паттернов.
+
+## App Shell
+
+Фиксированный левый sidebar + рабочая канва (grid `sidebar-width minmax(0,1fr)`).
+
+Структура sidebar сверху вниз:
+
+1. Brand-ряд: логотип KT AI 18–22px + подпись 13–15px.
+2. Основная навигация (Главная, Лента).
+3. Группы разделов по 3–5 пунктов (закон Миллера), секции разделены label.
+4. Утилиты внизу (настройки, тема, профиль).
+
+**Рейл (< 1024px).** Sidebar сжимается до 52px, и в него помещается только иконный ряд. Правило структурное, а не список классов: элемент с иконкой (`svg` или `img`) внутри остаётся и становится иконной кнопкой, элемент без иконки скрывается — показывать его в 52px нечем.
+
+Значит **любой текстовый блок, добавленный продуктом в sidebar, на ноутбуке с окном в половину экрана исчезнет**. Это осознанно: раньше такие блоки оставались и раскладывались в колонку букв поверх навигации.
+
+Нужно оставить элемент в рейле — `data-rail="keep"`. Тогда за то, что он влезает в 52px, отвечает продукт.
+
+**Ограничение правила.** Скрывается элемент, у которого иконки нет. Элемент, который иконку **содержит**, остаётся — вместе со всем своим текстом: `<a><svg/>Как это работает</a>` уцелеет целиком, потому что голый текстовый узел селектором не спрятать. Отсюда требование к разметке: **текст в сайдбаре всегда оборачивать в элемент** (`<span>`, `<strong>`), а не оставлять голым рядом с иконкой. Тогда обёртка попадёт под правило и скроется. Собственные части шелла это уже соблюдают.
+
+Проверка на 900px, которая ловит нарушение:
+
+```js
+[...document.querySelectorAll('.kt-ai-sidebar *')]
+  .filter(e => e.textContent.trim()
+            && e.getBoundingClientRect().width < 24
+            && getComputedStyle(e).display !== 'none').length === 0
+```
+
+Собственные части app-shell (например блок тура `.sb-tour`) закрывают рейл своим правилом: `kt-ai-components.css` лежит в `@layer`, а стили шелла беcслойные, и беcслойное правило побеждает слоёное независимо от специфичности.
+
+Три состояния отзывчивости – docs/DESIGN.md «Отзывчивость». Активный пункт: `bg-active` + 2px-акцент слева.
+
+## Поиск и command palette
+
+Топ-поиск – компактный command-вход: высота 28px, max-width 320px, placeholder короткий («Поиск…»), бейдж `⌘K` в `.kt-ai-kbd`. Открывает command palette поверх экрана (`.kt-ai-command-overlay`).
+
+## Карточки
+
+Карточки информационные, не декоративные. Использовать только когда элемент – повторяемый объект, стартовое действие, превью или поверхность modal/drawer.
+
+- v2.3: фон/рамка/тень – только через `card-bg / card-border / card-shadow` токены (dark: hairline + aurora-свечение; light: белая поверхность + тень). Радиус — `radius-3xl`, паддинг 12–14px.
+- Усиленное свечение hero/AI-поверхностей: `data-glow="strong"`.
+- Карточку в карточку не вкладывать.
+
+## Ряды
+
+Ряды – доминирующий паттерн каталогов (вместо крупных карточек).
+
+- Основная подпись 13px; метаданные 11–12px muted.
+- Иконка 16px слева (14px в плотных рядах).
+- Справа – счётчик, статус или скор; действия (`.actions`) видимы на hover/focus/selected.
+- Hover `bg-hover`, выбран `bg-active`. Зона клика – весь ряд.
+
+## Таблицы
+
+Таблица – для любого workflow с 5+ записями со статусом, владельцем, сроком или суммой.
+
+Принципы (research-backed):
+
+- Таблице – максимум полезной ширины (`content-table`); не заворачивать в карточку.
+- Колонки и дефолтная сортировка – от задачи пользователя, не от схемы БД.
+- Заголовки 1–2 слова; видимы только task-critical колонки, остальное – в detail/настройки колонок.
+- Один тип значения на колонку. Главная entity-колонка – максимум две строки: label + muted-метаданные.
+- Текст и даты – влево; суммы, скоры, счёт – вправо (sans + tabular-nums); заголовок выравнен со своими данными; центру – нет.
+- Лёгкие горизонтальные dividers; вертикальных колонок-сепараторов нет (ElevenLabs, тихо/воздушно); зебра – только в read-only числовых таблицах. Шапка на лёгком divider (не border-strong). Высоты рядов — `--kt-ai-table-row*`, значения в `tokens.json`. Чекбоксы первой колонки скрыты до hover ряда или выбора (не загромождают).
+- Hover ряда включён всегда (помогает сканировать), даже если ряд некликабелен.
+- Sticky header при вертикальном скролле; sticky первая колонка при горизонтальном (`.kt-ai-sticky-first`).
+- Row actions – только на hover/focus/selected (на touch – всегда); bulk-bar появляется после выбора 1+ рядов; дефолт – ноль выбранных.
+- Первый ряд не предвыбирать. Подсветка совпадений при активном поиске.
+- Пагинация/итог в футере; дефолт 25 строк; loading – skeleton-ряды; пусто – `.kt-ai-empty`.
+- Настройки пользователя (колонки, сортировка, фильтр) живут в течение сессии + «сбросить по умолчанию».
+
+Геометрия (v2.3): таблица по умолчанию frameless full-bleed (`data-framed="true"` – контейнер с рамкой); header sticky, 12px sentence-case medium fg-muted, hairline border-strong снизу; ячейки 12px, entity 13px/500; статус – rounded-rect тег (radius-tag); вертикальное выравнивание middle до 3 строк.
+
+Toolbar: высота ≥40px; слева – имя таблицы/saved view/счётчик, справа – фильтр, сортировка, колонки, экспорт (≤4 действий); iconбуттоны из спрайта; saved views скрыты, пока их меньше двух. Применённые фильтры – `.kt-ai-filterbar` под тулбаром.
+
+Mobile: скролл внутри контейнера, не страницы; первая колонка sticky; прячутся сначала вторичные колонки (источник, заказчик, владелец), потом суммы/сроки; футер компактный («1–25 из N»).
+
+Dashboard-паттерн: KPI-полоса над таблицей только если помогает пользователю принять следующее рабочее решение по рядам; одна таблица – главный объект; детали – в правом drawer.
+
+Operational dashboard copy:
+- Заголовок экрана – короткое имя рабочего объекта, 1-3 слова: `Очередь рисков`, `Реестр заявок`, `Проверка договоров`. Не использовать длинное описание процесса как H1/topbar title.
+- Subtitle объясняет scope одной короткой фразой, до 90 символов. Детали процесса, источники данных и ограничения – в drawer/help, не в H1.
+- KPI над таблицей показывают состояние работы пользователя: новые, требуют решения, риски, ждут документы, просрочено, закрыто сегодня, сумма риска или SLA. Не выводить экономию часов, FTE, ROI или тенге эффекта на пользовательский dashboard, если это не management/reporting view.
+- Деньги допустимы в KPI только когда это рабочий объект пользователя: `сумма риска`, `расхождение`, `к оплате`, `заблокировано`. `Экономия`, `эффект`, `ROI`, `FTE` – метрики проекта, а не основной рабочей очереди.
+- Фильтры над таблицей – только по workflow-status главного объекта, максимум 5 пунктов включая `Все`. Confidence, тип риска, источник данных и technical labels не попадают в primary filters по умолчанию.
+- Workflow-status, confidence и risk type – разные поля. Нельзя смешивать их в один набор `statuses`, иначе экран перегружает фильтры и ломает decision focus.
+- Labels короткие: фильтр до 2 слов, status-pill до 4 слов, table header до 2 слов. Длинная причина риска уходит в drawer или отдельную колонку `Расхождение` с коротким текстом.
+- Для process-owner экран должен показывать next action: что требует решения сегодня, что заблокировано, где риск, какой документ нужно дослать, что закрыто. Просто список документов без статуса работы – неполный dashboard.
+
+## Подтверждение опасных действий
+
+Три ступени по цене ошибки, а не по «важности»:
+
+| Что за действие | Чем подтверждается |
+|---|---|
+| Обратимое, но раздражающее | выполнить сразу + тост с «Отменить» (`.kt-ai-toast .action`) |
+| Деструктивное | модалка; кнопка — глаголом действия («Удалить агента»), не «Да» и не «ОК» |
+| Необратимое | ввод имени объекта |
+
+**Удержание кнопки («hold to delete») в систему не берём.** Разбор, чтобы к этому не возвращались:
+
+- **Недоступно с клавиатуры.** У удержания мыши нет клавиатурного эквивалента; накрутить удержание пробела можно, но это конфликтует со штатным «пробел нажимает кнопку» и остаётся неочевидным. Любая доступная реализация требует запасного пути — и тогда на одно действие приходится два механизма.
+- **Ничего не сообщает.** Модалка говорит, ЧТО удаляется, сколько записей и что от них зависит. Кольцо прогресса не говорит ничего — а в наших продуктах (закупки, договоры, инциденты) именно последствие и нужно видеть.
+- **Не открывается само.** Чтобы понять, что кнопку надо держать, надо сначала прочитать подпись.
+- **Ломается на тач-устройствах**, где долгое нажатие занято системным контекстным меню и выделением текста.
+
+Ниша, на которую он метит — «действие жалко закрывать модалкой» — у нас уже закрыта отменой в тосте, и закрыта лучше: ноль трения до действия и полное восстановление после.
+
+## Композер чата
+
+`.kt-ai-prompt-bar` — `textarea` + кнопка отправки. Над полем может стоять ряд пилюль навыков `.kt-ai-prompt-skills`:
+
+```html
+<div class="kt-ai-prompt-bar">
+  <div class="kt-ai-prompt-skills">
+    <span class="kt-ai-prompt-skill">Сверка документов<button aria-label="Убрать навык">×</button></span>
+  </div>
+  <textarea rows="1" placeholder="Спросите…"></textarea>
+  <button class="kt-ai-prompt-send">…</button>
+</div>
+```
+
+Выбранный навык — **объект, а не текст**: его нельзя случайно надкусить бэкспейсом, он удаляется целиком. Пустой ряд схлопывается и не занимает высоту.
+
+**Почему пилюли над полем, а не внутри строки.** Вставить невредактируемый элемент в середину текста можно только в `contenteditable`. Переписывать композер на `contenteditable` ради этого нельзя: ломаются отмена ввода, набор через IME, вставка из буфера, доступность и мобильные клавиатуры. Пилюли над полем дают то же свойство без единого из этих рисков.
+
+**Slash-команды.** Скрипт `kt-ai-composer.js` включается атрибутом `data-composer="true"`, список навыков — в `data-skills` (JSON: `id`, `label`, `hint`):
+
+- «/» в начале слова открывает меню, дальнейший набор фильтрует по названию и подсказке;
+- ↑ ↓ ходят по списку, Enter или Tab выбирают, Esc закрывает;
+- при выборе «/запрос» **убирается из текста** — навык теперь объект, а не строка;
+- крестик на пилюле снимает навык, Backspace в пустом поле снимает последний;
+- Enter без Shift отправляет: событие `composer:submit` с `{ text, skills }`.
+
+Меню открывается **над** полем: композер обычно стоит внизу экрана, и список, растущий вниз, уехал бы за край.
+
+**Каретка при вставке из меню.** Специального механизма не нужно: `textarea.selectionStart` переживает потерю фокуса, поэтому вставлять надо в `selectionStart`, а не в конец. Проверено измерением.
+
+## Кружок с номером
+
+Шаг мастера, позиция в списке, порядковый номер.
+
+```html
+<span class="kt-ai-num-badge">1</span>
+<span class="kt-ai-num-badge" data-state="current">3</span>
+<span class="kt-ai-num-badge" data-size="lg" data-tone="risk">8</span>
+```
+```tsx
+<KTNumBadge value={3} state="current" label="шаг 3 из 5" />
+```
+
+Состояния: по умолчанию (будущий), `done` (пройден — тише текущего, но не тусклее будущих), `current` (заливка: он один на экране и обязан находиться мгновенно). Тона `ok / warn / risk` — когда номер сам несёт оценку. Размеры `sm` 18px, обычный 22px, `lg` 28px.
+
+**Почему это не иконка.** Наши иконки штриховые (1.75 в сетке 24) и используются на 14–15px. Цифра штрихом внутри штриховой окружности на таком размере выходит 6–7px высотой при штрихе около 1px — просветы у 6, 8 и 9 схлопываются. Плюс набор иконок был бы конечным (1–9), а номера бывают двузначные. Номер рисуется текстом: любое число, чёткость на любом размере, цвет и состояния от токенов.
+
+Цифры моноширинные — в колонке номеров ряды не пляшут.
+
+Степпер (`.kt-ai-step-item .n`) — тот же кружок; отдельного определения у него нет, иначе они разъедутся.
+
+### Номер иконкой
+
+Когда номер стоит в ряду с другими иконками — `circleNumber0` … `circleNumber9`:
+
+```html
+<svg class="kt-icon"><use href="#circleNumber3"></use></svg>
+```
+```tsx
+<KTIcon name="circleNumber3" size={15} />
+```
+
+Набор взят из [Tabler Icons](https://tabler.io/icons) (MIT) и приведён к нашей сетке: радиус окружности 10 вместо 9, штрих 1.75 вместо 2 — чтобы в ряду с `check-circle` они были одного размера и веса.
+
+**Иконка или компонент.** Иконка — фиксированные 0–9 и один цвет, зато встаёт в любой поток иконок. Компонент `.kt-ai-num-badge` — любое число, включая двузначные, состояния и заливка активного. Нужен номер шага в мастере — компонент; нужен номер рядом с иконкой в строке — иконка.
+
+## Орб агента
+
+Монохромное точечное облако на canvas — индикатор того, что агент работает. Заменяет спиннер там, где ожидание содержательное, и стоит в кнопке помощника вместо подписи «AI».
+
+```html
+<canvas class="kt-ai-orb" data-state="thinking" style="width:20px;height:20px"></canvas>
+<script src="kt-ai-orb.js"></script>
+```
+```tsx
+import { KTAIOrb } from "kt-ai-design-system/kit";
+<KTAIOrb state="thinking" size={20} />
+```
+
+Состояния: `idle` (медленное дыхание), `thinking` (вращение), `listening` (пульс). Размеры — 20px в кнопке и строке, 64px как крупный индикатор.
+
+**Цвет не задаётся.** Точки рисуются `currentColor`, поэтому орб темизуется теми же токенами, что и текст рядом, и работает в обеих темах без единого правила про тему. Хотите тише — поставьте `color: var(--kt-ai-fg-faint)`.
+
+Рисование живёт в одном файле `kt-ai-orb.js` на оба рантайма: React-компонент его подключает, а не дублирует. Иначе HTML-превью и React-сборка разошлись бы в анимации — это запрещает гейт паритета G7.
+
+Из этого следует поставка: `kt-ai-orb.js` входит в бандл кита как `public/kt-ai-orb.js` — компонент запрашивает его у сайта по абсолютному пути. Без файла кнопка помощника рисует пустой кружок, и ни сборка, ни типы об этом не скажут: проверяет гейт 15 в `doctor.py`.
+
+Первый кадр рисуется синхронно, до `requestAnimationFrame`: в фоновой вкладке браузер rAF не вызывает, и орб оставался бы пустым прямоугольником. По той же причине при `prefers-reduced-motion` остаётся статичный кадр, а не пустота.
+
+Идея заимствована у [thinking-orbs](https://orbs.jakubantalik.com) (MIT). Сам пакет не подошёл: его сборка импортирует React на верхнем уровне, а HTML app-shell работает без React.
+
+## Плашка показателя
+
+Четыре уровня: подпись, значение, уточнение, сноска.
+
+```json
+{ "label": "Просрочено в июне", "value": "58", "hint": "из 171" }
+```
+```html
+<div class="kt-ai-kpi">
+  <span class="value">58</span><span class="label">Просрочено в июне</span>
+  <span class="hint">из 171</span>
+</div>
+```
+```tsx
+<KTKpiCard label="Просрочено в июне" value="58" hint="из 171" />
+```
+
+**Значение — само число, уточнение — знаменатель, доля или период.** Не «58 из 171» одной строкой: полоса перестаёт читаться как ряд величин, глаз ищет число, а находит фразу. Уточнение до 40 символов.
+
+**Значение идёт сразу за подписью, а не прижимается к низу карточки.** Иначе в соседних карточках — с уточнением и без — числа встают на разной высоте и кажутся разными по важности. Проверяется измерением: у всех плашек полосы `value` обязан быть на одной высоте.
+
+Уровень поддержан во всех трёх местах: поле `hint` в `product.schema.json`, вывод в HTML-рантайме и в `KTKpiCard`. Компонент рисуется классом `.kt-ai-kpi` в обоих рантаймах — своих утилит у React-версии нет, иначе правка в ДС до неё не доезжала бы.
+
+### Сноска: чем число НЕ является
+
+`hint` отвечает «из чего считано» и потому ограничен 40 знаками — снимать этот потолок нельзя, иначе полоса плиток перестанет быть полосой. Но у поля-источника бывает вторая правда: оно меряет не ровно то, чем показатель назван. «Ожидание в очереди» не отделяет автоприветствие бота от первого сообщения оператора — число верное, а работой человека не является. Это другой вопрос, и отвечает на него отдельное поле:
+
+```json
+{ "label": "Ожидание в очереди", "value": "00:41", "hint": "из 33 352 диалогов",
+  "note": "Поле выгрузки считает время до первого сообщения в чате, а им бывает автоприветствие бота. Число верное, но работой оператора оно не является." }
+```
+```html
+<span class="note">Поле выгрузки считает время до первого сообщения…</span>
+```
+```tsx
+<KTKpiCard label="Ожидание в очереди" value="00:41" hint="из 33 352 диалогов" note="Поле выгрузки считает…" />
+```
+
+**Потолка у сноски нет** — она не стоит в потоке полосы, её отбивает линия. **И она не прячется под клик.** Оговорка существует затем, чтобы число не прочитали неверно; спрятанное под клик читают не все — ровно как карточку строки, из-за чего оговорку и потребовалось ставить у плитки. По той же причине у неё цвет `fg-muted`, а не самый тихий `fg-faint`: 4,9:1 на кегле 11px — это «тихо» на грани нечитаемого, а сноску надо прочитать.
+
+Куда сноска НЕ идёт: в баннер. Баннер стоит над числами, и оговорки, собранные в него, дают абзац текста до первого числа (замеряли: 716 знаков на одном экране). Баннер предупреждает, из-за чего число соврёт; сноска объясняет, что число значит; вывод раздела — что из чисел следует. Три разных места.
+
+## Вывод раздела
+
+Последний блок экрана, после таблицы. Контракт: `conclusion: { title?, text }`, пустая строка в `text` делит абзацы.
+
+```html
+<section class="kt-ai-conclusion">
+  <span class="title">Что показывают эти числа</span>
+  <span class="text">Средняя считается только по ответившим…</span>
+  <span class="text">Смотреть стоит на долю дольше норматива…</span>
+</section>
+```
+
+**Это противовес баннера, а не его вариант.** Баннер стоит НАД числами — значит, читается до данных, и потому окрашен тоном: он предупреждает. Вывод стоит ПОСЛЕ данных и говорит, что из них следует: разбор смещения выборки, оговорка о методике, ответ на вопрос раздела. Цвета статуса у него нет — сигналить ему нечем; есть линия сверху («данные кончились, начинается их чтение») и мера строки 78ch, потому что вывод — сплошной текст, а не пары «подпись — значение».
+
+Рисуется одинаково во всех архетипах, кроме `conversational`: там контент владеет всей областью сам.
+
+## Статика под префиксом развёртывания
+
+Приложение живёт не только в корне домена. Под `/cons` файл `/kt-ai-orb.js`
+уходит в корень САЙТА и не находится: пропадают спрайт иконок, орб, подсказка
+диаграммы и режим отзыва — тихо, только на развёртывании.
+
+```tsx
+import { ktAsset, ktSetBasePath } from "kt-ai-design-system/kit";
+
+ktSetBasePath("/cons");            // явно, до первого рендера
+<img src={ktAsset("/img/shema.png")} alt="" />
+fetch(ktAsset("/api/proposals"));  // свои маршруты ломаются так же
+```
+
+Префикс — свойство развёртывания, а не аргумент вызова, поэтому задаётся один
+раз: `ktSetBasePath()` → `process.env.NEXT_PUBLIC_BASE_PATH` → атрибут
+`<html data-kt-ai-base>` → пусто. Порядок и почему он такой — `docs/SETUP.md`.
+
+В HTML-рантайме то же самое даёт `window.ktAiAsset("kt-ai-orb.js")`, а префикс
+приходит атрибутом на `<html>`. Теги статики там пишет загрузчик, а не
+разметка: адрес уже разобранного `<link>` изменить нельзя — браузер начинает
+грузить его сразу.
+
+Гейт 18 (`doctor.py`) считает путь от корня сайта мимо `ktAsset()` ошибкой
+сборки ДС — в обоих рантаймах.
+
+## Чарты
+
+Высота 190–220px; bar 20–28px, радиус 2px; подписи значений 11px mono muted. Остальные правила – docs/DESIGN.md «Чарты».
+
+## Счётчик в пункте меню
+
+Одно значение — как раньше, приглушённым тоном:
+
+```tsx
+{ label: "Проекты", icon: "lots", count: "12" }
+```
+
+Прогресс — пара «всего / сделано». «Сделано» рисуется тоном `ok`, и по пункту меню видно не только объём работы, но и продвижение:
+
+```tsx
+{ label: "Спецификации", icon: "file", count: { value: 11, done: 5 } }
+```
+```html
+<span class="kt-ai-count-split">11<span class="sep">/</span><span class="done">5</span></span>
+```
+
+Одним цветом «11/5» читается как одно число с косой чертой — именно поэтому продукты подставляли вместо счётчика свою строку. Класс `.kt-ai-count-split` не привязан к меню: пара «всего/сделано» уместна и во вкладке, и в заголовке секции.
+
+Поле `nav[].count` в продуктовом контракте — устаревшее и одночисловое; пара живёт в API кита, а не в контракте.
+
+## Поиск в шапке
+
+Два размера и один переключатель подсказки сочетания.
+
+```tsx
+<KTAIShell search={{ items, placeholder: "Договор, филиал…", compact: true }}>
+```
+```json
+"search": { "placeholder": "Договор, филиал…", "compact": true }
+```
+```html
+<div class="kt-ai-search-field" data-shortcut="true">
+  <input class="kt-ai-search" placeholder="Поиск…" title="Поиск (⌘K)">
+  <kbd class="kt-ai-kbd">⌘K</kbd>
+</div>
+```
+
+`compact` — 176px вместо 320px: шапка отдаёт место остальному. Бейдж в
+компактном поле не показывается — это ширина запроса, а не запроса с подписью;
+сочетание при этом работает и названо в `title`.
+
+**Сочетание и его подпись включаются ОДНИМ полем** (`shortcut`). Подпись без
+обработчика — обещание (правило 9d); обработчик без подписи — незаявленная
+горячая клавиша, которую пользователь находит случайно. Порознь их выключать
+нечем и незачем.
+
+**Подпись называет клавишу этой машины:** `⌘K` на Apple, `Ctrl K` на остальных.
+Обработчик слушает и `meta`, и `ctrl` — значит подпись «⌘K» на Windows была не
+сокращением, а неверным именем работающей клавиши. В React подпись считается
+после монтирования: на сервере `navigator` нет, и вычисленная там подпись
+разошлась бы с клиентской (гидрация с предупреждением).
+
+**Подсказка сочетания — элемент, а не текст в placeholder.** Пока «⌘K» стояло
+строкой внутри «Поиск…  ⌘K», её нельзя было ни убрать, ни перевести, ни
+отличить от собственно подсказки поля. Гейт 19 держит это правило.
+
+Голый `.kt-ai-search` без обёртки продолжает работать — им набраны фильтры над
+таблицами, у которых никакого сочетания нет.
+
+## Группа разделов в меню
+
+Тринадцать пунктов подряд читаются как список ссылок, а не как устройство продукта. Необязательное поле `group` собирает идущие подряд пункты под общим заголовком:
+
+```json
+"nav": [
+  { "label": "Обзор",        "group": "Поток" },
+  { "label": "Нагрузка",     "group": "Поток" },
+  { "label": "Сверки",       "group": "Достоверность" },
+  { "label": "Контроль Alem","group": "Достоверность" }
+]
+```
+
+**Заголовок — не пункт.** Он не кликается, не получает фокус и в нумерации разделов не участвует: переход идёт по индексу пункта в `nav`, поэтому `banner.actionNav` и `S.nav(i)` считают ровно то же, что считали без групп. Пункты без `group` идут списком, как раньше.
+
+Заголовок собирает пункты, идущие ПОДРЯД. Разнесённые по списку пункты с одним значением дадут два одинаковых заголовка — валидатор об этом предупреждает, а рантайм не переставляет разделы: их порядок принадлежит продукту.
+
+В полосе значков (832–1023px) слов показать негде, и заголовок становится тем, чем является по сути, — тонким разделителем между группами. Ниже 832px sidebar превращается в выдвижную панель во всю ширину, и заголовки снова показываются словами.
+
+Сворачивания групп нет намеренно: свёрнутая группа прячет разделы, которые продукт обязан показывать, — в том числе пустые.
+
+## Стек, который группирует
+
+`.kt-ai-v` — вертикальный стек вместо `marginTop` у каждого потомка. Кроме сырых ступеней (`xs/sm/lg/xl` → `space-*`) у него есть **ступени ритма**, и на экране пользоваться нужно именно ими:
+
+| `data-gap` | | Что этим сказано |
+|---|---|---|
+| `tight` | 12 | это одна вещь: фильтры и их вкладки, карточка ↔ карточка в списке |
+| `block` | 16 | панель управления и то, чем она управляет; блоки одного региона |
+| `group` | 24 | регионы экрана: шапка ↔ баннер ↔ содержимое |
+| `region` | 32 | поля рабочей области, отрыв от топбара |
+
+Ступени — у `.kt-ai-h-stack` тоже (`tight`, `block`).
+
+**Один зазор на весь корневой столбец — самая частая ошибка компоновки.** Тогда панель фильтров, её вкладки и карточки списка расходятся на одно и то же расстояние: групп на экране нет, есть столбец одинаково далёких полос. Вкладывай стек в стек — регионы снаружи, группа внутри:
+
+```html
+<div class="kt-ai-v" data-gap="group">      <!-- регионы: 24 -->
+  <div class="kt-ai-kpi-strip" data-cards="true">…</div>
+  <div class="kt-ai-v" data-gap="block">    <!-- панель + её содержимое: 16 -->
+    <div class="kt-ai-toolbar">             <!-- фильтры и вкладки — одна вещь: 12 -->
+      <div class="kt-ai-filterbar">…</div>
+      <div class="kt-ai-filterbar">…</div>
+    </div>
+    <div class="kt-ai-v" data-gap="tight">…карточки списка…</div>
+  </div>
+</div>
+```
+
+`.kt-ai-toolbar` — та же ступень `tight`, названная по роли: панель шага. Отдельный класс, потому что панель повторяется на каждом экране-очереди, и без имени её собирали своей обёрткой в каждом продукте.
+
+**Вертикальный `padding` `.kt-ai-filterbar` внутри стека снимается** (`.kt-ai-v > .kt-ai-filterbar`, `.kt-ai-toolbar > .kt-ai-filterbar`): иначе собственные 6px бара складывались бы со ступенью и `tight` давал бы на экране 24 вместо 12 — ступень называла бы одно, а показывала другое. Вне стека padding остаётся: там он отделяет бар от соседнего содержимого.
+
+Свой `app-stack-*` или своя обёртка панели в продукте — сигнал, что группировку не выразили, а обошли.
+
+## Ряд, которому запрещено переноситься
+
+`.kt-ai-h-stack` по умолчанию переносится. Запрет переноса — два разных значения, и разница не косметическая:
+
+| | |
+|---|---|
+| `data-nowrap="true"` | ряд не переносится. Что делать с переполнением — забота автора. В узкой колонке такой ряд выходит за родителя и толкает горизонтальную прокрутку **всей страницы** |
+| `data-nowrap="scroll"` | ряд не переносится и прокручивает себя сам |
+
+Почему `true` не сделали прокручиваемым молча: `overflow-x: auto` по спецификации вынуждает `overflow-y` стать `auto` тоже — ряд начинает обрезать всё, что вылезает вверх и вниз: меню, поповер, подсказку, кольцо фокуса. Ряд с кебаб-кнопкой сломался бы, и виновника было бы не найти. Поэтому выбор явный и по имени.
+
+Прокрутка широкой **таблицы** — не этот случай: ей занимается `.kt-ai-table-wrap`.
+
+## Сенсорная цель
+
+На ширине ≤768px (или при `pointer: coarse`) ни один интерактивный элемент не ниже **44px** — минимальной цели, в которую попадают пальцем. Порог хранится в одном месте, токене `--kt-ai-control-h-touch`, и раздаётся правилом в конце `kt-ai-components.css`.
+
+Своими руками высоты поднимать не нужно — нужно попасть под правило:
+
+- компоненты ДС — через классы `.kt-ai-*` (высота приходит из `--kt-ai-control-h-*`, которые на сенсорной ширине сами становятся 44px);
+- разметка React-кита — через `[data-kt-ai-kit]`, метку поддерева, которую ставит `KTAIShell`: кит размечен утилитами Tailwind, и порог на каждой из ~70 кнопок означал бы 70 мест, где его можно забыть.
+
+Контрол, который обязан быть меньше, помечается `data-kt-touch="off"` — явным отказом. Молча меньше быть нельзя: цена промаха по «Принять»/«Отклонить» — чужое решение.
+
+Ширина при этом остаётся по содержимому: растягивать пилюли фильтра по горизонтали значит ломать плотность. Квадратную цель (иконка, чекбокс) правило задаёт отдельно.
+
+## Рама приложения: контрол появляется вместе со смыслом
+
+`KTAIShell` не рисует того, что не умеет. Кнопки поиска и профиля появляются, только когда продукт дал им содержание, — иначе их нет:
+
+```tsx
+<KTAIShell
+  productName="Консолидация закупок"
+  search={{ items: команды, placeholder: "Найти проект", onQueryChange: искать }}
+  user={{ name: "Ержан Асанов", email: "e@kt.kz" }}
+  userMenu={[{ label: "Настройки", onSelect: открытьНастройки }]}
+  onSignOut={выйти}
+  notifications={[{ text: "Запуск завершён", time: "10:24", unread: true, onSelect: открыть }]}
+  showTourCard={false}
+/>
+```
+
+Почему так, а не «покажем, потом подключим»: кит вшивал три собственных пункта палитры и меню профиля из четырёх строк — ни у одной не было обработчика. Продукт починить раму не может, он может только заклеить её своим `display: none`, и оба продукта так и сделали (заявка DS-005). Правило компоновки 9d говорит прямо: сломанный или декоративный контрол показывать нельзя. Проверяет гейт 17.
+
+Аватар берёт инициалы из имени (`ktInitials`), уведомление становится кнопкой только при `onSelect`, «перейти» в «Активности» — только при `href`/`onSelect`.
+
+**Помощник — по тому же правилу, с 6.8.0.** Он был единственным исключением:
+кнопка рисовалась всегда и била в `/api/ai/chat` — маршрут-заглушку из бандла
+ДС, отвечавшую текстом для разработчика. Специалист закупок читал «Mock AI
+response… Подключите реальный LLM provider», а продукт прятал кнопку своим CSS
+— ровно то, что канон себе уже запретил.
+
+```tsx
+// отвечает маршрут продукта
+<KTAIShell assistant={{ apiPath: ktAsset("/api/ai/chat"), suggestions: ["Что изменилось?"] }} … />
+
+// отвечает контракт — как в HTML-рантайме, сети не нужно
+<KTAIShell assistant={{ answers: { "Почему флаг?": "Тариф ниже SAP." }, fallback: "Ответа пока нет." }} … />
+```
+
+Без пропа `assistant` кнопки помощника нет. Пропы `aiContext` и `aiSuggestions`
+сняты: ни один из них не говорил, что помощник умеет отвечать. `KTScreen`
+собирает `assistant` из блока `ai` контракта сам — экран из контракта получает
+работающего помощника, а не заглушку.
+
+Клиент принимает и `reply`, и `answer`: маршрут в бандле отдавал `answer`, а
+кит читал только `reply` — помощник не показал бы ответ собственной заглушки ни
+разу.
+
+## Раскрытие без JS
+
+`.kt-ai-disclosure` — на div-ах и требует скрипта. Серверной странице нужен нативный `<details>`, состояние которого хранит браузер:
+
+```html
+<details class="kt-ai-details">
+  <summary>Подробности обработки<svg class="kt-icon kt-icon-sm kt-ai-details-chevron">…</svg></summary>
+  <div>Прочитано 1 284 строки, пригодных 1 191.</div>
+</details>
+```
+
+Маркер ОС погашен в обеих записях (`::marker` и `::-webkit-details-marker`), шеврон крутится трансформом. Одиночный `<summary>` внутри оболочки тоже получает `cursor: pointer` — курсор единственный признак, по которому видно, что строка раскрывается. Оба продукта написали это себе сами, каждый по-своему; теперь это канон.
+
+## Подвал действий боковой панели
+
+```tsx
+<KTRightDrawer title="Позиция 42" actions={<><button className="kt-ai-btn" data-variant="primary">Принять</button><button className="kt-ai-btn">Отклонить</button></>} … />
+```
+
+`.kt-ai-drawer-actions` липнет ко дну панели: разбор длинный, а решение принимают внизу — без этого «Принять» и «Отклонить» уезжают за экран и специалист скроллит обратно на каждой карточке.
+
+## Подсказка значения на диаграмме
+
+Столбец, точка или сегмент показывает своё число при наведении, с клавиатуры и по касанию:
+
+```html
+<div class="cc-bar" tabindex="0" data-kt-tip='{"title":"14 мая 2026, четверг","rows":[{"label":"Диалогов","value":"1 284"},{"label":"Доля периода","value":"3,9%"}]}'></div>
+<div class="cc-bar" tabindex="0" data-kt-tip="15.05.2026: 948"></div>
+```
+```tsx
+{ label: "14.05.2026", value: 1284, hint: { title: "14 мая 2026, четверг", rows: [{ label: "Диалогов", value: "1 284" }] } }
+```
+
+**Числа даёт продукт.** `hint` уходит в разметку как есть: рантайм ничего не форматирует и не пересчитывает. Сервер и браузер округляют по-разному, и разошедшийся формат — это разошедшееся число. Без `hint` показывается `label: value` — то же, что показывал нативный `title`.
+
+Почему не `title`: он появляется через секунду, рисуется средствами ОС (чужой шрифт, ни одного токена, в тёмной теме — вставка из чужого продукта), недоступен с клавиатуры, не читается диктором, на планшете не показывается вовсе и умеет одну строку. Почему не `.kt-ai-tooltip`: та однострочная и у края карточки обрезается.
+
+| | |
+|---|---|
+| марка | любой элемент с `data-kt-tip` — столбец, точка SVG, сегмент donut, клетка будущей тепловой карты |
+| появление | сразу, без паузы; привязано к марке, а не к курсору |
+| край | подсказка разворачивается внутрь и не обрезается |
+| клавиатура | `tabindex="0"`, показ по фокусу, `Esc` убирает НЕ снимая фокус |
+| диктор | `role="tooltip"` + `aria-describedby` на марке |
+| тач | касание показывает, касание вне — убирает |
+| строк | заголовок + до трёх пар; значения справа, `tabular-nums` |
+| перерисовка | переживает: слушатели делегированы на `document`, не на марки |
+
+Рисование — `kt-ai-chart-tip.js`, один файл на оба рантайма (как орб). В бандле кита лежит как `public/kt-ai-chart-tip.js`; гейт 15 следит, чтобы доехал.
+
+## Ширина свободного экрана
+
+```json
+{ "width": "full" }   // общая ширина продукта
+{ "width": "reading" } // мера чтения сплошного текста, ~720px
+```
+
+Без поля ширину определяют типы секций: экран только из текстовых — `reading`, любой другой — `full`. **Секция `fields` считается НЕ текстом**: пары «подпись — значение» и таблица критериев на 720px читаются хуже, чем на общей ширине, а заголовок экрана всё равно идёт во всю ширину — экран выглядел съехавшим к центру.
+
+Поле нужно, чтобы продукт называл ширину сам, а не подбирал типы секций ради неё.
+
+## Чипы и segmented
+
+Чип (v2.3, Attio): rounded-rect `radius-tag` (5px), высота 20–24px, паддинг 8–10px, шрифт 11–12px, фон chip-токены. Segmented: сегмент 28px, активный – `bg-active` + `fg`.
+
+## Drawer
+
+Правый drawer для деталей с сохранением контекста списка.
+
+- Ширина 420–560px (720px для сравнения evidence); < md – full-screen.
+- Header 48px: заголовок + крестик справа сверху; закрытие – Esc и клик мимо.
+
+## v3.6
+
+| Класс | Что это | Референс |
+|---|---|---|
+| `.kt-ai-slider` (+`.kt-ai-slider-row` с `.ends`) | слайдер настройки на `input[type=range]` (Speed/Stability) | ElevenLabs Settings-панель |
+| `.kt-ai-cols` | адаптивный двухколонник: складывается в одну колонку <720px (wizard/inbox/copilot). Прямым детям сам ставит `min-width: 0` — без этого `1fr` (= `minmax(auto,1fr)`) растягивается под содержимое и на телефоне даёт горизонтальную прокрутку страницы | — |
+| `.kt-ai-row-hover` / `.kt-ai-hover-lift` | hover-обратная связь рядов и кликабельных карточек | ElevenLabs rows |
+
+---
+
+## Компоновка экрана
+
+Держать прототипы визуально консистентными и полезными разработчикам без тяжёлого процесса.
+
+### Правила
+
+1. Один главный рабочий объект на экран. В табличных продуктах главный объект – таблица.
+2. Не вкладывать карточки в карточки. Вторичные детали – ряды, dividers или drawer.
+3. Шапка приложения компактная. Никаких лендинг-hero внутри операционных инструментов.
+4. KPI – тихая метрик-полоса; для кабинета/дашборда с 2-4 главными метриками допустима сетка стат-карточек (`data-cards="true"`).
+5. Фильтры – в одном тулбаре непосредственно над таблицей; применённые – filter-chips под ним.
+6. Таблица идёт раньше вспомогательных панелей (статусы, фоновые задачи).
+7. Действия ряда тихие: появляются на hover или при выборе (на touch – видимы всегда).
+8. Детали открываются в правом drawer, не на новой странице.
+9. Точка входа AI не конкурирует с таблицей: кнопка-орб Төре в топбаре рядом с поиском (не плавающий FAB).
+9a. Главное действие создания – primary-кнопка вверху sidebar под брендом («Новый …» от product.entity); мастер создания (этапы процесса + загрузка документов) – в modal. Этапы/таймлайн НЕ выносить на главный список – их место в мастере и в деталях записи.
+9b. (ElevenLabs) Топбар слева: панель-toggle (свернуть sidebar) + breadcrumb с именем текущего раздела (мелко, muted). Контент: hero-заголовок раздела (text-2xl semibold — 24px; text-3xl/bold это красный флаг DoD) + подпись-назначение слева, главное действие справа (как «New order» в ElevenLabs); лого только в sidebar. Воздух между топбаром и заголовком — `stack-region` (32px), дальше блоки экрана идут через `stack-group` (24px). Имя продукта живёт в sidebar, имя раздела — в breadcrumb и hero (это паттерн ElevenLabs, не дубль двух больших заголовков).
+9c. Boilerplate обязателен для shell: sidebar, topbar, theme toggle и AI-кнопка Төре. Эти элементы не перерисовывать и не заменять. Главная рабочая область проектируется под задачу процесса.
+9c1. Для рабочих очередей, реестров и консолидации закупок default – classic app-shell: таблица возможностей, детали в правом drawer, короткие статусы и одно primary-действие. Custom workspace используется только если таблица + drawer не решают основную работу пользователя.
+9d. Если в прототипе показаны theme toggle, поиск, AI-кнопка или основные action-кнопки, они должны быть интерактивными в рамках прототипа. Нельзя показывать сломанные или декоративные controls.
+9e. Поле поиска по умолчанию пустое. Не подставлять случайный пример вроде названия товара, если пользователь прямо не выбрал этот поиск.
+9f. В операционном экране консолидации допустимы метрики, которые помогают принять решение: сколько ТС обработано, сколько имеют потенциал консолидации, какой предварительный потенциал экономии в тенге. Это не project ROI, а рабочие числа для приоритизации.
+9g. В UI запрещены служебные формулировки генерации: `модель вернула`, `fallback`, `не проходит дизайн-систему`, `shell`, `JSON`, `prompt`. Пользователь видит продуктовый язык, а не внутренний процесс сборки.
+10. Горизонтальный скролл на мобильных – только внутри контейнера таблицы.
+
+### Порядок страницы по умолчанию
+
+1. Shell: sidebar и топбар (glass, `.kt-ai-topbar`).
+2. Компактный заголовок страницы.
+3. Рабочая область под конкретный процесс: таблица, матрица, карточка возможности, сравнение источников или другой подходящий формат.
+4. Метрики и фильтры – только если помогают выполнить текущую работу пользователя.
+5. Вспомогательные статус-ряды.
+6. Второстепенные панели.
+7. Вывод раздела (`.kt-ai-conclusion`) — последним блоком, после таблицы.
+8. Drawer, toast, AI-кнопка.
diff --git a/design-system/LICENSE b/design-system/LICENSE
new file mode 100644
index 0000000..2168c4d
--- /dev/null
+++ b/design-system/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Yerzhan Assanov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/design-system/README.md b/design-system/README.md
new file mode 100644
index 0000000..b487704
--- /dev/null
+++ b/design-system/README.md
@@ -0,0 +1,77 @@
+# KT AI Design System
+
+Дизайн-система для внутренних продуктов ИИ-команды КТ. Прототип и продакшн-фронтенд — один и тот же код: продуктовый контракт (`config.json`) рендерится либо React-китом, либо самодостаточным HTML app-shell.
+
+Одна папка, внешних зависимостей нет.
+
+## Быстрый старт
+
+Систему не нужно изучать — её читает ИИ-агент. Положите папку в проект как `design-system/` и дайте задачу:
+
+> Примени дизайн-систему из `design-system/` — прочитай `design-system/AGENTS.md` целиком и следуй ему.
+> Затем собери экран «Реестр договоров».
+
+Дальше агент делает всё сам: выбирает рантайм под ваш стек, собирает экран через контракт, а не вёрсткой руками, и прогоняет гейт качества.
+
+Работает с Claude Code, Codex, Cursor и любым агентом, который читает файлы репозитория.
+
+**Чтобы не повторять это каждую сессию** — добавьте в `CLAUDE.md` проекта одну строку:
+
+```
+UI собирается по дизайн-системе KT AI: следуй `design-system/AGENTS.md`.
+```
+
+## Если проект уже существует
+
+Самая частая ошибка — «перекрасить» имеющиеся экраны токенами. Структура остаётся старой, меняются только цвета — это не применённая ДС.
+
+Как правильно — раздел [«Если в проекте УЖЕ есть экран»](AGENTS.md) в `AGENTS.md`: главный экран данных пересобирается через контракт, старый компонент удаляется. Агент читает это сам.
+
+## Посмотреть и проверить
+
+```bash
+open showcase.html          # галерея компонентов, светлая и тёмная темы
+python3 scripts/doctor.py   # 10 секунд: всё ли на месте и цело
+```
+
+`examples/` — 16 готовых продуктов, каждый парой «контракт + собранный прототип». Прототипы открываются двойным кликом.
+
+## Подключить как зависимость
+
+Чтобы проект всегда работал на свежей ДС, а не на копии, которая тихо отстаёт:
+
+```bash
+npm i github:erjan-A/kt-ai-design-system
+```
+
+```tsx
+import { KTAIShell, KTScreen } from "kt-ai-design-system/kit";
+```
+
+Обновление — `npm update kt-ai-design-system`. Настраивать сборщик не нужно: кит приезжает собранным, с типами. Нужен доступ к репозиторию у всех и в CI — [`docs/SETUP.md`](docs/SETUP.md).
+
+## Подключить как копию
+
+Проекту нужно править компоненты под себя — скопируйте папку к себе и дальше ведите её сами. Система в этом не участвует: копия становится ответственностью проекта, включая обновления.
+
+Коротко, если без React:
+
+```html
+<link rel="stylesheet" href="kt-ai-tokens.css">      <!-- значения -->
+<link rel="stylesheet" href="kt-ai-components.css">  <!-- компоненты -->
+<link rel="stylesheet" href="kt-ai-fonts.css">       <!-- Inter, кириллица + ₸ -->
+<body class="kt-ai-app">   <!-- тёмная тема: data-theme="dark" -->
+```
+
+## Что где лежит
+
+| | |
+|---|---|
+| [`AGENTS.md`](AGENTS.md) | инструкция ИИ-агенту — главный документ |
+| [`CHECKLIST.md`](CHECKLIST.md) | Definition of Done: экран не готов, пока не прошёл |
+| [`COMPONENTS.md`](COMPONENTS.md) | анатомия компонентов и компоновка экрана |
+| [`docs/`](docs/) | канон: токены и API, принципы, контракт, архетипы |
+| [`docs/RELEASE.md`](docs/RELEASE.md) | как выпускается ДС — правка в каноне до продуктов доезжает только релизом |
+| [`examples/`](examples/README.md) | 16 готовых продуктов |
+| `tokens.json` | единственный источник значений |
+| `templates/` | React-кит и HTML app-shell |
diff --git a/design-system/THIRD-PARTY-NOTICES.md b/design-system/THIRD-PARTY-NOTICES.md
new file mode 100644
index 0000000..e1aa4a1
--- /dev/null
+++ b/design-system/THIRD-PARTY-NOTICES.md
@@ -0,0 +1,18 @@
+# Сторонние материалы
+
+Дизайн-система распространяется под MIT (см. `LICENSE`). Входящие в неё
+сторонние материалы сохраняют свои лицензии:
+
+| Материал | Лицензия | Где |
+|---|---|---|
+| Иконки Tabler (`circleNumber0…9`) | MIT | `icons/kt-ai-lucide-sprite.svg`, приведены к нашей сетке |
+| Иконки Lucide | ISC | `icons/kt-ai-lucide-sprite.svg`, текст лицензии — `icons/LUCIDE_LICENSE.txt` |
+| Шрифт Inter | SIL Open Font License 1.1 | `fonts/InterVariable-subset.woff2` |
+| Шрифт JetBrains Mono | SIL Open Font License 1.1 | `fonts/JetBrainsMono-subset.woff2` |
+
+Вынесено из `LICENSE` отдельным файлом: GitHub определяет лицензию сравнением
+текста целиком, и приписка снизу превращала MIT в «лицензия не определена».
+
+## Заимствованные идеи
+
+Орб агента (`kt-ai-orb.js`) написан нами, но идея монохромного точечного облака взята у [thinking-orbs](https://orbs.jakubantalik.com) (MIT, Jakub Antalik & Alex Brinza). Код оттуда не используется.
diff --git a/design-system/VERSION b/design-system/VERSION
new file mode 100644
index 0000000..6bb3afd
--- /dev/null
+++ b/design-system/VERSION
@@ -0,0 +1,5 @@
+source:  https://github.com/erjan-A/kt-ai-design-system
+commit:  8ed26abbddcafec128e75dfb35f86486b6210418
+describe: 8ed26ab
+pulled:  2026-09-01T09:38:26Z
+subset:  без examples/, dist/ и React-кита (templates/kt-ai-shadcn) — платформа собирает ванильную статику
diff --git a/design-system/archetypes/registry.json b/design-system/archetypes/registry.json
new file mode 100644
index 0000000..bbf6e60
--- /dev/null
+++ b/design-system/archetypes/registry.json
@@ -0,0 +1,301 @@
+{
+  "$comment": "runtimes — в каких рантаймах архетип действительно реализован. Поле обязательно и проверяется гейтом 21: пока его не было, реестр объявлял все пятнадцать архетипов stable, а React-кит рисовал шесть — продукт узнавал об этом, только увидев деградировавший экран.",
+  "fallback": "queue",
+  "archetypes": [
+    {
+      "id": "queue",
+      "title": "Операционная очередь",
+      "whenToUse": "5+ записей со статусом/сроком/суммой; владелец проверяет, подтверждает, закрывает. Дефолт для реестров, очередей, инбоксов.",
+      "requires": [
+        "table",
+        "statuses",
+        "scenario"
+      ],
+      "recommends": [
+        "drawer",
+        "kpis"
+      ],
+      "forbids": [],
+      "renderer": "renderMain",
+      "runtimes": [
+        "html",
+        "kit"
+      ],
+      "status": "stable"
+    },
+    {
+      "id": "dashboard",
+      "title": "Дашборд состояния",
+      "whenToUse": "Управление метрикой процесса: KPI-табы управляют чартом периода (референс ElevenLabs dashboard), внизу разборы и список «требует внимания».",
+      "requires": [
+        "table",
+        "statuses"
+      ],
+      "recommends": [
+        "dashboard",
+        "kpis"
+      ],
+      "forbids": [],
+      "renderer": "renderDashboard",
+      "runtimes": [
+        "html",
+        "kit"
+      ],
+      "status": "stable"
+    },
+    {
+      "id": "cockpit",
+      "title": "Кабинет решения",
+      "whenToUse": "Один фокусный объект с сигналами и решением + компактная очередь сбоку. Мониторинг и обработка исключений.",
+      "requires": [
+        "table",
+        "statuses",
+        "scenario"
+      ],
+      "recommends": [
+        "drawer",
+        "kpis"
+      ],
+      "forbids": [],
+      "renderer": "renderCockpit",
+      "runtimes": [
+        "html",
+        "kit"
+      ],
+      "status": "stable"
+    },
+    {
+      "id": "compare",
+      "title": "Сверка источников",
+      "whenToUse": "Попарная сверка двух источников/версий по полям, расхождения подсвечены. Аудит, финансы, контрагентские версии договоров.",
+      "requires": [
+        "table",
+        "compare"
+      ],
+      "recommends": [
+        "scenario",
+        "drawer"
+      ],
+      "forbids": [],
+      "renderer": "renderCompare",
+      "runtimes": [
+        "html",
+        "kit"
+      ],
+      "status": "stable"
+    },
+    {
+      "id": "conversational",
+      "title": "Разговорный агент",
+      "whenToUse": "Чат как главная рабочая область, человек вне построчной очереди (агент отвечает/делает по запросу). Референс: ElevenLabs Conversational AI.",
+      "requires": [
+        "ai"
+      ],
+      "recommends": [],
+      "forbids": [],
+      "renderer": "renderConversational",
+      "runtimes": [
+        "html",
+        "kit"
+      ],
+      "status": "stable"
+    },
+    {
+      "id": "custom",
+      "title": "Свободный экран (запасной)",
+      "whenToUse": "Экран не ложится ни в один архетип — соберите его из блоков: sections с type text/cards/chart/kpis/table/chat в любом порядке (хабы, порталы, смешанные обзоры). Консистентность даёт не раскладка, а компоненты.",
+      "requires": [],
+      "recommends": [
+        "sections"
+      ],
+      "forbids": [],
+      "renderer": "renderCustom",
+      "runtimes": [
+        "html",
+        "kit"
+      ],
+      "status": "stable"
+    },
+    {
+      "id": "document",
+      "title": "Документ с правками агента",
+      "whenToUse": "Документоцентричный процесс: вычитка одного документа (договор, письмо, ТЗ) — правки и риски агента по фрагментам, принять/отклонить.",
+      "requires": [
+        "document",
+        "scenario"
+      ],
+      "recommends": [
+        "banner",
+        "kpis"
+      ],
+      "forbids": [],
+      "renderer": "renderDocument",
+      "runtimes": [
+        "html"
+      ],
+      "status": "stable"
+    },
+    {
+      "id": "copilot",
+      "title": "Чат + артефакт",
+      "whenToUse": "Диалог с агентом, который производит файл/документ/слайды: чат слева, живой предпросмотр результата справа.",
+      "requires": [
+        "ai",
+        "artifact"
+      ],
+      "recommends": [
+        "scenario"
+      ],
+      "forbids": [
+        "table"
+      ],
+      "renderer": "renderCopilot",
+      "runtimes": [
+        "html"
+      ],
+      "status": "stable"
+    },
+    {
+      "id": "wizard",
+      "title": "Мастер-заявка",
+      "whenToUse": "Пошаговая подача заявки/оформление с автозаполнением агентом и валидацией по шагам.",
+      "requires": [
+        "wizard"
+      ],
+      "recommends": [
+        "scenario"
+      ],
+      "forbids": [
+        "table"
+      ],
+      "renderer": "renderWizard",
+      "runtimes": [
+        "html"
+      ],
+      "status": "stable"
+    },
+    {
+      "id": "kanban",
+      "title": "Доска статусов",
+      "whenToUse": "Поток работ движется по стадиям и важно видеть распределение: колонки = statuses, карточки = table.rows (новых блоков не нужно).",
+      "requires": [
+        "table",
+        "statuses"
+      ],
+      "recommends": [
+        "scenario",
+        "drawer"
+      ],
+      "forbids": [],
+      "renderer": "renderKanban",
+      "runtimes": [
+        "html"
+      ],
+      "status": "stable"
+    },
+    {
+      "id": "inbox",
+      "title": "Входящие с панелью чтения",
+      "whenToUse": "Список входящих (обращения, письма, заявки) с длинным текстом: слева список, справа постоянная панель чтения с разбором агента.",
+      "requires": [
+        "table",
+        "inbox"
+      ],
+      "recommends": [
+        "scenario",
+        "drawer",
+        "statuses"
+      ],
+      "forbids": [],
+      "renderer": "renderInbox",
+      "runtimes": [
+        "html"
+      ],
+      "status": "stable"
+    },
+    {
+      "id": "analytics",
+      "title": "Аналитический разбор",
+      "whenToUse": "Главная ценность – анализ и выводы, а не построчная работа: сводка агента, 1-4 чарта (bar/line/donut), выводы с тонами.",
+      "requires": [
+        "analytics"
+      ],
+      "recommends": [
+        "kpis",
+        "banner"
+      ],
+      "forbids": [
+        "table"
+      ],
+      "renderer": "renderAnalytics",
+      "runtimes": [
+        "html"
+      ],
+      "status": "stable"
+    },
+    {
+      "id": "calendar",
+      "title": "Расписание по датам",
+      "whenToUse": "Работа привязана к датам и слотам: окна работ, дежурства, сроки – события по дням.",
+      "requires": [
+        "calendar"
+      ],
+      "recommends": [
+        "banner"
+      ],
+      "forbids": [
+        "table"
+      ],
+      "renderer": "renderCalendar",
+      "runtimes": [
+        "html"
+      ],
+      "status": "stable"
+    },
+    {
+      "id": "map",
+      "title": "Схема-карта участка",
+      "whenToUse": "Объекты распределены в пространстве (станции, переезды, площадки): стилизованная SVG-схема с точками-статусами; не геокарта с тайлами.",
+      "requires": [
+        "map"
+      ],
+      "recommends": [
+        "statuses",
+        "banner"
+      ],
+      "forbids": [
+        "table"
+      ],
+      "renderer": "renderMap",
+      "runtimes": [
+        "html"
+      ],
+      "status": "stable"
+    },
+    {
+      "id": "timeline",
+      "title": "Хронология",
+      "whenToUse": "Разбор одного дела/инцидента во времени: кто что сделал и когда, включая шаги агента.",
+      "requires": [
+        "timeline"
+      ],
+      "recommends": [
+        "banner"
+      ],
+      "forbids": [
+        "table"
+      ],
+      "renderer": "renderTimeline",
+      "runtimes": [
+        "html"
+      ],
+      "status": "stable"
+    }
+  ],
+  "open_set_examples": [
+    "gantt — план работ по срокам и зависимостям",
+    "gallery — карточки с превью (фото, документы)",
+    "editor — свободное редактирование длинного текста",
+    "org — оргструктура/иерархия"
+  ]
+}
diff --git a/design-system/docs/ARCHETYPES.md b/design-system/docs/ARCHETYPES.md
new file mode 100644
index 0000000..47a5b57
--- /dev/null
+++ b/design-system/docs/ARCHETYPES.md
@@ -0,0 +1,94 @@
+# Архетипы экрана KT AI
+
+Архетип — это форма главной рабочей области под задачу процесса. Набор **открыт**: archetypes/registry.json — это каталог-данные, а не зашитый список. Добавление архетипа = запись в реестр + рендерер + пример, **без правки валидатора и ядра**. Неизвестный или ещё не реализованный архетип безопасно деградирует в `queue`.
+
+Это прямой ответ на вопрос «а если архетипов больше?»: система относится к архетипам как к данным. Реестр растёт; контракт (`product.schema.json`) общий; валидатор (`scripts/validate_product.py`) читает реестр и не меняется; рантайм (`templates/kt-ai-app-shell.html`) подбирает рендерер по id с фолбэком.
+
+## Галерея
+
+Все архетипы живьём в одном экране: `examples/gallery.html` (табы, генерируется `scripts/build_gallery.py` после пересборки прототипов). У каждого stable-архетипа есть отгружаемый пример.
+
+## Контракт записи реестра
+
+```json
+{
+  "id": "compare",                      // lowercase id, = значение product.archetype
+  "title": "Сверка источников",
+  "whenToUse": "когда применять (1 фраза)",
+  "requires": ["table", "compare"],     // блоки контракта, без которых архетип не имеет смысла → ERROR
+  "recommends": ["scenario", "drawer"],  // желательные блоки → WARN, если их нет
+  "forbids": [],                         // блоки, которых быть не должно → ERROR
+  "renderer": "renderCompare",           // имя функции-рендерера в app-shell (null, если ещё нет)
+  "runtimes": ["html", "kit"],           // где архетип РЕАЛЬНО реализован
+  "status": "stable"                     // stable – рендерится; planned – пока деградирует в fallback
+}
+```
+
+**`runtimes` — обязательное поле, и его держит в согласии с кодом гейт 21.**
+`status: stable` говорит только о том, что архетип рендерится; в каком рантайме
+— не говорит. Пока поля не было, реестр объявлял stable все пятнадцать
+архетипов, а React-кит рисовал шесть: продукт на Next выбирал `inbox`, получал
+деградацию в `queue` и узнавал об этом, увидев не тот экран. Ни реестр, ни
+валидатор, ни гейт не произносили ни слова.
+
+Теперь валидатор пишет об этом заметкой при проверке конфига, а гейт 21 сверяет
+реестр с тем, что действительно реализовано в `kt-ai-screen.tsx`. Реализовали
+архетип в ките — допишите `kit` в `runtimes`, иначе сборка ДС покраснеет.
+
+В ките сегодня: `queue`, `dashboard`, `cockpit`, `compare`, `conversational`,
+`custom`. Остальные девять — только HTML-рантайм.
+
+Валидатор по этой записи проверяет конфиг автоматически — для любого числа архетипов код не меняется.
+
+## Реализованные (stable)
+
+| id | Когда | Главная область | Референс |
+|---|---|---|---|
+| `queue` | 5+ записей со статусом/сроком/суммой; проверить и закрыть (дефолт) | таблица + drawer | — |
+| `dashboard` | управление метрикой процесса | KPI-табы → большой чарт периода + разборы (top/share/cards) + «требует внимания» | ElevenLabs dashboard (Mobbin) |
+| `cockpit` | один фокусный объект с сигналами + решение | карточка решения + очередь сбоку | ElevenLabs TTS playground (рабочая область + тихая панель) |
+| `compare` | попарная сверка двух источников/версий | две панели, расхождения подсвечены | — |
+| `conversational` | чат как главная область, человек вне построчной очереди | центрированный чат, орб-аватар, prompt-bar | ElevenLabs Conversational AI |
+| `custom` | **экран не подходит ни под один архетип** (запасной) | центрированная колонка секций-карточек | ElevenLabs settings-detail |
+| `document` | документоцентричный процесс: вычитка одного документа (договор, письмо, ТЗ) | документ с diff-правками агента по фрагментам, принять/отклонить каждую | Harvey, «договоры/письма Lotus» |
+| `copilot` | агент производит файл/документ/слайды в диалоге | чат слева + живой предпросмотр артефакта справа | ChatGPT Canvas, Claude Artifacts |
+| `wizard` | пошаговая подача заявки/оформление с автозаполнением агентом | степпер + поля с бейджем «заполнил агент», Назад/Далее | госуслуги, Typeform |
+| `kanban` | поток работ по стадиям, важно распределение | колонки = statuses, карточки = table.rows (без новых блоков) | Trello, Linear board |
+| `inbox` | входящие с длинным текстом (обращения, письма) | список слева + постоянная панель чтения с разбором агента | почтовые клиенты, Front |
+| `analytics` | главная ценность — анализ и выводы, не построчная работа | сводка агента + чарты (bar/line/donut, чистый SVG) + «Выводы агента» | Amplitude, Metabase |
+| `calendar` | работа привязана к датам и слотам | события по дням, тон-подсветка конфликтов | календарь-агенда |
+| `map` | объекты распределены в пространстве (станции, площадки) | SVG-схема с точками-статусами и связями; не геокарта с тайлами | схемы линий метро |
+| `timeline` | разбор одного дела/инцидента во времени | вертикальная лента: время, событие, актор (шаги агента помечены) | audit log, Intercom timeline |
+
+## Заявленные (planned)
+
+— нет. Все архетипы реестра реализованы.
+
+## Когда экран не подходит ни под один архетип
+
+Это штатная ситуация, не ошибка. Два пути:
+
+1. **Явно** — поставить `archetype: "custom"` и описать `contract.sections` (заголовок + опц. описание/текст/поля). Рендерится колонкой карточек в духе ElevenLabs detail-страниц.
+2. **Автоматически** — если архетип неизвестен или не реализован, `mainByLayout` подбирает форму по данным: есть `sections` → custom; есть таблица с рядами → queue; иначе → custom (пустой с подсказкой). Экран никогда не падает и не показывает пустую таблицу не к месту.
+
+## Набор открыт
+
+Реестр прямо перечисляет очевидных кандидатов (`open_set_examples`): `gantt`, `gallery`, `editor`, `org`. Это не обещания — маркер того, что список не закрыт. До появления их рендереров такие экраны делает `custom`.
+
+## Как добавить архетип
+
+По «правилу двух продуктов» (DESIGN.md): архетип появляется, когда он нужен **второму** продукту, не раньше.
+
+1. **Реестр.** Добавить запись в `archetypes/registry.json` (`status:"planned"`, `renderer:null` — на этом шаге уже можно валидировать контракт).
+2. **Рендерер.** Написать `renderXxx()` в `templates/kt-ai-app-shell.html` и ветку в `mainByLayout()`; перевести запись в `status:"stable"`, `renderer:"renderXxx"`. Главную оболочку (sidebar/topbar/тема/орб Төре) не трогать — меняется только главная область.
+3. **Контракт.** Если архетипу нужен новый блок данных (как `compare`), добавить его в `product.schema.json`.
+4. **Пример.** Положить эталонный конфиг в `examples/` и прогнать `scripts/validate_product.py`.
+5. **Док.** Дописать строку в таблицу выше.
+
+## Деградация
+
+- Неизвестный `archetype` → WARN + рендерится `queue`.
+- `status:"planned"` → WARN + рендерится `fallback` (queue).
+- `compare` без `compare.pairs` → WARN + рендерится `queue`.
+
+Прототип никогда не падает из-за архетипа — в худшем случае показывает надёжную таблицу-очередь.
diff --git a/design-system/docs/BUILD_PROTOTYPE.md b/design-system/docs/BUILD_PROTOTYPE.md
new file mode 100644
index 0000000..1313e53
--- /dev/null
+++ b/design-system/docs/BUILD_PROTOTYPE.md
@@ -0,0 +1,98 @@
+# BUILD_PROTOTYPE.md — как ИИ-агенту собрать прототип из материалов проекта
+
+Эта инструкция для **Claude Code / Codex**. Сценарий Ержана: он собирает материалы от владельца
+процесса в папку проекта и говорит агенту «собери прототип по материалам и дизайн-системе».
+Эта страница — единственная точка входа для этого. Следуй ей по шагам, не выдумывай данные,
+**не трогай Төре** (`01_Проекты/_Alpha Projects/ai-interviewer/` и его `design-system/` — read-only).
+
+DS-корень: `00_Система/08_Дизайн-система/` (далее `DS/`).
+
+---
+
+## Что на входе и на выходе
+
+- **Вход:** папка проекта `01_Проекты/<проект>/` с материалами: паспорт агента, PRD/ТЗ,
+  `КОНТЕКСТ.md`, заметки интервью/звонков, правила скоринга, перечень статусов/каналов/систем.
+- **Выход** в `01_Проекты/<проект>/.../prototype/`:
+  1. `<имя>.config.json` — контракт по `DS/product.schema.json`;
+  2. `<имя>.prototype.html` — самодостаточный кликабельный прототип (двойной клик, file://);
+  3. `РАНБУК_сессии_с_владельцем.md` — что показать, что спросить, как собрать отзыв.
+
+---
+
+## Шаги
+
+### 0. Прочитай канон DS (в этом порядке)
+`GOAL.md` (северная звезда) → `PRODUCT_CONTRACT.md` (форма контракта) → `product.schema.json`
+(точная схема) → `ARCHETYPES.md` (выбор архетипа) → `DESIGN.md` + `PRINCIPLES.md` (правила вёрстки и честности) → `ELEVENLABS_DESIGN.md` (эстетика/плотность/детали как у ElevenLabs) → `CHECKLIST.md` (гейт, по которому будут принимать).
+Карта слоёв системы и «что где живёт» — `README.md`.
+Образцы готовых контрактов: `DS/examples/*.json` и ДУКО
+(`01_Проекты/ДУКО/Адвокат клиента/Разработка/prototype/advokat-klienta.config.json`).
+
+### 1. Прочитай материалы проекта и собери карту источника (`source-map`)
+НЕ вытаскивай факты «на глаз» — выпиши их структурно, иначе часть выходов потеряется (так в первом
+прогоне консолидации в UI не попал «проект ТС», хотя PRD назвал его выходом). Выпиши:
+- главный рабочий объект; владелец процесса и основной пользователь; **роли** (кто решает / согласует / получает);
+- рабочие статусы; поля строки и их **источник** (SAP, Лотус, KTWorks, e-Otinish, агент, человек);
+- **выходные артефакты** — что продукт ПРОИЗВОДИТ (документы: ТС, отчёт, служебная записка, расчёт…); это самое теряемое;
+- роль AI; действия человека; признаки/правила/веса; сценарии (S-xx) и критерии приёмки (A-xx).
+Сложи это в `source-map.md` рядом с прототипом (таблица: пункт · источник в PRD · UI-дом · covered/deferred).
+Если факт неизвестен — `не найдено`, не выдумывай.
+
+**Трассировка (gate G8).** Для каждого пункта карты назначь UI-дом: nav-секция / поле или артефакт в drawer / явный «вне v1».
+Правило: **представлен или осознанно отложен — никогда молча не выброшен.** Named output из PRD не зарывается в `_flags`.
+
+### 2. Выбери архетип
+По `ARCHETYPES.md`. По умолчанию `queue` (рабочая очередь). Другие: `dashboard`, `cockpit`,
+`compare` (сверка двух источников), `conversational`, `custom` (запасной — свободные секции).
+Неизвестный архетип безопасно деградирует в queue.
+
+### 3. Собери контракт `<имя>.config.json`
+Строго по схеме. Правила честности (их же проверяет валидатор):
+- **Данные — из материалов, не выдуманные.** Маскируй ПДн: `ИИН •••4821`, `B2C · ...`, без реальных ФИО клиентов.
+- `product.view: operational` для рабочей очереди → **без ROI/FTE/эффекта** в KPI (это управленческий view).
+  KPI отвечают на вопрос пользователя на экране (сколько в очереди, риск, просрочка), а не «доказывают ценность».
+- Один primary (`scenario.control`) на экран. Статусы строк — только из объявленных в `statuses`.
+- **Двухстрочная ячейка:** `columns[].sub` = ключ второго поля (напр. канал под обращением) — компактно, в духе ElevenLabs.
+- **Иконки nav:** `nav[].icon` из спрайта `DS/icons/kt-ai-lucide-sprite.svg` (risk/chart/tool/feed/file/users/...).
+- **Для AI-агентов:** анализ агента кладётся в `row._flags` (по одному признаку), плюс одна строка
+  `"Рекомендация: ..."`. Варианты действия человека — `scenario.actions` (Action Layer: AI рекомендует, человек
+  подтверждает или меняет). Drawer покажет это как «Что сделал агент / Признаки / Решение — за вами».
+- `banner` пиши по схеме «что → почему → что делать» и давай `action`, чтобы он был полезным, а не статичным.
+
+### 4. Проверь контракт (ворота честности)
+```
+python3 "DS/scripts/validate_product.py" "<config>.json" --strict
+```
+Должно быть `0 ошибок, 0 предупреждений`. Чини контракт, пока не пройдёт. `--strict` обязателен для показа/handoff.
+
+### 5. Собери кликабельный прототип (одна команда)
+```
+python3 "DS/scripts/build_prototype.py" "<config>.json"
+```
+Получишь `<имя>.prototype.html` рядом с конфигом — самодостаточный (токены, компоненты, спрайт, режим «Отзыв»
+встроены), открывается двойным кликом. **Не инлайнь руками** — используй этот скрипт.
+
+### 5.5. Гейт качества — прогони `CHECKLIST.md` (Definition of Done)
+Открой собранный `*.prototype.html` (и React, если делал) и пройди гейт `CHECKLIST.md`:
+- `[auto]`-пункты уже держит валидатор (шаг 4 = 0/0);
+- `[review]`-пункты — глазами в обеих темах (showcase-переключатель) и на узком экране (393px): иерархия,
+  ритм отступов, hairline-vs-тень, состояния hover/empty/error, статус-пилюли, паритет HTML↔React.
+«Зелёный валидатор» ≠ «прошло DoD». Нашёл расхождение — правь контракт (или, если это общий дефект, `DS/`) и вернись к шагу 4.
+
+### 6. Напиши `РАНБУК_сессии_с_владельцем.md`
+Короткий сценарий показа: что демонстрируем, 3–5 вопросов владельцу процесса на проверку правды
+(статусы/поля/действия верны?), и как собрать отзыв: кнопка **«Отзыв»** в прототипе → владелец кликает
+по элементам и пишет замечания → **«Экспорт в markdown»** → присылает БА. Итерация = правка контракта (не кода) → шаг 4–5.
+
+### 7. (Опционально) React-репозиторий для разработки
+Тот же контракт разворачивается в React/shadcn-кит для передачи разработчикам:
+см. `templates/kt-ai-shadcn/PROTOTYPING_WORKFLOW.md` (кит лежит в папке ДС, рядом с app-shell). Выглядит идентично HTML-прототипу.
+
+---
+
+## Жёсткие правила
+- **Не трогай Төре** и его копию DS. Максимум — читать для логики.
+- Данные иллюстративные, но обоснованы материалами; ПДн маскированы; цифр «с потолка» нет.
+- Меняешь только папку прототипа конкретного проекта и (при общем улучшении) `DS/`. Контракт — единственный источник; рантаймы не правим под один проект.
+- **Любое изменение UI проходит `CHECKLIST.md`** — не только новый прототип, но и новая фича/правка рантайма или DS. Менял `DS/` → синхронизируй Töре и держи `integrity.test` = 0 failed.
diff --git a/design-system/docs/DESIGN.md b/design-system/docs/DESIGN.md
new file mode 100644
index 0000000..1503d0c
--- /dev/null
+++ b/design-system/docs/DESIGN.md
@@ -0,0 +1,308 @@
+# KT AI Design System v3.0 «Mono» (токены v5)
+
+Канон дизайн-системы KT AI. v3.0 от 2026-06-21 – визуальный язык в духе ElevenLabs: **light-first**, тёплый near-white фон, **near-black primary-кнопка** (в dark инвертируется в near-white), плоские поверхности на hairline-границах и шёпот-тенях, крупные жирные тёмные заголовки, цвет – только функциональный (статусы, чарты, единичная AI-искра орба Төре). Синий **демотирован** в ссылки/фокус/идентичность KT, перестал быть цветом primary-действия. Геометрия и Attio-детали (rounded-rect теги, frameless-таблицы с горизонтальными разделителями рядов — без вертикальных колонок-сепараторов, property-rows) сохранены; aurora-свечение карточек и тяжёлые AI-ореолы убраны. История: CHANGELOG.md. Анатомия shell/таблиц/рядов: COMPONENTS.md. Продуктовый контракт прототипа: PRODUCT_CONTRACT.md.
+
+Файлы:
+
+| Файл | Роль |
+|---|---|
+| `tokens.json` | ЕДИНСТВЕННЫЙ источник значений токенов. Правки только здесь |
+| `scripts/build_tokens.py` | генератор: tokens.css, print.css, figma-variables.json, tailwind-preset |
+| `kt-ai-tokens.css` | AUTOGENERATED: переменные, обе темы, @layer kt-tokens |
+| `kt-ai-print.css` | AUTOGENERATED: @media print (light, A4, скрытие shell) |
+| `figma-variables.json` | AUTOGENERATED: импорт в Figma Variables (dark/light) |
+| `kt-ai-tailwind-preset.cjs` | AUTOGENERATED: preset для Next.js/kt-ai-shadcn |
+| `kt-ai-components.css` | компоненты v2 на токенах, имена классов совместимы с v1 |
+| `COMPONENTS.md` | нормативная анатомия shell, таблиц, рядов, тулбаров (перенос из v1-архива) |
+| `showcase.html` | живая галерея всех компонентов с переключателем тем – открыть в браузере |
+| `icons/kt-ai-lucide-sprite.svg` | локальный monochrome Lucide-sprite |
+| `COMPONENTS.md` | правила компоновки экрана (активно) |
+| `ELEVENLABS_DESIGN.md` | эталон эстетики/плотности/деталей (язык ElevenLabs) |
+| `archive/` | замороженный v1 (kt_design_system, DESIGN_v1_archive, kt_ai_terminal_tokens.css, kt_ai_terminal_routes, kt_ai_atomic_product_system) – только история, вынесен в `08_Дизайн-система_история/archive/` |
+
+Брендовые ассеты: `03_База знаний/Логотипы и бренд/` (ktai.svg, kt-logo.svg).
+
+## Принципы
+
+Полный контракт UX-принципов (Нильсен, гештальт, законы взаимодействия): `PRINCIPLES.md`. Единый чек-лист «прошло или нет» (Definition of Done, прогонять при любом изменении UI): `CHECKLIST.md`. Оба обязательны при проектировании.
+
+1. Плотный операционный интерфейс: первый экран – рабочая поверхность, не лендинг.
+2. Плоские поверхности на hairline-границах: в light – лёгкая тень (`card-shadow`/`shadow-sm`) + рамка, в dark – рамка без тени. Полновесные тени – только у overlay (modal, drawer, dropdown, command, toast). Никаких декоративных свечений/градиентов в контенте. Blur – только на sticky-хроме (топбар `bg-glass`) и overlay.
+3. Тихие границы, приглушённые метаданные, один primary-акцент на экран.
+4. **Mono-доминанта.** Primary-действие – монохром: `primary` = near-black (light) / near-white (dark), белый/тёмный текст. Синий (`link`, `focus`, `brand-blue`) – ссылки, фокус и идентичность KT, **не** заливка кнопок. AI-градиент (`ai-gradient`) – единичная сдержанная искра только на орбе Төре, send-кнопке и кромке prompt-bar в фокусе; тяжёлые ореолы и aurora-свечение карточек убраны. Остальные цвета – только статусы, чипы и графики.
+5. Геометрия компонентов не зависит от темы: темы меняют только цвет.
+6. Никаких сырых hex в продуктовом CSS – только semantic-токены.
+
+## Архитектура токенов
+
+Три уровня, имена v1 (`--kt-ai-*`) полностью сохранены – старые продукты работают без правок.
+
+1. **Primitives** (`--kt-blue-500`, `--kt-gray-900`, `--kt-green-a22`...) – сырая палитра и шкалы. В продуктах напрямую НЕ используются.
+2. **Semantic** – смысловые роли, переключаются темой:
+   - поверхности: `--kt-ai-bg`, `-bg-soft`, `-bg-elevated`, `-bg-sunken`;
+   - state-слои: `-bg-hover`, `-bg-active`, `-selection`;
+   - текст: `-fg`, `-fg-muted`, `-fg-faint`, `-fg-on-fill`;
+   - границы: `-border`, `-border-strong`, `-divider`;
+   - интерактив: `-primary`, `-primary-hover`, `-primary-subtle`, `-link`, `-danger`, `-danger-hover`;
+   - фокус: `-focus-ring`, `-focus-shadow`;
+   - статусы/чипы/чарты: как в v1;
+   - тени: `-shadow-sm/md/lg/xl`.
+3. **Component** – размеры контролов: `--kt-ai-control-h-sm/md/lg` (28/32/40), layout-переменные v1.
+
+Тема-независимые шкалы (в `:root`):
+
+- **Spacing** `--kt-ai-space-1..12`: 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64. Всё на 4px-сетке, плотный низ шкалы.
+- **Типографика** `--kt-ai-text-2xs..3xl`: 11, 12, 13, 14, 15, 18, 26, 32. Body = 13px (`text-sm`). Веса 400/500/600/700. Числа – JetBrains Mono с `tabular-nums`.
+- **Трекинг зависит от размера** (не одно значение на всё): крупные заголовки — отрицательный (`-.02em` дисплей, `-.01em` H1/H2), body — около `0`. Тесним заголовки, body оставляем нейтральным.
+- **Leading обратно размеру:** плотный на крупных заголовках (`leading-tight` 1.25), свободнее на body (`leading-normal` 1.5). Иерархия строится связкой вес+размер+leading, а не размером одним.
+- **Радиусы** (значения — в `tokens.json`, `scales.radius`): xs, sm, md, tag, lg, xl, 2xl, 3xl, full. Nav-ряды lg; кнопки/инпуты xl; карточки, modal, command, prompt-bar – 3xl; теги/статусы – tag (rounded-rect, не pill).
+- **Моушн** `--kt-ai-dur-fast/base/slow/slower` (100/160/240/400ms), easing standard/enter/exit. `prefers-reduced-motion` обнуляет длительности автоматически.
+- **Z-index**: sticky 20, dropdown 30, drawer 40, modal 50, toast 60, tooltip 70.
+
+## Темы
+
+Light – дефолт (`:root`, `data-theme="light"` или `kt-ai-terminal-light`): тёплый near-white, near-black primary – основной офисный вид (v3 «Mono», light-first). Dark – полноправный паритетный вариант (`data-theme="dark"` или `kt-ai-terminal`): near-black фон, primary инвертируется в near-white. `data-theme="auto"` следует за системной темой.
+
+Правила паритета:
+
+- каждый semantic-токен определён в обеих темах; добавил токен в dark – обязан добавить в light;
+- интерактивный синий: dark `#4b9ce2`, light `#0077c8` (AA-контраст на своих фонах); фирменный KT blue `#0096d7` общий;
+- статусные пары построены зеркально: в dark светлый текст на прозрачной подложке, в light тёмный текст на прозрачной подложке;
+- проверка паритета – переключателем в `showcase.html`, это обязательный QA-шаг.
+
+## Компоненты (kt-ai-components.css)
+
+Имена классов v1 сохранены (`.kt-ai-card`, `.kt-ai-row`, `.kt-ai-chip`, `.kt-ai-nav-item`, `.kt-ai-table*`, `.kt-ai-search`, `.kt-ai-kbd`, `.kt-ai-icon-button`, `.kt-ai-segmented`...). Новое в v2:
+
+- **Кнопки** `.kt-ai-btn`: варианты `data-variant="primary|ghost|danger"` (без атрибута – вторичная), размеры `data-size="sm|lg"`. Один primary на экран.
+- **Формы**: `.kt-ai-field` (label + контрол + hint/error), `.kt-ai-input`, `.kt-ai-select`, `.kt-ai-textarea`, `data-invalid="true"`, `.kt-ai-checkbox`, `.kt-ai-switch`. Фокус: border primary + `--kt-ai-focus-shadow`.
+- **Tabs** `.kt-ai-tabs/.kt-ai-tab` (`data-active`), сегменты как в v1.
+- **Banner** `.kt-ai-banner data-tone="info|warn|risk|ok"` – строчные предупреждения в контенте.
+- **Modal** `.kt-ai-modal-overlay/.kt-ai-modal` – bg-elevated, radius-2xl, shadow-xl, анимация rise.
+- **Toast** `.kt-ai-toast-stack/.kt-ai-toast data-tone` – нижний правый угол, точка-индикатор тона.
+- **Tooltip** `.kt-ai-tooltip[data-tip]` – чистый CSS.
+- **Skeleton** `.kt-ai-skeleton` (shimmer), **Empty** `.kt-ai-empty` (иконка + title + действие).
+- **KPI** `.kt-ai-kpi-strip/.kt-ai-kpi` – тихая метрик-полоса, не карточки.
+- **Avatar**, `.kt-ai-divider`, `.kt-ai-status-pill` с точкой-индикатором.
+- **Drawer** `.kt-ai-drawer` – правая панель деталей (правило: детали в drawer, не на новой странице).
+- **Документ-артефакт** `.kt-ai-doc` / `.kt-ai-doc-list` – карточка выходного документа (иконка + имя + статус/формат + кнопка «Скачать»). То, что продукт ПРОИЗВОДИТ (ТС, отчёт, СЗ), показывается как скачиваемый документ — в drawer (секция «Документы» из `_docs` строки) и в nav-секции-коллекции (`nav.view="documents"`, фильтр по `docType`). Контракт: `table.rows[]._docs`.
+
+Новое в v2.3 «Aurora × Attio»:
+
+- **Карточки** – `card-bg/card-border/card-shadow` токены: в dark – hairline-рамка + фиолетовое aurora-свечение из угла (`data-glow="strong"` – усиленный hero-вариант с двойным свечением), в light – белая поверхность с тенью без рамки. Радиус — `radius-3xl`.
+- **Кнопки (Attio)** – secondary: поверхность bg-elevated + рамка + shadow-sm, радиус 8; ghost/danger без поверхности.
+- **Теги (Attio)** – chip/status-pill/filter-chip: rounded-rect `radius-tag` (5px), не pill.
+- **Таблицы (ElevenLabs)** – дефолт frameless full-bleed: hairline под шапкой и между рядами, **без вертикальных колонок-сепараторов** (тихо, воздушно), заголовки sentence-case 12px medium muted; контейнерный вариант – `data-framed="true"`. Для стабильности ширин при фильтрации фильтруемым таблицам задаётся `table-layout:fixed` + colgroup.
+- **Property-row** `.kt-ai-prop` (`.k` – иконка+метка 148px, `.v` – значение, `data-empty`) – детали объекта в drawer/карточке.
+- **AI-aurora** – токены `ai-accent`, `ai-gradient` (синий → фиолет): градиентная кромка prompt-bar в фокусе + ореол, градиентные send-кнопка и streaming-каретка, орб-атрибуция вместо ✦, `.kt-ai-btn[data-ai="true"]` – точка входа AI. Градиент НЕ используется вне AI-моментов.
+- **Тихая ссылка** `.kt-ai-link[data-arrow]` – «Подробнее →», стрелка сдвигается на hover.
+- **Dot-grid** текстура на `.kt-ai-empty`. Mono-голос: label, cmd-group, время уведомлений, ключи filter-chips. Активный таб – синий. Трекинг заголовков -.02em/-.01em. Sidebar-ряды 26px.
+
+Новое в v2.2:
+
+- **Topbar** `.kt-ai-topbar` – канонический glass-хром: sticky, `bg-glass` + blur(8). Blur разрешён только здесь и на overlay.
+- **AI-диалог**: `.kt-ai-chat` + `.kt-ai-msg data-role="user|assistant"` (ассистент – полная ширина без пузыря, пользователь – пузырь bg-soft ≤76%), `data-streaming="true"` – каретка; `.kt-ai-prompt-bar` (autogrow textarea + `.kt-ai-prompt-send`, `data-busy`), `.kt-ai-suggestions/.kt-ai-suggestion` – стартовые подсказки, `.kt-ai-source-pill` – ссылка-источник в ответе, `.kt-ai-gen-label` – атрибуция «Сгенерировано ИИ» (обязательна для AI-контента).
+- **Menu** `.kt-ai-menu-anchor > .kt-ai-menu[data-open]` – dropdown действий (kebab в рядах таблиц): `.item` (`data-danger`), `.sep`.
+- **Command palette** – достроена: `.kt-ai-command-overlay`, `.cmd-input`, `.cmd-list`, `.cmd-group`, `.cmd-item[data-active]`, `.cmd-empty`.
+- **Filter-chips** `.kt-ai-filterbar` + `.kt-ai-filter-chip` (`.k` – имя фильтра, `.remove`) + `.clear-all` – применённые фильтры над таблицей.
+- **Radio** `.kt-ai-radio`, `.kt-ai-radio-group`.
+- **Toast**: `.action` (undo-ссылка) и `.close`.
+- **Popover** `.kt-ai-popover-anchor > .kt-ai-popover[data-open]` (`data-align="right"`) – якорный интерактивный слой (date-picker, настройки колонок).
+- **Bulk-bar** `data-floating="true"` – плавающий вариант снизу по центру для длинных таблиц.
+- **Row actions** `.kt-ai-row .actions` / `.kt-ai-table tr .actions` – тихие действия, видимы на hover/focus-within/selected; на touch видимы всегда.
+- Активный пункт навигации получает 2px-акцент слева (работает и в icon-rail).
+
+Анатомия shell, таблиц, рядов – COMPONENTS.md (перенесено из v1-архива, нормативно).
+
+## Operational Dashboard Contract
+
+- Boilerplate задаёт обязательный shell: sidebar, `.kt-ai-topbar`, theme toggle и AI-кнопку Төре. Эти элементы нельзя перерисовывать, заменять самодельными глифами или делать декоративными. Main content проектируется под задачу процесса.
+- Для рабочих очередей, реестров и консолидации закупок предпочтителен classic app-shell: таблица как главный объект, детали в drawer, короткие workflow-status, одно primary-действие. Custom workspace, матрица, split-view или decision panel используются только когда таблица + drawer не решают основную работу пользователя.
+- H1/topbar title – короткий рабочий объект, 1-3 слова. Не использовать описание процесса как заголовок.
+- Subtitle – одна короткая scope-фраза до 90 символов.
+- KPI показывают рабочее состояние текущего пользователя: новые, требуют решения, риски, ждут документы, просрочено, закрыто сегодня, SLA или сумма риска. ROI, FTE, экономия часов и тенге эффекта не выводятся на пользовательский dashboard по умолчанию. Эти метрики относятся к management/reporting view, паспорту или расчёту эффекта проекта. Исключение – операционный экран консолидации, где пользователю нужны рабочие числа для решения: сколько ТС обработано, сколько имеют потенциал консолидации, какой предварительный потенциал экономии в тенге.
+- Search, theme toggle, AI button and visible primary actions must work in the prototype when shown. Search inputs are empty by default and must not be prefilled with arbitrary examples.
+- Primary filters – только workflow-status, максимум 4 пункта плюс `Все`. Confidence, risk type, системы и длинные причины не попадают в default segmented filters.
+- Workflow `status`, `confidence` и `riskType` моделируются разными полями.
+- Labels компактные: filter до 2 слов, status до 4 слов, table header до 2 слов; детали и длинные объяснения – в drawer/help.
+- UI-copy не показывает внутреннюю кухню генерации: `модель вернула`, `fallback`, `не проходит дизайн-систему`, `shell`, `JSON` и похожие формулировки запрещены в пользовательском интерфейсе.
+- **Голос интерфейса нейтрален и продуктовый.** Запрещены: дисклеймеры прототипа («это прототип на дизайн-системе», «данные иллюстративны»); нравоучения про human-in-the-loop («AI не действует на клиента сам», «решение подтверждает человек», «контрольная точка») — человек-в-контуре показывается контролами (рекомендация + кнопки accept/reject), а не объяснениями; лозунг-лейблы капсом («РЕШЕНИЕ — ЗА ВАМИ») — секции называются нейтральными существительными («Решение»). Любой продукт-специфичный текст (что сделал агент, разбор) живёт в контракте (`scenario.aiSummary`), а не зашит в shell — иначе он протекает в другие продукты. Валидатор ловит эти формулировки (`PREACHY_LANG`).
+
+## Состояния интерактива
+
+Единая лестница: default → hover (`-bg-hover` или border-strong) → active/selected (`-bg-active`) → focus-visible (outline `-focus-ring`) → disabled (opacity .4). Hover-переходы `dur-fast`, появления `dur-base`, drawer/modal `dur-slow`. Нажатие кнопки: `scale(.98)` 60ms.
+
+## Движение (motion)
+
+Правила — не украшение, а поведение. Каждое имеет причину.
+
+- **Длительности по типу:** микро/hover 100–150мс (`dur-fast` 100), обычное появление/смена 150–250мс (`dur-base` 160), overlay/drawer/modal ~240мс (`dur-slow`). Дольше 300мс движение начинает раздражать; короче — пропадает читаемость перехода.
+- **Появляйся от `scale(.95)`, не от `scale(0)`** (и не от `opacity:0` в одиночку): элемент «подрастает» из своего места, а не возникает из ниоткуда. Уводи так же — до `.95`, не в `0`.
+- **Отклик на нажатие, не на отпускание:** подсветка/`scale(.98)` на pointer-down мгновенно; коммит — на pointer-up. Лаг убивает ощущение прямоты.
+- **Переходы прерываемы и обратимы:** закрывающийся drawer можно открыть на полпути. Анимируй от ТЕКУЩЕГО значения (presentation), а не от целевого — иначе «прыжок».
+- **Вход и выход по одному пути; overlay привязан к источнику:** меню/popover растут из кнопки (`transform-origin` = триггер), drawer уходит туда, откуда пришёл. На реверсе — зеркальный easing (`ease-enter` ↔ `ease-exit`).
+- **Анимируй только `transform` и `opacity`** (композиторные, без ре-лейаута). Не анимируй `width/height/top/left/box-shadow` — дёргается кадр.
+- **`prefers-reduced-motion`** обнуляет длительности автоматически (токены + компоненты); оставляем только opacity/цвет, что помогают понять переход.
+
+## Иконки
+
+Lucide из локального sprite, монохром через `currentColor`, stroke 1.75. Размеры 16 (база), 14 (плотные ряды), 20 (крупные). Без CDN-шрифтов и CSS-псевдоиконок. Правила и список имён – v1-архив.
+
+## Доступность и QA
+
+- Контраст: основной текст ≥ 7:1, muted ≥ 4.5:1, faint только для необязательных подписей.
+- Фокус видим всегда: глобальный `:focus-visible` в components.css.
+- `prefers-reduced-motion` поддержан на уровне токенов (обнуляет длительности).
+- `prefers-contrast: more`: толще фокус-кольцо, границы = `border-strong`, ссылки подчёркнуты, обводка у пилюль.
+- `prefers-reduced-transparency: reduce`: blur на sticky-топбаре снимается, фон становится плотным (легибельность > эффект).
+- Чек-лист перед сдачей экрана — единый гейт `CHECKLIST.md` (Definition of Done): обе темы, состояния loading/empty/error, один primary, нет сырых hex, адаптив, паритет, валидатор 0/0. Прогоняется при любом изменении UI, не только при сдаче нового экрана.
+
+## Подключение
+
+```html
+<link rel="stylesheet" href="kt-ai-tokens.css">
+<link rel="stylesheet" href="kt-ai-components.css">
+<body class="kt-ai-app" data-theme="dark">
+```
+
+Для Next.js-прототипов – кит `templates/kt-ai-shadcn` (**внутри папки ДС**, рядом с app-shell — ДС одна самодостаточная папка; переменные совместимы, источник значений – kt-ai-tokens.css; установка – его `templates/kt-ai-shadcn/PROTOTYPING_WORKFLOW.md`).
+
+**Два рантайма одного контракта.** HTML app-shell (`templates/kt-ai-app-shell.html`) — демо-рантайм с роутингом разделов: рендерит nav-секции (`view="documents"`, мастер `steps`), баннер-навигацию (`banner.actionNav`), коллекции документов. React-кит — **одноэкранный handoff для разработки**: рендерит главный архетип-экран (queue/dashboard/…) + drawer (включая секцию «Документы» из `_docs`), но НЕ роутит вторичные nav-секции — это намеренно (их реализует разработчик под свой роутер). Поэтому `nav.view`, `steps`, `banner.actionNav` — поведение HTML-рантайма; в React это точки расширения.
+
+## Миграция v1 → v2
+
+1. Заменить подключение `archive/kt_ai_terminal_tokens.css` на пару `kt-ai-tokens.css` + `kt-ai-components.css`. Все старые переменные и классы продолжают работать.
+2. Hardcoded-размеры и цвета постепенно переводить на шкалы (`--kt-ai-space-*`, `--kt-ai-text-*`, semantic-цвета).
+3. Новые компоненты (кнопки, формы, modal, toast, banner, skeleton, empty) не писать заново – брать из components.css.
+4. Паритет тем проверять в showcase.html.
+
+## Ритм отступов (правило близости)
+
+`space-*` – сырая шкала для внутренних отступов компонента. **Расстояние МЕЖДУ блоками экрана берётся из отдельной шкалы `stack-*`** – одно значение на роль, а не решение каждого компонента:
+
+| Токен | Значение | Когда |
+|---|---|---|
+| `--kt-ai-stack-tight` | 12px | внутри группы: подпись ↔ контрол, контрол ↔ контрол в одном ряду |
+| `--kt-ai-stack-block` | 16px | между элементами одного блока; полоса карточек KPI; панель управления ↔ то, чем она управляет |
+| `--kt-ai-stack-group` | 24px | **между блоками экрана**: шапка / баннер / KPI / чарт / таблица. Значение по умолчанию |
+| `--kt-ai-stack-region` | 32px | поля рабочей области, топбар ↔ заголовок |
+| `--kt-ai-pad-card` | 20px | интерьер карточки/секции |
+
+Почему шкала, а не `space-*` напрямую: раньше каждый компонент выбирал отбивку сам, и на одном экране получалось пять разных значений для одного и того же отношения «блок ↔ блок» (8/12/16/20/24). Глаз не читает такую разницу как иерархию – он читает её как небрежность, и экран выглядит захламлённым при формально верных токенах. Ровно так разошлись два рантайма: HTML-шелл давал 16/20, React-кит 24/28.
+
+Правило разрешения споров прежнее: если сомневаешься, к какой группе элемент относится визуально – он стоит неправильно. Секционный разрыв (40+, `space-10`) остаётся для смены смысла страницы, а не для соседних блоков одного экрана.
+
+### Одинаковый зазор — не ритм
+
+Шкала не означает «поставь `stack-group` на всё». Ровно так экран становится плоским: панель фильтров, её вкладки и карточки списка расходятся на одно и то же расстояние, и глаз не видит ни одной группы — только столбец одинаково далёких полос. Разнобой читается как небрежность, равномерность — как «здесь ничто ни с чем не связано». Обе ошибки одинаково дорогие.
+
+**Рецепт экрана — три ступени, не одна:**
+
+```
+шапка страницы                        ← 24 (stack-group): регион
+системный баннер                      ← 24 (stack-group): регион
+┌ панель управления                   ← 12 (stack-tight): фильтры и вкладки — ОДНА вещь
+│   фильтры
+│   вкладки
+└                                     ← 16 (stack-block): панель ближе к тому, чем управляет
+┌ содержимое                          
+│   KPI · чарт · карточки списка      ← 16 между блоками, 12 между однородными карточками
+└
+```
+
+Выражается стеком, а не своим классом продукта: `<div class="kt-ai-v" data-gap="group|block|tight|region">`. Если продукту понадобился собственный `app-stack-*` — это сигнал, что группировку не выразили, а обошли.
+
+**Проверка одной фразой:** пройди по вертикали и назови каждый зазор. Если все числа разные — сломана согласованность. Если все одинаковые — сломана группировка. Правильно, когда чисел ровно столько, сколько на экране уровней вложенности.
+
+## Отзывчивость
+
+Брейкпоинты: sm 640 / md 832 / lg 1024 / xl 1280 (`--kt-ai-bp-*`; в media-запросах значения дублируются числом – var() там недоступен).
+
+Shell – три состояния (реализовано в components.css):
+
+1. ≥ lg: полный sidebar 232px.
+2. md..lg: icon-rail 52px – подписи прячутся; в разметке подписи пунктов оборачивать в `<span class="nav-label">`.
+3. < md: sidebar = overlay-drawer (`data-open="true"`), в топбаре burger; drawer документов – full-screen.
+
+Touch (`pointer: coarse`): токены контролов автоматически растут (sm 36, md 44, lg 48, nav-row 40, table-row 52) – компоненты масштабируются сами, ничего переопределять не нужно.
+
+Мобильный топбар: на < sm в топбаре остаются логотип (без текста), статус-чип с ellipsis и одно главное действие; текстовые кнопки прячутся или сворачиваются в иконки; элементы с flex-shrink:0 допустимы только для иконок и тумблера. Бургер для off-canvas панелей – иконка `menu` из спрайта (три линии), не самодельные глифы. Горизонтальный скролл страницы запрещён и гасится системой на < md (overflow-x hidden на .kt-ai-app/.kt-ai-shell).
+
+Таблицы: горизонтальный скролл внутри `table-wrap`; первая колонка может быть sticky (`.kt-ai-sticky-first`); при < md и более 4 колонок – переключаться на список карточек.
+
+## API компонентов (enum-контракт)
+
+| Компонент | Атрибут | Значения |
+|---|---|---|
+| `.kt-ai-btn` | data-variant | (нет) = secondary, `primary`, `ghost`, `danger` |
+| `.kt-ai-btn` | data-size | (нет) = md, `sm`, `lg` |
+| `.kt-ai-btn` | data-loading | `true` – спиннер, клики заблокированы |
+| `.kt-ai-chip` | data-tone | `gray`, `green`, `orange`, `blue`, `purple`, `red` |
+| `.kt-ai-chip` | data-removable | присутствие + `<span class="remove">×</span>` |
+| `.kt-ai-status-pill` | data-status | `ok`, `warn`, `risk`, `info` |
+| `.kt-ai-banner`, `.kt-ai-toast` | data-tone | `ok`, `warn`, `risk`, `info` |
+| `.kt-ai-input/.kt-ai-textarea` | data-invalid | `true` |
+| `.kt-ai-field` | data-invalid | `true` — красит вложенный input/select/textarea (удобно, когда состояние живёт на поле) |
+| `.kt-ai-table` | data-density | (нет) = 48px, `compact`/`dense` 38, `relaxed` 56 (значения из `tokens.json`) |
+| `.kt-ai-table th` | data-sort | присутствие = сортируемая, `asc`, `desc` |
+| `.kt-ai-step-item` | data-state | (нет) = upcoming, `current`, `done` |
+| `.kt-ai-combobox` | data-open | `true` – меню видно |
+| `.kt-ai-table td` | data-label | подпись ячейки в мобильном card-режиме (≤640px). Без неё значение просто выравнивается влево |
+| `.kt-ai-switch-row` | — | готовая строка «подпись + свитч справа». Сам `.kt-ai-switch` — только трек 34px |
+| `.kt-ai-modal` | — | ОБЯЗАТЕЛЬНО внутри `.kt-ai-modal-overlay` — оверлей и есть центрирующий контейнер (`position: fixed` + flex). Соседями они не работают: модалка встанет в поток и уедет со скроллом |
+| `.kt-ai-scroll-locked` | — | на `<html>`, пока открыт модал/drawer: иначе фон скроллится под оверлеем. Снимать при закрытии |
+| `.kt-ai-disclosure` | data-open | `true` — раскрыт. Карточка, разворачивающаяся НА МЕСТЕ. Для очередей, где объекты сравнивают: drawer закрывает список и заставляет открывать по одному. Части: `-head` (кнопка, `aria-expanded`), `-chevron`, `-body`, `-actions` |
+| `.kt-ai-kpi` | — | подпись всегда над значением, порядок `.label`/`.value` в разметке любой |
+| `.kt-ai-combobox .option` | data-selected, data-active | `true` |
+| `.kt-ai-dropzone` | data-drag | `true` – состояние перетаскивания |
+| `.kt-ai-table-bulkbar` | data-open | `true` |
+| `.kt-ai-sidebar` | data-open | `true` (только < md, overlay) |
+| `.kt-ai-notif-item` | data-unread | `true` |
+| `.kt-ai-theme-toggle` | data-mode | `dark`, `light` – бегунок и подсветка иконки |
+| `.kt-ai-diff .line` | data-op | `add`, `del` |
+| nav-item, tab, segmented .seg, pagination .page-btn | data-active | `true` |
+| `.kt-ai-msg` | data-role | `user`, `assistant` |
+| `.kt-ai-msg` | data-streaming | `true` – каретка генерации |
+| `.kt-ai-prompt-bar` | data-busy | `true` – ввод заблокирован на время генерации |
+| `.kt-ai-menu`, `.kt-ai-popover` | data-open | `true` |
+| `.kt-ai-menu .item` | data-danger | `true` – деструктивный пункт |
+| `.kt-ai-popover` | data-align | (нет) = left, `right` |
+| `.kt-ai-table-bulkbar` | data-floating | `true` – плавающий снизу |
+| `.kt-ai-command .cmd-item` | data-active | `true` |
+| `.kt-ai-card` | data-glow | `strong` – усиленное aurora-свечение (hero/AI) |
+| `.kt-ai-btn` | data-ai | `true` – градиентная AI-кнопка (точка входа Төре) |
+| `.kt-ai-table-wrap` | data-framed | `true` – контейнер с рамкой (дефолт – frameless) |
+| `.kt-ai-link` | data-arrow | присутствие – тихая ссылка «… →» |
+| `.kt-ai-prop .v` | data-empty | `true` – незаполненное значение |
+| `.kt-ai-kpi-strip` | data-cards | `true` – сетка стат-карточек (radius-2xl, card-токены) вместо тихой полосы |
+
+## Локализация
+
+- Казахские строки длиннее русских на ~20%: запрещены фиксированные ширины под текст кнопок, чипов, пунктов меню; truncation с ellipsis + tooltip полного значения.
+- Числа: тысячи пробелом (`1 240`), тенге после числа (`1 240 ₸`), числа в таблицах — **sans + `tabular-nums`** (цифры Inter выровнены по ширине; в JetBrains Mono нет глифа ₸, из-за чего валюта подставлялась из другого шрифта и рвала колонку). Моноширинный остаётся только у `.kt-ai-kbd` и командных групп.
+- Даты: `dd.mm.yyyy`, время `hh:mm`, относительные («2 мин», «вчера») только в уведомлениях и лентах.
+
+## Чарты
+
+Максимум 6 серий на график (порядок: chart-blue, green, orange, salmon, pink, red). Оси и подписи – fg-faint, сетка – divider. Заливка под линией – только primary-subtle и только для одной серии. Без 3D, теней и градиентов в данных. Пустое состояние графика – kt-ai-empty, не пустые оси.
+
+## Печать и экспорт
+
+Подключить `kt-ai-print.css` (генерируется из tokens.json): при печати принудительно light-палитра, скрываются shell/кнопки/тосты, формат A4 с полями 18/16 мм, карточки и таблицы не разрываются. Элементы, которые не должны попасть в PDF, помечать `data-no-print`.
+
+## Иконочные кнопки и деструктивные действия
+
+Icon-only кнопка обязана иметь tooltip (`.kt-ai-tooltip[data-tip]`) и aria-label. Деструктивные действия: никогда не icon-only; подтверждение в modal; кнопка подтверждения – глаголом действия («Удалить агента», «Отправить в Реестр»), никогда «Да»/«ОК»; для необратимых операций – ввод имени объекта.
+
+## Правило двух продуктов
+
+Новый компонент попадает в систему только когда он понадобился второму продукту. До этого живёт в продукте. Это держит систему маленькой и честной.
+
+## Визуальная регрессия
+
+`scripts/visual_check.mjs` (Playwright): скриншоты showcase в обеих темах и трёх ширинах (1280/900/600), сравнение с эталонами в `scripts/__screenshots__/`. Запуск локально: `npx playwright install chromium && node scripts/visual_check.mjs`. Прогонять при любом изменении tokens.json или components.css.
+
+## Do / Don't
+
+- Do: ряды вместо крупных карточек; таблица – главный объект экрана; детали в drawer; метрики тихой полосой (в дашбордах/кабинетах с 2-4 главными метриками – `data-cards="true"`); primary-действие монохромное (near-black/near-white); кнопки create/«Новый X» – с ведущим «+»; один фильтрующий поиск на экран; AI-кнопка Төре – в топбаре рядом с поиском; продукт-специфичный текст – в контракте, не в shell.
+- Don't: карточки в карточках; декоративные градиенты, свечения и blur в контенте (исключения: единичная AI-искра орба/send/prompt-bar, blur на sticky-хроме и overlay); синий как заливка primary-кнопки; больше одного primary; цвет hex напрямую; новые цвета/иконки/геометрия под отдельный продукт; разная геометрия в темах; дисклеймеры/нравоучения в UI; два одинаково фильтрующих поиска; лишний input/селект там, где хватает прямой кнопки.
diff --git a/design-system/docs/GOAL.md b/design-system/docs/GOAL.md
new file mode 100644
index 0000000..1d15762
--- /dev/null
+++ b/design-system/docs/GOAL.md
@@ -0,0 +1,57 @@
+# Цель: KT AI как фабрика прототипов
+
+Северная звезда дизайн-системы KT AI. Этот документ отвечает на вопрос «зачем всё это» и задаёт критерий, по которому проверяется любое решение по системе. `DESIGN.md` — чем строить, `PRINCIPLES.md` — почему так, `GOAL.md` — ради чего.
+
+## Standing instruction (`/goal`)
+
+> Строить из дизайн-системы KT AI **фабрику прототипов**, где бизнес-аналитик за один рабочий день превращает паспорт агента и интервью Төре в **правдивый кликабельный прототип процесса владельца**, итерирует с владельцем в течение часов, а на выходе отдаёт команде разработки **репозиторий с продакшн-готовым фронтендом без дизайн-долга**. Главное уравнение системы: **прототип === фронтенд продакшна**. Каждое улучшение приближает это уравнение к истине; что не приближает — не приоритет.
+
+Делать по одному, проверять, улучшать. Систему держать маленькой и честной (правило двух продуктов).
+
+## Конечный образ результата
+
+БА садится с владельцем процесса — на руках паспорт агента и 25-минутное интервью Төре. К концу того же дня владелец кликает прототип **своего** процесса: его колонки, его статусы, его рабочее действие, AI-ассистент отвечает по его данным. Не макет с выдуманными строками — правдивый первый срез. Владелец оставляет комментарии прямо на экране. БА правит конфиг, не код, — следующая версия готова в тот же день.
+
+После одобрения БА отдаёт разработчикам **git-репозиторий, фронтенд которого уже продакшн-готов**: те же токены, те же компоненты, тот же код. Разработчики добавляют только то, что умеют только они: авторизацию, роли, реальные интеграции, бэкенд. Фронтенда они почти не пишут. Дизайн-долга на handoff нет, потому что прототип и продукт никогда не были разными вещами.
+
+## Определение готовности (Definition of Done системы)
+
+1. **Один контракт.** Единый типизированный продуктовый контракт (`product.config`) — общий язык: Төре его выдаёт, превью рендерит, React-стартер из него собирается, валидатор проверяет, handoff-док из него читает. Четырёх копий одной идеи больше нет.
+2. **Один рантайм.** Кликабельный прототип БА и стартовый репозиторий разработчика — один и тот же код. HTML-превью без сборки — быстрое окно в тот же контракт, а не параллельная вселенная.
+3. **Правда по построению.** У каждого поля, которое видит владелец, объявлены тип, допустимые значения, владелец данных и признак редактируемости — это собирается в паспорте/интервью. Никакой выдумки перед владельцем процесса.
+4. **Канон через проверку, не через память.** `kt-ai-lint` валит сборку на сырых hex, отступах вне шкалы, втором primary, debug-языке в копирайте, запрещённых ROI/FTE на операционном дашборде. 12-пунктовый чек-лист становится машиной, которая говорит да или нет.
+5. **Архетипы, не одна форма.** БА выбирает архетип экрана (Операционная очередь / Документ-сравнение / Разговорный агент / Кабинет-решение); у каждого свой пресет контракта, свой эталонный клонируемый прототип и свои правила.
+6. **Замкнутая петля обратной связи.** Прототип несёт режим комментирования в контексте; обратная связь владельца возвращается структурными заметками, а не скриншотами и памятью о созвоне.
+7. **Маленькая и честная.** Правило двух продуктов держится; система растёт, только когда второй продукт это заслужил; дрейф между ДС, копией в Төре и стартером — структурно ноль.
+
+## Метрики (как поймём, что дошли)
+
+| Метрика | Цель |
+|---|---|
+| Время до первого прототипа (интервью → кликабельный) | < 1 рабочего дня |
+| Цикл итерации (фидбэк → новая версия) | часы, не спринт |
+| Переиспользование фронтенда на handoff | ≥ 80% уходит в прод без изменений |
+| Дизайн-долг на handoff | ноль переверстки |
+| Дрейф ДС / Төре / стартер | ноль (один источник, CI) |
+| Пропускная способность одного БА | 3–4 прототипа в месяц без дизайнера в цикле |
+
+## Последовательность строительства (по одному)
+
+**P0 — общий хребет (это и есть цель, остальное — полировка):**
+1. Единая схема продуктового контракта (Zod/JSON Schema): Төре выдаёт, превью и стартер потребляют, валидатор проверяет.
+2. Один рантайм: shadcn-стартер рендерит из типизированного контракта; HTML app-shell демотирован до превью того же контракта без сборки.
+3. Field-level data contract в паспорте и интервью Төре (тип, значения, владелец, редактируемость).
+
+**P1 — быстро и честно на масштабе:**
+4. `kt-ai-lint` — исполняемые правила на сгенерированном выводе, в CI.
+5. Пресеты архетипов + эталонные клонируемые прототипы.
+6. Режим обратной связи в прототипе (комментарии в контексте → markdown).
+
+**P2 — гигиена:**
+7. Убрать дубликат ДС из репозитория Төре (submodule/пакет/CI-проверка).
+8. Одностраничный runbook старта + один машинный свод правил; глубокие доки — справочник.
+9. `visual_check.mjs` в CI без ручного запуска.
+
+## Решающий критерий
+
+Перед любой работой по системе спросить: **приближает ли это уравнение «прототип === фронтенд продакшна»?** Если да — делаем. Если нет — это не приоритет, как бы красиво ни выглядело.
diff --git a/design-system/docs/PRINCIPLES.md b/design-system/docs/PRINCIPLES.md
new file mode 100644
index 0000000..1145817
--- /dev/null
+++ b/design-system/docs/PRINCIPLES.md
@@ -0,0 +1,60 @@
+# Принципы UX/UI KT AI – применять при создании любого дизайна
+
+Рабочий контракт принципов: «почему так». DESIGN.md – «чем строить», ELEVENLABS_DESIGN.md – «как выглядит». **Проверка («прошло или нет») вынесена в единый гейт `CHECKLIST.md`** — прогоняй его при любом изменении UI (новый продукт / фича / правка). Этот файл объясняет, ПОЧЕМУ пункты гейта именно такие.
+
+## 10 эвристик Нильсена → как они реализованы у нас
+
+1. **Видимость статуса системы.** Каждое действие даёт отклик ≤100мс: loading-кнопка на сабмитах, toast на завершениях, progress на долгих операциях, статус-pill на объектах, стриминг ответов в AI-продуктах. Молчащий интерфейс = баг.
+2. **Соответствие системе и реальному миру.** Язык пользователя, не наш: «Отправить в Реестр», а не «Синхронизировать сущность». Термины из глоссария КТ (Лотус, СЗ, паспорт агента). Иконки – буквальные (Lucide), не метафоры.
+3. **Контроль и свобода.** Из любого состояния есть выход: modal закрывается по Esc и клику мимо, drawer – стрелкой назад, деструктив – с подтверждением, многошаговые процессы (stepper) позволяют вернуться на шаг. Автосохранение черновиков, где возможно.
+4. **Согласованность и стандарты (закон Якоба).** Пользователь приходит из других продуктов – не изобретать: поиск сверху, детали справа в drawer, primary справа в паре кнопок, крестик закрытия справа сверху. Внутри KT AI – единый API компонентов (enum-таблица в DESIGN.md), один компонент = одно поведение во всех продуктах.
+5. **Предотвращение ошибок.** Валидация до сабмита (data-invalid + .error в field), недоступные действия – disabled с объяснением в tooltip, деструктив – глаголом действия и подтверждением, необратимое – вводом имени объекта. Маски и подсказки формата (телефон, даты) до того, как человек ошибся.
+6. **Узнавание вместо вспоминания.** Видимые подписи у иконок в навигации (icon-only только в rail-режиме), placeholder с примером формата, недавние значения в combobox первыми, breadcrumbs показывают где я.
+7. **Гибкость и эффективность.** Два слоя скорости: новичку – видимые кнопки и подсказки, опытному – ⌘K командная палитра, kbd-шорткаты, плотность таблиц (data-density), bulk-операции.
+8. **Эстетика и минимализм.** Каждый элемент экрана зарабатывает своё место: один primary, KPI тихой полосой, метаданные muted, пустое пространство – инструмент, а не потеря. Правило: убери элемент – если экран не сломался, элемент был лишним.
+9. **Помощь в распознавании и восстановлении после ошибок.** Текст ошибки говорит: что случилось, почему, что делать. «Не удалось сохранить: нет связи с сервером – повторите через минуту», а не «Ошибка 500». Тон risk-banner, рядом действие повтора.
+10. **Справка и документация.** Подсказки в месте использования: hint под полем, tooltip на icon-only, onboarding-экран перед сложным flow (как в AI Interviewer), empty-state объясняет «что здесь будет и как начать».
+
+## Правила по референсу ElevenLabs (Mobbin) — сверять при любом экране
+
+ElevenLabs (мониторинг через Mobbin) — главный живой референс системы. Правила ниже выведены из их продакшн-экранов и обязательны:
+
+- **KPI-карточка: три уровня сверху вниз — подпись, значение, уточнение.** Маленькая muted-подпись, сразу под ней значение (sans, tabular-nums, semibold), при необходимости третьим уровнем `.hint` — знаменатель, доля или период («из 2 954 · 58 % плана»). Значение — число или короткая величина (≤12 символов); слова-квалификаторы («при норме 7 дней», «за неделю») живут в подписи, не в значении. Длинное значение автоматически мельче (`data-long`), но это страховка, а не норма. **Значение не прижимается к низу карточки:** в полосе из карточек с уточнением и без числа встанут на разной высоте, и глаз прочитает их как разные по важности. Полоса выравнивает карточки по верху.
+- **KPI как табы (dashboard).** Клик по метрике переключает большой чарт периода. Выбранная — рамка-акцент; никаких стрелок/иконок-подсказок на невыбранных, доступность через hover и `role=tab`.
+- **Одна цифра — один раз на экране.** Значение метрики живёт на KPI-карточке; шапка чарта её НЕ повторяет (только название ряда и период). Дубли одной цифры в трёх местах — баг.
+- **Главная страница — обзор, не свалка.** Дашборд: KPI → чарт → разборы → «Требует внимания» топ-5 со ссылкой «Все →». Полный реестр — отдельный раздел nav (`view:"registry"`: та же таблица с поиском/фильтрами/пагинацией). Как Home vs Voices/History у ElevenLabs.
+- **Разборы под чартом — три формы:** top-N с бар-треком за подписью («Top called paths»), доли с процент-барами («Language»), мини-карточки статистики («Most called agents»). Каждый чарт/ряд несёт note — чтение одной фразой.
+- **Многошаговое — вертикальный степпер слева** с номером/галкой, названием и 1-строчным описанием шага (референс их publishing-flow); контент справа, «‹ Назад» ghost слева, primary справа.
+- **Список+чтение (inbox):** узкий список слева (заголовок + muted-подпись + время + pill), панель чтения справа: label:value строки со значениями по правому краю, разбор агента отдельной секцией.
+- **Документ (Studio):** абзацы/фрагменты с тонкой левой чертой; помеченные агентом — с тёплой чертой и плашкой причины. Текст дышит, никакой рамки вокруг каждого абзаца.
+- **Чарты:** один акцентный цвет на ряд, лёгкая пунктирная сетка, area-заливка ≤10% непрозрачности, подписи оси только по краям и шагом, крайние — text-anchor start/end (не режутся).
+
+## Гештальт-принципы → правила вёрстки
+
+- **Близость (proximity).** Расстояние кодирует связь и берётся из шкалы ритма, а не подбирается: внутри группы `stack-tight` (12), между элементами блока `stack-block` (16), **между блоками экрана `stack-group` (24)**, поля области и отрыв от топбара `stack-region` (32), смена секции — `space-10+` (40+). Label ближе к своему полю, чем к чужому. Если элемент визуально «прилип» не к своей группе – это баг вёрстки. **Пять разных значений для одного отношения — баг**: разница в 4px не читается как иерархия, она читается как небрежность. **Один и тот же зазор на всё — баг ровно такой же**: экран становится плоским, панель фильтров и её вкладки расходятся так же далеко, как список от шапки, и ни одна группа не читается. Ритм — это разные расстояния для разных отношений, а не одно расстояние везде.
+- **Сходство (similarity).** Одинаковая роль = одинаковый вид: все ссылки одного цвета, все статусы – pill, все метаданные – meta. Обратное тоже: разная роль обязана выглядеть по-разному (secondary ≠ primary).
+- **Общая область (common region).** Граница/фон группирует сильнее отступа: карточка объединяет, divider разделяет. Не вкладывать карточку в карточку – две рамки спорят за группировку.
+- **Непрерывность и выравнивание.** Всё сидит на 4px-сетке и общих осях: левый край контента – одна линия, числа в таблицах – по правому краю, baseline текста в ряду – общий.
+- **Фигура и фон.** Слои тона (bg → bg-soft → bg-elevated) и overlay создают глубину без теней; модальные поверхности всегда elevated + затемнение фона.
+- **Замыкание.** Усечённые списки с «показать ещё N» – мозг достроит; не выводить 200 строк сразу.
+
+## Законы взаимодействия
+
+- **Фиттс.** Чем важнее и чаще действие, тем больше и ближе цель: primary крупнее визуально, touch-цели ≥44px (pointer: coarse автоматом), зоны клика рядов – весь ряд, а не только текст.
+- **Хик.** Меньше выборов – быстрее решение: меню ≤7 пунктов на уровень, формы шагами (stepper), один вопрос за раз (паттерн AI Interviewer), фильтры по умолчанию свёрнуты до самых ходовых.
+- **Операционная краткость.** Заголовок экрана, фильтры, статусы и кнопки не описывают весь процесс. Они называют рабочий объект или действие: `Очередь рисков`, `Нет документов`, `Подтвердить риск`. Длинные объяснения живут в subtitle, drawer или help.
+- **Метрики по задаче пользователя.** Верхняя карточка, счётчик или виджет отвечает не на вопрос «какую ценность продукт хочет доказать», а на вопрос «зачем пользователь открыл этот экран прямо сейчас». Для рабочего экрана это очередь, просрочка, блокер, риск, задача на подтверждение, новый входящий объект или состояние процесса. ROI, FTE, экономия часов и тенге не выводятся на рабочий экран по умолчанию. Они живут только там, где пользователь принимает управленческое решение по эффекту: management/reporting view, паспорт, расчёт эффекта или экран проекта.
+- **Неприкосновенный shell.** Sidebar, topbar, theme toggle и AI-кнопка Төре – системный контракт, а не творческая зона. Новый продукт меняет рабочую область, таблицу, drawer, формы и сценарии, но не изобретает заново базовую оболочку.
+- **Продуктовый язык вместо debug-языка.** В интерфейсе нельзя показывать внутренние объяснения генерации: `модель вернула`, `fallback`, `не проходит дизайн-систему`, `shell`, `JSON`, `prompt`. Если прототип собран автоматически, пользователь всё равно видит нормальные продуктовые подписи, действия и статусы.
+- **Миллер (7±2).** Чанкование: телефоны с пробелами, длинные таблицы с группировкой, навигация секциями по 3-5 пунктов.
+- **Эффект эстетики-юзабилити.** Аккуратный интерфейс прощает мелкие огрехи и вызывает доверие – поэтому паритет тем, ровные отступы и выравнивание не «полировка», а функциональное требование.
+- **Постепенное раскрытие.** Сложность по запросу: детали в drawer, advanced-настройки за «ещё», JSON/код за переключателем. Первый экран – только то, что нужно для главного действия.
+- **Ориентация (wayfinding).** Каждый экран отвечает на 4 вопроса: где я? куда могу пойти? что здесь? как выйти? Если хоть один без ответа — экран дезориентирует (топбар-крошка, активный пункт nav, заголовок, Esc/назад).
+- **Маппинг и лейблы.** Близость и расположение контрола отражают то, на что он влияет; **если контролу нужен поясняющий лейбл — маппинг слабый**, переделай контрол. Лейблы конкретны: nav называется по содержимому, не общим «зонтиком» — конкретность даёт предсказуемость (не «Управление», а «Лоты»).
+- **Обратная связь: причинность и польза.** Отклик привязан к вызвавшему его событию (fire on cause) и добавляется только там, где нужен (успех/ошибка/коммит/снап), а не на каждый чих. Валидация — по ходу ввода, не на сабмите.
+- **Текст не заменяет устройство экрана.** Объяснение на экране — признак того, что интерфейс не объясняет себя сам. Прежде чем добавить поясняющую строку, оговорку или подзаголовок, проверь: нельзя ли это сказать самим элементом (подпись пилюли, название колонки, подсказка у метки, состояние кнопки). Оговорка живёт РЯДОМ с тем, к чему относится, а не отдельной строкой над списком: у элемента её прочитают в момент решения, над списком — пролистают. Что убирать в первую очередь: подзаголовок, повторяющий заголовок; инструкцию «проверьте и примите решение» там, где это и так единственное действие; пояснение источника данных, которому место в подсказке; текст, одинаковый для всех строк списка. Правило проверяемое: **любая строка текста, которая не меняется от данных, — кандидат на удаление**; если она нужна для честности (оговорка про непроверенное, про тестовые данные, про пробел в данных), она остаётся, но переезжает к элементу.
+- **Ремесло (craft).** Каждый отступ, тайминг и выравнивание — намеренны; внимание к деталям строит доверие. Кривой пиксель читается как «недоделано» независимо от контента.
+
+## Чек-лист
+
+Перенесён в единый гейт → **`CHECKLIST.md`** (Definition of Done). Там же — что машинно ловит `validate_product.py` (`[auto]`), а что требует глаз (`[review]`), и какие гейты прогонять для нового продукта / фичи / правки. Не дублируй чек-лист здесь — правь его в одном месте.
diff --git a/design-system/docs/PRODUCT_CONTRACT.md b/design-system/docs/PRODUCT_CONTRACT.md
new file mode 100644
index 0000000..ccac676
--- /dev/null
+++ b/design-system/docs/PRODUCT_CONTRACT.md
@@ -0,0 +1,93 @@
+# Продуктовый контракт KT AI
+
+Единый контракт, из которого собирается прототип. **Один источник, один рантайм.** Это ключевой механизм северной звезды (`GOAL.md`): *прототип === фронтенд продакшна*.
+
+## Зачем
+
+Раньше форма «входного контракта» дублировалась в четырёх местах и неизбежно дрейфовала:
+`archive/kt_ai_atomic_product_system.md` (yaml) · JSON-конфиг в `kt-ai-app-shell.html` · `kt-ai-shadcn/.../kt-ai-product-input-contract.md` · вывод дизайнера Төре `[[APP]]`.
+
+Теперь каноническая форма одна: **`product.schema.json`** (JSON Schema). Все остальные описания — производные от неё.
+
+## Контур
+
+```
+  Паспорт агента ─┐
+                  ├─►  Төре (дизайнер [[APP]])  ──►  product.config.json  ──►  kt-ai-app-shell.html  ──►  кликабельный прототип
+  Интервью Төре ──┘            выдаёт контракт          ▲   проверяет          потребляет контракт          (владелец кликает, комментирует)
+                                                        │
+                                          scripts/validate_product.py
+                                          (структура по схеме + lint правил ДС)
+                                                        │
+                                                        └──►  handoff: тот же контракт читает kt-ai-prototype-handoff.md
+```
+
+- **Төре выдаёт** контракт по `product.schema.json` (Төре не трогаем — он уже эмитит эту форму).
+- **`kt-ai-app-shell.html` потребляет** его из `<script id="kt-app-config">` — это рантайм, которым владеет ДС.
+- **`validate_product.py` проверяет** — структуру и правила честности.
+- **Handoff читает** тот же контракт: данные → mock-модуль, статусы → workflow, control → primary-действие.
+
+## Поля (кратко; полная форма и все ограничения — в `product.schema.json`)
+
+Ниже описаны **все 31 блок** схемы. Звёздочка — обязательное поле внутри блока.
+
+| Блок | Назначение |
+|---|---|
+| `archetype` | форма экрана из открытого реестра (`queue` дефолт; см. `ARCHETYPES.md`). `layout` — deprecated-алиас |
+| `product` | name (H1, 1-3 слова), purpose (scope ≤90), entity, primary_user, language, **view** (`operational`/`management`) |
+| `user` | name, role владельца |
+| `notifications` | лента уведомлений (text, time, unread) |
+| `steps` | этапы мастера создания (items, current) — НЕ на главном списке |
+| `nav` | разделы sidebar (3-5 на группу): {label, icon}; `group` → общий заголовок для идущих подряд пунктов (заголовок не пункт: в нумерации разделов не участвует, в полосе значков становится разделителем); `view:"documents"`+`docType` → секция-коллекция документов (по `_docs` строк) с кнопкой «Скачать» |
+| `kpis` | тихая метрик-полоса; отвечают на работу пользователя, не на ROI продукта. Значение — всегда НОВОЕ (to-be) состояние: подпись «вместо X» не может стоять над значением X — сколько СТАЛО пишется в value, сколько БЫЛО остаётся в подписи или hint (валидатор ловит, DS-016). `hint` (≤40) — из чего считано; `note` (без потолка) — чем число НЕ является: оговорка о поле-источнике, стоит рядом с числом и не прячется под клик |
+| `scenario` | один сквозной сценарий: headline, **control** (ровно один primary), reject, confirmText, approveTo/rejectTo, `aiSummary` (что сделал агент — 1-2 фразы для drawer) |
+| `statuses` | словарь workflow-статусов: ключ → { label ≤4 слов, tone `ok/warn/risk/info`, `dim?` (гасит терминальные строки) } |
+| `table` | columns + rows — главный объект экрана. Строка: `_flags` (признаки агента), `_docs` (выходные документы [{label,type,status,format}] — карточки со «Скачать») |
+| `drawer` | детали объекта справа (titleKey, fields, flagsLabel) + секция «Документы» из `_docs` строки |
+| `ai` | точка входа Төре (intro, suggestions, answers, fallback) |
+| `banner` | системный баннер «что-почему-что делать» (text, tone). Стоит НАД числами: всё, что в него уходит, читают до первого числа |
+| `search` | поиск в шапке: `placeholder`, `compact` (узкое поле 176px), `shortcut` (сочетание ⌘K/Ctrl+K вместе с бейджем — включаются и выключаются одним полем). В React-ките те же поля — в пропе `search` у `KTAIShell` |
+| `conclusion` | вывод раздела (title, **text**) — последний блок экрана, после таблицы. Противовес баннера: баннер предупреждает ДО чисел, вывод объясняет ПОСЛЕ них. Пустая строка в `text` делит абзацы |
+| `compare` | данные архетипа compare: aLabel, bLabel, pairs[{label,a,b}] |
+| `sections` | данные архетипа custom: секции-карточки [{title, description?, body?, fields?}] |
+| `chart` | сводный bar-chart над таблицей: title, total, unit, color, link; `groupBy` (бары из фильтрованных строк) или `bucket:"day"`+`dateKey` (раскатка по дням + универсальный фильтр диапазона) |
+| `activity` | правый таймлайн-лог действий агента [{title, time, ago, tone, who, tags, summary, link}] — кнопка «Активность» в топбаре |
+| `onboarding` | карусель первого входа [{icon, title, text}] — показ один раз + ссылка повторного показа в низу sidebar |
+| `filterKeys` | какие поля строки дают вкладки-фильтры (string[]). Рантайм берёт **не более 4** + «Все» — закон Хика |
+| `dashboard` | обзорный экран: `series*` (ряды графика), `range` (период), `breakdowns` (разборы под графиком: top-N, доли, мини-карточки) |
+| `analytics` | аналитический экран: `charts*`, `findings*` (выводы словами), `summary`, `period` |
+| `document` | документ с фрагментами: `title*`, `fragments*` (абзацы; помеченные агентом — с причиной), `source` |
+| `artifact` | результат работы агента рядом с чатом: `type`, `title*`, `version`, `preview*`, `actions` (архетип copilot) |
+| `wizard` | многошаговый процесс: `steps*` (номер, название, 1-строчное описание), `current` — вертикальный степпер слева |
+| `inbox` | «список + чтение»: `bodyKey*` и ключи для заголовка/подписи/времени (`titleKey`, `subKey`, `timeKey`) |
+| `calendar` | окна и брони: `events*`, `range`, `title` |
+| `map` | география: `points*`, `lines`, `title` |
+| `timeline` | хронология события: `events*`, `title` |
+
+### Field-level data contract (что делает прототип правдивым)
+
+Колонка таблицы несёт не только `key`/`label`/`type`, но и:
+
+- `values` — допустимые значения для status/enum-колонок (из паспорта/интервью);
+- `source` — откуда значение: SAP, Лотус, KTWorks, агент, человек;
+- `align` / `sortable` — поведение.
+
+Без этого слоя дизайнер выдумывает примеры, и владелец процесса ревьюит вымысел. С ним владелец видит **свои** поля, статусы и источники — первый прототип становится правдивым.
+
+## Как проверить
+
+```bash
+python3 scripts/validate_product.py <ваш-конфиг>.json            # черновая проверка (errors блокируют)
+python3 scripts/validate_product.py <ваш-конфиг>.json --strict   # ВОРОТА handoff/CI: warnings тоже блокируют
+```
+
+Правило: **прототип уходит в handoff/CI только при `--strict` без замечаний** (0 ошибок, 0 предупреждений). Без `--strict` проходят честностные warnings (ROI/FTE на operational, debug-язык, неизвестный архетип) — они допустимы на этапе черновика, но не на сдаче.
+
+Валидатор — это seed `kt-ai-lint`. Он ловит:
+
+- **ERROR** (блокирует): статус в ряду не объявлен в `statuses`; `scenario.approveTo/rejectTo` ссылается на несуществующий статус; `drawer.titleKey`/`fields` не из колонок; лишние/недостающие поля; tone вне `ok/warn/risk/info`; пустой `scenario.control`.
+- **WARN** (правила честности ДС): ROI/FTE/экономия на операционном дашборде (`view=operational`); debug-язык в копирайте (`модель вернула`, `fallback`, `JSON`, `prompt`, `shell`); статус-лейбл > 4 слов; имя экрана/лейблы длиннее нормы; мало строк (< 5).
+
+## Правило
+
+Меняется форма контракта — меняется **только** `product.schema.json`, затем синхронизируются производные описания и проверяется `examples/`. Не плодить пятую копию контракта.
diff --git a/design-system/fonts/InterVariable-subset.woff2 b/design-system/fonts/InterVariable-subset.woff2
new file mode 100644
index 0000000..e0e25d6
Binary files /dev/null and b/design-system/fonts/InterVariable-subset.woff2 differ
diff --git a/design-system/fonts/JetBrainsMono-subset.woff2 b/design-system/fonts/JetBrainsMono-subset.woff2
new file mode 100644
index 0000000..7428566
Binary files /dev/null and b/design-system/fonts/JetBrainsMono-subset.woff2 differ
diff --git a/design-system/fonts/OFL-JetBrainsMono.txt b/design-system/fonts/OFL-JetBrainsMono.txt
new file mode 100644
index 0000000..3f34847
--- /dev/null
+++ b/design-system/fonts/OFL-JetBrainsMono.txt
@@ -0,0 +1,93 @@
+Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/design-system/fonts/OFL.txt b/design-system/fonts/OFL.txt
new file mode 100644
index 0000000..a3049bc
--- /dev/null
+++ b/design-system/fonts/OFL.txt
@@ -0,0 +1,92 @@
+Copyright (c) 2016 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION AND CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/design-system/icons/LUCIDE_LICENSE.txt b/design-system/icons/LUCIDE_LICENSE.txt
new file mode 100644
index 0000000..6bb96aa
--- /dev/null
+++ b/design-system/icons/LUCIDE_LICENSE.txt
@@ -0,0 +1,43 @@
+ISC License
+
+Copyright (c) 2026 Lucide Icons and Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+---
+
+The following Lucide icons are derived from the Feather project:
+
+airplay, alert-circle, alert-octagon, alert-triangle, aperture, arrow-down-circle, arrow-down-left, arrow-down-right, arrow-down, arrow-left-circle, arrow-left, arrow-right-circle, arrow-right, arrow-up-circle, arrow-up-left, arrow-up-right, arrow-up, at-sign, calendar, cast, check, chevron-down, chevron-left, chevron-right, chevron-up, chevrons-down, chevrons-left, chevrons-right, chevrons-up, circle, clipboard, clock, code, columns, command, compass, corner-down-left, corner-down-right, corner-left-down, corner-left-up, corner-right-down, corner-right-up, corner-up-left, corner-up-right, crosshair, database, divide-circle, divide-square, dollar-sign, download, external-link, feather, frown, hash, headphones, help-circle, info, italic, key, layout, life-buoy, link-2, link, loader, lock, log-in, log-out, maximize, meh, minimize, minimize-2, minus-circle, minus-square, minus, monitor, moon, more-horizontal, more-vertical, move, music, navigation-2, navigation, octagon, pause-circle, percent, plus-circle, plus-square, plus, power, radio, rss, search, server, share, shopping-bag, sidebar, smartphone, smile, square, table-2, tablet, target, terminal, trash-2, trash, triangle, tv, type, upload, x-circle, x-octagon, x-square, x, zoom-in, zoom-out
+
+The MIT License (MIT) (for the icons listed above)
+
+Copyright (c) 2013-present Cole Bemis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/design-system/icons/README.md b/design-system/icons/README.md
new file mode 100644
index 0000000..535d0bd
--- /dev/null
+++ b/design-system/icons/README.md
@@ -0,0 +1,50 @@
+# KT AI Icons
+
+Design system icon set: Lucide SVG, local sprite build.
+
+Source:
+
+- Official site: `https://lucide.dev`
+- Repository: `https://github.com/lucide-icons/lucide`
+- Local license copy: `LUCIDE_LICENSE.txt`
+
+License:
+
+- Lucide: ISC.
+- Icons derived from Feather: MIT, listed in `LUCIDE_LICENSE.txt`.
+
+Usage rule:
+
+- Use `kt-ai-lucide-sprite.svg` as the default icon source for KT AI products.
+- Do not draw icons with CSS pseudo-elements.
+- Do not load icon fonts or CDN icon sets for KT AI terminal products.
+- Keep icons monochrome, `currentColor`, 16px default, 1.75px stroke.
+- Use `sun` and `moon` for theme mode toggles.
+
+HTML:
+
+```html
+<svg class="kt-icon" aria-hidden="true">
+  <use href="icons/kt-ai-lucide-sprite.svg#home"></use>
+</svg>
+```
+
+Recommended product-local setup:
+
+1. Copy `kt-ai-lucide-sprite.svg` into the product `assets/` folder as `icons.svg`.
+2. Use `<use href="assets/icons.svg#iconName">` in HTML.
+3. Keep the design-system source file unchanged so future products inherit the same icon language.
+
+
+## Как подключать спрайт (важно)
+
+Внешняя ссылка `<use href="icons/kt-ai-lucide-sprite.svg#home">` **не работает**: браузеры
+блокируют внешние ссылки в `<use>` из `file://` и по CORS — иконки будут пустыми.
+
+Рабочие способы:
+- **HTML-прототипы**: спрайт инлайнится в документ автоматически (`build_tokens.py`,
+  функция `embed_appshell_sprite`), затем `<use href="#home">` — ссылка ВНУТРИ документа.
+- **React-кит**: используй компонент `<KTIcon name="home" />` (`components/kt-ai/kt-ai-icon.tsx`),
+  спрайт лежит в `public/kt-ai/icons.svg`.
+- **Свой проект**: вставь содержимое спрайта в начало `<body>` (или отдай компонентом),
+  дальше `<use href="#имя">`.
diff --git a/design-system/icons/kt-ai-lucide-sprite.svg b/design-system/icons/kt-ai-lucide-sprite.svg
new file mode 100644
index 0000000..07b5215
--- /dev/null
+++ b/design-system/icons/kt-ai-lucide-sprite.svg
@@ -0,0 +1,385 @@
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="position:absolute;width:0;height:0;overflow:hidden">
+  <symbol id="home" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/>
+    <path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
+  </symbol>
+  <symbol id="chat" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22z"/>
+  </symbol>
+  <symbol id="send" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/>
+    <path d="m21.854 2.147-10.94 10.939"/>
+  </symbol>
+  <symbol id="feed" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M4 11a9 9 0 0 1 9 9"/>
+    <path d="M4 4a16 16 0 0 1 16 16"/>
+    <circle cx="5" cy="19" r="1"/>
+  </symbol>
+  <symbol id="lots" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="10"/>
+    <circle cx="12" cy="12" r="1"/>
+  </symbol>
+  <symbol id="source" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <ellipse cx="12" cy="5" rx="9" ry="3"/>
+    <path d="M3 5V19A9 3 0 0 0 21 19V5"/>
+    <path d="M3 12A9 3 0 0 0 21 12"/>
+  </symbol>
+  <symbol id="catalog" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12 7v14"/>
+    <path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/>
+  </symbol>
+  <symbol id="decisions" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M13 5h8"/>
+    <path d="M13 12h8"/>
+    <path d="M13 19h8"/>
+    <path d="m3 17 2 2 4-4"/>
+    <path d="m3 7 2 2 4-4"/>
+  </symbol>
+  <symbol id="risk" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/>
+    <path d="M12 8v4"/>
+    <path d="M12 16h.01"/>
+  </symbol>
+  <symbol id="recommender" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="10"/>
+    <circle cx="12" cy="12" r="6"/>
+    <circle cx="12" cy="12" r="2"/>
+  </symbol>
+  <symbol id="compare" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="18" cy="18" r="3"/>
+    <circle cx="6" cy="6" r="3"/>
+    <path d="M13 6h3a2 2 0 0 1 2 2v7"/>
+    <path d="M11 18H8a2 2 0 0 1-2-2V9"/>
+  </symbol>
+  <symbol id="collections" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/>
+  </symbol>
+  <symbol id="search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="m21 21-4.34-4.34"/>
+    <circle cx="11" cy="11" r="8"/>
+  </symbol>
+  <symbol id="settings" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M10 5H3"/>
+    <path d="M12 19H3"/>
+    <path d="M14 3v4"/>
+    <path d="M16 17v4"/>
+    <path d="M21 12h-9"/>
+    <path d="M21 19h-5"/>
+    <path d="M21 5h-7"/>
+    <path d="M8 10v4"/>
+    <path d="M8 12H3"/>
+  </symbol>
+  <symbol id="chart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M3 3v16a2 2 0 0 0 2 2h16"/>
+    <path d="M7 16h8"/>
+    <path d="M7 11h12"/>
+    <path d="M7 6h3"/>
+  </symbol>
+  <symbol id="table" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18"/>
+  </symbol>
+  <symbol id="sort" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="m21 16-4 4-4-4"/>
+    <path d="M17 20V4"/>
+    <path d="m3 8 4-4 4 4"/>
+    <path d="M7 4v16"/>
+  </symbol>
+  <symbol id="filter" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"/>
+  </symbol>
+  <symbol id="download" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12 15V3"/>
+    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+    <path d="m7 10 5 5 5-5"/>
+  </symbol>
+  <symbol id="chevronRight" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="m9 18 6-6-6-6"/>
+  </symbol>
+  <symbol id="external" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M15 3h6v6"/>
+    <path d="M10 14 21 3"/>
+    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
+  </symbol>
+  <symbol id="help" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <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"/>
+  </symbol>
+  <symbol id="history" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <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"/>
+    <path d="M12 7v5l4 2"/>
+  </symbol>
+  <symbol id="info" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="10"/>
+    <path d="M12 16v-4"/>
+    <path d="M12 8h.01"/>
+  </symbol>
+  <symbol id="users" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
+    <path d="M16 3.128a4 4 0 0 1 0 7.744"/>
+    <path d="M22 21v-2a4 4 0 0 0-3-3.87"/>
+    <circle cx="9" cy="7" r="4"/>
+  </symbol>
+  <symbol id="file" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/>
+    <path d="M14 2v5a1 1 0 0 0 1 1h5"/>
+    <path d="M10 9H8"/>
+    <path d="M16 13H8"/>
+    <path d="M16 17H8"/>
+  </symbol>
+  <symbol id="tool" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"/>
+  </symbol>
+  <symbol id="model" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12 20v2"/>
+    <path d="M12 2v2"/>
+    <path d="M17 20v2"/>
+    <path d="M17 2v2"/>
+    <path d="M2 12h2"/>
+    <path d="M2 17h2"/>
+    <path d="M2 7h2"/>
+    <path d="M20 12h2"/>
+    <path d="M20 17h2"/>
+    <path d="M20 7h2"/>
+    <path d="M7 20v2"/>
+    <path d="M7 2v2"/>
+    <rect x="4" y="4" width="16" height="16" rx="2"/>
+    <rect x="8" y="8" width="8" height="8" rx="1"/>
+  </symbol>
+  <symbol id="dashboard" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <rect width="7" height="9" x="3" y="3" rx="1"/>
+    <rect width="7" height="5" x="14" y="3" rx="1"/>
+    <rect width="7" height="9" x="14" y="12" rx="1"/>
+    <rect width="7" height="5" x="3" y="16" rx="1"/>
+  </symbol>
+  <symbol id="columns" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <rect width="18" height="18" x="3" y="3" rx="2"/>
+    <path d="M9 3v18"/>
+    <path d="M15 3v18"/>
+  </symbol>
+  <symbol id="more" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="1"/>
+    <circle cx="19" cy="12" r="1"/>
+    <circle cx="5" cy="12" r="1"/>
+  </symbol>
+  <symbol id="check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M20 6 9 17l-5-5"/>
+  </symbol>
+  <symbol id="x" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M18 6 6 18"/>
+    <path d="m6 6 12 12"/>
+  </symbol>
+  <symbol id="alert" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" 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-3"/>
+    <path d="M12 9v4"/>
+    <path d="M12 17h.01"/>
+  </symbol>
+  <symbol id="clock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="10"/>
+    <path d="M12 6v6l4 2"/>
+  </symbol>
+  <symbol id="arrowRight" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M5 12h14"/>
+    <path d="m12 5 7 7-7 7"/>
+  </symbol>
+  <symbol id="panelLeftClose" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <rect width="18" height="18" x="3" y="3" rx="2"/>
+    <path d="M9 3v18"/>
+    <path d="m16 15-3-3 3-3"/>
+  </symbol>
+  <symbol id="panelLeft" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <rect width="18" height="18" x="3" y="3" rx="2"/>
+    <path d="M9 3v18"/>
+  </symbol>
+  <symbol id="trophy" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978"/>
+    <path d="M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978"/>
+    <path d="M18 9h1.5a1 1 0 0 0 0-5H18"/>
+    <path d="M4 22h16"/>
+    <path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z"/>
+    <path d="M6 9H4.5a1 1 0 0 1 0-5H6"/>
+  </symbol>
+  <symbol id="pin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/>
+    <circle cx="12" cy="10" r="3"/>
+  </symbol>
+  <symbol id="sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="4"/>
+    <path d="M12 2v2"/>
+    <path d="M12 20v2"/>
+    <path d="m4.93 4.93 1.41 1.41"/>
+    <path d="m17.66 17.66 1.41 1.41"/>
+    <path d="M2 12h2"/>
+    <path d="M20 12h2"/>
+    <path d="m6.34 17.66-1.41 1.41"/>
+    <path d="m19.07 4.93-1.41 1.41"/>
+  </symbol>
+  <symbol id="moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"/>
+  </symbol>
+<symbol id="menu" viewBox="0 0 24 24"><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/></symbol>
+  <symbol id="book" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 7v14"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></symbol>
+  <symbol id="rocket" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><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"/></symbol>
+  <symbol id="sparkles" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .962 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.962 0z"/></symbol>
+  <symbol id="play" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polygon points="6 3 20 12 6 21 6 3"/></symbol>
+  <symbol id="lightbulb" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" 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"/></symbol>
+  <symbol id="plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5v14"/></symbol>
+  <symbol id="minus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></symbol>
+  <symbol id="chevronDown" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></symbol>
+  <symbol id="chevronLeft" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></symbol>
+  <symbol id="arrowLeft" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></symbol>
+  <symbol id="arrowUpDown" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m21 16-4 4-4-4"/><path d="M17 20V4"/><path d="m3 8 4-4 4 4"/><path d="M7 4v16"/></symbol>
+  <symbol id="eye" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></symbol>
+  <symbol id="calendar" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v4M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></symbol>
+  <symbol id="link" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><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"/></symbol>
+  <symbol id="copy" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></symbol>
+  <symbol id="trash" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></symbol>
+  <symbol id="pencil" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></symbol>
+  <symbol id="user" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></symbol>
+  <symbol id="bell" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></symbol>
+  <symbol id="refresh" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" 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="M3 21v-5h5"/></symbol>
+  <symbol id="logout" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m16 17 5-5-5-5"/><path d="M21 12H9"/><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/></symbol>
+  <symbol id="lock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" 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"/></symbol>
+  <symbol id="mail" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></symbol>
+  <symbol id="megaphone" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m3 11 18-5v12L3 14v-3z"/><path d="M11.6 16.8a3 3 0 1 1-5.8-1.6"/></symbol>
+  <symbol id="archive" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <rect width="20" height="5" x="2" y="3" rx="1" />
+    <path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8" />
+    <path d="M10 12h4" />
+  </symbol>
+  <symbol id="arrow-right" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M5 12h14" />
+    <path d="m12 5 7 7-7 7" />
+  </symbol>
+  <symbol id="building" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M10 12h4" />
+    <path d="M10 8h4" />
+    <path d="M14 21v-3a2 2 0 0 0-4 0v3" />
+    <path d="M6 10H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2" />
+    <path d="M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16" />
+  </symbol>
+  <symbol id="chevron-right" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="m9 18 6-6-6-6" />
+  </symbol>
+  <symbol id="alert-circle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="10" />
+    <line x1="12" x2="12" y1="8" y2="12" />
+    <line x1="12" x2="12.01" y1="16" y2="16" />
+  </symbol>
+  <symbol id="check-circle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="10" />
+    <path d="m9 12 2 2 4-4" />
+  </symbol>
+  <symbol id="clipboard" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <rect width="8" height="4" x="8" y="2" rx="1" ry="1" />
+    <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" />
+    <path d="M12 11h4" />
+    <path d="M12 16h4" />
+    <path d="M8 11h.01" />
+    <path d="M8 16h.01" />
+  </symbol>
+  <symbol id="sync" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12 13v8l-4-4" />
+    <path d="m12 21 4-4" />
+    <path d="M4.393 15.269A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.436 8.284" />
+  </symbol>
+  <symbol id="database" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <ellipse cx="12" cy="5" rx="9" ry="3" />
+    <path d="M3 5V19A9 3 0 0 0 21 19V5" />
+    <path d="M3 12A9 3 0 0 0 21 12" />
+  </symbol>
+  <symbol id="spreadsheet" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" />
+    <path d="M14 2v5a1 1 0 0 0 1 1h5" />
+    <path d="M8 13h2" />
+    <path d="M14 13h2" />
+    <path d="M8 17h2" />
+    <path d="M14 17h2" />
+  </symbol>
+  <symbol id="merge" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="18" cy="18" r="3" />
+    <circle cx="6" cy="6" r="3" />
+    <path d="M6 21V9a9 9 0 0 0 9 9" />
+  </symbol>
+  <symbol id="inbox" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
+    <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
+  </symbol>
+  <symbol id="layers" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z" />
+    <path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12" />
+    <path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17" />
+  </symbol>
+  <symbol id="checklist" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M13 5h8" />
+    <path d="M13 12h8" />
+    <path d="M13 19h8" />
+    <path d="m3 17 2 2 4-4" />
+    <path d="m3 7 2 2 4-4" />
+  </symbol>
+  <symbol id="package" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z" />
+    <path d="M12 22V12" />
+    <polyline points="3.29 7 12 12 20.71 7" />
+    <path d="m7.5 4.27 9 5.15" />
+  </symbol>
+  <symbol id="receipt" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12 17V7" />
+    <path d="M16 8h-6a2 2 0 0 0 0 4h4a2 2 0 0 1 0 4H8" />
+    <path d="M4 3a1 1 0 0 1 1-1 1.3 1.3 0 0 1 .7.2l.933.6a1.3 1.3 0 0 0 1.4 0l.934-.6a1.3 1.3 0 0 1 1.4 0l.933.6a1.3 1.3 0 0 0 1.4 0l.933-.6a1.3 1.3 0 0 1 1.4 0l.934.6a1.3 1.3 0 0 0 1.4 0l.933-.6A1.3 1.3 0 0 1 19 2a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1 1.3 1.3 0 0 1-.7-.2l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.934.6a1.3 1.3 0 0 1-1.4 0l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-1.4 0l-.934-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-.7.2 1 1 0 0 1-1-1z" />
+  </symbol>
+  <symbol id="scale" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12 3v18" />
+    <path d="m19 8 3 8a5 5 0 0 1-6 0zV7" />
+    <path d="M3 7h1a17 17 0 0 0 8-2 17 17 0 0 0 8 2h1" />
+    <path d="m5 8 3 8a5 5 0 0 1-6 0zV7" />
+    <path d="M7 21h10" />
+  </symbol>
+  <symbol id="split" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M16 3h5v5" />
+    <path d="M8 3H3v5" />
+    <path d="M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3" />
+    <path d="m15 9 6-6" />
+  </symbol>
+  <symbol id="warning" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" 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-3" />
+    <path d="M12 9v4" />
+    <path d="M12 17h.01" />
+  </symbol>
+  <symbol id="upload" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12 3v12" />
+    <path d="m17 8-5-5-5 5" />
+    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+  </symbol>
+  <symbol id="circleNumber0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.575" stroke-linecap="round" stroke-linejoin="round">
+    <g transform="translate(12 12) scale(1.11111) translate(-12 -12)"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/><path d="M10 10v4a2 2 0 1 0 4 0v-4a2 2 0 1 0 -4 0"/></g>
+  </symbol>
+  <symbol id="circleNumber1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.575" stroke-linecap="round" stroke-linejoin="round">
+    <g transform="translate(12 12) scale(1.11111) translate(-12 -12)"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/><path d="M10 10l2 -2v8"/></g>
+  </symbol>
+  <symbol id="circleNumber2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.575" stroke-linecap="round" stroke-linejoin="round">
+    <g transform="translate(12 12) scale(1.11111) translate(-12 -12)"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/><path d="M10 8h3a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 0 -1 1v2a1 1 0 0 0 1 1h3"/></g>
+  </symbol>
+  <symbol id="circleNumber3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.575" stroke-linecap="round" stroke-linejoin="round">
+    <g transform="translate(12 12) scale(1.11111) translate(-12 -12)"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/><path d="M10 9a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1"/></g>
+  </symbol>
+  <symbol id="circleNumber4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.575" stroke-linecap="round" stroke-linejoin="round">
+    <g transform="translate(12 12) scale(1.11111) translate(-12 -12)"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/><path d="M10 8v3a1 1 0 0 0 1 1h3"/><path d="M14 8v8"/></g>
+  </symbol>
+  <symbol id="circleNumber5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.575" stroke-linecap="round" stroke-linejoin="round">
+    <g transform="translate(12 12) scale(1.11111) translate(-12 -12)"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/><path d="M10 15a1 1 0 0 0 1 1h2a1 1 0 0 0 1 -1v-2a1 1 0 0 0 -1 -1h-3v-4h4"/></g>
+  </symbol>
+  <symbol id="circleNumber6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.575" stroke-linecap="round" stroke-linejoin="round">
+    <g transform="translate(12 12) scale(1.11111) translate(-12 -12)"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/><path d="M14 9a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v6a1 1 0 0 0 1 1h2a1 1 0 0 0 1 -1v-2a1 1 0 0 0 -1 -1h-3"/></g>
+  </symbol>
+  <symbol id="circleNumber7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.575" stroke-linecap="round" stroke-linejoin="round">
+    <g transform="translate(12 12) scale(1.11111) translate(-12 -12)"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/><path d="M10 8h4l-2 8"/></g>
+  </symbol>
+  <symbol id="circleNumber8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.575" stroke-linecap="round" stroke-linejoin="round">
+    <g transform="translate(12 12) scale(1.11111) translate(-12 -12)"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/><path d="M12 12h-1a1 1 0 0 1 -1 -1v-2a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 0 -1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1 -1v-2a1 1 0 0 0 -1 -1"/></g>
+  </symbol>
+  <symbol id="circleNumber9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.575" stroke-linecap="round" stroke-linejoin="round">
+    <g transform="translate(12 12) scale(1.11111) translate(-12 -12)"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/><path d="M10 15a1 1 0 0 0 1 1h2a1 1 0 0 0 1 -1v-6a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v2a1 1 0 0 0 1 1h3"/></g>
+  </symbol>
+</svg>
diff --git a/design-system/kt-ai-chart-tip.js b/design-system/kt-ai-chart-tip.js
new file mode 100644
index 0000000..d3d9f3b
--- /dev/null
+++ b/design-system/kt-ai-chart-tip.js
@@ -0,0 +1,168 @@
+/**
+ * Подсказка значения на диаграмме — один файл на оба рантайма.
+ *
+ * Зачем это в системе, а не в продукте. Столбец молчал: человек видел форму, но
+ * не число, и уходил за ним в таблицу под диаграммой — диаграмма переставала
+ * быть ответом и становилась оглавлением. Затыкали это нативным `title`, а он
+ * не компонент: появляется через секунду, рисуется средствами ОС (чужой шрифт,
+ * ни одного токена, в тёмной теме — вставка из другого продукта), недоступен с
+ * клавиатуры, не читается диктором, на планшете не показывается вовсе и умеет
+ * ровно одну строку. Собери такую подсказку каждый продукт сам — их станет
+ * пять разных.
+ *
+ * ЧИСЛА СЧИТАЕТ ПРОДУКТ. Скрипт не форматирует и не пересчитывает ничего: он
+ * показывает строки, которые пришли готовыми. Разошедшийся формат — это
+ * разошедшееся число, а сервер и браузер округляют по-разному.
+ *
+ * Разметка марки:
+ *   <div class="cc-bar" data-kt-tip="14.05.2026: 1 284">…</div>
+ *   <div class="cc-bar" data-kt-tip='{"title":"14 мая 2026, четверг",
+ *        "rows":[{"label":"Диалогов","value":"1 284"},
+ *                {"label":"Доля периода","value":"3,9%"}]}'>…</div>
+ *
+ * Слушателей ровно три, на document, — не по одному на марку. Диаграмма
+ * перерисовывается на каждую смену фильтра и периода (31 столбец на обзоре,
+ * 168 клеток на карте нагрузки), и подсказка обязана пережить перерисовку без
+ * повторной инициализации со стороны продукта.
+ */
+(function () {
+  "use strict";
+  if (typeof document === "undefined" || window.ktAiChartTip) return;
+
+  var МЕТКА = "[data-kt-tip]";
+  var узел = null;      // единственный элемент подсказки на страницу
+  var текущая = null;   // марка, к которой она привязана
+
+  function создать() {
+    if (узел) return узел;
+    узел = document.createElement("div");
+    узел.className = "kt-ai-chart-tip";
+    узел.setAttribute("role", "tooltip");
+    узел.id = "kt-ai-chart-tip";
+    узел.hidden = true;
+    document.body.appendChild(узел);
+    return узел;
+  }
+
+  function текстом(строка) {
+    var el = document.createElement("div");
+    el.className = "tip-title";
+    el.textContent = строка;
+    return [el];
+  }
+
+  /** Разбирает data-kt-tip: JSON-объект или простая строка. */
+  function содержимое(марка) {
+    var сырое = марка.getAttribute("data-kt-tip") || "";
+    if (сырое.charAt(0) !== "{") return текстом(сырое);
+    var данные;
+    try {
+      данные = JSON.parse(сырое);
+    } catch {
+      return текстом(сырое); // битый JSON показываем как есть, а не роняем экран
+    }
+    var части = [];
+    if (данные.title) {
+      var t = document.createElement("div");
+      t.className = "tip-title";
+      t.textContent = данные.title;
+      части.push(t);
+    }
+    var строки = Array.isArray(данные.rows) ? данные.rows.slice(0, 3) : [];
+    if (строки.length) {
+      var таблица = document.createElement("dl");
+      таблица.className = "tip-rows";
+      строки.forEach(function (r) {
+        var dt = document.createElement("dt");
+        dt.textContent = r && r.label != null ? String(r.label) : "";
+        var dd = document.createElement("dd");
+        dd.textContent = r && r.value != null ? String(r.value) : "";
+        таблица.appendChild(dt);
+        таблица.appendChild(dd);
+      });
+      части.push(таблица);
+    }
+    return части.length ? части : текстом(сырое);
+  }
+
+  /**
+   * Ставит подсказку над маркой и разворачивает внутрь у края.
+   * Привязка к МАРКЕ, а не к курсору: иначе подсказка дрожит вместе с мышью и
+   * читать её на ходу нельзя.
+   */
+  function поставить(марка) {
+    var m = марка.getBoundingClientRect();
+    var t = узел.getBoundingClientRect();
+    var поля = 8;
+    var x = m.left + m.width / 2 - t.width / 2;
+    x = Math.max(поля, Math.min(x, window.innerWidth - t.width - поля));
+    var сверху = m.top - t.height - 8;
+    var снизу = m.bottom + 8;
+    // Не хватило места сверху (самый высокий столбец) — уходим под марку.
+    var y = сверху >= поля ? сверху : снизу;
+    узел.dataset.side = сверху >= поля ? "top" : "bottom";
+    узел.style.left = Math.round(x + window.scrollX) + "px";
+    узел.style.top = Math.round(y + window.scrollY) + "px";
+  }
+
+  function показать(марка) {
+    if (!марка || марка === текущая) return;
+    скрыть();
+    создать();
+    узел.replaceChildren.apply(узел, содержимое(марка));
+    узел.hidden = false;
+    текущая = марка;
+    марка.setAttribute("data-kt-tip-open", "true");
+    марка.setAttribute("aria-describedby", узел.id);
+    поставить(марка);
+  }
+
+  function скрыть() {
+    if (!текущая) return;
+    текущая.removeAttribute("data-kt-tip-open");
+    текущая.removeAttribute("aria-describedby");
+    текущая = null;
+    if (узел) узел.hidden = true;
+  }
+
+  function марка(цель) {
+    return цель && цель.closest ? цель.closest(МЕТКА) : null;
+  }
+
+  document.addEventListener("pointerover", function (e) {
+    // На тач-устройстве pointerover приходит вместе с нажатием — там показом
+    // управляет pointerdown ниже, иначе подсказка мигнёт и исчезнет.
+    if (e.pointerType === "touch") return;
+    var м = марка(e.target);
+    if (м) показать(м); else скрыть();
+  });
+
+  document.addEventListener("pointerdown", function (e) {
+    if (e.pointerType !== "touch") return;
+    var м = марка(e.target);
+    if (м) показать(м); else скрыть();
+  });
+
+  document.addEventListener("focusin", function (e) {
+    var м = марка(e.target);
+    if (м) показать(м); else скрыть();
+  });
+  document.addEventListener("focusout", function (e) {
+    if (марка(e.target)) скрыть();
+  });
+
+  // Esc убирает подсказку, НЕ снимая фокус: человек продолжает идти по маркам
+  // с клавиатуры, просто перестал смотреть на числа.
+  document.addEventListener("keydown", function (e) {
+    if (e.key === "Escape" && текущая) {
+      e.stopPropagation();
+      скрыть();
+    }
+  });
+
+  // Прокрутка и смена размера сдвигают марку — подсказка обязана уехать с ней.
+  window.addEventListener("scroll", function () { if (текущая) поставить(текущая); }, true);
+  window.addEventListener("resize", скрыть);
+
+  window.ktAiChartTip = { show: показать, hide: скрыть };
+})();
diff --git a/design-system/kt-ai-components.css b/design-system/kt-ai-components.css
new file mode 100644
index 0000000..2ebf080
--- /dev/null
+++ b/design-system/kt-ai-components.css
@@ -0,0 +1,1918 @@
+/* ============================================================
+ * KT AI Components v2.1
+ * Требует kt-ai-tokens.css. Только semantic/component токены,
+ * никаких сырых hex. Имена классов v1 сохранены.
+ * Слой @layer kt-components: продуктовый CSS объявляйте в слое
+ * выше (@layer product) или вне слоёв – он выиграет каскад.
+ * Канон: docs/DESIGN.md · Галерея: showcase.html
+ * ============================================================ */
+
+@layer kt-components {
+
+/* border-box для ВСЕХ компонентов ДС, где бы они ни жили.
+   Компоненты вроде .kt-ai-input объявлены как width:100% + padding + border:
+   в content-box они вылезают из контейнера (замерено: 326px в контейнере 300px).
+   Раньше сброс жил только в HTML app-shell, поэтому баг проявлялся ровно там,
+   где ДС вендорят в чужой проект — в основном сценарии передачи разработчикам.
+   Селектор бьёт только по .kt-ai-*, чтобы не трогать вёрстку хост-приложения. */
+[class*="kt-ai-"], [class*="kt-ai-"]::before, [class*="kt-ai-"]::after { box-sizing: border-box; }
+
+/* Сброс UA-хрома для интерактивных компонентов ДС.
+   Браузер не наследует font-family для button/input/select/textarea и рисует
+   кнопкам свою серую заливку. В HTML app-shell это гасил глобальный сброс,
+   поэтому при вендоринге ДС в чужой проект компоненты приезжали сломанными:
+   .kt-ai-tab — с серым UA-фоном, .kt-ai-filter-chip/.seg/.page-btn — в Arial.
+   :where() даёт НУЛЕВУЮ специфичность — любое правило компонента ниже победит. */
+:where(button[class*="kt-ai-"], input[class*="kt-ai-"],
+       select[class*="kt-ai-"], textarea[class*="kt-ai-"]) {
+  font-family: var(--kt-ai-font-sans);
+  font-size: var(--kt-ai-text-sm);
+  color: inherit;
+}
+:where(button[class*="kt-ai-"]) {
+  -webkit-appearance: none; appearance: none;
+  background: none; border: none; cursor: pointer;
+}
+
+/* ---------- База ---------- */
+.kt-ai-app, .kt-ai-shell {
+  background: var(--kt-ai-bg);
+  color: var(--kt-ai-fg);
+  font-family: var(--kt-ai-font-sans);
+  font-size: var(--kt-ai-text-sm);
+  line-height: var(--kt-ai-leading-normal);
+  -webkit-font-smoothing: antialiased;
+}
+.kt-ai-shell {
+  min-height: 100dvh;
+  display: grid;
+  grid-template-columns: var(--kt-ai-sidebar-width) minmax(0, 1fr);
+}
+.kt-ai-sidebar { background: var(--kt-ai-bg-soft); border-right: 1px solid var(--kt-ai-divider); color: var(--kt-ai-fg-muted); position: sticky; top: 0; align-self: start; height: 100dvh; overflow-y: auto; }
+.kt-ai-main { min-width: 0; background: var(--kt-ai-bg); }
+.kt-ai-work-column { max-width: var(--kt-ai-content-max); margin: 0 auto; padding: var(--kt-ai-space-12) var(--kt-ai-space-8) var(--kt-ai-space-11); }
+.kt-ai-work-column-wide { max-width: var(--kt-ai-content-wide); margin: 0 auto; padding: var(--kt-ai-space-8); }
+.kt-ai-work-column-table { max-width: var(--kt-ai-content-table); margin: 0 auto; padding: var(--kt-ai-space-11) var(--kt-ai-space-8); }
+
+/* Скроллбары */
+.kt-ai-app ::-webkit-scrollbar, .kt-ai-shell ::-webkit-scrollbar { width: 8px; height: 8px; }
+.kt-ai-app ::-webkit-scrollbar-thumb, .kt-ai-shell ::-webkit-scrollbar-thumb { background: var(--kt-ai-border-strong); border-radius: var(--kt-ai-radius-md); }
+.kt-ai-app ::-webkit-scrollbar-track, .kt-ai-shell ::-webkit-scrollbar-track { background: transparent; }
+
+/* Фокус: единый видимый стиль для всего интерактива */
+.kt-ai-app :focus-visible, .kt-ai-shell :focus-visible {
+  outline: 2px solid var(--kt-ai-focus-ring);
+  outline-offset: 1px;
+}
+
+/* ---------- Типографика ---------- */
+.kt-ai-h1 { font-size: var(--kt-ai-text-2xl); font-weight: var(--kt-ai-weight-bold); line-height: var(--kt-ai-leading-tight); letter-spacing: -.02em; }
+.kt-ai-h2 { font-size: var(--kt-ai-text-lg); font-weight: var(--kt-ai-weight-semibold); line-height: var(--kt-ai-leading-tight); letter-spacing: -.01em; }
+.kt-ai-h3 { font-size: var(--kt-ai-text-md); font-weight: var(--kt-ai-weight-semibold); }
+/* Капс оставляем — узнаваемый eyebrow-паттерн. Но капс мелким кеглем это
+   худший случай для чтения, и он не имеет права быть ещё и самым тусклым
+   текстом системы: 11px + .8px разрядки + faint. Кегль на ступень выше,
+   разрядка меньше (на 12px .8px избыточна), цвет — muted. */
+.kt-ai-label { font-family: var(--kt-ai-font-mono); font-size: var(--kt-ai-text-xs); font-weight: var(--kt-ai-weight-semibold); text-transform: uppercase; letter-spacing: .5px; color: var(--kt-ai-fg-muted); }
+.kt-ai-meta { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); }
+.kt-ai-num { font-family: var(--kt-ai-font-sans); font-variant-numeric: tabular-nums; }
+.kt-ai-link { color: var(--kt-ai-link); text-decoration: none; }
+.kt-ai-link:hover { text-decoration: underline; }
+
+/* ---------- Иконки ---------- */
+.kt-icon { width: 16px; height: 16px; display: inline-block; flex: 0 0 16px; color: currentColor; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; }
+.kt-icon-sm { width: 14px; height: 14px; flex-basis: 14px; }
+.kt-icon-lg { width: 20px; height: 20px; flex-basis: 20px; }
+
+/* ---------- Кнопки ---------- */
+.kt-ai-btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: var(--kt-ai-space-3);
+  height: var(--kt-ai-control-h-md);
+  padding: 0 var(--kt-ai-space-5);
+  border-radius: var(--kt-ai-radius-xl);
+  border: 1px solid var(--kt-ai-border-strong);
+  background: var(--kt-ai-bg-elevated);
+  box-shadow: var(--kt-ai-shadow-sm);
+  color: var(--kt-ai-fg);
+  font-family: var(--kt-ai-font-sans);
+  font-size: var(--kt-ai-text-sm);
+  font-weight: var(--kt-ai-weight-medium);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background var(--kt-ai-dur-fast) var(--kt-ai-ease-standard),
+              border-color var(--kt-ai-dur-fast) var(--kt-ai-ease-standard),
+              transform 60ms var(--kt-ai-ease-standard);
+}
+/* hover = тонирующий слой bg-hover поверх поверхности: в dark светлеет, в light темнеет */
+.kt-ai-btn:hover { background-image: linear-gradient(var(--kt-ai-bg-hover), var(--kt-ai-bg-hover)); }
+.kt-ai-btn:active { transform: scale(.98); }
+.kt-ai-btn:disabled { opacity: .4; cursor: default; transform: none; background-image: none; }
+
+.kt-ai-btn[data-variant="primary"] { background: var(--kt-ai-primary); border-color: var(--kt-ai-primary); color: var(--kt-ai-fg-on-fill); font-weight: var(--kt-ai-weight-semibold); box-shadow: inset 0 1px 0 var(--kt-ai-inset-highlight); }
+.kt-ai-btn[data-variant="primary"]:hover { background: var(--kt-ai-primary-hover); border-color: var(--kt-ai-primary-hover); }
+.kt-ai-btn[data-variant="ghost"] { border-color: transparent; background: transparent; box-shadow: none; color: var(--kt-ai-fg-muted); }
+.kt-ai-btn[data-variant="ghost"]:hover { color: var(--kt-ai-fg); background: var(--kt-ai-bg-hover); }
+.kt-ai-btn[data-variant="danger"] { background: transparent; box-shadow: none; border-color: var(--kt-ai-danger); color: var(--kt-ai-danger); }
+.kt-ai-btn[data-variant="danger"]:hover { background: var(--kt-ai-danger); color: var(--kt-ai-fg-on-fill); }
+
+.kt-ai-btn[data-size="sm"] { height: var(--kt-ai-control-h-sm); padding: 0 var(--kt-ai-space-4); font-size: var(--kt-ai-text-xs); border-radius: var(--kt-ai-radius-lg); }
+.kt-ai-btn[data-size="lg"] { height: var(--kt-ai-control-h-lg); padding: 0 var(--kt-ai-space-7); font-size: var(--kt-ai-text-md); border-radius: var(--kt-ai-radius-xl); }
+
+.kt-ai-icon-button {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: var(--kt-ai-control-h-md); height: var(--kt-ai-control-h-md);
+  border-radius: var(--kt-ai-radius-lg); border: none; background: transparent;
+  color: var(--kt-ai-fg-muted); cursor: pointer;
+  transition: background var(--kt-ai-dur-fast) var(--kt-ai-ease-standard), color var(--kt-ai-dur-fast) var(--kt-ai-ease-standard);
+}
+.kt-ai-icon-button:hover, .kt-ai-icon-button[data-active="true"] { background: var(--kt-ai-bg-hover); color: var(--kt-ai-fg); }
+
+/* ---------- Формы ---------- */
+.kt-ai-field { display: flex; flex-direction: column; gap: var(--kt-ai-space-2); margin-bottom: var(--kt-ai-space-5); }
+/* Подпись поля. Две формы записи, и обе законны: <div class="kt-ai-field">
+   с <label for="…"> — и <label class="kt-ai-field"> вокруг контрола, где
+   подпись это <span class="cap">. Вторую использует рантайм (подпись собирается
+   из данных, id придумывать неоткуда), первую — ручная вёрстка.
+   Стиль подписи обязан работать в обеих: пока правило знало только про <label>,
+   рантайм красил свою подпись инлайном мимо канона. */
+.kt-ai-field > label, .kt-ai-field > .cap { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); }
+.kt-ai-field .hint { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-faint); }
+.kt-ai-field .error { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-status-risk-fg); }
+
+.kt-ai-input, .kt-ai-select, .kt-ai-textarea {
+  width: 100%;
+  height: 36px;
+  padding: 0 var(--kt-ai-space-5);
+  background: var(--kt-ai-bg-elevated);
+  border: 1px solid var(--kt-ai-border);
+  border-radius: var(--kt-ai-radius-xl);
+  color: var(--kt-ai-fg);
+  font-family: var(--kt-ai-font-sans);
+  font-size: var(--kt-ai-text-sm);
+  transition: border-color var(--kt-ai-dur-fast) var(--kt-ai-ease-standard), box-shadow var(--kt-ai-dur-fast) var(--kt-ai-ease-standard);
+}
+.kt-ai-textarea { height: auto; min-height: 72px; padding: var(--kt-ai-space-4) var(--kt-ai-space-5); resize: vertical; line-height: var(--kt-ai-leading-normal); }
+/* Единственные места, где сквозь hairline-эстетику просвечивала ОС: системный
+   двойной шеврон у select (свой на macOS и свой на Windows) и уголок resize у
+   textarea. Шеврон рисуем через ::after на обёртке, а не фоновой картинкой:
+   data-URI пришлось бы дублировать под каждую тему, иначе стрелка исчезает на
+   тёмном фоне. currentColor решает это сам. */
+.kt-ai-textarea::-webkit-resizer { display: none; }
+.kt-ai-select { -webkit-appearance: none; appearance: none; padding-right: var(--kt-ai-space-8); }
+.kt-ai-select::-ms-expand { display: none; }
+.kt-ai-select-wrap { position: relative; display: inline-flex; align-items: center; width: 100%; }
+.kt-ai-select-wrap > .kt-ai-select { width: 100%; }
+.kt-ai-select-wrap::after {
+  content: ""; position: absolute; right: var(--kt-ai-space-4); width: 14px; height: 14px;
+  pointer-events: none; color: var(--kt-ai-fg-muted); background: currentColor;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
+}
+/* Без обёртки шеврон рисуем прямо на select фоном — вес штриха 1.75, как у
+   спрайта. Цвет зашит нейтральным серым: он читается в обеих темах. */
+.kt-ai-select:not(.kt-ai-select-wrap > *) {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right var(--kt-ai-space-4) center;
+  background-size: 14px 14px;
+}
+.kt-ai-input::placeholder, .kt-ai-textarea::placeholder { color: var(--kt-ai-fg-faint); }
+.kt-ai-input:focus, .kt-ai-select:focus, .kt-ai-textarea:focus { outline: none; border-color: var(--kt-ai-primary); box-shadow: var(--kt-ai-focus-shadow); }
+.kt-ai-input[data-invalid="true"], .kt-ai-textarea[data-invalid="true"] { border-color: var(--kt-ai-danger); }
+/* data-invalid и на ОБЁРТКЕ поля: PRINCIPLES описывает API как «data-invalid + .error
+   в field», и разработчик естественно вешает атрибут на .kt-ai-field — раньше в этом
+   случае инпут молча оставался обычным, ошибку выдавал только красный текст. */
+.kt-ai-field[data-invalid="true"] :is(.kt-ai-input, .kt-ai-select, .kt-ai-textarea) { border-color: var(--kt-ai-danger); }
+/* Парные строки «ключ-значение» (intake-репитер, ElevenLabs Voice Design) */
+.kt-ai-kv { display: flex; flex-direction: column; gap: var(--kt-ai-space-3); }
+.kt-ai-kv-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--kt-ai-space-3); align-items: center; }
+
+.kt-ai-checkbox { display: inline-flex; align-items: center; gap: var(--kt-ai-space-4); font-size: var(--kt-ai-text-sm); cursor: pointer; }
+/* accent-color красит СИСТЕМНЫЙ чекбокс: жирная галка в квадрате со
+   скруглением ОС, рядом с волосяными строками таблицы — чужеродный элемент,
+   к тому же разный на macOS и Windows. Рисуем свой. */
+.kt-ai-checkbox input {
+  -webkit-appearance: none; appearance: none; position: relative;
+  width: 16px; height: 16px; flex-shrink: 0; margin: 0; cursor: pointer;
+  border: 1px solid var(--kt-ai-border-strong);
+  border-radius: var(--kt-ai-radius-sm);
+  background: var(--kt-ai-bg-elevated);
+  transition: background var(--kt-ai-dur-fast) var(--kt-ai-ease-standard),
+              border-color var(--kt-ai-dur-fast) var(--kt-ai-ease-standard);
+}
+.kt-ai-checkbox input:hover:not(:disabled) { border-color: var(--kt-ai-fg-muted); }
+.kt-ai-checkbox input:checked,
+.kt-ai-checkbox input:indeterminate { background: var(--kt-ai-primary); border-color: var(--kt-ai-primary); }
+/* Галка — две линии через border, а не символ: символ зависит от шрифта. */
+.kt-ai-checkbox input:checked::after {
+  content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px;
+  border: solid var(--kt-ai-fg-on-fill); border-width: 0 1.75px 1.75px 0;
+  transform: rotate(45deg);
+}
+.kt-ai-checkbox input:indeterminate::after {
+  content: ""; position: absolute; left: 3px; top: 6px; width: 8px; height: 1.75px;
+  background: var(--kt-ai-fg-on-fill);
+}
+.kt-ai-checkbox input:disabled { opacity: .45; cursor: not-allowed; }
+/* Цель клика — вся ячейка, а не 16px: попасть в 16px мышью тяжело (закон Фиттса). */
+.kt-ai-table td:has(> .kt-ai-checkbox) .kt-ai-checkbox { width: 100%; height: 100%; justify-content: center; }
+/* Сенсорная цель чекбокса задаётся общим правилом-порогом в конце файла: держать
+   её здесь значило определить одно и то же в двух местах и разными числами. */
+
+.kt-ai-switch { position: relative; display: inline-block; width: 34px; height: 20px; flex-shrink: 0; }
+/* Свитч сам по себе — только трек 34px. Подпись рядом с ним требовала ручной вёрстки,
+   и две подписи наезжали друг на друга. .kt-ai-switch-row даёт готовую строку. */
+.kt-ai-switch-row { display: flex; align-items: center; gap: var(--kt-ai-space-5); width: 100%; padding: var(--kt-ai-space-3) 0; font-size: var(--kt-ai-text-sm); cursor: pointer; }
+.kt-ai-switch-row .kt-ai-switch { order: 2; margin-left: auto; }
+.kt-ai-switch-row > span:not(.track) { order: 1; }
+.kt-ai-switch input { opacity: 0; width: 0; height: 0; }
+.kt-ai-switch .track { position: absolute; inset: 0; background: var(--kt-ai-bg-active); border: 1px solid var(--kt-ai-border-strong); border-radius: var(--kt-ai-radius-full); transition: background var(--kt-ai-dur-base) var(--kt-ai-ease-standard); }
+.kt-ai-switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--kt-ai-fg-muted); transition: transform var(--kt-ai-dur-base) var(--kt-ai-ease-standard), background var(--kt-ai-dur-base); }
+.kt-ai-switch input:checked + .track { background: var(--kt-ai-primary); border-color: var(--kt-ai-primary); }
+.kt-ai-switch input:checked + .track::after { transform: translateX(14px); background: var(--kt-ai-fg-on-fill); }
+
+/* ---------- Навигация ---------- */
+.kt-ai-nav-item {
+  position: relative;
+  display: flex; align-items: center; gap: var(--kt-ai-space-4);
+  height: var(--kt-ai-nav-row);
+  padding: 0 var(--kt-ai-space-4);
+  border-radius: var(--kt-ai-radius-lg);
+  color: var(--kt-ai-fg-muted);
+  font-size: var(--kt-ai-text-sm);
+  cursor: pointer;
+  transition: background var(--kt-ai-dur-fast) var(--kt-ai-ease-standard), color var(--kt-ai-dur-fast);
+}
+.kt-ai-nav-item:hover { background: var(--kt-ai-bg-hover); color: var(--kt-ai-fg); }
+.kt-ai-nav-item[data-active="true"] { background: var(--kt-ai-bg-active); color: var(--kt-ai-fg); }
+.kt-ai-nav-item[data-active="true"]::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 2px; border-radius: var(--kt-ai-radius-full); background: var(--kt-ai-primary); }
+.kt-ai-nav-item .count { margin-left: auto; font-family: var(--kt-ai-font-sans); font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-faint); font-variant-numeric: tabular-nums;}
+/* v5.8.0: счётчик в ДВА значения — «сколько всего / сколько уже сделано».
+   Одним приглушённым цветом это читается как одно число с косой чертой, и
+   продукт подставлял вместо счётчика свою строку, чтобы выделить «сделано»
+   тоном. Разные тона — не украшение: они и есть разница между «объём работы» и
+   «мой прогресс», за которой пользователь и смотрит на пункт меню.
+   Класс живёт отдельно от .count и годится не только в меню (вкладка, заголовок
+   секции): пара «всего/сделано» есть везде, где работу разбирают. */
+.kt-ai-count-split { display: inline-flex; align-items: baseline; gap: 1px; font-family: var(--kt-ai-font-sans); font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-faint); font-variant-numeric: tabular-nums; }
+.kt-ai-nav-item .kt-ai-count-split { margin-left: auto; }
+.kt-ai-count-split .sep { opacity: .7; }
+.kt-ai-count-split .done { color: var(--kt-ai-status-ok-fg); font-weight: var(--kt-ai-weight-semibold); }
+
+/* v6.3.0: заголовок группы разделов.
+   Тринадцать пунктов подряд читаются как список ссылок, а не как устройство
+   продукта. Заголовок — НЕ пункт: он не кликается, не получает фокус и не
+   участвует в нумерации разделов (переход идёт по индексу пункта). Поэтому он
+   и оформлен не как пункт — без высоты ряда, без фона, кеглем подписи. */
+.kt-ai-nav-group {
+  padding: var(--kt-ai-space-6) var(--kt-ai-space-4) var(--kt-ai-space-2);
+  font-size: var(--kt-ai-text-2xs); font-weight: var(--kt-ai-weight-medium);
+  color: var(--kt-ai-fg-faint); letter-spacing: .02em;
+}
+/* Первый заголовок стоит под шапкой сайдбара — отбивать его сверху нечем. */
+.kt-ai-nav-group:first-child { padding-top: var(--kt-ai-space-2); }
+
+.kt-ai-brand-row { display: flex; align-items: center; gap: var(--kt-ai-space-4); color: var(--kt-ai-fg); font-weight: var(--kt-ai-weight-bold); }
+.kt-ai-brand-row img { width: 22px; height: 22px; object-fit: contain; }
+
+/* v4.0: на телефоне поиск уходит – топбару нечем дышать */
+@media (max-width: 639.98px) { .kt-ai-search, .kt-ai-search-field { display: none; } }
+.kt-ai-search {
+  width: 100%; max-width: 320px; height: var(--kt-ai-control-h-sm);
+  padding: 0 var(--kt-ai-space-4);
+  background: var(--kt-ai-bg-elevated);
+  border: 1px solid var(--kt-ai-border);
+  border-radius: var(--kt-ai-radius-lg);
+  box-shadow: none;
+  color: var(--kt-ai-fg);
+  font-size: var(--kt-ai-text-sm);
+}
+.kt-ai-search:focus { outline: none; border-color: var(--kt-ai-primary); box-shadow: var(--kt-ai-focus-shadow); }
+
+/* ---------- Поиск в шапке: поле + подсказка сочетания ----------
+   v6.5.0. Подсказка «⌘K» жила текстом ВНУТРИ placeholder: «Поиск…  ⌘K».
+   Из-за этого её нельзя было ни убрать, ни перевести на Ctrl, ни отличить от
+   собственно подсказки поля — а на проде она занимала место, которого в шапке
+   нет. Теперь это элемент, а не строка: показывается там, где сочетание
+   действительно работает, и убирается там, где не нужно.
+
+   Обёртка нужна, чтобы бейдж стоял ВНУТРИ поля и не съезжал при изменении
+   ширины. Голый .kt-ai-search продолжает работать без обёртки — им набраны
+   фильтры над таблицами, у которых никакого сочетания нет. */
+.kt-ai-search-field { position: relative; display: inline-flex; align-items: center; width: 100%; max-width: 320px; }
+.kt-ai-search-field .kt-ai-search { max-width: none; }
+/* Место под бейдж освобождается только когда бейдж есть: иначе текст запроса
+   упирался бы в пустоту справа. */
+.kt-ai-search-field[data-shortcut="true"] .kt-ai-search { padding-right: var(--kt-ai-space-11); }
+.kt-ai-search-field .kt-ai-kbd { position: absolute; right: var(--kt-ai-space-3); pointer-events: none; }
+
+/* Компактный вариант: поле уступает место остальной шапке.
+   Бейдж в нём не показывается — 176px это ширина запроса, а не запроса с
+   подписью; сочетание при этом продолжает работать, просто о нём не написано
+   в поле (оно названо в title кнопки/поля). */
+.kt-ai-search-field[data-compact="true"] { max-width: 176px; }
+.kt-ai-search-field[data-compact="true"] .kt-ai-kbd { display: none; }
+.kt-ai-search-field[data-compact="true"] .kt-ai-search { padding-right: var(--kt-ai-space-4); }
+
+.kt-ai-kbd {
+  display: inline-flex; align-items: center;
+  padding: 1px var(--kt-ai-space-3);
+  background: var(--kt-ai-bg-active);
+  border: 1px solid var(--kt-ai-border);
+  border-radius: var(--kt-ai-radius-sm);
+  font-family: var(--kt-ai-font-mono);
+  font-size: var(--kt-ai-text-2xs);
+  color: var(--kt-ai-fg-muted);
+}
+
+/* ---------- Tabs / Segmented ---------- */
+.kt-ai-tabs { display: flex; gap: var(--kt-ai-space-1); border-bottom: 1px solid var(--kt-ai-border); }
+.kt-ai-tab { padding: var(--kt-ai-space-4) var(--kt-ai-space-5); font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--kt-ai-dur-fast); }
+.kt-ai-tab:hover { color: var(--kt-ai-fg); }
+.kt-ai-tab[data-active="true"] { color: var(--kt-ai-primary); border-bottom-color: var(--kt-ai-primary); font-weight: var(--kt-ai-weight-medium); }
+.kt-ai-tab .count { font-family: var(--kt-ai-font-sans); font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-faint); margin-left: var(--kt-ai-space-2); font-variant-numeric: tabular-nums;}
+
+.kt-ai-segmented { display: inline-flex; gap: 2px; background: var(--kt-ai-bg-soft); border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-xl); padding: 2px; }
+.kt-ai-segmented .seg { padding: var(--kt-ai-space-2) var(--kt-ai-space-5); font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); border-radius: var(--kt-ai-radius-lg); cursor: pointer; border: none; background: transparent; transition: background var(--kt-ai-dur-fast), color var(--kt-ai-dur-fast); }
+.kt-ai-segmented .seg[data-active="true"] { background: var(--kt-ai-bg-active); color: var(--kt-ai-fg); font-weight: var(--kt-ai-weight-medium); }
+
+/* ---------- Карточки и ряды ---------- */
+.kt-ai-card {
+  background: var(--kt-ai-card-bg);
+  border: 1px solid var(--kt-ai-card-border);
+  border-radius: var(--kt-ai-radius-3xl);
+  box-shadow: var(--kt-ai-card-shadow);
+  padding: var(--kt-ai-pad-card);
+  transition: border-color var(--kt-ai-dur-fast) var(--kt-ai-ease-standard), box-shadow var(--kt-ai-dur-fast) var(--kt-ai-ease-standard);
+}
+/* v5.7.7: отклик на курсор — только у карточки, по которой можно щёлкнуть.
+   Раньше подсвечивались ВСЕ карточки, включая обычные секции текста и таблиц:
+   курсор обещал действие, которого нет, и специалист щёлкал по разделу
+   документа в ожидании перехода. Кликабельная карточка помечается
+   `kt-ai-hover-lift` (или сама является ссылкой/кнопкой) — там отклик и живёт.
+   Принцип «Обратная связь: причинность и польза»: отклик добавляется там, где
+   он что-то значит, а не на каждый чих. */
+.kt-ai-card.kt-ai-hover-lift:hover,
+.kt-ai-card[data-clickable="true"]:hover,
+a.kt-ai-card:hover,
+button.kt-ai-card:hover { border-color: var(--kt-ai-card-border-hover); box-shadow: var(--kt-ai-card-shadow-hover); }
+.kt-ai-card[data-glow="strong"] { background: var(--kt-ai-card-bg-glow); }
+
+.kt-ai-row {
+  display: flex; align-items: center; gap: var(--kt-ai-space-5);
+  padding: var(--kt-ai-space-4) var(--kt-ai-space-5);
+  border-radius: var(--kt-ai-radius-lg);
+  font-size: var(--kt-ai-text-sm);
+  transition: background var(--kt-ai-dur-fast) var(--kt-ai-ease-standard);
+}
+.kt-ai-row:hover { background: var(--kt-ai-bg-hover); }
+.kt-ai-row[data-active="true"] { background: var(--kt-ai-bg-active); }
+.kt-ai-row .meta { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); }
+.kt-ai-row .end { margin-left: auto; display: flex; align-items: center; gap: var(--kt-ai-space-4); }
+
+.kt-ai-divider { height: 1px; background: var(--kt-ai-divider); border: none; margin: var(--kt-ai-space-5) 0; }
+
+/* ---------- Chips / Status ---------- */
+.kt-ai-chip {
+  display: inline-flex; align-items: center; gap: var(--kt-ai-space-3);
+  white-space: nowrap; word-break: normal; overflow-wrap: normal;
+  padding: 1px var(--kt-ai-space-4);
+  border-radius: var(--kt-ai-radius-tag);
+  font-size: var(--kt-ai-text-2xs);
+  background: var(--kt-ai-chip-default-bg);
+  color: var(--kt-ai-chip-default-fg);
+  white-space: nowrap;
+}
+.kt-ai-chip[data-tone="gray"]   { background: var(--kt-ai-chip-gray-bg);   color: var(--kt-ai-chip-gray-fg); }
+.kt-ai-chip[data-tone="green"]  { background: var(--kt-ai-chip-green-bg);  color: var(--kt-ai-chip-green-fg); }
+.kt-ai-chip[data-tone="orange"] { background: var(--kt-ai-chip-orange-bg); color: var(--kt-ai-chip-orange-fg); }
+.kt-ai-chip[data-tone="blue"]   { background: var(--kt-ai-chip-blue-bg);   color: var(--kt-ai-chip-blue-fg); }
+.kt-ai-chip[data-tone="purple"] { background: var(--kt-ai-chip-purple-bg); color: var(--kt-ai-chip-purple-fg); }
+/* v4.0: чип агента отличим мгновенно – орб-точка (принцип «магия видима») */
+.kt-ai-chip[data-ai="true"] { border: 1px solid var(--kt-ai-border); background: var(--kt-ai-bg-elevated); }
+.kt-ai-chip[data-ai="true"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--kt-ai-ai-orb); flex-shrink: 0; }
+.kt-ai-chip[data-tone="red"]    { background: var(--kt-ai-chip-red-bg);    color: var(--kt-ai-chip-red-fg); }
+
+.kt-ai-status-pill {
+  display: inline-flex; align-items: center; gap: var(--kt-ai-space-3);
+  /* nowrap запрещает перенос по пробелу, но ячейка таблицы задаёт
+     word-break: break-word — и он рвёт слово ПОСЕРЕДИНЕ: «рассмотрени/и».
+     Поэтому сбрасываем перенос по буквам явно. То же у .kt-ai-chip. */
+  white-space: nowrap; word-break: normal; overflow-wrap: normal;
+  padding: 1px var(--kt-ai-space-4);
+  border-radius: var(--kt-ai-radius-tag);
+  font-size: var(--kt-ai-text-2xs);
+  font-weight: var(--kt-ai-weight-medium);
+}
+.kt-ai-status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+.kt-ai-status-pill[data-status="ok"]   { background: var(--kt-ai-status-ok-bg);   color: var(--kt-ai-status-ok-fg); }
+.kt-ai-status-pill[data-status="warn"] { background: var(--kt-ai-status-warn-bg); color: var(--kt-ai-status-warn-fg); }
+.kt-ai-status-pill[data-status="risk"] { background: var(--kt-ai-status-risk-bg); color: var(--kt-ai-status-risk-fg); }
+.kt-ai-status-pill[data-status="info"] { background: var(--kt-ai-status-info-bg); color: var(--kt-ai-status-info-fg); }
+/* muted был только в React-версии компонента — добавлен, чтобы обе реализации
+   принимали один набор статусов и React мог опираться на класс ДС. */
+.kt-ai-status-pill[data-status="muted"] { background: var(--kt-ai-bg-active); color: var(--kt-ai-fg-muted); }
+
+.kt-ai-avatar {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 28px; height: 28px; border-radius: var(--kt-ai-radius-lg);
+  background: var(--kt-ai-bg-active); color: var(--kt-ai-fg-muted);
+  font-size: var(--kt-ai-text-2xs); font-weight: var(--kt-ai-weight-bold);
+  border: 1px solid var(--kt-ai-border); overflow: hidden; flex-shrink: 0;
+}
+.kt-ai-avatar img { width: 100%; height: 100%; object-fit: cover; }
+
+/* ---------- Banner / Callout ---------- */
+.kt-ai-banner {
+  display: flex; gap: var(--kt-ai-space-4); align-items: flex-start;
+  padding: var(--kt-ai-space-4) var(--kt-ai-space-5);
+  border-radius: var(--kt-ai-radius-lg);
+  font-size: var(--kt-ai-text-sm);
+  border: 1px solid transparent;
+}
+.kt-ai-banner[data-tone="info"] { background: var(--kt-ai-status-info-bg); color: var(--kt-ai-status-info-fg); }
+.kt-ai-banner[data-tone="warn"] { background: var(--kt-ai-status-warn-bg); color: var(--kt-ai-status-warn-fg); }
+.kt-ai-banner[data-tone="risk"] { background: var(--kt-ai-status-risk-bg); color: var(--kt-ai-status-risk-fg); }
+.kt-ai-banner[data-tone="ok"]   { background: var(--kt-ai-status-ok-bg);   color: var(--kt-ai-status-ok-fg); }
+
+/* ---------- Вывод раздела ----------
+   Противовес баннера, а не его вариант. Баннер стоит НАД числами и говорит,
+   из-за чего число соврёт: это предупреждение, поэтому он окрашен тоном и
+   виден раньше данных. Вывод стоит ПОСЛЕ таблицы и говорит, что из данных
+   следует: разбор смещения выборки, оговорка о методике, ответ на вопрос
+   раздела. Читают его, когда числа уже посмотрели.
+
+   Отсюда разница в оформлении, и она смысловая: у вывода нет цвета статуса
+   (ему нечего сигналить), есть только линия сверху — граница «данные
+   кончились, начинается их чтение», — и мера строки. Пока слота не было,
+   вывод уходил в баннер, и абзац текста вставал ДО первого числа. */
+.kt-ai-conclusion {
+  margin-top: var(--kt-ai-stack-group);
+  padding-top: var(--kt-ai-space-6);
+  border-top: 1px solid var(--kt-ai-border);
+}
+.kt-ai-conclusion .title {
+  display: block;
+  font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-semibold);
+  color: var(--kt-ai-fg); margin-bottom: var(--kt-ai-space-3);
+}
+/* Мера строки: вывод — сплошной текст, и во всю ширину монитора он нечитаем
+   (то же правило, по которому renderCustom() сужает текстовый экран). */
+.kt-ai-conclusion .text {
+  display: block; max-width: 78ch;
+  font-size: var(--kt-ai-text-sm); line-height: 1.6; color: var(--kt-ai-fg-muted);
+  text-wrap: pretty;
+}
+.kt-ai-conclusion .text + .text { margin-top: var(--kt-ai-space-4); }
+
+/* ---------- KPI ---------- */
+.kt-ai-kpi-strip { display: flex; gap: var(--kt-ai-space-8); padding: var(--kt-ai-space-5) 0; flex-wrap: wrap; align-items: stretch; }
+/* v3.3 (референс ElevenLabs): подпись НАД значением; значение — sans с табличными цифрами, не гигантский моно */
+.kt-ai-kpi { display: flex; flex-direction: column; gap: var(--kt-ai-space-1); justify-content: flex-start; }
+/* Подпись всегда НАД значением (правило PRINCIPLES) — независимо от порядка в разметке.
+   Раньше стоял column-reverse: он молча переворачивал написанное, поэтому интуитивный
+   порядок (label, затем value) давал раскладку ПРОТИВ правила ДС. Рантайм пишет
+   value первым, ручная вёрстка — обычно label первым; теперь верны оба. */
+.kt-ai-kpi .label { order: 1; }
+.kt-ai-kpi .value { order: 2; }
+.kt-ai-kpi .value { font-family: var(--kt-ai-font-sans); font-size: var(--kt-ai-text-xl); font-weight: var(--kt-ai-weight-semibold); color: var(--kt-ai-fg); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
+.kt-ai-kpi .value[data-long="true"] { font-size: var(--kt-ai-text-lg); line-height: 1.3; }
+.kt-ai-kpi .label { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); }
+/* v5.7.6: третий уровень — уточнение ПОД значением (знаменатель, доля, период).
+   Раньше продукты добавляли его руками через order:3 и класс meta: раскладка
+   плашки жила в приложениях, и одинаковые полосы выглядели по-разному.
+   Значение всегда идёт сразу за подписью — карточки полосы читаются как один
+   ряд величин; прижимать значение к низу нельзя, иначе в соседних карточках
+   (с уточнением и без) числа встают на разной высоте и кажутся разными по
+   важности. */
+.kt-ai-kpi .hint { order: 3; font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); }
+/* v6.3.0: четвёртый уровень — СНОСКА. Уточнение (`hint`) отвечает «из чего
+   считано» и живёт в 40 знаках: знаменатель, доля, период. Сноска отвечает на
+   другой вопрос — «чем это число НЕ является»: поле-источник меряет не ровно
+   то, чем показатель назван, и сказать это надо рядом с числом, потому что
+   полосу плиток видят все, а карточку строки открывают не все.
+
+   Оговорки такой длины (34–203 знака) в 40 знаков не влезают, а в баннер над
+   числами не помещаются по смыслу. Поэтому сноска — отдельное поле без
+   потолка. Отделяет её от собственных чисел плитки линия, а не блёклость:
+   цвет тот же fg-muted, что у уточнения (7,1:1 в светлой теме и 6,5:1 в
+   тёмной). Тише было бы логично по иерархии и неверно по делу — fg-faint даёт
+   4,9:1 на кегле 11px, а сноска существует затем, чтобы её ПРОЧИТАЛИ. По той
+   же причине она не прячется под клик: спрятанное читают не все, ровно как
+   карточку строки. */
+.kt-ai-kpi .note {
+  order: 4;
+  margin-top: var(--kt-ai-space-2); padding-top: var(--kt-ai-space-2);
+  border-top: 1px solid var(--kt-ai-divider);
+  font-size: var(--kt-ai-text-2xs); line-height: 1.45;
+  color: var(--kt-ai-fg-muted); text-wrap: pretty;
+}
+/* В тихой полосе (flex, без карточек) ширину плитки задаёт её содержимое —
+   сноска растянула бы одну плитку на весь ряд. В сетке карточек ширину задаёт
+   колонка, и потолок не нужен. */
+.kt-ai-kpi-strip:not([data-cards="true"]) .kt-ai-kpi .note { max-width: 30ch; }
+.kt-ai-kpi-strip[data-cards="true"] .kt-ai-kpi { height: 100%; }
+
+
+/* v3.6: слайдер настроек (референс ElevenLabs Settings-панели: Speed/Stability) */
+.kt-ai-slider { appearance: none; width: 100%; height: 3px; border-radius: 2px; background: var(--kt-ai-border-strong); outline-offset: 4px; }
+.kt-ai-slider::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--kt-ai-primary); border: none; cursor: grab; transition: transform var(--kt-ai-dur-fast); }
+.kt-ai-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
+.kt-ai-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--kt-ai-primary); border: none; cursor: grab; }
+.kt-ai-slider-row { display: flex; flex-direction: column; gap: var(--kt-ai-space-3); }
+.kt-ai-slider-row .ends { display: flex; justify-content: space-between; font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-faint); }
+
+/* v3.6: адаптивные колонки — двух-панельные архетипы складываются в одну колонку на узком экране */
+.kt-ai-cols { display: grid; gap: var(--kt-ai-space-6); align-items: start; }
+/* v5.8.0: колонка не шире того, что ей отвели. `1fr` — это `minmax(auto, 1fr)`,
+   и `auto` в минимуме означает «не уже своего содержимого»: одна длинная строка,
+   таблица или <pre> внутри распирают колонку, а вместе с ней и страницу. Сворот
+   в одну колонку на ≤720px этого НЕ лечит — единственная колонка растягивается
+   так же. Продукт видел это как горизонтальную прокрутку всей страницы на
+   телефоне (390px экрана против 836px контента) и обходил своей утилитой.
+   min-width:0 у прямых детей снимает минимум по содержимому: длинное теперь
+   переносится или прокручивается ВНУТРИ своего блока, а не выталкивает страницу.
+   Прокрутка широкого (таблицы) остаётся у .kt-ai-table-wrap — там ей и место. */
+.kt-ai-cols > * { min-width: 0; }
+@media (max-width: 719.98px) { .kt-ai-cols { grid-template-columns: 1fr !important; } }
+
+/* v3.9: тактильность – нажатие чувствуется у всего кликабельного, не только у кнопок */
+.kt-ai-suggestion:active, .kt-ai-filter-chip:active, .kt-ai-tab:active { transform: scale(.97); }
+.kt-ai-hover-lift:active { transform: translateY(0) scale(.99); }
+.kt-ai-nav-item:active { transform: scale(.985); }
+.kt-ai-kpi-strip[data-cards="true"] .kt-ai-kpi[data-tab="true"]:active { transform: scale(.985); }
+
+/* v3.5: hover-обратная связь (ElevenLabs) — ряды и кликабельные карточки отвечают на курсор */
+.kt-ai-row-hover { border-radius: var(--kt-ai-radius-md); transition: background var(--kt-ai-dur-fast); }
+.kt-ai-row-hover:hover { background: var(--kt-ai-bg-hover); }
+.kt-ai-hover-lift { transition: border-color var(--kt-ai-dur-fast), box-shadow var(--kt-ai-dur-fast), transform var(--kt-ai-dur-fast); }
+.kt-ai-hover-lift:hover { border-color: var(--kt-ai-border-strong); box-shadow: 0 2px 8px var(--kt-black-a08); transform: translateY(-1px); }
+.kt-ai-chart-card svg circle { transition: opacity var(--kt-ai-dur-fast); }
+.kt-ai-chart-card svg circle:hover { opacity: .75; }
+svg circle[data-map-pt] { transition: r var(--kt-ai-dur-fast); cursor: pointer; }
+svg circle[data-map-pt]:hover { r: 2.3; }
+
+/* v2.5: вариант «стат-карточки» – сетка равных карточек вместо тихой полосы */
+.kt-ai-kpi-strip[data-cards="true"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--kt-ai-stack-block); padding: 0; }
+.kt-ai-kpi-strip[data-cards="true"] .kt-ai-kpi {
+  background: var(--kt-ai-card-bg);
+  border: 1px solid var(--kt-ai-card-border);
+  border-radius: var(--kt-ai-radius-2xl);
+  box-shadow: var(--kt-ai-card-shadow);
+  padding: var(--kt-ai-space-6) var(--kt-ai-space-7);
+  gap: var(--kt-ai-space-2);
+}
+.kt-ai-kpi-strip[data-cards="true"] .value { font-size: var(--kt-ai-text-xl); }
+.kt-ai-kpi-strip[data-cards="true"] .value[data-long="true"] { font-size: var(--kt-ai-text-lg); }
+/* KPI-карточка как таб (dashboard): выбранная ведёт чарт — специфичность выше card-правил */
+.kt-ai-kpi-strip[data-cards="true"] .kt-ai-kpi[data-tab="true"] { cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease; }
+.kt-ai-kpi-strip[data-cards="true"] .kt-ai-kpi[data-tab="true"]:hover { border-color: var(--kt-ai-border-strong); }
+.kt-ai-kpi-strip[data-cards="true"] .kt-ai-kpi[data-tab="true"][data-active="true"] { border-color: var(--kt-ai-fg); box-shadow: inset 0 0 0 1px var(--kt-ai-fg), var(--kt-ai-card-shadow); }
+
+/* ---------- Таблицы (frameless ElevenLabs: только горизонтальные разделители рядов, без вертикальных колонок-сепараторов) ----------
+ * Дефолт – full-bleed без внешней рамки. Контейнерный вариант: data-framed="true". */
+.kt-ai-table-wrap { overflow: auto; background: transparent; }
+.kt-ai-table-wrap[data-framed="true"] { border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-xl); background: var(--kt-ai-bg); }
+.kt-ai-table-toolbar { display: flex; align-items: center; gap: var(--kt-ai-space-4); padding: var(--kt-ai-space-4) 0; flex-wrap: wrap; }
+.kt-ai-table-wrap[data-framed="true"] .kt-ai-table-toolbar { padding: var(--kt-ai-space-4) var(--kt-ai-space-5); border-bottom: 1px solid var(--kt-ai-border); }
+.kt-ai-table { width: 100%; border-collapse: collapse; font-size: var(--kt-ai-text-sm); }
+.kt-ai-table td { word-break: break-word; }
+/* На узких экранах (≤640px) строки таблицы превращаются в карточки: первая ячейка — заголовок карточки,
+ * остальные — пары «label: value». Без горизонтального скролла (паттерн ElevenLabs/Linear). */
+.kt-ai-table th {
+  text-align: left; padding: var(--kt-ai-space-4) var(--kt-ai-space-5);
+  font-size: var(--kt-ai-text-xs); font-weight: var(--kt-ai-weight-medium);
+  color: var(--kt-ai-fg-muted); /* обязательный контент: faint не проходит контраст */
+  border-bottom: 1px solid var(--kt-ai-divider);
+  white-space: nowrap; position: sticky; top: 0; background: var(--kt-ai-bg);
+}
+.kt-ai-table td { padding: 0 var(--kt-ai-space-5); height: var(--kt-ai-table-row); border-bottom: 1px solid var(--kt-ai-divider); vertical-align: middle; }
+.kt-ai-table tr:last-child td { border-bottom: none; }
+/* Frameless (ElevenLabs): только горизонтальные разделители рядов, без вертикальных колонок-сепараторов (тихо, воздушно) */
+.kt-ai-table tbody tr { transition: background var(--kt-ai-dur-fast); }
+/* ElevenLabs: чекбоксы появляются на hover/выборе, не загромождают */
+.kt-ai-table tbody td:first-child .kt-ai-checkbox { opacity: 0; transition: opacity var(--kt-ai-dur-fast); }
+.kt-ai-table tbody tr:hover td:first-child .kt-ai-checkbox,
+.kt-ai-table tbody td:first-child .kt-ai-checkbox:has(input:checked) { opacity: 1; }
+.kt-ai-table tbody tr:hover { background: var(--kt-ai-bg-hover); }
+.kt-ai-table td.num { font-family: var(--kt-ai-font-sans); font-variant-numeric: tabular-nums; text-align: right; }
+.kt-ai-table[data-density="compact"] td { height: var(--kt-ai-table-row-compact); }
+.kt-ai-table[data-density="relaxed"] td { height: var(--kt-ai-table-row-relaxed); }
+
+/* ---------- Progress ---------- */
+.kt-ai-progress { height: 5px; background: var(--kt-ai-bg-active); border-radius: var(--kt-ai-radius-full); overflow: hidden; }
+.kt-ai-progress > div { height: 100%; background: linear-gradient(90deg, var(--kt-ai-brand-blue), var(--kt-ai-primary)); border-radius: var(--kt-ai-radius-full); transition: width var(--kt-ai-dur-slower) var(--kt-ai-ease-standard); }
+
+/* ---------- Modal ---------- */
+.kt-ai-modal-overlay {
+  position: fixed; inset: 0; background: var(--kt-ai-overlay);
+  display: flex; align-items: center; justify-content: center;
+  z-index: var(--kt-ai-z-modal);
+  animation: ktai-fade var(--kt-ai-dur-base) var(--kt-ai-ease-enter);
+}
+.kt-ai-modal {
+  background: var(--kt-ai-bg-elevated);
+  border: 1px solid var(--kt-ai-border-strong);
+  border-radius: var(--kt-ai-radius-3xl);
+  box-shadow: var(--kt-ai-shadow-xl);
+  width: 520px; max-width: 92vw; max-height: 86vh; overflow-y: auto;
+  padding: var(--kt-ai-space-7);
+  animation: ktai-rise var(--kt-ai-dur-slow) var(--kt-ai-ease-enter);
+}
+.kt-ai-modal .modal-title { font-size: var(--kt-ai-text-lg); font-weight: var(--kt-ai-weight-semibold); margin-bottom: var(--kt-ai-space-5); }
+.kt-ai-modal .modal-actions { display: flex; justify-content: flex-end; gap: var(--kt-ai-space-4); margin-top: var(--kt-ai-space-6); }
+
+/* ---------- Drawer ---------- */
+.kt-ai-drawer {
+  position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 92vw;
+  background: var(--kt-ai-bg-elevated);
+  border-left: 1px solid var(--kt-ai-border-strong);
+  box-shadow: var(--kt-ai-shadow-lg);
+  z-index: var(--kt-ai-z-drawer);
+  padding: var(--kt-ai-space-7);
+  overflow-y: auto;
+  animation: ktai-slide-in var(--kt-ai-dur-slow) var(--kt-ai-ease-enter);
+}
+
+/* ---------- Документ-артефакт (что продукт производит: ТС, отчёт, СЗ…) ---------- */
+.kt-ai-doc-list { display: flex; flex-direction: column; gap: var(--kt-ai-space-3); }
+.kt-ai-doc { display: flex; align-items: center; gap: var(--kt-ai-space-4); padding: var(--kt-ai-space-4) var(--kt-ai-space-5); background: var(--kt-ai-bg-elevated); border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-2xl); }
+.kt-ai-doc .doc-ic { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; border-radius: var(--kt-ai-radius-lg); background: var(--kt-ai-bg-soft); color: var(--kt-ai-fg-muted); }
+.kt-ai-doc .doc-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.kt-ai-doc .doc-name { font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-medium); color: var(--kt-ai-fg); }
+.kt-ai-doc .doc-sub { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.kt-ai-doc .kt-ai-btn { flex: 0 0 auto; }
+.drawer-sec .kt-ai-doc { padding: var(--kt-ai-space-3) var(--kt-ai-space-4); border-radius: var(--kt-ai-radius-lg); }
+.drawer-sec .kt-ai-doc .doc-ic { width: 30px; height: 30px; }
+
+/* ---------- Activity timeline panel (правый слайд-овер: лента активности агента) ---------- */
+.act-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--kt-ai-space-6); }
+.act-head strong { font-size: var(--kt-ai-text-md); font-weight: var(--kt-ai-weight-semibold); }
+.kt-ai-activity { display: flex; flex-direction: column; }
+.act-item { position: relative; padding-left: 22px; padding-bottom: var(--kt-ai-space-6); }
+.act-item::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 0; width: 1px; background: var(--kt-ai-divider); }
+.act-item:last-child { padding-bottom: 0; }
+.act-item:last-child::before { display: none; }
+.act-dot { position: absolute; left: 0; top: 3px; width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 2px var(--kt-ai-bg-elevated); }
+.act-title { font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-semibold); line-height: var(--kt-ai-leading-tight); }
+.act-time { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); margin-top: 2px; }
+.act-card { margin-top: var(--kt-ai-space-4); border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-lg); padding: var(--kt-ai-space-4) var(--kt-ai-space-5); }
+.act-row { display: flex; gap: var(--kt-ai-space-4); font-size: var(--kt-ai-text-xs); margin-bottom: var(--kt-ai-space-2); }
+.act-row .k { color: var(--kt-ai-fg-muted); width: 56px; flex-shrink: 0; }
+.act-row .v { display: flex; flex-wrap: wrap; gap: 4px; }
+.act-summary { font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg); margin: var(--kt-ai-space-3) 0; line-height: var(--kt-ai-leading-normal); }
+.act-card .kt-ai-btn { margin-top: var(--kt-ai-space-2); }
+
+/* ---------- Toast ---------- */
+.kt-ai-toast-stack { position: fixed; bottom: max(var(--kt-ai-space-7), env(safe-area-inset-bottom)); right: max(var(--kt-ai-space-7), env(safe-area-inset-right)); display: flex; flex-direction: column; gap: var(--kt-ai-space-4); z-index: var(--kt-ai-z-toast); }
+.kt-ai-toast {
+  display: flex; align-items: center; gap: var(--kt-ai-space-4);
+  background: var(--kt-ai-bg-elevated);
+  border: 1px solid var(--kt-ai-border-strong);
+  border-radius: var(--kt-ai-radius-lg);
+  box-shadow: var(--kt-ai-shadow-md);
+  padding: var(--kt-ai-space-4) var(--kt-ai-space-5);
+  font-size: var(--kt-ai-text-sm);
+  min-width: 260px; max-width: 380px;
+  animation: ktai-rise var(--kt-ai-dur-base) var(--kt-ai-ease-enter);
+}
+.kt-ai-toast::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--kt-ai-primary); flex-shrink: 0; }
+.kt-ai-toast[data-tone="ok"]::before { background: var(--kt-ai-status-ok-fg); }
+.kt-ai-toast[data-tone="warn"]::before { background: var(--kt-ai-status-warn-fg); }
+.kt-ai-toast[data-tone="risk"]::before { background: var(--kt-ai-status-risk-fg); }
+
+/* ---------- Tooltip ---------- */
+/* ВАЖНО: data-tip рисуется через ::after, то есть это СГЕНЕРИРОВАННЫЙ контент.
+   В дереве доступности его нет — диктор подсказку не прочитает. Подсказка
+   объясняет иконку глазам и только им; имя кнопке даёт aria-label, и у
+   icon-only кнопки обязаны быть ОБА (docs/DESIGN.md, CHECKLIST G6).
+   Правило было записано и всё равно нарушено в пяти местах собственной
+   витрины — то есть проза не работает; теперь это проверяет гейт 16. */
+.kt-ai-tooltip { position: relative; }
+.kt-ai-tooltip::after {
+  content: attr(data-tip);
+  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
+  background: var(--kt-ai-bg-elevated); color: var(--kt-ai-fg);
+  border: 1px solid var(--kt-ai-border-strong); border-radius: var(--kt-ai-radius-md);
+  box-shadow: var(--kt-ai-shadow-md);
+  padding: var(--kt-ai-space-2) var(--kt-ai-space-4);
+  font-size: var(--kt-ai-text-2xs); white-space: nowrap;
+  opacity: 0; pointer-events: none;
+  transition: opacity var(--kt-ai-dur-fast) var(--kt-ai-ease-standard);
+  z-index: var(--kt-ai-z-tooltip);
+}
+.kt-ai-tooltip:hover::after,
+.kt-ai-tooltip:focus-visible::after,
+.kt-ai-tooltip:focus-within::after { opacity: 1; }
+
+/* ---------- Skeleton / Empty ---------- */
+.kt-ai-skeleton {
+  border-radius: var(--kt-ai-radius-md);
+  background: linear-gradient(90deg, var(--kt-ai-bg-active) 25%, var(--kt-ai-bg-hover) 50%, var(--kt-ai-bg-active) 75%);
+  background-size: 200% 100%;
+  animation: ktai-shimmer 1.4s linear infinite;
+  min-height: 12px;
+}
+.kt-ai-empty {
+  display: flex; flex-direction: column; align-items: center; gap: var(--kt-ai-space-4);
+  padding: var(--kt-ai-space-10) var(--kt-ai-space-8);
+  text-align: center; color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-sm);
+  border-radius: var(--kt-ai-radius-3xl);
+  background-image: radial-gradient(color-mix(in srgb, currentColor 14%, transparent) 1px, transparent 1.4px);
+  background-size: 14px 14px;
+}
+.kt-ai-empty .title { color: var(--kt-ai-fg); font-weight: var(--kt-ai-weight-semibold); }
+
+/* ---------- Командная палитра ---------- */
+.kt-ai-command {
+  overflow: hidden; animation: ktai-rise var(--kt-ai-dur-slow) var(--kt-ai-ease-enter);
+  background: var(--kt-ai-bg-elevated);
+  border: 1px solid var(--kt-ai-border-strong);
+  border-radius: var(--kt-ai-radius-3xl);
+  box-shadow: var(--kt-ai-command-shadow);
+  width: 560px; max-width: 92vw;
+}
+
+/* ---------- Анимации ---------- */
+@keyframes ktai-fade { from { opacity: 0; } to { opacity: 1; } }
+@keyframes ktai-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
+@keyframes ktai-slide-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
+@keyframes ktai-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
+
+/* ============ v2.1 ДОПОЛНЕНИЯ (ревью 2026-06-09) ============ */
+
+/* Оптика Inter и баланс заголовков */
+.kt-ai-app, .kt-ai-shell { font-feature-settings: "cv05", "cv11", "ss01"; }
+.kt-ai-h1, .kt-ai-h2, .kt-ai-h3 { text-wrap: balance; }
+
+/* ---------- Loading-кнопка ---------- */
+.kt-ai-btn[data-loading="true"] { pointer-events: none; position: relative; color: transparent !important; }
+.kt-ai-btn[data-loading="true"]::after {
+  content: ""; position: absolute; left: calc(50% - 7px); top: calc(50% - 7px);
+  width: 14px; height: 14px; border-radius: 50%;
+  border: 2px solid var(--kt-ai-fg-muted); border-top-color: transparent;
+  animation: ktai-spin .7s linear infinite;
+}
+.kt-ai-btn[data-variant="primary"][data-loading="true"]::after { border-color: var(--kt-ai-fg-on-fill); border-top-color: transparent; }
+
+/* ---------- Combobox / multi-select ---------- */
+.kt-ai-combobox { position: relative; }
+.kt-ai-combobox .control {
+  display: flex; flex-wrap: wrap; gap: var(--kt-ai-space-2); align-items: center;
+  min-height: var(--kt-ai-control-h-md); padding: var(--kt-ai-space-2) var(--kt-ai-space-4);
+  background: var(--kt-ai-bg-soft); border: 1px solid var(--kt-ai-border-strong);
+  border-radius: var(--kt-ai-radius-lg); cursor: text;
+  transition: border-color var(--kt-ai-dur-fast), box-shadow var(--kt-ai-dur-fast);
+}
+.kt-ai-combobox .control:focus-within { border-color: var(--kt-ai-primary); box-shadow: var(--kt-ai-focus-shadow); }
+.kt-ai-combobox .control input { flex: 1; min-width: 80px; border: none; background: transparent; color: var(--kt-ai-fg); font: inherit; outline: none; height: 22px; }
+.kt-ai-combobox .menu {
+  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
+  background: var(--kt-ai-bg-elevated); border: 1px solid var(--kt-ai-border-strong);
+  border-radius: var(--kt-ai-radius-lg); box-shadow: var(--kt-ai-shadow-md);
+  z-index: var(--kt-ai-z-dropdown); max-height: 240px; overflow-y: auto;
+  padding: var(--kt-ai-space-2); display: none;
+}
+.kt-ai-combobox[data-open="true"] .menu { display: block; animation: ktai-rise var(--kt-ai-dur-base) var(--kt-ai-ease-enter); }
+.kt-ai-combobox .option {
+  display: flex; align-items: center; gap: var(--kt-ai-space-4);
+  padding: var(--kt-ai-space-3) var(--kt-ai-space-4);
+  border-radius: var(--kt-ai-radius-md); font-size: var(--kt-ai-text-sm); cursor: pointer;
+}
+.kt-ai-combobox .option:hover, .kt-ai-combobox .option[data-active="true"] { background: var(--kt-ai-bg-hover); }
+.kt-ai-combobox .option[data-selected="true"]::after { content: "✓"; margin-left: auto; color: var(--kt-ai-primary); font-weight: 700; }
+.kt-ai-chip[data-removable] { padding-right: var(--kt-ai-space-2); }
+.kt-ai-chip .remove { cursor: pointer; opacity: .6; padding: 0 3px; border-radius: 50%; }
+.kt-ai-chip .remove:hover { opacity: 1; background: var(--kt-ai-bg-active); }
+
+/* ---------- Bulk-select bar (возврат из v1) ---------- */
+.kt-ai-table-bulkbar {
+  display: none; align-items: center; gap: var(--kt-ai-space-5);
+  padding: var(--kt-ai-space-3) var(--kt-ai-space-5);
+  background: var(--kt-ai-primary-subtle); border-bottom: 1px solid var(--kt-ai-border);
+  font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg);
+}
+.kt-ai-table-bulkbar[data-open="true"] { display: flex; animation: ktai-rise var(--kt-ai-dur-base) var(--kt-ai-ease-enter); }
+.kt-ai-table-bulkbar .count { font-family: var(--kt-ai-font-sans); color: var(--kt-ai-primary); font-weight: 600; font-variant-numeric: tabular-nums;}
+
+/* ---------- File upload / dropzone ---------- */
+.kt-ai-dropzone {
+  display: flex; flex-direction: column; align-items: center; gap: var(--kt-ai-space-3);
+  padding: var(--kt-ai-space-8); text-align: center;
+  border: 1.5px dashed var(--kt-ai-border-strong); border-radius: var(--kt-ai-radius-xl);
+  color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-sm); cursor: pointer;
+  transition: border-color var(--kt-ai-dur-fast), background var(--kt-ai-dur-fast);
+}
+.kt-ai-dropzone:hover, .kt-ai-dropzone[data-drag="true"] { border-color: var(--kt-ai-primary); background: var(--kt-ai-primary-subtle); color: var(--kt-ai-fg); }
+.kt-ai-file-row {
+  display: flex; align-items: center; gap: var(--kt-ai-space-4);
+  padding: var(--kt-ai-space-3) var(--kt-ai-space-5);
+  border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-lg);
+  font-size: var(--kt-ai-text-xs);
+}
+.kt-ai-file-row .size { margin-left: auto; font-family: var(--kt-ai-font-sans); color: var(--kt-ai-fg-faint); font-variant-numeric: tabular-nums;}
+
+/* ---------- Stepper ---------- */
+.kt-ai-stepper { display: flex; align-items: center; gap: var(--kt-ai-space-3); flex-wrap: wrap; }
+.kt-ai-step-item { display: flex; align-items: center; gap: var(--kt-ai-space-3); font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-faint); }
+/* Кружок с номером.
+ *
+ * Иконкой это делать нельзя, и вот почему. Наши иконки — штриховые, 1.75 в
+ * сетке 24, и используются на 14–15px. Цифра штрихом внутри штриховой
+ * окружности на таком размере выходит 6–7px высотой при штрихе ~1px: просветы
+ * у 6, 8 и 9 схлопываются, иконка перестаёт читаться. К тому же набор был бы
+ * конечным (1–9), а номера бывают и двузначные.
+ *
+ * Поэтому номер рисуется ТЕКСТОМ в круге: любое число, чёткость на любом
+ * размере, состояния и цвет от токенов.
+ *
+ * Раньше это правило жило внутри степпера как `.kt-ai-step-item .n` и было
+ * недоступно снаружи — продукты рисовали свои кружки заново.
+ *
+ * ИМЯ. Не `.kt-ai-num` — оно уже занято утилитой табличных цифр (см. выше,
+ * рядом с .kt-ai-meta). Второе определение того же класса перебивало первое, и
+ * суммы вроде «562 572 660 ₸» рисовались кружком 22px поверх текста в 17
+ * местах продукта. Один класс — один смысл. */
+.kt-ai-num-badge {
+  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
+  display: inline-flex; align-items: center; justify-content: center;
+  font-family: var(--kt-ai-font-mono);      /* цифры одной ширины — колонка не пляшет */
+  font-size: var(--kt-ai-text-2xs); font-weight: var(--kt-ai-weight-bold);
+  font-variant-numeric: tabular-nums;
+  border: 1.5px solid var(--kt-ai-border-strong); color: var(--kt-ai-fg-faint);
+  background: transparent;
+  transition: background var(--kt-ai-dur-base) var(--kt-ai-ease-standard),
+              border-color var(--kt-ai-dur-base) var(--kt-ai-ease-standard),
+              color var(--kt-ai-dur-base) var(--kt-ai-ease-standard);
+}
+.kt-ai-num-badge[data-size="sm"] { width: 18px; height: 18px; font-size: 9px; border-width: 1.25px; }
+.kt-ai-num-badge[data-size="lg"] { width: 28px; height: 28px; font-size: var(--kt-ai-text-xs); }
+/* Текущий — заливка: он один на экране и обязан быть найден мгновенно. */
+.kt-ai-num-badge[data-state="current"] { background: var(--kt-ai-primary); border-color: var(--kt-ai-primary); color: var(--kt-ai-fg-on-fill); }
+/* Пройденный — тише текущего, но не тусклее будущих: он уже что-то значит. */
+.kt-ai-num-badge[data-state="done"] { border-color: var(--kt-ai-fg-muted); color: var(--kt-ai-fg-muted); }
+.kt-ai-num-badge[data-tone="ok"] { border-color: var(--kt-ai-status-ok-fg); color: var(--kt-ai-status-ok-fg); }
+.kt-ai-num-badge[data-tone="warn"] { border-color: var(--kt-ai-status-warn-fg); color: var(--kt-ai-status-warn-fg); }
+.kt-ai-num-badge[data-tone="risk"] { border-color: var(--kt-ai-status-risk-fg); color: var(--kt-ai-status-risk-fg); }
+
+/* Степпер пользуется тем же компонентом — определения одного и того же кружка
+   в двух местах неизбежно разъезжаются (уже было с .kt-ai-label). */
+.kt-ai-step-item .n {
+  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
+  display: flex; align-items: center; justify-content: center;
+  font-size: var(--kt-ai-text-2xs); font-weight: 700;
+  border: 1.5px solid var(--kt-ai-border-strong); color: var(--kt-ai-fg-faint);
+  transition: all var(--kt-ai-dur-base);
+}
+.kt-ai-step-item[data-state="current"] { color: var(--kt-ai-fg); font-weight: 500; }
+.kt-ai-step-item[data-state="current"] .n { background: var(--kt-ai-primary); border-color: var(--kt-ai-primary); color: var(--kt-ai-fg-on-fill); }
+.kt-ai-step-item[data-state="done"] { color: var(--kt-ai-fg-muted); }
+.kt-ai-step-item[data-state="done"] .n { background: var(--kt-ai-status-ok-bg); border-color: transparent; color: var(--kt-ai-status-ok-fg); }
+.kt-ai-step-sep { width: 20px; height: 1px; background: var(--kt-ai-border-strong); flex-shrink: 0; }
+
+/* ---------- Breadcrumbs / Pagination / Сортировка ---------- */
+.kt-ai-breadcrumbs { display: flex; align-items: center; gap: var(--kt-ai-space-3); font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); }
+.kt-ai-breadcrumbs a { color: var(--kt-ai-fg-muted); text-decoration: none; }
+.kt-ai-breadcrumbs a:hover { color: var(--kt-ai-fg); }
+.kt-ai-breadcrumbs .sep { color: var(--kt-ai-fg-faint); }
+.kt-ai-breadcrumbs .current { color: var(--kt-ai-fg); }
+
+.kt-ai-pagination { display: flex; gap: 2px; align-items: center; }
+.kt-ai-pagination .page-btn {
+  min-width: var(--kt-ai-control-h-sm); height: var(--kt-ai-control-h-sm);
+  display: inline-flex; align-items: center; justify-content: center;
+  padding: 0 var(--kt-ai-space-3); border: none; background: transparent;
+  border-radius: var(--kt-ai-radius-md); color: var(--kt-ai-fg-muted);
+  font-size: var(--kt-ai-text-xs); font-family: var(--kt-ai-font-sans); cursor: pointer; font-variant-numeric: tabular-nums;}
+.kt-ai-pagination .page-btn:hover { background: var(--kt-ai-bg-hover); color: var(--kt-ai-fg); }
+.kt-ai-pagination .page-btn[data-active="true"] { background: var(--kt-ai-bg-active); color: var(--kt-ai-fg); font-weight: 600; }
+.kt-ai-pagination .page-btn:disabled, .kt-ai-pagination .page-btn[disabled] { opacity: .4; cursor: default; }
+.table-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--kt-ai-space-4); margin-top: var(--kt-ai-space-5); }
+/* Сводный bar-chart над таблицей (data-drives-form: раскатка во времени вместо охоты по timestamp-колонке) */
+.kt-ai-chart-card { border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-2xl); background: var(--kt-ai-bg-elevated); padding: var(--kt-ai-pad-card); margin-bottom: var(--kt-ai-stack-block); }
+.kt-ai-chart-card .cc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--kt-ai-space-4); margin-bottom: var(--kt-ai-stack-block); }
+.kt-ai-chart-card .cc-title { font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); margin-bottom: 2px; }
+.kt-ai-chart-card .cc-total { display: flex; align-items: baseline; gap: var(--kt-ai-space-3); }
+.kt-ai-chart-card .cc-total .num { font-size: var(--kt-ai-text-xl); font-weight: var(--kt-ai-weight-semibold); letter-spacing: -.01em; line-height: 1; }
+.kt-ai-chart-card .cc-total .unit { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); }
+.kt-ai-chart-card .cc-link { background: none; border: none; padding: 0; color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-xs); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
+.kt-ai-chart-card .cc-link:hover { color: var(--kt-ai-fg); }
+.kt-ai-chart-card .cc-bars { display: flex; align-items: flex-end; gap: 5px; height: 120px; }
+.kt-ai-chart-card .cc-bar { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; }
+.kt-ai-chart-card .cc-bar > i { display: block; width: 100%; min-height: 2px; background: var(--cc-color, var(--kt-ai-chart-blue)); border-radius: var(--kt-ai-radius-sm) var(--kt-ai-radius-sm) 2px 2px; opacity: .85; transition: opacity var(--kt-ai-dur-fast); }
+.kt-ai-chart-card .cc-bar:hover > i { opacity: 1; }
+.kt-ai-chart-card .cc-axis { display: flex; justify-content: space-between; margin-top: var(--kt-ai-space-3); font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-faint); }
+.kt-ai-chart-card .cc-axis-cat span { flex: 1 1 0; min-width: 0; text-align: center; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* ---------- Подсказка значения на диаграмме ----------
+   Не `.kt-ai-tooltip`: та однострочная (`white-space: nowrap`), рисуется через
+   ::after и у края карточки обрезается. Здесь нужен БЛОК — заголовок и до трёх
+   пар «подпись — значение», — и он живёт в <body>, поэтому его не режет
+   overflow карточки. Позиционирует kt-ai-chart-tip.js: развернуть подсказку
+   внутрь у края и удержать её у марки, а не у курсора, средствами CSS нельзя.
+   Числа приходят готовыми от продукта: система отвечает за вид, не за формат. */
+.kt-ai-chart-tip {
+  position: absolute; z-index: var(--kt-ai-z-tooltip);
+  min-width: 132px; max-width: 260px;
+  padding: var(--kt-ai-space-4) var(--kt-ai-space-5);
+  background: var(--kt-ai-bg-elevated);
+  border: 1px solid var(--kt-ai-border-strong);
+  border-radius: var(--kt-ai-radius-lg);
+  box-shadow: var(--kt-ai-shadow-md);
+  color: var(--kt-ai-fg);
+  font-size: var(--kt-ai-text-2xs);
+  line-height: var(--kt-ai-leading-normal);
+  pointer-events: none;
+  animation: ktai-tip-in var(--kt-ai-dur-fast) var(--kt-ai-ease-standard);
+}
+.kt-ai-chart-tip[hidden] { display: none; }
+.kt-ai-chart-tip .tip-title {
+  font-weight: var(--kt-ai-weight-semibold);
+  color: var(--kt-ai-fg);
+}
+.kt-ai-chart-tip .tip-title + .tip-rows { margin-top: var(--kt-ai-space-3); }
+/* Пары «подпись — значение» сеткой: значения прижаты вправо и набраны
+   табличными цифрами, иначе колонка чисел скачет от строки к строке. */
+.kt-ai-chart-tip .tip-rows {
+  display: grid; grid-template-columns: 1fr auto;
+  gap: 2px var(--kt-ai-space-5); margin: 0;
+}
+.kt-ai-chart-tip .tip-rows dt { color: var(--kt-ai-fg-muted); min-width: 0; }
+.kt-ai-chart-tip .tip-rows dd {
+  margin: 0; text-align: right;
+  font-variant-numeric: tabular-nums;
+  font-weight: var(--kt-ai-weight-medium);
+}
+@keyframes ktai-tip-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
+@media (prefers-reduced-motion: reduce) { .kt-ai-chart-tip { animation: none; } }
+
+/* Марка с подсказкой — цель наведения И фокуса: диаграмма обязана читаться не
+   только мышью. Выделение и подсказка включаются вместе, а не по отдельности. */
+[data-kt-tip] { cursor: default; }
+[data-kt-tip]:focus-visible { outline: 2px solid var(--kt-ai-focus-ring); outline-offset: 2px; border-radius: var(--kt-ai-radius-sm); }
+.kt-ai-chart-card .cc-bar[data-kt-tip]:hover > i,
+.kt-ai-chart-card .cc-bar[data-kt-tip][data-kt-tip-open="true"] > i { opacity: 1; filter: brightness(1.08); }
+.kt-ai-chart-card svg circle[data-kt-tip][data-kt-tip-open="true"] { opacity: .75; }
+
+/* Гашение терминальных/неактивных строк (status.dim) — активные выделяются */
+.kt-ai-table tr[data-dim="true"] td { opacity: .5; }
+.kt-ai-table tr[data-dim="true"]:hover td { opacity: .72; }
+
+/* Кликабельные сортируемые заголовки (button + иконка + aria-sort) */
+.th-sort { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; font: inherit; color: inherit; cursor: pointer; padding: 0; }
+.th-sort:hover { color: var(--kt-ai-fg); }
+.th-sort .th-sort-ic { width: 13px; height: 13px; opacity: .4; transition: opacity var(--kt-ai-dur-fast); }
+.th-sort:hover .th-sort-ic { opacity: .7; }
+.kt-ai-table thead th[aria-sort] .th-sort { color: var(--kt-ai-primary); }
+.kt-ai-table thead th[aria-sort] .th-sort .th-sort-ic { opacity: 1; }
+.th-sort-ic[data-dir="asc"] { transform: rotate(180deg); }
+.kt-ai-table .kt-ai-sticky-first td:first-child, .kt-ai-table .kt-ai-sticky-first th:first-child { position: sticky; left: 0; background: var(--kt-ai-bg); z-index: 1; }
+
+/* ---------- Diff-view документов ---------- */
+.kt-ai-diff { font-family: inherit; font-size: var(--kt-ai-text-sm); line-height: 1.55; border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-lg); overflow: hidden; }
+.kt-ai-diff .line { padding: 2px var(--kt-ai-space-5); white-space: pre-wrap; }
+.kt-ai-diff .line[data-op="add"] { background: var(--kt-ai-status-ok-bg); color: var(--kt-ai-status-ok-fg); }
+.kt-ai-diff .line[data-op="del"] { background: var(--kt-ai-status-risk-bg); color: var(--kt-ai-status-risk-fg); text-decoration: line-through; }
+
+/* ---------- Notification list ---------- */
+.kt-ai-notif-item { display: flex; gap: var(--kt-ai-space-4); align-items: flex-start; padding: var(--kt-ai-space-4) var(--kt-ai-space-5); border-bottom: 1px solid var(--kt-ai-divider); font-size: var(--kt-ai-text-sm); }
+.kt-ai-notif-item:last-child { border-bottom: none; }
+.kt-ai-notif-item::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: transparent; margin-top: 7px; flex-shrink: 0; }
+.kt-ai-notif-item[data-unread="true"]::before { background: var(--kt-ai-primary); }
+.kt-ai-notif-item .time { margin-left: auto; font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-faint); white-space: nowrap; }
+
+/* ---------- Duotone empty-state ---------- */
+.kt-ai-empty .icon-spot {
+  width: 56px; height: 56px; border-radius: 50%;
+  background: var(--kt-ai-primary-subtle); color: var(--kt-ai-primary);
+  display: flex; align-items: center; justify-content: center;
+}
+
+/* ---------- Date input ---------- */
+.kt-ai-input[type="date"], .kt-ai-input[type="datetime-local"] { font-family: var(--kt-ai-font-sans); font-size: var(--kt-ai-text-xs); font-variant-numeric: tabular-nums;}
+
+/* ---------- Card grid (адаптивная сетка карточек) ---------- */
+.kt-ai-card-grid { display: grid; gap: var(--kt-ai-space-5); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
+
+/* ---------- Отзывчивость shell ----------
+ * ≥1024 (bp-lg): полный sidebar 232px
+ * 832..1023:     icon-rail 52px – подписи .nav-label скрываются
+ * <832 (bp-md):  sidebar = overlay-drawer, открывается data-open="true"
+ * Брейкпоинты совпадают с --kt-ai-bp-* (в media var() недоступен) */
+/* Диапазон рейла задан С ДВУХ сторон. Раньше стояло только `max-width: 1023.98`,
+   и политика рейла доставала до выдвижной панели ниже 832px: структурное
+   правило ниже скрывает всё без иконки, а восстановление `.kt-ai-sidebar
+   .nav-label { display: initial }` в мобильном блоке его не перебивало —
+   у структурного правила пять `:not()`, и оно просто специфичнее. В итоге
+   панель во всю ширину экрана показывала колонку значков без единой подписи,
+   хотя место под подписи там есть. Верхняя граница делает диапазон тем, чем
+   он назван в комментарии к брейкпоинтам: 832..1023. */
+@media (min-width: 832px) and (max-width: 1023.98px) {
+  .kt-ai-shell { grid-template-columns: var(--kt-ai-sidebar-collapsed-width) minmax(0, 1fr); }
+
+  /* ПОЛИТИКА РЕЙЛА. В 52px помещается только иконный ряд — и это правило, а не
+     список исключений. Раньше здесь скрывались три известных класса
+     (.nav-label, .count, .brand-label), поэтому любой блок, добавленный
+     продуктом в сайдбар, оставался и раскладывался в колонку букв поверх
+     навигации: замер на 924px давал элементы шириной 0px при высоте до 234px.
+     Перечислять классы бессмысленно — список никогда не догонит разметку
+     продуктов, поэтому правило структурное: показываем то, что несёт иконку.
+
+     Элемент с иконкой (svg или img) внутри остаётся и становится иконной
+     кнопкой. Элемент без иконки в рейле нечем показать — скрывается целиком.
+     Опт-ин: data-rail="keep" оставляет как есть, и за 52px отвечает продукт. */
+  .kt-ai-sidebar :not(:has(svg, img)):not(svg):not(img):not([data-rail="keep"]):not(:has([data-rail="keep"])) { display: none; }
+  .kt-ai-sidebar :is(.kt-ai-nav-item, :has(> svg), :has(> img)) { justify-content: center; padding: 0; }
+}
+
+/* Заголовок группы в полосе значков. Показывать его нечем — в 52px не влезает
+   ни одно слово, а иконки у заголовка нет и быть не должно (иконка сделала бы
+   его похожим на пункт). Поэтому в рейле он становится тем, чем является по
+   сути: разделителем между группами. Опт-ин data-rail="keep" в разметке —
+   иначе структурное правило выше сняло бы его целиком вместе с линией.
+   Диапазон задан с двух сторон: ниже 832px сайдбар — выдвижная панель во всю
+   ширину, там заголовок снова показывается словами. */
+@media (min-width: 832px) and (max-width: 1023.98px) {
+  .kt-ai-sidebar .kt-ai-nav-group {
+    height: 0; overflow: hidden; padding: 0;
+    margin: var(--kt-ai-space-4) var(--kt-ai-space-3);
+    border-top: 1px solid var(--kt-ai-divider);
+  }
+  .kt-ai-sidebar .kt-ai-nav-group:first-child { margin-top: 0; border-top: 0; }
+}
+@media (max-width: 831.98px) {
+  /* Жёсткие гарантии мобильной вёрстки: без горизонтального скролла страницы,
+   * длинные строки переносятся, текстовые флекс-элементы умеют сжиматься */
+  .kt-ai-app, .kt-ai-shell { overflow-x: hidden; }
+  .kt-ai-app .kt-ai-chip, .kt-ai-shell .kt-ai-chip { min-width: 0; }
+  .kt-ai-card, .kt-ai-row, .kt-ai-banner { overflow-wrap: anywhere; }
+  .kt-ai-shell { grid-template-columns: 1fr; }
+  .kt-ai-sidebar {
+    position: fixed; top: 0; left: 0; bottom: 0; width: var(--kt-ai-sidebar-width);
+    transform: translateX(-100%); transition: transform var(--kt-ai-dur-slow) var(--kt-ai-ease-standard);
+    z-index: var(--kt-ai-z-drawer);
+  }
+  .kt-ai-sidebar[data-open="true"] { transform: none; box-shadow: var(--kt-ai-shadow-lg); }
+  .kt-ai-sidebar .nav-label, .kt-ai-sidebar .kt-ai-nav-item .count, .kt-ai-sidebar .brand-label { display: initial; }
+  .kt-ai-sidebar .kt-ai-nav-item { justify-content: flex-start; padding: 0 var(--kt-ai-space-4); }
+  .kt-ai-drawer { width: 100vw; max-width: 100vw; }
+  .kt-ai-work-column, .kt-ai-work-column-wide, .kt-ai-work-column-table { padding-left: var(--kt-ai-space-5); padding-right: var(--kt-ai-space-5); }
+}
+
+@keyframes ktai-spin { to { transform: rotate(360deg); } }
+
+/* ---------- Theme toggle: иконка активной темы едет внутри бегунка ---------- */
+.kt-ai-theme-toggle {
+  position: relative; width: 52px; height: 28px; flex-shrink: 0;
+  border-radius: var(--kt-ai-radius-full); border: 1px solid var(--kt-ai-border-strong);
+  background: var(--kt-ai-bg-active); cursor: pointer; padding: 0;
+  transition: background var(--kt-ai-dur-base), border-color var(--kt-ai-dur-base);
+}
+.kt-ai-theme-toggle:hover { border-color: var(--kt-ai-primary); }
+.kt-ai-theme-toggle[data-mode="dark"] { background: var(--kt-ai-bg-active); }
+.kt-ai-theme-toggle[data-mode="light"] { background: var(--kt-ai-primary-subtle); }
+.kt-ai-theme-toggle .thumb {
+  position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%;
+  background: var(--kt-ai-bg-elevated); box-shadow: var(--kt-ai-shadow-sm);
+  display: flex; align-items: center; justify-content: center;
+  transition: transform var(--kt-ai-dur-slow) var(--kt-ai-ease-standard);
+}
+.kt-ai-theme-toggle[data-mode="dark"] .thumb { transform: translateX(24px); }
+.kt-ai-theme-toggle .ic {
+  position: absolute; width: 13px; height: 13px;
+  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
+  transition: opacity var(--kt-ai-dur-base), transform var(--kt-ai-dur-slow) var(--kt-ai-ease-standard);
+}
+.kt-ai-theme-toggle .ic-moon { color: var(--kt-ai-primary); }
+.kt-ai-theme-toggle .ic-sun { color: var(--kt-ai-status-warn-fg); }
+.kt-ai-theme-toggle[data-mode="dark"] .ic-sun { opacity: 0; transform: rotate(90deg) scale(.4); }
+.kt-ai-theme-toggle[data-mode="dark"] .ic-moon { opacity: 1; transform: none; }
+.kt-ai-theme-toggle[data-mode="light"] .ic-moon { opacity: 0; transform: rotate(-90deg) scale(.4); }
+.kt-ai-theme-toggle[data-mode="light"] .ic-sun { opacity: 1; transform: none; }
+.kt-ai-theme-toggle .tic {
+  position: absolute; top: 50%; transform: translateY(-50%);
+  width: 13px; height: 13px;
+  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
+  color: var(--kt-ai-fg-faint);
+  transition: opacity .2s;
+}
+.kt-ai-theme-toggle .tic-sun { left: 7px; }
+.kt-ai-theme-toggle .tic-moon { right: 7px; }
+.kt-ai-theme-toggle[data-mode="dark"] .tic-moon { opacity: 0; }  /* спрятана под бегунком */
+.kt-ai-theme-toggle[data-mode="light"] .tic-sun { opacity: 0; }
+.kt-ai-theme-toggle .thumb { z-index: 1; }
+
+/* ============ v2.1.1 EDGE-КЕЙСЫ ============ */
+
+/* Выделение текста */
+.kt-ai-app ::selection, .kt-ai-shell ::selection { background: var(--kt-ai-selection); }
+
+/* Усечение текста (локализация: каз. строки длиннее) */
+.kt-ai-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.kt-ai-truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+
+/* Firefox-скроллбары */
+.kt-ai-app, .kt-ai-shell { scrollbar-width: thin; scrollbar-color: var(--kt-ai-border-strong) transparent; }
+
+/* Tooltip: позиция и перенос длинного текста */
+.kt-ai-tooltip[data-tip-pos="bottom"]::after { bottom: auto; top: calc(100% + 6px); }
+.kt-ai-tooltip[data-tip-pos="left"]::after { bottom: auto; left: auto; right: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
+.kt-ai-tooltip[data-tip-pos="right"]::after { bottom: auto; left: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
+.kt-ai-tooltip[data-tip-wrap]::after { white-space: normal; max-width: 240px; width: max-content; }
+
+/* Combobox внутри overflow-контейнера обрежется – раскрытие вверх */
+.kt-ai-combobox[data-direction="up"] .menu { top: auto; bottom: calc(100% + 4px); }
+
+/* Windows High Contrast / forced-colors */
+@media (forced-colors: active) {
+  .kt-ai-btn, .kt-ai-input, .kt-ai-select, .kt-ai-textarea, .kt-ai-card, .kt-ai-modal { border: 1px solid ButtonText; }
+  .kt-ai-status-pill, .kt-ai-chip { border: 1px solid ButtonText; }
+}
+
+/* Reduced motion: стоп бесконечным анимациям (длительности-токены уже обнулены) */
+@media (prefers-reduced-motion: reduce) {
+  .kt-ai-skeleton { animation: none; background: var(--kt-ai-bg-active); }
+  .kt-ai-btn[data-loading="true"]::after { animation-duration: 1.5s; } /* спиннер оставляем – это статус, не декорация */
+}
+
+/* Безопасные отступы iOS (notch) для фиксированных элементов */
+
+/* ============ v2.2 ДОПОЛНЕНИЯ (ревью 2026-06-11) ============ */
+
+/* ---------- Topbar: канонический glass-хром ----------
+ * Blur разрешён ТОЛЬКО на sticky-хроме и overlay, в контенте запрещён. */
+.kt-ai-topbar {
+  position: sticky; top: 0; z-index: var(--kt-ai-z-sticky);
+  display: flex; align-items: center; gap: var(--kt-ai-space-5);
+  height: 56px; padding: 0 var(--kt-ai-space-7);
+  background: var(--kt-ai-bg-glass);
+  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
+  border-bottom: 1px solid var(--kt-ai-divider);
+}
+.kt-ai-topbar .spacer { flex: 1; }
+
+/* ---------- AI-диалог ----------
+ * Ассистент – полная ширина без пузыря; пользователь – компактный пузырь.
+ * AI-контент всегда атрибутирован (.kt-ai-gen-label). */
+.kt-ai-chat { display: flex; flex-direction: column; gap: var(--kt-ai-space-6); }
+.kt-ai-msg { display: flex; gap: var(--kt-ai-space-4); font-size: var(--kt-ai-text-md); line-height: var(--kt-ai-leading-normal); }
+/* v3.7: орб отправителя у КАЖДОГО сообщения ассистента (интро и ответы идентичны) */
+.kt-ai-msg .msg-orb { width: 28px; height: 28px; border-radius: 50%; background: var(--kt-ai-ai-orb); flex-shrink: 0; margin-top: 1px; }
+/* v3.7: чат со своим скроллом — раскладка статична, растут только сообщения */
+.kt-ai-chat[data-fill="true"] { flex: 1 1 auto; min-height: 0; overflow-y: auto; scroll-behavior: smooth; padding-right: var(--kt-ai-space-2); }
+/* v4.0 (Michelle): пустой диалог – приветствие в оптическом центре, а не сирота в углу */
+.kt-ai-chat[data-fill="true"][data-empty="true"] { justify-content: center; }
+.kt-ai-chat[data-scroll="true"] { max-height: 420px; overflow-y: auto; scroll-behavior: smooth; padding-right: var(--kt-ai-space-2); }
+.kt-ai-msg .body { min-width: 0; max-width: 100%; }
+/* Ответ ассистента — полная ширина без пузыря. Рамка вокруг длинного ответа
+   ничего не сообщает: роль уже закодирована выравниванием и орбом, а карточка
+   внутри карточки диалога — свой же красный флаг. Пузырь остаётся только у
+   пользователя, где реплики короткие и «свой/чужой» читается формой. */
+.kt-ai-msg[data-role="assistant"] .body {
+  max-width: 100%;
+  padding-block: var(--kt-ai-space-3);
+}
+.kt-ai-msg[data-role="user"] { justify-content: flex-end; }
+.kt-ai-msg[data-role="user"] .body {
+  max-width: 76%;
+  background: var(--kt-ai-bg-soft);
+  border: 1px solid var(--kt-ai-border);
+  border-radius: var(--kt-ai-radius-2xl);
+  border-top-right-radius: var(--kt-ai-radius-sm);
+  padding: var(--kt-ai-space-4) var(--kt-ai-space-6);
+}
+.kt-ai-msg[data-streaming="true"] .body::after {
+  content: ""; display: inline-block; width: 8px; height: 14px;
+  margin-left: var(--kt-ai-space-2); vertical-align: -2px;
+  background: var(--kt-ai-ai-gradient); border-radius: var(--kt-ai-radius-xs);
+  animation: ktai-caret 1s steps(2) infinite;
+}
+@keyframes ktai-caret { 50% { opacity: 0; } }
+
+/* Пилюли навыков агента над полем ввода.
+ *
+ * Идея из ai-agent-input (aicss.dev): выбранный навык — не текст, который можно
+ * случайно надкусить бэкспейсом, а объект, удаляемый целиком. Там он вставлен
+ * ВНУТРЬ строки, но это возможно только в contenteditable, а у нас textarea.
+ * Переписывать композер на contenteditable ради этого нельзя: ломается undo,
+ * ввод через IME, вставка из буфера, доступность и мобильные клавиатуры —
+ * слишком дорого за одну возможность. Пилюли живут НАД полем, как вложения:
+ * то же свойство «удаляется целиком», без единого из перечисленных рисков.
+ */
+.kt-ai-prompt-skills {
+  display: flex; flex-wrap: wrap; gap: var(--kt-ai-space-3);
+  width: 100%; padding: 0 var(--kt-ai-space-2) var(--kt-ai-space-3);
+}
+/* Не :empty — он не сработает, если в контейнере остались пробельные узлы от
+   форматирования разметки, а это обычное дело. Проверяем ЭЛЕМЕНТЫ. */
+.kt-ai-prompt-skills:not(:has(*)) { display: none; }
+.kt-ai-prompt-skill {
+  display: inline-flex; align-items: center; gap: var(--kt-ai-space-2);
+  height: 22px; padding: 0 var(--kt-ai-space-2) 0 var(--kt-ai-space-4);
+  border-radius: var(--kt-ai-radius-tag);
+  background: var(--kt-ai-chip-purple-bg); color: var(--kt-ai-chip-purple-fg);
+  font-size: var(--kt-ai-text-2xs); font-weight: var(--kt-ai-weight-medium);
+  white-space: nowrap;
+}
+.kt-ai-prompt-skill button {
+  display: grid; place-items: center; width: 16px; height: 16px;
+  border-radius: var(--kt-ai-radius-full); color: inherit; opacity: .6;
+}
+.kt-ai-prompt-skill button:hover { opacity: 1; background: var(--kt-ai-bg-hover); }
+
+/* Меню slash-команд. Открывается НАД полем: композер обычно стоит внизу экрана,
+   и список, растущий вниз, уехал бы за край. */
+.kt-ai-slash-menu {
+  position: absolute; bottom: calc(100% + var(--kt-ai-space-3)); left: 0;
+  min-width: 260px; max-width: 360px; max-height: 240px; overflow-y: auto;
+  padding: var(--kt-ai-space-3);
+  background: var(--kt-ai-bg-elevated);
+  border: 1px solid var(--kt-ai-border);
+  border-radius: var(--kt-ai-radius-xl);
+  box-shadow: var(--kt-ai-shadow-lg);
+  z-index: var(--kt-ai-z-dropdown);
+}
+.kt-ai-slash-menu[hidden] { display: none; }
+.kt-ai-slash-item {
+  display: flex; flex-direction: column; gap: 1px; width: 100%;
+  padding: var(--kt-ai-space-3) var(--kt-ai-space-4);
+  border-radius: var(--kt-ai-radius-md);
+  text-align: left; font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg);
+}
+.kt-ai-slash-item:hover,
+.kt-ai-slash-item[data-active="true"] { background: var(--kt-ai-bg-hover); }
+
+.kt-ai-prompt-bar {
+  position: relative;
+  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--kt-ai-space-3);
+  padding: var(--kt-ai-space-3) var(--kt-ai-space-4);
+  background: var(--kt-ai-bg-soft);
+  border: 1px solid var(--kt-ai-border-strong);
+  border-radius: var(--kt-ai-radius-3xl);
+  transition: border-color var(--kt-ai-dur-fast) var(--kt-ai-ease-standard), box-shadow var(--kt-ai-dur-fast) var(--kt-ai-ease-standard);
+}
+/* AI-сигнатура: тихая градиентная кромка в фокусе (Mono: без тяжёлого ореола) */
+.kt-ai-prompt-bar:focus-within {
+  border-color: transparent;
+  background: linear-gradient(var(--kt-ai-bg-soft), var(--kt-ai-bg-soft)) padding-box,
+              var(--kt-ai-ai-gradient) border-box;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kt-ai-ai-accent) 12%, transparent);
+}
+.kt-ai-prompt-bar textarea {
+  flex: 1; min-width: 0; border: none; background: transparent; resize: none; outline: none;
+  color: var(--kt-ai-fg); font-family: var(--kt-ai-font-sans); font-size: var(--kt-ai-text-md);
+  line-height: var(--kt-ai-leading-normal);
+  padding: var(--kt-ai-space-3) var(--kt-ai-space-2);
+  min-height: var(--kt-ai-control-h-md); max-height: 160px;
+}
+.kt-ai-prompt-bar textarea::placeholder { color: var(--kt-ai-fg-faint); }
+.kt-ai-prompt-bar[data-busy="true"] { opacity: .7; }
+.kt-ai-prompt-bar[data-busy="true"] textarea { pointer-events: none; }
+.kt-ai-prompt-send {
+  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
+  width: var(--kt-ai-control-h-md); height: var(--kt-ai-control-h-md);
+  border: none; border-radius: var(--kt-ai-radius-full); cursor: pointer;
+  background: var(--kt-ai-ai-gradient); color: var(--kt-ai-fg-on-ai);
+  box-shadow: inset 0 1px 0 var(--kt-ai-inset-highlight);
+  transition: filter var(--kt-ai-dur-fast) var(--kt-ai-ease-standard), transform 60ms var(--kt-ai-ease-standard);
+}
+.kt-ai-prompt-send:hover { filter: saturate(1.15) brightness(1.06); }
+.kt-ai-prompt-send:active { transform: scale(.94); }
+.kt-ai-prompt-send:disabled { opacity: .4; cursor: default; }
+
+.kt-ai-suggestions { display: flex; flex-wrap: wrap; gap: var(--kt-ai-space-4); }
+.kt-ai-suggestion {
+  display: inline-flex; align-items: center; gap: var(--kt-ai-space-3);
+  padding: var(--kt-ai-space-3) var(--kt-ai-space-5);
+  border: 1px solid var(--kt-ai-border-strong); border-radius: var(--kt-ai-radius-full);
+  background: transparent; color: var(--kt-ai-fg-muted);
+  font-family: var(--kt-ai-font-sans); font-size: var(--kt-ai-text-xs); cursor: pointer;
+  transition: border-color var(--kt-ai-dur-fast), color var(--kt-ai-dur-fast), background var(--kt-ai-dur-fast);
+}
+.kt-ai-suggestion:hover { border-color: var(--kt-ai-primary); color: var(--kt-ai-fg); background: var(--kt-ai-primary-subtle); }
+
+.kt-ai-source-pill {
+  display: inline-flex; align-items: center; gap: var(--kt-ai-space-2);
+  padding: 1px var(--kt-ai-space-4);
+  border-radius: var(--kt-ai-radius-full);
+  background: var(--kt-ai-primary-subtle); color: var(--kt-ai-link);
+  font-size: var(--kt-ai-text-2xs); text-decoration: none;
+  border: 1px solid transparent; white-space: nowrap;
+}
+.kt-ai-source-pill:hover { border-color: var(--kt-ai-primary); }
+
+.kt-ai-gen-label { display: inline-flex; align-items: center; gap: var(--kt-ai-space-2); font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-faint); }
+.kt-ai-gen-label::before {
+  content: ""; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
+  background: var(--kt-ai-ai-orb);
+}
+
+/* AI-вход: кнопка-сигнатура (точка входа Төре/чата) */
+.kt-ai-btn[data-ai="true"] {
+  background: var(--kt-ai-ai-gradient);
+  border-color: transparent;
+  color: var(--kt-ai-fg-on-ai);
+  font-weight: var(--kt-ai-weight-semibold);
+  box-shadow: var(--kt-ai-shadow-sm), inset 0 1px 0 var(--kt-ai-inset-highlight),
+              0 2px 10px color-mix(in srgb, var(--kt-ai-ai-accent) 16%, transparent);
+}
+.kt-ai-btn[data-ai="true"]:hover { background: var(--kt-ai-ai-gradient); filter: saturate(1.15) brightness(1.06); }
+
+/* ---------- Dropdown-меню действий ---------- */
+.kt-ai-menu-anchor { position: relative; display: inline-block; }
+.kt-ai-menu {
+  position: absolute; top: calc(100% + 4px); right: 0; min-width: 180px;
+  background: var(--kt-ai-bg-elevated);
+  border: 1px solid var(--kt-ai-border-strong);
+  border-radius: var(--kt-ai-radius-lg);
+  box-shadow: var(--kt-ai-shadow-md);
+  padding: var(--kt-ai-space-2);
+  z-index: var(--kt-ai-z-dropdown);
+  display: none;
+}
+.kt-ai-menu[data-open="true"] { display: block; animation: ktai-rise var(--kt-ai-dur-base) var(--kt-ai-ease-enter); }
+.kt-ai-menu .item {
+  display: flex; align-items: center; gap: var(--kt-ai-space-4); width: 100%;
+  padding: var(--kt-ai-space-3) var(--kt-ai-space-4);
+  border: none; background: transparent; text-align: left; cursor: pointer;
+  color: var(--kt-ai-fg); font-family: var(--kt-ai-font-sans); font-size: var(--kt-ai-text-sm);
+  border-radius: var(--kt-ai-radius-md);
+}
+.kt-ai-menu .item:hover, .kt-ai-menu .item[data-active="true"] { background: var(--kt-ai-bg-hover); }
+.kt-ai-menu .item[data-danger="true"] { color: var(--kt-ai-danger); }
+.kt-ai-menu .item .kt-ai-kbd { margin-left: auto; }
+.kt-ai-menu .sep { height: 1px; background: var(--kt-ai-divider); margin: var(--kt-ai-space-2) 0; }
+
+/* ---------- Command palette: внутренности (⌘K) ---------- */
+.kt-ai-command-overlay {
+  position: fixed; inset: 0; background: var(--kt-ai-overlay);
+  display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh;
+  z-index: var(--kt-ai-z-modal);
+  animation: ktai-fade var(--kt-ai-dur-base) var(--kt-ai-ease-enter);
+}
+.kt-ai-command .cmd-input {
+  width: 100%; border: none; background: transparent; outline: none;
+  padding: var(--kt-ai-space-5) var(--kt-ai-space-6);
+  color: var(--kt-ai-fg); font-family: var(--kt-ai-font-sans); font-size: var(--kt-ai-text-md);
+  border-bottom: 1px solid var(--kt-ai-divider);
+}
+.kt-ai-command .cmd-input::placeholder { color: var(--kt-ai-fg-faint); }
+.kt-ai-command .cmd-list { max-height: 320px; overflow-y: auto; padding: var(--kt-ai-space-2); }
+.kt-ai-command .cmd-group { padding: var(--kt-ai-space-3) var(--kt-ai-space-4) var(--kt-ai-space-1); font-size: var(--kt-ai-text-2xs); font-weight: var(--kt-ai-weight-semibold); text-transform: uppercase; letter-spacing: .8px; color: var(--kt-ai-fg-faint); }
+.kt-ai-command .cmd-item {
+  display: flex; align-items: center; gap: var(--kt-ai-space-4);
+  padding: var(--kt-ai-space-3) var(--kt-ai-space-4);
+  border-radius: var(--kt-ai-radius-md); cursor: pointer;
+  font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg);
+}
+.kt-ai-command .cmd-item:hover, .kt-ai-command .cmd-item[data-active="true"] { background: var(--kt-ai-bg-hover); }
+.kt-ai-command .cmd-item .kt-ai-kbd { margin-left: auto; }
+.kt-ai-command .cmd-empty { padding: var(--kt-ai-space-8); text-align: center; color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-sm); }
+
+/* ---------- Filter-chips: применённые фильтры над таблицей ---------- */
+.kt-ai-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kt-ai-space-3); padding: var(--kt-ai-space-3) 0; }
+/* v6.2 (DS-007): внутри стека вертикальный padding снимается — отбивку задаёт
+   стек, как у .kt-ai-disclosure. Пока padding оставался, ступень ритма врала:
+   `tight` (12) превращалась на экране в 12+6+6 = 24, то есть в блоковый зазор,
+   и панель фильтров разъезжалась на два независимых блока. Продукт лечил это
+   своим классом-обёрткой с gap: 0 — ровно тот обход ДС, который канон
+   запрещает. Собственный padding остаётся для бара вне стека (например под
+   тулбаром таблицы), где иначе он прилипнет к содержимому. */
+.kt-ai-v > .kt-ai-filterbar { padding-block: 0; }
+
+/* Панель шага: строка фильтров + строка вкладок под ней — ОДНА вещь.
+   Канонная обёртка, чтобы каждый продукт не изобретал свою: это уже случилось
+   в консолидации (.app-toolbar) и было бы повторено следующим. */
+.kt-ai-toolbar { display: flex; flex-direction: column; gap: var(--kt-ai-stack-tight); }
+.kt-ai-toolbar > .kt-ai-filterbar { padding-block: 0; }
+/* Селект или инпут внутри фильтр-бара — по содержимому, а не на всю строку:
+   width:100% у форм рассчитан на .kt-ai-field, во flex-wrap он выталкивает
+   каждый контрол на отдельную строку, и бар рассыпается в стопку. */
+.kt-ai-filterbar :is(.kt-ai-select, .kt-ai-input) { width: auto; }
+.kt-ai-filter-chip {
+  display: inline-flex; align-items: center; gap: var(--kt-ai-space-2);
+  padding: 2px var(--kt-ai-space-4);
+  border: 1px solid var(--kt-ai-border-strong); border-radius: var(--kt-ai-radius-tag);
+  background: transparent; font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg); white-space: nowrap;
+}
+.kt-ai-filter-chip .k { color: var(--kt-ai-fg-muted); font-family: var(--kt-ai-font-sans); }
+.kt-ai-filter-chip .remove { cursor: pointer; opacity: .6; padding: 0 3px; border-radius: 50%; }
+.kt-ai-filter-chip .remove:hover { opacity: 1; background: var(--kt-ai-bg-active); }
+.kt-ai-filterbar .clear-all { border: none; background: transparent; color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-2xs); cursor: pointer; padding: 2px var(--kt-ai-space-3); border-radius: var(--kt-ai-radius-sm); }
+.kt-ai-filterbar .clear-all:hover { color: var(--kt-ai-fg); background: var(--kt-ai-bg-hover); }
+/* Активная вкладка-фильтр: выбранная категория обязана быть видимой — иначе
+   пользователь не знает, какой срез читает. */
+.kt-ai-filter-chip[data-active="true"] {
+  background: var(--kt-ai-primary-subtle);
+  border-color: var(--kt-ai-primary);
+  color: var(--kt-ai-primary);
+  font-weight: var(--kt-ai-weight-semibold);
+}
+
+/* ---------- Radio ---------- */
+.kt-ai-radio { display: inline-flex; align-items: center; gap: var(--kt-ai-space-4); font-size: var(--kt-ai-text-sm); cursor: pointer; }
+.kt-ai-radio input { width: 16px; height: 16px; accent-color: var(--kt-ai-primary); }
+.kt-ai-radio-group { display: flex; flex-direction: column; gap: var(--kt-ai-space-3); }
+
+/* ---------- Toast: действие (undo) и закрытие ---------- */
+.kt-ai-toast .action { margin-left: auto; border: none; background: transparent; color: var(--kt-ai-link); font-size: var(--kt-ai-text-xs); font-weight: var(--kt-ai-weight-medium); cursor: pointer; padding: 2px var(--kt-ai-space-3); border-radius: var(--kt-ai-radius-sm); white-space: nowrap; }
+.kt-ai-toast .action:hover { background: var(--kt-ai-bg-hover); }
+.kt-ai-toast .close { border: none; background: transparent; color: var(--kt-ai-fg-faint); cursor: pointer; padding: 2px; border-radius: var(--kt-ai-radius-sm); line-height: 0; flex-shrink: 0; }
+.kt-ai-toast .close:hover { color: var(--kt-ai-fg); }
+.kt-ai-toast .action + .close { margin-left: 0; }
+.kt-ai-toast .close:only-of-type { margin-left: auto; }
+
+/* ---------- Popover: якорный интерактивный слой ---------- */
+.kt-ai-popover-anchor { position: relative; display: inline-block; }
+.kt-ai-popover {
+  position: absolute; top: calc(100% + 4px); left: 0; min-width: 220px;
+  background: var(--kt-ai-bg-elevated);
+  border: 1px solid var(--kt-ai-border-strong);
+  border-radius: var(--kt-ai-radius-lg);
+  box-shadow: var(--kt-ai-shadow-md);
+  padding: var(--kt-ai-space-5);
+  z-index: var(--kt-ai-z-dropdown);
+  display: none;
+}
+.kt-ai-popover[data-open="true"] { display: block; animation: ktai-rise var(--kt-ai-dur-base) var(--kt-ai-ease-enter); }
+.kt-ai-popover[data-align="right"] { left: auto; right: 0; }
+
+/* ---------- Плавающий bulk-bar ---------- */
+.kt-ai-table-bulkbar[data-floating="true"] {
+  position: fixed; left: 50%; transform: translateX(-50%);
+  bottom: max(var(--kt-ai-space-8), env(safe-area-inset-bottom));
+  background: var(--kt-ai-bg-elevated);
+  border: 1px solid var(--kt-ai-border-strong);
+  border-radius: var(--kt-ai-radius-full);
+  box-shadow: var(--kt-ai-shadow-lg);
+  padding: var(--kt-ai-space-3) var(--kt-ai-space-6);
+  z-index: var(--kt-ai-z-sticky);
+}
+
+/* ---------- Row actions: тихие действия по hover/focus ---------- */
+.kt-ai-row .actions { margin-left: auto; display: flex; align-items: center; gap: var(--kt-ai-space-2); opacity: 0; transition: opacity var(--kt-ai-dur-fast) var(--kt-ai-ease-standard); }
+.kt-ai-row:hover .actions, .kt-ai-row:focus-within .actions, .kt-ai-row[data-active="true"] .actions { opacity: 1; }
+.kt-ai-table tbody tr .actions { display: flex; align-items: center; gap: var(--kt-ai-space-2); opacity: 0; transition: opacity var(--kt-ai-dur-fast) var(--kt-ai-ease-standard); }
+.kt-ai-table tbody tr:hover .actions, .kt-ai-table tbody tr:focus-within .actions { opacity: 1; }
+
+/* Мобильный card-режим ДОЛЖЕН идти после десктопных правил таблицы:
+   специфичность у них одинаковая, медиазапрос её не повышает, поэтому
+   решает порядок. Раньше блок стоял выше и десктопные height/padding
+   протекали в карточки — ячейки распирало до 48px вместо ~20px. */
+@media (max-width: 639.98px) {
+  .kt-ai-table { min-width: 0; display: block; }
+  .kt-ai-table thead, .kt-ai-table colgroup, .kt-ai-table .cell-select { display: none; }
+  .kt-ai-table tbody { display: block; }
+  .kt-ai-table tr { position: relative; display: block; border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-xl); background: var(--kt-ai-bg-elevated); padding: var(--kt-ai-space-4) var(--kt-ai-space-5); margin-bottom: var(--kt-ai-space-4); }
+  .kt-ai-table tr:hover { background: var(--kt-ai-bg-elevated); }
+  .kt-ai-table td { display: flex; align-items: baseline; justify-content: space-between; gap: var(--kt-ai-space-5); border: none; padding: var(--kt-ai-space-2) 0; text-align: right; height: auto; }
+  .kt-ai-table td::before { content: attr(data-label); flex: 0 0 auto; text-align: left; color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-xs); font-weight: var(--kt-ai-weight-medium); }
+  /* Без data-label карточный режим оставлял пустую колонку слева, а значение
+     улетало вправо — обычная таблица выглядела сломанной, и подсказки не было.
+     Теперь ячейка без подписи просто выравнивается по левому краю. */
+  .kt-ai-table td:not([data-label])::before { content: none; }
+  .kt-ai-table td:not([data-label]) { justify-content: flex-start; text-align: left; }
+  .kt-ai-table td:nth-child(2) { display: block; padding: 0 40px var(--kt-ai-space-3) 0; margin-bottom: var(--kt-ai-space-2); border-bottom: 1px solid var(--kt-ai-divider); text-align: left; font-weight: var(--kt-ai-weight-semibold); }
+  .kt-ai-table td:nth-child(2)::before { display: none; }
+  .kt-ai-table td:nth-child(2) .cell-sub { font-weight: var(--kt-ai-weight-regular); }
+  .kt-ai-table .row-act { position: absolute; top: var(--kt-ai-space-3); right: var(--kt-ai-space-4); padding: 0; }
+  .kt-ai-table .row-act::before { display: none; }
+  .kt-ai-table .row-kebab { opacity: 1; }
+}
+@media (pointer: coarse) {
+  .kt-ai-row .actions, .kt-ai-table tbody tr .actions { opacity: 1; } /* hover ненадёжен на touch */
+}
+
+/* ============ v2.3 «Aurora × Attio» (2026-06-12) ============ */
+
+/* Трекинг заголовков перенесён в их основные определения выше: держать его
+   отдельным правилом значит определять класс дважды, и правка в основном
+   определении молча не срабатывает. */
+
+/* Mono-голос: технические подписи */
+/* .kt-ai-label отсюда убран: он определялся дважды, и это правило молча
+   перебивало гарнитуру, вес и разрядку из основного определения — правка там
+   не давала эффекта. Всё про label теперь в одном месте, выше. */
+.kt-ai-command .cmd-group { font-family: var(--kt-ai-font-mono); font-weight: var(--kt-ai-weight-medium); letter-spacing: .4px; }
+.kt-ai-notif-item .time { font-family: var(--kt-ai-font-sans); font-variant-numeric: tabular-nums;}
+
+/* Тихая ссылка «Подробнее →» */
+.kt-ai-link[data-arrow] { color: var(--kt-ai-fg-muted); }
+.kt-ai-link[data-arrow]::after { content: " →"; display: inline-block; transition: transform var(--kt-ai-dur-fast) var(--kt-ai-ease-standard); }
+.kt-ai-link[data-arrow]:hover { color: var(--kt-ai-fg); text-decoration: none; }
+.kt-ai-link[data-arrow]:hover::after { transform: translateX(2px); }
+
+/* Dot-grid текстура пустых состояний */
+
+/* Property-row (Attio): детали объекта в drawer/карточке */
+.kt-ai-prop { display: flex; align-items: center; gap: var(--kt-ai-space-4); min-height: 30px; font-size: var(--kt-ai-text-sm); }
+/* Ключ фиксировался на 148px жёстко: на панели 260px это 65% строки, и
+   значению оставалось 70px. Ограничение по доле снимает случай узкой панели,
+   не трогая обычную. */
+.kt-ai-prop .k { display: flex; align-items: center; gap: var(--kt-ai-space-3); flex: 0 0 148px; max-width: 40%; color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-xs); }
+.kt-ai-prop .v { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; display: flex; align-items: center; gap: var(--kt-ai-space-3); flex-wrap: wrap; }
+.kt-ai-prop .v[data-empty="true"] { color: var(--kt-ai-fg-faint); }
+
+} /* @layer kt-components */
+
+/* ── Сенсорная ширина: цель нажатия 44px (вне @layer — правило-порог) ─────── */
+/* v5.8.0. Правило ДС: на сенсорной ширине (≤768px или указатель coarse) ни один
+   интерактивный элемент не ниже 44px — минимальной цели, в которую попадают
+   пальцем. Цена промаха измеряется не пикселями: рядом стоящие «Принять» и
+   «Отклонить» в 24–32px дают чужое решение, отменять которое придётся отдельным
+   действием.
+   Токены это уже умели (@media pointer:coarse в kt-ai-tokens.css поднимает
+   control-h), но покрывали только те компоненты, что берут высоту из токена. У
+   пилюли-фильтра высоты нет вовсе — она складывается из padding и кегля 11px, и
+   на телефоне оставалась 24px. Условие тоже было одно, `pointer: coarse`: на
+   ноутбуке, суженном до 375px, правило молчало — а проверяют продукт именно так.
+   Порог задаётся ОДНИМ токеном --kt-ai-control-h-touch, а не числом в каждом
+   правиле: иначе «44» разъедется по файлу, как уже было с радиусами.
+   Ширина остаётся по содержимому: цель — высота строки, растягивать пилюли по
+   горизонтали значит ломать плотность списка фильтров. Для квадратных целей
+   (иконка, чекбокс) ставится и min-width. */
+@media (pointer: coarse), (max-width: 767.98px) {
+  .kt-ai-filter-chip,
+  .kt-ai-filterbar .clear-all,
+  .kt-ai-tab,
+  .kt-ai-segmented .seg,
+  .kt-ai-suggestion,
+  .kt-ai-switch-row {
+    min-height: var(--kt-ai-control-h-touch);
+  }
+  /* Крестик внутри пилюли — самостоятельная цель: промах по нему снимает не тот
+     фильтр, и специалист этого не замечает. Высоту он берёт РАСТЯЖЕНИЕМ по
+     пилюле (align-self: stretch), а не своим min-height: иначе 44px крестика
+     складывались бы с рамкой пилюли и та вырастала до 50px — цель выполнена,
+     а список фильтров стал в два раза выше. */
+  .kt-ai-filter-chip .remove {
+    min-width: var(--kt-ai-control-h-touch); align-self: stretch;
+    display: inline-flex; align-items: center; justify-content: center;
+  }
+  .kt-ai-toast .close, .kt-ai-toast .action {
+    min-width: var(--kt-ai-control-h-touch); min-height: var(--kt-ai-control-h-touch);
+    display: inline-flex; align-items: center; justify-content: center;
+  }
+  .kt-ai-checkbox, .kt-ai-radio { min-height: var(--kt-ai-control-h-touch); min-width: var(--kt-ai-control-h-touch); justify-content: center; }
+  /* Свитч: трек остаётся 34×20 — это индикатор состояния, раздувать его значит
+     менять внешний вид ради цели нажатия. Растёт сама рамка контрола, трек
+     центруется внутри. Через ::after поверх это не решается: невидимая область
+     44px торчала бы за пределы 34px-контрола и добавляла 5px к ширине страницы
+     — правило про цель нажатия породило бы горизонтальную прокрутку, ровно ту,
+     которую чинит T-176. Проверено замером: scrollWidth рос на 5px. */
+  .kt-ai-switch { min-width: var(--kt-ai-control-h-touch); min-height: var(--kt-ai-control-h-touch); }
+  .kt-ai-switch .track {
+    inset: auto; top: 50%; left: 50%; transform: translate(-50%, -50%);
+    width: 34px; height: 20px;
+  }
+
+  /* React-кит размечен утилитами Tailwind, а не классами .kt-ai-*: правила выше
+     до него не достают, и порог пришлось бы дописывать к каждой из ~70 кнопок —
+     то есть заводить 70 мест, где его можно забыть. Поэтому порог задаётся один
+     раз на поддереве кита: [data-kt-ai-kit] ставят KTAIShell и KTScreen.
+     min-height ПОБЕЖДАЕТ height по спецификации CSS — h-7 (28px) от Tailwind
+     остаётся в разметке и просто перестаёт действовать на сенсорной ширине.
+     Порог общий и для продуктового кода внутри оболочки: правило про цель
+     нажатия не делит кнопки на свои и чужие. Осознанное исключение (плотный
+     инлайн-контрол, который обязан быть меньше) помечается data-kt-touch="off" —
+     явным отказом, а не молчанием. */
+  [data-kt-ai-kit] :is(button, a[href], [role="button"], [role="link"], [role="menuitem"], [role="tab"], summary):not([data-kt-touch="off"]) {
+    min-height: var(--kt-ai-control-h-touch);
+  }
+  /* Подложка-ловушка клика (fixed inset-0) — не цель нажатия, а способ поймать
+     промах мимо меню. Порог ей не нужен, а min-height на inset-0 безвреден, но
+     врал бы в замерах: элемент не виден и целью не является. */
+  [data-kt-ai-kit] button[aria-hidden="true"], [data-kt-ai-kit] button[aria-hidden] { min-height: 0; }
+}
+
+/* ── Доступность (вне @layer, чтобы надёжно переопределять) ───────────────── */
+/* Уважать «уменьшить движение»: глушим анимации/переходы, но не ломаем функциональность. */
+@media (prefers-reduced-motion: reduce) {
+  .kt-ai-app *, .kt-ai-app *::before, .kt-ai-app *::after,
+  .kt-ai-toast, .kt-ai-drawer, .kt-ai-menu, .kt-ai-modal, .kt-ai-popover, .kt-ai-command {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+/* Повышенный контраст: толще фокус-кольцо, явные границы и подчёркнутые ссылки. */
+@media (prefers-contrast: more) {
+  .kt-ai-app :focus-visible, .kt-ai-shell :focus-visible { outline-width: 3px; outline-offset: 2px; }
+  .kt-ai-app { --kt-ai-border: var(--kt-ai-border-strong); }
+  .kt-ai-app .kt-ai-link { text-decoration: underline; }
+  .kt-ai-status-pill { outline: 1px solid color-mix(in srgb, currentColor 40%, transparent); }
+}
+/* Меньше прозрачности: blur на sticky-хроме падает, фон становится плотным (легибельность важнее эффекта). */
+@media (prefers-reduced-transparency: reduce) {
+  .kt-ai-topbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--kt-ai-bg-elevated); }
+}
+/* Утилита для скринридеров: видимо только для AT (для live-region'ов и подписей). */
+/* Блокировка прокрутки фона, пока открыт модал/drawer.
+   Вешать на <html> (не на body) при открытии оверлея, снимать при закрытии:
+     document.documentElement.classList.toggle('kt-ai-scroll-locked', open)
+   Без этого страница продолжает скроллиться ПОД оверлеем — проверено поведением.
+   Про рывок вбок: на Windows/Linux скроллбар занимает место, и когда он исчезает,
+   контент прыгает. Лечится `scrollbar-gutter: stable` на прокручиваемом элементе —
+   в kt-ai-page.css это уже сделано для страницы; в своём приложении поставь его
+   на тот элемент, который реально скроллится. */
+.kt-ai-scroll-locked { overflow: hidden; }
+
+.kt-ai-sr-only {
+  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+}
+
+/* ============================================================
+   ПРИМИТИВЫ РАСКЛАДКИ — чтобы ДС принимала интерфейсы, которых мы не предвидели.
+   Компоненты покрывают известные случаи; примитивы дают собрать НОВЫЙ экран
+   из шкал системы, а не из инлайн-стилей. Замерено на реальном экране: без них
+   разработчик пишет ~40 инлайновых правил (12 из них — вертикальные отступы),
+   и ритм расходится с системой уже на втором экране.
+   Всё на токенах: правка шкалы в tokens.json меняет раскладку везде.
+   ============================================================ */
+
+/* Вертикальный стек: заменяет marginTop у каждого потомка. */
+.kt-ai-v { display: flex; flex-direction: column; gap: var(--kt-ai-space-6); }
+.kt-ai-v[data-gap="xs"] { gap: var(--kt-ai-space-2); }
+.kt-ai-v[data-gap="sm"] { gap: var(--kt-ai-space-4); }
+.kt-ai-v[data-gap="lg"] { gap: var(--kt-ai-space-8); }
+.kt-ai-v[data-gap="xl"] { gap: var(--kt-ai-space-10); }
+/* v6.1: ступени ритма прямо на стеке. Без них экран группировался только
+   своими классами продукта (`app-stack-*`), а чаще не группировался вовсе:
+   корневой столбец получал один зазор, и панель фильтров, её вкладки и
+   карточки списка расходились на одно и то же расстояние. Равномерность —
+   не ритм: одинаковый зазор на всё говорит «здесь ничто ни с чем не связано». */
+.kt-ai-v[data-gap="tight"]  { gap: var(--kt-ai-stack-tight); }
+.kt-ai-v[data-gap="block"]  { gap: var(--kt-ai-stack-block); }
+.kt-ai-v[data-gap="group"]  { gap: var(--kt-ai-stack-group); }
+.kt-ai-v[data-gap="region"] { gap: var(--kt-ai-stack-region); }
+
+/* Горизонтальный ряд. Не путать с .kt-ai-row — та строка списка со своим паддингом. */
+.kt-ai-h-stack { display: flex; align-items: center; gap: var(--kt-ai-space-4); flex-wrap: wrap; }
+.kt-ai-h-stack[data-gap="xs"] { gap: var(--kt-ai-space-2); }
+.kt-ai-h-stack[data-gap="lg"] { gap: var(--kt-ai-space-6); }
+.kt-ai-h-stack[data-gap="tight"] { gap: var(--kt-ai-stack-tight); }
+.kt-ai-h-stack[data-gap="block"] { gap: var(--kt-ai-stack-block); }
+.kt-ai-h-stack[data-align="start"] { align-items: flex-start; }
+.kt-ai-h-stack[data-align="baseline"] { align-items: baseline; }
+.kt-ai-h-stack[data-nowrap="true"] { flex-wrap: nowrap; }
+/* v5.8.1: ряд, которому запрещено переноситься, в узкой колонке выходит за
+   родителя и толкает горизонтальную прокрутку ВСЕЙ страницы — тот же дефект,
+   что чинил T-176, только источник другой. Замерено на 375px: страница
+   расширялась до 700px.
+   Само `nowrap` этого не лечит и не должно: значение `true` оставлено как есть,
+   потому что прокручиваемый ряд — это НЕ бесплатная надстройка. `overflow-x:
+   auto` по спецификации вынуждает `overflow-y` стать `auto` тоже, а значит ряд
+   начинает обрезать всё, что вылезает вверх и вниз: меню, поповер, подсказку,
+   кольцо фокуса. Ряд с кебаб-кнопкой такой правкой сломался бы молча.
+   Поэтому выбор явный и по имени: `scroll` — ряд прокручивает себя сам,
+   `true` — ряд остаётся под ответственностью автора. */
+.kt-ai-h-stack[data-nowrap="scroll"] {
+  flex-wrap: nowrap; min-width: 0;
+  overflow-x: auto; overscroll-behavior-x: contain;
+  scrollbar-width: thin;
+}
+
+/* Распорка: всё после неё уходит вправо. Заменяет marginLeft:auto. */
+.kt-ai-spacer { margin-left: auto; }
+
+/* Текстовые утилиты — вместо инлайновых fontSize/fontWeight/color. */
+.kt-ai-t-xs   { font-size: var(--kt-ai-text-xs); }
+.kt-ai-t-sm   { font-size: var(--kt-ai-text-sm); }
+.kt-ai-t-md   { font-size: var(--kt-ai-text-md); }
+.kt-ai-t-lg   { font-size: var(--kt-ai-text-lg); }
+.kt-ai-t-xl   { font-size: var(--kt-ai-text-xl); }
+.kt-ai-t-medium   { font-weight: var(--kt-ai-weight-medium); }
+.kt-ai-t-semibold { font-weight: var(--kt-ai-weight-semibold); }
+.kt-ai-t-muted { color: var(--kt-ai-fg-muted); }
+.kt-ai-t-faint { color: var(--kt-ai-fg-faint); }
+.kt-ai-t-nowrap { white-space: nowrap; }
+
+/* Ограничители ширины — колонка чтения и формы. */
+.kt-ai-narrow { max-width: 640px; }
+.kt-ai-prose  { max-width: 68ch; }
+
+/* ============================================================
+   ПОМОЩНИК — боковая панель, а не всплывающий попап.
+   Раньше React-кит рисовал окошко 340px своей вёрсткой на Tailwind, хотя классы
+   чата (.kt-ai-chat/.kt-ai-msg/.kt-ai-prompt-bar/.kt-ai-suggestions) в ДС уже были.
+   Панель во всю высоту — паттерн ElevenLabs/Linear: диалог не перекрывает работу,
+   его видно вместе с экраном, композер закреплён снизу, история скроллится сама.
+   ============================================================ */
+
+/* Кнопка вызова. Отдельный слой от панели: при открытии кнопка не сдвигается. */
+.kt-ai-fab {
+  position: fixed; right: var(--kt-ai-space-7); bottom: var(--kt-ai-space-7);
+  /* Ниже drawer/модалки: на одном слое кнопка накрывала их подвал с действиями. */
+  z-index: var(--kt-ai-z-sticky);
+  display: inline-flex; align-items: center; gap: var(--kt-ai-space-3);
+  height: 40px; padding: 0 var(--kt-ai-space-6);
+  border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-full);
+  background: var(--kt-ai-bg-elevated); color: var(--kt-ai-fg);
+  font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-medium);
+  box-shadow: var(--kt-ai-shadow-lg); cursor: pointer;
+  transition: background var(--kt-ai-dur-fast) var(--kt-ai-ease-standard), transform var(--kt-ai-dur-fast);
+}
+.kt-ai-fab:hover { background: var(--kt-ai-bg-hover); }
+.kt-ai-fab:active { transform: scale(.97); }
+.kt-ai-fab .orb {
+  width: 16px; height: 16px; border-radius: 50%;
+  background: var(--kt-ai-ai-orb); flex-shrink: 0;
+}
+
+/* Орб агента (kt-ai-orb.js). Цвет НЕ задаётся: скрипт рисует точки
+   currentColor, поэтому орб темизуется теми же токенами, что и текст рядом. */
+.kt-ai-orb { display: block; flex-shrink: 0; color: var(--kt-ai-fg-muted); }
+.kt-ai-orb[data-state="thinking"] { color: var(--kt-ai-fg); }
+
+/* Кнопка агента: только орб, без подписи. Подпись «AI» ничего не добавляла —
+   круглая кнопка в углу и так читается как вход в помощника, а текст делал её
+   шире и заметнее, чем ей положено быть. */
+.kt-ai-fab[data-orb-only="true"] {
+  width: 44px; padding: 0; justify-content: center;
+  gap: 0; height: 44px;
+}
+.kt-ai-fab[data-orb-only="true"] .kt-ai-orb { width: 22px; height: 22px; }
+
+.kt-ai-assistant {
+  position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--kt-ai-z-drawer);
+  width: 400px; max-width: 100vw;
+  display: flex; flex-direction: column;
+  background: var(--kt-ai-bg-elevated);
+  border-left: 1px solid var(--kt-ai-border-strong);
+  box-shadow: var(--kt-ai-shadow-xl);
+  animation: ktai-slide-in var(--kt-ai-dur-slow) var(--kt-ai-ease-enter);
+}
+@keyframes ktai-slide-in { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }
+@media (prefers-reduced-motion: reduce) { .kt-ai-assistant { animation: none; } }
+
+.kt-ai-assistant-head {
+  display: flex; align-items: center; gap: var(--kt-ai-space-4);
+  padding: var(--kt-ai-space-5);
+  border-bottom: 1px solid var(--kt-ai-border); flex-shrink: 0;
+}
+.kt-ai-assistant-head .orb {
+  width: 26px; height: 26px; border-radius: 50%;
+  background: var(--kt-ai-ai-orb); flex-shrink: 0;
+}
+.kt-ai-assistant .kt-ai-chat { padding: var(--kt-ai-space-5); }
+.kt-ai-assistant-composer { padding: var(--kt-ai-space-5); border-top: 1px solid var(--kt-ai-border); flex-shrink: 0; }
+
+/* На узком экране помощник занимает всю ширину — иначе работать в нём невозможно. */
+@media (max-width: 639.98px) {
+  .kt-ai-assistant { width: 100vw; }
+  .kt-ai-fab { right: var(--kt-ai-space-5); bottom: var(--kt-ai-space-5); }
+}
+
+/* ============================================================
+   РАСКРЫВАЮЩИЙСЯ БЛОК (disclosure) — карточка, которая разворачивается на месте.
+   Зачем: для очередей, где нужно СРАВНИВАТЬ объекты, drawer плох — он закрывает
+   список, теряет контекст и заставляет открывать/закрывать по одному. Раскрытие
+   на месте оставляет соседей видимыми: специалист листает и разбирает подряд.
+   Паттерн Linear/GitHub/Notion.
+
+   Разметка (кнопка — чтобы работали клавиатура и screen reader):
+     <article class="kt-ai-disclosure" data-open="true">
+       <button class="kt-ai-disclosure-head" aria-expanded="true">
+         <svg class="kt-ai-disclosure-chevron">…</svg> …шапка…
+       </button>
+       <div class="kt-ai-disclosure-body">…детали…</div>
+     </article>
+   ============================================================ */
+
+.kt-ai-disclosure {
+  border: 1px solid var(--kt-ai-card-border);
+  border-radius: var(--kt-ai-radius-3xl);
+  background: var(--kt-ai-card-bg);
+  overflow: hidden;
+  transition: border-color var(--kt-ai-dur-base) var(--kt-ai-ease-standard);
+}
+.kt-ai-disclosure:hover { border-color: var(--kt-ai-card-border-hover); }
+.kt-ai-disclosure[data-open="true"] { border-color: var(--kt-ai-border-strong); }
+.kt-ai-disclosure + .kt-ai-disclosure { margin-top: var(--kt-ai-space-4); }
+/* v6.1: внутри стека отбивку задаёт стек. Соседский margin складывался с
+   gap родителя (12 + 8 = 20), и карточки списка расходились ДАЛЬШЕ, чем
+   список от своей панели, — иерархия переворачивалась. Правило соседей
+   оставлено для разметки без стека, где иначе карточки слипнутся. */
+.kt-ai-v > .kt-ai-disclosure + .kt-ai-disclosure { margin-top: 0; }
+
+.kt-ai-disclosure-head {
+  display: flex; align-items: flex-start; gap: var(--kt-ai-space-5);
+  width: 100%; padding: var(--kt-ai-space-6);
+  text-align: left; cursor: pointer;
+  transition: background var(--kt-ai-dur-fast) var(--kt-ai-ease-standard);
+}
+.kt-ai-disclosure-head:hover { background: var(--kt-ai-bg-hover); }
+.kt-ai-disclosure-head:active { background: var(--kt-ai-bg-active); }
+
+/* Шеврон: единственная анимация — transform, как требует гейт G3. */
+.kt-ai-disclosure-chevron {
+  flex-shrink: 0; margin-top: 2px; color: var(--kt-ai-fg-faint);
+  transition: transform var(--kt-ai-dur-base) var(--kt-ai-ease-standard);
+}
+.kt-ai-disclosure[data-open="true"] .kt-ai-disclosure-chevron { transform: rotate(90deg); }
+
+.kt-ai-disclosure-body {
+  padding: var(--kt-ai-space-6);
+  border-top: 1px solid var(--kt-ai-divider);
+  animation: ktai-reveal var(--kt-ai-dur-base) var(--kt-ai-ease-enter);
+}
+@keyframes ktai-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
+@media (prefers-reduced-motion: reduce) {
+  .kt-ai-disclosure-body { animation: none; }
+  .kt-ai-disclosure-chevron { transition: none; }
+}
+
+/* ---------- Раскрытие на НАТИВНОМ <details> ----------
+   .kt-ai-disclosure выше — на div-ах с data-open, и ему нужен JS. Серверному
+   рантайму (Python/FastAPI в мониторинге качества) и любой странице без
+   скриптов нужен тот же приём без JS, и оба продукта написали его сами: один
+   завёл собственный .full-disclosure с гашением маркера, второй — правило
+   `details > summary { cursor: pointer }`. Одинаковая правка в двух местах
+   независимо друг от друга — это и есть заявка в канон.
+   Браузер сам хранит состояние и сам его переключает; нам остаётся вид. */
+.kt-ai-details {
+  border: 1px solid var(--kt-ai-border);
+  border-radius: var(--kt-ai-radius-xl);
+  background: var(--kt-ai-bg-soft);
+}
+.kt-ai-details > summary {
+  display: flex; align-items: center; gap: var(--kt-ai-space-3);
+  min-height: var(--kt-ai-control-h-lg);
+  padding: 0 var(--kt-ai-space-5);
+  color: var(--kt-ai-fg-muted);
+  font-size: var(--kt-ai-text-xs);
+  font-weight: var(--kt-ai-weight-semibold);
+  cursor: pointer;
+  list-style: none;
+}
+/* Треугольник ОС выглядит чужеродно рядом с волосяными линиями и разный в
+   Safari/Chrome. Гасим его в обеих записях: ::marker — стандарт,
+   ::-webkit-details-marker — Safari, который стандарт ещё не применяет. */
+.kt-ai-details > summary::-webkit-details-marker { display: none; }
+.kt-ai-details > summary::marker { content: ""; }
+.kt-ai-details > summary:hover { color: var(--kt-ai-fg); }
+.kt-ai-details > summary:focus-visible { outline: 2px solid var(--kt-ai-focus-ring); outline-offset: -2px; border-radius: var(--kt-ai-radius-xl); }
+/* Свой шеврон — единственная анимация transform, как требует гейт G3. */
+.kt-ai-details > summary .kt-ai-details-chevron {
+  margin-left: auto; flex-shrink: 0; color: var(--kt-ai-fg-faint);
+  transition: transform var(--kt-ai-dur-base) var(--kt-ai-ease-standard);
+}
+.kt-ai-details[open] > summary .kt-ai-details-chevron { transform: rotate(90deg); }
+.kt-ai-details > :not(summary) {
+  padding: 0 var(--kt-ai-space-5) var(--kt-ai-space-5);
+  color: var(--kt-ai-fg-muted);
+  font-size: var(--kt-ai-text-xs);
+  line-height: var(--kt-ai-leading-normal);
+}
+/* Одиночный <summary> вне .kt-ai-details тоже обязан выглядеть нажимаемым:
+   курсор — единственный признак, по которому видно, что строка раскрывается. */
+.kt-ai-app summary, .kt-ai-shell summary, [data-kt-ai-kit] summary { cursor: pointer; }
+@media (prefers-reduced-motion: reduce) {
+  .kt-ai-details > summary .kt-ai-details-chevron { transition: none; }
+}
+
+/* ---------- Подвал действий боковой панели ----------
+   Панель разбора длинная, а решение принимают внизу: без липкого подвала
+   «Принять» и «Отклонить» уезжают за экран, и специалист скроллит обратно
+   каждый раз. Продукт мониторинга качества дописал это правило СНАРУЖИ, поверх
+   класса ДС (`.kt-ai-drawer .drawer-actions`) — то есть держал чужой внутренний
+   селектор у себя; следующая правка панели сломала бы его молча.
+   Отрицательные поля вытягивают подвал на всю ширину панели, чтобы линия шла
+   от края до края, а не обрывалась по паддингу. */
+.kt-ai-drawer-actions {
+  position: sticky; bottom: 0; z-index: 2;
+  display: flex; align-items: center; gap: var(--kt-ai-space-4);
+  margin: var(--kt-ai-space-6) calc(var(--kt-ai-space-7) * -1) calc(var(--kt-ai-space-7) * -1);
+  padding: var(--kt-ai-space-5) var(--kt-ai-space-7);
+  border-top: 1px solid var(--kt-ai-border);
+  background: var(--kt-ai-bg-elevated);
+  flex-wrap: wrap;
+}
+@media (max-width: 639.98px) {
+  .kt-ai-drawer-actions {
+    margin-left: calc(var(--kt-ai-space-5) * -1); margin-right: calc(var(--kt-ai-space-5) * -1);
+    padding-left: var(--kt-ai-space-5); padding-right: var(--kt-ai-space-5);
+  }
+}
+
+/* Подвал действий внутри раскрытого блока. */
+.kt-ai-disclosure-actions {
+  display: flex; align-items: center; gap: var(--kt-ai-space-4);
+  margin-top: var(--kt-ai-space-6); padding-top: var(--kt-ai-space-5);
+  border-top: 1px solid var(--kt-ai-divider); flex-wrap: wrap;
+}
+
+/* Подложка для боковой панели — НЕ модальная.
+   Drawer открывают, чтобы разобрать объект, не теряя список: гасить экран
+   на 32% чёрного здесь неверно, специалист перестаёт видеть соседние группы.
+   Подложка нужна только чтобы поймать клик мимо панели. */
+.kt-ai-scrim {
+  position: fixed; inset: 0; z-index: var(--kt-ai-z-drawer);
+  background: transparent;
+}
+/* Лёгкое затемнение только под самой панелью — отделяет её от контента,
+   не пряча его. На узком экране панель во всю ширину, подложка не нужна. */
+@media (min-width: 640px) {
+  .kt-ai-scrim { background: color-mix(in srgb, var(--kt-ai-overlay) 28%, transparent); }
+}
diff --git a/design-system/kt-ai-composer.js b/design-system/kt-ai-composer.js
new file mode 100644
index 0000000..d333371
--- /dev/null
+++ b/design-system/kt-ai-composer.js
@@ -0,0 +1,187 @@
+/**
+ * Композер чата: slash-команды, пилюли навыков, вложения.
+ *
+ * Идеи из ai-agent-input (aicss.dev): навык выбирается по «/», становится
+ * объектом, а не текстом, и удаляется целиком. Код оттуда не используется —
+ * там всё построено на contenteditable, а у нас textarea (см. COMPONENTS.md,
+ * «Композер чата»: почему переписывать на contenteditable нельзя).
+ *
+ * Разметка:
+ *   <div class="kt-ai-prompt-bar" data-composer="true"
+ *        data-skills='[{"id":"sverka","label":"Сверка","hint":"Сравнить счёт"}]'>
+ *     <div class="kt-ai-prompt-skills"></div>
+ *     <textarea rows="1" placeholder="Спросите… «/» — навыки"></textarea>
+ *     <button class="kt-ai-prompt-send">…</button>
+ *   </div>
+ *   <script src="kt-ai-composer.js"></script>
+ *
+ * События: composer:submit (detail = {text, skills, files}).
+ */
+(function (global) {
+  "use strict";
+
+  var doc = global.document;
+
+  function экран(s) {
+    return String(s).replace(/[&<>"]/g, function (c) {
+      return { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c];
+    });
+  }
+
+  function mount(bar) {
+    if (!bar || bar.__ktComposer) return;
+    var ta = bar.querySelector("textarea");
+    if (!ta) return;
+
+    var ряд = bar.querySelector(".kt-ai-prompt-skills");
+    if (!ряд) {
+      ряд = doc.createElement("div");
+      ряд.className = "kt-ai-prompt-skills";
+      bar.insertBefore(ряд, bar.firstChild);
+    }
+
+    var навыки = [];
+    try { навыки = JSON.parse(bar.getAttribute("data-skills") || "[]"); } catch (e) { навыки = []; }
+
+    var меню = doc.createElement("div");
+    меню.className = "kt-ai-slash-menu";
+    меню.setAttribute("role", "listbox");
+    меню.hidden = true;
+    bar.appendChild(меню);
+
+    var выбранные = [];   // id выбранных навыков
+    var активный = 0;     // подсвеченный пункт меню
+    var найденные = [];
+
+    function добавить(навык) {
+      if (выбранные.indexOf(навык.id) >= 0) return;
+      выбранные.push(навык.id);
+      var el = doc.createElement("span");
+      el.className = "kt-ai-prompt-skill";
+      el.setAttribute("data-skill", навык.id);
+      el.innerHTML = экран(навык.label) +
+        '<button type="button" aria-label="Убрать навык «' + экран(навык.label) + '»">' +
+        '<svg class="kt-icon" style="width:10px;height:10px" aria-hidden="true"><use href="#x"></use></svg></button>';
+      el.querySelector("button").addEventListener("click", function () { убрать(навык.id); });
+      ряд.appendChild(el);
+    }
+
+    function убрать(id) {
+      выбранные = выбранные.filter(function (x) { return x !== id; });
+      var el = ряд.querySelector('[data-skill="' + id + '"]');
+      if (el) el.remove();
+      ta.focus();
+    }
+
+    /** Запрос после «/» непосредственно перед кареткой. null — меню не нужно. */
+    function запрос() {
+      var до = ta.value.slice(0, ta.selectionStart);
+      var m = до.match(/(?:^|\s)\/([^\s/]*)$/);
+      return m ? m[1] : null;
+    }
+
+    function показать() {
+      var q = запрос();
+      if (q === null) return скрыть();
+      var qq = q.toLowerCase();
+      найденные = навыки.filter(function (s) {
+        return выбранные.indexOf(s.id) < 0 &&
+          (s.label.toLowerCase().indexOf(qq) >= 0 || (s.hint || "").toLowerCase().indexOf(qq) >= 0);
+      });
+      if (!найденные.length) return скрыть();
+      активный = 0;
+      отрисовать();
+      меню.hidden = false;
+      ta.setAttribute("aria-expanded", "true");
+    }
+
+    function отрисовать() {
+      меню.innerHTML = найденные.map(function (s, i) {
+        return '<button type="button" role="option" class="kt-ai-slash-item"' +
+          (i === активный ? ' data-active="true" aria-selected="true"' : ' aria-selected="false"') +
+          ' data-id="' + экран(s.id) + '">' +
+          "<span>" + экран(s.label) + "</span>" +
+          (s.hint ? '<span class="kt-ai-meta">' + экран(s.hint) + "</span>" : "") +
+          "</button>";
+      }).join("");
+      [].forEach.call(меню.querySelectorAll(".kt-ai-slash-item"), function (b) {
+        b.addEventListener("mousedown", function (e) {
+          e.preventDefault();               // не отдаём фокус: каретка нужна на месте
+          выбрать(b.getAttribute("data-id"));
+        });
+      });
+    }
+
+    function скрыть() {
+      меню.hidden = true;
+      ta.setAttribute("aria-expanded", "false");
+    }
+
+    function выбрать(id) {
+      var навык = навыки.filter(function (s) { return s.id === id; })[0];
+      if (!навык) return;
+      // Убираем «/запрос» из текста — навык теперь объект, а не строка.
+      var p = ta.selectionStart;
+      var до = ta.value.slice(0, p).replace(/(?:^|\s)\/[^\s/]*$/, function (m) {
+        return m[0] === "/" ? "" : m[0];
+      });
+      ta.value = до + ta.value.slice(p);
+      ta.setSelectionRange(до.length, до.length);
+      добавить(навык);
+      скрыть();
+      ta.focus();
+    }
+
+    ta.addEventListener("input", показать);
+    ta.addEventListener("click", показать);
+    ta.addEventListener("blur", function () { setTimeout(скрыть, 0); });
+
+    ta.addEventListener("keydown", function (e) {
+      if (!меню.hidden) {
+        if (e.key === "ArrowDown") { e.preventDefault(); активный = (активный + 1) % найденные.length; отрисовать(); return; }
+        if (e.key === "ArrowUp") { e.preventDefault(); активный = (активный - 1 + найденные.length) % найденные.length; отрисовать(); return; }
+        if (e.key === "Enter" || e.key === "Tab") { e.preventDefault(); выбрать(найденные[активный].id); return; }
+        if (e.key === "Escape") { e.preventDefault(); скрыть(); return; }
+      }
+      // Бэкспейс в пустом поле снимает последний навык — он ведёт себя как
+      // объект в строке, хотя физически лежит рядом.
+      if (e.key === "Backspace" && !ta.value && выбранные.length) {
+        e.preventDefault();
+        убрать(выбранные[выбранные.length - 1]);
+        return;
+      }
+      if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); отправить(); }
+    });
+
+    function отправить() {
+      var текст = ta.value.trim();
+      if (!текст && !выбранные.length) return;
+      bar.dispatchEvent(new CustomEvent("composer:submit", {
+        bubbles: true,
+        detail: { text: текст, skills: выбранные.slice() },
+      }));
+      ta.value = "";
+      выбранные.slice().forEach(убрать);
+    }
+
+    var send = bar.querySelector(".kt-ai-prompt-send");
+    if (send) send.addEventListener("click", отправить);
+
+    bar.__ktComposer = {
+      добавитьНавык: добавить,
+      убратьНавык: убрать,
+      выбранные: function () { return выбранные.slice(); },
+      отправить: отправить,
+      меню: меню,
+    };
+  }
+
+  function mountAll(root) {
+    var nodes = (root || doc).querySelectorAll('.kt-ai-prompt-bar[data-composer="true"]');
+    for (var i = 0; i < nodes.length; i++) mount(nodes[i]);
+  }
+
+  global.ktAiComposer = { mount: mount, mountAll: mountAll };
+  if (doc && doc.readyState !== "loading") mountAll();
+  else if (doc) doc.addEventListener("DOMContentLoaded", function () { mountAll(); });
+})(typeof window !== "undefined" ? window : this);
diff --git a/design-system/kt-ai-feedback.js b/design-system/kt-ai-feedback.js
new file mode 100644
index 0000000..91e5af8
--- /dev/null
+++ b/design-system/kt-ai-feedback.js
@@ -0,0 +1,337 @@
+/*
+ * KT AI — режим обратной связи прототипа (drop-in).
+ * Закрывает петлю «показал владельцу → собрал фидбэк → итерировал» в контексте.
+ * Владелец процесса включает режим, кликает по любому элементу, оставляет заметку;
+ * все заметки экспортируются в markdown, который БА берёт в работу.
+ *
+ * Подключение (одна строка, после kt-ai-components.css):
+ *   <script src="kt-ai-feedback.js" defer><\/script>   (escaped close tag — безопасно и при инлайне)
+ *
+ * Самодостаточен: стили инжектятся на токенах ДС (обе темы), без зависимостей.
+ * Канон: docs/PRODUCT_CONTRACT.md, docs/GOAL.md (DoD #6 — замкнутая петля обратной связи).
+ */
+(function () {
+  'use strict';
+  if (window.__ktFeedback) return;
+  window.__ktFeedback = true;
+
+  var KEY = 'kt-ai-feedback:' + location.pathname;
+  var comments = load();
+  var active = false;
+  var visible = true;
+  var seq = comments.reduce(function (m, c) { return Math.max(m, c.n); }, 0);
+
+  // ---------- стили (на semantic-токенах ДС) ----------
+  function injectStyles() {
+    var css = [
+      '.ktfb-ui{font-family:var(--kt-ai-font-sans);box-sizing:border-box}',
+      '.ktfb-ui *{box-sizing:border-box}',
+      '.ktfb-fab{position:fixed;left:20px;bottom:20px;z-index:65;display:inline-flex;align-items:center;gap:var(--kt-ai-space-3);',
+      '  height:var(--kt-ai-control-h-lg);padding:0 var(--kt-ai-space-5);border-radius:var(--kt-ai-radius-full);cursor:pointer;',
+      '  background:var(--kt-ai-bg-elevated);color:var(--kt-ai-fg);border:1px solid var(--kt-ai-border-strong);',
+      '  box-shadow:var(--kt-ai-shadow-md);font-size:var(--kt-ai-text-sm);font-weight:var(--kt-ai-weight-medium)}',
+      '.ktfb-fab[data-on="true"]{background:var(--kt-ai-primary);color:var(--kt-ai-fg-on-fill);border-color:var(--kt-ai-primary)}',
+      '.ktfb-fab .dot{width:8px;height:8px;border-radius:50%;background:var(--kt-ai-primary)}',
+      '.ktfb-fab[data-on="true"] .dot{background:var(--kt-ai-fg-on-fill)}',
+      '.ktfb-fab .cnt{font-family:var(--kt-ai-font-mono);font-size:var(--kt-ai-text-2xs);opacity:.8}',
+      'body.ktfb-pick *{cursor:crosshair!important}',
+      'body.ktfb-pick .ktfb-ui, body.ktfb-pick .ktfb-ui *{cursor:default!important}',
+      '.ktfb-hl{outline:2px solid var(--kt-ai-primary)!important;outline-offset:1px!important;border-radius:var(--kt-ai-radius-sm)}',
+      '.ktfb-layer{position:fixed;inset:0;z-index:64;pointer-events:none}',
+      '.ktfb-pin{position:fixed;z-index:64;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;',
+      '  background:var(--kt-ai-primary);color:var(--kt-ai-fg-on-fill);font-size:var(--kt-ai-text-2xs);',
+      '  font-weight:var(--kt-ai-weight-bold);display:flex;align-items:center;justify-content:center;',
+      '  pointer-events:auto;cursor:pointer;box-shadow:var(--kt-ai-shadow-sm);border:1.5px solid var(--kt-ai-bg-elevated)}',
+      '.ktfb-panel{position:fixed;left:20px;bottom:72px;z-index:65;width:320px;max-height:60vh;display:flex;flex-direction:column;',
+      '  background:var(--kt-ai-bg-elevated);border:1px solid var(--kt-ai-border);border-radius:var(--kt-ai-radius-3xl);',
+      '  box-shadow:var(--kt-ai-shadow-lg);overflow:hidden}',
+      '.ktfb-panel[hidden]{display:none}',
+      '.ktfb-head{display:flex;align-items:center;gap:var(--kt-ai-space-4);padding:var(--kt-ai-space-5) var(--kt-ai-space-6);border-bottom:1px solid var(--kt-ai-divider)}',
+      '.ktfb-head .t{font-size:var(--kt-ai-text-sm);font-weight:var(--kt-ai-weight-semibold);color:var(--kt-ai-fg)}',
+      '.ktfb-head .sp{margin-left:auto}',
+      '.ktfb-list{overflow:auto;padding:var(--kt-ai-space-4);display:flex;flex-direction:column;gap:var(--kt-ai-space-3)}',
+      '.ktfb-item{display:flex;gap:var(--kt-ai-space-4);padding:var(--kt-ai-space-4);border-radius:var(--kt-ai-radius-2xl);background:var(--kt-ai-bg-soft)}',
+      '.ktfb-item .n{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--kt-ai-primary);color:var(--kt-ai-fg-on-fill);',
+      '  font-size:var(--kt-ai-text-2xs);font-weight:var(--kt-ai-weight-bold);display:flex;align-items:center;justify-content:center}',
+      '.ktfb-item .body{min-width:0;flex:1}',
+      '.ktfb-item .tgt{font-size:var(--kt-ai-text-2xs);color:var(--kt-ai-fg-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}',
+      '.ktfb-item .txt{font-size:var(--kt-ai-text-xs);color:var(--kt-ai-fg);margin-top:2px;white-space:pre-wrap;word-break:break-word}',
+      '.ktfb-item .del{flex-shrink:0;background:none;border:none;color:var(--kt-ai-fg-faint);cursor:pointer;font-size:14px;line-height:1;padding:2px}',
+      '.ktfb-item .del:hover{color:var(--kt-ai-danger)}',
+      '.ktfb-empty{padding:var(--kt-ai-space-7);text-align:center;color:var(--kt-ai-fg-muted);font-size:var(--kt-ai-text-xs)}',
+      '.ktfb-foot{display:flex;gap:var(--kt-ai-space-4);padding:var(--kt-ai-space-5);border-top:1px solid var(--kt-ai-divider)}',
+      '.ktfb-foot button{flex:1}',
+      '.ktfb-pop{position:fixed;z-index:66;width:260px;background:var(--kt-ai-bg-elevated);border:1px solid var(--kt-ai-border);',
+      '  border-radius:var(--kt-ai-radius-2xl);box-shadow:var(--kt-ai-shadow-lg);padding:var(--kt-ai-space-5)}',
+      '.ktfb-pop[hidden]{display:none}',
+      '.ktfb-pop .tgt{font-size:var(--kt-ai-text-2xs);color:var(--kt-ai-fg-faint);margin-bottom:var(--kt-ai-space-3);',
+      '  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}',
+      '.ktfb-pop textarea{width:100%;min-height:64px;resize:vertical;font-family:var(--kt-ai-font-sans);font-size:var(--kt-ai-text-sm);',
+      '  color:var(--kt-ai-fg);background:var(--kt-ai-bg);border:1px solid var(--kt-ai-border);border-radius:var(--kt-ai-radius-xl);',
+      '  padding:var(--kt-ai-space-4)}',
+      '.ktfb-pop textarea:focus{outline:none;border-color:var(--kt-ai-primary);box-shadow:var(--kt-ai-focus-shadow)}',
+      '.ktfb-pop .row{display:flex;gap:var(--kt-ai-space-4);margin-top:var(--kt-ai-space-4)}',
+      '.ktfb-pop .row button{flex:1}',
+      // если в прототипе нет компонентов ДС — минимальный фолбэк для наших кнопок
+      '.ktfb-ui .ktfb-btn{height:var(--kt-ai-control-h-md);padding:0 var(--kt-ai-space-5);border-radius:var(--kt-ai-radius-xl);',
+      '  font-size:var(--kt-ai-text-sm);font-family:var(--kt-ai-font-sans);cursor:pointer;border:1px solid var(--kt-ai-border-strong);',
+      '  background:var(--kt-ai-bg-elevated);color:var(--kt-ai-fg)}',
+      '.ktfb-ui .ktfb-btn[data-primary]{background:var(--kt-ai-primary);color:var(--kt-ai-fg-on-fill);border-color:var(--kt-ai-primary);',
+      '  font-weight:var(--kt-ai-weight-semibold)}',
+      '.ktfb-ui .ktfb-btn:disabled{opacity:.4;cursor:default}',
+      '@media print{.ktfb-ui{display:none!important}}'
+    ].join('\n');
+    var s = document.createElement('style');
+    s.id = 'ktfb-styles';
+    s.textContent = css;
+    document.head.appendChild(s);
+  }
+
+  // ---------- хранилище ----------
+  function load() {
+    try { return JSON.parse(localStorage.getItem(KEY)) || []; } catch { return []; }
+  }
+  function save() {
+    try { localStorage.setItem(KEY, JSON.stringify(comments)); } catch {}
+  }
+
+  // ---------- надёжный селектор элемента ----------
+  function selectorFor(el) {
+    if (!el || el === document.body) return 'body';
+    var parts = [];
+    while (el && el.nodeType === 1 && el !== document.body && parts.length < 6) {
+      var tag = el.tagName.toLowerCase();
+      var p = el.parentNode;
+      if (p) {
+        var sib = Array.prototype.filter.call(p.children, function (c) { return c.tagName === el.tagName; });
+        if (sib.length > 1) tag += ':nth-of-type(' + (sib.indexOf(el) + 1) + ')';
+      }
+      parts.unshift(tag);
+      el = p;
+    }
+    return parts.join(' > ');
+  }
+  function labelFor(el) {
+    var t = (el.getAttribute && el.getAttribute('aria-label')) || el.textContent || el.tagName.toLowerCase();
+    t = t.replace(/\s+/g, ' ').trim();
+    return t.length > 60 ? t.slice(0, 60) + '…' : (t || el.tagName.toLowerCase());
+  }
+
+  // ---------- UI ----------
+  var fab, panel, list, layer, pop, popState = null;
+
+  var triggers = [];
+  function build() {
+    fab = el('button', 'ktfb-ui ktfb-fab', { type: 'button', 'aria-label': 'Режим обратной связи' });
+    fab.innerHTML = '<span class="dot"></span><span class="lbl">Отзыв</span> <span class="cnt"></span>';
+    fab.addEventListener('click', toggleMode);
+
+    panel = el('div', 'ktfb-ui ktfb-panel', { hidden: '' });
+    panel.innerHTML =
+      '<div class="ktfb-head"><span class="t">Отзыв по прототипу</span>' +
+      '<span class="sp"></span>' +
+      '<button class="ktfb-btn" data-act="hide" type="button" style="height:auto;padding:4px 10px">Скрыть</button></div>' +
+      '<div class="ktfb-list"></div>' +
+      '<div class="ktfb-foot">' +
+      '<button class="ktfb-btn" data-act="clear" type="button">Очистить</button>' +
+      '<button class="ktfb-btn" data-primary data-act="export" type="button">Экспорт в markdown</button></div>';
+    list = panel.querySelector('.ktfb-list');
+    panel.addEventListener('click', onPanelClick);
+
+    layer = el('div', 'ktfb-ui ktfb-layer');
+
+    pop = el('div', 'ktfb-ui ktfb-pop', { hidden: '' });
+    pop.innerHTML =
+      '<div class="tgt"></div><textarea placeholder="Что не так / что улучшить?"></textarea>' +
+      '<div class="row"><button class="ktfb-btn" data-act="cancel" type="button">Отмена</button>' +
+      '<button class="ktfb-btn" data-primary data-act="add" type="button">Добавить</button></div>';
+    pop.addEventListener('click', onPopClick);
+
+    document.body.appendChild(layer);
+    document.body.appendChild(panel);
+    document.body.appendChild(pop);
+    document.body.appendChild(fab);
+
+    // Внешний триггер (напр. в нижней части сайдбара): прячем плавающий fab, навешиваем toggle.
+    triggers = Array.prototype.slice.call(document.querySelectorAll('[data-kt-feedback-trigger]'));
+    if (triggers.length) {
+      fab.style.display = 'none';
+      triggers.forEach(function (t) {
+        t.classList.add('ktfb-ui');
+        t.addEventListener('click', function (e) { e.preventDefault(); toggleMode(); });
+      });
+    }
+    window.ktFeedback = { toggle: toggleMode, isActive: function () { return active; } };
+
+    window.addEventListener('scroll', positionPins, true);
+    window.addEventListener('resize', positionPins);
+    document.addEventListener('keydown', function (e) { if (e.key === 'Escape') { closePop(); if (active) toggleMode(); } });
+
+    renderAll();
+  }
+
+  function el(tag, cls, attrs) {
+    var n = document.createElement(tag);
+    if (cls) n.className = cls;
+    if (attrs) for (var k in attrs) n.setAttribute(k, attrs[k]);
+    return n;
+  }
+
+  // ---------- режим выбора ----------
+  function toggleMode() {
+    active = !active;
+    fab.setAttribute('data-on', active);
+    var ktfbLbl = active ? 'Готово' : 'Отзыв';
+    fab.querySelector('.lbl').textContent = ktfbLbl;
+    triggers.forEach(function (t) { t.setAttribute('data-on', active); var l = t.querySelector('[data-ktfb-label]'); if (l) l.textContent = ktfbLbl; });
+    document.body.classList.toggle('ktfb-pick', active);
+    if (active) {
+      visible = true; panel.hidden = false; renderPanel();
+      document.addEventListener('mouseover', onHover, true);
+      document.addEventListener('mouseout', onHoverOut, true);
+      document.addEventListener('click', onPick, true);
+    } else {
+      closePop();
+      document.removeEventListener('mouseover', onHover, true);
+      document.removeEventListener('mouseout', onHoverOut, true);
+      document.removeEventListener('click', onPick, true);
+      clearHighlight();
+    }
+  }
+
+  var hl = null;
+  function isOurs(t) { return t && t.closest && t.closest('.ktfb-ui, [data-kt-feedback-trigger]'); }
+  function onHover(e) { if (isOurs(e.target)) return; clearHighlight(); hl = e.target; hl.classList.add('ktfb-hl'); }
+  function onHoverOut() { clearHighlight(); }
+  function clearHighlight() { if (hl) { hl.classList.remove('ktfb-hl'); hl = null; } }
+
+  function onPick(e) {
+    if (isOurs(e.target)) return;
+    e.preventDefault(); e.stopPropagation();
+    var t = e.target;
+    clearHighlight();
+    openPop(t, e.clientX, e.clientY);
+  }
+
+  function openPop(target, x, y) {
+    popState = { selector: selectorFor(target), label: labelFor(target), x: x, y: y };
+    pop.querySelector('.tgt').textContent = '▸ ' + popState.label;
+    var ta = pop.querySelector('textarea'); ta.value = '';
+    pop.hidden = false;
+    var px = Math.min(x, window.innerWidth - 280);
+    var py = Math.min(y + 8, window.innerHeight - 180);
+    pop.style.left = Math.max(8, px) + 'px';
+    pop.style.top = Math.max(8, py) + 'px';
+    ta.focus();
+  }
+  function closePop() { pop.hidden = true; popState = null; }
+
+  function onPopClick(e) {
+    var act = e.target.getAttribute('data-act');
+    if (act === 'cancel') return closePop();
+    if (act === 'add') {
+      var txt = pop.querySelector('textarea').value.trim();
+      if (!txt) return;
+      comments.push({ n: ++seq, selector: popState.selector, label: popState.label, text: txt });
+      save(); closePop(); renderAll();
+    }
+  }
+
+  // ---------- рендер ----------
+  function renderAll() { renderPanel(); renderPins(); updateCount(); }
+  function updateCount() { fab.querySelector('.cnt').textContent = comments.length ? comments.length : ''; }
+
+  function renderPanel() {
+    list.innerHTML = '';
+    if (!comments.length) {
+      var em = el('div', 'ktfb-empty');
+      em.textContent = active
+        ? 'Кликните по любому элементу экрана и опишите, что поправить.'
+        : 'Нажмите «Отзыв», затем кликайте по элементам и оставляйте заметки.';
+      list.appendChild(em);
+      return;
+    }
+    comments.forEach(function (c) {
+      var it = el('div', 'ktfb-item');
+      it.innerHTML =
+        '<div class="n">' + c.n + '</div>' +
+        '<div class="body"><div class="tgt">▸ ' + esc(c.label) + '</div><div class="txt">' + esc(c.text) + '</div></div>' +
+        '<button class="del" data-del="' + c.n + '" type="button" aria-label="Удалить">×</button>';
+      list.appendChild(it);
+    });
+  }
+
+  function renderPins() {
+    layer.innerHTML = '';
+    if (!visible) return;
+    comments.forEach(function (c) {
+      var pin = el('div', 'ktfb-ui ktfb-pin', { 'data-pin': c.n });
+      pin.textContent = c.n;
+      pin.title = c.text;
+      pin.addEventListener('click', function () { panel.hidden = false; });
+      layer.appendChild(pin);
+      c._pin = pin;
+    });
+    positionPins();
+  }
+  function positionPins() {
+    comments.forEach(function (c) {
+      if (!c._pin) return;
+      var t = safeQuery(c.selector);
+      if (!t) { c._pin.style.display = 'none'; return; }
+      var r = t.getBoundingClientRect();
+      c._pin.style.display = '';
+      c._pin.style.left = Math.round(r.left + Math.min(r.width - 6, 10)) + 'px';
+      c._pin.style.top = Math.round(r.top + 10) + 'px';
+    });
+  }
+  function safeQuery(sel) { try { return document.querySelector(sel); } catch { return null; } }
+
+  function onPanelClick(e) {
+    var del = e.target.getAttribute('data-del');
+    var act = e.target.getAttribute('data-act');
+    if (del) {
+      comments = comments.filter(function (c) { return String(c.n) !== del; });
+      save(); renderAll();
+    } else if (act === 'hide') {
+      panel.hidden = true;
+    } else if (act === 'clear') {
+      if (comments.length && confirm('Удалить все ' + comments.length + ' заметок?')) { comments = []; save(); renderAll(); }
+    } else if (act === 'export') {
+      exportMd();
+    }
+  }
+
+  // ---------- экспорт ----------
+  function productName() {
+    try {
+      var cfg = JSON.parse(document.getElementById('kt-app-config').textContent);
+      return (cfg.product && cfg.product.name) || document.title;
+    } catch { return document.title || 'Прототип'; }
+  }
+  function exportMd() {
+    if (!comments.length) return;
+    var lines = ['# Отзыв по прототипу: ' + productName(), '', '_' + comments.length + ' заметок · ' + location.pathname + '_', ''];
+    comments.forEach(function (c) {
+      lines.push(c.n + '. **' + c.label + '**');
+      lines.push('   ' + c.text.replace(/\n/g, '\n   '));
+      lines.push('   `' + c.selector + '`');
+      lines.push('');
+    });
+    var md = lines.join('\n');
+    if (navigator.clipboard) navigator.clipboard.writeText(md).catch(function () {});
+    var blob = new Blob([md], { type: 'text/markdown' });
+    var a = document.createElement('a');
+    a.href = URL.createObjectURL(blob);
+    a.download = 'feedback-' + location.pathname.replace(/\W+/g, '-').replace(/^-|-$/g, '') + '.md';
+    a.click();
+    URL.revokeObjectURL(a.href);
+  }
+
+  function esc(s) { return String(s).replace(/[&<>]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;' }[c]; }); }
+
+  // ---------- init ----------
+  function init() { injectStyles(); build(); }
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
+  else init();
+})();
diff --git a/design-system/kt-ai-fonts.css b/design-system/kt-ai-fonts.css
new file mode 100644
index 0000000..890da35
--- /dev/null
+++ b/design-system/kt-ai-fonts.css
@@ -0,0 +1,51 @@
+/* ============================================================
+ * KT AI Fonts — самохостинг Inter. Подключать ПЕРВЫМ, до токенов.
+ *
+ * Зачем отдельным файлом, а не внутри токенов: `url()` в CSS резолвится
+ * относительно САМОГО CSS-файла, а прототипы ДС инлайнят CSS прямо в HTML —
+ * там относительный путь сломался бы. Поэтому шрифт подключают явно те,
+ * кто строит приложение; самодостаточные прототипы остаются лёгкими
+ * (иначе каждый вырос бы на ~240 КБ base64) и используют системный запасной.
+ *
+ * Обязателен для продакшн-приложения: без него `font-family: Inter` из токенов
+ * молча уходит в системный шрифт, а он на 2–5% уже — плывут ширины колонок
+ * и обрезка текста. То есть «прототип === продакшн» перестаёт выполняться.
+ *
+ * Файл: fonts/InterVariable-subset.woff2 — 178 КБ, ОДИН вариативный на веса
+ * 100–900. Покрытие: латиница, полная кириллица (включая казахские ӘҒҚҢӨҰҮҺІ),
+ * ₸ и типографские знаки. Лицензия SIL OFL — fonts/OFL.txt.
+ *
+ * Подключение:
+ *   <link rel="stylesheet" href="design-system/kt-ai-fonts.css">
+ *   <link rel="stylesheet" href="design-system/kt-ai-tokens.css">
+ *   <link rel="stylesheet" href="design-system/kt-ai-components.css">
+ *
+ * Ускорить первую отрисовку (необязательно, но заметно):
+ *   <link rel="preload" as="font" type="font/woff2" crossorigin
+ *         href="design-system/fonts/InterVariable-subset.woff2">
+ * ============================================================ */
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  /* Вариативный: один файл покрывает весь диапазон весов ДС (400/500/600/700). */
+  font-weight: 100 900;
+  font-display: swap;   /* текст виден сразу системным, затем подменяется — без «мигания пустотой» */
+  src: url("fonts/InterVariable-subset.woff2") format("woff2-variations"),
+       url("fonts/InterVariable-subset.woff2") format("woff2");
+}
+
+/* JetBrains Mono — ТОЛЬКО для клавиш (.kt-ai-kbd) и командных групп.
+   Числа на нём больше не набираются: в JetBrains Mono НЕТ глифа ₸, поэтому
+   в каждой сумме «1 240 000 ₸» тенге подставлялся из другого шрифта, что рвало
+   табличное выравнивание. Числа переведены на Inter + tabular-nums — так уже
+   было у значения KPI, и цифры Inter выровнены по ширине не хуже моноширинных.
+   Отсюда и крошечный сабсет: нужны только цифры, латиница и символы клавиш. */
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 100 800;
+  font-display: swap;
+  src: url("fonts/JetBrainsMono-subset.woff2") format("woff2-variations"),
+       url("fonts/JetBrainsMono-subset.woff2") format("woff2");
+}
diff --git a/design-system/kt-ai-orb.js b/design-system/kt-ai-orb.js
new file mode 100644
index 0000000..4205a8e
--- /dev/null
+++ b/design-system/kt-ai-orb.js
@@ -0,0 +1,138 @@
+/**
+ * Орб агента — монохромное точечное облако на canvas.
+ *
+ * ЗАЧЕМ СВОЙ, А НЕ ГОТОВЫЙ. Идея взята у thinking-orbs (MIT, Jakub Antalik &
+ * Alex Brinza), но сам пакет не подошёл по устройству: его сборка импортирует
+ * React на верхнем уровне, а HTML app-shell работает без React. Поставить его
+ * только в кит значило бы развести рантаймы — один и тот же контракт показывал
+ * бы разный индикатор, а это ровно тот разрыв паритета, который запрещает
+ * гейт G7. Плюс у ДС политика «внешних зависимостей нет»: вендоринг
+ * минифицированного бандла положил бы в систему код, который никто в команде
+ * не сможет поддерживать.
+ *
+ * ЦВЕТ. Ни одного значения цвета внутри: точки рисуются currentColor элемента.
+ * Значит орб темизуется теми же токенами, что и всё остальное, и работает в
+ * обеих темах без единой строки про тему.
+ *
+ * Подключение:
+ *   <canvas class="kt-ai-orb" data-state="thinking" width="16" height="16"></canvas>
+ *   ktAiOrb.mountAll();            // или ktAiOrb.mount(canvas)
+ *
+ * Состояния: idle (медленное дыхание), thinking (вращение), listening (пульс).
+ */
+(function (global) {
+  "use strict";
+
+  /* Состояния различаются ДВИЖЕНИЕМ, а не формой. Раньше здесь был параметр
+     spread, сжимавший сферу по вертикали (0.55 у idle) — облако читалось не как
+     шар, а как лужа, и на витрине это было видно сразу. Силуэт должен
+     оставаться круглым во всех состояниях, меняется только характер движения. */
+  var СОСТОЯНИЯ = {
+    idle: { speed: 0.14, pulse: 0.10 },       // медленно дышит
+    thinking: { speed: 0.85, pulse: 0.03 },   // уверенно вращается
+    listening: { speed: 0.30, pulse: 0.30 },  // заметно пульсирует
+  };
+
+  /* Два размера — два отдельных рисунка, а не масштаб одного.
+     На 22px 44 точки радиусом меньше пикселя сливались в серую кашу: точек
+     должно быть меньше, а каждая — крупнее и чётче. */
+  var РАЗМЕРЫ = [
+    { до: 32, точек: 26, точка: 1.15, радиус: 0.80 },
+    { до: 1e9, точек: 92, точка: 1.70, радиус: 0.84 },
+  ];
+
+  function пресет(size) {
+    for (var i = 0; i < РАЗМЕРЫ.length; i++) if (size <= РАЗМЕРЫ[i].до) return РАЗМЕРЫ[i];
+    return РАЗМЕРЫ[РАЗМЕРЫ.length - 1];
+  }
+
+  /** Точки, равномерно разложенные по сфере (решётка Фибоначчи).
+   *  Случайные точки дают комки — на 40 точках это видно сразу. */
+  function точкиСферы(n) {
+    var pts = [], φ = Math.PI * (3 - Math.sqrt(5));
+    for (var i = 0; i < n; i++) {
+      var y = 1 - (i / (n - 1)) * 2;
+      var r = Math.sqrt(Math.max(0, 1 - y * y));
+      var θ = φ * i;
+      pts.push([Math.cos(θ) * r, y, Math.sin(θ) * r]);
+    }
+    return pts;
+  }
+
+  function mount(canvas) {
+    if (!canvas || canvas.__ktOrb) return;
+    var ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    var reduce = global.matchMedia &&
+      global.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+    var size = canvas.clientWidth || parseInt(canvas.getAttribute("width"), 10) || 16;
+    var ps = пресет(size);
+    var pts = точкиСферы(ps.точек);
+    var t0 = null, raf = 0;
+
+    function resize() {
+      var dpr = global.devicePixelRatio || 1;
+      size = canvas.clientWidth || size;
+      canvas.width = Math.round(size * dpr);
+      canvas.height = Math.round(size * dpr);
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    }
+
+    function кадр(ts) {
+      if (t0 === null) t0 = ts;
+      var t = (ts - t0) / 1000;
+      var st = СОСТОЯНИЯ[canvas.getAttribute("data-state")] || СОСТОЯНИЯ.idle;
+
+      // Цвет — только currentColor: ни одного литерала в файле.
+      var ink = global.getComputedStyle(canvas).color;
+      var m = ink.match(/\d+/g) || [26, 26, 26];
+
+      ctx.clearRect(0, 0, size, size);
+      var c = size / 2;
+      var R = c * ps.радиус * (1 + Math.sin(t * 1.6) * st.pulse * 0.14);
+      var a = t * st.speed, ca = Math.cos(a), sa = Math.sin(a);
+      var tilt = 0.42, ct = Math.cos(tilt), stl = Math.sin(tilt);
+      var dot = ps.точка;
+
+      for (var i = 0; i < pts.length; i++) {
+        var x = pts[i][0], y = pts[i][1], z = pts[i][2];
+        var x1 = x * ca - z * sa, z1 = x * sa + z * ca;      // поворот вокруг Y
+        var y1 = y * ct - z1 * stl, z2 = y * stl + z1 * ct;  // наклон оси
+        // Дальние точки тусклее и мельче — это и создаёт объём.
+        var depth = (z2 + 1) / 2;
+        ctx.globalAlpha = 0.18 + depth * 0.62;
+        ctx.fillStyle = "rgb(" + m[0] + "," + m[1] + "," + m[2] + ")";
+        ctx.beginPath();
+        ctx.arc(c + x1 * R, c + y1 * R, Math.max(0.6, dot * (0.62 + depth * 0.52)), 0, 6.2832);
+        ctx.fill();
+      }
+      ctx.globalAlpha = 1;
+      if (!reduce) raf = global.requestAnimationFrame(кадр);
+    }
+
+    resize();
+    // ПЕРВЫЙ КАДР — СИНХРОННО, до всякого rAF. Браузер не вызывает
+    // requestAnimationFrame в фоновой вкладке, и без этой строки орб в неактивном
+    // окне не рисовался вообще: не «замирал», а оставался пустым прямоугольником.
+    // То же самое даёт корректное поведение при prefers-reduced-motion — статичный
+    // кадр вместо пустоты.
+    кадр(0);   // следующий кадр ставит себе он сам — второй раз планировать нельзя
+
+    canvas.__ktOrb = {
+      stop: function () { global.cancelAnimationFrame(raf); canvas.__ktOrb = null; },
+      resize: resize,
+      frame: кадр,   // чтобы поведение можно было проверить без rAF
+    };
+  }
+
+  function mountAll(root) {
+    var nodes = (root || global.document).querySelectorAll("canvas.kt-ai-orb");
+    for (var i = 0; i < nodes.length; i++) mount(nodes[i]);
+  }
+
+  global.ktAiOrb = { mount: mount, mountAll: mountAll };
+  if (global.document && global.document.readyState !== "loading") mountAll();
+  else if (global.document) global.document.addEventListener("DOMContentLoaded", function () { mountAll(); });
+})(typeof window !== "undefined" ? window : this);
diff --git a/design-system/kt-ai-page.css b/design-system/kt-ai-page.css
new file mode 100644
index 0000000..8628da8
--- /dev/null
+++ b/design-system/kt-ai-page.css
@@ -0,0 +1,144 @@
+/* ============================================================
+ * KT AI Page — примитивы СТРАНИЦЫ (лендинг, вход, ошибка, документация).
+ * Требует kt-ai-tokens.css. Подключать ДОПОЛНИТЕЛЬНО к kt-ai-components.css.
+ *
+ * Зачем отдельный файл: kt-ai-components.css покрывает продуктовые экраны
+ * внутри приложения (таблицы, формы, drawer). Всё, что «до входа» — лендинг,
+ * страница входа, 404, публичная документация — приходилось верстать руками,
+ * и каждый делал это по-своему. Здесь только каркас: ритм, контейнер, сетка.
+ * Ничего брендового — цвет и вордмарк живут в слое продукта.
+ *
+ * app-shell этот файл НЕ подключает: внутри приложения он не нужен.
+ * ============================================================ */
+
+@layer kt-page {
+
+/* ---------- База страницы ----------
+   Подключение этого файла означает «страницу целиком строю на ДС», поэтому
+   здесь можно задать основу. kt-ai-components.css этого НЕ делает намеренно:
+   его вендорят в чужое приложение, и перекрашивать чужой body нельзя.
+   Без этой базы страница уезжала в браузерный serif — базовый шрифт задавался
+   только в HTML app-shell (тот же перекос, что был с box-sizing). */
+html { scrollbar-gutter: stable; }  /* место под скроллбар зарезервировано всегда: контент не прыгает вбок, когда модал прячет скроллбар */
+body {
+  margin: 0;
+  background: var(--kt-ai-bg);
+  color: var(--kt-ai-fg);
+  font-family: var(--kt-ai-font-sans);
+  font-size: var(--kt-ai-text-md);
+  line-height: var(--kt-ai-leading-normal);
+  -webkit-font-smoothing: antialiased;
+}
+::selection { background: var(--kt-ai-selection); }
+
+/* ---------- Контейнер и ритм ---------- */
+.kt-ai-wrap { width: min(1080px, 92vw); margin-inline: auto; }
+.kt-ai-wrap[data-width="narrow"] { width: min(720px, 92vw); }
+.kt-ai-wrap[data-width="wide"]   { width: min(1200px, 94vw); }
+
+/* Вертикальный ритм секций: одна переменная вместо margin вручную у каждой. */
+.kt-ai-section { padding-block: clamp(48px, 8vh, 88px); }
+.kt-ai-section[data-divider="true"] { border-top: 1px solid var(--kt-ai-divider); }
+.kt-ai-section-head { max-width: 640px; }
+.kt-ai-section-head h2 {
+  margin: 0; font-size: var(--kt-ai-text-2xl); font-weight: var(--kt-ai-weight-semibold);
+  letter-spacing: -0.02em; color: var(--kt-ai-fg);
+}
+.kt-ai-section-head p {
+  margin: var(--kt-ai-space-5) 0 0; color: var(--kt-ai-fg-muted);
+  font-size: var(--kt-ai-text-lg); line-height: var(--kt-ai-leading-normal);
+}
+.kt-ai-section-head .kt-ai-tagline {
+  display: block; margin-top: var(--kt-ai-space-3);
+  color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-md);
+}
+
+/* ---------- Шапка страницы (тонкая, контент важнее хрома) ---------- */
+.kt-ai-pagehead {
+  position: sticky; top: 0; z-index: var(--kt-ai-z-sticky);
+  border-bottom: 1px solid var(--kt-ai-border);
+  background: var(--kt-ai-bg-glass);
+  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
+}
+.kt-ai-pagehead-in { display: flex; align-items: center; gap: var(--kt-ai-space-6); height: 56px; }
+.kt-ai-pagehead-in > .kt-ai-spacer { margin-left: auto; }
+@media (prefers-reduced-transparency: reduce) {
+  .kt-ai-pagehead { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--kt-ai-bg-elevated); }
+}
+
+/* ---------- Hero ---------- */
+.kt-ai-hero { padding-block: clamp(56px, 11vh, 104px) clamp(40px, 7vh, 72px); }
+.kt-ai-hero[data-align="center"] { text-align: center; }
+.kt-ai-hero h1 {
+  margin: 0; font-size: clamp(32px, 5.5vw, 52px); font-weight: var(--kt-ai-weight-semibold);
+  letter-spacing: -0.035em; line-height: 1.05; color: var(--kt-ai-fg);
+}
+.kt-ai-hero-sub {
+  margin: var(--kt-ai-space-6) 0 0; max-width: 620px;
+  color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-lg);
+  line-height: var(--kt-ai-leading-normal);
+}
+.kt-ai-hero[data-align="center"] .kt-ai-hero-sub { margin-inline: auto; }
+.kt-ai-hero-actions { display: flex; gap: var(--kt-ai-space-4); margin-top: var(--kt-ai-space-8); flex-wrap: wrap; }
+.kt-ai-hero[data-align="center"] .kt-ai-hero-actions { justify-content: center; }
+
+/* ---------- Сетка возможностей (bento) ----------
+   Плитки группируются границей, а не тенью — как карточки в приложении.
+   data-span управляет шириной: следи, чтобы сумма давала целые ряды,
+   иначе в сетке появится дыра (это «гигантская пустота» из красных флагов). */
+.kt-ai-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--kt-ai-space-6); }
+.kt-ai-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
+.kt-ai-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
+.kt-ai-tile {
+  border: 1px solid var(--kt-ai-card-border); border-radius: var(--kt-ai-radius-3xl);
+  background: var(--kt-ai-card-bg); padding: var(--kt-ai-space-8);
+  transition: border-color var(--kt-ai-dur-base) var(--kt-ai-ease-standard);
+}
+.kt-ai-tile:hover { border-color: var(--kt-ai-card-border-hover); }
+.kt-ai-tile[data-span="2"]    { grid-column: span 2; }
+.kt-ai-tile[data-span="full"] { grid-column: 1 / -1; }
+.kt-ai-tile h3 {
+  margin: 0; font-size: var(--kt-ai-text-lg); font-weight: var(--kt-ai-weight-semibold);
+  letter-spacing: -0.01em; color: var(--kt-ai-fg);
+}
+.kt-ai-tile p {
+  margin: var(--kt-ai-space-4) 0 0; color: var(--kt-ai-fg-muted);
+  font-size: var(--kt-ai-text-md); line-height: var(--kt-ai-leading-normal);
+}
+.kt-ai-tile-icon { display: inline-flex; margin-bottom: var(--kt-ai-space-5); color: var(--kt-ai-fg-muted); }
+.kt-ai-tile-icon svg { width: 18px; height: 18px; }
+
+/* ---------- Призыв к действию ---------- */
+.kt-ai-cta { text-align: center; padding-block: clamp(64px, 11vh, 108px); }
+.kt-ai-cta h2 {
+  margin: 0; font-size: var(--kt-ai-text-2xl); font-weight: var(--kt-ai-weight-semibold);
+  letter-spacing: -0.02em; color: var(--kt-ai-fg);
+}
+.kt-ai-cta p { margin: var(--kt-ai-space-4) 0 var(--kt-ai-space-8); color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-lg); }
+
+/* ---------- Подвал ---------- */
+.kt-ai-pagefoot {
+  border-top: 1px solid var(--kt-ai-divider); padding-block: var(--kt-ai-space-8);
+  display: flex; align-items: center; gap: var(--kt-ai-space-6);
+  color: var(--kt-ai-fg-faint); font-size: var(--kt-ai-text-sm); flex-wrap: wrap;
+}
+.kt-ai-pagefoot > .kt-ai-spacer { margin-left: auto; }
+
+/* ---------- Центрированная карточка (вход, 404) ---------- */
+.kt-ai-centered {
+  min-height: 100dvh; display: grid; place-items: center; padding: var(--kt-ai-space-8);
+}
+.kt-ai-centered > * { width: min(400px, 100%); }
+
+/* ---------- Адаптив ---------- */
+@media (max-width: 900px) {
+  .kt-ai-grid, .kt-ai-grid[data-cols="4"] { grid-template-columns: repeat(2, 1fr); }
+  .kt-ai-tile[data-span="2"] { grid-column: span 2; }
+}
+@media (max-width: 620px) {
+  .kt-ai-grid, .kt-ai-grid[data-cols="2"], .kt-ai-grid[data-cols="4"] { grid-template-columns: 1fr; }
+  .kt-ai-tile[data-span="2"], .kt-ai-tile[data-span="full"] { grid-column: span 1; }
+  .kt-ai-pagehead-in { height: 52px; gap: var(--kt-ai-space-4); }
+}
+
+}
diff --git a/design-system/kt-ai-print.css b/design-system/kt-ai-print.css
new file mode 100644
index 0000000..01a8132
--- /dev/null
+++ b/design-system/kt-ai-print.css
@@ -0,0 +1,88 @@
+/* AUTOGENERATED из tokens.json v5.4.0 – НЕ ПРАВИТЬ РУКАМИ.
+ * Пересборка: python3 scripts/build_tokens.py
+ * Канон: 00_Система/08_Дизайн-система/docs/DESIGN.md */
+
+
+@media print {
+  :root, [data-theme] {
+    color-scheme: light;
+    --kt-ai-bg: #fcfcfb;
+    --kt-ai-bg-soft: #f7f7f5;
+    --kt-ai-bg-elevated: #ffffff;
+    --kt-ai-bg-sunken: #f0f0ed;
+    --kt-ai-bg-hover: #0000000a;
+    --kt-ai-bg-active: #00000014;
+    --kt-ai-bg-glass: color-mix(in srgb, #fcfcfb 85%, transparent);
+    --kt-ai-inset-highlight: #ffffff1f;
+    --kt-ai-ai-accent: #7c4fe0;
+    --kt-ai-ai-gradient: linear-gradient(135deg, #0096d7, #7c4fe0 92%);
+    --kt-ai-ai-orb: radial-gradient(circle at 32% 30%, #b69cf0, #0077c8 75%);
+    --kt-ai-orb-bg: radial-gradient(circle at 42% 35%, #1c2940 0%, #0a0c12 72%);
+    --kt-ai-fg-on-ai: #ffffff;
+    --kt-ai-card-bg: #ffffff;
+    --kt-ai-card-bg-glow: #ffffff;
+    --kt-ai-card-border: #00000014;
+    --kt-ai-card-border-hover: #00000029;
+    --kt-ai-card-shadow: 0 1px 2px #0000000d;
+    --kt-ai-card-shadow-hover: 0 4px 14px #00000014;
+    --kt-ai-selection: #1a1a1a16;
+    --kt-ai-fg: #1a1a1a;
+    --kt-ai-fg-muted: #58585c;
+    --kt-ai-fg-faint: #707073;
+    --kt-ai-fg-on-fill: #ffffff;
+    --kt-ai-border: #00000014;
+    --kt-ai-border-strong: #00000029;
+    --kt-ai-divider: #0000000f;
+    --kt-ai-primary: #1a1a1a;
+    --kt-ai-primary-hover: #343437;
+    --kt-ai-primary-subtle: #0000000a;
+    --kt-ai-brand-blue: #0096d7;
+    --kt-ai-link: #0077c8;
+    --kt-ai-focus-ring: #1a1a1a99;
+    --kt-ai-focus-shadow: 0 0 0 3px #1a1a1a1f;
+    --kt-ai-danger: #dc2626;
+    --kt-ai-danger-hover: #b91c1c;
+    --kt-ai-overlay: #00000052;
+    --kt-ai-chip-default-bg: #0000000f;
+    --kt-ai-chip-default-fg: #2d2d2f;
+    --kt-ai-chip-gray-bg: #6b72801a;
+    --kt-ai-chip-gray-fg: #3f3f42;
+    --kt-ai-chip-orange-bg: #f9731624;
+    --kt-ai-chip-orange-fg: #8a3d06;
+    --kt-ai-chip-green-bg: #16a34a20;
+    --kt-ai-chip-green-fg: #166534;
+    --kt-ai-chip-blue-bg: #0284c724;
+    --kt-ai-chip-blue-fg: #075985;
+    --kt-ai-chip-purple-bg: #7c3aed20;
+    --kt-ai-chip-purple-fg: #5b21b6;
+    --kt-ai-chip-red-bg: #dc262620;
+    --kt-ai-chip-red-fg: #991b1b;
+    --kt-ai-status-ok-bg: #16a34a20;
+    --kt-ai-status-ok-fg: #166534;
+    --kt-ai-status-warn-bg: #f9731624;
+    --kt-ai-status-warn-fg: #8a3d06;
+    --kt-ai-status-risk-bg: #dc262620;
+    --kt-ai-status-risk-fg: #991b1b;
+    --kt-ai-status-info-bg: #6b72801a;
+    --kt-ai-status-info-fg: #3f3f42;
+    --kt-ai-chart-blue: #1683f3;
+    --kt-ai-chart-green: #34a853;
+    --kt-ai-chart-orange: #ff6a00;
+    --kt-ai-chart-salmon: #d2785f;
+    --kt-ai-chart-pink: #ea2f6b;
+    --kt-ai-chart-red: #ef4444;
+    --kt-ai-chart-bar-fill: #e4e4e0;
+    --kt-ai-shadow-sm: 0 1px 2px #0000000d;
+    --kt-ai-shadow-md: 0 4px 14px #00000014;
+    --kt-ai-shadow-lg: 0 2px 6px #00000012, 0 12px 32px #0000001f;
+    --kt-ai-shadow-xl: 0 3px 8px #00000014, 0 24px 64px #00000026;
+    --kt-ai-command-shadow: none;
+  }
+  @page { size: A4; margin: 18mm 16mm; }
+  body { background: #ffffff !important; }
+  .kt-ai-sidebar, .kt-ai-toast-stack, .kt-ai-table-toolbar, .kt-ai-drawer,
+  nav, header[role="banner"], button, [data-no-print] { display: none !important; }
+  .kt-ai-shell { display: block; }
+  .kt-ai-card, .kt-ai-table-wrap { box-shadow: none !important; break-inside: avoid; }
+  a { color: inherit; text-decoration: none; }
+}
diff --git a/design-system/kt-ai-tokens.css b/design-system/kt-ai-tokens.css
new file mode 100644
index 0000000..9c4c0c6
--- /dev/null
+++ b/design-system/kt-ai-tokens.css
@@ -0,0 +1,395 @@
+/* AUTOGENERATED из tokens.json v5.4.0 – НЕ ПРАВИТЬ РУКАМИ.
+ * Пересборка: python3 scripts/build_tokens.py
+ * Канон: 00_Система/08_Дизайн-система/docs/DESIGN.md */
+
+
+@layer kt-tokens {
+
+/* TIER 1. PRIMITIVES – в продуктовом CSS не использовать */
+:root {
+  --kt-blue-300: #84c5f0;
+  --kt-blue-400: #4b9ce2;
+  --kt-blue-500: #0096d7;
+  --kt-blue-600: #0077c8;
+  --kt-blue-700: #075985;
+  --kt-ink-950: #101011;
+  --kt-ink-900: #1a1a1b;
+  --kt-ink-850: #222223;
+  --kt-ink-800: #2b2b2d;
+  --kt-gray-950: #0a0a0b;
+  --kt-gray-900: #161617;
+  --kt-gray-850: #1c1c1e;
+  --kt-gray-800: #232325;
+  --kt-gray-750: #2a2a2c;
+  --kt-gray-700: #343437;
+  --kt-gray-25: #fcfcfb;
+  --kt-gray-50: #f7f7f5;
+  --kt-gray-100: #f0f0ed;
+  --kt-gray-200: #e4e4e0;
+  --kt-gray-300: #d4d4d0;
+  --kt-paper: #fcfcfb;
+  --kt-snow: #ffffff;
+  --kt-near-black: #1a1a1a;
+  --kt-near-white: #fafafa;
+  --kt-ink-700: #3f3f42;
+  --kt-ink-600: #58585c;
+  --kt-ink-400: #707073;
+  --kt-white-a04: #ffffff0a;
+  --kt-white-a06: #ffffff0e;
+  --kt-white-a09: #ffffff18;
+  --kt-white-a11: #ffffff1c;
+  --kt-white-a18: #ffffff2d;
+  --kt-white-a92: #ffffffeb;
+  --kt-black-a04: #0000000a;
+  --kt-black-a06: #0000000f;
+  --kt-black-a08: #00000014;
+  --kt-black-a16: #00000029;
+  --kt-black-a32: #00000052;
+  --kt-black-a55: #0000008c;
+  --kt-green-300: #7fc794;
+  --kt-green-a18: #3f9c5e2e;
+  --kt-orange-300: #f5a35f;
+  --kt-orange-a18: #e87b232e;
+  --kt-red-300: #f0928a;
+  --kt-red-a20: #dc5b5234;
+  --kt-blue-a18: #3f93c52e;
+  --kt-purple-300: #bb9ae0;
+  --kt-purple-a18: #8a5fb02e;
+  --kt-grayc-a18: #8a8a8d2e;
+  --kt-green-700: #166534;
+  --kt-green-a13: #16a34a20;
+  --kt-orange-700: #8a3d06;
+  --kt-orange-a14: #f9731624;
+  --kt-red-700: #991b1b;
+  --kt-red-a13: #dc262620;
+  --kt-blue-a14: #0284c724;
+  --kt-purple-700: #5b21b6;
+  --kt-purple-a13: #7c3aed20;
+  --kt-grayc-a10: #6b72801a;
+  --kt-chart-blue: #1683f3;
+  --kt-chart-green: #34a853;
+  --kt-chart-orange: #ff6a00;
+  --kt-chart-salmon: #d2785f;
+  --kt-chart-pink: #ea2f6b;
+  --kt-chart-red: #ef4444;
+  --kt-ai-space-0: 0;
+  --kt-ai-space-1: 2px;
+  --kt-ai-space-2: 4px;
+  --kt-ai-space-3: 6px;
+  --kt-ai-space-4: 8px;
+  --kt-ai-space-5: 12px;
+  --kt-ai-space-6: 16px;
+  --kt-ai-space-7: 20px;
+  --kt-ai-space-8: 24px;
+  --kt-ai-space-9: 32px;
+  --kt-ai-space-10: 40px;
+  --kt-ai-space-11: 48px;
+  --kt-ai-space-12: 64px;
+  --kt-ai-radius-xs: 2px;
+  --kt-ai-radius-sm: 3px;
+  --kt-ai-radius-md: 4px;
+  --kt-ai-radius-tag: 5px;
+  --kt-ai-radius-lg: 6px;
+  --kt-ai-radius-xl: 8px;
+  --kt-ai-radius-2xl: 10px;
+  --kt-ai-radius-3xl: 12px;
+  --kt-ai-radius-full: 9999px;
+  --kt-ai-text-2xs: 11px;
+  --kt-ai-text-xs: 12px;
+  --kt-ai-text-sm: 13px;
+  --kt-ai-text-md: 14px;
+  --kt-ai-text-lg: 15px;
+  --kt-ai-text-xl: 18px;
+  --kt-ai-text-2xl: 24px;
+  --kt-ai-text-3xl: 30px;
+  --kt-ai-leading-tight: 1.25;
+  --kt-ai-leading-normal: 1.5;
+  --kt-ai-weight-regular: 400;
+  --kt-ai-weight-medium: 500;
+  --kt-ai-weight-semibold: 600;
+  --kt-ai-weight-bold: 700;
+  --kt-ai-dur-fast: 100ms;
+  --kt-ai-dur-base: 160ms;
+  --kt-ai-dur-slow: 240ms;
+  --kt-ai-dur-slower: 400ms;
+  --kt-ai-ease-standard: cubic-bezier(.2, 0, 0, 1);
+  --kt-ai-ease-enter: cubic-bezier(0, 0, .2, 1);
+  --kt-ai-ease-exit: cubic-bezier(.4, 0, 1, 1);
+  --kt-ai-z-sticky: 20;
+  --kt-ai-z-dropdown: 30;
+  --kt-ai-z-drawer: 40;
+  --kt-ai-z-modal: 50;
+  --kt-ai-z-toast: 60;
+  --kt-ai-z-tooltip: 70;
+  --kt-ai-control-h-sm: 28px;
+  --kt-ai-control-h-md: 32px;
+  --kt-ai-control-h-lg: 40px;
+  --kt-ai-control-h-touch: 44px;
+  --kt-ai-bp-sm: 640px;
+  --kt-ai-bp-md: 832px;
+  --kt-ai-bp-lg: 1024px;
+  --kt-ai-bp-xl: 1280px;
+  --kt-ai-sidebar-width: 232px;
+  --kt-ai-sidebar-collapsed-width: 52px;
+  --kt-ai-content-max: 1040px;
+  --kt-ai-content-wide: 1200px;
+  --kt-ai-content-table: 1180px;
+  --kt-ai-nav-row: 30px;
+  --kt-ai-table-row: 48px;
+  --kt-ai-table-row-compact: 38px;
+  --kt-ai-table-row-relaxed: 56px;
+  --kt-ai-chart-height: 200px;
+  --kt-ai-stack-tight: 12px;
+  --kt-ai-stack-block: 16px;
+  --kt-ai-stack-group: 24px;
+  --kt-ai-stack-region: 32px;
+  --kt-ai-pad-card: 20px;
+  --kt-ai-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  --kt-ai-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
+}
+
+/* TIER 2. SEMANTIC. Дефолт – light (v5 «Mono», light-first); dark – полноправный паритет */
+:root,
+[data-theme="kt-ai-terminal-light"],
+[data-theme="light"] {
+  color-scheme: light;
+  --kt-ai-bg: var(--kt-paper);
+  --kt-ai-bg-soft: var(--kt-gray-50);
+  --kt-ai-bg-elevated: var(--kt-snow);
+  --kt-ai-bg-sunken: var(--kt-gray-100);
+  --kt-ai-bg-hover: var(--kt-black-a04);
+  --kt-ai-bg-active: var(--kt-black-a08);
+  --kt-ai-bg-glass: color-mix(in srgb, #fcfcfb 85%, transparent);
+  --kt-ai-inset-highlight: #ffffff1f;
+  --kt-ai-ai-accent: #7c4fe0;
+  --kt-ai-ai-gradient: linear-gradient(135deg, #0096d7, #7c4fe0 92%);
+  --kt-ai-ai-orb: radial-gradient(circle at 32% 30%, #b69cf0, #0077c8 75%);
+  --kt-ai-orb-bg: radial-gradient(circle at 42% 35%, #1c2940 0%, #0a0c12 72%);
+  --kt-ai-fg-on-ai: #ffffff;
+  --kt-ai-card-bg: var(--kt-snow);
+  --kt-ai-card-bg-glow: var(--kt-snow);
+  --kt-ai-card-border: var(--kt-black-a08);
+  --kt-ai-card-border-hover: var(--kt-black-a16);
+  --kt-ai-card-shadow: 0 1px 2px #0000000d;
+  --kt-ai-card-shadow-hover: 0 4px 14px #00000014;
+  --kt-ai-selection: #1a1a1a16;
+  --kt-ai-fg: var(--kt-near-black);
+  --kt-ai-fg-muted: var(--kt-ink-600);
+  --kt-ai-fg-faint: var(--kt-ink-400);
+  --kt-ai-fg-on-fill: #ffffff;
+  --kt-ai-border: var(--kt-black-a08);
+  --kt-ai-border-strong: var(--kt-black-a16);
+  --kt-ai-divider: var(--kt-black-a06);
+  --kt-ai-primary: var(--kt-near-black);
+  --kt-ai-primary-hover: #343437;
+  --kt-ai-primary-subtle: var(--kt-black-a04);
+  --kt-ai-brand-blue: var(--kt-blue-500);
+  --kt-ai-link: var(--kt-blue-600);
+  --kt-ai-focus-ring: #1a1a1a99;
+  --kt-ai-focus-shadow: 0 0 0 3px #1a1a1a1f;
+  --kt-ai-danger: #dc2626;
+  --kt-ai-danger-hover: #b91c1c;
+  --kt-ai-overlay: var(--kt-black-a32);
+  --kt-ai-chip-default-bg: var(--kt-black-a06);
+  --kt-ai-chip-default-fg: #2d2d2f;
+  --kt-ai-chip-gray-bg: var(--kt-grayc-a10);
+  --kt-ai-chip-gray-fg: var(--kt-ink-700);
+  --kt-ai-chip-orange-bg: var(--kt-orange-a14);
+  --kt-ai-chip-orange-fg: var(--kt-orange-700);
+  --kt-ai-chip-green-bg: var(--kt-green-a13);
+  --kt-ai-chip-green-fg: var(--kt-green-700);
+  --kt-ai-chip-blue-bg: var(--kt-blue-a14);
+  --kt-ai-chip-blue-fg: var(--kt-blue-700);
+  --kt-ai-chip-purple-bg: var(--kt-purple-a13);
+  --kt-ai-chip-purple-fg: var(--kt-purple-700);
+  --kt-ai-chip-red-bg: var(--kt-red-a13);
+  --kt-ai-chip-red-fg: var(--kt-red-700);
+  --kt-ai-status-ok-bg: var(--kt-green-a13);
+  --kt-ai-status-ok-fg: var(--kt-green-700);
+  --kt-ai-status-warn-bg: var(--kt-orange-a14);
+  --kt-ai-status-warn-fg: var(--kt-orange-700);
+  --kt-ai-status-risk-bg: var(--kt-red-a13);
+  --kt-ai-status-risk-fg: var(--kt-red-700);
+  --kt-ai-status-info-bg: var(--kt-grayc-a10);
+  --kt-ai-status-info-fg: var(--kt-ink-700);
+  --kt-ai-chart-blue: var(--kt-chart-blue);
+  --kt-ai-chart-green: var(--kt-chart-green);
+  --kt-ai-chart-orange: var(--kt-chart-orange);
+  --kt-ai-chart-salmon: var(--kt-chart-salmon);
+  --kt-ai-chart-pink: var(--kt-chart-pink);
+  --kt-ai-chart-red: var(--kt-chart-red);
+  --kt-ai-chart-bar-fill: #e4e4e0;
+  --kt-ai-shadow-sm: 0 1px 2px #0000000d;
+  --kt-ai-shadow-md: 0 4px 14px #00000014;
+  --kt-ai-shadow-lg: 0 2px 6px #00000012, 0 12px 32px #0000001f;
+  --kt-ai-shadow-xl: 0 3px 8px #00000014, 0 24px 64px #00000026;
+  --kt-ai-command-shadow: var(--kt-ai-shadow-xl);
+}
+
+[data-theme="kt-ai-terminal"],
+[data-theme="dark"] {
+  color-scheme: dark;
+  --kt-ai-bg: var(--kt-gray-950);
+  --kt-ai-bg-soft: var(--kt-gray-900);
+  --kt-ai-bg-elevated: var(--kt-gray-850);
+  --kt-ai-bg-sunken: #060607;
+  --kt-ai-bg-hover: var(--kt-white-a06);
+  --kt-ai-bg-active: var(--kt-white-a09);
+  --kt-ai-bg-glass: color-mix(in srgb, #0a0a0b 85%, transparent);
+  --kt-ai-inset-highlight: #00000014;
+  --kt-ai-ai-accent: #7c4fe0;
+  --kt-ai-ai-gradient: linear-gradient(135deg, #0096d7, #8b5cf6 92%);
+  --kt-ai-ai-orb: radial-gradient(circle at 32% 30%, #c4b0ff, #0096d7 75%);
+  --kt-ai-orb-bg: radial-gradient(circle at 42% 35%, #1c2940 0%, #0a0c12 72%);
+  --kt-ai-fg-on-ai: #ffffff;
+  --kt-ai-card-bg: var(--kt-gray-900);
+  --kt-ai-card-bg-glow: var(--kt-gray-900);
+  --kt-ai-card-border: var(--kt-white-a09);
+  --kt-ai-card-border-hover: var(--kt-white-a18);
+  --kt-ai-card-shadow: none;
+  --kt-ai-card-shadow-hover: none;
+  --kt-ai-selection: #fafafa1f;
+  --kt-ai-fg: var(--kt-white-a92);
+  --kt-ai-fg-muted: #9b9b9e;
+  --kt-ai-fg-faint: #848487;
+  --kt-ai-fg-on-fill: var(--kt-ink-900);
+  --kt-ai-border: var(--kt-white-a09);
+  --kt-ai-border-strong: var(--kt-white-a18);
+  --kt-ai-divider: var(--kt-white-a06);
+  --kt-ai-primary: var(--kt-near-white);
+  --kt-ai-primary-hover: #e4e4e7;
+  --kt-ai-primary-subtle: var(--kt-white-a09);
+  --kt-ai-brand-blue: var(--kt-blue-500);
+  --kt-ai-link: var(--kt-blue-400);
+  --kt-ai-focus-ring: #fafafa80;
+  --kt-ai-focus-shadow: 0 0 0 3px #fafafa24;
+  --kt-ai-danger: #f0726a;
+  --kt-ai-danger-hover: #f48a83;
+  --kt-ai-overlay: var(--kt-black-a55);
+  --kt-ai-chip-default-bg: var(--kt-white-a09);
+  --kt-ai-chip-default-fg: var(--kt-white-a92);
+  --kt-ai-chip-gray-bg: var(--kt-grayc-a18);
+  --kt-ai-chip-gray-fg: var(--kt-gray-300);
+  --kt-ai-chip-orange-bg: var(--kt-orange-a18);
+  --kt-ai-chip-orange-fg: var(--kt-orange-300);
+  --kt-ai-chip-green-bg: var(--kt-green-a18);
+  --kt-ai-chip-green-fg: var(--kt-green-300);
+  --kt-ai-chip-blue-bg: var(--kt-blue-a18);
+  --kt-ai-chip-blue-fg: var(--kt-blue-300);
+  --kt-ai-chip-purple-bg: var(--kt-purple-a18);
+  --kt-ai-chip-purple-fg: var(--kt-purple-300);
+  --kt-ai-chip-red-bg: var(--kt-red-a20);
+  --kt-ai-chip-red-fg: var(--kt-red-300);
+  --kt-ai-status-ok-bg: var(--kt-green-a18);
+  --kt-ai-status-ok-fg: var(--kt-green-300);
+  --kt-ai-status-warn-bg: var(--kt-orange-a18);
+  --kt-ai-status-warn-fg: var(--kt-orange-300);
+  --kt-ai-status-risk-bg: var(--kt-red-a20);
+  --kt-ai-status-risk-fg: var(--kt-red-300);
+  --kt-ai-status-info-bg: var(--kt-grayc-a18);
+  --kt-ai-status-info-fg: var(--kt-gray-300);
+  --kt-ai-chart-blue: var(--kt-chart-blue);
+  --kt-ai-chart-green: var(--kt-chart-green);
+  --kt-ai-chart-orange: var(--kt-chart-orange);
+  --kt-ai-chart-salmon: var(--kt-chart-salmon);
+  --kt-ai-chart-pink: var(--kt-chart-pink);
+  --kt-ai-chart-red: var(--kt-chart-red);
+  --kt-ai-chart-bar-fill: #2e2e31;
+  --kt-ai-shadow-sm: 0 1px 2px #00000052;
+  --kt-ai-shadow-md: 0 4px 16px #00000066;
+  --kt-ai-shadow-lg: 0 12px 40px #00000080;
+  --kt-ai-shadow-xl: 0 24px 80px #00000099;
+  --kt-ai-command-shadow: var(--kt-ai-shadow-xl);
+}
+
+/* data-theme="auto": dark при системной тёмной теме (дефолт light уже задан в :root) */
+@media (prefers-color-scheme: dark) {
+[data-theme="auto"] {
+  color-scheme: dark;
+  --kt-ai-bg: var(--kt-gray-950);
+  --kt-ai-bg-soft: var(--kt-gray-900);
+  --kt-ai-bg-elevated: var(--kt-gray-850);
+  --kt-ai-bg-sunken: #060607;
+  --kt-ai-bg-hover: var(--kt-white-a06);
+  --kt-ai-bg-active: var(--kt-white-a09);
+  --kt-ai-bg-glass: color-mix(in srgb, #0a0a0b 85%, transparent);
+  --kt-ai-inset-highlight: #00000014;
+  --kt-ai-ai-accent: #7c4fe0;
+  --kt-ai-ai-gradient: linear-gradient(135deg, #0096d7, #8b5cf6 92%);
+  --kt-ai-ai-orb: radial-gradient(circle at 32% 30%, #c4b0ff, #0096d7 75%);
+  --kt-ai-orb-bg: radial-gradient(circle at 42% 35%, #1c2940 0%, #0a0c12 72%);
+  --kt-ai-fg-on-ai: #ffffff;
+  --kt-ai-card-bg: var(--kt-gray-900);
+  --kt-ai-card-bg-glow: var(--kt-gray-900);
+  --kt-ai-card-border: var(--kt-white-a09);
+  --kt-ai-card-border-hover: var(--kt-white-a18);
+  --kt-ai-card-shadow: none;
+  --kt-ai-card-shadow-hover: none;
+  --kt-ai-selection: #fafafa1f;
+  --kt-ai-fg: var(--kt-white-a92);
+  --kt-ai-fg-muted: #9b9b9e;
+  --kt-ai-fg-faint: #848487;
+  --kt-ai-fg-on-fill: var(--kt-ink-900);
+  --kt-ai-border: var(--kt-white-a09);
+  --kt-ai-border-strong: var(--kt-white-a18);
+  --kt-ai-divider: var(--kt-white-a06);
+  --kt-ai-primary: var(--kt-near-white);
+  --kt-ai-primary-hover: #e4e4e7;
+  --kt-ai-primary-subtle: var(--kt-white-a09);
+  --kt-ai-brand-blue: var(--kt-blue-500);
+  --kt-ai-link: var(--kt-blue-400);
+  --kt-ai-focus-ring: #fafafa80;
+  --kt-ai-focus-shadow: 0 0 0 3px #fafafa24;
+  --kt-ai-danger: #f0726a;
+  --kt-ai-danger-hover: #f48a83;
+  --kt-ai-overlay: var(--kt-black-a55);
+  --kt-ai-chip-default-bg: var(--kt-white-a09);
+  --kt-ai-chip-default-fg: var(--kt-white-a92);
+  --kt-ai-chip-gray-bg: var(--kt-grayc-a18);
+  --kt-ai-chip-gray-fg: var(--kt-gray-300);
+  --kt-ai-chip-orange-bg: var(--kt-orange-a18);
+  --kt-ai-chip-orange-fg: var(--kt-orange-300);
+  --kt-ai-chip-green-bg: var(--kt-green-a18);
+  --kt-ai-chip-green-fg: var(--kt-green-300);
+  --kt-ai-chip-blue-bg: var(--kt-blue-a18);
+  --kt-ai-chip-blue-fg: var(--kt-blue-300);
+  --kt-ai-chip-purple-bg: var(--kt-purple-a18);
+  --kt-ai-chip-purple-fg: var(--kt-purple-300);
+  --kt-ai-chip-red-bg: var(--kt-red-a20);
+  --kt-ai-chip-red-fg: var(--kt-red-300);
+  --kt-ai-status-ok-bg: var(--kt-green-a18);
+  --kt-ai-status-ok-fg: var(--kt-green-300);
+  --kt-ai-status-warn-bg: var(--kt-orange-a18);
+  --kt-ai-status-warn-fg: var(--kt-orange-300);
+  --kt-ai-status-risk-bg: var(--kt-red-a20);
+  --kt-ai-status-risk-fg: var(--kt-red-300);
+  --kt-ai-status-info-bg: var(--kt-grayc-a18);
+  --kt-ai-status-info-fg: var(--kt-gray-300);
+  --kt-ai-chart-blue: var(--kt-chart-blue);
+  --kt-ai-chart-green: var(--kt-chart-green);
+  --kt-ai-chart-orange: var(--kt-chart-orange);
+  --kt-ai-chart-salmon: var(--kt-chart-salmon);
+  --kt-ai-chart-pink: var(--kt-chart-pink);
+  --kt-ai-chart-red: var(--kt-chart-red);
+  --kt-ai-chart-bar-fill: #2e2e31;
+  --kt-ai-shadow-sm: 0 1px 2px #00000052;
+  --kt-ai-shadow-md: 0 4px 16px #00000066;
+  --kt-ai-shadow-lg: 0 12px 40px #00000080;
+  --kt-ai-shadow-xl: 0 24px 80px #00000099;
+  --kt-ai-command-shadow: var(--kt-ai-shadow-xl);
+}
+}
+
+/* Системные предпочтения */
+@media (prefers-reduced-motion: reduce) {
+  :root { --kt-ai-dur-fast: 0ms; --kt-ai-dur-base: 0ms; --kt-ai-dur-slow: 0ms; --kt-ai-dur-slower: 0ms; }
+}
+
+/* Сенсорная ширина: цель нажатия не меньше control-h-touch (Fitts, 44px).
+   sm и md здесь СОВПАДАЮТ: на сенсорной ширине «маленький» контрол
+   не имеет права быть меньше минимальной цели — это не размер, а порог. */
+@media (pointer: coarse), (max-width: 767.98px) {
+  :root { --kt-ai-control-h-sm: var(--kt-ai-control-h-touch); --kt-ai-control-h-md: var(--kt-ai-control-h-touch); --kt-ai-control-h-lg: 48px; --kt-ai-nav-row: var(--kt-ai-control-h-touch); --kt-ai-table-row: 52px; --kt-ai-table-row-compact: 48px; }
+}
+
+} /* @layer kt-tokens */
diff --git a/design-system/product.schema.json b/design-system/product.schema.json
new file mode 100644
index 0000000..bbea793
--- /dev/null
+++ b/design-system/product.schema.json
@@ -0,0 +1,1552 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "https://kt.kz/ai/product.schema.json",
+  "title": "KT AI Product Contract",
+  "description": "Единый продуктовый контракт KT AI. ОДИН источник, ОДИН рантайм: этот контракт выдаёт дизайнер Төре ([[APP]]), потребляет templates/kt-ai-app-shell.html (кликабельный прототип), читает handoff-док и проверяет scripts/validate_product.py. Раньше форма контракта дублировалась в 4 местах (atomic_product_system.md / app-shell JSON / shadcn input-contract / Төре). Это — каноническая форма. Канон правил вёрстки: docs/DESIGN.md, docs/PRINCIPLES.md.",
+  "type": "object",
+  "required": [
+    "product"
+  ],
+  "additionalProperties": false,
+  "properties": {
+    "archetype": {
+      "type": "string",
+      "default": "queue",
+      "description": "Архетип экрана из открытого реестра archetypes/registry.json (id, lowercase). Stable: queue, cockpit, dashboard, compare. Неизвестный или ещё не реализованный (status=planned) архетип безопасно деградирует в queue-таблицу. Набор открыт — новые добавляются записью в реестр + рендерером + примером, без правки ядра. См. docs/ARCHETYPES.md."
+    },
+    "layout": {
+      "type": "string",
+      "description": "Deprecated-алиас archetype. Рантайм читает archetype || layout. Для новых конфигов использовать archetype."
+    },
+    "product": {
+      "type": "object",
+      "required": [
+        "name",
+        "entity"
+      ],
+      "additionalProperties": false,
+      "description": "Кто и о чём. name – короткое имя рабочего объекта (H1, 1-3 слова), не описание процесса.",
+      "properties": {
+        "name": {
+          "type": "string",
+          "minLength": 1,
+          "maxLength": 40
+        },
+        "purpose": {
+          "type": "string",
+          "maxLength": 90,
+          "description": "Одна scope-фраза (subtitle)."
+        },
+        "entity": {
+          "type": "string",
+          "minLength": 1,
+          "description": "Главная сущность: договор, заявка, лот, документ, инцидент, клиент, задача."
+        },
+        "createLabel": {
+          "type": "string",
+          "maxLength": 24,
+          "description": "Явная подпись кнопки создания (морфология). Если не задано — «Новый {entity}». Пример: «Новое предложение»."
+        },
+        "primary_user": {
+          "type": "string",
+          "description": "Метаданные: роль основного пользователя (для авторинга/handoff; в UI не выводится)."
+        },
+        "language": {
+          "type": "string",
+          "default": "ru",
+          "enum": [
+            "ru",
+            "kk",
+            "en"
+          ],
+          "description": "Метаданные: основной язык продукта (v1 — ru; не переключает локаль рантайма)."
+        },
+        "view": {
+          "type": "string",
+          "enum": [
+            "operational",
+            "management"
+          ],
+          "default": "operational",
+          "description": "operational – рабочая очередь владельца (по умолчанию). management – управленческий/reporting view, где допустимы ROI/FTE/эффект."
+        }
+      }
+    },
+    "user": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "name": {
+          "type": "string"
+        },
+        "role": {
+          "type": "string"
+        }
+      }
+    },
+    "notifications": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "required": [
+          "text"
+        ],
+        "additionalProperties": false,
+        "properties": {
+          "text": {
+            "type": "string"
+          },
+          "time": {
+            "type": "string"
+          },
+          "unread": {
+            "type": "boolean",
+            "default": false
+          }
+        }
+      }
+    },
+    "steps": {
+      "type": "object",
+      "additionalProperties": false,
+      "description": "Этапы процесса в мастере создания. НЕ выносятся на главный список (LAYOUT_RULES 9a).",
+      "properties": {
+        "items": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        },
+        "current": {
+          "type": "integer",
+          "minimum": 1
+        }
+      }
+    },
+    "nav": {
+      "type": "array",
+      "description": "Разделы sidebar. 3-5 пунктов на группу (закон Миллера).",
+      "items": {
+        "type": "object",
+        "required": [
+          "label"
+        ],
+        "additionalProperties": false,
+        "properties": {
+          "label": {
+            "type": "string",
+            "maxLength": 24
+          },
+          "icon": {
+            "type": "string",
+            "description": "Имя иконки из спрайта icons/kt-ai-lucide-sprite.svg (home/feed/lots/risk/chart/tool/file/users/source/decisions/...). Монохром, Lucide."
+          },
+          "view": {
+            "type": "string",
+            "enum": [
+              "documents",
+              "registry"
+            ],
+            "description": "Тип секции. «documents» → коллекция артефактов (скачиваемых) из `_docs` строк; «registry» → полный рабочий реестр (таблица с поиском/фильтрами/пагинацией) — используйте для dashboard, чтобы главная оставалась обзором."
+          },
+          "docType": {
+            "type": "string",
+            "description": "Для view=documents: какой тип документов показать (совпадает с `_docs[].type`, напр. ts/report)."
+          },
+          "group": {
+            "type": "string",
+            "maxLength": 24,
+            "description": "Заголовок группы разделов. Пункты с одинаковым значением идут подряд под общим заголовком; пункты без группы — просто списком, как раньше. Заголовок НЕ пункт: он не кликается и в нумерации не участвует, поэтому banner.actionNav и S.nav(i) считают только пункты. В полосе значков (832-1023px) заголовок становится разделителем."
+          },
+          "count": {
+            "$comment": "DEPRECATED: счётчик в пункте меню; рендерится для старых конфигов, в новых не использовать",
+            "type": [
+              "integer",
+              "number"
+            ]
+          }
+        }
+      }
+    },
+    "kpis": {
+      "type": "array",
+      "description": "Тихая метрик-полоса. Каждая метрика отвечает на вопрос пользователя в этом экране (очередь, риск, просрочка), НЕ доказывает ценность продукта. ROI/FTE/экономия часов/тенге эффекта запрещены при product.view=operational (валидатор предупреждает).",
+      "items": {
+        "type": "object",
+        "required": [
+          "value",
+          "label"
+        ],
+        "additionalProperties": false,
+        "properties": {
+          "value": {
+            "type": "string"
+          },
+          "label": {
+            "type": "string",
+            "maxLength": 32
+          },
+          "hint": {
+            "type": "string",
+            "maxLength": 40,
+            "$comment": "уточнение под значением: знаменатель, доля, период — «из 66», «за месяц»"
+          },
+          "note": {
+            "type": "string",
+            "description": "Сноска: чем это число НЕ является. Поле-источник иногда меряет не ровно то, чем показатель назван («ожидание в очереди» не отделяет автоприветствие бота от первого ответа оператора) — оговорка обязана стоять рядом с числом, а не в баннере над ним. Потолка длины нет: hint остаётся в 40 знаках, чтобы полоса плиток осталась полосой, а оговорка живёт отдельным полем и показывается мельче подписи. Не прячется под клик — спрятанное читают не все."
+          }
+        }
+      }
+    },
+    "scenario": {
+      "type": "object",
+      "required": [
+        "headline",
+        "control"
+      ],
+      "additionalProperties": false,
+      "description": "Один сквозной сценарий владельца: список → деталь → контрольное действие. control – ровно одно главное действие (глагол), один primary на экран.",
+      "properties": {
+        "headline": {
+          "type": "string",
+          "maxLength": 40,
+          "description": "Заголовок рабочей области, 1-3 слова."
+        },
+        "control": {
+          "type": "string",
+          "description": "Главное (primary) действие, глаголом: «Подтвердить и отправить»."
+        },
+        "reject": {
+          "type": "string",
+          "description": "Вторичное/обратное действие."
+        },
+        "confirmText": {
+          "type": "string",
+          "description": "Текст подтверждения в modal для control."
+        },
+        "aiSummary": {
+          "type": "string",
+          "maxLength": 280,
+          "description": "Что сделал агент: 1-2 фразы для шапки карточки (drawer). Конкретно про этот продукт — НЕ переиспользовать чужой текст. Без него блок «Что сделал агент» не показывается."
+        },
+        "approveTo": {
+          "type": "string",
+          "description": "Ключ статуса после control."
+        },
+        "rejectTo": {
+          "type": "string",
+          "description": "Ключ статуса после reject."
+        },
+        "actions": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          },
+          "description": "Action Layer: варианты действия, которые человек может выбрать/изменить в карточке (human-in-the-loop). AI рекомендует, человек подтверждает или меняет."
+        }
+      }
+    },
+    "statuses": {
+      "type": "object",
+      "minProperties": 1,
+      "description": "Словарь workflow-статусов главного объекта. Ключ → { label, tone }. Confidence и тип риска моделируются отдельно, не смешиваются со статусом.",
+      "additionalProperties": {
+        "type": "object",
+        "required": [
+          "label",
+          "tone"
+        ],
+        "additionalProperties": false,
+        "properties": {
+          "label": {
+            "type": "string",
+            "maxLength": 24,
+            "description": "До 4 слов."
+          },
+          "tone": {
+            "type": "string",
+            "enum": [
+              "ok",
+              "warn",
+              "risk",
+              "info"
+            ]
+          },
+          "dim": {
+            "type": "boolean",
+            "description": "Гасит (приглушает) строки с этим статусом — терминальные/неактивные уходят на второй план, активные выделяются (паттерн «dim inactive rows»)."
+          }
+        }
+      }
+    },
+    "chart": {
+      "type": "object",
+      "additionalProperties": false,
+      "description": "Сводный bar-chart над таблицей: раскатывает данные во времени, чтобы не искать по timestamp-колонке («data drives the form»). Напр.: обращения, разобранные AI, по дням.",
+      "properties": {
+        "title": {
+          "type": "string",
+          "maxLength": 48
+        },
+        "total": {
+          "type": "string",
+          "description": "Крупное итоговое число (например «1 240»)."
+        },
+        "unit": {
+          "type": "string",
+          "maxLength": 24,
+          "description": "Подпись у числа («за месяц», «всего»)."
+        },
+        "color": {
+          "type": "string",
+          "enum": [
+            "blue",
+            "green",
+            "orange",
+            "salmon",
+            "pink",
+            "primary"
+          ],
+          "default": "blue"
+        },
+        "link": {
+          "type": "string",
+          "maxLength": 16,
+          "description": "Опц. подпись ссылки справа («Все»)."
+        },
+        "groupBy": {
+          "type": "string",
+          "description": "Ключ колонки/поля строки: бары считаются из ФИЛЬТРОВАННЫХ строк (counts по значениям), график адаптируется к выбранному табу. Если задан — заменяет статичный bars."
+        },
+        "bucket": {
+          "type": "string",
+          "enum": [
+            "day"
+          ],
+          "description": "Временная раскатка: counts по дням за выбранный диапазон. Требует dateKey. Включает универсальный фильтр диапазона дат (7/30/90/всё), который фильтрует и таблицу, и график."
+        },
+        "dateKey": {
+          "type": "string",
+          "description": "Ключ колонки-даты (ISO YYYY-MM-DD) для bucket:day и фильтра диапазона."
+        },
+        "bars": {
+          "type": "array",
+          "description": "Столбцы. 7–31 шт.",
+          "items": {
+            "type": "object",
+            "required": [
+              "value"
+            ],
+            "additionalProperties": false,
+            "properties": {
+              "label": {
+                "type": "string"
+              },
+              "value": {
+                "type": "number",
+                "minimum": 0
+              },
+              "hint": {
+                "type": "object",
+                "additionalProperties": false,
+                "description": "Подсказка марки. Строки приходят готовыми от продукта — рантайм их не форматирует и не пересчитывает.",
+                "properties": {
+                  "title": {
+                    "type": "string",
+                    "maxLength": 80
+                  },
+                  "rows": {
+                    "type": "array",
+                    "maxItems": 3,
+                    "items": {
+                      "type": "object",
+                      "required": [
+                        "label",
+                        "value"
+                      ],
+                      "additionalProperties": false,
+                      "properties": {
+                        "label": {
+                          "type": "string",
+                          "maxLength": 40
+                        },
+                        "value": {
+                          "type": "string",
+                          "maxLength": 40
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "activity": {
+      "type": "array",
+      "description": "Лента активности (правая панель, триггер-иконка в топбаре): действия агента и история решений во времени. Референс: activity-timeline drawer.",
+      "items": {
+        "type": "object",
+        "required": [
+          "title"
+        ],
+        "additionalProperties": false,
+        "properties": {
+          "title": {
+            "type": "string"
+          },
+          "time": {
+            "type": "string",
+            "description": "Метка времени («Сегодня, 14:13»)."
+          },
+          "ago": {
+            "type": "string",
+            "description": "Относительно («4 часа назад»)."
+          },
+          "tone": {
+            "type": "string",
+            "enum": [
+              "ok",
+              "warn",
+              "risk",
+              "info"
+            ],
+            "description": "Цвет точки на таймлайне."
+          },
+          "who": {
+            "type": "string",
+            "description": "Кто/что инициировал."
+          },
+          "tags": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            },
+            "description": "Чипы (датасеты/объекты)."
+          },
+          "summary": {
+            "type": "string",
+            "maxLength": 220
+          },
+          "link": {
+            "type": "string",
+            "maxLength": 32,
+            "description": "Подпись действия-ссылки."
+          }
+        }
+      }
+    },
+    "table": {
+      "type": "object",
+      "required": [
+        "columns",
+        "rows"
+      ],
+      "additionalProperties": false,
+      "description": "Главный рабочий объект экрана для 5+ записей.",
+      "properties": {
+        "pageSize": {
+          "type": "integer",
+          "minimum": 1,
+          "description": "Размер страницы таблицы. Если строк больше — появляется пагинация. По умолчанию 12."
+        },
+        "columns": {
+          "type": "array",
+          "minItems": 1,
+          "items": {
+            "type": "object",
+            "required": [
+              "key",
+              "label"
+            ],
+            "additionalProperties": false,
+            "properties": {
+              "key": {
+                "type": "string",
+                "pattern": "^[a-zA-Z_][a-zA-Z0-9_]*$"
+              },
+              "label": {
+                "type": "string",
+                "maxLength": 24,
+                "description": "1-2 слова."
+              },
+              "type": {
+                "type": "string",
+                "enum": [
+                  "text",
+                  "num",
+                  "date",
+                  "status"
+                ],
+                "default": "text"
+              },
+              "sub": {
+                "type": "string",
+                "description": "Ключ поля для muted-подзаголовка под значением (двухстрочная entity-ячейка в духе ElevenLabs)."
+              },
+              "values": {
+                "type": "array",
+                "items": {
+                  "type": "string"
+                },
+                "description": "Field-level data contract: допустимые значения для status/enum-колонок. Заполняется из паспорта/интервью, чтобы владелец видел ПРАВДУ, а не выдумку."
+              },
+              "source": {
+                "type": "string",
+                "description": "Метаданные авторинга: откуда значение (SAP, Лотус, KTWorks, агент, человек). Для трассировки/handoff; в рантайме v1 не рендерится автоматически."
+              },
+              "align": {
+                "type": "string",
+                "enum": [
+                  "left",
+                  "right"
+                ],
+                "description": "Выравнивание ячеек. По умолчанию num — справа, остальное — слева; задаёт явный override (рендерят оба рантайма)."
+              },
+              "sortable": {
+                "type": "boolean",
+                "default": false
+              },
+              "width": {
+                "type": "string",
+                "description": "Явный override ширины колонки (напр. «140px»). По умолчанию ширина считается по содержимому колонки (из всех строк, с клампом) — не шире и не уже, чем нужно."
+              }
+            }
+          }
+        },
+        "rows": {
+          "type": "array",
+          "description": "8-12 правдоподобных строк. Данные – из материалов проекта/интервью, НЕ выдуманные. _flags – список проверок агента для drawer; _docs – артефакты, которые продукт производит по записи (ТС, отчёт, СЗ…).",
+          "items": {
+            "type": "object",
+            "properties": {
+              "_flags": {
+                "type": "array",
+                "items": {
+                  "type": "string"
+                }
+              },
+              "_docs": {
+                "type": "array",
+                "description": "Выходные документы записи. Показываются в drawer (секция «Документы») и в nav-секциях view=documents; каждый со статусом и кнопкой скачать.",
+                "items": {
+                  "type": "object",
+                  "required": [
+                    "label"
+                  ],
+                  "additionalProperties": false,
+                  "properties": {
+                    "label": {
+                      "type": "string",
+                      "description": "Имя документа: «Проект ТС», «Отчёт о консолидации», «Служебная записка»."
+                    },
+                    "type": {
+                      "type": "string",
+                      "description": "Тип для группировки в nav-секции (docType): ts/report/…"
+                    },
+                    "status": {
+                      "type": "string",
+                      "description": "Статус по жизненному циклу: «Черновик v1», «Сформирован», «После принятия»."
+                    },
+                    "format": {
+                      "type": "string",
+                      "description": "Формат для иконки/подписи: doc/pdf/xlsx."
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "drawer": {
+      "type": "object",
+      "required": [
+        "titleKey"
+      ],
+      "additionalProperties": false,
+      "description": "Правый drawer деталей объекта (детали в drawer, не на новой странице).",
+      "properties": {
+        "titleKey": {
+          "type": "string",
+          "description": "Ключ колонки для заголовка drawer."
+        },
+        "fields": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "required": [
+              "key",
+              "label"
+            ],
+            "additionalProperties": false,
+            "properties": {
+              "key": {
+                "type": "string"
+              },
+              "label": {
+                "type": "string"
+              }
+            }
+          }
+        },
+        "flagsLabel": {
+          "type": "string"
+        }
+      }
+    },
+    "ai": {
+      "type": "object",
+      "additionalProperties": false,
+      "description": "Точка входа AI-помощи (орб Төре). LLM-вызовы только через backend (app/api/ai/*), не из клиента. AI-контент атрибутируется «Сгенерировано ИИ».",
+      "properties": {
+        "intro": {
+          "type": "string"
+        },
+        "suggestions": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        },
+        "answers": {
+          "type": "object",
+          "additionalProperties": {
+            "type": "string"
+          }
+        },
+        "fallback": {
+          "type": "string"
+        }
+      }
+    },
+    "banner": {
+      "type": "object",
+      "additionalProperties": false,
+      "description": "Системный баннер в контенте по схеме «что-почему-что делать».",
+      "properties": {
+        "text": {
+          "type": "string"
+        },
+        "tone": {
+          "type": "string",
+          "enum": [
+            "info",
+            "warn",
+            "risk",
+            "ok"
+          ],
+          "default": "info"
+        },
+        "action": {
+          "type": "string",
+          "description": "Подпись действия баннера (делает баннер полезным, не статичным)."
+        },
+        "actionNav": {
+          "type": "integer",
+          "description": "Индекс раздела nav, куда ведёт действие баннера."
+        }
+      }
+    },
+    "search": {
+      "type": "object",
+      "additionalProperties": false,
+      "description": "Поиск в шапке. Настраивает поле HTML-рантайма; в React-ките те же три поля живут в пропе `search` у KTAIShell (там же items палитры). Само поле не включается и не выключается этим блоком — в HTML-рантайме оно фильтрует таблицу и есть всегда.",
+      "properties": {
+        "placeholder": {
+          "type": "string",
+          "maxLength": 40,
+          "description": "Подсказка в поле. По умолчанию «Поиск…». Сочетание сюда писать НЕ надо — у него свой бейдж."
+        },
+        "compact": {
+          "type": "boolean",
+          "default": false,
+          "description": "Узкое поле (176px) вместо полного: шапка отдаёт место остальному. Бейдж сочетания в нём не показывается — это ширина запроса, а не запроса с подписью; само сочетание продолжает работать и названо в title."
+        },
+        "shortcut": {
+          "type": "boolean",
+          "default": true,
+          "description": "Сочетание ⌘K/Ctrl+K и его бейдж. Выключается ОДНИМ полем: подпись без обработчика — обещание, обработчик без подписи — незаявленная горячая клавиша. Подпись берётся по клавиатуре машины: ⌘K на Apple, Ctrl K на остальных."
+        }
+      }
+    },
+    "conclusion": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": [
+        "text"
+      ],
+      "description": "Вывод раздела — последний блок экрана, после таблицы. Противовес баннера: баннер стоит НАД числами и предупреждает, из-за чего число соврёт; вывод стоит ПОСЛЕ данных и говорит, что из них следует (разбор смещения выборки, оговорка о методике, ответ на вопрос раздела). Без этого слота вывод уходил в баннер, и абзац текста вставал до первого числа.",
+      "properties": {
+        "title": {
+          "type": "string",
+          "maxLength": 60
+        },
+        "text": {
+          "type": "string",
+          "description": "Текст вывода. Пустая строка разделяет абзацы."
+        }
+      }
+    },
+    "compare": {
+      "type": "object",
+      "additionalProperties": false,
+      "description": "Данные архетипа compare: попарная сверка двух источников, расхождения подсвечены (аудит/финансы/договоры). Требуется при archetype=compare, иначе экран деградирует в queue.",
+      "properties": {
+        "aLabel": {
+          "type": "string"
+        },
+        "bLabel": {
+          "type": "string"
+        },
+        "pairs": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "required": [
+              "label",
+              "a",
+              "b"
+            ],
+            "additionalProperties": false,
+            "properties": {
+              "label": {
+                "type": "string",
+                "description": "Имя сверяемого поля."
+              },
+              "a": {
+                "type": "string",
+                "description": "Ключ колонки источника A."
+              },
+              "b": {
+                "type": "string",
+                "description": "Ключ колонки источника B."
+              }
+            }
+          }
+        }
+      }
+    },
+    "sections": {
+      "type": "array",
+      "description": "Свободная композиция (archetype custom): секции-блоки из примитивов системы в любом порядке. Архетипы — отправные точки; когда процесс не ложится в один архетип, экран собирается отсюда.",
+      "items": {
+        "type": "object",
+        "required": [
+          "title"
+        ],
+        "additionalProperties": false,
+        "properties": {
+          "title": {
+            "type": "string"
+          },
+          "description": {
+            "type": "string"
+          },
+          "body": {
+            "type": "string"
+          },
+          "fields": {
+            "type": "array",
+            "items": {
+              "type": "object",
+              "required": [
+                "label",
+                "value"
+              ],
+              "additionalProperties": false,
+              "properties": {
+                "label": {
+                  "type": "string"
+                },
+                "value": {
+                  "type": "string"
+                }
+              }
+            }
+          },
+          "type": {
+            "enum": [
+              "text",
+              "cards",
+              "chart",
+              "kpis",
+              "table",
+              "chat"
+            ],
+            "$comment": "text (по умолчанию) | cards — сетка карточек (хаб инструментов, референс ElevenLabs Home) | chart — чарт по контракту analytics | kpis — глобальная KPI-строка | table — глобальная таблица | chat — глобальный ai-блок"
+          },
+          "width": {
+            "enum": [
+              "full",
+              "half"
+            ],
+            "$comment": "half — секция занимает полколонки (двухколоночная композиция)"
+          },
+          "items": {
+            "type": "array",
+            "maxItems": 12,
+            "$comment": "для type=cards",
+            "items": {
+              "type": "object",
+              "additionalProperties": false,
+              "required": [
+                "title"
+              ],
+              "properties": {
+                "title": {
+                  "type": "string",
+                  "maxLength": 60
+                },
+                "text": {
+                  "type": "string",
+                  "maxLength": 160
+                },
+                "badge": {
+                  "type": "string",
+                  "maxLength": 24
+                },
+                "tone": {
+                  "enum": [
+                    "ok",
+                    "warn",
+                    "risk",
+                    "info"
+                  ]
+                }
+              }
+            }
+          },
+          "chart": {
+            "$ref": "#/properties/analytics/properties/charts/items",
+            "$comment": "для type=chart"
+          }
+        }
+      }
+    },
+    "onboarding": {
+      "type": "array",
+      "description": "Слайды онбординг-карусели при первом входе (2-3). Если не задано — берутся дефолтные слайды на основе product. Иконка из спрайта icons/kt-ai-lucide-sprite.svg.",
+      "items": {
+        "type": "object",
+        "required": [
+          "title",
+          "text"
+        ],
+        "additionalProperties": false,
+        "properties": {
+          "icon": {
+            "type": "string",
+            "description": "Имя иконки из спрайта (sparkles/eye/megaphone/book/play/...)."
+          },
+          "title": {
+            "type": "string",
+            "maxLength": 48
+          },
+          "text": {
+            "type": "string",
+            "maxLength": 220
+          }
+        }
+      }
+    },
+    "filterKeys": {
+      "$comment": "DEPRECATED: фильтры выводятся из statuses автоматически; поле рендерится для старых конфигов, в новых не использовать",
+      "type": "array",
+      "items": {
+        "type": "string"
+      }
+    },
+    "document": {
+      "$comment": "Архетип document: документ с правками агента по фрагментам (договор, письмо, ТЗ)",
+      "type": "object",
+      "additionalProperties": false,
+      "required": [
+        "title",
+        "fragments"
+      ],
+      "properties": {
+        "title": {
+          "type": "string",
+          "maxLength": 120
+        },
+        "source": {
+          "type": "string",
+          "maxLength": 160,
+          "$comment": "откуда собран документ (шаблон + заявка)"
+        },
+        "fragments": {
+          "type": "array",
+          "minItems": 2,
+          "maxItems": 14,
+          "items": {
+            "type": "object",
+            "additionalProperties": false,
+            "required": [
+              "text"
+            ],
+            "properties": {
+              "heading": {
+                "type": "string",
+                "maxLength": 90
+              },
+              "text": {
+                "type": "string",
+                "maxLength": 700
+              },
+              "was": {
+                "type": "string",
+                "maxLength": 700,
+                "$comment": "прежний текст для op=edit"
+              },
+              "op": {
+                "enum": [
+                  "keep",
+                  "edit",
+                  "add",
+                  "del"
+                ]
+              },
+              "flag": {
+                "type": "string",
+                "maxLength": 220,
+                "$comment": "почему агент пометил фрагмент"
+              }
+            }
+          }
+        }
+      }
+    },
+    "artifact": {
+      "$comment": "Архетип copilot: результат-артефакт рядом с чатом",
+      "type": "object",
+      "additionalProperties": false,
+      "required": [
+        "title",
+        "preview"
+      ],
+      "properties": {
+        "type": {
+          "enum": [
+            "document",
+            "slides",
+            "report",
+            "table",
+            "letter"
+          ]
+        },
+        "title": {
+          "type": "string",
+          "maxLength": 120
+        },
+        "version": {
+          "type": "string",
+          "maxLength": 24
+        },
+        "preview": {
+          "type": "string",
+          "maxLength": 4000,
+          "$comment": "текст/markdown-превью артефакта"
+        },
+        "actions": {
+          "type": "array",
+          "maxItems": 3,
+          "items": {
+            "type": "string",
+            "maxLength": 32
+          }
+        }
+      }
+    },
+    "wizard": {
+      "$comment": "Архетип wizard: пошаговая заявка с автозаполнением агентом",
+      "type": "object",
+      "additionalProperties": false,
+      "required": [
+        "steps"
+      ],
+      "properties": {
+        "current": {
+          "type": "integer",
+          "minimum": 0
+        },
+        "steps": {
+          "type": "array",
+          "minItems": 2,
+          "maxItems": 7,
+          "items": {
+            "type": "object",
+            "additionalProperties": false,
+            "required": [
+              "title",
+              "fields"
+            ],
+            "properties": {
+              "title": {
+                "type": "string",
+                "maxLength": 60
+              },
+              "fields": {
+                "type": "array",
+                "minItems": 1,
+                "maxItems": 10,
+                "items": {
+                  "type": "object",
+                  "additionalProperties": false,
+                  "required": [
+                    "label"
+                  ],
+                  "properties": {
+                    "label": {
+                      "type": "string",
+                      "maxLength": 60
+                    },
+                    "value": {
+                      "type": [
+                        "string",
+                        "number"
+                      ],
+                      "$comment": "предзаполнено"
+                    },
+                    "prefill": {
+                      "type": "boolean",
+                      "$comment": "true = заполнил агент"
+                    },
+                    "hint": {
+                      "type": "string",
+                      "maxLength": 120,
+                      "$comment": "источник/подсказка"
+                    }
+                  }
+                }
+              },
+              "desc": {
+                "type": "string",
+                "maxLength": 160,
+                "$comment": "описание шага в вертикальном степпере (референс ElevenLabs)"
+              }
+            }
+          }
+        }
+      }
+    },
+    "inbox": {
+      "$comment": "Архетип inbox: список + постоянная панель чтения; ключи указывают на поля table.rows",
+      "type": "object",
+      "additionalProperties": false,
+      "required": [
+        "bodyKey"
+      ],
+      "properties": {
+        "titleKey": {
+          "type": "string"
+        },
+        "subKey": {
+          "type": "string"
+        },
+        "timeKey": {
+          "type": "string"
+        },
+        "bodyKey": {
+          "type": "string",
+          "$comment": "поле строки с полным текстом (письмо, обращение)"
+        }
+      }
+    },
+    "analytics": {
+      "$comment": "Архетип analytics: аналитический разбор – сводка агента, чарты, выводы",
+      "type": "object",
+      "additionalProperties": false,
+      "required": [
+        "charts",
+        "findings"
+      ],
+      "properties": {
+        "summary": {
+          "type": "string",
+          "maxLength": 500,
+          "$comment": "что агент увидел в данных, 1-3 предложения"
+        },
+        "period": {
+          "type": "string",
+          "maxLength": 60
+        },
+        "charts": {
+          "type": "array",
+          "minItems": 1,
+          "maxItems": 4,
+          "items": {
+            "type": "object",
+            "additionalProperties": false,
+            "required": [
+              "type",
+              "title",
+              "points"
+            ],
+            "properties": {
+              "type": {
+                "enum": [
+                  "bar",
+                  "line",
+                  "donut"
+                ]
+              },
+              "title": {
+                "type": "string",
+                "maxLength": 90
+              },
+              "unit": {
+                "type": "string",
+                "maxLength": 20
+              },
+              "total": {
+                "type": [
+                  "string",
+                  "number"
+                ]
+              },
+              "note": {
+                "type": "string",
+                "maxLength": 160,
+                "$comment": "чтение чарта в одну фразу"
+              },
+              "points": {
+                "type": "array",
+                "minItems": 2,
+                "maxItems": 14,
+                "items": {
+                  "type": "object",
+                  "additionalProperties": false,
+                  "required": [
+                    "label",
+                    "value"
+                  ],
+                  "properties": {
+                    "label": {
+                      "type": "string",
+                      "maxLength": 40
+                    },
+                    "value": {
+                      "type": [
+                        "number",
+                        "string"
+                      ]
+                    },
+                    "tone": {
+                      "enum": [
+                        "ok",
+                        "warn",
+                        "risk",
+                        "info"
+                      ]
+                    }
+                  }
+                }
+              }
+            }
+          }
+        },
+        "findings": {
+          "type": "array",
+          "minItems": 1,
+          "maxItems": 6,
+          "items": {
+            "type": "object",
+            "additionalProperties": false,
+            "required": [
+              "title"
+            ],
+            "properties": {
+              "title": {
+                "type": "string",
+                "maxLength": 120
+              },
+              "detail": {
+                "type": "string",
+                "maxLength": 300
+              },
+              "value": {
+                "type": [
+                  "string",
+                  "number"
+                ]
+              },
+              "tone": {
+                "enum": [
+                  "ok",
+                  "warn",
+                  "risk",
+                  "info"
+                ]
+              }
+            }
+          }
+        }
+      }
+    },
+    "calendar": {
+      "$comment": "Архетип calendar: расписание по датам (окна работ, дежурства, сроки)",
+      "type": "object",
+      "additionalProperties": false,
+      "required": [
+        "events"
+      ],
+      "properties": {
+        "title": {
+          "type": "string",
+          "maxLength": 90
+        },
+        "range": {
+          "type": "string",
+          "maxLength": 60
+        },
+        "events": {
+          "type": "array",
+          "minItems": 2,
+          "maxItems": 30,
+          "items": {
+            "type": "object",
+            "additionalProperties": false,
+            "required": [
+              "date",
+              "title"
+            ],
+            "properties": {
+              "date": {
+                "type": "string",
+                "pattern": "^\\d{4}-\\d{2}-\\d{2}$"
+              },
+              "time": {
+                "type": "string",
+                "maxLength": 20
+              },
+              "title": {
+                "type": "string",
+                "maxLength": 120
+              },
+              "note": {
+                "type": "string",
+                "maxLength": 160
+              },
+              "badge": {
+                "type": "string",
+                "maxLength": 30
+              },
+              "tone": {
+                "enum": [
+                  "ok",
+                  "warn",
+                  "risk",
+                  "info"
+                ]
+              }
+            }
+          }
+        }
+      }
+    },
+    "map": {
+      "$comment": "Архетип map: схема-карта участка (точки 0-100 по осям, линии-связи); НЕ геокарта с тайлами",
+      "type": "object",
+      "additionalProperties": false,
+      "required": [
+        "points"
+      ],
+      "properties": {
+        "title": {
+          "type": "string",
+          "maxLength": 90
+        },
+        "points": {
+          "type": "array",
+          "minItems": 2,
+          "maxItems": 24,
+          "items": {
+            "type": "object",
+            "additionalProperties": false,
+            "required": [
+              "label",
+              "x",
+              "y"
+            ],
+            "properties": {
+              "label": {
+                "type": "string",
+                "maxLength": 40
+              },
+              "x": {
+                "type": "number",
+                "minimum": 0,
+                "maximum": 100
+              },
+              "y": {
+                "type": "number",
+                "minimum": 0,
+                "maximum": 100
+              },
+              "status": {
+                "type": "string",
+                "$comment": "ключ из statuses"
+              },
+              "tone": {
+                "enum": [
+                  "ok",
+                  "warn",
+                  "risk",
+                  "info"
+                ]
+              },
+              "note": {
+                "type": "string",
+                "maxLength": 200
+              }
+            }
+          }
+        },
+        "lines": {
+          "type": "array",
+          "maxItems": 40,
+          "items": {
+            "type": "array",
+            "minItems": 2,
+            "maxItems": 2,
+            "items": {
+              "type": "integer",
+              "minimum": 0
+            }
+          },
+          "$comment": "связи как пары индексов points"
+        }
+      }
+    },
+    "timeline": {
+      "$comment": "Архетип timeline: хронология дела/инцидента",
+      "type": "object",
+      "additionalProperties": false,
+      "required": [
+        "events"
+      ],
+      "properties": {
+        "title": {
+          "type": "string",
+          "maxLength": 120
+        },
+        "events": {
+          "type": "array",
+          "minItems": 3,
+          "maxItems": 20,
+          "items": {
+            "type": "object",
+            "additionalProperties": false,
+            "required": [
+              "time",
+              "title"
+            ],
+            "properties": {
+              "time": {
+                "type": "string",
+                "maxLength": 30
+              },
+              "title": {
+                "type": "string",
+                "maxLength": 140
+              },
+              "text": {
+                "type": "string",
+                "maxLength": 400
+              },
+              "actor": {
+                "type": "string",
+                "maxLength": 50
+              },
+              "tone": {
+                "enum": [
+                  "ok",
+                  "warn",
+                  "risk",
+                  "info"
+                ]
+              },
+              "current": {
+                "type": "boolean"
+              }
+            }
+          }
+        }
+      }
+    },
+    "dashboard": {
+      "$comment": "Архетип dashboard (референс ElevenLabs): KPI-карточки как табы, выбранная метрика управляет чартом; внизу разборы",
+      "type": "object",
+      "additionalProperties": false,
+      "required": [
+        "series"
+      ],
+      "properties": {
+        "range": {
+          "type": "string",
+          "maxLength": 60,
+          "$comment": "период данных, напр. «январь — июль 2026»"
+        },
+        "series": {
+          "type": "array",
+          "minItems": 1,
+          "maxItems": 4,
+          "items": {
+            "type": "object",
+            "additionalProperties": false,
+            "required": [
+              "points"
+            ],
+            "properties": {
+              "kpi": {
+                "type": "integer",
+                "minimum": 0,
+                "$comment": "индекс метрики в kpis, к которой привязан ряд (по умолчанию — порядковый)"
+              },
+              "title": {
+                "type": "string",
+                "maxLength": 90
+              },
+              "unit": {
+                "type": "string",
+                "maxLength": 20
+              },
+              "total": {
+                "type": [
+                  "string",
+                  "number"
+                ]
+              },
+              "note": {
+                "type": "string",
+                "maxLength": 160,
+                "$comment": "чтение чарта одной фразой"
+              },
+              "points": {
+                "type": "array",
+                "minItems": 2,
+                "maxItems": 32,
+                "items": {
+                  "type": "object",
+                  "additionalProperties": false,
+                  "required": [
+                    "label",
+                    "value"
+                  ],
+                  "properties": {
+                    "label": {
+                      "type": "string",
+                      "maxLength": 20
+                    },
+                    "value": {
+                      "type": [
+                        "number",
+                        "string"
+                      ]
+                    }
+                  }
+                }
+              }
+            }
+          }
+        },
+        "breakdowns": {
+          "type": "array",
+          "maxItems": 4,
+          "items": {
+            "type": "object",
+            "additionalProperties": false,
+            "required": [
+              "title",
+              "type",
+              "items"
+            ],
+            "properties": {
+              "title": {
+                "type": "string",
+                "maxLength": 90
+              },
+              "type": {
+                "enum": [
+                  "cards",
+                  "share",
+                  "top"
+                ]
+              },
+              "unit": {
+                "type": "string",
+                "maxLength": 20
+              },
+              "note": {
+                "type": "string",
+                "maxLength": 160
+              },
+              "items": {
+                "type": "array",
+                "minItems": 2,
+                "maxItems": 10,
+                "items": {
+                  "type": "object",
+                  "additionalProperties": false,
+                  "properties": {
+                    "label": {
+                      "type": "string",
+                      "maxLength": 60
+                    },
+                    "value": {
+                      "type": [
+                        "number",
+                        "string"
+                      ]
+                    },
+                    "title": {
+                      "type": "string",
+                      "maxLength": 60,
+                      "$comment": "для type=cards"
+                    },
+                    "stats": {
+                      "type": "array",
+                      "maxItems": 5,
+                      "items": {
+                        "type": "object",
+                        "additionalProperties": false,
+                        "required": [
+                          "label",
+                          "value"
+                        ],
+                        "properties": {
+                          "label": {
+                            "type": "string",
+                            "maxLength": 40
+                          },
+                          "value": {
+                            "type": [
+                              "string",
+                              "number"
+                            ]
+                          }
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "width": {
+      "type": "string",
+      "enum": [
+        "full",
+        "reading"
+      ],
+      "description": "Ширина рабочей области свободного экрана. «reading» — мера чтения сплошного текста (~720px), «full» — общая ширина продукта. Без поля: экран только из текстовых секций читается как «reading», любой другой — «full». Секция fields считается НЕ текстом: пары «подпись — значение» на 720px читаются хуже."
+    }
+  }
+}
diff --git a/design-system/scripts/validate_product.py b/design-system/scripts/validate_product.py
new file mode 100755
index 0000000..d20b236
--- /dev/null
+++ b/design-system/scripts/validate_product.py
@@ -0,0 +1,542 @@
+#!/usr/bin/env python3
+"""
+Валидатор продуктового контракта KT AI (seed для kt-ai-lint).
+
+Проверяет конфиг прототипа против product.schema.json (структура) И против правил
+дизайн-системы (честность): целостность статусов, один primary, запрет ROI/FTE на
+операционном дашборде, debug-язык в копирайте. Тот же контракт выдаёт Төре,
+потребляет kt-ai-app-shell.html, читает handoff. ОДИН источник истины.
+
+Запуск:
+  python3 scripts/validate_product.py examples/dogovor-arendy.config.json
+  python3 scripts/validate_product.py <config.json> --strict   # warnings → ошибка
+
+Без внешних зависимостей (stdlib). Код выхода: 0 – ок, 1 – ошибки (или warn при --strict).
+"""
+import glob
+import json
+import os
+import re
+import sys
+
+HERE = os.path.dirname(os.path.abspath(__file__))
+ROOT = os.path.dirname(HERE)
+
+ERRORS, WARNINGS, NOTES = [], [], []
+def err(msg): ERRORS.append(msg)
+def warn(msg): WARNINGS.append(msg)
+# Заметка — не претензия к конфигу, а факт о системе, который лучше узнать до
+# сборки («этот архетип есть только в одном рантайме»). Считать её нарушением
+# честности нельзя: под --strict предупреждения блокируют, и корректный конфиг
+# падал бы из-за справки. Гейт от заметок не краснеет никогда.
+def note(msg): NOTES.append(msg)
+
+_SPRITE_IDS = None
+def sprite_ids():
+    """id-набор иконок из канонического спрайта (для проверки nav/onboarding icon)."""
+    global _SPRITE_IDS
+    if _SPRITE_IDS is None:
+        try:
+            with open(os.path.join(ROOT, "icons", "kt-ai-lucide-sprite.svg"), encoding="utf-8") as fh:
+                _SPRITE_IDS = set(re.findall(r'symbol id="([^"]+)"', fh.read()))
+        except OSError:
+            _SPRITE_IDS = set()
+    return _SPRITE_IDS
+
+
+# ---------- мини-валидатор JSON Schema (подмножество, что используем) ----------
+def validate_schema(node, schema, path="$"):
+    t = schema.get("type")
+    if t == "object" and not isinstance(node, dict):
+        return err(f"{path}: ожидался object, получено {type(node).__name__}")
+    if t == "array" and not isinstance(node, list):
+        return err(f"{path}: ожидался array, получено {type(node).__name__}")
+    if t == "string" and not isinstance(node, str):
+        return err(f"{path}: ожидалась string")
+    if t == "integer" and not isinstance(node, int):
+        return err(f"{path}: ожидалось integer")
+    if t == "boolean" and not isinstance(node, bool):
+        return err(f"{path}: ожидался boolean")
+
+    if "enum" in schema and node not in schema["enum"]:
+        err(f"{path}: значение {node!r} не из {schema['enum']}")
+    if isinstance(node, str):
+        if "maxLength" in schema and len(node) > schema["maxLength"]:
+            warn(f"{path}: длина {len(node)} > maxLength {schema['maxLength']} (\"{node[:40]}…\")")
+        if "minLength" in schema and len(node) < schema["minLength"]:
+            err(f"{path}: пустое значение (minLength {schema['minLength']})")
+        if "pattern" in schema and not re.match(schema["pattern"], node):
+            err(f"{path}: {node!r} не соответствует pattern {schema['pattern']}")
+
+    if isinstance(node, dict):
+        for r in schema.get("required", []):
+            if r not in node:
+                err(f"{path}: отсутствует обязательное поле «{r}»")
+        props = schema.get("properties", {})
+        if "minProperties" in schema and len(node) < schema["minProperties"]:
+            err(f"{path}: нужно ≥{schema['minProperties']} ключей")
+        ap = schema.get("additionalProperties", True)
+        for k, v in node.items():
+            if k in props:
+                validate_schema(v, props[k], f"{path}.{k}")
+            elif ap is False:
+                err(f"{path}: лишнее поле «{k}» (additionalProperties=false)")
+            elif isinstance(ap, dict):
+                validate_schema(v, ap, f"{path}.{k}")
+
+    if isinstance(node, list):
+        if "minItems" in schema and len(node) < schema["minItems"]:
+            err(f"{path}: нужно ≥{schema['minItems']} элементов")
+        item_schema = schema.get("items")
+        if item_schema:
+            for i, it in enumerate(node):
+                validate_schema(it, item_schema, f"{path}[{i}]")
+
+
+# ---------- правила дизайн-системы (kt-ai-lint) ----------
+FORBIDDEN_METRIC = re.compile(r"\b(roi|fte)\b|эконом|эффект|окупаем|time\s*saved|человеко-час", re.I)
+DEBUG_LANG = re.compile(r"модель вернула|не проходит дизайн|\bfallback\b|\bshell\b|\bjson\b|\bprompt\b", re.I)
+# «проповеднический»/мета-копирайт: дисклеймеры прототипа и нравоучения про human-in-the-loop.
+# Продукт показывает решение контролами (рекомендация + кнопки), а НЕ объясняет/оправдывает себя.
+PREACHY_LANG = re.compile(
+    r"это прототип|прототип на дизайн|данные иллюстративн|контрольная точка|"
+    r"(ии|ai) не действует|решение (подтверждает|принимает) человек|решение[ —-]+за вами", re.I)
+
+
+def load_registry():
+    path = os.path.join(ROOT, "archetypes", "registry.json")
+    try:
+        return json.load(open(path, encoding="utf-8"))
+    except Exception:
+        return None
+
+
+def _present(cfg, block):
+    """Блок контракта присутствует и не пуст."""
+    v = cfg.get(block)
+    if v is None:
+        return False
+    if isinstance(v, (dict, list, str)):
+        return len(v) > 0
+    return True
+
+
+def lint_archetype(cfg):
+    """Реестр-управляемая проверка архетипа. Добавление архетипа = запись в registry.json,
+    код валидатора не меняется."""
+    reg = load_registry()
+    if not reg:
+        return
+    arch_id = cfg.get("archetype") or cfg.get("layout") or reg.get("fallback", "queue")
+    by_id = {a["id"]: a for a in reg.get("archetypes", [])}
+    fallback = reg.get("fallback", "queue")
+
+    spec = by_id.get(arch_id)
+    if spec is None:
+        warn(f"archetype: «{arch_id}» нет в реестре archetypes/registry.json — экран деградирует в «{fallback}». "
+             f"Известные: {sorted(by_id)}.")
+        spec = by_id.get(fallback)
+        if spec is None:
+            return
+    elif spec.get("status") == "planned":
+        warn(f"archetype «{arch_id}» ({spec.get('title','')}): рендерер ещё не реализован (status=planned) — "
+             f"экран показывается как «{fallback}».")
+
+    for block in spec.get("requires", []):
+        if not _present(cfg, block):
+            err(f"archetype «{spec['id']}» требует блок «{block}» — он отсутствует или пуст.")
+    for block in spec.get("forbids", []):
+        if _present(cfg, block):
+            err(f"archetype «{spec['id']}» запрещает блок «{block}».")
+    for block in spec.get("recommends", []):
+        if not _present(cfg, block):
+            warn(f"archetype «{spec['id']}» рекомендует блок «{block}» — без него экран беднее.")
+
+    if spec.get("id") == "compare" and not (cfg.get("compare", {}) or {}).get("pairs"):
+        warn("archetype compare: нет compare.pairs — нечего сверять, экран деградирует в queue.")
+
+
+def lint_kpi_labels(cfg):
+    """Подпись KPI начинается с прописной (Michelle v4.0: капитализация не пляшет)."""
+    import re as _re
+    for i, k in enumerate(cfg.get("kpis") or []):
+        lbl = (k or {}).get("label") or ""
+        if lbl and _re.match(r"^[а-яё]", lbl):
+            warn(f"kpis[{i}].label: подпись начинается со строчной («{lbl[:30]}») — начните с прописной.")
+
+
+def lint_deprecated(cfg):
+    """Устаревшие поля: рендерятся для старых конфигов, в новых не использовать."""
+    if cfg.get("filterKeys"):
+        warn("filterKeys: устаревшее поле — фильтры выводятся из statuses автоматически; уберите из новых конфигов.")
+    for i, n in enumerate(cfg.get("nav") or []):
+        if isinstance(n, dict) and "count" in n:
+            warn(f"nav[{i}].count: устаревшее поле — счётчики в меню не входят в контракт; уберите из новых конфигов.")
+
+
+def lint_nav_groups(cfg):
+    """Группы разделов: заголовок собирает пункты, идущие ПОДРЯД.
+
+    Одинаковое значение group у пунктов, разнесённых по списку, рисует два
+    одинаковых заголовка — читатель видит две группы с одним именем и решает,
+    что это разные вещи. Рантайм здесь честен: он ставит заголовок там, где
+    группа сменилась, и склеивать разорванный список за продукт не будет —
+    порядок разделов принадлежит продукту.
+    """
+    nav = [n for n in (cfg.get("nav") or []) if isinstance(n, dict)]
+    видел, предыдущая = set(), None
+    for i, n in enumerate(nav):
+        g = n.get("group")
+        if g and g != предыдущая and g in видел:
+            warn(f"nav[{i}].group «{g}»: пункты этой группы идут не подряд — "
+                 "заголовок нарисуется дважды. Соберите их рядом.")
+        if g:
+            видел.add(g)
+        предыдущая = g
+
+    # Порог Миллера: списком без устройства читается всё, что длиннее 7 строк.
+    if len(nav) > 7 and not any(n.get("group") for n in nav):
+        warn(f"nav: {len(nav)} пунктов подряд без групп — такой список читается как "
+             "перечень ссылок, а не как устройство продукта. Поле nav[].group "
+             "собирает пункты под общими заголовками (нумерация не меняется).")
+
+
+def lint_banner_length(cfg):
+    """Баннер — предупреждение, а не место для оговорок и выводов.
+
+    Баннер стоит НАД числами: всё, что в него уходит, человек читает до первого
+    числа. Продукты складывали туда оговорки к показателям (места у числа не
+    было) — на одном экране это дало 716 знаков сплошного текста перед данными.
+    Теперь места есть: оговорка о числе — kpis[].note, вывод раздела —
+    conclusion. Порог 200 знаков — примерно три строки на широком экране.
+    """
+    text = ((cfg.get("banner") or {}).get("text") or "").strip()
+    if len(text) > 200:
+        warn(f"banner.text: {len(text)} знаков — это абзац до первого числа. "
+             "Оговорка к показателю живёт в kpis[].note (рядом с числом), "
+             "вывод раздела — в conclusion (после таблицы); в баннере остаётся "
+             "предупреждение о том, из-за чего число соврёт.")
+
+
+def lint_key_refs(cfg):
+    """Ключи данных, которые раньше никто не сверял: колонка и разделы inbox.
+
+    Ключ с опечаткой не ломает экран: колонка просто пустая, письмо просто без
+    заголовка. Разбираться в этом продукт идёт глазами по строкам, а машина
+    сверяет за секунду. drawer.*, chart.* и columns[].sub уже проверяет
+    check_data_contract — здесь только то, чего там не было.
+    """
+    rows = ((cfg.get("table") or {}).get("rows") or [])
+    keys = set()
+    for r in rows[:200]:
+        if isinstance(r, dict):
+            keys |= {k for k in r if not k.startswith("_")}
+    if not keys:
+        return
+
+    # drawer.fields[].key и columns[].sub уже проверяются ниже, в check_data_contract.
+    for i, c in enumerate((cfg.get("table") or {}).get("columns") or []):
+        if isinstance(c, dict) and c.get("key") and c["key"] not in keys:
+            err(f"table.columns[{i}].key: «{c['key']}» нет в данных ряда — колонка будет пустой.")
+
+    inbox = cfg.get("inbox") or {}
+    for поле in ("titleKey", "subKey", "timeKey", "bodyKey"):
+        if inbox.get(поле) and inbox[поле] not in keys:
+            err(f"inbox.{поле}: «{inbox[поле]}» нет в данных ряда {sorted(keys)}")
+
+
+def lint_dashboard(cfg):
+    """Ряд графика привязывается к метрике по ИНДЕКСУ — индекс обязан существовать."""
+    db = cfg.get("dashboard") or {}
+    kpis = cfg.get("kpis") or []
+    for i, ряд in enumerate(db.get("series") or []):
+        if not isinstance(ряд, dict):
+            continue
+        ki = ряд.get("kpi", i)
+        if not isinstance(ki, int) or ki >= len(kpis):
+            err(f"dashboard.series[{i}].kpi: индекс {ki} вне диапазона kpis "
+                f"(0..{len(kpis) - 1}) — ряд не привяжется к метрике и график не откроется.")
+        if len(ряд.get("points") or []) < 2:
+            warn(f"dashboard.series[{i}]: меньше двух точек — рантайм такой ряд пропускает.")
+
+
+def lint_archetype_runtimes(cfg):
+    """Архетип может жить не в обоих рантаймах — сказать об этом до сборки."""
+    a = cfg.get("archetype") or cfg.get("layout")
+    if not a:
+        return
+    путь = os.path.join(ROOT, "archetypes", "registry.json")
+    if not os.path.exists(путь):
+        return
+    try:
+        реестр = {x["id"]: x for x in json.load(open(путь, encoding="utf-8"))["archetypes"]}
+    except (KeyError, ValueError):
+        return
+    спец = реестр.get(a)
+    if спец and "kit" not in (спец.get("runtimes") or []):
+        note(f"archetype «{a}»: реализован только в HTML-рантайме. В React-ките экран "
+             "деградирует (sections → custom, таблица → queue). Для React выберите "
+             "архетип с runtimes=kit или стройте экран на компонентах.")
+
+
+def lint_kpi_semantics(cfg):
+    """DS-016 (Töre, 28.08.2026): значение KPI повторяло число, которое подпись отменяет
+    («сводка вместо 1,5-2 ч» → значение «1,5 ч»). Значение KPI — всегда НОВОЕ (to-be)
+    состояние; старое число живёт в подписи или hint."""
+    import re as _re
+    def _nums(sv):
+        return {n.replace(",", ".") for n in _re.findall(r"\d+(?:[.,]\d+)?", str(sv or ""))}
+    for i, k in enumerate(cfg.get("kpis") or []):
+        lbl = (k or {}).get("label") or ""
+        m = _re.search(r"вместо\s+(.+)$", lbl, _re.I)
+        if not m:
+            continue
+        old = _nums(m.group(1))
+        val = _nums((k or {}).get("value"))
+        if old and val and val <= old:
+            warn(f"kpis[{i}] «{lbl[:40]}»: подпись говорит «вместо {m.group(1).strip()[:20]}», "
+                 "а значение повторяет то же число — значение KPI показывает, сколько СТАЛО; "
+                 "старое число живёт в подписи или hint.")
+
+
+def lint_rules(cfg):
+    lint_archetype(cfg)
+    lint_deprecated(cfg)
+    lint_kpi_labels(cfg)
+    lint_kpi_semantics(cfg)
+    lint_nav_groups(cfg)
+    lint_banner_length(cfg)
+    lint_key_refs(cfg)
+    lint_dashboard(cfg)
+    lint_archetype_runtimes(cfg)
+    statuses = cfg.get("statuses", {})
+    status_keys = set(statuses.keys())
+    table = cfg.get("table", {})
+    cols = table.get("columns", [])
+    col_keys = {c["key"] for c in cols if "key" in c}
+    status_cols = [c for c in cols if c.get("type") == "status"]
+    # данные ряда (колонки — лишь видимая выборка; drawer/sub могут ссылаться на любое поле ряда)
+    row_keys = set()
+    for row in table.get("rows", []):
+        row_keys.update(k for k in row.keys() if not str(k).startswith("_"))
+    data_keys = col_keys | row_keys
+    # col.sub должен ссылаться на реальное поле ряда
+    for c in cols:
+        if c.get("sub") and row_keys and c["sub"] not in data_keys:
+            err(f"table.columns «{c.get('key')}».sub: «{c['sub']}» нет в данных ряда {sorted(data_keys)}")
+
+    # tone уже проверен enum'ом в схеме.
+    if len(status_cols) > 1:
+        warn(f"table: {len(status_cols)} колонок type=status; обычно одна workflow-колонка.")
+
+    # целостность статусов в рядах
+    for i, row in enumerate(table.get("rows", [])):
+        for sc in status_cols:
+            v = row.get(sc["key"])
+            if v is not None and v not in status_keys:
+                err(f"table.rows[{i}].{sc['key']}: статус «{v}» не объявлен в statuses {sorted(status_keys)}")
+
+    # scenario переходы → существующие статусы
+    sc = cfg.get("scenario", {})
+    for fld in ("approveTo", "rejectTo"):
+        v = sc.get(fld)
+        if v and v not in status_keys:
+            err(f"scenario.{fld}: «{v}» не объявлен в statuses {sorted(status_keys)}")
+    if "scenario" in cfg and not sc.get("control"):
+        err("scenario.control: если задан scenario, в нём должно быть одно главное (primary) действие.")
+
+    # drawer ключи → поля ряда (колонки + любые поля строки)
+    dr = cfg.get("drawer", {})
+    if dr.get("titleKey") and data_keys and dr["titleKey"] not in data_keys:
+        err(f"drawer.titleKey: «{dr['titleKey']}» нет в данных ряда {sorted(data_keys)}")
+    for j, f in enumerate(dr.get("fields", [])):
+        if f.get("key") and data_keys and f["key"] not in data_keys:
+            err(f"drawer.fields[{j}].key: «{f['key']}» нет в данных ряда {sorted(data_keys)}")
+
+    # chart ключи → реальные колонки/поля ряда (как column.sub/drawer — единый класс проверок)
+    ch = cfg.get("chart", {}) or {}
+    if ch.get("dateKey") and data_keys and ch["dateKey"] not in data_keys:
+        err(f"chart.dateKey: «{ch['dateKey']}» нет в данных ряда {sorted(data_keys)}")
+    if ch.get("groupBy") and data_keys and ch["groupBy"] not in data_keys:
+        err(f"chart.groupBy: «{ch['groupBy']}» нет в данных ряда {sorted(data_keys)}")
+    if ch.get("bucket") == "day" and not ch.get("dateKey"):
+        err("chart.bucket=\"day\": требуется chart.dateKey (колонка-дата для раскатки по дням).")
+
+    # banner.actionNav → существующий индекс nav
+    bn = cfg.get("banner", {}) or {}
+    nav_len = len(cfg.get("nav", []) or [])
+    if bn.get("actionNav") is not None and nav_len and not (0 <= bn["actionNav"] < nav_len):
+        err(f"banner.actionNav: индекс {bn['actionNav']} вне диапазона nav (0..{nav_len - 1}).")
+
+    # nav/onboarding иконки → существуют в спрайте (опечатка иначе рендерит пустую иконку)
+    ids = sprite_ids()
+    if ids:
+        for k, n in enumerate(cfg.get("nav", []) or []):
+            if n.get("icon") and n["icon"] not in ids:
+                warn(f"nav[{k}].icon: «{n['icon']}» нет в спрайте icons/kt-ai-lucide-sprite.svg")
+        for k, o in enumerate(cfg.get("onboarding", []) or []):
+            if o.get("icon") and o["icon"] not in ids:
+                warn(f"onboarding[{k}].icon: «{o['icon']}» нет в спрайте icons/kt-ai-lucide-sprite.svg")
+
+    # запрет project-метрик на операционном дашборде
+    view = cfg.get("product", {}).get("view", "operational")
+    if view == "operational":
+        for k, kpi in enumerate(cfg.get("kpis", [])):
+            blob = f"{kpi.get('value','')} {kpi.get('label','')}"
+            if FORBIDDEN_METRIC.search(blob):
+                warn(f"kpis[{k}] «{kpi.get('label','')}»: похоже на ROI/FTE/экономию — это метрика проекта. "
+                     f"Перенесите в product.view=management или замените на рабочее число (очередь, риск, просрочка).")
+
+    # debug-язык + проповеднический/мета-копирайт в пользовательских строках
+    for p, s in iter_user_strings(cfg):
+        if DEBUG_LANG.search(s):
+            warn(f"{p}: служебная формулировка генерации в UI («{s[:50]}…»). "
+                 f"Пользователь видит продуктовый язык, не кухню сборки.")
+        if PREACHY_LANG.search(s):
+            warn(f"{p}: дисклеймер/нравоучение в UI («{s[:50]}…»). "
+                 f"Убери — решение показывают контролы (рекомендация + кнопки), а не объяснения про прототип/human-in-the-loop.")
+
+    # объём данных (только если экран вообще табличный)
+    if "table" in cfg:
+        n = len(table.get("rows", []))
+        # дневной time-series график легитимно требует плотности данных → выше потолок
+        daily = (cfg.get("chart", {}) or {}).get("bucket") == "day"
+        cap = 60 if daily else 16
+        if n < 5:
+            warn(f"table.rows: {n} строк — таблица оправдана от 5 записей; добавьте правдоподобных данных (8-12).")
+        elif n > cap:
+            warn(f"table.rows: {n} строк — для прототипа достаточно 8-12" + (" (или ≤60 для дневного графика)." if daily else "."))
+
+    # длина статус-лейблов (до 4 слов) — DoD G1
+    for key, st in statuses.items():
+        if len(st.get("label", "").split()) > 4:
+            warn(f"statuses.{key}.label: > 4 слов; длинное объяснение — в drawer.")
+
+    # DoD G1: заголовки колонок коротко (≤3 слов; деталь — в drawer)
+    for c in (table.get("columns", []) if "table" in cfg else []):
+        if len(str(c.get("label", "")).split()) > 3:
+            warn(f"table.columns «{c.get('key')}».label: > 3 слов; заголовок таблицы — рабочий объект, не описание.")
+
+    # DoD G1: KPI-полоса тихая — 2-4 главные метрики, не стена чисел
+    if len(cfg.get("kpis", []) or []) > 4:
+        warn(f"kpis: {len(cfg['kpis'])} метрик — полоса KPI отвечает на 2-4 главных вопроса; остальное в drawer/аналитику.")
+
+    # DoD G5 / закон Хика: первичные фильтры = workflow-статусы, ≤4 + «Все»
+    if len(statuses) > 5:
+        warn(f"statuses: {len(statuses)} статусов — таб-фильтр держит ≤4+«Все»; confidence/risk-type/системы не идут в первичные фильтры (Хик).")
+
+
+def iter_user_strings(cfg):
+    """Пользовательские строки (без ai.fallback — там легитимны слова про прототип)."""
+    def walk(node, path):
+        if isinstance(node, str):
+            yield path, node
+        elif isinstance(node, dict):
+            for k, v in node.items():
+                if path == "$.ai" and k == "fallback":
+                    continue
+                yield from walk(v, f"{path}.{k}")
+        elif isinstance(node, list):
+            for i, v in enumerate(node):
+                yield from walk(v, f"{path}[{i}]")
+    yield from walk(cfg, "$")
+
+
+# Нравоучение про human-in-the-loop — свой же красный флаг из CHECKLIST G4.
+# Решение показывают КОНТРОЛЫ («Согласовать», «Переписать вручную»), а не абзац
+# текста: пользователь и так видит кнопку, а абзац читает как недоверие к себе.
+#
+# Ловим ФРАЗЫ, а не корень «подтвержд». Разница принципиальна: «Тариф подтверждён
+# по SAP» и «ждёт подтверждения мастера с фото» — факты о состоянии, они нужны.
+# Нравоучение — это утверждение ПОЛИТИКИ («ни один договор не уходит без…»),
+# которое ничего не сообщает о конкретной записи.
+MORALIZING = re.compile(
+    r"(только после [\w\s]{0,20}подтвержд"
+    r"|без подтвержд[\w\s]{0,25}не\s"
+    r"|ни один[^.]*без подтвержд|ни одна[^.]*без подтвержд"
+    r"|подтверждает только"
+    r"|агент ничего не (отправляет|делает)"
+    r"|не действует сам|решение (за вами|принимаете вы)"
+    r"|проверьте факты|это (лишь )?прототип|данные иллюстративны"
+    r"|контроль человека|подтверждает человек)", re.I)
+
+
+def lint_moralizing(cfg):
+    for path, val in iter_user_strings(cfg):
+        for sent in re.split(r"(?<=[.!?])\s+", val):
+            m = MORALIZING.search(sent)
+            if m:
+                err(f"{path}: нравоучение про human-in-the-loop — «{sent.strip()[:70]}». "
+                    f"Решение показывают контролы, а не абзац текста (CHECKLIST G4).")
+
+
+def check_one(cfg_path, schema, strict):
+    """Проверяет один конфиг. Возвращает True, если он ПРОВАЛИЛСЯ."""
+    global ERRORS, WARNINGS, NOTES
+    ERRORS, WARNINGS, NOTES = [], [], []   # глобальные списки — обнуляем на каждый файл
+
+    try:
+        cfg = json.load(open(cfg_path, encoding="utf-8"))
+    except (OSError, json.JSONDecodeError) as e:
+        print(f"  ✗ ERROR  {os.path.basename(cfg_path)}: не читается — {e}")
+        return True
+
+    validate_schema(cfg, schema)
+    lint_moralizing(cfg)
+    if not ERRORS:                     # lint только на структурно валидном конфиге
+        lint_rules(cfg)
+
+    name = os.path.basename(cfg_path)
+    for e in ERRORS:
+        print(f"  ✗ ERROR  {e}")
+    for n in NOTES:
+        print(f"  ℹ ЗАМЕТКА  {n}")
+    for w in WARNINGS:
+        print(f"  ⚠ WARN   {w}")
+
+    fail = bool(ERRORS) or (strict and WARNINGS)
+    status = "FAIL" if fail else ("OK с замечаниями" if WARNINGS else "OK")
+    print(f"{name}: {status} — {len(ERRORS)} ошибок, {len(WARNINGS)} предупреждений")
+    if WARNINGS and not strict:
+        print("  → handoff/CI: прогоните с --strict, чтобы предупреждения честности стали блокирующими.")
+    return fail
+
+
+def main():
+    args = [a for a in sys.argv[1:] if not a.startswith("--")]
+    strict = "--strict" in sys.argv
+    if not args:
+        print("usage: validate_product.py <config.json | 'glob/**/*.config.json'> [--strict]",
+              file=sys.stderr)
+        return 2
+
+    # Глоб раскрываем САМИ: гейт из доков — "app/**/*.config.json" в кавычках,
+    # то есть шелл его не раскрывает, и раньше это падало FileNotFoundError
+    # на литеральной строке. Кавычки нужны, иначе шелл подставит только первый файл.
+    targets, schema_arg = [], None
+    for a in args:
+        if any(ch in a for ch in "*?[") or os.path.isdir(a):
+            pattern = os.path.join(a, "**", "*.config.json") if os.path.isdir(a) else a
+            targets.extend(sorted(glob.glob(pattern, recursive=True)))
+        elif a.endswith(".schema.json"):
+            schema_arg = a
+        else:
+            targets.append(a)
+
+    if not targets:
+        print(f"Не найдено ни одного конфига по: {' '.join(args)}", file=sys.stderr)
+        return 2
+
+    schema_path = schema_arg or os.path.join(ROOT, "product.schema.json")
+    schema = json.load(open(schema_path, encoding="utf-8"))
+
+    failed = [t for t in targets if check_one(t, schema, strict)]
+
+    if len(targets) > 1:
+        print(f"\nИтого: {len(targets) - len(failed)}/{len(targets)} прошло"
+              + (f", упало: {', '.join(os.path.basename(f) for f in failed)}" if failed else ""))
+    return 1 if failed else 0
+
+
+if __name__ == "__main__":
+    sys.exit(main())
diff --git a/design-system/templates/kt-ai-app-shell.html b/design-system/templates/kt-ai-app-shell.html
new file mode 100644
index 0000000..2345da4
--- /dev/null
+++ b/design-system/templates/kt-ai-app-shell.html
@@ -0,0 +1,2090 @@
+<!DOCTYPE html>
+<html lang="ru" data-theme="light">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>KT AI – прототип</title>
+<!-- ПРЕФИКС РАЗВЁРТЫВАНИЯ. Статика кита адресуется от корня ПРИЛОЖЕНИЯ, а не
+     от корня сайта: под префиксом (/cons, /dkks) файлы лежат за ним, и путь
+     «/design-system/…» уводит запрос в корень домена — 404, страница без
+     стилей и мёртвый орб. Префикс — одно свойство развёртывания, поэтому и
+     место у него одно: атрибут data-kt-ai-base на <html>. Папка статики —
+     data-kt-ai-static (по умолчанию /design-system, как было).
+
+       <html lang="ru" data-theme="light" data-kt-ai-base="/cons">
+
+     Теги пишет скрипт, а не разметка: адрес уже разобранного <link> изменить
+     нельзя — браузер начинает грузить его сразу, и под префиксом это был бы
+     гарантированный 404 перед правильным запросом. -->
+<script data-kt-ai-base-resolver>
+(function () {
+  var корень = document.documentElement;
+  function норм(значение) {
+    значение = (значение || "").trim();
+    if (!значение || значение === "/") return "";
+    if (значение.charAt(0) !== "/") значение = "/" + значение;
+    return значение.replace(/\/+$/, "");
+  }
+  var база = норм(корень.getAttribute("data-kt-ai-base"));
+  var папка = норм(корень.getAttribute("data-kt-ai-static")) || "/design-system";
+  window.ktAiBase = база;
+  window.ktAiAsset = function (имя) {
+    return /^([a-z][a-z0-9+.-]*:|\/\/)/i.test(имя) ? имя : база + папка + "/" + имя;
+  };
+})();
+</script>
+<script data-kt-ai-boot="css">
+["kt-ai-tokens.css", "kt-ai-components.css"].forEach(function (файл) {
+  var ссылка = document.createElement("link");
+  ссылка.rel = "stylesheet";
+  ссылка.href = window.ktAiAsset(файл);
+  document.head.appendChild(ссылка);
+});
+</script>
+<!-- ============================================================
+  KT AI App Shell – boilerplate типового enterprise SaaS.
+  Гидрируется из JSON-конфига (тег script#kt-app-config в body) –
+  его генерирует дизайнер-LLM AI Interviewer по brief владельца.
+  Кликабельность встроена: поиск, фильтр статусов, drawer по клику
+  на ряд, контрольное действие с подтверждением, bulk-select,
+  AI-панель с подсказками, переключатель темы, ⌘K – фокус поиска.
+  Схема конфига – см. демо ниже (все ключи опциональны, кроме
+  product/table). Канон: ../docs/DESIGN.md · ../docs/PRODUCT_CONTRACT.md · product.schema.json
+============================================================ -->
+<style>
+@layer product {
+  *, *::before, *::after { box-sizing: border-box; }
+  body { margin: 0; }
+  .shell-topbar-burger { display: none; }
+  @media (max-width: 831.98px) { .shell-topbar-burger { display: inline-flex; } }
+  /* Sidebar: верх – лого + имя решения + toggle; низ – сервисные ряды (Attio-паттерн) */
+  .sb-top { display: flex; align-items: center; gap: var(--kt-ai-space-3); padding: 2px 4px 12px; }
+  .sb-top img { width: 28px; height: 28px; border-radius: var(--kt-ai-radius-xl); flex-shrink: 0; }
+  .sb-top .nm { font-weight: var(--kt-ai-weight-semibold); font-size: var(--kt-ai-text-sm); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
+  .sb-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
+  .sb-bottom .badge { margin-left: auto; font-family: var(--kt-ai-font-mono); font-size: var(--kt-ai-text-2xs); background: var(--kt-ai-primary-subtle); color: var(--kt-ai-primary); border-radius: var(--kt-ai-radius-full); padding: 0 6px; }
+  /* Низ сайдбара: тур-карточка + утилиты (Помощь, Отзыв) — паттерн ElevenLabs */
+  .sb-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: var(--kt-ai-space-4); }
+  .sb-bottom button { background: none; border: none; font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; }
+  .sb-bottom .sb-tour { display: flex; align-items: flex-start; gap: var(--kt-ai-space-4); padding: var(--kt-ai-space-4); margin-bottom: var(--kt-ai-space-3); border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-xl); background: var(--kt-ai-bg-elevated); transition: background var(--kt-ai-dur-fast) var(--kt-ai-ease-standard); }
+  .sb-bottom .sb-tour:hover { background: var(--kt-ai-bg-soft); }
+  .sb-tour .ic { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--kt-ai-radius-lg); background: var(--kt-ai-primary-subtle); color: var(--kt-ai-primary); }
+  .sb-tour .tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
+  .sb-tour .tx strong { font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-semibold); color: var(--kt-ai-fg); }
+  .sb-tour .tx span { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); }
+  /* Политика рейла ДС (kt-ai-components.css, @media max-width 1023.98px) сюда
+     не дотягивается: компоненты лежат в @layer, а этот блок — беcслойный, и
+     беcслойное правило побеждает слоёное независимо от специфичности. Поэтому
+     свою часть рейла app-shell закрывает сам: в 52px от блока тура остаётся
+     иконка, подпись убирается. */
+  /* Диапазон задан С ДВУХ сторон: ниже 832px сайдбар — выдвижная панель во всю
+     ширину, и место под подпись там есть. Без нижней границы блок доставал до
+     телефона и оставлял от карточки тура одну иконку в панели на 232px — тот же
+     дефект, что был в политике рейла самой ДС (закрыт в 6.4.0). */
+  @media (min-width: 832px) and (max-width: 1023.98px) {
+    .sb-bottom .sb-tour { justify-content: center; padding: var(--kt-ai-space-3); border: 0; background: none; }
+    .sb-tour .tx { display: none; }
+  }
+  .sb-util[data-on="true"] { color: var(--kt-ai-primary); background: var(--kt-ai-primary-subtle); }
+  .kt-ai-shell[data-rail="true"] .sb-tour { justify-content: center; padding: var(--kt-ai-space-3); }
+  .kt-ai-shell[data-rail="true"] .sb-tour .tx { display: none; }
+  /* Онбординг-карусель (первый вход) */
+  .onb-card { position: relative; width: 420px; max-width: calc(100vw - 32px); background: var(--kt-ai-bg-elevated); border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-3xl); box-shadow: var(--kt-ai-shadow-lg); padding: var(--kt-ai-space-8); text-align: center; }
+  .onb-x { position: absolute; top: var(--kt-ai-space-4); right: var(--kt-ai-space-4); }
+  .onb-ic { width: 56px; height: 56px; margin: 0 auto var(--kt-ai-space-6); display: grid; place-items: center; border-radius: var(--kt-ai-radius-2xl); background: var(--kt-ai-primary-subtle); color: var(--kt-ai-primary); }
+  .onb-ic .kt-icon { width: 26px; height: 26px; }
+  .onb-title { font-size: var(--kt-ai-text-xl); font-weight: var(--kt-ai-weight-semibold); margin-bottom: var(--kt-ai-space-4); }
+  .onb-text { font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); line-height: var(--kt-ai-leading-normal); margin-bottom: var(--kt-ai-space-7); }
+  .onb-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--kt-ai-space-5); }
+  .onb-dots { display: flex; gap: 6px; }
+  .onb-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--kt-ai-border-strong); transition: background var(--kt-ai-dur-fast), width var(--kt-ai-dur-fast); }
+  .onb-dots span.on { background: var(--kt-ai-primary); width: 18px; border-radius: 3px; }
+  .onb-btns { display: flex; gap: var(--kt-ai-space-3); }
+  .menu-up .kt-ai-menu { top: auto; bottom: calc(100% + 4px); right: auto; left: 0; }
+  /* Ручной rail-режим (toggle в sb-top) */
+  .kt-ai-shell[data-rail="true"] { grid-template-columns: var(--kt-ai-sidebar-collapsed-width) minmax(0, 1fr); }
+  .kt-ai-shell[data-rail="true"] .nav-label, .kt-ai-shell[data-rail="true"] .kt-ai-nav-item .count,
+  .kt-ai-shell[data-rail="true"] .sb-top .nm, .kt-ai-shell[data-rail="true"] .sb-bottom .badge { display: none; }
+  .kt-ai-shell[data-rail="true"] .kt-ai-nav-item { justify-content: center; padding: 0; }
+  .kt-ai-shell[data-rail="true"] .sb-top { flex-direction: column; gap: var(--kt-ai-space-3); padding-left: 0; padding-right: 0; }
+  /* Төре-орб: кнопка ассистента в топбаре рядом с поиском */
+  .topbar-ai {
+    display: inline-flex; align-items: center; gap: var(--kt-ai-space-2); flex-shrink: 0;
+    height: 32px; padding: 0 var(--kt-ai-space-4); border-radius: var(--kt-ai-radius-full);
+    border: 1px solid var(--kt-ai-border-strong); background: var(--kt-ai-bg-elevated); color: var(--kt-ai-fg);
+    cursor: pointer; font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-medium);
+    transition: background var(--kt-ai-dur-fast);
+  }
+  .topbar-ai:hover { background: var(--kt-ai-bg-hover); }
+  .topbar-ai .orb { width: 16px; height: 16px; border-radius: 50%; background: var(--kt-ai-ai-orb); flex-shrink: 0; }
+  @media (max-width: 639.98px) { .topbar-ai { padding: 0; width: 32px; justify-content: center; } .topbar-ai .ai-label { display: none; } }
+  /* Топбар: заголовок страницы слева */
+  .topbar-title { display: flex; align-items: baseline; gap: var(--kt-ai-space-4); min-width: 0; }
+  .topbar-title .t { font-size: var(--kt-ai-text-lg); font-weight: var(--kt-ai-weight-semibold); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .topbar-title .sub { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); white-space: nowrap; }
+  @media (max-width: 639.98px) { .topbar-title .sub { display: none; } }
+  /* :not([data-compact]) — чтобы потолок шапки не перебивал компактный вариант:
+     у него своя ширина, и она меньше. */
+  .kt-ai-topbar .kt-ai-search-field:not([data-compact="true"]) { max-width: 240px; }
+  @media (max-width: 767.98px) { .kt-ai-topbar .kt-ai-search-field:not([data-compact="true"]) { max-width: 176px; } }
+  /* Рабочая область: больше воздуха сверху (как в React-ките) */
+  #view { width: 100%; max-width: var(--kt-ai-content-table); margin-inline: auto; padding: var(--kt-ai-stack-region) var(--kt-ai-stack-region) var(--kt-ai-space-11); }
+  @media (max-width: 639.98px) { #view { padding: var(--kt-ai-stack-group) var(--kt-ai-space-6) var(--kt-ai-space-10); } }
+  /* Hero-заголовок страницы: лого + крупное имя продукта + подпись (паритет с React KTAIShell) */
+  .page-hero { display: flex; align-items: flex-start; gap: var(--kt-ai-space-6); margin-bottom: var(--kt-ai-stack-group); }
+  .page-hero .ph-text { flex: 1; min-width: 0; }
+  .page-hero h1 { margin: 0; font-size: var(--kt-ai-text-2xl); font-weight: var(--kt-ai-weight-semibold); letter-spacing: -.01em; line-height: 1.15; }
+  .page-hero .sub { margin-top: var(--kt-ai-space-3); font-size: var(--kt-ai-text-md); color: var(--kt-ai-fg-muted); }
+  .page-hero .ph-action { flex-shrink: 0; }
+  @media (max-width: 639.98px) { .page-hero { flex-direction: column; gap: var(--kt-ai-space-5); } .page-hero h1 { font-size: var(--kt-ai-text-2xl); } }
+  .topbar-crumb { display: flex; align-items: center; gap: var(--kt-ai-space-3); min-width: 0; font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); }
+  .topbar-crumb span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .shell-panel-toggle { display: inline-flex; }
+  @media (max-width: 831.98px) { .shell-panel-toggle { display: none; } }
+  /* Кнопка создания – вверху sidebar (под брендом), на всю ширину */
+  .sb-new { margin: 0 4px var(--kt-ai-space-5); }
+  .sb-new .kt-ai-btn { width: 100%; justify-content: center; }
+  .kt-ai-shell[data-rail="true"] .sb-new .kt-ai-btn { padding: 0; }
+  /* Сетка сервисных рядов внизу: единый слот 20px под иконку/аватар – подписи на одной оси */
+  .sb-bottom .kt-ai-nav-item > .kt-icon { flex: 0 0 20px; }
+  .sb-bottom .kt-ai-avatar { width: 20px; height: 20px; font-size: 8px; flex: 0 0 20px; }
+  .sb-bottom > div:last-child { padding: var(--kt-ai-space-3) var(--kt-ai-space-4) 0; }
+  /* Мастер создания: степпер + загрузка */
+  .case-steps { margin-bottom: var(--kt-ai-space-6); overflow-x: auto; padding-bottom: 2px; }
+  .case-file { margin-top: var(--kt-ai-space-4); }
+  .menu-user { padding: var(--kt-ai-space-3) var(--kt-ai-space-4); }
+  .menu-user .nm { font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-medium); color: var(--kt-ai-fg); }
+  .menu-user .role { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); }
+  .notif-menu { min-width: 300px; max-width: 340px; padding: 0; }
+  .notif-menu .head { padding: var(--kt-ai-space-4) var(--kt-ai-space-5); font-size: var(--kt-ai-text-xs); font-weight: var(--kt-ai-weight-semibold); border-bottom: 1px solid var(--kt-ai-divider); }
+  .guide-steps { display: flex; flex-direction: column; gap: var(--kt-ai-space-4); margin: var(--kt-ai-space-5) 0; }
+  .guide-steps .gs { display: flex; gap: var(--kt-ai-space-4); font-size: var(--kt-ai-text-sm); align-items: flex-start; }
+  .guide-steps .gs .n { width: 20px; height: 20px; border-radius: 50%; background: var(--kt-ai-primary-subtle); color: var(--kt-ai-primary); font-size: var(--kt-ai-text-2xs); font-weight: var(--kt-ai-weight-bold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
+  #view > .kt-ai-kpi-strip { margin-bottom: var(--kt-ai-stack-block); }
+  .toolbar-row { display: flex; align-items: center; gap: var(--kt-ai-space-4); flex-wrap: wrap; padding: 0 0 var(--kt-ai-stack-block); }
+  .toolbar-row .spacer { flex: 1; }
+  .drawer-head { display: flex; align-items: flex-start; gap: var(--kt-ai-space-4); margin-bottom: var(--kt-ai-space-6); }
+  .drawer-head .t { flex: 1; }
+  .drawer-flags { display: flex; flex-direction: column; gap: var(--kt-ai-space-3); margin: var(--kt-ai-space-6) 0; }
+  .drawer-actions { display: flex; flex-direction: column; gap: var(--kt-ai-space-4); margin-top: var(--kt-ai-space-8); }
+  /* v4.0 (Michelle): в рабочей области пара решения – инлайн, primary справа; стек – только в боковом drawer и на узких экранах */
+  .kt-ai-card .drawer-actions { flex-direction: row-reverse; justify-content: flex-start; }
+  .kt-ai-card .drawer-actions .kt-ai-btn { width: auto; }
+  @media (max-width: 639.98px) { .kt-ai-card .drawer-actions { flex-direction: column; } }
+  .ai-panel { display: flex; flex-direction: column; }
+  .ai-panel .kt-ai-chat { flex: 1; overflow-y: auto; padding-bottom: var(--kt-ai-space-6); }
+  .ai-panel-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--kt-ai-space-4); }
+  .section-stub { margin-top: var(--kt-ai-space-10); }
+  .proto-label { margin-left: auto; }
+  td .kt-ai-checkbox input, th .kt-ai-checkbox input { margin: 0; }
+  /* колонка уверенности агента: мини-метр + процент, тон по уровню */
+  .conf-cell { display: inline-flex; align-items: center; gap: var(--kt-ai-space-3); }
+  .conf-bar { width: 46px; height: 6px; border-radius: var(--kt-ai-radius-full); background: var(--kt-ai-bg-sunken); overflow: hidden; flex-shrink: 0; }
+  .conf-bar > span { display: block; height: 100%; border-radius: var(--kt-ai-radius-full); }
+  .conf-cell[data-tone="ok"] .conf-bar > span { background: var(--kt-ai-status-ok-fg); }
+  .conf-cell[data-tone="warn"] .conf-bar > span { background: var(--kt-ai-status-warn-fg); }
+  .conf-cell[data-tone="risk"] .conf-bar > span { background: var(--kt-ai-status-risk-fg); }
+  .conf-pct { font-family: var(--kt-ai-font-mono); font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); }
+  .topbar-dot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--kt-ai-primary); }
+  .kt-ai-topbar .kt-ai-menu { right: 0; left: auto; top: calc(100% + 6px); }
+  /* Карточка кейса: разделы «что сделал агент» / «решение человека» (ElevenLabs detail) */
+  .drawer-sec { padding: var(--kt-ai-space-6) 0; border-top: 1px solid var(--kt-ai-divider); }
+  .drawer-sec:first-of-type { border-top: none; padding-top: 0; }
+  .drawer-sec.decision { border-top: 2px solid var(--kt-ai-border-strong); }
+  .agent-summary { margin: var(--kt-ai-space-4) 0; font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); line-height: var(--kt-ai-leading-normal); }
+  .agent-signal { display: flex; gap: var(--kt-ai-space-4); align-items: flex-start; padding: var(--kt-ai-space-3) 0; font-size: var(--kt-ai-text-sm); }
+  .agent-signal svg { color: var(--kt-ai-fg-faint); flex-shrink: 0; margin-top: 2px; }
+  .rec-box { display: flex; flex-direction: column; background: var(--kt-ai-primary-subtle); border-radius: var(--kt-ai-radius-2xl); padding: var(--kt-ai-space-5); font-size: var(--kt-ai-text-sm); margin-top: var(--kt-ai-space-4); }
+  .cell-title { font-weight: var(--kt-ai-weight-medium); }
+  .cell-sub { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .row-act { text-align: right; }
+  .row-kebab { opacity: 0; transition: opacity var(--kt-ai-dur-fast); }
+  .kt-ai-table tbody tr:hover .row-kebab { opacity: 1; }
+}
+</style>
+</head>
+<body class="kt-ai-app">
+
+<script id="kt-app-config" type="application/json">
+{
+  "product": { "name": "Договоры аренды", "purpose": "Кабинет юриста · ОЦО ЮС", "entity": "договор" },
+  "user": { "name": "Нургуль Турлыбекова", "role": "Руководитель службы правового обеспечения" },
+  "notifications": [
+    { "text": "Агент подготовил 2 новых проекта договора", "time": "5 мин", "unread": true },
+    { "text": "Филиал Жезказган прислал кадастровые данные", "time": "1 ч", "unread": true },
+    { "text": "Договор АР-2026-0609 согласован в Лотусе", "time": "вчера", "unread": false }
+  ],
+  "steps": { "items": ["Заявка", "Проект агента", "Проверка юриста", "Согласование"], "current": 3 },
+  "nav": [
+    { "label": "Очередь проверки" },
+    { "label": "Реестр договоров" },
+    { "label": "Контрагентские версии" },
+    { "label": "Отчёты" }
+  ],
+  "kpis": [
+    { "value": "80", "label": "договоров / мес" },
+    { "value": "20–30 мин", "label": "проверка вместо 3–4 ч" },
+    { "value": "4", "label": "юриста в службе" }
+  ],
+  "scenario": {
+    "headline": "Очередь проверки",
+    "control": "Подтвердить и отправить на согласование",
+    "reject": "Вернуть на доработку",
+    "confirmText": "Договор уйдёт в Лотус на круг согласования.",
+    "approveTo": "approved",
+    "rejectTo": "waiting"
+  },
+  "statuses": {
+    "ready":    { "label": "готов к проверке", "tone": "info" },
+    "flags":    { "label": "есть флаги",       "tone": "warn" },
+    "waiting":  { "label": "ждёт данных",      "tone": "risk" },
+    "approved": { "label": "подтверждён",      "tone": "ok" }
+  },
+  "table": {
+    "columns": [
+      { "key": "obj",    "label": "Объект аренды", "type": "text" },
+      { "key": "branch", "label": "Филиал-инициатор" },
+      { "key": "sum",    "label": "Сумма, ₸/мес", "type": "num" },
+      { "key": "date",   "label": "Заявка",       "type": "date" },
+      { "key": "status", "label": "Статус",       "type": "status" }
+    ],
+    "rows": [
+      { "obj": "Помещение, пр. Абая 31",   "branch": "Алматы",       "sum": "1 240 000", "date": "10.06.2026", "status": "ready",
+        "_flags": ["Тариф подтверждён по SAP", "Полномочия подписанта проверены", "80% текста – типовой шаблон"] },
+      { "obj": "Офис, ул. Сатпаева 18",     "branch": "Астана",       "sum": "2 180 000", "date": "09.06.2026", "status": "flags",
+        "_flags": ["Тариф в заявке ниже актуального тарифа SAP – подставлен тариф SAP", "Срок аренды 11 мес – нетиповой"] },
+      { "obj": "Площадка, ул. Алашахана 2", "branch": "Жезказган",    "sum": "640 000",   "date": "09.06.2026", "status": "waiting",
+        "_flags": ["Нет кадастровых данных объекта – запрос отправлен инициатору"] },
+      { "obj": "Помещение, ул. Гоголя 39",  "branch": "Алматы",       "sum": "1 870 000", "date": "08.06.2026", "status": "ready",
+        "_flags": ["Проверки пройдены, отклонений нет"] },
+      { "obj": "Склад, ул. Театральная 4",  "branch": "Караганда",    "sum": "980 000",   "date": "07.06.2026", "status": "flags",
+        "_flags": ["Контрагентская версия: 3 отклонения от шаблона – п. 4.2, 6.1, 9.3"] },
+      { "obj": "Офис, ул. Айтеке би 12",    "branch": "Кызылорда",    "sum": "450 000",   "date": "06.06.2026", "status": "approved",
+        "_flags": [] },
+      { "obj": "АТС, ул. Ауэзова 141",      "branch": "Шымкент",      "sum": "1 320 000", "date": "05.06.2026", "status": "ready",
+        "_flags": ["Тариф подтверждён по SAP"] },
+      { "obj": "Помещение, ул. Желтоксан 2","branch": "Тараз",        "sum": "720 000",   "date": "04.06.2026", "status": "approved",
+        "_flags": [] }
+    ]
+  },
+  "drawer": {
+    "titleKey": "obj",
+    "fields": [
+      { "key": "branch", "label": "Филиал-инициатор" },
+      { "key": "sum",    "label": "Сумма по тарифу SAP" },
+      { "key": "date",   "label": "Дата заявки (Лотус)" }
+    ],
+    "flagsLabel": "Проверки агента"
+  },
+  "ai": {
+    "intro": "Проект договора готов: данные заявки из Лотуса, тариф из SAP, проверка по ГК РК и внутренним документам пройдена. Спросите про любой флаг.",
+    "suggestions": ["Почему флаг по тарифу?", "Что с кадастровыми данными?", "Покажи отклонения контрагента"],
+    "answers": {
+      "Почему флаг по тарифу?": "Тариф в заявке филиала ниже актуального тарифа SAP. По правилу «тариф всегда из SAP» я подставил актуальное значение и пометил расхождение флагом.",
+      "Что с кадастровыми данными?": "В заявке филиала нет кадастровых данных объекта. Я отправил запрос инициатору в Лотусе; договор остаётся в статусе «ждёт данных».",
+      "Покажи отклонения контрагента": "Контрагентская версия отличается от шаблона в трёх пунктах: 4.2 (срок оплаты 15 → 30 дней), 6.1 (ответственность сторон), 9.3 (порядок расторжения). Полный diff – в карточке договора."
+    },
+    "fallback": "В кликабельном прототипе ответы ассистента – заглушки. В рабочей версии здесь отвечает ИИ-агент по данным договора."
+  }
+}
+</script>
+
+<!-- embedded KT AI icon sprite (Lucide, monochrome) -->
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="position:absolute;width:0;height:0;overflow:hidden">
+  <symbol id="home" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/>
+    <path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
+  </symbol>
+  <symbol id="chat" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22z"/>
+  </symbol>
+  <symbol id="send" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/>
+    <path d="m21.854 2.147-10.94 10.939"/>
+  </symbol>
+  <symbol id="feed" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M4 11a9 9 0 0 1 9 9"/>
+    <path d="M4 4a16 16 0 0 1 16 16"/>
+    <circle cx="5" cy="19" r="1"/>
+  </symbol>
+  <symbol id="lots" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="10"/>
+    <circle cx="12" cy="12" r="1"/>
+  </symbol>
+  <symbol id="source" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <ellipse cx="12" cy="5" rx="9" ry="3"/>
+    <path d="M3 5V19A9 3 0 0 0 21 19V5"/>
+    <path d="M3 12A9 3 0 0 0 21 12"/>
+  </symbol>
+  <symbol id="catalog" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12 7v14"/>
+    <path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/>
+  </symbol>
+  <symbol id="decisions" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M13 5h8"/>
+    <path d="M13 12h8"/>
+    <path d="M13 19h8"/>
+    <path d="m3 17 2 2 4-4"/>
+    <path d="m3 7 2 2 4-4"/>
+  </symbol>
+  <symbol id="risk" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/>
+    <path d="M12 8v4"/>
+    <path d="M12 16h.01"/>
+  </symbol>
+  <symbol id="recommender" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="10"/>
+    <circle cx="12" cy="12" r="6"/>
+    <circle cx="12" cy="12" r="2"/>
+  </symbol>
+  <symbol id="compare" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="18" cy="18" r="3"/>
+    <circle cx="6" cy="6" r="3"/>
+    <path d="M13 6h3a2 2 0 0 1 2 2v7"/>
+    <path d="M11 18H8a2 2 0 0 1-2-2V9"/>
+  </symbol>
+  <symbol id="collections" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/>
+  </symbol>
+  <symbol id="search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="m21 21-4.34-4.34"/>
+    <circle cx="11" cy="11" r="8"/>
+  </symbol>
+  <symbol id="settings" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M10 5H3"/>
+    <path d="M12 19H3"/>
+    <path d="M14 3v4"/>
+    <path d="M16 17v4"/>
+    <path d="M21 12h-9"/>
+    <path d="M21 19h-5"/>
+    <path d="M21 5h-7"/>
+    <path d="M8 10v4"/>
+    <path d="M8 12H3"/>
+  </symbol>
+  <symbol id="chart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M3 3v16a2 2 0 0 0 2 2h16"/>
+    <path d="M7 16h8"/>
+    <path d="M7 11h12"/>
+    <path d="M7 6h3"/>
+  </symbol>
+  <symbol id="table" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18"/>
+  </symbol>
+  <symbol id="sort" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="m21 16-4 4-4-4"/>
+    <path d="M17 20V4"/>
+    <path d="m3 8 4-4 4 4"/>
+    <path d="M7 4v16"/>
+  </symbol>
+  <symbol id="filter" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"/>
+  </symbol>
+  <symbol id="download" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12 15V3"/>
+    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+    <path d="m7 10 5 5 5-5"/>
+  </symbol>
+  <symbol id="chevronRight" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="m9 18 6-6-6-6"/>
+  </symbol>
+  <symbol id="external" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M15 3h6v6"/>
+    <path d="M10 14 21 3"/>
+    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
+  </symbol>
+  <symbol id="help" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <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"/>
+  </symbol>
+  <symbol id="history" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <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"/>
+    <path d="M12 7v5l4 2"/>
+  </symbol>
+  <symbol id="info" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="10"/>
+    <path d="M12 16v-4"/>
+    <path d="M12 8h.01"/>
+  </symbol>
+  <symbol id="users" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
+    <path d="M16 3.128a4 4 0 0 1 0 7.744"/>
+    <path d="M22 21v-2a4 4 0 0 0-3-3.87"/>
+    <circle cx="9" cy="7" r="4"/>
+  </symbol>
+  <symbol id="file" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/>
+    <path d="M14 2v5a1 1 0 0 0 1 1h5"/>
+    <path d="M10 9H8"/>
+    <path d="M16 13H8"/>
+    <path d="M16 17H8"/>
+  </symbol>
+  <symbol id="tool" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"/>
+  </symbol>
+  <symbol id="model" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12 20v2"/>
+    <path d="M12 2v2"/>
+    <path d="M17 20v2"/>
+    <path d="M17 2v2"/>
+    <path d="M2 12h2"/>
+    <path d="M2 17h2"/>
+    <path d="M2 7h2"/>
+    <path d="M20 12h2"/>
+    <path d="M20 17h2"/>
+    <path d="M20 7h2"/>
+    <path d="M7 20v2"/>
+    <path d="M7 2v2"/>
+    <rect x="4" y="4" width="16" height="16" rx="2"/>
+    <rect x="8" y="8" width="8" height="8" rx="1"/>
+  </symbol>
+  <symbol id="dashboard" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <rect width="7" height="9" x="3" y="3" rx="1"/>
+    <rect width="7" height="5" x="14" y="3" rx="1"/>
+    <rect width="7" height="9" x="14" y="12" rx="1"/>
+    <rect width="7" height="5" x="3" y="16" rx="1"/>
+  </symbol>
+  <symbol id="columns" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <rect width="18" height="18" x="3" y="3" rx="2"/>
+    <path d="M9 3v18"/>
+    <path d="M15 3v18"/>
+  </symbol>
+  <symbol id="more" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="1"/>
+    <circle cx="19" cy="12" r="1"/>
+    <circle cx="5" cy="12" r="1"/>
+  </symbol>
+  <symbol id="check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M20 6 9 17l-5-5"/>
+  </symbol>
+  <symbol id="x" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M18 6 6 18"/>
+    <path d="m6 6 12 12"/>
+  </symbol>
+  <symbol id="alert" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" 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-3"/>
+    <path d="M12 9v4"/>
+    <path d="M12 17h.01"/>
+  </symbol>
+  <symbol id="clock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="10"/>
+    <path d="M12 6v6l4 2"/>
+  </symbol>
+  <symbol id="arrowRight" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M5 12h14"/>
+    <path d="m12 5 7 7-7 7"/>
+  </symbol>
+  <symbol id="panelLeftClose" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <rect width="18" height="18" x="3" y="3" rx="2"/>
+    <path d="M9 3v18"/>
+    <path d="m16 15-3-3 3-3"/>
+  </symbol>
+  <symbol id="panelLeft" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <rect width="18" height="18" x="3" y="3" rx="2"/>
+    <path d="M9 3v18"/>
+  </symbol>
+  <symbol id="trophy" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978"/>
+    <path d="M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978"/>
+    <path d="M18 9h1.5a1 1 0 0 0 0-5H18"/>
+    <path d="M4 22h16"/>
+    <path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z"/>
+    <path d="M6 9H4.5a1 1 0 0 1 0-5H6"/>
+  </symbol>
+  <symbol id="pin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/>
+    <circle cx="12" cy="10" r="3"/>
+  </symbol>
+  <symbol id="sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="4"/>
+    <path d="M12 2v2"/>
+    <path d="M12 20v2"/>
+    <path d="m4.93 4.93 1.41 1.41"/>
+    <path d="m17.66 17.66 1.41 1.41"/>
+    <path d="M2 12h2"/>
+    <path d="M20 12h2"/>
+    <path d="m6.34 17.66-1.41 1.41"/>
+    <path d="m19.07 4.93-1.41 1.41"/>
+  </symbol>
+  <symbol id="moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"/>
+  </symbol>
+<symbol id="menu" viewBox="0 0 24 24"><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/></symbol>
+  <symbol id="book" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 7v14"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></symbol>
+  <symbol id="rocket" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><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"/></symbol>
+  <symbol id="sparkles" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .962 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.962 0z"/></symbol>
+  <symbol id="play" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polygon points="6 3 20 12 6 21 6 3"/></symbol>
+  <symbol id="lightbulb" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" 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"/></symbol>
+  <symbol id="plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5v14"/></symbol>
+  <symbol id="minus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></symbol>
+  <symbol id="chevronDown" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></symbol>
+  <symbol id="chevronLeft" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></symbol>
+  <symbol id="arrowLeft" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></symbol>
+  <symbol id="arrowUpDown" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m21 16-4 4-4-4"/><path d="M17 20V4"/><path d="m3 8 4-4 4 4"/><path d="M7 4v16"/></symbol>
+  <symbol id="eye" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></symbol>
+  <symbol id="calendar" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v4M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></symbol>
+  <symbol id="link" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><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"/></symbol>
+  <symbol id="copy" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></symbol>
+  <symbol id="trash" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></symbol>
+  <symbol id="pencil" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></symbol>
+  <symbol id="user" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></symbol>
+  <symbol id="bell" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></symbol>
+  <symbol id="refresh" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" 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="M3 21v-5h5"/></symbol>
+  <symbol id="logout" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m16 17 5-5-5-5"/><path d="M21 12H9"/><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/></symbol>
+  <symbol id="lock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" 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"/></symbol>
+  <symbol id="mail" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></symbol>
+  <symbol id="megaphone" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m3 11 18-5v12L3 14v-3z"/><path d="M11.6 16.8a3 3 0 1 1-5.8-1.6"/></symbol>
+  <symbol id="archive" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <rect width="20" height="5" x="2" y="3" rx="1" />
+    <path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8" />
+    <path d="M10 12h4" />
+  </symbol>
+  <symbol id="arrow-right" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M5 12h14" />
+    <path d="m12 5 7 7-7 7" />
+  </symbol>
+  <symbol id="building" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M10 12h4" />
+    <path d="M10 8h4" />
+    <path d="M14 21v-3a2 2 0 0 0-4 0v3" />
+    <path d="M6 10H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2" />
+    <path d="M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16" />
+  </symbol>
+  <symbol id="chevron-right" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="m9 18 6-6-6-6" />
+  </symbol>
+  <symbol id="alert-circle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="10" />
+    <line x1="12" x2="12" y1="8" y2="12" />
+    <line x1="12" x2="12.01" y1="16" y2="16" />
+  </symbol>
+  <symbol id="check-circle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="10" />
+    <path d="m9 12 2 2 4-4" />
+  </symbol>
+  <symbol id="clipboard" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <rect width="8" height="4" x="8" y="2" rx="1" ry="1" />
+    <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" />
+    <path d="M12 11h4" />
+    <path d="M12 16h4" />
+    <path d="M8 11h.01" />
+    <path d="M8 16h.01" />
+  </symbol>
+  <symbol id="sync" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12 13v8l-4-4" />
+    <path d="m12 21 4-4" />
+    <path d="M4.393 15.269A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.436 8.284" />
+  </symbol>
+  <symbol id="database" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <ellipse cx="12" cy="5" rx="9" ry="3" />
+    <path d="M3 5V19A9 3 0 0 0 21 19V5" />
+    <path d="M3 12A9 3 0 0 0 21 12" />
+  </symbol>
+  <symbol id="spreadsheet" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" />
+    <path d="M14 2v5a1 1 0 0 0 1 1h5" />
+    <path d="M8 13h2" />
+    <path d="M14 13h2" />
+    <path d="M8 17h2" />
+    <path d="M14 17h2" />
+  </symbol>
+  <symbol id="merge" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="18" cy="18" r="3" />
+    <circle cx="6" cy="6" r="3" />
+    <path d="M6 21V9a9 9 0 0 0 9 9" />
+  </symbol>
+  <symbol id="inbox" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
+    <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
+  </symbol>
+  <symbol id="layers" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z" />
+    <path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12" />
+    <path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17" />
+  </symbol>
+  <symbol id="checklist" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M13 5h8" />
+    <path d="M13 12h8" />
+    <path d="M13 19h8" />
+    <path d="m3 17 2 2 4-4" />
+    <path d="m3 7 2 2 4-4" />
+  </symbol>
+  <symbol id="package" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z" />
+    <path d="M12 22V12" />
+    <polyline points="3.29 7 12 12 20.71 7" />
+    <path d="m7.5 4.27 9 5.15" />
+  </symbol>
+  <symbol id="receipt" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12 17V7" />
+    <path d="M16 8h-6a2 2 0 0 0 0 4h4a2 2 0 0 1 0 4H8" />
+    <path d="M4 3a1 1 0 0 1 1-1 1.3 1.3 0 0 1 .7.2l.933.6a1.3 1.3 0 0 0 1.4 0l.934-.6a1.3 1.3 0 0 1 1.4 0l.933.6a1.3 1.3 0 0 0 1.4 0l.933-.6a1.3 1.3 0 0 1 1.4 0l.934.6a1.3 1.3 0 0 0 1.4 0l.933-.6A1.3 1.3 0 0 1 19 2a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1 1.3 1.3 0 0 1-.7-.2l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.934.6a1.3 1.3 0 0 1-1.4 0l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-1.4 0l-.934-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-.7.2 1 1 0 0 1-1-1z" />
+  </symbol>
+  <symbol id="scale" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12 3v18" />
+    <path d="m19 8 3 8a5 5 0 0 1-6 0zV7" />
+    <path d="M3 7h1a17 17 0 0 0 8-2 17 17 0 0 0 8 2h1" />
+    <path d="m5 8 3 8a5 5 0 0 1-6 0zV7" />
+    <path d="M7 21h10" />
+  </symbol>
+  <symbol id="split" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M16 3h5v5" />
+    <path d="M8 3H3v5" />
+    <path d="M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3" />
+    <path d="m15 9 6-6" />
+  </symbol>
+  <symbol id="warning" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" 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-3" />
+    <path d="M12 9v4" />
+    <path d="M12 17h.01" />
+  </symbol>
+  <symbol id="upload" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12 3v12" />
+    <path d="m17 8-5-5-5 5" />
+    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+  </symbol>
+  <symbol id="circleNumber0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.575" stroke-linecap="round" stroke-linejoin="round">
+    <g transform="translate(12 12) scale(1.11111) translate(-12 -12)"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/><path d="M10 10v4a2 2 0 1 0 4 0v-4a2 2 0 1 0 -4 0"/></g>
+  </symbol>
+  <symbol id="circleNumber1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.575" stroke-linecap="round" stroke-linejoin="round">
+    <g transform="translate(12 12) scale(1.11111) translate(-12 -12)"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/><path d="M10 10l2 -2v8"/></g>
+  </symbol>
+  <symbol id="circleNumber2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.575" stroke-linecap="round" stroke-linejoin="round">
+    <g transform="translate(12 12) scale(1.11111) translate(-12 -12)"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/><path d="M10 8h3a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 0 -1 1v2a1 1 0 0 0 1 1h3"/></g>
+  </symbol>
+  <symbol id="circleNumber3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.575" stroke-linecap="round" stroke-linejoin="round">
+    <g transform="translate(12 12) scale(1.11111) translate(-12 -12)"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/><path d="M10 9a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1"/></g>
+  </symbol>
+  <symbol id="circleNumber4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.575" stroke-linecap="round" stroke-linejoin="round">
+    <g transform="translate(12 12) scale(1.11111) translate(-12 -12)"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/><path d="M10 8v3a1 1 0 0 0 1 1h3"/><path d="M14 8v8"/></g>
+  </symbol>
+  <symbol id="circleNumber5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.575" stroke-linecap="round" stroke-linejoin="round">
+    <g transform="translate(12 12) scale(1.11111) translate(-12 -12)"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/><path d="M10 15a1 1 0 0 0 1 1h2a1 1 0 0 0 1 -1v-2a1 1 0 0 0 -1 -1h-3v-4h4"/></g>
+  </symbol>
+  <symbol id="circleNumber6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.575" stroke-linecap="round" stroke-linejoin="round">
+    <g transform="translate(12 12) scale(1.11111) translate(-12 -12)"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/><path d="M14 9a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v6a1 1 0 0 0 1 1h2a1 1 0 0 0 1 -1v-2a1 1 0 0 0 -1 -1h-3"/></g>
+  </symbol>
+  <symbol id="circleNumber7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.575" stroke-linecap="round" stroke-linejoin="round">
+    <g transform="translate(12 12) scale(1.11111) translate(-12 -12)"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/><path d="M10 8h4l-2 8"/></g>
+  </symbol>
+  <symbol id="circleNumber8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.575" stroke-linecap="round" stroke-linejoin="round">
+    <g transform="translate(12 12) scale(1.11111) translate(-12 -12)"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/><path d="M12 12h-1a1 1 0 0 1 -1 -1v-2a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 0 -1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1 -1v-2a1 1 0 0 0 -1 -1"/></g>
+  </symbol>
+  <symbol id="circleNumber9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.575" stroke-linecap="round" stroke-linejoin="round">
+    <g transform="translate(12 12) scale(1.11111) translate(-12 -12)"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/><path d="M10 15a1 1 0 0 0 1 1h2a1 1 0 0 0 1 -1v-6a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v2a1 1 0 0 0 1 1h3"/></g>
+  </symbol>
+</svg>
+
+<div class="kt-ai-shell">
+  <aside class="kt-ai-sidebar" id="sidebar" style="display:flex;flex-direction:column;padding:14px 10px;gap:2px">
+    <div class="sb-top">
+      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABPCAYAAAB8kULjAAAAAXNSR0IArs4c6QAAAHhlWElmTU0AKgAAAAgABAEaAAUAAAABAAAAPgEbAAUAAAABAAAARgEoAAMAAAABAAIAAIdpAAQAAAABAAAATgAAAAAAAABIAAAAAQAAAEgAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAAFCgAwAEAAAAAQAAAE8AAAAA4N94KwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAcFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDYuMC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpZUmVzb2x1dGlvbj43MjwvdGlmZjpZUmVzb2x1dGlvbj4KICAgICAgICAgPHRpZmY6UmVzb2x1dGlvblVuaXQ+MjwvdGlmZjpSZXNvbHV0aW9uVW5pdD4KICAgICAgICAgPHRpZmY6WFJlc29sdXRpb24+NzI8L3RpZmY6WFJlc29sdXRpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgrTSVZIAAAwjUlEQVR4AcV9B6BW1bHu7H///XQ459B77yJKVQRBLIiAioVYEhtqNL5r8pKbxJvoe8lLnvHmXmNMTAz2EhWNXVQUVBAQULr0Xg+nt7/v/b5v1t7nHDQxkmjekn+XVWbNzJqZNWvW2kdL/r+lZ+1bfzMyuGdjnf3Ku0XBaLCxXc7OlDnhXKltB4vcrBSKGwgb9FIZK2DX58SpDaTtSjsXOpbMpqql+VhWSnpnZdOmnMgl+P3rU/Bf16Vryag1QTksoVhZsCTRlBra3gmOqSoqGh6IVvXNhKwO4kqRuHYslwNaAcErEpq5EsPdFUuykgtLImfl6gISPGQXdNniuo3r5OQeq7NNS7dIQ02tdOqUkTWjsiKWNv+66bO+7g5EFgela99QpKiiixMOnuFYzjSR7Nhcyuk2ZWw7a9akfPnO3YfAMNLreOgYtHwOkIVkoFgWmMgy5Fg2XsFlLUtD+qx9lmUvD0huoZ2VZcmazGHpm8rIkslg5teXvj4GjlodkrpszC4MnRGw7EtzjjsVXOrgkhHQTxfMigcceeA/OsqPflcrB46myZ+WROa4+I9ZZKQ+a7lhoWa21GYNG0wNkLV4dg4B/KLpY/KemzJ66ar/cf3IapFTMi3Vv8IHDuFXnCBxw9aXhLLWFcGC6Buu476czck3XCfXwc2lwQfQ4TpQMFeamy3Zsisrk0ZGIZQkHIlMCpANfOedGfiRoVRnZDu4U1ZZw7QiGcgBbEd/bufOZaGrZp8df+XpReNflMHZS6X320WqDaj5VSb7qwN2Z0A63xOz+4Zng/77HStwM0jqRmkTl/ZdyYX4kBneD7nNqazMnlIory9rVj6xjDXJNr22vmiOzzKvsrF0LaKLVmBuu7gjv/hOO3nl/WZZtCrd1QrKhXYkdlqgY7DatW/cJw2dgdASw3sP6j96+2okcMimcGjYOSPtcnnKdaynHVdGu04G2ppRiSFyLhmjJouSwgxcbFc27shIHgSwT7cQBVOT4QeZoRU1j03JVE4N5mdkUwvZEHVZOxYS+em8Ulm5MSN/eacR45FGLgyGZZ/mir0AOD4cHnrOUKGJ+QrSP8tASzqvjgdCTTfl7PBCR+yZLmZKMg5IW1RTX5LMHWoI8SRBTBY4lUq6smpTUqaOyRNRRwRlWqzsMlzzWigMThwGmMLQyniH4EkY/f371cVytNaVPzxfL5A89mL+oyagd8cKXpINhd8KZJzrpOuHmN7/ufQPq/Cdd7qBZHJWj8Nh97eYEb8LNY27kiMd4AuuOjT61kKw5vsspRhpbZGGRkcuO7tAXoMa5yh1bEZyeVHy8ewNhkqnMphFWoFDJSHY0BsvLZay9kG584EajEEOZpPMJiKcXJhwhTmxXCtfAoHpgVige7Toso+yVb2b/lGVVjIV9olc+m6PrNy3bupF15W8HosGL5FcBvpDqih0xoZRX5VhSiTRJ/LsxJNKcoe9By3ZujctybQjIwbAb4b+U3JNPbbBMycdtGMTrxsDm+AwEBGUXz49X/r3CMtPfleDQUB97c6Hox0rTDbhhEMvwLHDV6bixa8ER5w/XmCGTNmJXU+cgT0XR+1IxYx3V2cfhxEbdOGkqAQwqNqtUscn77Xl7iPFfFPGm2ElPLesJcvWNstZLWqMah7NRmpNe83yBsRIpyvBnCNnjY3JmaML5H/9sQaTEpDRLjx3xwNFCWZ7r8j07aQwzvZIjPVTEak/W/q+HjE9ffnriTEQkmcX5s92g9EHU65Vfu9TFXLOhLj06RnWCYBSYpA3mBJlIq2dkGGqth5nWnDEe9iSxasTMrRPSAoK4c9pGa/erKIQAi2KSO5yrAKcrYbH5PLziuSuP1bJseqMaqxpryPU0ksLSGUh2YhaVG8Hro9ld4NdnB+LFM3YtOnEJPEEGLg6ZMcrzsfI/x7iX2xZWTlwOCcvvNso8y4ulihmVOMkAzGOtqHC4O3T0iavldOoAq4fOJKTqtqsnDIIdl0nE0OjIdR4PwrMk2DLcWRQr5DcdGmJ3PN4nezeD0cc5oDJXNkZyTNv2h/xwCD6aCi+bOBgiehK2aD+8d8vX1d4psiXn6G/JAOftYOD0xNdK/I7yBjWqzkggqaQnBfBwCCYd95E2GVOdEDSKA+xxTt+ykzcKaFqzsEwnwg++IK5eE1Cpo2Li+ULnkc7gZj/lFpIuyM9OgTk+1eXyGOvNsonW1JihTHDU/w5y3PyUCxM5y19sTkSwRKPgBpV4IJ7SSwnN88tK312ccMj0r9+osizX2qC/XIMHNZ1MNaxfwD55cYAo3vliiNZDN39f66Ti6YWSNdOvi9HlGn4DbJG2szIKzG84EfGGScD76GALP0kKT062VJaCjgqPYYRKEUiNG0mZYUB+cG32subK1LyFmZuK6hQtYYBrYDZhSb2Y1qad6MprXmhXE6+eUGRbNuTlLeWJzuE47Hfnz2j50BT+4uvf5+BfZaV24HQb1wr1Me16GQYQgxCeA5Zsm13GsQ0yQ1Q5QiyyCrW8pmj8qbN9KIl2nEbPWfJsaqc7D2UkXGwa9Qp37P25c/F7FqIufL2K4tlM5aAT75GXw8zqifi2id5R4bxxee/ZhAe8IK0scioMp7Qz5iTojK8f0QeeKFWiqNpGTOspN/E89rdO2nG6lJU/cL0xWKKSSMQT96FsNxlWJJR4E3vVACoS4tfByhbdqTlwil5koLjv3MfHGmqE+u0dG+ezFUV2ZS0VACBmBTIjGnj8+XtDxtVHdmpihKYlwfH+Gb4egGo6D2PwddDMELxQC9UX/NfS4feQ0sHCo9o+Yl9lRdZ8uNr2ssDC+qkIBKQb80ulpMHBuWNFU7vDzc3BXIFF74v1U/6Vtlv2nL/Agl0rdEj6s4tKYzdFEd8KEiD4RFjLBhemKWjjRUFeHb/M3Uyd3qRdCgJKiPozNKcGeU1T+YNOYTFEJYnPcokTAKrNyelQ3tLOnWAGrOMP3QSRf3LziuQzuW2/PLhanpxOkYcU6JA3HxJ5etnEyyeSp9fn2AjuNx6WZHUNLkyflhErruoUFZ/mpbv3Vsj766slUwwdIsdbX8WIBPbv5r+pgSWnTq943WXlj44bli8a3k7CxMFEIXxtsEHcp0jTiT8ZMF4V1RkpVN5UMYOj8jKtUljBbVrMgEP/vBrXitOJI5lzEk1OzKkT1QK8gKycWtSHe0QJPPciXGZCl/vDjjKDc1ZXWV4UxKasqVpz3sLvS39sYzsNVfOM/nochL8x+9fWw4PICNrd2TltwsaZNPWFNwaj0gJBjGjDXfbHfmLVP4RKvH59DcYuDiYLrN/vGaLXHSsJiFdy4Jy2klwVk/Nl6H9o9K+KCA2EHBAWBA2hHiqfAGzzSCaUlhZl5V9ByCWyhtUaCHmM0j4RR4TWJrGwuaCM/LljeUJ+HqOnDYyLlcC5h0PVMvRSvh6QQBVhrGxgWfYxxf+vJElTKqIvprnfHgMXSDd35xZINfObi+/ebJe/uupOvkY6/EsJAJxWoVgBoXLwXC5bSVd5+gVi0UeJZnHJV1uH5fDl+HR4Y4E51XVJaSqypUVn6Qg74hWtbdlUM+gjOgbhqFHCAUIHjqakS170rIdzKqozkm60ZX5L9bKdbMK5VNEWqqwzlXXooUwEmJ6NDdzNfKBfExKa7el5MZoQHp2CUl+2JbrLyqS//twvRw4BMlTjMERBcO2+JFBBozPOpVKUqv8Q1ke7GX7dkE5B27SmKFRGX9ynvz8TzXyxEsNoA3mIESYGAbCoogyQXNdBCGcQOiG0JDsc5lN8pEpaL16NVszpMObeVaHwqclEJlhJg6sb71iVVlIHcXNhg/YsdSWgQhD9e8ekrJ2IfTrSiUiIbv3NckFkwuksj4g9z1WKQ1YqiWw2HdgilWJVNr4zDckrwciQ59MsC6+4eIiGYDBCoFhT8DX+2hjEkRqZV5M8uD4r4ToiZuZkMCI9jAFXWA3Rw+OSN/uYczeGWiQLXn5lvziIaybvcYBDxbx8aNIhm7AtKHJ2dTCXK55jmyafJwqf06F7R7fnuraoR9jAghCjFWSCZuo0XdmhgV7yNFtaHBk94EsDH9KVsD478HKxMbE0Kd7VMKQnFFAunPHkNioH4d/EwczQuiRY0AvhdwjXE1KAN+QiX+lxZb88Ppy+c/Ha+V9ONiGeaaYkmIsMVsSEAbCA2TGwpXiPEt6dw7KpFExmTI6T+qaXXn0ZdjPppycP6lA7nu6TmobqKKghzQRFBKNg8LXPviCHuABSCDYHbGw1e6x+VtNrrl+RoUXRx1bbgTUCH0wSpwC9qHrGxH2OgJjsBWhJKQyjuzEcsq4MAmJYVk+ekhE7vluucQwhTZgpkthoX8Uar7/SFaO4N4IAhoSGAhE+tOQUBKPLQDp2SkgE0+OI9yfksPwDT2qPF6RROLAyvj50otnThIFsYB0Kg3KyQOiGt05WJGT379QL3v2Z6QULst1s4tkAQKt+w5z6WfcKaMHhkhCPj4ZPcHKK4zw2E2IIb4tB8YDa5NaWMPXXqevGr23Tt6BsuUrIC3lhT/MeRRB4q2osoXf3O/W1OMbZ2zJWVirFoCZNpZcDdK9Q1AGIuTUHauNvJiN2TSHzSSsqbG9e7TagUTn6C6pQ77jQA6uUVa6lkflVw9XtqivbhypLWFf1ANFSfJhozvBRp/UPywjB0Wlqt6R1z5owiDAMQXaKJbrLixEsCIkdz9SbSTWRx8w6GC30IxB4UTMd7+KodBK2NnstOymsUvZL1MbCbwzMGF05LL4Ljv/wMEmwfxhJEIhABpE2gHi+qojzyeyksl05aGgdRjMdFDlmdcb5WffKYU9C8syRFw+hqpz2dYRxPbtEpQBPUJyxqg8sYF0MuVIZ8z47UtsefTVenVlpp+eL0XFQalvMLuTFmZRTSqulkQBq3OJBe8gIicPikgSE/+f32qU9dtNKN/CpESpHj08LCMGRuXHv4UPCRBUW/UzDRkeDYYSb1y0Gx0r0Ke2LBCKOVZmrsidH+Kno9dqAzv+uvSUUyN3nzk61i6OGTCD/hnkzAJvbaycw7M3JgYB9IF8zfOkQkNWXh3eErA99fDtLju7UFZtTkgCBDK/Efn7DmcRCMjK8g1J3da8cEq+FBfD0GNpOKRPRIrjARkzPC71UP8EbBftJ7ZHJQNpCcN2dYWqjhoclnNPi2sk+g2si59Z1ChHqfZY4uE0g2p55/YBuRUrmMdfp0Qi8EDTY/4ppjQKJpGStv+hGuopW/mgNOY6SN5JT0nt7xHFVgvGGx56XT/t4+3Zm45Wpq0xQyNyypCozoCZFLYfwUj6fISlsqZAcaEUALDCRhkl0C/y5ASAEao6lJOhcH16dQ3Lui1pU4vLMLoLVC/AOf3kmBQXhOSO+6vlXUjqocosJiKE6rE6mXNWvoQgSR3BiA6Y7QvA2OH9wnIRGN4dAYx3ViXlqTca5OBRMI4iwYlBsRGJQ2KvnV0oR2pEnnu7AczzMTN4E1/NIR14Nok5hq0KSaM7LKEkhgoDwcY1bsVDm5jjSSDWFeX7vifB8MlgoCxdl5I0DP6kUXEZhCAnXQtu6TaBmY7nOPucYlc+SspJYKF8JXTigFHjwO2EEb9yeoHsh994CDbP4BdARMyVM0+JITCbL/c+XSsHj2XUtaiqcWQb7NfHnybA3Li8tqRROkDiLsXeyYST4jIRuGXgcL+ypFkOV+YkCmNEJzgHu+EPtoVBnzw6JuNQ/55HayXFiYpcIrPIFL4o1wzzlA5emKfSZuqaDGos28E5cXJJt+JPL4rc5TFwwFkFVij0M0hQqRIGAPuhXsvWJyQKKZgyOi69u4URurIkA8Y26RYIgHmjRsnzMGEX3A7RMs3TOq40wsHOIvw+c3KhfLQuAVuFTUa0GwNJv/TcQnnguXrZgr0RzlNKgCed3LUbjXVqCLaONjINn/JVTA6cIBqbHBmK2ZbS2LNzWMqKA5IXt3Rrk8ady8p5FxfKH59rkD0HAVvFhUwjh3QBaTrj6+eSR5OW4aKvvCC5boEb3f2Y1D2cVJChzjcMc+3AdyEriAIQPpljfLUdezLyEQw/Z7gpY+JwEUKwj3A7kjlJQLU5e7Gy9qNXPpk3H1HtFKq8G6uV8QhVtSu2Zcv2lAzpG0EcrlCehPqt2gTbBHVVWISJVFaAiaabjVBTXOacUyRvrWyWR19rlI1YqRzEupsTxQoswXaBOeR7L6jzcMzCg3tFpDt8wDlnFUoT5qwliOwEEQbD+EmWMxuS8hB4GpYYv0JLVH3wrqjgQknUyl5dlOPYSb4dktedY/P3mzHpcN0MsUOzzFLBFwFjzzhqjLRsBMEbdmaw6ghDffJgr2z4dfDtwESuXZXxipni18pQds5/QMQB8nsOpXWt3NiYlTnTCmXRRwlZtAKOMkUGBJKgEti4vrCXk0dFoL55snNvVqLwJee/WCfVCPuT0erUA1U65LX1ruzYm5GVGIRVWzJgblpmnVEgvbpHdND6I/TfEcu4ojwbLhUdeg44tIn9ebZdEfYGzlDg06GcJAGeSUJ+ANNZJrXBrXxohc/AGxAWGAV0DLHa1lNM5T4aQ4I4c64BkrvBBLoM4xGIjEHF02AkpZEzto6W8swwzgyln+9ILWwbDf8dN5bh6EWTPLMQhh3M40AXQv16dgqqEz11TEwaE5Y8ubAREtQkgzEJFRcGdSB18iELvC500uC4I8JBu8hJZvyImPz8wWoEepulCapeBgYO7ReREfj16RqSUrhK+TGqO+wwGEqXBmd4WgZRGUr4MCVArSUhC/3iZJibq3Qr5v8F74uD9tDoMuyRjtYzLLQ9TGjFJ+6gasKL+u145cqGQt+zI9wI2LAe5SFsJzqyeWdK1iAc1Ay3hfu9hNC2cx4gGtY7iD3cYlXjVRsT8hCkqgzEjIKP1huE0XzsQlR6zeY0nGv6UOzMgloG5bZvlMjt91RJMyX+uIS+KCFgQNeygHzvqhJ58b2ELF6F8zYUEVaHpMH+SwniWF0xm9PfLEHcMj9uq3uUgTjWwV2qqslBgjNyGCslLv94rIcDxRMVuo2hZIGBueQmpyF1SlBOknycZ+mkrPf6Im5sxI71hksAMwN9PG2P0aYK7MFO2r6KJhmIYMLIARE5FczsBxVfh5DWOsygWSBFn0tbQdd6Y4l2yTmF8gnK165Pyu3XlEhTc4EU5hvV2oNoyydb07IPMzU7p/mgjXXQ706oKCVkUJ+wrN4ElQdcz1CxkkpwBC4KZ+nt+3OydC1WApBsxoHxTxlJKauuw+5fTVbWwRxFsDwpgz1muK4cgZF22GvpB8eeP5qlGpyJZYTpwDFHBzMJTSMwRsJxELRDPBJqBzm+oQuk5d/AsbDhDnszSZnFRxicFnXBKweUicJK5hxDJ5xB2UFHTDI8IUBVzIEPlXWQYUheB8yQV88qQvAyK69/0CB9OoPpQxAkHZsvGxD2WgRV+3BDAlLABT4HiKNHveRQwfgDVjkkdVDvsCxfiwlHD2RqsWEQ+jh3XEyGD4zJg1j71kNtW70EQCE4EKGHMgGQ9PAgSj3CbQeO5WQr3KydB7NSAROTxiTpS2sXzOR9EXHiryueudamm5RK50JOc/LJYCgaK8kFMjHaIHZgZAyIIVFNiT4JYOKTjiY5SIy0DR4hKVkMCsPhn0JSToZbMQS25qzxedIPUvrp1maZdlqezlG7D2ZkJqIhtGeLMKuOZpABkrodMUVKjPYFWEqhQcqMGCTu/U+a5cfXlkpBQQD2mAaL9YAjNL13F1vOxbLv8Tca5UgVJhrUJzVEVROZZqCbkddMtAXuWguENSQQ3ID0bt+HKmhfgpBXF/ieuryEpHZDILYn7DelE0GQoDTGSu1A+28Odm37amVIaxc6UhwlJjOSZJhBSvMUGVYwKCrrIZJpEMMl2m6sPoIgrn93uBNwQcbAfdkNFS1EmCmRsbCsS8mSNUnMkim5cHIcobCsVML+KOOUWBJs+mZ/fGlE+GwyXKnKWgd9mFMILIjDRZmHoOu2/S6kuxEqxoH3E/Hjj7gz1+BLQVAXTEvAMJaw2P/hMQGNOorB2IGQ3Ta4YHSdmjDgnKywarKiEeflgBu08ri3oHA54vinisOZgkml0lhIulD8EQX+mPRZOyULtbpKUlVdRt6BhIXA1OlnFEI1ccgWNjIOo70Q6qohdKjCNkjeh1gLX4q1cgyM0J7YB+0DR9D8U7oycOSXwwmfOBKxMkUAfQLGeRPyJJ4XwiZ/A9QSzCMdmnDnP+UMMwDMu6pK63OLXGpZSznL0D9VGUtqlToycCUCuy+/3yjPvdPEVRB0ActNRVSbQ5g567VNLci0yVQ8KPgeoooky5FDxmPC6AS3Yc7ZeXA/sN+6oFYeeKZWnnmrQZJYWczCBtE4uEBRRJgpK6/jJGk4hENCsGF6mNUj1NBNDmJIyUyo1TJsVvXvEZESRGhceMZDeoVlEgKmT8MdqqqHVCpuvPj4eQxSVD9DWwtJGAh2o++8qj55MPhqpFfdJ+DMsW2Ap3GkNh2BpUdPFLnPJY85n8snakxtywGRjIYGlpUEZCQ2nqbDkY3AR1zwdpMsg7tSh9mP/t5QhLVOgg85bgRn7KCs25aRDdsT8uc36uT6Oe1lPd53Y6KhG2QIakWAfKQUVGFiYmjq43VZufycAvkAk8q6bQj5g8GtyktJRFuihstnYSlUr5zPbR6Po4z5mrQC4POuz6bEDnS4sTdsxlxTQmabKG1LPe0aCAADgxCeCUWBeMDBuCI4rxMQxZmAHTQa84FYTv1hQb0sXN6IGQuVvShIBQKnW+mSgEed4D4MAkO7INC6F/YxjtXGSQMjiBmmdIXhj7zpyowy91XysJ81dlhMneFCnOZ6/JUGtb2GW6yNpDdyjz+8QPioylR5tU68sxouyhS+wT5xkChh3IYI4gF+NhxtRIwgDDQx+Qj15eHgRDFWNXnh3PMILaQbEV0DbLCIHfA/QiZAZBmh90ZTO2Qhf+gFxDBcP3IQ1p9QVfphJdiwiUVt+c8narBMg+HjLKdYognb4B/dneXw0zbtSMmpkMZ+YPY0RGNqYDfHY/uU0ZZ32RbI0+bqGKLPAAji3siqzc1y9cxi+G+2/PbZGjjCDsL13Gq1QLjZdwnizr1sMoJxRGUIJIDlfGZd/OPOL358x/E55FNK2JbRd70DBzKV27hkEduRS2Eob6rJbg5mg7laK4sT4Tjf5HHO8Mcj1s/jQBpCcAdXQxiRwVhjngTmlRYF5RjWowfxrcdkbEUuWtGIkFhCSgpIABDBrMjNpiCe9R2MVsKAVC2c1T3Yn+BW49ihedK/Z0xuuzIieVizpuAbcVeOdRl9YltqQj7mENpBEjOYJgEuEw09x0nrohJ3CFmXUkfCmRCHUqbxMwksHoyU+yKCtg4WCwzYUkS1DupxUsoij64LgxEOLlx/B6yMBLNWXTCWiVSXllvNsUgoHPAJBWIcPf58AogYMYpg/zQO5hVjGTQFG+35cQQaIEl0gKeMLdDA6Y79dTJjQkwJJpHkOEfeTOxgApiBNyWSSNMxPYBgaAibPMlcSp3VH1xfJhuwYtmwIwGnGEdLIA60ZTlgPxtncNhnHpxaukRNMBE6d5FAwHLIANQjwRmEv7g9w1VMDvpPxmX4g+/JshwKecKMfizr8xmHtQDDtMerwjJ8ZUDE4A4gGfwqgv0611Sfekq3img0Upzl0kETRkhHznjzBOw6WEOWCda+MRhxV8Puu+CL7T+CTXd0eMm0Avl4a1aewB5IAlk0B9zpp80hMUSIdo8xQd1vUkRBBGOMyM9gJcHJAB6+hvLvurVMP334dDe2S2EfN+9NSiaBMyyYvfdjp+3Rl2rlxjkF6k9yU0oTiDV380Cb7WepQqlEmipUQ7URvBsB9QsMCFxVcEEHE02b2lPgz8hQ947B+uaGdIWWDjrvkxdTTnhmLoMzw2hAbusPeDkYup5YG04/LR9r1gDibyn5BAv9QzhikQHl3O+947r2WIFk5RnE9Roz4CYNnyLLeCG7xzqaN+/aFl/mGqvCJybD9H7dgvhYpkxehm/XpVME+ORwbiWJMzJF8t9P18j2nUm55fJC7I+E5A/P4Esu4GEgKRDtijmUWiJh+jQ5WgMI+XnKHK+Zf9Pjbx7zfIYw6DFpJJaLg/MQoc+s6RTtOw4WRmTrvvRaOK4z+akUDw2pWQDzumPX7IKphdIZp0HXIXj5MRb6h+BG8CA3J4Yw6t58SbGq3/NvN0oj8jlsljf0ZIzB0mcf7ySG6si7T5BPoNKt/N8Jz/+ZhXVYweTJ/U9Vyalwe35yc7nswpo1zeUORnjJmpR8Z26eSgS7buuOGeb43ft4kFq/BFpBXJkFRrVlomJL5qnqia7rp5yKqDzii1wmvrkyLXWHajdueMvKKAOxHlyNsJHr8AggjGU51n8XTCyQAXBSNyGq8uTCJvhfOallmApdKZMA/Lo5RTj1YGNDp15qsXjXkA8R8hIRIYJETp8VM+JLOJzhDeO8bEOMtgVBaPgmDhedCndlIEJgZXBX3sNm03qsq799cYls2ZOVV9+HY45PxegyrYV0mskCfVEItAfTO/QAb/4gGeVVGmhitKKpj1eTYF7oUw5F4OLMU/M0UrMTy7kXljTJYexjV8JvyTVmP2RlZWAuZ60TN1VTVBBuNx2BzOHYmOba9Mk3G7Cj5h0QInSdENAZJGAuzur16hKR3/y5Fl8GeXsZAOh75QYlvjNhpBU7L5fc4b+2lfCsXRAGn1GhHuH4R16qk58i+MrQ0s/nV+tHOZvAvHHDonLLZYXYqQvJpFPishbLQRezu4LkhT8AZP/UCJ83/pNfT/MVN1TExBKGKRiNJSc3rSJ4/hRbrO9gzX4UdrYKEyVNG+ZabLDLKgq9MlA2Nh2eemXRiqmnlZ536FhSFixulP3g+LFGzlpoQZVUcUf36GT66XEZi4jvfTgbvZ+fqeqsaqoxAEomKv7oALn4eTKgqg1mApbuHyv2rOI9oCrdB03MQ99HKvHFIhztZkwg1AJCX4vw12FMYD2xkqHPORMHmdZsTMmyDU06QfkDo+z0wBFmS3fei3bFTExgBQhynDE2T8/zOJgw12ILYyv2gyoQ1K1PoFfgws0yLI6h2pldmboD2wkG1p7pUWfq9NuKVm7JTf9gdYPsQMipEZtGJoBKDDyC4S5MAOMunlYkD+FY2KbdiMu1Yov6HicJUvM9lQemhkcgSfMB04A19zblmk9jRr8EhNHGbtufNS4PwO5C3JHAGrGmPlLtyqdY+o2Cmo8fEZFeiDEyDngUe8oUY3/rkoxsw0eVTPXQ4buUY+k5AxMkD8kXYnXBSfKDj5thulKwdxkNtSmjPQDYF8aZxdRz7u5zXiKZRgLxsGZjdvHGg4116Qw+u0dlbdS2WzCPH8JcPbNI9yk4QqhFGCahjWddtG0L0n4VLfcJQSb/ESktN5VYSm1SlUN/3AXs2TUiP8NHNN0QoL0B55fXYZ+4otacqsrADu+FBry2pE4DCluh2t84twD7znF56b1G2QtB4KcYZpR4wzMdPkhTL0yQZ8GP7dktopL9+rKE7Ie5qsDB0CQ8CcUF3jtp8tFknuXAe8y4L/uYexIocnjb5HqntGCCBML9EPA3AqRgQCM67Q4Cbr+qnby2NCFLVic1BqFqCOgqXUBOJRZSqB2hB0WcvTPxrtLns9YgphxEPhE1OagIAnmY87a5JfII1rlbcWi9ErMfvYHRQ+PyITb+yXwFh0st4oTnQop4noaHPelunI/1eJfysOyFqiext6H9QKqHYUvgcoT9aeMqG1x5F/aNezPbEZesgfTScfbhGrQNNYQQoPpm0xtzyaafSc3jlCBfhfn4XM7ucC3MV3A2OgN6YARuPGXVDv7f9/FdBs+wvPFBs+7wswWZQuZx1sOjJpUepQ6vapzBFoOREbY2rCIAtm/ZrFGAcHJA6HexMbR5b04WLm3kIS8lbB8kavaUAt3a5MY/w0v8NYGBE+BgV2PzfjW2BXh8bj/cLYbhz8ShgAjOKrZD5O4y7BOfPDgmu9B20aoE/FnsMOJ8dCNsnFpujw7DMuDvEUXmmYTNpIxzn7t94tutOf4T7m7xFYdhN2ZYVhBrDoBEyzycSfn3a9rJDkSY/4KDO02YRJRqEu/3gLamLy+HTNG8zzKPma3oKASPuQYAyrA9OvvMfGzsxBDNqcPGONUJzXBpxCZbE0L5l59bJMsghTz8xDIIrJ6gOA1M5E5cAmbyKI6IHIEtHIXozqXnFeJ75LjUgNGPQ0rXb0nKfiwEEthJNMlgq6gggxjqoIMBPrZYXQP13FEnl/6fUvlwldeQ1rpN2japCnL6ECWKzEOQQm6ZWyw1GFk6yg1JdogCryfe2BG7Z765410fvK4JyPtRTZlYbNyaVgQ1F35BH+zqzYAP+sjL9VIN18UDatrBf1ixLil7IWGXnZOvk4yWg4rl65t1tuZR43YIYlw4OV++iU0srpN5GpWhtQgiObOQz6N19He56lJkFSGDmcGQZaRVhxh37O0hmGll0gtkS3aXIuNdWmygeb9L3IK5+61g8DzMUqXXzyrA/m0QJwLq5RiMKxljtJMd8x/5T4Z5zCIzvZ8ympW85D/pSPr5mom2aEMeR8GgH3yrnbyPqPN7qyFuKFfzALvKHtg/Dw/tw8b+pdPysaWKqHAlCEXjJHbXJo/J16gOt1cZf1q+PiVL1zRjCxOH4GFHt8I+MgDBeCW3X3kCrIGDBDIIW/vQCzoDocxjUqrcTAW8m9ukYuIRk2uun2EgMqsfrbfjVzRcN6f9rP69I9bdj9Rga5KTCqEBFK6GiUZ49d3P80bU6xe5XvLyPVSQaZDjB6z0GYkzVfdmfPRi4UD3/Ofr8IcDTGK3OlBqLPGCbutw+rQWDLtmVgnOTzepd3DDRcXStyfPxITlf8+vkeUfJ2QXVg21mEC4ImOYqhptdmApSA+iBw4FXIPv43gceBsCvCk4yT4jtWePXvSOMbStQDLxS2fzohdw0kbR9dBrO4n4WSLDul++Y8LkspPuf765f0U1vgwGvWzFk+y6r4pnw0TThmzlfxwyn3nGhij1xAEVvWetaWoRBoHT3xsLP27mmUXy84dqYSrIPr8+B8prjzxKKqM/lTgjM/vMPKyIiqUcn/mvQIDjsVfqEamO4NvjZjmKzXPCIHhCwE1/9GLoQ+7AaX1+TjGsXwiuT5HGG3dh/c2P77mM04bab9Cyc8n12UzsNqm+HFHe49PnJRDlR48+kaltvmrXtsrsxWAEAti0bx4KZAao4JvCB3pGOg2CpE/LPafaJ53MYn0S5D3qIDCvGDFF/qWNP2BDfOseeAeooIwlLE2oBMIppSU41ETGXTOzEKcMLBxhs+Xhl+rlAxyyrIZ/2AOnHzp3CMsn/CxClaR1UAmYffOHvykCtyUnG3HgcydcnWnj8vTjHm60c8uUyGJCRcduGp843OJuG/sJMj+X/ioDWevwnsuPBEq5uAxNNfMcLJ0yzyBgrgYdRYuPSN7NvHjvLSsUlVBTwzAIz2DKD77ZDq5FTr89pjtBLpPRmuiYQSp4QuAKnCO8YkYhfGFLnl+SkFffqZdDOM57MVYRC5c3Q5Ad3S64ELP4wg8TyvNWQArWwwjAwUBKcwrwuR+9GktBrmIumpqvWwo8H1PZYFP6HsylG36LDw59q+IhZm5/k4Fc3rkFl26wg6EhbiA0AHuIECL/cxRS51EIJDhaTCSaSLVN+upV1XxA0UmHeXAj+CcDxmAp9qvHahFdppiBMJYRXaj2QITs+WnCzDNxTBdLt6febJL3VibkIN0QEM/Pyfg9CgKc8OuSUgVXhZGkbbB13MCiFCo8gGMiaIOToca8W0KrwWMnyzelsXnkYqDKpH3MWfXJ6ppvy56zcUD4rye2/+I0cGX/QMh62Q0EBiCCRoX16psRNCiRcJOvq5G2GPvQUUxJJYOVAEhLV7gTv/q3Mvn5I3U4NInDQFQ5EEIbNAbfmHA1UYRNKm5mv/dxUmpwBqcZAV5tr5UNDt2wufRLfAnAv5uwDaH+eThQHsWZ33sfr8FOD2qDi+jZ65gIoR2uqjnek5/LOGcMSzjsGFZeMzPvojtu6fcBapouWekzqWUt/Jn81tcto3cEBi29JWdHn7bsQCmZaDr2JElrYiYlZzwm+Y1928gy0wYlHi42ZsXbsdp4dVkSAQHErSBNETjtZyBweTa+F2ZskTtzPG/TiKhQQiPdYAP6aB1EwjOS89zb9fJtBB6+d88xnLlpkp/MK5MoIiz87MF0iYrKLIMd35jUmivuJoc44yx1au+Bxu+WhXLL/dam9uevf5+BWD5n46vfs5PZWx3HfhDTFT7C8ZnoAyQziYAniT52pA7JlJlRV4ShunPhQqSztrzwRrXk4xDPuWML5XQcNq/G+vQlLBc34QPuJnzWmgRjVXoA35cbBeozg12AioVLm9R2XQgbtuD1emmG0z+sT1CPDnOKVVdCGwKOxzAfzVbMMDRc1eUy/5FrsJ+bN+/v/8W3L7CBBk29Hv6j4+Z9Y4cdCh4GOWeBJfDpYe5BVItkeci1aYVHH0Uz0qoHcMoGYDv0qhn4bgPLqrPHx+WK8ws1vP784mZ5A6dWecCyCUzmEk1BAIwJ1Lb21wrZyBV33fiXO26cUyIfYnMKfy0OG2BxWYrAB09EMJk2vIIKffGx5zueQVIgk/5Zzk7fKzsnwpP/++nLMZBwah/NuqGZW+xo9ACUaDJ6RLyWausjYQhpJcw8mdE1ZfTfQsDyN98vk3awbT06heUoVgJPc2KAuh7AyiCBGZeM8+EQOmXQcBN4QJr8qYxoaT3oNRlQC98wjD3jC7BcW/BWvcw9v0je/gjBD66ZUdHHlHV1MP0LbST8bTDvLsxbv5ZPzzjui0z287fSl2cgITQ8nXEj134aCGW3YVhPw242FqTQMUXfdOETzjcqtLKOMyrUZnDPkPzw2jLpgRjfYwhTPflWk6zC2vYoCOemkGoWySQQ/0cQSrpSa960E1NBc5U7eAc1/Nhx+ukFcElwSgKmoRlrYX5oaHxCgtLGXl/oETMW1uUJnOD8EZTjftl6Gj4g/vLJQPvy9U1N/PmnYFFoXC4X/i+c7h8BXxN4YQptGVnKHUhDVMTGeZLT8CcAzsbRjbE4I1gPxbjl/1Tij+zgRCtFzeOLQUQ9Xw8beoRGUvSq9XBBH6auxwitzd74jnKM51BsQt1+ZYmug3t2j8lP7jvmfazIGkZaNUZvYV/RyR6yctnv544lX5Jjx38L7CHyhbcTk0AfFNTZOTp/nxTvezkQcMowiiPIQKAP+wx9gsrEoUqzJ+fJdy4vQTA2LCtwFmYwdvl+eF8VbBwODwEWSVbbo7wwDDG5LXzFK0j2IiNkHlPbq/LVa6rFeD4GU9CuOIQz2zF8XI0zhRsxISHmx76UhbyBeQiOvhdMZa7Kbk0tlubJcAVOPLUd8hNsDWO2bfwhp9aZF8hl5oHKgy4+4ChFKImflf7uRx1lQJ+Y/O6FBvnJfx+RCaOi8vx7zbKVH/txhaQJlPBR/UZS5SfNNAymXjNp1ePraAmzaAP5HzJ4d3FE5M8L6/UUxOCeUd1lo1OOipj3MP/h8z8rk/gFzN6Fme1vrxeZTCPzD6V/TALbdlU/P+t2v2m9m0q+MWFYXgThqCE1zXbwT9iOXIgZ9dBBHOFFCL0ntkB//UQdZlsSQjL9sVM2KIMMWPPulyvLjpM8095HgZCYdMdVn/GOPviFwN6jDv6mYKmesnrlA5zsx/GugJP9IJDL3ZhLlz0uW0/CZLHEQ8CHeGL3f56B7A9ujhybX3n5qQ8vfmtz55V/eaep47GGbK+sE8T5FltuRVD2LvxpuhqeIPUZZ+hGY7VKuJMV5j+CPD6BRp1hjq9BwWVOq2rrmzbljlwVVJnf1n1rVrk8u7B2a31d+qduU+JHzvYj26R6IiMG/3RqIeOfhuQDmOPa8v76qF3aeC6+LZn33z/sfMabH2VDr7yLKDhiEyRZf2161ke9UCrJLL4YwTDTEZnMd65BTBnftBruJqHEb6J8hWzgPE1xJLd1wa/7PPL0ywef+NPdWytwDApT21eXvsRK5AQ7ew5beti6yB1d/GLfAbveFKvDuEUfVs6F7pyFv7/VWX0NTCFkiOGTck6J15lbuzOcMD0rq5R92kYZiBJ6IGof0V5BgPnGV8FbtjGQw9ELJ/tUTV3yzU31NTV/unuE7qIZmF/d1WD/1cH7HKRnn3XtS25fHpZ4rpMdCZyBoMQ58PfHQu26IsrDNZZhBOYkbqa3ZZ0CA5OYpzOoPrTpgh950CSgHQ711ALEBssNvGml029loo2bZX17SNvfX461gXjCj187A1sxorzhb+l3xlcB+emSYDgwGH9rehToH4nzGAMwC0A63SIs2eA5YqYkZspNPFA39ZlMxgko14Lxd6qQvRs2dYNrO6vsJvk4HY/tlWZ8brTjI9i3O40f34rA1/L0L2TgZ/HHHzjsm49DLwgp468LRAKpUvylmg6ubWHadNq7uQh2clPgpI1zYzBmVg7fbto1Vs6qtnKZCvwpggrEuvBNF2JcewpgNv51/wOCtpT8P1Dp+dYKqeDdAAAAAElFTkSuQmCC" alt="KT AI">
+      <span class="nm nav-label" id="brandName">…</span>
+    </div>
+    <nav id="nav" aria-label="Разделы" style="display:flex;flex-direction:column;gap:2px"></nav>
+    <div class="sb-bottom">
+      <button class="sb-tour" onclick="S.onboarding(true)" title="Как это работает">
+        <span class="ic"><svg class="kt-icon"><use href="#sparkles"></use></svg></span>
+        <span class="tx"><strong>Как это работает</strong><span class="nav-label">Тур по прототипу</span></span>
+      </button>
+      <button class="kt-ai-nav-item sb-util" onclick="S.guide()" title="Помощь и инструкция">
+        <svg class="kt-icon"><use href="#help"></use></svg><span class="nav-label">Помощь</span>
+      </button>
+      <button class="kt-ai-nav-item sb-util" data-kt-feedback-trigger title="Режим обратной связи">
+        <svg class="kt-icon"><use href="#megaphone"></use></svg><span class="nav-label" data-ktfb-label>Отзыв</span>
+      </button>
+    </div>
+  </aside>
+
+  <main class="kt-ai-main" style="min-height:100dvh;display:flex;flex-direction:column">
+    <header class="kt-ai-topbar">
+      <button class="kt-ai-icon-button shell-topbar-burger" aria-label="Меню" onclick="S.toggleSidebar()">
+        <svg class="kt-icon" viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
+      </button>
+      <button class="kt-ai-icon-button shell-panel-toggle" aria-label="Свернуть меню" title="Свернуть меню" onclick="S.toggleRail()">
+        <svg class="kt-icon" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M9 4v16"/></svg>
+      </button>
+      <nav class="topbar-crumb"><span id="pageTitle">…</span><span id="pageSub" style="display:none"></span></nav>
+      <div class="spacer"></div>
+      <!-- id="topSearch", а НЕ "search": в документе выше вшит спрайт, и символ
+           лупы в нём назван ровно так же. getElementById возвращал символ,
+           поэтому поле шапки было мёртвым — ни фильтра, ни фокуса по сочетанию,
+           ни синхронизации значения. Гейт 20 держит id-пространство разведённым. -->
+      <div class="kt-ai-search-field" id="searchField"><input class="kt-ai-search" id="topSearch" placeholder="Поиск…"><kbd class="kt-ai-kbd" id="searchKbd" hidden></kbd></div>
+      <button class="topbar-ai" id="aiFab" aria-label="Ассистент Төре" title="Ассистент Төре" onclick="S.toggleAi()"><canvas class="kt-ai-orb" data-state="idle" style="width:20px;height:20px"></canvas></button>
+      <button class="kt-ai-theme-toggle" id="themeToggle" data-mode="light" aria-label="Переключить тему">
+        <svg class="tic tic-sun" 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>
+        <svg class="tic tic-moon" viewBox="0 0 24 24"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
+        <span class="thumb"><svg class="ic ic-sun" 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><svg class="ic ic-moon" viewBox="0 0 24 24"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg></span>
+      </button>
+      <button class="kt-ai-icon-button" id="actBtn" aria-label="Активность" title="Активность" onclick="S.toggleActivity()" style="display:none"><svg class="kt-icon"><use href="#history"></use></svg></button>
+      <div class="kt-ai-menu-anchor">
+        <button class="kt-ai-icon-button" aria-label="Уведомления" onclick="S.toggleMenu('notifMenu')" style="position:relative">
+          <svg class="kt-icon" viewBox="0 0 24 24"><path d="M18 9a6 6 0 1 0-12 0c0 7-2 7-2 9h16c0-2-2-2-2-9M10 21a2.2 2.2 0 0 0 4 0"/></svg>
+          <span class="topbar-dot" id="notifBadge" style="display:none"></span>
+        </button>
+        <div class="kt-ai-menu notif-menu" id="notifMenu" role="menu"><div class="head">Уведомления</div><div id="notifList"></div></div>
+      </div>
+      <div class="kt-ai-menu-anchor">
+        <button class="kt-ai-icon-button" aria-label="Профиль" onclick="S.toggleMenu('profileMenu')">
+          <span class="kt-ai-avatar" id="avatarBtn" style="width:24px;height:24px;font-size:9px">??</span>
+        </button>
+        <div class="kt-ai-menu" id="profileMenu" role="menu">
+          <div class="menu-user"><div class="nm" id="userName">Пользователь</div><div class="role" id="userRole"></div></div>
+          <div class="sep"></div>
+          <button role="menuitem" class="item" onclick="S.guide()"><svg class="kt-icon kt-icon-sm" viewBox="0 0 24 24"><path d="M4 19V5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2Zm0 0a2 2 0 0 0 2 2h13"/></svg>Как пользоваться прототипом</button>
+          <button role="menuitem" class="item" onclick="S.stub('Профиль')"><svg class="kt-icon kt-icon-sm" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 3.6-6 8-6s8 2 8 6"/></svg>Профиль</button>
+          <button role="menuitem" class="item" onclick="S.stub('Настройки')"><svg class="kt-icon kt-icon-sm" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M12 3v3M12 18v3M3 12h3M18 12h3"/></svg>Настройки</button>
+          <div class="sep"></div>
+          <button role="menuitem" class="item" data-danger="true" onclick="S.stub('Выход')"><svg class="kt-icon kt-icon-sm" viewBox="0 0 24 24"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></svg>Выйти</button>
+        </div>
+      </div>
+    </header>
+
+    <div id="view"></div>
+  </main>
+</div>
+
+<!-- Drawer деталей записи -->
+<div class="kt-ai-drawer" id="drawer" role="dialog" aria-modal="true" aria-labelledby="drawerTitle" tabindex="-1" style="display:none"></div>
+<div class="kt-ai-drawer" id="actPanel" role="dialog" aria-modal="false" aria-label="Активность" tabindex="-1" style="display:none"></div>
+<div class="kt-ai-menu" id="rowMenu" role="menu" style="position:fixed;z-index:40"></div>
+
+<!-- AI-панель -->
+<div class="kt-ai-drawer ai-panel" id="aiPanel" role="dialog" aria-modal="false" aria-label="Ассистент Төре" tabindex="-1" style="display:none"></div>
+
+<!-- Modal подтверждения контрольного действия -->
+<div class="kt-ai-modal-overlay" id="modal" style="display:none" onclick="if(event.target===this)S.closeModal()"></div>
+<div class="kt-ai-modal-overlay" id="onb" style="display:none" onclick="if(event.target===this)S.onbClose()"></div>
+
+
+<div class="kt-ai-toast-stack" id="toasts" role="status" aria-live="polite" aria-atomic="false"></div>
+
+<script>
+"use strict";
+/* KT AI App Shell runtime: гидрация конфига + типовые взаимодействия. */
+const CFG = JSON.parse(document.getElementById("kt-app-config").textContent);
+// морфология казахских/русских строк хрупкая → продукт может задать createLabel явно
+const createLabel = (CFG.product && CFG.product.createLabel) || ("Новый " + ((CFG.product && CFG.product.entity) || "объект"));
+const LOGO = (document.querySelector(".sb-top img") || {}).src || "";
+const S = {};
+let state = { navIndex: 0, query: "", statusFilter: "", selected: new Set(), openRow: -1 };
+
+const $ = id => document.getElementById(id);
+const esc = s => String(s ?? "").replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
+// Ключ статуса или колонки, уезжающий в inline-обработчик: onclick="S.sort('…')".
+// esc() тут не помощник — он готовит текст для РАЗМЕТКИ, а внутри атрибута
+// лежит ещё и JS-строка. Ключ с апострофом ломал бы обработчик молча: кнопка
+// есть, нажатие не делает ничего. Ключи приходят из контракта продукта, схема
+// их вид не ограничивает.
+const escJs = s => esc(String(s ?? "").replace(/\\/g, "\\\\").replace(/'/g, "\\'"));
+const statuses = CFG.statuses || {};
+const rows = (CFG.table && CFG.table.rows || []).map((r, i) => Object.assign({ _i: i }, r));
+const cols = CFG.table && CFG.table.columns || [];
+const statusCol = (cols.find(c => c.type === "status") || {}).key;
+const workflowStatusKeys = statusCol ? Array.from(new Set(rows.map(r => r[statusCol]).filter(v => v != null && v !== "").map(String))) : [];
+const filterKeys = (Array.isArray(CFG.filterKeys) && CFG.filterKeys.length ? CFG.filterKeys.map(String) : workflowStatusKeys).filter(k => statuses[k]).slice(0, 4);
+
+function statusTag(key) {
+  const st = statuses[key] || { label: key, tone: "info" };
+  return '<span class="kt-ai-status-pill" data-status="' + esc(st.tone) + '">' + esc(st.label) + "</span>";
+}
+function confCell(v) {
+  const n = parseInt(String(v == null ? "" : v).replace(/[^\d]/g, ""), 10);
+  const pct = isNaN(n) ? 0 : Math.max(0, Math.min(100, n));
+  const tone = pct >= 80 ? "ok" : pct >= 60 ? "warn" : "risk";
+  return '<span class="conf-cell" data-tone="' + tone + '"><span class="conf-bar"><span style="width:' + pct + '%"></span></span>' +
+    '<span class="conf-pct">' + esc(v == null || v === "" ? "—" : v) + "</span></span>";
+}
+function cellHtml(row, col) {
+  const v = row[col.key];
+  if (col.type === "status") return statusTag(v);
+  if (col.type === "confidence") return confCell(v);
+  if (col.type === "num") return '<span class="kt-ai-num">' + esc(v) + "</span>";
+  if (col.type === "date") { const m = String(v).match(/(\d{4})-(\d{2})-(\d{2})/); return '<span class="kt-ai-num" style="font-size:var(--kt-ai-text-xs)">' + esc(m ? m[3] + "." + m[2] : v) + "</span>"; }
+  // двухстрочная entity-ячейка (ElevenLabs): значение + muted-подзаголовок из col.sub
+  if (col.sub && row[col.sub] != null && row[col.sub] !== "") return '<div class="cell-title">' + esc(v) + '</div><div class="cell-sub">' + esc(row[col.sub]) + "</div>";
+  return esc(v);
+}
+
+// Универсальный диапазон дат: фильтрует строки (→ таблица И график) по dateKey графика.
+function parseDate(s) { const m = String(s == null ? "" : s).match(/(\d{4})-(\d{2})-(\d{2})/); return m ? new Date(+m[1], +m[2] - 1, +m[3]) : null; }
+function dateBounds() {
+  const key = (CFG.chart || {}).dateKey;
+  if (!key) return null;
+  const ds = rows.map(r => parseDate(r[key])).filter(Boolean);
+  if (!ds.length) return null;
+  const end = new Date(Math.max(...ds.map(d => d.getTime())));
+  const days = state.dateRange == null ? 30 : state.dateRange;
+  if (!days) return { start: new Date(Math.min(...ds.map(d => d.getTime()))), end, days: 0, key };
+  const start = new Date(end); start.setDate(start.getDate() - (days - 1));
+  return { start, end, days, key };
+}
+function visibleRows() {
+  const q = state.query.toLowerCase();
+  const db = dateBounds();
+  let out = rows.filter(r => {
+    if (db) { const d = parseDate(r[db.key]); if (d && (d < db.start || d > db.end)) return false; }
+    if (state.statusFilter && r[statusCol] !== state.statusFilter) return false;
+    if (!q) return true;
+    return cols.some(c => String(r[c.key] ?? "").toLowerCase().includes(q));
+  });
+  const s = state.sort;
+  if (s && s.key) {
+    const col = cols.find(c => c.key === s.key), num = col && col.type === "num";
+    out = out.slice().sort((a, b) => {
+      let av = a[s.key], bv = b[s.key];
+      if (num) { av = parseFloat(String(av).replace(/[^\d.-]/g, "")) || 0; bv = parseFloat(String(bv).replace(/[^\d.-]/g, "")) || 0; }
+      else { av = String(av ?? "").toLowerCase(); bv = String(bv ?? "").toLowerCase(); }
+      return av < bv ? (s.dir === "asc" ? -1 : 1) : av > bv ? (s.dir === "asc" ? 1 : -1) : 0;
+    });
+  }
+  return out;
+}
+S.sort = key => {
+  const s = state.sort;
+  state.sort = (s && s.key === key) ? (s.dir === "asc" ? { key, dir: "desc" } : null) : { key, dir: "asc" };
+  state.page = 1;
+  render();
+};
+S.page = n => { state.page = n; render(); };
+S.setRange = d => { state.dateRange = d; state.page = 1; render(); };
+
+/* ---------- Топбар: меню, профиль, уведомления, гид ---------- */
+S.closeMenus = () => document.querySelectorAll(".kt-ai-menu[data-open='true']").forEach(m => { m.dataset.open = "false"; });
+S.toggleMenu = id => {
+  const m = $(id), was = m.dataset.open === "true";
+  S.closeMenus();
+  if (!was) m.dataset.open = "true";
+  if (id === "notifMenu" && !was) $("notifBadge").style.display = "none";
+};
+S.toggleRail = () => { const sh = document.querySelector(".kt-ai-shell"); sh.dataset.rail = sh.dataset.rail === "true" ? "false" : "true"; };
+S.stub = label => { S.closeMenus(); toast(label + " – раздел-заглушка прототипа", ""); };
+S.guide = () => {
+  S.closeMenus();
+  const sc = CFG.scenario || {};
+  $("modal").innerHTML = '<div class="kt-ai-modal"><div class="modal-title">Как пользоваться прототипом</div>' +
+    '<div class="kt-ai-meta" style="margin-bottom:4px">' + esc(CFG.product.purpose || CFG.product.name) + ". Кликабелен один сквозной сценарий:</div>" +
+    '<div class="guide-steps">' +
+    '<div class="gs"><span class="n">1</span><span>Откройте запись в «' + esc(sc.headline || "списке") + '» – детали и проверки агента справа</span></div>' +
+    '<div class="gs"><span class="n">2</span><span>Изучите флаги агента и спросите ассистента (кнопка вверху) про любой из них</span></div>' +
+    '<div class="gs"><span class="n">3</span><span>Контрольное действие – «' + esc(sc.control || "Подтвердить") + '»: решение всегда за человеком</span></div>' +
+    "</div>" +
+    '<div class="kt-ai-meta">Данные – правдоподобные примеры по brief; разделы вне сценария – заглушки.</div>' +
+    '<div class="modal-actions"><button class="kt-ai-btn" data-variant="primary" onclick="S.closeModal()">Понятно</button></div></div>';
+  $("modal").style.display = "flex";
+};
+// Онбординг-карусель: 2-3 слайда при первом входе; повтор — из тур-карточки в сайдбаре. Контракт может задать свой CFG.onboarding.
+const ONB = (CFG.onboarding && CFG.onboarding.length) ? CFG.onboarding : [
+  { icon: "sparkles", title: CFG.product.name, text: CFG.product.purpose || "Рабочее пространство KT AI." },
+  { icon: "eye", title: "Как пользоваться", text: "Откройте запись в списке — справа появится карточка с разбором и рекомендацией. Решение принимаете вы." },
+  { icon: "megaphone", title: "Оставьте отзыв", text: "Внизу слева — «Отзыв»: включите режим, кликайте по элементам экрана и оставляйте заметки, затем экспортируйте их в markdown для аналитика." }
+];
+let onbIdx = 0;
+const onbKey = "kt-onb:" + (CFG.product.name || "");
+S.onboarding = (force) => {
+  if (!force) { try { if (localStorage.getItem(onbKey)) return; } catch (e) {} }
+  onbIdx = 0; S.onbRender(); $("onb").style.display = "flex";
+};
+S.onbRender = () => {
+  const s = ONB[onbIdx], last = onbIdx === ONB.length - 1;
+  $("onb").innerHTML = '<div class="onb-card" role="dialog" aria-modal="true" aria-label="Знакомство с прототипом">' +
+    '<button class="kt-ai-icon-button onb-x" aria-label="Закрыть" onclick="S.onbClose()"><svg class="kt-icon"><use href="#x"></use></svg></button>' +
+    '<div class="onb-ic"><svg class="kt-icon"><use href="#' + esc(s.icon || "sparkles") + '"></use></svg></div>' +
+    '<div class="onb-title">' + esc(s.title) + "</div>" +
+    '<div class="onb-text">' + esc(s.text) + "</div>" +
+    '<div class="onb-foot"><div class="onb-dots">' + ONB.map((_, i) => '<span class="' + (i === onbIdx ? "on" : "") + '"></span>').join("") + "</div>" +
+    '<div class="onb-btns">' + (onbIdx > 0 ? '<button class="kt-ai-btn" onclick="S.onbGo(-1)">Назад</button>' : "") +
+    '<button class="kt-ai-btn" data-variant="primary" onclick="' + (last ? "S.onbClose()" : "S.onbGo(1)") + '">' + (last ? "Понятно" : "Далее") + "</button></div></div></div>";
+};
+S.onbGo = (d) => { onbIdx = Math.max(0, Math.min(ONB.length - 1, onbIdx + d)); S.onbRender(); };
+S.onbClose = () => { $("onb").style.display = "none"; try { localStorage.setItem(onbKey, "1"); } catch (e) {} };
+/* Автопоказ онбординга выключен: модалка поверх рабочего экрана — преграда,
+   а не помощь. Тур открывается карточкой «Как это работает» в сайдбаре. */
+S.maybeOnboarding = () => {};
+// Сочетание называется так, как оно нажимается на этой машине. «⌘K» на
+// Windows и Linux — подпись не от той клавиатуры: обработчик слушает и Ctrl,
+// а в поле написано другое.
+function сочетаниеПоиска() {
+  const эппл = typeof navigator !== "undefined" &&
+    /Mac|iPhone|iPad|iPod/i.test(navigator.platform || navigator.userAgent || "");
+  return эппл ? "⌘K" : "Ctrl K";
+}
+// Поиск в шапке: подсказка сочетания — элемент, а не текст в placeholder.
+// Раньше «⌘K» стояло прямо в placeholder, и убрать его продукт не мог никак:
+// на проде поле занимало место, которого в шапке нет (заявка DS-011).
+function renderSearch() {
+  const с = CFG.search || {};
+  const поле = $("searchField"), ввод = $("topSearch"), бейдж = $("searchKbd");
+  if (!поле) return;
+  ввод.placeholder = с.placeholder || "Поиск…";
+  поле.setAttribute("data-compact", с.compact === true);
+  // Бейдж показывается только там, где сочетание действительно работает:
+  // подпись сочетания, которое выключено, — обещание (правило 9d).
+  const есть = с.shortcut !== false && с.compact !== true;
+  бейдж.hidden = !есть;
+  бейдж.textContent = есть ? сочетаниеПоиска() : "";
+  поле.setAttribute("data-shortcut", есть);
+  // В компактном виде о сочетании не написано, но оно работает — назовём его
+  // там, где место есть.
+  ввод.title = с.shortcut === false ? "" : "Поиск (" + сочетаниеПоиска() + ")";
+}
+
+function renderTop() {
+  renderSearch();
+  $("brandName").textContent = CFG.product.name;
+  $("actBtn").style.display = (CFG.activity && CFG.activity.length) ? "inline-flex" : "none";
+  const u = CFG.user || {};
+  const name = u.name || "Пользователь";
+  $("userName").textContent = name;
+  $("userRole").textContent = u.role || "";
+  $("avatarBtn").textContent = name.split(/\s+/).map(w => w[0]).slice(0, 2).join("").toUpperCase();
+  const open = rows.filter(r => statusCol && (statuses[r[statusCol]] || {}).tone !== "ok").length;
+  const notifs = (Array.isArray(CFG.notifications) && CFG.notifications.length ? CFG.notifications
+    : [{ text: open + " записей ждут решения", time: "сейчас", unread: true }]).filter(n => n && n.text);
+  $("notifList").innerHTML = notifs.map(n =>
+    '<div class="kt-ai-notif-item" data-unread="' + (n.unread !== false) + '">' + esc(n.text) +
+    '<span class="time">' + esc(n.time || "") + "</span></div>").join("");
+  const unread = notifs.filter(n => n.unread !== false).length;
+  $("notifBadge").style.display = unread ? "" : "none";
+}
+/* Степпер этапов (для мастера создания). config.steps = {items:[...]} */
+function stepperHtml(cur) {
+  const st = CFG.steps;
+  if (!st || !Array.isArray(st.items) || !st.items.length) return "";
+  return '<div class="kt-ai-stepper case-steps" style="flex-wrap:nowrap">' + st.items.map((x, i) => {
+    const state = i + 1 < cur ? "done" : (i + 1 === cur ? "current" : "");
+    return '<div class="kt-ai-step-item"' + (state ? ' data-state="' + state + '"' : "") + '><span class="n">' +
+      (i + 1 < cur ? "✓" : (i + 1)) + "</span>" + esc(x) + "</div>" +
+      (i < st.items.length - 1 ? '<span class="kt-ai-step-sep"></span>' : "");
+  }).join("") + "</div>";
+}
+
+/* Мастер создания: этап 1 – заявка + документы (dropzone из ДС) */
+S.newCase = () => {
+  S.closeMenus();
+  const entity = CFG.product.entity || "запись";
+  $("modal").innerHTML = '<div class="kt-ai-modal"><div class="modal-title">' +
+    esc(createLabel) + "</div>" + stepperHtml(1) +
+    '<div class="kt-ai-dropzone" id="caseDz" ondragover="event.preventDefault();this.dataset.drag=\'true\'" ondragleave="this.dataset.drag=\'\'" ondrop="event.preventDefault();this.dataset.drag=\'\';S.caseAttach()" onclick="S.caseAttach()">' +
+    '<svg class="kt-icon kt-icon-lg" viewBox="0 0 24 24"><path d="M12 16V4m0 0l-4 4m4-4l4 4"/><path d="M4 16v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3"/></svg>' +
+    'Перетащите заявку или документы<br><span class="kt-ai-meta">заявка из Лотуса, регламент, шаблон – агент извлечёт данные</span></div>' +
+    '<div id="caseFiles"></div>' +
+    '<div class="modal-actions"><button class="kt-ai-btn" onclick="S.closeModal()">Отмена</button>' +
+    '<button class="kt-ai-btn" data-variant="primary" id="caseSubmit" disabled onclick="S.caseCreate()">Создать черновик</button></div></div>';
+  $("modal").style.display = "flex";
+};
+S.caseAttach = () => {
+  if ($("caseFiles").children.length) return;
+  $("caseFiles").innerHTML = '<div class="kt-ai-file-row case-file">' +
+    '<svg class="kt-icon" 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"/><path d="M14 2v6h6"/></svg>' +
+    "Заявка_" + esc(CFG.product.entity || "документ") + '.docx <span class="size">96 КБ</span></div>';
+  $("caseSubmit").disabled = false;
+};
+S.caseCreate = () => {
+  S.closeModal();
+  toast("Черновик создан – агент готовит " + esc(CFG.product.entity || "запись"), "ok");
+  const b = $("notifBadge");
+  b.style.display = ""; b.textContent = (parseInt(b.textContent, 10) || 0) + 1;
+  $("notifList").insertAdjacentHTML("afterbegin",
+    '<div class="kt-ai-notif-item" data-unread="true">Новый ' + esc(CFG.product.entity || "объект") + ': агент извлекает данные из заявки<span class="time">сейчас</span></div>');
+};
+
+/* Орб рисует kt-ai-orb.js — один файл на оба рантайма.
+   Здесь лежала вторая копия анимации, целиком мёртвая: она искала $("orbCanvas"),
+   а такого id в разметке нет — у канваса шапки только класс. Копия не выполнялась
+   ни разу, но ехала в каждый прототип и расходилась с настоящим орбом (свои
+   константы, своя палитра, свой цикл кадров). kt-ai-orb.js монтирует все
+   canvas.kt-ai-orb сам, на DOMContentLoaded. */
+document.addEventListener("click", e => { if (!e.target.closest(".kt-ai-menu-anchor")) S.closeMenus(); });
+
+// Заголовок группы (`nav[].group`) — НЕ пункт: он не кликается и в нумерации
+// не участвует. Переход идёт по индексу пункта (S.nav(i)), поэтому индекс
+// берётся из исходного массива, а заголовок только вставляется перед пунктом,
+// у которого группа сменилась. Вставить заголовок отдельным пунктом было
+// нельзя — он сдвинул бы нумерацию, и state.navIndex перестал бы совпадать
+// с разделом.
+function renderNav() {
+  document.title = CFG.product.name + " · прототип KT AI";
+  let группа = null;
+  $("nav").innerHTML = (CFG.nav || [{ label: "Главная" }]).map((n, i) => {
+    let head = "";
+    if (n.group && n.group !== группа) {
+      // data-rail="keep" — чтобы в полосе значков заголовок не исчез вместе со
+      // своим разделителем: структурное правило рейла снимает всё без иконки.
+      head = '<div class="kt-ai-nav-group" data-rail="keep"><span class="nav-label">' + esc(n.group) + "</span></div>";
+    }
+    if (n.group) группа = n.group; else группа = null;
+    return head +
+    '<div class="kt-ai-nav-item" role="link" tabindex="0" data-active="' + (i === state.navIndex) + '"' + (i === state.navIndex ? ' aria-current="page"' : "") + ' onclick="S.nav(' + i + ')" onkeydown="if(event.key===\'Enter\'||event.key===\' \'){event.preventDefault();S.nav(' + i + ')}">' +
+    '<svg class="kt-icon" aria-hidden="true"><use href="#' + esc(n.icon || "lots") + '"></use></svg>' +
+    '<span class="nav-label">' + esc(n.label) + "</span>" +
+    (n.count != null ? '<span class="count">' + esc(n.count) + "</span>" : "") +
+    "</div>";
+  }).join("") +
+    // v4.0 (Michelle): одноразделный прототип – сайдбар не пустует, тихо объясняет агента
+    (((CFG.nav || []).length <= 1 && CFG.scenario && CFG.scenario.confirmText)
+      ? '<div style="margin:var(--kt-ai-space-6) var(--kt-ai-space-4) 0;padding:var(--kt-ai-space-4) var(--kt-ai-space-5);border:1px solid var(--kt-ai-border);border-radius:var(--kt-ai-radius-lg);background:var(--kt-ai-bg-elevated)">' +
+        '<div class="kt-ai-label" style="margin-bottom:4px">Контроль человека</div>' +
+        '<div class="kt-ai-meta" style="line-height:1.5">' + esc(CFG.scenario.confirmText) + "</div></div>"
+      : "");
+}
+
+// Сводный bar-chart над таблицей (видео Kole Jain: «data drives the form»).
+// chart.groupBy=<колонка> → бары считаются из фильтрованных строк и адаптируются к выбранному табу.
+function renderChart(ch, rowsForChart) {
+  if (!ch) return "";
+  let data = ch.bars || [], total = ch.total, cat = false;
+  if (ch.bucket === "day" && ch.dateKey) {
+    // раскат по дням за выбранный диапазон; rowsForChart уже отфильтрованы (диапазон+таб+поиск)
+    const db = dateBounds(), buckets = {};
+    if (db) for (let d = new Date(db.start); d <= db.end; d.setDate(d.getDate() + 1)) buckets[d.toISOString().slice(0, 10)] = 0;
+    (rowsForChart || []).forEach(r => { const d = parseDate(r[ch.dateKey]); if (d) { const k = d.toISOString().slice(0, 10); if (k in buckets) buckets[k]++; } });
+    const keys = Object.keys(buckets).sort();
+    data = keys.map(k => ({ label: String(+k.slice(8, 10)), value: buckets[k] }));
+    total = String((rowsForChart || []).length);
+  } else if (ch.groupBy) {
+    const g = {};
+    (rowsForChart || []).forEach(r => { const v = r[ch.groupBy]; const k = (v == null || v === "") ? "—" : String(v); g[k] = (g[k] || 0) + 1; });
+    data = Object.keys(g).map(k => ({ label: k, value: g[k] }));
+    total = String((rowsForChart || []).length);
+    cat = true;
+  }
+  if (!data.length) return "";
+  const colorVar = ({ blue: "--kt-ai-chart-blue", green: "--kt-ai-chart-green", orange: "--kt-ai-chart-orange", salmon: "--kt-ai-chart-salmon", pink: "--kt-ai-chart-pink", primary: "--kt-ai-primary" })[ch.color] || "--kt-ai-chart-blue";
+  const max = Math.max(1, ...data.map(b => +b.value || 0));
+  const bars = data.map(b => '<div class="cc-bar"' + tipAttr(b) + '><i style="height:' + Math.round((+b.value || 0) / max * 100) + '%"></i></div>').join("");
+  let axis;
+  if (cat || data.length <= 8) {
+    axis = '<div class="cc-axis cc-axis-cat">' + data.map(b => '<span title="' + esc(b.label || "") + '">' + esc(b.label || "") + "</span>").join("") + "</div>";
+  } else {
+    const n = data.length, step = Math.max(1, Math.ceil(n / 7));
+    axis = '<div class="cc-axis">' + data.map((b, i) => (i % step === 0 || i === n - 1) ? "<span>" + esc(b.label || "") + "</span>" : "").filter(Boolean).join("") + "</div>";
+  }
+  return '<section class="kt-ai-chart-card" style="--cc-color:var(' + colorVar + ')">' +
+    '<div class="cc-head"><div><div class="cc-title">' + esc(ch.title || "") + "</div>" +
+    (total ? '<div class="cc-total"><span class="num">' + esc(total) + "</span>" + (ch.unit ? '<span class="unit">' + esc(ch.unit) + "</span>" : "") + "</div>" : "") + "</div>" +
+    (ch.link ? '<button class="cc-link" type="button" onclick="toast(\'' + esc(ch.link) + " – заглушка прототипа','')\">" + esc(ch.link) + ' →</button>' : "") + "</div>" +
+    '<div class="cc-bars">' + bars + "</div>" + axis + "</section>";
+}
+
+function renderMain() {
+  const sc = CFG.scenario || {};
+  const segs = ['<button class="seg" data-active="' + (state.statusFilter === "") + '" onclick="S.filter(\'\')">Все</button>']
+    .concat(filterKeys.map(k =>
+      '<button class="seg" data-active="' + (state.statusFilter === k) + '" onclick="S.filter(\'' + escJs(k) + '\')">' + esc(statuses[k].label) + "</button>"));
+  const vis = visibleRows();
+  const pageSize = (CFG.table && CFG.table.pageSize) || 12;
+  const pageCount = Math.max(1, Math.ceil(vis.length / pageSize));
+  if (!state.page || state.page > pageCount) state.page = 1;
+  const pageRows = vis.slice((state.page - 1) * pageSize, state.page * pageSize);
+  const selVisible = vis.filter(r => state.selected.has(r._i)).length;
+
+  $("pageTitle").textContent = sc.headline || CFG.product.name;
+  $("pageSub").textContent = CFG.product.purpose || "";
+  let html = "";
+
+  // системный баннер «что-почему-что делать» + действие (не статичный текст)
+  if (CFG.banner && CFG.banner.text) {
+    const b = CFG.banner;
+    const act = b.action ? '<button class="kt-ai-btn" data-size="sm" onclick="' +
+      (b.actionNav != null ? "S.nav(" + b.actionNav + ")" : "S.bannerAction()") + '">' + esc(b.action) + " →</button>" : "";
+    html += '<div class="kt-ai-banner" data-tone="' + esc(b.tone || "info") +
+      '" style="margin-bottom:var(--kt-ai-stack-group);display:flex;align-items:center;gap:var(--kt-ai-space-5)">' +
+      '<span style="flex:1;min-width:0">' + esc(b.text) + "</span>" + act + "</div>";
+  }
+
+  if (CFG.kpis && CFG.kpis.length) {
+    html += '<div class="kt-ai-kpi-strip" data-cards="true">' + CFG.kpis.map(k => kpiHtml(k)).join("") + "</div>";
+  }
+
+  // Табы НАД графиком — график адаптируется к выбранному табу (раскат по фильтрованным строкам)
+  // Универсальный фильтр диапазона дат (если у графика есть dateKey) — фильтрует и таблицу, и график
+  const curRange = state.dateRange == null ? 30 : state.dateRange;
+  const rangeCtl = (CFG.chart && CFG.chart.dateKey) ? '<div class="kt-ai-segmented range-seg">' +
+    [[7, "7 дней"], [30, "30 дней"], [90, "90 дней"], [0, "Всё"]].map(o => '<button class="seg" data-active="' + (curRange === o[0]) + '" onclick="S.setRange(' + o[0] + ')">' + o[1] + "</button>").join("") + "</div>" : "";
+  html += '<div class="toolbar-row"><div class="kt-ai-segmented">' + segs.join("") + '</div><div class="spacer"></div>' +
+    rangeCtl + '<span class="kt-ai-meta">' + vis.length + " из " + rows.length + "</span></div>";
+
+  html += renderChart(CFG.chart, vis);
+
+  html += '<div class="kt-ai-table-wrap" data-framed="true">' +
+    '<div class="kt-ai-table-bulkbar" data-open="' + (selVisible > 0) + '"><span class="count">' + selVisible + ' выбрано</span>' +
+    '<button class="kt-ai-btn" data-size="sm" onclick="S.bulkApprove()">' + esc(sc.control || "Подтвердить") + "</button>" +
+    '<button class="kt-ai-btn" data-size="sm" data-variant="ghost" onclick="S.clearSel()">Снять выбор</button></div>';
+
+  if (!vis.length) {
+    // первый запуск (данных ещё нет) отличаем от «фильтр ничего не нашёл»
+    const zeroData = rows.length === 0;
+    const icon = zeroData
+      ? '<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 10h18M9 16h6"/>'
+      : '<circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/>';
+    html += '<div class="kt-ai-empty"><div class="icon-spot"><svg class="kt-icon kt-icon-lg" viewBox="0 0 24 24">' + icon + '</svg></div>' +
+      '<span class="title">' + (zeroData ? "Пока нет записей" : "Ничего не найдено") + '</span>' +
+      '<span>' + (zeroData ? "Здесь появятся объекты, как только агент их обработает" : "Измените поиск или фильтр статуса") + '</span></div></div>';
+  } else {
+    // Ширина колонки = по содержимому (из ВСЕХ строк → стабильно при фильтрах), с клампом по типу. column.width — явный override.
+    const colw = c => {
+      if (c.width) return c.width;
+      if (c.type === "num") return "92px";
+      if (c.type === "date") return "116px";
+      if (c.type === "status") {
+        const keys = (c.values && c.values.length) ? c.values : Object.keys(statuses);
+        const m = Math.max(7, ...keys.map(k => String((statuses[k] || {}).label || k).length));
+        return Math.min(180, Math.round(m * 7.2 + 42)) + "px";
+      }
+      let m = String(c.label || "").length;
+      for (const r of rows) {
+        m = Math.max(m, String(r[c.key] == null ? "" : r[c.key]).length);
+        if (c.sub) m = Math.max(m, String(r[c.sub] == null ? "" : r[c.sub]).length);
+      }
+      return Math.min(300, Math.max(88, Math.round(m * 7 + 28))) + "px";
+    };
+    const kebab = '<svg class="kt-icon kt-icon-sm" viewBox="0 0 24 24"><circle cx="12" cy="5" r="1.4"/><circle cx="12" cy="12" r="1.4"/><circle cx="12" cy="19" r="1.4"/></svg>';
+    html += '<table class="kt-ai-table" style="table-layout:fixed">' +
+      '<colgroup><col style="width:40px">' + cols.map(c => "<col" + (colw(c) ? ' style="width:' + colw(c) + '"' : "") + ">").join("") + '<col style="width:48px"></colgroup>' +
+      '<thead><tr><th scope="col"><span class="kt-ai-sr-only">Выбор</span></th>' +
+      cols.map(c => {
+        const a = c.align || (c.type === "num" ? "right" : "left");   // выравнивание: num по умолчанию справа, column.align — override
+        const align = a !== "left" ? ' style="text-align:' + a + '"' : "";
+        if (!c.sortable) return '<th scope="col"' + align + ">" + esc(c.label) + "</th>";
+        const on = state.sort && state.sort.key === c.key, dir = on ? state.sort.dir : "";
+        return '<th scope="col"' + align + (on ? ' aria-sort="' + (dir === "asc" ? "ascending" : "descending") + '"' : "") +
+          '><button class="th-sort" type="button" onclick="S.sort(\'' + escJs(c.key) + '\')">' + esc(c.label) +
+          '<svg class="kt-icon th-sort-ic" data-dir="' + dir + '"><use href="#' + (on ? "chevronDown" : "arrowUpDown") + '"></use></svg></button></th>';
+      }).join("") + '<th scope="col"><span class="kt-ai-sr-only">Действия</span></th>' +
+      "</tr></thead><tbody>" +
+      pageRows.map(r => '<tr data-dim="' + (statusCol && statuses[r[statusCol]] && statuses[r[statusCol]].dim ? "true" : "false") + '" onclick="S.open(' + r._i + ')" style="cursor:pointer">' +
+        '<td class="cell-select" onclick="event.stopPropagation()"><label class="kt-ai-checkbox"><input type="checkbox" ' + (state.selected.has(r._i) ? "checked" : "") + ' onchange="S.sel(' + r._i + ',this.checked)"></label></td>' +
+        cols.map(c => { const a = c.align || (c.type === "num" ? "right" : "left"); return '<td data-label="' + esc(c.label) + '"' + (c.type === "num" ? ' class="num"' : "") + (a !== "left" ? ' style="text-align:' + a + '"' : "") + ">" + cellHtml(r, c) + "</td>"; }).join("") +
+        '<td class="row-act" onclick="event.stopPropagation()"><button class="kt-ai-icon-button row-kebab" aria-label="Действия" onclick="S.rowMenu(' + r._i + ',event)">' + kebab + "</button></td>" +
+        "</tr>").join("") +
+      "</tbody></table></div>";
+    if (pageCount > 1) {
+      let pages = "";
+      for (let p = 1; p <= pageCount; p++) pages += '<button class="page-btn" data-active="' + (p === state.page) + '" onclick="S.page(' + p + ')">' + p + "</button>";
+      const from = (state.page - 1) * pageSize + 1, to = Math.min(state.page * pageSize, vis.length);
+      html += '<div class="table-foot"><span class="kt-ai-meta">' + from + "–" + to + " из " + vis.length + "</span>" +
+        '<div class="kt-ai-pagination"><button class="page-btn" ' + (state.page === 1 ? "disabled" : "") + ' aria-label="Назад" onclick="S.page(' + (state.page - 1) + ')">‹</button>' +
+        pages + '<button class="page-btn" ' + (state.page === pageCount ? "disabled" : "") + ' aria-label="Вперёд" onclick="S.page(' + (state.page + 1) + ')">›</button></div></div>';
+    }
+  }
+  return html;
+}
+
+function renderStub(label) {
+  $("pageTitle").textContent = label;
+  $("pageSub").textContent = CFG.product.purpose || "";
+  return '<div class="kt-ai-card section-stub" style="margin-top:0"><div class="kt-ai-empty">' +
+    '<div class="icon-spot"><svg class="kt-icon kt-icon-lg" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 10h18"/></svg></div>' +
+    '<span class="title">Раздел обозначен в концепте</span>' +
+    '<span>Детализирован будет после подтверждения сценария «' + esc((CFG.scenario || {}).headline || "") + '»</span>' +
+    '<button class="kt-ai-btn" data-size="sm" onclick="S.nav(0)">К главному сценарию</button></div></div>';
+}
+
+// Документ-артефакт (что продукт ПРОИЗВОДИТ): карточка с иконкой, статусом и кнопкой «Скачать».
+function docCard(dd, objName) {
+  const fmt = dd.format ? String(dd.format).toUpperCase() : "";
+  const sub = [objName, dd.status, fmt].filter(Boolean).map(esc).join(" · ");
+  const dlName = (dd.label + (objName ? " — " + objName : "")).replace(/['"]/g, "");
+  return '<div class="kt-ai-doc"><span class="doc-ic"><svg class="kt-icon"><use href="#file"></use></svg></span>' +
+    '<span class="doc-meta"><span class="doc-name">' + esc(dd.label) + "</span>" +
+    (sub ? '<span class="doc-sub">' + sub + "</span>" : "") + "</span>" +
+    '<button class="kt-ai-btn" data-size="sm" onclick="S.downloadDoc(\'' + esc(dlName) + '\')"><svg class="kt-icon kt-icon-sm"><use href="#download"></use></svg>Скачать</button></div>';
+}
+// Секция-коллекция документов одного типа по всем записям (nav.view="documents", nav.docType).
+function renderDocs(navItem) {
+  const docType = navItem.docType;
+  const titleKey = (CFG.drawer && CFG.drawer.titleKey) || (cols[0] && cols[0].key);
+  const items = [];
+  rows.forEach(r => (Array.isArray(r._docs) ? r._docs : []).forEach(dd => { if (!docType || dd.type === docType) items.push({ dd, name: r[titleKey] }); }));
+  if (!items.length) return '<div class="kt-ai-card" style="margin-top:0"><div class="kt-ai-empty">' +
+    '<div class="icon-spot"><svg class="kt-icon kt-icon-lg"><use href="#file"></use></svg></div>' +
+    '<span class="title">Документов пока нет</span><span>Появятся, когда агент сформирует их по предложениям</span></div></div>';
+  return '<div class="kt-ai-doc-list">' + items.map(it => docCard(it.dd, it.name)).join("") + "</div>";
+}
+S.downloadDoc = name => {
+  try {
+    const blob = new Blob(["KT AI — прототип\n\n" + name + "\n\nВ продукте здесь будет сформированный документ.\n"], { type: "text/plain;charset=utf-8" });
+    const a = document.createElement("a");
+    a.href = URL.createObjectURL(blob);
+    a.download = name.replace(/[^0-9A-Za-zА-Яа-яЁё]+/g, "_").slice(0, 60) + ".txt";
+    document.body.appendChild(a); a.click(); a.remove();
+    setTimeout(() => URL.revokeObjectURL(a.href), 1000);
+  } catch (e) {}
+  toast("Скачивание: " + name, "ok");
+};
+
+// Архетип экрана из реестра archetypes/registry.json (открытый набор).
+// Дефолт queue. Если архетип неизвестен/не реализован — подбираем безопасную форму
+// по наличию данных, а не ломаем экран: есть секции → custom, есть таблица → queue, иначе → custom.
+
+// document: документ с правками агента по фрагментам (принять/отклонить каждый флаг)
+function renderDocument() {
+  const doc = CFG.document || {}, sc = CFG.scenario || {};
+  $("pageTitle").textContent = sc.headline || doc.title || CFG.product.name;
+  $("pageSub").textContent = CFG.product.purpose || "";
+  if (!state.fragState) state.fragState = {};
+  const frs = Array.isArray(doc.fragments) ? doc.fragments : [];
+  const edits = frs.filter(f => f.op && f.op !== "keep").length, flags = frs.filter(f => f.flag).length;
+  let h = '<div style="max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:var(--kt-ai-stack-group)">';
+  h += bannerHtml();
+  h += '<div class="kt-ai-card" style="padding:var(--kt-ai-space-6)"><span class="kt-ai-label">Что сделал агент</span>' +
+    '<div style="margin-top:var(--kt-ai-space-3)">' + esc(doc.source ? "Собрал документ: " + doc.source + ". " : "") +
+    "Правок: " + edits + ", пометок риска: " + flags + ". Проверьте выделенные фрагменты.</div></div>";
+  if (!frs.length) return h + '<div class="kt-ai-empty"><span class="title">Документ пока пуст</span><span>Здесь появится текст с правками агента</span></div></div>';
+  h += '<div class="kt-ai-card" style="padding:var(--kt-ai-space-8)"><div class="kt-ai-h2" style="margin-bottom:var(--kt-ai-space-6)">' + esc(doc.title || "Документ") + "</div>";
+  h += frs.map((f, i) => {
+    const st = state.fragState[i];
+    let b = '<div style="margin-bottom:var(--kt-ai-space-6);border-left:2px solid ' + (f.flag ? "var(--kt-ai-status-warn-fg)" : "var(--kt-ai-border)") + ';padding-left:var(--kt-ai-space-5)">';
+    if (f.heading) b += '<div class="kt-ai-h3" style="margin-bottom:var(--kt-ai-space-2)">' + esc(f.heading) + "</div>";
+    if (f.op === "edit" && f.was) b += '<div class="kt-ai-diff" style="margin-bottom:var(--kt-ai-space-2)"><span class="line" data-op="del">' + esc(f.was) + '</span><span class="line" data-op="add">' + esc(f.text) + "</span></div>";
+    else if (f.op === "add") b += '<div class="kt-ai-diff" style="margin-bottom:var(--kt-ai-space-2)"><span class="line" data-op="add">' + esc(f.text) + "</span></div>";
+    else if (f.op === "del") b += '<div class="kt-ai-diff" style="margin-bottom:var(--kt-ai-space-2)"><span class="line" data-op="del">' + esc(f.text) + "</span></div>";
+    else b += "<div>" + esc(f.text) + "</div>";
+    if (f.flag) {
+      b += '<div class="kt-ai-banner" data-tone="warn" style="margin-top:var(--kt-ai-space-2)">' + esc(f.flag) + "</div>";
+      b += '<div style="display:flex;gap:var(--kt-ai-space-3);margin-top:var(--kt-ai-space-2)">' +
+        (st === "ok" ? '<span class="kt-ai-status-pill" data-status="ok">Принято</span>'
+          : st === "no" ? '<span class="kt-ai-status-pill" data-status="risk">Отклонено</span>'
+          : '<button class="kt-ai-btn" data-size="sm" data-variant="primary" onclick="S.fragOk(' + i + ')">Принять правку</button>' +
+            '<button class="kt-ai-btn" data-size="sm" onclick="S.fragNo(' + i + ')">Отклонить</button>') + "</div>";
+    }
+    return b + "</div>";
+  }).join("");
+  h += "</div>";
+  h += '<div style="display:flex;gap:var(--kt-ai-space-4)">' +
+    '<button class="kt-ai-btn" data-variant="primary" onclick="S.customAction()">' + esc(sc.control || "Подтвердить документ") + "</button>" +
+    (sc.reject ? '<button class="kt-ai-btn" onclick="S.customAction()">' + esc(sc.reject) + "</button>" : "") + "</div>";
+  return h + "</div>";
+}
+S.fragOk = i => { state.fragState[i] = "ok"; render(); toast("Правка принята", "ok"); };
+S.fragNo = i => { state.fragState[i] = "no"; render(); toast("Правка отклонена — фрагмент вернётся к исходному", "warn"); };
+
+// copilot: чат слева + живой артефакт-результат справа
+function renderCopilot() {
+  const ai = CFG.ai || {}, art = CFG.artifact || {}, sc = CFG.scenario || {};
+  $("pageTitle").textContent = sc.headline || CFG.product.name;
+  $("pageSub").textContent = CFG.product.purpose || "";
+  let chat = '<div class="kt-ai-chat" id="copChat" data-fill="true" role="log" aria-live="polite" aria-label="Диалог с агентом">' + msgHtml("assistant", ai.intro || "Здравствуйте! Опишите, что подготовить.") + "</div>";
+  let comp = "";
+  if (ai.suggestions && ai.suggestions.length)
+    comp += '<div class="kt-ai-suggestions" style="margin:var(--kt-ai-space-3) 0">' +
+      ai.suggestions.map(s => '<button class="kt-ai-suggestion" onclick="S.aiAsk(this.textContent,\'copChat\')">' + esc(s) + "</button>").join("") + "</div>";
+  comp += '<div class="kt-ai-prompt-bar"><textarea rows="1" id="copInput" aria-label="Сообщение агенту" placeholder="Попросить агента…" onkeydown="if(event.key===\'Enter\'&&!event.shiftKey){event.preventDefault();S.aiAsk(this.value,\'copChat\');this.value=\'\'}"></textarea>' +
+    '<button class="kt-ai-prompt-send" aria-label="Отправить" onclick="var i=document.getElementById(\'copInput\');S.aiAsk(i.value,\'copChat\');i.value=\'\'"><svg class="kt-icon"><use href="#send"></use></svg></button></div>';
+  const typeLabel = { document: "Документ", slides: "Слайды", report: "Отчёт", table: "Таблица", letter: "Письмо" }[art.type] || "Результат";
+  let right = '<div class="kt-ai-card" style="padding:var(--kt-ai-space-6);display:flex;flex-direction:column;gap:var(--kt-ai-space-4);min-width:0">' +
+    '<div style="display:flex;justify-content:space-between;align-items:center;gap:var(--kt-ai-space-3)">' +
+    '<span class="kt-ai-label">' + esc(typeLabel) + (art.version ? " · " + esc(art.version) : "") + "</span>" +
+    '<span class="kt-ai-status-pill" data-status="ok">Черновик готов</span></div>' +
+    '<div class="kt-ai-h3">' + esc(art.title || "") + "</div>" +
+    '<div style="white-space:pre-wrap;font-size:var(--kt-ai-text-sm);line-height:1.6;max-height:420px;overflow:auto;border:1px solid var(--kt-ai-border);border-radius:var(--kt-ai-radius-lg);padding:var(--kt-ai-space-5);background:var(--kt-ai-bg-soft)">' + esc(art.preview || "") + "</div>" +
+    '<div style="display:flex;gap:var(--kt-ai-space-3)">' +
+    (Array.isArray(art.actions) && art.actions.length ? art.actions : [sc.control || "Скачать"]).slice(0, 3).map((a, j) =>
+      '<button class="kt-ai-btn" data-size="sm"' + (j === 0 ? ' data-variant="primary"' : "") + ' onclick="S.customAction()">' + esc(a) + "</button>").join("") + "</div></div>";
+  let h = '<div class="kt-ai-cols" style="grid-template-columns:minmax(320px,1fr) minmax(320px,1.1fr);align-items:stretch">' +
+    '<div style="display:flex;flex-direction:column;min-height:420px">' + bannerHtml("var(--kt-ai-space-4)") +
+    chat + '<div style="margin-top:auto">' + comp + "</div></div>" + right + "</div>";
+  return h;
+}
+
+// wizard: пошаговая заявка с автозаполнением агентом
+function renderWizard() {
+  const wz = CFG.wizard || {}, sc = CFG.scenario || {};
+  $("pageTitle").textContent = sc.headline || CFG.product.name;
+  $("pageSub").textContent = CFG.product.purpose || "";
+  const steps = Array.isArray(wz.steps) ? wz.steps : [];
+  if (state.wizStep == null) state.wizStep = Math.min(Math.max((wz.current || 1) - 1, 0), steps.length - 1);
+  const cur = state.wizStep, stp = steps[cur] || { title: "", fields: [] };
+  // референс ElevenLabs (publishing flow): вертикальный степпер слева с описаниями, контент справа
+  let h = '<div class="kt-ai-cols" style="max-width:860px;margin:0 auto;grid-template-columns:230px minmax(0,1fr);gap:var(--kt-ai-space-9)">';
+  h += '<div style="display:flex;flex-direction:column;gap:var(--kt-ai-space-5)">' + steps.map((x, i) => {
+    const st = i < cur ? "done" : (i === cur ? "current" : "");
+    return '<div class="kt-ai-step-item"' + (st ? ' data-state="' + st + '"' : "") + ' style="align-items:flex-start"><span class="n" style="flex-shrink:0">' + (i < cur ? "✓" : i + 1) + "</span>" +
+      '<span><span style="display:block;font-size:var(--kt-ai-text-sm)">' + esc(x.title) + "</span>" +
+      (x.desc ? '<span style="display:block;margin-top:2px;font-size:var(--kt-ai-text-2xs);color:var(--kt-ai-fg-faint);line-height:1.4">' + esc(x.desc) + "</span>" : "") + "</span></div>";
+  }).join("") + "</div>";
+  h += '<div style="display:flex;flex-direction:column;gap:var(--kt-ai-stack-group)">';
+  h += bannerHtml();
+  h += '<div class="kt-ai-card" style="padding:var(--kt-ai-space-7);display:flex;flex-direction:column;gap:var(--kt-ai-space-5)">' +
+    '<div class="kt-ai-h3">' + esc(stp.title) + "</div>" +
+    (stp.fields || []).map(f =>
+      '<label class="kt-ai-field"><span class="cap" style="display:flex;gap:var(--kt-ai-space-2);align-items:center">' + esc(f.label) +
+      (f.prefill ? '<span class="kt-ai-chip" data-ai="true">заполнил агент</span>' : "") + "</span>" +
+      '<input class="kt-ai-input" value="' + esc(String(f.value == null ? "" : f.value)) + '">' +
+      (f.hint ? '<span class="hint">' + esc(f.hint) + "</span>" : "") + "</label>").join("") + "</div>";
+  h += '<div style="display:flex;justify-content:space-between;gap:var(--kt-ai-space-4)">' +
+    '<button class="kt-ai-btn"' + (cur === 0 ? " disabled" : "") + ' onclick="S.wizPrev()">‹ Назад</button>' +
+    (cur < steps.length - 1
+      ? '<button class="kt-ai-btn" data-variant="primary" onclick="S.wizNext()">Далее</button>'
+      : '<button class="kt-ai-btn" data-variant="primary" onclick="S.customAction()">' + esc(sc.control || "Отправить заявку") + "</button>") + "</div>";
+  h += "</div>";
+  return h + "</div>";
+}
+S.wizPrev = () => { if (state.wizStep > 0) { state.wizStep--; render(); } };
+S.wizNext = () => { state.wizStep++; render(); };
+
+
+// kanban: доска статусов – колонки из CFG.statuses, карточки = строки table.rows (клик открывает drawer)
+function renderKanban() {
+  const d = CFG.drawer || {};
+  const titleKey = d.titleKey || (cols[0] || {}).key, subKey = (cols[1] || {}).key;
+  const colKeys = Object.keys(statuses);
+  let h = renderHead();
+  h += '<div style="display:flex;gap:var(--kt-ai-space-4);align-items:flex-start;overflow-x:auto;padding-bottom:var(--kt-ai-space-4);margin-top:var(--kt-ai-space-6)">';
+  h += colKeys.map(k => {
+    const st = statuses[k] || { label: k, tone: "info" };
+    const cards = rows.filter(r => statusCol && String(r[statusCol]) === k);
+    return '<div style="flex:1 1 0;min-width:230px;background:var(--kt-ai-bg-soft);border:1px solid var(--kt-ai-border);border-radius:var(--kt-ai-radius-xl);padding:var(--kt-ai-space-4)">' +
+      '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--kt-ai-space-4)">' + statusTag(k) +
+      '<span class="kt-ai-meta">' + cards.length + "</span></div>" +
+      (cards.length ? cards.map(r => {
+        const flags = r._flags || [];
+        return '<div class="kt-ai-card kt-ai-hover-lift" role="button" tabindex="0" onclick="S.open(' + r._i + ')" onkeydown="if(event.key===\'Enter\'){S.open(' + r._i + ')}" style="cursor:pointer;padding:var(--kt-ai-space-4);margin-bottom:var(--kt-ai-space-3)">' +
+          '<div style="font-size:var(--kt-ai-text-sm);font-weight:500">' + esc(r[titleKey]) + "</div>" +
+          (subKey && r[subKey] != null ? '<div class="kt-ai-meta" style="margin-top:2px">' + esc(r[subKey]) + "</div>" : "") +
+          (flags.length ? '<div class="kt-ai-meta" style="margin-top:var(--kt-ai-space-3);display:flex;align-items:baseline;gap:5px;color:var(--kt-ai-status-warn-fg)">' +
+            '<svg class="kt-icon kt-icon-sm" viewBox="0 0 24 24" style="flex-shrink:0;align-self:center"><path d="M12 9v4m0 4h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/></svg>' +
+            '<span class="kt-ai-truncate" style="min-width:0">' + esc(flags[0]) + "</span>" + (flags.length > 1 ? '<span style="flex-shrink:0">+' + (flags.length - 1) + "</span>" : "") + "</div>" : "") +
+          "</div>";
+      }).join("") : '<div class="kt-ai-meta" style="padding:var(--kt-ai-space-4);text-align:center">Пусто</div>') + "</div>";
+  }).join("");
+  return h + "</div>";
+}
+
+// inbox: список + постоянная панель чтения (обращения, письма) – выбранная запись читается справа
+function renderInbox() {
+  const sc = CFG.scenario || {}, d = CFG.drawer || {}, ib = CFG.inbox || {};
+  const titleKey = ib.titleKey || d.titleKey || (cols[0] || {}).key;
+  if (state.inboxIdx == null || !rows[state.inboxIdx]) state.inboxIdx = (attentionFirst()[0] || rows[0] || {})._i || 0;
+  const cur = rows[state.inboxIdx];
+  let h = renderHead();
+  if (!cur) return h + '<div class="kt-ai-empty"><span class="title">Пока нет записей</span></div>';
+  h += '<div class="kt-ai-cols" style="grid-template-columns:300px minmax(0,1fr);margin-top:var(--kt-ai-space-6)">';
+  h += '<div style="border:1px solid var(--kt-ai-border);border-radius:var(--kt-ai-radius-xl);overflow:hidden">' +
+    rows.map(r => '<div class="kt-ai-row-hover" role="button" tabindex="0" onclick="S.inboxSel(' + r._i + ')" onkeydown="if(event.key===\'Enter\'){S.inboxSel(' + r._i + ')}" style="cursor:pointer;border-radius:0;padding:var(--kt-ai-space-4) var(--kt-ai-space-5);border-bottom:1px solid var(--kt-ai-border)' +
+      (r._i === cur._i ? ";background:var(--kt-ai-bg-active)" : "") + '">' +
+      '<div style="display:flex;justify-content:space-between;gap:var(--kt-ai-space-3);align-items:baseline">' +
+      '<span class="kt-ai-truncate" style="font-size:var(--kt-ai-text-sm);font-weight:500">' + esc(r[titleKey]) + "</span>" +
+      (ib.timeKey && r[ib.timeKey] != null ? '<span class="kt-ai-meta" style="flex-shrink:0;font-size:var(--kt-ai-text-2xs)">' + esc(r[ib.timeKey]) + "</span>" : "") + "</div>" +
+      '<div style="display:flex;justify-content:space-between;gap:var(--kt-ai-space-3);margin-top:2px;align-items:center">' +
+      (ib.subKey && r[ib.subKey] != null ? '<span class="kt-ai-meta kt-ai-truncate">' + esc(r[ib.subKey]) + "</span>" : "<span></span>") +
+      (statusCol ? statusTag(r[statusCol]) : "") + "</div></div>").join("") + "</div>";
+  const flags = cur._flags || [];
+  h += '<div class="kt-ai-card" style="padding:var(--kt-ai-space-7)">' +
+    '<div style="display:flex;justify-content:space-between;gap:var(--kt-ai-space-4);align-items:flex-start"><div class="kt-ai-h2">' + esc(cur[titleKey]) + "</div>" + (statusCol ? statusTag(cur[statusCol]) : "") + "</div>" +
+    '<div style="margin:var(--kt-ai-space-4) 0 var(--kt-ai-space-5)">' +
+    (d.fields && d.fields.length ? d.fields.map(f => '<div class="kt-ai-prop"><span class="k">' + esc(f.label) + '</span><span class="v">' + esc(fmtVal(cur[f.key]) ?? "–") + "</span></div>").join("") : "") + "</div>" +
+    (ib.bodyKey && cur[ib.bodyKey] != null ? '<div style="white-space:pre-wrap;font-size:var(--kt-ai-text-sm);line-height:1.65;border:1px solid var(--kt-ai-border);border-radius:var(--kt-ai-radius-lg);padding:var(--kt-ai-space-5);background:var(--kt-ai-bg-soft)">' + esc(cur[ib.bodyKey]) + "</div>" : "") +
+    (flags.length ? '<div class="kt-ai-label" style="margin-top:var(--kt-ai-space-5)">' + esc(d.flagsLabel || "Разбор агента") + "</div>" +
+      flags.map(f => '<div class="kt-ai-banner" data-tone="info" style="margin-top:var(--kt-ai-space-2)">' + esc(f) + "</div>").join("") : "") +
+    '<div class="drawer-actions"><button class="kt-ai-btn" data-variant="primary" onclick="state.openRow=' + cur._i + ';S.askApprove()">' + esc(sc.control || "Подтвердить") + "</button>" +
+    (sc.reject ? '<button class="kt-ai-btn" onclick="state.openRow=' + cur._i + ';S.reject()">' + esc(sc.reject) + "</button>" : "") + "</div></div>";
+  return h + "</div>";
+}
+S.inboxSel = i => { state.inboxIdx = i; render(); };
+
+// analytics: аналитический разбор – сводка агента, чарты (bar/line/donut на чистом SVG/CSS), выводы с тонами
+
+// переиспользуемый line-чарт (analytics и dashboard): полилиния + область + сетка + подписи оси
+function lineChartSvg(pts, o) {
+  const W = o.W || 300, H = o.H || 120, color = o.color || "var(--kt-ai-chart-blue)";
+  const n = pts.length, x0 = 8, y0 = 12, w = W - 16, hh = H - 36;
+  const vals = pts.map(p => +p.value || 0);
+  const max = Math.max(1, ...vals), min = Math.min(...vals), span = (max - min) || 1;
+  const px = i => x0 + (n > 1 ? i * (w / (n - 1)) : w / 2), py = v => y0 + hh - ((v - min) / span) * hh;
+  const line = pts.map((p, i) => (i ? "L" : "M") + px(i).toFixed(1) + " " + py(+p.value || 0).toFixed(1)).join(" ");
+  const area = line + " L" + px(n - 1).toFixed(1) + " " + (y0 + hh) + " L" + px(0).toFixed(1) + " " + (y0 + hh) + " Z";
+  return '<svg viewBox="0 0 ' + W + " " + H + '" style="width:100%;height:auto;display:block" role="img" aria-label="' + esc(o.title || "") + '">' +
+    [0, .5, 1].map(f => '<line x1="' + x0 + '" y1="' + (y0 + hh * f).toFixed(1) + '" x2="' + (x0 + w) + '" y2="' + (y0 + hh * f).toFixed(1) + '" stroke="var(--kt-ai-border)" stroke-width="1" stroke-dasharray="2 3"/>').join("") +
+    '<path d="' + area + '" fill="' + color + '" opacity="0.10"/>' +
+    '<path d="' + line + '" fill="none" stroke="' + color + '" stroke-width="2" stroke-linejoin="round"/>' +
+    pts.map((p, i) => '<circle cx="' + px(i).toFixed(1) + '" cy="' + py(+p.value || 0).toFixed(1) + '" r="' + (W > 400 ? 3 : 2.6) + '" fill="' + color + '"' + tipAttr(p) + "></circle>").join("") +
+    pts.map((p, i) => { const step = Math.max(1, Math.ceil(n / (W > 400 ? 12 : 7))); if (i % step !== 0 && i !== n - 1) return ""; const anchor = i === 0 ? "start" : i === n - 1 ? "end" : "middle"; return '<text x="' + px(i).toFixed(1) + '" y="' + (H - 6) + '" text-anchor="' + anchor + '" font-size="' + (W > 400 ? 11 : 9) + '" fill="var(--kt-ai-fg-faint)">' + esc(p.label) + "</text>"; }).join("") +
+    '<text x="' + (W > 400 ? x0 : x0 + w) + '" y="' + (y0 - 3) + '"' + (W > 400 ? "" : ' text-anchor="end"') + ' font-size="' + (W > 400 ? 11 : 9) + '" fill="var(--kt-ai-fg-faint)">' + esc(String(max)) + (o.unit ? " " + esc(o.unit) : "") + "</text></svg>";
+}
+const ANALYTICS_PALETTE = ["--kt-ai-chart-blue", "--kt-ai-chart-green", "--kt-ai-chart-orange", "--kt-ai-chart-salmon", "--kt-ai-chart-pink"];
+function tipAttr(b) {
+  // Подсказка марки. hint приходит от продукта ГОТОВЫМ — ничего не считаем и не
+  // форматируем: сервер и браузер округляют по-разному, и разошедшийся формат
+  // это разошедшееся число. Без hint показываем то же, что показывал title.
+  var v = b && b.hint ? JSON.stringify(b.hint) : ((b && b.label ? b.label + ": " : "") + (b ? b.value : ""));
+  return ' data-kt-tip="' + esc(v) + '" tabindex="0"';
+}
+
+function analyticsChartCard(ch, idx) {
+  const pts = Array.isArray(ch.points) ? ch.points.filter(p => p && p.label != null) : [];
+  const vals = pts.map(p => +p.value || 0);
+  const max = Math.max(1, ...vals);
+  const color = "var(" + (ANALYTICS_PALETTE[idx % ANALYTICS_PALETTE.length]) + ")";
+  const toneColor = t => toneFg(t, color);
+  let body = "";
+  if (ch.type === "line") {
+    body = lineChartSvg(pts, { color: color, unit: ch.unit, title: ch.title });
+  } else if (ch.type === "donut") {
+    const total = vals.reduce((a, b) => a + b, 0) || 1;
+    let off = 25, segs = "";
+    pts.forEach((p, i) => {
+      const share = (+p.value || 0) / total * 100;
+      const c = p.tone ? toneColor(p.tone) : "var(" + ANALYTICS_PALETTE[i % ANALYTICS_PALETTE.length] + ")";
+      segs += '<circle r="15.9155" cx="21" cy="21" fill="none" stroke="' + c + '" stroke-width="5.5" stroke-dasharray="' + share.toFixed(2) + " " + (100 - share).toFixed(2) + '" stroke-dashoffset="' + off.toFixed(2) + '"' + tipAttr(p) + "></circle>";
+      off -= share;
+    });
+    body = '<div style="display:flex;gap:var(--kt-ai-space-6);align-items:center">' +
+      '<svg viewBox="0 0 42 42" style="width:118px;height:118px;flex-shrink:0" role="img" aria-label="' + esc(ch.title) + '">' + segs +
+      '<text x="21" y="21.5" text-anchor="middle" dominant-baseline="middle" font-size="8" font-weight="600" fill="var(--kt-ai-fg)">' + esc(ch.total != null ? String(ch.total) : String(total)) + "</text></svg>" +
+      '<div style="flex:1;min-width:0">' + pts.map((p, i) => {
+        const c = p.tone ? toneColor(p.tone) : "var(" + ANALYTICS_PALETTE[i % ANALYTICS_PALETTE.length] + ")";
+        return '<div style="display:flex;align-items:center;gap:var(--kt-ai-space-3);padding:3px 0;font-size:var(--kt-ai-text-xs)">' +
+          '<span style="width:9px;height:9px;border-radius:3px;background:' + c + ';flex-shrink:0"></span>' +
+          '<span style="flex:1;min-width:0;line-height:1.3">' + esc(p.label) + "</span>" +
+          '<span class="kt-ai-num" style="font-weight:600">' + esc(p.value) + "</span>" +
+          '<span class="kt-ai-meta" style="width:38px;text-align:right">' + Math.round((+p.value || 0) / total * 100) + "%</span></div>";
+      }).join("") + "</div></div>";
+  } else {  // bar (горизонтальные полосы: подпись | полоса | значение – читаемее для категорий)
+    body = pts.map(p => {
+      const c = p.tone ? toneColor(p.tone) : color;
+      return '<div class="kt-ai-row-hover" style="display:grid;grid-template-columns:minmax(90px,32%) 1fr 56px;gap:var(--kt-ai-space-3);align-items:center;padding:3px 0;font-size:var(--kt-ai-text-xs)">' +
+        '<span style="line-height:1.3">' + esc(p.label) + "</span>" +
+        '<span style="height:8px;border-radius:4px;background:var(--kt-ai-bg-soft);overflow:hidden;display:block"><span style="display:block;height:100%;border-radius:4px;width:' + Math.round((+p.value || 0) / max * 100) + "%;background:" + c + '"></span></span>' +
+        '<span class="kt-ai-num" style="text-align:right;font-weight:600">' + esc(p.value) + (ch.unit ? ' <span class="kt-ai-meta" style="font-weight:400">' + esc(ch.unit) + "</span>" : "") + "</span></div>";
+    }).join("");
+  }
+  return '<section class="kt-ai-chart-card" style="margin-bottom:0"><div class="cc-head"><div><div class="cc-title">' + esc(ch.title || "") + "</div>" +
+    (ch.total != null && ch.type !== "donut" ? '<div class="cc-total"><span class="num">' + esc(ch.total) + "</span>" + (ch.unit ? '<span class="unit">' + esc(ch.unit) + "</span>" : "") + "</div>" : "") + "</div></div>" +
+    body + (ch.note ? '<div class="kt-ai-meta" style="margin-top:var(--kt-ai-space-4)">' + esc(ch.note) + "</div>" : "") + "</section>";
+}
+function renderAnalytics() {
+  const an = CFG.analytics || {}, sc = CFG.scenario || {};
+  const charts = Array.isArray(an.charts) ? an.charts : [];
+  const finds = Array.isArray(an.findings) ? an.findings : [];
+  let h = renderHead();
+  if (an.summary) h += '<div class="kt-ai-card" style="padding:var(--kt-ai-space-6);margin-top:var(--kt-ai-space-6)"><div style="display:flex;justify-content:space-between;gap:var(--kt-ai-space-4);align-items:baseline"><span class="kt-ai-label">Что увидел агент</span>' +
+    (an.period ? '<span class="kt-ai-meta">' + esc(an.period) + "</span>" : "") + "</div>" +
+    '<div style="margin-top:var(--kt-ai-space-3);line-height:1.6">' + esc(an.summary) + "</div></div>";
+  if (charts.length) h += '<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--kt-ai-space-6);margin-top:var(--kt-ai-space-6)">' +
+    charts.map((ch, i) => analyticsChartCard(ch, i)).join("") + "</div>";
+  if (finds.length) {
+    h += '<div class="kt-ai-h3" style="margin:var(--kt-ai-space-8) 0 var(--kt-ai-space-4)">Выводы агента</div>';
+    h += finds.map(f => '<div class="kt-ai-banner" data-tone="' + esc(f.tone || "info") + '" style="margin-bottom:var(--kt-ai-space-3);display:flex;gap:var(--kt-ai-space-4);align-items:baseline">' +
+      '<span style="flex:1;min-width:0"><strong>' + esc(f.title) + "</strong>" + (f.detail ? " — " + esc(f.detail) : "") + "</span>" +
+      (f.value != null ? '<span class="kt-ai-num" style="font-weight:600;flex-shrink:0">' + esc(f.value) + "</span>" : "") + "</div>").join("");
+  }
+  if (sc.control) h += '<div style="margin-top:var(--kt-ai-space-6)"><button class="kt-ai-btn" data-variant="primary" onclick="S.customAction()">' + esc(sc.control) + "</button></div>";
+  return h;
+}
+
+// calendar: расписание по датам – события сгруппированы по дням (окна работ, дежурства, сроки)
+const CAL_MONTHS = ["января", "февраля", "марта", "апреля", "мая", "июня", "июля", "августа", "сентября", "октября", "ноября", "декабря"];
+const CAL_DAYS = ["вс", "пн", "вт", "ср", "чт", "пт", "сб"];
+function renderCalendar() {
+  const cal = CFG.calendar || {};
+  const evs = (Array.isArray(cal.events) ? cal.events : []).filter(e => e && e.date && e.title).slice().sort((a, b) => String(a.date + (a.time || "")).localeCompare(String(b.date + (b.time || ""))));
+  const byDay = {};
+  evs.forEach(e => { (byDay[e.date] = byDay[e.date] || []).push(e); });
+  let h = renderHead();
+  h += '<div style="display:flex;justify-content:space-between;align-items:baseline;margin:var(--kt-ai-space-6) 0 var(--kt-ai-space-4)"><div class="kt-ai-h3">' + esc(cal.title || "Расписание") + "</div>" +
+    (cal.range ? '<span class="kt-ai-meta">' + esc(cal.range) + "</span>" : "") + "</div>";
+  h += Object.keys(byDay).sort().map(dk => {
+    const m = dk.match(/(\d{4})-(\d{2})-(\d{2})/);
+    const dt = m ? new Date(+m[1], +m[2] - 1, +m[3]) : null;
+    const head = dt ? (+m[3]) + " " + CAL_MONTHS[dt.getMonth()] + ", " + CAL_DAYS[dt.getDay()] : dk;
+    return '<div style="margin-bottom:var(--kt-ai-space-5)"><div class="kt-ai-label" style="margin-bottom:var(--kt-ai-space-3)">' + esc(head) + "</div>" +
+      byDay[dk].map(e => {
+        const tone = e.tone || "info";
+        const edge = toneFg(tone, "var(--kt-ai-border-strong)");
+        return '<div class="kt-ai-card kt-ai-hover-lift" style="padding:var(--kt-ai-space-4) var(--kt-ai-space-5);margin-bottom:var(--kt-ai-space-3);border-left:3px solid ' + edge + ';display:flex;gap:var(--kt-ai-space-5);align-items:baseline">' +
+          '<span class="kt-ai-num" style="flex-shrink:0;width:88px;font-size:var(--kt-ai-text-xs)">' + esc(e.time || "весь день") + "</span>" +
+          '<span style="flex:1;min-width:0"><span style="font-size:var(--kt-ai-text-sm);font-weight:500">' + esc(e.title) + "</span>" +
+          (e.note ? '<span class="kt-ai-meta" style="display:block;margin-top:2px">' + esc(e.note) + "</span>" : "") + "</span>" +
+          (e.badge ? '<span class="kt-ai-status-pill" data-status="' + esc(tone) + '">' + esc(e.badge) + "</span>" : "") + "</div>";
+      }).join("") + "</div>";
+  }).join("");
+  if (!evs.length) h += '<div class="kt-ai-empty"><span class="title">Событий пока нет</span></div>';
+  return h;
+}
+
+// map: схема-карта участка – точки (0-100 по обеим осям) со статусами, линии-связи; НЕ геокарта с тайлами
+function renderMap() {
+  const mp = CFG.map || {};
+  const pts = (Array.isArray(mp.points) ? mp.points : []).filter(p => p && p.label != null);
+  const toneOf = p => (p.status && statuses[p.status] ? statuses[p.status].tone : p.tone) || "info";
+  const fillOf = t => toneFg(t, "var(--kt-ai-fg-muted)");
+  const px = v => 40 + (Math.max(0, Math.min(100, +v || 0)) / 100) * 920;   // viewBox 1000x600: подписи рендерятся ~13px
+  const py = v => 60 + (Math.max(0, Math.min(100, +v || 0)) / 100) * 480;
+  let svg = "";
+  (Array.isArray(mp.lines) ? mp.lines : []).forEach(l => {
+    const a = pts[l[0]], b = pts[l[1]];
+    if (a && b) svg += '<line x1="' + px(a.x).toFixed(1) + '" y1="' + py(a.y).toFixed(1) + '" x2="' + px(b.x).toFixed(1) + '" y2="' + py(b.y).toFixed(1) + '" stroke="var(--kt-ai-border-strong)" stroke-width="4"/>';
+  });
+  pts.forEach(p => {
+    const t = toneOf(p);
+    const tx = Math.max(110, Math.min(890, px(p.x)));   // подпись не вылезает за край схемы
+    svg += '<circle data-map-pt="true" cx="' + px(p.x).toFixed(1) + '" cy="' + py(p.y).toFixed(1) + '" r="9" fill="' + fillOf(t) + '"' + (t === "risk" ? ' stroke="var(--kt-ai-status-risk-fg)" stroke-opacity="0.35" stroke-width="8"' : "") + "><title>" + esc(p.label + (p.note ? " — " + p.note : "")) + "</title></circle>" +
+      '<text x="' + tx.toFixed(1) + '" y="' + (py(p.y) - 18).toFixed(1) + '" text-anchor="middle" font-size="12" fill="var(--kt-ai-fg-muted)">' + esc(p.label) + "</text>";
+  });
+  const att = pts.filter(p => /warn|risk/.test(toneOf(p)));
+  let h = renderHead();
+  h += '<div class="kt-ai-card" style="padding:var(--kt-ai-space-6);margin-top:var(--kt-ai-space-6)">' +
+    (mp.title ? '<div class="kt-ai-label" style="margin-bottom:var(--kt-ai-space-4)">' + esc(mp.title) + "</div>" : "") +
+    '<svg viewBox="0 0 1000 600" style="width:100%;height:auto;display:block;background-image:radial-gradient(var(--kt-ai-border) 0.5px,transparent 0.5px);background-size:8px 8px;border-radius:var(--kt-ai-radius-lg)" role="img" aria-label="' + esc(mp.title || "Схема участка") + '">' + svg + "</svg>" +
+    '<div style="display:flex;gap:var(--kt-ai-space-5);margin-top:var(--kt-ai-space-4);flex-wrap:wrap">' +
+    [["ok", "в норме"], ["warn", "внимание"], ["risk", "проблема"]].map(l => '<span class="kt-ai-meta" style="display:flex;align-items:center;gap:5px"><span style="width:8px;height:8px;border-radius:50%;background:' + fillOf(l[0]) + '"></span>' + l[1] + "</span>").join("") + "</div></div>";
+  if (att.length) {
+    h += '<div class="kt-ai-h3" style="margin:var(--kt-ai-space-7) 0 var(--kt-ai-space-4)">Требует внимания</div>';
+    h += att.map(p => '<div class="kt-ai-banner" data-tone="' + (toneOf(p) === "risk" ? "risk" : "warn") + '" style="margin-bottom:var(--kt-ai-space-3)"><strong>' + esc(p.label) + "</strong>" + (p.note ? " — " + esc(p.note) : "") + "</div>").join("");
+  }
+  return h;
+}
+
+// timeline: хронология дела/инцидента – вертикальная лента событий с акторами и тонами
+function renderTimeline() {
+  const tl = CFG.timeline || {};
+  const evs = (Array.isArray(tl.events) ? tl.events : []).filter(e => e && e.title);
+  const dotOf = t => toneFg(t, "var(--kt-ai-fg-faint)");
+  let h = renderHead();
+  if (tl.title) h += '<div class="kt-ai-h3" style="margin:var(--kt-ai-space-6) 0 var(--kt-ai-space-4)">' + esc(tl.title) + "</div>";
+  h += '<div style="max-width:720px;margin-top:var(--kt-ai-space-5)">' + evs.map((e, i) => {
+    const last = i === evs.length - 1;
+    return '<div style="display:grid;grid-template-columns:96px 20px minmax(0,1fr);gap:var(--kt-ai-space-3)">' +
+      '<span class="kt-ai-num" style="font-size:var(--kt-ai-text-xs);color:var(--kt-ai-fg-muted);text-align:right;padding-top:2px">' + esc(e.time || "") + "</span>" +
+      '<span style="display:flex;flex-direction:column;align-items:center"><span style="width:10px;height:10px;border-radius:50%;background:' + dotOf(e.tone) + ";margin-top:4px;flex-shrink:0" +
+      (e.current ? ";box-shadow:0 0 0 3px var(--kt-ai-bg-active)" : "") + '"></span>' +
+      (last ? "" : '<span style="flex:1;width:1px;background:var(--kt-ai-border);margin-top:3px"></span>') + "</span>" +
+      '<div style="padding-bottom:' + (last ? "0" : "var(--kt-ai-space-6)") + '">' +
+      '<div style="display:flex;gap:var(--kt-ai-space-3);align-items:baseline;flex-wrap:wrap"><span style="font-size:var(--kt-ai-text-sm);font-weight:' + (e.current ? "600" : "500") + '">' + esc(e.title) + "</span>" +
+      (e.actor ? '<span class="kt-ai-chip"' + (/агент/i.test(e.actor) ? ' data-ai="true"' : "") + ">" + esc(e.actor) + "</span>" : "") + "</div>" +
+      (e.text ? '<div class="kt-ai-meta" style="margin-top:3px;line-height:1.55">' + esc(e.text) + "</div>" : "") + "</div></div>";
+  }).join("") + "</div>";
+  if (!evs.length) h += '<div class="kt-ai-empty"><span class="title">Событий пока нет</span></div>';
+  return h;
+}
+
+function mainByLayout() {
+  const lay = (CFG.archetype || CFG.layout || "queue");
+  if (lay === "queue") return renderMain();
+  if (lay === "cockpit") return renderCockpit();
+  if (lay === "dashboard") return renderDashboard();
+  if (lay === "compare") return renderCompare();
+  if (lay === "conversational") return renderConversational();
+  if (lay === "custom") return renderCustom();
+  if (lay === "document") return renderDocument();
+  if (lay === "copilot") return renderCopilot();
+  if (lay === "wizard") return renderWizard();
+  if (lay === "kanban") return renderKanban();
+  if (lay === "inbox") return renderInbox();
+  if (lay === "analytics") return renderAnalytics();
+  if (lay === "calendar") return renderCalendar();
+  if (lay === "map") return renderMap();
+  if (lay === "timeline") return renderTimeline();
+  // неизвестный / planned архетип → не падаем, выбираем форму под данные
+  if (Array.isArray(CFG.sections) && CFG.sections.length) return renderCustom();
+  if (CFG.table && CFG.table.rows && CFG.table.rows.length) return renderMain();
+  return renderCustom();
+}
+function attentionFirst() {
+  const att = rows.filter(r => statusCol && statuses[r[statusCol]] && /warn|risk/.test(statuses[r[statusCol]].tone || ""));
+  return att.length ? att : rows;
+}
+function plainTable(list) {
+  if (!list.length) return '<div class="kt-ai-empty"><span class="title">Пока нет записей</span><span>Здесь появятся объекты, как только агент их обработает</span></div>';
+  return '<div class="kt-ai-table-wrap"><table class="kt-ai-table"><thead><tr>' +
+    cols.map(c => "<th" + (c.type === "num" ? ' style="text-align:right"' : "") + ">" + esc(c.label) + "</th>").join("") +
+    '</tr></thead><tbody>' +
+    list.map(r => '<tr onclick="S.open(' + r._i + ')" style="cursor:pointer">' +
+      cols.map(c => "<td" + (c.type === "num" ? ' class="num"' : "") + ">" + cellHtml(r, c) + "</td>").join("") + "</tr>").join("") +
+    '</tbody></table></div>';
+}
+const TONE_FG = { ok: "var(--kt-ai-status-ok-fg)", warn: "var(--kt-ai-status-warn-fg)", risk: "var(--kt-ai-status-risk-fg)" };
+function toneFg(t, dflt) { return TONE_FG[t] || dflt; }
+function bannerHtml(mb) {
+  if (!(CFG.banner && CFG.banner.text)) return "";
+  return '<div class="kt-ai-banner" data-tone="' + esc(CFG.banner.tone || "info") + '"' + (mb ? ' style="margin-bottom:' + mb + '"' : "") + '>' + esc(CFG.banner.text) + "</div>";
+}
+function fmtVal(v) {
+  // ISO-дата не должна протекать в интерфейс: 2026-07-21 -> 21.07.2026
+  const m = String(v == null ? "" : v).match(/^(\d{4})-(\d{2})-(\d{2})$/);
+  return m ? m[3] + "." + m[2] + "." + m[1] : v;
+}
+// hint — «из чего считано» (40 знаков: знаменатель, доля, период).
+// note — «чем это число НЕ является»: оговорка о поле-источнике. Потолка у неё
+// нет и она не прячется под клик: полосу плиток видят все, и оговорка обязана
+// стоять там же, где число, иначе её читают не все (см. .kt-ai-kpi .note).
+function kpiHtml(k, extra) {
+  const long = String(k.value == null ? "" : k.value).length > 12;
+  return '<div class="kt-ai-kpi"' + (extra || "") + '><span class="value"' + (long ? ' data-long="true"' : "") + '>' + esc(k.value) + '</span><span class="label">' + esc(k.label) + "</span>" + (k.hint ? '<span class="hint">' + esc(k.hint) + "</span>" : "") + (k.note ? '<span class="note">' + esc(k.note) + "</span>" : "") + "</div>";
+}
+
+// Вывод раздела: последний блок экрана, после таблицы. Заголовок необязателен,
+// абзацы разделяются пустой строкой — вывод бывает длиннее одной мысли.
+function conclusionHtml() {
+  const c = CFG.conclusion;
+  if (!c || !c.text) return "";
+  const абзацы = String(c.text).split(/\n{2,}/).map(t => t.trim()).filter(Boolean);
+  return '<section class="kt-ai-conclusion">' +
+    (c.title ? '<span class="title">' + esc(c.title) + "</span>" : "") +
+    абзацы.map(t => '<span class="text">' + esc(t) + "</span>").join("") + "</section>";
+}
+function renderHead() {
+  const sc = CFG.scenario || {};
+  $("pageTitle").textContent = sc.headline || CFG.product.name;
+  $("pageSub").textContent = CFG.product.purpose || "";
+  let h = "";
+  h += bannerHtml("var(--kt-ai-stack-group)");
+  if (CFG.kpis && CFG.kpis.length) h += '<div class="kt-ai-kpi-strip" data-cards="true">' + CFG.kpis.map(k => kpiHtml(k)).join("") + "</div>";
+  return h;
+}
+// dashboard: метрики наверху + список «требует внимания» (управление состоянием процесса)
+function renderDashboard() {
+  const att = rows.filter(r => statusCol && statuses[r[statusCol]] && /warn|risk/.test(statuses[r[statusCol]].tone || ""));
+  const db = CFG.dashboard || {};
+  const series = Array.isArray(db.series) ? db.series.filter(s => s && Array.isArray(s.points) && s.points.length >= 2) : [];
+  if (!series.length) {
+    // простой дашборд (без блока dashboard): KPI + список внимания
+    return renderHead() +
+      '<div class="kt-ai-h3" style="margin:var(--kt-ai-space-8) 0 var(--kt-ai-space-4)">' + (att.length ? "Требует внимания" : "Записи") + "</div>" +
+      plainTable(att.length ? att : rows);
+  }
+  // референс ElevenLabs dashboard: KPI-карточки = табы, выбранная метрика управляет большим чартом
+  const sc = CFG.scenario || {};
+  $("pageTitle").textContent = sc.headline || CFG.product.name;
+  $("pageSub").textContent = CFG.product.purpose || "";
+  let h = "";
+  if (CFG.banner && CFG.banner.text) {
+    const b = CFG.banner;
+    const act = b.action ? '<button class="kt-ai-btn" data-size="sm" onclick="' + (b.actionNav != null ? "S.nav(" + b.actionNav + ")" : "S.bannerAction()") + '">' + esc(b.action) + " →</button>" : "";
+    h += '<div class="kt-ai-banner" data-tone="' + esc(b.tone || "info") + '" style="margin-bottom:var(--kt-ai-stack-group);display:flex;align-items:center;gap:var(--kt-ai-space-5)"><span style="flex:1;min-width:0">' + esc(b.text) + "</span>" + act + "</div>";
+  }
+  // KPI-табы: series[i].kpi — индекс метрики в CFG.kpis (по умолчанию i)
+  const kpis = Array.isArray(CFG.kpis) ? CFG.kpis : [];
+  const kpiToSeries = {};
+  series.forEach((s, si) => { const ki = s.kpi != null ? +s.kpi : si; if (kpiToSeries[ki] == null && kpis[ki]) kpiToSeries[ki] = si; });
+  if (state.dashKpi == null || kpiToSeries[state.dashKpi] == null) state.dashKpi = +Object.keys(kpiToSeries)[0];
+  h += '<div class="kt-ai-kpi-strip" data-cards="true">' + kpis.map((k, ki) => {
+    const clickable = kpiToSeries[ki] != null, active = clickable && ki === state.dashKpi;
+    return kpiHtml(k, clickable ? ' data-tab="true" data-active="' + active + '" role="tab" aria-selected="' + active + '" tabindex="0" onclick="S.dashKpi(' + ki + ')" onkeydown="if(event.key===\'Enter\'||event.key===\' \'){event.preventDefault();S.dashKpi(' + ki + ')}"' : "");
+  }).join("") + "</div>";
+  const cur = series[kpiToSeries[state.dashKpi]];
+  // без дубля цифры: значение уже на выбранной KPI-карточке (референс ElevenLabs)
+  h += '<section class="kt-ai-chart-card"><div class="cc-head"><div><div class="cc-title">' + esc(cur.title || (kpis[state.dashKpi] || {}).label || "") + "</div></div>" +
+    (db.range ? '<span class="kt-ai-meta">' + esc(db.range) + "</span>" : "") + "</div>" +
+    lineChartSvg(cur.points, { W: 1160, H: 290, color: "var(--kt-ai-chart-blue)", unit: cur.unit, title: cur.title }) +
+    (cur.note ? '<div class="kt-ai-meta" style="margin-top:var(--kt-ai-space-4)">' + esc(cur.note) + "</div>" : "") + "</section>";
+  // нижняя сетка разборов: cards (мини-карточки статистики) / share (доли с процент-барами) / top (топ-N с баром за подписью)
+  const brs = Array.isArray(db.breakdowns) ? db.breakdowns : [];
+  if (brs.length) h += '<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:var(--kt-ai-space-6)">' + brs.map(br => {
+    const items = Array.isArray(br.items) ? br.items : [];
+    let body = "";
+    if (br.type === "cards") {
+      body = '<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--kt-ai-space-4)">' + items.map(it =>
+        '<div style="border:1px solid var(--kt-ai-border);border-radius:var(--kt-ai-radius-lg);padding:var(--kt-ai-space-4)">' +
+        '<div style="font-size:var(--kt-ai-text-sm);font-weight:500;margin-bottom:var(--kt-ai-space-3)">' + esc(it.title) + "</div>" +
+        (Array.isArray(it.stats) ? it.stats : []).map(st => '<div style="display:flex;justify-content:space-between;gap:var(--kt-ai-space-3);padding:2px 0;font-size:var(--kt-ai-text-xs)"><span class="kt-ai-meta">' + esc(st.label) + '</span><span class="kt-ai-num">' + esc(st.value) + "</span></div>").join("") + "</div>").join("") + "</div>";
+    } else if (br.type === "share") {
+      const total = items.reduce((a, b) => a + (+b.value || 0), 0) || 1;
+      body = items.map(it => {
+        const pct = Math.round((+it.value || 0) / total * 100);
+        return '<div class="kt-ai-row-hover" style="display:grid;grid-template-columns:minmax(90px,38%) 1fr 44px;gap:var(--kt-ai-space-3);align-items:center;padding:4px 0;font-size:var(--kt-ai-text-xs)">' +
+          '<span style="line-height:1.3">' + esc(it.label) + "</span>" +
+          '<span style="height:7px;border-radius:4px;background:var(--kt-ai-bg-soft);overflow:hidden;display:block"><span style="display:block;height:100%;border-radius:4px;width:' + pct + '%;background:var(--kt-ai-primary)"></span></span>' +
+          '<span class="kt-ai-num" style="text-align:right">' + pct + "%</span></div>";
+      }).join("");
+    } else {  // top: бар-трек за подписью, значение справа (референс «Top called paths»)
+      const max = Math.max(1, ...items.map(it => +it.value || 0));
+      body = items.map(it =>
+        '<div class="kt-ai-row-hover" style="display:flex;align-items:center;gap:var(--kt-ai-space-3);padding:3px 0;font-size:var(--kt-ai-text-xs)">' +
+        '<span style="flex:1;position:relative;border-radius:var(--kt-ai-radius-sm);overflow:hidden;padding:4px 8px;background:var(--kt-ai-bg)">' +
+        '<span style="position:absolute;inset:0;width:' + Math.round((+it.value || 0) / max * 100) + '%;background:var(--kt-ai-bg-soft);border-radius:var(--kt-ai-radius-sm)"></span>' +
+        '<span style="position:relative">' + esc(it.label) + "</span></span>" +
+        '<span class="kt-ai-num" style="width:56px;text-align:right">' + esc(it.value) + (br.unit ? ' <span class="kt-ai-meta">' + esc(br.unit) + "</span>" : "") + "</span></div>").join("");
+    }
+    return '<section class="kt-ai-chart-card" style="margin-bottom:0"><div class="cc-head"><div class="cc-title">' + esc(br.title) + "</div></div>" + body +
+      (br.note ? '<div class="kt-ai-meta" style="margin-top:var(--kt-ai-space-4)">' + esc(br.note) + "</div>" : "") + "</section>";
+  }).join("") + "</div>";
+  if (att.length) {
+    const regIdx = (CFG.nav || []).findIndex(n => n && n.view === "registry");
+    h += '<div style="display:flex;justify-content:space-between;align-items:baseline;margin:var(--kt-ai-space-8) 0 var(--kt-ai-space-4)"><div class="kt-ai-h3">Требует внимания</div>' +
+      (regIdx > 0 ? '<button class="cc-link" type="button" onclick="S.nav(' + regIdx + ')">' + esc((CFG.nav[regIdx] || {}).label || "Все записи") + " →</button>" : "") + "</div>" +
+      plainTable(att.slice(0, 5));
+    if (att.length > 5 && regIdx > 0) h += '<div class="kt-ai-meta" style="margin-top:var(--kt-ai-space-3)">Ещё ' + (att.length - 5) + ' — в разделе «' + esc((CFG.nav[regIdx] || {}).label) + "»</div>";
+  }
+  return h;
+}
+S.dashKpi = ki => { state.dashKpi = ki; render(); };
+// cockpit: один фокусный объект с сигналами и решением + компактная очередь сбоку (мониторинг/исключения)
+function renderCockpit() {
+  const sc = CFG.scenario || {}, d = CFG.drawer || {};
+  const focal = attentionFirst()[0] || rows[0];
+  let html = renderHead();
+  if (!focal) return html + '<div class="kt-ai-empty"><span class="title">Пока нет объектов</span></div>';
+  const flags = focal._flags || [];
+  html += '<div style="display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:var(--kt-ai-space-6);margin-top:var(--kt-ai-space-6)">';
+  html += '<div class="kt-ai-card" style="padding:var(--kt-ai-space-7)"><div class="kt-ai-h2">' + esc(focal[d.titleKey || cols[0].key]) + "</div>" +
+    '<div style="margin:6px 0 var(--kt-ai-space-5)">' + (statusCol ? statusTag(focal[statusCol]) : "") + "</div>" +
+    (d.fields && d.fields.length ? d.fields : cols).map(f => '<div class="kt-ai-prop"><span class="k">' + esc(f.label) + '</span><span class="v">' + esc(fmtVal(focal[f.key]) ?? "–") + "</span></div>").join("") +
+    (flags.length ? '<div class="kt-ai-label" style="margin-top:var(--kt-ai-space-5)">' + esc(d.flagsLabel || "Проверки агента") + "</div>" +
+      flags.map(f => '<div class="kt-ai-banner" data-tone="info" style="margin-top:var(--kt-ai-space-2)">' + esc(f) + "</div>").join("") : "") +
+    '<div class="drawer-actions"><button class="kt-ai-btn" data-variant="primary" onclick="state.openRow=' + focal._i + ';S.askApprove()">' + esc(sc.control || "Подтвердить") + "</button>" +
+    (sc.reject ? '<button class="kt-ai-btn" onclick="state.openRow=' + focal._i + ';S.reject()">' + esc(sc.reject) + "</button>" : "") +
+    "</div></div>";
+  html += '<div><div class="kt-ai-label" style="margin-bottom:var(--kt-ai-space-3)">Очередь</div>' +
+    rows.map(r => '<div class="kt-ai-nav-item" onclick="S.open(' + r._i + ')" style="cursor:pointer;justify-content:space-between;gap:var(--kt-ai-space-3)"><span class="kt-ai-truncate">' + esc(r[d.titleKey || cols[0].key]) + "</span>" + (statusCol ? statusTag(r[statusCol]) : "") + "</div>").join("") + "</div>";
+  return html + "</div>";
+}
+
+// compare: сверка двух источников по парам полей, расхождения подсвечены (аудит/финансы/договоры)
+function renderCompare() {
+  const sc = CFG.scenario || {}, d = CFG.drawer || {}, cmp = CFG.compare || {};
+  const pairs = Array.isArray(cmp.pairs) ? cmp.pairs : [];
+  if (!pairs.length) return renderMain();   // защита: нет пар → надёжная очередь
+  const focal = rows[state.focusRow] || attentionFirst()[0] || rows[0];
+  let html = renderHead();
+  if (!focal) return html + '<div class="kt-ai-empty"><span class="title">Пока нет объектов для сверки</span></div>';
+  const mism = p => String(focal[p.a] ?? "") !== String(focal[p.b] ?? "");
+  // в узких панелях сверки поле стопкой (метка над значением) – фикс. ширина .kt-ai-prop тут ломает перенос
+  const panel = (label, side) => '<div class="kt-ai-card" style="padding:var(--kt-ai-space-6)"><div class="kt-ai-label" style="margin-bottom:var(--kt-ai-space-4)">' + esc(label) + "</div>" +
+    pairs.map(p => '<div style="padding:6px 8px;border-radius:var(--kt-ai-radius-md);margin-bottom:2px' + (mism(p) ? ';background:var(--kt-ai-status-warn-bg)' : '') + '">' +
+      '<div class="kt-ai-meta" style="font-size:var(--kt-ai-text-2xs)">' + esc(p.label) + '</div>' +
+      '<div style="font-size:var(--kt-ai-text-sm);margin-top:1px">' + esc(fmtVal(focal[side === "a" ? p.a : p.b]) ?? "–") + '</div></div>').join("") + "</div>";
+  const flags = focal._flags || [];
+  html += '<div style="display:grid;grid-template-columns:230px minmax(0,1fr);gap:var(--kt-ai-space-6);margin-top:var(--kt-ai-space-6)">';
+  html += '<div><div class="kt-ai-label" style="margin-bottom:var(--kt-ai-space-3)">Объекты сверки</div>' +
+    rows.map(r => '<div class="kt-ai-nav-item" onclick="S.compareFocus(' + r._i + ')" style="cursor:pointer;justify-content:space-between;gap:var(--kt-ai-space-3)' + (r._i === focal._i ? ";background:var(--kt-ai-bg-active)" : "") + '"><span class="kt-ai-truncate">' + esc(r[d.titleKey || cols[0].key]) + "</span>" + (statusCol ? statusTag(r[statusCol]) : "") + "</div>").join("") + "</div>";
+  html += '<div><div class="kt-ai-h2" style="margin-bottom:var(--kt-ai-space-4)">' + esc(focal[d.titleKey || cols[0].key]) + "</div>" +
+    '<div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--kt-ai-space-4)">' + panel(cmp.aLabel || "Источник A", "a") + panel(cmp.bLabel || "Источник B", "b") + "</div>" +
+    (flags.length ? '<div class="kt-ai-label" style="margin-top:var(--kt-ai-space-5)">' + esc(d.flagsLabel || "Расхождения") + "</div>" + flags.map(f => '<div class="kt-ai-banner" data-tone="warn" style="margin-top:var(--kt-ai-space-2)">' + esc(f) + "</div>").join("") : "") +
+    '<div class="drawer-actions"><button class="kt-ai-btn" data-variant="primary" onclick="state.openRow=' + focal._i + ';S.askApprove()">' + esc(sc.control || "Подтвердить") + "</button>" +
+    (sc.reject ? '<button class="kt-ai-btn" onclick="state.openRow=' + focal._i + ';S.reject()">' + esc(sc.reject) + "</button>" : "") +
+    "</div></div>";
+  return html + "</div>";
+}
+
+// conversational: чат как главная рабочая область (референс ElevenLabs Conversational AI).
+// Орб-аватар ассистента, ответ без пузыря, подсказки, prompt-bar снизу. Переиспользует S.aiAsk.
+function renderConversational() {
+  const ai = CFG.ai || {}, sc = CFG.scenario || {};
+  $("pageTitle").textContent = sc.headline || CFG.product.name;
+  $("pageSub").textContent = CFG.product.purpose || "";
+  let h = '<div style="max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:var(--kt-ai-space-6);height:calc(100dvh - 106px);min-height:420px">';
+  h += bannerHtml();
+  // лента (пустая и скрытая до первого вопроса)
+  h += '<div class="kt-ai-chat" id="convChat" data-fill="true" role="log" aria-live="polite" aria-label="Диалог с агентом" style="display:none"></div>';
+  // подсказки + композер: единый док, который переезжает из hero-центра вниз
+  let dock = '<div id="convDock" style="display:flex;flex-direction:column;gap:var(--kt-ai-space-3);width:100%;max-width:680px;margin:0 auto">';
+  if (ai.suggestions && ai.suggestions.length)
+    dock += '<div class="kt-ai-suggestions" style="justify-content:center">' +
+      ai.suggestions.map(s => '<button class="kt-ai-suggestion" onclick="S.aiAsk(this.textContent,\'convChat\')">' + esc(s) + "</button>").join("") + "</div>";
+  dock += '<div class="kt-ai-prompt-bar"><textarea rows="1" id="convInput" aria-label="Сообщение агенту" placeholder="Спросить агента…" onkeydown="if(event.key===\'Enter\'&&!event.shiftKey){event.preventDefault();S.aiAsk(this.value,\'convChat\');this.value=\'\'}"></textarea>' +
+    '<button class="kt-ai-prompt-send" aria-label="Отправить" onclick="var i=document.getElementById(\'convInput\');S.aiAsk(i.value,\'convChat\');i.value=\'\'"><svg class="kt-icon"><use href="#send"></use></svg></button></div>' +
+    '<span class="kt-ai-gen-label" style="text-align:center">Сгенерировано ИИ</span></div>';
+  // hero: приветствие без пузыря, всё одной центрированной группой (паттерн пустого чата)
+  h += '<div id="convHero" style="flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--kt-ai-space-7)">' +
+    '<span aria-hidden="true" style="width:44px;height:44px;border-radius:50%;background:var(--kt-ai-ai-orb)"></span>' +
+    '<div style="max-width:560px;text-align:center;font-size:var(--kt-ai-text-md);line-height:1.65">' + esc(ai.intro || "Здравствуйте! Чем могу помочь?") + "</div>" +
+    dock + "</div>";
+  return h + "</div>";
+}
+
+// custom: запасной архетип для экранов, не подходящих под другие (референс ElevenLabs settings-detail).
+// Свободная компоновка из секций-карточек по контракту CFG.sections. Никогда не форсит таблицу.
+function renderCustom() {
+  const sc = CFG.scenario || {};
+  $("pageTitle").textContent = sc.headline || CFG.product.name;
+  $("pageSub").textContent = CFG.product.purpose || "";
+  const sections = Array.isArray(CFG.sections) ? CFG.sections : [];
+  // Ширину называет ПРОДУКТ, а не подбор типов секций. Мера для чтения
+  // сплошного текста (720px) разумна, но секция `fields` — не сплошной текст, а
+  // пары «подпись — значение»: таблица критериев с доказательствами на 720px
+  // читается хуже, чем на общей ширине, и экран выглядел съехавшим к центру,
+  // потому что заголовок оставался во всю ширину. Раньше продукт добивался
+  // нужной ширины, подбирая типы секций, — это подбор, а не решение.
+  //   "width": "full"    — общая ширина (по умолчанию для любой не-текстовой секции)
+  //   "width": "reading" — мера чтения, ~720px
+  const автоШирина = sections.some(s => s && ((s.type && s.type !== "text") || (s.fields && s.fields.length))) ? "full" : "reading";
+  const wide = (CFG.width || автоШирина) === "full";
+  let h = '<div style="max-width:' + (wide ? "1080px" : "720px") + ';margin:0 auto">' + renderHead();
+  if (!sections.length) {
+    h += '<div class="kt-ai-card" style="margin-top:var(--kt-ai-space-6)"><div class="kt-ai-empty">' +
+      '<div class="icon-spot"><svg class="kt-icon kt-icon-lg" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 10h18"/></svg></div>' +
+      '<span class="title">Экран ещё не наполнен</span><span>Опишите разделы в contract.sections — они появятся карточками здесь</span></div></div>';
+  } else {
+    // композиция: каждая секция — блок из примитивов системы; half-секции встают в две колонки
+    const block = s => {
+      const head = '<div class="kt-ai-h3">' + esc(s.title || "") + "</div>" +
+        (s.description ? '<div class="kt-ai-meta" style="margin-top:2px;margin-bottom:var(--kt-ai-space-4)">' + esc(s.description) + "</div>" : '<div style="margin-bottom:var(--kt-ai-space-4)"></div>');
+      if (s.type === "kpis") return head + (CFG.kpis && CFG.kpis.length ? '<div class="kt-ai-kpi-strip" data-cards="true">' + CFG.kpis.map(k => kpiHtml(k)).join("") + "</div>" : "");
+      if (s.type === "chart" && s.chart) return head + analyticsChartCard(s.chart, 0);
+      if (s.type === "table") return head + plainTable(rows);
+      if (s.type === "chat") { const ai = CFG.ai || {}; return head + '<div class="kt-ai-chat" data-scroll="true" id="secChat">' + msgHtml("assistant", ai.intro || "Чем помочь?") + "</div>" +
+        (ai.suggestions && ai.suggestions.length ? '<div class="kt-ai-suggestions" style="margin-top:var(--kt-ai-space-3)">' + ai.suggestions.map(x => '<button class="kt-ai-suggestion" onclick="S.aiAsk(this.textContent,\'secChat\')">' + esc(x) + "</button>").join("") + "</div>" : ""); }
+      if (s.type === "cards") return head + '<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--kt-ai-space-4)">' +
+        (s.items || []).map(it => '<div class="kt-ai-card kt-ai-hover-lift" role="button" tabindex="0" onclick="toast(\'' + esc(it.title) + ' – заглушка прототипа\',\'\')" onkeydown="if(event.key===\'Enter\')this.click()" style="cursor:pointer;padding:var(--kt-ai-space-5)">' +
+          '<div style="display:flex;justify-content:space-between;gap:var(--kt-ai-space-3);align-items:baseline"><span style="font-size:var(--kt-ai-text-sm);font-weight:500">' + esc(it.title) + "</span>" +
+          (it.badge ? '<span class="kt-ai-status-pill" data-status="' + esc(it.tone || "info") + '">' + esc(it.badge) + "</span>" : "") + "</div>" +
+          (it.text ? '<div class="kt-ai-meta" style="margin-top:var(--kt-ai-space-2);line-height:1.45">' + esc(it.text) + "</div>" : "") + "</div>").join("") + "</div>";
+      return head +
+        (s.body ? '<div style="font-size:var(--kt-ai-text-sm);white-space:pre-wrap;line-height:var(--kt-ai-leading-normal)">' + esc(s.body) + "</div>" : "") +
+        (Array.isArray(s.fields) && s.fields.length ? s.fields.map(f => '<div class="kt-ai-prop"><span class="k">' + esc(f.label) + '</span><span class="v">' + esc(f.value ?? "–") + "</span></div>").join("") : "");
+    };
+    h += '<div class="kt-ai-cols" style="grid-template-columns:1fr 1fr;margin-top:var(--kt-ai-space-5)">' +
+      sections.map(s => '<div class="kt-ai-card" style="padding:var(--kt-ai-space-7)' + (s.width === "half" ? "" : ";grid-column:1 / -1") + '">' + block(s) + "</div>").join("") + "</div>";
+  }
+  if (sc.control) h += '<div style="margin-top:var(--kt-ai-space-6);display:flex;gap:var(--kt-ai-space-4)">' +
+    '<button class="kt-ai-btn" data-variant="primary" onclick="S.customAction()">' + esc(sc.control) + "</button>" +
+    (sc.reject ? '<button class="kt-ai-btn" onclick="S.customAction()">' + esc(sc.reject) + "</button>" : "") + "</div>";
+  return h + "</div>";
+}
+S.customAction = () => toast(((CFG.scenario || {}).control || "Готово") + " – выполнено", "ok");
+
+// Hero (ElevenLabs): имя РАЗДЕЛА слева + подпись, главное действие справа. Лого — только в sidebar.
+function pageHero(title, sub, action) {
+  return '<header class="page-hero"><div class="ph-text"><h1>' + esc(title) + "</h1>" +
+    (sub ? '<div class="sub">' + esc(sub) + "</div>" : "") + "</div>" +
+    (action ? '<div class="ph-action">' + action + "</div>" : "") + "</header>";
+}
+function render() {
+  const main = state.navIndex === 0;
+  const sc = CFG.scenario || {};
+  const archetype = CFG.archetype || CFG.layout || "queue";
+  const chatFill = main && archetype === "conversational";   // чат сам владеет областью (без page-hero, как в React fillBody)
+  const navItem = (CFG.nav || [])[state.navIndex] || {};
+  const isDocs = !main && navItem.view === "documents";       // секция-коллекция документов (с возможностью скачать)
+  const isRegistry = !main && navItem.view === "registry" && CFG.table && (CFG.table.rows || []).length;  // полный реестр (главная — только обзор)
+  const title = main ? (sc.headline || CFG.product.name) : navItem.label;
+  const sub = (main || isDocs || isRegistry) ? (CFG.product.purpose || "") : "";
+  const action = (main || isRegistry) ? '<button class="kt-ai-btn" data-variant="primary" onclick="S.newCase()"><svg class="kt-icon kt-icon-sm" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>' + esc(createLabel) + "</button>" : "";
+  const showHero = (main && !chatFill) || isDocs || isRegistry;
+  const body = main ? mainByLayout() : (isRegistry ? renderMain() : (isDocs ? renderDocs(navItem) : renderStub(navItem.label)));
+  // Вывод — последний блок экрана: он читается после данных, а не вместо них.
+  // Место одно на все архетипы, поэтому дописывается здесь, а не в каждом теле.
+  // Чат владеет всей областью сам (chatFill) — там дописывать некуда.
+  const вывод = (main && !chatFill) || isRegistry ? conclusionHtml() : "";
+  $("view").innerHTML = (showHero ? pageHero(title, sub, (main || isRegistry) ? action : "") : "") + body + вывод;
+  $("pageTitle").textContent = title; $("pageSub").textContent = sub;
+  const top = $("topSearch"); if (top && top.value !== state.query) top.value = state.query;  // топбар-поиск держит state.query
+}
+S.compareFocus = i => { state.focusRow = i; render(); };
+// загрузочное состояние (ДС: лоадеры на всём, что дольше 300мс) – показываем один раз при гидрации
+function renderSkeleton() {
+  return '<div style="margin-top:var(--kt-ai-space-8)">' +
+    '<div class="kt-ai-skeleton" style="height:28px;width:240px;margin-bottom:var(--kt-ai-space-6)"></div>' +
+    '<div class="kt-ai-table-wrap">' +
+    Array.from({ length: 6 }).map(() => '<div class="kt-ai-skeleton" style="height:44px;margin:var(--kt-ai-space-2) 0"></div>').join("") +
+    "</div></div>";
+}
+
+/* ---------- Drawer записи ---------- */
+// Карточка кейса: что сделал агент (анализ + признаки) + что решает человек (рекомендация, изменяемое действие)
+S.open = i => {
+  const r = rows[i]; if (!r) return;
+  state.openRow = i;
+  const d = CFG.drawer || {}; const sc = CFG.scenario || {};
+  const flags = r._flags || [];
+  const recs = flags.filter(f => /^рекоменд/i.test(f));
+  const signals = flags.filter(f => !/^рекоменд/i.test(f));
+  const recText = recs.length ? recs[0].replace(/^Рекомендация:\s*/i, "") : "";
+  const acts = Array.isArray(sc.actions) ? sc.actions : [];
+  const preIdx = Math.max(0, acts.findIndex(a => recText && recText.toLowerCase().startsWith(a.toLowerCase().split(/[\s(/]/)[0])));
+  const fields = (d.fields || []).map(f => '<div class="kt-ai-prop"><span class="k">' + esc(f.label) + '</span><span class="v">' + esc(fmtVal(r[f.key]) ?? "–") + "</span></div>").join("");
+
+  let h = '<div class="drawer-head"><div class="t"><div class="kt-ai-h2" id="drawerTitle">' + esc(r[d.titleKey || cols[0].key]) + "</div>" +
+    '<div style="margin-top:6px">' + (statusCol ? statusTag(r[statusCol]) : "") + "</div></div>" +
+    '<button class="kt-ai-icon-button" aria-label="Закрыть" onclick="S.close()"><svg class="kt-icon" viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12"/></svg></button></div>';
+
+  h += '<div class="drawer-sec">' +
+    (sc.aiSummary ? '<div class="kt-ai-gen-label">Что сделал агент</div><p class="agent-summary">' + esc(sc.aiSummary) + "</p>" : "") +
+    fields + "</div>";
+
+  const docs = Array.isArray(r._docs) ? r._docs : [];
+  if (docs.length) h += '<div class="drawer-sec"><div class="kt-ai-label">Документы</div><div class="kt-ai-doc-list" style="margin-top:var(--kt-ai-space-3)">' +
+    docs.map(dd => docCard(dd, "")).join("") + "</div></div>";
+
+  if (signals.length) h += '<div class="drawer-sec"><div class="kt-ai-label">' + esc(d.flagsLabel || "Признаки риска") + "</div>" +
+    signals.map(f => '<div class="agent-signal"><svg class="kt-icon kt-icon-sm" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg><span>' + esc(f) + "</span></div>").join("") + "</div>";
+
+  h += '<div class="drawer-sec decision"><div class="kt-ai-label">Решение</div>';
+  if (recText) h += '<div class="rec-box"><span class="kt-ai-gen-label" style="margin-bottom:6px">Рекомендация агента</span>' + esc(recText) + "</div>";
+  if (acts.length) h += '<div class="kt-ai-field" style="margin-top:var(--kt-ai-space-5)"><label for="recSelect">Действие — можно изменить</label>' +
+    '<select class="kt-ai-select" id="recSelect">' + acts.map((a, idx) => "<option" + (idx === preIdx ? " selected" : "") + ">" + esc(a) + "</option>").join("") + "</select></div>";
+  h += '<div class="drawer-actions">' +
+    '<button class="kt-ai-btn" data-variant="primary" onclick="S.askApprove()">' + esc(sc.control || "Подтвердить") + "</button>" +
+    (sc.reject ? '<button class="kt-ai-btn" onclick="S.reject()">' + esc(sc.reject) + "</button>" : "") +
+    "</div></div>";
+
+  const dr = $("drawer");
+  dr.innerHTML = h;
+  dr.style.display = "block";
+  state._drawerReturn = document.activeElement;
+  dr.onkeydown = e => { if (e.key === "Escape") { e.stopPropagation(); S.close(); } };
+  dr.focus();
+};
+S.bannerAction = () => toast("Открываю связанный пакет работ", "");
+S.close = () => { $("drawer").style.display = "none"; state.openRow = -1; const p = state._drawerReturn; if (p && p.focus) p.focus(); };
+// Row-actions (ElevenLabs): kebab на hover ряда → быстрые действия
+S.rowMenu = (i, e) => {
+  e.stopPropagation();
+  const sc = CFG.scenario || {};
+  const m = $("rowMenu");
+  m.innerHTML =
+    '<button role="menuitem" class="item" onclick="S.closeMenus();S.open(' + i + ')"><svg class="kt-icon kt-icon-sm" viewBox="0 0 24 24"><path d="M15 3h6v6M10 14L21 3M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5"/></svg>Открыть</button>' +
+    (sc.control ? '<button role="menuitem" class="item" onclick="S.closeMenus();S.quickApprove(' + i + ')"><svg class="kt-icon kt-icon-sm" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg>' + esc(sc.control) + '</button>' : '') +
+    (sc.reject ? '<button role="menuitem" class="item" data-danger="true" onclick="S.closeMenus();S.quickReject(' + i + ')"><svg class="kt-icon kt-icon-sm" viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12"/></svg>' + esc(sc.reject) + '</button>' : '');
+  const b = e.target.closest("button").getBoundingClientRect();
+  S.closeMenus();
+  m.style.top = (b.bottom + 4) + "px";
+  m.style.left = Math.max(8, Math.min(b.right - 200, window.innerWidth - 220)) + "px";
+  m.dataset.open = "true";
+};
+S.quickApprove = i => { const sc = CFG.scenario || {}; const r = rows[i]; if (r && statusCol && sc.approveTo) r[statusCol] = sc.approveTo; render(); toast((sc.control || "Подтверждено") + " – выполнено", "ok"); };
+S.quickReject = i => { const sc = CFG.scenario || {}; const r = rows[i]; if (r && statusCol && sc.rejectTo) r[statusCol] = sc.rejectTo; render(); toast(sc.reject || "Возвращено", "warn"); };
+
+/* ---------- Контрольное действие (подтверждение модалкой) ---------- */
+S.askApprove = () => {
+  const sc = CFG.scenario || {};
+  $("modal").innerHTML = '<div class="kt-ai-modal" role="dialog" aria-modal="true" aria-label="Подтверждение действия"><div class="modal-title">' + esc(sc.control || "Подтвердить") + "?</div>" +
+    '<div class="kt-ai-meta">' + esc(sc.confirmText || "Действие будет зафиксировано.") + "</div>" +
+    '<div class="modal-actions"><button class="kt-ai-btn" onclick="S.closeModal()">Отмена</button>' +
+    '<button class="kt-ai-btn" data-variant="primary" onclick="S.approve()">' + esc(sc.control || "Подтвердить") + "</button></div></div>";
+  $("modal").style.display = "flex";
+};
+S.closeModal = () => { $("modal").style.display = "none"; };
+S.approve = () => {
+  const sc = CFG.scenario || {};
+  const r = rows[state.openRow];
+  const sel = $("recSelect");
+  const act = sel ? sel.value : "";
+  if (r && statusCol && sc.approveTo) r[statusCol] = sc.approveTo;
+  S.closeModal(); S.close(); render();
+  toast(act ? ("Действие назначено: " + act) : ((sc.control || "Подтверждено") + " – выполнено"), "ok");
+};
+S.reject = () => {
+  const sc = CFG.scenario || {};
+  const r = rows[state.openRow];
+  if (r && statusCol && sc.rejectTo) r[statusCol] = sc.rejectTo;
+  S.close(); render();
+  toast(sc.reject || "Возвращено", "warn");
+};
+S.bulkApprove = () => {
+  const sc = CFG.scenario || {};
+  rows.forEach(r => { if (state.selected.has(r._i) && statusCol && sc.approveTo) r[statusCol] = sc.approveTo; });
+  const n = state.selected.size; state.selected.clear(); render();
+  toast(n + " записей: " + (sc.control || "подтверждено"), "ok");
+};
+
+/* ---------- Список ---------- */
+S.nav = i => { state.navIndex = i; renderNav(); render(); };
+S.filter = k => { state.statusFilter = k; state.page = 1; render(); };
+S.sel = (i, on) => { if (on) state.selected.add(i); else state.selected.delete(i); render(); };
+S.clearSel = () => { state.selected.clear(); render(); };
+S.toggleSidebar = () => { const sb = $("sidebar"); sb.dataset.open = sb.dataset.open === "true" ? "false" : "true"; };
+
+/* ---------- AI-панель ---------- */
+let aiOpen = false;
+S.toggleAi = () => { aiOpen = !aiOpen; $("aiPanel").style.display = aiOpen ? "flex" : "none"; $("aiFab").style.display = aiOpen ? "none" : "flex"; if (aiOpen) renderAi(); };
+// Правая панель «Активность» — лента действий агента/истории решений (референс из видео Kole Jain)
+S.toggleActivity = () => {
+  const p = $("actPanel");
+  if (p.style.display !== "none") { p.style.display = "none"; return; }
+  const tone = t => t === "info" ? "var(--kt-ai-status-info-fg)" : toneFg(t, "var(--kt-ai-fg-faint)");
+  const items = CFG.activity || [];
+  p.innerHTML = '<div class="act-head"><strong>Активность</strong><button class="kt-ai-icon-button" aria-label="Закрыть" onclick="S.toggleActivity()"><svg class="kt-icon"><use href="#x"></use></svg></button></div>' +
+    '<div class="kt-ai-activity">' + items.map(a =>
+      '<div class="act-item"><span class="act-dot" style="background:' + tone(a.tone) + '"></span>' +
+      '<div class="act-title">' + esc(a.title || "") + "</div>" +
+      '<div class="act-time">' + esc([a.time, a.ago].filter(Boolean).join(" · ")) + "</div>" +
+      ((a.who || (a.tags && a.tags.length) || a.summary || a.link) ?
+        '<div class="act-card">' +
+        (a.who ? '<div class="act-row"><span class="k">Кто</span><span class="v">' + esc(a.who) + "</span></div>" : "") +
+        (a.tags && a.tags.length ? '<div class="act-row"><span class="k">Данные</span><span class="v">' + a.tags.map(t => '<span class="kt-ai-chip">' + esc(t) + "</span>").join("") + "</span></div>" : "") +
+        (a.summary ? '<div class="act-summary">' + esc(a.summary) + "</div>" : "") +
+        (a.link ? '<button class="kt-ai-btn" data-size="sm" data-variant="ghost" onclick="toast(\'' + esc(a.link) + " – заглушка','')\">" + esc(a.link) + ' →</button>' : "") +
+        "</div>" : "") +
+      "</div>").join("") + "</div>";
+  p.style.display = "block";
+};
+function renderAi() {
+  const ai = CFG.ai || {};
+  $("aiPanel").innerHTML =
+    '<div class="drawer-head"><div class="t kt-ai-h2">Ассистент</div>' +
+    '<button class="kt-ai-icon-button" aria-label="Закрыть" onclick="S.toggleAi()"><svg class="kt-icon" viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12"/></svg></button></div>' +
+    '<div class="kt-ai-chat" id="aiChat">' + msgHtml("assistant", ai.intro || "Чем помочь?") + "</div>" +
+    '<div class="ai-panel-foot">' +
+    '<div class="kt-ai-suggestions">' + (ai.suggestions || []).map(s => '<button class="kt-ai-suggestion" onclick="S.aiAsk(this.textContent)">' + esc(s) + "</button>").join("") + "</div>" +
+    '<div class="kt-ai-prompt-bar"><textarea rows="1" id="aiInput" placeholder="Спросить…" onkeydown="if(event.key===\'Enter\'&&!event.shiftKey){event.preventDefault();S.aiAsk(this.value);this.value=\'\'}"></textarea>' +
+    '<button class="kt-ai-prompt-send" aria-label="Отправить" onclick="var i=document.getElementById(\'aiInput\');S.aiAsk(i.value);i.value=\'\'"><svg class="kt-icon" viewBox="0 0 24 24"><path d="M12 19V5m0 0l-6 6m6-6l6 6"/></svg></button></div>' +
+    '<span class="kt-ai-gen-label">Сгенерировано ИИ</span></div>';
+}
+function msgHtml(role, text, streaming) {
+  if (role === "user") return '<div class="kt-ai-msg" data-role="user"><div class="body">' + esc(text) + "</div></div>";
+  return '<div class="kt-ai-msg" data-role="assistant"' + (streaming ? ' data-streaming="true"' : "") + ' style="align-items:flex-start">' +
+    '<span class="msg-orb" aria-hidden="true"></span><div class="body">' + esc(text) + "</div></div>";
+}
+S.aiAsk = (q, chatId) => {
+  q = (q || "").trim(); if (!q) return;
+  const ai = CFG.ai || {};
+  const chat = $(chatId || "aiChat");
+  if (!chat) return;
+  const hero = document.getElementById("convHero");
+  if (hero && chatId === "convChat") {   // первый вопрос: hero складывается – интро становится первым сообщением, док уезжает вниз
+    chat.style.display = "";
+    chat.insertAdjacentHTML("beforeend", msgHtml("assistant", (CFG.ai || {}).intro || "Здравствуйте! Чем могу помочь?"));
+    const dock = document.getElementById("convDock");
+    if (dock) hero.parentElement.appendChild(dock);
+    hero.remove();
+  }
+  chat.insertAdjacentHTML("beforeend", msgHtml("user", q));
+  const a = (ai.answers || {})[q] || ai.fallback || "Ответ-заглушка прототипа.";
+  chat.insertAdjacentHTML("beforeend", msgHtml("assistant", "", true));
+  const msg = chat.lastElementChild, body = msg.querySelector(".body");
+  let i = 0;
+  const t = setInterval(() => {
+    body.textContent = a.slice(0, i += 4);
+    chat.scrollTop = chat.scrollHeight;
+    if (i >= a.length) { clearInterval(t); msg.dataset.streaming = ""; }
+  }, 16);
+  chat.scrollTop = chat.scrollHeight;
+};
+
+/* ---------- Топбар ---------- */
+function toast(text, tone) {
+  const d = document.createElement("div");
+  d.className = "kt-ai-toast"; d.dataset.tone = tone || "";
+  d.textContent = text;
+  $("toasts").appendChild(d);
+  setTimeout(() => d.remove(), 3500);
+}
+$("topSearch").addEventListener("input", e => { state.query = e.target.value; state.page = 1; render(); });
+$("themeToggle").onclick = () => {
+  const next = document.documentElement.dataset.theme === "light" ? "dark" : "light";
+  document.documentElement.dataset.theme = next;
+  $("themeToggle").dataset.mode = next;
+};
+document.addEventListener("keydown", e => {
+  if (e.key === "Escape") { S.close(); S.closeModal(); S.closeMenus(); if (aiOpen) S.toggleAi(); }
+  // Сочетание и его подпись включаются вместе: выключил подпись — выключено и
+  // сочетание, иначе в продукте живёт незаявленная горячая клавиша.
+  if ((CFG.search || {}).shortcut !== false &&
+      (e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") { e.preventDefault(); $("topSearch").focus(); }
+});
+
+renderTop(); renderNav();
+$("view").innerHTML = renderSkeleton();
+setTimeout(render, 400);
+setTimeout(S.maybeOnboarding, 900);
+</script>
+<!-- Режим обратной связи прототипа (DoD #6): владелец кликает по элементу и оставляет заметку → экспорт в markdown для БА. Самодостаточен, грузится тихо. -->
+<script data-kt-ai-boot="js">
+// async = false — вставленный скриптом <script> иначе выполняется в порядке
+// загрузки, а не вставки. Файлы независимы, но порядок в прототипе должен быть
+// воспроизводимым: иначе «иногда работает» отлаживают в продукте, а не здесь.
+["kt-ai-orb.js", "kt-ai-chart-tip.js", "kt-ai-composer.js", "kt-ai-feedback.js"].forEach(function (файл) {
+  var тег = document.createElement("script");
+  тег.src = window.ktAiAsset(файл);
+  тег.async = false;
+  document.body.appendChild(тег);
+});
+</script>
+</body>
+</html>
diff --git a/design-system/tokens.json b/design-system/tokens.json
new file mode 100644
index 0000000..6e61427
--- /dev/null
+++ b/design-system/tokens.json
@@ -0,0 +1,320 @@
+{
+  "$meta": {
+    "name": "KT AI Design Tokens",
+    "version": "5.4.0",
+    "comment": "Единый источник истины. Правки ТОЛЬКО здесь, затем: python3 scripts/build_tokens.py. Генерирует: kt-ai-tokens.css, kt-ai-print.css, figma-variables.json, kt-ai-tailwind-preset.cjs. Ссылка на primitive: значение вида $имя. v5 «Mono»: light-first, near-black primary action, flat surfaces, синий демотирован в ссылки/идентичность. v5.2: контраст AA как машинный гейт — пороги проверяются в build_tokens.py, а не глазами. v5.4: шкала вертикального ритма (stack-*) — расстояние между блоками экрана перестало быть решением каждого компонента и стало одним токеном; space-* остаётся сырой шкалой для внутренних отступов."
+  },
+  "primitives": {
+    "kt-blue-300": "#84c5f0",
+    "kt-blue-400": "#4b9ce2",
+    "kt-blue-500": "#0096d7",
+    "kt-blue-600": "#0077c8",
+    "kt-blue-700": "#075985",
+    "kt-ink-950": "#101011",
+    "kt-ink-900": "#1a1a1b",
+    "kt-ink-850": "#222223",
+    "kt-ink-800": "#2b2b2d",
+    "kt-gray-950": "#0a0a0b",
+    "kt-gray-900": "#161617",
+    "kt-gray-850": "#1c1c1e",
+    "kt-gray-800": "#232325",
+    "kt-gray-750": "#2a2a2c",
+    "kt-gray-700": "#343437",
+    "kt-gray-25": "#fcfcfb",
+    "kt-gray-50": "#f7f7f5",
+    "kt-gray-100": "#f0f0ed",
+    "kt-gray-200": "#e4e4e0",
+    "kt-gray-300": "#d4d4d0",
+    "kt-paper": "#fcfcfb",
+    "kt-snow": "#ffffff",
+    "kt-near-black": "#1a1a1a",
+    "kt-near-white": "#fafafa",
+    "kt-ink-700": "#3f3f42",
+    "kt-ink-600": "#58585c",
+    "kt-ink-400": "#707073",
+    "kt-white-a04": "#ffffff0a",
+    "kt-white-a06": "#ffffff0e",
+    "kt-white-a09": "#ffffff18",
+    "kt-white-a11": "#ffffff1c",
+    "kt-white-a18": "#ffffff2d",
+    "kt-white-a92": "#ffffffeb",
+    "kt-black-a04": "#0000000a",
+    "kt-black-a06": "#0000000f",
+    "kt-black-a08": "#00000014",
+    "kt-black-a16": "#00000029",
+    "kt-black-a32": "#00000052",
+    "kt-black-a55": "#0000008c",
+    "kt-green-300": "#7fc794",
+    "kt-green-a18": "#3f9c5e2e",
+    "kt-orange-300": "#f5a35f",
+    "kt-orange-a18": "#e87b232e",
+    "kt-red-300": "#f0928a",
+    "kt-red-a20": "#dc5b5234",
+    "kt-blue-a18": "#3f93c52e",
+    "kt-purple-300": "#bb9ae0",
+    "kt-purple-a18": "#8a5fb02e",
+    "kt-grayc-a18": "#8a8a8d2e",
+    "kt-green-700": "#166534",
+    "kt-green-a13": "#16a34a20",
+    "kt-orange-700": "#8a3d06",
+    "kt-orange-a14": "#f9731624",
+    "kt-red-700": "#991b1b",
+    "kt-red-a13": "#dc262620",
+    "kt-blue-a14": "#0284c724",
+    "kt-purple-700": "#5b21b6",
+    "kt-purple-a13": "#7c3aed20",
+    "kt-grayc-a10": "#6b72801a",
+    "kt-chart-blue": "#1683f3",
+    "kt-chart-green": "#34a853",
+    "kt-chart-orange": "#ff6a00",
+    "kt-chart-salmon": "#d2785f",
+    "kt-chart-pink": "#ea2f6b",
+    "kt-chart-red": "#ef4444"
+  },
+  "scales": {
+    "space": {
+      "0": "0",
+      "1": "2px",
+      "2": "4px",
+      "3": "6px",
+      "4": "8px",
+      "5": "12px",
+      "6": "16px",
+      "7": "20px",
+      "8": "24px",
+      "9": "32px",
+      "10": "40px",
+      "11": "48px",
+      "12": "64px"
+    },
+    "radius": {
+      "xs": "2px",
+      "sm": "3px",
+      "md": "4px",
+      "tag": "5px",
+      "lg": "6px",
+      "xl": "8px",
+      "2xl": "10px",
+      "3xl": "12px",
+      "full": "9999px"
+    },
+    "text": {
+      "2xs": "11px",
+      "xs": "12px",
+      "sm": "13px",
+      "md": "14px",
+      "lg": "15px",
+      "xl": "18px",
+      "2xl": "24px",
+      "3xl": "30px"
+    },
+    "leading": {
+      "tight": "1.25",
+      "normal": "1.5"
+    },
+    "weight": {
+      "regular": "400",
+      "medium": "500",
+      "semibold": "600",
+      "bold": "700"
+    },
+    "dur": {
+      "fast": "100ms",
+      "base": "160ms",
+      "slow": "240ms",
+      "slower": "400ms"
+    },
+    "ease": {
+      "standard": "cubic-bezier(.2, 0, 0, 1)",
+      "enter": "cubic-bezier(0, 0, .2, 1)",
+      "exit": "cubic-bezier(.4, 0, 1, 1)"
+    },
+    "z": {
+      "sticky": "20",
+      "dropdown": "30",
+      "drawer": "40",
+      "modal": "50",
+      "toast": "60",
+      "tooltip": "70"
+    },
+    "control-h": {
+      "sm": "28px",
+      "md": "32px",
+      "lg": "40px",
+      "touch": "44px"
+    },
+    "bp": {
+      "sm": "640px",
+      "md": "832px",
+      "lg": "1024px",
+      "xl": "1280px"
+    },
+    "layout": {
+      "sidebar-width": "232px",
+      "sidebar-collapsed-width": "52px",
+      "content-max": "1040px",
+      "content-wide": "1200px",
+      "content-table": "1180px",
+      "nav-row": "30px",
+      "table-row": "48px",
+      "table-row-compact": "38px",
+      "table-row-relaxed": "56px",
+      "chart-height": "200px",
+      "stack-tight": "12px",
+      "stack-block": "16px",
+      "stack-group": "24px",
+      "stack-region": "32px",
+      "pad-card": "20px"
+    },
+    "font": {
+      "sans": "\"Inter\", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif",
+      "mono": "\"JetBrains Mono\", ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Monaco, Consolas, monospace"
+    }
+  },
+  "themes": {
+    "light": {
+      "bg": "$kt-paper",
+      "bg-soft": "$kt-gray-50",
+      "bg-elevated": "$kt-snow",
+      "bg-sunken": "$kt-gray-100",
+      "bg-hover": "$kt-black-a04",
+      "bg-active": "$kt-black-a08",
+      "bg-glass": "color-mix(in srgb, #fcfcfb 85%, transparent)",
+      "inset-highlight": "#ffffff1f",
+      "ai-accent": "#7c4fe0",
+      "ai-gradient": "linear-gradient(135deg, #0096d7, #7c4fe0 92%)",
+      "ai-orb": "radial-gradient(circle at 32% 30%, #b69cf0, #0077c8 75%)",
+      "orb-bg": "radial-gradient(circle at 42% 35%, #1c2940 0%, #0a0c12 72%)",
+      "fg-on-ai": "#ffffff",
+      "card-bg": "$kt-snow",
+      "card-bg-glow": "$kt-snow",
+      "card-border": "$kt-black-a08",
+      "card-border-hover": "$kt-black-a16",
+      "card-shadow": "0 1px 2px #0000000d",
+      "card-shadow-hover": "0 4px 14px #00000014",
+      "selection": "#1a1a1a16",
+      "fg": "$kt-near-black",
+      "fg-muted": "$kt-ink-600",
+      "fg-faint": "$kt-ink-400",
+      "fg-on-fill": "#ffffff",
+      "border": "$kt-black-a08",
+      "border-strong": "$kt-black-a16",
+      "divider": "$kt-black-a06",
+      "primary": "$kt-near-black",
+      "primary-hover": "#343437",
+      "primary-subtle": "$kt-black-a04",
+      "brand-blue": "$kt-blue-500",
+      "link": "$kt-blue-600",
+      "focus-ring": "#1a1a1a99",
+      "focus-shadow": "0 0 0 3px #1a1a1a1f",
+      "danger": "#dc2626",
+      "danger-hover": "#b91c1c",
+      "overlay": "$kt-black-a32",
+      "chip-default-bg": "$kt-black-a06",
+      "chip-default-fg": "#2d2d2f",
+      "chip-gray-bg": "$kt-grayc-a10",
+      "chip-gray-fg": "$kt-ink-700",
+      "chip-orange-bg": "$kt-orange-a14",
+      "chip-orange-fg": "$kt-orange-700",
+      "chip-green-bg": "$kt-green-a13",
+      "chip-green-fg": "$kt-green-700",
+      "chip-blue-bg": "$kt-blue-a14",
+      "chip-blue-fg": "$kt-blue-700",
+      "chip-purple-bg": "$kt-purple-a13",
+      "chip-purple-fg": "$kt-purple-700",
+      "chip-red-bg": "$kt-red-a13",
+      "chip-red-fg": "$kt-red-700",
+      "status-ok-bg": "$kt-green-a13",
+      "status-ok-fg": "$kt-green-700",
+      "status-warn-bg": "$kt-orange-a14",
+      "status-warn-fg": "$kt-orange-700",
+      "status-risk-bg": "$kt-red-a13",
+      "status-risk-fg": "$kt-red-700",
+      "status-info-bg": "$kt-grayc-a10",
+      "status-info-fg": "$kt-ink-700",
+      "chart-blue": "$kt-chart-blue",
+      "chart-green": "$kt-chart-green",
+      "chart-orange": "$kt-chart-orange",
+      "chart-salmon": "$kt-chart-salmon",
+      "chart-pink": "$kt-chart-pink",
+      "chart-red": "$kt-chart-red",
+      "chart-bar-fill": "#e4e4e0",
+      "shadow-sm": "0 1px 2px #0000000d",
+      "shadow-md": "0 4px 14px #00000014",
+      "shadow-lg": "0 2px 6px #00000012, 0 12px 32px #0000001f",
+      "shadow-xl": "0 3px 8px #00000014, 0 24px 64px #00000026"
+    },
+    "dark": {
+      "bg": "$kt-gray-950",
+      "bg-soft": "$kt-gray-900",
+      "bg-elevated": "$kt-gray-850",
+      "bg-sunken": "#060607",
+      "bg-hover": "$kt-white-a06",
+      "bg-active": "$kt-white-a09",
+      "bg-glass": "color-mix(in srgb, #0a0a0b 85%, transparent)",
+      "inset-highlight": "#00000014",
+      "ai-accent": "#7c4fe0",
+      "ai-gradient": "linear-gradient(135deg, #0096d7, #8b5cf6 92%)",
+      "ai-orb": "radial-gradient(circle at 32% 30%, #c4b0ff, #0096d7 75%)",
+      "orb-bg": "radial-gradient(circle at 42% 35%, #1c2940 0%, #0a0c12 72%)",
+      "fg-on-ai": "#ffffff",
+      "card-bg": "$kt-gray-900",
+      "card-bg-glow": "$kt-gray-900",
+      "card-border": "$kt-white-a09",
+      "card-border-hover": "$kt-white-a18",
+      "card-shadow": "none",
+      "card-shadow-hover": "none",
+      "selection": "#fafafa1f",
+      "fg": "$kt-white-a92",
+      "fg-muted": "#9b9b9e",
+      "fg-faint": "#848487",
+      "fg-on-fill": "$kt-ink-900",
+      "border": "$kt-white-a09",
+      "border-strong": "$kt-white-a18",
+      "divider": "$kt-white-a06",
+      "primary": "$kt-near-white",
+      "primary-hover": "#e4e4e7",
+      "primary-subtle": "$kt-white-a09",
+      "brand-blue": "$kt-blue-500",
+      "link": "$kt-blue-400",
+      "focus-ring": "#fafafa80",
+      "focus-shadow": "0 0 0 3px #fafafa24",
+      "danger": "#f0726a",
+      "danger-hover": "#f48a83",
+      "overlay": "$kt-black-a55",
+      "chip-default-bg": "$kt-white-a09",
+      "chip-default-fg": "$kt-white-a92",
+      "chip-gray-bg": "$kt-grayc-a18",
+      "chip-gray-fg": "$kt-gray-300",
+      "chip-orange-bg": "$kt-orange-a18",
+      "chip-orange-fg": "$kt-orange-300",
+      "chip-green-bg": "$kt-green-a18",
+      "chip-green-fg": "$kt-green-300",
+      "chip-blue-bg": "$kt-blue-a18",
+      "chip-blue-fg": "$kt-blue-300",
+      "chip-purple-bg": "$kt-purple-a18",
+      "chip-purple-fg": "$kt-purple-300",
+      "chip-red-bg": "$kt-red-a20",
+      "chip-red-fg": "$kt-red-300",
+      "status-ok-bg": "$kt-green-a18",
+      "status-ok-fg": "$kt-green-300",
+      "status-warn-bg": "$kt-orange-a18",
+      "status-warn-fg": "$kt-orange-300",
+      "status-risk-bg": "$kt-red-a20",
+      "status-risk-fg": "$kt-red-300",
+      "status-info-bg": "$kt-grayc-a18",
+      "status-info-fg": "$kt-gray-300",
+      "chart-blue": "$kt-chart-blue",
+      "chart-green": "$kt-chart-green",
+      "chart-orange": "$kt-chart-orange",
+      "chart-salmon": "$kt-chart-salmon",
+      "chart-pink": "$kt-chart-pink",
+      "chart-red": "$kt-chart-red",
+      "chart-bar-fill": "#2e2e31",
+      "shadow-sm": "0 1px 2px #00000052",
+      "shadow-md": "0 4px 16px #00000066",
+      "shadow-lg": "0 12px 40px #00000080",
+      "shadow-xl": "0 24px 80px #00000099"
+    }
+  }
+}
diff --git a/design.md b/design.md
new file mode 100644
index 0000000..fb49a5b
--- /dev/null
+++ b/design.md
@@ -0,0 +1,225 @@
+<!-- vibe42-design-version: v3-ktai-ds-2026-09-01 -->
+# Дизайн-система KT AI — по ней собирается весь UI
+
+В папке проекта лежит `design-system/` — это **дизайн-система KT AI**
+(источник: `github.com/erjan-A/kt-ai-design-system`, MIT, версия в `design-system/VERSION`).
+Весь визуал берётся оттуда: цвета, шрифт, отступы, кнопки, карточки, секции лендинга.
+
+**Не выдумывай свой стиль и не тащи чужие фреймворки.** Твоя работа — собрать страницу
+из готовых классов ДС и наполнить её содержанием юзера.
+
+Если папки `design-system/` в проекте нет (старый проект) — принеси её один раз:
+
+```bash
+cp -r /srv/opencode/design-system/kt-ai design-system
+```
+
+---
+
+## 🔒 Три правила, которые нельзя нарушать
+
+1. **Цвета и размеры — только токенами** `var(--kt-ai-…)`. Сырой hex (`#0F1218`, `#fff`) в вёрстке
+   запрещён: он ломает светлую/тёмную тему.
+2. **Никакого Bootstrap / Tailwind / Material / Font Awesome / Google Fonts.** Шрифт (Inter) уже
+   внутри ДС и работает офлайн. Всё, что нужно лендингу, в ДС уже есть.
+3. **Свой `<style>` — только на мелочи**, которых нет в ДС (позиционирование, картинка-фон).
+   Не переопределяй кнопки, карточки и типографику.
+
+---
+
+## Старт: `index.html`
+
+Это рабочий каркас лендинга. Копируй его целиком и меняй содержание.
+
+```html
+<!DOCTYPE html>
+<html lang="ru" data-theme="auto">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Название проекта</title>
+<link rel="stylesheet" href="design-system/kt-ai-fonts.css">
+<link rel="stylesheet" href="design-system/kt-ai-tokens.css">
+<link rel="stylesheet" href="design-system/kt-ai-components.css">
+<link rel="stylesheet" href="design-system/kt-ai-page.css">
+<style>
+  /* ДС рисует кнопки для <button>; у ссылки-кнопки браузер добавляет подчёркивание */
+  a.kt-ai-btn { text-decoration: none; }
+</style>
+</head>
+<body>
+
+<header class="kt-ai-pagehead">
+  <div class="kt-ai-wrap kt-ai-pagehead-in">
+    <strong>Название</strong>
+    <span class="kt-ai-spacer"></span>
+    <a class="kt-ai-btn" data-variant="ghost" href="#about">О нас</a>
+    <a class="kt-ai-btn" data-variant="primary" href="#contacts">Оставить заявку</a>
+  </div>
+</header>
+
+<section class="kt-ai-hero" data-align="center">
+  <div class="kt-ai-wrap">
+    <h1>Главное обещание в одну строку</h1>
+    <p class="kt-ai-hero-sub">Подзаголовок: кому это и почему стоит остаться.</p>
+    <div class="kt-ai-hero-actions">
+      <a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#contacts">Оставить заявку</a>
+      <a class="kt-ai-btn" data-size="lg" href="#about">Подробнее</a>
+    </div>
+  </div>
+</section>
+
+<section id="about" class="kt-ai-section" data-divider="true">
+  <div class="kt-ai-wrap">
+    <div class="kt-ai-section-head">
+      <h2>Что вы получите</h2>
+      <p>Одно-два предложения пояснения к секции.</p>
+    </div>
+    <div class="kt-ai-grid" style="margin-top:var(--kt-ai-space-9)">
+      <article class="kt-ai-tile"><h3>Пункт первый</h3><p>Коротко и по делу.</p></article>
+      <article class="kt-ai-tile"><h3>Пункт второй</h3><p>Коротко и по делу.</p></article>
+      <article class="kt-ai-tile"><h3>Пункт третий</h3><p>Коротко и по делу.</p></article>
+    </div>
+  </div>
+</section>
+
+<section id="contacts" class="kt-ai-cta">
+  <div class="kt-ai-wrap">
+    <h2>Призыв к действию</h2>
+    <p>Город, адрес, часы работы — то, что нужно, чтобы дойти.</p>
+    <a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#">Написать</a>
+  </div>
+</section>
+
+<footer class="kt-ai-wrap kt-ai-pagefoot">
+  <span>© 2026 Название</span>
+  <span class="kt-ai-spacer"></span>
+  <span>Контакты</span>
+</footer>
+
+</body>
+</html>
+```
+
+---
+
+## Блоки страницы (`kt-ai-page.css`)
+
+| Класс | Что это |
+|-------|---------|
+| `.kt-ai-wrap` | контейнер по центру (1080px). `data-width="narrow"` — 720px, `"wide"` — 1200px |
+| `.kt-ai-pagehead` + `.kt-ai-pagehead-in` | липкая шапка страницы |
+| `.kt-ai-hero`, `.kt-ai-hero-sub`, `.kt-ai-hero-actions` | первый экран. `data-align="center"` — по центру |
+| `.kt-ai-section` + `.kt-ai-section-head` (h2 + p) | обычная секция. `data-divider="true"` — линия сверху |
+| `.kt-ai-grid` + `.kt-ai-tile` (h3 + p) | сетка плиток «возможности». `data-cols="2"/"4"`, у плитки `data-span="2"/"full"` |
+| `.kt-ai-tile-icon` | иконка над заголовком плитки (спрайт — `design-system/icons/`) |
+| `.kt-ai-cta` | финальный блок с призывом |
+| `.kt-ai-pagefoot` | подвал |
+| `.kt-ai-spacer` | распорка внутри шапки/подвала (толкает остальное вправо) |
+| `.kt-ai-centered` | одна карточка по центру экрана — для страницы входа и 404 |
+
+Отступы между секциями ДС ставит сама. Адаптив (3→2→1 колонка) — тоже, `@media` писать не нужно.
+
+## Элементы (`kt-ai-components.css`)
+
+| Класс | Как применять |
+|-------|---------------|
+| `.kt-ai-btn` | кнопка / ссылка-кнопка. `data-variant="primary"` — главная, `"ghost"` — прозрачная, `"danger"` — опасная. `data-size="sm"/"lg"` |
+| `.kt-ai-card` | карточка контента |
+| `.kt-ai-chip` | статус-пилюля / тег |
+| `.kt-ai-link` | текстовая ссылка |
+| `.kt-ai-field` + `.kt-ai-input` / `.kt-ai-textarea` / `.kt-ai-select` | поле формы с подписью |
+
+**Один `primary` на экран.** Остальные кнопки — обычные или `ghost`.
+
+## Токены (`kt-ai-tokens.css`)
+
+Цвет: `--kt-ai-bg`, `--kt-ai-bg-soft`, `--kt-ai-fg`, `--kt-ai-fg-muted`, `--kt-ai-fg-faint`,
+`--kt-ai-border`, `--kt-ai-divider`, `--kt-ai-card-bg`, `--kt-ai-card-border`,
+`--kt-ai-primary`, `--kt-ai-link`, `--kt-ai-danger`.
+
+Отступы: `--kt-ai-space-1…12` (2px → 64px). Скругления: `--kt-ai-radius-md/lg/xl/2xl/3xl/full`.
+Текст: `--kt-ai-text-xs…3xl`. Вес: `--kt-ai-weight-regular/medium/semibold/bold`.
+Шрифты: `--kt-ai-font-sans` (Inter), `--kt-ai-font-mono`.
+
+**Тема** — атрибут на `<html>`: `data-theme="auto"` (по системной, ставь его по умолчанию),
+`"light"`, `"dark"`. Проверь страницу в обеих темах — с токенами это бесплатно.
+
+---
+
+## Не лендинг, а приложение (дашборд, таблица, очередь заявок, чат)
+
+Тогда экран собирается **не вёрсткой руками, а конфигом**:
+
+1. Возьми `design-system/templates/kt-ai-app-shell.html` — самодостаточный HTML-каркас приложения
+   (без React и npm).
+2. Опиши экран JSON-конфигом по `design-system/docs/PRODUCT_CONTRACT.md` и положи его в тег
+   `<script id="kt-app-config" type="application/json">…</script>` внутри каркаса — он сам отрисует
+   таблицу, KPI, фильтры, drawer и темы.
+3. Проверь конфиг: `python3 design-system/scripts/validate_product.py config.json --strict` → нужен `0/0`.
+
+Полные правила для сложных экранов — `design-system/AGENTS.md`, список компонентов —
+`design-system/COMPONENTS.md`, приёмка — `design-system/CHECKLIST.md`. Читай их, когда лендинга
+уже мало.
+
+---
+
+## 📦 Готовые рецепты
+
+### Фото без ключей
+- Одно и то же слово → одна и та же картинка: `https://picsum.photos/seed/coffee/800/600`
+- По теме: `https://loremflickr.com/800/600/coffee` (тег прямо в URL)
+
+Вставляй с рамкой ДС: `<img src="…" alt="…" style="width:100%;border-radius:var(--kt-ai-radius-3xl)">`
+
+### Кнопка WhatsApp
+```html
+<a class="kt-ai-btn" data-variant="primary" data-size="lg"
+   href="https://wa.me/7XXXXXXXXXX?text=Здравствуйте!">Написать в WhatsApp</a>
+```
+`7XXXXXXXXXX` — номер в международном формате без `+`.
+
+### Форма заявки без бэкенда
+```html
+<form action="https://formsubmit.co/EMAIL" method="POST" style="max-width:420px">
+  <div class="kt-ai-field"><label>Имя</label><input class="kt-ai-input" name="name" required></div>
+  <div class="kt-ai-field"><label>Телефон</label><input class="kt-ai-input" name="phone" required></div>
+  <button class="kt-ai-btn" data-variant="primary" type="submit">Отправить</button>
+</form>
+```
+Скажи юзеру: замени `EMAIL` на свою почту — заявки будут приходить туда (первая заявка активирует форму).
+
+### Favicon-эмодзи (без файла)
+```html
+<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>☕</text></svg>">
+```
+
+### Карта
+На maps.google.com: место → «Поделиться» → «Встроить карту» → вставь iframe как есть:
+```html
+<iframe src="https://www.google.com/maps/embed?pb=..." width="100%" height="320"
+        style="border:0;border-radius:var(--kt-ai-radius-3xl)" loading="lazy"></iframe>
+```
+
+### Плавные появления при скролле
+```html
+<style>
+.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
+.reveal.in{opacity:1;transform:none}
+</style>
+<script>
+var io=new IntersectionObserver(function(entries){
+  entries.forEach(function(e){ if(e.isIntersecting) e.target.classList.add('in'); });
+},{threshold:.15});
+document.querySelectorAll('.reveal').forEach(function(el){ io.observe(el); });
+</script>
+```
+
+---
+
+## Перед тем как сказать «готово»
+
+- [ ] Подключены все четыре CSS из `design-system/`, папка лежит в проекте (не забудь закоммитить её).
+- [ ] В вёрстке нет сырых hex-цветов и чужих шрифтов.
+- [ ] Страница нормально выглядит в светлой и тёмной теме и на телефоне (узкое окно).
+- [ ] Один `data-variant="primary"` на экран, тексты — про юзера, а не «Lorem ipsum».
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..71b01d7
--- /dev/null
+++ b/index.html
@@ -0,0 +1,131 @@
+<!doctype html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Развивайка - Игра для развития речи</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <header class="header">
+    <h1>🎈 Развивайка</h1>
+    <p class="subtitle">Игра для развития речи у детей</p>
+  </header>
+
+  <main class="game-container">
+    <!-- Меню игр -->
+    <section id="menu" class="menu-section">
+      <h2>Выбери игру:</h2>
+      <div class="game-cards">
+        <button class="game-card" data-game="cards">
+          <span class="card-icon">🖼️</span>
+          <span class="card-title">Карточки со словами</span>
+          <span class="card-desc">Учим слова по картинкам</span>
+        </button>
+        <button class="game-card" data-game="sounds">
+          <span class="card-icon">🔊</span>
+          <span class="card-title">Звуки и буквы</span>
+          <span class="card-desc">Учимся произносить звуки</span>
+        </button>
+        <button class="game-card" data-game="animals">
+          <span class="card-icon">🐾</span>
+          <span class="card-title">Кто как говорит?</span>
+          <span class="card-desc">Угадай животное по звуку</span>
+        </button>
+        <button class="game-card" data-game="story">
+          <span class="card-icon">📖</span>
+          <span class="card-title">Составь историю</span>
+          <span class="card-desc">Собираем рассказ из картинок</span>
+        </button>
+      </div>
+    </section>
+
+    <!-- Игра 1: Карточки со словами -->
+    <section id="game-cards" class="game-section hidden">
+      <button class="back-btn" onclick="showMenu()">← Назад в меню</button>
+      <h2>Карточки со словами</h2>
+      <div class="category-selector">
+        <button class="category-btn active" data-category="animals">Животные</button>
+        <button class="category-btn" data-category="fruits">Фрукты</button>
+        <button class="category-btn" data-category="transport">Транспорт</button>
+        <button class="category-btn" data-category="colors">Цвета</button>
+      </div>
+      <div class="flashcard-container">
+        <div class="flashcard" id="flashcard">
+          <div class="flashcard-front">
+            <div class="flashcard-image" id="card-image">🐱</div>
+            <div class="flashcard-word" id="card-word">Кот</div>
+          </div>
+        </div>
+        <div class="controls">
+          <button class="control-btn" onclick="prevCard()">← Назад</button>
+          <button class="control-btn primary" onclick="speakWord()">🔊 Произнести</button>
+          <button class="control-btn" onclick="nextCard()">Вперёд →</button>
+        </div>
+      </div>
+    </section>
+
+    <!-- Игра 2: Звуки и буквы -->
+    <section id="game-sounds" class="game-section hidden">
+      <button class="back-btn" onclick="showMenu()">← Назад в меню</button>
+      <h2>Звуки и буквы</h2>
+      <div class="sound-exercise">
+        <div class="letter-display" id="letter-display">А</div>
+        <p class="exercise-text" id="exercise-text">Повтори звук: "А-а-а"</p>
+        <div class="mouth-animation" id="mouth-animation">
+          <div class="mouth"></div>
+        </div>
+        <div class="controls">
+          <button class="control-btn primary" onclick="playSoundExample()">🔊 Послушать</button>
+          <button class="control-btn" onclick="nextSound()">Следующий звук →</button>
+        </div>
+      </div>
+    </section>
+
+    <!-- Игра 3: Кто как говорит? -->
+    <section id="game-animals" class="game-section hidden">
+      <button class="back-btn" onclick="showMenu()">← Назад в меню</button>
+      <h2>Кто как говорит?</h2>
+      <p class="instruction">Послушай звук и угадай, какое животное его издаёт!</p>
+      <div class="quiz-container">
+        <div class="quiz-question">
+          <button class="listen-btn" onclick="playAnimalSound()">🔊 Послушать звук</button>
+        </div>
+        <div class="quiz-options" id="quiz-options">
+          <!-- Кнопки с вариантами -->
+        </div>
+        <div class="feedback" id="feedback"></div>
+        <button class="control-btn primary hidden" id="next-question-btn" onclick="nextQuestion()">Следующий вопрос →</button>
+      </div>
+    </section>
+
+    <!-- Игра 4: Составь историю -->
+    <section id="game-story" class="game-section hidden">
+      <button class="back-btn" onclick="showMenu()">← Назад в меню</button>
+      <h2>Составь историю</h2>
+      <p class="instruction">Расставь картинки в правильном порядке, чтобы получилась история!</p>
+      <div class="story-container">
+        <div class="story-slots" id="story-slots">
+          <div class="story-slot" data-slot="0">1</div>
+          <div class="story-slot" data-slot="1">2</div>
+          <div class="story-slot" data-slot="2">3</div>
+        </div>
+        <div class="story-pieces" id="story-pieces">
+          <!-- Перетаскиваемые картинки -->
+        </div>
+      </div>
+      <div class="controls">
+        <button class="control-btn" onclick="resetStory()">🔄 Начать заново</button>
+        <button class="control-btn primary" onclick="checkStory()">✓ Проверить</button>
+      </div>
+      <div class="feedback" id="story-feedback"></div>
+    </section>
+  </main>
+
+  <footer class="footer">
+    <p>🌟 Молодец! Продолжай учиться!</p>
+  </footer>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..3dce517
--- /dev/null
+++ b/script.js
@@ -0,0 +1,349 @@
+// Данные для игр
+const cardData = {
+  animals: [
+    { emoji: '🐱', word: 'Кот' },
+    { emoji: '🐶', word: 'Собака' },
+    { emoji: '🐮', word: 'Корова' },
+    { emoji: '🐷', word: 'Свинья' },
+    { emoji: '🐸', word: 'Лягушка' },
+    { emoji: '🐵', word: 'Обезьяна' },
+    { emoji: '🦁', word: 'Лев' },
+    { emoji: '🐘', word: 'Слон' }
+  ],
+  fruits: [
+    { emoji: '🍎', word: 'Яблоко' },
+    { emoji: '🍌', word: 'Банан' },
+    { emoji: '🍇', word: 'Виноград' },
+    { emoji: '🍊', word: 'Апельсин' },
+    { emoji: '🍓', word: 'Клубника' },
+    { emoji: '🍉', word: 'Арбуз' },
+    { emoji: '🍑', word: 'Персик' },
+    { emoji: '🍒', word: 'Вишня' }
+  ],
+  transport: [
+    { emoji: '🚗', word: 'Машина' },
+    { emoji: '🚕', word: 'Такси' },
+    { emoji: '🚌', word: 'Автобус' },
+    { emoji: '🚎', word: 'Троллейбус' },
+    { emoji: '🚂', word: 'Поезд' },
+    { emoji: '✈️', word: 'Самолёт' },
+    { emoji: '🚁', word: 'Вертолёт' },
+    { emoji: '🚢', word: 'Корабль' }
+  ],
+  colors: [
+    { emoji: '🔴', word: 'Красный' },
+    { emoji: '🔵', word: 'Синий' },
+    { emoji: '🟢', word: 'Зелёный' },
+    { emoji: '🟡', word: 'Жёлтый' },
+    { emoji: '🟠', word: 'Оранжевый' },
+    { emoji: '🟣', word: 'Фиолетовый' },
+    { emoji: '⚫', word: 'Чёрный' },
+    { emoji: '⚪', word: 'Белый' }
+  ]
+};
+
+const sounds = ['А', 'О', 'У', 'Ы', 'Э', 'М', 'П', 'Б', 'Т', 'Д'];
+
+const animalSounds = [
+  { name: 'Кот', emoji: '🐱', sound: 'Мяу-мяу!' },
+  { name: 'Собака', emoji: '🐶', sound: 'Гав-гав!' },
+  { name: 'Корова', emoji: '🐮', sound: 'Му-у-у!' },
+  { name: 'Лягушка', emoji: '🐸', sound: 'Ква-ква!' },
+  { name: 'Овца', emoji: '🐑', sound: 'Бее-ее!' },
+  { name: 'Петух', emoji: '🐓', sound: 'Ку-ка-ре-ку!' }
+];
+
+const stories = [
+  {
+    name: 'Колобок',
+    correctOrder: ['👵', '🥧', '🫓'],
+    pieces: ['🫓', '👵', '🥧']
+  },
+  {
+    name: 'Репка',
+    correctOrder: ['🌱', '👴', '👵'],
+    pieces: ['👵', '🌱', '👴']
+  },
+  {
+    name: 'День',
+    correctOrder: ['🌅', '☀️', '🌙'],
+    pieces: ['🌙', '🌅', '☀️']
+  }
+];
+
+// Состояние игры
+let currentCategory = 'animals';
+let currentCardIndex = 0;
+let currentSoundIndex = 0;
+let currentQuestion = null;
+let currentStory = null;
+let selectedPiece = null;
+let storyState = [];
+
+// Навигация
+function showMenu() {
+  document.querySelectorAll('.game-section').forEach(section => {
+    section.classList.add('hidden');
+  });
+  document.getElementById('menu').classList.remove('hidden');
+}
+
+function showGame(gameId) {
+  document.getElementById('menu').classList.add('hidden');
+  document.querySelectorAll('.game-section').forEach(section => {
+    section.classList.add('hidden');
+  });
+  document.getElementById('game-' + gameId).classList.remove('hidden');
+  
+  if (gameId === 'cards') initCards();
+  if (gameId === 'sounds') initSounds();
+  if (gameId === 'animals') initAnimalQuiz();
+  if (gameId === 'story') initStory();
+}
+
+// Клик по карточкам игр
+document.querySelectorAll('.game-card').forEach(card => {
+  card.addEventListener('click', () => {
+    const gameId = card.dataset.game;
+    showGame(gameId);
+  });
+});
+
+// ===== ИГРА 1: Карточки со словами =====
+function initCards() {
+  currentCardIndex = 0;
+  showCard();
+}
+
+function showCard() {
+  const cards = cardData[currentCategory];
+  const card = cards[currentCardIndex];
+  document.getElementById('card-image').textContent = card.emoji;
+  document.getElementById('card-word').textContent = card.word;
+}
+
+document.querySelectorAll('.category-btn').forEach(btn => {
+  btn.addEventListener('click', () => {
+    document.querySelectorAll('.category-btn').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    currentCategory = btn.dataset.category;
+    currentCardIndex = 0;
+    showCard();
+  });
+});
+
+function nextCard() {
+  const cards = cardData[currentCategory];
+  currentCardIndex = (currentCardIndex + 1) % cards.length;
+  showCard();
+}
+
+function prevCard() {
+  const cards = cardData[currentCategory];
+  currentCardIndex = (currentCardIndex - 1 + cards.length) % cards.length;
+  showCard();
+}
+
+function speakWord() {
+  const card = cardData[currentCategory][currentCardIndex];
+  speak(card.word);
+}
+
+// ===== ИГРА 2: Звуки и буквы =====
+function initSounds() {
+  currentSoundIndex = 0;
+  showSound();
+}
+
+function showSound() {
+  const letter = sounds[currentSoundIndex];
+  document.getElementById('letter-display').textContent = letter;
+  document.getElementById('exercise-text').textContent = 'Повтори звук: "' + letter + '-а-а"';
+}
+
+function nextSound() {
+  currentSoundIndex = (currentSoundIndex + 1) % sounds.length;
+  showSound();
+}
+
+function playSoundExample() {
+  const letter = sounds[currentSoundIndex];
+  speak(letter + '-а-а');
+}
+
+// ===== ИГРА 3: Викторина с животными =====
+function initAnimalQuiz() {
+  nextQuestion();
+}
+
+function nextQuestion() {
+  currentQuestion = animalSounds[Math.floor(Math.random() * animalSounds.length)];
+  document.getElementById('feedback').textContent = '';
+  document.getElementById('feedback').className = 'feedback';
+  document.getElementById('next-question-btn').classList.add('hidden');
+  
+  const options = [currentQuestion];
+  while (options.length < 4) {
+    const random = animalSounds[Math.floor(Math.random() * animalSounds.length)];
+    if (!options.includes(random)) {
+      options.push(random);
+    }
+  }
+  
+  options.sort(() => Math.random() - 0.5);
+  
+  const container = document.getElementById('quiz-options');
+  container.innerHTML = '';
+  options.forEach(animal => {
+    const btn = document.createElement('button');
+    btn.className = 'quiz-option';
+    btn.textContent = animal.emoji + ' ' + animal.name;
+    btn.onclick = () => checkAnswer(animal, btn);
+    container.appendChild(btn);
+  });
+}
+
+function playAnimalSound() {
+  speak(currentQuestion.sound);
+}
+
+function checkAnswer(selected, button) {
+  const buttons = document.querySelectorAll('.quiz-option');
+  buttons.forEach(btn => {
+    btn.disabled = true;
+    if (btn.textContent.includes(selected.name) && selected.name === currentQuestion.name) {
+      btn.classList.add('correct');
+    }
+  });
+  
+  if (selected.name === currentQuestion.name) {
+    document.getElementById('feedback').textContent = '🎉 Правильно! Молодец!';
+    document.getElementById('feedback').className = 'feedback success';
+    speak('Правильно! Это ' + currentQuestion.name);
+    document.getElementById('next-question-btn').classList.remove('hidden');
+  } else {
+    button.classList.add('wrong');
+    document.getElementById('feedback').textContent = 'Попробуй ещё раз!';
+    document.getElementById('feedback').className = 'feedback error';
+    speak('Попробуй ещё раз');
+    setTimeout(() => {
+      buttons.forEach(btn => {
+        btn.disabled = false;
+        btn.classList.remove('wrong');
+      });
+      document.getElementById('feedback').textContent = '';
+    }, 1500);
+  }
+}
+
+// ===== ИГРА 4: Составь историю =====
+function initStory() {
+  currentStory = stories[Math.floor(Math.random() * stories.length)];
+  storyState = [null, null, null];
+  selectedPiece = null;
+  
+  document.getElementById('story-feedback').textContent = '';
+  document.getElementById('story-feedback').className = 'feedback';
+  
+  const slots = document.querySelectorAll('.story-slot');
+  slots.forEach(slot => {
+    slot.innerHTML = slot.dataset.slot + 1;
+    slot.classList.remove('filled');
+    slot.onclick = () => selectSlot(parseInt(slot.dataset.slot));
+  });
+  
+  const piecesContainer = document.getElementById('story-pieces');
+  piecesContainer.innerHTML = '';
+  currentStory.pieces.forEach((piece, index) => {
+    const pieceEl = document.createElement('div');
+    pieceEl.className = 'story-piece';
+    pieceEl.textContent = piece;
+    pieceEl.dataset.index = index;
+    pieceEl.onclick = () => selectPiece(index, pieceEl);
+    piecesContainer.appendChild(pieceEl);
+  });
+}
+
+function selectPiece(index, element) {
+  document.querySelectorAll('.story-piece').forEach(p => p.classList.remove('selected'));
+  element.classList.add('selected');
+  selectedPiece = { index, element, value: currentStory.pieces[index] };
+}
+
+function selectSlot(slotIndex) {
+  if (!selectedPiece) return;
+  
+  const slots = document.querySelectorAll('.story-slot');
+  const slot = slots[slotIndex];
+  
+  if (slot.classList.contains('filled')) {
+    const oldPiece = slot.querySelector('.piece');
+    if (oldPiece) {
+      const piecesContainer = document.getElementById('story-pieces');
+      const oldPieceEl = document.createElement('div');
+      oldPieceEl.className = 'story-piece';
+      oldPieceEl.textContent = oldPiece.textContent;
+      oldPieceEl.dataset.index = storyState[slotIndex];
+      oldPieceEl.onclick = () => selectPiece(storyState[slotIndex], oldPieceEl);
+      piecesContainer.appendChild(oldPieceEl);
+    }
+  }
+  
+  slot.innerHTML = '';
+  const pieceEl = document.createElement('div');
+  pieceEl.className = 'piece';
+  pieceEl.textContent = selectedPiece.value;
+  slot.appendChild(pieceEl);
+  slot.classList.add('filled');
+  
+  storyState[slotIndex] = selectedPiece.index;
+  
+  if (selectedPiece.element.parentNode.id === 'story-pieces') {
+    selectedPiece.element.remove();
+  }
+  
+  selectedPiece = null;
+  document.querySelectorAll('.story-piece').forEach(p => p.classList.remove('selected'));
+}
+
+function resetStory() {
+  initStory();
+}
+
+function checkStory() {
+  const filledSlots = storyState.filter(s => s !== null);
+  if (filledSlots.length < 3) {
+    document.getElementById('story-feedback').textContent = 'Заполни все ячейки!';
+    document.getElementById('story-feedback').className = 'feedback error';
+    speak('Заполни все ячейки');
+    return;
+  }
+  
+  const isCorrect = JSON.stringify(storyState) === JSON.stringify(currentStory.correctOrder.map((emoji, i) => 
+    currentStory.pieces.indexOf(currentStory.correctOrder[i])
+  ));
+  
+  if (isCorrect) {
+    document.getElementById('story-feedback').textContent = '🌟 Отлично! История правильная!';
+    document.getElementById('story-feedback').className = 'feedback success';
+    speak('Молодец! Всё правильно!');
+  } else {
+    document.getElementById('story-feedback').textContent = 'Попробуй ещё раз!';
+    document.getElementById('story-feedback').className = 'feedback error';
+    speak('Попробуй ещё раз');
+  }
+}
+
+// ===== Утилита: Синтез речи =====
+function speak(text) {
+  if ('speechSynthesis' in window) {
+    const utterance = new SpeechSynthesisUtterance(text);
+    utterance.lang = 'ru-RU';
+    utterance.rate = 0.9;
+    utterance.pitch = 1.1;
+    speechSynthesis.speak(utterance);
+  }
+}
+
+// Инициализация
+showMenu();
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..7458a32
--- /dev/null
+++ b/style.css
@@ -0,0 +1,535 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Comic Sans MS', 'Arial Rounded MT Bold', sans-serif;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  min-height: 100vh;
+  padding: 20px;
+  color: #333;
+}
+
+.header {
+  text-align: center;
+  margin-bottom: 30px;
+  animation: bounce 2s infinite;
+}
+
+.header h1 {
+  font-size: clamp(32px, 6vw, 56px);
+  color: #fff;
+  text-shadow: 3px 3px 0 #ff6b6b, 6px 6px 0 #ffd93d;
+  margin-bottom: 10px;
+}
+
+.subtitle {
+  font-size: clamp(16px, 3vw, 22px);
+  color: #fff;
+  text-shadow: 2px 2px 0 #667eea;
+}
+
+.game-container {
+  max-width: 900px;
+  margin: 0 auto;
+  background: #fff;
+  border-radius: 30px;
+  padding: 30px;
+  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+}
+
+.hidden {
+  display: none !important;
+}
+
+/* Меню игр */
+.menu-section h2 {
+  font-size: clamp(24px, 4vw, 32px);
+  text-align: center;
+  color: #667eea;
+  margin-bottom: 30px;
+}
+
+.game-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 20px;
+  margin-bottom: 30px;
+}
+
+.game-card {
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  border: none;
+  border-radius: 20px;
+  padding: 25px 20px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
+}
+
+.game-card:hover {
+  transform: translateY(-10px) scale(1.05);
+  box-shadow: 0 15px 30px rgba(0,0,0,0.3);
+}
+
+.game-card:active {
+  transform: translateY(-5px) scale(1.02);
+}
+
+.card-icon {
+  font-size: clamp(40px, 8vw, 64px);
+  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.2));
+}
+
+.card-title {
+  font-size: clamp(16px, 3vw, 20px);
+  font-weight: bold;
+  color: #fff;
+  text-shadow: 2px 2px 0 rgba(0,0,0,0.2);
+}
+
+.card-desc {
+  font-size: clamp(12px, 2vw, 14px);
+  color: #fff;
+  opacity: 0.9;
+}
+
+/* Карточки других цветов */
+.game-card:nth-child(2) {
+  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
+}
+
+.game-card:nth-child(3) {
+  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
+}
+
+.game-card:nth-child(4) {
+  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
+}
+
+/* Секции игр */
+.game-section {
+  animation: fadeIn 0.5s ease;
+}
+
+.game-section h2 {
+  font-size: clamp(24px, 4vw, 32px);
+  color: #667eea;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.back-btn {
+  background: #f0f0f0;
+  border: 2px solid #ddd;
+  border-radius: 10px;
+  padding: 10px 20px;
+  font-size: 16px;
+  cursor: pointer;
+  margin-bottom: 20px;
+  transition: all 0.3s ease;
+}
+
+.back-btn:hover {
+  background: #e0e0e0;
+  transform: translateX(-5px);
+}
+
+/* Выбор категории */
+.category-selector {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  justify-content: center;
+  margin-bottom: 30px;
+}
+
+.category-btn {
+  background: #f8f9fa;
+  border: 2px solid #667eea;
+  border-radius: 20px;
+  padding: 10px 20px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.category-btn:hover {
+  background: #667eea;
+  color: #fff;
+}
+
+.category-btn.active {
+  background: #667eea;
+  color: #fff;
+  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+}
+
+/* Флеш-карточка */
+.flashcard-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 30px;
+}
+
+.flashcard {
+  width: 100%;
+  max-width: 400px;
+  height: 350px;
+  perspective: 1000px;
+  cursor: pointer;
+}
+
+.flashcard-front {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, #fff6b7 0%, #f6416c 100%);
+  border-radius: 25px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  box-shadow: 0 15px 35px rgba(0,0,0,0.2);
+  transition: transform 0.6s;
+}
+
+.flashcard-image {
+  font-size: clamp(80px, 15vw, 140px);
+  filter: drop-shadow(3px 3px 0 rgba(0,0,0,0.2));
+}
+
+.flashcard-word {
+  font-size: clamp(28px, 6vw, 42px);
+  font-weight: bold;
+  color: #fff;
+  text-shadow: 3px 3px 0 rgba(0,0,0,0.3);
+}
+
+/* Кнопки управления */
+.controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  justify-content: center;
+}
+
+.control-btn {
+  background: #f8f9fa;
+  border: 2px solid #667eea;
+  border-radius: 15px;
+  padding: 12px 25px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-weight: bold;
+}
+
+.control-btn:hover {
+  background: #667eea;
+  color: #fff;
+  transform: scale(1.05);
+}
+
+.control-btn:active {
+  transform: scale(0.98);
+}
+
+.control-btn.primary {
+  background: #667eea;
+  color: #fff;
+}
+
+.control-btn.primary:hover {
+  background: #5568d3;
+  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
+}
+
+/* Игра со звуками */
+.sound-exercise {
+  text-align: center;
+  padding: 30px;
+}
+
+.letter-display {
+  font-size: clamp(100px, 20vw, 180px);
+  font-weight: bold;
+  color: #667eea;
+  text-shadow: 4px 4px 0 #f5576c;
+  margin-bottom: 20px;
+  animation: pulse 2s infinite;
+}
+
+.exercise-text {
+  font-size: clamp(18px, 3vw, 24px);
+  color: #333;
+  margin-bottom: 30px;
+}
+
+.mouth-animation {
+  width: 150px;
+  height: 150px;
+  background: #ffe5e5;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 30px;
+  border: 4px solid #ff6b6b;
+}
+
+.mouth {
+  width: 60px;
+  height: 60px;
+  background: #ff6b6b;
+  border-radius: 50%;
+  animation: speak 1s infinite;
+}
+
+/* Викторина */
+.quiz-container {
+  text-align: center;
+  padding: 30px;
+}
+
+.quiz-question {
+  margin-bottom: 30px;
+}
+
+.listen-btn {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: #fff;
+  border: none;
+  border-radius: 50px;
+  padding: 20px 40px;
+  font-size: clamp(18px, 3vw, 22px);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
+}
+
+.listen-btn:hover {
+  transform: scale(1.1);
+  box-shadow: 0 12px 30px rgba(0,0,0,0.3);
+}
+
+.listen-btn:active {
+  transform: scale(0.95);
+}
+
+.quiz-options {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 15px;
+  margin-bottom: 30px;
+}
+
+.quiz-option {
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  border: none;
+  border-radius: 15px;
+  padding: 20px;
+  font-size: clamp(16px, 3vw, 20px);
+  color: #fff;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
+}
+
+.quiz-option:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
+}
+
+.quiz-option.correct {
+  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
+  animation: celebrate 0.5s ease;
+}
+
+.quiz-option.wrong {
+  background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
+  animation: shake 0.5s ease;
+}
+
+.feedback {
+  font-size: clamp(20px, 4vw, 28px);
+  font-weight: bold;
+  margin-bottom: 20px;
+  min-height: 40px;
+}
+
+.feedback.success {
+  color: #11998e;
+  animation: popIn 0.5s ease;
+}
+
+.feedback.error {
+  color: #ff416c;
+}
+
+/* История */
+.story-container {
+  padding: 20px;
+}
+
+.story-slots {
+  display: flex;
+  gap: 15px;
+  justify-content: center;
+  margin-bottom: 30px;
+  flex-wrap: wrap;
+}
+
+.story-slot {
+  width: 120px;
+  height: 120px;
+  border: 3px dashed #667eea;
+  border-radius: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 40px;
+  color: #667eea;
+  background: #f8f9fa;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.story-slot.filled {
+  border: 3px solid #11998e;
+  background: #e8f8f5;
+}
+
+.story-slot .piece {
+  font-size: 60px;
+  cursor: grab;
+}
+
+.story-pieces {
+  display: flex;
+  gap: 15px;
+  justify-content: center;
+  flex-wrap: wrap;
+  padding: 20px;
+  background: #f8f9fa;
+  border-radius: 15px;
+}
+
+.story-piece {
+  font-size: 60px;
+  cursor: grab;
+  transition: all 0.3s ease;
+  padding: 10px;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+}
+
+.story-piece:hover {
+  transform: scale(1.1);
+  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
+}
+
+.story-piece.selected {
+  background: #667eea;
+  border-radius: 15px;
+  transform: scale(1.15);
+  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
+}
+
+.instruction {
+  font-size: clamp(16px, 3vw, 20px);
+  text-align: center;
+  color: #667eea;
+  margin-bottom: 20px;
+  padding: 15px;
+  background: #f0f4ff;
+  border-radius: 15px;
+}
+
+/* Footer */
+.footer {
+  text-align: center;
+  margin-top: 30px;
+  padding-top: 20px;
+  border-top: 3px solid #f0f0f0;
+}
+
+.footer p {
+  font-size: clamp(18px, 3vw, 24px);
+  color: #667eea;
+  animation: glow 2s infinite;
+}
+
+/* Анимации */
+@keyframes bounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-10px); }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes pulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+}
+
+@keyframes speak {
+  0%, 100% { transform: scaleY(0.3); }
+  50% { transform: scaleY(1); }
+}
+
+@keyframes celebrate {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+}
+
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-10px); }
+  75% { transform: translateX(10px); }
+}
+
+@keyframes popIn {
+  0% { opacity: 0; transform: scale(0.5); }
+  100% { opacity: 1; transform: scale(1); }
+}
+
+@keyframes glow {
+  0%, 100% { text-shadow: 0 0 10px #667eea; }
+  50% { text-shadow: 0 0 20px #667eea, 0 0 30px #764ba2; }
+}
+
+/* Адаптивность */
+@media (max-width: 600px) {
+  body {
+    padding: 10px;
+  }
+  
+  .game-container {
+    padding: 20px;
+    border-radius: 20px;
+  }
+  
+  .game-cards {
+    grid-template-columns: 1fr;
+  }
+  
+  .controls {
+    flex-direction: column;
+  }
+  
+  .control-btn {
+    width: 100%;
+  }
+}