body:has(#layoutsPanel:not(.page-hidden)) .workflow-nav { display:none!important; }
.le-check-dialog { width:min(1000px,92vw); max-height:85vh; border:1px solid #ddd; border-radius:14px; padding:22px; }
.le-check-dialog::backdrop { background:#0007; }
.le-check-head { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.le-check-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-top:16px; }
.le-check-grid figure { margin:0; padding:12px; border:1px solid #ddd; border-radius:8px; }
.le-check-grid canvas { width:100%; height:auto; }
.le-check-grid figcaption { font-size:12px; margin-top:10px; }
#layoutsPanel { padding:0; border:0; background:transparent; }
#layoutsPanel > .panel-title, #layoutsPanel > .panel-caption { display:none; }
#layoutsPanel .layout-branding { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:16px; padding:0; border:0; background:none; }
#layoutsPanel .brand-intro { display:none; }
.le-toolbar { grid-column:1/-1; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.le-toolbar strong { margin-right:auto; font-size:18px; }
.le-toolbar button, .le-properties button { padding:9px 12px; }
.le-save-state { font-size:12px; color:#666; }
#layoutsPanel .brand-preview { grid-column:1; grid-row:2; display:flex; flex-direction:column; min-width:0; padding:20px; background:#e9e9e7; border:1px solid #ddd; border-radius:12px; min-height:440px; }
.le-stage { position:relative; margin:auto; width:100%; display:flex; justify-content:center; align-items:center; min-height:280px; }
#layoutsPanel #brandPreviewCanvas { display:block; width:auto; height:auto; max-width:100%; max-height:480px; box-shadow:0 8px 24px #0001; touch-action:none; border-radius:0; cursor:default; }
#layoutsPanel #brandPreviewCanvas { aspect-ratio:auto; border:0; }
.le-precise { grid-column:1/-1; border-top:1px solid #e5e5e5; padding-top:12px; }
.le-precise summary { cursor:pointer; font-size:12px; color:#555; margin-bottom:10px; }
#layoutsPanel .brand-controls > .le-precise, #layoutsPanel .template-text-controls > .le-precise { grid-column:1/-1; }
.le-precise > div { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#layoutsPanel .brand-preview-help { margin-top:16px; font-size:12px; }
#layoutsPanel .brand-preview-help .brand-safe-zone-hint { display:flex; align-items:flex-start; gap:6px; color:#365fae; }
#layoutsPanel .brand-preview-help .brand-safe-zone-hint span { flex:0 0 auto; color:#5488ff; font-size:16px; line-height:1; }
#layoutsPanel .brand-preview-help strong { display:none; }
#layoutsPanel .brand-preview-help > div:last-child:not(.brand-safe-zone-hint) { display:none; }
.le-selection { position:absolute; border:1px solid #111; pointer-events:none; box-sizing:border-box; }
.le-selection:after { content:''; position:absolute; width:10px; height:10px; background:white; border:1px solid #111; right:-6px; bottom:-6px; }
.le-properties { grid-column:2; grid-row:2/4; background:white; border:1px solid #ddd; border-radius:12px; padding:16px; min-width:0; }
.le-properties h3 { font-size:14px; margin:0 0 12px; }
.le-layers { display:grid; gap:6px; margin-bottom:20px; }
.le-layers button { text-align:left; background:#fff; }
.le-layers button[aria-pressed=true] { background:#161616; color:white; }
#layoutsPanel .brand-controls, #layoutsPanel .template-text-controls { display:grid; grid-template-columns:1fr 1fr; padding:0; background:none; border:0; gap:12px; }
#layoutsPanel .brand-controls > *, #layoutsPanel .template-text-controls > * { min-width:0; }
#layoutsPanel .brand-controls > .field, #layoutsPanel .template-text-controls > .field { grid-column:auto; }
#layoutsPanel .safe-zone-control { padding:10px; border:1px solid #dbe7ff; border-radius:8px; background:#f6f9ff; }
#layoutsPanel #brandPreviewCanvas[data-selected-layer="safe-zone"] { cursor:crosshair; }
#layoutsPanel .brand-controls .layout-file-control, #layoutsPanel .brand-controls > button, #layoutsPanel .template-text-controls .span-2 { grid-column:1/-1; }
#layoutsPanel .layout-file-control { display:grid; gap:8px; }
#layoutsPanel .layout-file-control span { white-space:normal; overflow-wrap:anywhere; }
#layoutsPanel .template-layer-editor { padding:0; border:0; background:none; }
#layoutsPanel .layer-editor-head, #layoutsPanel .layer-list { display:none; }
.le-fields { display:flex; gap:5px; flex-wrap:wrap; margin:12px 0; }
.le-fields button { font-size:12px; padding:6px 9px; }
.le-hint { font-size:12px; color:#666; line-height:1.5; }
.le-font-controls { display:grid; gap:10px; margin:10px 0 14px; padding:12px; border:1px solid #e1e5eb; border-radius:8px; background:#f8f9fb; }
.le-font-upload { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; gap:8px 10px; }
.le-font-upload button { min-height:34px!important; padding:7px 10px!important; }
.le-font-requirements { color:#737b89; font-size:10px; line-height:1.4; }
.le-font-requirements strong { display:block; margin-bottom:3px; color:#505866; font-size:10px; }
.le-font-requirements ul { margin:0; padding-left:15px; }
.le-font-requirements li + li { margin-top:2px; }
.new-object-branding-dialog { width:min(520px,calc(100vw - 28px)); padding:0; border:1px solid #dfe3e9; border-radius:12px; background:#fff; color:#17191d; box-shadow:0 24px 70px #1118272b; }
.new-object-branding-dialog::backdrop { background:#11182773; backdrop-filter:blur(2px); }
.new-object-branding-dialog form { display:grid; gap:12px; padding:24px; }
.new-object-branding-dialog .dialog-eyebrow { color:#697180; font-size:11px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.new-object-branding-dialog h2 { margin:0; font-size:23px; line-height:1.2; }
.new-object-branding-dialog p { margin:0; color:#626b79; font-size:14px; line-height:1.55; }
.new-object-branding-dialog .dialog-actions { display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; margin-top:8px; }
.new-object-branding-dialog .dialog-actions button { min-height:40px; padding:9px 13px; }
#layoutsPanel .brand-source-panel { grid-column:1; grid-row:3; padding:14px; min-width:0; }
#layoutsPanel .brand-layout-picker { display:flex; gap:8px; overflow:auto; max-height:165px; }
#layoutsPanel .brand-layout-option { flex:0 0 210px; padding:10px; }
#layoutsPanel .brand-layout-option span { font-size:11px; }
#layoutsPanel .brand-layout-option span span:last-child { display:none; }
#layoutsPanel .brand-source-head { margin-bottom:10px; }
#brandLayoutSummary { font-size:11px; }
#le-search { margin:8px 0; width:100%; }
.le-footer { grid-column:1/-1; display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px; border:1px solid #ddd; border-radius:12px; background:white; }
.le-footer .field { flex:1; min-width:180px; }
.le-footer p { flex:1; font-size:12px; color:#666; }
#layoutsPanel .before-after-panel { grid-column:1/-1; }
.le-properties [hidden], .le-selection[hidden], #layoutsPanel .brand-layout-option[hidden] { display:none!important; }
@media(max-width:1050px) { #layoutsPanel .layout-branding { grid-template-columns:minmax(0,1fr) 245px; } #layoutsPanel .brand-preview { padding:12px; } }
@media(max-width:760px) { #layoutsPanel .layout-branding { grid-template-columns:1fr; } .le-properties { grid-column:1; grid-row:4; } #layoutsPanel .brand-preview { min-height:320px; } .le-footer { grid-row:5; } }

/* Photoshop-like workspace: a stable tool rail, a real canvas stage and a
   properties panel. The existing ListingFlow palette remains untouched. */
#layoutsPanel .layout-branding { grid-template-columns:minmax(0,1fr) 300px; align-items:stretch; }
.le-toolbar { min-height:52px; padding:8px 10px; border:1px solid var(--line, #d9e6f5); border-radius:10px; background:var(--surface, #fff); box-shadow:0 4px 16px rgba(17,56,94,.06); }
.le-toolbar-title { display:flex; align-items:baseline; gap:10px; min-width:220px; }
.le-toolbar-title strong { color:var(--text, #11385e); letter-spacing:-.02em; }
.le-save-state { color:var(--muted, #506e8a); }
.le-toolbar-layer-actions, .le-toolbar-view-actions { display:flex; align-items:center; gap:4px; padding-left:7px; border-left:1px solid var(--line, #d9e6f5); }
.le-toolbar button { min-height:36px; border:1px solid var(--line-strong, #bfd4ee); border-radius:7px; background:var(--surface, #fff); color:var(--text, #11385e); font-weight:650; transition:background .16s ease, border-color .16s ease, transform .16s ease; }
.le-toolbar button:hover { background:#eef4ff; border-color:#8baeff; }
.le-toolbar button:active { transform:translateY(1px); }
.le-toolbar button:focus-visible, .le-properties button:focus-visible, .le-properties input:focus-visible, .le-properties select:focus-visible, .le-properties textarea:focus-visible { outline:3px solid rgba(4,68,252,.22); outline-offset:2px; }
.le-toolbar #le-grid[aria-pressed="true"] { background:#e9f0ff; border-color:#5488ff; color:#0444fc; }
.le-toolbar .le-toolbar-group-label { color:var(--muted, #506e8a); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.le-toolbar-view-actions { margin-left:auto; }
#layoutsPanel .brand-preview { padding:12px; background:#dfe6ef; border-color:#c6d5e6; box-shadow:inset 0 0 0 1px rgba(255,255,255,.45); }
.le-stage { min-height:520px; max-height:min(70vh,760px); overflow:auto; padding:24px; border:1px solid #bccada; border-radius:8px; background-color:#edf2f7; background-image:linear-gradient(45deg,#e2e8ef 25%,transparent 25%),linear-gradient(-45deg,#e2e8ef 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e2e8ef 75%),linear-gradient(-45deg,transparent 75%,#e2e8ef 75%); background-size:20px 20px; background-position:0 0,0 10px,10px -10px,-10px 0; box-shadow:inset 0 2px 8px rgba(17,56,94,.1); }
.le-stage > canvas { flex:0 0 auto; border:1px solid rgba(17,56,94,.28)!important; box-shadow:0 10px 26px rgba(17,56,94,.2)!important; }
.le-stage.panning { cursor:grabbing; }
.le-stage.pan-tool { cursor:grab; }
.le-stage.pan-tool canvas { cursor:grab!important; }
#layoutsPanel #brandPreviewCanvas[data-tool="select"] { cursor:default; }
#layoutsPanel #brandPreviewCanvas[data-tool="pan"] { cursor:grab; }
.le-properties { padding:18px; border-color:var(--line, #d9e6f5); box-shadow:0 4px 16px rgba(17,56,94,.06); }
.le-properties .le-section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.le-properties .le-section-title h3 { margin:0; }
.le-layer-count { color:var(--muted, #506e8a); font-size:11px; }
.le-layers { gap:3px; margin-bottom:18px; padding:4px; border:1px solid var(--line, #d9e6f5); border-radius:8px; background:#f7faff; }
.le-layers button { display:grid; grid-template-columns:22px minmax(0,1fr) 18px; align-items:center; gap:7px; width:100%; min-height:38px; padding:8px 9px; border:1px solid transparent; border-radius:6px; color:var(--text, #11385e); background:transparent; font-weight:650; }
.le-layers button:hover { background:#eef4ff; border-color:#c6d9f6; }
.le-layers button[aria-pressed=true] { background:#e7efff; border-color:#8eafff; color:#0444fc; }
.le-layer-icon { display:grid; place-items:center; width:22px; height:22px; border:1px solid currentColor; border-radius:4px; font-size:12px; }
.le-layer-visibility { color:#8296ad; font-size:12px; }
.le-hint { color:var(--muted, #506e8a); }
.le-properties .le-field { color:var(--text, #11385e); font-size:12px; font-weight:650; }
.le-properties .le-field input, .le-properties .le-field select, .le-properties .le-field textarea { margin-top:6px; border-color:#bfd4ee; border-radius:7px; background:#fff; color:var(--text, #11385e); }
.le-image-preview { display:block; width:100%; max-height:120px; object-fit:contain; margin:8px 0 12px; border:1px solid var(--line, #d9e6f5); border-radius:7px; background:#f7faff; }
.le-properties .safe-zone-control { background:#eff5ff; border-color:#b9cff3; }
.le-properties .safe-zone-control label { color:#2459a4; }
.le-footer { border-color:var(--line, #d9e6f5); box-shadow:0 4px 16px rgba(17,56,94,.04); }
@media(max-width:1050px) { #layoutsPanel .layout-branding { grid-template-columns:minmax(0,1fr) 270px; } .le-toolbar-title { min-width:180px; } .le-toolbar-view-actions { margin-left:0; } }
@media(max-width:760px) { .le-toolbar { align-items:stretch; } .le-toolbar-title, .le-toolbar-layer-actions, .le-toolbar-view-actions { width:100%; border-left:0; padding-left:0; } .le-toolbar-view-actions { flex-wrap:wrap; } .le-stage { min-height:360px; max-height:60vh; padding:12px; } }

/* Editor workspace: familiar graphics-editor anatomy. The selection list,
   canvas and inspector stay in separate, predictable zones. */
body.client-ui #layoutsPanel .layout-branding {
  display:block!important;
  min-width:0!important;
}
body.client-ui #layoutsPanel .le-toolbar {
  display:grid!important;
  grid-template-columns:minmax(190px,1fr) auto auto!important;
  grid-template-areas:"title layers view" "secondary secondary secondary"!important;
  gap:8px 14px!important;
  min-height:0!important;
  margin:0 0 14px!important;
  padding:12px 14px!important;
  border:1px solid var(--lf-line)!important;
  border-radius:12px!important;
  background:var(--lf-surface)!important;
  box-shadow:0 6px 18px rgba(17,56,94,.06)!important;
}
body.client-ui #layoutsPanel .le-toolbar-title { grid-area:title!important; align-self:center!important; }
body.client-ui #layoutsPanel .le-toolbar-title strong { font-size:17px!important; }
body.client-ui #layoutsPanel .le-save-state { display:block; margin-top:2px; font-size:12px!important; }
body.client-ui #layoutsPanel .le-toolbar-layer-actions,
body.client-ui #layoutsPanel .le-toolbar-view-actions {
  gap:6px!important;
  padding-left:14px!important;
  border-left:1px solid var(--lf-line)!important;
}
body.client-ui #layoutsPanel .le-toolbar-layer-actions { grid-area:layers!important; }
body.client-ui #layoutsPanel .le-toolbar-view-actions { grid-area:view!important; width:auto!important; }
body.client-ui #layoutsPanel .le-toolbar-secondary-actions {
  grid-area:secondary!important;
  display:flex!important;
  justify-content:flex-end!important;
  align-items:center!important;
  gap:8px!important;
  padding-top:10px!important;
  border-top:1px solid var(--lf-line)!important;
}
body.client-ui #layoutsPanel .le-toolbar-secondary-actions .le-toolbar-group-label { margin-right:auto; }
body.client-ui #layoutsPanel .le-toolbar :is(button,.le-zoom-value) { min-height:36px!important; font-size:13px!important; }
body.client-ui #layoutsPanel .le-workspace {
  display:grid;
  grid-template-columns:minmax(210px,250px) minmax(440px,1fr) minmax(300px,340px);
  align-items:stretch;
  gap:14px;
  min-width:0;
}
body.client-ui #layoutsPanel .brand-source-panel,
body.client-ui #layoutsPanel .brand-preview,
body.client-ui #layoutsPanel .le-properties {
  grid-column:auto!important;
  grid-row:auto!important;
  min-width:0!important;
  border:1px solid var(--lf-line)!important;
  border-radius:12px!important;
  background:var(--lf-surface)!important;
  box-shadow:none!important;
}
body.client-ui #layoutsPanel .brand-source-panel {
  display:flex!important;
  flex-direction:column;
  gap:10px;
  max-height:calc(100dvh - 190px);
  padding:14px!important;
  overflow:auto;
}
body.client-ui #layoutsPanel .brand-source-head { margin:0!important; }
body.client-ui #layoutsPanel .brand-source-head strong { display:block; color:var(--lf-text); font-size:15px; }
body.client-ui #layoutsPanel #brandLayoutSummary { display:block; margin-top:4px; color:var(--lf-muted); font-size:12px!important; line-height:1.45; }
body.client-ui #layoutsPanel #le-search { min-height:38px!important; margin:0!important; font-size:13px!important; }
body.client-ui #layoutsPanel .brand-layout-picker {
  display:grid!important;
  grid-template-columns:1fr!important;
  align-content:start;
  gap:6px!important;
  max-height:none!important;
  overflow:visible!important;
}
body.client-ui #layoutsPanel .brand-layout-option {
  display:grid!important;
  grid-template-columns:20px minmax(0,1fr)!important;
  align-items:start!important;
  gap:8px!important;
  width:auto!important;
  min-height:0!important;
  padding:10px!important;
  border:1px solid transparent!important;
  border-radius:8px!important;
  background:var(--lf-surface-2)!important;
}
body.client-ui #layoutsPanel .brand-layout-option:has(input:checked) { border-color:var(--lf-blue)!important; background:#eef4ff!important; }
body.client-ui #layoutsPanel .brand-layout-option strong { font-size:13px!important; line-height:1.35!important; }
body.client-ui #layoutsPanel .brand-layout-option span { font-size:11px!important; line-height:1.4!important; }
body.client-ui #layoutsPanel .brand-preview {
  display:flex!important;
  flex-direction:column;
  min-height:640px!important;
  padding:12px!important;
  overflow:hidden;
}
body.client-ui #layoutsPanel .le-stage {
  flex:1 1 auto;
  min-height:0!important;
  max-height:none!important;
  height:calc(100dvh - 210px);
  padding:24px!important;
  border:1px solid #c7d6e7!important;
  border-radius:8px!important;
}
body.client-ui #layoutsPanel .brand-preview-help {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:6px 16px;
  margin:10px 2px 0!important;
  color:var(--lf-muted);
  font-size:12px!important;
  line-height:1.45;
}
body.client-ui #layoutsPanel .brand-preview-help #brandStatus { min-width:0; }
body.client-ui #layoutsPanel .brand-preview-help .brand-safe-zone-hint { grid-column:1 / -1; padding-top:8px; border-top:1px solid var(--lf-line); }
body.client-ui #layoutsPanel .le-properties {
  display:flex!important;
  flex-direction:column;
  max-height:calc(100dvh - 190px);
  padding:0!important;
  overflow:auto!important;
}
body.client-ui #layoutsPanel .le-layers-section,
body.client-ui #layoutsPanel .le-properties-section,
body.client-ui #layoutsPanel .brand-controls,
body.client-ui #layoutsPanel .template-layer-editor {
  padding:14px!important;
}
body.client-ui #layoutsPanel .le-layers-section { border-bottom:1px solid var(--lf-line); }
body.client-ui #layoutsPanel .le-properties-section { border-bottom:1px solid var(--lf-line); }
body.client-ui #layoutsPanel .le-panel-hint { margin:0 0 10px; color:var(--lf-muted); font-size:12px; line-height:1.45; }
body.client-ui #layoutsPanel .le-inspector-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
body.client-ui #layoutsPanel .le-inspector-head h3 { margin:0; color:var(--lf-text); font-size:15px!important; }
body.client-ui #layoutsPanel .le-inspector-head span { color:var(--lf-muted); font-size:11px; font-weight:650; }
body.client-ui #layoutsPanel .le-properties-section > .le-hint { margin:5px 0 12px!important; }
body.client-ui #layoutsPanel .le-properties .le-section-title { margin-bottom:3px!important; }
body.client-ui #layoutsPanel .le-layers { margin-bottom:8px!important; }
body.client-ui #layoutsPanel .le-user-layers { display:grid; gap:3px; }
body.client-ui #layoutsPanel .brand-controls,
body.client-ui #layoutsPanel .template-text-controls {
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
}
body.client-ui #layoutsPanel .brand-controls > .layout-file-control,
body.client-ui #layoutsPanel .brand-controls > .brand-action-row,
body.client-ui #layoutsPanel .template-text-controls > .span-2 { grid-column:1 / -1!important; }
body.client-ui #layoutsPanel .le-footer {
  display:flex!important;
  justify-content:flex-end!important;
  gap:12px!important;
  margin-top:14px!important;
  padding:14px 16px!important;
  border:1px solid var(--lf-line)!important;
  border-radius:12px!important;
  background:var(--lf-surface)!important;
}
body.client-ui #layoutsPanel .le-footer p { margin:0 auto 0 0!important; max-width:62ch; }
body.client-ui #layoutsPanel .le-footer .field { flex:0 1 270px!important; }
body.client-ui #layoutsPanel .le-footer #insertBrandPhotoBtn { min-height:42px!important; }
/* Do not expose a disabled editor below the empty-state prompt. The workflow
   guard owns this state until a concrete feed has been selected. */
body.client-ui #layoutsPanel.requires-feed-selection > .layout-branding { display:none!important; }

@media (max-width:1240px) {
  body.client-ui #layoutsPanel .le-workspace { grid-template-columns:minmax(0,1fr) minmax(290px,330px); }
  body.client-ui #layoutsPanel .brand-source-panel { grid-column:1 / -1!important; max-height:250px; }
  body.client-ui #layoutsPanel .brand-layout-picker { grid-template-columns:repeat(3,minmax(0,1fr))!important; }
}
@media (max-width:900px) {
  body.client-ui #layoutsPanel .le-toolbar { grid-template-columns:1fr auto!important; grid-template-areas:"title layers" "view view" "secondary secondary"!important; }
  body.client-ui #layoutsPanel .le-toolbar-view-actions { justify-content:flex-start!important; margin-left:0!important; }
  body.client-ui #layoutsPanel .le-workspace { grid-template-columns:1fr; }
  body.client-ui #layoutsPanel .brand-preview { order:1; min-height:460px!important; }
  body.client-ui #layoutsPanel .brand-source-panel { order:2; max-height:280px; }
  body.client-ui #layoutsPanel .le-properties { order:3; max-height:none; overflow:visible!important; }
  body.client-ui #layoutsPanel .brand-layout-picker { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
}
@media (max-width:620px) {
  body.client-ui #layoutsPanel .le-toolbar { display:flex!important; align-items:stretch!important; }
  body.client-ui #layoutsPanel .le-toolbar :is(.le-toolbar-title,.le-toolbar-layer-actions,.le-toolbar-view-actions,.le-toolbar-secondary-actions) { width:100%!important; padding-left:0!important; border-left:0!important; }
  body.client-ui #layoutsPanel .le-toolbar-layer-actions,
  body.client-ui #layoutsPanel .le-toolbar-view-actions { flex-wrap:wrap!important; }
  body.client-ui #layoutsPanel .le-toolbar-secondary-actions { justify-content:flex-start!important; }
  body.client-ui #layoutsPanel .le-toolbar-secondary-actions .le-toolbar-group-label { display:none!important; }
  body.client-ui #layoutsPanel .brand-preview { min-height:360px!important; }
  body.client-ui #layoutsPanel .le-stage { height:58dvh; padding:12px!important; }
  body.client-ui #layoutsPanel .brand-layout-picker { grid-template-columns:1fr!important; }
  body.client-ui #layoutsPanel .brand-controls,
  body.client-ui #layoutsPanel .template-text-controls { grid-template-columns:1fr!important; }
  body.client-ui #layoutsPanel .le-footer { align-items:stretch!important; }
  body.client-ui #layoutsPanel .le-footer :is(.field,#insertBrandPhotoBtn) { width:100%!important; flex-basis:100%!important; }
}