/* 点选验证码组件样式（cc- 前缀，避免与宿主项目冲突） */
.cc-root,
.cc-mask {
  --cc-pri: #10b981;
  --cc-pri-d: #0d9488;
  --cc-pri-l: #d1fae5;
  --cc-txt: #1f2937;
  --cc-sub: #667085;
  --cc-faint: #98a2b3;
  --cc-line: #e4e7ec;
  --cc-bad: #ef4444;
  --cc-bad-l: #fef2f2;
  font-family: inherit;
  color: var(--cc-txt);
}

.cc-box {
  padding: 14px;
  border: 1px solid var(--cc-line);
  border-radius: 12px;
  background: #fafbfc;
}

/* ---------- 提示行 ---------- */
.cc-tip {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--cc-txt);
  margin-bottom: 10px;
}
.cc-label {
  background: var(--cc-pri-l); color: var(--cc-pri-d);
  padding: 2px 8px; border-radius: 6px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.cc-words { font-weight: 700; color: var(--cc-pri-d); letter-spacing: 3px; }

/* 撤销图标 */
.cc-undo {
  position: relative; margin-left: auto; flex: 0 0 auto; z-index: 20;
  width: 28px; height: 28px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #d0d5dd; border-radius: 8px;
  background: #fff; color: var(--cc-txt);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(16, 24, 40, .16);
  transition: background .15s, color .15s, border-color .15s;
}
.cc-undo svg { width: 16px; height: 16px; stroke-width: 2.4; }
.cc-undo:hover:not(:disabled) { background: var(--cc-pri-l); color: var(--cc-pri-d); border-color: transparent; }
.cc-undo:disabled { color: var(--cc-faint); cursor: not-allowed; box-shadow: none; }
.cc-undo::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 8px); right: 0;
  padding: 5px 10px; border-radius: 7px;
  background: #1f2937; color: #fff;
  font-size: 12px; font-weight: 500; line-height: 1.5; white-space: nowrap;
  box-shadow: 0 8px 20px rgba(16, 24, 40, .28);
  opacity: 0; transform: translateY(-2px); pointer-events: none;
  transition: opacity .15s, transform .15s;
}
.cc-undo:hover::after { opacity: 1; transform: translateY(0); }

/* ---------- 图片与点击标记 ---------- */
.cc-wrap {
  position: relative;
  width: 300px; height: 150px;
  margin: 0 auto;
  border-radius: 8px; overflow: hidden;
  cursor: crosshair;
  user-select: none;
  -webkit-user-drag: none;
}
.cc-wrap img { width: 100%; height: 100%; display: block; -webkit-user-drag: none; }
.cc-wrap.cc-loading::after {
  content: '加载中…';
  position: absolute; inset: 0; background: rgba(255, 255, 255, .85);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--cc-sub);
}
.cc-points { position: absolute; inset: 0; pointer-events: none; }
.cc-point {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(239, 68, 68, .85);
  color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(239, 68, 68, .5);
  border: 2px solid #fff;
}
.cc-point.cc-new { animation: cc-pop .18s ease-out; }
@keyframes cc-pop {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* ---------- 底部操作 ---------- */
.cc-actions {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px; font-size: 12px; color: var(--cc-sub);
}
.cc-state { font-weight: 600; }
.cc-state .cc-done { color: var(--cc-pri-d); }
.cc-state .cc-total { color: var(--cc-faint); }
.cc-refresh {
  border: none; background: none; padding: 0;
  font-size: 12px; color: var(--cc-sub); cursor: pointer;
  border-bottom: 1px dashed var(--cc-line);
}
.cc-refresh:hover { color: var(--cc-pri-d); border-bottom-color: var(--cc-pri-d); }

/* ---------- 弹窗 ---------- */
.cc-mask {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(15, 23, 42, .45);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: cc-fade .15s ease-out;
}
.cc-mask[hidden] { display: none; }
.cc-modal {
  position: relative;
  width: 380px; max-width: 100%;
  background: #fff; border-radius: 18px;
  padding: 20px 22px 18px;
  box-shadow: 0 24px 60px rgba(16, 24, 40, .28);
  animation: cc-modal-in .18s ease-out;
}
.cc-modal-head { margin-bottom: 14px; }
.cc-modal-title { font-size: 15px; font-weight: 700; }
.cc-modal-body .cc-box { margin-top: 0; }
.cc-modal-foot { display: flex; margin-top: 16px; }
.cc-ok {
  flex: 1; padding: 9px 0; border: none; border-radius: 9px;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  color: #fff; background: linear-gradient(135deg, #10b981, #0d9488);
  transition: opacity .15s;
}
.cc-ok:disabled { opacity: .45; cursor: not-allowed; }
.cc-msg { min-height: 18px; margin-top: 10px; text-align: center; font-size: 12.5px; color: var(--cc-bad); }

/* 结果动画层（z-index 需高于 .cc-undo，确保盖住撤销图标） */
.cc-result {
  position: absolute; inset: 0; z-index: 50;
  border-radius: 18px;
  background: rgba(255, 255, 255, .97);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  animation: cc-fade .15s ease-out;
}
.cc-result[hidden] { display: none; }
.cc-result-icon {
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.cc-result-icon svg { width: 30px; height: 30px; }
.cc-result-icon.cc-ok-icon { background: var(--cc-pri-l); color: var(--cc-pri-d); animation: cc-pop-icon .35s cubic-bezier(.34, 1.56, .64, 1); }
.cc-result-icon.cc-ok-icon svg path {
  stroke-dasharray: 34; stroke-dashoffset: 34;
  animation: cc-draw .35s .08s ease-out forwards;
}
.cc-result-icon.cc-err { background: var(--cc-bad-l); color: var(--cc-bad); animation: cc-err-in .5s ease-out; }
.cc-result-text { font-size: 14px; font-weight: 600; }

@keyframes cc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cc-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes cc-pop-icon {
  0% { transform: scale(.5); opacity: .4; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes cc-draw { to { stroke-dashoffset: 0; } }
@keyframes cc-err-in {
  0% { transform: scale(.6); opacity: .5; }
  30% { transform: scale(1) translateX(-5px); opacity: 1; }
  50% { transform: translateX(5px); }
  70% { transform: translateX(-3px); }
  100% { transform: none; }
}