@charset "utf-8";
/* CSS Document */
body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, input, textarea, p, blockquote {
    margin: 0;
    padding: 0;
    position: 0;
    font-size: 12px;
    font-family: "Microsoft YaHei";
}

fieldset, img {
    border: 0;
}

address, caption, cite, code, dfn, em, strong, th, var {
    font-style: normal;
}

ol, ul {
    list-style: none;
}

li {
    text-decoration: none;
}

caption, th {
    text-align: left;
}

h1, h2, h3, h4, h5, h6, samp {
    font-size: 100%;
    font-family: "Microsoft YaHei";
}

abbr, acronym {
    border: 0;
}

fieldset {
    display: inline;
}

button {
    line-height: 1.2;
    vertical-align: middle;
    cursor: pointer;
}

a {
    text-decoration: none;
    color: #333333;
    font-size: 12px;
    font-family: "Microsoft YaHei";
}

    a:hover {
        color: #FF0000;
        text-decoration: none;
    }

/* ========== 深色背景区块内的链接全部强制白字 ==========
   注意：.tab-nav 下既有深色条也有浅/白卡片（.content-link / .mini-card /
   .desc-block-text 等是浅灰背景，上面白字会看不清）。所以不能直接写
   .tab-nav a —— 仅覆盖 tab-nav 里"深青绿背景子容器"（.tab-titles /
   .category-row / .content-area —— 不含白卡片）内部的 <a>，以及
   第一部分菜单 / 走马 / 友情链接等整区为深色的容器。 */
.menuDiv a,
.menuDiv a:visited,
.ul_tj a, .ul_tj a:visited,
.ul_tj1 a, .ul_tj1 a:visited,
.main_kaijiang a,
.main_kaijiang a:visited,
.ul_links a,
.ul_links a:visited,
.links a,
.links a:visited,
/* tab-nav：只在深色条/面板容器里的 <a> 变白，
   排除浅白卡片：.content-link / .mini-card / .desc-block */
.tab-nav .tab-titles > a,
.tab-nav .tab-titles a,
.tab-nav .category-row > a,
.tab-nav .category-row a:not(.content-link):not(.mini-card-main):not(.desc-copy-btn):not([class*="mini"]),
.tab-nav .content-area > a,
.tab-nav .content-area a:not(.content-link):not(.mini-card-main):not(.desc-copy-btn):not([class*="mini"]):not([class*="desc-"]),
.tab-nav .content-desc-blocks a:not(.desc-copy-btn):not([class*="desc-addr"]) {
    color: #FFFFFF !important;
}
.menuDiv a:hover,
.ul_tj a:hover,
.ul_tj1 a:hover,
.main_kaijiang a:hover,
.ul_links a:hover,
.links a:hover,
.tab-nav .tab-titles a:hover,
.tab-nav .category-row a:hover,
.tab-nav .content-area a:not(.content-link):not(.mini-card-main):hover {
    color: #FBEE0C !important;   /* 青绿底上的鲜黄高亮，清晰不糊 */
}

    a:active {
        color: #333333;
        text-decoration: none;
    }

p, samp, span, strong {
    font-size: 12px;
    font-family: "Microsoft YaHei";
}

.clear {
    clear: both;
}

.col_hs {
    color: #FF0000 !important;
}

.col_ls {
    color: #0000FF !important;
}



body {
    background: #f1f2f6;
}

.top_bg {
    height: 30px;
    background: #FFFFFF;
}

.top {
    width: 960px;
    height: 30px;
    line-height: 30px;
    margin: 0 auto;
}

.span_top {
    display: block;
    float: left;
    font-size: 14px;
    color: #FF0000;
}

.ul_top {
    overflow: hidden;
    float: right;
}

    .ul_top li {
        float: left;
        line-height: 30px;
        font-size: 14px;
        color: #FF0000;
    }

        .ul_top li a, .ul_top li a:visited {
            font-size: 14px;
            padding: 0 10px;
            display: block;
            color: #FF0000;
        }

            .ul_top li a:hover {
                color: #333333;
            }

.header_bg {
    height: 147px;
    background: url(../images/header_bg.jpg) repeat-x;
}

.header {
    width: 960px;
    overflow: hidden;
    margin: 0 auto;
    padding-top: 25px;
}

.logo {
    display: block;
    float: left;
    line-height: 74px;
    font-size: 50px;
    font-weight: 100;
    color: #fbee0c;
}

.main_bg {
    width: 960px;
    margin: 0 auto;
    background: #ffffff;
    border-left: 1px solid #e7e8ea;
    border-right: 1px solid #e7e8ea;
    border-bottom: 1px solid #e7e8ea;
    padding: 10px;
    position: relative;
}
.main_bg::after {
    content: "";
    display: block;
    clear: both;
}

.kaijiang {
    height: 36px;
    line-height: 36px;
    padding: 0 10px;
    border: 1px solid #e7e8ea;
}

#clock {
    display: inline;
    float: left;
    line-height: 36px;
    font-size: 14px;
    color: #333333;
    padding-right: 12px;
}

.img_gg {
    display: block;
    margin-top: 10px;
}

.biaoti {
    height: 38px;
    line-height: 38px;
    margin-top: 0px;
    background: #065446;
    margin-bottom: 1px;
    display: flex;
    align-items: center;
}

    .biaoti span {
        display: block;
        padding: 0 20px;
        text-align: center;
        color: #FFFFFF;
        font-size: 16px;
        letter-spacing: 2px;
        white-space: nowrap;
}

.ul_tj {
    width: 960px;
    display: block;
    background: #2eb09e;
    overflow: hidden;
}

    .ul_tj li {
        height: 48px;
        line-height: 48px;
        border-right: 1px solid #087d6d;
        float: left;
    }

        .ul_tj li a, .ul_tj li a:visited {
            display: block;
            width: 119px;
            text-align: center;
            font-size: 16px;
            color: #FFFFFF;
        }

            .ul_tj li a:hover {
                background: #087d6d;
                color: #FFFFFF;
            }

.img_icon {
    margin-right: 5px;
}

.ul_news {
    overflow: hidden;
    padding-top: 10px;
}

    .ul_news li {
        float: left;
        margin-right: 10px;
        line-height: 23px;
    }

        .ul_news li span {
            display: block;
            padding-right: 10px;
            height: 23px;
            background: #da5625 url(../images/icon_zxjc_01.jpg) right center no-repeat;
            padding-left: 7px;
            font-size: 14px;
            color: #FFFFFF;
        }

        .ul_news li a, .ul_news li a:visited {
            color: #da5625;
            font-size: 14px;
            font-weight: bold;
        }

            .ul_news li a:hover {
                color: #333333;
            }

.ul_tj1 {
    width: 960px;
    display: block;
    background: #2eb09e;
    overflow: hidden;
}

    .ul_tj1 li {
        height: 48px;
        line-height: 48px;
        border-right: 1px solid #087d6d;
        float: left;
    }

        .ul_tj1 li a, .ul_tj1 li a:visited {
            display: block;
            width: 119px;
            text-align: center;
            font-size: 16px;
            color: #FFFFFF;
            border-bottom: 1px solid #ffffff;
        }

            .ul_tj1 li a:hover {
                background: #087d6d;
                color: #FFFFFF;
            }

.links {
    width: 958px;
    overflow: hidden;
    border: 1px solid #2eb09e;
    margin-top: 10px;
}

.links_top {
    height: 38px;
    line-height: 38px;
    background: url(../images/links_bg.jpg) repeat-x;
    padding: 0 20px;
}

    .links_top span {
        font-size: 18px;
        font-weight: bold;
        color: #FFFFFF;
    }

.ul_links {
    overflow: hidden;
    padding: 10px;
}

    .ul_links li {
        float: left;
        line-height: 28px;
        font-size: 14px;
        color: #2eb09e;
    }

        .ul_links li a, .ul_links li a:visited {
            font-size: 14px;
            color: #2eb09e;
            padding: 0 10px;
            display: block;
        }

            .ul_links li a:hover {
                color: #333333;
            }

.footer {
    width: 960px;
    overflow: hidden;
    margin: 10px auto;
    text-align: center;
}

    .footer p {
        font-size: 12px;
        color: #666666;
        line-height: 28px;
    }

    .footer b {
        font-weight: 100;
        color: #da5625;
        font-size: 16px;
        margin-right: 10px;
    }
/* -------------菜单css代码----------begin---------- */
/* ⚠ .menuDiv 不要设置 z-index，避免创建独立层叠上下文把内部子菜单"关住"，
   让子菜单的 z-index 直接参与 body/main_bg 级别的层叠竞争，才能盖过下方 .mini-card 等 position:relative 元素 */
.menuDiv {
    background-color: #2eb09e;
    clear: both;
}
    /* 清除浮动 */
    .menuDiv::after {
        content: "";
        display: block;
        clear: both;
    }
    /* 仅一级 ul/li 设置 float:left（水平排列的导航项） */
    .menuDiv > ul,
    .menuDiv > ul > li {
        float: left;
    }
    /* 一级 li 重置 margin/padding，设置相对定位锚点 */
    .menuDiv > ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .menuDiv > ul > li {
        position: relative;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    /* 子菜单容器：固定宽度 120px 下方弹出，z-index=9999 直接在全局层叠中置于所有卡片/内容之上 */
    .menuDiv > ul > li > ul {
        position: absolute;
        top: 100%;
        left: 0;
        display: none;
        z-index: 9999;
        margin: 0;
        padding: 0;
        list-style: none;
        width: 120px;       /* 固定宽度与一级菜单项一致 */
        float: none !important;  /* 强制覆盖通用 float 继承 */
        box-shadow: 0 4px 12px rgba(0,0,0,0.25); /* 加个阴影明显一点 */
    }
    /* 子菜单内部所有 ul/li 一律不浮动，宽度填满 */
    .menuDiv > ul > li > ul li,
    .menuDiv > ul > li > ul ul {
        float: none !important;
        margin: 0;
        padding: 0;
        list-style: none;
        width: 100%;
    }
    .menuDiv > ul > li > ul > li {
        display: block;
    }
    /* 鼠标放在一级菜单上，显示二级菜单 */
    .menuDiv > ul > li:hover > ul {
        display: block;
    }
    /* 一级菜单 */
    .menuDiv > ul > li > a {
        width: 120px;
        line-height: 48px;
        color: #FFFFFF;
        font-size: 16px;
        text-align: center;
        border-right: 1px solid #087d6d;
        border-bottom: 1px solid #087d6d;
        display: block;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
        /* 在一级菜单中，鼠标放上去的样式 */
        .menuDiv > ul > li > a:hover {
            color: #ffff00;
            background:#5ec0b2;
        }
    /* 二级菜单 a：固定宽，块级显示 */
    .menuDiv > ul > li > ul > li > a {
        width: 120px;
        line-height: 36px;
        font-size: 14px;
        color: #ffffff;
        background-color: #087d6d;
        text-align: center;
        border-bottom: 1px solid #1ca18f;
        display: block;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* 在二级菜单中，第一个设置顶边框 */
    .menuDiv > ul > li > ul > li:first-child > a {
        border-top: 1px solid #1ca18f;
    }
    /* 在二级菜单中，鼠标放上去的样式 */
    .menuDiv > ul > li > ul > li > a:hover {
        color: #ffff00;
        background-color: #1ca18f;
    }
/* -------------菜单css代码----------end---------- */

/* =========================================================
   层叠上下文隔离（彻底解决：子菜单被下方 mini-card / 图片遮挡）
   思路：
   1) .tab-nav 整区创建独立层叠上下文 z=1，区内的所有图片卡片/hover:transform
      都被"关"在 z=1 内，永远无法越过
   2) 子菜单 <ul> z-index=9999 直接参与 body 级层叠，必然盖过 z=1 的整区
   3) .mini-card 取消 position:relative（transform 不需要 position），
      防止它创建自己的层叠上下文跑到子菜单前面
   ========================================================= */
.tab-nav {
    position: relative;
    z-index: 1;
    isolation: isolate;   /* 现代浏览器强制独立层叠上下文 */
}
.links,
.content-area,
.card-grid,
.grid-row {
    position: static;
    z-index: auto;
}
.mini-card,
.mini-card *,
.content-link,
.content-link * {
    z-index: auto;
}
.mini-card {
    position: static;    /* 去掉 relative，避免 transform:translateY 创建局部上下文 */
}
.mini-card:hover {
    transform: translateY(-6px);
}

/* =========================================================
   手机端响应式整理（≤768px）
   策略：
   1. 单一 @media (max-width:768px) 集中管理，分 10 个功能区写注释
   2. 覆盖顺序（从顶到下）：顶栏→头部logo/banner/价格→开奖栏+走马→第一部分导航抽屉→第二部分tab 3级→友链→价格模态框→footer
   3. 对内联/固定宽度一律 !important 压制
   4. 全局禁止横向滚动，消除溢出
   5. 所有固定 960px 容器 → width:100%;box-sizing:border-box;
   注意：已在 @media≤960 处理过 top/header/main_bg/ul_tj/links/footer 的 width=100%，
         这里做进一步收紧（字号/padding/网格）。
   ========================================================= */
@media (max-width: 768px) {
    /* === 0. 全局：禁止横向溢出 / 盒模型统一 === */
    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    *,
    *::before,
    *::after {
        box-sizing: border-box !important;
    }

    /* === 1. 顶栏（top_bg / top / span_top / ul_top）：两行紧凑居中 === */
    .top_bg { height: auto !important; min-height: 30px; }
    .top {
        width: 100% !important;
        height: auto !important;
        line-height: 22px !important;
        padding: 4px 8px !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }
    .span_top {
        float: none !important;
        display: block !important;
        text-align: center !important;
        font-size: 12px !important;
    }
    .ul_top {
        float: none !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        padding: 0 !important;
        margin-top: 2px !important;
    }
    .ul_top li {
        float: none !important;
        line-height: 20px !important;
        font-size: 12px !important;
    }
    .ul_top li a, .ul_top li a:visited {
        font-size: 12px !important;
        padding: 0 6px !important;
    }

    /* === 2. 头部：logo / banner 卡片堆叠 / 价格模块 2 列或堆叠 === */
    .header_bg {
        height: auto !important;
        padding: 10px 0 !important;
        background-size: cover !important;
    }
    .header {
        width: 100% !important;
        padding: 10px 6px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
    /* 【✅ 用户再次要求「h1 + div 一行显示」—— 应用合成一行：
       Row1 = h1.logo（左，自然宽度） + div.home-banner（右，吃满剩余宽度，内容右对齐）
       Row2 = 今日U价 + 实时金价 两个 uprice 模块 并排。 */
    .logo {
        float: none !important;
        display: block !important;
        width: auto !important;            /* 取消 100%，logo 保持文字自然宽度 */
        flex: 0 1 auto !important;         /* 不主动扩张；允许被收缩 */
        min-width: 0 !important;           /* flex 收缩防溢出 */
        max-width: 62% !important;         /* logo 最多占 62% 宽，不让 banner 被挤没 */
        text-align: left !important;       /* 左对齐：logo 在左，banner 在右 */
        font-size: 28px !important;
        line-height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .header-cards-wrap {
        float: none !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 6px !important;
        box-sizing: border-box !important;
        padding: 4px 2px !important;
    }
    .home-banner {
        /* 合成一行：取消 Row2 独占 100%，改为 Row1 右侧。 */
        width: auto !important;
        flex: 1 1 auto !important;         /* 主动吃满剩余空间 */
        min-width: 0 !important;           /* 允许收缩（防安卓 WebView 溢出换行） */
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: inline-flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;  /* 内容靠右，视觉上 h1 左 banner 右 */
        align-items: stretch !important;
        gap: 6px !important;
        padding: 4px 6px !important;
        margin-top: 0 !important;          /* 之前 mt:4px 是 Row2 间距，现在同一行归零 */
    }
    .home-banner .banner-img-wrap,
    .home-banner .banner-img-wrap img {
        width: 40px !important;             /* 42→40：缩小一点，保证和 logo 同排放得下 */
        height: 40px !important;
        max-width: none !important;
        max-height: none !important;
    }
    .home-banner .banner-title {
        font-size: 11px !important;
    }

    /* === 2b. 今日U价 / 实时金价 模块：手机上并排 2 列（放不下自动堆叠） === */
    .uprice-module {
        min-width: 120px !important;
        max-width: 49% !important;
        flex: 1 1 calc(50% - 6px) !important;
        padding: 8px 10px !important;
    }
    .uprice-title { font-size: 11px !important; }
    .uprice-main .uprice-val { font-size: 20px !important; }
    .uprice-unit { font-size: 10px !important; margin-left: 2px !important; }
    .uprice-chg { font-size: 11px !important; margin-top: 2px !important; }

    /* === 3. 开奖栏（.kaijiang / #clock）+ 走马 iframe === */
    .main_bg {
        width: 100% !important;
        padding: 6px 4px !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    .kaijiang {
        height: auto !important;
        line-height: 1.5 !important;
        padding: 6px 8px !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 6px !important;
        max-width: 100% !important;
    }
    #clock {
        float: none !important;
        line-height: 1.5 !important;
        font-size: 12px !important;
        padding: 0 !important;
        margin-right: 6px !important;
    }
    .main_bg iframe {
        width: 100% !important;
        /* 覆盖内联 style="max-width:960px"，手机端 iframe 严格占满父容器宽度，不允许横向溢出 */
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        display: block !important;
        margin: 0 auto !important;
    }
    /* iframe-wrap：手机端"上下不要有多余空间" ——
       取消之前加的 mb:12 / pb:10 / border-bottom:1px / display:flex，
       全部上下边距归零，iframe 与上下块紧贴。 */
    .iframe-wrap {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        border: none !important;
        border-bottom: none !important;
        border-top: none !important;
        background: none !important;
        box-sizing: border-box !important;
        display: block !important;  /* 非 flex，避免额外对齐空间 */
    }

    /* === 4. 快捷彩种行（.ul_tj / .ul_tj1）：flex 居中换行（原宽度 960px float） === */
    .ul_tj, .ul_tj1 {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        float: none !important;
        box-sizing: border-box !important;
    }
    .ul_tj li, .ul_tj1 li {
        float: none !important;
        height: 38px !important;
        line-height: 38px !important;
        border-right: none !important;
        border-bottom: 1px solid #087d6d !important;
    }
    .ul_tj li a, .ul_tj1 li a,
    .ul_tj li a:visited, .ul_tj1 li a:visited {
        width: auto !important;
        padding: 0 10px !important;
        font-size: 13px !important;
    }

    /* === 5. 第一部分老式菜单：手机端一行 4 个，与第二部分 .tab-titles 完全同布局 ===
       【🔑 用户明确反馈：之前用 flex-wrap + auto 还是"一行 2 个"老样子，和第二部分不一样】
       → 直接用和第二部分 .tab-titles 相同的 grid repeat(4) 结构，视觉对齐。
       经验 394432 FailureExperience 4：遇到"布局不一样"先列结构性差异：
       - 容器：之前 flex→现在 grid（与 tab-titles 的 grid 一致）
       - 列数：之前 auto→现在 repeat(4)（与 tab-titles 一致）
       - 子项：之前 width:auto+大 padding→现在 width:100%+小 padding（与 tab-title-item 一致）
       - 文字：之前 white-space:nowrap（导致 4 个塞不下自动换行）→ 现在 normal 允许换行（与 tab-title-item 一致）
       - 外观：之前大渐变胶囊→改小和 tab-title-item 同款 border-radius+颜色 */
    .menuDiv {
        display: grid !important;                          /* 🏁 和第二部分 .tab-titles 一致的 grid */
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;  /* 🏁 一行 4 个（与第二部分 tab-titles repeat(4) 完全一致） */
        grid-auto-flow: row;                               /* 🏁 不用 dense：点击一级时二级面板要插到"被点项的正下方"，dense 会把后续项回填空隙造成错乱 */
        gap: 4px !important;                               /* 🏁 和 tab-titles 档 @768 的 4px 相同 */
        padding: 6px !important;                           /* 🏁 和 tab-titles 6px padding 相同 */
        row-gap: 4px !important;
        column-gap: 4px !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
        margin-top: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;                      /* 🏁 改 visible：允许抽屉面板在 li 行下方正常展开不被裁切 */
    }
    .menuDiv .biaoti {
        grid-column: 1 / -1 !important;                    /* 🏁 标题 "平台系列/外围/澳门" 独占整行，其他格子按 4 列走 */
        width: 100% !important;
        padding: 2px 4px 0 !important;
        height: 34px !important;
        line-height: 34px !important;
        border-radius: 8px !important;
        margin-bottom: 2px !important;
    }
    .menuDiv .biaoti span {
        font-size: 14px !important;
        letter-spacing: 1px !important;
        padding: 0 12px !important;
    }
    .menuDiv > ul {
        display: contents !important;                      /* 🏁 使 ul/li 展开后直接进入 .menuDiv grid 容器，不受 ul 子项 flex 干扰 */
        margin: 0 !important;
        padding: 0 !important;
    }
    .menuDiv > ul > li {
        width: 100% !important;                            /* 🏁 grid 单元 100% 宽（和 .tab-title-item width:100% 完全一致） */
        margin: 0 !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        list-style: none !important;
    }
    .menuDiv > ul > li > a {
        display: flex !important;                          /* 🏁 和 .tab-title-item 同款 flex 居中 flex 结构 */
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        min-height: 40px !important;                       /* 🏁 16px 大字：高度 32→40，触控不顶边 */
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        line-height: 1.3 !important;                       /* 🏁 长名字换行两行时行距舒展 */
        padding: 8px 4px !important;                       /* 🏁 16px 大字：padding 加大 */
        font-size: 16px !important;                        /* 🏁 用户要求：一级字体统一 16px */
        border: 1px solid rgba(255, 255, 255, 0.28) !important; /* 🏁 和 tab-title-item 默认同款浅描边 */
        border-radius: 8px !important;                     /* 🏁 和 tab-title-item @768 8px radius 相同 */
        background: rgba(255, 255, 255, 0.15) !important;  /* 🏁 和第二部分 tab-title-item 默认背景色（index.php L434）完全统一 */
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;    /* 🏁 和 tab-title-item 同款阴影大小 */
        color: #ffffff !important;
        cursor: pointer !important;
        white-space: normal !important;                    /* 🏁 关键：取消 nowrap，允许 4 个字的「足球软件」等自动换行到第二行不溢出 */
        text-align: center !important;
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
        text-decoration: none !important;
        transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
    }
    .menuDiv > ul > li > a img {
        width: 16px !important;
        height: 16px !important;
        margin-right: 3px !important;
        margin-bottom: 1px !important;
        vertical-align: middle !important;
        flex-shrink: 0 !important;
    }
    .menuDiv > ul > li > a.m-active,
    .menuDiv > ul > li.expanded > a {
        /* 🏁 与第二部分 .tab-title-item.active（index.php L447-L452）完全相同的点击选中色：
           深青绿 90° 渐变 + 更亮描边 + 深阴影 */
        background: linear-gradient(90deg, #087d6d 0%, #065446 100%) !important;
        border-color: rgba(255, 255, 255, 0.45) !important;
        box-shadow: 0 4px 12px rgba(6, 84, 70, 0.38) !important;
        color: #ffffff !important;
    }
    /* 一级目录（平台系列/国外/澳门）标题条：手机上背景也统一成和 tab-titles 容器相近的深绿，不再是独立底色 */
    .menuDiv .biaoti {
        background: linear-gradient(90deg, #087d6d 0%, #065446 100%) !important;
        border: none !important;
        box-shadow: none !important;
    }
    /* === 手机端：点击一级标签，在下方显示二级（和第二部分 tab 点击下方出 panel 的交互一致）
       ☑️ 取消 hover 弹层，改为「点击时在 li 下展开」：
       - 取消之前的 display:none!important，让 ul.smallNav 作为展开块存在
       - 取消 ul > ul display:contents，改用 ul 作为独立 4 列 grid
       - expanded li 下的 smallNav grid-column:1/-1，占满该 ul 的整行（在一级按钮所在行的下方展开） */
    /* === 🔑 一级布局根因修复（用户截图：天子II/配合/澳利系列 一行一个竖排）===
       真实 DOM：.menuDiv > .biaoti + 【多个独立 <ul>，每个 ul 里只有 1 个一级 <li>】 + .mobile-drawer
       —— 之前错把 .menuDiv > ul 自身设成 display:grid + grid-column:1/-1 + width:100%，
          导致"每个 ul（含1个li）独占一整行" → 竖排一行一个。
       ✅ 正确：.menuDiv 本身已是上方 4 列 grid（L757）；这里让每个 <ul> display:contents，
          ul 不生成盒子，其内部 <li> 直接成为 .menuDiv grid 的 item → 一行 4 个。 */
    .menuDiv > ul {
        display: contents !important;       /* 关键：li 直接进入 .menuDiv 的 repeat(4) grid */
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        width: auto !important;
    }
    .menuDiv > ul > li {
        position: relative !important;
        float: none !important;             /* 覆盖 inline float:left（grid item 的 float 本就忽略，双保险） */
        width: 100% !important;
        margin: 0 !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        list-style: none !important;
    }
    /* 手机端二级目录：统一走 .mobile-drawer 抽屉（点一级调 toggleMobileSub 把子项 clone 进抽屉，抽屉内 .sub-grid 已是一行4个白卡）。
       桌面 hover 弹层 ul.smallNav 在手机端彻底隐藏，避免和抽屉重复。 */
    .menuDiv > ul > li > ul.smallNav {
        display: none !important;
    }
    /* 抽屉容器跨满整行（和 .biaoti 一样 grid-column:1/-1） */
    .menuDiv > .mobile-drawer {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    /* smallNav 内部的二级 li 们：强制一行 4 列（内嵌 25% 宽度 inline-block + vertical-align top） */
    .menuDiv > ul > li > ul.smallNav {
        /* 🏁 强制覆盖 inline style（老 DOM 内联 width:120px / position:absolute / display:none）—— 手机端必须变成「相对位置 + 整行全宽」才能一行四个 */
        position: relative !important;
        top: 4px !important;
        left: auto !important;
        z-index: 888 !important;
        float: none !important;
        display: none;                       /* li.expanded 时 display:block（外层已写） */
        width: auto !important;
        margin: 0 !important;
        padding: 10px 10px 8px !important;
        background: linear-gradient(180deg, #fdf6dd 0%, #f6e8b5 100%) !important;
        border-radius: 12px !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 3px 8px rgba(0, 0, 0, 0.1) !important;
        list-style: none !important;
        box-sizing: border-box !important;
    }
    .menuDiv > ul > li > ul.smallNav > li {
        float: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        display: inline-block !important;
        box-sizing: border-box !important;
        vertical-align: top !important;
        /* 🏁 强制一行 4 个二级按钮（width:25% 加 !important 打胜 inline style 的 width:100% / width:120px） */
        width: 25% !important;
        padding: 3px !important;
        position: relative !important;
    }
    .menuDiv > ul > li > ul.smallNav > li > a {
        display: block !important;
        text-align: center !important;
        line-height: 34px !important;
        /* 🏁 字体放大点：12 → 13px（用户截图2基准一级是 12px，二级比一级略小但依然大 1px） */
        font-size: 13px !important;
        padding: 0 5px !important;
        background: #ffffff !important;
        color: #2c3e50 !important;
        border: 1px solid rgba(230, 195, 80, 0.55) !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-height: 34px !important;
        height: auto !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
        white-space: normal !important;
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
        /* 🏁 选中色：和第一部分一级 li.expanded>a 同款奶油黄高亮（点击二级展开三级时同步高亮） */
        transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease !important;
    }
    .menuDiv > ul > li > ul.smallNav > li > a:hover,
    .menuDiv > ul > li > ul.smallNav > li > a.m-active,
    .menuDiv > ul > li > ul.smallNav > li.expanded > a {
        background: #fff8d6 !important;
        border-color: #fbe60c !important;
        color: #087d6d !important;
        box-shadow: 0 2px 6px rgba(251, 230, 12, 0.35) !important;
    }
    /* 🏁 三级 mini-sub：点击二级 → 三级在二级按钮正下方展开（整行宽，和 smallNav 同色系同款） */
    .menuDiv > ul > li > ul.smallNav > li > ul.mini-sub {
        display: none !important;
        position: relative !important;
        top: 4px !important;
        left: auto !important;
        float: none !important;
        width: auto !important;
        margin: 0 !important;
        padding: 8px 8px 6px !important;
        background: linear-gradient(180deg, #fffbeb 0%, #fcefa2 100%) !important;   /* 比 smallNav 再亮一度，视觉上"更深一级" */
        border-radius: 10px !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
        list-style: none !important;
        box-sizing: border-box !important;
    }
    .menuDiv > ul > li > ul.smallNav > li.expanded > ul.mini-sub { display: block !important; }
    .menuDiv > ul > li > ul.smallNav > li > ul.mini-sub > li {
        float: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        display: inline-block !important;
        vertical-align: top !important;
        box-sizing: border-box !important;
        width: 25% !important;                      /* 🏁 三级也是一行 4 个白卡，和二级对齐 */
        padding: 2px !important;
    }
    .menuDiv > ul > li > ul.smallNav > li > ul.mini-sub > li > a {
        display: block !important;
        text-align: center !important;
        line-height: 32px !important;
        font-size: 12px !important;
        padding: 0 4px !important;
        background: #ffffff !important;
        color: #2c3e50 !important;
        border: 1px solid rgba(230, 195, 80, 0.5) !important;
        border-radius: 7px !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-height: 32px !important;
        height: auto !important;
        white-space: normal !important;
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    }
    .menuDiv > ul > li > ul.smallNav > li > ul.mini-sub > li > a:hover {
        background: #fff3c4 !important;
        border-color: #fbe60c !important;
        color: #087d6d !important;
    }
    /* 屏蔽原来的 hover 展开：手机只认点击（桌面 >960 保留 hover，手机媒体查询内 hover 展开全部 display:none） */
    .menuDiv > ul > li:hover > ul.smallNav { display: none !important; }
    .menuDiv > ul > li > ul.smallNav > li:hover > ul.mini-sub { display: none !important; }

    /* 一级标签页抽屉（二级区域）：奶油米黄底 + 4 列白卡黑字
       🏁 注意：drawer 会被 JS 移动到被点 <li> 的后面（在 display:contents 的 <ul> 内部），
       所以这里一律用后代选择器 .menuDiv .mobile-drawer（不能用 > 直接子选择器）。 */
    .menuDiv .mobile-drawer { display: none; }
    .menuDiv .mobile-drawer.show {
        display: block !important;
        grid-column: 1 / -1 !important;              /* 🏁 作为 .menuDiv grid 的 item，占满整行 → 出现在被点标签行的正下方 */
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 10px 10px 8px !important;
        border: none !important;
        margin-top: 2px !important;
        background: linear-gradient(180deg, #fdf6dd 0%, #f6e8b5 100%) !important;
        border-radius: 12px !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 3px 8px rgba(0, 0, 0, 0.1) !important;
    }
    .menuDiv .mobile-drawer .sub-grid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 6px !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        box-sizing: border-box !important;
    }
    /* 二级 li（克隆自带内联 display:block;width:100%;float:none，这里全部重置为 grid 格子） */
    .menuDiv .mobile-drawer .sub-grid > li {
        float: none !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        box-sizing: border-box !important;
        position: relative !important;
    }
    .menuDiv .mobile-drawer .sub-grid > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 2px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 40px !important;
        line-height: 1.3 !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        padding: 6px 4px !important;
        background: #ffffff !important;
        color: #2c3e50 !important;
        border: 1px solid rgba(230, 195, 80, 0.55) !important;
        border-radius: 8px !important;
        box-shadow: 0 1px 3px rgba(200, 160, 40, 0.12) !important;
        text-align: center !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
        /* 🏁 错乱修复：覆盖克隆内联的 white-space:nowrap + text-overflow:ellipsis + overflow:hidden，
           长名字允许换行完整显示，不再截断/溢出格子 */
        white-space: normal !important;
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
        overflow: visible !important;
        text-overflow: clip !important;
        transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
    }
    .menuDiv .mobile-drawer .sub-grid > li > a img {
        width: 18px !important;
        height: 18px !important;
        max-width: 18px !important;
        max-height: 18px !important;
        object-fit: contain !important;
        flex-shrink: 0 !important;
        display: block !important;
    }
    .menuDiv .mobile-drawer .sub-grid > li > a:hover,
    .menuDiv .mobile-drawer .sub-grid > li.expanded > a {
        transform: translateY(-1px) !important;
        background: #fff8d6 !important;
        border-color: #e6b325 !important;
        color: #087d6d !important;
        box-shadow: 0 3px 7px rgba(230, 179, 37, 0.25) !important;
    }
    /* 🏁 三级：点击抽屉内二级 → 该 li 整行展开，mini-sub 在白卡下方整行显示，三级也一行 4 个 */
    .menuDiv .mobile-drawer .sub-grid > li.expanded { grid-column: 1 / -1 !important; }
    .menuDiv .mobile-drawer .sub-grid > li > ul {
        display: none !important;                          /* 默认隐藏（覆盖克隆内联 absolute 弹层） */
        position: static !important;
        top: auto !important;
        left: auto !important;
        float: none !important;
        width: 100% !important;
        margin: 6px 0 0 !important;
        padding: 8px 8px 6px !important;
        background: linear-gradient(180deg, #fffbeb 0%, #fcefa2 100%) !important;
        border-radius: 10px !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
        list-style: none !important;
        box-sizing: border-box !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }
    .menuDiv .mobile-drawer .sub-grid > li.expanded > ul { display: grid !important; }
    .menuDiv .mobile-drawer .sub-grid > li > ul > li {
        float: none !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        box-sizing: border-box !important;
    }
    .menuDiv .mobile-drawer .sub-grid > li > ul > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 34px !important;
        line-height: 1.3 !important;
        font-size: 12px !important;
        padding: 5px 4px !important;
        background: #ffffff !important;
        color: #2c3e50 !important;
        border: 1px solid rgba(230, 195, 80, 0.5) !important;
        border-radius: 7px !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
        text-align: center !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
    .menuDiv .mobile-drawer .sub-grid > li > ul > li > a:hover {
        background: #fff3c4 !important;
        border-color: #e6b325 !important;
        color: #087d6d !important;
    }

    /* === 6. 第二部分 tab 区：3 级分层 + 手机强自适应（2/4/2/3 列等宽网格） === */
    .tab-nav {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        border-radius: 0 !important;
        margin-top: 0 !important;          /* 紧贴上方资源区标题条，无白缝 */
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }
    /* 【✅ tab-titles 一行 5 个、整齐两行 —— 共 10 个一级标签，repeat(5) 正好 5+5。
       旧 repeat(4) 会排成 4+4+2 三行、末行仅 2 个留缺口（用户反馈「变成三行」）。
       注意：menuDiv 一级各组是 8/16 项，repeat(4) 整行整齐，故只改 tab-titles 不动 menuDiv/category-row。 */
    .tab-titles {
        display: grid !important;
        /* 🏁 10 个一级标签：一行 5 个正好整齐两行（4 列会排 3 行、末行只有 2 个留缺口） */
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 4px !important;
        padding: 6px !important;
        border-radius: 0 !important;
    }
    .tab-title-item {
        padding: 8px 4px !important;          /* 🏁 与第一部分 menuDiv 一级统一：16px 大字配 8px padding */
        font-size: 16px !important;           /* 🏁 用户要求：和上面 menuDiv 一级一样 16px */
        text-align: center !important;
        /* 🏁 单行不换行：长标签（如「国外/赛马」）超出时省略号截断，绝不换行把整行标签挤高（@768 列宽~148px，16px 文字宽松，此处为防御性兜底） */
        white-space: nowrap !important;
        line-height: 1.3 !important;          /* 大字行高略松，避免压字 */
        box-sizing: border-box !important;
        min-height: 40px !important;          /* 🏁 与 menuDiv 一级同款 40px 高度，两排标签整齐一致 */
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        border-color: rgba(255, 255, 255, 0.28) !important;  /* 🏁 与第一部分 menuDiv 一级默认描边完全一致 */
        background: rgba(255, 255, 255, 0.15) !important;    /* 🏁 与第一部分 menuDiv 一级默认背景半透明白蒙层完全一致 */
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
        color: #fff !important;
        transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease !important;
    }
    .tab-title-item.active {
        /* 🏁 统一点击选中色：和第一部分 menuDiv li.expanded > a（上一轮改完的）完全同款深青绿渐变 + 亮描边 + 深阴影 */
        background: linear-gradient(90deg, #087d6d 0%, #065446 100%) !important;
        border-color: rgba(255, 255, 255, 0.45) !important;
        box-shadow: 0 4px 12px rgba(6, 84, 70, 0.38) !important;
        color: #ffffff !important;
    }
    /* 🏁 点击标签下方出现二级目录：容器外层与第一部分 smallNav 同款奶油黄渐变圆角阴影
       （现在 category-row 自己有奶油色，把它的外层 panel 也统一，和平台系列展开视觉一模一样） */
    .tab-categories {
        padding: 0 6px 6px !important;
        box-sizing: border-box !important;
    }
    /* 🏁 抽屉化（仿"大时代"）：二级容器被 JS 移进 .tab-titles grid 后占满整行，
       奶油黄抽屉与上方标签行等宽对齐、紧贴被点标签那一行正下方（下一行标签被挤到抽屉之后）；
       桌面端 #tabCategories 不是 .tab-titles 子级，此规则不命中，桌面布局不变。 */
    .tab-titles > .tab-categories {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        margin: 2px 0 0 !important;
    }
    .tab-category-panel.active {
        display: block !important;
        margin-top: 4px !important;
        padding: 10px 10px 8px !important;
        background: linear-gradient(180deg, #fdf6dd 0%, #f6e8b5 100%) !important;   /* 🏁 与第一部分 smallNav 同色同款 */
        border-radius: 12px !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 3px 8px rgba(0, 0, 0, 0.1) !important;
        box-sizing: border-box !important;
    }
    /* 🏁 蓝箭头指的这块：新 tab 导航点一级后下方的二级图标卡区域
       强制一行 4 个（max-width 320px 也绝不允许变成 3/5 列）：用更长选择器 + 双重声明打胜桌面全局 auto-fill minmax(68px)
       同时与第一部分 smallNav 内部一行四个二级白卡 100% 对齐视觉 */
    :root body .tab-nav .tab-categories .tab-category-panel.active .category-row,
    .tab-nav .category-row {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;   /* 🏁 一行 4 个（用户蓝箭头明确指的这块） */
        grid-auto-flow: row !important;
        gap: 6px !important;
        padding: 0 !important;                    /* 外层 .tab-category-panel.active 已统一奶油黄+padding 10/10/8，这里不再重复留白 */
        background: none !important;              /* 外层 panel 统一奶油黄，内层 row 不再重复做渐变背景 */
        border: none !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
        width: 100% !important;
    }
    :root body .tab-nav .tab-categories .tab-category-panel.active .category-item,
    .tab-nav .category-item {
        padding: 7px 4px !important;
        min-height: 40px !important;          /* 🏁 与第一部分 menuDiv 二级白卡同款高度，整齐统一 */
        height: auto !important;
        padding-bottom: 9px !important;
        border-radius: 8px !important;
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        flex: 1 1 auto !important;                 /* 取消桌面端 flex:0 0 auto，避免某列被撑大破坏 4 列 */
        display: flex !important;
        flex-direction: row !important;            /* ✅ 图标和文字同一行（原 column 图标压在文字上方） */
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        /* 🏁 与第一部分 smallNav 内部白卡 1:1 同视觉：纯白背景 + 浅金黄描边 + 柔阴影 */
        background: #ffffff !important;
        border: 1px solid rgba(230, 195, 80, 0.55) !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
    }
    :root body .tab-nav .tab-categories .tab-category-panel.active .category-item img,
    .tab-nav .category-item img {
        width: 16px !important;                    /* ✅ 图标缩小与文字同一行 */
        height: 16px !important;
        max-width: 16px !important;
        max-height: 16px !important;
        object-fit: contain !important;
        flex-shrink: 0 !important;
        display: block !important;
    }
    :root body .tab-nav .tab-categories .tab-category-panel.active .category-item span,
    .tab-nav .category-item span {
        font-size: 13px !important;           /* 🏁 与第一部分 menuDiv 二级白卡文字同款 13px */
        line-height: 1.25 !important;
        width: auto !important;               /* ✅ 同行布局：文字按内容自适应宽度，与图标作为整组居中 */
        max-width: 100% !important;
        flex: 0 1 auto !important;
        font-weight: 500 !important;
        color: #2c3e50 !important;
        text-align: center !important;
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        min-width: 0 !important;
    }
    /* ✅ 无图标的卡：取消桌面端给文字预留的顶部空隙（横向同行不需要） */
    :root body .tab-nav .tab-categories .tab-category-panel.active .category-item:not(:has(img)) span,
    .tab-nav .category-item:not(:has(img)) span { margin-top: 0 !important; }
    /* 🏁 选中高亮：和第一部分 smallNav 二级 li.expanded>a 完全同款（奶油黄底 + 金黄描边 + 深绿字），用户要求「点击标签和平台系列一样」 */
    :root body .tab-nav .tab-categories .tab-category-panel.active .category-item.active,
    .tab-nav .category-item.active {
        background: #fff8d6 !important;
        border-color: #fbe60c !important;
        color: #087d6d !important;
        box-shadow: 0 2px 6px rgba(251, 230, 12, 0.35) !important;
    }
    :root body .tab-nav .tab-categories .tab-category-panel.active .category-item.active span,
    .tab-nav .category-item.active span { color: #087d6d !important; }

    /* 🏁 三级抽屉（仿一级"大时代"抽屉）：点二级白卡后 JS 把对应 .content-panel 移进 .category-row
       这个 4 列 grid，插到「被点卡片所在行的最后一张白卡」之后；此规则让它占满整行，
       青绿渐变内容条（白字链接需要深底）紧贴被点卡片行正下方，后续白卡被挤到内容条之后。
       桌面端 DOM 不移动（JS 仅 ≤960px 才移），此规则不命中，桌面布局不变。 */
    :root body .tab-nav .tab-categories .tab-category-panel.active .category-row > .content-panel.active,
    .tab-nav .category-row > .content-panel.active {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin: 2px 0 4px !important;
        padding: 8px !important;
        background: linear-gradient(180deg, #1f9e8d 0%, #2eb09e 100%) !important;
        border-radius: 8px !important;
    }
    /* 三级内容已内联到卡片行之间 → 原 .content-area 空容器隐藏，避免底部多一条空青绿条 */
    :root body .tab-nav .tab-category-panel.content-inline > .content-area,
    .tab-nav .tab-category-panel.content-inline > .content-area {
        display: none !important;
    }

    /* 三级/四级内容：紧凑自适应 —— 一行能放几个放几个（auto-fill），不再固定 3/2 列。
       mini 图标卡 min 92px（图标 34px）：480/485 宽一行 4 个、390 宽一行 3 个；
       文字链接卡 min 60px（12px 字，用户要求 2026-09-01 热门系列一行 5-6 个）：
       实测 480/485 一行 6 个（链接 ~66px）、390 一行 5 个（链接 ~63px）；更宽屏自动更多列。
       链接一律单行不增高，长名字超出省略号（.content-link white-space:nowrap）。 */
    .content-area { padding: 8px !important; }
    .card-grid {
        grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)) !important;
        gap: 6px !important;
    }
    .content-grid {
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)) !important;
        gap: 6px !important;
    }
    .mini-card {
        padding: 6px 3px 5px !important;
        min-width: 0 !important;
        width: 100% !important;
        border-radius: 8px !important;
    }
    .mini-card-main img {
        width: 34px !important;
        height: 34px !important;
        margin-bottom: 2px !important;
    }
    .mini-card-name {
        font-size: 10px !important;
        line-height: 1.15 !important;
        width: 100% !important;
        max-width: 100% !important;
        /* mini 卡站名：中文避免 break-all 拆字导致一行歪歪扭扭 */
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
    }
    .content-link {
        padding: 8px 6px !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        min-width: 0 !important;
        width: 100% !important;
        /* 用户要求（2026-09-01）：一行 5-6 个但标签不许被挤高 —— 单行 nowrap，
           长名字超出显示省略号，所有链接高度统一（不折行、不用 line-clamp） */
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
    }

    /* 三级标签条（通用系列/国外网/全国开奖比分网/市场网 的下级标签，render_cj_tabs 输出）：
       用户要求（2026-09-01）"和热门系列一样" —— 等宽紧凑网格一行 5-6 个、单行不增高。
       根因：白卡规则给 .category-item 加了 width:100%+flex:1，在 flex 容器里每个标签撑满整行
       （实测一行只排 1 个、标签宽 408px）；改 grid 后标签填满等宽格子，长名省略号。 */
    .tab-nav .category-row-sub {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)) !important;
        gap: 4px !important;
        padding: 6px !important;
        margin-bottom: 8px !important;
        box-sizing: border-box !important;
    }
    :root body .tab-nav .tab-categories .tab-category-panel.active .category-row-sub .category-item,
    .tab-nav .category-row-sub .category-item {
        width: 100% !important;              /* grid 项填满等宽格子 */
        flex: none !important;               /* 取消白卡 flex:1 1 auto 拉伸 */
        min-height: 0 !important;            /* 取消白卡 40px 固定高，按内容紧凑 */
        height: auto !important;
        padding: 5px 2px !important;
        gap: 0 !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
    }
    :root body .tab-nav .tab-categories .tab-category-panel.active .category-row-sub .category-item span,
    .tab-nav .category-row-sub .category-item span {
        font-size: 12px !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;      /* 单行不折行、不挤高 */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
        width: 100% !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        text-align: center !important;
    }

    /* 四级抽屉（通用系列/国外网/全国开奖比分网/市场网 点三级标签后）：
       四级站点面板移进 .category-row-sub 后全宽显示在「被点标签所在行」正下方，
       仿一/二级抽屉。chips 条 ≤768 为 grid（grid-column 全宽）；透明背景露出 content-panel
       青绿底，白色 mini-card 与桌面端视觉一致。 */
    :root body .tab-nav .tab-categories .tab-category-panel.active .category-row-sub > .sub-panel.active,
    .tab-nav .category-row-sub > .sub-panel.active {
        grid-column: 1 / -1 !important;
        flex: 0 0 100% !important;           /* 769-960 flex 容器下独占整行 */
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin: 2px 0 6px !important;
        padding: 0 !important;
        background: transparent !important;
    }
    .desc-block-text {
        padding: 8px 10px !important;
        font-size: 12px !important;
        line-height: 1.55 !important;
    }
    .desc-addr-line { flex-wrap: wrap; }

    /* === 7. 友情链接（links / ul_links）：flex wrap 居中紧凑 === */
    .links {
        width: 100% !important;
        max-width: 100% !important;
        /* 基础层 .links width:958px + border:1px solid #2eb09e → 不加 box-sizing 时，
           手机端虽然 width:100%，但 border:1px 会让实际总宽 = 100% + 2px，
           导致右侧溢出 2px，和其他 div 的 100% 右侧不整齐。 */
        box-sizing: border-box !important;
        margin-top: 8px !important;
    }
    .links_top {
        height: auto !important;
        line-height: 32px !important;
        padding: 2px 12px !important;
    }
    .links_top span {
        font-size: 14px !important;
    }
    .ul_links {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        float: none !important;
        width: 100% !important;
        padding: 6px 4px !important;
        margin: 0 !important;
    }
    .ul_links li { float: none !important; line-height: 22px !important; }
    .ul_links li a, .ul_links li a:visited {
        font-size: 12px !important;
        padding: 0 6px !important;
        color: #2eb09e !important;
    }

    /* === 8. 价格模态框：手机上 95% 宽、小 padding、小字号 === */
    .uprice-modal, .gold-kline-modal {
        width: 95% !important;
        max-width: 480px !important;
        padding: 16px 12px !important;
        margin: 20px auto !important;
    }
    .uprice-modal-title { font-size: 16px !important; }
    .uprice-modal-sub { font-size: 12px !important; margin-top: 2px !important; }
    .uprice-search input {
        font-size: 13px !important;
        padding: 8px 10px !important;
    }
    .uprice-search button {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }
    .gold-kline-price { font-size: 18px !important; }
    .gold-kline-price small { font-size: 11px !important; }

    /* === 9. Footer：居中紧凑 === */
    .footer {
        width: 100% !important;
        margin: 10px auto !important;
        padding: 0 8px !important;
        box-sizing: border-box !important;
    }
    .footer p {
        font-size: 11px !important;
        line-height: 1.6 !important;
        padding: 0 !important;
    }
    .footer b {
        font-size: 13px !important;
        display: block !important;
        margin-bottom: 4px !important;
        margin-right: 0 !important;
    }
}