/* ============================================================================
   通用点击验证码 —— 弹窗内的领域样式（弹窗外壳复用控件库 .ui-mask / .ui-modal）
   只处理三块：图片舞台、点击标记、状态行。颜色与圆角全部走 ui-kit 令牌，
   这样明暗主题切换时不用额外适配。
   ========================================================================== */
.cap-modal { max-width: 424px; }
.cap-body { display: flex; flex-direction: column; gap: 11px; padding: 16px 18px 18px; }

/* 提示：请依次点击「甲」「乙」 */
.cap-tip { font-size: 13px; line-height: 1.7; color: var(--ui-text-sub); }
.cap-tip b {
  display: inline-block;
  min-width: 20px;
  padding: 0 3px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  color: var(--ui-primary);
  border-bottom: 2px solid var(--ui-primary);
}

/* 图片舞台：固定比例，宽度自适应，点击标记按百分比定位 */
.cap-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 130px;
  overflow: hidden;
  border-radius: var(--radius-md, 10px);
  background: var(--ui-bg-sunken, var(--surface-3));
  border: 1px solid var(--ui-line-soft);
  touch-action: manipulation;
}
.cap-stage .cap-img {
  display: block;
  width: 100%;
  height: auto;
  cursor: crosshair;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}
.cap-loading {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 32px 0;
  font-size: 12.5px;
  color: var(--ui-text-mute);
}
.cap-loading.bad { color: var(--ui-danger-text); }
.cap-loading .ui-i { color: inherit; }
.cap-loading .ui-i[data-i="loader"] { animation: cap-spin .9s linear infinite; }
@keyframes cap-spin { to { transform: rotate(360deg); } }

/* 点击标记：序号圆点，命中失败时整体转红 */
.cap-mark {
  position: absolute;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ui-primary);
  color: var(--gray-900);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.075);
  pointer-events: none;
  transition: background .18s var(--ui-ease), transform .18s var(--ui-spring);
}
.cap-mark.bad { background: var(--ui-danger); transform: scale(1.08); }

/* 状态行 */
.cap-note {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 18px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ui-text-mute);
}
.cap-note.ok { color: var(--ui-success-text); }
.cap-note.err { color: var(--ui-danger-text); }
.cap-note .ui-i { flex: none; }

/* 窄屏：弹窗占满宽度，图片跟着缩，仍按百分比定位标记 */
@media (max-width: 480px) {
  .cap-modal { max-width: 100%; }
  .cap-body { padding: 14px; gap: 9px; }
  .cap-tip { font-size: 12.5px; }
  .cap-stage { min-height: 108px; }
}