/* ====================================================================
   СТУДИЯ ИЗОБРАЖЕНИЙ — стили окна и сравнения «до / после».
   ТЗ «Студия изображений» (TZ_IMAGE_STUDIO_2026-09-12), Этап 4.

   Оформление по Docs/PERPLEXITY_STYLE_GUIDE.md и
   .github/instructions/ui_style.instructions.md, образец — process-studio.css.
   Все классы — с префиксом .img-: глобальные .btn/.modal/.input заняты
   легаси. Поправка владельца сильнее гайда: кнопки скруглены не больше 7 px и
   без контура, заливка не кладётся внутрь заливки. Тёмная тема — блок
   body.dark-theme в конце файла, на КАЖДУЮ поверхность (стенд studio_test.js
   сверяет это правило за правилом).
   ==================================================================== */

/* Собственный display у блоков сильнее встроенного [hidden] браузера: без
   этой строки спрятанный узел с display:flex оставался бы на экране. */
.img-overlay [hidden],
.img-pill[hidden],
.img-cost-ask [hidden],
.img-cmp [hidden] { display: none !important; }

/* ---------- подложка и окно ---------- */

.img-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(2px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10050;
}
.img-overlay.show { display: flex; }

.img-modal {
    background: #FFFFFF;
    border: 1px solid rgba(19, 52, 59, 0.10);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.05);
    width: 94%;
    max-width: 1480px;
    height: 86vh;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: "FK Grotesk Neue", "FKGroteskNeue", "Helvetica Neue", Arial, sans-serif;
    color: #13343B;
    animation: imgModalIn 0.2s ease-out;
}
.img-modal.maximized { border-radius: 0; box-shadow: none; border-color: transparent; }
@keyframes imgModalIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- шапка-ручка ---------- */

.img-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(19, 52, 59, 0.08);
    cursor: move;
    user-select: none;
}
.img-header-titles { flex: 1 1 auto; min-width: 0; }
.img-title    { font-size: 18px; font-weight: 500; line-height: 1.3; }
.img-subtitle { font-size: 12px; line-height: 1.4; color: rgba(19, 52, 59, 0.62); margin-top: 2px; }

.img-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    background: rgba(19, 52, 59, 0.04);
    color: rgba(19, 52, 59, 0.72);
    border-radius: 7px;
    height: 28px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    cursor: default;
}
.img-spend { font-variant-numeric: tabular-nums; }

.img-head-note {
    flex: 0 1 auto;
    max-width: 40%;
    font-size: 12px;
    line-height: 1.4;
    color: #13343B;
    background: rgba(31, 184, 205, 0.08);
    border-radius: 7px;
    padding: 6px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.img-head-note.bad { background: rgba(229, 62, 62, 0.10); color: #c53030; }

/* ---------- центр процессов в шапке (T4.14) ---------- */
/* Одно место, где видно всю работу Студии; нажатие — к окну процесса.
   «Готово» — залито: сюда смотреть за результатом (приёмка 13.09: «кнопка
   вызова результатов находится в не очевидном месте»). */
.img-ops-wrap { position: relative; flex: 0 0 auto; }
.img-ops {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 28px;
    padding: 0 12px;
    border: none;
    border-radius: 7px;
    background: rgba(31, 184, 205, 0.12);
    color: #13343B;
    font: 500 12px/1 "FK Grotesk Neue", "FKGroteskNeue", "Helvetica Neue", Arial, sans-serif;
    white-space: nowrap;
    cursor: pointer;
    transition: background 120ms ease;
}
.img-ops:hover { background: rgba(31, 184, 205, 0.20); }
.img-ops:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30); }
.img-ops.done { background: #20808D; color: #FFFFFF; }
.img-ops.done:hover { background: #1B6F7A; }
.img-ops.bad { background: rgba(229, 62, 62, 0.10); color: #c53030; }
.img-ops.bad:hover { background: rgba(229, 62, 62, 0.16); }
.img-ops-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.img-ops.running .img-ops-dot { background: #20808D; animation: imgOpsPulse 1.4s ease-in-out infinite; }
.img-ops.done .img-ops-dot { background: #FFFFFF; }
.img-ops.bad .img-ops-dot { background: #c53030; }
.img-ops-text { font-variant-numeric: tabular-nums; }
@keyframes imgOpsPulse {
    0%, 100% { opacity: 0.35; transform: scale(0.85); }
    50%      { opacity: 1; transform: scale(1); }
}
.img-ops-menu {
    position: absolute;
    top: 36px;
    right: 0;
    z-index: 30;
    min-width: 320px;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #FFFFFF;
    border: 1px solid rgba(19, 52, 59, 0.10);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(19, 52, 59, 0.12), 0 1px 3px rgba(19, 52, 59, 0.06);
    padding: 6px;
    cursor: default;
}
.img-ops-row { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border-radius: 7px; }
.img-ops-row:hover { background: rgba(19, 52, 59, 0.04); }
.img-ops-row::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: rgba(19, 52, 59, 0.30); }
.img-ops-row.running::before { background: #20808D; animation: imgOpsPulse 1.4s ease-in-out infinite; }
.img-ops-row.done::before { background: #20808D; }
.img-ops-row.bad::before { background: #c53030; }
.img-ops-row-text { flex: 1 1 auto; min-width: 0; }
.img-ops-row-title { font-size: 13px; font-weight: 500; color: #13343B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.img-ops-row-detail { font-size: 12px; line-height: 1.4; color: rgba(19, 52, 59, 0.62); margin-top: 2px; }
.img-ops-row.bad .img-ops-row-detail { color: #c53030; }
@media (prefers-reduced-motion: reduce) {
    .img-ops.running .img-ops-dot,
    .img-ops-row.running::before { animation: none; }
}

/* Кнопка Студии на панели чата мигает, пока идёт процесс (T4.14; решение
   владельца 13.09 — «как у AI-Аналитика»: та же анимация и точка в углу, что у
   .orch-busy в style.css, ТЗ «Многопоточный UI» T3.2). */
#imageStudioToolbarBtn.img-busy { position: relative; animation: imgBusyBlink 1.4s ease-in-out infinite; }
#imageStudioToolbarBtn.img-busy::after {
    content: '';
    position: absolute;
    top: -1px;
    right: -1px;
    width: 8px;
    height: 8px;
    background: #20808D;
    border-radius: 50%;
    border: 1.5px solid #fff;
    pointer-events: none;
    z-index: 2;
}
@keyframes imgBusyBlink {
    0%, 100% { box-shadow: 0 0 0 0 rgba(32, 128, 141, 0); background: rgba(32, 128, 141, 0.10); }
    50%      { box-shadow: 0 0 0 4px rgba(32, 128, 141, 0.18); background: rgba(32, 128, 141, 0.24); }
}
@media (prefers-reduced-motion: reduce) {
    #imageStudioToolbarBtn.img-busy { animation: none; background: rgba(32, 128, 141, 0.18); }
}

.img-icon-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: rgba(19, 52, 59, 0.62);
    border-radius: 7px;
    width: 32px;
    height: 32px;
    padding: 0;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}
.img-icon-btn:hover  { background: rgba(19, 52, 59, 0.06); color: #20808D; }
.img-icon-btn:active { background: rgba(31, 184, 205, 0.12); color: #1FB8CD; transform: scale(0.97); }
.img-icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30); }

/* ---------- тело: задачи | рабочая область | настройки ---------- */

.img-body {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr) 340px;
    min-height: 0;
}

/* Колонка задач: прокручивается список, а «История» закреплена внизу —
   на снимке 1500×950 она уезжала за прокрутку, и найти её было нельзя. */
.img-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border-right: 1px solid rgba(19, 52, 59, 0.08);
    background: #FBFBF9;
    padding: 10px 8px;
    gap: 6px;
}
.img-tasks { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }

/* Проект (T4.11): выбор проекта и меню действий — вверху колонки задач. */
.img-project {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 2px 8px;
    border-bottom: 1px solid rgba(19, 52, 59, 0.08);
}
.img-project-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: rgba(19, 52, 59, 0.50);
    padding: 0 8px;
}
.img-project-row { display: flex; align-items: center; gap: 4px; }
.img-project-select { flex: 1 1 auto; min-width: 0; font-size: 13px; padding: 6px 8px; }
.img-project-menu {
    position: absolute;
    top: 58px;
    right: 2px;
    z-index: 20;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid rgba(19, 52, 59, 0.10);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(19, 52, 59, 0.12), 0 1px 3px rgba(19, 52, 59, 0.06);
    padding: 4px;
    animation: imgMenuIn 0.12s ease;
}
.img-menu-item.danger { color: #c53030; }
.img-menu-item.danger:hover { background: rgba(229, 62, 62, 0.10); color: #c53030; }
.img-project-edit { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 0; }
.img-project-edit-acts { display: flex; gap: 6px; }
/* Группы задач (владелец 17.09: «визуально разделить, заливка разными мягкими
   цветами, контуры групп»): у каждой свой мягкий тон, тонкая рамка и цвет
   заголовка. Тёмных правил не пишем (владелец 15.09). */
.img-group {
    --grp-bg: #F3F4F2;
    --grp-line: rgba(19, 52, 59, 0.10);
    --grp-title: rgba(19, 52, 59, 0.55);
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 4px;
    background: var(--grp-bg);
    border: 1px solid var(--grp-line);
    border-radius: 7px;
}
.img-group[data-group="create"]    { --grp-bg: #EEF4FB; --grp-line: #D5E2F1; --grp-title: #3D6896; }
.img-group[data-group="edit"]      { --grp-bg: #EEF6F1; --grp-line: #D2E6D9; --grp-title: #3B7653; }
.img-group[data-group="improve"]   { --grp-bg: #FBF3E8; --grp-line: #EDDBBF; --grp-title: #8F5F24; }
.img-group[data-group="recognize"] { --grp-bg: #F3F0FA; --grp-line: #DCD5EE; --grp-title: #65579A; }
.img-group[data-group="measure"]   { --grp-bg: #FAF0EE; --grp-line: #EDD7D2; --grp-title: #94574B; }
.img-group-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--grp-title);
    padding: 4px 8px 3px;
}
/* На цветной группе задача выделяется белой подложкой с бирюзовой обводкой,
   а не бирюзовым тоном поверх тона группы. */
.img-group .img-task:hover  { background: rgba(255, 255, 255, 0.65); }
.img-group .img-task.active { background: #FFFFFF; color: #20808D; box-shadow: inset 0 0 0 1px rgba(32, 128, 141, 0.40); }
.img-group .img-task.blocked:hover { background: rgba(255, 255, 255, 0.45); }
.img-group .img-task:focus-visible { box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30); }
.img-task {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 7px;
    padding: 7px 10px;
    font: 400 13px/1.35 "FK Grotesk Neue", "FKGroteskNeue", "Helvetica Neue", Arial, sans-serif;
    color: #13343B;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}
.img-task:hover  { background: rgba(19, 52, 59, 0.05); }
.img-task.active { background: rgba(31, 184, 205, 0.10); color: #20808D; }
.img-task.blocked { color: rgba(19, 52, 59, 0.40); }
.img-task.blocked:hover { background: rgba(19, 52, 59, 0.04); }
.img-task:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30); }
.img-task-name { flex: 1 1 auto; min-width: 0; }
.img-task-icon { display: inline-flex; color: currentColor; }
.img-history-btn { flex: 0 0 auto; border-top: 1px solid rgba(19, 52, 59, 0.08); border-radius: 0 0 7px 7px; padding-top: 10px; }

.img-center {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 12px 14px;
    gap: 8px;
}
.img-center-head { display: flex; align-items: center; gap: 8px; min-height: 32px; }
/* Листание страниц PDF (22.09): «← 1/3 →» в заголовке. */
.img-pdf-pager { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.img-pdf-arrow { min-width: 30px; padding: 3px 8px; font-size: 16px; line-height: 1; }
.img-pdf-arrow:disabled { opacity: 0.35; cursor: default; background: transparent; }
.img-pdf-page { font-size: 13px; color: rgba(19, 52, 59, 0.72); white-space: nowrap; min-width: 36px; text-align: center; font-variant-numeric: tabular-nums; }
.img-center-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.img-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    border-radius: 10px;
    background: #F3F3EE;
    overflow: hidden;
}
.img-stage.dragover { box-shadow: inset 0 0 0 2px #1FB8CD; }

.img-drop, .img-empty {
    margin: auto;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px;
    text-align: center;
}
.img-drop-icon { color: rgba(19, 52, 59, 0.45); transform: scale(1.6); margin-bottom: 6px; }
.img-drop-title, .img-empty-title { font-size: 16px; font-weight: 500; }
.img-drop-hint, .img-empty-text { font-size: 13px; line-height: 1.5; color: rgba(19, 52, 59, 0.62); }
.img-drop-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }

.img-progress {
    margin: auto;
    width: min(460px, 90%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    text-align: center;
}
.img-progress-text { font-size: 13px; line-height: 1.5; color: rgba(19, 52, 59, 0.72); }
.img-progress-bar { height: 6px; border-radius: 3px; background: rgba(19, 52, 59, 0.10); overflow: hidden; }
.img-progress-fill {
    height: 100%;
    width: 6%;
    background: #1FB8CD;
    border-radius: 3px;
    transition: width 200ms ease;
    animation: imgPulse 1200ms ease-in-out infinite;
}
@keyframes imgPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

.img-cmp-host { position: absolute; inset: 0; display: flex; }

.img-variants { display: flex; gap: 6px; flex-wrap: wrap; }
.img-variant {
    border: none;
    border-radius: 7px;
    background: rgba(19, 52, 59, 0.05);
    color: rgba(19, 52, 59, 0.78);
    padding: 6px 12px;
    font: 500 12px/1 "FK Grotesk Neue", "FKGroteskNeue", "Helvetica Neue", Arial, sans-serif;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}
.img-variant:hover  { background: rgba(19, 52, 59, 0.09); color: #20808D; }
.img-variant.active { background: rgba(31, 184, 205, 0.14); color: #20808D; }
.img-variant:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30); }

.img-center-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.img-compare-with { width: auto; min-width: 220px; }

/* ---------- настройки справа ---------- */

.img-side {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-left: 1px solid rgba(19, 52, 59, 0.08);
}
.img-side-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.img-side-title { font-size: 16px; font-weight: 500; line-height: 1.3; }
.img-side-foot {
    padding: 12px 16px 14px;
    border-top: 1px solid rgba(19, 52, 59, 0.08);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.img-field { display: flex; flex-direction: column; gap: 6px; }
.img-field-label { font-size: 12px; font-weight: 500; color: rgba(19, 52, 59, 0.62); }
.img-hint { font-size: 12px; line-height: 1.45; color: rgba(19, 52, 59, 0.58); }

.img-prompt-form { margin: 0; }
.img-input {
    width: 100%;
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1px solid rgba(19, 52, 59, 0.12);
    border-radius: 10px;
    padding: 9px 12px;
    font: 400 14px/1.4 "FK Grotesk Neue", "FKGroteskNeue", "Helvetica Neue", Arial, sans-serif;
    color: #13343B;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.img-input:focus { outline: none; border-color: #1FB8CD; box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.18); }
.img-input::placeholder { color: rgba(19, 52, 59, 0.45); }
.img-prompt { resize: vertical; min-height: 84px; }
/* «Что ещё» у «Улучшения в облаке» (T4.18) — второстепенное поле в две строки. */
.img-prompt.img-prompt-short { min-height: 52px; }
.img-select { appearance: auto; padding: 7px 10px; }

.img-seg { display: flex; flex-wrap: wrap; gap: 4px; }
/* В настройках — ровная сетка: кнопки одной ширины и не рвут ряд пополам. */
.img-side .img-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.img-side .img-seg-wrap { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.img-side .img-seg-wrap .img-seg-btn[data-value="source"] { grid-column: span 2; }
/* «Какая нерезкость» («Улучшение»): два длинных варианта — по половине ряда, в одну строку. */
.img-side .img-seg-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.img-seg-btn {
    border: none;
    border-radius: 7px;
    background: rgba(19, 52, 59, 0.05);
    color: rgba(19, 52, 59, 0.78);
    padding: 7px 10px;
    font: 500 12px/1.1 "FK Grotesk Neue", "FKGroteskNeue", "Helvetica Neue", Arial, sans-serif;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}
.img-seg-btn:hover  { background: rgba(19, 52, 59, 0.09); color: #20808D; }
.img-seg-btn.active { background: rgba(31, 184, 205, 0.16); color: #20808D; }
.img-seg-btn.blocked { color: rgba(19, 52, 59, 0.35); background: rgba(19, 52, 59, 0.03); }
.img-seg-btn:active { transform: scale(0.97); }
.img-seg-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30); }

/* «Мои наборы» (Д16): под списком стилей — ссылки и форма набора. */
.img-style { display: flex; flex-direction: column; gap: 6px; }
.img-style-acts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.img-style-desc { flex: 1 1 100%; overflow-wrap: anywhere; }
/* Без своей подложки: поля и кнопка уже с заливкой, «заливка в заливке» —
   против правила владельца. Принадлежность к набору — тонкая черта слева. */
.img-style-edit {
    margin: 2px 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 2px 0 2px 10px;
    border-left: 2px solid rgba(32, 128, 141, 0.35);
}
.img-style-textarea { resize: vertical; min-height: 64px; }
.img-style-edit-acts { display: flex; gap: 8px; }

/* «Задать масштаб» (T7.2): сохранённый масштаб словами, выбор файла привязки, галочка «в градусах». */
.img-scale-now { font-size: 13px; color: #13343B; overflow-wrap: anywhere; }
.img-scale-file { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.img-scale-file .img-hint { overflow-wrap: anywhere; }
.img-scale-geo { display: flex; flex-direction: column; gap: 4px; }

.img-range { display: flex; flex-direction: column; gap: 4px; }
.img-range-input { width: 100%; accent-color: #20808D; }
.img-range-labels { display: flex; justify-content: space-between; font-size: 11px; color: rgba(19, 52, 59, 0.55); }

.img-more { border-top: 1px solid rgba(19, 52, 59, 0.08); padding-top: 8px; display: flex; flex-direction: column; gap: 10px; }
.img-more-summary { cursor: pointer; font-size: 13px; font-weight: 500; color: rgba(19, 52, 59, 0.72); padding: 4px 0; }
.img-more-summary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30); border-radius: 4px; }
.img-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #13343B; cursor: pointer; }
.img-check-input { accent-color: #20808D; }
/* Фото людей (Р1а): отметка согласия — текст в две строки, флажок у первой. */
.img-consent { align-items: flex-start; line-height: 1.4; }
.img-consent .img-check-input { margin-top: 2px; flex: 0 0 auto; }

/* ---------- второй рисунок (владелец 18.10) ----------
   Своей заливки у поля нет — оно на колонке настроек; рамка нейтральная, тонкая.
   Бросили файл над полем — лёгкая подсветка фона (как у сцены). */
.img-ref {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 1px dashed rgba(19, 52, 59, 0.22);
    border-radius: 7px;
}
.img-ref.has { border-style: solid; border-color: rgba(19, 52, 59, 0.14); }
.img-ref.dragover { background: rgba(32, 128, 141, 0.08); }
.img-ref-thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 5px;
}
.img-ref-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.img-ref-name { font-size: 13px; color: #13343B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.img-ref-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.img-ref:not(.has) { flex-direction: column; align-items: stretch; }
.img-ref-drop { text-align: center; }
.img-ref-role { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
/* Поле «Образец» у «По образцу» (18.10): та же форма, что у второго рисунка; картинка — рабочая, в центре. */
.img-src-field { min-height: 0; }
/* Рамка вокруг одежды на образце (18.10): образец крупнее, рамка — перекрестием мыши. */
.img-ref-frame { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.img-ref-stage { position: relative; align-self: center; cursor: crosshair; touch-action: none; user-select: none; line-height: 0; overflow: hidden; border-radius: 5px; }
.img-ref-big { display: block; max-width: 100%; max-height: 280px; border-radius: 5px; pointer-events: none; }
.img-ref-rect { position: absolute; border: 2px solid #20808D; box-shadow: 0 0 0 2000px rgba(19, 52, 59, 0.35); pointer-events: none; }
.img-style-ref { padding: 2px 0; }
/* Предел модели на компьютере (18.10) — под описанием задачи, тёмным текстом, чтобы его заметили. */
.img-hint-local { color: #13343B; }

/* ---------- движки на этом компьютере (Этап 8, T8.2) ----------
   Своей заливки у блока нет: он лежит на колонке настроек, цвет наследует —
   поэтому и тёмных правил ему не нужно (владелец 15.09: «тёмная тема не нужна»).
   Полоса скачивания — те же .img-progress-bar / .img-progress-fill, что у работы. */
.img-engines { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.img-engine { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid rgba(19, 52, 59, 0.08); }
.img-engine-title { font-size: 13px; font-weight: 600; }
.img-engine-state { font-size: 12px; line-height: 1.45; opacity: 0.8; overflow-wrap: anywhere; }
.img-engine-acts { display: flex; flex-wrap: wrap; gap: 8px; }
/* «Нужен для выбранного» — пометка у строки ресурса; цветом, без плашки. */
.img-engine-need { font-weight: 500; color: #1F7A86; }
/* Какой компьютер: слабый — тёплым цветом, чтобы предупреждение не потерялось. */
.img-hw { font-size: 12px; line-height: 1.45; }
.img-hw-slow { color: #975A16; font-weight: 500; }

/* ---------- «Улучшить»: плашки «что исправить» (T4.18, 17.09) ----------
   Можно несколько — поэтому не сегменты, а плашки с рамкой. Своей заливки у
   плашки нет (лежит на колонке настроек — правило «без заливки в заливке»),
   выбранная — бирюзовая рамка и лёгкий тон; тёмных правил не пишем (владелец 15.09).
   Флажок внутри спрятан, но работает: клавиатура, номер, «отмечено». */
.img-toggles { display: grid; gap: 6px; }
.img-side .img-toggles-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.img-side .img-toggles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.img-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 32px;
    padding: 6px 8px;
    border: 1px solid rgba(19, 52, 59, 0.16);
    border-radius: 7px;
    background: transparent;
    color: rgba(19, 52, 59, 0.82);
    font: 500 12px/1.2 "FK Grotesk Neue", "FKGroteskNeue", "Helvetica Neue", Arial, sans-serif;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}
.img-toggle:hover { border-color: rgba(32, 128, 141, 0.45); color: #20808D; }
.img-toggle.active { border-color: #20808D; background: rgba(31, 184, 205, 0.10); color: #1F7A86; }
.img-toggle-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.img-toggle:focus-within { box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30); }
.img-toggle-text { overflow-wrap: anywhere; }
.img-side .img-seg-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.img-price { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; min-height: 20px; }
.img-price.bad { color: #c53030; font-size: 13px; }
.img-reason { font-size: 12px; line-height: 1.45; color: rgba(19, 52, 59, 0.62); }

/* ---------- кнопки (≤ 7 px, без контура — правило владельца) ---------- */

.img-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    border-radius: 7px;
    background: rgba(19, 52, 59, 0.06);
    color: rgba(19, 52, 59, 0.82);
    padding: 8px 14px;
    font: 500 13px/1 "FK Grotesk Neue", "FKGroteskNeue", "Helvetica Neue", Arial, sans-serif;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}
.img-btn:hover  { background: rgba(32, 128, 141, 0.10); color: #20808D; }
.img-btn:active { transform: scale(0.97); }
.img-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30); }
.img-btn:disabled { background: rgba(19, 52, 59, 0.05); color: rgba(19, 52, 59, 0.38); cursor: not-allowed; }
.img-btn-icon { display: inline-flex; }

.img-btn-primary { background: #20808D; color: #F3F3EE; }
.img-btn-primary:hover { background: #1FB8CD; color: #F3F3EE; }
.img-btn-primary:disabled { background: rgba(19, 52, 59, 0.15); color: rgba(19, 52, 59, 0.45); }

.img-btn-ghost { background: transparent; color: rgba(19, 52, 59, 0.62); }
.img-btn-ghost:hover { background: rgba(19, 52, 59, 0.06); color: #20808D; }

/* «Сделать» приглушена, но ЖИВАЯ: нажатие называет причину (образец proc-btn-blocked). */
.img-run { width: 100%; padding: 11px 14px; font-size: 14px; }
/* «Сравнить по пикселям — бесплатно» (T7.8) под «Сделать»: вторая, без заливки главной. */
.img-run-alt { width: 100%; padding: 9px 14px; }
.img-run.blocked { background: rgba(19, 52, 59, 0.14); color: rgba(19, 52, 59, 0.55); }
.img-run.blocked:hover { background: rgba(19, 52, 59, 0.18); }

.img-btn-link {
    background: none;
    border: none;
    padding: 2px 0;
    color: #20808D;
    font: 500 12px/1.3 "FK Grotesk Neue", "FKGroteskNeue", "Helvetica Neue", Arial, sans-serif;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.img-btn-link:hover { color: #1FB8CD; }
.img-btn-link:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30); border-radius: 4px; }
.img-btn-danger { color: #c53030; }
.img-btn-danger:hover { color: #e53e3e; }
/* «Удалить» в окне вопроса: мягкая красная плашка, не кричащая заливка. */
.img-btn-danger-fill { background: rgba(229, 62, 62, 0.12); color: #c53030; }
.img-btn-danger-fill:hover { background: rgba(229, 62, 62, 0.18); color: #c53030; }

.img-note-line {
    font-size: 12px;
    line-height: 1.45;
    padding: 7px 10px;
    border-radius: 6px;
    background: rgba(32, 184, 205, 0.08);
    color: #13343B;
}
.img-note-line.bad { background: rgba(229, 62, 62, 0.10); color: #c53030; }
/* Панель состояния под картинкой (19.09): подсказка слева, «Скачать PNG» справа —
   рядом с плашкой, а не внутри неё (без заливки в заливке). */
.img-status { display: flex; align-items: center; gap: 8px; min-width: 0; }
.img-status .img-note-line { flex: 1 1 auto; min-width: 0; }
.img-status-save { flex: 0 0 auto; margin-left: auto; }

.img-file-input { display: none; }
.img-download-link { display: none; }

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

.img-history {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.img-history-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.img-history-head .img-hint { flex: 1 1 240px; }
.img-history-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
.img-hcard {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(19, 52, 59, 0.06), 0 4px 12px rgba(19, 52, 59, 0.04);
}
.img-hcard.selected { box-shadow: 0 0 0 2px #1FB8CD; }
.img-hthumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    border-radius: 6px;
    background: #F3F3EE;
}
.img-hcard-title { font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.img-hcard-meta { font-size: 11px; color: rgba(19, 52, 59, 0.55); font-variant-numeric: tabular-nums; }
.img-hcard-acts { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- пакет (T4.8) ---------- */
/* Сетка — карточки Истории (.img-history-grid / .img-hcard); сверху — ход
   пакета с полосой и «Отменить оставшиеся» или подсказка, у карточки — метка
   состояния. */
.img-batch {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.img-batch-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(19, 52, 59, 0.06), 0 4px 12px rgba(19, 52, 59, 0.04);
}
.img-batch-head .img-btn { align-self: flex-start; }
.img-batch-hint { margin: 0; }
.img-bstatus {
    align-self: flex-start;
    max-width: 100%;
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(19, 52, 59, 0.06);
    color: rgba(19, 52, 59, 0.62);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
}
.img-bstatus.running { background: rgba(31, 184, 205, 0.14); color: #20808D; }
.img-bstatus.done { background: rgba(32, 128, 141, 0.14); color: #20808D; }
.img-bstatus.failed { background: rgba(229, 62, 62, 0.10); color: #c53030; }
.img-bstatus.cancelled { background: rgba(19, 52, 59, 0.04); color: rgba(19, 52, 59, 0.45); }

/* ---------- окно подтверждения цены ---------- */

.img-cost-ask {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10090;
}
.img-cost-box {
    width: 92%;
    max-width: 440px;
    background: #FFFFFF;
    border: 1px solid rgba(19, 52, 59, 0.10);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 18px 20px;
    font-family: "FK Grotesk Neue", "FKGroteskNeue", "Helvetica Neue", Arial, sans-serif;
    color: #13343B;
}
.img-cost-title { font-size: 15px; font-weight: 500; margin-bottom: 10px; }
.img-cost-line  { font-size: 13px; line-height: 1.5; color: rgba(19, 52, 59, 0.72); margin-bottom: 4px; }
.img-cost-acts  { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* ---------- свёрнутая Студия ---------- */

.img-pill {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 10040;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: none;
    border-radius: 7px;
    background: #FFFFFF;
    box-shadow: 0 4px 16px rgba(19, 52, 59, 0.16), 0 1px 3px rgba(19, 52, 59, 0.08);
    color: #13343B;
    font: 500 13px/1 "FK Grotesk Neue", "FKGroteskNeue", "Helvetica Neue", Arial, sans-serif;
    cursor: pointer;
    transition: box-shadow 150ms ease, transform 150ms ease;
}
.img-pill:hover { box-shadow: 0 6px 22px rgba(19, 52, 59, 0.22), 0 1px 3px rgba(19, 52, 59, 0.08); }
.img-pill:active { transform: scale(0.97); }
.img-pill:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30); }
.img-pill-icon { display: inline-flex; color: #20808D; }
.img-pill-label { white-space: nowrap; }
.img-pill-status { font-size: 12px; color: rgba(19, 52, 59, 0.62); white-space: nowrap; }
.img-pill-status.running { color: #20808D; }
.img-pill-status.done { color: #20808D; }
.img-pill-status.bad { color: #c53030; }

/* ---------- сравнение «до / после» (image-compare.js) ---------- */

.img-cmp {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    outline: none;
}
.img-cmp:focus-visible { box-shadow: inset 0 0 0 2px rgba(32, 184, 205, 0.30); }
.img-cmp-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 10px;
}
.img-cmp-backdrops { align-items: center; }
.img-cmp-color {
    width: 28px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}
.img-cmp-size { font-size: 12px; color: rgba(19, 52, 59, 0.62); flex: 1 1 auto; }
.img-cmp-zoom { position: relative; display: flex; align-items: center; gap: 2px; margin-left: auto; }
/* Разрешение показанной картинки — рядом с масштабом (18.09) */
.img-cmp-res { margin-right: 8px; font-size: 12px; color: rgba(19, 52, 59, 0.62); font-variant-numeric: tabular-nums; white-space: nowrap; }
.img-cmp-zoom-pct {
    min-width: 64px;
    height: 32px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #13343B;
    font: 500 12px/1 "FK Grotesk Neue", "FKGroteskNeue", "Helvetica Neue", Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}
.img-cmp-zoom-pct:hover { background: rgba(19, 52, 59, 0.06); color: #20808D; }
.img-cmp-zoom-pct:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30); }
.img-cmp-menu {
    position: absolute;
    right: 0;
    top: 36px;
    z-index: 5;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid rgba(19, 52, 59, 0.10);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(19, 52, 59, 0.12), 0 1px 3px rgba(19, 52, 59, 0.06);
    padding: 4px;
    animation: imgMenuIn 0.12s ease;
}
@keyframes imgMenuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.img-menu-item {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    color: #13343B;
    font: 500 13px/1 "FK Grotesk Neue", "FKGroteskNeue", "Helvetica Neue", Arial, sans-serif;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.img-menu-item:hover { background: rgba(19, 52, 59, 0.06); color: #20808D; }
.img-menu-item:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(32, 184, 205, 0.30); }

.img-cmp-frame {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: #E9EAE4;
    cursor: col-resize;
    touch-action: none;
    user-select: none;
}
.img-cmp-frame.zoomed { cursor: grab; }
.img-cmp-frame.panning { cursor: grabbing; }
.img-cmp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.img-cmp-label {
    position: absolute;
    top: 10px;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(19, 52, 59, 0.62);
    color: #F3F3EE;
    font-size: 12px;
    font-weight: 500;
    pointer-events: none;
    transition: opacity 150ms ease;
}
.img-cmp-label-before { left: 10px; }
.img-cmp-label-after { right: 10px; }
.img-cmp.dragging .img-cmp-label { opacity: 0.30; }
.img-cmp-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: #FFFFFF;
    box-shadow: 0 0 0 1px rgba(19, 52, 59, 0.35);
    cursor: col-resize;
}
.img-cmp-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 40px;
    margin: -20px 0 0 -16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #FFFFFF;
    color: #20808D;
    box-shadow: 0 2px 8px rgba(19, 52, 59, 0.25);
    cursor: col-resize;
    outline: none;
}
/* Ручка в фокусе с клавиатуры — видна издалека: бирюзовая заливка, белые
   стрелки, белая кайма от картинки. Бледное кольцо вокруг белой ручки поверх
   картинки владелец на приёмке 13.09 не разглядел (шаг 10: «Tab не доходит»). */
.img-cmp-handle:focus-visible {
    background: #1FB8CD;
    color: #FFFFFF;
    box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px rgba(19, 52, 59, 0.35), 0 2px 10px rgba(19, 52, 59, 0.35);
}

/* ---------- рабочий холст (T4.4, image-canvas.js): маска, линейка, контуры ---------- */
/* Полоса и кадр — по образцу сравнения «до / после»: те же кнопки масштаба и меню. */
.img-canvas-host { position: absolute; inset: 0; display: flex; }
.img-canvas {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    outline: none;
}
.img-canvas:focus-visible { box-shadow: inset 0 0 0 2px rgba(32, 184, 205, 0.30); }
.img-canvas-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 10px;
}
.img-canvas-size,
.img-canvas-ruler { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(19, 52, 59, 0.62); }
.img-canvas-range { width: 110px; accent-color: #20808D; }
.img-canvas-val { min-width: 40px; font-size: 12px; color: rgba(19, 52, 59, 0.62); font-variant-numeric: tabular-nums; }
.img-canvas-act { padding: 6px 10px; font-size: 12px; }
.img-canvas-info { flex: 1 1 auto; min-width: 120px; font-size: 12px; color: rgba(19, 52, 59, 0.62); }
/* Надпись линейки — постоянной ширины (19.09): сменилась «Проведите линейку…» на «207 пикс.» —
   панель не меняет высоту, холст не перевписывается под мышью. Целиком — в подсказке (title). */
.img-canvas-ruler .img-canvas-val { display: inline-block; width: 18em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.img-canvas-len { width: 90px; padding: 5px 8px; font-size: 13px; }
.img-canvas-unit { width: auto; padding: 5px 8px; font-size: 13px; }
.img-canvas-frame {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: #E9EAE4;
    cursor: crosshair;
    touch-action: none;
    user-select: none;
}
/* Кисть и ластик — своё кольцо размера кисти на холсте вместо стрелки. */
.img-canvas-frame.tool-brush,
.img-canvas-frame.tool-eraser { cursor: none; }
.img-canvas-frame.tool-pan.zoomed { cursor: grab; }
.img-canvas-frame.panning { cursor: grabbing; }
/* «Правка» (T7.3): над объектом — «выбрать», над ручкой вершины — «тянуть». */
.img-canvas-frame.tool-edit { cursor: default; }
.img-canvas-frame.tool-edit.over-object { cursor: pointer; }
.img-canvas-frame.tool-edit.over-handle { cursor: move; }
/* Пометки (18.10): стрелка, рамка, овал, маркер — перекрестие; цвет — кружок в кнопке. */
.img-canvas-frame.tool-mark { cursor: crosshair; }
.img-marks-host { flex-direction: column; }
.img-canvas-colors .img-canvas-color { padding: 5px 8px; display: inline-flex; align-items: center; justify-content: center; }
.img-canvas-color-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.img-canvas-el { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* «Рука» без увеличения (приёмка 15.09): подсказка поверх картинки — тёмная плашка, не кнопка. */
.img-canvas-hint {
    position: absolute;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
    max-width: calc(100% - 24px);
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(19, 52, 59, 0.88);
    color: #FFFFFF;
    font-size: 12px;
    line-height: 1.35;
    text-align: center;
    pointer-events: none;
    z-index: 2;
}

/* ---------- измерения (T7.3): холст сверху, таблица найденного снизу ---------- */
.img-scale-host { flex-direction: column; }
.img-scale-canvas { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.img-measure {
    flex: 0 0 auto;
    max-height: 42%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    overflow: auto;
    background: #FCFCF9;
    border-top: 1px solid rgba(19, 52, 59, 0.10);
}
.img-measure-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.img-measure-sum { flex: 1 1 240px; min-width: 0; font-size: 13px; font-weight: 600; color: #13343B; }
.img-measure-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.img-measure-acts .img-btn { padding: 6px 10px; font-size: 12px; }
.img-measure-notes { display: flex; flex-direction: column; gap: 4px; }
.img-measure-accuracy { font-style: italic; }
.img-measure-wrap { overflow-x: auto; }
.img-measure-table { width: 100%; border-collapse: collapse; font-size: 12px; color: #13343B; font-variant-numeric: tabular-nums; }
.img-measure-table th {
    text-align: left;
    font-weight: 600;
    padding: 4px 8px;
    color: rgba(19, 52, 59, 0.62);
    border-bottom: 1px solid rgba(19, 52, 59, 0.12);
    white-space: nowrap;
}
.img-measure-table td { padding: 4px 8px; border-bottom: 1px solid rgba(19, 52, 59, 0.06); white-space: nowrap; }
.img-measure-row { cursor: pointer; }
.img-measure-row:hover td { background: rgba(32, 184, 205, 0.08); }
.img-measure-num { width: 32px; color: rgba(19, 52, 59, 0.62); }
/* Ячейка таблицы остаётся ячейкой (flex у <td> сбивает линии строк) — кружок строчный. */
.img-measure-cls { white-space: nowrap; }
.img-measure-act { width: 60px; text-align: right; }
/* Кружок класса — та же палитра, что у слоя холста (image-canvas.js, PALETTE). */
.img-measure-dot { display: inline-block; width: 9px; height: 9px; margin-right: 6px; vertical-align: -1px; border-radius: 50%; background: #1FB8CD; }
.img-measure-dot[data-c="1"] { background: #E53E3E; }
.img-measure-dot[data-c="2"] { background: #D69E2E; }
.img-measure-dot[data-c="3"] { background: #38A169; }
.img-measure-dot[data-c="4"] { background: #805AD5; }
.img-measure-dot[data-c="5"] { background: #DD6B20; }
.img-measure-total { font-size: 12px; color: #13343B; font-weight: 600; }

/* ---------- «Распознать» на компьютере (T1.7б ТЗ «Непрерывность на любой модели»):
   сверху итог и выгрузки, под ними — распознанный документ для проверки ---------- */
.img-ocr-host { position: absolute; inset: 0; display: flex; flex-direction: column; background: #FCFCF9; }
.img-ocr-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(19, 52, 59, 0.10);
}
.img-ocr-sum { flex: 1 1 240px; min-width: 0; font-size: 13px; font-weight: 600; color: #13343B; }
.img-ocr-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.img-ocr-acts .img-btn { padding: 6px 10px; font-size: 12px; }
.img-ocr-note { flex: 0 0 auto; padding: 6px 12px; font-size: 12px; color: #8A6D1F; border-bottom: 1px solid rgba(214, 158, 46, 0.25); }
.img-ocr-doc {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 16px 20px;
    background: #FFFFFF;
    color: #13343B;
    font-size: 14px;
    line-height: 1.5;
}
.img-ocr-doc h1 { font-size: 19px; margin: 0 0 10px; }
.img-ocr-doc h2 { font-size: 16px; margin: 14px 0 8px; }
.img-ocr-doc h3, .img-ocr-doc h4, .img-ocr-doc h5, .img-ocr-doc h6 { font-size: 14px; margin: 12px 0 6px; }
.img-ocr-doc p { margin: 0 0 8px; }
.img-ocr-doc ul, .img-ocr-doc ol { margin: 0 0 8px 20px; padding: 0; }
.img-ocr-doc table { border-collapse: collapse; margin: 6px 0 12px; font-size: 13px; font-variant-numeric: tabular-nums; }
.img-ocr-doc th, .img-ocr-doc td { border: 1px solid rgba(19, 52, 59, 0.18); padding: 4px 8px; text-align: left; vertical-align: top; }
.img-ocr-doc th { font-weight: 600; }
/* Модель распознавания в правой колонке: состояние, ход скачивания, кнопки. */
.img-ocr-engine { display: flex; flex-direction: column; gap: 8px; }
.img-ocr-state { font-size: 13px; color: #13343B; }
.img-ocr-state.ok { color: #276749; }
.img-ocr-state.bad { color: #C53030; }

/* ---------- чертёж (T7.4): разделы таблицами, «проверьте» — жёлтая пометка ---------- */
/* Разделов пять — панели половина места (с отступами), остальное прокручивается:
   холст над ней нужен — значения сверяют с листом. */
.img-measure.img-measure-drawing { max-height: 50%; box-sizing: border-box; }
/* Панель — гибкий столбец: без запрета сжиматься пять таблиц схлопывались до
   заголовков, каждая со своей прокруткой. Прокручивается панель целиком. */
.img-measure-drawing > * { flex-shrink: 0; }
.img-dr-sec { margin-top: 4px; font-size: 12px; font-weight: 600; color: #13343B; }
/* Значения — как напечатаны, бывают длинными (наименование, требование): переносятся. */
.img-dr-table td { white-space: normal; }
.img-dr-table td.img-measure-num { white-space: nowrap; }
.img-dr-conf { width: 1%; white-space: nowrap !important; color: rgba(19, 52, 59, 0.62); }
/* Без заливки: полоса слева и жёлтое слово — заливка в заливке не нужна. */
.img-dr-check td:first-child { box-shadow: inset 3px 0 0 #D69E2E; }
.img-dr-check td { color: #975A16; }
.img-dr-flag { margin-left: 6px; font-weight: 600; color: #975A16; }

/* ---------- «Сравнить два снимка» (T7.5): пара «было / стало» над холстом ---------- */
/* Без своей заливки: лежит на рабочей области, кнопки — обычный переключатель Студии
   (заливка в заливке не нужна; тёмных правил к новому не пишем — владелец 15.09). */
.img-pair {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(19, 52, 59, 0.10);
}
.img-pair-seg { flex: 0 1 auto; min-width: 0; }
/* Кнопки пары и ссылки — в одну строку: холсту под ними нужно место (имя целиком — в подсказке). */
.img-pair-seg .img-seg-btn { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.img-pair-acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.img-pair-note { flex: 1 1 100%; }
/* Над холстом у сравнения ещё и полоса пары: панель изменений ниже обычной, чтобы
   холсту осталось не меньше 40 % места (живой Edge меряет). Прокручивается панель целиком. */
.img-measure.img-measure-changes { max-height: 36%; box-sizing: border-box; }
.img-measure-changes > * { flex-shrink: 0; }
/* Изменения: тип словом перед описанием; описание — как у модели, переносится. */
.img-changes-table td.img-changes-what { white-space: normal; }
.img-changes-type { font-weight: 600; }
.img-changes-summary { color: #13343B; }
/* Изменения двух способов (модель и по пикселям, T7.8) — переключатель у сводки. */
.img-changes-show { flex: 0 0 auto; }

/* ---------- узкое окно ---------- */

@media (max-width: 1100px) {
    .img-body { grid-template-columns: 200px minmax(0, 1fr) 300px; }
}

/* ---------- прокрутка ---------- */

.img-modal ::-webkit-scrollbar { width: 8px; height: 8px; }
.img-modal ::-webkit-scrollbar-track { background: transparent; }
.img-modal ::-webkit-scrollbar-thumb { background: rgba(19, 52, 59, 0.18); border-radius: 4px; }
.img-modal ::-webkit-scrollbar-thumb:hover { background: rgba(19, 52, 59, 0.30); }

/* ====================================================================
   ТЁМНАЯ ТЕМА — на каждую поверхность (P16: у «Процессов» её нет вовсе,
   и в тёмной теме окно было белым).
   ==================================================================== */

body.dark-theme .img-overlay { background: rgba(0, 0, 0, 0.45); }
body.dark-theme .img-modal { background: #242424; border-color: rgba(255, 255, 255, 0.10); color: #E8E8E3; }
body.dark-theme .img-header { border-bottom-color: rgba(255, 255, 255, 0.08); }
body.dark-theme .img-subtitle,
body.dark-theme .img-hint,
body.dark-theme .img-reason,
body.dark-theme .img-field-label,
body.dark-theme .img-drop-hint,
body.dark-theme .img-empty-text,
body.dark-theme .img-progress-text,
body.dark-theme .img-cmp-size,
body.dark-theme .img-hcard-meta,
body.dark-theme .img-range-labels,
body.dark-theme .img-more-summary,
body.dark-theme .img-group-title { color: rgba(255, 255, 255, 0.60); }
body.dark-theme .img-chip { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.72); }
body.dark-theme .img-head-note { background: rgba(32, 184, 205, 0.14); color: #E8E8E3; }
body.dark-theme .img-head-note.bad { background: rgba(229, 62, 62, 0.18); color: #feb2b2; }
body.dark-theme .img-ops { background: rgba(32, 184, 205, 0.16); color: #E8E8E3; }
body.dark-theme .img-ops:hover { background: rgba(32, 184, 205, 0.24); }
body.dark-theme .img-ops.done { background: #20808D; color: #FFFFFF; }
body.dark-theme .img-ops.bad { background: rgba(229, 62, 62, 0.18); color: #feb2b2; }
body.dark-theme .img-ops.bad .img-ops-dot { background: #feb2b2; }
body.dark-theme .img-ops-menu { background: #2D2D2D; border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
body.dark-theme .img-ops-row:hover { background: rgba(255, 255, 255, 0.06); }
body.dark-theme .img-ops-row::before { background: rgba(255, 255, 255, 0.30); }
body.dark-theme .img-ops-row.running::before,
body.dark-theme .img-ops-row.done::before { background: #20B8CD; }
body.dark-theme .img-ops-row.bad::before { background: #feb2b2; }
body.dark-theme .img-ops-row-title { color: #E8E8E3; }
body.dark-theme .img-ops-row-detail { color: rgba(255, 255, 255, 0.62); }
body.dark-theme .img-ops-row.bad .img-ops-row-detail { color: #feb2b2; }
body.dark-theme .img-icon-btn { color: rgba(255, 255, 255, 0.62); }
body.dark-theme .img-icon-btn:hover { background: rgba(255, 255, 255, 0.08); color: #20B8CD; }
body.dark-theme .img-pane { background: #1F1F1F; border-right-color: rgba(255, 255, 255, 0.08); }
body.dark-theme .img-task { color: #E8E8E3; }
body.dark-theme .img-task:hover { background: rgba(255, 255, 255, 0.06); }
body.dark-theme .img-task.active { background: rgba(32, 184, 205, 0.16); color: #20B8CD; }
body.dark-theme .img-task.blocked { color: rgba(255, 255, 255, 0.35); }
body.dark-theme .img-history-btn { border-top-color: rgba(255, 255, 255, 0.08); }
body.dark-theme .img-stage { background: #1A1A1A; }
body.dark-theme .img-drop-icon { color: rgba(255, 255, 255, 0.45); }
body.dark-theme .img-progress-bar { background: rgba(255, 255, 255, 0.10); }
body.dark-theme .img-variant { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.78); }
body.dark-theme .img-variant:hover { background: rgba(255, 255, 255, 0.10); color: #20B8CD; }
body.dark-theme .img-variant.active { background: rgba(32, 184, 205, 0.20); color: #20B8CD; }
body.dark-theme .img-side { border-left-color: rgba(255, 255, 255, 0.08); }
body.dark-theme .img-side-foot { border-top-color: rgba(255, 255, 255, 0.08); }
body.dark-theme .img-input { background: #2D2D2D; border-color: rgba(255, 255, 255, 0.12); color: #E8E8E3; }
body.dark-theme .img-input::placeholder { color: rgba(255, 255, 255, 0.40); }
body.dark-theme .img-seg-btn { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.78); }
body.dark-theme .img-seg-btn:hover { background: rgba(255, 255, 255, 0.10); color: #20B8CD; }
body.dark-theme .img-seg-btn.active { background: rgba(32, 184, 205, 0.22); color: #20B8CD; }
body.dark-theme .img-seg-btn.blocked { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.32); }
body.dark-theme .img-more { border-top-color: rgba(255, 255, 255, 0.08); }
body.dark-theme .img-style-edit { border-left-color: rgba(32, 184, 205, 0.40); }
body.dark-theme .img-check,
body.dark-theme .img-scale-now { color: #E8E8E3; }
body.dark-theme .img-price.bad { color: #feb2b2; }
body.dark-theme .img-btn { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.86); }
body.dark-theme .img-btn:hover { background: rgba(32, 184, 205, 0.16); color: #20B8CD; }
body.dark-theme .img-btn:disabled { background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.35); }
body.dark-theme .img-btn-primary { background: #20808D; color: #F3F3EE; }
body.dark-theme .img-btn-primary:hover { background: #1FB8CD; color: #1A1A1A; }
body.dark-theme .img-btn-ghost { background: transparent; color: rgba(255, 255, 255, 0.62); }
body.dark-theme .img-btn-ghost:hover { background: rgba(255, 255, 255, 0.08); color: #20B8CD; }
body.dark-theme .img-run.blocked { background: rgba(255, 255, 255, 0.10); color: rgba(255, 255, 255, 0.50); }
body.dark-theme .img-btn-link { color: #20B8CD; }
body.dark-theme .img-btn-danger { color: #feb2b2; }
body.dark-theme .img-note-line { background: rgba(32, 184, 205, 0.14); color: #E8E8E3; }
body.dark-theme .img-note-line.bad { background: rgba(229, 62, 62, 0.18); color: #feb2b2; }
body.dark-theme .img-hcard { background: #2D2D2D; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.30); }
body.dark-theme .img-hthumb { background: #1A1A1A; }
body.dark-theme .img-batch-head { background: #2D2D2D; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.30); }
body.dark-theme .img-bstatus { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.62); }
body.dark-theme .img-bstatus.running,
body.dark-theme .img-bstatus.done { background: rgba(32, 184, 205, 0.18); color: #20B8CD; }
body.dark-theme .img-bstatus.failed { background: rgba(229, 62, 62, 0.18); color: #feb2b2; }
body.dark-theme .img-bstatus.cancelled { background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.40); }
body.dark-theme .img-cost-ask { background: rgba(0, 0, 0, 0.50); }
body.dark-theme .img-cost-box { background: #2D2D2D; border-color: rgba(255, 255, 255, 0.10); color: #E8E8E3; }
body.dark-theme .img-cost-line { color: rgba(255, 255, 255, 0.72); }
body.dark-theme .img-pill { background: #2D2D2D; color: #E8E8E3; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45); }
body.dark-theme .img-pill-status { color: rgba(255, 255, 255, 0.62); }
body.dark-theme .img-pill-status.running,
body.dark-theme .img-pill-status.done { color: #20B8CD; }
body.dark-theme .img-cmp-zoom-pct { color: #E8E8E3; }
body.dark-theme .img-cmp-zoom-pct:hover { background: rgba(255, 255, 255, 0.08); color: #20B8CD; }
body.dark-theme .img-cmp-menu { background: #2D2D2D; border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
body.dark-theme .img-menu-item { color: #E8E8E3; }
body.dark-theme .img-menu-item:hover { background: rgba(255, 255, 255, 0.08); color: #20B8CD; }
body.dark-theme .img-cmp-frame { background: #141414; }
body.dark-theme .img-canvas-frame { background: #141414; }
body.dark-theme .img-canvas-size,
body.dark-theme .img-canvas-ruler,
body.dark-theme .img-canvas-val,
body.dark-theme .img-canvas-info { color: rgba(255, 255, 255, 0.60); }
body.dark-theme .img-cmp-handle { background: #3A3A3A; color: #20B8CD; }
body.dark-theme .img-cmp-handle:focus-visible { background: #1FB8CD; color: #191A1A; box-shadow: 0 0 0 3px #191A1A, 0 0 0 5px rgba(32, 184, 205, 0.55); }
body.dark-theme .img-cmp-divider { background: #E8E8E3; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45); }
body.dark-theme .img-cmp-label { background: rgba(0, 0, 0, 0.60); color: #E8E8E3; }
body.dark-theme .img-modal ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); }
body.dark-theme .img-project { border-bottom-color: rgba(255, 255, 255, 0.08); }
body.dark-theme .img-project-label { color: rgba(255, 255, 255, 0.55); }
body.dark-theme .img-project-menu { background: #2D2D2D; border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
body.dark-theme .img-menu-item.danger { color: #feb2b2; }
body.dark-theme .img-menu-item.danger:hover { background: rgba(229, 62, 62, 0.18); color: #feb2b2; }
body.dark-theme .img-btn-danger-fill { background: rgba(229, 62, 62, 0.20); color: #feb2b2; }
body.dark-theme .img-btn-danger-fill:hover { background: rgba(229, 62, 62, 0.28); color: #feb2b2; }
body.dark-theme .img-measure { background: #202020; border-top-color: rgba(255, 255, 255, 0.08); }
body.dark-theme .img-measure-sum,
body.dark-theme .img-measure-total,
body.dark-theme .img-measure-table { color: #E8E8E3; }
body.dark-theme .img-measure-table th { color: rgba(255, 255, 255, 0.60); border-bottom-color: rgba(255, 255, 255, 0.12); }
body.dark-theme .img-measure-table td { border-bottom-color: rgba(255, 255, 255, 0.06); }
body.dark-theme .img-measure-row:hover td { background: rgba(32, 184, 205, 0.14); }
body.dark-theme .img-measure-num { color: rgba(255, 255, 255, 0.55); }
/* Цвета классов те же, что на холсте; на тёмном — тонкое кольцо, чтобы тёмные не терялись. */
body.dark-theme .img-measure-dot { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); }