/* 滑动拼图验证码组件 */
.slider-captcha { margin: 6px 0 14px; }
.cap-wrap { display: flex; flex-direction: column; gap: 8px; max-width: 340px; }
.cap-board {
  position: relative; width: 320px; height: 160px; max-width: 100%;
  border-radius: 8px; overflow: hidden; border: 1px solid var(--border, #e2e8f0); background: #0f172a;
}
.cap-bg { display: block; width: 320px; height: 160px; max-width: 100%; }
.cap-piece {
  position: absolute; left: 0;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .45));
  pointer-events: none;
}
.cap-track {
  position: relative; width: 320px; height: 42px; max-width: 100%;
  background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden;
  transition: background .15s, border-color .15s;
}
.cap-hint {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #64748b; user-select: none; pointer-events: none;
}
.cap-handle {
  position: absolute; top: 0; left: 0; width: 44px; height: 40px;
  background: #1d4ed8; color: #fff; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; cursor: grab; touch-action: none; font-weight: 700; font-size: 18px;
  transition: background .15s;
}
.cap-handle:active { cursor: grabbing; }
.cap-ok { border-color: #16a34a; background: #f0fdf4; }
.cap-ok .cap-hint { color: #16a34a; }
.cap-ok .cap-handle { background: #16a34a; }
.cap-bad { border-color: #dc2626; background: #fef2f2; }
.cap-bad .cap-hint { color: #dc2626; }
.cap-bad .cap-handle { background: #dc2626; }