.tip-bar {
            background-color: #fff3cd;
            color: #856404;
            padding: 12px 15px;
            border-radius: 4px;
            margin-bottom: 25px;
            font-size: 14px;
            border: 1px solid #ffeeba;
            line-height: 1.6;
        }
        .hamburger {
            display: block; 
            cursor: pointer;
            padding: 10px;
            z-index: 10000;
        }

        .hamburger span {
            display: block;
            width: 20px;
            height: 2px;
            background-color: #333;
            margin: 4px 0;
            transition: 0.3s;
        }

        .hamburger.active span:nth-child(1) {
            transform: rotate(-45deg) translate(-5px, 6px);
        }

        .hamburger.active span:nth-child(2) {
            opacity: 0;
        }

        .hamburger.active span:nth-child(3) {
            transform: rotate(45deg) translate(-5px, -6px);
        }

        /* 遮罩层 */
        .mask {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9998;
            display: none;
        }

        .mask.show {
            display: block;
        }

        /* 左侧导航新样式 */
        .sidebar {
            position: fixed;
            top: 60px;
            left: 0;
            width: 220px;
            background-color: #fff;
            border-right: 1px solid #eee;
            padding: 10px 0;
            height: calc(100vh - 60px);
            overflow-y: auto;
            overflow-x: hidden;
            scrollbar-width: thin;
            scrollbar-color: #ddd #f5f5f5;
            z-index: 9999;
            transition: transform 0.3s ease;
        }

        /* 移动端侧边栏样式 */
        @media (max-width: 767px) {
            .sidebar {
                transform: translateX(-100%);
            }
            
            .sidebar.show {
                transform: translateX(0);
            }
        }

        /* 桌面端侧边栏样式 */
        @media (min-width: 768px) {
            .sidebar {
                transform: translateX(0);
            }
            
            .main-content {
                margin-left: 220px;
            }
            
            .sidebar.hide-on-desktop {
                transform: translateX(-100%);
            }
            
            .sidebar.hide-on-desktop + .main-content {
                margin-left: 0;
            }
        }

        /* 自定义滚动条样式 - Chrome/Safari/Edge */
        .sidebar::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        .sidebar::-webkit-scrollbar-track {
            background: #f5f5f5;
            border-radius: 3px;
        }

        .sidebar::-webkit-scrollbar-thumb {
            background: #ddd;
            border-radius: 3px;
        }

        .sidebar::-webkit-scrollbar-thumb:hover {
            background: #bbb;
        }

        .menu-item {
            padding: 12px 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            font-size: 14px;
            color: #333;
            padding-left: 25px;
            border-left: 3px solid transparent;
            transition: all 0.2s ease;
        }

        .menu-item:hover {
            background-color: #f5f5f5;
            color: #222;
        }

        .menu-item.active {
            color: #020202;
            font-weight: 500;
            box-shadow: 0 2px 4px rgba(24, 144, 255, 0.1);
        }

        .submenu {
            background-color: #fafafa;
            max-height: 1000px;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }

        .submenu.collapsed {
            max-height: 0;
        }

        .submenu-item {
            display: block;
            padding: 10px 15px;
            padding-left: 45px;
            font-size: 13px;
            color: #666;
            cursor: pointer;
            transition: all 0.2s ease;
            text-decoration: none;
        }

        .submenu-item:hover {
            background-color: #f0f0f0;
            color: #333;
        }

        .submenu-item.active {
            color: #2ba471;
            font-weight: 600;
            background-color: #d0e9ff;
            border-radius: 4px;
        }

        .icon {
            margin-right: 8px;
            font-size: 19px;
            color: #000;
            font-family: "Arial", sans-serif;
        }

        .menu-item.active .icon {
            color: #0084ff;
        }

        .arrow {
            font-size: 11px;
            color: #666;
            font-family: "Arial";
            font-weight: 300;
            line-height: 1;
            position: relative;
            top: 0px;
            transition: transform 0.2s ease;
        }

        .arrow.rotated {
            transform: rotate(-90deg);
        }

        .menu-item.active .arrow {
            color: #1890ff;
        }
        
        .main-content {
            margin-top: 60px;
            padding: 20px;
            transition: margin-left 0.3s ease;
        }

.div-logo {
    cursor: pointer;
}
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.div-logo-img {
    width: 24px;
    height: 24px;
}
.div-logo-title-t {
    margin-left: var(--td-comp-margin-s);
    font-size: 18px;
    font-weight: 700;
}
        /* 头部导航容器 - 固定定位 */
        .header-nav {
            position: fixed; /* 固定定位，不随滚动移动 */
            top: 0; /* 固定在页面顶部 */
            left: 0; /* 从页面左侧开始 */
            right: 0; /* 延伸到页面右侧 */
            z-index: 9999; /* 确保导航栏在最上层 */
            background-color: #ffffff;
            padding: 12px 15px; /* 减小左右内边距，适配移动端 */
            border-bottom: 1px solid #e9ecef;
            display: flex; /* 新增：导航容器内部flex布局 */
            align-items: center; /* 垂直居中 */
            justify-content: space-between; /* 左右内容分开 */
            height: 60px;
            box-sizing: border-box;
            /* overflow: hidden; 移除此行以允许下拉菜单正常显示 */
        }

        /* LOGO样式 */
        .logo {
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }

        /* Logo和汉堡按钮容器 */
        .logo-area {
            display: flex;
            align-items: center;
            flex-shrink: 0; /* 防止LOGO区域被压缩 */
        }

        /* 导航功能区（居右） */
        .nav-content {
            display: flex;
            align-items: center;
            gap: 25px; /* 减小元素间距，移动端更紧凑 */
            flex-shrink: 0; /* 防止功能区被压缩 */
        }

        /* 通用按钮样式 */
        .btn {
            padding: 4px 8px;
            font-size: 14px;
            border-radius: 4px;
            border: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap; /* 按钮文字不换行 */
        }

        /* 充值/购买按钮样式 */
        .btn-recharge {
            background-color: #007bff;
            color: white;
        }
        .btn-recharge:hover {
            background-color: #0056b3;
        }

        .btn-buy {
            background-color: #28a745;
            color: white;
        }
        .btn-buy:hover {
            background-color: #1e7e34;
        }

        /* 用户名下拉菜单容器 */
        .user-dropdown {
            position: relative;
            cursor: pointer;
            flex-shrink: 0; /* 防止用户名被压缩 */
        }

        /* 用户名样式 */
        .user-name {
            color: #333;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 4px;
            white-space: nowrap; /* 用户名不换行 */
        }

        /* 下拉菜单内容（默认隐藏） */
        .dropdown-menu {
            position: absolute;
            top: 100%;
            right: 0;
            background-color: white;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            min-width: 120px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            list-style: none;
            padding: 8px 0;
            display: none;
            z-index: 10000; /* 提高z-index确保不被遮挡 */
            margin-top: 2px; /* 增加顶部间距 */
        }

        /* 下拉菜单项 */
        .dropdown-menu li {
            padding: 4px 16px;
        }

        .dropdown-menu li a {
            color: #333;
            text-decoration: none;
            font-size: 14px;
            display: flex; /* 让图标和文字对齐 */
            align-items: center;
            gap: 8px; /* 图标和文字间距 */
        }

        /* 退出登录图标样式（无颜色/纯色） */
        .logout-icon {
            color: #333; /* 无颜色，和文字同色 */
            font-size: 12px; /* 图标大小 */
        }

        .dropdown-menu li:hover {
            background-color: #f8f9fa;
        }

        /* 鼠标悬浮时图标和文字变色 */
        .dropdown-menu li:hover a,
        .dropdown-menu li:hover .logout-icon {
            color: #007bff;
        }

        /* 显示下拉菜单 */
        .dropdown-show {
            display: block;
        }

        /* 金额/点数文本样式 */
        .account-info {
            font-size: 14px;
            display: inline-block;
            color: #333;
            white-space: nowrap; /* 文本不换行 */
        }

        /* ============ 移动端适配样式 ============ */
        @media (max-width: 767px) {
            /* 手机端隐藏导航内容区域 */
            .nav-content {
                display: none !important;
            }
            /* 压缩LOGO区域间距 */
            .div-logo {
                margin-left: 0 !important;
            }
            .div-logo-title-t {
                font-size: 16px; /* 减小LOGO文字大小 */
                margin-left: 8px !important;
            }
            .hamburger {
                margin-left: 15px !important; /* 减小汉堡按钮与LOGO间距 */
            }

            /* 隐藏余额/点数的文字描述，只保留数值（可选，根据需求调整） */
            .account-info {
                font-size: 12px;
                max-width: 60px; /* 限制宽度，防止溢出 */
                overflow: hidden;
                text-overflow: ellipsis;
            }
            /* 进一步精简：仅在超小屏隐藏文本，保留按钮 */
            @media (max-width: 480px) {
                .account-info {
                    display: none; /* 超小屏直接隐藏余额/点数文本 */
                }
                .nav-content {
                    gap: 5px; /* 进一步减小按钮间距 */
                }
                .btn {
                    padding: 3px 6px;
                    font-size: 12px; /* 减小按钮文字大小 */
                }
                .user-name {
                    font-size: 12px; /* 减小用户名字体大小 */
                }
            }

            /* 下拉菜单适配移动端 */
            .dropdown-menu {
                min-width: 100px; /* 减小下拉菜单宽度 */
            }
            .dropdown-menu li a {
                font-size: 12px;
            }
        }