/* 图形验证码前端组件样式 */
.sc-wrap { font-family: -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif; display: inline-block; }

.sc-box {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #eef2f7;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.sc-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.sc-piece {
  position: absolute;
  cursor: grab;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.45));
  transition: filter .15s;
}
.sc-piece:active { cursor: grabbing; }
.sc-box.ok .sc-piece { filter: drop-shadow(0 0 6px rgba(34,197,94,.9)); }
.sc-box.fail { animation: sc-shake .4s; }
.sc-box.fail .sc-piece { filter: drop-shadow(0 0 6px rgba(239,68,68,.9)); }

.sc-tip {
  position: absolute; left: 0; right: 0; bottom: 8px;
  text-align: center; font-size: 12px; color: rgba(255,255,255,.85);
  text-shadow: 0 1px 2px rgba(0,0,0,.6); pointer-events: none;
}
.sc-box.ok .sc-tip, .sc-box.fail .sc-tip { display: none; }

.sc-loading, .sc-error {
  display: flex; align-items: center; justify-content: center;
  color: #64748b; font-size: 13px;
}

.sc-msg { margin-top: 10px; font-size: 13px; min-height: 20px; text-align: center; }
.sc-msg.ok { color: #16a34a; }
.sc-msg.fail { color: #dc2626; }

.sc-toolbar { margin-top: 10px; display: flex; gap: 8px; justify-content: center; }
.sc-btn {
  padding: 6px 14px; border: 1px solid #cbd5e1; background: #fff; border-radius: 6px;
  font-size: 12px; cursor: pointer; color: #475569; transition: .15s;
}
.sc-btn:hover { background: #f1f5f9; }
.sc-btn.primary { background: #3b82f6; color: #fff; border-color: #3b82f6; }
.sc-btn.primary:hover { background: #2563eb; }

.sc-ticket {
  margin-top: 10px; padding: 8px 10px; background: #f0fdf4; border: 1px solid #bbf7d0;
  border-radius: 6px; font-size: 11px; color: #166534; word-break: break-all; display: none;
}

@keyframes sc-shake {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-6px); }
  40%,80% { transform: translateX(6px); }
}