/* 美化底部导航 - 现代化设计 - 强制覆盖其他样式 */
html body .sc-EHOje.guIOEz,
html body .guIOEz,
html body #force-bottom-nav.guIOEz,
html body #force-bottom-nav.sc-EHOje.guIOEz {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 9999 !important;
    height: 56px !important; /* 增加高度使导航更舒适 */
    width: 100% !important;
    background-color: #ffffff !important;
    box-shadow: 0 -3px 16px rgba(0, 0, 0, 0.08) !important; /* 更柔和的阴影 */
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    border-top-left-radius: 16px !important; /* 圆角 */
    border-top-right-radius: 16px !important;
    transition: all 0.3s ease !important; /* 平滑过渡效果 */
}

/* 底部导航各项样式 */
html body .sc-EHOje.guIOEz a.shortcut,
html body .guIOEz a.shortcut,
html body #force-bottom-nav a.shortcut {
    display: flex !important; /* 使用flex布局 */
    flex-direction: column !important; /* 垂直排列图标和文字 */
    justify-content: center !important; /* 垂直居中 */
    align-items: center !important; /* 水平居中 */
    flex: 1 !important;
    text-decoration: none !important;
    height: 100% !important; /* 填满整个高度 */
    margin-top: 0 !important; /* 移除顶部间距 */
    background-size: auto 38% !important;
    background-position: center 25% !important;
    background-repeat: no-repeat !important;
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
    transition: all 0.2s ease !important; /* 添加过渡效果 */
    padding: 6px 0 !important;
    color: #8a94a7 !important; /* 默认颜色 */
}

/* 移除原始样式中可能干扰的部分 */
html body .sc-EHOje.guIOEz:before,
html body .guIOEz:before,
html body #force-bottom-nav:before {
    content: none !important;
    display: none !important;
}

/* 当前激活项样式 */
html body .sc-EHOje.guIOEz a.shortcut.active,
html body .guIOEz a.shortcut.active,
html body #force-bottom-nav a.shortcut.active {
    color: #3471bb !important; /* 激活状态的颜色 */
    background-size: auto 42% !important; /* 略微放大图标 */
}

/* 点击效果 */
html body .sc-EHOje.guIOEz a.shortcut:active,
html body .guIOEz a.shortcut:active,
html body #force-bottom-nav a.shortcut:active {
    transform: scale(0.95) !important; /* 点击时缩小效果 */
}

/* 导航文字样式 */
html body .sc-EHOje.guIOEz a.shortcut span,
html body .guIOEz a.shortcut span,
html body #force-bottom-nav a.shortcut span {
    position: absolute !important;
    font-size: 12px !important; /* 更大更清晰的字体 */
    font-weight: 500 !important; /* 半粗体 */
    left: 0 !important;
    right: 0 !important;
    bottom: 10px !important;
    text-align: center !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 为每个图标添加小徽章的基础样式 */
html body .sc-EHOje.guIOEz a.shortcut::before,
html body .guIOEz a.shortcut::before,
html body #force-bottom-nav a.shortcut::before {
    content: "" !important;
    position: absolute !important;
    top: 8px !important;
    right: 50% !important;
    transform: translateX(12px) !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background-color: transparent !important; /* 默认透明 */
    transition: all 0.3s !important;
    opacity: 0 !important;
}

/* 为底部导航腾出空间 */
html body .anim_app,
html body .dizAbS .anim_app,
html body .home,
html body #root {
    padding-bottom: 56px !important; /* 匹配导航高度 */
    margin-bottom: 0 !important;
}

/* 清除其他可能影响底部导航的样式 */
html body .sc-bZQynM.OQRyf {
    padding-bottom: 56px !important;
    margin-bottom: 0 !important;
}

html body .scroll-wrapper-home {
    padding-bottom: 56px !important;
}

/* 确保底部导航正确显示，即使在有侧边导航的页面 */
html body .container {
    margin-bottom: 56px !important;
}

/* 处理可能的z-index层叠问题 */
html body .sc-gzVnrw.flXAPw, 
html body .sc-bZQynM.OQRyf, 
html body .side-navigation, 
html body .content-area {
    z-index: 1 !important;
}

/* 强制底部导航显示 */
html body > .guIOEz,
html body #root .guIOEz,
html body .home .guIOEz {
   display: flex !important;
   visibility: visible !important;
   opacity: 1 !important;
} 

/* 自定义导航项的图标颜色 */
html body .sc-EHOje.guIOEz a.shortcut.bet,
html body .guIOEz a.shortcut.bet,
html body #force-bottom-nav a.shortcut.bet {
    background-image: url(/mobile3/images/touzhu.png) !important;
    background-position: center 20% !important;
}

html body .sc-EHOje.guIOEz a.shortcut.result,
html body .guIOEz a.shortcut.result,
html body #force-bottom-nav a.shortcut.result {
    background-image: url(/mobile3/images/jilu.png) !important;
    background-position: center 20% !important;
}

html body .sc-EHOje.guIOEz a.shortcut.stats,
html body .guIOEz a.shortcut.stats,
html body #force-bottom-nav a.shortcut.stats {
    background-image: url(/mobile3/images/weijie.png) !important;
    background-position: center 20% !important;
}

html body .sc-EHOje.guIOEz a.shortcut.deposit,
html body .guIOEz a.shortcut.deposit,
html body #force-bottom-nav a.shortcut.deposit {
    background-image: url(/mobile3/images/yijie.png) !important;
    background-position: center 20% !important;
}

html body .sc-EHOje.guIOEz a.shortcut.service,
html body .guIOEz a.shortcut.service,
html body #force-bottom-nav a.shortcut.service {
    background-image: url(/mobile3/images/kefu.png) !important;
    background-position: center 20% !important;
}

/* 添加波纹效果 */
html body .sc-EHOje.guIOEz a.shortcut::after,
html body .guIOEz a.shortcut::after,
html body #force-bottom-nav a.shortcut::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    background: rgba(52, 113, 187, 0.1) !important;
    border-radius: 50% !important;
    transform: translate(-50%, -50%) !important;
    opacity: 0 !important;
    transition: all 0.5s !important;
}

html body .sc-EHOje.guIOEz a.shortcut:active::after,
html body .guIOEz a.shortcut:active::after,
html body #force-bottom-nav a.shortcut:active::after {
    width: 60px !important;
    height: 60px !important;
    opacity: 1 !important;
}

/* 适配暗色模式 */
@media (prefers-color-scheme: dark) {
    html body .sc-EHOje.guIOEz,
    html body .guIOEz,
    html body #force-bottom-nav {
        background-color: #1f2937 !important;
        box-shadow: 0 -3px 16px rgba(0, 0, 0, 0.2) !important;
    }
    
    html body .sc-EHOje.guIOEz a.shortcut,
    html body .guIOEz a.shortcut,
    html body #force-bottom-nav a.shortcut {
        color: #9ca3af !important;
    }
    
    html body .sc-EHOje.guIOEz a.shortcut.active,
    html body .guIOEz a.shortcut.active,
    html body #force-bottom-nav a.shortcut.active {
        color: #60a5fa !important;
    }
} 

/* 修复导航 */
.sc-EHOje.guIOEz {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 999 !important;
    height: 46px !important;
    background-color: #fff !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05) !important;
}

/* 移除轮播图顶部间隔 */
.home-header {
    margin: 0 !important;
    padding: 0 !important;
}

.rough_lines {
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: none !important;
}

#slide.container-fluid.slide {
    margin: 0 !important; 
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
}

#slide.container-fluid.slide ul.bd {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

#slide.container-fluid.slide li {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
}

.carousel-inner {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: top !important;
}

/* 处理可能存在的空白元素 */
.home-header + *, .rough_lines + * {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 强制移除所有可能导致间隙的元素 */
.flXAPw .home-header:after,
.flXAPw .home-header:before,
.rough_lines:before,
.rough_lines:after,
.scroll-wrapper-home:before,
.scroll-wrapper-home:after {
    content: none !important;
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}