/* The workspaces own the viewport; menus and canvas tools float above them. */
html,body{height:100%;overflow:hidden}
.workbench{height:100dvh;min-height:0;grid-template-columns:minmax(180px,20fr) 8px minmax(280px,60fr) 8px minmax(210px,20fr)}
.library{border-right:0;min-width:0;max-height:none;min-height:0}
.library .panel-heading{padding:17px 17px 14px}
.library .eyebrow{display:none}
.library .panel-heading h2{margin:0;font-size:15px}
.asset-grid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));padding-left:13px;padding-right:13px}
.library-tabs{margin-left:13px;margin-right:13px}
.library-controls{padding-left:13px;padding-right:13px}
.editor{position:relative;min-height:0;min-width:0}
.editor-toolbar{height:0;padding:0;border:0;position:absolute;inset:0 0 auto;z-index:4;background:transparent;pointer-events:none}
.editor-toolbar .tools{position:absolute;top:13px;left:14px;gap:5px;background:#fffffff2;border:1px solid #e0e6d7;border-radius:9px;padding:4px;box-shadow:0 2px 8px #3045260a;pointer-events:auto}
.editor-toolbar>#previewToggle{position:absolute;top:15px;right:16px;border:1px solid #e0e6d7;background:#fffffff2;border-radius:8px;padding:8px 11px;box-shadow:0 2px 8px #3045260a;pointer-events:auto}
.canvas-caption{top:72px;left:22px}
.canvas-viewport{inset:72px 16px 82px}
.canvas-area{min-height:0}
.editor-bottom{height:31px;min-height:31px;padding:0 14px;font-size:9px}
.inspector{display:block;grid-column:auto;grid-row:auto;border-left:0;min-width:0;min-height:0}
.reference-section{grid-row:auto;border-right:0;padding-top:18px}
.reference-preview{height:clamp(190px,31dvh,350px)}
.reference-preview{touch-action:none;cursor:grab;background:#e9ece5}
.reference-preview:active{cursor:grabbing}
.reference-preview>img{object-fit:contain;user-select:none;pointer-events:none;will-change:transform}
.reference-nav{gap:4px;flex-wrap:wrap}
.reference-zoom-controls{display:flex;align-items:center;gap:3px;margin-left:auto}
.reference-zoom-controls button{width:25px;height:25px;border:1px solid #e4eadd;background:#fff;border-radius:5px;color:#71845e;display:grid;place-items:center;padding:4px;cursor:pointer}
.reference-zoom-controls button:hover{background:#eff4e8;border-color:#b9c9a9}
.reference-zoom-controls svg{width:14px;height:14px}
.reference-zoom-controls output{min-width:34px;text-align:center;font-size:9px;color:#77876d;font-variant-numeric:tabular-nums}
.view-options{grid-column:auto}
.workspace-divider{position:relative;align-self:stretch;cursor:col-resize;touch-action:none;background:#edf0e7;border-left:1px solid #e0e6d8;border-right:1px solid #e0e6d8;outline-offset:-2px;z-index:6}
.workspace-divider::before{content:"";position:absolute;inset:0 -5px;z-index:1}
.workspace-divider>span{width:3px;height:34px;background:#bac9ab;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:8px;pointer-events:none}
.workspace-divider:hover,.workspace-divider:focus-visible,.workspace-divider.dragging{background:#dce9cd}
.workspace-divider:hover>span,.workspace-divider:focus-visible>span,.workspace-divider.dragging>span{background:#66874e}
body.resizing-workspaces,body.resizing-workspaces *{cursor:col-resize!important;user-select:none!important}
body.resizing-workspaces canvas,body.resizing-workspaces iframe{pointer-events:none}
.command-dock{position:fixed;z-index:15;top:12px;left:50%;transform:translateX(-50%);background:#fffffff5;border:1px solid #dce5d2;border-radius:11px;box-shadow:0 4px 18px #2c48261a;max-width:calc(100vw - 24px);backdrop-filter:blur(12px)}
.dock-toggle{border:0;border-radius:10px;background:transparent;display:flex;align-items:center;gap:9px;padding:10px 13px;min-height:40px;width:100%;color:#3f624a;font-size:12px}
.dock-toggle>[data-icon]{background:#2c5949;color:#f0f5e5;border-radius:5px;padding:3px}
.dock-toggle svg{height:17px;width:17px}
.dock-key{font-size:8px;letter-spacing:1.2px;color:#94a283;margin-left:2px}
.dock-chevron{font-size:17px;line-height:16px;margin-left:auto;transition:transform .15s}
.command-dock.expanded{width:390px;box-shadow:0 8px 35px #263e2d30}
.command-dock.expanded .dock-chevron{transform:rotate(180deg)}
.command-dock.expanded .dock-toggle{border-bottom:1px solid #e5ebdd;border-radius:10px 10px 0 0}
.dock-content{padding:15px}
.dock-project{display:flex;align-items:center;gap:12px;margin-bottom:14px;font-size:11px;color:#8d9c80}
.dock-project input{min-width:0;flex:1;border:1px solid #e2e8da;border-radius:6px;background:#fafcf6;padding:9px;font-size:12px;color:#42613c}
.dock-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.dock-actions .button{height:36px;padding:0 10px;font-size:11px}
.dock-actions svg{width:15px;height:15px}
.dock-footer{display:flex;justify-content:space-between;gap:10px;align-items:center;padding-top:15px;font-size:9px;color:#a0ad94}
.dock-footer .save-status{display:flex;font-size:9px;margin:0}
.inspector .transform-buttons{flex-wrap:wrap}
.inspector .transform-buttons button{min-width:55px}
@media(max-width:1100px) and (min-width:800px){
  .dock-key{display:none}.dock-toggle{font-size:11px;min-height:36px;padding:8px 10px;gap:6px}
  .editor-toolbar .tools{left:10px;top:13px;gap:2px;padding:3px}.editor-toolbar .tools .icon-button{padding:5px;min-width:25px;min-height:25px}
  .editor-toolbar>#previewToggle{right:9px;top:15px;padding:7px;font-size:10px}
  .editor-bottom>span:first-child{max-width:75%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
}
@media(max-width:799px){
  html,body{height:auto;overflow:auto}
  .workbench{display:flex;flex-direction:column;height:auto;min-height:100dvh;grid-template-columns:none}
  .workspace-divider{display:none}
  .editor{order:0;height:82dvh;min-height:440px;max-height:none}
  .library{order:1;height:485px;min-height:0;max-height:none;border-top:1px solid var(--line)}
  .inspector{order:2;display:block;border-top:1px solid var(--line)}
  .command-dock{top:10px}
  .dock-key{display:none}.dock-toggle{min-height:35px;padding:7px 9px;font-size:11px;gap:6px}
  .editor-toolbar .tools{top:11px;left:9px;padding:3px;gap:1px}
  .editor-toolbar .tools .icon-button{min-width:24px;min-height:24px;padding:4px}
  .editor-toolbar .tool-divider{margin:0 2px}
  .editor-toolbar>#previewToggle{top:12px;right:9px;padding:7px;font-size:9px;gap:4px}
  .editor-toolbar>#previewToggle svg{height:13px;width:13px}
  .canvas-caption{top:67px;left:16px}.canvas-viewport{inset:62px 0 82px}
  .asset-grid{grid-template-columns:repeat(auto-fill,minmax(74px,1fr))}
  .reference-preview{height:310px}.reference-section{border-bottom:1px solid var(--line)}
  .reference-zoom-controls button{width:30px;height:30px}
}
@media(max-width:360px){.dock-toggle>[data-icon]{display:none}.dock-toggle{gap:4px;font-size:10px}}
.layer-select{cursor:grab}.layer-select:active{cursor:grabbing}.layer-item.dragging{opacity:.42}.layer-item.drop-before{border-top:2px solid #718f58}.layer-item.drop-after{border-bottom:2px solid #718f58}.layer-order-button:disabled{opacity:.28;cursor:default;background:transparent}