.tree-builder-page .tree-visual-card .panel-heading { align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 12px; overflow-x: auto; }
.tree-builder-page .tree-visual-card #downloadTreeButton { margin-left: 0; }
.tree-image-download, .tree-root-controls, .tree-export-controls { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; flex-shrink: 0; }
.tree-builder-page .tree-visual-card .panel-heading > div { max-width: none; }
.tree-builder-page .tree-visual-card .panel-heading :is(button, select) { flex-shrink: 0; white-space: nowrap; }
.tree-image-download select { padding: 7px 9px; border: 1px solid #d7e1e6; border-radius: 5px; background: white; color: #34515d; }
.tree-root-controls { margin: 0; }
.tree-export-controls { margin-left: auto; }
.tree-array-option { display: flex; align-items: center; gap: 8px; }
.tree-output-options { grid-column: 1 / -1; }
.tree-array-option input { width: auto; margin: 0; accent-color: #00796b; }
.tree-array-downloads { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; padding: 16px; border: 1px solid #d7e1e6; border-radius: 6px; }
.tree-array-downloads[hidden] { display: none; }
.tree-array-downloads p { margin: 6px 0 0; color: #637884; font-size: .85rem; }
.tree-root-controls [aria-pressed=true] { background: #00796b; color: white; border-color: #00796b; }
.tree-interaction-hint { margin: 10px 0; color: #637884; font-size: .8rem; line-height: 1.6; }
.tree-builder-page .tree-viewer { height: 520px; min-height: 320px; padding: 16px; cursor: grab; touch-action: none; overscroll-behavior: contain; }
.tree-builder-page .tree-svg { min-width: 0; min-height: 0; max-width: none; padding: 0; overflow: visible; }
.tree-builder-page .tree-leaf-label { font-family: "Segoe UI", Arial, sans-serif; }
.tree-viewer.is-panning { cursor: grabbing; user-select: none; }
.tree-viewer.is-rooting .tree-branch-target { cursor: crosshair; pointer-events: stroke; }
.tree-branch-target { pointer-events: none; }
.tree-viewer.is-rooting .tree-branch-target:hover, .tree-viewer.is-rooting .tree-branch-target:focus { stroke: #009688; stroke-opacity: .25; outline: none; }
@media(max-width: 640px) {
  .tree-builder-page .tree-viewer { height: 420px; }
  .tree-builder-page .tree-visual-card .panel-heading { flex-direction: row; }
  .tree-builder-page .tree-image-download { flex-wrap: nowrap; }
  .tree-builder-page .tree-visual-card :is(.small-button, .icon-button, .compact-button) { width: auto; }
  .tree-builder-page .tree-viewer-actions { flex-direction: row; }
  .tree-root-controls .compact-button { height: auto; min-height: 34px; white-space: normal; }
}