/* Email Signature & Email Template Generator */
.esg-app-band {
  background: #F1F5F9;
  border-top: 1px solid var(--gray-200, #E5E7EB);
  border-bottom: 1px solid var(--gray-200, #E5E7EB);
  padding: 8px 0 40px;
}
.esg-app-band .esg-shell { margin-top: 32px; margin-bottom: 0; }
/* Hide the wrapper chrome when the editor is in full-window focus mode.
   The standalone /tools/email-signature-app page never renders the band
   because it uses .tool-standalone-main, not .esg-app-band. */
body.tool-focus-active .esg-app-band {
  background: transparent;
  border: 0;
  padding: 0;
}
body.tool-focus-active .esg-app-band .esg-shell { margin: 0; }

.esg-shell {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  border: 1px solid var(--gray-200);
  border-radius: 24px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
  margin: 32px auto;
  max-width: 1200px;
  padding: 24px;
  position: relative;
  width: calc(100% - 48px);
}

.esg-toolbar {
  align-items: center;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  padding-bottom: 16px;
}
.esg-brand { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.esg-brand strong { color: var(--gray-900); font-size: 16px; font-weight: 800; }
.esg-brand span { color: var(--gray-600); font-size: 12px; }
.esg-brand-intro {
  background: transparent;
  border: 0;
  color: #2563EB;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.esg-brand-intro:hover { color: #1D4ED8; }
.esg-toolbar-name label { display: flex; align-items: center; gap: 8px; }
.esg-toolbar-name span {
  color: var(--gray-500);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.esg-toolbar-name input {
  background: #FFF;
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  font: inherit;
  font-weight: 600;
  padding: 8px 12px;
  min-width: 220px;
}
.esg-toolbar-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.esg-toolbar-divider {
  background: var(--gray-200);
  display: inline-block;
  height: 22px;
  width: 1px;
}
@media (max-width: 720px) { .esg-toolbar-divider { display: none; } }

/* Full-window mode — mirrors the focus-mode pattern used by the other browser
   tools. Compound selector beats the base .esg-shell rules; .tool-focus-controls
   and .tool-focus-btn classes for the floating exit cluster live in
   tool-invoice.css and are reused here. */
.esg-shell.esg-shell-focus {
  background: var(--gray-50, #F8FAFC);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  height: 100vh;
  height: 100dvh;
  inset: 0;
  margin: 0;
  max-width: none;
  overflow: auto;
  padding: 16px;
  position: fixed;
  width: 100%;
  z-index: 9999;
}
.esg-shell.esg-shell-focus-wide { padding: 16px 24px; }
.esg-shell.esg-shell-focus-centered {
  padding: 16px max(16px, calc((100vw - 1100px) / 2));
}
@media (max-width: 720px) {
  .esg-shell.esg-shell-focus,
  .esg-shell.esg-shell-focus-wide,
  .esg-shell.esg-shell-focus-centered { padding: 12px; }
}

/* Override: in ESG focus mode the editor's own toolbar (Try a demo / New /
   Duplicate / Reset / Full window / Open in new tab) sits at the top, so the
   floating control cluster moves to the bottom-right corner instead of
   overlapping it. */
.esg-shell.esg-shell-focus .tool-focus-controls {
  top: auto;
  bottom: 18px;
}

/* --- Designer mode --- */
/* Designer is its own world — single full-width grid since the canvas IS the
   visual preview. The 3-pane internal layout (palette / canvas / properties)
   inside DesignerApp does the rest. CopyButtons and CompatibilityChecker move
   to a horizontal strip below the grid in designer mode. */
/* Compound selector beats the base .esg-grid rule (which is defined later in
   this file) — without the doubled class the 50/50 grid template wins by
   source order and squashes the designer canvas. */
.esg-grid.esg-grid-designer { grid-template-columns: 1fr; }
.esg-designer-bottom {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

.esg-designer-loading {
  background: #FFF;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  color: var(--gray-500);
  padding: 32px;
  text-align: center;
}

.esg-designer {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: 180px minmax(0, 1fr) 280px;
}
@media (max-width: 1180px) {
  .esg-designer { grid-template-columns: 160px minmax(0, 1fr) 260px; }
}
@media (max-width: 980px) { .esg-designer { grid-template-columns: 1fr; } }

/* Visual WYSIWYG canvas — in designer mode this replaces the iframe-based
   preview entirely. Each block renders as React inline (BlockRenderer.js),
   with thin drop slots between every pair so palette items target precise
   insertion points. */
.esg-d-visual {
  background: #F4F6FA;
  border-radius: 12px;
  min-height: 420px;
  padding: 24px 16px;
}
.esg-d-visual-card {
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  margin: 0 auto;
  max-width: 600px;
  overflow: hidden;
  position: relative;
}
.esg-d-visual-empty {
  color: var(--gray-500);
  padding: 64px 24px;
  text-align: center;
}
.esg-d-visual-empty strong {
  color: var(--gray-700);
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
}
.esg-d-visual-empty span { font-size: 12px; }

/* A drop slot lives between every pair of rendered blocks. Zero height by
   default so it adds no visible spacing — sections and inline blocks sit
   flush. Expands during drag so palette items have a target. */
.esg-d-slot {
  align-items: center;
  display: flex;
  height: 0;
  justify-content: center;
  position: relative;
  transition: height 0.15s, background 0.15s;
}
.esg-d-slot-line {
  background: transparent;
  display: block;
  height: 2px;
  margin: 0 16px;
  width: calc(100% - 32px);
  transition: background 0.15s;
}
.esg-d-slot.is-active { height: 16px; }
.esg-d-slot.is-active .esg-d-slot-line { background: rgba(255, 92, 5, 0.25); }
.esg-d-slot.is-over {
  background: rgba(255, 92, 5, 0.08);
  height: 32px;
}
.esg-d-slot.is-over .esg-d-slot-line { background: #FF5C05; height: 3px; }
.esg-d-slot-label {
  background: #FF5C05;
  border-radius: 999px;
  color: #FFFFFF;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 700;
  left: 50%;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  position: absolute;
  text-transform: uppercase;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* Section wrapper — faint static dashed marching-ants outline so the row
   boundary is always visible. The outline sits flush against the section
   content with NO box-model spacing of its own; all padding/gap/margin
   between sections and inside sections comes from the section's own props
   (controlled via the properties panel). */
.esg-d-section-wrap {
  outline: 1px dashed rgba(15, 23, 42, 0.14);
  outline-offset: -1px;
  cursor: pointer;
  position: relative;
  transition: outline-color 0.15s, box-shadow 0.15s;
}
.esg-d-section-wrap:hover { outline-color: rgba(255, 92, 5, 0.45); }
.esg-d-section-wrap.is-selected {
  outline-color: #FF5C05;
  box-shadow: inset 0 0 0 1px rgba(255, 92, 5, 0.30);
}
.esg-d-section-wrap.is-dragging { opacity: 0.55; }

/* Column inside a Section — even lighter dashed outline, again with no box
   spacing. Min-height keeps an empty column targetable for drops. */
.esg-d-col {
  outline: 1px dashed rgba(15, 23, 42, 0.10);
  outline-offset: -1px;
  min-height: 36px;
  padding: 0;
  position: relative;
  transition: outline-color 0.15s, background 0.15s;
}
.esg-d-col.is-active { outline-color: rgba(255, 92, 5, 0.40); }
.esg-d-col.is-over { background: rgba(255, 92, 5, 0.05); outline-color: #FF5C05; }
.esg-d-col-empty {
  align-items: center;
  color: var(--gray-400);
  display: flex;
  font-size: 11px;
  justify-content: center;
  min-height: 60px;
  text-align: center;
}

/* Top-level slot between sections (and column-internal slot between blocks). */
.esg-d-slot-top { /* same base as .esg-d-slot */ }
.esg-d-slot-col { height: 2px; }
.esg-d-slot-col.is-active { height: 10px; }
.esg-d-slot-col.is-over { height: 18px; }

/* Inline block inside a column — selection / drag state, smaller toolbar. */
.esg-d-inline {
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
  position: relative;
  transition: border-color 0.12s;
}
.esg-d-inline:hover { border-color: rgba(255, 92, 5, 0.25); }
.esg-d-inline.is-selected {
  border-color: #FF5C05;
  box-shadow: 0 0 0 1px rgba(255, 92, 5, 0.20);
}
.esg-d-inline.is-dragging { opacity: 0.55; }

/* Sortable visual row — wraps each rendered block with selection state and a
   hover toolbar (drag handle, up/down/duplicate/delete). */
.esg-d-vrow {
  border: 2px solid transparent;
  cursor: pointer;
  outline: none;
  position: relative;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.esg-d-vrow:hover { border-color: rgba(255, 92, 5, 0.25); }
.esg-d-vrow.is-selected {
  border-color: #FF5C05;
  box-shadow: inset 0 0 0 1px #FF5C05;
}
.esg-d-vrow.is-dragging { border-color: #FF5C05; }

.esg-d-vrow-toolbar {
  align-items: center;
  background: #0F172A;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.25);
  display: none;
  gap: 2px;
  padding: 4px;
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 3;
}
.esg-d-vrow:hover .esg-d-vrow-toolbar,
.esg-d-vrow.is-selected .esg-d-vrow-toolbar,
.esg-d-section-wrap:hover > .esg-d-vrow-toolbar,
.esg-d-section-wrap.is-selected > .esg-d-vrow-toolbar,
.esg-d-inline:hover > .esg-d-vrow-toolbar,
.esg-d-inline.is-selected > .esg-d-vrow-toolbar { display: inline-flex; }
.esg-d-vrow-toolbar.is-small { padding: 2px; right: 4px; top: 4px; }
.esg-d-vrow-toolbar.is-small .esg-d-vrow-btn { height: 22px; width: 22px; font-size: 11px; }
.esg-d-vrow-toolbar.is-small .esg-d-vrow-label { font-size: 10px; padding: 0 6px; }

/* Section toolbar always wins z-order over any nested inline-block toolbar.
   When an inline block sits at the top-right of a column its toolbar lands
   in roughly the same position as the section toolbar — without this the
   inline toolbar paints on top of the section's because it lives in a
   deeper stacking context. */
.esg-d-section-wrap > .esg-d-vrow-toolbar { z-index: 10; }
.esg-d-inline > .esg-d-vrow-toolbar { z-index: 3; }

/* When the cursor is over an inline block inside a section, the section's
   own toolbar hides — the user is interacting with the deeper element, so
   only the inline-block toolbar should be visible. The section toolbar
   reappears the moment the cursor moves out of any inline block but stays
   inside the section (e.g. hovering the section's gutter). Same for the
   case where an inline block is selected: its toolbar wins, section's hides. */
.esg-d-section-wrap:has(.esg-d-inline:hover) > .esg-d-vrow-toolbar,
.esg-d-section-wrap:has(.esg-d-inline.is-selected) > .esg-d-vrow-toolbar {
  display: none !important;
}
.esg-d-vrow-label {
  color: rgba(255, 255, 255, 0.85);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0 8px;
  text-transform: uppercase;
  white-space: nowrap;
}
.esg-d-vrow-btn {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 13px;
  height: 26px;
  justify-content: center;
  width: 26px;
}
.esg-d-vrow-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}
.esg-d-vrow-btn:disabled { cursor: not-allowed; opacity: 0.3; }
.esg-d-vrow-btn-danger:hover:not(:disabled) {
  background: rgba(248, 113, 113, 0.25);
  color: #FCA5A5;
}
.esg-d-vrow-handle {
  cursor: grab;
  letter-spacing: -2px;
}
.esg-d-vrow-handle:active { cursor: grabbing; }

.esg-d-palette {
  background: #FFF;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 12px;
  position: sticky;
  top: 16px;
}
.esg-d-palette-head { color: var(--gray-700); font-size: 13px; margin-bottom: 10px; }
.esg-d-palette-head strong { display: block; }
.esg-d-palette-head span { color: var(--gray-500); font-size: 11px; }
.esg-d-palette-groups { display: flex; flex-direction: column; gap: 14px; }
.esg-d-palette-group { display: flex; flex-direction: column; gap: 6px; }
.esg-d-palette-group-title {
  color: var(--gray-500);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}
.esg-d-palette-list { display: flex; flex-direction: column; gap: 4px; }
.esg-d-palette-item {
  align-items: center;
  background: #F8FAFC;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  gap: 10px;
  padding: 8px 10px;
  text-align: left;
  transition: background 0.12s, border-color 0.12s;
  width: 100%;
}
.esg-d-palette-item:hover { background: #FFF; border-color: var(--gray-300); }
.esg-d-palette-icon {
  align-items: center;
  background: #FF5C05;
  border-radius: 6px;
  color: #FFF;
  display: inline-flex;
  flex-shrink: 0;
  font: bold 11px/1 Arial, sans-serif;
  height: 22px;
  justify-content: center;
  width: 22px;
}

.esg-d-canvas-wrap {
  background: #FFF;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 220px;
  padding: 12px;
}
.esg-d-canvas-head {
  align-items: center;
  color: var(--gray-700);
  display: flex;
  font-size: 13px;
  gap: 8px;
  justify-content: space-between;
  margin-bottom: 4px;
}
.esg-d-canvas-head-actions { align-items: center; display: inline-flex; gap: 4px; }
.esg-d-canvas-count { color: var(--gray-500); font-size: 11px; padding-left: 8px; }
.esg-d-history-btn { font-size: 13px; }

.esg-d-errors {
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  border-radius: 10px;
  color: #78350F;
  font-size: 12px;
  margin-top: 10px;
  padding: 10px 12px;
}
.esg-d-errors strong { display: block; margin-bottom: 4px; }
.esg-d-errors ul { list-style: disc; margin: 0; padding-left: 18px; }

.esg-be-convert-bar {
  align-items: center;
  background: linear-gradient(135deg, rgba(255, 92, 5, 0.06), rgba(107, 33, 168, 0.06));
  border: 1px solid rgba(255, 92, 5, 0.30);
  border-radius: 12px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 12px 14px;
}
.esg-be-convert-bar strong { color: var(--gray-900); display: block; font-size: 13px; }
.esg-be-convert-bar span { color: var(--gray-700); display: block; font-size: 12px; margin-top: 2px; }
@media (max-width: 720px) { .esg-be-convert-bar { grid-template-columns: 1fr; } }
.esg-d-canvas-empty {
  background: #F8FAFC;
  border: 2px dashed var(--gray-200);
  border-radius: 10px;
  color: var(--gray-500);
  padding: 36px 16px;
  text-align: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.esg-d-canvas-empty.is-active { border-color: rgba(255, 92, 5, 0.45); }
.esg-d-canvas-empty.is-drop-target {
  background: rgba(255, 92, 5, 0.08);
  border-color: #FF5C05;
  color: #C2410C;
}
.esg-d-canvas-empty strong { color: var(--gray-700); display: block; font-size: 14px; margin-bottom: 4px; }
.esg-d-canvas-empty span { font-size: 12px; }
.esg-d-canvas-empty.is-drop-target strong { color: #C2410C; }

/* Drop-here zone at the end of a populated canvas — hidden by default,
   appears as a dashed pill when a palette item is being dragged. */
.esg-d-canvas-end {
  border: 2px dashed transparent;
  border-radius: 10px;
  color: var(--gray-500);
  font-size: 12px;
  height: 0;
  margin-top: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  text-align: center;
  transition: height 0.18s, opacity 0.18s, margin-top 0.18s, padding 0.18s, background 0.15s, border-color 0.15s, color 0.15s;
}
.esg-d-canvas-end.is-active {
  border-color: rgba(255, 92, 5, 0.40);
  height: auto;
  margin-top: 6px;
  opacity: 1;
  padding: 14px 16px;
}
.esg-d-canvas-end.is-drop-target {
  background: rgba(255, 92, 5, 0.08);
  border-color: #FF5C05;
  color: #C2410C;
}
.esg-d-canvas-list { display: flex; flex-direction: column; gap: 6px; }
.esg-d-canvas-row {
  align-items: center;
  background: #F8FAFC;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  cursor: pointer;
  display: grid;
  gap: 8px;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  padding: 8px 10px;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.esg-d-canvas-row.is-dragging {
  background: #FFF;
  border-color: #FF5C05;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
  cursor: grabbing;
}
.esg-d-drag-handle {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--gray-400);
  cursor: grab;
  display: flex;
  font-size: 16px;
  height: 100%;
  justify-content: center;
  letter-spacing: -2px;
  padding: 0;
  touch-action: none;
  width: 22px;
}
.esg-d-drag-handle:hover { color: var(--gray-600); }
.esg-d-drag-handle:focus-visible {
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(255, 92, 5, 0.35);
  color: var(--gray-700);
  outline: none;
}
.esg-d-drag-handle:active { cursor: grabbing; }
.esg-d-canvas-row:hover { background: #FFF; }
.esg-d-canvas-row.is-selected { background: #FFF; border-color: #FF5C05; box-shadow: 0 0 0 2px rgba(255, 92, 5, 0.18); }
.esg-d-canvas-row-meta { align-items: center; display: flex; gap: 10px; min-width: 0; }
.esg-d-canvas-icon {
  align-items: center;
  background: var(--gray-200);
  border-radius: 6px;
  color: var(--gray-700);
  display: inline-flex;
  flex-shrink: 0;
  font: bold 11px/1 Arial, sans-serif;
  height: 24px;
  justify-content: center;
  width: 24px;
}
.esg-d-canvas-row.is-selected .esg-d-canvas-icon { background: #FF5C05; color: #FFF; }
.esg-d-canvas-row-text { display: flex; flex-direction: column; min-width: 0; }
.esg-d-canvas-row-text strong { color: var(--gray-900); font-size: 13px; }
.esg-d-canvas-row-text span {
  color: var(--gray-500);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.esg-d-canvas-row-actions { display: inline-flex; gap: 2px; }
.esg-d-row-btn {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--gray-600);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  height: 26px;
  width: 26px;
}
.esg-d-row-btn:hover:not(:disabled) { background: var(--gray-100); color: var(--gray-900); }
.esg-d-row-btn:disabled { cursor: not-allowed; opacity: 0.3; }
.esg-d-row-btn-danger:hover:not(:disabled) { background: #FEF2F2; color: #B91C1C; }

.esg-d-properties {
  background: #FFF;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  padding: 12px;
  position: sticky;
  top: 16px;
}
.esg-d-section { display: flex; flex-direction: column; gap: 8px; }
.esg-d-section h4 {
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0;
  padding-bottom: 6px;
  text-transform: uppercase;
}
.esg-d-block-meta { color: var(--gray-700); font-size: 12px; margin: 4px 0; }
.esg-d-block-meta strong { color: var(--gray-900); display: block; font-size: 13px; margin-bottom: 2px; }
.esg-d-prop-list { display: flex; flex-direction: column; gap: 10px; }
.esg-d-prop-divider {
  border-top: 1px solid var(--gray-100);
  color: var(--gray-500);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 6px 0 0;
  padding-top: 8px;
  text-transform: uppercase;
}

/* Four-cell padding editor (Top / Right / Bottom / Left) plus an "All sides"
   shortcut that fills all four when the user wants uniform padding. */
.esg-d-padding-box {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.esg-d-padding-cell {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.esg-d-padding-cell > span {
  color: var(--gray-500);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.esg-d-padding-cell input {
  background: #FFF;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  padding: 5px 6px;
  text-align: center;
  width: 100%;
  -moz-appearance: textfield;
}
.esg-d-padding-cell input::-webkit-outer-spin-button,
.esg-d-padding-cell input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.esg-d-padding-all {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr auto;
  margin-top: 6px;
}
.esg-d-padding-all > span {
  color: var(--gray-500);
  font-size: 11px;
}
.esg-d-padding-all input {
  background: #F8FAFC;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  padding: 5px 8px;
  text-align: center;
  width: 64px;
}
.esg-d-prop label { display: flex; flex-direction: column; gap: 4px; }
.esg-d-prop label > span {
  color: var(--gray-700);
  font-size: 11px;
  font-weight: 600;
}
.esg-d-prop input[type="text"],
.esg-d-prop input[type="url"],
.esg-d-prop input[type="number"],
.esg-d-prop select,
.esg-d-prop textarea {
  background: #FFF;
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  padding: 7px 10px;
  width: 100%;
}
.esg-d-prop input[type="color"] {
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  cursor: pointer;
  height: 34px;
  padding: 2px;
  width: 100%;
}
.esg-d-prop textarea { font-family: inherit; min-height: 80px; resize: vertical; }

/* List editor (services items, etc.) */
.esg-d-list { display: flex; flex-direction: column; gap: 8px; }
.esg-d-list-item {
  background: #F8FAFC;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
}
.esg-d-list-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.esg-d-list-head > span {
  color: var(--gray-500);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.esg-d-list-head-actions { display: inline-flex; gap: 2px; }
.esg-d-list-add { align-self: flex-start; font-size: 12px; padding: 6px 12px; }

.esg-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: 24px;
}
@media (max-width: 1080px) { .esg-grid { grid-template-columns: 1fr; } }

.esg-col-editor, .esg-col-preview { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.esg-col-preview { position: relative; }

/* Designer-mode: drop-target overlay rendered (via portal) into this column
   when a palette item is being dragged. Sits above the iframe with absolute
   positioning so dnd-kit can register `over` events. The iframe's
   pointer-events get disabled (via body class below) for the same reason —
   without it, the iframe absorbs pointermove and the drag loses tracking. */
.esg-d-preview-portal {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 50;
}
.esg-d-preview-drop {
  align-items: center;
  background: rgba(255, 92, 5, 0.05);
  border: 2px dashed rgba(255, 92, 5, 0.45);
  border-radius: 14px;
  display: flex;
  inset: 0;
  justify-content: center;
  pointer-events: auto;
  position: absolute;
  transition: background 0.15s, border-color 0.15s;
}
.esg-d-preview-drop.is-over {
  background: rgba(255, 92, 5, 0.12);
  border-color: #FF5C05;
}
.esg-d-preview-drop-inner {
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 22px;
  text-align: center;
}
.esg-d-preview-drop-inner strong { color: #C2410C; font-size: 14px; }
.esg-d-preview-drop-inner span { color: var(--gray-600); font-size: 12px; }
body.esg-d-dragging-palette .esg-iframe { pointer-events: none; }

/* Editor */
.esg-editor { display: flex; flex-direction: column; gap: 16px; }

.esg-mode-row { display: flex; flex-wrap: wrap; gap: 8px; }
.esg-mode-btn {
  background: #FFF;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  color: var(--gray-700);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 8px 14px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.esg-mode-btn.is-active {
  background: var(--gray-900);
  border-color: var(--gray-900);
  color: #FFF;
}

.esg-tabs {
  background: #FFF;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
}
.esg-tab {
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--gray-700);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  transition: background 0.15s, color 0.15s;
}
.esg-tab:hover { background: var(--gray-100); }
.esg-tab.is-active { background: var(--gray-900); color: #FFF; }

.esg-tab-body { display: flex; flex-direction: column; gap: 16px; }

.esg-stack { display: flex; flex-direction: column; gap: 14px; }

.esg-fieldset {
  background: #FFF;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 16px;
}
.esg-fieldset legend {
  background: var(--gray-900);
  border-radius: 999px;
  color: #FFF;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  padding: 4px 12px;
  text-transform: uppercase;
}

.esg-row { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .esg-row { grid-template-columns: 1fr; } }
.esg-row .esg-field { min-width: 0; }

.esg-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.esg-field.is-full { grid-column: 1 / -1; }
.esg-field > span {
  color: var(--gray-700);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.esg-field input,
.esg-field select,
.esg-field textarea {
  background: #FFF;
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  color: var(--gray-900);
  font: inherit;
  padding: 10px 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}
.esg-field input[type="color"] {
  height: 42px;
  padding: 4px 6px;
  cursor: pointer;
}
.esg-field input:focus,
.esg-field select:focus,
.esg-field textarea:focus {
  border-color: #FF5C05;
  box-shadow: 0 0 0 3px rgba(255, 92, 5, 0.18);
  outline: none;
}
.esg-field textarea { font-family: inherit; min-height: 96px; resize: vertical; }

.esg-hint { color: var(--gray-500); font-size: 12px; margin: 0; }
.esg-error { color: #B91C1C; font-size: 12px; }

.esg-toggle {
  align-items: center;
  background: #F8FAFC;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  font-size: 13px;
  font-weight: 600;
  gap: 10px;
  padding: 10px 12px;
  user-select: none;
}
.esg-toggle input { accent-color: #FF5C05; }
.esg-toggle-inline {
  background: transparent;
  border: 0;
  padding: 0;
  font-weight: 500;
}
.esg-toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}

.esg-radio-row {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.esg-radio-card {
  background: #FFF;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.esg-radio-card.is-active {
  border-color: #FF5C05;
  box-shadow: 0 0 0 2px rgba(255, 92, 5, 0.18);
}
.esg-radio-card input { display: none; }
.esg-radio-card strong { color: var(--gray-900); font-size: 13px; }
.esg-radio-card span { color: var(--gray-600); font-size: 12px; }

.esg-layout-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.esg-layout-card {
  background: #FFF;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.esg-layout-card.is-active {
  border-color: #FF5C05;
  box-shadow: 0 0 0 2px rgba(255, 92, 5, 0.18);
}
.esg-layout-card input { display: none; }
.esg-layout-card strong { color: var(--gray-900); font-size: 13px; }
.esg-layout-card span { color: var(--gray-600); font-size: 12px; }

.esg-image-upload {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 90px 1fr;
}
.esg-image-upload .esg-image-url { grid-column: 1 / -1; }
.esg-image-upload .esg-hint { grid-column: 1 / -1; }
.esg-image-preview {
  align-items: center;
  background: #F8FAFC;
  border: 1px dashed var(--gray-300);
  border-radius: 12px;
  display: flex;
  height: 90px;
  justify-content: center;
  overflow: hidden;
  width: 90px;
}
.esg-image-preview img { display: block; max-height: 80px; max-width: 80px; object-fit: contain; }
.esg-image-empty { color: var(--gray-500); font-size: 11px; text-align: center; }
.esg-image-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.esg-image-url {
  background: #FFF;
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  font: inherit;
  padding: 10px 12px;
  width: 100%;
}

.esg-services-items { display: flex; flex-direction: column; gap: 12px; }
.esg-services-item {
  background: #F8FAFC;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}
.esg-services-item-header { align-items: center; display: flex; justify-content: space-between; }
.esg-services-item-label {
  color: var(--gray-500);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.esg-services-item .esg-btn-danger:disabled { cursor: not-allowed; opacity: 0.5; }

.esg-social-list { display: flex; flex-direction: column; gap: 8px; }
.esg-social-row {
  background: #FFF;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px;
}
.esg-social-row.is-on { border-color: #FF5C05; box-shadow: 0 0 0 2px rgba(255, 92, 5, 0.10); }
.esg-social-row-head {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 200px 1fr auto;
}
.esg-social-toggle { align-items: center; cursor: pointer; display: flex; gap: 10px; user-select: none; }
.esg-social-toggle input { accent-color: #FF5C05; }
.esg-social-name { font-size: 13px; font-weight: 700; }
.esg-social-input {
  background: #F8FAFC;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  font: inherit;
  padding: 8px 10px;
  width: 100%;
}
.esg-social-input:disabled { color: var(--gray-400); }
.esg-social-customise {
  font-size: 12px;
  height: 32px;
  padding: 0 12px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.esg-social-row-details {
  border-top: 1px dashed var(--gray-200);
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
  padding-top: 12px;
}
@media (max-width: 720px) {
  .esg-social-row-head { grid-template-columns: 1fr; }
  .esg-social-customise { justify-self: start; }
}

/* Buttons */
.esg-btn {
  background: #FFF;
  border: 1px solid var(--gray-300);
  border-radius: 999px;
  color: var(--gray-900);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 14px;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.esg-btn:hover { background: var(--gray-100); border-color: var(--gray-400); }
.esg-btn-primary {
  background: linear-gradient(135deg, #FF5C05, #DB4A00);
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(255, 92, 5, 0.25);
  color: #FFF;
}
.esg-btn-primary:hover {
  background: linear-gradient(135deg, #FF6A1A, #E85100);
  border-color: transparent;
  color: #FFF;
  box-shadow: 0 10px 24px rgba(255, 92, 5, 0.32);
}
.esg-btn-pulse {
  position: relative;
  overflow: visible;
  animation: esg-btn-pulse-glow 2.2s ease-in-out infinite;
}
.esg-btn-pulse::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 1px solid rgba(255, 92, 5, 0.45);
  pointer-events: none;
  animation: esg-btn-pulse-ring 2.2s ease-out infinite;
}
@keyframes esg-btn-pulse-glow {
  0%, 100% { box-shadow: 0 6px 16px rgba(255, 92, 5, 0.25); }
  50% { box-shadow: 0 16px 34px rgba(255, 92, 5, 0.45); }
}
@keyframes esg-btn-pulse-ring {
  0% { opacity: 0; transform: scale(0.96); }
  25% { opacity: 0.6; }
  100% { opacity: 0; transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .esg-btn-pulse, .esg-btn-pulse::after { animation: none; }
}
.esg-btn-ghost { background: transparent; border-color: var(--gray-200); }
.esg-btn-danger { color: #B91C1C; border-color: #FCA5A5; }
.esg-btn-danger:hover { background: #FEF2F2; border-color: #F87171; }
.esg-btn-demo {
  background: rgba(255, 92, 5, 0.08);
  border-color: rgba(255, 92, 5, 0.35);
  color: #C2410C;
}
.esg-btn-demo:hover { background: rgba(255, 92, 5, 0.14); border-color: rgba(255, 92, 5, 0.55); }

.esg-icon-base-row { display: grid; gap: 8px; grid-template-columns: 1fr auto; align-items: stretch; }
.esg-icon-base-row input { min-width: 0; }
@media (max-width: 540px) { .esg-icon-base-row { grid-template-columns: 1fr; } }

/* Preview */
.esg-preview {
  background: #FFF;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
}
.esg-preview-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}
.esg-pill-group { display: inline-flex; background: var(--gray-100); border-radius: 999px; padding: 3px; gap: 2px; }
.esg-pill {
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--gray-700);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
}
.esg-pill.is-active { background: #FFF; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); color: var(--gray-900); }
.esg-pill-current { background: #FFE2D1; color: #C2410C; padding: 6px 10px; }
.esg-preview-toggles { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.esg-preview-frame {
  background: #F8FAFC;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  margin: 0 auto;
  overflow: hidden;
  width: 100%;
}
.esg-preview-frame.is-dark { background: #0F172A; }
.esg-iframe {
  border: 0;
  display: block;
  height: 520px;
  width: 100%;
  background: transparent;
}

.esg-source, .esg-plain {
  background: #0F172A;
  border-radius: 12px;
  color: #F8FAFC;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.55;
  margin: 0;
  max-height: 520px;
  overflow: auto;
  padding: 14px;
  white-space: pre-wrap;
  word-break: break-word;
}

.esg-copy-bar {
  background: #FFF;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px;
}

/* Compatibility checker */
.esg-checker {
  background: #FFF;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
}
.esg-checker.is-clean { background: #ECFDF5; border-color: #A7F3D0; }
.esg-checker.is-clean strong { color: #065F46; }
.esg-checker.is-clean span { color: #047857; font-size: 13px; }
.esg-checker > strong { color: var(--gray-900); font-size: 13px; }
.esg-checker-list {
  border-radius: 10px;
  font-size: 12px;
  list-style: disc;
  margin: 0;
  padding: 8px 14px 8px 28px;
}
.esg-checker-error { background: #FEF2F2; color: #991B1B; }
.esg-checker-warn { background: #FEF3C7; color: #78350F; }
.esg-checker-info { background: #EFF6FF; color: #1E3A8A; }

/* Saved projects */
.esg-saved {
  border-top: 1px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
}
.esg-saved h3 {
  align-items: center;
  color: var(--gray-900);
  display: flex;
  font-size: 16px;
  gap: 10px;
  margin: 0;
}
.esg-saved-count {
  background: var(--gray-100);
  border-radius: 999px;
  color: var(--gray-700);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 10px;
}
.esg-saved-table-wrap {
  background: #FFF;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  overflow: hidden;
}
.esg-saved-table {
  border-collapse: collapse;
  font-size: 13px;
  width: 100%;
}
.esg-saved-table thead th {
  background: var(--gray-50, #F8FAFC);
  border-bottom: 1px solid var(--gray-200);
  color: var(--gray-600);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 10px 14px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.esg-saved-th-actions { text-align: right !important; }
.esg-saved-table tbody tr {
  transition: background 0.12s;
}
.esg-saved-table tbody tr + tr td {
  border-top: 1px solid var(--gray-100);
}
.esg-saved-table tbody tr:hover td {
  background: var(--gray-50, #F8FAFC);
}
.esg-saved-table tbody tr.is-active td {
  background: rgba(255, 92, 5, 0.06);
}
.esg-saved-table tbody tr.is-active td:first-child {
  box-shadow: inset 3px 0 0 0 #FF5C05;
}
.esg-saved-table td {
  color: var(--gray-700);
  padding: 10px 14px;
  vertical-align: middle;
}
.esg-saved-table td.esg-saved-name { color: var(--gray-900); }
.esg-saved-table td.esg-saved-name strong { color: var(--gray-900); font-size: 13px; font-weight: 700; }
.esg-saved-table td.esg-saved-actions-cell { padding: 6px 10px; text-align: right; white-space: nowrap; }
.esg-saved-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
@media (max-width: 720px) {
  .esg-saved-table thead { display: none; }
  .esg-saved-table tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      'name actions'
      'meta actions';
    gap: 2px 12px;
    padding: 10px 14px;
  }
  .esg-saved-table tbody tr + tr td { border-top: 0; }
  .esg-saved-table tbody tr { border-top: 1px solid var(--gray-100); }
  .esg-saved-table td { border: 0 !important; padding: 0 !important; }
  .esg-saved-table td.esg-saved-name { grid-area: name; }
  .esg-saved-table td:nth-child(2),
  .esg-saved-table td:nth-child(3) {
    color: var(--gray-500);
    display: inline;
    font-size: 12px;
    grid-area: meta;
  }
  .esg-saved-table td:nth-child(2)::after { content: ' · '; }
  .esg-saved-table td.esg-saved-actions-cell { grid-area: actions; align-self: center; }
}

/* Toast */
.esg-toast {
  background: var(--gray-900);
  border-radius: 10px;
  bottom: 24px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.25);
  color: #FFF;
  font-size: 13px;
  font-weight: 600;
  padding: 12px 18px;
  position: fixed;
  right: 24px;
  z-index: 9999;
}
.esg-toast-error { background: #B91C1C; }

@media (max-width: 720px) {
  .esg-shell { padding: 16px; width: calc(100% - 24px); }
  .esg-toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
  .esg-toolbar-name input { min-width: 0; width: 100%; }
}

/* === Guided Builder (esg-d2-*) === */

.esg-d2-tabs-row {
  align-items: center;
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  margin-top: 16px;
  padding: 0 4px;
}
.esg-d2-tabs-list { display: flex; flex-wrap: wrap; gap: 2px; }
.esg-d2-tab-chip {
  background: transparent;
  border: 0;
  color: var(--gray-600);
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  min-height: 44px;
  padding: 12px 14px;
  position: relative;
}
.esg-d2-tab-chip:hover { color: var(--gray-900); }
.esg-d2-tab-chip:focus-visible {
  border-radius: 6px;
  outline: 2px solid #2563EB;
  outline-offset: 2px;
}
.esg-d2-tab-chip.is-active { color: var(--gray-900); }
.esg-d2-tab-chip.is-active::after {
  background: #2563EB;
  border-radius: 2px 2px 0 0;
  bottom: -1px;
  content: "";
  height: 2px;
  left: 14px;
  position: absolute;
  right: 14px;
}

/* === Help icon (esg-help-*) === */
.esg-help-wrap {
  display: inline-flex;
  margin-left: 6px;
  position: relative;
  vertical-align: middle;
}
.esg-help-btn {
  align-items: center;
  background: var(--gray-100, #F1F5F9);
  border: 1px solid var(--gray-200, #E2E8F0);
  border-radius: 999px;
  color: var(--gray-600, #475569);
  cursor: help;
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  height: 16px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  width: 16px;
}
.esg-help-btn:hover { background: var(--accent-100, #FFE7D6); color: #FF5C05; }
.esg-help-btn:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }
.esg-help-tip {
  background: #0F172A;
  border-radius: 6px;
  bottom: calc(100% + 8px);
  box-shadow: 0 -8px 22px rgba(15, 23, 42, 0.18);
  color: #F1F5F9;
  font-size: 12px;
  font-weight: 400;
  left: 50%;
  line-height: 1.5;
  max-width: 300px;
  opacity: 0;
  padding: 9px 11px;
  pointer-events: none;
  position: absolute;
  text-align: left;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 120ms ease 200ms, transform 120ms ease 200ms;
  visibility: hidden;
  white-space: normal;
  width: max-content;
  z-index: 200;
}
.esg-help-tip::before {
  border: 6px solid transparent;
  border-top-color: #0F172A;
  bottom: -12px;
  content: "";
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}
.esg-help-wrap:hover .esg-help-tip,
.esg-help-wrap:focus-within .esg-help-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  .esg-help-tip { transition: opacity 80ms ease, transform 0ms; }
}
@media (max-width: 720px) {
  .esg-help-tip { max-width: calc(100vw - 32px); left: auto; right: 0; transform: translateY(4px); }
  .esg-help-tip::before { left: auto; right: 6px; transform: none; }
  .esg-help-wrap:hover .esg-help-tip,
  .esg-help-wrap:focus-within .esg-help-tip { transform: translateY(0); }
}

.esg-d2-tab-tip-wrap {
  display: inline-block;
  position: relative;
}
.esg-d2-tab-tip {
  background: #0F172A;
  border-radius: 6px;
  bottom: calc(100% + 10px);
  box-shadow: 0 -8px 22px rgba(15, 23, 42, 0.18);
  color: #F1F5F9;
  font-size: 12px;
  font-weight: 400;
  left: 50%;
  line-height: 1.5;
  max-width: 320px;
  opacity: 0;
  padding: 10px 12px;
  pointer-events: none;
  position: absolute;
  text-align: left;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 120ms ease 220ms, transform 120ms ease 220ms;
  visibility: hidden;
  width: max-content;
  z-index: 200;
}
.esg-d2-tab-tip::before {
  border: 6px solid transparent;
  border-top-color: #0F172A;
  bottom: -12px;
  content: "";
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}
.esg-d2-tab-tip-wrap:hover .esg-d2-tab-tip,
.esg-d2-tab-tip-wrap:focus-within .esg-d2-tab-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  .esg-d2-tab-tip { transition: opacity 80ms ease, transform 0ms; }
}
@media (max-width: 720px) {
  .esg-d2-tab-tip { max-width: calc(100vw - 32px); left: 0; transform: none; }
  .esg-d2-tab-tip::before { left: 24px; transform: none; }
  .esg-d2-tab-tip-wrap:hover .esg-d2-tab-tip,
  .esg-d2-tab-tip-wrap:focus-within .esg-d2-tab-tip { transform: none; }
}

.esg-d2-actions-cluster {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0;
}
.esg-d2-divider-v {
  align-self: stretch;
  background: var(--gray-200);
  margin: 6px 4px;
  width: 1px;
}
.esg-d2-copymode {
  background: var(--gray-100, #F4F6FA);
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  display: inline-flex;
  gap: 2px;
  padding: 2px;
}
.esg-d2-copymode-opt {
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--gray-600);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  height: 28px;
  padding: 0 12px;
  transition: background 120ms ease, color 120ms ease;
}
.esg-d2-copymode-opt:hover { color: var(--gray-900); }
.esg-d2-copymode-opt.is-on {
  background: #FFF;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  color: var(--gray-900);
}
.esg-d2-copymode-opt:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .esg-d2-copymode-opt { transition: none; }
}

.esg-d2-overflow { position: relative; }
.esg-d2-overflow-btn { font-size: 18px; min-width: 36px; }
.esg-d2-overflow-menu {
  background: #FFF;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  min-width: 180px;
  padding: 4px;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 100;
}
.esg-d2-overflow-menu button {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--gray-800);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  padding: 8px 12px;
  text-align: left;
}
.esg-d2-overflow-menu button:hover { background: var(--gray-100); }

/* Layout thumbnail picker (Signature mode 4x4) */
.esg-d2-layout-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 14px;
}
.esg-d2-layout-thumb {
  background: #FFF;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  position: relative;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.esg-d2-layout-thumb:hover { border-color: #2563EB; }
.esg-d2-layout-thumb.is-selected {
  border: 2px solid #2563EB;
  padding: 9px;
}
.esg-d2-layout-thumb input[type="radio"] {
  height: 1px;
  margin: 0;
  opacity: 0;
  position: absolute;
  width: 1px;
}
.esg-d2-layout-thumb input[type="radio"]:focus-visible + .esg-d2-layout-thumb-mini {
  box-shadow: 0 0 0 2px #2563EB;
}
.esg-d2-layout-thumb-mini {
  background: #F8FAFC;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  display: block;
  height: 64px;
  padding: 6px 10px;
}
.esg-d2-layout-thumb-mini > .esg-d2-thumb { height: 100%; }
.esg-d2-thumb { display: flex; gap: 6px; }
.esg-d2-thumb-stack { align-items: stretch; display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.esg-d2-thumb-row { align-items: stretch; flex-direction: row; }
.esg-d2-thumb-center { justify-content: center; align-items: center; text-align: center; }
.esg-d2-thumb-center > .esg-d2-thumb-bar { margin: 0 auto; }
.esg-d2-thumb-center-v { align-items: center; }
.esg-d2-thumb-tight { gap: 2px; }
.esg-d2-thumb-bar {
  background: #CBD5E1;
  border-radius: 2px;
  display: block;
  height: 5px;
  width: 100%;
}
.esg-d2-thumb-bar.is-thick { background: #334155; height: 8px; }
.esg-d2-thumb-bar.is-short { width: 50%; }
.esg-d2-thumb-bar.is-shorter { width: 30%; }
.esg-d2-thumb-bar.is-banner { background: #2563EB; height: 10px; }
.esg-d2-thumb-square { background: #334155; border-radius: 3px; display: block; flex: 0 0 auto; height: 28px; width: 28px; }
.esg-d2-thumb-square.is-small { height: 16px; width: 16px; }
.esg-d2-thumb-circle { background: linear-gradient(135deg, #FF5C05, #6B21A8); border-radius: 999px; display: block; flex: 0 0 auto; height: 28px; width: 28px; }
.esg-d2-thumb-vrule { background: #FF5C05; flex: 0 0 auto; width: 2px; }
.esg-d2-thumb-vstripe { background: #FF5C05; border-radius: 2px; flex: 0 0 auto; width: 4px; }
.esg-d2-thumb-panel { background: linear-gradient(180deg, #2563EB, #6B21A8); border-radius: 3px; flex: 0 0 auto; width: 18px; }
.esg-d2-thumb-banner { background: #FF5C05; border-radius: 2px; display: block; height: 12px; width: 100%; }
.esg-d2-thumb-strip { background: #1E40AF; border-radius: 2px; display: block; height: 14px; width: 100%; }
.esg-d2-thumb-pill {
  align-self: flex-start;
  background: #FF5C05;
  border-radius: 999px;
  display: inline-block;
  height: 8px;
  width: 36%;
}
.esg-d2-thumb-fineprint {
  background: #94A3B8;
  border-radius: 1px;
  display: block;
  height: 2px;
  width: 70%;
}
.esg-d2-thumb-mono {
  align-items: center;
  background: linear-gradient(135deg, #FF5C05, #B91C1C);
  border-radius: 999px;
  color: #FFFFFF;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 800;
  height: 22px;
  justify-content: center;
  width: 22px;
}
.esg-d2-thumb-badge {
  background: #FF5C05;
  border-radius: 2px;
  display: block;
  flex: 0 0 auto;
  height: 5px;
  width: 5px;
}
.esg-d2-thumb-iconrow {
  align-items: center;
  display: flex;
  gap: 5px;
  width: 100%;
}
.esg-d2-thumb-grid2 {
  column-gap: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 3px;
}
.esg-d2-thumb-card {
  border: 1px solid #CBD5E1;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 4px 6px;
}
.esg-d2-thumb-card-top {
  align-items: center;
  display: flex;
  gap: 4px;
}
.esg-d2-thumb-card-top > .esg-d2-thumb-bar { flex: 1; }
.esg-d2-thumb-dots {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
}
.esg-d2-thumb-dots i {
  background: #2563EB;
  border-radius: 999px;
  display: block;
  height: 5px;
  width: 5px;
}
.esg-d2-layout-thumb-label {
  color: var(--gray-700);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Step bar */
.esg-d2-stepbar {
  align-items: center;
  background: #F8FAFC;
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  min-height: 36px;
  padding: 8px 16px;
}
.esg-d2-stepbar-crumbs { display: flex; flex-wrap: wrap; gap: 14px; }
.esg-d2-crumb {
  color: var(--gray-500);
  font-size: 12px;
  font-weight: 600;
}
.esg-d2-crumb.is-on { color: #1D4ED8; }
.esg-d2-stepbar-skip {
  background: transparent;
  border: 0;
  color: var(--gray-600);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
}

/* Designer surface (m2) */
.esg-d2-designer {
  display: grid;
  gap: 0;
  grid-template-rows: auto 1fr auto;
  position: relative;
}
.esg-d2-canvas-area {
  background: #F8FAFB;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  min-height: 480px;
  padding: 16px;
  position: relative;
}
.esg-d2-canvas-head {
  align-items: center;
  color: var(--gray-700);
  display: flex;
  font-size: 13px;
  gap: 8px;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 0 4px;
}
.esg-d2-canvas-paper {
  margin: 0 auto;
  max-width: 720px;
  transition: margin 220ms ease;
}
/* Shell panel overlays the canvas instead of pushing it (no jump on open). */

/* Bottom dock */
.esg-d2-dock {
  background: #FFF;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  margin-top: 12px;
  min-height: 92px;
  min-width: 0;
  padding: 8px 12px 12px;
  position: sticky;
  bottom: 0;
  z-index: 20;
}
.esg-d2-dock-pills {
  align-items: center;
  display: grid;
  gap: 6px;
  grid-template-columns: 1fr auto 1fr;
}
.esg-d2-dock-pills-group {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-self: start;
  min-width: 0;
}
.esg-d2-dock-pills-spacer { display: block; }
.esg-d2-pill {
  background: #FFF;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  color: var(--gray-600);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  min-height: 32px;
  padding: 5px 12px;
}
.esg-d2-pill:hover { color: var(--gray-900); }
.esg-d2-pill.is-on { background: #0F172A; border-color: #0F172A; color: #FFF; }
.esg-d2-pill:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }
.esg-d2-dock-toggle {
  font-size: 12px;
  height: 28px;
  padding: 0 14px;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.esg-d2-dock-strip {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.esg-d2-dock-strip > * { flex-shrink: 0; }
.esg-d2-dock.is-collapsed { min-height: 36px; padding: 6px 12px; }
.esg-d2-tile {
  align-items: center;
  background: #FFF;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  cursor: grab;
  display: grid;
  flex: 0 0 auto;
  font: inherit;
  gap: 8px;
  grid-template-columns: 36px 1fr;
  height: 60px;
  min-height: 44px;
  min-width: 152px;
  padding: 8px;
  text-align: left;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.esg-d2-tile:hover { border-color: #2563EB; }
.esg-d2-tile:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }
.esg-d2-tile.is-dragging { box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18); }
.esg-d2-tile-mini {
  align-items: center;
  background: #F8FAFC;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  display: grid;
  height: 36px;
  justify-items: center;
  overflow: hidden;
  width: 36px;
}
.esg-d2-tile-meta strong {
  color: var(--gray-900);
  display: block;
  font-size: 12px;
}
.esg-d2-tile-meta span {
  color: var(--gray-500);
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.esg-d2-mini-text { font: inherit; }
.esg-d2-mini-stack { display: grid; gap: 1px; }
.esg-d2-mini-square {
  background: #334155;
  border-radius: 2px;
  display: block;
  height: 18px;
  width: 18px;
}
.esg-d2-mini-square.is-img { background: linear-gradient(135deg, #94A3B8, #475569); }
.esg-d2-mini-circle {
  background: linear-gradient(135deg, #3B82F6, #1D4ED8);
  border-radius: 999px;
  display: block;
  height: 20px;
  width: 20px;
}
.esg-d2-mini-pill {
  background: #2563EB;
  border-radius: 4px;
  color: #FFF;
  font-size: 8px;
  font-weight: 700;
  padding: 3px 6px;
}
.esg-d2-mini-row { display: flex; gap: 3px; }
.esg-d2-mini-dot {
  background: #334155;
  border-radius: 2px;
  display: block;
  height: 8px;
  width: 8px;
}
.esg-d2-mini-lines { display: grid; gap: 2px; width: 22px; }
.esg-d2-mini-lines i {
  background: #CBD5E1;
  border-radius: 1px;
  display: block;
  height: 2px;
}
.esg-d2-mini-lines i:nth-child(2) { width: 60%; }
.esg-d2-mini-lines i:nth-child(3) { width: 40%; }
.esg-d2-mini-spacer {
  background: repeating-linear-gradient(0deg, #CBD5E1, #CBD5E1 2px, transparent 2px, transparent 4px);
  display: block;
  height: 18px;
  width: 14px;
}
.esg-d2-mini-divider {
  background: #334155;
  display: block;
  height: 2px;
  width: 22px;
}
.esg-d2-mini-banner {
  background: #2563EB;
  border-radius: 2px;
  color: #FFF;
  font-size: 8px;
  font-weight: 700;
  padding: 3px 6px;
}
.esg-d2-mini-grid { display: grid; gap: 2px; grid-template-columns: 1fr 1fr; }
.esg-d2-mini-grid i {
  background: #CBD5E1;
  border-radius: 1px;
  display: block;
  height: 8px;
}

/* Empty-state preset picker */
.esg-d2-empty-picker {
  margin: 24px auto;
  max-width: 640px;
  padding: 24px;
  text-align: center;
}
.esg-d2-empty-picker h4 {
  color: var(--gray-900);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 6px;
}
.esg-d2-empty-picker p {
  color: var(--gray-600);
  font-size: 13px;
  margin: 0 auto 16px;
  max-width: 56ch;
}
.esg-d2-preset-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 14px;
}
.esg-d2-preset {
  background: #FFF;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  padding: 12px;
  text-align: left;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.esg-d2-preset:hover { border-color: #2563EB; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06); }
.esg-d2-preset:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }
.esg-d2-preset-mini {
  background: #F8FAFC;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  height: 80px;
  padding: 8px;
}
.esg-d2-preset-stack { display: grid; gap: 4px; height: 100%; }
.esg-d2-preset-stack i {
  background: #CBD5E1;
  border-radius: 2px;
  display: block;
  height: 7px;
}
.esg-d2-preset-stack i.esg-d2-preset-thick { background: #334155; height: 11px; }
.esg-d2-preset-stack i.esg-d2-preset-short { width: 60%; }
.esg-d2-preset-stack i.esg-d2-preset-banner { background: #2563EB; height: 18px; }
.esg-d2-preset-cols { display: grid; gap: 6px; grid-template-columns: 1fr 1fr; height: 100%; }
.esg-d2-preset-cols > span { display: grid; gap: 4px; }
.esg-d2-preset-cols i {
  background: #CBD5E1;
  border-radius: 2px;
  display: block;
  height: 6px;
}
.esg-d2-preset-cols i.esg-d2-preset-thick { background: #334155; height: 10px; }
.esg-d2-preset-name {
  color: var(--gray-900);
  font-size: 13px;
  font-weight: 700;
  margin-top: 8px;
}
.esg-d2-preset-desc {
  color: var(--gray-500);
  font-size: 11px;
  margin-top: 2px;
}
.esg-d2-empty-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 18px;
}

/* Inline popover */
.esg-d2-popover {
  background: #FFF;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.10);
  max-height: calc(100vh - 24px);
  overflow: hidden;
  position: fixed;
  transition: opacity 120ms ease;
  width: 360px;
  z-index: 200;
}
.esg-d2-popover-head {
  align-items: center;
  border-bottom: 1px solid var(--gray-200);
  cursor: grab;
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
  touch-action: none;
  user-select: none;
}
.esg-d2-popover.is-dragging .esg-d2-popover-head { cursor: grabbing; }
.esg-d2-popover.is-dragging,
.esg-d2-popover.is-positioned { transition: none; }
.esg-d2-popover-head .esg-d2-popover-close { cursor: pointer; }
.esg-d2-popover-head strong { color: var(--gray-900); font-size: 13px; }
.esg-d2-popover-close {
  background: transparent;
  border: 0;
  color: var(--gray-600);
  cursor: pointer;
  font-size: 18px;
  height: 28px;
  width: 28px;
}
.esg-d2-popover-close:hover { color: var(--gray-900); }
.esg-d2-popover-body { max-height: calc(100vh - 80px); overflow-y: auto; }

/* Right-edge shell panel */
.esg-d2-shell-panel {
  background: #FFF;
  border-left: 1px solid var(--gray-200);
  bottom: 0;
  box-shadow: -8px 0 24px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  position: fixed;
  right: 0;
  top: 0;
  transition: transform 220ms ease;
  width: 360px;
  z-index: 200;
}
.esg-d2-shell-head {
  align-items: center;
  border-bottom: 1px solid var(--gray-200);
  cursor: grab;
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  touch-action: none;
  user-select: none;
}
.esg-d2-shell-panel.is-dragging .esg-d2-shell-head { cursor: grabbing; }
.esg-d2-shell-panel.is-dragging,
.esg-d2-shell-panel.is-positioned { transition: none; }
.esg-d2-shell-head strong { color: var(--gray-900); font-size: 14px; }
.esg-d2-shell-head .esg-d2-shell-close { cursor: pointer; }
.esg-d2-shell-close { height: 28px; padding: 0 10px; }
.esg-d2-shell-body { flex: 1; overflow-y: auto; padding: 0; }
.esg-d2-ref-deeplink { padding: 16px; }
.esg-d2-ref-desc { color: var(--gray-700); font-size: 13px; margin: 0 0 12px; }

/* Accordion (shared by popover + shell panel) */
.esg-d2-accordion { border-top: 1px solid var(--gray-200); }
.esg-d2-accordion:first-child { border-top: 0; }
.esg-d2-accordion summary {
  align-items: center;
  background: #FFF;
  color: var(--gray-900);
  cursor: pointer;
  display: flex;
  font-weight: 700;
  justify-content: space-between;
  list-style: none;
  padding: 12px 16px;
}
.esg-d2-accordion summary::-webkit-details-marker { display: none; }
.esg-d2-accordion[open] summary { background: #F8FAFC; }
.esg-d2-accordion-meta { color: var(--gray-500); font-size: 11px; font-weight: 600; }
.esg-d2-accordion-body { display: grid; gap: 10px; padding: 0 16px 14px; }
.esg-d2-prop-form { display: flex; flex-direction: column; gap: 0; }
.esg-d2-prop-form > .esg-d-block-meta { padding: 12px 16px 0; }

/* Page settings modal */
.esg-d2-modal-backdrop {
  align-items: center;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 16px;
  position: fixed;
  z-index: 9998;
}
.esg-d2-modal {
  background: #FFF;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.30);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 32px);
  max-width: 480px;
  overflow: hidden;
  width: 100%;
}
.esg-d2-modal-head {
  align-items: center;
  border-bottom: 1px solid var(--gray-200);
  cursor: grab;
  display: flex;
  justify-content: space-between;
  padding: 14px 18px;
  touch-action: none;
  user-select: none;
}
.esg-d2-modal.is-dragging .esg-d2-modal-head { cursor: grabbing; }
.esg-d2-modal.is-dragging { user-select: none; }
.esg-d2-modal.is-positioned { transition: none; }
.esg-d2-modal-head .esg-d2-modal-close { cursor: pointer; }
.esg-d2-modal-head strong { color: var(--gray-900); font-size: 15px; }
.esg-d2-modal-close {
  background: transparent;
  border: 0;
  color: var(--gray-600);
  cursor: pointer;
  font-size: 22px;
  height: 32px;
  width: 32px;
}
.esg-d2-modal-body {
  display: grid;
  gap: 14px;
  overflow-y: auto;
  padding: 18px;
}

/* First-use onboarding modal — scoped to the .esg-shell so it overlays the
   app card only, not the whole page. The shell has position:relative, so the
   backdrop pins inside it via inset:0. */
.esg-onb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-radius: inherit;
  z-index: 50;
}
.esg-onb-modal {
  background: #FFF;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.30);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  max-height: 100%;
  overflow: hidden;
}
.esg-onb-head {
  align-items: center;
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  justify-content: space-between;
  padding: 14px 18px;
  flex: 0 0 auto;
}
.esg-onb-head strong { color: var(--gray-900); font-size: 15px; }
.esg-onb-close {
  background: transparent;
  border: 0;
  color: var(--gray-500);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 4px 8px;
}
.esg-onb-close:hover { color: var(--gray-900); }
.esg-onb-body {
  display: grid;
  gap: 16px;
  overflow-y: auto;
  padding: 18px;
  flex: 1 1 auto;
  min-height: 0;
}
@media (max-width: 600px) {
  .esg-onb-backdrop { padding: 12px; }
}
.esg-onb-lead { color: var(--gray-700); font-size: 14px; line-height: 1.55; margin: 0; }
.esg-onb-lead strong { color: var(--gray-900); }
.esg-onb-parts {
  margin: 0;
  padding-left: 22px;
  display: grid;
  gap: 10px;
  color: var(--gray-700);
  font-size: 13.5px;
  line-height: 1.55;
}
.esg-onb-parts strong { color: var(--gray-900); }
.esg-onb-parts em { color: var(--gray-900); font-style: normal; font-weight: 600; }
.esg-onb-h {
  margin: 4px 0 0;
  color: var(--gray-900);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.esg-onb-sub {
  margin: 0;
  color: var(--gray-700);
  font-size: 13.5px;
  line-height: 1.55;
}
.esg-onb-steps {
  margin: 0;
  padding-left: 22px;
  display: grid;
  gap: 6px;
  color: var(--gray-700);
  font-size: 13.5px;
  line-height: 1.55;
}
.esg-onb-steps strong { color: var(--gray-900); }
.esg-onb-callout {
  background: #FFF7ED;
  border: 1px solid #FED7AA;
  border-left: 3px solid #FF5C05;
  border-radius: 8px;
  padding: 12px 14px;
  color: #7C2D12;
  font-size: 13px;
  line-height: 1.55;
}
.esg-onb-callout strong { color: #7C2D12; }
.esg-onb-callout-tip {
  background: #ECFDF5;
  border-color: #A7F3D0;
  border-left-color: #059669;
  color: #064E3B;
}
.esg-onb-callout-tip strong { color: #064E3B; }
.esg-onb-meta {
  margin: 0;
  color: var(--gray-500);
  font-size: 12px;
  line-height: 1.5;
}
.esg-onb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}
.esg-d2-modal-foot {
  border-top: 1px solid var(--gray-200);
  display: flex;
  justify-content: flex-end;
  padding: 12px 18px;
}

.esg-d2-saved {
  background: #FFF;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  margin-top: 18px;
  padding: 18px;
}
.esg-d2-saved-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}
.esg-d2-saved-head h3 {
  font-size: 16px;
  margin: 0;
}
.esg-d2-saved-head-actions {
  display: flex;
  gap: 8px;
}
.esg-d2-saved-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.esg-d2-saved-row {
  align-items: center;
  background: #FFF;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  display: grid;
  gap: 14px;
  grid-template-columns: 56px 1fr auto auto auto;
  padding: 10px 12px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.esg-d2-saved-row:hover {
  border-color: var(--gray-300, #D1D5DB);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}
.esg-d2-saved-row.is-current {
  border-color: var(--accent-600, #2563EB);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}
.esg-d2-saved-thumb {
  align-items: stretch;
  background: var(--gray-100, #F4F6FA);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  height: 44px;
  justify-content: center;
  padding: 6px 8px;
  width: 56px;
}
.esg-d2-saved-thumb .esg-d2-thumb-bar {
  background: var(--gray-400, #9CA3AF);
  border-radius: 1px;
  display: block;
  height: 3px;
  width: 80%;
}
.esg-d2-saved-thumb .esg-d2-thumb-bar.is-thick {
  background: var(--gray-700, #374151);
  height: 5px;
  width: 100%;
}
.esg-d2-saved-thumb .esg-d2-thumb-bar.is-short { width: 50%; }
.esg-d2-saved-thumb .esg-d2-thumb-bar.is-banner {
  background: var(--accent-600, #2563EB);
  height: 6px;
  width: 100%;
}
.esg-d2-saved-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.esg-d2-saved-meta strong {
  color: var(--gray-900);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.esg-d2-saved-meta span {
  color: var(--gray-600);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.esg-d2-saved-badge {
  background: var(--gray-100, #F4F6FA);
  border-radius: 999px;
  color: var(--gray-700, #374151);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  text-transform: uppercase;
  white-space: nowrap;
}
.esg-d2-saved-badge-designer { background: rgba(37, 99, 235, 0.10); color: var(--accent-700, #1D4ED8); }
.esg-d2-saved-badge-business-email { background: rgba(16, 185, 129, 0.12); color: #047857; }
.esg-d2-saved-badge-disclaimer { background: rgba(245, 158, 11, 0.12); color: #B45309; }
.esg-d2-saved-when {
  color: var(--gray-500, #6B7280);
  font-size: 12px;
  white-space: nowrap;
}
.esg-d2-saved-actions {
  align-items: center;
  display: flex;
  gap: 6px;
}

@media (max-width: 720px) {
  .esg-d2-saved-row {
    grid-template-columns: 56px 1fr;
    grid-template-areas:
      "thumb meta"
      "badge when"
      "actions actions";
    row-gap: 8px;
  }
  .esg-d2-saved-row > .esg-d2-saved-thumb { grid-area: thumb; }
  .esg-d2-saved-row > .esg-d2-saved-meta { grid-area: meta; }
  .esg-d2-saved-row > .esg-d2-saved-badge { grid-area: badge; justify-self: start; }
  .esg-d2-saved-row > .esg-d2-saved-when { grid-area: when; justify-self: end; }
  .esg-d2-saved-row > .esg-d2-saved-actions { grid-area: actions; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .esg-d2-canvas-paper,
  .esg-d2-shell-panel,
  .esg-d2-popover,
  .esg-d2-tile,
  .esg-d2-preset,
  .esg-d2-layout-thumb { transition: none !important; }
}

/* Tablet (<= 1024px) */
@media (max-width: 1024px) {
  .esg-d2-canvas-area { padding: 12px; }
  .esg-d2-shell-panel { width: 280px; }
  .esg-d2-popover { width: 320px; }
  .esg-d2-dock-strip { flex-wrap: wrap; }
  .esg-d2-tile { min-width: 140px; }
}

/* Phone (<= 720px) */
@media (max-width: 720px) {
  .esg-d2-tabs-row { flex-direction: column; align-items: stretch; }
  .esg-d2-actions-cluster { flex-wrap: wrap; }
  .esg-d2-stepbar { flex-direction: column; align-items: flex-start; }
  .esg-d2-preset-grid { grid-template-columns: 1fr 1fr; }
  .esg-d2-layout-grid { grid-template-columns: 1fr 1fr; }
  .esg-d2-dock-pills { grid-template-columns: 1fr; row-gap: 8px; }
  .esg-d2-dock-pills-group { justify-self: stretch; }
  .esg-d2-dock-toggle { justify-self: stretch; }
  .esg-d2-dock-pills-spacer { display: none; }
  body.esg-d2-shell-open .esg-d2-canvas-paper { margin-right: 0; }
  .esg-d2-shell-head { cursor: default; }
  .esg-d2-shell-panel {
    border-left: 0;
    border-top: 1px solid var(--gray-200);
    border-radius: 14px 14px 0 0;
    bottom: 0;
    height: auto;
    left: 0 !important;
    max-height: 75vh;
    right: 0;
    top: auto !important;
    width: 100%;
  }
  .esg-d2-popover {
    border-radius: 14px 14px 0 0;
    bottom: 0;
    left: 0 !important;
    max-height: 70vh;
    right: 0;
    top: auto !important;
    width: 100%;
  }
  .esg-d2-popover-head { cursor: default; }
  .esg-d2-dock {
    border-radius: 12px 12px 0 0;
    margin-top: 0;
  }
  .esg-d2-dock:not(.is-collapsed) { max-height: 60vh; overflow-y: auto; }
  .esg-d2-modal {
    border-radius: 0;
    max-height: 100vh;
    max-width: 100vw;
    height: 100vh;
  }
  .esg-d2-modal-head { cursor: default; }
  .esg-d2-modal-backdrop { padding: 0; }
}

/* === Image picker (esg-img-*) === */
.esg-img-field {
  background: #FFFFFF;
  border: 1px solid var(--gray-200, #E5E7EB);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
}
.esg-img-field.is-compact { padding: 8px; gap: 6px; }
.esg-img-thumb {
  align-items: center;
  background: #F3F4F6;
  border: 1px solid var(--gray-200, #E5E7EB);
  border-radius: 6px;
  display: flex;
  height: 80px;
  justify-content: center;
  overflow: hidden;
  width: 100%;
}
.esg-img-field.is-compact .esg-img-thumb { height: 56px; }
.esg-img-thumb.is-dragover { background: #EFF6FF; border-color: #2563EB; }
.esg-img-thumb.is-asset { background: #FEF3C7; }
.esg-img-thumb img {
  display: block;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  width: auto;
}
.esg-img-empty {
  color: #9CA3AF;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.esg-img-actions { display: flex; gap: 6px; }
.esg-img-actions .esg-btn { font-size: 12px; padding: 4px 10px; }
.esg-img-url {
  background: #FFFFFF;
  border: 1px solid var(--gray-200, #E5E7EB);
  border-radius: 6px;
  font-size: 12px;
  padding: 6px 8px;
  width: 100%;
}
.esg-img-asset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.esg-img-asset-pill {
  background: #F3F4F6;
  border: 1px solid var(--gray-200, #E5E7EB);
  border-radius: 999px;
  color: #374151;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
}
.esg-img-asset-pill:hover { background: #E5E7EB; }
.esg-img-asset-pill.is-active {
  background: #0F172A;
  border-color: #0F172A;
  color: #FFFFFF;
}
.esg-img-warn {
  color: #B45309;
  display: block;
  font-size: 11px;
  line-height: 1.4;
}

/* === Gradient editor (esg-grad-*) === */
.esg-grad-field {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.esg-grad-stop, .esg-grad-angle {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  font-weight: 600;
  gap: 4px;
}
.esg-grad-stop input[type=color] {
  border: 1px solid var(--gray-200, #E5E7EB);
  border-radius: 6px;
  height: 32px;
  padding: 0;
  width: 44px;
}
.esg-grad-angle select {
  background: #FFFFFF;
  border: 1px solid var(--gray-200, #E5E7EB);
  border-radius: 6px;
  font-size: 12px;
  padding: 6px 8px;
}
.esg-grad-preview {
  border: 1px solid var(--gray-200, #E5E7EB);
  border-radius: 6px;
  height: 28px;
  margin-top: 6px;
  width: 100%;
}

/* === Social per-platform icon overrides === */
.esg-social-icons-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.esg-social-icons-row {
  align-items: stretch;
  background: #F9FAFB;
  border: 1px solid var(--gray-200, #E5E7EB);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  grid-template-columns: 110px 1fr;
  padding: 8px;
}
.esg-social-icons-name {
  align-self: center;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 720px) {
  .esg-img-field.is-compact { padding: 8px; }
  .esg-grad-field { flex-direction: column; align-items: stretch; }
  .esg-grad-stop, .esg-grad-angle { width: 100%; }
  .esg-social-icons-row { grid-template-columns: 1fr; }
  .esg-social-icons-name { align-self: start; }
}

/* --- Inline canvas text editing --- */
.esg-d-editable {
  outline: 0;
  transition: background 120ms ease, box-shadow 120ms ease;
  cursor: text;
  border-radius: 3px;
}
.esg-d-editable:hover {
  background: rgba(37, 99, 235, 0.05);
  padding: 0 2px;
  margin: 0 -2px;
}
.esg-d-editable:focus {
  background: rgba(37, 99, 235, 0.08);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.55);
  padding: 0 2px;
  margin: 0 -2px;
}
.esg-d-editable[data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: #9CA3AF;
  pointer-events: none;
}
.esg-d-section-wrap.is-dragging .esg-d-editable,
.esg-d-inline.is-dragging .esg-d-editable {
  pointer-events: none;
}
.esg-d-edit-toast { z-index: 10001; }

/* --- Page settings modal sections (Branding) --- */
.esg-d2-modal-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.esg-d2-modal-section + .esg-d2-modal-section {
  border-top: 1px solid var(--gray-200);
  padding-top: 14px;
}
.esg-d2-modal-section-head { display: flex; flex-direction: column; gap: 2px; }
.esg-d2-modal-section-head strong {
  color: var(--gray-900);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.esg-d2-modal-section-head span { color: var(--gray-600); font-size: 12px; }
.esg-d2-modal-grid { display: grid; gap: 10px; }
.esg-d2-modal-grid-2 { grid-template-columns: 1fr 1fr; }
.esg-d2-modal-prop-spacer { visibility: hidden; }
@media (max-width: 720px) {
  .esg-d2-modal-grid-2 { grid-template-columns: 1fr; }
  .esg-d2-modal-prop-spacer { display: none; }
}