body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* 防止水平滚动 */
    user-select: none; /* 防止文本选择 */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
}

.container {
    width: 310px;
    margin: 100px auto;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

#msg {
    width: 100%;
    line-height: 40px;
    font-size: 14px;
    text-align: center;
    margin-bottom: 15px;
}

/*a:link,*/
/*a:visited,*/
/*a:hover,*/
/*a:active {*/
/*    margin-left: 100px;*/
/*    color: #0366D6;*/
/*}*/

.block {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    border-radius: 5px;
}

.sliderContainer {
    position: relative;
    text-align: center;
    width: 270px;
    height: 40px;
    line-height: 40px;
    margin-top: 15px;
    background: #f7f9fa;
    color: #45494c;
    border: 1px solid #e4e7eb;
    border-radius: 4px;
    overflow: hidden; /* 防止内容溢出 */
    box-sizing: border-box; /* 包含边框在宽度内 */
}

/* 默认状态 - 显示sliderText */
.sliderContainer .sliderText {
    display: block;
    position: absolute;
    width: 100%;
    z-index: 1;
}

/* 激活状态 - 隐藏所有文字 */
.sliderContainer_active .sliderText,
.sliderContainer_active::before,
.sliderContainer_active::after {
    display: none;
}

/* 成功状态 - 显示成功文字 */
.sliderContainer_success .sliderText {
    display: none;
}

/* 在成功状态下添加伪元素显示成功文字 */
.sliderContainer_success::before {
    content: "验证成功";
    display: block;
    position: absolute;
    width: 100%;
    z-index: 1;
    color: #52CCBA;
    font-weight: bold;
}

/* 失败状态 - 显示失败文字 */
.sliderContainer_fail .sliderText {
    display: none;
}

/* 在失败状态下添加伪元素显示失败文字 */
.sliderContainer_fail::before {
    content: "验证失败";
    display: block;
    position: absolute;
    width: 100%;
    z-index: 1;
    color: #f57a7a;
    font-weight: bold;
}

.sliderContainer_active .slider {
    height: 38px;
    /*top: -1px;*/
    border: 1px solid #1991FA;
    background: #1991FA;
}

.sliderContainer_active .sliderMask {
    height: 38px;
    border-width: 1px;
}

.sliderContainer_success .slider {
    height: 38px;
    top: -1px;
    border: 1px solid #52CCBA;
    background-color: #52CCBA !important;
}

.sliderContainer_success .sliderMask {
    height: 38px;
    /*border: 1px solid #52CCBA;*/
    background-color: #D2F4EF;
}

.sliderContainer_success .sliderIcon {
    background-position: 0 0 !important;
}

.sliderContainer_fail .slider {
    height: 38px;
    top: -1px;
    /*border: 1px solid #f57a7a;*/
    background-color: #f57a7a !important;
}

.sliderContainer_fail .sliderMask {
    height: 38px;
    /*border: 1px solid #f57a7a;*/
    background-color: #fce1e1;
}

.sliderContainer_fail .sliderIcon {
    background-position: 0 -83px !important;
}

.sliderMask {
    position: absolute;
    left: 0;
    top: 0;
    height: 40px;
    /*border: 0 solid #1991FA;*/
    background: #D1E9FE;
    border-radius: 4px;
}

.slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    background: #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: background .2s linear;
    border-radius: 4px;
    z-index: 100; /* 确保在最上层 */
}

.slider:hover {
    background: #1991FA;
}

.slider:hover .sliderIcon {
    background-position: 0 -13px;
}

.sliderIcon {
    position: absolute;
    top: 15px;
    left: 13px;
    width: 14px;
    height: 10px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAkCAYAAAD5OA6mAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHlSURBVFhHzZg9SwNBEIbv4tVHUlgbG7ERJIWIvT9A0B9go42FICgW/oNbiD/ARkEhVhaX2IgXQ4yYQhEJiCGamPj1wuXuc+5lLn5kcV6Yu8vL7u7MbGamCq/Vahp5M1q37epWus/8EdfgBqyDa/AADoFn8ASewC4oYRC8e0m/tCzzpgm0ihlwHYyfF+wGLWN7HszGEhGjYB6kf0YJc8g8kXVCRCi8AN3jCXfGFUJ1COoXgqtzx4SQhRfQu8DXeyKrFey9gN5x0yWTHVGO6B0Xdm4GQv8F9I6LljujGGkAU+oTeL0ntNe2eMNGLSvY27g2nQzb4jJ5Z11f1CvUSWYJvIIU28N0Uq2/36n4i47fJ+8sj7k+Qv8CpRdy52hG2sE0SJ/ZrGFF9B3wnbwzT0ofhZ/BO0g1PS0rK5pF73nOrqgD8yD/t/8bG6Lf83z/K+6TE92y3cJT9C9QeqPUG1vzX9mJ9CJ/mRGauoSWttz2jmXpjQyxVkR7nBGRrrpUoF0q5s4NzIhIF70jogqV21+hLZ4WmXqFw+dAqRjZAl+BGmSC8SLSVbMj0nmhxTvzKFQo7gQ3wRfQFVYz0aPzOaj0iM4nUT3yA9k1zIXVpBhJnCvIm6FJdGY2dF+oIJ1mNv8cEcqqnRlRzBUVmh3xJ5U2s0rLkXRGtOoVHyKTZL8TqtRMk8p0Y07w/8yI7J8AFI3n/H0fdlEAAAAASUVORK5CYII=) 0 -26px;
    background-size: 34px 471px;
}

.refreshIcon {
    position: absolute;
    right: 0;
    top: 0;
    width: 34px;
    height: 34px;
    cursor: pointer;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAkCAYAAAD5OA6mAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHhSURBVFhHzZg9SwNBEIbv4tVHUlgbG7ERJIWIvt9A0B9go42FICgW/oNbiD/ARkEhVhaX2IgXQ4yYQhEJiCGamPj1wuXuc+5lLn5kcV6Yu8vL7u7MbGamCq/Vahp5M1q37epWus/8EdfgBqyDa/AADoFn8ASewC4oYRC8e0m/tCzzpgm0ihlwHYyfF+wGLWN7HszGEhGjYB6kf0YJc8g8kXVCRCi8AN3jCXfGFUJ1COoXgqtzx4SQhRfQu8DXeyKrFey9gN5x0yWTHVGO6B0Xdm4GQv8F9I6LljujGGkAU+oTeL0ntNe2eMNGLSvY27g2nQzb4jJ5Z11f1CvUSWYJvIIU28N0Uq2/36n4i47fJ+8sj7k+Qv8CpRdy52hG2sE0SJ/ZrGFF9B3wnbwzT0ofhZ/BO0g1PS0rK5pF73nOrqgD8yD/t/8bG6Lf83z/K+6TE92y3cJT9C9QeqPUG1vzX9mJ9CJ/mRGauoSWttz2jmXpjQyxVkR7nBGRrrpUoF0q5s4NzIhIF70jogqV21+hLZ4WmXqFw+dAqRjZAl+BGmSC8SLSVbMj0nmhxTvzKFQo7gQ3wRfQFVYz0aPzOaj0iM4nUT3yA9k1zIXVpBhJnCvIm6FJdGY2dF+oIJ1mNv8cEcqqnRlRzBUVmh3xJ5U2s0rLkXRGtOoVHyKTZL8TqtRMk8p0Y07w/8yI7J8AFI3n/H0fdlEAAAAASUVORK5CYII=) 0 -437px;
    background-size: 34px 471px;
}

/* 添加移动设备支持 */
@media (max-width: 768px) {
    .container {
        margin: 50px auto;
        width: 90%;
        max-width: 310px;
    }

    .sliderContainer {
        width: 270px;
    }

    body {
        touch-action: pan-y; /* 只允许垂直滚动 */
    }
}

/* 防止图片选择 */
img {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* 添加加载动画 */
.loading {
    animation: rotate 1s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/*遮罩层*/
.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    z-index: 1000;
    animation: fadeIn 0.3s ease;
}
.mask-content {
    margin-top: 240px;
}