/* Scoped to the editable template workspace and its thumbnail drag rectangle. */
.xhs-page-multi-controls,
.xhs-freehand-tools,
.xhs-freehand-tools [data-pen-settings] {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.xhs-page-multi-controls { flex: 0 0 auto; justify-content: flex-end; max-width: 170px; }
.xhs-page-multi-controls button,
.xhs-freehand-tools button {
  font: inherit; font-size: 12px; line-height: 1.4; padding: 4px 7px;
  border: 1px solid #cbd5cf; border-radius: 6px; background: #fff; color: #365448;
  cursor: pointer; white-space: nowrap;
}
.xhs-page-multi-controls button:disabled { opacity: .52; cursor: default; }
.xhs-page-multi-controls [aria-pressed="true"], .xhs-freehand-tools [aria-pressed="true"] {
  color: #fff; background: #285f4b; border-color: #285f4b;
}
.xhs-page-multi-controls [data-page-delete] { color: #983c38; border-color: #dcc6c2; }
.xhs-freehand-tools { margin: 4px 0 8px; }
.xhs-freehand-tools label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.xhs-freehand-tools input[type=color] { width: 28px; height: 23px; padding: 1px; }
.xhs-freehand-tools input[type=range] { width: 70px; accent-color: #285f4b; }
.xhs-freehand-tools output { min-width: 30px; font-size: 11px; }
.xhs-page-multi-controls [hidden], .xhs-freehand-tools [hidden],
.xhs-template-studio-workbench .xhs-freehand-overlay[hidden],
.xhs-page-select-box[hidden] { display: none !important; }
.xhs-template-studio-workbench .xhs-page-thumbnail.xhs-page-multi-selected {
  box-shadow: inset 0 0 0 2px #286949; background: #e6f4ea; border-radius: 5px;
}
.xhs-template-studio-workbench .xhs-page-thumbnail.xhs-page-multi-selected canvas {
  outline: 2px solid #286949; outline-offset: 1px;
}
.xhs-template-studio-workbench .xhs-page-multi-mode { touch-action: none; user-select: none; }
.xhs-page-select-box {
  position: fixed; z-index: 10019; pointer-events: none; border: 1px solid #286949;
  background: rgba(48, 133, 85, .14); box-sizing: border-box;
}
.xhs-template-studio-workbench .xhs-canvas-shell > canvas.xhs-freehand-overlay {
  position: absolute; inset: 0; z-index: 12; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; background: transparent; cursor: crosshair;
  touch-action: none;
}
@media (max-width: 767px) {
  .xhs-page-multi-controls { max-width: 83px; }
  .xhs-page-multi-controls button { font-size: 11px; padding: 3px 5px; }
}

.xhs-rich-tools>.xhs-freehand-tools{display:contents;}
.xhs-rich-tools>.xhs-freehand-tools>[data-pen-settings]{grid-column:1/-1;align-items:center;gap:8px;}
.xhs-rich-tools>.xhs-freehand-tools>[data-pen-settings] label{display:inline-flex;align-items:center;gap:4px;}
.xhs-rich-tools>.xhs-freehand-tools>[data-pen-undo]{grid-column:1/-1;justify-self:start;}