/* LEONARDO WORKSHOP Studio 1.0 — group editing, assets, canvas covers and neutral interface */
:root{--workshop-accent:#262626;--workshop-accent-text:#faf9f5}
/* The Workshop UI uses ink, ivory and cream; swatches remain available only as editable choices. */
#sidebar .inspector-header,#sidebar .inspector-section h3,#sidebar .layers-heading-main,
#sidebar .property-nav button,#sidebar .hierarchy,#sidebar .layer-name,
#sidebar .aside-hint,#sidebar .utility button,#sidebar .inspect-field,
#sidebar .mini-note,#sidebar .inspector-header span{color:#262626!important}
#sidebar #inspectorView [data-property-page].active{background:#262626!important;border-color:#262626!important;color:#faf9f5!important}
#sidebar #inspectorView .control-grid button.active,
#sidebar #inspectorView .property-nav .active{background:#262626!important;color:#faf9f5!important;border-color:#262626!important}
#sidebar #inspectorView .control-grid button.danger{background:#663535!important;color:#faf9f5!important}
#sidebar .layer-entry.active,#sidebar .layer-root.active{background:#e0d6c3!important;color:#262626!important}
#sidebar .layer-rename-input,#sidebar :is(input,select,textarea):focus-visible{outline-color:#262626!important;border-color:#262626!important}
#sidebar #layersPanel{background:#f2e7d4}
/* One family of compact tools. 5 icons fit as one horizontal row. */
#toolsView .quick-tools{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:5px!important}
#toolsView .quick-tools button{min-width:0!important;padding:4px!important;border-radius:13px!important}
#toolsView .quick-tools svg{width:20px;height:20px}
/* Group selection and title connected to frame, independent title, line and tint colours. */
#groupsLayer .group{border-width:2px;position:absolute;box-sizing:border-box;overflow:visible;pointer-events:none;border-radius:22px;}
#groupsLayer .group.group-selected{box-shadow:0 0 0 1px #26262640}
#groupsLayer .group-title{
  right:18px!important;bottom:calc(100% - 2px)!important;
  top:auto!important;min-height:39px!important;padding:9px 19px 8px!important;
  border:2px solid #faf9f5!important;border-bottom:0!important;
  border-radius:22px 22px 0 0!important;
  font-size:12px!important;line-height:20px!important;
  max-width:calc(100% - 35px)!important;
  box-shadow:none!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  z-index:6!important;cursor:grab;
}
#groupsLayer .group.group-title-inside .group-title{right:18px!important;top:-2px!important;bottom:auto!important;border-radius:0 0 17px 17px!important}
#inspectorView .group-palette{padding-top:8px}
#inspectorView .group-palette .palette{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:11px 0 13px}
#inspectorView .group-palette .palette button{width:100%;height:30px;border-radius:8px;border:2px solid transparent;cursor:pointer}
#inspectorView .group-palette .palette button.chosen{outline:2px solid #262626;outline-offset:2px}
#inspectorView .group-palette .inspect-field{margin:6px 0 2px}
#inspectorView .group-range-label{position:relative;display:block;margin:13px 0 20px}
#inspectorView .group-range-label strong{float:right;font-size:11px;letter-spacing:0;color:#262626}
#inspectorView input[type=range]{margin-top:12px;cursor:pointer;accent-color:#262626;width:100%}
#inspectorView input[type=color]{height:40px;border:0;background:transparent;padding:0;cursor:pointer}
#inspectorView .group-palette input[type=color]{width:100%;max-width:120px}
#inspectorView .group-palette{max-width:100%}
/* Assets have their own clean presentation — no visible outlines until selection. */
.item.image .item-body{background:transparent;overflow:hidden;border:0;border-radius:16px;box-shadow:0 6px 20px #26262620}
.item.image .asset-image-body{display:flex;justify-content:center;align-items:center}
.item.image img{height:100%;width:100%;display:block;object-fit:cover;pointer-events:none;user-select:none}
.item.file .item-body{border:none;border-radius:18px;background:#faf9f5;color:#262626;padding:19px 15px;display:flex;align-items:center;gap:12px;box-shadow:0 7px 18px #26262614}
.item.file .asset-file-icon{width:46px;height:48px;flex:none;border-radius:12px;background:#e0d6c3;display:grid;place-items:center}
.item.file .asset-file-icon svg{width:24px;height:24px;stroke:#262626;fill:none}
.item.file .asset-file-details{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.item.file .asset-file-details strong{font-size:13px;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.item.file .asset-file-details span{font-size:11px;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:#6b6255}
.item.file .asset-download{width:36px;height:38px;flex:none;border:0;border-radius:12px;background:#e0d6c3;color:#262626;font-size:20px;cursor:pointer}
#inspectorView .file-meta{padding:11px;background:#e0d6c3;border-radius:9px;overflow-wrap:anywhere;line-height:1.5;font-size:12px}
/* Rounded cards with overlay covers. Text always readable over photographs. */
.item.canvas .item-body{overflow:hidden;border-radius:22px!important;background-repeat:no-repeat;background-position:center;background-size:cover}
.item.canvas .item-body button{font-family:inherit;background:#f2e7d4!important;color:#262626!important;border-color:transparent!important;border-radius:10px}
/* Selected tint and group caption must remain legible on bright/cool cover art. */
@media(max-width:750px){#toolsView .quick-tools{grid-template-columns:repeat(5,minmax(0,1fr))!important}#inspectorView .group-palette .palette{gap:5px}}

/* Neutral selection/drag feedback: no application chrome uses Workshop Blue. */
:root{--ws-outline:#262626}
.item.selected .item-body{outline-color:#262626b3!important}
.item.multi-selected .item-body{outline-color:#262626!important;box-shadow:0 0 0 5px #faf9f58c!important}
.selection-box{border-color:#262626!important;background:#26262610!important}
.snap-guide{background:#262626!important;border-color:#262626!important}
.group-drop-overlay{border-color:#262626a0!important;background:#26262630!important}
.group-drop-overlay span,#groupsLayer .group-drop-hint{background:#262626!important;color:#faf9f5!important}
#sidebar .layer-open-canvas{color:#262626!important}
#sidebar #navigation .group-entry button{color:#262626!important}
#sidebar #inspectorView input:focus,#sidebar #inspectorView select:focus{border-color:#262626!important}
#sidebar .property-page .page-entry.active{border-color:#262626!important}
#inspectorView .text-format-grid button.active{background:#262626!important;color:#faf9f5!important}
#sidebar .group-palette .palette button.chosen{outline-color:#262626!important}
.top .brand,.top .header-actions button{color:#262626!important;border-color:#262626!important}
#sidebar .stage-bottom{color:#262626}
#sidebar .layer-name{color:#262626!important}

/* Group names live in a dedicated overlay, above all editor tools. The translucent
   Group background remains BEHIND tools, rather than tinting their contents. */
#groupTitlesLayer{position:relative;z-index:9;pointer-events:none}
#groupTitlesLayer .group-title-anchor{position:absolute;height:0;pointer-events:none}
#groupTitlesLayer .group-title{
 position:absolute;right:18px;bottom:-2px;z-index:3;display:block;
 max-width:calc(100% - 30px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
 padding:9px 19px 8px;min-height:39px;line-height:20px;font-size:12px;font-weight:800;
 letter-spacing:.3px;border:2px solid #faf9f5;border-bottom:0;
 border-radius:22px 22px 0 0;box-sizing:border-box;
 pointer-events:auto;cursor:grab;user-select:none;
}
#groupTitlesLayer .group-title-anchor.title-inside .group-title{bottom:auto;top:-2px;border-radius:0 0 17px 17px;border-top:0;border-bottom:2px solid #faf9f5}
#groupTitlesLayer .group-title:active{cursor:grabbing}

#inspectorView .canvas-cover-preview{width:100%;height:112px;display:block;object-fit:cover;border-radius:12px;margin:9px 0 16px;box-shadow:0 3px 10px #26262618}