/* 滑动验证组件样式 */
.slide-verify-container {
    position: relative;
    width: 100%;
    height: 40px;
    background: #f7f9fa;
    border: 1px solid #e6e8eb;
    border-radius: 4px;
    margin: 10px 0;
    user-select: none;
}

.slide-verify-slider-mask {
    position: absolute;
    left: 0;
    top: 0;
    height: 38px;
    border: 0 solid #1991fa;
    background: #d1e9fe;
    border-radius: 4px;
    transition: width 0.2s ease;
}

.slide-verify-slider-mask-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 38px;
    height: 38px;
    background: #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: left 0.2s ease;
    border-radius: 4px;
}

.slide-verify-slider-mask-item::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-left-color: #666;
    transform: translate(-50%, -50%);
}

.slide-verify-slider-mask-item:hover {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}

.slide-verify-refresh {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

.slide-verify-slider-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #45494c;
    font-size: 14px;
    white-space: nowrap;
}

.slide-verify-slider-text-success {
    color: #fff;
}

.slide-verify-success .slide-verify-slider-mask {
    width: 100% !important;
    background: #52ccba;
    border-color: #52ccba;
}

.slide-verify-success .slide-verify-slider-mask-item::before {
    content: "✓";
    border: none;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    line-height: 1;
}

.slide-verify-loading .slide-verify-slider-mask-item {
    pointer-events: none;
}

.slide-verify-loading .slide-verify-slider-mask-item::before {
    animation: spin 1s linear infinite;
    content: "";
    border: 2px solid #f3f3f3;
    border-top: 2px solid #1991fa;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.slide-verify-error {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}