.drag-and-drop-list{width:100%;padding:calc(var(--spacing-xl) + var(--spacing-xs));background:var(--bg-secondary);border-radius:var(--border-radius);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);transition:box-shadow var(--transition-base) ease;position:relative}.drag-and-drop-list:hover{box-shadow:var(--shadow-md)}.drag-and-drop-list::-webkit-scrollbar{width:var(--spacing-md)}.drag-and-drop-list::-webkit-scrollbar-track{background:var(--bg-tertiary);border-radius:calc(var(--border-radius-sm) / 2);margin:var(--spacing-xs)}.drag-and-drop-list::-webkit-scrollbar-thumb{background:var(--accent-secondary);border-radius:calc(var(--border-radius-sm) / 2);transition:background var(--transition-base) ease}.drag-and-drop-list::-webkit-scrollbar-thumb:hover{background:var(--accent-primary)}.drag-and-drop-list{scrollbar-width:thin;scrollbar-color:var(--accent-secondary) var(--bg-tertiary);scroll-behavior:smooth;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.drag-and-drop-list[style*=overflow-y]{padding-right:var(--spacing-xl)}.drag-and-drop-list.auto-scrolling{scroll-behavior:auto}.drag-and-drop-list.empty{padding:calc(var(--spacing-xl) * 4) calc(var(--spacing-xl) + var(--spacing-xs));text-align:center;background:var(--bg-tertiary)}.drag-and-drop-empty-message{color:var(--accent-primary);font-size:var(--font-size-lg);font-weight:var(--font-weight-medium);justify-content:center;align-items:center;gap:var(--spacing-md);display:flex}.drag-and-drop-item{background:var(--bg-secondary);border-radius:var(--border-radius-sm);margin-bottom:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-lg);cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:border-color var(--transition-base) ease, box-shadow var(--transition-base) ease, transform var(--transition-base) ease, background var(--transition-base) ease;box-shadow:var(--shadow-sm);touch-action:pan-y;border:2px solid #0000;position:relative}.drag-and-drop-item:last-child{margin-bottom:0}.drag-and-drop-item:hover{border-color:var(--border-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}.drag-and-drop-item.dragging{cursor:grabbing;opacity:.9;border-color:var(--accent-primary);background:var(--accent-primary-light);box-shadow:var(--shadow-lg);z-index:var(--z-dropdown,100);animation:1.5s ease-in-out infinite alternate dragPulse;transform:scale(1.02)}@keyframes dragPulse{0%{box-shadow:var(--shadow-lg)}to{box-shadow:var(--shadow-xl)}}.drag-and-drop-item.drag-over{border-color:var(--accent-secondary);background:var(--accent-primary-light);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.drag-and-drop-item.not-draggable{cursor:default;opacity:.6;background:var(--bg-tertiary)}.drag-and-drop-item.not-draggable:hover{box-shadow:var(--shadow-sm);transform:none}.drag-and-drop-default-item{align-items:center;gap:var(--spacing-md);min-height:var(--font-size-lg);display:flex}.drag-and-drop-serial-number{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--accent-primary);text-align:center;background:var(--accent-primary-light);border-radius:var(--border-radius-sm);min-width:28px;padding:var(--spacing-xs) var(--spacing-md);border:1px solid var(--border-color);transition:background var(--transition-base) ease, border-color var(--transition-base) ease}.drag-and-drop-item:hover .drag-and-drop-serial-number{background:var(--bg-tertiary);border-color:var(--border-hover)}.drag-and-drop-handle{color:var(--accent-secondary);font-size:var(--font-size-xl);cursor:grab;padding:var(--spacing-xs);border-radius:var(--border-radius-sm);transition:background var(--transition-base) ease, color var(--transition-base) ease, transform var(--transition-base) ease;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:0 0;justify-content:center;align-items:center;display:flex}.drag-and-drop-handle:hover{background:var(--accent-primary-light);color:var(--accent-primary);transform:scale(1.1)}.drag-and-drop-item.dragging .drag-and-drop-handle{cursor:grabbing;color:var(--accent-primary);animation:.2s ease-in-out infinite handleShake}@keyframes handleShake{0%,to{transform:translate(0)}25%{transform:translate(-3px)}75%{transform:translate(3px)}}.drag-and-drop-item-content{font-size:var(--font-size-md);font-weight:var(--font-weight-medium);color:var(--text-primary);transition:color var(--transition-base) ease;flex:1;line-height:1.3}.drag-and-drop-item.dragging .drag-and-drop-item-content{color:var(--accent-primary);font-weight:var(--font-weight-semibold)}.drag-and-drop-manual-buttons{gap:var(--spacing-xs);opacity:0;transition:opacity var(--transition-base) ease;flex-direction:column;display:flex}.drag-and-drop-item:hover .drag-and-drop-manual-buttons{opacity:1}.drag-and-drop-btn{border:1px solid var(--accent-secondary);background:var(--bg-secondary);width:26px;height:26px;color:var(--accent-secondary);border-radius:var(--border-radius-sm);cursor:pointer;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);transition:background var(--transition-base) ease, color var(--transition-base) ease, transform var(--transition-base) ease, box-shadow var(--transition-base) ease;outline:none;justify-content:center;align-items:center;display:flex}.drag-and-drop-btn:hover:not(:disabled){background:var(--accent-primary);color:var(--bg-secondary);box-shadow:var(--shadow-md);transform:scale(1.05)}.drag-and-drop-btn:active:not(:disabled){transform:scale(.95)}.drag-and-drop-btn:disabled{opacity:.4;cursor:not-allowed;background:var(--bg-tertiary);border-color:var(--border-color);color:var(--text-tertiary)}@media (width<=768px),(pointer:coarse){.drag-and-drop-item{padding:var(--spacing-lg);margin-bottom:var(--spacing-md)}.drag-and-drop-default-item{gap:var(--spacing-lg)}.drag-and-drop-handle{font-size:calc(var(--font-size-xl) + 2px);padding:var(--spacing-sm)}.drag-and-drop-manual-buttons{opacity:1;gap:var(--spacing-sm)}.drag-and-drop-btn{width:30px;height:30px;font-size:var(--font-size-md)}.drag-and-drop-serial-number{font-size:var(--font-size-md);padding:var(--spacing-xs) var(--spacing-md);min-width:30px}.drag-and-drop-item-content{font-size:var(--font-size-md);line-height:1.4}.drag-and-drop-item.dragging{opacity:.9;border:3px solid var(--accent-primary);background:var(--accent-primary-light);box-shadow:var(--shadow-lg);transform:scale(1.03)}}@media (width<=768px){.drag-and-drop-handle{font-size:calc(var(--font-size-xl) + 6px);padding:var(--spacing-md);min-width:44px;min-height:44px}.drag-and-drop-item{margin-bottom:var(--spacing-md);padding:var(--spacing-lg);touch-action:pan-y}.drag-and-drop-list{-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}.drag-and-drop-item.dragging{touch-action:none!important}.drag-and-drop-item:active{transform:scale(.98)}.drag-and-drop-serial-number{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);min-width:30px}}@media (pointer:coarse){.drag-and-drop-handle{padding:var(--spacing-md);min-width:44px;min-height:44px}.drag-and-drop-item{min-height:44px;padding:var(--spacing-lg)}}.drag-and-drop-item.loading{pointer-events:none;opacity:.7;position:relative}.drag-and-drop-item.loading:before{content:"";border:2px solid var(--border-color);border-top:2px solid var(--accent-primary);border-radius:50%;width:20px;height:20px;margin:-10px 0 0 -10px;animation:1s linear infinite loadingSpin;position:absolute;top:50%;left:50%}@keyframes loadingSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.drag-and-drop-item:focus-within,.drag-and-drop-handle:focus{outline:2px solid var(--accent-primary);outline-offset:2px}@media (prefers-reduced-motion:reduce){.drag-and-drop-list,.drag-and-drop-item,.drag-and-drop-handle,.drag-and-drop-btn,.drag-and-drop-serial-number,.drag-and-drop-item-content,.drag-and-drop-manual-buttons{transition:none}.drag-and-drop-item.dragging,.drag-and-drop-item.dragging .drag-and-drop-handle,.drag-and-drop-item.loading:before{animation:none}}.page-header{justify-content:space-between;align-items:flex-start;gap:var(--spacing-lg);margin-bottom:var(--spacing-xl);display:flex}.page-header__icon{color:var(--accent-primary);flex-shrink:0;justify-content:center;align-items:center;margin-top:2px;font-size:1.5rem;display:flex}.page-header__text{gap:var(--spacing-xs);flex-direction:column;flex:1;min-width:0;display:flex}.page-header__actions{align-items:center;gap:var(--spacing-md);flex-shrink:0;display:flex}.sk{background:var(--bg-tertiary);border-radius:6px;display:block;position:relative;overflow:hidden}.sk--inline{vertical-align:middle;display:inline-block}.sk--text{border-radius:4px;width:100%;height:.8em}.sk--rect{border-radius:8px}.sk--circle{border-radius:50%}.sk-group{flex-direction:column;display:flex}.sk--shimmer:after{content:"";background:linear-gradient(90deg, transparent, var(--hover-overlay), transparent);animation:1.5s infinite sk-shimmer;position:absolute;inset:0;transform:translate(-100%)}@keyframes sk-shimmer{to{transform:translate(100%)}}.sk--pulse{animation:1.5s ease-in-out infinite sk-pulse}@keyframes sk-pulse{0%,to{opacity:1}50%{opacity:.45}}@media (prefers-reduced-motion:reduce){.sk--shimmer:after,.sk--pulse{animation:none}}