/* 验证码实时校验提示组件（对勾 / 叉号） */
.captcha-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

.captcha-live-tip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .22s ease, transform .22s ease;
    user-select: none;
}

.captcha-live-tip.is-ok,
.captcha-live-tip.is-error {
    opacity: 1;
    transform: translateX(0);
}

.captcha-live-tip.is-loading {
    opacity: .75;
    transform: translateX(0);
}

.captcha-live-tip::before {
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 50%;
    flex: 0 0 15px;
    background: #f1f5f9;
}

.captcha-live-tip.is-loading::before {
    border: 2px solid #cbd5e1;
    border-top-color: #64748b;
    background: transparent;
    animation: captcha-live-spin .7s linear infinite;
}

.captcha-live-tip svg {
    position: absolute;
    width: 15px;
    height: 15px;
    fill: #fff;
    transform: translate(-50%, 0);
    margin-left: 7.5px;
    pointer-events: none;
}

/* 对勾：绿色圆底 */
.captcha-live-tip.is-ok::before {
    background: #22a06b;
}

.captcha-live-tip.is-ok .captcha-live-text {
    color: #15803d;
}

/* 叉号：红色圆底 */
.captcha-live-tip.is-error::before {
    background: #e5484d;
}

.captcha-live-tip.is-error .captcha-live-text {
    color: #c62f2f;
}

/* 出现动画 */
.captcha-live-tip.is-anim {
    animation: captcha-live-pop .3s ease;
}

@keyframes captcha-live-spin {
    to { transform: rotate(360deg); }
}

@keyframes captcha-live-pop {
    0%   { transform: scale(.8); opacity: .4; }
    60%  { transform: scale(1.08); }
    100% { transform: scale(1); opacity: 1; }
}

/* 验证码图片抖动（失效/错误超限时提示） */
.shake {
    animation: captcha-live-shake .45s ease;
}

@keyframes captcha-live-shake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-5px); }
    40%      { transform: translateX(5px); }
    60%      { transform: translateX(-3px); }
    80%      { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
    .captcha-live-tip.is-anim,
    .shake {
        animation: none;
    }
}