/* Compact dashboard-based design surface and inspector. */
#studioPanelDesigner>.wrap {grid-template-columns:240px minmax(420px,1fr) 390px;}
#sysimpleFormBuilder #stage {min-width:0;width:100%;min-height:100%;padding:12px;box-sizing:border-box;}
#sysimpleFormBuilder #designer {padding:12px;border:0!important;background:var(--adm-bg)!important;}
#sysimpleFormBuilder #designer>.dz-label {display:none;}
#sysimpleFormBuilder :is(.d-node,.d-field,.d-col) {padding:0;margin:0 0 10px;border:1px solid var(--stroke);background:var(--panel);border-radius:2px!important;min-width:0;opacity:1!important;}
#sysimpleFormBuilder :is(.d-node,.d-field,.d-col).selected {border-color:var(--adm-primary);box-shadow:0 0 0 1px var(--adm-primary)!important;}
#sysimpleFormBuilder .d-head {display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:start;gap:6px;padding:8px;margin:0;border:0;background:var(--adm-surface-2);}
.sf-control-heading {min-width:0;}.sf-control-heading strong {display:block;font-size:13px;font-weight:600;color:var(--text);overflow-wrap:anywhere;line-height:1.4;}
.sf-control-heading small {display:block;color:var(--muted);font-size:10px;line-height:1.5;overflow-wrap:anywhere;}
.sf-control-heading strong {display:flex;align-items:baseline;gap:6px;}
.sf-control-type-icon {display:inline-flex;justify-content:center;width:16px;flex-shrink:0;color:var(--text);}
#sysimpleFormBuilder .d-actions {display:flex;gap:2px;opacity:1;visibility:visible;position:static;}
#sysimpleFormBuilder .sf-control-action {display:inline-flex;align-items:center;justify-content:center;min-height:28px!important;height:28px;width:28px!important;min-width:28px;padding:3px!important;box-sizing:border-box;border:1px solid var(--stroke);background:var(--panel);color:var(--text);}
#sysimpleFormBuilder .sf-control-action svg {width:16px!important;min-width:16px;height:16px;flex-shrink:0;}
#sysimpleFormBuilder .sf-control-action:hover {border-color:var(--adm-primary);color:var(--adm-primary);}
#sysimpleFormBuilder .sf-control-action.danger:hover {color:var(--adm-danger);border-color:var(--adm-danger);}
.sf-control-state {font-size:10px;color:var(--muted);grid-column:2;}.d-head:has(.sf-control-state) .d-actions {grid-column:3;grid-row:1;}
.sf-control-state {display:grid;gap:4px;grid-column:1 / -1;font-size:12px;}
.sf-visibility-note {display:block;text-align:left;white-space:normal;overflow-wrap:anywhere;padding:6px 8px;border:1px solid var(--stroke);border-left:3px solid var(--adm-warning,#f39c12);background:var(--panel);color:var(--text);font:inherit;line-height:1.4;}
button.sf-visibility-note {cursor:pointer;min-height:34px;}
button.sf-visibility-note:hover,button.sf-visibility-note:focus-visible {border-color:var(--adm-primary);outline:1px solid var(--adm-primary);}
#sysimpleFormBuilder .cols {display:grid;grid-template-columns:repeat(var(--col-count,1),minmax(0,1fr));gap:8px;padding:8px;}
#sysimpleFormBuilder .cols.c2 {--col-count:2;}#sysimpleFormBuilder .cols.c3 {--col-count:3;}#sysimpleFormBuilder .cols.c4 {--col-count:4;}
#sysimpleFormBuilder .d-col>.d-head {grid-template-columns:18px minmax(0,1fr);}.d-col>.d-head .d-actions {grid-column:2;}
#sysimpleFormBuilder .cols .d-head {grid-template-columns:28px minmax(0,1fr);}
#sysimpleFormBuilder .cols .d-head .d-actions {grid-column:1 / -1;grid-row:auto;justify-content:flex-end;}
#sysimpleFormBuilder .cols .sf-control-heading small {white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
#sysimpleFormBuilder .dropzone {margin:0;border:0;border-radius:0!important;padding:8px;min-height:45px;background:transparent!important;}
#sysimpleFormBuilder .dropzone.small {padding:6px;}
#sysimpleFormBuilder .dropzone:has(>.dz-label) {border:1px dashed var(--stroke);margin:6px;}
#sysimpleFormBuilder .sf-live-control {display:flow-root;padding:10px;color:var(--text);min-width:0;}
#sysimpleFormBuilder .sf-live-control :is(input:not([type=checkbox]):not([type=radio]),select,textarea) {width:100%;min-width:0;height:auto;min-height:34px;color:var(--text);background:var(--adm-input-bg,var(--panel));border-color:var(--stroke);}
.sf-choice-sample {display:grid;gap:6px;}.sf-choice-sample label {display:flex;gap:8px;align-items:center;font-size:12px;font-weight:400;margin:0;}
#sysimpleFormBuilder .sf-choice-sample input,#sysimpleFormBuilder .sf-live-control input[type=checkbox] {appearance:auto!important;width:15px!important;height:15px!important;min-height:15px!important;flex:none;padding:0;accent-color:var(--adm-primary);}
.sf-source-state {display:block;color:var(--muted);font-size:11px;margin-top:5px;overflow-wrap:anywhere;}
.sf-html-sample {overflow-wrap:anywhere;}.sf-html-sample img,.sf-live-control img {max-width:100%;height:auto;}
.sf-js-sample {max-height:160px;overflow:auto;background:var(--adm-input-bg);color:var(--text);border:0;font:12px/1.5 Consolas,monospace;}
.sf-linked-sample {padding:8px;border:1px dashed var(--stroke);font-size:12px;color:var(--muted);}
#propsCard {padding:0!important;}#propsCard>h3,#propsCard>#pType,#propsCard>.sf-property-actions {margin-left:12px;margin-right:12px;}
.sf-property-tabs {position:sticky;top:-1px;z-index:4;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;padding:6px;background:var(--panel);border-block:1px solid var(--stroke);}
#sysimpleFormBuilder .sf-property-tabs button {padding:5px;border:1px solid transparent;background:var(--panel);color:var(--muted);font-size:12px;min-width:0;}
#sysimpleFormBuilder .sf-property-tabs button[aria-selected=true] {border-color:var(--adm-primary);color:var(--adm-primary);background:var(--adm-primary-soft);}
.sf-property-panel {padding:10px;min-width:0;}.sf-property-panel[hidden] {display:none!important;}
.sf-property-section {margin-top:0;}.sf-property-section>summary {padding-top:5px;}
#sysimpleFormBuilder .sf-property-row textarea {min-height:62px;}
.sf-content-editor {background:var(--panel);border:1px solid var(--stroke);min-width:0;}
.sf-editor-tools {display:flex;flex-wrap:wrap;gap:4px;padding:6px;border-bottom:1px solid var(--stroke);}
#sysimpleFormBuilder .sf-editor-tools button {min-height:30px;padding:3px 7px;font-size:11px!important;}
.sf-code-host {height:380px;min-height:220px;}.sf-code-host[hidden],.sf-rich-host[hidden] {display:none!important;}
.sf-editor-status {padding:6px;font-size:11px;color:var(--muted);border-top:1px solid var(--stroke);overflow-wrap:anywhere;}
.sf-content-editor.expanded {position:fixed;inset:70px 24px 24px;z-index:4000;display:flex;flex-direction:column;box-shadow:0 8px 40px #0006;}
.sf-content-editor.expanded :is(.sf-code-host,.sf-rich-host) {flex:1;min-height:0;height:auto;overflow:auto;}
.sf-content-editor.expanded .note-editable {height:calc(100vh - 290px)!important;}
#sysimpleFormBuilder .sf-rich-host :is(.note-editor,.note-toolbar,.note-statusbar,.note-editable,.note-modal-content,.note-dropdown-menu) {background:var(--panel);color:var(--text);border-color:var(--stroke);}
#sysimpleFormBuilder .sf-rich-host .note-btn {background:var(--adm-surface-2);color:var(--text);border-color:var(--stroke);padding:5px;min-height:28px;}
#sysimpleFormBuilder .sf-rich-host .note-editable {font:13px/1.5 var(--adm-font);}.sf-rich-host .note-editor {margin:0;border:0;}
#sysimpleFormBuilder .ace_editor :is(textarea,input) {min-height:0!important;border-radius:0!important;}
#sysimpleFormBuilder .ace_editor .ace_text-input {width:1px!important;height:1px!important;min-width:0!important;padding:0!important;opacity:0!important;}
.sf-preview-grid {display:grid;grid-template-columns:repeat(var(--columns,1),minmax(0,1fr));gap:8px;}.sf-preview-box {border:1px solid var(--stroke);padding:8px;margin-bottom:8px;}
@media(max-width:1400px){#studioPanelDesigner>.wrap{grid-template-columns:200px minmax(380px,1fr) 350px;}#sysimpleFormBuilder .d-head{grid-template-columns:18px minmax(0,1fr);}#sysimpleFormBuilder .d-head .d-actions{grid-column:2;grid-row:auto;}}
@media(max-width:900px){#studioPanelDesigner>.wrap{grid-template-columns:180px 520px 340px;}.sf-content-editor.expanded{inset:10px;}}

/* Use the execution signature pad for disposable designer samples. */
#sysimpleFormBuilder .runtime-signature-surface { position:relative; background:#fff; border:1px dashed var(--accent,#3c8dbc); margin:8px 0; max-width:1000px; aspect-ratio:10/3; }
#sysimpleFormBuilder .runtime-signature canvas, #sysimpleFormBuilder .runtime-signature img { display:block; width:100%; height:100%; object-fit:contain; }
#sysimpleFormBuilder .runtime-signature canvas { position:absolute; inset:0; touch-action:none; }
#sysimpleFormBuilder .runtime-signature button { margin:0 8px 8px 0; min-height:34px; }
#sysimpleFormBuilder .runtime-signature [hidden] { display:none!important; }