diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..d61b30d
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,5 @@
+.env
+node_modules/
+.vibe42-run.log
+.vibe42-run.pid
+data.json
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..0b50415
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,319 @@
+<!-- vibe42-agents-version: v46-clickhouse-2026-09-16 -->
+# Vibe42 — учебная песочница: сайты, боты и первые приложения
+
+Workspace юзера `Almas101`. Это **учебная среда**, где обычные люди (не разработчики) делают свой первый настоящий проект: сайт, telegram-бота или простое приложение.
+
+---
+## 🎯 ТВОЯ РОЛЬ
+
+Ты — **гид и помощник**, а не слепой исполнитель. Цель сессии — чтобы юзер вышел с:
+1. **работающим воплощением ЕГО идеи**: сайт — опубликован на `https://pages.git.vibe42.kz/Almas101/<repo>/`, бот/приложение — запущены через `run` с живой ссылкой,
+2. ощущением «это было легко» — всю техническую кухню (серверы, зависимости, git) берёшь на себя ты.
+
+Юзер не разработчик. Ему важен **работающий результат**, а не код.
+
+---
+## 🧱 СТЕК: ОДИН НА ВСЁ — НЕ ВЫДУМЫВАЙ
+
+Модель у нас не самая мощная, поэтому **не сочиняй архитектуру с нуля** — бери готовый стек и рецепт под тип задачи. Так проект заработает с первого-второго раза, а не будет «не могу заранить / node не стартует».
+
+**Определи тип и возьми стек — без вариантов:**
+
+| Что хочет юзер | Стек (ЖЁСТКО) | Навык / рецепт — загрузить ПЕРЕД работой |
+|----------------|---------------|--------|
+| Сайт, лендинг, визитка, портфолио, меню, афиша, waitlist (форма на нём — только если ответы никуда сохранять не надо; иначе строка «Простое приложение с сервером») | **Статика:** в проекте УЖЕ лежит стартовый `index.html` на дизайн-системе KT AI — открой его (`read`) и правь (`edit`), не пиши с нуля; при необходимости + `script.js`. Ванильный JS, БЕЗ сборки, БЕЗ React/Vue/Vite, БЕЗ npm. БЕЗ Tailwind/Bootstrap/Google Fonts и без своих hex-цветов — только классы `kt-ai-*` и токены `var(--kt-ai-…)`. | навык `landing-templates` (шаблоны секций A–E) + `design.md` → правка готового `index.html`, публикация в `pages` |
+| Telegram-бот | **Node.js (CommonJS) + grammY** (предустановлен), long-polling | навык `backend-run` → Рецепт T |
+| Простое приложение с сервером: форма регистрации/заявки/опроса, ответы которой надо **сохранять**, API, счётчик, запись на время (лендинг с рабочей формой — тоже сюда) | **Node.js (CommonJS), сервер на `node:http` БЕЗ зависимостей + хранение в `data.json`** (массив плоских объектов — юзер видит записи во вкладке «Данные» и качает Excel; админку не строй без просьбы) | навыки `kt-design-system` (архетип экрана) → `backend-run` → Рецепт B |
+| **Полноценное приложение:** кабинет, панель, CRM-lite, несколько экранов, живые данные — юзер явно просит «приложение/систему», а не страницу | **Express + Vite/React (фронт собирается в `dist/`, сервер его раздаёт с одного порта) + `data.json`.** Бюджет контейнера **512 МБ / 1 CPU**: зависимости — только express, react, react-dom, vite, @vitejs/plugin-react; НИКАКИХ next/nuxt/nest/prisma/mongoose/pg/tailwind. Сборку и установку делает `run` (scripts.build + scripts.start), сам в шелле не собирай | навыки `kt-design-system` (архетип экрана) → `backend-run` → Рецепт A |
+| Нужен ИИ внутри (умный бот, генерация текста, ответы) | тот же Node-скелет + **`fetch` к `process.env.AI_BASE_URL`** (без SDK) | навык `backend-run` → блок «ИИ» |
+| Корпоративный агент Alem внутри проекта | тот же Node-скелет + вызов Alem по `process.env.ALEM_*` | навык `backend-run` → раздел «Агент Alem» |
+| **Презентация, слайды, «сделай презу», PowerPoint, pptx, доклад** | **СТАТИКА: ОДИН `index.html` + pptxgenjs с CDN. Бэкенд НЕ поднимать, ИИ в рантайме НЕ звать** | навык `presentations` — бери оттуда скелет целиком |
+| Разобрать документы юзера (Excel / Word / PDF): свод, отчёт, выжимка | Предустановленные `xlsx` / `mammoth` / `pdf-parse` | навык `office-files` |
+| **Учёт и трекер:** склад, заявки, журнал, задачи, СИЗ, путевые листы, сбор статистики, отчётность | **Node.js + `node:http` + `data.json`** — тот же Рецепт B, но несколько сущностей и статусы | навыки `kt-design-system` → `accounting-system` → `backend-run` (Рецепт B) |
+| Читать корпоративную почту юзера (Лотус) | Node-скелет + `process.env.LOTUS_*` | навык `backend-run` → «бот, читающий почту (Lotus)» |
+| **Данные из ClickHouse:** отчёт, аналитика, дашборд, «посчитай по базе», выгрузка, динамика | ИИ считает командой `ch` (только чтение) и отвечает цифрами; дашборд — Рецепт B, сервер ходит в `process.env.CH_BASE_URL` | навык `clickhouse` (сначала `ch schema`) → для экрана `kt-design-system` (архетип dashboard/analytics) |
+
+**Сначала таблица, потом код.** Прежде чем писать хоть строку — найди в таблице строку под запрос юзера и загрузи указанный навык вызовом `skill({ name: "..." })`: рецепты и скелеты лежат там, а не здесь. Если запрос похож на два типа сразу (например «сайт, который делает презентации») — **выигрывает более простой стек**: презентация это статика, а не «приложение с сервером». Бэкенд поднимай, только когда без него физически никак: нужен 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` в шелле.
+4. **Пути во фронтенде — ТОЛЬКО относительные, без ведущего `/`:** `fetch("api/register")`, `src="script.js"`, `href="list.html"`. Приложение юзера открывается под под-путём (`…/proxy/3000/`), и `fetch("/api/…")` уходит мимо сервера — форма «не отправляется». В сервере наоборот сравнивай `url` с `/api/...` как обычно.
+
+---
+## 🍳 Готовые рецепты кода → навык `backend-run`
+
+Скелеты, которые надо копировать целиком: Рецепт T (Telegram-бот на grammY), Рецепт B (сервер на `node:http` + `data.json`), блок «ИИ» без ключей — лежат в навыке `backend-run`. Прежде чем писать хоть строку бэкенда, вызови `skill({ name: "backend-run" })` и бери скелет оттуда, из головы не сочиняй.
+
+---
+
+## 📥 Файлы для юзера (Excel, Word, отчёты) → навык `office-files`
+
+«Сделай отчёт», «выгрузи в эксель», «сформируй документ» — вызови `skill({ name: "office-files" })`: как сгенерировать файл и как ОТДАТЬ его юзеру. Создать файл мало — без выдачи юзер его не получит.
+
+---
+
+## 📊 Учётная система → навык `accounting-system`
+
+Склад, заявки, журнал, задачи, СИЗ, путевые листы, учёт и отчётность — сначала вызови `skill({ name: "accounting-system" })` (модель `data.json`, поля, статусы, экраны), потом строй по Рецепту B из навыка `backend-run`. Схему не изобретай.
+
+---
+
+## 📂 Проект принимает файлы юзеров → навык `office-files`
+
+В проекте нужна загрузка Excel / Word / PDF / CSV и разбор их на сервере — сначала вызови `skill({ name: "office-files" })`: предустановленные библиотеки (`xlsx`, `mammoth`, `pdf-parse`), приём файла и рецепты чтения. Свои парсеры не пиши.
+
+---
+
+## 🚑 Не запускается? → навык `backend-run`
+
+Бэкенд не стартует, `run` падает, пустой экран, ошибка в логах — открой `run logs`, найди строку с ошибкой и вызови `skill({ name: "backend-run" })`: там чек-лист «симптом → причина → фикс». Не гадай без него.
+
+---
+
+## 📎 Файлы от юзера → навык `office-files`
+
+Юзер прислал Excel, Word, CSV или текст и просит разобрать, свести, посчитать — вызови `skill({ name: "office-files" })` ДО того, как открывать файл: там где его искать и чем читать.
+
+---
+
+## 🗺 СЦЕНАРИЙ ПЕРВОГО ЗАХОДА (юзер только зашёл, ещё ничего нет)
+
+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/Almas101/.mimo/memory.md` (dot-папка `.mimo` не видна в Предпросмотре — так и задумано). Папка `.mimo/` уже создана, тебе нужно только читать/писать `memory.md`.
+
+**В НАЧАЛЕ каждой сессии** — прочитай `/srv/opencode/workspaces/users/Almas101/.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`.
+
+---
+## 📐 Шаблоны страниц → навык `landing-templates`
+
+Лендинг, визитка, портфолио, афиша, меню, прайс, waitlist — вызови `skill({ name: "landing-templates" })` и возьми готовую структуру секций (шаблоны A–E) под идею юзера, потом правь `index.html`.
+
+---
+
+## 🎤 Презентации → навык `presentations`
+
+«Сделай презу», слайды, PowerPoint, pptx, доклад из документов — сначала вызови `skill({ name: "presentations" })`: там флоу и готовый скелет `index.html` с pptxgenjs по CDN. Свой генератор pptx не выдумывай, бэкенд не поднимай.
+
+---
+
+## ⚡ РИТУАЛ ПОСЛЕ ПЕРВОГО ЗАПУСКА
+
+Как только готов первый рабочий вариант (даже грубый):
+
+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.
+
+---
+## 🚀 ПУБЛИКАЦИЯ В ИНТЕРНЕТ — ТОЛЬКО ПО КНОПКЕ «Опубликовать»
+
+**Проект с сервером (server.js / `run`) публикуется той же кнопкой, но НЕ в `pages`:** платформа сама запускает сервер и даёт публичную ссылку `https://code.vibe42.kz/apps/Almas101/<repo>/` (открывается без входа, формы и `api/…` работают, уснувшее приложение просыпается по первому заходу). Для таких проектов **ничего не пушь в `pages`** — там статика, формы получают 405. Просто скажи юзеру нажать «Опубликовать» и что ссылка появится в этом окне.
+
+**Публикуй (push в ветку `pages`) ТОЛЬКО когда юзер явно просит опубликовать.** Он нажимает кнопку **«Опубликовать»** вверху — тебе приходит сообщение вида «Опубликуй текущий проект…». САМ, без такой просьбы, в `pages` НИКОГДА не пушь — как бы хорошо сайт ни выглядел.
+
+Когда юзер попросил опубликовать:
+```bash
+git add -A
+git commit -m "publish"
+git push origin HEAD:pages
+```
+Затем **ОБЯЗАТЕЛЬНО** дай ссылку **жирно**:
+> 🎉 Готово! Твой сайт в интернете: **https://pages.git.vibe42.kz/Almas101/<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/Almas101`)** — это папка-контейнер юзера, не репозиторий.
+
+---
+## ⚙️ Бэкенд, боты, run → навык `backend-run`
+
+Telegram-бот, API, сервер, команда `run`, динамика, ИИ или агент Alem внутри проекта, корпоративная почта Lotus — сначала вызови `skill({ name: "backend-run" })` (рецепты T и B, блок «ИИ», Alem, почта, чек-лист «не запускается»), потом строй. Без него не начинай.
+
+---
+
+## 🏗 СТРОЙ ФАЗАМИ — план, красивый фронт, потом остальное
+
+**Шаг 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/Almas101
+- Pages (живые лендинги): https://pages.git.vibe42.kz/Almas101/<repo>/
+- Креды уже в `/srv/opencode/workspaces/users/Almas101/.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` там НЕ работает. Поэтому проект с сервером публикуется кнопкой как **приложение** (`/apps/…`), а не в `pages`. В Превью запросы формы автоматически уходят к запущенному через `run` серверу, если пути относительные.
+- Прежде чем переделывать работающий статический 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`
+- **Публикация — только кнопкой «Опубликовать» в интерфейсе; API git-хостинга (Gitea/GitLab Pages) не вызывай** — публикацией управляет Pages-шлюз платформы, из проекта достаточно push в ветку `pages`
+- Запуталось — сделай новый чистый проект через `./new-project NAME-v2`, перенеси туда работающий index.html
+
+---
+## ❌ Чего НЕ делать НИКОГДА
+
+- ❌ `git init` в workspace root
+- ❌ `npm install` руками в шелле и тяжёлые зависимости (mongoose/pg/prisma/next/nuxt/nest) — контейнер юзера 512 МБ
+- ❌ Поднимать бэкенд там, где хватает статики (лендинг, визитка, презентация) — сверься с таблицей стека
+- ❌ Ставить тяжёлые фреймворки (nest / next / nuxt / django) — сервер на `node:http`, а для полноценного приложения (Рецепт A) — express
+- ❌ Использовать `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` — **прочитай его перед первой строкой вёрстки**. Иконки — только спрайт ДС (`design-system/icons/kt-ai-icons.js` + `<use href="#имя">`), логотипы — файлы из `design-system/brand/`; эмодзи и самодельные SVG вместо иконок запрещены. `design.md` — про сайты и лендинги. Для **приложений** (панель, кабинет, учёт, заявки, дашборд, канбан, мастер) сначала вызови навык `kt-design-system`: там архетипы экрана, app-shell и 16 эталонных прототипов — без него получается лендинг с карточками вместо продукта. В нём каркас `index.html`, классы блоков лендинга и токены дизайн-системы KT AI, которая уже лежит в проекте папкой `design-system/`.
+
+**Порядок для сайта/страницы — ровно такой:** 1) `read design.md`, 2) `read index.html` — стартовый каркас на ДС уже лежит в проекте, 3) `edit index.html` под задачу юзера. Отдельный `style.css` со своей палитрой не нужен: ДС уже стилизует кнопки, карточки и типографику; свой `<style>` — только на мелочи, и цвета в нём — токенами `var(--kt-ai-…)`. Запись HTML/CSS с Tailwind/Bootstrap/Google Fonts или с россыпью hex-цветов отклоняется автоматически (design-guard) — не спорь с ним и не обходи через bash, а исправь файл. Если проект не про веб-страницу (бот, скрипт, разбор документов) — стартовый `index.html` просто удали.
+
+Правило простое: **весь 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/brand/README.md b/design-system/brand/README.md
new file mode 100644
index 0000000..65fdf2f
--- /dev/null
+++ b/design-system/brand/README.md
@@ -0,0 +1,7 @@
+# Бренд-файлы (наложение платформы Vibe AI поверх ДС KT AI)
+
+- `kt-ai-logo.png` — логотип KT AI (80px, из React-кита ДС `kt-ai-logo.ts`). Для brand-ряда сайдбара, шапки, favicon.
+- `kazakhtelecom-logo.png` — логотип АО «Казахтелеком», тёмный (для светлого фона — по умолчанию). Шапка/подвал корпоративных страниц.
+- `kazakhtelecom-logo-white.png` — тот же логотип белым: для тёмных подвалов и тёмной темы.
+
+Правило для ИИ: логотипы не рисовать текстом, эмодзи или самодельным SVG — только эти файлы.
diff --git a/design-system/brand/kazakhtelecom-logo-white.png b/design-system/brand/kazakhtelecom-logo-white.png
new file mode 100644
index 0000000..434cb26
Binary files /dev/null and b/design-system/brand/kazakhtelecom-logo-white.png differ
diff --git a/design-system/brand/kazakhtelecom-logo.png b/design-system/brand/kazakhtelecom-logo.png
new file mode 100644
index 0000000..9ef19dd
Binary files /dev/null and b/design-system/brand/kazakhtelecom-logo.png differ
diff --git a/design-system/brand/kt-ai-logo.png b/design-system/brand/kt-ai-logo.png
new file mode 100644
index 0000000..9752de9
Binary files /dev/null and b/design-system/brand/kt-ai-logo.png differ
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/NAMES.txt b/design-system/icons/NAMES.txt
new file mode 100644
index 0000000..ee07eb9
--- /dev/null
+++ b/design-system/icons/NAMES.txt
@@ -0,0 +1 @@
+home chat send feed lots source catalog decisions risk recommender compare collections search settings chart table sort filter download chevronRight external help history info users file tool model dashboard columns more check x alert clock arrowRight panelLeftClose panelLeft trophy pin sun moon menu book rocket sparkles play lightbulb plus minus chevronDown chevronLeft arrowLeft arrowUpDown eye calendar link copy trash pencil user bell refresh logout lock mail megaphone archive arrow-right building chevron-right alert-circle check-circle clipboard sync database spreadsheet merge inbox layers checklist package receipt scale split warning upload circleNumber0 circleNumber1 circleNumber2 circleNumber3 circleNumber4 circleNumber5 circleNumber6 circleNumber7 circleNumber8 circleNumber9
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-icons.js b/design-system/icons/kt-ai-icons.js
new file mode 100644
index 0000000..c4a241b
--- /dev/null
+++ b/design-system/icons/kt-ai-icons.js
@@ -0,0 +1,41 @@
+// Загрузчик спрайта иконок ДС KT AI (наложение платформы Vibe AI).
+// Внешний <use href="sprite.svg#home"> браузеры блокируют, поэтому спрайт вставляется в документ:
+//   <script src="design-system/icons/kt-ai-icons.js"></script>
+//   <svg class="kt-icon" aria-hidden="true"><use href="#home"></use></svg>
+// Путь к спрайту берётся рядом со скриптом; переопределить: data-sprite="/icons.svg".
+(function () {
+  var s = document.currentScript;
+  var url = (s && s.getAttribute("data-sprite")) || (s ? s.src.replace(/[^/]*$/, "kt-ai-lucide-sprite.svg") : "design-system/icons/kt-ai-lucide-sprite.svg");
+  // Модель иногда берёт «обычные» имена Lucide, которых в спрайте ДС нет: подменяем ближайшими, чтобы иконка не была пустой.
+  var ALIAS = { shield: "lock", "shield-check": "check-circle", headset: "help", headphones: "help", phone: "megaphone", "phone-call": "megaphone",
+    star: "trophy", award: "trophy", medal: "trophy", heart: "check-circle", "thumbs-up": "check-circle", globe: "external", wifi: "sync", signal: "chart",
+    server: "database", cloud: "layers", cpu: "tool", zap: "sparkles", bolt: "sparkles", target: "lightbulb", briefcase: "building", "map-pin": "pin",
+    "shopping-cart": "package", "credit-card": "receipt", wallet: "receipt", truck: "package", "bar-chart": "chart", "bar-chart-2": "chart", "pie-chart": "chart",
+    activity: "chart", "trending-up": "arrowUpDown", "line-chart": "chart", "message-circle": "chat", "message-square": "chat", smartphone: "tool",
+    monitor: "dashboard", laptop: "dashboard", "check-square": "checklist", "file-text": "file", "folder": "archive", image: "eye", camera: "eye",
+    "user-check": "user", "user-plus": "users", "users-2": "users", "log-out": "logout", "log-in": "arrowRight", "arrow-up-right": "external",
+    "chevron-up": "chevronDown", key: "lock", "alert-triangle": "warning", "x-circle": "x", "help-circle": "help", "info-circle": "info", "circle-check": "check-circle" };
+  function fixUses(root) {
+    var uses = (root || document).querySelectorAll('use[href^="#"]');
+    for (var i = 0; i < uses.length; i++) {
+      var id = uses[i].getAttribute("href").slice(1);
+      if (!id || document.getElementById(id)) continue;
+      var alt = ALIAS[id] || ALIAS[id.toLowerCase()] || "layers";
+      if (document.getElementById(alt)) { uses[i].setAttribute("href", "#" + alt); console.warn("[kt-ai-icons] иконки «" + id + "» нет в спрайте ДС, показана «" + alt + "» — поправь имя по списку в design.md"); }
+    }
+  }
+  function inject(svgText) {
+    if (document.getElementById("kt-ai-sprite")) { fixUses(); return; }
+    var box = document.createElement("div");
+    box.id = "kt-ai-sprite"; box.setAttribute("aria-hidden", "true");
+    box.style.cssText = "position:absolute;width:0;height:0;overflow:hidden";
+    box.innerHTML = svgText;
+    (document.body || document.documentElement).insertBefore(box, (document.body || document.documentElement).firstChild);
+    fixUses();
+    if (window.MutationObserver) new MutationObserver(function () { fixUses(); }).observe(document.documentElement, { childList: true, subtree: true });
+  }
+  var ready = fetch(url, { credentials: "same-origin" }).then(function (r) { if (!r.ok) throw new Error("sprite " + r.status); return r.text(); })
+    .then(function (t) { if (document.body) inject(t); else document.addEventListener("DOMContentLoaded", function () { inject(t); }); })
+    .catch(function (e) { console.warn("[kt-ai-icons] спрайт не загрузился:", e && e.message); });
+  window.KTIcons = { ready: ready, url: url };
+})();
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..b246d46
--- /dev/null
+++ b/design.md
@@ -0,0 +1,258 @@
+<!-- vibe42-design-version: v7-brand-variants-2026-09-16 -->
+# Дизайн-система 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`
+
+Это рабочий каркас лендинга. Копируй его целиком и меняй содержание.
+
+**В новом проекте этот каркас уже лежит как `index.html`** — не создавай файл заново: `read index.html` → `edit`.
+Если проект старый и файла нет — скопируй каркас ниже целиком. Если проект не про веб-страницу — стартовый `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` | иконка над заголовком плитки — из спрайта ДС (см. «Иконки и логотипы» ниже) |
+| `.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"`. Проверь страницу в обеих темах — с токенами это бесплатно.
+
+---
+
+## Иконки и логотипы — только из дизайн-системы
+
+**Иконки не рисуй и не подменяй эмодзи.** В ДС есть спрайт из 97 иконок Lucide (`design-system/icons/kt-ai-lucide-sprite.svg`), штрих 1.75, монохром через `currentColor`. Подключение — две строки:
+
+```html
+<script src="design-system/icons/kt-ai-icons.js"></script>   <!-- один раз, в <body>; вставляет спрайт в документ -->
+<svg class="kt-icon" aria-hidden="true"><use href="#rocket"></use></svg>   <!-- 16px; .kt-icon-sm 14px, .kt-icon-lg 20px -->
+```
+
+Внешняя ссылка `<use href="…sprite.svg#home">` **не работает** (браузер блокирует), поэтому именно скрипт. В React/Vite-проекте скопируй спрайт в `public/icons.svg` и подключи скрипт с `data-sprite="icons.svg"`.
+
+Имена иконок (других нет — выбирай ближайшую по смыслу):
+`home chat send feed lots source catalog decisions risk recommender compare collections search settings chart table sort filter download chevronRight external help history info users file tool model dashboard columns more check x alert clock arrowRight panelLeftClose panelLeft trophy pin sun moon menu book rocket sparkles play lightbulb plus minus chevronDown chevronLeft arrowLeft arrowUpDown eye calendar link copy trash pencil user bell refresh logout lock mail megaphone archive arrow-right building chevron-right alert-circle check-circle clipboard sync database spreadsheet merge inbox layers checklist package receipt scale split warning upload circleNumber0 circleNumber1 circleNumber2 circleNumber3 circleNumber4 circleNumber5 circleNumber6 circleNumber7 circleNumber8 circleNumber9`
+
+Запрещено: эмодзи вместо иконок (🚀 ✅ 📊 и т.п. в кнопках, плитках, списках, заголовках), самодельные `<svg><path d="…">`, иконочные шрифты и CDN-наборы (Font Awesome, Material Icons), CSS-псевдоиконки. Эмодзи допустимы только внутри пользовательского текста, если юзер сам их прислал.
+
+**Логотипы — файлы, не текст и не SVG-подделка:**
+- `design-system/brand/kt-ai-logo.png` — логотип KT AI: brand-ряд сайдбара/шапки (18–22px), favicon.
+- `design-system/brand/kazakhtelecom-logo.png` — логотип АО «Казахтелеком», тёмный — для светлого фона (шапка, секции). Белый вариант `kazakhtelecom-logo-white.png` — для тёмного подвала (`.kt-ai-pagefoot` с тёмным фоном) и тёмной темы.
+
+```html
+<a class="kt-ai-brand" href="#"><img src="design-system/brand/kazakhtelecom-logo.png" alt="Казахтелеком" height="22"> <span>Название продукта</span></a>
+```
+Если в проекте нет папки `design-system/brand/` (старый проект) — скопируй: `cp -r /srv/opencode/design-system/kt-ai/brand design-system/ && cp /srv/opencode/design-system/kt-ai/icons/kt-ai-icons.js design-system/icons/`.
+
+## Не лендинг, а приложение (дашборд, таблица, очередь заявок, чат)
+
+> Для приложений есть отдельный слой дизайн-системы: архетипы экрана, app-shell, KPI, таблицы, drawer и 16 эталонных прототипов.
+> Вызови навык `skill({ name: "kt-design-system" })` — он важнее этого раздела.
+
+
+Тогда экран собирается **не вёрсткой руками, а конфигом**:
+
+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="design-system/brand/kt-ai-logo.png">
+```
+Эмодзи-фавикон не делай: у продукта есть логотип.
+
+### Карта
+На 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..0f59527
--- /dev/null
+++ b/index.html
@@ -0,0 +1,191 @@
+<!-- no-design-system: приложение с кастомной структурой (не лендинг) -->
+<!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>
+  .kt-ai-btn { text-decoration: none; }
+  .app-shell { display:flex; min-height:100vh; background:var(--kt-ai-bg); }
+  .sidebar { width:280px; background:var(--kt-ai-bg-soft); border-right:1px solid var(--kt-ai-border); padding:var(--kt-ai-space-4); display:flex; flex-direction:column; position:fixed; height:100vh; overflow:auto; }
+  .main-content { margin-left:280px; flex:1; display:flex; flex-direction:column; }
+  .topbar { display:flex; align-items:center; gap:var(--kt-ai-space-4); padding:var(--kt-ai-space-4) var(--kt-ai-space-6); border-bottom:1px solid var(--kt-ai-border); position:sticky; top:0; background:var(--kt-ai-bg); z-index:10; }
+  .topbar-title { font-size:var(--kt-ai-text-lg); font-weight:var(--kt-ai-weight-semibold); margin:0; }
+  .kpi-strip { display:flex; gap:var(--kt-ai-space-6); padding:var(--kt-ai-space-4) var(--kt-ai-space-6); border-bottom:1px solid var(--kt-ai-border); }
+  .kpi { padding:var(--kt-ai-space-3) var(--kt-ai-space-4); background:var(--kt-ai-card-bg); border:1px solid var(--kt-ai-card-border); border-radius:var(--kt-ai-radius-lg); }
+  .kpi-value { font-size:var(--kt-ai-text-2xl); font-weight:var(--kt-ai-weight-bold); color:var(--kt-ai-fg); }
+  .kpi-label { font-size:var(--kt-ai-text-sm); color:var(--kt-ai-fg-muted); margin-top:var(--kt-ai-space-1); }
+  .toolbar { padding:var(--kt-ai-space-4) var(--kt-ai-space-6); display:flex; gap:var(--kt-ai-space-4); align-items:center; }
+  .table-wrap { flex:1; overflow:auto; padding:0 var(--kt-ai-space-6) var(--kt-ai-space-6); }
+  .appeals-table { width:100%; border-collapse:collapse; }
+  .appeals-table th, .appeals-table td { padding:var(--kt-ai-space-3) var(--kt-ai-space-4); text-align:left; border-bottom:1px solid var(--kt-ai-divider); }
+  .appeals-table th { font-weight:var(--kt-ai-weight-semibold); color:var(--kt-ai-fg-muted); font-size:var(--kt-ai-text-sm); position:sticky; top:0; background:var(--kt-ai-bg); }
+  .appeals-table tr:hover { background:var(--kt-ai-bg-soft); }
+  .status-pill { display:inline-block; padding:var(--kt-ai-space-1) var(--kt-ai-space-2); border-radius:var(--kt-ai-radius-full); font-size:var(--kt-ai-text-xs); font-weight:var(--kt-ai-weight-medium); }
+  .status-new { background:var(--kt-ai-bg-soft); color:var(--kt-ai-primary); }
+  .status-duplicate { background:var(--kt-ai-bg-soft); color:var(--kt-ai-fg-muted); }
+  .status-resolved { background:var(--kt-ai-bg-soft); color:var(--kt-ai-fg); }
+  .drawer-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:100; display:none; }
+  .drawer-overlay.open { display:block; }
+  .drawer { position:fixed; right:0; top:0; bottom:0; width:480px; background:var(--kt-ai-bg); box-shadow:-4px 0 24px rgba(0,0,0,0.15); z-index:101; transform:translateX(100%); transition:transform 0.3s; display:flex; flex-direction:column; }
+  .drawer.open { transform:translateX(0); }
+  .drawer-header { display:flex; align-items:center; justify-content:space-between; padding:var(--kt-ai-space-4) var(--kt-ai-space-6); border-bottom:1px solid var(--kt-ai-border); }
+  .drawer-title { font-size:var(--kt-ai-text-lg); font-weight:var(--kt-ai-weight-semibold); margin:0; }
+  .drawer-content { flex:1; overflow:auto; padding:var(--kt-ai-space-6); }
+  .drawer-actions { padding:var(--kt-ai-space-4) var(--kt-ai-space-6); border-top:1px solid var(--kt-ai-border); display:flex; gap:var(--kt-ai-space-3); justify-content:flex-end; }
+  .field { margin-bottom:var(--kt-ai-space-4); }
+  .field label { display:block; font-size:var(--kt-ai-text-sm); font-weight:var(--kt-ai-weight-medium); color:var(--kt-ai-fg); margin-bottom:var(--kt-ai-space-2); }
+  .toast-container { position:fixed; bottom:var(--kt-ai-space-6); right:var(--kt-ai-space-6); display:flex; flex-direction:column; gap:var(--kt-ai-space-3); z-index:200; }
+  .toast { background:var(--kt-ai-fg); color:var(--kt-ai-bg); padding:var(--kt-ai-space-3) var(--kt-ai-space-4); border-radius:var(--kt-ai-radius-lg); font-size:var(--kt-ai-text-sm); min-width:280px; }
+  .search-input { width:100%; padding:var(--kt-ai-space-2) var(--kt-ai-space-3); border:1px solid var(--kt-ai-border); border-radius:var(--kt-ai-radius-md); background:var(--kt-ai-bg); color:var(--kt-ai-fg); font-size:var(--kt-ai-text-sm); }
+  .search-input:focus { outline:none; border-color:var(--kt-ai-primary); }
+  .empty-state { text-align:center; padding:var(--kt-ai-space-12); color:var(--kt-ai-fg-muted); }
+  .icon-btn { background:none; border:none; cursor:pointer; padding:var(--kt-ai-space-1); color:var(--kt-ai-fg-muted); }
+  .icon-btn:hover { color:var(--kt-ai-fg); }
+</style>
+</head>
+<body>
+
+<div class="app-shell">
+  <aside class="sidebar">
+    <div class="kt-ai-brand" style="margin-bottom:var(--kt-ai-space-6)">
+      <img src="design-system/brand/kt-ai-logo.png" alt="KT AI" height="20">
+      <span>Повторные обращения</span>
+    </div>
+    <nav>
+      <div class="kt-ai-nav-group">
+        <a class="kt-ai-nav-item is-active" href="#" data-filter="all">Все обращения</a>
+        <a class="kt-ai-nav-item" href="#" data-filter="new">Новые</a>
+        <a class="kt-ai-nav-item" href="#" data-filter="duplicate">Повторные</a>
+        <a class="kt-ai-nav-item" href="#" data-filter="resolved">Решённые</a>
+      </div>
+    </nav>
+    <div style="margin-top:auto">
+      <button class="kt-ai-btn" data-variant="primary" style="width:100%" id="newAppealBtn">
+        <svg class="kt-icon kt-icon-sm" aria-hidden="true"><use href="#plus"></use></svg>
+        Новое обращение
+      </button>
+    </div>
+  </aside>
+
+  <main class="main-content">
+    <header class="topbar">
+      <h1 class="topbar-title">Реестр обращений</h1>
+      <div style="flex:1; max-width:500px">
+        <input class="search-input" type="search" placeholder="Поиск по тексту, автору, дате…" id="searchInput">
+      </div>
+      <button class="kt-ai-btn" data-variant="ghost" id="themeToggle">
+        <svg class="kt-icon" aria-hidden="true"><use href="#sun"></use></svg>
+      </button>
+    </header>
+
+    <div class="kpi-strip">
+      <div class="kpi">
+        <div class="kpi-value" id="kpiTotal">0</div>
+        <div class="kpi-label">Всего обращений</div>
+      </div>
+      <div class="kpi">
+        <div class="kpi-value" id="kpiNew">0</div>
+        <div class="kpi-label">Новых</div>
+      </div>
+      <div class="kpi">
+        <div class="kpi-value" id="kpiDuplicate">0</div>
+        <div class="kpi-label">Повторных</div>
+      </div>
+      <div class="kpi">
+        <div class="kpi-value" id="kpiResolved">0</div>
+        <div class="kpi-label">Решённых</div>
+      </div>
+    </div>
+
+    <div class="toolbar">
+      <div class="kt-ai-segmented">
+        <button class="kt-ai-segmented-item is-active" data-sort="date">По дате</button>
+        <button class="kt-ai-segmented-item" data-sort="author">По автору</button>
+      </div>
+      <select class="kt-ai-select" id="statusFilter">
+        <option value="">Все статусы</option>
+        <option value="new">Новое</option>
+        <option value="duplicate">Повторное</option>
+        <option value="resolved">Решено</option>
+      </select>
+    </div>
+
+    <div class="table-wrap">
+      <table class="appeals-table">
+        <thead>
+          <tr>
+            <th>Дата</th>
+            <th>Автор</th>
+            <th>Текст обращения</th>
+            <th>Статус</th>
+            <th>Действия</th>
+          </tr>
+        </thead>
+        <tbody id="appealsTable"></tbody>
+      </table>
+      <div class="empty-state" id="emptyState" hidden>
+        <svg class="kt-icon kt-icon-lg" aria-hidden="true" style="margin-bottom:var(--kt-ai-space-4)"><use href="#inbox"></use></svg>
+        <p>Обращений пока нет</p>
+        <button class="kt-ai-btn" data-variant="primary" id="emptyNewBtn" style="margin-top:var(--kt-ai-space-4)">Добавить первое обращение</button>
+      </div>
+    </div>
+  </main>
+</div>
+
+<div class="drawer-overlay" id="drawerOverlay"></div>
+<aside class="drawer" id="appealDrawer">
+  <header class="drawer-header">
+    <h2 class="drawer-title" id="drawerTitle">Новое обращение</h2>
+    <button class="kt-ai-btn" data-variant="ghost" id="closeDrawer">
+      <svg class="kt-icon" aria-hidden="true"><use href="#x"></use></svg>
+    </button>
+  </header>
+  <div class="drawer-content">
+    <form id="appealForm">
+      <input type="hidden" id="appealId">
+      <div class="field">
+        <label>Автор обращения</label>
+        <input class="kt-ai-input" id="authorInput" required placeholder="ФИО или название организации">
+      </div>
+      <div class="field">
+        <label>Контакты</label>
+        <input class="kt-ai-input" id="contactInput" placeholder="Телефон, email">
+      </div>
+      <div class="field">
+        <label>Текст обращения</label>
+        <textarea class="kt-ai-textarea" id="textInput" required rows="5" placeholder="Опишите суть обращения"></textarea>
+      </div>
+      <div class="field">
+        <label>Категория</label>
+        <select class="kt-ai-select" id="categoryInput">
+          <option value="">Не выбрано</option>
+          <option value="technical">Технический вопрос</option>
+          <option value="billing">Биллинг и оплата</option>
+          <option value="service">Качество услуги</option>
+          <option value="other">Другое</option>
+        </select>
+      </div>
+      <div class="field">
+        <label>Комментарий</label>
+        <textarea class="kt-ai-textarea" id="commentInput" rows="3" placeholder="Внутренний комментарий"></textarea>
+      </div>
+    </form>
+  </div>
+  <div class="drawer-actions">
+    <button class="kt-ai-btn" data-variant="ghost" id="cancelBtn">Отмена</button>
+    <button class="kt-ai-btn" data-variant="primary" id="saveBtn">Сохранить</button>
+  </div>
+</aside>
+
+<div class="toast-container" id="toastContainer"></div>
+
+<script src="design-system/icons/kt-ai-icons.js"></script>
+<script src="script.js"></script>
+</body>
+</html>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..8677615
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,10 @@
+{
+  "name": "appeals-app",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "appeals-app"
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..94d5088
--- /dev/null
+++ b/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "appeals-app",
+  "private": true,
+  "type": "commonjs",
+  "scripts": {
+    "start": "node server.js"
+  }
+}
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..ef53884
--- /dev/null
+++ b/script.js
@@ -0,0 +1,253 @@
+let appeals = [];
+let currentFilter = 'all';
+let currentSort = 'date';
+let editingId = null;
+
+const searchInput = document.getElementById('searchInput');
+const appealsTable = document.getElementById('appealsTable');
+const emptyState = document.getElementById('emptyState');
+const drawer = document.getElementById('appealDrawer');
+const drawerOverlay = document.getElementById('drawerOverlay');
+const drawerTitle = document.getElementById('drawerTitle');
+const appealForm = document.getElementById('appealForm');
+const themeToggle = document.getElementById('themeToggle');
+const toastContainer = document.getElementById('toastContainer');
+
+const kpiTotal = document.getElementById('kpiTotal');
+const kpiNew = document.getElementById('kpiNew');
+const kpiDuplicate = document.getElementById('kpiDuplicate');
+const kpiResolved = document.getElementById('kpiResolved');
+
+document.addEventListener('DOMContentLoaded', () => {
+  loadAppeals();
+  setupEventListeners();
+});
+
+function setupEventListeners() {
+  document.getElementById('newAppealBtn').addEventListener('click', openNewDrawer);
+  document.getElementById('emptyNewBtn').addEventListener('click', openNewDrawer);
+  document.getElementById('closeDrawer').addEventListener('click', closeDrawer);
+  document.getElementById('cancelBtn').addEventListener('click', closeDrawer);
+  document.getElementById('saveBtn').addEventListener('click', saveAppeal);
+  document.getElementById('drawerOverlay').addEventListener('click', closeDrawer);
+  
+  themeToggle.addEventListener('click', toggleTheme);
+  searchInput.addEventListener('input', renderAppeals);
+  document.getElementById('statusFilter').addEventListener('change', renderAppeals);
+  
+  document.querySelectorAll('[data-filter]').forEach(link => {
+    link.addEventListener('click', (e) => {
+      e.preventDefault();
+      document.querySelectorAll('[data-filter]').forEach(l => l.classList.remove('is-active'));
+      link.classList.add('is-active');
+      currentFilter = link.dataset.filter;
+      renderAppeals();
+    });
+  });
+  
+  document.querySelectorAll('[data-sort]').forEach(btn => {
+    btn.addEventListener('click', () => {
+      document.querySelectorAll('[data-sort]').forEach(b => b.classList.remove('is-active'));
+      btn.classList.add('is-active');
+      currentSort = btn.dataset.sort;
+      renderAppeals();
+    });
+  });
+}
+
+async function loadAppeals() {
+  try {
+    const res = await fetch('api/appeals');
+    appeals = await res.json();
+    renderAppeals();
+  } catch (err) {
+    console.error('Ошибка загрузки:', err);
+    showToast('Не удалось загрузить обращения');
+  }
+}
+
+function renderAppeals() {
+  const searchTerm = searchInput.value.toLowerCase();
+  const statusFilter = document.getElementById('statusFilter').value;
+  
+  let filtered = appeals.filter(appeal => {
+    const matchesSearch = 
+      appeal.author.toLowerCase().includes(searchTerm) ||
+      appeal.text.toLowerCase().includes(searchTerm) ||
+      appeal.contact.toLowerCase().includes(searchTerm) ||
+      appeal.createdAt.includes(searchTerm);
+    
+    const matchesFilter = currentFilter === 'all' || 
+      (currentFilter === 'new' && appeal.status === 'new') ||
+      (currentFilter === 'duplicate' && appeal.status === 'duplicate') ||
+      (currentFilter === 'resolved' && appeal.status === 'resolved');
+    
+    const matchesStatus = !statusFilter || appeal.status === statusFilter;
+    
+    return matchesSearch && matchesFilter && matchesStatus;
+  });
+  
+  if (currentSort === 'date') {
+    filtered.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
+  } else if (currentSort === 'author') {
+    filtered.sort((a, b) => a.author.localeCompare(b.author));
+  }
+  
+  if (filtered.length === 0) {
+    appealsTable.innerHTML = '';
+    emptyState.hidden = false;
+  } else {
+    emptyState.hidden = true;
+    appealsTable.innerHTML = filtered.map(appeal => `
+      <tr>
+        <td>${formatDate(appeal.createdAt)}</td>
+        <td>${escapeHtml(appeal.author)}</td>
+        <td class="appeal-text">${escapeHtml(appeal.text)}</td>
+        <td><span class="status-pill status-${appeal.status}">${getStatusText(appeal.status)}</span></td>
+        <td>
+          <button class="icon-btn" onclick="editAppeal(${appeal.id})" title="Редактировать">
+            <svg class="kt-icon" aria-hidden="true"><use href="#pencil"></use></svg>
+          </button>
+        </td>
+      </tr>
+    `).join('');
+  }
+  
+  updateKPI();
+}
+
+function updateKPI() {
+  kpiTotal.textContent = appeals.length;
+  kpiNew.textContent = appeals.filter(a => a.status === 'new').length;
+  kpiDuplicate.textContent = appeals.filter(a => a.status === 'duplicate').length;
+  kpiResolved.textContent = appeals.filter(a => a.status === 'resolved').length;
+}
+
+function openNewDrawer() {
+  editingId = null;
+  drawerTitle.textContent = 'Новое обращение';
+  appealForm.reset();
+  document.getElementById('appealId').value = '';
+  openDrawer();
+}
+
+function openDrawer() {
+  drawer.classList.add('open');
+  drawerOverlay.classList.add('open');
+  document.body.style.overflow = 'hidden';
+}
+
+function closeDrawer() {
+  drawer.classList.remove('open');
+  drawerOverlay.classList.remove('open');
+  document.body.style.overflow = '';
+}
+
+async function saveAppeal() {
+  const author = document.getElementById('authorInput').value.trim();
+  const contact = document.getElementById('contactInput').value.trim();
+  const text = document.getElementById('textInput').value.trim();
+  const category = document.getElementById('categoryInput').value;
+  const comment = document.getElementById('commentInput').value.trim();
+  
+  if (!author || !text) {
+    showToast('Заполните обязательные поля');
+    return;
+  }
+  
+  try {
+    if (editingId) {
+      const res = await fetch(`api/appeals/${editingId}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ author, contact, text, category, comment })
+      });
+      
+      if (res.ok) {
+        showToast('Обращение обновлено');
+        await loadAppeals();
+      }
+    } else {
+      const res = await fetch('api/appeals', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ author, contact, text, category, comment, status: 'new' })
+      });
+      
+      if (res.ok) {
+        showToast('Обращение добавлено');
+        await loadAppeals();
+      }
+    }
+    
+    closeDrawer();
+  } catch (err) {
+    console.error('Ошибка сохранения:', err);
+    showToast('Не удалось сохранить обращение');
+  }
+}
+
+function editAppeal(id) {
+  const appeal = appeals.find(a => a.id === id);
+  if (!appeal) return;
+  
+  editingId = id;
+  drawerTitle.textContent = 'Редактирование обращения';
+  document.getElementById('appealId').value = appeal.id;
+  document.getElementById('authorInput').value = appeal.author;
+  document.getElementById('contactInput').value = appeal.contact;
+  document.getElementById('textInput').value = appeal.text;
+  document.getElementById('categoryInput').value = appeal.category || '';
+  document.getElementById('commentInput').value = appeal.comment || '';
+  
+  openDrawer();
+}
+
+function toggleTheme() {
+  const html = document.documentElement;
+  const current = html.getAttribute('data-theme');
+  const next = current === 'dark' ? 'light' : current === 'light' ? 'auto' : 'dark';
+  html.setAttribute('data-theme', next);
+  
+  const icon = themeToggle.querySelector('use');
+  icon.setAttribute('href', next === 'dark' ? '#moon' : '#sun');
+}
+
+function showToast(message) {
+  const toast = document.createElement('div');
+  toast.className = 'toast';
+  toast.textContent = message;
+  toastContainer.appendChild(toast);
+  
+  setTimeout(() => {
+    toast.remove();
+  }, 3000);
+}
+
+function formatDate(isoString) {
+  const date = new Date(isoString);
+  return date.toLocaleDateString('ru-RU', {
+    day: '2-digit',
+    month: '2-digit',
+    year: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit'
+  });
+}
+
+function getStatusText(status) {
+  const texts = {
+    new: 'Новое',
+    duplicate: 'Повторное',
+    resolved: 'Решено'
+  };
+  return texts[status] || status;
+}
+
+function escapeHtml(text) {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+window.editAppeal = editAppeal;
diff --git a/server.js b/server.js
new file mode 100644
index 0000000..4eb50fa
--- /dev/null
+++ b/server.js
@@ -0,0 +1,86 @@
+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) => {
+  res.setHeader("Access-Control-Allow-Origin", "*");
+  res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
+  res.setHeader("Access-Control-Allow-Headers", "Content-Type");
+  
+  if (req.method === "OPTIONS") {
+    res.writeHead(200);
+    return res.end();
+  }
+  
+  const url = req.url.split("?")[0];
+  
+  if (req.method === "GET" && url === "/api/appeals") {
+    res.writeHead(200, { "Content-Type": "application/json" });
+    return res.end(JSON.stringify(readItems()));
+  }
+  
+  if (req.method === "POST" && url === "/api/appeals") {
+    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 }));
+  }
+  
+  if (req.method === "PUT" && url.startsWith("/api/appeals/")) {
+    const id = parseInt(url.split("/").pop());
+    const updates = await body(req);
+    const items = readItems();
+    const index = items.findIndex(a => a.id === id);
+    if (index !== -1) {
+      items[index] = { ...items[index], ...updates };
+      writeItems(items);
+      res.writeHead(200, { "Content-Type": "application/json" });
+      return res.end(JSON.stringify({ ok: true }));
+    }
+    res.writeHead(404, { "Content-Type": "application/json" });
+    return res.end(JSON.stringify({ error: "Not found" }));
+  }
+  
+  if (req.method === "DELETE" && url.startsWith("/api/appeals/")) {
+    const id = parseInt(url.split("/").pop());
+    const items = readItems();
+    const filtered = items.filter(a => a.id !== id);
+    if (filtered.length < items.length) {
+      writeItems(filtered);
+      res.writeHead(200, { "Content-Type": "application/json" });
+      return res.end(JSON.stringify({ ok: true }));
+    }
+    res.writeHead(404, { "Content-Type": "application/json" });
+    return res.end(JSON.stringify({ error: "Not found" }));
+  }
+  
+  let file = url === "/" ? "/index.html" : url;
+  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));