/* Конструктор рисунков · Xudoyorxon Bunyodov / Худоёрхон Бунёдов */
.fg { max-width: 1000px; margin: 0 auto; padding: 4px 0 96px; }
.fg-head h1 { margin: 0; font-size: 24px; }
.fg-sub { color: #6B7B88; font-size: 13px; margin: 3px 0 14px; }
.fg-h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: #6B7B88; margin: 14px 0 7px; font-weight: 700; }
.fg-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.fg-col { padding: 14px 16px; border: 1px solid #E1E8ED; border-radius: 11px; background: #fff; }
.fg-col .fg-h2:first-child { margin-top: 0; }
.fg-ta { width: 100%; min-height: 110px; padding: 10px; font-size: 14px; line-height: 1.5;
  border: 1px solid #D6DEE5; border-radius: 9px; resize: vertical; font-family: ui-monospace, monospace; }
.fg-ta--sm { min-height: 90px; }
.fg-help { font-size: 12px; line-height: 1.6; color: #5A6B78; background: #F1F5F8; border-radius: 9px; padding: 9px 12px; margin-top: 10px; }
.fg-out { min-height: 260px; display: flex; align-items: center; justify-content: center;
  border: 1px solid #E6ECF1; border-radius: 10px; background: #fff; padding: 8px; }
.fg-out svg { max-width: 100%; height: auto; }
.fg-empty { color: #9AA8B4; font-size: 13px; }
.fg-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
[data-theme="dark"] .fg-col { background: #1E2A33; border-color: #2E4150; color: #DDE7EE; }
[data-theme="dark"] .fg-ta { background: #16222B; border-color: #2E4150; color: #DDE7EE; }
[data-theme="dark"] .fg-help { background: #22323E; color: #C3D4E0; }
[data-theme="dark"] .fg-out { background: #fff; }