, не background у самого .up-scan-wrap/.up-scan-overlay —
те уже участвуют в background от комбинируемых классов (.up-img-wrap/
.acb-scan-wrap), а background — shorthand: сбросил бы background-image в
none, если бы их правило в CSS шло позже этого. Просто первый ребёнок в
разметке — красится "под" всем остальным без z-index. ── */
.up-scan-dots {
position: absolute; inset: 0; pointer-events: none;
background-image: radial-gradient(circle, rgba(28,58,87,.14) 1px, transparent 1.35px);
background-size: 15px 15px;
animation: upScanDots 18s linear infinite;
}
@keyframes upScanDots {
from { background-position: 0 0; }
to { background-position: -225px -225px; } /* 225/15=15 — кратно шагу, петля бесшовная */
}
@media (prefers-reduced-motion: reduce) {
.up-scan-dots { animation: none; }
}
.up-scan-beam {
position: absolute; left: 0; width: 100%; height: 26%; top: 0;
background: linear-gradient(to bottom,
rgba(109,94,240,0) 0%,
rgba(109,94,240,.10) 45%,
rgba(109,94,240,.28) 82%,
rgba(255,255,255,.85) 97%,
rgba(109,94,240,0) 100%);
animation: upScan 2.3s cubic-bezier(.45,.05,.55,.95) infinite;
pointer-events: none;
}
@keyframes upScan {
0% { transform: translateY(-110%); }
100% { transform: translateY(500%); } /* 100/26 ≈ 3.85 своих высот до низа + запас за край */
}
/* ── Декоративный акцент по центру сканера (ScanSparkle, studio-extras.jsx)
— единый для ЛЮБОГО места ожидания ИИ-ответа на сайте (основная
генерация, апскейл, адаптация формата, подготовка к печати, правка по
маске). cqmin — % от меньшей стороны АКТУАЛЬНОГО бокса (см.
container-type:inline-size на .up-scan-wrap/.up-scan-overlay выше), поэтому
один и тот же размер-формула одинаково хорошо смотрится и на тонкой
визитке, и на высоком плакате, и на маленькой миниатюре — без частных
переопределений под каждый инструмент. Второе значение width —
фоллбэк на px для браузеров без поддержки cqmin (перекрывается clamp
там, где cqmin понимается). ── */
.up-sparkle {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
pointer-events: none; z-index: 2;
/* cqmin здесь — известное ограничение спеки, не баг разметки: контейнер
объявлен container-type:inline-size (только по ширине, см. комментарий
.up-scan-wrap выше — намеренно, из-за апскейлера/адаптера, где высота
блока считается от контента), а у контейнеров без containment по
блочной оси cqb/cqh по спеке резолвятся от viewport, не от реального
контейнера — поэтому 72cqmin на практике вёл себя как чистый 72cqw
(ширина), НЕ учитывая высоту вовсе. С потолком 252px (было) это почти
не было заметно на типичных размерах; без потолка (первый заход
2026-08-07) искорка на широкой/невысокой визитке вылезала далеко за
верх/низ карточки — репродуцировано скриншотом. Фикс: --sparkle-max —
CSS-переменная, которую конкретное место use-сайта может выставить
инлайн-стилем на реальный min(ширина, высота) СВОЕГО бокса (см.
studio.jsx, busy-ветка EmptyCanvas, там же и посчитан правильный
max(w,h) для текущего формата макета) — без неё (остальные места:
апскейлер/адаптер/подготовка к печати/правка по маске) поведение не
меняется, старый потолок 252px остаётся запасным значением. */
width: 168px;
width: max(84px, min(72cqw, var(--sparkle-max, 252px)));
aspect-ratio: 1 / 1;
filter: drop-shadow(0 3px 10px rgba(35,20,70,.28));
}
.up-sparkle svg { display: block; width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) {
.up-sparkle { display: none; }
}
/* ── Появление готового результата: из лёгкого блюра в резкость — само
движение «мутное → чёткое» и есть сообщение продукта. Лёгкий contrast/
saturate на итоговой картинке — переезд рабочей части бывшего инлайн-
фильтра (его ломал невалидный sharpen(1)).
⚠ Анимация ИМЕННО на img, не на .up-img-wrap: любой filter (даже blur(0)
в конечном кадре с fill both) делает элемент containing block для
position:fixed потомков — лупа (.up-loupe, fixed по координатам курсора)
начинала позиционироваться от обёртки, улетала за её границы и срезалась
её overflow:hidden. Так лупа «пропала» на готовом результате. У img
позиционируемых потомков нет — блюрить его безопасно. Конечный кадр
совпадает со статичным filter, поэтому fill-режим не нужен вовсе. ── */
.up-reveal img {
filter: contrast(1.04) saturate(1.08);
animation: upReveal .8s var(--ease);
}
@keyframes upReveal {
from { opacity: .35; filter: blur(14px); }
to { opacity: 1; filter: blur(0) contrast(1.04) saturate(1.08); }
}
@media (prefers-reduced-motion: reduce) {
.up-scan-beam { animation: none; display: none; }
.up-scan-img { transition: none; }
.up-reveal img { animation: none; }
}
/* ============================================================
MINI EDITOR PAGE (miniEditor.jsx, "Миниредактор")
============================================================ */
.studio-app.mini-mode .settings-panel {
flex: 0 0 380px; width: 380px; min-width: 380px; max-width: 380px; transition: none;
}
.studio-app.mini-mode .mini-canvas {
flex: 1 1 auto; width: auto; min-width: 0; opacity: 1; overflow: auto;
display: flex; align-items: center; justify-content: center; padding: 26px;
}
/* Мобильный режим Миниредактора не был описан вообще — ни здесь, ни в общем
мобильном блоке (там своя `.canvas`, у мини-редактора отдельный класс
`.mini-canvas`, общие правила её не касаются). В итоге на телефоне
работали ДВА необъяснённых десктопных правила разом: колонка настроек
держала жёсткие min/max-width:380px (тесно, но терпимо на 390px), а вот
`.mini-canvas` с overflow:auto и БЕЗ min-height превращалась в flex-item с
автоминимумом 0 (так по спеке ведёт себя overflow≠visible) — сжималась
почти до нуля вместо естественной высоты своего контента. Сам холст
(.mini-stage, flex:none, размер по инлайн-стилю от реального фото) при
этом рисовался в НАТУРАЛЬНУЮ величину поверх схлопнутого родителя и
визуально наезжал на кнопки тулбара ("Передать в промпт"/"В обработку"
были видны только узкими полосками из-под холста, зум-бар перекрывал
"Скачать") — дизайн-аудит 2026-08-07. Тот же класс бага, что уже чинили
выше для .settings-panel/.settings-body — тот же приём (flex:none). */
@media (max-width: 900px) {
.studio-app.mini-mode .settings-panel {
width: 100% !important; max-width: none; min-width: 0; flex: none;
/* order:2 — запрос владельца 2026-08-08: в Миниредакторе, в отличие от
Апскейлера/Адаптера/PrintPrep (там панель настроек НАД холстом —
разумно, редактировать нечего, пока не загрузили фото), фото уже
ЕСТЬ и это то, ради чего открыли инструмент — на телефоне логичнее
сначала увидеть само изображение, а инструменты редактирования
пролистать ниже. */
order: 2;
}
.studio-app.mini-mode .mini-canvas {
width: 100% !important; flex: none; min-height: 60vh; padding: 16px;
order: 1;
}
}
/* Колонка "макет + история под ним" (запрос 2026-07-26) — раньше .mini-canvas
был flex-row без direction, и зум-бар с рабочей областью вставали В РЯД,
а не друг над другом; из-за этого зум-бар был почти не виден. position:
relative — точка отсчёта для плавающей .mini-zoom-bar (см. ниже), которая
не должна скроллиться вместе с .mini-stage-wrap при зуме/панорамировании. */
.mini-canvas-panel {
position: relative; display: flex; flex-direction: column; align-items: center;
gap: 14px; width: 100%; height: 100%; min-height: 0;
}
.mini-saved-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.mini-saved-thumb {
/* border-radius: 0 (см. .up-img-wrap выше) — миниатюра реального
сохранённого макета, не декоративная иконка. */
flex: none; width: 64px; height: 64px; border-radius: 0; overflow: hidden;
border: 1.5px solid var(--line); background: var(--paper-2); padding: 0; cursor: pointer;
transition: border-color .15s;
}
.mini-saved-thumb:hover { border-color: var(--navy); }
.mini-saved-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Единая панель "инструменты + цвета" (запрос 2026-07-26 "свести в одну
общую панель как в Photoshop, правильно расположить") — одна карточка,
иконки-инструменты БЕЗ подписей сверху (только title-tooltip, как в
настоящей панели PS) и накладывающиеся цветовые плашки снизу. */
.mini-toolbar-card {
padding: 10px; border-radius: 12px; border: 1px solid var(--line-strong);
background: var(--surface); box-shadow: var(--sh-sm);
}
/* Все 7 инструментов в один ряд (запрос владельца 2026-07-31) — раньше
4+3 в две строки, занимало лишнюю строку по высоте без надобности:
ширины панели (~340px) достаточно, чтобы 7 квадратных кнопок влезли
в одну строку и остались нажимаемыми (~40px каждая). */
.mini-tool-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.mini-tool-btn {
display: flex; align-items: center; justify-content: center;
aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--line);
background: var(--paper-2); color: var(--ink-soft); cursor: pointer; transition: all .15s;
}
.mini-tool-btn:hover { border-color: var(--line-strong); color: var(--ink); }
.mini-tool-btn.active { background: var(--navy); border-color: var(--navy); color: #fff; }
/* Накладывающиеся плашки основного/второго цвета — тот же силуэт, что и
foreground/background swatch в панели инструментов Photoshop: второй цвет
квадратом ПОД, основной — квадратом НАД со сдвигом, стрелка обмена в углу.
Реальные
визуально скрыты (opacity:0, но не
display:none — так клик/фокус по-прежнему работают через .click() из JS
и с клавиатуры), кликабельная поверхность — сама цветная плашка сверху. */
/* Плашки и пипетки — вдвое крупнее (запрос 2026-07-26 "видней и крупней"):
swatch 30→60px, стрелка обмена 16→28px, ps-пипетки 22→44px. */
/* Плашки/пипетки уменьшены пропорционально однострочной сетке инструментов
выше (запрос владельца 2026-07-31, "выбор цвета пропорционально этим
кнопкам уменьшить") — swatch 60→42px (тот же размер, что и .mini-tool-btn
в один ряд), стрелка обмена и пипетки — пропорционально следом. */
.mini-ps-swatches { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.mini-ps-swatch-stack { position: relative; width: 64px; height: 64px; flex: none; }
.mini-ps-swatch {
position: absolute; width: 42px; height: 42px; border-radius: 8px;
border: 2px solid var(--line-strong); box-shadow: var(--sh-sm); cursor: pointer; padding: 0;
}
.mini-ps-swatch.secondary { right: 0; bottom: 0; }
.mini-ps-swatch.primary { left: 0; top: 0; z-index: 1; }
.mini-ps-swap {
position: absolute; top: -6px; right: -6px; z-index: 2; width: 20px; height: 20px;
border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--surface);
color: var(--ink-soft); display: flex; align-items: center; justify-content: center;
cursor: pointer; padding: 0; transition: all .15s;
}
.mini-ps-swap:hover { color: var(--navy); border-color: var(--navy); }
.mini-ps-color-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.mini-ps-eyedroppers { display: flex; flex-direction: column; gap: 6px; }
.mini-eyedropper-btn {
flex: none; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line-strong);
background: var(--surface); color: var(--ink-soft); cursor: pointer;
display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.mini-eyedropper-btn:hover { border-color: var(--line-strong); color: var(--ink); }
.mini-eyedropper-btn.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.mini-eyedropper-btn.ps { width: 34px; height: 34px; border-radius: 8px; }
.mini-eyedropper-hint { flex-basis: 100%; font-size: 11.5px; color: var(--bronze); margin-top: 6px; font-style: italic; }
/* ── Компактный редизайн панели (запрос владельца 2026-07-31, "всё на
одном экране без скролла") — "Поворот и отражение" и "Убрать
прозрачность" были двумя подписанными full-width секциями с
собственными
; теперь одна icon-only строка, тот же визуальный
язык, что и .mini-eyedropper-btn (тултип вместо подписи под кнопкой). ── */
.mini-quickrow { margin-top: 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mini-quick-btn {
flex: none; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line-strong);
background: var(--paper-2); color: var(--ink-soft); cursor: pointer;
display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.mini-quick-btn:hover { border-color: var(--line-strong); color: var(--ink); background: var(--surface); }
.mini-quickrow-div { width: 1px; height: 22px; background: var(--line-strong); flex: none; margin: 0 2px; }
/* Толщина+Прозрачность (кисть/ластик), Яркость+Контраст+Насыщенность
(коррекция) — раньше каждый был своим .field на всю ширину, стопкой;
один ряд-грид экономит по одной строке "воздуха" на каждую пару полей. */
.mini-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mini-field-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
/* user-select:none (запрос владельца 2026-08-07) — подписи ползунков
("Толщина: 24px B/E", "Прозрачность: 0%") зажимались двойным/тройным
кликом мимо самого ползунка и подсвечивались как обычный текст, хотя
ничего скопировать тут по смыслу нельзя — это подписи элемента
управления, не контент. */
.mini-field-row label, .mini-field-row-3 label { font-size: 11.5px; user-select: none; }
/* Ползунки (input[type=range]) держат браузерный дефолтный intrinsic-
размер (~130px в Chrome), больше доступной 1fr-колонки при 3 в ряд —
грид без явного min-width:0 на ячейках не сжимал их, и ряд "Яркость/
Контраст/Насыщенность" вылезал за правый край панели (репорт владельца
2026-08-03, скриншот). width:100% + min-width:0 разрешают ползунку и
его ячейке сжаться до реальной ширины колонки. */
.mini-field-row > div, .mini-field-row-3 > div { min-width: 0; }
.mini-field-row input[type="range"], .mini-field-row-3 input[type="range"] { width: 100%; }
/* Ряд действий коррекции (Сбросить/Применить/Ч-Б/Сепия) — раньше сидел на
общем .row.gap-8 (nowrap flex), в 380px-панели 4 кнопки без переноса
вылезали за правый край (тот же репорт 2026-08-03). flex-wrap здесь
безопасен — кнопки просто уйдут на вторую строку на узкой панели,
ничего не обрежется. */
.mini-adjust-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
/* Нижние действия — три второстепенных (Другое фото/Скачать/История) в
компактной 2-колоночной сетке иконка+короткая подпись вместо стопки
full-width кнопок. Главные CTA ("Передать в промпт"/"В обработку") —
ИСПРАВЛЕНО (репорт 2026-07-31 "кнопка съехала"): раньше стояли рядом в
2 колонки, и длинная подпись "В обработку" вылезала за свою половину и
обрезалась краем панели — теперь обе на всю ширину, стопкой, надёжно
при любой ширине панели. */
/* 3 колонки (было 2) — "Сохранить в историю" встала посередине, между
"Другое фото" и "Скачать" (запрос владельца 2026-08-08: "между двумя
кнопками должна быть по центру..."). */
.mini-output-secondary { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
/* На узком экране 3 равные колонки не оставляют места самой длинной подписи
("Сохранить в историю", 19 символов у .btn с white-space:nowrap) — кнопка
вылезала за правый край панели, "Скачать" уезжал за пределы экрана
(дизайн-аудит 2026-08-08, мобильный отчёт: "кнопки не должны обрезаться
в миниредакторе"). Две короткие кнопки в ряд сверху, длинная — отдельной
строкой на всю ширину снизу. */
@media (max-width: 520px) {
.mini-output-secondary {
grid-template-columns: 1fr 1fr;
grid-template-areas: "other download" "save save";
}
.mini-output-secondary > button:nth-child(1) { grid-area: other; }
.mini-output-secondary > button:nth-child(2) { grid-area: save; }
.mini-output-secondary > button:nth-child(3) { grid-area: download; }
}
.mini-output-primary-stack { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
/* Всплывающее меню "чем залить выделение" (репорт владельца 2026-08-02,
скриншот диалога Fill в Photoshop) — открывается по клику "Действие"
или клавише Del/Backspace/Enter, вместо выбора режима заливки ДО
рисования выделения. Тот же "стеклянный" попап, что у .hist-pop. */
.mini-fill-popover {
position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
min-width: 240px; background: var(--glass-bg);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
backdrop-filter: blur(var(--glass-blur)) saturate(180%);
border: 1px solid var(--glass-border);
border-radius: 14px; box-shadow: var(--glass-shadow); padding: 6px 0;
}
.mini-fill-popover-item {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 8px 14px; border: none; background: none; cursor: pointer;
font-family: var(--sans); font-size: var(--text-sm); color: var(--ink); text-align: left;
transition: background .12s;
}
.mini-fill-popover-item:hover { background: var(--paper-2); }
.mini-fill-popover-item svg { flex: none; color: var(--ink-soft); }
.mini-fill-popover-item-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mini-fill-popover-item-text small { font-size: 11px; font-weight: 400; color: var(--muted); }
.mini-fill-popover-swatch {
width: 16px; height: 16px; border-radius: 50%; flex: none;
border: 1.5px solid var(--line-strong); box-shadow: 0 0 0 1px var(--surface) inset;
}
.mini-fill-popover-sep { height: 1px; margin: 5px 0; background: var(--line); flex: none; }
.mini-select {
width: 100%; height: 40px; border-radius: 9px; border: 1px solid var(--line-strong);
background: var(--surface); color: var(--ink); padding: 0 10px; font-size: var(--text-sm);
font-family: var(--sans); cursor: pointer;
}
/* Черновик текста на канвасе (запрос 2026-07-26, п.7) — обёртка на точке
canvasPt (родитель — position:relative, см. .mini-stage), transform-origin
в её углу: CSS-поворот всей обёртки (доп. пункт "поворот текста") держит
хендл и textarea синхронными без пересчёта их координат под угол — см.
commitTextDraft/JSX. */
.mini-text-draft-wrap { position: absolute; z-index: 5; transform-origin: 0 0; }
.mini-text-draft-input {
position: absolute; min-width: 60px; min-height: 1.4em;
background: rgba(255,255,255,.82); border: 1.5px dashed var(--navy);
border-radius: 4px; padding: 2px 4px; outline: none; resize: both;
line-height: 1.25; white-space: pre; overflow: hidden;
}
[data-theme="dark"] .mini-text-draft-input { background: rgba(20,20,20,.82); }
.mini-hint-card {
display: flex; align-items: flex-start; gap: 10px;
padding: 13px 14px; border-radius: 12px;
border: 1px dashed var(--bronze); background: var(--bronze-tint);
font-size: var(--text-sm); line-height: 1.5; color: var(--bronze); margin-top: 14px;
}
.mini-hint-card svg { flex: none; margin-top: 2px; }
/* Панель "Применить/Отменить выделение" (репорт владельца 2026-08-02:
действие больше не запускается само по себе, как только контур
замкнулся — сначала можно добавить/убрать области Shift/Ctrl, действие
выполняется только по явному клику "Применить"). */
.mini-selection-apply-bar {
margin-top: 12px; padding: 12px 14px; border-radius: 12px;
border: 1px solid var(--navy); background: var(--navy-tint);
}
/* Оверлей "идёт обработка" поверх холста, пока летит запрос к бесплатному
IOPaint или платной генеративной модели (репорт владельца 2026-08-02:
"не видно что идёт реальная генерация") — раньше единственным сигналом
был текст подсказки в левой панели. */
.mini-busy-overlay {
position: absolute; inset: 0; z-index: 5;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
background: rgba(10,12,16,.55); border-radius: inherit;
}
.mini-busy-overlay-text { color: #fff; font-size: 13.5px; font-weight: 600; text-align: center; padding: 0 20px; }
.mini-output-actions { display: flex; flex-direction: column; gap: 6px; }
.mini-output-actions .btn { justify-content: center; }
/* overflow: auto (доп. пункт "зум/пан", 2026-07-26) — при zoom > 1
увеличенный холст не помещается в видимую область, скролл нативный,
без отдельного pan-инструмента/перетаскивания холста. */
.mini-stage-wrap { display: flex; align-items: center; justify-content: center; width: 100%; flex: 1 1 auto; min-height: 0; overflow: auto; }
/* "Оконка лупы" с зумом (запрос 2026-07-26) — плавающая пилюля в правом
верхнем углу области макета (.mini-canvas-panel — position:relative),
НЕ внутри скроллящегося .mini-stage-wrap, поэтому остаётся на месте при
панорамировании увеличенного холста. */
.mini-zoom-bar {
position: absolute; top: 10px; right: 10px; z-index: 4;
display: flex; align-items: center; gap: 6px;
padding: 6px 10px 6px 8px; border-radius: 20px;
border: 1px solid var(--line-strong); background: var(--surface);
color: var(--ink-soft); box-shadow: var(--sh-sm);
}
.mini-zoom-btn, .mini-zoom-reset {
height: 26px; border-radius: 7px; border: 1px solid var(--line-strong);
background: var(--surface); color: var(--ink-soft); cursor: pointer;
font-size: var(--text-sm); font-family: var(--sans); transition: all .15s;
}
.mini-zoom-btn { width: 26px; display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; padding: 0; }
.mini-zoom-reset { min-width: 50px; padding: 0 6px; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.mini-zoom-btn:hover:not(:disabled), .mini-zoom-reset:hover { border-color: var(--navy); color: var(--ink); }
.mini-zoom-btn:disabled { opacity: .4; cursor: default; }
.mini-zoom-hint { font-size: 10.5px; color: var(--muted); white-space: nowrap; margin-left: 2px; }
/* История правок под макетом (запрос 2026-07-26 "переносим под макет") —
раньше жила в левой панели, теперь рядом с самим результатом. */
.mini-history-bar { display: flex; gap: 8px; flex: none; }
/* Панель настроек текста под макетом (запрос 2026-07-26 "так удобней
работать и применять окончательно") — та же карточка-паттерн, что и у
.mini-zoom-bar/.mini-hint-card, компактная строка под каждый контрол. */
.mini-text-toolbar {
flex: none; width: min(420px, 100%); display: flex; flex-direction: column; gap: 8px;
padding: 12px 14px; border-radius: 12px;
border: 1px solid var(--line-strong); background: var(--surface); box-shadow: var(--sh-sm);
}
.mini-text-toolbar-row { display: flex; align-items: center; gap: 8px; }
.mini-text-toolbar-row input[type="range"] { flex: 1; }
.mini-text-toolbar-label { font-size: 11.5px; color: var(--muted); white-space: nowrap; min-width: 92px; }
.mini-shortcut-hint { font-size: 10.5px; color: var(--muted); margin-left: 6px; font-weight: 400; }
/* Панель "Слои" (запрос 2026-07-26 "слои как в photoshop") — список сверху
вниз = порядок отображения в Photoshop (верхний слой первый), компактные
строки с превью-действиями по наведению/всегда видимыми мелкими иконками
(сайдбар узкий, места на подписи нет). */
.mini-layers-list { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.mini-layer-row {
display: flex; align-items: center; gap: 5px; padding: 6px 7px; border-radius: 8px;
border: 1px solid transparent; background: var(--paper-2); cursor: pointer; transition: all .15s;
}
.mini-layer-row:hover { border-color: var(--line); }
.mini-layer-row.active { border-color: var(--navy); background: var(--navy-tint); }
.mini-layer-eye { flex: none; width: 22px; height: 22px; border: none; background: none; color: var(--ink-soft); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.mini-layer-eye.off { opacity: .3; }
.mini-layer-name { flex: 1; min-width: 0; font-size: 12px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-layer-icon-btn {
flex: none; width: 20px; height: 20px; border: none; background: none; color: var(--ink-soft);
cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 5px; transition: all .15s;
}
.mini-layer-icon-btn:hover { background: var(--surface); color: var(--ink); }
.mini-layer-icon-btn:disabled { opacity: .25; cursor: default; }
.mini-layer-icon-btn.danger:hover { color: #e0483e; }
/* Хендл перетаскивания черновика текста (доп. пункт "подвинуть текст",
2026-07-26) — маленькая кнопка слева от textarea, тянуть за неё, а не за
само поле (иначе текстовый ввод и drag конфликтуют за mousedown). */
.mini-text-drag-handle {
position: absolute; z-index: 6; width: 20px; height: 20px; border-radius: 5px;
border: 1px solid var(--navy); background: var(--navy); color: #fff;
display: flex; align-items: center; justify-content: center; cursor: grab; padding: 0;
}
.mini-text-drag-handle:active { cursor: grabbing; }
.mini-text-draft-input.dragging { opacity: .7; }
.mini-stage {
/* border-radius: 0 (см. .up-img-wrap выше, тот же запрос 2026-07-24) —
рабочая область показа макета в миниредакторе. */
position: relative; flex: none; border-radius: 0; overflow: visible;
box-shadow: var(--sh-md);
background-image:
linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
[data-theme="dark"] .mini-stage {
background-image:
linear-gradient(45deg, #3a3a3a 25%, transparent 25%), linear-gradient(-45deg, #3a3a3a 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #3a3a3a 75%), linear-gradient(-45deg, transparent 75%, #3a3a3a 75%);
}
.mini-canvas-el { position: absolute; inset: 0; display: block; pointer-events: none; }
.mini-canvas-overlay { position: absolute; inset: 0; display: block; touch-action: none; }
.mini-canvas-overlay:focus-visible { outline: 3px solid var(--bronze); outline-offset: -3px; }
/* ============================================================
UTILITIES
============================================================ */
.muted { color: var(--muted); }
.soft { color: var(--ink-soft); }
.serif { font-family: var(--display); }
.tnum { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.click { cursor: pointer; }
.rel { position: relative; }
.hidden { display: none !important; }
.grow { flex: 1; }
.center-t { text-align: center; }
/* ============================================================
STUDIO PRO BLOCKS
============================================================ */
.lbl-soft { color: var(--muted); font-weight: 500; }
.hint-soft {
display: inline-flex; align-items: center; gap: 6px;
font-size: var(--text-sm); color: var(--muted); line-height: 1.4;
}
/* Инлайн-кнопка внутри .hint-soft (например «выбрать» у рекомендации стиля) —
выглядит как ссылка, а не отдельная кнопка, чтобы не спорить по весу с
самим текстом подсказки. */
.hint-soft-pick {
padding: 0; border: none; background: none; cursor: pointer;
font: inherit; font-weight: 700; color: var(--navy);
text-decoration: underline; text-underline-offset: 2px;
}
.hint-soft-pick:hover { color: var(--navy-deep); }
/* ---- Logo quality card ---- */
.logo-q {
border-radius: 12px; padding: 14px 16px;
border: 1px solid var(--line); background: var(--surface);
}
.logo-q.good { border-color: #B8D8C5; background: #F0F7F2; }
.logo-q.warn { border-color: #E8CFA0; background: #FBF4E6; }
.logo-q.error { border-color: #E6B6B0; background: #FBEEEC; }
[data-theme="dark"] .logo-q.good { background: #16241C; border-color: #2C4636; }
[data-theme="dark"] .logo-q.warn { background: #2A2310; border-color: #4A3D1A; }
[data-theme="dark"] .logo-q.error { background: #2A1714; border-color: #4A2722; }
.logo-q-title { font-weight: 700; font-size: var(--text-sm); color: var(--ink); }
.logo-q-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.logo-q-list li { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--ink-soft); }
.logo-q-list li svg { color: var(--good); flex: none; }
.logo-q-rec { font-size: var(--text-sm); color: var(--ink-soft); margin: 8px 0 4px; line-height: 1.5; }
.logo-q-meta { font-size: var(--text-xs); color: var(--muted); margin-bottom: 10px; }
.logo-q.warn .btn, .logo-q.error .btn { margin-top: 6px; }
/* ---- Style chips ---- */
/* 14 стилей (STYLE_CHIP_OPTIONS) в 2 строки. Именно flex-wrap, а не grid с
фиксированными колонками — там колонка тянется по САМОМУ ШИРОКОМУ элементу
среди обеих строк, и у коротких слов оставался некрасивый пробел до
следующей колонки. Flex просто пакует каждую строку по факту ширины. */
.chip-wrap { display: flex; flex-wrap: wrap; gap: 7px; }
/* Доп. верхний зазор — иначе бейдж "Топ-результат" (см. .chip-badge-rec)
налезал бы на подпись "Стиль" над первым рядом (row-gap не действует ДО
первой строки flex-wrap, поэтому нужен именно padding-top контейнера) и на
чипы предыдущего ряда. */
.chip-wrap-badged { padding-top: 11px; row-gap: 13px; }
/* Маленький бейдж в верхнем правом углу чипа (не по центру сверху) — не
перекрывает ни подпись поля, ни соседние чипы. */
.chip-badge-rec {
position: absolute; top: -8px; right: -4px;
background: #1FAA59; color: #fff; font-size: 8px; font-weight: 800;
letter-spacing: .02em; text-transform: uppercase; line-height: 1;
padding: 2px 6px; border-radius: 999px; white-space: nowrap;
box-shadow: 0 1px 4px rgba(31,170,89,.35);
}
.chip {
height: 34px; padding: 0 10px; border-radius: 40px;
border: 1px solid var(--line); background: var(--surface);
color: var(--ink-soft); font-size: var(--text-sm); font-weight: 600;
cursor: pointer; font-family: var(--sans); transition: all .15s;
display: inline-flex; align-items: center; justify-content: center; gap: 5px;
white-space: nowrap;
}
.chip:hover { border-color: var(--line-strong); color: var(--ink); }
.chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip-more { color: var(--muted); }
/* ---- Priority checks ---- */
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.check-item {
display: flex; align-items: center; gap: 9px;
height: 40px; padding: 0 12px; border-radius: 9px;
border: 1px solid var(--line); background: var(--surface);
color: var(--ink-soft); font-size: var(--text-sm); font-weight: 600;
cursor: pointer; font-family: var(--sans); transition: all .15s; text-align: left;
}
.check-item:hover { border-color: var(--line-strong); }
.check-item.on { border-color: var(--navy); background: var(--navy-tint); color: var(--navy); }
.check-box {
width: 18px; height: 18px; border-radius: 5px; flex: none;
border: 1.5px solid var(--line-strong); background: var(--surface);
display: grid; place-items: center; color: #fff; transition: all .15s;
}
.check-item.on .check-box { background: var(--navy); border-color: var(--navy); }
/* ---- Contacts block ---- */
.extract-btn {
display: inline-flex; align-items: center; gap: 6px;
background: var(--navy-tint); border: 1px solid var(--navy-line);
color: var(--navy); font-size: var(--text-xs); font-weight: 600;
padding: 6px 11px; border-radius: 8px; cursor: pointer;
font-family: var(--sans); transition: all .15s; white-space: nowrap;
}
.extract-btn:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
/* ---- Task understanding card ---- */
.task-card {
border: 1px solid var(--navy-line); border-radius: 14px; padding: 16px 18px;
background: linear-gradient(135deg, var(--navy-tint), var(--surface));
}
.task-head {
display: flex; align-items: center; gap: 9px;
font-weight: 700; font-size: var(--text-sm); color: var(--ink); margin-bottom: 14px;
}
.task-edit {
margin-left: auto; font-size: var(--text-xs); font-weight: 600; color: var(--navy);
background: var(--surface); border: 1px solid var(--navy-line);
padding: 5px 12px; border-radius: 8px; cursor: pointer; font-family: var(--sans);
transition: all .15s;
}
.task-edit:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.task-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.task-grid > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.auto-badge {
display: inline-block; margin-left: 8px;
font-size: var(--text-xs); font-weight: 700; color: var(--bronze);
background: var(--bronze-tint); padding: 2px 8px; border-radius: 40px;
vertical-align: middle;
}
/* ---- Manual link ---- */
.manual-link {
display: inline-flex; align-items: center; gap: 7px;
background: none; border: none; color: var(--navy);
font-size: var(--text-sm); font-weight: 600; cursor: pointer; font-family: var(--sans);
padding: 0;
}
.manual-link:hover { text-decoration: underline; }
.manual-link-block {
width: 100%; justify-content: center;
border: 1px dashed var(--line-strong); border-radius: 11px;
padding: 13px; color: var(--ink-soft);
}
.manual-link-block:hover { border-color: var(--navy); color: var(--navy); text-decoration: none; background: var(--paper-2); }
/* ---- AI recommendations (results) ---- */
.ai-recs {
display: flex; flex-direction: column; gap: 11px;
padding: 15px 17px; border-radius: 14px;
background: #F0F7F2; border: 1px solid #B8D8C5;
}
[data-theme="dark"] .ai-recs { background: #16241C; border-color: #2C4636; }
.rec-chip {
display: inline-flex; align-items: center; gap: 7px;
height: 34px; padding: 0 14px; border-radius: 40px;
border: 1px solid var(--good); background: var(--surface);
color: var(--good); font-size: var(--text-sm); font-weight: 600;
cursor: pointer; font-family: var(--sans); transition: all .15s;
}
.rec-chip:hover { background: var(--good); color: #fff; }
.rec-chip svg { flex: none; }
/* ============================================================
RESULTS PANE — pro
============================================================ */
.side-seg {
display: flex;
background: var(--paper-2);
border-radius: 10px;
padding: 3px;
gap: 2px;
flex: 1;
max-width: 260px;
}
.seg-btn {
flex: 1;
display: flex; align-items: center; justify-content: center; gap: 7px;
height: 34px; border-radius: 8px; border: none;
background: transparent; color: var(--ink-soft);
font-size: var(--text-sm); font-weight: 500; cursor: pointer;
font-family: var(--sans); transition: all .15s;
white-space: nowrap;
}
.seg-btn.active {
background: var(--surface);
color: var(--ink);
box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.seg-btn:disabled { opacity: .4; cursor: not-allowed; }
.icon-btn-sm {
width: 34px; height: 34px; border-radius: 8px;
border: 1px solid var(--line); background: var(--surface);
display: flex; align-items: center; justify-content: center;
cursor: pointer; color: var(--ink-soft); transition: all .15s;
}
.icon-btn-sm:hover { background: var(--paper-2); }
.icon-btn-sm:disabled { opacity: .35; cursor: not-allowed; }
/* brand row (redesigned) */
.brand-row-wrap {
display: flex; flex-direction: column; gap: 12px;
padding: 14px 18px;
border-top: 1px solid var(--line);
}
.brand-row-head { display: flex; align-items: center; gap: 10px; }
.brand-row-ic {
width: 28px; height: 28px; border-radius: 8px;
background: var(--paper-2); border: 1px solid var(--line);
display: flex; align-items: center; justify-content: center;
color: var(--ink-soft); flex: none;
}
.brand-row-title { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.brand-row-hint { display: block; font-size: var(--text-xs); color: var(--muted); margin-top: 1px; }
.brand-chips-row { display: flex; gap: 6px; flex-wrap: wrap; }
.brand-chip {
display: inline-flex; align-items: center; gap: 5px;
height: 30px; padding: 0 10px;
border-radius: 8px; border: 1px solid var(--line);
background: var(--surface); cursor: pointer;
font-family: var(--sans); font-size: var(--text-xs);
color: var(--ink); transition: border-color .15s;
white-space: nowrap;
}
.brand-chip:hover { border-color: var(--navy); }
.bc-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.bc-label { font-size: var(--text-xs); color: var(--muted); }
.bc-value { font-weight: 600; }
/* Brand pick modal contents */
.bp-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.bp-chip {
display: inline-flex; align-items: center; gap: 6px;
height: 36px; padding: 0 15px; border-radius: 40px;
border: 1px solid var(--line); background: var(--surface);
color: var(--ink-soft); font-size: 13.5px; font-weight: 600;
cursor: pointer; font-family: var(--sans); transition: all .15s;
}
.bp-chip:hover { border-color: var(--navy); color: var(--navy); }
.bp-chip.on { border-color: var(--navy); background: var(--navy); color: #fff; }
.bp-swatches { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bp-swatch {
position: relative; display: flex; align-items: center; gap: 11px;
padding: 11px 13px; border-radius: 11px; border: 1px solid var(--line);
background: var(--surface); cursor: pointer; font-family: var(--sans);
transition: all .15s; text-align: left;
}
.bp-swatch:hover { border-color: var(--line-strong); }
.bp-swatch.on { border-color: var(--navy); box-shadow: 0 0 0 2px rgba(28,58,87,.12); }
.bp-swatch-dot { width: 26px; height: 26px; border-radius: 7px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.bp-swatch-name { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.bp-swatch-check {
position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 999px;
background: var(--navy); color: #fff; display: grid; place-items: center;
}
.bp-foot { display: flex; justify-content: flex-end; margin-top: 18px; }
/* "Наложить иконку" (studio-extras.jsx, 2026-07-29) — панель под тулбаром
правок: выбор файла / ползунок размера / применить, плюс сам оверлей
перетаскивается прямо на превью макета (см. onIconPointerDown). */
.icon-overlay-panel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0 0; }
.icon-overlay-side-switch { display: flex; gap: 6px; }
.icon-overlay-upload { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.icon-overlay-size { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--ink-soft); }
/* hero preview — крупный показ макета: скруглённых углов больше нет
(пользователь просил убрать), поля минимальные, чтобы не липло к краю
экрана, а сам макет растягивается на доступное место (см. heroScale в
studio-extras.jsx — считается от реального размера этого блока). */
.hero-preview {
display: flex; justify-content: center; align-items: center;
flex: 1; min-height: 0;
background: var(--paper-2);
padding: 16px; border: 1px solid var(--line);
}
.rdiv { color: var(--line-strong); }
/* ===== Region edit (inpainting / local mask) ===== */
.region-toolbar {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-bottom: 14px;
}
.region-toggle {
display: inline-flex; align-items: center; gap: 7px;
height: 34px; padding: 0 14px; border-radius: 9px;
border: 1px solid var(--line-strong); background: var(--surface);
color: var(--ink); font-family: var(--sans); font-size: var(--text-sm); font-weight: 600;
cursor: pointer; transition: border-color .15s, color .15s, background .15s, box-shadow .15s;
}
.region-toggle:hover { border-color: var(--bronze); color: var(--bronze); }
.region-toggle.active {
border-color: var(--bronze); color: #fff; background: var(--bronze);
box-shadow: 0 0 0 3px var(--bronze-tint);
}
/* ===== B2B: кнопка правки · пресеты · баланс · скелетоны ===== */
/* 1. Тулбар результата — две подписанные зоны, "Правки"/"Готово" (см.
UX-обзор 2026-07-20: один слитный flex-wrap ряд на 7+ кнопок одного
веса читался как нерасчленённая куча, а перенос строк зависел от
случайной ширины окна, а не от замысла). Подпись зоны заменяет собой
прежний объясняющий абзац под тулбаром — то, что раньше приходилось
ПИСАТЬ словами, теперь видно по самой группировке. */
.region-toolbar-col { flex-direction: column; align-items: flex-start; gap: 6px; }
.region-toolbar-row { display: flex; align-items: flex-end; width: 100%; gap: 18px; flex-wrap: wrap; }
.region-zone { display: flex; flex-direction: column; gap: 6px; }
.region-zone-edit { flex: 1 1 auto; min-width: 0; }
.region-zone-export { flex: none; }
.region-zone-label {
font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
color: var(--muted); padding-left: 2px;
}
.region-zone-box {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: 13px; padding: 8px;
}
/* CTA «Точечная правка» — теперь единственная заливная кнопка в зоне
(герой этого экрана: по замыслу самое частое действие, поэтому одна
заливка на всю группу, а не в тени среди пяти одинаковых пилюль).
Раньше была navy-tint с рамкой того же оттенка, что и настоящее
"активно" (см. .active ниже) — то есть до первого клика уже выглядела
почти как включённый переключатель. Сплошная заливка снимает эту
двусмысленность без анимации-пульса, которая спорила за внимание с
PDF-кнопкой весь сеанс. */
.region-edit-cta {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 18px; border-radius: 10px;
border: 1.5px solid var(--navy); background: var(--navy);
color: #fff; font-family: var(--sans); font-size: 13.5px; font-weight: 700;
cursor: pointer; box-shadow: var(--sh-md);
transition: background .15s, box-shadow .15s, transform .12s;
}
.region-edit-cta:hover { background: var(--navy-deep); box-shadow: var(--sh-lg); transform: translateY(-1px); }
.region-edit-cta:disabled { opacity: .5; pointer-events: none; }
.region-edit-cta.active {
background: #059669; border-color: #059669;
box-shadow: 0 0 0 3px rgba(5,150,105,.18);
}
.region-edit-cta.active:hover { background: #047857; border-color: #047857; transform: none; box-shadow: 0 0 0 3px rgba(5,150,105,.22); }
.region-edit-dot { font-size: var(--text-xs); animation: dotBlink 1.1s steps(1) infinite; }
.region-edit-hint { font-size: var(--text-xs); line-height: 1.45; color: var(--muted); max-width: 540px; margin-top: 4px; }
/* Бейдж "Бесплатный редактор" (AI Умное восстановление) — запрос
2026-07-21: должно быть явно видно, что этот путь правки бесплатный, в
отличие от "Точечная правка" (1 кредит) рядом. */
.region-free-badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 8px; border-radius: 999px; margin-right: 4px;
background: var(--bronze-tint); color: var(--bronze); font-weight: 700;
font-size: var(--text-xs);
}
/* Назад/вперёд по выделению — та же .region-icon-btn пилюля, что и у
Доработать/QR/Улучшить в тулбаре результата, только сгруппирована теснее
(gap 4px вместо обычного зазора между секциями). */
.region-tool-history { gap: 4px; }
/* Остальные способы правки (Доработать/QR/Улучшить/Адаптировать) — тихие
значки-кнопки с подсказкой при наведении: одного веса друг с другом,
заметно тише заливной .region-edit-cta, чтобы не спорить с ней за
главное внимание в зоне. Тот же значок-паттерн у Истории/Сохранить
в зоне "Готово" ниже. */
.region-icon-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px; padding: 0; border-radius: 10px; flex: none;
border: 1.5px solid var(--line-strong); background: var(--surface);
color: var(--ink-soft); cursor: pointer;
transition: border-color .15s, color .15s, background .15s;
}
.region-icon-btn:hover { border-color: var(--navy); color: var(--navy); background: var(--navy-tint); }
.region-icon-btn:disabled { opacity: .5; pointer-events: none; }
/* Скачать — PNG/PDF раньше были двумя равными по весу кнопками (светлая
PNG рядом с тёмной "выбранной" PDF), из-за чего заливка PDF читалась
как переключатель формата, а не как приоритетное действие. Печатный
PDF — основной путь сервиса (см. CLAUDE.md), поэтому это клик по
умолчанию; PNG — под стрелкой рядом, тот же попап, что у Истории. */
.region-download-split { display: inline-flex; }
.region-download-main {
display: inline-flex; align-items: center; gap: 7px;
height: 38px; padding: 0 14px; border-radius: 10px 0 0 10px;
border: none; background: var(--navy); color: #fff;
font-family: var(--sans); font-size: 13.5px; font-weight: 700; cursor: pointer;
box-shadow: var(--sh-md); transition: background .15s;
}
.region-download-main:hover { background: var(--navy-deep); }
.region-download-main:disabled { opacity: .5; pointer-events: none; }
.region-download-caret {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 38px; padding: 0; border-radius: 0 10px 10px 0;
border: none; border-left: 1px solid rgba(255,255,255,.28);
background: var(--navy); color: #fff; cursor: pointer;
box-shadow: var(--sh-md); transition: background .15s;
}
.region-download-caret:hover { background: var(--navy-deep); }
.region-download-caret:disabled { opacity: .5; pointer-events: none; }
/* Пункт в попапе — переиспользует .hist-pop (тот же стеклянный попап,
что у Истории версий), но это не строка версии, а кликабельная кнопка. */
.dl-pop-item {
display: flex; align-items: center; gap: 8px; width: 100%;
padding: 8px 14px; border: none; background: none; cursor: pointer;
font-family: var(--sans); font-size: var(--text-sm); color: var(--ink); text-align: left;
transition: background .12s;
}
.dl-pop-item:hover { background: var(--paper-2); }
/* ── nanobanana-стиль разметки: палитра цвета + переключатель "Эскиз"/"Текст" ── */
.region-tools-row { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 2px; width: 100%; }
.region-color-row { display: flex; align-items: center; gap: 8px; }
.region-color-swatch {
width: 26px; height: 26px; border-radius: 50%; padding: 0; flex: none;
border: 2px solid var(--surface); box-shadow: 0 0 0 1.5px var(--line-strong);
cursor: pointer; transition: box-shadow .15s, transform .12s;
}
.region-color-swatch:hover { transform: scale(1.08); }
.region-color-swatch.active { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--navy); }
.region-tool-row { display: flex; align-items: center; gap: 6px; }
.region-tool-btn {
display: inline-flex; align-items: center; gap: 6px;
height: 32px; padding: 0 13px; border-radius: 9px;
border: 1px solid var(--line-strong); background: var(--surface);
color: var(--ink-soft); font-family: var(--sans); font-size: var(--text-sm); font-weight: 600;
cursor: pointer; transition: border-color .15s, color .15s, background .15s, box-shadow .15s;
}
.region-tool-btn:hover { border-color: var(--navy); color: var(--navy); }
.region-tool-btn.active { border-color: var(--navy); background: var(--navy); color: #fff; box-shadow: 0 0 0 3px var(--navy-tint); }
.region-tool-t-glyph {
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px; border-radius: 4px; border: 1.6px solid currentColor;
font: 800 10px/1 var(--sans); flex: none;
}
/* Текстовый ввод, всплывающий прямо в точке клика на макете (режим "Текст") —
позиционирован абсолютно внутри .region-stage, координаты — в CSS-пикселях
относительно самого canvas (см. cssPtFrom в studio-extras.jsx). */
.region-text-input {
position: absolute; z-index: 7; transform: translateX(-2px);
min-width: 90px; max-width: 260px; padding: 3px 6px;
background: rgba(255,255,255,.94); border: 1.5px dashed; border-radius: 6px;
font: 700 15px/1.2 var(--sans); outline: none; box-shadow: var(--sh-md);
}
.region-text-input::placeholder { color: var(--muted); font-weight: 500; }
@keyframes dotBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: .25; } }
/* 2. Пресеты режима генерации */
.gen-preset-row { display: flex; flex-direction: column; gap: 8px; margin-top: 11px; }
.gen-preset-label { font-size: var(--text-xs); font-weight: 600; color: var(--ink-soft); }
.gen-preset-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.gen-preset-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 12px; border-radius: 999px;
border: 1.5px solid var(--line); background: var(--surface);
color: var(--ink-soft); font-family: var(--sans); font-size: var(--text-sm); font-weight: 600;
cursor: pointer; transition: border-color .14s, color .14s, background .14s, box-shadow .14s; white-space: nowrap;
}
.gen-preset-chip:hover { border-color: var(--navy); color: var(--navy); background: var(--navy-tint); }
.gen-preset-chip.on { border-color: var(--navy); background: var(--navy); color: #fff; box-shadow: 0 3px 12px rgba(28,58,87,.22); }
.gpc-i { font-size: var(--text-sm); line-height: 1; }
/* 2b. Единый блок «Стиль оформления» — 2 ряда b2b-кнопок (замена