/* Каркас и обиход «Кадра». */

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--фон); color: var(--текст);
  font: var(--кегль)/1.4 var(--шрифт);
  -webkit-font-smoothing: antialiased;
}

/* Ничего не выделяется как текст — кроме полей ввода.
 *
 * `user-select: none` на body мало: при перетаскивании панели или мазке
 * кистью браузер всё равно начинает выделять подписи, и по экрану ползёт
 * синяя подсветка. Запрещаем и выделение, и перетаскивание картинок, и
 * подсветку касания — а полям ввода возвращаем всё обратно. */
* {
  -webkit-user-select: none; user-select: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}
input, textarea, select, [contenteditable="true"], .можно-выделять {
  -webkit-user-select: text; user-select: text;
}
img, canvas, svg { -webkit-user-drag: none; }
::selection { background: var(--акцент-тише); }

button, input, select, textarea { font: inherit; color: inherit; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb {
  background: var(--к-4); border-radius: 6px; border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--к-5); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ПЛЁНКА БОЛЬШЕ НЕ СТРОКА ОБОЛОЧКИ.
 *
 * Владелец 13.09.2026: «нижнюю панель раскадровки истории сделаем по ширине
 * рабочей области, а не на всю ширину приложения; освободившуюся область
 * займём панелями, дав им больше места вниз».
 *
 * Он прав по существу: раскадровка — про КАРТИНКУ, а под панелями ей делать
 * нечего, тогда как панелям в этой полосе есть что показать. Поэтому плёнка
 * переехала внутрь `#рабочая`, а строка «плёнка» из сетки убрана — доки
 * тянутся до самого низа. */
#оболочка {
  display: grid; height: 100%;
  grid-template-rows: 40px 34px 1fr 24px;
  grid-template-areas: "верх" "лента" "середина" "низ";
}

/* --- верхняя строка ------------------------------------------------------ */

#верх {
  grid-area: верх; display: flex; align-items: center; gap: 8px;
  padding: 0 10px; background: var(--к-2);
  border-bottom: 1px solid var(--край);
  -webkit-app-region: drag;
}
#верх > * { -webkit-app-region: no-drag; }
#клеймо {
  font-weight: 640; letter-spacing: 0.2px; padding-left: 68px;
  color: var(--текст-тише);
}
#вкладки { display: flex; gap: 4px; overflow-x: auto; flex: 1; scrollbar-width: none; }
#вкладки::-webkit-scrollbar { display: none; }
.вкладка {
  display: flex; align-items: center; gap: 6px; height: var(--кнопка);
  padding: 0 8px 0 10px; border-radius: var(--радиус-1);
  background: transparent; border: 1px solid transparent;
  color: var(--текст-тише); cursor: default; white-space: nowrap;
}
.вкладка:hover { background: var(--к-3); }
.вкладка[data-выбрана] {
  background: var(--к-3); border-color: var(--край-ярче); color: var(--текст);
}
.вкладка .закрыть {
  width: 16px; height: 16px; border-radius: 4px; border: 0; background: transparent;
  color: var(--текст-совсем-тихо); cursor: default; line-height: 1;
}
.вкладка .закрыть:hover { background: var(--к-5); color: var(--текст); }
.вкладка .точка { width: 6px; height: 6px; border-radius: 50%; background: var(--акцент); }

/* --- лента параметров инструмента ---------------------------------------- */

#лента {
  grid-area: лента; display: flex; align-items: center; gap: 10px;
  padding: 0 10px; background: var(--к-2); border-bottom: 1px solid var(--край);
  overflow-x: auto; scrollbar-width: none;
}
#лента::-webkit-scrollbar { display: none; }
/* В ЛЕНТЕ НИЧЕГО НЕ ПЕРЕНОСИТСЯ НА ВТОРУЮ СТРОКУ.
 *
 * Лента высотой ровно в одну строку, а фишки по общему правилу переносятся —
 * и у ластика, где режимов четыре, вторая строка просто обрезалась (жалоба
 * владельца 12.09.2026). Внутри ленты перенос выключен: что не поместилось,
 * уезжает вбок, и лента прокручивается колесом. */
#лента .фишки, #лента .ряд { flex-wrap: nowrap; }
#лента > * { flex: none; }
#лента .имя-инструмента { font-weight: 620; margin-right: 4px; }
.разделитель { width: 1px; height: 18px; background: var(--край-ярче); flex: none; }
/* Подсказка, что лента длиннее окна: мягкая тень у правого края. */
#лента { position: relative; }
#лента[data-длиннее]::after {
  content: ""; position: sticky; right: 0; flex: none; width: 28px;
  align-self: stretch; pointer-events: none;
  background: linear-gradient(to right, transparent, var(--к-2));
}

/* --- середина ------------------------------------------------------------ */

/* `min-width: 0` здесь обязателен, и это не перестраховка.
 *
 * `#середина` — элемент СЕТКИ, а у элементов сетки (как и у флекс-элементов)
 * автоматический минимальный размер равен минимальной ширине содержимого.
 * Пока плёнка была отдельной строкой оболочки и обрезала себя сама, это ни на
 * что не влияло. Стоило положить её внутрь рабочей области — и лента из
 * двадцати миниатюр растянула колонку до пяти тысяч точек: замер показал
 * `#рабочая` шириной 5015 при окне в 2321. */
#середина { grid-area: середина; display: flex; min-height: 0; min-width: 0; }

#инструменты {
  width: 46px; flex: none; background: var(--к-2); border-right: 1px solid var(--край);
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0;
  overflow-y: auto; scrollbar-width: none;
}
#инструменты::-webkit-scrollbar { display: none; }
.инструмент {
  width: 34px; height: 34px; border-radius: var(--радиус-2); border: 1px solid transparent;
  background: transparent; color: var(--текст-тише); cursor: default;
  display: grid; place-items: center; position: relative;
  transition: background var(--скорость) var(--кривая), color var(--скорость) var(--кривая);
}
.инструмент:hover { background: var(--к-3); color: var(--текст); }
.инструмент[data-выбран] {
  background: var(--акцент-тише); color: var(--акцент); border-color: rgba(76, 141, 255, 0.35);
}
.инструмент svg { width: 19px; height: 19px; }
.инструмент .буква {
  position: absolute; right: 2px; bottom: 1px; font-size: 8px;
  color: var(--текст-совсем-тихо);
}

#сцена {
  flex: 1; min-width: 0; position: relative; background: var(--холст-поле);
  overflow: hidden;
}
/* Обёртка стоит в левом верхнем углу сцены, а её положение целиком задаёт
 * `transform` из вида. Никакого центрирования средствами вёрстки: иначе
 * координаты мыши и координаты документа разъезжаются. */
#холст-обёртка { position: absolute; left: 0; top: 0; transform-origin: 0 0;
  will-change: transform; }
/* Порядок слоёв задан ЯВНО, а не порядком в разметке.
 *
 * Подложка-шахматка — абсолютная, а холст — обычный элемент потока; при равном
 * z-index абсолютный рисуется поверх, и клетка ложилась НА картинку вместо
 * того, чтобы просвечивать сквозь прозрачные места (жалоба владельца
 * 10.09.2026: «фон в клеточку и картинка как будто тоже в клеточку»). */
#холст-обёртка canvas {
  display: block; image-rendering: auto; position: relative; z-index: 1;
}
/* То, что уехало за край документа: видно, но вполсилы — чтобы граница
 * холста читалась и было понятно, что эта часть в картинку не войдёт. */
#холст-обёртка canvas#запределье { z-index: 0; }
#холст-обёртка canvas#выделение { z-index: 2; }
#холст-обёртка canvas#наложение { z-index: 3; }
#холст-обёртка[data-точки] canvas { image-rendering: pixelated; }
#подложка {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(45deg, rgba(0,0,0,0.07) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(0,0,0,0.07) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(0,0,0,0.07) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(0,0,0,0.07) 75%);
  background-color: #ffffff;
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  pointer-events: none;
}
#рамка-холста {
  position: absolute; inset: -1px; border: 1px solid var(--край-ярче);
  pointer-events: none; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.курсор-кисти {
  position: absolute; border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%; pointer-events: none; mix-blend-mode: difference;
  transform: translate(-50%, -50%); display: none;
}

/* --- доки панелей -------------------------------------------------------- */

.док {
  width: 300px; flex: none; background: var(--к-2); border-left: 1px solid var(--край);
  display: flex; flex-direction: column; min-height: 0; position: relative;
}
.док[data-сторона="слева"] { border-left: 0; border-right: 1px solid var(--край); }
.док[hidden] { display: none; }
.док-тело { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px; display: flex;
  flex-direction: column; gap: 6px; }
.тяга-дока {
  position: absolute; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 5;
}
.док[data-сторона="справа"] .тяга-дока { left: -3px; }
.док[data-сторона="слева"] .тяга-дока { right: -3px; }
.тяга-дока:hover { background: var(--акцент-тише); }

/* --- панель -------------------------------------------------------------- */

.панель {
  background: var(--фон-панели); border: 1px solid var(--край);
  border-radius: var(--радиус-2); overflow: hidden; flex: none;
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--тень-панели);
}
.панель[data-растёт] { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 90px; }
.панель.плывёт {
  position: fixed; z-index: 40; width: 300px; box-shadow: var(--тень-плавающей);
  background: var(--фон-плавающей);
}
.шапка-панели {
  display: flex; align-items: center; gap: 6px; height: var(--строка);
  padding: 0 6px 0 8px; cursor: default;
  border-bottom: 1px solid transparent;
}
.панель:not([data-свёрнута]) .шапка-панели { border-bottom-color: var(--край); }
.шапка-панели .название {
  flex: 1; font-weight: 620; font-size: var(--кегль-мелкий);
  text-transform: uppercase; letter-spacing: 0.6px; color: var(--текст-тише);
}
.шапка-панели .кнопка-шапки {
  width: 18px; height: 18px; border: 0; border-radius: 4px; background: transparent;
  color: var(--текст-совсем-тихо); display: grid; place-items: center; cursor: default;
}
.шапка-панели .кнопка-шапки:hover { background: var(--к-4); color: var(--текст); }
/* ЗАМОК И ЗАКРЕПЛЁННАЯ ПАНЕЛЬ.
 *
 * Замок тихий, пока панель не закреплена, — он один из четырёх значков в
 * шапке, и кричать ему не о чем. Закреплённая панель помечена и замком, и
 * цветной чертой слева: липкость сама по себе не видна, пока столбец не
 * прокрутили, а знать о ней надо сразу. */
.шапка-панели .замок { color: var(--текст-совсем-тихо); }
.панель[data-закреплена] .замок { color: var(--акцент); }
/* Закреплено, но не поместилось: замок закрыт и приглушён — намерение видно,
 * и видно, что оно сейчас не в силе. */
.панель[data-тесно] .замок { color: var(--текст-совсем-тихо); opacity: 0.6; }
.панель[data-тесно] { box-shadow: var(--тень-панели); }
.панель[data-закреплена] { box-shadow: inset 2px 0 0 var(--акцент), var(--тень-панели); }
/* Липкой панели нужен свой фон: под ней проезжают чужие, и сквозь неё их
 * видно не должно. У `.панель` фон есть, но с `backdrop-filter` он
 * полупрозрачен — здесь это как раз тот случай, когда нельзя. */
.панель[data-закреплена] { background: var(--фон-панели-плотный, var(--к-2)); }
/* ЗАКРЕПЛЁННАЯ ПАНЕЛЬ — КОМПАКТНАЯ.
 *
 * Её дело — быть под рукой, а не быть большой: три закреплённые панели в
 * полный рост не помещаются ни в один столбец (навигатор 269 + слои 90 +
 * история 372 — это 731 точка при столбце в 606). Двести точек — это десяток
 * шагов истории или полдюжины слоёв, и этого хватает, чтобы держать их перед
 * глазами; всё остальное внутри панели прокручивается. Открепите — вернётся
 * во весь рост.
 *
 * Ограничение действует и на ту, которой «тесно», — иначе выходит порочный
 * круг: не поместилась → ограничение снято → стала выше → тем более не
 * помещается, и так навсегда (поймано проверкой 12.09.2026). */
.панель[data-закреплена] .тело-панели {
  max-height: 200px; overflow-y: auto;
}

.стрелка { transition: transform var(--скорость) var(--кривая); }
.панель[data-свёрнута] .стрелка { transform: rotate(-90deg); }
.панель[data-свёрнута] .тело-панели { display: none; }
.тело-панели { padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.панель[data-растёт] .тело-панели { flex: 1; min-height: 0; overflow-y: auto; }
.место-панели {
  height: 3px; border-radius: 2px; background: var(--акцент); opacity: 0;
  transition: opacity var(--скорость) var(--кривая);
}
.место-панели[data-видно] { opacity: 1; }

/* --- обиходные части ------------------------------------------------------ */

.ряд { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ряд.плотно { gap: 4px; }
.колонка { display: flex; flex-direction: column; gap: 6px; }
.подпись { font-size: var(--кегль-мелкий); color: var(--текст-совсем-тихо); }
.растяжка { flex: 1; }

.кнопка {
  height: var(--кнопка); padding: 0 10px; border-radius: var(--радиус-1);
  background: var(--фон-кнопки); border: 1px solid var(--край);
  color: var(--текст); cursor: default; display: inline-flex; align-items: center;
  gap: 6px; white-space: nowrap;
  transition: background var(--скорость) var(--кривая), border-color var(--скорость) var(--кривая);
}
.кнопка:hover:not(:disabled) { background: var(--фон-кнопки-над); border-color: var(--край-ярче); }
.кнопка:active:not(:disabled) { transform: translateY(0.5px); }
.кнопка:disabled { opacity: 0.4; }
.кнопка.главная {
  background: var(--акцент); border-color: transparent; color: var(--акцент-текст);
  font-weight: 600;
}
.кнопка.главная:hover:not(:disabled) { filter: brightness(1.08); }
.кнопка.тихая { background: transparent; border-color: transparent; color: var(--текст-тише); }
.кнопка.тихая:hover:not(:disabled) { background: var(--к-3); color: var(--текст); }
.кнопка.мелкая { height: 22px; padding: 0 7px; font-size: var(--кегль-мелкий); }
.кнопка[data-нажата] {
  background: var(--акцент-тише); border-color: rgba(76, 141, 255, 0.4); color: var(--акцент);
}

.фишки { display: flex; flex-wrap: wrap; gap: 4px; }
.фишка {
  height: 24px; padding: 0 9px; border-radius: 12px; border: 1px solid var(--край);
  background: var(--к-3); color: var(--текст-тише); cursor: default;
  font-size: var(--кегль-мелкий); display: inline-flex; align-items: center;
  transition: all var(--скорость) var(--кривая);
}
.фишка:hover { background: var(--к-4); color: var(--текст); }
.фишка[data-выбрана] {
  background: var(--акцент); border-color: transparent; color: var(--акцент-текст);
}

input[type="text"], input[type="number"], textarea, select {
  height: var(--кнопка); padding: 0 8px; border-radius: var(--радиус-1);
  background: var(--фон-поля); border: 1px solid var(--край); color: var(--текст);
  outline: none; min-width: 0; user-select: text;
}
textarea { height: auto; padding: 6px 8px; resize: vertical; line-height: 1.45; }
input:focus, textarea:focus, select:focus { border-color: var(--акцент); }
input[type="number"] { font-variant-numeric: tabular-nums; font-family: var(--шрифт-цифр); }

/* Ползунок: широкая полоса попадания, узкая полоса вида, число редактируется.
 * Числовое поле рядом с ползунком — не украшение: без него точное значение
 * приходится ловить мышью, и это первое, за что ругают ползунки в редакторах. */
.ползунок { display: grid; grid-template-columns: 1fr 54px; gap: 8px; align-items: center; }
.ползунок .полоса { position: relative; height: 18px; cursor: default; }
.ползунок .желоб {
  position: absolute; top: 7px; left: 0; right: 0; height: 4px; border-radius: 2px;
  background: var(--к-4);
}
.ползунок .налив {
  position: absolute; top: 7px; left: 0; height: 4px; border-radius: 2px;
  background: var(--акцент);
}
.ползунок .ручка {
  position: absolute; top: 3px; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); transform: translateX(-50%);
  transition: transform var(--скорость) var(--кривая);
}
/* Говорящий желоб выше обычного: по полоске в четыре точки цвет не разобрать,
 * а вся его польза в том, чтобы его было видно. */
.ползунок[data-говорящий] .желоб {
  top: 3px; height: 12px; border-radius: 4px; border: 1px solid var(--край);
}
.ползунок[data-говорящий] .ручка {
  top: 1px; height: 16px; width: 8px; border-radius: 4px;
  border-color: rgba(0, 0, 0, 0.55);
}
.ползунок .полоса:hover .ручка { transform: translateX(-50%) scale(1.15); }
.ползунок input { height: 22px; text-align: right; padding: 0 5px; font-size: var(--кегль-мелкий); }
.ползунок .шапка { grid-column: 1 / -1; display: flex; justify-content: space-between; }

/* Честное предупреждение в панели: не ошибка, но и не проходная заметка. */
.заметка.тревожная {
  border-left: 3px solid var(--внимание);
  padding-left: 8px; color: var(--текст-тише);
}

/* Карточка умного инструмента: заголовок, свои настройки, своя кнопка.
 * Рамка нужна не для красоты — она показывает, что настройки принадлежат
 * именно этой кнопке, а не всей панели. */
.карточка-умного { display: flex; flex-direction: column; gap: 6px; }
.карточка-умного .ряд { gap: 6px; }
.карточка-умного .кнопка { flex: 1; }
.подпись.сильная { font-weight: 600; color: var(--текст); }

/* Чья это кисть — первая строка панели: без неё динамическая панель
 * выглядит как случайно меняющиеся ручки. */
.чья-кисть { font-weight: 600; color: var(--текст); padding-bottom: 2px; }

.список-заготовок {
  flex: 1; min-width: 0; height: 24px; padding: 0 6px;
  border-radius: var(--радиус-1); border: 1px solid var(--край);
  background: var(--фон-поля); color: var(--текст);
  font-size: var(--кегль-мелкий); font-family: var(--шрифт);
}

/* Где на поле стоит нынешний цвет. Без метки поле не отвечало на вопрос
 * «а что выбрано сейчас» — особенно после пипетки. */
.место-поля { position: relative; }
.метка-поля {
  position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; border: 2px solid #fff; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 1px 4px rgba(0, 0, 0, 0.5);
}
.метка-полосы {
  position: absolute; top: -2px; width: 6px; height: 14px; margin-left: -3px;
  border-radius: 3px; border: 2px solid #fff; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}

/* --- лупа пипетки ---------------------------------------------------------
 *
 * Владелец 13.09.2026: «нет дополнительного окна в месте забора цвета — пусть
 * добавляется увеличенный круг, чтобы точно видеть, какой цвет берётся».
 *
 * Круг, а не квадрат: он не спорит с прицелом и сразу читается как «это
 * увеличение», а не как ещё одна панель. Смещён вверх-вправо от острия, чтобы
 * не закрывать то самое место, куда целятся. */
.лупа-пипетки {
  position: absolute; z-index: 40; pointer-events: none;
  width: 118px; transform: translate(18px, -136px);
}
.лупа-пипетки canvas {
  display: block; width: 118px; height: 118px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.5);
  image-rendering: pixelated;
  background: var(--фон-панели-плотный);
}
.код-лупы {
  display: block; margin-top: 5px; text-align: center;
  font-family: var(--шрифт-цифр); font-size: 11px; color: #fff;
  background: rgba(0, 0, 0, 0.65); border-radius: 5px; padding: 1px 0;
}

/* --- панель-список: одна полоса и прибитые кнопки ------------------------
 *
 * Владелец 13.09.2026: «панели „Слои“ и „История“ — плохая реализация двойной
 * полосы прокрутки; нужно оставить одну. Всегда, независимо от высоты списка
 * и высоты самих панелей, кнопки управления должны быть закреплены и видны».
 *
 * Полос было две, потому что прокручивались оба: тело панели (свой предел) и
 * список внутри (свой `max-height`). А ряд кнопок лежал в теле ПОД списком —
 * и уезжал вместе с ним.
 *
 * Здесь всё наоборот: тело не прокручивается вовсе (`overflow: hidden`),
 * прокручивается ТОЛЬКО список, а всё прочее прибито `flex: none`.
 *
 * ВНИМАНИЕ НА ЛИШНЮЮ СТУПЕНЬКУ. Тело панели содержит РОВНО ОДНОГО ребёнка —
 * `div.колонка`, корень, который вернула функция панели. Список и кнопки —
 * внуки. Первая редакция правил целилась в `> *` и попадала в эту обёртку;
 * список оставался нетронутым, кнопки по-прежнему срезались. Поэтому обёртке
 * велено растянуться на всё тело, а разбор на «прибитое» и «прокручиваемое»
 * идёт уровнем ниже.
 *
 * `!important` — не лень, а разрешение спора: правила `[data-растёт]`,
 * `[data-закреплена]` и `[data-своя-высота]` тоже выдают телу `overflow-y:
 * auto`, и любое из них вернуло бы вторую полосу. */
.панель[data-список] .тело-панели,
.панель[data-список] .тело-панели[style] {
  overflow: hidden !important;
}
/* Обёртка — на всю высоту тела, своей колонкой. */
.панель[data-список] .тело-панели > .колонка {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px;
}
.панель[data-список] .тело-панели > .колонка > * { flex: none; }
/* Селектор нарочно длиннее, чем у «прибить всё» выше: при равном весе
 * побеждал бы тот, что ниже, а держать порядок правил в голове — плохая
 * опора. Здесь вес больше, и спор решён явно. */
.панель[data-список] .тело-панели > .колонка > .слои,
.панель[data-список] .тело-панели > .колонка > .шаги {
  flex: 1 1 auto;
  /* Ноль, а не «хотя бы строка»: требование «кнопки видны при ЛЮБОЙ высоте»
   * сильнее желания всегда показывать хоть один ряд списка. */
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}
/* Панели, которой высоту задали явно (своей рукой или умолчанием при
 * заведении), потолок закреплённых в 200 точек не указ: она и так знает, чего
 * хочет, а бюджет закреплённых стережёт `пересчитатьЗакреплённые`, помечая
 * лишнее как `data-тесно`. Проверка идёт по заданной высоте, а не по «влезло
 * ли» — иначе выйдет тот самый порочный круг, что был со старым
 * `:not([data-тесно])`. */
.панель[data-закреплена][data-своя-высота] .тело-панели,
.панель[data-закреплена][data-свояВысота] .тело-панели {
  max-height: none;
}

/* --- метка ума в заголовке панели -----------------------------------------
 *
 * Владелец 13.09.2026: «каждая панель должна быть оснащена признаком, если
 * она использует модель; в самом заголовке панели должен включаться признак
 * gemini/apple».
 *
 * Две породы метки различаются и цветом, и словом: «Gemini»/«Apple» синим и
 * тёплым — работает выбранной наверху моделью; «своя сеть» серым — считает
 * эта машина, и выбор модели на неё не влияет. */
.метка-ума {
  flex: none; margin-left: 6px; padding: 0 6px; height: 15px; line-height: 15px;
  border-radius: 8px; font-size: 9px; letter-spacing: 0.02em;
  border: 1px solid transparent; white-space: nowrap;
}
.метка-модель { background: rgba(76, 141, 255, 0.18); color: #8fb6ff;
                border-color: rgba(76, 141, 255, 0.45); }
.метка-своя { background: rgba(255, 255, 255, 0.07); color: var(--текст-совсем-тихо);
              border-color: var(--край); }
:root[data-тема="цветная"] .метка-модель { background: rgba(76, 141, 255, 0.16); color: #2e64c8; }
:root[data-тема="цветная"] .метка-своя { background: rgba(0, 0, 0, 0.05); }
/* На цветной панели заголовок цветной — метке нужен свой контраст. */
:root[data-краски] .панель[data-цвет] .метка-ума {
  background: rgba(255, 255, 255, 0.9); color: #1d2530; border-color: transparent;
}

/* Выбор модели в ленте зажигается, когда раскрыта панель, работающая
 * моделью: в эту минуту выбор наверху и вправду решает, чем считать. Цвет —
 * самого движка, чтобы «каким» было видно, не читая надписей. */
.ии-ленты {
  border-radius: 9px; padding: 2px 6px;
  transition: background var(--скорость) var(--кривая),
              box-shadow var(--скорость) var(--кривая);
}
.ии-ленты[data-живо="модель"] {
  background: linear-gradient(100deg, rgba(76, 141, 255, 0.22), rgba(120, 90, 255, 0.16));
  box-shadow: inset 0 0 0 1px rgba(76, 141, 255, 0.4);
}
.ии-ленты[data-живо="apple"] {
  background: linear-gradient(100deg, rgba(255, 165, 80, 0.22), rgba(255, 105, 140, 0.16));
  box-shadow: inset 0 0 0 1px rgba(255, 150, 90, 0.45);
}
/* У OpenRouter свой цвет по той же причине, что у Apple свой: «каким считаем»
 * должно быть видно, не читая надписей. Зелёный — чтобы не спутать ни с
 * синим Gemini, ни с тёплым Apple. */
.ии-ленты[data-живо="openrouter"] {
  background: linear-gradient(100deg, rgba(70, 200, 140, 0.22), rgba(60, 170, 190, 0.16));
  box-shadow: inset 0 0 0 1px rgba(70, 200, 150, 0.45);
}

/* --- круговой угол -------------------------------------------------------- */

.круговой { display: flex; flex-direction: column; gap: 4px; }
.круговой .ряд { align-items: center; gap: 10px; }
.ось-круга {
  position: relative; width: 56px; height: 56px; flex: none; border-radius: 50%;
  background: var(--фон-поля); border: 1px solid var(--край);
  cursor: crosshair; touch-action: none;
  /* Четыре риски по сторонам света: без них круг читается как просто кружок,
   * а с ними сразу видно «вверх / вправо / вниз / влево». */
  background-image:
    linear-gradient(var(--край), var(--край)), linear-gradient(var(--край), var(--край));
  background-size: 1px 6px, 6px 1px;
  background-position: center top, right center;
  background-repeat: no-repeat;
}
.ось-круга::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background-image:
    linear-gradient(var(--край), var(--край)), linear-gradient(var(--край), var(--край));
  background-size: 1px 6px, 6px 1px;
  background-position: center bottom, left center;
  background-repeat: no-repeat;
  pointer-events: none;
}
.стрелка-круга {
  position: absolute; inset: 0; pointer-events: none;
  /* Стрелка — псевдоэлемент вверх от центра; вращаем весь квадрат, а не
   * линию: так центр вращения всегда точно в середине круга. */
}
.стрелка-круга::before {
  content: ""; position: absolute; left: 50%; top: 7px; bottom: 50%;
  width: 2px; margin-left: -1px; border-radius: 1px; background: var(--акцент);
}
.стрелка-круга::after {
  content: ""; position: absolute; left: 50%; top: 4px;
  width: 8px; height: 8px; margin-left: -4px; border-radius: 50%;
  background: var(--акцент); box-shadow: 0 0 0 2px var(--фон-поля);
}
.точка-круга {
  position: absolute; left: 50%; top: 50%; width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px; border-radius: 50%;
  background: var(--край); pointer-events: none;
}
.круговой input {
  width: 54px; height: 22px; text-align: right; padding: 0 5px;
  font-size: var(--кегль-мелкий);
}

/* --- список слоёв --------------------------------------------------------- */

/* СПИСОК СЛОЁВ ПРОКРУЧИВАЕТСЯ САМ — как и список истории.
 *
 * Прежде он рос без предела: десяток слоёв растягивал панель на весь столбец
 * и выдавливал соседей, а прокрутки не было вовсе — приходилось тянуть панель
 * за нижний край руками (жалоба владельца 12.09.2026). `flex: none` у строки
 * обязателен: дети флексбокса по умолчанию сжимаются, и список послушно
 * ужимался бы вместо того, чтобы дать полосу прокрутки. */
.слои {
  display: flex; flex-direction: column; gap: 2px;
  /* БЕЗ `overscroll-behavior: contain`, И ЭТО ВАЖНО.
   *
   * С ним прокрутка, дойдя до конца списка, НЕ передаётся доку. А курсор во
   * время работы стоит как раз над списком, и колесо там переставало делать
   * что-либо: панель уезжала за нижний край окна, и добраться до неё было
   * нечем (жалоба владельца 12.09.2026, второй раз про одно и то же).
   * `contain` хорош для шторки поверх страницы, но не для списка внутри
   * столбца, который сам обязан прокручиваться дальше. */
  max-height: 320px; overflow-y: auto;
}
.слои > * { flex: none; }
/* У растущей панели («Слои» в столбце) предел не нужен: там тело и так
   тянется до низа дока и прокручивается само. */
.панель[data-растёт] .слои { max-height: none; }
.слой {
  display: grid; grid-template-columns: 20px 34px 1fr auto; gap: 6px; align-items: center;
  height: 40px; padding: 0 6px; border-radius: var(--радиус-1);
  border: 1px solid transparent; cursor: default;
}
.слой:hover { background: var(--к-3); }
.слой[data-выбран] { background: var(--акцент-тише); border-color: rgba(76, 141, 255, 0.35); }
.слой[data-тянут] { opacity: 0.4; }
.слой .глаз { border: 0; background: transparent; color: var(--текст-тише); cursor: default;
  display: grid; place-items: center; }
.слой .глаз[data-скрыт] { color: var(--текст-совсем-тихо); opacity: 0.45; }
.слой .кроха {
  width: 34px; height: 30px; border-radius: 3px; border: 1px solid var(--край);
  background-color: #000; background-size: contain; background-repeat: no-repeat;
  background-position: center;
}
.слой .имя { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.слой .имя input { height: 20px; width: 100%; }
.слой .мелочь { font-size: 10px; color: var(--текст-совсем-тихо); }

/* --- история -------------------------------------------------------------- */

/* Список истории прокручивается САМ.
 *
 * Прежде у него не было ни предела высоты, ни `overflow` — список рос вниз,
 * распирал панель и выдавливал соседей, а `список.scrollTop = scrollHeight` в
 * конце обновления не делал ничего (жалоба владельца 12.09.2026: «панель
 * истории не имеет бегунка»). Предел в 300 точек — это дюжина шагов, дальше
 * прокрутка. */
.шаги {
  display: flex; flex-direction: column; gap: 0;
  max-height: 300px; overflow-y: auto;   /* см. `.слои`: без `contain` */
}
/* Чем сделан шаг — отдельной строкой под ним и другим цветом: это примечание,
 * а не второй шаг. */
.шаг-кем {
  flex: none; padding: 0 6px 1px 24px; font-size: 10px; color: var(--акцент);
  opacity: 0.85; cursor: default; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
/* Строки ПЛОТНЕЕ и с еле заметной чертой между ними.
 *
 * Владелец 12.09.2026: «шаги истории чуть уменьшить интервал и отделить еле
 * заметной границей в промежутках». Просвет между строками не читался как
 * разделение — строки просто висели в воздухе, и в списке из двадцати
 * одинаковых записей глаз терял место. Черта в промежутке даёт ритм и при
 * этом в полтора раза дешевле по высоте, чем просвет. */
.шаг {
  display: flex; align-items: center; gap: 6px; height: 20px; padding: 0 6px;
  border-radius: 4px; color: var(--текст-тише); cursor: default; font-size: var(--кегль-мелкий);
  border-top: 1px solid var(--край);
  /* БЕЗ ЭТОГО ПРОКРУТКИ НЕ БУДЕТ. Строки — дети флексбокса, а те по умолчанию
   * сжимаются: пятнадцать строк послушно ужимались в триста точек вместо того,
   * чтобы вылезти за край и дать полосу прокрутки. */
  flex: none;
}
/* Первой черта не нужна: над ней не строка, а край панели. И под примечанием
 * «чем сделан» тоже — это продолжение того же шага, а не новый. */
.шаги > .шаг:first-child, .шаг-кем + .шаг { border-top-color: transparent; }
.шаг:hover { background: var(--к-3); }
.шаг[data-нынешний] { background: var(--акцент-тише); color: var(--текст); }
.шаг[data-отменён] { opacity: 0.38; }
.шаг .когда { margin-left: auto; font-family: var(--шрифт-цифр); font-size: 10px; }

/* --- плёнка: лента миниатюр истории --------------------------------------- */

/* `position: relative` обязателен: лента меряет `offsetLeft` кадриков, чтобы
 * подвезти нынешний шаг в кадр, а без своего начала отсчёта числа шли бы от
 * окна. */
/* --- плёнка раскадровки ----------------------------------------------------
 *
 * Короб живёт в рабочей области, ростом управляет `--рост-плёнки` (её тянут
 * за верхнюю кромку), а миниатюры считают свою высоту от неё же: тянешь
 * короб — растут кадрики, это одно движение, а не две настройки. */
#рабочая {
  flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column;
}
#плёнка-короб {
  flex: none; min-width: 0; display: flex; flex-direction: column;
  height: var(--рост-плёнки, 72px);
  background: var(--к-2); border-top: 1px solid var(--край);
}
#плёнка-короб[hidden] { display: none; }
.тяга-плёнки {
  flex: none; height: 6px; cursor: ns-resize; position: relative;
}
.тяга-плёнки::after {
  content: ""; position: absolute; left: 50%; top: 2px;
  width: 42px; height: 2px; margin-left: -21px; border-radius: 1px;
  background: var(--край-ярче);
}
.тяга-плёнки:hover::after { background: var(--акцент); }
.нутро-плёнки {
  flex: 1; min-height: 0; min-width: 0; display: flex; align-items: stretch;
  gap: 2px; padding: 0 2px 2px;
}
/* Кнопки-листалки: как в галерее. Гаснут, когда листать некуда, — так видно,
 * что лента кончилась, а не что кнопка сломалась. */
.листать {
  flex: none; width: 22px; border: 1px solid var(--край); border-radius: 6px;
  background: var(--к-3); color: var(--текст-тише); cursor: default;
  font-size: 15px; line-height: 1; display: grid; place-items: center;
  transition: background var(--скорость) var(--кривая), opacity var(--скорость) var(--кривая);
}
.листать:hover:not(:disabled) { background: var(--к-4); color: var(--текст); }
.листать:disabled { opacity: 0.25; }

#плёнка {
  flex: 1; min-width: 0; position: relative;
  display: flex; align-items: center; gap: 5px; padding: 0 4px;
  overflow-x: auto; overflow-y: hidden;
  /* Полоса прокрутки видна всегда: по ней сразу понятно, что кадров больше,
   * чем влезло. Тонкая, чтобы не съедать высоту у миниатюр. */
  scrollbar-width: thin; scrollbar-color: var(--к-5) transparent;
  overscroll-behavior-x: contain;
}
#плёнка::-webkit-scrollbar { height: 8px; }
#плёнка::-webkit-scrollbar-track { background: transparent; }
#плёнка::-webkit-scrollbar-thumb {
  background: var(--к-5); border-radius: 4px; border: 2px solid transparent;
  background-clip: padding-box;
}
#плёнка::-webkit-scrollbar-thumb:hover { background: var(--к-6); background-clip: padding-box; }

.кадрик {
  /* Высота миниатюры считается от роста короба: 6 на тягу, 8 на полосу
   * прокрутки, 10 на отступы. Предел по ширине растёт вместе с высотой —
   * иначе на высоком коробе панорамный кадр остался бы узкой полоской. */
  flex: none; height: calc(var(--рост-плёнки, 72px) - 26px);
  width: auto; min-width: 18px; max-width: calc(var(--рост-плёнки, 72px) * 2.6);
  object-fit: cover; border-radius: 4px; border: 2px solid transparent;
  background: #fff; cursor: default; opacity: 0.85;
  transition: transform var(--скорость) var(--кривая), opacity var(--скорость) var(--кривая);
}
.кадрик:hover { opacity: 1; transform: translateY(-2px); border-color: var(--край-ярче); }
.кадрик[data-нынешний="1"] { opacity: 1; border-color: var(--акцент); }
.кадрик[data-отменён="1"] { opacity: 0.3; }
.кадрик[data-отменён="1"]:hover { opacity: 0.6; }

/* Призрак — кадрик, который едет за мышью. Знак «+» появляется, когда мышь
 * уже за лентой: там отпускание значит «копия холста». */
.призрак-кадрика {
  position: fixed; z-index: 96; pointer-events: none; padding: 3px;
  transform: translate(-50%, -50%); border-radius: 6px;
  background: var(--фон-плавающей); border: 1px solid var(--край-ярче);
  box-shadow: var(--тень-плавающей);
}
.призрак-кадрика img { display: block; height: 64px; border-radius: 4px; background: #fff; }
.призрак-кадрика[data-копия="1"] { border-color: var(--акцент); transform: translate(-50%, -50%) scale(1.15); }
.призрак-кадрика[data-копия="1"]::after {
  content: "+"; position: absolute; right: -8px; top: -8px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--акцент); color: #fff; font-weight: 700;
  font-size: 15px; line-height: 20px; text-align: center;
}

/* --- нижняя строка -------------------------------------------------------- */

#низ {
  grid-area: низ; display: flex; align-items: center; gap: 12px; padding: 0 10px;
  background: var(--к-2); border-top: 1px solid var(--край);
  font-size: var(--кегль-мелкий); color: var(--текст-совсем-тихо);
}
#низ .значение { font-family: var(--шрифт-цифр); color: var(--текст-тише); }
#вести { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#вести[data-лад="добро"] { color: var(--добро); }
#вести[data-лад="беда"] { color: var(--беда); }
#вести[data-лад="ждём"] { color: var(--акцент); }

/* --- всплывающее ---------------------------------------------------------- */

.занавес {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 60;
  display: grid; place-items: center; backdrop-filter: blur(3px);
}
.окошко {
  width: min(560px, 92vw); max-height: 84vh; overflow: auto;
  background: var(--фон-плавающей); border: 1px solid var(--край-ярче);
  border-radius: var(--радиус-3); box-shadow: var(--тень-плавающей);
  backdrop-filter: blur(30px) saturate(150%);
}
.окошко .шапка {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px;
  border-bottom: 1px solid var(--край); font-weight: 640;
}
.окошко .нутро { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.окошко .подвал {
  display: flex; justify-content: flex-end; gap: 8px; padding: 12px 14px;
  border-top: 1px solid var(--край);
}

/* Поиск по командам: единственный ответ на «меню внутри меню», за которое
 * ругают большие редакторы. Всё, что умеет «Кадр», ищется здесь по слову. */
#искалка { position: fixed; inset: 0; z-index: 70; display: grid;
  place-items: start center; padding-top: 12vh; background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px); }
#искалка .короб {
  width: min(620px, 92vw); background: var(--фон-плавающей);
  border: 1px solid var(--край-ярче); border-radius: var(--радиус-3);
  box-shadow: var(--тень-плавающей); overflow: hidden;
  backdrop-filter: blur(30px) saturate(150%);
}
#искалка input {
  width: 100%; height: 46px; border: 0; border-bottom: 1px solid var(--край);
  border-radius: 0; background: transparent; padding: 0 14px; font-size: 15px;
}
#искалка .список { max-height: 46vh; overflow-y: auto; padding: 6px; }
#искалка .строка {
  display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px;
  border-radius: var(--радиус-1); cursor: default;
}
#искалка .строка[data-подсвечена] { background: var(--акцент-тише); }
#искалка .строка .где { margin-left: auto; font-size: 10px; color: var(--текст-совсем-тихо); }
#искалка .строка kbd {
  font-family: var(--шрифт-цифр); font-size: 10px; padding: 1px 5px;
  border: 1px solid var(--край-ярче); border-radius: 4px; color: var(--текст-тише);
}

.подсказка {
  position: fixed; z-index: 90; pointer-events: none; max-width: 260px;
  padding: 6px 9px; border-radius: var(--радиус-1);
  background: var(--подсказка-фон); border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--подсказка-текст); font-size: var(--кегль-мелкий);
  box-shadow: var(--тень-плавающей);
  opacity: 0; transition: opacity var(--скорость) var(--кривая);
}
.подсказка[data-видно] { opacity: 1; }
.подсказка kbd { color: var(--подсказка-тише); font-family: var(--шрифт-цифр); }

.меню {
  position: fixed; z-index: 80; min-width: 190px; padding: 5px;
  background: var(--фон-плавающей); border: 1px solid var(--край-ярче);
  border-radius: var(--радиус-2); box-shadow: var(--тень-плавающей);
  backdrop-filter: blur(30px) saturate(150%);
}
.меню .пункт {
  display: flex; align-items: center; gap: 8px; height: var(--строка); padding: 0 8px;
  border-radius: var(--радиус-1); cursor: default; color: var(--текст);
}
.меню .пункт:hover { background: var(--акцент); color: var(--акцент-текст); }
.меню .пункт .клавиша { margin-left: auto; font-size: 10px; color: var(--текст-совсем-тихо); }
.меню .пункт:hover .клавиша { color: rgba(255,255,255,0.75); }
.меню .черта { height: 1px; background: var(--край); margin: 4px 6px; }

.загрузка {
  width: 14px; height: 14px; border-radius: 50%; flex: none;
  border: 2px solid var(--к-5); border-top-color: var(--акцент);
  animation: кружение 0.7s linear infinite;
}
@keyframes кружение { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --- разделы панели инструментов ------------------------------------------- */

.кучка { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.черта-раздела {
  width: 22px; height: 7px; margin: 3px 0; border-radius: 3px; cursor: grab;
  background: linear-gradient(var(--край-ярче), var(--край-ярче)) center/100% 1px no-repeat;
  flex: none;
}
.черта-раздела:hover {
  background: linear-gradient(var(--акцент), var(--акцент)) center/100% 2px no-repeat;
}
.лента-инструментов {
  display: flex; flex-wrap: wrap; gap: 3px; padding: 2px;
}

/* --- тяги размеров ---------------------------------------------------------- */

.тяга-низа {
  position: absolute; left: 8px; right: 8px; bottom: 0; height: 5px;
  cursor: row-resize; border-radius: 3px;
}
.тяга-низа:hover { background: var(--акцент-тише); }
.панель { position: relative; }
.панель.плывёт .тяга-в, .панель.плывёт .тяга-п, .панель.плывёт .тяга-уг { display: block; }
.тяга-в, .тяга-п, .тяга-уг { display: none; position: absolute; }
.тяга-п { top: 8px; bottom: 8px; right: 0; width: 5px; cursor: col-resize; }
.тяга-в { left: 8px; right: 8px; bottom: 0; height: 5px; cursor: row-resize; }
.тяга-уг {
  right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize;
  background:
    linear-gradient(135deg, transparent 50%, var(--край-ярче) 50%, var(--край-ярче) 60%,
    transparent 60%, transparent 72%, var(--край-ярче) 72%, var(--край-ярче) 82%, transparent 82%);
}
.тяга-п:hover, .тяга-в:hover { background: var(--акцент-тише); }

/* Слипшиеся панели показывают, что они одно целое: у соприкасающихся краёв
 * скругление снимается, и группа читается как один блок. */
.панель.плывёт { transition: box-shadow var(--скорость) var(--кривая); }
.панель.плывёт:hover { box-shadow: var(--тень-плавающей), 0 0 0 1px var(--край-ярче); }

/* --- вкладки внутри панели --------------------------------------------------- */

.вкладки-панели {
  display: flex; gap: 2px; padding: 2px; background: var(--к-3);
  border-radius: var(--радиус-1); margin-bottom: 6px;
}
.вкладка-панели {
  flex: 1; height: 22px; border: 0; border-radius: 5px; background: transparent;
  color: var(--текст-тише); cursor: default; font-size: var(--кегль-мелкий);
}
.вкладка-панели[data-выбрана] { background: var(--к-1); color: var(--текст); font-weight: 600; }

/* --- образцы цвета ------------------------------------------------------------ */

/* Палитра картинки: клетки от сорока точек и во всю ширину. Восемь жёстких
 * столбцов давали в узкой панели клетку в 27 точек — цвет по ней не
 * разобрать (владелец 13.09.2026 — «плохо свёрстана»). */
.палитра {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 5px;
}
.клетка-палитры {
  aspect-ratio: 1; border-radius: 7px; border: 1px solid var(--край);
  cursor: default; padding: 0; position: relative; overflow: hidden;
}
.клетка-палитры:hover { transform: scale(1.08); border-color: var(--край-ярче); }
/* Доля ВНУТРИ клетки, на тёмной подложке: подложка одна на любой цвет, и
 * число читается и на жёлтом, и на чёрном. Снаружи (как было, `bottom:-13px`)
 * подпись налезала на следующий ряд. */
.доля-клетки {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-size: 9px; line-height: 13px; text-align: center;
  color: #fff; background: rgba(0, 0, 0, 0.45);
  font-variant-numeric: tabular-nums;
}

/* Опорный цвет — строка с настоящим квадратом образца, а не фишка с
 * полоской вместо цвета. */
.опорный-цвет {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 3px 6px; border-radius: var(--радиус-1);
  border: 1px solid transparent; background: none; cursor: default;
  color: var(--текст-тише); font-size: var(--кегль-мелкий);
}
.опорный-цвет:hover { background: var(--фон-кнопки-над); border-color: var(--край); }
.образец-цвета {
  width: 18px; height: 18px; flex: none; border-radius: 5px;
  border: 1px solid var(--край-ярче);
}
.имя-опорного { flex: 1; text-align: left; color: var(--текст); }

/* --- показ кисти -------------------------------------------------------------- */

.облик-кисти {
  width: 100%; height: 46px; border-radius: var(--радиус-1); border: 1px solid var(--край);
  background: var(--фон-поля);
}

/* `hidden` обязан побеждать. У панелей и колонок стоит `display: flex`, а он
 * старше браузерного правила для [hidden] — из-за этого скрытая вкладка
 * оставалась на экране вместе с открытой. */
[hidden] { display: none !important; }

/* Растущей панели нужен пол: в столбце из десяти панелей список слоёв иначе
 * ужимается до нуля, и его не видно вовсе. */
.панель[data-растёт] .тело-панели { min-height: 150px; }

/* Предпросмотр шага истории — рядом со списком, слева от него. */
.глазок-истории {
  position: fixed; z-index: 95; padding: 4px; border-radius: var(--радиус-2);
  background: var(--фон-плавающей); border: 1px solid var(--край-ярче);
  box-shadow: var(--тень-плавающей); pointer-events: none;
}
.глазок-истории img {
  display: block; max-width: 190px; max-height: 190px; border-radius: 6px;
  background: #fff;
}
.шаг .есть-кроха { font-size: 8px; color: var(--текст-совсем-тихо); }

/* Полоса работы: видно, что программа думает, и сколько уже думает. */
#полоса-работы {
  display: flex; align-items: center; gap: 8px; height: var(--кнопка);
  padding: 0 10px; border-radius: var(--радиус-1);
  background: var(--акцент-тише); color: var(--акцент); white-space: nowrap;
  border: 1px solid rgba(76, 141, 255, 0.35);
}
#полоса-работы .сколько { font-family: var(--шрифт-цифр); opacity: 0.8; }

/* Пока идёт работа — инструменты и панели не отзываются, кроме отмены.
 * Курсор ожидания ставится на всё окно: это первое, что человек замечает. */
body[data-занят] #сцена, body[data-занят] #инструменты,
body[data-занят] .док .панель:not([data-id="история"]) {
  pointer-events: none; opacity: 0.72;
}
body[data-занят] { cursor: progress; }
body[data-занят] #верх, body[data-занят] #низ { pointer-events: auto; opacity: 1; }

/* --- лента инструментов в несколько колонок -------------------------------- */

#инструменты { position: relative; }
#инструменты[data-колонок]:not([data-колонок="1"]) .кучка {
  flex-direction: row; flex-wrap: wrap; justify-content: center;
}
#инструменты[data-колонок]:not([data-колонок="1"]) .черта-раздела { width: 80%; }
.тяга-ленты {
  position: absolute; top: 0; bottom: 0; right: 0; width: 5px; cursor: col-resize;
}
.тяга-ленты:hover { background: var(--акцент-тише); }

/* --- выбранный инструмент виден сразу ---------------------------------------
 * Прежняя подсветка была слишком тихой: на цветной теме и на светлом фоне
 * выбранный значок не отличался от соседей. Теперь у него плотный фон, рамка
 * и полоска у края — три признака вместо одного. */
.инструмент[data-выбран] {
  background: var(--акцент); color: #fff;
  border-color: color-mix(in srgb, var(--акцент) 60%, #000);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.инструмент[data-выбран]::before {
  content: ""; position: absolute; left: -6px; top: 6px; bottom: 6px; width: 3px;
  border-radius: 2px; background: var(--акцент);
}
:root[data-краски] .инструмент[data-выбран] {
  background: currentColor; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}
:root[data-краски] .инструмент[data-выбран] svg { color: #fff; }
:root[data-краски] .инструмент[data-выбран] .буква { color: rgba(255,255,255,0.8); }

/* --- виджет из слипшихся панелей --------------------------------------------
 * Слипшиеся читаются как одно целое: общая обводка по краю виджета, сомкнутые
 * края внутри (скругления сняты), одна ширина на всех. Без этого слипание
 * выглядит как случайно оказавшиеся рядом окошки. */
.панель.плывёт.в-виджете { border-color: var(--акцент); box-shadow: none; }
.панель.плывёт.верх-виджета {
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  border-bottom-color: rgba(76, 141, 255, 0.35);
  box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.28);
}
.панель.плывёт.середина-виджета {
  border-radius: 0;
  border-top-color: rgba(76, 141, 255, 0.35);
  border-bottom-color: rgba(76, 141, 255, 0.35);
}
.панель.плывёт.низ-виджета {
  border-top-left-radius: 0; border-top-right-radius: 0;
  border-top-color: rgba(76, 141, 255, 0.35);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
}
.кнопка-шапки.разлепить { color: var(--акцент); font-weight: 700; }

/* --- панель, свёрнутая вбок --------------------------------------------------
 * Не «спрятана», а отложена под руку: остаётся узкая лента значков, каждый из
 * которых и разворачивает панель, и делает своё дело. */
.панель.вбок { width: 46px !important; min-width: 46px; }
.панель.вбок .тело-панели,
.панель.вбок .шапка-панели .название,
.панель.вбок .шапка-панели .стрелка,
.панель.вбок .кнопка-шапки:not(.вернуть-вбок) { display: none; }
.панель.вбок .шапка-панели { justify-content: center; padding: 0; }
.панель.вбок .шапка-панели::after {
  content: "⇤"; color: var(--текст-тише); font-size: 13px;
}
.лента-вбок {
  display: none; flex-direction: column; align-items: center; gap: 3px; padding: 5px 3px;
}
.панель.вбок .лента-вбок { display: flex; }
.значок-вбок {
  width: 34px; height: 34px; border-radius: var(--радиус-2); border: 1px solid transparent;
  background: transparent; color: var(--текст-тише); cursor: default;
  display: grid; place-items: center;
}
.значок-вбок:hover { background: var(--к-3); color: var(--текст); }
.значок-вбок svg { width: 18px; height: 18px; }
:root[data-краски] .панель.вбок[data-цвет] .значок-вбок { color: var(--цвет-панели); }

/* --- верхняя лента: компактные ручки ----------------------------------------- */

#лента { gap: 8px; }
.ползунок-ленты {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 0 2px;
}
.ползунок-ленты .подпись { white-space: nowrap; }
.ползунок-ленты .полоса {
  position: relative; height: 18px; flex: none; cursor: default;
}
.ползунок-ленты .желоб {
  position: absolute; top: 7px; left: 0; right: 0; height: 4px; border-radius: 2px;
  background: var(--к-4);
}
.ползунок-ленты .налив {
  position: absolute; top: 7px; left: 0; height: 4px; border-radius: 2px;
  background: var(--акцент);
}
.ползунок-ленты .ручка {
  position: absolute; top: 2.5px; width: 13px; height: 13px; border-radius: 50%;
  background: #fff; border: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); transform: translateX(-50%);
  transition: transform var(--скорость) var(--кривая);
}
.ползунок-ленты .полоса:hover .ручка { transform: translateX(-50%) scale(1.18); }
.ползунок-ленты input {
  width: 46px; height: 22px; text-align: right; padding: 0 4px;
  font-size: var(--кегль-мелкий); flex: none;
}

/* Показ мазка прямо в ленте. */
.облик-ленты {
  border-radius: var(--радиус-1); border: 1px solid var(--край);
  background: var(--фон-поля); flex: none;
}

/* Цвет и палитра картинки. */
.цвета-ленты { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.образец {
  width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--край-ярче);
  cursor: default; padding: 0; position: relative;
}
.образец.второй { width: 18px; height: 18px; border-radius: 6px; }
.скрытый-выбор {
  position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; border: 0;
  padding: 0; cursor: default;
}
.палитра-ленты { display: inline-flex; align-items: center; gap: 3px; }
.точка-палитры {
  width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--край);
  padding: 0; cursor: default;
}
.точка-палитры:hover { transform: scale(1.18); border-color: var(--край-ярче); }

/* Настройки модели: мини-кнопки, которые видно всегда. */
.ии-ленты { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.кучка-ленты { display: inline-flex; gap: 2px; }
.мини {
  height: 22px; padding: 0 7px; border-radius: 6px; border: 1px solid var(--край);
  background: var(--к-3); color: var(--текст-тише); cursor: default;
  font-size: var(--кегль-мелкий); white-space: nowrap;
}
.мини:hover { background: var(--к-4); color: var(--текст); }
.мини[data-выбрана] { background: var(--акцент); border-color: transparent; color: #fff; }
:root[data-тема="цветная"] .мини[data-выбрана] { background: #4a7bc8; }

/* В цветной теме кнопки должны выглядеть кнопками, а не полями ввода:
 * на белом фоне панели белая кнопка неотличима от поля. */
:root[data-тема="цветная"] .кнопка {
  background: linear-gradient(var(--к-0), var(--к-2));
  border-color: var(--край-ярче);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}
:root[data-тема="цветная"] .кнопка:hover:not(:disabled) {
  background: linear-gradient(var(--к-0), var(--к-3));
}
:root[data-тема="цветная"] .кнопка.тихая { background: transparent; box-shadow: none; }
/* …НО ГЛАВНАЯ КНОПКА ОСТАЁТСЯ ГЛАВНОЙ.
 *
 * Правило выше (`:root[data-тема="цветная"] .кнопка`) весит 0,3,0 и обходит
 * `.кнопка.главная` (0,2,0). В цветной теме главная кнопка получала светлый
 * градиент, а белый текст от `.главная` оставался — белым по белому. В
 * панелях это не было видно: там побеждало ещё более весомое
 * `.панель[data-цвет] .кнопка.главная` с цветом панели. А в ЛЕНТЕ панели нет,
 * и все «применить», «Вынуть», «Нарисовать» стояли нечитаемыми. Владелец
 * 13.09.2026: «практически все кнопки „применить“ или другие кнопки на
 * верхней панели, написанные белым шрифтом на белых панелях, в цветной теме
 * нечитабельны». Замер контраста: 1,24 при норме от 4,5.
 *
 * Отсюда правило на будущее: всякое «покрасим все кнопки темы» обязано тут же
 * оговорить `.главная` — иначе оно её съест. */
:root[data-тема="цветная"] .кнопка.главная {
  background: var(--акцент);
  border-color: transparent;
  color: var(--акцент-текст);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
:root[data-тема="цветная"] .кнопка.главная:hover:not(:disabled) {
  background: var(--акцент);
  filter: brightness(1.08);
}
/* Та же ловушка у фишки: выбранная фишка красится акцентом и белым текстом. */
:root[data-тема="цветная"] .фишка[data-выбрана] {
  background: var(--акцент); border-color: transparent; color: #fff;
}
/* На цветной панели текст поверх её цвета берётся из `--текст-на-панели`:
 * он посчитан по яркости самой краски (см. `читаемыйНа` в main.js). Белым
 * по светло-бирюзовому «Тонкому краю» контраст был 1,77. */
:root[data-краски] .панель[data-цвет] .кнопка.главная,
:root[data-краски] .панель[data-цвет] .фишка[data-выбрана] {
  color: var(--текст-на-панели, #fff);
}

/* Выпадающий список в ленте — компактнее ряда фишек. */
.список-ленты {
  height: 24px; padding: 0 6px; border-radius: 6px; font-size: var(--кегль-мелкий);
  max-width: 130px; flex: none;
}
/* Цвет плёнки и прочие выборы цвета в ленте. */
.цвет-ленты {
  width: 28px; height: 24px; padding: 2px; border-radius: 6px; flex: none;
  border: 1px solid var(--край); background: var(--фон-поля); cursor: default;
}

/* --- свёрнутый док ------------------------------------------------------------ */

.док { position: relative; }
.свернуть-док {
  position: absolute; top: 4px; z-index: 6; width: 18px; height: 18px;
  border: 1px solid var(--край); border-radius: 5px; background: var(--к-3);
  color: var(--текст-тише); cursor: default; font-size: 10px; line-height: 1;
  display: grid; place-items: center;
}
.док[data-сторона="слева"] .свернуть-док { right: 4px; }
.док[data-сторона="справа"] .свернуть-док { left: 4px; }
.свернуть-док:hover { background: var(--к-4); color: var(--текст); }
.док.свёрнут { width: 44px !important; min-width: 44px; }
.док.свёрнут .док-тело, .док.свёрнут .тяга-дока { display: none; }
.лента-дока { display: none; flex-direction: column; align-items: center; gap: 3px;
  padding: 26px 3px 6px; }
.док.свёрнут .лента-дока { display: flex; }
.значок-дока {
  width: 34px; height: 34px; border-radius: var(--радиус-2); border: 1px solid transparent;
  background: transparent; color: var(--текст-тише); cursor: default;
  display: grid; place-items: center;
}
.значок-дока:hover { background: var(--к-3); color: var(--текст); }
.значок-дока svg { width: 18px; height: 18px; }

/* Цвет виджета — у всей группы, даже если панели бесцветные. */
.панель.плывёт.в-виджете { border-color: var(--цвет-виджета, var(--акцент)); }
.панель.плывёт.верх-виджета { border-bottom-color: var(--цвет-виджета, var(--акцент)); }
.панель.плывёт.середина-виджета {
  border-top-color: var(--цвет-виджета, var(--акцент));
  border-bottom-color: var(--цвет-виджета, var(--акцент));
}
.панель.плывёт.низ-виджета { border-top-color: var(--цвет-виджета, var(--акцент)); }
.панель.плывёт.верх-виджета .шапка-панели::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--цвет-виджета, var(--акцент));
}
.панель.плывёт.в-виджете .шапка-панели { position: relative; }
.кнопка-шапки.домой { color: var(--текст-тише); }

/* У внутренних панелей виджета тяга ширины прячется: ширина общая. */
.панель.середина-виджета .тяга-уг, .панель.верх-виджета .тяга-уг { display: none; }

/* --- навигатор ---------------------------------------------------------------- */

/* НАВИГАТОР ВПИСЫВАЕТСЯ В ПАНЕЛЬ ЦЕЛИКОМ, БЕЗ ПОЛОСЫ ПРОКРУТКИ.
 *
 * `место` забирает всю высоту, что осталась от бегунка и нижнего ряда
 * (`flex: 1` + `min-height: 0` — без второго флекс-ребёнок не сжимается ниже
 * содержимого, и вся затея рассыпается). Само оно ничего не прокручивает:
 * миниатюру под эту высоту рисуют уже в `панельНавигатора.обновить`.
 *
 * `короб` облегает миниатюру по её размеру — от этого считается рамка
 * видимой области. Растяни он на всю ширину, на узком документе рамка
 * съезжала бы на пустое поле сбоку. */
/* Корень навигатора занимает всю высоту тела панели — иначе «свободной
 * высоты» для места просто не возникает: тело растянуто, а содержимое в нём
 * жмётся кверху. */
.навигатор { flex: 1; min-height: 0; }
.место-навигатора {
  flex: 1; min-height: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.панель[data-закреплена] .навигатор .место-навигатора,
.панель[data-своя-высота] .навигатор .место-навигатора,
.панель[data-свояВысота] .навигатор .место-навигатора { min-height: 48px; }
/* У навигатора прокрутке взяться неоткуда — и не должно быть видно её следов
 * даже на миг, пока пересчитывается миниатюра. */
.панель:has(> .тело-панели > .навигатор) > .тело-панели { overflow: hidden; }
.короб-навигатора {
  position: relative; border: 1px solid var(--край); border-radius: 8px;
  overflow: hidden; background: #000; line-height: 0;
}
.кроха-навигатора { display: block; cursor: crosshair; }
.рамка-навигатора {
  position: absolute; border: 1.5px solid var(--акцент); pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.28);
}
.бегунок-масштаба { width: 100%; accent-color: var(--акцент); height: 18px; }
.поле-масштаба { width: 64px; text-align: right; }

/* Панель с заданной вручную высотой перестаёт быть растущей — иначе флекс
 * дока сожмёт её обратно и протяжка вниз будет бесполезной. */
.панель[data-своя-высота], .панель[data-свояВысота] { flex: none !important; }

/* ...и обязана сама прокручиваться.
 *
 * Прилепленная панель обычно показывает содержимое целиком, а прокручивается
 * столбец дока. Но стоило задать её телу высоту руками — и всё, что ниже,
 * просто пропадало: у `.панель` стоит `overflow: hidden`, а полосы прокрутки
 * не было ни одной (владелец 12.09.2026 — «прокрутка не активируется»).
 * `min-height: 0` обязателен: без него флекс-ребёнок не сжимается ниже
 * содержимого и прокручивать становится нечего. */
.панель[data-своя-высота], .панель[data-свояВысота] {
  display: flex; flex-direction: column;
}
.панель[data-своя-высота] .тело-панели,
.панель[data-свояВысота] .тело-панели {
  flex: 1; min-height: 0; overflow-y: auto;   /* см. `.слои`: без `contain` */
}
.панель.вбок .шапка-панели { cursor: default; }

/* Полоса меню: те же команды, что и в поиске, но глазами. */
#меню-сверху { display: flex; gap: 1px; align-items: center; }
#меню-сверху .кнопка { padding: 0 8px; }
.меню { max-height: 70vh; overflow-y: auto; }

/* --- обвязка холста ---------------------------------------------------------
 * Всё здесь полупрозрачно и неконтрастно: яркая панель у края полотна сбивает
 * оценку цвета не хуже цветного интерфейса. В покое обвязка почти растворена,
 * проявляется при подходе мыши к холсту. */

.обвязка {
  position: absolute; z-index: 4; pointer-events: none;
  opacity: 0; transition: opacity 160ms var(--кривая);
}
#сцена:hover .обвязка { opacity: 0.55; }
.обвязка:hover { opacity: 1; }
#сцена:hover .панелька-холста { opacity: 0.7; }
.панелька-холста:hover { opacity: 1; }

.тяга-холста {
  position: absolute; pointer-events: auto;
  background: rgba(150, 180, 220, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 3px;
  backdrop-filter: blur(3px);
  transition: background 120ms var(--кривая), transform 120ms var(--кривая);
}
.тяга-холста:hover {
  background: rgba(120, 170, 255, 0.85); transform: scale(1.25);
}
/* Размеры в экранных точках: тяги не должны раздуваться вместе с зумом —
 * поэтому они снаружи преобразования, в отдельном слое поверх обёртки. */
.т-сз, .т-св, .т-юз, .т-юв { width: 12px; height: 12px; }
.т-с, .т-ю { height: 9px; width: 42px; }
.т-з, .т-в { width: 9px; height: 42px; }
/* ТЯГИ СТОЯТ СНАРУЖИ ХОЛСТА, А НЕ ВЕРХОМ НА ЕГО КРАЮ.
 *
 * Прежде они сидели на краю серединой, и шесть точек каждой лежали НА
 * картинке: начать выделение от самого угла холста было нельзя — нажатие
 * доставалось тяге (жалоба владельца 12.09.2026). А угол — ровно то место,
 * откуда выделение рамкой и начинают.
 *
 * Теперь между тягой и краем два просвета: тяга целиком за пределами кадра,
 * и первая же точка картинки принадлежит инструменту. Зазор маленький
 * нарочно — тяга должна читаться как край холста, а не как что-то отдельное,
 * летающее рядом. */
.т-сз { left: -14px; top: -14px; cursor: nwse-resize; }
.т-св { right: -14px; top: -14px; cursor: nesw-resize; }
.т-юз { left: -14px; bottom: -14px; cursor: nesw-resize; }
.т-юв { right: -14px; bottom: -14px; cursor: nwse-resize; }
.т-с { left: 50%; top: -11px; margin-left: -21px; cursor: ns-resize; }
.т-ю { left: 50%; bottom: -11px; margin-left: -21px; cursor: ns-resize; }
.т-з { top: 50%; left: -11px; margin-top: -21px; cursor: ew-resize; }
.т-в { top: 50%; right: -11px; margin-top: -21px; cursor: ew-resize; }

.панелька-холста {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 5; opacity: 0; transition: opacity 160ms var(--кривая);
  display: flex; align-items: center; gap: 2px; padding: 4px 6px;
  border-radius: 12px; pointer-events: auto;
  background: rgba(24, 28, 33, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}
:root[data-тема="светлая"] .панелька-холста,
:root[data-тема="цветная"] .панелька-холста {
  background: rgba(252, 252, 253, 0.6); border-color: rgba(0, 0, 0, 0.1);
}
.кнопка-холста {
  width: 26px; height: 26px; border: 0; border-radius: 8px; cursor: default;
  background: transparent; color: rgba(235, 240, 245, 0.72); font-size: 13px;
  display: grid; place-items: center;
}
:root[data-тема="светлая"] .кнопка-холста,
:root[data-тема="цветная"] .кнопка-холста { color: rgba(30, 36, 42, 0.72); }
.кнопка-холста:hover { background: rgba(255, 255, 255, 0.16); color: inherit; }
.черта-холста { width: 1px; height: 15px; background: rgba(255, 255, 255, 0.18); }

.счётчик-холста {
  position: absolute; transform: translate(-50%, -50%);
  padding: 4px 9px; border-radius: 8px; pointer-events: none;
  background: rgba(20, 24, 28, 0.78); color: #fff;
  font-family: var(--шрифт-цифр); font-size: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

/* Подложка с цветом: клетка гасится, остаётся ровный тон. */
#подложка[data-цветной="1"] { background-image: none; }

/* Кнопка обрыва прямо в полосе работы: пока модель думает, работа стоит, и
 * ждать ненужный просчёт незачем. */
#полоса-работы .стоп {
  width: 18px; height: 18px; border: 0; border-radius: 5px; cursor: default;
  background: rgba(255, 255, 255, 0.12); color: inherit; font-size: 10px;
  display: grid; place-items: center;
}
#полоса-работы .стоп:hover { background: rgba(255, 90, 90, 0.5); color: #fff; }

/* Пояснение внутри панели: спокойный тон, не спорит с подписями полей. */
.заметка {
  font-size: 11px;
  line-height: 1.45;
  color: var(--текст-тише);
  padding: 2px 2px 4px;
}

/* --- окно фильтров ---------------------------------------------------------
 *
 * Сетка, которая сама решает, сколько плиток в ряд: миниатюра 150 точек —
 * это тот размер, на котором ещё видно зерно и растр, а меньше делать нельзя,
 * иначе все фильтры выглядят одинаково.
 */
.сетка-фильтров {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  max-height: 52vh;
  overflow-y: auto;
  padding: 2px;
}

.плитка-фильтра {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 6px 8px;
  background: var(--фон-поля);
  border: 1px solid var(--край);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  transition: border-color .12s, transform .12s;
}

.плитка-фильтра:hover { border-color: var(--край-ярче); transform: translateY(-1px); }
.плитка-фильтра[data-выбран] {
  border-color: var(--акцент);
  box-shadow: 0 0 0 1px var(--акцент) inset;
}

.плитка-фильтра .кроха {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 7px;
  overflow: hidden;
  background: var(--холст-поле);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
}

.плитка-фильтра .кроха canvas,
.плитка-фильтра .кроха img { width: 100%; height: 100%; object-fit: cover; display: block; }

.плитка-фильтра .имя-фильтра { font-size: 12px; font-weight: 600; }
.плитка-фильтра .о-фильтре {
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--текст-тише);
}

/* --- маска слоя в панели ----------------------------------------------------
 *
 * Кроха маски стоит вплотную к крохе слоя и связана с ней скобкой: так сразу
 * видно, что это одна пара, а не два слоя. Рамка показывает, куда сейчас
 * пишет кисть — без неё рисование по маске идёт вслепую.
 */
.слой .кроха.маска {
  background-color: #000;
  background-size: cover;
  margin-left: -2px;
  position: relative;
}

.слой .кроха.маска::before {
  content: "";
  position: absolute;
  left: -5px; top: 50%;
  width: 4px; height: 1px;
  background: var(--текст-совсем-тихо);
}

.слой .кроха[data-пишем] {
  outline: 2px solid var(--акцент);
  outline-offset: 1px;
}

.слой .кроха.маска[data-выключена] { opacity: 0.4; }
.слой .кроха.маска[data-выключена]::after {
  content: "✕";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--беда);
  font-size: 15px;
}

/* Обтравленный слой сдвинут вправо со стрелкой вниз — как в больших
 * редакторах: видно, что он принадлежит слою под собой. */
.слой[data-подрезан] .имя { padding-left: 12px; position: relative; }
.слой[data-подрезан] .имя::before {
  content: "↳";
  position: absolute;
  left: 0;
  color: var(--текст-совсем-тихо);
}

/* Короткая подсветка панели, к которой человека только что отправили
 * кнопкой из ленты: без неё «Ручки…» выглядит как не сработавшая кнопка. */
@keyframes мигнуть-панелью {
  0%, 100% { box-shadow: none; }
  30%, 70% { box-shadow: 0 0 0 2px var(--акцент), var(--тень-панели); }
}

[data-мигает] { animation: мигнуть-панелью 1.1s ease-in-out; }

/* --- кукла света, метки на холсте, полоса диапазона ------------------------
 *
 * Кукла — единственное место в панелях, где картинка занимает много места.
 * Оправдание простое: она заменяет собой три подписи и один ползунок, а
 * читается мгновенно. Остальное здесь подчиняется общему правилу: ничего
 * цветного, кроме того, что цветное по смыслу (цвет источника). */

.кукла { position: relative; align-self: center; width: 190px; height: 190px; }
.кукла-холст {
  width: 190px; height: 190px; border-radius: var(--радиус-3);
  background: var(--к-0); display: block;
}
.кукла-метки {
  position: absolute; left: 0; top: 0; width: 190px; height: 190px;
  cursor: crosshair;
}
.кукла-подпись { position: absolute; left: 0; right: 0; bottom: -16px; text-align: center; }

/* --- метки на холсте --- */

.метки-глубины { position: absolute; inset: 0; pointer-events: none; }
.метка {
  position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; pointer-events: auto; cursor: grab;
  background: var(--цвет-метки, #fff);
  border: 2px solid rgba(0, 0, 0, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 2px 10px rgba(0, 0, 0, 0.5);
}
.метка:active { cursor: grabbing; }
/* Ловить восемнадцать точек мышью неудобно, а делать кружок крупнее — значит
 * закрыть им картинку. Поэтому область попадания больше кружка: невидимое
 * кольцо вокруг. Приём старый и безотказный. */
.метка:not(.метка-фокус)::after {
  content: ""; position: absolute; inset: -9px; border-radius: 50%;
}
.метка[data-выбран] {
  box-shadow: 0 0 0 2px var(--акцент), 0 0 18px 4px rgba(76, 141, 255, 0.35);
}
/* Метка фокуса — прицел, а не лампа: её дело показывать плоскость, а не
 * светить. Форма разная нарочно, чтобы их нельзя было перепутать. */
.метка-фокус {
  width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  background: transparent; border: 2px solid rgba(255, 255, 255, 0.9);
}
.метка-фокус::before, .метка-фокус::after {
  content: ""; position: absolute; background: rgba(255, 255, 255, 0.9);
}
.метка-фокус::before { left: 50%; top: -7px; width: 1px; height: 40px; margin-left: -0.5px; }
.метка-фокус::after { top: 50%; left: -7px; height: 1px; width: 40px; margin-top: -0.5px; }
.метка-цель {
  width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 3px;
  opacity: 0.75;
}
.подпись-метки {
  position: absolute; left: 50%; top: 20px; transform: translateX(-50%);
  font-size: 10px; color: var(--текст); white-space: nowrap;
  background: rgba(0, 0, 0, 0.55); padding: 1px 5px; border-radius: 4px;
  pointer-events: none;
}

/* --- полоса диапазона с гистограммой --- */

.диапазон { display: flex; flex-direction: column; gap: 4px; }
.полоса-диапазона {
  position: relative; height: 44px; border-radius: var(--радиус-1);
  background: var(--фон-поля); border: 1px solid var(--край);
}
/* НЕ `overflow: hidden`. Ручки стоят по краям полосы и наполовину выходят
 * наружу; обрезка оставляла от крайней ручки семь точек, и подцепить её
 * мышью было почти нельзя. Обрезать нечего: гистограмма и выбор и так лежат
 * внутри. */
.полоса-диапазона .гистограмма {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: var(--радиус-1);
}
.полоса-диапазона .выбор {
  position: absolute; top: 0; bottom: 0; background: var(--акцент-тише);
  border-left: 1px solid var(--акцент); border-right: 1px solid var(--акцент);
}
.полоса-диапазона .ручка {
  position: absolute; top: -4px; bottom: -4px; width: 20px; margin-left: -10px;
  cursor: ew-resize; pointer-events: auto;
}
.полоса-диапазона .ручка::after {
  content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px;
  background: var(--акцент); border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.полоса-диапазона .ручка:hover::after { box-shadow: 0 0 6px 1px var(--акцент); }
.числа-диапазона { text-align: right; }

/* --- список источников --- */

.источник {
  min-height: var(--строка); padding: 0 4px 0 6px; border-radius: var(--радиус-1);
  cursor: default; border: 1px solid transparent;
}
.источник:hover { background: var(--к-3); }
.источник[data-выбран] { background: var(--к-3); border-color: var(--акцент); }
.точка-цвета {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}

/* --- шапка движка в панели модели ------------------------------------------
 *
 * «Чем рисовать» — первое, что человек должен видеть в панели, а не то, что
 * лежит под тремя рядами кнопок: от выбора движка зависит и цена работы, и
 * что вообще можно. Поэтому строка выделена подложкой и стоит над всем. */
.шапка-движка {
  padding: 5px 7px; border-radius: var(--радиус-1);
  background: var(--к-3); border: 1px solid var(--край);
}
.шапка-движка .фишка[data-выбрана] { font-weight: 600; }

/* --- прокрутка панели, когда содержимого больше, чем места ------------------
 *
 * Прилепленная панель показывает всё содержимое целиком, а прокручивается
 * столбец дока. Плавающая так не может: у неё своя высота, и всё, что ниже,
 * прежде просто обрезалось (жалоба владельца 12.09.2026 — «панель скрывает
 * кнопки, и нельзя скроллить»). Поэтому у плавающей панели прокручивается
 * её собственное тело. */
.панель.плывёт { display: flex; flex-direction: column; }
.панель.плывёт .тело-панели { flex: 1; min-height: 0; overflow-y: auto; }

/* Ручки, которым сейчас не на чем работать: видно, что они есть, и видно, что
 * сейчас они ничего не сделают. Прятать их нельзя — тогда о них не узнают. */
#лента [data-тихо] { opacity: 0.45; }

/* Кнопка, которая снимает помеху, а не делает работу: тёплая, чтобы её было
 * видно среди серых, но не главная — она ничего не создаёт. */
.кнопка[data-тревога] {
  border-color: rgba(224, 120, 90, 0.5); color: #e0785a;
}
.кнопка[data-тревога]:hover { background: rgba(224, 120, 90, 0.14); }

/* Фишка-силуэт: квадратная, и рисунок в ней тянется по размеру, а не по
 * числу букв. */
.фишка.со-значком { padding: 0 7px; display: inline-grid; place-items: center; }
.фишка.со-значком svg { width: 16px; height: 16px; display: block; }

/* --- объяснение под кружком «i» --------------------------------------------- */
.с-пояснением { display: flex; flex-direction: column; gap: 2px; }
.строка-пояснения { display: flex; align-items: flex-start; gap: 6px; }
.строка-пояснения > :first-child { flex: 1; min-width: 0; }
.значок-i {
  flex: none; width: 16px; height: 16px; margin-top: 2px;
  border-radius: 50%; border: 1px solid var(--край-ярче);
  background: transparent; color: var(--текст-совсем-тихо);
  font-size: 10px; font-weight: 700; font-style: italic; line-height: 1;
  display: grid; place-items: center; cursor: default; padding: 0;
  transition: background var(--скорость) var(--кривая), color var(--скорость) var(--кривая);
}
.значок-i:hover { background: var(--к-4); color: var(--текст); }
.значок-i[data-открыт] {
  background: var(--акцент-тише); color: var(--акцент); border-color: var(--акцент);
}
.текст-пояснения {
  padding-left: 8px; border-left: 2px solid var(--акцент-тише); margin-bottom: 2px;
}

/* --- панель настроек выделения --------------------------------------------- */
/* У каждой ручки под ней объяснение словами, поэтому строк много, а разделять
 * их нужно тише, чем вертикальным разделителем в ленте. */
.разделитель-строка { height: 1px; background: var(--край-ярче); margin: 2px 0; }
.подпись.сильная { color: var(--текст); font-weight: 600; }
.жест-выделения { gap: 1px; padding: 3px 0 3px 8px; border-left: 2px solid var(--край-ярче); }
.жест-выделения:hover { border-left-color: var(--акцент); }

/* --- список найденного в наброске ------------------------------------------ */
/* Ответ разбора — первой строкой и заметнее прочих заметок: человек нажал
 * кнопку ради него одного. */
.разбор-наброска {
  border-left: 2px solid var(--акцент); padding-left: 8px; color: var(--текст);
}
.предмет-наброска { gap: 6px; align-items: center; }
.предмет-наброска[data-неузнан] .кроха-наброска { border-color: var(--акцент); }
.предмет-наброска[data-неузнан] input {
  border-color: var(--акцент); background: var(--акцент-тише);
}
.кроха-наброска {
  width: 38px; height: 38px; object-fit: contain; flex: none;
  background: var(--фон-поля); border: 1px solid var(--край);
  border-radius: var(--радиус-1);
}

/* --- свободная трансформация ----------------------------------------------- */
/* Короб лежит поверх всей сцены и сам мышь не ловит: ловят её тяги и контур.
 * Иначе рамка перехватывала бы щелчки по холсту за своими пределами. */
.рамка-трансформации {
  position: absolute; inset: 0; z-index: 25; pointer-events: none;
}
.контур-трансформации { position: absolute; inset: 0; width: 100%; height: 100%; }
.контур-трансформации polygon {
  fill: rgba(76, 141, 255, 0.10); stroke: var(--акцент); stroke-width: 1.5;
  vector-effect: non-scaling-stroke; pointer-events: auto; cursor: move;
}
.тяга-трансформации {
  position: absolute; width: 11px; height: 11px; margin: -6px 0 0 -6px;
  background: var(--фон-панели-плотный, #fff); border: 1.5px solid var(--акцент);
  border-radius: 2px; pointer-events: auto;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.тяга-трансформации:hover { background: var(--акцент); }

/* Выбор модели OpenRouter в ленте.
 *
 * Именно select, а не кучка кнопок: моделей полсотни, и в ленту они не влезут
 * никаким сжатием. Вид подогнан под соседние кнопки «мини», чтобы строка не
 * разъезжалась. */
.выбор-модели {
  max-width: 230px; height: 22px; padding: 0 4px;
  border: 1px solid var(--край); border-radius: 6px;
  background: var(--к-3); color: var(--текст-тише);
  font: inherit; font-size: var(--кегль-мелкий); cursor: pointer;
}
.выбор-модели:hover { background: var(--к-4); color: var(--текст); }