.page-layout-heading,
.page-layout-toolbar,
.page-layout-actions,
.page-layout-add,
.page-layout-module-heading,
.page-layout-preview-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.page-layout-heading,
.page-layout-preview-heading { justify-content: space-between; }
.page-layout-heading h2,
.page-layout-preview-heading h3 { margin: 0; }
.page-layout-toolbar { margin: 18px 0; }
.page-layout-toolbar .page-layout-field { flex: 1 1 180px; }
.page-layout-field { display: grid; gap: 6px; min-width: 0; }
.page-layout-field > span { font-weight: 600; }
.page-layout-field input:not([type="checkbox"]),
.page-layout-field select,
.page-layout-field textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
.page-layout-field textarea { font: 13px/1.5 ui-monospace, SFMono-Regular, monospace; resize: vertical; }
.page-layout-field:has(input[type="checkbox"]) { display: flex; align-items: center; }
.page-layout-field input[type="checkbox"] { width: 18px; height: 18px; }
.page-layout-metadata { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto; align-items: end; gap: 12px; }
.page-layout-form h3 { margin: 24px 0 12px; }
.page-layout-modules { display: grid; gap: 10px; }
.page-layout-module { min-width: 0; margin: 0; padding: 14px; border: 1px solid #c9d0d4; border-radius: 4px; background: #f7f9f8; display: grid; gap: 12px; }
.page-layout-module-heading { justify-content: flex-end; }
.page-layout-module-heading h4 { flex: 1 1 220px; margin: 0; font-size: 16px; font-weight: 700; text-transform: capitalize; }
.page-layout-module-heading button { min-width: 40px; min-height: 40px; }
.page-layout-add { margin-top: 14px; padding-top: 12px; border-top: 1px solid #c9d0d4; }
.page-layout-add select { min-width: 120px; max-width: 100%; }
.page-layout-actions { margin-top: 22px; }
.page-layout-conflict { padding: 12px; border-left: 3px solid #b34131; background: #fff3ee; }
.page-layout-conflict pre { white-space: pre-wrap; word-break: break-word; overflow: auto; max-height: 220px; }
.page-layout-preview-heading { margin-top: 30px; }
.page-layout-preview { margin-top: 12px; padding: 0; border-top: 1px solid #c9d0d4; min-width: 0; background: #fff; }
.page-layout-preview-frame { display: block; box-sizing: border-box; width: 100%; height: min(70vh, 620px); min-height: 320px; border: 0; background: #fff; }
.page-layout-preview-frame:focus-visible { outline: 3px solid #007e73; outline-offset: 2px; }
@media (max-width: 760px) {
  .page-layout-metadata { grid-template-columns: minmax(0, 1fr); }
  .page-layout-add > * { flex: 1 1 140px; }
}