/*!
 * 移动端 App 风格样式 —— 对齐《需求/移动端.png》设计稿
 *
 * 设计基调：近黑底 + 主题色强调 + 大圆角卡片 + 紧凑顶栏。
 * 生效范围：仅 <= 820px（与模板既有 show-mobile 断点一致），桌面端完全不受影响。
 *
 * 全端统一的关键：模板已有一套 `--tpl-*` 主题变量（91 个 CSS 文件在用），
 * 本文件在移动端把这套变量整体重映射为 App 配色，因此
 * 列表页 / 详情页 / 播放页 / 会员中心 / 专题 / 排行 等所有页面
 * 都会自动跟随同一套底色、描边和文字色 —— 不用逐页改样式表。
 *
 * 主题色唯一来源：`:root` 里的 `--mapp-accent`（默认金色 #f5c13d）。
 * 想换成站点品牌绿 #40cc92，只改这一行即可全站生效。
 *
 * 权重说明：模板旧样式大量使用 `#topnav` 前缀，权重高于普通类名选择器；
 * 因此顶栏相关覆盖统一用 `#topnav` 前缀 + 必要的 `!important`。
 */

/* ==========================================================================
   0. 主题变量
   ========================================================================== */
:root {
    /* —— 主题色：全站唯一来源（改这里即可整体换色）—— */
    --mapp-accent:      #f5c13d;   /* 主强调色（金） */
    --mapp-accent-2:    #ffb020;   /* 强调色渐变末端 */
    --mapp-accent-light:#ffd469;   /* 强调色渐变起点 */
    --mapp-accent-soft: rgba(245, 193, 61, .14);
    --mapp-accent-glow: rgba(245, 193, 61, .16);
    --mapp-accent-line: rgba(245, 193, 61, .45);
    --mapp-accent-ink:  #1a1200;   /* 强调色上的文字色 */

    --mapp-bg:          #0b0d12;   /* 页面底色 */
    --mapp-surface:     #151922;   /* 卡片面 */
    --mapp-surface-2:   #1c212c;   /* 次级面 */
    --mapp-line:        rgba(255, 255, 255, .08);
    --mapp-line-strong: rgba(255, 255, 255, .14);

    --mapp-text:        #f2f5fa;
    --mapp-text-2:      #c9cfdb;
    --mapp-text-3:      #8b93a3;

    --mapp-red:         #e5343c;   /* 「原创」角标 */
    --mapp-orange:      #ff6b1a;   /* 「热更中」角标 */

    --mapp-radius:      14px;
    --mapp-radius-sm:   10px;
    --mapp-gap:         10px;
    --mapp-pad:         12px;
}

/* 把站点主题变量整体映射到 App 配色（移动端生效，全站所有页面跟随） */
@media screen and (max-width: 820px) {
    html:root,
    html:root body,
    html:root body.bstem {
        --tpl-accent:         var(--mapp-accent);
        --tpl-accent-hover:   var(--mapp-accent-2);
        --tpl-accent-muted:   var(--mapp-accent-soft);
        /* 站点里若干组件用 var(--tpl-primary,#40cc92)，但该变量从未定义，
           实际一直取的是写死的绿色回退值 —— 这里补上定义，让它们跟随主题色 */
        --tpl-primary:        var(--mapp-accent);

        --tpl-bg-base:        var(--mapp-bg);
        --tpl-bg-muted:       var(--mapp-surface);
        --tpl-bg-login:       var(--mapp-bg);

        --tpl-border-soft:    var(--mapp-line);
        --tpl-border:         var(--mapp-line-strong);

        --tpl-text:           #c9cfdb;
        --tpl-text-strong:    var(--mapp-text);
        --tpl-text-muted:     #8b93a3;
        --tpl-text-subtle:    #6c7484;
        --tpl-text-on-inverse: var(--mapp-accent-ink);
    }
}


/* ==========================================================================
   1. 移动端顶栏：改成 App 顶栏（logo | 分类 | 搜索 | 功能图标）
   ========================================================================== */
@media screen and (max-width: 820px) {
    #topnav .mobile-head .head_box {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        min-height: 52px !important;
        height: auto !important;
        padding: 6px var(--mapp-pad) !important;
        background: var(--mapp-bg) !important;
        background-image: none !important;
        border-bottom: 1px solid var(--mapp-line) !important;
        box-shadow: none !important;
        position: relative !important;
        z-index: 120;
    }

    #topnav .mobile-head .header {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        background-image: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    #topnav .mobile-head .head_a {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* logo */
    #topnav .mobile-head .head_logo {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 92px !important;
        overflow: hidden;
    }
    #topnav .mobile-head .head_logo .mac-logo,
    #topnav .mobile-head .head_logo .mac-logo a,
    #topnav .mobile-head .head_logo .logo {
        display: block !important;
        max-height: 28px !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
    }
    #topnav .mobile-head .head_logo img {
        max-height: 28px !important;
        width: auto !important;
        height: auto !important;
        display: block !important;
    }
    /* 顶栏是深色底，logo 固定用浅色版本 */
    #topnav .mobile-head .head_logo .black_logo { display: none !important; }
    #topnav .mobile-head .head_logo .white_logo { display: block !important; }

    /* 中间：分类按钮 + 搜索胶囊 */
    #topnav .mobile-head .head_b {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
    }

    #topnav .mobile-head .head_menu_b {
        flex: 0 0 auto !important;
        width: auto !important;
        position: relative !important;
    }
    #topnav .mobile-head .head_menu_b > a.menu {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        border: 1px solid var(--mapp-accent-line) !important;
        background: var(--mapp-accent-soft) !important;
        color: var(--mapp-accent) !important;
        font-size: 16px !important;
        text-decoration: none !important;
        box-shadow: none !important;
    }
    #topnav .mobile-head .head_menu_b > a.menu .menu_ico {
        color: var(--mapp-accent) !important;
        font-size: 16px !important;
    }

    /* 搜索区：必须撑开，否则会被旧样式压成一条竖线 */
    #topnav .mobile-head .head_search {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        position: relative !important;
        float: none !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
    }
    #topnav .mobile-head .head_search_inner,
    #topnav .mobile-head .head_search_row {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        display: block !important;
        position: relative !important;
        height: auto !important;
    }

    /* 搜索胶囊：暗底圆角药丸，左侧放大镜 */
    #topnav .mobile-head .head_search_capsule {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 10px !important;
        border-radius: 999px !important;
        background: var(--mapp-surface-2) !important;
        background-image: none !important;
        border: 1px solid var(--mapp-line) !important;
        box-shadow: none !important;
        overflow: hidden !important;
        position: relative !important;
    }
    #topnav .mobile-head .head_search_capsule::before {
        content: "\1F50D";
        font-size: 13px;
        line-height: 1;
        flex: 0 0 auto;
        opacity: .8;
    }
    #topnav .mobile-head .head_search_capsule_hot { display: none !important; }
    #topnav .mobile-head .head_search_capsule_field {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        height: 32px !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    /* 输入框必须撑满胶囊：旧样式没给宽度，窄输入框在深色底上会像一块白板 */
    #topnav .mobile-head .head_search_capsule_field input,
    #topnav .mobile-head .head_search_capsule_field .form_control {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 32px !important;
        padding: 0 0 0 4px !important;
        border: 0 !important;
        background: transparent !important;
        background-image: none !important;
        color: var(--mapp-text) !important;
        font-size: 13px !important;
        line-height: 32px !important;
        outline: none !important;
        box-shadow: none !important;
    }
    #topnav .mobile-head .head_search_capsule_field input::placeholder { color: var(--mapp-text-3); }
    #topnav .mobile-head .head_search_capsule_submit {
        flex: 0 0 auto !important;
        border: 0 !important;
        background: transparent !important;
        color: var(--mapp-accent) !important;
        padding: 0 2px !important;
        font-size: 12px !important;
        display: flex !important;
        align-items: center !important;
        gap: 3px !important;
    }
    /* 提交按钮：旧的是一张绿色 AI 图标（深色底上很跳），换成主题色文字 */
    #topnav .mobile-head .head_search_capsule_submit img { display: none !important; }
    #topnav .mobile-head .head_search_capsule_submit span {
        display: inline !important;
        color: var(--mapp-accent) !important;
        font-size: 12px !important;
        font-weight: 600 !important;
    }

    /* 右侧功能图标 */
    #topnav .mobile-head .head_user {
        flex: 0 0 auto !important;
        width: auto !important;
    }
    #topnav .mobile-head .head_user ul {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #topnav .mobile-head .head_user .top_ico {
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #topnav .mobile-head .head_user .top_ico > a,
    #topnav .mobile-head .head_user .top_link {
        width: 30px !important;
        height: 30px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        border: 1px solid var(--mapp-line) !important;
        background: var(--mapp-surface-2) !important;
        background-image: none !important;
        color: var(--mapp-accent) !important;
        box-shadow: none !important;
    }
    #topnav .mobile-head .head_user .head-nav-icon-theme {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
    }
    #topnav .mobile-head .head_user .head-nav-icon {
        width: 18px !important;
        height: 18px !important;
        max-width: none !important;
    }
    /* 顶栏统一走深色底，隐藏「浅底版」图标 */
    #topnav .mobile-head .head_user .head-nav-icon-theme--lightbg { display: none !important; }
    #topnav .mobile-head .head_user .head-nav-icon-theme--darkbg { display: flex !important; }
    #topnav .mobile-head .head_user .head-latest-url-flip__img--b { display: none !important; }
    /* 深色底上的单色图标（会员头像等）统一转白，避免看不清 */
    #topnav .mobile-head .head_user .mac_user .head-nav-icon {
        filter: brightness(0) invert(1);
        opacity: .9;
    }

    /* —— 移动端顶栏做减法 ——
       原来一整行塞了：logo / 分类 / 搜索 / 排行榜 / 最新网址 / 观看历史 / 消息通知 / 会员，
       在手机上挤成一排小圆点。移动端只保留「分类 + 搜索 + 我的」三件套：
         · 排行榜   → 全部分类抽屉里有
         · 最新网址 → 分享面板、右下角悬浮工具有
         · 观看历史 → 会员中心「观看记录」里有
         · 消息通知 → 会员中心「消息中心」里有 */
    #topnav .mobile-head .head_user li:has(> a[data-title="string_rank"]),
    #topnav .mobile-head .head_user li:has(> a.js-save-site-url),
    #topnav .mobile-head .head_user li:has(> a.mac_head_plays),
    #topnav .mobile-head .head_user li.mac-notify-bell {
        display: none !important;
    }
    /* 不支持 :has() 的浏览器兜底：至少把图标本身藏掉 */
    #topnav .mobile-head .head_user a[data-title="string_rank"],
    #topnav .mobile-head .head_user a.js-save-site-url,
    #topnav .mobile-head .head_user a.mac_head_plays,
    #topnav .mobile-head .head_user .mac-notify-bell__btn {
        display: none !important;
    }
    /* 被隐藏的空 li 不占位，剩余图标用 margin 保持间距 */
    #topnav .mobile-head .head_user ul { gap: 0 !important; }
    #topnav .mobile-head .head_user li > a,
    #topnav .mobile-head .head_user li > .top_link {
        margin: 0 3px !important;
    }
    /* logo 收紧、图标缩小，把空间让给搜索框 */
    #topnav .mobile-head .head_logo { max-width: 76px !important; }
    #topnav .mobile-head .head_user .top_ico > a,
    #topnav .mobile-head .head_user .top_link {
        width: 28px !important;
        height: 28px !important;
    }
}

/* ==========================================================================
   2. 首页整体底色 + 旧版移动端区块让位给 App 首页
   ========================================================================== */
@media screen and (max-width: 820px) {
    html,
    body.home-index-body {
        background: var(--mapp-bg) !important;
        background-image: none !important;
        color: var(--mapp-text) !important;
    }
    /* 顶栏容器（可能带主题背景图）也压成 App 底色 */
    #topnav.site-head-wrap {
        background: var(--mapp-bg) !important;
        background-image: none !important;
    }
    body.home-index-body .member-wrap,
    body.home-index-body .container,
    body.home-index-body .home-unified,
    body.home-index-body .home-detail {
        background: transparent !important;
        background-image: none !important;
    }
    /* 旧版响应式区块（分类速览/最新/排行榜/专题/标签墙）与新的 App 首页重复，移动端隐藏 */
    body.home-index-body .home-detail,
    body.home-index-body .vod-play-tagwall {
        display: none !important;
    }
    /* 给固定底栏留出空间 */
    body.home-index-body {
        padding-bottom: 62px !important;
    }
}

/* ==========================================================================
   3. 分类 chips 快捷条
   ========================================================================== */
.mapp {
    display: none;
}

@media screen and (max-width: 820px) {
    .mapp {
        display: block;
    }

    .mapp-chips {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px var(--mapp-pad) !important;
        margin: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        background: var(--mapp-bg) !important;
        background-image: none !important;
        border: 0 !important;
    }
    .mapp-chips::-webkit-scrollbar { display: none; }

    .mapp-chip {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 32px !important;
        padding: 0 16px !important;
        border-radius: 999px !important;
        border: 1px solid var(--mapp-line-strong) !important;
        background: transparent !important;
        color: #c9cfdb !important;
        font-size: 14px !important;
        line-height: 1 !important;
        text-decoration: none !important;
        white-space: nowrap;
    }
    .mapp-chip.is-active {
        background: linear-gradient(135deg, var(--mapp-accent-light), var(--mapp-accent-2)) !important;
        border-color: transparent !important;
        color: #1a1200 !important;
        font-weight: 700;
    }
    .mapp-chip:active { opacity: .85; }
}

/* ==========================================================================
   4. 区块标题（金色竖条）
   ========================================================================== */
@media screen and (max-width: 820px) {
    .mapp-sec {
        padding: 4px var(--mapp-pad) 18px !important;
        margin: 0 !important;
    }

    .mapp-sec-head {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 14px 0 12px !important;
        padding: 0 !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        color: var(--mapp-text) !important;
        line-height: 1.2 !important;
    }
    .mapp-sec-bar {
        display: block !important;
        width: 4px !important;
        height: 18px !important;
        border-radius: 2px !important;
        background: linear-gradient(180deg, var(--mapp-accent-light), var(--mapp-accent-2)) !important;
        flex: 0 0 auto !important;
    }
    .mapp-sec-more {
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        gap: 2px;
        font-size: 12px;
        font-weight: 400;
        color: var(--mapp-text-3);
        text-decoration: none;
    }
}

/* ==========================================================================
   5. 精选大卡（设计稿第一屏那张）
   ========================================================================== */
@media screen and (max-width: 820px) {
    .mapp-feature {
        display: flex !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 14px !important;
        margin: 0 !important;
        border-radius: var(--mapp-radius) !important;
        border: 1px solid var(--mapp-accent-line) !important;
        background:
            radial-gradient(120% 100% at 100% 0%, var(--mapp-accent-glow), transparent 60%),
            linear-gradient(135deg, #241d0e, #14171f 70%) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .35) !important;
    }

    .mapp-feature-main {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .mapp-feature-title {
        margin: 0 0 8px !important;
        font-size: 19px !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
        color: var(--mapp-accent) !important;
    }
    .mapp-feature-title a { color: inherit !important; text-decoration: none !important; }

    .mapp-feature-tags {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin: 0 0 8px !important;
    }
    .mapp-tag {
        display: inline-flex !important;
        align-items: center !important;
        height: 22px !important;
        padding: 0 8px !important;
        border-radius: 4px !important;
        border: 1px solid var(--mapp-accent-line) !important;
        background: transparent !important;
        color: #e8d9a8 !important;
        font-size: 12px !important;
        line-height: 1 !important;
    }
    .mapp-tag.is-plain {
        border-color: var(--mapp-line-strong) !important;
        color: var(--mapp-text-2) !important;
    }

    .mapp-feature-desc {
        margin: 0 0 12px !important;
        color: #d9c88f !important;
        font-size: 13px !important;
        line-height: 1.6 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .mapp-feature-btn {
        margin-top: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        height: 30px !important;
        padding: 0 14px !important;
        border-radius: 999px !important;
        background: linear-gradient(135deg, var(--mapp-accent-light), var(--mapp-accent-2)) !important;
        color: #1a1200 !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }
    .mapp-feature-btn .iconfont { font-size: 12px !important; color: inherit !important; }

    .mapp-feature-poster {
        position: relative !important;
        flex: 0 0 92px !important;
        width: 92px !important;
        align-self: flex-start !important;
        border-radius: var(--mapp-radius-sm) !important;
        overflow: hidden !important;
        background: var(--mapp-surface-2) !important;
    }
    .mapp-feature-poster img {
        display: block !important;
        width: 100% !important;
        height: 132px !important;
        object-fit: cover !important;
    }
}

/* ==========================================================================
   6. 双列卡片网格
   ========================================================================== */
@media screen and (max-width: 820px) {
    .mapp-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: var(--mapp-gap) !important;
        margin: var(--mapp-gap) 0 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .mapp-card { min-width: 0 !important; margin: 0 !important; padding: 0 !important; }

    .mapp-card-thumb {
        position: relative !important;
        display: block !important;
        border-radius: var(--mapp-radius-sm) !important;
        overflow: hidden !important;
        background: var(--mapp-surface-2) !important;
        aspect-ratio: 3 / 4 !important;
    }
    .mapp-card-thumb img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* 分类红角标 */
    .mapp-badge-red {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 2;
        display: inline-flex !important;
        align-items: center !important;
        height: 20px !important;
        padding: 0 6px !important;
        border-radius: 0 0 6px 0 !important;
        background: var(--mapp-red) !important;
        color: #fff !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }

    /* 「热更中 / 已完结」橙角标 */
    .mapp-badge-orange {
        position: absolute !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 2;
        display: inline-flex !important;
        align-items: center !important;
        height: 20px !important;
        padding: 0 6px !important;
        border-radius: 6px 0 0 0 !important;
        background: var(--mapp-orange) !important;
        color: #fff !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }
    .mapp-badge-orange.is-end {
        background: rgba(20, 23, 31, .88) !important;
        color: var(--mapp-text-2) !important;
    }

    .mapp-card-title {
        margin: 8px 0 2px !important;
        font-size: 14px !important;
        line-height: 1.35 !important;
        color: var(--mapp-text) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    .mapp-card-title a { color: inherit !important; text-decoration: none !important; }

    .mapp-card-meta {
        margin: 0 !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        color: var(--mapp-text-3) !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }
    .mapp-fire { font-size: 12px !important; line-height: 1 !important; }

    /* 底部版权 */
    .mapp-copyright {
        padding: 4px var(--mapp-pad) 24px !important;
        text-align: center !important;
    }
    .mapp-copyright .site-copyright,
    .mapp-copyright .site-copyright__text {
        background: transparent !important;
        color: var(--mapp-text-3) !important;
        font-size: 12px !important;
        line-height: 1.6 !important;
    }
    .mapp-copyright a { color: var(--mapp-text-2) !important; }
}

/* ==========================================================================
   7. 首页 Banner：暗底 + 金色圆点
   ========================================================================== */
@media screen and (max-width: 820px) {
    body.home-index-body .banstem,
    body.home-index-body .banstem .bgi_box,
    body.home-index-body .banstem .bgi,
    body.home-index-body .banstem .banstem_list {
        background: var(--mapp-bg) !important;
        background-image: none !important;
    }
    body.home-index-body .banstem .bgfd {
        background: transparent !important;
    }
    body.home-index-body .banstem .swiper-pagination {
        bottom: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
    }
    body.home-index-body .banstem .swiper-pagination .swiper-pagination-bullet {
        width: 5px !important;
        height: 5px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, .45) !important;
        opacity: 1 !important;
        transition: width .25s, background .25s;
    }
    body.home-index-body .banstem .swiper-pagination .swiper-pagination-bullet-active {
        width: 16px !important;
        background: var(--mapp-accent) !important;
    }
    body.home-index-body .banstem .hot_banner_box,
    body.home-index-body .banstem .banner-top {
        border-radius: var(--mapp-radius-sm) !important;
        overflow: hidden !important;
    }
    /* 骨架占位也走暗色，避免加载中出现一大块白 */
    body.home-index-body .home-skeleton-banner-item,
    body.home-index-body .home-skeleton-card,
    body.home-index-body .home-skeleton .thumb {
        background: var(--mapp-surface-2) !important;
    }
}

/* ==========================================================================
   8. 底部 Tab 导航
   ========================================================================== */
@media screen and (max-width: 820px) {
    #bottomNav {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 130 !important;
        display: flex !important;
        align-items: stretch !important;
        background: #0b0d12 !important;
        background-image: none !important;
        border-top: 1px solid var(--mapp-line) !important;
        box-shadow: none !important;
        padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    }
    /* 空壳容器（重复 include 出来的第二个 #bottomNav）不要渲染成一条空条 */
    #bottomNav:empty {
        display: none !important;
    }
    #bottomNav .bottom-nav-item {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        height: 46px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        color: var(--mapp-text-3) !important;
        text-decoration: none !important;
    }
    #bottomNav .bottom-nav-icon {
        width: 22px !important;
        height: 22px !important;
        display: block !important;
    }
    #bottomNav .bottom-nav-text {
        font-size: 11px !important;
        line-height: 1.2 !important;
    }
    /* 激活态只换图标与文字颜色，不整块填充
       （旧样式是 background:var(--tpl-accent)，在金色主题下会糊成一大块金色方块） */
    #bottomNav .bottom-nav-item.active {
        background: transparent !important;
        color: var(--mapp-accent) !important;
    }
    #bottomNav .bottom-nav-item.active .bottom-nav-text {
        color: var(--mapp-accent) !important;
    }
    /* VIP 会员态同理（旧样式是金色渐变块 + 棕色文字） */
    #bottomNav .bottom-nav-item--vip-member,
    #bottomNav .bottom-nav-item--vip-member.active {
        background: transparent !important;
    }
    #bottomNav .bottom-nav-item--vip-member .bottom-nav-text {
        color: var(--mapp-accent) !important;
    }

    /* 图标切换：bottom-nav.js 会给每个 tab 输出 4 张图
       （nor/sel × light/dark），两套同时显示会把导航条撑成两排。
       这里「先全隐藏，再按主题 + 状态精确放行一张」：
         未选中 → nor，激活 → sel；
         浅色主题用 light 那套，暗色主题（body.bstem）用 dark 那套，
         两者互斥，否则 light + dark 会一起冒出来变成上下两张图。 */
    #bottomNav .bottom-nav-icon { display: none !important; }
    body:not(.bstem) #bottomNav .bottom-nav-item:not(.active) .bottom-nav-icon.nor.light { display: block !important; }
    body:not(.bstem) #bottomNav .bottom-nav-item.active .bottom-nav-icon.sel.light { display: block !important; }
    body.bstem #bottomNav .bottom-nav-item:not(.active) .bottom-nav-icon.nor.dark { display: block !important; }
    body.bstem #bottomNav .bottom-nav-item.active .bottom-nav-icon.sel.dark { display: block !important; }
}

/* ==========================================================================
   9. 全站通用组件皮肤（移动端，所有页面生效）
   --------------------------------------------------------------------------
   变量重映射（第 0 节）已经解决了「用了 var(--tpl-*)」的部分；
   这里补的是仍然写死浅色的容器、表单、抽屉等，保证各页面观感一致。
   ========================================================================== */
@media screen and (max-width: 820px) {
    /* 页面底色与文字 */
    html,
    body {
        background: var(--mapp-bg) !important;
        background-image: none !important;
        color: var(--mapp-text-2) !important;
    }
    body.mac-mobile-dark {
        background: var(--mapp-bg) !important;
    }

    /* 布局容器 */
    .member-wrap,
    .member-wrap-bg,
    .container,
    .container-fluid {
        background: transparent !important;
        background-image: none !important;
    }

    /* 模块面板 / 内容盒子 */
    .pannel,
    .content_box,
    .content_detail,
    .module,
    .module-content,
    .detail_list,
    .detail_list_box > .detail_list,
    .mac-catalog-show__panel,
    .mac-catalog-filter,
    .user-panel,
    .my-panel {
        background: var(--mapp-surface) !important;
        background-image: none !important;
        border-color: var(--mapp-line) !important;
        color: var(--mapp-text-2) !important;
        box-shadow: none !important;
    }

    /* 面板标题 */
    .pannel_head,
    .pannel_head .title,
    .content_detail .title,
    .module-heading,
    .module-heading h2,
    .module-title {
        color: var(--mapp-text) !important;
        border-color: var(--mapp-line) !important;
    }
    .pannel_head .title,
    .module-heading h2 {
        border-left: 3px solid var(--mapp-accent) !important;
        padding-left: 10px !important;
    }

    /* 视频/文章列表卡 */
    .vodlist_item {
        background: var(--mapp-surface) !important;
        border-radius: var(--mapp-radius-sm) !important;
        overflow: hidden !important;
    }
    .vodlist_titbox {
        background: transparent !important;
    }
    .vodlist_title a {
        color: var(--mapp-text) !important;
    }
    .vodlist_sub {
        color: var(--mapp-text-3) !important;
    }

    /* 表单控件 */
    .layui-form .layui-input,
    .layui-form .layui-textarea,
    .layui-form select,
    .layui-input,
    .layui-textarea,
    .form_control,
    input[type="text"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="email"],
    textarea {
        background: var(--mapp-surface-2) !important;
        color: var(--mapp-text) !important;
        border-color: var(--mapp-line-strong) !important;
        box-shadow: none !important;
    }
    .layui-form .layui-input:focus,
    input:focus,
    textarea:focus {
        border-color: var(--mapp-accent) !important;
    }
    input::placeholder,
    textarea::placeholder {
        color: var(--mapp-text-3) !important;
    }

    /* 主按钮 / 强调按钮 */
    .layui-btn,
    .layui-btn-primary,
    .btn-submit,
    .btn-primary {
        background: var(--mapp-accent) !important;
        background-image: none !important;
        color: var(--mapp-accent-ink) !important;
        border-color: transparent !important;
        border-radius: var(--mapp-radius-sm) !important;
    }
    .layui-btn:hover {
        opacity: .88 !important;
    }

    /* 「全部分类」抽屉 */
    .all_menu,
    .all_menu_inner {
        background: var(--mapp-surface) !important;
        background-image: none !important;
        color: var(--mapp-text) !important;
    }
    .all_menu_overlay {
        background: rgba(0, 0, 0, .62) !important;
    }
    .all_menu_header,
    .all_menu_title {
        color: var(--mapp-text) !important;
        border-color: var(--mapp-line) !important;
    }
    .all-menu-label,
    .all-menu-tag {
        color: var(--mapp-text-2) !important;
    }
    .all-menu-tag.is-active,
    .all-menu-item.active .all-menu-label {
        color: var(--mapp-accent) !important;
    }

    /* 会员中心（user/*.html）的移动端导航条与内容区 */
    .m-nav,
    .mobile-nav {
        background: var(--mapp-surface) !important;
        border-color: var(--mapp-line) !important;
        color: var(--mapp-text) !important;
    }
    .mb-title {
        color: var(--mapp-text) !important;
    }
    #member,
    #left,
    #right {
        background: transparent !important;
    }

    /* 版权 / 分页 */
    .site-copyright,
    .site-copyright__text {
        background: transparent !important;
        color: var(--mapp-text-3) !important;
    }
    .paging,
    .paging ul li a {
        background: var(--mapp-surface) !important;
        color: var(--mapp-text-2) !important;
        border-color: var(--mapp-line) !important;
    }
    .paging ul li.active a,
    .paging ul li a:hover {
        background: var(--mapp-accent) !important;
        color: var(--mapp-accent-ink) !important;
    }

    /* 链接与强调色统一 */
    a {
        color: inherit;
    }
    .mac-btn-primary,
    .highlight,
    .text-accent {
        color: var(--mapp-accent) !important;
    }

    /* 移动端固定暗色，隐藏明暗切换按钮 */
    body.mac-mobile-dark .mycolor {
        display: none !important;
    }

    /* —— 页脚 —— */
    .foot,
    .foot-wrap,
    .theme-foot-text {
        background: var(--mapp-bg) !important;
        background-image: none !important;
        color: var(--mapp-text-3) !important;
        border-color: var(--mapp-line) !important;
    }
    .foot .color,
    .foot a {
        color: var(--mapp-text-3) !important;
    }
    .foot-logo-region .logo img {
        max-height: 34px !important;
        width: auto !important;
    }

    /* —— layui 通用组件（弹层/表单/表格/分页 全站都在用）—— */
    .layui-layer {
        background: var(--mapp-surface) !important;
        color: var(--mapp-text-2) !important;
        border-color: var(--mapp-line) !important;
    }
    .layui-layer-title {
        background: var(--mapp-surface-2) !important;
        color: var(--mapp-text) !important;
        border-color: var(--mapp-line) !important;
    }
    .layui-layer-content {
        background: var(--mapp-surface) !important;
        color: var(--mapp-text-2) !important;
    }
    .layui-layer-btn {
        background: var(--mapp-surface-2) !important;
        border-color: var(--mapp-line) !important;
    }
    .layui-layer-btn a {
        border-color: var(--mapp-line) !important;
        color: var(--mapp-text-2) !important;
        background: var(--mapp-surface-2) !important;
    }
    .layui-layer-btn .layui-layer-btn0 {
        background: var(--mapp-accent) !important;
        color: var(--mapp-accent-ink) !important;
        border-color: var(--mapp-accent) !important;
    }
    .layui-layer-setwin .layui-layer-btn a {
        background: var(--mapp-surface-2) !important;
    }
    .layui-tab-title {
        background: var(--mapp-bg) !important;
        color: var(--mapp-text-3) !important;
        border-color: var(--mapp-line) !important;
    }
    .layui-tab-bd {
        border-color: var(--mapp-line) !important;
    }
    .layui-table,
    .layui-table th,
    .layui-table td {
        background: var(--mapp-surface) !important;
        color: var(--mapp-text-2) !important;
        border-color: var(--mapp-line) !important;
    }
    .layui-table th {
        background: var(--mapp-surface-2) !important;
        color: var(--mapp-text) !important;
    }
    .layui-table tr:hover td {
        background: var(--mapp-surface-2) !important;
    }
    .layui-pager,
    .layui-pager span,
    .layui-pager a {
        background: var(--mapp-surface) !important;
        color: var(--mapp-text-2) !important;
        border-color: var(--mapp-line) !important;
    }
    .layui-pager .layui-laypage-curr .layui-laypage-em {
        background: var(--mapp-accent) !important;
        color: var(--mapp-accent-ink) !important;
    }
    .layui-form-radio,
    .layui-form-checkbox {
        background: var(--mapp-surface-2) !important;
        border-color: var(--mapp-line-strong) !important;
    }

    /* —— 站内搜索热词浮层 —— */
    .mac_results,
    .mac_results_hot,
    .head_hot_overlay,
    .head_hot_overlay_viewport,
    .head_hot_overlay_track,
    .hot_keys {
        background: var(--mapp-surface) !important;
        color: var(--mapp-text-2) !important;
        border-color: var(--mapp-line) !important;
    }
    .mac_results .mac_title,
    .hot_keys li {
        color: var(--mapp-text) !important;
    }

    /* —— 通用弹层容器（mac-pop-sheets 等）—— */
    .mac-pop-sheets,
    .mac-sheet {
        background: var(--mapp-surface) !important;
        color: var(--mapp-text-2) !important;
        border-color: var(--mapp-line) !important;
    }

    /* —— 收编仍然写死绿色的几处，保证主题色真正统一 —— */
    .mac-catalog-show .vod_all .screen_list:not(.sx_tz) li.hl > a {
        background-color: var(--mapp-accent-soft) !important;
        color: var(--mapp-accent) !important;
    }
    .search-hub__panel,
    .search-hub__panel--expanded,
    body.bstem.vod-search-hub-body .search-hub__panel,
    body.bstem.vod-search-hub-body .search-hub__panel--expanded {
        background:
            linear-gradient(var(--tpl-bg-muted), var(--tpl-bg-muted)) padding-box,
            linear-gradient(219deg, var(--mapp-accent), #7eb3fc, var(--mapp-accent)) border-box !important;
    }
    .head_hot_overlay_item_primary,
    body.bstem .head_hot_overlay_item.head_hot_overlay_item_primary {
        background: linear-gradient(90deg, var(--mapp-accent-soft), rgba(245, 193, 61, .07) 100%, transparent 0) !important;
    }
    .top_nav_more_btn:hover {
        background: var(--mapp-accent-soft) !important;
    }
    body.bstem .top_nav_more_btn:hover {
        background: var(--mapp-accent) !important;
        color: var(--mapp-accent-ink) !important;
    }
}

/* ==========================================================================
   10. 会员中心（移动端）
   ========================================================================== */
@media screen and (max-width: 820px) {
    /* 顶部头像 / 昵称 / 金币 */
    #member .name-tit,
    #member .member-head-main b {
        color: var(--mapp-text) !important;
    }
    #member .member-head-meta {
        color: var(--mapp-text-3) !important;
    }
    #member .name-vip-chip {
        color: var(--mapp-accent) !important;
    }
    #member .mac-avatar {
        border-color: var(--mapp-line-strong) !important;
    }

    /* VIP 横幅：旧的绿底绿按钮统一换成主题色 */
    #member .member-vip-banner {
        background: transparent !important;
        border-color: var(--mapp-line) !important;
    }
    #member .member-vip-banner__inner {
        background-image: none !important;
        background: linear-gradient(120deg, var(--mapp-accent-soft), rgba(21, 25, 34, .92)) !important;
    }
    #member .member-vip-banner__text {
        color: var(--mapp-text) !important;
    }
    #member .member-vip-banner__sub {
        color: var(--mapp-text-3) !important;
    }
    #member .member-vip-banner__btn--login,
    #member .member-vip-banner__btn--cta {
        background: var(--mapp-accent) !important;
        background-image: none !important;
        color: var(--mapp-accent-ink) !important;
        box-shadow: none !important;
    }

    /* 三个快捷入口卡（金币充值 / 每日签到 / 分享推广） */
    #member .member-quick-grid {
        gap: 10px !important;
    }
    #member .member-quick-card {
        background: var(--mapp-surface) !important;
        border-color: var(--mapp-line) !important;
        border-radius: var(--mapp-radius-sm) !important;
        box-shadow: none !important;
    }
    #member .member-quick-card__title {
        color: var(--mapp-text) !important;
    }
    #member .member-quick-card__hint {
        color: var(--mapp-orange) !important;
    }

    /* 移动端菜单列表：旧样式在深色底上文字对比度太低，这里提亮 */
    #member #left ul.show-mobile li a,
    #member #left ul.show-mobile li a span {
        color: var(--mapp-text) !important;
    }
    #member #left ul.show-mobile li a .ico-right {
        color: var(--mapp-text-3) !important;
    }
    #member #left ul.show-mobile li a:hover {
        background: var(--mapp-surface) !important;
    }

    /* 给右下角悬浮工具按钮留出空间，避免压住最后一项 */
    body#uindex {
        padding-bottom: 96px !important;
    }
}

/* ==========================================================================
   11. PC 端「手机优先」外壳
   --------------------------------------------------------------------------
   PC 访客（视口 > 820px）默认进入手机端模式：用手机壳 + iframe 加载当前页。
   iframe 视口宽度就是 390px，模板里上千条 @media (max-width:820px) 的
   移动端布局全部照常生效，不需要为 PC 另写一套布局。
   带 ?pc=1 可临时回到 PC 版。
   ========================================================================== */
html.mac-mpreview {
    background: #07080b !important;
}
/* PC 模式下不露出桌面版内容（外壳自己可见），避免解析过程中闪一下桌面布局。
   注意：这条只在 JS 确认外壳确实渲染出来后才会加类
   （mac-mpreview-body-hidden），万一外壳缺失就自动退回正常 PC 页面，不会白屏。 */
html.mac-mpreview-body-hidden body {
    visibility: hidden !important;
}
html.mac-mpreview .mac-mpreview-shell {
    visibility: visible !important;
}

.mac-mpreview-shell {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: none;
    flex-direction: column;
    background: #07080b;
    color: var(--mapp-text);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
html.mac-mpreview .mac-mpreview-shell {
    display: flex !important;
}

.mac-mpreview-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: #0b0d12;
}
.mac-mpreview-bar__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--mapp-accent);
}
.mac-mpreview-bar__desc {
    font-size: 12px;
    color: var(--mapp-text-3);
}
.mac-mpreview-bar__spacer { flex: 1 1 auto; }
.mac-mpreview-btn {
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: #1c212c;
    color: var(--mapp-text-2);
    font-size: 12px;
    cursor: pointer;
}
.mac-mpreview-btn:hover { color: var(--mapp-text); }
.mac-mpreview-btn.is-active {
    background: var(--mapp-accent);
    border-color: transparent;
    color: var(--mapp-accent-ink);
    font-weight: 700;
}

.mac-mpreview-stage {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: auto;
    padding: 20px;
}
.mac-mpreview-phone {
    position: relative;
    border-radius: 34px;
    border: 10px solid #1a1d24;
    background: var(--mapp-bg);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
    overflow: hidden;
    transform-origin: top center;
    flex: 0 0 auto;
}
.mac-mpreview-loading {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--mapp-bg);
    color: var(--mapp-text-3);
    font-size: 13px;
    text-align: center;
    line-height: 1.8;
}
.mac-mpreview-phone::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    width: 92px;
    height: 20px;
    margin-left: -46px;
    border-radius: 999px;
    background: #05060a;
    z-index: 5;
    pointer-events: none;
}
.mac-mpreview-phone iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}