/* ===========================================================
   滑块验证（对齐阿里 NC 的观感：灰轨 + 圆角滑块 + 拖满变绿）
   =========================================================== */
.nc-mask {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  transition: opacity .18s ease;
}
.nc-mask.is-on { opacity: 1; }

.nc-box {
  width: 300px;
  box-sizing: border-box;
  padding: 20px 18px 16px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .2);
  transform: translateY(8px) scale(.98);
  transition: transform .18s ease;
}
.nc-mask.is-on .nc-box { transform: none; }

.nc-title {
  font-size: 15px;
  font-weight: 500;
  color: #333;
  text-align: center;
  margin-bottom: 16px;
  letter-spacing: .3px;
}

.nc-track {
  position: relative;
  height: 40px;
  border-radius: 4px;
  background: #f2f3f5;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.nc-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: #7ac23c;
  transition: background .15s;
}
.nc-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #6f6f6f;
  pointer-events: none;
  letter-spacing: .2px;
}

.nc-handle {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid #e2e5e9;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
}
.nc-handle:active { cursor: grabbing; }
.nc-handle svg { width: 16px; height: 16px; display: block; }

.nc-box.is-ok .nc-fill { background: #7ac23c; }
.nc-box.is-ok .nc-text { color: #fff; }
.nc-box.is-ok .nc-handle { border-color: #7ac23c; }
.nc-box.is-ok .nc-handle svg path { stroke: #7ac23c; }

.nc-box.is-err .nc-track { animation: ncShake .3s; }
.nc-box.is-err .nc-text { color: #e54d42; }
.nc-box.is-err .nc-fill { background: #f5b7b1; }
@keyframes ncShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.nc-tip {
  margin-top: 12px;
  font-size: 12px;
  line-height: 16px;
  color: #a3a3a3;
  text-align: center;
}