/* ============================================================
 * 人机验证滑块 · 共享样式（account / Clouds / Moon / Stars 共用）
 *
 * 配色全走 CSS 变量，各站覆盖这几个就能适配自己的主题：
 *   --slider-track        轨道底色
 *   --slider-line         轨道描边
 *   --slider-text         提示文字色
 *   --slider-knob-shadow  把手胶囊阴影
 *
 * 通过态（拖到最右之后）单独一组，各站按自己的主题色覆盖：
 *   --slider-fill         通过时轨道与把手的填充色（默认 account.html 的蓝）
 *   --slider-done-glow    通过时轨道外圈的同色辉光
 *   --slider-done-text    「验证通过」文字与勾的图标色（压在填充色上，默认白）
 *   --slider-knob-done    把手胶囊通过后的颜色
 *   --slider-focus        把手聚焦时的描边
 *
 * 失败态（提交被拒时抖动闪红）：
 *   --slider-error        失败文字与失败态填充色
 *   --slider-error-text   失败态把手上的文字/图标色（压在失败色上，默认白）
 *
 * 例：ChatBubbles 用品牌绿，只写两行即可
 *   .captcha-slider { --slider-fill: #07c160; --slider-done-glow: rgba(7,193,96,.28); }
 *
 * 一个变量都不改，就是 account.html 原来的样子（浅灰轨道 + 蓝色通过）。
 * 结构与动效取自 account.html 的 SlideCommit 同款实现，逻辑未改。
 * ============================================================ */

/* ---------- 滑块验证（react-bits SlideCommit 同款：白色胶囊把手随拖动展开） ---------- */
/* 滑块容器自身的上下留白：上下各 16px。
 * 原来是 2px，滑块几乎贴着上面的输入框和下面的按钮 —— 手指点滑块时
 * 很容易误触按钮（2026-10-16 用户反馈「滑块和按钮靠太近」）。
 * 16px 与 AGENTS.md 的表单间距标准一致：相邻输入框 10px、输入框与按钮 12px，
 * 滑块更高（46px）且是可拖控件，这里放宽到 16px。
 * 各站若已有自己的 .captcha-slider 规则会覆盖它，属预期。 */
.captcha-slider { margin: 16px 0; }
.captcha-track {
  position: relative;
  height: 46px;
  border: 1px solid var(--slider-line, #dbe3ec);
  border-radius: 999px;
  background: var(--slider-track, rgba(241, 245, 249, .9));
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  cursor: grab;
}
.captcha-slider.held .captcha-track { cursor: grabbing; }
.captcha-slider.done .captcha-track,
.captcha-slider.error .captcha-track { cursor: default; }
/* 轨道文字层：拖动时整层由 JS 控制淡出；错误时与错误文字模糊交叉切换 */
.captcha-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
.captcha-text,
.captcha-err {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  transition: opacity .2s ease, filter .2s ease;
}
.captcha-text { color: var(--slider-text, #64748b); }
.captcha-err {
  color: var(--slider-error, #dc2626);
  opacity: 0;
  filter: blur(2px);
}
.captcha-slider.error .captcha-text { opacity: 0; filter: blur(2px); }
.captcha-slider.error .captcha-err { opacity: 1; filter: none; }
/* 把手胶囊：四周留 4px 内衬，宽度铺满、由 clip-path 裁出可见段 */
.captcha-slider .captcha-knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  appearance: none;
  border: none;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--slider-knob-shadow, 0 3px 10px rgba(100, 130, 160, .3));
  color: var(--ink-soft);
  padding: 0;
  margin: 0;
  line-height: 0;
  cursor: inherit;
  touch-action: none;
  transition: background-color .2s ease, color 0s;
}
.captcha-knob:focus-visible {
  box-shadow: inset 0 0 0 2px var(--slider-focus, rgba(56, 189, 248, .45));
  outline: none;
}
.captcha-slider .captcha-knob svg { width: 18px; height: 18px; }
/* 内容层：绝对定位铺满胶囊，作为箭头/完成文字的定位基准（inline 元素上 transform 不生效） */
.captcha-content {
  position: absolute;
  inset: 0;
}
.captcha-arrow,
.captcha-done {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.captcha-arrow { transition: opacity .12s ease; }
.captcha-done {
  color: var(--slider-done-text, #fff);
  opacity: 0;
  transform: scale(.95);
  transition: opacity .2s cubic-bezier(0.23, 1, 0.32, 1), transform .2s cubic-bezier(0.23, 1, 0.32, 1);
}
.captcha-done svg { width: 16px; height: 16px; }
/* 验证通过：胶囊变蓝 + 勾与完成文字滑入（兜底是 Sounds 的天空蓝，
 * 各站必须在自己的样式里覆盖 --slider-knob-done 等变量，
 * 否则会用到这里的天空蓝 —— 在 ChatBubbles / Stars / Moon 上都是错的配色。 */
.captcha-slider.done .captcha-knob { background: var(--slider-knob-done, #0ea5e9); color: var(--slider-done-text, #fff); }
.captcha-slider.done .captcha-done { opacity: 1; transform: scale(1); }
/* 提交被拒：胶囊变红（颜色沿用站内错误红） */
.captcha-slider.error .captcha-knob { background: var(--slider-error, #dc2626); color: var(--slider-error-text, #fff); }