/* shell.css — оболочка приложения инструментов (app_tools_v2, 20.10: облик макета
 * docs/plans/app-shell-v2-mockup-2026-10-20.html). Облик D: плоско, без теней, рамки 1px,
 * светлая тема. Компьютер (от 1024 px): меню слева 220 px, справа 260 px. Телефон: нижнее меню из
 * четырёх пунктов, карточки в один столбец по 52 px, касания не меньше 40 px.
 * Блоки «Общие», «Экран инструмента» и «Консультант» — прежние: их классы использует tool-screen.js
 * и модули инструментов (stems.js, key.js). */

:root {
  --bg: #f4efe6;
  --surface: #fffcf6;
  --line: #c9bca7;
  --line-soft: #e4d9c7;
  --text: #191512;
  --soft: #665c50;
  --accent: #c93a14;          /* заливка кнопок, белый текст */
  --accent-text: #b7300f;     /* акцент текста и активных пунктов */
  --icon-bg: #ffe3d8;         /* мягкий фон иконок */
  --ok: #2f6b3a;
  --bad: #9e2a12;
  --warn: #8a5a0b;            /* предупреждение в отчётах: тёплый янтарь, плоско */
  --warn-bg: #fbf0d9;         /* плашка-предупреждение (pay-helper.css) */
  --warn-line: #d9b867;
  --r: 14px;
  --r-lg: 16px;
  --font-text: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-head: 'Unbounded', 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --top-h: 46px;
  --tabs-h: 58px;
  color-scheme: light;
}

/* Тёмная тема (22.10, облик D): тот же состав токенов, тёплый уголь вместо кремового.
   Включается атрибутом data-theme на <html> (mm-theme.js / инлайн-скрипт в shell.html).
   Echoteka тёмную берёт из своей палитры (brand/theme.css, brand/app-shell.css) — здесь её не трогаем. */
:root[data-theme="dark"]:not([data-brand="echoteka"]) {
  --bg: #14120f;
  --surface: #1c1915;
  --line: #3d362d;
  --line-soft: #2a251e;
  --text: #f3ece2;
  --soft: #b3a895;
  --accent: #c93a14;          /* заливка кнопок, белый текст (AA) */
  --accent-text: #ff8a66;     /* акцент текста и активных пунктов на тёмном */
  --icon-bg: #3a221a;
  --ok: #7fd49a;
  --bad: #ff9a85;
  --warn: #e6b35c;
  --warn-bg: #2a2313;
  --warn-line: #7a6125;
  color-scheme: dark;
}
/* Активный фильтр: в светлой теме — инверсия (тёмная плашка), в тёмной — тёплая подсветка, не светлая плашка */
:root[data-theme="dark"]:not([data-brand="echoteka"]) .chip[aria-pressed="true"] { background: var(--icon-bg); color: var(--accent-text); border-color: var(--accent-text); }
/* Логотип: тёмная тема берёт вариант для тёмного фона (светлая надпись); тот же приём, что у беты */
:root[data-theme="dark"]:not([data-brand="echoteka"]) .sh-brand .logo { content: url(/icons/mm-logo-lockup-v-dark.png?v=2); }

/* Панель процесса (mm-processing.css, класс .mmp) читает токены облика D --ds-*. Оболочка их не получает:
 * mm-beta-d2.css меняет таблицы, тени и карточки всей страницы, поэтому здесь --ds-* выводятся из токенов
 * темы оболочки (светлая по умолчанию, тёмная при data-theme="dark"). Задано на самой панели, а не на :root:
 * посадочная с экраном приложения стоит на странице сайта, где --ds-* держит mm-beta-d2.css.
 * Echoteka берёт свои цвета через те же токены темы (brand/app-shell.css). */
.sh .mmp, .mm-tool-slot .mmp {
  --ds-surface: var(--surface);
  --ds-line: var(--line);
  --ds-line-strong: var(--line);
  --ds-r: var(--r);
  --ds-text: var(--text);
  --ds-soft: var(--soft);
  --ds-dim: var(--soft);
  --ds-acc: var(--accent-text);
  --ds-cta: var(--accent);
  --ds-on-cta: var(--on-accent, #ffffff);
  --ds-focus: var(--accent-text);
  --ds-ok: var(--ok);
  --ds-bad: var(--bad);
  --ds-lcd: var(--bg);
  --ds-lcd-line: var(--line-soft);
  --ds-lcd-dim: var(--soft);
  --ds-meter-ok: var(--ok);
  --ds-meter-hot: var(--warn);
  --ds-meter-peak: var(--bad);
  --ds-font-mono: var(--font-mono);
  --ds-font-body: var(--font-text);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); }
body {
  font: 400 14px/1.45 var(--font-text);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  min-height: 100vh;
  overflow-x: hidden;
}
h1, h2, h3 { margin: 0; letter-spacing: -0.01em; }
h1 { font: 400 18px/1.2 var(--font-head); }
h2 { font: 500 15px/1.2 var(--font-head); }
h3 { font: 500 14px/1.25 var(--font-text); }
p { margin: 0; }
a { color: var(--accent-text); }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
[hidden] { display: none !important; }

.sh-skip {
  position: absolute; left: -9999px; top: 8px; z-index: 50;
  background: var(--surface); padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px;
}
.sh-skip:focus { left: 8px; }

/* ── Каркас: шапка, меню, основная часть, правая колонка, нижнее меню ── */
.sh { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.sh-top {
  position: sticky; top: 0; z-index: 20;
  height: calc(var(--top-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.sh-brand { display: flex; align-items: center; min-width: 0; min-height: 40px; }
.sh-brand .logo { display: block; height: 18px; width: auto; }
.pills { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pill {
  display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--text);
  font-size: 12px; font-weight: 400; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.pill.ghost { background: transparent; border-color: transparent; color: var(--accent-text); font-weight: 400; }
.av {
  width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff;
  display: grid; place-items: center; font: 500 12px/1 var(--font-text); text-decoration: none; flex: none;
}
.sh-side, .sh-right { display: none; }
.sh-main {
  min-width: 0; outline: none;
  padding: 12px max(12px, env(safe-area-inset-right, 0px)) calc(var(--tabs-h) + 20px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  display: flex; flex-direction: column; gap: 10px;
}

/* Нижнее меню (телефон): четыре пункта, над home-indicator */
.sh-tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: calc(var(--tabs-h) + env(safe-area-inset-bottom, 0px));
  padding: 0 max(8px, env(safe-area-inset-left, 0px)) env(safe-area-inset-bottom, 0px) max(8px, env(safe-area-inset-right, 0px));
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--surface); border-top: 1px solid var(--line);
}
.sh-tab {
  display: grid; place-items: center; align-content: center; gap: 2px;
  min-height: 44px; margin: 4px 0; border-radius: 12px;
  font: 400 10.5px/1.1 var(--font-text); color: var(--soft); text-decoration: none;
}
.sh-tab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sh-tab[aria-current="page"] { color: var(--accent-text); }

/* Иконки меню, карточек и шагов: мягкий квадрат с линейным значком */
.ic-sq { display: grid; place-items: center; flex: none; background: var(--icon-bg); border-radius: 7px; width: 22px; height: 22px; }
.ic-sq svg, .tic svg, .btn-ic svg, .sh-tab svg {
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.ic-sq svg { width: 13px; height: 13px; color: var(--accent-text); }
.tic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--icon-bg); color: var(--accent-text); }
.tic svg { width: 16px; height: 16px; }

/* Метки: моно, заглавные (10.5 px) */
.glab { font: 400 10.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); padding: 10px 8px 6px; }
.tag {
  flex: none; display: inline-flex; align-items: center; font: 400 10.5px/1 var(--font-mono); color: var(--soft);
  border: 1px solid var(--line-soft); border-radius: 99px; padding: 3px 7px; white-space: nowrap;
}
.tag.free { color: var(--ok); border-color: #b9d3bd; }

.cta {
  height: 40px; padding: 0 18px; border-radius: 12px; border: 0; background: var(--accent); color: #fff;
  font: 500 14px/1 var(--font-text); display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.cta.ghost { background: var(--surface); color: var(--text); border: 1px solid var(--line); }
.cta:disabled { cursor: progress; opacity: .55; }
.cta-sm { height: 34px; font-size: 13px; width: 100%; }

/* ── Главная: загрузка, строка консультанта, карточки инструментов ── */
.up { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px; display: grid; gap: 10px; }
.up .eyebrow { font-size: 10.5px; }
/* Список инструментов на главной в исходном HTML (до скриптов, 23.10): сетка, кадры фиксированного
   соотношения сторон — без горизонтального скролла и прыжков; облик D — рамка 1px, без теней, вес ≤500 */
.mm-home-tools { margin-top: 14px; min-width: 0; }
.mm-home-tools h2 { font: 500 15px/1.2 var(--font-text); margin: 0 0 10px; }
.mm-home-tools__list { list-style: none; margin: 0; padding: 0; min-width: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.mm-home-tools__list li { min-width: 0; }
.mm-home-tools__list a { display: block; min-width: 0; overflow: hidden; color: var(--text); text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.mm-home-tools__list img { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 800; object-fit: cover; }
.mm-home-tools__list span { display: block; padding: 8px 10px; font: 500 13px/1.3 var(--font-text); overflow-wrap: anywhere; }
.up h1 { margin-top: 4px; }
.drop {
  width: 100%; min-height: 72px; display: flex; align-items: center; gap: 12px; text-align: left;
  border: 1px dashed var(--line); border-radius: 12px; padding: 14px; background: transparent; color: var(--text);
  font: inherit; cursor: pointer;
}
.drop.is-over { background: var(--icon-bg); border-color: var(--accent-text); }
.drop .min0 { display: grid; gap: 4px; min-width: 0; flex: 1 1 auto; }
.drop .t { font-weight: 500; font-size: 15px; line-height: 1.25; min-width: 0; max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
.drop .s { font: 500 11px/1.3 var(--font-mono); color: var(--soft); min-width: 0; max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
.drop .cta { margin-left: auto; }
.btn-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--accent); display: grid; place-items: center; flex: none; color: #fff; }
.btn-ic svg { width: 22px; height: 22px; }
.ai {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 10px;
  background: var(--icon-bg); color: var(--text); font-size: 13px; font-weight: 500; text-decoration: none; min-width: 0;
}
.ai > span:first-child { flex: none; }
.ai > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai > span:last-child { margin-left: auto; color: var(--accent-text); white-space: nowrap; flex: none; }
.row-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 4px; }
.row-h h2 { font: 500 15px/1.3 'IBM Plex Sans', system-ui, sans-serif; }
.row-h a { font-size: 12.5px; color: var(--accent-text); font-weight: 500; text-decoration: none; white-space: nowrap; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tcard {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color: var(--text); text-decoration: none;
}
.tcard .tx { min-width: 0; flex: 1; display: grid; gap: 2px; }
.tcard .n { font-weight: 500; font-size: 13.5px; line-height: 1.25; }
.tcard .d { font-size: 12px; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-story { display: none; }

/* ── Правая колонка (компьютер): путь трека, история, «Потом можно» ── */
.rh { font: 500 15px/1.3 'IBM Plex Sans', system-ui, sans-serif; margin: 0; }
/* Имена файлов: дорожки сетки и флекса — minmax(0,1fr) и min-width:0, длинное имя переносится (21.10, Android: 972 px вместо 360) */
.story { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; max-width: 100%; }
.story .tn { font-weight: 500; font-size: 13px; min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
.story .when { font: 500 10.5px/1.3 var(--font-mono); color: var(--soft); }
.path { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; max-width: 100%; }
.step { font-size: 11px; font-weight: 400; padding: 3px 7px; border-radius: 99px; border: 1px solid var(--line); background: var(--bg); white-space: nowrap; }
.step.done { background: #e7f0e7; border-color: #b9d3bd; color: var(--ok); }
.step.done::before { content: ''; display: inline-block; width: 7px; height: 7px; background: var(--ok); margin-right: 5px; }
.step.next { background: var(--accent); border-color: var(--accent); color: #fff; }
.arrow { color: var(--soft); font-size: 11px; }
.hist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 0; max-width: 100%; }
.hi { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 7px 4px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; min-width: 0; max-width: 100%; }
.hi .nm { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.hi .what { color: var(--soft); font-size: 11.5px; min-width: 0; overflow-wrap: anywhere; }
/* Пояснение «файл не хранится» в строке истории переносится, не уходит за правый край (компьютер) */
.hi .go.muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; min-width: 0; text-align: right; color: var(--accent-text); opacity: .82; }
/* Колонка «Путь трека» справа (компьютер): строка истории в один столбец — имя, действие, инструмент и дата */
.sh-right .hi { grid-template-columns: minmax(0, 1fr); }
.sh-right .hi .go { grid-row: auto; justify-self: start; max-width: 100%; text-align: left; }
.sh-right .hi .go.muted { text-align: left; }
.hi .go { grid-row: span 2; align-self: center; color: var(--accent-text); font-weight: 400; font-size: 12px; text-decoration: none; white-space: nowrap; }
/* «Скачать» в истории: тихая текстовая кнопка со стрелкой справа в строке с названием (десктоп, основная колонка) */
html body .hi a.dl-ic, html body .story a.dl-ic {
  display: inline-flex; align-items: center; justify-self: end; align-self: start; box-sizing: border-box; flex: none;
  grid-row: auto; height: 30px; padding: 0 10px; gap: 6px; border: 1px solid var(--line); border-radius: 9px;
  background: transparent; color: var(--soft); font: 500 13px/1 var(--font-text); white-space: nowrap; text-decoration: none; cursor: pointer;
}
html body .hi a.dl-ic:hover, html body .story a.dl-ic:hover { color: var(--accent-text); border-color: var(--accent); }
.dl-ic .ic-dl { display: block; width: 14px; height: 14px; flex: none; }
/* Правая колонка «История» (узкая, компьютер): только пиктограмма 28×28 справа от «название + мета», в одной строке */
.sh-right .hi:has(.dl-ic) { grid-template-columns: minmax(0, 1fr) auto; }
html body .sh-right .hi a.dl-ic { grid-row: span 2; align-self: center; width: 28px; height: 28px; padding: 0; justify-content: center; }
.sh-right .dl-ic .ic-dl { width: 15px; height: 15px; }
.sh-right .dl-ic .dl-lbl { display: none; }
.hi:has(.dl-ic) .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Карточка «История» (строка с именем, датой и кнопкой в одной строке) */
.story-h { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; min-width: 0; max-width: 100%; }
.story-t { min-width: 0; }
.story-h .tn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; word-break: normal; }
/* Телефон: пиктограмма 36×36 в правом верхнем углу карточки, подпись скрыта */
@media (max-width: 639px) {
  html body .hi a.dl-ic, html body .story a.dl-ic { width: 36px; height: 36px; padding: 0; justify-content: center; }
  .dl-ic .ic-dl { width: 18px; height: 18px; }
  .dl-ic .dl-lbl { display: none; }
}
.stat { font: 500 11px/1.3 var(--font-mono); color: var(--soft); }
.hint { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 13px; line-height: 1.4; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.hint-link { color: var(--accent-text); font-weight: 500; white-space: nowrap; }
.rlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rlist a { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); text-decoration: none; font-weight: 500; font-size: 13px; }

/* ── Крошки экрана инструмента и кадр страницы ── */
.crumb { display: flex; align-items: center; gap: 8px; min-width: 0; }
.back {
  flex: none; height: 32px; min-width: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--text); display: inline-flex; align-items: center; justify-content: center;
  gap: 4px; font: 500 13px/1 var(--font-text); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.crumb .ttl { font: 500 17px/1.2 var(--font-head); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumb .tag { margin-left: auto; }
.frame { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; min-width: 0; }
.frame iframe { display: block; width: 100%; height: 640px; border: 0; background: transparent; }
.later-m { display: none; }

/* ── Кабинет, пополнение, история ── */
.acc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; max-width: 100%; }
/* Колонка экрана не шире экрана: прямые дети флекса и сетки могут сжиматься (длинные имена файлов) */
.sh-main > *, .sh-main .stack > *, .ts-done-h > * { min-width: 0; max-width: 100%; }
.ts-done-h > .mono { overflow-wrap: anywhere; word-break: break-word; }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; font-size: 14px; align-items: baseline; }
.kv dt { color: var(--soft); }
.kv dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
/* Состояния строк отчёта (tool-screen.js: row.state) — цвет текста, без фонов и теней */
.kv dd.is-ok { color: var(--ok); }
.kv dd.is-warn { color: var(--warn); }
.kv dd.is-bad { color: var(--bad); }
.kv .rep-hint { display: block; font-weight: 400; font-size: 13px; }
.rep-title { margin: 0 0 8px; }
.rep-sum { margin: 0 0 12px; font-weight: 500; }
.rep-sum.is-ok { color: var(--ok); }
.rep-sum.is-warn { color: var(--warn); }
.rep-sum.is-bad { color: var(--bad); }
.rep-list { margin: 12px 0 0; padding-left: 18px; line-height: 1.6; color: var(--soft); }
.rep-note { margin: 10px 0 0; }
.rep-links { margin-top: 12px; }
/* Пункты с источниками (24.10, «ИИ-маркировка»): тонкая рамка, без теней; статус — текстом и цветом токена */
.rep-items { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.rep-item { border: 1px solid var(--line-soft); border-radius: 12px; padding: 10px 12px; min-width: 0; background: var(--surface); }
.rep-item-h { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 10px; flex-wrap: wrap; }
.rep-item p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.rep-st { font-size: 12px; white-space: nowrap; color: var(--soft); }
.rep-item.is-todo .rep-st { color: var(--warn); }
.rep-item.is-info .rep-st { color: var(--soft); }
.rep-src { font-size: 12.5px !important; line-height: 1.5 !important; }
.rep-src a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.ts-adv-wrap { margin: 0; }
.ts-adv { display: inline-block; font-size: 14px; color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.ts-mod-host { min-height: 240px; }
/* Клип на трек (tools/clip.js, макет раздел 5): плитки выбора — рамкой, без теней */
.clp-block { padding: 2px 0; }
.clp-seg, .clp-fmts, .clp-styles { display: grid; gap: 6px; }
.clp-seg { grid-template-columns: 1fr 1fr; }
.clp-fmts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.clp-styles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.clp-tile { border: 1px solid var(--line); border-radius: 10px; padding: 8px 4px; background: var(--surface); color: var(--text); font: 500 12px/1.25 var(--font-text); text-align: center; cursor: pointer; display: grid; justify-items: center; align-content: center; gap: 4px; min-width: 0; }
.clp-tile[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-text); outline: 1px solid var(--accent); outline-offset: -2px; }
.clp-tile i { display: block; border: 1.5px solid currentColor; border-radius: 3px; }
.clp-sty { padding: 0 0 6px; overflow: hidden; }
.clp-sw { height: 40px; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; padding: 4px; box-sizing: border-box; background: var(--bg); }
.clp-sw i { width: 3px; background: var(--accent); border-radius: 1px; border: 0; }
.clp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.clp-cover { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.clp-cover .img { width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(135deg, #f0b49c, #c93a14); flex: none; }
.clp-frame { position: relative; width: 100%; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--bg); }
.clp-stages { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.clp-stages .is-done { color: var(--ok); }
.clp-stages .is-cur { color: var(--accent-text); font-weight: 500; }
.clp-upsell { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border: 1px solid var(--accent); border-radius: 12px; padding: 10px 12px; background: var(--icon-bg); margin-top: 12px; }
.clp-upsell .n { font-weight: 500; font-size: 14px; }
.clp-upsell .muted { font-size: 13px; }
.clp-up-cta { margin-left: auto; white-space: nowrap; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-row .cta { flex: 1 1 140px; }
.lang-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Каталог ── */
.cat-head { display: grid; gap: 12px; }
.cat-group { margin-top: 16px; }
.cat-group h2 { font: 500 12px/1.2 var(--font-mono); color: var(--soft); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 8px; }
.empty { padding: 24px 0; color: var(--soft); text-align: center; }

/* ── Компьютер ── */
@media (min-width: 1024px) {
  .sh {
    grid-template-columns: var(--side-w, 280px) minmax(0, 1fr) 260px;
    grid-template-rows: 48px minmax(0, 1fr);
  }
  .sh-top { grid-column: 1 / -1; grid-row: 1; height: 48px; padding: 0 16px; }
  .sh-brand .logo { height: 22px; }
  .pill-wide { display: inline-flex; }
  .sh-side {
    display: block; grid-column: 1; grid-row: 2; position: sticky; top: 48px;
    height: calc(100vh - 48px); overflow-y: auto; padding: 12px 8px;
    border-right: 1px solid var(--line);
  }
  .sh-main { grid-column: 2; grid-row: 2; padding: 16px; gap: 12px; }
  .sh-right {
    display: flex; flex-direction: column; gap: 10px; grid-column: 3; grid-row: 2; position: sticky; top: 48px;
    height: calc(100vh - 48px); overflow-y: auto; overflow-x: hidden; padding: 14px 12px; border-left: 1px solid var(--line);
    min-width: 0;
  }
  /* Длинные имена треков не распирают колонку (20.10: «Маяк - Позывные 2_mastered…» давал прокрутку вбок) */
  .sh-right > *, .story > * { min-width: 0; max-width: 100%; }
  .sh-right .btn, .sh-right a.cta, .story .btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sh-tabs { display: none; }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .m-only { display: none !important; }
  .m-story { display: none !important; }
  .later-m { display: none !important; }
}
/* Меню слева: пункты 34 px */
.nav {
  display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 8px; border-radius: 10px; border: 1px solid transparent;
  font-size: 13.5px; font-weight: 500; color: var(--text); text-decoration: none;
}
.nav[aria-current="page"] { background: var(--surface); border-color: var(--line); font-weight: 400; }
.nav .lim { margin-left: auto; font: 500 10.5px/1 var(--font-mono); color: var(--soft); white-space: nowrap; }
.nav .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-side .nav { margin-top: 2px; }
@media (max-width: 1023px) {
  .pill-wide { display: none !important; }
  .drop .cta { display: none; }
  .sh-main .d-only { display: none !important; }
  .m-story { display: grid; }
  .cards { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .tcard { min-height: 52px; padding: 8px 10px; }
  .cards-home > :nth-child(n + 5) { display: none; }
  .later-m { display: grid; gap: 6px; }
  .frame iframe { height: 560px; }
  .back-lbl { display: none; }
  .sh-tab { min-height: 44px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards-home > :nth-child(n + 5) { display: flex; }
  .cards-home > :nth-child(n + 7) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ring .bar { transition: none; }
}

/* ── UI-кит экранов инструментов (tool-screen.js: MMToolScreen.ui; docs/plans/app-tools-ui-kit-2026-10-20.md) ── */
/* Зона файла после выбора: значок файла на мягком квадрате, «Другой файл» — ghost */
.drop.has .btn-ic { background: var(--icon-bg); color: var(--accent-text); }
/* Карточки выбора — это .tcard главной: выбранная — рамка акцентом и акцентный заголовок */
button.tcard { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.tcard.ui-choice { min-height: 52px; }
.tcard.is-sel { border-color: var(--accent); }
.tcard.is-sel .n { color: var(--accent-text); }
/* Посадочная с экраном приложения (app_at_landing, 23.10): страница сайта подключает mm-beta-d2.css, где .tcard
   облика D — тёплый «прибор» с винтами по углам (радиальные кружки). Это давало два кружка справа и один слева на
   каждой карточке выбора режима. Сброс только внутри экрана инструмента на посадочной (.mm-tool-slot = #toolHost),
   на /app и в самом приложении ничего не меняется. Селекторы с html body — перекрывают (0,2,1) облика D. */
html body .mm-tool-slot .tcard { background-image: none; background-color: var(--surface); box-shadow: none; border-color: var(--line); }
html body .mm-tool-slot .tcard:hover { box-shadow: none; }
html body .mm-tool-slot .tcard.is-sel { border-color: var(--accent); }
/* Кнопки экрана (.cta) — та же «панель» облика D с винтами: сброс к фону кнопки приложения */
html body .mm-tool-slot .cta { background-image: none; background-color: var(--accent); box-shadow: none; }
html body .mm-tool-slot .cta.ghost { background-color: var(--surface); }
.cards.ui-choices.is-two, .cards.ui-choices.is-three { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .cards.ui-choices.is-two, .cards.ui-choices.is-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards.ui-choices.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Пилюли (переключатели и чипы): высота 30, 12.5 px, по содержимому; выбранная — акцент, без чёрного */
.ui-seg { display: inline-flex; flex-wrap: wrap; gap: 6px; max-width: 100%; justify-self: start; }
.ui-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; justify-self: start; max-width: 100%; }
.ui-seg-b, .chip.ui-chip {
  width: auto; height: 30px; min-height: 30px; padding: 0 12px; border-radius: 99px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  font: 500 12.5px/1 var(--font-text); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; white-space: nowrap;
}
.ui-seg-b.is-sel, .chip.ui-chip.is-sel, .chip.ui-chip[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
/* Поля: подпись и поле — как у главной */
.ui-field { display: grid; gap: 6px; min-width: 0; }
.ui-field .lbl { font: 500 12.5px/1.2 var(--font-text); }
select.ui-select {
  appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23665c50' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px;
}
input.ui-input { min-height: 40px; font-size: 15px; }
/* Тексты: подсказка — мягкая строка 13 px; примечание — моно 11 px (только квоты и лимиты) */
.ui-hint { margin: 0; font: 400 13px/1.4 var(--font-text); color: var(--soft); }
.ui-note { margin: 0; font: 500 11px/1.3 var(--font-mono); color: var(--soft); }
/* Группа: подпись 12.5 px полужирно */
.ui-sec { display: grid; gap: 8px; min-width: 0; }
.ui-sec + .ui-sec { margin-top: 6px; }
.ui-rows { display: grid; gap: 6px; min-width: 0; }
.ui-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; min-width: 0; }
.ui-row.on { border-color: var(--accent); }
.ui-row .ui-rv { font: 500 12.5px var(--f-mono); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; min-width: 0; }
.ui-row .ui-rt { flex: 1 1 140px; min-width: 0; font-weight: 500; font-size: 13.5px; }
.ts-result-act { margin-top: 12px; }
.ts-result-act ~ .ui-sec { margin-top: 12px; }
.ui-sec-t { margin: 0; font: 500 12.5px/1.2 var(--font-text); color: var(--text); }
.ui-sec-b { display: grid; gap: 8px; min-width: 0; }
.ui-advice { display: grid; gap: 10px; }
.ui-advice-t { margin: 0; font-size: 14px; line-height: 1.4; }

input[type="range"] { accent-color: var(--accent); }

/* ── Общие блоки (прежние: tool-screen.js, модули инструментов) ───── */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 16px; min-width: 0;
}
.card + .card { margin-top: 12px; }
.muted { color: var(--soft); font-size: 14px; }
.mono { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.01em; }
.eyebrow { font: 400 12px/1.2 var(--font-mono); color: var(--accent-text); letter-spacing: 0.04em; text-transform: uppercase; }
.row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.stack { display: grid; gap: 12px; min-width: 0; }
.sec-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 22px 0 10px; }
.sec-title h2 { font-size: 16px; }
.sec-title a { font-size: 14px; font-weight: 500; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--line);
  font: 500 14px/1 var(--font-text); text-decoration: none; cursor: pointer; text-align: center; white-space: nowrap;
  background: var(--surface); color: var(--text);
}
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-block { width: 100%; }
/* Кнопки экранов инструментов — только .cta (основная) и .cta.ghost (второстепенная): без серых состояний */
.cta-block { width: 100%; }
.btn-link { border: 0; background: transparent; color: var(--accent-text); padding: 0 4px; min-height: 44px; font-weight: 500; cursor: pointer; }

.ico {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; background: var(--icon-bg); color: var(--accent-text);
}
.ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.badge {
  display: inline-flex; align-items: center; min-height: 24px; padding: 2px 8px; border-radius: 8px;
  border: 1px solid var(--line); font: 500 12px/1 var(--font-mono); color: var(--soft); white-space: nowrap;
}

.field { display: grid; gap: 6px; }
.field label, .field .lbl { font-weight: 400; font-size: 14px; }
.input {
  width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--text); font: 500 16px/1.2 var(--font-text);
}
.input::placeholder { color: var(--soft); opacity: 1; }

.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; min-height: 44px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); font: 500 14px/1 var(--font-text); cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }

/* Оценка результата и «Предложить улучшение» (21.10, облик D: плоско, рамки 1 px, без теней).
 * Цвета — только токены, чтобы Echoteka перекрасила их своей темой. */
.fb-band { border-top: 1px solid var(--line-soft); padding-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
.fb-lab { font: 400 10.5px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.fb-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 99px; padding: 2px; gap: 2px; background: var(--bg); }
.fb-segb { appearance: none; border: 1px solid transparent; background: transparent; color: var(--text); height: 30px; min-width: 44px; padding: 0 12px;
  border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 500 12.5px var(--font-text); cursor: pointer; }
.fb-segb:hover { border-color: var(--accent); }
.fb-segb.is-on { background: var(--accent); color: #fff; }
.fb-wv { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex: none; }
.fb-wv rect { fill: currentColor; stroke: none; transform-box: fill-box; transform-origin: center; }
.fb-segb.is-on .fb-wv rect { animation: fb-bounce .5s ease-out; }
@keyframes fb-bounce { 0% { transform: scaleY(.25); } 60% { transform: scaleY(1.08); } 100% { transform: scaleY(1); } }
.fb-rneg { flex-basis: 100%; display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: var(--bg); min-width: 0; }
.fb-rneg-h { font-size: 12.5px; font-weight: 400; }
.fb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fb-chip { appearance: none; height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface);
  color: var(--text); font: 500 12.5px var(--font-text); cursor: pointer; }
.fb-chip.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.fb-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-rneg textarea { font: 400 13px var(--font-text); color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; width: 100%; min-width: 0; resize: vertical; }
.fb-lab-b, .fb-rneg .ui-lab { font: 400 10.5px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.fb-sg { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.fb-form { display: grid; gap: 8px; }
.fb-form select, .fb-form input, .fb-form textarea { font: 400 13px var(--font-text); color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; width: 100%; min-width: 0; }
.fb-form input, .fb-form select { height: 36px; padding: 0 10px; }
.fb-form textarea { resize: vertical; }
.fb-form .fb-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.fb-link { font-size: 13px; }
.fb-foot { margin-top: auto; border-top: 1px solid var(--line-soft); padding-top: 8px; }
.fb-foot .nav { color: var(--accent-text); font-weight: 400; min-height: 38px; }
.fb-foot .nav .ic-sq { background: var(--accent); color: #fff; }
.fb-sg { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.fb-sg b { font-size: 14px; }
.notice { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; }
.notice.is-bad { border-color: var(--bad); color: var(--bad); }
.notice.is-ok { border-color: var(--ok); color: var(--ok); }


/* ── Экран инструмента ─────────────────────────────────── */
.ts { display: grid; gap: 14px; min-width: 0; }
.ts-head { display: flex; gap: 12px; align-items: center; min-width: 0; }
.ts-head h1 { font-size: 22px; }
/* Пополнение (/app/topup): заголовок экрана как у инструментов, без иконки; отступ до блока кошелька */
.tp-head { margin: 4px 0 14px; }
.tp-head .eyebrow { margin-bottom: 6px; }
.ts-steps {
  list-style: none; margin: 0; padding: 0; height: auto; max-height: 32px; min-width: 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
  font: 500 11px/1 var(--font-mono); color: var(--soft);
}
.ts-step { display: inline-flex; align-items: center; gap: 4px; height: 24px; white-space: nowrap; }
.ts-step b { font: 500 11px/1 var(--font-mono); }
.ts-step.is-cur { color: var(--accent-text); font-weight: 500; }
.ts-step.is-done { color: var(--ok); }
.ts-sep { color: var(--line); }
.ts-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ts-settings { display: grid; gap: 14px; }
.ts-up { padding: 12px; }
.ts-done { display: grid; gap: 12px; }
.ts-done-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ts-info { margin-top: 0; }
.ts-next { display: grid; gap: 8px; min-width: 0; }
.ts-next .ui-hint { margin-bottom: 2px; }

/* LEGACY до миграции модулей на кит (docs/plans/app-tools-ui-kit-2026-10-20.md): новые модули — ui.choices / ui.segmented / ui.chips */
.opt-group { display: grid; gap: 8px; }
.opt { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; }
.opt input { margin-top: 3px; width: 20px; height: 20px; accent-color: var(--accent); flex: 0 0 auto; }
.opt span { display: grid; gap: 2px; min-width: 0; }
.opt small { font-size: 13px; color: var(--soft); }

.stepper { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; align-items: center; }
.stepper button {
  min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  font: 500 20px/1 var(--font-text); color: var(--text); cursor: pointer;
}
.stepper output { text-align: center; font: 400 22px/1 var(--font-mono); }

/* Панель обработки: кольцо, этапы, отсчёт (шаг 2 экрана инструмента) */
.prog { display: grid; gap: 16px; justify-items: center; text-align: center; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.ring { position: relative; width: 140px; height: 140px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 10; }
.ring .track { stroke: var(--line); }
.ring .bar { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .5s linear; }
.ring .pct { position: absolute; inset: 0; display: grid; place-items: center; font: 500 26px/1 var(--font-mono); }
.prog-stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; width: 100%; text-align: left; }
.prog-stages li { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--soft); min-height: 28px; }
.prog-stages li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--line); flex: 0 0 auto; }
.prog-stages li.is-done { color: var(--text); }
.prog-stages li.is-done::before { background: var(--ok); border-color: var(--ok); }
.prog-stages li.is-cur { color: var(--accent-text); font-weight: 500; }
.prog-stages li.is-cur::before { background: var(--accent); border-color: var(--accent); }
.prog-note { font: 500 13px/1.4 var(--font-mono); color: var(--soft); }

.player { width: 100%; min-height: 44px; }
.next-grid { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.next-card {
  display: flex; gap: 12px; align-items: center; min-height: 56px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: var(--r-lg); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; font: inherit; width: 100%;
}
.next-card .t-name { font-weight: 500; }
.next-card .t-sub { font-size: 13px; color: var(--soft); }


/* ── ИИ-консультант: светлая строка в карточке мастеринга (19.10) и чат ──── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.as { display: grid; gap: 4px; min-width: 0; }
.as-log { min-height: 140px; max-height: 52vh; overflow-y: auto; display: grid; align-content: start; gap: 10px; margin-top: 4px; }
.as-msg { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); white-space: pre-wrap; max-width: 92%; font-size: 15px; }
.as-user { justify-self: end; background: var(--icon-bg); }
.as-bot { justify-self: start; background: var(--bg); }
.as-form { display: grid; gap: 8px; margin-top: 10px; }
.as-path { margin-top: 12px; display: grid; gap: 10px; }
.as-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.as-steps li { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.as-n {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 10px; background: var(--icon-bg); color: var(--accent-text);
  display: grid; place-items: center; font: 500 13px/1 var(--font-mono);
}

/* ── Кит v2 (20.10, правила владельца): один облик с главной, компактные поля, цены ──────────
 * Правила: до файла — только зона файла, подсказка и заметка; файловые блоки — data-when="file" (скрыты до файла);
 * подпись группы — только ui.section; поля 36 px и 120 px по ширине (свободный текст — wide); кнопки — auto-width,
 * на телефоне на всю ширину только старт (.ts-start). */
.ts-settings[data-has-file="1"] [data-when="nofile"],
.ts-settings:not([data-has-file="1"]) [data-when="file"] { display: none !important; }
.ui-field { display: grid; gap: 0; min-width: 0; }
.ui-fi { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.ui-fi-l { font: 400 12.5px/1.2 var(--font-text); color: var(--text); white-space: nowrap; }
input.ui-input {
  width: 120px; max-width: 100%; height: 36px; min-height: 36px; padding: 0 10px; border-radius: 10px;
  font: 500 13px/1.2 var(--font-text); border: 1px solid var(--line); background: var(--surface); color: var(--text);
}
input.ui-input.num { font-family: var(--font-mono); }
input.ui-input.wide { width: 100%; }
select.ui-select {
  height: 36px; min-height: 36px; width: 200px; max-width: 100%; padding: 0 34px 0 10px; border-radius: 10px;
  font: 500 13px/1.2 var(--font-text); background-position: right 9px center; background-size: 14px 14px;
}
textarea.ui-area {
  display: block; width: 100%; min-height: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); font: 400 13px/1.4 var(--font-text); resize: vertical;
}
.ui-range { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ui-range input[type="range"] { flex: 0 1 260px; min-width: 0; }
.ui-range-v { font: 500 12.5px/1 var(--font-mono); color: var(--text); white-space: nowrap; }
/* Кнопка-таймер TAP: квадратная, не на всю ширину */
.cta.ui-tap { min-width: 120px; height: 64px; font: 500 18px/1 var(--font-mono); padding: 0 22px; }
.ui-tap-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ui-tap-val { font: 500 22px/1 var(--font-mono); color: var(--text); min-width: 96px; }
/* Волна обрезки: рамка 1 px, фон поверхности, радиус 12 (без inline-стиля) */
.ui-wave { display: block; width: 100%; height: 120px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); touch-action: none; cursor: ew-resize; }
/* Строка под волной: поля Начало/Конец, длина, предпрослушивание */
.ui-frow { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; min-width: 0; }
.ui-len { font: 500 12.5px/1 var(--font-mono); color: var(--soft); white-space: nowrap; }
/* Ценовая метка на карточке выбора (.tag) уже есть; заголовок кнопки старта — с ценой в тексте */
@media (max-width: 599px) {
  .ts-actions > .ts-start { width: 100%; }
  .ui-frow > .ui-fi { flex: 1 1 140px; }
}
/* Кадр клипа по формату (data-fmt): размеры кадра и видео — из класса, без inline-стиля (tools/clip.js) */
.clp-frame[data-fmt="9:16"] { aspect-ratio: 9 / 16; max-width: 240px; margin: 0 auto; }
.clp-frame[data-fmt="1:1"] { aspect-ratio: 1 / 1; max-width: 280px; margin: 0 auto; }
.clp-frame[data-fmt="16:9"] { aspect-ratio: 16 / 9; max-width: 360px; margin: 0 auto; }
.clp-canvas, .clp-frame > video { width: 100%; height: 100%; display: block; }
/* Меню: одна строка 34 px — имя и короткая цена справа (моно 10.5 px); название режется, только если меню уже */
.nav { flex-wrap: nowrap; height: 34px; padding: 0 6px; gap: 6px; }
.nav .nm { flex: 1 1 auto; }
.nav .lim { flex: none; margin-left: auto; padding-left: 4px; font-size: 10.5px; line-height: 1; white-space: nowrap; }
/* Карточки главной, «Потом можно» и выбора: цена справа; на узкой карточке переносится под название, не режется */
.tcard { flex-wrap: wrap; }
.tcard .n { overflow: hidden; text-overflow: ellipsis; }
.tcard .tx { flex: 1 1 0; min-width: 120px; }
.tcard > .tag, .tcard > .tx + .tag { margin-left: auto; flex: none; white-space: nowrap; }

/* Ручка ширины левого меню (компьютер ≥1024 px, shell.js initSideResize): 6 px зона, тонкая линия акцентом */
.sh-rs { display: none; }
@media (min-width: 1024px) {
  .sh-rs {
    display: block; position: sticky; top: 48px; grid-column: 1; grid-row: 2; justify-self: end; align-self: start;
    width: 6px; height: calc(100vh - 48px); margin-right: -3px; z-index: 3; cursor: col-resize; touch-action: none;
    outline: none;
  }
  .sh-rs::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -.5px; background: transparent; }
  .sh-rs:hover::after, .sh-rs.is-drag::after { background: var(--accent); }
  .sh-rs:focus-visible::after { background: var(--accent); }
  .sh-rs:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 0; }
}

/* ИИ-обложка клипа (tools/clip.js, 20.10): панель на всю строку; варианты — карточки с кадром формата */
.cta.cta-s { height: 34px; padding: 0 14px; font-size: 13px; }
.clp-ai { flex: 0 0 100%; display: grid; gap: 10px; min-width: 0; }
.clp-ai-cards { grid-template-columns: repeat(2, minmax(0, 150px)); justify-content: start; gap: 8px; }
.clp-ai-card { display: block; min-height: 0; padding: 6px; }
.clp-ai-card img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; background: var(--bg); }
.clp-ai-card[data-fmt="9:16"] img { aspect-ratio: 9 / 16; }
.clp-ai-card[data-fmt="16:9"] img { aspect-ratio: 16 / 9; }
.clp-ai-link { color: var(--accent-text); font-weight: 500; white-space: nowrap; margin-left: 6px; }

/* 20.10: кнопка прямо в настройках модуля (напр. «Войти и выровнять») — по ширине текста, не на всю ширину */
.ts-mod-host > .cta, .ts-mod-host > a.cta, .ts-mod-host .ui-section > .cta, .ts-mod-host .ui-section > a.cta { justify-self: start; align-self: flex-start; width: auto; max-width: 100%; }

/* 21.10: кнопка «Купить» в кабинете — шапка «Баланс N · Купить», пункт меню, карточка после «Звучит».
   Облик D: плоско, 1 px, без теней. Призрак при балансе 2+, акцент при 0–1. */
.pill.buyc { color: var(--accent-text); font-weight: 400; }
.pill.buyc .bb { color: var(--accent-text); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* 21.10, фаза 1 — жетон «Жетон пульта» (вариант А): знак + моно-счётчик + «токенов» + «Купить».
   Знак — MMToken.svg (token-mark.js): обводка 1.6, квадратные концы. Низкий баланс (0–1) — янтарный знак и счётчик
   (вариант Б); «Купить» закрашен акцентом. Echoteka: --tk-ink #0a7a45 на светлом, #7cffb2 на тёмном. */
[data-brand="echoteka"] { --tk-ink: #0a7a45; }
[data-brand="echoteka"][data-theme="dark"] { --tk-ink: #7cffb2; }
.tk-mark { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; flex: none; display: inline-block; vertical-align: middle; }
.tk-mark path, .tk-mark circle { fill: none; }
.pill.buyc.tkh { gap: 6px; height: 30px; padding: 0 9px 0 7px; border-radius: 6px; color: var(--text); font-weight: 400; }
.tkh-mk { color: var(--tk-ink, var(--accent-text)); }
.tkh-n { display: inline-block; font: 500 13px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text); }
.tkh-l { color: var(--soft); font-weight: 500; white-space: nowrap; }
.pill.buyc.tkh .bb { color: var(--accent-text); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.pill.buyc.tkh.low { background: var(--surface); border-color: var(--warn); }
.pill.buyc.tkh.low .tkh-mk, .pill.buyc.tkh.low .tkh-n { color: var(--warn); }
.pill.buyc.tkh.low .bb { background: var(--accent); color: #fff; padding: 2px 7px; border-radius: 4px; text-decoration: none; }
.pill.buyc.tkh.roll .tkh-n { animation: tkRoll .24s cubic-bezier(.2, .7, .2, 1); }
.pill.buyc.tkh.bonus .tkh-mk { animation: tkPulse .42s ease-out; }
@keyframes tkRoll { from { transform: translateY(60%); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes tkPulse { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .pill.buyc.tkh .tkh-n, .pill.buyc.tkh .tkh-mk { animation: none !important; }
}

/* ИИ-метка вместо «✦» (баннер «Спросить ИИ») */
.ai-tag { display: inline-block; font: 500 10.5px/1 var(--font-mono); letter-spacing: .06em; border: 1px solid currentColor; border-radius: 3px; padding: 3px 4px; }

/* Шаги инструмента: номер в квадрате 16 px; пройден — залит, текущий — акцентная рамка (без галочки-глифа) */
.ts-step b { display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1px solid var(--line); border-radius: 3px; font: 500 10px/1 var(--font-mono); color: var(--soft); }
.ts-step.is-cur b { border-color: var(--accent-text); color: var(--accent-text); }
.ts-step.is-done b { background: var(--ok); border-color: var(--ok); color: #fff; }
.buy-side { margin: 6px 0 4px; border-top: 1px solid var(--line-soft); padding-top: 6px; }
.nav.buy { color: var(--accent-text); font-weight: 500; }
.nav.buy .lim { color: var(--accent-text); }
.buy-offer { display: grid; gap: 6px; border-color: var(--accent); }
.buy-offer .bo-big { font: 500 15px/1.25 var(--font-head, inherit); }
.buy-offer p { margin: 0; }
.buy-offer .bo-acts { margin-top: 4px; }

/* Посадочная с экраном приложения (app_at_landing, 21.10): H1 и экран инструмента, под ним SEO-блок */
.mm-landing { display: flex; flex-direction: column; gap: 14px; min-width: 0; width: 100%; max-width: 980px; }
.mm-landing h1 { font: 400 clamp(22px, 3vw, 30px)/1.2 var(--font-head); margin: 0; overflow-wrap: anywhere; }
.mm-landing p, .mm-landing li { overflow-wrap: anywhere; }
.mm-tool-slot { min-width: 0; }
.mm-landing, .mm-landing * { min-width: 0; max-width: 100%; box-sizing: border-box; }
.mm-landing img { height: auto; }
/* Хлебные крошки посадочной (ol.ds-crumbs из шапки страницы) — как на остальных страницах облика D (mm-ds.css) */
.mm-landing .ds-crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; font: 400 13px/1.4 var(--font-text); color: var(--soft); }
.mm-landing .ds-crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--soft); opacity: .6; }
.mm-landing .ds-crumbs a { color: var(--soft); text-decoration: none; }
.mm-landing .ds-crumbs [aria-current] { color: var(--text); }
.mm-landing-notes { display: grid; gap: 6px; font-size: 14px; color: var(--soft); }
.mm-landing-notes p, .mm-landing-notes h2, .mm-landing-notes h3 { margin: 0; overflow-wrap: anywhere; }
.mm-related ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.mm-related a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; color: inherit; text-decoration: none; }
.ts-retry { margin-left: 8px; min-height: 36px; padding: 6px 12px; border: 1px solid var(--accent-text); border-radius: 12px; background: var(--surface); color: var(--accent-text); font: 500 14px/1.2 var(--font-text); cursor: pointer; }

/* Облик D: веса по умолчанию (браузер даёт bold заголовкам, strong, b и th). Классы страниц перекрывают. */
h1 { font-weight: 400; }
h2, h3, h4, h5, h6, strong, b, th { font-weight: 500; }

/* Облик D (боевая версия): метки, пункты меню, шаги и цены — 400; кнопки и их содержимое — 500;
   «Предложить улучшение» — 500. Специфичность html body … выше классовых правил страниц. */
html body .nav, html body .nav .nm, html body .nav .lim, html body .glab, html body .lim,
html body .back, html body .crumb, html body .step, html body .stepper, html body .tag,
html body .tcard .tag, html body .pop-lbl, html body .hi .go, html body .sh-tab {
  font-weight: 400;
}
html body .nav.suggest .nm, html body .nav.suggest, html body .nav.buy .nm { font-weight: 500; }
html body button *, html body .btn *, html body .cta *, html body .drop .cta * { font-weight: inherit; }
html body .ui-sec-t, html body .ui-note, html body .ts-step, html body .ts-step *, html body .tkh-l, html body .crumb .ttl { font-weight: 400; }

/* ── Живая страница «до/после» (23.10, share-live.js): облик D, плоско, рамки 1 px, без теней ── */
.sv { display: grid; gap: 16px; min-width: 0; }
.sv-head { display: grid; gap: 8px; min-width: 0; }
.sv-head h1 { font: 400 26px/1.15 var(--font-head); overflow-wrap: anywhere; }
.sv-head .muted { max-width: 62ch; margin: 0; }
.sv-player { display: grid; gap: 12px; }
.sv-seg { display: inline-flex; max-width: 100%; justify-self: start; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.sv-seg-b { height: 36px; padding: 0 14px; border: 0; background: var(--surface); color: var(--text); font: 500 14px/1 var(--font-text); cursor: pointer; }
.sv-seg-b + .sv-seg-b { border-left: 1px solid var(--line); }
.sv-seg-b.is-on { background: var(--accent); color: #fff; }
.sv-bar-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--bg); min-width: 0; }
.sv-play { width: 48px; height: 48px; border: 0; border-radius: 12px; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.sv-play svg { width: 22px; height: 22px; fill: currentColor; }
.sv-wave { display: flex; align-items: center; gap: 2px; height: 64px; min-width: 0; overflow: hidden; padding: 0 8px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--surface); cursor: pointer; }
.sv-wave:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
/* min-width: 0 — 96 столбиков на телефоне сжимаются, а не распирают страницу (замер 390 px: была прокрутка 102 px) */
.sv-bar { display: block; flex: 1 1 0; min-width: 0; max-width: 6px; height: 10%; border-radius: 2px; background: var(--line); }
.sv-bar.is-on { background: var(--accent); }
.sv-time { white-space: nowrap; color: var(--soft); }
.sv-note { margin: 0; }
.sv-rep { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sv-rep .lnk { padding: 0; border: 0; background: none; color: var(--accent-text); font: 500 14px/1.3 var(--font-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sv-rep .lnk:disabled { color: var(--soft); cursor: default; text-decoration: none; }
.sv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; min-width: 0; }
.sv-grid > .card { margin-top: 0; }
.sv-card { display: grid; gap: 12px; align-content: start; min-width: 0; }
.sv-num { display: grid; gap: 2px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.sv-num:first-of-type { border-top: 0; padding-top: 0; }
.sv-val { font-size: 18px; color: var(--text); overflow-wrap: anywhere; }
.sv-share { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sv-tg { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); min-width: 0; }
.sv-tg-img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; }
.sv-tg-body { display: grid; gap: 4px; padding: 10px 12px; min-width: 0; }
.sv-tg-body strong { font-weight: 500; overflow-wrap: anywhere; }
.sv-tg-body span, .sv-tg-body small { color: var(--soft); font-size: 13px; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .sv-grid { grid-template-columns: minmax(0, 1fr); }
  .sv-head h1 { font-size: 22px; }
  .sv-bar-row { grid-template-columns: auto minmax(0, 1fr); }
  .sv-time { grid-column: 1 / -1; justify-self: end; }
}

/* ── Популярные инструменты (24.10, флаг app_tools_popular_highlight): ярлык и подсветка меню ──
   Облик D: плоско, без теней. Решение владельца 24.10: в центральном блоке подложки нет — только ярлык
   «Популярное»; в меню слева подложка скромная — 5 % акцента поверх фона (в тёмной теме — 6 % от цвета
   текста акцента: акцент заливки там слишком тёмен). Цвет через color-mix: у Echoteka акцент свой. */
.nav.is-pop:not([aria-current="page"]) { background: color-mix(in srgb, var(--accent) 5%, var(--bg)); }
:root[data-theme="dark"]:not([data-brand="echoteka"]) .nav.is-pop:not([aria-current="page"]) { background: color-mix(in srgb, var(--accent-text) 6%, var(--bg)); }
.pop-mk {
  align-self: start; justify-self: start; display: inline-flex; align-items: center; height: 18px; padding: 0 6px; box-sizing: border-box;
  border: 1px solid currentColor; border-radius: 99px; color: var(--accent-text);
  font: 400 10px/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}

/* ── Как это работает (24.10, раздел /app/guide и вход с главной) — облик D: плоско, рамки 1 px, без теней ── */
.fb-foot .nav.guide .ic-sq { background: var(--icon-bg); color: var(--accent-text); }
.gd-entry {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 12px; box-sizing: border-box; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--text); text-decoration: none;
}
.gd-entry .ic-sq { width: 28px; height: 28px; border-radius: 8px; }
.gd-entry .ic-sq svg { width: 15px; height: 15px; }
.gd-entry-t { display: grid; gap: 2px; min-width: 0; flex: 1; }
.gd-entry-t b { font-weight: 500; font-size: 14px; line-height: 1.25; }
.gd-entry-t > span { font-size: 12.5px; line-height: 1.3; overflow-wrap: anywhere; }
.gd-entry-go { color: var(--accent-text); font-size: 16px; flex: none; }
.gd-sub { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; max-width: 72ch; }
.gd-sec { display: grid; gap: 10px; min-width: 0; margin-top: 16px; }
.gd-sec > h2, .gd-group > h2 {
  font: 500 12px/1.2 var(--font-mono); color: var(--soft); letter-spacing: .04em; text-transform: uppercase;
}
.gd-what { font-size: 14px; line-height: 1.55; max-width: 72ch; overflow-wrap: anywhere; }
.gd-start { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.gd-start li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; min-width: 0;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
}
.gd-num {
  display: grid; place-items: center; width: 26px; height: 26px; box-sizing: border-box; border-radius: 8px;
  background: var(--icon-bg); color: var(--accent-text); font: 500 12px/1 var(--font-mono);
}
.gd-body { display: grid; gap: 3px; min-width: 0; font-size: 13.5px; line-height: 1.4; }
.gd-body b { font-weight: 500; }
.gd-body > span { overflow-wrap: anywhere; }
.gd-feats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.gd-feat {
  display: grid; gap: 4px; align-content: start; min-width: 0; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
}
.gd-feat b { font-size: 14px; font-weight: 500; line-height: 1.3; }
.gd-feat p { font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.gd-group { margin-top: 20px; display: grid; gap: 10px; min-width: 0; }
.gd-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.gd-card {
  display: grid; gap: 10px; align-content: start; min-width: 0; padding: 14px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
}
.gd-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; min-width: 0; }
.gd-h { display: grid; gap: 4px; min-width: 0; }
.gd-h h3 { font: 500 15px/1.25 var(--font-text); overflow-wrap: anywhere; }
.gd-does { font-size: 13.5px; line-height: 1.4; overflow-wrap: anywhere; }
.gd-top > .tag { white-space: nowrap; }
.gd-k { font: 500 10.5px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.gd-when, .gd-out, .gd-price { font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.gd-when .gd-k, .gd-out .gd-k, .gd-price .gd-k { margin-right: 6px; }
.gd-steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 13px; line-height: 1.45; min-width: 0; }
.gd-steps li { overflow-wrap: anywhere; }
.gd-acts { display: flex; justify-content: flex-start; }
@media (min-width: 760px) {
  .gd-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gd-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}