/* 验证码弹窗 - 遮罩 */
.captcha-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.45);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 弹窗卡片 */
.captcha-popup {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
    width: 392px;
    padding: 24px 26px 20px 26px;
    user-select: none;
    animation: captchaIn 0.25s ease-out;
}
@keyframes captchaIn {
    from { transform: scale(0.92); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}
.captcha-popup h4 {
    font-size: 15px; color: #333; font-weight: 500;
    margin: 0 0 14px 0; text-align: center;
}
/* 目标提示 */
.captcha-prompts {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    background: #f7f8fa; border-radius: 6px; padding: 10px 12px;
    margin-bottom: 14px; flex-wrap: wrap;
}
.captcha-prompts .label { font-size: 13px; color: #888; }
.captcha-prompts .char {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 4px; font-size: 18px; font-weight: 700;
    background: #e6f0ff; color: #1a6fff; position: relative;
}
.captcha-prompts .char::after {
    content: '→'; position: absolute; right: -14px; color: #bbb; font-size: 12px; font-weight: normal;
}
.captcha-prompts .char:last-child::after { content: ''; }
.captcha-prompts .char.done { background: #e8f5e9; color: #2e7d32; transform: scale(0.95); }
/* 画布 */
.captcha-canvas-wrap {
    position: relative; border: 2px solid #e8e8e8; border-radius: 6px;
    overflow: hidden; cursor: pointer; line-height: 0; margin-bottom: 10px;
}
/* 验证码图片：div + background-image 渲染（不用 <img>，避免 360 浏览器 AI 图像工具悬浮时
   重新请求图片 URL 覆盖 session）。padding-bottom 撑出 340:160 等比例高度，兼容无 aspect-ratio 的旧浏览器 */
.captcha-canvas-wrap .captcha-img {
    width: 100%;
    height: 0;
    padding-bottom: 47.06%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    cursor: pointer;
}
.captcha-canvas-wrap.shake {
    animation: captchaShake 0.4s ease-out;
}
@keyframes captchaShake {
    0%   { transform: translateX(-5px); }
    20%  { transform: translateX(5px);  }
    40%  { transform: translateX(-4px); }
    60%  { transform: translateX(4px);  }
    80%  { transform: translateX(-2px); }
    100% { transform: translateX(0);    }
}
.captcha-canvas-wrap canvas { display: block; width: 100%; }
/* 点击标记 */
.captcha-dots {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; pointer-events: none;
}
.captcha-dot {
    position: absolute; width: 26px; height: 26px; border-radius: 50%;
    background: rgba(26,111,255,0.85); color: #fff; font-size: 13px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    transform: translate(-50%,-50%);
    animation: dotPop 0.3s ease-out;
    box-shadow: 0 2px 6px rgba(26,111,255,0.4);
    line-height: 1;
}
@keyframes dotPop {
    0%   { transform: translate(-50%,-50%) scale(1.4); opacity: 0.6; }
    100% { transform: translate(-50%,-50%) scale(1);   opacity: 1; }
}
/* 状态文字 */
.captcha-status {
    font-size: 12px; color: #999; text-align: center; margin-bottom: 10px;
}
.captcha-status.error { color: #f44336; }
.captcha-status.success { color: #4caf50; }
/* 操作按钮 */
.captcha-actions { display: flex; gap: 10px; justify-content: center; }
.captcha-btn {
    border: 1px solid #ddd; border-radius: 4px; padding: 7px 20px;
    font-size: 13px; cursor: pointer; transition: all 0.2s;
    background: #fff; color: #666; font-family: inherit;
}
.captcha-btn:hover { border-color: #1a6fff; color: #1a6fff; }
.captcha-btn.close-btn:hover { border-color: #f44336; color: #f44336; }