.node {
    cursor: pointer;
    transition: all 0.3s ease;
}

.node circle {
    transition: all 0.3s ease;
}

.node:hover circle {
    transform: scale(1.1);
    filter: brightness(1.1);
}

.node.highlighted circle {
    fill: #fbbf24 !important;
    stroke: #f59e0b !important;
    stroke-width: 3px !important;
}

.node.search-path circle {
    fill: #10b981 !important;
    stroke: #059669 !important;
    stroke-width: 3px !important;
}

.node.traversal circle {
    fill: #8b5cf6 !important;
    stroke: #7c3aed !important;
    stroke-width: 3px !important;
}

.edge {
    stroke: #374151;
    stroke-width: 2px;
    fill: none;
}

.edge.highlighted {
    stroke: #f59e0b;
    stroke-width: 3px;
}

.edge.search-path {
    stroke: #059669;
    stroke-width: 3px;
}

.edge.traversal {
    stroke: #7c3aed;
    stroke-width: 3px;
}

.node-text {
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-anchor: middle;
    dominant-baseline: central;
    fill: white;
    pointer-events: none;
}

.control-button {
    transition: all 0.2s ease;
}

.control-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.control-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.tree-info {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.search-info {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}
/* Optional subtle pulse for traversal nodes */
@keyframes pulseGlow {
    0% { filter: drop-shadow(0 0 2px rgba(124,58,237,0.2)); }
    50% { filter: drop-shadow(0 0 10px rgba(124,58,237,0.8)); }
    100% { filter: drop-shadow(0 0 2px rgba(124,58,237,0.2)); }
}

.node.traversal circle {
    animation: pulseGlow 0.8s ease-in-out 1;
    filter: drop-shadow(0 0 6px rgba(124, 58, 237, 0.6));
}
/* Pulse for search path nodes */
@keyframes pulseGlowGreen {
    0% { filter: drop-shadow(0 0 2px rgba(16,185,129,0.2)); }
    50% { filter: drop-shadow(0 0 10px rgba(16,185,129,0.85)); }
    100% { filter: drop-shadow(0 0 2px rgba(16,185,129,0.2)); }
}

.node.search-path circle {
    animation: pulseGlowGreen 0.6s ease-in-out 1;
    filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.6));
}