/* hyp-tree.css — v4.4 */
.hyp-tree { list-style: none; margin: 6px 0 0 0; padding: 0; }
.hyp-tree .ht-node { margin: 2px 0; }
.hyp-tree .ht-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 10px; }
.hyp-tree .ht-row:hover { background: rgba(148,163,184,.08); }
.hyp-tree .ht-toggle { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(148,163,184,.35); background: transparent; position: relative; }
.hyp-tree .ht-toggle::before,
.hyp-tree .ht-toggle::after { content:""; position:absolute; background: currentColor; left: 4px; right: 4px; top: 8px; height: 2px; opacity:.8; }
.hyp-tree .ht-toggle::after { transform: rotate(90deg); transition: transform .18s ease; }
.hyp-tree .ht-node.open > .ht-row .ht-toggle::after { transform: rotate(0deg); }
.hyp-tree .ht-leaf { width: 18px; height: 18px; opacity: .35; }
.hyp-tree .ht-title { font-weight: 600; }
.hyp-tree .ht-stages { margin-left: 8px; font-size: 12px; opacity: .65; }
.hyp-tree .ht-badge { margin-left: 8px; font-size: 11px; padding: 2px 6px; border-radius: 999px; background: rgba(99,102,241,.12); border: 1px solid rgba(99,102,241,.35); }
.hyp-tree .ht-children { margin: 2px 0 0 22px; padding-left: 10px; border-left: 1px dashed rgba(148,163,184,.25); list-style: none; }
.ht-toolbar { display:flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; margin-bottom: 6px; }
.ht-actions .ht-act { font-size: 12px; padding: 4px 8px; border-radius: 8px; border: 1px solid rgba(148,163,184,.35); background: rgba(15,23,42,.2); }
.ht-actions .ht-act:hover { background: rgba(15,23,42,.35); }