/* 重置容器样式 */
.wd-hsm-root {
    position: sticky !important; /* 使用 sticky 定位 */
    top: 50px !important; /* 菜单与顶部距离k */
    z-index: 500 !important;
    background: inherit !important;
    height: 36px;/* 滚动菜单高度k */
    overflow: hidden;
    margin-bottom: 0 !important;
}

/* 滚动容器 */
.wd-hsm-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    height: 100%;
    width: 100%;
    padding: 0 20px;
    scroll-behavior: smooth; /* 添加平滑滚动 */
}

.wd-hsm-scroll::-webkit-scrollbar {
    display: none;
}

/* 强制横向布局 */
.wd-hsm-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    min-width: max-content;
    list-style: none !important;
}

.wd-hsm-unit {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center;
    padding: 0 20px !important;
    height: 100%;
    border-right: 1px solid rgba(0,0,0,0.1);
}

/* 修改按钮为椭圆形并增加立体感 */
.wd-hsm-unit-link {
    white-space: nowrap !important;
    color: #000000 !important; /* 文字颜色为白色 */
    font-size: 14px;
    opacity: 0.9;
    transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s, background-color 0.2s;
    padding: 8px 16px; /* 增加内边距 */
    border-radius: 20px; /* 椭圆形 */
    background-color: #ffffff; /* 默认背景色为白色 */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* 立体阴影 */
}

.wd-hsm-unit-link:hover {
    opacity: 1;
    text-decoration: none !important;
    transform: translateY(-2px); /* 悬停时轻微上移 */
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2); /* 悬停时阴影加深 */
    background-color: #242933; /* 悬停时背景色变深 */
}

/* 按钮按下时的下陷效果 */
.wd-hsm-unit-link:active {
    transform: translateY(0); /* 取消悬停时的上移效果 */
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2) inset; /* 内阴影，模拟下陷效果 */
    background-color: #ffffff; /* 按下时背景色变为白色 */
    color: #0073aa; /* 按下时文字颜色变为蓝色 */
}

/* 移动端优化 */
@media (max-width: 768px) {
    .wd-hsm-root {
        top: 50px !important; /* 移动端 top 值，向下移动 */
        position: sticky !important; /* 保持粘性定位 */
    }
    
    .wd-hsm-unit {
        padding: 0 15px !important;
    }

    .wd-hsm-unit-link {
        padding: 6px 12px; /* 移动端减小内边距 */
    }
}