/* ===== Shared Tree Diagram Styles (DSA Series) ===== */
.tree-diagram { text-align: center; margin: 1.5rem 0; overflow-x: auto; }
.tree-diagram svg, .anim-container svg { max-width: 100%; height: auto; }
.tree-diagram svg .edge, .anim-container svg .edge { stroke: #3a7a65; stroke-width: 2.5; fill: none; }
.tree-diagram svg .node-circle, .anim-container svg .node-circle { fill: var(--card, #fffdf9); stroke: var(--brand, #0a8f6a); stroke-width: 2.5; transition: fill 0.3s ease; }
.tree-diagram svg .node-circle.highlight, .anim-container svg .node-circle.highlight { fill: #0a8f6a; }
.tree-diagram svg .node-label, .anim-container svg .node-label { font-family: "Manrope", sans-serif; font-size: 14px; font-weight: 700; fill: var(--ink, #13201a); text-anchor: middle; dominant-baseline: central; }
.tree-diagram svg .node-circle.highlight + .node-label, .anim-container svg .node-circle.highlight + .node-label { fill: #fff; }
.tree-diagram figcaption { font-size: 0.82rem; color: var(--ink-muted, #4a5a53); margin-top: 0.4rem; }

/* Animation Controls */
.anim-container { border: 1px solid var(--line, #d9cfba); border-radius: 14px; padding: 1.2rem; margin: 1.5rem 0; background: var(--card, #fffdf9); }
.anim-container h4 { margin: 0 0 0.8rem; font-size: 0.95rem; color: var(--brand, #0a8f6a); }
.anim-controls { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.8rem; flex-wrap: wrap; }
.anim-btn { padding: 0.4rem 1rem; border: 1px solid var(--brand, #0a8f6a); border-radius: 999px; background: transparent; color: var(--brand, #0a8f6a); font-weight: 700; font-family: inherit; font-size: 0.82rem; cursor: pointer; transition: all 0.15s ease; }
.anim-btn:hover { background: var(--brand, #0a8f6a); color: #fff; }
.anim-btn.active { background: var(--brand, #0a8f6a); color: #fff; }
.anim-output { font-family: "Consolas", "Fira Code", monospace; font-size: 0.88rem; color: var(--ink, #13201a); margin-left: 0.5rem; min-width: 120px; }

/* Algorithm Box */
.algo-box { background: #1a2b22; color: #d4e8dc; border-radius: 10px; padding: 1rem 1.2rem; margin: 1rem 0; font-family: "Consolas", "Fira Code", monospace; font-size: 0.86rem; line-height: 1.6; overflow-x: auto; }
.algo-box .kw { color: #7ee8b0; font-weight: 700; }
.algo-box .fn { color: #e8c87e; }
.algo-box .cm { color: #6a8a78; font-style: italic; }
.algo-box .indent { padding-left: 1.5rem; display: block; }
.algo-box .indent2 { padding-left: 3rem; display: block; }

/* Comparison Table */
.compare-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.9rem; }
.compare-table th { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 2px solid var(--line, #d9cfba); color: var(--brand, #0a8f6a); font-weight: 700; }
.compare-table td { padding: 0.5rem 0.8rem; border-bottom: 1px solid var(--line, #d9cfba); }
.compare-table tr:last-child td { border-bottom: none; }

/* Node highlight animation */
@keyframes nodeVisit { 0% { fill: #fffdf9; } 30% { fill: #0a8f6a; } 100% { fill: #b9e8d9; } }
.node-visited { animation: nodeVisit 0.6s ease forwards; }

/* Edge highlight for animations */
.tree-diagram svg .edge, .anim-container svg .edge { transition: stroke 0.3s, stroke-width 0.3s, opacity 0.4s; }

/* Clickable nodes */
.dh-node, .lca-node { cursor: pointer; transition: fill 0.3s, stroke 0.3s; }
.dh-node:hover, .lca-node:hover { stroke-width: 3.5; stroke: #ff6b35; }

/* Smooth node transitions for rotation animations */
.anim-container svg circle { transition: opacity 0.4s ease, fill 0.4s ease; }
.anim-container svg text { transition: opacity 0.4s ease; }

/* Call stack & queue display animations */
@keyframes slideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.anim-container div[style*="border:1px"] > div:last-child { animation: slideIn 0.3s ease; }