/* Холст-редактор — «красный» дизайн. Переменные берём из base_v2.html (:root). */

.ed {
  display: grid;
  /* minmax(0, 1fr) для центра КРИТИЧНО: без явного min=0 у grid-трека min-width=auto,
     и раздутый зумом канвас растягивает центральную колонку → боковые панели «уезжают»
     и растут. С minmax(0,1fr) канвас скроллится внутри .ed-stage-scroll, а сетка стоит. */
  grid-template-columns: 156px 108px minmax(0, 1fr) 300px;
  /* grid-template-rows КРИТИЧНО от «дёргания при зуме»: без явной строки единственная
     строка грида сайзится ПО КОНТЕНТУ, и раздутый зумом холст (выше вьюпорта) растягивал
     центральную колонку → строка грида росла → боковые панели (align-items:stretch)
     тянулись по высоте вслед за холстом → вся раскладка прыгала на КАЖДЫЙ шаг колеса
     («панели по бокам увеличиваются»). minmax(0,1fr) фиксирует строку по высоте .ed
     (calc ниже) и разрешает детям переполнение → холст скроллится ВНУТРИ
     .ed-stage-scroll фиксированной высоты, панели стоят. */
  grid-template-rows: minmax(0, 1fr);
  gap: 12px;
  /* Fullscreen «как в Canva»: редактор занимает всю ширину и высоту под шапкой,
     без центрирующего max-width и нижнего футера (он скрыт в editor.css). */
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  height: calc(100vh - 68px);
  min-height: 520px;
  box-sizing: border-box;
}

/* ── Левый рейл: только инструменты (одна колонка) ── */
.ed-rail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--sand);
  border: 1px solid rgba(17,19,21,.14);
  border-radius: 18px;
  padding: 10px 8px;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden; /* колонка узкая — не клипать/скроллить подписи по горизонтали, они переносятся */
  scrollbar-width: thin;
}
.ed-rail::-webkit-scrollbar { width: 7px; }
.ed-rail::-webkit-scrollbar-thumb { background: rgba(17,19,21,.2); border-radius: 6px; }
.ed-tools {
  flex: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  align-content: start;
}
/* Заголовок группы инструментов — чтобы панель читалась, а не сливалась. */
.ed-tool-label {
  grid-column: 1 / -1;
  font: 800 9.5px/1.2 Inter, sans-serif; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-400);
  padding: 8px 4px 2px;
  /* Узкая колонка (108px): длинные заголовки («AI-инструменты») переносим, а не обрезаем. */
  white-space: normal;
  overflow-wrap: anywhere;
}
.ed-tool-label:first-child { padding-top: 2px; }
.ed-tool {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1.5px solid rgba(17,19,21,.16);
  border-radius: 13px;
  padding: 11px 4px;
  cursor: pointer;
  font: 700 11px/1.1 Onest, sans-serif;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(17,19,21,.05);
  transition: border-color .15s, transform .12s, color .15s, box-shadow .15s, background .15s;
  /* Подпись под иконкой центрируем и переносим по слову вместо горизонтальной обрезки. */
  text-align: center;
  overflow-wrap: anywhere;
}
.ed-tool svg { width: 23px; height: 23px; color: var(--ink-700); transition: color .15s; }
.ed-tool:hover:not(:disabled) { border-color: var(--red-600); background: #fff; color: var(--red-700); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(236,35,24,.12); }
.ed-tool:hover:not(:disabled) svg { color: var(--red-600); }
.ed-tool:active:not(:disabled) { transform: translateY(0); }
.ed-tool:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }
.ed-tool-sep { grid-column: 1 / -1; height: 1px; background: rgba(17,19,21,.12); margin: 5px 6px 3px; }

/* ── Проекты: отдельная колонка слева от инструментов, крупные карточки ── */
.ed-projcol {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 18px; padding: 12px 10px; min-height: 0; overflow: hidden;
}
.ed-projcol-h {
  flex: none;
  font: 700 11px/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-400); padding: 0 2px;
}
.ed-projcol-list {
  flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin;
  display: flex; flex-direction: column; gap: 10px; padding-right: 2px;
}
.ed-projcol-list::-webkit-scrollbar { width: 7px; }
.ed-projcol-list::-webkit-scrollbar-thumb { background: rgba(17,19,21,.18); border-radius: 6px; }
.ed-projcol-foot { flex: none; display: flex; flex-direction: column; gap: 6px; }
.ed-projcol-foot .ed-pchip-add { width: 100%; padding: 9px 10px; }
.ed-projcol-mgr { width: 100%; }

/* Крупные карточки проектов: миниатюра сверху, имя снизу, удаление в углу. */
.ed-projcol-list .ed-pchip {
  position: relative; flex-direction: column; align-items: stretch; gap: 7px;
  padding: 7px; border-radius: 13px;
}
.ed-projcol-list .ed-pchip-thumb { width: 100%; height: 150px; border-radius: 9px; }
.ed-projcol-list .ed-pchip-name { flex: none; font-size: 12.5px; padding: 0 2px 2px; }
.ed-projcol-list .ed-pchip-rename { flex: none; font-size: 12.5px; }
.ed-projcol-list .ed-pchip-del {
  position: absolute; top: 11px; right: 11px; width: 26px; height: 26px; font-size: 12px;
  background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 2px 6px rgba(17,19,21,.12);
}

/* ── Центр: холст ── */
.ed-center { display: flex; flex-direction: column; min-width: 0; }
.ed-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.ed-presets { display: flex; gap: 4px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.ed-preset {
  border: none; background: transparent; cursor: pointer;
  font: 700 13px Inter, sans-serif; color: var(--ink-400);
  padding: 7px 12px; border-radius: 9px; transition: background .15s, color .15s;
}
.ed-preset:hover { color: var(--ink); }
.ed-preset.on { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(17,19,21,.1); }
/* Выпадающий выбор своего размера — кнопка-триггер стоит в ряду форматов. */
.ed-size-dd { position: relative; display: inline-flex; }
.ed-size-trigger.on { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(17,19,21,.1); }
.ed-size-pop {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 40;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(17,19,21,.18); padding: 14px; min-width: 210px;
  display: flex; flex-direction: column; gap: 12px;
}
.ed-size-pop[hidden] { display: none; }
.ed-size-pop-row { display: flex; gap: 10px; }
.ed-size-pop-row label { flex: 1; display: flex; flex-direction: column; gap: 5px; font: 600 11px Inter, sans-serif; color: var(--ink-400); text-transform: uppercase; letter-spacing: .04em; }
.ed-size-pop-row input { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 8px 9px; font: 600 14px Inter, sans-serif; color: var(--ink); background: #fff; -moz-appearance: textfield; }
.ed-size-pop-row input::-webkit-outer-spin-button, .ed-size-pop-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ed-size-pop .ed-mini { width: 100%; }
.ed-top-actions { display: flex; gap: 8px; }
.ed-mini { padding: 10px 16px !important; font-size: 13.5px !important; border-radius: 11px !important; }

/* Масштаб (зум) */
.ed-zoom { display: flex; align-items: center; gap: 6px; }
.ed-zoom .ed-icon-btn { font: 800 16px Inter, sans-serif; line-height: 1; min-width: 38px; justify-content: center; }
.ed-zoom-fit { min-width: 64px; text-align: center; }

.ed-stage-scroll {
  flex: 1; min-height: 0; min-width: 0;
  /* Центрируем канвас через margin:auto на самом .ed-stage (см. ниже), а НЕ через
     justify/align-items: при flex-центрировании канвас крупнее контейнера «вылезает»
     влево/вверх в недостижимую для скролла зону. margin:auto центрирует, когда канвас
     меньше окна, и не ломает скролл, когда больше. */
  display: flex;
  background:
    linear-gradient(45deg, #e9e2d6 25%, transparent 25%) 0 0/22px 22px,
    linear-gradient(-45deg, #e9e2d6 25%, transparent 25%) 0 0/22px 22px,
    var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: auto;
  /* Полосы прокрутки СКРЫТЫ (как в Canva): программный scrollLeft/Top при зуме
     работает, но визуальных полос нет. Бонус: clientWidth/Height стабильны при
     любом зуме (раньше от появления полос канвас «дёргался» у панелей — это и
     лечил scrollbar-gutter, теперь он не нужен). Навигация: колесо над холстом —
     зум, колесо над рабочим полем — перелистывание полотен (см. editor.js). */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* старый Edge/IE */
  padding: 18px;
}
.ed-stage-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* Режим панорамирования (Space+драг / средняя кнопка): курсор-«рука» поверх
   любых курсоров Konva на канвасе. */
.ed-stage-scroll.pan, .ed-stage-scroll.pan * { cursor: grab !important; }
.ed-stage-scroll.pan:active, .ed-stage-scroll.pan:active * { cursor: grabbing !important; }
.ed-stage-scroll.drop { outline: 2px dashed var(--red-600); outline-offset: -6px; }
/* Фон/тень листа рисует сам Konva (frameLayer): канвас теперь шире полотна на
   PAD-поля (якоря трансформера видны за краями), белый CSS-фон закрасил бы поля. */
.ed-stage { background: transparent; margin: auto; }
/* На тач-устройствах (в т.ч. Telegram Mini App) браузер по умолчанию забирает
   жесты на скролл/зум — из-за этого перетаскивание и тап-выбор слоёв не работают.
   Отключаем нативные жесты прямо на холсте, чтобы Konva получала pointer-события. */
.ed-stage, .ed-stage * { touch-action: none; }

/* ── Анимация перехода между холстами (перелистывание, как в Canva) ──
   next — новый холст «въезжает» снизу, prev — сверху. Класс вешает
   _animatePageSwitch() в editor.js и снимает через 350мс. */
@keyframes edPageInNext {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes edPageInPrev {
  from { opacity: 0; transform: translateY(-26px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ed-stage-anim-next { animation: edPageInNext .28s ease both; }
.ed-stage-anim-prev { animation: edPageInPrev .28s ease both; }

/* ── Выбор фигуры (popup из кнопки «Фигуры») ── */
.ed-shapes-pop {
  position: fixed; z-index: 70;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(17,19,21,.2); padding: 8px;
  display: flex; flex-direction: column; gap: 3px; min-width: 200px;
}
.ed-shapes-pop[hidden] { display: none; }
.ed-shape-opt {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  border: 1px solid transparent; background: #fff; cursor: pointer;
  border-radius: 10px; padding: 9px 11px; font: 600 13.5px Onest, sans-serif; color: var(--ink);
  transition: background .12s, border-color .12s, color .12s;
}
.ed-shape-opt svg { width: 20px; height: 20px; color: var(--ink-400); flex: none; transition: color .12s; }
.ed-shape-opt:hover { background: var(--paper-2); border-color: rgba(236,35,24,.35); }
.ed-shape-opt:hover svg { color: var(--red-600); }
.ed-tool.on { border-color: var(--red-600); color: var(--ink); box-shadow: 0 0 0 1px var(--red-600) inset; }
.ed-tool.on svg { color: var(--red-600); }

/* ── Пресеты текста / бейджи / макеты (popup'ы из рейла) ── */
.ed-txt-prev { color: var(--ink); line-height: 1.15; font-family: Onest, sans-serif; }
.ed-badge-chip {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; padding: 4px 9px; border-radius: 999px;
  font: 800 11px/1 Onest, sans-serif; letter-spacing: .02em; white-space: nowrap;
}
.ed-pop-hint {
  max-width: 230px; padding: 3px 11px 7px;
  font: 500 11.5px/1.45 Inter, sans-serif; color: var(--ink-400);
  border-bottom: 1px solid var(--line); margin-bottom: 4px;
}
/* Библиотека бейджей: сетка чипов в два столбца, чип = превью бейджа. */
.ed-badges-pop { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 6px; max-width: 356px; }
.ed-badges-pop .ed-pop-hint { grid-column: 1 / -1; max-width: none; }
.ed-badges-pop .ed-shape-opt { justify-content: center; padding: 8px 6px; }
/* Подпись-пояснение под названием пункта попапа (PNG/JPG). */
.ed-opt-sub { display: block; font: 500 11px/1.35 Inter, sans-serif; color: var(--ink-400); }
/* Мини-схема макета: рамка-«карточка» с плашками-заглушками (i-элементы). */
.ed-layout-prev {
  flex: none; position: relative; width: 34px; height: 44px;
  border: 1.5px solid var(--line); border-radius: 6px; background: #fff; overflow: hidden;
}
.ed-layout-prev i { position: absolute; display: block; background: #111315; border-radius: 2px; }
/* Библиотека макетов: сетка 2 колонки, превью крупнее, подпись снизу. */
.ed-layouts-pop { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 6px; max-width: 348px; }
.ed-layouts-pop .ed-pop-hint { grid-column: 1 / -1; max-width: none; }
.ed-layouts-pop .ed-shape-opt { flex-direction: column; gap: 7px; padding: 9px 6px; font-size: 12px; text-align: center; }
.ed-layouts-pop .ed-layout-prev { width: 52px; height: 66px; }
/* Точная геометрия объекта: пять компактных числовых полей X/Y/Ш/В/Угол. */
.ed-geo { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 12px; }
.ed-geo-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ed-geo-cell input {
  width: 100%; min-width: 0; padding: 6px 3px; border: 1px solid var(--line); border-radius: 8px;
  font: 600 12px Inter, sans-serif; color: var(--ink); text-align: center; background: #fff;
  appearance: textfield; -moz-appearance: textfield;
}
.ed-geo-cell input::-webkit-outer-spin-button, .ed-geo-cell input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ed-geo-cell input:focus { outline: none; border-color: var(--red-600); }
.ed-geo-cell em { font: 500 9.5px/1 Inter, sans-serif; font-style: normal; color: var(--ink-400); text-align: center; white-space: nowrap; overflow: hidden; }
/* Недоступная кнопка в сегментах панели (например «применить стиль» до копирования). */
.ed-seg button:disabled { opacity: .35; cursor: default; pointer-events: none; }

/* Кнопка «Сетка» в топбаре: активное состояние. */
#edGridBtn.on { border-color: var(--red-600) !important; color: var(--red-600) !important; box-shadow: 0 0 0 1px var(--red-600) inset; }

/* ── Свотчи готовых фонов холста (панель «Холст») ── */
.ed-swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.ed-swatch {
  width: 26px; height: 26px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(17,19,21,.18); padding: 0;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.ed-swatch:hover { transform: translateY(-1px); border-color: rgba(236,35,24,.5); }
.ed-swatch.on { border-color: var(--red-600); box-shadow: 0 0 0 2px rgba(236,35,24,.35); }

/* ── Правый рейл ── */
.ed-panel {
  display: flex; flex-direction: column; gap: 14px;
  min-height: 0; overflow: hidden;
}
.ed-panel-sec {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 18px; padding: 14px; display: flex; flex-direction: column; min-height: 0;
}
.ed-panel-h, .ed-props-h {
  font: 700 11.5px/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-400); margin-bottom: 12px;
}
.ed-layers { list-style: none; margin: 0; padding: 0; overflow-y: auto; max-height: 320px; display: flex; flex-direction: column; gap: 7px; }
.ed-layer {
  display: flex; align-items: center; justify-content: space-between; gap: 9px;
  background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 9px 10px;
  cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.ed-layer:hover { border-color: rgba(236,35,24,.35); }
.ed-layer.on { border-color: var(--red-600); box-shadow: 0 0 0 1px var(--red-600) inset; }
.ed-layer.dragging { opacity: .85; border-color: var(--red-600); box-shadow: 0 6px 16px rgba(0,0,0,.14); background: var(--paper-2); }
.ed-layer-grip {
  flex: none; cursor: grab; color: var(--ink-400); font-size: 16px; line-height: 1;
  letter-spacing: -2px; padding: 0 1px; touch-action: none; user-select: none;
}
.ed-layer-grip:active { cursor: grabbing; }
.ed-layer-grip:hover { color: var(--red-600); }
/* Иконка типа слоя — крупная, читаемая с первого взгляда:
   текст = буква «T», фото = миниатюра, фигура = ЗАЛИТАЯ форма в её цвете. */
.ed-layer-ic {
  flex: none; width: 44px; height: 44px; border-radius: 11px;
  background: var(--paper-2); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-700); overflow: hidden;
}
.ed-layer-ic svg { width: 24px; height: 24px; }
.ed-layer-ic.has-thumb { background-size: cover; background-position: center; background-repeat: no-repeat; border-color: rgba(17,19,21,.12); }
.ed-layer-ic-text { color: var(--red-600); background: #fff; font: 800 24px/1 "Playfair Display", Georgia, serif; }
/* Залитая фигура внутри плитки — сразу видно и тип, и цвет объекта. */
.ed-layer-shape { display: block; width: 26px; height: 26px; box-shadow: inset 0 0 0 1px rgba(17,19,21,.18); }
.ed-layer-shape-rect { border-radius: 6px; }
.ed-layer-shape-ellipse { border-radius: 50%; }
.ed-layer-name { flex: 1; min-width: 0; font: 600 14px/1.25 Onest, sans-serif; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Бейдж «группа» — метка связанных слоёв (Ctrl+G) */
.ed-layer-gmark {
  flex: none; font: 600 10px/1 Inter, sans-serif; color: var(--red-600);
  background: rgba(236, 35, 24, .12); border-radius: 6px; padding: 3px 5px;
  text-transform: lowercase; letter-spacing: .02em;
}
.ed-layer-ctr { display: flex; gap: 2px; flex: none; }
.ed-lbtn {
  width: 28px; height: 28px; border: none; background: transparent; cursor: pointer;
  border-radius: 8px; color: var(--ink-400); font-size: 13px; transition: background .12s, color .12s;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.ed-lbtn svg { width: 16px; height: 16px; display: block; }
.ed-lbtn:hover { background: var(--paper-2); color: var(--red-600); }
.ed-layer-empty { font: 500 12.5px Onest, sans-serif; color: var(--ink-400); padding: 10px 4px; }
.ed-layer.hidden .ed-layer-name { opacity: .45; text-decoration: line-through; }
.ed-layer.hidden .ed-layer-ic { opacity: .45; }
.ed-layer.locked .ed-layer-name { color: var(--ink-400); }

/* ── Свойства ── */
.ed-props { flex: 1; overflow-y: auto; }
.ed-props-empty { font: 500 13px Onest, sans-serif; color: var(--ink-400); text-align: center; padding: 24px 8px; }
.ed-multi-acts { gap: 8px; }
.ed-multi-acts .ed-mini { flex: 1; }
.ed-row { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; flex-wrap: wrap; }
.ed-row > label { flex: 0 0 100%; font: 600 11px Inter, sans-serif; color: var(--ink-400); text-transform: uppercase; letter-spacing: .05em; }
.ed-row textarea, .ed-row select, .ed-row input[type="text"] {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px;
  font: 500 13.5px Onest, sans-serif; color: var(--ink); background: #fff; resize: vertical;
}
.ed-row input[type="range"] { flex: 1; min-width: 80px; accent-color: var(--red-600); }
.ed-row input[type="color"] { width: 40px; height: 32px; border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer; padding: 2px; }
.ed-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--red-600); }
.ed-val { font: 700 12px Inter, sans-serif; color: var(--ink-700); min-width: 26px; text-align: right; }
.ed-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ed-seg button {
  border: none; background: #fff; cursor: pointer; padding: 8px 13px;
  font: 700 14px Onest, sans-serif; color: var(--ink-400); transition: background .12s, color .12s;
  border-right: 1px solid var(--line);
}
.ed-seg button:last-child { border-right: none; }
.ed-seg button.on { background: var(--red-600); color: #fff; }
.ed-img-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.ed-props-sub { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.ed-fx-reset { width: 100%; margin: 2px 0 12px; }
.ed-icon-btn { display: inline-flex; align-items: center; justify-content: center; padding: 7px 9px; }
.ed-icon-btn svg { width: 18px; height: 18px; }
.ed-icon-btn:disabled { opacity: .4; cursor: default; }

/* ── Оверлей-ластик ── */
.ed-erase {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(17,19,21,.55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.ed-erase[hidden] { display: none; }
.ed-erase-box {
  background: var(--paper); border-radius: 20px; box-shadow: 0 30px 70px rgba(0,0,0,.4);
  padding: 18px; max-width: 92vw; max-height: 92vh; display: flex; flex-direction: column; gap: 14px;
}
.ed-erase-head strong { display: block; font: 800 18px Onest, sans-serif; color: var(--ink); }
.ed-erase-head span { font: 500 13px Onest, sans-serif; color: var(--ink-400); }
.ed-erase-canvas-wrap { display: flex; justify-content: center; background: var(--paper-2); border: 1px solid var(--line); border-radius: 14px; padding: 10px; }
#edEraseCanvas { max-width: 100%; cursor: crosshair; border-radius: 6px; touch-action: none; }
.ed-erase-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ed-brush { display: flex; align-items: center; gap: 10px; font: 600 12px Inter, sans-serif; color: var(--ink-400); text-transform: uppercase; letter-spacing: .05em; }
.ed-brush input[type="range"] { width: 130px; accent-color: var(--red-600); }
.ed-erase-btns { display: flex; gap: 8px; }

/* ── AI-инструменты (AI-фон / AI-правка / AI-фото) ── */
.ed-tool-ai svg { color: var(--red-600); }
.ed-tool-ai:disabled svg { color: inherit; }
.ed-ai {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(17,19,21,.55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.ed-ai[hidden] { display: none; }
.ed-ai-box {
  background: var(--paper); border-radius: 20px; box-shadow: 0 30px 70px rgba(0,0,0,.4);
  padding: 18px; width: 540px; max-width: 92vw; display: flex; flex-direction: column; gap: 12px;
}
.ed-ai-head strong { display: block; font: 800 18px Onest, sans-serif; color: var(--ink); }
.ed-ai-head span { font: 500 13px Onest, sans-serif; color: var(--ink-400); }
.ed-ai-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.ed-ai-presets[hidden] { display: none; }
.ed-ai-chip {
  border: 1px solid var(--line); background: var(--paper-2); color: var(--ink-700);
  border-radius: 999px; padding: 6px 12px; font: 600 12.5px Onest, sans-serif; cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.ed-ai-chip:hover { border-color: var(--red-600); color: var(--red-600); }
.ed-ai-chip.on { background: var(--red-600); border-color: var(--red-600); color: #fff; }
#edAiPrompt {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 74px;
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;
  font: 500 14px Onest, sans-serif; color: var(--ink); background: var(--paper-2);
}
#edAiPrompt:focus { outline: none; border-color: var(--red-600); }
.ed-ai-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ed-ai-cost { font: 700 12px Inter, sans-serif; color: var(--ink-400); text-transform: uppercase; letter-spacing: .05em; }
.ed-ai-btns { display: flex; gap: 8px; }

/* ── Выравнивание по холсту / порядок / отражение ── */
.ed-align { flex-wrap: wrap; }
.ed-align button { padding: 7px 8px; line-height: 0; display: inline-flex; align-items: center; justify-content: center; }
.ed-align button svg { width: 18px; height: 18px; display: block; color: var(--ink-700); }
.ed-align button:hover svg { color: var(--red-600); }
.ed-arrange { margin-top: 0; }

/* ── Дропдаун проектов (кнопка «Проекты ▾» в топбаре) ── */
.ed-proj-dd { position: relative; display: inline-flex; }
.ed-proj-drop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 45;
  width: min(320px, 86vw); background: #fff; border: 1px solid var(--line);
  border-radius: 16px; box-shadow: 0 18px 44px rgba(17,19,21,.18);
  padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
.ed-proj-drop[hidden] { display: none; }
.ed-proj-drop-h {
  font: 700 10.5px Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-400); padding: 0 2px;
}
.ed-proj-drop-list { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; }
.ed-proj-drop-foot { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.ed-proj-drop-foot .ed-pchip-add { flex: 1; }
.ed-pchip-empty { font: 500 13px Onest, sans-serif; color: var(--ink-400); padding: 8px 4px; }
.ed-pchip {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 6px 9px 6px 6px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.ed-pchip:hover { border-color: rgba(236,35,24,.4); }
.ed-pchip.on { border-color: var(--red-600); box-shadow: 0 0 0 1px var(--red-600) inset; }
.ed-pchip-thumb {
  flex: none; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line);
  background: #fff center/cover no-repeat;
  background-image:
    linear-gradient(45deg, #e9e2d6 25%, transparent 25%),
    linear-gradient(-45deg, #e9e2d6 25%, transparent 25%);
  background-size: 12px 12px;
}
.ed-pchip-name {
  flex: 1; min-width: 0; font: 600 13px Onest, sans-serif; color: var(--ink); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.ed-pchip-rename {
  flex: 1; min-width: 0; font: 600 13px Onest, sans-serif; color: var(--ink); border: 1px solid var(--red-600);
  border-radius: 7px; padding: 3px 6px; outline: none; background: #fff;
}
.ed-pchip-del {
  flex: none; border: none; background: transparent; cursor: pointer; color: var(--ink-400);
  width: 22px; height: 22px; border-radius: 7px; font-size: 11px; transition: background .12s, color .12s;
}
.ed-pchip-del:hover { background: var(--paper-2); color: var(--red-600); }
/* Кнопка копирования проекта — на каждом чипе. */
.ed-pchip-copy {
  flex: none; border: none; background: transparent; cursor: pointer; color: var(--ink-400);
  width: 22px; height: 22px; border-radius: 7px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.ed-pchip-copy svg { width: 15px; height: 15px; }
.ed-pchip-copy:hover { background: var(--paper-2); color: var(--red-600); }
/* В крупных карточках левой колонки — кнопка-копия в правом верхнем углу миниатюры. */
.ed-projcol-list .ed-pchip { }
.ed-projcol-list .ed-pchip-copy {
  position: absolute; top: 11px; right: 11px; z-index: 3;
  width: 26px; height: 26px; border-radius: 8px;
  background: rgba(255,255,255,.92); color: var(--ink-700); box-shadow: 0 2px 8px rgba(17,19,21,.18);
}
.ed-projcol-list .ed-pchip-copy:hover { background: #fff; color: var(--red-600); }
.ed-pchip-add {
  flex: none; cursor: pointer; border: 1px dashed var(--ink-400); background: transparent;
  color: var(--ink-700); border-radius: 11px; padding: 8px 14px;
  font: 700 12.5px Onest, sans-serif; transition: border-color .15s, color .15s, background .15s;
}
.ed-pchip-add:hover { border-color: var(--red-600); color: var(--red-600); border-style: solid; background: #fff; }

/* ── Полотна проекта (полоса снизу, как страницы в Canva) ── */
.ed-pagesbar {
  display: flex; align-items: center; gap: 10px; margin-top: 12px;
  padding: 10px 12px; background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 14px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
}
.ed-pagesbar::-webkit-scrollbar { height: 7px; }
.ed-pagesbar::-webkit-scrollbar-thumb { background: rgba(17,19,21,.18); border-radius: 6px; }
.ed-page {
  position: relative; flex: none; cursor: pointer;
  width: 66px; height: 88px; border-radius: 10px; border: 1px solid var(--line);
  background: #fff center/cover no-repeat;
  background-image:
    linear-gradient(45deg, #e9e2d6 25%, transparent 25%),
    linear-gradient(-45deg, #e9e2d6 25%, transparent 25%);
  background-size: 12px 12px;
  transition: border-color .15s, box-shadow .15s;
}
.ed-page:hover { border-color: rgba(236,35,24,.4); }
.ed-page.on { border-color: var(--red-600); box-shadow: 0 0 0 2px var(--red-600) inset; }
.ed-page.locked { border-color: var(--ink-400); }
.ed-page.locked.on { border-color: var(--red-600); }

/* Панель действий над миниатюрой холста (копировать · замок · удалить). */
.ed-page-acts {
  position: absolute; top: 3px; left: 3px; right: 3px; z-index: 3;
  display: flex; gap: 3px; justify-content: center;
  opacity: 0; transform: translateY(-2px); pointer-events: none;
  transition: opacity .12s, transform .12s;
}
.ed-page:hover .ed-page-acts, .ed-page.on .ed-page-acts { opacity: 1; transform: none; pointer-events: auto; }
.ed-page-act {
  border: none; cursor: pointer; width: 18px; height: 18px; border-radius: 6px;
  background: rgba(17,19,21,.72); color: #fff; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.ed-page-act svg { width: 13px; height: 13px; }
.ed-page-act:hover { background: var(--ink); }
.ed-page-act.on { background: var(--red-600); }
.ed-page-act-del:hover { background: var(--red-600); }
/* Постоянный значок «замок» на заблокированном холсте (виден без наведения). */
.ed-page-lockbadge {
  position: absolute; top: 4px; right: 4px; z-index: 2;
  width: 16px; height: 16px; color: var(--red-600);
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.ed-page:hover .ed-page-lockbadge, .ed-page.on .ed-page-lockbadge { display: none; }
.ed-page-lockbadge svg { width: 16px; height: 16px; }
.ed-page-thumb {
  position: absolute; inset: 0; border-radius: 9px;
  background: center/cover no-repeat; /* фон-картинка задаётся инлайном из JS */
}
.ed-page-num {
  position: absolute; left: 4px; bottom: 4px; z-index: 2;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 6px;
  background: rgba(17,19,21,.72); color: #fff; font: 700 11px Inter, sans-serif;
  display: flex; align-items: center; justify-content: center;
}
.ed-page-del {
  position: absolute; top: 3px; right: 3px; z-index: 2; border: none; cursor: pointer;
  width: 18px; height: 18px; border-radius: 6px; background: rgba(17,19,21,.6); color: #fff;
  font-size: 10px; line-height: 1; opacity: 0; transition: opacity .12s, background .12s;
}
.ed-page:hover .ed-page-del { opacity: 1; }
.ed-page-del:hover { background: var(--red-600); }
.ed-page-add {
  flex: none; cursor: pointer; width: 66px; height: 88px; border-radius: 10px;
  border: 1px dashed var(--ink-400); background: transparent; color: var(--ink-700);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  transition: border-color .15s, color .15s, background .15s;
}
.ed-page-add:hover { border-color: var(--red-600); color: var(--red-600); border-style: solid; background: #fff; }
.ed-page-add-plus { font: 800 22px Inter, sans-serif; line-height: 1; }
.ed-page-add-tx { font: 700 10px Onest, sans-serif; }

/* ── Оверлей: проекты ── */
.ed-projects {
  position: fixed; inset: 0; z-index: 92;
  background: rgba(17,19,21,.55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.ed-projects[hidden] { display: none; }
.ed-projects-box {
  background: var(--paper); border-radius: 20px; box-shadow: 0 30px 70px rgba(0,0,0,.4);
  padding: 18px; width: min(760px, 94vw); max-height: 88vh; display: flex; flex-direction: column; gap: 14px;
}
.ed-projects-head { display: flex; align-items: center; justify-content: space-between; }
.ed-projects-head strong { font: 800 19px Onest, sans-serif; color: var(--ink); }
.ed-projects-close {
  border: none; background: transparent; cursor: pointer; font-size: 18px; color: var(--ink-400);
  width: 34px; height: 34px; border-radius: 9px; transition: background .12s, color .12s;
}
.ed-projects-close:hover { background: var(--paper-2); color: var(--red-600); }
.ed-projects-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px;
  overflow-y: auto; padding: 2px; min-height: 120px;
}
.ed-proj-empty { grid-column: 1 / -1; text-align: center; color: var(--ink-400); font: 500 14px Onest, sans-serif; padding: 36px 0; }
.ed-proj-card {
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff;
  display: flex; flex-direction: column; transition: border-color .15s, box-shadow .15s;
}
.ed-proj-card.on { border-color: var(--red-600); box-shadow: 0 0 0 1px var(--red-600) inset; }
.ed-proj-thumb {
  height: 150px; background: var(--paper-2) center/contain no-repeat; cursor: pointer;
  border-bottom: 1px solid var(--line);
  background-image:
    linear-gradient(45deg, #e9e2d6 25%, transparent 25%),
    linear-gradient(-45deg, #e9e2d6 25%, transparent 25%);
  background-size: 16px 16px;
}
.ed-proj-meta { display: flex; align-items: center; gap: 6px; padding: 8px; }
.ed-proj-name {
  flex: 1; min-width: 0; border: 1px solid transparent; border-radius: 8px; padding: 6px 8px;
  font: 600 13px Onest, sans-serif; color: var(--ink); background: transparent;
}
.ed-proj-name:hover, .ed-proj-name:focus { border-color: var(--line); background: #fff; outline: none; }
.ed-proj-del {
  flex: none; border: none; background: transparent; cursor: pointer; color: var(--ink-400);
  width: 28px; height: 28px; border-radius: 8px; font-size: 12px; transition: background .12s, color .12s;
}
.ed-proj-del:hover { background: var(--paper-2); color: var(--red-600); }
.ed-proj-copy {
  flex: none; border: none; background: transparent; cursor: pointer; color: var(--ink-400);
  width: 28px; height: 28px; border-radius: 8px; padding: 0;
  display: flex; align-items: center; justify-content: center; transition: background .12s, color .12s;
}
.ed-proj-copy svg { width: 16px; height: 16px; }
.ed-proj-copy:hover { background: var(--paper-2); color: var(--red-600); }
.ed-projects-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ed-projects-hint { font: 500 12px Onest, sans-serif; color: var(--ink-400); }

/* ── Галерея «Мои фото» ── */
.ed-gallery-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px;
  overflow-y: auto; padding: 2px; min-height: 140px;
}
.ed-gal-card {
  position: relative; border: 1px solid var(--line); border-radius: 13px; overflow: hidden;
  background:
    linear-gradient(45deg, #e9e2d6 25%, transparent 25%) 0 0/16px 16px,
    linear-gradient(-45deg, #e9e2d6 25%, transparent 25%) 0 0/16px 16px,
    var(--paper-2);
  cursor: pointer; aspect-ratio: 1 / 1; transition: border-color .15s, box-shadow .15s, transform .12s;
}
.ed-gal-card:hover { border-color: var(--red-600); box-shadow: 0 8px 22px rgba(209,26,16,.16); transform: translateY(-2px); }
.ed-gal-card img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ed-gal-card::after {
  content: "+ на холст"; position: absolute; left: 0; right: 0; bottom: 0;
  font: 700 11px Onest, sans-serif; color: #fff; text-align: center; padding: 6px 0;
  background: linear-gradient(180deg, transparent, rgba(17,19,21,.72));
  opacity: 0; transition: opacity .15s;
}
.ed-gal-card:hover::after { opacity: 1; }
.ed-gal-empty { grid-column: 1 / -1; text-align: center; color: var(--ink-400); font: 500 14px Onest, sans-serif; padding: 40px 0; }

/* ── Библиотека «Элементы» (стикеры) ── */
.ed-elements-box { width: min(880px, 96vw); }
.ed-elem-grid { overflow-y: auto; padding: 2px 2px 4px; min-height: 200px; }
.ed-elem-cat {
  font: 800 12px/1 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-700); padding: 14px 2px 8px; position: sticky; top: 0;
  background: var(--paper); z-index: 1;
}
.ed-elem-cat:first-child { padding-top: 2px; }
.ed-elem-row {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px;
}
.ed-elem-card {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  border: 1px solid var(--line); border-radius: 13px; padding: 12px 8px 9px; cursor: pointer;
  background: #fff; transition: border-color .15s, box-shadow .15s, transform .12s;
}
.ed-elem-card:hover { border-color: var(--red-600); box-shadow: 0 8px 20px rgba(209,26,16,.14); transform: translateY(-2px); }
.ed-elem-art {
  width: 100%; height: 62px; display: flex; align-items: center; justify-content: center;
}
.ed-elem-art svg { max-width: 100%; max-height: 62px; width: auto; height: auto; display: block; }
.ed-elem-name {
  font: 600 12px Onest, sans-serif; color: var(--ink-700); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* Заблокированный холст: курсор-запрет поверх сцены (события всё равно гасит JS). */
.ed-stage-locked { cursor: not-allowed; }

/* ── Тост + лоадер ── */
.ed-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 95; background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 13px;
  font: 600 14px Onest, sans-serif; box-shadow: 0 14px 36px rgba(17,19,21,.3);
}
.ed-toast[hidden] { display: none; }
.ed-toast.ok { background: var(--ok); }
.ed-toast.err { background: var(--red-600); }
.ed-busy {
  position: fixed; inset: 0; z-index: 96; background: rgba(241,236,228,.7); backdrop-filter: blur(2px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  font: 700 15px Onest, sans-serif; color: var(--ink);
}
.ed-busy[hidden] { display: none; }
.ed-busy-spin {
  width: 42px; height: 42px; border: 4px solid rgba(209,26,16,.2); border-top-color: var(--red-600);
  border-radius: 50%; animation: edspin .8s linear infinite;
}
@keyframes edspin { to { transform: rotate(360deg); } }

/* Редактор — полноэкранный инструмент: маркетинговый футер тут лишний и
   исторически «наезжал» на холст (особенно при зуме колесом). editor.css
   грузится ТОЛЬКО на странице редактора, поэтому прячем футер локально. */
.site-foot { display: none !important; }

/* Полноэкранный редактор: топбар тоже во всю ширину (иначе логотип/кредиты
   центрируются по 1180px, а рабочая область — во весь экран → визуальный разрыв).
   Как в Canva: логотип у левого края, кредиты/аккаунт — у правого. Тень шапки
   убираем, чтобы холст «сливался» с рабочим пространством. */
body { overflow: hidden; }
.top { box-shadow: none; border-bottom: 1px solid var(--line); }
.top-in { max-width: none; padding: 0 18px; }

/* ── Адаптив ── */
@media (max-width: 980px) {
  /* На узких экранах сетка стекается в одну колонку с НЕСКОЛЬКИМИ строками и height:auto —
     базовый grid-template-rows:minmax(0,1fr) схлопнул бы первую строку в 0. Сбрасываем. */
  .ed { grid-template-columns: 1fr; grid-template-rows: none; height: auto; }
  /* На узких экранах сетка стекается в колонку и высота холста больше не
     ограничена вьюпортом → зум колесом раздувал .ed-stage и «вылезал» вниз.
     Даём области холста собственную ограниченную высоту с внутренним скроллом. */
  .ed-center { height: auto; }
  .ed-stage-scroll { flex: none; height: 64vh; min-height: 360px; }
  /* Всё стекается в колонку: инструменты строкой, проекты — горизонтальной лентой */
  .ed-rail { overflow: visible; }
  .ed-tools { grid-template-columns: repeat(7, 1fr); }
  .ed-projcol { overflow: visible; }
  .ed-projcol-list {
    flex-direction: row; overflow-x: auto; overflow-y: hidden; max-height: none;
    padding-bottom: 4px;
  }
  .ed-projcol-list .ed-pchip { flex: none; width: 150px; }
  .ed-projcol-foot { flex-direction: row; }
  .ed-projcol-foot .ed-pchip-add, .ed-projcol-mgr { width: auto; }
  .ed-panel { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .ed-panel-sec { flex: 1; min-width: 240px; }
}
@media (max-width: 640px) {
  .ed-tools { grid-template-columns: repeat(4, 1fr); }
}

/* ── Модалка «войдите бесплатно» (гейт серверных фич для анонима) ─────────── */
.ed-auth {
  position: fixed; inset: 0; z-index: 98;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(17, 19, 21, .55);
  backdrop-filter: blur(3px);
}
.ed-auth[hidden] { display: none; }
.ed-auth-box {
  position: relative; width: 100%; max-width: 380px;
  background: #fff; border: 1px solid var(--line, rgba(17,19,21,.10));
  border-radius: 18px; padding: 26px 24px 22px;
  box-shadow: 0 24px 60px rgba(17, 19, 21, .28);
  text-align: center;
}
.ed-auth-x {
  position: absolute; top: 12px; right: 14px;
  width: 30px; height: 30px; border: none; background: transparent;
  font-size: 24px; line-height: 1; color: var(--ink-400, #6B6B66);
  cursor: pointer; border-radius: 8px;
}
.ed-auth-x:hover { background: rgba(17, 19, 21, .06); color: var(--ink, #111315); }
.ed-auth-ic {
  width: 56px; height: 56px; margin: 2px auto 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; border-radius: 50%;
  background: linear-gradient(135deg, #EC2318, #A8120B);
  box-shadow: 0 8px 20px rgba(236, 35, 24, .34);
}
.ed-auth-title {
  font-size: 20px; font-weight: 700; letter-spacing: -.01em;
  color: var(--ink, #111315); margin-bottom: 8px;
}
.ed-auth-text {
  font-size: 14px; line-height: 1.5; color: var(--ink-700, #3A3A38);
  margin-bottom: 16px;
}
.ed-auth-list {
  list-style: none; margin: 0 0 18px; padding: 0; text-align: left;
  display: inline-block;
}
.ed-auth-list li {
  position: relative; padding-left: 24px; margin: 7px 0;
  font-size: 13.5px; color: var(--ink-700, #3A3A38);
}
.ed-auth-list li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: #EC2318; font-weight: 700;
}
.ed-auth-go {
  display: block; width: 100%; padding: 13px 18px;
  background: linear-gradient(135deg, #EC2318, #D11A10); color: #fff;
  font-size: 15px; font-weight: 700; text-decoration: none;
  border-radius: 12px; text-align: center;
  box-shadow: 0 10px 24px rgba(236, 35, 24, .30);
}
.ed-auth-go:hover { background: linear-gradient(135deg, #D11A10, #A8120B); }
.ed-auth-later {
  margin-top: 10px; border: none; background: transparent;
  font-size: 13.5px; color: var(--ink-400, #6B6B66); cursor: pointer;
}
.ed-auth-later:hover { color: var(--ink, #111315); text-decoration: underline; }