/* ══════════════════════════════════════════════════════════
   dragsort.css — 通用拖拽排序的视觉部分（前台与后台共用）
   ══════════════════════════════════════════════════════════ */

.ds-host [data-ds-item],
.ds-host .ds-item{touch-action:none;}

/* 拖起来的那一份：跟着指针走，不能挡住 elementFromPoint */
.ds-ghost{position:fixed !important;z-index:99999 !important;
  margin:0 !important;pointer-events:none !important;
  box-shadow:0 18px 44px -12px rgba(0,0,0,.72) !important;
  transform:rotate(-1deg) scale(1.02);opacity:.97;}

/* 原位隐藏，但保留在 DOM 里，落定后换回来 */
.ds-hidden{display:none !important;}

/* 占位条：明确指出松手会落在哪 */
.ds-ph{border-radius:11px;box-sizing:border-box;
  border:1px dashed rgba(255,183,197,.55);
  background:rgba(255,183,197,.08);
  animation:dsPh .24s ease;}
@keyframes dsPh{from{opacity:0;transform:scaleY(.55)}to{opacity:1;transform:none}}

body.ds-dragging{cursor:grabbing;user-select:none;-webkit-user-select:none;}

/* 抓手：三条横线，暗示这里可以拖 */
.ds-grip{width:14px;height:16px;flex:0 0 auto;opacity:.42;cursor:grab;
  background:linear-gradient(currentColor,currentColor) 0 3px/14px 1.5px no-repeat,
             linear-gradient(currentColor,currentColor) 0 8px/14px 1.5px no-repeat,
             linear-gradient(currentColor,currentColor) 0 13px/14px 1.5px no-repeat;}
.ds-grip:hover{opacity:.8;}
body.ds-dragging .ds-grip{cursor:grabbing;}

@media(prefers-reduced-motion:reduce){
  .ds-ph{animation:none;}
  .ds-ghost{transform:none;}
}