@layer components {
  .sortable { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
  .sortable-item {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-md);
    background-color: var(--card); font-size: 0.875rem; color: var(--foreground);
    cursor: grab; transition: box-shadow 150ms ease, opacity 150ms ease; user-select: none;
    &:active { cursor: grabbing; }
    &[data-dragging] { opacity: 0.5; box-shadow: var(--shadow-md); }
    &[data-over] { border-color: var(--primary); border-style: dashed; }
  }
  .sortable-handle { color: var(--muted-foreground); cursor: grab; font-size: 1rem; line-height: 1; flex-shrink: 0; & svg { width: 1rem; height: 1rem; } }
}