.navbar { height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
.main-container { display: flex; flex: 1; padding: 15px 0 0 0; gap: 15px; height: calc(100vh - 70px); }
.control-panel { width: 320px; border-radius: 0 12px 0 0; padding: 12px; display: none; flex-direction: column; flex-shrink: 0; }
.control-panel.active-panel { display: flex; }
.panel-scroll-area { flex: 1; overflow-y: auto; overflow-x: hidden; }
.canvas-panel { flex: 1; border-radius: 12px 12px 0 0; display: flex; flex-direction: column; position: relative; min-width: 400px; }
.dynamic-output-container { flex: 1; margin: 4px; display: flex; position: relative; overflow: hidden; z-index: 1; }
.workspace-side { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.history-panel { width: 230px; border-radius: 12px 0 0 0; display: flex; flex-direction: column; flex-shrink: 0; }
.multi-output-tray { height: 104px; display: flex; align-items: center; padding: 0 12px; gap: 10px; overflow-x: auto; flex-shrink: 0; }