.tree-wrap { position: relative; overflow: hidden; touch-action: none; }
.tree-wrap .tree-svg { cursor: grab; user-select: none; -webkit-user-select: none; }
.tree-wrap .tree-svg.is-panning { cursor: grabbing; }
.tree-wrap #tree-viewport { transform-origin: 0 0; will-change: transform; }

.tree-controls {
  position: absolute; right: 12px; bottom: 12px;
  display: flex; flex-direction: column; gap: 6px;
  z-index: 2;
}
.tree-ctrl {
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  font-size: 20px; line-height: 1; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  cursor: pointer;
}
.tree-ctrl:hover { border-color: var(--primary); color: var(--primary); }
.tree-ctrl:active { transform: translateY(1px); }

.lightbox .lb-img {
  transform-origin: 0 0;
  will-change: transform;
  touch-action: none;
  transition: transform 0.18s ease-out;
}
.lightbox .lb-img.is-gesturing { transition: none; }
.lightbox.is-zoomed .lb-img { cursor: grab; }
.lightbox.is-zoomed .lb-img.is-gesturing { cursor: grabbing; }