Drop Indicator

<!-- Drop Indicator — insert this line where the dragged item will drop -->
<ul class="nuda-dropind">
  <li class="nuda-dropind__item">Item one</li>
  <li class="nuda-dropind__item">Item two</li>
  <li class="nuda-dropind__line" aria-hidden="true"></li>
  <li class="nuda-dropind__item">Item three</li>
</ul>

/* Drop Indicator
   A glowing line with end-dots showing where a drag will land.
   Customize: --di-color, list spacing. */

.nuda-dropind {
  --di-color: #e4ff54;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: 280px;
}

.nuda-dropind__item {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  font: 500 0.875rem ui-sans-serif, system-ui, sans-serif;
  color: #fafafa;
}

.nuda-dropind__line {
  height: 2px;
  background: var(--di-color);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(228, 255, 84, 0.6);
  position: relative;
  animation: nuda-di-pulse 1.4s ease-in-out infinite;
}

.nuda-dropind__line::before,
.nuda-dropind__line::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  background: var(--di-color);
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 6px var(--di-color);
}

.nuda-dropind__line::before { left: -4px; }
.nuda-dropind__line::after  { right: -4px; }

@keyframes nuda-di-pulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-dropind__line { animation: none; }
}