/* mcres/static/css/components/slide-captcha.css */
.slc-root {
  width: 100%;
}

/* ===== 触发按钮 ===== */
.slc-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 13.5px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.slc-trigger:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(85, 216, 139, 0.4);
  color: #55d88b;
}
.slc-trigger-ok {
  background: rgba(85, 216, 139, 0.10);
  border: 1px solid rgba(85, 216, 139, 0.4);
  border-style: solid;
  color: #55d88b;
}
.slc-trigger-ok:hover {
  background: rgba(85, 216, 139, 0.15);
  color: #55d88b;
}

/* ===== 模态框 ===== */
.slc-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.slc-overlay-show {
  opacity: 1;
}

.slc-modal {
  width: 100%;
  max-width: 400px;
  background: #1d2229;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  transform: translateY(10px) scale(0.98);
  transition: transform 0.22s ease;
}
.slc-overlay-show .slc-modal {
  transform: translateY(0) scale(1);
}

.slc-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.slc-modal-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #e6edf3;
}
.slc-modal-title i {
  color: #55d88b;
}
.slc-modal-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.slc-modal-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transform: rotate(90deg);
}

.slc-modal-body {
  padding: 20px 20px 24px;
}

/* ===== 滑块本体 ===== */
.slc-body {
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
}

.slc-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  background: #0b0f14;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.slc-bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.slc-puzzle {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

.slc-bar { margin-top: 14px; }

/* ===== 滑道（方形风格） ===== */
.slc-track {
  position: relative;
  height: 44px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;            /* ← 原 22px，改方 */
  overflow: hidden;
}

/* ===== 已拖过的填充（左侧跟随滑道，右侧贴柄） ===== */
.slc-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: rgba(85, 216, 139, 0.18);
  border-radius: 6px 0 0 6px;    /* ← 左侧方角，右侧直角贴柄 */
}

.slc-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.35);
  pointer-events: none;
  letter-spacing: 0.5px;
}

/* ===== 拖动柄（正方形） ===== */
.slc-handle {
  position: absolute;
  top: 3px;
  left: 0;
  width: 38px;
  height: 38px;
  border-radius: 6px;            /* ← 原 50%，改方 */
  background: #55d88b;
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: grab;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  touch-action: none;
  transition: background 0.2s;
}
.slc-handle:active { cursor: grabbing; }
.slc-handle-ok { background: #55d88b; color: #fff; }
.slc-handle-fail { background: #ff6b6b; color: #fff; }

.slc-status {
  margin-top: 10px;
  min-height: 18px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}
.slc-status.ok { color: #55d88b; }
.slc-status.error { color: #ff6b6b; }

/* ===== 移动端 ===== */
@media (max-width: 480px) {
  .slc-modal { max-width: 100%; }
  .slc-modal-body { padding: 16px 14px 20px; }
}