/* ─── Draw Mode ─────────────────────────────────────────────── */
.ft-draw-tools {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: var(--bg-2, #f4f5f7);
  border-radius: var(--r-md);
  margin-top: 4px;
}
.ft-draw-tool-btn {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border: none; background: transparent; border-radius: var(--r-sm);
  cursor: pointer; color: var(--fg-muted);
  transition: background 0.12s, color 0.12s;
}
.ft-draw-tool-btn:hover { background: var(--bg-3, #e8e9ee); color: var(--fg-default); }
.ft-draw-tool-btn.active { background: var(--accent, #0D5284); color: #fff; }

.draw-interaction-overlay { touch-action: none; }

/* Inspector draw element section */
.draw-inspector-section { padding: 0; }
.draw-token-swatches { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.draw-token-swatch {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 2px solid transparent;
  transition: border-color 0.1s;
}
.draw-token-swatch.active { border-color: var(--accent, #0D5284); }

.canvas[data-drawmode="true"] { cursor: crosshair; }