/* 美化滚动条 */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }
        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 10px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        /* ---------- 原有按钮样式 (完整保留并优化去重) ---------- */
        .roll {
            position: fixed;
            z-index: 100;
            width: 30px;
            bottom: 70px;
            right: 20px;
            float: right;
        }
        .roll-top, .roll-bottom {
            position: relative;
            cursor: pointer;
            height: 30px;
            width: 30px;
            border-radius: 4px;
            background: #989898;
            opacity: 0.5;
            transition: all 0.4s ease-in-out;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .roll-top {
            margin-bottom: 7px;
        }
        /* 图标内部样式保留，确保图标居中 */
        .roll-top i, .roll-bottom i {
            line-height: 1;
        }
        /* hover 效果 */
        .roll-top:hover, .roll-bottom:hover {
            background: #767676;
            opacity: 0.6;
        }
        /* 智能隐藏类: 视觉消失 + 禁止交互，保留占位避免布局移动 */
        .roll-top.hide-btn, .roll-bottom.hide-btn {
            opacity: 0 !important;
            pointer-events: none !important;
            cursor: default;
        }
        /* 响应式: 宽度 >= 840px 时的特殊定位 (保留原设计) */
        @media screen and (min-width: 840px) {
            .roll {
                left: calc(100% - 51%);
                margin-left: 400px;
                bottom: 70px;
                right: 20px;
                width: 30px;
            }
        }
        /* 超宽屏适配 (原规则) */
        @media screen and (min-width: 1920px) {
            .roll {
                left: calc(100% - 51%);
                margin-left: 510px;
            }
        }
        /* 移动端 (宽度 <= 839px) 原样式 */
        @media screen and (max-width: 839px) {
            .roll {
                bottom: 10px;
                right: 10px;
                width: 30px;
                left: auto;
                margin-left: 0;
            }
        }