/* 页面全局样式：让滑动模块垂直居中的基础 */
body {
    margin: 0;
    padding: 0;
    min-height: 100vh; /* 让body占满视口高度，为垂直居中做准备 */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    background-color: #fafbfc; /* 浅灰背景，提升层次感 */
    font-family: "Microsoft Yahei", Arial, sans-serif; /* 适配中文，视觉更舒适 */
}

/* 滑动验证整体样式：在垂直居中基础上上移17px */
.slider-verify-wrap {
    width: 360px; /* 适度加宽，更美观 */
    padding: 28px 30px;
    border: 1px solid #eef0f2; /* 浅灰边框，更柔和 */
    border-radius: 12px; /* 圆角更大，更精致 */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); /* 柔和阴影，提升立体感 */
    margin-top: -150px; /* 垂直居中后上移17px */
    -webkit-user-select: none; /* 禁止文本选中，避免干扰滑动 */
    user-select: none;
    background-color: #ffffff; /* 白色背景，突出模块 */
}

/* 标题提示 */
.slider-verify-title {
    font-size: 20px;
    color: #1f2329; /* 深灰文字，更清晰 */
    text-align: center;
    margin-bottom: 20px;
    font-weight: 600;
    letter-spacing: 0.5px; /* 文字间距，更易读 */
}

/* 滑动容器 */
.slider-container {
    width: 100%;
    height: 68px;
    background-color: #f7f8fa; /* 淡灰背景，与整体协调 */
    border-radius: 34px; /* 半圆角，与高度匹配 */
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid #eef0f2; /* 容器边框，更规整 */
}

/* 滑动背景 */
.slider-bg {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background-color: #4285f4; /* 腾讯蓝，更美观且辨识度高 */
    border-radius: 34px;
    transition: width 0.3s ease;
}

/* 滑动按钮 */
.slider-btn {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    background-color: #ffffff;
    border: 1px solid #eef0f2;
    border-radius: 50%;
    cursor: move; /* 明确拖动光标 */
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(66, 133, 244, 0.2); /* 与背景色呼应的阴影 */
    transition: left 0.3s ease, box-shadow 0.2s ease;
    pointer-events: auto; /* 确保按钮可接收事件 */
}

/* 滑块悬浮效果，提升交互感 */
.slider-btn:hover {
    box-shadow: 0 3px 12px rgba(66, 133, 244, 0.3);
}

.slider-btn::after {
    content: "→";
    font-size: 20px;
    color: #4285f4; /* 与背景色统一，视觉协调 */
    font-weight: 500;
}

/* 滑动提示文字 */
.slider-tip {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #86909c; /* 中灰文字，不刺眼 */
    z-index: 5;
    letter-spacing: 0.3px;
}

/* 验证成功提示 */
.slider-success {
    color: #34a853; /* 绿色，代表成功 */
    display: none;
    font-weight: 500;
}