/* LEONARDO WORKSHOP 0.8 — unified controls, scalable Layers and accurate selection */
:root{
  --workshop-text:#262626;
  --workshop-muted:#675e52;
  --workshop-surface:#f2e7d4;
  --workshop-control:#e8ddcb;
  --workshop-hairline:#d5ccba;
}
/* Properties: all tools share a single typographic and input scale. */
#inspectorView .property-nav button{
  font-family:Arial,Helvetica,sans-serif;font-size:10px!important;font-weight:750;
  min-height:36px;line-height:1.27;letter-spacing:.05px;
  border-radius:11px;background:#e8ddcb;color:#262626;border-color:#d5c6b3;
}
#inspectorView .property-nav button.active{background:#262626;color:#faf9f5;border-color:#262626}
#inspectorView .inspector-section h3,
#inspectorView .general-export-heading{font-size:11px!important;letter-spacing:.7px;color:#262626;font-weight:800}
#inspectorView .inspect-field,
#inspectorView .mini-note{font-size:11px!important;color:#61574b!important;letter-spacing:.12px;line-height:1.55}
#inspectorView .inspect-field input:not([type=color]),
#inspectorView .inspect-field select,
#inspectorView .sheet-active input{
  font-family:Arial,Helvetica,sans-serif;font-size:12px!important;min-height:38px;
  border-radius:11px;background:#faf9f5;color:#262626;border:1px solid #d5c6b3;
}
#inspectorView .control-grid button{font-family:Arial,Helvetica,sans-serif;min-height:42px;font-size:10.5px!important;font-weight:750;letter-spacing:.03px;line-height:1.24;padding:6px 5px;border-radius:11px;color:#262626;background:#e8ddcb;border:1px solid #d5c6b3}
#inspectorView .control-grid button.danger{color:#faf9f5;background:#663535}
#inspectorView .control-grid button:hover{background:#d5ccba}
#inspectorView .control-grid button.active{background:#262626;color:#faf9f5}
#inspectorView .property-page{font-size:12px;color:#262626}
#inspectorView .sheet-active strong{font-size:12px;padding:10px 9px}
#inspectorView .sheet-cell-colours .inspect-field{min-width:0}
#inspectorView .sheet-cell-colours input[type=color]{width:100%!important;min-height:37px}
#inspectorView .property-nav{gap:6px!important}
/* One back arrow, one look, throughout the app. */
#sidebar>.aside-head{color:#262626;font-weight:700;letter-spacing:.55px;font-size:14px}
#sidebar .universal-back{
  display:grid;place-items:center;flex:0 0 35px;height:35px;width:35px;
  padding:7px!important;margin:0 2px 0 0;border:1px solid #d5c6b3!important;
  background:#e9dece!important;border-radius:11px!important;color:#262626!important;
  transition:background .16s ease,transform .16s ease;
}
#sidebar .universal-back:hover{background:#d8cbb8!important;transform:translateX(-2px)}
#sidebar .universal-back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Tools and workbench actions look like one product, not miscellaneous HTML buttons. */
#toolsView .utility{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
#toolsView .utility button{
 display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-width:0;
 min-height:42px;padding:8px 9px!important;background:#e9ddc9;border:1px solid #d2c4af;
 color:#262626;font-size:10.5px!important;font-weight:800;letter-spacing:.25px;
 border-radius:14px;transition:background .17s ease,border-color .17s ease,transform .17s ease;
}
#toolsView .utility button:hover{background:#dbceb9;border-color:#bbaa92;transform:translateY(-1px)}
#toolsView .utility button:active{transform:translateY(0)}
#toolsView .utility .utility-create{grid-column:1/-1;justify-content:center;min-height:48px;background:#d5ccba;border:1px solid #b9aa94;border-radius:16px}
#toolsView .utility .utility-symbol{display:inline-flex;align-items:center;justify-content:center;min-width:17px;font-size:17px;line-height:1;font-weight:500}
#toolsView .utility button.symbol-action{min-height:42px}
#toolsView .utility button.symbol-action svg{stroke:#262626;width:20px;height:20px}
#toolsView .tools button{background:#d5ccba!important;border:1px solid transparent;border-radius:22px!important;padding-right:12px;transition:background .14s ease,transform .14s ease}
#toolsView .tools button:hover{background:#c7bba8!important;transform:translateX(2px)}
#toolsView .tools button i{background:#c4b9a6}
#toolsView .quick-tools button{background:#d5ccba;color:#262626;border:1px solid transparent}
#toolsView .quick-tools button:hover{border-color:#ae9e87;background:#cfc3b0}
#toolsView .aside-hint,#sidebar .layers-heading-main small{color:#61574b}
/* Layers: no second "nested canvases" list. A canvas is a branch in this tree.
   The top splitter can be dragged upwards/downwards like a Photoshop panel. */
#sidebar #layersPanel{
 flex:0 0 var(--layers-height,220px)!important;
 min-height:125px!important;max-height:none!important;
 padding:16px 13px 9px!important;position:relative;
 border-top:1px solid #c8baa6;
 background:#f2e7d4;
}
#sidebar #layersPanel .layers-heading-main{margin-bottom:9px;font-size:11px;letter-spacing:.7px;color:#262626}
#layersResize{
 position:absolute;z-index:12;left:0;right:0;top:-9px;height:18px;display:grid;
 place-items:center;cursor:ns-resize;touch-action:none;
}
#layersResize:before{content:'';display:block;width:56px;height:5px;border-radius:20px;background:#b9aa94;transition:width .15s ease,background .15s ease}
#layersResize:hover:before,#layersResize.resizing:before,#layersResize:focus-visible:before{width:82px;background:#262626}
#layersResize:focus-visible{outline:2px solid #262626;outline-offset:-3px}
#sidebar #layersPanel .hierarchy{flex:1;min-height:0!important;overflow-y:auto!important;scrollbar-width:thin;scrollbar-color:#bbaa92 transparent;padding:0 2px 8px}
#navigation .layer-root,
#navigation .layer-entry{display:flex!important;align-items:center;gap:5px;min-width:0;min-height:33px!important;
 height:auto!important;width:100%;margin:2px 0;padding-top:4px;padding-bottom:4px;
 color:#262626;font-size:11px;font-weight:600;border-radius:10px;border:0;background:transparent;}
#navigation .layer-root{padding:8px 10px;text-align:left;background:#e6dbc8!important;color:#262626!important}
#navigation .layer-root.active{background:#d5ccba!important}
#navigation .layer-entry{padding-left:calc(3px + var(--layer-depth,1)*12px);padding-right:7px;box-sizing:border-box;cursor:pointer}
#navigation .layer-entry:hover{background:#e8ddcb}
#navigation .layer-entry.active{background:#d5ccba;border:1px solid #c3b29d;color:#262626}
#navigation .layer-name{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0}
#navigation .layer-count{font-size:10px;opacity:.55;flex:0 0 auto}
#navigation .layer-icon{font-size:12px;min-width:15px;text-align:center;flex:0 0 15px;color:#675b4d}
#navigation .layer-disclosure{min-width:18px!important;flex:0 0 18px!important;width:18px!important;height:24px!important;min-height:24px!important;padding:0!important;margin:0!important;background:transparent!important;border:0!important;color:#262626!important;text-align:center!important;display:grid!important;place-items:center!important}
#navigation .layer-disclosure-spacer{flex:0 0 18px;width:18px}
#navigation .layer-open-canvas{border:0!important;border-radius:8px;background:#e5d8c5!important;color:#262626!important;font-size:14px}
#navigation .layer-open-canvas:hover{background:#d1c3af!important}
#navigation .layer-entry .layer-grip{opacity:.35;font-size:12px;flex:0 0 16px;text-align:center}
#navigation .hierarchy-group{margin:0}
#navigation .layer-nested-contents{position:relative}
#navigation .layer-nested-contents:before{content:'';position:absolute;top:2px;bottom:2px;left:19px;border-left:1px solid #d0c3af;pointer-events:none}
#navigation [contenteditable=true]{outline:2px solid #262626;outline-offset:2px;background:#faf9f5;border-radius:4px}
/* Selection marks show only when the pointer actually intersects a tool. */
#stage.is-marquee-selecting, #stage.is-marquee-selecting .item, #stage.is-marquee-selecting [contenteditable]{user-select:none!important;-webkit-user-select:none!important}
#selectionBox.hidden{display:none!important}
#selectionBox{border:1.5px solid #262626!important;background:#26262613!important;border-radius:5px}
#stage .multi-bar{color:#262626}
#stage .multi-bar span{color:#262626!important;user-select:none}
#stage .multi-bar button{color:#262626;user-select:none}
#stage .multi-bar button.danger{color:#faf9f5}
/* Context menu follows the same workshop design; the selected item's menu is available on right-click anywhere. */
.workshop-context{border-radius:15px!important;background:#f2e7d4!important;border:1px solid #cabcaa;box-shadow:0 16px 42px #2626262b}
.workshop-context .context-caption{color:#61574b!important}
.workshop-context .context-entry{color:#262626!important;border-radius:8px;font-size:11px}
.workshop-context .context-entry:hover{background:#e0d4c1!important}
.workshop-context .context-entry.danger{color:#943e3e!important}
/* Keep dark blue confined to accents and focus, not everyday interface text. */
#sidebar .aside-bottom,#sidebar .aside-bottom button{color:#262626}
@media(max-width:750px){
 #sidebar #layersPanel{max-height:none!important}
 #layersResize:before{height:6px}
 #navigation .layer-entry{font-size:12px;min-height:36px!important}
}
@media(prefers-reduced-motion:reduce){#toolsView .utility button,#sidebar .universal-back{transition:none}}