:root {
    --primary: #60a5fa; --secondary: #a78bfa; --accent: #22d3ee;
    --bg: #0f172a; --card: rgba(30,41,59,0.6);
    --text: #e2e8f0; --muted: #94a3b8; --road: #334155;
    
    /* NEW Theme-Matched A* Specific Colors */
    --open-node: #10b981;    /* Vibrant Emerald Green */
    --closed-node: #475569;  /* Cool Slate (matching roads) */
    --current-node: #ec4899; /* Vibrant Pink/Magenta (derived from purple accent) */
}

body, html { margin: 0; padding: 0; width: 100vw; height: 100vh; background: var(--bg); font-family: 'Inter', sans-serif; overflow: hidden; display: flex; }

.sidebar { width: 380px; height: 100vh; box-sizing: border-box; padding: 20px; display: flex; flex-direction: column; overflow-y: auto; background: rgba(15,23,42,0.85); backdrop-filter: blur(16px); z-index: 10; border-right: 1px solid #334155; }

h2 { margin: 0; color: var(--primary); font-size: 1.7rem; }
.subtitle { font-size: 0.9rem; color: #64748b; margin-bottom: 25px; display: block; }

.input-group { margin-bottom: 15px; }
label { display: block; font-weight: 700; font-size: 0.8rem; margin-bottom: 5px; color: #94a3b8; text-transform: uppercase; }
select { width: 100%; padding: 12px; border-radius: 8px; border: 2px solid #334155; background: #1e293b; color: #fff; font-size: 1rem; transition: 0.2s; }
select:focus { outline: none; border-color: var(--primary); }

.button-row { display: flex; gap: 8px; margin-top: 10px; }
button { border: none; padding: 14px; border-radius: 8px; font-weight: 700; cursor: pointer; transition: 0.2s; font-size: 0.9rem;}
.btn-main { background: linear-gradient(135deg, #3b82f6, #6366f1); color: white; flex: 1; }
/* Step button updated to purple to match 'Next Step' */
.btn-step { background: #8b5cf6; color: white; flex: 1; } 
.btn-reset { background: #334155; color: #e2e8f0; flex: 0.6; }
button:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.1); }
button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Algorithm Log */
.algo-log { margin-top: 15px; padding: 12px; background: #020617; border-radius: 8px; border: 1px solid #334155; color: #cbd5e1; font-size: 0.85rem; line-height: 1.4; min-height: 80px; }

.distance-display { margin-top: 15px; padding: 15px; background: rgba(30, 41, 59, 0.8); border-radius: 8px; border: 1px solid var(--primary); text-align: center; }
.distance-display h3 { margin: 0; color: var(--accent); font-size: 1.1rem; font-weight: 700; }

.map-container { flex-grow: 1; height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; background: radial-gradient(circle at top, #1e293b, #020617); cursor: crosshair;}
#campus-map { width: 100%; height: 100%; }

/* Paths */
.path { stroke: #334155; stroke-width: 6; opacity: 0.4; }
.path.active { stroke: var(--accent); stroke-width: 20; opacity: 1; filter: drop-shadow(0 0 8px rgba(34,211,238,0.5)); transition: stroke 0.2s ease; }

/* Nodes Base */
.node { cursor: pointer; }
.node circle { fill: #0f172a; stroke: var(--primary); stroke-width: 8; transition: all 0.3s; }
.node text { font-size: 22px; font-weight: 800; fill: #e2e8f0; text-anchor: middle; paint-order: stroke; stroke: #0f172a; stroke-width: 6px; }

/* Node States (A* Visualizations) - Updated styling */
.node.open-set circle { stroke: var(--open-node); fill: rgba(16, 185, 129, 0.1); filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.3)); }
.node.closed-set circle { stroke: var(--closed-node); fill: rgba(71, 85, 105, 0.1); }
.node.current-eval circle { stroke: var(--current-node); fill: rgba(236, 72, 153, 0.2); stroke-width: 14; filter: drop-shadow(0 0 15px rgba(236, 72, 153, 0.6)); }

.edge-weight { fill: var(--muted); font-size: 14px; font-weight: 700; text-anchor: middle; paint-order: stroke; stroke: var(--bg); stroke-width: 4px; pointer-events: none;}
.path.active + .edge-weight { fill: #fff; }

.legend { margin-top: 15px; padding-top: 15px; border-top: 1px solid #334155; display: flex; flex-direction: column; gap: 8px; }
.legend-item { display: flex; align-items: center; font-size: 0.85rem; font-weight: 600; color: #94a3b8; }
.dot { width: 14px; height: 14px; border-radius: 4px; margin-right: 10px; }
.path-dot { background: var(--accent); }

/* Math Tooltip */
.tooltip { position: absolute; background: rgba(2, 6, 23, 0.95); border: 1px solid var(--primary); color: #fff; padding: 12px; border-radius: 8px; font-family: monospace; font-size: 14px; pointer-events: none; z-index: 1000; box-shadow: 0 4px 15px rgba(0,0,0,0.5); transform: translate(-50%, -120%); white-space: pre-line; }
.hidden { display: none; }