/* Холст (webapp/board.js). Цвета элементов — ключи палитры, здесь они под тему приложения: тёмная по умолчанию, светлая — .is-light (экспорт) и светлая тема. */
.leo-board {
  --lb-bg: #1b1c1f;
  --lb-dot: rgba(255, 255, 255, 0.09);
  --lb-panel: #26272b;
  --lb-panel-border: rgba(255, 255, 255, 0.08);
  --lb-text: #e8e9ec;
  --lb-muted: #9a9ca3;
  --lb-accent: #529ef4;
  --lb-accent-soft: rgba(82, 158, 244, 0.18);
  --lb-map-ink: #8a8d95;
  --lb-font: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
  --lb-ink-ink: #e8e9ec;
  --lb-ink-white: #ffffff;
  --lb-ink-gray: #a6a9b0;
  --lb-ink-red: #ff6b6b;
  --lb-ink-orange: #ffa94d;
  --lb-ink-yellow: #ffd43b;
  --lb-ink-lime: #a9e34b;
  --lb-ink-green: #51cf66;
  --lb-ink-teal: #38d9a9;
  --lb-ink-cyan: #3bc9db;
  --lb-ink-blue: #4dabf7;
  --lb-ink-indigo: #748ffc;
  --lb-ink-purple: #b197fc;
  --lb-ink-pink: #f783ac;
  --lb-ink-brown: #c9a27e;
  /* Фон блоков (таблица, оргкарточка, Гант) — по теме: светлый текст тёмной темы на нём читается. */
  --lb-block-bg: #2f3136;
  --lb-block-alt: #3a3c42;
  /* Заливки — одни и те же в обеих темах (как в светлой): доска у всех выглядит одинаково,
     текст в залитой фигуре сам берёт контрастный цвет (board.js autoTextColor). */
  --lb-fill-white: #ffffff;
  --lb-fill-gray: #f1f3f5;
  --lb-fill-red: #ffe3e3;
  --lb-fill-orange: #ffe8cc;
  --lb-fill-yellow: #fff3bf;
  --lb-fill-lime: #e9fac8;
  --lb-fill-green: #d3f9d8;
  --lb-fill-teal: #c3fae8;
  --lb-fill-cyan: #c5f6fa;
  --lb-fill-blue: #d0ebff;
  --lb-fill-indigo: #dbe4ff;
  --lb-fill-purple: #e5dbff;
  --lb-fill-pink: #ffdeeb;
  --lb-fill-brown: #efe3d6;
  --lb-sticky-yellow: #fff1a8;
  --lb-sticky-orange: #ffd5a8;
  --lb-sticky-pink: #ffc9de;
  --lb-sticky-green: #c6f0c0;
  --lb-sticky-blue: #c3e2ff;
  --lb-sticky-purple: #e1d3ff;
  --lb-sticky-gray: #e6e8eb;
  --lb-sticky-lime: #dcf5b0;
  --lb-sticky-teal: #b2f2e5;
  --lb-sticky-cyan: #b9eef7;
  --lb-sticky-indigo: #d2dbff;
  --lb-sticky-brown: #e8d8c6;
  position: relative;
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 320px;
  container-type: inline-size;
  overflow: hidden;
  background: var(--lb-bg);
  color: var(--lb-ink-ink);
  font-family: var(--lb-font);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.leo-board.is-light,
html[data-theme="light"] .leo-board {
  --lb-bg: #f7f7f8;
  --lb-dot: rgba(0, 0, 0, 0.12);
  --lb-panel: #ffffff;
  --lb-panel-border: rgba(0, 0, 0, 0.1);
  --lb-text: #1f2328;
  --lb-muted: #6b7280;
  --lb-ink-ink: #1f2937;
  --lb-ink-gray: #6b7280;
  --lb-ink-red: #e03131;
  --lb-ink-orange: #f08c00;
  --lb-ink-yellow: #f2c200;
  --lb-ink-green: #2f9e44;
  --lb-ink-blue: #1c7ed6;
  --lb-ink-purple: #7048e8;
  --lb-ink-pink: #d6336c;
  --lb-ink-lime: #66a80f;
  --lb-ink-teal: #0ca678;
  --lb-ink-cyan: #1098ad;
  --lb-ink-indigo: #4263eb;
  --lb-ink-brown: #8d6e4f;
  --lb-block-bg: #ffffff;
  --lb-block-alt: #f1f3f5;
  --lb-fill-white: #ffffff;
  --lb-fill-gray: #f1f3f5;
  --lb-fill-red: #ffe3e3;
  --lb-fill-orange: #ffe8cc;
  --lb-fill-yellow: #fff3bf;
  --lb-fill-green: #d3f9d8;
  --lb-fill-blue: #d0ebff;
  --lb-fill-purple: #e5dbff;
  --lb-fill-pink: #ffdeeb;
  --lb-fill-lime: #e9fac8;
  --lb-fill-teal: #c3fae8;
  --lb-fill-cyan: #c5f6fa;
  --lb-fill-indigo: #dbe4ff;
  --lb-fill-brown: #efe3d6;
}

/* Свайп двумя пальцами по трекпаду влево/вправо на доске — прокрутка холста, а не «страница назад»
   (жест браузера срабатывает на корневой прокрутке — у неё и отключаем, пока доска на странице). */
html:has(.leo-board),
html:has(.leo-board) body {
  overscroll-behavior-x: none;
}

.leo-board {
  overscroll-behavior: none;
}

.leo-board .hidden {
  display: none !important;
}

.lb-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  outline: none;
  touch-action: none;
  cursor: default;
}

.lb-stage.has-grid {
  background-image: radial-gradient(circle, var(--lb-dot) 1.1px, transparent 1.3px);
}

.lb-stage[data-tool="hand"],
.lb-stage.is-panning {
  cursor: grab;
}

.lb-stage[data-tool="text"] {
  cursor: text;
}

.lb-stage[data-tool="rect"],
.lb-stage[data-tool="diamond"],
.lb-stage[data-tool="ellipse"],
.lb-stage[data-tool="sticky"],
.lb-stage[data-tool="line"],
.lb-stage[data-tool="arrow"],
.lb-stage[data-tool="pen"],
.lb-stage[data-tool="frame"],
.lb-stage[data-tool="path"],
.lb-stage[data-tool="table"],
.lb-stage[data-tool="pill"],
.lb-stage[data-tool="rectSharp"],
.lb-stage[data-tool="cylinder"],
.lb-stage[data-tool="triangle"],
.lb-stage[data-tool="triangleDown"],
.lb-stage[data-tool="parallelogram"],
.lb-stage[data-tool="parallelogramL"] {
  cursor: crosshair;
}

.lb-world {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-origin: 0 0;
}

.lb-el {
  position: absolute;
  box-sizing: border-box;
  transform-origin: 50% 50%;
  pointer-events: none;
}

.lb-shape {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
  pointer-events: none;
}

.lb-shape .lb-hit {
  cursor: move;
}

.lb-stage:not([data-tool="select"]) .lb-shape .lb-hit {
  cursor: inherit;
}

.lb-t-sticky .lb-shape {
  filter: drop-shadow(0 2px 5px color-mix(in srgb, var(--shadow-color, #000) 22%, transparent));
}

.lb-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding: 8px 20px;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.3;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: center;
  pointer-events: none;
  outline: none;
  color: var(--lb-ink-ink);
}

.lb-t-diamond > .lb-text {
  padding: 8px 22%;
}

.lb-t-sticky > .lb-text {
  color: #1f2328;
  padding: 14px;
}

.lb-t-text > .lb-text {
  justify-content: flex-start;
  padding: 0;
  overflow: visible;
  bottom: auto;
  min-height: 100%;
}

.lb-t-text > .lb-text:empty::before {
  content: "Текст";
  color: var(--lb-muted);
}

.lb-el.is-editing > .lb-text {
  pointer-events: auto;
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
  overflow: visible;
}

.lb-el.is-editing.lb-t-sticky > .lb-text:empty::before,
.lb-el.is-editing.lb-t-rect > .lb-text:empty::before,
.lb-el.is-editing.lb-t-diamond > .lb-text:empty::before,
.lb-el.is-editing.lb-t-pill > .lb-text:empty::before,
.lb-el.is-editing.lb-t-cylinder > .lb-text:empty::before,
.lb-el.is-editing.lb-t-triangle > .lb-text:empty::before,
.lb-el.is-editing.lb-t-triangleDown > .lb-text:empty::before,
.lb-el.is-editing.lb-t-parallelogram > .lb-text:empty::before,
.lb-el.is-editing.lb-t-parallelogramL > .lb-text:empty::before,
.lb-el.is-editing.lb-t-ellipse > .lb-text:empty::before {
  content: "";
}

.lb-line-label {
  position: absolute;
  inset: auto;
  display: block;
  transform: translate(-50%, -50%);
  min-width: 8px;
  max-width: 240px;
  width: max-content;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--lb-bg);
  font-size: 14px;
}

/* Подпись стрелки можно тащить вдоль линии (кроме режима правки текста). */
.lb-el:not(.is-editing) > .lb-line-label:not(.is-empty) {
  pointer-events: auto;
  cursor: grab;
}

.lb-line-label.is-empty {
  display: none;
}

.lb-pen-live {
  opacity: 0.85;
}

/* ---- оверлей ---- */
.lb-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.lb-sel-box,
.lb-sel-group {
  fill: none;
  stroke: var(--lb-accent);
  stroke-width: 1.5;
}

.lb-sel-group {
  stroke-dasharray: 4 3;
}

.lb-sel-line {
  fill: none;
  stroke: var(--lb-accent);
  stroke-width: 6;
  stroke-opacity: 0.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lb-handle {
  fill: #fff;
  stroke: var(--lb-accent);
  stroke-width: 1.5;
  pointer-events: all;
  cursor: nwse-resize;
}

.lb-handle[data-h="n"],
.lb-handle[data-h="s"] {
  cursor: ns-resize;
}

.lb-handle[data-h="e"],
.lb-handle[data-h="w"] {
  cursor: ew-resize;
}

.lb-handle[data-h="ne"],
.lb-handle[data-h="sw"],
.lb-handle[data-h="gne"],
.lb-handle[data-h="gsw"] {
  cursor: nesw-resize;
}

.lb-handle.lb-rot {
  cursor: grab;
}

.lb-handle.lb-end,
.lb-handle.lb-bend {
  cursor: move;
}

.lb-handle.lb-bend {
  fill: var(--lb-accent);
  stroke: #fff;
}

/* Изломы стрелки: точка излома, вставка новой точки, отрезок ломаной. */
.lb-handle.lb-wp {
  fill: var(--lb-accent);
  stroke: #fff;
  cursor: move;
}

.lb-handle.lb-ins {
  fill: #fff;
  stroke: var(--lb-accent);
  opacity: 0.75;
  cursor: copy;
}

.lb-handle.lb-ins:hover {
  opacity: 1;
}

.lb-handle.lb-seg {
  fill: var(--lb-accent);
  stroke: #fff;
}

.lb-handle.lb-seg.is-h {
  cursor: ns-resize;
}

.lb-handle.lb-seg.is-v {
  cursor: ew-resize;
}

.lb-rot-stem {
  stroke: var(--lb-accent);
  stroke-width: 1;
}

.lb-connect {
  pointer-events: all;
  cursor: crosshair;
  opacity: 0.85;
}

.lb-connect circle {
  fill: var(--lb-accent);
  stroke: #fff;
  stroke-width: 1.5;
}

.lb-connect path {
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.lb-connect:hover {
  opacity: 1;
}

.lb-snap-box {
  fill: var(--lb-accent-soft);
  stroke: var(--lb-accent);
  stroke-width: 1.5;
}

.lb-snap-dot {
  fill: #fff;
  stroke: var(--lb-accent);
  stroke-width: 1.5;
}

.lb-snap-dot.is-on {
  fill: var(--lb-accent);
}

.lb-guide {
  stroke: #ff4d8d;
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

/* Макет: сплошная красная линия, как во Figma. */
.lb-guide.is-design {
  stroke: #f24822;
  stroke-dasharray: none;
}

.lb-marquee {
  fill: var(--lb-accent-soft);
  stroke: var(--lb-accent);
  stroke-width: 1;
}

.lb-cursor text {
  font-size: 12px;
  font-weight: 600;
  paint-order: stroke;
  stroke: var(--lb-bg);
  stroke-width: 3px;
}

/* ---- панели ---- */
.lb-tools,
.lb-history,
.lb-zoom,
.lb-props,
.lb-pop {
  position: absolute;
  z-index: 3;
  display: flex;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--lb-panel-border);
  border-radius: 12px;
  background: var(--lb-panel);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--shadow-color, #000) 28%, transparent);
  color: var(--lb-text);
}

.lb-tools {
  /* Как во Figma: инструменты — строкой снизу по центру, масштаб и режимы — справа вверху, слои — слева. */
  left: 50%;
  bottom: 12px;
  flex-direction: row;
  transform: translateX(-50%);
}

.lb-history {
  left: 12px;
  bottom: 12px;
}

.lb-zoom {
  right: 12px;
  top: 12px;
  align-items: center;
}

.lb-minimap {
  position: absolute;
  z-index: 3;
  right: 12px;
  bottom: 12px;
  width: 180px;
  height: 120px;
  border: 1px solid var(--lb-panel-border);
  border-radius: 10px;
  background: var(--lb-panel);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--shadow-color, #000) 22%, transparent);
  cursor: pointer;
  touch-action: none;
}

.lb-props {
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  align-items: center;
  flex-wrap: nowrap;
  max-width: calc(100% - 16px);
  overflow-x: auto;
  scrollbar-width: none;
}

.lb-props::-webkit-scrollbar {
  display: none;
}

.lb-pop {
  z-index: 4;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.lb-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.lb-btn:hover {
  background: rgba(127, 127, 127, 0.14);
}

.lb-btn.is-on {
  background: var(--lb-accent-soft);
  color: var(--lb-accent);
}

.lb-btn:disabled {
  opacity: 0.35;
  cursor: default;
  background: transparent;
}

.lb-pct {
  min-width: 52px;
  font-variant-numeric: tabular-nums;
}

.lb-font {
  min-width: 36px;
  font-weight: 600;
}

.lb-danger:hover {
  color: var(--lb-ink-red);
}

.lb-sep {
  flex: none;
  width: 1px;
  height: 22px;
  margin: 0 3px;
  background: var(--lb-panel-border);
}

.lb-swatch {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(127, 127, 127, 0.5);
  border-radius: 50%;
  background: var(--c);
}

.lb-swatch.is-ring {
  background: transparent;
  border: 4px solid var(--c);
  box-sizing: border-box;
}

.lb-swatch.is-none,
.lb-sw.is-none {
  background: linear-gradient(135deg, transparent 45%, var(--lb-ink-red) 45%, var(--lb-ink-red) 55%, transparent 55%);
}

.lb-swatch-a {
  font-size: 17px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lb-swatches {
  display: grid;
  grid-template-columns: repeat(5, 28px);
  gap: 6px;
  padding: 4px;
}

.lb-sw {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(127, 127, 127, 0.45);
  border-radius: 50%;
  background: var(--c);
  cursor: pointer;
}

.lb-sw:hover {
  outline: 2px solid var(--lb-accent);
  outline-offset: 1px;
}

.lb-row {
  display: flex;
  gap: 2px;
}

/* Набор фигур (панель инструментов и «Сменить фигуру»): сетка 3×3. */
.lb-shapes {
  display: grid;
  grid-template-columns: repeat(5, 36px);
  gap: 2px;
}

.lb-shape-tool {
  position: relative;
}

.lb-caret {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-bottom: 4px solid currentColor;
  opacity: 0.55;
}

.lb-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 200px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.lb-menu-item:hover {
  background: rgba(127, 127, 127, 0.14);
}

.lb-menu-item kbd {
  margin-left: auto;
  color: var(--lb-muted);
  font-family: inherit;
  font-size: 12px;
}

.lb-empty-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  max-width: 280px;
  transform: translate(-50%, -50%);
  color: var(--lb-muted);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
}

.leo-board.is-readonly .lb-shape .lb-hit {
  cursor: grab;
}

/* Узкая панель (телефон, правая колонка заметки) — инструменты внизу строкой. */
@container (max-width: 640px) {
  .lb-tools {
    left: 8px;
    right: 8px;
    top: auto;
    bottom: 8px;
    flex-direction: row;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    transform: none;
    scrollbar-width: none;
    /* Край растворяется — видно, что дальше есть ещё инструменты. */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }

  .lb-tools.is-scrolled-end {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .lb-tools::-webkit-scrollbar {
    display: none;
  }

  .lb-history {
    left: 8px;
    top: 8px;
    bottom: auto;
  }

  .lb-zoom {
    right: 8px;
    top: 8px;
    bottom: auto;
  }

  .lb-zoom .lb-map-btn,
  .lb-zoom [data-act="grid"] {
    display: none;
  }

  .lb-minimap {
    display: none;
  }

  .leo-board.is-readonly .lb-zoom {
    top: auto;
    bottom: 8px;
  }
}

/* Переход по ссылке на блок: блок мигает. */
.lb-el.is-flash {
  animation: lb-flash 1.5s ease-out;
}

@keyframes lb-flash {
  0%,
  40% {
    filter: drop-shadow(0 0 0 var(--lb-accent)) drop-shadow(0 0 10px var(--lb-accent));
  }
  100% {
    filter: none;
  }
}

/* Действия с блоками — как плашка выделения в заметке (styles.css .note-comment-bubble-wrap):
   ✨ ИИ фиолетовым, остальное — цветом текста, иконка 15px и подпись. */
.lb-pbtn.lb-nact-trigger {
  color: var(--violet-soft, #c4b5fd);
  background: color-mix(in srgb, var(--violet, #8b5cf6) 16%, transparent);
  border-radius: 9px;
}

.lb-nacts {
  display: flex;
  gap: 2px;
}

.lb-nact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--lb-text);
  font: 600 13px/1 var(--lb-font);
  white-space: nowrap;
  cursor: pointer;
}

.lb-nact:hover {
  background: var(--overlay-3, rgba(255, 255, 255, 0.08));
}

.lb-nact svg {
  display: block;
  flex: none;
  pointer-events: none;
}

.lb-nact span {
  pointer-events: none;
}

.lb-nact--ai {
  color: var(--violet-soft, #c4b5fd);
  background: color-mix(in srgb, var(--violet, #8b5cf6) 16%, transparent);
}

/* Кнопка чата с Лео в правом нижнем тулбаре и её бейдж (как у «Обсуждения» в заметке). */
.lb-chat-btn {
  position: relative;
}

.lb-chat-badge {
  position: absolute;
  top: 2px;
  right: 1px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 8px;
  background: var(--lb-accent);
  color: #fff;
  font: 600 10px/16px var(--lb-font);
  text-align: center;
  pointer-events: none;
}

.lb-chat-badge.is-dot {
  min-width: 10px;
  width: 10px;
  height: 10px;
  padding: 0;
  top: 4px;
  right: 4px;
}

/* Автор стикера — внизу, как подпись у комментария: аватар 16px и имя. Стикер всегда светлый,
   поэтому цвета тёмные в обеих темах. */
.lb-t-sticky.has-author > .lb-text {
  padding-bottom: 30px;
}

.lb-author {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: rgba(31, 35, 40, 0.62);
  font: 500 11px/16px var(--lb-font);
  pointer-events: none;
}

.lb-author-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lb-av {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(31, 35, 40, 0.14);
  color: #1f2328;
  font: 700 7.5px/1 var(--lb-font);
}

.lb-av--t0 { background: rgba(124, 92, 255, 0.28); }
.lb-av--t1 { background: rgba(240, 120, 80, 0.3); }
.lb-av--t2 { background: rgba(40, 170, 130, 0.3); }
.lb-av--t3 { background: rgba(60, 130, 240, 0.28); }
.lb-av--t4 { background: rgba(220, 90, 150, 0.28); }
.lb-av--t5 { background: rgba(230, 160, 30, 0.32); }

.lb-av.is-ai {
  color: #7c3aed;
  background: rgba(139, 92, 246, 0.2);
}

.lb-av-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.lb-av-img.has-photo {
  display: block;
}

/* ---- составные блоки: таблица (как в заметке), оргкарточка, Гант ---- */
.lb-t-table,
.lb-t-card,
.lb-t-gantt {
  pointer-events: auto;
  cursor: move;
}

.lb-stage:not([data-tool="select"]) .lb-t-table,
.lb-stage:not([data-tool="select"]) .lb-t-card,
.lb-stage:not([data-tool="select"]) .lb-t-gantt {
  cursor: inherit;
}

.lb-el.is-editing.lb-t-table,
.lb-el.is-editing.lb-t-card,
.lb-el.is-editing.lb-t-gantt {
  cursor: auto;
}

.lb-table {
  color: var(--text, var(--lb-text));
}

.lb-table .note-rich-editor,
.lb-table .note-rich-editor-surface,
.lb-table .note-rich-editor-body {
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.lb-table .note-rich-editor-body {
  outline: none;
  font-size: 15px;
  line-height: 1.45;
}

.lb-table .note-table-manage-wrap,
.lb-table .note-table-manage-wrap.is-managing,
.lb-table .note-editor-table {
  margin: 0;
  padding: 0;
}

.lb-table .note-editor-table {
  background: var(--lb-block-bg);
}

.lb-table .note-editor-table p {
  margin: 0;
}

.lb-el:not(.is-editing) .lb-table .note-rich-editor-body {
  cursor: move;
  user-select: none;
  -webkit-user-select: none;
}

.lb-block {
  position: relative;
}

/* Оргкарточка: шапка с должностью, фото, имя, обязанности. */
.lb-card {
  overflow: hidden;
  border: 1px solid var(--lb-panel-border);
  border-radius: 10px;
  background: var(--lb-block-bg);
  color: var(--lb-ink-ink);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--shadow-color, #000) 14%, transparent);
}

.lb-card-head {
  padding: 9px 12px;
  background: var(--head);
  color: #1f2328; /* шапка — светлая заливка в обеих темах */
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  word-break: break-word;
}

.lb-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 12px 14px;
  text-align: center;
}

.lb-card-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--lb-block-alt);
  color: var(--lb-muted);
  font-size: 12px;
}

.lb-card-photo.is-empty {
  border: 1.5px dashed var(--lb-panel-border);
  cursor: pointer;
}

.lb-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lb-card-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  word-break: break-word;
}

.lb-card-about {
  color: var(--lb-muted);
  font-size: 12.5px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

.lb-card [data-f].is-empty::before,
.lb-g-cell.is-empty::before {
  content: attr(data-ph);
  color: var(--lb-muted);
  opacity: 0.7;
}

.lb-card [data-f][contenteditable] {
  outline: 2px solid var(--lb-accent);
  outline-offset: 1px;
  border-radius: 4px;
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
}

/* Гант: колонки слева, шкала дней/недель, полосы задач. */
.lb-g {
  position: relative;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--lb-panel-border);
  border-radius: 8px;
  background: var(--lb-block-bg);
  color: var(--lb-ink-ink);
  font-size: 12.5px;
}

.lb-g-head {
  position: relative;
  border-bottom: 1px solid var(--lb-panel-border);
}

.lb-g-hcell {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 8px;
  box-sizing: border-box;
  color: var(--lb-muted);
  font-size: 12px;
  white-space: nowrap;
}

.lb-g-month {
  position: absolute;
  top: 3px;
  padding-left: 4px;
  color: var(--lb-muted);
  font-size: 11px;
  white-space: nowrap;
}

.lb-g-tick {
  position: absolute;
  bottom: 0;
  height: 22px;
  border-left: 1px solid var(--lb-panel-border);
  color: var(--lb-muted);
  font-size: 11px;
  line-height: 22px;
  text-align: center;
  white-space: nowrap;
}

.lb-g-tick.is-off {
  color: var(--lb-ink-red);
}

.lb-g-body {
  position: absolute;
  left: 0;
  right: 0;
}

.lb-g-col {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--lb-panel-border);
}

.lb-g-col.is-off {
  background: var(--lb-block-alt);
}

.lb-g-now {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--lb-ink-red);
  opacity: 0.8;
}

.lb-g-row {
  position: absolute;
  left: 0;
  right: 0;
  border-bottom: 1px solid var(--lb-panel-border);
}

.lb-g-row.is-sel {
  background: var(--lb-accent-soft);
}

.lb-g-cell {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
  padding: 0 8px;
  box-sizing: border-box;
  background: var(--lb-block-bg);
  line-height: 34px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lb-g-row.is-sel .lb-g-cell {
  background: color-mix(in srgb, var(--lb-accent) 10%, var(--lb-block-bg));
}

.lb-g-c-start,
.lb-g-c-end {
  color: var(--lb-muted);
  font-variant-numeric: tabular-nums;
}

.lb-g-c-owner {
  border-right: 1px solid var(--lb-panel-border);
}

.lb-g-cell[contenteditable] {
  z-index: 2;
  overflow: visible;
  outline: 2px solid var(--lb-accent);
  outline-offset: -2px;
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
}

.lb-g-bar {
  position: absolute;
  top: 8px;
  bottom: 8px;
  border-radius: 5px;
  background: var(--c);
  opacity: 0.85;
}

.lb-g-bar.is-sel {
  opacity: 1;
  outline: 2px solid var(--lb-accent);
  outline-offset: 1px;
}

.lb-el.is-selected .lb-g-bar,
.lb-t-gantt .lb-g-bar {
  cursor: grab;
}

.lb-g-edge {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 8px;
  cursor: ew-resize;
}

.lb-g-edge.is-start {
  left: -3px;
}

.lb-g-edge.is-end {
  right: -3px;
}

.lb-g-add {
  position: absolute;
  left: 0;
  width: 150px;
  padding: 0 8px;
  box-sizing: border-box;
  color: var(--lb-accent);
  line-height: 34px;
  cursor: pointer;
}

/* Пустая доска: выбор шаблона. */
.lb-empty-hint.has-start {
  max-width: min(560px, calc(100% - 24px));
  width: 100%;
  pointer-events: auto;
}

.lb-start-title {
  margin-bottom: 14px;
  color: var(--lb-text);
  font-size: 16px;
  font-weight: 600;
}

.lb-start-cards,
.lb-tpl-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.lb-tpl-list {
  flex-wrap: nowrap;
  gap: 6px;
  padding: 2px;
}

.lb-start-sub {
  margin: -8px 0 14px;
  font-size: 13px;
}

.lb-start-hint {
  margin-top: 14px;
  font-size: 13px;
}

.lb-tpl {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 160px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid var(--lb-panel-border);
  border-radius: 12px;
  background: var(--lb-panel);
  color: var(--lb-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.lb-tpl-list .lb-tpl {
  width: 132px;
}

.lb-tpl:hover {
  border-color: var(--lb-accent);
}

.lb-tpl-pre {
  display: block;
  width: 100%;
  height: 62px;
  margin-bottom: 8px;
  border-radius: 8px;
  background: var(--lb-bg);
}

.lb-tpl-pre svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--lb-muted);
  stroke-width: 1.5;
}

.lb-tpl-pre svg .is-bar {
  stroke: none;
}

.lb-tpl-pre svg .b1 {
  fill: var(--lb-ink-blue);
}

.lb-tpl-pre svg .b2 {
  fill: var(--lb-ink-green);
}

.lb-tpl-pre svg .b3 {
  fill: var(--lb-ink-orange);
}

.lb-tpl-t {
  font-size: 14px;
  font-weight: 600;
}

.lb-tpl-h {
  color: var(--lb-muted);
  font-size: 12px;
}

.lb-txt {
  padding: 0 10px;
}

.lb-tools .lb-sep {
  width: 1px;
  height: 22px;
  margin: auto 3px;
}

@container (max-width: 640px) {
  .lb-tools .lb-sep {
    width: 1px;
    height: 22px;
    margin: auto 3px;
  }

  .lb-tpl {
    width: calc(50% - 5px);
  }
}

/* Только просмотр — без подсказок пустых полей. */
.leo-board.is-readonly .lb-card [data-f].is-empty::before {
  content: none;
}

/* Подсветка текста (из Miro): фон только под словами. */
.lb-hl-wrap {
  width: 100%;
}

.lb-hl {
  padding: 0 2px;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---- режим «Макет»: экраны ---- */
.lb-t-frame {
  pointer-events: none; /* по фону экрана — рамка выделения, как во Figma; экран берут за подпись */
}

/* Фрейм без своей обводки — без служебной рамки (как во Figma); видна только подсветка при наведении. */
.lb-t-frame .lb-frame-bg:not(.has-stroke) {
  stroke: none;
  vector-effect: non-scaling-stroke;
}

.lb-t-frame:hover .lb-frame-bg:not(.has-stroke) {
  stroke: var(--lb-accent);
  stroke-width: 1;
}

.lb-frame-head {
  position: absolute;
  left: 0;
  bottom: 100%;
  display: flex;
  align-items: baseline;
  gap: 8px;
  max-width: 100%;
  padding-bottom: calc(6px / var(--lb-zoom, 1));
  color: var(--lb-muted);
  font-size: calc(13px / var(--lb-zoom, 1));
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: auto;
  cursor: move;
}

.lb-frame-name {
  overflow: hidden;
  color: var(--lb-text);
  text-overflow: ellipsis;
}

.lb-frame-name.is-empty::before {
  content: attr(data-ph);
  color: var(--lb-muted);
}

.lb-frame-name[contenteditable] {
  overflow: visible;
  outline: 2px solid var(--lb-accent);
  outline-offset: 2px;
  border-radius: 3px;
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
}

.lb-frame-size {
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

.lb-el.is-selected .lb-frame-name,
.lb-t-frame:hover .lb-frame-name {
  color: var(--lb-accent);
}

.lb-mode {
  display: inline-flex;
  gap: 2px;
}

.lb-start-devices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.lb-device {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 116px;
  padding: 10px 8px;
  box-sizing: border-box;
  border: 1px solid var(--lb-panel-border);
  border-radius: 12px;
  background: var(--lb-panel);
  color: var(--lb-text);
  font: inherit;
  cursor: pointer;
}

.lb-device:hover {
  border-color: var(--lb-accent);
}

.lb-device-pre {
  display: block;
  height: 54px;
  aspect-ratio: var(--ar);
  max-width: 90px;
  margin-bottom: 6px;
  border: 1.5px solid var(--lb-muted);
  border-radius: 6px;
}

/* ---- панель свойств макета (справа) ---- */
.lb-inspector {
  position: absolute;
  z-index: 4;
  top: 64px;
  right: 12px;
  width: 264px;
  max-height: calc(100% - 140px);
  overflow-y: auto;
  padding: 4px 0;
  box-sizing: border-box;
  border: 1px solid var(--lb-panel-border);
  border-radius: 12px;
  background: var(--lb-panel);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--shadow-color, #000) 22%, transparent);
  color: var(--lb-text);
  font-size: 12px;
  scrollbar-width: thin;
}

.leo-board.is-mode-design .lb-minimap {
  display: none;
}

.lb-ihead {
  padding: 8px 12px 6px;
  font-size: 13px;
  font-weight: 600;
}

.lb-itabs {
  display: flex;
  gap: 2px;
  padding: 6px 8px 4px;
}

.lb-itabs button {
  padding: 5px 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--lb-muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.lb-itabs button:hover {
  color: var(--lb-text);
}

.lb-itabs button.is-on {
  background: var(--lb-accent-soft);
  color: var(--lb-text);
}

.lb-icode {
  margin: 0;
  max-height: 320px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--lb-panel-border);
  border-radius: 8px;
  color: var(--lb-text);
  font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre;
  user-select: text;
  scrollbar-width: thin;
}

.lb-icode.is-cmd {
  white-space: pre-wrap;
  word-break: break-all;
}

.lb-inote {
  color: var(--lb-muted);
  line-height: 1.45;
}

.lb-idim {
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.lb-isec {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid var(--lb-panel-border);
}

.lb-ilabel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--lb-muted);
  font-size: 11px;
  font-weight: 600;
}

.lb-irow {
  display: flex;
  gap: 6px;
}

.lb-irow:empty {
  display: none;
}

.lb-if {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 4px;
  min-width: 0;
  height: 28px;
  padding: 0 6px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 6px;
  background: color-mix(in srgb, var(--lb-text) 6%, transparent);
}

.lb-if:focus-within {
  border-color: var(--lb-accent);
}

.lb-if span {
  flex: none;
  color: var(--lb-muted);
  font-size: 11px;
}

.lb-inspector input,
.lb-pop input {
  /* Safari: в поле внутри user-select:none нет курсора — поле «в фокусе», а ввода нет. */
  user-select: text;
  -webkit-user-select: text;
}

.lb-if input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.lb-if.is-wide {
  flex-basis: 100%;
}

.lb-icolor {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--lb-text) 6%, transparent);
}

.lb-icolor-sw {
  flex: none;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--lb-panel-border);
  border-radius: 4px;
  background: var(--c);
  cursor: pointer;
}

.lb-icolor-sw.is-none {
  background: linear-gradient(to top right, transparent 45%, var(--lb-ink-red) 46%, var(--lb-ink-red) 54%, transparent 55%);
}

.lb-icolor-hex {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: lowercase;
}

.lb-ibtn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border: 0;
  border-radius: 6px;
  background: color-mix(in srgb, var(--lb-text) 6%, transparent);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.lb-ibtn svg {
  width: 16px;
  height: 16px;
}

.lb-ibtn.is-on {
  background: var(--lb-accent-soft);
  color: var(--lb-accent);
}

.lb-ibtn.is-wide {
  width: 100%;
  justify-content: flex-start;
}

.lb-irow > .lb-ibtn.is-wide {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  justify-content: center;
}

.lb-iseg .lb-ibtn {
  flex: 1 1 0;
}

.lb-iacts {
  flex-direction: row;
  justify-content: space-between;
}

.lb-ilink {
  padding: 0;
  border: 0;
  background: none;
  color: var(--lb-accent);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.lb-cpick {
  display: flex;
  align-items: center;
  gap: 4px;
}

.lb-cpick input[type="color"] {
  width: 120px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

@container (max-width: 640px) {
  .lb-inspector {
    top: auto;
    left: 8px;
    right: 8px;
    bottom: 64px;
    width: auto;
    max-height: 42%;
  }
}

/* Поворот мышкой: зоны снаружи углов выделенного объекта */
.lb-overlay .lb-rotzone {
  fill: transparent;
  stroke: none;
  pointer-events: all;
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6%2013a6.5%206.5%200%201%200%202.2-4.9%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6%2013a6.5%206.5%200%201%200%202.2-4.9%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M4.5%205.5l4%202.8-3.6%203z%22%20fill%3D%22%23000%22%20stroke%3D%22%23fff%22%20stroke-width%3D%220.8%22%2F%3E%3C%2Fsvg%3E") 12 12, grab;
}

/* Вложенный экран — как блок: берут за тело, подписи нет */
.lb-t-frame.is-nested {
  pointer-events: auto;
}

.lb-t-frame.is-nested .lb-frame-head {
  display: none;
}

.lb-t-frame.is-nested .lb-frame-bg {
  pointer-events: all;
  cursor: move;
}

.lb-ialign {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.lb-ialign .lb-ibtn {
  min-width: 0;
}

/* Alt в макете: расстояния до объекта / экрана */
.lb-overlay .lb-measure {
  stroke: #f24822;
  stroke-width: 1;
}

.lb-overlay .lb-measure-box {
  fill: none;
  stroke: #f24822;
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.lb-overlay .lb-measure-tag rect {
  fill: #f24822;
}

.lb-overlay .lb-measure-tag text {
  fill: #fff;
  font: 600 11px var(--lb-font);
  text-anchor: middle;
}

/* Перо (макет): рисуемый контур */
.lb-overlay .lb-pen-draft {
  fill: none;
  stroke: var(--lb-accent);
  stroke-width: 1.5;
}

.lb-overlay .lb-pen-rubber,
.lb-overlay .lb-pen-handle {
  stroke: var(--lb-accent);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

.lb-overlay .lb-pen-pt {
  fill: var(--lb-panel);
  stroke: var(--lb-accent);
  stroke-width: 1.5;
}

.lb-overlay .lb-pen-pt.is-first {
  fill: var(--lb-accent);
}

.lb-overlay .lb-pen-hdot {
  fill: var(--lb-accent);
}

/* Панель свойств как во Figma: иконки в полях, строка цвета с %, «глаз» и «—», положение обводки. */
.lb-if span svg {
  display: block;
  width: 14px;
  height: 14px;
}

.lb-isuf {
  flex: none;
  color: var(--lb-muted);
  font-size: 11px;
  font-style: normal;
}

.lb-ispacer {
  flex: none;
  width: 28px;
}

.lb-ipaint {
  display: flex;
  align-items: center;
  gap: 4px;
}

.lb-ipaint .lb-icolor {
  flex: 1 1 auto;
  min-width: 0;
}

.lb-ipaint .lb-ibtn {
  background: transparent;
  min-width: 26px;
  padding: 0 4px;
}

.lb-ipaint .lb-ibtn:hover {
  background: color-mix(in srgb, var(--lb-text) 6%, transparent);
}

.lb-ipaint.is-off .lb-icolor {
  opacity: 0.45;
}

.lb-icolor-op {
  flex: none;
  width: 30px;
  padding-left: 6px;
  border: 0;
  border-left: 1px solid var(--lb-panel-border);
  outline: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.lb-iadd {
  min-width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  color: var(--lb-text);
}

.lb-iadd:hover {
  background: color-mix(in srgb, var(--lb-text) 6%, transparent);
}

.lb-iselect {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  height: 28px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--lb-text) 6%, transparent);
}

.lb-iselect select {
  width: 100%;
  min-width: 0;
  padding: 0 4px;
  border: 0;
  outline: none;
  background: transparent;
  color: inherit;
  font: inherit;
}

.lb-overlay .lb-pen-pt.is-sel {
  fill: var(--lb-accent);
}

.lb-overlay .lb-pen-pt.is-end {
  stroke-width: 2.5;
}

/* Градиент в палитре: вкладки, полоса с точками, угол. */
.lb-gtabs {
  display: flex;
  gap: 2px;
  margin-bottom: 8px;
  padding: 2px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--lb-text) 6%, transparent);
}

.lb-gtab {
  flex: 1 1 0;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--lb-muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.lb-gtab.is-on {
  background: var(--lb-panel);
  color: var(--lb-text);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--shadow-color, #000) 18%, transparent);
}

.lb-gbar {
  position: relative;
  height: 18px;
  margin: 6px 6px 10px;
  border-radius: 4px;
  background: var(--g), repeating-conic-gradient(color-mix(in srgb, var(--lb-text) 12%, transparent) 0 25%, transparent 0 50%) 0 0 / 8px 8px;
  cursor: copy;
}

.lb-gstop {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border: 2px solid var(--lb-panel);
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 1px var(--lb-panel-border);
  transform: translate(-50%, -50%);
  cursor: ew-resize;
}

.lb-gstop.is-on {
  box-shadow: 0 0 0 2px var(--lb-accent);
}

.lb-gin {
  width: 34px;
  height: 26px;
  padding: 0 4px;
  border: 0;
  border-radius: 6px;
  outline: none;
  background: color-mix(in srgb, var(--lb-text) 6%, transparent);
  color: inherit;
  font: inherit;
  text-align: right;
}

.lb-ghint {
  margin: 4px 2px 6px;
  color: var(--lb-muted);
  font-size: 11px;
}

.lb-igrad {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Эффекты: строка «название + значение + убрать». */
.lb-ifx {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
}

.lb-ifx > span {
  flex: 1 1 auto;
  color: var(--lb-text);
  font-size: 12px;
}

.lb-ifx .lb-if {
  flex: 0 0 72px;
}

.lb-ifx-rm {
  background: transparent;
}

.lb-gbar ~ .lb-cpick input[type="color"] {
  width: 56px;
}

/* ---- панель слоёв ---- */
.lb-layers {
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  width: 228px;
  max-height: calc(100% - 80px);
  box-sizing: border-box;
  border: 1px solid var(--lb-panel-border);
  border-radius: 12px;
  background: var(--lb-panel);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--shadow-color, #000) 22%, transparent);
  color: var(--lb-text);
  font-size: 12px;
}

.lb-lhead {
  flex: none;
  padding: 10px 12px 6px;
  color: var(--lb-muted);
  font-size: 11px;
  font-weight: 600;
}

.lb-llist {
  overflow-y: auto;
  padding: 0 4px 6px;
  scrollbar-width: thin;
}

.lb-lempty {
  padding: 6px 8px 8px;
  color: var(--lb-muted);
}

.lb-layer {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 6px 0 calc(4px + var(--d, 0) * 14px);
  border-radius: 6px;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}

.lb-layer:hover {
  background: color-mix(in srgb, var(--lb-text) 6%, transparent);
}

.lb-layer.is-sel {
  background: var(--lb-accent-soft);
}

.lb-layer.is-frame .lb-lname {
  font-weight: 600;
}

.lb-lcaret {
  display: inline-flex;
  flex: none;
  width: 14px;
  color: var(--lb-muted);
  cursor: pointer;
  transition: transform 0.12s;
}

.lb-lcaret.is-open {
  transform: rotate(90deg);
}

.lb-lcaret.is-none {
  cursor: default;
}

.lb-lcaret svg,
.lb-licon svg {
  width: 14px;
  height: 14px;
}

.lb-licon {
  display: inline-flex;
  flex: none;
  color: var(--lb-muted);
}

.lb-lname {
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  outline: none;
}

.lb-lname[contenteditable="true"] {
  padding: 0 4px;
  border-radius: 4px;
  background: var(--lb-panel);
  box-shadow: 0 0 0 1px var(--lb-accent);
  text-overflow: clip;
  user-select: text;
  -webkit-user-select: text;
}

.lb-layer.is-drop-before {
  box-shadow: inset 0 2px 0 var(--lb-accent);
}

.lb-layer.is-drop-after {
  box-shadow: inset 0 -2px 0 var(--lb-accent);
}

.lb-layer.is-drop-inside {
  box-shadow: inset 0 0 0 1.5px var(--lb-accent);
}

.lb-overlay .lb-layer-hover {
  fill: none;
  stroke: var(--lb-accent);
  stroke-width: 1.5;
}

/* Слои открыты — пустая доска и подсказки не прячутся под панелью. */
@container (max-width: 640px) {
  .lb-layers {
    top: 56px;
    left: 8px;
    width: min(260px, calc(100% - 16px));
    max-height: 50%;
  }
}

/* Типографика в панели. */
.lb-iselect.is-wide {
  flex: none;
  width: 100%;
}

.lb-irow > .lb-iseg {
  display: flex;
  flex: 1 1 auto;
  gap: 2px;
}

.lb-irow > .lb-iseg .lb-ibtn {
  flex: 1 1 0;
  min-width: 0;
}

/* Автолэйаут: сетка выравнивания 3×3 и отступы рядом. */
.lb-ilayout {
  display: flex;
  gap: 6px;
}

.lb-lgrid {
  display: grid;
  flex: none;
  grid-template-columns: repeat(3, 22px);
  grid-template-rows: repeat(3, 22px);
  gap: 2px;
  padding: 4px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--lb-text) 6%, transparent);
}

.lb-lcell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}

.lb-lcell i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--lb-text) 35%, transparent);
}

.lb-lcell:hover {
  background: color-mix(in srgb, var(--lb-text) 8%, transparent);
}

.lb-lcell.is-on i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--lb-accent);
}

.lb-lside {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}


/* Панель как во Figma: подписи групп, поле с выбором режима, флажок. */
.lb-isub {
  margin: 2px 0 -2px;
  color: var(--lb-muted);
  font-size: 11px;
}

.lb-ifsel select {
  flex: none;
  width: 48px;
  -webkit-appearance: none;
  appearance: none;
  text-align: right;
  text-align-last: right;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--lb-muted);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.lb-ifsel input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 24px;
  border: 0;
  outline: none;
  background: transparent;
  color: inherit;
  font: inherit;
}

.lb-ilayout > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lb-icheck {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 12px;
  cursor: pointer;
}

.lb-iadd.is-on {
  background: var(--lb-accent-soft);
  color: var(--lb-accent);
}

/* Как во Figma: кнопки одной группой (общий фон, разделители), иконки 16px. */
.lb-igroup {
  display: flex;
  flex: none;
  overflow: hidden;
  border-radius: 6px;
  background: color-mix(in srgb, var(--lb-text) 6%, transparent);
}

.lb-igroup .lb-ibtn {
  min-width: 30px;
  border-radius: 0;
  background: transparent;
}

.lb-igroup .lb-ibtn + .lb-ibtn {
  box-shadow: inset 1px 0 0 var(--lb-panel);
}

.lb-igroup .lb-ibtn:hover {
  background: color-mix(in srgb, var(--lb-text) 8%, transparent);
}

.lb-ialign2 {
  justify-content: space-between;
}

.lb-ialign2 .lb-igroup {
  flex: 1 1 0;
}

.lb-ialign2 .lb-igroup .lb-ibtn {
  flex: 1 1 0;
  min-width: 0;
}

.lb-ibtn svg [stroke-width="2.4"] {
  stroke-linecap: round;
}

/* Наведение на промежуток / отступ автолэйаута (как во Figma) */
.lb-overlay .lb-gap {
  fill: url(#lb-hatch);
  stroke: #f24ea0;
  stroke-width: 1;
  stroke-dasharray: 2 2;
}

.lb-overlay .lb-gap-hatch {
  stroke: #f24ea0;
  stroke-width: 1.5;
  opacity: 0.55;
}

.lb-overlay .lb-gap-pill {
  fill: #f24ea0;
}

.lb-overlay .lb-gap-label {
  fill: #fff;
  font: 600 11px var(--lb-font);
  text-anchor: middle;
}

/* Слои: прокрутка вбок при глубокой вложенности; «глаз» и «замок» — справа у каждой строки. */
.lb-llist {
  overflow-x: auto;
}

.lb-layer {
  position: relative;
  width: max-content;
  min-width: 100%;
  box-sizing: border-box;
}

.lb-lname {
  flex: 1 0 auto;
  overflow: visible;
  text-overflow: clip;
}

.lb-lacts {
  position: sticky;
  right: 0;
  display: flex;
  flex: none;
  gap: 0;
  margin-left: 8px;
  padding-left: 4px;
  border-radius: 6px;
  background: var(--lb-panel);
  opacity: 0;
}

.lb-layer:hover .lb-lacts,
.lb-layer.is-hidden .lb-lacts,
.lb-layer.is-locked .lb-lacts {
  opacity: 1;
}

.lb-layer.is-sel .lb-lacts {
  background: color-mix(in srgb, var(--lb-accent) 14%, var(--lb-panel));
}

.lb-lact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--lb-muted);
  cursor: pointer;
}

.lb-lact svg {
  width: 14px;
  height: 14px;
}

.lb-lact:hover {
  color: var(--lb-text);
  background: color-mix(in srgb, var(--lb-text) 8%, transparent);
}

/* Скрытый / заблокированный: кнопка-признак видна всегда, вторая — по наведению. */
.lb-layer .lb-lact:not(.is-on) {
  visibility: hidden;
}

.lb-layer:hover .lb-lact {
  visibility: visible;
}

.lb-layer.is-hidden .lb-lname,
.lb-layer.is-hidden .lb-licon,
.lb-layer.is-dim .lb-lname,
.lb-layer.is-dim .lb-licon {
  opacity: 0.45;
}

/* Привязка к фрейму: выпадающий список во всю ширину поля. */
.lb-ifsel.lb-ipin select {
  flex: 1 1 auto;
  width: 100%;
  text-align: left;
  text-align-last: left;
  color: inherit;
  font-size: 12px;
}

/* Доска ещё грузится (скрипты доски — лениво, см. loadBoardScripts в app.js). */
.board-lazy-status {
  padding: 32px 16px;
  text-align: center;
}

/* Доска в тексте документа (LeoBoard.create({embed: true})): без мини-карты, вертикальная прокрутка страницы пальцем. */
.leo-board.is-embed .lb-stage {
  touch-action: pan-y;
}

.leo-board.is-embed .lb-zoom {
  right: 8px;
  top: 8px;
}

.leo-board.is-embed .lb-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  padding: 0 10px 0 8px;
  white-space: nowrap;
}

.leo-board.is-embed .lb-open-btn svg {
  width: 16px;
  height: 16px;
}