/* ============================================================================
   /figcraft/ — серый холст и мятный FigCraft.
   Как в самом редакторе: светло-серый бесконечный холст, на нём белая рамка
   экрана, справа белая панель свойств. Выделенная рамка обведена синим, как
   выделение в FigCraft; мятный — цвет иконки программы.
   ========================================================================= */

.pb-landing.lp-figcraft {
  --lp-primary:   #0b7f5d;
  --lp-secondary: #096a4e;
  --lp-accent:    #1b5fd9;
  --lp-glow:      rgba(15, 201, 143, .3);
  --lp-glow2:     rgba(27, 95, 217, .14);
  --lp-bg:        #f3f5f4;
  --lp-surface:   #ffffff;
  --lp-border:    rgba(20, 40, 32, .13);
  --lp-text:      #14201b;
  --lp-muted:     #4a5852;
  --lp-wave:      #e4ebe8;
  --lp-shadow:    0 10px 30px rgba(10, 60, 44, .10);
}
.pb-landing.lp-figcraft .lp-grid { opacity: .4; }

/* ── Стенд: холст ──────────────────────────────────────────────────────── */
.fgd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: 16px; align-items: start; }
.fgd .lpd-status { grid-column: 1 / -1; }
.fgd__canvas {
  position: relative; display: grid; place-items: center; padding: 36px 16px 24px; border-radius: 12px; min-height: 420px;
  background-color: #ebeeed; background-image: radial-gradient(rgba(0, 0, 0, .09) 1px, transparent 1px); background-size: 16px 16px;
  overflow-x: auto;
}
.fgd__tag { position: absolute; top: 12px; left: 16px; font-size: .75rem; color: #1b5fd9; }
.fgd__frame {
  width: 300px; max-width: 100%; border-radius: 18px; overflow: hidden; background: #f6f8fb;
  box-shadow: 0 0 0 2px #1b5fd9, 0 12px 30px rgba(0, 0, 0, .12);
}
.fgd__frame.is-h { width: auto; max-width: none; }
.fgd__head { padding: 22px 18px 16px; background: #2f52d0; color: #fff; }
.fgd__title { margin: 0; font-size: 1.15rem; font-weight: 800; }
.fgd__stack { display: flex; transition: gap .2s ease, padding .2s ease; }
@media (prefers-reduced-motion: reduce) { .fgd__stack { transition: none; } }
.fgd__card {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #fff;
  box-shadow: inset 4px 0 0 var(--c), 0 1px 2px rgba(0, 0, 0, .08); white-space: nowrap;
}
.fgd__frame.is-h.is-fill .fgd__card { flex: 1 1 0; }
.fgd__n {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font-size: .8rem; font-weight: 700; color: #fff; background: var(--c);
}
.fgd__txt { display: grid; line-height: 1.2; }
.fgd__txt b { font-size: .92rem; color: #111827; }
.fgd__txt small { font-size: .75rem; color: #6b7280; }

/* ── Панель Auto layout ────────────────────────────────────────────────── */
.fgd__panel {
  display: grid; gap: 12px; padding: 14px; border-radius: 12px; background: #fff; border: 1px solid var(--lp-border);
}
.fgd__panel-t { margin: 0; font-weight: 700; font-size: .9rem; }
.fgd__seg { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; border: 0; }
.fgd__seg legend { width: 100%; padding: 0; margin-bottom: 4px; font-size: .78rem; color: var(--lp-muted); }
.fgd__seg-b {
  flex: 1 1 auto; min-height: 38px; padding: 4px 10px; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: .82rem; color: var(--lp-text); background: #f4f6f5; border: 1.5px solid transparent;
}
.fgd__seg-b[aria-pressed="true"] { background: #e6efff; border-color: #1b5fd9; color: #0f3d99; }
.fgd__range { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; font-size: .78rem; color: var(--lp-muted); }
.fgd__range input { grid-column: 1 / -1; grid-row: 2; width: 100%; accent-color: #1b5fd9; min-height: 28px; }
.fgd__val { font-variant-numeric: tabular-nums; color: var(--lp-text); }
.fgd__acts { display: flex; flex-wrap: wrap; gap: 6px; }
.fgd__acts .lpd-btn { min-height: 40px; padding: 6px 12px; font-size: .85rem; }

@media (max-width: 760px) {
  .fgd { grid-template-columns: 1fr; }
  .fgd__canvas { min-height: 0; }
}