/* 滑动验证容器 */
.slide-box {
    width: 320px;
    height: 160px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    position: relative;
    margin: 20px 0;
    overflow: hidden;
    background-color: #f8f8f8;
}

/* 背景层 */
.slide-bg {
    width: 100%;
    height: 100%;
    position: relative;
}

/* 缺口样式（与滑块完全一致） */
.slide-hole {
    position: absolute;
    border: 2px solid #fff;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
    z-index: 5;
    /* 缺口镂空效果 */
    box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.25);
}

/* 滑块样式（固定尺寸） */
.slide-block {
    position: absolute;
    border-radius: 4px;
    background-color: #409eff;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
    cursor: grab;
    z-index: 10;
    /* 禁止选中 */
    user-select: none;
    -webkit-user-select: none;
}

.slide-block:active {
    cursor: grabbing;
    background-color: #3393e8;
}



/* 进度条 */
.slide-progress {
    height: 0;
    background-color: #409eff;
    border-radius: 3px;
    width: 0;
    transition: width 0.1s linear;
}

/* 噪点 */
.noise-point {
    position: absolute;
    background-color: #dcdcdc;
    border-radius: 50%;
    z-index: 3;
}

/* 提示信息 */
.slide-msg {
    font-size: 14px;
    color: #f56c6c;
    margin-top: 10px;
    line-height: 1.5;
}

.slide-msg.green {
    color: #67c23a;
}

/* 滑块基础样式（保留flex居中，为对号做准备） */
#slideBlock {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: #409eff;
    cursor: pointer;
    z-index: 10;
    user-select: none;
    /* 核心：强制居中（对号和箭头都居中） */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* 验证前：显示居中箭头（保留原有箭头样式，仅改居中） */
#slideBlock::after {
    content: "▶";
    /* 箭头符号 */
    color: white;
    font-size: 16px;
    /* 箭头居中（覆盖原有定位） */
    position: static !important;
    transform: none !important;
}

/* 验证成功：隐藏箭头 + 显示居中对号 */
#slideBlock.success {
    background-color: #4CAF50;
    cursor: default;
    /* 清空滑块内默认内容，确保对号纯显示 */
    content: "" !important;
}

/* 验证成功：隐藏箭头伪元素 + 显示对号 */
#slideBlock.success::after {
    content: "✓" !important;
    /* 替换为对号 */
    font-size: 20px;
    color: white;
    font-weight: bold;
    /* 对号居中 */
    position: static !important;
    transform: none !important;
}