/* 滑块验证码样式（仅使用 .simple-slider） */
.simple-slider {
    position: relative;
    width: 320px;
    max-width: 100%;
    margin: 10px auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif
}

/* 当嵌入在表单的 .slider-captcha-wrapper 中时，自适应占满父宽度 */
.slider-captcha-wrapper .simple-slider {
    width: 100%;
    margin: 6px 0
}

/* 登录/注册页容器，窄版居中以贴合表单 */
.auth-wrap {
    max-width: 450px;
    margin: 8px auto;
    padding: 0 0px
}

.auth-wrap .spa-card {
    box-sizing: border-box
}

.auth-wrap .spa-card .spa-card-body {
    padding: 12px
}

.auth-wrap .slider-captcha-wrapper {
    margin: 6px 0
}


/* 强制覆盖全局 .spa-form/.simple-slider 的 max-width 限制，确保在 auth-wrap 中填满 */
.auth-wrap .spa-form {
    max-width: none !important;
    width: 100% !important
}

.auth-wrap .slider-captcha-wrapper {
    width: 100% !important;
    display: block
}

.auth-wrap .simple-slider {
    width: 100% !important;
    max-width: none !important;
    margin: 6px 0
}

.auth-wrap .simple-slider .sc-track.sc-simple {
    width: 100% !important
}

@media (max-width:480px) {
    .simple-slider {
        width: 100%
    }

    .simple-slider .sc-thumb {
        width: 44px;
        height: 40px
    }

    .simple-slider .sc-track {
        height: 40px
    }
}

/* 简单滑动验证样式 */
.simple-slider .sc-track.sc-simple {
    position: relative;
    height: 42px;
    border-radius: 8px;
    background: #f3f5f7;
    border: 1px solid #d0d5dd;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
    display: flex;
    align-items: center;
}

.simple-slider .sc-track.sc-simple .sc-thumb {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    width: 48px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    margin-top: 0;
    color: #555;
    background: #fff;
    border: 1px solid #c9ced6;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
    cursor: grab;
    transition: box-shadow .2s, background .3s, color .3s;
}

/* 字符细调：通过内部 span 微调 - 针对某些字体 "»" 视觉下沉 */
.simple-slider.dragging .sc-thumb {
    cursor: grabbing;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
}

.simple-slider.success .sc-thumb {
    background: #16a34a;
    color: #fff;
    border-color: #15803d;
}

.simple-slider.error .sc-thumb {
    background: #dc2626;
    color: #fff;
    border-color: #b91c1c;
}

.simple-slider .sc-progress {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, #4f46e5 0%, #6366f1 40%, #8b5cf6 70%, #a855f7 100%);
    opacity: .15;
    pointer-events: none;
    transition: width .05s linear, opacity .3s;
}

.simple-slider.success .sc-progress {
    background: linear-gradient(90deg, #16a34a, #22c55e);
    opacity: .25;
}

.simple-slider.error .sc-progress {
    background: linear-gradient(90deg, #dc2626, #f87171);
    opacity: .25;
}

.simple-slider .sc-hint {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #8592a6;
    pointer-events: none;
    transition: opacity .3s;
}

.simple-slider.success .sc-hint {
    opacity: 1 !important;
    color: #15803d;
    font-weight: 600
}

.simple-slider.error .sc-hint {
    opacity: 0
}

/* 光影流动效果 */
.simple-slider .sc-shimmer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.simple-slider .sc-shimmer:before {
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .65) 50%, rgba(255, 255, 255, 0) 100%);
    animation: scShimmer 2.2s linear infinite;
}

@keyframes scShimmer {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(300%);
    }
}

/* success 动态呼吸边框 */
.simple-slider.success .sc-track.sc-simple {
    border-color: #16a34a;
    animation: scGlow 2.4s ease-in-out infinite;
}

@keyframes scGlow {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.35);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
    }
}

.simple-slider.error .sc-track.sc-simple {
    border-color: #dc2626;
}

.simple-slider .sc-msg {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* 成功后锁定与动画 */
.simple-slider.success .sc-thumb {
    pointer-events: none;
    cursor: default;
    animation: scThumbSuccess .55s ease-in-out;
}

@keyframes scThumbSuccess {
    0% {
        transform: translate(var(--sc-final-x, 0), -50%) scale(1) rotate(0deg);
    }

    40% {
        transform: translate(var(--sc-final-x, 0), -50%) scale(1.14) rotate(8deg);
    }

    70% {
        transform: translate(var(--sc-final-x, 0), -50%) scale(0.96) rotate(-4deg);
    }

    100% {
        transform: translate(var(--sc-final-x, 0), -50%) scale(1) rotate(0deg);
    }
}

/* 失败震动 */
.simple-slider.fail-shake .sc-track {
    animation: scShake .5s ease;
}

@keyframes scShake {

    0%,
    100% {
        transform: translateX(0);
    }

    15% {
        transform: translateX(-3px);
    }

    30% {
        transform: translateX(3px);
    }

    45% {
        transform: translateX(-2px);
    }

    60% {
        transform: translateX(2px);
    }

    75% {
        transform: translateX(-1px);
    }

    90% {
        transform: translateX(1px);
    }
}

/* 回位过渡（加长时长使回位更自然） */
.simple-slider.returning .sc-thumb {
    transition: transform .6s cubic-bezier(.22, .8, .2, 1);
}

.simple-slider.returning .sc-progress {
    transition: width .6s cubic-bezier(.22, .8, .2, 1);
}

/* 失败时短暂红色高亮 */
.simple-slider.fail-shake .sc-track.sc-simple {
    border-color: #ef4444;
    box-shadow: inset 0 0 0 1px #f87171;
}

/* 图层顺序：进度（最底） -> 文本提示 -> 光影 -> 滑块（最上） */
.simple-slider .sc-progress {
    z-index: 0
}

.simple-slider .sc-hint {
    z-index: 1;
    pointer-events: none
}

.simple-slider .sc-shimmer {
    z-index: 2
}

.simple-slider .sc-thumb {
    z-index: 3
}