#breadcrumb {
  display: flex; align-items: center; gap: 2px;
  padding: 6px 10px; background: #eef5fb;
  border-bottom: 1px solid #d5e5f2;
  font-size: 12px; overflow-x: auto;
  white-space: nowrap; flex-shrink: 0;
  scrollbar-width: thin;
}
#breadcrumb .crumb {
  color: #2980b9; cursor: pointer;
  padding: 3px 8px; border-radius: 4px;
  white-space: nowrap; flex-shrink: 0;
}
#breadcrumb .crumb:hover { background: #d5e5f2; }
#breadcrumb .crumb.current { color: #2c3e50; font-weight: 600; background: #fff; }
#breadcrumb .sep { color: #95a5a6; font-size: 11px; padding: 0 2px; }
#breadcrumb .empty { color: #95a5a6; font-style: italic; padding: 3px 8px; }

#rootsBar {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; background: #f8fafc;
  border-bottom: 1px solid #eef1f4;
  font-size: 12px; overflow-x: auto;
  white-space: nowrap; flex-shrink: 0;
}
#rootsBar .label {
  color: #95a5a6; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.5px; padding-right: 4px;
}
#rootsBar .root-chip {
  background: #fff; border: 1px solid #d5e0ea;
  color: #2c3e50; padding: 3px 10px;
  border-radius: 12px; cursor: pointer;
  font-size: 12px; white-space: nowrap; flex-shrink: 0;
}
#rootsBar .root-chip:hover { background: #eef5fb; border-color: #b6dcff; }
#rootsBar .root-chip.active { background: #3498db; color: #fff; border-color: #3498db; }
#rootsBar .empty { color: #95a5a6; font-style: italic; font-size: 12px; }

.tree-view-toggle {
  display: flex; gap: 2px; margin-left: auto; margin-right: 4px;
}
.tree-view-toggle .view-btn {
  background: transparent; border: 1px solid transparent;
  color: #95a5a6; padding: 2px 7px; border-radius: 4px;
  cursor: pointer; font-size: 13px; line-height: 1;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.tree-view-toggle .view-btn:hover { background: #eef1f4; color: #555; }
.tree-view-toggle .view-btn.active {
  background: #3498db; color: #fff; border-color: #3498db;
}

#treeWrap {
  position: relative; overflow: auto; flex: 1;
  min-height: 0; background: #fafbfc;
  border: 1px solid #eef1f4; border-radius: 6px;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
#treeWrap.panning {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}
#treeInner {
  position: relative; padding: 20px;
  min-width: 100%; min-height: 100%;
}
#linesSvg {
  position: absolute; top: 0; left: 0;
  pointer-events: none; overflow: visible;
}

.node-card {
  position: absolute; width: 200px;
  background: #fff; border: 1px solid #dfe3e8;
  border-radius: 8px; padding: 8px 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  z-index: 2;
}
.node-card.on-path { cursor: pointer; }
.node-card.on-path:hover {
  border-color: #3498db;
  box-shadow: 0 2px 8px rgba(52,152,219,0.2);
}
.node-card.active {
  border-color: #e67e22;
  box-shadow: 0 3px 12px rgba(230,126,34,0.28);
  background: #fff8f0;
}
.node-card.root-node { background: #eaf5ff; border-color: #b6dcff; }
.node-card.root-node.active { background: #fff8f0; border-color: #e67e22; }
.node-card.square-end { border-color: #7fbf7f; background: #f0faf0; }
.node-card.square-end.active { border-color: #e67e22; background: #fff8f0; }
.node-card .mov-name {
  font-weight: 600; display: block;
  margin-bottom: 4px; font-size: 13px;
  white-space: normal; overflow-wrap: anywhere;
}
.node-card .card-title-row {
  display: flex; align-items: flex-start; gap: 4px;
  margin-bottom: 4px;
}
.node-card .card-title-row .mov-name { flex: 1; min-width: 0; margin-bottom: 0; }
.node-card .card-edit-mov {
  flex-shrink: 0; min-width: 22px; padding: 1px 4px;
  font-size: 12px; line-height: 1.2; color: #95a5a6;
}
.node-card .card-edit-mov:hover { color: #2980b9; background: #eef5fb; }
.node-card .card-edit-mov:disabled {
  opacity: 0.35; cursor: not-allowed; background: none;
}
.node-card .card-video-mov {
  flex-shrink: 0; min-width: 22px; padding: 1px 4px;
  font-size: 10px; line-height: 1.2; color: #27ae60;
}
.node-card .card-video-mov:hover { color: #1e8449; background: #e8f6ee; }
.node-card .beat-badge {
  display: inline-block; background: #2c3e50; color: #fff;
  font-size: 11px; padding: 2px 6px; border-radius: 4px;
  white-space: nowrap;
}
.node-card .beat-badge.square { background: #27ae60; }
.node-card .beat-badge small { display: block; font-size: 9px; opacity: 0.85; }
.node-card .card-actions {
  display: flex; flex-wrap: wrap; gap: 2px; margin-top: 6px;
  justify-content: flex-end;
  border-top: 1px solid #f0f2f5; padding-top: 4px;
}
.node-card .card-actions .icon-btn {
  font-size: 14px; background: #f4f6f8; padding: 4px 8px;
}
.node-card .card-actions .icon-btn:disabled {
  opacity: 0.35; cursor: not-allowed; background: #f8f9fa;
}
.node-card .active-dot {
  position: absolute; top: -6px; right: -6px;
  width: 14px; height: 14px; background: #e67e22;
  border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.mini-card {
  position: absolute;
  background: #fff; border: 1px solid #d5dde5;
  border-radius: 5px; padding: 5px 10px;
  font-size: 12px; color: #444;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  z-index: 1; display: flex; align-items: center; gap: 6px;
  transition: background 0.12s, border-color 0.12s;
  min-height: 28px; width: 180px;
}
.mini-card:hover { background: #eef5fb; border-color: #3498db; color: #2c3e50; }
.mini-card .mini-name { font-weight: 500; flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.mini-card .mini-beat { color: #27ae60; font-size: 11px; flex-shrink: 0; }
.mini-card .mini-plus {
  background: #ecf0f1; color: #7f8c8d;
  font-size: 10px; padding: 1px 5px;
  border-radius: 7px; flex-shrink: 0;
}
.mini-card .mini-video-btn {
  flex-shrink: 0; border: none; border-radius: 4px;
  background: #e8f6ee; color: #1e8449;
  font-size: 9px; line-height: 1.4;
  padding: 1px 4px; cursor: pointer;
}
.mini-card .mini-video-btn:hover { background: #d7efdf; }
.mini-card.sibling {
  background: #fafafa; border-color: #e0e4e8;
  border-style: dashed; color: #666;
}
.mini-card.sibling:hover { background: #f4f6f8; border-color: #b8c4cf; color: #333; }
.mini-card.child {
  background: #f8fbf9; border-color: #c8e0c8;
}
.mini-card.child:hover { background: #f0faf0; border-color: #7fbf7f; }

.group-label {
  position: absolute; font-size: 10px;
  text-transform: uppercase; color: #95a5a6;
  letter-spacing: 0.5px; white-space: nowrap;
  z-index: 1; pointer-events: none;
}
.group-label.sibling-label { color: #b0b8c1; }
.group-label.child-label { color: #7fbf7f; }

.tree-empty-hint {
  padding: 20px; text-align: center;
  font-style: italic; color: #999;
}

.node-card.merge-target {
  border-color: #9b59b6;
  box-shadow: 0 0 10px rgba(155,89,182,0.45);
  animation: merge-pulse 1.2s ease-in-out infinite;
}
@keyframes merge-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(155,89,182,0.3); }
  50% { box-shadow: 0 0 14px rgba(155,89,182,0.6); }
}
.node-card.merge-source {
  border-style: dashed;
  border-color: #9b59b6;
}
.icon-btn.merge-active {
  background: #f0eaf8;
  color: #9b59b6;
  border-color: #d9c8eb;
}
.icon-btn.prep-active {
  background: #eaf6f0;
  color: #1e8449;
  border-color: #cfe8db;
}
.node-card.has-merge-in {
  border-left: 3px solid #9b59b6;
}

/* Блок препа на линии между движениями (см. layout.js, п. 5).
   z-index ниже карточек: если блок закрепили поверх карточки, карточка
   остаётся сверху. Кнопки появляются при наведении, чтобы не съедать
   место под название. */
.prep-chip {
  position: absolute; z-index: 1;
  display: flex; align-items: center; gap: 2px;
  padding: 0 3px 0 8px;
  background: #f4fbf7; border: 1px dashed #52b788; border-radius: 12px;
  color: #1e6b47; font-size: 11px; line-height: 1;
  cursor: pointer; white-space: nowrap; touch-action: none;
}
.prep-chip:hover { background: #e3f5ea; border-style: solid; }
.prep-chip-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.prep-chip-name .mention { font-size: 11px; }
.prep-chip-btns { display: none; gap: 2px; flex-shrink: 0; }
.prep-chip:hover .prep-chip-btns,
.prep-chip:focus-within .prep-chip-btns { display: flex; }
.prep-chip-btn {
  width: 18px; height: 18px; padding: 0;
  border: none; border-radius: 50%;
  background: #d8efe2; color: #1e6b47;
  font-size: 12px; line-height: 18px; cursor: pointer;
}
.prep-chip-btn:hover { background: #b9e2ca; }
.prep-chip-btn.add { background: #52b788; color: #fff; }
.prep-chip-btn.add:hover { background: #2d9a68; }
.prep-chip-btn.danger:hover { background: #fde8e8; color: #c0392b; }
.prep-chip-btn:disabled { opacity: 0.35; cursor: not-allowed; }
/* Свёрнутый преп — метка на линии */
.prep-mark {
  position: absolute; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  background: #52b788; color: #fff; border: 2px solid #fff;
  border-radius: 50%; font-size: 10px; font-weight: 700;
  box-shadow: 0 0 0 1px #52b788; cursor: pointer; touch-action: none;
}
.prep-mark:hover { background: #2d9a68; }

/* Тултип препа (наведение на линию с препом, на блок или метку) */
.prep-tooltip {
  position: fixed; z-index: 300; max-width: 280px;
  background: #1f3a2d; color: #fff; border-radius: 6px;
  padding: 7px 10px; font-size: 12px; line-height: 1.35;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2); pointer-events: none;
}
.prep-tooltip-title { font-weight: 600; }
.prep-tooltip-notes { margin-top: 4px; white-space: pre-wrap; color: #cfe8db; }
.prep-tooltip .mention { color: #fff; }

/* Невидимые «хит»-линии поверх связей: наведение и перетаскивание шины */
#linesSvg .link-hit {
  stroke: transparent; stroke-width: 14; fill: none;
  pointer-events: stroke; cursor: pointer;
}
#linesSvg .link-hit.bus-hit { cursor: ew-resize; }
/* В полном дереве связь можно тянуть: шина — по горизонтали, изгиб — за ручку */
#linesSvg .link-hit.draggable { cursor: ew-resize; }
#linesSvg .curve-handle {
  fill: #fff; stroke: #3498db; stroke-width: 2;
  pointer-events: all; cursor: move;
}
#linesSvg .curve-handle:hover { fill: #d6eaf8; }
.pin-badge.link-pin { position: absolute; }

/* Кнопки управления связью при наведении на линию */
.link-controls {
  position: absolute; z-index: 5; display: flex; gap: 4px;
  background: #fff; border: 1px solid #cdd5dd; border-radius: 6px;
  padding: 3px; box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}
.link-controls.hidden { display: none; }
.link-ctl-btn {
  background: #f4fbf7; color: #1e6b47; border: 1px solid #cfe8db;
  border-radius: 4px; padding: 3px 8px; font-size: 12px;
  cursor: pointer; white-space: nowrap;
}
.link-ctl-btn:hover { background: #e3f5ea; }
.link-ctl-btn.danger { background: #fff5f5; color: #c0392b; border-color: #f3d0d0; }
.link-ctl-btn.danger:hover { background: #fde8e8; }

/* Закрепление (только «все ветви»): карточки и блоки можно таскать */
.node-card { touch-action: none; }
.node-card.pinned { box-shadow: 0 0 0 2px #f5d58a, 0 1px 3px rgba(0,0,0,0.06); }
.pin-badge {
  position: absolute; top: -9px; left: -9px; z-index: 4;
  width: 20px; height: 20px; padding: 0;
  background: #fff; border: 1px solid #e0c36a; border-radius: 50%;
  font-size: 10px; line-height: 18px; cursor: pointer;
}
.pin-badge:hover { background: #fff3cd; }
.prep-chip .pin-badge, .prep-mark .pin-badge { top: -11px; left: -11px; }
.pin-badge.bus-pin { position: absolute; top: auto; left: auto; }
body.tree-dragging, body.tree-dragging * { cursor: grabbing !important; user-select: none; }
/* Свернуть/развернуть продолжения узла — на правой кромке карточки */
.node-card .collapse-toggle {
  position: absolute; right: -11px; top: 50%;
  transform: translateY(-50%);
  min-width: 22px; height: 22px; padding: 0 5px;
  border: 1px solid #3498db; border-radius: 11px;
  background: #fff; color: #3498db;
  font-size: 12px; line-height: 20px; font-weight: 600;
  cursor: pointer; z-index: 3;
}
.node-card .collapse-toggle:hover { background: #eaf5ff; }
.node-card .collapse-toggle.collapsed {
  background: #3498db; color: #fff;
}
.node-card .collapse-toggle.collapsed:hover { background: #2980b9; }

/* Подсветка движений из комбинаций выбранной папки: цвет рамки задаётся
   инлайном (outline) из state.treeHighlight.color */
.tree-highlight-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 4px 2px 6px; font-size: 12px; color: #555;
}
.tree-highlight-bar select {
  padding: 3px 6px; border: 1px solid #d5dbe1; border-radius: 4px;
  font-size: 12px; max-width: 220px; background: #fff;
}
.tree-highlight-bar input[type="color"] {
  width: 30px; height: 24px; padding: 0 2px; border: 1px solid #d5dbe1;
  border-radius: 4px; background: #fff; cursor: pointer;
}
.tree-highlight-bar input[type="color"]:disabled { opacity: 0.4; cursor: not-allowed; }
.tree-highlight-info { color: #95a5a6; font-size: 11px; }
.node-card.folder-highlight,
.mini-card.folder-highlight { outline-offset: 2px; }