.studio-panel {
    position:relative; display:flex; flex-direction:column; min-width:0;
    height:var(--studio-panel-height,auto); max-width:100%; flex-shrink:0;
    border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--text);
    box-sizing:border-box;
}
.studio-panel-width { width:min(var(--studio-panel-width,240px), max(160px, calc(100% - 240px))); flex:0 0 auto; }
.studio-panel-header { display:flex; align-items:center; gap:8px; flex:0 0 auto; min-height:44px; padding:7px 12px; border-bottom:1px solid var(--line); }
.studio-panel-title { min-width:0; margin:0; font-size:12px; font-weight:600; overflow-wrap:anywhere; }
.studio-panel-actions { display:flex; align-items:center; gap:5px; margin-left:auto; }
.studio-panel-extra { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.studio-panel-control { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; flex:0 0 30px; padding:0; border:1px solid transparent; border-radius:5px; background:transparent; color:var(--text-dim); cursor:pointer; }
.studio-panel-control:hover { background:var(--panel-2); border-color:var(--line); color:var(--text); }
.studio-panel-control:focus-visible, .studio-panel-resize:focus-visible { outline:2px solid var(--copper); outline-offset:2px; }
.studio-panel-content { min-width:0; min-height:0; flex:1 1 auto; overflow:auto; padding:12px; }
.studio-panel [hidden] { display:none !important; }
.studio-panel.is-collapsed { height:auto !important; align-self:flex-start; }
.studio-panel.is-collapsed > .studio-panel-header { border-bottom:0; }
.studio-panel-resize { position:absolute; z-index:5; touch-action:none; user-select:none; border-radius:4px; }
.studio-panel-resize::after { content:""; position:absolute; border-radius:3px; background:var(--line); }
.studio-panel-resize:hover::after, .studio-panel-resize:focus-visible::after, .is-resizing > .studio-panel-resize::after { background:var(--copper); }
.studio-panel-resize-width { width:10px; top:44px; bottom:10px; right:-5px; cursor:ew-resize; }
.studio-panel-resize-width::after { width:3px; height:38px; left:4px; top:calc(50% - 19px); }
.studio-panel-resize-height { height:10px; bottom:-5px; left:12px; right:12px; cursor:ns-resize; }
.studio-panel-resize-height::after { height:3px; width:38px; top:4px; left:calc(50% - 19px); }
.studio-panel.is-resizing { user-select:none; }
.studio-panel.is-maximized { position:fixed !important; inset:12px !important; z-index:2040; width:auto !important; max-width:none !important; height:auto !important; min-height:0 !important; margin:0 !important; box-shadow:0 0 0 100vmax #0008; }
.studio-panel.is-maximized > .studio-panel-content { flex:1 1 0; }
.studio-layout { display:flex; align-items:flex-start; gap:16px; min-width:0; }
.studio-workspace-panel { flex:1 1 0; }
.studio-workspace-panel > .studio-panel-content { display:flex; flex-direction:column; padding:0; }
.studio-workspace-panel .studio-workspace-tabs { flex:0 0 auto; border-bottom:1px solid var(--line); }
/* Padding restated at this specificity: the theme's AdminLTE .card-body loads later and
   pads with --bs-card-spacer-*, which is only defined inside a .card, so it resolved to 0. */
.studio-workspace-panel .card-body.tab-body { flex:1 1 0; height:auto; min-height:0; overflow:auto; padding:16px 20px; }
.studio-explorer-panel > .studio-panel-content { display:flex; flex-direction:column; padding:8px; }
.studio-output-panel { margin-top:16px; }
.studio-output-panel > .studio-panel-content { display:flex; flex-direction:column; gap:10px; }
.studio-output-panel .generation-steps { flex:0 0 auto; }
.studio-output-panel .output-log { flex:1 0 64px; min-height:64px; max-height:none; overflow:auto; }
.studio-panel-rail.is-collapsed { width:46px !important; min-width:46px; }
.studio-panel-rail.is-collapsed > .studio-panel-header { flex-direction:column-reverse; padding:8px 6px; gap:12px; }
.studio-panel-rail.is-collapsed > .studio-panel-header > .studio-panel-title { writing-mode:vertical-rl; padding-bottom:8px; }
.studio-panel-rail.is-collapsed > .studio-panel-header > .studio-panel-actions { margin-left:0; }
.studio-panel-rail.is-collapsed > .studio-panel-header .studio-panel-maximize { display:none; }
/* Source panes use independent scrolling, so long paths and code cannot widen the page. */
.file-explorer { display:flex; align-items:flex-start; gap:12px; height:auto; min-width:0; overflow:visible; }
.tab-body > .file-explorer { flex:0 0 auto; }
.file-explorer > .studio-panel:not(.studio-panel-width) { flex:1 1 0; }
.file-explorer .file-tree { border:0; height:100%; }
.file-explorer .file-editor { height:100%; min-height:0; }
.file-explorer .file-path { min-width:0; overflow-wrap:anywhere; }
.file-explorer .file-editor-header { padding:8px 12px; margin:0; flex-shrink:0; }
.file-explorer .studio-panel-content:has(> .file-editor) { padding:0; overflow:hidden; }
@media (max-width:900px) {
    .studio-layout, .file-explorer { flex-direction:column; align-items:stretch; }
    .studio-layout > .studio-panel, .file-explorer > .studio-panel { width:100%; flex:0 0 auto; }
    .studio-panel-width { max-width:100%; }
    .studio-layout > .studio-panel > .studio-panel-resize-width, .file-explorer > .studio-panel > .studio-panel-resize-width { display:none; }
    .studio-panel-rail.is-collapsed { width:100% !important; }
    .studio-panel-rail.is-collapsed > .studio-panel-header { flex-direction:row; padding:7px 12px; }
    .studio-panel-rail.is-collapsed > .studio-panel-header > .studio-panel-title { writing-mode:horizontal-tb; padding:0; }
    .studio-panel-rail.is-collapsed > .studio-panel-header > .studio-panel-actions { margin-left:auto; }
}
@media (max-width:480px) {
    .studio-panel-header { flex-wrap:wrap; padding:7px 8px; }
    .studio-panel-title { font-size:12px; }
    .studio-panel-extra { gap:4px; }
    .studio-panel.is-maximized { inset:4px !important; }
}