#pathing-bar {
  background: var(--mode-pathing);
}
#visioning-bar {
  background: var(--mode-visioning);
}

/* Path sequence badges on nodes */
.path-seq-badge {
  font-size: 10px;
  font-weight: 700;
  fill: #fff;
  text-anchor: middle;
  pointer-events: none;
}
.path-seq-badge-bg {
  fill: var(--critical-path);
  stroke: #fff;
  stroke-width: 1;
}

/* Halo */
.halo-ring {
  fill: none;
  stroke: var(--text);
  stroke-width: 2;
  stroke-dasharray: 6 4;
  animation: halo-spin 8s linear infinite;
}
@keyframes halo-spin {
  to { stroke-dashoffset: -60; }
}

.halo-btn {
  cursor: pointer;
}
.halo-btn-bg {
  fill: var(--glass-bg);
  stroke: var(--glass-border);
  stroke-width: 1;
}
.halo-btn-bg:hover { fill: rgba(255,255,255,0.15); }
.halo-btn-text {
  fill: var(--text);
  font-size: 9px;
  font-weight: 600;
  text-anchor: middle;
  pointer-events: none;
}

.halo-btn.delete .halo-btn-bg { stroke: rgba(252,129,129,0.4); }
.halo-btn.delete .halo-btn-text { fill: #fc8181; }

/* Waypoint create input on canvas */
#wp-create-input {
  position: absolute;
  display: none;
  z-index: 25;
}
#wp-create-input input {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 4px 8px;
  font-size: 12px;
  width: 160px;
  backdrop-filter: blur(8px);
}

/* Pulse animation for in-progress nodes */
.path-selected {
  stroke: #ffffff !important;
  opacity: 1 !important;
  stroke-width: 8px;
}

.pulse-ring {
  fill: none;
  stroke-width: 2;
  opacity: 0;
  animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
  0% { opacity: 0.6; r: 18; }
  100% { opacity: 0; r: 32; }
}