/* Библиотека компонентов Брэд Крумбс (Админка → Дизайн → Компоненты). Подключается на всех страницах после ui.css.
   Правило: любой элемент интерфейса — один из компонентов отсюда. Нет подходящего — добавить сюда и в образцы вкладки (admin/design.php, rPrev), а не рисовать на месте.
   Текст — только стилями t-* в разметке; цвет — только пары наборов (--c-<набор>-bg/tx/ic/ln); скругления — --r / --r-lg. Размеры шрифта и цвета числами запрещены.
   Состав: k-btn Кнопка · k-chip Чип · k-seg Сегмент · k-inp Поле · k-row Строка списка · k-opts/k-opt Выпадающий список · k-pick Выбор · k-range Ползунок · k-check Флажок · k-player Плеер · k-av Аватар · k-pop Всплывающая панель · k-ico Иконка · k-status Статус · k-tip Подсказка · k-stats/k-stat Показатели · k-table Таблица с числами · k-selbar/k-pickable Выделение · k-note Запись · k-kv Ключ—значение · k-flow Шаги · k-toc Содержание · k-bar Прогресс · k-ph Заглушка · k-panel Плашка · k-spark Столбики */


/* ═══ ОТСТУПЫ — часть дизайн-системы ═══
   Шкала на сетке 4 px (всё кратно 4, крупное — кратно 8). Числа в компонентах и на страницах не пишем — только роли ниже.
   1. Близость: что связано по смыслу — ближе; отступ ВНУТРИ группы всегда заметно меньше (в 1,5–2 раза), чем МЕЖДУ группами.
   2. Заголовок принадлежит тому, что под ним: от заголовка до его содержимого — меньше, чем от предыдущего блока до заголовка.
   3. Действие (кнопка «Сохранить», «Удалить персонажа») отделено от содержимого отступом группы — чтобы не читалось как часть последней карточки.
   4. Один ритм на странице: одинаковые по смыслу места — одинаковые отступы.
   5. Телефон: разделы и поля страницы на ступень меньше; зона касания — не меньше 44 px, даже если значок 16 px.
   Роли:
   --sp-hair    2  — тонкая доводка (значок к тексту на базовой линии)
   --sp-tight   4  — строка к своей вторичной строке: имя ↔ «голос · звук», заголовок ↔ подзаголовок, поле ↔ подсказка
   --sp-inline  8  — внутри элемента: значок ↔ текст, кнопки в одной строке, подпись поля ↔ поле
   --sp-related 12 — элементы одной группы: поля формы, строки списка, карточки в сетке на телефоне
   --sp-item    16 — карточки в сетке, внутренние поля карточки и панели, заголовок блока ↔ его содержимое
   --sp-group   24 — между группами в разделе; содержимое ↔ действие; заголовок раздела ↔ содержимое
   --sp-section 48 — между разделами страницы (телефон — 32)
   --sp-page    32 — поля страницы по бокам (планшет 24, телефон 16)
   --sp-touch   44 — минимальный размер зоны касания
   Состояния и мелкие размеры (v278):
   --k-off      .45 — прозрачность недоступного: кнопка [disabled], запись, которую нельзя выбрать
   --k-check    16  — сторона квадрата флажка k-check; от неё — отступ под флажок в режиме выделения */
:root{--k-off:.45;--k-check:16px;--sp-hair:2px;--sp-tight:4px;--sp-inline:8px;--sp-related:12px;--sp-item:16px;--sp-group:24px;--sp-section:48px;--sp-page:32px;--sp-touch:44px}
@media(max-width:900px){:root{--sp-page:24px}}
@media(max-width:480px){:root{--sp-section:32px;--sp-page:16px}}
/* раскладка по ролям — для страниц и составных компонентов */
.k-stack{display:flex;flex-direction:column;gap:var(--sp-related)}
.k-stack.tight{gap:var(--sp-tight)}.k-stack.item{gap:var(--sp-item)}.k-stack.group{gap:var(--sp-group)}.k-stack.section{gap:var(--sp-section)}
.k-block{display:flex;flex-direction:column;gap:var(--sp-item)}            /* заголовок блока + содержимое */
.k-block>.k-actions{margin-top:calc(var(--sp-group) - var(--sp-item))}    /* действие отделено от содержимого */
.k-actions{display:flex;flex-wrap:wrap;gap:var(--sp-inline);align-items:center}

/* ——— Кнопка: k-btn (обычная) · k-btn.primary (основная) · k-btn.text (текстовая) · k-btn.icon (только значок). Текст — t-button / t-btn-text в разметке ——— */
.k-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;padding:.55rem .95rem;border-radius:var(--r);border:1px solid var(--c-card-ln);background:var(--c-card-bg);color:var(--c-card-tx);cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.k-btn:hover{border-color:var(--c-card-tx)}
.k-btn.primary{background:var(--c-accent-bg);color:var(--c-accent-tx);border-color:var(--c-accent-bg)}
.k-btn.primary:hover{opacity:.9}
.k-btn.text{border-color:transparent;background:none;color:var(--c-tag-1-tx);padding:.35rem .5rem}
.k-btn.text:hover{background:var(--c-tag-1-bg)}
.k-btn.icon{padding:0;width:32px;height:32px;border-color:transparent;background:none;color:var(--c-card-secondary-ic)}
.k-btn.icon:hover{background:var(--c-page-bg);color:var(--c-card-tx)}
.k-btn.sm{padding:.35rem .6rem}.k-btn.icon.sm{width:24px;height:24px}
.k-btn[disabled]{opacity:var(--k-off);cursor:default;pointer-events:none}
.k-btn .sub{opacity:.7}   /* вторичная часть подписи: «· 29 ◈» */

/* ——— Чип: k-chip (нейтральный) · .c1…c4 (цветные, пары tag-1…4) · .dash (пунктир — пауза) · .av (с аватаром) · .x (удаляемый). Текст — t-caption / t-label ——— */
.k-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;background:var(--c-page-bg);color:var(--c-card-tx);white-space:nowrap;vertical-align:baseline;user-select:none}
.k-chip.sq{border-radius:var(--r)}
.k-chip.c1{background:var(--c-tag-1-bg);color:var(--c-tag-1-tx)}.k-chip.c2{background:var(--c-tag-2-bg);color:var(--c-tag-2-tx)}
.k-chip.c3{background:var(--c-tag-3-bg);color:var(--c-tag-3-tx)}.k-chip.c4{background:var(--c-tag-4-bg);color:var(--c-tag-4-tx)}
.k-chip.dash{background:none;border:1px dashed var(--c-card-ln);color:var(--c-card-secondary-tx)}
.k-chip.av{padding-left:3px}.k-chip .k-av{width:18px;height:18px}
.k-chip.on{background:var(--c-accent-bg);color:var(--c-accent-tx)}
button.k-chip{border:0;cursor:pointer}button.k-chip:hover{filter:brightness(.96)}
.k-chip .x{width:14px;height:14px;margin-right:-4px;opacity:.6;cursor:pointer}.k-chip .x:hover{opacity:1}

/* ——— Сегмент: k-seg — несколько кнопок, одна включена. .sm — круглые цифры (дубли). Текст — t-label ——— */
.k-seg{display:inline-flex;padding:2px;gap:2px;border-radius:var(--r);background:var(--c-page-bg)}
.k-seg>button{border:0;background:none;padding:4px 10px;border-radius:var(--r);cursor:pointer;color:var(--c-card-secondary-tx);white-space:nowrap}
.k-seg>button:hover{color:var(--c-card-tx)}
.k-seg>button.on{background:var(--c-accent-bg);color:var(--c-accent-tx)}
.k-seg.sm{background:none;padding:0}.k-seg.sm>button{width:22px;height:22px;padding:0;border-radius:50%;border:1px solid var(--c-card-ln);background:var(--c-card-bg)}
.k-seg.sm>button.on{background:var(--c-accent-bg);border-color:var(--c-accent-bg);color:var(--c-accent-tx)}

/* ——— Поле ввода: k-inp (input, textarea). Текст — t-body. .bad — ошибка ——— */
.k-inp{font:inherit;width:100%;min-width:0;padding:7px 10px;border:1px solid var(--c-card-ln);border-radius:var(--r);background:var(--c-card-bg);color:var(--c-card-tx);outline:none}
.k-inp::placeholder{color:var(--c-card-secondary-tx)}
.k-inp:focus{border-color:var(--c-card-tx)}
/* k-find — поле поиска по странице (v315): лупа слева, × справа появляется, когда есть текст; результат — скрытие несовпавших блоков самой страницей */
.k-find{position:relative;display:flex;align-items:center}.k-find .k-inp{padding-left:2.25rem;padding-right:2.25rem}
.k-find>.k-ico{position:absolute;left:.7rem;width:1.1rem;height:1.1rem;color:var(--c-card-secondary-ic);pointer-events:none}
.k-find .x{position:absolute;right:.4rem;width:1.5rem;height:1.5rem;border:0;border-radius:50%;background:none;color:var(--c-card-secondary-tx);font:inherit;font-size:1rem;line-height:1;cursor:pointer;display:none;place-items:center}.k-find.has .x{display:grid}
@media(hover:hover){html:not(.k-touch) .k-find .x:hover{background:var(--c-page-bg);color:var(--c-card-tx)}}
.k-find-hit{background:var(--c-tag-2-bg);color:var(--c-tag-2-tx);border-radius:2px;padding:0 1px}
.k-inp.bad{border-color:var(--c-error-ic)}
.k-inp.quiet{border-color:transparent;background:none}.k-inp.quiet:hover,.k-inp.quiet:focus{border-color:var(--c-card-ln);background:var(--c-card-bg)}   /* имя в карточке: выглядит текстом, правится на месте */
.k-field{display:flex;flex-direction:column;gap:4px}   /* подпись (t-label) + поле + комментарий (t-hint) */

/* ——— Строка списка: k-row — [аватар/иконка] · текст (t-label) + вторичный (t-caption) · действия справа. .on — выбрана ——— */
.k-row{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:var(--r);cursor:pointer}
@media(hover:hover){html:not(.k-touch) .k-row:not(.on):hover{background:var(--c-tag-2-bg)}}   /* наведение — лайм, как k-menu и k-opt */
.k-row.on{background:var(--c-accent-bg);color:var(--c-accent-tx)}
.k-row.on .t-caption,.k-row.on .t-label{color:inherit}
.k-row .main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.k-row .main>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k-row .act{display:inline-flex;gap:2px;flex:none}
.k-list{display:flex;flex-direction:column;gap:2px}

/* ——— Выпадающий список: k-opts — строки k-opt (название .n слева, цена/подпись .p справа). Наведение — лайм (как k-menu), .on — выбранная: тёмная с галочкой. Открылся — прокрутить к .on (scrollIntoView, block: nearest) ——— */
.k-opts{display:flex;flex-direction:column;gap:2px;padding:var(--sp-tight);background:var(--c-card-bg);border-radius:var(--r-lg);overflow-y:auto}
.k-opt{display:flex;align-items:center;gap:var(--sp-inline);width:100%;padding:var(--sp-inline) var(--sp-related);border:0;border-radius:var(--r);background:none;color:var(--c-card-tx);cursor:pointer;text-align:left;white-space:nowrap}
.k-opt::before{content:"";width:14px;flex:none;text-align:center}.k-opt.on::before{content:"✓"}
.k-opt .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.k-opt .p{color:var(--c-card-secondary-tx)}
@media(hover:hover){html:not(.k-touch) .k-opt:hover{background:var(--c-tag-2-bg)}}
html:not(.k-z) .k-opt.on{background:var(--c-accent-bg);color:var(--c-accent-tx)}   /* html:not(.k-z) — чтобы выбранная оставалась тёмной и под курсором */
.k-opt.on .p{color:inherit;opacity:.75}

/* ——— Выбор: k-pick — кнопка «Подпись: значение ▾», список — k-pop со строками k-row ——— */
.k-pick{position:relative;display:inline-flex}
.k-pick>button{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid var(--c-card-ln);border-radius:var(--r);background:var(--c-card-bg);color:var(--c-card-tx);cursor:pointer;white-space:nowrap}
.k-pick>button:hover{border-color:var(--c-card-tx)}
.k-pick>button .v{color:var(--c-card-secondary-tx)}
.k-pick .car{width:14px;height:14px;color:var(--c-card-secondary-ic);flex:none}

/* ——— Ползунок: k-range — подпись слева/справа (t-caption), значение (t-chip). Дорожка серая, бегунок — accent ——— */
.k-range{display:grid;grid-template-columns:auto 1fr auto 2.4rem;gap:8px;align-items:center}
.k-range input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:16px;background:none;margin:0;cursor:pointer}
.k-range input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:var(--c-card-ln)}
.k-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;background:var(--c-accent-bg);border:2px solid var(--c-card-bg)}
.k-range input[type=range]::-moz-range-track{height:4px;border-radius:999px;background:var(--c-card-ln)}
.k-range input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--c-accent-bg);border:2px solid var(--c-card-bg)}
.k-range .val{text-align:center}

/* ——— Флажок: k-check — label с input[type=checkbox] и текстом (t-caption / t-hint) ——— */
.k-check{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start;cursor:pointer}
.k-check input{appearance:none;-webkit-appearance:none;width:var(--k-check);height:var(--k-check);margin:2px 0 0;border:1px solid var(--c-card-ln);border-radius:4px;background:var(--c-card-bg);cursor:pointer;display:grid;place-items:center}
.k-check input:checked{background:var(--c-accent-bg);border-color:var(--c-accent-bg)}
.k-check input:checked::after{content:"";width:9px;height:5px;border:2px solid var(--c-accent-tx);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.k-check.bad input{border-color:var(--c-error-ic)}.k-check.bad .t-hint{color:var(--c-error-tx)}

/* ——— Плеер: k-player — ▶/⏸ · дорожка · время (t-caption). Скрипт assets/kit.js оживляет: data-src ——— */
.k-player{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--r);background:var(--c-page-bg);cursor:pointer;user-select:none;transition:box-shadow var(--k-fast) var(--k-ease)}
.k-player:hover{background-image:var(--g-select)}   /* ореол — только у полей ввода; плеер при наведении — градиент «выбор» */
.k-player .lb{flex:none;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k-player .pp{width:24px;height:24px;flex:none;border:0;border-radius:50%;background:var(--c-accent-bg);color:var(--c-accent-ic);display:grid;place-items:center;cursor:pointer}
.k-player .pp svg{width:12px;height:12px;fill:currentColor}
.k-player .pp.soft{background:var(--c-tag-1-bg);color:var(--c-tag-1-ic)}
.k-player .k-trk{flex:1;height:4px;border-radius:999px;background:var(--c-card-ln);position:relative;cursor:pointer}
.k-player .k-trk i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--c-accent-bg);width:0}
.k-player .tm{font-variant-numeric:tabular-nums;flex:none}
.k-player.sm{gap:8px}.k-player.sm .pp{width:20px;height:20px}.k-player.sm .pp svg{width:9px;height:9px}

/* ——— Аватар: k-av — круг с картинкой или инициалами (t-caption). .md 36px · .lg 44px · .xl 64px ——— */
.k-av{width:24px;height:24px;border-radius:50%;flex:none;overflow:hidden;display:inline-grid;place-items:center;background:var(--c-tag-1-bg);color:var(--c-tag-1-tx);vertical-align:middle;object-fit:cover;user-select:none}
img.k-av{object-fit:cover}
.k-av.md{width:36px;height:36px}.k-av.lg{width:44px;height:44px}.k-av.xl{width:64px;height:64px}
.k-av.pick{cursor:pointer;color:var(--c-card-secondary-ic);background:var(--c-page-bg)}.k-av.pick:hover{background:var(--c-tag-1-bg);color:var(--c-tag-1-ic)}

/* ——— Всплывающая панель: k-pop — поверх, без линий и без теней (теней в системе нет): от фона отделяется цветом набора. .up — раскрывается вверх (от нижней панели) ——— */
.k-pop{position:absolute;z-index:30;left:0;top:calc(100% + 6px);min-width:16rem;max-width:min(26rem,calc(100vw - 2rem));max-height:70vh;overflow-y:auto;padding:10px;border-radius:var(--r-lg);background:var(--c-page-bg);display:flex;flex-direction:column;gap:8px}
.k-pop.up{top:auto;bottom:calc(100% + 6px)}
.k-pop .hd{display:flex;align-items:center;gap:10px}
.k-pop .sec{color:var(--c-card-secondary-tx);margin-top:4px}   /* подзаголовок внутри панели: t-label в разметке */

/* ——— Иконка: k-ico — SVG 16px, цвет наследует, обводка 1.7. .sm 12 · .lg 20 ——— */
.k-ico{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.k-ico.fill{fill:currentColor;stroke:none}
.k-ico.sm{width:12px;height:12px}.k-ico.lg{width:20px;height:20px}

/* ——— Статус: k-status — строка хода дела (t-caption). .run — идёт (перелив), .ok — готово, .err — ошибка ——— */
.k-status{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:var(--r);background:var(--c-page-bg);color:var(--c-card-secondary-tx)}
.k-status.run{background:var(--c-g-shimmer-bg);background-size:200% 100%;animation:k-shim 2.2s linear infinite;color:var(--c-card-tx)}
.k-status.ok{background:var(--c-tag-2-bg);color:var(--c-tag-2-tx)}
.k-status.err{background:var(--c-error-bg);color:var(--c-error-tx)}
@keyframes k-shim{to{background-position:-200% 0}}

/* ——— Справка: k-tip — значок «i» у заголовка; открывается ПО КЛИКУ белой карточкой с ореолом (без тени): заголовок, текст и крупная картинка/анимация «как работает».
   Разметка: <span class="k-tip t-caption" data-tip="текст" data-tip-title="заголовок" data-tip-media="#id-шаблона | url картинки">i</span>. Закрыть — клик мимо, Esc, повторный клик. kit.js ——— */
.k-tip{position:relative;display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--c-page-bg);color:var(--c-card-secondary-tx);cursor:pointer;vertical-align:-3px;margin-left:4px;user-select:none;transition:background var(--k-fast),color var(--k-fast)}
.k-tip:hover,.k-tip.on{background:var(--c-tag-2-bg);color:var(--c-tag-2-tx)}
.k-tip.link{text-decoration:none}   /* v283: «i» как ссылка на инструкцию в «Разработке» (dev_i) — тот же значок, открывает раздел */
.k-help{position:fixed;z-index:320;width:min(360px,calc(100vw - 24px));box-sizing:border-box;padding:14px;border-radius:var(--r-lg);background:var(--c-card-bg);border:1px solid var(--c-card-ln);display:flex;flex-direction:column;gap:8px;animation:k-pop-in var(--k-base) var(--k-ease) both}
.k-help.out{animation:k-pop-out var(--k-fast) var(--k-ease-in) both}
.k-help .md{width:100%;aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;background:var(--c-page-bg);display:grid;place-items:center}
.k-help .md>img,.k-help .md>svg,.k-help .md>video{width:100%;height:100%;object-fit:cover;display:block}
.k-help .x{position:absolute;top:8px;right:8px}

/* ═══ v208: движение и утверждённые компоненты (уведомление, окно подтверждения, фирменное поле, кнопка) ═══
   Движение — токены: длительность и кривая. Появление — быстрее, чем исчезновение не бывает: появление base, уход fast.
   При «уменьшить движение» в системе — анимации выключены (последний блок). */
:root{--k-fast:140ms;--k-base:220ms;--k-slow:360ms;--k-ease:cubic-bezier(.2,.7,.2,1);--k-ease-in:cubic-bezier(.4,0,1,1)}
@keyframes k-fade-in{from{opacity:0}to{opacity:1}}
@keyframes k-fade-out{from{opacity:1}to{opacity:0}}
@keyframes k-drop-in{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}       /* уведомление сверху */
@keyframes k-drop-out{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-50%,-10px)}}
@keyframes k-pop-in{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}              /* окно */
@keyframes k-pop-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(6px) scale(.98)}}
@keyframes k-sheet-in{from{transform:translateY(100%)}to{transform:none}}                                          /* шторка на телефоне */
@keyframes k-sheet-out{from{transform:translateY(var(--k-drag,0px))}to{transform:translateY(100%)}}
@keyframes k-timer{from{transform:scaleX(1)}to{transform:scaleX(0)}}                                                /* полоска времени «Вернуть» */
@keyframes k-shake{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}            /* ошибка в поле */
.k-anim-collapse{overflow:hidden;transition:height var(--k-base) var(--k-ease),opacity var(--k-fast),margin var(--k-base) var(--k-ease),padding var(--k-base) var(--k-ease)}   /* строка уходит после удаления */

/* ——— Кнопка основная (утверждена): форма — скругление r, текст как у кнопки отправки, высота 40, цена в той же строке. k-btn2 · .ghost · .danger · .sm ——— */
.k-btn2{box-sizing:border-box;height:40px;display:inline-flex;align-items:center;gap:8px;padding:0 16px;border:1px solid var(--c-accent-bg);border-radius:var(--r);background:var(--c-accent-bg);color:var(--c-accent-tx);cursor:pointer;white-space:nowrap;text-transform:none;letter-spacing:0;transition:transform var(--k-fast) var(--k-ease),opacity var(--k-fast),background var(--k-fast)}
.k-btn2 .sub{opacity:.7;font-weight:var(--fw-400,400)}
.k-btn2{transition:transform var(--k-fast) var(--k-ease),box-shadow var(--k-fast) var(--k-ease),background var(--k-fast),border-color var(--k-fast)}
/* наведение — без ореола (он у полей): вторичная получает градиент «выбор», основная чуть светлеет, «Удалить» — тёмная линия своего набора; нажатие — вдавливание */
@media(hover:hover){html:not(.k-touch) .k-btn2:not(:disabled):hover{opacity:.86}
html:not(.k-touch) .k-btn2.ghost:not(:disabled):hover{opacity:1;background:var(--g-select);border-color:transparent}
html:not(.k-touch) .k-btn2.danger:not(:disabled):hover{opacity:1;border-color:var(--c-error-ic)}}   /* на телефоне наведения нет — после касания кнопка не «залипает» подсвеченной */
.k-btn2:not(:disabled):active{transform:scale(.96)}
.k-btn2:focus-visible{outline:2px solid var(--c-card-tx);outline-offset:2px}
.k-btn2.ghost{background:var(--c-card-bg);color:var(--c-card-tx);border-color:var(--c-card-ln)}
.k-btn2.danger{background:var(--c-error-bg);border-color:var(--c-error-bg);color:var(--c-error-tx)}
.k-btn2.sm{height:32px;padding:0 12px}
.k-btn2:disabled{background:transparent;border:1px dashed var(--c-card-secondary-ic);color:var(--c-card-secondary-ic);cursor:var(--k-cur-lock)}   /* неактивная — как недоступное поле: пунктир, без заливки, бледный текст, замок; рядом обязательно k-tip с причиной */
/* кнопка «Удалить» (danger) — всегда со значком «конец» (рожица с крестиками); значок — маска, цвет — текста кнопки */
:root{--k-dead:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5a9.5 9.5 0 1 1 0 19 9.5 9.5 0 0 1 0-19zM7 7.5l3.5 3.5M10.5 7.5 7 11M13.5 7.5 17 11M17 7.5 13.5 11M8 15.5h8M12.5 15.5v2a1.75 1.75 0 0 0 3.5 0v-2'/%3E%3C/svg%3E")}
.k-btn2.danger:not(:disabled)::before{content:"";width:20px;height:20px;flex:none;background:currentColor;-webkit-mask:var(--k-dead) center/contain no-repeat;mask:var(--k-dead) center/contain no-repeat}
.k-btn2:disabled::before{content:"";width:14px;height:14px;flex:none;background:currentColor;-webkit-mask:var(--k-lock) center/contain no-repeat;mask:var(--k-lock) center/contain no-repeat}
:root{--k-cur-lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='#fff'/%3E%3Cg fill='none' stroke='#1B1130' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='6.5' y='11' width='11' height='8' rx='2'/%3E%3Cpath d='M9 11V8.8a3 3 0 0 1 6 0V11'/%3E%3C/g%3E%3C/svg%3E") 12 12,not-allowed;--k-lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='5.5' y='10.5' width='13' height='9' rx='2'/%3E%3Cpath d='M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5'/%3E%3C/svg%3E")}

/* ——— Кнопка с ценой (утверждена 20.10.2026): любая кнопка-действие с ценой в ◈. Слева действие (.lbl), справа колонка цены (.k-price) одной ширины на всех кнопках — до 4 знаков + ◈, с разделителем; «0 ◈» тоже пишется, слово «бесплатно» не используется. k-btn2.price > .lbl + .k-price ——— */
.k-btn2.price{padding:0 0 0 16px;gap:0;justify-content:flex-start;overflow:hidden}
.k-btn2.price.sm{padding-left:12px}
.k-btn2.price .lbl{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:left}
.k-btn2.price .k-price{flex:0 0 auto;min-width:4.6em;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;margin-left:8px;padding:0 8px;border-left:1px solid color-mix(in srgb,currentColor 28%,transparent);white-space:nowrap;font-weight:var(--fw-400,400)}
.k-btn2.price:disabled .k-price{border-left-style:dashed}

/* ——— Фирменное поле (утверждено): линия + ореол всегда; ошибка — те же, набором error; недоступно — пунктир, замок, «i». k-field2 ——— */
.k-field2{box-sizing:border-box;width:100%;height:40px;padding:0 12px;border:1px solid var(--halo-line);box-shadow:var(--halo);border-radius:10px;background:var(--c-card-bg);color:var(--c-card-tx);font:inherit;outline:none;transition:box-shadow var(--k-base) var(--k-ease),border-color var(--k-base) var(--k-ease)}
textarea.k-field2{height:auto;padding:calc((40px - 2px - 1lh) / 2) 12px;resize:none}
.k-field2::placeholder{color:var(--c-card-secondary-tx)}
.k-field2:focus{box-shadow:0 0 0 4px var(--p-neon-soft,#F0FBCF)}
.k-field2.bad{border-color:var(--c-error-ic);box-shadow:0 0 0 3px var(--c-error-bg);animation:k-shake var(--k-base) var(--k-ease)}
.k-field2:disabled{border:1px dashed var(--c-card-secondary-ic);box-shadow:none;background:var(--c-page-bg);color:var(--c-card-secondary-ic);cursor:var(--k-cur-lock)}
.k-field2-err{color:var(--c-error-tx);animation:k-fade-in var(--k-base) var(--k-ease)}
/* строка «подпись / поле + кнопка / подсказка»: кнопка стоит по полю, подсказка появляется под полем и ничего не сдвигает. k-frow */
.k-frow{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--sp-inline);row-gap:var(--sp-inline);align-items:center;width:min(560px,100%)}
.k-frow>label,.k-frow>.t-label{grid-column:1/-1}
.k-frow>.k-field2-err{grid-column:1}

/* ——— Уведомление (утверждено): сверху по центру, скругление r, значок; обычное — tag-2, ошибка — error; с «Вернуть» — полоска времени. kit.js: bcKit.toast() ——— */
.k-toast{position:fixed;top:70px;left:50%;transform:translateX(-50%);z-index:300;display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:var(--r);background:var(--c-tag-2-bg);color:var(--c-tag-2-tx);max-width:min(560px,calc(100vw - 32px));overflow:hidden;animation:k-drop-in var(--k-base) var(--k-ease) both}
.k-toast .k-ico{color:var(--c-tag-2-ic);flex:none}
.k-toast.err{background:var(--c-error-bg);color:var(--c-error-tx)}.k-toast.err .k-ico{color:var(--c-error-ic)}
.k-toast .undo{border:0;background:none;color:inherit;text-decoration:underline;cursor:pointer;padding:0 0 0 6px;font:inherit}
.k-toast .tm{position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;opacity:.35;transform-origin:left;animation:k-timer linear both}
.k-toast.out{animation:k-drop-out var(--k-fast) var(--k-ease-in) both}

/* ——— Плитки с крупным превью: k-tiles > k-tile. Один слой: картинка со скруглением, под ней подпись и плеер прямо на фоне страницы — без подложек-коробок.
   Наведение — картинка чуть приближается и получает ореол; × и «⋯» — тёмные значки на белой подложке со скруглением r ——— */
.k-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--sp-item);width:100%}
.k-tile{position:relative;display:flex;flex-direction:column;transition:transform var(--k-base) var(--k-ease),opacity var(--k-base) var(--k-ease)}
.k-tile>img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg);user-select:none;-webkit-user-drag:none;transition:transform var(--k-slow) var(--k-ease),box-shadow var(--k-base) var(--k-ease)}
/* подложка карточки (приём C): в покое — контрастная поверхности (на сером — белая, на белом — серая), картинка не сливается с фоном; при наведении поверх проявляется градиент «выбор» лайм → серый
   и «въезжает» слева направо (двойной размер фона + сдвиг). Ореол не используем — он означает поле ввода */
.k-tile{isolation:isolate;padding:var(--sp-related)}
.k-tile::before,.k-tile::after{content:"";position:absolute;inset:0;border-radius:calc(var(--r-lg) + 6px);z-index:-1;pointer-events:none}
.k-tile::before{background:var(--k-tile-bg,var(--c-card-bg))}   /* подложка контрастна поверхности: на сером фоне страницы — белая; внутри белого блока задайте --k-tile-bg:var(--c-page-bg) */
.k-tile::after{background:var(--g-select);background-size:220% 100%;background-position:100% 0;opacity:0;transition:opacity var(--k-slow) var(--k-ease),background-position .7s var(--k-ease)}
.k-tile.open::after{opacity:1;background-position:0 0}
@media(hover:hover){html:not(.k-touch) .k-tile:hover::after{opacity:1;background-position:0 0}html:not(.k-touch) .k-tile:hover>img{transform:scale(1.03)}html:not(.k-touch) .k-tile:hover .x{opacity:1;transform:none}}   /* наведение — только там, где есть мышь; на телефоне его нет */
.k-tile .x{right:20px;top:20px}
.k-tile .cap{padding:var(--sp-related) var(--sp-hair) 0;display:flex;flex-direction:column;gap:var(--sp-tight)}
.k-tile .x{position:absolute;top:10px;z-index:1;width:28px;height:28px;background:var(--c-card-bg);color:var(--c-card-tx);border-radius:var(--r);opacity:0;transform:translateY(-4px) scale(.9);transition:opacity var(--k-base) var(--k-ease),transform var(--k-base) var(--k-ease),background var(--k-fast),color var(--k-fast)}
.k-tile .x{right:10px}
.k-tile .x .k-ico,.k-tile .mn .k-ico{stroke-width:2}
/* настройки «⋯» — в строке подписи справа, всегда видны: имя слева, кнопка справа */
.k-tile .cap{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;align-items:start}
.k-tile .cap>:not(.mn){grid-column:1}.k-tile .cap .mn{grid-column:2;grid-row:1/span 2;align-self:center}
.k-tile .mn{width:28px;height:28px;border-radius:var(--r);color:var(--c-card-tx)}
.k-tile .mn:hover,.k-tile.open .mn{background:var(--c-card-bg)}
.k-tile:focus-within .x,.k-tile.open .x{opacity:1;transform:none}
.k-tile .x:hover{background:var(--c-error-bg);color:var(--c-error-ic)}
@media(hover:none){.k-tile .x{opacity:1;transform:none}}
.k-touch .k-tile .x{opacity:1;transform:none}   /* k-touch на html — принудительно «как на телефоне» (образцы, тесты) */
.k-tile.gone{transform:scale(.92);opacity:0}
/* плеер в плитке — без своей подложки: ▶ · имя голоса · тонкая линия · время, всё кликабельно */
.k-tile .k-player{margin:10px 0 0;padding:0;background:none;gap:10px}
.k-tile .k-player:hover{box-shadow:none}
@media(hover:hover){html:not(.k-touch) .k-tile .k-player:hover .lb{text-decoration:underline;text-underline-offset:3px}}
.k-tile .k-player .k-trk{height:2px}
.k-tile .k-player .tm{min-width:2.4em;text-align:right}.k-tile .k-player .tm .tot{display:none}
/* телефон: компактный список — миниатюра · имя и голос · ⋮ в конце строки (настройки, в конце меню — «Удалить»); × на картинке нет; удалить — ещё и свайпом влево */
@media(max-width:480px){
 .k-tiles{grid-template-columns:1fr;gap:var(--sp-inline)}
 .k-tile{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:var(--sp-related);align-items:start;padding:var(--sp-related);touch-action:pan-y}
 .k-tile>img{width:64px;height:100%;min-height:64px;aspect-ratio:auto;align-self:stretch;border-radius:var(--r);grid-row:1/span 2}   /* аватар по высоте текста: верх — с именем, низ — с плеером */
 .k-tile .cap{padding:0;grid-column:2}
 .k-tile .k-player{grid-column:2;margin:var(--sp-inline) 0 0;gap:var(--sp-inline)}.k-tile .k-player .pp{width:20px;height:20px}.k-tile .k-player .pp svg{width:9px;height:9px}   /* карточка меньше — и ▶ меньше; линия прогресса остаётся */
 .k-tile .x{display:none}
 .k-tile .mn svg{transform:rotate(90deg)}
}
/* аватар без картинки — плашка с буквой вместо <img>; цвет — набор роли (.rc0…), иначе tag-1 */
.k-tile>.av{display:block;overflow:hidden;width:100%;aspect-ratio:4/3;border-radius:var(--r-lg);background:var(--c-tag-1-bg);color:var(--c-tag-1-tx);user-select:none}
.k-tile>.av svg{display:block;width:100%;height:100%}.k-tile>.av circle,.k-tile>.av path{fill:currentColor;opacity:.25}.k-tile>.av text{fill:currentColor;font-size:40px;font-weight:500;font-family:inherit}   /* силуэт: голова с буквой + плечи, цвет — набор роли */
/* строки (.rows) — компактный список всегда, на любой ширине: для узких колонок (панель персонажей Озвучки). То же, что карточки на телефоне */
.k-tiles.rows{grid-template-columns:1fr;gap:var(--sp-inline)}
.k-tiles.rows .k-tile{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:var(--sp-related);align-items:start;padding:var(--sp-related);touch-action:pan-y}
.k-tiles.rows .k-tile>img,.k-tiles.rows .k-tile>.av{width:64px;height:100%;min-height:64px;aspect-ratio:auto;align-self:stretch;border-radius:var(--r);grid-row:1/span 2}
.k-tiles.rows .k-tile .cap{padding:0;grid-column:2}
.k-tiles.rows .k-tile .k-player{grid-column:2;margin:var(--sp-inline) 0 0;gap:var(--sp-inline)}.k-tiles.rows .k-tile .k-player .pp{width:20px;height:20px}.k-tiles.rows .k-tile .k-player .pp svg{width:9px;height:9px}
.k-tiles.rows .k-tile .x{display:none}
.k-tiles.rows .k-tile .mn svg{transform:rotate(90deg)}
@media(max-width:480px){.k-tile>.av{width:64px;height:100%;min-height:64px;aspect-ratio:auto;align-self:stretch;border-radius:var(--r);grid-row:1/span 2}}
.k-tile.swiping::before{background:var(--c-error-bg)}
/* ——— Мягкое удаление (k-undo): уведомление там же, где удалили. Поверх всего элемента — полупрозрачный розово-серый градиент, переливается как «идёт генерация»;
   под ним элемент виден, но погашен. Текст + «Вернуть» + полоска времени. Время вышло — элемент уходит. kit.js: bcKit.softDel(el,{text, ms, undo, done}).
   Подходит любому элементу с position:relative: плитка, строка списка, карточка ——— */
:root{--g-undo:linear-gradient(110deg,color-mix(in srgb,var(--p-rose-soft) 90%,transparent),color-mix(in srgb,var(--p-sub) 90%,transparent) 25%,color-mix(in srgb,color-mix(in srgb,var(--p-rose) 35%,var(--p-rose-soft)) 90%,transparent) 50%,color-mix(in srgb,var(--p-sub) 90%,transparent) 75%,color-mix(in srgb,var(--p-rose-soft) 90%,transparent))}
.k-undo{position:absolute;inset:0;z-index:3;border-radius:inherit;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-related);padding:var(--sp-related);text-align:center;color:var(--c-card-tx);background:var(--g-undo);background-size:200% 100%;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:k-fade-in var(--k-base) var(--k-ease) both,k-shim 2.4s linear infinite}
.k-tile>.k-undo{border-radius:calc(var(--r-lg) + 6px)}
.k-undo.out{animation:k-fade-out var(--k-fast) var(--k-ease-in) both}
.k-undo .tm{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--c-card-tx);opacity:.3;transform-origin:left;animation:k-timer linear both}
.del>:not(.k-undo){filter:grayscale(1);opacity:.55;transition:filter var(--k-base),opacity var(--k-base)}
.k-tile.del::after{opacity:0!important}
@media(max-width:480px){.k-undo{flex-direction:row;justify-content:space-between;padding:0 var(--sp-related) 0 var(--sp-item);text-align:left}}
.k-tile.swiping>*:not(.k-swipe){transform:translateX(var(--sx,0));transition:none}
.k-tile.back>*:not(.k-swipe){transition:transform var(--k-base) var(--k-ease)}
.k-tile .k-swipe{position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--c-error-ic);display:flex;align-items:center;gap:6px;opacity:0;pointer-events:none}
.k-tile.swiping .k-swipe{opacity:1}

/* ——— Меню действий и всплывающая панель у элемента: k-anchor (поверх страницы, у кнопки), k-menu — строки «значок + действие». kit.js: bcKit.menu(), bcKit.pop() ——— */
.k-anchor{position:fixed;z-index:310;min-width:16rem;max-width:min(22rem,calc(100vw - 24px));max-height:min(70vh,28rem);overflow-y:auto;box-sizing:border-box;padding:var(--sp-inline);border-radius:var(--r-lg);background:var(--c-card-bg);border:1px solid var(--c-card-ln);animation:k-pop-in var(--k-base) var(--k-ease) both}
.k-anchor.out{animation:k-pop-out var(--k-fast) var(--k-ease-in) both}
.k-menu{display:flex;flex-direction:column;gap:2px}
.k-menu button{display:flex;align-items:center;gap:var(--sp-related);width:100%;min-height:var(--sp-touch);padding:0 var(--sp-related);border:0;border-radius:var(--r);background:none;color:var(--c-card-tx);cursor:pointer;text-align:left}
.k-menu button:hover,.k-menu button:focus-visible{background:var(--c-tag-2-bg);outline:none}
.k-menu button .k-ico{color:var(--c-card-secondary-ic)}
.k-menu button.danger{color:var(--c-error-tx)}.k-menu button.danger .k-ico{color:var(--c-error-ic)}.k-menu button.danger:hover{background:var(--c-error-bg)}
.k-menu hr{border:0;height:1px;background:var(--c-card-ln);margin:var(--sp-tight) var(--sp-inline)}
.k-menu button .k-ico{width:20px;height:20px;flex:none}.k-menu button.danger .k-ico{stroke-width:2}
@media(hover:none){.k-menu button{min-height:48px}}.k-touch .k-menu button{min-height:48px}
/* правило текста: «Удалить» никогда не пишется одно — всегда что именно: «Удалить персонажа», «Удалить весь проект», «Удалить голос» */
.k-anchor .hd{padding:6px 8px 4px;color:var(--c-card-secondary-tx)}

/* ——— Окно подтверждения (утверждено): крупное превью удаляемого в края, ×, заголовок, текст и одно действие — по центру. На узком экране — шторка снизу с ручкой. kit.js: bcKit.confirm() ——— */
.k-veil{position:fixed;inset:0;z-index:250;background:rgba(27,17,40,.35);display:grid;place-items:center;padding:16px;animation:k-fade-in var(--k-base) var(--k-ease) both}
.k-veil.out{animation:k-fade-out var(--k-fast) var(--k-ease-in) both}
.k-dlg{position:relative;background:var(--c-card-bg);border-radius:var(--r-lg);padding:24px;width:min(400px,100%);box-sizing:border-box;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;overflow:hidden;animation:k-pop-in var(--k-base) var(--k-ease) both}
.k-veil.out .k-dlg{animation:k-pop-out var(--k-fast) var(--k-ease-in) both}
.k-dlg .pv{user-select:none;-webkit-user-drag:none;display:block;width:calc(100% + 48px);margin:-24px -24px 8px;aspect-ratio:16/10;object-fit:cover;background:var(--c-page-bg)}
.k-dlg .x{position:absolute;top:12px;right:12px;z-index:1;background:var(--c-card-bg);border-radius:50%}
.k-dlg .f{display:flex;margin-top:8px}
.k-dlg .its{list-style:none;margin:2px 0 0;padding:10px 12px;border-radius:var(--r);background:var(--c-page-bg);display:flex;flex-direction:column;gap:6px;align-self:stretch;text-align:left}
.k-dlg .its li{display:flex;align-items:center;gap:10px}.k-dlg .its li span{flex:1}
.k-dlg .its li>.k-ico:first-child{color:var(--c-error-ic)}
.k-dlg .its li a.lnk{color:inherit;text-decoration:underline;text-decoration-color:var(--c-page-ln);text-underline-offset:3px}@media(hover:hover){html:not(.k-touch) .k-dlg .its li a.lnk:hover{text-decoration-color:currentColor}}
.k-dlg .its{max-height:40vh;overflow:auto}
.k-dlg .its li.keep>.k-ico:first-child{color:var(--c-card-secondary-ic)}.k-dlg .its li.keep{color:var(--c-card-secondary-tx)}
.k-dlg .its .ok{color:var(--c-tag-2-ic)}
.k-dlg .grab{display:none}
@media(max-width:640px){
  .k-veil{place-items:end stretch;padding:0}
  .k-dlg{width:100%;border-radius:var(--r-lg) var(--r-lg) 0 0;padding-top:28px;animation:k-sheet-in var(--k-slow) var(--k-ease) both;touch-action:none}
  .k-dlg .pv{margin-top:-28px}
  .k-veil.out .k-dlg{animation:k-sheet-out var(--k-base) var(--k-ease-in) both}
  .k-dlg .grab{display:block;position:absolute;top:8px;left:50%;transform:translateX(-50%);width:44px;height:5px;border-radius:999px;background:var(--c-card-secondary-ic);z-index:2}
}
.k-help .t-block{padding-right:28px}
/* ——— Выделение: режим «выбрать несколько» (как пересылка в Telegram). k-selbar — панель над списком: «Выбрано: N» t-label, кнопки k-btn; липнет к верху.
   k-pickable — элемент списка в режиме выделения: слева флажок k-check (.k-pk), .picked — отмечен, .off — выбрать нельзя (идёт генерация) ——— */
.k-selbar{display:flex;align-items:center;gap:var(--sp-inline);position:sticky;top:0;z-index:3;padding:var(--sp-inline) var(--sp-related);border-radius:var(--r-lg);background:var(--c-card-bg);color:var(--c-card-tx)}
.k-selbar .sp{flex:1}
.k-pickable{position:relative;cursor:pointer;padding-left:calc(var(--k-check) + var(--sp-related))}
.k-pickable>.k-pk{position:absolute;left:0;top:var(--sp-hair)}
.k-pickable.off{cursor:default;opacity:var(--k-off)}
/* ——— Запись: k-note — карточка решения/вопроса/заметки: шапка .hd (заголовок t-label + дата t-hint), текст t-body. .q — открытый вопрос (пара tag-3), .warn — требует решения (пара tag-4) ——— */
.k-note{display:flex;flex-direction:column;gap:var(--sp-tight);padding:var(--sp-related) var(--sp-item);border-radius:var(--r-lg);background:var(--c-card-bg);color:var(--c-card-tx);max-width:68ch}
.k-note>.hd{display:flex;align-items:baseline;gap:var(--sp-inline);flex-wrap:wrap}
.k-note.q{background:var(--c-tag-3-bg);color:var(--c-tag-3-tx)}
.k-note.warn{background:var(--c-tag-4-bg);color:var(--c-tag-4-tx)}
.k-note p{margin:0}.k-note p+p,.k-note ul+p,.k-note p+ul{margin-top:var(--sp-inline)}
.k-note ul{margin:0;padding-left:var(--sp-item)}.k-note li+li{margin-top:var(--sp-tight)}
.k-note code{padding:0 var(--sp-tight);border-radius:var(--r);background:var(--c-page-bg)}
/* ——— Ключ — значение: k-kv — сетка «ключ (t-code) — пояснение (t-body)» для справочных списков ——— */
.k-kv{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-inline) var(--sp-item);align-items:baseline;max-width:68ch}
.k-kv>code{justify-self:start;padding:var(--sp-hair) var(--sp-inline);border-radius:var(--r);background:var(--c-page-bg);color:var(--c-card-tx);white-space:nowrap}
/* ——— Шаги: k-flow — цепочка чипов через стрелки (как работает процесс) ——— */
.k-flow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-inline);max-width:68ch}
.k-flow>.ar{color:var(--c-card-secondary-ic)}
/* ——— Содержание: k-toc — липкий список якорей справа от длинного текста (t-nav), .on — текущий раздел ——— */
.k-toc{position:sticky;top:calc(var(--sp-section) + 72px);display:flex;flex-direction:column;gap:var(--sp-hair)}
.k-toc>a{text-decoration:none;padding:var(--sp-tight) var(--sp-inline);border-radius:var(--r);color:var(--c-page-tx);opacity:.7}
.k-toc>a:hover,.k-toc>a.on{background:var(--c-card-bg);opacity:1}
.k-toc>.t-eyebrow{padding:0 var(--sp-inline) var(--sp-inline)}
/* ——— Прогресс: k-bar — дорожка + заполнение. Цвет заполнения — из наборов дизайн-системы (пары g-progress-*: img, video, audio, mock, series) или акцент; дорожка — линия карточки.
   Разметка: <div class="k-bar img"><i style="width:72%"></i></div>. Несколько сегментов — несколько <i> подряд (.k-bar.multi: заполнение и остаток разными наборами). .lg — высокая дорожка (сводки) ——— */
.k-bar{display:flex;height:6px;border-radius:999px;background:var(--c-card-ln);overflow:hidden}
.k-bar.lg{height:10px}
.k-bar>i{display:block;height:100%;border-radius:999px;background:var(--c-accent-bg);transition:width var(--k-slow) var(--k-ease)}
.k-bar.img>i{background:var(--c-g-progress-img-bg)}.k-bar.video>i{background:var(--c-g-progress-video-bg)}.k-bar.audio>i{background:var(--c-g-progress-audio-bg)}
.k-bar.mock>i{background:var(--c-g-progress-mock-bg)}.k-bar.series>i{background:var(--c-g-progress-series-bg)}
.k-bar.multi>i+i{background:var(--c-page-bg);border-radius:0}   /* остаток/второй сегмент — подложка страницы */
.k-bar.warn>i{background:var(--c-g-progress-audio-bg)}   /* мало места / порог — тёплый набор */
/* ——— Редакционные варианты (v291, по макету A): без плашек — иерархия тонкими линиями и капителью.
   k-stats.line > k-stat.line — показатель: линия сверху, подпись t-eyebrow, цифра t-figure, пояснение t-hint.
   k-table.line — таблица без подложки: шапка t-eyebrow с линией, строки через hairline, первая колонка от края.
   k-strip — строка статуса между двумя линиями: k-status.mark (точка + капитель) · время t-code · кнопка справа ——— */
.k-stats.line{gap:var(--sp-group);grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}
.k-stat.line{background:none;border-radius:0;padding:var(--sp-related) 0 0;border-top:1px solid var(--c-card-ln)}
.k-stat.line>.t-figure small{font-size:var(--hint-fs);color:var(--c-card-secondary-tx);font-weight:var(--hint-fw);letter-spacing:0;margin-left:var(--sp-tight)}
.k-stat.line.bad>.t-figure{color:var(--c-error-tx)}
.k-table.line{background:none;border-radius:0}
.k-table.line th{padding:var(--sp-inline) 0;border-bottom:1px solid var(--c-card-ln);color:var(--c-card-secondary-tx)}
.k-table.line td{padding:var(--sp-related) 0}.k-table.line th+th,.k-table.line td+td{padding-left:var(--sp-group)}
@media(hover:hover){.k-table.line tr:hover td{background:var(--c-page-bg)}}
.k-strip{display:flex;align-items:center;gap:var(--sp-item);padding:var(--sp-item) 0;border-top:1px solid var(--c-card-ln);border-bottom:1px solid var(--c-card-ln)}
.k-strip .sp{flex:1}
.k-status.mark{background:none;padding:0;gap:var(--sp-inline);text-transform:uppercase;letter-spacing:var(--ls-10);color:var(--c-card-secondary-tx)}
.k-status.mark::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px var(--c-page-bg)}
.k-status.mark.ok{color:var(--c-tag-2-tx)}.k-status.mark.ok::before{box-shadow:0 0 0 4px var(--c-tag-2-bg)}
.k-status.mark.err{color:var(--c-error-tx)}.k-status.mark.err::before{box-shadow:0 0 0 4px var(--c-error-bg)}
/* ——— Показатели: k-stats > k-stat — ряд плиток-итогов (сводки, сверки). Подпись t-caption · число t-num · пояснение t-hint. .bad — расхождение/тревога (пара error) ——— */
.k-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:var(--sp-item)}
.k-stat{display:flex;flex-direction:column;gap:var(--sp-tight);padding:var(--sp-item);border-radius:var(--r-lg);background:var(--c-card-bg);color:var(--c-card-tx)}
.k-stat>.t-caption,.k-stat>.t-hint{color:var(--c-card-secondary-tx)}
.k-stat.bad>.t-num{color:var(--c-error-tx)}
/* ——— Таблица с числами: k-table — отчёты по строкам (модели, расходы). th — t-caption; td.num — число вправо; tr.sub — вложенная строка-разбивка (отступ слева, t-caption); td.bad — расхождение ——— */
.k-table{width:100%;border-collapse:collapse;background:var(--c-card-bg);color:var(--c-card-tx);border-radius:var(--r-lg);overflow:hidden}
.k-table th{text-align:left;color:var(--c-card-secondary-tx);padding:var(--sp-related) var(--sp-item);border-bottom:1px solid var(--c-card-ln)}
.k-table td{padding:var(--sp-related) var(--sp-item);border-bottom:1px solid var(--c-card-ln);vertical-align:middle}
.k-table tr:last-child td{border-bottom:none}
.k-table .num{text-align:right;white-space:nowrap}
.k-table .sec{color:var(--c-card-secondary-tx)}
.k-table tr.sub td{padding-top:var(--sp-tight);padding-bottom:var(--sp-tight);color:var(--c-card-secondary-tx)}
.k-table tr.sub td:first-child{padding-left:calc(var(--sp-item) * 2)}
.k-table td.bad{color:var(--c-error-tx)}
.k-table .k-chip{margin-left:var(--sp-inline)}
@media(prefers-reduced-motion:reduce){.k-tile::after{transition:none!important}.k-anchor,.k-anchor.out{animation:none!important}.k-tile,.k-tile>img,.k-tile .x{transition:none!important}.k-undo,.k-undo.out,.k-help,.k-help.out,.k-toast,.k-toast.out,.k-veil,.k-veil.out,.k-dlg,.k-veil.out .k-dlg,.k-field2.bad,.k-field2-err{animation:none!important}.k-anim-collapse,.k-btn2,.k-field2{transition:none!important}}

/* ——— Заглушка: k-ph — место картинки, которой ещё нет (светлый градиент набора + линия). На .k-ph кладутся значки поверх ——— */
.k-ph{background:var(--c-g-lav-lime-bg);box-shadow:inset 0 0 0 1px var(--c-card-ln)}

/* ——— Плашка: k-panel — подложка под группу (подложка страницы, радиус карточки). .dark — тёмная: кнопки внутри прозрачные, прогресс на светлой дорожке ——— */
.k-panel{background:var(--soft);border-radius:var(--r-lg);padding:var(--sp-item) var(--sp-group)}
.k-panel.dark{background:var(--c-accent-bg);color:var(--c-accent-tx)}
.k-panel.dark .t-label,.k-panel.dark .t-body,.k-panel.dark .t-h3,.k-panel.dark .t-figure{color:inherit}
.k-panel.dark .t-hint,.k-panel.dark .t-caption,.k-panel.dark .t-eyebrow{color:var(--c-accent-ln);color:rgba(255,255,255,.62)}
.k-panel.dark .k-btn{background:rgba(255,255,255,.1);border-color:transparent;color:var(--c-accent-tx)}
.k-panel.dark .k-btn:hover{background:rgba(255,255,255,.18)}
.k-panel.dark .k-bar{background:rgba(255,255,255,.14)}
.k-panel.dark .k-tip{background:rgba(255,255,255,.12);color:var(--c-accent-tx)}

/* ——— Показатель на тёмном: k-stat.line.dark — линия и подписи светлые ——— */
.k-stat.line.dark{border-top-color:rgba(255,255,255,.18);color:var(--c-accent-tx)}
.k-stat.line.dark .t-eyebrow,.k-stat.line.dark .t-hint,.k-stat.line.dark>.t-figure small{color:rgba(255,255,255,.62)}

/* ——— Кнопка-набор: k-btn.c2 — действие, окрашенное набором плашки (лайм). Для главного действия с ценой ——— */
.k-btn.c2{background:var(--c-tag-2-bg);color:var(--c-tag-2-tx);border-color:transparent}
.k-btn.c2:hover{opacity:.9}

/* ——— Миниатюра: k-av.sq — квадратная (кадр, предмет, локация); .add — пунктирная «+» ——— */
.k-av.sq{border-radius:var(--r)}
.k-av.add{border:1px dashed var(--c-card-secondary-ic);background:none;color:var(--c-card-secondary-tx);cursor:pointer;font:inherit}
.k-av.add:hover{border-color:var(--c-card-tx);color:var(--c-card-tx)}
.k-av>img{width:100%;height:100%;object-fit:cover;display:block}

/* ——— Столбики: k-spark — расход по дням. Каждый столбик — <i style="--h:0..1"> с подписью в title; .bad — выше порога ——— */
.k-spark{display:flex;align-items:flex-end;gap:2px;height:48px}
.k-spark>i{flex:1;min-width:3px;border-radius:2px 2px 0 0;background:var(--c-g-progress-img-bg);height:calc(max(var(--h,0),.04) * 100%);display:block}
.k-spark>i.bad{background:var(--c-g-progress-audio-bg)}
.k-spark>i.off{background:var(--c-card-ln)}
.k-spark.lg{height:88px}
.k-spark.sm{height:28px}

/* ——— Ожидание: k-bar.run — бегущая полоса, когда неизвестно, сколько ждать (страница грузится, идёт запрос к сервису) ——— */
.k-bar.run>i{width:45%;animation:k-run 1.2s var(--k-ease) infinite}
@keyframes k-run{0%{transform:translateX(-35%)}100%{transform:translateX(135%)}}
@media(prefers-reduced-motion:reduce){.k-bar.run>i{animation:none;width:100%;opacity:.5}}