/* ═══════════════════════════════════════════
   PPN v3 — Tree Page Styles
   ═══════════════════════════════════════════ */

:root { --line:#c4b5fd; --line-w:2px; --drop:24px; }

/* ── Binary Tree ── */
.tree-col { display:flex;flex-direction:column;align-items:center }
.tree-connector { width:var(--line-w);height:var(--drop);background:var(--line) }
.tree-branch { display:flex;width:100% }
.tree-branch > .tree-col { flex:1;position:relative;padding-top:var(--drop) }
.tree-branch > .tree-col:first-child::before {
    content:'';position:absolute;top:0;left:50%;width:50%;height:var(--drop);
    border-top:var(--line-w) solid var(--line);border-left:var(--line-w) solid var(--line);border-radius:10px 0 0 0;
}
.tree-branch > .tree-col:last-child::before {
    content:'';position:absolute;top:0;right:50%;width:50%;height:var(--drop);
    border-top:var(--line-w) solid var(--line);border-right:var(--line-w) solid var(--line);border-radius:0 10px 0 0;
}
.tree-node { cursor:pointer;text-align:center;transition:transform .25s var(--ease-out) }
.tree-node:hover { transform:scale(1.08) }
.tree-avatar { width:52px;height:52px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;box-shadow:var(--shadow-sm);font-size:.75rem;margin:0 auto }
.tree-avatar.star0 { background:var(--n-300) }
.tree-avatar.star1 { background:linear-gradient(135deg,#fbbf24,#f59e0b) }
.tree-avatar.star2 { background:linear-gradient(135deg,#fb923c,#ea580c) }
.tree-avatar.star3 { background:linear-gradient(135deg,#f87171,#dc2626) }
.tree-avatar.star4 { background:linear-gradient(135deg,#e879f9,#c026d3) }
.tree-avatar.star5 { background:var(--gradient-hero) }
.tree-avatar.root { box-shadow:0 0 0 3px var(--amethyst-400),var(--shadow-md) }
.tree-empty { width:52px;height:52px;border:2px dashed var(--n-200);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--n-300);font-size:1.2rem;cursor:pointer;transition:all .25s;margin:0 auto }
.tree-empty:hover { border-color:var(--amethyst-400);color:var(--amethyst-400);transform:scale(1.1) }
.tree-name { font-size:.625rem;font-weight:600;margin-top:4px;color:var(--n-500);text-align:center }
.tree-sub { font-size:.5625rem;color:var(--n-400);text-align:center }

/* ── Sponsor Tree (Directory) ── */
.sp-node-wrap { display:inline-flex;flex-direction:column;align-items:center;vertical-align:top }
.sp-children { display:inline-flex;gap:12px;justify-content:center;padding-top:8px }
.dir-tree { font-size:.875rem;line-height:1;user-select:none }
.dir-tree ul { list-style:none;margin:0;padding:0 0 0 22px;position:relative }
.dir-tree > ul { padding-left:0 }
.dir-tree ul ul { border-left:1.5px solid var(--n-150);margin-left:11px }
.dir-tree li { position:relative;padding:2px 0 }
.dir-tree ul ul > li::before { content:'';position:absolute;left:-22px;top:15px;width:22px;height:0;border-top:1.5px solid var(--n-150) }
.dir-tree ul ul > li:last-child::after { content:'';position:absolute;left:-23px;top:15px;bottom:0;width:2px;background:#fff }
.dir-row { display:flex;align-items:center;gap:7px;padding:6px 10px;border-radius:8px;cursor:pointer;transition:background .2s }
.dir-row:hover { background:var(--amethyst-50) }
.dir-row.active-node { background:var(--amethyst-50);border:1px solid var(--amethyst-200) }
.dir-toggle { width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.65rem;color:var(--n-400);transition:transform .25s;flex-shrink:0 }
.dir-toggle.open { transform:rotate(90deg) }
.dir-toggle.empty { visibility:hidden }
.dir-icon { width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.05rem }
.dir-icon.folder-open { color:var(--gold) }
.dir-icon.folder-closed { color:var(--gold) }
.dir-icon.person { color:var(--amethyst-400) }
.dir-label { display:flex;align-items:center;gap:7px;flex:1;min-width:0 }
.dir-username { font-family:var(--font-display);font-weight:700;color:var(--amethyst-700);font-size:.8125rem;white-space:nowrap }
.dir-fullname { color:var(--n-500);font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.dir-badge { display:inline-flex;align-items:center;gap:2px;padding:2px 7px;border-radius:5px;font-size:.625rem;font-weight:700;flex-shrink:0 }
.dir-badge.star { background:var(--gradient-gold);color:#92400e }
.dir-badge.member { background:var(--n-100);color:var(--n-500) }
.dir-more { font-size:.6875rem;color:var(--n-400);padding:6px 10px 6px 58px;cursor:pointer;border-radius:8px;transition:background .2s }
.dir-more:hover { background:var(--amethyst-50);color:var(--amethyst-600) }

@media(max-width:480px) {
    .dir-fullname { display:none }
    .dir-tree ul ul { margin-left:6px;padding-left:16px }
}