.customized-form { grid-template-columns: repeat(var(--form-columns,2),minmax(0,1fr)); }
.layout-field { min-width: 0; }.layout-field > label { display: flex; flex-direction: column; gap: 8px; }
.field-span-full,.form-section-title { grid-column: 1/-1; }
.form-section-title { font-size: 13px; font-weight: 550; padding-top: 17px; margin: 6px 0 0; border-top: 1px solid #e4e4e7; }
.dialog-heading-actions { display:flex; align-items:center; gap:7px; }.dialog-heading-actions .icon-btn { font-size:18px; }
dialog.layout-editor { width: min(1140px,96vw); max-width: 1140px; max-height:90vh; padding:0; overflow:hidden; }
dialog.layout-editor[open] { display:flex; flex-direction:column; }
.layout-editor .dialog-heading,.layout-editor .dialog-footer,.layout-toolbar { flex-shrink:0; }
.layout-editor .dialog-heading p { color:#71717a; font-size:12px; margin:7px 0 0; }
.layout-toolbar { display:flex; gap:16px; align-items:center; padding:12px 24px; border-bottom:1px solid #e4e4e7; }
.layout-toolbar > label { display:flex; flex-direction:row; align-items:center; gap:10px; margin:0; }.layout-toolbar .select-control { width:65px; }.layout-toolbar > span { color:#71717a; font-size:11px; margin-left:auto; }
.layout-editor-body { display:grid; grid-template-columns:260px 260px minmax(0,1fr); height:min(57vh,560px); min-height:0; flex:1; }
.layout-editor-body > section { overflow-y:auto; scrollbar-width:thin; padding:18px; min-width:0; }.layout-field-list,.layout-properties { border-right:1px solid #e4e4e7; }
.layout-editor-body h3 { font-size:12px; margin:0 0 14px; font-weight:600; }.layout-editor-body h3 small { display:block; font-weight:400; color:#71717a; margin-top:6px; }
.layout-row { display:flex; align-items:center; justify-content:space-between; border:1px solid transparent; border-radius:7px; margin:3px 0; min-width:0; }.layout-row.selected { background:#f4f4f5; border-color:#d4d4d8; }.layout-row.is-hidden { opacity:.6; }.layout-row.dragging { opacity:.4; }
.layout-row > div { display:flex; }.layout-row .icon-btn { width:23px; height:28px; padding:2px; font-size:14px; }
.layout-field-pick { padding:8px 5px; display:flex; align-items:center; text-align:left; gap:8px; min-width:0; flex:1; font-size:12px; }.layout-field-pick > span:last-child { overflow:hidden; text-overflow:ellipsis; }.layout-field-pick small { display:block; color:#a1a1aa; font-size:10px; margin-top:3px; }
.layout-add { margin-top:20px; padding-top:18px; border-top:1px solid #e4e4e7; }.layout-add label,.layout-properties label { display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }.layout-add p,.layout-preview > p { font-size:11px; color:#71717a; line-height:1.5; }.layout-properties .layout-check { flex-direction:row; align-items:center; }.layout-check input { width:15px; min-height:15px; padding:0; }
.layout-preview { background:#fcfcfc; }#layout-preview { display:grid; grid-template-columns:repeat(var(--form-columns,2),minmax(0,1fr)); gap:18px 12px; padding-top:16px; }.preview-field { min-width:0; }.preview-field > span { font-size:11px; color:#52525b; display:block; margin-bottom:8px; overflow-wrap:anywhere; }.preview-field b { color:#d55; }.preview-input { height:32px; padding:9px; border-radius:6px; background:#f0f0f1; color:#a1a1aa; font-size:10px; white-space:nowrap; overflow:hidden; }.preview-input span { float:right; }.preview-textarea { height:65px; }
.layout-editor .dialog-footer > span { max-width:60%; color:#71717a; font-size:11px; }.layout-error { margin:12px 24px; }
@media(max-width:900px) { .layout-editor-body { grid-template-columns:220px minmax(0,1fr); }.layout-preview { grid-column:1/-1; min-height:220px; }.layout-editor-body { height:58vh; overflow-y:auto; }.layout-editor-body > section { overflow:visible; }.layout-properties { border-right:0; }.layout-toolbar > span { display:none; } }
@media(max-width:600px) { .customized-form { grid-template-columns:1fr; }.layout-editor-body { grid-template-columns:1fr; }.layout-preview { display:none; }.layout-field-list { border:0; }.layout-editor .dialog-footer > span { display:none; }.layout-toolbar { padding:12px; }.layout-editor .dialog-heading { padding:16px; } }