/* Each Studio column owns its scrolling; headers remain outside the scroll areas. */
#sysimpleFormBuilder {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#sysimpleFormBuilder > .topbar,
#sysimpleFormBuilder > .schema-bar,
#sysimpleFormBuilder > .main-tabs { flex: 0 0 auto; }
#sysimpleFormBuilder > .body-panel { flex: 1 1 0; min-height: 0; overflow: auto; }
#sysimpleFormBuilder #studioPanelDesigner { overflow: hidden; }
#studioPanelDesigner > .wrap {
    height: 100%;
    min-height: 0;
    grid-template-columns: clamp(200px, 22vw, 320px) minmax(260px, 1fr) clamp(240px, 26vw, 380px);
    grid-template-rows: minmax(0, 1fr);
    overflow-x: auto;
}
#studioPanelDesigner .pane,
#studioPanelDesigner #center { min-height: 0; min-width: 0; }
#studioPanelDesigner .pane,
#studioPanelDesigner #viewport { overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
#studioPanelDesigner #canvasModeBar { flex: 0 0 auto; }
#studioPanelDesigner #viewport { flex: 1 1 0; }
/* Keep both comparison panels usable without pushing the designer below the window. */
body.split-view #sysimpleFormBuilder > #studioPanelStructure { flex-basis: 35%; }
body.split-view #sysimpleFormBuilder > #studioPanelDesigner { flex-basis: 55%; }