/* Full-width drawing desk. These layout rules apply only to the editor. */
body[data-mode=editor] .app{grid-template-columns:minmax(0,1fr);grid-template-rows:64px 48px minmax(0,1fr);grid-template-areas:'header' 'title' 'work'}
body[data-mode=editor] .app-footer{display:none}
body[data-mode=editor] .header{padding:0 20px;gap:16px;display:flex;align-items:center}
body[data-mode=editor] .identity{min-width:150px}
body[data-mode=editor] .creed-mark{width:32px;height:32px}
body[data-mode=editor] .creed-mark svg{width:26px;height:26px}
body[data-mode=editor] .wordmark{font-size:24px}
body[data-mode=editor] .brand-caption{display:none}
body[data-mode=editor] .mode-tabs{position:static;height:64px;flex:1;justify-content:center}
body[data-mode=editor] .mode-tabs a{padding:0 10px;font-size:11px;flex:0 1 auto}
body[data-mode=editor] .header-right{padding:0;gap:10px}
body[data-mode=editor] .header-right #save-status{display:flex;position:static;max-width:160px;font-size:9px;white-space:normal;text-align:left}
body[data-mode=editor] .header-right .btn{padding:8px 11px}
body[data-mode=editor] .titlebar{padding:0 16px;gap:12px}
body[data-mode=editor] .titlebar:before{display:none}
body[data-mode=editor] #stage-name{font-size:17px;width:clamp(130px,25vw,440px)}
body[data-mode=editor] .stage-heading{gap:10px}
body[data-mode=editor] .title-actions .btn{padding:6px 10px;font-size:11px}
body[data-mode=editor] #toggle-inspector{display:none}
body[data-mode=editor] .workspace{position:relative;margin:0;border:0;border-radius:0;box-shadow:none;overflow:hidden;min-width:0;min-height:0}
.editor-menubar{height:42px;flex:0 0 42px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 12px;background:#1b2427;border-bottom:1px solid var(--line);z-index:7}
.build-menus,.editor-panel-buttons{display:flex;align-items:center;gap:3px;min-width:0}
.menu-trigger{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 10px;min-height:32px;border-radius:4px;color:#c6d2c8;font-size:11px;white-space:nowrap}
.menu-trigger svg{width:14px;height:14px}
.menu-trigger:hover,.menu-trigger[aria-expanded=true]{background:#354236;color:#e2eccd}
.maximize-button{border:1px solid #526045;color:#d2e0a4;margin-left:8px}
.maximize-button[aria-pressed=true]{background:#b6c77b;color:#172124}
body[data-mode=editor] .toolbar{height:42px;padding:0 12px;gap:4px}
body[data-mode=editor] .tool.toggle span{display:inline}
body[data-mode=editor] .editor-context{height:36px;flex-basis:36px;padding:0 16px;gap:10px}
body[data-mode=editor] .editor-context .orbit-controls{flex:0 1 860px;gap:10px}
body[data-mode=editor] .orbit-elevation{display:flex}
body[data-mode=editor] #capture-cover,body[data-mode=editor] #preview-cover{font-size:11px;min-height:28px;padding:4px 10px;white-space:nowrap}
body[data-mode=editor] .canvas-wrap{flex:1 1 0;min-height:0}
body[data-mode=editor] #canvas{position:absolute;inset:0;width:100%;height:100%}
body[data-mode=editor] .canvas-topline{top:12px;left:16px;right:16px}
body[data-mode=editor] .canvas-status{align-items:center;height:40px;padding:0 12px;gap:14px;font-size:10px}
body[data-mode=editor] .canvas-bottom{position:static;display:flex;gap:12px;pointer-events:auto}
body[data-mode=editor] .canvas-option{padding:5px 8px;font-size:10px;background:none}
body[data-mode=editor] .zoom-controls{padding:0;box-shadow:none}
body[data-mode=editor] .zoom-controls button{height:27px}
body[data-mode=editor] #tool-hint{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body[data-mode=editor] .canvas-status #coordinates{display:inline}
body[data-mode=editor] .palette{display:flex;position:absolute;inset:42px auto auto 12px;width:380px;max-width:calc(100% - 24px);max-height:calc(100% - 94px);z-index:9;border:1px solid #506046;border-radius:0 0 6px 6px;box-shadow:0 16px 45px #0008;grid-area:auto}
body[data-mode=editor] .palette .panel-heading{padding:10px 14px;gap:10px}
body[data-mode=editor] .palette .panel-heading h2{font-size:13px;flex:1}
body[data-mode=editor] .palette .count{display:inline}
body[data-mode=editor] .palette .search{display:flex;margin:0 14px 12px}
body[data-mode=editor] .palette .search input{font-size:12px}
body[data-mode=editor] .palette-tabs{padding:0 14px;gap:22px}
body[data-mode=editor] .palette-tabs button,body[data-mode=editor] .palette-tabs #layers-tab{font-size:11px;padding:0 0 10px}
body[data-mode=editor] .palette-tabs #layers-tab:before{display:none}
body[data-mode=editor] .palette-scroll{padding:14px;min-height:0;overflow:auto}
body[data-mode=editor] .palette .section-label{display:flex;font-size:10px;text-align:left}
body[data-mode=editor] .element-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
body[data-mode=editor] .element-card{min-height:86px;padding:10px 5px;font-size:11px;line-height:1.3}
body[data-mode=editor] .element-card svg{width:38px;height:32px}
body[data-mode=editor] .palette-footer{display:flex;padding:10px 14px;font-size:10px}
body[data-mode=editor] .inspector{display:flex;grid-area:auto;position:absolute;inset:42px 0 40px auto;width:320px;max-width:85%;border:1px solid #46523f;z-index:8;box-shadow:-12px 0 32px #0006;border-radius:0}
.inspector-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 12px;border-bottom:1px solid var(--line);font:9px 'IBM Plex Mono',monospace;letter-spacing:1px;color:var(--muted)}
body[data-mode=editor] .inspector-tabs{padding:14px 18px 0;height:45px}
body[data-mode=editor] .inspector-tabs button{padding-bottom:12px}
body[data-mode=editor] #inspector-content{padding:18px;min-height:0}
.path-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.path-actions .btn{font-size:10px;padding:4px 8px;min-height:27px}
.cover-frame{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #b6c77b90;box-shadow:0 0 0 100vmax #080d1055;pointer-events:none}
.cover-frame>span{position:absolute;top:7px;left:9px;color:#c2d79c;font:8px 'IBM Plex Mono',monospace;letter-spacing:1px;text-shadow:0 1px 4px #000}
.cover-preview{width:100%;height:auto;max-height:60vh;object-fit:contain}
.stage-cover-settings .cover-preview-button{display:block;width:100%;padding:0;margin:0 0 12px}
.stage-cover-settings .cover-preview-button img{width:100%;height:auto;aspect-ratio:8/5;object-fit:contain}
.cover-preview-dialog{width:min(1100px,calc(100vw - 32px))}
.cover-preview-note{font-size:12px;line-height:1.6;color:var(--muted)}
body[data-mode=editor][data-editor-maximized=true] .app{grid-template-rows:40px minmax(0,1fr);grid-template-areas:'title' 'work'}
body[data-mode=editor][data-editor-maximized=true] .header{display:none}
body[data-mode=editor][data-editor-maximized=true] .titlebar{background:#11191b}
.editor-save-status{display:none;font-size:10px;color:#abbc9e;max-width:230px}
body[data-mode=editor][data-editor-maximized=true] .editor-save-status{display:inline}
.library-card>.stage-cover-image{width:156px;height:98px}
.result-stage-covers{grid-template-columns:repeat(auto-fit,minmax(220px,300px))}
.result-stage-covers .stage-cover-image{height:auto;aspect-ratio:8/5}
@media(max-width:1100px){body[data-mode=editor] .header{padding:0 12px;gap:10px}body[data-mode=editor] .identity{min-width:0}body[data-mode=editor] .wordmark{font-size:21px}body[data-mode=editor] .mode-tabs a{padding:0 7px;font-size:10px}body[data-mode=editor] .brand-caption,body[data-mode=editor] .header-help{display:none}body[data-mode=editor] .header-right #save-status{max-width:115px;font-size:8px}.menu-trigger{padding:7px 8px}body[data-mode=editor] .canvas-status>div:last-child{display:none}}
@media(max-width:760px){body[data-mode=editor] .app{grid-template-rows:94px 44px minmax(0,1fr)}body[data-mode=editor] .header{position:relative;padding:8px 12px 42px;align-items:center}body[data-mode=editor] .mode-tabs{position:absolute;inset:auto 12px 0;height:40px}body[data-mode=editor] .mode-tabs a{flex:1}body[data-mode=editor] .header-right #save-status{max-width:100px}.editor-menubar{height:76px;flex-basis:76px;flex-wrap:wrap;gap:0;padding:3px 8px}.build-menus,.editor-panel-buttons{width:100%;justify-content:space-between}.menu-trigger{font-size:10px;padding:5px 7px}.maximize-button{margin-left:auto}body[data-mode=editor] .palette,body[data-mode=editor] .inspector{top:76px}body[data-mode=editor] .editor-context{overflow-x:auto}body[data-mode=editor] .editor-context .orbit-controls{flex:0 0 660px}body[data-mode=editor] #tool-hint{display:none}body[data-mode=editor] .canvas-status{justify-content:center}.editor-save-status{max-width:120px;font-size:8px}.library-card>.stage-cover-image{width:90px;height:60px}.result-stage-covers{grid-template-columns:repeat(2,minmax(0,1fr))}}