:root {
  --bg: #0f1115;
  --panel: #161920;
  --panel-2: #1c2029;
  --border: #272b36;
  --border-soft: #21242d;
  --text: #e7e9ee;
  /* --muted был #8a90a0 — контраст 4:1 на --panel-2. Поднят до ≈5:1 (WCAG AA).
     Все тонкие подписи, хинты и мета-текст светлее — читаются на тёмном фоне. */
  --muted: #a3a9ba;
  --accent: #4f8cff;
  --accent-2: #6ea3ff;
  --accent-soft: rgba(79, 140, 255, 0.14);
  --danger: #ef4b6b;
  --ok: #33c07a;
  --warn: #f6b73c;
  --radius: 10px;
  --radius-sm: 6px;
  --inspector-control-font-size: 14px;
  --inspector-control-font-weight: 400;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --canvas-bg: #0a0c11;
  --canvas-grid: rgba(255, 255, 255, 0.04);
  --canvas-grid-strong: rgba(255, 255, 255, 0.08);
  --hint-bg: rgba(22, 25, 32, 0.95);
  --hint-text: var(--text);
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Светлая тема — переопределение CSS-переменных. data-theme выставляет
   модульный редактор при инициализации (loadInitialTheme) и при клике на тогглере
   в Scene settings. Цвета выбраны так, чтобы UI оставался узнаваемым,
   контраст текста ≥ 4.5:1, а canvas стал белым — это и есть «как на
   распечатке». Konva-цвета объектов меняются параллельно через
   THEMES.light в static/js/editor/core.js. */
:root[data-theme="light"] {
  --bg: #f4f5f8;
  --panel: #ffffff;
  --panel-2: #f0f2f6;
  --border: #d8dce5;
  --border-soft: #e6e8ee;
  --text: #0f172a;
  --muted: #5b6275;
  --accent: #2563eb;
  --accent-2: #1d4ed8;
  --accent-soft: rgba(37, 99, 235, 0.10);
  --danger: #dc2626;
  --ok: #16a34a;
  --warn: #d97706;
  --shadow: 0 8px 20px rgba(15, 23, 42, 0.10);
  --canvas-bg: #ffffff;
  --canvas-grid: rgba(0, 0, 0, 0.04);
  --canvas-grid-strong: rgba(0, 0, 0, 0.08);
  --hint-bg: rgba(255, 255, 255, 0.97);
  --hint-text: #0f172a;
}

:root[data-theme="paper"] {
  --bg: #f7f7f7;
  --panel: #ffffff;
  --panel-2: #f1f1f1;
  --border: #d7d7d7;
  --border-soft: #e7e7e7;
  --text: #111111;
  --muted: #5f5f5f;
  --accent: #111111;
  --accent-2: #000000;
  --accent-soft: rgba(0, 0, 0, 0.08);
  --danger: #b91c1c;
  --ok: #166534;
  --warn: #92400e;
  --shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  --canvas-bg: #ffffff;
  --canvas-grid: rgba(0, 0, 0, 0.025);
  --canvas-grid-strong: rgba(0, 0, 0, 0.055);
  --hint-bg: rgba(255, 255, 255, 0.98);
  --hint-text: #111111;
}

/* Light-тема — точечные оверрайды для тех правил, где базовый dark-CSS
   шил hover/scrollbar/hover-rim в hex-литералах. Без этих оверрайдов на
   светлом фоне получаем тёмные вспышки при hover (выглядит как баг). */
:root[data-theme="light"] .btn:hover,
:root[data-theme="paper"] .btn:hover { background: #eef0f4; border-color: #c8cdd9; }
:root[data-theme="light"] .btn.primary:hover,
:root[data-theme="paper"] .btn.primary:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: #fff;
}
:root[data-theme="light"] .round:hover,
:root[data-theme="paper"] .round:hover { border-color: #c8cdd9; }
:root[data-theme="light"] .btn-more:active,
:root[data-theme="paper"] .btn-more:active { background: #eef0f4; }
:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover,
:root[data-theme="paper"] ::-webkit-scrollbar-thumb:hover { background: #b8bdc9; }
:root[data-theme="light"] .versions-row.active,
:root[data-theme="paper"] .versions-row.active,
:root[data-theme="paper"] .empty .empty-icon,
:root[data-theme="light"] .empty .empty-icon { color: var(--muted); }
:root[data-theme="light"] .muted-strong,
:root[data-theme="paper"] .muted-strong { color: #5b6275; }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  display: grid;
  grid-template-rows: auto 1fr;
  /* minmax(0, 1fr) — без 0 grid-колонка разрастается до min-content,
     и topbar начинает выступать за вьюпорт вместо того чтобы скроллиться внутри. */
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  user-select: none;
}

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  /* Высота topbar === ширина sidebar (56px). Визуально угол "┐" ровный,
     кнопки в обеих панелях одного touch-масштаба (40-44px). */
  height: 56px;
  padding: 0 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  gap: 12px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
}
.topbar .btn { min-height: 40px; }
.topbar .btn.icon-only { min-width: 40px; }
.topbar::-webkit-scrollbar { height: 4px; }
.topbar::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: 2px;
}
.topbar > * { flex-shrink: 0; }
.topbar > .topbar-actions {
  display: flex; gap: 8px; align-items: center;
  margin-inline-start: auto;  /* actions жмутся к правому краю когда места хватает */
}
.topbar > .topbar-actions > * { flex-shrink: 0; white-space: nowrap; }
.brand { display: flex; align-items: center; gap: 10px; }
.logo {
  width: 40px; height: 40px;
  border-radius: 8px;
  display: grid; place-items: center;
  overflow: hidden;
}
.logo > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.brand-title {
  font-weight: 700; font-size: 14px; letter-spacing: -0.01em;
  max-width: 220px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-title[contenteditable="plaintext-only"]:focus {
  white-space: normal; overflow: visible; text-overflow: unset;
}
.brand-sub { color: var(--muted); font-size: 11px; }
.mobile-save-status { display: none; }
.topbar-actions { display: flex; gap: 8px; align-items: center; }
.divider { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }

/* ---------- Buttons ---------- */
.btn {
  /* Размеры подобраны по HIG/Material: высота ~40px = комфортный тач-target,
     не громоздкий на десктопе. Используется как primary/danger/ghost/icon-only —
     все варианты наследуют размеры. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  position: relative;
  text-decoration: none;
}
a.btn:hover { text-decoration: none; }
.btn:hover { background: #232733; border-color: #343949; }
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: var(--panel-2); }
.btn.ghost.active {
  background: var(--panel-2);
  color: var(--text);
}
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn.primary:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: #fff;
}
.btn.primary:focus-visible {
  outline-color: var(--accent-2);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.btn.danger { color: var(--danger); border-color: rgba(239, 75, 107, 0.25); }
.btn.danger:hover { background: rgba(239, 75, 107, 0.1); }
.btn.icon-only {
  padding: 0;
  justify-content: center;  /* выравнивание svg-иконки по центру кнопки */
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:disabled:hover { background: transparent; border-color: var(--border); }

/* ---------- Workspace ----------
   На desktop и sidebar, и inspector плавают поверх canvas через position: absolute —
   canvas-wrap занимает всю площадь, не ограничиваясь их высотой. На mobile sidebar
   становится обычной grid-колонкой (media-query ниже). */
.workspace {
  display: block;
  min-height: 0;
  height: 100%;
  position: relative;
}

/* Для editor'а делаем body/swup полноэкранным контейнером: body — flex column,
   swup внутри — grid с auto topbar + 1fr workspace. Остальные страницы (landing,
   pricing и т.д.) оверрайдят body display, так что их layout не задет. */
body.page-editor {
  display: flex;
  flex-direction: column;
}
body.page-editor .swup-container {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr;
}

/* Topbar — абсолютный overlay поверх workspace на всех viewports. Swup
   становится block-контейнером (не grid, иначе workspace auto-упадёт в первый,
   теперь пустой auto-row), canvas занимает всю высоту swup'а. Brand и actions
   — две плавающие карточки (слева и справа сверху).
   На mobile внутри brand остаётся только логотип (title/sub скрыты в media-
   query ниже), в actions Versions/Share/Import сворачиваются в "⋮" More. */
body.page-editor .swup-container {
  display: block;
  position: relative;  /* якорь для абсолютного topbar */
}
.topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: auto;
  min-height: 0;
  padding: 12px;
  background: transparent;
  border-bottom: none;
  overflow: visible;
  gap: 8px;
  align-items: flex-start;
  z-index: 10;
  /* Пустое пространство между элементами пропускает клики на canvas */
  pointer-events: none;
}
/* Brand (лого+название+сохранение) теперь скрыт — лого перенесён в sidebar,
   название проекта не отображается. Brand оставлен в DOM (display: none), чтобы
   editor-cloud.js продолжал писать в #save-status / #project-title без ошибок. */
.topbar > .brand { display: none; }
.topbar > .topbar-actions {
  pointer-events: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 4px 8px;
}

/* Inspector на desktop сдвигаем вниз, чтобы не пересекаться с actions-
   карточкой (actions ≈ 48-52px + 12px top padding + 8px gap ≈ 72px). Префиксим
   body.page-editor — иначе базовое .inspector {top:12px} ниже в файле
   перекрывает. Оборачиваем в min-width-медиа: иначе селектор с двумя классами
   (специфичность 0,2,0) перебивает mobile-правила (0,1,0) и оставляет щель
   снизу bottom-sheet'а. */
@media (min-width: 721px) {
  body.page-editor .inspector { top: 72px; max-height: calc(100% - 84px); }
}

/* ---------- Sidebar ----------
   Desktop: плавает в левом верхнем углу workspace (по той же схеме, что inspector).
   Авто-высота от контента, max-height упирается в viewport — при коротком экране
   включается внутренний scroll. Mobile override — в media-query ниже. */
.sidebar {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 44px;
  max-height: calc(100% - 24px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: visible;
  z-index: 5;
}
/* Аватар аккаунта в editor-топбаре. Маленький круг (32px) — как
   .site-account-avatar на лендинге, но без выпадающего меню: клик
   ведёт сразу на /accounts/settings (или login для гостей). */
.editor-account {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
}
.editor-account-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent); color: white;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px;
  transition: filter .15s ease;
}
.editor-account:hover .editor-account-avatar { filter: brightness(1.1); }
.editor-account-avatar--guest { background: var(--panel-2, var(--panel)); color: var(--text); border: 1px solid var(--border); }
/* На mobile аватар не помещается в action-карточку (там и так undo/redo/save/
   versions/share/import/btn-more конкурируют за ширину). Прячем — попасть в
   аккаунт можно через More-меню (пункт "Account"). */
@media (max-width: 720px) {
  .editor-account { display: none; }
}

/* ---------- More-menu (внутри инспектора) ----------
   Конвенциональное меню редактора: вертикальный список действий с группами
   и инлайн-разворачивающимися подменю (Import / Export). Стилизация — как
   в Figma/Notion: спокойные ghost-кнопки, маленькие иконки слева, chevron
   справа у пунктов с подменю. */
.menu-section { margin-bottom: 16px; display: flex; flex-direction: column; gap: 2px; }
.menu-section:last-child { margin-bottom: 0; padding-bottom: 18px; }
.menu-section + .menu-section { border-top: 1px solid var(--border-soft, var(--border)); padding-top: 14px; }
.menu-section-title {
  font-size: 11px; text-transform: uppercase;
  color: var(--muted); letter-spacing: 0.08em;
  padding: 4px 8px 8px; font-weight: 700;
  line-height: 1;
}
/* Высота строки меню — минимум 44px (Apple HIG / Material) для удобного
   тапа на мобиле. На десктопе тоже комфортно — между строками появляется
   воздух, нет ощущения «телефонного списка с микро-промахами». */
.menu-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 42px; padding: 9px 12px;
  background: transparent; border: none; color: inherit;
  text-decoration: none; cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: 13px; text-align: left;
  transition: background .15s;
  font-family: inherit;
}
.menu-item:hover { background: var(--btn-ghost-hover, rgba(127,127,127,0.08)); }
.menu-item:disabled { opacity: 0.4; cursor: not-allowed; }
.menu-item:disabled:hover { background: transparent; }
.menu-item > svg { flex-shrink: 0; opacity: 0.85; }
.menu-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-item-sub { font-size: 11px; color: var(--muted); margin-left: auto; padding-left: 8px; }
.menu-chevron {
  flex-shrink: 0; opacity: 0.5;
  transition: transform .2s ease;
}
.menu-item--expand[aria-expanded="true"] .menu-chevron { transform: rotate(180deg); }
.menu-sub {
  padding: 4px 0 8px 8px;
  margin-left: 24px;
  border-left: 1px solid var(--border-soft, var(--border));
  display: flex; flex-direction: column; gap: 2px;
}
/* `display: flex` выше перебивает дефолтный `[hidden]{display:none}` (одинаковая
   специфичность, побеждает позднее правило). Без явного override [hidden]
   на .menu-sub не работает — оба подменю показываются одновременно. */
.menu-sub[hidden] { display: none; }
.menu-sub .menu-item { min-height: 38px; padding: 8px 12px; font-size: 13px; }
.menu-sub-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
}
/* На мобиле увеличиваем все tap-target ещё немного — пальцы крупнее
   курсора, и инспектор-bottom-sheet занимает узкую полосу высоты, поэтому
   разница ощущается особенно. */
@media (max-width: 720px) {
  .menu-item { min-height: 48px; padding: 12px 14px; gap: 14px; font-size: 15px; }
  .menu-sub .menu-item { min-height: 44px; padding: 10px 14px; font-size: 14px; }
  .menu-section { gap: 4px; }
  .menu-sub { gap: 4px; }
}
.menu-sub-row input[type="text"] {
  flex: 1; min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); color: inherit; font-size: 12px;
}
.menu-sub-status { font-size: 11px; color: var(--muted); padding: 2px 10px; min-height: 1em; }

.tool-group { display: flex; flex-direction: column; gap: 4px; }
/* Group-заголовки (TOOLS/OBJECTS/...) скрыты: узкий sidebar не помещает их,
   а иконки + лейблы самих кнопок уже дают достаточно контекста. */
.tool-title { display: none; }
.tool {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 34px;
  height: 34px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  overflow: visible;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.tool:hover { background: var(--panel-2); border-color: transparent; }
.tool.active {
  background: var(--panel-2);
  border-color: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
}
.tool svg { flex-shrink: 0; }
.tool-tooltip {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(-2px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 7px 10px;
  border-radius: 7px;
  background: rgba(17, 24, 39, 0.96);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.20);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease, transform 0.1s ease;
  z-index: 20;
}
.tool-tooltip kbd {
  min-width: 16px;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.78);
  font: inherit;
  font-size: 10px;
  line-height: 1;
  text-align: center;
}
.tool:hover .tool-tooltip,
.tool:focus-visible .tool-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* «Создать» — кнопка ведёт себя как остальные .tool: нейтральная в покое,
   подсветка только в .active (когда инспектор открыт в режиме каталога —
   класс синхронизируется в inspector.js при каждом renderInspector). Без
   этого пользователь читает постоянный акцентный фон как «инструмент
   активен», даже когда каталог закрыт. */

/* ---------- Catalog (inspector mode='create') ---------- */
.catalog-group { margin-bottom: 14px; }
.catalog-group:last-child { margin-bottom: 0; }
.catalog-intro {
  line-height: 1.45;
  margin: 0 0 12px;
}
.catalog-intro--footer {
  margin: 14px 0 0;
}
.catalog-create-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
}
.catalog-create-head .prop-title {
  min-width: 0;
  margin: 0;
}
.catalog-create-title .prop-title {
  transform: translateY(1px);
}
.catalog-create-title {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.catalog-create-layer-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, transform 0.12s ease;
}
.catalog-create-layer-icon:hover {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.catalog-create-layer-icon:active {
  transform: translateY(1px);
}
.catalog-back {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.catalog-back:hover {
  background: var(--panel);
  border-color: rgba(79, 140, 255, 0.4);
}
.catalog-back:active {
  transform: translateY(1px);
}
.catalog-group-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 6px;
  padding: 0 2px;
}
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.inspector-mode-create .catalog-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
/* В инспекторах объектов (родитель показывает «Add to <object>») обычно
   два-три варианта дочерних типов — 2 колонки лучше читаются и тайлы
   крупнее. Модификатор не ломает основной каталог Create. */
.catalog-grid--inspector { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) {
  .catalog-grid--inspector { grid-template-columns: repeat(2, 1fr); }
}
.inspector-mode-object .catalog-grid--inspector {
  gap: 10px;
}
.catalog-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 10px 6px 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: 11px;
  line-height: 1.2;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  text-align: center;
  min-width: 0;
}
.catalog-item:hover {
  background: var(--panel);
  border-color: rgba(79, 140, 255, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.catalog-item.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-2);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.catalog-item:disabled,
.catalog-item[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none;
  box-shadow: none;
}
.catalog-item:disabled:hover,
.catalog-item[aria-disabled="true"]:hover {
  background: var(--panel-2);
  border-color: var(--border);
  transform: none;
  box-shadow: none;
}
.catalog-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 14px;
  background: #F4ECD8;
  border: 1px solid var(--border);
  color: var(--text);
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.catalog-item:hover .catalog-icon {
  border-color: rgba(79, 140, 255, 0.5);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.catalog-item.active .catalog-icon {
  border-color: transparent;
  box-shadow: none;
}
/* Иллюстрация (webp): полностью заполняет тайл, иллюстрация уже идёт со своим
   тёплым кремовым фоном #F4ECD8, поэтому собственный background тайла совпадает
   и стыки не видны при любой теме. */
.catalog-icon .catalog-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* SVG-fallback (line-art) лежит на тёплой кремовой подложке, как webp-иконки.
   Цвет фиксируем тёмным: var(--text) в dark theme слишком светлый и на кремовом
   фоне превращает fallback в бледный водяной знак. */
.catalog-icon svg { width: 40px; height: 40px; display: block; color: #1f2937; }
.catalog-label {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inspector-mode-object .catalog-grid--inspector .catalog-item {
  padding: 10px 8px;
  font-size: 12px;
}
.inspector-mode-object .catalog-grid--inspector .catalog-icon {
  width: 72px;
  height: 72px;
  border-radius: 12px;
}

/* На узких инспекторах (mobile bottom-sheet) tile становится чуть крупнее,
   3 колонки чтобы иллюстрации читались. */
@media (max-width: 720px) {
  .inspector-mode-create .catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .catalog-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .catalog-item { padding: 10px 6px 8px; font-size: 11px; }
  .catalog-icon { width: 84px; height: 84px; border-radius: 16px; }
  .catalog-icon svg { width: 44px; height: 44px; }
}

/* Sm-вариант карточки — для inline-выборов в инспекторе (тип крыши,
   подтип крылечка, kind проёма забора). Половинный размер от каталожной,
   чтобы 3-4 карточки умещались в один ряд узкой панели и не дублировали
   крупный grid из Create-инспектора. */
.catalog-grid--sm {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.catalog-item--sm {
  padding: 6px 4px 5px;
  gap: 4px;
  font-size: 10px;
  line-height: 1.15;
}
.catalog-icon--sm {
  width: 56px;
  height: 56px;
  border-radius: 10px;
}
.catalog-icon--sm svg { width: 28px; height: 28px; }
@media (max-width: 720px) {
  .catalog-grid--sm { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .catalog-icon--sm { width: 64px; height: 64px; border-radius: 12px; }
}

/* Материалы в инспекторе: пользователь выбирает не абстрактный цвет, а
   понятную поверхность участка. Карточка показывает фактуру сразу, поэтому
   «газон / песок / плитка» читаются без расшифровки в тексте. */
.material-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.material-card {
  min-width: 0;
  padding: 6px 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 10px;
  line-height: 1.15;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  cursor: pointer;
}
.material-card:hover {
  border-color: rgba(79, 140, 255, 0.45);
  background: var(--panel);
}
.material-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
  background: var(--accent-soft);
  color: var(--accent-2);
}
.material-preview {
  width: 100%;
  height: 34px;
  border-radius: 6px;
  border: 1px solid rgba(15, 23, 42, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
}
.material-card span:last-child {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Canvas ---------- */
.canvas-wrap {
  position: relative;
  background: var(--canvas-bg);
  overflow: hidden;
  min-width: 0;
  width: 100%;
  height: 100%;
}
/* touch-action: none — иначе iOS Safari/Chrome перехватывают pinch как
   зум страницы, а single-finger drag — как scroll. Все touch-жесты на
   канвасе обрабатываем сами (см. scene.js). */
#stage,
#stage .konvajs-content,
#stage canvas {
  width: 100%;
  height: 100%;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Контекстное меню объекта открывается поверх canvas по правому клику.
   Это быстрый путь к тем же командам, что уже живут в инспекторе и
   горячих клавишах: копирование, порядок слоёв, блокировка, удаление. */
.object-context-menu {
  position: fixed;
  z-index: 120;
  width: min(250px, calc(100vw - 16px));
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow);
  font-size: 13px;
  transform-origin: top left;
  opacity: 0;
  transform: translateY(-2px) scale(0.98);
  transition: opacity 0.12s ease, transform 0.12s ease;
  outline: none;
}
.object-context-menu[hidden] { display: none; }
.object-context-menu.open {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.object-context-menu-item {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.object-context-menu-item:hover,
.object-context-menu-item:focus-visible {
  background: var(--btn-ghost-hover, rgba(127,127,127,0.08));
  outline: none;
}
.object-context-menu-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.object-context-menu-item:disabled:hover,
.object-context-menu-item:disabled:focus-visible {
  background: transparent;
}
.object-context-menu-item > svg {
  flex: 0 0 auto;
  opacity: 0.82;
}
.object-context-menu-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.object-context-menu-sub {
  flex: 0 0 auto;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 11px;
  padding-inline-start: 8px;
}
.object-context-menu-item.danger { color: var(--danger); }
.object-context-menu-separator {
  height: 1px;
  margin: 5px 4px;
  background: var(--border-soft, var(--border));
}

/* Loading-оверлей. Показывается синхронно в HTML (см. editor.html) пока
   editor-cloud.js не отдаст загруженный проект через gardmiImport. Перекрывает
   весь canvas + блокирует pointer-события — без этого юзер думал, что проект
   пустой, и начинал чертить поверх ещё не загруженного состояния. */
.canvas-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--canvas-bg);
  color: var(--muted);
  font-size: 13px;
  z-index: 50;
  pointer-events: auto;
  transition: opacity 0.2s ease;
}
.canvas-loading.hidden { opacity: 0; pointer-events: none; }
.canvas-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: canvas-loading-spin 0.8s linear infinite;
}
@keyframes canvas-loading-spin { to { transform: rotate(360deg); } }

/* Глобальный busy-overlay для долгих команд редактора (например Duplicate).
   Он перекрывает не только canvas, но и topbar/inspector: команда уже принята,
   повторные клики по меню или объектам в этот момент только создают гонки. */
.editor-busy-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--canvas-bg);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease;
}
.editor-busy-overlay.show {
  opacity: 1;
  pointer-events: auto;
}
.editor-busy-text {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--panel);
  border: 1px solid var(--border);
}

/* Drop overlay — подсветка dropzone при перетаскивании файла-картинки на canvas.
   pointer-events: none, чтобы не перехватывать drag-события (они должны попадать
   в .canvas-wrap continuously, иначе dragleave перетекает с overlay'а на родителя
   и счётчик dragenter/leave сбивается). */
.drop-overlay {
  position: absolute;
  inset: 12px;
  border: 2px dashed transparent;
  border-radius: 14px;
  background: transparent;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  transition: background 120ms ease, border-color 120ms ease;
  opacity: 0;
}
.drop-overlay.active {
  opacity: 1;
  border-color: var(--accent, #4f7cff);
  background: rgba(79, 124, 255, 0.08);
}
.drop-overlay-card {
  background: var(--panel, #fff);
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 12px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--text, #1a1a1a);
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.drop-overlay-card svg { color: var(--accent, #4f7cff); }
.drop-overlay-sub {
  max-width: min(360px, 70vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

/* Save button loading state — заменяем иконку на спиннер на время запроса.
   Скрываем оригинальный svg-иконку и span с подписью, показываем псевдо-спиннер.
   Используется для btn-save и потенциально для других long-running кнопок. */
.btn.is-saving { cursor: progress; opacity: 0.85; }
.btn.is-saving > svg,
.btn.is-saving > span { visibility: hidden; }
.btn.is-saving::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
  left: 50%;
  top: 50%;
  margin-left: -7px;
  margin-top: -7px;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

.hint {
  position: absolute;
  /* Hint показывается над объектами при выборе tool'а. 76px = плавающий topbar
     (actions ~52 + 12 padding + 8 buffer) + 4 gap — чтобы не заезжал на него. */
  top: 76px;
  /* Центрируется в canvas-зоне (правее плавающего sidebar'а шириной 56 + 12 left).
     Формула: центр = left-edge-of-canvas + (width-of-canvas)/2. На CSS это
     ((100% - sidebar_right) / 2) + sidebar_right = (100% + sidebar_right) / 2.
     sidebar_right = 12 (left) + 56 (width) = 68px.
     Без этой поправки hint пересекается с sidebar при длинном тексте. */
  left: calc((100% + 68px) / 2);
  transform: translateX(-50%);
  /* width по контенту, но не шире 560px — короткие хинты остаются компактной
     pill'ой, длинные (например hint'ы у align-bg) переносятся в 2 строки. */
  width: max-content;
  max-width: min(560px, calc(100% - 100px));
  text-align: center;
  background: var(--hint-bg);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--muted);
  backdrop-filter: blur(8px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.hint.show { opacity: 1; }
/* На мобильном pill-форма (999px) плохо смотрится когда текст в 3-4 строки.
   Тянем hint на всю доступную ширину и делаем углы умеренно скруглёнными.
   Также сдвигаем правее sidebar (76px = 12 left + 56 width + 8 gap), чтобы
   не перекрывался. top=96 — ниже плавающей actions-карточки (top:12, h~50). */
@media (max-width: 720px) {
  .hint {
    top: 96px;
    left: 76px; right: 12px;
    transform: none;
    max-width: none;
    width: auto;
    border-radius: 12px;
    font-size: 11px;
  }
}

/* ---------- Inspector ----------
   Desktop: плавает поверх canvas в правом верхнем углу workspace.
   Высота = content-size, ограниченная viewport'ом (max-height: calc(100% - 24px)).
   Когда контента мало — панель маленькая, под ней свободное место для чертежа.
   Когда много — внутри .inspector-body появляется scroll.
   Видимость регулируется классом .open — click outside / Escape / FAB её тогглят. */
.inspector {
  container-type: inline-size;
  container-name: inspector;
  position: absolute;
  top: 12px;
  right: 12px;
  bottom: auto;
  width: 300px;
  height: auto;
  max-height: calc(100% - 24px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 5;
  transition: opacity 0.18s ease, transform 0.18s ease;
  transform-origin: top right;
}
/* На desktop без .open инспектор скрыт — opacity/scale-ридер, pointer-events off.
   display:none не используем — хочется плавный fade при toggle. */
.inspector:not(.open) {
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  pointer-events: none;
}
.inspector-handle { display: none; }
/* FAB — открывает скрытый инспектор на desktop (в углу, где он был).
   На mobile стили переопределяются в media-query ниже (круглая кнопка внизу). */
.btn-inspector-open {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
  transition: background 0.15s ease, opacity 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn-inspector-open:hover { background: var(--panel-2); }
.btn-inspector-open.hidden { display: none; }
/* ⋮ More: без бордера/фона, только иконка, как типичное trailing-меню в интерфейсах.
   Виден на всех viewports — содержит Download (PNG/PDF/JSON), Versions, Share,
   Import. На desktop Versions/Share/Import дублируются в топбаре, на mobile они
   там скрыты, но Download доступен только через ⋮. */
.btn-more {
  display: inline-flex;
  background: transparent;
  border: none;
  color: var(--text);
  padding: 0;
  width: 40px; height: 40px;
  border-radius: 999px;
  cursor: pointer;
  align-items: center; justify-content: center;
  font-family: inherit;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
}
.btn-more:hover { background: var(--panel-2); }
.btn-more:active { background: #232733; }
/* Generic "Properties" не показываем: режимы панели уже подписаны внутри.
   Шапка нужна только когда выбран объект и туда попадает его тип/иконка. */
.inspector-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.inspector.has-object-title .inspector-header {
  display: flex;
}
.inspector-header .title {
  font-weight: 600;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.inspector-header .title span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inspector-title-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #F4ECD8;
  border: 1px solid var(--border);
  flex-shrink: 0;
  object-fit: cover;
}
.inspector-title-action {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.inspector-title-action:hover,
.inspector-title-action[aria-pressed="true"] {
  color: var(--text);
  background: transparent;
}
/* overflow-x:hidden — страховка от любых детей-инспекторов с фиксированной
   шириной (textarea, длинные кнопки, превью). Раньше textarea без width:100%
   распирал панель и появлялся горизонтальный скролл. */
.inspector-body { padding: 14px 16px; overflow-x: hidden; overflow-y: auto; flex: 1; }
.inspector-mode-create .inspector-body {
  padding: 18px;
}
.inspector-mode-scene .inspector-body {
  padding: 16px;
}
.inspector-mode-object .inspector-body,
.inspector-mode-menu .inspector-body,
.inspector-mode-layers .inspector-body {
  padding: 16px;
}
.inspector-body * { box-sizing: border-box; max-width: 100%; }
.empty {
  text-align: center;
  color: var(--muted);
  padding: 40px 16px;
}
.empty-icon {
  font-size: 32px;
  opacity: 0.3;
  margin-bottom: 12px;
}
.empty .muted { font-size: 11px; margin-top: 6px; }

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.field label, .field .label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.2;
}
.field > span {
  font-size: 12px;
  color: var(--muted);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.2;
}
.field input[type="number"], .field input[type="text"], .field select, .field textarea {
  /* width:100%+box-sizing — иначе textarea (особенно с rows)
     пытается выйти за границы панели и включает горизонтальный скролл. */
  width: 100%;
  box-sizing: border-box;
  min-height: 40px;
  padding: 8px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: var(--inspector-control-font-size);
  font-weight: var(--inspector-control-font-weight);
  font-variant-numeric: tabular-nums;
  outline: none;
  transition: border-color 0.15s ease;
}
.field input:focus, .field select:focus { border-color: var(--accent); }

.numeric-scrub {
  gap: 8px;
  margin-bottom: 14px;
}
.numeric-scrub-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.numeric-scrub .numeric-scrub-head label {
  margin: 0;
}
.numeric-scrub-value {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: 72px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}
.numeric-scrub-value:focus-within {
  border-color: var(--accent);
}
.numeric-scrub .numeric-scrub-value input[type="number"] {
  width: 54px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--inspector-control-font-size);
  font-weight: var(--inspector-control-font-weight);
  line-height: 1.4;
  text-align: right;
  appearance: textfield;
  -moz-appearance: textfield;
}
.numeric-scrub .numeric-scrub-value input[type="number"]::-webkit-outer-spin-button,
.numeric-scrub .numeric-scrub-value input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.numeric-scrub-unit {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}
.numeric-scrub input[type="range"] {
  width: 100%;
  height: 20px;
  margin: 0;
  accent-color: var(--accent);
}
.numeric-scrub-scale {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
  margin-top: -4px;
}

/* Инспектор вершины: убираем длинную форму и собираем рабочие данные в
   плотный блок. На мобильном это экономит высоту sheet и разделяет смысловые
   зоны: позиция, действия, числовой параметр, опасное действие. */
.vertex-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vertex-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  align-items: stretch;
}
.vertex-id-pill,
.vertex-coord {
  min-width: 0;
  min-height: 36px;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(148, 163, 184, 0.06);
}
.vertex-id-pill {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.vertex-id-pill span,
.vertex-coords span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.vertex-id-pill strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 750;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.vertex-id-pill em {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.vertex-coords {
  display: contents;
}
.vertex-coord {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 5px;
}
.vertex-coords span {
  flex: 0 0 auto;
}
.vertex-coords strong {
  min-width: 0;
  overflow: hidden;
  flex: 0 1 auto;
  color: var(--text);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vertex-coords small {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.vertex-actions {
  display: grid;
  gap: 8px;
}
.inspector-mode-object .vertex-actions .vertex-action,
.inspector-mode-object .vertex-danger .vertex-delete {
  width: 100%;
  justify-content: center;
  min-height: 40px;
}
.vertex-panel .numeric-scrub {
  margin-bottom: 0;
}
.vertex-danger {
  padding-top: 2px;
}

/* Inspector UI Kit: общий layout-слой для повторяющихся панелей объектов.
   Новые инспекторы должны собираться через objects/inspector-ui.js, чтобы
   правки плотности/сеток/чекбоксов автоматически попадали во все похожие
   панели, а не копировались вручную в каждый renderInspector. */
.inspector-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.inspector-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
}
.inspector-section:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.inspector-section > .prop-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}
/* В инспекторе подписи полей — sentence case, не кричащий uppercase. */
.inspector-panel .field label,
.inspector-panel .inspector-field > label,
.inspector-panel .annotation-style-label {
  text-transform: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
}
.inspector-panel .field input[type="number"],
.inspector-panel .field input[type="text"],
.inspector-panel .field select {
  min-height: 44px;
}
.inspector-panel .field select {
  padding-inline: 12px;
  cursor: pointer;
}
.inspector-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 10px 12px;
}
.inspector-grid .field {
  margin-bottom: 0;
}
.inspector-grid--1 {
  grid-template-columns: minmax(0, 1fr);
}
.inspector-panel .field {
  margin-bottom: 0;
}
.inspector-field {
  min-width: 0;
}
.inspector-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}
.inspector-input-wrap:focus-within {
  border-color: var(--accent);
}
.inspector-input-wrap input[type="number"] {
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--inspector-control-font-size);
  font-weight: var(--inspector-control-font-weight);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  outline: none;
}
.inspector-unit {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.inspector-section--compact {
  gap: 6px;
  padding-bottom: 10px;
}
.inspector-section--compact > .prop-title {
  margin-bottom: 2px;
}
.inspector-section--compact .field {
  gap: 4px;
}
.inspector-section--compact .field input[type="text"] {
  min-height: 40px;
  padding-block: 6px;
}
.inspector-check-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.inspector-check,
.inspector-readout {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(148, 163, 184, 0.06);
}
.inspector-check-group .inspector-check,
.inspector-panel > .inspector-check {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  cursor: pointer;
  color: var(--text);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.inspector-check-group .inspector-check:hover,
.inspector-panel > .inspector-check:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
/* Компактные тогглы подписи: две равные колонки на всю ширину секции. */
.inspector-check-group.inspector-check-group--compact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}
.inspector-check-group.inspector-check-group--compact .inspector-check {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 8px 12px;
  gap: 10px;
}
.inspector-check-group.inspector-check-group--compact .inspector-check-text {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}
.inspector-check-group.inspector-check-group--compact .inspector-check:only-child {
  grid-column: 1 / -1;
}
@container inspector (max-width: 300px) {
  .inspector-check-group.inspector-check-group--compact {
    grid-template-columns: minmax(0, 1fr);
  }
}
.inspector-check-group.inspector-check-group--compact .inspector-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-inline-start: 0;
}
.inspector-check {
  display: flex;
  align-self: stretch;
  justify-content: flex-start;
  width: 100%;
  cursor: pointer;
  color: var(--text);
}
.inspector-check-text,
.inspector-readout span {
  display: block;
  flex: 1;
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
}
.inspector-readout span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.inspector-check-caption {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}
.inspector-check input[type="checkbox"] {
  order: -1;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--accent);
}
.inspector-readout {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.inspector-readout strong {
  color: var(--text);
  font-size: 16px;
  font-weight: 750;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.inspector-color-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.inspector-grid > .inspector-color-field {
  grid-column: 1 / -1;
  align-items: stretch;
}
.inspector-color-field--wide {
  align-items: stretch;
}
.inspector-color-control {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  min-width: 0;
}
.inspector-color-auto {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}
.inspector-color-auto.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--text);
}
.inspector-color-field--wide .inspector-color-control {
  width: 100%;
}
.inspector-grid > .inspector-color-field .inspector-color-control {
  width: 100%;
}
.inspector-panel .inspector-color-field input[type="color"] {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 3px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
}
.inspector-color-control span {
  flex: 1;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-align: end;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inspector-section .annotation-style-block,
.inspector-panel .annotation-style-block {
  margin: 0;
  gap: 8px;
}
.inspector-section .annotation-segmented {
  width: 100%;
}
/* На узкой плавающей панели hex не помещается — оставляем swatch + picker. */
@container inspector (max-width: 300px) {
  .inspector-panel .inspector-color-control span {
    display: none;
  }
}
.inspector-mode-object .inspector-body > .prop-title {
  margin: 16px 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}
.inspector-mode-object .inspector-body > .prop-title:first-child {
  margin-top: 0;
}
.inspector-range {
  gap: 8px;
}
.inspector-range-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.inspector-range-head label {
  margin: 0;
}
.inspector-range-head strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.inspector-range input[type="range"] {
  width: 100%;
  margin: 0;
  accent-color: var(--accent);
}
.inspector-range-caption,
.inspector-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.emoji-picker-field {
  margin-bottom: 10px;
}
.emoji-picker-field input {
  text-align: center;
  font-size: 26px;
  line-height: 1;
}
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(54px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.emoji-preset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}
.emoji-preset:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent-soft) 34%, var(--panel-2));
}
.emoji-preset:active {
  transform: scale(0.97);
}
.emoji-preset.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 34%, transparent);
}

.inspector-body .field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-inline-end: 40px;
  background-color: var(--panel-2);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) 50%,
    calc(100% - 16px) 50%;
  background-repeat: no-repeat;
  background-size: 6px 6px, 6px 6px;
}

.object-layer-control {
  margin-top: 12px;
}

.layers-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.layers-panel-head,
.layers-detail-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.layers-panel-title {
  flex: 1;
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 750;
}

.layer-tree {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.layer-tree-layer {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 10px;
  row-gap: 4px;
  align-items: center;
  padding: 6px 0 8px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 0;
  background: transparent;
}

.layer-tree-layer.active {
  background: transparent;
  box-shadow: none;
}

.layer-tree-layer.is-hidden .layer-tree-head {
  opacity: 0.58;
}

.layer-tree-layer--viewer {
  grid-template-columns: minmax(0, 1fr) auto;
}

.layer-tree-layer--viewer .layer-tree-head {
  cursor: pointer;
}

.layer-tree-layer.layer-drop-target {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}

.layer-tree-layer.dragging {
  opacity: 0.48;
}

.layer-tree-layer.drop-before::before,
.layer-tree-layer.drop-after::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
  pointer-events: none;
}

.layer-tree-layer.drop-before::before {
  inset-block-start: -1px;
}

.layer-tree-layer.drop-after::after {
  inset-block-end: -1px;
}

.layer-expand-btn:hover,
.layer-expand-btn[aria-expanded="true"],
.layer-expand-btn[aria-pressed="true"] {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 15%, var(--panel-2));
}

.layer-expand-btn[disabled] {
  opacity: 0.35;
  cursor: default;
}

.layer-tree-head {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  min-width: 0;
  min-height: 34px;
  padding: 4px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.layer-tree-head[draggable="true"] {
  cursor: grab;
}

.layer-tree-layer.dragging .layer-tree-head {
  cursor: grabbing;
}

.layer-tree-head:hover {
  background: rgba(148, 163, 184, 0.10);
}

.layer-swatch {
  --layer-color: var(--accent);
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--layer-color) 24%, var(--panel));
  box-shadow: none;
}

.layer-tree-layer.active .layer-swatch {
  box-shadow: 0 0 0 2px var(--ok);
}

.layer-swatch--large {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--layer-color) 28%, var(--panel));
}

.layer-emoji {
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  font-size: 18px;
  line-height: 1;
}

.layer-swatch--large .layer-emoji {
  font-size: 22px;
}

.layer-tree-name,
.layer-object-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layer-tree-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.layer-tree-name {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.layer-tree-status {
  color: var(--ok);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.05;
}

.layer-tree-status--hidden {
  color: var(--muted);
}

.layer-active-badge {
  display: none;
}

.layer-tree-controls {
  display: flex;
  align-items: center;
  gap: 3px;
}

.layer-object-list {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 2px;
  padding-inline-start: 0;
}

.layer-object-branch {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.layer-object-children {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-inline-start: 6px;
  padding-inline-start: 10px;
}

.layer-object-children::before {
  content: "";
  position: absolute;
  inset-block: 2px 7px;
  inset-inline-start: 0;
  width: 1px;
  background: color-mix(in srgb, var(--border) 82%, transparent);
}

.layer-object-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 36px;
  padding: 4px 0 4px 5px;
  border-radius: 7px;
  background: transparent;
}

.layer-object-row.is-hidden .layer-object-main {
  opacity: 0.48;
}

.layer-object-main {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  min-height: 34px;
  padding: 2px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.layer-object-row:hover,
.layer-object-row.selected {
  background: rgba(148, 163, 184, 0.14);
}

.layer-object-row[draggable="true"] {
  cursor: grab;
}

.layer-object-row.dragging {
  opacity: 0.48;
}

.layer-object-row.drop-before::before,
.layer-object-row.drop-after::after {
  content: "";
  position: absolute;
  inset-inline: 4px 0;
  height: 2px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
  pointer-events: none;
}

.layer-object-row.drop-before::before {
  inset-block-start: -3px;
}

.layer-object-row.drop-after::after {
  inset-block-end: -3px;
}

.layer-object-controls {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  justify-self: end;
}

.layer-object-control-btn {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.layer-object-control-btn:hover,
.layer-object-control-btn[aria-pressed="true"] {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 14%, var(--panel-2));
}

.layer-object-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}

.layer-object-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 5px;
}

.layer-object-icon svg {
  width: 17px;
  height: 17px;
}

.layer-object-name {
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
}

.layer-object-empty {
  color: var(--muted);
  font-size: 11px;
}

.layer-object-empty {
  min-height: 28px;
  padding: 6px 7px;
}

.layer-icon-btn,
.layer-back-btn,
.layer-icon-choice {
  min-width: 0;
  min-height: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-2) 72%, var(--text) 6%);
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.layer-icon-btn {
  background: transparent;
}

.layer-icon-btn:hover,
.layer-back-btn:hover,
.layer-icon-choice:hover,
.layer-icon-btn[aria-pressed="true"],
.layer-icon-choice.active {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 14%, var(--panel-2));
}

.layer-icon-btn[disabled],
.layer-icon-choice[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

.layers-detail-title {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.layers-detail-title strong,
.layers-detail-title span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layers-detail-title strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 750;
}

.layers-detail-title span {
  color: var(--muted);
  font-size: 11px;
}

.layer-icon-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.layer-color-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.layer-color-choice {
  --layer-color: var(--accent);
  width: 36px;
  height: 36px;
  min-height: 0;
  border: 0;
  border-radius: 8px;
  background: var(--layer-color);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.02);
  -webkit-tap-highlight-color: transparent;
}

.layer-color-choice:hover,
.layer-color-choice.active {
  outline: 2px solid color-mix(in srgb, var(--layer-color) 70%, #ffffff);
  outline-offset: 2px;
}

.layer-icon-choice {
  width: 100%;
  height: 40px;
  border: 1px solid var(--border);
  background: var(--panel-2);
}

.layer-icon-choice.active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
}

.layer-detail-toggles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
[dir="rtl"] .inspector-body .field select {
  background-position:
    16px 50%,
    22px 50%;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.field-row .field { margin-bottom: 0; }

.offset-zones-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

/* Offset-zones editor: единая строка distance / label / delete для
   house и house-poly. Высоту держим как у остальных контролов инспектора,
   иначе mobile min-height у .btn делает delete выше соседних input'ов. */
.zone-row {
  display: grid;
  grid-template-columns: minmax(88px, 0.35fr) minmax(0, 1fr) 44px;
  gap: 8px;
  align-items: center;
  margin-bottom: 0;
}
.zone-row input[type="number"],
.zone-row input[type="text"] {
  min-height: 44px;
  padding: 10px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: var(--inspector-control-font-size);
  font-weight: var(--inspector-control-font-weight);
  font-variant-numeric: tabular-nums;
  outline: none;
  transition: border-color 0.15s ease;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.zone-row input:focus { border-color: var(--accent); }
.zone-row .zone-del {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
}
.zone-row .zone-del:hover { color: var(--danger); border-color: rgba(239, 75, 107, 0.25); }
.zone-add { font-size: 14px; min-height: 44px; padding: 10px 14px; }
.zone-help { line-height: 1.5; margin-top: 6px; }

/* Style picker (4 пресета постройки) — два ряда по 2 чипа на узких панелях,
   один ряд на широких. Каждый чип = крупный цветной свотч + подпись. */
.style-picker {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.style-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s, background 0.12s;
}
.style-chip:hover { border-color: var(--accent); }
.style-chip.is-active {
  border-color: var(--accent);
  background: rgba(96, 165, 250, 0.08);
}
.style-swatch {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 2px solid;
}
.style-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.prop-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 20px 0 12px;
  line-height: 1;
}
.prop-title:first-child { margin-top: 0; }

.prop-section {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 16px;
}
.prop-section:last-child {
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: 0;
}
.prop-section .prop-title {
  margin-top: 0;
}

.inspector-mode-object .muted,
.inspector-mode-menu .muted,
.inspector-mode-create .muted,
.inspector-mode-layers .muted {
  font-size: 12px;
  line-height: 1.45;
}
.inspector-mode-object .btn,
.inspector-mode-menu .btn,
.inspector-mode-layers .btn {
  min-height: 38px;
}
.inspector-mode-object .btn[style*="width:100%"],
.inspector-mode-menu .btn[style*="width:100%"],
.inspector-mode-layers .btn[style*="width:100%"] {
  justify-content: center;
}

/* Scene settings — единая вертикальная сетка рабочих настроек.
   Делаем UI одинаково читаемым на desktop-панели и mobile sheet: без
   микротекста, без вложенных карточек и с touch-friendly высотой контролов. */
.scene-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.image-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.scene-section {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-soft);
}
.scene-section:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.scene-section-title {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  margin: 0 0 10px;
  text-transform: uppercase;
}
.scene-section-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 10px;
}
.scene-section-head .scene-section-title {
  min-width: 0;
  margin: 0;
}
.inspector-help {
  position: relative;
  flex: 0 0 auto;
  z-index: 5;
}
.inspector-help summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  list-style: none;
}
.inspector-help summary::-webkit-details-marker {
  display: none;
}
.inspector-help[open] summary {
  color: var(--text);
  border-color: var(--accent);
  background: var(--panel-2);
}
.inspector-help-popover {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  width: 260px;
  max-width: calc(100vw - 48px);
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.22);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: normal;
  text-align: start;
  text-transform: none;
  z-index: 40;
}
.scene-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  margin-top: 8px;
}
.calibration-angle-row {
  display: grid;
  grid-template-columns: minmax(64px, auto) minmax(0, 1fr) minmax(64px, auto);
  gap: 8px;
  align-items: center;
}
.calibration-step-btn {
  min-height: 40px;
  padding: 8px 10px;
  white-space: nowrap;
}
.calibration-angle-input {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}
.calibration-angle-input input {
  width: 100%;
  min-height: 40px;
  padding: 8px 28px 8px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: var(--inspector-control-font-size);
  font-weight: var(--inspector-control-font-weight);
  font-variant-numeric: tabular-nums;
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
}
.calibration-angle-input input:focus { border-color: var(--accent); }
.calibration-angle-input input::-webkit-outer-spin-button,
.calibration-angle-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.calibration-angle-input span {
  position: absolute;
  inset-inline-end: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
}
.calibration-action {
  width: 100%;
  justify-content: center;
  min-height: 40px;
  margin-top: 10px;
}
.calibration-action svg {
  flex: 0 0 auto;
}
.calibration-metric {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: stretch;
}
.calibration-metric .btn {
  min-height: 38px;
  padding: 8px 12px;
  white-space: normal;
  width: 100%;
  justify-content: center;
  gap: 8px;
}
.scene-kicker {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.scene-value {
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
  margin-top: 2px;
}
.scene-check-list {
  display: grid;
  gap: 9px;
}
.scene-check {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  line-height: 1.3;
  min-height: 24px;
}
.scene-check input {
  width: 16px;
  height: 16px;
  margin: 0;
}
.scene-field-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
}
.scene-field-grid .field,
.scene-section > .field {
  margin-bottom: 0;
}
.scene-panel .field label,
.scene-panel .field .label {
  font-size: 11px;
  line-height: 1.2;
}
.scene-panel .field input,
.scene-panel .field select {
  min-height: 38px;
}
.scene-wide-action {
  width: 100%;
  justify-content: center;
  min-height: 38px;
}
.scene-check-list + .field {
  margin-top: 14px;
}
.image-keep-ratio {
  margin-top: 12px;
  padding-top: 2px;
}
.image-panel .field-row {
  margin-bottom: 0;
}
.image-panel .field-row + .field-row {
  margin-top: 10px;
}
.image-panel .image-compact-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.image-panel .image-compact-row .field label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.image-panel .field {
  margin-bottom: 0;
}
.image-panel .field input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}
.calibration-scale-box,
.image-scale-box {
  display: grid;
  gap: 6px;
}
.calibration-scale-main,
.image-scale-main {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: stretch;
}
.scene-scale-main {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
}
.calibration-scale-main .calibration-scale-field {
  flex: 1 1 0;
  min-width: 0;
}
.calibration-scale-main .calibration-scale-action {
  flex: 0 0 128px;
  width: auto;
  min-width: 0;
  padding-inline: 10px;
  white-space: nowrap;
}
.calibration-scale-field {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  min-height: 38px;
  padding: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.calibration-scale-field span {
  flex: 0 0 auto;
  white-space: nowrap;
}
.calibration-scale-field input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 6px 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: var(--inspector-control-font-size);
  font-weight: var(--inspector-control-font-weight);
  letter-spacing: 0;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  text-align: right;
  text-transform: none;
  outline: none;
  -moz-appearance: textfield;
}
.calibration-scale-field input:focus {
  border-color: var(--accent);
}
.calibration-scale-field input::-webkit-outer-spin-button,
.calibration-scale-field input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.calibration-scale-field--readout {
  color: var(--text);
  font-size: 14px;
  letter-spacing: 0;
  text-align: right;
  text-transform: none;
}
.calibration-scale-field--readout span {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.calibration-scale-readout {
  min-height: 36px;
  padding: 0;
}
.calibration-scale-readout {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 0;
  background: transparent;
}
.calibration-scale-readout--value {
  justify-content: flex-end;
}
.calibration-scale-readout span {
  flex: 0 0 auto;
  font-size: 10px;
  line-height: 1.1;
}
.calibration-scale-readout strong {
  min-width: 0;
  max-width: 100%;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.15;
  text-align: right;
}
.calibration-scale-readout--value strong {
  width: 100%;
}
.calibration-scale-action,
.image-scale-action {
  width: 100%;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding-block: 7px;
  padding-inline: 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.15;
  white-space: normal;
}
.calibration-scale-action span,
.image-scale-action span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.calibration-scale-note,
.image-scale-note {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.35;
}

/* Подсказки/помощники в инспекторах. Раньше каждое место ставило inline
   font-size:11px (слишком мелко для чтения, особенно на мобильнике). Дефолт
   13px = body-secondary по Material/HIG, читабельно везде. line-height
   повышен для пар-абзацев. */
.inspector-body .muted { font-size: 13px; line-height: 1.5; }
/* Между подсказкой и следующим .field — гарантированный воздух, чтобы
   блоки не слипались в сплошной текст. */
.inspector-body .muted + .field,
.inspector-body .muted + .prop-title { margin-top: 10px; }

/* ----- Дочерние «части» родительского объекта (childParts.js) -----------
   Калитки/ворота забора, в будущем — окна/двери дома и пр. Каждая часть
   рисуется как самостоятельная карточка с заголовком, полями и крестиком
   удаления. Кнопки добавления — одна на kind, в одну строку под списком. */
.parts-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.parts-empty {
  color: var(--muted);
  padding: 8px 0;
  font-size: 12px;
}
.parts-add-row {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-top: 10px;
}
.parts-add-row .parts-add-btn { flex: 1; }
.part-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  padding: 10px 12px;
}
.part-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.part-card-title {
  flex: 1;
  font-size: 13px;
  line-height: 1.3;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.part-card-title strong { font-weight: 600; }
.part-card-title .muted { color: var(--muted); font-weight: 400; }
.part-card-delete {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  color: var(--muted);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}
.part-card-delete:hover { color: var(--danger); border-color: rgba(239, 75, 107, 0.25); }
.part-card-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 10px;
}
.part-card-field { display: flex; flex-direction: column; gap: 5px; }
.part-card-field > label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.2;
}
.part-card-field input,
.part-card-field select {
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: var(--inspector-control-font-size);
  font-weight: var(--inspector-control-font-weight);
  font-variant-numeric: tabular-nums;
}
.part-card-field input:focus,
.part-card-field select:focus { border-color: var(--accent); outline: none; }
/* Если у kind'а только одно поле (или есть «Сегмент» — длинный селект) — даём
   ему растянуться на всю ширину карточки, чтобы не оставлять полупустую сетку. */
.part-card-fields > .part-card-field:nth-child(3):last-child { grid-column: 1 / -1; }

/* Карточка-ссылка: ребёнок-объект (gate/wicket) в инспекторе родителя. Клик
   по ней выделяет дочерний объект — пользователь прыгает в его собственный
   инспектор. Визуально — кликабельная строка с шевроном справа. */
.part-card--link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 10px 12px;
  font: inherit;
  color: inherit;
}
.part-card--link:hover { border-color: var(--accent); }
.part-card--link .part-card-title { flex: 1; }
.part-card-arrow {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
  color: var(--muted);
}

/* Сегментированный переключатель (alignment, и т.п.) — три равные кнопки
   в один ряд, активная подсвечена акцентом. */
.seg-toggle {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  width: fit-content;
}
.seg-toggle .seg-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 30px;
  background: var(--panel-2);
  border: none;
  border-right: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.seg-toggle .seg-opt:last-child { border-right: none; }
.seg-toggle .seg-opt:hover { color: var(--text); background: var(--panel); }
.seg-toggle .seg-opt.active {
  background: var(--accent-soft);
  color: var(--accent-2);
}
:root[data-theme="light"] .seg-toggle .seg-opt.active,
:root[data-theme="paper"] .seg-toggle .seg-opt.active { color: var(--accent); }

/* Theme toggle — сегментированные кнопки Dark / Light / Paper в Scene settings.
   Активная подсвечивается цветом акцента, неактивная — нейтральная ghost. */
.theme-toggle {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}
.theme-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.15s ease;
}
.theme-opt:hover { color: var(--text); border-color: var(--border); }
.theme-opt svg { display: none; }
.theme-opt.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-2);
}
:root[data-theme="light"] .theme-opt.active,
:root[data-theme="paper"] .theme-opt.active { color: var(--accent); }
.inspector-mode-scene .theme-toggle {
  gap: 10px;
  margin-bottom: 0;
}
.inspector-mode-scene .theme-opt {
  min-height: 38px;
  padding: 8px 10px;
  font-size: 13px;
}

.chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  background: var(--accent-soft);
  color: var(--accent-2);
}

.muted { color: var(--muted); }

/* ---------- Dialog ---------- */
.dialog {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: var(--radius);
  padding: 0;
  box-shadow: var(--shadow);
  max-width: 360px;
}
.dialog--wide { max-width: 460px; }
.dialog::backdrop { background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); }
.dialog form { padding: 20px; }
.dialog h3 { margin: 0 0 6px; font-size: 15px; }
.dialog .muted { font-size: 12px; margin-bottom: 16px; }
.dialog label { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.dialog label span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.dialog input,
.dialog select {
  padding: 8px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  outline: none;
}
.dialog input:focus,
.dialog select:focus { border-color: var(--accent); }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; }

.print-theme-dialog { max-width: 720px; }
.print-theme-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 18px;
}
.print-theme-card {
  display: grid;
  grid-template-rows: auto auto auto;
  justify-items: center;
  row-gap: 8px;
  width: 100%;
  min-height: 232px;
  padding: 14px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  text-align: center;
  cursor: pointer;
}
.print-theme-card.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.print-theme-cover {
  display: block;
  width: 112px;
  height: 150px;
  border: 1px solid currentColor;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
  object-fit: cover;
  background: #ffffff;
}
.print-theme-name {
  align-self: end;
  font-size: 14px;
  font-weight: 700;
  min-width: 0;
}
.print-theme-note {
  align-self: start;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
  min-width: 0;
}

.drawing-frame-dialog { max-width: 680px; }
.drawing-frame-template-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 18px;
}
.drawing-frame-template-card {
  display: grid;
  grid-template-columns: 76px 1fr;
  grid-template-areas:
    "preview country"
    "preview title"
    "preview note";
  column-gap: 12px;
  row-gap: 4px;
  min-height: 118px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.drawing-frame-template-card.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.drawing-frame-template-preview {
  grid-area: preview;
  position: relative;
  width: 64px;
  height: 92px;
  border: 1px solid currentColor;
  background: color-mix(in srgb, var(--panel) 80%, white 20%);
}
.drawing-frame-template-preview span {
  position: absolute;
  inset: 7px;
  border: 1px solid currentColor;
}
.drawing-frame-template-preview i {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 34px;
  height: 20px;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  opacity: 0.55;
}
.drawing-frame-template-preview b {
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 30px;
  height: 18px;
  border-left: 1px solid currentColor;
  border-top: 1px solid currentColor;
}
.drawing-frame-template-country {
  grid-area: country;
  align-self: end;
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.drawing-frame-template-title {
  grid-area: title;
  font-size: 13px;
  font-weight: 700;
}
.drawing-frame-template-note {
  grid-area: note;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.drawing-frame-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.drawing-frame-form-grid label { margin-bottom: 16px; }
.inspector-mode-drawing-frame .inspector-body {
  padding: 16px;
}
.drawing-frame-panel .drawing-frame-template-grid {
  grid-template-columns: 1fr;
  margin-bottom: 6px;
}
.drawing-frame-panel .drawing-frame-template-card {
  min-height: 104px;
}
.drawing-frame-panel .btn.primary {
  width: 100%;
  justify-content: center;
}
@media (max-width: 680px) {
  .print-theme-grid { grid-template-columns: 1fr; }
  .drawing-frame-template-grid { grid-template-columns: 1fr; }
  .drawing-frame-form-grid { grid-template-columns: 1fr; gap: 0; }
  .print-theme-card {
    grid-template-columns: 92px minmax(0, 1fr);
    grid-template-rows: auto auto;
    justify-items: start;
    text-align: left;
    min-height: 126px;
  }
  .print-theme-cover {
    grid-row: 1 / 3;
    width: 82px;
    height: 110px;
  }
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 10px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s ease;
  z-index: 1000;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.ok { border-color: rgba(51, 192, 122, 0.4); }
.toast.err { border-color: rgba(239, 75, 107, 0.4); }

/* ---------- UI Kit: FloatingEditBadge ---------- */
.floating-edit-badge {
  position: fixed;
  /* координаты заполняются JS через translate3d во время edit-gesture */
  top: 0; left: 0;
  padding: 5px 9px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: 6px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-9999px, -9999px, 0);
  will-change: transform;
  transition: opacity 0.08s ease;
  z-index: 1100;
  white-space: nowrap;
}
.floating-edit-badge.show { opacity: 1; }

/* ---------- Canvas-инпуты размеров у активной вершины ---------- */
.vertex-dimension-inputs {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.vertex-dimension-inputs[hidden] { display: none; }
.vertex-dimension-input {
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 17px;
  padding: 0 3px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.82);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24);
  pointer-events: auto;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transform-origin: center center;
}
:root[data-theme="light"] .vertex-dimension-input,
:root[data-theme="paper"] .vertex-dimension-input {
  border-color: #60a5fa;
  background: #ffffff;
  color: var(--text);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.14);
}
.vertex-dimension-input input {
  width: 28px;
  height: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: center;
  appearance: textfield;
}
.vertex-dimension-input input::-webkit-outer-spin-button,
.vertex-dimension-input input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #343949; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .inspector { width: 280px; }
}
@media (max-width: 720px) {
  /* На mobile sidebar тоже плавает слева (как на desktop) — просто наследует
     базовые стили. При вертикальной нехватке места внутри появляется scroll
     (max-height + overflow-y: auto уже выставлены в базовом .sidebar). */

  /* Скрываем ползунки у плавающих панелей на мобильном — на узком экране они
     выглядят неопрятно и съедают ширину. Скролл по-прежнему работает свайпом. */
  .sidebar,
  .inspector-body {
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* Legacy Edge/IE */
  }
  .sidebar::-webkit-scrollbar,
  .inspector-body::-webkit-scrollbar {
    display: none;                /* Chromium/Safari */
  }

  /* Текстовая часть brand (title + "Not saved yet") скрыта на mobile —
     освобождает место для action-кнопок. Название редактируется через Properties. */
  .topbar .brand > div:not(.logo) { display: none; }

  .mobile-save-status {
    position: absolute;
    top: 68px;
    inset-inline-end: 12px;
    display: inline-flex;
    align-items: center;
    max-width: calc(100vw - 92px);
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    box-shadow: var(--shadow);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
  }
  .mobile-save-status::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-inline-end: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.75;
    flex: 0 0 auto;
  }
  .mobile-save-status.error::before { background: #fff; opacity: 0.95; }

  /* --- Inspector как bottom sheet ---
     Фиксируем внизу экрана. Высота = content-size (но не больше 70vh — чтобы
     можно было видеть холст и закрывать). Открытие/закрытие — через класс .open. */
  .inspector {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    top: auto;
    width: auto;
    height: auto;
    z-index: 20;
    max-height: 70vh;
    background: var(--panel);
    border: none;
    border-top: 1px solid var(--border);
    border-radius: 0;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
    display: flex; flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.25s ease;
    /* Отключаем user-select во время drag — чтобы свайп не выделял текст */
    touch-action: none;
  }
  .inspector.dragging { transition: none; }

  /* --- Peek state ---
     Когда выбран объект, sheet выдвигается только на высоту handle+header с
     названием объекта. Tap или свайп вверх по handle/header раскрывают его
     полностью. Высота пика = handle (~20px) + header (~48px) ≈ 68px. */
  .inspector.peek {
    transform: translateY(calc(100% - 68px));
  }
  .inspector.peek .inspector-header {
    display: flex;
    padding: 8px 18px 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .inspector.peek .inspector-header .title {
    font-size: 14px;
    font-weight: 600;
  }

  /* .open идёт ПОСЛЕ .peek, чтобы при наличии обоих классов переопределять
     peek-смещение на полное раскрытие (специфичность у них одинаковая, решает
     порядок). */
  .inspector.open { transform: translateY(0); }

  /* Drag handle — видимая "полоска" сверху, hit-area крупная */
  .inspector-handle {
    display: flex; justify-content: center;
    padding: 10px 0 6px;
    cursor: grab;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .inspector-handle::before {
    content: "";
    width: 44px; height: 4px;
    background: var(--border);
    border-radius: 999px;
  }
  .inspector-handle:active { cursor: grabbing; }

  /* На desktop handle не нужен */
  /* flex:0 1 auto вместо flex:1 — body не растягивается на всю высоту
     контейнера, а остаётся ровно по контенту. Контейнер (height:auto) тоже
     ужимается, и sheet перекрывает только нужную часть редактора. Если
     контента слишком много — flex-shrink:1 + max-height:70vh на инспекторе
     дают body уменьшиться, а overflow-y:auto включит внутренний скролл. */
  .inspector-body { overflow-y: auto; flex: 0 1 auto; }
  .inspector-header { display: none; }  /* Заголовок Properties не нужен в sheet — handle сам маркирует */

  .inspector-mode-scene .inspector-body {
    padding: 16px 18px 18px;
  }
  .inspector-mode-object .inspector-body,
  .inspector-mode-menu .inspector-body,
  .inspector-mode-create .inspector-body,
  .inspector-mode-layers .inspector-body {
    padding: 12px 16px max(20px, calc(16px + env(safe-area-inset-bottom, 0px)));
  }
  .inspector-panel {
    gap: 16px;
  }
  .inspector-section {
    gap: 12px;
    padding-bottom: 16px;
  }
  .inspector-grid {
    gap: 12px;
  }
  .inspector-check-group:not(.inspector-check-group--compact) .inspector-check {
    min-height: 48px;
    padding: 12px 14px;
    gap: 14px;
  }
  .inspector-check-group:not(.inspector-check-group--compact) .inspector-check input[type="checkbox"] {
    width: 24px;
    height: 24px;
  }
  .inspector-check-group.inspector-check-group--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .inspector-check-group.inspector-check-group--compact .inspector-check {
    min-height: 44px;
    padding: 10px 12px;
  }
  .inspector-check-group.inspector-check-group--compact .inspector-check input[type="checkbox"] {
    width: 22px;
    height: 22px;
  }
  .inspector-check-text {
    font-size: 14px;
    line-height: 1.35;
  }
  .inspector-panel .inspector-color-control {
    min-height: 48px;
    padding: 0 12px;
  }
  .inspector-panel .inspector-color-field input[type="color"] {
    width: 36px;
    height: 36px;
    min-height: 36px;
  }
  .inspector-color-auto {
    min-width: 44px;
    min-height: 36px;
    padding: 0 10px;
  }
  /* Hex на узком sheet не нужен — swatch + picker достаточно. */
  .inspector-panel .inspector-color-control span {
    display: none;
  }
  .inspector-section .annotation-style-btn {
    min-height: 44px;
  }
  .inspector-mode-object .inspector-body > .prop-title {
    margin: 14px 0 10px;
  }
  .inspector-actions {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .inspector-mode-object .vertex-actions .vertex-action,
  .inspector-mode-object .vertex-danger .vertex-delete {
    min-height: 44px;
  }
  .field input[type="number"], .field input[type="text"], .field select, .field textarea,
  .part-card-field input,
  .part-card-field select,
  .inspector-mode-object .btn,
  .inspector-mode-menu .btn,
  .inspector-mode-layers .btn {
    min-height: 44px;
  }
  .layer-tree {
    gap: 0;
  }
  .layer-tree-layer {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px;
    row-gap: 4px;
    padding: 8px 0 9px;
  }
  .layer-tree-head {
    min-height: 40px;
    gap: 7px;
    padding: 5px;
  }
  .layer-tree-controls {
    grid-column: auto;
    justify-self: end;
    gap: 4px;
  }
  .layer-icon-btn,
  .layer-object-control-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
  .layer-object-list {
    padding-inline-start: 0;
    gap: 5px;
  }
  .layer-object-row {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 44px;
    gap: 6px;
    padding: 5px 0 5px 5px;
  }
  .layer-object-main {
    min-height: 40px;
  }
  .layer-object-controls {
    justify-content: flex-end;
    gap: 4px;
    padding-inline-start: 0;
  }
  .emoji-picker-field input {
    min-height: 54px;
    font-size: 30px;
  }
  .emoji-grid {
    grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
    gap: 10px;
  }
  .emoji-preset {
    min-height: 56px;
    border-radius: 10px;
    font-size: 28px;
  }
  .field-row {
    gap: 12px;
  }
  .parts-add-row {
    flex-direction: column;
  }
  .scene-panel,
  .image-panel {
    gap: 18px;
  }
  .scene-section {
    padding-bottom: 18px;
  }
  .scene-note,
  .scene-check {
    font-size: 13px;
  }
  .inspector-mode-scene .theme-opt,
  .calibration-step-btn,
  .calibration-angle-input input,
  .calibration-action,
  .calibration-metric .btn,
  .calibration-scale-action,
  .calibration-scale-field,
  .calibration-scale-field input,
  .calibration-scale-readout,
  .inspector-help summary,
  .scene-wide-action,
  .scene-panel .field input,
  .scene-panel .field select,
  .image-panel .field input,
  .image-panel .field select {
    min-height: 44px;
  }
  .calibration-metric {
    grid-template-columns: 1fr;
  }
  .calibration-metric .btn {
    width: 100%;
  }
  .scene-check {
    min-height: 32px;
  }

  /* На mobile FAB (desktop-only кнопка re-open инспектора) не нужен — его роль
     играет peek: выделение объекта → автоматически выдвигается peek-заголовок. */
  .btn-inspector-open { display: none; }

  /* На mobile инспектор без .open и .peek — bottom-sheet полностью скрыт через
     translateY. Отменяем desktop-правило opacity/scale, чтобы работала slide-
     анимация. Peek и open обрабатываются своими правилами выше. */
  .inspector:not(.open):not(.peek) {
    opacity: 1;
    transform: translateY(100%);
    pointer-events: auto;
  }
  /* У .peek тоже нужно сбросить desktop-opacity/pointer-events */
  .inspector.peek {
    opacity: 1;
    pointer-events: auto;
  }

  /* 44px touch target. Чтобы undo/redo не выбивались по высоте от Save и т.д. —
     одинаковый min-height для всех топбар-кнопок. */
  .topbar .btn { min-height: 44px; }
  .topbar .btn.icon-only { min-width: 44px; }

  /* Versions / Share / Import — редкие действия, прячем на mobile и кладём
     в "⋮" меню (btn-more → открывает инспектор в режиме 'more'). */
  .topbar #btn-versions,
  .topbar #btn-share,
  .topbar label.btn.ghost { display: none; }  /* label.btn.ghost = Import */
  .btn-more { width: 44px; height: 44px; }  /* display задан выше — viewable everywhere */
}


/* ============================================================
   Landing / marketing pages
   ============================================================ */
body.page-landing,
body.page-list,
body.page-settings,
body.page-septic,
body.page-building-notice,
body.page-whats-new { display: block; height: auto; min-height: 100vh; overflow: visible; user-select: text; }
body.page-landing {
  background: var(--bg);
  /* 100vw у hero-блика не должен давать горизонтальный скролл */
  overflow-x: hidden;
}
/* Блики только в hero (не на всём body — иначе пятно посреди features). Псевдоэлемент
   тянем на 100vw и центрируем: иначе градиент обрезается по левому краю .landing
   (max-width 1120px) и даёт «полосу» ровно у логотипа. */
.landing-hero {
  position: relative;
  overflow: visible;
}
.landing-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: -100px;
  bottom: -32px;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 85% 75% at 70% -5%, rgba(79, 140, 255, 0.13), transparent 72%),
    radial-gradient(ellipse 70% 60% at 35% 28%, rgba(51, 192, 122, 0.06), transparent 75%);
}

.swup-container { min-height: 100%; }

.site-topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 14px 28px;
    background: rgba(15, 17, 21, 0.85); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-soft);
}
body.page-landing .site-topbar {
    background: rgba(15, 17, 21, 0.72);
}
.site-brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.site-brand-mark {
    width: 32px; height: 32px; border-radius: 8px;
    display: block; object-fit: cover;
}
.site-brand-title { font-weight: 700; font-size: 15px; display: block; }
.site-brand-sub { font-size: 11px; color: var(--muted); display: block; }
.site-nav { display: inline-flex; align-items: center; gap: 18px; }
.site-nav-link { color: var(--muted); text-decoration: none; font-size: 13px; }
.site-nav-link:hover { color: var(--text); }
.site-nav-cta {
    background: var(--accent); color: white; text-decoration: none;
    padding: 8px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600;
}
.site-nav-cta:hover { background: var(--accent-2); }
body.page-list .site-topbar .site-nav-cta { display: none; }
.site-lang-switcher select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background:
        var(--panel)
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a9ba' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")
        no-repeat right 12px center / 14px;
    color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 6px 36px 6px 10px; font-size: 12px;
}
[dir="rtl"] .site-lang-switcher select {
    background-position: left 12px center;
    padding: 6px 10px 6px 36px;
}
/* Language switcher внутри инспектора — растягиваем на всю ширину field-slot'а */
#inspector .site-lang-switcher { width: 100%; }
#inspector .site-lang-switcher select { width: 100%; padding-block: 8px; font-size: 13px; }

.landing { max-width: 1120px; margin: 0 auto; padding: 20px 28px 64px; }
/* Единый ритм секций: меньше вертикального «воздуха», страница читается за 2–3 скролла. */
.landing-steps,
.landing-features,
.landing-catalog-teaser,
.landing-faq { padding-block: 44px; }
.section-eyebrow {
    display: inline-block; margin: 0 0 14px;
    font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--accent);
}

/* Hero */
.landing-hero { padding: 48px 0 24px; text-align: center; }
.landing-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
  align-items: center;
}
.landing-hero-copy { max-width: 760px; margin: 0 auto; }
@media (min-width: 1024px) {
  .landing-hero { padding: 56px 0 28px; text-align: start; }
  .landing-hero-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 40px;
  }
  .landing-hero-copy { margin: 0; max-width: none; }
  .landing-hero-copy .hero-logo { margin-left: 0; margin-bottom: 16px; }
  .landing-cta { justify-content: flex-start; }
  .hero-points {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    justify-content: flex-start;
  }
  .landing-lede { margin-left: 0; margin-right: 0; }
  .hero-shot--side {
    margin: 0;
    max-width: none;
  }
}
/* Крупный логотип-маркер над H1: лого уже сам по себе самодостаточная плитка
   (кремовый фон + домик с деревом), поэтому не оборачиваем его в пилюлю и не
   дублируем рядом wordmark — он уже есть в топбаре. Просто ставим логотип
   крупно на тёмный фон лендинга, добавляем мягкую тень-«посадку» — выглядит
   как app-icon на главной экранной заставке, мгновенно читается как бренд. */
.hero-logo {
  display: block;
  width: 112px; height: 112px;
  margin: 0 auto 22px;
  border-radius: 26px;
  object-fit: cover;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}
.hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: 999px;
    background: rgba(51, 192, 122, 0.10); border: 1px solid rgba(51, 192, 122, 0.35);
    color: var(--ok); font-size: 12px; font-weight: 600;
    margin-bottom: 20px;
}
.hero-badge-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 0 4px rgba(51, 192, 122, 0.18);
}
.landing-hero h1 {
    font-size: 52px; margin: 0 0 16px;
    letter-spacing: -0.025em; line-height: 1.08;
    color: var(--text);
}
@media (min-width: 1024px) {
  .landing-hero h1 { font-size: 46px; }
}
.landing-lede { font-size: 18px; color: var(--muted); max-width: 620px; margin: 0 auto 28px; line-height: 1.55; }
.landing-cta { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.hero-points {
    list-style: none; margin: 28px 0 0; padding: 0;
    display: flex; gap: 22px; justify-content: center; flex-wrap: wrap;
    color: var(--muted); font-size: 13px;
}
.hero-points li { display: inline-flex; align-items: center; gap: 6px; }
.hero-points li::before {
    content: ''; width: 16px; height: 16px; border-radius: 50%;
    background: rgba(51, 192, 122, 0.18) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8.5 L7 11.5 L12 5.5' fill='none' stroke='%2333c07a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat;
    flex-shrink: 0;
}

.hero-shot {
    margin: 56px auto 0; max-width: 1100px;
    border-radius: 16px; overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
    border: 1px solid var(--border);
    box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(79,140,255,0.12);
}
.hero-shot img { display: block; width: 100%; height: auto; }
.hero-shot-caption {
    padding: 12px 18px;
    color: var(--muted); font-size: 12px; text-align: center;
    border-top: 1px solid var(--border-soft);
    background: var(--panel);
}

/* Полоска доверия под hero — быстрые факты без лишнего текста */
.landing-trust {
  list-style: none;
  margin: 20px 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.landing-trust li {
  display: grid;
  gap: 4px;
  padding: 14px 12px;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.landing-trust strong {
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.landing-trust span {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.3;
}

.btn.lg { padding: 12px 22px; font-size: 14px; font-weight: 600; }

.landing-presets {
  padding-block: 36px 44px;
}
.landing-presets-header {
  max-width: 680px;
  margin: 0 auto 24px;
  text-align: center;
}
.landing-presets-header .section-eyebrow { display: block; }
.landing-presets-header h2 {
  margin: 0 0 10px;
  font-size: 32px;
  line-height: 1.18;
  letter-spacing: -0.01em;
}
.landing-presets-header p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}
.preset-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.preset-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  color: var(--text);
  text-decoration: none;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.preset-card:hover {
  transform: translateY(-3px);
  border-color: rgba(79, 140, 255, 0.56);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.36);
}
.preset-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  background: var(--panel-2);
}
.preset-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  max-width: calc(100% - 24px);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 17, 21, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  backdrop-filter: blur(8px);
}
.preset-card-body {
  display: grid;
  gap: 8px;
  padding: 16px;
}
.preset-card-body strong {
  font-size: 17px;
  line-height: 1.25;
}
.preset-card-body span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.preset-card-body em {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: var(--accent);
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
}
.preset-card-body em::after {
  content: '→';
  line-height: 1;
}

/* Inline-CTA между секциями лендинга. На лендинге нет sticky-топбара, поэтому
   единственное полезное действие «Открыть редактор» дублируем после смысловых
   точек: catalog teaser, How-it-works steps, итоговая CTA-band. Без повторных
   CTA пользователь должен скроллить до самого низа, чтобы найти кнопку. */
.inline-cta {
  text-align: center;
  margin-top: 32px;
}

/* Catalog teaser — горизонтальная сетка иконок с подписями. Использует те же
   webp, что каталог редактора (static/img/catalog/) — единый визуальный язык
   от лендинга до самого инструмента. На широких экранах 5 в ряд (2 ряда),
   на mobile — 4 в ряд (3 ряда). */
.landing-catalog-teaser { text-align: center; }
.landing-catalog-teaser .section-eyebrow { display: block; }
.landing-catalog-teaser--compact { padding-block: 40px 44px; }
.catalog-teaser-lede {
  color: var(--muted); font-size: 14px; line-height: 1.55;
  max-width: 520px; margin: 6px auto 20px;
}
.catalog-teaser-grid--compact {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  max-width: 720px;
  gap: 10px;
}
.catalog-teaser-grid--compact figure {
  padding: 8px 6px 10px;
  gap: 6px;
}
.catalog-teaser-grid--compact img {
  max-width: 72px;
}
.catalog-teaser-grid--compact figcaption {
  font-size: 11px;
}
.catalog-teaser-grid--compact p { display: none; }
.catalog-teaser-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  max-width: 920px; margin: 0 auto;
}
.catalog-teaser-grid figure {
  margin: 0; display: flex; flex-direction: column;
  align-items: center; gap: 8px;
  padding: 10px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 14px;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.catalog-teaser-grid figure:hover {
  transform: translateY(-2px);
  border-color: rgba(79, 140, 255, 0.45);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}
.catalog-teaser-grid img {
  width: 100%; max-width: 120px;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  display: block; object-fit: cover;
  background: #F4ECD8;
}
.catalog-teaser-grid figcaption {
  font-size: 12px; font-weight: 600;
  color: var(--text);
}
.catalog-teaser-grid p {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

/* Steps */
.landing-steps .section-eyebrow {
  display: block;
  text-align: center;
  margin-bottom: 18px;
}
.steps-grid {
    list-style: none; padding: 0; margin: 8px 0 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px; counter-reset: step;
}
.steps-grid li {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 22px 22px 20px;
    position: relative;
}
.step-number {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px;
    background: var(--accent-soft); color: var(--accent);
    font-weight: 700; font-size: 13px; margin-bottom: 12px;
}
.steps-grid h3 { margin: 0 0 6px; font-size: 15px; }
.steps-grid p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

/* Features alternating rows */
.features-header { text-align: center; max-width: 600px; margin: 0 auto 36px; }
.features-header h2 { font-size: 28px; margin: 6px 0 10px; letter-spacing: -0.02em; }
.features-header p { color: var(--muted); font-size: 15px; line-height: 1.55; margin: 0; }

.feature-row {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 380px); gap: 36px;
    align-items: center;
    padding: 22px 0;
}
.feature-row:last-child { padding-bottom: 0; }
.feature-row.reverse { grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); }
.feature-row.reverse .feature-row-text { order: 2; }
.feature-row-text h3 { font-size: 24px; margin: 0 0 12px; letter-spacing: -0.01em; }
.feature-row-text p { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0; }
.feature-row-art {
    width: 100%;
    border-radius: var(--radius); overflow: hidden;
    background: var(--panel); border: 1px solid var(--border);
    box-shadow: 0 12px 30px rgba(0,0,0,0.35);
    justify-self: end;
}
.feature-row.reverse .feature-row-art { justify-self: start; }
.feature-row-art img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
}

/* Compact feature grid */
.landing-grid { padding: 60px 0 40px; text-align: center; }
.landing-grid .section-eyebrow { display: block; }
.feature-grid {
    margin-top: 8px;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px; text-align: start;
}
.feature {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px;
    transition: border-color .15s ease, transform .15s ease;
}
.feature:hover { border-color: var(--accent); transform: translateY(-2px); }
.feature h3 { margin: 0 0 8px; font-size: 15px; }
.feature p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* RU-гайды — одна строка ссылок, без тяжёлой секции */
.landing-guides-compact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  margin: 0 auto 8px;
  padding: 14px 16px;
  max-width: 880px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.landing-guides-compact-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.landing-guides-compact a {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}
.landing-guides-compact a:hover { color: var(--accent); }

/* FAQ */
.landing-faq { max-width: 720px; margin: 0 auto; text-align: center; }
.faq-grid { display: grid; gap: 10px; text-align: start; margin-top: 8px; }
.faq-grid a { color: var(--accent); font-weight: 600; }
.faq-grid details {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px 18px;
}
.faq-grid details[open] { border-color: var(--accent); }
.faq-grid summary {
    cursor: pointer; font-weight: 600; font-size: 14px;
    list-style: none; display: flex; align-items: center; justify-content: space-between;
}
.faq-grid summary::-webkit-details-marker { display: none; }
.faq-grid summary::after {
    content: '+'; font-size: 18px; color: var(--muted);
    transition: transform .15s ease;
}
.faq-grid details[open] summary::after { content: '−'; color: var(--accent); }
.faq-grid p { margin: 10px 0 2px; color: var(--muted); font-size: 13px; line-height: 1.55; }

/* CTA band */
.landing-cta-band {
    margin-top: 28px; padding: 48px 24px; text-align: center;
    background:
      radial-gradient(700px 280px at 50% 0%, rgba(79, 140, 255, 0.16), transparent 70%),
      linear-gradient(180deg, var(--panel), var(--panel-2));
    border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 0 0 1px rgba(79,140,255,0.06), 0 20px 50px rgba(0,0,0,0.3);
}
.cta-band-eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.landing-cta-band h2 { font-size: 28px; margin: 0 0 10px; letter-spacing: -0.01em; }
.landing-cta-band p { color: var(--muted); max-width: 520px; margin: 0 auto 22px; font-size: 15px; }

.app-page {
    max-width: 1120px;
    margin: 0 auto;
    padding: 42px 28px 80px;
}
.app-page-narrow { max-width: 760px; }
.app-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--border-soft);
}
.app-page-header h1 {
    margin: 0 0 8px;
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -0.02em;
}
.app-page-header p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}
.app-page-kicker {
    margin: 0 0 8px !important;
    color: var(--accent) !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px !important;
    font-weight: 700;
}

.projects-list { padding: 28px 0 0; }
.projects-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    color: var(--muted);
    font-size: 12px;
}
.project-cards { list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.project-card {
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.project-card a { display: block; color: inherit; text-decoration: none; }
.project-card:hover {
    border-color: rgba(79, 140, 255, 0.42);
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(0,0,0,0.24);
}
.project-card a:hover { background: var(--panel-2); }
.project-card a:hover .project-card-thumb { background: var(--panel-2); }
.project-card-thumb {
    aspect-ratio: 16 / 10; background: var(--panel-2);
    display: flex; align-items: center; justify-content: center;
    border-bottom: 1px solid var(--border-soft); overflow: hidden;
}
.project-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.project-card-thumb img + .project-card-thumb-empty { display: none; }
.project-card-thumb.is-missing-preview img { display: none; }
.project-card-thumb.is-missing-preview img + .project-card-thumb-empty { display: inline-flex; }
.project-card-thumb-empty { color: var(--muted); opacity: 0.5; }
.project-card-body { padding: 14px 18px 16px; }
.project-card h3 { margin: 0 0 4px; font-size: 15px; }
.project-card-actions {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    z-index: 2;
    display: flex;
    gap: 8px;
}
.project-card-actions form { margin: 0; }
.project-card-action {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.74);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(0,0,0,0.22);
}
.project-card-action:hover { background: rgba(37, 99, 235, 0.92); }
.project-card-action.danger:hover {
    background: color-mix(in srgb, var(--danger) 88%, #000 12%);
}
.empty-state {
    max-width: 520px;
    margin: 36px auto 0;
    padding: 36px 28px;
    text-align: center;
    background: var(--panel);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}
.empty-state-icon {
    width: 68px;
    height: 68px;
    margin: 0 auto 18px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: var(--accent);
    background: var(--accent-soft);
}
.empty-state h2 {
    margin: 0 0 8px;
    font-size: 20px;
}
.empty-state p {
    margin: 0 auto 22px;
    max-width: 390px;
    color: var(--muted);
    line-height: 1.55;
    font-size: 14px;
}

.site-footer {
    border-top: 1px solid var(--border-soft); margin-top: 60px;
    padding: 24px 0; color: var(--muted); font-size: 12px;
}
.site-footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.site-footer nav { display: flex; gap: 16px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--text); }
.center { text-align: center; }

/* ============================================================
   Editor: share / versions dialogs + save-status in topbar
   ============================================================ */
#save-status.error { color: var(--danger); }
.mobile-save-status.error {
    color: #fff;
    background: color-mix(in srgb, var(--danger) 92%, #000 8%);
    border-color: color-mix(in srgb, var(--danger) 70%, #fff 30%);
}
/* Share-диалог: каждая ссылка — компактная карточка из двух строк.
   Сверху URL в readonly-input + icon-кнопка Copy. Снизу permission tag
   + icon-кнопка Revoke. URL виден целиком (клик = select all), а
   action-кнопки — иконками без текста, чтобы карточка оставалась
   компактной и читалась как «копия + удалить». */
.share-list {
    display: flex; flex-direction: column;
    margin: 12px 0 4px;
    max-height: 280px; overflow-y: auto;
}
.share-list-empty {
    color: var(--muted); font-size: 13px;
    padding: 16px; text-align: center;
    border: 1px dashed var(--border); border-radius: var(--radius-sm);
}
/* Плоский список без карточек — экономим горизонтальное место для URL.
   Каждая ссылка занимает 2 ряда (URL+Copy / Permission+Revoke), строки
   разделены тонкой линией. */
/* Copy слева от URL, Trash — внизу-справа: разносим action-кнопки по
   диагонали, чтобы случайный мисклик копированием не попал в удаление
   (раньше обе были справа, вертикально друг под другом). */
.share-row {
    display: grid;
    grid-template-areas: "copy url" "meta meta";
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-soft, var(--border));
}
.share-row:first-child { padding-top: 4px; }
.share-row:last-child { border-bottom: none; padding-bottom: 4px; }
.share-row-url { grid-area: url; min-width: 0; }
.share-row-url input {
    width: 100%; box-sizing: border-box;
    background: var(--panel); color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0 10px; height: 36px;
    font: 12px ui-monospace, Menlo, monospace;
    cursor: text; text-overflow: ellipsis;
}
.share-row-url input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}
.share-row-copy { grid-area: copy; }
.share-row-meta {
    grid-area: meta;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.share-tag {
    background: var(--accent-soft); color: var(--accent);
    padding: 3px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 500;
}
.share-tag--edit { background: rgba(74, 222, 128, 0.16); color: #16a34a; }
.share-icon-btn {
    flex-shrink: 0;
    border: 1px solid var(--border); background: var(--panel);
    color: var(--muted);
    padding: 0; width: 36px; height: 36px;
    border-radius: var(--radius-sm); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s, border-color .15s;
}
.share-icon-btn:hover { background: var(--btn-ghost-hover, rgba(127,127,127,0.08)); color: var(--text); border-color: var(--accent); }
.share-icon-btn--danger { border: none; background: transparent; }
.share-icon-btn--danger:hover { background: rgba(239, 68, 68, 0.12); color: var(--danger); }

.share-new {
    border-top: 1px solid var(--border);
    padding-top: 14px;
    margin-top: 10px;
    display: flex; gap: 8px; align-items: stretch;
}
.share-new select {
    flex: 1; min-width: 0;
    color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 8px 32px 8px 12px; font-size: 13px;
    /* Кастомный chevron: нативная стрелка прижата к правому краю и
       выглядит обрезанной. Заменяем на SVG, размещаем с отступом 12px. */
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background: var(--panel) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 12px center / 14px;
}
.share-new .btn { flex-shrink: 0; }

.dialog--share .dialog-actions { margin-top: 24px; }

/* ============================================================
   Editor: read-only mode (получатель view-only share-ссылки)
   ============================================================
   Прячем инструменты редактирования: sidebar, undo/redo,
   save, versions, share, import. More оставляем как меню просмотра:
   экспорт/печать должны быть доступны по share-ссылке, но не шуметь
   отдельными кнопками в topbar. Видимость слоёв для читателя вынесена
   отдельной кнопкой в topbar — так вход не теряется вместе с toolbox. */
body.editor-readonly .sidebar,
body.editor-readonly #btn-undo,
body.editor-readonly #btn-redo,
body.editor-readonly #btn-save,
body.editor-readonly #btn-versions,
body.editor-readonly #btn-share,
body.editor-readonly .topbar-actions > label,
body.editor-readonly .topbar-actions > .divider,
body.editor-readonly .btn-inspector-open {
    display: none !important;
}
body.editor-readonly .inspector:not(.inspector-mode-menu):not(.inspector-mode-layers) {
    display: none !important;
}

/* "View only" бейдж в топбаре, чтобы пользователь сразу понял
   режим. Появляется только в editor-readonly; локализуется
   через data-* + content из i18n catalog не получится — используем
   аттрибут aria-label через ::after pseudo + зашитую en-строку,
   локализованная версия рендерится в editor.html условно (см. ниже). */
body.editor-readonly .editor-readonly-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent);
    font-size: 12px; font-weight: 500;
    margin-left: 12px;
}
body.editor-readonly .editor-readonly-badge svg { flex-shrink: 0; }
body:not(.editor-readonly) .editor-readonly-badge { display: none; }

/* gardmi-лого внутри topbar-actions card у читателя view-only ссылки —
   клик ведёт на лендинг. Просто inline-flex без отдельного фона:
   родительский topbar-actions уже даёт card-стилизацию. */
.editor-readonly-brand {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--text); text-decoration: none;
    font-weight: 600; font-size: 14px;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    transition: background .15s;
    flex-shrink: 0;
}
.editor-readonly-brand:hover { background: var(--btn-ghost-hover, rgba(127,127,127,0.08)); }
.editor-readonly-brand img { display: block; border-radius: 6px; flex-shrink: 0; }
/* Иконка темы: в light/dark показываем «куда переключим». В dark-теме видна
   sun-иконка (= кликни чтобы получить light), и наоборот. */
#btn-theme-toggle .icon-when-light { display: none; }
#btn-theme-toggle .icon-when-dark { display: block; }
:root[data-theme="light"] #btn-theme-toggle .icon-when-light { display: block; }
:root[data-theme="light"] #btn-theme-toggle .icon-when-dark { display: none; }
:root[data-theme="paper"] #btn-theme-toggle .icon-when-light { display: block; }
:root[data-theme="paper"] #btn-theme-toggle .icon-when-dark { display: none; }

/* В readonly-режиме все элементы (brand + badge + theme toggle + More) живут
   в одной topbar-actions card. Сдвигаем её к левому краю — бренд хочет
   быть слева, как привычно (Figma/Notion view-only). */
body.editor-readonly .topbar > .topbar-actions {
    margin-inline-start: 0;
    margin-inline-end: auto;
    padding: 3px 6px;
}
body.editor-readonly #btn-view-layers.btn.icon-only,
body.editor-readonly #btn-theme-toggle.btn.icon-only {
    min-width: 32px; min-height: 32px;
    padding: 0;
}
.versions-list { display: flex; flex-direction: column; gap: 6px; max-height: 400px; overflow-y: auto; margin: 16px 0; }
.version-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--panel-2); font-size: 12px;
}
.version-row .tag { font-size: 10px; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.version-row .tag.manual { background: rgba(51, 192, 122, 0.2); color: var(--ok); }
.version-row .when { color: var(--muted); }
.version-row .comment { color: var(--text); flex: 1; }
.btn.sm { padding: 4px 10px; font-size: 11px; }

/* Responsive landing */
@media (max-width: 960px) {
    .feature-row { grid-template-columns: 1fr; gap: 22px; padding: 34px 0; text-align: center; }
    .feature-row.reverse { grid-template-columns: 1fr; }
    .feature-row.reverse .feature-row-text { order: 0; }
    .feature-row-text { max-width: 680px; margin: 0 auto; text-align: center; }
    .feature-row-text h3,
    .feature-row-text p { text-align: center; }
    .feature-row-art,
    .feature-row.reverse .feature-row-art { justify-self: center; max-width: 420px; }
}
@media (max-width: 960px) {
  .catalog-teaser-grid--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
  .landing-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-presets,
  .landing-steps,
  .landing-features,
  .landing-catalog-teaser,
  .landing-faq { padding-block: 36px; }
}
@media (max-width: 720px) {
    .site-topbar { padding: 12px 14px; gap: 10px; }
    .site-brand-sub { display: none; }
    .site-nav { gap: 10px; }
    .site-nav-link { display: none; }
    .landing-hero { padding: 32px 0 16px; text-align: center; }
    .landing-hero h1 { font-size: 34px; }
    .landing-lede { font-size: 16px; margin-left: auto; margin-right: auto; }
    .landing-cta { justify-content: center; }
    .hero-points { justify-content: center; }
    .hero-logo { margin-left: auto; margin-right: auto; }
    .hero-shot,
    .hero-shot--side { margin-top: 36px; }
    .landing-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .catalog-teaser-grid--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .landing-guides-compact { flex-direction: column; align-items: stretch; text-align: center; }
    .landing-presets { padding: 38px 0 18px; }
    .landing-presets-header h2 { font-size: 24px; }
    .preset-card-grid { grid-template-columns: 1fr; }
    .preset-card img { aspect-ratio: 16 / 10; }
    .features-header h2 { font-size: 24px; }
    .feature-row-text h3 { font-size: 20px; }
    .landing-cta-band { padding: 40px 18px; }
    .landing-cta-band h2 { font-size: 22px; }
    .landing { padding: 16px 14px 60px; }
    /* На mobile лого уменьшаем, чтобы не съедал пол-экрана. */
    .hero-logo { width: 84px; height: 84px; border-radius: 20px; margin-bottom: 18px; }
    /* На mobile catalog-teaser — 4 в ряд, иконки чуть меньше. */
    .catalog-teaser-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .catalog-teaser-grid figure { padding: 6px; }
    .catalog-teaser-grid figcaption { font-size: 11px; }
    .catalog-teaser-grid p { display: none; }
    .app-page { padding: 28px 16px 60px; }
    .app-page-header { align-items: flex-start; flex-direction: column; gap: 16px; }
    .app-page-header h1 { font-size: 28px; }
    .app-page-header .btn { width: 100%; justify-content: center; }
    .projects-toolbar { align-items: flex-start; flex-direction: column; gap: 4px; }
}
@media (max-width: 480px) {
    /* На совсем узких экранах catalog-teaser ужимается до 3 в ряд. */
    .catalog-teaser-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   Auth / Settings
   ============================================================ */
body.page-auth { display: block; height: auto; min-height: 100vh; overflow: visible; user-select: text; }

.auth-wrap {
    max-width: 460px; margin: 60px auto; padding: 0 20px;
}
.auth-card {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 32px;
}
.auth-card h1 { margin: 0 0 10px; font-size: 22px; }
.auth-card p.muted { color: var(--muted); margin: 0 0 20px; }
.auth-card p.small { font-size: 12px; margin-top: 16px; }
.auth-card form { display: flex; flex-direction: column; gap: 14px; }
.auth-card label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.auth-card input[type="email"],
.auth-card input[type="text"] {
    background: var(--panel-2); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 10px 12px; font-size: 14px; font-family: inherit;
}
.auth-card input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }

.alert {
    padding: 10px 14px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--panel-2);
    font-size: 13px;
}
.alert.error { border-color: rgba(239, 75, 107, 0.4); color: var(--danger); }
.alert.success { border-color: rgba(51, 192, 122, 0.4); color: var(--ok); }

.settings-section {
    max-width: 640px; margin: 24px auto; padding: 24px;
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
}
.settings-section h2 { margin: 0 0 14px; font-size: 16px; }
.settings-section.danger { border-color: rgba(239, 75, 107, 0.3); }
.settings-form { display: flex; flex-direction: column; gap: 12px; }
.settings-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.settings-form input,
.settings-form input[disabled] {
    background: var(--panel-2); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 10px 12px; font-size: 14px; font-family: inherit;
}
.settings-form input[disabled] { color: var(--muted); }
.settings-form .btn { align-self: start; }

.btn.danger {
    background: transparent; color: var(--danger);
    border: 1px solid rgba(239, 75, 107, 0.4);
}
.btn.danger:hover { background: rgba(239, 75, 107, 0.1); }

.checkbox { flex-direction: row; align-items: center; gap: 10px; }

/* Account dropdown in topbar */
.site-account { position: relative; }
.site-account summary {
    list-style: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.site-account summary::-webkit-details-marker { display: none; }
.site-account-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--accent); color: white;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 13px;
}
.site-account-menu {
    position: absolute; top: calc(100% + 6px); right: 0;
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow);
    min-width: 220px; padding: 10px; z-index: 30;
    display: flex; flex-direction: column; gap: 2px;
}
[dir="rtl"] .site-account-menu { right: auto; left: 0; }
.site-account-email {
    padding: 6px 10px; color: var(--muted); font-size: 12px;
    border-bottom: 1px solid var(--border-soft); margin-bottom: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.site-account-menu a {
    padding: 8px 10px; border-radius: var(--radius-sm);
    color: var(--text); text-decoration: none; font-size: 13px;
}
.site-account-menu a:hover { background: var(--panel-2); }

/* ---------- Background rotation card (в правой панели Properties) ----------
   Видна только когда фон загружен. Layout вертикальный — ширины инспектора
   (~300px) хватает с запасом для горизонтального ряда кнопок. */
.bg-card {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--panel-2);
    display: flex; flex-direction: column; gap: 8px;
}
.bg-card-title {
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--muted);
}
/* Download-секция в инспекторе — 3 кнопки формата в один ряд */
.download-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;
    margin-bottom: 10px;
}
.download-grid .btn {
    padding: 8px 4px; font-size: 12px;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    min-height: 36px;
}
.download-grid .btn svg { flex-shrink: 0; }

.bg-row {
    display: grid; grid-template-columns: auto 1fr auto; gap: 6px;
    align-items: center;
}
.inspector-mode-scene .bg-row {
    gap: 8px;
    margin-bottom: 10px;
}
.inspector-mode-scene .bg-row .btn.sm {
    min-height: 38px;
    padding: 8px 10px;
    font-size: 12px;
}
.bg-row .btn.sm {
    padding: 6px 10px; font-size: 11px; white-space: nowrap;
}
.bg-card-hint {
    font-size: 11px; color: #a3a9ba; /* WCAG AA — поднят с var(--muted) */
    line-height: 1.4;
}
.bg-rot-input {
    position: relative;
    display: flex; align-items: center;
}
.bg-rot-input input {
    width: 100%;
    background: var(--panel); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 6px 18px 6px 8px; font-size: 12px; font-family: inherit;
    text-align: center;
    -moz-appearance: textfield;
}
.inspector-mode-scene .bg-rot-input input {
    min-height: 38px;
    font-size: 13px;
}
.bg-rot-input input::-webkit-outer-spin-button,
.bg-rot-input input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}
.bg-rot-input span {
    position: absolute; right: 7px;
    color: var(--muted); font-size: 11px; pointer-events: none;
}
.align-by-line-btn {
    display: inline-flex; align-items: center; gap: 8px;
    justify-content: flex-start;
    padding: 7px 10px; font-size: 12px;
}
.inspector-mode-scene .align-by-line-btn,
.image-panel .align-by-line-btn {
    width: 100%;
    min-height: 38px;
    justify-content: center;
}
.align-by-line-btn.active {
    border-color: var(--accent); color: var(--accent);
}

/* === SEO-посадочная /septik/ + статейные блоки. =========================
   Статья остаётся читаемой как гайд, но визуально живёт внутри продукта:
   topbar, тёмные панели, реальные gardmi-иллюстрации вместо самостоятельных
   SVG-схем. Так поисковый трафик быстрее понимает, что это не просто текст,
   а вход в инструмент проверки участка. */
.feature-row-link {
    margin-top: 14px;
    font-size: 14px;
}
.feature-row-link a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    padding-bottom: 1px;
}
.feature-row-link a:hover {
    border-bottom-color: var(--accent);
}

body.page-septic,
body.page-building-notice,
body.page-blog-article,
body.page-blog-index {
    background: var(--bg);
}
body.page-septic .article,
body.page-building-notice .article,
body.page-blog-article .article {
    max-width: 1120px;
    margin: 0 auto;
    padding: 42px 28px 72px;
}
.article-inner > * + * { margin-top: 34px; }
.article-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 44px;
    align-items: center;
    padding: 42px 0 20px;
}
.article-hero-copy { min-width: 0; }
.article-eyebrow {
    color: var(--accent);
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin: 0 0 12px;
}
.article-hero h1 {
    font-size: 48px;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0 0 16px;
}
.article-lede {
    font-size: 18px;
    line-height: 1.55;
    color: var(--muted);
    margin: 0 0 20px;
    max-width: 720px;
}
.article-cta { margin-top: 16px; }
.article-hero-art {
    margin: 0;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--panel);
    box-shadow: 0 18px 46px rgba(0,0,0,0.34);
}
.article-hero-art img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
    object-position: center;
}
.article-hero-art figcaption {
    padding: 12px 14px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
    border-top: 1px solid var(--border-soft);
}
.article-workflow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.article-workflow div {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.article-workflow span {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 700;
}
.article-workflow p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}
.article-quick {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.article-quick div {
    padding: 18px;
    background: linear-gradient(180deg, var(--panel), var(--panel-2));
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.article-quick span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 6px;
}
.article-quick strong {
    display: block;
    font-size: 30px;
    line-height: 1;
    color: var(--text);
}
.article-quick p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.4;
}
.article-toc {
    position: sticky;
    top: 72px;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(10px);
}
.article-toc a {
    color: var(--text);
    text-decoration: none;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 13px;
}
.article-toc a:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.article-section h2 {
    font-size: 28px;
    line-height: 1.25;
    margin: 0 0 16px;
    letter-spacing: -0.01em;
}
.article-section p {
    font-size: 16px;
    line-height: 1.65;
    margin: 0 0 14px;
}
.article-table-wrap {
    overflow-x: auto;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.article-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    margin: 0;
}
.article-table th,
.article-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
}
.article-table tr:last-child td { border-bottom: none; }
.article-table th {
    background: var(--panel-2);
    font-weight: 600;
}
.article-note {
    font-size: 13px;
    color: var(--muted);
    padding: 12px 14px 14px;
    margin: 0;
    border-top: 1px solid var(--border-soft);
}
.article-list {
    font-size: 16px;
    line-height: 1.65;
    /* logical property — для RTL автоматически становится padding-right.
       Сейчас септик RU-only, но если когда-нибудь сделаем AR-гайд по нормам,
       список не нужно будет переписывать. */
    padding-inline-start: 22px;
}
.article-list li + li { margin-top: 8px; }
.article-diagram {
    margin: 18px auto 0;
    max-width: 780px;
    overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.article-diagram img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    height: auto;
    object-fit: cover;
    object-position: center;
}
.article-diagram figcaption {
    font-size: 13px;
    color: var(--muted);
    text-align: center;
    margin: 0;
    padding: 12px 14px;
    border-top: 1px solid var(--border-soft);
}
.notice-preset {
    max-width: 860px;
    margin: 0 auto;
    padding: 34px 18px 70px;
}
.notice-preset-hero {
    text-align: center;
}
.notice-preset-hero h1 {
    font-size: 38px;
    line-height: 1.12;
    margin: 0 0 24px;
}
.notice-preset-form {
    text-align: start;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
}
.notice-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.notice-field {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 13px;
}
.notice-field-wide { grid-column: 1 / -1; }
.notice-field input,
.notice-field select {
    min-height: 44px;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel-2);
    color: var(--text);
    padding: 0 12px;
    font: inherit;
}
.notice-field input::placeholder { color: color-mix(in srgb, var(--muted) 68%, transparent); }
.notice-prompt-suggestions {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 14px 0 2px;
}
.notice-prompt-suggestions button {
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
    color: var(--text);
    padding: 7px 11px;
    cursor: pointer;
}
.notice-submit {
    display: flex;
    justify-content: center;
    width: min(100%, 360px);
    margin: 16px auto 0;
}
.notice-help {
    max-width: 660px;
    margin: 16px auto 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
}
.notice-examples {
    margin-top: 48px;
    text-align: center;
}
.notice-examples h2,
.notice-content h2 {
    font-size: 24px;
    line-height: 1.25;
    margin: 20px 0 18px;
}
.notice-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.notice-example-card {
    margin: 0;
    overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.notice-example-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
}
.notice-example-card figcaption {
    min-height: 70px;
    padding: 10px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
}
.notice-example-card--wide {
    max-width: 520px;
    margin-inline: auto;
}
.notice-example-card--wide img {
    aspect-ratio: 16 / 10;
}
.notice-content {
    margin-top: 52px;
    color: var(--text);
}
.notice-content p {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.65;
}
.notice-content h3 {
    font-size: 20px;
    line-height: 1.3;
    margin: 38px 0 16px;
}
.notice-content h4 {
    font-size: 16px;
    margin: 0 0 8px;
}
.notice-seo-image {
    display: block;
    width: 160px;
    height: 160px;
    object-fit: cover;
    border-radius: var(--radius);
    margin: 24px 0 34px;
    border: 1px solid var(--border);
}
.notice-feature-grid,
.notice-review-grid,
.notice-use-cases {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.notice-feature-grid div,
.notice-review-grid article,
.notice-use-cases div,
.notice-tip-box {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
}
.notice-feature-grid p,
.notice-review-grid p,
.notice-use-cases p {
    margin: 0;
    font-size: 14px;
}
.notice-list {
    padding-inline-start: 22px;
    color: var(--muted);
    line-height: 1.65;
}
.notice-list li + li { margin-top: 8px; }
.notice-review-grid article div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
}
.notice-review-grid span { color: #f8c14a; white-space: nowrap; }
.notice-tip-box ul {
    margin: 0;
    padding-inline-start: 20px;
    color: var(--muted);
    line-height: 1.6;
}
.notice-tip-box li + li { margin-top: 8px; }
.notice-recommendations {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.notice-recommendations a {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: stretch;
    overflow: hidden;
    color: var(--text);
    text-decoration: none;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-height: 92px;
}
.notice-recommendations img {
    display: block;
    width: 92px;
    height: 100%;
    min-height: 92px;
    object-fit: cover;
}
.notice-recommendations span {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.35;
}
.notice-recommendations strong {
    font-size: 13px;
    line-height: 1.25;
}
.notice-recommendations small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}
.notice-faq {
    display: grid;
    gap: 14px;
}
.notice-faq div {
    border-bottom: 1px solid var(--border-soft);
    padding-bottom: 14px;
}
.notice-faq p {
    margin: 0;
    font-size: 14px;
}
body.page-septic .site-footer,
body.page-building-notice .site-footer,
body.page-blog-article .site-footer,
body.page-blog-index .site-footer { max-width: none; }

.blog-index {
    max-width: 1120px;
    margin: 0 auto;
    padding: 54px 28px 76px;
}
.blog-index-hero {
    max-width: 760px;
    margin-bottom: 34px;
}
.blog-index-hero h1 {
    font-size: 48px;
    line-height: 1.05;
    margin: 0 0 14px;
}
.blog-index-hero p {
    margin: 0;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.55;
}
.blog-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}
.blog-card {
    display: grid;
    grid-template-columns: minmax(260px, 0.45fr) minmax(0, 1fr);
    align-items: stretch;
    overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.blog-card img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 240px;
    object-fit: cover;
}
.blog-card div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px;
}
.blog-card span {
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.blog-card h2 {
    font-size: 22px;
    line-height: 1.25;
    margin: 8px 0 10px;
}
.blog-card h2 a {
    color: var(--text);
    text-decoration: none;
}
.blog-card h2 a:hover { color: var(--accent); }
.blog-card p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
}
@media (max-width: 640px) {
    body.page-septic .article,
    body.page-building-notice .article,
    body.page-blog-article .article { padding: 28px 16px 54px; }
    .article-hero { grid-template-columns: 1fr; gap: 22px; padding: 18px 0 8px; }
    .article-hero h1 { font-size: 34px; }
    .article-lede { font-size: 16px; }
    .article-workflow { grid-template-columns: 1fr; }
    .article-quick { grid-template-columns: 1fr; }
    .article-toc { position: static; padding: 0; background: transparent; backdrop-filter: none; }
    .article-section h2 { font-size: 22px; }
    .notice-preset { padding: 26px 14px 54px; }
    .notice-preset-hero h1 { font-size: 30px; }
    .notice-preset-form { padding: 14px; }
    .notice-form-grid,
    .notice-card-grid,
    .notice-feature-grid,
    .notice-review-grid,
    .notice-use-cases,
    .notice-recommendations { grid-template-columns: 1fr; }
    .notice-example-card figcaption { min-height: 0; }
    .blog-index { padding: 34px 16px 56px; }
    .blog-index-hero h1 { font-size: 34px; }
    .blog-index-hero p { font-size: 16px; }
    .blog-card { grid-template-columns: 1fr; }
  .blog-card img {
      aspect-ratio: 16 / 9;
      height: auto;
      min-height: 0;
  }
  .blog-card div { padding: 18px; }
}

/* ---------- What's new (changelog) ----------
   Список продуктовых апдейтов. Стиль — карточки с цветным badge
   (New/Improved/Fix), датой, заголовком h2 и описанием. Свежие записи
   сверху. Подражает aisongs/templates/whats_new.html по структуре, но в
   тёмной палитре gardmi.                                                */
body.page-whats-new {
    background: var(--bg);
    color: var(--text);
}
.whats-new {
    min-height: calc(100vh - 80px);
    padding: 48px 24px 72px;
}
.whats-new-inner {
    max-width: 720px;
    margin: 0 auto;
}
.whats-new h1 {
    font-size: 36px;
    line-height: 1.15;
    font-weight: 700;
    margin: 0 0 8px;
}
.whats-new-lead {
    font-size: 15px;
    color: var(--muted);
    margin: 0 0 32px;
}
.changelog {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.changelog-item {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 22px;
}
.changelog-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.changelog-date {
    font-size: 12px;
    color: var(--muted);
}
.changelog-item .badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
}
.badge-new {
    background: rgba(34, 197, 94, 0.18);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.35);
}
.badge-improved {
    background: rgba(59, 130, 246, 0.18);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.35);
}
.badge-fix {
    background: rgba(251, 146, 60, 0.18);
    color: #fb923c;
    border: 1px solid rgba(251, 146, 60, 0.35);
}
.changelog-item h2 {
    font-size: 19px;
    line-height: 1.3;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--text);
}
.changelog-item p {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text);
    margin: 0 0 12px;
}
.changelog-points {
    margin: 0 0 14px;
    padding-left: 20px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.55;
}
.changelog-points li { margin-bottom: 4px; }
.changelog-item .btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--accent);
    color: #fff;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}
.changelog-item .btn-cta:hover { background: var(--accent-2, var(--accent)); }
@media (max-width: 640px) {
    .whats-new { padding: 32px 16px 48px; }
    .whats-new h1 { font-size: 28px; }
    .changelog-item { padding: 16px 16px; }
    .changelog-item h2 { font-size: 17px; }
}

/* ---------- Link card inspector ----------
   Canvas-карточка ссылки рисуется в Konva, а здесь только превью и действия
   в инспекторе. Важно не растягивать og:image до огромной высоты на мобиле:
   инспектор и так живёт в bottom-sheet и должен оставлять место для URL. */
.link-card-preview {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: var(--panel-2);
    border: 1px solid var(--border);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.link-card-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.link-card-preview-fallback {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: var(--accent);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 24px;
    text-transform: uppercase;
}
.inspector-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}
@media (max-width: 640px) {
    .inspector-actions { grid-template-columns: 1fr; }
}

/* ---------- Annotation style inspector ----------
   Карточки и коннекторы теперь ближе к досочным редакторам: быстрые свотчи,
   сегменты и слайдеры вместо длинных select'ов. */
.annotation-style-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 8px 0 14px;
}
.annotation-style-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.annotation-style-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}
.annotation-segmented {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    background: var(--panel-2);
    border-radius: 10px;
}
.annotation-segmented--align {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.annotation-style-btn {
    min-height: 36px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.annotation-style-btn:hover {
    background: var(--panel);
    border-color: var(--border);
}
.annotation-style-btn.is-active {
    background: var(--panel);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}
.annotation-line-sample {
    width: 44px;
    height: 0;
    border-top: 3px solid currentColor;
    display: block;
}
.annotation-line-sample--dotted { border-top-style: dotted; }
.annotation-line-sample--dashed { border-top-style: dashed; }
.annotation-line-sample--dashdot {
    border: 0;
    height: 3px;
    background: repeating-linear-gradient(90deg, currentColor 0 10px, transparent 10px 14px, currentColor 14px 17px, transparent 17px 22px);
}
.annotation-align-icon {
    width: 26px;
    height: 20px;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
}
.annotation-align-icon span {
    display: block;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}
.annotation-align-icon span:nth-child(1),
.annotation-align-icon span:nth-child(3) {
    width: 100%;
}
.annotation-align-icon span:nth-child(2) {
    width: 68%;
}
.annotation-align-icon span:nth-child(4) {
    width: 82%;
}
.annotation-align-icon--left {
    align-items: flex-start;
}
.annotation-align-icon--center {
    align-items: center;
}
.annotation-align-icon--right {
    align-items: flex-end;
}
.annotation-route-icon {
    position: relative;
    width: 44px;
    height: 22px;
    display: block;
}
.annotation-route-icon::before,
.annotation-route-icon::after {
    content: "";
    position: absolute;
    border-color: currentColor;
    border-style: solid;
}
.annotation-route-icon--straight::before {
    left: 4px;
    right: 4px;
    top: 10px;
    border-width: 0 0 3px;
}
.annotation-route-icon--elbow::before {
    left: 7px;
    top: 4px;
    width: 28px;
    height: 14px;
    border-width: 0 0 3px 3px;
}
.annotation-route-icon--rounded::before {
    left: 7px;
    top: 4px;
    width: 28px;
    height: 14px;
    border-width: 0 0 3px 3px;
    border-bottom-left-radius: 10px;
}
.annotation-route-icon--curved::before {
    left: 5px;
    right: 5px;
    top: 4px;
    height: 14px;
    border-width: 0 0 3px;
    border-radius: 0 0 50% 50%;
}
.annotation-range-control {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.annotation-range-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}
.annotation-range-head strong {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.annotation-range-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px;
    align-items: center;
    gap: 10px;
}
.annotation-range-row input[type="range"] {
    width: 100%;
    accent-color: var(--accent);
}
.annotation-range-row input[type="number"],
.annotation-font-row select {
    min-width: 0;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel-2);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    padding: 0 10px;
    box-sizing: border-box;
}
.annotation-font-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 8px;
}
.annotation-color-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}
.annotation-color-auto {
    width: 100%;
    min-height: 34px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel-2);
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}
.annotation-color-auto.is-active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--text);
}
.annotation-color-swatch {
    width: 100%;
    aspect-ratio: 1;
    min-height: 28px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    border-radius: 7px;
    background: var(--swatch-color);
    cursor: pointer;
    position: relative;
}
.annotation-color-swatch.is-active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.25);
}
.annotation-color-swatch.is-active::after {
    content: "";
    position: absolute;
    inset: 7px;
    border: 2px solid rgba(255,255,255,0.95);
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(15,23,42,0.18);
}
.annotation-custom-color {
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}
.annotation-custom-color input {
    width: 42px;
    height: 34px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
}
.annotation-toggle-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.annotation-toggle-row label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel-2);
    color: var(--text);
    font-size: 12px;
    font-weight: 750;
}