/* 滑块验证码：把滑块从左拖到最右即通过。三端通用。 */
.sc { margin: 6px 0; user-select: none; -webkit-user-select: none; }
.sc-track {
  position: relative;
  height: 44px;
  background: #f1f3f5;
  border: 1px solid #d0d7de;
  border-radius: 22px;
  overflow: hidden;
}
.sc-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: linear-gradient(90deg, #4ade80, #22c55e);
}
.sc-text {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 13px;
  letter-spacing: 1px;
  pointer-events: none;
  z-index: 1;
}
.sc-handle {
  position: absolute;
  left: 0; top: 0;
  width: 44px; height: 44px;
  background: #fff;
  border: 1px solid #d0d7de;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
  display: flex; align-items: center; justify-content: center;
  cursor: grab;
  touch-action: none;
  z-index: 2;
}
.sc-arrow { color: #22c55e; font-size: 18px; font-weight: bold; }
.sc-dragging { cursor: grabbing; }
.sc-passed .sc-track { background: #dcfce7; border-color: #22c55e; }
.sc-passed .sc-fill { background: linear-gradient(90deg, #22c55e, #16a34a); }
.sc-passed .sc-handle { border-color: #22c55e; }
.sc-passed .sc-text { color: #16a34a; }
.sc-passed .sc-arrow { color: #16a34a; }