/* ── Scene Outliner ── */

/* ── Shared panel header (fixed height for all headers) ── */
.panel-head{
  display:flex;align-items:center;
  height:37px;box-sizing:border-box;
  border-bottom:1px solid var(--border-light);
  background:var(--surface);flex-shrink:0;
  position:relative;z-index:1;
}

/* ── Outliner tabs (Canvas / Scene) ── */
.outliner-tabs{
  gap:0;padding:0;
}
.outliner-tab{
  flex:1;border:none;background:transparent;
  font-size:12px;font-weight:600;font-family:inherit;
  text-transform:uppercase;letter-spacing:.5px;
  color:var(--text-muted);cursor:pointer;
  padding:0 12px;height:100%;
  transition:color .15s,box-shadow .15s;
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
}
.outliner-tab-label{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  max-width:180px;padding-top:1px;
}
.outliner-tab-locate{
  position:absolute;top:10px;right:10px;
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;flex-shrink:0;
  border-radius:var(--r-sm);color:var(--text-faint);
  transition:color .15s,background .15s;cursor:pointer;
}
.outliner-tab-locate svg{width:12px;height:12px;}
.outliner-tab-locate:hover{color:var(--primary);background:var(--primary-bg);}
/* Tutti i tab (Canvas, 3D Scene, Options): nessun hover/pressed di sfondo */
.outliner-tab:hover{ color:var(--text-secondary); }
.outliner-tab:active{ background:transparent; }
#optionsToggleBtn:hover{ color:var(--text-secondary); }
#optionsToggleBtn:active{ background:transparent; }
.outliner-tab.active{
  color:var(--primary);
}
/* ── Asset context button (dentro la gerarchia, stesso stile di o-create-btn) ── */
.ctx-asset-node{
  flex-shrink:0;
  padding:6px 10px;
  border-bottom:1px solid var(--border-light);
}
.ctx-asset-row{
  display:flex;align-items:center;
  position:relative;
  padding:0 28px;height:30px;
  width:100%;box-sizing:border-box;
  cursor:pointer;user-select:none;
  font:inherit;font-size:12px;font-weight:500;
  color:var(--primary);
  background:var(--primary-bg);
  border:1px solid color-mix(in srgb, var(--primary) 50%, transparent);
  border-radius:var(--r-sm);
  transition:background .15s,border-color .15s;
  justify-content:center;gap:5px;
}
.ctx-asset-row:hover{
  background:var(--primary-bg-hover);
  border-color:color-mix(in srgb, var(--primary) 70%, transparent);
}
.ctx-asset-row .o-icon{ flex-shrink:0;display:flex;align-items:center;justify-content:center; }
.ctx-asset-row .o-icon svg{ color:var(--primary); }
.ctx-asset-row .o-name{
  flex:0 0 auto;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--primary);
}
.ctx-asset-row .ctx-locate-btn{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;flex-shrink:0;
  border:none;background:transparent;padding:0;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--primary);opacity:.55;
  border-radius:var(--r-sm);
  transition:opacity .15s,background .15s;
}
.ctx-asset-row:hover .ctx-locate-btn{ opacity:.85; }
.ctx-asset-row .ctx-locate-btn:hover{ opacity:1;background:color-mix(in srgb,var(--primary) 18%,transparent); }
.ctx-asset-row .ctx-locate-btn svg{ width:11px;height:11px; }
/* ── Canvas menu dropdown: anchored to the outliner-tabs bar ── */
#canvasMenuDropdown{
  left: 0;
  /* override the opt-mode-dropdown default to align with tab bar */
}
#outlinerTabs{position:relative;}

/* ── Sliding tab indicator ── */
.tab-indicator{
  position:absolute;bottom:0;left:0;height:2px;
  pointer-events:none;z-index:2;
  border-radius:1px;
  background:var(--primary);
  transition:left .25s cubic-bezier(.4,0,.2,1), width .25s cubic-bezier(.4,0,.2,1);
}

.scene-outliner{
  flex:1;min-height:0;background:var(--surface);
  display:flex;flex-direction:column;overflow:hidden;
}
.outliner-head{
  gap:4px;padding:0 12px;
}
.outliner-title{font-weight:600;font-size:12px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;flex:1}
.outliner-btn{
  width:26px;height:26px;border:1px solid var(--border);background:var(--surface);border-radius:var(--r-sm);
  cursor:pointer;color:var(--text-muted);display:grid;place-items:center;transition:var(--tr);
}
.outliner-btn:hover{background:var(--bg);color:var(--text);}
.outliner-btn svg{width:14px;height:14px;}
/* ── Create button variant — labeled accent pill ── */
.outliner-btn.o-create-btn{
  width:auto;padding:0 10px 0 8px;gap:5px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:500;
  background:var(--primary-bg);color:var(--primary);
  border-color:color-mix(in srgb, var(--primary) 50%, transparent);
}
.outliner-btn.o-create-btn:hover{
  background:var(--primary-bg-hover);color:var(--primary);
  border-color:color-mix(in srgb, var(--primary) 70%, transparent);
}
.outliner-btn.o-create-btn .o-create-plus{font-size:16px;line-height:1;font-weight:300;}
.outliner-actions{display:flex;align-items:center;gap:2px;flex-shrink:0;}
/* ── Unified toolbar (search + action buttons) ── */
.outliner-toolbar{
  display:flex;gap:6px;padding:6px 12px;border-bottom:1px solid var(--border-light);align-items:center;flex-shrink:0;
}
.outliner-toolbar .search-wrap{flex:1;min-width:0;}
.outliner-toolbar .outliner-actions{flex-shrink:0;}
/* Clone & Delete toolbar buttons replaced by the right-click context menu.
   Hidden via CSS (handlers preserved so context-menu adapters keep working). */
#outlinerCloneBtn,
#outlinerDeleteBtn,
#plRefDeleteBtn,
#canvasDeleteLayerBtn,
#optionsCloneBtn,
#optionsDeleteBtn,
#presetsOutlinerDeleteBtn{display:none !important;}
/* ── Toggle filter row ── */
.outliner-toggles{
  display:flex;align-items:center;gap:3px;flex-shrink:0;
}
/* Filter toggle button — dot indicator when filters active */
.o-filter-toggle-btn{position:relative;flex-shrink:0;}
.o-filter-toggle-btn.has-filter{color:var(--primary);border-color:var(--primary);background:var(--primary-bg);}
.o-filter-toggle-btn.has-filter::after{
  content:'';position:absolute;top:2px;right:2px;
  width:6px;height:6px;border-radius:50%;background:var(--primary);
}
/* Open state: subtle pressed look */
.o-filter-toggle-btn.open{
  background:var(--primary-bg);color:var(--primary);border-color:var(--primary-bg);
}
/* Filter row — clean separator row */
.o-filter-row{
  padding:4px 12px;
  border-bottom:1px solid var(--border-light);
}
.o-toggle{
  width:22px;height:22px;border:none;background:none;border-radius:var(--r-sm);
  cursor:pointer;color:var(--text-muted);display:grid;place-items:center;
  transition:color .15s,background .15s,opacity .15s;opacity:.4;
}
.o-toggle svg{width:14px;height:14px;}
.o-toggle:hover{background:var(--bg);color:var(--text-secondary);opacity:.65;}
.o-toggle.active{background:var(--primary-bg);color:var(--primary);opacity:1;}
.o-toggle.active:hover{background:var(--primary-bg-hover);}
/* All button: disabled when all are on, active when some are off */
.o-toggle.o-toggle-all-disabled{background:none;color:var(--border);opacity:.5;cursor:default;}
.o-toggle.o-toggle-all-disabled:hover{background:none;color:var(--border);opacity:.5;}
.o-toggle-sep{
  width:1px;height:14px;background:var(--border);margin:0 2px;flex-shrink:0;
}
/* Badge-style toggle (text label) */
.o-toggle-badge{
  width:auto;font-size:10px;font-weight:600;letter-spacing:.3px;
  padding:2px 6px;line-height:1;
}
.o-toggle-badge.active{color:var(--primary);}
/* .outliner-search base → components.css; only min-width override here */
.outliner-search{min-width:0;}
/* .search-wrap, .search-clear → components.css */
.outliner-tree{flex:1;overflow-y:auto;padding:6px 0;}
.outliner-tree.drop-hover{box-shadow:inset 0 0 0 2px var(--primary);background:var(--primary-bg);}

/* ── Canvas Outliner (layers panel) ── */
.canvas-outliner{
  flex:1;min-height:0;background:var(--surface);
  display:flex;flex-direction:column;overflow:hidden;
}
.canvas-content-row{
  display:flex;flex-direction:row;
  flex:1;min-height:0;overflow:hidden;
}
.canvas-body{
  flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;
}

/* ── Side Strip (template canvas slots) ── */
.side-strip{
  width:72px;min-width:72px;flex-shrink:0;
  display:flex;flex-direction:column;
  border-right:1px solid var(--border-light);
  background:var(--bg-inset);overflow-y:auto;overflow-x:clip;
  padding:8px 0;gap:4px;align-items:center;
  position:relative;
}
.side-strip-slots{
  display:flex;flex-direction:column;gap:4px;align-items:center;
  width:100%;
}
/* Tile rendering uses the centralized .side-tile component
   defined further down in this file (PL section). */

/* ── Side-add popup menu ── */
.side-add-menu{
  position:fixed;z-index:9999;
  min-width:160px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r);
  box-shadow:0 4px 16px rgba(0,0,0,.12);padding:4px 0;
  display:none;
}
.side-add-menu.open{display:block;}
.side-add-item{
  display:flex;align-items:center;gap:6px;width:100%;
  padding:5px 12px;border:none;background:none;cursor:pointer;
  font-size:11px;font-family:inherit;color:var(--text);
  text-align:left;transition:background .12s;
}
.side-add-item:hover{background:var(--bg);}
.side-add-item svg{width:14px;height:14px;flex-shrink:0;color:var(--text-muted);}
.side-add-sep{height:1px;background:var(--border-light);margin:4px 0;}
.side-add-item.pa-existing{padding-left:18px;}
/* Canvas tree: allow horizontal scroll for deep hierarchies.
   width:100%       → row always fills the visible panel; blue selection adapts on resize.
   min-width:max-content → row grows wider than the panel for deep indent/long names (enables scroll). */
#canvasLayerTree{overflow-x:auto;}
#canvasLayerTree .o-row{width:100%;min-width:max-content;}
#canvasLayerTree .o-name{overflow:visible;text-overflow:clip;white-space:nowrap;}
.canvas-empty-state{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:var(--text-muted);padding:24px 16px;
}
.canvas-empty-state svg{width:40px;height:40px;opacity:.25;margin-bottom:8px;}
.canvas-empty-state p{font-size:11px;line-height:1.5;margin:0;}

/* ── Outliner nodes ── */
.o-highlight{background:var(--primary-bg);color:var(--primary);border-radius:2px;padding:0 1px;}
.o-node{}
.o-node.collapsed>.o-children{display:none}
.o-node.collapsed>.o-row .o-chev{transform:rotate(0)}
.o-row{
  display:flex;align-items:center;gap:4px;padding:3px 8px;cursor:pointer;
  transition:background .12s;position:relative;min-width:0;
}
.o-row:hover{background:var(--bg);}
.o-row.selected{background:var(--primary-bg);color:var(--primary);}
.o-row.selected .o-name{color:var(--primary);}
.o-chev{
  width:14px;height:14px;flex-shrink:0;color:var(--text-muted);
  transition:transform .15s;transform:rotate(90deg);
}
.o-chev-ph{width:14px;height:14px;flex-shrink:0;}
.o-icon{
  width:20px;height:20px;border-radius:4px;display:grid;place-items:center;flex-shrink:0;
}
.o-icon svg{width:12px;height:12px;}
.o-icon.mesh{background:var(--icon-bg-mesh);color:var(--blue);}
.o-icon.group{background:var(--icon-bg-cam);color:var(--primary);}
.o-icon.folder{background:var(--icon-bg-cam);color:var(--primary);}
.o-icon.null{background:var(--border-light);color:var(--text-muted);}
.o-icon.light{background:var(--icon-bg-light);color:var(--orange);}
.o-icon.cam{background:var(--icon-bg-tex);color:var(--green);}
.o-icon.pinpoint{background:#ffe8ec;color:#ff4466;}
/* PA source (green) — used in GRAPHIC ELEMENTS outliner */
.o-icon.pa-source{background:#e6f9f0;color:#22c55e;}
.o-icon.template-source{background:#f0fdf4;color:#16a34a;}
/* Template-side (cyan) — group acting as a side binding inside a Template */
.o-icon.template-side{background:#ecfeff;color:#06b6d4;}
/* Clip group (amber) — group with clip-path masking */
.o-icon.clip-group{background:#fef3c7;color:#d97706;}
/* Clip shape (amber dashed) — the clipping path shape */
.o-icon.clip-shape{background:#fef3c7;color:#d97706;opacity:.7;}
/* PA reference (red) — used in PRINT AREA REFERENCES outliner */
.o-icon.pa-ref{background:#ffe8ec;color:#ef4444;}
.o-icon.light-target{background:#fef7e6;color:var(--orange);}
.o-icon.env{background:#fdecea;color:var(--red);}
.o-icon.world{background:#fdecea;color:var(--red);}
.o-icon.postprocess{background:#f3e8ff;color:#9333ea;}
.o-icon.attribute{background:#e6f9f4;color:var(--green);}
.o-icon.option{background:#fdecea;color:var(--red);}
/* "P" badge on options with parameter ≠ none */
.o-param-badge{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:600;letter-spacing:.3px;
  padding:1px 6px;border-radius:10px;margin-left:4px;flex-shrink:0;
  background:rgba(13,148,136,.12);color:#0d9488;
  line-height:1;
}
/* PA badge on options with print areas assigned — universal pill badge style */
.o-pa-badge{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:600;letter-spacing:.3px;
  padding:1px 6px;border-radius:10px;margin-left:4px;flex-shrink:0;
  background:rgba(74,108,245,.12);color:var(--primary);
  line-height:1;
}

/* Pinned / static folders — subtle distinction from user folders */
.o-pinned-folder > .o-row .o-icon.folder{background:transparent;color:var(--text-muted);}
.o-pinned-folder > .o-row .o-name{color:var(--text-secondary);font-weight:500;text-transform:uppercase;font-size:10px;letter-spacing:.4px;}
.o-name{flex:1;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);}
.o-name.editing{
  background:var(--surface-raised);border:1px solid var(--primary);border-radius:3px;
  outline:none;padding:1px 4px;cursor:text;overflow:visible;text-overflow:clip;
}
.o-actions{display:flex;gap:2px;}
.o-act{
  width:22px;height:22px;border:none;background:transparent;border-radius:4px;
  cursor:pointer;display:grid;place-items:center;color:var(--text-muted);transition:var(--tr);
  opacity:0;
}
.o-row:hover .o-act{opacity:1;}
.o-act:hover{background:var(--border-light);color:var(--text);}
.o-act svg{width:12px;height:12px;}
.o-act.off{opacity:1;}
.o-act.off svg{opacity:.3;}
/* Lock button: always visible when locked */
.o-lock-btn.on{opacity:1 !important;color:var(--text-muted);}
/* Interface actions: per-button opacity for independence */
.o-iface-actions .o-act{opacity:0;}
.o-row:hover .o-iface-actions .o-act{opacity:1;}
.o-iface-actions .o-act.off{opacity:1;}
.o-radio-wrap{
  width:14px;height:14px;flex-shrink:0;display:grid;place-items:center;cursor:pointer;
}
.o-radio-wrap input{
  position:absolute;opacity:0;width:0;height:0;pointer-events:none;
}
.o-radio-dot{
  width:8px;height:8px;border-radius:50%;border:1.5px solid var(--border);
  background:transparent;transition:all .15s ease;
  box-sizing:border-box;
}
.o-radio-wrap input:checked ~ .o-radio-dot{
  border-color:var(--primary);background:var(--primary);
  box-shadow:0 0 0 1.5px var(--surface), 0 0 0 2.5px var(--primary);
  width:6px;height:6px;
}
.o-radio-wrap:hover .o-radio-dot{
  border-color:var(--text-muted);
}
/* Disabled dot (inside PA group) */
.o-radio-wrap.dot-disabled{cursor:default;opacity:.35;pointer-events:none;}
.o-radio-wrap.dot-disabled .o-radio-dot{border-color:var(--border);background:transparent;box-shadow:none;}
/* GRP toggle — outline circle for group containers (neutral, no purple) */
.o-grp-dot{
  width:8px;height:8px;border-radius:50%;border:1.5px solid var(--border);
  background:transparent;transition:all .15s ease;box-sizing:border-box;
}
.o-grp-toggle input:checked ~ .o-grp-dot{
  border-color:var(--text-muted);background:transparent;
}
.o-grp-toggle:hover .o-grp-dot{border-color:var(--text-muted);}
.o-grp-toggle.dot-disabled{cursor:default;opacity:.35;pointer-events:none;}
/* Bypass state — red accent on row */
.o-row.bypassed{opacity:.55;}
.o-row.bypassed .o-name{color:var(--red);text-decoration:line-through;text-decoration-color:var(--red);}
.o-row.bypassed .o-icon{opacity:.4;}
.o-act.o-bypass-btn.active{color:var(--red);}
.o-act.o-bypass-btn.active:hover{color:var(--red);background:rgba(239,68,68,.08);}
.o-badge-anim{
  font-size:9px;font-weight:600;line-height:1;padding:3px 7px;border-radius:8px;
  background:#e6f9f0;color:#16a34a;flex-shrink:0;
  letter-spacing:.3px;text-transform:uppercase;
}
/* Group type chip (GRP / PA) — rounded pill */
.pl-gtype-badge{
  font-size:9px;font-weight:600;line-height:1;padding:3px 7px;border-radius:8px;
  flex-shrink:0;letter-spacing:.3px;text-transform:uppercase;
  border:none;cursor:pointer;transition:background .15s,color .15s;
}
.pl-gtype-badge[data-gtype="group"]{background:#eff3ff;color:#7b72e9;}
.pl-gtype-badge[data-gtype="pa"]{background:#e8f0ff;color:#4a9eff;}
.pl-gtype-badge[data-gtype="clip"]{background:#fef3c7;color:#d97706;}
.pl-gtype-badge[data-gtype="template"]{background:#f0fdf4;color:#16a34a;}
/* Template-side binding state badge (BOUND green / UNBOUND red) */
.pl-bind-badge{
  font-size:9px;font-weight:600;line-height:1;padding:3px 7px;border-radius:8px;
  flex-shrink:0;letter-spacing:.3px;text-transform:uppercase;
}
.pl-bind-badge[data-bound="1"]{background:#e6f9f0;color:#16a34a;}
.pl-bind-badge[data-bound="0"]{background:#fee2e2;color:#dc2626;}
/* Role badge chip */
.pl-role-badge{
  font-size:9px;font-weight:600;line-height:1;padding:3px 7px;border-radius:8px;
  flex-shrink:0;letter-spacing:.3px;text-transform:uppercase;
  background:#e8f0ff;cursor:pointer;transition:color .15s;
}
/* Red warning dot for PA nodes with empty linked asset */
.o-pa-warn{
  width:6px;height:6px;border-radius:50%;background:var(--red);flex-shrink:0;
  margin-left:2px;opacity:.85;
}

/* Grey out icon + name when element is hidden via eye toggle */
.o-row:has(.o-vis-btn.off) .o-icon{opacity:.35;}
.o-row:has(.o-vis-btn.off) .o-name{opacity:.35;}
/* Empty spacer for text elements (no dot, keeps alignment) */
.o-dot-spacer{width:14px;height:14px;flex-shrink:0;}
.o-cam-look{color:var(--text-muted);}
.o-cam-look.active{color:var(--primary);background:var(--primary-bg);}
.o-cam-look.active:hover{background:var(--primary-bg);}
.o-children{padding-left:14px;}
/* Dimmed pass-through parents in filtered view */
.o-filter-dimmed > .o-row{opacity:.35;pointer-events:none;}
.o-filter-dimmed > .o-row .o-iface-actions{display:none;}

/* ── Add-object dropdown menu ── */
.outliner-add-wrap{position:relative;}
.outliner-add-menu{
  display:none;position:absolute;top:100%;right:0;z-index:50;
  min-width:170px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);box-shadow:var(--sh);
  padding:4px;margin-top:4px;
}
.outliner-add-menu.open{display:block;}
/* Context menu (right-click) — re-uses .outliner-add-menu styling, repositioned with fixed coords */
.outliner-ctx-menu{position:fixed;top:auto;right:auto;margin:0;min-width:180px;z-index:10000;}
.outliner-ctx-menu .outliner-add-item.disabled{opacity:.4;pointer-events:none;cursor:default;}
.outliner-ctx-menu .ctx-shortcut{margin-left:auto;color:var(--text-muted);font-size:11px;letter-spacing:.02em;}
.outliner-ctx-menu .outliner-add-item:hover .ctx-shortcut{color:var(--primary);}
/* Reserved-space check column for toggleable submenu options (e.g. tag picker) */
.outliner-ctx-menu .ctx-check-col{display:inline-block;width:14px;flex-shrink:0;text-align:center;font-size:12px;line-height:14px;color:var(--primary);}
.outliner-add-item{
  display:flex;align-items:center;gap:8px;width:100%;padding:5px 10px;
  border:none;background:none;font-family:inherit;font-size:12px;font-weight:400;
  color:var(--text);cursor:pointer;
  text-align:left;transition:background .12s, color .12s;
  min-height:26px;box-sizing:border-box;border-radius:var(--r-sm);
}
.outliner-add-item:hover{background:var(--primary-bg);color:var(--primary);}
.outliner-add-item:hover svg{color:var(--primary);}
.outliner-add-item svg{flex-shrink:0;color:var(--text-muted);width:14px;height:14px;transition:color .12s;}
.outliner-add-sep{height:1px;background:var(--border-light);margin:4px 6px;}
/* Submenu parents (hover-expand) */
.outliner-add-parent{
  position:relative;display:flex;align-items:center;gap:8px;
  padding:5px 10px;font-family:inherit;font-size:12px;font-weight:400;
  color:var(--text);cursor:default;
  transition:background .12s, color .12s;
  min-height:26px;box-sizing:border-box;border-radius:var(--r-sm);
}
.outliner-add-parent:hover{background:var(--primary-bg);color:var(--primary);}
.outliner-add-parent:hover>svg:first-child{color:var(--primary);}
.outliner-add-parent>svg:first-child{flex-shrink:0;color:var(--text-muted);width:14px;height:14px;transition:color .12s;}
/* Submenu arrow — CSS-rendered via mask. The .outliner-add-parent always has
   exactly one chevron arrow on the right; placed via ::after so HTML can
   omit the <svg class="outliner-add-arrow"> markup. Inline SVG fallback kept
   for legacy markup. */
.outliner-add-parent::after,
.outliner-add-arrow{
  content:'';
  margin-left:auto;width:10px;height:10px;color:var(--text-muted);
  flex-shrink:0;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><polyline points='9 18 15 12 9 6'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><polyline points='9 18 15 12 9 6'/></svg>") center/contain no-repeat;
}
.outliner-add-parent:has(> .outliner-add-arrow)::after{display:none;}
.outliner-add-submenu{
  display:none;position:fixed;
  min-width:180px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);box-shadow:var(--sh);
  padding:4px;z-index:9999;
}
/* Invisible bridge to prevent hover gap between parent and submenu */
.outliner-add-submenu::before{
  content:'';position:absolute;top:0;bottom:0;left:-12px;width:12px;
}
.outliner-add-parent:hover>.outliner-add-submenu{display:block;}

/* Drop indicators for outliner reparenting */
.o-node.dragging{opacity:0.4;}
.o-node.drag-above>.o-row::before{content:'';position:absolute;top:-1px;left:0;right:0;height:2px;background:var(--primary);pointer-events:none;z-index:1;}
.o-node.drag-below>.o-row::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--primary);pointer-events:none;z-index:1;}
.o-node.drag-inside>.o-row{background:var(--primary-bg);outline:1px dashed var(--primary);outline-offset:-1px;}

/* ══ Outliner Splitter (between Scene & Interface) ══ */
.outliner-splitter{
  height:0;position:relative;flex-shrink:0;
  cursor:ns-resize;z-index:2;
  margin-top:calc(var(--panel-gap,6px) * -0.5);
  margin-bottom:calc(var(--panel-gap,6px) * -0.5);
}
.outliner-splitter::before{
  content:'';position:absolute;left:0;right:0;top:-5px;height:11px;
}
.outliner-splitter::after{
  content:'';position:absolute;left:50%;top:0;transform:translate(-50%,-50%);
  width:20px;height:3px;border-radius:2px;
  background:var(--border-focus);opacity:0;transition:opacity .15s;
}
.outliner-splitter:hover::after,
.outliner-splitter.dragging::after{opacity:1;}

/* ══ Interface Panel ══ */
.options-outliner{
  flex-shrink:0;display:flex;flex-direction:column;
  background:var(--surface);overflow:hidden;
  height:37px;min-height:37px;/* collapsed = header only */
  border-radius:var(--r);
  box-shadow:var(--sh-sm);
}
.options-outliner.animating{
  transition:height .25s ease;
}
.options-outliner.animating .options-tree{
  overflow:hidden;
}
.options-outliner #optionsTabs{
  border-top:none;flex-shrink:0;
}

/* ── Pull-down chevron (left side, matches asset-lib style) ── */
.options-pull-chev{
  position:absolute;left:10px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;color:var(--text-muted);transition:transform .15s;
  flex-shrink:0;cursor:pointer;z-index:1;
}

/* ── Interface toolbar (now uses shared .outliner-toolbar) ── */

.options-tree{
  flex:1;overflow-y:auto;padding:6px 0;
}
.options-empty{
  display:flex;align-items:center;justify-content:center;height:100%;
  color:var(--text-muted);font-size:11px;text-align:center;padding:12px;
}
.options-empty p{margin:0;line-height:1.5;}

/* ── Preset read-only mode (scoped to OPTIONS content when viewing a preset) ── */
.preset-readonly #optionsTabContent .outliner-actions .outliner-btn{
  pointer-events:none;opacity:.35;
}
.preset-readonly #optionsTabContent .o-name{pointer-events:none;}
.preset-readonly #optionsTabContent .o-actions{pointer-events:none;opacity:0 !important;}
.preset-readonly #optionsTabContent .o-chev{pointer-events:none;}
.preset-readonly #optionsTabContent .o-row{cursor:default;}
.preset-readonly #optionsTabContent .o-row .o-bypass-btn,
.preset-readonly #optionsTabContent .o-row .o-vis-btn{visibility:hidden;}
/* Muted text when viewing a non-default preset */
.preset-readonly #optionsTabContent .o-name,
.preset-readonly #optionsTabContent .o-icon svg{color:var(--text-muted);opacity:.8;}

/* ── Preset-list mode: disable clone in toolbar ── */
.opt-mode-preset-list #presetsTabContent .outliner-btn[id="presetsOutlinerDeleteBtn"]{
  /* delete stays enabled */
}

/* ── Mode menu button (hamburger inside tab) ── */
.opt-mode-menu-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;flex-shrink:0;cursor:pointer;
  color:var(--text-muted);border-radius:var(--r-sm);
  transition:color .15s,background .15s;
  margin-right:4px;
}
.opt-mode-menu-btn svg{width:12px;height:12px;}
.opt-mode-menu-btn:hover{color:var(--primary);background:var(--primary-bg);}

/* ── Mode dropdown ── */
.opt-mode-dropdown{
  display:none;position:absolute;top:100%;left:8px;z-index:100;
  background:var(--surface);border:1px solid var(--border-light);
  border-radius:var(--r-md,6px);box-shadow:0 4px 12px rgba(0,0,0,.15);
  min-width:180px;padding:4px 0;
}
.opt-mode-dropdown.open{display:block;}
.opt-mode-item{
  display:flex;align-items:center;gap:8px;
  width:calc(100% - 8px);border:none;background:transparent;
  font:inherit;font-size:12px;font-weight:500;
  color:var(--text-secondary);cursor:pointer;
  padding:5px 10px;text-align:left;
  margin:0 4px;
  border-radius:var(--r-sm,4px);
  transition:background .1s;
}
.opt-mode-item:hover{background:var(--hover-bg,rgba(0,0,0,.06));}
.opt-mode-item.active{color:var(--primary);font-weight:600;}
.opt-mode-sep{height:1px;background:var(--border-light);margin:4px 8px;}
#optModePresetList .opt-mode-item{padding-left:10px;font-weight:400;}



/* ══════════════════════════════════════════════════
   OPTIONS HEAD TAB  (uses centralised .outliner-tabs / .outliner-tab)
   ══════════════════════════════════════════════════ */
#optionsTabs{position:relative;}
#optionsTabs .outliner-tab{text-transform:uppercase;}
#optRefreshBtn{right:30px;}

/* ══════════════════════════════════════════════════
   PRESETS OUTLINER TREE — node colours
   ══════════════════════════════════════════════════ */
.presets-tree{overflow-y:auto;flex:1;}
.presets-empty{text-align:center;opacity:.4;padding:24px 8px;font-size:11px;}
#presetsTabContent{display:flex;flex-direction:column;overflow:hidden;flex:1;}
#optionsTabContent{display:flex;flex-direction:column;overflow:hidden;flex:1;}

/* Group node — same colour as options groups */
.o-node[data-type="preset-group"] > .o-row .o-icon svg{color:var(--primary);}
.o-node[data-type="preset-group"] > .o-row .o-name{color:var(--primary);}

/* Preset reference node — primary accent (same as preset asset) */
.o-node[data-type="preset-ref"] > .o-row .o-icon svg{color:var(--primary,#5b9aff);}

/* Drop target highlight */
.presets-tree.drop-target{outline:2px dashed var(--primary,#5b9aff);outline-offset:-2px;background:rgba(91,154,255,.06);}

/* ── Dark theme: o-icon backgrounds ─────────────────── */
:root[data-theme="dark"] .o-icon.mesh{background:var(--icon-bg-mesh);color:var(--blue);}
:root[data-theme="dark"] .o-icon.group{background:var(--icon-bg-cam);color:var(--primary);}
:root[data-theme="dark"] .o-icon.folder{background:var(--icon-bg-cam);color:var(--primary);}
:root[data-theme="dark"] .o-icon.null{background:var(--border-light);color:var(--text-muted);}
:root[data-theme="dark"] .o-icon.light{background:var(--icon-bg-light);color:var(--orange);}
:root[data-theme="dark"] .o-icon.cam{background:var(--icon-bg-tex);color:var(--green);}
:root[data-theme="dark"] .o-icon.pinpoint{background:rgba(255,68,102,.15);color:#ff4466;}
:root[data-theme="dark"] .o-icon.pa-source{background:rgba(34,197,94,.12);color:#22c55e;}
:root[data-theme="dark"] .o-icon.clip-group{background:rgba(217,119,6,.15);color:#d97706;}
:root[data-theme="dark"] .o-icon.clip-shape{background:rgba(217,119,6,.12);color:#d97706;}
:root[data-theme="dark"] .o-icon.pa-ref{background:rgba(239,68,68,.15);color:#ef4444;}
:root[data-theme="dark"] .o-icon.light-target{background:var(--icon-bg-light);color:var(--orange);}
:root[data-theme="dark"] .o-icon.env{background:var(--icon-bg-mat);color:var(--red);}
:root[data-theme="dark"] .o-icon.world{background:var(--icon-bg-mat);color:var(--red);}
:root[data-theme="dark"] .o-icon.postprocess{background:rgba(147,51,234,.15);color:#9333ea;}
:root[data-theme="dark"] .o-icon.attribute{background:var(--icon-bg-tex);color:var(--green);}
:root[data-theme="dark"] .o-icon.option{background:var(--icon-bg-mat);color:var(--red);}

/* ══════════════════════════════════════════════════
   PL LAYOUT — Side-strip (REF/PROD tiles) + body pane
   ══════════════════════════════════════════════════ */
.pl-layout{
  display:flex;flex-direction:row;
  flex:1;min-height:0;
  overflow:hidden;
}

/* ── Side strip (left): vertical column of tiles ── */
.pl-side-strip{
  width:72px;min-width:72px;flex-shrink:0;
  display:flex;flex-direction:column;
  align-items:center;
  padding:8px 0;gap:4px;
  background:var(--bg-inset);
  border-right:1px solid var(--border-light);
  overflow:visible;
}

/* ── Single tile (REF or PROD) ──
   Centralized side-tile component. Used by both PL layout (REF/LAYOUT)
   and the Templates side-strip (per-canvas side). Variants:
     .side-tile.active            → selected
     .side-tile.has-content       → swap icon visible (REF tile)
     .side-tile.vis-off           → visibility off
     .side-tile.side-tile--add    → "add new" tile (dashed, +) */
.side-tile{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  gap:4px;
  padding:4px 0 6px;
  cursor:pointer;border:none;background:transparent;
  user-select:none;
}
/* Wrapper around the thumb so absolutely-positioned overlays can
   overlap the thumb corners without being clipped by overflow:hidden */
.side-tile-thumb-wrap{
  position:relative;
  width:56px;height:56px;flex-shrink:0;
}
.side-tile-thumb{
  position:relative;
  width:100%;height:100%;
  border-radius:var(--r);
  border:2px solid var(--border);
  background:var(--surface);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  transition:border-color .15s,box-shadow .15s;
}
.side-tile:hover .side-tile-thumb{ border-color:var(--border-focus); }
.side-tile.active .side-tile-thumb{ border-color:var(--primary); }
.side-tile-icon{
  width:24px;height:24px;color:var(--text-faint);
}
.side-tile.active .side-tile-icon{ color:var(--primary); }
/* SVG preview (REF tile filled state): inlined SVG fills the thumb */
.side-tile-thumb > svg.side-tile-preview{
  width:100%;height:100%;display:block;
  object-fit:contain;
}
.side-tile-thumb.drop-hover{
  border-style:dashed;border-color:var(--primary);
  background:var(--primary-bg);
}
/* PA-rectangle preview (templates: scaled rect inside the thumb) */
.side-tile-pa-rect{
  border:1.5px dashed var(--text-muted);border-radius:2px;
  background:color-mix(in srgb,var(--primary) 6%,transparent);
}
.side-tile.active .side-tile-pa-rect{ border-color:var(--primary); }
/* Visibility-off state: dim the thumb content */
.side-tile.vis-off .side-tile-thumb > *{ opacity:.35; }

/* ── Overlay buttons: slightly overlap the thumb corners ── */
.side-tile-action,
.side-tile-vis,
.side-tile-locate,
.side-tile-delete{
  position:absolute;
  width:18px;height:18px;
  border:none;background:var(--surface);
  border-radius:var(--r-sm);
  cursor:pointer;color:var(--text-faint);
  display:flex;align-items:center;justify-content:center;
  padding:0;line-height:0;
  box-shadow:0 1px 2px rgba(0,0,0,.12);
  transition:color .12s,background .12s;
  z-index:2;
}
.side-tile-action svg,
.side-tile-vis svg,
.side-tile-locate svg,
.side-tile-delete svg{ width:11px;height:11px; }
.side-tile-action{ top:-1px;    right:-1px; }
.side-tile-vis   { bottom:-1px; right:-1px; }
.side-tile-delete{ top:-1px;    right:-1px; }
.side-tile-locate{ bottom:-1px; left:-1px;  }
.side-tile-action:hover{ color:var(--primary);background:var(--primary-bg); }
.side-tile-vis:hover   { color:var(--primary);background:var(--primary-bg); }
.side-tile-locate:hover{ color:var(--primary);background:var(--primary-bg); }
.side-tile-delete:hover{ color:var(--red);background:color-mix(in srgb,var(--red) 10%,transparent); }
.side-tile.vis-off .side-tile-vis{ color:var(--text-faint); }
/* Hover-only affordances (delete + locate appear on tile hover only) */
.side-tile .side-tile-delete,
.side-tile .side-tile-locate{ opacity:0;pointer-events:none;transition:opacity .12s; }
.side-tile:hover .side-tile-delete,
.side-tile:hover .side-tile-locate{ opacity:1;pointer-events:auto; }
/* Locate is meaningless when the tile has no linked asset */
.side-tile:not(.has-content) .side-tile-locate{ display:none !important; }
/* Prod-layout sidebar: vis (eye) button — hover-only, always visible when hidden */
.pl-side-strip .side-tile .side-tile-vis{ opacity:0;pointer-events:none;transition:opacity .12s; }
.pl-side-strip .side-tile:hover .side-tile-vis{ opacity:1;pointer-events:auto; }
.pl-side-strip .side-tile.vis-off .side-tile-vis{ opacity:1 !important;pointer-events:auto !important; }
/* Templates side-strip: action button is also hover-only (PL keeps it always visible). */
.side-strip .side-tile .side-tile-action{ opacity:0;pointer-events:none;transition:opacity .12s; }
.side-strip .side-tile:hover .side-tile-action{ opacity:1;pointer-events:auto; }
/* Toggle add/swap icons based on filled state */
.side-tile-ref:not(.has-content) .side-tile-action-swap{ display:none; }
.side-tile-ref.has-content        .side-tile-action-add { display:none; }
.side-tile:not(.has-content) .side-tile-action-swap{ display:none; }
.side-tile.has-content        .side-tile-action-add { display:none; }

/* ── "Add new" tile variant (dashed thumb, just a + icon) ── */
.side-tile.side-tile--add .side-tile-thumb{
  border-style:dashed;border-color:var(--border);
  background:transparent;
}
.side-tile.side-tile--add:hover .side-tile-thumb{
  border-color:var(--primary);background:var(--primary-bg);
}
.side-tile.side-tile--add:hover .side-tile-icon{ color:var(--primary); }

/* ── Tile label ── */
.side-tile-label{
  font-size:10px;font-weight:600;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.3px;
  text-align:center;line-height:1;
  max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.side-tile.active .side-tile-label{ color:var(--primary); }

/* ── Body (right side): hosts active pane ── */
.pl-body{
  flex:1;min-width:0;
  display:flex;flex-direction:column;
  overflow:hidden;
  background:var(--surface);
}

/* ── Single pane (REF or PROD) ── */
.pl-body-pane{
  flex:1;min-height:0;
  display:flex;flex-direction:column;
  overflow:hidden;
}

/* ── Top block (toolbar + filter row): fixed at body top ── */
.pl-ref-sticky-top{
  flex-shrink:0;
  background:var(--surface);
}

/* ── Reference tree: natural height; scrolls when needed ── */
#plRefTree{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:6px 0;
}
#plRefTree .o-row{ min-width:100%; }
#plRefTree .o-name{ overflow:visible;text-overflow:clip; }

/* ── Generate footer: fixed at body bottom ── */
.pl-ref-footer{
  display:flex;flex-direction:column;align-items:stretch;gap:5px;
  padding:6px 10px;border-top:1px solid var(--border-light);
  flex-shrink:0;background:var(--surface);
}

/* ── Production tree ── */
#plBodyProd #canvasLayerTree{
  flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:6px 0;
}

.pl-gen-btn{
  flex:1;height:28px;border:1px solid var(--border);
  background:var(--surface-raised);border-radius:var(--r-sm);
  cursor:pointer;font-size:11px;font-weight:500;
  color:var(--text-secondary);
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  text-align:center;
  transition:var(--tr);padding:0 10px;
}
/* Primary CTA: soft blue fill, used for "Generate Print Areas" */
.pl-gen-btn--primary:not(:disabled){
  background:var(--primary-bg);color:var(--primary);
  border-color:color-mix(in srgb,var(--primary) 50%,transparent);
}
.pl-gen-btn--primary:not(:disabled):hover{
  background:color-mix(in srgb,var(--primary) 18%,transparent);
}
/* Secondary CTA: outlined / faint, used for "Generate Templates" */
.pl-gen-btn--secondary:not(:disabled){
  background:var(--surface-raised);color:var(--text-secondary);
  border-color:var(--border);
}
.pl-gen-btn--secondary:not(:disabled):hover{
  background:var(--primary-bg);color:var(--primary);
  border-color:color-mix(in srgb,var(--primary) 40%,transparent);
}
.pl-gen-btn:disabled{ opacity:.4;cursor:default; }

/* ── Badge pills (PA count, Template count) ── */
.pl-badge{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;letter-spacing:.2px;
  padding:2px 6px;border-radius:8px;line-height:1;
  flex-shrink:0;
}
.pl-badge-pa{ background:rgba(74,108,245,.15);color:var(--primary); }
.pl-badge-tmpl{ background:rgba(139,92,246,.15);color:#8b5cf6; }

/* ── Standard mode (PA editor / template editor): hide side-strip + ref pane ── */
.pl-layout.std-mode .pl-side-strip{ display:none !important; }
.pl-layout.std-mode #plBodyRef{ display:none !important; }
.pl-layout.std-mode #plBodyProd{ display:flex !important; }

/* ── Chip group labels (Type inspector) ── */
.insp-chip-group-label{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--text-faint);padding:6px 12px 2px;
}
.insp-chip-group-label:first-child{padding-top:4px;}