* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, sans-serif; background: #f6f8fa; color: #1f2328; }
.topbar { display: flex; align-items: center; gap: 16px; min-height: 60px; padding: 8px 20px; background: #fff; border-bottom: 1px solid #e5e9ef; box-shadow: 0 1px 6px rgba(31, 35, 40, .05); }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-badge { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #e8f5ec, #d4ebd9); font-size: 22px; line-height: 1; flex: none; transition: transform .15s ease; }
.logo:hover .logo-badge { transform: scale(1.07) rotate(-4deg); }
.logo-slats rect:nth-child(1) { fill: #4aa863; }
.logo-slats rect:nth-child(2) { fill: #2f7d46; }
.logo-slats rect:nth-child(3) { fill: #3f9d5a; }
.logo-slats rect:nth-child(4) { fill: #276b3c; }
.logo-text { font-size: 21px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.logo-t1 { color: #17241d; }
.logo-t2 { color: #2f7d46; }
.logo:hover .logo-t2 { color: #276b3c; }
.topnav-login { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 18px; border-radius: 999px; background: #2f7d46; color: #fff; font-size: 15px; font-weight: 700; transition: background .12s ease; }
.topnav-login:hover { background: #276b3c; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 16px; }
a { color: #1f6feb; }
.btn { display: inline-block; padding: 8px 16px; background: #1f6feb; color: #fff; border: 0; border-radius: 8px; cursor: pointer; text-decoration: none; font-size: 15px; }
input, select { padding: 8px 10px; border: 1px solid #d0d7de; border-radius: 8px; font-size: 15px; }
.topnav { display: flex; gap: 6px; margin-left: auto; align-items: center; }
.topnav a { text-decoration: none; }
.topnav-link { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 15px; border-radius: 999px; font-size: 15px; font-weight: 600; color: #444c56; transition: background .12s ease, color .12s ease; }
.topnav-link:hover { background: #eef2f7; color: #1f2328; }
.topnav-link.topnav-active { background: #1f6feb; color: #fff; }
.topnav-link.topnav-active:hover { background: #1a5fd0; }
.me { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; padding: 4px 13px 4px 5px; border-radius: 999px; background: #f6f8fa; border: 1px solid #e5e9ef; color: #1f2328; font-size: 14px; font-weight: 600; white-space: nowrap; }
.me-avatar { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #1f6feb, #5b93f5); color: #fff; font-size: 14px; font-weight: 700; line-height: 1; flex: none; }
.topnav-logout { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 15px; border-radius: 999px; border: 1px solid #d0d7de; color: #57606a; font-size: 14px; font-weight: 600; transition: background .12s ease, border-color .12s ease, color .12s ease; }
.topnav-logout:hover { background: #eef2f7; border-color: #b6bfc9; color: #1f2328; }
.err { color: #c62828; }
@media (max-width: 800px) {
  .topbar { flex-wrap: wrap; row-gap: 6px; padding: 8px 12px; }
  .topnav { flex-wrap: wrap; margin-left: 0; width: 100%; gap: 6px; }
  .logo-badge { width: 36px; height: 36px; border-radius: 10px; font-size: 20px; }
  .logo-text { font-size: 19px; }
  .topnav-link, .topnav-logout { padding: 8px 12px; font-size: 14px; }
  .me { margin-left: 0; font-size: 13px; }
}
.login-box { max-width: 360px; margin: 60px auto; background: #fff; padding: 24px; border-radius: 12px; border: 1px solid #e5e9ef; }
.login-box input { width: 100%; }
.muted { color: #57606a; }
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 24px; }
.swatch { margin: 0; background: #fff; border: 1px solid #e5e9ef; border-radius: 10px; overflow: hidden; }
.swatch img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.swatch figcaption { padding: 8px 10px; font-size: 13px; display: grid; gap: 2px; }
.swatch em { color: #1a7f37; font-style: normal; font-size: 12px; }
/* П12 Task 3: аффорданс галереи примеров — превью первого примера + счётчик, кнопка на всю
   ширину карточки (открывает лайтбокс с листанием, gen-watch.js — .gen-zoom-btn). */
.swatch-ex { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 6px; padding: 4px; border: 1px solid #e5e9ef; border-radius: 8px; background: #f6f8fa; cursor: pointer; text-align: left; font: inherit; }
.swatch-ex:hover { background: #eef2f7; border-color: #1f6feb; }
.swatch-ex-thumb { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; flex: none; }
.swatch-ex-count { font-size: 12px; font-weight: 700; color: #1f6feb; }
.card { background: #fff; border: 1px solid #e5e9ef; border-radius: 10px; padding: 14px; }
.cards { display: grid; gap: 10px; margin-top: 14px; }
.proj { display: grid; gap: 3px; text-decoration: none; color: inherit; }
.row-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
@media (max-width: 600px) { .row-form input { flex: 1 1 140px; } }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-top: 12px; }
.photo-grid img { width: 100%; border-radius: 10px; border: 1px solid #e5e9ef; }
.wall-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.wall-row input { width: 110px; }
.wall-row select { flex: 1; min-width: 160px; }
/* П11 Т3: высота зоны (только linear-позиции) — своей строкой, чтобы не сжимать соседей. */
.wall-zone-input { flex: 1 1 100%; }
/* Ревью Т3: предупреждение «высота зоны больше длины хлыста» — не ошибка, тот же тон, что .s-badge-warn. */
.zone-warn { flex: 1 1 100%; margin: 0; padding: 6px 10px; border-radius: 6px; background: #fff4e5; color: #8a5300; font-size: 13px; }
.acc-row { display: flex; gap: 8px; margin-bottom: 8px; }
.acc-row select { flex: 1; min-width: 160px; }
.acc-row input { width: 130px; }
.btn-ghost { background: #eef2f7; color: #1f2328; }
.est { margin-top: 10px; }
.est table { width: 100%; border-collapse: collapse; font-size: 14px; }
.est th, .est td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #eef1f5; }
.est .total td { border-bottom: 0; }

/* Генератор */
.gen-hero { text-align: center; margin: 18px 0 22px; }
.gen-hero h1 { font-size: clamp(26px, 5vw, 44px); margin: 0 0 6px; }
.gen-err { text-align: center; }
.gen-layout { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }
@media (max-width: 800px) { .gen-layout { grid-template-columns: 1fr; } }
.gen-side { display: grid; gap: 12px; }
.lbl { display: block; font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.gen-side select, .gen-side textarea { width: 100%; }

/* П18 Т2: «+ Новый клиент» — инлайн-форма создания клиента в блоке «Проект клиента»
   (gen-client-create.js). Компактно, в стиле карточки — без модалок/alert/prompt. */
.client-new-toggle { display: inline-block; margin-top: 8px; padding: 0; border: 0; background: none;
  color: #1f6feb; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: underline; }
.client-new-toggle:hover { color: #1656b8; }
.client-new-toggle[hidden] { display: none; } /* та же [hidden]-ловушка — тоггл тоже прячется атрибутом (JS) */
.client-new-form { display: grid; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #e5e9ef; }
.client-new-form[hidden] { display: none; } /* display:grid перебил бы hidden — известная ловушка (tpl-item/picker/gate) */
.client-new-form .lbl { margin-bottom: 2px; }
.client-new-form input { width: 100%; }
.client-new-err { margin: 0; font-size: 13px; }
.client-new-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.client-new-actions .btn { flex: none; padding: 8px 14px; font-size: 14px; min-height: 40px; }
.client-new-cancel { padding: 0; border: 0; background: none; color: #57606a; font-size: 13px; cursor: pointer; text-decoration: underline; }
.client-new-cancel:hover { color: #1f2328; }

/* П17: направляемое последовательное заполнение — «мягкое» затемнение (НЕ hidden/display),
   пока не заполнена предыдущая обязательная ступень (updateGates() в pages/generate.php). */
.gate-locked { opacity: .45; pointer-events: none; transition: opacity .25s ease; }
#room-type-block, #photo-block, .gate-step3, #gen-submit { transition: opacity .25s ease; }
.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 2px dashed #d0d7de; border-radius: 10px; padding: 18px 10px; cursor: pointer; text-align: center; color: #57606a; }
.dropzone img { max-width: 100%; max-height: 160px; border-radius: 8px; }

/* Готовые шаблоны интерьера («Или выберите готовый шаблон») */
.tpl-block { margin-top: 12px; }
.tpl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 480px) { .tpl-grid { grid-template-columns: 1fr; } }
.tpl-item { position: relative; display: grid; gap: 4px; padding: 5px; border: 2px solid #e5e9ef; border-radius: 10px; background: #fff; cursor: pointer; align-content: start; }
.tpl-item[hidden] { display: none; } /* display:grid перебил бы hidden — известная ловушка */
.tpl-item:hover { border-color: #1f6feb; }
.tpl-item input { position: absolute; opacity: 0; pointer-events: none; }
.tpl-item img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 7px; }
.tpl-name { font-size: 11px; line-height: 1.3; color: #57606a; }
.tpl-item-on { border-color: #1f6feb; background: #eaf1ff; }
.tpl-item-on .tpl-name { color: #1f6feb; font-weight: 700; }
.tpl-item-on::after { content: '✓'; position: absolute; top: 9px; right: 9px; width: 20px; height: 20px; border-radius: 999px; background: #1f6feb; color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.tpl-hint { font-size: 12px; margin: 8px 0 0; }
.counter { text-align: right; font-size: 12px; margin-top: 4px; }
.btn-big { width: 100%; padding: 14px; font-size: 17px; border-radius: 10px; }
.gen-note { font-size: 13px; }
.gen-pick-title { margin-top: 0; margin-bottom: 4px; }
.gen-pick-hint { margin: 0 0 14px; font-size: 13px; }

/* Секции материалов и квадратики коллекций */
.mat-section { margin-bottom: 20px; }
.mat-section:last-of-type { margin-bottom: 0; }
.mat-name { margin: 0 0 10px; font-size: 17px; }
.col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
@media (max-width: 480px) { .col-grid { grid-template-columns: repeat(2, 1fr); } }
.col-tile { position: relative; display: grid; gap: 4px; padding: 8px; border: 2px solid #e5e9ef; border-radius: 12px; background: #fff; cursor: pointer; text-align: left; font: inherit; color: inherit; align-content: start; }
.col-tile:hover, .col-tile:focus-visible { border-color: #1f6feb; }
.col-tile-samples { position: relative; display: block; aspect-ratio: 1/1; border-radius: 8px; overflow: hidden; }
.col-tile-samples img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.col-tile-s2 { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.col-tile-name { font-weight: 700; font-size: 14px; }
.col-tile-count { font-size: 12px; }
.col-tile-badge { position: absolute; top: 14px; left: 14px; background: #1f6feb; color: #fff; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }

/* Строка «Выбрано:» с крестиками */
.picked-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; font-size: 14px; }
.picked-line[hidden] { display: none; }
.picked-chips { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.picked-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 0; border-radius: 999px; background: #eaf1ff; color: #1f6feb; font-size: 13px; font-weight: 700; cursor: pointer; }
.picked-chip:hover { background: #dbe8ff; }
.picked-chip-x { font-size: 11px; }

/* Режим генерации: отдельные визуализации / все выбранные в одном изображении.
   Живёт в сайдбаре (узкая колонка 340px) отдельной карточкой после шаблонов:
   fieldset без рамки внутри .card, radio-опции — на всю ширину колонки, компактные. */
.gen-mode { margin: 0; padding: 0; border: 0; min-width: 0; }
.gen-mode .lbl { margin-bottom: 8px; }
.gen-mode-opt { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 2px solid #e5e9ef; border-radius: 10px; background: #fff; cursor: pointer; margin-bottom: 8px; }
.gen-mode-opt:last-of-type { margin-bottom: 0; }
.gen-mode-opt:hover { border-color: #b6ccf5; }
.gen-mode-opt:has(input:checked) { border-color: #1f6feb; background: #eef4ff; }
.gen-mode-opt input { margin-top: 3px; accent-color: #1f6feb; flex: none; }
.gen-mode-text { display: grid; gap: 2px; font-size: 14px; min-width: 0; }
.gen-mode-text .muted { font-size: 12px; }
.gen-mode-hint { margin: 8px 0 0; font-size: 13px; }
.gen-mode-hint[hidden] { display: none; }

/* Интерьерное наполнение (П14 Т2): чекбоксы пресетов по типу помещения, карточка сразу
   под «Тип помещения» — тот же визуальный язык, что .gen-mode-opt (рамка/подсветка при checked). */
.interior-hint { margin: 0 0 8px; font-size: 12px; }
.interior-items { display: grid; gap: 6px; }
.interior-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 2px solid #e5e9ef; border-radius: 10px; background: #fff; cursor: pointer; font-size: 14px; }
.interior-item:hover { border-color: #b6ccf5; }
.interior-item:has(input:checked) { border-color: #1f6feb; background: #eef4ff; }
.interior-item input { accent-color: #1f6feb; flex: none; }

/* Попап оттенков коллекции */
.picker-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.picker-modal[hidden] { display: none; }
.picker-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .5); }
.picker-modal-dialog { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 720px; max-height: 90vh; background: #fff; border-radius: 12px; outline: none; }
.picker-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-bottom: 1px solid #e5e9ef; }
.picker-modal-head h3 { margin: 0; font-size: 17px; }
.picker-modal-x { padding: 4px 10px; border: 0; border-radius: 8px; background: none; color: #57606a; font-size: 16px; cursor: pointer; }
.picker-modal-x:hover { background: #eef2f7; }
.picker-modal-grid { padding: 14px 16px; overflow-y: auto; }
.picker-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-top: 1px solid #e5e9ef; }
body.picker-modal-open { overflow: hidden; }
@media (max-width: 640px) {
  .picker-modal { padding: 0; }
  .picker-modal-dialog { max-width: none; height: 100%; max-height: none; border-radius: 0; }
}

/* Широкий поп-ап результата генерации (План 15 Т3, редизайн — План 18 Т1). Открывается
   автоматически при загрузке страницы с gens= в URL (успешный enqueue → PRG-редирект,
   index.php?p=generate&gens=…). Карточки .gen-res в «Результатах» НЕ трогаются (П15-перенос
   узла убран — П18: сервер отдаёт разметку карточек один раз, модал строит СВОЁ представление
   поверх — крупное изображение (.gen-modal-stage) + сайдбар деталей (.gen-modal-sidebar) —
   читая уже отрисованные значения/URL/CSRF из карточек (gen-result-modal.js), а не дублируя
   вёрстку самостоятельно; пачка из нескольких генераций — ленты миниатюр-вкладок
   .gen-modal-tabs сверху, активная показана крупно). z-index: .picker-modal 100, .gen-modal 105,
   .ac-modal 120, .ac-hint-pop 200, .gen-lightbox 210 — «Увеличить» ВСЕГДА поверх всего, в т.ч.
   поверх модалки подгруппы админ-каталога (.ac-modal 120), иначе визуализация открывается под ней. */
.gen-modal { position: fixed; inset: 0; z-index: 105; display: flex; align-items: center; justify-content: center; padding: 16px; }
.gen-modal[hidden] { display: none; }
.gen-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .5); }
.gen-modal-dialog { position: relative; display: flex; flex-direction: column; width: 94vw; max-width: 1240px; max-height: 90vh; background: #fff; border-radius: 12px; outline: none; }
.gen-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 18px; border-bottom: 1px solid #e5e9ef; }
.gen-modal-head h3 { margin: 0; font-size: 18px; }
.gen-modal-x { padding: 4px 10px; border: 0; border-radius: 8px; background: none; color: #57606a; font-size: 16px; cursor: pointer; }
.gen-modal-x:hover { background: #eef2f7; }
.gen-modal-body { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; flex: 1; min-height: 0; }
body.gen-modal-open { overflow: hidden; }

/* Лента миниатюр пачки (>1 генерации в gens=) — переключатели активной генерации в .gen-modal-stage. */
.gen-modal-tabs { display: flex; gap: 8px; flex: none; overflow-x: auto; padding-bottom: 2px; }
.gen-modal-tabs[hidden] { display: none; } /* display:flex выше перебил бы UA [hidden] без этого гарда */
.gen-modal-tab { flex: none; width: 64px; height: 64px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 10px; }
.gen-modal-tab-thumb { position: relative; display: block; width: 100%; height: 100%; border-radius: 10px; overflow: hidden; background: #eef2f7; border: 2px solid transparent; }
.gen-modal-tab-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gen-modal-tab-active .gen-modal-tab-thumb { border-color: #1f6feb; }
.gen-modal-tab-status { position: absolute; right: 3px; bottom: 3px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff; }

/* Главная зона + сайдбар: широкий блок изображения слева, детали пачки справа фиксированной шириной. */
.gen-modal-layout { display: flex; gap: 20px; flex: 1; min-height: 0; }
.gen-modal-stage { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; background: #f6f8fa; border-radius: 10px; overflow: hidden; min-height: 320px; }
.gen-modal-stage .ba-wrap { width: auto; height: 100%; max-width: 100%; }
.gen-modal-stage .gen-res-main { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.gen-modal-stage-status { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 100%; height: 100%; min-height: 280px; text-align: center; padding: 24px; }
.gen-modal-stage-wait .gen-timer { font-size: 56px; }
.gen-modal-stage-error .err { font-size: 15px; max-width: 360px; }

.gen-modal-sidebar { flex: 0 0 340px; max-width: 340px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; min-height: 0; padding-right: 2px; }
.gen-modal-side-head { display: flex; flex-direction: column; gap: 2px; font-size: 16px; }
.gen-modal-side-status { display: flex; }
.gen-modal-side-section { display: flex; flex-direction: column; gap: 8px; }
.gen-modal-side-title { margin: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #57606a; }
.gen-modal-materials { display: flex; flex-wrap: wrap; gap: 10px; }
.gen-modal-swatch { display: grid; gap: 4px; width: 76px; }
.gen-modal-swatch img { width: 76px; height: 76px; object-fit: cover; border-radius: 8px; display: block; }
.gen-modal-swatch-cap { font-size: 11px; color: #57606a; line-height: 1.25; }
.gen-modal-interior-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.gen-modal-interior-list li { padding-left: 14px; position: relative; }
.gen-modal-interior-list li::before { content: '·'; position: absolute; left: 2px; font-weight: 700; color: #1f6feb; }
.gen-modal-wish { margin: 0; font-size: 14px; color: #1f2328; font-style: italic; background: #f6f8fa; border-radius: 8px; padding: 10px 12px; }
/* Кнопки карточки (клон .gen-res-actions/.gen-retry-form — тот же action/href/CSRF) — в сайдбаре
   полной ширины и колонкой, «визуально приятнее» построчного мелкого ряда карточки-источника. */
/* flex-wrap: wrap (базовое правило .gen-res-actions) в column-контейнере переносит лишние
   элементы во ВТОРУЮ КОЛОНКУ (wrap у flex-direction: column раскладывает по кросс-оси, то есть
   вбок), а не вниз — без nowrap «В примеры каталога» вылезал за пределы сайдбара. */
.gen-modal-sidebar .gen-res-actions { flex-direction: column; flex-wrap: nowrap; margin-top: auto; padding-top: 4px; }
.gen-modal-sidebar .gen-res-actions .btn { flex: none; width: 100%; }
.gen-modal-sidebar .gen-example-form { flex-direction: column; align-items: stretch; }
.gen-modal-sidebar .gen-example-select { max-width: none; width: 100%; font-size: 13px; }
.gen-modal-sidebar .gen-retry-form { margin-top: auto; padding-top: 4px; }
.gen-modal-sidebar .gen-retry-btn { width: 100%; }
.gen-modal-date { font-size: 12px; }

@media (max-width: 640px) {
  /* Мобайл 390: модал во весь экран, стейдж сверху — сайдбар под ним колонкой (тот же приём, что .picker-modal) */
  .gen-modal { padding: 0; }
  .gen-modal-dialog { width: 100%; max-width: none; height: 100%; max-height: none; border-radius: 0; }
  .gen-modal-body { overflow-y: auto; }
  .gen-modal-layout { flex-direction: column; flex: none; }
  .gen-modal-stage { min-height: 240px; max-height: 46vh; flex: none; }
  .gen-modal-sidebar { flex: none; max-width: none; overflow-y: visible; }
}
.art-note { font-size: 11px; color: #1a7f37; line-height: 1.25; }

.art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.art-card { position: relative; display: grid; gap: 2px; cursor: pointer; border: 2px solid transparent; border-radius: 10px; padding: 4px; }
.art-card img { width: 100%; aspect-ratio: 1/1.15; object-fit: cover; border-radius: 8px; display: block; }
.art-card .art-name { font-weight: 700; font-size: 13px; }
.art-card .art-tone { font-size: 11px; color: #57606a; line-height: 1.25; }
.art-card:has(.art-check:checked) { border-color: #1f6feb; background: #eef4ff; }
.art-card:has(.art-check:checked)::after { content: '✓'; position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: #1f6feb; color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.art-check { position: absolute; opacity: 0; pointer-events: none; }
.art-card:has(.art-check:disabled) { opacity: .45; cursor: not-allowed; }
.gen-results { margin-top: 24px; }
.gen-empty { text-align: center; padding: 36px 16px; }
.gen-res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.gen-res { display: grid; gap: 4px; }
/* фото 2fr + по 1fr на каждый свотч (combined-пачка кладёт рядом 2-3 свотча) */
.gen-res-imgs { display: grid; grid-auto-flow: column; grid-template-columns: 2fr; grid-auto-columns: 1fr; gap: 6px; }
.gen-res-photo, .gen-res-swatch { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; }
.badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; width: fit-content; }
.badge-wait { background: #fff3cd; color: #8a6d00; }
.badge-done { background: #d1f0d9; color: #1a7f37; }
.badge-err { background: #ffd6d6; color: #c62828; }

/* Мастер планировок */
.stepper { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 18px; flex-wrap: wrap; }
.step-item { flex: 1 1 auto; text-align: center; padding: 10px 6px; border-radius: 8px; background: #eef2f7; color: #57606a; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; }
.step-item .step-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #d0d7de; color: #fff; font-size: 12px; flex: none; }
.step-item.step-active { background: #eaf1ff; color: #1f6feb; }
.step-item.step-active .step-num { background: #1f6feb; }
.step-pane { display: none; }
.step-pane.step-active { display: block; }
.step-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.step-actions .btn { min-height: 44px; min-width: 44px; }
.plan-crop-wrap { position: relative; margin: 12px auto; max-width: 100%; touch-action: none; user-select: none; background: #111; overflow: hidden; border-radius: 8px; }
.plan-crop-wrap canvas { display: block; width: 100%; height: 100%; }
.crop-box { position: absolute; border: 2px solid #1f6feb; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55); cursor: move; touch-action: none; }
.crop-handle { position: absolute; width: 30px; height: 30px; border-radius: 50%; background: #1f6feb; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); transform: translate(-50%, -50%); touch-action: none; }
.crop-handle[data-corner="nw"] { top: 0; left: 0; cursor: nwse-resize; }
.crop-handle[data-corner="ne"] { top: 0; left: 100%; cursor: nesw-resize; }
.crop-handle[data-corner="sw"] { top: 100%; left: 0; cursor: nesw-resize; }
.crop-handle[data-corner="se"] { top: 100%; left: 100%; cursor: nwse-resize; }
.dropzone-over { border-color: #1f6feb; background: #eaf1ff; }
.plan-cards { margin-top: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.plan-card { display: grid; gap: 3px; text-decoration: none; color: inherit; align-content: start; }
.plan-thumb { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; margin-bottom: 4px; }
.plan-card-open { color: #1f6feb; font-size: 13px; font-weight: 700; }

/* Шаг 3 — обводка стен */
.pw-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 14px; align-items: start; }
.pw-layout > * { min-width: 0; }
/* Шаг «Панели»: блок выбора материалов уже, колонка сметы шире — таблица помещается целиком
   (фидбэк Яны: смета не влезала в 300px и уходила в горизонтальный скролл). */
.p4-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
@media (max-width: 800px) { .pw-layout { grid-template-columns: 1fr; } }
.pw-canvas-wrap { position: relative; margin: 10px auto 0; max-width: 100%; touch-action: none; user-select: none; background: #111; overflow: hidden; border-radius: 8px; }
.pw-canvas-wrap canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }
.pw-side { display: flex; flex-direction: column; gap: 4px; }
.pw-ceiling-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pw-ceiling-row input[type="range"] { flex: 1; }
.pw-ceiling-val { font-weight: 700; font-size: 14px; white-space: nowrap; }
.pw-walls-label { margin-top: 4px; }
.pw-walls { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.pw-wall { padding: 8px 10px; border-radius: 8px; background: #f6f8fa; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 2px solid transparent; }
.pw-wall.pw-wall-active { border-color: #1f6feb; background: #eaf1ff; }
.pw-wall-edit { display: flex; gap: 6px; align-items: center; }
.pw-wall-edit input { width: 100px; padding: 6px 8px; }
.pw-wall-edit .btn { padding: 6px 10px; min-height: 0; min-width: 0; font-size: 13px; }

/* Шаг 3 — элементы (проёмы) выбранной стены */
.pw-openings { margin-top: 12px; padding: 10px; border-radius: 10px; border: 2px solid #e5e9ef; background: #fbfcfe; }
.pw-openings.pw-op-invalid { border-color: #d1242f; background: #fff5f5; }
.pw-op-title { margin-bottom: 8px; }
.pw-op-list { list-style: none; padding: 0; margin: 0 0 4px; display: flex; flex-direction: column; gap: 6px; }
.pw-op { padding: 7px 9px; border-radius: 8px; background: #f6f8fa; font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 8px; border: 2px solid transparent; }
.pw-op.pw-op-active { border-color: #1f6feb; background: #eaf1ff; }
.pw-op-ico { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.pw-op-window .pw-op-ico { background: #7dd3fc; }
.pw-op-door .pw-op-ico { background: #8b5a2b; }
.pw-op-opening .pw-op-ico { background: #f1f5f9; border: 1.5px dashed #94a3b8; }
.pw-op-hint { font-size: 12px; margin: 2px 0 4px; }
.pw-op-add { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 2px; }
.pw-op-add .btn { flex: 1; padding: 7px 6px; min-height: 0; min-width: 0; font-size: 13px; white-space: nowrap; }
.pw-op-editor { display: flex; flex-direction: column; margin-top: 6px; }
.pw-op-editor[hidden] { display: none; } /* display:flex сильнее UA-правила [hidden] */
.pw-op-lbl { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; font-weight: 700; margin: 8px 0 2px; }
.pw-op-lbl span:last-child { font-weight: 400; color: #57606a; white-space: nowrap; }
.pw-op-row { display: flex; gap: 8px; align-items: center; }
.pw-op-row input[type="range"] { flex: 1; min-width: 0; }
.pw-op-row input[type="number"] { width: 78px; padding: 6px 8px; flex: none; }
.pw-op-del { margin-top: 10px; color: #d1242f; padding: 7px 10px; min-height: 0; font-size: 13px; }
#pw-op-error { margin: 8px 0 0; font-size: 13px; }

/* Шаг 4 — панели по стенам, смета */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip { padding: 7px 14px; border-radius: 999px; background: #eef2f7; border: 2px solid transparent; color: #1f2328; font-size: 13px; font-weight: 700; cursor: pointer; }
.chip.chip-active { background: #eaf1ff; border-color: #1f6feb; color: #1f6feb; }
.p4-walls-label { margin-top: 4px; }
.p4-walls { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.p4-wall { padding: 10px; border-radius: 8px; background: #f6f8fa; }
.p4-wall-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.p4-mini-swatch { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; flex: none; display: block; }
.p4-mini-swatch-empty { background: #e5e9ef; border: 1px dashed #d0d7de; }
.p4-wall select { width: 100%; }
/* П11 Т3: высота зоны стены (только linear) — под селектом артикула. */
.p4-zone-input { width: 100%; margin-top: 6px; }
/* Ревью Т3: предупреждение «высота зоны больше длины хлыста» — не ошибка, тон .s-badge-warn. */
.p4-zone-warn { margin: 6px 0 0; padding: 6px 10px; border-radius: 6px; background: #fff4e5; color: #8a5300; font-size: 13px; }
/* П11 Т3: «Комплектующие» — тот же вид карточки-строки, что и стены, но без свотча/имени стены. */
.p4-accessories { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.p4-accessory { display: flex; gap: 8px; align-items: center; padding: 10px; border-radius: 8px; background: #f6f8fa; }
.p4-accessory select { flex: 1; min-width: 0; }
.p4-accessory input { width: 90px; flex: none; }
.p4-side { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.p4-est-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 4px; }
.p4-est-table th, .p4-est-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #eef1f5; }
.p4-est-total { font-weight: 700; margin: 4px 0 14px; }
/* Кнопки шага «Панели» переехали в шапку 3D-блока (фидбэк Яны): «Визуализировать» рядом со
   «Сменить вид», «Назад» — слева от заголовка. Поэтому ширина по контенту, а не 100%. */
.p4-ai-btn:disabled { opacity: .55; cursor: not-allowed; }
.p4-ai-note { text-align: center; font-size: 12px; margin: 8px 0 0; }
.p4-3d-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.p4-back-top { margin-right: 4px; }
/* Смета шире своей колонки на узких экранах — скроллим таблицу внутри карточки, а не всю страницу. */
.p4-est-scroll { overflow-x: auto; max-width: 100%; }
.p4-est-scroll .p4-est-table { min-width: 320px; }
#p4-save { width: 100%; }

/* Шаг 4 — 3D-вид комнаты */
.p4-3d-card { margin-bottom: 14px; }
.p4-3d-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.p4-3d-head .lbl { margin: 0; }
#view3d { position: relative; height: 380px; border: 1px solid #e5e9ef; border-radius: 10px; overflow: hidden; background: #e8e8e8; touch-action: none; }
#view3d canvas { display: block; width: 100%; height: 100%; }

/* Шаг 4 — блок AI-визуализаций (карточки переиспользуют .gen-res из Генератора) */
.p4-ai-block { margin-bottom: 14px; }
.p4-ai-block .lbl { display: block; margin-bottom: 10px; }

/* Мастер планировок — мобильная вёрстка */
@media (max-width: 800px) {
  #view3d { height: 260px; }
  .stepper { gap: 4px; margin-bottom: 14px; }
  .step-item { padding: 8px 4px; gap: 0; }
  .step-item .step-label { display: none; }
  .step-item .step-num { width: 26px; height: 26px; font-size: 13px; }
  #p4-save, #view3d-toggle { min-height: 44px; }
  /* Проёмы: кнопки и ползунки — тапабельные цели ≥44px */
  .pw-op-add .btn, .pw-op-del, .pw-op { min-height: 44px; }
  .pw-op-editor input[type="range"], #pw-op-pos { min-height: 44px; }
  .pw-op-row input[type="number"] { min-height: 44px; }
}
.gen-res-main { width: 100%; border-radius: 8px; display: block; }
.gen-res-err { font-size: 13px; margin: 0; }
.gen-retry-form { margin: 0; }
.gen-retry-btn { width: 100%; padding: 6px 10px; font-size: 13px; }
/* Таймер генерации на pending/processing-карточках (Генератор + план-редактор) */
.gen-timer { font-size: 26px; font-weight: 800; line-height: 1.1; color: #1f6feb; font-variant-numeric: tabular-nums; }
.gen-timer-hint { font-size: 12px; margin: 0; }
/* Действия done-карточки: «Скачать» + «🔍 Увеличить» + «✏️ Доработать» в один ряд
   (wrap — на узких карточках третья кнопка переносится, а не ломает сетку) */
.gen-res-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.gen-res-actions .btn { flex: 1; }
.gen-dl-btn, .gen-zoom-btn, .gen-edit-btn { padding: 6px 10px; font-size: 13px; text-align: center; white-space: nowrap; }

/* «В примеры каталога» (П12 Т2): форма — сама флекс-элемент строки действий (карточка) или
   иконка в оверлее плитки (gen-tile) — .gen-example-form переиспользуется в обоих контекстах,
   поэтому её собственные правила нейтральны, а размер задают контекстные селекторы ниже. */
.gen-example-form { margin: 0; display: flex; gap: 6px; align-items: center; }
.gen-res-actions .gen-example-form { flex: 1 1 100%; }
.gen-res-actions .gen-example-btn { flex: 1; padding: 6px 10px; font-size: 13px; white-space: nowrap; }
.gen-example-select { min-width: 0; max-width: 120px; font-size: 12px; padding: 3px 4px; border-radius: 6px; }

/* Edit-карточка (доработка AI-редактора): бейдж + ссылка на редактор родителя */
.badge-edit { background: #e3ecfd; color: #1f4fb8; }
.gen-edit-origin { display: flex; align-items: baseline; gap: 8px; }
.gen-edit-parent-link { font-size: 13px; }

/* Лайтбокс просмотра результата (открывается по «🔍 Увеличить», JS — gen-watch.js).
   Оверлей скроллится и не перехватывает touch — нативный pinch-zoom живой. */
.gen-lightbox { position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center; background: rgba(15, 23, 42, .88); overflow: auto; outline: none; }
.gen-lightbox[hidden] { display: none; }
.gen-lightbox-img { max-width: 95vw; max-height: 95vh; object-fit: contain; border-radius: 6px; }
.gen-lightbox-x { position: fixed; top: 14px; right: 14px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.gen-lightbox-x:hover { background: rgba(255, 255, 255, .35); }
body.gen-lightbox-open { overflow: hidden; }

/* AI-редактор области (p=gen-edit): канвас-маска поверх результата + панель справа.
   Канвас: бит-карта natW×natH, CSS 100%/100% поверх img (пропорции совпадают — выравнивание
   не плывёт при resize); полупрозрачность подсветки — opacity канваса, штрихи не темнеют. */
.edit-layout { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.edit-canvas-wrap { position: relative; border-radius: 8px; overflow: hidden; background: #111; }
.edit-canvas-wrap img { display: block; width: 100%; }
.edit-canvas-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .45; touch-action: none; cursor: none; }
.edit-cursor { position: absolute; border: 2px solid #1f6feb; background: rgba(31, 111, 235, .18); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); z-index: 3; }
.edit-tools { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.edit-brush-size { display: flex; align-items: center; gap: 8px; flex: 1 1 150px; font-size: 13px; }
.edit-brush-size input[type="range"] { flex: 1; min-width: 80px; padding: 0; }
.edit-tool-btns { display: flex; gap: 6px; }
.edit-tool-btns .btn { padding: 6px 12px; font-size: 13px; min-height: 36px; }
.edit-tool-on { background: #eaf1ff; color: #1f6feb; box-shadow: inset 0 0 0 2px #1f6feb; }
.edit-side { display: grid; gap: 12px; }
.edit-side textarea { width: 100%; }
.edit-chips { margin-bottom: 14px; }
.edit-refs-drop { padding: 12px 10px; font-size: 13px; }
.edit-ref-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px; margin-top: 10px; }
.edit-ref { position: relative; }
.edit-ref img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 8px; border: 1px solid #e5e9ef; display: block; }
.edit-ref-x { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: #1f2328; color: #fff; font-size: 10px; line-height: 1; cursor: pointer; }
.edit-err { margin: 0; font-size: 14px; }
.edit-history-title { margin-top: 20px; }
@media (max-width: 800px) {
  .edit-layout { grid-template-columns: 1fr; }
  .edit-tools { gap: 8px; }
  .edit-tool-btns { flex: 1 1 100%; }
  .edit-tool-btns .btn { flex: 1; }
}

/* Коммерческое предложение — форма (p=proposal-new) и список КП на странице проекта.
   Сам документ КП (экранный лист A4 + печать) живёт в отдельном assets/css/print.css. */
.kp-form { display: grid; gap: 12px; max-width: 760px; }
.kp-form .card { display: grid; gap: 0; }
.kp-wide { width: 100%; }
textarea.kp-wide { padding: 8px 10px; border: 1px solid #d0d7de; border-radius: 8px; font: inherit; font-size: 15px; resize: vertical; }
.kp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.kp-two[hidden] { display: none; }
.kp-hint { font-size: 12px; margin: 6px 0 0; }
.kp-lbl-gap { margin-top: 14px; }
.kp-submit { margin: 4px 0 24px; }
.kp-submit .btn { max-width: 320px; }
/* Галерея визуализаций с чекбоксами (паттерн .art-card: выбор — :has(input:checked)) */
.kp-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 4px; }
.kp-pick { position: relative; display: grid; gap: 2px; align-content: start; padding: 5px; border: 2px solid #e5e9ef; border-radius: 10px; background: #fff; cursor: pointer; }
.kp-pick:hover { border-color: #1f6feb; }
.kp-pick input { position: absolute; opacity: 0; pointer-events: none; }
.kp-pick img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 7px; margin-bottom: 3px; }
.kp-pick-label { font-size: 13px; font-weight: 700; }
.kp-pick-kind { font-size: 11px; }
.kp-pick:has(input:checked) { border-color: #1f6feb; background: #eef4ff; }
.kp-pick:has(input:checked)::after { content: '✓'; position: absolute; top: 10px; right: 10px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #1f6feb; color: #fff; font-size: 14px; }
.kp-pick:has(input:disabled) { opacity: .45; cursor: not-allowed; }
/* Radio-опции сметы */
.kp-opt { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 9px 11px; border: 2px solid #e5e9ef; border-radius: 10px; background: #fff; cursor: pointer; font-size: 14px; }
.kp-opt:hover { border-color: #b6ccf5; }
.kp-opt:has(input:checked) { border-color: #1f6feb; background: #eef4ff; }
.kp-opt input { accent-color: #1f6feb; flex: none; }
.kp-disc-types { margin: 4px 0 0; }
.kp-disc-types .chip { margin: 0; }
.kp-disc-types .chip-off { opacity: .45; cursor: not-allowed; }
.kp-disc-no-est { color: #8a6d00; }
/* Список КП на странице проекта */
.kp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 10px; }
.kp-item { display: grid; gap: 3px; align-content: start; text-decoration: none; color: inherit; }
.kp-item:hover { border-color: #1f6feb; }
.kp-item-sum { font-size: 17px; font-weight: 800; color: #1f6feb; }
.kp-item-disc { font-size: 12px; color: #1a7f37; font-weight: 700; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.kp-new-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 480px) {
  .kp-two { grid-template-columns: 1fr; }
  .kp-gallery { grid-template-columns: repeat(2, 1fr); }
  .kp-submit .btn { max-width: none; }
}

/* Слайдер «до/после» */
.ba-wrap { position: relative; width: 100%; aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; background: #111; }
.ba-bottom, .ba-top { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-top { clip-path: inset(0 50% 0 0); }
.ba-label { position: absolute; top: 8px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, .55); padding: 2px 8px; border-radius: 999px; z-index: 2; }
.ba-label-before { left: 8px; }
.ba-label-after { right: 8px; }
.ba-range { position: absolute; left: 6px; right: 6px; bottom: 8px; width: calc(100% - 12px); z-index: 3; margin: 0; }

/* Админка → Сотрудники */
.u-head { margin-bottom: 14px; }
.u-head h1 { margin: 0 0 4px; font-size: 26px; }
.u-head p { margin: 0; font-size: 14px; }
.u-note { padding: 10px 14px; border-radius: 10px; font-size: 14px; margin-bottom: 12px; }
.u-note-ok { background: #e8f5ec; border: 1px solid #b7e0c4; color: #10632b; }
.u-note-err { background: #fdecec; border: 1px solid #f5c2c0; color: #a4232a; }
.u-pass { background: #fff; border: 1px solid #b7e0c4; border-left: 4px solid #1a7f37; border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }
.u-pass-title { font-weight: 700; font-size: 16px; color: #10632b; }
.u-pass-note { margin: 4px 0 10px; font-size: 13px; color: #57606a; }
.u-pass-row { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.u-pass-field { display: grid; gap: 3px; font-size: 12px; }
.u-pass-field code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; font-weight: 600; color: #1f2328; background: #f6f8fa; border: 1px solid #e5e9ef; border-radius: 8px; padding: 7px 12px; user-select: all; }
.u-copy.u-copy-done { background: #1a7f37; }
.u-create { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.u-field { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: #57606a; flex: 1 1 150px; }
.u-field input, .u-field select { width: 100%; font-weight: 400; color: #1f2328; }
.u-field-num { flex: 0 0 120px; }
.u-create-btn { min-height: 38px; }
.u-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid #e5e9ef; border-radius: 10px; overflow: hidden; font-size: 14px; }
.u-table th { text-align: left; padding: 10px 12px; background: #f6f8fa; border-bottom: 1px solid #e5e9ef; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: #57606a; }
.u-table td { padding: 10px 12px; border-bottom: 1px solid #eef1f5; vertical-align: middle; }
.u-table tr:last-child td { border-bottom: 0; }
.u-table .u-num { text-align: right; white-space: nowrap; }
.u-row-off td { background: #fbfcfd; color: #8c959f; }
.u-who { display: grid; gap: 3px; min-width: 150px; }
.u-who input { width: 100%; padding: 6px 9px; font-size: 14px; }
.u-login { font-size: 12px; color: #57606a; }
.u-table select { padding: 6px 9px; font-size: 14px; }
.u-limit { width: 78px; padding: 6px 9px; font-size: 14px; }
.u-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.u-badge-on { background: #e8f5ec; color: #10632b; }
.u-badge-off { background: #f1f3f5; color: #6e7781; }
.u-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.u-btn-sm { padding: 6px 12px; font-size: 13px; min-height: 34px; }
.u-btn-danger { color: #a4232a; border: 1px solid #f5c2c0; background: #fdecec; }
.u-btn-danger:hover { background: #f9dcdc; }
.btn.u-btn-danger:not(.btn-ghost) { color: #fff; background: #c62828; border-color: #c62828; }
.btn.u-btn-danger:not(.btn-ghost):hover { background: #b02020; }
.u-hint { font-size: 12px; color: #8c959f; }
.btn[hidden] { display: none; }   /* иначе .btn{display:inline-block} перебивает [hidden] из UA-стилей */
.u-confirm { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 8px; background: #fff8e6; border: 1px solid #f0dca4; border-radius: 8px; }
.u-confirm-text { font-size: 13px; color: #6a5300; flex: 1 1 160px; }
@media (max-width: 720px) {
  .u-table, .u-table tbody, .u-table tr, .u-table td { display: block; }
  .u-table { border: 0; background: none; border-radius: 0; overflow: visible; }
  .u-table thead { display: none; }
  .u-table tr { background: #fff; border: 1px solid #e5e9ef; border-radius: 10px; padding: 6px 12px; margin-bottom: 10px; }
  .u-table td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid #f2f4f7; }
  .u-table tr td:last-child { border-bottom: 0; }
  .u-table td::before { content: attr(data-label); flex: none; font-size: 12px; font-weight: 600; color: #57606a; text-transform: uppercase; letter-spacing: .03em; }
  .u-table .u-num { text-align: right; }
  .u-table td[data-label="Действия"] { display: block; }
  .u-table td[data-label="Действия"]::before { display: block; margin-bottom: 8px; }
  .u-row-off td { background: none; }
  .u-who { min-width: 0; flex: 1 1 auto; }
  .u-who input, .u-table select { width: 100%; }
  .u-field, .u-field-num { flex: 1 1 100%; }
  .u-create-btn { width: 100%; }
  .u-pass-row { gap: 10px; }
  .u-pass-field, .u-copy { flex: 1 1 100%; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Страница проекта (План 10): подразделы-табы, компактная сетка визуализаций,
   свёрнутые сметы, удаление объектов. Всё, что раньше вываливалось простынёй,
   разложено по разделам; сетка визуализаций не растёт по высоте — подписи и
   действия живут в оверлее по наведению (на тач — по тапу).
   ───────────────────────────────────────────────────────────────────────────── */
.proj-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.proj-head h1 { margin: 0 0 4px; }
.proj-head p { margin: 0; }
.proj-del { padding: 7px 14px; font-size: 13px; }

/* Табы разделов со счётчиками; на узком экране — горизонтальный скролл без полосы */
.ptabs { display: flex; gap: 6px; margin: 16px 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ptabs::-webkit-scrollbar { display: none; }
.ptab { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 38px; padding: 6px 14px; border: 1px solid #e5e9ef; border-radius: 999px; background: #fff; color: #57606a; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ptab:hover { background: #eef2f7; color: #1f2328; }
.ptab-active, .ptab-active:hover { background: #1f6feb; border-color: #1f6feb; color: #fff; }
.ptab-count { padding: 1px 7px; border-radius: 999px; background: #eef2f7; color: #57606a; font-size: 12px; font-weight: 700; }
.ptab-active .ptab-count { background: rgba(255, 255, 255, .25); color: #fff; }
/* Один раздел за раз — только когда JS жив (класс ставит инлайн-скрипт страницы). Без JS
   страница деградирует в прежнюю простыню: все разделы видны, ничего не теряется. */
html.js-tabs .tab-pane { display: none; }
html.js-tabs .tab-pane.tab-active { display: block; }
.tab-empty { padding: 16px 0 12px; }
.tab-hint { font-size: 13px; margin: 0 0 10px; }

/* Кнопка-иконка (🔍 ⬇ ✏️ 🗑) — в оверлее плитки, в строке сметы, на карточках */
/* 32px — чтобы все четыре действия влезли в один ряд на плитке 150–170px (шесть в ряд) */
.tile-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .92); color: #1f2328; font-size: 15px; line-height: 1; text-decoration: none; cursor: pointer; }
.tile-btn:hover { background: #fff; }
.tile-btn-del:hover { background: #c62828; color: #fff; }
.est-acts .tile-btn, .card-del .tile-btn, .gen-tile-flat .tile-btn { border: 1px solid #e5e9ef; background: #fff; }
.est-acts .tile-btn-del:hover, .card-del .tile-btn-del:hover, .gen-tile-flat .tile-btn-del:hover { background: #c62828; border-color: #c62828; color: #fff; }
.del-form { margin: 0; display: flex; }

/* Кнопка удаления на карточке (планировка, КП, проект в списке) — по наведению; на тач — всегда */
.plan-item, .kp-wrap, .proj-item { position: relative; }
.card-del { position: absolute; top: 8px; right: 8px; opacity: 0; transition: opacity .12s ease; }
.plan-item:hover .card-del, .kp-wrap:hover .card-del, .proj-item:hover .card-del, .card-del:focus-within { opacity: 1; }
@media (hover: none) { .card-del { opacity: 1; } }

/* Сетка визуализаций: квадратные миниатюры результата, 4–6 в ряд (десктоп), 2 — на 390px */
.gen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.gen-tile { position: relative; aspect-ratio: 1/1; border: 1px solid #e5e9ef; border-radius: 10px; background: #fff; overflow: hidden; }
.gen-tile-img, .photo-grid .ph-tile-img { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; border-radius: 0; }
/* Прозрачная кнопка на всю плитку: клик по миниатюре = лайтбокс (gen-watch.js) */
.gen-tile-zoom { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.gen-tile-flat { display: flex; align-items: center; justify-content: center; background: #f6f8fa; }
.gen-tile-mid { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 10px 58px; text-align: center; }
.gen-tile-mid .gen-timer { font-size: 22px; }
.gen-tile-hint { font-size: 11px; margin: 0; }
.gen-tile-retry { padding: 5px 10px; font-size: 12px; }
/* Оверлей: артикулы, дата, бейдж «Доработка» и действия. Сам оверлей кликов не ловит —
   иначе он перекрыл бы кнопку-миниатюру; ловят только его кнопки, и только когда он виден. */
.gen-ov { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; padding: 8px; color: #fff; background: linear-gradient(180deg, rgba(15, 23, 42, 0) 38%, rgba(15, 23, 42, .82) 100%); opacity: 0; transition: opacity .12s ease; pointer-events: none; }
.gen-tile:hover .gen-ov, .gen-tile:focus-within .gen-ov, .ph-tile:hover .gen-ov, .ph-tile:focus-within .gen-ov, .tile-on .gen-ov { opacity: 1; }
/* .gen-example-form (П12 Т2, select позиции для combined-пачки) — та же гейтка pointer-events,
   что .tile-btn: сам select не несёт класс .tile-btn, поэтому перечислен явно, иначе на десктопе
   он не ловил бы клики/фокус, даже когда оверлей раскрыт по :hover (только фон, без интерактива). */
.gen-ov .tile-btn, .gen-ov .gen-example-form { pointer-events: none; }
.gen-tile:hover .gen-ov .tile-btn, .gen-tile:focus-within .gen-ov .tile-btn,
.ph-tile:hover .gen-ov .tile-btn, .ph-tile:focus-within .gen-ov .tile-btn,
.tile-on .gen-ov .tile-btn,
.gen-tile:hover .gen-ov .gen-example-form, .gen-tile:focus-within .gen-ov .gen-example-form,
.tile-on .gen-ov .gen-example-form { pointer-events: auto; }
.gen-ov-label { font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gen-ov-date { font-size: 11px; opacity: .85; }
.gen-ov-badge { align-self: flex-start; }
.gen-ov-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
/* Плитка pending/processing/error: белая, содержимое по центру — оверлей поверх неё светлый */
.gen-tile-flat .gen-ov { opacity: 1; background: none; color: #1f2328; }
.gen-tile-flat .gen-ov .tile-btn, .gen-tile-flat .gen-ov .gen-example-form { pointer-events: auto; }
.gen-tile-flat .gen-ov-date { color: #57606a; }

/* Фото — та же плитка (квадрат + оверлей с 🔍 и 🗑), клик по фото = лайтбокс */
.ph-tile { position: relative; aspect-ratio: 1/1; border: 1px solid #e5e9ef; border-radius: 10px; background: #fff; overflow: hidden; }

/* Сметы — свёрнутые строки: «Планировка «Спальня» · 11.07 17:14 · 25 шт · 83,55 м² · 83 550 ₽».
   Таблица прячется в <details> (аккордеон), прошлые расчёты планировки — в «Историю расчётов». */
.est-group { margin-bottom: 16px; }
.est-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; padding: 10px 12px; background: #fff; border: 1px solid #e5e9ef; border-radius: 10px; }
.est-det { flex: 1; min-width: 0; }
.est-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; list-style: none; cursor: pointer; font-size: 14px; }
.est-sum::-webkit-details-marker { display: none; }
.est-sum::before { content: '▸'; flex: none; color: #57606a; font-size: 11px; }
.est-det[open] > .est-sum::before { content: '▾'; }
.est-sum-title { font-weight: 700; }
.est-sum-meta { color: #57606a; }
.est-sum-total { margin-left: auto; color: #1f6feb; font-size: 16px; white-space: nowrap; }
.est-gone { color: #8a6d00; font-weight: 400; font-size: 12px; }
.est-table-wrap { overflow-x: auto; margin-top: 10px; }
.est-det table { width: 100%; border-collapse: collapse; font-size: 14px; }
.est-det th, .est-det td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #eef1f5; white-space: nowrap; }
.est-det .total td { border-bottom: 0; }
.est-acts { display: flex; align-items: center; gap: 6px; flex: none; }
.est-kp { padding: 6px 12px; font-size: 13px; white-space: nowrap; }
.est-history { margin: -2px 0 0 14px; }
.est-history > summary { cursor: pointer; padding: 4px 0 8px; color: #57606a; font-size: 13px; }
.est-calc { margin-top: 16px; }
.est-calc > summary { cursor: pointer; padding: 6px 0; color: #1f6feb; font-weight: 700; font-size: 14px; }
.est-calc .card { margin-top: 8px; }

/* Модалка подтверждения удаления (никаких confirm()) */
.cfm { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 16px; }
.cfm[hidden] { display: none; }
.cfm-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .5); }
.cfm-dialog { position: relative; width: 100%; max-width: 440px; padding: 20px; background: #fff; border-radius: 12px; box-shadow: 0 12px 40px rgba(15, 23, 42, .25); outline: none; }
.cfm-title { margin: 0 0 8px; font-size: 18px; line-height: 1.3; }
.cfm-text { margin: 0 0 18px; font-size: 14px; }
.cfm-text[hidden] { display: none; }
.cfm-acts { display: flex; justify-content: flex-end; gap: 8px; }
.cfm-acts .btn { min-height: 40px; }
body.cfm-open { overflow: hidden; }

/* Лайтбокс: переключатель «до/после» вместо слайдера в сетке */
.gen-lightbox-ba { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 2; padding: 10px 18px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #1f2328; font-size: 14px; font-weight: 700; cursor: pointer; }
.gen-lightbox-ba[hidden] { display: none; }
.gen-lightbox-before::after { content: 'ДО'; position: fixed; top: 18px; left: 50%; transform: translateX(-50%); padding: 4px 14px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em; }

/* Лайтбокс: листание галереи (П12 Task 3) — стрелки по бокам + счётчик «2/5» сверху по центру.
   Создаются всегда (build()), но hidden без data-gallery/при одном примере — одиночный режим
   (карточки визуализаций) их никогда не видит. */
.gen-lightbox-prev, .gen-lightbox-next { position: fixed; top: 50%; transform: translateY(-50%); z-index: 2; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.gen-lightbox-prev:hover, .gen-lightbox-next:hover { background: rgba(255, 255, 255, .35); }
.gen-lightbox-prev[hidden], .gen-lightbox-next[hidden] { display: none; }
.gen-lightbox-prev { left: 14px; }
.gen-lightbox-next { right: 14px; }
.gen-lightbox-counter { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 2; padding: 4px 14px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 13px; font-weight: 700; }
.gen-lightbox-counter[hidden] { display: none; }

@media (max-width: 600px) {
  .proj-head { flex-direction: column; }
  .est-item { flex-direction: column; }
  .est-sum-total { margin-left: 0; }
  .est-acts { align-self: flex-end; }
}
@media (max-width: 480px) {
  /* 390px: сетки — 2 в ряд, кнопки оверлея переносятся во вторую строку */
  .gen-grid, .photo-grid { grid-template-columns: repeat(2, 1fr); }
  .gen-ov { padding: 6px; }
  .gen-ov-btns { gap: 4px; }
  .tile-btn { width: 36px; height: 36px; }
  .gen-tile-mid { padding-bottom: 52px; }
  .gen-tile-mid .gen-timer { font-size: 18px; }
  .cfm-acts .btn { flex: 1; }
  /* П12 Task 3: стрелки листания — компактнее и ближе к краю, чтобы не наезжать на изображение. */
  .gen-lightbox-prev, .gen-lightbox-next { width: 40px; height: 40px; font-size: 24px; }
  .gen-lightbox-prev { left: 6px; }
  .gen-lightbox-next { right: 6px; }
}

/* Админка → подменю разделов (Сотрудники | Настройки | Статистика) */
.subnav { max-width: 1100px; margin: 0 auto; padding: 8px 16px 0; display: flex; gap: 6px; flex-wrap: wrap; }
.subnav-link { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #57606a; text-decoration: none; border: 1px solid #e5e9ef; background: #fff; transition: background .12s ease, color .12s ease, border-color .12s ease; }
.subnav-link:hover { background: #eef2f7; color: #1f2328; }
.subnav-link.subnav-active { background: #1f6feb; color: #fff; border-color: #1f6feb; }

/* Админка → Настройки и цены */
.s-card { background: #fff; border: 1px solid #e5e9ef; border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.s-card-head { margin-bottom: 12px; }
.s-card-head h2 { margin: 0 0 4px; font-size: 17px; }
.s-card-head p { margin: 0; font-size: 13px; }
.s-mat { margin: 0; }
.s-price { width: 120px; text-align: right; }
.s-grid { display: flex; gap: 16px; flex-wrap: wrap; }
.s-field { flex: 1 1 240px; max-width: 340px; }
.s-hint { font-size: 12px; font-weight: 400; color: #8c959f; }
.s-ro { display: grid; gap: 12px; }
.s-ro-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.s-ro-key { min-width: 150px; font-size: 13px; font-weight: 600; color: #57606a; }
.s-ro-val { font-size: 14px; color: #1f2328; }
.s-ro code, .s-hint code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: #f6f8fa; border: 1px solid #e5e9ef; border-radius: 5px; padding: 1px 5px; }
.s-badge-warn { background: #fff4e5; color: #8a5300; }
.s-actions { display: flex; }
.s-actions .btn { min-height: 40px; }
@media (max-width: 720px) {
  .subnav { padding: 8px 12px 0; }
  .s-price { width: 100%; }
  .s-field { flex: 1 1 100%; max-width: none; }
  .s-ro-key { min-width: 0; flex: 1 1 100%; }
  .s-actions .btn { width: 100%; }
}

/* Кнопка возврата из AI-редактора области (фидбэк Яны): в потоке слева, не перекрывает заголовок. */
.gen-hero { position: relative; }
.edit-back { position: absolute; left: 0; top: 4px; }
@media (max-width: 800px) {
  .edit-back { position: static; display: inline-block; margin-bottom: 10px; }
}

/* ── Админка → Каталог (П11 + П13 Т2 + П19 витринная иерархия + П20 образы в окне правки) ────
   П19 (дословно Яна): «за основу отображения номенклатур берём Генератор… только располагаем
   шире»; «карточки чистые как в Генераторе, цены только внутри окна редактирования конкретной
   позиции»; «окна редактирования компактные (подсказки — в иконку !) и визуально приятные».
   Уровень 1 — секции групп (.ac-group, как раньше) + сетка карточек подгрупп (.ac-sub-grid,
   переиспользует .col-tile Генератора). Уровень 2 — модалка-витрина подгруппы, сетка чистых
   карточек позиций. П20 (дословно Яна): «функционал добавления визуализации — в окно правки
   номенклатуры, а клик по карточке — сразу крупным планом пример, внутри списка криво выглядит
   раскрытие визуализации» — инлайн-лента (.ac-ribbon, раскрывалась справа от карточки) убрана;
   карточка позиции с примерами сама стала лайтбокс-кнопкой (.gen-zoom-btn), управление образами
   (миниатюры/удаление/сортировка/генерация) переехало внутрь модалки правки позиции — секция
   .ac-ex-section ниже. */

.ac-top-actions { margin-bottom: 14px; }

/* Компактная 2-колоночная сетка полей форм (внутри модалок) — .ac-field/.ac-field-num те же
   имена классов, что были у Т2 (флекс-раскладка старых <details>-форм), теперь просто ячейки
   грида. .ac-field-wide растягивается на обе колонки (имя группы, фото — длинные поля). */
.ac-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.ac-field { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: #57606a; align-content: start; }
.ac-field > span { display: flex; align-items: center; gap: 4px; }
.ac-field input, .ac-field select { width: 100%; font-weight: 400; color: #1f2328; font-size: 14px; padding: 7px 9px; border: 1px solid #d7dce2; border-radius: 8px; }
.ac-field input[type="file"] { border: 0; padding: 2px 0; font-size: 13px; }
.ac-field[hidden] { display: none; }   /* [hidden] иначе проигрывает display:grid класса */
.ac-field-wide { grid-column: 1 / -1; }
.ac-field-num {}
.ac-sub { font-size: 11px; font-weight: 400; color: #6e7781; }   /* подпись под полем формы (не путать с .ac-subgroup) */
.ac-hint { flex-basis: 100%; grid-column: 1 / -1; margin: -4px 0 0; font-size: 12px; font-weight: 400; color: #6e7781; }
.ac-form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }

/* Иконка-«!» подсказки (П19): любой пояснительный текст полей форм скрыт сюда, попап рисует
   admin-catalog.js по клику рядом с кнопкой (XSS-safe — textContent, не innerHTML). */
.ac-hint-btn { flex: none; width: 17px; height: 17px; padding: 0; border: 1px solid #c7cdd4; border-radius: 50%; background: #f6f8fa; color: #57606a; font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer; }
.ac-hint-btn:hover, .ac-hint-btn[aria-expanded="true"] { background: #eef4ff; border-color: #1f6feb; color: #1f6feb; }
.ac-hint-pop { position: absolute; z-index: 200; max-width: 260px; padding: 8px 10px; border-radius: 8px; background: #1f2328; color: #fff; font-size: 12px; line-height: 1.35; box-shadow: 0 6px 20px rgba(15, 23, 42, .25); }

/* ── Модалки (группа-правка/создание, подгруппа-витрина/правка/создание, позиция-правка/создание) ── */
.ac-modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ac-modal[hidden] { display: none; }   /* [hidden] иначе проигрывает display:flex класса — известная ловушка */
.ac-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .5); }
.ac-modal-dialog { position: relative; display: flex; flex-direction: column; width: 100%; max-height: 88vh; background: #fff; border-radius: 12px; outline: none; }
.ac-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #e5e9ef; }
.ac-modal-head h2, .ac-modal-head h3 { margin: 0; font-size: 17px; }
.ac-modal-head-title { display: flex; flex-direction: column; gap: 2px; }
.ac-modal-head-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ac-modal-x { padding: 4px 10px; border: 0; border-radius: 8px; background: none; color: #57606a; font-size: 16px; cursor: pointer; }
.ac-modal-x:hover { background: #eef2f7; }
.ac-modal-body { padding: 16px; overflow-y: auto; }
body.ac-modal-open { overflow: hidden; }

/* Компактные модалки правки/создания (группа/подгруппа/позиция) — уже, поверх модалки-витрины. */
.ac-modal-edit { z-index: 121; }
.ac-modal-edit .ac-modal-dialog { max-width: 640px; }

/* Модалка-витрина подгруппы (уровень 2): шире — сетка чистых карточек позиций «на всю ширину». */
.ac-modal-sub .ac-modal-dialog { max-width: 1040px; width: 96vw; }

/* ── Уровень 1: секция группы — шапка + сетка подгрупп-карточек ─────────────────────────────── */
.ac-group { padding: 0; overflow: hidden; }
.ac-group-head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 16px 16px 12px; }
.ac-group-head h2 { margin: 0; font-size: 17px; }
.ac-mode { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #eef4ff; color: #1f6feb; white-space: nowrap; }
.ac-group-meta { font-size: 13px; color: #57606a; }
.ac-group-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.ac-empty { padding: 6px 16px 16px; margin: 0; font-size: 13px; }

/* Сетка карточек подгрупп — Генератор + «шире»: auto-fill КРУПНЕЕ, чем 4-в-ряд .col-grid (150px). */
.ac-sub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; padding: 4px 16px 18px; }
.ac-subtile { padding: 12px; }
.ac-subtile .col-tile-name { font-size: 15px; }
.ac-subtile .col-tile-count { font-size: 12px; }
.col-tile-samples-none { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #f6f8fa; color: #8b949e; font-weight: 700; font-size: 22px; border-radius: 8px; }

/* ── Уровень 2: модалка-витрина подгруппы — заголовок + сетка чистых карточек позиций ───────── */
.ac-sub-count { white-space: nowrap; font-size: 12px; font-weight: 600; color: #6e7781; }

/* Позиции — простая обёртка с переносом (карточки одинаковой ширины, без сложной ribbon-раскладки
   П19 — с П20 у карточки больше нет соседа, который рос бы в остаток ряда). Карточка БЕЗ примеров —
   курсор обычный (клик по телу ничего не делает, только «Править»); карточка С примерами несёт
   .gen-zoom-btn (см. pages/admin-catalog.php) — курсор zoom-in, клик открывает лайтбокс. */
.ac-pos-grid { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.ac-pos-card { position: relative; width: 132px; display: grid; gap: 3px; padding: 8px; border: 2px solid #e5e9ef; border-radius: 10px; text-align: left; }
/* .gen-zoom-btn (нужен для делегирования лайтбокса gen-watch.js) приносит white-space:nowrap и
   text-align:center — из-за nowrap длинный тон не переносился и РАСПИРАЛ карточку с примерами
   (min-content flex-элемента = вся строка), следом рос свотч. Возвращаем раскладку обычной карточки,
   чтобы карточки С примерами и БЕЗ были одного размера (фидбэк Яны). */
.ac-pos-card.gen-zoom-btn { cursor: zoom-in; white-space: normal; text-align: left; font-size: inherit; }
.ac-pos-card:hover, .ac-pos-card:focus-visible { border-color: #1f6feb; outline: none; }
.ac-pos-swatch { width: 100%; aspect-ratio: 1/1.15; object-fit: cover; border-radius: 8px; display: block; background: #f6f8fa; }
.ac-pos-swatch-none { display: flex; align-items: center; justify-content: center; color: #8b949e; font-weight: 700; }
.ac-pos-name { font-weight: 700; font-size: 13px; }
.ac-pos-tone { font-size: 11px; color: #57606a; line-height: 1.25; }
.ac-pos-ex-count { font-size: 11px; }
.ac-pos-badge { position: absolute; top: 6px; left: 6px; padding: 2px 8px; font-size: 10px; }
.ac-pos-edit { position: absolute; top: 6px; right: 6px; padding: 3px 8px; font-size: 11px; min-height: 0; background: #fff; border: 1px solid #e5e9ef; cursor: pointer; }

/* ── П20: секция «Визуализации» внутри модалки правки позиции (была отдельной лентой рядом с
   карточкой — «внутри списка криво выглядит», фидбэк Яны) — компактно, под формой правки, тот же
   .ac-modal-body со скроллом. Внутренние классы миниатюр/сетки/ошибок (.ac-ex-*) не переименованы —
   только внешняя обёртка (была .ac-ribbon). */
.ac-ex-section { margin-top: 16px; padding-top: 14px; border-top: 1px solid #e5e9ef; }
.ac-ex-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 8px; }
.ac-ex-title { font-size: 12px; font-weight: 700; color: #1f6feb; }
.ac-ex-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.ac-ex-item { position: relative; width: 76px; display: grid; gap: 3px; text-align: center; }
.ac-ex-thumb { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.ac-ex-thumb img { width: 76px; height: 100px; object-fit: cover; border-radius: 6px; border: 1px solid #e5e9ef; background: #fff; display: block; }
.ac-ex-del { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; padding: 0; border-radius: 50%; font-size: 11px; line-height: 1; }
.ac-ex-sort-form { margin: 0; display: flex; gap: 4px; }
.ac-ex-sort { width: 100%; min-width: 0; text-align: center; font-size: 11px; padding: 2px 4px; }
.ac-ex-sort-form .btn { padding: 2px 6px; min-height: 0; }
.ac-ex-pending { margin: 8px 0 0; font-size: 12px; }
/* Упавшие example-генерации: текст ошибки + дата + «Повторить»/«Скрыть». */
.ac-ex-error { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 8px 0 0; }
.ac-ex-error-text { margin: 0; font-size: 12px; flex: 1 1 240px; }
.ac-ex-error-actions { margin: 0; }
/* П19-фидбэк Яны: генерация примера — компактной строкой (шаблон + кнопка), не блоком отдельно. */
.ac-ex-gen-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ac-ex-gen-form select { font-size: 13px; padding: 5px 7px; max-width: 220px; }

@media (max-width: 720px) {
  .ac-group-actions { margin-left: 0; flex-basis: 100%; }
  .ac-sub-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 4px 12px 16px; }
  .ac-pos-card { width: calc(50% - 7px); }
}

@media (max-width: 640px) {
  .ac-modal { padding: 0; }
  /* !important на width ОБЯЗАТЕЛЕН: .ac-modal-sub .ac-modal-dialog (0,2,0) задаёт width:96vw для
     десктопа — без !important эта более специфичная десктопная width победила бы даже под
     мобильным брейкпоинтом (медиа-запрос не влияет на специфичность, только на применимость). */
  .ac-modal-dialog { max-width: none !important; width: 100% !important; height: 100%; max-height: none; border-radius: 0; }
  .ac-modal-body { padding: 14px; }
  .ac-modal-head { padding: 12px 14px; flex-wrap: wrap; }
  .ac-modal-head-actions { width: 100%; justify-content: flex-start; }
  .ac-form-grid { grid-template-columns: 1fr; }
  .ac-field-wide { grid-column: auto; }
}